Comunidad de diseño web y desarrollo en internet

Muro parecido a Facebook en PHP, MySQL y JQuery

Saludos, es la primera vez que publíco algo, espero que a alguien le sirva.

Con este código vamos a demostrar cómo incluir información a una base de datos y mostrarla dinámicamente con el framework de JavaScript: JQuery, para aquellos que quieran saber como trabajar con AJAX en JQuery.

El ejemplo tiene un funcionamiento reducido, pero parecido al muro de Facebook, junto con el diseño.

Esta sería la página de inicio:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<!--
 * Creado el 25/08/2011
 *
 * Autor: Daniel Mora
 * Email: danmoracr@gmail.com
 * 
-->
 <head>
  <title>Muro Tipo Facebook</title>
  
  <!-- Se incluye el framework de JavaScript "JQuery" -->
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function loadWall(){
     //Funcion para cargar el muro
     $("#wall").load('wall.php');
     //Devuelve el campo message a vacio
     $("#msg").val("")
  }
  
  //Cuando el documento esta listo carga el muro
 $(document).ready(function(){
   loadWall();
 });
  </script>
  
  <!-- Le doy un poco de estilo-->
  <style type="text/css">
     body{
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
     }
     label{
        color: #808080;
        font-size: 11px;
        font-weight: bold;
        line-height: 30px;
     }
     #wrapper{
        width: 605px;
        margin-left: auto;
        margin-right: auto;
     }
     #msg{
        border: thin solid #B4BBCD !important;
        padding: 5px;
     }
     #submit{
        color: #fff;
        font-size: 13px;
        background-color: #5B74A8;
        background-image: url("background.png");
        background-position: 0 -98px;
        background-repeat: no-repeat;
        border-color: #29447E #29447E #1A356E;
       border-style: solid;
       border-width: 1px;
       cursor: pointer;
       display: inline-block;
       font-weight: bold;
       line-height: normal !important;
       padding: 4px 6px 4px;
       text-align: center;
       text-decoration: none;
       vertical-align: top;
       white-space: nowrap;
     }
     #wall{
        width: 430px;
        min-height: 200px;
        border: solid thin #B4BBCD;
        margin-top: 10px;
     }
     #wall ul{
        list-style: none;
        font-size: 12px;
        line-height: 20px;
     }
     #wall ul #date{
        font-style: italic;
        font-size: 11px;
        color: #ccc;
        padding-left: 5px;
     }
     #loading{
        float: left;
        position:relative;
        top: 10px;
        left: 450px;
        display: none;
     }
  </style>
  
 </head>
 <body>
 <div id="wrapper">
 
    <div id="form">
       <form action="javascript: addMessage();" method="post" id="form_wall">
          <label for="msg">Type text below...</label>
          <br />
          <input type="text" name="msg" id="msg" maxlength="200" size="50" />
          <input type="submit" name="submit" id="submit" value="Share" />
       </form>
    <div id="loading"><img src="loading.gif" /></div>
    </div>
    
    <div id="wall"></div>
    
 </div>
 
<script>
   function addMessage(){
      
      //Tomas el valor del campo msg      
      var msg = $("#msg").val();
      
      //Si empieza el ajax muestro el loading
      $("#loading").ajaxStart(function(){
         $("#loading").show();
      });
      
      //Cuando termina el ajax oculta el loading
      $("#loading").ajaxStop(function(){
         $("#loading").hide();
      });
      
      //Se envian los datos a url y al completarse se recarga el muro
      //con la nueva informacion
      $.ajax({
         url: 'action.php',
         data: 'msg='+ msg,
         type: 'post',
         error: function(obj, msg, obj2){
            alert(msg);
         },
         success: function(data){
            loadWall();
         }
      });      
   };
</script>
 </body>
</html>


Ahora la página encargada de mostrar la información de la base de datos:

wall.php

Código :

<?php
/*
 * CREATE DATABASE wall;
 * CREATE TABLE message (id int AUTO_INCREMENT , message tinytext, date timestamp, PRIMARY KEY(id));
 * 
 */

//Conecto al servidor
$cx = mysql_connect("localhost", "root", "") or die("Error connect: ".mysql_error());
 
//Seleccion la base de datos
mysql_select_db("wall") or die("Error select db: ".mysql_error());

//Realizo la consulta de la tabla y ordeno por fecha (El ultimo mensaje de primero)
$query = mysql_query("SELECT * FROM message ORDER BY date DESC", $cx);

//Muestro los mensaje en una lista desordenada
echo '<ul id="message">';
//Si la consulta es verdadera
if($query == true){
   //Recorro todos los campos de la tabla y los muestro
   while ($row = mysql_fetch_array($query)){
      echo "<li><p>".$row['message']." <span id=\"date\">".$row['date']."</span></li>";
   }
}
echo '</ul>'
?>


Y por último la página encarga de incluir el nuevo mensaje a la base de datos:

Código :

<?php
//Defino mi variable mensaje
$msg = $_POST['msg'];

//Si no esta vacia
if(!empty($msg)){
   //Conecto con la base de datos
   $cx = mysql_connect("localhost", "root", "") or die("Error connect: ".mysql_error());
   //Selecciono la base de datos
   mysql_select_db("wall") or die("Error select db: ".mysql_error());
   //Inserto el mensaje al tabla
   mysql_query("INSERT INTO message (message) VALUES ('".$msg."')", $cx);
}
?>





ver ejemplo aqui

Muchas gracias por tomarse el tiempo de leer este humilde aporte, espero poder seguir aportando algunas de mis ideas y leer las de ustedes.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate