SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

PGINAS WEB DINAMICAS CON PHP

A continuacin encontraras un pequeo tutorial acerca de cmo vincular una pgina web a una base de datos MYSQL haciendo uso de PHP. Es bueno aclarar que esta gua no es un tutorial de PHP, sino slo una parte de PHP que es la encargada de realizar conexiones con bases de datos MYSQL. Los requisitos mnimos que se necesitan para este curso, es la instalacin de un servidor web el cual puede ser VERTRIGIO SERV. Despus de instalado el servidor, sigues a continuacin los siguientes pasos. 1. Creacin de una Base de Datos en PHPMYADMIN. Dando clic sobre el icono que aparece en la parte de debajo de tu barra de inicio en el PC donde estas trabajando, ubicas una especie de tambor con una cruz. La cruz debe estar de color verde o azul para poder trabajar; en caso de que se encuentre de color rojo, es seal de que el servidor quedo mal configurado o que sus puertos estn ocupados. Cuando nos cercioremos de que la cruz esta de los colores adecuados, damos clic y luego clic sobre Localhost Page. Este vinculo nos llevara hacia una pgina de internet que permite la configuracin de la base de datos y posteriormente la ejecucin de nuestras pginas PHP.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 1

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Damos clic sobre PHPMYADMIN, y este nos pide la contrasea para acceder a MYSQL; si nunca se ha instalado MYSQL en el PC en el cual estamos trabajando y solo instalamos VERTRIGIO, el usuario es ROOT y la contrasea es VERTRIGIO. En caso de que en el PC donde ests trabajando tenga un motor bases de datos MYSQL ya configurado, la contrasea y el usuario son distintas a los mencionados anteriormente.

Entonces si la contrasea y el usuario son correctos, nos aparece la pantalla de PHPMYADMIN.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 2

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Vamos entonces a crear una base de datos sencilla que maneje solo tres tablas, una tabla es acerca de los estudiantes, otra acerca de los docentes y una que maneje los usuarios y los password de cada uno para permitirle el acceso a la aplicacin web. Nuestra base de datos va a recibir el nombre de PRCTICA, y sus tres tablas sern aprendices, docentes y usuarios. Ahora nos dirigimos en la parte donde dice crear nueva base de datos y le colocamos el nombre practica y luego damos clic en crear.

Luego de creada la base de datos, aparece una pantalla y en la parte inferior de esta, aparece un nuevo formulario para crear las tablas. Entonces comencemos creando usuarios, esta tabla tendr 3 campos los cuales sern login, password y nombre_usuario.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 3

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Colocamos el nombre de la tabla y el nmero de campo que tendr. En este caso colocaremos USUARIOS y luego 3. Damos clic en Continuar.

En este formulario entonces escribimos los datos de cada campo con sus caracterstica. Login y Password son llaves primarias, requeridas, textos de 10 caracteres. Nombre es requerida y un texto de 30 caracteres. Luego de escribir esto damos clic en grabar.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 4

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Ahora vamos a insertarle un par de datos a nuestra tabla. Damos clic en insertar. Usted se inventa los datos.

Luego de llenos los datos, damos clic en cualquiera de los botones continuar. Para ver los datos damos clic en Examinar

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 5

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Y se mostrar una pantalla as.

Ahora entonces del mismo modo, solo procederemos a crear las tablas de aprendices y de de docente. A estas no le vamos a insertar datos. Solamente las crearemos. La tabla aprendices y la tabla docentes, tendr 6 campos iguales. Los campos de esta sern: Identificacin Texto de 20, requerido y llave primaria Nombre Texto de 30, requerido Apellido Texto de 30, requerido DireccinTexto de 50, requerido TelfonoTexto de 15, no requerido Email Texto de 50, no requerido. Para crear una nueva tabla damos clic en la parte izquierda de la pantalla sobre el nombre de la base de datos. En este caso es practica.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 6

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Procedemos entonces a crear una tabla llamada aprendices, con sus respectivos campos.

Creamos los campos

Grabamos Repetimos el mismo proceso para docentes. (Lo realiza usted).

As hemos terminado de crear la base datos con la que vamos a realizar nuestra aplicacin web. 2. Creacin de la carpeta del proyecto web en la ubicacin adecuada. Continuando nuestro trabajo, ahora vamos crear la carpeta del proyecto. Esta carpeta va a contener todas las pginas HTML, CSS, JS, JSP, ASP y PHP. Adems de las imgenes, videos, documentos, y dems que usted considere necesario para el funcionamiento del proyecto web. Es importante asegurarse que dicha carpeta se cree dentro del servidor VERTRIGO, es por eso que ste tiene un espacio para ello. Este espacio se conoce como la carpeta WWW. Es all donde vamos a crear nuestro proyecto. Para acceder a la carpeta WWW, damos clic sobre el cilindro con la cruz azul en la barra de inicio y damos clic sobre WWW FOLDER.
Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 7

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Se abre una ventana con la carpeta WWW. All se debe crear una nueva carpeta. En el ejemplo se llama Practica1. No borrar ni daar ni modificar los dems archivos pues de hacerlos, el servidor dejara de funcionar.

