Information Systems E-commerce Website Project Report

This report documents the development of an e-commerce website, detailing its features, technologies, and design choices. The website, designed for selling clothes, incorporates features such as product display, add-to-cart functionality, a shopping cart, email subscription, product ratings and reviews, product filtering, customer account creation, and order tracking. The front-end utilizes HTML5, CSS3, Ajax, and jQuery, while the back-end employs PHP and MySQL for database management. The report highlights the use of HTML elements, including header, main, article, footer, nav, aside, img, and table. It explains the application of Ajax for interactive forms, CSS3 for presentation, jQuery for simplified coding, and PHP for server-side scripting. The report also discusses the application of float properties and flexbox layout techniques. Furthermore, it emphasizes usability aspects such as learnability, efficiency, and error handling, along with accessibility considerations for a positive user experience. Appendices provide visual examples of key features and source code snippets.

Name of University
Information Systems Project
Student Name
Course Name
Submission Date

Table of Contents
Introduction......................................................................................................................................3
The software....................................................................................................................................3
Features........................................................................................................................................3
Development technologies...........................................................................................................4
HTML elements used..................................................................................................................4
Layout techniques........................................................................................................................6
Usability and accessibility...........................................................................................................6
Appendix..........................................................................................................................................8
1. Home page.....................................................................................................................8
2. Add to cart.....................................................................................................................8
3. Cart................................................................................................................................9
4. Email subscription.........................................................................................................9
5. Product rating / review and Comment.........................................................................10
6. Products filtering.........................................................................................................10
7. Create account.............................................................................................................11
8. Login...........................................................................................................................11
9. Track order..................................................................................................................12
10. Adding Item to cart source code..................................................................................12
11. Cart Source code.........................................................................................................13

Introduction
This report demonstrates my experience in software development. The report also explains
usability, accessibility, HTML elements and layout techniques have been used in the
implementation of this website. In addition, the report explains the choice of the back-end
programming language as well as the choice of the database.
The software
The software in question is an e-commerce website for selling clothes.
Fig 1 showing the e-commerce application home page
Features
The application has products display page, add to cart function, shopping cart with add, update
and remove cart items, email subscription function, products rating, products review and
commenting, filtering products based on certain category, customer accounts creation, customers
login to track their orders and sending email function using PHP mail in the contacts form.
(features shown in appendix)

Development technologies
The application has been developed using HTML5, CSS3, Ajax and JQuery for the front-end and
PHP for the back end and MySQL for database management.
HTML elements used
Html elements define the function and category of a web text. These element tags make the
website appear a lot more refined, complete and professional. The following HTML5 elements
are used in this application development;
i. Header: Describes a header of the website. Users can always see the header at the top
of a web page.
ii. Main: This indicates space that has been set for the most important content of a
webpage
iii. Article: This is used to outline the article content on the website which is mainly large
parts of text.
iv. Footer: Describes the footnote for the website.
v. Nav: Indicates the space for navigation links on the website.
vi. Aside: Outlines the information which is to be put to the side of a webpage. This is
also used for creating sidebars and also for presenting content with minimal important
on a webpage.
vii. Img: Describes an area for an image
viii. Table: This element shows a table with rows and columns on a web page. It is a very
useful for grouping large amounts of data.

Fig 2 showing HTML elements used in the application
Ajax (Asynchronous JavaScript and XML) has been used to create interactive forms. This allows
pages to be updated asynchronously with the back-end application. CSS3 has been used to
describe the pages presentation i.e. layout and fonts behaviours and also presentation of the
application in different user devices like phones, desktops and tablets. JQuery has been used
because it makes coding simple, concise and reusable. It also handles DOM events like on click,
on change, and on submit. In addition, JQuery performs animation and provides support for
Ajax. PHP (Hypertext Pre-processor) is among the commonly used server-side scripting
language that is usually suitable for web development and can be embedded into HTML. It is
also very easy to learn and does not need compiling. PHP scripts can only be interpreted on a
server that has PHP installed for example, wamp or Xamp server. MySQL database is a
relational database management system this is based on SQL (Structured Query Language). It is
the commonly used database management tool for web application. This is because MySQL is
open source which reduces the cost of ownership, has high performance, has complete

transactional support and has built in data security. MySQL is also buddle with Wamp or Xamp
web servers.
Layout techniques
This application has employed two layout techniques –float properties and flexbox. CSS float
property is easy to learn but they are tied to the webpage flow which limits flexibility of the
webpages. For example the menu bar is floated to the right. Flexbox or CSS Flexible Box Layout
Module guarantees that elements work predictably when the webpage layout must accommodate
different screen sizes and different display devices. Even though flexbox layout does not work
in IE10 and earlier, it is very good when design a website with "mobile first" approach.
Fig 3 showing the application layout on mobile deveices
Usability and accessibility
Usability entails designing a website or a system that is effective, efficient, and satisfying.
Usability encourages a user centred design that creates a positive user experience. The following
aspects of usability have been implemented in the design of the website.
i. Learnability: Basic navigations are clearly labelled. Menu names are also labelled in
simple language making it needless for all users to understand at the first glance.

Fig 4 showing application menu bar
ii. Efficiency: The website was developed using a “mobile first” approach whereby I
defined what I want on mobile and then scale up from there to desktop versions. This is
shown in Fig 3 above
iii. Errors: Errors are mainly caused by user inputs. This website does not require any user
input thus eliminating errors. The application notifies users immediately there is an error
or a system feedback. For example when an item is added to cart, the user gets a
notification that the item has been added to cart. In addition, when a user makes an error
while entering in the input field, there is an immediate notification.
Fig 5 showing a system notification and input error notification
Accessibility is all about making sure there is an equivalent user experience for all users. In this
application design, accessibility has been implemented by making sure that the application is
responsive to different devices.

Appendix
1. Home page
2. Add to cart

3. Cart
4. Email subscription

5. Product rating / review and Comment
6. Products filtering

7. Create account
8. Login

9. Track order
10. Adding Item to cart source code