Bab III PEMBAHASAN PEMBUATAN WEBSITE. Pada bab ini

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<br>.
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<p>.
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 <p align = “Center”>
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 <P align = “Justify”>
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 <img src
= “Nama File”Widht = “”Height””>
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
<object classid=””codebese””width=””height=”0”>
<param name=””value=””>
<param name=””value=””>
<enbed sre=” “ quality=” “ pluginspage=” “ width=” “ height=”
“></embed>
</object>
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 :
<a href=”MM_swapImage(“,”,’,1)”><img
src=”
“
name=” “
width=””height=””border=””></a>.
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 :
<object classid=”codebase=”width=””height=””>
<param name=””value=”.”>
<param name=””value=””>
<parama name=value=>
<embed src=””width=””height=””quality=pluginspage=””
type=””bg color=””base=”.”></embed>
</object>
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)”>
<option selected > </option>
40
<option value=”” > </option>
<option value=”” > </option>
</select>
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
Link 2
Link 3
Link 4
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
Link 5
Link 6
Link 7
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
Link 2
Link 3
Link 4
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
(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
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
(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
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
(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
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
(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
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
(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
55