{"id":3013,"date":"2021-02-02T08:50:19","date_gmt":"2021-02-02T14:50:19","guid":{"rendered":"http:\/\/linuxitos.com\/main\/?p=3013"},"modified":"2021-02-02T08:54:20","modified_gmt":"2021-02-02T14:54:20","slug":"login-codeigniter-4-1-0-bootstrap-5","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/login-codeigniter-4-1-0-bootstrap-5\/","title":{"rendered":"Login Codeigniter 4.1.1 &#038; Bootstrap 5 &#038; XAMPP 8"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-42-53.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-42-53-1024x577.png\" alt=\"\" class=\"wp-image-3014\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-42-53-1024x577.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-42-53-300x169.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-42-53-768x433.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-42-53.png 1206w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En \u00e9ste post, se describir\u00e1 c\u00f3mo crear el proceso de login y registro, \u00e9sta vez lo haremos paso a paso, as\u00ed que ser\u00e1 un proceso un tanto largo, pero como siempre, al final dejar\u00e9 el link de descarga del proyecto desde github.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Requerimientos<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Fedora 33 x86_64 (no probado en otros SO)<\/li><li>XAMPP 8.0.1<\/li><li>Codeigniter 4.1.0<\/li><li>Bootstrap 5 beta.1<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 1: Instalar y configurar XAMPP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se dar\u00e1 por hecho que \u00e9ste paso ya se tiene, en caso de que no, aqu\u00ed el link de c\u00f3mo realizar la configuraci\u00f3n e instalaci\u00f3n del xampp <a rel=\"noreferrer noopener\" href=\"https:\/\/blog.linuxitos.com\/instalar-xampp-8-0-0-fedora-33\" target=\"_blank\">https:\/\/blog.linuxitos.com\/instalar-xampp-8-0-0-fedora-33<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 2: Creaci\u00f3n de la base de datos:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para la creaci\u00f3n de la base de datos, abrimos <a rel=\"noreferrer noopener\" href=\"http:\/\/localhost\/phpmyadmin\/\" target=\"_blank\">http:\/\/localhost\/phpmyadmin\/<\/a> y clic en base de datos, crear una base de datos que se llame civ_auth_one, una vez seleccionada del panel lateral izquierdo, abrir sql en la pesta\u00f1a de opciones, copiar, pegar y ejecutar la siguiente instrucci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE TABLE users(\n     user_id INT PRIMARY KEY AUTO_INCREMENT,\n     user_name VARCHAR(100),\n     user_email VARCHAR(100),\n     user_password VARCHAR(200),\n     user_created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n ) ENGINE=INNODB;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Con eso se ha creado la base de datos, y la tabla a utilizar<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 3: Configurar Codeigniter 4.1.0<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Descargar codeigniter 4.1.10, desde <a href=\"https:\/\/www.codeigniter.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.codeigniter.com\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez descargado, mover la carpeta a \/opt\/lampp\/htdocs, cambiar de nombre el archivo env a .env. Y eliminar los archivos que no se utilizaran, dejar \u00fanicamente los siguientes archivos y directorios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para mover el directorio descargado, recomiendo primero cambiarle el nombre a civ-auth-one luego moverlo a la ruta \/opt\/lampp\/htdocs\/<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">cd ~ \/Descargas\nmv CodeIgniter4-4.1.0 civ-auth-one\nsudo mv civ-auth-one \/opt\/lampp\/htdocs<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-57-09.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-57-09-1024x492.png\" alt=\"\" class=\"wp-image-3015\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-57-09-1024x492.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-57-09-300x144.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-57-09-768x369.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-10-57-09.png 1489w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>En lo personal y para entornos de desarrollo, prefiero utilizar las url directamente, en lugar lanzarlo con spark.<\/p><cite>&#8212; personal<\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Modificar index.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Copiar el archivo index.php que se encuentra en el directorio public\/index.php y pegarlo en la ra\u00edz del proyecto, con las siguientes modificaciones:<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n \/\/ Valid PHP Version?\n $minPHPVersion = '7.2';\n if (version_compare(PHP_VERSION, $minPHPVersion, '&lt;'))\n {\n     die(\"Your PHP version must be {$minPHPVersion} or higher to run CodeIgniter. Current version: \" . PHP_VERSION);\n }\n unset($minPHPVersion);\n \/\/ Path to the front controller (this file)\n define('FCPATH', <strong>DIR<\/strong> . DIRECTORY_SEPARATOR);\n \/*\n  *---------------------------------------------------------------\n BOOTSTRAP THE APPLICATION\n *---------------------------------------------------------------\n This process sets up the path constants, loads and registers\n our autoloader, along with Composer's, loads our constants\n and fires up an environment-specific bootstrapping.\n *\/ \n \/\/ Ensure the current directory is pointing to the front controller's directory\n chdir(<strong>DIR<\/strong>);\n \/\/ Load our paths config file\n \/\/ This is the line that might need to be changed, depending on your folder structure.\n require realpath(FCPATH . 'app\/Config\/Paths.php') ?: FCPATH . 'app\/Config\/Paths.php';\n \/\/ ^^^ Change this if you move your application folder\n $paths = new Config\\Paths();\n \/\/ Location of the framework bootstrap file.\n $bootstrap = rtrim($paths-&gt;systemDirectory, '\\\/ ') . DIRECTORY_SEPARATOR . 'bootstrap.php';\n $app       = require realpath($bootstrap) ?: $bootstrap;\n \/*\n  *---------------------------------------------------------------\n LAUNCH THE APPLICATION\n *---------------------------------------------------------------\n Now that everything is setup, it's time to actually fire\n up the engines and make this app do its thang.\n *\/\n $app-&gt;run(); <\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Modificando el archivo .env<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Se va  establecer el acceso a la base de datos, establecer que es un proyecto development, y la url del proyecto, de tal modo que las secciones a modificadas quedar\u00e1n de la siguiente manera:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"apacheconf\" class=\"language-apacheconf\">--------------------------------------------------------------------\n ENVIRONMENT\n --------------------------------------------------------------------\n CI_ENVIRONMENT = development\n --------------------------------------------------------------------\n APP\n --------------------------------------------------------------------\n app.baseURL = 'http:\/\/localhost\/civ-auth-one\/'\n app.forceGlobalSecureRequests = false\n\n--------------------------------------------------------------------\n DATABASE\n --------------------------------------------------------------------\n database.default.hostname =localhost\n database.default.database =auth_civ_one\n database.default.username =root\n database.default.password =\n database.default.DBDriver =MySQLi\n database.default.port =3307<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En caso de que la configuraci\u00f3n espec\u00edfica de su XAMPP, usuario root, puerto, contrase\u00f1a, nombre de bd, etc., se haya personalizado, entonces aqu\u00ed se debe especificar exactamente tal cual lo tienen, o no se podr\u00e1 acceder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El proyecto en este ejemplo se llama civ-auth-one, por lo tanto la url incluye ese nombre, es decir, el nombre del directorio que se encuentra en al ruta \/opt\/lampp\/htdocs\/<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Asignar permiso al proyecto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para el correcto funcionamiento, es necesario asignar permisos correctamente al proyecto, \u00e9stos permisos son necesario para que se pueden crear logs de archivos, modificar o subir archivos desde la interfaz web.<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">cd \/opt\/lampp\/htdocs\nsudo chmod 775 -R civ-auth-one\nsudo chown -R daemon:tu-usuario civ-auth-one\nsudo chmod 777 -R civ-auth-one\/writable<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">**tu-usuario: aqu\u00ed se debe reemplazar por el nombre del usuario<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Accediendo desde la url<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Con \u00e9stos cambios, ahora al acceder desde la url http:\/\/localhost\/civ-auth-one\/, debe visualizarse la p\u00e1gina de inicio de codeginiter 4.1.0. A\u00fan sin modificar nada.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-11-22-01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-11-22-01-1024x520.png\" alt=\"\" class=\"wp-image-3016\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-11-22-01-1024x520.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-11-22-01-300x152.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-11-22-01-768x390.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-01-11-22-01.png 1508w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 4: Creando modelos y vistas<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Crear modelo UserModel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Se crea un archivo de nombre UserModel.php dentro del directorio app\/Models y pegar el siguiente contenido dentro del mismo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nnamespace App\\Models;\n\nuse CodeIgniter\\Model;\n\nclass UserModel extends Model{\n\tprotected $table \t\t\t= 'users';\n\tprotected $primaryKey \t\t= 'user_id';\n\tprotected $allowedFields \t= &#91;'user_id', 'user_name', 'user_email', 'user_password', 'user_created_at'];\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Crear el controlador Register<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Se crea un archivo php con el nombre de Register.php dentro del directorio de app\/Controllers y pegar el siguiente contenido.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nnamespace App\\Controllers;\nuse App\\Models\\UserModel;\n\nclass Register extends BaseController{\n\tprotected $helpers = &#91;];\n\tprotected $db;\n\n\tpublic function index(){\n\t\t\/\/include helper form\n\t\thelper(&#91;'form']);\n\t\t$data = &#91;];\n\t\t$data&#91;'title'] = 'Registro';\n\t\t\/\/echo view('register', $data);\n\t\treturn view('register', $data);\n\t}\n \n\tpublic function save(){\n\t\t\/\/include helper form\n\t\thelper(&#91;'form']);\n\t\t\/\/set rules validation form\n\t\t$rules = &#91;\n\t\t\t'name'          =&gt; 'required|min_length&#91;3]|max_length&#91;20]',\n\t\t\t'email'         =&gt; 'required|min_length&#91;6]|max_length&#91;50]|valid_email|is_unique&#91;users.user_email]',\n\t\t\t'password'      =&gt; 'required|min_length&#91;6]|max_length&#91;200]',\n\t\t\t'confpassword'  =&gt; 'matches&#91;password]'\n\t\t];\n\t\t \n\t\tif($this-&gt;validate($rules)){\n\t\t\t$model = new UserModel();\n\t\t\t$data = &#91;\n\t\t\t\t'user_name'     =&gt; $this-&gt;request-&gt;getVar('name'),\n\t\t\t\t'user_email'    =&gt; $this-&gt;request-&gt;getVar('email'),\n\t\t\t\t'user_password' =&gt; password_hash($this-&gt;request-&gt;getVar('password'), PASSWORD_DEFAULT)\n\t\t\t];\n\t\t\t$model-&gt;save($data);\n\t\t\treturn redirect()-&gt;to('\/dashboard');\n\t\t}else{\n\t\t\t$data&#91;'validation'] = $this-&gt;validator;\n\t\t\t\/\/echo view('register', $data);\n\t\t\treturn view('register', $data);\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Crear la vista de register<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Crear un archivo de nombre register.php dentro del directorio app\/Views y pegar el siguiente contenido:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n\t&lt;head&gt;\n\t\t&lt;!-- Required meta tags --&gt;\n\t\t&lt;meta charset=\"utf-8\"&gt;\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\t\t&lt;link rel=\"icon\" href=\"&lt;?=base_url('assets\/custom\/images\/fav.png');?&gt;\"&gt;\n\t\t&lt;!-- Bootstrap CSS --&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/bootstrap.min.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/animate.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/animation.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;title&gt;&lt;?=$title;?&gt;&lt;\/title&gt;\n\t&lt;\/head&gt;\n\t&lt;body&gt;\n\t\t&lt;?php\n\t\tinclude('common\/navbar.php');\n\t\t?&gt;\n\t\t&lt;div class=\"container mt-5\"&gt;\n\t\t\t&lt;div class=\"row justify-content-md-center\"&gt;\n\t\t\t\t&lt;div class=\"col-6\"&gt;\n\t\t\t\t\t&lt;div class=\"card rounded p-2 mt-5\"&gt;\n\t\t\t\t\t\t&lt;h1&gt;Registro&lt;\/h1&gt;\n\t\t\t\t\t\t&lt;?php if(isset($validation)):?&gt;\n\t\t\t\t\t\t\t&lt;div class=\"alert alert-danger\"&gt;&lt;?= $validation-&gt;listErrors() ?&gt;&lt;\/div&gt;\n\t\t\t\t\t\t&lt;?php endif;?&gt;\n\t\t\t\t\t\t&lt;form action=\"&lt;?=base_url('save');?&gt;\" method=\"post\"&gt;\n\t\t\t\t\t\t\t&lt;div class=\"mb-3\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"name\" class=\"form-label\"&gt;Nombre&lt;\/label&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"text\" name=\"name\" class=\"form-control\" id=\"name\" value=\"&lt;?= set_value('name') ?&gt;\" autocomplete=\"off\"&gt;\n\t\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t\t\t&lt;div class=\"mb-3\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"email\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"email\" name=\"email\" class=\"form-control\" id=\"email\" value=\"&lt;?= set_value('email') ?&gt;\" autocomplete=\"off\"&gt;\n\t\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t\t\t&lt;div class=\"mb-3\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"password\" class=\"form-label\"&gt;Contrase\u00f1a&lt;\/label&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"password\" name=\"password\" class=\"form-control\" id=\"password\" autocomplete=\"off\"&gt;\n\t\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t\t\t&lt;div class=\"mb-3\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"confpassword\" class=\"form-label\"&gt;Confirmar contrase\u00f1a&lt;\/label&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"password\" name=\"confpassword\" class=\"form-control\" id=\"confpassword\" autocomplete=\"off\"&gt;\n\t\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t\t\t&lt;button type=\"submit\" class=\"btn btn-primary float-end\"&gt;\n\t\t\t\t\t\t\t\tRegistro\n\t\t\t\t\t\t\t&lt;\/button&gt;\n\t\t\t\t\t\t&lt;\/form&gt;\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t \n\t\t&lt;!-- Popper.js first, then Bootstrap JS --&gt;\n\t\t&lt;script&gt;\n\t\t\twindow.jQuery || document.write('&lt;script src=\"&lt;?=base_url('assets\/vendor\/jquery\/jquery-3.5.1.min.js');?&gt;\"&gt;&lt;\\\/script&gt;')\n\t\t&lt;\/script&gt;\n\t\t&lt;script src=\"&lt;?=base_url('assets\/vendor\/bootstrap\/js\/popper.min.js');?&gt;\"&gt;&lt;\/script&gt;\n\t\t&lt;script src=\"&lt;?=base_url('assets\/vendor\/bootstrap\/js\/bootstrap.min.js');?&gt;\"&gt;&lt;\/script&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Controlador Login<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Crear archivo Login.php en directorio app\/Controllers<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nnamespace App\\Controllers;\nuse App\\Models\\UserModel;\n\nclass Login extends BaseController{\n\tprotected $helpers = &#91;];\n\tprotected $db;\n\n\tpublic function index(){\n\t\thelper(&#91;'form']);\n\t\t$data&#91;'title'] = 'Login';\n\t\treturn view('login', $data);\n\t} \n \n\tpublic function auth(){\n\t\t$session \t= session();\n\t\t$model \t\t= new UserModel();\n\t\t$email \t\t= $this-&gt;request-&gt;getVar('email');\n\t\t$password \t= $this-&gt;request-&gt;getVar('password');\n\t\t$data \t\t= $model-&gt;where('user_email', $email)-&gt;first();\n\t\tif($data){\n\t\t\t$pass \t\t\t= $data&#91;'user_password'];\n\t\t\t$verify_pass \t= password_verify($password, $pass);\n\t\t\tif($verify_pass){\n\t\t\t\t$ses_data = &#91;\n\t\t\t\t\t'user_id'       =&gt; $data&#91;'user_id'],\n\t\t\t\t\t'user_name'     =&gt; $data&#91;'user_name'],\n\t\t\t\t\t'user_email'    =&gt; $data&#91;'user_email'],\n\t\t\t\t\t'logged_in'     =&gt; TRUE\n\t\t\t\t];\n\t\t\t\t$session-&gt;set($ses_data);\n\t\t\t\treturn redirect()-&gt;to('\/dashboard');\n\t\t\t}else{\n\t\t\t\t$session-&gt;setFlashdata('msg', 'Wrong Password');\n\t\t\t\treturn redirect()-&gt;to('\/login');\n\t\t\t}\n\t\t}else{\n\t\t\t$session-&gt;setFlashdata('msg', 'Email not Found');\n\t\t\treturn redirect()-&gt;to('\/login');\n\t\t}\n\t}\n \n\tpublic function logout(){\n\t\t$session = session();\n\t\t$session-&gt;destroy();\n\t\treturn redirect()-&gt;to('login');\n\t}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Crear vista login.ph<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En app\/Views crear un archivo con nombre login.php.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n\t&lt;head&gt;\n\t\t&lt;!-- Required meta tags --&gt;\n\t\t&lt;meta charset=\"utf-8\"&gt;\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\t\t&lt;link rel=\"icon\" href=\"&lt;?=base_url('assets\/custom\/images\/favicon.png');?&gt;\"&gt;\n\t\t&lt;!-- Bootstrap CSS --&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/bootstrap.min.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/animate.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/animation.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;title&gt;&lt;?=$title;?&gt;&lt;\/title&gt;\n\t&lt;\/head&gt;\n\t&lt;body&gt;\n\t\t&lt;?php\n\t\tinclude('common\/navbar.php');\n\t\t?&gt;\n\t\t&lt;div class=\"container mt-5\"&gt;\n\t\t\t&lt;div class=\"row justify-content-md-center\"&gt;\n\t\t\t\t&lt;div class=\"col-6 mt-5\"&gt;\n\t\t\t\t\t&lt;div class=\"card rounded p-2\"&gt;\n\t\t\t\t\t\t&lt;h1&gt;Inicio de Sesi\u00f3n&lt;\/h1&gt;\n\t\t\t\t\t\t&lt;?php if(session()-&gt;getFlashdata('msg')):?&gt;\n\t\t\t\t\t\t\t&lt;div class=\"alert alert-danger\"&gt;&lt;?= session()-&gt;getFlashdata('msg') ?&gt;&lt;\/div&gt;\n\t\t\t\t\t\t&lt;?php endif;?&gt;\n\t\t\t\t\t\t&lt;form action=\"&lt;?=base_url('auth');?&gt;\" method=\"post\"&gt;\n\t\t\t\t\t\t\t&lt;div class=\"mb-3\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"email\" class=\"form-label\"&gt;Email&lt;\/label&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"email\" name=\"email\" class=\"form-control\" id=\"email\" value=\"&lt;?=set_value('email');?&gt;\"&gt;\n\t\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t\t\t&lt;div class=\"mb-3\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"password\" class=\"form-label\"&gt;Contrase\u00f1a&lt;\/label&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"password\" name=\"password\" class=\"form-control\" id=\"password\"&gt;\n\t\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t\t\t&lt;button type=\"submit\" class=\"btn btn-primary float-end\"&gt;\n\t\t\t\t\t\t\t\tIniciar\n\t\t\t\t\t\t\t&lt;\/button&gt;\n\t\t\t\t\t\t&lt;\/form&gt;\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t \n\t\t&lt;!-- Popper.js first, then Bootstrap JS --&gt;\n\t\t&lt;script&gt;\n\t\t\twindow.jQuery || document.write('&lt;script src=\"&lt;?=base_url('assets\/vendor\/jquery\/jquery-3.5.1.min.js');?&gt;\"&gt;&lt;\\\/script&gt;')\n\t\t&lt;\/script&gt;\n\t\t&lt;script src=\"&lt;?=base_url('assets\/vendor\/bootstrap\/js\/popper.min.js');?&gt;\"&gt;&lt;\/script&gt;\n\t\t&lt;script src=\"&lt;?=base_url('assets\/vendor\/bootstrap\/js\/bootstrap.min.js');?&gt;\"&gt;&lt;\/script&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Controlador Dashboard<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Crear archivo Dashboard.php en app\/Controllers<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nnamespace App\\Controllers;\nuse App\\Models\\UsersModel;\n\nclass Dashboard extends BaseController{\n\tpublic function index(){\n\t\t$session = session();\n\t\t\/\/echo \"Welcome back, \".$session-&gt;get('user_name');\n\t\t$data&#91;'title'] = 'Dashboard';\n\t\treturn view('dashboard', $data);\n\t}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Crear vista dashboard.php<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Se un archivo con el nombre dashboard.php en app\/Views. Contiene lo que se mostrar\u00e1 cuando el usuario haya iniciado sesi\u00f3n. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n\t&lt;head&gt;\n\t\t&lt;!-- Required meta tags --&gt;\n\t\t&lt;meta charset=\"utf-8\"&gt;\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\t\t&lt;link rel=\"icon\" href=\"&lt;?=base_url('assets\/custom\/images\/fav.png');?&gt;\"&gt;\n\t\t&lt;!-- Bootstrap CSS --&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/bootstrap.min.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/animate.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?=base_url('assets\/vendor\/bootstrap\/css\/animation.css');?&gt;\" rel=\"stylesheet\"&gt;\n\t\t&lt;title&gt;&lt;?=$title;?&gt;&lt;\/title&gt;\n\t&lt;\/head&gt;\n\t&lt;body&gt;\n\t\t&lt;?php\n\t\tinclude('common\/navbar.php');\n\t\t?&gt;\n\t\t&lt;div class=\"container mt-5\"&gt;\n\t\t\t&lt;div class=\"row justify-content-md-center\"&gt;\n\t\t\t\t&lt;div class=\"col-12\"&gt;\n\t\t\t\t\t&lt;div class=\"card rounded p-2 mt-5\"&gt;\n\t\t\t\t\t\t&lt;h1&gt;Dashboard&lt;\/h1&gt;\n\t\t\t\t\t\t&lt;?php if(isset($validation)):?&gt;\n\t\t\t\t\t\t\t&lt;div class=\"alert alert-danger\"&gt;&lt;?= $validation-&gt;listErrors() ?&gt;&lt;\/div&gt;\n\t\t\t\t\t\t&lt;?php endif;?&gt;\n\t\t\t\t\t\tBienvenido a tu panel de control.\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t \n\t\t&lt;!-- Popper.js first, then Bootstrap JS --&gt;\n\t\t&lt;script&gt;\n\t\t\twindow.jQuery || document.write('&lt;script src=\"&lt;?=base_url('assets\/vendor\/jquery\/jquery-3.5.1.min.js');?&gt;\"&gt;&lt;\\\/script&gt;')\n\t\t&lt;\/script&gt;\n\t\t&lt;script src=\"&lt;?=base_url('assets\/vendor\/bootstrap\/js\/popper.min.js');?&gt;\"&gt;&lt;\/script&gt;\n\t\t&lt;script src=\"&lt;?=base_url('assets\/vendor\/bootstrap\/js\/bootstrap.min.js');?&gt;\"&gt;&lt;\/script&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 5: Crear Auth y NoAuth<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CodeIgniter 4 proporciona una caracter\u00edstica de filtro que funciona para manejar Before Request o After Request. Esta caracter\u00edstica es muy \u00fatil para manejar la comprobaci\u00f3n o validaci\u00f3n de cada solicitud o de unas pocas solicitudes que se escriben con el mismo c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En este caso, protegeremos la funci\u00f3n index() en el Controlador \u00abDashboard.php\u00bb de los usuarios que no hayan iniciado sesi\u00f3n utilizando el Filtro. De esta manera, tendr\u00e1s una idea general de c\u00f3mo funcionan los Filtros en CodeIgniter 4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Archivo Auth<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Crear un archivo de filtro llamado \u00abAuth.php\u00bb en la carpeta \u00abapp\/Filters\u00bb, luego escriba el siguiente c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nnamespace App\\Filters;\n \nuse CodeIgniter\\HTTP\\RequestInterface;\nuse CodeIgniter\\HTTP\\ResponseInterface;\nuse CodeIgniter\\Filters\\FilterInterface;\n \nclass Auth implements FilterInterface\n{\n\tpublic function before(RequestInterface $request, $arguments = null)\n\t{\n\t\tif(! session()-&gt;get('logged_in')){\n\t\t\treturn redirect()-&gt;to('\/'); \n\t\t}\n\t}\n \n\t\/\/--------------------------------------------------------------------\n \n\tpublic function after(RequestInterface $request, ResponseInterface $response, $arguments = null)\n\t{\n\t\t\/\/ Do something here\n\t}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Archivo Noauth.php en app\/Filters<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9ste archivo filtrar\u00e1 los m\u00e9todos y funciones que no necesariamente deben estar logeados, con \u00e9ste se podr\u00e1 realizar alguna otra acci\u00f3n cuando el usuario entre a enlaces que no requieren inicio de sesi\u00f3n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nnamespace App\\Filters;\n\nuse CodeIgniter\\HTTP\\RequestInterface;\nuse CodeIgniter\\HTTP\\ResponseInterface;\nuse CodeIgniter\\Filters\\FilterInterface;\n\nclass Noauth implements FilterInterface\n{\n\tpublic function before(RequestInterface $request,  $arguments = NULL)\n\t{\n\t\thelper(&#91;'url', 'session', 'emai', 'upload', 'system_helper', 'database']);\n\t\t\/\/ Do something here\n\t\tif(session()-&gt;get('logged_in')){\n\t\t\treturn redirect()-&gt;to(base_url('\/dashboard'));\n\t\t\t\/\/redireccionar(base_url('ptable'), 'Bienvenido de nuevo', 'success', 'fa fa-check', ' ', '#');\n\t\t}\n\t}\n\n\t\/\/--------------------------------------------------------------------\n\n\tpublic function after(RequestInterface $request, ResponseInterface $response, $arguments = null)\n\t{\n\t\t\/\/ Do something here\n\t}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En el filtro \u00abAuth.php\u00bb anterior, hay 2 funciones, a saber: function before() y function after(). En este caso, s\u00f3lo vamos a utilizar la funci\u00f3n before(). La funci\u00f3n before, sirve para validar la petici\u00f3n antes de que se ejecute la propia petici\u00f3n. En el filtro \u00abAuth.php\u00bb anterior, redirigimos a los usuarios a la p\u00e1gina de inicio de sesi\u00f3n si acceden a una p\u00e1gina antes de iniciar la sesi\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto puede aplicarse globalmente, es decir, se aplica a todas las peticiones, o puede ser s\u00f3lo para algunas peticiones. En este caso, s\u00f3lo lo utilizamos para proteger el controlador \u00abDashboard.php\u00bb. Por lo tanto, no lo aplicamos globalmente, porque queremos que los controladores \u00abLogin.php\u00bb y \u00abRegister.php\u00bb sean accesibles sin necesidad de iniciar sesi\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Abrir el archivo \u00abFilters.php\u00bb ubicado en la carpeta \u00abapp\/Config\u00bb, buscar el siguiente c\u00f3digo y agregar las dos \u00faltimas l\u00edneas de auth y noauth:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public $aliases = &#91;\n\t\t'csrf'     =&gt; CSRF::class,\n\t\t'toolbar'  =&gt; DebugToolbar::class,\n\t\t'honeypot' =&gt; Honeypot::class,\n\t\t'auth'     =&gt; \\App\\Filters\\Auth::class,\n\t\t'noauth' =&gt; \\App\\Filters\\Noauth::class,\n\t];<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Paso 5: Pruebas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora ya est\u00e1 listo el c\u00f3digo: se puede acceder al link del proyecto desde el navegador, y probar las funciones de inicio de sesi\u00f3n y registro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descargar el proyecto completo desde:<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/github.com\/jesusferm\/auth-civ-mariadb\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/jesusferm\/auth-civ-mariadb<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-02.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-02-1024x620.png\" alt=\"\" class=\"wp-image-3019\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-02-1024x620.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-02-300x182.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-02-768x465.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-02.png 1210w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-09.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-09-1024x620.png\" alt=\"\" class=\"wp-image-3020\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-09-1024x620.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-09-300x182.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-09-768x465.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-09.png 1210w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-29.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-29-1024x620.png\" alt=\"\" class=\"wp-image-3021\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-29-1024x620.png 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-29-300x182.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-29-768x465.png 768w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/02\/Screenshot-from-2021-02-02-08-37-29.png 1210w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pr\u00f3ximante subir\u00e9 el proyecto con funciones con ajax, agregar registros, modificarlos, secci\u00f3n de perfil de usuario, cambio de contrase\u00f1a, recuperaci\u00f3n de contrase\u00f1a por email.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n En \u00e9ste post, se describir\u00e1 c\u00f3mo crear el proceso de login y registro, \u00e9sta vez lo haremos paso a paso, as\u00ed que ser\u00e1 un proceso un tanto largo, pero como siempre, al final dejar\u00e9 el link de descarga del proyecto desde github. Requerimientos Fedora 33 x86_64 (no probado en otros SO) XAMPP 8.0.1 Codeigniter [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[1725,1634,1633,1726,1587],"class_list":["post-3013","post","type-post","status-publish","format-standard","hentry","category-fedora","tag-auth","tag-bootstrap","tag-codeigniter","tag-login","tag-xampp"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/3013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/comments?post=3013"}],"version-history":[{"count":5,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/3013\/revisions"}],"predecessor-version":[{"id":3024,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/3013\/revisions\/3024"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=3013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=3013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=3013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}