Mencetak Modal Bootstrap

Pada contoh script kali ini masih membahas tentang  pemanfaatan modal bootstrap kali ini untuk membuat preview pencetakan dan melakukan pencetakan setelah sebelumnya penulis membahas tentang :

1. Membuat Dialog Konfirmasi dengan Modal Bootstrap
2. Membuat Detail Data dengan Modal Bootstrap

Pada modal bootstrap, jika kita tidak membuat css tambahan maka ketika membuat tombol cetak didalam modal bootstrap maka seluruh layar akan tercetak. Untuk jelasnya perhatikan contoh berikut, penulis memiliki aplikasi untuk mencetak invoice seperti berikut :

Dari contoh diatas jika kita meng-klik tombol cetak, maka hasil pencetakan akan tampak seperti berikut :

Perhatikan gambar diatas, anda lihat dibelakang modal bootstrap seluruh tampilan layar tercetak, padahal kita menginginkan bagian invoice nya saja yang tercetak, sehingga tampilan hasil pencetakan yang kita inginkan seperti berikut :

Bagaimana membuatnya ? berikut tutorial membuat aplikasi pencetakan invoice menggunakan modal bootstrap dengan Framework Codeigniter (untuk kasus PHP procedural sama saja)

1. Buat database (misal latihan_ci)
2. Buat tabel kwitansi
   
3. Buat tabel detail_kwitansi
   
4. Buat view di phpmyadmin
   
5. Buat Controller home
   
6. Buat Controller Invoice
   
7. Buat model M_invoice
   
8. Buat css print-bootstrap.css simpan di direktori bootstrap/css (ini adalah bagian terpenting)
   
9. Buat view home, pada bagian sebelum tag penutup </body> buat script untuk menampilkan modal bootstrap dan menampilkan data penjualan. Pada bagian home  buat div dengan class noprint agar bagian yang ada pada area div noprint tidak dicetak
   
10. Buat view DataInvoice
    
    Perhatikan bagian tag link href diatas, sesuikan nama class dan value atribut href dengan penamaan class class pada modal bootstrap
11. Jalankan aplikasi jika sukses maka modal bootstrap akan dapat dijalankan, dan sebagai bahan pembelajaran silahkan download scriptnya pada link dibawah ini :

DOWNLOAD