PRODUCT CERTIFIED APPS

WITH QUICK RESPONSE (QR) CODE

FASYA AWATIF BINTI HAMAM

BACHELOR OF COMPUTER SCIENCE

(INTERNET COMPUTING) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

PRODUCT CERTIFIED APPS WITH QUICK RESPONSE (QR) CODE

FASYA AWATIF BINTI HAMAM

BACHELOR OF COMPUTER SCIENCE

(INTERNET COMPUTING) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

i

ABSTRACT

Product Certified Apps is a mobile applications that allowed user to search and retrieve

information about the products they want to know. Today’s shoppers expect more

authentic information about products they want to buy without having any doubts. Some

shoppers also have problem reading the information on the packaging due to its small

fonts. One of the approaches is to make such information instantly available with the

tap or scan of a smartphone so shoppers can properly decide before buying products.

With the rise of Quick Response (QR) Code on smartphone that contain almost different

kinds of information ranging from product information to account details to virtually

anything. Using libraries and algorithms to implement a smartphone device to scan any

QR code quickly and easily. Links embedded in the codes will be translated and

performed by a camera phone in smartphone device. This application was developed in

mobile platform due to its easy and quick access to connect with shopper and best in

marketing tools to develop business. Hopefully this application can boost shopper’s

consciousness in choosing the best product before purchasing.

ii

ABSTRAK

Aplikasi Bersitifikat Produk ialah aplikasi mudah alih yang membolehkan pengguna

untuk mencari dan mendapatkan maklumat tentang produk yang mereka mahu

tahu.pembeli hari ini mengharapkan maklumat lebih sahih tentang produk yang mereka

ingin membeli tanpa mempunyai apa-apa keraguan. Beberapa pembeli juga

mempunyai masalah membaca maklumat pada bungkusan kerana fon yang kecil. Salah

satu pendekatan adalah untuk membuat apa-apa maklumat tersedia serta-merta

dengan paip atau imbasan telefon pintar supaya pembeli betul boleh membuat

keputusan sebelum membeli sesuatu produk. Dengan kebangkitan Quick Response

Code (QR) pada telefon pintar yang mengandungi jenis hampir berbeza maklumat yang

terdiri daripada maklumat produk kepada butiran akaun untuk hampir apa-

apa. Menggunakan perpustakaan dan algoritma untuk melaksanakan peranti telefon

pintar untuk mengimbas mana-mana kod QR dengan cepat dan mudah. Pautan

tertanam dalam kod akan diterjemahkan dan dilaksanakan oleh telefon kamera dalam

peranti telefon pintar. Permohonan ini telah dibangunkan pada platform mudah alih

kerana akses mudah dan cepat untuk berhubung dengan pembeli dan terbaik dalam

alat pemasaran untuk mengembangkan perniagaan. Semoga aplikasi ini boleh

meningkatkan kesedaran pembeli dalam memilih produk yang terbaik sebelum

membeli.

iii

TABLE OF CONTENTS

ABSTRACT...................................................................................................................i

ABSTRAK.....................................................................................................................ii

CONTENTS.................................................................................................................iii

CHAPTER Ⅰ INTRODUCTION

1.1 Project Background.............................................................................................1

1.2 Problem Statement..............................................................................................2

1.3 Objective.............................................................................................................3

1.4 Scope...................................................................................................................3

1.5 Limitation of Work..............................................................................................4

1.6 Expected Result...................................................................................................4

1.7 Summary.............................................................................................................5

CHAPTER Ⅱ LITERATURE REVIEW

2.1 Introduction.........................................................................................................6

2.2 Analysis of Existing Appplication......................................................................6

2.2.1 VerifyHalal.............................................................................................6

2.2.2 LetsVerify...............................................................................................7

2.2.3 CHKFake................................................................................................8

2.3 Comparison between Existing Application.........................................................9

2.4 Analysis of Related Paper...................................................................................9

2.4.1 Using Quick Response Codes to Provide Interactive Services................9

2.4.2 Factors Affecting Consumer Usage of QR Codes.................................10

2.4.3 Adoption of Virtual Shopping: Using Smart Phones and

QR Codes..............................................................................................11

2.4.4 System and Method of Product Identification Using a URL..................11

2.4.5 Potential Business Applications of Quick Response (QR) Codes..........12

iv

2.4.6 Packaging Features and Consumer Buying Behavior Towards

Packaged Food Items............................................................................12

2.4.7 Effects of Placement Marketing on Product Attitude and Purchase

Intention in Traditional Industry...........................................................13

2.4.8 The Effect of Posting Source Type Information on Brand

Reliability, Product Attitude and Purchase Intention.............................14

2.5 Summary between Related Research Paper.......................................................14

2.6 Summary...........................................................................................................19

CHAPTER Ⅲ METHODOLOGY

3.1 Introduction.......................................................................................................20

3.2 Prototyping Model............................................................................................21

3.3 Requirement Gathering.....................................................................................21

3.3.1 System Requirement.............................................................................22

3.3.1.1 Software....................................................................................22

