Anda di halaman 1dari 93

Konsep Pembangunan &

Pengurusan Tapak &


Laman WEB
Oleh
Ahmad Faizar Jaafar
Jabatan Pengurusan Sistem & Teknologi Maklumat,

PTAR

Konsep Pembangunan serta


Pengurusan Tapak & Laman
WEB
Tahap
: Asas
Jangaka Masa Kursus : 3 hari
Objektif Kursus
Untuk mengetahui konsep-konsep asas
pembanguan sesebuah tapak & laman web
Menyediakan satu tapak & laman web
dengan menggunakan aplikasi web page
editor

W eb
D e sig n e r
S p ecia l
T ra in in g P rogra m
s ta r t d e s ig n in g P R O F E S S I O N A L
W E B S I T E S in 5 d a y s
I t s e a s y o n c e y o u k n o w h o w
5 d a y s t r a in in g

R M 1500

B e g i n w it h H T M L st a ti c p a g e s .

T h e n s e t u p y o u r w e b s i te u si n g
D re a m W e a v e r, in c o rp o ra t in g
s p e c i al e ffe c ts : d r o p d o w n m e n u ,
ro llo v e rs , h o t s p o t s, a n d e tc .

U s e P h o t o S h o p fo r
e x p e rt g r a p h i c /
p h o t o e d it in g a n d
t o u c h -u p s.
C re a t e m ult im e d ia
a n im a t io n s w it h
M a c ro m e d ia F la s h .

o n ly
c o u r s e m a te r ia l in c lu d e d
( n o r m a l p r ic e R M 1 9 5 0 )
C a ll u s to d a y to b o o k yo u r p la c e !
te l

5636 2080

o r e m a i l h e llo @ n o t a a s ia .c o m

M A C R O M E D IA
D R EA M W EA VE R 4
M A C R O M E DIA
FLASH 5

P H O TO SH O P 6

S u b - F r a n c h is e O f :

N o t a A s ia
N O T A A S IA (M ) S D N B H D (41308 1A )
C T 8 .0 1 L e ve l 8 , S u b a n g S q u a r e C o r p o r a t e To w e r , J al a n
S S 1 5 /4 G , 4 7 5 0 0 S u b a n g J a y a , S e l a n g o r .

Overview Of Internet

Classful

IP Addressing
Subnetting a Network
Planning IP Addressing
Assigning TCP/IP
Addresses

Classful IP Addressing

IP

Addresses
IP Address Classes

IP Addresses
IP
Address

192.168.2.100
192.168.2.100

192.168.3.100
192.168.3.100

192.168.1.100
192.168.1.100

192.168.1.0
192.168.1.0

192.168.2.0
192.168.2.0

192.168.3.0
192.168.3.0
Network
Network ID
ID

192.168.1.100
192.168.1.100

192.168.2.101
192.168.2.101

Host
Host ID
ID

IP Address Classes
Class A
Class B

Host
Host ID
ID

Network
Network ID
ID

Network
Network ID
ID

Host
Host ID
ID

Network
Network ID
ID

Class C

Host
Host ID
ID

Subnetting a Network
Subnets
Subnet

Masks
Determining Local and Remote
Hosts

Subnets
Subnet 1

Subnet 2
1

Hub

Router

Hub

Subnet Masks
IP
Subnet
IP
Address
Mask
Address

10.50.
10.
255.255.
10.50.100.

50.100.200
100.200
0.0200

Subnet
Subnet Mask
Mask
IP
Network
Address
ID

255.255.
255.
255.255.255.
192.168.
192.168.
10.50.
10.
Network ID
10.50.100.

0.0.0
0.0
0
2.200
0.0.0
0.0
Host ID 0

Network
ID

Determining Local and


Remote Hosts
Example
Example 21

11

Local Hosts
Remote
Hosts

AA
192.168.1.100
192.168.1.100
192.168.1.100
192.168.1.100

BB

22

D
192.168.2.100
192.168.2.100

E
E

192.168.2.100
192.168.2.100
Router
Router

CC

Subnet
Subnet
Mask
Mask

255.255.0.0
255.255.0.0
255.255.255.0
255.255.255.0

F
F

Lab A: Determining Class Addresses and Subnet Masks

Planning IP Addressing
Addressing

