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-Mensajes

Esos 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=&#39;ver.php&#39;");
?>
<?
$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 &#39;<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">&#39;.htmlspecialchars($chat[&#39;de&#39;]).&#39;</font></b></td></tr><tr><td><font size="1" face="Tahoma">&#39;.htmlspecialchars($chat[&#39;mensaje&#39;]).&#39;</font></td></tr><tr><td><hr color="#000000" width="150" size="1"></td></tr></table>&#39;;
}
?>
</p>
Este codigo muestra de manera sencilla los mensajes y que se vallan actualizando cada 15 segundos.

Previas:
http://habbopaint.webcindario.com/chat/chat.php

Gracias por leer el tutorial.
Si nesesitan ayuda o tienen alguna duda diganme..

Tutorial creado y Programado por SoyJoaquin.
Espero que les aya ayudado.

Buenas... En este post aprenderán a crear un sistema de noticias con este tutorial hecho por mi.
Bueno.. Para crear un sistema de noticias hay que tomar en cuenta 3 pasos básicos:

1-Conexión SQL
2-Formulario Guardar
3-Mostrar datos

Así que empezaremos paso a paso como hacerlo y empezamos con:

-Paso 1: Conexión SQL:
-1.1: Crear conexion a la SQL.

Aquí lo que tenemos que hacer es crear un simple archivo .PHP con el nombre que le quieran dar, Por ejemplo "coneccion.php". De aquí empezaremos a hacer las conexiones con la base de datos SQL.

En este caso tomaremos el texto como ejemplo de el conectar.php de los mc, ya que una conexión siempre es igual.

<?
$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 `noticias` (
`id` INT auto_increment ,
`titulo` VARCHAR( 100 ) NOT NULL DEFAULT 'No Hay Titulo',
`autor` VARCHAR( 50 ) NOT NULL DEFAULT 'Desconocido',
`mensaje` VARCHAR( 1000 ) NOT NULL DEFAULT 'No Hay Mensaje',
PRIMARY KEY ( `id` )
) ENGINE = MYISAM

-Paso 2: Formulario Guardar:
-2.1: Crear Include.

En este paso crearemos el formulario que guardara los datos de tu noticia en tu base de datos. Este paso es demasiado fácil ya que se usara mas HTML que el mismo PHP.

Para empezar el formulario crearemos un archivo .PHP en blanco con el nombre que quieran (no importa el nombre), Después en la cabecera de tu archivo PHP colocaremos un include al archivo "coneccion.php" ya que sin el no se podrían guardar los datos.

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 "coneccion.php", y quedaría así:

