– Sesión 8 –

Contenido

¡Bienvenido al blog de nuevo! Los temas de esta sesión serán interesantes😏

 

Accesibilidad en Aplicaciones Web – Jonathan Rodríguez

Jonathan Rodríguez es un ingeniero egresado del Tecnológico de Costa Rica que forma parte de INCLUTEC el cual nos brindó información importante relacionada a la Accesibilidad para la Web.

Aunque no lo creas, mucha gente alrededor del mundo, incluyendo el 10% de la población costarricense, tiene alguna discapacidad que les dificulta navegar en páginas web, por lo que es importante fomentar la igualdad de acceso a la información y la igualdad de oportunidades para la accesibilidad en la web, y dar el derecho de acceso a la información (Ley 7600, 7948, 8661).

La creación de páginas accesibles para las personas con discapacidad no solamente beneficia a esta población, este también le ofrece ventajas a los desarrolladores tales como los que se mencionarán a continuación:

  • Mejora la usabilidad.
  • Simplificación del desarrollo y mantenimiento.
  • Posicionamiento SEO ya que algunas páginas al tener puntos no accesibles son descartados y no aparecen en los rankings.

A continuación veremos las principales discapacidades y sus barreras de acceso.

Discapacidad Visuales

Como el mismo nombre dice, esto es cuando una persona tiene una limitación de visión. Hay dos clasificaciones de la disminución de la vista:

  • Ceguera: Pérdida completa del sentido de la vista.
  • Disminución visual: Pérdida parcial del sentido de la vista.

Para poder interactuar con las aplicaciones web, estas personas utilizan un lector de pantalla que va describiendo lo que hay por medio de audio. Estas personas utilizan las flechas y el tab del teclado para navegar en la aplicación.

A la hora de desarrollar una aplicación web se pueden presentar varias barreras para las personas con este tipo de discapacidad.

  • Imágenes sin texto alternativo.
  • Videos sin descripción.
  • Tablas cuyo contenido resulta incomprensible.
  • Texto añadido mediante imágenes (Captcha).
  • Uso del color en texto.
  • Espaciado entre elementos.
  • Tamaño de letra.

Discapacidad Auditiva

Como podemos saber, la discapacidad auditiva es la dificultad o imposibilidad de utilizar el sentido del oído. Esto puede afectar la accesibilidad para la web como por ejemplo a la hora de ver un video o necesitar escuchar un audio.

Existen dos tipos de discapacidad auditiva:

  • Sordera completa.
  • Sordera parcial.

Las barreras presentes al tener alguna discapacidad auditiva son las siguiente:

  • Falta de transcripción de los contenidos sonoros.
  • Contenido complejo.

Discapacidad Motora

Esta discapacidad limita las habilidades físicas de una persona. Tareas tan fáciles como darle click a un botón puede complicarse mucho para una persona con este tipo de discapacidad. Esto hace importante tener en cuenta las barreras presentes para el uso de aplicaciones web. Estas se mencionarán a continuación:

  • Iconos, botones, enlaces o elementos de interacción muy pequeños.
  • Poco adaptabilidad del uso con el teclado.
  • Tiempos de respuesta limitados.

¿Cómo podemos proveer accesibilidad para la web?

Para poder desarrollar una aplicación web accesible hay que tener en cuenta algunos puntos.

  • Para esto hay que seguir las pautas establecidas por el W3C, el cual es un organismo que define estándares para la Web.
  • Describir cada componente de las páginas con el atributo de texto alternativo (alt) para que estos puedan ser descritos para las personas con discapacidad visual.
  • Poner el equivalente del texto en Lesco.

También podemos contar con la ayuda de herramientas que nos permiten evaluar la accesibilidad de la página ya sea automáticamente o manualmente.

👁 Evaluación Automática

Nota: Estos son “add-ons” para Firefox, pero están disponibles para Chrome.

👁 Evaluación Manual

  • Falsos Positivos.
  • Análisis completos y fiables de la accesibilidad.
  • Errores leves, pero fatales.

Tomando en cuenta todo lo mencionado anteriormente, podremos desarrollar aplicaciones web accesibles para cualquier tipo de población. Hay que tomar en cuenta que no hay herramientas que nos ayude a hacer un sitio accesible ya que eso lo tiene que hacer el mismo desarrollador, pero se puede utilizar herramientas como las mencionadas anteriormente para que nos ayudará durante el desarrollo.


 

PHP

 

¿Qué es PHP?

PHP no es solo el acrónimo de “preprocesador de hipertexto”, este es un lenguaje de scripting de código abierto del lado del servidor más extendido en la web. Este es potente, simple y tiene un gran soporte en la mayoría de los servidores de hosting. Los scripts de php se ejecutan en el servidor y es gratuito.

Este fue creado por Rasmus Lerdorf en 1994 y la evolución de este lenguaje fue más o menos así:

VersiónDato
Personal Homepage Tools (
PHP Tools ) Version 10
June 8th 1995
Nace CGI escrito en C. Permitía la interpretación de un número limitado de comandos.
PHP 3June 1998
Se le agregaron nuevas funcionalidades de soporte a protocolos de internet / soporte a mayoría de bases de datos.
PHP 4May 2000
Independencia del servidor Web y nacimiento de más API’s
PHP 5July 2004
Mejora integración con el paradigma de la Programación Orientada a Objetos.
PHP 6 y 7December 2015
Mejor rendimiento, pero aún no se ajusta a todos los servidores.

Esta también se caracteriza por su orientación de programación que se mencionarán a continuación:

  • Es multiplataforma.
  • Tiene estilos de programación totalmente libre.
    • Programación estructurada (funciones).
    • Programación Orientada a Objetos (clases y objetos).
    • Actualmente se están incorporando características de la programación funcional

Este lenguaje tiene una gran cantidad de herramientas, librerías y frameworks gratuitos disponibles, además de que el núcleo del lenguaje tiene una gran cantidad de funciones para hacer todo tipo de operaciones.

Este tiene varios competidores, algunos de ellos son:

  • ASP.NET-ASP estándar.
  • NodeJS.
  • Ruby.
  • Java.
  • Python.

Aplicaciones más populares que utilizan PHP son:

  • CMS para páginas web:
    • WordPress
    • Joomla!
    • Drupal
  • CMS para tiendas online:
    • Prestashop
    • WooCommerce
    • Magento
 

¿Por qué PHP?

PHP es un lenguaje interesante, este nos ofrece una variedad de utilidades que pueden facilitar tareas que se necesiten realizar. Puede que te preguntes ¿Qué puedo hacer yo con PHP? Pues con este podemos realizar una gran variedad de cosas. Las principales son las siguientes:

  • Puede generar contenido de página dinámico.
  • Crear, abrir, leer, escribir, eliminar y cerrar archivos en el servidor.
  • Puede recopilar datos de un “form”.
  • Puede enviar y recibir cookies.
  • Puede agregar, eliminar, modificar datos en su base de datos.
  • Puede ser usado para controlar el acceso de usuarios.
  • Puede cifrar datos.
  • Además de poder generar código HTML, este también puede generar imágenes, archivos PDF, películas Flash y cualquier texto como XHTML y XML.

Y ¿Qué servicios nos puede dar?

  • Funciones de correo electrónico.
  • Gestión de bases de datos.
  • Gestión de archivos.
  • Tratamiento de imágenes.
  • Funciones básicas de aspectos de internet (manejo de sesiones, cookies, url).
  • Funciones básicas de propósito general.
  • Conexión a bases de datos como MySQL para mostrar información en aplicaciones web.
 

Ventajas y Desventajas

Al igual que cualquier cosa en la vida, PHP también tiene sus ventajas y desventajas. Estas las veremos a continuación.

Ventajas:

  • Como se mencionó anteriormente, este es un lenguaje multiplataforma.
  • Es completamente orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una base de datos.
  • El código fuente escrito en PHP es invisible al navegador y al cliente. Esto porque el servidor que ejecuta el código envía omo resultado HTML, por lo que se puede decir que PHP es seguro y confiable.
  • Capacidad de conexión con la mayoría de base de datos que se utilizan en la actualidad. Los más destacados son MySQL y PostgreSQL.
  • Capacidad de expandir su potencial utilizando módulos llamados ext’s o extensiones.

Desventajas:

  • Puede resultar inconveniente que sea un lenguaje que interpreta en ejecución ya que el código fuente puede no ser ocultado.
  • El problema anterior influye en el costo y tiempo de ejecución.
 

¿Cómo obtengo PHP?

Para el ambiente de desarrollo de PHP se necesita una base de datos cualquiera (se recomienda MySQL) y un servidor web.

Si deseas obtener PHP para cualquier sistema operativo junto a su ambiente de desarrollo listo para ser utilizado puedes seguir los pasos del siguiente manual:

👉 Manual de PHP 👈

Si solo deseas obtener PHP, puedes simplemente descargarlo en el siguiente enlace:

👉 PHP 👈

 

Sintaxis

Me imagino que después de saber un poco sobre PHP, quieres saber cómo utilizarlo. La sintaxis de este lenguaje es sencillo y se ejecuta en el servidor.

El código de PHP se puede incluir en cualquier parte del documento HTML. Este empieza con la etiqueta <?php … y termina con ?>. Dentro de esta etiqueta se coloca todo el código que desea realizar. Esto se vería de la siguiente manera:

<?php
// PHP code goes here
?>

Es importante tener en cuenta que todo archivo que contenga código PHP debe de ser guardado con la extensión .php para poder ser utilizado. Un ejemplo de un archivo PHP sería el siguiente:

<!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<!-- CÓDIGO PHP -->
<?php
echo "Hello World!";
?>

</body>
</html>

Elementos básico:

  • Toda declaración en PHP termina con
  • PHP es “case sensitive”, por ejemplo, $var es diferente a $Var
  • Las variables empiezan con el signo $
  • La declaración “echo” de PHP usualmente se utiliza para enviar datos a la pantalla (es como un “print” en cualquier otro lenguaje).

