Twitter Emulation Utilizând MooTools 1.2 și PHP

Oamenii din întreaga lume iubesc Twitter pentru că este ușor de utilizat. Tot ce trebuie să faceți este să tastați starea curentă, faceți clic pe "Actualizare" și ați terminat. Ceea ce majoritatea oamenilor probabil nu știu este cât de simplu este să simulezi funcționalitatea Twitter. Folosind javascript PHP, MySQL și MooTools, puteți implementa în timp util un sistem de stare asemănător Twitter-ului.

Ipoteze

Înainte de a crea acest sistem, permiteți să rețineți câteva presupuneri pe care le facem:

1. Presupunem că singurul utilizator pe care îl urmărim este persoana conectată și că ID-ul utilizatorului este 1.
2. Presupunem de asemenea că utilizatorul are javascript activat. Lucrul minunat în legătură cu această soluție este că funcționează cu javascript pornit sau oprit.
3. Presupunem că imaginea utilizatorului este stocată în următoarea structură de directoare: /graphics/users/user_id.png
4. Presupunem că folosim nucleul complet MooTools 1.2 cu pluginul Fx.Slide.

Spectacolul

Iată secvența de evenimente care vor avea loc în concursul nostru:

• Pagina incarca si afiseaza statusurile anterioare (sau "tweets").
• Utilizatorii se tipăresc în noua lor stare și trimit clicuri.
• Apare un mesaj din spatele butonului de trimitere, care spune "Starea actualizată!"
• Noul status și fotografiile de imagini ale utilizatorului imediat după rubrica "Actualizări recente".

După cum puteți vedea, este o funcționalitate foarte simplă, care va fi prezentată într-un mod elegant.

Pasul unu: MySQL

Avem nevoie de un loc pentru a stoca aceste actualizări, nu? Iată ce "statute"
tabel va arata ca:

 CREATE TABLE Dacă nu există stări "status_id" MEDIUMINT (10) nesemnate NOT NULL auto_increment, 'user_id' SMALLINT (5) NOT NULL, 'status' varchar (150) NOT NULL, 'date_set' datetime NOT NULL, KEY PRIMARY ('status_id')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;

Este important ca ID-ul de stare să fie cheia primară și ca câmpurile să crească automat.

Pasul al doilea: XHTML

Înainte ca oricare dintre magiile noastre MooTools să poată fi folosite, trebuie să creați formularul "actualizare"
și plasați mesajul nostru DIV de lângă butonul de trimitere, astfel încât MooTools să poată fi eficient
glisați mesajul din spatele butonului. Rețineți că am setat acțiunea formularului la
aceeași pagină. De asemenea, rețineți că plasăm o variabilă inițială de $ în interiorul lui
mesaj DIV pentru utilizatorii care nu au activat javascript.

 
Ce faci?
 
 
  
 

Nu am terminat încă cu partea XHTML. Următorul pas este să adăugați
"wrap" DIV pentru toate statutele anterioare.

 
Actualizări recente
 
  

În cele din urmă, vom include biblioteca MooTools în antetul paginii.

Pasul 3: PHP / MySQL - Partea 1

Acest prim fragment din PHP va fi plasat în interiorul "statinelor" DIV. Am ales
pentru a afișa cele mai recente 20 de stări.

 $ query = 'SELECT status, DATE_FORMAT (date_set, \'% M% e,% Y @% l:% i:% s% p \ ') AS ds FROM STATS ORDER BY date_set DESC LIMIT 20'; $ result = mysql_query ($ interogare, $ link) sau mor (mysql_error (). ':'. $ query); în timp ce ($ row = mysql_fetch_assoc ($ rezultat)) echo '
'Stripslashes ($ row [ 'status']),'
'$ Rândul [ 'ds']'
„; 

Pasul 4: CSS

După cum știți, CSS este stratul de prezentare, astfel încât stilul paginii dvs., oricum ar fi
ca. Creăm clasele "eșec" și "succes" pentru mesajul rezultat
-- rețineți că mesajul de succes utilizează mesajul verde, iar mesajul de eroare este colorat în roșu.
De asemenea, rețineți că clasa de status-box conține avatarul utilizatorului, setat de PHP.

 #message padding: 7px 10px; plutește la stânga; lățime: 350px;  #status border: 1px solid # 999; padding: 5px; lățime: 500px; înălțime: 75px; margine: 5px 0;  #statuses width: 512px;  #submit cursor: pointer; padding: 5px; frontieră: 1px solid #ccc; plutește la stânga; marcă: 0 20px 0 0;  .pagina-statuie padding: 10px 20px 10px 70px; înălțime: 48px; fundal: url (/ grafica / utilizatori /.png) 10px 10px nu-repeta; margine de fund: 1px punctat #aaa;  .pagina de stare: hover background-color: #eee;  .success culoare: # 008000;  .failure culoare: # f00;  .time culoare: # 2a447b; font-size: 10px; 

Pasul 5: Javascript-ul MooTools

Acum, pentru partea distractivă - folosind MooTools 1.2 bunătatea pentru a crea subtilul nostru
animații și cerere Ajax.

Odată ce DOM este gata ...

