DESIGN OF A PAY-ON-DELIVERY ONLINE STORE - IJRTER · 2018-07-25 · Enugu State University of...

DOI:10.23883/IJRTER.2018.4360.LFNYO 78

DESIGN OF A PAY-ON-DELIVERY ONLINE STORE

U. I. Nduanya1, F. Ugwu 2, F. A. Okoye 3 1,2,3 Department of Computer Engineering,

Enugu State University of Science and Technology (ESUT). Enugu State, Nigeria.

Abstract – Pay-On-Delivery online store is a web-based online shopping system for an existing shop which is an attempt to provide the advantages of online shopping to the customers of a physical shop.

The system comprises of various GUIs (Graphical User Interfaces) for various modules of the system

and also tables for the database design. The GUIs were implemented using the HTML, CSS,

JavaScript, C# razor view engine and Bootstrap template for making the website responsive. At the

backend, C#, Asp.Net MVC5 were used while Entity framework was used for interfacing with the

database. MSSQL was used for the database as it has high security features. The customers can search

for products, view them, add them to their carts and submit their orders. They can view the history of

their transactions. The admin can manage products, orders and staff. The staff can view the orders yet

to be delivered and history of delivered orders.

Keywords: CSS, JavaScript, Asp.Net MVC5, C# razor view engine.

I. INTRODUCTION

Globalization and the growth in the new technological developments has commenced a new era of e-

commerce (Ramayah and Ignatius 2005) leading to the growth of online shopping or e-shopping. These

rapid changes in e-commerce has changed the way business and customers consume, customize and

distribute products (Al-Maghrabi et al. 2011).

Online Shopping is one of the widely and commonly used mediums for convenient shopping. It is a

form of electronic commerce which allows consumers to directly buy goods or services from a seller

over the internet using a web browser. It is in fact, a popular means of shopping in the Internet

community (Boulakis, 2008). With internet connection, the consumers can have access to many

products or services from all over the world even at the comfort of their home. This makes it possible

for thorough comparisons to be made among the available goods or services. It has been seen that

online shopping provides more satisfaction to modern-day consumers who are seeking convenience as

well as speed (Yu, 2007).

Compared to physical stores, online stores have many advantages: They are convenient and time

saving; no more traveling and waiting in lines is needed. They are open at all times and they are

accessible anytime and anywhere. These stores provide consumers with free and rich information about

products and services (Mohammad et al. 2012).

This design titled Pay-On-Delivery online store is a web based shopping system for an existing shop,

and attempts to provide the advantages of online shopping to customers of a physical shop. This system

comprises of various modules: Customer, Staff and Admin module.

II. RELATED WORKS

Jumia, formerly known as Africa Internet Group(AIG), was started up in Lagos, 2012, by Tunde

Kehinde and Raphael Afaedor. The online shop was started up by Rocket Internet before they finally

International Journal of Recent Trends in Engineering & Research (IJRTER) Volume 04, Issue 07; July - 2018 [ISSN: 2455-1457]

@IJRTER-2018, All Rights Reserved 79

went on to use an e-commerce platform called Magento. Magento is an open source platform written

in PHP. It employs MySQL or MariaDB relational database management system and elements of Zend

framework. It applies the conventions of object-oriented programming and model-view-controller

architecture. It also uses the entity-attribute-value model to store data. Its model-view model pattern

on its front-end code uses JavaScript library: knockout.js. The online shop was also designed with

ELM, a JavaScript programming language. Konga, an e-commerce company founded in 2012 by Sim

Shagaya. Its online store was initially designed with an open source solution called Spree. By 2013,

they moved on to Magento but highly customized, adding Prototype.js to its design. By 2016, the

Konga engineering team announced that they were moving away from Magento to micro-services,

which is an architecture that develops software applications as a suite of independently deployable,

small, modular services. It can employ HTTP/REST with JSON or Protobuf. Slot was a shop that

retailed Mobile phones, computers systems, computer and phone accessories founded by Nnamdi

Ezeigbo. It started in 1998 (Cp Africa, 2014). Its online store was eventually launched in 2013. It was

designed with WooCommerce and Netcore platform. Its front-end was designed with Wordpress

(visual composer) content Management system. At the back-end, it is PHP framework, Google font

API, Zendesk chat (formerly Zopin) and jQuery. Dealdey is an e-commerce company founded in 2011

