CRUD con REACT , PHP y MySQL – Backend

Vamos a crear un CRUD (Create, Read, Update, Detele) usando REACT como frontend, PHP como backend y MySQL como motor de base de datos.

El frontend que vamos a hacer en REACT puede ser utilizado con cualquier backend, en otro articulo vamos a hacer un backend con python y fastapi por ejemplo, pero para este ejemplo use PHP por que ya saben que soy PHPLover.

Recuerden que el frontend es lo que ve el cliente o el lado del cliente y el backend es del lado del servidor 😉 .

Aqui te dejo la segunda parte donde ya creamos el Front-end del Proyecto en React

Base de datos

Primero vamos con la base de datos, para este ejemplo vamos a usar solo una tabla “contacto” en la base de datos “contactos”.

create database contactos;
use contactos;

CREATE TABLE `contacto` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `lastname` varchar(255) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `created_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
);

Vamos a hacer un CRUD para esa tabla y este crud nos va a servir para muchos proyectos mas.

Backend

El backend que creamos funciona para cualquier frontend que tenga las especificaciones de las rutas y respuestas de la API.

El backend en PHP vamos a tener 5 opciones.

• all: Devuelve un jSON con los datos de todos los contactos
• get: Devuelve un json con los datos de un contacto
• new: Crear un contacto – Recibe un json con los datos, devuelve success si todo salio bien
• update: Actualizar un contacto – Recibe un json con los datos, devuelve success si todo salio bien
• delete: Eliminar un contacto – Recibe el id del elemento a eliminar, devuelve success si todo salio bien

Este archivo lo vamos a nombrar como contactos.php aqui tenemos las opciones y la conexion a la base de datos usando mysqli.

<?php
/**
 * Backend para la aplicacion directorio de contactos en React o cualquier front end
 */

/* Cabecera para permitir solicitudes CORS */
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");

$conecction = new mysqli("localhost", "root", "", "contactos");
if(isset($_GET["opt"]) && $_GET["opt"]=="all"){
// opcion "all" para obtener todos los contactos
    $sql = "SELECT * FROM contacto";
    $result = $conecction->query($sql);
    $data = [];
    while($row = $result->fetch_assoc()){
        $data[] = $row;
    }
    echo json_encode($data);
} 
else if(isset($_GET["opt"]) && $_GET["opt"]=="get"){
// opcion "get" para obtener un contacto por id
    $id = $_GET["id"];
    $sql = "SELECT * FROM contacto WHERE id = $id";
    $result = $conecction->query($sql);
    if($result->num_rows > 0){
        echo json_encode($result->fetch_assoc());
    } else {
        echo json_encode(["status" => "error", "message" => "Contacto no encontrado"]);
    }
}
elseif(isset($_GET["opt"]) && $_GET["opt"]=="new"){
    // opcion "new" para crear un nuevo contacto
    $datos = json_decode(file_get_contents('php://input'), true);
    $name = $datos["name"];
    $lastname = $datos["lastname"];
    $phone = $datos["phone"];
    if(!empty($name) && !empty($lastname) && !empty($phone)){
    $sql = "INSERT INTO contacto (name, lastname, phone, created_at) VALUES ('$name', '$lastname', '$phone', NOW())";
    if($conecction->query($sql) === TRUE){
        echo json_encode(["status" => "success"]);
    } else {
        echo json_encode(["status" => "error", "message" => $conecction->error]);
    }
    } else {
        echo json_encode(["status" => "error", "message" => "Faltan datos"]);
    }


}
else if(isset($_GET["opt"]) && $_GET["opt"]=="update"){
    // opcion "update" para actualizar un contacto existente
    $datos = json_decode(file_get_contents('php://input'), true);
    $id = $datos["contact_id"];
    $name = $datos["name"];
    $lastname = $datos["lastname"];
    $phone = $datos["phone"];

    if(!empty($id) && !empty($name) && !empty($lastname) && !empty($phone)){
    $sql = "UPDATE contacto SET name='$name', lastname='$lastname', phone='$phone' WHERE id=$id";
    if($conecction->query($sql) === TRUE){
        echo json_encode(["status" => "success"]);
    } else {
        echo json_encode(["status" => "error", "message" => $conecction->error]);
    }
    } else {
        echo json_encode(["status" => "error", "message" => "Faltan datos"]);
    }
}
else if(isset($_GET["opt"]) && $_GET["opt"]=="delete"){
    // opcion "delete" para eliminar un contacto por id
    $id = $_GET["id"];
     $sql = "DELETE FROM contacto WHERE id = $id";

    if($conecction->query($sql) === TRUE){
        echo json_encode(["status" => "success"]);
    } else {
        echo json_encode(["status" => "error", "message" => $conecction->error]);
    }
}

?>

Este backend lo vamos a poner en nuestro servidor XAMPP en la carpeta “directoriotel” para que al acceder a esta API usemos la URL: http://localhost/directoriotel/contactos.php

Esta API es provisional solo para pruebas, pero se puede mejorar claro y agregar mas seguridad, en otro post veremos como hacerlo.

Descargar

A continuacion el link de descarga: https://drive.google.com/file/d/1cGEU84VgBort2D_10LdWYQfWG4Vhf7CW/view

En el siguiente articulo veremos el lado del cliente o frontend.