Crud en Javascript, API fetch, MySQL php y github desde cero

En esta sección mostramos cada uno de los pasos que vamos a seguir para realizar el CRUD. Crear una base de datos en MySQL y crear una tabla para almacenar los datos que se deseen manipular. Asegúrate de incluir una columna con una clave primaria y de configurar los campos adecuadamente para evitar la inyección SQL. Crea un archivo PHP para conectarte a la base de datos y realizar operaciones CRUD en ella. Puedes usar la función mysqli_connect para conectarte a la base de datos y luego utilizar consultas SQL para realizar las operaciones CRUD. Crea un archivo HTML5 y utiliza CSS3 y Bootstrap para dar formato y estilo a la interfaz de usuario. Puedes usar un formulario HTML para recopilar los datos del usuario y botones para enviar los datos al servidor. Utiliza JavaScript y la API Fetch para enviar los datos del formulario al servidor y para recibir y procesar los datos devueltos por el servidor. Puedes usar la función fetch para enviar una solicitud HTTP al servidor y procesar la respuesta. Utiliza Sweet Alert para mostrar mensajes al usuario cuando se realicen operaciones CRUD exitosas o se produzcan errores.

Aqui creamos la estructura de los directorios con los archivos basicos, hacemos un hola mundo, ejecutamos el servidor web xampp y vemos el funcionamiento desde el localhost, también creamos la base de datos con la tabla usuarios y cargamos algunos registros de prueba.

Aprende a insertar las librerias css y js requeridas por el framework bootstrap que te brindarán una experiencia de usuario mucho mas atractiva, asi como la incorporación de un menu navbar que se transforma en menu hamburguesa como resultado de un ajuste responsive.

Te mostramos como agregar un footer con links y copyright. También comenzamos a crear la tabla en donde se mostraran los elemento de la base de datos y por último se comienza a utilizar la libreria de javascript en donde se realiza la invocación al tooltip de bootstrap.

Hemos desarrollado el Modal para agregar elementos asi como también el Modal para editar elementos, adicionalmente incluimos el script con el CDN del sweet alert.

Aprende como realizar la conexión a la base de datos y la verificación. Creamos una funcion que a traves del fetch se comunica con la API en php para obtener los datos. También creamos un switch para evaluar el method y a traves del case realizar la consulta.

Aqui se enseña como utilizar POSTMAN para conectarse a un END POINT y consumir una API, también veremos la función para mostrar la lista de registros en la tabla y como iterar para agregar cada elemento a la tabla empleando document.getElementById("lista-elementos").innerHTML

Aprende como incorporar iconos en los botones con la libreria Font Awesome. Te enseño como editar un registro seleccionado a traves de una ventana modal haciendo uso de Fetch y dentro de la API saber distinguir si se trata de Obtener un registro en particular evaluando el $_GET['id']

Aqui te mostramos como escuchar el evento submit de un formulario para procesarlo una vez validado a traves de la función editarElemento la cual obtiene los datos del formulario, vuelve a validar los datos y muestra los mensajes con sweet alert. Enviamos los datos al archivo PHP encargado de actualizar el elemento en la base de datos con el Fetch y en este caso la API va a evaluar el método POST.

Vamos a realizar el procedimiento para agragar un regsitro en la base de datos escuchando el evento submit desde el formulario para lo cual utilizaremos una funcion la cual realizará las validaciones y mostrará mensajes con sweet alert y se comunicará con nuestra API por medio del FETCH, y cerrará la ventana modal y mostrará un mensaje swal. En la API se construyó un metodo POST con un condicional que evalua si existe el parámetro $_GET["opcion"].

Aqui se muestra el procedimiento para eliminar un registro determinado de la base de datos, a través de un funcion la cual muestra un mensaje de confirmación hecho en sweet alert y en caso de ser afirmativo entonces procesa un FETCH hacia la API en php con un metodo DELETE.

Verificación de los endpoint con Postman y demostración de la importancia de Establecer el juego de caracteres UTF-8 en la conexión mysqli_set_charset($conn,"utf8");

Aprende como crear un repositorio en github y utilizar los comandos básicos para subir el código desde tu proyecto en el editor visual studio code hasta tu branch dentro del repositorio en github.