JAMIYYAH BT MD NOOR



                   NOV 2006


                           JAMIYYAH BT MD NOOR

                          EXECUTIVE SUMMARY

Most of the web based apphcation nowadays is more focused on students rather than
lecturers. We need tools that can help lecturers to generates electronics notes easier
and be able to organize and modify it later. The main objective of this project is to
come out with web based of mind map for user especially students and teacher. The
web based of mind map must be developing dynamically and expressive notes easily
and efficiently.

Writing notes using Php involve entering, editing, deleting and displaying the notes.
It is an exploration of how to use Php for developing and manipulating notes. In fact,
fi-om the beginning, a lot of effort is used to find out how the notes should generate
in mind map. This project only tries to entering, displaying, editing and deleting the

These project benefits users by providing a new learning environment and it can be
access anytime and anywhere.

                            COPYRIGHT © UiTM

Herein is being admitted that this report together with all the words, fects and relevant

printed materials are fully under my own, except several facts findings that each of

their sources have been clarified.

2°'* November, 2006                                    JAMIYYAH BT MD NOOR



                              COPYRIGHT © UiTM

In the name of ALLAH, who is the Most Gracious, Most Merciful and He alone is

worthy of all praise. Praise to Allah the Mighty for showering me a good experience

throughout this project paper and for all that has bestowed on me. It is with His

ascendancy the project paper completed.

First and foremost, I would like to address my deepest appreciation and sincere

thanks to my dedicated supervisor, Mr. Ali Bin Seman, for all his guidance, valuable

suggestion, comments, advice, support and concern throu^out the completion of this

project. His guidance and wise supervision has benefited me greatly.

Finally, to all my fiiends and lecturers who helped me along the way, due to complete

this project, I wish them success and thank you for everything. Last but not least, I

also would like to say my heartiest appreciation to my lovely family for everything.

To all mentioned here, might Allah bless you all.

Thank you.


                             COPYRIGHT © UiTM

FIGURE                                                    PAGE

3.1    Entity Relationship Diagram                        19
3.2    Data Flow Diagram                                  20
4.1    Welcome Note                                       24
4.2    Earth Image With Slogan "Web Based Of Mind Map".   24
4.3    Index                                              25
4.4    Searching                                          26
4.5    Search Existing Word                               27
4.6    Detail Info                                        28
4.7    Search Not Existing Word                           29
4.8    Info Menu                                          30
4.9    About                                              31
4.10   Note Menu                                          32
4.11   Submenu                                            34
4.12   Add Notes                                          35
4.13   Choose the Note                                    36
4.14   Edit Note                                          37
4.15   Enter the Note To Delete                           38
4.16   Delete Note                                        39
4.17   List Subject                                       40
4.18   Picture That Has Been Selected                     41
4.19   Glossary Index                                     42
4.20   Example A's Vocabulary                             43
4.21   Add Vocabulary                                     44
4.22   View Add Vocabulary                                45
4.23   Chat                             fodex             46
4.24   Chat Room                                          47
4.25   Voting Index                                       48
4.26   Voting Result                                      49


                              COPYRIGHT © UiTM

Php            Extensible Markup Language
HTML           Hyper Text Maikup Language
WWW            World Wide Web
MySQL          Stracture Query Language
SDLC           System Development Life cycle

          COPYRIGHT © UiTM

Nowadays, there are so many sources in education, business and commerce that can

get from the changing fast to adopt the computer and Internet technolo©^ in what are

referred to e-leaming, e-business and e-commerce respectively. The web based is one

of the application provides learning convenience complete with audio and graphics.

Most of the web based nowadays is more focused on students rather than lecturers to

help them increase their ability to study, hi this project, a web based has been

developed to provide notes to develop mind map. Using Php can provide more

dynamic web based.


                            COPYRIGHT © UiTM

DECLARATION                                                             ii

ACKNOWLEDGEMENTS                                                        iii

LIST OF FIGURES                                                         vii

LIST OF ABBREVIATIONS                                                   ix

ABSTRACT                                                                x


1.1        Background of the Problem                                    1