Todos los elementos mencionados anteriormente los podremos ver en el siguiente ejemplo:

<?php
$txt = "programming";
echo "I love " . $txt . "!";
?>
  • PHP es un lenguaje tipado y las variables toman el tipo de su definición.
Tipos de Datos
String
Integer
Float
Boolean
Array
Object
NULL
Resource
  • Las constantes se declaran por medio de la función define() y tiene alcance global.
define ( string $name , mixed $value [, bool $case_insensitive = false ] ) : bool
  • Para crear una función simplemente se escribe “function” y el nombre de la función junto a sus parámetros. Esto lo podemos ver en el siguiente ejemplo:
<?php
$x = 5; // global scope

function myTest() {
    // using x inside this function will generate an error
    echo "<p>Variable x inside function is: $x</p>";
} 
myTest();

echo "<p>Variable x outside function is: $x</p>";
?>
  • Para realizar operaciones aritméticas se utiliza la siguiente sintaxis.
  • Para realizar operaciones de comparación se utiliza la siguiente sintaxis.

Para saber más sobre la sintaxis de PHP puedes ver el siguiente enlace: PHP 5 Syntax

 

Manejo de Formulario

Para entender mejor cómo manejar un formulario de HTML utilizando PHP, supongamos que tenemos el siguiente código el cual manipularemos para entender los formularios.


<!DOCTYPE HTML>  
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>  

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed"; 
    }
  }
  
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format"; 
    }
  }
    
  if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
    // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
      $websiteErr = "Invalid URL"; 
    }
  }

  if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }

  if (empty($_POST["gender"])) {
    $genderErr = "Gender is required";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  Name: <input type="text" name="name" value="<?php echo $name;?>">
  <span class="error">* <?php echo $nameErr;?></span>
  <br><br>
  E-mail: <input type="text" name="email" value="<?php echo $email;?>">
  <span class="error">* <?php echo $emailErr;?></span>
  <br><br>
  Website: <input type="text" name="website" value="<?php echo $website;?>">
  <span class="error"><?php echo $websiteErr;?></span>
  <br><br>
  Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
  <br><br>
  Gender:
  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="other") echo "checked";?> value="other">Other  
  <span class="error">* <?php echo $genderErr;?></span>
  <br><br>
  <input type="submit" name="submit" value="Submit">  
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

</body>
</html>

Cada elemento a utilizar en el HTML anterior tiene su nombre debidamente puesto (atributo “name”) para poder ser utilizado más adelante con el código de PHP.

El código anterior luciría de la siguiente manera al abrirlo en un navegador.

A continuación veremos los componentes relevantes y necesarios del formulario anterior para su funcionamiento.

Para el Manejo de los Datos se necesita lo siguiente:

⚙️ $_SERVER[“PHP_SELF”]: Este es una variable de entorno que contiene el nombre del archivo del script en PHP en ejecución.

⚙️ $_POST[“name”]: Devuelve un arreglo que contiene pares de llave-valor donde la llave es el nombre de los elementos del formulario y los valores son los datos de entrada del usuario. La información enviada desde un formulario es invisible para otros y no tiene límite en la cantidad de información enviada.

Para la Validación de los Datos se necesita lo siguiente:

Para la validación de nuestro ejemplo tendremos en cuanta las siguientes restricciones:

En el código mostrado anteriormente, podemos ver que para la validación de los datos se pasan las variables a través de la función htmlspecialchars() de PHP. Esto verificará que se reciban caracteres válidos y eliminará los caracteres innecesarios.

Además, si vemos las declaraciones “if”, estas verifican que los campos no estén vacíos. En caso de que lo estén, este mostrará un mensaje de error el cual luce de la siguiente manera:

Es importante tomar en cuenta que el formato de los datos son validados mediante el uso del método preg_match() con expresiones regulares.

El programa funcionando luce de la siguiente manera:

 

Conexión a la Base de Datos

La conexión de PHP con una base de datos es muy sencilla. El motor de base de datos más popular para esto es MySQL, el cual es una base de datos relacional de código abierto respaldado por Oracle.

Para el manejo de la base de datos se puede utilizar MySQLi o PDO, pero en este caso nos enfocaremos en MySQLi. A continuación veremos algunas de las funciones disponibles en esta biblioteca.

Para realizar la conexión

🔋 mysqli()

Se indica un servidor, usuario, password y esquema de la base de datos para realizar la conexión. Esto luciría de la siguiente manera:

<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";
?>

🔋 conn->close()

Desconectar la comunicación luego de la transacción que se realice con la base de datos.

Consultas a la Base de Datos

🔋 query($<consulta sql>)

En la parte que dice <consulta sql> se escribe una sentencia de SQL para recuperar datos de la base y poder utilizarlos.


 

Laboratorio 3

¡Se vino otro laboratorio! Wohoo 😆

Para entender mejor PHP utilizaremos este laboratorio como un ejemplo y guía de algo básico utilizando PHP, en este caso, el registro de usuarios para una aplicación web.

