Anda di halaman 1dari 7

Artikel Populer IlmuKomputer.

Com
Copyright © 2005 IlmuKomputer.Com

Membuat Html Report di Delphi


Ashadi Cahyadi
Hadi_stiki@telkom.net

Lisensi Dokumen:
Copyright © 2005 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang
disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,
kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Introduksi
Ketika anda ingin membuat Report di Delphi pasti anda akan menggunakan Quick
Report atau Rave Designer. Tetapi bagamaina jika anda ingin membuat suatu report
yang mempunyai desain yang menarik tanpa harus pusing memikirkan kode-kode yang
rumit atau komponen apa yang akan digunakan? Jawabannya mudah. Anda tinggal
membuat report dari file Html. Kenapa Html? Karena dengan html kita bisa membuat
tampilan yang ciamik “on the fly” tanpa memikirkan scriptnya. Cukup menggunakan
Html Editor dan sedikit trik, bahkan anda bisa menyisipkan flash didalamnya. Kok bisa
? anda akan temukan jawabannya setelah ini.

Catatan
Disini tidak akan dibahas mengenai dasar-dasar pemrograman delphi. Diharapkan anda
sudah tahu tentang cara pemrograman database dengan delphi dan sedikit mengenai
HTML. Untuk anda yang masih belum mengetahui sama sekali ya… mohon maaf.
Karena saya juga masih belajar dalam menulis artikel .☺ jadi masih bingung

Let’s Go…
Yang anda perlukan untuk membuat proyek ini adalah :
1. Html editor, bisa menggunakan Dreamweaver, frontpage atau sejenisnya yang
penting bisa membuat tabel. Kalo mau, anda juga bisa menulisnya sendiri
menggunakan notepad. Tapi siapa yang mau repot ya?
2. Tentu saja Program Delphi. terserah mau pake’ versi berapa, tapi disini saya
menggunakan versi 7.
3. Sedikit kreativitas dalam mendesain, itu juga kalau anda mau membuat tampilan
yang nyeleneh.. (bagus sekali)

Langkah-langkah
Anda harus membuat database dulu. Lho kok? Ya pasti lah wong Report kan ambil
datanya dari database. (sorry tadi lupa bilang he..he..). saya menggunakan Microsoft
Acces, untuk yang lain silakan dicoba sendiri. Saya membuat tabel dengan field-field
sebagai berikut :

1
Artikel Populer IlmuKomputer.Com
Copyright © 2005 IlmuKomputer.Com

Nama tabel : Demo


Field Type Size
No AutoNumber
Nama Charakter 30
Alamat Charakter 65
Kota Charakter 35

Setelah itu isi tabel tersebut. (ini hanya untuk demo lho, kalo yang beneran ya harus ada
program inputnya). Terus simpan pada folder yang akan kita gunakan nanti untuk
membuat project di delphi
Ilustrasi :

Gbr. 1 Membuat Tabel

Gbr. 2 Isi Tabel

2
Artikel Populer IlmuKomputer.Com
Copyright © 2005 IlmuKomputer.Com

Kedua anda harus membuat sebuah file Html yang isinya berupa tabel dengan kolom
sama dengan tabel didatabase anda (kok mbulet? Ya pokoknya gitu maksudnya). Yang
perlu anda perhatikan disini adalah menyisipkan tagString pada kolom-kolomnya sesuai
dengan nama field-field tabel anda (tabel demo). Contoh : <#no>, <#nama>,<#alamat>.
Dan harus sesuai dengan nama fieldnya agar nanti bisa diganti dengan data yang sesuai
oleh delphi. Anda bisa menggunakan frontpage, dll. Dalam hal ini saya menggunakan
dreamweaver. Desain terserah anda, dan anda bisa memasukkan flash, java script, atau
gambar. Kalo mau bagus sih.. Buat tabelnya cukup dua baris saja. Satu untuk header
dan satu untuk tagstringnya.

Ilustrasi

Report menggunakan HTML FILE :


No Nama Alamat Kota
<#no> <#nama> <#alamat> <#kota>

