Вы находитесь на странице: 1из 19

Gua de Desarrollo Web

Ingeniera de Sistemas

GUA DE DESARROLLO WEB CON PHP


Aplicaciones Web con PHP
PHP es tecnologa Web para programacin en el lado del Servidor. Los scripts PHP
estn incrustados en los documentos HTML y el servidor los interpreta y ejecuta antes
de servir las pginas al cliente. El cliente no ve el cdigo PHP sino los resultados que
produce. La arquitectura bsica de una aplicacin web con PHP es como muestra la
siguiente figura:

Cuando nos referimos a que PHP estn incrustados en los documentos HTML se
afirma que PHP puede escribirse dentro de un documento HTML como se muestra en
el siguiente extracto de cdigo:
Ejemplo.php
<HTML><HEAD><TITLE>Pgina web 1 PHP </TITLE></HEAD>
<BODY>
<?php
echo "Este es mi primer ejemplo en PHP ...";
// Este es un comentario. Podemos incluir mas sentencias PHP en esta seccin
?>
</BODY></HTML>
Este ejemplo solo escribe Este es mi primer ejemplo en PHP en el browser. Note
que los delimitadores para escribir PHP son (<?php) como delimitador de inicio de las
instrucciones PHP y (?>) como delimitador de fin de instrucciones. Las instrucciones
en PHP terminan con un ; (punto y coma).
Importante !! . Cuando una pagina HTML incluye sentencias PHP la extensin de la
pgina cambia de HTML a PHP.
docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

Ejemplo 01: Registro de Datos


Esta es una aplicacin que recoge datos en un formulario web (escrito en html) y los
enva a una pgina php. La interfaz del formulario es la siguiente:
registraalumno.html

El formulario contiene secuencias de cdigo JavaScript para validar las entradas en


el formulario. Por ejemplo si queremos grabar el registro sin haber especificado el
cdigo del alumno obtendremos el siguiente mensaje:

Lo mismo sucede con el nombre del alumno. Esto permite una validacin el lado del
Cliente. El modelo de base de datos es el siguiente:

docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

Primero elaboramos el script para la base de datos


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');
Luego escribimos la pgina HMTL que va a contener los objetos de formulario e
invocar a la pgina PHP
registraalumno.html
<html><head><title>Registro de Alumnos</title></head><body bgcolor="#99CCFF">
<script language="javascript">
function validar(form)
{
if (form.txtcodigo.value.length<1)
{
alert("Ingrese el codigo ");
form.txtcodigo.focus()
return false;
}
if (form.txtnombres.value.length<1)
{
alert("Ingrese el nombre ");
form.txtnombres.focus()
return false;
}
form.submit();
}
</script>
<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>
docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

</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="button" onClick="validar(this.form)"
value="Grabar Registro ">
</td>
</tr>
</table>
</form></body></html>
Se puede observar que la pgina contiene secuencias de validacin utilizando
JavaScript. Este cdigo se utiliza para validar las entradas en el formulario. Ahora
escribimos la pgina PHP que interacta con la base de datos MySQL
registraalumno.php
<?php
$con=mysql_connect("127.0.0.1","root","") or die(mysql_error());
mysql_select_db("Universidad") or die(mysql_error());
$res=mysql_query("insert alumnos
values('".$_POST['txtcodigo']."','".$_POST['txtnombres']."','".$_POST['cbocarrera']."','"
.$_POST['rbsexo']."')",$con) or die (mysql_error());
mysql_close($con);
echo '<p 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;
docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas
case 3:
echo 'ADMINISTRACION';
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="registralumno.html"> ahora </a>';
?>

docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

Ejemplo 02: Consulta de Datos


Esta es una aplicacin que muestra los datos de los alumnos tomando como origen la
base de datos del ejemplo anterior. La interfaz del formulario es la siguiente:
consultaalumno.html

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


base de datos:

El modelo de base de datos es el siguiente:

docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

consultaalumno.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>
consultaalumno.php
<?php
$con=mysql_connect("127.0.0.1","root","") or die(mysql_error());
mysql_select_db("Universidad") or die(mysql_error());
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=mysql_query($consulta,$con) or die ('Fall la Operacion de Consulta');
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=mysql_fetch_row($res))
{
echo '<tr>';
echo '<td>'.$row[0].'</td>';
echo '<td>'.$row[1].'</td>';
echo '<td>'.$row[2].'</td>';
echo '</tr>';
}
echo '</table>';
mysql_close($con);
echo
'<p
align="center"><br>Volver
a
la
Pagina
Principal
<a
href="consultaalumno.html"> ahora </a></p>';
?>
docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

