Full name: PHAM DONG NHUT

Supervisor: HOANG DUC QUANG

April 2017

Developing online mobile sales website with responsive design

Word count:

Product and Development files:

1. Uploaded as a zip file

A dissertation submitted in partial fulfilment of the University of Greenwich’s

BSc(Hons) Computing
 ABSTRACT

Currently, the advanced technology developed increasingly powerful and increasingly

numerous applications in the fields of economy, production and daily life of people. A typical
point in the development of technologies including the application of information technology
in almost all activities. Thus, the work is done quickly and accurately, and achieve much higher
results. As society grows, the living standard of the people is increasing incomes of health
increasingly improved. The mobile phone no longer be alien to any people, can say that the
phone is an indispensable thing for everyone. However, with increasingly busy lives today, to
want to buy a favorite phone, consumers must come to the store to choose from so it will take
some time and effort. Foreseeing this need, we have built the website that sells the phone
company to cater to the demands heard, calling, entertainment... at which members can learn
the product information. Besides, customers and members can contribute ideas to the board to
increase service quality. Moreover, administrators can update the information on your device
quickly and conveniently while still ensuring the accuracy of such information.

ii
 PREFACE

Benefits of shopping online bring is really big, especially in the tech development continues.
The current online shopping is an essential demand of the people. However, with more and
more mobile devices, online shopping sites must change to suit is an indispensable thing. With
mobile devices, then people can shop online right on their devices without the need to follow
the traditional way is to use a bulky computer. Thus online shopping sites are changed to fit the
mobile device. That’s why Responsive Web Design should be applied. Therefore, the intention
of this project to prove that not only could shopping online website by used Responsive Web
Design but also that it could produce a stable, user-friendly solution for website design.

iii
 ACKNOWLEDGEMENTS

Project owner would love to give best regards and thanks to teacher Hoang Duc Quang who
teaching and guiding during learning process as well as project research.

iv
 CONTENTS

Abstract ...................................................................................................................................... ii
Preface ....................................................................................................................................... iii
Acknowledgements ................................................................................................................... iv
Contents ...................................................................................................................................... v
1 Introduction ......................................................................................................................... 1
2 Literature Review ................................................................................................................ 3
2.1 Introduction.................................................................................................................. 3
2.2 Technology and Tools for the Website Development ................................................. 3
2.2.1 Java ....................................................................................................................... 3
2.2.2 JSP ........................................................................................................................ 4
2.2.3 GlassFish Server ................................................................................................... 5
2.2.4 Microsoft SQL Server .......................................................................................... 5
2.2.5 NetBeans IDE ....................................................................................................... 6
2.2.6 Incremental model ................................................................................................ 7
2.3 Responsiveness website design ................................................................................... 8
2.3.1 Responsive web design overview......................................................................... 8
2.3.2 Importance of Responsive Design ........................................................................ 9
2.3.3 Responsive Web Design Framework ................................................................. 10
2.4 Conclusion ................................................................................................................. 11
3 Research on existing mobile sale websites ....................................................................... 12
3.1 Introduction................................................................................................................ 12
3.2 Product 1 – Buy Mobiles https://www.buymobiles.net/ ............................................ 12
3.2.1 Overview ............................................................................................................ 12
3.2.2 Appearance ......................................................................................................... 13
3.2.3 Usability ............................................................................................................. 13
3.3 Product 2 – Swappa https://swappa.com/ .................................................................. 13
3.3.1 Overview ............................................................................................................ 13
3.3.2 Appearance ......................................................................................................... 14
3.3.3 Usability ............................................................................................................. 14
3.4 Product 3 – 3mobileshop http://www.3-mobileshop.co.uk/ ...................................... 14
3.4.1 Overview ............................................................................................................ 14
3.4.2 Appearance ......................................................................................................... 15

v
 3.4.3 Usability ............................................................................................................. 15
3.5 Conclusions................................................................................................................ 15
4 Requirements Analysis ..................................................................................................... 16
4.1 Success criteria .......................................................................................................... 16
4.2 Functional specification ............................................................................................. 18
4.3 Performance Requirements ........................................................................................ 19
4.4 Safety Requirements .................................................................................................. 19
4.5 Security Requirements ............................................................................................... 19
4.6 Requirement Hardware / Software ............................................................................ 20
4.7 Use cases diagram...................................................................................................... 21
4.8 Summary .................................................................................................................... 35
5 Design ............................................................................................................................... 36
5.1 Architectural Design .................................................................................................. 36
5.1.1 System Context Diagram.................................................................................... 36
5.1.2 Data flow diagrams ............................................................................................ 36
5.1.3 Workflow diagram ............................................................................................. 39
5.1.4 Sequence diagram............................................................................................... 40
5.2 Database design ......................................................................................................... 48
5.2.1 Entity Relationship Diagram .............................................................................. 48
5.2.2 Table Description ............................................................................................... 53
5.3 Interface Designs ....................................................................................................... 58
5.4 Navigational Structure Diagram ................................................................................ 58
6 Development ..................................................................................................................... 59
6.1 Database Implementation .......................................................................................... 59
6.2 Back- End Implement ................................................................................................ 64
7 Evaluation ......................................................................................................................... 66
7.1 Testing ....................................................................................................................... 66
7.2 Product evaluation ..................................................................................................... 66
8 Conclusion ........................................................................................................................ 67
References ................................................................................................................................ 68
APPENDIX A - Project Proposal .......................................................................................... 69
1 Overview ....................................................................................................................... 71
2 Aim ................................................................................................................................ 71
3 Objectives ...................................................................................................................... 71

vi
 4 Legal, Social, Ethical and Professional ......................................................................... 72
5 Initial References ........................................................................................................... 73
APPENDIX B - Project Schedule.......................................................................................... 74
APPENDIX C - Test case for design ..................................................................................... 75

Figure 1: Example website mobile shop 1 ................................................................................. 1

Figure 2: Example website mobile shop 2 ................................................................................. 2
Figure 3: Incremental model ...................................................................................................... 8
Figure 4: Responsiveness website design .................................................................................. 9
Figure 5: Website buymobiles.net ............................................................................................ 12
Figure 6: Website swappa.com ................................................................................................ 13
Figure 7: Website 3-mobileshop.co.uk..................................................................................... 14
Figure 8: Use case diagram of Member ................................................................................... 21
Figure 9: Use case diagram of Guest ........................................................................................ 22
Figure 10: Use case diagram of Admin .................................................................................... 31
Figure 11: Use case diagram of Staff ....................................................................................... 32
Figure 12: System context diagram .......................................................................................... 36
Figure 13: Data flow diagram of system .................................................................................. 37
Figure 14: Data flow diagram of system .................................................................................. 38
Figure 15: Workflow diagram of system ................................................................................. 39
Figure 16: Sequence diagram add user ..................................................................................... 40
Figure 17: Sequence diagram edit user .................................................................................... 41
Figure 18: Sequence diagram delete user ................................................................................. 41
Figure 19: Sequence diagram add product ............................................................................... 42
Figure 20: Sequence diagram edit product ............................................................................... 42
Figure 21: Sequence diagram search product ........................................................................... 43
Figure 22: Sequence diagram create order ............................................................................... 43
Figure 23: Sequence diagram edit order ................................................................................... 44
Figure 24: Sequence diagram add staff .................................................................................... 44
Figure 25: Sequence diagram edit staff .................................................................................... 45
Figure 26: Sequence diagram delete staff ................................................................................ 45
Figure 27: Sequence diagram add comment ............................................................................ 46
Figure 28: Sequence diagram edit comment ............................................................................ 46
Figure 29: Sequence diagram delete comment ......................................................................... 47