3.3.1.2 Hardware...................................................................................23

3.4 Quick Design.....................................................................................................23

3.4.1 System Design.......................................................................................24

3.4.1.1 Framework Design....................................................................24

3.4.1.2 Context Diagram (CD)..............................................................25

3.4.1.3 Data Flow Diagram Level 0.......................................................26

3.4.1.4 Data Flow Diagram Level 1.......................................................27

3.4.2 Data Model............................................................................................32

3.4.2.1 Entity Relationship Diagram (ERD)..........................................32

3.4.2.2 Data Dictionary.........................................................................33

3.4.3 Proof of Concept...................................................................................36

3.4.4 Solution Complexity.............................................................................39

3.4.4.1 Quick Response (QR) Code......................................................39

3.4.4.1.1 Deep Linking.....................................................40

v

3.4.4.2 Hybrid Mobile Application.......................................................43

3.5 Prototype Evaluation.........................................................................................42

3.6 Refined End Functionality................................................................................42

3.7 Summary...........................................................................................................43

REFERENCES...........................................................................................................44

APPENDIX..................................................................................................................46

1

CHAPTER Ⅰ

INTRODUCTION

1.1 Project Background

Currently, the product industry in Malaysia are developing and quite demanding.

However, Malaysians tend to purchase product from familiar brands more often than

buying from new and unfamiliar brands. In a statement by market research provider

Nielsen, about 63% of Malaysian choose to buy new products from familiar brands

[Nielsen, 2015]. Malaysian consumers very sceptical when it’s come to trust new

products from newly established brands. Especially when 61.3% of population in

Malaysia practices Islam where any products that use must based on Islamic law that

considered as Halal. A practising Muslim prevents themselves from consuming or using

any doubtful things.

The idea of using product certified mobile application to identify product’s

information or details are valid to users that wants to keep track of any products

regarding brands, ingredients and origin of the products. Smartphone is the most

convenient tool for reading uniquely product code. Since many people have smartphone

and most likely to carry it anywhere, this type of mobile application very effective rather

than having dedicated code reader which is quite heavy and pricey. This approach also

2

help in utilizing the integrated marketing communication effort to offer easier users

access and interactive marketing content.

With the implementation of QR code in holding the information, it is a great

potential to carry information in a smaller space. Even tough, QR code is similar to a

barcode, it can hold information both vertically and horizontally rather than only

horizontal direction. We often see Barcode on product’s packaging but not QR code.

With this application, it provides QR code to manufacturer to be used on their products.

Hence, it helps their products be promoted and user can easily access to this application.

QR codes provide practitioners of integrated marketing communications a bridge

between traditional marketing methods and the digital marketing realm [Flyte, 2011].

1.2 Problem Statement

The current problems that consumer faced is that they do not know the origin of

product and where they manufactured [Uke, 2012]. Consumer tends to get curious or

doubt of their choices in buying a product. Manufacturer information is very important

to convince consumer because it is hard to look into it. In Muslim case, they want to

know whether the product have Halal certification or not.

Next, product label is an important communication tool that provides consumers

with detailed information about product. Labelled information in terms of wrong font

type and small font size influence consumer dissatisfaction [Peterman, 2014]. Most

labelled information presented is not easy to understand.

Lastly, consumers want more detailed and visual product information online

[Oracle, 2011]. Basically, visual information allows consumer to look at and compare

aspects that they may not see on physical products such as the validity of the

certification on product that sometimes counterfeit by manufacturer.

3

1.3 Objective

The objectives of this project are as follows:

a) To analyse an application that capable for admin to verify manufacturer to give valid

information to user

b) To design product certified application that equipped with QR code scanner

c) To develop a mobile application that assists user to check valid information about

the products

1.4 Scope

Figure 1.1 shown basic use case diagram to show basic functionalities of each actors

for this system. The scope of the project are as follows:

1. Admin

a) Need to verify certification of manufacturer and product

b) Can view all the data from manufacturer and product

2. Consumer

a) Consumer need to register

b) Can check information about product through searching or scan the QR code

c) Consumer also can share review on price and comment on product

3. Manufacturer

a) Need to register as manufacturer representing product

b) Can update information of product and their profile

c) Can see review from consumer

4

Figure 1.1: Basic Use Case Diagram

1.5 Limitation of Work

a) Only smartphone with camera can use the feature QR code scanning

b) This mobile application does not provide a function for online purchasing

c) The product that existed in the application only come from registered manufacturer

1.6 Expected Results

a) The mobile application will have equipped with QR code scanning

b) User get information about registered product which can be done through mobile

application

5

1.7 Summary

Overall in this chapter, we can see the aim and target that system should achieve

and overcome problem by the expected outcome. Basically, the scope of this project

usually serve as the ground in development of the system generally. The system can

provide many benefits to both buyers and manufacturer in terms of providing and

receiving information. To sum up, the objectives of the project must be fulfilled to

ensure the development of the system is accomplish.

6

CHAPTER Ⅱ

LITERATURE REVIEW

