CRUD en PHP con JavaScript, SweetAlert2 y MySQL para principiantes.
Hola developers, en esta sección vamos ver cómo crear un CRUD (créate,read,update y delete), para ello vamos a utilizar como lenguaje Backend PHP, lenguaje Frontend JavaScript, Gestor de base de datos MySQL. Con el objetivo de aprender como se programa y se estructura un proyecto.
Autor: rogercode. Full stack developerEstructura principal del proyecto PHP (MVC).
Base de datos: Contiene el backup de la base de datos
controlador: Contiene todas las funciones que permiten interactuar con la base de datos.
js: Contiene las funciones que permiten enviar y recibir la informacion al controlador.
modelo: Contiene las funciones que permiten comunicar el controlador con la vista.
php: Contiene la conexión a la base de datos.
index.php: Es la vista principal del proyecto.
Primer paso.
Descargar e instalar xampp1. Una vez instalado dirígete a la siguiente ruta -> C:\xampp\htdocs
2. Dentro de la ruta crear la carpeta crud.
3. Accedemos a la carpeta crud y creamos ahí la estructura del proyecto como en la imagen anterior.
Código fuente de cada uno de los archivos utilizados para el proyecto.
1 base/base_mysql.sql
CREATE DATABASE /*!32312 IF NOT EXISTS*/'ejemplo' /*!40100 DEFAULT CHARACTER SET latin1 */;
USE 'ejemplo';
/*Table structure for table 'persona' */
DROP TABLE IF EXISTS 'persona';
CREATE TABLE 'persona' (
'idpersona' int(11) NOT NULL AUTO_INCREMENT,
'nombre' varchar(200) DEFAULT NULL,
'apellidos' varchar(200) DEFAULT NULL,
'sexo' varchar(50) DEFAULT NULL,
PRIMARY KEY ('idpersona')
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;
/*Data for the table 'persona' */
insert into 'persona'('idpersona','nombre','apellidos','sexo') values
(1,'Felicia',' Leandra','Femenino'),(2,'Gaspar','Marcelo','Masculino'),
(3,'Victor','María','Masculino'),
(4,'Celeste','Martín','Femenino'),
(5,'Andrea','Martinez','Femenino'),
(6,'Antonio','Nicolás','Masculino'),
(7,'Paula',' Renzo','Masculino'),
(8,'test','test','Masculino');
2 index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div> class="container">
<form> action="" id="form">
<div> class="row">
<input> type="text" name="tipo_operacion" value="guardar" hidden="true">
<div> class="col-md-4">
<input> type="text" name="nombre" id="nombre" class="form-control" placeholder="Ingresa tu nombre" autocomplete="off">
</div>
<div> class="col-md-4">
<input> type="text" name="apellidos" id="apellidos" class="form-control" placeholder="Ingresa tus apellidos" autocomplete="off">
</div>
<div> class="col-md-2">
<select> name="sexo" id="sexo" class="form-control">
<option> value="">Elige el sexo</option>
<option> value="Masculino">Masculino</option>
<option> value="Femenino">Femenino</option>
</select>
</div>
<div> class="col-md-2">
<button> type="submit" class="btn btn-info btn-block">Aceptar</button>
</div>
</div>
</form>
</div>
<br>
<div> class="container" id="mensajes"></div>
<br>
<div> class="container">
<table> class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apeliidos</th>
<th>Sexo</th>
<th>Acciones</th>
</tr>
</thead>
<tbody> id="tabla_persona">
<?php>
<require_once "php/conexion.php";
<require_once "controlador/ConsultasController.php";
<$sentencia = new consultas();
<$mostrardatos = $sentencia->select_persona();
<foreach($mostrardatos as $res)
{
$id = $res["idpersona"];
echo "<tr>";
echo "<td>".$res["idpersona"]."</td>";
echo "<td>".$res["nombre"]."</td>";
echo "<td>".$res["apellidos"]."</td>";
echo "<td>".$res["sexo"]."</td>";
echo "<td> class='text-center'>
<button< class='btn btn-primary btn-sm' onclick='editar($id);'>Editar</button<
<button< class='btn btn-danger btn-sm'onclick='eliminar($id);'>Eliminar</button<
</td>";
echo "</tr>";
}
<?>
</tbody>
</table>
</div>
<script> src="https://cdn.jsdelivr.net/npm/sweetalert2@9"<</script>
<script> src="js/funciones.js"<</script>
</body>
</html>
3 controlador/ConsultasController.php
<?php
class consultas extends dbconexion{
public function select_persona()
{
$sqlp = dbconexion::conexion()->prepare("SELECT * FROM persona");
$sqlp->execute();
return $array = $sqlp->fetchAll(PDO::FETCH_ASSOC);
}
public function insert_persona($nombre,$apellidos,$sexo)
{
$sql = dbconexion::conexion()->prepare("INSERT INTO persona(nombre,apellidos,sexo)VALUES('$nombre','$apellidos','$sexo')");
if ($sql->execute()) {
$resultado = self::select_persona();
return $resultado;
}
}
public function obtener_persona($id){
$sql = dbconexion::conexion()->prepare("SELECT * FROM persona WHERE idpersona='".$id."'");
if($sql->execute()){
return $array = $sql->fetchAll(PDO::FETCH_ASSOC);
}else {
return "error";
}
}
public function update_persona($id,$nombre,$apellidos,$sexo){
$sql = dbconexion::conexion()->prepare("UPDATE persona SET nombre='".$nombre."', apellidos='".$apellidos."', sexo='".$sexo."' WHERE idpersona='".$id."'");
$sql->execute();
if ($sql->rowCount() > 0) {
$resultado = self::select_persona();
return $resultado;
}else{
return "error";
}
}
public function eliminar_persona($id){
$sql=dbconexion::conexion()->prepare("DELETE FROM persona WHERE idpersona='".$id."'");
$sql->execute();
if ($sql->rowCount() > 0) {
$resultado = self::select_persona();
return $resultado;
// return "Se elimino correctamente el registro";
}else{
return "Ocurrio un problema";
}
}
}
?>
4 modelo/ejecutarconsultas.php
<?php
require_once "../php/conexion.php";
require_once "../controlador/ConsultasController.php";
$tipo_consulta = $_POST['tipo_operacion'];
switch ($tipo_consulta) {
case 'guardar':
$nombre = $_POST['nombre'];
$apellidos = $_POST['apellidos'];
$sexo =$_POST['sexo'];
$consultas = new consultas();
$ejecutar = $consultas->insert_persona($nombre,$apellidos,$sexo);
echo json_encode($ejecutar);
break;
case 'editar':
$id = $_POST['id'];
$consultas = new consultas();
$ejecutar = $consultas->obtener_persona($id);
echo json_encode($ejecutar);
break;
case 'update':
$id = $_POST["idu"];
$nombre = $_POST["nombreu"];
$apellidos= $_POST["apellidosu"];
$sexo= $_POST["sexou"];
$consultas = new consultas();
$ejecutar = $consultas->update_persona($id,$nombre,$apellidos,$sexo);
echo json_encode($ejecutar);
break;
case 'eliminar':
$id = $_POST['id'];
$consultas = new consultas();
$ejecutar = $consultas->eliminar_persona($id);
echo json_encode($ejecutar);
break;
default:
# code...
break;
}
?>
5 php/conexion.php
<?php
const SERVER="localhost";
const DB="ejemplo";
const USER="root";
const PASS="";
const UTF8="utf8";
const SGBD= "mysql:host=".SERVER.";dbname=".DB.";charset=".UTF8;
class dbconexion{
protected function conexion()
{
$con = new PDO(SGBD,USER,PASS);
return $con;
}
}
?>
Segundo paso.
Ejecutar xampp e iniciar Apache y MySQL como se muestra en la imagen de abajo.
Tercer paso.
Ir al navegador y escribir localhost/crud se mostrara el proyecto como en la imagen..