Cara Membuat Print sebagian tampilan dengan Javascript - Bagian 1

Seiring dengan semakin berkembangnya jaringan internet menuntut programmer untuk mengembangkan berbagai sistem berbasis web. 

Berbasis web lebih mudah dan praktis karena tanpa perlu instal aplikasi dan komponen-komponen pendukungnya pengguna bisa langsung menggunakannya dengan browser. 

Dalam beberapa tahun belakangan ini banyak program yang dikembangkan dengan sistem berbasis 

web, bahkan software kasir yang sebelumnya identik dengan desktop di beberapa kota yang memiliki koneksi internet baik sekarang sudah menggunakan program berbasis web.

Berbicara tentang program kasir tentu identik dengan mini market yang menjamur di banyak tempat. Satu hal yang paling menonjol dari program kasir itu adalah cetakan struk yang selalu diberikan kasir ketika kita selesai melakukan pembayaran.

Dalam artikel ini Admin akan membagikan sedikit tutorial sederhana tentang bagaimana mencetak tampilan struk kasir dengan menggunakan HTML dan Javascript.

Langkah pertama buatlah sebuah tampilan layout yang akan dicetak dan tombol print dengan menggunakan HTML. 

Jika Anda masih awam tentang HTML silahkan pelajari di W3School.. klik link ini (Cara belajar HTML dengan cepat dan Mudah walau dengan kemampuan bahasa inggris minim).

Buatlah tampilan sederhana seperti di bawah ini.

Atau bisa download source codenya 

Kemudian pada source code bagian atas tambahkan tombol Print dengan script seperti berikut

<button onClick="window.print();">Print</button> 

Sehingga tampilan menjadi seperti di bawah ini

Coba tekan tombol Print, maka browser akan memunculkan menu Print.

Permasalahannya adalah tombol print dan keterangan lainnya yang tidak perlu dicetak juga muncul pada hasil cetak. Bagaimana cara mengatasinya silahkan lihat di artikel berikutnya. :)