2.1 Introduction

This chapter will dive into the literature review from research of current and

existing system. It is important that analysis is made from preceding journal to analyse

about the technique and methodology that suited in the system. With the perfect

understanding from existing system details, it also helps in summarize and evaluate of

existing product certified application. Hence, we will come down to the best approach

to be implement during the development of the system. Literature review requires the

process of reading articles, research paper, books and journal as the guideline in

establishing a better project.

2.2 Analysis of Existing Application

2.2.1 VerifyHalal

This application allows consumers to make an informed decision when searching

for their Halal products. Users can scan verify Halal on their selected members

product. The scan are applicable to both barcode and QR code. Apart from that,

users can search Halal products via search bar. The most convenient part of the

7

application that it provides categories on different type of products which users

could select using the filter option on the right side of search bar as shown in

Figure 2.1.

Figure 2.1: VerifyHalal Apps

2.2.2 LetsVerify

Figure 2.2: LetsVerify Apps

8

Another application for product authenticity check and real time customer

engagement. The main purpose of the app is to check on fake and counterfeit

products. It is also one of platform for users to report a fake product that they may

encounter and it will be available to manufacturer for their further actions. Users

can verify products using QR code. As shown in Figure 2.2, the application does

not support any other code apart from QR code.

2.2.3 CHKFake

Figure 2.3: CHKFake Apps

An application to check for fake products. This application guides users to locate

and verify anti-counterfeit features in trusted branded products and helps to detect

and reject fake products. The scan feature only supports the barcode but not QR

code. The application also introduced verification on currency notes. The

application has products directories.

9

2.3 Comparison between Existing Application

Application

Features

VerifyHalal LetsVerify CHKFake

Method to get

information

User can search

manually and use

barcode scanner

User must use QR

code scanner

User can use both

search manually

and scan barcode

Scanner type Barcode & QR

code

QR code Barcode

Manual search Yes No Yes

Registration Not necessary Yes Yes

Rating Yes No No

Comment /

Feedback

No No No

Manufacturer Info No No Yes

Report Yes Yes Yes

Bookmarks No No No

Table 2.1: Comparison between three existing application

2.4 Analysis of Related Research Paper

2.4.1 Using Quick Response Codes to Provide Interactive Services

This paper [1] proposes to use QR code to be applied on different field

of services. This is focused on interactive entertainment or interactive language

learning applications. The QR code scanner use camera or optical sensing device

from client device to launch the interactive learning sessions. Client can either

10

receive or transfer data. The QR code can appear in packaging, books or any

other object. Prospectively, the server will receive request from a decoded QR

code. In response to the request, server transmit response to display data or

sending additional process. The process from QR recognition by client is

performed through network (Internet, wireless network, wired network) to

provide interactive services for clients. It is clear that client communicate with

server via networks.

2.4.2 Factors Affecting Consumer Usage of QR Codes

This paper [2] discuss about awareness among consumers with the

implementation of QR codes in their surroundings. It seems that utilization of

QR codes among practical users are more adapted to it than the experiential

users. This paper also focused on current users to increase the QR code usage

that could help companies use to promote their products. To make it happen, it

requires us to studies the factors affecting users to use QR code. QR code use

highly interactive character, which requires users understanding towards the

technology that grows to fulfil the advertising purpose.

In conjunction with the research, the findings indicate that educated

users find that QR code easy to use. The findings show that practical users who

are focused on product related, such as collecting product information or

purchases use QR code more frequently than experiential users who primarily

focus on socialization and entertainment. Familiarity in usage of QR code in

general affects the statistics of users associated with these technologies. The use

of QR code expected to grow as smartphones become more affordable.

11

2.4.3 Adoption of Virtual Shopping: Using Smart Phones and QR Codes

According to this paper [3], the QR code using adoption theory a

conceptual model how virtual shopping with smartphone will emerge in sample

residents of UAE. Companies uses commercial medium via Internet as a way of

approaching business. Medium like smartphone and QR code used to capture

the code and scan with reader application which enables the information about

companies and products they want to know. M-commerce has been with us for

a long time and its important role in business operations from determining the

needs of the user to receive feedback from the product provided to the users. For

large-scale companies in UAE, the results of M-commerce have been positive,

though there are still some companies that are cautious to use M-commerce.

2.4.4 System and Method of Product Identification Using a URL

Based on paper [4], reveal a system and method for product

identification using URL. Introduce to each product will be have QR code

embedded with URL which will provide information about the product. The

URL is unique for each of items. Machine-readable printed format such as

camera phone are used to encode URLs which automatically retrieve associated

webpage when scan. The value of security features of the products when using

URLs to get information can be enhanced by providing clear instruction on what

to identify and how to interpret the features. To keep track on code

authentication, admin can check the requestor IP address and cookies on

browser. If many client request codes at the same time, different encryption key

will be given to avert duplicate code being generated.

12

2.4.5 Potential Business Applications of Quick Response (QR) Codes

This paper [5] is an attempt to examine the applications of QR code in

