Proyek : membuat Policy editor
Nah! Setelah lelah berbasa-basi dengan file HTML, VBScript dan Windows Scripting Host, kini saatnya kita akan masuk ke menu sesungguhnya ! Kita akan belajar membuat suatu program policy editor dengan memanfaatkan gabungan dari ketiga elemen di atas.
File program yang akan dibuat, berbasis file HTML dengan sisipan VBScript. File HTML lebih banyak digunakan untuk mengendalikan tampilan. Sedangkan VBScript dipakai untuk mengendalikan masukan. Dengan masukan inilah akhirnya Windows Scripting Host diaktifkan dan digunakan untuk menulis ke registry. Rumit? Tidak kok. Cuma butuh telaten saja. Kalau pusing sedikit kan wajar, iya tho ?…
3.1. Layout
Kita akan menengok layout dari program ini. Kita akan membuat suatu menu utama dengan 9 submenu. Wouw ! Banyak ya? Dari 9 submenu ini, 6 submenu mempunyai layout yang sama. Sedangkan 3 lainnya akan mempunyai layout yang sedikit berbeda. Kita akan melihatnya secara lebih detail.
3.1.1. Layout : menu utama
Tampilan dari menu utama, akan terlihat lebih kurang seperti gambar berikut.
Gambar 3.1. : layout menu utama
Dari gambar terlihat cukup jelas ya? Pada menu utama akan terdapat beberapa menu pilihan yang berguna untuk mengakses submenu. Seperti submenu Desktop, Menu, Active Desktop, Internet Explorer dan lain sebagainya. Pada menu utama ini dilengkapi dengan logo utama, bullet (lingkaran kecil) aksesori, Keterangan program, kedua bagian ini sekadar pemanis dan sarana promosi saja. Juga terdapat petunjuk singkat pemakaian program. Satu garis pemisah pun kita buat untuk memberi batas antar menu.
Perhatikan gambar 3.1. untuk posisi bagian-bagian ini. Cukup jelas kok.
3.1.2. Layout submenu manipulasi untuk 6 submenu :
Tampilan dari layout submenu untuk 6 submenu, adalah sebagai berikut :
Gambar 3.2.: layout submenu 1
Seperti telah disinggung di muka, kita akan memakai 6 buah submenu dengan layout yang sama. Yaitu submenu : Desktop, Active Desktop, Internet Explorer, Windows Explorer, Control panel, dan System. Pada kesempatan ini saya hanya mengambil satu contoh saja, yaitu submenu Desktop. Pada submenu ini terdapat beberapa bagian yang membentuknya sebagai berikut :
• Keterangan program : bagian ini digunakan untuk mengingatkan program apa yang sedang kita pakai.
• Logo Animasi : Selain mempercantik tampilan, bagian ini juga berfungsi sebagai link ke submenu ringkasan.
• Bullet aksesori dan logo utama : bagian ini digunakan sekadar pemanis saja. Eh… promosi ding…?
• Link ke menu utama. : bagian ini digunakan untuk kembali ke menu utama program.
• Teks keterangan submenu : dipakai untuk mengingatkan kita sedang memanipulasi bagian apa.
• Checkbox : akan terdapat beberapa checkbox (kotak periksa) yang dapat diklik.
• Keterangan submenu : mengingatkan kita akan manipulasi apa yang sedang kita lakukan.
• Petunjuk pemakaian : digunakan memberikan keterangan ringkas bagaimana memakai program.
• Garis pemisah : dipakai untuk memisahkan submenu satu dengan lainnya.
3.1.3. Layout submenu 2 :
Tampilan lain dari layout submenu adalah sebagai berikut :
Gambar 3.3. : layout submenu 2
Pada submenu ini terdapat beberapa bagian yang membentuknya sebagai berikut :
• Logo Animasi : Selain mempercantik tampilan, bagian ini juga berfungsi sebagai link ke submenu ringkasan.
• Bullet aksesori dan logo utama : bagian ini digunakan sekadar pemanis saja.
• Link ke menu utama. : digunakan untuk kembali ke menu utama program.
• Teks keterangan submenu : dipakai untuk mengingatkan kita sedang memanipulasi bagian apa.
• Keterangan submenu : mengingatkan kita akan manipulasi apa yang sedang kita kerjakan.
• Petunjuk pemakaian : digunakan untuk memberikan keterangan ringkasan bagaimana memakai program.
• Garis pemisah : dipakai untuk memisahkan submenu satu dengan lainnya.
• Kotak isian data : digunakan untuk menampung data yang akan diketikkan.
• Checkbox : digunakan untuk mengaktifkan apa yang kita tulis pada kotak isian.
3.1.4. Layout submenu 3
Tampilan lain dari submenu adalah sebagai berikut :
Gambar 3.4. : layout submenu 3
Pada submenu ini terdapat beberapa bagian yang membentuknya sebagai berikut :
• Logo Animasi : Mempercantik tampilan saja.
• Bullet aksesori dan logo kecil : bagian ini digunakan untuk memeriahkan tampilan.
• Link ke submenu : digunakan untuk mengakses kembali submenu tertentu. Akan terdapat beberapa link, sebanyak submenu yang ada.
• Link ke menu utama. : bagian ini digunakan untuk kembali ke menu utama program.
• Garis pemisah : dipakai untuk memisahkan submenu satu dengan lainnya.
• Kotak data : digunakan untuk menampilkan manipulasi apa yang telah kita pilih.
3.1.5. Layout submenu 4
Tampilan lain dari submenu adalah :
Gambar 3.5. : layout suubmenu 4
Pada submenu ini terdapat beberapa bagian yang membentuknya sebagai berikut :
• Logo Animasi : Dipakai untuk memperindah tampilan.
• Bullet aksesori dan logo utama : bagian ini juga digunakan untuk memeriahkan tampilan.
• Link ke menu utama. : bagian ini digunakan untuk kembali ke menu utama program.
• Teks keterangan bantuan singkat : dipakai untuk memberikan info pada pemakai, bagaimana memakai program..
• Keterangan submenu : mengingatkan kita akan manipulasi apa yang sedang kita lakukan.
• Garis pemisah : dipakai untuk memisahkan submenu satu dengan lainnya.
3.2. Bagaimana program CSPE bekerja ?
Setelah mendesain layout tampilan program. Kini saatnya untuk memahami bagaimana program CSPE bekerja. Coba kita amati gambar 3.6..
Gambar 3.6. : cara kerja global program CSPE
Dari gambar tersebut, dapat ditarik kesimpulan :
Program CSPE mempunyai suatu menu utama dengan pilihan yang dapat mengakses ke semua submenu.
Pada submenu kita dapat mengaktifkan pilihan manipulasi dengan mengklik kotak tanda periksa. Pada saat ini, jika ingin kembali ke menu utama dapat dilakukan dengan mengklik pilihan kembali ke menu utama. Atau jika kita ingin, memastikan apa yang telah kita pilih, kita dapat mengklik logo animasi, sehingga kendali akan dipindahkan ke submenu Ringkasan..
Pada submenu Ringkasan kita dapat melihat seluruh pilihan yang telah kita aktifkan. Disini kita dapat langsung kembali ke menu utama. Atau kembali ke submenu tertentu dengan mengklik nama submenu yang terlihat pada awal ringkasan.
Submenu Tolong! dapat di akses dari menu utama. Dan dari submenu Tolong! dapat kembali ke menu utama.
Jika Sampeyan bingung dengan keterangan ini, perhatikan layout gambar !
3.3. Menyiapkan gambar
Dalam program CSPE kita akan membutuhkan beberapa gambar pemanis program. Tujuannya agar program tambah manis dan enak untuk dipandang. Itu saja ! Pada prakteknya nanti, tentu saja, Anda boleh menggantinya dengan sembarang gambar sesuai selera. Berikut ini adalah nama-nama filenya dan kegunaannya. Sehingga pada praktek dan pengembanngannya nanti Anda dapat dengan mudah menggantinya dengan sembarang gambar. Ingat ini program CopyLeft lho….:) sudah seharusnya Anda bebas berkreasi dan memodifikasinya sesuai kebutuhan dan selera Anda. Untuk saya cukup dikirimin doa aja…oke ?
Kegunaan nama file
==================================================
background = st.gif
logo utama = image2.jpg
garis = line.gif
bullet aksesori = b_lis0011.gif
logo animasi desktop = button.gif
logo animasi menu program = but8.gif
logo animasi active desktop = spot9.gif
logo animasi Internet Explorer = button2.gif
logo animasi Windows Explorer = button11.gif
logo animasi control panel = button10.gif
logo animasi system = but2.gif
logo animasi lain-lain = spot5.gif
logo animasi net meeting = spot16.gif
logo animasi ringkasan = hotdisk.gif
logo animasi tolong! = 1peek.gif dan button12.gif
logo animasi menu utama = spot4.gif
=================================================
3.4. Mengetikkan program
Ini dia langkah yang membosankan… hehehe ..? Moga-moga saja sifat males Sampeyan terpenuhi, jika buku ini jadi disertai disk. Rencananya sih begitu. Jika memang disertai disk, bersyukurlah karena Anda cukup memodifikasi atau mengembangkannya saja. Moga-moga rayuan saya berhasil. Sehingga Bu Elizabeth atau Pak Ari atau Pak Vincent ( editor saya !) menyetujui disertainya disket pada buku ini.
Untuk mengetikkan program, kita tidak membutuhkan suatu teks editor yang ampuh. Namun hanya dengan program notepad kelihatannya tidak akan mampu, karena panjangnya program yang akan kita buat. Oleh karena itu, saya sarankan memakai wordpad saja. Hanya saja, jika memakai wordpad, saat menyimpan file hasil ketikkan kita simpan dengan format jenis text document. Tentu saja kita dapat memakai program teks editor lainnya seperti : Ultra Edit., Qedit, dll.
Oke! sekarang kita buat file tersebut. Klik Start dan aktifkan pilihan Run…
Gambar 3.7. : mengaktifkan Run…
Setelah kotak Run… tampil, ketikkan wordpad dan tekan Enter. Atau klik tombol Ok. Dengan cara ini, maka program wordpad akan aktif.
Gambar 3.8. : mengaktifkan wordpad
Anggap saja, kita telah berhasil menghidupkan wordpad. Langkah selanjutnya yang dapat kita tempuh adalah mengetikkan listing program yag ada. Senyum dong… saya tahu itu membosankan. Tapi harus bagaimana lagi? Listing yang harus Anda ketik ada pada bagian akhir dari bab ini. Tenang saja…
Gambar 3.9.: mengetikkan listing program
Anggap saja seluruh listing program telah berhasil kita ketik. Maka saatnya menyimpan data. Klik File dan pilh Save As.
Gambar 3.10.: menyimpan file
Kotak Save As akan tampil. Kita ketikkan nama filenya dengan nama : CSPE.HTM. Ingat ! jangan lupa untuk memberi nama dengan ekstension HTM. Dengan ekstension ini, maka file akan dianggap file tersebut adalah file HTML. Sebelum histeris menekan tombol Enter, ada yang harus kita ubah lagi, yaitu pada bagian Save As type. Kita pilih Text Document. Jika kedua hal tersebut sudah dilakukan, maka klik Save. File akan disimpan.
Gambar 3.11. : menyimpan dengan nama CSPE.HTM dengan format text document
Sebelum melakukan penyimpanan, wordpad akan meminta konfirmasi akan keseriusan kita dalam menyimpan. Karena dengan menyimpan dalam format teks, maka seluruh formating text yang ada akan hilang. Diwakili dengan tampilnya jendela pesan : You are about to save document ini Text-Only Format…bla… bla… (sekali-kali tidak diterjemahkan .. tidak apa-apa ya?)
Klik saja Yes, maka proses penyimpanan akan segera berlangsung. Selesai !
Gambar 3.12. : pesan konfirmasi penyimpanan
3.5. LISTING PROGRAM CSPE
Berikut ini adalah listing program CSPE, yang harus diketikkan. Lumayan panjang dan mungkin terlihat ruwet ya? Yang penting ketik aja…oke?
================================
NOTE : karena kesulitan teknis pemasangan data yang banyak mengandung perintah HTML, maka saya kesulitan menampilkan listing program. Listing dapat dilihat langsung di file program atau file PDF -nya ya ?
================================
Saya tahu mengetik listing program ini akan melelahkan dan membosankan. Siapkan mental, tenaga, waktu dan kesabaran Anda . Oleh karena saya telah mengalami “penderitaan” tersebut, biar impas, kini giliran Sampeyan, maka… saya cuma bisa berpesan : Happy typing…
Tidak ada komentar:
Posting Komentar