Programmieren mit Yii2 Aufbau einer Community mit Abstimmungen, Kommentaren und Teilen

Was Sie erstellen werden

In diesem Programmierung mit der Yii2-Serie, Ich unterstütze die Leser beim Einsatz des Yii2-Frameworks für PHP. Sie könnten auch an meinem interessiert sein Einführung in das Yii-Framework, Hier werden die Vorteile von Yii erläutert und eine Übersicht über die Neuerungen in Yii 2.x gegeben.

Einführung

Im heutigen Tutorial werde ich Ihnen zeigen, wie Sie Yii erweitern können, um eine Site wie Reddit mit Voting, Kommentaren und Teilen zu simulieren.

Vor kurzem habe ich daran gearbeitet, meine persönliche Erweiterung der großartigen Yii Advanced-Vorlage zu erstellen. Die Vorlage bietet eine integrierte Benutzerregistrierung und -authentifizierung sowie mehrere Websites für Front-End- und Verwaltungswebsites.

Ich habe einige meiner neuesten Twitter-API-Episoden auf der frühen Version dieser Plattform erstellt. Ich folge Freunden im Namen von Benutzern und analysiere unsere Anhänger. Die von mir beschriebene Website, Twixxr, bildet die Grundlage für meine Yii-Anpassungsarbeit.

Das Hinzufügen von Kernfunktionen wie Abstimmen, Kommentieren und Teilen macht also viel Sinn. Wenn Sie Ihre Yii-Codebase mit diesen Features erweitern, wird das Erstellen neuer Websites schneller, einfacher und immer leistungsfähiger.

Fertig machen

Ich werde Sie mit drei Yii2-Plugins durchgehen:

Chiliec's Yii2 Voting Extension
2Amigos Yii2 Disqus Comments Extension
Kartiks Yii2 Social Extension

Sie machen es relativ schnell und einfach, auf Yii2 eine starke soziale Gemeinschaft aufzubauen.

Ich habe ein Modell mit dem Namen erstellt Artikel welches ein Objekt darstellt, über das Benutzer abstimmen, kommentieren und teilen sollen.

Ehrlich gesagt, nachdem ich die Artikelseiten mit diesen Features in meiner Plattform erstellt hatte, fühlte ich mich mehr als je zuvor mit Yii… mehr beeindruckt als zuvor, obwohl ich selbst meine Startup-Serie aufgebaut habe. Mit diesem Framework können Sie so viel erreichen.

Lass uns reinschauen.

Erweiterungen installieren

Fügen Sie zunächst alle drei Erweiterungen gleichzeitig in composer.json hinzu:

"name": "yiisoft / yii2-app-advanced", "description": "Yii 2 Erweiterte Projektvorlage", "Schlüsselwörter": ["yii2", "Framework", "Fortgeschritten", "Projektvorlage"], "homepage": "http://www.yiiframework.com/", "type": "project", "license": "BSD-3-Clause", "support": "issues": "https: / /github.com/yiisoft/yii2/issues?state=open "," forum ":" http://www.yiiframework.com/forum/ "," wiki ":" http://www.yiiframework.com/ wiki / "," irc ":" irc: //irc.freenode.net/yii "," source ":" https://github.com/yiisoft/yii2 "," Mindeststabilität ":" stable " , "erfordern": "php": "> = 5.4.0", "yiisoft / yii2": "> = 2.0.10", "yiisoft / yii2-bootstrap": "*", "yiisoft / yii2-swiftmailer ":" * "," yiisoft / yii2-authclient ":" ~ 2.1.0 "," google / apiclient ":" 1.0.*@beta "," machour / yii2-google-apiclient ":" @ dev ", "machour / yii2-google-gmail": "@dev", "ruskid / yii2-stripe": "dev-master", "2 amigos/yii2-disqus-widget": "~ 1.0", "abraham / twitteroauth": "*", "codeception / codeception": "*", "notamedia / yii2-sentry": "^ 1.1", "chiliec / yii2-vote": "^ 4.0", "yiido c / yii2-redactor ":" * "," kartik-v / yii2-social ":" @dev "

Dann renne Komponist Update.

Abstimmung hinzufügen

Vladimir Babin ist Chiliec und ich mag die Art und Weise, wie er und andere zusammengearbeitet haben, um dieses Plugin zu erstellen. Alle grundlegenden Funktionen, die Sie möchten, sind enthalten, und Sie können sie leicht anpassen, insbesondere durch Überschreiben der Ansicht. Sie haben eine großartige Dokumentation und halten sie auch auf dem neuesten Stand.

Hier ist ein hilfreiches animiertes Gif der Standardfunktionen des Plugins, die auf GitHub gehostet werden. Ich habe unten ein statisches Bild gepostet (Envato Tuts + unterstützt keine Gifs in unseren Tutorials).

Natürlich habe ich mich entschlossen, die Ansicht anzupassen und die Abstimmungen zu unterdrücken, und das war ziemlich einfach.

Aufbau

Als Nächstes fügen wir das Voting-Plugin zu /active/config/main.php hinzu, sodass es überall im Bootstrap geladen und für unsere Anwendung konfiguriert wird:

return ['id' => 'app-active', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['chiliec \ vote \ components \ VoteBootstrap', 'log', '\ common \ components \ SiteHelper '],' modules '=> […' vote '=> [' class '=>' chiliec \ vote \ module ', // Meldungen im Popover anzeigen' popOverEnabled '=> true, // globale Werte für alle Modelle / / 'allowGuests' => true, // 'allowChangeVote' => true, 'models' => [1 => ['modelName' => \ active \ models \ Item :: className (), 'allowGuests' => false // Beispiel für die Deklaration von Modellen // \ common \ models \ Post :: className (), // 'Backend \ models \ Post', // 2 => 'Frontend \ models \ Story', // 3 = > [// 'modelName' => \ backend \ models \ Mail :: className (), // Sie können globale Werte für das bestimmte Modell umschreiben // // allowGuests '=> false, //' allowChangeVote '=> false, / /],],],

Sie können sehen, dass ich die Gastabstimmung deaktiviert habe, sodass sich die Leute anmelden müssen, um über Artikel abstimmen zu können.

Datenbankintegration

Als Nächstes müssen Sie die Datenbankmigration ausführen, um Tabellen zu erstellen, in denen die Stimmen aufgezeichnet werden.

$ php yii migrieren / up --migrationPath = @ vendor / chiliec / yii2-vote / migrations

Denken Sie daran, diese Migration bei der Installation Ihres Produktservers durchzuführen! Es ist leicht zu vergessen.

Anzeige des Abstimmungs-Widgets

Mein Artikelmodell ist Teil eines Sammlungsmodells mit dem Namen "Topic". Sie finden die Teilansicht für mein Abstimmungs-Widget in /views/topic/_item.php:

    $ model, // optionale Felder 'showAggregateRating' => false,]);?>

Themenindexaufrufe zeigen ein Raster an, das angezeigt wird _item.php als eine Reihe. Ich wollte keine Bewertung anzeigen, nur die positiven Abstimmungszahlen, also habe ich diese auf falsch gesetzt.

Um die Ansicht zu überschreiben, habe ich /views/vote/vote.php erstellt:

Nicht viele Plugins machen das Überschreiben so einfach.

Ich habe das Abstimmungssymbol entfernt und das Abstimmungssymbol in einen Chevron geändert. So sieht es jetzt aus:

Ich weiß, dass dies wie viele Schichten aussieht, aber es hat eigentlich nicht lange gedauert, bis es funktioniert.

Hinzufügen von Disqus-Kommentaren

Als Nächstes habe ich eine Disqus-Site für die kommende Site ActiveTogether.org erstellt, auf der Sie diese Funktionen in Aktion sehen können, sobald Sie dies lesen. Daher ist der Kurzname der Disqus-Site "active-together"..

Ich habe mit dem Widget von 2Amigos angefangen, bevor ich die soziale Erweiterung von Kartik integriert habe (siehe unten), die auch Disqus-Kommentare enthält.

Einen eindeutigen Bezeichner für jedes Kommentartafel erstellen

Immer wenn ein neuer Artikel erstellt wird, wird der Artikel :: beforeSave () action erstellt einen eindeutigen Bezeichner für Disqus, um auch Kommentare zu verknüpfen. Sie können sich auch auf die URL einer Seite verlassen, dies ist jedoch generell vorhersehbarer.

Mit anderen Worten, Disqus sortiert alle Kommentare für jedes Element separat. Dies hilft, die Kommentartafel jedes Elements zusammenzustellen.

public function beforeSave ($ insert) if (parent :: beforeSave ($ insert)) if ($ insert) $ this-> bezeichner = Yii :: $ app-> security-> generateRandomString (8); $ this-> site_id = Yii :: $ app-> params ['site'] ['id'];  return true;

Anzeigen der Kommentare

Dann wird die Kommentartafel am unteren Rand der Elementansicht in /active/views/Item.php angezeigt:

 'Gemeinsam aktiv', 'Bezeichner' => $ model-> Bezeichner,]); ?>

Beachten Sie, wie das Widget das benötigt kurzer Name und das Kennung um Disqus für die Kommentare bereitzustellen.

Hier ein Beispiel, wie die Kommentartafel aussieht:

Die Indexansicht mit Kommentar zählt

2Amigos nutzt auch die Disqus-JavaScript-Bibliotheken zur Anzeige von Kommentarzahlen. Es gibt jedoch ein paar Teile, die dies ermöglichen.

Zuerst habe ich ein jQuery-Skript erstellt, um die Anzahl der Kommentare eines Elements anzufordern. Wenn sich auf einer Seite viele Elemente befinden, müssen Sie diese mit anfordern zurücksetzen: wahr;:

$ (document) .ready (function () DISQUSWIDGETS.getCount (reset: true););

Dann habe ich eine TopicAsset.php-Datei erstellt, um die .js-Datei zu laden:

Dann registriert die Datei /active/views/Topic.php die TopicAsset-Bundle:

Als Nächstes enthält jedes _item.php-Teil eine Kommentarzählerzahl:

render ('_ social', ['model' => $ model, 'includeCommentCount' => true]);?>

Und das _Sozial Teilweise zeigt es sich so an, indem es jeden Item-> Identifier verwendet:

slug. '# disqus_thread'], ['data-disqus-bezeichner' => $ model-> bezeichner])?>  'Gemeinsam aktiv', 'Bezeichner' => $ model-> Bezeichner,]); ?>

Damit Disqus herausfinden kann, wo Elemente mit Kommentarzahlen aktualisiert werden sollen, muss jeder Link mit enden #disqus_thread.

So sieht diese Seite aus. Jedes Element hat eine bestimmte Anzahl von Kommentaren, indem es auf seinen Bezeichner verweist:

Lassen Sie uns zu den Social Sharing-Schaltflächen weitergehen, die Sie gesehen haben.

Social Sharing hinzufügen

Kartik hat mit seinem Social Widget eine großartige Arbeit geleistet, indem er eine Grundkonfiguration für die Verbindung mit einer Reihe sozialer Unternehmen wie Twitter, Disqus und Facebook aufgebaut hat. Im Moment verwende ich nur den Facebook-Share-Button. Der Share-Button von Twitter hat keine sehr gute Ästhetik, daher habe ich ihn durch einen HTML-Link für Web-Intents ersetzt.

Hier ist mein Code für das Schaltflächenpaar neben den Kommentaren in /active/views/topic/_social.php:

 Titel); ?> & url = & via =params ['site'] ['twitter_account']?> "> Tweet
 FacebookPlugin :: SHARE, 'settings' => ['dataSize' => 'small', 'class' => "fb_iframe_widget"]]); ?>

Scheint einfach, außer dass das vertikal ausgerichtete Facebook-Widget einige CSS-Anpassungen erfordert. In /active/views/topic/_grid.php habe ich folgende Anpassung vorgenommen:

Es muss kommen, nachdem die anderen CSS-Dateien geladen wurden.

Und in der Datei site.css habe ich dies eingefügt, um genau das gewünschte Aussehen zu erhalten:

.share_adjust_vert margin-top: -1px; Schriftgröße: 90%; vertikal ausrichten: oben;

Einpacken

Ehrlich gesagt, ich bin so aufgeregt, wie einfach es war, Yii zu verwenden und im Wesentlichen einen Mini-Social-Clone zu erstellen. Dies sind großartige Plugins für ein großartiges Framework, und im Allgemeinen reagieren die Entwickler von Yii und die Community der Plugin-Entwickler auf GitHub mit Fragen und Problemen.

Ich hoffe, Sie möchten ActiveTogether ausprobieren und dieses Framework selbst ausprobieren.

Wenn Sie Fragen oder Anregungen haben, posten Sie diese bitte in den Kommentaren. Wenn Sie mit meinen zukünftigen Envato Tuts + -Tutorials und anderen Serien mithalten möchten, besuchen Sie bitte meine Instructor-Seite oder folgen Sie @lookahead_io. Schauen Sie sich unbedingt meine Startserie und den Meeting Planner an.