DECLARATION

We hereby declare that the project work detail which is being presented in this report is in
fulfilment of the requirement for the award of degree of Bachelor of Computer Application.

We hereby declare that we have undertaken our project work on “Custom Craft” under the
guidance of Prof. Anusha Rai Asst. Professor, Department of Computer Science and
Information Science, Srinivas University, Mangalore.

We hereby declare that this project work report is our own work and the best of our knowledge
and belief the matter embedded in report has not been submitted by us for the award of other
degree to this or any other university.

Place: Mangalore Mr. Aman

3SU21SA014
Date:27-4-2024
 ACKNOWLEDGEMENT

Any achievement big or small should have a catalyst and constant encouragement and
advice of valuable.
and noble minds. The satisfy action and euphoria that accompanies the successful
completion of any task would be incomplete without the mention of the people who
made it possible, whose constant guidance and encouragement crowned our efforts
with success.

We would like to express our sincere and grateful thanks to our Dr. P Sridhara
Acharya, Professor, Department of Computer Science and Information Science,
Srinivas University, Mangalore for the valuable guidance, encouragement,
technical comments throughout our project work.

We also wish to thank all the staff members, non-teaching staff members of the
Department of Computer Science and Information Science who have helped us
directly or indirectly in the completion of our final project successfully.

Finally, we are thankful to our parents, friends and loved ones, who are always our
source of inspiration and for their continued moral and material support throughout
the course and in helping us to finalize the project.

Mr. Aman
3SU21SA014
 ABSTRACT

This Project on “Custom Craft” has been made very iteratively keeping in mind
reusability and friendly.

Welcome to Custom Craft, where our main objective is to create a platform for
users to book appointments for our premium service offerings. Our project entails
developing an application that provides web users with a seamless and effective
way of managing appointments and services. We've crafted an intuitive website
using PHP as the frontend and MYSQL as the backend, ensuring smooth
database management. Each user is assigned a unique ID and password for
authorized access, guaranteeing data security and privacy. At Custom Craft, we
prioritize convenience and reliability in every interaction.
CONTENTS

1. SYNOPSIS

CHAPTER-1

1.1 INTRODUCTION
1.2 ABOUT US
1.3 SERVICES
1.4 PRODUCT

HOW IT WORKS

1.5 TESTIMONIALS
1.6 CONTACT US
1.7 TEAM MEMBERS
1.8 LIMITATIONS AND FUTURE SCOPE
1.9 FOOTER

2.SOFTWARE REQUIREMENT SPECIFICATIONS(SRS)

CHAPTER-2

2.1 INTRODUCTION

2.2 PURPOSE

2.3 SCOPE

2.4 DEFINATION, ACRONYMS AND ABBRIVATIONS

2.5 OVERVIEW

2.6 OVERALL DISCRIPTION

2.7 PRODUCTIVE PERSPECTIVE

2.8 PRODUCT FUNCTION

2.9 SUPPORTED BROWSERS

2.10 USER CLASSES AND CHARECTERISTICS

2.11 GENERAL CONSTRAINTS

2.12 ASSUMPTIONS AND DEPENDENCIES

2.13 SPECIFIC REQUIREMENTS

2.13.1 SOFTWARE REQUIREMENTS

2.13.2 HARDWARE REQUIREMENTS

2.14 FUNCTIONAL REQUIREMENTS

2.15 PERFOMENCE REQUIREMENTS

2.16 DESIGN CONSTRAINTS

2.17 SYSTEM ATTRIBUTES

2.18 OTHER REQUIREMENTS

3.SYSTEM DESIGN

CHAPTER-3

3.1 INTRODUCTION

3.2 CONTEXT FLOW DIAGRAM

3.3 DATA FLOW DIAGRAM

3.3.1 INTRODUCTION TO DFD

3.4 RULES REGUARDING DFD CONSTRUCTION

3.5 DFD SYMBOLS

3.6 DFD FOR ADMIN

3.7 DFD FOR LAPTOP

3.8 DFD FOR LAPTOP-COMPONENTS

3.9 DFD FOR SOFTWARE-COMPONENTS

3.10 DFD FOR CART

3.11 DFD FOR LOGIN

3.12 DFD FOR LOGOUT

3.13 ENTITY RELATIONSHIP

4.DETAIL DESIGN

CHAPTER-4

4.1 INTRODUCTION

4.2 APPLICABLE DOCUMENT

4.3 STRUCTURE OF SOFTWARE PACKAGE

4.4 STRUCTURE

4.4.1 ADMIN
4.4.2 PRODUCT

4.4.3 CART

4.4.4 FEEDBACK

4.4.5 LOGIN LOGOUT

5.CODING

CHAPTER-5

5.1 INDEX.HTML

5.2 ABOUTUS.HTML

5.3 PRODUCTS

5.4 LAPTOP.HTML

5.5 COMPONENTS.HTML

5.6 SOFTWAREHTML

5.7 CONTACT.HTML

5.8 CART.HTML

5.9 BILLING.HTML

5.10 CONFIRMATION.HTML

5.11 LOGIN.HTML

5.12 LOGOUT.HTML

5.13 SCRIPT.JS

5.14 STYLE.CSS
 Chapter - 1

1.Synopsis

1.1INTRODUCTION

 Title: "Custom Craft: Your Ultimate Destination for Custom-Built PCs"

 Introduction: Briefly introduce Custom Craft as a platform producing Laptops with
quality components and expert craftsmanship.

1.2bout Us:

 Describe the mission and vision of Custom Craft, emphasizing expertise in building
custom PCs tailored to customers' needs.
 Highlight the team's dedication to delivering top-notch service and products.

1.3Services:

 PC Customization: Detail the process of customizing PCs according to customers'

preferences, including hardware selection, assembly, and testing.
 Expert Consultation: Offer expert consultation services to guide customers in
selecting the right components for their custom-built PC.
 Quality Assurance: Highlight the rigorous quality assurance measures implemented
to ensure the performance and reliability of every laptop sold by Custom Craft.

1.4Products:

 Showcase various pre-built Laptops and other products like laptop components and
software components.
 Provide detailed specifications and pricing for each pre-built PC configuration.

1.5How It Works:

 Step-by-step guide on how customers can buy their custom PCs through Custom
