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

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..

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF ELECTRICAL AND ELECTRONIC ENGINEERING

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

I Functional and Non-functional requirement 6

1 USER REQUIREMENT 6

1.1 Functional requirement 6

1.2 Non-functional requirement 6

2 USER STORIES 7

II Design analysis 8

1 Use case diagram 8

2 UC description 8

3 Activity diagram 9

3.1 Generality 9

3.2 Expert 10

3.3 Admin 11

3.4 End-users 11

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

2 Authentication 16

3 Register 18

4 Login 19

5 Log out 20

6 Display picture 20

7 Tree search 22

V Front-end analysis: 25

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 REQUIREMENT

1.1 Functional requirement

REQ-1 5 The system must allow users to search for plants by

name, scientific name, location, family name.REQ-2 4 The system must provide users some images for

plants

REQ 3 5 The system must provide users some information

about the plants (appearances of plants, use of

plants, ….)

REQ-4 2 The system must provide users some tips on how to

nurture the plants (type of fertilizer, type of soils,temperature, season, … are suitable for the plants

users want to grow)

REQ-5 5 The experts are required to login or logout the

website

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

of plants

REQ-8 3 The system must allow admins to add, delete plants.REQ-9 5 The admins are required to login or logout the

website

REQ-10 5 The system must allow admins to add expert

account, expert information

REQ-11 5 The system must allow admins to modify expert

information, delete user role of experts

1.2 Non-functional requirement

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 10

ptsST-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

plant

4 pts

ST-5 As an expert, I want to login to the website 10

ptsST-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 10

ptsST-8 As an expert, I want to add, delete images of plants 10

ptsST-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

REQ-1

UC2: View plant

images

End-users To see some images

about the plant

REQ-2

UC3: View plant

information

End-users To see information

about the plants

REQ-3

UC4: Sign in Expert,

Admin

To verify identity ofmanagers

Add/Delete/Modif

y plant images

Expert,Admin

To change quantityabout plant images

REQ-6, REQ-7,REQ-8

UC8:

Add/Delete/Modif

y plant

Expert,Admin

To change quantityabout plantinformation

REQ-6, REQ-7,REQ-8

3 Activity diagram

3.1 Generality

Figure 2 Activity diagram - generality

3.2. Expert

Figure 3 Activity diagram - Expert

3.3 Admin

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

Plant

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

tonkinensisGuillMorphological

characteristic

Characteristics TEXT Too long to

write hereBiological and

TEXT Too long to

write here

Plant value Function of each

part of plant

TEXT Too long to

write hereConservation status,

business

Conservationstatus, business

TEXT Too long to

write hereDocumentation Documentation TEXT Too long to

write here

Expire Time of each

User

Salt Enhance security INTEGER Random_byte(3

2)

Image ID Image ID INTEGER 1

Favorite Favorite ID Favorite plants ID INTEGER Assigned

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

V Front-end analysis:

- We use HTML , CSS and javascript for Client-side ProgrammingThe website has some functions for user to use:

● Dark / light mode

● Provide some FAQs

● Keep user preference and status

● Search

The website is compatible with all types of devices, and can change to fit the devices users use Here are some pictures to demonstrate the website on different devices

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

Figure 19 Light mode

Figure 21 Search bar

VI Source code

Visit this link:

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