vii
Figure 30: Entity relationship diagram of system .................................................................... 48
Figure 31: Database diagram .................................................................................................... 59

viii
 1 INTRODUCTION

Every day each of us must have the basic needs such as eating, shopping, watching movies,
listening to music, so we have to go to the recreation center or shopping to buy the products
they want. Grasp the needs and considering that the boom of the Internet all over the world in
recent years, so the application of information technology in the field of information search,
access remote data no longer difficult. People take advantage of the benefits that this area brings.
With business through the internet brings a lot of efficiency. Online business is cheaper to build
than real business and companies make more profit in the internet, this is reason internet
shopping becomes popular in the world. With the simple operation on the Internet connected
machine you will have what you need without having to spend much time. Just go to the
ecommerce service pages, follow the instructions and click on what you need. The service will
bring home to you. According to this, this project is about new website named MobileShop,
created for making online mobile shop. Website with the purpose of providing customers with
accurate information about the Mobile phones are on the market with be different brands of
mobile like (Apple, Samsung, Nokia, LG, Xiaomi...) and how to order online. The pines the
news is updated regularly and quickly. So shorten the interval, the range between buyers and
sellers, bringing information about new products quickly to the customers. Below is screenshot
of the website with has the same intent and purpose that I want to achieve in this project.

Figure 1: Example website mobile shop 1

1
 Figure 2: Example website mobile shop 2

This project will take five months to complete. The existing mobile shop websites searched and
analyzed to get clue on designing a suitable website for consumers. Microsoft SQL Server 2012
and NetBeans IDE software will be used to create a website. The language called Java used in
the coding part of the website. All details of the website and its functions take place in the report
on the following sections.

2
 2 LITERATURE REVIEW

2.1 Introduction

The main aim of the literature review is to know the impact of technology my choice for my
project. Also this part explains advantage of technology and will give answers to questions such
as why my choose this tool for project. Design guidelines and standards are used and so
described in this section.

2.2 Technology and Tools for the Website Development

2.2.1 Java
Java is an object oriented programming language. Developing OOPS (Object-Oriented
Programming System) is much easier, and it also maintains system modules, flexibility and
extensibility. Once you have knowledge of OOPS definitions such as abstraction,
encapsulation, multitasking and inheritance, you can use them in Java. Java itself embodies
many of the best thinking methods and design patterns in its libraries. Java is one of the few
programming languages that reaches nearly 100% of OOPS.
Advantage of Java:
 The number of Java API functions is very rich: Java has a lot of APIs. Most
importantly it is very easy to see, because it appears along with the Java installation.
When I started Java programming, I wrote code for Applet, and at that time Applet
was a great animation solution, which brought surprises to new programmers like us.
Is using source code in Turbo C ++. Java provides APIs for I/O (data communication),
networking, utilities, XML, parsing, database connectivity, and almost everything.
The rest are contained in open source libraries like Apache, Google Guava and some
other programs.
 Interpret: Java is a compiled and interpreted programming language. The source
program is written in the Java programming language with the .java extension first
compiled into * .class file and then translated into machine code.
 Multitasking – Multithreading: Java supports multitasking, multi-threading,
allowing multiple threads and threads to run in parallel at the same time and interact
with each other.

3
  Portable: Applications written in the Java language that can only be run on a Java
virtual machine can be run on any computer operating system that has a Java virtual
machine. "Write Once, Run Anywhere."
 Great community support: Community is the greatest strength of the Java
programming language and this platform. No matter how good a language is, it will
not survive without the support, support and knowledge sharing community. Java has
been very lucky, it has a lot of active forums, StackOverflow, open source
organization and some Java user groups help each other.

2.2.2 JSP
JSP (JavaServer Pages) is a server-side programming technology that enables the creation of
dynamic, platform-independent method for building Web-based applications. JSP have access
to the entire family of Java APIs, including the JDBC API to access enterprise databases. This
tutorial will teach you how to use Java Server Pages to develop your web applications in simple
and easy steps.
A JSP page consists of HTML tags and JSP tags. The JSP pages are easier to maintain than
servlet because we can separate designing and development. It provides some additional
features such as Expression Language, Custom Tag etc.
Why choose JSP?
 JSP allows developers to easily distribute application functionality to a wide range of
page authors. These authors do not have to know the Java programming language or
know anything about writing servlet code, so they can concentrate on writing their
HTML code while you concentrate on creating your objects and application logic.
 JSP pages easily combine static templates, including HTML or XML fragments, with
code that generates dynamic content.
 JSP pages are compiled dynamically into servlets when requested, so page authors
can easily make updates to presentation code. JSP pages can also be precompiled if
desired.
 JSP tags for invoking JavaBeans components manage these components completely,
shielding the page author from the complexity of application logic.
 Developers can offer customized JSP tag libraries that page authors access using an
XML-like syntax.

4
  Web authors can change and edit the fixed template portions of pages without
affecting the application logic. Similarly, developers can make logic changes at the
component level without editing the individual pages that use the logic.

2.2.3 GlassFish Server

GlassFish is an open-source application server project started by Sun Microsystems for the Java
EE platform and now sponsored by Oracle Corporation. GlassFish is the reference
implementation of Java EE and as such supports Enterprise JavaBeans, JPA, JavaServer Faces,
JMS, RMI, JavaServer Pages, servlets, etc. This allows developers to create enterprise
applications that are portable and scalable, and that integrate with legacy technologies. Optional
components can also be installed for additional services.

2.2.4 Microsoft SQL Server

Definition: MS SQL Server is a relational database management system (RDBMS) developed
by Microsoft. This product is built for the basic function of storing retrieving data as required
by other applications. It can be run either on the same computer or on another across a network.
Advantages
Same other products of Microsoft, Microsoft SQL Server comes with bundle of benefits for the
average users.
 Easy Installation
Like other Microsoft products. Microsoft SQL Server can install the easy way. Unlike other
database management systems that need to be installed with complex commands that make us
confused. SQL Server has an extremely friendly interface installation.
 Improved Performance
With its excellent compression and encryption of MS SQL server, it has helped improved data
storage and retrieval functions.
 Accelerate the ability to query data
With the ability to compress the database to over 50%, data query performance has also
improved significantly with Support Star Schema and Star Query Optimizations on SQL Server.
 Security
