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 yang telah dibuat. 6. Aktifkan pilihan 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)

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 > 29 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 pilihlah jenis font yang akan digunakan.

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 langkahlangkah berikut ini :

A. Pada menu File > Save< sehingga muncul kotak dialog save 31 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>

<option value= > </option> <option value= > </option> </select> 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

2. Daftar Produk 3. Pemesanan 4. Profil 41 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

Link 4 teks yang menunjukkan pada tampilan profil 43 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 Link 2 Link 3 Link 4 Nama Alamat Nama Barang Jumlah optionlist 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

Pada Rancangan ini bagi administrator untuk login pada menu admin. 45 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 Link 2 cari 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 (image), lalu pilih gambar yang anda inginkan.

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

3.104 Membuat Tampilan Profil 51 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

3.10.5 Membuat Tampilan Administrator 52 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

3.10.6 Membuat Tampilan Menu Admin 53 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

3.10.7 Membuat Tampilan nama konsumen 54 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