Membuat Html Report di Delphi ~ AgroTEKNOLOGI

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

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.

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

</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>
</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">

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

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.

Double klik pada button tampil dan tulis script berikut :
procedure TForm1.Button1Click(Sender: TObject);
var
Outfile : TextFile;
Begin
ADOQuery1.Close;
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.

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.

Posted in: Delphi

AgroTEKNOLOGI

Blog Teman

Pilih Bahasa

Sunday, 6 March 2011

Membuat Html Report di Delphi

0 komentar:

Post a Comment