Guidelines
Assigning Network IDs
Assigning Host IDs

Addressing
Guidelines
The
The First
First Number
Number in
in the
the Network
Network ID
ID Cannot
Cannot Be
Be 127
127

The
The Host
Host ID
ID Cannot
Cannot Be
Be All
All 255s
255s

The
The Host
Host ID
ID Cannot
Cannot Be
Be All
All Zeros
Zeros

The
The Host
Host ID
ID Must
Must Be
Be Unique
Unique to
to the
the Local
Local Network
Network ID
ID

Assigning Network IDs


1

Router

3
10.0.0.0

192.168.2.0

172.16.0.0

Assigning Host IDs


1

172.16.
172.16. 0.1
0.1

10.
10.0.0.1
0.0.1

Router

10
10.0.0.10
.0.0.10

172.16.
172.16. 0.10
0.10

192.168.2.
192.168.2.11
192.168.2
192.168.2.10
.10

10
10.0.0.11
.0.0.11

10
10.0.0.12
.0.0.12

10.0.0.0

172.16.
172.16. 0.11
0.11

192.168.2
192.168.2.11
.11

3
192.168.2.0

172.16.
172.16. 0.12
0.12

172.16.0.0

Lab B: Identifying Valid IP Addresses

Assigning TCP/IP
Addresses
Static

IP Addressing
Automatic IP Addressing
Viewing TCP/IP Configuration
Viewing TCP/IP Configuration Using
Ipconfig

Static IP Addressing
Internet Protocol (TCP/IP) Properties
General
You can get IP settings assigned automatically if your
network supports this capability. Otherwise, you need to ask
your network administrator for the appropriate IP settings.
Obtain an IP address automatically
Use the following IP address:
IP address:

192 . 168 . 1 . 200

Subnet mask :

255 . 255 . 255. 0

Default gateway:

192. 168 . 1 . 1

Obtain DNS server address automatically


Use the following DNS server addresses:
Preferred DNS server:
Alternate DNS server:

Advanced...
OK

Cancel

Automatic IP Addressing
Internet Protocol (TCP/IP) Properties
General
You can get IP settings assigned automatically if your
network supports this capability. Otherwise, you need to ask
your network administrator for the appropriate IP settings.
Obtain an IP address automatically
Use the following IP address:
IP address:
Subnet mask :
Default gateway:
Obtain DNS server address automatically
Use the following DNS server addresses:
Preferred DNS server:
Alternate DNS server:

Advanced...
OK

Cancel

Viewing TCP/IP
Configuration
Internet Protocol (TCP/IP) Properties
General
You can get IP settings assigned automatically if your
network supports this capability. Otherwise, you need to ask
your network administrator for the appropriate IP settings.
Obtain an IP address automatically
Use the following IP address:
IP address:

192 . 168 . 1 . 200

Subnet mask :

255 . 255 . 255. 0

Default gateway:

192. 168 . 1 . 1

Obtain DNS server address automatically


Use the following DNS server addresses:
Preferred DNS server:
Alternate DNS server:

Advanced...
OK

Cancel

Viewing TCP/IP Configuration


Using c:\>ipconfig
Command Prompt

Microsoft Windows 2000 [version 5.00.2195]


(C) Copyright 1985-1999 Microsoft Corp.
C:\>ipconfig
Windows 2000 IP Configuration
Ethernet adapter Local Area Connection:
Connection-specific
IP Address. . . . .
Subnet Mask . . . .
Default Gateway . .

C:\>_

DNS
. .
. .
. .

Suffix
. . . .
. . . .
. . . .

.
.
.
.

:
: 192.168.1.200
: 255.255.255.0
: 192.168.1.1

Lab C: Examining the Configuration of TCP/IP

Identifying Internet Concepts


The Internet
Internet Services
Intranets
Domain Naming

Overview
Identifying Internet Concepts
Using Client Technologies
Connecting to the Internet
Identifying Web Server Concepts

History of the Web History of


the Web
Tim Berners- Lee invented the Web
in 1990 writing the first Web server
and browser.
Marc Andreesen exposed the Web to
the masses with Mosaic the first GUI
Web browser in 1993.
The rest is history...

History Internet & WWW

Sejarah Internet & WWW


http://www.netvalley.com/intval1.html

Bagaimana World Wide Web berfungsi


