Ticker

6/recent/ticker-posts

CodeIgniter - Aplicación Web para el REGISTRO de USUARIOS

Hadsonpar agosto 21, 2022

En el siguiente tutorial práctico iniciaremos el desarrollaremos de una Aplicación Web para el control de accesos, en esta primera parte iniciaremos con el REGISTRO de USUARIOS, es decir, mas adelante desarrollaremos una serie de tutoriales con la finalidad de crear un sistemas de autenticación y autorización haciendo uso del Framework PHP como es CodeIgniter versión 3.1, para la gestión de datos relacional se utilizará MySQL.

Requisitos:

  1. XAMPP Control Panel.
  2. MySQL Workbench o phpMyAdmin.
  3. Visual Studio Code o Sublime Text 3
  4. CodeIgniter v3.1 (Framework PHP)
  5. Bootstrap 5 (HTML5 y CSS3)

Lo que veremos en este tutorial:

  1. Descargar CodeIgniter v3.1.x.
  2. Crear la base de datos en MySQL.
  3. Crear la tablas de base de datos en MySQL
  4. Configurar archivos de la aplicación en CodeIgniter.
  5. Crear e implementar modelo de datos registre en CodeIgniter .
  6. Crear e implementar controlador registre en CodeIgniter .
  7. Crear e implementar vista en CodeIgniter .
  8. Conclusiones acerca del REGISTRO de USUARIOS.

1. Descargar CodeIgniter v3.

Para la descarga del Framework CodeIgniter, sugiero descargar desde la pagina oficial; para este tutorial práctico se hará uso de la versión 3.1.x.

Seguidamente se debe descomprimir el archivo y copiar los archivos en el directorio final donde se iniciará la implementación, en mi caso el directorio final es crud-app-web.

Recuerda que debes levantar los servicios de Apache y MySQL desde el XAMPP Control Panel y el directorio final del proyecto debe estar creado en el htdocs.


2. Crear la base de datos en MySQL.

