Skip to content

Commit

Permalink
Implemented category display from db
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeylaMolnar
LeylaMolnar committed Mar 8, 2023
1 parent 6be6aba commit 9303310
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 67 deletions.
10 changes: 5 additions & 5 deletions create_product.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@
<!--Category form-->
<div class="col-4">
<h2>Add Product Category</h2>
<form method="post" action="" onsubmit="return valCat()" name="category">
<form method="post" action="" onsubmit="return valCat()" name="category" enctype="multipart/form-data">
<input type="text" name="name" placeholder="Category name" required><br>
<input type="text" name="desc" placeholder="Description" required><br>
<input type="file" name="category_image" required><br>
<input type="submit" value="Submit" name="csubmit">
</form>
</div>
Expand Down Expand Up @@ -89,9 +89,9 @@
//Category submission
if (isset($_POST["csubmit"])) {
$name = $_POST["name"];
$desc = $_POST["desc"];
$sql = "insert into product_category (category_name, description)
values('$name', '$desc')";
$category_image = addslashes(file_get_contents($_FILES["category_image"]["tmp_name"]));
$sql = "insert into product_category (category_name, category_image)
values('$name', '$category_image')";
echo "<meta http-equiv='refresh' content='0'>";
if ($conn->query($sql)) {
echo "Success!";
Expand Down
15 changes: 11 additions & 4 deletions js/val.js → js/val1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,21 @@ function valProd(){

function valCat(){
let name = document.forms["category"]["name"].value.trim();
let desc = document.forms["category"]["desc"].value.trim();

let imageExtension = document.forms["category"]["category_image"].value.split('.').pop().toLowerCase();
if(name.length<5){
alert("Category name must be at least 5 characters long");
return false;
}
if(desc.length<15){
alert("Category description must be at least 15 characters long");
var isValidFile = false;
var allowedExtension = ['jpeg', 'jpg', 'png'];
for(var index in allowedExtension) {
if(imageExtension === allowedExtension[index]) {
isValidFile = true;
break;
}
}
if (!isValidFile) {
alert("Image must be JPG or PNG");
return false;
}
}
Expand Down
2 changes: 1 addition & 1 deletion partials/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<?php echo $title; ?>
</title>
<?php echo $extra; ?>
<script src="../js/val.js"></script>
<script src="../js/val1.js"></script>
</head>

<body>
Expand Down
83 changes: 26 additions & 57 deletions shop.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,65 +16,37 @@
<b>Shop</b>
</a>
</div>

<?php
$sql = "SELECT * FROM product_category";
$result = $conn->query($sql);
?>
<div class="row d-flex justify-content-center justify-content-md-start">
<div class="card col-4 text-md catcard">
<a href="#">
<img src="images/ProductCategory1.png" class="card-img" alt="skate">
<div class="card-img-overlay">
<h5 class="card-title card-title-category">skateboard</h5>
<p class="card-text"><small>12 items</small></p>
</div>
</a>
</div>

<div class="card col-4 text-md catcard">
<a href="#">
<img src="images/ProductCategory3.png" class="card-img" alt="skate">
<div class="card-img-overlay">
<h5 class="card-title card-title-category">clothes</h5>
<p class="card-text"><small>12 items</small></p>
</div>
</a>
</div>

<div class="card col-4 text-md catcard">
<a href="#">
<img src="images/ProductCategory2.png" class="card-img" alt="skate">
<div class="card-img-overlay">
<h5 class="card-title card-title-category">stickers</h5>
<p class="card-text"><small>12 items</small></p>
</div>
</a>
</div>

<div class="card col-4 text-md catcard">
<a href="#">
<img src="images/ProductCategory1.png" class="card-img" alt="skate">
<div class="card-img-overlay">
<h5 class="card-title card-title-category">fingerboard</h5>
<p class="card-text"><small>12 items</small></p>
</div>
</a>
</div>

<div class="card col-4 text-md catcard">
<a href="#">
<img src="images/ProductCategory2.png" class="card-img" alt="skate">
<div class="card-img-overlay">
<h5 class="card-title card-title-category">others</h5>
<p class="card-text"><small>12 items</small></p>
</div>
</a>
</div>
<?php
while ($row = $result->fetch_assoc()):
?>
<div class="card col-4 text-md catcard">
<a href="#">
<img src="data:image/jpeg;base64,<?php echo base64_encode($row['category_image']); ?>" class="card-img"
alt="<?php echo $row['category_name']; ?>">
<div class="card-img-overlay">
<h5 class="card-title card-title-category">
<?php echo $row['category_name']; ?>
</h5>
<p class="card-text"><small>12 items</small></p>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
</div>

<hr style="margin: auto;">

<div class="container justify-content-center">
<form method="post">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" name="sorting" onchange="this.form.submit()">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" name="sorting"
onchange="this.form.submit()">
<option selected>Sorting</option>
<option value="1">Lowest price first</option>
<option value="2">Highest price first</option>
Expand All @@ -91,19 +63,16 @@
$sorting = $_POST['sorting'];
if ($sorting == 1) {
$query = $queryBase . " ORDER BY price ASC";
}
else if ($sorting == 2) {
} else if ($sorting == 2) {
$query = $queryBase . " ORDER BY price DESC";
}
else if ($sorting == 3) {
} else if ($sorting == 3) {
$query = $queryBase . " ORDER BY name ASC";
}
else if ($sorting == 4) {
} else if ($sorting == 4) {
$query = $queryBase . " ORDER BY name DESC";
}
//echo $query;
}

$result = $conn->query($query);
while ($row = mysqli_fetch_assoc($result)):
?>
Expand Down

0 comments on commit 9303310

Please sign in to comment.