Craft, from selecting components to placing orders and receiving their PCs.
 Highlight the expertise and attention to detail involved in every stage of the PC-
building process.

1.6Testimonials:

 Display testimonials from satisfied customers who have experienced the superior
performance and reliability of Custom Craft PCs.
 Include customer reviews praising the customization options, build quality, and
customer service.

1.7Contact Us:
  Provide contact information for reaching out to Custom Craft for inquiries,
consultations, and customer support.
 Include a contact form for users to submit their queries or requests directly through
the website.

1.8Team Members:

 Feature profiles of the team members behind Custom Craft, highlighting their
expertise in PC building and customer service.

1.9Limitations and Future Scope:

 Discuss any limitations of the current offerings and plans for future enhancements,
such as expanding product offerings, improving user interface, and embracing
emerging technologies in PC building.

1.10Footer:

 Include links to social media profiles, terms of service, privacy policy, and other
relevant pages.
 Add a copyright notice and disclaimer.

By incorporating these elements and tailoring the content to the theme of computer building,
you can create a compelling website for Custom Craft that effectively communicates its
offerings and value proposition to potential customers.
 Chapter - 2
2.SOFTWARE REQUIREMENT SPECIFICATION

2.1 Introduction:
This Software Requirement Specification document comprehensively outlines all
functionalities and specifications for the "Custom Craft" system. It offers a detailed overview
of the derived SRS for the application, focusing on its scope, benefits, and overall
description.

2.2 Purpose:
"Custom Craft" is a website dedicated to the computer building and manufacturing industry.
This document aims to outline the external requirements of the project, translating client
ideas into a formal document. An SRS minimizes developers' time and effort, ensuring
alignment with desired goals and minimizing development costs.

2.3 Scope:
The primary objective of "Custom Craft" is to provide users with a platform for customizing
and purchasing high-quality custom-built PCs online. It enables customers to tailor their PC
specifications and place orders conveniently from anywhere. By automating manual
processes, it streamlines operations and enhances efficiency.

2.4 Definition, Acronyms, Abbreviations:

GUI: Graphical User Interface
DBMS: Database Management System
SRS: Software Requirement Specification
CPU: Central Processing Unit
PHP: Hypertext Preprocessor
SQL: Strctured Query Language
HTML: Hyper Text Markup Language
CSS: Cascading Style Sheet

2.5 Overview:
"Custom Craft" is a web-based application designed for computer enthusiasts to customize
and purchase custom-built PCs. This SRS details the requirements for developing an online
platform for computer building and manufacturing.

2.6 Overall Description:

This section provides an overview of the entire system, including its context, basic
functionality, user types, and constraints. "Custom Craft" is an independent product catering
to admin, delivery, kitchen, and customer users. It offers online access and a user-friendly
interface for seamless interaction.

2.7 Productive Perspective:

"Custom Craft" is a standalone product with distinct user categories and online accessibility.
It relies on external interfaces for persistence and interfaces with users through a graphical
user interface (GUI). The system simplifies the process of customizing and purchasing PCs
while providing a seamless user experience.

2.8 Product Function:

- PC Customization: Enables users to customize PC specifications.
- Menu Management: Allows kitchen staff to manage available PC configurations.
- Order Retrieval System: Tracks and manages customer orders.
- Improved Efficiency: Reduces manual workload and enhances flexibility.
- Feedback Mechanism: Allows customers to provide feedback on their orders.
- Seamless Management: Enables online management of all activities.

2.9 Supported Browsers:

- Google Chrome
- Microsoft Edge

2.10 User Classes and Characteristics:

"Custom Craft" accommodates four user levels: admin, kitchen, delivery, and customer. Each
user type has specific functionalities and access rights tailored to their roles.

2.11 General Constraints:

- Internet connectivity required.
- Initial registration and confirmation process for customers.
- Menu management restricted to admin.
- Data integrity and security measures in place.

2.12 Assumptions and Dependencies:

Assumptions include user categorization, menu management by admin, and accurate data
entry. The system relies on existing infrastructure for data storage and retrieval.

2.13 Specific Requirements:

External Interface Requirements:
User Interface:
- Textboxes, buttons, labels, checkboxes, and combo boxes for user interaction.

2.13.1 Software Requirements:

- Operating System: Windows
- Text Editor: Sublime Text 3, Visual Studio
- Language: PHP
- Server: Apache
- User Interface: HTML, CSS, JavaScript
- Database: MySQL

2.13.2 Hardware Requirements:

- Processor: Intel Pentium dual-core or above
- Processor Speed: 2GHz
- RAM: 1GB
- Hard Disk: Minimum 40GB

2.13.3 Communication Interface:

- HTTP protocol for communications.
- TCP/IP protocol for internet communication.

2.14 Functional Requirements:

Detailed functionalities outlined for admin, kitchen, delivery, and customer users, including
login, profile management, order processing, and feedback submission.

2.15 Performance Requirements:

- Server capacity to handle concurrent user transactions.
- Page load time under 40 seconds.
- Memory space optimization.
- Error-free operation.
- Timely upload/download of files.

2.16 Design Constraints:

- Mandatory fields validation during registration and order placement.
- User-friendly and cross-browser compatibility.
- Data integrity and security measures.

2.17 System Attributes:

Quality, performance, reliability, user-friendliness, maintainability, portability, flexibility, and
timeliness highlighted as key attributes.

2.18 Other Requirements:

Safety and security requirements outlined, including user authentication, data backup, and
access control mechanisms.

By adhering to these specifications, "Custom Craft" aims to deliver a seamless experience for
users seeking to customize and purchase custom-built PCs online.
 CHAPTER - 3
3.SYSTEM DESIGN

3.1 Introduction:
The design process aims to create a model or representation of the system, which serves as a
blueprint for system development. Systems design involves defining the architecture,
modules, interfaces, and data to meet specified requirements. It applies systems theory to
product development, systematically addressing all variables related to system creation.
System design significantly influences the testability and modifiability of the system,
resulting in the architectural design for the software system.

3.2 Context Flow Diagram:

The context flow diagram serves as a top-level representation of data flow within the system.
It features a single process node that encapsulates the entire system's function in relation to
external entities. In the context diagram, the system is depicted as a single process,
highlighting its inputs, outputs, sinks, and sources.

For the "Custom Craft" website, the context flow diagram would illustrate the flow of
information and interactions between users and the system, providing a high-level overview
of its functionality and external interfaces.

