News Headline

By. Oki S Bayu

Hei...
Artikel ini akan membahas tentang cara membuat news headline (up-to-date) dengan program JavaScript (js), dimana news yang akan kita ambil contentnya adalah dari portal news moreover.com, karena disana terdapat banyak kategori dari news yang bisa kamu pergunakan baik untuk news headline pada website kantor atau untuk bacaan pribadi aja dengan menggunakan program javascript yg kamu buat ( 2 file, 1 file js, 1 file html ) Oke deh, kita bahas ya...

Demo:

Dasar script:

Moreover mempunyai dasar script seperti ini untuk seluruh kategori nya,

function sa(url,headline_text,source,media_type,cluster,tagline,document_url,
harvest_time,access_status,access_registration)
{
this.url = url
this.headline_text = headline_text
this.source = source
this.media_type = media_type
this.cluster = cluster
this.tagline = tagline
this.document_url = document_url
this.harvest_time = harvest_time
this.access_status = access_status
this.access_registration = access_registration
}

Dan mempunyai array untuk format news sbb;

article = new Array(
new sa("http://c.moreover.com/click/here.pl?j89387894","Microsoft's nightmare CRM scenario","CRM-Forum","text","CRM news"," ","http://crm.insightexec.com","Sep 12, 2003 20:59"," "," "),
new sa("http://c.moreover.com/click/here.pl?j89387940","No more cash on the table for PeopleSoft, says Oracle","CRM-Forum","text","CRM news"," ","http://crm.insightexec.com/","Sep 12, 2003 20:59"," "," "),
new sa("http://c.moreover.com/click/here.pl?j89371709","QAS Announces QuickAddress For Sage SalesLogix CRM Solutions","ContactCenterWorld.com","text","CRM news"," ","http://www.contactcenterworld.com","Sep 12, 2003 18:54"," "," "),

dst...
);

Penjelasan array:

url = http://c.moreover.com/click/here.pl?j89387894
headline_text = Microsoft's nightmare CRM scenario
source = CRM-Forum
harvest_time = Sep 12, 2003 20:59

Untuk mengambil url, headline_text, source, dan harvest_time (huruf tebal) yang ada di array tersebut bisa kita buatkan program javascript untuk mengambil variabel2 array tsb yang nanti akan kita sisipkan di halaman HTML (pakai text editor mis: notepad) sbb;

// file: news.js

function tulisNews(banyak_news,judul)
{

// mengatur title

document.write('<p style="font-weight: bold">' + judul + '</p>');

// mengatur tampilan (banyak news yg akan ditampilkan)
// bisa 3, 5, 10, dst...

for(i=0; i<banyak_news; i++){
news = '<p>';
news += '<a style="font: Verdanal; font-weight: bold ; text-decoration: none; color: red;" target="_blank" href="' + article[i].url + '">';
news += article[i].headline_text + '</a><br>'
news += '<font size=1><a style="text-decoration: none;" href="' + article[i].document_url +'" target="_blank">' + article[i].source + '</a> - ';
news += article[i].harvest_time + ' </font>';
document.write(news);
}
}

Simpan file diatas dengan nama "news.js", lalu kamu tinggal membuat di HTML seperti ini;

<div id="web" class="news" style="background-color: rgb(240,240,150);">
<script src="http://p.moreover.com/cgi-local/page?c=Indonesia news&o=js" language="JavaScript"></script>
<script language="JavaScript">
tulisNews(3,"Indonesia News");
</script>
</div>

Keterangan: script diatas akan membuat headline "Indonesia News" yang diambil dari "http://p.moreover.com/cgi-local/page?c=Indonesia news&o=js" dan akan ditampilkan dalam 3 baris berita.

Contoh dibawah akan membuat 3 buah news dgn kategori yg berbeda-beda, a.l :

  1. Open Source news (http://p.moreover.com/cgi-local/page?c=Open%20source%20news&o=js)
  2. Virus Warning (http://p.moreover.com/cgi-local/page?c=Virus%20warnings&o=js)
  3. Top Stories (http://p.moreover.com/cgi-local/page?c=Top%20stories&o=js)

<!-- news.html -->

<html>
<head>
<title> News </title>
<script language="JavaScript" src="news.js"></script>
<style type="text/css">
<!--
.news{
font:9pt Verdana,sans-serif;
color: navy;
width:150;
}
-->
</style>
<head>
<body>

<table border="0" cellspacing="0" cellpadding="10">
<tr valign="top">
<td>

<div id="web" class="news" style="background-color: rgb(240,240,150);">
<script src="http://p.moreover.com/cgi-local/page?c=Open%20source%20news&o=js" language="JavaScript"></script>
<script language="JavaScript">
tulisNews(3,"Open Source News");
</script>
</div>

</td><td>

<div id="xml" class="news" style="background-color: rgb(240,150,240);">
<script src="http://p.moreover.com/cgi-local/page?c=Virus%20warnings&o=js" language="JavaScript"></script>
<script language="JavaScript">
tulisNews(3,"Virus Warning");
</script>
</div>

</td><td>

<div id="java" class="news" style="background-color: rgb(150,240,240);">
<script src="http://p.moreover.com/cgi-local/page?c=Top%20stories&o=js" language="JavaScript"></script>
<script language="JavaScript">
tulisNews(3,"Top Stories");
</script>
</div>

</td>
</tr>
</table>
</body>
</html>

Simpan dengan nama news.html, jangan lupa untuk mengganti <script src ="kategori" language="JavaScript"></script> dan dibuat satu baris, dengan kategori yang kamu inginkan, ok! sekarang panggil news.html kamu pakai browser IE atau Netscape dll.+ dengan koneksi internet. (untuk mengambil category yg ada di moreover server )

Hasil :

Bagaimana? tidak susah2 khan membuatnya, hanya perlu pemahaman HTML saja ko + javascript dikit2 :-) Bisa dimodifikasi sesuai kontent web kamu. Semoga berhasil!, jika ada pertanyaan kirim email ke [email protected]

Original category url : http://w.moreover.com/categories/category_list.html

Dibuat di Jakarta, 14 September 2003, pkl. 19:41' WIB

Hosted by www.Geocities.ws

1