1

Conexión entre programa htlm5 y postgresql

Prof. Dr. Jorge Domínguez Chávez

Elementos considerados en este tema

1. index.php: Formulario inicial para acceso al sistema.

2. autenticacion.php: Contiene el programa que autentifica que el usuario tenga acceso, de tenerlo,
activa:

3. conexion.php: programa que gestiona la conexión a la base de datos que se realiza con PDO.

4. menu.php; de NO tener acceso, regresa al index.php.

A ) Base de datos
Usamos la base de datos ”zoologico”, vea Tutorial básico de PostgreSQL, que tiene una tabla
”mascotas” y creamos otra tabla llamada ”usuarios” según instrucciones siguientes:
1 create table usuarios (
2 id serial primary key ,
3 email varchar (60) not null unique ,
4 clave varchar (64) not null ) ;

La tabla mascotas está explicada en el Tutorial básico de PostgreSQL. Esto es para trabajar
con datos simples y sin relaciones.

B ) El formulario principal de la aplicación WEB es index.php

1 <! DOCTYPE html >

2 < html lang = " es " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < meta name = " viewport " content = " width = device - width , initial - scale
=1.0 " >
6 < meta http - equiv = "X - UA - Compatible " content = " ie = edge " >
7 < title > Bienvenido </ title >
8 </ head >
9 < body >
10 < form method = " post " action = " autenticacion . php " >
11 Email : < input type = " mail " value = " " required = " true " autofocus
placeholder = " Ejemplo : usuario@servidor . com " / >
12 Clave : < input type = " password " value = " " pattern = " [A - Za - z0 -9 P . $_
&]{6 ,8} " required = " true " / >
2

13 < input type = " submit " value = " Enviar datos " >
14 < input type = " reset " value = " Restaurar formulario " >
15 </ form >
16 </ body >
17 </ html >

Revisar Cómo hacer una página web en HTML, así que empecemos por las partes nuevas
Explicar las partes !!!!

Figura 1: Explicación de los elementos del formulario index.php

a) En la sentencia form, method indica que el envio de datos es privado y action, depende de
botón submit, llama al programa autenticacion.php
b) en la sentencia input para email, type indica que el dato de entrada en una dirección email,
required indica que no avance mientras no se ingrese una dirección válida,
c) autofocus indica que el cursor al ingresar al formulario se coloque en este campo.
d ) placeholder muestra un ejemplo de los datos esperados
e) en la sentencia input para clave, type password cambia el dato entrado por un * para
ocultar el valor ingresado, required indica que no avance mientras no se ingrese una clave
válida1
f ) pattern es el patrón de datos esperados, la clave tiene una longitud entre 6 y 8 caracte-
res, cadena formada por letras minúsculas, mayúsculas, números y al menos uno de los
caracteres especiales indicados .$_&
g) en la sentencia input submit este botón al presionado activa Action para llamar programa
autenticacion.php
h) en la sentencia input reset este botón al presionado limpia los datos del formulario para
volver a empezar.
De las sentencias input merecen especial atención la opción name que es el nombre del
datos a ser transferido al programa autenticacion.php, en el input email es ”email” y en
clave es ”clave”. NO confundir tipo de datos con name de dato.

C ) El programa conexion.php

1
Algo interesante en la línea en la cual estamos encriptando la clave del usuario utilizando la función pass-
word_hash() de manera que no sea legible, por ejemplo para el administrador de la base de datos o en el caso de
algún hackeo, así mismo puede utilizar la función password_verify() que verifica la clave real con la clave encriptada.
 3

1 <? php
2 // Este archivo conecta la base de datos a un objeto PDO
3
4 $contrase ñ a = " estudiantes " ;
5 $usuario = " estudiantes " ;
6 $n om br eBa se De Dat os = " mascotas " ;
7 $rutaServidor = " localhost " ;
8 $puerto = " 5432 " ;
9 try {
10 $con = new PDO ( " pgsql : host = $rutaServidor ; port = $puerto ; dbname =
$n om br eBa se De Dat os " , $usuario , $contrase ñ a ) ;
11 $con - > setAttribute ( PDO :: ATTR_ERRMODE , PDO :: ERRM ODE_EXCE PTION ) ;
12 } catch ( Exception $e ) {
13 echo " Ocurri ó un error con la base de datos : " . $e - > getMessage
() ;
14 }

Para realizar tal conexión nos apoyaremos de la función ”pdo2 ”. La cual requiere 5 parámetros
para un correcto funcionamiento. Vea la figura siguiente:

Figura 2: Explicación de los elementos de conexion.php

a) $rutaServidor.- variable que almacena el nombre del servidor.

