.:: Blackc0de Forum ::.
Would you like to react to this message? Create an account in a few clicks or log in to continue.

-=Explore The World From Our Binary=-
 
HomeIndeksLatest imagesPendaftaranLogin

 

 membuat laporan dan solusi printing di aplikasi berbasis web

Go down 
3 posters
PengirimMessage
zer0cool
Newbie - Hack
Newbie - Hack
zer0cool


Jumlah posting : 363
Points : 807
Reputation : 24
Join date : 22.06.11

membuat laporan dan solusi printing di aplikasi berbasis web Empty
PostSubyek: membuat laporan dan solusi printing di aplikasi berbasis web   membuat laporan dan solusi printing di aplikasi berbasis web Icon_minitimeSat Jan 28, 2012 9:29 pm

Banyak teman-teman di web ini yang bertanya tentang bagaimana cara bikin laporan dengan PHP. Berikut pertanyaan yang sering muncul:

Gimana cara bikin laporan di web?
Gimana sih cara bikin laporan dengan PDF file?
Gimana sih cara export web ke MS Excel?
Gimana sih cara export web ke MS Word?
Saya pusing dengan FPDF. Harus main koordinat. Apa ada penyelesaian yang lebih mudah?
Cara print di web yang mudah?
Baiklah pada artikel kali ini gw akan memberi masukan mengenai pertanyaan-pertanyaan di atas. Walaupun tidak menjawab semua pertanyaan tapi gw berharap penyelesaian ini bisa menyelesaikan masalah Anda.

Kalo menjawab pertanyaan "Gimana cara bikin laporan di web?" kayaknya penulis sedikit bingung. Soalnya menurut penulis, kalau datanya udah tampil di web ya itulah laporannya dan itu juga yang akan kita cetak. Mungkin bedanya kalo di aplikasi berbasis desktop ada yang namanya "data grid" dan ada yang namanya "laporan". Di aplikasi berbasis desktop laporan biasanya menggunakan Crystal Report.

Mungkin Anda berpendapat bahwa tampilan untuk monitor dan untuk print harusnya berbeda karena tidak mungkin kita membuat laporan cetak dan di situ terdapat menu navigasi, belum lagi background yang menggangu. Yup, setuju. Untuk itu kita harus membuat 2 versi halaman kita. Versi layar monitor dan versi cetak.

Berikut cara-cara membuat dua versi halaman, yakni: versi layar monitor dan versi cetak yang bisa Anda pilih salah satunya:

menggunakan tag PHP untuk memanggil 2 file CSS
menggunakan tag HTML untuk memanggil 2 file CSS
menggunakan @import url
menggunakan satu file CSS untuk dua versi tampilan
1. Menggunakan tag PHP untuk memanggil 2 file CSS

Berikut kode PHPnya dan letakkan di bagian <HEAD> pada kode HTML Anda.

