Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Laporan Dan Solusi Printing Di Aplikasi Berbasis Web

    Diunggah oleh

    ArdiSaputra
    67 tayangan7 halaman
    laporan aplikasi web

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    laporan aplikasi web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    67 tayangan7 halaman

    Membuat Laporan Dan Solusi Printing Di Aplikasi Berbasis Web

    Diunggah oleh

    ArdiSaputra
    laporan aplikasi web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 7

    Membuat Laporan dan Solusi Printing di

    Aplikasi Berbasis Web


    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:
    1. menggunakan tag PHP untuk memanggil 2 file CSS
    2. menggunakan tag HTML untuk memanggil 2 file CSS
    3. menggunakan @import url
    4. 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.
    view plain print
    1.

    <?php if ($_GET['q'] == "printme") { ?>

    2. </p>
    3. <link rel="stylesheet" type="text/css" href="print.css" />
    4. <?php } else { ?>
    5. <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
    1. <LINK rel="stylesheet" type"text/css" href="style.css" media="screen">
    2. <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
    1. @import url(print.css) print,projection;
    Hampir sama dengan cara di atasnya, cuman beda kode.
    4. Menggunakan satu file CSS untuk dua versi tampilan
    view plain print
    1.

    <STYLE type="text/css">

    2. @media screen {
    3.

    BODY {font-size: medium; line-height: 1em; background: silver;}

    4. }
    5. @media print {
    6.

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

    7. }
    8.

    </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.
    view plain print
    1. #atas{
    2. height: 100px; /*Height of top section*/
    3. background:url(items/header.jpg) repeat-x #2D1721;
    4. }
    5.
    6. #atas h1{
    7. margin: 0;
    8. padding-top: 15px;
    9. }
    10.
    11. #wrapper{
    12. float: left;
    13. width: 100%;
    14. }
    15.

    16. #isi{
    17. margin-right: 170px;
    18. }
    19.
    20. #kanan{
    21. float: left;
    22. width: 170px; /*Width of right column in pixels*/
    23. margin-left: -170px; /*Set left margin to -(RightColumnWidth) */
    24. }
    25.
    26. #bawah{
    27. clear: left;
    28. width: 100%;
    29. background: black;
    30. color: #FFF;
    31. text-align: center;
    32. padding: 4px 0;
    33. }
    File di atas disimpan dengan nama layar.css

    Berikut tampilannya:

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

    1. #atas, #kanan, #bawah


    2. {display:none;}
    3.
    4. #wrapper{
    5. float: left;
    6. width: 100%;
    7. }
    8.
    9. #isi{
    10. width: 100%;
    11. }
    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:
    view plain print
    1. <LINK rel="stylesheet" type"text/css" href="layar.css" media="screen">
    2. <LINK rel="stylesheet" type"text/css" href="print.css" media="print">
    3. <p>

    Cukup begitu saja. Apabila dilihat melalui print preview hasilnya seperti ini:

    Apabila Anda menginginkan file CSS yang standar Anda bisa merujuk ke Hartija Css Print
    Framework.

    Anda mungkin juga menyukai