<?
include("coneccion.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 HTML Formulario.

Ahora estamos en la parte mas fácil del tutorial ya que tan solo crearas un código HTML. En este paso crearas un formulario bajo el código de " <form action="" method="post"> ... </form>", en "..." iran los input o mejor dicho "Campo de texto".

En este formulario crearas 3 campos de texto o mejor 2 campos de texto y un área de texto (textarea, Campo que hace lo mismo que el input pero es mas largo para poder escribir mejor textos largos.) para que sea mejor escribir la noticia.

Los 2 campos de texto los llamaremos uno "titulo" y el otro "autor", y el textarea lo llamaremos "noticia", y claro.. ningún formulario esta completo si no tiene un botón de enviar así que para eso crearemos un botón con el nombre de "guardar" con el valor que quieran que aparezca en el botón. Así que nuestro código va así por el momento:

<form action="" method="post">

<p align="center"> <input type="text" name="titulo" size="20"></p>

<p align="center"> <input type="text" name="autor" size="20"></p>

<p align="center"><textarea rows="8" name="noticia" cols="41"></textarea></p>

<p align="center"><input type="submit" value="Guardar Noticia" name="guardar"></p>
</form>
Pero claro nadie es genio para saber donde escribir el titulo o el autor y para eso le agregaremos un texto para identificar cual es quien. Así que quedaría así:

<form action="" method="post">

<p align="center">Titulo: <input type="text" name="titulo" size="20"></p>

<p align="center">Autor: <input type="text" name="autor" size="20"></p>

<p align="center">Noticia:</p>

<p align="center"><textarea rows="8" name="noticia" cols="41"></textarea></p>

<p align="center"><input type="submit" value="Guardar Noticia" name="guardar"></p>
</form>
Recuerda que puedes editar ese código del formulario como quieras pero sin cambiarle el nombre a los botones ni quitar /editar la etiqueta <form...

Después que lo ayas editado a tu gusto nos viene quedando tan solo el pie de esta pagina. Leer paso 2.3

-2.3: Pie de pagina: Guardar los datos del formulario.
Ahora lo que aremos sera hacer el pie de la pagina de tu formulario...
Por el momento llevamos esto:

<?
include("coneccion.php");
?>
<form action="" method="post">

<p align="center">Titulo: <input type="text" name="titulo" size="20"></p>

<p align="center">Autor: <input type="text" name="autor" size="20"></p>

<p align="center">Noticia:</p>

<p align="center"><textarea rows="8" name="noticia" cols="41"></textarea></p>

<p align="center"><input type="submit" value="Guardar Noticia" name="guardar"></p>
</form>
Ahora lo que aremos sera agregar esto después de tu </form>

<?
if($_POST['guardar'] && $_POST['titulo'] && $_POST['autor'] && $_POST['noticia']){
$act = "INSERT INTO noticias (titulo,autor,mensaje) values ('".$_POST['titulo']."','".$_POST['autor']."','".$_POST['noticia']."')";
if(@mysql_query($act)){echo "<script>alert('¡Noticia Publicada!');</script>";
}}
?>
Esto indica que guardara los campos "titulo","autor" y "noticia" en la tabla "noticias" de tu SQL que creamos en el paso 1.1

Y ya tenemos nuestro formulario listo. Guardalo con el nombre que quieras en tu FTP con la extencion .php , Es decir, "tunombredearchivo.php"

-Paso 3: Mostrar Noticias:
Ya finalizando el tutorial lo que tenemos que hacer ahora es mostrar tus noticias en un archivo .PHP

Para esto creamos un archivo .php con el nombre que quieran en el que van a incluir:

<?
include("coneccion.php");
?>
<?
$noti1 = mysql_query("SELECT * FROM `noticias` ORDER BY `id` DESC limit 9") or die (mysql_error());
?>

<p align="center">
<?php
while($noti = mysql_fetch_assoc($noti1)) 
{ 
  echo &#39;<div align="center"><center><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300" id="AutoNumber1"><tr><td><b><font size="2" face="Verdana"> &#39;.htmlspecialchars($noti[&#39;titulo&#39;]).&#39;</font></b></td></tr><tr><td><b><font size="1" face="Verdana"> &#39;.htmlspecialchars($noti[&#39;mensaje&#39;]).&#39;</font></b></td></tr><tr><td><i><font size="1" face="Verdana">Publicado por:  &#39;.htmlspecialchars($noti[&#39;autor&#39;]).&#39;</font></i></td></tr></table></center></div><hr color="#000000" size="1">&#39;;
} 
?>
</p>Pueden modificarlo a su gusto si así lo desean.

Y Listo!
El sistema de Noticias esta hecho.
Nota: Si quieres agregarle un sistema de usuarios lo unico que tienes que hacer es colocar el sistema de usuarios en la misma carpeta que estos archivos, borrar el campo "Autor" y en el INTO en ves que cargar el '".$_POST['autor']."' vas a colocar la variable que muestra la seccion de tu usuario y debes hacer un include al archivo de tu registro de usuarios que define sierta variable.

Previas:
Escribir Noticia: http://habbopaint.webcindario.com/noticias/formulario.php
Ver Noticias: http://habbopaint.webcindario.com/noticias/ver-noticias.php

Tutorial creado y Programado por SoyJoaquin.
Espero que les aya ayudado.

Aver.. Tengo una duda de un codigo...
Quiero hacer que mi resultado de la consulta " $row["nick"]  " y " ".$_GET['habbo']." " si son iguales muestre algo... de lo contrario muestre otro..
Esto seria con un if un echo y un else sierto?
por ejemplo
<?
if(".$row["nick"]." = ".$_GET['habbo'].") {
echo "Hola";
} else {
echo "desconectado!";
}
?>

deve ser algo asi no? xd
si no es asi diganme :S
Saludos

Aver.. Como creo que todos saben estoy asiendo un sistema de chat sierto?
Bueno.. lo que quiero hacer es.. sustituir el "<>/script h1 h2 h3..." por lo que sea... puede ser *** o bobba o lo que sea..

Aver.. yo tengo este resultado que me mostrara un dato de una consulta de la sql $msj['mensaje'] pero quisiera saber como sustituir el "< > / ....." entre otros. que se pueda encontrar en la sql por una sierta palabra :S ¿Me explico? creo que para esto se usa el "str_replace" pero como ago? :S

Saludos ^^

Nota: o se sustituye antes de guardar en la sql? :S

Haber.. Creo que ya todos conosen lo que es un SELECT, INSERT, ...  Etc
Pero tengo una duda...
Tengo este INSERT a la Sql
INSERT INTO mensajes SET mensaje='$_POST[mensaje]'Como puedo hacer para por ejemplo en esa misma tabla mensajes en el "set" se guarden 2 campos aparte de el de mensaje..
¿Como lo haria? lo separo con comas?

Saludos

CIERREN xDD
ya lo Resolvi

Aver.. tengo una duda...
como puedo hacer para abrir un vinculo en javascrip en un iframe?

por ejemplo... este codigo es del mc y lo nesesito abrir en un iframe pero este me abre en ventana nueva.. Ayuda?


function badges(URL) {
   day = new Date();
   id = day.getTime();
   eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,menubar=0,resizable=0,width=230,height=200,left = 152,top = 134');");
}


Saludos