Creating a social networking platform to assist parents in raising their children

TECHNOLOGY AND EDUCATIONHo Chi Minh City, June 2024 CREATING A SOCIAL NETWORKING PLATFORM TO ASSIST PARENTS IN RAISING THEIR CHILDREN LECTURER: PHD.. GRADUATION PROJECT ASSIGNMENTFull n

REASONS FOR CHOOSING THE TOPIC

The current situation of parenting is challenging and requires continuous learning and adaptation Parents face many difficulties, such as lack of knowledge, inadequate resources, and limited access to expert advice Moreover, raising children is a long journey that requires patience, dedication, and perseverance Therefore, the website's initiative to provide a platform for parents to exchange knowledge and experiences is a valuable resource It can help parents to overcome their challenges and feel more confident in their parenting skills

The website's online forum is also a great tool for parents to connect with other parents who are facing similar challenges They can share their experiences, ask for advice, and provide support to each other This can help create a sense of community and belonging, which is essential for parents who may feel isolated or overwhelmed in their parenting journey

In summary, the website's initiative to provide a platform for parents to exchange knowledge and experiences is a valuable resource for parents It can help them overcome the challenges of parenting and create a sense of community and belonging.

THE URGENCY OF THE SUBJECT

In the context of Education 4.0, building a website to support knowledge for parents raising children is not only a step consistent with the trend of the times but also an urgent need This website will serve as a smart technology platform where parents can access reliable and updated information on effective parenting practices, thereby developing skills necessary in the process of building a home This website will become a bridge between parents and experts, facilitating the exchange of information and finding professional support It also provides opportunities for parents to keep up to date with new parenting trends and methods and provides diverse support for children with special needs

In addition, the website will guide parents on how to create a flexible and free learning environment for children, helping children maximize their abilities in an increasingly

2 complex and diverse world Thus, creating this website not only helps parents grasp the latest knowledge and skills in the field of education but also creates a solid foundation for children's comprehensive development.

SURVEY THE CURRENT STATUS OF SIMILAR APPLICATIONS

Overall review of 3 websites

Table 1 Overview review of 3 websites

Complex interface, making it difficult for new users

The interface is beautiful, easy to use, but a bit confusing due to many ads

Friendly, eye- catching interface, easy to get used to and use

Response speed Fast Fast Fast

Closed source code makes exploiting vulnerabilities difficult

Large systems with large communities and users will be difficult to manage

Meets all basic features, has some extended features but is difficult to use

Meets all basic features, and some extended features

Meets all the basic features, in addition to providing many new features to support users, especially women Website loading speed Fast loading speed Fast loading speed Fast loading speed

Easy to operate and navigate

Difficulty in navigation operations, especially for new users

Friendly with mobile devices Responsive Responsive Responsive

Some small errors will not affect the user experience

Large number of users with different communities and knowledge content

The number of people is large, however there is no playground community for users

Large number of users, diverse community with many different topics.

Special functions of each website

Table 2 Compare the special functions of each website

There are various communities that cater to everyone's needs.

Send messages to other users

There are a variety of communities to suit your needs Follow the articles

There are various communities that can meet everyone's needs.

Create articles in expert questioning mode and anonymous mode

Assist parents in searching for information in stages (0-1 years old, 1-3 years old, 3-6 years old, etc.)

Integrate a variety of obstetric auxiliary functions (pregnancy weeks, pregnancy date, IVF, menstrual cycle, etc.)

EXPECTED RESULTS TO ACHIEVE

Non-functional requirements

- The interface is beautiful and easy to use

Functional requirements

- Authenticate and decentralize users: Admin, Experts, and Users

- Have a community to exchange knowledge about certain topics between user and expert

- Have space to store good articles

- Follow and register for knowledge sharing courses from experts

- Monitor the health of both mother and baby

OBJECT AND SCOPE OF THE STUDY

Research objectives

- Admin: System administrator You can manage user accounts on the website, manage expert accounts, manage community, create accounts for experts, and manage post review before experts publish on the homepage In addition, you can also manage the list of reported non-compliant content on the website (non-compliant posts, non-compliant comments) Furthermore, admin can also moderate course which is created by expert before letting them public on homepage for users

- Expert: The user logs in and uses the function as an expert You can post on the home page, in addition you can use all the features of the website such as chatting, posting to exchange information on the forum, saving posts, reporting invalid content, interacting with other users, posts from liking to commenting and following other accounts Moreover, expert can also create course for sharing knowledge about raising children and mother’s health to parent

- Users: Users log in and use the same functions as their roles Use all the features of the website, such as viewing posts, chatting, saving posts, reporting invalid content, interacting with posts, from heartbeat to comments, and tracking other accounts Moreover, they can also join or follow some community that they interest, register course that expert create for sharing knowledge about raising children and mother’s health and monitor the health of mother and baby based on the system's health assessment feature.

Objective and scope

The website mainly focuses on combining current social platforms but still ensures all the features to handle the operations of a website providing educational information, like real websites today Specifically: log in, register with email and account, log in with google, post knowledge sharing articles, have a community to exchange or ask questions to experts about certain topics belong to community and have the features of other websites

Current social networking sites such as chatting, following other users They also have ability to refer to the health status of mother and baby based on the system's health assessment feature and register course for learning more and detail than general knowledge from articles Regarding the admin board, fully build the functions of adding, deleting, editing, searching for user accounts, experts, censoring posts before posting and managing the list of reported content Moreover, admin have permission to manage community and category like create, update, and delete, they also have ability to moderate course before posting them on homepage for users

SYSTEM ARCHITECTURE

GENERAL ARCHITECTURE OF THE SYSTEM

Figure 1 General architecture of the system

The overall architecture of the system consists of three traditional layers: the front-end presentation layer (ReactJS), the backend application layer (Java, Spring Boot), and the MySQL database layer

The application architecture consists of six fundamental parts Users (clients) send requests through the presentation layer, and then the frontend forwards these requests to the backend The backend receives the request, accesses the database, and returns the requested information to the frontend for display according to user preferences.

TECHNOLOGY USED AT FRONT-END

ReactJS is a popular JavaScript library developed by Facebook for building user interfaces (UI) in web applications React facilitates the creation of interactive UIs by designing simple views for each state in your application, and it updates and renders the appropriate components when your data changes

ReactJS follows a component-based programming model Each component in React is an independent piece of the user interface that can be built and maintained separately Additionally, React utilizes a Virtual DOM to optimize performance Instead of updating the actual DOM directly whenever there is a change, React creates a virtual copy of the DOM, compares it to the real DOM, and then updates only the changed parts, reducing the load on the browser

React uses JSX, a JavaScript extension syntax, to define UI components JSX makes it easier and more understandable to write HTML code within JavaScript

Designed as a library rather than a framework, React focuses on solving a specific problem - building user interfaces - allowing developers greater flexibility in choosing other libraries and technologies to integrate with React

1.2.1.2 Compare ReactJS and the other languages

Table 3 Compare React JS and other languages

Large community, many documents and patches shared

Large community, many resources maintained and officially supported by Google

Suitable for people with experience with JavaScript

Easy to learn, suitable for beginners

Requires in-depth knowledge of typescript

Virtual DOM (Document Object Model)

