pengembangan web site

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
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
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
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
edu
gov
mil
net
org
info
au
id
ca
Organisasi komersial
Lembaga pendidikan
Lembaga pemerintah
Organisasi militer
Provider Internet
Organisasi umum
Organisasi penyedia informasi
Organisasi komputer di Australia
Organisasi komputer di Indonesia
Organisasi komputer di Kanada
yahoo.com
usc.edu
whitehouse.gov
dt.navy.mil
rad.net
informatika.org
Pengembangan Web site
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
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
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
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 dikembangkan oleh Netscape Communication Corporation.
Pengembangan Web site
2. METODE PENGEMBANGAN WEB
Tahap pengembangan webPerancangan 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.
Gambar 1.1 Tahap pengembangan Web.
3. Mockeup and Prototype.
Walaupun
desain
web
cenderung
menjadi bagian
dari senidan interactive reresentation (prototype)
Dalam
tahap
inivisual
dibuat
visual
representation
(mockeup)
dari pada
sains,
tetapi dapat
disimpulkan
pendekatan
proses desain.
untuk
membuat
contoh
dengan
cepat danpada
mengevaluasinya
sebelum dibuat produk akhir
Menurut Tom Brinck (2002), pengembangan web meliputi beberapa tahap,
yaitu:
4. Production. Pada tahap ini dibuat produk akhir, teks final, isi grafik, dan program harus dibuat
Requirement
Analysis
1. semuanya.
Analysis.
Padaumum
tahap mencakup
ini ditentukan
tujuan dari kualitas, user testing, dan field testing.
Evaluasi
yang
penjaminan
web, bagaimana mengatasi problem yang ada. Juga ditentukan target audience, target platform, user goals, business goals, dan lainnya.
5. Launch.
Produk
diluncurkan
dan
siap
untuk
diakses
oleh umum. Selanjutnya, Web site dipelihara
Tujuan dan
audiens
berpengaruh
pada
nuansa
suatu
Web site,
dan
dievaluasi.
sebagai
pencerminan identitas dari organisasi yang menginginkan
informasi Pada
sampai
kepada
audiens.
Tingkat
kemampuan
audiens
Evaluation.
setiap
tahap
selalu
dilakukan
evaluasi
sangat mempengaruhi pembuatan desain. Dengan demikian Web
site dapat dikatakan komunikatif
komunikatif.
Pengembangan Web site
2.
Conceptual Design
Design. Desain konseptual ini merupakan konsep
pengembangan suatu Web site, dan harus dilihat dari semua aspek.
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
10
Perancangan Web
Gambar 1.2 Struktur navigasi linear navigation model.
Gambar 1.4 Struktur navigasi spoke-and-hub model.
Gambar 1.4 Struktur navigasi spoke-and-hub model.
Gambar 1.3 Struktur navigasi hierarchical model.
1.4.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
Pengembangan Web site
beberapa
cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan.
Gambar 1.5 Struktur navigasi full web model.
Gambar 1.5 Struktur navigasi full web model.
11
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
12
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
13
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
14
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
15
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
16
document toolbar
document window
panel group
design window
coding window
property inspector
status bar
panel file
slitwindow
Pengembangan Web site
17
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 komponenkomponen 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
18
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
19
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.
tempat penyimpanan file
tklik untuk memilih folder
9. Klik Next.
Pengembangan Web site
20
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
21
Membuat folder dalam site
1. Pada panel Site klik-kanan nama Site, maka muncul menu untuk membuat
folder baru.
Pengembangan Web site
22
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
23
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
24
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
25
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
26
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
27
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
28
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
29
4. Simpan dalam folder myWebFolder dengan nama index.html.
Pengembangan Web site
30
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
31
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
32
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
33
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
34
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
35
Membuat halamaan Atrikel
1. Save halaman dengan nama artikel.html
2. Buat teks seperti pembuatan teks pada halaman index.html
Pengembangan Web site
36
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
37
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
38
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
39
5. Untuk melihat animasi dapat diklik tombol Play pada Properties
6. Periksa pada browser dengan cara memilih File > Preview in Browser
Pengembangan Web site
40