Esta es una guía para crear un CRUD con JavaScript y ademas crear una API RESTful básica usando PHP y el gestor de base de datos relacional MySQL. Incluye funcionalidades CRUD completas (Crear, Leer, Actualizar y Eliminar) junto con un frontend en JavaScript para interactuar con la API.
Esta guía te enseña paso a paso cómo desarrollar un CRUD completo (Crear, Leer, Actualizar y Eliminar) utilizando tecnologías esenciales.
Aprenderás a:
- Diseñar una API RESTful básica utilizando PHP y el gestor de bases de datos relacional MySQL.
- Crear un frontend interactivo con JavaScript para consumir la API y gestionar datos en tiempo real.
Este proyecto es ideal para construir aplicaciones funcionales, aprender los fundamentos de la comunicación cliente-servidor y sentar las bases para proyectos más avanzados.
-
Backend:
- Implementación de una API RESTful básica con PHP.
- Gestión de una base de datos MySQL para almacenar información.
- Funcionalidades completas de CRUD:
- Crear: Agregar nuevos registros a la base de datos.
- Leer: Recuperar y listar registros.
- Actualizar: Editar información existente.
- Eliminar: Borrar registros de forma segura.
-
Frontend:
- Interfaz dinámica construida con JavaScript.
- Consumo de la API RESTful utilizando
fetch
- Actualizaciones en tiempo real para reflejar cambios en la interfaz.
- PHP 8.x.
- MySQL o MariaDB como base de datos.
- Servidor local (XAMPP, WAMP, Laragon, etc.).
- Navegador moderno compatible con JavaScript.
-
Configurar el servidor:
- Instala y configura tu servidor local.
- Crea una base de datos en MySQL para almacenar los datos.
-
Construir la API con PHP:
- Define los endpoints para cada operación CRUD.
- Conecta PHP con la base de datos MySQL.
-
Desarrollar el Frontend con JavaScript:
- Diseña una interfaz que permita gestionar los datos (formularios y tablas).
- Implementa las llamadas a la API para interactuar con el backend.
-
Probar la aplicación:
- Verifica las funcionalidades CRUD desde la interfaz.
- Asegúrate de que las operaciones se reflejen correctamente en la base de datos.
crud-javascript-php/
├── index.html
├── assets/
│ ├── css/
│ ├── js/app.js
├── backend-php/
│ ├── configBD.php
│ ├── api.php
├── README.md
👉 http://localhost/crud-javascript-php/backend-php/api.php
Ejemplo de respuesta:
[
{
"id": "1",
"name": "Urian",
"email": "urian@gmail.com",
"age": "35",
"speak_english": "Si",
"created_at": "2025-01-13 15:21:48",
"updated_at": "2025-01-13 15:21:54"
},
{
"id": "2",
"name": "Brenda",
"email": "brenda@gmail.com",
"age": "18",
"speak_english": "No",
"created_at": "2025-01-14 15:24:06",
"updated_at": "2025-01-15 15:24:06"
}
]
👉 http://localhost/crud-javascript-php/backend-php/api.php?id=1
Ejemplo de respuesta:
{
"id": "1",
"name": "Urian",
"email": "urian@gmail.com",
"age": "35",
"speak_english": "Si",
"created_at": "2025-01-13 15:21:48",
"updated_at": "2025-01-13 15:21:54"
}
👉 http://localhost/crud-javascript-php/backend-php/api.php
Datos de ejemplo:
{
"name": "Braudin",
"email": "braudin@gmail.com",
"age": "38",
"speak_english": "No"
}
Ejemplo de respuesta:
{
"message": "Nuevo usuario creado correctamente"
}
👉 http://localhost/crud-javascript-php/backend-php/api.php?id=3
Datos de ejemplo:
{
"name": "Braudin Laya",
"email": "braudin@gmail.com",
"age": "38",
"speak_english": "No"
}
Ejemplo de respuesta:
{
"message": "Usuario actualizado correctamente"
}
👉 http://localhost/crud-javascript-php/backend-php/api.php?id=3
Ejemplo de respuesta:
{
"message": "Usuario eliminado correctamente"
}
-
Configuración de la base de datos: Asegúrate de configurar correctamente el archivo
configBD.php
con las credenciales de tu base de datos. -
Ejecución en un entorno local: Utiliza un servidor local como XAMPP, WAMP o Laragon para probar la API.
-
Validación de datos: Siempre valida los datos enviados al backend para prevenir errores o vulnerabilidades de seguridad.
-
Pruebas de la API: Puedes utilizar herramientas como Postman o cURL para probar los endpoints.
Visita la página oficial: [nextjstoastnotify.com](https://www.nextjstoastnotify.com/) para obtener documentación y ejemplos prácticos.
También puedes explorar su paquete en NPM: [nextjs-toast-notify.](https://www.npmjs.com/package/nextjs-toast-notify)
Comenta a otros sobre este proyecto 📢
Invita una cerveza 🍺 o un café ☕
Paypal iamdeveloper86@gmail.com
Da las gracias públicamente 🤓.
Y no olvides dejar tu estrella ⭐ en el repositorio...
¡dicen que trae buena suerte! 🍀