Arts, Sciences & Technology University in Lebanon: Computer Science

Arts, Sciences & Technology University in Lebanon
[E-SHOPPING SYSTEM]
By
THERESA SIMON AL HADDAD
Supervised by
DR. YOUSSEF DERGHAM
A senior project submitted to
Arts, Sciences & Technology University in Lebanon
for the degree of
Bachelor OF SCIENCE
in
Computer Science
Committee members
Dr. Youssef Dergham Supervisor

Dr. Ahmad Skaiky Examiner
Dr. Jihad Itany Examiner
Department of Computer Science

Faculty of Sciences and Fine Arts
Arts, Sciences& Technology University in Lebanon
June 2018
PROJECT RELEASE FORM
Student Name
I, Theresa Al Haddad hereby release, insure, and hold harmless the Arts,
Sciences & Technology University in Lebanon from any and all
liability, thereof to use and publish my personal work, with
identification of me by name.
Signature…………………………
Date....................................
2
DEDICATION
My work would be incomplete if I do not pay tribute to those who have provided me with moral
support and encouragement throughout my studies: my mother, father, brother, sister and friends
to whom I dedicate this work.
3
ACKNOWLEDGEMENTS
First I would like to thank our university higher management, my internship academic supervisor
Dr. Youssef Dergham for his advice and support.
I also would like to thank Dr. Ali Hamieh, our dean, Dr. Ahmad Skaiky our coordinator, and Dr.
Jihad Itani the dean of the students’ affairs for motivating me and doing all the required follow
up for me to meet the deadlines, and for all the help they gave me through all my years at AUL.
Finally, I would like to thank all my friends for their help through all this period, whenever
needed.
4
Abstract
We live in an era where internet can reach every single person in town, providing them with the
necessary services either to facilitate their daily life routine or to entertain them. From this point,
I have decided to build a website that contributes in helping the community by giving the chance
to those who have a special cooking talent to have a platform to work and reduce unemployment.
My Website is a simple yet secure way for suppliers to sell and for customers to buy not only
tasty but also safe food.
In addition, my system gives privilege to the administrator to view all the suppliers’ information
in an organized manner; it also gives access to the admin to modify/view/delete all supplier’s
information.
If this website went online, it will result in significant changes, it will first encourage all senior
and youth chefs to sell their products and make profit, and as well, it will help all customers to
have access to special and safe food. Secondly, it would help solving the unemployment issue
that is facing Lebanon and the region.
5
Contents
PROJECT RELEASE FORM..........................................................................................................2

DEDICATION.................................................................................................................................3
ACKNOWLEDGEMENTS.............................................................................................................4
Abstract............................................................................................................................................5
List of figures...................................................................................................................................7
List of Abbreviations.......................................................................................................................8
Chapter I Introduction..................................................................................................................9
I.1 Project Definition..............................................................................................................10
I.2 Project Objectives..............................................................................................................10
I.3 Project Specifications……………………………………………………………... ……10
Chapter II Tools and softwares used.......................................................................................11

II.1 Tools used .......................................................................................................................11
II.2 Software used.................................................................................................................11
Chapter III Database and website data flow..................................................................................
III.1 Database..........................................................................................................................13
III.2 Samples code…………………………………………………………………………15
Chapter IV Website GUI , Views and Models...........................................................................22

IV.1 Introduction to chapter IV
IV.2 The Website
Conclusion.....................................................................................................................................29
Future Works.................................................................................................................................30
References......................................................................................................................................31
6
List of figures
Figure 1:Database tables ...............................................................................................................14

Figure 2: index.php........................................................................................................................16
Figure 3:Home.php........................................................................................................................17
Figure 4: JavaScript of slideshow and date...................................................................................18
Figure 5: Php code for “register. Php”...........................................................................................19
Figure 6: Css code for the website.................................................................................................20
Figure 7:Php Code for Add To Cart..............................................................................................21
Figure 8: Index and login page......................................................................................................23
Figure 9: Signup Page....................................................................................................................24
Figure 10:Clients home page after login.......................................................................................25
Figure 11:Available products........................................................................................................26
Figure 12:Add to cart ....................................................................................................................27
Figure 13:Tacking..........................................................................................................................28
List of Abbreviations
AUL Arts, Sciences, and Technology University in Lebanon