different industries and also presents the limitations of QR code that can provide

image of future research. The QR code is constructed of normally square

modules set out in a regular square array and shall consist of an encoding region

and function patterns, namely, finder, separator, timing patterns and alignment

patterns. QR codes allow consumers a more streamlined and quicker method to

connect with the content. QR code are capable of storing much more information

than the typical barcode. There are two limitations in using QR code, users need

smartphones which quite expensive compared to the conventional phone

especially to middle-age user. Secondly, in order to scan code, it requires

specific reading software.

The paper also shows that a lot of consumer have change preference to

QR code when interact with products. Many industries have start to use QR code

in their industries. The obvious would be the applications in mobile operating

system which most browser on smartphone nowadays support URL redirection,

which allows QR codes to send metadata to existing applications on the device.

Other examples in applications would be in education, publishing and library.

2.4.6 Packaging Features and Consumer Buying Behavior Towards

Packaged Food Items

This paper [6] purposes to investigate consumer’s buying behavior on

the effect of packaged food’s graphics, color, size, shape, product information.

Packaging on product is one of the marketing tool. To attract consumer, local

13

marketers need to understand consumer behavior locally so that have advantage

over international competitors. Product information with purchasing behavior

both plays a strong relationship. Packaging can leave impacts on consumers

from the unique value of products. Labelling in packaging importance compared

to other attributes like brand, price etc.. Now, consumer are searching for

environmental friendly Eco-packaging. It is not just good for environment but

also great for our health. Other features like graphics and colors play important

role in attracting buyers and great marketing tools. Lastly, packaging

information such as nutritional information did affect purchasing behavior.

Sometimes from wrong interpretation of information can lead to consumer

dissatisfaction of the product.

2.4.7 Effects of Placement Marketing on Product Attitude and Purchase

Intention in Traditional Industry

Based on paper [7] in traditional industry, product placement is comparatively

inexpensive but could achieve high contact and create positive links with program

characteristics. The research results show that product placement is the mixed

information of advertisement and public promotion, which presents the

advantages of the advertisers being able to control the presentation of

advertisement and the message source for public promotion being hidden so that

consumers misunderstand the fair and objective reports of media. Placement

marketing in traditional industry can avoid consumers being disgusted at too

many advertisement.

14

2.4.8 The Effect of Posting Source Type Information on Brand Reliability,

Product Attitude and Purchase Intention

In this paper [8], a survey was conducted to 160 people which will help

in study those three types of information between information source (General

person / Company) in Sina Weibo. Sina Weibo is SNS used by 73% of China’s

population. It is a platform for user to interact and share information. Most of

companies in China make use of this as a marketing tools to share about their

products on their official page. Consumer’s intention to purchase or use products

influenced by the attitude or belief. Brand reliability is credibility and high

confidence based on consumer’s belief and feel from the brand. Different

reactions depend on the type of source that conveys the message.

2.5 Summary between Related Research Paper

No. Author/Year Title Objective Method Description

1 Hong Mu,

David

Topolewski,

Karl W.

Scholz /

2012

Using Quick

Response

Codes to

provide

interactive

services

Provide

interactive

learning

through

recognition

of QR codes

and voice.

- QR code

- Voice

recording

Using QR

codes on or in

physical

objects to

launch

interactive

learning

sessions when

scanned with

client device

15

having an

optical sensing

device or

camera

2 Elif Ozkaya,

H. Erkan

Ozkaya,

Juanita

Roxas,

Frank

Bryant,

Debbora

Whitson /

2015

Factors

affecting

consumer

usage of QR

codes

To study

factors that

stabilize the

relationship

between

usefulness

and usage

rate of QR

code.

- QR code Factors that

contributed to

the use of QR

codes among

consumer

populations

that focused

on product-

related

activities.

3 Mira

Almehairi,

Tariq Bhatti

/ 2014

Adoption of

virtual

shopping:

Using smart

phones and

QR codes

To use

adoption

theory on

how virtual

shopping

using

smartphone

will emerge.

- E-commerce

- QR code

Consumer

adoption of

technological

innovations

process is

influenced by

consumer

characteristics.

With the

virtual

shopping it

16

forms a

smarter and

easier

shopping

experience for

customers.

4 Matthew

SELF,

Elliott

GRANT /

2007

System and

method of

product

identification

using a URL

To ensure

effective

product

regulation

and

consumer

safety.

- Encoded

URL in QR

code

- Encrypted

key

Each item of

product will

have a unique

URL which

then provide

access to

information.

Measures that

improve

accessibility

of product

information

and

authenticity

implemented

5 Irfan Bashir,

J Rama

Krishna

Naik, C

Potential

Business

Applications

of Quick

Examine

the working

of QR code

and their

- QR code

QR code have

implemented

in various

applications

17

Madhavaiah

/ 2013

Response

(QR) Codes

applications

in various

industries.

which focused

to provide

quick links to

information

and play roles

in marketing

purposes.

6 Muhammad

Usama

Ahsan

Ansari /

2019

Packaging