Ejemplo 03: Registro y Consulta de Datos


Esta es una aplicacin que muestra cmo podemos utilizar la tecnologa web para
registrar y mostrar datos a la vez. El ejemplo corresponde a un escrutinio 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

Gua de Desarrollo Web


Ingeniera de Sistemas
La liga de Consulta nos lleva a la siguiente pgina.

Primero elaboramos el script para la base de datos


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

Gua de Desarrollo Web


Ingeniera de Sistemas
Luego las pginas de todo el ejemplo:

index.html
<html><head><title></title></head>
<div align="center">
<img src="img/onpe.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="img/onpe.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

10

Gua de Desarrollo Web


Ingeniera de Sistemas

11

registro.php
<html><head><title></title></head><body>
<div align="center">
<a href="index.html"><img src="img/onpe.jpg" width="300"></a><br>
<?php
$con=mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("onpe");
mysql_query("insert votos
values('".$_POST['cbopartidos']."','".$_POST['cbodepartamentos']."',".$_POST['txtvot
os'].")");
mysql_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="img/onpe.jpg" width="300"></a><br>
<?php
$con=mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("onpe");
$res=mysql_query("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=mysql_fetch_row($res))
{
echo '<tr><td>'.$row[0].'</td><td align="center">'.$row[1].'</td></tr>';
}
$res=mysql_query("select sum(votos) from votos");
$row2=mysql_fetch_row($res);
echo '<tr><td>Votos Totales -></td><td align="center">'.$row2[0].'</td></tr>';
echo '</table>';
mysql_close($con);
?>
<a href="registro.html">Volver</a></div></body></html>

docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

12

Ejemplo 04: Acceso y Registro de Usuarios


Esta es una aplicacin que muestra cmo podemos ingresar a un sistema con usuario
y contrasea que lo podemos obtener en la aplicacin misma. La interfaz principal de
la aplicacin es la siguiente:
librosenred.html

Como se observa la aplicacin incluye imgenes. 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. De la siguiente manera:

docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

13

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
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

Gua de Desarrollo Web


Ingeniera de Sistemas

14

Primero elaboramos el script para la base de datos


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

librosenred.html
<html><head><title>Libros en Red</title></head><body>
<script language="javascript">
function validar(form)
{
if (form.txtlogin.value.length<1)
{
alert("Ingrese el Login ");
form.txtlogin.focus()
return false;
}
if (form.txtclave.value.length<1)
{
alert("Ingrese la Clave ");
form.txtclave.focus()
return false;
}
form.submit();
}
</script>
<form method="post" action="login.php">
<div align="center"><img src="img\librosenred.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="button" onclick="validar(this.form)" value="Ingresar"><br>
Si no tienes nombre de usuario haz <br>
<a href="registrausuario.html"> click </a><br><br>
</form></div></body></html>
docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

15

login.php
<?php
$con=mysql_connect("127.0.0.1","root","") or die("Error de conexin al Servidor");
mysql_select_db("Librosenred") or die(mysql_error());
$res=mysql_query("select * from usuarios where
login='".$_POST['txtlogin']."' and clave='".md5($_POST['txtclave'])." '",$con) or
die("Fallo la Operacion de Consulta ...");
mysql_close($con);
if (mysql_num_rows($res)>0)
{
$row=mysql_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>';
}
echo '<p align="center">Volver a la Pgina Principal <a href="librosenred.html">
ahora </a></p>';
?>
registrausuario.html
<html><head><title> Registro de Usuarios </title></head><body>
<script language="javascript">
function validar(form)
{
if (form.txtnombres.value.length<1)
{
alert("Ingrese el nombre ");
form.txtnombres.focus()
return false;
}
if (form.txtlogin.value.length<1)
{
alert("Ingrese el Login ");
form.txtlogin.focus()
return false;
}
if (form.txtclave1.value.length<1)
{
alert("Ingrese la Clave ");
form.txtclave1.focus()
return false;
}
if (form.txtclave2.value.length<1)
{
docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas
alert("Confirme la Clave ");
form.txtclave2.focus()
return false;
}
if (form.txtclave1.value!=form.txtclave2.value)
{
alert("Las contraseas no son iguales ");
form.txtclave2.focus()
return false;
}
if (form.txtperiodo.value.length<1)
{
alert("Ingrese el Ao de Nacimiento");
form.txtperiodo.focus()
return false;
}
form.submit();
}
</script>
<form method="post" action="registrausuario.php">
<center>
<img src="img\librosenred.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>Direccin :</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>
<select name="cbodia">
<option value=1>01
docenteunt@yahoo.es

16

Gua de Desarrollo Web


Ingeniera de Sistemas
<option value=2>02
<option value=3>03
<option value=4>04
<option value=5>05
<option value=6>06
<option value=7>07
<option value=8>08
<option value=9>09
<option value=10>10
<option value=11>11
<option value=12>12
<option value=13>13
<option value=14>14
<option value=15>15
<option value=16>16
<option value=17>17
<option value=18>18
<option value=19>19
<option value=20>20
<option value=21>21
<option value=22>22
<option value=23>23
<option value=24>24
<option value=25>25
<option value=26>26
<option value=27>27
<option value=28>28
<option value=29>29
<option value=30>30
<option value=31>31
</select>
<select name="cbomes">
<option value=1>Enero
<option value=2>Febrero
<option value=3>Marzo
<option value=4>Abril
<option value=5>Mayo
<option value=6>Junio
<option value=7>Julio
<option value=8>Agosto
<option value=9>Setiembre
<option value=10>Octubre
<option value=11>Noviembre
<option value=12>Diciembre
</select>
Ao : <input type="text" name="txtperiodo" size=4>
</td>
</tr>
<tr>
docenteunt@yahoo.es

17

Gua de Desarrollo Web


Ingeniera de Sistemas

18

<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="button" onClick="validar(this.form)" value="Grabar Registro ">
</div></td>
</tr>
</table><hr><a href="librosenred.html"> Regresar </a>
</center></form></body></html>
registrausuario.php
<?php
$con=mysql_connect("127.0.0.1","root","") or die(mysql_error());
mysql_select_db("Librosenred") or die(mysql_error());
$res=mysql_query("select * from usuarios where login='".$_POST['txtlogin']."' and
clave='".md5($_POST['txtclave1'])."'",$con) or die(mysql_error());
if ($row=mysql_fetch_row($res)){
mysql_close($con);
die("Lo sentimos, el usuario ".$_POST['txtlogin']." ya existe ");
}
$nacimiento=$_POST['cbodia']."/".$_POST['cbomes']."/".$_POST['txtperiodo'];
$res=mysql_query("insert into usuarios
values('".$_POST['txtlogin']."','".md5($_POST['txtclave1'])."','".$_POST['txtnombres']."'
,'".$_POST['txtdireccion']."','".$nacimiento."','".$_POST['rbsexo']."')",$con) or
die(mysql_error());
echo 'Login: '.$_POST['txtlogin'].'<br>';
echo 'Nombres: '.$_POST['txtnombres'].'<br>';
echo 'Direccin :'.$_POST['txtdireccion'].'<br>';
echo 'Nacimiento:'.$nacimiento.'<br>';
echo 'Sexo :';
if($_POST['rbsexo']=='M')
echo 'HOMBRE';
else
echo 'MUJER';
mysql_close($con);
?>
<p align="center"><b> ... Se ha registrado el usuario </b></p><hr>
Volver a la Pgina principal <a href="librosenred.html"> ahora </a>

docenteunt@yahoo.es

Gua de Desarrollo Web


Ingeniera de Sistemas

19

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

Ejemplo 05: Combo dinmico


Tomando como base el ejemplo 2 de Consulta de Alumnos, elaborar el ejemplo 5 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 06: Consulta Resumen


Tomando como base el ejemplo 2 de Consulta de Alumnos, elaborar el ejemplo 6 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 07: Resultados con Imgen


Tomando como base el ejemplo 3 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 08: Validacin de Formulario


Tomando como base el ejemplo 4 de Librosenred. Reemplazar toda la validacin que
se a echo con JavaScript por la validacin de formularios con las especificaciones del
nuevo HTML 5. Es decir ya no utilizar Javascript sino HTML5 como required para las
cajas de texto.

Ejemplo 09: Combo de Fechas


Modificar el ejemplo 4 de Librosenred para que la fecha de nacimiento en el formulario
de Registro de Usuario sea con un combo de fechas basado en la etiqueta de HTML5
para combo de fechas usando la etiqueta <input type="date" ..>

Ejemplo 10: 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

Вам также может понравиться