I am working on a basic e-commerce website using PHP/MYSQL. I just need to know how I can upload multiple images for a product and then display them on the product details page in this format Example of what I'm trying to implement
I've been trying to figure out how I can display these images (multiple images for 1 product). I really don't understand how it should work! so any advice on simple terms would be appreciated.
Currently, I can only upload 1 image per product. Here is what I have so far (1 Image per product),
For the Product Class Page
<?php
class Product{
private $db;
private $fm;
public function __construct(){
$this->db = new Database();
$this->fm = new Format();
}
public function productInsert($data, $file){
$productName = mysqli_real_escape_string($this->db->link, $data['productName']);
$catId = mysqli_real_escape_string($this->db->link, $data['catId']);
$body = mysqli_real_escape_string($this->db->link, $data['body']);
$price = mysqli_real_escape_string($this->db->link, $data['price']);
$type = mysqli_real_escape_string($this->db->link, $data['type']);
$town = mysqli_real_escape_string($this->db->link, $data['town']);
$quantity = mysqli_real_escape_string($this->db->link, $data['quantity']);
$email = mysqli_real_escape_string($this->db->link, $data['email']);
$phone = mysqli_real_escape_string($this->db->link, $data['phone']);
$contactName = mysqli_real_escape_string($this->db->link, $data['contactName']);
$permited = array('jpg', 'jpeg', 'png', 'gif');
$file_name = $file['image']['name'];
$file_size = $file['image']['size'];
$file_temp = $file['image']['tmp_name'];
$div = explode('.', $file_name);
$file_ext = strtolower(end($div));
$unique_image = substr(md5(time()), 0, 10).'.'.$file_ext;
$uploaded_image = "../uploads/".$unique_image;
if($productName == "" || $catId == "" || $price == "" || $file_name == "" || $town == "" || $quantity == "" || $email == "" || $phone == "" || $contactName == ""){
$msg = "<span class='error'>Fields must not be empty!</span>";
return $msg;
} elseif ($file_size >1048567) {
echo "<span class='error'>Image Size should be less then 1MB!
</span>";
} elseif (in_array($file_ext, $permited) === false) {
echo "<span class='error'>You can upload only:-".implode(', ', $permited)."</span>";
} else{
move_uploaded_file($file_temp, $uploaded_image);
$query = "INSERT INTO products(productName, catId, body, price, image, type, town, quantity, email, phone, contactName) VALUES('$productName','$catId','$body','$price','$uploaded_image', '$type','$town','$quantity','$email','$phone','$contactName')";
$inserted_row = $this->db->insert($query);
if($inserted_row){
$msg = "<span class='success'> Your Offer is Added Successfully. </span>";
return $msg;
} else{
$msg = "<span class='error'> Sorry! Your offer is not added! Try again later. </span>";
return $msg;
}
}
}
For the Add Product Page
<?php
$product = new Product();
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit'])){
$insertProduct = $product->productInsert($_POST, $_FILES);
}
?>
<form action="" method="post" enctype='multipart/form-data'>
<!-- Add Product start -->
<div class="location">
<!-- Product select start -->
<div class="styled-select-car">
<select name="catId" id="my_selection" style ="font-size:18px;">
<option value="">Select the Offer Category* (Required)</option>
<?php
$cat = new Category();
$getCat = $cat->getAllCat();
if($getCat){
while($result = $getCat->fetch_assoc()){
?>
<option value="<?php echo $result['catId'];?>"><?php echo $result['catName'];?></option>
<?php } } ?>
<br>
</select>
</div>
<!-- Product select end -->
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Offer*</span>
<input type="text" name="productName" id="pick-up-location" class="form-control " placeholder="Enter Your Product or Service Title (Required)">
</div>
<br>
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Price* </span>
<input type="text" name="price" id="pick-up-location" class="form-control " placeholder="Enter Your Product or Service Price (Required)">
</div>
<br>
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Location* </span>
<input type="text" name="town" id="pick-up-location" class="form-control " <?php if(Session::get("customerTown")) {?>value="<?php echo Session::get("customerTown");?>" <?php } else { ?> placeholder="Enter Your Location Description (Required)" <?php } ?>>
</div>
<br>
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Quantity* </span>
<input type="text" name="quantity" id="pick-up-location" class="form-control " placeholder="Enter Your Product's or Service Quantity* (Required)">
</div>
<br>
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Email*</span>
<input type="text" name="email" id="pick-up-location" class="form-control " <?php if(Session::get("customerEmail")) {?>value="<?php echo Session::get("customerEmail");?>" <?php } else { ?> placeholder="Enter Your Email Address (Required)" <?php } ?>>
</div>
<br>
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Phone Number* </span>
<input type="text" name="phone" id="pick-up-location" class="form-control " <?php if(Session::get("customerPhone")) {?>value="<?php echo Session::get("customerPhone");?>" <?php } else { ?> placeholder="Enter Your Phone Number (Required)" <?php } ?>>
</div>
<br>
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Contact Name* </span>
<input type="text" name="contactName" id="pick-up-location" class="form-control " <?php if(Session::get("customerName")) {?>value="<?php echo Session::get("customerName");?>" <?php } else { ?> placeholder="Enter Your Contact Name (Required)" <?php } ?> >
</div>
<br>
<div class="input-group pick-up">
<span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span> Product Image* </span>
<input type="file" name="image" class="form-control" placeholder="">
</div>
<br>
<p><b>Give a detailed description of your product or service(Required):</b></p>
<textarea name="body" ></textarea>
</div>
<input style ="font-size:18px;" type="submit" class="submit" name="submit" value="Add Offer" >
</form>
For the Product Details Page
<?php
if(!isset($_GET['productid']) || $_GET['productid'] == NULL){
echo "<script>window.location = '404.php'; </script>";
} else {
$id = preg_replace('/[^-a-zA-Z0-9_]/', '', $_GET['productid']);
}
?>
<div class="main">
<div class="content">
<div class="section group">
<div class="cont-desc span_1_of_2">
<?php
$getProduct = $product->getSingleProduct($id);
if($getProduct){
while($result = $getProduct->fetch_assoc()){
?>
<div class="grid images_3_of_2">
<img src="<?php echo $result['image']; ?>" alt="" />
</div>
<div class="desc span_3_of_2">
<div class="product-information"><!--/product-information-->
<h2><?php echo $result['productName']; ?></h2>
<p>Contact Name: <?php if($result['contactName'] == NULL){ ?>
Guest
<?php } else { echo $result['contactName'];}
?> </p>
<img src="images/rating.png" alt="" /></br>
<span>
<span>FCFA <?php echo number_format($result['price']); ?></span>
<label>Quantity:</label>
<input type="text" value="<?php echo $result['quantity']; ?>" />
</span>
<p><b>Availability:</b> In Stock</p>
<p><b>Category:</b> <?php echo $result['catName']; ?></p>
<p><b>Town:</b> <?php echo $result['town']; ?></p>
<?php
$contact = $result['phone'];
$contact = substr_replace($contact,"*******",2,6);
?>
<p><b>Telephone:</b> <?php echo $contact; ?></p>
<p><b>Email:</b> <?php echo mask_email($result['email']); ?></p>
<a href=""><img src="images/share.png" class="share img-responsive" alt="" /></a>
<div class="add-cart">
<form action="" method="post">
<input type="submit" class="buysubmit" name="submit" value="View Contact Details"/>
</form>
</div>
<span style="color: red; font-size: 18px;">
<?php
if(isset($addCart)){
echo $addCart;
}
?>
</span>
</div><!--/product-information-->
</div>
<div class="product-desc">
<h2>Offer Details</h2>
<pre> <?php echo $result['body']; ?> </pre>
</div>
<?php } } ?>
Can anyone help me on how I can modify this code to be able to upload multiple images per product and to be able to retrieve these image on the product details page?
