Mencetak Data Langsung Dari Browser

Yenda Purbadian  Selasa, 05 September 2017  PHP & OOP PHP  268 4
no images

Bagi seorang WEB Developer mungkin proses untuk mencetak data atau membuat laporan benar-benar merepotkan terutama masalah yang berkenaan dengan kerapian format cetakan. Penulis juga merasakan hal tersebut, meskipun untuk saat ini web base memang belum begitu support untuk pencetakan data yang rumit seperti halnya mencetak struk, akan tetapi fasilitas yang disediakan javascript cukup untuk membuat suatu halaman cetakan pelaporan. Lain halnya dengan Visual Basic dengan Crystal Reportnya, dimana pada Crystal Report sudah terdapat fungsi atau menu untuk mengatur proses cetak data sehingga memudahkan kita untuk mengatur tiap halaman, ukuran kertas, header/footer, dll.

Kembali pada pokok pembahasan. Pada tutorial kali ini penulis ingin share tentang proses cetak data langsung dari browser, yang perlu diperhatikan bahwa untuk mencetak suatu data dari web browser kita selalu membutuhkan 2 jendela, 1 jendala untuk menampilkan data (preview), 2 sebagai platform pencetakan data (printing). Jika semuanya kita jadikan satu jendela, baik preview maupun printing maka nantinya seluruh elemen yang ada di halaman web, termasuk tombol juga akan ikut tercetak.

Pertama Anda buat sebuah database dengan nama dbpenjualan, kemudian buat juga table dengan nama barang, lalu buat 5 buah field seperti dibawah ini :

exp_mysql_xml

Selanjutnya Anda buat sebuah file baru dengan nama preview_data.php, lalu ketik script program dibawah ini :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>proses cetak data</title>
</head>	

<body>
  <table border="1" cellspacing="0">
    <tr>
      <th>No.</th>
      <th>Nama Barang</th>
      <th>Harga Beli</th>
      <th>Harga Jual</th>
      <th>Stock</th>
    </tr>
    <?php
    mysql_connect("localhost","root","");
    mysql_select_db("dbpenjualan");
    
    $qry = mysql_query("SELECT * FROM barang");
    
    $no=1;
    while($y=mysql_fetch_array($qry)){
    ?>
      <tr>
        <td><?php echo $no ?></td>
        <td><?php echo $y[nama_brg]; ?></td>
        <td><?php echo $y[harga_beli]; ?></td>
        <td><?php echo $y[harga_jual]; ?></td>
        <td><?php echo $y[stock]; ?></td>
      </tr>
    <?php
     $no++;
    }
    ?>
  </table>
</body>
</html>

Lalu buka browser Anda maka hasilnya sebagai berikut :

cetak_js

Sampai disini kita telah berhasil menampilkan data dari database. Untuk proses selanjutnya kita akan menduplikasi file preview_data.php, oleh karena itu buka file preview_data.php menggunakan editor apa saja terserah Anda, kemudian simpan sebagai file baru dengan cara melakukan SAVE AS dan beri nama file tersebut printing_data.php. Kemudian pada file printing_data.php sisipkan CSS pada bagian tag <head>….</head> sebagai berikut :

<head>
  <style type="text/css">
  body{width:500px;}
  </style>
</head>

Simpan file printing_data.php. Kemudian pada file preview_data.php kita akan menambahkan sebuah tombol dengan tujuan untuk melakukan aksi cetak data, oleh karena itu Anda sisipkan lagi script berikut sebelum elemen penutup </body>, adapun script programnya bias Anda lihat dibawah ini :

  <br />
  <input type="button" value="Cetak" onclick="cetak()" />
</body>

Masih pada file preview_data.php, kita akan menambahkan sebuah fungsi dengan tujuan untuk melakukan aksi cetak data. Nah disinilah proses cetak data terjadi, logikanya ketika user melakukan klik pada tombol cetak, maka panggil file printing_data.php untuk proses cetak data pada browser lalu tampilkan hasil print out-nya pada layar. Oleh sebab itu Anda ketik lagi script program berikut pada bagian tag <head>…..</head> :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>proses cetak data</title>
  <script type="text/javascript">
    function cetak(){
	  win = window.open("printing_data.php", "win", "width=300, height=400, menubar=0, scrollbars=0, resizable=0, toolbar=0, status=0, url=0");
	}
  </script>
</head>

 Selanjutnya kita mengatur jalannya cetak data, adapun file yang berperan dalam hal ini adalah printing_data.php, maka dari itu kita tambahkan lagi script program pada file printing_data.php tepatnya pada elemen <body>, adapun script programnya bisa Anda lihat dibawah ini :

<body onload="window.print()" onfocus="window.close()">

Simpan file printing_data.php lalu Anda jalnkan programnya, maka hasil akhirnya seperti dibawah ini :

cetak_browser3

Oke, sampai disini penjelasannya, untuk link downloadnya silahkan klik disini..

Sampai bertemu lagi diartikel selanjutnya..

Artikel Terkait :

Tidak ada artikel terkait

Komentar :

  • ...
    01 September 2014 13:44:42

    Hebat banget.. bermanfaat banget tutorialnya mas. izin download y,,

  • ...
    Yenda Purbadian
    13 Oktober 2014 11:33:03

    Silahkan Mas. Semoga bermanfaat.

  • ...
    julian
    20 Oktober 2014 20:01:41

    wah printing yang langsung gtu pake kode ini yah ? nanti ane terapin ke php nya ,, thanks infonya gan saya berterima kasih banget atas tutor yang diberikan, memberikan inspirasi sekali..

  • ...
    Yenda Purbadian
    21 Oktober 2014 07:36:05

    Oke siipp..

Tinggalkan Komentar :