Paginas relevantes

Vinculos
http://notas-de-codigo.tumblr.com/post/17893112113/chat-sencillo-jquery-phpmysql
http://www.youtube.com/watch?v=feKAJwhQFSk
http://html5up.net/

Crear la bases de datos y las tablas desde php

Crear la base de datos y o las tablas de nuestro proyecto desde php puede ser til de vez
en cuando, o por lo menos cmodo, ya que no tenemos que estar abriendo nuestro editor
de mysql para despus terminar haciendo lo mismo, simplemente podemos crear una clase
en php que contenga las funciones que necesitemos para crear la base de datos y nuestras
tablas, slo basta con conocer un poco la sintaxis de mysql para poder hacer las consultas
que necesitamos.
Como otras tantas veces crearemos una clase y nos conectaremos a nuestro servidor
utilizando la extensin PDO, como veremos no le pasaremos la base de datos a la que
queremos conectar, slo le pasaremos el servidor, el user y la pass y a continuacin
crearemos en una funcin la base de datos y las tabla users y posts.
Como veremos simplemente con ejecutar esa funcin se crear tanto la base de datos como
las tablas, as que nunca ser un caso prctico hacer esto as, deberamos hacer
comprobaciones como por ejemplo quin est accediendo al script y dependiendo de eso
dejar o no ejecutar la funcin, pero eso lo dejo para que cada uno lo haga por su cuenta
porque est ms que explicado como crear usuarios y establecer sesiones.
Veamos como crear nuestra clase, nuestra conexin y la funcin encargada de armar nuestra
base de datos.

PHP

1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3

