Developing an E-Commerce Website

Syed Emdad Ullah, Tania Alauddin and Hasan U. Zaman

Department of Electrical and Computer Engineering
North South University
Dhaka, Bangladesh
em5_11@hotmail.com, taniaalauddin@gmail.com, hasan.zaman@northsouth.edu

Abstract— In this era of internet, e-commerce is growing by perform free online registration. Can search a specific product
leaps and bounds keeping the growth of brick-and-mortar of his/her interest. Can order online the payment method is
businesses in the dust. In many cases, brick-and-mortar currently the “Cash on delivery” method. The administrator
businesses are resorting to having a counterpart which is internet possesses the only right to add any product, update its price or
or e-commerce driven. People in the developed world and a
delete any product. Can promote small or big advertisements
growing number of people in the developing world now use e-
commerce websites on a daily basis to make their everyday and delete any specific advertise as well. Customers can
purchases. Still the proliferation of e-commerce in the under- update their personal information at any time. After logging in
developed world is not that great and there is a lot to desire for. to the system the customers can order whatever they want
This paper outlines different aspects of developing an e- without giving their billing information again and again. In
commerce website and the optimum solution to the challenges this website products are organized based on categories and
involved in developing one. It consists of the planning process, brands. Customer can enjoy the detail view of any product by
which starts with determining the use case, domain modeling and just panning cursor over the product image in the product
architectural pattern of the web application. The entire details section. The website also inherits automated inventory
development process is primarily divided into two parts: the
system. So, whenever a customer buys a product it is
front-end development and the back end development. The
database design is also discussed with an emphasis on its automatically being deducted from the inventory system & if
relational connectivity. This no-nonsense method of developing any product becomes less than five in quantity then
an e-commerce website can be easily replicated and followed in automatically e-mail should be delivered to the admin and
developing e-commerce websites in the developing and under- supplier. Moreover if any product becomes out of stock then
developed countries where computing resources are scarce and no customer would be able to buy that product.
expensive because of their socio-economic condition.
III. THE PLANNING PROCESS
Keywords— domain modeling; e-commerce; model view
Our goal was to develop a web application that would be
controller; object oriented programming; online shop
attractive enough, have a professional look and user friendly.
So that people of all age groups would be its end users. Our
job started with subdividing the entire task and setting
I. INTRODUCTION milestones. The milestones would be a marker of percentage of
Electronic commerce or e-commerce refers to a wide range the work actually accomplished and success story. The entire
of online business activities for products and services. It is planning process took the following steps.
usually associated with online buying and selling over the A. Defining Use Case Models
internet or conducting any transaction involving the transfer of
Writing use cases or stories of using a system – an excellent
ownership or rights to use goods or services through a
technique to understand and describe requirements.
computer mediated network. In our eyes we see it as a new An end user with internet browsing facility enabled registers
dimension to the varied use of the internet and our purpose is into our site and logs into our site.
to make it trendy in our country where its use is particularly Finds products of his interest using the search option.
very low. Because of the high context culture it is very
important to develop trust among the people interested in a Adds them into the shopping cart and finally orders the
transaction. E-commerce in Bangladesh actually started in the products online when the electronic copy of the bill is
year of 1999 based in USA with some non-resident automatically generated. So, from the stated use case model we
Bangladeshis. Our motto is to develop an enriched e- found out the following to be the primary requirements:
commerce website in our country that should be largely • A registration page
accepted by the customers.
• Search option
II. FEATURES
• Shopping cart
The main features of our website are: an end user can
• Billing system
978-1-4673-6621-2/16/$31.00 © 2016 IEEE

Authorized licensed use limited to: KLE Technological University. Downloaded on September 20,2023 at 06:20:08 UTC from IEEE Xplore. Restrictions apply.
 to our database it updates any information login, registration
