Tutorial - Crear Chat / Tagboard
Creado y Programado por SoyJoaquin.
Bueno como ya todos saben este es mi segundo tutorial oficial, Este tutorial va dedicado a todas aquellas personas que quieren agrandar cada vez mas sus conocimientos en el gran mundo de la
informatica.
Aqui vamos a
aprender como crear un chat, o mejor dicho "
TagBoard" y para empezar definimos lo que es un tagboard.
Un Tagboard es un simple chat creado para la comunicacion entre los usuarios de un sitio web.y Empezamos...
Para crear un tagboard se tiene que tener en cuenta:
1-Conexión
2-Formulario
3-MensajesEsos 3 factores son los fundamentales para el equilibrio de nuestro tagboard.
-Paso 1: Conexión SQL - MySQL (Base de Datos):-1.1: Crear conexión a la Base de datos SQL.Aqui lo que tenemos que hacer es realizar una coneccion con nuestra base de datos y basta solo de copiar las siguientes lineas y guardarlo en un archivo llamado "conectar.php"
Nota: Recuerda que todas las conecciones a la SQL se realizan totalmente igual, Este mismo Script te puede servir para otras herramientas que crees.
<?
$servidor = "Aqui Servidor";
$usuario = "Usuario de la Base de Datos";
$clave = "Contra de la Base de Datos";
$dbnombre = "Nombre de la Base de Datos";
$conecta = mysql_connect($servidor, $usuario, $clave) or die("No se ha podido conectar con el servidor MySQL. Inténtalo mas tarde.");
mysql_select_db($dbnombre, $conecta);
?>Tienes que cambiar los datos por tus datos de conexión a la
SQL (Base de Datos):
Aqui Servidor (Este es el servidor de la base de datos, si usas miarroba acuérdate que su servidor es mysql.webcindario.com)Usuario de la Base de Datos (Este es tu usuario de la base de datos, si usas miarroba recuerda que tu usuario seria por ejemplo "www.123.webcindario.com" el usuario de este servidor es 123 ¿Entiendes?)Contra de la Base de Datos (Esta es la contraseña de tu base de datos, Si usas miarroba la contraseña seria la que colocaste en la pestaña "Preferencias" en tu administrador del sitio web)Nombre de la Base de Datos (Es el nombre de tu base de datos SQL, Si usas miarroba recuerda que el nombre de la base de datos es el mismo que el usuario)Reemplaza esos datos en el código y guarda el archivo en tu FTP de tu sitio web.
Nota: Recuerda mantener las " " entre el dato que colocaste.-1.2: Código SQL.Este código lo tienen que subir a su base de datos SQL manualmente:CREATE TABLE `mensajes` (
id int primary key auto_increment,
de varchar(255) not null,
mensaje varchar(255) not null
);Lo que hacemos con dicho codigo es crear una tabla llamada "mensajes" con 3 campos (id, de, mensaje) para poder guardar nuestros datos del tagboard.
-Paso 2: Formulario del Chat:-2.1: Crear Include con "conectar.php".En este segundo paso lo que aremos sera crear una pagina
.php en el cual en la primera linea aremos un include al archivo "
conectar.php" que es el que realiza la coneccion con la base de datos SQL
Si no sabes como hacer un include es asi:
<?
include("NOMBRE DEL ARCHIVO");
?>Donde dice "NOMBRE DEL ARCHIVO" colocaran el nombre del archivo que le dieron a su conexión de la SQL en el paso 1. En este caso el nombre seria "conectar.php", y quedaría así:
<?
include("conectar.php");
?>recuerden que es indiferente colocar "
<?PHP" o "
<?" ya que se reconoce de igual forma que se esta iniciando un código php.
ahora sigue con el paso 2.2-2.2: Crear formulario y iframe para mostrar los mensajes.En la misma pagina donde icimos el include...
Lo que aremos sera crear un iframe hacia el link "
ver.php"
(sera el archivo que crearemos en el paso 3) con el tamaño y estilo que deseen.
Despues abajo del iframe crearemos un simple formulario de 2 campos "usuario" y "mensaje" iniciando el formulario de la siguiente manera:
<form action="" method="post">Y claro, ningun formulario esta completo sin un boton de enviar. Para esto crearemos un input de boton bajo el tipo de "submit" que viene quedando asi:
<input type="submit" value="Enviar" name="enviar">Despues de crear los 2 campos, el boton y el iframe cerraremos nuestro formulario bajo la etiqueta "
</form>" para luego iniciar con el paso 2.3
Aqui te dejo un ejemplo de como nos viene quedando el codigo por el momento:
<?
include("conectar.php");
?>
<iframe name="mensajes" width="220" height="350" border="0" frameborder="0" src="ver.php">
El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.</iframe>
<p>
<form action="" method="post">
<input type="text" name="usuario" size="20"></p>
<p><input type="text" name="mensaje" size="20"></p>
<p><input type="submit" value="Enviar" name="enviar"></p>
</p>
</form>
Pues bien, pero... no podemos dejar eso de esa forma tan desorganizada... para eso lo ordenaremos un poco con tablas y algunas descripciones que nos diferencie el campo usuario del mensaje.
y queda asi:
<?
include("conectar.php");
?>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="220" id="AutoNumber1" height="444">
<tr>
<td height="308" width="200">
<iframe name="mensajes" width="220" height="350" border="0" frameborder="0" src="ver.php">
El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.</iframe></td>
</tr>
<tr>
<form action="" method="post">
<td height="28" width="200"><b><font size="1" face="Tahoma">
Usuario:</font></b></td>
</tr>
<tr>
<td height="28" width="200">
<input type="text" name="usuario" size="31"></td>
</tr>
<tr>
<td height="28" width="200">
<font size="1" face="Tahoma"><b>Mensaje:</font></b></td>
</tr>
<tr>
<td height="28" width="200">
<input type="text" name="mensaje" size="31"></td>
</tr>
<tr>
<td height="29" width="226">
<p align="center"><input type="submit" value="Enviar" name="enviar"></td>
</tr>
</form>
</table>
</center>
</div>Tambien puedes aplicarle diseño libre a este formulario, hacerlo como quieras, agregarle colores, imagenes, etc
Yo aqui le aplique un diseño a dicho codigo:
<?
include("conectar.php");
?>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="220" id="AutoNumber1" height="444">
<tr>
<td height="308" colspan="2" width="200">
<iframe name="mensajes" width="220" height="350" border="0" frameborder="0" src="ver.php">
El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.</iframe></td>
</tr>
<tr>
<form action="" method="post">
<td height="28" colspan="2" width="200"><b><font size="1" face="Tahoma">
Usuario:</font></b></td>
</tr>
<tr>
<td height="28" colspan="2" width="200">
<input name="usuario" size="35" style="font-family: Tahoma; font-size: 8pt; font-weight: bold; color: #333333; border-style: double; border-width: 3; float:left" value="Escribe tu usuario..."></td>
</tr>
<tr>
<td height="28" colspan="2" width="200">
<font size="1" face="Tahoma"><b>Mensaje:</font></b></td>
</tr>
<tr>
<td height="28" colspan="2" width="200">
<input name="mensaje" size="35" style="font-family: Tahoma; font-size: 8pt; font-weight: bold; color: #333333; border-style: double; border-width: 3; float:left" value="Escribe tu mensaje..."></td>
</tr>
<tr>
<td height="29" width="115">
<p align="center">
<input type="submit" value="Enviar" name="enviar" style="font-family: Tahoma; font-size: 8pt; font-weight: bold; color: #000000; border: 3px double #111111; background-color: #FFFFFF"></td>
<td height="29" width="115">
<p align="center">
<input type="reset" value="Borrar" name="borrar" style="font-family: Tahoma; font-size: 8pt; font-weight: bold; color: #000000; border: 3px double #111111; background-color: #FFFFFF"></td>
</tr>
</form>
</table>
</center>
</div>¿Les gusta? Bueno Continuamos...
-2.3: Guardar datos en Base de datos SQL.Este paso es demaciado facil, tan solo copiaras este codigo y lo aplicaras al final de la pagina de tu formulario del tagboard:
<?
if($_POST['enviar'] && $_POST['usuario'] && $_POST['mensaje']){
$act = "INSERT INTO mensajes (de,mensaje) values ('".$_POST['usuario']."','".$_POST['mensaje']."')";
if(@mysql_query($act)){echo "<script>alert('¡Enviado!');</script>";
}}
?>Ahora hago explicacion del codigo... Primero definimos si los campos, enviar, usuario, mensaje tienen algun dato definido, si es asi este guardara los datos en la tabla "mensajes" respectivamente en los campos "de" y "mensaje", si esos datos son guardados aparecera una alerta diciendo "¡Enviado!"
Y listo, ya practicamente nuestro tagboard esta listo, ahora solo falta mostrar los mensajes y para eso explicamos el paso 3.
-Paso 3: Ver Mensajes:En este paso crearemos un archivo llamado "ver.php" en el que incluiremos el siguiente codigo:
<?
include("conectar.php");
?>
<?php
header("Refresh: 15; URL='ver.php'");
?>
<?
$chat1 = mysql_query("SELECT * FROM `mensajes` ORDER BY `id` DESC limit 9") or die (mysql_error());
?>
<p align="center">
<?php
while($chat = mysql_fetch_assoc($chat1))
{
echo '<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="190" id="AutoNumber1"><tr><td><b><font size="1" face="Tahoma">'.htmlspecialchars($chat['de']).'</font></b></td></tr><tr><td><font size="1" face="Tahoma">'.htmlspecialchars($chat['mensaje']).'</font></td></tr><tr><td><hr color="#000000" width="150" size="1"></td></tr></table>';
}
?>
</p>Este codigo muestra de manera sencilla los mensajes y que se vallan actualizando cada 15 segundos.
Previas:http://habbopaint.webcindario.com/chat/chat.phpGracias por leer el tutorial.
Si nesesitan ayuda o tienen alguna duda diganme..
Tutorial creado y Programado por SoyJoaquin.Espero que les aya ayudado.
