Sunteți pe pagina 1din 18

Taller de Desarrollo Web con HTML5 & PHP Mdulo II

11. Elaborar una aplicacin web que permita el registro de datos de alumnos como cdigo,
nombres, carrera (Sistemas, Contabilidad, Administracin, Educacin, Psicologa) y sexo
(Hombre, Mujer).

Solucin

El modelo de base de datos es el siguiente:

Crear la carpeta 11 en C:\WAMP\WWW y escribir lo siguiente:

universidad.sql
DROP DATABASE IF EXISTS UNIVERSIDAD;
CREATE DATABASE UNIVERSIDAD;
USE UNIVERSIDAD;
CREATE TABLE CARRERAS(IDCARRERA CHAR(1) NOT NULL, CARRERA
VARCHAR(40));
CREATE TABLE ALUMNOS(IDALUMNO CHAR(4) NOT NULL PRIMARY
KEY,NOMBRES VARCHAR(60),IDCARRERA CHAR(1),SEXO CHAR(1));
INSERT CARRERAS VALUES('1','SISTEMAS');
INSERT CARRERAS VALUES('2','CONTABILIDAD');
INSERT CARRERAS VALUES('3','ADMINISTRACION');
INSERT CARRERAS VALUES('4','EDUCACION');
INSERT CARRERAS VALUES('5','SICOLOGIA');

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

index.html
<html><head><title>Registro de Alumnos</title></head><body
bgcolor="#99CCFF">
<form method="post" action="registraalumno.php">
<h3 align="center">Registro de Alumnos</h3>
<table width="376" border="1" align="center"> <tr>
<td width="57">Codigo</td>
<td width="303"><input type="text" name="txtcodigo" size="6" /> </td> </tr>
<tr><td>Nombres</td>
<td><input type="text" name="txtnombres" size="50" /></td> </tr>
<tr><td>Carrera</td> <td><select name="cbocarrera">
<option value="1">SISTEMAS</option>
<option value="2">CONTABILIDAD</option>
<option value="3">ADMINISTRACION</option>
<option value="4">EDUCACION</option>
<option value="5">SICOLOGIA</option>
</select>
</td>
</tr>
<tr>
<td>Sexo</td>
<td><input name="rbsexo" type="radio" value="H" checked="checked"
/>Hombre
<input name="rbsexo" type="radio" value="M" />Mujer</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Grabar Registro ">
</td>
</tr>
</table>
</form></body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

Luego escribiendo sobre el navegador http://localhost:50/11/ se deber mostrar lo siguiente:

Seguidamente en la misma carpeta C:\WAMP\WWW\11 escribir el archivo php y probar la


aplicacin