b) $puerto .- número de puerto de escucha por defecto 5432 en postgresql
c) $nombreBaseDeDatos .- Nombre del base de datos postgresql.
d ) $usario .- nombre del usuario propietario, estudiantes3 , de la base de datos ”zoologico”
e) $passwordBD.- Contraseña del propietario de la base de datos, estudiantes, ”zoologico”

D ) El formulario autenticacion.php

1 <? php
2 unset () ;
3 session_start () ;
2
PDO significa PHP Data Objects, Objetos de Datos de PHP, una extensión para acceder a bases de datos.
Con PDO accede a diferentes sistemas de bases de datos con un controlador específico (MySQL, SQLite, Oracle,
PostgreSQL, etc...) mediante el cual se conecta. Independientemente del sistema utilizado, se emplearán siempre los
mismos métodos, lo que hace que cambiar de uno a otro resulte más sencillo.
3
no olvides cambiar el usuario y contraseña a los que usas en tu base de datos,
4

4 include_once ( ' conexion . php ' ) ;

5 $email = $_POST [ " email " ];
6 $passwd = $_POST [ ' clave ' ];
7 $password = crypt ( $passwd , " ## " ) ;
8 $sql = " SELECT * FROM usuarios WHERE email = ? " ;
9 $consulta = $con - > query ( $sql , array ( $email ) ) ;
10 $fila = $consulta - > fetchAll ( PDO :: FETCH_OBJ ) ;
11 if ( $fila [ " clave " ] == $password ) {
12 $_SESSION [ " email " ] = $fila [ " email " ];
13 $_SESSION [ " password " ] = $fila [ " clave " ];
14 header ( " location : menu . php " ) ;
15 }
16
17 header ( " location : index . php " ) ;

La siguiente figura:

Figura 3: Explicación de los elementos de autenticacion.php

a) unset(); destruye la sesión, mientras que session_start() la inicia4 .

b) include_once(’conexion.php’) incluye el programa conexión.php en el programa principal
y lo ejecuta.
c) conexión.php
d ) $_POST[émail’] asigna el dato a la variable $email, recuerda que toda variable php empieza
con $.
e) crypt es una función php de encriptación, recordar que debe grabar la clave encriptada
por seguridad, una vez encriptada no hay forma de marcha atrás.
f ) sentencia sql preparada, para evitar inyecciones sql o cualquier caracter extraño
g) ejecuta la consulta con el dato email en el arreglo, recordar que el campo email es único en
la tabla y que lavalidación dada por las redes sociales impone la restricción de no cuantas
email repetidas.
h) sentencia wue recuepera un registro y lo asigna a la variable $fila.
4
Inicia una sesión con session_start(), una vez iniciada y asignada a la variable global $_SESSION[”email”], la
sesión es accesible desde cualquier página del mismo sitio, previamente utilice la función en cada página para verificar
su disponibilidad.
 5

i) compara la clave del registro con la clave dada por el usuario y si son iguales crea variables
de session
j ) esta sentencia crea una para email y la otra para clave
k ) la sentencia header llama al formulario menu.php
l ) si la comparacion, punto 9, NO se cumple ejecutar header llamando al formulario index.php

E ) el formulario menu.php

1 <? php
2 session_start ;
3 if ( isempty ( $_SESSION [ ' email ' ]) or isempty ( $_SESSION [ ' clave ' ]) )
4 header ( " location : index . php " )
5 ?>
6 <! DOCTYPE html >
7 < html lang = " en " >
8 < head >
9 < meta charset = " UTF -8 " >
10 < meta name = " viewport " content = " width = device - width , initial - scale
=1.0 " >
11 < title > Document </ title >
12 </ head >
13 < body >
14 <ul >
15 <il > Inicio </ il >
16 <il > Tablas </ il >
17 <il > Procesos </ il >
18 <il > Reportes </ il >
19 <il > Salida </ il >
20 </ ul >
21 </ body >
22 </ html >

a) verifica si las variables de session NO tienen datos, de ser así

b) sentencia que llama al formulario index.php
c) elementos básicos del menú propuesto