Twitter Emulering ved hjelp av MooTools 1.2 og PHP

Folk over hele verden elsker Twitter på grunn av hvor lett det er å bruke. Alt du trenger å gjøre er å skrive inn din nåværende status, klikk "Oppdater", og du er ferdig. Det folk flest sannsynligvis ikke vet, er hvor enkelt det er å etterligne Twitters funksjonalitet. Ved hjelp av PHP, MySQL og MooTools javascript kan du implementere et Twitter-lignende statussystem på kort tid.

Antagelser

Før vi lager dette systemet, kan vi huske noen forutsetninger vi lager:

1. Vi antar at den eneste brukeren vi følger med, er personen logget inn og at brukerens ID er 1.
2. Vi antar også at brukeren har aktivert javascript. Den gode tingen om denne løsningen er at den fungerer med javascript slått på eller av.
3. Vi antar at brukerens bilde er lagret i følgende katalogstruktur: /graphics/users/user_id.png
4. Vi antar at vi bruker hele MooTools 1.2-kjerne med Fx.Slide-plugin.

Showet

Her er rekkefølgen av hendelser som vil finne sted i vår samling:

• Siden laster og viser tidligere statuser (eller "tweets").
• Brukeren skriver i sin nye status og klikk sender inn.
• En melding skyves inn bakfra på send-knappen og sier "Status oppdatert!"
• Det nye status- og brukerbildet glir inn rett etter "Siste oppdateringer" -overskriften.

Som du kan se, er det veldig enkelt funksjonalitet som presenteres på en elegant måte.

Trinn ett: MySQL

Vi trenger et sted å lagre disse oppdateringene, ikke sant? Her er hva våre "statuser"
bordet vil se ut som:

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

Det er viktig at status-ID er primærnøkkelen og at feltet automatisk øker.

Trinn to: XHTML

Før noen av våre MooTools magi kan brukes, må vi opprette "oppdaterings" skjemaet
og legg inn meldingen DIV ved siden av send-knappen, slik at MooTools kan effektivt
skyv inn meldingen bakfra knappen. Legg merke til at vi angir skjemaets handling til
samme side. Vær også oppmerksom på at vi plasserer en innledende $ melding variabel inne i
melding DIV for brukere som ikke har aktivert javascript.

 
Hva gjør du?
 
 
  
 

Vi er ikke ferdige med XHTML-delen ennå. Det neste trinnet er å legge til
"wrapper" DIV for alle tidligere statuser.

 
Nylige oppdateringer
 
  

Til slutt inkluderer vi MooTools-biblioteket i overskriften til siden.

Trinn 3: PHP / MySQL - Del 1

Denne første versjonen av PHP vil bli plassert i vår "statuses" DIV. Vi har valgt
for å vise de siste 20 statusene.

 $ query = 'SELECT status, DATE_FORMAT (date_set, \'% M% e,% Y @% l:% i:% s% p \ ') AS ds FROM statuser BESTILL BY date_set DESC LIMIT 20'; $ result = mysql_query ($ query, $ link) eller dø (mysql_error (). ':'. $ spørring); mens ($ rad = mysql_fetch_assoc ($ resultat)) echo '
'Stripslashes ($ rad [ 'status']),'
'$ Rad [ 'ds']'
'; 

Trinn 4: CSS

Som du vet, er CSS vårt presentasjonslag så stil opp siden din, men du ville
som. Vi lager "feil" og "suksess" -klasser for resultatmeldingen
-- Legg merke til at suksessmeldingen bruker grønn og feilmelding er farget rødt.
Vær også oppmerksom på at statusboksen inneholder brukerens avatar, satt av PHP.

 #message polstring: 7px 10px; float: venstre; bredde: 350 piksler;  #status border: 1px solid # 999; padding: 5 px; bredde: 500 piksler; høyde: 75px; margin: 5px 0;  #statuser bredde: 512px;  #submit cursor: pointer; padding: 5 px; grense: 1px solid #ccc; float: venstre; margin: 0 20px 0 0;  .status-boks polstring: 10px 20px 10px 70px; høyde: 48px; bakgrunn: url (/ grafikk / brukere /.png) 10px 10px no-repeat; border-bottom: 1px prikket #aaa;  .status-boks: svever bakgrunnsfarve: #eee;  .success color: # 008000;  .failure color: # f00;  .time color: # 2a447b; font-size: 10px; 

Trinn 5: MooTools Javascript

Nå for den morsomme delen - bruk MooTools 1.2 godhet for å lage vår subtile
animasjoner og Ajax-forespørsel.

Når DOM er klar ...

