Kata Pengantar Teriring syukur tak terhingga pada Tuhan Yang Maha Esa, buku ini berhasil terselesaikan. Buku ini dimaksudkan untuk para pengembang (developers) program aplikasi, programmer, dan pihak umum yang ingin mencoba membuat file Help. Hal-hal yang dibahas dalam buku ini diantaranya:  Membuat file Help (*.hlp) menggunakan Help Workshop  Menghubungkan file (*.hlp) dengan program aplikasi yang dibuat oleh Ms. Visual Basic 6.0.  Membuat file HTML Help (*.chm) Mohon maaf bila pembahasan dalam buku ini terlalu singkat dan tidak begitu kompleks, karena penulis menyadari kemampuan penulis yang juga masih taraf mencoba dalam membuat file help ini. Akhirnya, penulis mohon maaf bila dalam setiap penyampaian ada yang tidak berkenan di hati pembaca. Tidak ada hasil yang sempurna selama itu masih buatan manusia. Cirebon, Juni 2006 Penulis Membuat File Help – Agung Novian, S.Kom

1

BAB I FILE HELP, DAN APLIKASI YANG DIPERLUKAN 1.1. File Help dengan Help Workhsop Adalah pasti kita jumpai dalam setiap programprogram aplikasi yaitu suatu fasilitas yang sengaja digunakan untuk membantu pemakai (user) program-program aplikasi bila menemukan kesulitan atau masalah lain dalam penggunaan suatu program aplikasi. Fasilitas ini disebut Help. Help sendiri merupakan rangkaian dari beberapa file yang terorganisir dan dibangun sedemikian rupa sehingga bisa saling terhubung dan terangkai. Salah satu ekstensi file help adalah (*.hlp). File inilah yang akan kita coba pelajari pada pembahasan ini. Tak lengkap rasanya sebuah program aplikasi tanpa disertai fasilitas Help. Oleh karenanya Membuat File Help – Agung Novian, S.Kom

2

sangatlah perlu seorang pengembang program aplikasi memikirkan perlu adanya fasilitas Help dalam program aplikasi yang dikembangkannya. Hampir semua program-program aplikasi menyertakan file help. Bisa Anda buktikan ketika Anda menjalankan sebuah program aplikasi, tekanlah tombol F1 pada keyboard, selang tak berapa lama akan muncul sebuah jendela baru, yaitu jendela Help. Membuat sebuah file help (*.hlp) tidaklah terlalu sulit. Bahkan mudah dan menyenangkan. Untuk membuat file help, Anda memerlukan sebuah program aplikasi yaitu: “Help Workshop”. Help Workshop adalah tool tambahan yang Anda dapatkan saat menginstalasikan “Microsoft Visual Studio 6.0” atau “Microsoft Visual C++ 6.0”. Karena Help Workshop ini merupakan tool yang memang sengaja diperuntukkan bagi programmer atau developer program aplikasi basis Microsoft Visual.

1.2. Menjalankan Aplikasi Untuk menjalankan aplikasi Help Workshop, Anda lakukan langkah berikut ini: Klik tombol Membuat File Help – Agung Novian, S.Kom

3

StartAll ProgramsMicrosoft Visual Studio 6.0 Microsoft Visual Studio 6.0 ToolsHelp Workshop. Lingkungan Kerja Help Workshop, adalah seperti gambar berikut:

Gambar 1.1. Lingkungan Kerja Help Workshop.

Sebelum melangkah lebih jauh, sebaiknya Anda ketahui syarat lain untuk membuat file help (*.hlp). Yaitu, Anda memerlukan aplikasi lain untuk mengolah file utama yang digunakan dalam pembuatan file help. File tersebut adalah file Rich Text Format (*.rtf). Dan salah satu aplikasi yang dapat Anda gunakan untuk

Membuat File Help – Agung Novian, S.Kom

4

membuat atau mengolah file (*.rtf) adalah Microsoft Word. Jalankankanlah aplikasi Microsoft Word pada komputer Anda dengan cara: Klik StartAll Programs Microsoft OfficeMicrosoft Office Word 2003 (dalam buku ini saya menggunakan aplikasi Ms. Word 2003). Jangan apa-apakan dulu Ms. Word Anda! Sekarang, tampilkan jendela Windows Explorer, dengan cara: Klik Start  All Programs  Accessories  Windows Explorer. Buatlah folder baru di drive C. Namai folder tersebut dengan “Help”. Membuat folder ini dimaksudkan agar Anda lebih mudah dalam mengolah file-file yang diperlukan. Aktifkan Ms. Word, Anda ketikkan beberapa teks (terserah Anda), misalnya seperti berikut: Mencoba membuat file Help Gitu Lho… Oleh: Agung Novian C 2006 Lakukan penyimpanan dengan cara: klik menu FileSave, alamatkan penyimpanan ke alamat direktori/folder “C:\Help”. Isi “File name:” dengan: “Help1”. Ubah “Save as type:” Membuat File Help – Agung Novian, S.Kom

5

menjadi: “Rich Text Format”. Klik tombol Save.

Gambar 1.2. Menyimpan ke format (*.rtf).

1.3. Membuat awal

file

Help

Sekarang aktifkan Help Workshop! Klik menu FileNew. Pada dialog yang ditampilkan, klik “Help Project”. Klik OK, pada dialog “Project File Name” yang ditampilkan, namai “File name” dengan “Help1”. Alamatkan penyimpanan ke “C:\Help”. Klik tombol Save. Sehingga tampilan Help Workshop akan menjadi seperti gambar di bawah ini:

Membuat File Help – Agung Novian, S.Kom

6

Gambar 1.3. Help Workshop – Membuat file project baru.

Klik tombol Files… di sisi kanan IDE Help Workshop. Pada dialog yang ditampilkan, klik tombol Add… Alamatkan ke “C:\Help”, klik file “Help1” yang telah Anda buat dengan Ms. Word tadi. Klik tombol Open.

Gambar 1.4. Menentukan nama file (*rtf). Membuat File Help – Agung Novian, S.Kom

7

Klik tombol OK, untuk mendaftarkan file dan menutup dialog “Topic Files”. Kembali ke jendela Help Workshop, klik menu File Compile…, atau klik tombol Save and Compile… atau klik tombol bergambar Saat tampil dialog selanjutnya (dialog “Compile a Help File”). Tandai checkbox: “Automatically display Help file in WinHelp when done. Langkah ini dimaksudkan agar setelah mengcompile, maka file Help (*hlp) yang telah dibuat, dapat langsung ditampilkan/terlihat. Jika Anda lupa menandai checkbox ini, Anda harus menampilkan file Help secara manual. Bukalah alamat “C:\Help”, klik ganda file “Help1.hlp” (dengan ikon bergambar tanda tanya). Nah, seperti gambar di bawah inilah file Help awal yang telah berhasil di-compile.

Gambar 1.5. Tampilan jendela Help. Membuat File Help – Agung Novian, S.Kom

8

Setelah meng-compile, tutup kembali jendela Help, juga klik tombol (x) kecil pada jendela Help Workshop, untuk menutup jendela “Compilation” dan kembali ke jendela file Help Project.

Gambar 1.6. Menutup jendela Compilation.