by Sim Shagaya (Shagaya, 2015). Its online store uses Netcore platform, Ruby on Rails framework

and jQuery. Parktelonline was founded in 2010 (Linkedin, 2012). It deals exclusively on Mobile

phones, its accessories and related gadgets. Its online store uses Magento (customized) with jQuery

and CSS.

Yudala was launched in 2015, founded by Nnamdi Ekeh. Its online store was built on Magento,

Magento 2.0, Magento Enterprise, PHP framework and jQuery.

III. PAY-ON-DELIVERY ONLINE STORE DESIGN

The hierarchical chart of Fig.1 presents the architecture of the Pay-On-Delivery online shopping

system. The design ensures that only authorized users are allowed to access the system’s information

in various modules.

There are also three other modules which are Admin, Staff and Customer as shown in figure 1.

3.1. Registration Module

User Registration requires the entry of the following data: Name, Age, Email, Phone Number, Address,

Sex, Username and Password. The registration module (Figure 2) is designed for both staff and

Figure 1. Architecture of the Pay-On-Delivery Online Shopping System



customers. That staff registration must be authorized by an Admin before it is saved. There is an

authentication feature added for all users; administrators, staff and customers. The information

required from the user such as Username and Password will be crucial during the process of logging

in as it specifies what privileges the system user should and should not have.

3.2. Login Module

Once a User tries to log on, an authentication process takes place. If the user is not successfully logged

on, access to these system resources will be denied. For a user to login, they must key in username and

password used during registration. When logged in, the user is allowed access to the following sub-

modules: Admin Module, Staff Module and Customer Module (see Figure 3(a)). Figure 3(b) depicts

this process.

3.3. Customer Module

This module comprises of various features of the website open to registered customers after login.

Account Settings - Edit Profile links to the page where customers can edit their details. Transactions

History contains the history of previous transactions. It collapses into Orders Received, Packed

Figure 2. Registration Process

New User

Enter User Details

Register

Is

Registration

Successful?

Save to Database

Login

No

Yes

(a) (b)

Figure 3. (a) The Login Structure (b) The Login Process

Login

Admin

Module

Staff

ModuleCustomer

ModuleUser

Customer?

Yes

Enter User

Details

Verify entry from

Database

Login

Successful

?

Admin

Module

No

Login

User

Admin?Yes

No

No

No

Yes

YesUser Staff?

Customer

Module

Staff

Module



Orders and Recent Orders. The customer makes use of the Stop Order button to stop the delivery of

an order (see Figure 4 (a)).

During the transaction process, requested and available products are displayed. For each selected

product, the option to add to cart is available. When added to cart, shipping details are automatically

requested and notification mail sent to the customer (see Figure 4(b)).

3.4. Staff Module

Figure 5 shows the functions available under the staff module.

This Module comprises of various features available to registered and logged in staff. These features

include:

Account Setting links to the page where staff can edit their profile. Orders to Deliver contains a record

of the orders yet to be delivered while Orders Delivered Contains record of the orders already

delivered. When Enter Customer Token is activated, a form where the token sent to customer who

placed an order is entered to validate and confirm delivery order. This token is stored with the order

for that staff.

A staff has more privileges than a registered customer. The module also allows view of a list of orders

placed by the customers which the Admin assigned to each staff. Staff are assigned different orders to

deliver because each Staff has area of coverage. A logged-in staff views the orders assigned to them

and also a record of already delivered orders. After delivery, the staff enters the token given to the

customer to enable the staff check it as “delivered”. Figure 5(b) shows the order delivery process.

(a) (b)

Figure 4. (a) The structure of the Customer Module (b) The Customer Process

Customer

Home

Account

Settings

Edit

Profile

Transactions

History

Orders

Received

Packed

Orders

Stop

Order

Recent

Orders

Yes

Yes

No

Customer

clicked on

Add to Cart?

Display

Available

Products

Add Selected

Item to Cart

No

Start

Continue

Shopping

?

NoCheckout

?

Save order and

send Customer a

Notification mail

Display

Shopping

Cart

Enter

Shipping

Details



3.5. The Admin Module This module comprises of features accessible to the system administrator or Admin (see Fig. 6(a) &

(b)). As shown in Fig. 7(a) the Admin can manage products available in the store/database; can

