Como crear, listar, actualizar y eliminar productos con PHP y Mysql sin refrescar la pagina web

in Develop Spanish3 years ago (edited)
Hoy aprenderas cómo crear un crud con php conectándose a una base de datos mysql, en el frontend solo usaremos javascript para consumir los datos que mysql nos proporcionará a través de php.

PHP

Vamos a crear la conexión con mysql

database.php

<?php $connection = mysqli_connect(
    "localhost", "root", "", "products_app"
);
if(!$connection) echo 'Error connecting to database';
?>




Vamos a crear el único archivo html del crud, contendrá un formulario donde crearemos los productos y junto a él listaremos todos los productos.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      How create a simple CRUD (Products) with PHP and Javascript (Fetch) and
      Materialize
    </title>
    (html comment removed: Import Google Icon Font)
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    (html comment removed:  Compiled and minified CSS )
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <link rel="stylesheet" href="custom.css">
    <script src="main.js" defer></script>
  </head>
  <body>
    <nav class="blue darken-4">
      <div class="nav-wrapper container">
        <a href="/" class="btn-floating btn-large pulse cyan"
          ><i class="material-icons">code</i></a
        >
        <ul id="nav-mobile" class="right">
          <li>
            <a href="#!" class="brand-logo"><small>Jfdesousa7</small></a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="main container">
      <h4>
        How create a simple CRUD (Products) with PHP and Javascript (Fetch) and
        Materialize
      </h4>
      <div class="row" style="padding-top: 40px">
        <div class="col s12"></div>
        <div class="col s6">
          <div class="card">
            <form class="col s12" id="form" autocomplete="off">
              <input type="hidden" id="id" value="">
              <div class="row">
                <h6>New Item
                <div class="input-field col s12">
                  <input
                    autofocus
                    placeholder="Item Name"
                    id="item"
                    type="text"
                    class="validate"
                  />
                </div>
                <div class="input-field col s12">
                  <input
                    placeholder="Item Price"
                    id="price"
                    type="number"
                    step=".01"
                    class="validate"
                  />
                </div>
                <button
                  class="btn waves-effect waves-light"
                  type="submit"
                  name="action"
                >
                  Submit
                  <i class="material-icons right">send</i>
                </button>
              </div>
            </form>
          </div>
        </div>
        <div class="col s6">
          <h6>List of Items</h6>
          <table>
            <thead>
              <tr>
                <th>Item Name</th>
                <th>Item Price</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
          </table>
        </div>
      </div>
   </div>
    <footer class="page-footer blue darken-4">
        <div class="footer-copyright">
          <div class="container">
          © 2021
          <a class="grey-text text-lighten-3 right" href="https://hive.blog/@jfdesousa7">Visit my hive profile jfdesousa7</a>
          </div>
        </div>
      </footer>
    <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </body>
</html>



Como framework de css usaremos en este caso Materialize https://materializecss.com/getting-started.html

Añadiremos un poco de estilos personalizados

custom.css

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
 }
.main {
    flex: 1 0 auto;
}
.page-footer {
    padding-top: 0;
}


Crearemos el archivo principal .js que comunicará el frontend (browser-javascript) con el backend (php-mysql)

main.js

const tbody = document.querySelector("#tbody");
let edit = false;
async function main() {
  edit = false;
  tbody.innerHTML = "";
  const result = await fetch("fetchAllProducts.php");
  const data = await result.json();
  console.log(data);
  return data.map((i) => {
    const tr = document.createElement("tr");
    tr.id = i.id;
    const td1 = document.createElement("td");
    const td2 = document.createElement("td");
    const td3 = document.createElement("td");
    const item = document.createTextNode(i.item);
    const price = document.createTextNode(`$ ${i.price}`);
    const actions = `<a class="btn-floating btn-small waves-effect waves-light yellow"><i class="material-icons itemEdit">edit</i></a> <a class="btn-floating btn-small waves-effect waves-light red "><i class="material-icons itemDelete">delete</i></a>`;
    td1.appendChild(item);
    td2.appendChild(price);
    td3.innerHTML = actions;
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tbody.appendChild(tr);
  });
}
document.addEventListener("DOMContentLoaded", function () {
  main();
});
const classDelete = "itemDelete";
const classEdit = "itemEdit";
document.body.addEventListener("click", (e) => {
  const valor = e.target.className;
  const arrayOfClass = valor.split(" ");
  if (arrayOfClass.includes(classDelete) || arrayOfClass.includes(classEdit)) {
    const element = e.target.parentElement.parentElement.parentElement;
    const id = element.getAttribute("id");
    if (arrayOfClass.includes(classDelete)) {
      deleteItem(id);
    } else if (arrayOfClass.includes(classEdit)) {
      editItem(id);
    }
  }
});
// edit item
async function editItem(id) {
  const result = await fetch("getSingleProduct.php", {
    method: "POST",
    body: JSON.stringify({
      id,
    }),
    headers: {
      "Content-Type": "application/json",
    },
  });
  const data = await result.json();
  console.log(data);
  document.getElementById("item").value = data.item;
  document.getElementById("price").value = data.price;
  document.getElementById("id").value = id;
  edit = true;
}
// delete item
async function deleteItem(id) {
  await fetch("deleteProduct.php", {
    method: "POST",
    body: JSON.stringify({
      id,
    }),
    headers: {
      "Content-Type": "application/json",
    },
  });
  main();
}
//add item
const form = document.querySelector("#form");
const item = document.querySelector("#item");
const price = document.querySelector("#price");
const id = document.querySelector("#id");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const url = !edit ? "fetchAddProduct.php" : "fetchEditProduct.php";
  const result = await fetch(url, {
    method: "POST",
    body: JSON.stringify({
      item: item.value,
      price: price.value,
      id: id.value,
    }),
    headers: {
      "Content-Type": "application/json",
    },
  });
  const r = await result.json();
  console.log(r);
  main();
  form.reset();
});


