help file

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 IFILE HELP, DAN APLIKASI YANG DIPERLUKAN

1.1. File Help dengan Help Workhsop

Adalah pasti kita jumpai dalam setiap program-program 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.


2

Tak lengkap rasanya sebuah program aplikasi tanpa disertai fasilitas Help. Oleh karenanya 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


3

Untuk menjalankan aplikasi Help Workshop, Anda lakukan langkah berikut ini: Klik tombol StartAll ProgramsMicrosoft Visual Studio 6.0 Microsoft Visual Studio 6.0 ToolsHelp 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


4

aplikasi yang dapat Anda gunakan untuk membuat atau mengolah file (*.rtf) adalah Microsoft Word.

Jalankankanlah aplikasi Microsoft Word pada komputer Anda dengan cara: Klik StartAll Programs Microsoft OfficeMicrosoft 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 NovianC 2006

Lakukan penyimpanan dengan cara: klik menu FileSave, alamatkan penyimpanan ke alamat direktori/folder “C:\Help”. Isi “File name:” dengan: “Help1”. Ubah “Save as type:”


5

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

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

1.3. Membuat file Help awal

Sekarang aktifkan Help Workshop! Klik menu FileNew. 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:


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.


7

Gambar 1.4. Menentukan nama file (*rtf).Klik tombol OK, untuk mendaftarkan file dan menutup dialog “Topic Files”. Kembali ke jendela Help Workshop, klik menu FileCompile…, 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 meng-compile, 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.


8

Gambar 1.5. Tampilan jendela Help.

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


9

tombol Enter pada keyboard. Kembalikan kursor ke awal naskah. Ketikkan judul topik, misal: “Pendahuluan”. Blok teks judul tersebut, klik menu FormatStyles 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”


10

yang Anda modifikasi ini akan selalu digunakan 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.


11

Gambar 1.8. Tampilan Naskah – Setelah modifikasi Heading 3.

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.


12

Aktifkan Ms. Word, buatlah dokumen baru, klik menu FileNew, atau klik tombol bergambar, atau tekan tombol Ctrl + N pada keyboard.

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 SayaKeahlianKeahlian SayaFotoFoto 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”.


13

Gambar 1.10. Memilih style pada combobox Style.

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


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 FormatFonts… 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.


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 langkah-langkah tersebut.

Klik menu ViewToolbarsCustomize… Pada dialog “Customize”yang ditampilkan, klik tab “Commands”, pada kotak “Category:”, klik list “Format”.

Gambar 1.13. Dialog Customize – Memilih tool baru.


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”.


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 FormatFont… 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 FileSave. Aktifkan Help Workshop. Klik menu FileNew… Pilih “Help Project” dan klik OK. Namai dengan Help2.


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.


19

Format pada file rich text format

Efek pada file help

Garis bawah ganda

Teks berwarna hijau dan bergarisbawah

Hidden

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!


20

Biodata

Nama : Agung NovianKelahiran : Cirebon, 9 September 1982Alamat : Jl. P. Drajat Gg. Jepun RT. 03/09 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.


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


22

(simbol “#”).

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.


23

1.10. Menambahkan Gambar

Untuk menambahkan gambar, dapat dengan mudah Anda lakukan pada file RichTextFormat melaului Ms. Word, dengan cara, klik menu InsertPictureFrom 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.


24

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


25

BAB IIMODIFIKASI 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 FileOpen, 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.


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 Bentuk Tampilan

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,


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 NilaiLeft 198Top 197Width 648Height 599

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


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 (Pop-Up)

Anda sudah bisa membuat link, dan menampilkan suatu topik saat link tersebut


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.


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 FileSave As…) namai dengan “Help3.rtf”. Jalankan aplikasi Help Workshop, buat project Help baru (FileNew, klik “Help Project”, klik OK).


31

Sisipkan file “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 Latar Tampilan Mengambang

Tampilan mengambang di atas, bisa Anda ubah warna latar dari warna defaultnya yaitu putih.


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 angka-angka 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)).


