En este tutorial aprenderemos a realizar transacciones de MySQL como son Insertar, Actualizar, eliminar y Buscar desde PHP.
Requisitos:
- Servidor Web, PHP y MySQL. Ver Capitulo 1
- Bootstrap. Descargar
- jQuery. Descargar
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 bootstrap contiene 3 carpetas: css, fonts y js las cuales extraemos a la carpeta principal de la aplicación quedando de la siguiente forma:
Y el script de jQuery lo guaramos en la carpeta de js.
Ya teniendo esto creamos la pantalla principal:
index.php
<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
<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:
guardar.php
<?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.' ';
$contador++;
} else {
$arrayIntereses .= $value;
}
}
}
$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:
Recuerda suscribirte a nuestro canal de YouTube, ¡¡¡Es Gratis!!!
Tutorial en Vídeo:
