Khóa luận tốt nghiệp: An Embedded based electronic album for worship

Acronyms Stands for 1 API Application Programming Interface 2 HTTP Hyper Text Transfer Protocol 3 JSON JavaScript Object Notation 4 PHP Hypertext Preprocessor 5 SQL Structured Query Lang

VIETNAM NATIONAL UNIVERSITY HOCHIMINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY

ADVANCED PROGRAM IN INFORMATION SYSTEMS

TRINH HOANG NGUYEN - LE ANH TAI

BACHELOR OF ENGINEERING IN INFORMATION SYSTEMS

HO CHI MINH CITY, 2020

|

NATIONAL UNIVERSITY HOCHIMINH CITYUNIVERSITY OF INFORMATION TECHNOLOGYADVANCED PROGRAM IN INFORMATION SYSTEMS

TRINH HOANG NGUYEN-16521755

LE ANH TAI-16521049

BACHELOR OF ENGINEERING IN INFORMATION SYSTEMS

THESIS ADVISOR

DR NGUYEN THANH BINH

HO CHI MINH CITY, 2020

ASSESSMENT COMMITTEE

The Assessment Committee is established under the Decision , date

— by Rector of the University of Information Technology

¬ - Chairman

First of all, We would like to sincerely thank the teachers of the University of

Information Technology, National University of Ho Chi Minh City, especially the

teachers of the Information System Faculty It is thanks to the valuable knowledgethat the teachers passed through the school hours that have created a stepping stoneand solid luggage to help me complete the topic better

In particular, We would like to extend my sincere thanks and deep gratitude DrNguyen Thanh Binh, thank you teacher for enthusiastic guidance and favorable

conditions for me to complete this thesis Thanks to the suggestions and corrections

of teacher We can overcome my own shortcomings and errors to better orient thetopic development

Besides, We would also like to thank my friends and especially my family for

always cheering and helping me to improve this topic

During the process of implementing the topic, We always put the research,research and development of the topic as a top goal combined with the availablebackground knowledge to be able to complete the topic in the best way However, inthe implementation process, shortcomings are inevitable Therefore, We look forward

to receiving helpful contributions and advice from the teachers to strengthen theexisting knowledge and be a prerequisite for me to be able to implement otherprojects in the future

Thank you sincerely

UNIVERSITY OF INFORMATION TECHNOLOGY

Advanced

ADVANCED PROGRAM Education

IN INFORMATION SYSTEMS Program

THESIS PROPOSAL

THESIS TITLE: An Embedded Based Electronic Album For Worship

Advisor: Dr Nguyen Thanh Binh

and Javascript However, due to time and resource limitations, this product will be

defined in the Scope section

