SERVICIO NACIONAL DE APRENDIZAJE SENA SISTEMA …...SERVICIO NACIONAL DE APRENDIZAJE SENA SISTEMA INTEGRADO DE GESTIÓN Procedimiento Ejecución de la Formación Profesional Integral

SERVICIO NACIONAL DE APRENDIZAJE SENA SISTEMA INTEGRADO DE GESTIÓN

Procedimiento Ejecución de la Formación Profesional Integral

Versión: 02

Código: GFPI-F-019

Elaborado por:

Instructor Stived Osorio 2020

Capitulo 7 (inicio de sesion – Backend) lenguaje de programacion

PHP.

Introducción

En esta sesión de aprendizaje vamos a realizar un inicio de sesión, cabe recalcar que estaremos

entrando también un poco a MVC (Modelo – Vista - Controlador) pero de forma más fácil y rápida.

A lo largo de este paso a paso, veremos cómo se utilizan varias cosas, como por ejemplo hacer

COMPETENCIA

Construir El Sistema Que Cumpla Con Los Requisitos De La Solución Informática.

Fase 3

HACER

90 Horas

BLACKBOARD CON RUTA

Guía de Aprendizaje: Aplicación Matriz CRUD

(Técnico)Construir la matriz CRUD en el lenguaje de programación seleccionado para verificar la funcionalidad del sistema de acuerdo con el diseño entregado.

(Transversal) Desarrollar Procesos Comunicativos Eficaces Y Asertivos Dentro De Criterios De Racionalidad Que Posibiliten La Convivencia, El Establecimiento De Acuerdos, La Construcción Colectiva Del Conocimiento Y La Resolución De Problemas De Carácter Productivo Y Social.



Versión: 02

Código: GFPI-F-019

Elaborado por:


consultas desde PHP y traer datos, validarlos, etc.

OBJETIVO

Construir un proyecto web con usando el lenguaje php, para programar un formulario de inicio de

sesión, la conexión a una base de datos, la validación de los datos, y el comportamiento del

programa dependiendo de los datos validados.

Entremos en materia e iniciemos:

EXPLICACION:

Previo a todo debemos tener en cuenta (LA CAPA MODELO) de la arquitectura MVC, tenga en

cuenta que esta capa la compone la” base de datos”, como su primera característica es el nombre

de la base de datos, por eso para este ejemplo vamos a llamar (Proyecto), como segunda

característica seria la “tabla”, para este ejemplo la llamaremos “usuarios”, como tercera

característica debe de contener los “campos” , y por ultimo debe de tener la llave primaria (A_I),

será la cuarta característica, todo lo explicado va en la capa “modelo”.



Versión: 02

Código: GFPI-F-019

Elaborado por:


Ahora después de explicar el procedimiento empecemos con la Base De Datos:

1 Paso construyamos la Base De Datos, Ingresemos a “localhost/phpmyadmin” en su navegador y

construyamos la “Base De Datos” llamado “proyecto”:

En ella una “tabla” que se llama “usuarios” con los “campos” ( idusuario, usuario, password y perfil),

este debe de tener el siguiente aspecto:

Nota: tenga en cuenta que el campo “idusuario” sera la clave primaria de la tabla y tambien esta

activado el “A_I” auto incremento.

Ten presente los “campos” del formulario de “inicio de sesión”, ya que se necesitarán para hacer la

“conexión.php” y la “validación.php” como esta en la imagen a continuación:



Versión: 02

Código: GFPI-F-019

Elaborado por:


ACTIVIDAD EXPLORATORIA 8

Ingrese al siguiente enlace y realice un Mapa de sol con las ideas principales del video.

https://www.youtube.com/watch?v=A1suLE0B2VA

Paso 2 contruyendo la conexión en PHP Para conectar a la base de

datos (no pertenece ni a controlador ni a modelo)

Este archivo tiene como funcion principal es llevar la consulta a la base de datos (SQL)

construido en el controlador (validar.php) y este tambien devuelve informacion al

(controlador) (VALIDAR.PHP) (SQL).

VAMO A PROCEDER

Vamos a crear tres archivos estos archivos se van a guardar en la carpeta “controlador” ahí

crearemos una carpeta nueva llamada “validar”, y dentro de la carpeta “validar” y ahí guardaremos

los archivos “validar.php, “conexion.php”, “logout.php”.

