HTML Document

GROUP ASSIGNMENT
TECHNOLOGY PARK MALAYSIA

CT026-3-1
SYSTEM ANALYSIS AND DESIGN
NP1F1609IT
HAND OUT DATE: 09-APRIL-2017
HAND IN DATE: 25-JUNE-2017
WEIGHTAGE: 50%
INSTRUCTIONS TO CANDIDATES:
1. Submit your assignment to the subject Faculty
2. Students are advised to underpin their answers with the use of references (sites using the
Harvard Name System of Referencing)
3. Late submission will be awarded zero (0) unless Extenuating Circumstances (EC) are
upheld
4. Cases of plagiarism will be penalized
5. The assignment should be bound in an appropriate style (Comb Bound or Stapled)
6. Where the assignment should be submitted in both hardcopy and softcopy, the softcopy
of the written assignment and source code (where appropriate) should be on a CD in an
envelope/ CD cover and attached to the hardcopy.
7. You must obtain 50% overall to pass this module.

Acknowledgment
We wish to express a sincere gratitude and warm appreciation to LBEF collage for assigning
us this task. We are delighted for having enhancement of our knowledge about System
Analysis and Design.
This project report is prepared for partial fulfillment of the requirement for the degree of
BSC.IT in accordance to the rules and regulation prescribed by Asia Pacific University
(APU). We are very grateful to our teacher Mr. Ravi Rauniyar sir for his guidance and
support which help us in completing our assignment.
Lastly, we would like to thank our collage LBEF and our teacher Mr. Mr. Ravi Rauniyar who
helped us with proper guideline in preparation of our assignment.
Yours sincerely,
Shalinee Yadav (NP000094)
Mandip Poudel (NP000083)
Sunni Singh Darlami (NP000096)
I
Table of Contents
Acknowledgment ....................................................................................................................... I
1. Introduction ........................................................................................................................ 1
I. HTML ............................................................................................................................. 1
II. CSS ................................................................................................................................. 2
III. JavaScript .................................................................................................................... 2
IV. PHP.............................................................................................................................. 3
V. Background ..................................................................................................................... 3
VI. Objectives .................................................................................................................... 3
VII. Scopes.......................................................................................................................... 4
VIII. Target Audiences......................................................................................................... 4
IX. Project schedule........................................................................................................... 5
X. Summary of the major sections of website ..................................................................... 6
2. Storyboard and Modeling ................................................................................................... 7
I. Interface Design .............................................................................................................. 7
II. Functional flow Chart ................................................................................................... 19
III. Storyboard ................................................................................................................. 20
IV. Website Architecture ................................................................................................. 32
V. Webpage Descriptions .................................................................................................. 33
Home .................................................................................................................................... 33
About us ............................................................................................................................... 33
Be a change maker ............................................................................................................ 33
Our people ........................................................................................................................ 33
History at a glance ............................................................................................................ 33
Resources ............................................................................................................................. 34
Tools for changes.............................................................................................................. 34
People and stories ............................................................................................................. 34
II
Links ................................................................................................................................. 34
Get Involved ......................................................................................................................... 35
Start with your self ........................................................................................................... 35
Events ............................................................................................................................... 35
Fundraise .......................................................................................................................... 35
Volunteer or Intern ........................................................................................................... 35
Contacts ................................................................................................................................ 36
Design Decisions .................................................................................................................. 36
The reasons for designing .................................................................................................... 36
3. Evolution .......................................................................................................................... 37
4. Future Enhancement ......................................................................................................... 38
Conclusion ............................................................................................................................... 39
References ................................................................................................................................ 40
III
IV
1. Introduction
A website is a collection of web pages or a portal consists of information in the form
of images, text, videos or sounds animations. All the information related to website is
stored on a dedicated server. Dedicated server is a place where the data is stored. In
basic terms, servers are hard disks where the data is stored in digital form. It is a
collection of linked web pages (plus their associated resources) that shares a unique
domain name.
Some types of website are:
Search Engine – Yahoo, Bing, AOL Search, Google, etc.
Question and Answer – Yahoo Answers, Wiki Answers, etc.
Social Networking – Facebook, Google Plus, etc.
School and University – Contain info of your school or college.
Shopping – Help you to shop online with your PC or Mobile
Video Sharing – Share your videos with world. (ladyNinja86, 2016)
I. HTML
HTML stands for Hyper Text Markup Language and was created in 1991 by Tim
Berners-Lee. It is a simple scripting language to create a webpage. Hypertext is
simply a piece of text that works as a link Markup Language is a way of writing
layout information within documents It supports various type of text editor so it is
easy to make webpage in any text editor, since it is not case sensitive so it is easy to
debug and via this webpage can be made and Viewed in any browser. While writing
code in HTML it starts with” < >” start tag and ends with” < /> “end tag. (Wendy
Boswell, 2016)
Our website is designed using notepad++ because it is easy to use and code can easily
be understood. We have used html page as a main page. We have used html page to
link the text & page.
1
II. CSS
A cascading style sheet (CSS) is a Web page derived from multiple sources with a
defined order of precedence where the definitions of any style element conflict. CSS
is especially used for designing page layout. It is used to design for appearance how
page looks. It is used to describe the html codes or element that how it displays on
screen. (Margaret Rouse, 2005)
There are three types of style sheet
1. Internal style sheet.

