Scribd
Upload
13 views

Message

This document contains code for a product details page that displays product information and allows users to submit comments and ratings. It includes: 1. PHP code to retrieve product details from a database and display them. 2. A comment submission form that validates input and adds comments to the database. 3. JavaScript to validate the comment form. 4. PHP code to retrieve and display existing comments for the product.

Uploaded by

mohamedomar.mrabet
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views

Message

This document contains code for a product details page that displays product information and allows users to submit comments and ratings. It includes: 1. PHP code to retrieve product details from a database and display them. 2. A comment submission form that validates input and adds comments to the database. 3. JavaScript to validate the comment form. 4. PHP code to retrieve and display existing comments for the product.

Uploaded by

mohamedomar.mrabet
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html>
<head>
<title>Product details</title>
<script>
document.getElementById("f").addEventListener("submit", function(event) {
event.preventDefault();

var userName = document.getElementsByTagName("user_name").value.trim();


var comment = document.getElementsByTagName("comment").value.trim();
var rating = document.getElementsByTagName("rating").value.trim();
var errorMessages = "";

if (userName === "" || comment === "" || rating === "") {


errorMessages += "Please fill in all fields.<br>";
}

if (isNaN(rating) || rating < 1 || rating > 5) {


errorMessages += "Please enter a valid rating between 1 and 5.<br>";
}

var errorContainer = document.getElementById("errorMessages");


errorContainer.innerHTML = errorMessages;

if (errorMessages === "") {


document.getElementById("commentForm").submit();
}
});
</script>
<link rel="stylesheet" type="text/css" href="css/detail.css">
<style>
form {
width: 400px;
height: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}

input[type="text"],
textarea,
input[type="number"]{
width: calc(100% - 20px);
margin-bottom: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
font-size: 20px;
}

textarea {
resize: vertical;
height: 100px; /* Adjust height as needed */
}
/* Style for the comment container */
.comment-container {
border: 1px solid #ccc;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
margin: 20px;

/* Style for the user name */


.comment-user {
font-weight: bold;
margin-bottom: 5px;
}

/* Style for the rating */


.comment-rating {
color: goldenrod;
margin-bottom: 5px;
}

/* Style for the comment content */


.comment-content {
margin-bottom: 10px;
}
a {
text-decoration: none;
color: white;
font-weight: bold;

/* Additional styles or modifications as needed */

</style>

</head>
<body>
<header>
<center><img src="titree.jpg"></center>
<hr>
<nav>
<ul>
<li class="left"><a href="home.html">Home</a></li>
<li class="right"><a href="shop.php">Shop</a></li><br>
</ul>
</nav>
</header>
<div class='product-details-container'>
<?php
include '../controller/produitC.php';

if (isset($_GET['id'])) {
$product_id = $_GET['id'];

$ProductC = new produitC();

$product_details = $ProductC->getProductById($product_id);
if ($product_details->rowCount() > 0) {
while ($row = $product_details->fetch(PDO::FETCH_ASSOC)) {
echo '<div class="product-details">';
echo "<img src='products/" . $row["image"] . "'>";
echo '<h2>' . $row["nom"] . '</h2>';
echo '<p>' . $row["description"] . '</p>';
echo '<p><b>Price : ' . $row["prix"] . ' DT</b></p>';
echo '<button id="likeButton"><a href="like.php?id=' .
$row['id_produit'] . '">Like</a></button>';
echo'<p id="likeCount">Likes : ' . $row["nbr_like"] . '</p>';
echo '<button>Add to cart</button><br>';
echo '</div>';
}

// Réinitialiser le pointeur du résultat


$product_details->execute();
$result = $product_details->fetch(PDO::FETCH_ASSOC);
$current_views = $result['nbr_vue'];
$new_views = $current_views + 1;

// Mettre à jour la base de données avec le nouveau nombre de vues


$ProductC->updateProductViews($product_id, $new_views);

}
}
?>

<?php
// Include the Comments Controller
include '../controller/noteC.php';

// Create an instance of the Comments Controller


$NoteC = new noteC();

// Check if the comment form is submitted


if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit_comment'])) {
// Sanitize input data
$product_id = $_POST['product_id'];
$user_name = $_POST['user_name'];
$rating = $_POST['rating'];
$comment = $_POST['comment'];

// Add comment and rating using the Comments Controller method


try {

$success =$NoteC-> addCommentAndRating($product_id,$user_name,$rating,


$comment);

if ($success) {
// Redirect to the product details page after successful submission
echo"mess.innerHtml='Form submited successfuly'";
header("Location:detaille.php?id=$product_id");
exit();
} else {
// Handle the case if submission fails
echo "Error: Submission failed.";
}
} catch (PDOException $e) {
// Handle any database-related errors
echo "Database Error: " . $e->getMessage();
}
}
?>

<div class="comments">
<form id='f' method="post" action="">
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
<input type="text" name="user_name" id="user_name" placeholder="Your Name">
<span id="userError" class="error"></span><br>

<input type="number" name="rating" id="rating" placeholder="Rating (1-5)"


min="1" max="5">
<span id="ratingError" class="error"></span><br>

<textarea id="comment" name="comment" placeholder="Your Comment"></textarea>


<span id="commentError" class="error"></span><br>

<button type="submit" name="submit_comment">Submit</button><br><br>


</form>
</div>
<script>
document.getElementById('f').addEventListener('submit', function(event) {
var userName = document.getElementById("user_name").value.trim();
var rating = document.getElementById("rating").value.trim();
var comment = document.getElementById("comment").value.trim();
var isValid = true;

// Réinitialiser les messages d'erreur


document.getElementById("userError").innerHTML = "";
document.getElementById("ratingError").innerHTML = "";
document.getElementById("commentError").innerHTML = "";

// Validation pour le nom d'utilisateur


if (userName === "") {
document.getElementById("userError").innerHTML = "Please enter your name.";
isValid = false;
}

// Validation pour la note entre 1 et 5


if (rating === "" || isNaN(rating) || rating < 1 || rating > 5) {
document.getElementById("ratingError").innerHTML = "Please enter a valid
rating between 1 and 5.";
isValid = false;
}

// Validation pour le commentaire


if (comment === "") {
document.getElementById("commentError").innerHTML = "Please enter your
comment.";
isValid = false;
}

if (!isValid) {
event.preventDefault(); // Empêche la soumission du formulaire
}
});
</script>
</div>
<?php
// Include and instantiate the noteC class (assuming you have a PDO connection in
$db)
$notec = new noteC();

// Fetch comments for the product


$comments = $notec->getCommentsByProductId($product_id);

// Display the fetched comments


if ($comments) {
foreach ($comments as $comment) {
$filled_stars = str_repeat('&#9733;', intval($comment['valeur'])); //
Filled star symbol: &#9733;
$empty_stars = str_repeat('&#9734;', 5 - intval($comment['valeur'])); //
Empty star symbol: &#9734;

// Output the star rating inside the comment container


echo '<div class="comment-container">';
echo '<div class="comment-user">User: ' . $comment['user_name'] . '</div>';
echo '<div class="comment-rating" data-rating="' . $comment['valeur'] .
'">' . $filled_stars . $empty_stars . '</div>';
echo '<div class="comment-content">' . $comment['commentaire'] . '</div>';
echo '</div>';
}
} else {
echo '<p>No comments available for this product.</p>';
}
?>
</body>
</html>

You might also like