MVC (Model – View - Controller) architecture

Perfect for developing modern websites and native rendering apps for iOS and Android

Small projects and startups are suitable for single page application projects

Large project and serving businesses with many features

Reusable code Available Available Available

Load time Medium Low High

From the comparisons above, we can see that using ReactJS to develop user interfaces brings many notable advantages The virtual DOM of ReactJS helps improve performance, and the ability to build Single Page Applications becomes more straightforward Furthermore, the large and diverse community of ReactJS provides a variety of resources and strong support Additionally, the concept of components allows ReactJS to reuse source code and optimize the development process

However, it's essential to note that ReactJS requires a higher learning curve and more time compared to some other libraries or frameworks Users need to have a solid understanding of ReactJS to manage state and lifecycle in large and complex applications, especially when not applying state management architectures like Redux Moreover, the frequent updates of ReactJS can pose some difficulties and challenges for newcomers to programming

Vite is a front-end build tool that supports the development of modern web applications, optimized for fast and efficient development Utilizing the "ESM-first" model and bundling only in the production stage, Vite provides a fast development server with Hot Module Replacement (HMR) support In summary, Vite is a build tool using the Rollup module bundler, highly optimized for generating static content (CSS, HTML), not based on Webpack The Dev server also uses native ES modules in the browser Initially introduced alongside Vue 3, developed by Evan You (Creator of Vue), Vite can be seen as an upgraded

11 version of Vue CLI Later on, Vite expanded its support to include React, Preact, and Svelte…

However, despite its numerous advantages, Vite also has some drawbacks, such as being browser-specific and having dependency limitations It is more compatible with modern JS package types than CommonJS (older packages) Vite has attempted to convert from CommonJS to JS Modules, but complete compatibility is not guaranteed

Figure 6 Webpack model Table 4 Performance comparison between Vite and Webpack

LC/CS Vite Vite CS

12.4 MB 11.6 MB 7.3 MB 9.4 MB 5.7 MB

According to the comparisons above, we can observe a stark difference between Vite and Webpack in both development and production environments Specifically, we can clearly see the complete performance superiority of Vite compared to Webpack in the development environment, including the initial application launch in the browser and subsequent runs after the project has been cached The reason for this is that Vite sends the entire source code to the browser without bundling, leading to a significant amount of time loss However, because it doesn't bundle resources, it can directly compare code files and chunk files on the server This enables Vite to only update the files with changes, making the rebuild time somewhat faster compared to Webpack

However, Vite also has certain advantages when compared in the production environment Unlike the development environment, in production, it needs to be built into static files, and at this point, HMR is not required Vite uses Rollup for building, and due to the utilization of Rollup and performance enhancement through Tree-Shaking (eliminating unused resources), despite a slight disadvantage in terms of time, Vite still holds an advantage when considering size optimization

1.2.3 Setup ReactJS project with Vite

- Initialize vite: npm create vite@latest

Follow the instructions for a complete and successful setup

Figure 7 Initialize a ReactJS project with Vite

Figure 8 Install necessary package by command line

Figure 9 Initial structure of a ReactJS project initialized with Vite

- Run the project on the browser by using the command line: npm run dev

Figure 10 Run the project by command line

Ant Design is a UI (User Interface) library developed by Ant Financial, a subsidiary of Alibaba Group Ant Design is designed to assist in building efficient and aesthetically pleasing user interfaces for web and mobile applications The library provides a graphic design system and pre-designed interface components, enabling developers to create user- friendly and professional-looking applications without starting from scratch

Ant Design primarily uses the React programming language, a popular JavaScript library for building interactive user interfaces However, Ant Design also provides versions for other frameworks such as Angular and Vue.js

An important aspect of Ant Design is that it brings consistency and ease of maintenance to user interface development, ensuring that applications using it have a unified and high- quality interface

Material UI is an open source React component library that implements Google's Material Design

It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box and features a suite of customization options that make it easy to implement your own custom design system on top of our components

Material UI brings a completely new interface to the website, with buttons, text fields, toggles, and more, all designed in a unique style, as opposed to the widespread use of Bootstrap that is common today

React Modal is a powerful and flexible library for React, designed to create dialog boxes (modals) easily and effectively React Modal enables you to quickly add attractive modals to your application without the hassle of building them from scratch The library supports features such as overlays, animations, and high customization, enhancing user experience and increasing the interactivity of your application

React Modal primarily uses the React framework, a widely used JavaScript library for building interactive user interfaces This ensures that the integration with React applications is seamless and straightforward

An important aspect of React Modal is its ability to bring consistency and ease of maintenance to the development process, ensuring that applications using it have a unified and high-quality interface This makes it an excellent choice for developers looking to improve the usability and appearance of their applications with minimal effort

TECHNOLOGY USED AT BACK END

MySQL is an open-source Relational Database Management System (RDBMS) that operates on a client-server model RDBMS is software or a service used to create and manage databases, organizing them based on relationships MySQL operates on various operating systems and supports multiple programming languages, including PHP, PERL,

Table 5 Compare MySQL vs SQL Server

Platform Support Supports more platforms than

Supports fewer platforms compared to MySQL

Supports more programming languages than SQL Server, such as Perl and Haskell

Supports fewer programming languages than MySQL

Has a more diverse range of third-party connectors and integrations

Allows filtering across multiple databases simultaneously You can also pause queries without terminating the entire process

Has features that provide flexibility in scaling but is not as flexible as SQL Server

Uses compression, advanced partitioning, and in-memory technology to offer a more scalable environment

Merge connections and caches query results for high performance

Performs well in a scaled environment and provides better feedback compared to MySQL

Uses SQL as its query language and employs backticks in its syntax

Uses SQL as its query language and uses double quotes in its syntax

Has more integrations than SQL Server

Integrates more with Microsoft products

Documentation Open-source software Proprietary software with licensing fees

Security Features Allows modification of the database during operation

Does not permit modification or access to files during operation

Easy to use: MySQL is a high-speed, stable, and user-friendly database management system that operates on various operating systems It provides a large system of powerful utility functions, making it easy for users to interact with the database

High security: MySQL is designed to meet high-security requirements, making it an ideal choice for applications that require database access over the Internet The system integrates many security features, even at a high level

Feature-rich: MySQL supports numerous powerful SQL functions, meeting user expectations for a relational database management system, both directly and indirectly Scalable and powerful: MySQL can handle large amounts of data and can be scaled flexibly as needed This flexibility makes it suitable for applications with requirements for scalability and high performance

Fast: Establishing standards allows MySQL to perform tasks efficiently and cost- effectively, thus accelerating the system's execution speed

High Performance: MySQL offers high performance and excellent processing capabilities, particularly for applications that demand stability and reliability

Web service is an indispensable part of a managed website To be able to create a Web service we can use Spring framework

• Spring Framework is developed based on Java language It provides a programming model for applications such as Desktop, Mobile, Web

• Spring Framework is an open-source framework

• Spring Framework is one of the frameworks widely used by programmers because of its simplicity and large support community

• Spring framework is divided into many modules, depending on the purpose of application development, we use one of the appropriate modules

To create a Web service for a Web application using Spring Framework, we will use Spring Boot

• Spring Boot is a module in Spring Framework

