Twitter-emulatie met MooTools 1.2 en PHP

Mensen over de hele wereld houden van Twitter vanwege het gebruiksgemak. Het enige dat u hoeft te doen, is uw huidige status invoeren, op 'Update' klikken en u bent klaar. Wat de meeste mensen waarschijnlijk niet weten, is hoe eenvoudig het is om de functionaliteit van Twitter te emuleren. Met behulp van JavaScript, PHP, MySQL en MooTools, kunt u een Twitter-achtig statussysteem in een mum van tijd implementeren.

Veronderstellingen

Voordat we dit systeem maken, mogen we een aantal veronderstellingen die we maken in gedachten houden:

1. We gaan ervan uit dat de enige gebruiker die we bijhouden, de persoon is die is aangemeld en dat de ID van de gebruiker 1 is.
2. We gaan er ook van uit dat de gebruiker javascript heeft ingeschakeld. Het mooie van deze oplossing is dat het werkt met javascript aan of uit.
3. We nemen aan dat de afbeelding van de gebruiker is opgeslagen in de volgende mapstructuur: /graphics/users/user_id.png
4. We gaan ervan uit dat we de volledige MooTools 1.2-kern gebruiken met de Fx.Slide-plug-in.

De show

Dit is de volgorde van gebeurtenissen die in ons brouwsel zal plaatsvinden:

• De pagina laadt en toont vorige statussen (of "tweets").
• De gebruiker typt zijn nieuwe status in en klikt op verzenden.
• Er verschijnt een bericht achter de knop Verzenden met de melding "Status bijgewerkt!"
• De nieuwe status en gebruikersfoto verschijnen direct na de kop 'Recente updates'.

Zoals u kunt zien, is het een zeer eenvoudige functionaliteit die op een elegante manier gepresenteerd zal worden.

Stap één: de MySQL

