Project Report Design And Develop Website For Plant Information Management In Phu Tho Province.pdf

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF ELECTRICAL AND ELECTRONIC ENGINEERING

Hanoi, 3/2023

Plants are an essential part of our world, providing oxygen, food, and habitats for countless species They come in a vast array of shapes, sizes, and colors, and each has its unique characteristics and uses With such diversity, it can be challenging to navigate the world of plants, especially if you're just starting to explore the subject.

That's where a dedicated plants information website comes in This type of website aims to provide comprehensive and reliable information on various types of plants, including their characteristics, name, family, growing location, uses and image Also plants experts can share their knowledge by uploading information to the website.

Overall, a plants information website can be an invaluable resource for anyone interested in the world of plants If you're looking to learn about different species, this website has something for everyone You can pay a visit through the link below:

Plant Website (groot-plant.works)

This is our first time making a website, so this project may contain a lot of errors, and don't have all the functions we have mentioned in the report, which need more time to implement So we hope to get more response and advice to improve our project

Division of project work tasks

EmailWork assignmentNote

01 Tăng Trí Dũng 20203817 dung.tt203817@sis.hust.edu.

Back-end02 Nguyễn Minh

20203823 phuc.nm203823@sis.hust.edu

Front-end03 Trần Thành Bảo 20203815 bao.tt203815@

Database04 Đào Xuân Chấn 20203816 chan.dx203816

Requirement, Use case, Activity diagram, Entity Relationship Models, Relational Models

II.Design analysis 8

1.Use case diagram 8

III Database analysis 12

1.Entity relationship diagram(ER) 12

2.Relational diagram(RR) 12

IV Backend Analysis: 15

1.Initiating App and Connect to Database 15

VI Source code 30

VII Limitation and Fixes: 30

Figure 1 Use case diagram 8

Figure 2 Activity diagram - generality 9

Figure 3 Activity diagram - Expert 10

Figure 4 Activity diagram - Admin 11

Figure 5 Activity diagram - End-users 11

Figure 6 ER 12

Figure 7.RR 12

Figure 10 Register 18

Figure 11 Login 19

Figure 12 Log out 20

Figure 13 Display picture 21

Figure 14 Tree search 22

Figure 15 Homepage on PC 25

Figure 16 Homepage on mobile 26

Figure 17 Navigation bar on mobile 26

Figure 18 Login page 27

Figure 19 Light mode 27

Figure 20 Logout 28

Figure 21 Search bar 28

Figure 22 Search result on PC 28

Figure 23 Plant image zoom on PC 29

Figure 24 Search result on mobile 29

Figure 25 Plant image zoom on mobile 30

I.Functional and Non-functional requirement

1 USER REQUIREMENT1.1 Functional requirement

REQ-1 5 The system must allow users to search for plants byname, scientific name, location, family name.REQ-2 4 The system must provide users some images for

users want to grow).

REQ-5 5 The experts are required to login or logout thewebsite.

REQ-6 5 The system must allow experts to add, modify,delete information about the plants.REQ-7 4 The system must allow experts to add, delete images

Identifier Priority Requirement

REQ-12 2 The system must be always reliable and available to users, with minimal downtime for maintenance or updates.

REQ-13 2 The system must have a user-friendly interface that is easy to navigate and understand.

REQ-14 2 The system must perform well on many types of devices: phone, pc, tablet.

2 USER STORIES

ST-1 As a user, I want to view information of plants 10ptsST-2 As a user, I want to view plant images 6 ptsST-3 As a user, I want to search for plants 10

ptsST-4 As a user, I want to see some tips on how to nurture the

4 pts

ST-5 As an expert, I want to login to the website 10ptsST-6 As an expert, I want to add, modify, delete information

about plants.

9 pts

ST-7 As an expert, I want to add, delete plants 10ptsST-8 As an expert, I want to add, delete images of plants 10ptsST-9 As an admin, I want to add, modify, delete user information,

user role of experts.

9 pts

II.Design analysis