Methods to Use to Connect:
Home user Direct Modem
Organization - LAN

Browser
Browser
Internet
InternetExplorer
Explorer

PC
PC

WWW
WWWServer
Server

Lab B: Identifying Web Concepts

Review
Identifying Internet Concepts
Using Client Technologies
Connecting to the Internet
Identifying Web Server Concepts

Hypertext Markup Language


<HTML>

<HEAD>
<TITLE>Sales Report</TITLE>
</HEAD>

<BODY>
<H2>Q3 Sales by Region</H2>

</BODY>
</HTML>
Hypertext Markup Language ( HTML )

Hypertext Markup Language

Generally text is unformatted in your Web


documents. However, to emphasize specific
letters, words, or phrases you can use some text
formatting options including boldfacing and
italicizing. Depending on your browser, you may
also be able to add underlining to emphasize
characters. The following examples show the
code for boldfacing and italicizing.
<B>This is bold.</B>
<STRONG>This is also bold.</STRONG>
<I>This is italics.</I>
<EM>This is also italics.</EM>

Heading Styles
Heading styles are used to emphasize different levels of information
in Web documents. Heading style level one (H1) is the largest.
The phrase "formatting basics" at the top of this page is an
example of heading one. Heading styles range from level one
(the largest) to the level six (the smallest). In addition to the
font size, heading styles also include boldfacing and/or italicizing
and some paragraph spacing.
Text Formatted as Heading Level with Code Sample
<H1>Heading
<H4>Heading
<H2>Heading
<H5>Heading
<H3>Heading
<H6>Heading

1</H1>Heading
4</H4>Heading
2</H2>Heading
5</H5>Heading
3</H3>Heading
6</H6>Heading

1
4
2
5
3
5

Static Static vs
Dynamic Web Site
Static Web Site
HTML page content is

same for each request


Change to content
requires HTML page edit
No user interaction
No access to live data
Web Site

Static Static vs
Dynamic Web Site
Dynamic Web Site
HTML pages dynamically enerated for each request
Content changes based on data, user login, etc.
Allows user interaction
Access to data real- time
Web Application

Dynamic Web Sites


Web server
responds to HTTP requests and retrieves
resources
Expand Web server capabilities by
providing a gateway between it and
external programs
Common Gateway Interface (CGI)
uses standard I/ O
new process for each request
slow and inefficient

Dynamic Web Sites cont.

NSAPI, ISAPI
Web Server API
runs in- process, making it faster than CGI
Java Servlets

The Internet
Server

Internet
Text, Audio, Video,
and Graphics Data

Connection Using
TCP/IP Protocol

Client

Internet Services
Electronic Mail (e-mail)
World Wide Web (WWW)
Chat
Internet News
File Transfer Protocol (FTP)
Telnet

Internet

Intranets
Intranet

Internet

Extranet

Domain Naming

Domain Name (istudent.uitm.edu.my)


Top-level domain (edu)
Second-level domain (uitm.edu)
Subdomain (istudent.uitm.edu.my)
edu
edu
uitm.edu
uitm.edu
Istudent.uitm.edu.my
Istudent.uitm.edu.my

Using Client Technologies


Newsreaders
Web Browsers
Internet Protocols
Uniform Resource Locator (URL)

Newsreaders
msnews.microsoft.com - Outlook Express
File Edit Tools Message Help
New Post Reply Group

Reply Forward

Print

Stop

Send/Recv

Addresses

Find

Newsgroups

msnews.microsoft.com
Folders
msnews.microsoft.com
microsoft.public.ddk.win2000.general (18)
microsoft.public.ddk.win2000.network
microsoft.public.ddk.win2000.setup (3)
microsoft.public.win2000.accessibility
microsoft.public.win2000.advancedserv
microsoft.public.win2000.announcemen
microsoft.public.win2000.app_deploy
microsoft.public.win2000.applications
microsoft.public.win2000.clusterservice
microsoft.public.win2000.networking
microsoft.public.win2000.outlook.expires
microsoft.public.win2000.printing
microsoft.public.win2000.radius
microsoft.public.win2000.ras_routing
microsoft.public.win2000.security
microsoft.public.win2000.setup
microsoft.public.win2000.setup.deploym
microsoft.public.win2000.setup.upgrade
microsoft.public.win2000.storage
microsoft.public.win2000.system_admin
microsoft.public.win2000.terminal_srv
microsoft.public.win2000.terminal_srv_h
microsoft.public.win2000.user_interface

Synchronization of Newsgroups on msnews.microsoft.com


To change offline settings, first select a newsgroup, then click Settings
Synchronize Account

Newsgroups...

Newsgroup
microsoft.public.ddk.win2000.general
microsoft.public.ddk.win2000.network
microsoft.public.ddk.win2000.setup
microsoft.public.win2000.accessibility
microsoft.public.win2000.advancedserver
microsoft.public.win2000.announcements
microsoft.public.win2000.applications
microsoft.public.win2000.app_deploy
microsoft.public.win2000.clusterservice
microsoft.public.win2000.networking
microsoft.public.win2000.outlook.express
microsoft.public.win2000.printing
microsoft.public.win2000.radius
microsoft.public.win2000.ras_routing
microsoft.public.win2000.security
microsoft.public.win2000.setup
microsoft.public.win2000.setup.deployment
microsoft.public.win2000.setup.upgrade
microsoft.public.win2000.storage
microsoft.public.win2000.system_admin

Settings
Unread
18
5
3
6
13
8
6
15
2
2163
11
21
13
8
4
7
1
4
10
2

Total
18
12
3
6
13
8
6
18
2
2164
14
21
13
8
4
10
5
4
10
2

Web Browsers
Browser
Browser
Internet
InternetExplorer
Explorer
Windows 2000 Server Overview - Microsoft Internet Explorer
File Edit View Favorites Tools Help
Back
Search Favorites History
Address
http://www.microsoft.com/windows2000/server/overview/default.asp
Go
All products Support
Search microsoft.com Guide
Windows Home Pages
Go
Windows 2000
Search for:
Home Page
Home Product Guide
With 2000
the Windows
2000
Server operating system, Microsoft has accomplished
Windows
Server
Family
Product Guide
a goal rarely achieved in the software industry: delivered a product that is
Windows 2000
evolutionary and revolutionary at the same time. Evolutionary in that Windows
Platform
2000 builds on the great things about the Windows NT Server 4.0 operating
Client
system. Revolutionary in that Windows 2000 Server sets a new standard for
Server
how well am operating system can be integrated with Web, application,
services. For
the first time,
you have anand
easy
choice to make about the next server
Technical
networking,
communication,
infrastructure
operating system you deploy - whatever your needs. Continued
Library
Server
Upgrading
Beta Users to
Browse the features that make the Windows 2000 Server Family the
Server
Window
leading solution for running more reliable and manageable file, print,
IT Pros 2000
Features
intranet, communications, e-commerce, and infrastructure server.
Developers
System
Find out what it takes to run Windows 2000 Server and Windows
Requirements 2000 Advanced Server.
What Others
Check out the buzz on Windows 2000 Server: reviews and
commentary from technology journalists and industry analysts.
are Saying
Comparisons See how Windows 2000 Server compares with other operating
systems.

Internet Protocols
HTTP
HTTPS
FTP
SMTP
NNTP
HTML
DHTML

Server

Internet
Data
Connection Using an
Internet Protocol

Client

Uniform Resource Locator


(URL)

URL

