Desarrollo de software: Validación de formularios, guardar en base de datos, registro de usuarios, login y sesiones.

Por
Tutorial 1102

1102 Descargar XAMPP y Crear la base de datos en PHPMyAdmin
https://www.youtube.com/watch?v=0AVBzdU-PCY

1102 Tutorial 1 Registro e Inicio de Sesión Octubre 18

1102 Tutorial 2 Leer Base de Datos Octubre 18
https://www.youtube.com/watch?v=qrK9oOqegDA 

1102 Tutorial 3 Crear el formulario Octubre 23

1102 Tutorial 4 Guardar en la base de datos Octubre 26

1102 Tutorial 5 Guardar en la Base de Datos SIN formulario (Ajax) Octubre 27
https://www.youtube.com/watch?v=_w3IWC0V1kg


Se necesita crear un registro de nuevos usuarios y validar su ingreso a un portal web, se va a utilizar el correo electrónico para el acceso de los usuarios, por este motivo debe ser único. Para esta tarea se requiere crear una base de datos, validar los campos de los formularios y hacer control de la sesión de los usuarios al ingresar al portal web.

Archivos disponibles para descarga en el repositorio Manzanerista: 
https://github.com/ietmanzaneristas/1102_form_login_database
Clic en botón verde Clone or download y descargar el ZIP.

NOTA: Este mismo método puede ser utilizado en los proyectos de software que actualmente realizan para el técnico del Sena.

Herramientas:

1. Crear el sistema de archivos del proyecto y copiar los archivos descargados en las carpetas css y js:
 
📂formlogindb 
  📂conexion
    📄conexion.php 
  📂css 
    📄estilos.css
    📄flexboxgrid.css 
  📂img 
  📂inicio 
  📂js
    📄additional-methods.min.js 
    📄funciones.js 
    📄jquery.validate.min.js 
    📄jquery-3.4.1.min.js
    📄usuarios.js 
    📄validateES.js
  📂pag1
  📂usuarios
📄ajaxValidaLogin_usu.php 
📄index.php
📄logout.php 		 

2. Ahora se crea la base de datos:


