Content uploaded by Yasiru Tishan
Author content
All content in this area was uploaded by Yasiru Tishan on Feb 04, 2022
Content may be subject to copyright.
SE102.3 – Web Application Development
Group Assignment
Module Lecture: Mr. Saravanabavan Nasiketha
Group Name: - Perfect Gang
Submission Date: September 16, 2021
Fruits and Nuts - Website
Web Application Development | Perfect Gang | Group Assignment 2 | P a g e
Contents
➢ Individual Contribution to the Work Submitted ................................................................ 3
➢ Acknowledgment ............................................................................................................. 3
➢ Preface ............................................................................................................................ 4
➢ Introduction .................................................................................................................... 4
• What's About Fruits & Nuts ................................................................................................. 4
➢ Abstract ........................................................................................................................... 5
➢ Graphic Design & Advertising ........................................................................................... 6
➢ Advantages of the Website .............................................................................................. 8
• Why Do We Give the Option "To Buy Online?"................................................................... 8
➢ Objectives........................................................................................................................ 9
➢ Software & Languages Used ............................................................................................. 9
➢ Software used to Code ................................................................................................... 10
➢ Problems Occurred in Current Situation .......................................................................... 10
➢ Pages Consist in Website ................................................................................................ 11
➢ Developed Website Screenshots..................................................................................... 12
• Introduction to Home Page with GUI Images ................................................................... 12
• Introduction to About Page ............................................................................................... 13
• Introduction to Footer ....................................................................................................... 13
• Introduction to Gallery Page ............................................................................................. 14
• Introduction to Store Page ................................................................................................ 15
• Introduction to Cart Page .................................................................................................. 16
• Introduction to Deals Page ................................................................................................ 17
• Introduction to Contact Page ............................................................................................ 18
• Introduction to Registration Page ..................................................................................... 19
• Introduction to Database .................................................................................................. 20
➢ Database Connection ..................................................................................................... 21
• PHP Code ........................................................................................................................... 21
• Introduction to Perfect Gang Page .................................................................................... 22
➢ Summary ....................................................................................................................... 23
➢ Reference ...................................................................................................................... 23
Web Application Development | Perfect Gang | Group Assignment 3 | P a g e
Individual Contribution to the Work Submitted
No
Full Name
Index No:
Individual Contribution
1
S.Y.T Silva
21571- (Group Leader)
PHP and HTML and CSS
2
E.A.T.R Edirisinghe
18307
HTML Structure
3
K.P.V.S Pinnawala
21444
PHP and JavaScript Functions
4
A.M.D Gunarathna
20925
JavaScript Functions
5
P.S.R Siriwardhana
21183
CSS and HTML
6
H.A.A Madhushani
21376
User Interface Design
7
Peshala Ranasinghe
21234
HTML Structure
8
G.G.N Maleesha
21379
HTML & Report Making
Acknowledgment
We would like to express our special thanks and uttermost gratitude to the Dean of Faculty
of Computing of the NSBM Green University, Dr. Rasika Ranaweera, the Department Head of
Department of Computer Science and Software Engineering of NSBM Green University, Mr.
Mohammed Shafraz, and our dear lecturer of the web application development module
(Module Code: SE102.3 ), Mr. Naji Saravanabavan as they are the people who gave us this
golden opportunity to take part in this beautiful group project, which also made us get
involved in doing a lot of research. This project also helped us get an excellent level of insight
regarding this subject by knowing how vast areas of fields in which we can apply this subject
too.
This Group Project also contributed a lot to developing our interpersonal relationships with
our fellow batchmates. All of us are also really thankful to all of you in that regard. Secondly,
we would also like to thank our parents and friends who helped us in many ways in finalizing
this project within the time frame given to us.
Finally, we would like to thank everyone who helped us in numerous ways in making this
Group Project a success. We are thankful to all of you.
Web Application and Development Project Group – Perfect Gang,
Undergraduates of BSc. Hons in Software Engineering (Plymouth, UK),
Batch - 20.3
National School of Business Management, Pitipana, Homagama.
Web Application Development | Perfect Gang | Group Assignment 4 | P a g e
Preface
We have made this report file on the topic Online-Fruits Delivery /E-Shopping System; We
have tried our best to elucidate all the relevant detail to the subject to be included in the
report. Team of Perfect Gang members had considerable support in designing the web pages
and creating the interfaces related to the organizational structure.
Our efforts and wholehearted co-corporation of each one has ended on a successful note.
We express our sincere gratitude to those who assist us throughout the preparation of this
topic. This is an excellent opportunity to show your team working through this site project.
Introduction
What's About Fruits & Nuts
Fruits and Nuts is an organization company that is an e-commerce site for buy Fruits, and the
company has a good development in delivering online fruits.
Mission: - Fruit Factor aims to be a service dedicated supplier of high-quality fresh fruit,
products of outstanding quality, with guaranteed food safety and grown under the
circumstances with attention to people and the environment.
Vision: - Our mission is to trade products that fully meet the requirements of the time and
thereby to our vision.
Motto: - Deliver to Doorstep.
The biggest challenge in fresh fruit delivery in Sri Lanka is that it needs to be delivered within
10 hours to any location in Sri Lanka. Fruits & Nuts has expertise in perishable deliveries,
including grocery, fresh fruit, flowers, cakes, and restaurant food.
We achieve this by acting with discretion, passion, and commitment.
We will realize this because of close cooperation with our worldwide suppliers and supply the
demand with excellent products and customer-focused solutions.
These are our most demanded cities for fruit basket delivery in Sri Lanka. Homagama being
the most distant city from our operational center, we still do next-day delivery.
Located Cities in Sri Lanka: - Homagama, Kirulapona, Balangoda, Pitipana, and Maharagama.
We love our fruit here at fruitsandnuts.com, and we are constantly sampling from different
growers in search of the most compelling and delicious assortment to add to our selection of
dried fruits. Don't forget to register on our website and be a loyal member.
Web Application Development | Perfect Gang | Group Assignment 5 | P a g e
Abstract
Looking for a perfect website to buy fresh fruits now can be frustrating and exhausting. You
aren't looking for just a fruit website, but to give that special someone the experience they
deserve. But where do you look first...? Luckily, we have you covered with the perfect gift:
Fruit's gift baskets. There are many offers of up to 70% discounts.
Fresh fruit baskets are a splendid way to show your affection. They are fantastic gifts for many
occasions, including birthdays, anniversaries, weddings, valentines, and even to thank you.
And to make the gift-giving even better, fruit basket deliveries can be lighter on your wallet,
easy to send, and even more special for the recipient when they receive your custom heartfelt
note.
Fruits & Nuts offers fruit basket gifts unlike any other. These baskets come in many different
packages so that you can set the tone for your perfect gift package. If you are looking to send
a romantic gift to a significant other, we have fruit baskets that include oranges, apples, juicy
grapes and are topped off with a bottle of red grape wine to dial up the romance.
As for a thank you or care package gift, our basket featuring freshly picked fruit and savory
snacks works fabulously. Treat that person to a munchable gift that they can enjoy at home
or on the go.
Hopefully, by now, you realize that fruitsandnuts.com is "More than Just Nuts" and also
includes a wide assortment of dried fruits and then some. These specialty food products are
perfect for snacks, as well as ingredients for gourmet cooking and baking.
Meta Tags
<html>
<head>
<link rel="shortcut icon" href="IMAGE/favicon/favicon (1).ico">
<title>Fruits & Nuts</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=divice-width, initial-
scale=1.0"/>
<meta name="Keywords" content="Fruits,Nuts,Food,Perfect Gang"/>
<meta name="description" content="Sri Lanka's Freshest Online
Grocery Store"/>
</head>
<body>
Meta tags are used to describe a page's content and favicon shortcut icon, in web browser
tab this is used to show the clear idea about the current tab window. These codes are mainly
used in every page of the website to identify the page correctly in the search engines.
Web Application Development | Perfect Gang | Group Assignment 6 | P a g e
Graphic Design & Advertising
Web Application Development | Perfect Gang | Group Assignment 7 | P a g e
Web Application Development | Perfect Gang | Group Assignment 8 | P a g e
Advantages of the Website
Why Do We Give the Option "To Buy Online?"
In this world of technological advancement where everyone runs towards finding the most
convenient manner of getting work done. People still prefer to follow the traditional
procedure for buying fruits.
Online shopping is the trend these days, and working professionals find it convenient. People
residing in cities face increased traffic and cannot spend time shopping.
Therefore, almost every major city has started buying vegetables online. Since online
shopping is a matter of minutes and at one's fingertips, it can benefit consumers.
There are several benefits to opt for fruits online. So, let's look at the key reasons that lead
to buying them online.
• Ease to stay at home and relax.
• Time is so important, and we understand.
• Traffic makes you panic.
• Get discounts and deals.
• Look for varieties at one go.
• Receive all your orders at your doorstep for free.
• Easy payment methods.
• Pay according to installments methods.
In the modern world, almost every product available can be purchased online with the ease
of your fingers
People are gradually relying on these online technologies and thus encouraging many startups
to seek better ideas that can improve human life.
We, the fruits & nuts website builders, considered the factors mentioned above and built a
critical website to give the best user experience in an e-commerce website.
Understanding the advantages of ecommerce;
• Faster buying process and cost reduction.
• Store and product listing creation.
• Affordable advertising and marketing.
• Flexibility for customers.
• Product and price comparison.
Web Application Development | Perfect Gang | Group Assignment 9 | P a g e
Objectives
1. We Came up with an automated system.
2. Develop a web-based e-commerce website to be used in pandemic situations or for the
future lifestyle.
3. We use validating the system in JavaScript for contacting details.
4. We are registering the user details in the database system.
5. Administrator and user-level access.
6. Firmly understand web technology such as PHP and MySQL.
7. We are using a form generator for generating the contact information in our email inbox.
8. Gatherings the Registration information to a database.
Software & Languages Used
Adobe Dreamweaver 2021 is used to design the whole website user interface, and XAMPP
Control Panel runs the phpMyAdmin within the localhost. Images are created in Adobe
Illustrator 2021.
• The Languages used in coding - HTML, CSS, JavaScript, PHP and MySQL.
• Support Help - W3 Schools and Tutorials Point
• Background Pictures are taken from -https://www.pexels.com/search/4k%20wallpaper
• Other Images are taken from - https://www.pngpacks.com/category/free-png
• Form Generator - https://formspree.io/f/mdoypkvz
• Vector design - https://www.freepik.com
• Source Code Designer - http://hilite.me/
About Dreamweaver;
• It highlights your coding so that it can be quickly scanned.
• It helps beginners understand what the coding actually does for a website.
• Users receive code suggestions.
• You don’t have to switch screens.
• Creating content variations is easy thanks to a word processing interface.
Web Application Development | Perfect Gang | Group Assignment 10 | P a g e
Software used to Code
Dreamweaver helped to develop and build this website in a successful manner. There we
found errors while developing the website. It was much easier to build the website from this,
some of our team members used "Visual Studio Code" Software while coding.
Problems Occurred in Current Situation
1. Lack of eating fresh fruits by young generation- making their interest in the activity
and letting them order online.
2. Traffic in buying goods- but now we deliver to your doorstep.
3. No many choices- store is the primary example for these varieties of fruits in various
types.
4. Payment should be made suddenly- no more charges suddenly you have monthly
installments.
5. There are no many offers- 50% of weekly discounts and new registration takes off
70% discounts while using.
6. No customer satisfaction- 24/7 customer service and help-line.
7. Invaluable Loyalty – Premium Membership Deals & Easy paying methods through the
internet.
Web Application Development | Perfect Gang | Group Assignment 11 | P a g e
Pages Consist in Website
Main Pages
1. Home
2. About
3. Gallery
4. Contact
5. Deals
6. Register
7. Store
8. Add to Cart
9. Perfect Gang
Sub Pages
1. Team
2. Learn More
Social Media Pages
1. Facebook
2. Snapchat
3. Instagram
4. LinkedIn
5. Twitter
The website is basically about an organization that promotes awareness of the country
blessed with a tropical climate and a geography that suits a range of vegetation and
agriculture products. Sri Lanka has been supplying the world with a range of tropical fruits
and nuts.
Produced by autonomous clusters of farmers, around eighty different varieties of fruit and
vegetables are grown in Sri Lanka's varied agro-climatic areas. Sri Lanka has more than 90,000
metric tons of fruit and vegetables annually and exports both fresh and processed varieties
to many destinations worldwide.
Improved techniques on crop cultivation, especially under polytunnels, optimum input
applications, pest and disease control, post-harvest management, quality packaging, and
improved transportation methods are practiced to ensure the best quality. The government
also incentivizes the private sector's involvement in commercial cultivation for further
expansion.
Web Application Development | Perfect Gang | Group Assignment 12 | P a g e
Developed Website Screenshots
Introduction to Home Page with GUI Images
A small brief on fruits and nuts online grocery store is provided on this page, and displayed
on our home page are few other places where you can get our service. This webpage can be
used as the main page of the website. In creating this website, I paid close attention to the
home page. The main reason for this is that the appearance of the home page increases the
number of customers. Because of this, we have created a beautiful home page. This page
contains the main parts of the website. Customers should visit this page to know all the
essential details about our website, contact numbers, our service. We have created the
webpage using technologies like HTML, CSS to increase the attractiveness of this webpage.
Special Feature used while coding in CSS;
@keyframes change{
0%{content: "Kirulapana"}
20%{content: "Malabe"}
35%{content: "Homagama"}
60%{content: "Pitipana"}
80%{content: "Nugegoda"}
100%{content: "Balangoda"}
}
Each keyframe specifies how an animated element should be rendered at a certain point in
the animation sequence. Because the animation's timing is controlled by the CSS style that
configures it, keyframes utilize a percentage to identify the point in the animation sequence
at which they occur.
Web Application Development | Perfect Gang | Group Assignment 13 | P a g e
Introduction to About Page
This is about page the website. All information about this website is briefly described on this
webpage. After registering a new customer, you will get a proper understanding of our
website through this page. Looking at the interface of the webpage, it is clear that we have
used technologies like HTML and CSS to make this webpage look very attractive.
Introduction to Footer
Some webpages use a footer when creating a website. You can see the footer on the contacts
page, about page, deals page, gallery page. Not only that, this page is linked on Facebook,
Snapchat, Instagram, LinkedIn, and Twitter. In there, we have used some valuable links. Such
as Register, Team, Contact, Learn more, and Gallery. This is a website owned by developers
called Perfect Gang.
Coding used to link the Perfect Gang Page in HTML;
<span class="link">© Copyright 2021 <a style="color: #FFFFFF" href
="Perfect Gang.html">Perfect Gang</a>.  All Rights Reserved.</span>
While coding the footer, we made the same free spaces within the social icons and text that
we include in the footer. On behalf of that, we used the function " " to make the
outcome beautiful.
Web Application Development | Perfect Gang | Group Assignment 14 | P a g e
Introduction to Gallery Page
This is the gallery web page, and it contains four pictures as well. You can log in to these social
media platforms and find more details. This is the Gallery page. Here are some photos related
to our website. This will enable customers to gain a better understanding of our services.
Pictures of all the fruits sold by our website are included here. Thus, we have used the most
advanced technology to display the photos separately.
Coding used to align the images in CSS;
.slider{
width: 2000px;
height: 550px;
margin-bottom: 30px;
margin-left: 900px;
}
.slider1{
width: 550px;
height: 550px;
margin-bottom: 40px;
margin-left: 300px;
}
This is used to align the two images in left and right positions, due to this we used a class
name slider and build the margins in bottom and left side.
Web Application Development | Perfect Gang | Group Assignment 15 | P a g e
Introduction to Store Page
This is another webpage of our website, the store page. Customers should come to this
webpage to buy fruits. Therefore, when creating this webpage, we paid more attention to
increase the attractiveness of the webpage. Shown here are some of the fruits advertised for
sale. These ads are posted with the money so that customers can easily understand. We also
use technologies such as CSS, HTML to make advertising very clear and attractive. This makes
the website look very attractive.
Coding used to Design the Button in CSS;
.btn{
background: #00b894;
color: #fff;
text-align: center;
border-radius: 5px;
text-transform: uppercase;
width: 175px;
height: 50px;
cursor: pointer;
position: fixed;
margin-top: 550px;
border: 0;
}
Web Application Development | Perfect Gang | Group Assignment 16 | P a g e
Introduction to Cart Page
When we log in to the store site of the website, there are some items that we sell. From there,
when we buy one, we go to the add to cart page. This is a standard method used for this. No
matter which item a customer selects from here, a standard dialog box pops up. Customer
details can be filled in there. If there is any shortcoming in the filling information, the process
will not separate. An error message will appear. We have used JavaScript language for that.
Also, before a customer confirms an order, there are some details to fill in. After filling in the
details, the order can be processed. Name, email, fruit item, quantity, customer address are
the details. After that, we received an email for customer confirmation. The API software has
been used to create the form that we can see. Also, we use HTML & CSS for designing
background.
Figure 1 – Working JavaScript Error
Web Application Development | Perfect Gang | Group Assignment 17 | P a g e
Introduction to Deals Page
This is another webpage that can be referred to as a deals page. The one on the home page
can be described as just another part. This webpage contains information about day-to-day
transactions with customers. This webpage has one more feature than other web pages. This
means that only the admin of the website can see this webpage. Such an option has been
provided for this webpage due to the strict security of its privacy and security. Also, a
challenging security option has been provided for the database that contains information on
this page. We have provided these options considering the safety of the entire website.
Furthermore, there is another button called connect store. Once you click on connect store,
automatically, you go back store page.
Coding used to Align the Adv Image in CSS;
.adv1{
max-height: 400px;
min-width: 300px;
margin-left:900px;
margin-top: 20px;
margin-bottom: 60px;
position: absolute;
}
This coding is used to margin the image advertisement in the website, so we had to take a
class name called "adv" and build the code according to our main background image.
Web Application Development | Perfect Gang | Group Assignment 18 | P a g e
Introduction to Contact Page
This is the last webpage on the website, the Contact webpage. This webpage is designed so
that customers can contact us when needed. This webpage allows you to notify the admin
team of the website about any technical issues, such as reporting errors on any product sold.
You can use our phone number to contact us, and you can also contact us through social
media like Facebook and Instagram. We have used techniques like CSS and HTML to enhance
the beauty of this webpage.
Figure 2 – Working JavaScript Error
Figure 3- Email Received for Contact Page
Web Application Development | Perfect Gang | Group Assignment 19 | P a g e
Introduction to Registration Page
This webpage is the first web page that customers see when they login to this website. In this
case, if the person logging in is a person who has previously registered on the website. He will
be able to log in to the website using his email and password. But if the person is not
previously registered on this website, he will have to register. Otherwise, those people will
not be able to use this website. The details of all the registered persons are stored in the
database so that at any time, if a person forgets his username or password, he can retrieve it.
This table is filled after the user enters the details in the register dialog box. Here PHP is used
to show the above page and connect the database to this webpage. And the outer frame is
built-in CSS and HTML language.
Web Application Development | Perfect Gang | Group Assignment 20 | P a g e
Introduction to Database
Here is the database of the website Fruits and Nuts. We have hosted this database using the
XAAMP server on our local PC. All the customer information that we entered into our
registration page is stored in a database. Before we created this database system, we even
drew the relevant ER Diagram and created this database. So, we developed the six tables of
data entry which have a primary key on ID. Our database consists of several tables, and the
tables and the information contained in them are clearly shown in the picture below.
Figure 2 - Tables
Web Application Development | Perfect Gang | Group Assignment 21 | P a g e
The table below is our database. This table is created under the name registration user. This
table consists of six sections: ID, Name, Mobile Number, Email, Password, and Confirm
password. Here we have given the ID as the primary key. ID is taken as a default in the
database because there should be no direction in the database system. This is taken as an
auto-increment value on behalf of that. Therefore, we can state that the main reason for
choosing the ID as the primary key.
Database Connection
PHP Code
<?php
$Name = $_POST['name'];
$PhoneNumber = $_POST['pnumber'];
$Email = $_POST['email'];
$password = $_POST['Password'];
$Cpassword = $_POST['Cpassword'];
$con =
mysqli_connect('localhost','id17597270_vishwavishwa','9]x84sxAoS#{DTxt','id
17597270_registration_user');
if (!$con){
echo 'Error occurred...';
}else{
$query = "INSERT INTO registration_user (fullname, mobilenumber, email,
password, compassword)
VALUES ('$Name', '$PhoneNumber','$Email','$password','$Cpassword')";
if (mysqli_query($con,$query)){
echo '<script language="javascript">';
echo 'alert("Message Sent Successfully")';
echo '</script>';
}else{
echo "Error";}}
?>
This is the database connection code; this is taken according to the name attribute. There are
some error functions if the program doesn't work according to the process. This might show
errors during the registration.
Name
Type
Discription
id
int(11)
Customer id number
fullname
varchar(100)
Customer full name
mobilenumber
int(10)
Customer mobile number
email
varchar(30)
Customer email
password
varchar(64)
Customer password
compassword
varchar(64)
Customer confirm password
Web Application Development | Perfect Gang | Group Assignment 22 | P a g e
Introduction to Perfect Gang Page
Here's how each member contributed to the creation of our website. Every one of our
members contributed to the design of this website to the best of their ability. Therefore, we
were able to create a very high-quality website. Our members are explained with a prominent
picture to make it easy for users to get some information.
We developed this together as a team. The leader of the perfect gang made sure that each of
us made the necessary contributions to complete this project successfully. All our team
members were very responsive and always took steps to hand over the work allocated to
them on due time. Different team members worked on other parts of the website, and finally,
everyone got together to step the website.
Overview of Fruits & Nuts
Food is one of the basic needs of the human body to stay alive. Fruits are a vital part of food
that provides vitamins, potassium, fiber, folate, calcium, iron and other minerals to our body.
If we desire to live healthily and fit we have to append fruits in our daily lives. Fruits are natural
and they can be used to cure many swear diseases like heart diseases, blood pressure, cancer,
diabetes, diarrhea, body infection, and other major diseases. Fruits are not only used to cure
harmful diseases but they are very effective for skin beauty because they give freshness and
beauty to our skin and provide protection to our skin from sun and skin infections. Fruits are
also very good for eyes, tooth whitening, and hair growth.
Web Application Development | Perfect Gang | Group Assignment 23 | P a g e
Summary
Briefly describe our website as an online fruit delivery website. Customers can easily online
order fresh fruits to their doorstep. We used languages like JavaScript, HTML, CSS, and PHP
to create this website. That is why we have made every web page on the website attractive,
and all those pages are responsive. A database has also been added to this website. Therefore,
the data on the website is also strictly protected. In the future, we hope to add options like
SMS Alert, Developed Database to this Website.
Fruits & Nuts offers fruit basket gifts unlike any other. These baskets come in many different
packages so that you can set the tone for your perfect gift package. If you are looking to send
a romantic gift to a significant other, we have fruit baskets that include oranges, apples, juicy
grapes and are topped off with a bottle of red grape wine to dial up the romance.
As for a thank you or care package gift, our basket featuring freshly picked fruit and savory
snacks works fabulously. Treat that person to a munchable gift that they can enjoy at home
or on the go.
These are the login details to our Host and Database Managers;
File Manager
( https://files.000webhost.com )
Username : PerfectGang
Password : PerfectGang2021
Database Manager
( https://databases.000webhost.com/index.php )
Username : id17597270_vishwavishwa
Password : 9]x84sxAoS#{DTxt
Reference
Information about fruits & Nuts that were used to build the introduction and abstraction was
obtained through various websites on the internet. Since the team members each did the
information gathering individually using numerous websites to make their page, it is hard to
say that we took from a particular website. The Photos used were also obtained from various
websites, and the rest was done by our team members.
The Photo Editor Photoshop is used for logo creation and photo editing. All the references are
mentioned under the topic of "Software & Languages Used."