pages also prices and products entered by the administrator or
B. Domain Modeling
the end-user.
As with most of the web applications developed using the
Object Oriented Programming (OOP) we followed the same. IV. DEVELOPMENT TOOLS
So we moved forward for Object Oriented (OO) analysis. The entire development process has been subdivided into
Which emphasizes on finding and describing the objects – or two: the front end development and the backend development.
concepts – in the problem domain. For example a product in The front end comprises of the visually visible parts such as
our system is an object. the home page, admin panel, contact page, shopping cart page.
C. Architectural Pattern The back end contains the database and its interaction with the
front-end.
Our application has been developed using the standard A. Front End Development
“Model-View-Controller” pattern. Model view controller The front end was initially raw coded using JavaScript.
(MVC) is an application architectural pattern for JavaScript is a client side scripting language which is a
implementing user interfaces. It divides the application into dedicated language for web development. JavaScript code was
three interconnected parts; so as to separate internal simply mixed with the Hypertext Mark-up Language (HTML)
representations of information from the ways that information code. Hypertext mark-up language is the language used to
is presented to accept from the user. ‘Codeigniter’ is an open design the web pages of an application. A static page is an
source web development framework that provided us with the HTML document that is stored on the web server and does not
support to build our application using PHP following MVC change.
pattern.
This was performed by Cascading Style Sheet (CSS). CSS
Hence view works as the user interface. Controller has the is a style sheet language used for describing the look and
essential class files to manipulate the data stored in the back- formatting a document written in a mark-up language. These
end i.e. the database. It actually works as a traffic between the CSS files are linked with the class files with .php extensions to
model and view. But it doesn’t have the access to directly put the panels in order, the text with correct font, size and
interact with the database. colour. We introduced JavaScript in our application.
JavaScript is a client side scripting language most commonly
used as part of web browsers and its implementations allow
client side scripts to interact with the user, control the browser,
communicate asynchronously and alter the document content
that is displayed.

For example, in our website the clients while registering

are asked to provide their specifications which contains their
name, email address, age, etc. If they miss any of the criteria
then immediately the browser asks him for filling the
particular field. This is implemented by a JavaScript.
We also introduced bootstrap program in our application
which supports creation of animations.

B. Backend Development

The Database Management System (DBMS) provides

support for the back end. The database management system is
essentially software where we can create the database, add,
drop, alter and update tables. The tables can hold different
types of data for example: integer, variable characters etc. in
our application we have chosen the MySQL DBMS to hold
the database. MySQL is a relational database management
system. The main reason is MySQL development project has
Fig. 1. Diagram of model, view and controller of the application. made its source code available under the terms of the General
Public License (GNU) which is an open source web
application.
It can only pass information from the view and updated
information to the view. Finally, the model has the only access

Authorized licensed use limited to: KLE Technological University. Downloaded on September 20,2023 at 06:20:08 UTC from IEEE Xplore. Restrictions apply.
C. Database Design customer_id is the unique key for this table and prduct_id is the
One of the most important and challenging task is the foreign key to link with the product table.
database design. The information passed by the customer V. HOW THE WEB APPLICATION WORKS
while registering in the website is stored in the database. The
products with their identification, description and image is Our application comprises of dynamic web pages which has
stored in the database. Moreover, if we update any of the been created both client and server side scripts. A dynamic
featured products the update takes place in the database. So web page is a web page that is generated by a server-side
the program has a lot to do with the database. program or script. For the testing purpose we have hosted it on
our local hosts i.e. our personal computers later we hope to
Any query is run on the database by Structured Query host it on hosting sites to use it professionally. So when we
Language (SQL). As stated earlier that PHP has some useful run the program on our local computer the web server is the
features one of them is the support to connect the database and local web server.
run queries. The following diagram explains the details the
database design. The browser like Google Chrome, Mozilla Firefox or
Safari executes this program. The browser makes a Hypertext
We will have six tables in the database namely: Transfer Protocol (HTTP) request to the web server for a
advertise, brand, category, product, small_add and specific dynamic web page, the web server then looks up the
registration. The formation of three tables are shown in the extension of the requested file to find out which application
diagram. The table entitled “product” has the attributes server should process the request. When the application server
namely:product_id, product_rate, category_id, brand_id, and receives a request, it runs the specified script. Often, this script
product_rate. Where product_id is the primary key for this uses the data that it gets from the web browser to get the
table i.e. each product will have a unique identity. appropriate data from a database server. This script can also
store the data that it receives in the database. When the
application server finishes processing the data, it generates the
HTML for a web page and returns to the web server. Then, the
web server returns the HTML to the web browser as part of an
HTTP response.

VI. CODING
Our application has been developed using Model-View-
Controller format as standard. We have separate files
containing several functions to implement the proposed
functionalities. View is a separate folder holding all the
required files with .php extension containing HTML tags and
codes that creates the actual webpages. These files have links
to other files in the file holder entitled “Controller” which has
necessary functions to correspond to the database. The
database accessing codes are written in php files residing in
the folder entitled “Model”. For example : ‘home.php’ file has
the necessary code to display the products and has the
following line.
<a href="<? echo
base_url().'user/product_detail/'.$p['p_id'] ?>" class="btn btn-
default add-to-cart"><i class="fa fa-shopping-
cart"></i>Detail</a>

To retrieve the products this line of code corresponds to