En este laboratorio realizaremos parte de una aplicación web que está en desarrollo. Para esto seleccionaremos algunas tablas de la base de datos que utilizará la aplicación en desarrollo y prepararemos una página que nos permita interactuar con alguna de las tareas transaccionales esperadas para dicha tabla (tramitar inclusión de un registro, recuperación de datos que se mostrarán en la páginas, entre otros). Para esta aplicación utilizaresmo PHP y MySQL como motor de base de datos.

Les adjunto la especificación por si desean tenerlo 😄

¡EMPECEMOS!

Para la creación de una página para registra usuario seguiremos los siguientes pasos.

Paso 1 – Ambiente de Desarrollo

Como primer paso, necesitamos tener el ambiente adecuado para poder empezar a programar. Para este laboratorio utilizaremos WAMP. Este es un servidor nos preparará de una vez el ambiente para poder trabajar utilizando PHP y MySQL.

Una vez que nuestro servidor esté arriba y listo para ser utilizado, el icono de WAMP en la barra de tareas en la esquina inferior derecha debería de estar en color verde.

Esto lo puedes conseguir en el siguiente enlace: WAMP

Paso 2 – ¿Dónde guardar el proyecto?

Es importante saber que para poder correo un proyecto de PHP utilizando el servidor de WAMP, tenemos que guardar los proyectos dentro de la carpeta www de la carpeta de wamp. Usualmente encontrarás esta carpeta en la siguiente ruta:

cd C:\wamp64\www

Paso 3 – Creación de ventana

Ahora que ya sabemos dónde guardar nuestro código empezaremos con la creación de la ventana que utilizaremos. Para este ejemplo utilizaremos el siguiente HTML al cual llamaremos registro.php.

<!DOCTYPE html>
<html style="background-color:#e02424;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - Brand</title>
    <link rel="stylesheet" href="./loginRegistro/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <link rel="stylesheet" href="./loginRegistro/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="./loginRegistro/assets/css/styles.min.css">
</head>

<body style="background-color:rgb(rgb(224,224,224));" onload="getProvinces();">
    <nav class="navbar navbar-light navbar-expand-lg fixed-top clean-navbar" style="background-color:#165f40;">
        <div class="container-fluid"><a class="navbar-brand logo" href="#" style="color:#ffffff;">Foresta<img class="rounded-circle img-fluid float-left" src="./images/logo.jpg" width="15%" height="100%"></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div
                class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav ml-auto" style="color:rgb(255,255,255);">
                    <li class="nav-item" role="presentation"><a class="nav-link" href="index.html" style="color:#fcfbfb;">Home</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="tutorial.html" style="color:#ffffff;">Tutoriales</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="ubicacionEmpresas.html" style="color:#ffffff;">Empresas asociadas</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="ubicacionPlantar.html" style="color:#ffffff;">Puntos de plantación</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="eventosRelacionados.html" style="color:#ffffff;">Eventos relacionados</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="canjearPuntos.html" style="color:#ffffff;">Canjear Puntos</a></li>
                    <li class="dropdown" style="color:rgb(255,255,255);"><a data-toggle="dropdown" aria-expanded="false" href="#" class="dropdown-toggle nav-link dropdown-toggle" style="color:#ffffff;">Registro</a>
                        <div role="menu" class="dropdown-menu dropdown-menu-left">
                            <a role="presentation" href="registro.html" class="dropdown-item">Cliente</a>
                            <a role="presentation" href="registroEmpresas.html" class="dropdown-item">Empresa</a>
                        </div>
                    </li>
                </ul>
        </div>
        </div>
    </nav>
    <main class="page registration-page" style="background-color:#040404;color:rgb(58,104,150);">
        <section class="clean-block clean-form dark" style="background-color:rgb(94,83,66);background-image:url("./loginRegistro/assets/img/cover-trees.jpg");">
            <div class="container" style="background-size:cover;">
                <div class="block-heading">
                    <h2 class="text-info text-light" style="color:rgb(241,241,241);text-shadow:-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;font-size:50px;">Registro</h2>
                </div>
                <form style="background-color:rgb(224,224,224);">
                    <div class="form-group"><label for="name" style="color:rgb(0,0,0);font-size:18px;">Nombre</label>
					<input class="form-control item" type="text" id="name" value="coco"></div>
                    <div class="form-group"><label for="password" style="color:rgb(0,0,0);font-size:18px;">Correo</label>
					<input class="form-control item" type="email" id="email" value="coco@gmail.com"></div>
                    <div class="form-group"><label for="email" style="color:rgb(0,0,0);font-size:18px;">Contraseña</label>
					<input class="form-control item" type="password" id="password" value="coco123"></div>
                    <div class="form-group"><label for="email" style="color:rgb(0,0,0);font-size:18px;">Nickname</label>
					<input class="form-control item" type="text" id="nickname" value="cocoxD"></div>         
					<div class="form-group"><label for="email" style="color:rgb(0,0,0);font-size:18px;">Provincia</label>
					<select class="form-control" style="color:rgb(0,0,0);font-size:18px;" id="provincia">
						<!-- <option value="volvo">new option</option> -->
					</select>
					
					</div>			
					<div class="form-group"><label for="email" style="color:rgb(0,0,0);font-size:18px;">Dirección</label>
					<input class="form-control item" type="text" id="direccion" value="vivo aquiiiii"></div>
                    <div class="form-group"><label for="email" style="color:rgb(0,0,0);font-size:18px;">Fecha de nacimiento</label></div>
					<input class="form-control" type="date" id="fecha" value="1999-11-11">
					<button class="btn btn-primary btn-block" type="button" style="background-color:rgb(98,152,103);font-size:18px;" onclick="registerUser()">Sign Up</button>
					</form>
            </div>
        </section>
    </main>
    <div class="footer-basic" style="background-color:#c6b9a6;">
        <footer>
            <div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
        </footer>
    </div>
    <script src="./loginRegistro/assets/js/jquery.min.js"></script>
    <script src="./loginRegistro/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./loginRegistro/assets/js/script.min.js"></script>
	<script src="./scriptsJS/JSCode.js"></script>
