Twitter Emulering med MooTools 1.2 och PHP

Människor över hela världen älskar Twitter på grund av hur lätt det är att använda. Allt du behöver göra är att skriva in din nuvarande status, klicka på "Uppdatera", och du är klar. Vad de flesta människor förmodligen inte vet är hur enkelt det är att emulera Twitters funktionalitet. Med hjälp av PHP, MySQL och MooTools javascript kan du implementera ett Twitter-liknande statussystem på nolltid.

antaganden

Innan vi skapar det här systemet, kan vi komma ihåg några antaganden som vi gör:

1. Vi antar att den enda användaren vi håller koll på är personen inloggad och att användarens ID är 1.
2. Vi antar också att användaren har aktiverat javascript. Den stora saken med den här lösningen är att den fungerar med javascript aktiverat eller avstängt.
3. Vi antar att användarens bild lagras i följande katalogstruktur: /graphics/users/user_id.png
4. Vi antar att vi använder hela MooTools 1.2-kärnan med Fx.Slide-plugin.

Showen

Här är den följd av händelser som kommer att äga rum i vår sammansättning:

• Sidan laddas och visar tidigare statuser (eller "tweets").
• Användartyperna i deras nya status och klick skickar in.
• Ett meddelande glider in bakom inmatningsknappen och säger "Status uppdaterad!"
• Det nya status- och användarfotoet glider in direkt efter rubriken "Senaste uppdateringar".

Som du kan se är det mycket enkelt funktionalitet som presenteras på ett elegant sätt.

Steg ett: MySQL

Vi behöver en plats för att lagra dessa uppdateringar, eller hur? Här är vad våra "statuser"
bordet kommer att se ut:

 CREATE TABLE IF NOT EXISTS 'statuses' ('status_id' MEDIUMINT (10) unsigned INTE NULL auto_increment, 'user_id' SMALLINT (5) INTE NULL, 'status' varchar (150) INTE NULL, 'date_set' datetime NOT NULL, PRIMARY KEY ('status_id')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;

Det är viktigt att status-ID är den primära nyckeln och att fältautomatiska steg.

Steg två: XHTML

Innan någon av våra MooTools magi kan användas måste vi skapa "uppdateringsformuläret"
och placera vårt meddelande DIV bredvid Submit-knappen så att MooTools kan effektivt
Skjut in meddelandet bakom knappen. Observera att vi bestämmer formulärets åtgärder för
samma sida. Observera också att vi placerar en initial $ message variabel inuti
meddelande DIV för användare som inte har aktiverat javascript.

 
Vad gör du?
 
 
  
 

Vi är inte färdiga med XHTML-delen ännu. Nästa steg är att lägga till
"wrapper" DIV för alla tidigare statuser.

 
Senaste uppdateringar
 
  

Slutligen inkluderar vi MooTools-biblioteket i sidhuvudet.

Steg 3: PHP / MySQL - Del 1

Det här första stycket av PHP kommer att placeras inne i vår "statuses" DIV. Vi har valt
för att visa de senaste 20 statuserna.

 $ query = 'VÄLJ status, DATE_FORMAT (date_set, \'% M% e,% Y @% l:% i:% s% p \ ') AS ds FROM-statuser ORDER BY date_set DESC LIMIT 20'; $ result = mysql_query ($ query, $ link) eller dö (mysql_error (). ':'. $ query); medan ($ row = mysql_fetch_assoc ($ resultat)) echo '
'Stripslashes ($ rad [ 'status'])'
'$ Rad [ 'ds']'
'; 

Steg 4: CSS

Som du vet är CSS vårt presentationslager så sätt upp din sida men du skulle
tycka om. Vi skapar "fel" och "framgång" -klasser för resultatmeddelandet
-- notera att succémeddelandet använder grönt och felmeddelandet är rött rött.
Observera också att klassen Statusbox innehåller användarens avatar, som anges av PHP.

 #meddelande vaddering: 7px 10px; flyta till vänster; bredd: 350 pixlar;  #status border: 1px solid # 999; padding: 5px; bredd: 500px; höjd: 75 px; marginal: 5px 0;  #statusar bredd: 512px;  #submit cursor: pointer; padding: 5px; gränsen: 1px solid #ccc; flyta till vänster; marginal: 0 20px 0 0;  .status-box vaddering: 10px 20px 10px 70px; höjd: 48px; BAKGRUND: url (/ grafik / användare /.png) 10px 10px no-repeat; gränsbotten: 1px prickad #aaa;  .statusfält: svävar bakgrundsfärg: #eee;  .success color: # 008000;  .failure color: # f00;  .tid färg: # 2a447b; font-size: 10px; 

Steg 5: MooTools Javascript

Nu för den roliga delen - med MooTools 1.2 godhet för att skapa vår subtila
animeringar och Ajax-förfrågan.

När DOM är klar ...

window.addEvent ('domready', funktion () 

Vi skapar en horisontell reglage för framgång / felmeddelandet. Vi gömmer det för nu ...

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

Vi skapar nu vår (Ajax) -förfrågan. Vi gör detta utanför klickhändelsen
(som kommer att följa på ett ögonblick) så att vi inte slösar bort minne.

När användaren klickar på Skicka-knappen vill vi inaktivera
för att förhindra dubbel inlämning. Efter avslutad aktivering aktiveras
Skicka knappen och skicka meddelandet om statusmeddelande om att dölja
om 2 sekunder.

Om förfrågan misslyckas återspeglar meddelandet det genom att glida i
"Status kunde inte uppdateras. Försök igen." meddelande. Om begäran är
framgångsrik, det händer lite mer.

Vi börjar med att glida i ett "Status Uppdaterat" meddelande. Därefter rensar vi
status textarea. Sedan sprutar vi in ​​den nya elementlådan i statuserna
behållare och skjut in den. Här är MooTools-koden i dess helhet.

 // göra ajax-samtalet till databasen för att spara uppdateringen var request = new Request (url: '', metod:' post ', onRequest: function () $ (' submit '). inaktiverat = 1; , onComplete: funktion (svar) $ ('submit'). disabled = 0; $ (Meddelande) removeClass ( 'framgång') removeClass (fel).. (funktion () fx.slideOut ();) .fördröjning (2000); , onSuccess: funktion () // uppdateringsmeddelande $ ('meddelande'). set ('text', 'Status uppdaterad!'). addClass ('framgång'); fx.slideIn (); // lagringsvärde, rensa ut varus status = $ ('status'). värde; $ ('status'). värde = "; // lägg till ny status till statusen container var element = nytt element ('div', 'class': 'status-box', 'html': status +
En stund sedan'). injicera (' statuses ',' top '); // skapa en reglage för den, skjut in den. var slider = ny Fx.Slide (element) .hide (). slideIn (); // placera markören i textområdet $ ('status'). fokus (); , onFailure: funktion () // uppdateringsmeddelande $ ('meddelande'). set ('text', 'Status kunde inte uppdateras. Försök igen.'). addClass ('failure'); fx.slideIn (); );

När formulärinsändning utlöses ...

$ ('submit'). addEvent ('klick', funktion (händelse) 

Förhindra att sidan uppdateras på grund av formulärinsändningen.

event.preventDefault ();

Om "status" textarea har ett värde ...

om ($ ('status'). value.length &&! $ ('status'). inaktiverat) 

Vi utför begäran, som passerar den nya statusen.

 request.send (data: 'status': $ ('status'). värde, 'ajax': 1);

Här är det fullständiga MooTools-skriptet:

 / * när dom är klar * / window.addEvent ('domready', funktion () // skapa meddelandeskäraren var fx = ny Fx.Slide ('message', mode: 'horizontal') ); // göra ajax-samtalet till databasen för att spara uppdateringen var request = new Request (url: '', metod:' post ', onRequest: function () $ (' submit '). inaktiverat = 1; , onComplete: funktion (svar) $ ('submit'). disabled = 0; $ (Meddelande) removeClass ( 'framgång') removeClass (fel).. (funktion () fx.slideOut ();) .fördröjning (2000); , onSuccess: funktion () // uppdateringsmeddelande $ ('meddelande'). set ('text', 'Status uppdaterad!'). addClass ('framgång'); fx.slideIn (); // lagringsvärde, rensa ut varus status = $ ('status'). värde; $ ('status'). värde = "; // lägg till ny status till statusen container var element = nytt element ('div', 'class': 'status-box', 'html': status +
En stund sedan'). injicera (' statuses ',' top '); // skapa en reglage för den, skjut in den. var slider = ny Fx.Slide (element) .hide (). slideIn (); // placera markören i textområdet $ ('status'). fokus (); , onFailure: funktion () // uppdateringsmeddelande $ ('meddelande'). set ('text', 'Status kunde inte uppdateras. Försök igen.'). addClass ('failure'); fx.slideIn (); ); // när inmatningsknappen är klickad ... $ ('skicka'). addEvent ('klick', funktion (händelse) // stoppa regelbundet formulärinsändning event.preventDefault (); // om det finns något i textrutan om ('status') .värde.längd &&! $ ('status') .aktiverad) request.send (data: 'status': $ ('status'). värde, 'ajax': 1) ;); );

Steg 5: PHP / MySQL - Del 2

Denna "header" -del av PHP-koden går överst på samma PHP-fil resten av vårt
koden är in. Den här koden kommer också att köras av både Ajax-förfrågningar och användare som har javascript
Inaktiverad. Vid formulärinsändning (och förutsatt att användaren är inloggad) lägger vi in ​​det nya
status i databasen. Om Ajax-flaggan är inställd (enligt MooTools-koden ovan) vet vi det
användaren har javascript aktiverat och vi dödar manuset. Om användaren inte gjorde det
använd javascript, ställer vi helt enkelt meddelandevariabelns initialvärde till "Status uppdaterad!"
och visa sidan. Enkel!

 // koppla till db $ link = @mysql_connect ('localhost', 'användarnamn', 'lösenord'); @mysql_select_db (blog ", $ länk); / * formulär inlägg post * / if (isset ($ _ POST ['status']) && $ _SESSION ['user_id']) // registrera förekomsten $ query = 'INSERT INTO netts1 (user_id, status, date_set) VALUES "$ _ SESSION ['user_id']. ', \". Mysql_escape_string (htmlentities (strip_tags ($ _ POST [' status '])))' ', NU ())'; $ result = @mysql_query ($ query , $ link); // dö om detta gjordes via ajax ... om ($ _ POST ['ajax']) die (); else $ message = 'Status updated!';

Det är allt?

ja! Här är hela PHP / MooTools / XHTML / CSS-filen:

           
Vad gör du?
 
 
  
 
 
  
Senaste uppdateringar
 
 'Stripslashes ($ rad [ 'status'])'
'$ Rad [ 'ds']'
'; ?>