PROJECT REPORT

ONLINE VEGETABLE SELLING WEBSITE

Submitted by

NITHISH S

1U21CA057

In partial fulfillment of the requirements for the award of the Degree of

Bachelor of Computer Applications from Bharathiar University,Coimbatore.

Under the supervision of

Mr.C.MANIVASAGAN., MCA.,M.Phil.,SET

Assistant Professor,

School of Computer Studies,

RVS College of Arts and Science(Autonomous),

Sulur, Coimbatore -641 402.

School of Computer Studies,

RVS College of Arts and Science(Autonomous), Sulur,

Coimbatore – 641 402.

December 2023-March 2024

 RVS COLLEGE OF ARTS AND SCIENCE

(Autonomous and Affiliated to Bharathiar University)

NAAC Re Accredited with ‘A+’

Sulur, Coimbatore-641 402.

SCHOOL OF COMPUTER STUDIES

REG NO:1U21CA057

Bonafide Certificate

This is to certify that the project work entitled “ONLINE VEGETABLE SELLING
WEBSITE ” done by NITHISH S , during the period December 2023 to March 2024 in
partial fulfillment of the degree of Bachelor of Computer Applications is submitted for the
project evaluation and Viva voce held at the School of Computer Studies, RVS College of
Arts and Science, Sulur, Coimbatore on

Internal Supervisor HOD BCA

Examiners:

Internal Examiner:

External Examiner: z
CERTIFICATE
 CERTIFICATE
This is to certify that the project entitled ONLINE VEGETABLE SELLING WEBSITE,
submitted the School of Computer Studies ,Bachelor of Computer Applications RVS College
of Arts and Science in partial fulfillment of the requirements for the award of the Degree of
Bachelor Computer Applications is a cord of original project by NITHISH S with register
number 1U21CA057 during the period December 2023 to March 2024 under my internal
supervision and the project has not formed the basis for the award of any
Degree/Diploma/Associate ship/Fellowship or other similar title to any candidate of any
University.

Internal supervisor
DECLARATION
 DECLARATION

I NITHISH S hereby declare that the project, entitled ONLINE VEGETABLE SELLING
WEBSITE, Bachelor of Computer Applications, RVS College of Arts and Science in partial
fulfillment of the requirements for the award of the Degree of Bachelor of Computer Applications
is a record of original work done by me during the period February 2024 to May 2024 under the
internal supervision of Mr.C.MANIVASAGAN, Assistant Professor, School of Computer Studies,
Bachelor of Computer Applications, RVS College of Arts and Science it has not formed the basis
for the award of any Degree/Diploma/Associate ship/Fellowship or other similar title to any
candidate of any University.

Signature of the Candidate

ACKNOWLEDGEMENT
 ACKNOWLEDGEMENT

If words are considered as symbols of approval and tokens of acknowledgement, then the words
play the heralding role of expressing my gratitude to all who have helped me directly or indirectly
during my project work.

I express my sincere gratitude to the esteemed Managing Trustee of RVS College of Arts and
Science, DR.K.Senthil Ganesh for allowing me to do my project with his moral support.

I will be ever graceful and thankful to, prof.Saramma Samuel Secretary, RVS College of Arts
and Scienec for allowing me to do my project with his moral support.

I will be ever graceful and thankful to DR.T.Sivakumar,M.Sc.,M.Phil.,Ph.D., Principal, RVS

College of Arts and Science for allowing me to do my project with his moral support.

It gives me immense pleasure to take this opportunity to express my gratitude and thanks to
DR.P.Navaneetham,M.Sc.M.Phil.,Ph.D., Associate Professor & Director Administration, School
of Computer Studies, RVS College of Arts and Science for his continuous encouragement and
blessings.

I proudly feel graceful to DR.M.Padnapriya,MCA.,M.Phil.,Ph.D., Associate Professor and

Head of the Department, Bachelor of Computer Applications, School of Computer Studies,
RVS College of Arts and Science for providing me this opportunity and extending a constant
monitoring throughout the course of the project.

With my gratitude I would like to acknowledge the immense encouragement given to me by

MR.C.Manivasagan,MCA.,M.Phil.,SET, Assistant Professor, School of Computer Applications,
RVS College of Arts and Science who is my internal guide, for his/her valid suggestions, and
counsel, and ever willing to extend help. I am deeply obliged to his for the encouragement and
without him the project work would not have been successful.

