PHP y MySQL - Registro de usuarios

Hola espero estén super bien, en este tutorial desarrollaremos el registro de usuarios haciendo uso de PHP en base a PDO y a nivel de base de datos haremos uso de MySQL.

Requisitos:

XAMPP Control Panel.
MySQL Workbench o phpMyAdmin.
Visual Studio Code
PHP (PDO) y MySQL (Relational Database)
Bootstrap 4 (HTML5 y CSS3)

Lo que veremos en este tutorial:

Script de las tablas en MySQL.
Conectarse a MySQL.
Implementar sign-up.php.
Conclusiones.

1. Script de las tablas en MySQL.

Para este tutorial se crearon 2 tablas, la tablas users y usertype, y la tabla a poblar o insertar con los datos del usuario será users.

CREATE SCHEMA IF NOT EXISTS `dbntalents` DEFAULT CHARACTER SET utf16 COLLATE utf16_spanish_ci ;

USE `dbntalents` ;

-- -----------------------------------------------------

-- Table `dbntalents`.`usertype`

-- -----------------------------------------------------

CREATE TABLE IF NOT EXISTS `dbntalents`.`usertype` (

`idusertype` INT NOT NULL AUTO_INCREMENT,

`description` VARCHAR(50) NOT NULL,

`status` INT(1) NOT NULL DEFAULT 1,

PRIMARY KEY (`idusertype`))

ENGINE = InnoDB;

-- -----------------------------------------------------

-- Table `dbntalents`.`user`

-- -----------------------------------------------------

CREATE TABLE IF NOT EXISTS `dbntalents`.`users` (

`iduser` INT NOT NULL AUTO_INCREMENT,

`user` VARCHAR(45) NOT NULL,

`email` VARCHAR(100) NOT NULL,

`password` VARCHAR(255) NOT NULL,

`fullname` VARCHAR(100) NULL,

`firstname` VARCHAR(45) NULL,

`lastname` VARCHAR(45) NULL,

`status` INT(1) NOT NULL DEFAULT '1',

`idusertype` INT NOT NULL,

PRIMARY KEY (`iduser`),

/*INDEX `fk_user_usertype_idx` (`idusertype` ASC) VISIBLE,*/

CONSTRAINT `fk_user_usertype`

FOREIGN KEY (`idusertype`)

REFERENCES `dbntalents`.`usertype` (`idusertype`)

ON DELETE NO ACTION

ON UPDATE NO ACTION)

ENGINE = InnoDB;

SET SQL_MODE=@OLD_SQL_MODE;

SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;

SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;

El scripts de la base de datos fue generado desde un modelo de datos creada en MySQL Workbench; te sugiero revisar el siguiente tutorial MySQL - Crea un modelo de base de datos relacional.

El script de la base de datos lo podrás encontrar en el repositorio de github.

2. Conectarse a MySQL:

Para la conexión a la base de datos se esta haciendo uso de PDO (PHP Data Object); con PDO desde PHP nos facilita la conexión a hacia la base de datos de MySQL.

<?php                           
    $dsncnn     = 'mysql:dbname=dbntalents;host=localhost';
    $user       = 'root';
    $password   = '';

    try{        
        $pdo = new PDO($dsncnn, $user, $password);
        $pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    }
    catch(PDOExeption $e){
        echo "PDO error".$e->getMessage();
        die();
    }
?>

Para conocer más acerca de la conexión con PDO puedes visitar articulo de PHP - Conexión PDO (PHP Data Object).

3. Implementar sign-up.php:

3.1. Validaciones de los inputs vacíos (usuario y contraseña):

Si los inputs email y password del html aún no fueron ingresados ambos valores se debe mostrar los siguientes mensajes:

Por favor ingresa un correo electrónico

Por favor ingresa una contraseña

Clic en el botón Aceptar y registrarse para dichas validaciones

3.2. Botón Regístrese (validar / crear):

En caso el correo ingresado ya se encuentra registrado, se debe mostrar el siguiente mensaje de validación:

El correo electrónico ya se encuentra registrado

Cuando el correo ya existe en la Base de Datos

En caso el correo fue registrado por primera vez se debe mostrar el siguiente mensaje:

Usuario creado con éxito

Nuevo registro ingresado en la Base de Datos

3.3. Código Completo PHP y HTML (guiarse de los comentarios):

<?php
  session_start();
  require_once('../config/dbconfig.php');

   if (isset($_POST['submit'])) 
   {
    if (isset($_POST['email'], $_POST['password']) && !empty($_POST['email']) && !empty($_POST['password'])) 
    {
      $vEmail       = trim($_POST['email']);
      $vPassword    = trim($_POST['password']);
      
      /* Iniciar el cifrado del password en base a  PASSWORD_BCRYPT*/
      $options      = array("cost"=>4);
      $hashCodePass = password_hash($vPassword,PASSWORD_BCRYPT,$options);
      
      /* FILTER_VALIDATE_EMAIL comprueba si la variable $vEmail es una dirección de email válida*/
      if(filter_var($vEmail, FILTER_VALIDATE_EMAIL))       
      {
        /* Script SQL para realizar la validación acerca de la existencia de 
        registros de email que se pretende registrar*/
        $sql      = "select * from users where email = :pemail";
        $script   = $pdo->prepare($sql);
        $sqlEmail = ['pemail'=>$vEmail];
        $script->execute($sqlEmail);/* Ejecutar (DML) SELECT */

        /* Sí el email no existe se procederé registrar en la base de datos, CASO CONTRARIO
           se muestra mensaje en pantalla El correo electrónco ya se encuentra registrado */
        if($script->rowCount() == 0)
        {
          /* Se válida la longitud de caracteres ingresados, si igual o mayor a 6 caracteres se proceder 
             Para estandarizar o mejorar el ingreso de la constraseña o password Te sugiero revisar el siguiente TUTORIAL:
             PHP - Validar una password (buscarlo con ese nombre en el blog.hadsonpar.com)*/
          if(strlen($vPassword) >= 6){

            $vNameUse     = strstr($vEmail, '@',true);/* se extrae sólo el nombre de usuario */
            $vidusertype  = 1;/* Usuario de tipo cliente */
            /*Script SQL para iniciar la registrar */
            $sql      = "insert into users (user, email, password, idusertype) values (:puser, :pemail, :ppassword, :pidusertype)";
            try{
              $handle   = $pdo->prepare($sql);

              $sqlParams = [':puser'=>$vNameUse,
                            ':pemail'=>$vEmail,
                            ':ppassword'=>$hashCodePass,
                            ':pidusertype'=>$vidusertype];
              $handle->execute($sqlParams);   /* Ejecutar (DML) INSERT */

              $success = 'Usuario creado con éxito'; /* MENSAJE EN PANTALLA: CONFIRMACION DE INSERCIÓN */
            }
            catch(PDOException $e)
            {
              $errors[] = $e->getMessage();/* ERROR: CAPTURAR EXCEPCIÓN EN PANTALLA */
            }                

          }else{
            $valEmail    = $vEmail;
            $valPassword = $vPassword;
            $alertMessage2 = 'Ingrese al menos 6 caracteres';/* ALERTA EN PANTALLA */
          }
        }
        else
        {
          $alertEmail   = 'El correo electrónico ya se encuentra registrado';/* ALERTA EN PANTALLA */
        }
      }else{
        $valEmail    = '';
        $valPassword = $vPassword;
        $errors[] = 'Por favor ingresa un correo electrónico válido'; /* ERROR: ALERTA EN PANTALLA */
      }
    }
    else
    {
      /* Validación de INPUTs email y password
        isset: Valida si la variable esta definida.
        empty: Valida si la variable esta vacia*/

      if(!isset($_POST['email']) || empty($_POST['email'])) /* Si no esta denifida y vacia */
      {
          $alertMessage1 = 'Por favor ingresa un correo electrónico';/* ALERTA EN PANTALLA */
      }
      else
      {
          $valEmail = $_POST['email'];
      }

      if(!isset($_POST['password']) || empty($_POST['password'])) /* Si no esta denifida y vacia */
      {
          $alertMessage2 = 'Por favor ingresa una contraseña';/* ALERTA EN PANTALLA */
      }
      else
      {          
          $valPassword = $_POST['password'];          
      }
    }
  }

?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Regístrese usuario | New Talents</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="../assets/img/favicon.png" rel="icon">
  <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="../assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="../assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="../assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="../assets/css/style.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: nTalents - v1.0.0
  * Template URL: https://hadsonpar.com/template/bootstrap-web-new-talents/
  * Author: hadsonpar.com
  * License: https://hadsonpar.com/license/
  ======================================================== -->

</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top  header-transparent">
    <div class="container d-flex align-items-center">

      <div class="logo mr-auto">
        <a href="../index"><img src="../assets/img/new-talents.png" alt="" class="img-fluid"></a>
      </div>
		
      <nav class="nav-menu d-none d-lg-block">
        <ul>          
          <li class="get-started"><a href="../login">Iniciar sesión</a></li>
        </ul>
      </nav>

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="registre" class="d-flex align-items-center">

    <div class="container">
      <div class="row">
        <div class="col-lg-8 d-lg-flex flex-lg-column justify-content-center align-items-stretch pt-5 pt-lg-0 order-2 order-lg-1" data-aos="fade-up">
          
          <div class="row">
            <div class="col-lg-12">
              <h1>Regístrese y se parte de la comunidad de los mejores talentos y profesionales</h1>        
            </div>
            <div class="col-lg-8">    
            
            <?php 
              /* Sección de alertas (captura de mensajes y errores) */
              if(isset($errors) && count($errors) > 0)
              {
              	foreach($errors as $error_msg)
              	{
              		echo '<div class="alert alert-danger">'.$error_msg.'</div>';
              	}
              }

              if(isset($alertEmail) && !empty($alertEmail))
              {
                echo '<div class="alert alert-warning">'.$alertEmail.'</div>';
              }

              if(isset($success))
              {
                echo '<div class="alert alert-success">'.$success.'</div>';
              }
             ?>

              <form method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>" role="form" class="php-email-form" data-aos="fade-up">
                <div class="form-group">
                  <input placeholder="Email" type="email" class="form-control" name="email" id="email" value="<?php echo ($valEmail??'')?>" />
                  <!--<div class="validate"></div>-->
                    <?php
                      echo '<div class="alertMessage">'.($alertMessage1??'').'</div>';
                    ?>
                </div>
                <div class="form-group">
                  <input placeholder="Contraseña" type="password" class="form-control" name="password" id="password" value="<?php echo ($valPassword??'')?>" />
                  <!--<div class="validate"></div>-->
                    <?php
                      echo '<div class="alertMessage">'.($alertMessage2??'').'</div>';
                    ?>
                </div>
                <div class="mb-3">

                  <div class="legal">
                    Al hacer clic en "Aceptar y registrarse", aceptas las <a href="../legal/user-agreement">Condiciones de uso</a>, 
                    la <a href="../legal/privacy-policy">Política de privacidad</a> y la <a href="../legal/cookie-policy">Política de cookies</a> de New Talents.
                  </div>                  

                </div>
                <button class="registre-btn" name="submit" type="submit">Aceptar y registrarse</button>
                
                  <div class="linea">o</div>
                
                <a href="#" class="google-btn"><i class="bx bxl-google"></i> Regístrate con Google</a>

                <p>¿Ya eres usuario de New Talents? <a href="../login">Iniciar sesión</a></p>

              </form>
            </div>

          </div>
        </div>        
        
        <div class="col-lg-4 d-lg-flex flex-lg-column align-items-stretch order-1 order-lg-2 hero-img" data-aos="fade-up">
          <div class="registre-img">
            <img src="../assets/img/registre-img.jpg" class="img-fluid" alt="">
          </div>
        </div>

      </div>
    </div>

  </section><!-- End Hero -->

  <!-- Vendor JS Files -->
  <script src="../assets/vendor/jquery/jquery.min.js"></script>
  <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../assets/vendor/jquery.easing/jquery.easing.min.js"></script>  
  <script src="../assets/vendor/owl.carousel/owl.carousel.min.js"></script>
  <script src="../assets/vendor/venobox/venobox.min.js"></script>
  <script src="../assets/vendor/aos/aos.js"></script>

  <!-- Template Main JS File -->
  <script src="../assets/js/main.js"></script>

</body>

</html>

4. Conclusiones

El uso de registrarse como usuario en una web otorga ciertos privilegios, sin embargo, mantener una conexión bajo la estructura de PDO PHP es muy recomendable con finalidad de evitar ataques de tipo inyección SQL y estar alineados con la vanguardia de la tecnología.

Disponible en GitHub

Directorio 01-Register

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

Ticker

PHP y MySQL - Registro de usuarios

Requisitos:

Lo que veremos en este tutorial:

1. Script de las tablas en MySQL.

2. Conectarse a MySQL:

3. Implementar sign-up.php:

3.1. Validaciones de los inputs vacíos (usuario y contraseña):

3.2. Botón Regístrese (validar / crear):

3.3. Código Completo PHP y HTML (guiarse de los comentarios):

4. Conclusiones

Disponible en GitHub

Publicadas por Hadsonpar

Publicar un comentario

3 Comentarios

MÁS POPULAR:

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Sígueme en:

Tags:

Acerca de mí:

Buscar:

Entradas:

Contacto

Publicaciones Aleatorias

Entradas Populares

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Footer Menu Widget

Ticker

PHP y MySQL - Registro de usuarios

Requisitos:

Lo que veremos en este tutorial:

1. Script de las tablas en MySQL.

2. Conectarse a MySQL:

3. Implementar sign-up.php:

3.1. Validaciones de los inputs vacíos (usuario y contraseña):

3.2. Botón Regístrese (validar / crear):

3.3. Código Completo PHP y HTML (guiarse de los comentarios):

4. Conclusiones

Disponible en GitHub

Publicadas por Hadsonpar

Tal vez te interesen estas entradas

Publicar un comentario

3 Comentarios

Redes Sociales

MÁS POPULAR:

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Sígueme en:

Tags:

Acerca de mí:

Buscar:

Entradas:

Contacto

Publicaciones Aleatorias

Entradas Populares

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Footer Menu Widget