Scribd
Upload
33 views7 pages

Add, Update, and Delete Products in React

crud react axios api php

Uploaded by

test obayid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views7 pages

Add, Update, and Delete Products in React

crud react axios api php

Uploaded by

test obayid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Add product

[Link] import React, { useState } from 'react';


import axios from 'axios';

const AddProduct = () => {


const [formData, setFormData] = useState({
nom: '',
description: '',
prix: '',
categorie_id: '',
image: null,
});

const handleChange = (e) => {


const { name, value, files } = [Link];
setFormData({
...formData,
[name]: files ? files[0] : value,
});
};

const handleAddProduct = async (e) => {


[Link]();
const data = new FormData();
[Link]("nom", [Link]);
[Link]("description", [Link]);
[Link]("prix", [Link]);
[Link]("categorie_id", formData.categorie_id);
if ([Link]) [Link]("image", [Link]);

try {
const response = await
[Link]('[Link] data, {
headers: { "Content-Type": "multipart/form-data" }
});
if ([Link]) {
alert("Produit ajouté avec succès !");
setFormData({ nom: '', description: '', prix: '', categorie_id: '', image: null
});
} else {
alert("Erreur lors de l'ajout du produit.");
}
} catch (error) {
[Link]("Erreur lors de l'ajout du produit : ", error);
}
};

return (
<form onSubmit={handleAddProduct}>
<input type="text" name="nom" value={[Link]}
onChange={handleChange} placeholder="Nom" required />
<textarea name="description" value={[Link]}
onChange={handleChange} placeholder="Description"
required></textarea>
<input type="number" name="prix" value={[Link]}
onChange={handleChange} placeholder="Prix" required />
<input type="number" name="categorie_id"
value={formData.categorie_id} onChange={handleChange}
placeholder="Catégorie ID" required />
<input type="file" name="image" onChange={handleChange}
accept="image/*" />
<button type="submit">Ajouter le produit</button>
</form>
);
};

export default AddProduct;


[Link] <?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

$conn = mysqli_connect("localhost", "root", "", "shopping");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {


$nom = mysqli_real_escape_string($conn, $_POST['nom']);
$description = mysqli_real_escape_string($conn, $_POST['description']);
$prix = mysqli_real_escape_string($conn, $_POST['prix']);
$categorie_id = mysqli_real_escape_string($conn, $_POST['categorie_id']);

// Vérifier si une image est fournie


$image = isset($_FILES['image']) ?
addslashes(file_get_contents($_FILES['image']['tmp_name'])) : null;

// Construire la requête SQL


$query = "INSERT INTO produits (nom, description, prix, categorie_id,
image) VALUES ('$nom', '$description', '$prix', '$categorie_id',
'$image')";
$result = mysqli_query($conn, $query);

if ($result) {
echo json_encode(["success" => true]);
} else {
echo json_encode(["success" => false, "error" => mysqli_error($conn)]);
}
} else {
echo json_encode(["success" => false, "error" => "Méthode de requête
invalide"]);
}

mysqli_close($conn);
?>
Get products
[Link] import React, { useState, useEffect } from "react";
import axios from "axios";

const GetProducts = () => {


const [products, setProducts] = useState([]);

useEffect(() => {
const fetchProducts = async () => {
try {
const response = await [Link](
"[Link]
);
setProducts([Link] || []);
} catch (error) {
[Link]("Erreur lors de la récupération des produits : ", error);
}
};

fetchProducts();
}, []);

return (
<div>
<h2>Liste des Produits</h2>
<ul>
{[Link]((product) => (
<li key={[Link]}>
{[Link]} - {[Link]} €
</li>
))}
</ul>
</div>
);
};

export default GetProducts;

[Link] <?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

$conn = mysqli_connect("localhost", "root", "", "shopping");


$query = "SELECT * FROM produits";
$result = mysqli_query($conn, $query);
$products = [];

while ($row = mysqli_fetch_assoc($result)) {


$products[] = $row;
}

echo json_encode($products);
mysqli_close($conn);
?>
Get product(id)
[Link] import React, { useState, useEffect } from 'react';
import axios from 'axios';

const GetProduct = ({ id }) => {


const [product, setProduct] = useState(null);

useEffect(() => {
const fetchProduct = async () => {
try {
const response = await
[Link](`[Link]
setProduct([Link]);
} catch (error) {
[Link]("Erreur lors de la récupération du produit : ", error);
}
};
fetchProduct();
}, [id]);

return (
<div>
{product ? (
<div>
<h2>{[Link]}</h2>
<p>Description: {[Link]}</p>
<p>Prix: {[Link]} €</p>
</div>
):(
<p>Chargement du produit...</p>
)}
</div>
);
};

export default GetProduct;


[Link] <?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

$conn = mysqli_connect("localhost", "root", "", "shopping");


$id = isset($_GET['id']) ? intval($_GET['id']) : 0;

$query = "SELECT * FROM produits WHERE id = '$id'";


$result = mysqli_query($conn, $query);
$product = mysqli_fetch_assoc($result);

echo json_encode($product);
mysqli_close($conn);
?>
[Link] et [Link]
Suppression dans const handleDelete = async (id) => {
[Link] if ([Link]("Êtes-vous sûr de vouloir supprimer ce produit ?")) {
try {
const response = await
[Link]('[Link] { id });
if ([Link]) {
fetchProducts(); // Rafraîchit la liste des produits après suppression
}
} catch (error) {
[Link]("Erreur lors de la suppression du produit : ", error);
}
}
};
[Link] <?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

$conn = mysqli_connect("localhost", "root", "", "shopping");


$data = json_decode(file_get_contents("php://input"), true);
$id = $data['id'] ?? null;
if ($id) {
$query = "DELETE FROM produits WHERE id = '$id'";
$result = mysqli_query($conn, $query);
echo json_encode(["success" => $result]);
} else {
echo json_encode(["success" => false, "error" => "ID manquant"]);
}

mysqli_close($conn);
?>
Mise à jour d'un produit
[Link] import React, { useState, useEffect } from 'react';
import axios from 'axios';

const EditProduct = ({ id }) => {


const [formData, setFormData] = useState({
nom: '',
description: '',
prix: '',
categorie_id: '',
image: null,
});

useEffect(() => {
const fetchProduct = async () => {
try {
const response = await
[Link](`[Link]
setFormData([Link]);
} catch (error) {
[Link]("Erreur lors de la récupération du produit : ", error);
}
};

fetchProduct();
}, [id]);

const handleChange = (e) => {


const { name, value, files } = [Link];
setFormData({
...formData,
[name]: files ? files[0] : value,
});
};

const handleUpdate = async (e) => {


[Link]();
const data = new FormData();
[Link]("id", id);
[Link]("nom", [Link]);
[Link]("description", [Link]);
[Link]("prix", [Link]);
[Link]("categorie_id", formData.categorie_id);
if ([Link]) [Link]("image", [Link]);

try {
const response = await
[Link](`[Link] data, {
headers: { "Content-Type": "multipart/form-data" }
});
if ([Link]) {
alert("Produit mis à jour avec succès !");
}
} catch (error) {
[Link]("Erreur lors de la mise à jour du produit : ", error);
}
};

return (
<form onSubmit={handleUpdate}>
<input type="text" name="nom" value={[Link]}
onChange={handleChange} placeholder="Nom" required />
<textarea name="description" value={[Link]}
onChange={handleChange} placeholder="Description" required></textarea>
<input type="number" name="prix" value={[Link]}
onChange={handleChange} placeholder="Prix" required />
<input type="file" name="image" onChange={handleChange}
accept="image/*" />
<button type="submit">Mettre à jour</button>
</form>
);
};

export default EditProduct;


[Link] <?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: PUT, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

$conn = mysqli_connect("localhost", "root", "", "shopping");

parse_str(file_get_contents("php://input"), $_PUT);
$id = $_PUT['id'] ?? null;
$nom = $_PUT['nom'] ?? '';
$description = $_PUT['description'] ?? '';
$prix = $_PUT['prix'] ?? '';
$categorie_id = $_PUT['categorie_id'] ?? '';

$image = isset($_FILES['image']) ?
addslashes(file_get_contents($_FILES['image']['tmp_name'])) : null;

if ($id) {
$query = "UPDATE produits SET nom='$nom', description='$description',
prix='$prix', categorie_id='$categorie_id'";
if ($image) $query .= ", image='$image'";
$query .= " WHERE id='$id'";
$result = mysqli_query($conn, $query);
echo json_encode(["success" => (bool)$result]);
} else {
echo json_encode(["success" => false, "error" => "ID manquant"]);
}

mysqli_close($conn);
?>

You might also like