2. External style sheet.
3. Inline style sheet.
We have used CSS in our website for page designing. In pages we used CSS to
designed text fonts style, color and its size, its background images, etc. we have
basically used external style sheet to link our pages.
III. JavaScript
JavaScript is an interpreted programming or scripting language which is used in

enhancement of web pages. It added some extra features to web site which makes web
site more attractive. In JavaScript, objects can inherit properties directly from each
other, forming the object prototype chain. We have used JavaScript for graphically
change of picture with mouse rollover.
2
IV. PHP
PHP is a programming and scripting language to create dynamic interactive websites.

Word Press is written using PHP as the scripting language. Just like Word Press, PHP
is also an Open Source.
PHP is a server side programming language. When a user requests a web page that
contains PHP code, the code is processed by the PHP module installed on that web
server. The PHP pre-processor then generates HTML output to be displayed on the
user’s browser screen. (Syed Balkhi, n.d.)
We have used PHP in our website for viewing data from contact us to another pages.
V. Background
Charity is an organization which rises to help people who are disable, poor and are in
problems. It is love, kindness towards needy people. Our core practice is listening in
silence to divine inspiration or the inner voice as a source of truth and renewal.
VI. Objectives
Our main objectives to create this website are:
 To give information about charity.
 To make people get involved with charity activities.
 To help the users to sponsor their money in write place.
 To give information about how to help needy people by giving donation to
them.
 To show the charity events and their date.
 To share our fundraising goal with common people.
 Suggest fundraising idea and advise people to donate their money.
3
VII. Scopes
Our website scopes are:
 Our main scope is to provide efficient charity report to users.

 To provide information to the people who wants to donate their money.
 To provide support to someone who wants to help in donating.
 To provide help to fundraising company.
VIII. Target Audiences
Our website is about charity which is non-profitable organization. Our website’s main target
to those people who wants to express their love, kindness and help to the poor, disable and
needy people. We target to those people who are donating but not in right way. We don’t see
the common people as our target but we target to the people who have some special interest
and really believes in fundraising. Our target is big business Company, business which can
support us in providing goods etc.
4
IX. Project schedule
S.N. Task Application in Use Length
1 Requirement Gathering MS word 5 days
2 Analysis 4 days
3 Planning MS word 5 days
4 Designing layout Balsamic Mockups 4 days
5 Coding the program Notepad++ 20 days
8 Testing and Analysis Mozilla Firefox /Google 12 days

chrome/internet explorer
7 Completion of the Whole 10 days