1.2        Problem Description                                          2

1.3        Aim Of The Research                                          2

1.4        Project Objective                                            3

1.5        Project Scope                                                3

1.6        Significant Of the Research                                  3

1.7        Hardware And Software Requirement                            4

1.8        Overview Of the Research                                     5


2.1        Detailed Description Of The Problem                          6

2.2        Definition of Pertinent Technical Terminology                7

2.3        Creating Dynamic Web Pages                                   9

           2.3.1 Definition Of Dynamic Web Pages                        9

2.4        Different Methodologies/Approach to solve The Same Problem   10

           2.4.1 Mind Map Vs Concept Map                                10


                           COPYRIGHT © UiTM
2.4.2 Web-Based Learning for Network and Management               11

      2.5   Brief description of all similar and relevant on-going projects   12
            2.5.1 Project                                                     12
            2.5.2    Software                                                 13

3.0         METHODOLOGY

3.1         Introduction                                                      16

3.2         Research Framework and Methodology                                17

3.3         Description for Phases in Developing Web Based of Mind Map        18

            3.3.1 Planning                                                    18

            3.3.2 Analysis                                                    18

            3.3.3 Design                                                      19

            Obtain Project Goal and Objectives               21

            Create Project Goal Online                       21

            Identify or design Course Material               21

            3.3.4 Implementation                                              22

            3.3.5 Testing                                                     22


4.1         Introduction                                                      23

4.2         Design                                                            23

            4.2.1 Flash for Index                                             24

            4.2.2 Index                                                       25

            4.2.3 Searching Menu                                              26

                           COPYRIGHT © UiTM
4.2.4 Info Menu                        30

         4.2.5 About Menu                       31

         4.2.6 Forum Menu                       32

         4.2.7 Note Menu                        32

       Submenu for Note Menu   33

         4.2.8 Tutorial Menu                    39

         4.2.9 Picture Menu                     40

         4.2.10 Glossary Menu                   42

         4.2.11 Chat Menu                       46

         4.2.12 Voting Menu                     48

4.3      Constrain and Discussion               50


5.1      Benefits of the Project                51

5.2      Future Work                            52

5.3      Recommendation                         52

BIBLIOGRAPHY                                    53



                        COPYRIGHT © UiTM


1.1    Background of the problem

Learning skill is very important to make sure students can catch up all the essential point
or information during the lecture. Sometimes, teachers have developing their notes to
prepare for their teaches. The notes are textual and with little interactivity and
dynamicity because of the manual nature. Nowadays, mind map is not new in daily life
and learning environment. Instead of reading passive reference book, students can learn
in an interactive way using web based of mind mapping that is believed will further
enhance and motivate learning.

Mind map is a way of organizing information. Mind maps were developed in the late
60s by Tony Buzan as a way of helping students make notes that used only key words
and images. They are much quicker to make because of their visual quality much easier
to remember and review.

In order to motivate and assist students to build a good understanding on their learning
process, this research will develop a web based of mind mapping in learning application.
Using mind maps in planning an instruction on a specific topic helps to "conceptually
transparent" to students. Many students have difficulty identifying and blur to be
memorized in their certain subject. Therefore, by implement mind maps in this web,
student can become successful in making sense out of control over the subject matter.

                               COPYRIGHT © UiTM
1.2    Problem Description

Actually, students usually feel bored using applications where it is not attractive and
does not refer to any of the user's interest. The method or tools provided in the market
nowadays usually uses static notes without study the user's behaviors. Other than that,
students also not interested to learn certain subject such as history subject and so on and
lecture content is heavy and well-organized. It can be a burden for teacher to teach and
disturb for students concentration.

Generally, the mind map has several characteristics such as simple, reliable and minimal
resources usage. However, mind map use traditional also has the disadvantages such as
energy and time wasted writing down superfluous words, other information may be
missed while noting down one idea, take longer to read and review, associations and
connections between key words and ideas not readily apparent, attention wanders easily,
lack of color and other visual qualities and traditional notes aid forgetting not memory.

