ELABORACIÓN DE PÁGINAS WEB. CBTIS No. 02 ISC. RICARDO GARCÍA LÓPEZ

Transcripción

1 CBTIS No. 02 ISC. RICARDO GARCÍA LÓPEZ

2 Página1 CREACIÓN DE LA BASE DE DATOS EN MySQL REGISTRO DE USUARIOS UTILIZANDO PHP CON MYSQL Una vez instalada nuestro servidor local de Apache, procedemos a crear la base de datos en la cual se guardará la información de los alumnos. Primero se abre el navegador web que se tenga instalado en la computadora del cliente (IE, Firefox, Chrome, Opera, Safari, etc.), y en la barra de direcciones se escribe lo siguiente: localhost que es el nombre de nuestro servidor local o la dirección que es la dirección IP de nuestro equipo local (backend). Se muestra la siguiente pantalla con IE 9. Una vez cargada la página de nuestro servidor local, entramos en la opción phpmyadmin Database Manager Version , y aparece la siguiente pantalla. En esta ventana se escribe el nombre del usuario de la base de datos de MySQL, por lo general se utiliza el usuario root; la contraseña es la que se indicó al instalar el paquete de AppServ, en este caso ocupamos la contraseña cbtis2. (Todo en minúsculas). Pulsamos en Aceptar.

3 Página2 REGISTRO DE USUARIOS UTILIZANDO PHP CON MYSQL Una vez logeado en nuestro administrado de la base de datos de MySQL, aparece esta pantalla. Aquí creamos nuestra nueva base de datos En la ventana anterior es donde tenemos que crear la base de datos; para darle nombre a la base de datos vamos a hacerlo de la siguiente manera; la base de datos va a tener el nombre del alumno seguido del número de semestre y por último la letra del grupo; por ejemplo, si el alumno se llama Franco, cursa el tercer semestre grupo A, su base de datos se llamará franco3a; el nombre de la base de datos debe ser todo en minúsculas y sin espacios. En este caso voy a crear una base de datos con mi nombre, seguido del número del semestre y tomaré la letra i de la inicial de la especialidad de Informática; quedará de esta forma: ricardo3i. Luego pulsamos sobre el botón crear.

4 Página3 REGISTRO DE USUARIOS UTILIZANDO PHP CON MYSQL Nos aparece esta ventana, donde tenemos que especificar el nombre de la tabla y el número de campos que va a tener; en este caso vanos a crear una tabla llamada alumnos con 6 campos y pulsamos sobre el botón Continuar, así como se muestra a continuación. Nos muestra la siguiente página donde anotamos los campos que va a tener la tabla alumnos, los tipos de datos y sus longitudes.

5 Página4 REGISTRO DE USUARIOS UTILIZANDO PHP CON MYSQL Los campos que se van a manejar van ser los siguientes: Después de haber terminado de especificar los campos, los tipos de datos y sus tamaños, presionamos el botón Grabar. Nos muestra la siguiente pantalla. Con esto hemos terminado de crear nuestra base de datos en MySQL listo para usarlo desde nuestra aplicación de PHP. Para insertar registros hacemos clic sobre la opción insertar que se encuentra en la parte superior. Para revisar los registros insertados se presiona sobre la opción examinar ubicada también en la parte superior.

6 Página5 REGISTRO DE USUARIOS UTILIZANDO PHP CON MYSQL La base de datos se guarda dentro del directorio C:\AppServ\MySQL\data\ ahí encontramos la base de datos en forma de una carpeta y dentro de ella están las tablas de MySQL. La base de datos creados y dentro de ella contiene las tablas. Directorio: C:\AppServ\MySQL\data\ Si cerramos la ventana de nuestro navegador y lo queremos volver a ver nuestra base de datos, lo único que tenemos que hacer es abrir de nuevo nuestro navegador, le ponemos la dirección de nuestro servidor local (localhost o ), después hacemos clic sobre phpmyadmin Database Manager Version , ponemos el nombre del usuario (root) y la contraseña (cbtis2) y aceptamos. Una vez que entramos al administrador de las base de datos de MySQL, de lado izquierdo de la lista de bases de datos seleccionamos el nombre de nuestra base de datos. En la parte inferior aparecerán las tablas contenidas en ella. Realizamos las operaciones que nosotros queramos hacer con la base de datos. Seleccionamos la base de datos a trabajar

