Ashadi Cahyadi

Membuat Html Report di Delphi Ashadi Cahyadi Hadi_stiki@telkom.net Lisensi Dokumen: 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

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

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

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

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

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

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