04.06.2013 Views

BAB II.pdf

BAB II.pdf

BAB II.pdf

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

<strong>BAB</strong> <strong>II</strong><br />

LANDASAN TEORI<br />

2.1. Sekilas Tentang Anggrek<br />

Anggrek salah satu angota famili Orchidacea yang beranggota sangat<br />

banyak. Di dalam famili itu terdapat lebih dari 30.000 spesies dan kurang lebih<br />

800 generasi yang berbeda. Anggota famili itu dapat dijumpai hampir di setiap<br />

tempat di dunia, terutama daerah tropis mulai daratan rendah hingga tinggi,<br />

bahkan sampai ke daerah perbatasan pegunungan bersalju.<br />

Bermacam variasi bentuk, warna, dan ukuran dengan ciri-ciri yang unik<br />

menjadi daya tarik anggrek. Warna bunganya mulai dari yang berwarna cerah<br />

sampai yang berwarna gelap bias bisa dijumpai. Ukuran bunga pun bervariasi,<br />

mulai yang berukuran sangat kecil sampai yang berukuran besar. Bentuk<br />

bunganya juga sangat unik. Ada yang berbentuk bulat, binatang, keriting, atau<br />

bertanduk. Jumlah kuntum bunganya, ada tunggal, tetapi ada pula yang banyak.<br />

Beberapa jenis anggrek ada yang berbau harum bagai parfum. Tangkai bunga ada<br />

yang tegak, mendatar, dan menjuntai, serta berukuran pendek sampai yang<br />

panjang.<br />

Anggrek dikenal sebagai tanaman hias berbunga indah, contohnya<br />

Calanthe sp., Paphiopedilum sp., Phalaenopsis dan Vanda hookeriana. Karena<br />

potensinya amat besar, tanaman anggrek itu sangat berprospek untuk<br />

dikembangkan. Apalagi daerah penyebaran paling luas di daerah tropis.<br />

Anggrek termasuk tanaman yang mempunyai kecepatan tumbuh lambat<br />

dan berbeda-beda. Hal ini sangat berpengaruh bila yang menjadi tujuan<br />

pemeliharaan adalah memproduksi bunga. Tanaman anggrek juga mempunyai<br />

pola pertumbuhan yang berbeda dengan tanaman hias lainnya.<br />

Pertumbuahan tanaman anggrek, ditentukan oleh faktor iklim dan faktor<br />

pemeliharaan. Faktor iklim meliputi suhu, cahaya, dan kelembapan. Yang<br />

termasuk faktor pemeliharaan yaitu pemupukan dan penyiraman. Tanaman<br />

anggrek yang akan dipelihara sebaiknya dipilih atau bersal dari bibit anggrek yang<br />

4


aik agar tidak kecewa setelah ditanam sedangkan cara menanam anggrek<br />

sebaiknya di pot atau di pohon yang lebih epifit terlebih cara merawat anggrek<br />

merupakan kunci sukses.<br />

2.2. Internet<br />

Internet merupakan suatu jaringan antar komputer yang saling<br />

dihubungkan. Media penghubung tersebut bisa melalui kabel, kanal satelit<br />

maupun frekuensi radio, sehingga komputer-komputer yang terhubung tersebut<br />

dapat saling berkomunikasi. Setiap komputer yang terhubung dengan jaringan<br />

tersebut diberikan sebuah nomor yang unik dan berkomunikasi satu sama lainnya<br />

dengan bahasa komunikasi yang sama. Bahasa komunikasi yang sama ini disebut<br />

dengan Protokol. Protokol yang digunakan di Internet adalah TCP / IP<br />

(Transmission Control Protocol / Internet Protocol).<br />

Pada awalnya Internet berasal dari sebuah jaringan komputer yang terdiri<br />

dari beberapa komputer yang dihubungkan dengan kabel sehingga membentuk<br />

sebuah jaringan (network). Kemudian jaringan-jaringan tersebut saling<br />

dihubungkan lagi sehingga membentuk Inter-network yang dikenal dengan nama<br />

Internet.<br />

2.3. World Wide Web (WWW)<br />

World Wide Web merupakan suatu kumpulan informasi pada beberapa<br />

server komputer yang terhubung satu sama lain dalam jaringan Internet.<br />

Informasi-informasi dalam Web mempunyai link-link yang menghubungkan<br />

informasi tersebut ke informasi lain di dalam jaringan Internet. Link ini<br />

mempunyai suatu tanda khusus, yang biasanya dinyatakan dengan teks berwarna<br />

biru dan digarisbawahi, atau dalam bentuk icon maupun gambar yang dikelilingi<br />

oleh suatu kotak.<br />

Salah satu penyebab utama pesatnya pertumbuhan World Wide Web<br />

adalah kemudahan dalam penggunaannya. Pada Web, hanya cukup mengklik<br />

tombol mouse pada suatu link untuk dapat menghasilkan suatu informasi dan link<br />

tersebut secara otomatis akan ke informasi yang diinginkan. Sistem yang<br />

5


menghubungkan informasi-informasi melalui link ini disebut dengan nama<br />

hypertext. Dengan semakin berkembangnya World Wide Web, istilah hypertext<br />

ini kemudian berubah menjadi hypermedia, di mana link-link penghubung antar<br />

informasi bukan lagi hanya berupa suatu teks, tetapi juga bisa berupa suatu file<br />

multimedia, seperti gambar, suara atau video.<br />

2.3.1. HyperText Transfer Protocol (HTTP)<br />

HyperText Transfer Protocol adalah suatu protokol yang menentukan<br />

aturan yang perlu diikuti oleh Web browser dalam meminta atau mengambil suatu<br />

dokumen dan oleh Web browser dalam menyediakan dokumen yang diminta Web<br />

browser. Protokol ini merupakan protokol standar yang digunakan untuk<br />

mengakses dokumen HTML. Salah satu contoh penggunaan protokol HTTP<br />

dalam Web: http://www.hollywood.com<br />

2.3.2. Uniform Resource Locator (URL)<br />

Uniform Resource Locator adalah suatu sarana yang digunakan untuk<br />

menentukan lokasi informasi pada suatu Web server. URL dapat diibaratkan<br />

sebagai suatu alamat, dimana alamat tersebut terdiri dari :<br />

Protokol yang digunakan oleh suatu browser untuk mengambil informasi.<br />

Nama dari komputer di mana informasi tersebut berada, dan<br />

Jalur / path serta nama file dari suatu informasi.<br />

Format umum dari suatu URL adalah sebagai berikut :<br />

Protokol_transfer://nama_host/path/nama_file<br />

Berikut ini adalah contoh dari URL:<br />

http://mtv.com/music/index.html<br />

2.3.3. Home Page<br />

Setiap perusahaan atau pribadi yang memiliki informasi di World Wide<br />

Web memerlukan suatu alamat (URL) khusus yang disebut Web site. Setiap<br />

informasi ini disimpan dalam suatu file yang berbeda-beda yang disebut Web page.<br />

6


Di dalam Web page inilah tersimpan berbagai informasi dan link yang<br />

menghubungkan suatu informasi ke informasi lainnya, baik itu di dalam suatu<br />

Web page yang sama, ataupun dalam Web page lain pada Web site yang berbeda.<br />

Sebelum mengakses berbagai macam informasi pada suatu Web site, akan<br />

ditemui suatu Web page pembuka yang disebut sebagai home page. Home page<br />

ini merupakan halaman pertama dari suatu Web site yang biasanya berisi tentang<br />

apa dan siapa dari perusahaan atau organisasi dari pemilik Web site tersebut. Jadi<br />

pada dasarnya home page adalah suatu sarana untuk memperkenalkan secara<br />

singkat tentang apa yang menjadi isi dari keseluruhan Web site dari suatu<br />

organisasi atau pribadi.<br />

2.4. Browser<br />

Untuk mengakses Web, diperlukan suatu program yang disebut Web<br />

browser atau biasa disebut browser saja. Browser merupakan suatu program yang<br />

dirancang untuk mengambil informasi-informasi dari suatu server komputer pada<br />

jaringan Internet. Informasi-informasi ini biasanya dikemas dalam page-page, di<br />

mana setiap page bisa memiliki beberapa link yang menghubungkan Web page<br />

tersebut ke sumber informasi lainnya.<br />

Jika suatu link diklik, browser akan melihat alamat dari tujuan link<br />

tersebut dan kemudian mencarinya di Web server. Jika browser menemukan<br />

alamat dari tujuan link tersebut, browser akan menampilkan informasi yang ada,<br />

dan jika tidak menemukannya browser akan memberikan suatu pesan yang<br />

menyatakan bahwa alamat dari tujuan link tersebut tidak dapat ditemukan.<br />

2.5. HyperText Markup Language (HTML)<br />

HyperText Markup Language adalah suatu format data yang digunakan<br />

untuk membuat dokumen hypertext yang dapat dibaca dari satu platform<br />

komputer ke platform komputer lainnya tanpa perlu melakukan suatu perubahan<br />

apapun. Dokumen HTML disebut sebagai markup language karena mengandung<br />

tanda-tanda tertentu yang digunakan utntuk menentukan tampilan suatu teks dan<br />

tingkat kepentingan dari teks tersebut dalam suatu dokumen.<br />

7


2.6. Macromedia Dreamweaver MX<br />

2.6.1. Mengenal Macromedia Dreamweaver MX<br />

Macromedia Dreamweaver MX merupakan software yang dikenal sebagai<br />

software web authoring tool, yaitu software untuk desain dan layout halaman web.<br />

Saat ini Dreamweaver merupakan software utama yang digunakan oleh web<br />

desainer maupun web programmer dalam membangun suatu situs web. Hal ini<br />

disebabkan ruang kerja, fasilitas dan kemampuan Dreamweaver yang mampu<br />

meningkatkan produktivitas dan efektivitas dalam desain maupun membangun<br />

suatu situs web.<br />

2.6.2. Konsep Ruang Kerja<br />

Macromedia Dreamweaver MX memiliki tiga macam layout ruang kerja.<br />

Ruang kerja pertama memiliki layout yang hampir sama persis dengan<br />

Dreamweaver versi 4. Ruang kerja kedua merupakan versi standar dari<br />

Macromedia Dreamweaver MX, sedangkan yang ketiga merupakan layout ruang<br />

kerja yang berasal dari HomeSite yang diutamakan untuk editing kode.<br />

Gambar 2.1 Memilih tipe ruang kerja Dreamweaver MX<br />

8


Apabila Anda memilih Dreamweaver MX Workspace tanpa mengklik<br />

HomeSite/Coder-Style, akan muncul tampilan seperti Gambar 2.2. Ruang kerja<br />

pada Macromedia Dreamweaver MX memiliki komponen-komponen yang<br />

memberikan fasilitas dan area di mana kita dapat bekerja.<br />

Pada Gambar 2.2 Anda dapat melihat komponen-komponen ruang kerja<br />

seperti Insert bar, Document window, panel groups, Tag selector, Property<br />

Inspector dan Site panel.<br />

Insert bar Panel groups<br />

Document toolbar<br />

Tag selector Site panel<br />

Property inspector Document window<br />

Gambar 2.2 Tampilan ruang kerja Dreamweaver MX standar<br />

9


2.6.3. Insert Bar<br />

Komponen ini mengandung tombol-tombol untuk menyisipkan berbagai<br />

macam objek seperti image, tabel dan layer ke dalam dokumen. Setiap objek<br />

adalah kutipan kode HTML yang memberikan fasilitas bagi kita untuk mengatur<br />

atributnya sebagaimana kita menyisipkannya.<br />

Gambar 2.3 Insert bar<br />

Insert bar memiliki kategori-kategori elemen yang dapat disisipkan. Untuk<br />

memilih kategori yang diinginkan Anda dapat mengklik tab-tab di bagian atas<br />

Insert bar. Kategori-kategori yang ada yaitu:<br />

Common<br />

Digunakan untuk menyisipkan objek/ elemen yang sering disisipkan dalam<br />

suatu halaman web.<br />

Layout<br />

Digunakan untuk menyisipkan layer atau tabel, juga memberikan fasilitas<br />

untuk berpindah dari tampilan standar ke tampilan layout atau sebaliknya.<br />

Text<br />

Digunakan untuk menyisipkan teks sesuai format yang diinginkan.<br />

Tables<br />

Digunakan untuk menyisipkan tabel dan tag-tag untuk tabel. Tag-tag ini<br />

hanya dapat disisipkan pada modus Code View.<br />

Frames<br />

Digunakan untuk membuat halaman web dengan frame.<br />

Forms<br />

Digunakan untuk menyisipkan form dan elemen-elemen form.<br />

Templates<br />

Digunakan apabila Anda bekerja dengan template.<br />

10


Characters<br />

Digunakan untuk menyisipkan karakter-karakter khusus yang tidak dapat<br />

ditemukan pada keyboard Anda.<br />

Media<br />

Digunakan untuk menyisipkan berbagai media.<br />

Head<br />

Digunakan untuk menyisipkan elemen di dalam tag dari halaman<br />

web.<br />

Script<br />

Digunakan untuk menyisipkan script.<br />

Application<br />

Kategori ini digunakan untuk membuat aplikasi database dalam<br />

Dreamweaver MX.<br />

2.6.4. Document Toolbar<br />

Komponen ini mengandung tombol-tombol dan menu pop-up yang<br />

menyediakan tampilan berbeda dari Document window (seperti Design view dan<br />

Code view), pilihan menampilkan ruler, grid, dan beberapa operasi umum, seperti<br />

preview di browser.<br />

Gambar 2.4 Document toolbar<br />

2.6.5. Document Window<br />

Komponen ini merupakan komponen di mana dokumen kita dibuat dan<br />

ditampilkan. Anda menyisipkan teks, image dan objek lain di bagian ini.<br />

Document window dalam Dreamweaver MX dapat menampilkan layout web<br />

seperti yang akan Anda lihat pada browser, tetapi ada batasan-batasan tertentu di<br />

mana terdapat perbedaan antara tampilan di Dreamweaver MX dengan tampilan<br />

di browser.<br />

11


Gambar 2.5 Document window<br />

2.6.6. Panel Groups<br />

Panel groups adalah kumpulan panel berkaitan yang dikelompokkan<br />

bersama di bawah satu judul. Untuk mengekspansi panel group, klik pada panah<br />

expander di sebelah kiri nama group. Untuk membuat panel menjadi mengapung<br />

(tidak menempel pada pojok window), lakukan drag pada paling pojok kiri dari<br />

judul group.<br />

Terdapat beberapa jenis panel group, antara lain Design, Code,<br />

Application, Files dan Answer. Dalam suatu jenis group terdapat beberapa macam<br />

panel, misalnya group Design memiliki panel HTML Styles, CSS Styles dan<br />

Behaviour. Masing-masing panel ini dapat Anda buat mengapung dan terpisah<br />

dengan group dengan cara men-drag tab dari panel tersebut sehingga terlepas dari<br />

panel group.<br />

Gambar 2.6 Design panel group<br />

12


2.6.7. Tag Selector<br />

Tag selector terletak pada status bar, tepatnya di bawah Document window<br />

yang berfungsi menampilkan hierarki tag di sekitar pilihan yang aktif pada Design<br />

view. Klik pada sembarang tag di hierarki untuk menampilkan tag dan semua<br />

isinya.<br />

2.6.8. Property Inspector<br />

Gambar 2.7 Tag selector<br />

Property inspector memberikan fasilitas untuk melihat dan mengubah<br />

berbagai properti objek yang dipilih atau teks. Setiap macam objek memiliki<br />

properti yang berbeda.<br />

2.6.9. Site Panel<br />

Gambar 2.8 Property inspector<br />

Site panel memberikan fasilitas untuk mengatur file dan folder yang<br />

membentuk situs web Anda. Site panel sebenarnya merupakan anggota dari Files<br />

panel group selain Assets panel. Panel ini memiliki fungsi yang cukup penting<br />

karena memungkinkan kita bekerja dan mengatur file-file dari situs web dengan<br />

efisien.<br />

Pada Site panel, selain untuk manajemen file Anda juga dapat melakukan<br />

koneksi ke remote server atau testing server. Setelah koneksi dilakukan, Anda<br />

dapat menaruh file ke server atau mengcopy file dari server ke situs lokal.<br />

13


2.6.10. Tag Inspector<br />

Gambar 2.9 Site panel dalam files panel group<br />

Tag inspector merupakan salah satu fasilitas baru Dreamweaver MX di<br />

mana kita dapat melihat hierarki tag dan atribut-atribut yang dapat ditambahkan<br />

atau diedit. Anda dapat menampilkan Tag inspector dengan menu Window > Tag<br />

Inspector atau tekan tombol F9 pada keybord.<br />

2.7. Struktur Navigasi<br />

Gambar 2.10 Tag inspector<br />

Secara teknis pembuatan homepage memiliki suatu alur navigasi dengan<br />

menggunakan fasilitas hyperlink yang menghubungkan first page file ke file-file<br />

berikutnya dalam suatu direktori file homepage. Untuk memahami lebih jelas alur<br />

14


tersebut, digunakan teori struktur navigasi. Berikut struktur navigasi yang biasa<br />

digunakan :<br />

1. Struktur Linier<br />

Merupakan struktur yang tanpa mempunyai suatu rangkaian cerita yang<br />

berurut. Struktur ini menampilkan satu per satu tampilan layar secara<br />

berurut menurut aturannya. Pada struktur ini tidak diperkenankan adanya<br />

percabangan.<br />

Gambar 2.11 Struktur navigasi linier<br />

2. Struktur Hirarki<br />

Struktur ini merupakan struktur yang mengandalkan percabangan untuk<br />

menampilkan data atau gambar pada layar. Tampilan menu pada struktur<br />

ini disebut dengan master page (halaman utama ke satu), dan master page<br />

ini memiliki cabang-cabang yang disebut dengan slave page (halaman<br />

pendukung).<br />

Gambar 2.12 Struktur navigasi hirarki<br />

15


3. Struktur Non Linier<br />

Struktur ini merupakan perpanjangan dari struktur navigasi linier, namun<br />

pada struktur ini diperkenankan adanya percabangan hanya saja<br />

percabangan ini tidak sama dengan struktur hirarki. Pada struktur non<br />

linier semua kedudukan pose sama.<br />

Gambar 2.13 Struktur navigasi non linier<br />

4. Struktur Composite (Campuran)<br />

Struktur ini mempunyai gabungan dari ketiga struktur sebelumnya, jika<br />

suatu topik membutuhkan percabangan maka dapat dibuat percabangannya.<br />

Gambar 2.14 Struktur navigasi composite<br />

16

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!