3.DATA FLOW DIAGRAM

3.3.1 Introduction:
A Data Flow Diagram (DFD) is a visual representation of a system or a portion of the system,
illustrating dataflows, processes, sources, sinks, and stores using easily understandable
symbols. It is a crucial modelling tool used to depict system components, interactions, and
information flows. DFDs show how information moves through the system and is modified
by various transformations. Also known as bubble charts or Data Flow Graphs, DFDs can
represent the system at different levels of abstraction, partitioning into increasing information
flows and functional details.

3.4 Rules Regarding DFD Construction:

- A process cannot have only outputs.
- A process cannot have only inputs.
- Inputs to a process must be sufficient to produce outputs from the process.
- All data stores must be connected to at least one process.
- All data stores must be connected to a source or sink.
- Each data flow can have only one direction of flow. Multiple data flows to and/or from the
same process and data store must be shown by separate arrows.
- If the same data flows to two separate arrows, represent it with a forked arrow.
- Data cannot flow directly back into the process it has just left.
- All data flows must be named using a noun phrase.

For "Custom Craft," a DFD will visually represent how information flows within the system,
including processes, data stores, and external entities. It will adhere to these rules to ensure
clarity and accuracy in depicting the system's functionality.
DFD AND ENTITY RELATIONSHIP DIAGRAM
3.6 ADMIN
3.7 LAPTOP
3.8 LAPTOP COMPONENTS
3.9 SOFTWARE COMPONENTS

3.10 cart
3.11 LOGIN
3.12 LOGOUT
.13 Entity Relationship Diagram:
The ER Diagram for "Custom Craft" website will consist of primary components such as
Data Objects, Attributes, and Relationships.
- Data Objects: Represent composite information understood by the software, including
various properties or attributes.
- Attributes: Define the properties of data objects, naming instances, describing instances, or
referencing other instances.
- Relationships: Indicate connections between data objects, showing how they are linked to
each other.

The ER Diagram visually represents the structure of data objects and their relationships
within the "Custom Craft" website, aiding in understanding and organizing the data model.
4.0 Detailed design:
4.1 Introduction:
The purpose of preparing this document is to explain complete design details of
Repair Me. This detailed design report will mainly contain the general definition
and features of the project, design constraints, the overall system architecture and
data architecture. Additionally, a brief explanation about our current progress and
schedule of the project will be provided in related sections. Design of the system
andsubsystems/modules will be explained both verbally and visually by means of
diagrams in order to help the programmer to understand all information stated in
this document correctly and easily.
4.2 Applicable document:

The documents used during detailed design are :

 System Requirements Document

 System Design
 Database Design

4.3 Structure of software package

 Registration component for user.
 Login component for user, Admin.
 product component for users, Admin.
 purchase component for user.
 Category selection components for user.

Modular decomposition of packages

4.4 Structure:
4.4.1 ADMIN
4.4.2 PRODUCT
4.4.3 CART
4.4.4FEEDBACK:
4.4.5 LOGIN AND LOGOUT:
5.0 Coding:
5.1 Index.php
<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];

// Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch user from database

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE
username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($id, $db_username, $db_password);
$stmt->fetch();

if ($db_username && password_verify($password, $db_password)) {

$_SESSION['user_id'] = $id;
$_SESSION['username'] = $db_username;
// Redirect to a logged-in page
header("Location: welcome.php");
 exit();
} else {
echo "Invalid username or password";
}

$stmt->close();
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
<?php else: ?>
 <li><a href="welcome.php">Welcome</a></li>
<li><a href="logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</nav>

<div id="user-info">
<span id="user-name"></span> | <span id="user-phone"></span>
</div>
</div>
</header>

<main>
<section id="hero">
<div class="container">
<h2>Welcome to Our Tech World</h2>
<p>Delivering cutting-edge solutions for your technology needs.</p>
<a href="aboutus.php" class="btn">Learn More</a>
<span id="phoneValidationMessage" style="color: red;"></span>
</div>
</section>
</main>

<footer>
<p>&copy; 2024 Custom Craft</p>
</footer>

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

5.2 ABOUT US.php:

<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];

// Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch user from database

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE
username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($id, $db_username, $db_password);
$stmt->fetch();

if ($db_username && password_verify($password, $db_password)) {

$_SESSION['user_id'] = $id;
$_SESSION['username'] = $db_username;
// Redirect to a logged-in page
header("Location: welcome.php");
exit();
 } else {
echo "Invalid username or password";
}

$stmt->close();
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laptops - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
<?php else: ?>
<li><a href="welcome.php">Welcome</a></li>
 <li><a href="logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</nav>
<div id="user-info">
<span id="user-name"></span> | <span id="user-phone"></span>
</div>
</div>

</div>
</header>

<section id="welcome">
<div class="container">
<h2>Welcome to Custom Craft</h2>
<p>Welcome to Custom Craft, your one-stop destination for all your computing
needs! At Custom Craft, we specialize in providing a wide range of high-quality computer
software and hardware products, carefully curated to meet the diverse needs of our
customers.</p>
<p>From cutting-edge operating systems and productivity-enhancing application
software to top-of-the-line computer components and peripherals, we offer a comprehensive
selection of products to cater to both personal and business requirements. Whether you're a
seasoned professional looking for powerful workstation solutions or an enthusiastic gamer
seeking the latest gaming hardware, Custom Craft has got you covered.</p>
<p>Our website is designed with one goal in mind: to make your computing
experience as seamless and enjoyable as possible. With our intuitive interface and user-
friendly navigation, finding the perfect products for your needs has never been easier. Browse
through our extensive collection, compare specifications, and make informed decisions with
confidence.</p>
<p>At Custom Craft, we understand that every customer is unique, and we're
dedicated to providing personalized assistance every step of the way. Our team of experts is
always ready to offer tailored recommendations, technical support, and guidance to ensure
that you find exactly what you're looking for.</p>
</div>
</section>
 <script src="script.js"></script>

</body>
</html>

5.3 Product.php:
<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
 // Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch user from database

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE
username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($id, $db_username, $db_password);
$stmt->fetch();

if ($db_username && password_verify($password, $db_password)) {

$_SESSION['user_id'] = $id;
$_SESSION['username'] = $db_username;
// Redirect to a logged-in page
header("Location: welcome.php");
exit();
} else {
echo "Invalid username or password";
}