1 Use case diagram.

Figure 1 Use case diagram

2 UC description

RequirementUC1: Search End-users To find plants through

the search bar

Admin To allow or denyexpert’s permission

REQ-10, REQ-11

y plant images

To change quantityabout plant images

REQ-6, REQ-7,REQ-8

y plant

To change quantityabout plantinformation

REQ-6, REQ-7,REQ-8

3 Activity diagram3.1.Generality

Figure 2 Activity diagram - generality

3.2. Expert

Figure 3 Activity diagram - Expert

Figure 4 Activity diagram - Admin

III Database analysis

1 Entity relationship diagram(ER)

Figure 6 ER

2 Relational diagram(RR)

Table Attribute Meaning Type Sample Value

Life form Sign of life form VARCHAR MM

Order name Scientific name VARCHAR PinalesFamily name Scientific name VARCHAR PinaceaeGenus name Scientific name VARCHAR PinusSpecies name Scientific name VARCHAR Pinus

massonianaLambSynonyms Scientific name VARCHAR Bursera

Characteristics TEXT Too long towrite hereBiological and

Characteristics TEXT Too long towrite here

TEXT Too long towrite here

Plant value Function of eachpart of plant

TEXT Too long towrite hereConservation status,

Conservationstatus, business

TEXT Too long towrite hereDocumentation Documentation TEXT Too long to

write here

Expire Time of eachlogin

DATETIME 13/2/2020

Salt Enhance security INTEGER Random_byte(32)

Image ID Image ID INTEGER 1

Favorite Favorite ID Favorite plants ID INTEGER Assignednumber

IV Backend Analysis:

- We use Node Js and Express for Server-side Programming- We use Microsoft SQL Server for Database Storage( MSSQL)

1 Initiating App and Connect to Database

redirected to the homepage.

4 Login

Figure 11 Login

- These codes above use Passport.js Local Strategy defined in passport.js configuration file to authenticate user’s credential If the user's username or password is incorrect, it will return an error and prevent the user from

logging in If the user's credential is correct, it will allow the user to log in, start a session and create a cookie with the user's ID The cookie then can be used in all other routes in our website so that users can do member-only functions.

5 Log out

Figure 12 Log out

- These codes above define /logout route so that users can log out of their accounts.

6 Display picture

- These codes above are used to define /images/id route This route will display pictures of trees from the Database Depending on the id, it will retrieve the picture from the database with that id and then display it As pictures are saved as Binary in the database, these codes above will convert binary to base64 in order to display the picture.

7 Tree search

Figure 14 Tree search

- These codes above are used to search Trees from the database using the user’s input In these codes, we take user’s input from the front-end and thensearch the database with that input Then the results will be returned as searchResults variable and then we use EJS in order to create a dynamic client-side page which will change depending on what the user searched.- But in these codes, we can’t display multiple results as the front-end can’t

display multiple results even though the back-end has already sent the data to the front-end.

- Website has light/dark mode based on user preferences.

Figure 19 Light mode

Figure 21 Search bar

VI Source codeVisit this link:

https://github.com/dungtangtri/Ky_thuat_phan_mem_ung_dung.gitVII Limitation and Fixes:

In conclusion, the website for Phu Tho plants information has been a challengingyet rewarding experience Our aim in this project is getting experience on webprogramming The requirements were carefully analyzed and translated into adetailed system design that meets the functional and non-functional requirements.The project's success depended on the effective collaboration and communicationbetween the team members, who worked diligently to ensure that the application'srequirements were met The testing and evaluation of the application confirmedthat there are many functional and non-functional requirements specified in thesystem requirements that haven't been met.

Overall, the website right now can provide basic functions: search information byname We will try to fulfill the rest of the use case and implement some newfunctions to the website However, the project highlights the importance of carefulanalysis and planning in software development and the critical role thatcollaboration and effective communication play in ensuring a successful outcome.

Future Development

● Plants detection● Community

● Enhanced Security Features● Send newsletter to users