33

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

Adapun rutin makro yang digunakan yaitu:

{Button, Nama_Tombol, [Perintah]}

Parameter KeteranganButton Identifikasi kontrolNama_Tombol Teks yang ditampilkan

pada tombolPerintah 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


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).


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 KeteranganJumpId( Memanggil ID suatu


36

[NamaFile> ID_Jendla,]ID_Topik)

topik tertentu.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.

ExcecFile(NamaFile)

Memanggil suatu file tertentu. Tuliskan nama file dan alamat secara lengkap.

Exit() Menutup jendela Help

Untuk melihat referensi makro yang dapat dipergunakan, Anda dapat melihatnya dengan cara: pada aplikasi Help Workshop, klik menu HelpHelp 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


37

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

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


38

BAB IIIMEMBUAT 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.


39

3.2. Membuat Help Content

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 FileNew, 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”.


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.


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

Teks masukan

Keterangan

Title Halaman Anda bebas untuk


42

Mukamengetikkan teks masukan

Topic ID IndexSesuaikan dengan ID topik yang Anda buat pada file *.rtf

Help file Help4.hlp Nama file Help

Window type

main

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


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

Teks masukan

Title Biodata SayaTopic ID BiodataHelp file Help4.hlpWindow type main


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:


45

Gambar 3.5. Tampilan daftar Content.

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

Gambar 3.6. Hasil Compile Dialog Help Contents.


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).


47

Gambar 3.6. “Find” pada dialog Help Contents.


48

BAB IVMENGHUBUNGKAN 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.


49

4.2. Memulai Visual Basic

Jalankan Ms. Visual Basic 6.0. Anda mengerti caranya? Jika tidak, ikuti langkah ini: klik tombol StartAll ProgramsMicrosoft Visual Studio 6.0Microsoft 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.

Perhatikan daerah sebelah kanan lingkungan kerja, Anda klik ganda cabang bertuliskan:


50

“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 Objek Kontrol

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.


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.

4.4. Mengubah Nilai Properti

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


52

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”.

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 Aplikasi Calculator


53

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 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”,


54

kopikan menjadi 5 (lima) buah. Ubah properti “Caption” seperti pada tabel di bawah ini:

Index Caption0 /1 +2 x3 -4 =

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

Nama Objek Properti Perubahan

Command1Name cmdPercentCaption %

Command2Name cmdDecimalCaption .

Command3Name cmdCancelCaption C

Command4Name cmdCECaption CE

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

Nama Objek

Properti Perubahan


55

Label1

Name lblDisplayCaption 0.Alignment 1-Right Justify

BackColorPutih atau warna terang lainnya

Name lblDisplayCaption 0.Alignment 1-Right Justify

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

Gambar 4.5. Desain form Calculator.

Masukkan objek kontrol CommonDialog ke dalam form, ubah properti “Name” nya menjadi “cdlHelp”.


56

Klik menu ViewCode, Anda ketikkan kode berikut ini:

1

234567

8

91011121314

151617181920

21

2223

Option Explicit

Dim Operator1, Operator2Dim DecimalFlag As IntegerDim NumOps As IntegerDim AkhirMasukanDim JnOperatorDim TempBaca

Private Sub _cmdCancel_Click() On Error Resume Next lblDisplay = "0." Operator1 = 0 Operator2 = 0 Form_LoadEnd Sub'Private Sub cmdCE_Click() On Error Resume Next lblDisplay = "0." DecimalFlag = False AkhirMasukan = "CE"End Sub'Private Sub _cmdDecimal_Click() On Error Resume NextIf AkhirMasukan _ = "NEG" Then


57

2425

2627282930

31

3233

34

3536373839

404142

4344

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 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 IfIf AkhirMasukan _= "NEG" Then


58

45

464748

49

505152

5354555657

58

59606162

63646566

