Luận văn tốt nghiệp Khoa học máy tính: Website development for family-trees management

VIETNAM NATIONAL UNIVERSITY

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGYFACULTY OF COMPUTER SCIENCE AND ENGINEERING

ĐẠI HỌC QUỐC GIA TP.HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM - Độc lập - Tự do - Hạnh phúc

TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA: KH&KT Máy tính NHIỆM VỤ LUẬN ÁN TỐT NGHIỆP

BỘ MÔN: Hệ thống & Mạng máy tính Chú ý: Sinh viên phải dán tờ này vào trang nhất của bản thuyết trình

HỌ VÀ TÊN: Hoàng Đức Trí MSSV: 1752566

NGÀNH: Khoa học Máy tính LỚP:

1 Đầu đề luận án: Design and Build A Website for Family-Trees Management 2 Nhiệm vụ (yêu cầu về nội dung và số liệu ban đầu):

- Do research on topics related to Family-Trees

- Complete requirement analyses on the desired website, using UML

- Provide website design, including interface design, interaction design, database design, authentication design …

- Apply SEO, Google Maps to the website - Complete feature

- Develop the website with appropriate programming languages and technologies

3 Ngày giao nhiệm vụ luận án: 30/08/2021 4 Ngày hoàn thành nhiệm vụ: 31/12/2021

5 Họ tên giảng viên hướng dẫn: TS Nguyễn Đức Thái

Nội dung và yêu cầu LVTN đã được thông qua Bộ môn

Ngày 23 tháng 08 năm 2021

(Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên)

TS Nguyễn Đức Thái TS Nguyễn Đức Thái

PHẦN DÀNH CHO KHOA, BỘ MÔN:

Người duyệt (chấm sơ bộ): Đơn vị: _ Ngày bảo vệ: _ Điểm tổng kết: _ Nơi lưu trữ luận án:

TRƯỜNG ĐẠI HỌC BÁCH KHOA CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Ngành (chuyên ngành): Computer Science

2 Đề tài: Design and Build A Website for Family-Trees Management

3 Họ tên người hướng dẫn: Nguyễn Đức Thái 4 Tổng quát về bản thuyết minh:

Số trang: Số chương: Số bảng số liệu Số hình vẽ:

Số tài liệu tham khảo: Phần mềm tính toán: Hiện vật (sản phẩm)

5 Tổng quát về các bản vẽ:

- Số bản vẽ: Bản A1: Bản A2: Khổ khác: - Số bản vẽ vẽ tay Số bản vẽ trên máy tính:

6 Những ưu điểm chính của LVTN:

• Students completed a desired website and demonstrated it

• The website contains required features as declared in the thesis proposal 7 Những thiếu sót chính của LVTN:

• Many parts in the report are short and lack justifications

• Many features in the mentioned website run properly, however with limitations • Students did not evaluate the built website

8 Đề nghị: Được bảo vệ R Bổ sung thêm để bảo vệ o Không được bảo vệ o 9 3 câu hỏi SV phải trả lời trước Hội đồng:

10 Đánh giá chung (bằng chữ: giỏi, khá, TB): Khá Điểm : 7.5/10 Ký tên (ghi rõ họ tên)

Nguyễn Đức Thái

TRƯỜNG ĐẠI HỌC BÁCH KHOA CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

● Hoang Duc Tri - MSSV: 1752566

Ngành (chuyên ngành): Computer Science

2 Đề tài: Website Development for Family-Trees Management3 Họ tên người hướng dẫn/phản biện: Nguyễn Lê Duy Lai

4 Tổng quát về bản thuyết minh:

Số trang: 93 Số chương: 7Số bảng số liệu: Số hình vẽ: 39Số tài liệu tham khảo: 7 Phần mềm tính toán:Hiện vật (sản phẩm)

5 Tổng quát về các bản vẽ:

- Số bản vẽ: Bản A1: Bản A2: Khổ khác:- Số bản vẽ vẽ tay Số bản vẽ trên máy tính:

