BAB I

BAB I
PENDAHULUAN
1.1 Latar Belakang
Di era globalisasi seperti sekarang ini perkembangan Sistem Informasi berkembang
dengan pesatnya,begitu juga dengan internet.Hal ini ditandai dengan merebaknya
Warnet-warnet di mall,kampus,maupun sekolah-sekolah.Sekarang sumber informasi
tidak hanya berasal dari media cetak maupun media elektronik,karena dengan munculnya
internet yang mempunyai jangkauan yang luas dan tidak ada batas dapat dijadikan
sumber daya informasi yang efektif dan cepat.
Untuk memperkenalkan suatu informasi agar dapat diketahui masyarakat melalui
internet maka harus dibuat suatu dokumen web yang dikenal dengan Homepage.
Web adalah bagian yang paling menarik dari internet.Melalui website kita bisa
mengakses berbagai macam informasi.Dalam hal ini penulis akan membuat Homepage
tentang informasi film yang sedang beredar serta pemesanan ticket secara online.Untuk
mempermudah program pembuatan aplikasi tersebut,penulis menggunakan Macromedia
Dreamweaver MX,karena program tersebut dirasakan cocok dan mudah dalam
penggunaannya.
1.2 Batasan Masalah
Dalam penulisan ilmiah ini penulis hanya akan membahas tentang perancangan dan
pembuatan halaman web untuk informasi film, informasi buku, informasi musik dengan
menggunakan Dreamweaver MX.
1.3 Tujuan Penulisan
Dalam penilisan ini, penulis membuat situs yang berisi tentang informasi film,
informasi buku, dan informasi musik terbaru. Diharapkan situs ini mampu memberikan
informasi bagi mereka yang hobi menonton film, baca buku, dan hobi musik.
1.4 Metode Penulisan
Dalam penulisan ini,penulis menggunakan metode studi pustaka yang sepenuhnya
menggunakan bahan-bahan dari buku referensi,dan sumber-sumber lain yang dapat
membantu persiapan dan proses penyusunan penulisan ini.
1.5 Sistematika Penulisan
Untuk memudahkan penyusunan dalam penulisan ilmiah ini, maka penulis membagi
dalam beberapa bab sebagai berikut :
BAB I
Pendahuluan
Pada
bab
ini
masalah,batasan
penulis
menerangkang
masalah,tujuan
tentang
penulisan,metode
latar
belakang
penulisan
dan
sistematika penulisan.
BAB II
Landasan Teori
Dalam bab ini penulis mencoba untuk membahas lebih lanjut tentang
pengertian Internet, pengertian WWW, pengertian home page dan browser,
TCP/IP, pengertian web site, pengertian html, pengertian Sistem dan
Informasi,stuktur navigasi dan sekilas tentang macromedia dreamweaver mx
2004 yang merupakan perangkat lunak yang digunakan dalam pembuatan web
site ini.
BAB III
Pembahasan pembuatan Homepage
Pada bab ini menerangkan bagaimana membuat local site dan langkahlangkah pembuatan Homepage
BAB IV
Penutup
Berisi kesimpulan dari penulis mengenai semua yang di kerjakan oleh
penulis dan saran.
Bab II
Landasan Teori
2.1 Internet
Bisa di maklumi jika sampai saat ini banyak orang yang masih belum juga
mengerti apa sebenarnya makna dari istilah internet. Sesungguhnya memang tidak ada
jawaban yang benar-benar tepat. Gambaran tentang internet yang kini banyak di gunakan
adalah sejumlah besar (jutaan) computer di seluruh dunia yang terhubung saty sama lain
dan membentuk suatu jaringan raksasa. Gambaran lain yang sebenarnya lebih tepat
adalah sejumlah besar computer yang tehubung satu sama lain dan “berbicara” dengan
bahasa jaringan yang sama yaitu TCP/IP (Transmission Control Protocol/Internet
Protocol).
Sejarah Internet di awali dengan munculnya DARPAnet, yang digunakan untuk
keperluan pertahanan militer AS pada akhir 1960-an. Selanjutnya muncullah layanan lain
seperti e-mail, file transfer protocol (ftp), Gopher, dan tenru saja tak ketinggalan World
Wide Web.
Internet tidak dimiliki oleh siapapun baik perorangan, pemerintah, ataupun dunia
usaha. Internet adalah jaringan terbuka yang akan menerima siapapun yang akan
membuat koneksi dengannya. Lalu siapa yang mengontrol Internet? Meskipun tidak ada
komite para pakar atau lembaga pemerintah yang mengendali Internet, ada beberapa
organisasi yang memandu Internet. Organisasi ini adalah Internet Society (ISOC),
Internet EngineeringTask Force (IETF), Serta Internet Architecture Board (IAB),
ketiganya bertugas mengarahkan, merancang, dan menyetujui perubahan di Internet, jadi
secara global. (Septanto, 1998, hal 1).
Internet atau interconeccted network dapat di artikan, yaitu sebuah system
komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan di
seluruh dunia. Jaringan computer ini terletak di mana saja di seluruh penjuru dunia ini,
karena jaringan –jaringan di seluruh dunia ini saling terhubung maka setiap orang yang
dapat mengakses internet sudah pasti dapat mengakses informasi dari seluruh dunia yang
tergabung dalam internet.
2.1.1
World Wide Web
World wide web atau web adalah layanan yang paling sering di gunakan dan
memiliki perkembangan yang sangat cepat karena dengan layanan ini kita bisa menerima
informasi dalam berbagai format (multimedia), pada mulanya internet mengharuskan kita
mempelajari perintah yang sukar, tidak hanya memakainya tetapi juga untuk
mendapatkan data dari komputer-komputer yang terhubung ke internet, kunci pembuatan
web adalah hypertext yaitu sebuah metode untuk menghubungkan blok-blok atau
halaman, kemudian di lakukan penerapan konsep hypertext ke dalam internet melalui http
(hypertext transfer protocol) melalui http inilah world wide web lahir
2.1.2
Homepage Dan Browsing
Homepage adalah halaman pembuka / pertama dari sekian banyaknya website,
sedangkan yang di maksud dengan browser (web browser) adalah sebuah program
aplikasi program yang di pergunakan untuk menjelajahi dunia maya internet, aplikasi ini
mempunyai kemampuan menampilkan suatu web page yang di tulis dalam bentuk
dokumen HTML.
2.1.3
Website
Website merupakan kumpulan halaman web yang berhubungan dengan file-file
lain yang saling terkait di setiap website, satu halaman di sebut home page ini adalah
halaman yang pertama kali di lihat ketika seseorang mengunjungi website. Dari home
page pengunjung dapat mengklik hyperlink untuk berpindah ke halaman lain dalam
website tersebut atau ke halaman lain di website lain. Homepage berada pada posisi
teratas dengan halaman-halaman terkait berada di bawahynya.biasanya setiap halaman di
bawah homepage di sebut “child page” atau cabang, homepage berisi hyperlink ke
halaman lain dalam website tersebut,juga hyperlink untuk kembali ke home page sering
kali halaman cabang ini memiliki hyperlink juga ke halaman lainnya yang berada di
bawahnya, dan seterusnya.
2.1.4
HTML
HTML (hypertext markup language), merupakan bahasa standard dari setiap
halaman web yang dapat mengantarkan berbagai informasi, dan terus berkembang
sehingga dapat memberikan konstribusi yang lebih terhadap pengguna serta
pengembangan web. (Sakur, 2003, hal xviii).
2.1.5
TCP/IP
Pada awal 1970-an terjadi kemajuan pesat pada protocol jaringan yang mampu
menangani interkoneksi jaringan yang heterogen yaitu TCP/IP (Transmission Control
Protocol/Internet Protocol). TCP/IP adalah terobosan berarti yang memungkinkan
computer dari arsitektur yang berbeda bekerja bersama dan berkomunikasi satu dengan
yang lain. Dalam dunia Internet hal ini akan memungkinkan file atau pesan bergerak ke
suatu tujuan atau alamat tertentu. (Septano, 1998, hal 2)
2.1.6
Sistem dan Informasi
Sistem adalah kumpulan dari unsure-unsur (komponen-komponen,elemenelemen) yang saling berhubungan (interelasi,interaksi,interkoneksi) satu sama lain untuk
mencapai tujuan yang telah ditetapkan.
Informasi adalah data yang diolah menjadi sebuah bentuk yang berarti bagi penerimanya
dan bermamfaat dalam mengambil keputusan saat ini atau yang akan datang.
2.2
Struktur Navigasi
Stuktur navigasi (Penjejakan), merupakan struktur alur dari suatu program yang
merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan
dapat membantu mengorganisasikan seluruh elemen multimedia dengan memberikan
perintah dan pesan, ada empat macam bentuk dari navigasi yang bisa digunakan dalam
proses pembuatan aplikasi multimedia, yaitu :
2.2.1. LINIER.
Linier (satu alur), merupakan struktur yang hanya mempunyai satu rangkaian
cerita yang berurut. Stuktur ini menampilkan satu demi satu tampilan layar secara berurut
menurut urutannya. Tampilan yang dapat di tampilkan pada stuktur jenis ini adalah satu
halaman sebelumnya atau dua halaman sesudahnya. Pada stuktur penjejakan ini tidak di
perkenankan adanya percabangan. Biasanya struktur ini digunakan untuk multimedia
presentasi karena tidak terlalu menuntut ke interaksian tetapi hanya memerlukan
keindahan dan kemudahan menampilkan data sebagai informasi.
Gambar .2.1. Struktur Navigasi Linier
2.2.2. NON LINIER.
Struktur navigasi non linier disebut juga struktur tidak terurut merupakan
pengembangan dari struktur linier. Pada struktur ini di perkenanka percabangan, pola
percabangan non linier memiliki kedudukan yang sama sehingga tidak ada master page
dan slave page.
Gambar 2.2. Struktur Navigasi Non linier
2.2.3. HIRARKI.
Struktur Hierarchi (bercabang), merupakan suatu struktur yang mengandalkan
percabangan untuk menampilkan data berdasarkan criteria tertentu. Tampilan pada menu
pertama akan disebut sebagai master page (halaman utama kesatu), halaman utama ini
akan mempunyai halaman percabangan yang dikatakan Slave Page(halamanpendukung).
Jika salah satu halaman pendukung di pilih atau di aktifkan, maka tampilan tersebut akan
bernama Master Page (halaman utama kedua), dan seterusnya. Pada struktur penjejakan
ini tidak di perkenankan adanya tampilan secara linuier.
Gambar 2.3. Struktur Navigasi Hirarki
2.2.4
CAMPURAN
Navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya, maka
struktur ini disebut juga struktur bebas, jika dari satu tampilan membutuhkan
percabangan, maka dapat dibuat percabangan dan bila dalam percabangan tersebut
terdapat suatu tampilan yang sama kedudukannya maka dapat dibuat struktur linier
dalam percabangan tersebut. Bentuk struktur ini srering digunakan dalam multimedia,
karena bentuk struktur ini memberikan interaksi yang lebih tinggi.
Gambar 2.4. Struktur Navigasi Campuran
2.3
Macromedia Dreamweaver MX 2004
Macromedia Dreamweaver adalah sebuah HTML editor professional untuk
mendesain secara visual dan mengelola situs web maupun halaman web.pada
Dreamweaver MX 2004 terdapat beberapa kemampuan bukan hanya sebagai software
untuk desain Web saja tapi juga untuk menyunting kode serta pembuatan aplikasi Web
dengan menggunakan berbagai bahasa pemrograman Web antara lain JSP, PHP, ASP dan
ColdFusion.
Dreamweaver merupakan software utama yang digunakan oleh Web desainer
maupun Web programmer guna mengembangkan situs web. Ruang kerja, fasilitas dan
kemampuan Dreamweaver mampu meningkatkan produktifitas dan efektivitas dalam
desain maupun membangun situs Web. Dreamweaver juga di lengkapi dengan fasilitas
untuk manajemen situs yang cukup lengkap.
2.4
Ruang Kerja Dreamweaver MX 2004
Saat Anda pertama kali mulai menjalankan Dreamweaver, akan tampil sebuah
kotak dialog Workspace Setup yang digunakan untuk memilih tampilan ruang kerja.
a.
Designer Workspace adalah sebuah penggabungan ruang kerja MDI (Multiple
Document Interface), dimana semua jendela dokumen dan panel tergabung di
dalam satu jendela aplikasi yan besar, dengan sisi panel group di sebelah kanan.
Tampilan ini telah di akui oleh beberapa pengguna.
b.
Coder Workspace adalah ruang kerja yang tergabung dengan letak sisi panel
group di sebelah kiri. Tampilan yang sama digunakan oleh Macromedia
Homesite dan Macromedia ColdFusion Studio, dan jendela dokumen
menampilkan kode secara default. Tampilan ini sudah di akui kemudahannya
oleh pengguna Homesite atau CouldFusion dan pengguna kode lain yang ingin
mengenal tampilan ruang kerja.
Ketika anda akan memulai Dreamweaver tanpa membuka sebuah dokumen, maka
akan tampil halaman awal Dreamweaver pada lembaran kerja. Halaman awal
memberikan anda kemudahan dalam mengakses tutorial Dreamweaver, memilih file yang
sudah terbuka, membuat halaman baru, membuat halaman dari contoh dan dreamweaver
exchange, di mana anda dapat menambah kemampuan baru pada beberapa tampilan
Dreamweaver.
Gunakan
halaman
awal seperti
sebuah
halaman
web.
Untuk
menghilangkan tampilan halaman awal, langkahnya adalah:
1.
Jalankan dreamweaver tanpa membuka dokumen. Halaman awal akan tampil
pada layer monitor Anda.
2.
Klik Don’t Show Again.
Gambar 2.5. Tampilan jendela halaman awal program Firework
Ruang kerja pada Dreamweaver MX 2004 memiliki komponen-komponen yang
memberikan fasilitas dan ruang untuk menuangkan kreasi dalam bekerja, seperti yang
terlihat pada Gambar 2.6. Komponen-komponen yang di sediakan oleh ruang kerja
Dreamweaver MX 2004 antara lain adalah Insert Bar, Document Toolbar, Document
Window, Kelompok Panel, Tag Selektor, Property Inspector dan Site panel. Komponenkomponen yang terdapat di dalam ruang kerja Dreamweaver MX 2004 adalah:
a.
Dokumen Window berfungsi untuk menampilkan dokumen di mana anda
sekarang bekerja.
b.
Inset Bar mengandung tombol-tombol untuk menyisipkan berbagai macam
objek sepeti image, table dan layer ke dalam dokumen.
c.
Dokument Toolbar berisi tombol-tombol dan menu pop-up yang menyediakan
tampilan berbeda dari Dokumen Window.
d.
Kelompok Panel adalah kumpulan panel yang saling berkaitan satu sama lain,
yang dikelompokan di bawah satu judul.
e.
Tag Selector Berfungsi untuk menampilkan hirarki tag di sekitar pilihan yang
aktif pada Design view.
f.
Properti Inspector Digunakan untuk melihat dan mengubah berbagai properti
objek atau teks.
g.
Site Panel Digunakan untuk mengatur file dan folder yang membentuk situs
Web anda.
Insert Bar
Document
Toolbar
Document
Window
Panel Groups
Tag Selector
Property
Inspector
Site Panel
Gambar 2.6 Tampilan ruang kerja Dreamweaver MX 2004
2.5
Menu Utama
Sistem menu yang terdpat pada Dreamweaver MX 2004 sangat sederhana dan
mudah untuk di pahami karena perintah yang terdapat pada hampir sebagian fungsi menu
terdapat juga dalam panel. Anda akan menghabiskan waktu denga perintah yang terdapat
pada menu tetapi akan lebih banyak bekerja dengan menggunakan perintah panel. Di
dalam system menu Dreamweaver MX terdapat beberapa komponen yang dapat kita
gunakan, yaitu:
a. Menu File dan Menu Edit
Berisi item menu standar untuk menu File dan menu Edit, seperti New,
Open, Save, Save All, Cut, Coppy, Paste, Undo, dan Redo. Menu file terdiri dari
beberapa macam perintah untuk menampilkan atau memperlakukan dokumen
baru, seperti Prevew in Browser dan Print Code. Menu Edit berisi perintah untuk
pemilihan, seperti Select Parent Tag, Serta find dan Replace.
b.
Menu View
Berisi perintah untuk menampilkan beberapa macam tampilan dari
dokumen Anda (seperti tampilan design view dan tampilan Code) dan untuk
menampilkan dan untuk menyembunyikan beberapa elemen halaman dan tomboltombol Dreamweaver dan toolbar.
c.
Menu Insert
Berisikan alternative baris insert untuk menyisipkan obyek di dalam
dokumen.
d.
Menu Modify
Berfungsi untuk melakukan perubahan property pada item atau halaman
terpilih. Dengan menggunakan menu ini Anda dapat mengedit atribut tag,
mengganti table dan element abet, dan berbentuk macam aksi untuk item library
dan template.
e.
Menu text
Berfungsi untuk mempermudah dalam melakukan format teks.
f.
Menu Commands
Berisi akses ke beberapa perintah, format kode yang sesuai dengan format
pilihan Anda, membuat photo album, dan melakukan pengeditan gambar dengan
menggunakan Macromedia Fireworks.
g.
Menu Site
Berisi item menu untuk mengelola situs dan melakukan upload dan
download file.
h.
Menu Window
Menyediakan akses ke seluruh panel, Inspektor, dan jendela di dalam
Dreamweaver.
i.
Menu Help
Menyediakan akses ke dokumen Dreamweaver, membuka lembaran kerja
help untuk membantu anda dalam menggunakan Dreamweaver, dan menyediakan
bahan referensi untuk beberapa bahasa.
2.6
Document Window
Document Window merupakan bagian yang digunakan untuk mendesain halaman
situs web. Dalam Dokumen Window, Anda dapat menyisipkan teks image serta objek
lain yang mendukung pembuatan situs Web atau tempat untukmembuat desain Web.
Tidak seperti pada versi sebelumnya, Dreamweaver MX memuat dokumen-dokumen
yang sedang di buka dalam jendela yang sama. Jika anda perhatikan untuk dokumen yang
terbuka dalam jendela yang sama, akan di simpan dalam tab-tab seperti dalam lembar
kerja pada Microsoft Exel. Dengan demikian kita dapat dengan mudah berpindah antar
dokumen tanpa harus menutup tampilan jendela yang sudah terbuka, yaitu dengan
mengklik tab dokumen yang anda inginkan.
Gambar 2.7 Document Window
2.7
Document Tool Bar
Document Toolbar berisi tombol-tombol dan menu pop-up yang menyediakan
tampilan berbeda dari document window. Anda bisa mengatur tampilan Document
Window dalam bentuk Design view atau Code view atau kedua-duanya. Anda juga dapat
memberikan judul document window pada bagian Title.
Gambar 2.8. Dokumen toolbar
2.8
Insert Bar.
Baris insert terdiri dari tombol-tombol untuk membuat dan menyisipkan obyek
seperti table, layer dan gambar. Ketika anda menggulung pointer melewati sebuah
tombol, tampil sebuah kotak keterangan dengan menampilkan nama tombol.
Tombol-tombol tersebut mengatur beberapa kategori dengan menekan tombol pada
bagian kiri dari insert bar. Kategori tambahan akan kelihatan ketika sebuah dokumen
berisi kode server, seperti ASP atau CFML. Ketika Anda mulai menjalankan program
Dreamweaver, kategori yang ditampilkan sama seperti pada waktu Anda bekerja terakhir
kali.
Gambar 2.9 Tampilan Insert Bar
2.9
Panel Group
Yang dikelompokan bersama Panel group adalah kumpulan panel yang saling
berkaitan satu sama lain dibawah satu judul. Kalau Anda perhatikan pada bagian panel
group, di situ terdapat beberapa panel yang tersusun rapih pada bagian sebelah kanan
window. Kelompok panel tersebut antara lain: Design, Code, Application, Files dan
Answer, pada setiap bagian dari panel group terdapat beberapa macam panel lagi,
misalnya pada panel group design berisikan panel HTML Style, CSS Style, dan
Behaviour. Pada bagian panel group files terdapat panel Site dan Assets.
Gambar 2.10. Panel group dan panel Group file
2.10
Property Inspector
Property Inspector digunakan untuk melihat dan mengubah berbagai property
objek dan teksyang terpilih. Setiap objek maupun teks mempunyai properti yang berbedabeda. Misalnya, untuk teks yang terpilih maka property inspector akan menampilkan
property teks seperti yang tampak pada Gambar 2.11 pada bagian property terdapat
beberapa pengaturan format untuk jenis font, ukuran font, perataan, dan lain sebagainya.
Sedangkan property image akan menampilkan pengatur ukuran image.
Gambar 2.11 Property Inspector Text