Emulation Twitter avec MooTools 1.2 et PHP

Les gens du monde entier aiment Twitter parce qu’il est facile à utiliser. Tout ce que vous avez à faire est de taper votre statut actuel, cliquez sur "Mettre à jour", et vous avez terminé. Ce que la plupart des gens ne savent probablement pas, c'est à quel point il est simple d'imiter les fonctionnalités de Twitter. En utilisant JavaScript, PHP, MySQL et MooTools, vous pouvez mettre en place un système de statut semblable à Twitter en un rien de temps.

Hypothèses

Avant de créer ce système, gardons à l’esprit quelques hypothèses que nous formulons:

1. Nous supposons que le seul utilisateur dont nous gardons trace est la personne connectée et que l'identifiant de l'utilisateur est 1.
2. Nous supposons également que javascript est activé pour l'utilisateur. L'avantage de cette solution est qu'elle fonctionne avec le javascript activé ou désactivé..
3. Nous supposons que l'image de l'utilisateur est stockée dans la structure de répertoire suivante: /graphics/users/user_id.png
4. Nous supposons que nous utilisons le noyau complet de MooTools 1.2 avec le plugin Fx.Slide.

Le spectacle

Voici la séquence d'événements qui se dérouleront dans notre concoction:

• La page se charge et affiche les états précédents (ou "tweets").
• L'utilisateur tape son nouveau statut et clique sur soumettre.
• Un message se glisse derrière le bouton d'envoi en indiquant "Statut mis à jour!"
• Le nouveau statut et la photo de l'utilisateur se glissent juste après la rubrique "Mises à jour récentes".

Comme vous pouvez le constater, cette fonctionnalité très simple sera présentée de manière élégante..

Première étape: le MySQL

Nous avons besoin d'un endroit pour stocker ces mises à jour, non? Voici ce que nos "statuts"
la table va ressembler à:

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

Il est important que l'ID de statut soit la clé primaire et que le champ s'incrémente automatiquement..

Deuxième étape: le XHTML

Avant de pouvoir utiliser l'un de nos outils MooTools, nous devons créer le formulaire "update"
et placez notre message DIV à côté du bouton d'envoi afin que MooTools puisse efficacement
faites glisser le message derrière le bouton. Notez que nous définissons l'action du formulaire sur
cette même page. Notez également que nous plaçons une variable initiale $ message dans le
message DIV pour les utilisateurs pour lesquels javascript n'est pas activé.

 
Que faites-vous?
 
 
  
 

Nous n'en avons pas encore fini avec la partie XHTML. La prochaine étape consiste à ajouter le
"wrapper" DIV pour tous les statuts précédents.

 
Mises à jour récentes
 
  

Enfin, nous incluons la bibliothèque MooTools dans l’en-tête de la page..

Étape 3: Le PHP / MySQL - Partie 1

Ce premier extrait de PHP sera placé dans notre division "statuses". Nous avons choisi
pour afficher les 20 états les plus récents.

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

Étape 4: le CSS

Comme vous le savez, CSS est notre couche de présentation, alors mettez en forme votre page comme vous le souhaitez.
comme. Nous créons les classes "échec" et "succès" pour le message de résultat
-- notez que le message de réussite utilise le vert et que le message d'échec est coloré en rouge.
Notez également que la classe status-box contient l'avatar de l'utilisateur, défini par PHP.

 #message padding: 7px 10px; float: gauche; largeur: 350px;  #status border: 1px solid # 999; rembourrage: 5px; largeur: 500px; hauteur: 75px; marge: 5px 0;  #statuses width: 512px;  #submit curseur: pointeur; rembourrage: 5px; bordure: 1px solide #ccc; float: gauche; marge: 0 20 px 0 0;  .status-box padding: 10px 20px 10px 70px; hauteur: 48px; fond: url (/ graphics / users /.png) 10px 10px sans répétition; border-bottom: 1px en pointillé #aaa;  .status-box: hover background-color: #eee;  .success color: # 008000;  .failure color: # f00;  .time color: # 2a447b; taille de police: 10px; 

Étape 5: Le Javascript MooTools

Passons maintenant à la partie amusante - utiliser MooTools 1.2 bonté pour créer notre subtile
animations et demande Ajax.

Une fois que le DOM est prêt…

