55ok
Mini
<?php
include("connection.php");
ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);
// Function to create URL-friendly slugs
function generateSlug($string)
{
$slug = preg_replace('/[^A-Za-z0-9-]+/', '-', strtolower($string));
return trim($slug, '-');
}
if (isset($_POST['submit'])) {
$error_message = '';
$valid = 1;
// Validate top-level category
if (empty($_POST['t_id'])) {
$valid = 0;
$error_message .= "You must select a top level category<br>";
}
// Validate mid-level category
if (empty($_POST['m_id'])) {
$valid = 0;
$error_message .= "You must select a mid level category<br>";
}
// Validate product name
if (empty($_POST['pro_name'])) {
$valid = 0;
$error_message .= "Product name cannot be empty<br>";
}
if ($valid == 1) {
// Sanitize and collect form data
$pro_name = mysqli_real_escape_string($con, $_POST['pro_name']);
$inputSlug = $_POST['slug'] ?? '';
$slug = empty($inputSlug) ? generateSlug($pro_name) : generateSlug($inputSlug);
// Ensure slug is unique
$checkSlug = mysqli_query($con, "SELECT COUNT(*) AS total FROM product WHERE slug = '$slug'");
$row = mysqli_fetch_assoc($checkSlug);
if ($row['total'] > 0) {
$slug .= '-' . time();
}
$rent = mysqli_real_escape_string($con, $_POST['rent']);
$buy = mysqli_real_escape_string($con, $_POST['buy']);
$pquantity = mysqli_real_escape_string($con, $_POST['pquantity']);
$short_description = mysqli_real_escape_string($con, $_POST['short_description']);
$description = mysqli_real_escape_string($con, $_POST['description']);
$additional_information = mysqli_real_escape_string($con, $_POST['additional_information']);
$activity = mysqli_real_escape_string($con, $_POST['activity']);
$top_category_id = (int)$_POST['t_id'];
$mid_category_id = (int)$_POST['m_id'];
// Handle multiple image uploads
$uploadedFiles = [];
if (!empty($_FILES['Image']['name'][0])) {
foreach ($_FILES['Image']['name'] as $key => $name) {
if ($_FILES['Image']['error'][$key] === 0) {
$extension = pathinfo($name, PATHINFO_EXTENSION);
$uniqueImageName = time() . '_' . uniqid() . '.' . $extension;
$img_tmp = $_FILES['Image']['tmp_name'][$key];
$img_path = "assets/images/categorie/" . $uniqueImageName;
if (move_uploaded_file($img_tmp, $img_path)) {
$uploadedFiles[] = $uniqueImageName;
}
}
}
}
// Convert file names to JSON for storage
$imagesJson = json_encode($uploadedFiles);
// Insert into database
$sql = "INSERT INTO `product`
(`Image`, `pro_name`, `rent`, `buy`, `pquantity`, `slug`, `short_description`, `description`, `additional_information`, `t_id`, `m_id`, `activity`)
VALUES
('$imagesJson', '$pro_name', '$rent', '$buy', '$pquantity', '$slug', '$short_description', '$description', '$additional_information', '$top_category_id', '$mid_category_id', '$activity')";
if (mysqli_query($con, $sql)) {
header("Location: viewproduct.php");
exit();
} else {
echo "Database error: " . mysqli_error($con);
}
} else {
echo "<div style='color:red;'>$error_message</div>";
}
}
?>
<?php
include("header.php")
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ADD Product</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesbrand" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="./assets/logo/fav.png" />
<!-- Plugins css -->
<link href="assets/libs/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Bootstrap Css -->
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
<!-- App js -->
<!-- <script src="assets/js/plugin.js"></script> -->
<style>
.form .input {
width: 100%;
background: white;
border: none;
padding: 15px 20px;
border-radius: 20px;
margin-bottom: 9px;
margin-top: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-inline: 2px solid transparent;
}
input[name='Image'] {
display: none;
}
div#upload {
cursor: pointer;
}
::-webkit-file-upload-button {
/* width: 100%;
height: 100%; */
display: none;
/* color: transparent; */
}
.filepath {
display: none;
}
img[alt="img"] {
width: clamp(50px, 15%, 100px);
aspect-ratio: 1/0.70;
}
.preview-image {
position: relative;
margin: 10px;
}
.preview-image img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #ccc;
}
.preview-image .remove-btn {
position: absolute;
top: -8px;
right: -8px;
background: red;
color: white;
border-radius: 50%;
border: none;
cursor: pointer;
width: 20px;
height: 20px;
font-size: 14px;
line-height: 18px;
text-align: center;
}
</style>
</head>
<body data-sidebar="dark">
<!-- <body data-layout="horizontal" data-topbar="dark"> -->
<!-- Begin page -->
<div id="layout-wrapper">
<div class="w-80 ">
<div class="page-content" style="width: 80%;margin-left: 260px;">
<div class="container">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0 font-size-18">ADD Product </h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div>
<form class="form" action="" method="POST" enctype="multipart/form-data">
<!-- Hidden File Input -->
<div class="dropzone">
<div class="fallback">
<input placeholder="Images" name="Image[]" type="file" multiple required style="display: none;" />
</div>
<div class="dz-message needsclick" id="upload">
<div class="mb-3">
<i class="display-4 text-muted bx bxs-cloud-upload"></i>
</div>
<h4>Drop files here or click to upload.</h4>
</div>
</div>
<!-- Preview list -->
<div id="preview-container" class="d-flex flex-wrap"></div>
<!-- Product Details -->
<div class="row mt-4">
<div class="col-lg-3">
<label for="category" class="form-label">Select Top Category</label>
<select class="form-select" name="t_id" id="top_category" required>
<option value="">Select Top Level Category</option>
<?php
$query = "SELECT * FROM tbl_top_category ORDER BY cat_name ASC";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option value="' . $row['t_id'] . '">' . $row['cat_name'] . '</option>';
}
?>
</select>
</div>
<div class="col-lg-3">
<label for="category" class="form-label">Select Mid Category</label>
<select class="form-select" name="m_id" id="mid_category" required>
<option value="">Select Mid Category</option>
</select>
</div>
<div class="col-md-3">
<label>Product Name</label>
<input type="text" class="form-control" name="pro_name" id="pro_name" onkeyup="generateSlug()" required />
</div>
<div class="col-md-3">
<label for="">Slug</label>
<input type="text" class="form-control" name="slug" id="slug" placeholder="Enter Your Slug" />
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<label>Rent</label>
<input type="text" class="form-control" name="rent" required />
</div>
<div class="col-md-3">
<label>Buy</label>
<input type="text" class="form-control" name="buy" required />
</div>
<div class="col-md-3">
<label for="">Product Quantity</label>
<input type="text" class="form-control" name="pquantity" placeholder="Enter Your Product Quantity" />
</div>
<div class="col-md-3">
<label>Activity</label>
<select class="form-select" name="activity" required>
<option value="">Select activity</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<!-- <div class="col-md-3 mt-4">
<label>Size</label>
<select class="form-select" name="size" required>
<option value="">Select size</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div> -->
</div>
<br>
<label for="">short description</label>
<textarea name="short_description" id="Experience"></textarea>
<br>
<label for="">Description</label>
<textarea name="description" id="Experience1"></textarea>
<br>
<label for="">Additional Information</label>
<textarea name="additional_information" id="Experience2"></textarea>
<!-- Buttons -->
<div class="text-center mt-4">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
<a href="viewproduct.php" class="btn btn-danger">View Data</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->
</div>
<!-- end main content-->
</div>
<!-- END layout-wrapper -->
<!-- JAVASCRIPT -->
<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/node-waves/waves.min.js"></script>
<!-- Plugins js -->
<script src="assets/libs/dropzone/dropzone-min.js"></script>
<!-- Form file upload init js -->
<script src="assets/js/pages/form-file-upload.init.js"></script>
<script src="assets/js/app.js"></script>
<script src="./ck editor/ckeditor.js"></script>
<script>
CKEDITOR.replace('Experience');
CKEDITOR.replace('Experience1');
CKEDITOR.replace('Experience2');
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#top_category").change(function() {
var topCatId = $(this).val();
if (topCatId != "") {
$.ajax({
url: "get_mid_categories.php",
type: "POST",
data: {
t_id: topCatId
},
success: function(data) {
$("#mid_category").html(data);
}
});
} else {
$("#mid_category").html('<option value="">Select Mid Category</option>');
}
});
});
</script>
<script>
const imgInput = document.querySelector("input[name='Image[]']");
const previewContainer = document.getElementById("preview-container");
document.getElementById("upload").onclick = () => {
imgInput.click();
};
imgInput.onchange = () => {
previewContainer.innerHTML = ""; // reset previews
[...imgInput.files].forEach((file, index) => {
let fileSrc = URL.createObjectURL(file);
// wrapper div
let wrapper = document.createElement("div");
wrapper.classList.add("preview-image");
// image element
let img = document.createElement("img");
img.src = fileSrc;
// remove button
let removeBtn = document.createElement("button");
removeBtn.innerHTML = "×";
removeBtn.classList.add("remove-btn");
removeBtn.onclick = (e) => {
e.preventDefault();
removeImage(index);
};
wrapper.appendChild(img);
wrapper.appendChild(removeBtn);
previewContainer.appendChild(wrapper);
});
};
function removeImage(index) {
let dt = new DataTransfer();
let files = imgInput.files;
[...files].forEach((file, i) => {
if (i !== index) {
dt.items.add(file); // keep all except removed one
}
});
imgInput.files = dt.files;
imgInput.onchange(); // refresh preview
}
</script>
<script>
function generateSlug() {
let title = document.getElementById("pro_name").value;
let slug = title.toLowerCase()
.replace(/[^a-z0-9\s-]/g, '') // remove invalid chars
.replace(/\s+/g, '-') // replace spaces with -
.replace(/-+/g, '-') // collapse dashes
.trim();
document.getElementById("slug").value = slug;
}
</script>
</body>
</html>
Zerion Mini 1.0