With encryption algorithms coding techniques almost impossible crack the security layers
enforced by the user. MS SQL shows that this is a very secure DBMS. MS SQL Server is
database servers close, so that can reduce the risk of attack on the database server

5
  Multiple Editions and Price Variations.
MS SQL also has many different editions to cater for different needs, from organization to
individual as well as scale of use. Prices also change for each edition to suit anyone who
purchases a product.
 Excellent Data Restoration and Recovery Mechanism
MS SQL server is fully aware of the importance of your data. Hence MS SQL Server contains
many sophisticated features that allow you to recover and restore the data which has been lost
or damaged. Although you cannot recover individual records but it is possible to restore
complete database using some advanced recovery tools contained in MS SQL Server database.
Why choose Microsoft SQL Server?
 Derived from large, dispersed, multi-user problem characteristics.
 MS SQL Server is a well-supported database management system with large amounts
of data, allowing users to follow the Client / Server model.
 MS SQL Server is handy in scattering fast lookup data
 MS SQL Server is strongly supported with distributed data.

2.2.5 NetBeans IDE

NetBeans IDE is an integrated development environment that is essential to software
developers, operating on various operating systems such as Windows, Mac, Linux, and Solaris.
Is an open source offering the most essential features in web applications, mobile devices, and
desktop. It is a version for modern programming languages such as Python, Ruby, JavaScript,
Groovy, C / C ++, and PHP.
Advantages
 NetBeans IDE has many integrated development modules, especially for Java.
 It has an easy to use Swing GUI design tool to build user interfaces through dragging
and dropping components, such as Buttons and Textboxes.
 It auto completed code and gives programmers a list of possible code fragments to
choose from, even as they type.
 It debugs and gives hints on optimizing code, and even inserts the right code.
 It has version control, and many other advanced tools.
Disadvantage
 NetBeans IDE is a little bit slow to load.
 Takes up more memory than lighter IDEs.
 Advanced tools and features require some training.

6
Why choose NetBeans?
The NetBeans IDE provides professional programmers and even ordinary users the love of
programming a full-featured tool to create products related to web, desktop and mobile
applications. In the most modern languages. The advantage of this software is that it supports
many different languages, many custom functions, and convenient debugging. Programming
Language Development Approach

2.2.6 Incremental model

In incremental model the whole requirement is divided into various builds. Multiple
development cycles take place here, making the life cycle a “multi-waterfall” cycle. Cycles are
divided up into smaller, more easily managed modules. Incremental model is a type of software
development model like V-model, Agile model etc.
In this model, each module passes through the requirements, design, implementation and testing
phases. A working version of software is produced during the first module, so you have working
software early on during the software life cycle. Each subsequent release of the module adds
function to the previous release. The process continues till the complete system is achieved.
Advantages of Incremental model:
 Generates working software quickly and early during the software life cycle.
 This model is more flexible – less costly to change scope and requirements.
 It is easier to test and debug during a smaller iteration.
 In this model customer can respond to each built.
 Lowers initial delivery cost.
 Easier to manage risk because risky pieces are identified and handled during it’d
iteration.

7
Diagram of Incremental model

Figure 3: Incremental model

With information on the incremental models at above. I think this to be a very suitable model
for my project and I decide approach incremental model for my project.

2.3 Responsiveness website design

2.3.1 Responsive web design overview

Responsive Web Design (RWD) is a new trend in which web design and development processes
will meet every device and user environment according to the dimensions and dimensions of
the screen of the device. To do that we will use a flexible combination of techniques including
flexible grid, responsive image and CSS media query. When users switch from their laptops to
iPads or iPhones, the site will automatically convert to fit the screen size and processing
scenarios. In other words, websites need to have auto-respected technology according to the
user's device. This will eliminate the need for many different web designs and minimize the
time as well as the cost of website design. Responsive web design makes your web page look
good on all devices (desktops, tablets, and phones).

8
 Figure 4: Responsiveness website design

2.3.2 Importance of Responsive Design

We live in an era with a large number of different devices have able to connect to the Internet.
Not only is the computer to the table anymore, but also cell phones, iPhone, iPad, BlackBerry,
laptop, television... Expected, in the following years, the number of the device the eyes in the
market with the size of the screen can connect to the Internet will increase up quickly. As
designed, the designer must take into account the hundreds of screen size different for both
horizontal screen and home screen vertical shape. With the development of technology, the web
design also changes. Previously, you can only access the web, internet on the computer or tablet
computer, but now, as the usability and flexibility are more and more popular, iPhone,
Smartphone can still surf the web comfortably. Used by many users. Therefore, the
requirements of users are also more strict, they require a beautiful site not only must run
smoothly on all devices: tablet, iPhone, laptop; On all screen resolutions from 800 × 600 to
1024 × 768, 1366 × 768...
With the advent of the mobile devices and smart phones. Then responsive design websites will
be a small advantage for businesses. Especially businesses choose the online channel to do the
main investment market.
 Research shows that 41% of smartphone users make purchases from their mobile
phones.
 90% of users switch between display devices instead of their web access.
You will lose a lot of potential customers if you do not soon give your site a responsive design.

9
In addition, it has many benefits:
 Businesses no longer have to invest separately in the mobile version, a tablet and PC
version of the same site. Responsive helps save time and money on development,
testing and maintenance
 Google is giving preference to mobile-friendly sites and this has been reflected in the
SERP rankings.
 It also supports SEO by reducing the bounce rate and increasing the website
conversion rate
Through that we have seen the importance of responsive the design of a website is. Specific
here mobile shop website

2.3.3 Responsive Web Design Framework

 Bootstrap
Bootstrap is the most popular and free JavaScript, CSS and HTML framework for
designing responsive web interfaces.
Advantages of Bootstrap
 Easy to use: Anyone with basic knowledge of HTML and CSS can start
using Bootstrap
 Responsive Features: Bootstrap contains CSS that allows for responsive
interface design that can be displayed on many different screen sizes such
as tablet, phone or desktop.
 Mobile Accessibility Prioritization: In Bootstrap version 3, mobile usage
styles are a major part of the framework.
 Compatible with different browsers: Bootstrap allows compatibility with
all current browsers such as Chrome, Firefox, Internet Explorer, Safari or
Opera.
 W3.CSS
W3.CSS is one of the great frameworks to create a responsive design. With W3.CSS,
it makes it easy to design websites that fit all sizes. From devices like desktops,
laptops to mobile devices, smartphones, tablets.
 Smaller and faster than other CSS frameworks.
 Easier to learn, and easier to use than other CSS frameworks.
 Uses standard CSS only (No jQuery or JavaScript library).
 Speeds up and simplifies web development.

10
  Supports modern responsive design (mobile first) by default.
 Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and
more.
 Provides CSS equality for all devices. PC, laptop, tablet, and mobile.

2.4 Conclusion

Having done the literature review section, all technology, tool, framework and key issues to use
in the design and implementation in the project have introduced and Has been thoroughly
researched with the main goal is to apply it to the development of mobile sales website.

11
 3 RESEARCH ON EXISTING MOBILE SALE WEBSITES

3.1 Introduction