Vamos a organizar el archivo “conexion.php” para esto debemos tener los archivos en sublime,

Abrimos los archivos en sublime y en “conexion.php” copiemos el siguiente codigo:

https://www.youtube.com/watch?v=A1suLE0B2VA



Versión: 02

Código: GFPI-F-019

Elaborado por:


<?php

$host="localhost";

$user="root";

$password="";

$db="proyecto";

$con = new mysqli($host,$user,$password,$db);?>

En sublime tendra la siguiente aparencia

Este archivo no tienes que mirarlo en el navegador, por que este es un archivo que no esta

disponible para el usuario.

Explicacion: Éste archivo se va a encargar de crear la conexión a la base de datos, con los siguientes parámetros:



Versión: 02

Código: GFPI-F-019

Elaborado por:


“localhost”= equipo servidor donde

está guardada la base de datos

“root”= usuario (del motor de base de

datos MySQL)

“ ” contraseña= comillas vacías ya

que no hay contraseña definida

“proyecto”= nombre de la base de

datos

$con= El tipo de conexión que tendra el proyecto en este caso es (Mysqli) conexión tradicional.


Investigar en que consiste la conexión PDO a base de datos y explique su funcionamiento

aplicandolo en su proyecto.

3 Paso construccion del controlador en PHP llamado “validar.php”.

Este archivo nos servira para que reciba los datos enviados desde el formulario (vista) y tambien

nos ayudara a enviar la informacion a la base de datos, lo llamaremos (TRADUCTOR).

Luego, seguimos modificando al “validar.php” copie y analice el siguiente codigo :

<?php

session_start();

include_once "conexion.php";

//Recibo los datos del formulario de inicio de sesion

$nom = $_POST['user'];

$pwd = $_POST['password'];

//conecto a BD para realizar la consulta

$sql="SELECT * from usuarios where usuario='$nom' and



Versión: 02

Código: GFPI-F-019

Elaborado por:


password='$pwd'";

$rec=$con->query($sql);//rec es un objeto de tipo con

$count=0;

while($row = $rec->fetch_array())

{

$count++;

$result = $row;

}

//reviso si hay registros que coincidan con los datos ingresados, si no hay envia un mensaje

de error

if($count == 0){

echo "<script>

alert('Nombre de Usuario o Contraseña Incorrecto,

verifique...');window.location='../../index.php';

</script>";

session_destroy();

}

else { //si el registro es valido, verifico si es admin o user

if($result[3] == 'a'){

echo

"<script>window.location='../../vista/menuadmin/menuadmin.php';</script>";

} else{echo

"<script>window.location='../../vista/menuser/menuser.php';</script>";

} }



Versión: 02

Código: GFPI-F-019

Elaborado por:


?>

En sublime tiene el siguiente aspecto:

Este archivo NO tienes que mirarlo en el navegador por que este es un archivo que no esta

disponible para el usuario.

Vamos a explicar el funcionamiento de “validar.php”

Estos datos (USUARIO Y CONTRASEÑA) son enviados desde el formulario de inicio de sesión (vista)

capitulo 6, ósea, “(ingreso.php)” (vista) con el usuario y contraseña del humano al archivo

“validar.php” (controlador) para que sean procesados, se encarga de:

1. Recibir los datos (usuario y contraseña) del campo “name”, Con ayuda de la función

“$_POST[''];”



Versión: 02

Código: GFPI-F-019

Elaborado por:



Para Profundizar en tema de envió y recibir datos de un formulario te dejo este video:

https://www.youtube.com/watch?v=oP8AUuV-6PM

PANTALLAZO DE SUBLIME CON EL CODIGO PANTALLAZO DEL NAVEGADOR (humano)

2. cuando los captura el archivo “validar.php” (controlador), este los guarda en variables

$nom y $pwd que viene del campo de texto llamado “name” del formulario como lo

muestra la imagen:

3 luego, “validar.php” construye la consulta SQL (query) este es el paso donde el

(controlador) traduce de datos “letras” a “lenguaje SQL” y los envía a través de la

(conexión.php) al (modelo), ósea a la base de datos “Proyecto”, y allí se COMPARA el

“campo” USUARIO con la variable $nom y el “campo” CONTRASEÑA con la variable $pwd

de “validar.php”, entonces hay dos respuestas si existe en la BD o no, como muestra la

imagen a continuación:


Analiza el siguiente video y aplica la siguiente tabla

https://www.youtube.com/watch?v=i1x8z5K3xpE

POSITIVO NEGATIVO INTERESANTE

https://www.youtube.com/watch?v=oP8AUuV-6PM

https://www.youtube.com/watch?v=i1x8z5K3xpE



Versión: 02

Código: GFPI-F-019

Elaborado por:


4 Paso Existen tres posibilidades:

a) Que el usuario con la contraseña que ingreso el HUMANO NO exista en la Base De Datos,

