fyp chapter 4
Post on 03-Apr-2018
217 Views
Preview:
TRANSCRIPT
-
7/28/2019 FYP Chapter 4
1/13
CHAPTER 4
DESIGN
4.0 INTRODUCTION
This chapter will focus on the design part of the system. System design will be developed
based on user requirements. It is important as the system design will be the guidelines for
the system developer in construction phase which will involve coding and testing
activities. Design is about creating the human interface for the system. It is also involve
organizing and manipulating the database structure. This chapter will show the design of
the webpage, use case, data flow diagram (DFD), data structure diagram and the flow
chart.
4.1 Use case diagram
Figure 4.1 shows the use case diagram for Beauty Tips portal. There will be two types of
users which are the system administrators and users. The website will have 11 functions.
The system administrators have the authority to access all the functions as they will
update and maintain the information portal. The users have access to 4 only such as Log
In, Log Out, Ask recommendation, and view tips.
-
7/28/2019 FYP Chapter 4
2/13
67
Figure 4.1: Use case for Beauty Tips portal
4.2 Flow chart
This part will discuss how the website works using flowcharts. The flowchart is divided
into 2 different users which is Administrator and User.
4.2.1 Administrator
Figure 4.2 shows the flow between the processes for administrator. The administrator will
use own personal computer to post all the beauty tips to the user in the portal, if user
-
7/28/2019 FYP Chapter 4
3/13
68
request tips or tutorial to the admin, admin will decide to updating the portal based on
user requirement and twice a month admin will updating the portal and put all tips and
important tutorial to the portal.
Figure 4.2: flow chat for admin
4.2.2 User
Figure 4.3 shows the flow chart for user in the Beauty Tips portal. The user will log in to
get into chat and they can choose the option in the menu based on their need. User can
choose the view a video tutorial and get the tips from the portal. If the user wants other
-
7/28/2019 FYP Chapter 4
4/13
69
menu they can return back to the home page and choose again what menu they want.
User can log out if they done with the chat and get a beauty tips.
Figure 4.3: Flow chart for user
4.3 Data Structure Diagram
Wikipedia states that Data Structure Diagram (DSD) is a data model used to
describe conceptual data modelsby providing graphical notations which
document entities and theirrelationships, and the constraints that binds them. Figure 4.4
shows the structure of the website when the user opens the website. The structure has 4
levels to open a website based on their need to review a tips and tutorial.
http://en.wikipedia.org/wiki/Data_modelhttp://en.wikipedia.org/wiki/Conceptual_schemahttp://en.wikipedia.org/wiki/Entityhttp://en.wikipedia.org/wiki/Relational_modelhttp://en.wikipedia.org/wiki/Integrity_constraintshttp://en.wikipedia.org/wiki/Integrity_constraintshttp://en.wikipedia.org/wiki/Relational_modelhttp://en.wikipedia.org/wiki/Entityhttp://en.wikipedia.org/wiki/Conceptual_schemahttp://en.wikipedia.org/wiki/Data_model -
7/28/2019 FYP Chapter 4
5/13
70
Figure 4.4: Data Structure Diagram
4.4 Data Flow Diagram
4.4.1 Level-0 Diagram
Figure 4.5 shows the level 0 data flow diagram which shows all the processes involved in
the Beauty Tips portal. User can log in after get verification about their username and
-
7/28/2019 FYP Chapter 4
6/13
71
password to the website and join a community chat. User also can view the tips and ask
the admin to update tips that they wanted. Admin will monitor a website and update and
deleting tips from the website.
Figure 4.5: Data Flow Diagram level 0
4.4.2 Level-1 Diagram
Figure 4.6 Level 1 data flow diagram shows all the processes in details. It shows the sub
processes and procedures taken in each parent process as shown in the level 0 data flow
diagram. Level 1 also shows the sub process of the login process. Firstly all users must
enter the username and password. Then system will check the username and password
-
7/28/2019 FYP Chapter 4
7/13
72
either it is match and valid or not. If the username and password are valid and match, user
then may enter the system. If the username and password are not valid and match, user
may need to enter again the username and password.
Figure 4.6: Level 1 Data flow Diagram
4.5 Screen Design
Figure 4.7 shows the overview of the Beauty Tips portal will look like. The design shows
the main page of the portal when the users open it. Main page of portal shows the most
review video tutorial, hot item of makeup brand for current month, and the most review
-
7/28/2019 FYP Chapter 4
8/13
73
of Beauty tips. For the menu it consist of 6 there are home, beauty tips, video, new trend,
chat, and log in, this entire button that will navigate user through the website without any
difficulty so that user can have best experience while surfing the Beauty Tips Portal.
Figure 4.7: Overview of the Beauty Tips portal
4.5.1 Home Page Screen Design
Figure 4.8 shows the basic design of the home page. Home page in Beauty Tips portal
should be interactive and provide information but still simple so that novice or first time
user able to open a website without any trouble. Every section is separate so that user can
distinguish between tips that they wanted.
-
7/28/2019 FYP Chapter 4
9/13
74
Figure 4.8: Basic Structure of Homepage
4.5.2 Video
Video tutorial will be listed on this tab. The user can view the entire tutorial that
specifically chosen by the admin based on their demand. The list of video will be updated
by admin every two weeks so that user can get updated. Figure 4.9 shows the structure
page of video in the Beauty Tips portal that will be developed in the future.
-
7/28/2019 FYP Chapter 4
10/13
75
Figure 4.9: video tutorial design
4.5.3 Beauty Tips
Figure 4.10 shows the beauty tips page design that been divided into 4 sections. Each
section has different tips for the user. For example, if the user wants to view day makeup
they can click the section that provide a tips. The other section consists of tips for hair,
nail and night makeup for user to review. All the tips can be obtained in this page so that
user no need to open many page that can causes limitation of internet connection.
-
7/28/2019 FYP Chapter 4
11/13
76
Figure 4.10: Beauty tips page
4.5.4 Chat
Figure 4.11 shows the page of chat for user to ask comment about their problem and get
information from the user more experience. The chat page has been divided into 2
sections. First is the chat forum for user to communicate with other user. Second is the list
of online user so that they know who and get know better each other. Chat page also
provide a feedback for the user so that admin know better what user need and dont.
Besides that, user also can ask admin to update data or ask admin directly to give a
solution for their problem.
-
7/28/2019 FYP Chapter 4
12/13
77
Figure 4.11: Chat Page Interface
4.5.5 New Trend
Figure 4.12 shows new trend page that divided to 3 sections. First section will be a flash
graphic that show the latest trending makeup to catch attention user. Second section will
be shows the tips how to get look and tips for user to follow. Lastly, another flash graphic
from celebrity who follow a latest trend, this section is to convince user to try a new
looks.
-
7/28/2019 FYP Chapter 4
13/13
78
Figure 4.12: New trend page screen design
4.6 Conclusion
This chapter has discussed about the design part of the system which will be developed
based on user requirements. The system design is important as it will be use as the
guidelines for the system developer in construction phase which will involve coding and
testing activities. Design is about creating the human interface for the system. It is also
involve organizing and manipulating the database structure.
top related