The content in this section discuss the website mobiles sale online, specific I will compare 2
mobile sale website similar and evaluation about appearance and usability of its from that give
a big picture about business workflow and provide main requirement for building website
system.

3.2 Product 1 – Buy Mobiles https://www.buymobiles.net/

3.2.1 Overview
According to Trustpilot, Buy Mobiles has achieved 8.5 (from 0 - 10). Overall site pretty good.
Typical products are displayed at the homepage, product name and price of the product are
clearly displayed. However, there are still some weak points about product classification that
make users difficult to choose product.

Figure 5: Website buymobiles.net

12
3.2.2 Appearance
The design of the website is simple, the website is blue as the main colour, so the user is quite
comfortable to look at, the text size is suitable and user can read easily. With responsive design,
Buy Mobiles web site has suitable for different sizes. When run in mobile device the website
has automatically adjust the elements to match the phone screen. It can be said that the
appearance of the site is quite perfect.

3.2.3 Usability
- Users can choose to buy products easily
- Users can check order easy ways
- Cart and payment option very effective.
- User can enter information to checkout order easy ways

3.3 Product 2 – Swappa https://swappa.com/

3.3.1 Overview
Also a website that sells phones, but the number of products on the website is displayed a lot
more than the website offers more products such as accessories, laptops, VR devices ... can see
the scale of the site is much larger than the first website that I have introduced above.

Figure 6: Website swappa.com

13
3.3.2 Appearance
The design of the website represents simplicity but still attracts the attention of the user. Taking
the white color as mainstream and matching with a bit of green is a special highlight in the
design of the website. The main components of the website are arranged consistently with each
other eg search box, navigation bar consistent in each page.

3.3.3 Usability
- Users can find the products they need with ease with the search box at the top.
- User can register to create account and login easy ways
- Using account for management and payment
- User can use Paypal to checkout order easy and fast.

3.4 Product 3 – 3mobileshop http://www.3-mobileshop.co.uk/

3.4.1 Overview
Also a website that sells phones, however, is a web site that has a poorly designed content
layout. The overall layout of the site is confusing.

Figure 7: Website 3-mobileshop.co.uk

14
3.4.2 Appearance
Design of the site is bad. There are unnecessary redundant components, the image of the product
is not optimized, especially some products do not have pictures. The website does not have a
shopping cart design that makes the user do not know how to pay the order. It can be said that
this is a design does not achieve quality.

3.4.3 Usability
- Easily view existing products and buy it.
- Users can easily find the products they need

3.5 Conclusions
With all the data collected from the research on existing mobile sale websites, all the data will
be applied to the next section to analyze and identify the specific requirements and concluded
the claims absolutely necessary.

15
 4 REQUIREMENTS ANALYSIS

4.1 Success criteria

Concerns How to address this concern?

Security  Assure shoppers of their safety by doing the following:
 Use SSH or other protected ways of data transferring;
 Use PCI compliant hosting and complete PCI DSS certification
yourself;
 Have a secure online merchant account;
 Post trust seals on your website;
 Only ask for data necessary to complete the check-out process
Price  Provide clear pricing information on the product description page.
 Tell people how expensive taxes and delivery fees will be before
they check-out.
 Let shoppers know when you have discounts or sales by
emphasizing those words on the web page and showing old prices
against the new product price.
Navigation  Have different categories and subcategories to direct people to the
product(s) they search for.
 Use different fonts, colors or other techniques to emphasize the
navigation bar.
 Have a search box on the webpage.
 Use the keywords people search for on your product description
pages to further ease the search process.

Payment options  Allow your customers to choose convenient and secure payment
options, such as Visa, MasterCard, and PayPal
Product  Provide detailed and accurate product descriptions. Read
description ‘Successful e-Commerce Websites: Product Description Page ‘for
more information.
Reviews  Allow buyers to leave product reviews.

16
  Don’t delete negative reviews, instead you should respond to
them. Buyers should know that you always appreciate their
opinions and you will use them to work on improving your
products/services.
Check-out  Minimize the number of clicks during check-out process.
process  Don’t ask buyers to provide unnecessary information to complete
check-outs. Don’t waste their time!
 Provide an option to save payment information in the customer’s
profile to make the check-out process faster next time.
Images  Read our archived blog post, titled ‘Successful e-Commerce
Websites: Product Description Page’.
Customer  Provide clear contact information.
service  Provide 24/7 online/phone customer support.
 Have enough people to handle customers’ help requests.
 Have an easy-to-access data system with information about each
product, customer and purchase.
 Be polite and react quickly to any questions or requests from
customers.
Personalization  Make sure your hosting platform provides good personalization.
One of the leading e-Commerce software that provides excellent
personalization is Oracle/ATG Web Commerce.
Range of  Clearly, buyers want options to choose from. For instance if you
products sell shoes, offer different types of the product (e.g. sneakers,
boots, heels, etc.), different colors, sizes and/or brands.
Social sharing  Add ‘like’, ‘follow us’, and ‘share’ buttons on your e-Commerce
functions website.
 Have promotions linked to followers of social media such as
special discount codes.
Page load time  Find a hosting provider that can sustain high traffic to your
website and promises good page load time.
 Use Content Delivery Network (CDN).

17
  Don’t overload your web pages with ‘heavy’ elements
(unnecessary audio, video files, etc.). It slows down load time,
and makes the website harder for customers to use.
Mobile shopping  Read our archived blog posts titled ‘How to Make Your Website
Mobile Friendly’ and ‘Mobile Web Performance: M Dot versus
Responsive Web Design’ for more information.

4.2 Functional specification

Functional requirements
In my website will:
 Provide information about the phone number for guests and members.
 Providing information related to the phone manufacturer.
 Providing information of the phone functions for guests and members.
 Get opinions from members and to increase the quality of service for the store.
 Gives administrators the ability to manage members.
 Gives administrators the ability to update device information quickly and accurately.
Function of Members:
 Login to the system
 Logout the system
 Change personal information
 Search product
 Add product to cart
 View cart
o Delete product in cart
o Update your cart
 View product
 View product details
 Create an order
Function of Guest:
 Register account
 Search product
 View product details

18
 Function of Admin and Staff:
 Login to system
 Manager Staff (Only Admin has function)
 Add / Edit / Delete products.
 Manager order.
 Manager user
 Invoice processing.
 Remove members.
 Manager comment
 Check information, reply to comment.
 Delete comment.
Non-functional requirements:
- Design user interface with responsive web design
- Security confidential data
- Page loading speed

4.3 Performance Requirements

 The Physician software should be able to support at least three simultaneous users.
 95% of the transactions shall be processed in less than one second.
 Data should be secured and backed up every quarter hour.
 Power supply should have a backup and a disaster recovery plan.
 System should be operable 24 hours a day and accessible in real-time.
 Encryption will Enable Security

4.4 Safety Requirements

The Database may get crashed or damaged due to some viruses or operating system
requirements. Therefore it is mandatory to have backup for your data. Ups/inverter facility
should be there in case of power failure.