6 Những ưu điểm chính của LVTN:

In this dissertation, the genealogy topic has practical significance in helping people to manage/sharetheir family tree or learn about other family trees In terms of features, the Family Tree websiteoffers users some family tree templates featuring multiple trees and ancestry chart views, timelineand mapping tools, record hints and research helps, and authenticated access to online records Thethesis has also presented the description of application analysis and the development processincluding design, implementation, and application testing.

7 Những thiếu sót chính của LVTN:

However, the presented topic is still limited including the inability to support more complicatedfeatures such as easy automatic discoveries (The minute users create a family tree, the Website willbegin searching for revealing new family tree connections, records, and newspaper articles aboutancestors) The record search method is not well detailed and demonstrated on efficacity Theauthentication system is not proven to be strong for privacy As a suggestion, the next step

integrating affordable DNA tests can reveal unique ethnic backgrounds, and match with newfoundrelatives.

8 Đề nghị: Được bảo vệ □ Bổ sung thêm để bảo vệ □ Không được bảo vệ □9 3 câu hỏi SV phải trả lời trước Hội đồng:

a Genealogical data can be represented in several formats, have you surveyed other notable systemsor representations used to illustrate and document ancestry and descent?

b While family trees are depicted as trees, do you think family relations, in general, form a tree inthe strict sense used in graph theory?

c To evaluate the Website, which appropriate metrics can you use?

10 Đánh giá chung (bằng chữ: giỏi, khá, TB): Điểm : 8 /10Ký tên (ghi rõ họ tên)

Declaration Of Authenticity

I declare that this research is my own work, conducted under the supervisionand guidance of Prof Nguyen Duc Thai The result of our research is legitimateand has not been published in any forms prior to this All materials used withinthis researched are collected myself by various sources and are appropriately listedin the references section.

In addition, within this research, I also used the results of several otherauthors and organizations They have all been aptly referenced.

In any case of plagiarism, I stand by my actions and will be responsible forit Ho Chi Minh city University of Technology therefore are not responsible forany copyright infringements conducted within our research.

Ho Chi Minh City, Dec 2021Author

Hoang Duc Tri

I am using this opportunity to express my gratitude to everyone who ported me during my study and my life I am thankful for their aspiring guidanceinvaluably constructive criticism and friendly advice.

sup-I offer my sincerest and deepest gratitude to my supervisor, ProfessorNguyen Duc Thai, for his support and guidance throughout my thesis He wasalways ready to provide answers to my puzzling questions and guided my work toa swift end.

Finally, I recognize that this research would not have been possible withoutthe support from my family and from bottom of my heart, I must acknowledgemy parents without whose love, encouragement and sacrifice, I would not havefinished this thesis.

Website Development for Family-Trees Managementby

Hoang Duc Tri

Ho Chi Minh City University of Technology, Dec 2021

The aim of this thesis is to develop a web application designated for tion between people and their family members through their family tree, and todescribe the whole process of its development The thesis contains a description ofapplication analysis with design, implementation and application testing Besidesthe description of the development process, the final output of the thesis is alsoworking web application.

CONTENTS CONTENTS

3.3.3 TypeScript 20

3.4 Back-end 20

3.4.1 PHP 20

3.4.1.1 Connect PHP & MySQL 21

3.4.1.2 Manage MySQL database with PHP 22

4 Technology 254.1 Angular 25

5.5.5 Contact infor table 71

6 Implementation & Evaluation 726.1 Authentication& Authorization 72

7.2 Evaluation 86

7.2.1 Drawback 86

7.2.2 Future Work 86

3.5 Create new table example 23

3.6 Insert into table example 24

LIST OF FIGURES LIST OF FIGURES

4.6 MySQL Logo 31

5.1 Website’s system architecture 33

5.2 Use-case Diagram 35

5.3 Activity diagram of manage tree 55

5.4 Activity diagram of edit profile 56

5.15 Full tree view UI 64

5.16 Intial tree view UI 65

LIST OF FIGURES LIST OF FIGURES