</body>

</html>

Este luciría de la siguiente manera incluyendo los css y las imágenes utilizadas:

Por razones demostrativas, la parte inferior lucir;a de la siguiente manera para poder ver los datos capturados.

Paso 4 – Validación de Datos utilizando PHP

La validación de los datos ingresados por el usuario es sencillo. Para esto tendremos un <form> con nuestros <input> adentro y cada input tendrá el atributo “name” con su respectivo nombre para poder ser identificado y utilizado por PHP.

Para esto ocuparemos un campo para el nombre, correo, contraseña, nickname, provincia, dirección y fecha de nacimiento. Parte del código del formulario luciría de la siguiente manera:

<form style="background-color:rgb(224,224,224);" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
       <div class="form-group"><label for="name" style="color:rgb(0,0,0);font-size:18px;">Nombre</label>
	<input class="form-control item" name="name" type="text"></div>
        <span class="error" style="color:#FF0000;"> <?php echo $nameErr;?></span>
. . .
</form>

Dentro de la etiqueta <form> agregaremos el código PHP “<?php echo htmlspecialchars($_SERVER[“PHP_SELF”]);?>” como la acción. Este ejecutará la función htmlspecialchars() teniendo como parámetro al mismo archivo PHP para evaluar el formato de los datos ingresados por el usuario, por ejemplo, alguna palabra con un símbolo inválido. Además, el atributo “method” del <form> “post” para que este nos devuelva el contenido del formulario con el nombre como etiqueta.

<form style="background-color:rgb(224,224,224);" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Además, se agregará un <span> tendrá el código PHP “<?php echo $nameErr;?>” que desplegará un mensaje en caso de que haya un dato mal ingresado.

<span class="error" style="color:#FF0000;"> <?php echo $nameErr;?></span>

Por cuestiones de orden agregaremos el código PHP que nos validará los datos antes de la etiqueta <body> del HTML. En este tendremos varias declaraciones de variables que guardarán nuestros datos y mensajes de error.

<?php

// define variables and set to empty values
$nameErr = $emailErr = $pwdErr = $nicknameErr = $provinceErr = $directionErr = $birthErr = "";

$name = $email = $password = $nickname = $province = $direction = $birth = "";

//Verify presence of error.
$withoutErr = true; //false if there is an error.

Además tendremos un una condición que se realizará si se utiliza el método POST que agregamos anteriormente en la etiqueta <form> del HTML.

if ($_SERVER["REQUEST_METHOD"] == "POST") {

Posteriormente dentro de la condición anterior agregaremos las condiciones “if” que verificarán los datos.

if (empty($_POST["name"])) {
        $nameErr = "* Nombre requerido";
		$withoutErr = false;
      } else {
        $name = test_input($_POST["name"]);
        // check if name only contains letters and whitespace
        if (!preg_match("/^\pL+(?>[- ']\pL+)*$/u",$name)) {
          $nameErr = "* Solo se aceptan letras y espacios";
		  $withoutErr = false;
        }
      }
      
      if (empty($_POST["email"])) {
        $emailErr = "* Correo requerido";
		$withoutErr = false;
      } else {
        $email = test_input($_POST["email"]);
        // check if e-mail address is well-formed
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          $emailErr = "* Formato de correo inválido";
          $withoutErr = false;		  
        }
      }
	  
	  if (empty($_POST["password"])) {
        $pwdErr = "* Contraseñá requerida";
		$withoutErr = false;
      } else {
        $password = test_input($_POST["password"]);
      }
	  
	  if (empty($_POST["nickname"])) {
        $nicknameErr = "* Nickname requerido";
		$withoutErr = false;
      } else {
        $nickname = test_input($_POST["nickname"]);
      }
	  
	  if (empty($_POST["province"])) {
        $provinceErr = "* Provincia no selecionada";
		$withoutErr = false;
      } else {
        $province = test_input($_POST["province"]);
      }
	  
	  if (empty($_POST["direction"])) {
        $directionErr = "* Dirección requerida";
		$withoutErr = false;
      } else {
        $direction = test_input($_POST["direction"]);
      }
	  
	  if (empty($_POST["birth"])) {
        $birthErr = "* Fecha de nacimiento es requerido";
		$withoutErr = false;
      } else {
        $birth = test_input($_POST["birth"]);
      }