4.5 Security Requirements

 System will use secure Database

 Staff can just see the products & mark their attendance .They cannot edit or modify
anything except their personal information.
 Proper user Authentication Will be provided.

19
  There should be separate account for Admin &user. So that no one else can access the
database except Admin.

4.6 Requirement Hardware / Software

Server
Hardware:
 1.0 GHz x86 Processor or faster.
 1.4 GHz x64 Processor, AMD Opteron, AMD Athlon 64, Intel Xeon with Intel
EM64T support, Intel Pentium IV with EM64T support or faster.
 GB RAM. Recommended 2.0 GHz or faster.
 GB of Hard disk free.
 Screen require VGA at least 1024x768 pixel resolution or higher.
Software:
 Windows 7 32 or 64-bit. Recommended at least Windows Server 2003.
 Windows Installer 4.5 or a later version.
 SQL Server 2008 or a later version.
 Netbeans 7.4 or later.
 JDK 1.7 or later.

Client
Hardware:
 1.0 GHz x86 Processor or faster.
 1.4 GHz x64 Processor, AMD Opteron, AMD Athlon 64, Intel Xeon with Intel
EM64T support, Intel Pentium IV with EM64T support or faster.
 GB RAM. Recommended 2.0 GHz or faster.
 GB of Hard disk free.
 Screen require VGA at least 1024x768 pixel resolution or higher.
Software:
 Windows 7, 8, 8.1 32 or 64-bit. Recommended at least Windows Server 2003.
 Windows Installer 4.5 or a later version.
 Internet Explorer, Chorme, Firefox…

20
4.7 Use cases diagram

Member

Figure 8: Use case diagram of Member

21
Guest

Figure 9: Use case diagram of Guest

22
Register
Use case name Register
Brief Description Use-case for actor sign up to become a member of the store.
Actors Member, Guest
Preconditions None
Main Flows 1. Actor select the "Register".
2. The system displays the member registration.
3. Actor fill in the information: login name, password, confirm password,
address, email, phone number.
4. Actor select button "register".
5. The system stores all the information the actor has just confirmed to the
database
6. The system displays the member screen.
Post conditions There must be a message to tell the actor whether the actor's registration status
has been completed.
Must go to the login interface successfully.
Alternative flows If the actor does not fill in the required information, the system will not register
and will be required to complete this information.

View detail product

Use case name View detail product
Brief Description This use case allows the actor to view details of product.
Actors Member, Guest
Preconditions None
Main Flows 1. Actor choose a phone.
2. The system will find in the database the information corresponding to the
product that the customer has selected: product name. brand name, price,
picture illustrations, model type...
Post conditions None
Alternative flows None

23
Login
Use case name Login
Brief Description This use case allows the actor to log into the system as a customer.
Actors Member
Preconditions Actor has logged into the system
Main Flows 1. Actor selects the "Login".
2. Form display system includes username and password.
3. The system looks in the database for actor information corresponding to
the login username and password and displays that information.
4. Actor enter username and password.
5. Actor select login
6. The system checks the username and password, validates the credentials
and allows the actor to log into the system as a customer
Post conditions The system will announce whether the login is successful or not.
Alternative flows If the actor enters the username and password incorrectly, the system will
report an error.

Search product
Use case name Search product
Brief Description This use-case allows the actor to find a product in the catalog.
Actors Member, Guest, Admin, Staff
Preconditions None
Main Flows 1. Actor enter product name or product information to find.
2. Actor selects the search form.
3. Actor chooses to initiate the search process.
4. The system searches the database for products with identical or nearly
identical names that the actor has entered.
5. System displays the products found.
Post conditions The product be found must display.
Alternative flows If product is not found then the system will inform the actor not to find the
product.
The system will return to the top of the use case.

24
Change personal information
Use case name Change personal information
Brief Description This use case allows actor editing of personal information
Actors Member
Preconditions Actor has logged into the system
Main Flows 1. Actor chooses to edit personal information.
2. The system identifies the actor's account name and password is being
accessed.
3. The system looks in the database for actor information corresponding to
the login username and password and displays that information.
4. Actor corrected the information
5. Actor select "update" or "cancel"
Post conditions The system must display a message telling the actor whether the edit process
was successful or not.
Alternative flows If the actor chooses to "update" the system will update the information the
actor has just edited into the database.
If the actor chooses "cancel" then the use case will end.

View product
Use case name View product, Guest
Brief Description This use case allows the actor to view all the products in the catalog.
Actors Member
Preconditions None
Main Flows 1. Actor choose a phone brand.
2. The system will get the code that the actor is selecting.
3. The system displays the products of that phone brand.
4. Actor chooses products that the actor is interested in.
5. The system identifies the selected product.
6. The system of obtaining the products of a selected telephone company.
7. The system displays all the phone companies that the actor is visiting.
Post conditions None
Alternative flows Actor can view product details or add selected products to the cart

25
Add product to cart
Use case name Add product to cart
Brief Description This use case allows creation of shopping carts for customers.
The shopping cart will contain the product that the customer chooses to
purchase.
This shopping cart will exist from when the customer selects "add on" until
the customer leaves the store.
Actors Member
Preconditions Actor has logged into the system
Main Flows 1. Actor selects the "add" button that exists under each product
2. The system get the "product code" has just been selected actor.
3. System retrieve customer information (customer code)
4. The system to find the shopping cart code already exists in the system.
5. If the cart has not been created
- The system creates a shopping cart code
- The system stores information in the database: shopping cart code,
customer code, product code, product number, date of
implementation.
6. If the cart is available
The system stores information in the database: shopping cart code, customer
code, product code, product number, date of implementation.
Post conditions None
Alternative flows Customers are not registered members, when the customer press "Add" button,
the system requires customers to register as a member or member registration.
When the customer completes the procedure, the use case is considered as
finished.

26
Create order
Use case name Create order
Brief Description This use case allows the actor remove the product contains in shopping cart
Actors Member
Preconditions Actor has logged into the system.
Shopping cart must exist at least one product
Main Flows 1. Actor select the "create order" function.
2. The system displays a form that requires the actor to enter the actor's
credentials, then the system loads the client's information into the form.
3. Actor fill in the requested information: full name, email address, telephone
number
4. Actor select "Order" or "Cancel"
Post conditions The system must display a message telling the actor what to do next after
ordering.
If the order fails the system must display a message.
Alternative flows 1. If the actor chooses to order, the system verifies the information from
session about the shopping cart and customer, the information from the buyer
purchase order, and saves the database. Then the system generates the orders
corresponding to the products in the cart and saves the order information to
the database.
2. If the actor chooses to exit, the use case ends.
3. Actor can view the shopping cart as soon as the order form to confirm the
information about the product that the actor wants to order.
4. Actor can edit quantity of product or remove any product in the cart.
5. If the actor does not fill in the recipient's information, the system will
prompt the agent to enter the information before clicking on the "create order"
button.
6. Buyer-defined system information is passed to the form without the need
for an actor to enter.
7. If the recipient is the buyer, the actor can easily pass the information from
the buyer to the receiver without having to enter.

27
View cart
Use case name View cart
Brief Description This use case allows the actor to view his shopping cart details.
Actors Member
Preconditions Actor has logged into the system
Main Flows 1. The system retrieves the shopping cart code that exists in the system as
session or cookies.
2. The system searches in the database and compares it with the shopping
cart code that has just been retrieved and displayed with the product
information: product name, product price, quantity, amount…
Post conditions None
Alternative flows If the customer is not a member, the system will display the registration
required for the actor to register the member.
When the actor registration is complete, use - case is considered as finished.

28
Update cart
Use case name Update cart
Brief Description This use case allows actor update the quantity of product in your shopping
cart
Actors Member
Preconditions Shopping cart must exist.
There are no products in your cart.
Main Flows 1. Actor selects the "Update" function for a product in the cart.
2. The system code for the product was chosen by the actor in the cart.
3. The system takes information about the actor
4. The system to retrieve the shopping cart code in the system exists in the
form of Session or Cookies
5. System find the information in the database corresponding to the shopping
cart code, product code, customer code.
6. The system will display the shopping cart with the item number in the
"edit" form at the item in the cart that the actor chooses to "update"
7. Actor updated item number.
Post conditions Shopping cart must be shown again at the status of the status being updated.
Alternative flows The system will update the code corresponding to the customer code, product
code, shopping cart code in the database.

29
Delete product in cart
Use case name Delete product in cart
Brief Description This use case allows actor update the quantity of product in your shopping
cart
Actors Member
Preconditions Shopping cart must exist.
There are no products in your cart.
Main Flows 1. Actor selects the "Delete Item" function for a product in the cart
2. The system code for the product was chosen by the actor in the cart.
3. The system retrieves information about actor (customer code)
4. The system get the shopping cart code in the system exists in the form of
Session or Cookie
5. Find the corresponding product code and delete it
6. The system displays the shopping cart in a new state
Post conditions Shopping cart must be shown again at the status of the status being updated.
Alternative flows None

30
Admin

Figure 10: Use case diagram of Admin

31
Staff

Figure 11: Use case diagram of Staff

32
Admin, Staff login
Use case name Login
Brief Description This use case allows logging into the system as the administrator and the
staff
Actors Admin, Staff
Preconditions None
Main Flows 1. Actor selects the "Login"
2. The form display system consists of a login name and password
3. Actor select login
4. The login and password verification system, confirmed to be true, allows
an actor to log into the system as an administrator and employee.
Post conditions The system notifies the login success or failure.
Alternative flows If the actor enters the username and password incorrectly, the system
notification username and password incorrect.

Manager staff
Use case name Manager staff
Brief Description This use case allows the actor to view, add new staff.
Actors Admin
Preconditions Login to system
Main Flows 1. System display all staff.
2. Actor can add new staff.
3. If the actor add new staff successful, the system will create new account
for new staff.
Post conditions None
Alternative flows None

33
Manager brands
Use case name Manager brands
Brief Description This use case allows the actor to view, browse, add, edit and delete brands.
Actors Admin, Staff
Preconditions Login to system
Main Flows 1. System display brands
2. The system supports brands search or filtering by brands
3. Actor can filter unapproved, approved brands
4. The system supports the actor to browse the brands and update the
database
4. If the actor chooses to delete the brands, the system will delete the brands
in the system
Post conditions None
Alternative flows None

34
Manager Order
Use case name Login
Brief Description This use case allows the actor to view, update status all order of customer.
Actors Admin, Staff
Preconditions Login to system
Main Flows 1. System display all order in system
2. The system supports search each orders.
3. Actor can filter orders and update status.
4. The system supports the actor update status of orders.
4. If the actor chooses updated status of orders system will update orders the
product in the system.
Post conditions None
Alternative flows None

4.8 Summary

The requirements were clearly and sufficiently analyzed to prepare for the next phase

35
 5 DESIGN

5.1 Architectural Design

5.1.1 System Context Diagram

Figure 12: System context diagram

5.1.2 Data flow diagrams

The Data Flow Diagram (DFD) is a tool that describes the interrelationship between jobs. Below
is DFD of system.

36
Figure 13: Data flow diagram of system

37
Figure 14: Data flow diagram of system

38
5.1.3 Workflow diagram

Figure 15: Workflow diagram of system

Process 1: When the home page is displayed, customers can view products with category pages,
which may coincide with the product name, but only the administrator can distinguish which
product belongs to the phone brand.
Process 2: Once customer have selected the product, the customer will enter the cart.
Process 3: In your shopping cart, you can update the quantity, add or remove the product you
want.
Process 4: Customers will make an order after deciding on the products that are in the cart
Process 5: The transaction will end when the customer successfully orders.

39
5.1.4 Sequence diagram
Sequence Diagrams are interactive means of visual representation, focusing on the order of
execution.
User
 Add user

Figure 16: Sequence diagram add user

40
 Edit User

Figure 17: Sequence diagram edit user

 Delete User

Figure 18: Sequence diagram delete user

41
Product
 Add Product

Figure 19: Sequence diagram add product

 Edit Product

Figure 20: Sequence diagram edit product

42
  Search Product

Figure 21: Sequence diagram search product

Orders
 Create order

Figure 22: Sequence diagram create order

43
  Edit order

Figure 23: Sequence diagram edit order

Staff
 Add Staff

Figure 24: Sequence diagram add staff

44
 Edit Staff

Figure 25: Sequence diagram edit staff

 Delete Staff

Figure 26: Sequence diagram delete staff

45
Comment
 Add Comment

Figure 27: Sequence diagram add comment

 Edit Comment

Figure 28: Sequence diagram edit comment

46
 Delete Comment

Figure 29: Sequence diagram delete comment

47
5.2 Database design

5.2.1 Entity Relationship Diagram

Figure 30: Entity relationship diagram of system

Table Users

Table ProductBrands

48
Table ProductRatings

PRatingID

PRatingStar ProductRatings PID

PUserEmail

Table ProductPhotos and ProductColors

49
50
Table Products

PBatteryCapacity
PPromotion PCameraVideo

PStatus

PCameraPrimary
POtherInfo PCameraSecondary
PEmp

PID PMemoryRAM

PSKU PMemoryInternal

PDateImport Products PMemoryCardSlot

PBrandName PPlatformCPU

PName PPlatformChipset

PNewPrice
PPlatformOS

POldPrice P3G PDisplaySize

P4G PSim PSimType PDisplayResolution

Table ProductComments

ProCommentID

ProDate ProductComments ProductID

ProComment UserEmail

51
Table Orders

OrderDate OrderPhone

OrderID OrderState

Orders

OrderUserEmail OrderCity

OrderShipName OrderStatus OrderShipAddress

Table OrderDetails

DetailAmount DetailQuantity

DetailOrderID OrderDeltails

DetailProductID DetailName DetailPrice

52
Table Contact

5.2.2 Table Description

Table Colunm Name Data type Key Constraints Description

