PHP / Vistas administrativas

Bienvenidos sean a este post, hoy crearemos algunas de las vistas que hemos mencionado en el post anterior.

Nuestra primera modificacion sera en el directorio Views donde crearemos un nuevo directorio llamado admin, dentro de este directorio crearemos un nuevo archivo que llamaremos index.php, una vez creado todo agregaremos el siguiente codigo en este archivo:

index.php

<?php
include(APPDIR . 'Views/layouts/header.php');
include(APPDIR . 'Views/layouts/nav.php');
include(APPDIR . 'Views/layouts/errores.php');
?>

<h1>Dashboard</h1>
<p>Este es el dashboard de la aplicacion</p>

<?php include(APPDIR . 'Views/layouts/footer.php'); ?>

Este no sera otro que nuestro dashboard, observen como usamos los layouts que creamos en este post, le agregamos un texto representativo y por ultimo el cierre, en este caso utilizamos a nav.php dado que va a ser necesario para poder ingresar o salir, nuestro siguiente paso sera crear la pagina de ingreso, pero primero debemos crear un nuevo directorio dentro de admin llamado auth, una vez hecho crearemos un nuevo archivo llamado login.php al cual le agregaremos el siguiente codigo:

login.php

<?php 

include(APPDIR . 'Views/layouts/header.php');?>

<div class="wrapper well">

    <?php include(APPDIR . 'Views/layouts/errores.php');?>

    <form action="/admin/login" method="post">

    <h1>Ingreso</h1>

    <div class="control-group">
        <label class="control-label" for="usuario"> Usuario</label>
        <input class="form-control" id="usuario" type="text" name="usuario" />
    </div>

    <div class="control-group">
        <label class="control-label" for="clave"> Clave</label>
        <input class="form-control" id="clave" type="password" name="clave" />
    </div>

    <br>

    <p class="pull-left"><button type="submit" class="btn btn-sm btn-success" name="submit">Ingreso</button></p>
    <p class="pull-right"><a href="/admin/reset">Olvide la clave</a></p>

    <div class="clearfix"></div>

    </form>

</div>

<?php include(APPDIR.'Views/layouts/footer.php');?>

En esta pagina no solo incluiremos los archivos de layout sino tambien agregaremos un form donde tendremos los campos para que podamos pasar el usuario y la clave, si observan que en action pasamos una accion de URL donde pasamos al metodo de login que vimos en el post anterior, si se preguntan por las class que usamos para los div y otros elementos son parte del bootstrap que nos permiten ubicar de la mejor forma a los elementos de este formulario, por ultimo vamos a nuestro directorio webroot y crearemos un nuevo directorio llamado css, dentro de este directorio crearemos un nuevo archivo que llamaremos style.css y le agregaremos el siguiente codigo:

style.css

.wrapper {
    max-width: 420px;
    margin: auto;
}

.wrapper h1 {
    margin-top: 0px;
    font-size: 25px;
}

Como pueden ver esto es para darle un poco de estilo a un par de elementos de nuestra pagina, con esto podemos iniciar nuestro servidor de la siguiente forma:

$ php -S localhost:8000 -t webroot

Nota:
Recuerden que siempre se debe ejecutar desde la raiz del proyecto

Y podemos pasar a abrir la siguiente URL en cualquier navegador:

http://localhost:8000/admin/login

Y si todo salio bien nos debera devolver una pantalla como la siguiente

Si lograron esto, Felicitaciones!!! Porque ya dieron un paso muy importante pero todavia no funciona porque hagan lo que hagan siempre nos devolvera que el usuario y/o contraseña son incorrectas, esto es por el simple hecho de que no tenemos ningun usuario en la tabla, para solucionar esto vamos a agregar un nuevo usuario con los siguientes datos:

• Usuario: usuario
• Contraseña: clave

Nuestro siguiente paso sera agregar ir a la clase admin.php y en el metodo login agregaremos la siguiente linea al comienzo de este metodo:

echo password_hash('clave', PASSWORD_BCRYPT);

