Creación de un CRUD de Usuarios con PHP, MySQL y AJAX

Creación de un CRUD de Usuarios con PHP, MySQL y AJAX

Un CRUD (Create, Read, Update, Delete) de Usuarios con PHP, MySQL y AJAX es una aplicación web que permite la gestión de usuarios

Paso 1: Configuración de la Base de Datos

Primero, necesitamos crear una base de datos MySQL y una tabla de usuarios. Puedes hacerlo con el siguiente script SQL:

CREATE DATABASE mi_base_de_datos;
USE mi_base_de_datos;
CREATE TABLE usuarios (
 id INT AUTO_INCREMENT PRIMARY KEY,
 nombre VARCHAR(50),
 email VARCHAR(50),
 telefono VARCHAR(15)
);

Paso 2: Conexión a la Base de Datos

Crea un archivo config.php para manejar la conexión a la base de datos:

<?php
$host = "localhost";
$db = "mi_base_de_datos";
$user = "root";
$pass = "";
try {
 $conn = new PDO("mysql:host=$host;dbname=$db", $user, $pass);
} catch (PDOException $e) {
 echo "Error: " . $e->getMessage();
}
?>

Paso 3: Creación del Backend PHP

Necesitaremos un script PHP para manejar las solicitudes CRUD. Crea un archivo api.php:

<?php
include_once 'config.php';
// Leer usuarios
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
 $stmt = $conn->prepare("SELECT * FROM usuarios");
 $stmt->execute();
 $usuarios = $stmt->fetchAll();
 echo json_encode($usuarios);
}
// Crear usuario
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 $nombre = $_POST['nombre'];
 $email = $_POST['email'];
 $telefono = $_POST['telefono'];
 $stmt = $conn->prepare("INSERT INTO usuarios (nombre, email, telefono) VALUES (?, ?, ?)");
 $stmt->execute([$nombre, $email, $telefono]);
}
// Actualizar usuario
if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
 parse_str(file_get_contents("php://input"), $_PUT);
 $id = $_PUT['id'];
 $nombre = $_PUT['nombre'];
 $email = $_PUT['email'];
 $telefono = $_PUT['telefono'];
 $stmt = $conn->prepare("UPDATE usuarios SET nombre = ?, email = ?, telefono = ? WHERE id = ?");
 $stmt->execute([$nombre, $email, $telefono, $id]);
}
// Eliminar usuario
if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
 parse_str(file_get_contents("php://input"), $_DELETE);
 $id = $_DELETE['id'];
 $stmt = $conn->prepare("DELETE FROM usuarios WHERE id = ?");
 $stmt->execute([$id]);
}
?>

Paso 4: Creación del Frontend con AJAX

Finalmente, necesitaremos una interfaz de usuario para interactuar con nuestra API. Puedes hacerlo con HTML y AJAX. Crea un archivo index.html:

<!DOCTYPE html>
<html>
<head>
 <title>CRUD de Usuarios</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 <!-- Formulario para crear y actualizar usuarios -->
 <form id="usuarioForm">
 <input type="hidden" id="usuarioId">
 <input type="text" id="nombre" placeholder="Nombre">
 <input type="email" id="email" placeholder="Email">
 <input type="tel" id="telefono" placeholder="Teléfono">
 <button type="submit">Guardar</button>
 </form>
 <!-- Tabla para mostrar usuarios -->
 <table id="tablaUsuarios">
 <tr>
 <th>Nombre</th>
 <th>Email</th>
 <th>Teléfono</th>
 <th>Acciones</th>
 </tr>
 </table>
 <script>
 $(document).ready(function() {
 // Leer usuarios
 $.ajax({
 url: 'api.php',
 type: 'GET',
 success: function(usuarios) {
 usuarios.forEach(function(usuario) {
 $('#tablaUsuarios').append('<tr><td>' + usuario.nombre + '</td><td>' + usuario.email + '</td><td>' + usuario.telefono + '</td><td><button class="e });
 }
 });
 // Crear y actualizar usuarios
 $('#usuarioForm').submit(function(e) {
 e.preventDefault();
 var id = $('#usuarioId').val();
 var nombre = $('#nombre').val();
 var email = $('#email').val();
 var telefono = $('#telefono').val();
 var metodo = id ? 'PUT' : 'POST';
 $.ajax({
 url: 'api.php',
 type: metodo,
 data: { id: id, nombre: nombre, email: email, telefono: telefono },
 success: function(usuario) {
 location.reload();
 }
 });
 });
 // Editar usuarios
 $(document).on('click', '.editar', function() {
 var id = $(this).data('id');
 $.ajax({
 url: 'api.php',
 type: 'GET',
 success: function(usuarios) {
 var usuario = usuarios.find(function(usuario) {
 return usuario.id == id;
 });
 $('#usuarioId').val(usuario.id);
 $('#nombre').val(usuario.nombre);
 $('#email').val(usuario.email);
 $('#telefono').val(usuario.telefono);
 }
 });
 });
 // Eliminar usuarios
 $(document).on('click', '.eliminar', function() {
 var id = $(this).data('id');
 $.ajax({
 url: 'api.php',
 type: 'DELETE',
 data: { id: id },
 success: function(usuario) {
 location.reload();
 }
 });
 });
 });
 </script>
</body>
</html>

Create (Crear): Esta función permite a los usuarios ingresar nuevos registros de usuario en la base de datos. Los datos del usuario se envían a un servidor a través de un formulario HTML y luego se insertan en la base de datos MySQL utilizando PHP.

Read (Leer): Esta función recupera los registros de usuario de la base de datos MySQL y los muestra en la interfaz de usuario. PHP se utiliza para recuperar los datos y AJAX se utiliza para actualizar la interfaz de usuario sin necesidad de recargar la página.

Update (Actualizar): Esta función permite a los usuarios modificar los registros de usuario existentes. Al igual que con la función de creación, los datos del usuario se envían a través de un formulario HTML y luego se actualizan en la base de datos MySQL utilizando PHP.

Delete (Eliminar): Esta función permite a los usuarios eliminar registros de usuario de la base de datos. Cuando un usuario selecciona un registro para eliminar, PHP se utiliza para eliminar el registro de la base de datos MySQL.

¡Eso es todo! Ahora tienes un CRUD de usuarios con PHP, MySQL y AJAX. Recuerda que este es un ejemplo básico y para una aplicación en producción necesitarás considerar aspectos como la validación de datos y la seguridad. ¡Espero te se útil en tu proyecto!😎

Publicaciones relacionadas

Creación de un API RESTFUL GET, POST, PUT, DELETE en Vue.js 3 y PHP primera parte

Creación de un API RESTFUL GET, POST, PUT, DELETE en Vue.js 3 y PHP primera parte

Cómo implementar un sistema de usuarios con sus peticiones GET, POST, PUT, DELETE en Vue.js y PHP.

¿Qué es XAMPP y para qué sirve?

¿Qué es XAMPP y para qué sirve?

XAMPP es una distribución de Apache que incluye varios programas libres para crear y probar aplicaciones web en tu propio ordenador.

Eduardo Nava
Eduardo Nava

Hola mi nombre es Eduardo Nava, Soy programador, diseñador web, móvil y de videojuegos.

El mundo digital avanza cada día.

Soy completamente autodidacta, por eso te ofrezco muchos de mis conocimientos para puedas aprender más fácilmente y más rápido de lo que  hice y hago cada día.

Mi propósito es tratar mi pasión para enseñar tecnologías que avanzan cada día a todas esas personas, que quieran iniciarse en este mundo de forma actualizada.