This web based of mind map is one of the methods or tools that developed to find the
new technique to generate the information faster. However, the researcher still maintains
the concept of mind map. The researcher focusing on how to find the technique and
what is the certain features to enhance. The advantages of mind map in web based for
learning pinpose is reduce those tons of work, feel good about study, revision and exams
also have confidence in learning abilities.

1.3    Aim Of The Research

To develop the web based of mind mapping and to identify the technique to generate the
mind map.

                               COPYRIGHT © UiTM
1.4     Project Objective

Many of the current mind mappings are static. They rarely include interactive image or
notes. By using static notes it cannot attract student's attention and can make student feel
bore to learn. The researcher has found several objectives of this project such as:
 i. Automate the mind map concept,
 ii. Find the technique to generate information in mind map.
 iii. View the mind map in the graphical,
iv. Design the mind map more interactive.

1.5    Project Scope

This project consists of note in certain subject for SPM students. It is also to enhance the
certain features focus to process of simply change the format of the mind map such as
change color, font and size. Beside that, user also can add, edit and delete the data.

1.6    Significant Of The Research

This project is very important in order to develop the efficient and effective web based
learning. Through this web based, it can give benefits to both of students and teachers.
This web can generate the mind map by the input that entered by users. All the
information and facts are according to the SPM level. This web offered for user to add,
edit, delete and search the information they are wants.

                                COPYRIGHT © UiTM
1.7   Hardware and Software Requirement
      •   Personal Computer
      •   Keyboard
      •   Mouse
      •   Monitor
      •   Scanner

          Php Programming
          MySQL Database - develop database
          Apache Server
          Macromedia Dreamweaver MX 2004
          Macromedia Flash MX
          Adobe Photoshop

                              COPYRIGHT © UiTM
1.8 Overview of the research

The report contain 6 chapter in order to explain every phase that have been done through
out this research project. Below is the general review of each chapter:

Chapter 1: Introduction
This chapter explains the background of the problem, problem description, the aim of
the research, project objective, project scope and significant of the project.

Chapter 2: Literature Review
This chapter includes detailed description of the problem, definition of pertinent
technical terminology, different methodology/ approach to solve the same problem and
brief description of all known similar and relevant on-going projects.

Chapters: Methodology
This chapter contains the phase or method to complete the project. Every method have
been discussed here.

Chapter 4: Design and Development
This chapter shows the outcomes that have been made. It is covered the design phase
like interface design for each menu, the flow of the project and the findings and

Chapter 5: Conclusion and Recommendation
This chapter concludes the overall project and recommends some steps to enhance the
web based of mind mapping.

                                COPYRIGHT © UiTM

                        LITERATURE REVIEW

2.1 Detailed Description of the Problem

Today's learning style is more effective when the element of information technology
was added into it. The use of computer technology in delivering the teaching method
to the students is a good approach to utilize the most talked technology. "Educational
technology definitely has a positive impact on teaching and learning."
(Oblinger& Rush, 1998).

The web based of mind mapping is one of the learning techniques to achieve a
positive impact to students on teaching and learning. However, there is no
completing web based of mind mapping for SPM's student. It is shows that the
concept web based of mind mapping is an amazing step in learning. The important is
to know the advantage of web based of mind mapping.

There are several benefits of the web based of mind mapping such as can encourage
student to study and attract their attention in learn something new. Through web base
of mind mapping, it can provide the opportunity to generate more skill person and
increase the numbers of student on using information technology on learning
process. Another benefit is can increase the ability for sharing information among
students and encourage them to make discussion for each note that be given for each
subject. In addition, web based of mind mapping would make the learning process
much easier since the web provided a lot of colorful images and hypertext links to
different sections of the information. The web based of mind mapping allows us to
overcome the limits of time. The time independent nature of web materials allows
anyone to have access to materials whenever they are needed and from anywhere.

                          COPYRIGHT © UiTM
The web-based of mind mapping would train the students to become self-starters and
problem solvers. Other than that, it also provides a high level of confidence in
students' ability on learning.

   2.2 Definition of Pertinent Technical Terminology

   Interface Design: Design and built the interfaces by using Macromedia
   Dreamweaver MX, HTML and php.

   Macromedia Dreamweaver MX 2004: It is programs that enables people to
   build and creates Web pages include interactive text, images and background.
   Dreamweaver also provides environment in which to organize Web pages and
   link them together.

   Script: For programming, my project will be used php script.

   Database: Database that will be used is Mysql. All the knowledge and
   information will store in the database and can retrieve dynamically. Database
   must have major security services such as authentication, authorization,
   confidentiality, integrity and accountability.

   Web server: Is an Internet-connected computer that makes Web documents
   available to Web browsers. It is a program which host a web site and managing
   the user that accessing it. The web server requires a good hardware in order to
   perform better. There are many web servers currently in the market such as
   Microsoft's Internet Information Server (IIS), O'Reilly's Web Server and
   Apache Web Server. For this project, we use Apache to run MySQL and php.

   Web browser: It is a program that downloads Web documents from the Internet,
   interprets their HTML and then displays the Web pages text and any associated

                            COPYRIGHT © UiTM
images as a Web page. A good browser can make user job easier when browsing
Internet. There are many browsers currently being used worldwide and very
popular such as Microsoft Internet Explore, Netscape Navigator and Opera.

Web Based: Web based applications are also a form of dynamic content. A Web
based application could be a news portal, driver's license renewal application or
any other application that runs through the Web browser. Web based application
are generally HTML based or Plug-in based.

