Twitter-Emulation mit MooTools 1.2 und PHP

Menschen auf der ganzen Welt lieben Twitter, weil es so einfach zu bedienen ist. Alles, was Sie tun müssen, ist, Ihren aktuellen Status einzugeben, auf "Aktualisieren" klicken, und Sie sind fertig. Die meisten Leute wissen wahrscheinlich nicht, wie einfach es ist, die Funktionalität von Twitter zu simulieren. Mit PHP, MySQL und MooTools-Javascript können Sie ein Twitter-ähnliches Statussystem in kürzester Zeit implementieren.

Annahmen

Bevor wir dieses System erstellen, müssen wir einige Annahmen berücksichtigen, die wir treffen:

1. Wir nehmen an, dass der einzige Benutzer, den wir verfolgen, die angemeldete Person ist und dass die Benutzer-ID 1 ist.
2. Wir gehen auch davon aus, dass der Benutzer Javascript aktiviert hat. Das Tolle an dieser Lösung ist, dass sie mit ein- oder ausgeschaltetem Javascript funktioniert.
3. Wir nehmen an, dass das Image des Benutzers in der folgenden Verzeichnisstruktur gespeichert ist: /graphics/users/user_id.png
4. Wir gehen davon aus, dass wir den vollständigen Kern von MooTools 1.2 mit dem Fx.Slide-Plugin verwenden.

Die Show

Hier ist die Abfolge der Ereignisse, die in unserer Zubereitung stattfinden werden:

• Die Seite wird geladen und zeigt vorherige Status (oder "Tweets").
• Der Benutzer gibt seinen neuen Status ein und klickt auf "Senden".
• Hinter dem Absenden-Button erscheint eine Meldung mit der Aufschrift "Status aktualisiert!".
• Der neue Status und das Benutzerfoto werden direkt nach der Überschrift "Recent Updates" angezeigt.

Wie Sie sehen, ist es eine sehr einfache Funktionalität, die auf elegante Weise präsentiert wird.

Erster Schritt: MySQL