1.4. Membuat Judul Topik Judul topik adalah teks yang ditampilkan paling atas dari halaman file help. Untuk membuat judul topik pada file Help dilakukan pada file utama (Rich Text Format/*.rtf). Aktifkan Ms. Word, tempatkan kursor ke awal naskah, tekan tombol Enter pada keyboard. Kembalikan Membuat File Help – Agung Novian, S.Kom

9

kursor ke awal naskah. Ketikkan judul topik, misal: “Pendahuluan”. Blok teks judul tersebut, klik menu FormatStyles and Formatting…. Pada Taskpane (panel paling kanan dari IDE Ms. Word) yang ditampilkan (untuk Ms. Word XP dan Mw. Word 2003), klik “Heading 3”.

Gambar 1.6. Task pane – Style and Formatting.

Bila perlu lakukan modifikasi pada style “Heading 3” ini, dengan cara: klik kanan pada list “Heading 3”, pilih menu Modify… Ubah syle font dan ukuran font sesuai selera Anda. Klik tombol “Line Spacing Double”, . Ubah warna teks dengan menekan tombol dropdown pada tombol “Font Color”, , pilih warna yang diinginkan. Tandai checkbox “Automatically Update”, agar syle “Heading 3” yang Anda modifikasi ini akan selalu digunakan Membuat File Help – Agung Novian, S.Kom

10

saat Anda memilih style “Heading 3” berikutnya. Klik tombol OK untuk menutup dialog.

Gambar 1.7. Modify Style – Mengubah style Heading 3.

Tampilan akhir naskah pada Ms. Word seperti pada ilustrasi berikut ini.

Gambar 1.8. Tampilan Naskah – Setelah modifikasi Heading 3. Membuat File Help – Agung Novian, S.Kom

11

Simpan pekerjaan Anda. Aktifkan kembali aplikasi Help Workshop. Lakukan proses compile (seperti yang telah dijelaskan di atas). Tampilan help akan tampak seperti gambar di bawah ini:

Gambar 1.9. Bagian-bagian Jendela Help

1.5. Membuat Link Topik Link Topik adalah teks yang menghubungkan pada topik-topik tertentu pada file Help. Biasanya teks ini berwarna hijau dan bergaris bawah. Aktifkan Ms. Word, buatlah dokumen baru, klik menu FileNew, atau klik tombol bergambar, atau tekan tombol Ctrl + N pada keyboard. Membuat File Help – Agung Novian, S.Kom

12

Simpan pekerjaan Anda dengan Nama “Help2” dengan file type “Rich Text Format”. Lakukan langkah penyimpanan seperti langkah yang telah dibahas di atas. Ketikkan teks seperti di bawah ini!

Selamat Datang BiodataBiodata Saya KeahlianKeahlian Saya FotoFoto Saya  Catatan: Jangan menyisipkan spasi setelah teks: “Biodata”, “Keahlian”, “Foto” yang pertama. Blok teks “Selamat Datang”, ubah style menjadi “Heading 3” dengan cara mudah, klik dropdown pada combobox “Style” (terletak di sebelah combobox “Font”). Pilih “Heading 3”.

Membuat File Help – Agung Novian, S.Kom

13

Gambar 1.10. Memilih style pada combobox Style.

Blok teks “Biodata” yang pertama, klik menu FormatFonts… Pada dialog Font, klik combobox “Underline style:”. Klik list bergambar garis ganda.

Membuat File Help – Agung Novian, S.Kom

14

Gambar 1.11. Dialog Font – Format garis bawah ganda.

Klik OK. Maka teks “Biodata” akan digarisbawahi dengan garis dua (ganda). Lakukan hal yang sama untuk teks “Keahlian”, dan “Foto”. Blok teks “Biodata” yang kedua. klik menu FormatFonts… Pada dialog Font, tandai checkbox “Hidden”.

Gambar 1.12. Dialog Font – Format Hidden

Klik OK. Teks “Biodata” yang ke dua akan menghilang (tidak tampak). Lakukan hal yang sama untuk teks “Keahlian”, dan “Foto” yang kedua.

Membuat File Help – Agung Novian, S.Kom

15

1.6. Tip: Membuat Tombol Shortcut Anda akan sering melakukan langkah-langkah seperti di atas. Oleh karenanya ada baiknya Anda lakukan tip berikut ini untuk memudahkan Anda dalam melakukan langkahlangkah tersebut. Klik menu ViewToolbarsCustomize… Pada dialog “Customize”yang ditampilkan, klik tab “Commands”, pada kotak “Category:”, klik list “Format”.

Gambar 1.13. Dialog Customize – Memilih tool baru. Membuat File Help – Agung Novian, S.Kom

16

Pada kotak “Commands”, gerakkan scrollbar (batang penggulung), hingga Anda menemukan gambar , klik list ini, tekan tombol kiri mouse, tahan, lakukan dragging (menyeret) ke atah batang toolbar dari IDE Ms. Word. Sehingga pada toolbar akan bertambah tombol baru.

Gambar 1.14. Toolbar – Menambahkan tool “Double Underline”.

Kembali ke dialog “Customize”, gerakkan kembali scrollbar, hingga Anda menemukan tombol “Hidden”. Seret tombol tersebut ke arah toolbar seperti cara di atas. Posisikan di sebelah tombol baru tadi.

Gambar 1.15. Toolbar – Menambahkan tool “Hidden”.

Membuat File Help – Agung Novian, S.Kom

17

Klik kanan tombol “Hidden” pada toolbar. Sorot menu Change Button Image. Klik gambar yang Anda inginkan. Maka tombol “Hidden” sekarang telah dilengkapi gambar ikon. Klik kanan kembali, klik menu Default Style, agar tombol “Hidden” tidak disertai teks. Klik tombol Close pada dialog “Customize”.

Gambar 1.15. Toolbar – “Hidden” setelah style diubah.

Nah sekarang, untuk memformat teks menjadi bergaris bawah dua, atau hidden, Anda tidak perlu menklik menu FormatFont… dan seterusnya, Anda cukup mengklik tombol yang telah Anda tambahkan tadi.

1.7. Membuat Help Baru Sekarang kita kembali ke pembahasan sebelumnya. Setalah Anda memformat teks-teks tadi, simpan pekerjaan Anda. Klik FileSave. Aktifkan Help Workshop. Klik menu File New… Pilih “Help Project” dan klik OK. Namai dengan Help2.

Membuat File Help – Agung Novian, S.Kom

18

Klik tombol Files… Klik tombol Add… Pilih file Help2.rtf yang telah Anda buat dengan Ms. Word tadi. Tutup jendela “Topic Files” dengan menekan tombol OK. Klik tombol Save and Compile… Tampilan file Help2 akan seperti gambar di bawah ini.

Gambar 1.16. Teks Link pada Jendela Help.

1.8. Tujuan Format Pada tampilan file Help2 di atas, teks-teks “Biodata”, “Keahlian”, dan “Foto” tampak berwarna hijau dan bergaris bawah. Efek ini dihasilkan oleh format pada file “Rich Text Format” yang Anda lakukan.

Membuat File Help – Agung Novian, S.Kom

19

Format pada file rich text format Garis bawah ganda

Hidden

Efek pada file help Teks berwarna hijau dan bergarisbawah Menentukan Nama ID (identifikasi) dari Topik yang akan dihubungkan/ dipanggil saat mengklik teks link (berwarna hijau dan bergaris-bawah)

Gerakan pointer Anda ke arah teks link, pointer akan berubah menjadi gambar telapak tangan. Klik teks tersebut. Maaf, Anda hanya akan mendapatkan pesan kesalahan, karena Anda belum membuat topik untuk link tersebut.

1.9. Membuat Topik Kembali ke aplikasi Ms. Word, pindahkan kursor ke akhir naskah (di depan teks “Foto Saya”). Tekan tombol Ctrl + Enter pada keyboard untuk membuat halaman baru. Ketikkan teks seperti di bawah ini!

Membuat File Help – Agung Novian, S.Kom

20

Biodata Nama Kelahiran Alamat 03/09

: Agung Novian : Cirebon, 9 September 1982 : Jl. P. Drajat Gg. Jepun RT. No. 48 Cirebon 45133

Pindahkan kursor ke awal naskah (sebelum teks “Biodata”), klik menu Insert  Refernce  Footnote… Ketikkan simbol “$” pada textbox “Custom mark:”. Klik combobox “Footnote”, ubah text dari “Bottom of Page” menjadi “Below text”.

Gambar 1.17. Menentukan gaya footnote.

Membuat File Help – Agung Novian, S.Kom

21

Klik tombol Insert. Maka pada akhir naskah, akan tergambar sebuah garis, dan dibawahnya sudah tertera simbol “$”. Ketikkan “Biodata” di depan simbol “$” tersebut.

Gambar 1.18. Menuliskan isi footnote (simbol “$”).

Pindahkan kursor pada awal naskah (setelah simbol “$”). Klik menu Insert  Refernce  Footnote… Kali ini. ketikkan simbol “#” pada textbox “Custom mark:”. Klik combobox “Footnote”, ubah text dari “Bottom of Page” menjadi “Below text”. Klik tombol Insert. Ketikkan juga “Biodata” di depan simbol “#” tersebut

Gambar 1.19. Menuliskan isi footnote (simbol “#”). Membuat File Help – Agung Novian, S.Kom

22

Blok baris awal naskah, dari simbol “$” sampai teks “Biodata” (teks “$#Biodata”). Ubah style menjadi “Heading 3”. Simpan pekerjaan Anda, aktifkan Help Workshop, lakukan compile. Pada dialog help yang ditampilkan, klik link Biodata, maka akan tampil dialog baru seperti gambar di bawah ini.

Gambar 1.20. Tampilan Topik “Biodata”.

Tugas Anda sekarang, buat topik-topik baru yang diperlukan, yaitu: “Keahlian”, dan “Foto”. Juga tambahkan footnote pada teks “Selamat Datang”, dengan nama ID: “Index”. Lakukan compile ulang.

Membuat File Help – Agung Novian, S.Kom

23

1.10.Menambahkan Gambar Untuk menambahkan gambar, dapat dengan mudah Anda lakukan pada file RichTextFormat melaului Ms. Word, dengan cara, klik menu InsertPictureFrom file… Cari alamat dan nama file gambar (*.jpg, *.bmp *.gif, *.wmf, dan sebagainya) menurut selera Anda.

1.11.Tujuan Simbol Simbol-simbol dalam footnote yang digunakan di atas barulah sebagian kecil simbol yang Anda gunakan untuk membuat file Help. Berikut ini penjelasan fungsi atau tujuan simbol-simbol yang telah digunakan di atas. Simbol

$

#

Fungsi

Menentukan judul topik yang nantinya akan digunakan dalam “Topics Found” (pencarian topik) pada dialog “Help Contents”. Nama ID (identifikasi) dari Topik yang sedang dikerjakan.

Membuat File Help – Agung Novian, S.Kom

24

Penjelasan mengenai simbol-simbol lain, bisa Anda temukan pada file help dari Help Workshop, klik menu HelpHelp Topics (lihat pembahasan 2.6. Refernsi Makro).

Membuat File Help – Agung Novian, S.Kom

25

BAB II MODIFIKASI TAMPILAN 2.1. Mengubah Judul (pada Titlebar) Pada Bab I, Anda sudah bisa membuat file Help. Sekarang mari kita mencoba mengubah bentuk tampilan dari jendela Help. Untuk latihan awal ini, kita akan mengubah judul (caption pada titlebar) sebuah jendela Help. Jalankan Help Workshop, klik menu File Open, buka alamat “C:\Help”, buka file “Help2.hpj”. Klik tombol Options..., akan ditampilkan dialog Options. Pada textbox “Default topic:”, ketikkan “Index”, yang menyatakan ID topic yang dijadikan default. Pada textbox “Help title:”, ketikkan “Latihan Membuat Help”. Ini adalah judul yang akan ditampilkan pada titlebar jendela Help.

Membuat File Help – Agung Novian, S.Kom

26

Gambar 2.1. Dialog Options.

Klik OK. Klik tombol “Save and Compile...” dan lihat judul yang sekarang ditampilkan pada titlebar Help Anda.

2.2. Mengubah Tampilan

Bentuk

Mengubah bentuk di sini maksudnya mengubah warna dari jendela Help yang meliputi daerah judul topik dan isi topik. Untuk mengubah tampilan ini Anda harus membuat sebuah jendela baru. Untuk membuatnya, klik tombol Windows... Pada dialog yang ditampilkan, Membuat File Help – Agung Novian, S.Kom

27

ketikkan: “main” pada textbox “Create a window named”. Klik OK, maka akan tampil dialog baru, yaitu “Window Properties”. Dialog ini memiliki 5 (lima) buah tab yaitu: “General”, “Position”, “Button”, “Color”, dan “Macros”. Pada tab “General”, ketikkan: “Latihan Membuat Help” di textbox “Title bar text:”. Klik tab “Position”, klik tombol “Auto-Sizer”, akan ditampilkan monster dari sebuah jendela Help. Lakukan dragging untuk memindahkan posisi dan mengatur lebar dan tinggi jendela tersebut. Pengaturan ini nantinya akan dijadikan sebagai nilai default dari posisi dan ukuran jendela Help saat ditampilkan. Klik tombol OK. Atau pada textbox-textbox yang disediakan, masukkan nilai-nilai sebagai berikut: Textbox Left Top Width Height

Nilai 198 197 648 599

 Catatan: Nilai di atas tidak bersifat absolut. Anda boleh menggantinya sesuai selera Anda.

Membuat File Help – Agung Novian, S.Kom

28

Klik tab “Button”. Di sini adalah tempat Anda menentukan tombol-tombol yang akan ditampilkan pada jendela Help, tandai atau hilangkan tanda pada checkbox-checkbox yang disediakan. Klik tab “Color”. Ini adalah tempat untuk Anda mengubah tampilan warna dari jendela Help, yang meliputi warna belakang daerah judul topik dan warna belakang daerah isi topik. Klik tombol Change... pilih warna yang Anda inginkan. Untuk tab terakhir, “Macros” tidak perlu kita bahas dulu. Anda bisa pelajari di bab selanjutnya. Klik tombol OK untuk menutup dialog. Simpan pekerjaan Anda dan lakukan compiling. Dialog Help Anda sekarang sudah berwarna lebih menarik. 2.3.

Tampilan Mengambang Up)

(Pop-

Anda sudah bisa membuat link, dan menampilkan suatu topik saat link tersebut Membuat File Help – Agung Novian, S.Kom

29

diklik. Ketika suatu topik ditampilkan, maka topik tersebut menimpa topik yang lama, artinya pada tampilan dialog Help topik yang dipanggil akan ditampilkan sementara topik yang memanggil (topik lama) ditutup. Pembahasan kali ini, kita akan mencoba memanggil suatu topik tanpa menutup topik yang lama, melainkan menampilkan topik baru seoalah-olah mengambang pada topik lama. Untuk langkah ini, silakan Anda buka file Rich Text Format: “Help2.rtf” dengan Ms. Word, blok teks yang bergaris bawah ganda (contoh: “Biodata”, tekan tombol Ctrl + U pada keyboard, atau tekan tombol pada toolbar Ms. Word. Lakukan untuk teks-teks bergaris bawah ganda lainnya.

Gambar 2.2. Tampilan Naskah – Mengubah gaya garisbawah. Membuat File Help – Agung Novian, S.Kom

30

Ubah style dari topik menjadi “Clear Formatting”. Ikuti langkah berikut: cari judul topik “Biodata” (teks: “$#Biodata”). Blok teks tersebut, klik combobox “Style”, pilih “Clear Formatting”. Lakukan untuk judul-judul topik lainnya (“Keahlian”, dan “Foto”).

Gambar 2.3. Mengubah format style.

 Catatan: Jika Anda tidak mengubah style dari judul topik ini, maka pada tampilan mengambang dari jendela Help hanya akan menampilkan judul dari topik saja (isi judul tidak akan ditampilkan). Lakukan Save As (klik FileSave As…) namai dengan “Help3.rtf”. Jalankan aplikasi Help Workshop, buat project Help baru (FileNew, klik “Help Project”, klik OK). Sisipkan file Membuat File Help – Agung Novian, S.Kom

31

“Help3.Rtf” (klik tombol Files…, klik Add, pilih “Help3”). Simpan project Help Anda, dan lakukan compile.

Gambar 2.4. Tampilan mengambang (pop-up).

Anda lihat link teks sekarang bergaris bawah terputus-putus, dan begitu anda mengklik link teks ini, maka akan ditampilkan sebuah topik dengan tampilan mengambang pada jendela Help utama.

2.4. Warna Tampilan Mengambang

Latar

Tampilan mengambang di atas, bisa Anda ubah warna latar dari warna defaultnya yaitu putih. Membuat File Help – Agung Novian, S.Kom

32

Anda memerlukan makro untuk hal ini. Contoh berikut ini untuk mengubah warna latar menjadi merah muda. Aktifkan Help Workshop, klik tombol Config… Pada dialog yang ditampilkan, klik tombol Add… ketikkan makro berikut ini: SetPopupColor(255,0,255)  Catatan: (255,0,0) pada makro di atas menunjukkan definisi warna dalam RGB Anda dapat mengganti angkaangka dengan batasan antara 0 sampai 255. Contoh (35,123,9), dan sebagainya. Lakukan kompilasi ulang. Sekarang ketika Anda mengklik link teks, maka warna latar tampilan mengambang (floating/popup) akan berubah warna.

2.5. Menyisipkan Tombol Anda dapat menyisipkan tombol ke dalam isi topik dari file Help Anda. Untuk menyisipkan tombol adalah dengan menggunakan fungsi (selanjutnya disebut makro (macro)). Membuat File Help – Agung Novian, S.Kom

33

Penggunaan macro bisa dilakukan mendesain dengan Help Workshop, bisa pada file Rich Text Format. Kali ini mencoba menyisipkan tombol pada file Text Format.

saat juga kita Rich

Adapun rutin makro yang digunakan yaitu: {Button, [Perintah]} Parameter Button Nama_Tombol Perintah

Nama_Tombol, Keterangan Identifikasi kontrol Teks yang ditampilkan pada tombol Perintah/Makro yang akan dijalankan

Contoh: {Button, Tutup, Exit()} Jalankan Ms. Word, buat dokumen baru, simpan dengan nama “Help4.rtf”, atau Anda buka file “Help2.rtf”, kemudian lakukan Save As, namai dengan “Help4.rtf”. Ketikkan teks-teks seperti ilustrasi di bawah ini (jika Anda membuat dokumen baru). Jika Anda Membuat File Help – Agung Novian, S.Kom

34

mengawali dengan membuka file “Help2.rtf”) cukup mengedit sebagian teks saja.

Gambar 2.5. Tampilan Naskah – Menuliskan Makro.

Tambahkan topik-topik baru pada file (*rtf) Anda. Jalankan Help Workshop, buat project baru, namai dengan “Help4”, sisipkan file (*rtf) “Help4” yang telah Anda buat dengan Ms. Word tadi (klik tombol Files…, klik tombol Add, pilih Help4). Lakukan compile (klik tombole Save and Compile).

Membuat File Help – Agung Novian, S.Kom

35

Gambar 2.6. Tampilan tombol pada jendela Help.

Ketika Anda mengklik tombol “Biodata”, “Keahlian”, atau “Foto”, maka topik dengan ID tersebut akan dipanggil dan ditampilkan. Keika Anda mengklik tombol “Notepad”, maka aplikasi “Notepad “akan dijalankan. Ketika Anda mengklik tombol “Keluar”. Dialog Help akan ditutup.

2.6. Referensi Makro Makro-makro/perintah-perintah yang digunakan pada contoh kasus di atas adalah: Makro JumpId( [NamaFile>

Keterangan Memanggil ID topik tertentu.

Membuat File Help – Agung Novian, S.Kom

suatu 36

ID_Jendla,] ID_Topik)

ExcecFile( NamaFile) Exit()

NamaFile adalah Nama dari file Help yang akan dipanggil. ID_Jendela adalah ID dari jendela (lihat pembahasan 2.2), parameter ini bersifat optional, artinya boleh disertakan boleh pula tidak, pada contoh di atas parameter ini tidak disertakan. ID_Topik adalah ID dari topik yang akan dipanggil. Memanggil suatu file tertentu. Tuliskan nama file dan alamat secara lengkap. Menutup jendela Help

Untuk melihat referensi makro yang dapat dipergunakan, Anda dapat melihatnya dengan cara: pada aplikasi Help Workshop, klik menu HelpHelp Topics, pada dialog “Help Topics” yang ditampilkan, berturut-turut, klik cabang berikut: WinHelpReferences Macro Reference, disana disediakan cabang-cabang lain berisi makro-makro yang dapat Anda Membuat File Help – Agung Novian, S.Kom

37

pergunakan. Klik ganda pada sebuah cabang untuk melihat jenis makro dan cara penggunaannya.

Gambar 2.7. Help Author’s Guid – Referensi Makro.

Membuat File Help – Agung Novian, S.Kom

38

BAB III MEMBUAT HELP CONTENT 3.1. Help Content Help content, adalah dialog help yang menampilkan isi (topik-topik) dari file help. Help content digunakan untuk mempermudah penggunaan file help, karena dialog ini menyediakan fasilitas seperti Find, untuk mempermudah pengguna mencari topik bantuan yang diinginkan. Contoh dialog help content seperti gambar berikut ini.

Gambar 3.1. Contoh Dialog Help Contents. Membuat File Help – Agung Novian, S.Kom

39

3.2. Membuat Content

Help

Untuk membuat help content, Anda harus sudah pernah membuat file help (seperti yang telah dibahas pada pembahasan sebelumnya). Untuk membuat help content, Anda hanya akan berkonsentrasi dengan aplikasi Help Workshop (Anda tidak menggunakan aplikasi pengolah file *.rtf seperti Ms. Word). Jalankan Help Workshop, klik menu File New, pilih “Help Contents”, klik OK. Untuk pembahasan kali ini, kita akan mencoba membuat help content dari file help yang telah kita buat yaitu “Help4.hlp”. Pada textbox “Default filename (and Windows):”, ketikkan “Help4.hlp”. Ini untuk menentukan nama file help default yang akan dibuatkan file content. Ketikkan judul yang akan ditampilkan pada dialog help content pada textbox “Default title”, contoh ketikkan: “Isi File Help”.

Membuat File Help – Agung Novian, S.Kom

40

Gambar 3.2. Tampilan Editor Help Contents.

Sekarang kita mulai membuat hirarki dari isi help content. Klik tombol Add Below…, klik option “Heading” ketikkan teks pada textbox “Title”, contoh: “Selamat Datang”, klik OK. Maka pada kotak (treeview) akan tergambar sebuah daftar bertuliskan “Selamat Datang”. Daftar ini dinamakan cabang (node) dan berjenis Heading, artinya sebagai kepala (pusat) dari cabang di bawahnya.

Membuat File Help – Agung Novian, S.Kom

41

Gambar 3.3. Menambahkan Heading.

Klik kembali tombol Add Below… untuk menambahkan cabang baru. Untuk menambahkan cabang baru, Anda bisa menggunakan tombol Add Below… atau Add Above… sesuai keinginan penempatan cabang baru (Add Below… berarti menambahkan cabang di bawah cabang yang terpilih, Add Above…… berarti menambahkan cabang di atas cabang yang terpilih. Cabang terpilih adalah cabang yang terfokus (biasanya diblok dengan warna abu-abu). Klik option “Topic”, untuk menentukan jenis cabang. Kemudian ketikkan teks-teks berikut pada textbox-textbox yang disediakan. Nama textbox Title

Teks masukan Halaman

Keterangan Anda bebas untuk

Membuat File Help – Agung Novian, S.Kom

42

Muka Topic ID

Index

Help file

Help4.hlp

Window type

main

mengetikkan teks masukan Sesuaikan dengan ID topik yang Anda buat pada file *.rtf Nama file Help Isikan sesuai nama tipe Window yang telah Anda buat, lihat pembahasan 2.2. Mengubah bentuk tampilan

Gambar 3.4. Menambahkan daftar Topik.

Klik tombol OK untuk menyunting masukan dan menutup dialog. Sekarang pada kotak telah bertambah cabang baru. Perhatikan bahwa posisi awal gambar lebih menjorok ke kanan, hal ini kita namakan saja dengan indentasi. Ini

Membuat File Help – Agung Novian, S.Kom

43

menunjukkan bahwa cabang baru tersebut merupakan anak dari cabang di atasnya. Untuk memposisikan indentasi agar setara dengan cabang di atasnya, Anda dapat melakukannya dengan mengklik tombol Move Left…. Move Left digunakan untuk mengurangi indentasi dari suatu cabang, artinya mendorong ke kiri posisi cabang. Lawan dari Move Left adalah Move Right. Untuk mengedit atau mengubah teks yang ditampilkan pada cabang, Anda dapat mengklik tombol Edit… atau dengan mengklik ganda pada cabang tersebut. Tetapi jika Anda ingin mengubah jenis cabang, Anda harus menghapus cabang tersebut dengan mengklik tombol Remove…. Kemudian Anda lakukan langkah menambah cabang baru. Klik kembali tombol Add Below…, Klik option “Topic”, isikan masukan berikut ini: Nama textbox Title Topic ID Help file Window type

Teks masukan Biodata Saya Biodata Help4.hlp main

Membuat File Help – Agung Novian, S.Kom

44

Klik tombol OK. Silakan Anda tambahkan cabang-cabang lain sesuai topik yang telah Anda buat pada file *rtf, seperti: “Keahlian”, “Foto”, dan sebagainya. Bila perlu, untuk mempercantik cabang terakhir Anda lakukan langkah berikut ini: Klik tombol Add Below…, klik option “Heading”, ketikkan: “Makro”. Klik OK. Klik kembali tombol Add Below…, klik option “Macro”, ketikkan: “Jalankan Notepad” pada textbox “Title:”, dan ketikkan: “ExecFile(C:\Windows\Notepad.exe)” pada textbox “Macro:”. Klik OK. Klik kembali tombol Add Below…, klik option “Macro”, ketikkan: “Tutup” pada textbox “Title:”, dan ketikkan: “Exit()” pada textbox “Macro:”. Klik OK. Tampilan akhir, mungkin akan seperti ilustrasi di bawah ini:

Membuat File Help – Agung Novian, S.Kom

45

Gambar 3.5. Tampilan daftar Content.

Simpan pekerjaan Anda (klik FileSave), dan lakukan compile (klik FileCompile…). Tampilan dialog help content yang akan Anda dapatkan seperti ilustrasi gambar di bawah ini.

Gambar 3.6. Hasil Compile Dialog Help Contents. Membuat File Help – Agung Novian, S.Kom

46

Cobalah untuk mengklik ganda cabang-cabang yang ada. Ketika suatu cabang diklik ganda, maka akan tampil jendela help yang menampilkan suatu topik, dan dialog help content akan ditutup. Untuk menampilkan kembali dialog help content, klik tombol Contents pada jendela help tersebut. Pada dialog help content, klik tab Find, Anda akan menemukan Find Setup Wizard, klik tombol Next pada wizard tersebut. Akan tampil wizard berikutnya, klik tombol Finish. Sekarang pada dialog help content sudah berisi daftar-daftar kata yang digunakan untuk mempermudah pengguna dalam mencari topik yang dibutuhkan. Cobalah mengklik sebuah daftar (list), kemudian klik tombol Display, atau klik ganda pada sebuah daftar (list).

Membuat File Help – Agung Novian, S.Kom

47

Gambar 3.6. “Find” pada dialog Help Contents.

Membuat File Help – Agung Novian, S.Kom

48

BAB IV MENGHUBUNGKAN FILE HELP DENGAN PROGRAM 4.1. Menghubungkan File Help Ketika Anda menjalankan sebuah program aplikasi, dan ketika Anda menekan tombol F1 pada keyboard, atau Anda menekan sebuah tombol bergambar tanda tanya, maka Anda akan dihadapkan pada suatu jendela atau dialog yaitu “Help”. Program akan otomatis memanggil file Help ketika Anda melakukan langkah di atas. Kali ini kita akan mencoba bagaimana menghubungkan file help dengan program aplikasi. Program aplikasi yang akan kita buat menggunakan bahasa pemograman visual, yaitu: Ms. Visual Basic.

Membuat File Help – Agung Novian, S.Kom

49

4.2. Memulai Visual Basic Jalankan Ms. Visual Basic 6.0. Anda mengerti caranya? Jika tidak, ikuti langkah ini: klik tombol StartAll ProgramsMicrosoft Visual Studio 6.0Microsoft Visual Basic 6.0. Pada dialog “New Project” yang ditampilkan, pilih atau klik ikon “VB Enterprise Edition Controls”.

Gambar 4.1. Dialog New Project – Memilih template project.

Klik tombol Open. Anda akan berhadapan dengan lingkungan kerja Ms. Visual Basic 6.0.

Membuat File Help – Agung Novian, S.Kom

50

Perhatikan daerah sebelah kanan lingkungan kerja, Anda klik ganda cabang bertuliskan: “Forms”, atau klik tanda plus (+), di sebelah kiri cabang tersebut, hingga di bawahnya akan tampak cabang baru, “Form1”. Klik ganda cabang “Form1 (Form1)” tersebut. Di daerah tengah lingkungan kerja akan muncul jendela baru, yaitu jendela “Form1”. Pada jendela inilah Anda akan bekerja.

4.3. Menyisipkan Kontrol

Objek

Alihkan perhatian Anda pada sisi kiri lingkungan kerja, di sana terdapat sebuah kotak berisi gambar-gambar ikon. Kotak tersebut dinamakan “Toolbox”. Toolbox adalah kotak yang berisikan komponen-komponen (selanjutnya disebut objek kontrol) yang akan ditempatkan ke dalam form.

Membuat File Help – Agung Novian, S.Kom

51

Gambar 4.2. Toolbar.

Klik sebuah gambar contoh gambar: (Label) gerakan pointer mouse ke daerah tengah lingkungan kerja (Form1). Klik pada Form1 tersebut, lakukan dragging (tahan tombol kiri mouse, geserkan), ke arah kanan bawah, kemudian lepas tombol kiri mouse.

Gambar 4.3. Menambahkan Label pada form.

Membuat File Help – Agung Novian, S.Kom

52

4.4. Mengubah Properti

Nilai

Klik objek kontrol Label yang telah Anda sisipkan ke form tersebut, sekarang alihkan perhatian ke sisi kanan bawah lingkungan kerja di sana terdapat sebuah kotak yang dinamakan jendela Properties. Klik list “(Name)”, klik ganda list di sisi kanannya, kemudian ketikkan “lblJudul”.

Gambar 4.4. Jendela Properties.

Langkah ini disebut dengan mengubah properti, langkah di atas artinya Anda mengubah nilai properti “Name” (dari objek kontrol Label) dengan nilai baru, “lblJudul”.

Membuat File Help – Agung Novian, S.Kom

53

Klik List “Caption”, klik ganda list di sisi kanannya, ketikkan teks yang akan ditampilkan pada objek kontrol label tersebut. Contoh: “Program Saya”.

4.5. Membuat Calculator

Aplikasi

Buatlah folder baru di drive C, namai dengan “Calc”. jalankan Visual Basic, pilih “VB Enterprise Edition Controls”. Ubah properti “Name” dari Form1 menjadi “frmCalc”. Masukkan objek kontrol Command , ubah properti “Name” menjadi: “cmdNumber”. Ubah Caption menjadi “0”, klik kanan pada Command tersebut, pilh Copy, klik kanan pada form pilih Paste, saat muncul pesan, klik tombol Yes. Langkah ini disebut mengkopi objek kontrol dan menjadikannya ber-array (memiliki index). Kopikan objek Command tersebut menjadi 10 buah. Ubah properti “Caption” sesuai dengan nomor Indexnya (klik satu per satu objek kontrol Command, lihat list “Index” pada Membuat File Help – Agung Novian, S.Kom

54

jendela properti, klik list “Caption” dan isikan teks sesuai angka yang tertera pada “Index”. Atur tata letak dan ukurannya sehingga menyerupai tombol-tombol pada kalkulator sebenarnya. Masukkan lagi sebuah objek kontrol Command, ubah properti “Name” menjadi: “cmdOperator”, kopikan menjadi 5 (lima) buah. Ubah properti “Caption” seperti pada tabel di bawah ini: Index 0 1 2 3 4

Caption / + x =

Masukkan lagi empat buah Command, ubah properti-propertinya seperti pada tabel di bawah ini: Nama Objek Command1 Command2

Properti Name Caption Name Caption

Perubahan cmdPercent % cmdDecimal .

Membuat File Help – Agung Novian, S.Kom

55

Command3 Command4

Name Caption Name Caption

cmdCancel C cmdCE CE

Masukkan sebuah Label, dan ubah propertinya, seperti pada tabel di bawah ini: Nama Objek

Properti Name Caption Alignment

Label1

BackColor Name Caption Alignment

Perubahan lblDisplay 0. 1-Right Justify Putih atau warna terang lainnya lblDisplay 0. 1-Right Justify

Atur tata letak dan ukuran semua objek kontrol, hingga diperoleh tampilan hasil akhir desain seperti pada ilustrasi gambar di bawah ini:

Membuat File Help – Agung Novian, S.Kom

56

Gambar 4.5. Desain form Calculator.

Masukkan objek kontrol CommonDialog ke dalam form, ubah properti “Name” nya menjadi “cdlHelp”. Klik menu ViewCode, Anda ketikkan kode berikut ini: 1

Option Explicit

2 3 4 5 6 7

Dim Dim Dim Dim Dim Dim

8

Private Sub _ cmdCancel_Click() On Error Resume Next

9

Operator1, Operator2 DecimalFlag As Integer NumOps As Integer AkhirMasukan JnOperator TempBaca

Membuat File Help – Agung Novian, S.Kom

57

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

lblDisplay = "0." Operator1 = 0 Operator2 = 0 Form_Load End Sub ' Private Sub cmdCE_Click() On Error Resume Next lblDisplay = "0." DecimalFlag = False AkhirMasukan = "CE" End Sub ' Private Sub _ cmdDecimal_Click() On Error Resume Next If AkhirMasukan _ = "NEG" Then lblDisplay = "-0." ElseIf AkhirMasukan <> _ "NUMS" Then lblDisplay = "0." End If DecimalFlag = True AkhirMasukan = "NUMS" End Sub ' Private Sub _ cmdNomor_Click( _ Index As Integer) On Error Resume Next If Len(lblDisplay) _ <= 17 Then

Membuat File Help – Agung Novian, S.Kom

58

34 35 36 37 38 39 40 41 42

43 44 45 46 47 48 49 50 51 52 53 54

If AkhirMasukan <> _ "NUMS" Then lblDisplay = "." DecimalFlag = False End If If DecimalFlag Then lblDisplay = _ lblDisplay + _ cmdNomor(Index).Caption Else lblDisplay = Left( _ lblDisplay, InStr( _ lblDisplay, ".") - 1) + _ cmdNomor(Index).Caption + _ "." End If If AkhirMasukan _ = "NEG" Then lblDisplay = "-" & _ lblDisplay AkhirMasukan = "NUMS" End If End Sub ' Private Sub _ cmdOperator_Click( _ Index As Integer) On Error Resume Next TempBaca = lblDisplay If AkhirMasukan _ = "NUMS" Then NumOps = NumOps + 1 End If

Membuat File Help – Agung Novian, S.Kom

59

55 56 57 58 59 60 61 62

63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

Select Case NumOps Case 0 If cmdOperator(Index) _ = "-" And AkhirMasukan _ <> "NEG" Then lblDisplay = _ "-" & lblDisplay AkhirMasukan = "NEG" End If Case 1 Operator1 = lblDisplay If cmdOperator(Index) _ = "-" And AkhirMasukan _ <> "NUMS" And _ JnOperator <> "=" Then lblDisplay = "-" AkhirMasukan = "NEG" End If Case 2 Operator2 = TempBaca Select Case JnOperator Case "+" Operator1 = Operator1 + _ Operator2 Case "-" Operator1 = Operator1 - _ Operator2 Case "X" Operator1 = Operator1 * _ Operator2 Case "/" If Operator2 = 0 Then MsgBox "Div by zero", 48, _

Membuat File Help – Agung Novian, S.Kom

60

78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

"Kalkulator" Else Operator1 = Operator1 / _ Operator2 End If Case "=" Operator1 = Operator2 Case "%" Operator1 = Operator1 * _ Operator2 End Select lblDisplay = Operator1 NumOps = 1 End Select If AkhirMasukan _ <> "NEG" Then AkhirMasukan = "OPS" JnOperator = _ cmdOperator(Index) End If End Sub Private Sub _ cmdPercent_Click() On Error Resume Next lblDisplay = _ lblDisplay / 100 AkhirMasukan = "OPS" JnOperator = "%" NumOps = NumOps + 1 DecimalFlag = True End Sub

Membuat File Help – Agung Novian, S.Kom

61

102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122

Private Sub _ Form_KeyPress( _ KeyAscii As Integer) If KeyAscii >= _ Asc("0") And _ KeyAscii <= Asc("9") Then cmdNomor_Click ( _ KeyAscii - 48) ElseIf KeyAscii _ = Asc("/") Then cmdOperator_Click (0) ElseIf KeyAscii _ = Asc("+") Then cmdOperator_Click (1) ElseIf KeyAscii _ = Asc("*") Then cmdOperator_Click (2) ElseIf KeyAscii = _ Asc("-") Then cmdOperator_Click (3) ElseIf KeyAscii = _ Asc("=") Then cmdOperator_Click (4) ElseIf KeyAscii = 13 Then cmdOperator_Click (4) ElseIf KeyAscii = _ Asc("%") Then cmdPercent_Click ElseIf KeyAscii = _ Asc(".") Then cmdDecimal_Click End If End Sub

Membuat File Help – Agung Novian, S.Kom

62

123 124 125 126 127 128 129

Private Sub Form_Load() On Error Resume Next DecimalFlag = False NumOps = 0 AkhirMasukan = "NONE" JnOperator = " " End Sub

130

Private Sub Form_KeyDown( _ KeyCode As Integer, _ Shift As Integer) On Error Resume Next If KeyCode = vbKeyF1 Then With Me.cdlHelp .HelpCommand = 3 .HelpFile = App.Path & _ "\Calc.hlp": .ShowHelp End With End If End Sub

131 132 133 134 135 136 137 138

Tambahkan sebuah Module, dengan cara: klik ProjectAdd Module, pada Module1, ketikkan kode berikut: 1

Option Explicit

2

Private Declare Function _ WinExec _ Lib "kernel32" ( _ ByVal lpCmdLine As String, _ ByVal nCmdShow As Long _

Membuat File Help – Agung Novian, S.Kom

63

) As Long 3

Private Declare Function _ mciExecute _ Lib "winmm.dll" ( _ ByVal lpstrCmd As String _ ) As Long

4 5 6 7 8 9

Public Para() Sub LihatPara() Dim a, b, Perintah$ ReDim Para(0) Perintah$ = Command If Right(App.Path, 1) <> _ "\" Then Para(0) = App.Path & "\" & _ App.EXEName Else Para(0) = App.Path & _ App.EXEName End If Perintah$ = _ Trim(Perintah) + " " Do a = InStr( _ Perintah, " ") If a <= 1 Then Exit Do b = b + 1 ReDim Preserve Para(b) Para(b) = Left( _ Perintah, a - 1) Perintah = _ LTrim(Mid(Perintah, a + 1))

10 11 12 13 14 15 16 17 18 19 20 21

Membuat File Help – Agung Novian, S.Kom

64

22 23

Loop End Sub

24

40 41 42 43

Sub LakukanAksi( _ Optional Perintah, _ Optional Isi) On Error Resume Next If IsMissing(Perintah) Then WinExec "Winhelp.exe" & _ App.Path & "\Calc.hlp", 1 Exit Sub End If Select Case UCase( _ Perintah) Case "WAV" Select Case Isi Case 1: frmCalc.Show mciExecute "Play " & _ App.Path & "\SUARA.WAV" End Select Case "AVI" Select Case Isi Case 1: frmCalc.Show mciExecute "Play " & _ App.Path & _ "\FILEMOVE.AVI" End Select Case "LIHAT": frmCalc.Show End Select End Sub

44 45

Sub Main() LihatPara

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

Membuat File Help – Agung Novian, S.Kom

65

46 47 48 49 50 51 52

Select Case UBound(Para) Case 0: LakukanAksi Case 1: LakukanAksi Para(1) Case 2: LakukanAksi Para(1), (2) End Select End Sub

Ubah properti project dengan cara: klik menu ProjectProject1 Properties. Pada dialog yang ditampilkan, ubah “Project Name” menjadi “Calculator”. Ubah pula “Startup Object” menjadi “Sub Main”, lihat ilustrasi gambar di bawah ini:

Gambar 4.6. Dialog Project Properties.

Membuat File Help – Agung Novian, S.Kom

66

Simpan pekerjaan dengan mengklik menu File Save, simpan di alamat “C:\Calc”. Compile-kan project Anda menjadi file aplikasi (*.exe) dengan cara: klik menu FileMake Calculator.exe.

4.6. Menyalin Pendukung

File

Anda memerlukan 2 (dua) buah file pendukung, yaitu: “Suara.wav” dan “FileMove.avi” Untuk menambahkan file “Suara.wav”, jalankan Windows Explorer, buka alamat: “C:\Windows\Media”, klik sebuah file (*.wav), contoh file “Windows XP Logon Sound”. Klik kanan pada file tersebut pilih Copy. Buka alamat “C:\Calc”, Paste-kan di sana (klik kanan pada bidang kosong, pilih Paste). Ubah nama file tersebut dengan cara: klik kanan pada file tersebut, pilih Rename. Ubah nama dengan “Suara”. Untuk menambahkan file “FileMove.avi”, dengan Windows Explorer buka alamat: “C:\Program Files\Microsoft Visual Studio\Common\Graphics\ Videos”, klik file Membuat File Help – Agung Novian, S.Kom

67

“FileMove”, “C:\Calc”.

Copy-Paste

kan

4.7. Membuat file “Calc.hlp”

ke

alamat

Help

Dengan bantuan Ms. Word buatlah “Calc.rtf”, ketikkan teks, sebagai berikut:

file

Calculator Klik {button Kalkulator, ExecFile (Calculator.exe, Lihat)} untuk menjalankan Kalkulator. Klik {button Suara, ExecFile (Calculator.exe, wav 1)} untuk mendengarkan suara. Klik {button Video, ExecFile (Calculator.exe, avi 1)} untuk melihat video. Blok teks “Calculator”, ubah style menjadi “Heading 3”. Tambahkan footnote dengan simbol “$” dan “#”, isikan footnote dengan teks: “Index”. Simpan pekerjaan Anda di “C:\Calc”, namai dengan “Calc.rtf”. Membuat File Help – Agung Novian, S.Kom

68

Jalankan aplikasi Help Workshop, klik menu FileNew, pilih “Help Project”, dan klik OK. Klik tombol Files…, klik tombol Add, pilih file “Calc”. Klik tombol Windows…, ketikkan: “main”, dan klik OK. Klik tab “Position”, klik tombol Auto-Sizer, atur posisi dan ukuran jendela help sesuai selera. Klik tab Color, klik tombol Change…, ubah warna sesuai selera. Klik OK.

Gambar 4.7. Help Workshop – Pengaturanpengaturan.

Klik tombol Save and Compile. Tampilan help seperti contoh gambar ilustrasi di bawah ini.

Membuat File Help – Agung Novian, S.Kom

69

Gambar 4.7. Jendela Help – Menampilkan tombol.

Klik tombol Kalkulator, maka aplikasi Calculator yang telah Anda buat akan dipanggil ditampilkan. Klik tombol Suara, maka file “Suara.wav” akan diputar, begitu pula saat tombol Video diklik, program akan memutar file “FileMove.avi”. Tutup jendela Help, dan aktifkan aplikasi Calculator, tekan tombol F1 pada keyboard, maka file help akan ditampilkan.

Membuat File Help – Agung Novian, S.Kom

70

BAB V HTML SEBAGAI HELP 5.1.HTML Help dengan HTML Help Workshop Sepertinya saya tidak perlu menjelaskan lebih detil tentang HTML (Hyper Text Mark up Language). Karena saya menganggap Anda sudah mengenal dan bisa membuat sebuah file HTML. Untuk membuat file HTML mungkin Anda sudah biasa menggunakan aplikasi Notepad, Front Page, Dream Weaver dan sebagainya. Kali ini saya akan mengajak Anda membuat file HTML dengan menggunakan aplikasi HTML Help Workshop. Aplikasi HTML Help Workshop dapat Anda temukan pada CD instalasi Ms. Visual Studio. Jika pada komputer Anda belum terpasang aplikasi ini, bukalah CD Ms. Visual Studio Anda, buka folder “HTMLHELP”. Kemudian instalkan file HTMLHELP.exe yang ada di

Membuat File Help – Agung Novian, S.Kom

71

dalam folder tersebut (klik ganda dan ikuti instruksi-instruksi yang diberikan). Setelah program aplikasi HTML Help Workshop terpasang, klik tombol StartAll Programs HTML Help Workshop HTML Help Workshop.

Gambar 5.1. Lingkungan kerja HTML Help Workshop.

Gambar di atas adalah IDE dari HTML Help Workshop. Untuk membuat file HTML, klik menu FileNew, pada dialog New, klik lis HTML File, klik OK. Akan tampil dialog yang Membuat File Help – Agung Novian, S.Kom

72

meminta Anda memasukkan judul HTML, ketikkan judul, contoh: “Membuat HTML Help”. Klik OK. Mulailah berkreasi membuat file HTML.

5.2.Membuat HTML Help dengan Mengkonversi file Help Project (*.hpj) Ada dua langkah atau cara membuat file HTML Help (*.chm), yaitu dengan mengkonversi file help project (*.hpj) atau membuatnya secara manual (diawali dengan membuat file HTML). Baiklah, kita akan mencoba membuat file HTML Help langkah pertama yaitu dengan konversi dari file help project (*.hpj). Mulailah dengan membuat folder atau direktori baru di drive C, namai dengan “HTML Help”, buka folder “HTML Help” tersebut dan buatlah sub folder baru di dalamnya, namai dengan “Konversi”. Ini dilakukan agar Anda lebih mudah mengorganisasikan file-file yang diperlukan.

Membuat File Help – Agung Novian, S.Kom

73

 Membuat Wizard

Project

dengan

Jalankan HTML Help Workshop, klik menu FileNew…. Saat dialog “New” ditapilkan, pilih list “Project”, klik OK. Anda akan mendapatkan sebuah wizard, tandai checkbox “Convert WinHelp Project”, klik Next. Pada wizard berikutnya, klik tombol Browse… pada “Specify where your WinHelp project file is located:”, tentukan nama dan alamat file help project (*hlp) yang akan Anda konversikan. Sebagai contoh: buka folder “C:\Help” dan pilih “Help2”. Klik tombol Browse… yang kedua, alamatkan ke “C:\HTML Help\Konversi” (folder yang tadi Anda buat). Ketikkan nama file HTML Help project Anda, contoh ketikkan: “HHP1” Hal ini untuk menentukan nama dan alamat file penyimpanan project Anda. Klik Next.

Membuat File Help – Agung Novian, S.Kom

74

Gambar 5.2. Wizard New Project.

Klik Finish untuk mengakhiri wizard.

 Membuat Table of Contents Pada lingkungan kerja HTML Help Workshop, klik tab “Contents”. Saat tampil dialog “Table of Contents not Specified”, pastikan option terpilih

pada “Create a new contents file”. Klik OK Namai file content Anda dengan nama “Content”, klik Save. Sekarang kita mula membuat masukan untuk file content.

Membuat File Help – Agung Novian, S.Kom

75

Gambar 5.3. Menambahkan Contents file.

 Membuat Heading Content Klik tombol “Insert a Heading” , akan ditampilkan dialog “Table of Content Entry”, ketikkan judul untuk “Heading” Anda pada textbox “Entry title”, contoh: “Selamat Datang”. Klik tombol Add…, akan tampil dialog “Path or URL”. Klik sebuah list “HTML title” yang tersedia. Contoh klik “Index” (“Index” ini adalah halaman awal yang akan ditampilkan), Klik OK. Klik kembali tombol OK pada dialog “Table of Content Entry”. Sekarang, pada kotak “Contents” sudah terdapat sebuah list. Membuat File Help – Agung Novian, S.Kom

76

Gambar 5.4. Menambahkan daftar Contents file.

 Membuat Page Content Klik tombol “Insert a Page” , saat ditampilkan kotak pesan, klik No (jika Anda mengklik Yes, berarti Anda akan membuat page sebagai permulaan content). Akan ditampilkan dialog “Table of Content Entry” seperti saat Anda membuat Heading. Ketikkan judul untuk “page” Anda pada textbox “Entry title”, contoh: “Biodata”. Klik tombol Add…, akan tampil dialog “Path or URL”. Klik “Biodata”. Klik OK . Klik kembali tombol OK pada dialog “Table of Content Entry”. Sekarang, pada kotak “Contents” sudah terdapat dua buah list. Membuat File Help – Agung Novian, S.Kom

77

Tambahkan page-page baru, sesuai banyaknya file HTML yang tersedia atau sesuai rancangan Anda.

 Membuat Index Klik tab “Index”, pada dialog yang ditampilkan, pastikan option terpilih pada “Create a new index file”. Klik OK. Namai file Index dengan “Index”. Kita mula membuat masukan untuk file index, langkahnya hampir sama dengan langkah membuat file content. Klik tombol “Insert a keyword” , ketikkan: “Biodata” pada textbox “Keyword”. Klik tombol Add… klik list “Biodata”, klik OK. Klik OK kembali. Buatlah keyword-keyword keperluan.

lainnya

sesuai

Membuat File Help – Agung Novian, S.Kom

78

Gambar 5.5. Menambahkan daftar pada index file.

 Mengkompilasi Project Langkah terakhir tentunya adalah mengkompilasi project agar Anda dapat melihat hasil akhirnya. Klik menu FileCompile… untuk mengkompilasi project Anda. Saat ditampilkan dialog “Create a compiled file”, tandai checkbox “Automatically display compiled help file when done” agar program langsung menampilkan jendela Help setelah proses kompilasi selesai.

Membuat File Help – Agung Novian, S.Kom

79

Klik Compile. Bila ditampilkan kotak pesan, klik saja Yes, yang artinya Anda akan menyimpan semua file pada project.

Gambar 5.6. Tampilan HTML Help.

5.3.Membuat HTML Help Secara Manual Kita mulai mencoba membuat HTML Help secara manual alias tanpa melakukan konversi dari file Help Project. Mulailah dengan membuat folder atau direktori baru di drive C, namai dengan “HTML Help”, Membuat File Help – Agung Novian, S.Kom

80

buka folder “HTML Help” tersebut dan buatlah sub folder baru di dalamnya, namai dengan “Manual”. Buka folder “Manual”, buatlah sub folder baru, namai dengan “HTML”.

 Membuat file HTML Klik menu FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Help Saya”. Klik OK. Simpan file HTML Anda, klik FileSave File, alamatkan ke “C:\HTML Help\Manual\HTML”. Namai dengan “Index”. Silakan kreasikan HTML Anda, atau Anda dapat melihat contoh script HTML seperti berikut ini:

<meta name = "GENERATOR" content= "Microsoft® HTML Help Workshop 4.1"> <Title>Membuat HTML Help <STYLE Type="text/css"> TD {Border : Thin Groove} Membuat File Help – Agung Novian, S.Kom

81

A:link {text-decoration: none; color: #000099} A:visited {text-decoration: none; color: #000099} A:hover {text-decoration: none; color: #CC0000} A:active {text-decoration: none; color: #000099}

Selamat Datang

Terimakasih telah mempelajari buku ini.

Silakan klik link berikut ini:

Biodata

Keahlian

Pengalaman

Script HTML di atas akan menghasilkan tampilan seperti ilustrasi gambar di bawah ini: Membuat File Help – Agung Novian, S.Kom

82

Gambar 5.7. Tampilan halaman HTML Index.

Buat file HTML lainnya, yaitu:”Biodata.htm”, “Ahli.htm”, dan “Alam.htm”.

 Membuat file Biodata.htm Klik menu FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Biodata”. Klik OK. Simpan file HTML Anda, klik FileSave File, alamatkan ke “C:\HTML Help\Manual\ HTML”. Namai dengan “Biodata”. Contoh script “Biodata.htm”: Membuat File Help – Agung Novian, S.Kom

83

<META http-equiv="Content-Type" content="text/HTML; charset=windows-1252"> <TITLE>Biodata <STYLE Type="text/css"> TD {Border : Thin Groove} A:link {text-decoration: none; color: #000099} A:visited {text-decoration: none; color: #000099} A:hover {text-decoration: none; color: #CC0000} A:active {text-decoration: none; color: #000099}

Nama Lengkap 84 Width="4%"> : Agung Novian Nama Beken : Viansastra Nama Panggilan : Ado Membuat File Help – Agung Novian, S.Kom 85 Kelahiran : Cirebon, 24 September 1982 Pekerjaan : Mahasiswa, Programmer, Teknisi, Instruktur, Penulis Gol. Darah : AB Membuat File Help – Agung Novian, S.Kom 86 Status Marital : Belum Menikah Alamat Rumah : Jl. P. Drajat Gg. Jepun RT. 03/09 No. 48 Telp. 0231210178 Kota Cirebon 45133 Email 87 color="#333333">: [email protected] [email protected] [email protected]

Script HTML di atas akan menghasilkan tampilan seperti ilustrasi gambar di bawah ini:

Membuat File Help – Agung Novian, S.Kom

88

Gambar 5.8. Tampilan halaman HTML Biodata.

 Membuat file Ahli.htm Klik menu FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Keahlian”. Klik OK. Simpan file HTML Anda, klik FileSave File, alamatkan ke “C:\HTML Help\Manual\HTML”. Namai dengan “Ahli”. Contoh script “Ahli.htm”: <META http-equiv="Content-Type" content="text/HTML; charset=windows1252"> <TITLE>Keahlian <STYLE Type="text/css"> TD {Border : Thin Groove} A:link {text-decoration: none; color: #000099} A:visited {text-decoration: none; color: #000099} A:hover {text-decoration: none; color: #CC0000} A:active {text-decoration: none; Membuat File Help – Agung Novian, S.Kom

89

color: #000099}

Bahasa Pemograman: Under DOS (Pascal) Visual (VB, Foxpro, Delphi, C++) dot Net (VB .Net) Web (PHP, ASP, JavaScript, VBScript) SQL Aplikasi Perkantoran dan Grafis: Membuat File Help – Agung Novian, S.Kom 90 Office (Word, Excel, Access, PowerPoint) Corel (Draw, PhotoPaint) Menulis: Buku Panduan Komputer Sastra (Cerpen, Puisi)

Script HTML di atas akan menghasilkan tampilan seperti ilustrasi gambar di bawah ini:

Membuat File Help – Agung Novian, S.Kom

91

Gambar 5.9. Tampilan halaman HTML Ahli.

 Membuat file Alam.htm Klik menu FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Pengalaman”. Klik OK. Simpan file HTML Anda, klik FileSave File, alamatkan ke “C:\HTML Help\Manual\HTML”. Namai dengan “Alam”. Contoh script “Alam.htm”: <META http-equiv="Content-Type" content="text/HTML; charset=windows1252"><TITLE>Pengalaman <STYLE Type="text/css"> TD {Border : Thin Groove} A:link {text-decoration: none; color: #000099} A:visited {text-decoration: none; color: #000099} A:hover {text-decoration: none; color: #CC0000} A:active {text-decoration: none; color: #000099} Membuat File Help – Agung Novian, S.Kom

92

Programmer PT. Mekraindo Majalengka, tahun 2004 s.d. sekarang Penulis Buku Panduan Ms. Visual Basic, tahun 2004, ANDI Offset Yogyakarta Penulis lepas di ilmukomputer.com

Membuat File Help – Agung Novian, S.Kom

93

Script HTML di atas akan menghasilkan tampilan seperti ilustrasi gambar di bawah ini:

Gambar 5.10. Tampilan halaman HTML Alam.

Dengan begini kita sudah punya empat file HTML.

 Membuat Project

file

HTML

Help

Setelah semua file HTML siap, kita baru memulai membuat file HTML Help Project (*.hhp). klik menu FileNew…, pilih “Project”, klik OK. Jangan tandai checkbox, klik Next. Klik tombol Browse…, alamatkan

Membuat File Help – Agung Novian, S.Kom

94

ke: “C:\HTML Help\Manual”. Ketikkan nama untuk file Anda “HHP2”. Klik Open. Klik tombol Next. Tandai semua chexbox yang ada, yaitu: -

HTML Help table of content (.hhc) HTML Help index (.hhk) HTML file (.htm)

Klik tombol Next. Abaikan wizard ini. Klik tombol Next. Abaikan pula wizard ini. Klik tombol Next. Sampai Anda menemukan wizard “New Project – HTML Files”, klik tombol Add…. Alamatkan ke: “C:\HTML Help\Manual\HTML”. Blok semua file HTML pada alamat ini. Klik Open.

Gambar 5.10. Wizard New Project – HTML Files.

Membuat File Help – Agung Novian, S.Kom

95

Klik Next. Terakhir klik Finish.

 Membuat Table of Contents dan file Index Buatlah file table of contents dan file index seperti pada penjelasan sebelumnya 5.4. Membuat HTML Help dengan Mengkonversi file Help Project (*.hpj) point “Membuat Table of Content” sampai “Membuat Index”.

 Pengaturan Terakhir Klik tab “Project”, klik tombol “Change project option” . Pada tab “General”, ketikkan judul untuk HTML Help Anda pada textbox “Title”, misalnya: “HTML Saya”. Ubah “Default file:” menjadi: “HTML\biodata.htm”.

Membuat File Help – Agung Novian, S.Kom

96

Gambar 5.11. Dialog Options.

Klik OK untuk menyimpan perubahan. Kompilasikan project Anda, klik menu File Compile… pada dialog yang ditampilkan klik tombol Compile. Bila ditampilkan kotak pesan, klik tombol Yes, untuk menyimpan semua file. Tampilah HTML Help, mungkin akan seperti ilustrasi gambar di bawah ini:

Gambar 5.11. Tampilan HTML Help.

Membuat File Help – Agung Novian, S.Kom

97