Emulazione Twitter usando MooTools 1.2 e PHP

Le persone di tutto il mondo amano Twitter a causa di quanto sia facile da usare. Tutto quello che devi fare è digitare il tuo stato attuale, fare clic su "Aggiorna" e il gioco è fatto. Ciò che molte persone probabilmente non sanno è quanto sia semplice emulare le funzionalità di Twitter. Utilizzando javascript PHP, MySQL e MooTools, è possibile implementare un sistema di stato simile a Twitter in pochissimo tempo.

ipotesi

Prima di creare questo sistema, tieni a mente alcune ipotesi che stiamo facendo:

1. Supponiamo che l'unico utente di cui teniamo traccia sia la persona che ha effettuato l'accesso e che l'ID dell'utente sia 1.
2. Supponiamo inoltre che l'utente abbia abilitato javascript. La cosa grandiosa di questa soluzione è che funziona con javascript attivato o disattivato.
3. Supponiamo che l'immagine dell'utente sia memorizzata nella seguente struttura di directory: /graphics/users/user_id.png
4. Supponiamo di utilizzare il core completo di MooTools 1.2 con il plugin Fx.Slide.

Lo spettacolo

Ecco la sequenza di eventi che si svolgerà nella nostra miscela:

• La pagina carica e mostra stati precedenti (o "tweet").
• L'utente digita il suo nuovo stato e fa clic su Invia.
• Un messaggio scorre da dietro il pulsante di invio dicendo "Stato aggiornato!"
• Il nuovo stato e la foto dell'utente vengono visualizzati subito dopo l'intestazione "Aggiornamenti recenti".

Come puoi vedere, è una funzionalità molto semplice che verrà presentata in modo elegante.

Primo passo: MySQL

Abbiamo bisogno di un posto dove archiviare questi aggiornamenti, giusto? Ecco quali sono i nostri "stati"
la tabella sarà simile a:

 CREATE TABLE SE NON ESISTE 'statuses' ('status_id' MEDIUMINT (10) non firmato NOT NULL auto_increment, 'user_id' SMALLINT (5) NOT NULL, 'status' varchar (150) NOT NULL, 'date_set' datetime NOT NULL, PRIMARY KEY ('status_id')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;

È importante che l'ID di stato sia la chiave primaria e che il campo incrementi automaticamente.

Secondo passo: l'XHTML

Prima che qualsiasi nostra magia MooTools possa essere utilizzata, dobbiamo creare il modulo di "aggiornamento"
e posiziona il nostro messaggio DIV accanto al pulsante di invio in modo che MooTools possa efficacemente
fai scorrere il messaggio da dietro il pulsante. Si noti che impostiamo l'azione del modulo su
questa stessa pagina. Si noti inoltre che inseriamo una variabile $ message iniziale all'interno di
messaggio DIV per gli utenti che non hanno javascript abilitato.

 
Cosa stai facendo?
 
 
  
 

Non abbiamo ancora finito con la parte XHTML. Il prossimo passo è aggiungere il
DIV "wrapper" per tutti gli stati precedenti.

 
Aggiornamenti recenti
 
  

Infine, includiamo la libreria MooTools nell'intestazione della pagina.

Step 3: PHP / MySQL - Parte 1

Questo primo frammento di PHP sarà inserito nel nostro DIV "statuses". Abbiamo scelto
per visualizzare gli ultimi 20 stati.

 $ query = 'SELECT stato, DATE_FORMAT (date_set, \'% M% e,% Y @% l:% i:% s% p \ ') AS ds FROM stati ORDER BY date_set DESC LIMIT 20'; $ result = mysql_query ($ query, $ link) o die (mysql_error (). ':'. $ query); while ($ row = mysql_fetch_assoc ($ result)) echo '
'Stripslashes ($ row [ 'status']),'
'$ Row [ 'ds'],'
'; 

Passaggio 4: il CSS

Come sai, il CSS è il nostro livello di presentazione in modo da personalizzare la tua pagina come preferisci
piace. Creiamo le classi "failure" e "success" per il messaggio result
-- si noti che il messaggio di successo utilizza il verde e il messaggio di errore è colorato in rosso.
Si noti inoltre che la classe status-box contiene l'avatar dell'utente, impostato da PHP.

 #message padding: 7px 10px; float: sinistra; larghezza: 350px;  #status border: 1px solid # 999; padding: 5px; larghezza: 500px; altezza: 75px; margine: 5px 0;  #statuses width: 512px;  #submit cursor: pointer; padding: 5px; border: 1px solid #ccc; float: sinistra; margine: 0 20px 0 0;  .status-box padding: 10px 20px 10px 70px; altezza: 48px; di fondo: url (/ grafica / utenti /.png) 10px 10px senza ripetizione; border-bottom: 1px punteggiato #aaa;  .status-box: hover background-color: #eee;  .success color: # 008000;  .failure color: # f00;  .time color: # 2a447b; font-size: 10px; 

Passaggio 5: MooTools Javascript

Ora per la parte divertente - usando MooTools 1.2 bontà per creare il nostro sottile
animazioni e richiesta Ajax.

Una volta che il DOM è pronto ...

