Emulación de Twitter usando MooTools 1.2 y PHP

La gente de todo el mundo ama Twitter debido a lo fácil que es usarlo. Todo lo que necesita hacer es escribir su estado actual, hacer clic en "Actualizar" y listo. Lo que la mayoría de la gente probablemente no sabe es lo simple que es emular la funcionalidad de Twitter. Al usar PHP, MySQL y MooTools javascript, puede implementar un sistema de estado similar a Twitter en muy poco tiempo.

Suposiciones

Antes de crear este sistema, recordemos algunas suposiciones que estamos haciendo:

1. Asumimos que el único usuario del que estamos al tanto es la persona que inició sesión y que la ID del usuario es 1.
2. También asumimos que el usuario tiene habilitado javascript. Lo bueno de esta solución es que funciona con javascript activado o desactivado.
3. Suponemos que la imagen del usuario se almacena en la siguiente estructura de directorio: /graphics/users/user_id.png
4. Suponemos que estamos utilizando el núcleo completo de MooTools 1.2 con el complemento Fx.Slide.

El show

Aquí está la secuencia de eventos que tendrán lugar en nuestra preparación:

• La página se carga y muestra los estados anteriores (o "tweets").
• El usuario escribe su nuevo estado y hace clic en enviar..
• Aparece un mensaje desde detrás del botón de envío que dice "¡Estado actualizado!"
• El nuevo estado y las diapositivas de fotos del usuario se encuentran justo después del encabezado "Actualizaciones recientes".

Como puede ver, es una funcionalidad muy simple que se presentará de una manera elegante.

Paso Uno: El MySQL

Necesitamos un lugar para almacenar estas actualizaciones, ¿verdad? Esto es lo que nuestros "estados"
la mesa se verá como

 CREAR TABLA SI NO EXISTE 'status' ('status_id' MEDIUMINT (10) NOT sin signo auto_increment, 'user_id' SMALLINT (5) NOT NULL, 'status' varchar (150) NOT NULL, 'date_set' datetime NULL, PRIMARY KEY ('status_id')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;

Es importante que la ID de estado sea la clave principal y que el campo se incremente automáticamente.

Paso Dos: El XHTML

Antes de poder utilizar cualquiera de nuestros MooTools magic, debemos crear el formulario de "actualización"
y coloque nuestro mensaje DIV junto al botón enviar para que MooTools pueda efectivamente
deslice en el mensaje desde detrás del botón. Tenga en cuenta que configuramos la acción del formulario a
esta misma pagina También tenga en cuenta que colocamos una variable inicial de $ message dentro de
mensaje DIV para usuarios que no tienen habilitado javascript.

 
Qué estás haciendo?
 
 
  
 

No hemos terminado con la parte XHTML todavía. El siguiente paso es agregar el
DIV "wrapper" para todos los estados anteriores.

 
Actualizaciones recientes
 
  

Por último, incluimos la biblioteca MooTools en el encabezado de la página..

Paso 3: El PHP / MySQL - Parte 1

Este primer fragmento de PHP se colocará dentro de nuestros "estados" DIV. Hemos elegido
para mostrar los 20 estados más recientes.

 $ 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) o die (mysql_error (). ':'. $ query); while ($ row = mysql_fetch_assoc ($ result)) echo '
', stripslashes ($ row [' status ']),'
', $ fila [' ds '],'
'; 

Paso 4: El CSS

Como sabes, CSS es nuestra capa de presentación, así que estiliza tu página como quieras.
me gusta. Creamos las clases "fracaso" y "éxito" para el mensaje de resultado
-- tenga en cuenta que el mensaje de éxito usa verde y el mensaje de error está coloreado en rojo.
También tenga en cuenta que la clase de cuadro de estado contiene el avatar del usuario, establecido por PHP.

 # mensaje relleno: 7px 10px; flotador izquierdo; ancho: 350px;  #status border: 1px solid # 999; relleno: 5px; ancho: 500px; altura: 75px; margen: 5px 0;  #statuses width: 512px;  #submit cursor: puntero; relleno: 5px; borde: 1px sólido #ccc; flotador izquierdo; margen: 0 20px 0 0;  .status-box relleno: 10px 20px 10px 70px; altura: 48px; fondo: url (/ graphics / users /.png) 10px 10px sin repetición; borde inferior: 1px punteado #aaa;  .status-box: hover background-color: #eee;  .success color: # 008000;  .failure color: # f00;  .time color: # 2a447b; tamaño de fuente: 10px; 

Paso 5: El Javascript de MooTools

Ahora, para la parte divertida: usar la bondad de MooTools 1.2 para crear nuestro sutil
Animaciones y petición de Ajax..

Una vez que el DOM está listo ...