Listaremos todos los productos de la tabla products

fetchAllProducts.php

<?php include "database.php";
$array = array();
$query = "select * from products order by id DESC";
$sql = mysqli_query($connection, $query);
while($rows = mysqli_fetch_assoc($sql)){
    $array[] = array("id" => $rows["id"], "item" => $rows["item"], "price" => $rows["price"]);
}
echo json_encode($array);
?>






Obtener un unico producto

getSingleProduct.php

<?php include "database.php";
$input = file_get_contents("php://input");
$data = json_decode($input);
$id = mysqli_real_escape_string($connection, $data->id) ;
$query = "select * from  products where id=".$id."";
$sql =mysqli_fetch_assoc(mysqli_query($connection, $query)) ;
$json = array("item"=>$sql["item"], "price" => $sql["price"] );
if (!$sql) {
    die('Failed.');
}
echo json_encode($json);
?>




Creando un producto

fetchAddProduct.php

<?php include "database.php";
$input = file_get_contents("php://input");
$data = json_decode($input);
$item = mysqli_real_escape_string($connection, $data->item) ;
$price = mysqli_real_escape_string($connection, $data->price) ;
$query = "insert into products(item, price) values ('".$item."', ".$price.")";
$sql = mysqli_query($connection, $query);
if (!$sql) {
    die('Failed.');
}
echo json_encode('Success');
?>


Eliminando un producto

deleteProduct.php

<?php include "database.php";
$input = file_get_contents("php://input");
$data = json_decode($input);
$id = mysqli_real_escape_string($connection, $data->id) ;
$query = "delete from products where id=".$id."";
$sql = mysqli_query($connection, $query);
if (!$sql) {
    die('Failed.');
}
echo json_encode('Success');
?>


Actualizar producto

fetchEditProduct.php

<?php include "database.php";
$input = file_get_contents("php://input");
$data = json_decode($input);
$item = mysqli_real_escape_string($connection, $data->item) ;
$price = mysqli_real_escape_string($connection, $data->price) ;
$id = mysqli_real_escape_string($connection, $data->id) ;
$query = "update products set item='".$item."' , price=".$price."  where id=".$id."";
$sql = mysqli_query($connection, $query);
if (!$sql) {
    die('Failed.');
}
echo json_encode('Success');
?>


Imagen final de nuestro CRUD en PHP con Mysql



Y con esos amigos llegamos al final del tutorial, espero que lo hayan disfrutado y ¡hasta la próxima!


Para ver el CRUD en Vivo, click https://crud-php-products.tupaginaonline.net/




Visite mi sitio web oficial para presupuestos y mucho más

TupaginaOnline.net

Sort:  

¡Felicitaciones!



Estás participando para optar a la mención especial de nuestra COMUNIDAD (Recompensa de 1 Hive), también has recibido 1 ENTROKEN.

1. Invierte en el PROYECTO ENTROPÍA y recibe ganancias semanalmente. Entra aquí para más información.

2. Contáctanos en Discord: https://discord.gg/hkCjFeb

3. Suscríbete a nuestra COMUNIDAD, apoya al trail de @Entropia y así podrás ganar recompensas de curación de forma automática. Entra aquí para más información sobre nuestro trail.

4. Creación de cuentas nuevas de Hive aquí.

5. Visita nuestro canal de Youtube.

Atentamente

El equipo de curación del PROYECTO ENTROPÍA