Wir brauchen einen Ort, um diese Updates zu speichern, oder? Hier ist was unsere "Status"
Der Tisch wird wie folgt aussehen:

 CREATE TABLE WENN NICHT "statuses" vorhanden ist ('status_id' MEDIUMINT (10) unsigned NOT NULL auto_increment, 'user_id' SMALLINT (5) NOT NULL, 'status' varchar (150) NOT NULL, 'date_set' datetime NOT NULL, Primärschlüssel ('status_id')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;

Es ist wichtig, dass die Status-ID der Primärschlüssel ist und dass das Feld automatisch inkrementiert wird.

Zweiter Schritt: Die XHTML

Bevor eine unserer MooTools-Magie verwendet werden kann, müssen Sie das "Update" -Formular erstellen
und platzieren Sie unsere Nachricht DIV neben dem Submit-Button, damit MooTools effektiv arbeiten kann
Schieben Sie die Nachricht hinter dem Button ein. Beachten Sie, dass wir die Aktion des Formulars auf festlegen
diese gleiche Seite. Beachten Sie auch, dass wir eine anfängliche $ message Variable innerhalb von einfügen
Nachricht DIV für Benutzer, für die Javascript nicht aktiviert ist.

 
Was machen Sie?
 
 
  
 

Der XHTML-Teil ist noch nicht fertig. Der nächste Schritt ist das Hinzufügen von
"Wrapper" DIV für alle vorherigen Status.

 
Neueste Updates
 
  

Zuletzt fügen wir die MooTools-Bibliothek in den Kopf der Seite ein.

Schritt 3: Das PHP / MySQL - Teil 1

Dieses erste PHP-Snippet wird in unserem DIV "statuses" platziert. Wir haben gewählt
um die letzten 20 Status anzuzeigen.

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

Schritt 4: Das CSS

Wie Sie wissen, ist CSS unsere Präsentationsebene. Gestalten Sie Ihre Seite so, wie Sie es möchten
mögen. Wir erstellen die Klassen "Fail" und "Success" für die Ergebnisnachricht
-- Beachten Sie, dass die Erfolgsmeldung grün ist und die Fehlermeldung rot angezeigt wird.
Beachten Sie auch, dass die Statusfeldklasse den von PHP festgelegten Avatar des Benutzers enthält.

 #message padding: 7px 10px; Schwimmer: links; Breite: 350px;  #status border: 1px fest # 999; Polsterung: 5px; Breite: 500px; Höhe: 75px; Marge: 5px 0;  #statuses width: 512px;  #submit Cursor: Zeiger; Polsterung: 5px; Rahmen: 1px fest #ccc; Schwimmer: links; Marge: 0 20px 0 0;  .status-box padding: 10px 20px 10px 70px; Höhe: 48px; Hintergrund: URL (/ Grafik / Benutzer /.png) 10px 10px keine Wiederholung; Rand unten: 1px gepunktet #aaa;  .status-box: hover Hintergrundfarbe: #eee;  .erfolg color: # 008000;  .failure color: # f00;  .time color: # 2a447b; Schriftgröße: 10px; 

Schritt 5: Das MooTools-Javascript

Nun zum Spaß - mit MooTools 1.2 Güte, um unser subtiles zu schaffen
Animationen und Ajax-Anfrage.

Sobald das DOM fertig ist…

window.addEvent ('domready', function () 

Wir erstellen einen horizontalen Schieberegler für die Erfolgs- / Fehlernachricht. Wir verstecken es jetzt…

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

Wir erstellen nun unsere (Ajax-) Anfrage. Wir machen das außerhalb des Click-Events
(das wird gleich folgen), damit wir kein Gedächtnis verlieren.

Wenn der Benutzer auf die Schaltfläche "Senden" klickt, möchten wir ihn deaktivieren
um doppelte Vorlage zu verhindern. Nach Fertigstellung aktivieren wir
Klicken Sie auf die Schaltfläche "Senden" und leiten Sie die Benachrichtigungsmeldung für die Statusnachricht zum Ausblenden
in 2 Sekunden.

Wenn die Anforderung fehlschlägt, spiegelt die Nachricht dies wider, indem sie in der
"Status konnte nicht aktualisiert werden. Versuchen Sie es erneut." Botschaft. Wenn die Anfrage ist
Erfolgreich passiert etwas mehr.

Wir fangen mit der Meldung "Status aktualisiert" an. Als nächstes löschen wir die
Statustextbereich. Dann injizieren wir die neue Elementbox in die Status
Container und schieben Sie es hinein. Hier ist der MooTools-Code in seiner Gesamtheit.

 // ajax an die Datenbank anrufen, um das Update zu speichern var request = new Request (url: '', Methode:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: Funktion (Antwort) $ ('submit'). disabled = 0; $ ('message'). removeClass ('success'). removeClass ('failure'); (function () fx.slideOut ();). delay (2000); , onSuccess: function () // Aktualisierungsnachricht $ ('message'). set ('text', 'Status aktualisiert!'). addClass ('success'); fx.slideIn (); // Wert speichern, Kontrollkästchen löschen var status = $ ('status'). value; $ ('status'). value = "; // füge dem status-Container einen neuen Status hinzu var Element = new Element ('div', 'class': 'status-box', 'html': status + '
Vor einem Moment'). inject (' statuses ',' top '); // Erzeuge einen Slider dafür, schiebe ihn hinein. var slider = new Fx.Slide (element) .hide (). slideIn (); // Platziere den Cursor im Textbereich $ ('status'). focus (); , onFailure: function () // Aktualisierungsnachricht $ ('message'). set ('text', 'Status konnte nicht aktualisiert werden. Versuchen Sie es erneut.'). addClass ('failure'); fx.slideIn (); );

Wenn die Formularübermittlung ausgelöst wird ...

$ ('submit'). addEvent ('click', Funktion (Ereignis) 

Verhindern Sie, dass die Seite aufgrund der Formularübermittlung aktualisiert wird.

event.preventDefault ();

Wenn der Textbereich "Status" einen Wert hat ...

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

Wir führen die Anfrage aus und übergeben den neuen Status.

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

Hier ist das komplette MooTools-Skript:

 / * Wenn der Dom bereit ist * / window.addEvent ('domready', function () // Erzeuge den Nachrichtenschieber var fx = new Fx.Slide ('message', mode: 'horizontal'). hide ( // Aufruf des ajax an die Datenbank, um das Update zu speichern var request = new Request (url: '', Methode:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: Funktion (Antwort) $ ('submit'). disabled = 0; $ ('message'). removeClass ('success'). removeClass ('failure'); (function () fx.slideOut ();). delay (2000); , onSuccess: function () // Aktualisierungsnachricht $ ('message'). set ('text', 'Status aktualisiert!'). addClass ('success'); fx.slideIn (); // Wert speichern, Kontrollkästchen löschen var status = $ ('status'). value; $ ('status'). value = "; // füge dem status-Container einen neuen Status hinzu var Element = new Element ('div', 'class': 'status-box', 'html': status + '
Vor einem Moment'). inject (' statuses ',' top '); // Erzeuge einen Slider dafür, schiebe ihn hinein. var slider = new Fx.Slide (element) .hide (). slideIn (); // Platziere den Cursor im Textbereich $ ('status'). focus (); , onFailure: function () // Aktualisierungsnachricht $ ('message'). set ('text', 'Status konnte nicht aktualisiert werden. Versuchen Sie es erneut.'). addClass ('failure'); fx.slideIn (); ); // wenn auf die Schaltfläche "Senden" geklickt wird ... $ ('submit'). addEvent ('click', function (event) // reguläre Formularübergabe stoppen event.preventDefault (); // wenn sich etwas im Textfeld befindet, wenn ($ ('status'). value.length &&! $ ('status'). deaktiviert) request.send (data: 'status': $ ('status'). value, 'ajax': 1) ;); );

Schritt 5: Das PHP / MySQL - Teil 2

Dieser "Header" -Teil von PHP-Code steht oben in derselben PHP-Datei wie der Rest von uns
Code ist in. Dieser Code wird auch von Ajax-Anforderungen und Benutzern mit Javascript ausgeführt
deaktiviert. Bei der Formularübergabe (und vorausgesetzt der Benutzer ist angemeldet) fügen wir das Neue ein
Status in die Datenbank. Wenn das Ajax-Flag gesetzt ist (durch den obigen MooTools-Code), wissen wir das
Der Benutzer hat Javascript aktiviert und wir beenden das Skript. Wenn der Benutzer dies nicht tat
Verwenden Sie Javascript, wir setzen einfach den Anfangswert der $ message Variable auf "Status aktualisiert!".
und zeigen Sie die Seite an. Einfach!

 // Verbindung mit db $ link = @mysql_connect ('localhost', 'username', 'password'); @mysql_select_db ('blog', $ link); / * Formulareintragspost * / if (isset ($ _ POST ['status']) && $ _SESSION ['user_id']) // Das Vorkommen aufzeichnen $ 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); // der Würfel, wenn dies über ajax geschehen würde ... if ($ _ POST ['ajax']) die (); else $ message = 'Status aktualisiert!';

Das ist es?

Ja! Hier ist die gesamte PHP / MooTools / XHTML / CSS-Datei:

           
Was machen Sie?
 
 
  
 
 
  
Neueste Updates
 
 ', striplashes ($ row [' status ']),'
', $ row [' ds '],'
'; ?>