Scribd
Upload
20 views50 pages

Project Second Stage: Jewelry Website: Prepared by

Uploaded by

ahmedfadaeyl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views50 pages

Project Second Stage: Jewelry Website: Prepared by

Uploaded by

ahmedfadaeyl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

Project second stage : Jewelry Website

Prepared by:

• Ebtisam Mohammed Ali Al-Asmari


• Remas Khalid Ahmed Al-Asmari
• Areej Ibrahim Ahmed Aseeri
• Fatimah Mohammed Talea Al-Hilali
• Asayel Al-Hussain Abdullah Aseeri

Supervisor:
Dr. Ahmed Mohammed Hassaballa Adam

What we did use in this stage:

Reasons for Using the Following Languages in Website Development

1. HTML (HyperText Markup Language)

• Foundation of Web Pages: HTML provides the basic structure of web pages by
defining elements such as headings, paragraphs, images, links, and forms.
• Universal Compatibility: It works on all browsers and devices, ensuring broad
accessibility.
• SEO Friendly: Properly structured HTML improves search engine rankings, making
it easier for users to find the website.
• Integration with Other Technologies: HTML seamlessly integrates with CSS,
JavaScript, and server-side languages like PHP to create dynamic and visually
appealing websites.

2. CSS (Cascading Style Sheets)

• Enhances Visual Appeal: CSS controls the design, layout, and aesthetics of a
website by applying styles such as colors, fonts, and spacing.
• Ensures Responsiveness: It allows websites to be fully responsive, adjusting
smoothly to different screen sizes and devices.
• Improves Performance: By separating styling from HTML, CSS reduces page load
times and enhances performance.
• Supports Animations & Effects: CSS enables the creation of animations and
transitions, enhancing user experience.

3. JavaScript (JS)

• Adds Interactivity: JavaScript is essential for making websites interactive by


enabling features such as drop-down menus, real-time form validation, and interactive
elements.
• Enhances User Experience: It provides a seamless browsing experience by allowing
users to interact with the site without requiring full page reloads.
• Client-Side Execution: JavaScript runs directly in the user's browser, reducing the
load on the server and improving site performance.

4. PHP (Hypertext Preprocessor)

• Server-Side Processing: PHP is a backend language that handles data processing,


form submissions, and interactions with databases.
• Dynamic Content Generation: It enables the creation of dynamic web pages that
update in real-time based on user inputs or database queries.
• Secure Data Handling: PHP includes built-in security functions to protect against
SQL injection, cross-site scripting (XSS), and other vulnerabilities.
• Wide Hosting Support: Most web hosting providers support PHP, making it a
convenient choice for web developers.
• Open-Source & Community Support: Being open-source, PHP has a vast developer
community and a wide range of libraries and frameworks (e.g., Laravel, CodeIgniter)
that simplify development.

5. MySQL

• Efficient Data Storage & Retrieval: MySQL is a relational database management


system (RDBMS) used for storing and managing large amounts of structured data
efficiently.
• High Performance: It is optimized for speed and can handle multiple queries
simultaneously, making it ideal for high-traffic websites.
• Integration with PHP: MySQL works seamlessly with PHP, allowing websites to
manage user accounts, product inventories, orders, and more.
• Data Security & Scalability: It provides strong data encryption and access controls,
ensuring data integrity and security.

Conclusion

Each of these technologies plays a vital role in web development:

• HTML & CSS provide the structure and styling for a website.
• JavaScript enhances interactivity and responsiveness.
• PHP processes data on the server and enables dynamic content.
• MySQL efficiently stores and manages all website data.

The codes we did used:

All proudest:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/style.css">

<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

<title>Jewelry Store - shop</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Playwrite+SK+G
uides&display=swap" rel="stylesheet">

</head>

<body>

<?php

session_start();

