Web Development

Pengembangan Web site �

PENGEMBANGAN WEB SITE

Referensi:Sampurna, Membuat Home Page dengan HTML, Jakarta, Elex Media Komputindo, 1996Sutopo, Ariesto Hadi, Pemrograman Flash dengan PHP dan MySQL, Yogyakarta, Graha Ilmu, 2007Madcoms, Panduan Lengkap Dreamweaver CS3, Yogyakarta, Penerbit Andi, 2008


1. PENDAHULUAN

Cara Kerja WWWBekerja 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


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


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.comedu Lembaga pendidikan usc.edugov Lembaga pemerintah whitehouse.govmil Organisasi militer dt.navy.milnet Provider Internet rad.netorg Organisasi umum informatika.orginfo Organisasi penyedia informasiau Organisasi komputer di Australiaid Organisasi komputer di Indonesia ca Organisasi komputer di Kanada


Web Pagel 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.


Web browserWeb 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.


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.


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.


2. METODE PENGEMBANGAN WEBTahap 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

� Perancangan Web

Gambar 1.1 Tahap pengembangan Web.

Walaupun desain visual web cenderung menjadi bagian dari senidari pada sains, tetapi dapat disimpulkan pendekatan pada proses desain.Menurut Tom Brinck (2002), pengembangan web meliputi beberapa tahap,yaitu:

1. Requirement AnalysisRequirement AnalysisRequirement AnalysisRequirement AnalysisRequirement Analysis. Pada tahap ini ditentukan tujuan dariweb, 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 menginginkaninformasi sampai kepada audiens. Tingkat kemampuan audienssangat mempengaruhi pembuatan desain. Dengan demikian Website dapat dikatakan komunikatifkomunikatifkomunikatifkomunikatifkomunikatif.

2. Conceptual DesignConceptual DesignConceptual DesignConceptual DesignConceptual Design. Desain konseptual ini merupakan konseppengembangan suatu Web site, dan harus dilihat dari semua aspek.Desain konseptual merupakan sketsa kasar yang harusdikembangkan terlebih dahulu. Pembuatan desain harusmempertimbangkan bahwa sebaiknya desain sederhana danbersifat umum. Desain menggambarkan bagaimana fungsionalitasproduk bekerja. Metode desain seperti use case, task analysis, danarsitektur informasi (seperti flowchart dan object diagram)digunakan dalam tahap ini. Fokus dari desain ini pada perintah(command) dan bagaimana mengerjakan perintah tersebut. Desainfungsional dibuat untuk mengurangi kemungkinan kesalahan padaaplikasi.

3. Mockeup and PrMockeup and PrMockeup and PrMockeup and PrMockeup and Prototypeototypeototypeototypeototype. Tujuan dari tahap ini adalah membuatcontoh dengan cepat dan mengevaluasinya sebelum dibuat produkakhir. Dalam tahap ini dibuat visual representation (mockeup) daninteractive reresentation (prototype). Mockeup dapat berupa sketsa

Pengembangan Web site �0

Struktur navigasiBeberapa desainer web menggunakan teknik yang biasa seperti dalampengembangan 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 ��

� Perancangan Web

Gambar 1.2 Struktur navigasi linear navigation model.

Gambar 1.3 Struktur navigasi hierarchical model.

1.4.2 Hierarchical model1.4.2 Hierarchical model1.4.2 Hierarchical model1.4.2 Hierarchical model1.4.2 Hierarchical model

Hierarchical modelHierarchical modelHierarchical modelHierarchical modelHierarchical model diadaptasi dari top-down design. Konsepnavigasi ini dimulai dari satu node yang menjadi homepage. Darihomepage dapat dibuat beberapa cabang ke halaman-halaman utama.Apabila diperlukan, dari tiap halaman utama dapat dikembangkan menjadibeberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan.

1.4.3 Spok1.4.3 Spok1.4.3 Spok1.4.3 Spok1.4.3 Spokeeeee-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 untukberhubungan dengan node lain. Pada model ini hanya terdapat dua macamlink, yaitu dari homepage ke halaman tertentu, dan dari halaman tersebutkembali ke homepage.

�Perancangan Web

Gambar 1.4 Struktur navigasi spoke-and-hub model.

Gambar 1.5 Struktur navigasi full web model.

�Perancangan Web

Gambar 1.4 Struktur navigasi spoke-and-hub model.

Gambar 1.5 Struktur navigasi full web model.


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 modelHierarchical 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 modelSpoke-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 modelFull web model memberikan kemampuan hyperlink yang banyak. Fullweb model banyak digunakan karena user dapat mengakses semua topikdengan subtopik dengan cepat. Namun kelemahan dari model ini, yaitudapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya.


Desain visualTeknik 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.


3. HTMLHTML (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)


Ekstensi HTM atau HTMLl 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 HTMLHTML 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.


4. DASAR-DASAR DREAMWEAVER CS3l 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 Dreamweaver1. Klik Start > All Programs > Adobe Dreamweaver CS3

2. Pada Welcome Screen pilih Create New > HTML


document toolbar panel group

panel filestatus barproperty inspector

document window

design window

coding window

slitwindow


5. MENDEFINISIKAN SITEl 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 lokal1. Pilih Site > New Sites > atau pada Welcome Screen pilih Dreamweaver Site


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.


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 filetklik untuk memilih folder


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.


Membuat folder dalam site 1. Pada panel Site klik-kanan nama Site, maka muncul menu untuk membuat

folder baru.


5. MEMBUAT HALAMAN WEBMembuat 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 halamanPengaturan Property halaman merupakan unsur penting dalam pembentukan halaman web. Karena properti halaman ini ikut berperan dalam menentukan tampilan halaman web.


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


Membuat background halaman dengan gambarImage 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 gambarwarnaWarna 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


Membuat warna default teks halaman webUntuk 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


Mengatur warna untuk teks linkCara 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 linkCara mengatur warna untuk teks link:

1. Pada Page Properties pilih Appearance kemudian margin kiri, kanan, atas dan bawah dari halaman web.


Mengatur tanggalUntuk 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


Membuat dokumen baruSetrelah 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


4. Simpan dalam folder myWebFolder dengan nama index.html.


Selain cara tersebut, dapat juga menambahkan halaman dengan cara lain sebagai berikut:

Pada panel site, klik-kanan nama site kemudian pilih New File


5. Untuk membuat nama halaman, ganti Untitled Document dengan Welcome to Multimedia

Membuat judul1. Untuk membuat judul pada halaman, ganti Header dengan Multimedia

Learning.


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.


Membuat judul content1. 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


Membuat teks content1. Untuk mengubah teks pada Main Content dapat dilakukan seperti mengubah

judulnya.

Membuat menu1. Ganti teks pada bagian kiri halaman dengan menu yang terdiri dari Home, About

Us, Artikel, Galeri, Kontak


Membuat halamaan Atrikel1. Save halaman dengan nama artikel.html

2. Buat teks seperti pembuatan teks pada halaman index.html


Membuat link halaman1. 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


6. Dengan cara yang sama buat link ke semua halaman.

7. Periksa tampilan dengan memilih File > Preview in Browser, kemudian pilih browser yang digunakan.


6. IMPOR IMAGE DAN FLASHImpor ImageSebelum 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


5. Untuk melihat animasi dapat diklik tombol Play pada Properties

6. Periksa pada browser dengan cara memilih File > Preview in Browser

Web Development

Documents

Transcript of Web Development