GUI Graphical User Interface
HTML Hypertext Markup Language
CSS Cascading Style Sheet
JS JavaScript
PHP Hypertext Preprocessor
7
Chapter I Introduction
I.1 Project Definition
This website is an information system that provides a service to the suppliers offering an easy
way to sell their products and to customers to buy products An advantage of this system is that it
would reduce the unemployment in the food sector and provide a platform for safe food to
customers.
I.2 Project Objectives
Using the E-shopping System (Mouneh), suppliers are going to be able to sell their home made
food with safety and good qualities , customers are going to be able to buy products with a high
quality
Customers are not the only people benefiting from this system, the suppliers are also going to use
the website by the ability to buy from other suppliers and to check if their products are posted by
the admin.
I.3 Specifications
In this report we are going to present the E-shopping system (Mouneh) version, which has the
ability to handle a shopping online business.
8
Chapter II Tools and Software used
In order to get my information system done, I had to use a computer with the needed
software/IDEs including a EasyPHP server to run my website.
II.1 Computer Specifications
The computer used for developing the application is a Toshiba Air laptop with the below
specifications:
Processor: 2.50 GHZ intel core i7.
Memory: 8GB
Graphics: 1366 x 768 pixels Intel HD Graphics 60p HZ
II.2 Software Used
There are many IDEs/softwares that can be used to create a website. Since I have used all
HTML, CSS, JS and PHP languages in my project, I have chosen to use the NotePad++ Editor,
which supports all of the above languages.
To Link between the website and the database I chose to use PHP language to write and select
from the database, Since PHP is an open source language that guarantees high support.
9
We used the EasyPHP server in order to connect to the database locally, using also its GUI
“phpmyadmin” to create the database, tables, and put attributes constraints and data in each
table.
10
Chapter III Database and application data flow
III.1 Database
As we all know, Websites are widely used across the network

nowadays, and every website should have its own database in order to
read data from and stay updated. Databases can be used to read, write,
delete, and update data. In order to perform all the previously stated
actions, a scripting language should be used between the website and
the database, such language is responsible for the communication that
happens between these two resulting in a system with suitable data
that can be selected , pushed and manipulated with the less cost
11
Table 1: DB Entity Relationship Diagram
Figure1: Data Base tables
The database consists of 3 tables that are related using primary keys and foreign keys; Therefore,
the tables are said to be interdependent. The above tables can be accessed from one another using
the FK relation between them , consequently the user can see all the requested data. As shown in
the above figure, the 3 tables have different names and functionalities but are all related as
follows:
12
1) Table “users” is the table used when a user wants to register to the system , the table’s
fields are the user’s id (user_id), userName, userEmail, userPass.
The userId is a primary key and thus said to be unique. Consequently we now can have it as a
foreign key in other tables to define what data the user is requesting and that’s how data is
gathered.
2) Table products is the table that define the products created by the admin in the system,
each product is defined by its product_id and the necessary information about it. Data is pushed
to this table when the admin decides to add a product and thus he fills the necessary information
that are going to be shown to the user. We also notice that “userId” is a foreign key in this table
resulting in assigning for product order a specific customer, this latter is defined in the table
“order”
3) Table “order” is the table responsible for the add to cart system done by the customer.
Each order has its own id “orderId”. This table has as attributes:
“orderId”, an attribute that provides each reserved order
“userId” as a foreign key, considering that each order belongs to one and only one user.
“product_id” as a foreign key, considering that each product is reserved through a specific id.
13
III.2 Samples Code
Figure 2: index.php
The “index.php” page is the index page of the project, in this page we can access to login and
signup pages through clicking on links . In this page I use html,css, php and JavaScript.
14
Figure 3: Home. Php
The above figure represents the home page where the customers after login have the access on
the website. In this page I use html ,css and JavaScript to show the content of the page. This page
is the necessary page of the website when we can access all the pages through it.
15
Figure 4: JavaScript of slideshow and date
The above code represents the JavaScript code for slide shows and date shown in all pages of the
website.
16
Figure 5: php Code for registration
The above php code represents register. Php page. In this page I use hmtl, css and php MySQL
where it access to the database created for registration and to check the availability of the
registration form. This page can access from the index.php page through the links.
17
Figure 6: CSS Code for the website
The above code is responsible for fixing the design in the whole websites where using css classes
and ids and calling them to each page in the website has become the ultimate way to make a
perfect design. Such design divides the webpage into <div>s each having its own property and
thus the page would be divided according to the parameters given to it in CSS
18
Figure 7: Php code for add to cart products
The above code represents the Php code for add to cart (”order “page) of the products chosen by
the customers in the “product. Php” page
19
Chapter IV Website GUI, Views and Models
IV.1 Introduction to chapter IV
In this chapter, we are going to talk about the different options, webpages, and views in the
website. The way each can be used, and who can use it. We will be seeing pictures for the main
steps along with a description for each picture.
IV.2 The Website
Figure 8: Index and Login page
This is the Login page ,it is the websites main page, it contains a Register link to “register.php”
page It also contains a Login form where each of the email and the password are required to
match records in the database in order to successfully login.
20
Figure 9: Signup page
If the customer do not have an account, yet he should register with his specific information
(name, email address and password).
21
Figure 10: Clients Homepage after Login
This homepage welcomes the client, gives him access to the website at all to check new products
his order and to buy.
Figu
re 11: available products
The above figure shows how a client can easily see available products with their prices and
names .The results will appear in the next page “order.php”.
22
Figure 12: Add to cart
The above page show the products added to cart by the customers with their informations
In this page, he can add more products, delete a product, empty his cart, know the total of his
purchase and submit his order.
23
Figure 13: tracking
The above page allow the customer to track his order after clicking on submit button in the
previous page (order. Php”).
Conclusion
Now that I have explained throughout the report the aim of this website, the way it was designed
and implemented, and an example of how it is utilized rationally, It would be easy for any user
to use this system without any distractions.
24
In addition to supporting public unemployment, this website would be an effective way to save
people’s time where a customer can easily buy any special product with high safety quality and it
help the unemployment chefs to sell their products in an easy way . This way the above system is
not only a simple business way to provide people with services but also a suitable way to save
the world from public unemployment.
25
Future Works
Everything is moving very fast, and online services are becoming more powerful every day. In
order to stay on track, we have set plans for the future of the website; In our next version, there
are going to be an admin side with a full access to the website and many more suppliers and
more webpages and options that will facilitate even more the customer and the suppliers daily
life in the kitchen.
The design and UX of the website will be developed into a more user-friendly GUI.
The website will notify the admin by an email or sms for the new orders.
The payments of reservations will come into reality and people will pay using a credit card and
cash on delivery.
The tracking page will be more affective with the suppliers and customers
We could develop a mobile application to accompany the website to support a day-to-day

