PÁGINA WEB CON CONEXIÓN A BASE DE DATOS.

INTRODUCCIÓN.

En primera instancia debemos tener en perfecto funcionamiento y configuración los archivos de

apache y php, al tenerlos en funcionamiento lo primero que tenemos que hacer es un archivo html
que contendrá un formulario que capture los datos requeridos de los alumnos. Los cuales son los
siguientes:

 Nombre (tipo texto)

 Fotografía (tipo archivo)
 Edad (tipo numero)
 Teléfono (tipo texto)
 Fecha de nacimiento (tipo texto)
 Promedio (tipo numérico)
 Certificado (tipo archivo)
 E-mail (tipo mail)
 Curp (tipo texto e imagen)

Para almacenar los datos que se obtengan del formulario es necesaria una base de datos, la cual
estará en conexión con el servidor. Esta base de datos tendrá una tabla llamada “alumnos”, la tabla
contendrá como campos todos los datos requeridos del alumno ya mencionados anteriormente.

Después de esto se necesitará un archivo php, esto para procesar los datos obtenidos y guardarlos
en la base de datos.
 CREAR EL ARCHIVO HTML.

Al crear el archivo html dentro del bloque de “body” creamos un bloque form, la apertura del form
deberá ser como al siguiente:

<form method="POST" action="conexion.php" enctype="multipart/form-data">

El parámetro method se define como “POST”, con esto indicamos que los datos serán enviados a
través de una transacción http, action decimos a donde será re direccionado al hacer la transacción,
enctype se define como “multipart/form-data” lo que decimos con esto es que los caracteres no se
codifican, lo que es obligatorio si se manejan archivos en el formulario.

Ahora dentro del formulario introducimos las siguientes líneas:

<label> proporciona el nombre </label>

Por cada dato que nosotros deseemos capturar colocamos una etiqueta que indica que dato es
requerido en el siguiente campo.

<input type="text" name="nombre" required placeholder="ap. paterno ap.

materno Nombres" size="60">
En este caso colocamos una entrada de datos, type se usa para definir el tipo de dato que recibirá
en campo, name el nombre con el cual se guardara el dato para su posterior manipulación, required
los usamos para decir que es un dato obligatorio, y no dejara al usuario avanzar si este campo no
tiene información, placeholder lo usamos para mostrar información dentro del campo de datos que
ayuda a entender mejor que o como se debe llenar ese campo, por último size para definir el tamaño
máximo de la entrada de datos.

En el caso de este ejercicio se requiere de diferentes tipos de datos, es decir, no solo de texto. Para
ello utilizaremos diferentes inputs, como el siguiente que lo utilizaremos para capturar números:

 <input type="number" name="edad" required min="17" max="100">

Como ya se mencionó la línea anterior capturaremos datos numéricos, type se define como:
”number”, required para definir que es un campo obligatorio, min y max se utilizan para
definir un rango de mínimo y máximo del valor permitido.

 <input type="tel" name="telefono">

Este caso type se define como “tel”, para definir que será capturado un número telefónico.

 <input type="date" name="fnacimiento" required>

Este caso type se define como “date”, para definir que será capturado un dato de tipo fecha.

 <input type="mail" name="mailf">

Este caso type se define como “mail”, para definir que será capturado un correo electrónico.
  <input type="file" name="certificado" required>
Este caso type se define como “file”, para definir que será capturado un archivo.

 <input type="submit" name="enviar">

Por ultimo insertamos un botón para procesar los datos:

Al final nos debe de quedar un formulario como el de la figura 1.

Figura 1. Vista (en navegador Firefox) del formulario creado con html5.
 CREAR LA BASE DE DATOS EN MYSQL.

Abrimos la línea de comandos de MySQL como se muestra en la figura 2.

Figura 2. Acceso a MySQL.

Ya en la línea de comandos introducimos nuestra contraseña y creamos la base de datos, con el

nombre de escolares, como se muestra en la figura 3.

Figura 3. Linea de comandos de MySQL al crear la base de datos.

Despues creamos la tabla de alumnos con los campos que fueron establecidos en la introduccion
del documento. Vea la figura 4.
 Figura 4. Crecion de la tabla de alumnos.

Con esto damos por terminada y lista la base de datos con la cual guardaremos los datos de los
alumnos.
 CREAR EL ARCHIVO PHP.

Como se mostró en el inicio del documento la siguiente línea:

<form method="POST" action="conexion.php" enctype="multipart/form-data">

En la parte de action se permite establecer la acción que se realizara al enviar los datos del
formulario, en este caso se envían los datos a un archivo “conexion.php”. El cual contiene lo
siguiente:

En primer lugar, definimos las variables, las cuales recibirán los datos obtenidos del formulario:

$nombre=$_POST['nombre'];
$nombre1=$_FILES['foto'] ['name'];
$guardado=$_FILES['foto'] ['tmp_name'];
$edad=$_POST['edad'];
$telefono=$_POST['telefono'];
$fnacimiento=$_POST['fnacimiento'];
$promedio=$_POST['promedio'];
$mail=$_POST['mailf'];
$nombre2=$_FILES['certificado'] ['name'];
$guardado2=$_FILES['certificado'] ['tmp_name'];
$curpt=$_POST['curpt'];
$nombre3=$_FILES['curpf'] ['name'];
$guardado3=$_FILES['curpf'] ['tmp_name'];
Definimos las variables para guardar los datos, iniciando con el símbolo “$” más el nombre de las
variables, si obtenemos algún archivo colocamos: =$_POST, en el caso de un archivo se coloca:
=$_FILES, se abren corchetes y dentro del corchete se coloca entre comillas simples, el nombre del
dato obtenido del formulario que se desea vincular con la variable declarada.

Después de terminar el bloque de variables, continuamos declarando una conexión a la base de

datos del servidor local, esto de la siguiente manera:

$mysqli=new mysqli("localhost", "root","due12date34","escolares");

Se crea una variable con una instancia mysqli, en paréntesis se colocan los siguientes datos entre
comillas dobles: nombre del servidor, usuario (se recomienda un usuario que tenga permisos solo
de escritura), contraseña del usuario, y la base de datos a la que se desean guardar los datos.

Si esta conexión falla es importante saberlo y para ello colocamos las siguientes líneas de código

if ($mysqli->connect_errno) {
echo "Fallo al conectar a MySQL: (" . $mysqli->connect_errno . ") "
. $mysqli->connect_error;
exit();

echo $mysqli -> host_info." <br>";

Dentro del “if”, colocamos una sentencia que captura los errores que la conexión pueda presentar
y si esta es verdadera, es decir, si se presentó un error entrará al bloque de la condición e
imprimiremos un “echo”, el cual nos mostrará en código del error al igual que la información de
mismo. Por el contrario, si este no entra a la condición nos mostrara la información del estado de la
conexión la cual debe ser positiva si no entro al “if”.

Ahora en necesario crear una carpeta para guardar físicamente las imágenes que se cargan al
formulario, para ello se utiliza el siguiente bloque de código:

if(!file_exists('image')){
mkdir('image',0777,true);
}
Esta es una condición en la cual evaluamos si existe el fichero en el cual de guardaran las imágenes,
en este caso se llama “image”, si no existe entra en la condición y crea el directorio con el comando
mkdir(‘image’,077,true);.

Para guardar la imagen y que no exista inconveniente con nombres repetidos, se crea un nombre
con base a la fecha y hora de su inserción:

$nombre1=strftime( "%Y-%m-%d-%H-%M-%S", time() )."-foto-".$nombre."

".$nombre1;
Se crea una variable, en primera instancia se usa el método strtime, el cual nos ayudara a agregar la
fecha y hora al nombre del archivo, dentro del paréntesis se coloca entre comillas dobles %Y-%m-
%d-%H-%M-%S, es el formato de fecha (%Y %m %d) y hora (%H %M %S) y después se coloca time()
para especificar que el formato usado es de tiempo, el cual es %Y para el año, %m para el mes, y
%d para el día; en caso de la hora es %H para la hora, %M para los minutos, y %S para los segundos.
De forma extra, para que se identifique mejor, se concatena con un punto la cadena de texto "-
foto-", en este caso para indicar que el archivo a guardar es la foto del alumno, más el nombre del
alumno y el nombre del archivo.

Ahora se procede a guardar el archivo. También es necesario saber si la escritura del archivo resulto
exitosa o no, y para lograrlo se inserta lo siguiente:

if (copy($guardado, 'image/'.$nombre1)) {
echo "El archivo de su imagen se ha almacenado <br>";
} else {
echo "Se ha producido un error al intentar copiar el fichero<br>";
}
Esta es una condición que dentro de la evaluación lleva la sentencia para guardar el archivo, la cual
lleva la ruta donde se guardará el archivo (ya creada previamente), y si esta resulta exitosa nos
devuelve un “true”, y siendo así, imprimiremos un echo dando a conocer al usuario que el
almacenamiento ha sido exitoso, y si es lo contrario mandaremos un echo con un mensaje de error.
Por ultimo debemos agregar los datos a la base de datos, lo cual es muy sencillo:

$sql="INSERT INTO alumnos

(nombre,imagen,edad,telefono,fecha,promedio,correo,certificado,curp,curpi)
VALUES('$nombre','$nombre1','$edad','$telefono','$fnacimiento','$promedio','
$mail','$nombre2','$curpt','$nombre3')";
Esta es una variable de tipo sql, la cual guarda una sentencia SQL, en este caso es una sentencia para
insertar datos a la tabla de alumnos, en la cual insertamos los datos en el mismo orden en que
fueron recuperados, esto para facilitar el proceso, al momento de especificar el valor de cada dato,
se coloca el nombre de la variable que contiene la información correcta, por ejemplo: en primer
lugar al declarar el orden de los datos colocamos “(nombre”, entonces, en la sección de VALUES
colocamos entre comilla simple el nombre de la variable correspondiente $nombre.

Para ejecutar la sentencia de SQL y a la vez saber si esta tuvo éxito escribimos lo siguiente:

if($mysqli->query($sql)==TRUE){

echo "Registro agregado exitosamente";

}else{

echo "Error" .$sql . "<br>" . $mysqli->error;

En esta sección de código dentro de una condición colocamos el código que ejecuta la sentencia de
SQL, la cual si es exitosa nos arroja un TRUE, si es así lanzamos un echo para dar as ver que la
sentencia fue exitosa, y de lo contrario mandamos un mensaje de error junto con el error que ha
sido arrojado por el motor de SQL.

Y por último cerramos la conexión con el motor de SQL, con la siguiente sentencia:

$mysqli -> close();

Con esto terminamos el archivo php, lo único que resta es probar el ejercicio.
 FUNCIONALIDAD.

Ahora con nuestro servicio de apache y Mysql en ejecución, abrimos nuestro navegador y en la barra
de navegación escribimos: localhost/ seguido del nombre del archivo html que se ha creado, en este
caso es 1.html. Procedemos a llenar los campos con los datos requeridos. Véase figura 5.

Figura 6. Formulario de alumnos con sus datos correspondientes.

Ahora damos clic en el botón enviar, y este nos debe de conectar con el archivo de conexión PHP. Y
nos debe de dar un resultado como el de la figura 6.

Figura 6. Mensaje de registro exitoso mostrado por el archivo PHP.

En el caso de que se exitoso, debemos comprobarlo, dirigiéndonos a la línea de comandos de

MySQL, y ejecutar una consulta con todos los datos de la tabla alumnos, vea la figura 7.
 Figura 7. Resultado de la consulta de alumnos.

También podemos verificar el almacenamiento de los archivos que se establecieron en el

formulario. Dirigiéndonos a la ruta que establecimos podemos comprobarlo. Vea la figura 8.

Figura 8. Imágenes exitosamente guardadas con el nombre y ruta especificadas.