window.addEvent ('domready', funksjon () 

Vi lager en horisontal skyveknapp for suksess / feilmelding. Vi gjemmer det for nå ...

var fx = ny Fx.Slide ('melding', modus: 'horisontal'). skjul ();

Vi lager nå vår (Ajax) forespørsel. Vi gjør dette utenom klikkhendelsen
(som vil følge i et øyeblikk) slik at vi ikke kaster bort minne.

Når brukeren klikker på send-knappen, vil vi deaktivere
det for å hindre dobbelt innsending. Etter ferdigstillelse aktiverer vi
Send-knappen og led meldingsmeldingsmeldingen for å skjule
om 2 sekunder.

Hvis forespørselen mislykkes, gjenspeiler meldingen det ved å skyve i
"Statusen kunne ikke oppdateres. Prøv igjen." budskap. Hvis forespørselen er
vellykket, skjer ganske mye mer.

Vi begynner med å skyve i en "Status oppdatert" melding. Neste fjerner vi
status tekstarea. Så injiserer vi den nye elementboksen i statusene
beholder og skyv den inn. Her er MooTools-koden i sin helhet.

 // gjør ajax-anropet til databasen for å lagre oppdateringen var request = new Request (url: '', metode:' post ', onRequest: funksjon () $ (' send '). deaktivert = 1; , onComplete: funksjon (respons) $ ('send'). deaktivert = 0; $ ( 'Melding') removeClass ( 'suksess') removeClass ( 'feil')..; (funksjon () fx.slideOut ();). forsinkelse (2000); , onSuccess: funksjon () // oppdateringsmelding $ ('melding'). sett ('tekst', 'Status oppdatert!'). addClass ('suksess'); fx.slideIn (); // butikkverdi, rydde ut boksen var status = $ ('status'). verdi; $ ('status'). value = "; // legg til ny status til statusen container var element = nytt element ('div', 'class': 'status-boks', 'html': status + '
Et øyeblikk siden'). injiser (' statuser ',' topp '); // lage en skyvekontroll for den, skyv den inn. var skyveknappen = ny Fx.Slide (element) .hide (). slideIn (); // plasser markøren i tekstområdet $ ('status'). fokus (); , onFailure: funksjon () // oppdateringsmelding $ ('melding'). sett ('tekst', 'Status kunne ikke oppdateres. Prøv igjen.'). addClass ('failure'); fx.slideIn (); );

Når skjemainnlevering utløses ...

$ ('submit'). addEvent ('klikk', funksjon (hendelse) 

Forhindre at siden blir forfriskende på grunn av skjemainnsendelsen.

event.preventDefault ();

Hvis "status" tekstområdet har en verdi ...

hvis ($ ('status'). value.length &&! $ ('status'). deaktivert) 

Vi utfører forespørselen, passerer den nye statusen.

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

Her er det komplette MooTools-skriptet:

 / * når dom er klar * / window.addEvent ('domready', funksjon () // lage meldingsskyderen var fx = ny Fx.Slide ('message', modus: 'horizontal'). skjul ); // gjør ajax-anropet til databasen for å lagre oppdateringen var request = new Request (url: '', metode:' post ', onRequest: funksjon () $ (' send '). deaktivert = 1; , onComplete: funksjon (respons) $ ('send'). deaktivert = 0; $ ( 'Melding') removeClass ( 'suksess') removeClass ( 'feil')..; (funksjon () fx.slideOut ();). forsinkelse (2000); , onSuccess: funksjon () // oppdateringsmelding $ ('melding'). sett ('tekst', 'Status oppdatert!'). addClass ('suksess'); fx.slideIn (); // butikkverdi, rydde ut boksen var status = $ ('status'). verdi; $ ('status'). value = "; // legg til ny status til statusen container var element = nytt element ('div', 'class': 'status-boks', 'html': status + '
Et øyeblikk siden'). injiser (' statuser ',' topp '); // lage en skyvekontroll for den, skyv den inn. var skyveknappen = ny Fx.Slide (element) .hide (). slideIn (); // plasser markøren i tekstområdet $ ('status'). fokus (); , onFailure: funksjon () // oppdateringsmelding $ ('melding'). sett ('tekst', 'Status kunne ikke oppdateres. Prøv igjen.'). addClass ('failure'); fx.slideIn (); ); // når innleveringsknappen er klikket ... $ ('send'). addEvent ('klikk', funksjon (hendelse) // stopp regelmessig skjema innlevering event.preventDefault (); // hvis det er noe i tekstboksen hvis ('status'). value.length &&! $ ('status'). deaktivert) request.send (data: 'status': $ ('status'). verdi, 'ajax': 1) ;); );

Trinn 5: PHP / MySQL - Del 2

Denne "header" -delen av PHP-koden går øverst i samme PHP-fil resten av vår
koden er i. Denne koden vil også bli drevet av både Ajax-forespørsler og brukere som har javascript
funksjonshemmet. Ved skjema innsending (og forutsatt at brukeren er logget inn), setter vi inn det nye
status i databasen. Hvis Ajax-flagget er satt (ved MooTools-koden ovenfor), vet vi det
brukeren har aktivert javascript og vi dreper skriptet. Hvis brukeren ikke gjorde det
bruk javascript, vi angir ganske enkelt innstillingsvariabelen for $ melding til "Status oppdatert!"
og vis siden. Enkel!

 // koble til db $ link = @mysql_connect ('localhost', 'brukernavn', 'passord'); @mysql_select_db ( 'blogg', $ link); / * form innleveringspost * / hvis (isset ($ _ POST ['status']) && $ _SESSION ['user_id']) // registrer forekomsten $ 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); // dersom dette ble gjort via ajax ... hvis ($ _ POST ['ajax']) die (); else $ message = 'Status oppdatert!';

Det er det?

Ja! Her er hele PHP / MooTools / XHTML / CSS-filen:

           
Hva gjør du?
 
 
  
 
 
  
Nylige oppdateringer
 
 'Stripslashes ($ rad [ 'status']),'
'$ Rad [ 'ds']'
'; ?>