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