(http://example.microsoft.com/tutorial/default.html)
Protocol used (http://)
DNS address (example.microsoft.com)
Path on the server (/tutorial/default.html)
http://example.microsoft.com/tutorial/default.html

Lab A: Accessing an FTP Site by Using


Internet Explorer

Connecting to the Internet


Network Address Translators
(NATs)
Proxy Servers
Firewalls
Microsoft Proxy Server

Network Address Translators


(NATs)

192.168.0.10
192.168.0.10

Web Server

w2.x2.y2.z2
w2.x2.y2.z2

Web Browser
w1.x1.y1.z1
w1.x1.y1.z1
Internet
NAT

Proxy Servers
Authorized
Web Site

LAN

Internet

LAN

Proxy Server
LAN

Restricted
Web Site

Firewalls
Authorized
User

LAN

Internet

LAN
Firewall

LAN

Unauthorized
User

Microsoft Proxy Server


Authorized
User or Web Site

LAN

Internet

LAN
Microsoft Proxy
Server
LAN

Unauthorized
User or Web Site

Identifying Web Server


Concepts
Defining a Web Server
Microsoft Internet Information
Services (IIS)

Defining a Web Server


Client with
Web Browser

Internet
Internet
Explorer
Explorer

Web Server

HTTP
HTTP
HTTP
HTTP
IP
IP Address
Address
TCP/IP

TCP/IP

Network

Microsoft Internet
Information Services (IIS)
Features of IIS
Indexing Service
Internet
Secure Sockets Layer
Windows Media Services
Additional Developer Support

Active Server Pages


VBScript and JavaScript support
Remote administration

IIS

Big Picture

User

user

User Interface

User interface

Web server

application
server

Database

Keperluan host laman web

Perkakasan / Hardware
Ada beberapa jenama

Perisian / Software
Ada beberapa jenama
http://www.serverwatch.com/stypes/
http://search.about.com/fullsearch.htm
?terms=Internet%20%20HTTP%20%20
web%20%20server

Server Directory
ServerWatch breaks down the Internet servers we review into 14 categories. For more information about a
category, click on the server type for a comprehensive overview and a list of servers reviewed on the site.

web Servers
(See a detailed list of all Web servers.)
servers.)
At its core, a Web server serves static content to a Web browser by loading a file from a disk and
serving it across the network to a user's Web browser. This entire
entire exchange is mediated by the
browser and server talking to each other using Hypertext Transfer
Transfer Protocol (HTTP).
application Servers
(See a detailed list of all app servers.)
servers.)
Sometimes referred to as a type of middleware, application servers
servers occupy a large chunk of
computing territory between database servers and the end user, and
and they often connect the two.
proxy Servers
(See a detailed list of all proxy servers.)
servers.)
Proxy servers sit between a client program (typically a Web browser)
browser) and an external server
(typically another server on the Web) to filter requests, improve
improve performance, and share
connections.
FTP Servers
(See a detailed list of all FTP servers.)
servers.)
One of the oldest of the Internet services, File Transfer Protocol
Protocol makes it possible to move one or
more files securely between computers while providing file security
security and organization as well as
transfer control.
mail Servers
(See a detailed list of all mail servers.)
servers.)
Almost as ubiquitous and crucial as Web servers, mail servers move
move and store mail over corporate
networks (via LANs and WANs) and across the Internet.
list Servers
List servers offer a way to better manage mailing lists, whether they be interactive discussions
open to the public or oneone-way lists that deliver announcements, newsletters, or advertising.
advertising.
chat Servers
Chat servers enable a large number of users to exchange information
information in an environment similar to
Internet newsgroups that offers realtime
discussion
capabilities.
real

Server Directory

groupware Servers
In many ways, groupware is the clearest way to show the true power of the World
Wide Web
telnet Servers
A telnet server enables users to log on to a host computer and perform tasks as if
they're working on the remote computer itself.
fax Servers
A fax server is an ideal solution for organizations looking to reduce incoming and
outgoing telephone resources but that need to fax actual documents.
news Servers
News servers act as a distribution and delivery source for the thousands of public
news groups currently accessible over the Usenet news network.
A/V Servers
A/V servers bring multimedia capabilities to Web sites by enabling them to broadcast
streaming multimedia content.
IRC Servers
An option for those seeking real-time discussion capabilities, Internet Relay Chat
consists of various separate networks (or 'nets') of servers that allow users to
connect to each other via an IRC network.
Platforms/OSs
A term often used synonymously with 'operating system,' a platform is the
underlying hardware or software for a system and is thus the engine that drives the
server.
Server Attic Servers
In the fast-paced world of IT, servers come and go. This section is for those servers
that are no longer sold or supported but that an organization, for whatever reason,
may be interested in learning more about.

The Dream
We will enable Web professionals to
efficiently develop dynamic content and
applications delivered on multiple devices.

Design

Develop

Deliver

Display

Macromedia Products
Design

Dreamweaver
Fireworks
Flash
FreeHand

Develop

Deliver

Display

ColdFusion Studio ColdFusion Server


UltraDev
JRun Server
HomeSite
Generator
JRun Studio
Spectra
Director

Flash Player
Flash
Player
Shockwave
Player
Shockwave Player

WYSIWYG
WYSIWYG (What You See Is What You Get)
site building tool with an intuitive environment
for building cross-platform sites.