NITHISH S
ABSTRACT
 ABSTRACT

FreshGreens is a dynamic online platform designed to revolutionize the way you shop for
vegetables. With an intuitive user interface crafted using HTML, CSS, and JavaScript,
FreshGreens offers a seamless shopping experience for customers seeking the freshest
produce. Our website boasts a visually appealing design that enhances user engagement and
navigation. Through responsive web design principles, FreshGreens ensures accessibility
across various devices.

Customers can easily browse through a diverse range of locally sourced, organic, and seasonal
vegetables. At FreshGreens, we prioritize quality and freshness. Our platform facilitates direct
communication between customers and farmers, fostering transparency and trust in the supply
chain. Experience the convenience of online vegetable shopping like never before with
FreshGreens.
 CONTENTS

Chapter No Title of the Content Page No

1 INTRODUCTION

1.1 ORGANIZATION PROFILE

1.2 SYSTEM SPECIFICATION
1.2.1 HARDWARE CONFIGURATION
1.2.2 SOFTWARE CONFIGRATION

2 SYSTEM STUDY

2.1 EXISTING SYSTEM

2.1.1 DESCRIPTION
2.1.2 DRAWBACKS
2.2 PROPOSED SYSTEM
2.2.1 DESCRIPTION
2.2.2 FEATURES

SYSTEM DESIGN AND DEVELOPMENT

3
3.1 FILE DESIGN
3.2 INPUT DESIGN
3.3 OUTPUT DESIGN
3.4 CODE DESIGN
3.5 DATABASE DESIGN
3.6 SYSTEM DEVELOPMENT
3.6.1 DISCRIPTION OF MODULES
CHAPTER I
Introduction:
In the bustling world of online commerce, GreenCart emerges as a beacon of
convenience, quality, and responsiveness. Our platform is dedicated to providing an
unparalleled shopping experience for customers seeking the freshest vegetables, while also
incorporating robust features for secure login and seamless order management.

Built using HTML, CSS, and JavaScript, our website is not just visually appealing but
also highly responsive, ensuring optimal performance across various devices. Whether
you're browsing from a desktop, tablet, or smartphone, GreenCart adapts effortlessly to
your screen size, guaranteeing a smooth and intuitive user experience.

But GreenCart isn't just about aesthetics and responsiveness. We understand the
importance of security and user privacy, which is why we've integrated a PHP-based login
page. With secure authentication mechanisms, log in securely, and manage their profiles
with confidence.

Moreover, our commitment to efficiency extends to order management. Utilizing XAMPP

and MySQL, we've developed a robust database system that seamlessly stores information
about ordered vegetables, including names and quantities. This ensures accurate tracking
of purchases and facilitates smooth transactions for both customers and vendors.

1.1 ORGANIZATION PROFILE

1.2. SYSTEM SPECIFICATION

1.2.1. HARDWARE CONFIGURATION

• Processor : Intel Core i3

• RAM : 1GB

• Hard disk capacity : SSD 250 GB

• System type : 64-bit operating system, 32-bit operating system

1.2.2. SOFTWARE SPECIFICATION

• Operating System : Windows ,Android,iOS

• Browser: Firefox, Opera, Chrome, Edge

• Front-end : HTML&CSS

• Back-end : MY SQLE&PHP
CHAPTER II
 SYSTEM STUDY
2.0. SYSTEM STUDY

2.1. Existing System

2.1.1. Drawbacks

Poor User Experience (UX): Non-responsive websites don't adapt to different screen sizes
and devices. This leads to a poor user experience, especially on mobile devices where more
and more users are browsing. Users may find it difficult to navigate the site, view products,
and complete purchases, resulting in frustration and abandonment of the site.
Decreased Visibility: Search engines like Google prioritize mobilefriendly websites in their
search results. A website that is not responsive may rank lower in search engine results pages
(SERPs), reducing its visibility to potential customers.
Lost Sales Opportunities: With an increasing number of people using mobile devices for
online shopping, a non-responsive website misses out on potential sales opportunities.
Customers may leave the site if they cannot easily browse and purchase products on their
mobile devices.
Negative Brand Perception: A website that does not adapt to different devices reflects poorly
on the brand. Users may perceive the brand as outdated or unprofessional, damaging its
reputation and credibility.
Competitive Disadvantage: In today's competitive market, having a responsive website is
essential to staying ahead of competitors. Businesses with responsive websites are better
positioned to attract and retain customers who prefer shopping on mobile devices.
Higher Maintenance Costs: Maintaining separate websites for desktop and mobile users can
be more expensive and time-consuming than having a single responsive website. Non-
responsive websites may require ongoing adjustments and fixes to accommodate various
screen sizes and devices.