Copyright 2005
Setelah itu anda masuk ke kode editornya.
Maka akan tampak seperti dibawah :
------------------------------------------------------------------*
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
color: #FFFFFF;
font-weight: bold;
}
.style2 {font-family: "Courier New", Courier, mono}
.style3 {color: #FFFFFF; font-weight: bold; font-family: "Courier
New", Courier, mono; }
.style7 {color: #0000FF}
-->
</style>
</head>

<body>
<h1>Report menggunakan HTML FILE :</h1>
<table width="743" border="1">
<tr bgcolor="#0033FF">
<td width="43"><div align="center" class="style1
style2">No</div></td>
<td width="275"><div align="center" class="style3">Nama</div></td>
<td width="172"><div align="center"
class="style3">Alamat</div></td>
<td width="225"><div align="center" class="style3">Kota</div></td>
</tr>
<tr>
<td><#no></td>
<td><#nama></td>
<td><#alamat></td>
<td><#kota></td> </tr>
3
Artikel Populer IlmuKomputer.Com
Copyright © 2005 IlmuKomputer.Com

</table>
<h1 class="style7">Copyright 2005 </h1>
</body>
</html>
--------------------------------------------------------*
Langkah selanjutnya adalah memecah script tersebut menjadi tiga bagian yaitu header,
isi dan footer.
Buka notepad atau teks editor lain terus copy bagian :
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
color: #FFFFFF;
font-weight: bold;
}
.style2 {font-family: "Courier New", Courier, mono}
.style3 {color: #FFFFFF; font-weight: bold; font-family: "Courier
New", Courier, mono; }
.style7 {color: #0000FF}
-->
</style>
</head>

<body>
<h1>Report menggunakan HTML FILE :</h1>
<table width="743" border="1">
<tr bgcolor="#0033FF">
<td width="43"><div align="center" class="style1
style2">No</div></td>
<td width="275"><div align="center" class="style3">Nama</div></td>
<td width="172"><div align="center"
class="style3">Alamat</div></td>
<td width="225"><div align="center" class="style3">Kota</div></td>
</tr>

Simpan dan beri nama header.txt pada folder yang sama dengan database.

4
Artikel Populer IlmuKomputer.Com
Copyright © 2005 IlmuKomputer.Com

Selanjutnya select pada bagian :


<tr>
<td><#no></td>
<td><#nama></td>
<td><#alamat></td>
<td><#kota></td> </tr>

Copy ke notepad dan simpan dengan nama isi.txt

Yang terakhir select bagian

</table>
<h1 class="style7">Copyright 2005 </h1>
</body>
</html>

Copy ke notepad dan simpan dengan nama footer.txt

Beginning
Saatnya anda masuk ke Delphi, buat form baru dengan komponen-komponen sbb :
Ado Connection : hubungkan dengan database yang telah dibuat tadi
Ado Query , set connection ke Ado Connection dan Sql String isi dengan “select * from
demo”
Data Set Page Producer pada page Internet, set dataset ke Ado Query ;
Button untuk menampilkan report tadi:

Yang perlu anda perhatikan adalah menggunakan unit shellApi pada uses di unit tadi

5
Artikel Populer IlmuKomputer.Com
Copyright © 2005 IlmuKomputer.Com

Contoh gambar Setting


Komponen-komponen :

Ado Query Setting :

Double klik pada button tampil dan tulis script berikut :


procedure TForm1.Button1Click(Sender: TObject);
var
Outfile : TextFile;
Begin
ADOQuery1.Close;
6
Artikel Populer IlmuKomputer.Com
Copyright © 2005 IlmuKomputer.Com

ADOQuery1.Open;
AssignFile(Outfile,'Demohtml.htm');
rewrite(Outfile);
DataSetPageProducer1.HTMLFile := 'header.txt';
write (outfile,DataSetPageProducer1.content);
DataSetPageProducer1.HTMLFile := 'isi.txt';
AdoQuery1.Prior;
while not AdoQuery1.Eof do
begin
write (outfile,DataSetPageProducer1.content);
AdoQuery1.Next;
end;
DataSetPageProducer1.HTMLFile := 'footer.txt';
write (outfile,DataSetPageProducer1.content);
closefile(Outfile);
ShellExecute(Handle,'Open',pchar('Demohtml.htm'),'
',nil,SW_SHOWMAXIMIZED);
end;

Simpan project tersebut pada folder yang sama. Dan kompile form tersebut maka akan
tekan tombol tampil, maka akan muncul :

Penutup
Karena kita membuat report dengan html maka kita bisa mengubah tampilannya tanpa
harus mengkompile ulang program kita, tapi cukup dengan membuatnya dengan html
editor dan memecahnya menjadi tiga bagian file untuk disisipkan ke Delphi. Anda juga
bisa menambahkan Flash, java Scipts untuk mempercantik tampilan tanpa harus
memprogram ulang lagi di Delphi.cukup mengotak-atik tiga file tadi.. caranya gimana?
Itu tergantung kreativitas anda ☺. Good Luck!
Note : untuk yang masih bingung silahkan download source kodenya. Maklum
penulisnya masih belajar bikin artikel.
7