Problem Statement
History is one of the most essential aspect of our human life and evolution and it definitely affect our life aspect and relationship And that’s itself in fact need an extra public attention And the best way to learn about the history of yourself is through your family tree The majority of people in Vietnam access to their family history through close family member.Family tree is a chart representing family relationships in a conventional tree structure More detailed family trees, as used in medicine and social work, are known as genograms Family tree contain information about people ancestor and relationship between them Its give people information for them to learn who they really are, where the come from, etc It also help out-sider people to learn about other family especially royal family.
The majority of people learn and find about their family tree through close relative, or don’t even have a trust worthy source to access it Some people may
Research Objective
help people learn about their root, ancestor and family tree with easy access and free of charge in this era of technology?
• People needs a trustworthy resource with various options for them to choose the most suitable information about their family.
• People from all around the world can share/learn about theirs and otherFamily tree, also manage their family tree with easy access and processes.
Proposed Solution
In order to fulfill the objectives of the above section and answer the problems addressed in the problem statement section, I propose to create a website with a friendly user interface for everyone can easily access on any device, browser from everywhere With an authenticate system to guarantee every piece of information in the website is legit.
Thesis Structure
The next parts of this thesis are composed of six chapters as follow: Chapter two provide some related projects with their pros and cos
Chapter three introduce some background knowledge.
Chapter four lists all technologies were used in this thesis.
Chapter five presents the design for the system.
Chapter six shows the implementation of the thesis and how the result is formed.
Chapter seven gives an overview about the result and discuss some future improvements.
In domestic, there are several website to create family tree such as gi- aphavietnam.vn, vietnamgiapha.com, nguyensy.vn These website allow people 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 tree as their own will Additionally, user has to contact to the owner of the website if they want to learn more or even view more information from that family tree which is really hard for users There are some website outside of our country which provide services for learning, create family tree such as familysearch.org,ancestry.com These website support user from all over the world with free of charges and verified information Nonetheless, their free services are limited and users has to paid to fully using all of the feature on which website.
Figure 2.1: Homepage of giaphavietnam.vn
Figure 2.2: Homepage of familysearch.org
Currently, most website are create by the leader of each family and they restrict some access to those information about their family It’s really hard for outsider who want to learn about that family and cultures as well as connect with that family.
HTTP
HTTP (HyperText Transfer Protocol) operates as the core foundation of websites, functioning at the application-layer protocol Its structure consists of two essential components: client and server programs Communication between these programs occurs via HTTP messages, and the protocol defines both the structure and exchange method for these messages HTTP ensures data integrity and effective communication between clients and servers for seamless website operation.
The process when clients request Web pages from Web servers and then servers transfer Web pages back to clients are specified by HTTP For example when user clicks on a hyperlink the Web client will send request to server side.Web server answer with messages including the requested objects.
HTTP methods
REST API
Application Programming Interface (API) is a collections of rules and mech- anisms which govern how programs or components interact with the others API by which an application or a component will interact with another API can return the data for application in common format such as JSON or XML.
REST stands for Representational State Transfer which is a data structure transformation 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 request to a URL, such as GET, PUT, POST, DELETE.
Front-end
HTML
HTML stands for HyperText Markup Language It is the language that web browsers read to build a web page It acts as a ‘blueprint’ to display data on a user’s screen This is the basic building block of the web Every page on theInternet is just HTML at its core.
CSS
CSS stands for Cascading Style Sheets which allowed developers to put some 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 house need to have structure and frame, that is HTML in web page and we can not just house with structure along, we need to some decoration into a house therefor CSS is a crucial part of web development.
TypeScript
TypeScript, a superset of JavaScript, enhances web development by introducing type declarations, a feature absent in JavaScript Unlike JavaScript, which executes in users' browsers, TypeScript must be compiled into JavaScript files to run on browsers This type declaration requirement sets TypeScript apart from JavaScript, enabling stronger type checking and improved code quality.
Back-end
PHP
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.[?]
3.4 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE
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:
3.4 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE
3.4.1.2 Manage MySQL database with PHP
A database consists of one or more tables TO manage these database we can 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
Angular
Angular Concepts
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps [6] The framework was built by 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 module which provides the bootstrap mechanism that launches the application and at least one components, called the root component that connects a component hierarchy with the page document object model (DOM) [6] Each component defines a class that contains application data and logic The mechanism help the developer to reduce repetitive code and reuse similar component in multiple page.
The feature for data binding keeps the page so easily to update based on the application’s state without developers have to write getters/setters for each data models Event binding lets the app respond to user input in the target environment by updating application data And property binding interpolate values that are computed from the application data into HTML Two-way binding combines both feature from event binding and property binding.
Project File Structure
The file structure of an Angular project is depicted in Figure 6, with several notable components The e2e folder houses end-to-end test files, while the node_modules directory contains npm packages accessible to the entire workspace.
Bootstrap
configured insidepackage.json file The base TypeScript configuration for project is in filetsconfig.json.
Then move the important part of Angular is thesrcfolder contain source file for the root-level application profject; In side isapp folder contains the component file which application logic and data are defined, you can add more component depend 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’s root component, named AppComponent, app/app.component.html defines the HTML template associated with the root AppComponent, app/app.module.ts defines the root module, named AppModule Also inside src folder is assets folder which contains image and other asset files andenvironments which contains build configuration for particular target environments.
PHP
Bootstrap is the world’s most popular framework for building responsive website [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 design and friendly interface make sure the website as most cohesive as possible All the components is fully customizable to fit developer’s need With the great layout design and powerful grid system, this really helps to optimize the amount of CSS code Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content, there are 12 template columns available per row.
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.
XAMPP
What distinguishes PHP from something like client-side JavaScript is that the code is executed on the server, generating HTML which is then sent to the client The client would receive the results of running that script, but would not know what the underlying code was You can even configure your web server to process all your HTML files with PHP, and then there’s really no way that users can tell what you have up your sleeve.
XAMPP is one of the widely used cross-platform web servers, which helps developers to create and test their programs on a local webserver It was developed by the Apache Friends, and its native source code can be revised or modified by the audience It consists of Apache HTTP Server, MariaDB, and interpreter for the
MySQL
What is SQL?
SQL stands for Structured Query Language SQL is used to communicate with a database According to ANSI (American National Standards Institute), it is the standard language for relational database management systems SQL statements are used to perform tasks such as update data on a database, or retrieve data from a database The standard SQL commands such as ”Select”, ”Insert”,
”Update”, ”Delete”, ”Create”, and ”Drop” can be used to accomplish almost everything that one needs to do with a database[3].
MySQL vs SQL
Before 2016, the main difference between MySQL and SQL was that the former could be used on multiple platforms, whereas the latter could only be used on Windows Microsoft has since expanded SQL to support Linux, a change which went into effect in 2017 When MySQL is installed via Linux, its package man- agement system requires custom configuration to adjust security and optimization settings.
MySQL also allows users to choose the most effective storage engine for any given table, as the program is able to utilize multiple storage engines for individual tables One of MySQL’s engines is InnoDB InnoDB was designed for high availability Because of this, it is not as quick as other engines SQL uses its own 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-
System Architecture
Login
Preconditions: User are in login page.
Normal Flow: 1 User clicks on Log In button on header.
2 Website directs to login page.
3 User types in their username and password.
4 User finishes by clicking Sign In button.
5 Website sends a form contains user’s input to server.
6 User signs in successfully when server returns the inputs are correct.
7 Website redirects back to Profile page.
Exception Flow: Exception 1 at step 4:
5a Website remains the same if either one of the field is empty and display a message to user.
6b Website remains the same if server return result that pass- word is wrong or email does not exist, and display that message to user.
Alternative Flow: Alternative 1 at step 3:
3a User can choose option login with Facebook account by clicking on Facebook login button.
4a User logins successfully when they had a Facebook account.
Edit profile
Use case name: Edit profile
Description: User can edit their information like name, phone, etc
Preconditions: User already login through website account or Facebook account.
Normal Flow: 1 User clicks on User name on header.
2 Website directs to user profile page.
3 User click on edit profile button.
4 Website display popup form contain information of user.
5 User enter information they want to change.
6 User click on save button to confirm input to send to server.
7 Server change the information of user according to user input.
8 Website change the user information according to the new information provided.
Exception Flow: Exception 1 at step 5:
5a Website remains the same if user don’t change their infor- mation and click on save button.
6b User click on cancel button instead of save button TheWebsite will stay the same with their current information.
Change password
Use case name: Change password
Preconditions: User has logged into the website.
Description: When user don’t like their old password or felt like it is unse- cured, they can change it with ease.
Normal Flow: 1 User clicks on User name on header.
2 Website directs to user profile page.
3 User click on change password button.
4 User enter their old password and new password.
5 User click on save change button to send input form to server
6 Website will change user password if their old password is correct.
Exception Flow: Exception 1 at step 4:
5a Website remains the same if user don’t input information and click on save button.
5b Website will stay the same if they enter wrong password and display to user.
Reset password
Use case name: Reset password
Preconditions: User are already has an account.
Description: When user forget their password, they can reset it with their username and email Normal Flow: 1 User click on the login button on header.
2 Website redirect user to login page.
3 User click on Forget your password link.
4 Website redirect user to reset password page and show user input form.
5 User enter their username and their registered email into the form.
6 User click on send button and send information to server.
7 Server will check user information, if value then Website will display reset password form.
8 User enter their new password and click on send button to send information to server.
9 Server will save their new password send response to website If valid website will redirect user to login page.
Exception Flow: Exception 1 at step 5:
5a Website remains the same if user enter mismatch informa- tion and click send button, website will show message to user.
8a Website remains the same if user enter mismatch new pass- word and click send button, website will show message to user.
View sample tree
Use case name: View sample tree
Preconditions: Guest user are in homepage.
Normal Flow: 1 User click on Sample tree button on header.
2 Website redirect user to sample tree page.
3 Website display tree with sample information and features.
4 User can view the sample tree.
Contact staff
Use case name: Contact staff
Actor: Normal user and Guest.
Description: Any user can send feedback to the website owner.
Normal Flow: 1 User click on contact-us button.
2 Website will show contact form.
3 User input information they want to feedback as well as name and email.
4 User click on send button to send input to server.
5 Server will save feed back and send response to Website.
6 Website will show success message to users.
Exception Flow: Exception 1 at step 3
3a Website stay the same if user don’t enter their name or email.
View trees
Use case name: View trees
Preconditions: Normal user has signed in to website.
Normal Flow: 1 User click on tree button on header.
2 Website show list of other user tree and user’s tree.
3 User click on the tree they want to see.
4 Website display the tree information corresponding to user choice.
5 User now can view trees.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
Add node
Use case name: Add node
Description: User want to add new node into their family tree.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the parent node of the node they want to add.
5 User click on add node button.
6 Website add node below the parent node.
7 Website show the edit form for user to enter the new node information.
8 User enter the new node information.
9 User click on arrow button to save information.
10 Website send new node information to server to save.
11 Server response ok if the information is valid.
Exception Flow: Exception 1 at step 8
8a User don’t enter any new information.
8b The new node remains the same.
Remove node
Use case name: Remove node
Description: User can deleted unwanted node form their family tree.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the parent node of the node they want to delete.
5 User click on delete button.
6 Website sends the request to server.
7 Server save the change information and remove node from database.
8 Website display the changed tree.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
Edit node
Use case name: Edit node
Description: User can edit the node information when they want.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the parent node of the node they want to delete.
5 User click on edit button.
6 Website show edit form for user to input.
7 User enter the information they want to change.
8 User click on arrow button to save the edit information.
9 Website send information to server to change.
10 Server save the changed information and send response to Website.
11 Website show the tree with edited node.
Exception Flow: Exception 1 at step 1:
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
7a User don’t enter any new information.
Search Node
Use case name: Search node
Description: User can search the node in their family tree.
Preconditions: User is logged in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the search button.
5 Website show the search bar.
6 User enter the name of the the person they want to search and click on the name.
7 Website point to the node user just choose.
8 User click on the node to view their information.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
Exception 2 at step 6 6b User enter the node id instead of name.
6b User enter the address instead of name.
Change template
Use case name: Change template
Description: User can change the current template of their family tree to export.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the change template button.
5 User choose template from the option provided.
6 Website show the tree according to the template user choose.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
Export tree
Use case name: Export tree
Description: User can export their family tree as pdf, svg file
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on export button on the top right corner
5 User choose the type of file they want to export.
6 Website will create to file corresponding to user choices and save as user local machine.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
View photo
Use case name: View photo
Description: User can view their and other user image.
Preconditions: User has signed in.
Normal Flow: 1 User click on photo gallery button on header.
2 Website show the photo gallery to user.
3 User now can view the photo gallery.
Manage Contact
Use case name: Manage contact
Description: Admin can view/delete contact from other user.
Preconditions: admin has signed in.
Normal Flow: 1 Admin click on the contact button on side navbar.
2 Website show the list of contact message from users.
3 Admin can read and edit the message.
Non-functional requirements
Activity diagram
Figure 5.3: Activity diagram of manage tree
For successful tree management, users must first log in to the platform Once logged in, they have the option to view other users' trees or manage their own Tree management allows users to freely edit, add, or remove nodes as desired.
5.3 NON-FUNCTIONAL REQUIREMENTS CHAPTER 5 DESIGN
In case user don’t have an account yet, they can create their account to start using website features After entering all information, server will save their information into database and redirect them to home page.
User can choose to login between Facebook account and website account.
In case user want to see other user tree instead of their own tree, they can click on the tree they want too see and viewing it.
UI design
When an user want to edit their profile, they must login first After login successfully, user can edit their profile freely and save it in the database User can choose to edit their information display on the profile page, or change their password After changing, the changed information will be store on the website database.
User can choose to login between Facebook account and website account.
In case they don’t have an account yet, they can create their own and start using the website features.
Below are UI for main interfaces of the website with main features of the website:
Figure 5.6: About us page UI
Figure 5.9: Contact Us page UI
Figure 5.16: Intial tree view UI
Figure 5.17: Link template view UI
Figure 5.18: Detail of node UI
Database design
Users table
Field Type Key Description id int Primary key User Id username varchar Unique username of users password varchar Store the hash password for website account role int Store the role of user. facebook id varchar Store user facebook id for authentication email varchar Store users email address phone varchar Store user phone number fname varchar Store user’s First name lname varchar Store user’s Last name sex varchar Store user’s sex dob date Store user’s Date of birth rofession varchar Store user’s profession image longblob Store user’s avatar image file img path varchar Store user’s avatar image file pathTable 5.18: Model of user Schema.
Tree table
Field Type Key Description id int Primary key Tree Id tree name varchar name of tree user id int Id of the user who own the tree root id int Store the id of the root node.
Table 5.19: Model of tree Schema.
Nodes table
Field Type Key Description id int Primary key Node Id pid int id of node node’s parent firstName varchar First name of person repre- sent by this node lastName varchar Last name of person repre- sent by this node phone int Store phone number of per- son represent by this node address varchar Store address of person rep- resent by this node tree id int Store the tree id which con- tain this node dob int Store birthday of person represent by this node dod int Store deathday (if have) of person represent by this node sex int Store sexuality of person represent by this node image longblob Store The avatar image of this node img path varchar Store the path to the image this nodeTable 5.20: Model of Nodes Schema.
Photo table
Field Type Key Description id int Primary key Photo Id path varchar Path of the photo user id int Id of the user who own the photo title varchar Title of the photo date date Date the photo uploaded data longblob Store the photo file
Table 5.21: Model of Photo Schema.
Contact infor table
Field Type Key Description id int Primary key Contact Id name varchar name of the creator of the image email varchar email of the creator of the image message longtext Store the message
Table 5.22: Model of Contact information Schema.
Authentication& Authorization
Authentication
In this project, i use OAuth2 with Facebook account and Website’s ac- count to manage user identities, authentication, and permissions Authentication is a process of identifying a user and authorization is a process of verifying what accesses that user is granted The OAuth2 token contains 3 values which is used to identify user: id,name, email Our website will check the Facebook id as and email to check the identity of user.
Authorization
After login successfully, server side will send JSON response to client side
Routing
1 is the type value for Normal user to check authorization.
Figure 6.1: Response from server side when user login
Angular and client-side will responsible for routing from page to page Some page requires user’s authentication to enter, or only specific group is allowed to get in If users try to get into an incompetent page, website will direct them back to homepage.
Testing
Figure 6.2: Routing map of website
I have run the total 25 test cases to make sure every use-case feature func- tions according to its job Here are the test case description:
ID Test case de- scription
TC-RE-001 Register with email which hasn’t been used to register before
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
Server save information and re- sponse to client.
Redirect user to profile page.
TC-RE-002 Register with email which has been used before
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
TC-RE-003 Register with a used username
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
TC-LO-001 Login with regis- tered account
User clicks on Log In button on header.
User types in their username and password.
User finishes by clicking Login
TC-LO-002 Login with unregistered ac- count or wrong password
User clicks on Log In button on header.
User types in their username and password.
User finishes by clicking Log In button.
TC-LO-003 Login with Face- book account
User clicks on Log In button on header.
User clicks on log in with Face- book button.
TC-FP-001 User forgot pass- word and uses email and user- name backup
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email and username which was used for registering.
User click on send button Server verify and send re- sponse to client.
User types in his/her new pass- word.
User types in his/her password again.
User click on send button
TC-FP-002 User forgot pass- word but does not remember email
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email and username which was used for registering.
User click on send button.
Server verify and send re- sponse to client.
TC-CP-001 User wants to change password and his/her old password is valid
User clicks on Change Pass- word button on Profile page.
User types in their old pass- word and new password.
Server verify and response to client.
TC-CP-002 User wants to change password and his/her old password is in- valid
User clicks on Change Pass- word button on Profile page.
User types in their old pass- word and new password.
Server verify and response to client.
TC-EP-001 User wants to change their pro- file information
User clicks on Edit profile but- ton on Profile page.
User types in their new infor- mation.
Server verify and response to client.
User infor- mation will be changed
TC-EP-002 User wants to change their pro- file information but don’t enter input
User clicks on Edit profile but- ton on Profile page.
User don’t types in their new information.
User informa- tion will remain the same
TC-CU-001 User wants to give their opin- ions/advice to website
User clicks on Contact-us but- ton on header.
User types in their name, email and message information.
Server verify and response to client.
User message will be save
TC-CU-002 User wants to give their opinions/advice to website but don’t input message
User clicks on Contact-us but- ton on header.
User types in their name, email.
Client send message for user to enter message.
View photo-gallery use case
TC-PG-001 User want to view photo- gallery on the website
User clicks on photo-gallery button on header.
Server display image upload by users.
View sample tree use case
TC-ST-001 Guest user wants to view sample tree to know more
User clicks on sample-tree but- ton on header.
User view the sample tree pro- vided.
Server verify and response to client.
Website success- fully display sample tree
TC-MT-001 User wants to add new node into their tree
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the parent node.
User click on add child button.
Website add new child and open edit form for user to en- ter information.
User click on arrow button to save.
Create node success and informa- tion is save in database
TC-MT-002 User wants to add new node into their tree but don’t enter node’s informa- tion
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the parent node.
User click on add child button.
Website add new child and open edit form for user to en- ter information.
User don’t enter node User click on arrow button to save.
Create node success and informa- tion is save in database
TC-MT-003 User wants to edit node infor- mation
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on edit button.
User enter update information User click on arrow button to save.
Update node success and informa- tion is save in database
TC-MT-004 User wants to edit node in- formation but don’t enter new information
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on edit button.
User don’t enter update infor- mation
User click on arrow button to save.
Update fail and infor- mation stay the same in database
TC-MT-005 User wants to view node infor- mation
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on view button.
View infor- mation success- fully success Passed
TC-MT-006 User wants to delete node
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on delete button.
Website node and its child.
Node remove and informa- tion is save in database success Passed
TC-MT-007 User want to ex- port tree file
User clicks on tree button on header.
User click on their tree.
User click on the export menu button on the top right corner.
User choose file type between PDF/PNG/SVG/CSV.
Website create chosen type for- mat file and save file in user lo- cal machine.
Export file suc- cessfully success Passed
TC-MT-008 User want to
User clicks on tree button on header.
User click on their tree.
User click on the dropdown menu on top left corner.
User choose their desired tem- plate.
Template change success- fully success Passed
TC-MT-009 User want to link style
User clicks on tree button on header.
User click on their tree.
User click on the double-down button on the right side corner menu of the tree.
User choose their desired link style.
Website change tree link ac- cording to user choice.
Link change success- fully success Passed
Result
This thesis features a functional web application that embodies the proposed features outlined in its design chapter These features ensure an optimal user experience and seamless accessibility via various browsers on any device The application provides users with a complimentary platform to create and share their family trees, fostering a shared and accessible space for genealogical exploration.
Figure 7.1: Homepage of web application
Evaluation
Drawback
The work still has some drawbacks need to be improved:
• User interface can be beneficial with a more modern and sleek design.
• Lack of the communication between user and user in website.
• Need to apply SEO on website to reach more users.
Future Work
In order to resolve above drawbacks, I suggest some works:
• Improving an UI-UX design to attract more user.
• Building a mobile app available in the two most popular operation system (Android, iOS) for user can easily access.
• Improving a searching trees algorithm to increase the satisfaction from users.
Use-case Diagram
nicating with server through REST api The server side is build with PHP and running on XAMPP server.
There are three main actors in the application:
• Normal user whose is registered with our website account or through face- book account This actor manages the information of trees and images on the website.
• Admin or administrator actor is the one who responsible for the web function normally They have to check the authenticity for website therefore they have the right to verify also prohibit some accounts as well as reading feed back from normal users or guest users.
Guest users, as unregistered individuals, possess limited website access This access includes exploring the platform's offerings, creating personal accounts, and viewing sample trees, enabling them to familiarize themselves with the website's functions and features before deciding to register.
Description: User can create an account to use some features only exclusive for registered user.
Preconditions: User are in register page.
Normal Flow: 1 User clicks on Create account button on header.
2 Website directs to register page.
4 User input information on the register form.
5 User clicks Register button to submit information.
6 Website sends a form contains user’s input to server if email input is valid.
7 User registers successfully if server responds so.
8 Website redirects user back to Profile page.
Exception Flow: Exception 1 at step 3:
3a User input wrong information or miss some field.
5a User click on remember me checkbox to save their login
Alternative Flow: Alternative 1 at step 4:
4a User can click on ”Already has an account” and return to login page.
Preconditions: User are in login page.
Normal Flow: 1 User clicks on Log In button on header.
2 Website directs to login page.
3 User types in their username and password.
4 User finishes by clicking Sign In button.
5 Website sends a form contains user’s input to server.
6 User signs in successfully when server returns the inputs are correct.
7 Website redirects back to Profile page.
Exception Flow: Exception 1 at step 4:
5a Website remains the same if either one of the field is empty and display a message to user.
6b Website remains the same if server return result that pass- word is wrong or email does not exist, and display that message to user.
Alternative Flow: Alternative 1 at step 3:
3a User can choose option login with Facebook account by clicking on Facebook login button.
4a User logins successfully when they had a Facebook account.
Use case name: Edit profile
Description: User can edit their information like name, phone, etc
Preconditions: User already login through website account or Facebook account.
Normal Flow: 1 User clicks on User name on header.
2 Website directs to user profile page.
3 User click on edit profile button.
4 Website display popup form contain information of user.
5 User enter information they want to change.
6 User click on save button to confirm input to send to server.
7 Server change the information of user according to user input.
8 Website change the user information according to the new information provided.
Exception Flow: Exception 1 at step 5:
5a Website remains the same if user don’t change their infor- mation and click on save button.
6b User click on cancel button instead of save button The Website will stay the same with their current information.
Use case name: Change password
Preconditions: User has logged into the website.
Description: When user don’t like their old password or felt like it is unse- cured, they can change it with ease.
Normal Flow: 1 User clicks on User name on header.
2 Website directs to user profile page.
3 User click on change password button.
4 User enter their old password and new password.
5 User click on save change button to send input form to server
6 Website will change user password if their old password is correct.
Exception Flow: Exception 1 at step 4:
5a Website remains the same if user don’t input information and click on save button.
5b Website will stay the same if they enter wrong password and display to user.
Use case name: Reset password
Preconditions: User are already has an account.
Description: When user forget their password, they can reset it with their username and email Normal Flow: 1 User click on the login button on header.
2 Website redirect user to login page.
3 User click on Forget your password link.
4 Website redirect user to reset password page and show user input form.
5 User enter their username and their registered email into the form.
6 User click on send button and send information to server.
7 Server will check user information, if value then Website will display reset password form.
8 User enter their new password and click on send button to send information to server.
9 Server will save their new password send response to website If valid website will redirect user to login page.
Exception Flow: Exception 1 at step 5:
5a Website remains the same if user enter mismatch informa- tion and click send button, website will show message to user.
8a Website remains the same if user enter mismatch new pass- word and click send button, website will show message to user.
Use case name: View sample tree
Preconditions: Guest user are in homepage.
Normal Flow: 1 User click on Sample tree button on header.
2 Website redirect user to sample tree page.
3 Website display tree with sample information and features.
4 User can view the sample tree.
Use case name: Contact staff
Actor: Normal user and Guest.
Description: Any user can send feedback to the website owner.
Normal Flow: 1 User click on contact-us button.
2 Website will show contact form.
3 User input information they want to feedback as well as name and email.
4 User click on send button to send input to server.
5 Server will save feed back and send response to Website.
6 Website will show success message to users.
Exception Flow: Exception 1 at step 3
3a Website stay the same if user don’t enter their name or email.
Use case name: View trees
Preconditions: Normal user has signed in to website.
Normal Flow: 1 User click on tree button on header.
2 Website show list of other user tree and user’s tree.
3 User click on the tree they want to see.
4 Website display the tree information corresponding to user choice.
5 User now can view trees.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
Use case name: Add node
Description: User want to add new node into their family tree.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the parent node of the node they want to add.
5 User click on add node button.
6 Website add node below the parent node.
7 Website show the edit form for user to enter the new node information.
8 User enter the new node information.
9 User click on arrow button to save information.
10 Website send new node information to server to save.
11 Server response ok if the information is valid.
Exception Flow: Exception 1 at step 8
8a User don’t enter any new information.
8b The new node remains the same.
Use case name: Remove node
Description: User can deleted unwanted node form their family tree.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the parent node of the node they want to delete.
5 User click on delete button.
6 Website sends the request to server.
7 Server save the change information and remove node from database.
8 Website display the changed tree.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
Use case name: Edit node
Description: User can edit the node information when they want.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the parent node of the node they want to delete.
5 User click on edit button.
6 Website show edit form for user to input.
7 User enter the information they want to change.
8 User click on arrow button to save the edit information.
9 Website send information to server to change.
10 Server save the changed information and send response to Website.
11 Website show the tree with edited node.
Exception Flow: Exception 1 at step 1:
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
7a User don’t enter any new information.
Use case name: Search node
Description: User can search the node in their family tree.
Preconditions: User is logged in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the search button.
5 Website show the search bar.
6 User enter the name of the the person they want to search and click on the name.
7 Website point to the node user just choose.
8 User click on the node to view their information.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
Exception 2 at step 6 6b User enter the node id instead of name.
6b User enter the address instead of name.
Use case name: Change template
Description: User can change the current template of their family tree to export.
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on the change template button.
5 User choose template from the option provided.
6 Website show the tree according to the template user choose.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
Use case name: Export tree
Description: User can export their family tree as pdf, svg file
Preconditions: User has signed in.
Normal Flow: 1 User click on tree button on header.
2 User click on their family tree.
3 Website show the user family tree.
4 User click on export button on the top right corner
5 User choose the type of file they want to export.
6 Website will create to file corresponding to user choices and save as user local machine.
Exception Flow: Exception 1 at step 1
1a User click on Username button on header.
1b User click on tree button on profile page.
1c Website redirect user to tree page.
Use case name: View photo
Description: User can view their and other user image.
Preconditions: User has signed in.
Normal Flow: 1 User click on photo gallery button on header.
2 Website show the photo gallery to user.
3 User now can view the photo gallery.
Use case name: Manage contact
Description: Admin can view/delete contact from other user.
Preconditions: admin has signed in.
Normal Flow: 1 Admin click on the contact button on side navbar.
2 Website show the list of contact message from users.
3 Admin can read and edit the message.
5.3 NON-FUNCTIONAL REQUIREMENTS CHAPTER 5 DESIGN
Use case name: Manage user
Description: Admin can view/delete/change privilege of user.
Preconditions: admin has signed in.
Normal Flow: 1 Admin click on the user list button on side navbar.
2 Website show the list of user.
3 Admin can manage the user show on the list.
• Password shall never be viewed at the website.
• User password shall be hashed before stored in database.
• Website shall be improved to against cross-site scripting.
• Website shall be against SQL injection.
• The website shall be easy to use by all users and errors shall be minimized.
5.3 NON-FUNCTIONAL REQUIREMENTS CHAPTER 5 DESIGN
Figure 5.3: Activity diagram of manage tree
When an user want to manage their tree, they has to login into the website first to use this feature After login successfully, user now can choose to manage their tree or see other user tree After choosing their tree, user now can manage their tree freely like edit nodes, add/remove, etc
5.3 NON-FUNCTIONAL REQUIREMENTS CHAPTER 5 DESIGN
In case user don’t have an account yet, they can create their account to start using website features After entering all information, server will save their information into database and redirect them to home page.
User can choose to login between Facebook account and website account.
In case user want to see other user tree instead of their own tree, they can click on the tree they want too see and viewing it.
When an user want to edit their profile, they must login first After login successfully, user can edit their profile freely and save it in the database User can choose to edit their information display on the profile page, or change their password After changing, the changed information will be store on the website database.
User can choose to login between Facebook account and website account.
In case they don’t have an account yet, they can create their own and start using the website features.
Below are UI for main interfaces of the website with main features of the website:
Figure 5.6: About us page UI
Figure 5.9: Contact Us page UI
Figure 5.16: Intial tree view UI
Figure 5.17: Link template view UI
Figure 5.18: Detail of node UI
Below is UML diagram of website database
Figure 5.21: UML diagram of website database
Field Type Key Description id int Primary key User Id username varchar Unique username of users password varchar Store the hash password for website account role int Store the role of user. facebook id varchar Store user facebook id for authentication email varchar Store users email address phone varchar Store user phone number fname varchar Store user’s First name lname varchar Store user’s Last name sex varchar Store user’s sex dob date Store user’s Date of birth rofession varchar Store user’s profession image longblob Store user’s avatar image file img path varchar Store user’s avatar image file path Table 5.18: Model of user Schema.
The Field Type Key column stores the type of data in each field, with "int" indicating integer data and "varchar" indicating variable-length character data The id column is the primary key, providing a unique identifier for each tree The tree name column stores the name of the tree, while the user id column stores the ID of the user who owns the tree The root id column stores the ID of the root node of the tree.
Table 5.19: Model of tree Schema.
Field Type Key Description id int Primary key Node Id pid int id of node node’s parent firstName varchar First name of person repre- sent by this node lastName varchar Last name of person repre- sent by this node phone int Store phone number of per- son represent by this node address varchar Store address of person rep- resent by this node tree id int Store the tree id which con- tain this node dob int Store birthday of person represent by this node dod int Store deathday (if have) of person represent by this node sex int Store sexuality of person represent by this node image longblob Store The avatar image of this node img path varchar Store the path to the image this nodeTable 5.20: Model of Nodes Schema.
Field Type Key Description id int Primary key Photo Id path varchar Path of the photo user id int Id of the user who own the photo title varchar Title of the photo date date Date the photo uploaded data longblob Store the photo file
Table 5.21: Model of Photo Schema.
Field Type Key Description id int Primary key Contact Id name varchar name of the creator of the image email varchar email of the creator of the image message longtext Store the message
Table 5.22: Model of Contact information Schema.
In this project, OAuth2 is employed to manage user authentication and authorization using both Facebook accounts and website accounts Authentication verifies the identity of a user, while authorization determines the level of access granted The OAuth2 token comprises three key values: id, name, and email To establish user identity, our website verifies the Facebook id and email associated with the user.
After login successfully, server side will send JSON response to client side
1 is the type value for Normal user to check authorization.
Figure 6.1: Response from server side when user login
Angular and client-side will responsible for routing from page to page Some page requires user’s authentication to enter, or only specific group is allowed to get in If users try to get into an incompetent page, website will direct them back to homepage.
Figure 6.2: Routing map of website
I have run the total 25 test cases to make sure every use-case feature func- tions according to its job Here are the test case description:
ID Test case de- scription
TC-RE-001 Register with email which hasn’t been used to register before
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
Server save information and re- sponse to client.
Redirect user to profile page.
TC-RE-002 Register with email which has been used before
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
TC-RE-003 Register with a used username
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
TC-LO-001 Login with regis- tered account
User clicks on Log In button on header.
User types in their username and password.
User finishes by clicking Login
TC-LO-002 Login with unregistered ac- count or wrong password
User clicks on Log In button on header.
User types in their username and password.
User finishes by clicking Log In button.
TC-LO-003 Login with Face- book account
User clicks on Log In button on header.
User clicks on log in with Face- book button.
TC-FP-001 User forgot pass- word and uses email and user- name backup
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email and username which was used for registering.
User click on send button Server verify and send re- sponse to client.
User types in his/her new pass- word.
User types in his/her password again.
User click on send button
TC-FP-002 User forgot pass- word but does not remember email
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email and username which was used for registering.
User click on send button.
Server verify and send re- sponse to client.
TC-CP-001 User wants to change password and his/her old password is valid
User clicks on Change Pass- word button on Profile page.
User types in their old pass- word and new password.
Server verify and response to client.
TC-CP-002 User wants to change password and his/her old password is in- valid
User clicks on Change Pass- word button on Profile page.
User types in their old pass- word and new password.
Server verify and response to client.
TC-EP-001 User wants to change their pro- file information
User clicks on Edit profile but- ton on Profile page.
User types in their new infor- mation.
Server verify and response to client.
User infor- mation will be changed
TC-EP-002 User wants to change their pro- file information but don’t enter input
User clicks on Edit profile but- ton on Profile page.
User don’t types in their new information.
User informa- tion will remain the same
TC-CU-001 User wants to give their opin- ions/advice to website
User clicks on Contact-us but- ton on header.
User types in their name, email and message information.
Server verify and response to client.
User message will be save
TC-CU-002 User wants to give their opinions/advice to website but don’t input message
User clicks on Contact-us but- ton on header.
User types in their name, email.
Client send message for user to enter message.
View photo-gallery use case
TC-PG-001 User want to view photo- gallery on the website
User clicks on photo-gallery button on header.
Server display image upload by users.
View sample tree use case
TC-ST-001 Guest user wants to view sample tree to know more
User clicks on sample-tree but- ton on header.
User view the sample tree pro- vided.
Server verify and response to client.
Website success- fully display sample tree
TC-MT-001 User wants to add new node into their tree
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the parent node.
User click on add child button.
Website add new child and open edit form for user to en- ter information.
User click on arrow button to save.
Create node success and informa- tion is save in database
TC-MT-002 User wants to add new node into their tree but don’t enter node’s informa- tion
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the parent node.
User click on add child button.
Website add new child and open edit form for user to en- ter information.
User don’t enter node User click on arrow button to save.
Create node success and informa- tion is save in database
TC-MT-003 User wants to edit node infor- mation
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on edit button.
User enter update information User click on arrow button to save.
Update node success and informa- tion is save in database
TC-MT-004 User wants to edit node in- formation but don’t enter new information
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on edit button.
User don’t enter update infor- mation
User click on arrow button to save.
Update fail and infor- mation stay the same in database
TC-MT-005 User wants to view node infor- mation
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on view button.
View infor- mation success- fully success Passed
TC-MT-006 User wants to delete node
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on delete button.
Website node and its child.
Node remove and informa- tion is save in database success Passed
TC-MT-007 User want to ex- port tree file
User clicks on tree button on header.
User click on their tree.
User click on the export menu button on the top right corner.
User choose file type between PDF/PNG/SVG/CSV.
Website create chosen type for- mat file and save file in user lo- cal machine.
Export file suc- cessfully success Passed
TC-MT-008 User want to
User clicks on tree button on header.
User click on their tree.
User click on the dropdown menu on top left corner.
User choose their desired tem- plate.
Template change success- fully success Passed
TC-MT-009 User want to link style
User clicks on tree button on header.
User click on their tree.
User click on the double-down button on the right side corner menu of the tree.
User choose their desired link style.
Website change tree link ac- cording to user choice.
Link change success- fully success Passed
The result of this thesis is a working web application with a list of features proposed in the design chapter All features fully function to guarantee user have a great experience in the website The website ran successfully and can access through any device’s browser Users now can have a place to create their own family tree for free and share it to the others Here is a screenshot of a deployed website:
Figure 7.1: Homepage of web application
The website is run on local laptop with specifications:
• Processor: Intel(R) Core(TM) i5-7200U CPU 2.50GHz 2.70 GHz.
• Operating system: Windows 10 Home 64-bit.
The work still has some drawbacks need to be improved:
• User interface can be beneficial with a more modern and sleek design.
• Lack of the communication between user and user in website.
• Need to apply SEO on website to reach more users.
In order to resolve above drawbacks, I suggest some works:
• Improving an UI-UX design to attract more user.
• Building a mobile app available in the two most popular operation system (Android, iOS) for user can easily access.
• Improving a searching trees algorithm to increase the satisfaction from users.
Routing map of website
1 is the type value for Normal user to check authorization.
Figure 6.1: Response from server side when user login
Angular, as a client-side framework, handles routing and navigation between pages To enhance security, authentication is implemented to restrict access to certain pages based on user permissions or group membership Unauthorized attempts to access restricted pages are redirected back to the homepage, ensuring that users can only navigate to pages for which they have the necessary access rights.
Figure 6.2: Routing map of website
I have run the total 25 test cases to make sure every use-case feature func- tions according to its job Here are the test case description:
ID Test case de- scription
TC-RE-001 Register with email which hasn’t been used to register before
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
Server save information and re- sponse to client.
Redirect user to profile page.
TC-RE-002 Register with email which has been used before
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
TC-RE-003 Register with a used username
User clicks on Register button on header.
User enter information in reg- ister form.
User click on remember me button.
User clicks Register to submit.
TC-LO-001 Login with regis- tered account
User clicks on Log In button on header.
User types in their username and password.
User finishes by clicking Login
TC-LO-002 Login with unregistered ac- count or wrong password
User clicks on Log In button on header.
User types in their username and password.
User finishes by clicking Log In button.
TC-LO-003 Login with Face- book account
User clicks on Log In button on header.
User clicks on log in with Face- book button.
TC-FP-001 User forgot pass- word and uses email and user- name backup
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email and username which was used for registering.
User click on send button Server verify and send re- sponse to client.
User types in his/her new pass- word.
User types in his/her password again.
User click on send button
TC-FP-002 User forgot pass- word but does not remember email
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email and username which was used for registering.
User click on send button.
Server verify and send re- sponse to client.
TC-CP-001 User wants to change password and his/her old password is valid
User clicks on Change Pass- word button on Profile page.
User types in their old pass- word and new password.
Server verify and response to client.
TC-CP-002 User wants to change password and his/her old password is in- valid
User clicks on Change Pass- word button on Profile page.
User types in their old pass- word and new password.
Server verify and response to client.
TC-EP-001 User wants to change their pro- file information
User clicks on Edit profile but- ton on Profile page.
User types in their new infor- mation.
Server verify and response to client.
User infor- mation will be changed
TC-EP-002 User wants to change their pro- file information but don’t enter input
User clicks on Edit profile but- ton on Profile page.
User don’t types in their new information.
User informa- tion will remain the same
TC-CU-001 User wants to give their opin- ions/advice to website
User clicks on Contact-us but- ton on header.
User types in their name, email and message information.
Server verify and response to client.
User message will be save
TC-CU-002 User wants to give their opinions/advice to website but don’t input message
User clicks on Contact-us but- ton on header.
User types in their name, email.
Client send message for user to enter message.
View photo-gallery use case
TC-PG-001 User want to view photo- gallery on the website
User clicks on photo-gallery button on header.
Server display image upload by users.
View sample tree use case
TC-ST-001 Guest user wants to view sample tree to know more
User clicks on sample-tree but- ton on header.
User view the sample tree pro- vided.
Server verify and response to client.
Website success- fully display sample tree
TC-MT-001 User wants to add new node into their tree
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the parent node.
User click on add child button.
Website add new child and open edit form for user to en- ter information.
User click on arrow button to save.
Create node success and informa- tion is save in database
TC-MT-002 User wants to add new node into their tree but don’t enter node’s informa- tion
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the parent node.
User click on add child button.
Website add new child and open edit form for user to en- ter information.
User don’t enter node User click on arrow button to save.
Create node success and informa- tion is save in database
TC-MT-003 User wants to edit node infor- mation
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on edit button.
User enter update information User click on arrow button to save.
Update node success and informa- tion is save in database
TC-MT-004 User wants to edit node in- formation but don’t enter new information
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on edit button.
User don’t enter update infor- mation
User click on arrow button to save.
Update fail and infor- mation stay the same in database
TC-MT-005 User wants to view node infor- mation
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on view button.
View infor- mation success- fully success Passed
TC-MT-006 User wants to delete node
User clicks on tree button on header.
User click on their tree.
User click on the menu button on the target node.
User click on delete button.
Website node and its child.
Node remove and informa- tion is save in database success Passed
TC-MT-007 User want to ex- port tree file
User clicks on tree button on header.
User click on their tree.
User click on the export menu button on the top right corner.
User choose file type between PDF/PNG/SVG/CSV.
Website create chosen type for- mat file and save file in user lo- cal machine.
Export file suc- cessfully success Passed
TC-MT-008 User want to
User clicks on tree button on header.
User click on their tree.
User click on the dropdown menu on top left corner.
User choose their desired tem- plate.
Template change success- fully success Passed
TC-MT-009 User want to link style
User clicks on tree button on header.
User click on their tree.
User click on the double-down button on the right side corner menu of the tree.
User choose their desired link style.
Website change tree link ac- cording to user choice.
Link change success- fully success Passed
The result of this thesis is a working web application with a list of features proposed in the design chapter All features fully function to guarantee user have a great experience in the website The website ran successfully and can access through any device’s browser Users now can have a place to create their own family tree for free and share it to the others Here is a screenshot of a deployed website:
Figure 7.1: Homepage of web application
The website is run on local laptop with specifications:
• Processor: Intel(R) Core(TM) i5-7200U CPU 2.50GHz 2.70 GHz.
• Operating system: Windows 10 Home 64-bit.
The work still has some drawbacks need to be improved:
• User interface can be beneficial with a more modern and sleek design.
• Lack of the communication between user and user in website.
• Need to apply SEO on website to reach more users.
In order to resolve above drawbacks, I suggest some works:
• Improving an UI-UX design to attract more user.
• Building a mobile app available in the two most popular operation system (Android, iOS) for user can easily access.
• Improving a searching trees algorithm to increase the satisfaction from users.