add/delete/edit products. The Admin can also manage staff by viewing all registered staff. The admin

can also add/delete/edit staff details.

Fig.7(b) shows that the Admin manages orders by viewing all customer orders; assigning/un-assigning

staff to deliver orders. Provision is also made for the Admin to view all registered customers and

add/delete/edit customer records.

(a) (b) (c)

Figure 5. (a)The Structure of the Staff Module (b) Order delivery process (c) Order delivery sub-module

Enter

Customer

Token

Staff Home

Save order

and send

Account

SettingsOrders to

Deliver

Orders

Delivered

Yes

Token

Valid?No

No

Yes

Yes

Is Staff

Registered?

Enter Login

Details

No

Start

Logout?

NoDeliver

Order

Clicked?

Change Order

Status to Delivered

and Notify Staff

Display Orders to

attend to and

Completed Orders

Enter Order

Token

End

NoDeliver

Order?

Yes

Display Orders

to deliver

Is Token

Valid?

Mark Order as

Delivered

No

Start

Yes

Enter Customer’s

Token

(a) (b)

Figure 6. (a) Admin Module Structure (b) Admin Module

Admin Home

Products

Manage

Orders

Manage

ProductsManage

Staff

Manage

Customers

CustomersStaffOrders

Add/Edit

/Delete

Assign/Un-

assign Staff to

Deliver Order

Add/Edit/

Remove

Staff

Edit/Delete

Customer

NoRegistered

?

Enter Username

and Password

Carry out

Managerial

Action?

Execute Action

No

Start

Yes

Display Admin

Page and Options

Yes

End



The Admin has all the privileges available on the website. He/she has the authority to add or delete

products, staff and customers; also, the responsibility of managing the online store. He/she assigns

orders to be delivered to staff according to their areas of coverage. During registration, the

registering staff is approved by the Admin. All mails and complaints are sent to the Admin of the

website.

IV. CODING

The system was implemented using C#, Asp.Net MVC 5 and MySQL relational database management

system. MVC (Model-View-Controller) was the pattern followed in implementing the front end and

business logic of the website. The Modules are C# classes used in communicating with the views and

the database, The Views are the front ends visible to clients while the controllers are C# classes which

takes care of all the logic and flow of data, sending the right module to the right view and using the

right module to retrieve data from the database. The View, being the front end, was implemented using

C# Razor View engine which incorporates Html, CSS, JavaScript, jQuery and some C# codes.