Base de datos: lectorm Tabla: users
-- Base de datos: `lectorm`
-- Estructura de tabla para la tabla `users`
CREATE TABLE `users` (
`id_usu` int(11) NOT NULL,
`nombre_usu` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
`apellido_usu` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
`celular_usu` varchar(10) COLLATE utf8_spanish_ci DEFAULT NULL,
`fechaNac_usu` date NOT NULL,
`email_usu` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
`pass_usu` varchar(128) COLLATE utf8_spanish_ci NOT NULL,
`sede_usu` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
`curso_usu` varchar(10) CHARACTER SET utf8 COLLATE utf8_swedish_ci NOT NULL,
`nivel_usu` int(11) NOT NULL COMMENT '1 admin, 2 profesor, 3 alumno',
`ultimasesion_usu` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
`bloqueo_usu` tinyint(1) NOT NULL COMMENT '1 Activo, 0 Inactivo',
`foto_usu` varchar(50) COLLATE utf8_spanish_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
-- Indices de la tabla `users`
ALTER TABLE `users`
ADD PRIMARY KEY (`id_usu`),
ADD UNIQUE KEY `email_usu` (`email_usu`);
--
-- AUTO_INCREMENT de la tabla `users`
--
ALTER TABLE `users`
MODIFY `id_usu` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
view raw lectorm.sql hosted with ❤ by GitHub


3. En la carpeta de conexion, crear el archivo conxion.php y en la carpeta base del proyecto, crear el archivo index.php

Archivos: conexion/conexion.php e index.php
<?php
date_default_timezone_set('America/Bogota');
$con = new mysqli('localhost', 'root', '', 'lectorm');
view raw conexion.php hosted with ❤ by GitHub
<?php
include 'conexion/conexion.php';
if ($_GET) {
echo $_GET['msj'];
}
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Introducing Lollipop, a sweet new take on Android.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="img/favicon.ico" rel="icon" type="image/x-icon">
<title>LectorM Login</title>
<!-- Page styles -->
<link rel="stylesheet" href="css/flexboxgrid.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="row center-xs">
<h3 class="col-xs-10">Ejemplo inicio de sesión</h3>
<!-- ..::LOGIN::.. -->
<h2 class="col-xs-10">
Iniciar sesión
</h2>
<div class="col-xs-3"></div>
<!-- Formulario action="inicio/index.php"-->
<div class="col-xs-6 start-xs">
<form id="login-usu">
<label for="email_usu">Usuario:</label> <br>
<input type="email" id="email_usu" name="email_usu" placeholder="e-mail" autofocus>
<span class="user_error">Usuario invalido</span>
<br><br>
<label for="pass">Contraseña:</label> <br>
<input type="password" id="pass_usu" name="pass_usu">
<span class="pass_error">Contraseña invalida</span>
<br> <br>
<div class="myButton" id="entrarBtn">
Entrar
</div>
<br><br>
<div>
<a href="usuarios" class="nuevoUsuario">
Registrar nuevo usuario
</a>
</div>
</form>
</div>
<!-- END Formulario -->
<div class="col-xs-3"></div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/additional-methods.min.js"></script>
<script src="js/validateES.js"></script>
<script src="js/funciones.js"></script>
</body>
</html>
view raw index.php hosted with ❤ by GitHub


4. El archivo index.php utiliza el archivo funciones.js para validar la información digitada por el usuario:

archivo js/funciones.js
$(function () {
$('.user_error, .pass_error').hide();
// validar los campos de acceso
$("#login-usu").validate({
rules: {
email_usu: "required",
pass_usu: {
required: true,
minlength: 8
}
},
messages: {
pass_usu: {
required: "Debe ingresar una contraseña",
minlength: "Debe tener un minimo de 8 caracteres",
equalTo: "Las contraseñas no coinciden"
}
}
});
// verificar si los datos son correctos.
$('#entrarBtn').click(function () {
$('.user_error, .pass_error').hide();
if ($("#login-usu").valid()) {
$.ajax({
type: "POST",
url: 'ajaxValidaLogin_usu.php',
data: $("#login-usu").serialize(),
beforeSend: function () {
$('.pass_error').show().html('Validando el e-mail <div class="mdl-spinner mdl-js-spinner is-active"></div>');
}
}).done(function (data) {
$('.pass_error').html(data);
if (data === 'OK') {
window.open("pag1/index.php", "_self");
}
}).fail(function (jqXHR) {
$('.pass_error').html('Error!! ' + jqXHR.status);
});
} else {
return false;
}
});
});
view raw funciones.js hosted with ❤ by GitHub


5. Para validar el acceso el archivo funciones.js utiliza el archivo ajaxValidaLogin_usu.php 

Archivo ajaxValidaLogin_usu.php
<?php
include 'conexion/conexion.php';
session_start();
$email_usu = $con->real_escape_string($_POST['email_usu']);
$pass_usu = $con->real_escape_string($_POST['pass_usu']);
$pass_usu = sha1($pass_usu);
if (!filter_var($email_usu, FILTER_VALIDATE_EMAIL)) {
//El e-mail no cumple con el formato
// echo 'El e-mail no cumple con el formato';
exit();
}
$sel = $con->query("SELECT id_usu, email_usu, nombre_usu, apellido_usu, foto_usu FROM users WHERE email_usu = '$email_usu' AND pass_usu = '$pass_usu' ");
$row = mysqli_num_rows($sel);
$session = mysqli_fetch_assoc($sel);
// print_r('<br> resultado de la consulta ' . $row);
if ($row !== 0) {
//Resgistrar el ultimo acceso de la persona
$date = date("Y-m-d H:i:s");
$idu = $session['id_usu'];
$con->query("UPDATE `users` SET `ultimasesion_usu`= '$date' WHERE `id_usu` = '$idu'");
//creamos la sesion para el usuatio
$_SESSION['id_usu'] = $session['id_usu'];
$_SESSION['nombre_usu'] = $session['nombre_usu'];
$_SESSION['apellido_usu'] = $session['apellido_usu'];
$_SESSION['foto_usu'] = $session['foto_usu'];
echo "OK"; //"El e-mail y contraseña ya existe se puede ingresar";
} else {
echo 'Error en el usuario o contraseña';
}
$con->close();
view raw ajaxValidaLogin_usu.php hosted with ❤ by GitHub



Si el el usuario y/o contraseña son incorrectos envían un mensaje de error, en caso contrario crea la sesión del usuario y permite el acceso al resto del sitio web.

6. Para crear un nuevo usuario, en la carpeta usuarios se crea el archivo index.php

Archivo para crear el formulario de registro usuarios/index.php
<?php
// include '../conexion/conexion.php';
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Introducing Lollipop, a sweet new take on Android.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="../img/favicon.ico" rel="icon" type="image/x-icon">
<title>Nuevo Usuario</title>
<!-- Page styles -->
<link rel="stylesheet" href="../css/flexboxgrid.css">
<link rel="stylesheet" href="../css/estilos.css">
</head>
<body>
<!-- ..::CREAR USUARIO::.. -->
<div class="row center-xs">
<div class="col-xs-6"></div>
<h2 class="col-xs-10">
Crear nuevo usuario
</h2>
<!-- Simple Textfield -->
<div class="col-xs-6 start-xs">
<form action="ins_usuarios.php" method="POST" enctype="multipart/form-data" id="miForm1">
<label for="nombre_usu">Nombre:</label><br>
<input type="text" name="nombre_usu" id="nombre_usu" autofocus pattern="[A-Za-zÑñ/s ]+">
<br>
<label for="apellido_usu">Apellido:</label><br>
<input type="text" name="apellido_usu" id="apellido_usu" pattern="[A-Za-zÑñ/s ]+">
<br>
<label for="fechaNac_usu">Fecha de nacimiento:</label><br>
<input placeholder="fecha" type="date" name="fechaNac_usu" id="fechaNac_usu">
<br>
<label for="email_usu">e-mail:</label> <br>
<input type="email" name="email_usu" id="email_usu">
<span id="email_usuValida"></span>
<br>
<label for="celular_usu">Celuar:</label><br>
<input type="number" name="celular_usu" id="celular_usu">
<br>
<label for="pass_usu">Contraseña:</label><br>
<input type="password" id="pass_usu" name="pass_usu">
<br>
<label for="pass_usu2">Verificar contraseña:</label><br>
<input type="password" id="pass_usu2" name="pass_usu2">
<br>
<!-- The second value will be selected initially -->
<label for="sede_usu">Sede:</label><br>
<select name="sede_usu" id="sede_usu">
<option disabled selected value="0">Seleccione una Sede</option>
<option value="1">Central</option>
<option value="2">Ecuador</option>
<option value="3">Gaitan</option>
<option value="4">four</option>
</select>
<br>
<!-- The second value will be selected initially -->
<label class="mdl-textfield__label" for="curso_usu">Curso:</label><br>
<select name="curso_usu" id="curso_usu">
<option disabled selected value="0">Seleccione un curso</option>
<option value="1">601</option>
<option value="2">602</option>
<option value="3">603</option>
<option value="4">604</option>
</select>
<br>
<label for="foto_usu">Foto perfil:</label><br>
<input type="file" name="foto_usu" id="foto_usu" accept="image/*">
<br><br>
<!-- FAB button with ripple -->
<div id="next">
<button class="myButton">
Crear Usuario
</button>
</div>
<br>
</form>
</div>
<!-- <div class="col-xs-2"></div> -->
</div>
<!-- ..::FIN USUARIOS::.. -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script src="../js/additional-methods.min.js"></script>
<script src="../js/validateES.js"></script>
<script src="../js/usuarios.js"></script>
</body>
</html>
view raw index.php hosted with ❤ by GitHub

 
7. Para validar los datos del formulario se utiliza el archivo usuarios.js

 Archivo para validar el formulario js/usuraios.js
$(function () {
$('#email_usu').focusout(function () {
// console.log('Esta cambiando');
$.post('ajaxValidateEmail_usu.php', {
email_usu: $(this).val(),
beforeSend: function () {
$('#email_usuValida').html('Validando el e-mail <div class="mdl-spinner mdl-js-spinner is-active"></div>');
}
},
function (respuesta) {
$('#email_usuValida').html(respuesta);
if (respuesta.length > 0) {
$('#email_usu').focus();
}
});
});
$("#miForm1").validate({
rules: {
nombre_usu: "required",
apellido_usu: "required",
fechaNac_usu: "required",
email_usu: "required",
sede_usu: "required",
curso_usu: "required",
foto_usu: "required",
pass_usu: {
required: true,
minlength: 8,
equalTo: "#pass_usu2"
},
pass_usu2: {
required: true,
minlength: 8,
equalTo: "#pass_usu"
}
},
messages: {
nombre_usu: {
required: "Debe ingresar un nombre",
pattern: "Formato inválido"
},
apellido_usu: {
required: "Debe ingresar un apellido",
pattern: "Formato inválido"
},
pass_usu: {
required: "Debe ingresar una contraseña",
minlength: "Debe tener un minimo de 8 caracteres",
equalTo: "Las contraseñas no coinciden"
},
foto_usu: {
required: "Debe tomar una foto o subir una imagen",
accept: "Debe tomar una foto o subir una imagen"
},
pass_usu2: {
required: "Debe ingresar una contraseña",
minlength: "Debe tener un minimo de 8 caracteres",
equalTo: "Las contraseñas no coinciden"
}
}
});
});
view raw usuarios.js hosted with ❤ by GitHub

 
8. Como en los requerimientos se solicita que el acceso de los usuarios se debe realizar por medio del correo electrónico, se debe verificar que otra persona no esté registrada con ese mismo correo electrónico. Para esta tarea el archivo js/usuarios.js utiliza el archivo ajaxValidateEmail_usu.php y genera un mensaje de error si el correo ya existe.

Archivo usuarios/ajaxValidateEmail_usu.php para verificar si un correo ya se encuentra registrado en la base de datos.
<?php
include '../conexion/conexion.php';
$email_usu = $con->real_escape_string($_POST['email_usu']);
if (!filter_var($email_usu, FILTER_VALIDATE_EMAIL)) {
//El e-mail no cumple con el formato
//echo 'El e-mail no cumple con el formato';
exit();
}
$sel = $con->query("SELECT email_usu FROM users WHERE email_usu = '$email_usu' ");
$row = mysqli_num_rows($sel);
if ($row !== 0) {
echo "<span>El e-mail ya existe</span>";
} else {
// echo 'el usuario esta disponible';
}
$con->close();
view raw ajaxValidateEmail_usu.php hosted with ❤ by GitHub


9. Una ves se completa el registro del usuario, el archivo ins_usuarios.php registra (INSERT) en la base de datos el nuevo usuario.

El archivo usuarios/ins_usuarios.php procesa la información del formulario.
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
include '../conexion/conexion.php';
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$nombre_usu = $con->real_escape_string(htmlentities($_POST['nombre_usu']));
$apellido_usu = $con->real_escape_string(htmlentities($_POST['apellido_usu']));
$fechaNac_usu = $con->real_escape_string(htmlentities($_POST['fechaNac_usu']));
$email_usu = $con->real_escape_string(htmlentities($_POST['email_usu']));
$celular_usu = $con->real_escape_string(htmlentities($_POST['celular_usu']));
$pass_usu = $con->real_escape_string(htmlentities($_POST['pass_usu']));
$pass_usu = sha1($pass_usu);
$sede_usu = $con->real_escape_string(htmlentities($_POST['sede_usu']));
$curso_usu = $con->real_escape_string(htmlentities($_POST['curso_usu']));
// Procesamos la $foto_usu
$extension = '';
$ruta = 'fotoPerfil';
$archivo = $_FILES['foto_usu']['tmp_name'];
$nombreArchivo = $_FILES['foto_usu']['name'];
$info = pathinfo($nombreArchivo);
if ($archivo != '') {
$extension = $info['extension'];
$find = array("@", ".", " ");
$onlyName = str_replace($find, "", $email_usu);
move_uploaded_file($archivo, 'fotoPerfil/' . $onlyName . '.' . $extension);
$ruta = $ruta . "/" . $onlyName . '.' . $extension;
// echo $ruta;
} else {
$ruta = "fotoPerfil/perfil.png";
}
$date = date("Y-m-d H:i:s");
// (`id_usu`, `nombre_usu`, `apellido_usu`, `celular_usu`, `fechaNac_usu`, `email_usu`, `pass_usu`, `sede_usu`, `curso_usu`, `nivel_usu`, `ultimasesion_usu`, `bloqueo_usu`, `foto_usu`) VALUES (NULL, 'a', 'a', '1', '2019-07-01', 'a@a.com', '12345678', 'a', 'a', '2', '2019-07-21 00:00:00', '0', 'fotoPerfil/charlesrctgmailcom.jpg');");
$ins = $con->query("INSERT INTO `users` VALUES('', '$nombre_usu', '$apellido_usu', '$celular_usu', '$fechaNac_usu', '$email_usu', '$pass_usu', '$sede_usu', '$curso_usu', '2', '$date', '1', '$ruta')");
// print_r($ins);
if ($ins) {
// echo "New record created successfully";
header('location:../index.php?msj=El usuario ha sido registrado.<br>');
} else {
// echo "Error: " . $ins . "<br>" . mysqli_error($con);
header('location:../usuarios/index.php?msj=El usuario no pudo ser registrado.<br>');
}
$con->close();
} else {
header('location:../usuarios/index.php?msj=Utiliza el formulario.<br>');
}
view raw ins_usuarios.php hosted with ❤ by GitHub


10. En el paso 5, línea 25 a 29 del archivo  ajaxValidaLogin_usu.php se creó una sesión de usuario. Es importante verificar en todas las páginas que este es un usuario registrado, de lo contrario se debe redirigir a la página inicial del portal para que escriba su usuario y contraseña. Al terminar de navegar se debe cerrar la sesion.


Archivos pag1/index.php y logout.php
<?php
session_start();
if (!isset($_SESSION['id_usu'])) {
header("Location:../index.php?msj=Debe ser un usuario registrado.<br>");
} else {
echo 'Bienvenido ' . $_SESSION['nombre_usu'];
}
?>
<h1> Empezamos a navegar </h1>
<button id="cerrar" onclick="cerrar()">Cerrar sesion</button>
<script>
function cerrar() {
window.open("../logout.php", "_self");
}
</script>
view raw index.php hosted with ❤ by GitHub
<?php
session_start();
session_destroy();
header("Location:index.php");
view raw logout.php hosted with ❤ by GitHub

Charles Richard Torres Moreno
Ing. Electrónico Mg. Ingeniería Software
Docente IET Francisco Manzanera Henríquez


Comentarios

Publicar un comentario

Entradas más populares de este blog

LectorM

Por
Imagen
Software educativo adaptando el método de “Presentación Visual Serial Rápida” para analizar la velocidad y comprensión lectora de los alumnos de grado sexto en la IET Francisco Manzanera Henríquez de la ciudad de Girardot. Archivos disponibles para descarga en el repositorio Manzanerista:   https://github.com/ietmanzaneristas/lectorm Clic en botón verde Clone or download y descargar el ZIP. Introducción En la Institución Educativa Francisco Manzanera Henríquez, se proponen metas institucionales comprendidas entre el periodo 2018 a 2022, orientadas al mejoramiento continuo y actualización de los procesos educativos, como la disminución de la deserción y mortalidad académica, fomentar el trabajo en equipo, actualización del Proyecto Educativo Institucional y métodos para aumentar el nivel académico en pruebas de estado. Una de estas metas institucionales, apunta al fortalecimiento en los procesos de lectura:  “Mejorar y evidenciar procesos de lectura cada año por ...
Leer más

..::GitHub Repositorio de proyectos::.. IET Francisco Manzanera Henrrìquez

Por
Imagen
Git es una herramienta de control de versiones, creada por Linus Torvalds para la comunidad que desarrollaba el núcleo de Linux. Un sistema de control de versiones sirve para registrar los cambios que se realizan en un archivo, con el fin de poder recuperar versiones anteriores, comparar el avance a través del tiempo o integrar las diferentes partes desarrolladas por los integrantes del proyecto. Este sistema se utiliza principalmente para proyectos de código en cualquier lenguaje de programación, pero se puede aplicar a cualquier archivo que se maneje en una computadora, por ejemplo si se es diseñador gráfico, desarrollador web, escritor o se trabaja en una tesis de grado, resulta muy útil tener control de versiones por si se sufre una pérdida o daño y se necesita recuperar la información de los archivos perdidos. Para empezar a utilizar Git se debe descargar e instalar desde la siguiente página web: https://git-scm.com/downloads Después de instalar Git, se puede a utilizar el...
Leer más