UserEmail nvarchar Primary Key Not null Identity(1,1)
UserPassword nvarchar Not null
UserFirstName nvarchar Not null
UserLastName nvarchar Not null
UserBirthDate nvarchar Not null
UserSex nvarchar Not null
User UserPhone nvarchar
UserFax nvarchar
UserAddress nvarchar
UserPhoto nvarchar
UserQuestion nvarchar
UserAnswer nvarchar
UserIDLevel int

53
 PBID int Primary Key Not null Identity(1,1)
PBName nvarchar
ProductBrands
PBLogo nvarchar
PBInfo nvarchar

PID int Primary Key Not null Identity(1,1)

PSKU nvarchar Not null

nvarchar Not null

PDateImport
PBrandName nvarchar Not null

PName nvarchar Not null

PNewPrice int Not null

POldPrice int
P3G nvarchar
P4G nvarchar
PSim nvarchar
PSimType nvarchar
PDisplayResolution nvarchar
Products
PDisplaySize nvarchar
PPlatformOS nvarchar
PPlatformChipset nvarchar
PPlatformCPU nvarchar
PMemoryCardSlot nvarchar
PMemoryInternal nvarchar
PMemoryRAM nvarchar
PCameraPrimary nvarchar
PCameraSecondary nvarchar
PCameraVideo nvarchar
PBatteryCapacity nvarchar
PPromotion nvarchar
POtherInfo nvarchar
PStatus nvarchar
PEmp nvarchar

54
 PColorID int Primary Key Not null Identity(1,1)
PID int Foreign Key Not null Foreign form
ProductColors Products
PColorName nvarchar
PColorHex nvarchar
PPhotoID int Primary Key Not null Identity(1,1)
PID int Foreign Key Not null
ProductPhotos
PPhotoPath nvarchar Not null
PPhotoDes nvarchar
PRatingID int Primary Key Not null Identity(1,1)
PID int Foreign Key Not null Foreign form
ProductRatings Products
PUserID nvarchar Foreign Key Not null Foreign form
Users
PRatingStar int
ProCommentID int Primary Key Not null Identity(1,1)
ProDate nvarchar
Product ProComment nvarchar
Comments ProductID int Foreign Key Not null Foreign from
Products
UserEmail nvarchar Foreign Key Not null Foreign from
Users

55
 OrderID int Primary Key Not null Identity(1,1)

OrderUserID int Foreign Key Not null

OrderShipName nvarchar Not null

OrderStatus nvarchar
Orders Not null
OrderShipAddress nvarchar
OrderCity nvarchar
OrderState nvarchar
OrderPhone nvarchar Not null

OrderDate nvarchar
Foreign form
DetailOrderID int Primary Key Not null
Orders

Not null Foreign form

DetailProductID int Foreign Key
Products
DetailName nvarchar
OrderDeltails
DetailPrice nvarchar
DetailColor nvarchar
DetailQuantity nvarchar
DetailAmount nvarchar

ContactID int Primary Key Not null Identity(1,1)

ContactName nvarchar Not null
ContactEmail nvarchar Not null
Contact
ContactPhone nvarchar Not null
ContactComment nvarchar Not null
ContactDate nvarchar Not null

56
 Description table Products: The Products table contains all the information related to a
product. In website will display all information contained in this table.
 Description table OrdersDetails: In this table we can see the number of products
ordered and the total amount of money the customer has to pay.
 Description table Orders: After the customer placed a purchase order. All information
related to the customer will be saved. Then customers pay the money, the product that
will be ordered to be delivered to the place thanks to the information that the customer
has left.
 Description table Contact: All inquiries and contributions to the customer's website are
recorded in this table. All comments and contributions will be reviewed and resolved by
the management.
 Description table Users: The Users table is a table for customers and admins. In this
table will save all the information of the account. When the administrator wants to go to
the admin page, then through the login process can enter the admin page, while
customers want to buy the previous product. Have an account or will have to register
your account. Then users only need to enter Username and Password will be able to buy
the product. If the user does not have an account but login, the system will report an
error.
 Description table ProductBrands: In this table will see all the manufacturers and some
information about that manufacturer.
 Description table ProductColors: In this table will store information about color for
each product.
 Description table ProductPhotos: In this table will store all image of product.
 Description table ProductComments: This table will store user comments for products
on the website.
 Description table ProductRatings: This table will store user ratings for each product
available on the website.

57
5.3 Interface Designs

Interface designs have been developed to produce an indication of the system look and feel.
This will allow the stakeholders to view the designs and would allow them to sign off any
designs to ensure that they agree with the look and feel of the system.

5.4 Navigational Structure Diagram

A navigational structure has been used show the routes that a user can use to navigate through
the system. Entry to the system will begin at the login form on every occasion; the home
switchboard then becomes the main navigational point of the system. The administrator
switchboard will hold links to forms that allow maintenance to the system; this form is only
accessible when an administrator username and password is used to access the system.

Homepage

Second Layer
Home
Third Layer

Fourth Layer

Gallery Purchases About us Register/Login News Contact us

Categories/ Confirm
Product Mail to password RSS
Enquiry form
subscribe

Add to cart
Login Thankyou

checkout Registration

Order form

Thankyou

58
 6 DEVELOPMENT

6.1 Database Implementation

From information about database of system has description above, based on Entity Relationship
Diagram(ERD), table design. All the table with data structure was implement completely by
using Microsoft SQL Server. Below the list of table that was created.

And here is screen shot of Database Physical

Figure 31: Database diagram

59
Screen shot some table has insert data:
ProductBrands table:

Products table:

Users table:

60
SQL Script to create table:

61
62
63
6.2 Back- End Implement

Back- End be developed on JavaServer Pages technology and I used NetBeans IDE is tool to
do that. Below is the structure of file project.
Java will be used for development from end of the system and it will work with latest version
Java SE7, and onward edition

64
Source Packages folder:
Folder
controller  CommentController.java
 ContactController.java
 FileUploadServlet.java
 LoginServlet.java
 OrderController.java
 ProductBrandsController.java  ProductsController.java
 ProductColorsController.java  UserServlet.java
 ProductFlashUpload.java
dao  AbstractFacade.java
 ContactFacade.java
 OrderDeltailsFacade.java
 OrdersFacade.java
 ProductBrandsFacade.java
 ProductColorsFacade.java
model  Contact.java
 OrderDeltails.java
 Orders.java
 ProductBrands.java
 ProductColors.java
Class
 ProductPhotosController.java
 ProductPhotoUpload2.java
 ProductPhotoUpload3.java
 ProductPhotoUpload4.java
 ProductRatingController.java
 VerifyRecaptcha.java
 ProductCommentsFacade.java
 ProductPhotosFacade.java
 ProductRatingsFacade.java
 ProductsFacade.java
 UsersFacade.java
 ProductComments.java
 ProductPhotos.java
 ProductRatings.java
 Products.java
 Users.java