Al finalizar la verificación de los datos, este tendrá una condición que agregará al usuario si no hay error alguno.

if ($withoutErr === true){
     addUser($name, $email, $password, $nickname, $direction, $province, $birth); 
}
      
}

Como probablemente notaron, las condiciones “if” utilizaban una función llamada “test_input()“. Esta función se encarga de “limpiar” lo datos quitándole espacios, barras de string y caracteres especiales. Esta función lo agregaremos después de “if ($_SERVER[“REQUEST_METHOD”] == “POST”) {“.

function test_input($data) {
      $data = trim($data);
      $data = stripslashes($data);
      $data = htmlspecialchars($data);
      return $data;
    }

En caso de que se ingrese mal un datos, la página luciría de la siguiente manera:

Paso 5 – Manejo de Base de Datos con PHP

Por cuestiones de orden crearemos pondremos todo código relacionado al manejo de la base de datos en otra etiqueta <?php … ?>.

La conexión de PHP a la base de datos, en este caso MySQL, es muy sencilla, solo se necesita el servidor, usuario de la base de datos, contraseña y nombre de la base de datos. Este luciría de la siguiente manera.

<?php

//MANAGEMENT OF DATABASE

	$servername = "localhost:####"; //puerto utilizado por MySQL
	$username = "usuario";
	$password = "pwd";
	$dbname = "database";

	// Create connection
	$conn = new mysqli($servername, $username, $password, $dbname);
	// Check connection
	if ($conn->connect_error) {
		die("Connection failed: " . $conn->connect_error);
	} 

Para el registro de usuario se utilizaron tres tablas las cuales tienen los siguientes atributos:

Tabla de direcciones
Tabla de usuarios
Tabla de provincias

Para obtener las provincias disponibles en la base de datos y desplegarlos en el HTML se necesita dela siguiente función.

//GET PROVINCES FROM DATABASE
	function getProvinces(){
		global $conn;
		$sql = "SELECT * FROM Provincia";
		$result = $conn->query($sql);

		if ($result->num_rows > 0) {
			// output data of each row
			/*while($row = $result->fetch_assoc()) {
				echo "id: " . $row["nombre"]. "<br>";
			}*/
			return $result;
		} else {
			echo "0 results";
		}
		$conn->close();
	}

Para registrar un usuario en la base de datos necesitaremos primero ingresar su dirección utilizando la siguiente función.

//REGIST DIRECTION
function registerDirection($dir, $prov){
    global $conn;
    $call = $conn->prepare('CALL registerDirection(?, ?)');
    $call->bind_param('ss', $dir, $prov);
    $call->execute();  
}

Ahora que logramos ingresar la dirección del usuario, necesitamos obtener el identificador de la última dirección ingresada para asignársela al usuario a registrar.

//GET ID OF LAST INSERTED DIRECTION
	function getLastDirection(){
		global $conn;
		$sql = "CALL getLastDirection()";
		$stmt = $conn->prepare($sql); 
		$stmt->execute();
		$stmt->store_result();
		$stmt->bind_result($output_value);
		$stmt->fetch();
		$stmt->close();
		return $output_value;
	}

Finalmente utilizaremos la función que registra los usuarios en dicha base de datos.

	//ADDS NEW USER TO DATABASE
	function addUser($username, $mail, $pass, $usernick, $direction, $province, $birthday){
		registerDirection($direction, $province);
	    $address = getLastDirection();
		
		global $conn;
		$call = $conn->prepare('CALL registerUser(?, ?, ?, ?, ?, ?)');
		//echo 'Error: ' . $conn->error . "<BR />\n"; 
		$call->bind_param('ssssis', $username, $mail, $pass, $usernick, $address, $birthday);
		$call->execute();
		
	}
		

?>

¡Y LISTO! 🤩

El código completo del .php luce de la siguiente manera.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - Brand</title>
    <link rel="stylesheet" href="./loginRegistro/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <link rel="stylesheet" href="./loginRegistro/assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="./loginRegistro/assets/css/styles.min.css">
</head>

<?php

//MANAGEMENT OF DATABASE

	$servername = "localhost:####"; //puerto utilizado por MySQL
	$username = "usuario";
	$password = "pwd";
	$dbname = "database";

	// Create connection
	$conn = new mysqli($servername, $username, $password, $dbname);
	// Check connection
	if ($conn->connect_error) {
		die("Connection failed: " . $conn->connect_error);
	} 
	
	//GET PROVINCES FROM DATABASE
	function getProvinces(){
		global $conn;
		$sql = "SELECT * FROM Provincia";
		$result = $conn->query($sql);

		if ($result->num_rows > 0) {
			// output data of each row
			/*while($row = $result->fetch_assoc()) {
				echo "id: " . $row["nombre"]. "<br>";
			}*/
			return $result;
		} else {
			echo "0 results";
		}
		$conn->close();
	}
	
	//REGIST DIRECTION
	function registerDirection($dir, $prov){
		global $conn;
		$call = $conn->prepare('CALL registerDirection(?, ?)');
		$call->bind_param('ss', $dir, $prov);
		$call->execute();	
	}
	
	//GET ID OF LAST INSERTED DIRECTION
	function getLastDirection(){
		global $conn;
		$sql = "CALL getLastDirection()";
		$stmt = $conn->prepare($sql); 
		$stmt->execute();
		$stmt->store_result();
		$stmt->bind_result($output_value);
		$stmt->fetch();
		$stmt->close();
		return $output_value;
	}
	
	//ADDS NEW USER TO DATABASE
	function addUser($username, $mail, $pass, $usernick, $direction, $province, $birthday){
		registerDirection($direction, $province);
	    $address = getLastDirection();
		
		global $conn;
		$call = $conn->prepare('CALL registerUser(?, ?, ?, ?, ?, ?)');
		//echo 'Error: ' . $conn->error . "<BR />\n"; 
		$call->bind_param('ssssis', $username, $mail, $pass, $usernick, $address, $birthday);
		$call->execute();
		
	}
		

?>


<?php

//VALIDATE USER INPUT DATA

	// define variables and set to empty values
    $nameErr = $emailErr = $pwdErr = $nicknameErr = $provinceErr = $directionErr = $birthErr = "";
    $name = $email = $password = $nickname = $province = $direction = $birth = "";
	$withoutErr = true;

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if (empty($_POST["name"])) {
        $nameErr = "* Nombre requerido";
		$withoutErr = false;
      } else {
        $name = test_input($_POST["name"]);
        // check if name only contains letters and whitespace
        if (!preg_match("/^\pL+(?>[- ']\pL+)*$/u",$name)) {
          $nameErr = "* Solo se aceptan letras y espacios";
		  $withoutErr = false;
        }
      }
      
      if (empty($_POST["email"])) {
        $emailErr = "* Correo requerido";
		$withoutErr = false;
      } else {
        $email = test_input($_POST["email"]);
        // check if e-mail address is well-formed
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          $emailErr = "* Formato de correo inválido";
          $withoutErr = false;		  
        }
      }
	  
	  if (empty($_POST["password"])) {
        $pwdErr = "* Contraseñá requerida";
		$withoutErr = false;
      } else {
        $password = test_input($_POST["password"]);
      }
	  
	  if (empty($_POST["nickname"])) {
        $nicknameErr = "* Nickname requerido";
		$withoutErr = false;
      } else {
        $nickname = test_input($_POST["nickname"]);
      }
	  
	  if (empty($_POST["province"])) {
        $provinceErr = "* Provincia no selecionada";
		$withoutErr = false;
      } else {
        $province = test_input($_POST["province"]);
      }
	  
	  if (empty($_POST["direction"])) {
        $directionErr = "* Dirección requerida";
		$withoutErr = false;
      } else {
        $direction = test_input($_POST["direction"]);
      }
	  
	  if (empty($_POST["birth"])) {
        $birthErr = "* Fecha de nacimiento es requerido";
		$withoutErr = false;
      } else {
        $birth = test_input($_POST["birth"]);
      }
	  
	  if ($withoutErr === true){
		addUser($name, $email, $password, $nickname, $direction, $province, $birth); 
	  }
      
    }


    function test_input($data) {
      $data = trim($data);
      $data = stripslashes($data);
      $data = htmlspecialchars($data);
      return $data;
    }
	
