Crea un Shoutbox básico con PHP y SQL

En este tutorial, crearemos un sistema 'Shoutbox' básico con PHP. Dirigido a los principiantes para el desarrollo de PHP, esto le permite trabajar mucho con las bases de datos antes de pasar a algunos de los tutoriales de PHP más avanzados aquí en NETTUTS..




Introducción

Este tutorial lo guiará a través del proceso de creación de un "shoutbox" básico con PHP, utilizando una base de datos MySQL para almacenar los gritos, y luego hacer que se vea bien con algunos CSS. El tutorial está dirigido a diseñadores que confían en HTML y CSS, pero desean probar suerte en el desarrollo con PHP..

Siguiendo el tutorial, es de esperar que tenga un buen conocimiento de los conceptos básicos del uso de PHP para comunicarse con una base de datos para enviar, solicitar y recibir información. También incluiremos el uso de Gravatars en nuestro Shoutbox, agregando un poco de empuje adicional.!

Para aquellos que no lo han hecho, te recomiendo que leas nuestra serie PHP From Scratch para entender exactamente qué es PHP, y que veas algunas de las sintaxis básicas y cómo usamos las variables..

Los archivos de fuentes también se comentan para aquellos que prefieren aprender de esa manera..

Paso 1 - Comenzando

Base de datos

Antes de comenzar, ya debe tener una configuración de base de datos en su servidor web. Asegúrese de tener a mano los siguientes detalles:

  • Nombre de host (por ejemplo,. localhost)
  • Nombre de la base de datos
  • Nombre de usuario para la base de datos
  • Contraseña

En la base de datos, tendrá que crear una tabla llamada gritos con cinco campos:

  • carné de identidad
  • nombre
  • correo electrónico
  • enviar
  • dirección IP

Para crear esto, ejecute el siguiente código SQL. Normalmente ejecutará esto desde la pestaña SQL en phpMyAdmin.

 CREAR TABLA 'grita' ('id' INTEGER SIN NOMBRARSE NULL AUTO_INCREMENT, 'nombre' VARCHAR (45) NOT NULL, 'correo electrónico' VARCHAR (60) NOT NULL, 'post' TEXT NOT NULL, 'dirección' 'VARCHAR (45) NOT NULL, CLAVE PRIMARIA ('id'));

Debería recibir un mensaje "Su consulta SQL se ha ejecutado correctamente"

Los archivos

Necesitaremos tres archivos creados para este proyecto:

  • index.php
  • style.css
  • db.php

También necesitarás una carpeta con nuestras imágenes requeridas. Toma esto de los archivos fuente.

Detalles de conexión de base de datos

los db.php archivo será utilizado para almacenar los datos de nuestra base de datos. Ábralo e inserte el siguiente código:

 

Paso 2 - Interacción

Comienza tu index.php archivo con el siguiente código, simplemente comienza nuestro documento y coloca algunas secciones para personalizar más tarde.

     Shoutbox para NETTUTS de Dan Harper    

Caja de salida

Dan Harper: NETTUTS

Establecer una conexión

Antes de que podamos hacer algo con una base de datos, necesitamos conectarnos a ella. Inserte lo siguiente después del código anterior. Se explica abajo.

 No se puede conectar al servidor de base de datos en este momento.

'); mysql_select_db ($ database, $ connect) o die ('

No se puede conectar a la base de datos en este momento.

');

Las dos primeras líneas utilizan una función PHP incorporada para obtener el nombre de este archivo y la otra línea para obtener la dirección IP de los visitantes. Usaremos las dos variables más adelante en el tutorial..

Luego incluimos nuestro db.php para que podamos recuperar los detalles de la base de datos que completó. Alternativamente, puede pegar todo desde db.php aquí, pero es una buena práctica separar los detalles.

$ conectar almacena una función para utilizar los detalles de nuestra base de datos con el fin de establecer una conexión con el servidor de la base de datos. Si no puede conectarse, mostrará un mensaje de error y detendrá el resto de la página cargando con die ().

Finalmente, nos conectamos a nuestra base de datos..

¿Se ha enviado algo??

Lo siguiente que haremos es verificar si alguien ha enviado un grito utilizando el formulario (que incluiremos en breve). Verificamos los documentos POST para ver si se ha enviado algo de un formulario.

 if (isset ($ _ POST ['send'])) if (empty ($ _ POST ['name']) || empty ($ _ POST ['email']) || empty ($ _ POST ['post']) )  eco('

No has rellenado un campo obligatorio.

'); else

Comenzamos con nuestro if () que verifica nuestro POST para ver si se ha enviado un elemento denominado "enviar". Si es así, utilizamos la función empty () para asegurarnos de que se hayan completado los campos 'nombre', 'correo electrónico' y 'publicación'. Si no lo estaban, mostramos un error.

De lo contrario, continuamos:

 $ name = htmlspecialchars (mysql_real_escape_string ($ _ POST ['name'])); $ email = htmlspecialchars (mysql_real_escape_string ($ _ POST ['email'])); $ post = htmlspecialchars (mysql_real_escape_string ($ _ POST ['post'])); $ sql = "INSERT INTO grita SET nombre =" $ nombre ", correo electrónico =" $ correo electrónico ", post =" $ post ", ipaddress =" $ ipaddress ";"; if (@mysql_query ($ sql)) echo ('

Gracias por gritar!

'); else echo ('

Hubo un error inesperado al enviar tu grito..

');

En las primeras tres líneas, ejecutamos cada uno de nuestros campos (nombre, correo electrónico y publicación) a través de htmlspecialchars () y mysql_real_escape_string () Funciones y colocarlos en sus propias variables..

htmlspecialchars () es una función diseñada para evitar que los usuarios envíen código HTML. Si no hiciéramos esto, alguien podría poner cualquier HTML en nuestra base de datos que luego se ejecutaría a otros usuarios. Esto es especialmente malo si alguien envía un código javascript que transfiera a los visitantes a un sitio web malicioso.!

mysql_real_escape_string () Es una función similar. Excepto en este caso, el usuario no puede enviar ningún tipo de código SQL al servidor. Si no hiciéramos esto, alguien podría ejecutar código para robar, editar o borrar nuestra base de datos!

Usando nuestros nuevos detalles, creamos una consulta SQL para insertar el grito enviado en la base de datos. En las etiquetas if (), ejecutamos la consulta SQL. Si la consulta se ejecutó con éxito y el grito se agregó a la base de datos, mostramos un "¡Gracias por gritar!" mensaje; de lo contrario mostramos un error.

Recuperando los gritos

Ahora recuperaremos los 8 últimos gritos de nuestra base de datos para mostrarlos al usuario.

 $ query = "SELECT * FROM 'shouts' ORDER BY 'id' DESC LIMIT 8;"; $ result = @mysql_query ("$ query") o die ('

Hubo un error inesperado al agarrar gritos de la base de datos..

'); ?>

    En la primera línea, creamos una nueva consulta SQL para "Recuperar todos los campos de la tabla de 'gritos', ordenarlos descendiendo por el 'ID', pero solo danos los últimos 8".

    En la segunda línea ejecutamos la consulta y la almacenamos en $ result. Nosotros ahora:

     while ($ row = mysql_fetch_array ($ result)) $ ename = stripslashes ($ row ['name']); $ eemail = stripslashes ($ row ['email']); $ epost = stripslashes ($ row ['post']); $ grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5(strtolower($eemail ))"&size=70"; eco('
  • Gravatar

    '. $ ename'.

    '. $ epost'.

  • '); ?>

La primera línea dice "Si bien todavía hay filas (resultados) dentro de $ resultado, visualícelas de la siguiente manera:".

tiras reactivas () elimina cualquier barra que mysql_real_escape_string () puede haber insertado en las presentaciones.

$ grav_url Crea nuestro Gravatar a partir de la dirección de correo electrónico de cada usuario..

Luego emitimos (eco) cada grito de una manera específica. Básicamente, mostrar Gravatar, Name y Shout en una lista que podemos diseñar fácilmente más tarde.

La forma

El último paso para esta página es incluir un formulario en la parte inferior de la página a través del cual los usuarios pueden enviar publicaciones a través de.

 

Gritar!

Tenga en cuenta que hacemos referencia a la variable $ self para indicar al formulario a dónde enviar sus resultados; y también enviamos a través del método POST. Debajo del formulario cerramos cualquier etiqueta HTML que abrimos.

Estilo

¡Pruébalo! Has terminado todo el código PHP y deberías poder agregar un nuevo grito y ver los 8 últimos.

Sin embargo, hay un problema. ¡Parece feo! Vamos a resolverlo con algo de CSS :) Al no ser un tutorial de CSS, no voy a revisar ninguno de los estilos, pero todo es bastante básico..

 * margen: 0; relleno: 0;  cuerpo fondo: # 323f66 url superior central ("images / back.png") no se repite; color: #ffffff; Familia tipográfica: Helvética, Arial, Verdana, sans-serif;  h1 font-size: 3.5em; espacio entre letras: -1px; fondo: url ("images / shoutbox.png") no-repetir; ancho: 303px; margen: 0 auto; texto-guión: -9999em; color: # 33ccff;  h2 font-size: 2em; espacio entre letras: -1px; fondo: url ("images / shout.png") no-repetir; ancho: 119px; texto-guión: -9999em; color: # 33ccff; Limpia los dos; margen: 15px 0;  h5 a: enlace, h5 a: visitó color: #ffffff; texto-decoración: ninguno;  h5 a: hover, h5 a: activo, h5 a: focus border-bottom: 1px solid #fff;  p font-size: 0.9em; línea de altura: 1.3em; Familia tipográfica: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;  p.error background-color: # 603131; borde: 1px sólido # 5c2d2d; ancho: 260px; relleno: 10px; margen inferior: 15px;  p.success background-color: # 313d60; borde: 1px sólido # 2d395c; ancho: 260px; relleno: 10px; margen inferior: 15px;  #container width: 664px; margen: 20px auto; text-align: center;  #boxtop margin: 30px auto 0px; fondo: url ("images / top.png") no-repetir; ancho: 663px; altura: 23px;  #boxbot margen: 0px auto 30px; fondo: url ("images / bot.png") no-repetir; ancho: 664px; altura: 25px;  #content margen: 0 auto; ancho: 664px; alineación de texto: izquierda; fondo: url ("images / bg.png") repeat-y; relleno: 15px 35px;  #content ul margin-left: 0; margen inferior: 15px;  #content ul li estilo de lista: ninguno; Limpia los dos; acolchado superior: 30px;  #content ul li: first-child padding-top: 0;  .meta ancho: 85px; alineación de texto: izquierda; flotador izquierdo; min-height: 110px; font-weight: negrita;  .meta img relleno: 5px; color de fondo: # 313d60;  .meta p font-size: 0.8em;  .shout ancho: 500px; flotador izquierdo; margen izquierdo: 15px; min-height: 110px; relleno superior: 5px;  form claro: ambos; margin-top: 135px! important;  .fname, .femail ancho: 222px; flotador izquierdo;  form p font-weight: negrita; margen inferior: 3px;  form textarea width: 365px; desbordamiento: oculto; / * elimina la barra de desplazamiento vertical en la entrada de formulario de IE * /, form textarea background-color: # 313d60; borde: 1px sólido # 2d395c; color: #ffffff; relleno: 5px; Familia tipográfica: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif; margen inferior: 10px; 

Conclusión

Así que ahí lo tienes! ¡Un Shoutbox de gran apariencia y funcionalidad! Te habrás preguntado qué punto crear un Shoutbox es, y bueno, tienes razón, no tiene sentido. Pero lo que sí hace es ayudarlo a comprender mejor cómo usar PHP para trabajar con una base de datos, lo que le permite pasar a guías mucho más avanzadas aquí en NETTUTS..

.