window.addEvent ('domready', function () 

Creiamo un cursore orizzontale per il messaggio di successo / fallimento. Lo nascondiamo per ora ...

var fx = new Fx.Slide ('message', mode: 'horizontal'). hide ();

Ora creiamo la nostra richiesta (Ajax). Lo facciamo al di fuori dell'evento click
(che seguirà tra un momento) in modo da non sprecare memoria.

Quando l'utente fa clic sul pulsante di invio, vogliamo disabilitarlo
per evitare la doppia sottomissione. Al completamento, abilitiamo
il pulsante di invio e indirizzare il messaggio di notifica del messaggio di stato da nascondere
in 2 secondi.

Se la richiesta non riesce, il messaggio lo riflette scorrendo in
"Impossibile aggiornare lo stato. Riprova." Messaggio. Se la richiesta è
successo, succede un bel po 'di più.

Iniziamo scorrendo in un messaggio "Stato aggiornato". Quindi cancelliamo il
stato textarea. Quindi iniettiamo la nuova scatola degli elementi negli stati
contenitore e inseriscilo. Ecco il codice MooTools nella sua interezza.

 // effettua la chiamata ajax al database per salvare l'aggiornamento var request = new Request (url: '', metodo:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: function (response) $ ('submit'). disabled = 0; $ ( 'Messaggio') removeClass ( 'successo') removeClass ( 'fallimento')..; (function () fx.slideOut ();). delay (2000); , onSuccess: function () // update message $ ('message'). set ('text', 'Status updated!'). addClass ('successo'); fx.slideIn (); // memorizza valore, cancella la casella var status = $ ('status'). value; $ ('status'). value = "; // aggiungi un nuovo stato al contenitore status var elemento = new Element ('div', 'class': 'status-box', 'html': status + '
Un attimo fa'). Inject (' statuses ',' top '); // crea un cursore per esso, facendolo scorrere. var slider = new Fx.Slide (element) .hide (). slideIn (); // posiziona il cursore nell'area di testo $ ('status'). focus (); , onFailure: function () // messaggio di aggiornamento $ ('message'). set ('text', 'Status non può essere aggiornato. Try again.'). addClass ('failure'); fx.slideIn (); );

Quando viene avviata l'invio del modulo ...

$ ('submit'). addEvent ('clic', funzione (evento) 

Impedire l'aggiornamento della pagina a causa dell'invio del modulo.

event.preventDefault ();

Se la textarea "status" ha un valore ...

if ($ ('status'). value.length &&! $ ('status'). disabled) 

Eseguiamo la richiesta, passando il nuovo stato.

 request.send (data: 'status': $ ('status'). value, 'ajax': 1);

Ecco lo script completo di MooTools:

 / * quando dom è pronto * / window.addEvent ('domready', function () // crea il cursore del messaggio var fx = new Fx.Slide ('message', mode: 'horizontal'). hide ( // effettua la chiamata ajax al database per salvare l'aggiornamento var request = new Request (url: '', metodo:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: function (response) $ ('submit'). disabled = 0; $ ( 'Messaggio') removeClass ( 'successo') removeClass ( 'fallimento')..; (function () fx.slideOut ();). delay (2000); , onSuccess: function () // update message $ ('message'). set ('text', 'Status updated!'). addClass ('successo'); fx.slideIn (); // memorizza valore, cancella la casella var status = $ ('status'). value; $ ('status'). value = "; // aggiungi un nuovo stato al contenitore status var elemento = new Element ('div', 'class': 'status-box', 'html': status + '
Un attimo fa'). Inject (' statuses ',' top '); // crea un cursore per esso, facendolo scorrere. var slider = new Fx.Slide (element) .hide (). slideIn (); // posiziona il cursore nell'area di testo $ ('status'). focus (); , onFailure: function () // messaggio di aggiornamento $ ('message'). set ('text', 'Status non può essere aggiornato. Try again.'). addClass ('failure'); fx.slideIn (); ); // quando si fa clic sul pulsante di invio ... $ ('submit'). addEvent ('click', function (event) // interrompe l'invio di moduli regolari event.preventDefault (); // se c'è qualcosa nella casella di testo if ($ ('status'). value.length &&! $ ('status'). disabled) request.send (data: 'status': $ ('status'). value, 'ajax': 1) ;); );

Passaggio 5: PHP / MySQL - Parte 2

Questa porzione di "header" del codice PHP va nella parte superiore dello stesso file PHP il resto del nostro
il codice è in. Questo codice verrà eseguito sia da richieste Ajax che da utenti con javascript
Disabilitato. Al momento dell'invio del modulo (e supponendo che l'utente abbia effettuato l'accesso), inseriamo il nuovo
stato nel database. Se il flag Ajax è impostato (dal codice MooTools sopra), lo sappiamo
l'utente ha javascript abilitato e uccidiamo lo script. Se l'utente non l'ha fatto
usa javascript, semplicemente impostiamo il valore iniziale della variabile $ message su "Status Updated!"
e visualizzare la pagina. Semplice!

 // si connette al db $ link = @mysql_connect ('localhost', 'username', 'password'); @mysql_select_db ( 'blog', $ link); / * form submission post * / if (isset ($ _ POST ['status']) && $ _SESSION ['user_id']) // registra l'occorrenza $ query = 'INSERT INTO nettuts1 (user_id, status, date_set) VALUES ( '. $ _ SESSION [' user_id '].', \ ". Mysql_escape_string (htmlentities (strip_tags ($ _ POST ['status']))). '\', NOW ()) '; $ result = @mysql_query ($ query , $ link); // die se questo è stato fatto tramite ajax ... if ($ _ POST ['ajax']) die (); else $ message = 'Stato aggiornato!';

Questo è tutto?

Sì! Ecco l'intero file PHP / MooTools / XHTML / CSS:

           
Cosa stai facendo?
 
 
  
 
 
  
Aggiornamenti recenti
 
 'Stripslashes ($ row [ 'status']),'
'$ Row [ 'ds'],'
'; ?>