5.19 Export file UI 66

5.20 Search view UI 67

5.21 UML diagram of website database 68

6.1 Response from server side when user login 73

6.2 Routing map of website 74

7.1 Homepage of web application 85

List of Tables

5.18 Model of user Schema 69

5.19 Model of tree Schema 69

5.20 Model of Nodes Schema 70

5.21 Model of Photo Schema 71

5.22 Model of Contact information Schema 71

LIST OF TABLES LIST OF TABLES

HTTP HyperText Transfer ProtocolREST Representational state transferAPI Application Programming InterfaceJSON JavaScript Object Notation

XML Extensible markup languageHTML HyperText Markup LanguageCSS Cascading Style Sheets

CPU Central processing unit

Chapter 1Introduction

History is one of the most essential aspect of our human life and evolutionand it definitely affect our life aspect and relationship And that’s itself in fact needan extra public attention And the best way to learn about the history of yourselfis through your family tree The majority of people in Vietnam access to theirfamily history through close family member.Family tree is a chart representingfamily relationships in a conventional tree structure More detailed family trees,as used in medicine and social work, are known as genograms Family tree containinformation about people ancestor and relationship between them Its give peopleinformation for them to learn who they really are, where the come from, etc Italso help out-sider people to learn about other family especially royal family.

The majority of people learn and find about their family tree through closerelative, or don’t even have a trust worthy source to access it Some people may

1.2 RESEARCH OBJECTIVE CHAPTER 1 INTRODUCTION

help people learn about their root, ancestor and family tree with easy access andfree of charge in this era of technology?

The next parts of this thesis are composed of six chapters as follow:Chapter two provide some related projects with their pros and cosChapter three introduce some background knowledge.

Chapter four lists all technologies were used in this thesis.Chapter five presents the design for the system.

1.4 THESIS STRUCTURE CHAPTER 1 INTRODUCTION

Chapter six shows the implementation of the thesis and how the result isformed.

Chapter seven gives an overview about the result and discuss some futureimprovements.

Chapter 2

Related Works

In domestic, there are several website to create family tree such as aphavietnam.vn, vietnamgiapha.com, nguyensy.vn These website allowpeople to see and learn about the owner family tree as well as their family history,cultures How ever some of them don’t allow user to create their own family treeas their own will Additionally, user has to contact to the owner of the websiteif they want to learn more or even view more information from that family treewhich is really hard for users There are some website outside of our countrywhich provide services for learning, create family tree such as familysearch.org,ancestry.com These website support user from all over the world with free ofcharges and verified information Nonetheless, their free services are limited andusers has to paid to fully using all of the feature on which website.

gi-CHAPTER 2 RELATED WORKS

Figure 2.1: Homepage of giaphavietnam.vn

CHAPTER 2 RELATED WORKS

Figure 2.2: Homepage of familysearch.org

CHAPTER 2 RELATED WORKS

Currently, most website are create by the leader of each family and theyrestrict some access to those information about their family It’s really hard foroutsider who want to learn about that family and cultures as well as connect withthat family.

The process when clients request Web pages from Web servers and thenservers transfer Web pages back to clients are specified by HTTP For examplewhen user clicks on a hyperlink the Web client will send request to server side.Web server answer with messages including the requested objects.

3.2 HTTP METHODS CHAPTER 3 THEORETICAL KNOWLEDGE

Figure 3.1: HTTP request-response behavior[1]

3.2.1REST API

Application Programming Interface (API) is a collections of rules and anisms which govern how programs or components interact with the others APIby which an application or a component will interact with another API can returnthe data for application in common format such as JSON or XML.

mech-REST stands for Representational State Transfer which is a data structuretransformation and an architectural type for developing APIs To enable com-munication between machines, it employs a basic HTTP mechanism As a result,instead of using a URL to process user information, REST sends an HTTP requestto a URL, such as GET, PUT, POST, DELETE.

3.3 FRONT-END CHAPTER 3 THEORETICAL KNOWLEDGE

