¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Tutorial - Crear Chat / Tagboard
Creado y Programado por SoyJoaquin.
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-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.
$$CODE0$$
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:
$$CODE1$$
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:
$$CODE2$$
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í:
$$CODE3$$
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:
$$CODE4$$
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:
$$CODE5$$
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:
$$CODE6$$
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:
$$CODE7$$
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:
$$CODE8$$
¿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:
$$CODE9$$
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:
$$CODE10$$
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.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Hola, comentarte que tu chat es algo inseguro, ya que admite la utilización de html, por lo que se podrían enviar script de "juankers" y tampoco veo seguridad antiinyecciones. O al menos no lo he visto.
Por cierto, ¿El frame es para que solo se recarge el frame y no toda la página?
Y otra cosa, ¿para que sirve la función .htmlspecialchars()? porque igual me sirve para una cosa si es lo que creo
Por cierto, ¿El frame es para que solo se recarge el frame y no toda la página?
Y otra cosa, ¿para que sirve la función .htmlspecialchars()? porque igual me sirve para una cosa si es lo que creo
Hola, comentarte que tu chat es algo inseguro, ya que admite la utilización de html, por lo que se podrían enviar script de "juankers" y tampoco veo seguridad antiinyecciones. O al menos no lo he visto.
Por cierto, ¿El frame es para que solo se recarge el frame y no toda la página?
Y otra cosa, ¿para que sirve la función .htmlspecialchars()? porque igual me sirve para una cosa si es lo que creo
"Hola, comentarte que tu chat es algo inseguro, ya que admite la utilización de html"
Exactamente para eso sirbe el htmlspecialchars(), No permite realizar la accion de dichos codigos, tan solo muestra el codigo como texto mas no como accion.
"¿El frame es para que solo se recarge el frame y no toda la página?"
Tan solo para que recarge el frame... Para eso puse frame aparte que lo tengo que usar para que el chat no se vuelva laaaarrrgo si hay mucho texto.
Y.. Recuerda que es un tutorial basico... De hay empieza la modificacion para el que lo quiera modificar... Tan solo es una base al igual que el tuto del sistema de notis. por que si no para eso coloco... TagBoard by SoyJoaquin. con descarga y demas xdddddd
Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Pero debería tener un mysql_real_query_scape, para estar seguros de que no habrá inyecciones. Por cierto, que raro se me hace que htmlspecialchar elimine los tag html, imaginaría que haría algo con los caracteres especiales, como las vocales con tilde, o los caracteres especiales.
Bueno... puede que algunas veses no les funcione el chat de la previa, y esto se deve a que lo estare modificando para que puedan ver que tan lejos se puede llegar con este tutorial
Saludos
Saludos
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Bueno... ACTUALIZO EL LINK DE PREVIA!
Me puse a mod mi tagboard y miren como ya va...
Para que vean lo que se puede hacer con este tuto eh? xDDDD
Saludos
Me puse a mod mi tagboard y miren como ya va...
Para que vean lo que se puede hacer con este tuto eh? xDDDD
Saludos
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
despues como lo subo guardo todo en una sola carpeta, subo la carpeta voy a link y me aparece todo un codigo php, subo un archivo con ese codigo y no me funciona que ago?
aqui un ejemplo: http://www.tagboardhl.webcindario.com/chat/
me aparece un codigo, y si subo ese codigo en un archivo no me aparece nada que ago?
aqui un ejemplo: http://www.tagboardhl.webcindario.com/chat/
me aparece un codigo, y si subo ese codigo en un archivo no me aparece nada que ago?
¡Soy el fantasma de Habtium! Me dedico a reemplazar aquellas cuentas que han sido eliminadas. 👻
Pero hay que cosas que no entiendo:
1-¿que es SQL?
2-¿Como puedo crear una base de datos?
3.-¿Necesito un host?.
1-¿que es SQL?
2-¿Como puedo crear una base de datos?
3.-¿Necesito un host?.
Pero hay que cosas que no entiendo:
1-¿que es SQL?
Es una base de datos.
2-¿Como puedo crear una base de datos?
No es dificil, desde phpmyadmin, le das a crear nueva base de datos, y ya está. Pero para tener phpmyadmin necesitas un servidor que...
3.-¿Necesito un host?.
Si quieres que no seas el único que pueda hablar en el chat... Sí. Sino, puedes instalarte un apache, el php y el sql en tu ordenador, y que funcione perfectamente.
despues como lo subo guardo todo en una sola carpeta, subo la carpeta voy a link y me aparece todo un codigo php, subo un archivo con ese codigo y no me funciona que ago?
aqui un ejemplo: http://www.tagboardhl.webcindario.com/chat/
me aparece un codigo, y si subo ese codigo en un archivo no me aparece nada que ago?
¿Lo guardas en un archivo PHP? ¿Tu servidor soporta PHP?
despues como lo subo guardo todo en una sola carpeta, subo la carpeta voy a link y me aparece todo un codigo php, subo un archivo con ese codigo y no me funciona que ago?
aqui un ejemplo: http://www.tagboardhl.webcindario.com/chat/
me aparece un codigo, y si subo ese codigo en un archivo no me aparece nada que ago?
Pues... Eso pasa por que no tienes la funcion de PHP Activada... Para activarla en miarroba entra a la pestaña "PHP" cuando estes administrando tu sitio web (Se encuentra en el mirmo lugar donde le das al "FTP"
Saludos
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Pues... Eso pasa por que no tienes la funcion de PHP Activada... Para activarla en miarroba entra a la pestaña "PHP" cuando estes administrando tu sitio web (Se encuentra en el mirmo lugar donde le das al "FTP"
Saludos
te amo. Muchas gracias lo are ahora mismo, pero mira, al subirlo me aparece esto
Parse error: syntax error, unexpected '}' in /home/webcindario/t/a/tagboardhl/index.php/index.php on line 68
¡Soy el fantasma de Habtium! Me dedico a reemplazar aquellas cuentas que han sido eliminadas. 👻
te amo. Muchas gracias lo are ahora mismo, pero mira, al subirlo me aparece esto
Parse error: syntax error, unexpected '}' in /home/webcindario/t/a/tagboardhl/index.php/index.php on line 68
eso quiere decir que falta un "}" en un if()
No modificaste el codigo? :S
Otra cosa...
El Tagboard ya esta a descarga.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
¿como puedo editarlo para ponerle imagenes como tu has hecho?