2.2. Proposed System:

2.2.1. Description

A responsive vegetable selling website is designed to dynamically adjust its

layout and content to provide an optimal viewing and interaction experience across a wide range
of devices and screen sizes, including desktops, laptops, tablets, and smartphones. This
adaptability ensures that customers can easily browse, select, and purchase fresh produce
regardless of the device they are using. Key features of a responsive vegetable selling website
include fluid grid layouts, flexible images, and media queries that detect and respond to the
user's device characteristics. By offering a seamless and user-friendly shopping experience, a
responsive vegetable selling website enhances customer satisfaction, improves accessibility,
and increases conversion rates. Additionally, it boosts search engine visibility and helps
businesses stay competitive in today's mobile-driven market. Overall, a responsive vegetable
selling website enables businesses to effectively reach and engage with their target audience,
driving growth and success in the digital marketplace.

2.2.2 Features

 Fluid grid layout for seamless viewing across devices.

 Flexible images and media to maintain quality on any screen size.
 Intuitive navigation optimized for touchscreens.
 Quick-loading pages for enhanced user experience.
 Mobile-friendly checkout process for easy purchasing.
 6. Compatibility with various web browsers and operating systems.
CHAPTER III
SYSTEM DESIGN AND DEVELOPMENT

3.1 FILE DESIGN

3.2 INPUT DESIGN
3.3 OUTPUT DESIGN
3.4 CODE DESIGN

3.4. DATABASE DESIGN

Database design is required to manage the large bodies of information. The

management of data involves both the definition of structure of the storage of information and
provisions of mechanism for the manipulation of information. In addition, the database
system must provide for the safety of information handled, despite the system crashes
due to attempts are
unauthorized access. For developing an efficient database, we must fulfill certain conditions
such as:

•
Control redundancy
•
Ease of use
•
Data independence
•
Accuracy and integrity
•
Avoiding inordinate delays
•
Recovery form failure
•
Privacy and security
•
Performance

3.6 SYSTEM DEVELOPMENT

1. Design Phase:

• Design the user interface (UI) using HTML and CSS.

• Create wireframes or mockups to visualize the layout and structure of the
system.
• Plan the database schema if the system requires one, considering tables,
relationships, and data types.

2. Frontend Development:

• Start by creating the HTML structure based on the UI design.

• Style the HTML elements using CSS to achieve the desired visual appearance.
• Use JavaScript for client-side interactivity and dynamic behavior, such as form
validation, DOM manipulation, and handling user events.
• Ensure responsiveness by implementing CSS media queries for different
screen sizes (e.g., desktop, tablet, mobile).

3. Backend Development:

• Set up a server environment with PHP support (e.g., Apache or Nginx with
PHP-FPM).
• Write PHP scripts to handle server-side logic, such as processing form
submissions, interacting with databases, and generating dynamic content.
• Connect to a database using PHP's database extensions or an ORM
(Object- Relational Mapping) library like PDO or Doctrine.
 • Implement security measures, such as input validation, sanitization, and
protection against SQL injection and XSS (Cross-Site Scripting) attacks.

4. Database Development:

• Create the necessary database tables and relationships based on the previously
designed schema.
• Implement CRUD (Create, Read, Update, Delete) operations using SQL
queries or ORM methods.

• Optimize database performance by indexing frequently queried columns and

avoiding unnecessary queries.

5. Integration and Testing:

• Integrate the frontend and backend components to ensure they work together
seamlessly.
• Test the system thoroughly, including unit testing for individual components
and integration testing for the system as a whole.
• Perform usability testing to ensure the system meets the needs of its intended
users.
• Identify and fix any bugs or issues that arise during testing.

6. Deployment:

• Choose a hosting provider and deploy the system to a production environment.

• Configure the server environment to meet the system's requirements, including
setting up the necessary dependencies (e.g., web server, database server, PHP
runtime).
• Monitor the system post-deployment to ensure it performs as expected and
address any issues that arise.

7. Maintenance and Updates:

• Regularly maintain and update the system to address bugs, security vulnerabilities,
and feature enhancements.
• Monitor server performance and scalability to accommodate growing user demands.
• Gather feedback from users to identify areas for improvement and prioritize future
development efforts accordingly.
3.6.1 DISCRIPTION OF MODULES