window.addEvent ('domready', function () 

Nous créons un curseur horizontal pour le message de réussite / échec. Nous le cachons pour l'instant…

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

Nous créons maintenant notre demande (Ajax). Nous faisons cela en dehors de l'événement click
(qui suivra dans un instant) pour ne pas gaspiller la mémoire.

Lorsque l'utilisateur clique sur le bouton d'envoi, nous voulons désactiver
empêcher la double soumission. À la fin, nous activons
le bouton d'envoi et dirigez le message d'avertissement du message d'état à masquer
en 2 secondes.

Si la demande échoue, le message le reflète en glissant la
"Le statut n'a pas pu être mis à jour. Réessayez." message. Si la demande est
réussi, un peu plus se produit.

Nous commençons par glisser un message "Status Updated". Ensuite, nous effacer le
statut textarea. Ensuite, nous injectons la nouvelle boîte à éléments dans les statuts
conteneur et faites-le glisser. Voici le code MooTools dans son intégralité.

 // lance l'appel ajax à la base de données pour enregistrer la mise à jour var request = new Request (url: '', méthode:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: function (response) $ ('submit'). disabled = 0; $ ('message'). removeClass ('success'). removeClass ('failure'); (function () fx.slideOut ();). delay (2000); , onSuccess: function () // mettre à jour le message $ ('message'). set ('text', 'Statut mis à jour!'). addClass ('success'); fx.slideIn (); // stocke la valeur, vide la boîte var status = $ ('statut'). valeur; $ ('status'). value = "; // ajoute un nouveau statut au conteneur de statuts var element = new Element ('div', 'class': 'status-box', 'html': status + '
Il y a un moment'). inject (' statuts ',' top '); // crée un curseur pour lui, glisse-le dedans. var slider = new Fx.Slide (element) .hide (). slideIn (); // place le curseur dans la zone de texte $ ('status'). focus (); , onFailure: function () // mettre à jour le message $ ('message'). set ('text', 'Le statut n'a pas pu être mis à jour. Réessayer.'). addClass ('failure'); fx.slideIn (); );

Lorsque la soumission du formulaire est déclenchée…

$ ('submit'). addEvent ('click', function (event) 

Empêcher l'actualisation de la page en raison de la soumission du formulaire.

event.preventDefault ();

Si le "statut" textarea a une valeur…

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

Nous exécutons la demande en transmettant le nouveau statut.

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

Voici le script complet de MooTools:

 / * lorsque le dom est prêt * / window.addEvent ('domready', function () // crée le curseur de message var fx = new Fx.Slide ('message', mode: 'horizontal'). hide ( ); // lance l'appel ajax à la base de données pour enregistrer la mise à jour var request = new Request (url: '', méthode:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: function (response) $ ('submit'). disabled = 0; $ ('message'). removeClass ('success'). removeClass ('failure'); (function () fx.slideOut ();). delay (2000); , onSuccess: function () // mettre à jour le message $ ('message'). set ('text', 'Statut mis à jour!'). addClass ('success'); fx.slideIn (); // stocke la valeur, vide la boîte var status = $ ('statut'). valeur; $ ('status'). value = "; // ajoute un nouveau statut au conteneur de statuts var element = new Element ('div', 'class': 'status-box', 'html': status + '
Il y a un moment'). inject (' statuts ',' top '); // crée un curseur pour lui, glisse-le dedans. var slider = new Fx.Slide (element) .hide (). slideIn (); // place le curseur dans la zone de texte $ ('status'). focus (); , onFailure: function () // mettre à jour le message $ ('message'). set ('text', 'Le statut n'a pas pu être mis à jour. Réessayer.'). addClass ('failure'); fx.slideIn (); ); // lorsque le bouton de soumission est cliqué… $ ('submit'). addEvent ('click', function (event) // arrête la soumission de formulaire régulière event.preventDefault (); // s'il y a quelque chose dans la zone de texte if ($ ('status'). value.length &&! $ ('status'). disabled) request.send (data: 'status': $ ('status'). value, 'ajax': 1) ;); );

Étape 5: Le PHP / MySQL - Partie 2

Cette partie "en-tête" du code PHP se trouve en haut du même fichier PHP, le reste de notre
code est en. Ce code sera également exécuté par les deux demandes Ajax et les utilisateurs qui ont javascript
désactivée. Lors de la soumission du formulaire (et en supposant que l'utilisateur est connecté), nous insérons le nouveau
statut dans la base de données. Si le drapeau Ajax est défini (par le code MooTools ci-dessus), nous savons que
Si javascript est activé, le script est tué. Si l'utilisateur n'a pas
utilisez javascript, nous définissons simplement la valeur initiale de la variable $ message sur "Status Updated!"
et affichez la page. Simple!

 // se connecter à la base de données $ link = @mysql_connect ('localhost', 'nom d'utilisateur', 'mot de passe'); @mysql_select_db ('blog', $ link); / * envoi du formulaire * / if (isset ($ _PART ['status']) && $ _SESSION ['user_id']) // enregistre l'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); // mourir si cela a été fait via ajax… if ($ _ POST ['ajax']) die (); else $ message = 'Status Updated!';

C'est tout?

Oui! Voici l'intégralité du fichier PHP / MooTools / XHTML / CSS:

           
Que faites-vous?
 
 
  
 
 
  
Mises à jour récentes
 
 ', stripslashes ($ row [' status ']),'
', $ row [' ds '],'
'; ?>