a. the product_detail function under user.php file in Controller.
Fig. 1 . Table of product, category and customer database. The function as follows.

public function product_detail($id)

The attribute category_id plays as a foreign key for this {
table i.e. this foreign key creates a link with table category $this->load->model("pagetransition");
having two attributes: category_id and category_name. When a
customer registers into our website his information will be $catagory = $this->pagetransition->catagory();
stored in the customer table with the attributes- name, $brand = $this->pagetransition->brand();
customer_id, product_id, quantity and email.Again

Authorized licensed use limited to: KLE Technological University. Downloaded on September 20,2023 at 06:20:08 UTC from IEEE Xplore. Restrictions apply.
 The SHA-1 is a cryptographic hash function producing a
$this->load->view("main/head"); 160-bit hash value, known as message digest. SHA-1 is the
$this->load->view("main/top_menu"); most widely used hash function for its enhanced security. No
} successful attacks has yet been reported on SHA-1.0.

This piece of code corresponds to the pagetransition.php

file in Model to access the database and retrieve necessary VIII. CONCLUSION
information and pass it to the php files available in folder E-Commerce has changed our life styles entirely because
View. we do not have to spend time and money travelling to the
market. One can pick up the pace of his online business with
A pseudo-code function to calculate the price of products: the help of e-commerce application development and web
development solutions. It is one of the cheapest means of
CALCULATE PRICE (int id, float amount) doing business as it is e-commerce development that has made
it possible to reduce cost of promotion of products and
String query = SELECT product id, product name, services.
product price FROM product table WHERE product id =id
There is no time barriers in selling the products. One can
if (number of rows retrieved >0) log on the internet even at midnight and can sell products at a
Row Array [ ] = query results single click of mouse. An interactive user friendly and focused
Row Array [ ‘product amount’] = amount website in the form of online shop can generate good business.

float total= Row Array [‘product amount’] X Row Array So we are of the opinion that big companies should invest
[‘product price’ ] more on research and development for e-commerce.

return total
ACKNOWLEDGMENT
VII. TESTING AND BUG FIXING
We would like to start by expressing my sincere gratitude to
Testing an application is an investigation to provide
the Almighty, the most Beneficent and the most Merciful for
stakeholders with information about the quality of the product
giving us the chance to complete the Capstone Design Project.
under test. Our testing technique included the process of
We would like to take this opportunity to express sincere
executing the application with the intent of finding bugs
thanks to the department and the University for this Course
(errors or other defects). It involved execution of the most
where we have such an opportunity to express our ideas and
important application components to evaluate the properties of
put our learning all the way into practice. We would specially
interest. Among the several testing methods White-box testing
thank and express our gratitude to our supervisor Dr. Hasan
was preferred. White-box testing also known as clear box
Uz Zaman, for his tremendous support and encouragement
testing, tests internal structures or workings of a program, as
from the beginning till the completion of the project.
opposed to the functionality exposed to the end user. In white
box testing an internal perspective of the system as well as REFERENCES
programming skills are used to design test cases. The tester
chooses inputs to exercise paths through the code and [1] Ruvalcaba, Z., & Boehm, A., “Introduction To The Web Development”
determine the appropriate outputs. This is analogous to testing in murach’s HTML5 and CSS3, 1sted., Fresno, CA: Mike Murach and
nodes in a circuit. So based on the above test we can state that Associates, Inc., 2012, pp. 4---7.
our web application is perfectly working. There were few bugs [2] E.L.Thompson & S. D. Nowicki& T. Mayer,“Unified Modeling
later fixed and now it is a full functioning website. Language,”in Professional PHP6, 2nded.,Indianapolis,Indiana: Wiley,
2010, pp. 31–48.
[3] Model-View-Controller.(2015).Retrieved from
Now we have our web application ready and hosted by our http://en.wikipedia.org
own domain. Our domain name is www.kroykorun.com. The [4] Cosper, A. (Ed.). (2015, August 12). Entrepreneur, Irvine, CA, USA.
hosting clients have their server computers to perform the task [5] CS-Cart. (n.d.). CS-Cart. Retrieved August 9, 2015, from http://www.cs-
of a web server, application server and database server. We cart.com/how-to-develop-an-ecommerce-website.html
have ensured the security issues by using cryptographic hash [6] tuts. (n.d.). TUTS+. Retrieved August 9, 2015, from tuts+:
functions like SHA-1 during the implementation of the http://code.tutsplus.com
functions wherever the application asks the user for a
password.

Authorized licensed use limited to: KLE Technological University. Downloaded on September 20,2023 at 06:20:08 UTC from IEEE Xplore. Restrictions apply.