• Spring Boot was born with the purpose of eliminating complex configurations and focusing only on creating an independent application as quickly and easily as possible

• Combine with Tomcat, Undertow or Jetty for deployment

• Provides a starter kit to simplify application configuration

• Add third-party libraries quickly

• Settings will be automatically generated with no XML writing required for configuration

Firebase is a mobile and web application development platform provided by Google It offers a range of services and tools that help developers build, improve, and grow their applications quickly and efficiently Here are some of the main services that Firebase provides: realtime database, cloud firestore, authentication, cloud functions, hosting Firebase provides a comprehensive ecosystem that helps developers reduce the complexity of backend tasks, allowing them to focus more on developing and improving the user experience in their applications

1.3.4 Amazon S3 - Amazon Simple Storage Service

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance Amazon S3 provides management features that can optimize, organize, and configure access to data to meet specific user requirements

RabbitMQ is a Message Broker that uses the AMQP protocol to serve the exchange of messages between applications RabbitMQ is understood as a message carrier and manages messages on the queue.

SYSTEM ANALYSIS AND DESIGN

USE CASE DIAGRAM

Use Case Name Sign up

Short description Guest signs up account on web application

- The guest has successfully signed up to their account on the web

- The system records a new account and user can use that account to log into the web

1 Select the create an account button

2 The system redirects to the signup page

3 Fill full account information (username, email, phone number, date of birth, password, confirm password)

6 The system redirects to the login page

Exception Flow E1 Notification email exists- (Email exists, email has logged in with Google into the previous account) (Return 3)

Use Case Name Sign in for user

Short description Allow users to access system features and resources

Pre-condition(s) The user account has already been created

Post-condition(s) The system will switch to the homepage depending on the user's role and access user’s features

1 The user enters information (email, password) (A1)

3 The system checks sign in information (E1)

4 Successfully accessed and redirected to homepage depending on the user’s role

A1 The actor clicks continue with google button

A1.2 The user sign in using Google Login Service

A1.3 The system checks sign-in information

A1.4 Successfully accessed and redirected to homepage depending on the user’s role

