Professional Documents
Culture Documents
1
PENGEMBANGAN
WEB SITE
Referensi:
Sampurna, Membuat Home Page dengan HTML, Jakarta, Elex Media Komputindo, 1996
Sutopo, Ariesto Hadi, Pemrograman Flash dengan PHP dan MySQL, Yogyakarta, Graha
Ilmu, 2007
Madcoms, Panduan Lengkap Dreamweaver CS3, Yogyakarta, Penerbit Andi, 2008
Pengembangan Web site
2
1. PENDAHULUAN
Cara Kerja WWW
Bekerja pada Web mencakup dua hal penting, yaitu:
l software Web browser
l software Web server
Kedua software ini bekerja seperti sebuah sistem client-server.
l Web browser yang bertindak sebagai client
l Web server yang bertindak sebagai server
Hypertext Transfer Protocol (HTTP)
HTTP adalah suatu protokol yang menentukan aturan yang perlu diikuti oleh Web
browser dalam meminta atau mengambil suatu dokumen, dan oleh Web server dalam
menyediakan dokumen yang diminta Web browser.
HTTP: Protokol standar untuk mengakses dokumen HTML.
Contoh penggunaan protokol HTTP dalam Web: http://www.yahoo.com
Pengembangan Web site
3
Uniform Resource Locator (URL)
l URL adalah suatu sarana yang digunakan untuk menentukan lokasi informasi
pada suatu Web server.
l URL dapat diibaratkan sebagai suatu alamat, yang terdiri dari:
protokol yang digunakan browser untuk mengambil informasi
nama dari komputer di mana informasi tersebut berada
jalur/path serta nama file dari suatu informasi
Format umum dari suatu URL:
protokolTransfer://namaHost/path/namafile
Contoh dari URL: http://mtv.com/music/index.html di mana:
http adalah protokol yang digunakan
mtv.com adalah nama dari server komputer
music adalah jalur / path dari informasi yang dicari
index. html adalah nama file di mana informasi tersebut berada
Pengembangan Web site
4
Domain Name System (DNS)
l Format penamaan standar (sistem pemberian nama secara hirarki) untuk
komputer, services atau resource lain yang berhubungan dengan Internet,
untuk mempermudah pengelolaan server komputer di Internet.
l Sistem penamaan tersebut adalah Domain Name System (DNS).
Contoh DNS:
Nama Domain Jenis Organisasi Contoh
com Organisasi komersial yahoo.com
edu Lembaga pendidikan usc.edu
gov Lembaga pemerintah whitehouse.gov
mil Organisasi militer dt.navy.mil
net Provider Internet rad.net
org Organisasi umum informatika.org
info Organisasi penyedia informasi
au Organisasi komputer di Australia
id Organisasi komputer di Indonesia
ca Organisasi komputer di Kanada
Pengembangan Web site
5
Web Page
l Setiap perusahaaan atau pribadi yang memiliki informasi di World Wide
Web memerlukan suatu Web site.
l Setiap informasi ini disimpan dalam suatu file yang berbeda-beda yang
disebut Web page. Di dalam Web page tersimpan berbagai informasi dan
link yang menghubungkan suatu informasi ke informasi lainnya, baik itu di
dalam suatu Web page yang sama, ataupun dalam Web page lain atau Web
site yang berbeda.
l Sebelum mengakses berbagai macam informasi pada suatu Web site, akan
ditemui suatu Web page pembuka yang disebut sebagai home page.
l Home page ini merupakan halaman pertama dari suatu Web site yang
biasanya berisi tentang apa dan siapa pemilik Web site tersebut.
Pengembangan Web site
6
Web browser
Web browser = perangkat lunak aplikasi yang dapat digunakan oleh user untuk
menampilkan dan berinterasi dengan teks, image, video, musik, game atau informasi
lainnya yang terdapat dalam halaman web dari suatu Web site pada World Wide
Web.
l Informasi-informasi ini biasanya dikemas dalam page-page, di mana setiap
page bisa memiliki beberapa link yang menghubungkan Web page tersebut
ke sumber informasi lainnya.
l Jika suatu link diklik, browser akan melihat alamat dari tujuan link tersebut
dan kemudian mencarinya di Web server.
l Jika browser menemukan alamat dari tujuan link tersebut, browser akan
mennampilkan informasi yang ada,.
l Jika tidak menemukannya, browser akan memberikan suatu pesan yang
menyatakan bahwa alamat tidak dapat ditemukan.
Pengembangan Web site
7
Web browsers untuk personal computer: Internet Explorer, Mozilla Firefox, Safari,
Opera, Safari, Avant Browser, Konqueror, Lynx, Google Chrome, Flock, Arachne,
Epiphany, K-Meleon dan AOL Explorer.
l Internet Explorer (IE) : dikeluarkan oleh Microsoft corporation, biasanya
secara default disertakan bersamaan dengan operating system (OS).
Memiliki keunggulan dalam hal kestabilan konektivitas, support digunakan
untuk kegiatan apapun, jarang ada keluhan error / dsb. Kekurangannya
mungkin agak sedikit lambat dalam hal download file dari internet, baik
untuk browsing, surfing, download, maupun upload. Untuk yang sangat
mengandalkan kestabilan dan supported, browser ini bisa dijadikan pilihan
utama.
l Mozilla firefox : Browser ini memiliki keunggulan dalam hal tampilannya
yang cukup sederhana. Kinerja akses internetnya memiliki kecepatan yang
sangat tinggi, baik untuk download, maupun upload file. Kemudahan dalam
hal penggunaan, juga menjadi pilihan banyak orang. Memiliki supported
yang sangat tinggi dan keamanan yang cukup terjamin.
Pengembangan Web site
8
l Opera : Browser ini menjadi saingan Mozilla Firefox dan Internet Explorer.
Tampilannya terlihat cukup canggih dan modern. Keunggulannya sama
seperti mozilla firefox, dapat membuat menu tab baru dalam satu jendela
yang sama. Kecepatan untuk mengakses internet lumayan tinggi, namun
sering terjadi masalah dalam mengakses situs-situs tertentu seperti blogger
misalnya. Supported masih memiliki kekurangan, sehingga sering terjadi
error / not completed result, dalam mengakses situs-situs tertentu.
l Netscape Navigator adalah paket komersial browser Web yang dikembang-
kan oleh Netscape Communication Corporation.
Pengembangan Web site
9
2. METODE PENGEMBANGAN WEB
Tahap pengembangan web
1. Requirement Analysis.
Menentukan tujuan dari web,
target audience, target platform,
user goals, business goals, dll
2. Conceptual Design.
Fokus dari desain kunseptual ini pada
perintah (command) dan bagaimana
mengerjakan perintah tersebut.
3. Mockeup and Prototype.
Dalam tahap ini dibuat visual representation (mockeup) dan interactive reresentation (prototype)
untuk membuat contoh dengan cepat dan mengevaluasinya sebelum dibuat produk akhir
4. Production. Pada tahap ini dibuat produk akhir, teks final, isi grafik, dan program harus dibuat
semuanya. Evaluasi yang umum mencakup penjaminan kualitas, user testing, dan field testing.
5. Launch. Produk diluncurkan dan siap untuk diakses oleh umum. Selanjutnya, Web site dipelihara
dan dievaluasi.
Evaluation. Pada setiap tahap selalu dilakukan evaluasi
4 Perancangan Web
Gambar 1.1 Tahap pengembangan Web.
Walaupun desain visual web cenderung menjadi bagian dari seni
dari pada sains, tetapi dapat disimpulkan pendekatan pada proses desain.
Menurut Tom Brinck (2002), pengembangan web meliputi beberapa tahap,
yaitu:
1. Requirement Analysis Requirement Analysis Requirement Analysis Requirement Analysis Requirement Analysis. Pada tahap ini ditentukan tujuan dari
web, bagaimana mengatasi problem yang ada. Juga ditentukan tar-
get audience, target platform, user goals, business goals, dan lainnya.
Tujuan dan audiens berpengaruh pada nuansa suatu Web site,
sebagai pencerminan identitas dari organisasi yang menginginkan
informasi sampai kepada audiens. Tingkat kemampuan audiens
sangat mempengaruhi pembuatan desain. Dengan demikian Web
site dapat dikatakan komunikatif komunikatif komunikatif komunikatif komunikatif.
2. Conceptual Design Conceptual Design Conceptual Design Conceptual Design Conceptual Design. Desain konseptual ini merupakan konsep
pengembangan suatu Web site, dan harus dilihat dari semua aspek.
Desain konseptual merupakan sketsa kasar yang harus
dikembangkan terlebih dahulu. Pembuatan desain harus
mempertimbangkan bahwa sebaiknya desain sederhana dan
bersifat umum. Desain menggambarkan bagaimana fungsionalitas
produk bekerja. Metode desain seperti use case, task analysis, dan
arsitektur informasi (seperti flowchart dan object diagram)
digunakan dalam tahap ini. Fokus dari desain ini pada perintah
(command) dan bagaimana mengerjakan perintah tersebut. Desain
fungsional dibuat untuk mengurangi kemungkinan kesalahan pada
aplikasi.
3. Mockeup and Pr Mockeup and Pr Mockeup and Pr Mockeup and Pr Mockeup and Prototype ototype ototype ototype ototype. Tujuan dari tahap ini adalah membuat
contoh dengan cepat dan mengevaluasinya sebelum dibuat produk
akhir. Dalam tahap ini dibuat visual representation (mockeup) dan
interactive reresentation (prototype). Mockeup dapat berupa sketsa
Pengembangan Web site
10
Struktur navigasi
Beberapa desainer web menggunakan teknik yang biasa seperti dalam
pengembangan multimedia pada umumnya yaitu storyboarding, sebgai berikut:
l pembuatan diagram untuk bermacam-macam halaman, seperti storyboarding
pembuatan film dan video
l kemudian hubungan detail yang diperlukan antara halaman-halaman secara
keseluruhan.
Dalam pengembangan web, terdapat beberapa model navigasi dasar,
yang harus dikenal dengan baik oleh desainer, yaitu: linear navigation model,
hierarchical navigation model, spoke and hub model, dan full web model.
Pengembangan Web site
11
6 Perancangan Web
Gambar 1.2 Struktur navigasi linear navigation model.
Gambar 1.3 Struktur navigasi hierarchical model.
1.4.2 Hierarchical model 1.4.2 Hierarchical model 1.4.2 Hierarchical model 1.4.2 Hierarchical model 1.4.2 Hierarchical model
Hierarchical model Hierarchical model Hierarchical model Hierarchical model Hierarchical model diadaptasi dari top-down design. Konsep
navigasi ini dimulai dari satu node yang menjadi homepage. Dari
homepage dapat dibuat beberapa cabang ke halaman-halaman utama.
Apabila diperlukan, dari tiap halaman utama dapat dikembangkan menjadi
beberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan.
1.4.3 Spok 1.4.3 Spok 1.4.3 Spok 1.4.3 Spok 1.4.3 Spoke ee ee-and-hub model -and-hub model -and-hub model -and-hub model -and-hub model
Spoke-and-hub model Spoke-and-hub model Spoke-and-hub model Spoke-and-hub model Spoke-and-hub model hanya menggunakan satu node untuk
berhubungan dengan node lain. Pada model ini hanya terdapat dua macam
link, yaitu dari homepage ke halaman tertentu, dan dari halaman tersebut
kembali ke homepage.
7 Perancangan Web
Gambar 1.4 Struktur navigasi spoke-and-hub model.
Gambar 1.5 Struktur navigasi full web model.
7 Perancangan Web
Gambar 1.4 Struktur navigasi spoke-and-hub model.
Gambar 1.5 Struktur navigasi full web model.
Pengembangan Web site
12
1. Linear navigation model.
Linear navigation model digunakan oleh sebagian besar Web site. Informasi
diberikan secara sekuensial dimulai dari satu halaman. Beberapa desainer
menggunakan satu halaman untuk masuk atau keluar dari Web site.
2. Hierarchical model
Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dimulai
dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa
cabang ke halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama
dapat dikembangkan menjadi beberapa cabang lagi.
3. Spoke-and-hub model
Spoke-and-hub model hanya menggunakan satu node untuk berhubungan dengan
node lain. Pada model ini hanya terdapat dua macam link, yaitu dari homepage
ke halaman tertentu, dan dari halaman tersebut kembali ke homepage.
4. Full web model
Full web model memberikan kemampuan hyperlink yang banyak. Full
web model banyak digunakan karena user dapat mengakses semua topik
dengan subtopik dengan cepat. Namun kelemahan dari model ini, yaitu
dapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya.
Pengembangan Web site
13
Desain visual
Teknik pembuatan desain visual:
l desain web dengan teknik storyboarding
l desain web sesuai dengan desain graphical user interface
Desain visual mencakup elemen grafik yang digunakan pada interface,
termasuk layout secara keseluruhan, menu, desain form, tipografi, penggunaan
warna, coding, dan penempatan tiap unit dari informasi.
Pengembangan Web site
14
3. HTML
HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk
membuat halaman-halaman hypertext pada internet.
l Dengan konsep hypertext halaman-halaman tidak harus dibaca secara
berurutan, tetapi dapat meloncat dari satu topik ke topik lain.
l HTML dirancang untuk digunakan tanpa tergantung pada suatu platform
tertentu.
File HTML
1. File HTML adalah file teks yang mengandung tag penanda (markup tags)
2. Tag penanda memberitahu web browser bagaimana halaman web harus
ditampilkan
3. File HTML harus memiliki ekstensi .htm atau .html
4. File HTML dapat dibuat dengan menggunakan teks editor sederhana
(Notepad)
Pengembangan Web site
15
Ekstensi HTM atau HTML
l Saat menyimpan sebuah dokumen atau file HTML ada dua macam ekstensi,
yaitu ekstensi .htm atau .html yang dapat digunakan.
l Ekstensi .htm digunakan mengingat pada awal perkembangan teknologi
komputer hanya dapat mendukung penggunaan tiga huruf untuk
penyimpanan file.
l Dengan teknologi informatika yang semakin maju, saat ini disarankan untuk
menyimpan file HTML dengan ekstensi .html
Editor HTML
HTML dapat dengan lebih mudah diedit dengan menggunakan editor yang bersifat
WYSIWYG (what you see is what you get) seperti Microsoft FrontPage, Macromedia
Dreamweaver, Adobe PageMill, dan lain-lain.
Pengembangan Web site
16
4. DASAR-DASAR DREAMWEAVER CS3
l Dreamweaver sebuah editor HTML profesional untuk mendesain web secara
visual dan mengelola situs atau halaman web.
l Dreamweaver merupakan perangkat lunak utama yang digunakan oleh
Web Desainer dan Web Programmer dalam mengembangkan suatu situs
web karena ruang kerja, fasilitas, dan kemampuannya yang mampu
meningkatkan produktivitas dan efektivitas dalam desain maupun
membangun suatu situs web.
Menjalankan Dreamweaver
1. Klik Start > All Programs >
Adobe Dreamweaver CS3
2. Pada Welcome Screen
pilih Create New > HTML
Pengembangan Web site
17
document toolbar
panel group
panel fle
status bar
property inspector
document window
design window
coding window
slitwindow
Pengembangan Web site
18
5. MENDEFINISIKAN SITE
l Web site (situs web) adalah suatu kesatuan dari dokumen-dokumen yang
terhubung dengan atribut yang sama.
l Web site memiliki dokumen yang biasanya disebut halaman web, serta
dilengkapi dengan komponen-
komponen lain seperti image,
media, dan objek yang saling
berhubungan
Membuat site lokal
1. Pilih Site > New Sites >
atau pada Welcome Screen
pilih Dreamweaver Site
Pengembangan Web site
19
2. Pada kotak dialog Site Definition
buat nama misalnya myweb dan
isi alamat URL misalnya
http://www.myweb.com
3. Klik Next.
4. Pada tampilan kotak dialog kedua:
Site Definition
pilih No untuk web site statis
pilih Yes untuk web site dinamis
Sebagai contoh pilih No
5. Klik Next.
Pengembangan Web site
20
6. Pada tampilan kotak dialog ketiga:
Site Definition
pilih Edit local ......................,
pilih folder yang digunakan untuk
menyimpan file.
7. Klik Next.
8. Jika menggunakan site lokal
dan belum terkoneksi dengan
server, maka pilih Local/Network
pilih folder yang digunakan untuk
menyimpan file.
9. Klik Next.
tempat penyimpanan fle
tklik untuk memilih folder
Pengembangan Web site
21
10. Jika memilih enable, site yang
sedang diedit juga dapat diedit
oleh user lain, maka pilih No
11. Klik Next.
12. Tampilan berikutnya adalah
ringkasan site yang telah
dibuat. Klik Done.
Pengembangan Web site
22
Membuat folder dalam site
1. Pada panel Site klik-kanan nama Site, maka muncul menu untuk membuat
folder baru.
Pengembangan Web site
23
5. MEMBUAT HALAMAN WEB
Membuat desain halaman Web merupakan hal yang terpenting dalam pembuatan
sebuah situs, perpaduan dari seni, ilmu pengetahuan, dan ketrampilan. Suatu desain
yang baik memiliki karakteristik:
l komunikatif - elemen desain mempunia makna, mudah dimengerti
l konsistensi - kesamaan elemen-elemen terkait, meliputi font, warna,
button, dll
l estetis - elemen desain merupakan kesatuan, seimbang,
memiliki irama
l kecepatan download - mudah tampil pada halaman (ukuran file memadai)
Mengatur property halaman
Pengaturan Property halaman merupakan unsur penting dalam pembentukan
halaman web. Karena properti halaman ini ikut berperan dalam menentukan tampilan
halaman web.
Pengembangan Web site
24
Atribut dasar halaman web:
- judul halaman, latar belakang berupa warna dan gambar halaman, warna teks
dan link, margin halaman Web
Untuk menampilkan property halaman web:
1. Pilih Modify > Page Properties
Appearence - mengatur jenis, ukuran,
style dan warna dari font, serta
latar belakang
Link - mengatur font dan teks untuk
link
Heading - menentukan kategori
heading
Title - menentukan judul halaman
Tracing image - mengatur
penampilan sementara gambar
pada latar belakang
Pengembangan Web site
25
Membuat background halaman dengan gambar
Image yang digunakan untuk background memiliki format gif, jpg, png.
Untuk menggunakan image sebagai background:
1. Buka page Properties dengan cara memilih Modify > Page Properties
2. Klik Browse pada bagian Background Image untuk mencari gambar yang
akan dijadikan background
3. Klik Apply untuk melihat tampilan gambar pada background
Membuat background halaman dengan gambarwarna
Warna yang digunakan untuk background dipilih dari tabel warna yang ada.
Untuk menggunakan warna background:
1. Buka page Properties
2. Klik button pulldown di
samping Background.
3. Pilih warna yang ada palet warna.
4. Klik Ok
Pengembangan Web site
26
Membuat warna default teks halaman web
Untuk membuat warna default teks pada halaman:
1. Pada Page Properties pilih Text Color
2. Klik button pulldown di
samping Text color.
3. Pilih warna yang ada palet warna.
4. Klik Ok
Pengembangan Web site
27
Mengatur warna untuk teks link
Cara mengatur warna untuk teks link:
1. Pada Page Properties pilih Link kemudian atur warna:
- Links, warna yang akan digunakan untuk semua teks dan email link
- Visited Links, warna yang akan digunakan pada link yang telh
dikunjungi
- Active Links, warna yang akan digunakan pada link yang sedang
ditunjuk.
- Rollover Links, warna yang akan digunakan pada link saat mouse
pointer di atasnya
Mengatur warna untuk teks link
Cara mengatur warna untuk teks link:
1. Pada Page Properties pilih Appearance kemudian margin kiri, kanan, atas
dan bawah dari halaman web.
Pengembangan Web site
28
Mengatur tanggal
Untuk menampilkan tanggal:
1. Pastikan aktif pada halaman Web
2. Tempatkan kursor pada lokasi di mana tanggal akan ditempatkan
3. Pilih Insert > Date.
4. Pilih format Date pada kotak dialog Insert Date
5. Klik Ok
Pengembangan Web site
29
Membuat dokumen baru
Setrelah membuat site, langkah selanjutnya adalah membuat halaman web dengan
membuat dokumen baru dan disimpan dalam site yang ada.
Untuk membuat dokumern HTML dapat dilakukan sebagai berikut:
1. Pilih File > New .
2. Pada kotak dialog New Document
pilih Blank Page. Pada bagian
Type pilih HTML, pada bagian
Layout pilih bentuk yang diingin-
kan, misalnya
2 column hybrid, left sidebar,
header and footer .
3. Klik > Create
Pengembangan Web site
30
4. Simpan dalam folder myWebFolder dengan nama index.html.
Pengembangan Web site
31
Selain cara tersebut, dapat juga menambahkan halaman dengan cara lain sebagai
berikut:
Pada panel site, klik-kanan nama site kemudian pilih New File
Pengembangan Web site
32
5. Untuk membuat nama halaman, ganti Untitled Document dengan Welcome to
Multimedia
Membuat judul
1. Untuk membuat judul pada halaman, ganti Header dengan Multimedia
Learning.
Pengembangan Web site
33
2. Selanjutnya lakukan pengeditan pada beberapa style yang diperlukan pada panel
CSS, misalnya untuk header. Jika panel CSS belum terbuka maka dapat dipilih
Window > CSS Style.
3. Klik dua kali pada twoColHybLtHdr#Header, maka akan muncul kotek dialog
untuk mengubah style.
4. Pada kotak dialog, pada Type dilakukan perubahan seperti pada gambar.
5. Klik Ok, maka judul berubah.
Pengembangan Web site
34
Membuat judul content
1. Untuk mengubah judul Main Content, aktifkan Main Content, kemudian pada
Properties lakukan perubahan font dan warna.
2. Nama style dapat diubah
dengan cara klik pulldown
nama style > Rename.
3. Ganti nama style menurut
keinginan sendiri
4. Klik Ok
Pengembangan Web site
35
Membuat teks content
1. Untuk mengubah teks pada Main Content dapat dilakukan seperti mengubah
judulnya.
Membuat menu
1. Ganti teks pada bagian kiri halaman dengan menu yang terdiri dari Home, About
Us, Artikel, Galeri, Kontak
Pengembangan Web site
36
Membuat halamaan Atrikel
1. Save halaman dengan nama artikel.html
2. Buat teks seperti pembuatan teks pada halaman index.html
Pengembangan Web site
37
Membuat link halaman
1. Buka index.html
2. Highlight menu
Artikel, pada
Properties klik Browse
di sebelah kanan Link.
3. Pilih atikel.html
4. Klik Ok
5. Pada Target pilih _self,
berarti menggantikan
halaman lama
Pengembangan Web site
38
6. Dengan cara yang sama buat link ke semua halaman.
7. Periksa tampilan dengan memilih File > Preview in Browser, kemudian pilih
browser yang digunakan.
Pengembangan Web site
39
6. IMPOR IMAGE DAN FLASH
Impor Image
Sebelum mengimpor image, animasi dan
video tempatkan file yang akan diimpor
ke dalam folder dalam site.
Buat folder images dan flash dalam site
terlebih dahulu.
1. Tempatkan file image (GIF, JPG, PNG) ke dalam folder images
2. Tempatkan file animasi (SWF) ke dalam folder flash
3. Tempatkan kursor kemudian pilih Insert > Image, kemudian pilih image yang
mau diimpor
4. Tempatkan kursor kemudian pilih Insert > Media > Flash, kemudian pilih animasi
yang mau diimpor
Pengembangan Web site
40
5. Untuk melihat animasi dapat diklik tombol Play pada Properties
6. Periksa pada browser dengan cara memilih File > Preview in Browser