<?php
class Create_database
{
protected $pdo;
public function __construct()
{
$this->pdo = new PDO("mysql:host=servidor;", "root", "password");
}
//creamos la base de datos y las tablas que necesitemos
public function my_db()
{
//creamos la base de datos si no existe
$crear_db = $this->pdo->prepare('CREATE DATABASE IF NOT EXISTS nueva COLLATE
utf8_spanish_ci');
$crear_db->execute();
//decimos que queremos usar la tabla que acabamos de crear
if($crear_db):
$use_db = $this->pdo->prepare('USE nueva');
$use_db->execute();
endif;
//si se ha creado la base de datos y estamos en uso de ella creamos las tablas
if($use_db):
//creamos la tabla usuarios
$crear_tb_users = $this->pdo->prepare('
CREATE TABLE IF NOT EXISTS users (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(100) COLLATE utf8_spanish_ci NOT NULL,
lastname varchar(150) COLLATE utf8_spanish_ci NOT NULL,
username varchar(100) COLLATE utf8_spanish_ci NOT NULL,
password varchar(100) COLLATE utf8_spanish_ci NOT NULL,
email varchar(100) COLLATE utf8_spanish_ci NOT NULL,
registro date NOT NULL,
fecha datetime NOT NULL,
PRIMARY KEY (id)
)');
$crear_tb_users->execute();
//creamos la tabla posts
$crear_tb_posts = $this->pdo->prepare('
CREATE TABLE IF NOT EXISTS posts (
id int(11) NOT NULL AUTO_INCREMENT,
id_user int(11) NOT NULL,
titulo varchar(255) COLLATE utf8_spanish_ci NOT NULL,
contenido text COLLATE utf8_spanish_ci NOT NULL,
fecha_post datetime NOT NULL,
PRIMARY KEY (id)
)');
$crear_tb_posts->execute();
endif;
}

2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8

}
//ejecutamos la funcin my_db para crear nuestra bd y las tablas
$db = new Create_database();
$db->my_db();
?>

Como podemos ver es un script bien sencillo, y al final vemos como creamos una instancia de
la clase Create_database y accedemos a la funcin my_db, de esta forma al acceder a este
script esa funcin ser ejecutada y nuestra base de datos con las dos tablas ser creada,
espero que se haya entendido, un saludo.

Un chat sencillo con jQuery, PHP y MySQL

Un chat interno permite facilitar la comunicacin entre las personas encargadas de
la administracin de un sitio web, especialmente cuando este nmero es elevado.
Es por esta razn que les comparto una pequea gua para lograr un chat
sumamente sencillo y rpido de implementar empleando una base de datos (en mi
caso MySQL), un poco de PHP y jQuery.
El chat consistir en tres archivos:
chat.php: contendr la cara visible del chat y el JavaScript que generar
la interaccin.
cargar-mensajes.php: se encargar de cargar los mensajes que
mostraremos en el chat.
insertar-mensajes.php: tomar el mensaje y lo insertar en la base de
datos.

cargar-mensajes.php

e insertar-mensajes.php sern invocados a travs de

eventos configurados con jQuery.

En primer lugar, crearemos la tabla en la base de datos. La llamaremos chat y
tendr los campos: id, usuario, mensaje, fecha.
Procedemos a crear cargar-mensajes.php:
?
1

<?php<br>

require('conexion_a_la_bd');

// Seleccionamos la base de datos

mysql_select_db('base_de_datos');

4
5
6

// Realizamos la consulta de los ultimos 50 mensajes en el chat

$resultado = mysql_query("SELECT * FROM chat ORDER BY fecha DESC LIMIT 0, 50");

7
8
9
10

// Creamos la entrada HTML para cada mensaje

$ret = '';
while($msj = mysql_fetch_object($resultado))
{<br>

$arrDateTime = explode(" ", $msj->fecha);<br>

$arrDate = explode("-",

11
12
13

$arrDateTime[0]);<br>
$arrTime = explode(":", $arrDateTime[1]);<br>
if($arrDateTime[0] == date("Y-m-d"))<br>
$dia = "Hoy, ";<br>
else<br>
$dia = $arrDate[2].'/'.$arrDate[1].'/'.$arrDate[0].', ';<br><br>
if($arrTime[0] >
12)<br>
$hora = ($arrTime[0]-12).':'.$arrTime[1].'pm';<br>
else<br>
$hora = $arrTime[0].':'.$arrTime[1].'pm';<br>
<br>
$ret = '<div><span title="'.
$dia.$hora.'" class="chat-usuario">'.$msj->usuario.'</span>: '.$msj>mensaje.'</div>'."\n".$ret;
}

14
15

// Liberamos la consulta

16

mysql_free_result($resultado);

17
18

// Imprimimos los mensajes

19

echo $ret;
?>

A continuacin, vamos a crear insertar-mensaje.php:

?
1

<?php <br>

//Verificamos que el nombre usuario este presente en el campo de texto

oculto

3
4
5
6

$u = false;
if(isset($_POST['chat-usuario']) and strlen(trim($_POST['chatusuario'])) > 0)
{
$usuario = $_POST['chat-usuario'];

$u = true;

8
9

require('conexion_a_la_bd');

10
11
12
13
14

//Verificamos que el mensaje sea valido

$m = false;
if(isset($_POST['chat-mensaje']) and strlen(trim($_POST['chatmensaje'])) > 0)
{
$mensaje = $_POST['chat-mensaje'];

$m = true;

15
}

16
17

$ret = '';

18
19

// Si ambos son validos

20

if($u and $m)

21

22
23
24
25

mysql_select_db('base_de_datos');
mysql_query("INSERT INTO chat (usuario,mensaje) VALUES ('".
$usuario."','".$mensaje."')");
$ret = '<div><span title="Hoy, '.date('h:i').'" class="chatusuario">'.$usuario.'</span>: '.$mensaje.'</div>'."\n";

26

27
28

echo $ret;
?>

El atributo title que colocamos conteniendo al nombre de usuario nos

permitir que aparezca un mensaje con la hora de publicacin, al
posarnos sobre el nombre de usuario.
Ahora, nos toca la parte visible de chat.
En el <body> de chat.php colocaremos el cuadro de mensajes y el formulario de
insercin de mensajes nuevos:
?
43

<div id="chat">

44

<div id="chat-mensajes"></div>

45

<form id="chat-form">

46
47

<input type="hidden" name="chat-usuario" value="<?php echo

$chat_usuario; ?>">
<label for="chat-form-mensaje">Mensaje:</label>

48

<textarea name="chat-mensaje" id="chat-form-mensaje"></textarea>

49

<input type="submit" value="Enviar">

50
51

</form>
</div>

Es importante que en un archivo CSS incorporemos lo siguiente:

?
1

#chat-mensajes {

2
3

overflow: auto;
}

De esta manera podremos crear un contenido deslizable cuando los mensajes

sobrepasen el tamao del <div>.
En el <head> ir el cdigo JavaScript que permitir el dinamismo. Para ello
emplearemos dos bibliotecas: jQuery (framework) y jQuery.scrollTo (nos
permitir poder ubicar el <div> en el mensaje ms reciente). Colocaremos entre
las etiquetas <head>:
?
4

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.scrollto.min.js"></script>

<script type="text/javascript">

7
8
9
10
11
12
13
14
15
16

$(document).ready(function() {
// Accion que nos ubica en el mensaje mas reciente
function setScroll(){
$('#chat-mensajes').scrollTo('div:last', 1000 );
}

// Indicamos las acciones a ejecutar al enviar un mensaje

$('#chat-form').submit(function() {
$.post('insertar-mensaje.php', $('#chat-form').serialize(),
function(data) {
$('#chat-mensajes').append(data);
mensaje al final

// Aadir el nuevo

17
18

$('#chat-form-mensaje').val('');
setScroll();

19

});

20
21

// Limpiar el cuadro

de texto

return false;
});

22
23
24
25

// Cargamos los mensajes y nos ubicamos al ultimo

$('#chat-mensajes').load('chat/cargar-mensajes.php',
function(response, status, xhr) {
if (status == "error") {

26

var msg = "Hubo un error en la carga del chat: ";

27

$("#error").html(msg + xhr.status + " " + xhr.statusText);

28

} else {

29

setScroll();

30
31

}
});

32
33
34

// Le indicamos cargar los mensajes cada 15 segundos

setInterval(function() {

35

$('#chat-mensajes').load('cargar-mensajes.php');

36

setScroll();

37

},15000);

38
39
40

});
</script>

Guardamos todo, nos vamos al navegador, y ya deberamos tener funcionando

nuestro chat en nuestro servidor local.