Mencetak dokumen ke Printer Dot Matrix dari browser; Just a story.

Artikel ini ditulis ketika ada laporan ditemukannya bug-bug pada aplikasi-aplikasi internal di tempat penulis bekerja secara bersamaan. Hufftt, Saya perlu intermezo.

Oke, mari kita rehat sejenak dengan cara menulis artikel. Sudah hampir seminggu ini saya berkutat dengan masalah print laporan bertipe continous-form pada Prnter Dot Matrix Epson LX-300 II.

Epson LX 300-II

Printer tipe ini sangat powerfull dikalangan perusahaan untuk membuat laporan yang mempunya cetak copy pada lembaran kertasnya. Jadi jangan heran kalau di Indonesia masih banyak yang pakai, secara menurut kalangan bisnis, metode print nya murah(dibanding dengan printer laser), cepat dan efisien(dalam hal copy document), meski menimbulkan suara berisik pada saat head nya bergerak.

Secara, bahwa Saya adalah seorang web developer yang berarti bermain pada lingkungan browser internet. Saya membangun aplikasi web ini menggunakan Yii2 framework, dan untuk menggenerate laporan biasanya kita akan menggunakan PDF atau paling banter kita tampilkan Plain HTML yang kita styling menggunakan CSS kemudian memaksa nya dengan javascript untuk menampilkan popup orint dengan window.print()

Popup print dari browser

Disinilah letak masalahnya, karena jika kita menggunakan print langsung dari browser, secara default dokumen yang Kita tampilkan pada browser akan dikirim ke printer sebagai Image. Yup, sebuah image layaknya sebuah foto yang dibangun menggunakan kotak-kotak piksel.

Sedangkan printer EPSON ini melakukan printing sebagai text. Yah, semuanya text, alias printer akan membaca dokumen sebagai karakter-karakter kita dalam standard ASCII.

Table ASCII

Jadi kalau kita paksakan menggunakan Mode Image saat print, berdasarkan percobaan Saya, hasilnya kurang memuaskan, seperti:

1. Hasil print yang kurang jelas (image-kan menerapkan pixel, bukan text), karena pin dari head Epson itu sendiri tidak bekerja seperti itu,
2. Kecepatan print yang akan melambat, karena meskipun ada bagian kosong (blank) di dokumen akan tetap dibaca dan dicetak pada printer, (Secara jargon, dot-matrik ini memang cepat dalam melakukan cetak laporan).

Continous form — 3 Ply yang biasa digunakan untuk laporan

Sampai sejauh ini, sudah beberapa cara yang saya gunakan, antara lain:

1. Menggunakan PDF, (Mode Image jatuhnya)
2. Membuat Plain HTML, kemudian set ukuran kertas; styling menggunakan CSS. (Mode Image jatuhnya)
3. PHP langsung melakukan Direct print dengan cara meng-copy file temporary ke path printer (yang sudah disharing). Cara ini sebenarnya bisa menjadi Mode text dan memang “works”, tapi menimbulkan masalah baru buat saya.

Untuk point 3, Saya agak kesusahan mengatur style untuk tabel yang ada didalam laporan, bagaimana mengatur supaya bordering, wordwrap, dsb. Secara, semua adalah text (String). (Coba bisa pakai CSS, mudah, harap maklum karena => programmer milenial).

Browsing lagi, ketemu dengan metode ini: https://stackoverflow.com/questions/5082211/how-to-output-a-simple-ascii-table-in-php . Lumayan sesuai lah dengan apa yang Saya inginkan.

Contoh Zend Table library

Untuk me-manage isi dari dokumen, PHP mempunyai beberapa fungsi built-in untuk manipulasi String: https://www.php.net/manual/en/ref.strings.php . Beberapa yang Saya gunakan dalam kasus ini sebagai berikut:

1. chunk_split(), untuk memaksa panjang string untuk turun ke baris baru jika mencapai maksimal karakter dalam satu line(baris). https://www.php.net/manual/en/function.chunk-split.php
2. wordwrap(), Sama seperti chunk split, tapi ini lebih canggih karena dia akan memotong karakter berdasarkan kata dengan cara menambahkan parameter false pada deklarasinya, https://www.php.net/manual/en/function.wordwrap.php
3. number_format(), untuk formatting angka-angka: https://www.php.net/manual/en/function.number-format.php
4. dsb, sesuai kebutuhan

Tapi menimbulkan problem lagi. PHP perlu tahu lokasi printer tersebut, ada di mana ? Apakah konek via USB, sharing printer dari komputer lain atau sharing dari D-LINK print server. Solusinya, Kita perlu menampung value alamat printer ini di database per user. Benar: PER USER.

copy($file,"//localhost/namaSharing");# Printer tersambung langsung
copy($file,"//IP_ADDRESS/namaSharing");# Printer sharing

Ah, Saya capek. Saya tambahkan saja kolom alamat_dot_matrix_printer di tabel user pada database, kemudian saya sediakan inputan, suruh user mengisi alamat printer tersebut di halaman profile mereka;

Eh, karena WFH, tempat duduk user dikantor kemungkinan diatur ulang, masak harus di set ulang per user. Repot dah. Kepikiran buat .bat file di sisi user/client, belum nyampai ilmu Saya kesitu.

Solusi terakhir, Saya berpikir begini,

PHP adalah server side language. Artinya dia bisa provide data dari server. Printer Dot matrix disisi client, beberapa resource diambil dari internal OS , misalnya saja penggunaan font pada proses cetak,apakah sebaiknya Saya membuat aplikasi / program di Client?

Alkisah, Saya memutuskan untuk buat aplikasi desktopnya. Mau pakai javascript, Electron misalnya sepertinya asik karena lebih kekinian dan masih berkutat dikerjaan harian di lingkungan web development.

Kalau Java, ada Java Swing untuk GUI nya,. Punya beberapa pengalaman pakai ini, seperti buat Java Socket Server yang konek dengan Android Scanner di project Antam Surabaya 2018, bahkan pas saat skripsi kuliah 2010 pun pakai Java. https://www.academia.edu/11561392/Deteksi_Similarity_Source_Code_Menggunakan_Metode_Deteksi_Abstract_Syntax_Tree .

Tapi belum pernah sampai case printing ini. (Lucunya saat kerja malah milih pakai PHP karena cari yang simple).

Oke, browsing lagi, saya menemukan link ini: https://blog.jocki.me/simple-escp/. Simple-ESCP sesuai dengan namanya, asli simple banget. Beberapa artikel di internet juga ada yang membahas librari ini di beberapa lingkungan development, misalnya Java Applet: https://thesolidsnake.wordpress.com/2014/07/21/memakai-simple-escp-pada-aplikasi-web/

Dalam kasus Saya, Yii2 di sisi Server memberikan `response->sendContentAsFile` yang menyediakan data dengan format json file berdasarkan format Simple-ESCP, kemudian di load ulang oleh aplikasi desktop . Ini repo github-nya. https://github.com/ahmadfadlydziljalal/java-dotmatrix

Yii2 cukup membuat ini:

Interpretasi Yii2

Desktop pakai Java Swing

Sejauh ini cukup berhasil untuk kebutuhan saya. Mungkin bisa dikembangkan dengan metode REST HTTP Request. Jadi , app desktop menembak langsung URL laporan yang akan Kita buat, sehingga menjadi jauh lebih secure, misal pakai JWT untuk authentikasi. Jangan ragu, buat pull request aja.

Oke demikian.