Code:
 view plain  print
  <?php if ($_GET['q'] == "printme") { ?> 
</p> 
<link rel="stylesheet" type="text/css" href="print.css" /> 
<?php } else { ?> 
<link rel="stylesheet" type="text/css" href="default.css" /> 
Kelemahan dari cara ini adalah harus load ulang halaman. bayangkan jika halaman yang akan kita cetak merupakan bentuk rekapitulasi dengan banyak query dan loadnya sangat lama. Wew tidak praktis. Cara ini sama saja dengan membuat link ke halaman baru, dengan desain halaman baru yang minimalis, yang sengaja disiapkan untuk cetak laporan.

2. Menggunakan tag HTML untuk memanggil 2 file CSS

view plain print
<LINK rel="stylesheet" type"text/css" href="style.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
Cara ini yang sering penulis gunakan. Cukup membuat 2 file CSS yang berbeda dan menempatkan tag tersebut di bagian <HEAD>. kemudian menyembunyikan <div> yang tidak ingin kita tampilkan. Lebih lengkapnya bisa dilihat di pembahasan selanjutnya.

3. Menggunakan @import url

view plain print
@import url(print.css) print,projection;
Hampir sama dengan cara di atasnya, cuman beda kode.

4. Menggunakan satu file CSS untuk dua versi tampilan

Code:
view plain  print
  <STYLE type="text/css"> 
@media screen { 
  BODY {font-size: medium; line-height: 1em; background: silver;} 

@media print { 
  BODY {font-size: 10pt; line-height: 120%; background: white;} 

  </STYLE> 

cara ini juga bagus dan bahkan hanya menggunakan 1 file CSS. Yup, style untuk dua versi tampilan (layar dan printing) dalam satu file CSS.


Baiklah, sekarang kita mulai praktek membuat laporan di web yang bisa langsung kita cetak. Tapi sebelumnya mari kita lihat versi layar untuk aplikasi SIMPEG yang penulis buat.

Code:
 view plain  print
#atas{ 
height: 100px; /*Height of top section*/ 
background:url(items/header.jpg) repeat-x #2D1721; 

 
#atas h1{ 
margin: 0; 
padding-top: 15px; 

 
#wrapper{ 
float: left; 
width: 100%; 

 
#isi{ 
margin-right: 170px; 

 
#kanan{ 
float: left; 
width: 170px; /*Width of right column in pixels*/ 
margin-left: -170px; /*Set left margin to -(RightColumnWidth) */ 

 
#bawah{ 
clear: left; 
width: 100%; 
background: black; 
color: #FFF; 
text-align: center; 
padding: 4px 0; 
File di atas disimpan dengan nama layar.css

Berikut tampilannya:

[You must be registered and logged in to see this image.]

Kalau untuk printing tentunya kita harus menyingkirkan <div> yang tidak diperlukan. Dengan CSS kita bisa menyembunyikannya. Berikut CSS lengkapnya.

Code:
view plain  print
#atas, #kanan, #bawah 
{display:none;} 
 
#wrapper{ 
float: left; 
width: 100%; 

 
#isi{ 
width: 100%; 
Selanjutnya disimpan menjadi print.css

Dan untuk format tampilan <div> yang masih kita tampilkan perlu mendapat beberapa perubahan, seperti lebar kita set 100% dan background gambar kita ubah menjadi background warna putih.

Untuk menampilkan 2 file CSS di atas kita menggunakan kode sebagai berikut:

Code:
view plain  print
<LINK rel="stylesheet" type"text/css" href="layar.css" media="screen"> 
<LINK rel="stylesheet" type"text/css" href="print.css" media="print"> 
<p> 
Cukup begitu saja. Apabila dilihat melalui print preview hasilnya seperti ini:

[You must be registered and logged in to see this image.]

Kembali Ke Atas Go down
zer03s
Administrator
Administrator
zer03s


Jumlah posting : 2471
Points : 4119
Reputation : 113
Join date : 13.12.10
Age : 32
Lokasi : /home/root/blackc0de

membuat laporan dan solusi printing di aplikasi berbasis web Empty
PostSubyek: Re: membuat laporan dan solusi printing di aplikasi berbasis web   membuat laporan dan solusi printing di aplikasi berbasis web Icon_minitimeMon Feb 13, 2012 6:47 pm

thanks gan tutornya :jempol1
Kembali Ke Atas Go down
http://zer03s.blog.com/
cinta_code
Trainee
Trainee
cinta_code


Jumlah posting : 87
Points : 102
Reputation : 3
Join date : 27.02.12

membuat laporan dan solusi printing di aplikasi berbasis web Empty
PostSubyek: Re: membuat laporan dan solusi printing di aplikasi berbasis web   membuat laporan dan solusi printing di aplikasi berbasis web Icon_minitimeMon Feb 27, 2012 10:31 pm

gan, kalau yg ingin kita print db nya gmn?

gini, user melakukan pendaftaran online, lalu user ingin print data dia gmn??
Kembali Ke Atas Go down
Sponsored content





membuat laporan dan solusi printing di aplikasi berbasis web Empty
PostSubyek: Re: membuat laporan dan solusi printing di aplikasi berbasis web   membuat laporan dan solusi printing di aplikasi berbasis web Icon_minitime

Kembali Ke Atas Go down
 
membuat laporan dan solusi printing di aplikasi berbasis web
Kembali Ke Atas 
Halaman 1 dari 1

Permissions in this forum:Anda tidak dapat menjawab topik
.:: Blackc0de Forum ::. :: Webmaster :: Web Development-
Navigasi: