Oficios Digitales NAC 2015 | Desarrollo Web

Tutoras PHP

Oficio Digital Desarrollo Web

Tutorial 11 | Formularios + Insert SQL

UNLAM

Jos Casanova

En la presente tutora ampliaremos la funcionalidad de la actividad desarrollada en el tutorial 10.

El trabajo va a consistir en incorporar un formulario que permita ingresar nuevos alumnos a la base
de datos. Hasta ahora realizbamos esa tarea con la ayuda de PhpMyAdmin pero lo ideal sera
crear nuestra propia herramienta que a apunte a resolver el problema especfico que se nos presenta.
Cabe aclarar que utilizaremos la misma base de datos curso que ya hemos construido anteriormente.
Requisitos
- Tener instalado el XAMPP y algn editor como Notepad ++
- Haber ledo los apuntes sobre html y php. Haber ledo el captulo de Introduccin a bases de
datos.
- Tener resueltos los tutoriales anteriores ( recomendable ). Tener resuelto y corregido el tutorial 10
Vamos!
1- Antes que nada debemos activar MySQL y Apache desde el panel de control de XAMPP

Oficios Digitales NAC 2015 | Desarrollo Web

2- Creamos una carpeta dentro de la carpeta raz de apache ( en windows C:\xampp\htdocs\ )

llamada tutorial11. Dentro de esta debemos copiar el archivo index.php que se trabaj en el tutorial
10.
3- Dentro de la carpeta tutorial11 creamos un nuevo directorio llamado admin . Dentro de este
ltimo creamos 2 archivos: index.php y nuevo_alumno.php
La idea es separar del frontend el formulario para crear nuevos alumnos.
A la hora de probar el ejemplo deben escribir en el navegador: localhost/tutorial11/admin
4- En index.php armamos la estructura HTML de la pgina.

Estructura HTML bsica del admin

5- Luego vamos a implementar el formulario. Este debe ir debajo del ttulo h1.
Necesitamos dos campos de entrada de texto para cargar el nombre y apellido, y el botn submit.
Tambin debemos incorporar los <label> correspondientes.

Oficios Digitales NAC 2015 | Desarrollo Web

Formulario de alta de alumnos con sus correspondientes <label>

Debera verse algo por el estilo:

6- Ahora pasamos a trabajar el archivo nuevo_alumno.php

Aqu vamos a necesitar utilizar un condicional para que la nica forma en la que puede ejecutarse
el script de alta de alumnos sea a travs del formulario.

Bloque if-else

7- A continuacin viene la parte ms delicada, por tanto hay que prestar mucha atencin. Dentro
del bloque if vamos a realizar la consulta INSERT sirvindonos de los datos que llegan desde el
formulario

Oficios Digitales NAC 2015 | Desarrollo Web

Veamos lnea por lnea que estamos haciendo. Primero establecemos la conexin y definimos el
conjunto de caracteres.
En las lneas 6 y 7 armamos la consulta INSERT . Mucho cuido al copiarla sobre todo con las
comillas. Vean que utilizamos la variable $_POST con los datos cargados en el formulario.
Luego realizamos la consulta, guardamos el resultado y cerramos la conexin. Por ltimo
redireccionamos al frontend para poder ver si se agreg el nuevo alumno correctamente.
8- Para concluir agregamos una redireccin al admin en el bloque else

Redireccionamos al formulario de alta

Fin!!
Recomendaciones
Mucho cuidado con los punto coma, parntesis, llaves, corchetes, maysculas, minsculas,
comillas y dems caracteres.
Por supuesto que esto es un ejemplo prctico simple y hay muchas cosas que se estn pasando
por alto. Por eso es muy importante la lectura de los apuntes y las consultas para complementar el
aprendizaje.

Oficios Digitales NAC 2015 | Desarrollo Web

Actividades
En el tutorial se dio por supuesto que la conexin a la base de datos fue exitosa. Pero puede darse el
caso de que exista algn problema al intentar establecer conexin. Cmo se podra modificar la
pgina para que d un aviso si hay algn problema? En el apunte de la cursada se indica uno de los
modos de hacerlo.
Intentar agregar otro campo adems de nombre y apellido. Para eso hay que modificar la base de
datos y modificar el cdigo de la web.
Leer y averiguar ms sobre la consulta INSERT. Explicar la sintaxis de la misma.
Te anims a agregarle seguridad al sitio, aplicando lo aprendido en el tutorial 8. (Mencin de
honor!)
Que otras mejoras estara bueno que tenga el backend
Agregar algo de estilo con css.
Es bienvenido cualquier comentario y/o sugerencia sobre el tutorial.
Entrega
Entregar el tutorial resuelto condimentado con algo de lo que se pide arriba. Incluir en la carpeta
la base de datos exportada. En la actividad previa se explicaba dicho procedimiento.
Comprimir ( zip, rar , 7zip, como gusten) la carpeta que contiene los archivos y nombrarla
indicando que es tutorial 11 nombre apellido y NAC. Por ejemplo:
foro11 Jos Casanova NAC Mxico.zip
Enviarla va clic ( mensajera interna ) o a josecasanova@clic.gob.ar indicando: tutorial 11,
nombre apellido y NAC en el asunto.