$stmt->close();
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
<?php else: ?>
<li><a href="welcome.php">Welcome</a></li>
<li><a href="logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</nav>

<div id="user-info">
<span id="user-name"></span> | <span id="user-phone"></span>
</div>
 </div>
</header>

<section id="laptops">
<div class="container">
<a href="laptops.php" class="btn">Laptops</a>
</div>

</section>

<section id="laptop-components">
<div class="container">
<a href="components.php" class="btn">Laptop Components</a>
</div>
</section>

<section id="software-components">
<div class="container">
<a href="software.php" class="btn">Software Components</a>

</div>
</section>
<script>
// Retrieve name and phone number from local storage
const name = localStorage.getItem('name');
const phone = localStorage.getItem('phone');

// Update user info in the header

const userNameElement = document.getElementById('user-name');
 const userPhoneElement = document.getElementById('user-phone');
if (name && phone) {
userNameElement.textContent = name;
userPhoneElement.textContent = phone;
}
</script>

<footer>
<p>&copy; 2024 Custom Craft</p>
</footer>

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

</body>
</html>

5.4Laptop.php:
<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];

// Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');
 if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch user from database

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE
username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($id, $db_username, $db_password);
$stmt->fetch();

if ($db_username && password_verify($password, $db_password)) {

$_SESSION['user_id'] = $id;
$_SESSION['username'] = $db_username;
// Redirect to a logged-in page
header("Location: welcome.php");
exit();
} else {
echo "Invalid username or password";
}

$stmt->close();
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laptops - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
<?php else: ?>
<li><a href="welcome.php">Welcome</a></li>
<li><a href="logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</nav>

<div id="user-info">
<span id="user-name"></span> | <span id="user-phone"></span>
</div>
</div>
</header>
 <main>
<section class="product-category">
<h2>Laptops</h2>

<div class="product-list">
<!-- Add laptop products here -->
<div class="product">
<img src="\img\61-XXPIOivL._SL1108_.jpg" alt="Lenovo IdeaPad 3"
width="300px" height="400px">
<h3>Lenovo IdeaPad 3</h3>
<p>12th Gen, 39.62cms - Intel i7 (Arctic Grey)</p>
<p>Price: RS 60,000</p>
<button class="add-to-cart-btn" data-product="Lenovo IdeaPad 3" data-
price="60000">Add to Cart</button>
</div>
<div class="product">
<img src="\img\81GU80aud-L.jpg" alt="Acer Predator Helios 16 Gaming
Laptop">
<h3>Acer Predator Helios 16 Gaming Laptop</h3>
<p>13th Gen Intel Core i7 Processor (16 GB/1 TB SSD/Windows 11
Home/NVIDIA ® GeForce RTX ¢ 4050)</p>
<p>Price:RS 1,12,900</p>
<button class="add-to-cart-btn" data-product="Acer Predator Helios 16 Gaming
Laptop" data-price="112900">Add to Cart</button>
</div>
<div class="product">
<img src="\img\m1airgrey1_1445x (1).jpg"alt="Macbook pro M1">
<h3>Macbook pro M1</h3>
<p>(8 GB/1 TB SSD/Mac OS Big Sur) Z11B0008S (13.3 inch, Space Grey, 1.4
kg)</p>
<p>Price: 89,650</p>
 <button class="add-to-cart-btn" data-product="Macbook pro M1" data-