Features and

Consumer

Buying

Behavior

Towards

Packaged

Food Items

To

determine

effect of

packaging

graphics,

size and

information

written on

consumers

buying

behavior.

- Questionnaire Packaging

features have

shown their

importance in

product

features and

quality in a

manner that is

competitive. It

enhances

product

awareness and

attractiveness.

7 Chialing

Yao,

Paichin

Effects of

Placement

Marketing

on Product

To discuss

the effect of

marketing

on product

- Questionnaire Product

placement is

the mixed

information of

18

Huang /

2017

Attitude and

Purchase

Intention in

Traditional

Industry

attitude and

purchase

intention in

traditional

industry.

advertisement

and public

promotion.

Placement

marketing in

traditional

industry

present

product with

media

contents of

news and

dramas.

8 Jong-Moo

Kim / 2017

The Effect of

Posting

Source Type

Information

on Brand

Reliability,

Product

Attitude and

Purchase

Intention

To examine

reliability of

brand and

purchase

attitude

from

consumer

- Questionnaire Sina Weibo

has become a

shared channel

for both user

and company

to share

information

and review

about

products.

Consumer’s

intention to

19

purchase or

use products

influenced by

the attitude or

belief of

product.

Table 2.2: Summary of Related Research Paper

2.6 Summary

In this chapter, information about the past research and study on existing system

is done. The selection of thorough is very important to make sure that the system will

implement the right method. This study generally focused on the information

acquisition of the previous research and will be the guide to complete this project. From

this literature review, the enhancement and improvement will be made.

20

CHAPTER Ⅲ

METHODOLOGY

3.1 Introduction

The methodology is the set of the complete guideline that includes the models of

tools to carry out activities in the Software Development Life Cycle (SDLC). SDLC

splits the work into phases of activity for better planning and management of the system

development. Proper methodology can make the system more systematic and effective.

Choosing the right methodology can play crucial step to guide the researcher to manage

the given task. Therefore, this project proposed to use Prototyping Model as software

development.

This chapter also describes the design of implementing the system. It is divided into

two parts which is system design and database design. Entity Relationship Diagram

(ERD), Context Diagram (CD) and Data Flow Diagram (DFD) for this development

will be preview in this chapter.

21

3.2 Prototyping Model

The Product Certified Apps with QR code is proposed using Prototyping model. A

prototype is a model or a program which is not based on exact planning but is an early

approximation of the final product. It is built, tested and then reworked until an

acceptable prototype is finally accomplished. As shown in Figure 3.1, there are 4 phases

in prototype model which are requirement gathering, quick design, client evaluation and

refined the end functionality. Prototyping improves the quality of the specifications and

requirements provided to customers. Consequently, the requirements of the users are

met to the greatest extent.

Figure 3.1: Prototyping Model

3.3 Requirement Gathering

In this phase, the process of collecting requirement and understand the user

problems. Collection of trending issues about involvement of users in buying products

Requirement Gathering/

Modify Requirement

Quick Design/Build

Prototype evaluated by

Client

Refined the end

functionality

22

are identified. In this phase, Software Requirement Specification (SRS) is made. All

requirement for the application were gathered by brainstorming and analysing existing

systems. User’s information is reviewed by the questionnaire given to them. Data of

related to Product Certified Apps had also been collected by referring to the journals,

research paper and articles. After generating ideas, prioritize one idea that think the best

solution. The resulting agreement of idea is used for the early requirement.

3.3.1 System Requirement

System requirement in developing a system, hardware and software are

required to develop a successful system. It is a set of documentation that

describes the features and behavior of a system of application.

3.3.1.1 Software

No Software Description

1. Notepad++ Source code editor to write PHP language

for web

2. Laravel A PHP framework

3. XAMPP Manage connection between Apache and

MySQL

4. MySQL Relational database management system

5. Cordova Framework for hybrid mobile application

6. Google Chrome Browser to open the application and run

local host

7. Microsoft Office 2016 Prepare documentation of report and slide

9. Lucidchart Design ERD, CD and DFD

Table 3.1: Software requirements

23

3.3.1.2 Hardware

No Hardware Description

1. Laptop Brand: Acer Aspire E 14

Processor: Intel® Core™ i5-5200U CPU @

2.20GHz

Installed RAM: 12.00 GB

System type: 64-bit Operating System

Windows edition: Windows 10

2. Smartphone Brand / Model: Oppo / A3S

Android version: 8.1.0

Processor: Qualcomm SDM450 Octa Core

RAM: 2.00GB

Device Storage: 16.00 GB

3. Hard Disk Toshiba

500GB

For backup document data and system file

4. Universal Serial Bus

(USB)

To connect smartphone with laptop

5. Printer Print report and document

Table 3.2: Hardware requirements

3.4 Quick Design

Design phase was developed based on the requirement and output produced

during requirement phase. System design is prepared to identify the design of the system

and developed prototype based on functionalities that will be build. This include the

design of Context Diagram (CD), Data Flow Diagram (DFD) and Entity Relationship