Para nuestra aplicacin necesitaremos unas imgenes, estas imgenes las copias dentro de la carpeta Practica1.

De ahora en adelante todas las pginas que creemos, deben guardarse aqu. 3. Creacin del INDEX.PHP
Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 8

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Siempre que se cree una aplicacin web, es necesario crear una pgina que reciba en nombre de INDEX.PHP; ya que esta es la primera pagina que el servidor abrir al momento de escribir la direccin de la aplicacin en un navegador web. Para crear una pgina PHP, o HTML de forma bsica, procedemos as. Dentro de la carpeta que acabamos de crear, la cual contiene las imgenes, damos clic derecho y le decimos Nuevo y luego Documento de Texto y luego damos enter. Quedara as.

Abrimos el nuevo documento de texto que se acabo de crear y damos clic sobre el men archivo, all seleccionamos la opcin guardar como. Y nos aparecer una pantalla as.

Luego donde dice nombre, escribimos el correspondiente nombre. En este caso es INDEX.PHP, y nos aseguramos que en la parte de abajo diga todo los archivos. Luego damos enter.
Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 9

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Ya podemos cerrar este archivo y veremos que en la carpeta aparece un nuevo archivo con un formato distinto y que debe decir archivo PHP.

Este es el mismo proceso para crear cualquier tipo de archivo PHP.

Luego de haber creado el archivo INDEX.PHP, procederemos a crear la interfaz de bienvenida que maneja la pgina principal de nuestra aplicacin WEB. Para ellos damos clic y abrimos el INDEX.PHP con block de notas y escribimos el siguiente cdigo.

Nota Las imgenes que ven aqu en esta pgina, se les adjunta junto con esta gua.
Ahora si proceda a escribir el siguiente cdigo.
Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 10

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 11

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Recordar que deben ir guardando. Para ir mirando cmo est quedando la pgina, realizamos el siguiente procedimiento.

Dando clic sobre el icono que aparece en la parte de debajo de tu barra de inicio en el PC donde estas trabajando, ubicas una especie de tambor con una cruz. Damos clic y luego clic sobre Localhost Page. Este vinculo nos llevara hacia una pgina de internet que permite la configuracin de la base de datos y posteriormente la ejecucin de nuestras pginas PHP.

En la barra de direccin escribimos el nombre de la carpeta donde estamos realizando el proyecto, es decir dnde est la pgina index.php. Atencin no borre nada de la direccin que aparece all escrita, solamente despus de lo que est escrito all, escriba el nombre de la carpeta.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 12

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

4. Creacin de VALIDAR.PHP Luego de ver que nuestro index.php se encuentra funcionando, procedemos entonces a configurar el la pgina VALIDAD.PHP Si te has podido dar cuenta, cuando creaste el formulario anterior en la parte que dice METHOD= VALIDAR.PHP, esto quiere decir que para que funcione el botn ACEPTAR del formulario, es necesario que exista una pgina que se llame validar.php. Si esta pgina no existe, se genera el error de URL no encontrada.

Ahora abrimos el archivo validar.php y escribimos el siguiente cdigo.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 13

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Antes de continuar escribiendo el cdigo realizaremos una explicacin de qu hace cada uno. Cada vez que se va escribir una parte de cdigo que corresponda a PHP, se deben escribir <?PHP y al final del cdigo escribir ?>

Si vemos la parte que est en color verde. Cada vez que vamos a recibir informacin de un formulario, se deben crear las variables necesarias, dependiendo de la cantidad de elementos que tenga nuestro formulario. Como en el formulario pasado existen solamente 2 INPUT y cada uno tiene su propio name (Este cdigo corresponde a la pgina de Index.php) Aqu en este cdigo se muestra como se llaman los dos input del formulario, los cuales enviarn informacin a la pgina validar.php

Las variables en PHP que llegan desde un formulario se deben llamar exactamente igual que como se llaman en el formulario, con la diferencia que las variables en PHP siempre deben ir acompaadas del signo de PESOS $.