Figure 3.2: REST API behavior[2]

Front-end web development, also known as client-side development is thepractice of producing HTML, CSS and JavaScript for a website or Web Applicationso that a user can see and interact with them directly [5].

HTML stands for HyperText Markup Language It is the language thatweb browsers read to build a web page It acts as a ‘blueprint’ to display data ona user’s screen This is the basic building block of the web Every page on theInternet is just HTML at its core.

CSS stands for Cascading Style Sheets which allowed developers to putsome color and style into website to make it more pleasing The simplest way to

3.4 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE

understand web operation is this analogy of a web page as a house, every houseneed to have structure and frame, that is HTML in web page and we can not justhouse with structure along, we need to some decoration into a house therefor CSSis a crucial part of web development.

TypeScript which is a modern age JavaScript development language JavaScriptis a scripting language which helps to create a interactive web pages and its runsin user’s web browser whereas TypeScript is a superset of JavaScript In order torun on browser, TypeScript needs to compile to JavaScript file The big differenceof TypeScript compare with JavaScript is TypeScript requires type declarationwhereas JavaScript has no such concept.

Back-end Development is the term for the behind-the-scenes activities thatoccurs when user access anything on the website or web application It is usuallyreferred to the server-side development.

PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-usedopen source general-purpose scripting language that is especially suited for webdevelopment and can be embedded into HTML.[?]

3.4 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE

3.4.1.1 Connect PHP & MySQL

The fundamental way of connect PHP MySQL is using MySQLi or PDO.Both help PHP to establish communication between PHP and MySQL server.Below are example for using MySQLi and PDO:

Figure 3.3: MySQLi Example

3.4 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE

Figure 3.4: PDO Example

3.4.1.2 Manage MySQL database with PHP

A database consists of one or more tables TO manage these database wecan use SQL command inside PHP code to communicate with MySQL server.Below are some example:

3.4 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE

Figure 3.5: Create new table example

3.4 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE

Figure 3.6: Insert into table example

Chapter 4Technology

Figure 4.1: Angular Logo

4.1 ANGULAR CHAPTER 4 TECHNOLOGY

4.1.1Angular Concepts

Angular is an application design framework and development platform forcreating efficient and sophisticated single-page apps [6] The framework was builtby Google engineers Adam Abrons and Misko Hevery With Angular’s feature,developers can separate coding in small building blocks that act as modules (Ng-Modules) into a more organized structure Every Angular app has a root modulewhich provides the bootstrap mechanism that launches the application and at leastone components, called the root component that connects a component hierarchywith the page document object model (DOM) [6] Each component defines a classthat contains application data and logic The mechanism help the developer toreduce repetitive code and reuse similar component in multiple page.

The feature for data binding keeps the page so easily to update based on theapplication’s state without developers have to write getters/setters for each datamodels Event binding lets the app respond to user input in the target environmentby updating application data And property binding interpolate values that arecomputed from the application data into HTML Two-way binding combines bothfeature from event binding and property binding.

4.1 ANGULAR CHAPTER 4 TECHNOLOGY

4.1.2Project File Structure

Figure 4.2: Profile file structure

Figure 6 contains the file structure of the initial Angular project Hereare some noteworthy parts First is e2e folder is for end-to-end test files Nextis node modules provides npm packages to the entire workspace which are also

4.2 BOOTSTRAP CHAPTER 4 TECHNOLOGY

configured inside package.json file The base TypeScript configuration for projectis in file tsconfig.json.

Then move the important part of Angular is the src folder contain source filefor the root-level application profject; In side is app folder contains the componentfile which application logic and data are defined, you can add more componentdepend on your project and needs There are 17 components in this project to de-fined and work for each route app/app.component.ts defines the logic for the app’sroot component, named AppComponent, app/app.component.html defines theHTML template associated with the root AppComponent, app/app.module.tsdefines the root module, named AppModule Also inside src folder is assetsfolder which contains image and other asset files and environments which containsbuild configuration for particular target environments.