entonces “validar.php” le enviara un mensaje de error al usuario (al humano) a través de

la (vista) y termina la sesión, como muestra la siguiente imagen:

En el navegador se ve de la siguiente forma

B) Que el “usuario” y “contraseña” ingresado por el humano, a través del formulario, SI existan en

la BD, entonces “validar.php” le enviara un menú al usuario (al humano) a través de la (vista)

Dependiendo del perfil del cliente.

NOTA: el archivo “validar.php” vuelve y realiza la traducción de SQL A DATOS para que el HUMANO

como respuesta, la cual contendrá el tipo de usuario (a = “administrador” o si es u= “usuario”)

como muestra la siguiente imagen:



Versión: 02

Código: GFPI-F-019

Elaborado por:


5 Paso Dependiendo del Perfil de usuario, se va a abrir la página para el menú de opciones del

“administrador” o la del “usuario”. Todo esto en la capa (vista).

Por ultimo modificaremos “logout.php” copie el siguiente codigo

<?php

session_start();

session_destroy();

header('location: index.php');

?>

Este archivo no tienes que mirarlo en el navegador por que este es un archivo que no esta disponible

para el usuario (humano).

NOTA1: los archivos “logout.php”, “conexión.php”, “validar.php” son archivos que son para el

programador.

Ahora nos vamos al “formulario del inicio de sesion” que tenemos en el “ingreso.php” y

modificaremos los campos del formulario para poder enviar la informacion que ingresa el usuario y

que valide los datos en la base de datos y nos devuelva una respuesta ( si es administrador o

usuario).



Versión: 02

Código: GFPI-F-019

Elaborado por:


Capitulo 8 (MODIFICACION DEL ingreso.php-formulario del

capitulo 6 QUE USTED CONSTRUYO )

(Recordatorio) La etiqueta de los formularios es <form> y su cierre </form>, Todo lo que vaya

dentro de estas etiquetas, serán partes del formulario. (Este recordatorio será del capítulo 6)

En el formulario debemos tener en cuenta los atributos del mismo en este caso debemos revisar si

el “action”, (recordatorio) El atributo “action” indica el tipo de acción que va a realizar el

formulario. Mediante esta etiqueta que se gestionan los formularios. si esta apuntando a la

“validar.php” recordemos que la creamos en la carpeta “controlador, validar” como muestra la

imagen:

(Recordatorio) Método POST y GET Facilita a los formularios en envío de datos escritos en él,

en los campos de texto que el usuario escribe en datos o letras en ellos


https://www.youtube.com/watch?v=oP8AUuV-

6PM&list=PLLniqWgyb4HHjgr9iFg03MDa2lvLkywRQ&index=5

Construya DOS ejemplos UNO con método “post” y otro con método “get” donde se pueda verificar

lo aprendido en el enlace y termine el siguiente cuadro

https://www.youtube.com/watch?v=oP8AUuV-

6PM&list=PLLniqWgyb4HHjgr9iFg03MDa2lvLkywRQ&index=5

CAPTURA DE PANTALLA DEL SUBLIME

CAPTURA DE PANTALLA DEL NAVEGADOR

https://www.youtube.com/watch?v=oP8AUuV-6PM&list=PLLniqWgyb4HHjgr9iFg03MDa2lvLkywRQ&index=5






Versión: 02

Código: GFPI-F-019

Elaborado por:


Ahora los campos de textos del formulario, tengamos en cuenta el codigo del formulario creado en

el “capitulo 6” de este paso a paso, para ello recordaremos que es un <input> dentro de un <form>:

El elemento “input”, teniendo el valor "text" en su atributo “type y el name”, representa a un

campo de entrada de texto. El control asociado a este campo es una “caja de texto” que permite a