if(!isset($_SESSION["user_id"])){

header("location:login.php");

?>

<header>

<a id="cart" href="cart.php"> <img src="images/shopping-cart.png" alt="cart"> </a>

<div id="header">

<img src="images/logo.png" alt="logo">


<nav>

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="category.php">Categories</a></li>

<li><a href="about.html">About</a></li>

<li><a href="allproducts.php">Shop</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</nav>

</div>

</header>

<div class="product">

<?php

include("connect.php");

$sql="SELECT * FROM jewelary;";

$result=$db->query($sql);

if($result->num_rows >0)

while($rows=$result->fetch_assoc())

{ ?>

<div class="product-box">

<form action="allproducts.php" class="form" method = "post" name="form">

<img src="images/<?php print $rows['photo']?>" height="300" width="300">

<br>

<h3><?php print $rows['name']?></h3>


<br>

<input type="hidden" name="pid" value="<?php print $rows['id']?>">

<br>

<input name="price" type="hidden" value="<?php print $rows['price']?>" >

<br>

<a href="product-details.php?id=<?php print $rows['id']?>">More details</a>

<br><br>

<button type="submit" id="showMoreButton" name="add">Add to cart</button>

</form>

</div>

<?php }

else

echo"empty";

if(isset($_POST['add']))

$sql1="SELECT * from order_items WHERE user_id='{$_SESSION['user_id']}' AND


product_id='{$_POST['pid']}';";

$res1=$db->query($sql1);

if($res1->num_rows==0)

$sql="INSERT INTO order_items (user_id, product_id,quantity,subtotal) VALUES


('{$_SESSION['user_id']}','{$_POST['pid']}','1','{$_POST['price']}');";
$res = $db->query($sql);

echo "<div id='alert-dialog'>

<h3>Success</h3>

<br>

<p>Product added successfuly</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

else

echo "<div id='alert-dialog'>

<h3>Error</h3>

<br>

<p>Product already added</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

?>

</div>

<footer>

<p>&copy; 2025 Jewelary Store</p>

</footer>
<script src="js/script.js"></script>

</body>

<\html>

The cart code :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/style.css">

<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

<title>Jewelry | Luxe Sparkle</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Playwrite+SK+G
uides&display=swap" rel="stylesheet">

</head>

<body>

<?php

session_start();

if(!isset($_SESSION["user_id"])){

header("location:login.php");

?>

<header>

<a id="cart" href="cart.php"> <img src="images/shopping-cart.png" alt="cart"> </a>

<div id="header">
<img src="images/logo.png" alt="logo">

<nav>

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="category.php">Categories</a></li>

<li><a href="about.html">About</a></li>

<li><a href="allproducts.php">Shop</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</nav>

</div>

</header>

<div class="product">

<?php

include("connect.php");

if(isset($_POST['inc']))

{$amount=$_POST['amount'] +1;

$sql1="UPDATE order_items SET quantity='$amount' WHERE


user_id='{$_SESSION['user_id']}' AND product_id='{$_POST['pid']}';";

$res1=$db->query($sql1);

if(isset($_POST['dec']))

{$amount=$_POST['amount'];

if($amount !=1 || $amount <=0){

$amount=$_POST['amount'] -1;

$sql1="UPDATE cart SET quantity='$amount' WHERE user_id='{$_SESSION['user_id']}'


AND product_id='{$_POST['pid']}';";
$res1=$db->query($sql1);

if(isset($_POST['remove']))

$sql1="DELETE from order_items WHERE user_id='{$_SESSION['user_id']}' AND


product_id='{$_POST['pid']}';";

$res1=$db->query($sql1);

if($res1)

echo "<div id='alert-dialog'>

<h3>Success</h3>

<br>

<p>Product remove successfuly</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

else

echo "<div id='alert-dialog'>

<h3>Error</h3>
<br>

<p>Remove error</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

$sql="SELECT name, photo, price, quantity,product_id FROM jewelary JOIN order_items


ON jewelary.id=order_items.product_id WHERE user_id={$_SESSION['user_id']};";

$result=$db->query($sql);

$total=0;

$subtotal=0;

if($result->num_rows >0)

while($rows=$result->fetch_assoc())

$subtotal=$rows['price'] * $rows['quantity'];

$total +=$subtotal;

?>

<div class="product-box">

<form action="cart.php" class="form" method = "post" name="form">

<img src="images/<?php print $rows['photo']?>" height="250" width="250">

<br>

<h3><?php print $rows['name']?></h3>


<br>

<h4><?php print $rows['price']?> SAR</h4>

<br>

<h4>total: <?php print $subtotal ?> SAR</h4>

<br>

<div>

<input type="submit" name="dec" value=" - ">

<input type="number" name="amount" id="amount" value="<?php print


$rows['quantity']?>">

<input type="submit" name="inc" value=" + ">

</div>

<br>

<input type="hidden" name="pid" value="<?php print $rows['product_id']?>">

<button id="remove" type="submit" name="remove">Remove</button>

</form>

</div>

<?php }

else

echo"empty";

if(isset($_POST['order']))

{
$sql1="SELECT * from `order` WHERE `user_id`='{$_SESSION['user_id']}';";

$res1=$db->query($sql1);

if($res1->num_rows==0)

$sql="INSERT INTO `order` (`id`, `order_date`, `total_price`, `order_status`,


`user_id`) VALUES (NULL, CURRENT_TIMESTAMP, '150', 'done', '{$_SESSION['user_id']}');";

$res = $db->query($sql);

echo "<div id='alert-dialog'>

<h3>Success</h3>

<br>

<p>Order done</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

else

echo "<div id='alert-dialog'>

<h3>Error</h3>

<br>

<p>Order error</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

}
}

?>

</div>

<br>

<div id="order">

<form action="cart.php" class="form" method = "post" name="form">

<h3>Total Price: <?php print $total ?> $</h3>

<br>

<br>

<button id="order" type="submit" name="order">Order</button>

</form>

<br>

</div>

<br>

<footer>

<p>&copy; 2025 Jewelary Store</p>

</footer>

<script src="js/script.js"></script>

</body>

<\html>

The category code :

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="css/style.css">

<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

<title>Jewelry Store - categories</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Playwrite+SK+G
uides&display=swap" rel="stylesheet">

</head>

<body>

<header>

<a id="cart" href="cart.php"> <img src="images/shopping-cart.png" alt="cart"> </a>

<div id="header">

<img src="images/logo.png" alt="logo">

<nav>

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="category.php">Categories</a></li>

<li><a href="about.html">About</a></li>

<li><a href="allproducts.php">Shop</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</nav>

</div>

</header>

<div class="category">

<?php

include("connect.php");
$sql="SELECT * FROM category;";

$result=$db->query($sql);

if($result->num_rows>0)

while($rows=$result->fetch_assoc())

{ ?>

<div class="category-box">

<img src="images/<?php print $rows['photo']?>" height="300" width="300">

<br>

<h3><?php print $rows['name']?></h3>

<br>

<a href="product.php?id=<?php print $rows['id']?>">shop now</a>

</div>

<?php }

else

echo"empty";

?>

</div>

<footer>

<p>&copy; 2025 Jewelary Store</p>

</footer>
<script src="js/script.js"></script>

</body>

<\html>

The connect code :

<?php

$db =new mysqli("localhost", "root", "", "jewelary");

if(!$db){

echo "<h1>Unable to connect database</h1>";

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Jewelry Store - contact</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<header>

<a id="cart" href="cart.php"> <img src="images/shopping-cart.png" alt="cart"> </a>

<div id="header">

<img src="images/logo.png" alt="logo">


<nav>

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="category.php">Categories</a></li>

<li><a href="about.html">About</a></li>

<li><a href="allproducts.php">Shop</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</nav>

</div>

</header>

<?php

include("connect.php");

if(isset($_POST['submit']))

$_POST['name'] = addslashes($_POST['name']);

$_POST['subject'] = addslashes($_POST['subject']);

$_POST['email'] = addslashes($_POST['email']);

$_POST['message'] = addslashes($_POST['message']);

$sql="INSERT INTO messages (name, email,subject,message) VALUES


('{$_POST['name']}','{$_POST['email']}','{$_POST['subject']}', '{$_POST['message']}');";

$res = $db->query($sql);

echo "<div id='alert-dialog'>

<h3>Success</h3>

<br>
<p>Message send successfuly</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

?>

<h1> Contact us</h1>

<div class="contact">

<div class="contact-info">

<ul>

<li><img src="images/location.png">Location: <br><span>Geda ,20


street</span></li>

<li><img src="images/email.png">Email:
<br><span>[email protected]</span></li>

<li><img src="images/call.png">Call:<br><span>+9665323232</span></li>

</ul>

</div>

<div class="contact-form">

<form action="contact.php" class="form" method = "post" name="form">

<input type="text" id="name" name="name" placeholder="Enter your name"


required>
<br>

<input type="email" id="email" name="email" placeholder="Enter your E-mail"


required>

<br>

<input type="text" id="subject" name="subject" placeholder="Enter your Subject"


required>

<br>

<textarea name="message" placeholder=" your Message" required></textarea><br>

<a href=""><button class="submit" name="submit" onclick="validate();">Send


Message</button></a>

</form>

</div>

</div>

<footer>

<p>&copy; 2025 Jewelary Store</p>

</footer>

<script src="js/script.js"></script>

</body>

</html>

The index code :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="css/style.css">

<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

<title>Jewelry Store - home</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Playwrite+SK+G
uides&display=swap" rel="stylesheet">

</head>

<body>

<?php

session_start();

if(!isset($_SESSION["user_id"])){

header("location:login.php");

?>

<header>

<a id="cart" href="cart.php"> <img src="images/shopping-cart.png" alt="cart"> </a>

<a href="logout.php">Logout</a>

<div id="header">

<img src="images/logo.png" alt="logo">

<nav>

<ul>

<li><a href="category.php">Categories</a></li>

<li><a href="about.html">About</a></li>

<li><a href="allproducts.php">Shop</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>
</nav>

</div>

<div id="intro">

<div>

<h2>Golden Elegance a Timeless Blend of Gold & Pearl</h2>

<p>Crafted with precision, this exquisite piece combines the warmth of pure gold with
the delicate beauty of a natural pearl. A symbol of elegance and sophistication, it reflects
timeless charm, making it a perfect addition to any jewelry collection.</p>

</div>

<div>

<img src="images/j1.png" alt="Golden Necklace" width="500">

</div>

</div>

</header>

<div class="gallery">

<div class="gallery-item">

<img src="images/j2.jpg" alt="Earring 1">

</div>

<div class="gallery-item">

<img src="images/j2.jpg" alt="Earring 2">

</div>

<div class="description">

<h2>Gold Pearl & Gold Elegance</h2>

<p>These elegant earrings blend the lustrous beauty of pearls with the timeless glow of
gold. Designed for sophistication and versatility, they add a touch of luxury to any look, perfect
for both special occasions and everyday elegance.</p>

<br>
<button id="showMoreButton">Show more</button>

</div>

</div>

<main>

<div class="store">

<div>

<img src="images/j3.jpg" height="600" width="400">

</div>

<div class="store-desc">

<h3>Gold Pearl & Gold Elegance</h3>

<br>

<br>

<img src="images/ring.png">

</div>

</div>

<div class="calculator">

<form action="index.php" class="form" method = "post" name="form">

<h3>Zakat Calculator</h3>

<br><br>

<input type="number" id="weight" name="weight" placeholder="Enter amount of gram" >


<br><br>

<button type="submit" name="gold" onclick="calculateGoldZakat()">Gold</button>

<br><br>

<button type="submit" name="silver" onclick="calculateSilverZakat()">Silver</button>

<br><br>

<div class="result">
<h3>Total Zakat Due</h3>

<br>

<p id="result">00 $</p>

</form>

</div>

</div>

</main>

<?php

include("connect.php");

if(isset($_POST['gold']))

$amount=$_POST['weight'] *85 * 0.025;

$_POST['weight'] = addslashes($_POST['weight']);

$sql1="INSERT INTO zakat_calculator (user_id, gold_weight,silver_weight,purity,amount)


VALUES ('{$_SESSION['user_id']}','{$_POST['weight']}','0','80','$amount');";

$res1=$db->query($sql1);

echo " <script>

document.getElementById('result').innerText = $amount +' $';

</script> ";

if(isset($_POST['silver']))

$amount=$_POST['weight'] *1.39 * 0.025;

$sql1="INSERT INTO zakat_calculator (user_id, gold_weight,silver_weight,purity,amount)


VALUES ('{$_SESSION['user_id']}','0','{$_POST['weight']}','80','$amount');";

$res1=$db->query($sql1);
echo " <script>

document.getElementById('result').innerText = $amount +' $';

</script> ";

?>

<footer>

<p>&copy; 2025 Jewelary Store</p>

</footer>

<script src="js/script.js"></script>

</body>

</html>

The login code :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/style.css">

<title>Jewelry Store - login</title>

</head>

<body>

<?php

ob_start();

session_start();

if(isset($_SESSION["user_id"])){
header("location:index.php");

include("connect.php");

if(isset($_POST['login']))

$_POST['email'] = addslashes($_POST['email']);

$_POST['password'] = addslashes($_POST['password']);

$sql = "SELECT * FROM user WHERE email = '{$_POST["email"]}' AND password =


'{$_POST["password"]}'";

$res = $db->query($sql);

if($res->num_rows>0)

$row = $res->fetch_assoc();

$_SESSION["user_id"] = $row["id"];

$_SESSION["user_name"] = $row["name"];

header("location:index.php");

else{

echo "<div id='alert-dialog'>

<h3>Error</h3>

<br>

<p>Incorrect user information</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";
}

?>

<div class="login">

<img src="images/logo.png" alt="logo">

<br>

<h1>Login</h1>

<br> <br>

<form action="<?php echo $_SERVER["PHP_SELF"];?>" class="form" method = "post"


name="form" novalidate>

<input type="email" id="email" name="email" placeholder="Enter your email"


required>

<br>

<input type="password" id="password" name="password" placeholder="Enter your


password" required>

<br><br>

<button type="submit" name="login">login</button>

</form>

</div>

<script src="js/script.js"></script>

</body>

</html>

The logout code :

<?php

session_start();

unset($_SESSION["user_id"]);

session_destroy();
header("location:login.php");

?>

The proudest code :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/style.css">

<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

<title>Jewelry Store - products</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Playwrite+SK+G
uides&display=swap" rel="stylesheet">

</head>

<body>

<?php

session_start();

if(!isset($_SESSION["user_id"])){

header("location:login.php");

?>

<header>

<a id="cart" href="cart.php"> <img src="images/shopping-cart.png" alt="cart"> </a>

<div id="header">

<img src="images/logo.png" alt="logo">


<nav>

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="category.php">Categories</a></li>

<li><a href="about.html">About</a></li>

<li><a href="allproducts.php">Shop</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</nav>

</div>

</header>

<div class="product">

<?php

include("connect.php");

$sql="SELECT * FROM jewelary WHERE category_id='{$_GET['id']}';";

$result=$db->query($sql);

if($result->num_rows >0)

while($rows=$result->fetch_assoc())

{ ?>

<div class="product-box">

<form action="product.php?id=<?php print $_GET['id']?>" class="form" method = "post"


name="form">

<img src="images/<?php print $rows['photo']?>" height="300" width="300">

<br>

<h3><?php print $rows['name']?></h3>


<br>

<input type="hidden" name="pid" value="<?php print $rows['id']?>">

<br>

<input name="price" type="hidden" value="<?php print $rows['price']?>" >

<br>

<a href="product-details.php?id=<?php print $rows['id']?>">More details</a>

<br><br>

<button type="submit" id="showMoreButton" name="add">Add to cart</button>

</form>

</div>

<?php }

else

echo"empty";

if(isset($_POST['add']))

$sql1="SELECT * from order_items WHERE user_id='{$_SESSION['user_id']}' AND


product_id='{$_POST['pid']}';";

$res1=$db->query($sql1);

if($res1->num_rows==0)

$sql="INSERT INTO order_items (user_id, product_id,quantity,subtotal) VALUES


('{$_SESSION['user_id']}','{$_POST['pid']}','1','{$_POST['price']}');";

$res = $db->query($sql);
echo "<div id='alert-dialog'>

<h3>Success</h3>

<br>

<p>Product added successfuly</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

else

echo "<div id='alert-dialog'>

<h3>Error</h3>

<br>

<p>Product already added</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

?>

</div>

<footer>

<p>&copy; 2025 Jewelary Store</p>

</footer>
<script src="js/script.js"></script>

</body>

</html>

The product details code :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/style.css">

<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

<title>Jewelry Store - product</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Playwrite+SK+G
uides&display=swap" rel="stylesheet">

</head>

<body>

<?php

session_start();

if(!isset($_SESSION["user_id"])){

header("location:login.php");

?>

<header>

<a id="cart" href="cart.php"> <img src="images/shopping-cart.png" alt="cart"> </a>

<div id="header">
<img src="images/logo.png" alt="logo">

<nav>

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="category.php">Categories</a></li>

<li><a href="about.html">About</a></li>

<li><a href="allproducts.php">Shop</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</nav>

</div>

</header>

<?php

include("connect.php");

$sql="SELECT * FROM jewelary WHERE id='{$_GET['id']}';";

$result=$db->query($sql);

if($result->num_rows >0)

$rows=$result->fetch_assoc();

?>

<form action="product-details.php?id=<?php print $rows['id']?>" class="form" method =


"post" name="form">

<div class="product-details">

<div class="product-image">

<img src="images/<?php print $rows['photo']?>" height="400" width="400">

<br>
<div id="more-images">

<img src="images/j3.jpg" height="100" width="100">

<img src="images/j3.jpg" height="100" width="100">

</div>

</div>

<div class="product-info">

<h3><?php print $rows['name']?></h3>

<br>

<h4><?php print $rows['price']?> SAR</h4>

<br>

<p>

<?php print $rows['description']?>

</p>

<br>

<p>

weight:<?php print $rows['weight']?>

</p>

<br>

<p>

size :<?php print $rows['size']?>

</p>

<br>

<p>

color:<?php print $rows['color']?>

</p>
<br>

<div id="countity">

<button type="button" id="minus" onclick="decCountity()">-</button>

<input id="amount" name="countity" type="number" value="1" >

<input name="price" type="hidden" value="<?php print $rows['price']?>" >

<button type="button" id="plus" onclick="incCountity()">+</button>

</div>

<br><br>

<div id="action">

<button type="submit" id="showMoreButton" name="add">Add to cart</button>

<button type="button" id="showMoreButton">Add to washlist</button>

</div>

</div>

<?php

else

echo"empty";

if(isset($_POST['add']))

$_POST['countity'] = addslashes($_POST['countity']);

$_POST['price'] = addslashes($_POST['price']);

$subtotal=$_POST['countity'] * $_POST['price'];
$sql1="SELECT * from order_items WHERE user_id='{$_SESSION['user_id']}' AND
product_id='{$_GET['id']}';";

$res1=$db->query($sql1);

if($res1->num_rows==0)

$sql="INSERT INTO order_items (user_id, product_id,quantity,subtotal) VALUES


('{$_SESSION['user_id']}','{$_GET['id']}','{$_POST['countity']}','$subtotal');";

$res = $db->query($sql);

echo "<div id='alert-dialog'>

<h3>Success</h3>

<br>

<p>Product added successfuly</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

else

echo "<div id='alert-dialog'>

<h3>Error</h3>

<br>

<p>Product already added</p>

<br>

<button onclick='closeAlertDialog()'>Ok</button>

</div> ";

}
}

?>

</div>

</form>

<footer>

<p>&copy; 2025 Jewelary Store</p>

</footer>

<script src="js/script.js"></script>

</body>

</html>

The script code :

var c = 1;

function decCountity() {

if(c == 1 | c < 0){

document.getElementById("amount").value = 1;

}else{

c -= 1;

document.getElementById("amount").value = c;

function incCountity() {

c+=1;

document.getElementById("amount").value =c;

function closeAlertDialog() {
document.getElementById("alert-dialog").style.display="none";

function calculateGoldZakat() {

const goldValue = document.getElementById('weight').value * 85;

const totalZakat = goldValue * 0.025; // 2.5% zakat rate

document.getElementById('result').innerText = totalZakat+" $";

function calculateSilverZakat() {

const silverValue = document.getElementById('weight').value * 1.39;

const totalZakat = silverValue * 0.025; // 2.5% zakat rate

document.getElementById('result').innerText = totalZakat+" $";

In the first phase, the project goals and features were defined, followed by the design of the
website interfaces. In this phase, the website will be developed using HTML, CSS,
JavaScript, and PHP. Then, a database will be created and linked to the website interfaces.

Database and tables :

Through the XAMPP program and by accessing the phpMyAdmin control panel, we created
the database and tables as shown in the following image:
Website Implementation

Using programming languages HTML, CSS, JavaScript, and PHP, web pages were created
and linked to the database, as outlined below:

Database connection:

<?php

$db = new mysqli("localhost", "root", "", "jewelary");

if (!$db) {

echo "<h1>Unable to connect database</h1>";

?>

Description: This code establishes a connection to the MySQL database


named jewelary

The login page:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/style.css">

<title>Jewelry Store - Login</title>

</head>

<body>

<?php

ob_start();
session_start();

if (isset($_SESSION["user_id"])) {

header("location:index.php");

include("connect.php");

if (isset($_POST['login'])) {

$_POST['email'] = addslashes($_POST['email']);

$_POST['password'] = addslashes($_POST['password']);

$sql = "SELECT * FROM user WHERE email = '{$_POST["email"]}' AND password =


'{$_POST["password"]}'";

$res = $db->query($sql);

if ($res->num_rows > 0) {

$row = $res->fetch_assoc();

$_SESSION["user_id"] = $row["id"];

$_SESSION["user_name"] = $row["name"];

header("location:index.php");
} else {

echo "<div id='alert-dialog'>

<h3>Error</h3>

<p>Incorrect user information</p>

<button onclick='closeAlertDialog()'>Ok</button>

</div>";

}
?>

<div class="login">

<img src="images/logo.png" alt="logo">

<h1>Login</h1>

<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" class="form" method="post"


name="form">

<input type="email" id="email" name="email" placeholder="Enter your email"


required>

<input type="password" id="password" name="password" placeholder="Enter your


password" required>

<button type="submit" name="login">Login</button>

</form>

</div>

<script src="js/script.js"></script>

</body>

</html>

Description: This code represents the login page where users enter their email
and password.
The Home page :

Home Page (index.php)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Jewelry Store - Home</title>
</head>
<body>

<?php
session_start();
if (!isset($_SESSION["user_id"])) {
header("location:login.php");
}
?>

<header>
<a id="cart" href="cart.php"><img src="images/shopping-cart.png"
alt="cart"></a>
<a href="logout.php">Logout</a>
<div id="header">
<img src="images/logo.png" alt="logo">
<nav>
<ul>
<li><a href="category.php">Categories</a></li>
<li><a href="about.html">About</a></li>
<li><a href="allproducts.php">Shop</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
</div>
</header>

<main>
<div class="gallery">
<div class="gallery-item">
<img src="images/j2.jpg" alt="Earring 1">
</div>
<div class="gallery-item">
<img src="images/j2.jpg" alt="Earring 2">
</div>
</div>
</main>

<footer>
<p>&copy; 2025 Jewelry Store</p>
</footer>

<script src="js/script.js"></script>
</body>
</html>
Description: This is the home page displaying categories and a shopping cart
link.

Zakat Calculator :
<div class="calculator">
<form action="index.php" class="form" method="post" name="form">
<h3>Zakat Calculator</h3>
<input type="number" id="weight" name="weight" placeholder="Enter
amount in grams">
<button type="submit" name="gold"
onclick="calculateGoldZakat()">Gold</button>
<button type="submit" name="silver"
onclick="calculateSilverZakat()">Silver</button>
<div class="result">
<h3>Total Zakat Due</h3>
<p id="result">00 $</p>
</div>
</form>
</div>

Shopping Cart (cart.php) :

<div class="product">
<?php
include("connect.php");
if(isset($_POST['inc']))
{$amount=$_POST['amount'] +1;

$sql1="UPDATE order_items SET quantity='$amount' WHERE


user_id='{$_SESSION['user_id']}' ANDproduct_id='{$_POST['pid']
}';";
$res1=$db->query($sql1);
}
if(isset($_POST['dec']))
{$amount=$_POST['amount'];
if($amount !=1 || $amount <=0){
$amount=$_POST['amount'] -1;
$sql1="UPDATE cart SET quantity='$amount' WHEREuser
_id='{$_SESSION['user_id']}' ANDproduct_id='{$_POST['pid']}';";
$res1=$db->query($sql1);
}

}
if(isset($_POST['remove']))
{

$sql1="DELETE from order_items WHEREuser_id='{$_SESSION['use


r_id']}' ANDproduct_id='{$_POST['pid']}';";
$res1=$db->query($sql1);

if($res1)
{

echo "<div id='alert-dialog'>


<h3>Success</h3>
<br>
<p>Product remove successfuly</p>
<br>
<button onclick='closeAlertDialog()'>Ok</button>
</div> ";
}
else
{

echo "<div id='alert-dialog'>


<h3>Error</h3>
<br>
<p>Remove error</p>
<br>
<button onclick='closeAlertDialog()'>Ok</button>
</div> ";
}
}

$sql="SELECT name, photo,


price, quantity,product_id FROMjewelary JOIN order_items ON jew
elary.id=order_items.product_idWHERE user_id={$_SESSION['user_i
d']};";
$result=$db->query($sql);
$total=0;
$subtotal=0;
if($result->num_rows >0)
{

while($rows=$result->fetch_assoc())
{
$subtotal=$rows['price'] * $rows['quantity'];
$total +=$subtotal;
?>

<div class="product-box">
<form action="cart.php" class="form" method = "post"name="f
orm">
<img src="images/<?php print
$rows['photo']?>" height="250"width="250">
<br>
<h3><?php print $rows['name']?></h3>
<br>
<h4><?php print $rows['price']?> SAR</h4>
<br>
<h4>total: <?php print $subtotal ?> SAR</h4>
<br>
<div>
<input type="submit" name="dec" value=" - ">
<input type="number" name="amount" id="amount" value="<
?php print $rows['quantity']?>">
<input type="submit" name="inc" value=" + ">
</div>
<br>
<input type="hidden" name="pid" value="<?php print
$rows['product_id']?>">
<button id="remove" type="submit"name="remove">Remove</
button>
</form>
</div>

<?php }

}
else
{
echo"empty";
}

if(isset($_POST['order']))
{

$sql1="SELECT * from `order` WHERE`user_id`='{$_SESSION['user


_id']}';";
$res1=$db->query($sql1);

if($res1->num_rows==0)
{
$sql="INSERT INTO `order` (`id`, `order_date`,
`total_price`, `order_status`, `user_id`) VALUES (NULL,
CURRENT_TIMESTAMP, '150', 'done', '{$_SESSION['user_id']}');";
$res = $db->query($sql);

echo "<div id='alert-dialog'>


<h3>Success</h3>
<br>
<p>Order done</p>
<br>
<button onclick='closeAlertDialog()'>Ok</button>
</div> ";
}
else
{

echo "<div id='alert-dialog'>


<h3>Error</h3>
<br>
<p>Order error</p>
<br>
<button onclick='closeAlertDialog()'>Ok</button>
</div> ";
}
}

?>
</div>
<br>
<div id="order">
<form action="cart.php" class="form" method = "post"name="form"
>
<h3>Total Price: <?php print $total ?> $</h3>
<br>
<br>
<button id="order" type="submit"name="order">Order</but
ton>
</form>
<br>
</div>
Project Summary: Online Jewelry Store with Zakat Calculator

This project is an e-commerce website designed for selling jewelry, integrating a Zakat
calculator to help users calculate their Islamic Zakat obligations on gold and silver. The
website provides a seamless shopping experience with features such as user authentication,
product browsing, cart management, and order processing.

The project is developed using HTML, CSS, JavaScript, PHP, and MySQL.
The frontend ensures a visually appealing and responsive interface, while
the backend manages data processing and user interactions.

Key Features:

User Authentication: Login and registration functionality with session management.


Jewelry Shopping: Browse jewelry categories, view product details, and add items to the
cart.
Zakat Calculator: Allows users to calculate Zakat on their jewelry based on gold and silver
weights.
Shopping Cart & Checkout: Users can manage their cart, adjust quantities, and place
orders.
Database Integration: Stores user accounts, product details, and order history.
Secure Transactions: Uses PHP & MySQLi for secure database operations.

Conclusion
This Online Jewelry Store project successfully integrates e-commerce functionality with
a Zakat calculator, offering a unique experience for users interested in both purchasing
jewelry and calculating their Islamic obligations. The project utilizes a full-stack
development approach with PHP and MySQL for the backend and HTML, CSS, and
JavaScript for the frontend.
1. Database Connection (PHP & MySQL)

• Reference:
o PHP MySQL Database Connection - W3Schools
o PHP MySQLi Connection Guide - PHP.net
o PDO vs MySQLi - Official PHP Documentation

2. User Authentication (Login & Sessions in PHP)

• Reference:
o PHP Login System with MySQL - W3Schools
o PHP Sessions - PHP.net
o Secure Login System using PHP & MySQL - TutorialsPoint

3. HTML, CSS, and JavaScript for Frontend Design

• Reference:
o HTML Basics - Mozilla Developer Network (MDN)
o CSS Guide - W3Schools
o JavaScript Tutorial - MDN
o Responsive Web Design with CSS - W3C

4. Handling Forms & User Input (PHP)

• Reference:
o PHP Form Handling - W3Schools
o PHP POST Method - PHP.net
o PHP Security: Protecting Against SQL Injection - OWASP

5. Shopping Cart & Order Management in PHP

• Reference:
o Building a Shopping Cart with PHP - PHPGurukul
o E-commerce Order Management in PHP - GeeksforGeeks

6. Zakat Calculator Implementation (PHP & JavaScript)

• Reference:
o Simple PHP Calculator - Tutorial Republic
o Live Gold & Silver Prices API for Zakat Calculation - GoldAPI
o Islamic Zakat Calculation - Zakat Foundation

You might also like