En el cdigo de conexin al servidor, se debe tener muy en cuenta los siguientes parmetros. o Nombre del servidor En el ejemplo LOCALHOST o Usuario y contrasea de MYSQL Como mencionamos al principio de este tutorial, el usuario y la contrasea dependen de la configuracin de MYSQL. Dijimos que si en el PC no exista MYSQL, sino que se instal solamente VERTRIGIO, el usuario y la contrasea sern root y vertrigio respectivamente.
Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 14

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

En este ejemplo MYSQL ya estaba configurado siendo usuario y contrasea las indicadas en el ejemplo.

su

La orden Or Die, implica que en caso de que se encuentre algn tipo de error, o no se deje conectar al servidor se saca un mensaje de error. En el cdigo para seleccionar una base de datos, el nico parmetro que nos pide es el nombre de la base de datos. En este ejemplo es practican, porque esa fue la base de datos que creamos anteriormente. Al igual que con la anterior, la palabra OR DIE, implica que en caso de que la base de datos no exista, saca un mensaje de error.

Ahora continuamos escribiendo el cdigo que va dentro validar.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 15

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Ahora entonces procederemos a explicar alguna parte de estas lneas.

La parte del cdigo que dice consulta, se divide en dos partes. o La primera lnea se encarga almacenar la instruccin SQL, en la cual se realiza una bsqueda en la tabla usuarios, aquellos que cuyo login y password sea igual a los que se escribieron en el formulario. o La segunda parte se encarga de ejecutar la instruccin. Tiene dos parmetros importantes. La instruccin SQL y la conexin a la base de datos.

La siguiente lnea se encarga de realizar un conteo, es decir verifica si al ejecutar la consulta, esta si arrojo o no algn resultado. En palabras ms comunes verifica o no si el usuario existe o no. En caso de $nfilas ser mayor de 0, implica el usuario si existe.

Con la siguiente orden, creo una especie de tabla virtual en la que se almacenarn los resultados de la consulta anteriormente realizada. Las siguientes rdenes realizan tres cosas distintas. o Verifica si el campo bloqueo del usuario sea menor de 3, ya que si este campo es mayor o igual a 3 bloque el ingreso de este usuario al sistema. Esto se conoce como sistema de seguridad. o Verifica si el campo Password si es igual al valor que se ingreso en el formulario. o En caso de que de campo Password corresponda con el valor del formulario, re-direcciona la pagina al men principal para que el usuario pueda trabajar. MENU.PHP (se debe crear)

La siguiente parte de cdigo tiene un funcin muy explcita y es que cuando el usuario se equivoca al digitar sus datos, le enva un mensaje de error
Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 16

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

Y finalmente esta lnea se encarga de actualizar el campo bloqueo de usuario cada vez que el usuario se equivoca. Esto se hace como un sistema de seguridad ya que podra ser una persona ajena al sistema con intensiones de robar informacin.

A continuacin validar.php

entonces

continuamos

escribiendo

el

cdigo

en

Ahora comentaremos un poco estas ltimas lneas del cdigo de validar. La primera parte del cdigo funciona como un mensaje de error que le dice al usuario que ya sus tres intentos de entrar al sistema los agoto, y que le toca ponerse en contacto con el administrador para volver a activarlo.
Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 17

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

La segunda parte es un mensaje de error que indica que el usuario ingresado no existe en el sistema.

La ltima parte se encarga de cerrar la conexin con la base de datos.

Finalmente hemos terminado el cdigo. Ahora si podemos volver a ejecutar la aplicacin web. Recuerden deben abrir el Localhost Page y simplemente en la direccin que aparece en la barra de direcciones, escribir el nombre de la carpeta en la cual est guardada INDEX.PHP En la barra de direccin escribimos el nombre de la carpeta donde estamos realizando el proyecto, es decir dnde est la pgina index.php. Atencin no borre nada de la direccin que aparece all escrita, solamente despus de lo que est escrito all, escriba el nombre de la carpeta.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 18

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

En donde dice usuario, debes escribir uno de los usuarios de los cuales ustedes crearon o guardaron al principio cuando crearon la base de datos. Si no se acuerdan ir al principio y mirar de nuevo. Cuando ya hayas digitado el usuario y contrasea dar clic en aceptar.

5. Creacin de MENU.PHP A continuacin en la carpeta debe ya existir la pagina MENU.PHP, si lesteis bien te distes cuenta de que en el proceso anterior era importante crear MENU.PHP Luego de crearlo, debes abrir y escribir el siguiente cdigo. Las imgenes para esta, estn en la carpeta adjunta.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 19

SENA CTMA PHP, MYSQL y HTML Pginas Web Dinmicas

6. Consultar: Como pasar parmetros por PHP.

Recopilado Por: WinuE mircoles, 29 de junio de 2011 Pgina 20