lblDisplay = "-" & _lblDisplay AkhirMasukan = "NUMS" End IfEnd Sub'Private Sub _cmdOperator_Click( _Index As Integer) On Error Resume Next TempBaca = lblDisplay If AkhirMasukan _ = "NUMS" Then NumOps = NumOps + 1 End If Select Case NumOps Case 0If cmdOperator(Index) _= "-" And AkhirMasukan _ <> "NEG" ThenlblDisplay = _"-" & lblDisplay AkhirMasukan = "NEG"End If Case 1 Operator1 = lblDisplayIf cmdOperator(Index) _= "-" And AkhirMasukan _<> "NUMS" And _ JnOperator <> "=" Then lblDisplay = "-" AkhirMasukan = "NEG" End If


59

6768697071

7273

7475

7677

7879

8081828384

8586878889

9091

Case 2 Operator2 = TempBaca Select Case JnOperator Case "+" Operator1 = Operator1 + _ Operator2 Case "-" Operator1 = Operator1 - _ Operator2 Case "X" Operator1 = Operator1 * _ Operator2 Case "/" If Operator2 = 0 ThenMsgBox "Div by zero", 48, _"Kalkulator" Else Operator1 = Operator1 / _ Operator2 End If Case "=" Operator1 = Operator2 Case "%" Operator1 = Operator1 * _ Operator2 End Select lblDisplay = Operator1 NumOps = 1 End SelectIf AkhirMasukan _<> "NEG" Then AkhirMasukan = "OPS" JnOperator = _


60

9293

94

9596

979899100101

102

103

104

105

106107

108109

110111

cmdOperator(Index) End IfEnd Sub

Private Sub _cmdPercent_Click() On Error Resume NextlblDisplay = _lblDisplay / 100 AkhirMasukan = "OPS" JnOperator = "%" NumOps = NumOps + 1 DecimalFlag = TrueEnd Sub

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 = _


61

112113

114115116117

118119

120121122

123124125126127128129

130

131132133134135

Asc("-") Then cmdOperator_Click (3)ElseIf KeyAscii = _Asc("=") Then cmdOperator_Click (4)ElseIf KeyAscii = 13 Then cmdOperator_Click (4)ElseIf KeyAscii = _Asc("%") Then cmdPercent_ClickElseIf KeyAscii = _Asc(".") Then cmdDecimal_ClickEnd IfEnd Sub

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

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


62

136137138

End With End IfEnd Sub

Tambahkan sebuah Module, dengan cara: klik ProjectAdd Module, pada Module1, ketikkan kode berikut:

1

2

3

456789

10

11

Option Explicit

Private Declare Function _WinExec _Lib "kernel32" ( _ByVal lpCmdLine As String, _ByVal nCmdShow As Long _) As Long

Private Declare Function _mciExecute _Lib "winmm.dll" ( _ByVal lpstrCmd As String _) As Long

Public Para()Sub LihatPara() Dim a, b, Perintah$ ReDim Para(0) Perintah$ = CommandIf Right(App.Path, 1) <> _ "\" ThenPara(0) = App.Path & "\" & _ App.EXEName Else


63

12

1314

1516

17181920

21

2223

24

252627

28293031

32333435

Para(0) = App.Path & _ App.EXEName End IfPerintah$ = _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)) LoopEnd Sub

Sub LakukanAksi( _Optional Perintah, _Optional Isi)On Error Resume NextIf 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 " & _


64

36373839

40414243

444546474849505152

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 SelectEnd Sub

Sub Main()LihatParaSelect Case UBound(Para)Case 0: LakukanAksiCase 1: LakukanAksi Para(1)Case 2: LakukanAksi Para(1), (2)End SelectEnd Sub

Ubah properti project dengan cara: klik menu ProjectProject1 Properties.

Pada dialog yang ditampilkan, ubah “Project Name” menjadi “Calculator”. Ubah pula “Startup Object” menjadi “Sub Main”, lihat ilustrasi gambar di bawah ini:


65

Gambar 4.6. Dialog Project Properties.