los usuarios editar una sola línea de texto regular. Los controles de texto son útiles para recolectar

líneas cortas de texto como títulos, nombres, apellidos, descripciones cortas, palabras clave,

etiquetas, etc.

Como actividad exploratoria vamos a consultar los siguientes atributos de la

etiqueta <input> y completaremos la siguiete tabla propuesta:

Atributos de <INPUT> Codigo en editor de texto Resultado en el navegador

AUTOCOMPLETE AUTOFOCUS DIRNAME DISABLED LIST MAXLENGTH MINLENGTH NAME PATTERN PLACEHOLDER READONLY REQUIRED SIZE TYPE VALUE



Versión: 02

Código: GFPI-F-019

Elaborado por:


Luego de completar la tabla, nos concentraremos en nuestro ejercicio de “inicio de sesion”.

En el archivo “ingreso.php” creado en el “capitulo 6” debemos buscar en sublime los campos de

texto <input> este campo es donde el humano escribe su usuario y debemos de verificar el “type”

que sea “texto” y el “name”para este caso se llamara “USER” para que el formulario lo pueda enviar

a “validar.php”, lo recibe con la funcion (“$_POST['']”)

2. En el archivo “ingreso.php” creado en el “capitulo 6” debemos buscar en sublime los campos de

password<input>, este campo tiene un “type” que sea “password” y el “name” para este caso sea

“password” para que el formulario lo pueda enviar a “validar.php”, lo recibe con la funcion

(“$_POST['']”), este campo se distingue por que NO se puede leer tu solo ves puntos negros en la

caja de texto.

Y por ultimo debemos mirar si el botón tiene su atributos en “type” “submit” y el “value” es el titulo

del boton que oprimira el usuario

Ahora vamos a modificar todo el formulario en los campos descriptos en la explicación

En sublime debe de quedar el siguiente aspecto:



Versión: 02

Código: GFPI-F-019

Elaborado por:


Ahora, ejecutamos el navegador en el menú “INGRESO” te debe de aparecer el inicio de sesión de

la siguiente manera

Cuando ingresemos un “usuario” y una “contraseña” que no sea válidos saldrá el siguiente mensaje

y se quedara en la página “index.php”.



Versión: 02

Código: GFPI-F-019

Elaborado por:


Nota2: Ahora crearemos dos archivos menuadmin.php, menuser.php en la carpeta “vista” estos

archivos nos servirán para el usuario identificar el perfil del usuario que ingreso al sistema de

información.

Para esto debemos crear la carpeta “menuadmin” dentro del “vista” y entramos a sublime creando

un archivo llamado “menuadmin.php” .

Si el usuario es de perfil de “a” este formulario validara la información y te devolverá una página

que dice “Este es el menú del administrador y debo de hacer un menú para terminar el capítulo

8” y tiene el siguiente aspecto en sublime.

Luego validamos el administrador en el navegador y te mostrara el mensaje

Para esto debemos crear la carpeta “menuser” dentro del “vista” y entramos a sublime creando un

archivo llamado “menuser.php” este es el aspecto que debe de tener



Versión: 02

Código: GFPI-F-019

Elaborado por:


Si el usuario es de perfil de “u” este formulario validara la información y te devolverá una página

que dice “Este es el menú del usuario y debo de hacer un menú para terminar el capítulo 8” y tiene

el siguiente aspecto en sublime.

Luego validamos el usuario en el navegador y te mostrara el mensaje.


Para implementar un inicio de sesión completo debes de analizar el siguiente video o realice el

curso propuesto por su instructor

https://www.youtube.com/watch?v=NRB7Eppn8kc&list=PLLniqWgyb4HHjgr9iFg03MDa2lvLkywRQ

&index=10

FIN DEL INICIO DE SESION (BACKEND)

Realice 5 conclusiones donde se especifique su aprendizaje (Deje Evidencia Participando En El Foro

Propuesto Por Su Instructor).

https://www.youtube.com/watch?v=NRB7Eppn8kc&list=PLLniqWgyb4HHjgr9iFg03MDa2lvLkywRQ&index=10

https://www.youtube.com/watch?v=NRB7Eppn8kc&list=PLLniqWgyb4HHjgr9iFg03MDa2lvLkywRQ&index=10



Versión: 02

Código: GFPI-F-019

