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.

1. 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.

2. 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.

1. Configurar el servidor:

   • Instala y configura tu servidor local.
   • Crea una base de datos en MySQL para almacenar los datos.

2. Construir la API con PHP:

   • Define los endpoints para cada operación CRUD.
   • Conecta PHP con la base de datos MySQL.

3. 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.

4. 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" }

1. Configuración de la base de datos: Asegúrate de configurar correctamente el archivo configBD.php con las credenciales de tu base de datos.

2. Ejecución en un entorno local: Utiliza un servidor local como XAMPP, WAMP o Laragon para probar la API.

3. Validación de datos: Siempre valida los datos enviados al backend para prevenir errores o vulnerabilidades de seguridad.

4. 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! 🍀