Diagram (ERD) to show the process flow of the Product Certified Apps. Basically, all

the diagrams refer as guidelines while developing the system.

24

3.4.1 System Design

3.4.1.1 Framework Design

A framework describes what kind of processes involve and how they would

interrelate. Framework shows how the entities play their roles in the system.

In Figure 3.2, manufacturer need to manage product and their profile into

system database. Consumer can use QR code to view product details. The image of

QR code will be decoded after scanned and the exaction of product detail will happen

here. The system will extract information from database and show user. Basically

the manufacturer will insert product information and the system will encode it into

QR code image and store it in database for future use that will help in fast searching.

Consumer can view product details and give review on the product. Admin will send

approval to manufacturer and product information based on their certification.

Figure 3.2: Framework Product Certified Apps

25

3.4.1.2 Context Diagram (CD)

Figure 3.3: Context Diagram of Product Certified Apps

Figure 3.3 above shows the context diagram for the Product Certified Apps.

The context diagram consist of three entities which are the consumer, manufacturer

and admin. Manufacturer and consumer entities are required to login to access full

features of the system. Manufacturer can manage the product details and their

profiles. Consumer can view manufacturer profile and product info. Plus, consumer

also can add review like comments and price from which store they went. Admin

can view product and manufacturer information. Product registered under

manufacturer need to be approved of validity with certification of the company and

the product. Admin will give approval of the product and the manufacturer before

publish or open information to consumer.

26

3.4.1.3 Data Flow Diagram Level 0

Figure 3.4: Data Flow Diagram Level 0

Figure 3.4 shows a data flow diagram that consists of six processes and four data

stores. There are three processes that involved manufacturer in this level which are

registration, manage product and manage profile. There are also three processes

involved consumer which are registration, view product info and manage product

review. Admin involve one process which is manage approval of certification of

manufacturer and product.

27

3.4.1.4 Data Flow Diagram Level 1

Data flow diagram (DFD) level 1 shows the system is divided into the subsystem,

each subsystem explain more about each of module.

MANAGE MANUFACTURER PROFILE

Figure 3.5: Manufacturer manage Profile

Figure 3.5 above shows DFD level 1 for manufacturer manage profile. In this level,

manufacturer can manage their profile details into Manufacturer (D1) data store. They

can manage profile details such as adding and updating their company information.

28

MANAGE PRODUCT INFORMATION

Figure 3.6: Manufacturer manage Product

This level defined the processes involved in manage product as shown in Figure 3.6.

Manufacturer can add product information and new details will be stored in Product

(D3) data store. The same process will be repeated for updating and deleting the

product data.

29

VIEW PRODUCT INFORMATION

Figure 3.7: Consumer View Product Information

Figure 3.7 shows DFD for Consumer view product information that stored in Product

(D3) data store. Basically, consumer can view all product information including the

information about manufacturer that is stored in Manufacturer (D1) data store. For

viewing product, consumer can view by scan QR code to view product information.

30

CONSUMER MANAGE PRODUCT REVIEW

Figure 3.8: Consumer manage Product Review

Figure 3.8 above shows DFD level 1 for consumer manage product review. Product

review involves consumer comments and feedback of product price. There are three

processes which is view price review, add price review and add comments. Product

review record will be saved in ProductReview (D4) data store. This product review can

help share extra information from multiple consumer.

31

CONSUMER MANAGE CERTIFICATION

Figure 3.9: Admin manage Certification

Figure 3.9 above shows DFD 1 for admin manage certification. This process involves

admin check status of SSM certification of manufacturer and Halal certification of

product. If admin approve the certification, then approval of the certification of the SSM

and Halal status will be confirmed. The manufacturer info and product info are then

valid to consumer references. The SSM approval will be saved in Manufacturer (D1)

data store, while Halal approval will be saved in Product (D3) data store.

32

3.4.2 Data Model

3.4.2.1 Entity Relationship Diagram (ERD)

ERD is the common technique for drawing a data model to representing the data that

are used and created. ERD for Product Certified Apps is as shown in Figure 3.10. It

consists of five (5) entities. The entities are manufacturer, consumer, product, price &

location, comment and bookmarks. Consumer and manufacturer entities share the same

set of attributes.

Figure 3.10: ERD for Product Certified Apps

33

3.4.2.2 Data Dictionary

Data dictionary for Product Certified Apps with QR Code was created. There are 5

tables that are involving in storing data of the system.

Consumer

No. Attribute Type Length Key Description

1. userID varchar 11 Primary Consumer ID for login

2. email varchar 100 Backup ID for login

3. password varchar 100 Password for login

4. name varchar 100 Consumer name

5. image longblob User profile image

6. created_at datetime Timestamp data created

7. updated_at datetime Timestamp data

updated

Table 3.3: Data Dictionary for Consumer

Manufacturer

No. Attribute Type Length Key Description

1. ssmID varchar 30 Primary Manufacturer SSM

registration number

2. email varchar 100 Backup ID for login

3. password varchar 100 Password for login

