3. CRUD Parte 1 (Insertar, Actualizar, Eliminar y Buscar)
Requisitos:
Para dar de alta un registro en MySQL desde PHP es necesario crear un formulario en HTML para que el usuario pueda agregar la información y con un botón de guardar enviara los datos a la tabla de nuestra base de datos.
El diseño para las pantallas y formularios sera responsivo, es decir, que las paginas se adapten al dispositivo que se este utilizando como: tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PCs, etcétera. Para esto utilizaremos el framework responsivo Bootstrap y jQuery.
El zip de bootstrap contiene 3 carpetas: css, fonts y js las cuales extraemos a la carpeta principal de la aplicación y el script de jQuery lo guaramos en la carpeta de js.
Ya teniendo esto creamos la pantalla principal:
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html lang="es"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h2 style="text-align:center">Curso de PHP y MySQL</h2> </div> <div class="row"> <a href="nuevo.php" class="btn btn-primary">Nuevo Registro</a> </div> </div> </body> </html> |
Ingresamos a la ruta http://localhost/curso y el resultado es el siguiente:
El botón llamara al script nuevo.php el cual es el formulario para ingresar los datos:
nuevo.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 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 |
<html lang="es"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h3 style="text-align:center">NUEVO REGISTRO</h3> </div> <form class="form-horizontal" method="POST" action="guardar.php" autocomplete="off"> <div class="form-group"> <label for="nombre" class="col-sm-2 control-label">Nombre</label> <div class="col-sm-10"> <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" required> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email" placeholder="Email" required> </div> </div> <div class="form-group"> <label for="telefono" class="col-sm-2 control-label">Telefono</label> <div class="col-sm-10"> <input type="tel" class="form-control" id="telefono" name="telefono" placeholder="Telefono"> </div> </div> <div class="form-group"> <label for="estado_civil" class="col-sm-2 control-label">Estado Civil</label> <div class="col-sm-10"> <select class="form-control" id="estado_civil" name="estado_civil"> <option value="SOLTERO">SOLTERO</option> <option value="CASADO">CASADO</option> <option value="OTRO">OTRO</option> </select> </div> </div> <div class="form-group"> <label for="hijos" class="col-sm-2 control-label">¿Tiene Hijos?</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" id="hijos" name="hijos" value="1" checked> SI </label> <label class="radio-inline"> <input type="radio" id="hijos" name="hijos" value="0"> NO </label> </div> </div> <div class="form-group"> <label for="intereses" class="col-sm-2 control-label">INTERESES</label> <div class="col-sm-10"> <label class="checkbox-inline"> <input type="checkbox" id="intereses[]" name="intereses[]" value="Libros"> Libros </label> <label class="checkbox-inline"> <input type="checkbox" id="intereses[]" name="intereses[]" value="Musica"> Musica </label> <label class="checkbox-inline"> <input type="checkbox" id="intereses[]" name="intereses[]" value="Deportes"> Deportes </label> <label class="checkbox-inline"> <input type="checkbox" id="intereses[]" name="intereses[]" value="Otros"> Otros </label> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <a href="index.php" class="btn btn-default">Regresar</a> <button type="submit" class="btn btn-primary">Guardar</button> </div> </div> </form> </div> </body> </html> |
El resultado es un formulario con diseño responsivo:
Al presionar en botón de guardar enviara los datos al script guardar.php para realizar la inserción en la base de datos:
guardar.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 53 54 55 56 57 58 |
<?php require 'conexion.php'; $nombre = $_POST['nombre']; $email = $_POST['email']; $telefono = $_POST['telefono']; $estado_civil = $_POST['estado_civil']; $hijos = isset($_POST['hijo']) ? $_POST['hijos'] : 0; $intereses = isset($_POST['intereses']) ? $_POST['intereses'] : null; $arrayIntereses = null; $num_array = count($intereses); $contador = 0; if($num_array>0){ foreach ($intereses as $key => $value) { if ($contador != $num_array-1) $arrayIntereses .= $value.' '; else $arrayIntereses .= $value; $contador++; } } $sql = "INSERT INTO personas (nombre, correo, telefono, estado_civil, hijos, intereses) VALUES ('$nombre', '$email', '$telefono', '$estado_civil', '$hijos', '$arrayIntereses')"; $resultado = $mysqli->query($sql); ?> <html lang="es"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="row" style="text-align:center"> <?php if($resultado) { ?> <h3>REGISTRO GUARDADO</h3> <?php } else { ?> <h3>ERROR AL GUARDAR</h3> <?php } ?> <a href="index.php" class="btn btn-primary">Regresar</a> </div> </div> </div> </body> </html> |
Al guardar correctamente el registro nos envía la siguiente pantalla:
