|
Anda mungkin pernah surfing di internet dan melihat ada sebuah home page yang menampilkan news ticker didalamnya. News ticker adalah suatu teknik untuk menampilkan pesan scrolling dari bawah keatas secara terus menerus. News ticker ini berfungsi untuk menampilkan pesan atau berita kepada pengunjung home page. Anda tertarik untuk menambah fasilitas news ticker di homepage Anda? Simak terus deh tulisan ini, tapi sebelum itu kita ikuti dulu pesan-pesan berikut ini.
Tulisan ini bersifat terbuka dan Anda bisa memberi komentar melalui
sony-ak@sony-ak.com. Anda dilarang keras mengutip sebagian atau seluruh tulisan ini tanpa
menyebutkan sumber aslinya.
News ticker yang akan kita buat kali ini adalah news ticker yang bersifat statis. Artinya data pesan atau berita diambil dari suatu teks file biasa. Pada kesempatan yang lain penulis akan membuat news ticker yang berbasis database, jadi semua berita atau pesan dapat diambil dari database.
Untuk membuat news ticker ini ada dua hal yang perlu Anda siapkan yaitu:
1. Web server, Anda bisa menggunakan sembarang web server untuk keperluan ini. Penulis sendiri menggunakan Personal Web Server 4.0 ketika menguji news ticker ini pada mesin localhost.
2. File yavs.class, ini adalah applet java untuk menjalankan dan menampilkan news ticker. File ini dapat Anda peroleh pada bagian akhir dari tulisan ini.
OK, sekarang mari kita mulai pembuatan news ticker kita ini, langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Buatlah halaman web sebagai tempat untuk menampilkan news ticker, penulis akan membuat file newsticker.htm
2. Di dalam file newsticker.htm tadi buatlah tabel yang terdiri dari dua baris dan satu kolom.
3. Isi baris pertama dengan judul news ticker dan isi baris kedua dengan tag applet yang akan berisi properti news ticker.
Untuk lebih jelasnya lihat isi dari file newsticker.htm di bawah ini:
01. <html><head><title>News Ticker Demo</title></head><body>
02. <div align="left">
03. <table border="0" cellspacing="0" cellpadding="0" style="border: 1 solid #000000">
04. <tr><td bgcolor="#000080"><font face="Tahoma" size="1" color="#FFFFFF"> LATEST NEWS </font></td></tr><tr>
05. <td>
06. <applet code="yavs.class" codebase="" width="150" height="200">
07. <param name="MSGTEXT" value="news.txt">
08. <param name="BGCOLOR" value="#FFFFEC">
09. <param name="FGCOLOR" value="#000000">
10. <param name="HREFCOLOR" value="#RRGGBB">
11. <param name="LINKCOLOR" value="#800000">
12. <param name="FONTNAME" value="Dialog">
13. <param name="FONTSIZE" value="12">
14. <param name="MOUSEOVERHOLD" value="NO">
15. <param name="SPEED" value="50">
16. <param name="PAUSE" value="10">
17. </applet>
18. </td></tr></table></div>
19. </body></html>
Pada file newsticker.htm diatas, yang merupakan bagian penting dari news ticker adalah pada baris ke 06 sampai 17. Dimana pada bagian tersebut java applet yavs.class akan dipanggil untuk menampilkan news ticker. Property codebase pada baris ke-06 pada contoh di atas berisi nilai kosong yang artinya file yavs.class terletak pada folder yang sama dengan file newsticker.htm. Jika Anda meletakkan file yavs.class pada folder yang lain maka properti codebase ini juga harus disesuaikan, misalkan Anda meletakkan file yavs.class pada folder /class, maka isi dari properti codebase akan seperti ini; codebase="/class".
Properti width dan height pada tag applet (line 06) digunakan untuk menentukan tinggi dan lebar dari news ticker. Applet yavs.class ini memiliki beberapa parameter yaitu:
1. MSGTEXT, parameter ini berfungsi untuk menentukan file data yang berisi berita atau pesan yang akan Anda tampilkan pada news ticker. Pada contoh di atas penulis menggunakan file news.txt yang berisi pesan dari penulis. Berikut ini adalah contoh dari isi file news.txt:
<b>.:IRC Channel</b><br>
AriTech Development Indonesia has official IRC channel #aritechdev on dalnet servers.<br><br>
<b>.:ICQ Contact</b><br>
You can contact us in real time using ICQ, our UIN is 103962452.<br><br>
<b>.:Y! Mess. Contact</b><br>
You can contact us in real time using Yahoo! Messenger, our Yahoo! ID is sonyarianto.<br><br>
<b>.:Free Mail Forwarding</b><br>
Want e-mail forwarding @aritechdev.com? Just sign up <a href="http://www.aritechdev.com/signup.htm">here</a>.
<br><br>
Kita lihat diatas bahwa isi dari file news.txt ternyata mirip sebuah file HTML hanya saja bedanya tag-tag yang digunakan tidak selengkap jika Anda membuat file HTML dengan HTML editor (tanpa tag <html> <body> etc etc). Pada contoh diatas file news.txt juga terletak pada folder yang sama dengan file newsticker.htm. Jika Anda meletakkan file news.txt pada folder lain maka isi dari parameter ini harus disesuaikan. Misalnya Anda meletakkannya pada folder /message maka isi dari parameter MSGTEXT ini adalah seperti berikut; value="message/news.txt"
2. BGCOLOR, parameter ini berfungsi untuk menentukan warna background dari news ticker.
3. FGCOLOR, parameter ini berfungsi untuk menentukan warna foreground dari news ticker.
4. HREFCOLOR, parameter ini berfungsi untuk menentukan warna link HREF sebelum di klik pada news ticker.
5. LINKCOLOR, parameter ini berfungsi untuk menentukan warna link HREF pada saat di klik.
6. FONTNAME, parameter ini berfungsi untuk menentukan font yang digunakan pada news ticker.
7. FONTSIZE, parameter ini berfungsi untuk menentukan ukuran font yang digunakan pada news ticker.
8. MOUSEOVERHOLD, parameter ini berfungsi untuk menentukan apakah news ticker berhenti scroll pada saat mouse berada di atas news ticker. Pada contoh di atas penulis mengisi dengan nilai NO. Anda bisa mengganti dengan nilai YES untuk mendapatkan hasil yang berbeda.
9. SPEED, parameter ini berfungsi untuk menentukan kecepatan dari news ticker. Semakin nilainya maka semakin cepat gerakan news ticker.
10. PAUSE, parameter ini berfungsi untuk menentukan pause, penulis sendiri belum mengerti efek dari parameter ini. Isi saja dengan nilai 10 ;)
Nah, sampai disini maka kita sudah bisa untuk membuat news ticker sederhana untuk sebuah home page. Anda bisa menempelkan tag applet di atas ke halaman-halaman web lain dan Anda tinggal menyesuaikan parameternya saja untuk tiap-tiap news ticker.
Anda bisa uji news ticker di atas, copy-kan semua file (newsticker.htm, news.txt dan yavs.class) ke web folder pada web server Anda. Kemudian panggil file newsticker.htm dari browser. Screen shot dari news ticker diatas dapat Anda lihat pada gambar berikut:
Selamat mencoba.
Terakhir penulis ingin mengucapkan terimakasih kepada orang-orang berikut:
Mr. Tjipto "chepot" Prakosa, thanks atas yavs.class nya. Gue udah bisa buat news ticker pak ;)
Esa Ivani, thanks atas support nya, komputer kamu udah bantu aku lebih produktif bikin artikel. I love you very much ;)
Saran dan komentar mengenai tulisan ini bisa dikirim ke sony-ak@sony-ak.com. Jika ingin melihat koleksi tulisan yang lain silakan saja ke
Sony AK Knowledge
Center.
Mission completed on 23:46
File-file contoh yang diperlukan pada tulisan ini dapat Anda download dari
sini.
| Send
your comments or suggestions |
|
|
|
