Thermal Printer : Direct Print Nota Kasir Menggunakan Javascript dan HTML

12 Mar 2022 09:25
Dipost oleh Admin
9.892
0
Share:

Sobatcoding.com - Tutorial Cetak Nota Langsung Menggunakan HTML dan Javascript dengan Thermal Printer

Pada artikel sebelumnya kita telah membahas bagaimana cara direct print ke printer ESC/POS menggunakan php. Kali ini kita akan mencoba fitur direct print atau cetak langsung nota ke printer ESC/POS atau printer thermal via browser menggunakan html, css dan javascript. Kali ini kita menggunakan framework CodeIgniter sebagai contoh.

Bagaimana caranya? kita langsung ke step-stepnya.

Perhatikan langkah-langkah berikut:

Persiapan Database

Sebagai contoh kita siapkan dulu table seperti berikut atau kalian bisa memakai data dari table kalian sendiri.

-- --------------------------------------------------------
-- Host:                         127.0.0.1
-- Server version:               5.7.24 - MySQL Community Server (GPL)
-- Server OS:                    Win32
-- HeidiSQL Version:             11.3.0.6295
-- --------------------------------------------------------

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!50503 SET NAMES utf8mb4 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

-- Dumping structure for table db_koperasi.m_profile
DROP TABLE IF EXISTS `m_profile`;
CREATE TABLE IF NOT EXISTS `m_profile` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `license` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'Nama Laundry',
  `owner` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'Pemilik Laundry',
  `address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `whatsapp` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `nota_name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `nota_address` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `nota_phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `nota_printer` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `license` (`license`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table db_koperasi.m_profile: ~0 rows (approximately)
DELETE FROM `m_profile`;
/*!40000 ALTER TABLE `m_profile` DISABLE KEYS */;
INSERT INTO `m_profile` (`id`, `license`, `name`, `owner`, `address`, `phone`, `whatsapp`, `nota_name`, `nota_address`, `nota_phone`, `nota_printer`, `created_at`, `updated_at`) VALUES
	(1, 'axc', 'KPRI - USAHA GOTONG ROYONG', 'Koperasi Unit Malang', 'Komplek RSJ Dr. Radjiman Wediodiningrat Lawang', '(0341) 427457', '', 'KPRI - USAHA GOTONG ROYONG BANGUN', 'Komplek RSJ Dr. Radjiman Wediodiningrat Lawang', '(0341) 427457', 'c:\\laragon\\', '2020-11-16 10:34:57', '2021-12-30 15:43:09');
/*!40000 ALTER TABLE `m_profile` ENABLE KEYS */;

-- Dumping structure for table db_koperasi.t_customers
DROP TABLE IF EXISTS `t_customers`;
CREATE TABLE IF NOT EXISTS `t_customers` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `code` varchar(10) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `code_old` varchar(25) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `nia` varchar(10) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'Nomor Induk Anggota',
  `name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `nik` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `place_birth` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `date_birth` date DEFAULT NULL,
  `unit` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `pns` tinyint(1) DEFAULT '1',
  `recom_name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `recom_nik` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `recom_place_birth` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `recom_date_birth` date DEFAULT NULL,
  `recom_unit` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `recom_address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `recom_phone` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `register_at` date DEFAULT NULL,
  `limit` double DEFAULT '0' COMMENT 'Limit Piutang',
  `limit_remaining` double DEFAULT '0' COMMENT 'Sisa Limit',
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `deleted_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `deleted_at` (`deleted_at`),
  KEY `code` (`code`),
  KEY `nia` (`nia`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table db_koperasi.t_customers: ~7 rows (approximately)
DELETE FROM `t_customers`;
/*!40000 ALTER TABLE `t_customers` DISABLE KEYS */;
INSERT INTO `t_customers` (`id`, `code`, `code_old`, `nia`, `name`, `nik`, `place_birth`, `date_birth`, `unit`, `address`, `phone`, `pns`, `recom_name`, `recom_nik`, `recom_place_birth`, `recom_date_birth`, `recom_unit`, `recom_address`, `recom_phone`, `register_at`, `limit`, `limit_remaining`, `created_at`, `updated_at`, `deleted_at`) VALUES
	(1, 'C001', NULL, 'P-00001', 'Umum', NULL, NULL, NULL, NULL, NULL, NULL, NULL, '', '', '', NULL, '', '', '', '2021-10-07', 0, -500008, '2020-11-17 08:54:26', '2021-10-07 02:13:29', NULL),
	(2, 'C002', NULL, 'P-00002', 'Wahyu Indra', '645645645646', '-', '1982-10-05', 'SIMRS', 'Mlg', '0812164', 1, '', '', '', NULL, '', '', '', '2021-10-07', 500000, 391600, '2020-11-19 14:21:53', '2021-12-31 09:41:39', NULL),
	(3, 'C003', NULL, 'P-00003', 'Yuli Indah', '4245646456', '-', '2021-10-07', 'RM', 'Malang', '13161561', 1, '', '', '', NULL, '', '', '', '2021-10-07', 500000, 483200, '2020-11-19 14:22:05', '2021-12-31 09:41:32', NULL),
	(4, 'C004', NULL, 'P-00004', 'Yuli Agustin', '12345345', 'Malang', '2021-10-06', 'Rekam Medis', 'Malang, Polehan', '018446464654', 1, '', '', '', NULL, '', '', '', '2021-10-06', 500000, 337600, '2020-11-19 07:32:01', '2021-12-31 09:41:25', NULL),
	(5, 'C005', NULL, 'K-00001', 'Arie', '12123456', 'Bjn', '2001-01-01', 'SIRS', 'MLG', '01424878', 0, '', '', '', NULL, '', '', '', '2021-10-07', 5000000, 4878560, '2021-10-05 07:04:09', '2021-12-30 11:26:58', NULL),
	(6, 'C006', NULL, 'P-00005', 'Indah Ardiyanti', '56456546', '-', '1985-10-05', 'RM', '-', '-', 0, '-', '-', '-', NULL, '-', '-', '-', '2021-10-07', 1000000, 1000000, '2021-10-07 02:08:31', '2021-11-23 14:24:10', '2021-12-06 11:40:15'),
	(7, 'C007', 'M001', NULL, 'Mr. Anonim', NULL, NULL, NULL, NULL, '', '', 1, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, 0, -104500, '2021-12-31 09:11:45', NULL, NULL);
/*!40000 ALTER TABLE `t_customers` ENABLE KEYS */;

-- Dumping structure for table db_koperasi.t_trans
DROP TABLE IF EXISTS `t_trans`;
CREATE TABLE IF NOT EXISTS `t_trans` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `t_date` date DEFAULT NULL,
  `t_datetime` timestamp NULL DEFAULT NULL,
  `invoice` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `customer_id` varchar(15) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `customer` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `disc` double DEFAULT '0' COMMENT '%',
  `total_disc` double DEFAULT '0',
  `sub_total` double DEFAULT '0',
  `ppn` double DEFAULT '0',
  `grand_total` double DEFAULT '0',
  `pay` double DEFAULT '0' COMMENT 'Jumlah bayar',
  `remaining_payment` double DEFAULT '0' COMMENT 'Sisa Bayar',
  `credit` double DEFAULT '0' COMMENT 'Jumlah yang digunakan untuk jurnal transaksi',
  `total_retur` double DEFAULT '0',
  `payment_date` timestamp NULL DEFAULT NULL,
  `payment_type` enum('Tunai','Angsuran') COLLATE utf8mb4_unicode_ci DEFAULT 'Tunai',
  `payment_status` enum('BELUM BAYAR','LUNAS','BELUM LUNAS') COLLATE utf8mb4_unicode_ci DEFAULT 'BELUM BAYAR',
  `angsuran` tinyint(2) DEFAULT NULL COMMENT '(x) angsuran',
  `bunga` double DEFAULT '0' COMMENT 'Bunga %',
  `bunga_angsuran` double DEFAULT '0',
  `total_angsuran` double DEFAULT '0' COMMENT 'Biaya angsuran perbulan',
  `created_by` int(11) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `deleted_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `invoice` (`invoice`),
  KEY `customer_id` (`customer_id`),
  KEY `status_payment` (`payment_status`),
  KEY `deleted_at` (`deleted_at`),
  KEY `t_date` (`t_date`),
  KEY `created_by` (`created_by`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table db_koperasi.t_trans: ~3 rows (approximately)
DELETE FROM `t_trans`;
/*!40000 ALTER TABLE `t_trans` DISABLE KEYS */;
INSERT INTO `t_trans` (`id`, `t_date`, `t_datetime`, `invoice`, `customer_id`, `customer`, `disc`, `total_disc`, `sub_total`, `ppn`, `grand_total`, `pay`, `remaining_payment`, `credit`, `total_retur`, `payment_date`, `payment_type`, `payment_status`, `angsuran`, `bunga`, `bunga_angsuran`, `total_angsuran`, `created_by`, `created_at`, `updated_at`, `deleted_at`) VALUES
	(1, '2022-01-14', '2022-01-14 08:02:00', 'J202201000001', 'C004', 'Yuli Agustin', 0, 0, 35000, 0, 37000, 0, 7400, 7400, 0, NULL, 'Angsuran', 'BELUM BAYAR', 5, 1.1, 2000, 7400, 1, '2022-01-14 08:02:00', NULL, NULL),
	(2, '2022-01-14', '2022-01-14 08:04:27', 'J202201000002', 'C002', 'Wahyu Indra', 0, 0, 0, 0, 0, 0, 0, 0, 0, NULL, 'Tunai', 'LUNAS', NULL, 0, 0, 0, 1, '2022-01-14 08:04:27', NULL, NULL),
	(3, '2022-01-14', '2022-01-14 08:04:41', 'J202201000003', 'C004', 'Yuli Agustin', 0, 0, 3200, 0, 3200, 5000, 0, 0, 0, '2022-01-14 08:04:41', 'Tunai', 'LUNAS', NULL, 0, 0, 0, 1, '2022-01-14 08:04:41', NULL, NULL);
/*!40000 ALTER TABLE `t_trans` ENABLE KEYS */;

-- Dumping structure for table db_koperasi.t_trans_detail
DROP TABLE IF EXISTS `t_trans_detail`;
CREATE TABLE IF NOT EXISTS `t_trans_detail` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `invoice` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `code` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `name` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `item` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `price` double DEFAULT NULL,
  `disc` double DEFAULT NULL,
  `extra` double DEFAULT NULL,
  `tax` double DEFAULT NULL,
  `qty` float DEFAULT NULL,
  `total` double DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `invoice` (`invoice`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table db_koperasi.t_trans_detail: ~3 rows (approximately)
DELETE FROM `t_trans_detail`;
/*!40000 ALTER TABLE `t_trans_detail` DISABLE KEYS */;
INSERT INTO `t_trans_detail` (`id`, `invoice`, `code`, `name`, `item`, `price`, `disc`, `extra`, `tax`, `qty`, `total`) VALUES
	(1, 'J202201000001', '8996001600610', 'Tora Cafe Milky Latte', NULL, 3500, 0, NULL, NULL, 10, 35000),
	(2, 'J202201000002', '25234234', 'ewgert', NULL, 0, 0, NULL, NULL, 1, 0),
	(3, 'J202201000003', '8996001600269', 'Le Mineral 600ml', NULL, 3200, 0, NULL, NULL, 1, 3200);
/*!40000 ALTER TABLE `t_trans_detail` ENABLE KEYS */;

/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IFNULL(@OLD_FOREIGN_KEY_CHECKS, 1) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40111 SET SQL_NOTES=IFNULL(@OLD_SQL_NOTES, 1) */;

Buat Controller dan Route

Kita buat sebuah controller, sebagai contoh PrintController dan buat kode seperti berikut.

<?php

class PrintController extends CI_Controller {

    public function __construct() {
		parent::__construct();
    }

   public function cetakNota($nota)
   {
        $d = $this->db->get_where('t_trans', ['invoice' => $nota ])->row();
        if( !$d ) die("not found");
        $d->detail  = $this->db->get_where('t_trans_detail', ['invoice' => $nota ])->result();
        $profile    = $this->db->select("nota_name, nota_address, nota_phone, nota_printer")->from("m_profile")->get()->row();
        $customer   = $this->db->select('nia, name')->get_where('t_customers', ['code' => $d->customer_id ])->row();

        $this->load->view('nota-generic', ['d' => $d, 'profile' => $profile, 'customer' => $customer]);
   }

Tambahkan route baru contoh sebagai berikut.

$route['print/nota/([A-Za-z0-9]+)'] = 'printController/cetakNota/$1';

Buat Halaman View

Buatlah sebuah view bernama nota-generic.php dan masukkan kode berikut.

<html>
    <head>
        <title>Cetak Nota <?= $d->invoice ?></title>
        <link rel="stylesheet" href="<?= asset('css/print.css?time='. md5(time())) ?>">
    </head>
    <body class="struk" onload="printOut()">
        <section class="sheet">
        <?php
            echo '<table cellpadding="0" cellspacing="0">
                    <tr>
                        <td>'.$profile->nota_name.'</td>
                    </tr>
                    <tr>
                        <td>'.$profile->nota_address.'</td>
                    </tr>
                    <tr>
                        <td>Telp: '.$profile->nota_phone.'</td>
                    </tr>
                </table>';
            echo(str_repeat("=", 40)."<br/>");
            $invoice = $d->invoice. str_repeat("&nbsp;", (40 - (strlen($d->invoice))));
            $kasir = user('name'). str_repeat("&nbsp;", (40 - (strlen(user('name')))));
            $tgl = date('d-m-Y H:i:s', strtotime($d->created_at)). str_repeat("&nbsp;", (40 - (strlen(date('d-m-Y H:i:s', strtotime($d->created_at))))));
            $customer = '['. $customer->nia.'] '.$customer->name;
            $customer = $customer. str_repeat("&nbsp;", (48 - (strlen($customer))));

            echo '<table cellpadding="0" cellspacing="0" style="width:100%">
                    <tr>
                        <td align="left" class="txt-left">Nota&nbsp;</td>
                        <td align="left" class="txt-left">:</td>
                        <td align="left" class="txt-left">&nbsp;'. $invoice. '.</td>
                    </tr>
                    <tr>
                        <td align="left" class="txt-left">Kasir</td>
                        <td align="left" class="txt-left">:</td>
                        <td align="left" class="txt-left">&nbsp;'. $kasir.'</td>
                    </tr>
                    <tr>
                        <td align="left" class="txt-left">Tgl.&nbsp;</td>
                        <td align="left" class="txt-left">:</td>
                        <td align="left" class="txt-left">&nbsp;'. $tgl.'</td>
                    </tr>
                    <tr>
                        <td align="left" colspan="3" class="txt-left">'.$customer.'</td>
                    </tr>
                </table>';
            echo '<br/>';
            $tItem = 'Item'. str_repeat("&nbsp;", (13 - strlen('Item')));
            $tQty  = 'Qty'. str_repeat("&nbsp;", (6 - strlen('Qty')));
            $tHarga= str_repeat("&nbsp;", (9 - strlen('Harga'))).'Harga';
            $tTotal= str_repeat("&nbsp;", (10 - strlen('Total'))).'Total';
            $caption = $tItem. $tQty. $tHarga. $tTotal;

            echo    '<table cellpadding="0" cellspacing="0" style="width:100%">
                        <tr>
                            <td align="left" class="txt-left">'. $caption . '</td>
                        </tr>
                        <tr>
                            <td align="left" class="txt-left">'. str_repeat("=", 38) . '</td>
                        </tr>';
            if(!empty( $d->detail ))
            {
                foreach($d->detail as $k=>$v)
                {
                    $item = $v->name. str_repeat("&nbsp;", (38 - (strlen($v->name))));
                    echo '<tr>';
                        echo'<td align="left" class="txt-left">'.$item.'</td>';
                    echo '</tr>';

                    echo '<tr>';
                    $qty        = Rupiah($v->qty,0);
                    $qty        = $qty. str_repeat("&nbsp;", ( 13 - strlen($qty)) );
                    
                    $disk        = Rupiah($v->disc,2).'%';
                    $disk        = str_repeat("&nbsp;", ( 6 - strlen($disk) ) ). $disk;
    
                    $price      = Rupiah($v->price);
                    $price      = str_repeat("&nbsp;", ( 9 - strlen($price)) ). $price;

                    $total      = Rupiah($v->total,2);
                    $lentotal   = strlen($total);
                    $total      = str_repeat("&nbsp;", ( 10 - $lentotal) ). $total;
                        echo'<td class="txt-left" align="left">'.$qty. $disk. $price. $total .'</td>';
                    
                    echo '</tr>';
                }

                echo '<tr><td>'. str_repeat('-', 38).'</td></tr>';

                //Sub Total
                $titleST = 'Sub&nbspTotal';
                $titleST = $titleST. str_repeat("&nbsp;", ( 19 - strlen($titleST)) );
                $ST      = Rupiah($d->sub_total, 2);
                $ST      = str_repeat("&nbsp;", ( 23 - strlen($ST)) ). $ST;
                echo '<tr><td>'. $titleST. $ST.'</td></tr>';
                //Diskon
                $titleDs = 'Diskon';
                $titleDs = $titleDs. str_repeat("&nbsp;", ( 15 - strlen($titleDs)) );
                $Ds      = Rupiah($d->disc, 2);
                $Ds      = str_repeat("&nbsp;", ( 23 - strlen($Ds)) ). $Ds;
                echo '<tr><td>'. $titleDs. $Ds.'</td></tr>';
                //PPN
                $titlePPn = 'PPN';
                $titlePPn = $titlePPn. str_repeat("&nbsp;", ( 15 - strlen($titlePPn)) );
                $PPn      = Rupiah($d->ppn, 2);
                $PPn      = str_repeat("&nbsp;", ( 23 - strlen($PPn)) ). $PPn;
                echo '<tr><td>'. $titlePPn. $PPn.'</td></tr>';

                if( $d->payment_type == 'Angsuran' )
                {
                    $tX = 'Angsuran (x)';
                    $tX = $tX. str_repeat("&nbsp;", ( 15 - strlen($tX)) );
                    $x  = $d->angsuran;
                    $x  = str_repeat("&nbsp;", ( 23 - strlen($x)) ). $x;
                    echo '<tr><td>'. $tX. $x.'</td></tr>';

                    $tAng = 'Besar Angsuran';
                    $tAng = $tAng. str_repeat("&nbsp;", ( 15 - strlen($tAng)) );
                    $totalAng = Rupiah($d->total_angsuran,2);
                    $totalAng  = str_repeat("&nbsp;", ( 23 - strlen($totalAng)) ). $totalAng;
                    echo '<tr><td>'. $tAng. $totalAng.'</td></tr>';
                }

                //Grand Total
                $titleGT = 'Grand&nbspTotal';
                $titleGT = $titleGT. str_repeat("&nbsp;", ( 19 - strlen($titleGT)) );
                $GT      = Rupiah($d->grand_total, 2);
                $GT      = str_repeat("&nbsp;", ( 23 - strlen($GT)) ). $GT;
                echo '<tr><td>'. $titleGT. $GT.'</td></tr>';
                
                //Bayar
                $titlePy = 'BAYAR';
                $titlePy = $titlePy. str_repeat("&nbsp;", ( 15 - strlen($titlePy)) );
                $Py      = Rupiah($d->pay, 2);
                $Py      = str_repeat("&nbsp;", ( 23 - strlen($Py)) ). $Py;
                echo '<tr><td>'. $titlePy. $Py.'</td></tr>';

                $kembali= $d->payment_type == 'Angsuran' ? 0 : $d->pay - $d->grand_total;
                //Kembali
                $titleK = 'KEMBALI';
                $titleK = $titleK. str_repeat("&nbsp;", ( 15 - strlen($titleK)) );
                $Kb     = Rupiah(($kembali), 2);
                $Kb      = str_repeat("&nbsp;", ( 23 - strlen($Kb)) ). $Kb;
                echo '<tr><td>'. $titleK. $Kb.'</td></tr>';
                echo '<tr><td>&nbsp;</td></tr>';

            }
            echo '</table>';

            $footer = 'Terima kasih atas kunjungan anda';
            $starSpace = ( 32 - strlen($footer) ) / 2;
            $starFooter = str_repeat('*', $starSpace+1);
            echo($starFooter. '&nbsp;'.$footer . '&nbsp;'. $starFooter."<br/><br/><br/><br/>");
            echo '<p>&nbsp;</p>';  
            
        ?>
        </section>
        
    </body>
</html>

Update CSS dan Javascript

Buat sebuah css bernama print.css dan masukkan kode berikut.

@page { margin: 0 }
body { margin: 0; font-size:10px;font-family: monospace;}
td { font-size:10px; }
.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}

/** Paper sizes **/
body.struk        .sheet { width: 58mm; }
body.struk .sheet        { padding: 2mm; }

.txt-left { text-align: left;}
.txt-center { text-align: center;}
.txt-right { text-align: right;}

/** For screen preview **/
@media screen {
  body { background: #e0e0e0;font-family: monospace; }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
    body { font-family: monospace; }
    body.struk                 { width: 58mm; text-align: left;}
    body.struk .sheet          { padding: 2mm; }
    .txt-left { text-align: left;}
    .txt-center { text-align: center;}
    .txt-right { text-align: right;}
}

Kita tambah script javascript di dalam halaman view yang berfungsi agar halaman auto print saat dimuat.

<script>
            var lama = 1000;
            t = null;
            function printOut(){
                window.print();
                t = setTimeout("self.close()",lama);
            }
</script>

Setting Printer dan Kertas (Paper Size)

Printer kita buat default mengarah ke Printer Generic/Text Only. Untuk ukuran kertas nota kita bisa buat form baru dengan cara berikut.

Masuk ke menu Control Panel\Hardware and Sound\Devices and Printers
Klik menu Print server properties
Klik create a new form, masukkan nama kertas yang akan kita buat.
Untuk Width kita set 5,8 cm sedangkan Height kita set 10 cm.
Klik OK

Jangan lupa set kertas print ke form paper yang telah kita buat sebelumnya.

Setting Browser Remove Dialog Print (Silent Print)

Selanjutnya kita setting browser agar dialog print tidak muncul dan bisa langsung auto direct print.

Browser Chrome

Untuk chrome kita bisa tambahkan --kiosk-printing --kiosk. Untuk lebih detail kalian bisa baca di artikel berikut https://www.shoptill-e.com/support/48.

Browser Firefox

Untuk firefox kalian bisa setting dengan cara masuk about:config, klik kanan Pilih New > Boolean. Set value menjadi true. Untuk lebih detail kalian bisa baca di artikel berikut https://www.shoptill-e.com/support/44

Silahkan kalian jalankan server XAMPP atau Laragon dan akses URL print yang telah kalian buat. Hasil dari output di atas kurang lebih seperti berikut.

Print Thermal HTML Javascript CSS