Libraries folder
- JSTL 1.2.2 - jstl-impl.jar
- JSTL 1.2.2 – jstl-api.jar
- EclipLink(JPA 2.1)- eclipselink.jar
- EclipLink(JPA 2.1)-javax.persistence_2.1.0.v201304241213.jar
- EclipLink(JPA 2.1)-org.eclipse.persistence.jpa.jpql_2.5.1.v20130918-f2b9fc5.jar
- commons-fileupload-1.2.2.jar
- commons-io-2.2.jar
- cos.jar

65
 7 EVALUATION

7.1 Testing

Test ID Description Expected Results Actual Results

1
2

7.2 Product evaluation

Website mobile shop online is basically finished and perform tests at the level of programming.
Basically website meets the needs set out in product management, user and related information.
Website has done the most basic functions, such as: Giving information products, helping users
can purchase at the website quickly and easily, perform a search of products, which can update,
add new products, giving details of the user order.

66
8 CONCLUSION

67
 REFERENCES

www.tutorialspoint.com. (2017). MS SQL Server Tutorial. [online] Available at:

https://www.tutorialspoint.com/ms_sql_server/index.htm [Accessed 24 Apr. 2017].

Netbeans.org. (2017). NetBeans IDE 7.4 Release Information. [online] Available at:
https://netbeans.org/community/releases/74/# [Accessed 24 Apr. 2017].
InfoTech101. (2017). The NetBeans IDE: Pros and Cons. [online] Available at:
http://infotech101.com/the-netbeans-ide-pros-cons/ [Accessed 24 Apr. 2017].

68
 APPENDIX A - Project Proposal

Undergraduate Final Year Project Proposal

Developing online mobile sales website with responsive design

Student Name: PHAM DONG NHUT

Bachelor of Science with Honours in Computing

Banner ID: 000962912

69
Contents
1 Overview .......................................................................................................... 71
2 Aim ................................................................................................................... 71
3 Objectives ......................................................................................................... 71
4 Legal, Social, Ethical and Professional ............................................................ 72
5 Initial References .............................................................................................. 73

70
1 Overview

Nowadays with the continuous development of the internet, you can sit at the excursion from
this shop in another virtual store in the virtual space is no longer the scene in the fiction movie,
which has become a reality. With to e-commerce websites, people can easily choose and buy
any product they want. Build an ecommerce website that has all the functionality to help people
shop there. The goal of our project is to develop a system which is accessible through internet
and provide a virtual shopping environment to a customer and the product will be on sale here
is smartphone. The application is prepared for a store which consist con different departments
and branches. On completion of the product it will be host on the web and the store
administration will maintain database and day to day updates. The customer details will
automatically store in the database on each transaction and the product database is also updated.
The application will consists on multiple data screen according to the level of the user. When
an entry made into the database automatically multiple reports will be generated for security
reasons and auditing. The customer can choose a single or multiple products and can add it into
shopping chart. In the next step customer will provide their postal and financial details in order
form and a product will be shifted in the mention delivery time. The merchant have full access
to the system and can manage product listing, prices and so on. In this project, I will firstly
focus on investigation about JSP technology learn about the database to apply for my website.
Find out Integrated Development Environment (IDE) for development my website. Secondly,
learn about content and UI design for website. Finally, a review is taken to check out whether I
match my objectives.

2 Aim
Main aim of my project is development e-commerce website to sell mobile phones.

3 Objectives

3.1 Knowledge of development JavaServer Pages

3.1.1 Find out definition, basic programming concepts and components of a website
3.1.2 Find out Integrated Development Environment (IDE) for website development
3.1.3 Evaluate the ecommerce site similar
3.2 Investigation of Microsoft SQL Server
3.2.1 Look for information about Microsoft SQL Server
3.2.2 Learn carefully about components of a Microsoft SQL Server

71
 3.2.3 Study basic query in Microsoft SQL Server.
3.3 Research about security in online shop online website.
3.3.1 Research the roles of users within the system
3.3.2 Investigate the various levels of users within the website
3.3.3 Research about transaction in shop online website
3.4 Implementation of the website
3.4.1 Design functions in website
3.4.2 Design website interface
3.4.3 Implement the website
3.4.4 Test and fix bugs in website.
3.5 To critically evaluate the website
3.5.1 Carry out a critical evaluation.
3.5.2 Improved after careful evaluation

4 Legal, Social, Ethical and Professional

Legal:
 JavaServer Pages (JSP) is a technology that helps software developers create
dynamically generated web pages based on HTML, XML, or other document types.
 JavaServer Pages (JSP) released in 1999 by Sun Microsystems.
 This project is belong to me and University of Greenwich
 Other materials which are used in my project will come from free sources or legal
copies.
Social:
 My website which is used for example will not relate to social evils.
Ethical:
 This project is my own effort.
 Don’t have plagiarism in the project.
Professional:
 Not disclose or authorise to be disclosed, or use for personal gain or to benefit a third
party, confidential information except with the permission of University of Greenwich,
or as required by Legislation.
 Respect and value alternative other perspectives, seek and accept honest criticisms
about my work.

72
  Avoid any situation that may rise to a conflict of interest between me and relevant
authority.
(Trustee Board Regulations Schedule 3 v4, 2011)

5 Initial References

[1] En.wikipedia.org. (2017). JavaServer Pages. [online] Available at:

https://en.wikipedia.org/wiki/JavaServer_Pages [Accessed 24 Apr. 2017].
[2] Oracle.com. (2017). Java Technologies for Web Applications. [online] Available at:
http://www.oracle.com/technetwork/articles/java/webapps-1-138794.html [Accessed
24 Apr. 2017].
[3] Anon, (2017). [online] Available at: http://www.bcs.org/upload/pdf/conduct.pdf
[Accessed 24 Apr. 2017].

73
APPENDIX B - Project Schedule

74
 APPENDIX C - Test case for design

Questionnaire to rate each section of the design for the four criteria above on a scale of 1-5.

Evaluation Scale to
No. Question to rate Answer
criteria achieve

1 Product information is accurate and reliable? Yes 5

Quality of 2 The information is primary source or not? Yes 5

informational Is the information presented in an interesting
content 3 manner, but not so creatively as to obscure its Yes 3
meaning?

4 Is the information updated often? Yes 3

5 Are the graphics clear and easy to understand? Yes 4

6 Are the audio and video components high quality? Yes 5

Quality of
Is the graphic and multimedia content likely to
graphic and 7 Yes 3
attract and appeal to young people?
multimedia
8 Does it load quickly? Yes 4
content
9 Is it viewable in different browsers? Yes 3

10 Is it viewable in different operating systems? Yes 4

11 Is the overall site design pleasing? Yes 4

12 Is the design likely to appeal to most young people? Yes 3

Are the individual pages so long that excessive

13 Yes 4
scrolling is necessary?
Quality of Is the text easy to read (based on font appearance,
14 Yes 5
general design size, and color)?

15 Are there a relatively large number of links? No 2

Is there a relatively low percentage of advertising

16 Yes 4
content?

Does the site include much graphic and multimedia

17 Yes 3
content, or is it primarily composed of plain text?

75
76