ONLINE MOBILE SHOP WEBSITE

HUMAN COMPUTER INTERACTION PRESENTATION

SUBMITTED BY:
MEHR UN NISA 3091/FBAS/BSSE/F16-B

SUBMITTED TO:
MA’AM MARIA FAZAL

SUBMITTED ON:6/MAY/2019
1.INTRODUCTION:
The idea for making this app focus on saving the time and ease of customer, also the seller can
easily display all the products without getting in a hectic routine or the situation where he have to
wait so long for a customer and book the order to stay at good position in market.so in short the
main idea behind this topic has following reasons:
1.EXISTING SYSTEM:

➢ In the current system all work is done manually.

➢ Wastage of time to find out how many orders are placed.
In manual system generating reports for types of data based on some condition is time
consuming task.
➢ Searching facility is not provided in a System.
➢ Time & Money is not saved in a System.

2.Need for new system

➢ In the new system customer can purchase mobile online.

➢ Save time and money by online shopping.
➢ Customer can see the latest mobile.
➢ Give the Discount Offer for Customer.

3.features:
➢ customer can see all the variety available at one place.
➢ Providing upcoming mobiles details
➢ Providing signup facility to keep a personal account
➢ Providing facility to give suggestions through feedback
➢ Contact info on overall social media

2.SYSTEM OVERVIEW:
HOME PAGE:
On Loading webpage, home page will open which includes menu bar, shop title, and a few
sliding pictures to give a good interface view.
Shop icon with search bar on the top providing the user to user the desired functionality.
Menu bar contains the options for Home, Mission, Signup, Shopping Cart, Feedback and contact
upon clicking the desired option, required page will open and user can go back to the home page
by clicking home button on every page.
MISSION:
When user will click on the mission bar, a page with mission statement of the company will open
where all the other options are still available and user can easily shift from one tab to another,
upon clicking other options user can easily move on to the desired page.
BRANDS:
It will open different options of brands available in shop and upon clicking the desired brand,
mobiles will be shown with price and option to purchase, however purchase button will not work
but only echoes the sentence “ do you want to buy the product?” and user can then in response
press okay or cancel according to choice.
SIGNUP:
on clicking the signup option, a page will appear containing the icon, search bar, shop name and
a form which a user can easily fill and submit for further functions to be performed.
Sign up form contains name, email, website, subject and password.
SIGN IN:
on clicking the signup option, a page will appear containing the icon, search bar, shop name and
a form which a user can easily fill and submit for further functions to be performed.
Sign in form co

FEEDBACK:
on clicking the signup option, a page will appear containing the icon, search bar, shop name and
a form which a user can easily fill and submit for further functions to be performed.
A feedback form contains input spaces for name, email and message with a submit button for
further functionalities to be performed.
CONTACT US:
In this tab we have provided al the media links through which a customer can connect us for
further details or queries,
Some icons with links are mention, which can be opened on clicking the icons.
TOOLS USED:
-HTML
-CSS
-JAVASCRIPT
-BOOTSTRAP
-PHP

3.GETTING STARTED:
Focus is on purchasing a mobile, website will start from the home page and further functions can
then be selected.
PURCHASING A MOBILE:
STEP1:
Open the website and home page will appear with tabs on the top containing the option of
brands.
STEP 2:
Click on the brand tab to get the link of page where brands are mentioned.
STEP 3:
On Clicking the brand, brand page will open in which icons of different available brands are
displayed.
STEP 4:
On clicking the desired icon/logo the mobile phones of desired brand will be showed with price.
STEP 5:
You can get the mouse on the picture of mobile and it will be zoomed for your ease.
STEP 6:
If you like any mobile and want to purchase it, you need to click on purchase button.
STEP 7:
On clicking purchase button a message will be displayed confirming if you want to buy the
selected mobile.
STEP 8:
Press okay to buy and cancel to reject.
4.SYSTEM REQUIREMENTS:
For using this system a user only need to have a good internet connection and a searching
browser for tracking the updated details, the system basically requires a login to continue further
operations but in my case I am not introduce to database connectivity this much precisely that I
can add the functionality so my system does not require any sign in for using the page but if the
user wants he can sign up but for the current system info will not be saved and more functions
include feedback option in which user can give suggestions to improve the website or the
suggestion about introducing new brands further if feedback is not a suitable choice user can
contact me without login.
Downloading of any app is not required in this case, a user can browse the details through the
website link.
In short, the basic requirements are:
-A website Browser.
-A good internet connection
-No restrictions of Windows version.
-No constraints for mobile or laptop users
-multi platform website.

5.DIAGRAMS:
USE CASE DIAGRAM
UML DIAGRAM
 SYSTEM FLOW CHART

A B C

Manage Order View Product

View Payment Details Give Order

Generate Report Payment

Give Feedback

END
6.APPENDIX WITH SCREENSHOTS:

HOME

MISSION&VISION
BRANDS

SIGN IN
 SIGN UP

FEEDBACK
 CONTACT US

ON CLICKING THESE ICONS LINK OF DIFFERENT SOCIAL CONTACT SITES OPE

MOBILE OPTIONS INSIDE BRANDS

 ON DOUBLE CLICKING PURCHASE

8.REFERENCES:
www.google.com
www.wikipedia.com
www.w3schools.com