4. name varchar 100 Manufacturer name

5. description text Manufacturer

description

6. phone varchar 12 Manufacturer phone

7. address varchar 100 Manufacturer address

8. type varchar 11 Type of

manufacturing

9. ssmCertified longblob Image of SSM

certificate

34

10. image longblob Manufacturer image

11. created_at datetime Timestamp data

created

12. updated_at datetime Timestamp data

updated

13. requestApprove date Request approval date

14. approvalStatus int 11 Admin approval

status

Table 3.4: Data Dictionary for Manufacturer

Product

No. Attribute Type Length Key Description

1. productID varchar 20 Primary Product barcode

number

2. ssmID varchar 30 Foreign Manufacturer SSM

registration number

3. productName varchar 100 Product name

4. brand varchar 11 Product brand

4. productDesc text Product description

5. type varchar 11 Type of product

6. ingredient text Product ingredients

7. halalCertified longblob Halal status of product

8. barcode longblob Image of QR code

9. productImg longblob Image of product

10. created_at datetime Timestamp data

created

11. updated_at datetime Timestamp data

updated

13. requestApprove date Request approval date

14. approvalStatus int 11 Admin approval status

Table 3.5: Data Dictionary for Product

35

Comment

No. Attribute Type Length Key Description

1. commentID varchar 11 Primary Auto-increment

2. productID varchar 20 Foreign Product barcode

number

3. userID varchar 11 Foreign Consumer ID

4. body text Content of comment

5. created_at datetime Timestamp data

created

Table 3.6: Data Dictionary for Comment

PriceReview

No. Attribute Type Length Key Description

1. priceID varchar 11 Primary Auto-increment

2. productID varchar 20 Foreign Product barcode

number

3. userID varchar 11 Foreign User ID

4. price varchar 11 Product price

5. address varchar 100 Address of store

6. lng float 10, 6 Longitude of store

7. ltd float 10, 6 Latitude of store

8. created_at datetime Timestamp data

created

Table 3.7: Data Dictionary for PriceReview

36

3.4.3 Proof of Concept

Login/Register View

Figure 3.11: Login Interface Figure 3.12: Registration Interface

Figure 3.11 above shows login interface for both user which is manufacturer and

consumer. They need to insert username and password to access the system. If the

user not yet registered, the system will lead them to registration interface as shown

in Figure 3.12 to register. User has to choose to register as consumer or

manufacturer. Their choice will depends on what functionality they want to use.

37

Manufacturer View

Figure 3.13: Manufacturer Main Page Figure 3.14: Manufacturer Profile Interface

Figure 3.15: Product Information Form Interface

Figure 3.13 shows the main page for manufacturer after they successful login and

signup into the system. In this interface manufacturer can manage their profile, view

38

product list, add new product. Figure 3.14 is form for manufacturer to edit their

profile. While Figure 3.15 shows interface to add new product.

Consumer View

Figure 3.16: Scanning Product QR code Figure 3.17: Product Information Interface

Figure 3.16 above shows process of scanning QR code on product via smartphone

camera. After the process, product page will be directed to application and the

product information will be shown as in Figure 3.17. On this interface, consumer can

set bookmarks on the product. If they wish to comment and add price and location,

they can click menu on the right above. Interface for comment can be seen on Figure

3.18, while price and location on Figure 3.19.

39

Figure 3.18: Comment Interface Figure 3.19: Price & Location Interface

3.4.4 Solution Complexity

3.4.4.1 Quick Response (QR) Code

QR means “quick response”, and it does just that, a quick scan that directly links

you to videos, web pages and simple text messages. In 1994, a Japanese company

named Denso-Wave first developed QR codes and was approved in 2000 by ISO

[Rouillard, 2008]. Such, high-density two-dimensional graphic images are basically just

barcodes consisting of virtual squares rather than bars. QR codes are a neat way of

storing data in a small space.

40

Figure 3.20: QR code mechanism

All barcodes and QR codes work on the same principle, such as ray absorption. As

shown in Figure 3.20, the required patterns are the areas that cannot be changed. The

position part tell the scanner where the edge of the QR code. The red parts is the format

information which tell what type of information will be encoded. While the blue areas

represent the version number of the QR code.

3.4.4.1.1 Deep Linking

Mobile deep links are URIs that point to specific locations within apps, which

involved web-to-app communications. These schemes are similar to how a

website URL can direct you to a specific page on a website. To realize the data

interoperation, the concept of “deep link” is proposed to enable directly opening

a specific page of an app from outside with a uniform resource identifier (URI)

[Fabian, 2015]. It helps users go to certain page within an app, which making

the user journey easier by getting them closer to the end goal sooner rather than

direct it first to home page as shown in Figure 3.21.

41

Figure 3.21: Process of deep linking

The mechanism of deep linking shown in Figure 3.22 depends on a simple idea

where applies different routing to various cases with proper solution. Route web

browsers to a web page with HTTP URL and route mobiles to open specific app

with URI. If the app is not installed, lead user to install it.

Figure 3.22: Deep linking mechanism