registraalumno.php
<html><head><title></title></head>
<body>
<?php
$con=mysqli_connect("127.0.0.1","root","","universidad") or
die(mysqli_error($con));
$res=mysqli_query($con,"insert alumnos
values('".$_POST['txtcodigo']."','".$_POST['txtnombres']."','".$_POST['cbocarrera
']."','".$_POST['rbsexo']."')") or die (mysqli_error($con));
mysqli_close($con);
echo '<div align="center"><b> Registro Grabado </b></p>';
echo '<hr>'; // Comentario: Imprime una linea horizontal
echo 'Codigo :'.$_POST['txtcodigo'].'<BR>Nombres
:'.$_POST['txtnombres'].'<BR>Carrera :';
switch ($_POST['cbocarrera'])
{
case 1:
echo 'SISTEMAS';
break;
case 2:
echo 'CONTABILIDAD';
break;
case 3:
echo 'ADMINISTRACION';

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

break;
case 4:
echo 'EDUCACION';
break;
case 5:
echo 'SICOLOGIA';
}
echo '<br>Sexo :';
if($_POST['rbsexo']=='H')
echo 'HOMBRE';
else
echo 'MUJER';
echo '<hr>Volver a Registrar <a href="index.html"> ahora </a></div>';
?>
</body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

12. Elaborar una aplicacin web que muestra los datos de los alumnos tomando como origen la
base de datos del ejemplo anterior. La interfaz del formulario es la siguiente:

El reporte se muestra de la siguiente manera en funcin de los datos contenidos en la base de


datos:

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

Solucin
Crear la carpeta 12 en C:\WAMP\WWW y escribir lo siguiente:

index.html
<html><head><title>Consulta de Alumnos</title></head><body
bgcolor="#99CCFF">
<form method="post" action="consultaalumno.php">
<h3 align="center">Consulta de Alumnos</h3>
<table width="250" border="1" align="center">
<tr><td>Carrera</td>
<td><select name="cbocarrera" id="carrera">
<option value="0">- - - TODAS - - -</option>
<option value="1">SISTEMAS</option>
<option value="2">CONTABILIDAD</option>
<option value="3">ADMINISTRACION</option>
<option value="4">EDUCACION</option>
<option value="5">SICOLOGIA</option>
</select></td> </tr>
<td colspan="2" align="center"><input type="submit" value="Consultar >>">
</td> </tr>
</table>
</form></body></html>

Luego escribiendo sobre el navegador http://localhost:50/12/ se deber mostrar lo siguiente:

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

Seguidamente en la misma carpeta C:\WAMP\WWW\12 escribir el archivo php y probar la


aplicacin

consultaalumno.php
<html><head><title></title></head><body>
<div align="center">
<?php
$con=mysqli_connect("127.0.0.1","root","","Universidad") or
die(mysqli_error($con));
if($_POST['cbocarrera']==0)
$consulta="select a.idalumno,a.nombres,c.carrera from alumnos a inner join
carreras c on a.idcarrera=c.idcarrera";
else
$consulta="select a.idalumno,a.nombres,c.carrera from alumnos a inner join
carreras c on a.idcarrera=c.idcarrera where
c.idcarrera='".$_POST['cbocarrera']."'";
$res=mysqli_query($con,$consulta) or die (mysqli_error($con));
echo '<h2><p align="center">Reporte de Alumnos por Carrera</p></h2>';
echo '<table align="center" border="1"><tr>';
echo '<td>Codigo</td><td>Nombres</td><td>Carrera</td></tr>';
while($row=mysqli_fetch_row($res))
{
echo '<tr>';
echo '<td>'.$row[0].'</td>';
echo '<td>'.$row[1].'</td>';
echo '<td>'.$row[2].'</td>';
echo '</tr>';
}
echo '</table>';
mysqli_close($con);
?>
<p align="center"><br>Volver a la Pgina Principal <a href="index.html"> ahora
</a></p>
</div></body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

13. Elaborar una aplicacin web que permita registrar y consultar los resultados de un proceso
electoral. La aplicacin muestra una pantalla principal con dos ligas. Registro y Consulta,
simulando el proceso de un ente electoral. La pgina principal muestra lo siguiente:

La liga de Registro nos lleva a la siguiente pgina.

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

La liga de Consulta nos lleva a la siguiente pgina.

Solucin
Crear la carpeta 13 en C:\WAMP\WWW y escribir lo siguiente:

onpe.sql
DROP DATABASE IF EXISTS ONPE;
CREATE DATABASE ONPE;
USE ONPE;
CREATE TABLE DEPARTAMENTOS(IDDEPARTAMENTO CHAR(2) NOT NULL
PRIMARY KEY,
DEPARTAMENTO VARCHAR(40));
CREATE TABLE PARTIDOS(IDPARTIDO CHAR(1) NOT NULL PRIMARY KEY,
PARTIDO VARCHAR(30));
CREATE TABLE VOTOS(IDPARTIDO CHAR(1) NOT NULL,IDDEPARTAMENTO
CHAR(2) NOT NULL,
VOTOS INT,PRIMARY KEY(IDPARTIDO,IDDEPARTAMENTO),
FOREIGN KEY(IDDEPARTAMENTO) REFERENCES
DEPARTAMENTOS(IDDEPARTAMENTO),
FOREIGN KEY(IDPARTIDO) REFERENCES PARTIDOS(IDPARTIDO));
INSERT DEPARTAMENTOS VALUES('1','ANCASH');
INSERT DEPARTAMENTOS VALUES('2','PIURA');
INSERT DEPARTAMENTOS VALUES('3','LIMA');
INSERT PARTIDOS VALUES('1','PARTIDO 1');
INSERT PARTIDOS VALUES('2','PARTIDO 2');
INSERT PARTIDOS VALUES('3','PARTIDO 3');

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

Seguidamente en la misma carpeta C:\WAMP\WWW\13 escribir las siguientes pginas y probar


la aplicacin.

index.html
<html><head><title></title></head><div align="center">
<img src="https://www.onpe.gob.pe/img/logo.jpg" width="300"><br>
<a href="registro.html">Registro</a><br>
<a href="consulta.php">Consulta</a>
</div></body></html>

registro.html
<html><head><title></title></head><body>
<div align="center">
<a href="index.html"><img src="https://www.onpe.gob.pe/img/logo.jpg"
width="300"></a>
<b><p>Registro de Votos</p></b>
<form method="post" action="registro.php">
Departamento:
<select name="cbodepartamentos">
<option value="1">ANCASH</option>
<option value="2">PIURA</option>
<option value="3">LIMA</option>
</select><br>
Partido:
<select name="cbopartidos">
<option value="1">PARTIDO 1</option>
<option value="2">PARTIDO 2</option>
<option value="3">PARTIDO 3</option>
</select><br>
Total Votos:
<input type="text" name="txtvotos" size="2"><br>
<input type="submit" value="Grabar">
<input type="reset" value="Limpiar">
</form></div></body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

registro.php
<html><head><title></title></head><body><div align="center">
<a href="index.html"><img src="https://www.onpe.gob.pe/img/logo.jpg"
width="300"></a><br>
<?php
$con=mysqli_connect("localhost","root","","onpe") or die(mysqli_error($con));
mysqli_query($con,"insert votos
values('".$_POST['cbopartidos']."','".$_POST['cbodepartamentos']."',".$_POST['t
xtvotos'].")");
mysqli_close($con);
echo 'Los votos se han registrado<br>';
?>
<a href="registro.html">Volver</a></div></body></html>

consulta.php
<html><head><title></title></head><body>
<div align="center">
<a href="index.html"><img src="https://www.onpe.gob.pe/img/logo.jpg"
width="300"></a><br>
<?php
$con=mysqli_connect("localhost","root","","onpe") or die(mysqli_error($con));
$res=mysqli_query($con,"select p.partido,sum(v.votos) from partidos p inner
join votos v
on p.idpartido=v.idpartido group by p.idpartido order by 2 desc");
echo '<table border="0" align="center"><tr>';
echo '<tr><td>Partido Politico</td><td>Votos</td></tr>';
while ($row=mysqli_fetch_row($res))
{
echo '<tr><td>'.$row[0].'</td><td align="center">'.$row[1].'</td></tr>';
}
$res=mysqli_query($con,"select sum(votos) from votos");
$row2=mysqli_fetch_row($res);
echo '<tr><td>Votos Totales -></td><td align="center">'.$row2[0].'</td></tr>';
echo '</table>';
mysqli_close($con);
?>
<a href="registro.html">Volver</a></div></body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

14. Elaborar una aplicacin web que permita ingresar a un sistema mediante un login y contrasea.
La aplicacin permite el registro de usuarios. La interfaz principal de la aplicacin es la
siguiente:

El modelo de base de datos es el siguiente:

La particularidad de este ejemplo es que la Clave se graba encriptada en la base de datos. Para
esto se utiliza la funcin md5() de PHP. Cuando queremos ingresar debemos especificar un
login o usuario (que es el correo electrnico) y una contrasea. Cuando ingresamos usuarios
que no han sido registrados aun en la base de datos tenemos el siguiente mensaje:

Lo sentimos, pero sus credenciales no son vlidas !!


Volver a la Pgina Principal ahora

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

Entonces tendremos que volver a la pgina principal y registrarnos como usuarios:

Luego podemos grabar el registro observando los resultados en la siguiente imagen:

A partir de este momento ya podemos ingresar como usuarios registrados. El siguiente mensaje
confirma nuestro ingreso:

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

Solucin
Crear la carpeta 14 en C:\WAMP\WWW y escribir las siguientes pginas y probar la aplicacin.

serpost.sql
DROP DATABASE IF EXISTS SERPOST;
CREATE DATABASE SERPOST;
USE SERPOST;
CREATE TABLE USUARIOS(LOGIN CHAR(25) NOT NULL PRIMARY KEY, CLAVE
CHAR(32), NOMBRES VARCHAR(60),DIRECCION VARCHAR(100),NACIMIENTO
DATE,SEXO CHAR(1));

index.html
<html><head><title>SERPOST</title></head><body>
<form method="post" action="login.php">
<div align="center"><img
src="http://www.serpost.com.pe/images/principal/serpost_logo.jpg"
width="400" height="100"><hr>
<table width="280" border=1>
<tr>
<td width="70">Login :</td>
<td width="164"><input type="text" name="txtlogin" size=25></td>
</tr>
<tr>
<td>Clave : </td>
<td><input type="password" name="txtclave" size=6></td>
</tr>
</table><br><hr>
<input type="submit" value="Ingresar"><br>
Si no eres usuario <a href="registrausuario.html"> Registrate </a>
</form></div></body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

registrausuario.html
<html><head><title> Registro de Usuarios </title></head><body>
<form method="post" action="registrausuario.php">
<center>
<img src="http://www.serpost.com.pe/images/principal/serpost_logo.jpg"
width="223" height="75"><br>
<b><font size="5" color="">Formulario de Registro de Usuarios</font></b><hr>
<table border=1>
<tr><td>Nombres :</td>
<td><input type="text" name="txtnombres" size=40></td> </tr>
<tr><td>Direccion :</td>
<td><textarea name="txtdireccion" rows="2" cols="30"></textarea></td>
</tr>
<tr> <td>Login (email) :</td>
<td><input type="text" name="txtlogin" size=25></td> </tr>
<tr><td>Clave (6 caracteres):</td>
<td><input type="password" name="txtclave1" size=4></td>
</tr>
<tr><td>Confirmar Clave :</td>
<td><input type="password" name="txtclave2" size=4></td>
</tr>
<tr><td>Fecha de Nacimiento :</td>
<td><input type="date" name="txtfecha"></td>
</tr>
<tr><td>Sexo :</td>
<td>
<input type="radio" name="rbsexo" value="M"
checked="checked">Masculino&nbsp;&nbsp;
<input type="radio" name="rbsexo" value="F">Femenino
</td>
</tr>
<tr><td colspan="2"><div align="center">
<input type="submit" value="Grabar Registro ">
</div></td></tr>
</table><hr><a href="index.html">Regresar</a>
</center></form></body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

registrausuario.php
<html><head><title></title></head>
<body><div align="center">
<?php
$con=mysqli_connect("127.0.0.1","root","","serpost") or
die(mysqli_error($con));
$res=mysqli_query($con,"select * from usuarios where
login='".$_POST['txtlogin']."' and clave='".md5($_POST['txtclave1'])."'") or
die(mysqli_error($con));
if ($row=mysqli_fetch_row($res)){
mysqli_close($con);
die("Lo sentimos, el usuario ".$_POST['txtlogin']." ya existe ");
}
$res=mysqli_query($con,"insert into usuarios
values('".$_POST['txtlogin']."','".md5($_POST['txtclave1'])."','".$_POST['txtnomb
res']."','".$_POST['txtdireccion']."','".$_POST['txtnacimiento']."','".$_POST['rbsex
o']."')") or die(mysqli_error($con));
echo 'Login: '.$_POST['txtlogin'].'<br>';
echo 'Nombres: '.$_POST['txtnombres'].'<br>';
echo 'Direccion :'.$_POST['txtdireccion'].'<br>';
echo 'Nacimiento:'.$_POST['txtnacimiento'].'<br>';
echo 'Sexo :';
if($_POST['rbsexo']=='M')
echo 'HOMBRE';
else
echo 'MUJER';
mysqli_close($con);
?>
<p align="center"><b> ... Se ha registrado el usuario </b></p><hr>
Volver a la Pagina principal <a href="index.html"> ahora </a>
</div></body></html>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

login.php
<?php
$con=mysqli_connect("127.0.0.1","root","","serpost") or
die(mysqli_error($con));
$res=mysqli_query($con,"select * from usuarios where
login='".$_POST['txtlogin']."' and clave='".md5($_POST['txtclave'])." '") or
die("Fallo la Operacion de Consulta ...");
if (mysqli_num_rows($res)>0)
{
$row=mysqli_fetch_row($res);
echo '<p align="center"> Bienvenido !!<BR><B>'.$row[2].'</B><BR></p>';
}
else
{
echo '<p align="center">Lo sentimos, pero sus credenciales no son validas
!!<br></p>';
}
mysqli_close($con);
echo '<p align="center">Volver a la Pagina Principal <a href="index.html">
ahora </a></p>';
?>

docenteunt@yahoo.es
Taller de Desarrollo Web con HTML5 & PHP Mdulo II

+ EJEMPLOS
Los siguientes ejemplos debern ser desarrollados y estn formulados en base a los ejemplos
anteriores.

Ejemplo 15: Combo dinmico


Tomando como base el ejemplo 12 de Consulta de Alumnos, elaborar el ejemplo 15 pero
llenando el combo de Carreras con los datos de la Tabla Carreras. Es decir, llenar los valores
del combo ya no con HTML puro sino con datos provenientes de la tabla carreras.

Ejemplo 16: Consulta Resumen


Tomando como base el ejemplo 12 de Consulta de Alumnos, elaborar el ejemplo 16 para incluir
luego del listado de los alumnos; un resumen del nmero de alumnos por cada carrera que
incluye el reporte. Por ejemplo:

CONSULTA RESUMEN
CARRERA N
---------------------------------------
SISTEMAS 3
CONTABILIDAD 5
.

Ejemplo 17: Resultados con Imagen


Tomando como base el ejemplo 13 de ONPE, modificar el ejemplo para incluir en el
reporte imgenes que puedan identificar a cada partido poltico. Es decir, no solo se
muestre la lista, sino que al costado de cada partido poltico se muestre una imagen
que pueda representar al partido. (Pueden asociar cualquier imagen de Internet al
partido)

Ejemplo 18: Validacin de Formulario


Tomando como base el ejemplo 14. Realizar toda la validacin de formularios con las
especificaciones HTML 5. Es decir, utilizar required para las cajas de texto.

Ejemplo 19: Cdigo Captcha


Modificar el ejemplo 14 de Serpost para que el registro incluya un cdigo captcha.
Captcha es una prueba que consiste en que el usuario introduzca un conjunto de
caracteres que se muestran en una imagen distorsionada que aparece en pantalla.
Este mtodo se utiliza para evitar que robots, tambin llamados spambots, puedan
utilizar ciertos servicios. Se supone que una mquina no es capaz de comprender e
introducir la secuencia de forma correcta, por lo que solamente el humano podra
hacerlo.

Ejemplo 20: Copa Amrica


Elabora una pgina web que permita registrar los resultados de los partidos que se dan
en una Copa Amrica. El registro debe incluir: Equipo Local, Goles de Local, Equipo
Visita y Goles de Visita. Luego la consulta es la Tabla de Posiciones donde se muestra
tambin la Bandera del Pas

docenteunt@yahoo.es

S-ar putea să vă placă și