Modules List:

 Home
 Login
 Products
 Order Product
 Services  Contact

Home :

 Showcase top-selling or seasonal vegetables.

 Highlight discounts or promotions to attract customers.
 Organize vegetables into categories for easy navigation.

Login :

 Enables users to enter their credentials securely.

 Collecting email Id and password from the user and store to database for
identification and authenticaion purpose

Products :

 Display a grid or list of available vegetables with images and descriptions.

 Allow users to refine products by categories, prices, or other attributes.

Order product :

 Display various vegetables with images and descriptions.

 Enable users to choose the quantity of each vegetable.
 Send product deatils to database by clicking the order button.

Services :
 Detaile Informations about the website and the products.
Contact :

 Allows users to send inquiries or feedback.

 Provides email addresses, and other contact details.
CHAPTER IV
 TESTING AND IMPLEMENTATION

Testing and implementing a vegetable selling website involve several steps to ensure
the functionality, reliability, and security of the system. Below are key phases for testing and
implementation:

Testing:

Unit Testing:

Test individual components (modules, functions,classes) of the vegetable selling

website. Verify that each unit performs its intended functionality.

Integration Testing:

Test the interaction between different components to ensure they work

together as expected. Verify that data flows correctly between modules.

Functional Testing:

Verify that the system meets the specified functional requirements. Test
different use cases, including user login, product viewing, and product ordering
details.

User Interface (UI) Testing:

Ensure that the user interface is intuitive and user-friendly. Verify that all UI
elements are responsive and functional.

Performance Testing:

Test the system's performance under various conditions (e.g., high load).
check response times for critical operations.

Security Testing:

Assess the system's security measures to protect patient data. Test for
vulnerabilities and implement measures to secure the system.
 Usability Testing:
Conduct usability tests to ensure the system is easy to use for users. Gather feedback on
the user experience.

Compatibility Testing:

Ensure the system works correctly on different browsers and devices. Verify
compatibility with various operating systems.

Regression Testing:

Re-run previous tests after making updates to ensure existing functionality is

not affected.

Implementation:

Database Setup:

Create and configure the database for storing order data. Implement data
models to represent product name,quantity, and other relevant information.

Backend Development:

Implement server-side logic for handling user login,product ordering, and other
operations. Connect the backend to the database.

Frontend Development:

Develop the user interface for users. Ensure a responsive design that works
well on various devices.

Integration:

Integrate the frontend and backend components. Verify that data is correctly
transferred between the user interface and the server.

Security Implementation:

Implement security measures, including encryption of sensitive data and

proper user authentication. Set up access controls based on user roles.
User Training:
Provide training demo sessions for users. to use the new vegetable selling
Website. Create user manuals or documentation for reference.

Deployment:

Deploy the system to a staging environment for final testing. Once satisfied,
deploy to the production environment.

Monitoring and Support:

Set up monitoring tools to track system performance. Provide ongoing support

and address any issues that arise post-deployment.

Feedback and Iteration:

Gather feedback from users and stakeholders. Iterate on the system based on
feedback and continuously improve it.

Remember to involve end-users and stakeholders throughout the testing and

implementation phases to ensure that the system meets their needs and expectations.
Regular communication and collaboration are crucial for the success of the vegetable
selling website.
CHAPTER V
 CONCLUSION

CONCLUTION:

In conclusion, developing a vegetable selling website using HTML, CSS, JavaScript,

and PHP offers a robust platform for showcasing products, engaging customers. By leveraging
these technologies, we can create a dynamic and interactive user experience, ensuring
efficient management of content, seamless functionality, and secure transactions. With
ongoing maintenance and updates, the website can continue to meet the evolving needs of
both the business and its customers in the digital marketplace.

Future Enhancement
 Mobile App Development: Create a mobile application for the website to enhance
user accessibility and convenience. This app could include features such as push
notifications for deals, order tracking, and a user-friendly interface optimized for
smaller screens.
 Personalized Recommendations: Implement a recommendation system based on
user preferences, purchase history, and browsing behavior. This can enhance the user
experience and encourage repeat purchases.
 Subscription Service: Offer a subscription service where users can sign up to receive
regular deliveries of fresh vegetables. Allow them to customize their subscriptions
based on their preferences and dietary needs.
 Recipe Suggestions: Integrate recipe suggestions based on the vegetables available
