Add product

AddProduct.js 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 } = e.target;
setFormData({
...formData,
[name]: files ? files[0] : value,
});
};

const handleAddProduct = async (e) => {

e.preventDefault();
const data = new FormData();
data.append("nom", formData.nom);
data.append("description", formData.description);
data.append("prix", formData.prix);
data.append("categorie_id", formData.categorie_id);
if (formData.image) data.append("image", formData.image);

try {
const response = await
axios.post('http://localhost:8000/addProduct.php', data, {
headers: { "Content-Type": "multipart/form-data" }
});
if (response.data.success) {
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) {
console.error("Erreur lors de l'ajout du produit : ", error);
}
};

return (
<form onSubmit={handleAddProduct}>
<input type="text" name="nom" value={formData.nom}
onChange={handleChange} placeholder="Nom" required />
<textarea name="description" value={formData.description}
onChange={handleChange} placeholder="Description"
required></textarea>
<input type="number" name="prix" value={formData.prix}
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;

addProduct.php <?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
GetProducts.js import React, { useState, useEffect } from "react";
import axios from "axios";

const GetProducts = () => {

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

useEffect(() => {
const fetchProducts = async () => {
try {
const response = await axios.get(
"http://localhost:8000/getProducts.php"
);
setProducts(response.data || []);
 } catch (error) {
console.error("Erreur lors de la récupération des produits : ", error);
}
};

fetchProducts();
}, []);

return (
<div>
<h2>Liste des Produits</h2>
<ul>
{products.map((product) => (
<li key={product.id}>
{product.nom} - {product.prix} €
</li>
))}
</ul>
</div>
);
};

export default GetProducts;

getProducts.php <?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)
GetProduct.js 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
axios.get(`http://localhost:8000/getProduct.php?id=${id}`);
setProduct(response.data);
} catch (error) {
console.error("Erreur lors de la récupération du produit : ", error);
}
};
 fetchProduct();
}, [id]);

return (
<div>
{product ? (
<div>
<h2>{product.nom}</h2>
<p>Description: {product.description}</p>
<p>Prix: {product.prix} €</p>
</div>
):(
<p>Chargement du produit...</p>
)}
</div>
);
};

export default GetProduct;

getProduct.php <?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);
?>
GetProducts.js et deleteProduct.php
Suppression dans const handleDelete = async (id) => {
GetProducts.js if (window.confirm("Êtes-vous sûr de vouloir supprimer ce produit ?")) {
try {
const response = await
axios.post('http://localhost:8000/deleteProduct.php', { id });
if (response.data.success) {
fetchProducts(); // Rafraîchit la liste des produits après suppression
}
} catch (error) {
console.error("Erreur lors de la suppression du produit : ", error);
}
}
};
deleteProduct.php <?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
EditProduct.js 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
axios.get(`http://localhost:8000/getProduct.php?id=${id}`);
setFormData(response.data);
} catch (error) {
console.error("Erreur lors de la récupération du produit : ", error);
}
};

fetchProduct();
}, [id]);

const handleChange = (e) => {

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

const handleUpdate = async (e) => {

e.preventDefault();
const data = new FormData();
data.append("id", id);
data.append("nom", formData.nom);
data.append("description", formData.description);
data.append("prix", formData.prix);
data.append("categorie_id", formData.categorie_id);
if (formData.image) data.append("image", formData.image);

try {
const response = await
axios.put(`http://localhost:8000/updateProduct.php`, data, {
 headers: { "Content-Type": "multipart/form-data" }
});
if (response.data.success) {
alert("Produit mis à jour avec succès !");
}
} catch (error) {
console.error("Erreur lors de la mise à jour du produit : ", error);
}
};

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

export default EditProduct;

updateProduct.php <?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);
?>