price="89650">Add to Cart</button>
</div>
<div class="product">
<img src="\img\71foAS+2AjL._SL1500_.jpg" alt="HP Victus">
<h3>HP Victus</h3>
<p>12th Gen Intel Core i7-12650H, 4GB RTX 3050 GPU, 15.6-inch </p>
<p>Price: RS 1,34,780</p>
<button class="add-to-cart-btn" data-product="HP Victus" data-
price="134780">Add to Cart</button>
</div>
<div class="product">
<img src="\img\71c0GSxtEEL._SL1500_.jpg"alt="ASUS Vivobook">
<h3>ASUS Vivobook</h3>
<p> Intel Core i9-13900H 13th Gen, 16" (40.64 cm) FHD+, Thin & Light
Laptop (16GB/512GB SSD/Intel Iris Xe/Win 11/Office 2021/Backlit
KB/Fingerprint/Black/1.88 kg)</p>
<p>Price: RS 46,690</p>
<button class="add-to-cart-btn" data-product="ASUS Vivobook" data-
price="46690">Add to Cart</button>
</div>
<div class="product">
<img src="\img\71VETao+NEL._SL1500_.jpg"alt="Samsung Galaxy Book2">
<h3>Samsung Galaxy Book2</h3>
<p> (NP750) Intel 12th Gen core i5 39.6cm (15.6") FHD Thin & Light Laptop
(8 GB/512 GB/Windows 11/MS Office/Backlit Keyboard/Finger Print</p>
<p>Price: RS 49,990</p>
<button class="add-to-cart-btn" data-product="Samsung Galaxy Book2" data-
price="49990">Add to Cart</button>
</div>
<div class="product">
<img src="\img\717UzN34uaL._SL1500_.jpg"alt="ASUS TUF Gaming F17">
 <h3>ASUS TUF Gaming F17</h3>
<p> Gaming Laptop, Intel Core i5-11400H 11th Gen, 17.3-inch (43.94 cm) FHD
144Hz, (16GB/512GB SSD/4GB NVIDIA RTX 2050</p>
<p>Price: RS 52,990</p>
<button class="add-to-cart-btn" data-product="ASUS TUF Gaming F17" data-
price="52990">Add to Cart</button>
</div>
<div class="product">
<img src="\img\613l-s5+RXL._SL1080_.jpg"alt="Acer Swift Go 14 ">

<h3>Acer Swift Go 14 </h3>

<p> Intel Core Ultra 5 125H (35.56cm 14-inch OLED WQXGA+/16GB
LPDDR5x/512GB SSD/Intel Arc Graphics/1440p Camera with Shutter</p>
<p>Price: RS 89,999</p>
<button class="add-to-cart-btn" data-product="Acer Swift Go 14 " data-
price="89999">Add to Cart</button>
</div>
<div class="product">
<img src="\img\710kMhJg2lL._SL1500_.jpg"alt="TECNO MEGABOOK T1">

<h3>TECNO MEGABOOK T1 </h3>

<p> Intel Core 11th Gen i3 Processor (8GB RAM/512GB SSD Storage), 15.6-
Inch(39.62 CM) Eye Comfort disply,</p>
<p>Price: RS 23,990</p>
<button class="add-to-cart-btn" data-product="TECNO MEGABOOK T1 " data-
price="23990">Add to Cart</button>
</div>
 </div>

</section>
<script>
// Retrieve name and phone number from local storage
const name = localStorage.getItem('name');
const phone = localStorage.getItem('phone');

// Update user info in the header

const userNameElement = document.getElementById('user-name');
const userPhoneElement = document.getElementById('user-phone');
if (name && phone) {
userNameElement.textContent = name;
userPhoneElement.textContent = phone;
}
</script>

</main>

<footer>
<p>&copy; 2024 Custom Craft. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
5.5 Components.php:
<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];

// Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch user from database

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE
username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($id, $db_username, $db_password);
$stmt->fetch();

if ($db_username && password_verify($password, $db_password)) {

$_SESSION['user_id'] = $id;
$_SESSION['username'] = $db_username;
// Redirect to a logged-in page
header("Location: welcome.php");
exit();
} else {
 echo "Invalid username or password";
}

$stmt->close();
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Components - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
<?php else: ?>
<li><a href="welcome.php">Welcome</a></li>
<li><a href="logout.php">Logout</a></li>
 <?php endif; ?>
</ul>
</nav>

<div id="user-info">
<span id="user-name"></span> | <span id="user-phone"></span>
</div>
</div>

</header>

<main>
<section class="product-category">
<h2>Laptop Components</h2>
<div class="product-list">
<!-- Add laptop components here -->
<div class="product">
<img src="\img\wireless.jpg" alt="HP K160 Wireless Keyboard">

<h3>HP K160 Wireless Keyboard</h3>

<p>Quick Comfy accurate/12 Fn Shortcut Keys/Plug and Play USB/ 3 Years
Warranty, Black</p>
<p>Price: RS 849</p>
<button class="add-to-cart-btn" data-product="HP K160 Wireless Keyboard"
data-price="849">Add to Cart</button>
</div>
<div class="product">
<img src="\img\61rbiJyrcjL._SL1500_.jpg" alt="Laptop bag">

<h3>American Tourister Valex 28</h3>

 <p>Ltrs Large Laptop Backpack with Bottle Pocket and Front Organizer-
Black</p>
<p>Price: RS 1,948</p>
<button class="add-to-cart-btn" data-product="Laptop bag" data-
price="1948">Add to Cart</button>
</div>
<div class="product">
<img src="\img\819eNuXA-NL._SL1500_.jpg" alt="Alienware Wireless Gaming Mouse
AW620M">

<h3>Alienware Wireless Gaming Mouse AW620M</h3>

<p>Conquer gaming marathons with a wireless mouse that’s crafted with 26,000
DPI, reliable connectivity, robust battery life, and a right-hand-focused shape</p>
<p>Price: RS 6,969</p>
<button class="add-to-cart-btn" data-product="Alienware Wireless Gaming
Mouse AW620M" data-price="6969">Add to Cart</button>
</div>
<div class="product">
<img src="\img\61MHLpET97L._SL1500_.jpg"alt="STRIFF Adjustable Laptop Tabletop
Stand">

<h3>STRIFF Adjustable Laptop Tabletop Stand</h3>

<p>Patented Riser Ventilated Portable Foldable Compatible with MacBook
Notebook Tablet Tray Desk Table Book with Free Phone Stand (Black)</p>
<p>Price: RS 249</p>
<button class="add-to-cart-btn" data-product="STRIFF Adjustable Laptop
Tabletop Stand" data-price="249">Add to Cart</button>
</div>
<div class="product">
<img src="\img\71Rs2EInBrL._SL1500_.jpg" alt="Lapster 5-in-1 Multi-Function Laptop
Cleaning">

<h3>Lapster 5-in-1 Multi-Function Laptop Cleaning</h3>

 <p>Cleaning kit/Gadget Cleaning kit Gap Duster Key-Cap Puller for Laptop,
Keyboard and Earphones(Multi Colour)</p>
<p>Price: RS 99</p>
<button class="add-to-cart-btn" data-product="Lapster 5-in-1 Multi-Function
Laptop Cleaning" data-price="99">Add to Cart</button>
</div>
<div class="product">
<img src="\img\41V+V2h+S-L._SX522_.jpg"alt="MUCHOVA Multipule Uses Backpack">

<h3>MUCHOVA Multipule Uses Backpack</h3>

<p>Carry Laptop while Traveling , College , Office Purpose Backpack and
charging </p>
<p>Price: RS 1,099</p>
<button class="add-to-cart-btn" data-product="MUCHOVA Multipule Uses
Backpack" data-price="1099">Add to Cart</button>
</div>
<div class="product">
<img src="\img\81dzUeK50bL._SL1315_.jpg"alt="Shopizta Premium Dark Grey Fabric
Laptop Bag">

<h3>Shopizta Premium Dark Grey Fabric Laptop Bag</h3>

<p>Shopizta Premium Dark Grey Fabric Laptop Bag </p>
<p>Price: RS 1,108</p>
<button class="add-to-cart-btn" data-product="Shopizta Premium Dark Grey
Fabric Laptop cover" data-price="1108">Add to Cart</button>
</div>
<div class="product">
<img src="\img\715FsUC9KnL._SL1500_.jpg"alt="Gizga Essentials Universal Silicone
Keyboard Protector">

<h3>Gizga Essentials Universal Silicone Keyboard Protector</h3>

<p>Keyboard Protector Skin for 15.6 Inch Laptop |Keyboard Dust Cover | 15.6"
Keyguard </p>
 <p>Price: RS 94</p>
<button class="add-to-cart-btn" data-product="Gizga Essentials Universal
Silicone Keyboard Protector" data-price="94">Add to Cart</button>
</div>
<div class="product">
<img src="\img\71Zf9uUp+GL._SL1500_.jpg"alt="Florican Portable Invisible Laptop Riser
Stand">

<h3Florican Portable Invisible Laptop Riser Stand</h3>

<p>Mini Aluminum Cooling Pad, Lightweight Laptop Desk Stand for MacBook,
Lenovo, Dell, HP & Other Laptops (Cool Silver)</p>
<p>Price: RS 279</p>
<button class="add-to-cart-btn" data-product="Florican Portable Invisible
Laptop Riser Stand" data-price="279">Add to Cart</button>
</div>

</div>
</section>
</script>

</main>

<footer>
<p>&copy; 2024 Custom Craft</p>
</footer>

<script src="script.js"></script>
</body>
</html>
5.6 Software.php:
<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];

// Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch user from database

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE
username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($id, $db_username, $db_password);
$stmt->fetch();

if ($db_username && password_verify($password, $db_password)) {

$_SESSION['user_id'] = $id;
$_SESSION['username'] = $db_username;
// Redirect to a logged-in page
header("Location: welcome.php");
exit();
} else {
echo "Invalid username or password";
 }

$stmt->close();
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Software - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
<?php else: ?>
<li><a href="welcome.php">Welcome</a></li>
<li><a href="logout.php">Logout</a></li>
<?php endif; ?>
 </ul>
</nav>

<div id="user-info">
<span id="user-name"></span> | <span id="user-phone"></span>
</div>
</div>

</header>

<main>
<section class="product-category">
<h2>Software Components</h2>
<div class="product-list">
<!-- Add software components here -->
<div class="product">
<img src="\img\logo-avast-224x224px.jpg"alt="Avast Antivirus">
<h3>Avast Antivirus</h3>

<p>Price:RS 600</p>
<button class="add-to-cart-btn" data-product="Avast Antivirus" data-
price="600">Add to Cart</button>
</div>
<div class="product">
<img src="\img\asdsadsa.jpg"alt="K7 Security Antivirus">

<h3>K7 Security Antivirus</h3>

<p>Price:RS 900</p>
 <button class="add-to-cart-btn" data-product="K7 Security Antivirus" data-
price="900">Add to Cart</button>
</div>
<div class="product">
<img src="\img\Adobe_Photoshop_CC_icon.svg.jpg"alt="Adobe Photoshop">

<h3>Adobe Photoshop</h3>
<p>Price:RS 500</p>
<button class="add-to-cart-btn" data-product="Adobe Photoshop" data-
price="500">Add to Cart</button>
</div>
<div class="product">
<img src="\img\mcfee.jpg" alt="McAfee Antivirus">

<h3>McAfee Antivirus</h3>
<p>Price:RS 1000</p>
<button class="add-to-cart-btn" data-product="McAfee Antivirus" data-
price="1000">Add to Cart</button>
</div>
<div class="product">
<img src="\img\unnamed.jpg"alt="VLC Media Player">

<h3>VLC Media Player</h3>

<p>Price:RS 200</p>
<button class="add-to-cart-btn" data-product="MVLC Media Player" data-
price="200">Add to Cart</button>
</div>
<div class="product">
<img src="\img\03zMSFZXHN2CgbuvuUx5ijT-6.jpg" alt="Movavi">

<h3>Movavi</h3>
<p>Price:RS 850</p>
 <button class="add-to-cart-btn" data-product="Movavi" data-price="850">Add
to Cart</button>
</div>
<div class="product">
<img src="\img\1200px-OBS_Studio_Logo.svg.jpg" alt="OBS Studio">

<h3>OBS Studio</h3>
<p>Price:RS 2000</p>
<button class="add-to-cart-btn" data-product="OBS Studio" data-
price="850">Add to Cart</button>
</div>

<!-- Add more software components as needed -->

</div>
</section>
</main>

<footer>
<p>&copy; 2024 Custom Craft. All rights reserved.</p>
</footer>

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

</html>5.7Contact.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
<!-- Additional styles for the contact page -->
<style>
/* Additional styles for the contact page */
#contact {
background-color: #f9f9f9;
padding: 100px 0;
}

.contact-container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

.contact-form {
background-color: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
border-color: #007bff;
outline: none;
}

.contact-form textarea {
resize: vertical;
height: 150px;
}

.contact-form button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
 }