for sale. This feature could include meal planning options and shopping lists to make
it easier for customers to plan their meals.
 Community Features: Create a community platform where users can share recipes,
cooking tips, and experiences related to vegetables. This can foster engagement and
create a sense of belonging among customers.
CHAPTER VI
 BIBLIOGRAPHY

6.0. BIBLIOGRAPHY

• Duckett, Jon. "HTML and CSS: Design and Build Websites." Wiley, 2011.
• Flanagan, David. "JavaScript: The Definitive Guide." O'Reilly Media, 2020
• W3Schools. https://www.w3schools.com/
• Provides tutorials and references for HTML, CSS, JavaScript, and PHP.

WEBSITE

1. www.geeksforgeeks.org

2. www.w3schools.com
CHAPTER VII
 APPENDENCIES

A. DATA FLOW DIAGRAM

DFD INTRODUCTION

DFD is the abbreviation for Data Flow Diagram. The flow of data of a system or a
process is represented by DFD. It also gives insight into the inputs and outputs of each entity
and the process itself. DFD does not have control flow and no loops or decision rules are
present. Specific operations depending on the type of data can be explained by a flowchart.
Data Flow Diagram can be represented in several ways. The DFD belongs to
structuredanalysis modeling tools. Data Flow diagrams are extremely popular because they
help us to visualize the major steps and data involved in software- system processes.

The Data Flow Diagram has four components:

1. process

Input to output transformation in a system takes place because of process

function. The symbols of a process are rectangular with rounded corners, oval,
rectangle, or a circle. The process is named a short sentence, in one word or a
phrase to express its essence.

2. Data Flow

Data flow describes the information transferring between different parts of

the systems. The arrow symbol is the symbol of data flow. A relatable name
should be given to the flow to determine the information which is being moved.
Data flow also represents material along with information that is being moved.
Material shifts are modeled in systems that are not merely informative. A given
flow should only transfer a single type of information. The direction of flow is
represented by the arrow which can also be bi-directional.

3. Warehouse

The data is stored in the warehouse for later use. Two horizontal lines
represent the symbol of the store. The warehouse is simply not restricted to being
a
 data file, rather it can be anything like a folder with documents, an optical disc, a
filing cabinet. The data warehouse can be viewed independent of its
implementation. When the data flows from the warehouse it is considered as data
reading and when data flows to the warehouse it is called data entry or data
updating.

4. Terminator

The Terminator is an external entity that stands outside of the system and
communicates with the system. It can be, for example, organizations like banks,
groups of people like customers or different departments of the same organization,
which is not a part of the model system and is an external entity. Modeled systems
also communicate with terminators.

Rules for creating DFD

4. The name of the entity should be easy and understandable

without any extra assistance(like comments).
5. The processes should be numbered or put in an ordered list to be
referred easily.
6. The DFD should maintain consistency across all the DFD levels.
7. A single DFD can have maximum processes up to nine and
minimum three processes.

Levels of DFD

Uses hierarchy to maintain transparency thus multilevel DFD’s can be created.

Levels of DFD are as follows:

7.6 0-level DFD

7.7 1-level DFD

7.8 2-level DFD

Advantages of DFD

8. It helps us to understand the functioning and the limits of a system.

 9. It is a graphical representation which is very easy to understand
as it helps visualize contents.

10. Data Flow Diagram represents detailed and well explained

diagram of system components.

11. It is used as a part of a system documentation file.

12. Both technical and nontechnical people can understand Data

Flow Diagrams because they are quite easy to understand.

Disadvantages of DFD

13. At times DFD can confuse the programmers regarding the system.

14. Data Flow Diagram takes a long time to be generated, and many
times
due to this reasons analyst are denied permission to work on it.
DATA FLOW DIAGRAM

B. TABLE STRUCTURE

Designing a table structure for a vegetable selling website would involve creating
tables to store relevant information.

1. Login:
• Email
 • Password

2. product:
• ProductName
• Quantity

3. Contact:
• Name
• Email
• Address

C. SAMPLE CODING

INDEX.PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shop</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="font/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="nav">
<span>LOGO</span>
<button type="submit" class="signin-btn" onclick="openlogin()">Sign In</button>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#product">PRODUCT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
 <div class="hamb">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</nav>