7 Página6 ESTRUCTURA DE LA PAGINA DE REGISTRO Para crear la página de registro de los usuarios, procedemos a crear un nuevo documento PHP desde nuestro programa de DreamWeaver, de la siguiente manera. Trabajamos en la vista diseño de nuestro documento PHP. Herramientas de Formularios Lo primero que tenemos que hacer es insertar un formulario en nuestro documento, para ello vamos a mostrar la herramientas de formulario que se encuentra en la parte superior del documento. En caso de que no se encuentre, podemos utilizar el menú Insertar/Formulario.

8 Página7 Insertamos un formulario, queda de la siguiente forma. Dentro del formulario insertamos una tabla de 8 filas con 2 columnas, en el menú insertar/tabla. El ancho de la tabla va a ser de 600px, así como se muestra en la siguiente pantalla. Pulsamos Aceptar.

9 Página8 Queda de la siguiente forma: Enter. Seleccionamos todas las filas de la tabla para darle un alto de fila de 30px y pulsamos Alto de filas de 30px

10 Página9 Nuestra tabla queda así. Seleccionamos las dos celdas de la primera fila y la combinamos. Herramienta para combiner celdas

11 Página10 Nos queda de la siguiente manera. Colocamos la siguiente información en las celdas. Ahora vamos a insertar los campos de texto para la introducción de la información. En la celda que está delante de Número de control insertamos un Campo de texto al cual la vamos a llamar ncontrol, con acho de caracteres de 20 y caracteres máximos de 15.

12 Página11 Campo de texto Insertamos otro campo de texto delante de Nombre del alumno al cual le ponemos como nombre, con acho de caracteres de 40 y caracteres máximos de 30. Delante de especialidad insertamos una campo Seleccionar (Lista/manú) con el nombre de especialidad y pulsamos sobre el botón valores de lista para agregar las especialidades, para agregar más especialidades se pulsa sobre el botón del signo + (más) se ponen los datos tanto en la columna de Etiqueta del elemento como el del Valor. Al final se pulsa en aceptar.

13 Página12 Herramienta Seleccionar(Lista/Menú) Botón para agregar más filas Botón Valores de Lista Insertamos otro campo Seleccionar(Lista/Menú) delante de Semestre, le ponemos el nombre de semestre y hacemos clic sobre el botón de Valores de lista y agregamos los 6 semestres utilizando números romanos y pulsamos Aceptar. Insertamos otro campo Seleccionar(Lista/Menú) delante de Grupo, le ponemos el nombre de grupo y hacemos clic sobre el botón de Valores de lista y agregamos los 11 grupos utilizando las letras del alfabeto de la A hasta la L y pulsamos Aceptar.

14 Página13 Por último insertamos un campo de archivo delante de foto y le ponemos el nombre de file, ancho de caracteres de 40 y caracteres máximos de 100. Campo de archivo La última fila seleccionamos las dos celdas y la combinamos. Ahí vamos a insertar dos botones. El primer botón le ponemos el nombre de Guardar y en valor le ponemos igual Guardar. El segundo botón le ponemos el nombre de Restaurar y le cambiamos la acción a Restablecer formulario.