.contact-form button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>CUSTOM CRAFT</h1>
<!-- Example of including the login link in the navigation bar -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="product.html">Products</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="logout.html">Logout</a></li>
</ul>
</nav>

</div>
</header>

<section id="contact">
<div class="container">
<div class="contact-container">
<div class="contact-form">
 <h2>Contact Us</h2>
<form id="contactForm" action="#" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message"
required></textarea>
<button type="button" id="submitButton">Send Message</button>
</form>
</div>
</div>
</div>
</section>

<footer>
<div class="container">
<p>&copy; 2024 Custom Craft</p>
</div>
</footer>
<script src="script.js"></script>
<script>
document.getElementById("submitButton").addEventListener("click", function() {
var confirmation = confirm("Thank you For your feedback!!!!!!!!");
if (confirmation) {
document.getElementById("contactForm").submit();
} else {
// Do nothing or provide feedback to the user
}
});
</script>
</body>
</html>
5.8Cart.php:
<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Encrypt
the password
$email = $_POST['email'];
$phone = $_POST['phone'];

$errors = [];

// Validate email
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "Invalid email format";
}

// Validate phone number

if (!preg_match('/^[0-9]{10}$/', $phone)) {
$errors[] = "Invalid phone number. Must be 10 digits.";
}

if (empty($errors)) {
// Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
 // Insert user into database
$stmt = $conn->prepare("INSERT INTO users (username, password, email, phone)
VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $username, $password, $email, $phone);

if ($stmt->execute()) {
echo "Registration successful!";
} else {
echo "Error: " . $stmt->error;
}

$stmt->close();
$conn->close();
} else {
foreach ($errors as $error) {
echo $error . "<br>";
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
<style>
/* CSS for scrollbar */
#cart-items {
 max-height: 300px; /* Adjust the max-height as needed */
overflow-y: auto;
}
</style>
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
<?php else: ?>
<li><a href="welcome.php">Welcome</a></li>
<li><a href="logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</nav>

<div id="user-info">
<span id="user-name"></span> | <span id="user-phone"></span>
</div>
</header>

<main>
 <h2>Shopping Cart</h2>
<div id="cart-items">
<!-- Cart items will be dynamically added here -->
</div>

<div id="cart-summary">
<h3>Cart Summary</h3>
<p id="total-amount">Total Amount: RS 0</p>
<button id="checkout-btn">Proceed to Checkout</button>
</div>
</main>

<script>
// Retrieve name and phone number from local storage
const name = localStorage.getItem('name');
const phone = localStorage.getItem('phone');

// Update user info in the header

const userNameElement = document.getElementById('user-name');
const userPhoneElement = document.getElementById('user-phone');
if (name && phone) {
userNameElement.textContent = name;
userPhoneElement.textContent = phone;
}

// Function to display cart items

function displayCart() {
// Get cart items from localStorage
let cartItems = JSON.parse(localStorage.getItem('cart')) || [];
 // Get the container to display cart items
const cartContainer = document.getElementById('cart-items');

// Clear previous content

cartContainer.innerHTML = '';

// Check if cart is empty

if (cartItems.length === 0) {
cartContainer.innerHTML = '<p>Your cart is empty</p>';
} else {
// Iterate over cart items and create HTML elements to display each item
cartItems.forEach((item, index) => {
const itemElement = document.createElement('div');
itemElement.classList.add('cart-item');
itemElement.innerHTML = `
<p><strong>Product:</strong> ${item.product}</p>
<p><strong>Price:</strong> RS${item.price}</p>
<button class="remove-item-btn" data-index="${index}">Remove</button>
`;
cartContainer.appendChild(itemElement);
});

// Calculate total amount

const totalAmount = cartItems.reduce((total, item) => total + item.price, 0);

// Display total amount

document.getElementById('total-amount').textContent = `Total Amount: RS$
{totalAmount.toFixed(2)}`;
}
}
// Call displayCart function when the page loads
displayCart();

// Add event listener to checkout button

document.getElementById('checkout-btn').addEventListener('click', function() {
// Check if user is logged in
const isLoggedIn = <?php echo isset($_SESSION['user_id']) ? 'true' : 'false'; ?>;
if (isLoggedIn) {
// Redirect to the checkout page
window.location.href = 'billing.html';
} else {
// Redirect to the login page
window.location.href = 'login.php';
}
});

// Add event listener to remove item buttons

document.getElementById('cart-items').addEventListener('click', function(event) {
if (event.target.classList.contains('remove-item-btn')) {
const index = event.target.getAttribute('data-index');
removeItemFromCart(index);
}
});

// Function to remove item from cart

function removeItemFromCart(index) {
// Get cart items from localStorage
let cartItems = JSON.parse(localStorage.getItem('cart')) || [];

// Remove item at specified index

 cartItems.splice(index, 1);

// Save updated cart to localStorage

localStorage.setItem('cart', JSON.stringify(cartItems));

// Re-display cart
displayCart();
}
</script>
</body>
</html>

5.9Billing.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Billing Information - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Billing Information</h2>
<form id="billingForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
 <label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="transactionMode">Mode of Transaction:</label>

<select id="transactionMode" name="transactionMode" required>
<option value="">Select Mode</option>
<option value="Credit Card">Credit Card</option>
<option value="Debit Card">Debit Card</option>
<option value="Net Banking">Net Banking</option>
<option value="Cash on Delivery">Cash on Delivery</option>
</select>

<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" required>
<span id="phoneValidationMessage" style="color: red;"></span> <!-- Validation
message -->

<label for="city">City:</label>
<input type="text" id="city" name="city" required>

<label for="state">State:</label>
<input type="text" id="state" name="state" required>

<label for="pincode">Pin Code:</label>

<input type="text" id="pincode" name="pincode" required>

<button type="submit">Submit</button>
 </form>
<script src="billingScript.js"></script>
<script>
function validateForm() {
const phoneNumber = document.getElementById('phone').value;
const phoneValidationMessage =
document.getElementById('phoneValidationMessage');
if (phoneNumber.length < 10) {
phoneValidationMessage.textContent = 'Please enter a valid phone number with at
least 10 digits.';
return false; // Prevent form submission if phone number is not valid
}
// If all validations pass, redirect to confirmation.html
window.location.href = 'confirmation.html';
return true; // Allow form submission
}
</script>
</body>
</html>

5.10 Confirmation.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmation - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animations.css"> <!-- Include animation styles -->
</head>
<body>
 <div class="container">
<h2 class="animated fadeInDown">Order Confirmation</h2>
<div id="confirmationMessage" class="animated slideInLeft">
<p>Your order has been successfully placed!</p>
<p>Thank you for shopping with us.</p>
<p>An email confirmation has been sent to your email address.</p>
</div>
</div>

<script src="confirmationScript.js"></script>
</body>
</html>

5.1Login.php:
<?php
session_start();
// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Check username and password (you should replace this with your authentication logic)
$username = $_POST['username'];
$password = $_POST['password'];

// Example authentication (replace this with your authentication logic)

if ($username === 'user' && $password === 'password') {
// Authentication successful, set session variables
$_SESSION['user_id'] = 1; // Example user ID
$_SESSION['username'] = $username;
// Redirect user to the home page (index.php)
header("Location: index.php");
 exit();
} else {
// Authentication failed
$error = "Invalid username or password";
}
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];