checkup by customers.
26
References
Search and log in pop up
From www.w3school.com
Css tricks and animation
From www.w3school.com
Add to cart
From https://tutsplanet.com/simple-php-shopping-cart-958/
Template steps progress
From https://www.prepbootstrap.com/bootstrap-template/steps-navigation
27

Arts, Sciences & Technology University in Lebanon: Computer Science

Uploaded by

Copyright:

Available Formats

Arts, Sciences & Technology University in Lebanon: Computer Science

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Arts, Sciences & Technology University in Lebanon: Computer Science

Uploaded by

Copyright:

Available Formats

Arts, Sciences & Technology University in Lebanon

THERESA SIMON AL HADDAD

DR. YOUSSEF DERGHAM

A senior project submitted to

Arts, Sciences & Technology University in Lebanon

for the degree of

Dr. Youssef Dergham Supervisor

Department of Computer Science

PROJECT RELEASE FORM

PROJECT RELEASE FORM..........................................................................................................2

Chapter II Tools and softwares used.......................................................................................11

Chapter IV Website GUI , Views and Models...........................................................................22

Figure 1:Database tables ...............................................................................................................14

AUL Arts, Sciences, and Technology University in Lebanon

I.1 Project Definition

I.2 Project Objectives

Chapter II Tools and Software used

II.1 Computer Specifications

Processor: 2.50 GHZ intel core i7.

Graphics: 1366 x 768 pixels Intel HD Graphics 60p HZ

II.2 Software Used

Chapter III Database and application data flow

As we all know, Websites are widely used across the network

Table 1: DB Entity Relationship Diagram

Figure1: Data Base tables

“orderId”, an attribute that provides each reserved order

III.2 Samples Code

Figure 3: Home. Php

Figure 4: JavaScript of slideshow and date

Figure 5: php Code for registration

Figure 6: CSS Code for the website

Figure 7: Php code for add to cart products

Chapter IV Website GUI, Views and Models

IV.1 Introduction to chapter IV

IV.2 The Website

Figure 8: Index and Login page

Figure 9: Signup page

Figure 10: Clients Homepage after Login

Figure 12: Add to cart

Figure 13: tracking

We could develop a mobile application to accompany the website to support a day-to-day

Css tricks and animation

Template steps progress

You might also like