Esta nos mostrara el valor hash de la «contraseña» de nuestro usuario, esto debemos hacerlo asi para obtener este valor antes de ingresar a nuestro usuario, por el momento la funcion nos quedara asi:

	public function login()
	{
		echo password_hash('clave', PASSWORD_BCRYPT);

		if (Session::get('logueado'))
			Url::redireccionar('/admin');

		$errores = [];

		if (isset($_POST['submit']))
		{
			$user = htmlspecialchars($_POST['usuario']);
			$pass = htmlspecialchars($_POST['clave']);

			if (password_verify($pass, 
				$this->usuario->get_hash($user)) == false)
			{
				$errores[] = "Usuario o clave incorrectas";
			}

			if (count($errores) == 0)
			{
				$datos = $this->usuario->get_data($user);
				Session::set('logueado',true);
				Session::set('id_usuario',$datos->id);
				Url::redireccionar('/admin');
			}
		}

		$titulo = 'Login';
		$this->view->render('admin/auth/login',
				compact('titulo','errores'));
	}

Observen que es exactamente igual a lo visto anteriormente pero con la nueva linea, si volvemos a cargar a nuestra pagina se vera de la siguiente manera:

Tomen ese valor hash y copienlo porque lo usaremos en breve, nuestro siguiente paso sera ingresar a la base de datos a traves de un terminal y ejecutar el siguiente comando:

MariaDB [curso]> insert into usuarios values
    -> (NULL, 'usuario', 'usuario@ejemplo.com',
    -> '$2y$10$7uEqCUKCkGbOqspww8vBh.Rt.CwJo7teXldE2k4x6pHkyECXjvL3K',
    -> NOW(),'');

En este caso usamos insert donde el primer campo, id, al ser de tipo AUTO_INCREMENT cuando pasamos NULL se carga automaticamente, luego tenemos el usuario que usaran para ingresar, despues pasamos un correo cualquiera, lo siguiente sera pasar el valor hash que obtuvimos previamente, por ultimo para establecer correctamente el valor de creado utilizamos la funcion NOW que nos devolvera la hora y fecha actuales de cuando ejecutamos el query y por ultimo lo dejamos en blanco porque de este tema hablaremos mas adelante, si todo sale bien deberan tener su primer usuario en la tabla, les muestro como me quedo a mi:

MariaDB [curso]> select * from usuarios\G
*************************** 1. row ***************************
         id: 1
    usuario: usuario
      email: usuario@ejemplo.com
      clave: $2y$10$7uEqCUKCkGbOqspww8vBh.Rt.CwJo7teXldE2k4x6pHkyECXjvL3K
     creado: 2021-10-26 10:18:28
token_reset: 
1 row in set (0.001 sec)

MariaDB [curso]>

Veamos en el siguiente video como es el funcionamiento de nuestra pagina

Como podemos observar, en la pagina no solamente tenemos la notificacion del error sino tambien el paso a nuestro dashboard y por ultimo vemos como se «desloguea» y cierra la pertinente sesion creada, nuestra ultima modificacion sera en el archivo Config.php donde debemos modificar la siguiente linea:

'default_cont' => 'Inicio',

De la siguiente forma:

'default_cont' => 'admin',

Esto hara que nuestro controlador predeterminado de ahora en mas sea admin.php, por lo tanto cuando abramos la pagina en su forma mas basica y todavia estamos logueado nos enviara directamente al dashboard, en cambio si no estamos logueado nos enviara a la pagina de login, con esto ya tenemos un proyecto mucho mas completo donde podemos evitar el ingreso sino que tambien nos redireccionaremos a donde corresponde pero esto aun no acaba.

En resumen, hoy hemos agregado las vistas administrativas, las relacionadas al tema del dashboard, las que usaremos para el ingreso del usuario, hemos creado un usuario, tambien hemos visto como queda finalmente nuestro proyecto hasta ahora y por ultimo una modificacion para que el dashboard sea la pagina principal, espero les haya gustado sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.