fyp chapter 4

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.


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


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


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


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


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


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.


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.


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.


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.


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.


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.

fyp chapter 4

Documents