A controller class (C#) was created for each user/module to handle all the actions available for the

particular user and various Views (Web Pages) were created for the various modules in the system.

The Admin logs into the system to add products after which customers login and browse through the

products, add desired products to their carts and finally place their orders. The Admin then assigns

various staff to deliver customers’ orders. To deliver orders staff log into their accounts, to select order

to deliver. When delivered, they enter customer token and then the system marks the order as delivered

if the token is correct.

4.1.The Backend (Database) Table 1 shows the structure of the Customer database

CustomerId is an auto-number, field for identifying the customer used as a foreign key in relations;

this is the primary key in this table. EmailAddress is used for storing the customer's email. FirstName

is to store customer’s firstname, LastName serves to store customer's lastname while Phone stores their

phone number. Also stored are Username and Password for authenticating customer's login.

(a) (b)

Figure 7. (a)Manage Orders sub-module (b) Manage Products sub-module

Yes

Save Product

Yes

No

Delete

Product from

database

Add New

Product?

No

Yes

Edit

Product?

Enter Login

Details

Start

No Delete

Product?

Save Updates

Input Product

details

Input Updates

Change Assigned

Staff to Username

Entered

No

YesYes

No

Change

Assigned

Staff to Null

Un-assign

Staff to

deliver Order?

Assign

Staff to

deliver

Order?

Recently

Placed Orders

Start

Orders

Attended to

Orders

Delivered

Input Staff

Username



Table 2 shows the structure of Product database

Name stores the product name while Description stores the details which describe the product like the

quality, model, Ram size, Hard disk size etc. Price: holds the price of the product. Type stores the type

of the product e.g. Mobile, Household, Accessories. Category stores the category of the product while

Color stores the color of the product. The image of the product is stored in ImageData.

Table 3 shows the structure of Orders database

CustomerEmail stores the email of the customer who placed the order. Details stores the details of the

order placed (all the products ordered). Status stores details about the current status of the order (Not

Packed, Packed or Delivered). Code is the token generated when the customer places an order and a

copy is sent to the customer which will be used for confirmation by the customer. DeliveryStaff stores

the username of the staff who is to deliver the product(s) ordered, Foreign key from staff table. Date

Modified stores the date of last modification like date packed or delivered.

Table 4 shows the structure of Staff database.

The database has almost the same structure as the customer database with the exception of Home

Address which stores the staff’s residential address.

Table 5 shows the structure of Admin database This has only the Id, Username and Password.

Table 1. Database Structure for Customer

S/N Column

Name

Data Type

1 CustomerId Integer

2 Firstname nVarChar(20)

3 Lastname nVarChar(20)

4 EmailAddress nVarChar(20)

5 PhoneNumber Integer

6 Username nVarChar(15)

7 Password nVarChar(20)

Table 2. Database Structure for Products

S/N No Data Type

1 ProductId Integer

2 Name nVarChar(50)

3 Description nVarChar(max)

4 Price decimal(18, 2)

5 Type nVarChar(20)

6 Category nVarChar(20)

7 Color nVarChar(20)

8 ImageData nVarChar(50)

9 Available Integer

Table 3. Database Structure for Orders

S/N Column Name Data Type

1 OrderId Integer

2 CustomerEmail nVarChar(20)

3 Details nVarChar(max)

4 Status nVarChar(50)

5 Code nVarChar(10)

6 DeliveryStaffUsername nVarChar(20)

7 DateModified nVarChar(30)

8 ImageData nVarChar(50)

Table 4. Database Structure for Staff

S/N Column

Name

Data Type

1 StaffId Integer

2 Firstname nVarChar(20)

3 Lastname nVarChar(20)

4 Email nVarChar(20)

5 HomeAddress nVarChar(max)

6 PhoneNumber Integer



Table 5. Database Structure

for Admin

S/N Column

Name

Data Type

1 Id Integer





4.2. Implementation of the Admin Module

The Admin module was implemented using a Controller class. The admin is the shop owner (maybe

any other manager – for the various areas – he/she gets to employ) and his/her details are registered

directly from the database, there is no page for the Admin’s registration. The Admin can carry out

many managerial actions like manage products (Adding, Editing or deleting Products), manage staff

(adding, updating or deleting staff), manage customers (adding, updating or deleting customer) and

finally manage orders (viewing orders, assigning staff to deliver orders or deleting orders).

The Admin is required to login to the system in order to carry out any Managerial action. When the

admin navigates to the admin path, the first page displayed is the admin page as shown in figure 8(a).

After a successful login by the admin, the admin is taken to the admin home page from which he/she

can carry out the various managerial actions as shown in figure 8(b).

The product page is the page displayed when the admin clicks on the add new product button. The

admin fills in the details of the new product and then click on save for the products to be added to the

database (Figure 9).

Implementation of the Customer Module

When using the system for the first time the customer is required to register and login after registration

to carryout various actions like Add/View Cart, delete from Cart, check out, View Transaction History,

Edit Profile or Cancel Orders packed. All the mentioned actions were implemented in the Customer

controller class.

(a) (b)

Figure 8. (a) Admin Login (b) Admin Homepage

Figure 9. Product Page



The registration is done by filling the form as shown in figure 10 (a) and after registration customer is

taken to the login page as shown in figure 10 (b) in order to login.

Figure 11 depicts the customer’s home page, which displays the history of the customer’s transactions.

It also provides customers the option of stopping an order before it is delivered. The customer can also

make changes to their profile by clicking on the Account Settings option.

The General Home Page is available to both guests and all users. The user can browse through available

products but in order to add any product to their cart they must be registered and logged in as a

customer.

The shopping cart holds the list of all items selected by the logged-in customer. The customers can

navigate to the shopping cart by clicking on the cart icon at the top right of the screen. As shown in

figure 12, the customers can remove items from their cart or make a choice of checking out or to

continue shopping.

Figure 11. Customer’s Home Page

(a) (b)

Figure 10. (a) Registration Page (b) Login Page



The Checkout form is the form displayed when the customer clicks on the checkout button. The

customer fills the form and clicks “Complete order” after which a success page is displayed. On the

successful filling and submitting of the shipping form by the customer, a mail is sent to the customer.

The figure 14 is a screen shot of the mail sent to the customer on the successful placement of order. It

shows details of customer’s order and shipping information and also the security token for claiming of

order. This marks the end of the shopping process for the customer.

Figure 12. Customer’s Cart

Figure 13. Checkout/Shipping details Form



Implementation of the Staff Module

The staff module was also implemented using a Controller class. All staff are registered by the Admin.

A Staff is assigned the task of delivering orders to customers. A staff can also view all transactions

handled by him/her.

The staff login page is the first page displayed when accessing the staff path. For a staff to deliver any

order which they have been assigned to deliver, the staff is required to login using their username or

password as shown in figure 15.

The Staff home is the page displayed when the staff successfully logs into the system. As shown in the

figure 16 below, the history of delivered orders and orders to be delivered are displayed. By the right

hand side of the order to be delivered there is a link to the page where the customers secret token will

be entered for authentication of order. After a valid token is entered, the staff receive a notification

message as shown at the top of the screen “Order is Delivered” and then the system changes the status

of the order to delivered.

Figure 14. Customer’s email

Figure 15. Staff Login Page



V. CONCLUSION

The system, Pay-On-Delivery online store has been developed with much care and free of errors. It is

efficient and less time consuming. The purpose of this design was to develop a web application for

purchasing items from an existing shop. The entire system is secured. The design can also be

implemented in any shop. The owner (Admin in this case) will then upload pictures of his/her products.

REFERENCES I. Al-maghrabi, T., Dennis, C., & Halliday, S. (2011). Antecedents of Continuance intentions towards e-shopping:

The case of Saudi Arabia. Journal of Enterprise Information Management, 24(1), 85-111.

II. Boulakis, M. P. (2008). E-consumer behaviour: past, present and future trajectories of an evolving retail

revolution. International Journal of E-Business Reaearch, 4(3), 64-67.

III. Builtwith (n.d) Retrieved from http://www.builtwith.com/?q=Dealdey.com

IV. Builtwith (n.d) Retrieved from http://www.builtwith.com/?q=Jumia.com

V. Builtwith (n.d) Retrieved from http://www.builtwith.com/?q=Konga.com

VI. Builtwith (n.d) Retrieved from http://www.builtwith.com/?q=Parketonline.com

VII. Builtwith (n.d) Retrieved from http://www.builtwith.com/?q=Slot.ng

VIII. Builtwith (n.d) Retrieved from http://www.builtwith.com/?q=Yudala.com

IX. Cp-Africa (2014). Retrieved December 12, 2017, from http://www.cp-africa.com/2014/nnamdi-ezeigbo-founder-

slot-systems-created-mobile-retail-giant/

X. Jumia (2017). Retrieved December 12, 2017, from Wikipedia: http://en.m.wikipedia.org/wiki/Jumia

XI. Konga (2015). Retrieved December 12, 2017, from Wikipedia: http://en.m.wikipedia.org/wiki/Konga.com

XII. Linkedin (2012). Retrieved December 12, 2017, from http://www.ng.linkedin.com/in/parktel-online

XIII. Mohammad, H., Hossein, R., Mojtaba, N., Amir, P., & Ahmed, R. (2012). An analysis of factors affecting online

shopping behaviour of consumers. International Journal of Marketing Studies, 4(5), 81-98.

XIV. Editor (2016, January 27). Yudala tops Google's 2015 trending brands lists. TheGuardian. Retrieved from

http://www.guardian.ng/technology/yudala-tops-googles-2015-trending-brands-lists

XV. Ramayah, T., & Ignatius, J. (2005). Impact of perceived usefulness, perceived ease of use and perceived

enjoyment on intention to shop online. Journal of Systems Management, 3(3), 36-51.

XVI. Shagaya (2015). Retrieved December 12, 2017, from http://en.m.wikipedia.org/wiki/Sim_Shagaya

XVII. Yu, T. a. (2007). Determinants of internet shopping behavior: An application of reasoned behavior theory.

International Journal of Management, 24(4), 744-762.

Figure 16. Staff Home

DESIGN OF A PAY-ON-DELIVERY ONLINE STORE - IJRTER · 2018-07-25 · Enugu State University of...

Documents

Transcript of DESIGN OF A PAY-ON-DELIVERY ONLINE STORE - IJRTER · 2018-07-25 · Enugu State University of...