Formulario PHP con MySQL - Materialize

En esta ocasión veremos cómo conectar PHP a MySql, para esto vamos a realizare un formulario con los campos de nombre, email y mensaje. Esto es suponiendo que lo vamos a usar en un sitio donde queremos que nuestros visitantes nos puedan contactar.

Para esto previamente debemos tener instalado un entorno de desarrollo para web, en este caso utilizare MAMP

Primero debemos crear nuestra base de datos, les muestro la base de datos y tabla que utilice para este ejemplo:

Usando PHPMyAdmin, damos en el lado izquierdo en NEW después para crear la base de datos ingresamos el nombre y collation

Ahora creamos una tabla en este caso la nombre usuarios, quedando de la siguiente manera:

Ya que tenemos la base de datos y la tabla correctamente vamos a continuar con la conexión en php.

Creamos una carpeta dentro del directorio htdocs de MAMP al igual que en XAMPP, pero si utilizan WAMP la carpeta la tendrán que crear dentro del directorio de WWW.

Esta seria la ruta de mi carpeta

C:\MAMP\htdocs\pruebas\Formulario

Dentro vamos a crear dos archivos

Index.html: En este archivo vamos a crear el formulario

registro.php: En este archivo php vamos a crear la conexión del formulario a la BD y la consulta para insertar los datos.

Index.html quedaría de la siguiente manera

Datos a tomar en cuenta:

<form action="" method="">

Form es una etiqueta que se compone de varios atributos de los cuales action y method son los interesantes.

action: aquí se indica hacia que pagina se enviara la información

method: tenemos la opción get y post y es como se envia la información del formulario hacia otra pagina.

GET: Se pasan los valores por medio de la URL

Ejemplo: http://localhost/pruebas/Formulario/registro.php?nombre=Jose+Miguel+Pe%C3%B1a+Martinez&email=jpena%40innoceanmexico.com&mensaje=Este+es+el+mensaje&submit=Enviar

POST: Este método es mas seguro ya que la información se transmite mediante el protocolo HTTP.

Y también contamos con otras etiquetas dentro del formulario que son los inputs y estas a su vez contienen un atributo name que será el nombre de las variables que usaremos para obtener los valores de cada campo.

Ya que tenemos el archivo index.html y vimos un poco del contenido vamos con el archivo registro.php

El archivo contiene datos de conexión a la base de datos los reemplazan por los datos de su conexión. Se valida que la conexión sea correcta si es lo contrario arroja un error

En estas líneas recogemos los datos que vienen del formulario y los almacenamos en variables.

    $nombre = $_POST[nombre];
    $email = $_POST[email];
    $mensaje = $_POST[mensaje];
    

Esta línea vamos a insertar los datos dentro de la tabla usuarios

$query = "INSERT INTO usuarios (nombre, email, mensaje)  VALUES ('$nombre', '$email', '$mensaje')"; 
    

Aquí mostramos los datos insertados

if ($conexion->query($query) === TRUE) {
         echo "<br />" . "<h2>" . "Datos enviados Exitosamente!" . "</h2>";
   echo "<h4>" . "Nombre: " . $nombre . "</h4>" . "\n\n";
   echo "<h4>" . "email: " . $email . "</h4>" . "\n\n";
   echo "<h4>" . "mensaje: " . $mensaje . "</h4>" . "\n\n";
  }
    

Realizamos una prueba

Después de enviar los datos los mostrara de la siguiente manera

Vemos que en la BD se registró correctamente

Pudimos lograr nuestro objetivo conectar nuestro formulario con PHP e insertar datos de esta manera podemos continuar con otras acciones tales como update, delete, select para tener un CRUD completo.

Ya entrando mas en el diseño no me gusta como se ve y aprovechando este formulario podemos agregar un poco mas de estilo utilizando una nueva tecnología, para esto vamos a utilizar Materialize es un framework CSS front-end basado en Material Design https://materializecss.com/

Ya agregándole unas cuantas mas de lineas al código y modificando la estructura el resultado seria el siguiente:

Pueden descargar el código de este repositorio en github