Project
Total days 60 days
5
X. Summary of the major sections of website
Our website basically includes different pages like Home, About us, Resources, Get
involved, Blog and Contacts. Our website pages are created in Notepad++. It components are
done in HTML, CSS, Java Script and PHP. It is for charity for fund raising.
Home page gives information about the charity and about us pages shows the information
about the organization, get involved pages include the ideas to get involved in fundraising
task, resources page include the resources of charity and contacts page show the information
to contact with charity.
Our website have sub menu in about us i.e. Be a change maker, Our people, History at a
glance. Resources also has sub menu i.e. Tools for change, People and stories and links. And
get involved has also sub menu i.e. Starts with yourself, Events, Fundraise and Volunteer or
intern.
6
2. Storyboard and Modeling
I. Interface Design
Fig 1: Home Page
7
Fig 2: About us
8
Fig 3: Be a Change maker
9
Fig 4: Our People
10
Fig 5: History at Glance
11
Fig 6: Resources
12
Fig 7: Tools for Change
13
Fig 8: Peoples and Stories
14
Fig 9: Get involved
15
Fig 10: Start with yourself
16
Fig 11: Event
17
Fig 12: Fundraise
18
II. Functional flow Chart
Home
About us Resources Get involved Blog Contacts
Be a change maker Tools for change Start with yourself
Our people People and stories Event
History at a glance Links Fundraise
Volunteer or Intern
Fig13: Functional flow chart
The above fig shows the functional flow chart of web site, its shows the flow of function
about how our website works. Home page is the main page of website and about us,
resources, get involved, blog, contacts are the subpages which are linked form main page.
19
III. Storyboard
Project Title: Group7 Charity
Date: 07 April 2017
Screen: 1 of 14 (Home Page) Screen Descriptions:
Links from screens: Home, About us, Logo: Developed using Photoshop.
Navigation: Developed using Notepad++.
Resource, Get involved, Blog and Contacts.
Image: Pictures of related.
Link to screen: Home, About us, Content: Description and information of
the related material using different font-
Resource, Get involved and Contacts style and sizes.
Footer: Designed in Notepad++
Functionality/Interactivity
Home Page is the main webpage of the website. It has different page links. It will open the
requested page on click.
Home Pages give detailed description about G7 charity. It opens linked page after a click.
Logo Navigation Bar
Slider
Contents
Footer
Background: white Audio: N/A
Color Scheme: green, white Video: N/A
Text Attributes: Arial Stills: N/A
20
Date: 07 April 2017
Screen: 2 of 14 (About us) Screen Descriptions:
Resource, Get involved and Contacts.
About us page gives information about G7 Charity
Logo Navigation Bar
Contents
Footer
21
Date: 07 April 2017
Screen: 3 of 14 (Be a change maker) Screen Descriptions:
This page gives information about be a change maker
Logo Navigation Bar
Content
Contents Image
Footer
22
Date: 07 April 2017
Screen: 4 of 14 (Our people) Screen Descriptions:
It gives description about our people
Logo Navigation Bar
Contents
Footer
23
Date: 07 April 2017
Screen: 5 of 14 (History at a glance) Screen Descriptions:
This page gives description about the history of G7 Charity.
Logo Navigation Bar
Slider
Contents
Contents Image
Footer
24
Date: 07 April 2017
Screen: 6 of 14 (Tools for change) Screen Descriptions:
This pages shows the information about how to starts with yourself.
25
Logo Navigation Bar
Content
Contents Image
Content
Contents Image
Contents
Contents Image
Footer
26
Date: 07 April 2017
Screen: 6 of 14 (People and stories) Screen Descriptions:
This pages shows the information about people and stories.
Logo Navigation Bar
Videos
Contents
Footer
Color Scheme: green, white Video: included Videos
27
Date: 07 April 2017
Screen: 6 of 14 (start with your self) Screen Descriptions:
This pages shows the information about how to starts donating with yourself
Logo Navigation Bar
Contents
Footer
28
Date: 07 April 2017
Screen: 6 of 14 (Events) Screen Descriptions:
This page shows the information about the events.
Logo Navigation Bar
Contents
Footer
29
Date: 07 April 2017
Screen: 6 of 14 ( Fundraise ) Screen Descriptions:
Functionality/Interactivity Footer: Designed in Notepad++
This pages shows the information about fundraising events
Logo Navigation Bar
Contents
Footer
30
Date: 07 April 2017
Screen: 6 of 14 (Volunteer or Intern) Screen Descriptions:
This page shows about volunteer or intern.
Logo Navigation Bar
Contents
Footer
31
IV. Website Architecture
About us Be a change maker
Our people
Resources
History at glance
Tools for change

Home Get involved
Start with yourself
People and stories
Blog Event
Links
Fundraise
Contacts
Volunteer or Intern
Fig14: Website Architecture
The above fig shows the website architecture of website. It shows the outer architecture or design of
website how it actually looks from outside.
32
V. Webpage Descriptions
It is Non-profitable type of website. This makes an ideal solution to non-profitable