Simpan pekerjaan dengan mengklik menu FileSave, simpan di alamat “C:\Calc”.

Compile-kan project Anda menjadi file aplikasi (*.exe) dengan cara: klik menu FileMake Calculator.exe.

4.6. Menyalin File Pendukung

Anda memerlukan 2 (dua) buah file pendukung, yaitu: “Suara.wav” dan “FileMove.avi”

Untuk menambahkan file “Suara.wav”, jalankan Windows Explorer, buka alamat: “C:\


66

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 “FileMove”, Copy-Paste kan ke alamat “C:\Calc”.

4.7. Membuat file Help “Calc.hlp”

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

Calculator

Klik {button Kalkulator, ExecFile (Calculator.exe, Lihat)} untuk menjalankan Kalkulator.


67

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”.

Jalankan aplikasi Help Workshop, klik menu FileNew, 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.


68

Gambar 4.7. Help Workshop – Pengaturan-pengaturan.

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

Gambar 4.7. Jendela Help – Menampilkan tombol.


69

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.


70

BAB VHTML 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


71

instalkan file HTMLHELP.exe yang ada di dalam folder tersebut (klik ganda dan ikuti instruksi-instruksi yang diberikan).

Setelah program aplikasi HTML Help Workshop terpasang, klik tombol StartAll 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 FileNew, pada dialog New, klik lis HTML File, klik OK. Akan tampil dialog yang


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.


73

Membuat Project dengan Wizard

Jalankan HTML Help Workshop, klik menu FileNew…. 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.


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.


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”.


76

Sekarang, pada kotak “Contents” sudah terdapat sebuah list.

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


77

pada dialog “Table of Content Entry”. Sekarang, pada kotak “Contents” sudah terdapat dua buah list.

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 lainnya sesuai keperluan.


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 FileCompile… 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.


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”,


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 FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Help Saya”. Klik OK.

Simpan file HTML Anda, klik FileSave 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:

<H1></H1><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><HTML><HEAD><meta name = "GENERATOR" content= "Microsoft® HTML Help Workshop 4.1"><Title>Membuat HTML Help</Title><STYLE Type="text/css">TD {Border : Thin Groove}


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}</STYLE></HEAD><BODY Bgcolor=DDDDDD Text=000099><H2>Selamat Datang</H2>Terimakasih telah mempelajari buku ini.<BR><BR>Silakan klik link berikut ini: <P><TABLE border=1><TR><TD width=150><LI><B><A href="biodata.htm">Biodata</A></B></TD></TR><TR><td width=150><LI><B><A href="ahli.htm"> Keahlian</A></B></TD></TR><TR><TD width=150><LI><B><A href="alam.htm"> Pengalaman</A></B></TD></TR></TABLE></BODY></HTML>

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


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 FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Biodata”. Klik OK.

Simpan file HTML Anda, klik FileSave File, alamatkan ke “C:\HTML Help\Manual\ HTML”. Namai dengan “Biodata”.

Contoh script “Biodata.htm”:


83

<HTML><HEAD><META http-equiv="Content-Type" content="text/HTML; charset=windows-1252"><TITLE>Biodata</TITLE><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}</STYLE></HEAD><BODY Bgcolor = #DDDDDD Text = #555555 Leftmargin=20 Rightmargin=0 Topmargin=20 Bottommargin=20"><TABLE Height=100% Width=100% Border=1><TR><TD><TABLE cellSpacing=1 cellPadding=1 width="100%" align=center border=0> <TR><TD BorderColor="DDDDDD" Width="48%"><FONT size=2 color="#333333">Nama Lengkap </FONT></TD>


84