window.addEvent ('domready', funcția () 

Creăm un cursor orizontal pentru mesajul de succes / eșec. Îl ascundem pentru moment ...

var fx = noul Fx.Slide ('mesaj', mode: 'orizontal') hide ();

Acum creăm solicitarea noastră (Ajax). Facem acest lucru în afara evenimentului de clic
(care va urma într-un moment), astfel încât să nu risipim memoria.

Când utilizatorul face clic pe butonul Trimiteți, dorim să îl dezactivăm
pentru a împiedica depunerea dublă. La finalizare, vom permite
butonul de trimitere și direcționarea mesajului de notificare a mesajului de stare pentru ascundere
în 2 secunde.

Dacă cererea nu reușește, mesajul reflectă acest lucru prin glisarea în
"Starea nu a putut fi actualizată. Încercați din nou." mesaj. Dacă cererea este
succes, se întâmplă ceva mai mult.

Începem prin alunecarea într-un mesaj "Actualizare actualizată". Apoi, ștergem
stare textarea. Apoi injectăm noua casetă de elemente în statute
container și glisați-l înăuntru. Aici este codul MooTools în întregime.

 // efectuați apelul ajax la baza de date pentru a salva actualizarea var request = new Request (url: '', metoda:' post ', onRequest: function () $ (' submit ') dezactivat = 1; , onComplete: funcția (răspunsul) $ ('submit') disabled = 0; $ ( 'Mesaj') removeClass ( 'succesul') removeClass ( 'eșec')..; (funcția () fx.slideOut ();) întârziere (2000); , funcția onSuccess: () // actualizare mesaj $ ('message') set ('text', 'Status updated!') addClass ('succes'); fx.slideIn (); // valoarea de stocare, ștergeți caseta var status = $ ('status'). $ '(' status ') valoare ='; // adăuga o nouă stare la containerul de staturi var element = element nou 'div', 'class': 'status-box'
Acum un moment') injectați ("statute", "sus"); // creați un cursor pentru el, glisați-l înăuntru. slider = nou Fx.Slide (element) .hide () slideIn (); // plasați cursorul în zona de text $ ('status'). focus (); , onFailure: functie () // update message $ ('message') set ('text', 'Status nu a putut fi actualizat. fx.slideIn (); );

Când se declanșează transmiterea formularului ...

$ ('trimite') addEvent ('click', function (event) 

Împiedicați reîmprospătarea paginii din cauza depunerii formularului.

event.preventDefault ();

Dacă "statutul" textarea are o valoare ...

dacă ($ ('status')) value.length &&! $ ('status').

Executăm cererea, trecând de-a lungul noului statut.

 request.send (date: 'status': $ ('status'). valoare, 'ajax': 1);

Iată scriptul MooTools complet:

 / * atunci când domul este gata * / window.addEvent ('domready', funcția () // crea sliderul mesajului var fx = nou Fx.Slide ('message', mode: 'horizontal' ); // efectuați apelul ajax la baza de date pentru a salva actualizarea var request = new Request (url: '', metoda:' post ', onRequest: function () $ (' submit ') dezactivat = 1; , onComplete: funcția (răspunsul) $ ('submit') disabled = 0; $ ( 'Mesaj') removeClass ( 'succesul') removeClass ( 'eșec')..; (funcția () fx.slideOut ();) întârziere (2000); , funcția onSuccess: () // actualizare mesaj $ ('message') set ('text', 'Status updated!') addClass ('succes'); fx.slideIn (); // valoarea de stocare, ștergeți caseta var status = $ ('status'). $ '(' status ') valoare ='; // adăuga o nouă stare la containerul de staturi var element = element nou 'div', 'class': 'status-box'
Acum un moment') injectați ("statute", "sus"); // creați un cursor pentru el, glisați-l înăuntru. slider = nou Fx.Slide (element) .hide () slideIn (); // plasați cursorul în zona de text $ ('status'). focus (); , onFailure: functie () // update message $ ('message') set ('text', 'Status nu a putut fi actualizat. fx.slideIn (); ); // când se face clic pe butonul de trimitere ... $ ('submit') addEvent ('click', function (event) // oprire regulată event.preventDefault (); // dacă există ceva în caseta textbox ($) ("status") .valoarea &&! $ ('status') dezactivată) request.send (date: status ' ;); );

Pasul 5: PHP / MySQL - Partea 2

Această porțiune de "antet" a codului PHP se află în partea de sus a aceluiași fișier PHP restul
code is in. Acest cod va fi rulat de ambele cereri Ajax si de utilizatorii care au javascript
dezactivat. După trimiterea formularului (și presupunând că utilizatorul este conectat), introducem noul
statutul în baza de date. Dacă este setat flagul Ajax (prin codul MooTools de mai sus), știm acest lucru
utilizatorul are activat javascript și vom ucide scriptul. Dacă utilizatorul nu a făcut-o
utilizați javascript, setăm pur și simplu valoarea inițială a variabilei $ message la "Status Updated!"
și afișați pagina. Simplu!

 // conectați la db $ link = @mysql_connect ('localhost', 'username', 'password'); @mysql_select_db ( 'blog', link-ul $); / * formularul de trimitere * / if (isset ($ _ POST ['status']) && $ _SESSION ['user_id']) // înregistrează occurence $ query = 'INSERT INTO nettuts1 (user_id, status, date_set) '$ _ SESSION [' user_id '].', \ "Mysql_escape_string (htmlentities (strip_tags ($ _ POST ['status']))) , $ link); // muri dacă acest lucru a fost făcut prin ajax ... dacă ($ _ POST ['ajax']) die (); alt $ message = 'Status Actualizat!';

Asta e?

Da! Iată întregul fișier PHP / MooTools / XHTML / CSS:

           
Ce faci?
 
 
  
 
 
  
Actualizări recente
 
 'Stripslashes ($ row [ 'status']),'
'$ Rândul [ 'ds']'
„; ?>