window.addEvent ('domready', function () 

Creamos un control deslizante horizontal para el mensaje de éxito / fracaso. Lo escondemos por ahora ...

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

Ahora creamos nuestra Solicitud (Ajax). Hacemos esto fuera del evento click
(que seguiremos en un momento) para que no desperdicien la memoria.

Cuando el usuario hace clic en el botón de enviar, queremos desactivar
para evitar la doble sumisión. Al finalizar, habilitamos
Presione el botón Enviar y dirija el mensaje del notificador del mensaje de estado para que se oculte.
en 2 segundos.

Si la solicitud falla, el mensaje lo refleja al deslizar en el
"El estado no se pudo actualizar. Inténtalo de nuevo". mensaje. Si la solicitud es
exitoso, pasa un poco mas.

Comenzamos deslizando un mensaje de "Estado actualizado". A continuación despejamos el
estado textarea. Luego inyectamos el nuevo cuadro de elementos en los estados.
contenedor y deslícelo hacia adentro. Aquí está el código de MooTools en su totalidad.

 // realice la llamada ajax a la base de datos para guardar la actualización var request = new Request (url: '', método:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: function (response) $ ('submit'). disabled = 0; $ ('mensaje'). removeClass ('success'). removeClass ('failure'); (function () fx.slideOut ();). delay (2000); , onSuccess: function () // update message $ ('message'). set ('text', 'Status updated!'). addClass ('success'); fx.slideIn (); // almacenar valor, desactive la casilla var status = $ ('status'). value; $ ('status'). value = "; // agregar un nuevo estado al contenedor de estado var element = new Element ('div', 'class': 'status-box', 'html': status + '
Hace un momento'). inyectar (' estados ',' arriba '); // cree un control deslizante para él, deslícelo hacia adentro. var slider = new Fx.Slide (element) .hide (). slideIn (); // coloca el cursor en el área de texto $ ('estado'). focus (); , onFailure: function () // update message $ ('message'). set ('text', 'No se pudo actualizar el estado. Inténtelo de nuevo.'). addClass ('failure'); fx.slideIn (); );

Cuando se activa el envío del formulario ...

$ ('enviar'). addEvent ('clic', función (evento) 

Evita que la página se actualice debido al envío del formulario.

event.preventDefault ();

Si el "estado" textarea tiene un valor ...

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

Ejecutamos la solicitud, pasando el nuevo estado..

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

Aquí está el script completo de MooTools:

 / * cuando el dom está listo * / window.addEvent ('domready', function () // crear el control deslizante var fx = new Fx.Slide ('message', mode: 'horizontal'). hide ( ); // realice la llamada ajax a la base de datos para guardar la actualización var request = new Request (url: '', método:' post ', onRequest: function () $ (' submit '). disabled = 1; , onComplete: function (response) $ ('submit'). disabled = 0; $ ('mensaje'). removeClass ('success'). removeClass ('failure'); (function () fx.slideOut ();). delay (2000); , onSuccess: function () // update message $ ('message'). set ('text', 'Status updated!'). addClass ('success'); fx.slideIn (); // almacenar valor, desactive la casilla var status = $ ('status'). value; $ ('status'). value = "; // agregar un nuevo estado al contenedor de estado var element = new Element ('div', 'class': 'status-box', 'html': status + '
Hace un momento'). inyectar (' estados ',' arriba '); // cree un control deslizante para él, deslícelo hacia adentro. var slider = new Fx.Slide (element) .hide (). slideIn (); // coloca el cursor en el área de texto $ ('estado'). focus (); , onFailure: function () // update message $ ('message'). set ('text', 'No se pudo actualizar el estado. Inténtelo de nuevo.'). addClass ('failure'); fx.slideIn (); ); // cuando se hace clic en el botón de envío ... $ ('enviar'). addEvent ('clic', función (evento) // detener el envío de formulario normal evento.preventDefault (); // si hay algo en el cuadro de texto si ($ ('status'). value.length &&! $ ('status'). disabled) request.send (data: 'status': $ ('status'). value, 'ajax': 1) ;); );

Paso 5: PHP / MySQL - Parte 2

Esta parte de "encabezado" del código PHP va en la parte superior del mismo archivo PHP que el resto de nuestro
El código está incluido. Este código también lo ejecutarán las solicitudes Ajax y los usuarios que tienen JavaScript.
discapacitado. Al enviar el formulario (y suponiendo que el usuario haya iniciado sesión), insertamos el nuevo
Estado en la base de datos. Si el indicador Ajax está establecido (por el código de MooTools anterior), sabemos que
el usuario tiene javascript habilitado y nosotros matamos el script. Si el usuario no lo hizo
use javascript, simplemente establecemos el valor inicial de la variable $ message en "¡Estado actualizado!"
y mostrar la página. Sencillo!

 // conectarse al db $ link = @mysql_connect ('localhost', 'username', 'password'); @mysql_select_db ('blog', $ link); / * envío del formulario * / if (isset ($ _ POST ['status')) && $ _SESSION ['user_id']) // registrar la ocurrencia $ 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); // die si esto se hizo a través de ajax ... if ($ _ POST ['ajax']) die (); else $ message = 'Status Updated!';

Eso es?

¡Sí! Aquí está el archivo completo de PHP / MooTools / XHTML / CSS:

           
Qué estás haciendo?
 
 
  
 
 
  
Actualizaciones recientes
 
 ', stripslashes ($ row [' status ']),'
', $ fila [' ds '],'
'; ?>