Ticker

6/recent/ticker-posts

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:

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

Lo que veremos en este tutorial:

  1. Script de las tablas en MySQL.
  2. Conectarse a MySQL.
  3. Implementar sign-up.php.
  4. 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?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):

  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
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<?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 ✌...!!!

Publicar un comentario

0 Comentarios