Elaborado por:


Capítulo 9: CONSTRUCCION DE LOS MENUS, SEGÚN SU PERFIL.

Vamos a construir desde cero un “MAESTRO CON PERFIL

ADMINISTRADOR.”

(Recordatorio) el capítulo 8 nos explicó como válida los datos y nos devuelve un menú

administrador “maestro”. En caso de no haber realizado el paso a paso, le sugerimos no

continuar el paso a paso.

NOTA: Recuerde que todos los archivos que se van a crear deben hacerse desde sublime los

resultados en el NAVEGADOR ¡ÉXTIOS!

1 PASO Vamos a crear la estructura “HTML” en el archivo “menuadmin.php”, se encuentra en

la carpeta “vista”, como muestra la siguiente imagen:



Versión: 02

Código: GFPI-F-019

Elaborado por:


Lo primero sería “copiar” y “pegar” el siguiente código en sublime:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="css/superslides.css">

<link rel="stylesheet" href="css/estilos.css">

</head>

<body>

<div class="siderbar">

<h2>menu</h2>

<ul>

<li><a href="">Registra Taxi</a></li>

<li><a href="">Registra usuario</a></li>

<li><a href="">Carrito de compras</a></li>

<li><a href="">contactenos</a></li>

</ul>

</div>

</div>



Versión: 02

Código: GFPI-F-019

Elaborado por:


<div class="contenido">

<div id="slides" >

<ul class="slides-container">

<li>

<img src="img/1.jpg" alt="">

<span class="menu-bar" style="font-size: 50px; margin: 15px 20px; color: white ;

">=</span>

<div class="description">

<h2 class="description-title">Maestro administrador</h2>

<p class="description-text"> </p>

</div>

</li>

<li>


<span class="menu-bar" style="font-size: 50px; margin: 15px 20px; color:

white">=</span>


<h2 class="description-title">TITULO 1</h2>

<p class="description-text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Similique ipsa ducimus quidem asperiores ratione explicabo neque quod fuga, eos soluta saepe

voluptatum corrupti dignissimos facere, repudiandae rem iure doloribus rerum.</p>

</div>

</li>

<li>



Versión: 02

Código: GFPI-F-019

Elaborado por:



<span class="menu-bar" style="font-size: 50px; margin: 15px 20px; color: white

">=</span>



<p class="description-text">

</p>

</div>

</li>

<li>


<span class="menu-bar" style="font-size: 50px; margin: 15px 20px;color: greenyellow

"></span>



<p class="description-text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Similique ipsa ducimus quidem asperiores ratione explicabo neque quod fuga, eos soluta saepe

voluptatum corrupti dignissimos facere, repudiandae rem iure doloribus rerum.</p>

</div>

</li>

</ul>

<nav class="slides-navigation">

<a href="#" class="next">></a>

<a href="#" class="prev"><</a>



Versión: 02

Código: GFPI-F-019

Elaborado por:


</nav>

</div>

<script src="js/jquery.js"></script>

<script src="js/jquery.superslides.js"></script>

<script src="js/main.js"></script>

</body>

</html>

Así se debe ver en Sublime:



Versión: 02

Código: GFPI-F-019

Elaborado por:


Así se debe ver al ejecutarlo en el “navegador” después de anexarle la última parte del código:



Versión: 02

Código: GFPI-F-019

Elaborado por:


2 PASO Ahora, debemos descarga la carpeta que te proporcionara la plataforma BLACKBOARD

llamada “hojas de estilo.zip” Y descomprima los archivos dentro de la carpeta “menuadmin” como

se ve en la imagen. Estos archivos nos servirán para ponerle estilo a nuestro “MENU

ADMINISTRADOR”.



Versión: 02

Código: GFPI-F-019

Elaborado por:


3 PASO

Para finalizar este ejemplo es solo para ambientar el ejercicio, usted amigo aprendiz puede organizar

sus maestros como lo prefiera, este será el resultado final de este ejercicio


Busque y construya el “Maestro Usuario” con una plantilla de internet e implementarla en su

proyecto.

Documents

SERVICIO NACIONAL DE APRENDIZAJE SENA SISTEMA …...SERVICIO NACIONAL DE APRENDIZAJE SENA SISTEMA INTEGRADO DE GESTIÓN Procedimiento Ejecución de la Formación Profesional Integral