<!-- home-->
<section id="home">
<div class="login-container">
<form class="login-form" name="loginform" id="popup" action="log.php"
method="post"> <h2>Login</h2>
<div class="input-group">
<label for="username">UserName</label>
<input type="email" id="username" name="uname" required>
</div>

<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="upassword" required> </div>
<div class="button-group">

<button type="submit" name="submit" id="logbtn" >Login</button>

<button type="button" id="logcancel" onclick="closelogin()">cancel</button> </div>

</form>
</div>

<script> document.querySelector('.login-form').addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent default form submission

// Perform form submission using Fetch API

fetch('log.php', { method: 'POST', body:
new FormData(this)
})
 .then(response => response.json())
.then(data => { if
(data.status === 'error') {
// Error message
Swal.fire({ icon:
'error', title: 'Oops...',
text:
data.message
});
} else {
// Success message Swal.fire({
text:
data.message
});
// Reset form after successful submission
document.getElementById('popup').reset();
}
})
.catch(error => { console.error('Error:',
error);
});
});
</script>

</section>
<!-- home-->

<!--product-->
<section id="product">
<div class="container">

<h3 class="title">Organic Vegetbles</h3>

<div class="products-container">

<div class="product" data-name="tomato">

<img src="1.png" alt="">
<h3>Tomato</h3>
<div class="price">$100.00</div>
</div>

<div class="product" data-name="capsicum">

<img src="2.png" alt="">
<h3>Capsicum</h3>
<div class="price">$200.00</div>
</div>

<div class="product" data-name="chilli">

<img src="3.png" alt="">
<h3>Chilli</h3>
<div class="price">$50.00</div>
</div>

<div class="product" data-name="potato">

<img src="4.png" alt="">
<h3>Potato</h3>
<div class="price">$150.00</div>
</div>

<div class="product" data-name="carrot">

<img src="5.png" alt="">
<h3>Carrot</h3>
<div class="price">$250.00</div>
</div>

<div class="product" data-name="beetroot">

<img src="6.png" alt=""> <h3>Beetroot</h3>
<div class="price">$300.00</div>
</div>
 <div class="product" data-name="pea">
<img src="7.png" alt="">
<h3>Pea</h3>
<div class="price">$40.00</div>
</div>

<div class="product" data-name="onion">

<img src="8.png" alt="">
<h3>Onion</h3>
<div class="price">$400.00</div>
</div>

<div class="product" data-name="corn">

<img src="9.png" alt="">
<h3>Corn</h3>
<div class="price">$120.00</div>
</div>
</div>
</div>

<div class="products-preview">
<div class=" preview" data-target="tomato">
<i class="fas fa-times"></i>
<img src="1.png">
<h3>Organic Tomatos</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i> <span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
 <input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$100.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="capsicum">

<i class="fas fa-times"></i>
<img src="2.png">
<h3>Organic Capsicum</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$200.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="chilli">

<i class="fas fa-times"></i>
<img src="3.png">
<h3>Organic Chilli</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
 <i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$50.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="potato">

<i class="fas fa-times"></i>
<img src="4.png">
<h3>Organic Potato</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$150.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="carrot">

<i class="fas fa-times"></i>
<img src="5.png">
 <h3>Organic Carrot</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$250.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="beetroot">

<i class="fas fa-times"></i>
<img src="6.png">
<h3>Organic Beetroot</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$300.00</div>
 <button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="pea">

<i class="fas fa-times"></i>
<img src="7.png">
<h3>Organic Pea</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$40.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="onion">

<i class="fas fa-times"></i>
<img src="8.png">
<h3>Organic Onion</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$400.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>

<div class="preview" data-target="corn">

<i class="fas fa-times"></i>
<img src="9.png">
<h3>Organic Corn</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>(250)</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, provident.</p>
<div class="quan">
<label for="quantity" name="Quantity">Quantity:</label>
<input type="number" class="qty" placeholder="In Kg">
</div>
<div class="price">$120.00</div>
<button type="order_button" id="btn_order" class="btn_order">Order Now</button>
</div>
STYLE.CSS