// Database connection
$conn = new mysqli('localhost', 'root', '', 'custom_craft');

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch user from database

$stmt = $conn->prepare("SELECT id, username, password FROM users WHERE
username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($id, $db_username, $db_password);
$stmt->fetch();

if ($db_username && password_verify($password, $db_password)) {

$_SESSION['user_id'] = $id;
$_SESSION['username'] = $db_username;
// Redirect to a logged-in page
header("Location: index.php");
 exit();
} else {
echo "Invalid username or password";
}

$stmt->close();
$conn->close();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Custom Craft</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Custom Craft</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="product.php">Products</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="contact.php">Feedback</a></li>
<?php if (!isset($_SESSION['user_id'])): ?>
<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>
 <?php else: ?>
<li><a href="welcome.php">Welcome</a></li>
<li><a href="logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</nav>

</div>
</header>

<section>
<div class="container">
<h2>Login</h2>
<form method="post" action="login.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="register.php" class="btn">Register here</a></p>
</div>
</section>
</body>
</html>
5.12Logout.php:
<?php
session_start();
session_unset();
session_destroy();

echo "You have been logged out.";

// Redirect to the login page
header("Location: login.php");
exit();
?>

5.13Script.js:

let lastScrollTop = 0;
window.addEventListener("scroll", function() {
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop) {
// Downscroll code
document.querySelector('footer').style.display = 'block';
} else {
// Upscroll code
document.querySelector('footer').style.display = 'none';
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
});// Function to handle "Add to Cart" button click
function addToCart(product, price) {
// Get cart items from localStorage or initialize an empty array
let cartItems = JSON.parse(localStorage.getItem('cart')) || [];
 // Add product to cart
cartItems.push({ product: product, price: price });

// Save updated cart to localStorage

localStorage.setItem('cart', JSON.stringify(cartItems));

// Inform user that the product has been added to the cart
alert(product + ' has been added to your cart!');
}

// Add event listeners to "Add to Cart" buttons

document.querySelectorAll('.add-to-cart-btn').forEach(button => {
button.addEventListener('click', function() {
// Get product data from button's data attributes
const product = this.getAttribute('data-product');
const price = parseFloat(this.getAttribute('data-price'));

// Call addToCart function

addToCart(product, price);
});
});

5.14Styles.css
/* Global styles */
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
 color: #333;
margin: 0;
padding: 0;
transition: background-color 0.3s ease;
}