15 Página14 Botones Cambiar la accion del boton 2 Nuestro formulario ha quedado de la siguiente manera. Por último procedemos a guardar nuestro formulario de registro con el nombre de registro seguido del número del semestre y de la letra del grupo; por ejemplo, para el grupo A será (registro3a.php), para el B será (registro3b.php) y para el grupo C será (registro3c.php). En el caso mío se va a llamar regitro3i.php (por el semestre y la inicial de la especialidad). El archivo va a tener la extensión php y se guardará en la carpeta www de nuestro servidor local. L estructura de nuestro servidor local es así: En nuestro disco duro local C:\ se encuentra un directorio llamado AppServ, dentro de dicho directorio tenemos varios subdirectorios, entre ellos está www que es la carpeta donde vamos a guardar nuestras aplicaciones php para poder ejecutarlas con nuestro servidor local. Es por ello que nuestro formulario lo vamos a guardar dentro de dicha carpeta.

16 Página15 Archivo registro3i.php en el directorio C:\AppServ\www\ A continuación se muestra el código completo del archivo de formulario de registro. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>registro de Alumnos</title> </head> <body> <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> <table width="600" border="0" cellspacing="0" cellpadding="0"> <td height="30" colspan="2">registro DE USUARIOS</td> <td width="197" height="30">número DE CONTROL</td> <td width="403" height="30"><input name="ncontrol" type="text" id="ncontrol" size="20" maxlength="15" /></td> <td height="30">nombre DEL ALUMNO</td> <td height="30"><input name="nombre" type="text" id="nombre" size="40" maxlength="30" /></td> <td height="30">especialidad</td> <td height="30"><select name="especialidad" id="especialidad">

17 Página16 <option value="bt en Administración">BT en Administración</option> <option value="bt en Contabilidad">BT en Contabilidad</option> <option value="bt en Informatica">BT en Informatica</option> <option value="bt en laboratorio">bt en Laboratorio</option> <option value="bt en Macanica">BT en Mecanica</option> </select></td> <td height="30">semestre</td> <td height="30"><select name="semestre" id="semestre"> <option value="i">i</option> <option value="ii">ii</option> <option value="iii">iii</option> <option value="iv">iv</option> <option value="v">v</option> </select></td> <td height="30">grupo</td> <td height="30"><select name="grupo" id="grupo"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> <option value="e">e</option> <option value="f">f</option> <option value="g">g</option> <option value="h">h</option> <option value="i">i</option> <option value="j">j</option> <option value="k">k</option> <option value="l">l</option> </select></td> <td height="30">foto</td> <td height="30"><input name="file" type="file" id="file" size="40" maxlength="100" /></td> <td height="30" colspan="2"><input type="submit" name="guardar" id="guardar" value="guardar" /> <input type="reset" name="restablecer" id="restablecer" value="restablecer" /></td> </table> </form> </body> </html>

18 Página17 Ahora vamos a crear el archivo que va a recoger los datos insertados en el formulario y guardarlos en la base de datos. Creamos un nuevo documento PHP en el programa de DreamWeaver. Entramos en la vista Código y borramos todo el código HTML que aparece, debe quedar todo en blanco. Ahí escribimos el siguiente código de PHP para recoger los datos y guardarlos a la base de datos. Ahi va el nombre de la base de datos de cada alumno. Nombre del archive de registro de cada alumno.

19 Página18 El código completo sería: <?php ob_start(); $ncontrol=$_request[ncontrol]; $nombre=$_request[nombre]; $especialidad=$_request[especialidad]; $semestre=$_request[semestre]; $grupo=$_request[grupo]; $destino = 'fotos' ; if (!file_exists($destino)) { mkdir('fotos',0777); } move_uploaded_file ( $_FILES [ 'file' ][ 'tmp_name' ], $destino. '/'. $_FILES [ 'file' ][ 'name' ]); $name = ($_FILES['file']['name']); $conn=mysql_connect('localhost','root','cbtis2'); $dbx=mysql_select_db('ricardo3i'); $sql="insert INTO alumnos VALUES ('$ncontrol','$nombre','$especialidad','$semestre','$grupo','$name')"; mysql_query($sql,$conn); header("location:registro3i.php");exit(); ob_end_flush();?> Este archivo se guarda con el nombre de guardardb seguido del número del semestre y de la letra del grupo, en mi caso estoy trabajando con semestre 3 y la primera letra de la especialidad de informática por lo que mi archivo se llamará guardardb3i.php. Dentro del directorio C:\AppServ\www\ junto al formulario de registro. Regresamos a nuestro documento anterior el formulario de registro para enlazarlo con nuestro archivo de guardar en la base de datos. Pasamos a la vista código y buscamos la siguiente línea: En la parte donde esta action entre las comillas escribimos el nombre de nuestro archivo para guardar en la base de datos que se llama guardardb, en mi caso se llama guardardb3i.php. Después de donde termina el formulario (</form>) agregamos este código para mostrar los registros que vamos insertando.