Supports basic display scheduling features, display functions (Single image display,Double image display, Random display, How long to display before image transfer

Support to create basic interfaces for images to display (add borders to pictures, add

frames, add necessary information on pictures, )

Methodologies:

Device : Raspberry Pi circuit, LCD panel

The programming languages that will be used are php, Javascript, HTML, CSS

Framework : Vue.js, LaravelModel of application : Web based application, Server - client

Operating system : Raspberry Pi OS (previously called Raspbian)

4 Expected Results :

The expected outcomes of this project are as the following:

- Build a mesh product that meets the needs above

- Cheap for a set of products

- Easily used to cater to the worship and spiritual needs of each family

Research time lines:

Task Start day | End day Assign to

Meeting with lecturer for the issue of | 14/8/2020 | / / Tai, Nguyen

the project

Design database 20/8/2020 | 30/8/2020 Tai, Nguyen

Front end | Design UI 25/8/2020 | 1/10/2020 Nguyen

Mix Laravel projectBackend | Design web system 25/8/2020 | 25/10/2020 Tai

Create APIServer Set enviroment and | 25/10/2020 | 24/12/2020 Tai, Nguyen

server for device

Push project into device

Testing system for complete 24/12/2020 | 30/12/2020 Tai, Nguyen

Tasks assignment

Approved by the advisor(s)

Signature(s) of advisor(s)

Ho Chi Minh city, / /

Signature(s) of student(s)

IV

TABLE OF CONTENTS

ACKNOWLEDGIMEÌN TỀ 5 << HH TH HH HH nh iTHESTS PÑPP() SA Ì 5< < 5< << TH HT ng ng iiLIST OF TABLES << < si HH Họ TH I0 ixLIST OF AC ROÌN Y|ÌM S << << HT HH TH HH nh xABSTRACT 0

Chapter 1 PROBLEM (JVE.V IE, ŸY -< << < << SH KH nh HH nhe 1

1.5 Repor( LaYOUI 0 55 <5 5 9 HH 0000060 3Chapter 2 THEORETICAL PA SÌ(S 5 «5< << << x1 KH kg ke 5

2.1 TheoretiCal basis << 5< 5s HS 890850850890 50 5

2.2 Technical basis - <5 s4 HH 000000408350 50 5

"An 52.2.2 REST and RESTful API - ¿5+ +2+x+*xvExrrxrrrrrrrrrrrrrrrrrrrrrrrrree 62.2.3 Build website application by PHP frame-work Laravel -. 72.2.4 Design front-end and fetch API with Vue.]S -<«+<<<<<<s<+ 12Chapter 3 SYSTEM ANALYSIS AND DESIGN ssssssssssssssssssscsssesscssssssscsscsesees 15

3.1 Analysis requirement: d G5 (G55 S9 59 93 93 9.9906 09558958 15

3.1.1 Function requirements: 0 153.1.2 Non-function r€quIIr€fm€fIfS: - «<< s*++*++vEE+eeeeeeeeeeeeereses 15

3.2 Use case đÏagraIm s- (5 << G0000 8806 16

3.2.1 Use case SD€CIÍICAfIOT - SG SG S1 ng 173.2.2 Description Of ACÍOTS - c3 1319 92 2v 1v vn ng ng 183.2.3 Description Of Usecases: SG S2 S 11v ng ng vn 19

3.3 Activities dỉapraim << HH nu” 20

3.3.1 Add a new image to SlideShow -c +< 1xx ervereee 20

3.3.2 Add relationship to OJ€CÍ - G62 E1 k3 E3 S VESkEeeesssrkesrkrske 22

3.3.3 Setting default Í€afUT€S -Ă + S1 vn ng ng ng 243.3.4 Update of each 1mage - + Hi 26Em? vá 283.3.6 Delete relafIOTISHIID - - - << E3 11 19v HH rà 30

3.4 Sequence đỉaØraIm d << 5s s9 9 9.9 99 0 0050 32

3.4.1 9) ai 323.4.2 Add mew ê nšš"“."." 333.4.3 Add 6i2i00) 057 353.4.4 Setting default features - c2 321121119511 11 1n vn rry 373.4.5 Update of each 1mage - - + ng 39S5) 7n 4I3.4.7 Delete relatIOTISHIID - -GĂ - + S019 1 ng 43

4.3 Development environment and system deploymen( <- « 57

4.3.1 Development environment - - - + «+ «+ + s*++x++eeeeeeeeeeeeeerse 57

4.3.2 Deployment environmefIf - << + + + x*++*EE++eeE+eeeeeeeeeeeeeerreerre 584.3.3 Tcstnl wýc à.àeŸeeeees- 62

Chapter 5 CONCLUSION 5 << << KH KH Huế 70

Š.l ]€SUI( -<G HH HH HC n0 90008080 0186 70Š.2 Wealkness coco ĩ5 SH HH 9 000 08.960.040.04004 000 705.3 Orientation of topic developMeNt 5 G55 G5 5< 95 999555999556 71Chapter 6 REEFEREINCE - «<< << HH KH KH TH HH HT nhe 72

VỊ

Figure 3.4 Activity diagram Setting default features -«c<s<<<<eseeesesses 24 Figure 3.5 Activity diagram Update of each image o 5< ssssssserereeeeesee 26

Figure 3.6 Activity diagram Delete ÙITI(Ø© 5< 5< << re, 28

Figure 3.7 Activity diagram Delete relationship o-5-< 5< Sessseerereesersre 30 Figure 3.8 Sequence diagram display image c.sscssssssssssersssssssssssssssssssssssssscssssceees 32 Figure 3.9 Sequence diagram add new LITIGÔ << S< S55 5< ESESEeEstetereeeeesee 33 Figure 3.10 Sequence diagram add relationship -5-5<c<c<c<c<ceeeeeeses 35

Figure 3.11 Sequence diagram Setting update @QÍHLTF€S < «5< <<s<s<<sesx+ 37

Figure 3.12 Sequence diagram update of each image -< «s55 S<sss£sesesess 39 Figure 3.13 Sequence diagram delete image s.sssssssssssssssssssssssesssssssassssssesesssseaeass 41

Figure 3.14 Sequence diagram delete relationship <-< 5< <<<<s<<<<e<x+ 43

Figure 3.15 Class (ÏÏ(Œ@TFŒTHH 5-5 << << TT HT ngan re 45 Figure 3.16 Database (đÏÌ(ĐT(THN 5-5 << 5< S3 ESESESEEEESESESEeEeErkrrsrrerereererere 48 Figure 4.1 OR to connect the WIT-ÏLOSÍOOÍ 5-55 5< sssreteteteeeersrsrsrersre 52 Figure 4.2 OR to open Admin Page .ỏ S3 v11 1e rersre 52

Figure 4.3 3 function of AAMIN DÔ S5 Ă << x1 ng gen ee re 52

Figure 4.4 [con add Mew recor, ccssscssssserssssssssscsssssessssssesessensssssssessenescssescssessssaeseeees 53 Figure 4.5 Create new fOrim ccccscssssssscscsssrsssssvsssscssssssesssssesesssceseaeseesesssssssacsesenesssssesaeaes 53 Figure 4.6 S Icon setting the default features .csssscscsscssssssssersssssssssssssssenesesssesaeaes 53

Figure 4.7 Setting OTHH 5< nh HT HT TT gan nh 54Figure 4.8 Time transition funtion, csccccrcscsrssesccrescsressscesssssesssssssssensssssssessessscsesseeees 54

Figure 4.9 Icon Relation S©ÍẨÙHE Ăn HH T1 gen gere 55 Figure 4.10 Relation OFHH << s< << TT ng TT gen gerere 55

Figure 4.11 Delete ÌCOHH <- «5< < << TT ng ng ng ng gen re 55

Figure 4.12 Action with records, ccsccccscsserssssssssscsssscsssssssssesssssscssssssessscesssssssssssseeseeees 55

Vil

Figure 4.13 Icon 3 option of each Ọj@CÍ << 5< EkSsESEESEeESEstekessseesesese 56 Figure 4.14 Upage task ,[OFFHH «<< << s99 9 1111111141111 re 56 Figure 4.15 Icon relationship of cach ObjeCt c.s.ssssssssssessssssssssesssesssssssassssssesesssssaeaes 56

Figure 4.16 Add relation ƒOTHHL 5< 5< << th HT Hung re 57

Figure 4.17 RAR files c.sssssssssssssssssssesssssnscesssssessssesesesesesesescesssesesesesecssssseesesesenesseeseeees 58 Figure 4.18 Zip files ecescssssssssssscssssssssssesscsssscssesesensssssecsssseseessesessssaeseesessnsesseseseeseeees 59 Figure 4.19 Export file sccccccscsssssssssssscscscsssssssssssssssssssssssesssessssesssesesesescscsssscsesenssssssesacess 59

Figure 4.20 Timport (Ï(Œ Í( << << < << x1 x1 g1 gen gen re” 60

[i0 9209,.0ẼA.1 070n8n6nn6 60 Figure 4.22 Website interface ú o-c << kAkxE 1161114181881 8111158 011g, 62

Figure 4.23 Create Mew 5-5 << << TT ng TT ng nen ng 64

Figtre 4.8 51 00Ẻ0nẺnẺ8886 65

Figure 4.25 Relation page cc.cscsccscscsssssssessscsssscscsssscsnsscensssecesesssssscssescscessscessscsssecscseesesees 66

Figure 4.26 Confirm wWithdow 5-5 5< << 9 3 SESESEEEESESESEeEekrkrsrsrsrrereererere 67 Firtige 4.27 Update page << << <3 v1 9139911111111 1111111 ere 67

Figure 4.28 Add relation DQE© 5< <- << << xxx 91 1611 6 1 1x1 genee re 69

VIII

Table 4.24 Description Of Create PAGE ssssseesersssrsssssesesenesesssessescseassssesesstcesesessseseeses 64Table 4.3 Description Setting pđ6 «-s<<<+ Error! Bookmark not defined.Table 4.4 Description relation Page -<-« Error! Bookmark not defined.

Table 4.5 Description Update Page -s-s-5 Error! Bookmark not defined Table 4.6 Description Add relation page - Error! Bookmark not defined.

IX

LIST OF ACRONYMS

NO Acronyms Stands for

1 API Application Programming Interface

2 HTTP Hyper Text Transfer Protocol

3 JSON JavaScript Object Notation

4 PHP Hypertext Preprocessor

5 SQL Structured Query Language

6 HTML Hypertext Markup Language

7 CSS Cascading Style Sheets

8 REST Representational State Transfer

9 CRUD CREATE,READ,UPDATE,DELETE

10 XAMPP X (any of four different operating systems),

Apache, MySQL, PHP and Perl

11 UI User Interface

Thesis “an embedded based electronic album for worship” is aimed at people who

have a small living space but want to worship their loved ones who have died Withthe growing technology and smartphone, it will be practical to present as manyworship photos on the screen as you want and be controlled remotely viasmartphones

This thesis is to build a web application, use PHP to build API and then useJavaScript to get and use them for the user interface and then embed the system intothe Raspberry Pi device to play through the screen With the purpose of providing auser purpose to manage projected images Since the system is designed under thelocalhost network, after installing the entire system for users, they can operate all thefunctions of the system such as modifying the user's system relationships in the

image, making changes Show photos, change the time between images, choose

important dates to take photos on this date

After surveying and understanding the needs of users, the project is developed inthe following direction:

- Built in perfect interface and easy to use for users, using beautiful and reasonablephoto frames Besides allowing users to manage images conveniently

- Construction tools include: PHP, JavaScript, Laravel, API, Html, CSS, Vue.js,

MySQL

Chapter 1 PROBLEM OVERVIEW

1.1 Problem statement

Nowadays, people in small cities are flocking to big cities to work and live.Therefore, in addition to the need for material life, the spiritual life is also morefocused than before In fact, the vast majority of people only live in rented housesand live in apartments with small areas, so the worshiping position has been arranged

a small position in the house Therefore, the need to worship at the same time manypeople have died becomes difficult

Keeping pace with the age of information technology is very developed Andtechnology and smartphones are also the indomitable thing of a person living in a bigcity Therefore, the integration of information technology into worship also inspires

us to implement a new project

In order to solve everyone's worshiping needs but encounter obstacles when theresidence is small, the project aims to build a web application that helps to playremote-controlled intelligent worship images to help solve the problem

Current status survey

In fact, individual organizations are doing online forms of worship, helping clients

to perform the worship from afar through the organizer and only observing on thephone screen As for us, we provide a visual display screen of the deceased's worship

so that clients can perform home worship for many people without wasting space

As mentioned above, the proportion of the population moving to live in big cities

is increasing rapidly, but with low incomes, people's accommodation is also verylimited According to a survey by vneconomy newspaper, in 2019 in Ho Chi MinhCity, about 476,000 households do not have a house or are living with relatives,accounting for nearly a quarter of the total number of households In which, about20,000 cadres and civil servants do not own houses; 300,000 households have theneed to rent social housing; 143,000 households have the need to buy, rent and buy

social houses (accounting for 65% - 94% of the survey respondents) With the currentsituation, there are about 42% of houses under 30 m2 / house, even 22.4% of housesunder 20 m2 / house.

According to Assoc Prof Nguyen Hoi Loan and MA Nguyen Thi Hai Yen, inastudy on belief in ancestor worship, 75.3% of people consider ancestor worship as ameans to educate morality, filial piety, and compassion for Descendants of the family,the clan in order to preserve the family style and maintain the tradition of the nation,

so that family members, lineages and communities bond together

Thus, according to the two above things, the worshiping demand of people is veryhigh but does not have a small living area So the web application that displays images

and is remotely controlled will find a foothold even if it is just a newly developed

web application.[1]

1.2 Thesis objective

The goal of this thesis is to use RESTful API to design a web application and thenembed it in the Raspberry Pi device to provide the customer with a good qualityproduct

In the website, users can freely post their new photos and edit functions such asadding and deleting photos and updating information and relationship of images Theoperations to change the way and time for image transition are also arbitrarily changed

The image files stored in the project are for illustrative purposes only, not related

to any copyrighted material

- Platform: Laravel and Vue.js

- Programming language: PHP, Javascript, Html and Css

- Database: MySQL

- Library:Bootstrap

1.4 Methods and tools of implementation

1.4.1 Method

- Use PHP and MySQL to build REST API server

- Use Html, CSS, JavaScript and Vue.js to design web interface and to get andsend data to server by means of API

1.4.2 Tools

- Laravel: PHP that helps in building the back-end of the site

- MySQL: Free database management system

- XAMPP: PHP advancement climate, permitting site trial on localhost

- VueJS : Framework of JavaScript, used to build user interfaces

1.5 Report Layout

The thesis is divided into five chapters

Chapter 1: Problem Overview

General introduction of thesis content Content of the first chapter includes: accountselection, research objective and scope subject resource, subject, researchmethodology and implementation of content, layout of the report

Chapter 2: Theoretical basis

Introduce and give reasons to choose the technologies used in the topic Givinggeneral information and analyzing advantages and disadvantages of the algorithms

that will be used in the topic

Chapter 3: System analysis and design

In this part, the article will provide about synchronous process diagram, systemdesign analysis, database design, interface design.

Chapter 4: Installing, User guide and Deploying the System

This chapter covers user guide, the implementation of an integrated process andassessment of the ability to take orders and order status as well as the shipping orreturn status of goods and products

Chapter 5: Conclusion

Generalizing the results achieved when implementing the topic, new points of the

topic and development orientation for the topic in the future

Chapter 6 : Referrence

Synthesize all references used in the thesis

Chapter 2 THEORETICAL BASIS

Web app

in Web

Browser Server

H Database

Figure 2.1 Relationship between client, API and server

Each API contains and is implemented by function calls — language statements thatrequest software to perform particular actions and services Function calls are phrasescomposed of verbs and nouns, for example:

Start or finish a session

Get amenities for a single room type

Restore or retrieve objects from a server

APIs serve numerous purposes Generally, they can simplify and speed up softwaredevelopment Developers can add functionality (i.e., recommender engine,accommodation booking, image recognition, payment processing) from otherproviders to existing solutions or build new applications using services by third-party

providers In all these cases, specialists don’t have to deal with source code, trying to

understand how the other solution works They simply connect their software toanother one In other words, APIs serve as an abstraction layer between two systems,hiding the complexity and working details of the latter [2]

2.2.2 REST and RESTful API

2.2.2.1 REST and RESTful API

REST, short for Representational State Transfer, is a model design that portraysapplications that pass on and partner with each other It involves three fundamentalparts, for instance, outside specialist, API laborer and client laborer In it, the clientcan be anything, online application, library or even extraordinary programming of a

program.

REST licenses clients to get to the API specialist and execute requests to recuperate,

change, or eradicate data from the external laborer Programmers can wholeheartedlyget to and modify data from the specialist without acknowledging how the systemcapacities

The crucial show that REST uses is HTTP, a normal show with most applications or

web benefits today It gives lively execution concerning an energetic vehicle andmakes REST designing more quick

In addition, REST in like manner has the potential gain of using a (stateless) show.This system doesn't use gatherings, treats, doesn't need to understand that information

in every requesting to an external specialist This helps REST with diminishing thestack outwardly specialist, improving working efficiency

REST was at first expected for use with web organizations In any case, any item canuse REST as an expansion to talk with various applications better and even morecapably That is moreover the inspiration driving why REST is the default standardfor most shows Besides, the APIs that are arranged by a REST designing are called

RESTful APIs.[3]

2.2.2.2 CRUD

CRUD is a contraction that comes from the universe of PC programming and impliesthe four limits that are seen as essential to realize a persisting accumulatingapplication: make, read, refresh and erase Vigorous limit insinuates any dataaccumulating contraption that holds power after the device is energized off, forinstance, a hard plate or a solid state drive Alternately, sporadic access memory andinward saving are two cases of capricious memory - they contain data that will beerased when they lose power.[4]

2.2.2.3 REST and CRUD

Ina REST environment, CRUD often corresponds to the HTTP methods POST, GET,PUT, and DELETE, respectively These are the fundamental elements of a persistent

¢ PHP scripts can only be interpreted on a server that has PHP installed

» The client computers accessing the PHP scripts require a web browser only

¢ A PHP file contains PHP tags and ends with the extension ".php"

The best things in utilizing PHP are that it is amazingly straightforward for anewbie, however offers many progressed highlights for an expert developer Try not

to be apprehensive perusing the not insignificant rundown of PHP's highlights Youcan hop in, in a brief timeframe, and begin composing basic contents in a couple of

hours

k Open source: It is developed and maintained by a large group of developers.This will help in creating a support community and abundant extension libraries

k Speed: It is relatively fast, since it uses not much system resources

° Easy to use: It uses a C like syntax, so for those who are familiar with C, it’s

very easy for them to pick up and easy to create website scripts

° Stable: Since it is maintained by many developers, bugs are rather found and

fixed quickly, making it a stable software

° Powerful library support: You can easily find functional modules you needsuch a PDF, graph etc

k Built in database connection modules: You can connect to databases easily

using PHP, since many websites are data/ content driven, so we will use database

frequently, this will largely reduce the development time of web apps

to maintain

° Weak type: Implicit conversion may surprise unwary programmers and lead

to unexpected bugs Confusion between arrays and hash tables This is slow and could

be faster There are often a few ways to accomplish a task It is not strongly typed It

is interpreted and uses curly braces

° Poor Error Handling Method: The framework has a bad error handling

method It is not a proper solution for the developers Therefore, as a qualified PHPdeveloper, you will have to overcome it

° PHP is unable to handle large number of apps: The technology is helpless

to support a bunch of apps It is highly tough to manage because, it is not competentmodular It already imitates the features of Java language.[5]

2.2.3.2 Laravel

Laravel is one of the most popular PHP Frameworks in the world used to buildweb applications from small to large projects

Laravel is the choice of many professional PHP programmers for its performance,

features and scalability.

Laravel follows the Model View Controller (MVC) which makes it easy to learnand quickly prototype web applications

Updates Manipulates

Sees Sees

Laravel tuân theo Mô hình MVC

Figure 2.2 MVC model

Laravel eliminates the pain of web programming by providing built-in features

like authentication, email, routing, sessions and mote

Laravel is easy to customize so you can create a web project structure that meetsthe needs of your own With Laravel's beautiful and elegant syntax, you can writeeasy-to-read code that is easy to maintain

Laravel was created by Taylor Otwell in 2011, since then he has continued todevelop this Framework heavily and make it compatible with the latest webtechnologies

Advantage

- Open source

The Laravel framework with free and open source code allows you to build

large and complex web applications quickly and easily All you need to do is

install PHP along with a text editor to get started

- Community support

In case you are stuck with difficult bugs but someone has experienced andguided you, nothing is better Laravel has an extremely large and powerfulsupport library system compared to other frameworks If you report bugs orviolate framework security, the community response will be very quick

- Follow MVC

The MVC structure and OOP object-oriented programming are still preserved

in the Laravel Framework, helping to provide better documentation, and

increase performance

- Database migration is easy

Database migration is one of the key features of Laravel It will allow you tomaintain the application database structure without necessarily recreating.Database migration also allows you to write PHP code to control databasebecause you have to use SQL It also allows you to recover from the most recent

changes in the database

10

- Complete security features

Your applications will be very safe when you use the laravel framework.Laravel ORM technique using PDO, SOL insertion prevention Additionally,laravel's crsf protection will help prevent spoofing from cross page requests It's

a syntax that automatically escapes any HTML being passed through viewparameters to prevent cross-scripting on your web page, and what you need to

do here is to use the appropriate template elements misery.[6]

2.2.3.3 MySQL

MySQL, the most popular Open Source SQL database management system, isdeveloped, distributed, and supported by Oracle Corporation

MySQL is a database management system

A database is a structured collection of data It may be anything from a simple

shopping list to a picture gallery or the vast amounts of information in a corporate

network To add, access, and process data stored in a computer database, you need adatabase management system such as MySQL Server Since computers are very good

at handling large amounts of data, database management systems play a central role

in computing, as standalone utilities, or as parts of other applications

One of the reasons MySQL is the world's most popular open source database is

that it provides comprehensive support for every application development need.Within the database, support can be found for stored procedures, triggers, functions,views, cursors, ANSI-standard SQL, and more For embedded applications, plug-inlibraries are available to embed MySQL database support into nearly any application.MySQL also provides connectors and drivers (ODBC, JDBC, etc.) that allow all

forms of applications to make use of MySQL as a preferred data management server.

It doesn't matter if it's PHP, Perl, Java, Visual Basic, or NET, MySQL offersapplication developers everything they need to be successful in building database-

driven information systems.[7]

11

2.2.4 Design front-end and fetch API with Vue.Js

2.2.4.1 JavaScript

JavaScript is a text-based programming language used both on the client-side and

server-side that allows you to make web pages interactive Where HTML and CSS

are languages that give structure and style to web pages, JavaScript gives web pagesinteractive elements that engage a user Common examples of JavaScript that youmight use every day include the search box on Amazon, a news recap videoembedded on The New York Times, or refreshing your Twitter feed

Incorporating JavaScript improves the user experience of the web page by converting

it from a static page into an interactive one To recap, JavaScript adds behavior toweb pages.[8]

2.2.4.2 HTML & CSS

HTML stands for Hyper Text Markup Language It is used to design web pages

using markup language HTML is the combination of Hypertext and Markup

language Hypertext defines the link between the web pages Markup language isused to define the text document within tag which defines the structure of web pages.This language is used to annotate (make notes for the computer) text so that a machinecan understand it and manipulate text accordingly Most markup languages (e.g.HTML) are human readable Language uses tags to define what manipulation has to

be done on the text

Cascading Style Sheets, fondly referred to as CSS, is a simply designedlanguage intended to simplify the process of making web pages presentable CSS

allows you to apply styles to web pages More importantly, CSS enables you to do

this independent of the HTML that makes up each web page CSS is easy to learn andunderstood but it provides powerful control over the presentation of an HTMLdocument

12

WHY CSS?

e CSS saves time : You can write CSS once and reuse same sheet in multiple

HTML pages

e Easy Maintainence : To make a global change simply change the style, and

all elements in all the webpages will be updated automatically

e Search Engines : CSS is considered as clean coding technique, which means

search engines won’t have to struggle to “read” its content.

¢ Superior styles to HTML : CSS has a much wider array of attributes than

HTML, so you can give a far better look to your HTML page in comparison to

HTML attributes

¢ Offline Browsing : CSS can store web applications locally with the help of

offline catche.Using of this we can view offline websites [9]

2.2.4.3 Vue.JS

Vue (pronounced /vju:/, like view) is a progressive framework for building user

interfaces Unlike other monolithic frameworks, Vue is designed from the ground up

to be incrementally adoptable The core library is focused on the view layer only, and

is easy to pick up and integrate with other libraries or existing projects On the otherhand, Vue is also perfectly capable of powering sophisticated Single-PageApplications when used in combination with modern tooling and supporting libraries

Advantage

- Compact size

The success rate of a JavaScript framework will depend on its size Thesmaller the size, the more power used The size of vue.js framework is18—21KB, users will not take time to download and use However, thisdoesn't mean that vue.js is running speed low due to its small size

13

Instead, vue.js beats out all bulky frameworks like React.Js, Angular.js,and Ember.js.

Easy to learn and develop Application

One of the reasons this framework is so popular is that it is relativelyeasy to understand Thanks to the simple structure of vue.js, users caneasily add software to their ongoing website project Both small as well

as large scale models can be developed through this framework, thussaving a lot of time In the event of any problems, the user can also easilyfind error areas All thanks to the simple structure of vue.js

Simple integration

Vue.js is also popularly used by web developers thanks to its ease inintegrating with existing applications This convenience comes from

vue.js which is built on top of a JavaScript framework and therefore, can

be integrated into other JavaScript-based applications relatively simply

As such, vue.js will be very useful for tasks like developing new web

applications and changing existing applications This integration isachieved thanks to Vue.js having all the elements ready

Flexibility

High flexibility is also considered to be an advantage of Vue.js Vue.jsallows users to write templates in HTML, JavaScript files using virtualnodes Vue.js' flexibility also makes it easier for developers developingReact.js, Angular.js, and any new JavaScript framework to understand.Vue.js has shown a lot of benefits in developing simple applications thatcan run directly from the browser

2-way communication

Last but not least, Vue.js also supports two-way communication thanks

to its MVVM architecture which is quite easy to handle HTMLblocks.[10]

14

Chapter 3.SYSTEM ANALYSIS AND DESIGN

3.1 Analysis requirements:

3.1.1 Function requirements:

Because the system is installed and used offline, the functionality for interaction

with the system by user and manager is the same

Users have access to functions to add, delete and update photos as well as set specialdates for worshipers Customize when and how images are forwarded in albums

3.1.2 Non-function requirements:

About the interface :

The website application's interface is quite simple

Images are presented clearly, easy to see and easy to edit

Users need help installing the system through us

Users need to equip necessary equipment for setup such as Icd screen, Rasberry Pidevice

15

Admin (User)

Use case diagram

Manage pepple

relation

16

3.2.1 Use case specification

Table 3.1 Table use case specification

Use Case ID

Figure 3.1

Use Case Name

Use case diagram

As a user or manager using all functions of the system

Description

User, manager

Actor(s)

Must havePriority

Users and managers want to use all functionality of theTrigger

User and manager successfully used all functions

The system works and is quickly updated with the

users.

Basic Flow

User and application access management

Users and managers choose the functions to be

manipulated

The system authenticates user information andmanages and performs operations

Alternative Flow

Manage default setting

User and manager choose to manage default settingsThe system switches to the default setup management

screen

Users and managers choose the functions: settingspecial date, setting birthdays, setting date of death

17

» Manipulation system to complete user customization

and management

Manage records

¢ User and manager choose to manage records

» The system switches to the manage records screen

¢ Users and managers choose the functions: Add new

record, update record, delete record, add relation

¢ Manipulation system to complete user customization

and management

Manage people relation

¢ User and manager choose to manage people relation

e The system switches to the manage people relation

se The system validates the information entered

Lido oato an alloy unsuccessfully and displays a message.

» The user chooses the order to cancel the update

¢ Use Case stopped

3.2.2 Description of Actors

Table 3.2 Desciption of actors in use case

NO Actor Description

1 Admin/User Is the person with the highest authority,

capable of performing all functions of the

system.

18

3.2.3 Description of Usecases:

Table 3.3 Description of use case

NO Use caser Description

1 All User | Export the list of accounts, grant admin

management rights, or cancel admin rights for the

account.

2 Manage setting | Lists, add, delete, edit books, download

default book covers, create new chapters, delete

chapters, or edit chapters Download, editaudio for each chapter

3 Setting special | List a list of categories Add, delete, and

day edit categories

4 Setting birthday | View account information, change avatar,

change password Users can also view the

reading history

5 Setting deathday | Like or unlike the books, rating 1 to 5

points for them

6 Manage records | Bookmark chapters of books you like,

bookmark lists, and delete unnecessarybookmarks

7 Add relation Use email and password to login to

system.

8 Add new record | Register new user account

9 Update record Post comments, reply to comments on a

book

10 Manage people | Post comments, reply to comments on a

relation book

19

Display the screen to fill in information of

new pictures

Validate the information you have

just entered

Store new information

into the system

Add new photos to the photo album and

continue playing them

in the album

Figure 3.2 Activity diagram Add a new image to Slideshow

20

Description activity diagram “Add a new image to slideshow”:

Activity Diagram of adding new images to the slide show, above can be described

as follows The diagram has 6 main states: Request to add a new photo, Display thescreen to fill in information of new pictures, Enter the required information andupload the photo, Validate the information you have just entered, Store newinformation into the system, Add new photos to the photo album and continue playing

them in the album

The server verifies that the information you have entered is correct or not

If information is entered incorrectly, the system will send a request for user to

re-enter the information

If the information is entered correctly, the system will store all the newly entered

information

New album slideshow screen with newly added images

21

Display the

Request to add a new screen Show all the

relationship people that have

been added to create

with each other

Save the new Update new changes

relationship and the display of infomation to the worship pictures

system continue

Phase

Figure 3.3 Activity diagram Add relationship to object

22

Description activity diagram “Add relationships to object”:

Activity Diagram of adding new relationship to object, above can be described asfollows The diagram has 5 main states: Request to add a new relationship, Displaythe screen Show all the people that have been added to create a relationship, Choosethe special date of your relationship then choose 2 people who have relationships witheach other, Save the new relationship infomation to the system, Update new changesand the display of worship pictures continue

1

2

User send a request to the system to add a new relationship of 1 object

The system displays the screen showing all the objects available to create the

relationship

The user selects the object from the system display panel to create a newrelationship

New relationship information storage system

New special play function update screen for the relationship just added

23

3.3.3 Setting default features

Display the screen toRequest to setting select the functionsdefault features that you want to

Description activity diagram “Setting default features”:

Activity Diagram of setting default features, above can be described as follows.The diagram has 5 main states: Request to setting default features, Display the screen

to select the functions that you want to setting, Edit settings, Save the new changesupdated to the system, Update new changes and the display of worship picturescontinue

1 User send a request to the system to setting default features

The system displays the screen of the default functionsUsers edit the settings to the desired functions

Newly changed function storage system

Ae YS The screen is updated to change the recently edited functions to continue

playing the image

25

3.3.4 Update of each image

Request to update for Display the screen

each image the main functions of

each image

Turn on/off for each

function

Update new changes

and the display of worship pictures

continue Save the new update