Exception Flow E1 Notify “Wrong password or email” (Return to step 1 in Main

Use Case Name Sign out for user

Short description Allow users to sign out of the system

Pre-condition(s) The user is signed in to the system

Post-condition(s) The user is signed out of the system

1 The user clicks on the icon in the bottom left corner of the screen

2 The system displays a drop-down button Log out

3 The user selects log out button

4 The system logs the user out of the system

Figure 22 Use case manage comments

Use Case Name Create comment

Short description Allow users to comment on posts

Pre-condition(s) The user is signed into the system

Post-condition(s) Comment created successfully

1 The user clicks on the post they want to comment on

2 The system redirects to detailed post page

3.1 The user enters comments in the comment input area

3.2 The user clicks icon in the bottom comment they want to comment

3.2.1 The system displays the comment input area below the comment the user wants to comment on

3.2.2 The user enters comment in the comment input area in the bottom comment reply

5 The system displays user comments

Use Case Name Delete comment

Short description Allow users to delete their comments

This comment has to be belonged to the user

Post-condition(s) Comment is deleted successfully

1 The user clicks on the post they want to delete their comment

3 The user clicks icon in the right of comment they want to delete

4 The system displays dropdown menu

5 The user clicks delete button

6 The system displays a popup confirming deletion of the user's comment

7 The user click confirm button

8 This comment is removed from post

Use Case Name Edit comment

Short description Allow users to edit their comments

This comment is owned that user

Post-condition(s) Comment is edited successfully

1 The user clicks on the post they want to edit their comment

3 The user clicks icon in the right of comment they want to edit

5 The user clicks edit button

6 The system displays the input comment area

9 The system displays comments that have been edited

Use Case Name Like comment

Short description Allow users to like comment

Post-condition(s) Comments were successfully liked

1 The user clicks on the post they want to like their comment

3 The user clicks icon in the bottom of comment they want to react

4 The system switches to the icon

Use Case Name Unlike comment

Short description Allow users to unlike comment

Pre-condition(s) - The user is signed in to the system

- This comment has been liked

Post-condition(s) Comments were successfully unliked

Main Flow 1 The user clicks on the post they want to unlike their comment

3 The user clicks icon in the bottom of comment they want to unlike

4 The system switches to the icon

Use Case Name Report comment

Short description Allow users to report comment

Pre-condition(s) - The user is signed in to the system

Post-condition(s) Comments is reported successfully

1 The user clicks on the post they want to report their comment

3 The user clicks icon in the right of comment they want to report

5 The user clicks report button

6 The system popup modal which the reason for the report

7.1 Choose reason to report (Misunderstanding or scam, restricted content, spam)

7.2 The user chooses reason others

7.2.2 The system displays the field input for other reasons

8 The user clicks confirm button

7 The system displays a successful report message

Figure 23 Use case manage posts

Use Case Name Bookmark post

Short description Bookmark favorite posts to read again later

Pre-condition(s) This post has not been bookmarked before

Post-condition(s) This post is bookmarked successfully and stored in list bookmark

1 User clicks icon in other posts

3 User clicks add to bookmark button

4 Post is bookmarked, both icon and text are changed to remove from bookmark

Use Case Name View Bookmark post

Short description View posts which have been bookmarked before

Pre-condition(s) This post has been bookmarked before

Post-condition(s) View detail bookmark post

1 The user click bookmark button on left-sidebar

2 System redirect to bookmark page

3 Display list posts which have been bookmarked before

5 System redirect to post detail page

Use Case Name Delete bookmark post

Short description Delete posts from list bookmark

Pre-condition(s) This post has been bookmarked before

Post-condition(s) This post is un-bookmarked successfully

1 User clicks icon in posts bookmarked(A1)

3 User clicks remove from bookmark button

4 Post is bookmarked, both icon and text are changed to add to bookmark

A1 User clicks the bookmark button on the left sidebar

A1.1 System redirect to bookmark page

A1.3 Click on remove from bookmark

A1.4 The post is not displayed on the bookmark page

Use Case Name View post detail

Short description View post in detail

Post-condition(s) View post in detail successfully

1 User clicks on the post

2 System redirects to post detail page

Use Case Name Like post

Short description Like posts which users like

Pre-condition(s) This post has not been liked

Post-condition(s) This post is liked successfully

1 User clicks icon on posts

2 Post is liked and icon become

Use Case Name Unlike post

Short description Unlike posts which users like

Pre-condition(s) This post has been liked

Post-condition(s) This post is unliked successfully

Main Flow 1 User clicks icon on posts

2 Post is unliked, and icon become

Use Case Name Report post

Short description Describe how to report post which is not suitable

Pre-condition(s) Posts are owned other users

Post-condition(s) Post is reported

1 User clicks icon on posts

3 Click on the report button

5.1 Choose reason to report (Misunderstanding or scam, restricted content, spam)

5.2.2 System displays the field input for other reasons 5.2.3 Fill that field

6 Choose to confirm to send a report

7 Display notification report successfully and then disappear after 5 seconds

Use Case Name Create post

Short description Describe how to create your post

Pre-condition(s) Users has signed into the system by users or expert accounts

Post-condition(s) Their post will be delivered to the moderate post in the CMS page to be moderated by admin

2 The system displays the create post interface

3 Enter content, title they want to share

4 Select post to community area

8 Click the publish button to accept

Use Case Name Delete post

Short description Describe how to delete post

Users have signed into the system by users or expert accounts

The post is owned by that user or expert

Post-condition(s) Post is deleted successfully

1 Click icon on their post

Use Case Name Edit post

Short description Describe how to edit post

Users have signed into the system by users or expert account

Post is owned that users or expert

Post-condition(s) Post is edited successfully

1 Click icon on their post

4 System displays the edit post interface

5 Users edit content or title post

Use Case Name Share post

Short description Describe how to share post

Pre-condition(s) Users have signed into the system by users or expert account

Post-condition(s) Post is shared successfully

1 Click button share on the post want to share

3.1 Click on the platform you want to share

3.1.2 Display the sharing interface on the platform (facebook, telegram, twitter)

3.2 User clicks icon to copy link post

3.2.2 Users can paste the link where they want to share

Short description Allows users to chat with others

Post-condition(s) The user sent the message successfully

1 The user clicks the message button in the left sidebar

2 The system redirects to the message page

4 The user selects the person they want to message and who they have messaged before (A1)

5 The system displays the chat area with the person the user wants to chat

6 The user enters the message into the chat area

8 The message has been sent successfully

A1 The user enters a letter or a substring of the username they are searching for in the search box

A1.2 The system searches for people whose names or substrings of names match the search criteria

A1.3 The system shows the user a list of people whose names or substrings of their names match the search criteria

A1.4 The user clicks on the person they want to chat in the list (continue at step 5 in main flow)

Figure 24 Use case manage profile

Use Case Name Edit profile

Short description Allows users to edit their information

Post-condition(s) The user edits their information successfully

1 The user clicks the profile button in the left sidebar (A1)

2 The system redirects to the profile page

3 The user clicks edit profile button

4 The system displays the information that the user has editable

5.1 The user clicks icon in the right Full name to edit full name

5.1.2 The system displays modal edit full name

5.1.3 The user enters the full name they want to edit

5.1.4 The user clicks save button

5.1.5 The system notifies that the information has been updated successfully

5.1.6 The system returns to the modal displaying the information that the user has editable

5.2 The user clicks icon in the right Bio to edit bio

5.2.2 The system displays modal edit bio

5.2.3 The user enters the bio wants to edit

5.3 The user clicks icon in the right Date of Birth to edit date of birth

5.3.2 The system displays modal edit date of birth

5.3.3 The user clicks the date of birth field wants to edit

5.3.4 The system displays date picker area

5.3.5 The user selects the date they want to edit

5.4 The user clicks icon in the right Phone to edit phone 5.4.2 The system displays modal edit phone

5.4.3 The user enters the phone wants to edit

Alternative Flow A1 Users Click on avatar at the bottom on the left side bar

(continue at the step 2 in main flow)

Use Case Name View profile

Short description Allows users to view other users' profiles and own profiles

Post-condition(s) The user view other users' profiles and own profile

1.1 The user clicks on the avatar of the person who wants to view the profile

1.1.2 The system displays to the profile page of the person the user wants to view

1.2 The user clicks the profile button in the left sidebar to view users’ profile (A1)

1.2.2 The system displays to the users’ profile page

Alternative Flow A1 Users click on the avatar at the bottom of the left-side bar

(continue at step 1.2.2 in main flow)

Use Case Name Change avatar

Short description Allows users to change their avatar

Post-condition(s) The user changes their avatar

1 The user clicks the profile button in the left sidebar (A1)

2 The system displays to the users’ profile page

3 The user clicks the avatar next to the edit profile button

4 The system opens a computer window to select the image you want to change

5 The system displays edit image modal

6 The user edits image size

7 The user click save button

8 The system update users’ avatar successfully

Alternative Flow A1 User clicks on the avatar at the bottom of the left sidebar

Use Case Name Forgot password

Short description Describe how to reset password by email

Post-condition(s) Get new password

2 System redirect to forgot password page

5 System will send OTP code to that email

6 Get that code and fill in reset form

8 Appear create new password form

E2 Both field new password and confirm new password are not the same

Figure 25 Use case manage follow

Short description Allows users to follow other users and experts

This user or expert hasn’t been followed before

Post-condition(s) The user follows other users and experts

1 The user clicks icon in the right post (A1) 1.2 The system displays a dropdown menu

1.3 The user clicks the follow button

1.4 Follow successfully and this button becomes the unfollow button

A1 The user clicks the avatar on the post

A1.2 The system redirects the other user’s profile page

A1.3 The user clicks the follow button

A1.4 Follow successfully, and this button becomes the unfollow button

Short description Allows users to unfollow people they already follow

This user has been followed before

Post-condition(s) The user unfollows people they already follow

1 The user clicks icon in the right post (A1)

1.2 The system displays a dropdown menu

1.3 The user clicks the unfollow button

1.4 The system displays the follow button

A1 The user clicks on the avatar on post

A1.2 The system displays to the other user’s profile page A1.3 The user clicks the unfollow button

A1.4 The system displays the follow button

Figure 26 Use case manage course

Use Case Name View course

Short description Allows users to view course

Post-condition(s) The user view course

1 The user clicks the schedule button in the left sidebar

2 The system displays schedule page

3 The system displays the courses that will be open in this month's calendar

4 The user clicks course want to view

5 The system popup short description of course

6 The user clicks more and register button

7 The system direct to course detail page

Use Case Name Register course

Short description Allows users to register course

Post-condition(s) The system sends emails about course participation information

1 The user clicks the schedule button in the left sidebar

3 The system displays the courses that will be open in this month's calendar

4 The user clicks course want to register

5 The system popup short description of course

6 The user clicks more and register button

7 The system turn to course detail page

8 The user clicks register button

9 The system popup form register

10 The user fills in the input information (Full name, Phone number, Email)

11 The user click register button (E1)

12 The system displays successful registration

Exception Flow E1 The email that users filled in has already existed, return to step 10

Use Case Name Create course for expert

Short description Allows expert create course

Pre-condition(s) The expert is signed in to the system

Post-condition(s) The event is sent to the administrator for approval

1 The expert clicks the schedule button in the left sidebar

3 The expert clicks the create button

4 The user fills in the input information (Title, Description, Link online, Start Date, End Date, Topic)

5.The user clicks the create button (E1)

6 The system notifies of successful event creation

Exception Flow E1 Information is invalid or empty field, return to step 4

Figure 27 Use case manage community

Use Case Name Follow community

Short description Allows user, expert follow community

Post-condition(s) The community is followed

1 The user clicks the community button in the left sidebar

2 The system displays community page

3 The user clicks the follow button on the community the user wants follow

4 The follow button moves to the following button

Use Case Name Unfollow community

Short description Allows user, expert unfollow community

Post-condition(s) The community is unfollowed

3 The user clicks the following button on the community the user wants to unfollow

4 The following button moves to the follow button

Use Case Name View community

Short description Allows user, expert view community

Post-condition(s) The user, expert view community and information of the community

3 The user clicks the community on the community the user wants to view

4 The system displays the community the user wants to view

Use Case Name Check the baby's health

Short description Allows user, expert check the baby’s health

The user, expert view weight chart, height chart and evaluation of baby

1 The user clicks the baby’s health button in the left sidebar.

2 The system displays baby’s health page

3 The user fills information of baby (full name, gender, birthdate, weight, height, tracking date)

4 The user clicks the health check button

5 The system display weight chart, height chart and evaluation of baby

Table 40 UC-14 Use Case ID UC-14

Use Case Name Check the mother's health

Short description Allows user, expert check the mother’s health

Post-condition(s) The user, expert view BMI before pregnancy and is recommended weight increase according to your pre-pregnancy BMI of mother

1 The user clicks the mother’s health button in the left sidebar

2 The system displays mother’s health page

3 The user fills information of baby (full name, height, weight before pregnancy, weight, pregnancy week, tracking date)

4 The user clicks the health check button

5 The system displays BMI before pregnancy and is recommended weight increase according to your pre-pregnancy BMI

Use Case Name Search post/account

Short description Allows user, expert search post/account

Post-condition(s) The user can search based on the content the user enters

2 The system displays input area

3 The user input content you want to find

5 The system displays posts and accounts according to what the user inputs

Use Case Name Sign in for admin

Short description Allow admins to access system features and resources

Pre-condition(s) The admin account has already been created

Post-condition(s) The system will switch to the homepage depending on the user's role and access the user’s features

1 The admin enters information (email, password)

3 The system checks sign-in information (E1)

4 Successfully accessed and redirected to the homepage of admin

Exception Flow E1 Notify “Wrong password or email” (Return to step 1 in Main

Use Case Name Sign out for admin

Short description Allow admins to sign out of the system

Pre-condition(s) The admin has been signed in to the system already

Post-condition(s) The admin signs out of the system successfully

1 The admin clicks the icon in the top right corner of the screen

2 The system displays a drop-down button Log out

3 The admin selects the logout button

4 The system logs the user out of the system

Figure 28 Use case manage report post / comment

Use Case Name Approve report post/ report comment

Short description Describe how to approve report post/ report comment

Post-condition(s) Report post or report comment is approved

Main Flow 1 Click on manage report on the left-side bar on the CMS page

3.1.1 System displays list of report posts

3.1.2 Click on icon on which report the user wants to approve

3.1.3 System displays post detail interface

3.1.4 Click on approve button 3.2 Choose the comments option 3.2.1 System displays a list of report comments 3.2.2 Click on icon on which report comment the user wants to approve

3.2.3 System displays comment detail interface (information of reporter, content comment, reasons) 3.2.4 Click on the approve button

Use Case Name View report posts/ report comments

Short description Describe how to view detail report post or report comment

Post-condition(s) View report post or report comment in detail

Main Flow 1 Click on the manage report on the left-side bar on the

3.1.1 System displays a list of report posts

3.1.2 Click on icon on which report user wants to view in detail

3.1.3 System displays a post detail interface

3.1.4 Click on the show detail user button

3.1.5 System shows user and reasons why it is reported 3.2 Choose the comments option

3.2.1 System displays a list of report comments 3.2.2 Click on icon on which report comment the user wants to view in detail

3.2.3 System displays comment detail interface (information of reporter, content comment, reasons)

Use Case Name Reject report post/ report comment

Short description Describe how to reject report post and report comment

Post-condition(s) Report post or report comment is rejected

1 Click on manage report on the left-side bar on the CMS page

3.1.1 System displays list of report posts

3.1.2 Click on icon on which report the user want to reject

3.1.3 System displays post detail interface

3.1.4 Click on the reject button

3.2 Choose the comments option 3.2.1 System displays a list of report comments

3.2.2 Click on icon on which report comment the user wants to reject

3.2.3 System displays comment detail interface (information of reporter, content comment, reasons)

3.2.4 Click on the reject button

Figure 29 Use case manage category

Use Case Name Create category

Short description Describe how to create category

Post-condition(s) New category is created and display on screen

1 Click on manage category on left-side bar on CMS page

3 Choose the category that you want to create (hospital, hospital role, department, academic degree)

4 System display list item of category which you choose

6 System displays creates new hospital role modal

7 Fill full information to create new category (category name, category description)

8 Click the create button (E1) 9.Create success, this item will be displayed on list of categories

Exception Flow E1 Wrong information, empty field (return step 5.1.2)

Use Case Name Edit category

Short description Describe how to edit category

Post-condition(s) Category is edited successfully

5 Click on the edit button on which category admin wants to edit

6 System displays edit category modal

7 Edit information of category (category name, category description)

9 Edit success, this category will be edited and displayed on the list of categories

Exception Flow E1 Wrong information, empty field (return step 7 in main flow)

Use Case Name Delete category

Short description Describe how to delete category

Post-condition(s) Category is deleted successfully

5 Click on the delete button on which category admin wants to delete

8 This category is deleted successfully and is removed from the list of categories

Figure 30 Use case manage account

Use Case Name Search user and expert account

Short description Allow admins to search user and expert accounts

Pre-condition(s) The admin is signed in to the system

Post-condition(s) The system displays list user or expert accounts

1 The admin clicks the manage account button in the left-side bar

2 The system displays a dropdown menu

3.1 The admin clicks the user option

3.1.1 The system displays manage account user page

3.1.2 The admin has the option to enter search information (full name, email) for search results

3.1.3 The admin clicks the search button

3.1.4 The system searches for accounts according to the input information

3.1.5 The system shows the user a list of people who match the search criteria

3.2 The admin clicks admin button

3.2.1 The system displays manage account admin page

3.2.2 The admin has the option to enter search information (full name, email) and select box options (Hospital, Academic degree) for search results

3.2.3 The admin click search button

3.2.4 The system searches for accounts according to the input information

3.2.5 The system shows the user a list of expert accounts which match the search criteria

Use Case Name View user and expert account

Short description Allow admins to view user and expert

Post-condition(s) The admin view user and expert account

1 The admin clicks manage account button in the left-side bar

3.1 The admin clicks user button

3.1.1 The system displays list user accounts

3.2 The admin clicks expert button

3.2.1 The system displays list expert accounts

Use Case Name Create account for expert

Short description Allows admins to create account for expert

Post-condition(s) The admin create account for expert

1 The admin clicks manage account button in the left-side bar

3 The admin clicks expert button

4 The system displays manage account expert page

5 The admin clicks create button

6 The system popup modal create expert account

7 Fill full account information (username, email, phone number, date of birth, password, select hospital, select academic degree, select department, select hospital role)

8 The admin clicks sign up button

10 The system displays message create successfully

Exception Flow E1 Notification email exists- (Email exists, email has logged in with Google into the previous account) (Return step 7 in main flow)

Figure 31 Use case manage community

Use Case Name Create community

Short description Allows admins to create new community

Post-condition(s) New community is created and display on screen

4 System display information of list community (community image, community name, action)

6 System displays creates new community modal

7 Fill full information to create new community (community name, community description, and community image)

Exception Flow E1 Wrong information or empty field (Return step 7 in main flow)

Use Case Name Edit community

Short description Allows admins to edit community

Post-condition(s) Community is edited successfully and display new information on screen

6 System displays edit community modal

7 Edit information of community (community name, community description, community image)

Use Case Name Delete community

Short description Allows admins to delete community

Post-condition(s) Community is deleted successfully and disappeared on screen

6 System displays pop confirm to ensure that you really want to delete this community

Use Case Name View more community

Short description Allows admins to view community in detail

Post-condition(s) Detail information of community is display on screen

Main Flow 1 Click on manage category on left-side bar on CMS page

6 System displays detail information of that community (community name, community description, list topic)

Use Case Name Create topic

Short description Allows admins to create new topic for community

Post-condition(s) New topic is created and display in list topics of that community

8 System display create new topic modal

9 Fill full information to create new topic (topic name, topic description, and topic image)

Use Case Name Edit topic

Short description Allows admins to edit topic of community

Post-condition(s) Topic is edited successfully

7 Click button on which community that you want to edit

8 System display edit topic modal

9 Fill full information to edit topic (topic name, topic description, and topic image)

Use Case Name Delete topic

Short description Allows admins to delete topic of community

Post-condition(s) Topic is deleted and disappeared from list topics

7 Click button on which community that you want to delete

8 System display pop confirm to ensure that you really want to delete that topic

Use Case Name Moderate courses

Short description Allow admin to moderate courses before posting on the schedule page

Post-condition(s) The admin moderate courses successfully

1 The admin clicks the moderate courses button in the left-sidebar

2 The system displays course that experts have created

3 The admin clicks course for moderation

4 The system display modal for showing some information of course

5.1 Admin clicks the approve button (A1)

5.1.2 Course change color from red to pink

5.2 Admin clicks the reject button (A2)

A1 Admin clicks more button for viewing detail information A1.1 system redirect to course detail page

A1.3 system display success notification and approve

A2 Admin clicks more button for viewing detail information A2.1 system redirect to event detail page

A2.3 systems display success notification and redirect to moderate course page

Use Case Name Moderate posts

Short description Allow admin to moderate posts before posting on the home page

Post-condition(s) The admin moderate posts successfully

1 The admin clicks the moderate posts button in the left-sidebar

2 The system displays posts that experts have posted on the home page without moderation

3 The admin clicks post for moderation

4 The system display modal for showing post detail information 5.1 The admin clicks the approve button

5.2 The admin clicks the reject button

6 The post will be removed from the moderate page

SEQUENCE DIAGRAM

Figure 33 QR Sequence - Sign up

Figure 35 QR Sequence - Sign In

Figure 37 QR Sequence - Create a comment

Figure 39 QR Sequence - Delete comment

Figure 41 QR Sequence - Edit comment

Figure 43 QR Sequence - React comment

Figure 45 QR Sequence - Report comment

Figure 51 QR Sequence - Bookmark post

Figure 53 QR Sequence - Create a post

Figure 55 QR Sequence – Delete post

Figure 57 QR Sequence – Edit post

Figure 59 QR Sequence – React post

Figure 61 QR Sequence – Report post

Figure 63 QR Sequence - Register course

Figure 67 QR Sequence – Manage category

Figure 69 QR Sequence – Create a category

Figure 71 QR Sequence – Delete category

Figure 73 QR Sequence – Edit category

Figure 74 Sequence – Manage report comment

Figure 75 QR Sequence – Manage report comment

Figure 76 Sequence - Search account/post

Figure 77 QR Sequence - Search account/post

Figure 78 Sequence – Manage report posts

Figure 79 QR Sequence – Manage report post

Figure 81 QR Sequence – Approve report

Figure 83 QR Sequence – Reject report

Figure 84 Sequence – Create an expert account

Figure 85 QR Sequence – Create an expert account

Figure 87 QR Sequence – Edit profile

Figure 89 QR Sequence - Moderate post

Figure 91 QR Sequence - Create course

Figure 93 QR Sequence - Forgot password

CLASS DIAGRAM

DATABASE DESIGN

Figure 96 Entity Relationship Diagram (Link)

Table 62 db_social_networking_permission

Index Column Name DataType Meaning Note

1 id bigint The primary key of the permission Primary key

2 name varchar The name of the permission Unique key

4 name_group varchar The group name of the permission

5 permission_code varchar Unique authorization code Unique key

6 description varchar The description of the permission

7 show_menu bit Allow showing on your menu or not

8 created_date datetime Created time

10 modified_date datetime Modified time

Table 63 db_social_networking_group

1 id bigint The primary key of the role Primary key

2 name varchar The name of the role Unique key

3 kind int The kind of the role

4 description varchar The description of the role

5 is_system_role bit Is it a Super Admin Role or not 1 – Yes

Table 64 db_social_networking_permission_group

1 group_id bigint None Foreign key

2 permission_id bigint None Foreign key

Table 65 db_social_networking_category

1 id bigint The primary key of the category Primary key

2 name varchar The name of the category

3 kind int The kind of the category

4 description varchar The description of the category

5 image varchar The image of the category (if any)

6 ordering int Category sort order

7 parent_id bigint Parent category Foreign key

Table 66 db_social_networking_account

1 id bigint The primary key of the account Primary key

2 email varchar The email of the account

3 password varchar The password of the account Hashed for security

4 full_name varchar The full name of the account

5 kind int The kind of the account

6 group_id bigint The role of the account Foreign key

7 avatar_path longtext The avatar of the account

8 is_super_admin bit Is it a super admin account 1 – Yes

9 last_login datetime Time of last login

10 provider varchar Login by provider google

11 provider_id varchar ID from provider

12 attempt_forget_pwd int Number of times the OTP was entered incorrectly

13 attempt_login int Number of times you logged in with an incorrect password

14 reset_pwd_code varchar OTP 6 characters

15 reset_pwd_time datetime OTP code expiration time After 5 minutes

Table 67 db_social_networking_user_profile

1 account_id bigint One to one relationship with account

2 dob varchar Date of birth Unique key

Table 68 db_social_networking_expert_profile

1 account_id bigint One to one relationship with account

2 department_id bigint Department of expert Foreign key

3 hospital_id bigint Hospital where the specialist works Foreign key

4 hospital_role_id bigint Expert's hospital position Foreign key

5 academic_degree_id bigint Expert degrees Foreign key

6 dob datetime Date of birth

Table 69 db_social_networking_post

1 id bigint The primary key of the post Primary key

2 title varchar The title of the post

3 content varchar The content of the post

4 community_id bigint The community of the post Foreign key

5 privacy int Share the post privately

6 account_id bigint The owner id of the post Foreign key

7 moderated_date datetime Admin approval time for posts

Table 70 db_social_networking_comment

1 id bigint The primary key of the comment Primary key

2 content varchar The content of the comment

3 depth int The level of the comment

4 account_id bigint The owner of the comment

5 post_id bigint The post of the comment Foreign key

6 parent_id datetime The parent of the comment

7 created_by datetime Created time

9 modified_by datetime Modified time

Table 71 db_social_networking_bookmark

1 id bigint The primary key of the bookmark Primary key

2 post_id bigint The post of the bookmark Foreign key

3 account_id bigint The account of the bookmark Foreign key

Table 72 db_social_networking_relationship

1 id bigint The primary key of the relationship Primary key

2 account_id bigint ID of the person being followed Foreign key

3 follower_id bigint ID of the person followed Foreign key

Table 73 db_social_networking_post_reaction

1 id bigint The primary key of the post reaction Primary key

2 kind int The kind of reaction

3 account_id bigint The account of the person who reacted Foreign key

4 post_id bigint The post was reacted Foreign key

Table 74 db_social_networking_comment_reaction

1 id bigint The primary key of the comment reaction Primary key

2 kind int The kind of reaction

3 account_id bigint The account of the person who reacted Foreign key

4 comment_id bigint The comment was reacted Foreign key

Table 75 db_social_networking_report

1 id bigint The primary key of the report Primary key

2 content varchar The content of the report

3 kind int The kind of the report

4 object_id bigint The object of the report

5 quantity int The number of people who reported

Table 76 db_social_networking_conversation

1 id bigint The primary key of the conversation Primary key

2 name varchar The name of the conversation

3 kind int The kind of the conversation

4 image varchar The avatar of the conversation

5 last_message varchar The last message of the conversation

Table 77 db_social_networking_message

1 id bigint The primary key of the message Primary key

2 conversation_id bigint The conversation of the message Foreign key

3 sender_id bigint Sender Foreign key

4 content varchar The content of the message

Table 78 db_social_networking_conversation_account

2 conversation_id bigint Foreign key

3 account_id bigint Foreign key

Table 79 db_social_networking_notification

1 id bigint The primary key of the notification Primary key

2 content longtext The content of the notification

3 kind int The kind of the notification

4 id_user bigint The id_user of the notification

5 ref_id varchar The reference id of the notification

7 object_id bigint The object id of the notification

Table 80 db_social_networking_announcement

1 id bigint The primary key of the announcement Primary key

2 notification_id bigint The notification of the announcement Foreign key

3 account_id bigint Receiver Foreign key

Table 81 db_social_networking_community_member

1 id bigint The primary key of the member Primary key

2 kind bigint The kind of the member Foreign key

3 account_id bigint The account id of the member Foreign key

4 community_id bigint The community id Foreign key

Table 82 db_social_networking_post_topic

1 id bigint The primary key of the post topic Primary key

2 post_id bigint The post id Foreign key

3 topic_id bigint The post's assigned topic id Foreign key

Table 83 db_social_networking_course

1 id bigint The primary key of the course Primary key

2 title varchar The title of the course

3 description text The description of the course Hashed for security

4 epxert_id bigint The expert id of the course Foreign key

5 topic_id bigint The topic id of the course Foreign key

6 start_date datetime The start date of the course

7 end_date datetime The end date of the course

8 slots int Number of slots of paid courses

9 fee int The fee of the course

10 join_url text URL to join the course

Table 84 db_social_networking_course_request

1 id bigint The primary key of the request Primary key

2 email varchar The email of the request

3 full_name varchar The name of the request

4 phone varchar The phone of the request

5 course_id bigint The course id of the request

INTERFACE DESIGN

2.5.1.1 Sign In Page – User/Admin/Expert

Figure 97 Sign in page interface Table 85 Details on sign in page

No Name Type Reference Event

Check email validate If invalid email, display warning

If valid email, display icon corrected

Check password must be least 8 characters

If the password is under

If password is least 8 characters, display icon corrected

3 Forgot password p Forgot password page

4 Sign in button Home Page

When click button, request sign in is done, Sign in successfully, redirect Home page

When click select, display Google Login Service modal

6 Create an account div Sign up page Redirect sign up page

Figure 98 Sign up page interface – User

Table 86 Details on sign up page

1 Username input When input have value, display icon corrected

Display the date picker table

Check phone must be 10 number

If phone is under 10 number, display warning

If valid phone, display icon corrected

Check password must be at least 8 characters

If the password is under 8 characters, display a warning

If two passwords do not match, display a warning

If two passwords match, display icon corrected

Figure 99 Find your account modal interface

Figure 100 Verified code modal interface

Figure 101 Reset new password modal interface

Figure 102 Successful notification modal interface

Table 87 Details on forgot password page

2 Submit button Verified code modal

Display modal sent OTP code

Confirm button in verified code modal button Reset password modal

When click button, display reset password modal

Check password must be at least 8 characters

If the password is under

If two passwords do not match, display warning

If two passwords match, display icon corrected

Confirm button in reset password modal button Successful notification modal

When click, display successful notification modal

8 Go to log-in button Sign in page When click, redirect Sign in page

Figure 104 Dropdown menu – Other users’ post

Figure 105 Dropdown menu interface – Users’ post

Figure 107 Modal interface - Share post Table 88 Details on home page of user

When click select, the system turns to the home page

2 New Post button Create the post modal

When click select, display modal for create the post

After clicking the corresponding page button, it will move to that page

4 User information div Profile Page When click select, redirect profile page

5 Icon button When click select, display log out button

- When you click "For you", a list of post for you will display

"Following", a list of post by the person you follow will display

8 Menu Icon button Profile page

- When clicking on the icon menu of the post you created, the dropdown menu interface for the post will be displayed

- When clicking on the icon menu of the post other user created, the drop-down menu interface for the post other user created will be displayed

9 View more button button Profile page

When click select, redirect detailed post page

10 Like div When click select, change icon color

11 Comment div Detailed post page

When click select, redirect detailed post

When click select, display modal share interface

13 Search icon div When click select, display input for search

When click select, display modal notification interface

15 My community div List of communities that users follow

When user wants to unfollow the community, the user clicks button

17 Find more button Community page

When click select, redirect community page

18 Report post div Display report modal

When click select, display report modal

When click select, change mode (Add the bookmark/Remove from bookmark)

When click select, change mode (Follow/Unfollow)

21 Edit post div Edit Post Modal When click select, display edit post modal

When click select, display confirmation to delete, select confirm

When click select, display list of notification

When click select, display list of notification the user unread

When click read all, the interface removes the blue marks

26 Delete all div When click read all, delete all notifications

28 List of social networks to share div When click select, displays shared area

30 Copy link button When click select, link is copied

Figure 108 Community page interface Table 89 Community page

1 More Button Detailed community page

When click select, return to detailed community page

2 Community div Detailed community page

When click select, change mode (Follow/Unfollow) Community

Figure 109 Detailed community page interface Table 90 Detailed community page

When click select, change mode (Follow/Unfollow) Community

2 Post information div Detailed community page

Figure 110 Baby's health page interface Table 91 Baby's health page

1 Full name input Enter full name.

2 Gender select box Click select Boy or Girl

3 Birthday date picker Click select birthday

6 Tracking date date picker Click select tracking date

When click select, display baby health monitoring results

8 Baby health monitoring results div

Figure 111 Mother's health page interface Table 92 Mother's health page

1 Full name input Enter full name.

3 Weight before pregnancy input Enter weight

5 Pregnancy week input Enter pregnancy week

6 Tracking date date picker Click select tracking date

When click select, display baby health monitoring results

8 Mother health monitoring results div

Figure 112 Schedule page interface – User

Figure 113 Modal interface - Short Description course

Figure 114 Detailed course interface - User

When click, display modal short description course

3 More and Register button Detailed course page

When click select, turn to detailed course page

5 Register button When click select, display form register

6 Full name input Enter full name

7 Phone number Input Enter phone number

9 Register button When click select, display notification

Figure 116 Schedule page interface - Expert

Figure 117 Form interface - Create new event

When click, display modal that create new event

2 Information course register div Similar function to schedule for use

4 Description quill editor Enter description

5 Link online input Enter link online

6 Start date date picker Select day

7 End date Date picker Select day

9 Create button Click the create button

Figure 118 Create the post interface

Table 95 Details on create the post to forum interface for user and expert

When click, display select box, Users select the community they want to post to

When click, display select box, Users select the topics they want to post to

When click select, untitled change blue color, click continue, edit title (Not permit enter over 120 characters but permit not enter title)

4 Add image div Add image to quill editor

Enter content, if enter over 250 character and 0 character, publish button disabled

6 Cancel button button Exit modal

When click select successfully, display modal confirmation of publish, click Publish to create post

Figure 119 Report modal interface Table 96 Details on report modal interface

When click select, display icon to appear in select box

When click select, display input reason area, enter reason, if reason empty, confirm button disabled

5 Cancel button button Exit modal

When click select successfully, display success notification modal

Table 97 Details on notification page interface

When click select, display list of notification the user unread

When click select, display list of notification the user read

When click select, display list of notification

4 Mark all as read div

When click select, the notification information removes the blue marks

5 Delete all div When click read all, delete all notifications

When click select, the notification information removes the blue marks, mark post as read

When click delete icon, delete this notification

Figure 121 Message page interface Table 98 Details on message page interface

Enter character, display list user according to character, click person, conversation of this person display

2 Conversation of person div When click, display chat frame to person

Enter message, press enter button, message sent, display message in chat frame

Figure 122 Bookmark page interface Table 99 Details on bookmark page interface

1 Summarize post is bookmarked div Detailed post page

When click, redirect detailed post page

When click, post disappear and remove from bookmark

Figure 124 Edit profile modal interface

Table 100 Details on profile of user page interface

When click, display image folder, click image, display resize image, click save, avatar change

2 Edit profile div Edit profile modal

When click, display edit profile modal

3 Post div When click, display post user to create

4 About div When click, display about user’s information

When click, display modal to edit information, enter information want edit, click save

Figure 125 Other users’ profile page interface Table 101 Details on other users’ profile page interface

1 Message div Message page When click, redirect message page

Figure 126 Detailed post page interface

Figure 127 Detailed post page interface

Figure 129 Dropdown menu interface – users’ comment and other users’ comment

Table 102 Details on detailed post page interface

Display detailed post and function detailed post same post

3 Post interaction div Function detailed post same post

When click icon, icon change color

5 Reply comment list div When click select, show reply comment list

When click icon, display reply comment input

7 Comment input Enter comment, press enter to send comment

8 MMenu icon svg When click select, display dropdown modal

When click icon, display reply comment input

When click, comment to comment input for user edit, enter comment, press enter

11 Delete comment div When click, display delete confirmation, click

12 Report comment div When click select, display report modal

13 Related posts information div Detailed post page

When click select, return to detailed post page

When click button, display user button and expert button

2 User button User page When click button, redirect to user page

3 Expert button Expert page When click button, redirect to expert page

When click button, display hospital, hospital role, department, academic degree, community button

When click button, redirect to hospital page

6 Hospital role button Hospital role page

When click button, redirect to hospital role page

When click button, redirect to department page

8 Academic degree button Academic degree page

When click button, redirect to academic degree page

When click button, redirect to community page

10 Moderate posts button Moderate posts page

When click button, redirect to moderate posts page

When click button, display posts button and comments button

12 Posts button Posts page When click button, redirect to posts page

When click button, redirect to comments page

14 Moderate courses button Moderate courses page

When click button, redirect to moderate courses page

15 Course request button Course request page

When click button, redirect to course request page

Figure 133 Modal log out interface

1 Icon button When click button, open or close sidebar

2 Avatar button When click button, display modal logout

3 Log out button Sign in page When click button, redirect to sign in page

Figure 134 User page interface Table 105 Details on user page interface

3 Search button When click search, display user list

4 Reset button When click select, display all user in list

5 Pagination button Click button, redirect to number page

Figure 136 Create expert account modal interface Table 106 Details on expert page interface

When click, display option, click to choose option

When click search, display expert list according to field entered

6 Reset button When click select, display all expert in list

7 Create account for expert button Click button, display modal create account

When input have value, display icon corrected

Display the date picker table

If phone is under 10 number, display warning

If valid phone, display icon corrected

13 Select academic degree Select box

15 Select hospital role Select box

Check password must be least 8 characters

If password is under 8 characters, display warning

When click button, request sign in is done, create successfully

Figure 138 Create a new hospital modal interface

Figure 139 Edit hospital modal interface

Table 107 Details on hospital page interface

When click button, display create new hospital modal

When click button, display edit new hospital modal

When click button, display confirm notification

4 Category name for create input

5 Category description for create input

6 Confirm create button When click select, display new category

7 Category name for edit input

8 Category description for edit input

9 Confirm edit button When click select, display category edited

Figure 140 Hospital role page interface

Figure 141 Create a new hospital role modal interface

Figure 142 Edit hospital role modal interface Table 108 Details on hospital role page interface

When click button, display create new role hospital modal

When click button, display edit role hospital modal

4 Hospital role name for create input

5 Hospital role description for create input

When click select, display new role hospital role

7 Hospital role name for edit input

8 Hospital role description for edit input

When click select, display hospital role edited

Figure 144 Create a new department modal interface

Figure 145 Edit department modal interface

Table 109 Details on department page interface

When click button, display create new department modal

When click button, display edit new department modal

4 Department name for create input

5 Department description for create input

6 Confirm create button When click select, display new department

7 Department name for edit input

8 Department description for edit input

When click select, display department edited

Figure 146 Academic degree page interface

Figure 147 Create a new academic degree modal interface

Figure 148 Edit academic degree modal interface Table 110 Details on academic degree page interface

When click button, display create new academic degree modal

When click button, display edit new academic degree modal

4 Academic degree name for create input

5 Academic degree description for create input

When click select, display new academic degree

7 Academic degree name for edit input

8 Academic degree description for edit input

When click select, display academic degree edited

Figure 150 Create a new community modal interface

Figure 151 Edit community modal interface

Figure 153 Create a new topic modal interface

Figure 154 Edit topic modal interface

Table 111 Details on community page interface

When click button, display create new community modal

When click button, display edit new community modal

3 More button When click button, display list topics

When click button, display image selection on the compute

6 Community name for create input

7 Community description for create input

8 Confirm create button When click select, display new community

10 Community name for edit input

11 Community description for edit input

When click select, display community edited

When click button, display create new topic modal

When click button, display edit new topic modal

17 Topic name for create input

18 Topic description for create input

SYSTEM IMPLEMENTATION AND TESTING

CONCLUSION AND FUTURE DEVELOPMENT

Tiêu đề	Creating A Social Networking Platform To Assist Parents In Raising Their Children
Tác giả	Bùi Ngọc Ánh, Trần Minh Gia Khánh, Nguyễn Huỳnh Thanh Toàn
Người hướng dẫn	PhD. Mai Anh Thơ
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Project
Năm xuất bản	2024
Thành phố	Ho Chi Minh City

Định dạng
Số trang	234
Dung lượng	11,87 MB