42

3.4.4.2 Hybrid Mobile Application

The hybrid technique developed in website form will be used for this system and

then converted into a mobile application using Cordova framework. When hybrid apps

downloaded from an app store and installed locally, the shell can attach to any features

that the mobile platform offers via a browser embedded in the device. The browser and

its plug-ins run on the back end and are invisible to the end user.

Hybrid apps are well-liked because they let developers to write code for multiple

platforms even though they do it once for mobile app. It may run a little bit slower due

to the extra layer between source code and the target platform. Hybrid app are typically

written in HTML5, CSS and JavaScript, similar to Web app. It basically run code inside

a container. To access device hardware, the browser engine is used to render HTML,

JavaScript and native APIs.

3.5 Prototype Evaluation

This phase involve the developer to show the prototype of the application to the

client. However, for this proposed project, it is show to the panel on presentation day.

The panel will evaluate whether the project achieve the aspects requirement or not. If

there is lacking on the project, developer will know which part need to be improve.

Hence, the requirement need to be fulfil or modify.

3.6 Refined End Functionality

Lastly, refined end functionality phase involve when the project cannot be

working or not function. It is start with brainstorming session with the supervisor to

come up with the solution of the problem that occurred. The program of project will be

refined its end functionality based on the problem solving.

43

3.7 Summary

In this chapter, we discusses the methodology specification used for development

this application with hardware and software required to develop this mobile application.

The methodology used by Product Certified Apps is Prototyping Model. All the phases

involved in this methodology had been clearly defined in this chapter. It also explains

about data model, process design, proof of concept, system requirement and techniques

that are used in this project that will guide to successful of this project.

44

REFERENCES

Mu, H., Topolewski, D., & Scholz, K. W. (2009). Using Quick Response Codes to

Provide Interactive Services. U.S. Patent Application No. 12/258,064.

Ozkaya, E., Ozkaya, H. E., Roxas, J., Bryant, F., & Whitson, D. (2015). Factors

affecting consumer usage of QR codes. Journal of Direct, Data and Digital Marketing

Practice, 16(3), 209-224.

Almehairi, M., & Bhatti, T. (2014). Adoption of virtual shopping: Using smart phones

and QR Codes. Journal of Management and Marketing Research, 17, 1.

Self, M., & Grant, E. (2007). System and Method of Product Identification Using a

URL. U.S. Patent Application No. 11/743,652.

Bashir, I., Naik, J., & Madhavaiah, C. (2013). Potential Business Applications of

Quick Response (QR) Codes. Prajnan, 41(4).

Ansari, A., Usama, M., & Siddiqui, D. A. (2019). Packaging Features and Consumer

Buying Behavior Towards Packaged Food Items. Ansari, MUA and Siddiqui, DA

(2019). Packaging Features and Consumer Buying Behavior towards Packaged Food

Items. Global Scientific Journal, 7(3), 1050-1073.

Yao, C., & Huang, P. (2017). Effects of placement marketing on product attitude and

purchase intention in traditional industry. Eurasia Journal of Mathematics, Science

and Technology Education, 13(12), 8305-8311.

Kim, J. M. (2017). The Effect of Posting Source Type Information on Brand

Reliability, Product Attitude and Purchase Intention-Comparison of general person

posting and corporate posting in Sina Weibo. Journal of Digital Convergence, 15(8),

367-374.

45

Nielsan. (2015). “Malaysia Ever Ready to Try New Product”, Retrived on September

23, 2019 from https://www.nielsen.com/my/en/insights/article/2015/malaysians-ever-

ready-to-try-new-products/.

Flyte. (2011). “New Media 50-Count 'Em, 50!-Creative Uses of QR Codes”,

Retrieved on October 4, 2019 from https://www.takeflyte.com/flyte/2011/03/50-

count-em-50-creative-uses-of-qr-codes.html.

Oracle. (2011). Cross-Channel Commerce 2011: The Consumer View. Accessed from

https://www.marketingcharts.com/industries/retail-and-e-commerce-20429

Peterman, M., & Žontar, T. P. (2014). Consumer Information and Labeling. In Food

Safety Management (pp. 1005-1016). Academic Press.

Uke, A.. (2012). Buying America Back: A Real-deal Blueprint for Restoring American

Prosperity. SelectBooks.

Rouillard, J. (2008, July). Contextual QR codes. In 2008 The Third International

Multi-Conference on Computing in the Global Information Technology (iccgi 2008)

(pp. 50-55). IEEE.

Balaji, S., & Murugaiyan, M. S. (2012). Waterfall vs. V-Model vs. Agile: A

comparative study on SDLC. International Journal of Information Technology and

Business Management, 2(1), 26-30.

Fabian Schlup. (2015). Google Developers: App deep linking with goo.gl. Retrived on

November 25, 2019 from https://developers.googleblog.com/2015/05/app-deep-

linking-with-googl.html.

46

APPENDIX A

Gantt Chart (FYP 1)

47

APPENDIX B

Gantt Chart (FYP 2)