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

w

x

Host Host ID ID

y

z

•Subnetting a Network „ Subnets „ Subnet

Masks „ Determining Local and Remote Hosts

Subnets Subnet 1

Subnet 2 1

Hub

2

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

2

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

2

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

Sales Report

Q3 Sales by Region

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. This is bold. This is also bold. This is italics. This is also italics.

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

Heading

Heading

Heading

Heading

Heading

Heading

1

Heading 4Heading 2Heading 5Heading 3Heading 6Heading

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/