<TD BorderColor="#DDDDDD" Width="4%"><FONT size=2 color="#333333">:</FONT></TD><TD Width="48%"><FONT size=2 color="333333"><B>Agung Novian</B> </FONT> </TD></TR><TR><TD BorderColor="DDDDDD" Width="48%"><FONT size=2 color="#333333">Nama Beken</FONT> </TD><TD BorderColor="DDDDDD" Width="4%"><FONT size=2 color="333333">:</FONT> </TD><TD Width="48%"><FONT size=2 color="333333"> Viansastra</FONT></TD></TR><TR><TD BorderColor="DDDDDD" Width="48%"><FONT size=2 color="333333">Nama Panggilan </FONT> </TD> <TD BorderColor="DDDDDD" Width="4%"><FONT size=2 color="#333333">:</FONT></TD><TD Width="48%"><FONT size=2 color="333333"> Ado</FONT></TD></TR><TR><TD BorderColor="#DDDDDD" Width="48%">


85

<FONT size=2 color="#333333">Kelahiran</FONT></TD><TD BorderColor="DDDDDD" Width="4%"><FONT size=2 color="#333333">: </FONT></TD><TD Width="48%"><FONT size=2 color="333333"> Cirebon, 24 September 1982</FONT></TD></TR><TR><TD BorderColor="#DDDDDD" Width="48%"><FONT size=2 color="#333333">Pekerjaan</FONT> </TD><TD BorderColor="#DDDDDD" Width="4%">:<FONT size=2 color="#333333"></FONT></TD><TD Width="48%"><FONT size=2 color="333333"> Mahasiswa, Programmer, Teknisi, Instruktur, Penulis </FONT></TD></TR><TR><TD BorderColor="DDDDDD" Width="48%"><FONT size=2 color="333333">Gol. Darah</FONT> </TD><TD BorderColor="#DDDDDD" Width="4%"><FONT size=2 color="#333333">:</FONT></TD><TD Width="48%"><FONT size=2 color="#333333">


86

AB</FONT></TD></TR><TR><TD BorderColor="#DDDDDD" Width="48%"><FONT size=2 color="333333">Status Marital</FONT></TD><TD BorderColor="#DDDDDD" Width="4%"><FONT size=2 color="#333333">:</FONT></TD><TD Width="48%"><FONT size=2 color="#333333"> Belum Menikah</FONT></TD></TR><TR><TD BorderColor="DDDDDD" Width="48%"><FONT size=2 color="333333">Alamat Rumah</FONT></TD><TD BorderColor="#DDDDDD" Width="4%"><FONT size=2 color="#333333">:</FONT></TD><TD Width="48%" Align="Justivy"><FONT size=2 color="#333333">Jl. P. Drajat Gg. Jepun RT. 03/09 No. 48 Telp. 0231-210178 Kota Cirebon 45133</FONT></TD></TR><TR><TD BorderColor="#DDDDDD" Width="48%"><FONT size=2 color="#333333">E-mail</FONT></TD><TD BorderColor="DDDDDD"


87

Width="4%"><FONT size=2 color="#333333">:</FONT></TD><TD Width="48%"><FONT size=2 color="333333"><A href ="mailto:[email protected]">[email protected]</A><BR><A href ="mailto:[email protected]"> [email protected]</A><BR><A href ="mailto:[email protected]"> [email protected]</A></FONT></TD></TR></TABLE></TD></TR></TABLE></BODY></HTML>



88

Gambar 5.8. Tampilan halaman HTML Biodata.

Membuat file Ahli.htm

Klik menu FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Keahlian”. Klik OK.

Simpan file HTML Anda, klik FileSave File, alamatkan ke “C:\HTML Help\Manual\HTML”. Namai dengan “Ahli”.

Contoh script “Ahli.htm”:

<HTML><HEAD><META http-equiv="Content-Type" content="text/HTML; charset=windows-1252"><TITLE>Keahlian</TITLE><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}


89