4.3 PHP CHAPTER 4 TECHNOLOGY

Bootstrap is the world’s most popular framework for building responsivewebsite [7] include HTML and CSS based design templates for forms, buttons, ta-bles, navigation, dropdown menu Bootstrap’s responsive CSS adjusts to phone,tablets, and desktop and is compatible with all modern browsers (Chrome, Firefox,Safari )

Bootstrap provides a wide range of plugin selections with a modern designand friendly interface make sure the website as most cohesive as possible All thecomponents is fully customizable to fit developer’s need With the great layoutdesign and powerful grid system, this really helps to optimize the amount of CSScode Bootstrap’s grid system uses a series of containers, rows, and columns tolayout and align content, there are 12 template columns available per row.

Figure 4.4: PHP Logo

PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-usedopen source general-purpose scripting language that is especially suited for webdevelopment and can be embedded into HTML.

4.4 XAMPP CHAPTER 4 TECHNOLOGY

What distinguishes PHP from something like client-side JavaScript is thatthe code is executed on the server, generating HTML which is then sent to theclient The client would receive the results of running that script, but would notknow what the underlying code was You can even configure your web server toprocess all your HTML files with PHP, and then there’s really no way that userscan tell what you have up your sleeve.

Figure 4.5: XAMPP Logo

XAMPP is one of the widely used cross-platform web servers, which helpsdevelopers to create and test their programs on a local webserver It was developedby the Apache Friends, and its native source code can be revised or modified by theaudience It consists of Apache HTTP Server, MariaDB, and interpreter for the

4.5 MYSQL CHAPTER 4 TECHNOLOGY

XAMPP is an abbreviation where X stands for Cross-Platform, A stands forApache, M stands for MYSQL, and the Ps stand for PHP and Perl, respectively.It is an open-source package of web solutions that includes Apache distribution formany servers and command-line executables along with modules such as Apacheserver, MariaDB, PHP, and Perl.

XAMPP helps a local host or server to test its website and clients viacomputers and laptops before releasing it to the main server It is a platform thatfurnishes a suitable environment to test and verify the working of projects basedon Apache, Perl, MySQL database, and PHP through the system of the host itself.

MySQL is an Oracle-backed open source relational database managementsystem (RDBMS) based on Structured Query Language (SQL) MySQL runs onvirtually all platforms, including Linux, UNIX and Windows Although it can beused in a wide range of applications, MySQL is most often associated with webapplications and online publishing.

Figure 4.6: MySQL Logo

4.5 MYSQL CHAPTER 4 TECHNOLOGY

4.5.1What is SQL?

SQL stands for Structured Query Language SQL is used to communicatewith a database According to ANSI (American National Standards Institute),it is the standard language for relational database management systems SQLstatements are used to perform tasks such as update data on a database, or retrievedata from a database The standard SQL commands such as ”Select”, ”Insert”,”Update”, ”Delete”, ”Create”, and ”Drop” can be used to accomplish almosteverything that one needs to do with a database[3].

4.5.2MySQL vs SQL

Before 2016, the main difference between MySQL and SQL was that theformer could be used on multiple platforms, whereas the latter could only be usedon Windows Microsoft has since expanded SQL to support Linux, a change whichwent into effect in 2017 When MySQL is installed via Linux, its package man-agement system requires custom configuration to adjust security and optimizationsettings.

MySQL also allows users to choose the most effective storage engine forany given table, as the program is able to utilize multiple storage engines forindividual tables One of MySQL’s engines is InnoDB InnoDB was designed forhigh availability Because of this, it is not as quick as other engines SQL uses itsown storage system, but it does maintain multiple safeguards against loss of data.SQL Server offers a wide variety of data analysis and reporting tools SQLServer Reporting Services is the most popular one and is available as a free down-load There are similar analysis tools for MySQL available from third-party soft-

Chapter 5Design

Figure 5.1: Website’s system architecture

There are two main components which are client-side and server-side Theclient-side is built with front-end framework Angular and Typescript for commu-