organization. It contains different menu i.e. home, about us, resources, get involved blog and
contacts. About us, resources and get involved have sub menu. About us has sub menu i.e. Be
a change maker, our people and History at a glance. Similarly, resources and get involved has
sub menu i.e. tools for change people and stories and link and start with yourself, event,
fundraise a volunteer or intern respectively.
Home
Home page is the main pages of website which include the entire menu button from were all
other sub menu button is linked. This page includes slider images of organization, contents
related to organization works, images of different task done and history of organization from
its origin to till now.
About us
This page includes the detail information about the organization. It includes mission, vision
and values of organization and also includes latest news about the organization. The services
are also included. About us has three sub menu i.e. are Be a change maker, our people and
history at a glance.
Be a change maker
This page tells about how to encourage anyone to became change and motivate people to
bring the change. This page includes different contents.
Our people
These pages include the task done by peoples of organizations and include all the names of
all people who have donated to the organization. It also includes board of trustees.
History at a glance
This page is also sub menu of about us which includes all the history of organization from its
origin to till now.
33
Resources
This pages shows about the resources related to organization like task, pages related to
different performance. It has three sub menu i.e. Tools for changes, people and stories and
links.
Tools for changes

It includes the different tools required for changes. We have includes in webpages like look
in mirror for personal changes, be honest to every one, act on what you find out, keep
yourself in silence. This pages includes contents related to motivation.
People and stories

It includes the contents related to the people and their stories.it means the name of all the
peoples and how they are interested to get involved in our task, why they have involved in
our task and what are the success do they get.
Links
It shows the links between the organization and company. This page includes different
components related to organization with whom they have worked.
34
Get Involved
In the context of this website get involved means start getting involved in charity fund raising
programs. It includes the contents related to involving in donation. Whenever you are ready
you can raise a fund to organization. It includes the steps to get involved and became a
member of organization. This menu has further four sub menu i.e. is start with yourself,
events, fundraise and volunteer or interns.
Start with your self

In our website starts with your self contains the contents related to how to get involved in
fundraising programs. This page told that don’t depend on others for donation, start with
yourself and give first priority to your thinking.
Events
This page shows the event of organization related to different program conducted while
fundraising. It includes camping events and many more events related to organization.
Fundraise
This page of website is linked page of get involved where it shows the activities related to
fund raising events. And shows the idea and inspire people to raise fund.
Volunteer or Intern
This page shows the information about the people who were worked as volunteer with
organization in its events and program conducted by them. Its show the pictures of volunteer
people in different events. It also gives information about how to get involved in task, event
and program organized by organization and interested parties can also work as intern.
35
Contacts
Contacts page shows some of the basic contact information to contact with organization.
They can also contact with their email id and can live their message and can provide
suggestions.
Design Decisions
We have design the functional flow chart and website architecture in MS Visio. It gives the
website over view and declares total no of page links with each pages. Functional flow charts
shows the basic flow of the website and website architecture shows the outer architecture of
website. Story board is design in MS Word by using different shapes which shows the page
design. It shows the page contents, images, logo, navigation bar in arranged form which helps
to understand the function of website.
The reasons for designing
Some of the reasons are:
 It helps the user to under stand website functional flow.

 It helps user to understand the website architecture.
 User can easily understand the interface design.
 It helps user to understand website design.
36
3. Evolution
The website is related to social and charity which gives information about charity works and
how it affects the society. It is for society development and inspires, encourage people to help
disable and poor people.
Our aim is to provide clear information about G7 charity and its work. It gives information to
social worker who actually wants to help needy people. Our website motivates to work with
G7 charity organization. It also gives training and give chance to work as intern.
We have developed our website in Notepad++. We have design website’s main page from
HTML, CSS is used for designing page layout, java script for animation of pages and slider
and PHP for making contact form.
This is first time we have made website in HTML while doing coding in HTML we have
faced some technical problems like run time error, error in coding, error in page linking with
CSS, java script and Jquery slider. At first while we are using Jquery slider we can not place
images in write position, some times images are not displays on exact place. To over come
these problems we have concerned to our subject teacher. He helps us in solving our
problems and finally we are able to complete our website.
37
4. Future Enhancement
Problems we faced
This is first time we have made website in HTML while doing coding in HTML we have
faced some technical problems like run time error, error in coding, error in page linking with
CSS, java script and Jquery slider. At first while we are using Jquery slider we can not place
images in write position, some times images are not displays on exact place. To over come
these problems we have concerned to our subject teacher. He helps us in solving our
problems and finally we are able to complete our website.
For future modification
The current website is not dynamic and it does include direct donating system. To make it
more users friendly we can add some features like
 We can add direct donation system.

 We can also include direct payment for donation.
38
Conclusion
Finally we come to conclude that the G7 Charity is non-profitable organization and its
website give information about the social worker and their involvement towards the society.
This website gives information about the charity and helps to make people involved in
fundraising task. This website main focus is to aware the people that not to waste their money
in spending luxurious life. And try to help poor and disable people to make them happy.
Every pages of website gives information related to charity and advise people to help poor
people and suggest fundraising ideas to everyone.
39
References
ladyNinja86, 2016. www.developer.mozilla.org. [Online]
Available at: https://developer.mozilla.org/en-US/docs/learn/common questions/Pages site
servers and search engines
[Accessed 27 july 2017].
Margaret Rouse, 2005. searchmicroservices.techtarget.com. [Online]

Available at: http://searchmicroservices.techtarget.com/definition/cascading-style-sheet-CSS
Syed Balkhi, n.d. www.wpbeginner.com. [Online]

Available at: http://www.wpbeginner.com/glossary/php/
[Accessed friday july 2017].
Wendy Boswell, 2016. www.lifewire.com. [Online]

Available at: https://www.lifewire.com/what-is-html-3482374
40

HTML Document

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Document

Diunggah oleh

Hak Cipta:

Format Tersedia

GROUP ASSIGNMENT

TECHNOLOGY PARK MALAYSIA

1. Submit your assignment to the subject Faculty

Harvard Name System of Referencing)

4. Cases of plagiarism will be penalized

5. The assignment should be bound in an appropriate style (Comb Bound or Stapled)

of the written assignment and source code (where appropriate) should be on a CD in an

envelope/ CD cover and attached to the hardcopy.

7. You must obtain 50% overall to pass this module.

Shalinee Yadav (NP000094)

Mandip Poudel (NP000083)

Sunni Singh Darlami (NP000096)

II. CSS ................................................................................................................................. 2

III. JavaScript .................................................................................................................... 2

VI. Objectives .................................................................................................................... 3

VIII. Target Audiences......................................................................................................... 4

IX. Project schedule........................................................................................................... 5

X. Summary of the major sections of website ..................................................................... 6

2. Storyboard and Modeling ................................................................................................... 7

I. Interface Design .............................................................................................................. 7

II. Functional flow Chart ................................................................................................... 19

III. Storyboard ................................................................................................................. 20

IV. Website Architecture ................................................................................................. 32

V. Webpage Descriptions .................................................................................................. 33

Be a change maker ............................................................................................................ 33

Our people ........................................................................................................................ 33

History at a glance ............................................................................................................ 33

Tools for changes.............................................................................................................. 34

People and stories ............................................................................................................. 34

Get Involved ......................................................................................................................... 35

Start with your self ........................................................................................................... 35

Volunteer or Intern ........................................................................................................... 35

Design Decisions .................................................................................................................. 36

The reasons for designing .................................................................................................... 36

4. Future Enhancement ......................................................................................................... 38

Some types of website are:

Search Engine – Yahoo, Bing, AOL Search, Google, etc.

Question and Answer – Yahoo Answers, Wiki Answers, etc.

Social Networking – Facebook, Google Plus, etc.

School and University – Contain info of your school or college.

Shopping – Help you to shop online with your PC or Mobile

Video Sharing – Share your videos with world. (ladyNinja86, 2016)

There are three types of style sheet

1. Internal style sheet.

JavaScript is an interpreted programming or scripting language which is used in

PHP is a programming and scripting language to create dynamic interactive websites.

Our main objectives to create this website are:

 To give information about charity.

 To make people get involved with charity activities.

 To help the users to sponsor their money in write place.

 To give information about how to help needy people by giving donation to

 To show the charity events and their date.

 To share our fundraising goal with common people.

 Suggest fundraising idea and advise people to donate their money.

Our website scopes are:

 Our main scope is to provide efficient charity report to users.

VIII. Target Audiences

S.N. Task Application in Use Length

1 Requirement Gathering MS word 5 days

3 Planning MS word 5 days

4 Designing layout Balsamic Mockups 4 days

5 Coding the program Notepad++ 20 days

8 Testing and Analysis Mozilla Firefox /Google 12 days

7 Completion of the Whole 10 days