<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY</b>

<b><small>SCHOOL OF ELECTRICAL AND ELECTRONIC ENGINEERING</small></b>

<i><b>Hanoi, 3/2023</b></i>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>Division of project work tasks</b>

<b>EmailWork assignmentNote</b>

01 Tăng Trí Dũng 20203817

Back-end02 Nguyễn Minh

20203823

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.

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<small>II.Design analysis... 8</small>

<small>1.Use case diagram...8</small>

<small>III. Database analysis...12</small>

<small>1.Entity relationship diagram(ER)...12</small>

<small>2.Relational diagram(RR)...12</small>

<small>IV. Backend Analysis:... 15</small>

<small>1.Initiating App and Connect to Database...15</small>

<small>VI. Source code... 30</small>

<small>VII. Limitation and Fixes:...30</small>

<small>Figure 1. Use case diagram...8</small>

<small>Figure 2. Activity diagram - generality...9</small>

<small>Figure 3. Activity diagram - Expert...10</small>

<small>Figure 4. Activity diagram - Admin...11</small>

<small>Figure 5. Activity diagram - End-users...11</small>

<small>Figure 6. ER...12</small>

<small>Figure 7.RR...12</small>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<small>Figure 10. Register...18</small>

<small>Figure 11. Login...19</small>

<small>Figure 12. Log out...20</small>

<small>Figure 13. Display picture...21</small>

<small>Figure 14. Tree search...22</small>

<small>Figure 15. Homepage on PC...25</small>

<small>Figure 16. Homepage on mobile...26</small>

<small>Figure 17. Navigation bar on mobile...26</small>

<small>Figure 18. Login page...27</small>

<small>Figure 19. Light mode...27</small>

<small>Figure 20. Logout...28</small>

<small>Figure 21. Search bar...28</small>

<small>Figure 22. Search result on PC...28</small>

<small>Figure 23. Plant image zoom on PC...29</small>

<small>Figure 24. Search result on mobile...29</small>

<small>Figure 25. Plant image zoom on mobile...30</small>

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

I.Functional and Non-functional requirement

<b>1. USER REQUIREMENT1.1. Functional requirement</b>

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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.

<b>2. USER STORIES</b>

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

II.Design analysis

<b>1. Use case diagram.</b>

<small>Figure 1. Use case diagram</small>

<b>2. UC description</b>

RequirementUC1: Search End-users To find plants through

the search bar

Admin To allow or denyexpert’s permission

REQ-10, REQ-11

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

<b>3. Activity diagram3.1.Generality</b>

<small>Figure 2. Activity diagram - generality</small>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>3.2.</b>

<b>Expert</b>

<small>Figure 3. Activity diagram - Expert</small>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<small>Figure 4. Activity diagram - Admin</small>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

III. Database analysis

<b>1. Entity relationship diagram(ER)</b>

<small>Figure 6. ER</small>

<b>2. Relational diagram(RR)</b>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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)

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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)

<b>1. Initiating App and Connect to Database</b>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

redirected to the homepage.

<b>4. Login </b>

<small>Figure 11. Login</small>

- 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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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.

<b>5. Log out</b>

<small>Figure 12. Log out</small>

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

<b>6. Display picture</b>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>7. Tree search </b>

<small>Figure 14. Tree search</small>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

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

<small>Figure 19. Light mode</small>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<small>Figure 21. Search bar</small>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

VI. Source code

Visit this link:

Limitation and Fixes:

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

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.

<b>Future Development</b>

● Plants detection● Community

● Enhanced Security Features● Send newsletter to users

</div>