20 Página19 El código completo queda así: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>registro de Alumnos</title> </head> <body> <form action="guardardb3i.php" method="post" enctype="multipart/form-data" name="form1" id="form1"> <table width="600" border="0" cellspacing="0" cellpadding="0"> <td height="30" colspan="2">registro DE USUARIOS</td> <td width="197" height="30">número DE CONTROL</td> <td width="403" height="30"><input name="ncontrol" type="text" id="ncontrol" size="20" maxlength="15" /></td> <td height="30">nombre DEL ALUMNO</td> <td height="30"><input name="nombre" type="text" id="nombre" size="40" maxlength="30" /></td> <td height="30">especialidad</td> <td height="30"><select name="especialidad" id="especialidad"> <option value="bt en Administración">BT en Administración</option> <option value="bt en Contabilidad">BT en Contabilidad</option> <option value="bt en Informatica">BT en Informatica</option> <option value="bt en laboratorio">bt en Laboratorio</option> <option value="bt en Macanica">BT en Mecanica</option> </select></td> <td height="30">semestre</td> <td height="30"><select name="semestre" id="semestre"> <option value="i">i</option> <option value="ii">ii</option> <option value="iii">iii</option> <option value="iv">iv</option> <option value="v">v</option> </select></td> <td height="30">grupo</td> <td height="30"><select name="grupo" id="grupo"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> <option value="e">e</option> <option value="f">f</option> <option value="g">g</option> <option value="h">h</option> <option value="i">i</option> <option value="j">j</option> <option value="k">k</option> <option value="l">l</option> </select></td> <td height="30">foto</td>

21 Página20 <td height="30"><input name="file" type="file" id="file" size="40" maxlength="100" /></td> <td height="30" colspan="2"><input type="submit" name="guardar" id="guardar" value="guardar" /> <input type="reset" name="restablecer" id="restablecer" value="restablecer" /></td> </table> </form> <br /> <table width="850" border="1" cellspacing="0" cellpadding="0"> <td width="177" bgcolor="#66ffcc">numero DE CONTROL</td> <td width="301" bgcolor="#66ffcc">nombre DEL ALUMNO</td> <td width="183" bgcolor="#66ffcc">especialidad</td> <td width="85" bgcolor="#66ffcc">semestre</td> <td width="67" bgcolor="#66ffcc">grupo</td> <td width="37" bgcolor="#66ffcc">foto</td> <?php $conn=mysql_connect('localhost','root','cbtis2'); $dbx=mysql_select_db('ricardo3i'); $sql="select * FROM alumnos"; $rs=mysql_query($sql); while($row=mysql_fetch_array($rs)){?> <td> <?php echo $row[ncontrol];?></td> <td> <?php echo $row[nombre];?></td> <td> <?php echo $row[especialidad];?></td> <td> <?php echo $row[semestre];?></td> <td> <?php echo $row[grupo];?></td> <td> <?php echo "<img src='fotos/$row[foto]' />";?></td> <?php }?> </table> </body> </html> Ahora solo nos queda probarlo en nuestro navegador web, para ello escribimos la siguiente dirección web: localhost/registro3i.php (de acuerdo al nombre del archivo de cada alumno) y nos debe mostrar la siguiente página.

22 Página21 Vamos a probarlo insertando unos datos y presionando el botón guardar para rtegistrarlo en la base de datos. Después de guardar muestra lo siguiente. Nuestra información si se registró correctamente.