?>
	
<body style="background-color:rgb(rgb(224,224,224));">

    <nav class="navbar navbar-light navbar-expand-lg fixed-top clean-navbar" style="background-color:#165f40;">
        <div class="container-fluid"><a class="navbar-brand logo" href="#" style="color:#ffffff;">Foresta<img class="rounded-circle img-fluid float-left" src="./images/logo.jpg" width="15%" height="100%"></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div
                class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav ml-auto" style="color:rgb(255,255,255);">
                    <li class="nav-item" role="presentation"><a class="nav-link" href="index.html" style="color:#fcfbfb;">Home</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="tutorial.html" style="color:#ffffff;">Tutoriales</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="ubicacionEmpresas.html" style="color:#ffffff;">Empresas asociadas</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="ubicacionPlantar.html" style="color:#ffffff;">Puntos de plantación</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="eventosRelacionados.html" style="color:#ffffff;">Eventos relacionados</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="canjearPuntos.html" style="color:#ffffff;">Canjear Puntos</a></li>
                    <li class="dropdown" style="color:rgb(255,255,255);"><a data-toggle="dropdown" aria-expanded="false" href="#" class="dropdown-toggle nav-link dropdown-toggle" style="color:#ffffff;">Registro</a>
                        <div role="menu" class="dropdown-menu dropdown-menu-left">
                            <a role="presentation" href="registro.html" class="dropdown-item">Cliente</a>
                            <a role="presentation" href="registroEmpresas.html" class="dropdown-item">Empresa</a>
                        </div>
                    </li>
                </ul>
        </div>
        </div>
    </nav>
	
    <main class="page registration-page" style="background-color:#040404;color:rgb(58,104,150);">
        <section class="clean-block clean-form dark" style="background-color:rgb(94,83,66);background-image:url("./loginRegistro/assets/img/cover-trees.jpg");">
            <div class="container" style="background-size:cover;">
                <div class="block-heading">
                    <h2 class="text-info text-light" style="color:rgb(241,241,241);text-shadow:-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;font-size:50px;">Registro</h2>
                </div>
				
				<form style="background-color:rgb(224,224,224);" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                    <div class="form-group"><label for="name" style="color:rgb(0,0,0);font-size:18px;">Nombre</label>
					<input class="form-control item" name="name" type="text"></div> <!--value="Jae Park"></div>-->
                    <span class="error" style="color:#FF0000;"> <?php echo $nameErr;?></span>
					
					<div class="form-group"><label for="email" style="color:rgb(0,0,0);font-size:18px;">Correo</label>
					<input class="form-control item" name="email" type="email"></div> <!--value="jaesix@gmail.com"></div>-->
                    <span class="error" style="color:#FF0000;"> <?php echo $emailErr;?></span>
                    
					<div class="form-group"><label for="password" style="color:rgb(0,0,0);font-size:18px;">Contraseña</label>
					<input class="form-control item" name="password" type="password"></div> <!--value="imdrum"></div>-->
                    <span class="error" style="color:#FF0000;"> <?php echo $pwdErr;?></span>
                    
					<div class="form-group"><label for="nickname" style="color:rgb(0,0,0);font-size:18px;">Nickname</label>
					<input class="form-control item" name="nickname" type="text"></div> <!--value="jaesix"></div>-->         
                    <span class="error" style="color:#FF0000;"> <?php echo $nicknameErr;?></span>
					
					<div class="form-group"><label for="province" style="color:rgb(0,0,0);font-size:18px;">Provincia</label>
					<select class="form-control" name='province' style="color:rgb(0,0,0);font-size:18px;" id="provincia">
						<?php
						$data = getProvinces();
						
						while($row = $data->fetch_assoc()) {
							echo "<option value=" . $row["idProvincia"] . ">" . (string)$row["nombre"] . "</option>";
						}
						?>
						<!-- <option value="2" name="province" selected="selected">ALAJUELA</option> -->
					</select>
                    <span class="error" style="color:#FF0000;"> <?php echo $provinceErr;?></span>
					
					</div>			
					
					<div class="form-group"><label for="direction" style="color:rgb(0,0,0);font-size:18px;">Dirección</label>
					<input class="form-control item" type="text" name="direction"></div> <!--value="Cerritos"></div>-->
                    <span class="error" style="color:#FF0000;"> <?php echo $directionErr;?></span>
                    
					<div class="form-group"><label for="birth" style="color:rgb(0,0,0);font-size:18px;">Fecha de nacimiento</label></div>
					<input class="form-control" type="date" name="birth" value="1992-09-15"><br>
                    <span class="error" style="color:#FF0000;"> <?php echo $birthErr;?></span>
					
					<button class="btn btn-primary btn-block" type="submit" style="background-color:rgb(98,152,103);font-size:18px;" value="Sing Up">Sing Up</button>
					<br>
				</form>
            </div>
        </section>
    </main>
	</form>
	
