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: [email protected] * --> <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.
podrías explicar en un párrafo que es lo que estas explicando y lo que se logra con todo ese código? dejalo como respuesta y yo edito el tutorial.
cualquier consulta me avisas
Por danmoracr el 31 de Agosto de 2011
Por danmoracr el 31 de Agosto de 2011
Y en mi base de datos, tengo que hacer algo? o automaticamente se creara la tabla respectiva?
Gracias por el aporte!
gracias por el aporte.
saludos!!
Por danmoracr el 01 de Septiembre de 2011
Demo
Hay que crear la base de datos y la tabla, pero yo escribí el codigo sql correspondiente, tengo uno que si crea la base de datos y la tabla, pero no se como editar la información para cambiar el codigo.
Si me pudiera explicar como lo cambio lo agrego, es para no duplicar la información.
Gracias!!!
danmoracr :
Si me pudiera explicar como lo cambio lo agrego, es para no duplicar la información.
Gracias!!!
todos los códigos extras y comentarios podes hacerlos como respuesta al tuto. ya esta en portada por lo que no podemos cambiarlo
organizalo mejor para el próximo aporte
Por bottico el 01 de Septiembre de 2011
Por PELIGRO el 02 de Septiembre de 2011
El acceso a esta página de Internet ha sido bloqueado por
ESET NOD32 Antivirus. La misma se encuentra en la lista de sitios con
contenido potencialmente.
Por froilanq el 02 de Septiembre de 2011
Por danmoracr el 02 de Septiembre de 2011
Por Julio Mena P. el 06 de Septiembre de 2011
Por maldoariel el 09 de Septiembre de 2011
Por Rodrigo el 22 de Septiembre de 2011
Por soniderot el 06 de Octubre de 2011
Por garcosc el 29 de Octubre de 2011
Por garcosc el 29 de Octubre de 2011
Por flako el 14 de Noviembre de 2011
Por flako el 14 de Noviembre de 2011
Por diego el 16 de Noviembre de 2011
Por diego el 16 de Noviembre de 2011
Por mono el 24 de Noviembre de 2011
este error me sale..Error select db: Access denied for user
....soy novato en esto..
una ayuda por favor....
gracias....
mono-blog :
este error me sale..Error select db: Access denied for user
....soy novato en esto..
una ayuda por favor....
gracias....
Es porque a lo mejor no pusiste datos correctos en la conexion a mysql.
Por johanns el 30 de Noviembre de 2011
[email protected]
Por Johanns el 07 de Diciembre de 2011
<?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);
}
?>
EN QUE PARTE LA PONGO??? o DONDE??
Johanns-blog :
<?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);
}
?>
EN QUE PARTE LA PONGO??? o DONDE??
Es php. Crea un nuevo documento y guardalo como action.php. Listo.
Por kayr0 el 10 de Diciembre de 2011
Notice: Undefined index: msg in C:\wamp\www\comentarios\action.php on line 3
y no se como solucionarlo por favor si alguien me puede ayudar con esto se le agradecería
Por kayr0 el 11 de Diciembre de 2011
Por CreativeMinds el 11 de Diciembre de 2011
Muro (comparte y obtiene links con su informacion, Publica y sube fotos desde un uploader, puedes comnetar una publicacion y me gusta por separado (asigando por ID) y otras cositas).
Pero esta buena tu idea
Por fede el 03 de Enero de 2012
Principal
Wall
y otro mas
Que nombre les pongo y cual ejecuto? gracias
Por DaCoder el 06 de Enero de 2012
index.html
wall.php
action.php
asumiendo que descargaste la libreria de JQuery, de lo contrario necesitaras agregar a estos
jquery.js
Por DaCoder el 06 de Enero de 2012
http://libreriacanaan.com/ejemplos/muro/
Por Maria el 07 de Enero de 2012
Por Maria el 07 de Enero de 2012
data: 'msg='+ msg, ??
Saludos y gracias
Por mari el 07 de Enero de 2012
Por jorge el 30 de Enero de 2012
Por Marcos el 02 de Marzo de 2012
Lo que si, quisiera saber si alguno sabe como se podria hacer para que cuando uno ingresa un mensaje tambien se actualice automaticamente la pagina para todos los q esten conectados, como en facebook, cada vez q alguien pone un mensaje nuevo automaticamente le aparece a todos los usuarios.
Estaria muy agradecido si alguien puede ayudarme
Saludos!!
Por sandinosaso el 09 de Marzo de 2012
el nod32 me bloquea tu página pues cree sos un virus
me explicas esto?
Por danmoracr el 11 de Marzo de 2012
sandinosaso-blog :
el nod32 me bloquea tu página pues cree sos un virus
me explicas esto?
Más arriba lo explico. los subdominios .co.cc al ser gratuitos han sido usados muchas veces para fines no muy seguros, entonces algunos antivirus ni siquiera consultan el contenido si no que de una vez los bloquean. Con certeza te digo que este sitio no tiene virus.
Por neone el 15 de Marzo de 2012
Por Sergio Gomez el 28 de Abril de 2012
$.ajaxSetup({ cache: false });
quedaria asi
function addMessage(){
$.ajaxSetup({ cache: false });
//Tomas el valor del campo msg
var msg = $("#msg").val();
Por AndresW el 24 de Mayo de 2012
Por k-mi el 28 de Agosto de 2012
Por Marino Maita el 17 de Septiembre de 2012
Por enrique el 13 de Marzo de 2013
Por Andyg el 03 de Agosto de 2013
[email protected]
Por jairo el 08 de Septiembre de 2013
Por jcarlos el 15 de Febrero de 2014
graciass
Por 3wre el 12 de Agosto de 2014
Por albemarolange el 21 de Agosto de 2014
Por micky el 28 de Octubre de 2014
Por Ulberto el 18 de Agosto de 2016
Gracias