We hebben een plaats nodig om deze updates op te slaan, toch? Dit is wat onze "statussen" zijn
tabel ziet eruit als:

 CREËER TAFEL INDIEN NIET BESTAAT 'statussen' ('status_id' GEMIDDELDEN (10) niet ondertekend NIET 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;

Het is belangrijk dat status-ID de primaire sleutel is en dat het veld automatisch wordt verhoogd.

Stap twee: de XHTML

Voordat een van onze MooTools magie kan worden gebruikt, moeten we het "update" -formulier maken
en plaats ons bericht DIV naast de submit-knop zodat MooTools effectief kan werken
schuif het bericht achter de knop in. Merk op dat we de actie van het formulier hebben ingesteld op
dezelfde pagina. Merk ook op dat we een initiële $ berichtvariabele plaatsen in de
bericht DIV voor gebruikers die javascript niet hebben ingeschakeld.

 
Wat doe je?
 
 
  
 

We zijn nog niet klaar met het XHTML-onderdeel. De volgende stap is om de
"wrapper" DIV voor alle voorgaande statussen.

 
Recente updates
 
  

Ten slotte nemen we de MooTools-bibliotheek op in de kop van de pagina.

Stap 3: De PHP / MySQL - Deel 1

Dit eerste fragment van PHP wordt in onze "status" DIV geplaatst. We hebben gekozen
om de meest recente 20 statussen weer te geven.

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

Stap 4: De CSS

Zoals je weet, is CSS onze presentatielaag dus style je pagina, hoe je het ook zou doen
net zoals. We maken de klassen "failure" en "success" voor het resultaatbericht
-- merk op dat het succesbericht groen en foutbericht rood gekleurd is.
Merk ook op dat de status-boxklasse de avatar van de gebruiker bevat, ingesteld door PHP.

 #message opvulling: 7px 10px; float: left; width: 350px;  #status border: 1px solid # 999; padding: 5px; width: 500px; hoogte: 75 pixels; marge: 5px 0;  #statuses width: 512px;  #submit cursor: pointer; padding: 5px; border: 1px solid #ccc; float: left; marge: 0 20px 0 0;  .status-box opvulling: 10px 20px 10px 70px; hoogte: 48px; achtergrond: url (/ graphics / users /.png) 10px 10px zonder herhaling; border-bottom: 1px stippellijn #aaa;  .status-box: hover background-color: #eee;  .success color: # 008000;  .failure color: # f00;  .time color: # 2a447b; font-size: 10px; 

Stap 5: De MooTools Javascript

Nu voor het leuke gedeelte - het gebruik van MooTools 1.2 goedheid om ons subtiel te creëren
animaties en Ajax-verzoek.

Zodra de DOM klaar is ...

window.addEvent ('domready', function () 

We maken een horizontale schuifregelaar voor het bericht over succes / mislukking. We verbergen het voor nu ...

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

We maken nu onze (Ajax) aanvraag. We doen dit buiten de click-gebeurtenis
(die in een ogenblik zal volgen) zodat we het geheugen niet verspillen.

Wanneer de gebruiker op de knop Verzenden klikt, willen we deze uitschakelen
het om dubbele inzending te voorkomen. Na voltooiing schakelen we in
de verzendknop en stuur het bericht van de berichtmelding om te verbergen
in 2 seconden.

Als het verzoek mislukt, geeft het bericht dat weer door in de
"Status kan niet worden bijgewerkt. Probeer het opnieuw." bericht. Als het verzoek is
succesvol, er gebeurt nog veel meer.

We beginnen met het invoegen van het bericht "Status bijgewerkt". Vervolgens wissen we de
status tekstgebied. Vervolgens injecteren we het nieuwe elementvak in de statussen
container en schuif het in. Hier is de MooTools-code in zijn geheel.

 // maak de ajax-oproep naar de database om de update op te slaan var request = new Request (url: '', methode:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: functie (antwoord) $ ('submit'). disabled = 0; $ ( 'E-mail') removeClass ( 'succes') removeClass ( 'falen')..; (function () fx.slideOut ();). delay (2000); , onSuccess: function () // update message $ ('message'). set ('text', 'Status updated!'). addClass ('succes'); fx.slideIn (); // winkelwaarde, wis box var status = $ ('status'). waarde; $ ('status'). value = "; // nieuwe status toevoegen aan de container states var element = nieuw Element ('div', 'class': 'status-box', 'html': status + '
Een moment geleden'). inject (' statussen ',' bovenaan '); // maak er een schuifregelaar voor, schuif deze erin. var slider = new Fx.Slide (element) .hide (). slideIn (); // plaats de cursor in het tekstgebied $ ('status'). focus (); , onFailure: function () // update message $ ('message'). set ('tekst', 'Status kon niet worden bijgewerkt. Probeer het opnieuw.'). addClass ('failure'); fx.slideIn (); );

Wanneer formulierinzending wordt geactiveerd ...

$ ('submit'). addEvent ('klik', functie (event) 

Voorkom dat de pagina wordt vernieuwd vanwege de formulierinzending.

event.preventDefault ();

Als het tekstvak "status" een waarde heeft ...

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

We voeren het verzoek uit en geven de nieuwe status door.

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

Dit is het complete MooTools-script:

 / * wanneer de dom klaar is * / window.addEvent ('domready', function () // maak de berichtschuifregelaar var fx = new Fx.Slide ('message', mode: 'horizontal'). hide ( ); // maak de ajax-oproep naar de database om de update op te slaan var request = new Request (url: '', methode:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: functie (antwoord) $ ('submit'). disabled = 0; $ ( 'E-mail') removeClass ( 'succes') removeClass ( 'falen')..; (function () fx.slideOut ();). delay (2000); , onSuccess: function () // update message $ ('message'). set ('text', 'Status updated!'). addClass ('succes'); fx.slideIn (); // winkelwaarde, wis box var status = $ ('status'). waarde; $ ('status'). value = "; // nieuwe status toevoegen aan de container states var element = nieuw Element ('div', 'class': 'status-box', 'html': status + '
Een moment geleden'). inject (' statussen ',' bovenaan '); // maak er een schuifregelaar voor, schuif deze erin. var slider = new Fx.Slide (element) .hide (). slideIn (); // plaats de cursor in het tekstgebied $ ('status'). focus (); , onFailure: function () // update message $ ('message'). set ('tekst', 'Status kon niet worden bijgewerkt. Probeer het opnieuw.'). addClass ('failure'); fx.slideIn (); ); // wanneer op de knop Verzenden wordt geklikt ... $ ('submit'). addEvent ('klik', functie (gebeurtenis) // stop regelmatige formulierinvoer event.preventDefault (); // als er iets in het tekstvak staat ($ ('status'). value.length &&! $ ('status'). disabled) request.send (data: 'status': $ ('status'). value, 'ajax': 1) ;); );

Stap 5: De PHP / MySQL - Deel 2

Dit 'header'-gedeelte van PHP-code staat aan de bovenkant van hetzelfde PHP-bestand voor de rest van ons
code is in. Deze code wordt ook uitgevoerd door zowel Ajax-verzoeken als gebruikers met javascript
uitgeschakeld. Na het indienen van formulieren (en ervan uitgaande dat de gebruiker is aangemeld), voegen we de nieuwe in
status in de database. Als de Ajax-vlag is ingesteld (volgens de bovenstaande MooTools-code), weten we dat
de gebruiker heeft javascript ingeschakeld en we doden het script. Als de gebruiker dat niet deed
gebruik javascript, we stellen simpelweg de beginwaarde van de variabele $ variabele in op "Status bijgewerkt!"
en toon de pagina. Eenvoudig!

 // verbinding maken met de db $ link = @ mysql_connect ('localhost', 'gebruikersnaam', 'wachtwoord'); @mysql_select_db ( 'blog', $ link); / * formulier verzenden bericht * / if (isset ($ _ POST ['status']) && $ _SESSION ['user_id']) // registreer de occurrence $ 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); // sterf als dit via ajax is gebeurd ... if ($ _ POST ['ajax']) die (); else $ message = 'Status bijgewerkt!';

Dat is het?

Ja! Hier is het volledige PHP / MooTools / XHTML / CSS-bestand:

           
Wat doe je?
 
 
  
 
 
  
Recente updates
 
 'Stripslashes ($ row [ 'status']),'
'$ Row [ 'ds'],'
'; ?>