Mencetak area tertentu pada web dengan JQuery.PrintArea

Pada tutorial kali ini kita akan memanfaatkan plugin Jquery.PrintArea untuk mencetak area tertentu pada aplikasi yang telah kita buat. Berikut ini langkah-langkahnya.

Langkah 1: Mempersiapkan Kebutuhan

  1. Buat folder printarea pada folder root webserver
  2. Unduh JQuery di sini
  3. Unduh JQuery.PrintArea di sini
  4. Unduh bootstrap.min.css di sini
  5. Simpan semua berkas yang sudah di unduh dalam folder printarea

Langkah 2: Membuat berkas yang dibutuhkan

index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JQuery Print Area</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="bootstrap.min.css" rel="stylesheet" media="screen">
	
	<!-- css yang digunakan ketika dalam mode screen -->
	<link href="style.css" rel="stylesheet" media="screen">
	
	<!-- ss yang digunakan tampilkan ketika dalam mode print -->
	<link href="print.css" rel="stylesheet" media="print">
	
	<script src="jquery-1.8.3.min.js"></script>
	<script src="jquery.PrintArea.js"></script>
	<script>
		(function($) {
			// fungsi dijalankan setelah seluruh dokumen ditampilkan
			$(document).ready(function(e) {
				
				// aksi ketika tombol cetak ditekan
				$("#cetak").bind("click", function(event) {
					// cetak data pada area <div id="#data-mahasiswa"></div>
					$('#data-mahasiswa').printArea();
				});
			});
		}) (jQuery);
	</script>
</head>

<body>

<div class="navbar navbar-static-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="http://umsida.ac.id">Univ. Muhammadiyah Sidoarjo</a>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">

		<h3>
			Daftar Mahasiswa
			<button id="cetak" class="btn pull-right">Cetak</button>
		</h3>
		
		<div id="data-mahasiswa">
		
		<!-- tampilkan ketika dalam mode print -->
		<div class="title">
			<center>
				DAFTAR MAHASISWA<br/>
				FAKULTAS TEKNIK<br/>
				UNIVERSITAS MUHAMMADIYAH SIDOARJO
			</center>
		</div>
		
		<table class="table table-condensed table-bordered table-hover" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<th width="2%">#</th>
				<th width="12%">NIM</th>
				<th width="20%">Nama</th>
				<th>Alamat</th>
				<th width="12%">Kelas</th>
				<th width="12%">Status</th>
				<th width="9%" class="action"></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1. </td>
				<td>08.10802.00234</td>
				<td>Ari Effendi</td>
				<td>Gedangan</td>
				<td>E Sore</td>
				<td>Aktif</td>
				<!-- sembunyikan ketika dalam mode print -->
				<td class="action">
					<a href="#" class="btn btn-mini">Ubah</a>
					<a href="#" class="btn btn-mini">Hapus</a>
				</td>
			</tr>
		</tbody>
		</table>		
		
		</div>
	</div>
</div>

</body>
</html>

style.css


/* sembunyikan judul */
.title {
	display: none;
}

print.css


/* menyembunyikan tombol aksi */
.action {
	display: none;
}

/* memberikan border pada tabel */
.table { border-right: 1px solid black; border-bottom: 1px solid black; }
.table th, .table td { border-left: 1px solid black; border-top: 1px solid black; padding: 3px; font-size: 12px}

Langkah 3: Menguji Aplikasi

Buka browser kemudian ketikkan pada addressbar localhost/printarea/, tekan tombol cetak. Jika berhasil akan tampil kotak print dialog.

print-area-1

print-area-2

Unduh Kode

Iklan

Pagination dan Searcing menggunakan PHP, Jquery, dan Twitter Bootstrap

Tutorial ini adalah pengembangan dari artikel sebelumnya. Jika kemarin kita belajar melakukan proses CRUD ke database MySQL menggunakan PHP dan Jquery. Maka, artikel ini menambahkan fungsi pencarian (searching) dan pembagian data yang ditampilkan tiap halaman(pagination). Bagi yang masih bingung langsung saja kita mulai tutorial ini sambil dipahami tahap demi tahap.

Baca lebih lanjut

Kode CRUD sederhana menggunakan PHP, Jquery, dan Twitter Bootstrap

Pada tutorial kemarin kita sudah mencoba membuat fungsi koneksi ke database MySQL. Sekarang kita akan belajar melakukan proses CRUD ke database MySQL, bagi teman-teman yang biasa menggunakan bahasa pemrograman PHP pasti tidak asing dengan proses CRUD (Create Update Delete). Namun, untuk kali ini kita akan melakukan proses CRUD menggunakan PHP dan Jquery sehingga proses post akan dilakukan di balik layar (pengguna tidak akan pindah halaman saat proses CRUD berlangsung). Sedangkan untuk tampilan, agar terlihat lebih cantik dan dinamis kita akan menggunakan Twitter Bootstrap sebagai framework-nya.

Bagi yang masih bingung langsung saja kita mulai tutorial ini sambil dipahami tahap demi tahap.
Baca lebih lanjut