<?php
//TEST
	//registerDirection($direction, $province);
	//echo getLastDirection();
	//getProvinces();
	
	echo "<h1>RESULTADO</h1>";
	echo "Nombre: " . $name;
	echo "<br>";
	echo "Email: " . $email;
	echo "<br>";
	echo "Contraseña: " . $password;
	echo "<br>";
	echo "Nickname: " . $nickname;
	echo "<br>";
	echo "Provincia: " . $province;
	echo "<br>";
	echo "Direccion: " . $direction;
	echo "<br>";
	echo "Fecha de nacimiento: " . $birth;
	
?>
	
    <div class="footer-basic" style="background-color:#c6b9a6;">
        <footer>
            <div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
        </footer>
    </div>
    <script src="./loginRegistro/assets/js/jquery.min.js"></script>
    <script src="./loginRegistro/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./loginRegistro/assets/js/script.min.js"></script>
</body>

</html>

Ya se, ya se… ¿Cómo corremos el programa? Simplemente asegúrate de que el servidor de WAMP esté encendido, abre el navegador y escribe “localhost“.

Si todo se realizó de manera correcta, la parte inferior de la página debería de desplegar todos los datos ingresados y la base de datos debería de tener los datos registrados.

Pueden descargar todo el laboratorio en el siguiente enlace:

👉 LAB03👈

Hemos avanzado mucho juntos ^^ sigue así

¡HASTA AQUÍ TERMINA ESTA SESIÓN! ¡VUELVE PRONTO! 🤗


 

Referencias 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s