Selasa, 07 Agustus 2007

Printer Friendly Page

Kali ini tantangan yang muncul adalah pembuatan printer friendly page atau apapun namanya yang akan memberikan fasilitas bagi user untuk melakukan pencetakan halaman yang diinginkannya tanpa harus terlalu banyak melakukan editing dan hasilnya nanti tidak mengikutkan bagian yang tidak penting. Karena aplikasi ini adalah aplikasi berbasis web, maka bagian ini misalnya menu, header, footer dan yang lainnya.

Dimisalkan sebuah halaman web seperti ini:


*--------------------------*
| |
| HEADER SITE |
| |
*--------------------------*
| MENU |
*-----*--------------------*
| | |
| SUB | |
| MENU| DATA |
| | YG |
| | INGIN |
| | DIPRINT |
| | |
*-----*--------------------*
| FOOTER |
*--------------------------*


Sehingga permasalahan kita adalah pada saat user memilih untuk memproses halaman tersebut menjadi printer friendly page, maka yang tampil hanyalah pada bagian DATA YG INGIN DIPRINT.

Namun sebelum hal tersebut kita lanjutkan, sebenarnya terdapat beberapa cara yang dapat dilakukan untuk implementasi printer friendly page. Cara tersebut adalah menggunakan CSS atau membuat suatu mekanisme sendiri. Untuk tulisan ini saya akan menggunakan sebuah mekanisme sendiri untuk mendapatkan halaman yang printer friendly.
Misalkan untuk format halaman web diatas kita menggunakan penulisan kode seperti ini dengan menggunakan table:


<table>
<tr>
<td>
HEADER SITE
</td>
</tr>
<tr>
<td>
MENU
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td> SUB MENU </td>
<td> DATA YANG INGIN DIPRINT </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
FOOTER
</td>
</tr>
</table>


Untuk mendapatkan kemampuan menampilkan printer friendly page itu saya harus memikirkan sebuah mekanisme untuk memberikan penanda di halaman, dimana penanda tersebut dapat memberikan garis pemisah diantara bagian halaman yang bisa dicetak dan tidak. Penanda tersebut sendiri haruslah compatible dengan syntax yang ada dan tidak akan menimbulkan error pada saat ditampilkan di layar user. Untuk itu saya menggunakan cara yang kuno dengan menggunakan syntax comments di HTML dan tulisan unique di dalamnya. Untuk kesempatan ini saya menggunakan <!--$DPS$--> untuk "Data Print Start" dan <!--$DPE$--> untuk "Data Print End".
Karena itu format halaman web tersebut kodenya ditulis seperti ini ...


...
<td> SUB MENU </td>
<td><!--$DPS$--> DATA YANG INGIN DIPRINT <!--$DPE$--><td>
...


Kemudian permasalahan selanjutnya adalah proses untuk menampilkan halaman yang hanya menampilkan bagian diantara syntax <!--$DPS$--> dan <!--$DPE$-->. Karena saya menggunakan ASP, maka saya mencari tahu dan kemudianmendapatkan cara untuk melakukan eksekusi terhadap suatu halaman dan mendapatkan hasilnya menggunakan object Microsoft.XMLHTTP. Lalu saya tinggal menggunakan property yang dimiliki: Open, Send dan ResponseBody seperti yang ditunjukkan oleh kode dibawah ini; dimana sPageTarget adalah alamat URL lengkap halaman yang ingin kita proses.


....
Set xml_http = Server.CreateObject("Microsoft.XMLHTTP")
Call xml_http.Open( "GET", sPageTarget , false )
xml_http.Send
strContent = xml_http.responseBody
Set xml_http = Nothing
...


Namun hasil proses ini masih dalam format binary, sehingga kita harus melakukan konversi ke karakter dengan membuat sebuah fungsi konversi.


Function BinaryToString(Binary, CharSet)
'--- Converts the binary content to text
Const adTypeText = 2
Const adTypeBinary = 1
'--- Create Stream object
Dim BinaryStream 'As New Stream
Set BinaryStream = CreateObject("ADODB.Stream")
'--- Specify stream type - we want To save text/string data.
BinaryStream.Type = adTypeBinary
'--- Open the stream And write text/string data To the object
BinaryStream.Open
BinaryStream.Write Binary
'--- Change stream type To binary
BinaryStream.Position = 0
BinaryStream.Type = adTypeText
'--- Specify charset For the source text (unicode) data.
If Len(CharSet) > 0 Then
BinaryStream.CharSet = CharSet
Else
BinaryStream.CharSet = "UTF-8"
End If
'--- Open the stream And get binary data from the object
BinaryToString = BinaryStream.ReadText
End Function


Hasil yang didapatkan dari proses tersebut kemudian disimpan di variable strBody lalu diproses dengan algoritma sederhana.


...
strBody = BinaryToString(strContent, "")
content_start = instr(strBody, "") + 12
content_end = instrrev(strBody, "") ' for better feature, we used inStrRev ...
...


Seperti yang Anda tebak, kita tinggal mengambil bagian dari strBody dimulai dari content_start hingga content_end.


...
strBody = mid(strBody, content_start, content_end - content_start)
...


Dari hasil tersebut akan kita dapatkan bagian halaman yang dikatakan orang-orang sebagai printer friendly page :). Tentunya itu adalah dasar dari teknik ini dan sebenarnya kita harus melakukan beberapa percobaan yang lumayan menantang ;), misalkan bagaimana agar hasil proses tersebut bisa ditampilkan sama persis formatnya dengan sebelum dia diproses!
Saya serahkan buat Anda untuk mencoba sendiri :D ...

Selesai deh ...

thanks to www.livio.net

Tidak ada komentar: