Programmazione con Yii2 creazione di community con votazioni, commenti e condivisione

In questo Programmazione con la serie Yii2, Sto guidando i lettori sull'uso di Yii2 Framework per PHP. Potresti anche essere interessato al mio Introduzione al framework Yii, che rivede i vantaggi di Yii e include una panoramica delle novità in Yii 2.x.

introduzione

Nel tutorial di oggi, ti mostrerò come estendere Yii per imitare facilmente un sito come Reddit con votazioni, commenti e condivisione.

Recentemente, ho lavorato per creare la mia personale estensione del grande template avanzato di Yii. Il modello fornisce la registrazione e l'autenticazione integrate dell'utente e più siti per i siti Web front-end e amministrativi.

Ho creato alcuni dei miei ultimi episodi di API su Twitter nella prima versione di questa piattaforma, seguendo gli amici per conto degli utenti e analizzando i nostri follower. Il sito che ho descritto in questi, Twixxr, costituisce il fondamento del mio lavoro di personalizzazione Yii.

Quindi aggiungere funzionalità di base come voto, commenti e condivisione ha molto senso. Man mano che espandi il tuo codebase Yii con questi tipi di funzionalità, la creazione di nuovi siti diventa più veloce, facile e sempre più potente. 

Iniziare

Ti spiegherò come utilizzare tre plugin Yii2:

• Estensione di votazione per Yii2 di Chiliec
• 2Amigos Yii2 Disqus Comments Estensione
• Kartik's Yii2 Social Extension

Rendono relativamente veloce e facile costruire una potente community sociale su Yii2. 

Ho creato un modello chiamato Articolo che rappresenta un oggetto sul quale si desidera che gli utenti votino, commentino e condividano. 

Sinceramente, dopo aver creato le pagine degli articoli con queste funzionalità nella mia piattaforma, mi sono sentito più impressionato che mai con Yii ... più impressionato di quanto non sia stato fino ad oggi costruendo la mia serie di startup. Puoi fare così tanto con questo quadro.

Scaviamo dentro.

Installare le estensioni

Innanzitutto, aggiungiamo tutte e tre le estensioni a composer.json contemporaneamente:

"nome": "yiisoft / yii2-app-advanced", "descrizione": "Yii 2 modello di progetto avanzato", "parole chiave": ["yii2", "framework", "avanzato", "modello di progetto"], "homepage": "http://www.yiiframework.com/", "tipo": "progetto", "licenza": "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 "," minimum-stability ":" stable " , "require": "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 "

Quindi corri aggiornamento del compositore.

Aggiunta di voti

Vladimir Babin è Chiliec e mi piace molto il modo in cui lui e altri hanno collaborato per creare questo plugin. Tutte le funzionalità di base che desideri sono incluse e puoi facilmente personalizzarle, in particolare sovrascrivendo la vista. Hanno un'ottima documentazione e lo tengono anche ben aggiornato.

Ecco una utile gif animata delle funzionalità predefinite del plugin che ospitano su GitHub. Ho postato un'immagine statica qui sotto (Envato Tuts + non supporta le gif nelle nostre esercitazioni).

Ovviamente, ho deciso di personalizzare la vista ed eliminare i voti, ed è stato abbastanza facile.

Configurazione

Successivamente, aggiungiamo il plug-in di voto a /active/config/main.php in modo che sia caricato ovunque nel bootstrap e configurato per la nostra applicazione:

return ['id' => 'app-active', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['chiliec \ vote \ components \ VoteBootstrap', 'log', '\ common \ components \ SiteHelper '],' modules '=> [...' vote '=> [' class '=>' chiliec \ vote \ Module ', // mostra i messaggi in popover' popOverEnabled '=> true, // valori globali per tutti i modelli / / 'allowGuests' => true, // 'allowChangeVote' => true, 'models' => [1 => ['modelName' => \ active \ models \ Item :: className (), 'allowGuests' => false ,], // esempio dichiarazione di modelli // \ common \ models \ Post :: className (), // 'backend \ models \ Post', // 2 => 'frontend \ models \ Story', // 3 = > [// 'modelName' => \ backend \ models \ Mail :: className (), // puoi riscrivere i valori globali per il modello specifico // 'allowGuests' => false, // 'allowChangeVote' => false, / /],],], 

Puoi vedere che ho disattivato la votazione degli ospiti in modo che le persone debbano registrarsi per votare sugli articoli.

Integrazione del database

Successivamente, è necessario eseguire la migrazione del database per creare tabelle che tracciano i voti.

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

È importante ricordare di eseguire questa migrazione durante l'installazione del server del prodotto! È abbastanza facile da dimenticare.

Visualizzazione del widget di votazione

Il mio modello di articolo fa parte di un modello di raccolta chiamato Argomento, quindi puoi trovare la vista parziale per il mio widget di voto in /views/topic/_item.php:

 
 
  $ model, // campi facoltativi 'showAggregateRating' => false,]);?> 

Le chiamate agli indici di argomento mostrano una griglia che viene visualizzata _item.php come una fila. Non volevo mostrare una valutazione, solo i totali dei voti positivi, quindi l'ho impostato su false.

Per sovrascrivere la vista, ho creato /views/vote/vote.php:

 
 
  :   
 
 
       
 

Non molti plugin rendono l'override così facile.

Ho rimosso l'icona del voto in basso e ho cambiato l'icona di voto su un gallone. Ecco come appare ora:

So che questo sembra un sacco di livelli, ma in realtà non ci è voluto molto tempo per farlo funzionare.

Aggiunta di commenti di Disqus

Successivamente, ho creato un sito Disqus per il sito imminente, ActiveTogether.org, che sarà disponibile per voi a vedere queste funzionalità in azione quando leggerete questo. Pertanto, il nome breve del sito Disqus è 'active-together'.

Ho iniziato a utilizzare il widget 2Amigos prima di integrare l'estensione social di Kartik (discussa di seguito), che offre anche commenti su Disqus.

Creazione di un identificativo univoco per ogni scheda di commento

Ogni volta che viene creato un nuovo oggetto, il Articolo :: BeforeSave () l'azione crea un identificatore univoco per Disqus per collegare anche i commenti. Puoi anche fare affidamento sull'URL di una pagina, ma questo è più prevedibile in generale.

In altre parole, Disqus raggruppa tutti i commenti per ciascun elemento separatamente, e questo aiuta a creare la scheda dei commenti di ogni articolo.

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

Visualizzazione dei commenti

Quindi, la scheda dei commenti viene visualizzata facilmente nella parte inferiore della vista Elemento in /active/views/Item.php:

 'active-together', 'identificatore' => $ model-> identificatore,]); ?>

Nota come il widget ha bisogno del nome corto e il identificatore per fornire Disqus per i commenti.

Ecco un esempio di come appare la scheda commenti:

La vista indice con i conteggi dei commenti

2Amigos sfrutta anche le librerie JavaScript di Disqus per la visualizzazione dei conteggi dei commenti. Ma ci sono alcuni pezzi da mettere insieme per far sì che ciò accada.

Innanzitutto, ho creato uno script jQuery per richiedere il conteggio dei commenti di un elemento. Quando ci sono molti articoli su una pagina, è necessario richiederlo con reset: true;:

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

Quindi ho creato un file TopicAsset.php per caricare il file .js:

Quindi, il file /active/views/Topic.php registra il file ArgomentoAsset bundle:
Successivamente, ogni partial _item.php include un conteggio dei commenti:
render ('_ social', ['model' => $ model, 'includeCommentCount' => true])??>
E il _sociale partial lo visualizza in questo modo usando ogni Item-> identificatore:
slug. '# disqus_thread'], ['data-disqus-identificatore' => $ modello-> identificatore])?>  'active-together', 'identificatore' => $ model-> identificatore,]); ?>
Affinché Disqus trovi dove aggiornare gli elementi con i conteggi dei commenti, ogni link deve terminare con #disqus_thread.
Ecco come appare questa pagina. Ogni articolo ha un conteggio distinto dei commenti caricato facendo riferimento al suo identificatore:
Passiamo ai pulsanti di condivisione social che hai visto.
Aggiunta di condivisione sociale
Kartik ha fatto un ottimo lavoro con il suo widget social creando una configurazione di base per la connessione a un numero di aziende sociali come Twitter, Disqus e Facebook. Per ora, sto solo utilizzando il pulsante di condivisione di Facebook. Il pulsante di condivisione di Twitter non ha un'estetica molto buona, quindi l'ho sostituito con un link di intenti web HTML.
Ecco il mio codice per la coppia di pulsanti accanto al conteggio dei commenti in /active/views/topic/_social.php:
 
titolo); ?> & url = & Via =params ['site'] ['twitter_account']?> "> Tweet
 
FacebookPlugin :: SHARE, 'settings' => ['dataSize' => 'small', 'class' => "fb_iframe_widget"]]); ?>
  
Sembra semplice, tranne che allineare verticalmente il widget di Facebook richiede alcune regolazioni CSS. In /active/views/topic/_grid.php, ho inserito questo aggiustamento:
 
Deve venire dopo il caricamento degli altri file CSS.
E, nel file site.css, l'ho posizionato per ottenere l'aspetto preciso che volevo:
.share_adjust_vert margin-top: -1px; font-size: 90%; vertical-align: top; 
Avvolgendo
Onestamente, sono così entusiasta di quanto sia stato facile usare Yii e in sostanza creare un mini clone social. Questi sono ottimi plugin per un ottimo framework, e in generale gli sviluppatori di Yii e la sua comunità di sviluppatori di plugin sono reattivi su GitHub con domande e problemi.
Spero che tu sia desideroso di dare un'occhiata a ActiveTogether e provare questo framework per te stesso.
Se avete domande o suggerimenti, per favore pubblicateli nei commenti. Se desideri tenere il passo con il mio futuro Envato Tuts + tutorial e altre serie, visita la pagina del mio istruttore o segui @lookahead_io. Sicuramente controlla le mie serie di startup e Meeting Planner.
Link correlati
 
2Amigos Yii2 Disqus Comments Estensione
 
Estensione di votazione per Yii2 di Chiliec
 
Kartik's Yii2 Social Extension
 
 Yii2 Developer Exchange, il mio sito di risorse Yii2
 



		
			
	   
	




Codice