Crea la base de datos con el nombre de demo desde el Workbench o phpMyAdmin, seguidamente crea la tabla user con la siguiente estructura:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
CREATE TABLE `user` (
  `user_id` int(12) NOT NULL,
  `name` varchar(50) DEFAULT NULL,
  `user_name` varchar(50) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `status` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for table `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`user_id`),
  ADD UNIQUE KEY `email` (`email`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
  MODIFY `user_id` int(12) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

3. Configurar archivos de la aplicación.

Después de crear la base de datos, seguidamente pasamos a configurar los archivos en relación al ecosistema del Framework CodeIgniter:

3.1. Se agregará la url base de nuestro proyecto en el parámetro $config['base_url']  del archivo config.php:

    RUTA DEL ARCHIVO: ..\sign-up-app-web-with-codeigniter\application\config\config.php


    PARAMÉTRO: $config['base_url'] = 'http://localhost/sign-up-app-web-with-codeigniter/';

Recordemos que puedes aplicar $_SERVER para controlar las rutas y ubicaciones de script en relación a PHP.

3.2. Asignar los valores de conexión a la base de datos en relación a los CONTROLADORES para la conexión a MySQL desde el archivo database.php:

    RUTA DEL ARCHIVO: ..\sign-up-app-web-with-codeigniter\application\config\database.php

    PARAMÉTROS:
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'demo',
    'dbdriver' => 'mysqli',

3.3. Asignar el controlador inicial por defecto desde el archivo routes.php:

    ..\sign-up-app-web-with-codeigniter\application\config\routes.php
    $route['default_controller'] = 'users/register';

4. Crear e implementar modelo.

Crear el modelo de nombre Users_model.php en el directorio models de nuestro proyecto sign-up-app-web-with-codeigniter\application\models e implementar las funciones necesarias (las explicaciones están en la cabecera de cada función o acción que se realiza) para el acceso a datos y realizar la funcionalidad CRUD. Hacer de su conocimiento, acerca de las funciones que se crean en este modelo están orientados a sentencias SQL, es decir, no se esta usando funcionalidades que nos provee el mismo CodeIgniter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?php

/**
 * Description of Export Controller
 * @author Hadson Paredes
 * @email  info@hadsonpar.com
 */
defined('BASEPATH') or exit('No direct script access allowed');

class Users_model extends CI_Model
{
	// declare private variable
	private $_userID;
	private $_name;
	private $_userName;
	private $_email;
	private $_password;
	private $_status;

	public function setUserID($userID)
	{
		$this->_userID = $userID;
	}
	public function setName($name)
	{
		$this->_name = $name;
	}
	public function setUserName($userName)
	{
		$this->_userName = $userName;
	}
	public function setEmail($email)
	{
		$this->_email = $email;
	}
	public function setPassword($password)
	{
		$this->_password = $password;
	}
	public function setStatus($status)
	{
		$this->_status = $status;
	}

	//function create User
	public function createUser()
	{
		$data = array(
			'name' => $this->_name,
			'email' => $this->_email,
			'user_name' => $this->_userName,
			'password' => $this->_password,
			'status' => $this->_status,
		);
		$this->db->insert('user', $data);
		return $this->db->insert_id();
	}
}

 

Los modelos son clases que están diseñadas para trabajar con información en relación a la base de datos.

5. Crear e implementar controlador.

Crear el controlador de nombre Users.php en el directorio controllers de nuestro proyecto sign-up-app-web-with-codeigniter\application\controllers:

Implementar las funciones necesarias para cumplir con la lógica en nuestro controlado con la finalidad de logra nuestra funcionalidad CRUD; recuerde, que las explicaciones están en la cabecera de cada función o acción que se realiza:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
/**
 * Description of Export Controller
 * @author Hadson Paredes
 * @email  info@hadsonpar.com
 */
defined('BASEPATH') or exit('No direct script access allowed');

class Users extends CI_Controller
{

	public function __construct()
	{
		parent::__construct();
		$this->load->model('Users_model', 'user');
	}

	// Dashboard
	public function index()
	{
		$data['title'] = 'Dashboard - Hasonpar';
		$data['metaDescription'] = 'Dashboard';
		$data['metaKeywords'] = 'Dashboard';
		$this->load->view('users/confirmation', $data);
	}

	// Register
	public function register()
	{
		$data['title'] = 'Sign Up - Hadsonpar';
		$data['metaDescription'] = 'SignUp';
		$data['metaKeywords'] = 'SignUp';
		$this->load->view('users/index', $data);
	}

	// Action SignUp
	public function actionSignUp()
	{		
		$this->load->library('form_validation');

		// field name, error message, validation rules
		$this->form_validation->set_rules('name', 'Name', 'required');
		$this->form_validation->set_rules('username', 'User Name', 'trim|required|min_length[4]');
		$this->form_validation->set_rules('email', 'Your Email', 'trim|required|valid_email');
		$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[4]|max_length[32]');
		$this->form_validation->set_rules('confirm_password', 'Password Confirmation', 'trim|required|matches[password]');

		if ($this->form_validation->run() == FALSE) {
			$this->register();
		} else {
			// post values
			$name = $this->input->post('name');
			$username = $this->input->post('username');
			$email = $this->input->post('email');
			$password = $this->input->post('password');
			// set post values
			$this->user->setName($name);
			$this->user->setUserName($username);
			$this->user->setEmail($email);
			$this->user->setPassword(MD5($password));
			$this->user->setStatus(1);
			// insert values in database
			$this->user->createUser();
			redirect('users/index');
		}
	}
}

Un controlador (controller) simplemente es un archivo de tipo clase cuyo nombre se asociar con una URI determinada.

6. Crear e implementar vista.

Crear las vistas en el directorio views de nuestro proyecto, en mi caso e creado el sub directorio llamado users - finalmente crearemos las siguientes vistas de index.php y confirmation.php:

sign-up-app-web-with-codeigniter\application\views\users\index.php



CODIGO DE NUESTRA VISTA: index.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php $this->load->view('templates/header'); ?>

<main role="main">    
        <div class="container">        
            <div class="row" id="sign-up-form">
            
                <div class="col-6 text-left">
                    <img src="<?php print HTTP_IMAGES_PATH; ?>sign-up.png" alt="Hadsonpar">
                </div>

                <div class="col-6">
                    <form action="<?php echo base_url(); ?>users/actionsignup" method="post" id="loginform" name="Login_Form" method="POST">
                        <h3 class="form-signin-heading">Sign Up form with CodeIgniter</h3>
                        <?php if (validation_errors()) { ?>
                            <div class="alert alert-danger">
                                <?php echo validation_errors(); ?>
                            </div>
                        <?php } ?>
                        <div class="form-group">
                            <label for="name">Nombres y Apellidos</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Nombres y Apellidos*" required />
                        </div>

                        <div class="form-group">
                            <label for="name">Usuario</label>
                            <input type="text" class="form-control" id="user-name" name="username" placeholder="Usuario*" required />
                        </div>

                        <div class="form-group">
                            <label for="name">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email*" required />
                        </div>

                        <div class="form-group">
                            <label for="name">Password</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required />
                        </div>

                        <div class="form-group">
                            <label for="exampleInputPassword1">Confirmar Password</label>
                            <input type="password" class="form-control" id="password-confirm" name="confirm_password" placeholder="Confirm Password" required />
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">CREATE ACCOUNT</button>
                        <div>
                    </form>
                </div>
            </div>
        
    </div>
</main>
<?php $this->load->view('templates/footer'); ?>

sign-up-app-web-with-codeigniter\application\views\users\confirmation.php



CODIGO DE NUESTRA VISTA: confirmation.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
$this->load->view('templates/header'); ?>
<br>
<main role="main" class="text-center">
    <div id="confirmation">
        <div>
            <img src="<?php echo HTTP_IMAGES_PATH; ?>user-check-icon.png" alt="">
            <h1>Confirmación...</h1>
            <h2>Su registro se completo satisfactoriamente</h2>
            <h3>Gracias por registrarse!</h3>
        </div>
        <hr>
        <div>
            <div class="col-lg-8">
                <a href="<?php echo base_url(); ?>users/register" class="btn btn-sm btn-primary" style="float:right"><i class="fa fa-user"></i> Register</a>
                <a class="btn btn-danger btn-sm" href="http://blog.hadsonpar.com/2022/02/php-y-mysql-web-api-crud-con-codeigniter.html" target="_blank"><i class="fa fa-cloud-upload"></i> CodeIgniter - Crear Web API RESTful</a>
            </div>
        </div>
    </div>
</main>
<br>
<?php
$this->load->view('templates/footer'); ?>

Recordemos que también se crearon las vista footer, header y menus en el sub directorio templates.


7. Conclusiones acerca del REGISTRO de USUARIOS

En esta primer tutorial creamos nuestra tabla user en nuestra base datos demo, seguidamente creamos el modelo, controlar en relación a la tabla user; asimismo, crearemos la vistas correspondiente para realizar el registro teniendo en consideración las validaciones realizadas por cada inpunt en base a la librería form_validation (validación desde el controlador), finalmente creamos nuestros recursos de tipo template como footer, header y menus e innovar en las vistas principales.

Gracias nuevamente 😊; comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!
Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios