Ticker

6/recent/ticker-posts

PHP y MySQL - Botón Suscríbete

Hadsonpar diciembre 25, 2021

Continuando con la serie de tutoriales prácticos acerca del desarrollo haciendo uso de PHP en base a PDO y con base de datos MySQL, en este tutorial desarrollaremos el proceso de suscripción a nuestra web, con la finalidad de que el usuario pueda recibir por correo electrónico los próximos lanzamientos de ofertas o dependiendo el rubro o segmento del negocio.

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), AJAX

Lo que veremos en este tutorial:

  1. Crear la tabla email_info
  2. Crear HTML suscribete.php
  3. Implementar el script AJAX (Asynchronous JavaScript and XML)
  4. Crear registremail.php par las validaciones y registro en base de datos.
  5. Conclusiones

1. Crear tabla email_info

Se crea la tabla amil_info en la base de datos dbntalents visto en el anterior tutorial acerca de PHP y MySQL - Registro de usuarios y se hacer uso de PDO para la conexión a la base de datos MySQL:

Estructura de la tabla amil_info lo podrás encontrar en github:

1
2
3
4
5
create table email_info(
    email_id int PRIMARY KEY AUTO_INCREMENT,
    email varchar(120) null,
    registreDate timestamp NOT NULL DEFAULT current_timestamp()
)


¿Qué es una conexión PDO?

PDO (PHP Data Object) es una interfaz ligera y consistente para el acceso a bases de datos desde PHP de forma estándar, es decir, sin utilizar los métodos propios para cada gestor de bases de datos.

Con PDO desde PHP nos facilita la conexión a las base de datos como a MySQL, Oracle, Microsoft SQL Server y SQLite.


 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();
    }
?>


2. Crear HTML suscribete.php.

La página suscribete.php esta conformado por elemento de HTML section  (sección) de nombre newsletter (section id="newsletter"), donde dicha sección esta conformado por los siguientes elementos: un párrafo para el titulo, un formulario de nombre offer_form con la finalidad de realizar el registro según los elementos que lo conforman dicho formulario - el formulario esta compuesto por un input y un button; asimismo, la página  suscribete.php esta conformada por un div de nombre offer_msg  con la fin de poder capturar las alertas dinámicas de acuerdo a las validaciones que se realizan en la página registremail.php en base a la invocación que se realiza desde el script o código AJAX:

  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
<!DOCTYPE html>
<html lang="en">

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

      <title>Suscríbite | 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>

    <section id="newsletter" class="d-flex align-items-center">
	    <!-- container -->
    	<div class="container">
    		<!-- row -->
    		<div class="row">
    			<div class="col-lg-12">
    
    				<div class="newsletter">
    					<p>Suscribete para los próximos <strong>eventos</strong></p>
    					<form id="offer_form" onsubmit="return false">
    						<input class="input" type="email" id="email" name="email" placeholder="Enter Your Email">
    						<button class="newsletter-btn" value="Sign Up" name="signup_button" type="submit"><i class="bx bxl-facebook"></i> Suscribete</button>
    					</form>
    					<div class="" id="offer_msg">
                            <!--Alert para el registro-->
                        </div>
    					<ul class="newsletter-follow">
    						<li>
    							<a href="#"><i class="bx bxl-facebook"></i></a>
    						</li>
    						<li>
    							<a href="#"><i class="bx bxl-twitter"></i></a>
    						</li>
    						<li>
    							<a href="#"><i class="bx bxl-linkedin"></i></a>
    						</li>
    
    					</ul>
    				</div>
    			</div>
    		</div>
    		<!-- /row -->
    	</div>
    	<!-- /container -->
    </section>

    <!-- 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>

    <script>
        /*$(document).ready(function(){*/            
        $("#offer_form").on("submit",function(event){
        	event.preventDefault();
        	$(".overlay").show();
        	$.ajax({
        		url : "registremail.php",
        		method : "POST",
        		data : $("#offer_form").serialize(),
        		success : function(data){
        			$(".overlay").hide();
        			$("#offer_msg").html(data);
                
        		}
        	})
        })
        /*})*/
    </script>

    </body>
</html>


3. Implementar el script con AJAX

Implementamos una función para capturar la acción clic del button submit que es parte del formulario offer_form, seguidamente invocamos a través de AJAX la página registremail.php que se encarga de realizar la validaciones y registro en la base de datos es base a un método o verbo de tipo POST.

Recordemos para poder ejecutar el script AJAX necesitamos de la libre de jQuery para interactuar con los documentos HTML, es decir manipular el árbol DOM (Document Object Model).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    <script>
        /*$(document).ready(function(){*/            
        $("#offer_form").on("submit",function(event){
        	event.preventDefault();
        	$(".overlay").show();
        	$.ajax({
        		url : "registremail.php",
        		method : "POST",
        		data : $("#offer_form").serialize(),
        		success : function(data){
        			$(".overlay").hide();
        			$("#offer_msg").html(data);
                
        		}
        	})
        })
        /*})*/
    </script>


4. Crear registremail.php para las validaciones y registro en base de datos.

En esta página ejecutaremos código PHP con la finalidad de realizar las validaciones y devolverlos en un alert en base a código HML haciendo uso de la función nativa echo de PHP.

Realizamos 2 tipos de validaciones, es decir, validación según la consistencia del elemento HTML input de type="email" id="email" name="email" si esta declarado [(isset($_POST["email"]))], si contiene un valor [empty($vEmail)] y si cumple con el formato de tipo email []

La segunda validación consiste en ejecutar sentencia SQL con la finalidad de realizar la inserción en la base de datos.

Se de ingresa el correo electrónico en el elemento HTML input emil

No cuenta con el punto (.) en gmail.com


Cunado el registro ya existe en la base de datos - correo registrado


Cuando la sentencia SQL se ejecuto satisfactoriamente - registro ingresado

Recordemos de iniciar la sesión [session_start();] y referenciar la página [require_once('config/dbconfig.php');] donde se encuentra la conexión a la base de datos.

 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
<?php
session_start();
require_once('config/dbconfig.php');

if (isset($_POST["email"])) {
    $vEmail = $_POST['email'];
    $emailValidation = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9]+(\.[a-z]{2,4})$/";
    
    if(empty($vEmail)){
        echo "
			<div class='alert alert-warning'>
				<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b>Favor ingresa un correo electrónico...!</b>
			</div>
		";
		exit();
    }else{
        if(!preg_match($emailValidation,$vEmail)){
		echo "
			<div class='alert alert-warning'>
				<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
				<b>Este $vEmail no es válido..!</b>
			</div>
		";
		exit();
	}
        $sql      = "SELECT email_id FROM email_info WHERE email = :pemail LIMIT 1";
        $script   = $pdo->prepare($sql);
        $sqlEmail = ['pemail'=>$vEmail];
        $script->execute($sqlEmail);/* Ejecutar (DML) SELECT en base al filtro del e-mail ingresado */

        if($script->rowCount() > 0){
            echo "
                <div class='alert alert-danger'>
                    <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
                    <b>El correo electrónico ya está registrado</b>
                </div>
            ";
            exit();
        }else{

            $sql = "insert into email_info (email_id, email) values (:id, :pemail)";
            $handle   = $pdo->prepare($sql);
            $sqlParams = [':id'=>null,
                          ':pemail'=>$vEmail];
            $handle->execute($sqlParams);   /* Ejecutar (DML) INSERT */

                echo "<div class='alert alert-success'>
                    <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
                    <b>Gracias por suscribirse</b>
                </div>";              
            }        
    }    
}
?>


5. Conclusiones.

En este tutorial práctico elaboramos nuestro botón suscríbete haciendo uso de PHP en base a PDO para la conexión a la base de datos MySQL y se hace uso de Asynchronous JavaScript and XML o simplemente AJAX con la finalidad de realizar acciones XMLHttpRequest en nuestro formulario de validaciones.

Disponible en GitHub

Directorio 05-Suscribete

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