header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
transition: background-color 0.3s ease;
}

header h1 {
font-size: 3rem;
margin: 0;
text-transform: uppercase;
letter-spacing: 2px;
transition: transform 0.3s ease;
}

header nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
 display: flex;
justify-content: center;
}

header nav ul li {
display: inline-block;
margin-right: 20px;
}

header nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
font-size: 1.2rem;
border: 2px solid transparent;
border-radius: 5px;
transition: color 0.3s ease, border-color 0.3s ease;
}

header nav ul li a:hover {

color: #ff8c00;
border-color: #ff8c00;
}

main {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
transition: transform 0.3s ease;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
position: fixed;
bottom: 0;
width: 100%;
display: none; /* Initially hide the footer */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}

/* Form styles */
.login-form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.logout-message {
text-align: center;
margin-top: 100px;
}

.form-group {
 margin-bottom: 20px;
}

form label {
display: block;
margin-bottom: 5px;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-bottom: 20px;
transition: border-color 0.3s ease;
}

form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus,
form select:focus {
border-color: #ff8c00;
}

form button {
background-color: #333;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}

form button:hover {
background-color: #555;
}

/* Product category styles */

.product-category {
margin-bottom: 40px;
}

.product-category h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}

.product-list {
display: flex;
flex-wrap: wrap;
 justify-content: space-between;
}

.product {
width: calc(33.33% - 20px);
margin-bottom: 40px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.product:hover {
transform: scale(1.05);
}

.product img {
width: 100%;
height: auto;
margin-bottom: 10px;
transition: transform 0.3s ease;
}

.product:hover img {
transform: scale(1.1);
}

.product h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}

.product p {
margin-bottom: 10px;
}

.product button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}

.product button:hover {
background-color: #45a049;
}

/* Cart styles */
#cart-summary {
border-top: 2px solid #ccc;
padding-top: 20px;
margin-top: 20px;
transition: border-color 0.3s ease;
}

#cart-summary h3 {
 font-size: 1.5rem;
margin-bottom: 10px;
}

#total-amount {
font-size: 1.2rem;
margin-bottom: 10px;
}

#checkout-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.2rem;
transition: background-color 0.3s ease;
}

#checkout-btn:hover {
background-color: #45a049;
}

#cart {
background-color: #f9f9f9;
padding: 100px 0;
}

.cart-container {
 max-width: 800px;
margin: 0 auto;
text-align: center;
}

.cart-items {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
border-bottom: 1px solid #000000;
padding: 20px 0;
margin-bottom: 20px;
transition: border-color 0.3s ease;
}

.cart-items:last-child {
border-bottom: none;
margin-bottom: 0;
}

.cart-items p {
margin: 0;
font-size: 18px;
}

.cart-items button {
background-color: #007bff;
color: #fff;
padding: 5px 10px;
 border: none;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.cart-items button:hover {
background-color: #0056b3;
}

.cart-total {
font-size: 24px;
font-weight: bold;
}

.checkout-button {
background-color: #28a745;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.checkout-button:hover {
background-color: #218838;
}
/* Laptop styles */
.laptop {
position: relative;
overflow: hidden;
cursor: pointer;
transition: height 0.5s ease;
}

.laptop .laptop-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 20px;
box-sizing: border-box;
transform: translateY(100%);
transition: transform 0.5s ease;
}

.laptop.expanded {
height: 300px; /* Adjust as needed */
}

.laptop.expanded .laptop-info {
transform: translateY(0);
}
/* Hero section */
#hero {
background-image: url('hero-bg.jpg');
background-size: cover;
background-position: center;
text-align: center;
padding: 100px 0;
transition: background-size 0.3s ease, padding 0.3s ease;
}

#hero h2 {
margin-bottom: 20px;
font-size: 3.5rem;
color: #151414;
letter-spacing: 3px;
transition: transform 0.3s ease, color 0.3s ease;
}

#hero p {
color: #020202;
font-size: 1.5rem;
margin-bottom: 40px;
letter-spacing: 1px;
transition: color 0.3s ease;
}

.btn {
background-color: #ff8c00;
color: #fff;
text-decoration: none;
 padding: 15px 30px;
border-radius: 5px;
font-size: 1.2rem;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
background-color: #ff6f00;
transform: scale(1.1);
}

/* Styles for the container */

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* Animation for header */

header h1:hover {
transform: scale(1.1);
}

/* Animation for main content */

main:hover {
transform: translateY(-5px);
}

/* Animation for login form */

.login-form:hover {
 transform: translateY(-5px);
}

/* Footer visibility on page load */

footer {
display: block;
}

/* Media queries for responsive design */

@media (max-width: 768px) {
header h1 {
font-size: 2.5rem;
}

header nav ul li {
display: block;
margin-right: 0;
margin-bottom: 10px;
}

.product {
width: calc(50% - 10px);
}
}

@media (max-width: 480px) {

header h1 {
font-size: 2rem;
}
 .product {
width: 100%;
}
}
OUTPUT:
Index.php:

Products.php:
Laptop.php:

Components.php:
Software.php:

Cart.php:
billing.html:

Confirmation.html:
Aboutus.html:

Contact.php:
Login.php:

Database: