Bab III PEMBAHASAN PEMBUATAN WEBSITE

Bab III PEMBAHASAN PEMBUATAN WEBSITE.

Pada bab ini dibahas bagaimana merancang dan membangun sebuah website PT.DIAMOND ICE CREAM. Dalam pembuatan website ini lebih banyak bekerja dengan menggunakan aplikasi Macromedia Dreamweaver MX ditambah aplikasi lain berfungsi sebagai pendukung seperti Macromedia Flash MX dan adobe photosop7.0. Macromedia Dreamwaver MX merupakan program apliksi generator HTML yang didalamnya terdapat fasilitas yang memudahkan dalam membangun atau membuat sebuah halaman web.dalam pembahasan ini akan dibagi menjadi beberapa bagian. Bagian petama akan menjelaskan tentang dasar pembuatan halaman web serta tekhnik dalam menyisipkan teks, gambar maupun animasi dan membuat tombol, kedua menjelaskan struktur navigasi dari website, dan ketiga menjelaskan proses dari halaman web.

3.1

Proses Halaman Web Setelah semua persiapan awal untuk membuat website telah dilaksanakan

dengan baik, maka berarti telah siap untuk memulai dan membuat sebuah website PT.DIAMOND ICE CREAM dengan software web desain Macromedia Media Dreamweaver MX. Berikut cara-cara sederhana yang dapat dilakukan untuk membuat website ini:

3.1.1 .Membuat Folder PT.DIAMOND ICE CREAM Langakah-langkah yang biasa diikuti untuk membuat site baru adalah sebagai berikut : 1. Bukalah Windows Explorer. Maksudnya adalah untuk membuat folder baru yang dijadikan Root Folder. 2.Masukkan ke drive C:\harddisk

24 3. Tekan Menu File>New>Folder 4. Kemudian namailah folder ini dengan nama ICE CREAM, sehingga memiliki folder baru yang berlokasi di C:\ICE CREAM. Di bawah ini folder ini data-data akan tersimpan.

3.1.2. Membuat Root Folder Ada beberapa langkah yang harus dilakukan untuk menciptakan Root Folder dengan Macromedia Dreamweaver MX, dibawah ini adalah langkahlangkah untuk membuat Root Folder, yaitu: 1. Jalankan Macromedia Dreamweaver MX 2. Tekanlah Menu Site dan pilih New Site 3. Muncul kotak dialog site definition. Di bagian atas jendela itu tersaji dua pilihan. Basic dan advanced, pilihlah advanced dalam keadaan terpilih. 4. Pada Text_Box Site Name tulislah “PT.DIAMOND ICE CREAM”

5. Pada Text_Box Local Root Folder tulislah folder C:\ICE CREAM\ atau klik icon untuk mencari folder 6. Aktifkan pilihan

yang telah dibuat. dengan cara mengklik check

box yang ada. 7. Dibagian HTTP address, masukkan alamat Website

8. Klik pilihan 9. Tekan tombol

25

Gambar 3.1 Site Definition Dibagian kanan Dreamweaver MX terdapat situs baru yang sudah kita buat tadi dalam sebuah jendela files disini, kita bisa melakukan beragam hal seperti mendeteksi semua file, menghapus file, dan lainnya.

Gambar 3.2.Jendela Files

26 3.1.3

Membuat Halaman Baru Pembuatan dokumen baru dapat dibuat melalui kotak dialog New

Document. Adapun caranya adalah sebagai berikut: 1.

Klik menu file > New sehingga muncul kotak dialog New Document

2.

Pada kotak dialog tersebut, pilihlah General

3.

Pada kolom Subsistem Basic page, pilhlah HTML

4.

Setelah itu klik Create

Gambar 3.3 Kotak Dialog New Document (HTML)

3.1.4

Memberi Nama Dokument Website Untuk memberi nama document adalah sebagai berikut :

1. Pilihlah Menu Modify > Page Properties, maka akan mucul kotak dialog page Propertiies 2. Pada Text_box, tulislah nama document yang diinginkan 3. Klik OK

27

Gambar 3.4 Page Properties 3.2

Menulis Teks Menulis teks diatas sebuah website tidaklah jauh beda dengan penulis teks

diatas Word. Processor semacam Ms.Word, memang pemrogrman website tidak menunjang beberapa kemampuan yang bisa dilakukan Ms.Word. Saat berada di Macromedia Dreamweaver MX, saat itu pula sudah diperoleh untuk menuangkan teks diatasnya. Selama menggunakan teks untuk menulis kalimat diatas sebuah halaman website akan ditemani oleh Property Inspector Text. Diatas Property Inspector inilah menemukam fasilitas-fasilitas penulisan teks untulk website.

Gambar 3.5 Property Inspector Text

28 3.2.1

Baris Baru Dan Paragraph Baru Saat ingin mengetik teks dan ingin memulai baris baru yang terletak

dibawah teks pertama, ada dua hal yang perlu diperhatikan. Pertama, teks diketik sebagai baris baru dan kedua, teks diketik sebagai paragraph baru. Untuk memulai baris baru ataupun pindah dari baris yang satu kebaris yang baru caranya hanyalah Shift + Enter, maka pengetikan akan dimulai baris yang baru. Pada Code Inspector, amatilah bahwa tercipta sebuah tag untuk menandai baris baru yaitu tag
. Sedangkan untuk memulai paragraph baru hanya menekan tombol Enter saja, maka pengetikkan akan dimulai pada paragraph baru. Kursor akan berda dibaris pertama dengan jarak spasi yang lebih besar. Pada Code Inspector akan tercipta sebuah tag untuk menandai paragraph naru yaitu tag
.

3.2.2 Menggunakan Perantara Alinea 1. Rata tengah (Centre) Ada tiga cara untuk menggunakan rata tengah ini, yaitu : a. Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Centre c. Tekanlah tombol Ctrl + Alt + Shift + C Pada Code Inspector akan tampil tag HTML untuk rata tengah ini Yaitu
2. Rata kiri (Align Left) Ada tiga cara untuk menggunakan rata kiri, yaitu : a. Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Left c. Tekanlah tombol Ctrl + Alt + Shift + L Pada Code Inspector akan tampil tag HTML untuk rata tengah ini Yaitu < p align = “Left”). 3. Rata Kanan (Align Right)

29 Ada tiga cara untuk menggunakan rata kanan, yaitu : Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Right c. Tekanlah tombol Ctrl + Alt + Shift + R Pada Code Inspector akan tampil tag HTML untuk rata kanan ini yaitu < P align = “Right”>. 4. Rata Kanan-Kiri (Justify) Ada tiga cara untuk menggunakan rata kiri, yaitu : a. Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Justify Tekanlah tombol Ctrl +Alt + Shift + J Pada Code Inspector akan tampil tag HTML untuk rata kanan-kiri ini yaitu

3.2.3

Memformat Paragraph Untuk memformat bentuk dari sebuah paragraph, maka gunakan salah satu

cara sebagai berikut : 1. Pada Property Inspector Text drop down

Yang isinya antara lain

, pilihlah salah satunya.

2. Pilihlah menu Text > Paragraph Format. Disitu dicantum segala pilihanpilihan untuk memformat suatu paragraph.

3.2.4

Memilih Font Untuk memilih font gunakanlah :

a. Pada Property Inspector Text, drop down font

yang akan digunakan.

pilihlah jenis

30 b. Pilihlah menu Text > Font< lalu pilihlah jenis font yang digunakan untuk mengatur ukuran font, caranya adalah : 1. Pada Property Inspector Text, drop down pilihlah ukuran font yang akan dipakai. Ukuran sizenya adalah

2. Pilihlah menu Text > Size, kemudian pilihlah ukuran text yang diingainkan.

3.2.5

Membuat Text Didalam membuat text untuk website supaya menarik, hurufnya yang

diberi warna. Caranya adalah : a. Pada Property Inspector Text, pilihlah icon Text Color

yang

berisi jenis warna yang dapat dipilih. b. Pilihlah menu Text > Color, kemudian pilihlah warna text yang diingainkan.

3.2.6

Menyimpan Dokumen Untuk menyimpan dokunen yang telah dibuat, maka lakukan langkah-

langkah berikut ini :

31 A. Pada menu File > Save< sehingga muncul kotak dialog save

Gambar 3.6 Menyimpan dokumen B. Pada kotak save in, pilihlah folder tempat file akan disimpan C. Pada kotak file name, berikan nama file D. Klik Save untuk menyimpan dokumen.

3.3

Menyimpan gambar (Image) Langkah-langkah untuk menyisipkan gambar adalah :

a. Pilihlah menu Insert > Image atau klik tombol tab Common yang dapat anda temukan disisi atas Macromedia Dreamweaver MX, kemudian kliklah icon sehingga muncul kotak dialog Select Image Source.

,

32

Gambar 3.7 Select Image Source b. Carilah gambar yang ingin anda sisipkan c. Klik Ok. Page kode HTML terdapat perubahan ketika menyisipka gambar yaitu Sejalan masuknya gambar kedalam halaman Web, maka akan dijumpai pula Property Inspector Image.

Gambar 3.8 Property Inspecror Image 3.4

Menggunakan Link Tujuan dibuatnya link adalah agar semua halaman Web saling berkaitan

satu sama lain, maka akan tercipta suatu jaringan didalam Website.

3.4.1

Membuat Link Pada Text

Langkah-langkah membuat link pada text adalah : a. Tulislah text yang ingin anda beri link b. Bloklah text yang ingin anda beri link

33 c. Kemudian alihkan pandangan pada jendela Properties tepatnya pada kotak link d. Kliklah pada icon Browser for file

yang ada disebelah kanan kotak link

tersebut sampai masuk ke jendela select file.

Gambar 3.9 Select File (Link)

3.4.2

Membuat Link Pada Gambar Caranya sama dengan membuat link pada text, perbedaanya hanya pada

membuat link pada text, textnya yang diblok. Maka pada pembuatan link pada gambar, gambarnyalah icon bloknya saja. Jika yang diblok.

3.5

Menyisipkan animasi (Flash) Langkah-langkah untuk menyisipkan animasi flash adalah :

a. Pilihlah menu Insert > Media > Flash atau klik tombol Tab Common atau Media yang dapat anda temukan disisi atas Macromedia Flash MX, kemudian kliklah icon

, sehingga muncul kotak dialog select file.

34

Gambar 3.10 Select File (Flash)

c. Carilah animasi flash yang ingin anda flash yang ingin anda sisipkan. d. Klik Ok. Pada kode HTML terdapat perubahan ketika menyisipkan animasi flash yaitu sejalan masuknya animasi flash kedalam halaman web, maka akan dijumpai pula Property Inspector Flash.

Gambar 3.11 Property Inspector Flash

35 3.6

Membuat Interactive Images Salah penggunaan model interaktif yang sangat bermanfaat adalah pembuatan tombol, karena dengan tombol kita dapat melakukan hubungan interaksi yang baik antara user (pemakai) dengan web yang disajikan. Penulis akan menjelaskan bagaimana membuat tombol dalam halaman website.

3.6.1

Membuat Tombol Gambar (Rollover Image) Langkah-langkah untuk menyisipkan Rollover Image adalah :

a. Pilih menu Insert > Interactive Images > Rollover Image atau klik Tab Common yang dapat anda temukan disisi atas Macromedia Dreamweaver MX, kemudian kliklah icon

sehingga muncul kotak dialog.

Gambar 3.12 Insert Rollover image b. Pada kotak dialog tersebut anda dapat melihat beberapa para meter, yaitu : 1. Image Name, digunakan untuk memberikan nama pada imege. 2. Original Image, digunakan untuk menentukan image yang akan ditampilkan terlebih dahulu, Gunakan tombol browser untuk mencari file. 3. Rollover Image, digunakan untuk menentukan image yang ditampilkan pada saat mouse berada apda image tersebut. 4. Preload Rollover Image, digunakan untuk mengambil image yang akan digunakan pada rollover image pada waktu halaman di loading. 5. Alternative Text, digunakan untuk menampilkan teks yang anda masukkan pada saat image tidak ditampilkan.

36 6. When Clikeed, Go To URL, digunakan untuk menentukan halaman yang akan ditampilkan pada saat anda menekan rollover tersebut. Gunakan tombol Browser untuk mencari file yang anda gunakan. c. Klik Ok Pada kode HTML terdapat perubahan ketika menyisipkan Rollover Inage yaitu :
src=”

“

name=” “

width=””height=””border=””>. Sejalan dengan masuknya Rollover Image kedalam halaman web, maka akan dijumpai pula Property Inspector Rollover Image.

Gambar 3.13 Property Inspector Rollover Image

3.6.2

Membuat tombol flash (Flash Button) Langkah-langkah untuk membuat tombol flash adalah :

a. Pilih menu Insert > Interactive Image > Flash Button atu klik tab Media yang anda temukan disisi Macromedia. DreamweaverMX, kemudian kliklah icon

, sehingga muncul kotak dialog.

37 Insert Flash Button.

Gambar 3.14 Insert Flash Button b. Pada kotak dialog tersebut anda dapat melihat beberapa parameter, yaitu : 1. Sample, digunakan untuk melihat model dari type tombol. 2. Style, digunakan untuk memilih model dari tombol . 3. Button Text, digunakan untuk membuat teks tombo.l 4. Font and Size, digunakan untuk memilih type teks da.n ukuran teks.. 5. Link, digunakan untuk memilih halaman yang akan ditampilkan. 6. Background Color, digunakan untuk menentukan warna latar belakang 7. Save As, untuk menyimpan file animasiyang akan berbentuk. C.Klik OK

.

38 Pada model HTML, terdapat perubahan ketika menyisipkan tombol Flash yaitu :

Sejalan masuknya tombol flash kedalam halaman web, maka akan dijumpai pula Property Inspector Flash Button.

Gambar 3.15 Property Inspector Flash Button 3.7

membuat list atau menu

Langkah-langkah untuk membuat list /menu adalah sebagai berikut : a. pilih menu Insert>form objects>list/menu atau klik tab forms yang dapat anda temukan disisi atas Macromedia Dreamwaeaver MX, kemudian kliklah icon sehingga muncul

b. Untuk mengisi nilai dari list tersebut. Anda dapat menggunakan Property Inspector List

39

Gambar 3.16 Property Inspector List/Menu c. Untuk membuat linknya anda dapat menngunakan

memilih menu

Windows>Behavior atau klik tab behaviors yang ada dipojok kanan atas, pilih icon

>jump menu

d. Anda dapat membuat link, sesuai dengan keinginan anda. e. Klik ok

Gambar 3.17 Jump Menu

Pada kode HTML terdapat perubahan ketika menyisipkan tombol flash yaitu: <select name=””on Change =”MM_jump menu (‘parents’,this’0); MM_jump Menu(‘parent’this,0)”>

40

3.8 Struktur Navigasi Pada pembuatan website PT. Diamond Icecream ini, mempergunakan struktur Navigasi Hybrid atau campuran. Karena pada website ini terdapat percabangan yang tidak berurutan atau acak. Adapun gambarnya adalah : MENU UTAMA

HOME

PRODUK

PEMESANAN

PROFIL

ADMIN CARI PEMESANAN

HAPUS PEMESANAN

Gambar 3.18 Struktur Navigasi Hybrid .

3.9 Perancangan Program Adapun perancangan program yang penulis buat dapat dilihat dibawah ini : 3.9.1

Rancangan Halaman Utama Didalam perancangan ini dibagi menjadi 4 bagian :

1. Home

41 2. Daftar Produk 3. Pemesanan 4. Profil Image 1

Link 1

Image 2

Link 2 Link 3 Link 4 User ID Password

ok

Anda pengunjung ke

Gambar 3.19 Rancangan Home

Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Logo PT. Diamond beserta teks yang bertuliskan SELAMAT DATANG DI WEB PT. DIAMOND ICE CREAM

42 Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks yang menunjukkan pada tampilan pemesanan Link 4 : teks yang menunjukkan pada tampilan profil 3.9.2

Rancangan menu Daftar Produk Pada menu daftar produk ini berfungsi menampilkan informasi Daftar

Produk beserta daftar harga (PT. Diamond IceCream).

Image 1

Link 1 Link 2 Link 3

Image 2

Link 4 Gambar 3.20 Ranacangan halaman daftar produk

Keterangan

Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Berupa gambar dari produk PT. Diamond Icecream beserta keterangan dan harga Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks yang menunjukkan pada tampilan pemesanan

43 Link 4 teks yang menunjukkan pada tampilan profil

3.9.3

Rancangan menu Pemesanan Pada menu pemesanan ini bagi konsumen yang ingin memesan produk

PT. Diamond Icecream lewat internet Image 1

Link 1

Nama

Link 2

Alamat

Link 3 Link 4

Nama Barang

optionlist

Jumlah Pesan

Batal

Gambar 3.21 Rancangan halaman pemesanan

Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Berupa teks beris nama, alamat, nama barang, jumlah barang bagi konsumen yang ingin melakukan pemesanan Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks l yang menunjukkan pada tampilan pemesanan Link 4 teks yang menunjukkan pada tampilan profil 3.9.4

Rancangan menu Profil Pada menu Profil bagi konsumen yang ingn mengetahui tentang PT.

Diamond Icecream dan juga pendiri dari PT. Diamond Icecream

44

Image 1

Link 1

Image 2


Gambar 3.22 Rancangan profil Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Berupa gambar dan teks yang berisikan tentang profil PT. Diamond Icecream Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks l yang menunjukkan pada tampilan pemesanan Link 4 teks yang menunjukkan pada tampilan profil 3.9.5

Rancangan Administrator

45 Pada Rancangan ini bagi administrator untuk login pada menu admin. Image 1

Link 1

Image 2

Link 2 Link 3 Link 4 User ID Password

ok

Gambar 3.23 Rancangan Administrator Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Berupa Logo PT. Diamond beserta teks yang bertuliskan SELAMAT DATANG DI WEB PT. DIAMOND ICE CREAM Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks l yang menunjukkan pada tampilan pemesanan Link 4 teks yang menunjukkan pada tampilan profil

3.9.6

Rancangan Menu Admin Pada menu admin berfungsi apabila administrator ingin membuka halaman

nama konsumen

46

Image 1

Link 1

Image 2

Link 2 Link 3

Link 4 User ID Password

Gambar 3.23 Menu Admin OK


Gambar 3.24 Rancangan menu admin Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Logo PT. Diamond beserta teks yang bertuliskan SELAMAT DATANG DI WEB PT. DIAMOND ICE CREAM Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk

47 Link 3 : teks yang menunjukkan pada tampilan pemesanan Link 4 : teks yang menunjukkan pada tampilan profil Link 5 : teks yang menunjukkan pada perintah reset counter Link 6 : teks yang menunjukkan pada perintah daftar pemesanan Link 7 : teks yang menunjukkan pada perintah logout 3.9.7 Rancangan Nama konsumen Pada menu ini administrator untuk melihat nama-nama konsumen yang melakukan pemesanan

cari Image 1

Link 1 cari


Gambar 3.25 Nama Konsumen Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Logo PT. Diamond beserta teks yang bertuliskan SELAMAT DATANG DI WEB PT. DIAMOND ICE CREAM Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks yang menunjukkan pada tampilan pemesanan Link 4 : teks yang menunjukkan pada tampilan profil

48 3.10

Pembuatan Aplikasi Pada tahap ini ini berisikan pembahasan mengenai langkah-langkah

pembuatan situs “PT.Diamond IceCream”. 3.10.1 Membuat tampilan Home

Gambar 3.26 Tampilan Halaman Home

1. Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colum, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 4. Untukmenyisipkan gambar, klik icon anda inginkan.

(image), lalu pilih gambar yang

49 5. Untuk membuat text Hyperlink yang terdiri Daftar Produk, Pemesanan dan Profil

(Hyperlink), lalu anda pilih tombol dan link yang anda inginkan.

3.10.2 Membuat tampilan Daftar Produk

Gambar 3.27 Tampilan Daftar Produk

1. Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 4. Untukmenyisipkan gambar, klik icon

(image), lalu pilih gambar yang anda

inginkan. 5. Untuk membuat text Hyperlink yang terdiri Daftar Produk, Pemesanan dan Profil

(Hyperlink), lalu anda pilih tombol dan link yang anda inginkan

50

3.10.3 Membuat Tampilan Pemesanan

Gambar 3.28 Tampilan Pemesanan

1. Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 4. Untukmenyisipkan gambar, klik icon




51 3.104 Membuat Tampilan Profil

Gambar 3.29 Tampilan Profil 1. Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 4. Untukmenyisipkan gambar, klik icon




52 3.10.5 Membuat Tampilan Administrator

Gambar 3.30 Tampilan Administrator 1Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2.Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3.Untuk Background diatur melalui page properties 4.Untukmenyisipkan gambar, klik icon


inginkan. 5.Untuk membuat text Hyperlink yang terdiri Daftar Produk, Pemesanan dan Profil


53 3.10.6 Membuat Tampilan Menu Admin

Gambar 3.31 Tampilan menu Admin

1Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2.Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3.Untuk Background diatur melalui page properties 4.Untukmenyisipkan gambar, klik icon




54 3.10.7 Membuat Tampilan nama konsumen

Gambar 3.32 Tampilan nama konsumen

1Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2.Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3.Untuk Background diatur melalui page properties 4.Untukmenyisipkan gambar, klik icon




55

Bab III PEMBAHASAN PEMBUATAN WEBSITE

Recommend Documents