Interactive Learning: Interactive learning is learning through various media
such as video, sound, graphics, animation and text. These media are structured in
such a way that the audience has control over their presentation. (Asirvatham,

Macromedia Flash MX: It is a versatile multimedia-authoring program. Flash
offers easy to use drawing tools as well as top of the line animation features. This
project have been created a header and footer also background by using
Macromedia Flash MX and it will be run in Macromedia Flash Player. A Web-
based application is usually a website component, meaning that users must
navigate from a traditional, information-oriented Web page to the Flash
application's fimctionality-oriented tool.

Web site: It is a collection of linked Web pages stored on a Web server.

                        COPYRIGHT © UiTM
2 J Creating Dynamic Web Pages

2.3.1 Definition of Dynamic Web Pages

Making dynamic web pages is by adding applications, specifically open source
orfi-eesolutions even for proprietary technology.

Application is do not mean desktop application like Microsoft Word or others
but it specifically as anything that performs a task that allows a user to interact to
others through website.

The simple example of dynamic web pages is guestbook which is no workflow
with Single HTML Form/Request and Form Processor/Web Responder.

                          COPYRIGHT © UiTM
2.4 Different methodologies / approach to solve the same problem

2.4,1 Mind Mapping Vs Concept Map

A mind map consists of a central word or concept; around the central word have
the 5 to 10 main ideas that relate to that word. Then, take each of those child
words and again draw the 5 to 10 main ideas that relate to each of those words.
In this way a large number of related ideas can quickly be produced with
virtually no mental effort. The concept of 'writers block' is hard to understand
once you have grasped the use of this simple technique!

However there are concept mapping can be contrasted with the similar idea of
Mind mapping®. The latter is restricted to radial hierarchies and tree structures,
whereas concept maps allow for a greater range of connections between concepts
and promote meaningful learning and communication through the specific
labeling of interrelationships between concepts and the inclusive character of
these relations. A well made concept map broadens within a context frame
defined by a focus question and a root (most comprehensive) concept, while a
mind map® has branches sticking out from a central picture.

Figure 2.3.1: Concept Map

                             Source : Wikipedia, the free encyclopedia. IHMC CmapTools


                       COPYRIGHT © UiTM
2.4.2 Web - Based Learning For Network Design And Management

This project was done by Nuraishah Binti M. Nordin (2003). This project
provided distance learner access to self-learning module and make a proper
design template interface of the interactive learning contents that can be used in
many subject areas. In this project, I managed to focus on Faculty of Information
Technology and Quantitative Science (FTMSK). Methodology used for this
project is SDLC (Software Development Life Cycle).


                       COPYRIGHT © UiTM
2.5 Brief description of all known similar and relevant on-going projects

2.5.1 Project

    Multimedia Learning System (Multimedia University)

   The Multimedia Learning System (MMLS) is a web-based intelligent courseware
   delivery engine. This system was developed with the concept of a "virtual
   teacher''. The MMLS system is able to "teach" the students rather then just
   deliver the materials. The progress of the learner is constantly monitored and this
   information are captured and uploaded to a server. The system was fully
   developed by the Centre for Multimedia Education Development, Multimedia
   University (MMU) using Perl, Java Scripts and other tools. Many new features
   have been created in the MMLS system. Two of these features are the first of its
   kind in teaching and learning environment.

   Interactive & Animated Web-based Course Development (Data
   Communication & Networking)

   This project was done by Mohd Faisal Ibrahim. It was about the development of
   an interactive and animated web-based course that addressing the need for
   analyzing, designing and implementing a non-traditional, technology-intensive,
   web-based educational learning. This study focus on the web based course that
   provides the student with the interactive learning environment. This project
   developed and tested a set of procedures for designing, implementing and
   evaluating a university-level course that uses the personal computer and the web
   technology to provide the student with flexibility in time and place of learning.
   Methodology used for this project is ISD (Instructional System Design).


                          COPYRIGHT © UiTM
2.5.2 Software

   The Bosley Group MindMapper

   MindMapper mind map software help files, found within the program, explain
   how to read and write variousfilesas well as mind mapfilesusing MindMapper.
   Using the mind mapping computer software you will find the way to create and
   read a new file, or how to switch between mind map and text files. MindNfepper
   mind map software utilization presents helpful examples for utilizing
   MindMapper to fit user needs.

   Visual Mind

   Visual Mind is a tool for "Visual Thinking" and inspired by mind mapping. It
   uses in almost everything such as brainstorming in problem solving and creative
   thinking. Secondly, use in note taking to study, reports, summaries and meet
   references. Next, use in planning, presentations and organization. Visual mind
   also have their own features like web hyperlinks, file links, folder links, e-mail
   links, e-mail addresses, phone numbers, images, shapes, internet publishing, e-
   mail distribution and others.

   Mind Mapper 4.5

   A mind map can be used either for note taking, or for note making. It replaces
   the inefficient method of linear note-taking with a method based on the
   understanding of how the brain works best. For note making it opens up the
   creative processes and provides a 'gestalt' of the whole subject which cannot
   easily be obtained by any other method. You can use any combination of words,
   pictures, icons or symbols, sounds, colors and any other imagery you see fit into


                           COPYRIGHT © UiTM
structuring and organizing your ideas together. The mind map shown is a text-
based mind map with few Icons, though some of the words could have been
replaced with simple iconic pictures instead.

XML Topic Maps (XTM) is a product of the TopicMaps.Org

The topic maps paradigm describes a way in which complex relationships
between abstract concepts and real-world resources can be described and
interchanged using a standard XML syntax. It is formed in 2000 by an
independent consortium named TopicMaps.Org. The paradigm was more fiilly
developed thereafter in the context of the GCA Research Institute (now known as
IDEAlliance), in an activity called Conventions for the Application of HyTime,
during and after which the paradigm was independently developed, implemented,
and promulgated. After several years, the continuous effort by an international
group of individuals, the topic map paradigm was fully formalized for the first
time as an ISO International Standard, ISO/IEC 13250:2000. Almost
immediately thereafter, TopicMaps.Org was founded in order to develop the
applicability of the paradigm to the Worid Wide Web, and to realize its
enormous potential to improve the find ability and manageability of information.
Topic Maps provides us with a new paradigm for knowledge navigation and
synthesis. Topic Maps is an emerging ISO standard that provides for the
specification of a standard, interchangeable hypertext navigation layer above
diverse electronic information sources. Topic Maps enable us to create virtual
knowledge maps for the Web, our Intranets, or even print materials.


                       COPYRIGHT © UiTM
You can also read
Next slide ... Cancel