index.php
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>Social Tablero de comando</title>
<!-- Se incluye el framework de JavaScript "JQuery" -->
<script type="text/javascript" src="../js/jquery-1.8.3.min.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">Escribi texto para compartir...</label>
<br />
<input type="text" name="msg" id="msg" maxlength="200" size="50" />
<input type="file" name="img" id="img" >
<input type="submit" name="submit" id="submit" value="Publicar" />
</form>
<div id="loading"><img src="img/loading.gif" style="width:50px;"/></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>
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", "tabla", "pass") or die("Error connect: ".mysql_error());
//Seleccion la base de datos
mysql_select_db("base") 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 muromensajes 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>'
?>
action.php
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", "tabla", "pass") or die("Error connect: ".mysql_error());
//Selecciono la base de datos
mysql_select_db("base") or die("Error select db: ".mysql_error());
//Inserto el mensaje al tabla
mysql_query("INSERT INTO muromensajes (message) VALUES ('".$msg."')", $cx);
}
?>