What I See

What I Get

Popular Tools

GoLive

Home Site

Front Page
Express

Net Object
Fusion

Dreamweaver

WEB CONTENT MANAGEMENT SYSTEM

Web content management system (WCMS or Web CMS) is content


management system (CMS) software, usually implemented as a Web application,
for creating and managing HTML content. It is used to manage and control a large,
dynamic collection of Web material (HTML documents and their associated images).
A WCMS facilitates content creation, content control, editing, and many essential
Web maintenance functions.
Usually the software provides authoring (and other) tools designed to allow users
with little or no knowledge of programming languages or markup languages to
create and manage content with relative ease of use.
Most systems use a database to store content, metadata, and/or artifacts that
might be needed by the system. Content is frequently, but not universally, stored
as XML, to facilitate reuse and enable flexible presentation options.[1][2]

A presentation layer displays the content to regular Web-site visitors based on a


set of templates. The templates are sometimes XSLT files.[3]

Administration is typically done through browser-based interfaces, but some


systems require the use of a fat client.

Unlike Web-site builders like Microsoft FrontPage or Adobe Dreamweaver, a WCMS


allows non-technical users to make changes to an existing website with little or no
training. A WCMS typically requires an experienced coder to set up and add
features, but is primarily a Web-site maintenance tool for non-technical
administrators.

http://www.opensourcecms.com/

WORKFLOW

Full Web Development Workflow

Asas Laman Web Berkualiti

Apa
Siapa
Dimana
Bagaimana
Bila
Temuramah

Perkara Yang Perlu Di Ambil Kira

Gaya Laman Web


Imbangan Grafik dan Teks
Susun Atur Laman Web
Jangka Masa Muat Turun
Mengimbang Setiap Laman Web
Konsisten dan Identiti
Isu Hakcipta

Prinsip Laman Web Dalam Konteks MAMPU

http://mcsl.mampu.gov.my/bm/gphtml/gpkand.html

Prinsip Laman Web Dalam


Konteks MAMPU
Perancangan Dan Struktur Pelaksanaan Laman Web
Persediaan Awal Pembangunan Laman Web
Pertimbangan Dalam Penyediaan Laman Web
Struktur Dan Persembahan Laman Web
Penyediaan Dokumen Dan Reka Bentuk Laman
Web
Menerbit, Mengelola Dan Mempromosi Laman
Web
Penyenggaraan Laman Web
Penyelarasan Dan Pemantauan
Penutup
Glosari

Case Study
University Library Web Site

Discover

http://www.loc.gov/

http://www.lib.cam.ac.uk/

http://www.natlib.govt.nz/

http://library.tamu.edu/

http://www.uwec.edu/Library/

http://www.lib.umich.edu/

http://libpweb.nus.edu.sg/

http://www.nls.uk/

http://www.uwec.edu/Library/about.htm

Web Development Prep


Purpose:

Your PC

Prepare material for web publishing

Text
Digitized pics
URLs

Web Server

Story board

Build Web Site

Publish
http://faizar.freehosting.net/

Text
Prepare in MS Word
Save it using short meaningful
file name in your web folder
(unitone)

Graphics

Digitize graphics - Digital Camera


Prepare graphics - crop, size in
Photoshop / Graphics program
Save it as a jpg/gif
file yourname.jpg
Save in images folder

Linked Resources
Write a short notation about
the site
Write the exact URL for the site

http://faizar.onestop.net

Checkout the Samples


Home Page
Course Name
TOC
Samples - Portfolio Page / Tech Page
Components of Culminating Product
Samples -

Storyboard
Home Page

Portfolio

Humanities 101
TOC
Pics

TOC

Art Perspectives

Intro

Syllabus

Context

Forum

Pics

Intro

Unit

Resources

PD Goals

Portfolio

Context

Sample Work
Analysis, Concl
Next Steps
Implementation

Unit.doc
discuss.jpg

Pics

Pics

Present.jpg

Pics

NEXT STEP

Build Site
Publish Site

http://faizar.onestop.net

Buat Laman WEB

Rujuk Nota

http://faizar.onestop.net/courses.html or http://faizar.atspace.com/courses.html

Daftar laman web percuma


http://faizar.freehosting.net/
http://www.fjoomla.com/