@import url('https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,
500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&displa
y=swap');
*{ margin: 0; font-family:
"Poppins", sans-serif;
textdecoration: none; list-style:
none; box-sizing: border-box;
userselect: none;
}

.nav{ top: 0; width: 100%;

height:
70px; background-color:
rgba(0,0,128,0.3); box-shadow: 0 0
20px 0 black; position: fixed;
}

span{
color: aqua; font-
size: 30px;
paddingleft: 20px;
lineheight: 70px;
}

.nav ul{ float: right;

margin-
right: 20px;
}

.nav ul li{ display:

inline-block; margin:
0 10px; line-height:

70px;
}

.nav ul li a{ color:
blue; padding: 0 15px;
font-size:
20px; transition:
300ms;
}

.nav ul li a:hover{ color: aliceblue; border-

bottom: 1px solid aliceblue; font-size: 28px;
}

.signin-btn{ padding:
8px 25px;
background: #e5e5e5;
color: black; border:
none; border-radius:
4px; cursor: pointer;
align-items: center;
font-size: 15px;
border: none; outline:
none; border-radius:
20px; text-shadow:
2px 2px 4px
rgba(0,0,0,.2);
boxshadow: 15px 20px
20px rgba(0,0,0,.3),
inset 4px 4px 10px
white; letter-spacing:
1px; transition: .2s;
opacity: .8;
marginleft: 40px;
}

.signin-btn:hover{ box-shadow: inset 5px 5px

10px rgba(0,0,0,.3), inset -4px -4px 10px white;
transition: .2s; opacity: 1;

@media (max-width:768px){
 .nav{ position: fixed; } .nav
ul{ position: fixed; left: 0; width: 100%;
height: 100vh; background-color:
rgba(128,128,128,0.8); text-align: center;
padding: 0; left: -
100%; transition: 1s;

.nav ul li a{ font-
size: 20px; color:
blue;
}

.nav ul
li{ display:
block; width:
100%;
margin: 0;
}

.nav ul li:hover{ backgroundcolor:

green;
}

.nav ul li a:hover{ color: white;

border-bottom: 1px solid white;
font-size: 25px;
}

.nav ul.slide{
left: 0; transition:
1s;
}

.hamb{
 float: right; paddingright:
20px; padding-top:
18px;
}
.line{ width:
15px; height:
5px;
background-
color: white;
display:
block;
marginbotto
m: 5px;
borderradius
: 10px; }
.hamb:hover{ cur
sor: pointer;
}

section{ width: 100%; min-

height: 100vh; boxsizing:
border-box; border:
none;outline: none;
textdecoration: none;
transform: all .2s linear;

#home{
width: 100%; height: 100vh;
background-image: url("homebg.jpg");
background-size: cover; backgroundposition:
center; background-repeat:
no-repeat;
}

.login-container { display: flex;

justify-content: center;
align-items: center;
height:
100vh;
}

.login-form {

margin: 20px; background: rgba(255, 255, 255,

0.06); padding: 20px; border-radius: 8px; box-
shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
width: 30rem; height: 30rem; border-left: 1px
solid rgba(255, 255, 255, 0.3); border-top: 1px
solid rgba(255, 255, 255, 0.3); border-radius:
30px; margin-top: -50%; transform: scale(0.1);
transition: transform 0.4s , margin-top 0.4s;
visibility: hidden;
}

.open-popup{
visibility: visible; margin-top:
0; transform:
scale(1); }

.login-form h2
{ margin-top: 0;
textalign: center;
fontsize: 40px; color:
white; text-shadow:
2px 2px 4px
rgba(0,0,0,.2); letter-
spacing: 2.5px;
margin-bottom: 20px;
}

.input-group { marginbottom:
20px;
}

.input-group label { display: block;

margin-bottom: 5px; font-size: 20px; color:
white; opacity: .8; text-shadow:
2px 2px 4px rgba(0,0,0,.2);

.input-group input { width: 100%;

paddingright: 10px; margin: 5% auto;
marginbottom: 8%; border: none; outline:
none; background: transparent; color: white;
border-bottom: 1px solid rgba(255,255,255,.6);
opacity: .8; font-size: 20px;

.button-group { textalign:
center;
}

#logcancel{ paddin
g: 8px 15px;
background: gray;
color: white; border:
none; cursor:
pointer; align-items:
center; font-size:
15px; border: none;
outline: none;
border-radius: 20px;
letter-spacing: 1px;
transition: .2s;
margin-left: 15px;
}
#logcancel:hover{ tr
ansform: scale(1.2);
transition: .2s;

#logbtn{ padding:
10px 25px;
background: gray;
color: white; border:
none; cursor: pointer;
align-items: center;
font-size: 15px;
border: none; outline:
none; border-radius:
20px; letter-spacing:
1px;
transition: .2s;
}

#logbtn:hover
{ transform:
scale(1.2);
transition: .2s; }
#product{ backgroun
d: #e5e5e5;

}
.container{ maxwidth:
1200px; margin: 0
auto; padding: 48px
32px;

}
.title{ margin-top: 50px; font-size:
56px; color:
#444; margin-bottom:
48px; text-transform: uppercase;
text-align:
center; }

.products-container{ display: grid; grid-template-

columns: repeat(autofit,minmax(20rem,1fr)); gap:
32px;

.product{ text-align: center; padding: 48px

32px; background: #e5e5e5; border:
none; box-shadow: 15px 20px 20px
rgba(0,0,0,.3), inset 4px 4px 10px
white; border-radius: 20px; transition:
.2s;
}

.product:hover{ box-shadow: inset 5px 5px

10px rgba(0,0,0,.3), inset -4px -4px 10px white;
transition: .2s;
}
.product:hover img{ transform:
scale(.9);
}
.product:hover h3{ color:
blue;
}

.product
img{ height:
10rem; }
.product
h3{ fontfamily:
sans- serif; }
.preview img{
height:
14rem;
}

.products-preview{
position: fixed; top: 0;
left: 0; min-height:
100vh; width: 100%;
background: rgba(0,0,0,.8);
display: none; align-items:
center; justify-content:
center;
}

.products-preview .preview{
display: none; padding:
2rem; margin: 2rem;
text-align: center;
background: #fff; position:
relative; width:
28rem; border-radius:
10px;
}
.products-preview .preview.active{ display:
inline-block;
}
 .products-preview .preview .fa-times{ position: absolute; top: 1rem; right: 1.5rem;
cursor: pointer; color: #444; font-size: 2rem; transition: .2s; }

.products-preview .preview .fa-times:hover{ transform:

scale(1.5);
}

.products-preview .preview h3{ color:

#444; padding: .2rem
0; font-size: 2rem;}

SCRIPT.JS

const hamburger =document.querySelector('.hamb'); const

navbar =document.querySelector('ul');

hamburger.addEventListener('click',
()=>{ navbar.classList.toggle('slide');

});

//products//

let previewContainer=document.querySelector('.products-preview'); let

previewBox=previewContainer.querySelectorAll('.preview');

document.querySelectorAll('.product').forEach(product=>{ p
roduct.onclick= () =>{ previewContainer.style.display
='flex'; let name = product.getAttribute('data-name');
previewBox.forEach(preview=>{ let target =
preview.getAttribute('data-target'); if(name ==
target){ preview.classList.add('active');
}
});

};
});
previewBox.forEach(close=>{ close.querySelector('.fa-
times').onclick=() =>{
close.classList.remove('active'); previewContainer.style.display
='none';
};
});

//products//

// login popup //

let popup = document.getElementById("popup");

function openlogin(){ popup.classList.add("open-

popup");

function closelogin(){ popup.classList.remove("open-

popup");

// login popup //

LOHIN.PHP

<?php
$servername = "localhost"; // Change this if your database is hosted elsewhere
$username = "root"; // Your database username
$password = ""; // Your database password
$dbname = "vegetable_shop"; // Your database name

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection if ($conn-

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

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$username = $_POST['uname'];
$password = $_POST['upassword'];

$sql = "INSERT INTO userid (uname, upassword) VALUES ('$username', '$password')";

if ($conn->query($sql) === TRUE) {

echo json_encode(array("status" => "success", "message" => "login successfully")); }

else {

echo json_encode(array("status" => "error", "message" => "Error: " . $sql . "<br>" .
$conn->error));
}

$conn->close();
} else {

echo "Access Denied";

}
?>

ORDERS.PHP

<?php
$servername = "localhost";
 $username = "root";
$password = "";
$database = "vegetable_shop";

// create connection
$conn = new mysqli($servername, $username, $password, $database);

// Check connection if ($conn-

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

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['target'],

$_POST['quantity'])) {
$target = $_POST['target'];
$quantity = $_POST['quantity'];

$stmt = $conn->prepare("INSERT INTO orders (vegetable, quantity) VALUES (?, ?)");

$stmt->bind_param("si", $target, $quantity);

// Execute the statement if

($stmt->execute()) {

} else { echo "Error: " .

$stmt->error;
}

$stmt->close();
$conn->close();
} else { echo "Error: Data not received";
} ?>
D.SAMPLE INPUT
E.SAMPLE OUTUT