A:active {text-decoration: none; color: #000099}</STYLE></HEAD><BODY Bgcolor=Dddddd Text=555555 Leftmargin=20 Rightmargin=0 Topmargin=20 Bottommargin=20><TABLE Height=100% Width=100% Border=1><TR><TD Valign=Top><TABLE Cellspacing=1 Cellpadding=1 Width="100%" align=center border=0> <TR><TD Width="100%"><FONT size=2 color="#222222"><B>Bahasa Pemograman:</B> </FONT></TD></TR><TR><TD Width="100%"><LI><FONT size=2 color="#333333">Under DOS (Pascal)</FONT></LI><LI><FONT size=2 color="#333333">Visual (VB, Foxpro, Delphi, C++)</FONT></LI><LI><FONT size=2 color="#333333">dot Net (VB .Net)</FONT></LI><LI><FONT size=2 color="#333333">Web (PHP, ASP, JavaScript, VBScript)</FONT></LI><LI><FONT size=2 color="#333333">SQL</FONT></LI></TD></TR> <TR><TD Width="100%"><FONT size=2 color="#222222"><B>Aplikasi Perkantoran dan Grafis:</B></FONT>


90

</TD></TR><TR><TD Width="100%"><LI><FONT size=2 color="#333333">Office (Word, Excel, Access, PowerPoint)</FONT></LI><LI><FONT size=2 color="#333333">Corel (Draw, PhotoPaint)</FONT></LI> </TD></TR><TR><TD Width="100%"><FONT size=2 color="#222222"><B>Menulis:</B> </FONT></TD></TR> <TR><TD Width="100%"><LI><FONT size=2 color="#333333">Buku Panduan Komputer</FONT></LI><LI><FONT size=2 color="333333">Sastra (Cerpen, Puisi)</FONT></LI></TD></TR></TABLE></TD></TR></TABLE></BODY></HTML>



91

Gambar 5.9. Tampilan halaman HTML Ahli.

Membuat file Alam.htm

Klik menu FileNew…, klik “HTML File”, klik OK. Ketikkan judul untuk file HTML Anda, misalnya: “Pengalaman”. Klik OK.

Simpan file HTML Anda, klik FileSave File, alamatkan ke “C:\HTML Help\Manual\HTML”. Namai dengan “Alam”.

Contoh script “Alam.htm”:

<HTML><HEAD><META http-equiv="Content-Type"


92

content="text/HTML; charset=windows-1252"><TITLE>Pengalaman</TITLE><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}</STYLE></HEAD><BODY Bgcolor=Dddddd Text=555555 Leftmargin=20 Rightmargin=0 Topmargin=20 Bottommargin=20><TABLE Height=100% Width=100% Border=1><TR><TD Valign=top><TABLE cellSpacing=1 cellPadding=1 width="100%" align=center border=0> <TR><TD Width="100%"><FONT size=2 color="#222222"><LI>Programmer PT. Mekraindo - Majalengka, tahun 2004 s.d. sekarang </FONT></LI></TD></TR> <TR><TD Width="100%"><FONT size=2 color="#222222"><LI>Penulis Buku Panduan Ms. Visual Basic, tahun 2004,<A HREF=http:\\www.andipublisher.com> ANDI Offset Yogyakarta </a></FONT></LI>


93

</TD></TR> <TR> <TD Width="100%"><FONT size=2 color="#222222"><LI>Penulis lepas di <A href="http:\\www.ilmukomputer.com" title = "IlmuKomputer" target="blank">ilmukomputer.com</A></FONT></LI></TD></TR></TABLE></TD></TR></TABLE></BODY></HTML>


Gambar 5.10. Tampilan halaman HTML Alam.


94

Dengan begini kita sudah punya empat file HTML.

Membuat file HTML Help Project

Setelah semua file HTML siap, kita baru memulai membuat file HTML Help Project (*.hhp). klik menu FileNew…, pilih “Project”, klik OK. Jangan tandai checkbox, klik Next. Klik tombol Browse…, alamatkan 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.


95

Gambar 5.10. Wizard New Project – HTML Files.

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”.


96

Gambar 5.11. Dialog Options.Klik OK untuk menyimpan perubahan. Kompilasikan project Anda, klik menu FileCompile… 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:


97

Gambar 5.11. Tampilan HTML Help.


98

help file

Documents