Belajar Mudah Pemrograman Web, Membuat Aplikasi Penjualan Pulsa dengan PHP dan AJAX

Membuat Aplikasi Penjualan Pulsa dengan dan + PHP 7 (MySQLi Extension & Prepared Statement) DataTables + Database MariaDB + AJAX (Asynchronous JavaScript and XML) + Framework CSS Bootstrap 4 + DataTables (Server-Side Processing) + SweetAlert (JavaScript Alert) INDRA STYAWANTORO torolab.id

Belajar Mudah Pemrograman Web Membuat Aplikasi Penjualan Pulsa dengan PHP dan AJAX Modul Praktikum. E-book ini merupakan panduan belajar pemrograman web menggunakan PHP dan AJAX. Di dalam e-book ini tidak dibahas mengenai teori dan algoritma pemrograman, melainkan membahas contoh studi kasus program yang dapat dipraktekkan secara langsung dan disertai dengan penjelasannya. Dengan demikian, e-book ini sangat cocok bagi Anda yang sedang belajar pemrograman web dan membutuhkan contoh studi kasus. Penulis : Indra Styawantoro Website : torolab.id E-Mail : torolab.id@gmail.com Facebook Fan Page : https://www.facebook.com/torolab.id/ Copyright © torolab.id, 2018 Lisensi Dokumen Sebagian atau seluruh isi dokumen ini dapat digunakan, dan disebarkan secara bebas untuk tujuan pendidikan, pembelajaran, dan bukan komersial (nonprofit), dengan syarat tidak menghapus atau mengubah atribut penulis dan pernyataan lisensi dokumen yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, dan mengkomersialkan dokumen ini kecuali mendapatkan ijin terlebih dahulu dari penulis. free e-book | torolab.id i

DAFTAR ISI Sekilas e-Book ............................................................................................................................................................................... i Daftar Isi .......................................................................................................................................................................................... ii BAB 1. Pendahuluan 1.1. Pengertian dan Konsep ................................................................................................................................................ 1 1.2. Tujuan Pembelajaran ................................................................................................................................................... 1 1.3. Persiapan Pembuatan Aplikasi ................................................................................................................................. 2 BAB 2. Database 2.1. Perancangan Tabel ........................................................................................................................................................ 4 2.2. Membuat Database menggunakan phpMyAdmin ............................................................................................. 5 2.3. Membuat Tabel menggunakan phpMyAdmin ..................................................................................................... 6 BAB 3. Struktur Folder dan File 3.1. Membuat Folder ............................................................................................................................................................. 8 3.2. Menambahkan Library ................................................................................................................................................. 9 BAB 4. Halaman Utama 4.1. Membuat file index.php ............................................................................................................................................... 11 BAB 5. Koneksi Database 5.1. Membuat file database.php ........................................................................................................................................ 17 5.2. Membuat file config.php .............................................................................................................................................. 17 BAB 6. Halaman Beranda 6.1. Membuat file view.php ................................................................................................................................................. 18 6.2. Membuat file get_pelanggan.php ............................................................................................................................. 19 6.3. Membuat file get_pulsa.php ....................................................................................................................................... 20 6.4. Membuat file get_penjualan.php .............................................................................................................................. 20 6.5. Membuat file get_total.php ......................................................................................................................................... 21 BAB 7. Halaman Data Pelanggan 7.1. Membuat file view.php ................................................................................................................................................. 23 7.2. Membuat file data.php ................................................................................................................................................. 28 7.3. Membuat file insert.php .............................................................................................................................................. 28 7.4. Membuat file get_data.php ......................................................................................................................................... 29 7.5. Membuat file update.php ............................................................................................................................................ 30 7.6. Membuat file delete.php .............................................................................................................................................. 31 BAB 8. Halaman Data Pulsa 8.1. Membuat file view.php ................................................................................................................................................. 34 8.2. Membuat file data.php ................................................................................................................................................. 39 8.3. Membuat file insert.php .............................................................................................................................................. 40 free e-book | torolab.id ii

8.4. Membuat file get_data.php ......................................................................................................................................... 41 8.5. Membuat file update.php ............................................................................................................................................ 41 8.6. Membuat file delete.php .............................................................................................................................................. 42 BAB 9. Halaman Data Penjualan 9.1. Membuat file view.php ................................................................................................................................................. 45 9.2. Membuat file data.php ................................................................................................................................................. 52 9.3. Membuat file get_pelanggan.php ............................................................................................................................. 53 9.4. Membuat file get_pulsa.php ....................................................................................................................................... 54 9.5. Membuat file insert.php .............................................................................................................................................. 55 9.6. Membuat file get_data.php ......................................................................................................................................... 56 9.7. Membuat file update.php ............................................................................................................................................ 57 9.8. Membuat file delete.php .............................................................................................................................................. 58 BAB 10. Halaman Laporan Penjualan 10.1. Membuat file view.php ............................................................................................................................................. 61 10.2. Membuat file get_data.php ..................................................................................................................................... 63 10.3. Membuat file export.php ......................................................................................................................................... 64 BAB 11. Penutup .......................................................................................................................................................................... 67 BAB 12. Daftar Pustaka ............................................................................................................................................................ 68 free e-book | torolab.id iii

BAB 1 PENDAHULUAN 1.1. Pengertian dan Konsep Dalam e-book ini akan dipelajari bagaimana membuat Aplikasi Penjualan Pulsa menggunakan PHP dan AJAX. Aplikasi Penjualan Pulsa merupakan aplikasi yang digunakan untuk memudahkan dalam melakukan pencatatan data penjualan pulsa. Dalam aplikasi ini terdapat menu yang bisa digunakan untuk pengelolaan data Pelanggan, Pulsa, Penjualan, dan Laporan Penjualan. PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah singkatan rekursif, yakni kepanjangannya terdiri dari singkatan itu sendiri. PHP merupakan bahasa pemrograman server- side-scripting yang bisa digunakan bersamaan dengan HTML untuk pengembangan web yang dinamis. Sintaks dan perintah-perintah PHP akan diesksekusi diserver kemudian hasilnya akan dikirimkan ke browser dengan format HTML. AJAX adalah singkatan dari “Asynchronous JavaScript and XML“, merupakan suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif yang lebih baik dan lebih cepat. Dengan AJAX kita dapat melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang (refresh halaman) secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Dalam e-book ini akan dipelajari juga bagaimana cara menggunakan database MariaDB untuk manajemen data. MariaDB adalah sistem manajemen database relasional yang dikembangkan dari MySQL, dan merupakan versi pengembangan terbuka dan mandiri dari MySQL. Bagi Anda yang sudah terbiasa dengan database MySQL tidak perlu repot belajar MariaDB lagi karena hampir keseluruhan struktur, query, dan penggunaannya sama seperti MySQL. Untuk berkomunikasi dengan database, akan dipelajari bagaimana cara menggunakan MySQLi Extension dengan antarmuka Object Oriented dan menggunakan Prepared statements untuk membuat query. Dengan Prepared statements kita bisa mengirim query (perintah) secara terpisah antara query inti dengan “data” dari query. Tujuannya agar query menjadi lebih aman dan cepat (jika perintah yang sama akan digunakan beberapa kali). Prepared Statement adalah salah satu cara yang cukup efektif untuk mencegah SQL Injection saat melakukan komunikasi ke database. 1.2. Tujuan Pembelajaran Tujuan dari pembelajaran ini adalah untuk mempelajari dan mempraktekkan secara langsung bagaimana membuat aplikasi web interaktif yang lebih baik dan lebih cepat menggunakan PHP dan AJAX. free e-book | torolab.id 1

Diharapkan setelah membaca e-book ini, Anda dapat mempelajari : 1. Membuat aplikasi web interaktif yang dapat melakukan pemanggilan halaman tanpa reload/refresh halaman, melakukan operasi CRUD tanpa reload/refresh halaman, menampilkan laporan data penjualan berdasarkan tanggal dan mengexport laporan dalam bentuk Ms. Excel tanpa reload/refresh halaman. 2. Menggunakan MySQLi Extension dengan antarmuka Object Oriented untuk berkomunikasi dengan database. 3. Menggunakan Prepared statements untuk membuat query menjadi lebih aman dan cepat saat melakukan komunikasi ke database. 4. Membuat validasi form input wajib diisi dengan memunculkan notifikasi menggunakan SweetAlert, dan membuat fungsi untuk membatasi karakter yang diinputkan (bisa diinputkan huruf, angka atau karakter tertentu saja). 5. Mendesain tampilan aplikasi menggunakan CSS Bootstrap 4. 6. Membuat tabel yang dinamis menggunakan DataTables Server-side Processing untuk menampilkan data dari database dalam jumlah yang sangat besar. Sehingga aplikasi yang memiliki banyak data, akan terasa ringan ketika di load. Tabel sudah dilengkapi dengan filter jumlah data yang ditampilkan, form pencarian data dan pagination. 7. Membuat tampilan alert (kotak dialog) JavaScript menggunakan SweetAlert untuk memunculkan notifikasi pada saat sukses menyimpan data, sukses mengubah data, konfirmasi hapus data, sukses menghapus data, dan validasi form input. 8. Membuat icon yang menarik menggunakan Font Awesome, dengan sistem “Font Icon” yang memungkinkan untuk membuat icon hanya menggunakan teks (tanpa gambar) dan mengubah warna serta ukuran font menggunakan CSS tanpa takut icon menjadi pecah. 9. Menampilkan data dari database ke Select Box menggunakan plugin jQuery Chosen, yang sudah dilengkapi dengan fitur pencarian sehingga dapat memudahkan dalam memilih data yang diinginkan ketika data yang ditampilkan sangat banyak 10. Menampilkan data dari database ke Textfield berdasarkan data yang dipilih pada Select Box. 1.3. Persiapan Pembuatan Aplikasi Sebelum memulai pembuatan aplikasi, persiapkan tools dan library yang dibutuhkan dalam pembuatan aplikasi berikut ini : 1. XAMPP v7.2.12 2. Visual Studio Code v1.29 3. jQuery v3.3.1 4. Bootstrap v4.1.3 5. Bootstrap 4 - Datepicker 6. Bootstrap 4 - Chosen 7. DataTables v 1.10.18 dan DataTables Server-side Processing Class 8. SweetAlert 9. Font Awesome Free for Web v5.5.0 free e-book | torolab.id 2

Tools dan library tersebut diatas adalah versi terbaru yang penulis gunakan saat membuat e-book ini. Silahkan Anda download tools dan library tersebut lalu menginstalnya pada laptop Anda. Dalam e-book ini tidak diberikan tutorial dan penjelasan installasi XAMPP dan Visual Code Studio, Penulis berasumsi Anda sudah mengerti tentang web server dan instalasi web server menggunakan XAMPP, serta instalasi editor kode menggunakan Visual Studio Code. Catatan : Anda dapat mendownload semua tools dan library melalui link yang penulis sediakan disini : https://drive.google.com/open?id=1tHo_gBLQkqzX0eGZxPjhVHlUoGpnhpTa free e-book | torolab.id 3

BAB 2 DATABASE Tahap pertama pembuatan aplikasi adalah mempersiapkan database. Kita akan merancang dan membuat database serta tabel-tabel yang akan digunakan untuk menyimpan data-data dari Aplikasi Penjualan Pulsa. 2.1. Perancangan Tabel Sebelum membuat database, terlebih dahulu kita membuat perancangan tabel-tabel yang dibutuhkan dalam Aplikasi Penjualan Pulsa. Ada 3 tabel yang akan kita gunakan dengan struktur masing-masing tabel sebagai berikut : Tabel tbl_pelanggan. Tabel tbl_pelanggan digunakan untuk menyimpan informasi pelanggan. Berikut struktur tabelnya : Name Type Length/Values Index A_I Keterangan id_pelanggan INT 11 PRIMARY √ ID Pelanggan nama VARCHAR 30 no_hp VARCHAR 13 Nama Pelanggan No. HP Pelanggan Tabel tbl_pulsa. Tabel tbl_pulsa digunakan untuk menyimpan informasi pulsa. Berikut struktur tabelnya : Name Type Length/Values Index A_I Keterangan id_pulsa INT 11 PRIMARY √ ID Pulsa provider VARCHAR 15 nominal INT 11 Nama Provider harga INT 11 Nominal Pulsa Harga Jual Pulsa Tabel tbl_penjualan. Tabel tbl_penjualan digunakan untuk menyimpan informasi penjualan pulsa. Berikut struktur tabelnya : Name Type Length/Values Index A_I Keterangan id_penjualan INT 11 PRIMARY √ ID Penjualan tanggal DATE pelanggan INT 11 Tanggal Penjualan pulsa INT 11 ID Pelanggan jumlah_bayar INT 11 ID Pulsa Jumlah Bayar Pulsa Keterangan : o pelanggan sebagai foreign key untuk asosiasi (terhubung) dengan tbl_pelanggan. o pulsa sebagai foreign key untuk asosiasi (terhubung) dengan tbl_pulsa. free e-book | torolab.id 4

2.2. Membuat Database menggunakan phpMyAdmin Buka web browser Google Chrome / Mozilla Firefox (penulis menggunakan Google Chrome), kemudian ketik http://localhost/phpmyadmin/ pada kolom url web browser lalu tekan Enter untuk mengakses phpMyAdmin. Tampilannya akan terlihat seperti gambar berikut ini. Buat database baru dengan nama db_penjualan_pulsa. Caranya klik pada tab menu Databases, kemudian ketikan db_penjualan_pulsa pada Database name, lalu klik Create untuk membuat database. Setelah tombol Create diklik maka akan tampil seperti gambar dibawah ini. Sampai disini database telah berhasil dibuat. free e-book | torolab.id 5

2.3. Membuat Tabel menggunakan phpMyAdmin Selanjutnya buat tabel-tabel yang dibutuhkan dalam Aplikasi Penjualan Pulsa menggunakan phpMyAdmin, caranya adalah sebagai berikut : Tabel tbl_pelanggan. Buat tabel dengan nama tbl_pelanggan. Caranya klik pada nama database db_penjualan_pulsa, kemudian ketikan tbl_pelanggan pada Name dan ketikan jumlah field 3 pada Number of columns, lalu klik Go untuk melanjutkan. Isikan nama field-field dari tabel sesuai dengan perancangan yang sudah dibuat. Lengkapi bagian Name, Type, Length/Values. Kemudian tentukan id_pelanggan sebagai Primary Key dan ceklis A_I (Auto Increment) untuk membuat id_pelanggan secara otomatis pada tabel tersebut. Selanjutnya klik Save untuk menyimpan tabel. free e-book | torolab.id 6

Setelah tombol Save diklik maka akan tampil seperti gambar dibawah ini. Sampai disini tabel tbl_pelanggan telah berhasil dibuat. Selanjutnya buat tabel tbl_pulsa dan tbl_penjualan dengan cara yang sama seperti saat membuat tbl_pelanggan. Sesuaikan nama tabel dan jumlah field serta isi tabel dengan perancangan yang sudah dibuat. Jika sudah selesai, maka tampilannya akan terlihat seperti gambar berikut ini. Tabel tbl_pulsa. Tabel tbl_penjualan. free e-book | torolab.id 7

BAB 3 STRUKTUR FOLDER DAN FILE Tahap kedua pembuatan aplikasi adalah mempersiapkan Struktur Folder dan File. Kita akan membuat folder yang akan digunakan untuk tempat penyimpanan file Aplikasi Penjualan Pulsa, dan menambahkan file Library yang dibutuhkan dalam Aplikasi Penjualan Pulsa. 3.1. Membuat Folder Buat sebuah folder baru dengan nama penjualan-pulsa di dalam direktori C:\\xampp\\htdocs (letak folder instalasi XAMPP penulis berada pada direktori default C:\\xampp). Folder ini nantinya akan digunakan untuk tempat penyimpanan file aplikasi yang akan dibuat. Folder ini juga yang akan digunakan untuk menampilkan Aplikasi Penjualan Pulsa melalui web browser dengan mengetikan http://localhost/penjualan-pulsa/ pada url web browser. Selanjutnya buat beberapa folder baru di dalam folder penjualan-pulsa dengan nama config, dan modules. Folder config digunakan untuk menyimpan file konfigurasi koneksi database dan DataTables Server-side Processing Class. Folder modules digunakan untuk menyimpan folder dan file modul/halaman yang akan dibuat pada aplikasi. free e-book | torolab.id 8

Selanjutnya buat beberapa folder baru di dalam folder modules dengan nama beranda, pelanggan, pulsa, penjualan, dan laporan. Folder-folder tersebut akan digunakan untuk menyimpan file-file modul/halaman yang akan dibuat pada aplikasi sesuai halaman masing-masing. 3.2. Menambahkan Library Selanjutnya kita akan menambahkan file library pendukung yang akan digunakan untuk layout aplikasi. Pastikan Anda sudah mendownload semua file pendukung yang dibutuhkan melalui link yang sudah saya sertakan pada BAB 1. Setelah semua file pendukung didownload, kemudian copy dan paste kan ke dalam folder penjualan-pulsa seperti berikut : 1. Extract file assets.zip, kemudian Copy folder assets, lalu paste ke dalam folder penjualan- pulsa. 2. Copy file ssp.class.php, lalu paste ke dalam folder config. free e-book | torolab.id 9

Jika semua telah selesai dikerjakan, maka tampilan struktur folder dan file bisa dilihat seperti gambar berikut ini. Keterangan : o Folder assets berisi file-file library pendukung untuk layout aplikasi, seperti CSS, Image, dan jQuery. o File ssp.class.php merupakan DataTables Server-side Processing Class, yang digunakan untuk menampilkan data dari database secara server-side menggunakan DataTables. free e-book | torolab.id 10

BAB 4 HALAMAN UTAMA Tahap selanjutnya pembuatan aplikasi adalah membuat halaman-halaman yang terdapat pada aplikasi. Kita akan menggunakan Visual Studio Code sebagai kode editor untuk membuat file-file dan mengetikan script program. Ikuti langkah-langkah berikut ini. 4.1. Membuat file index.php Buka aplikasi Visual Studio Code, kemudian pada Welcome page klik Open Folder untuk memasukan folder ke dalam Visual Studio Code. Selanjutnya akan muncul tampilan Windows Dialog Box, kemudian arahkan ke direktori C:\\xampp\\htdocs\\, lalu pilih folder penjualan-pulsa dan klik tombol Select Folder. free e-book | torolab.id 11

Setelah tombol Select Folder diklik, maka akan tampil seperti gambar dibawah ini. Selanjutnya buat file baru di dalam folder penjualan-pulsa dengan nama index.php. Caranya klik New File, kemudian ketikan nama file index.php, lalu tekan Enter. Setelah menekan Enter, maka akan tampil seperti gambar dibawah ini. File index.php adalah file yang dipanggil pertama kali saat user mengakses atau melakukan pemanggilan sebuah alamat website. index.php merupakan halaman utama yang digunakan untuk memanggil file-file lainnya. free e-book | torolab.id 12

Selanjutnya ketikan script berikut ini pada file index.php. 001: <!doctype html> 002: <html lang=\"en\"> 003: <head> 004: <!-- Required meta tags --> 005: <meta charset=\"utf-8\"> 006: <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"> 007: <meta name=\"description\" content=\"Aplikasi Penjualan Pulsa\"> 008: <meta name=\"keywords\" content=\"Aplikasi Penjualan Pulsa\"> 009: <meta name=\"author\" content=\"Indra Styawantoro\"> 010: 011: <!-- favicon --> 012: <link rel=\"shortcut icon\" href=\"assets/img/favicon.png\"> 013: <!-- Bootstrap CSS --> 014: <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/plugins/bootstrap-4.1.3/css/bootstrap.min.css\"> 015: <!-- DataTables CSS --> 016: <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/plugins/DataTables/css/dataTables.bootstrap4.min.css\"> 017: <!-- datepicker CSS --> 018: <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/plugins/datepicker/css/datepicker.min.css\"> 019: <!-- Font Awesome CSS --> 020: <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/plugins/fontawesome-free-5.5.0-web/css/all.min.css\"> 021: <!-- Sweetalert CSS --> 022: <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/plugins/sweetalert/css/sweetalert.css\"> 023: <!-- Chosen CSS --> 024: <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/plugins/chosen-bootstrap-4/css/chosen.css\"> 025: <!-- Custom CSS --> 026: <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/css/style.css\"> 027: <!-- jQuery --> 028: <script type=\"text/javascript\" src=\"assets/js/jquery-3.3.1.js\"></script> 029: 030: <!-- title --> 031: <title>Data Transaksi Penjualan</title> 032: </head> 033: <body> 034: <nav class=\"navbar navbar-expand-md navbar-light fixed-top bg-light d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm\"> 035: <div class=\"container\"> 036: <!-- logo dan judul aplikasi --> 037: <a class=\"navbar-brand\" href=\"index.php\"> 038: <img src=\"assets/img/logo.png\" width=\"30\" height=\"30\" class=\"d-inline-block align-top title-icon\" alt=\"Logo\"> 039: <span class=\"title\">TORO CELL</span> 040: </a> 041: <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"> 042: <span class=\"navbar-toggler-icon\"></span> 043: </button> 044: <!-- menu aplikasi --> 045: <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\"> 046: <ul class=\"navbar-nav ml-auto\"> 047: <li class=\"nav-item\"> 048: <a class=\"nav-link mr-1 menu\" id=\"beranda\" href=\"javascript:void(0);\"> 049: <i class=\"fas fa-home title-icon\"></i> Beranda 050: </a> 051: </li> 052: <li class=\"nav-item\"> 053: <a class=\"nav-link mr-1 menu\" id=\"pelanggan\" href=\"javascript:void(0);\"> 054: <i class=\"fas fa-user title-icon\"></i> Pelanggan 055: </a> 056: </li> free e-book | torolab.id 13

057: <li class=\"nav-item\"> 058: <a class=\"nav-link mr-1 menu\" id=\"pulsa\" href=\"javascript:void(0);\"> 059: <i class=\"fas fa-tablet-alt title-icon\"></i> Pulsa 060: </a> 061: 062: </li> 063: <li class=\"nav-item\"> 064: 065: <a class=\"nav-link mr-1 menu\" id=\"penjualan\" href=\"javascript:void(0);\"> 066: <i class=\"fas fa-shopping-cart title-icon\"></i> Penjualan 067: 068: </a> 069: </li> 070: <li class=\"nav-item\"> 071: 072: <a class=\"nav-link mr-1 menu\" id=\"laporan\" href=\"javascript:void(0);\"> 073: <i class=\"fas fa-file-alt title-icon\"></i> Laporan 074: 075: </a> 076: </li> 077: </ul> 078: </div> 079: </div> 080: </nav> 081: 082: <main role=\"main\" class=\"container mt-5\"> 083: <!-- menampilkan isi halaman --> 084: <div class=\"content\"></div> 085: 086: </main> 087: 088: <!-- footer --> 089: <div class=\"container\"> 090: 091: <footer class=\"pt-4 my-md-4 pt-md-3 border-top\"> 092: <div class=\"row\"> 093: <div class=\"col-12 col-md center\"> 094: &copy; 2018 - <a class=\"text-info\" href=\"http://torolab.id/\">torolab.id</a> 095: </div> 096: </div> 097: 098: </footer> 099: </div> 100: 101: <!-- include JavaScript --> 102: <!-- Bootstrap JS --> 103: <script type=\"text/javascript\" src=\"assets/plugins/bootstrap-4.1.3/js/bootstrap.min.js\"></script> 104: <!-- Fontawesome Plugin JS --> 105: <script type=\"text/javascript\" src=\"assets/plugins/fontawesome-free-5.5.0-web/js/all.min.js\"></script> 106: <!-- DataTables Plugin JS --> 107: <script type=\"text/javascript\" src=\"assets/plugins/DataTables/js/jquery.dataTables.min.js\"></script> 108: <script type=\"text/javascript\" src=\"assets/plugins/DataTables/js/dataTables.bootstrap4.min.js\"></script> 109: <!-- datepicker Plugin JS --> 110: <script type=\"text/javascript\" src=\"assets/plugins/datepicker/js/bootstrap-datepicker.min.js\"></script> 111: <!-- SweetAlert Plugin JS --> 112: <script type=\"text/javascript\" src=\"assets/plugins/sweetalert/js/sweetalert.min.js\"></script> 113: <!-- Chosen Plugin JS --> 114: <script type=\"text/javascript\" src=\"assets/plugins/chosen-bootstrap-4/js/chosen.jquery.js\"></script> 115: 116: <script type=\"text/javascript\"> $(document).ready(function() { // halaman yang diload default pertama kali saat aplikasi dijalankan $('.content').load('modules/beranda/view.php'); // fungsi untuk pemanggilan halaman tanpa reload/refresh $('.menu').click(function(){ // membuat variabel untuk menampung nama id dari class 'menu' yang diklik var menu = $(this).attr('id'); free e-book | torolab.id 14

117: // jika id = beranda, maka load halaman view beranda 118: if (menu==\"beranda\") { 119: 120: $('.content').load('modules/beranda/view.php'); 121: } 122: // jika id = pelanggan, maka load halaman view pelanggan 123: else if (menu==\"pelanggan\") { 124: 125: $('.content').load('modules/pelanggan/view.php'); 126: } 127: // jika id = pulsa, maka load halaman view pulsa 128: else if (menu==\"pulsa\") { 129: 130: $('.content').load('modules/pulsa/view.php'); 131: } 132: // jika id = penjualan, maka load halaman view penjualan 133: else if (menu==\"penjualan\") { 134: 135: $('.content').load('modules/penjualan/view.php'); 136: } 137: // jika id = laporan, maka load halaman view laporan 138: else if (menu==\"laporan\") { 139: 140: $('.content').load('modules/laporan/view.php'); 141: } 142: }); 143: } ); 144: 145: // ======================================== Validasi Form ========================================= 146: // Validasi karakter yang boleh diinpukan pada form 147: function getkey(e) { 148: 149: if (window.event) 150: return window.event.keyCode; 151: 152: else if (e) 153: return e.which; 154: 155: else 156: return null; 157: 158: } 159: 160: function goodchars(e, goods, field) { 161: var key, keychar; 162: key = getkey(e); 163: if (key == null) return true; 164: 165: keychar = String.fromCharCode(key); 166: keychar = keychar.toLowerCase(); 167: goods = goods.toLowerCase(); 168: 169: // check goodkeys 170: if (goods.indexOf(keychar) != -1) 171: 172: return true; 173: // control keys 174: if ( key==null || key==0 || key==8 || key==9 || key==27 ) 175: 176: return true; if (key == 13) { var i; for (i = 0; i < field.form.elements.length; i++) if (field == field.form.elements[i]) break; i = (i + 1) % field.form.elements.length; field.form.elements[i].focus(); return false; }; // else return false free e-book | torolab.id 15

177: return false; 178: } 179: // ============================================================================================== 180: </script> 181: </body> 182: </html> Keterangan : o Script berwarna abu-abu yang diawali dengan tanda // atau <!-- adalah komentar atau penjelasan fungsi dari script yang ada dibawahnya atau disampingnya. Tanda // untuk membuat komentar di dalam tag PHP, sedangkan tanda yang diawali dengan <!-- dan diakhiri dengan --> untuk membuat komentar di dalam tag HTML. Komentar tidak akan dieksekusi saat aplikasi dijalankan. o Angka 001:, 002:, dst, tidak perlu diketik karena hanya sebagai informasi baris kode untuk memberikan keterangan. Setelah file index.php selesai dibuat, selanjutnya buka web browser untuk menjalankan aplikasi. Ketikan http://localhost/penjualan-pulsa/ pada kolom url web browser lalu tekan Enter. Maka tampilannya akan terlihat seperti gambar berikut ini. free e-book | torolab.id 16

BAB 5 KONEKSI DATABASE Untuk dapat berinteraksi dengan database kita perlu membuat file koneksi database. file koneksi database ini digunakan untuk menghubungkan antara aplikasi dengan database. 5.1. Membuat file database.php Buat file baru di dalam folder config dengan nama database.php (dengan cara yang sama seperti saat membuat file index.php). File database.php ini berisi parameter koneksi database yang akan digunakan. 01: <?php 02: // deklarasi parameter koneksi database 03: $sql_details = array( 04: 'user' => 'root', // username database, default “root” 05: 'pass' => '', // password database, default kosong 06: 'db' => 'db_penjualan_pulsa', // memilih database yang akan digunakan 07: 'host' => 'localhost' // server database, default “localhost” atau “127.0.0.1” 08: ); 09: $con = $sql_details; 10: ?> 5.2. Membuat file config.php Selanjutnya buat file baru di dalam folder config dengan nama config.php. Dalam file config.php ini terdapat pengaturan standar zona waktu yang digunakan dan fungsi untuk membuat koneksi ke database menggunakan MySQLi Extension dengan antarmuka Object Oriented. 01: <?php 02: // set default timezone 03: date_default_timezone_set(\"ASIA/JAKARTA\"); 04: 05: // panggil file parameter koneksi database 06: require_once \"database.php\"; 07: 08: // koneksi database 09: $mysqli = new mysqli($con['host'], $con['user'], $con['pass'], $con['db']); 10: 11: // cek koneksi 12: if ($mysqli->connect_error) { 13: // jika koneksi gagal, tampilkan pesan gagal 14: die('Koneksi Database Gagal : '.$mysqli->connect_error); 15: } 16: ?> free e-book | torolab.id 17

BAB 6 HALAMAN BERANDA Halaman Beranda merupakan sebuah dashboard yang berisi informasi jumlah Data Pelanggan, Data Pulsa, Data Penjualan, dan Total Penjualan. Halaman Beranda akan ditampilkan saat pertama kali aplikasi dijalankan. Untuk membuat halaman Beranda ikuti langkah-langkah berikut ini. 6.1. Membuat file view.php Buat file baru di dalam folder beranda yang berada di dalam folder modules dengan nama view.php. File view.php merupakan file utama pada halaman Beranda yang digunakan untuk memanggil file-file lainnya. Ketikan script berikut ini pada file view.php. 01: <div class=\"content-header row\"> 02: <div class=\"col-md-12\"> 03: <div class=\"alert alert-info\" role=\"alert\"> 04: <i class=\"fas fa-info-circle title-icon\"></i> Selamat Datang di <strong>Toro Cell</strong>. 05: </div> 06: </div> 07: </div> 08: 09: <div class=\"row mt-4\"> 10: <!-- menampilkan informasi jumlah data pelanggan --> 11: <div class=\"col-md-3\"> 12: <div class=\"card center\"> 13: <div class=\"center mt-4\"> 14: <i class=\"fas fa-user text-warning fa-7x\"></i> 15: </div> 16: <div class=\"card-body\"> 17: <h4 class=\"card-title\" id=\"loadPelanggan\"></h4> 18: <p class=\"card-text\">Data Pelanggan</p> 19: </div> 20: </div> 21: </div> 22: <!-- menampilkan informasi jumlah data pulsa --> 23: <div class=\"col-md-3\"> 24: <div class=\"card center\"> 25: <div class=\"center mt-4\"> 26: <i class=\"fas fa-tablet-alt text-info fa-7x\"></i> 27: </div> 28: <div class=\"card-body\"> 29: <h4 class=\"card-title\" id=\"loadPulsa\"></h4> 30: <p class=\"card-text\">Data Pulsa</p> 31: </div> 32: </div> 33: </div> 34: <!-- menampilkan informasi jumlah data penjualan --> 35: <div class=\"col-md-3\"> 36: <div class=\"card center\"> 37: <div class=\"center mt-4\"> 38: <i class=\"fas fa-shopping-cart text-danger fa-7x\"></i> 39: </div> 40: <div class=\"card-body\"> 41: <h4 class=\"card-title\" id=\"loadPenjualan\"></h4> 42: <p class=\"card-text\">Data Penjualan</p> free e-book | torolab.id 18

43: </div> 44: </div> 45: </div> 46: <!-- menampilkan informasi jumlah total penjualan --> 47: <div class=\"col-md-3\"> 48: <div class=\"card center\"> 49: <div class=\"center mt-4\"> 50: <i class=\"fas fa-dollar-sign text-success fa-7x\"></i> 51: </div> 52: <div class=\"card-body\"> 53: <h4 class=\"card-title\" id=\"loadTotal\"></h4> 54: <p class=\"card-text\">Total Penjualan</p> 55: </div> 56: </div> 57: </div> 58: </div> 59: 60: <script type=\"text/javascript\"> 61: $(document).ready(function(){ 62: // load file untuk menampilkan jumlah data pada masing-masing id 63: $('#loadPelanggan').load('modules/beranda/get_pelanggan.php'); 64: $('#loadPulsa').load('modules/beranda/get_pulsa.php'); 65: $('#loadPenjualan').load('modules/beranda/get_penjualan.php'); 66: $('#loadTotal').load('modules/beranda/get_total.php'); 67: }); 68: </script> 6.2. Membuat file get_pelanggan.php Buat file baru di dalam folder beranda dengan nama get_pelanggan.php. File get_pelanggan.php berfungsi untuk menampilkan jumlah data pelanggan dari tabel pelanggan pada database ke aplikasi. Ketikan script berikut ini pada file get_pelanggan.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // sql statement untuk menampilkan jumlah data dari tabel pelanggan 08: $query = \"SELECT count(id_pelanggan) as jumlah FROM tbl_pelanggan\"; 09: // membuat prepared statements 10: $stmt = $mysqli->prepare($query); 11: // cek query 12: if (!$stmt) { // jika error 13: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 14: } 15: 16: // jalankan query: execute 17: $stmt->execute(); 18: // ambil hasil query 19: $result = $stmt->get_result(); 20: // tampilkan hasil query 21: $data = $result->fetch_assoc(); 22: // tampilkan data 23: echo number_format($data['jumlah']); 24: free e-book | torolab.id 19

25: // tutup statement 26: $stmt->close(); 27: // tutup koneksi 28: $mysqli->close(); 29: } else { 30: // jika tidak ada ajax request, maka alihkan ke halaman index.php 31: echo '<script>window.location=\"../../index.php\"</script>'; 32: } 33: ?> 6.3. Membuat file get_pulsa.php Buat file baru di dalam folder beranda dengan nama get_pulsa.php. File get_pulsa.php berfungsi untuk menampilkan jumlah data pulsa dari tabel pulsa pada database ke aplikasi. Ketikan script berikut ini pada file get_pulsa.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // sql statement untuk menampilkan jumlah data dari tabel pulsa 08: $query = \"SELECT count(id_pulsa) as jumlah FROM tbl_pulsa\"; 09: // membuat prepared statements 10: $stmt = $mysqli->prepare($query); 11: // cek query 12: if (!$stmt) { // jika error 13: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 14: } 15: 16: // jalankan query: execute 17: $stmt->execute(); 18: // ambil hasil query 19: $result = $stmt->get_result(); 20: // tampilkan hasil query 21: $data = $result->fetch_assoc(); 22: // tampilkan data 23: echo number_format($data['jumlah']); 24: 25: // tutup statement 26: $stmt->close(); 27: // tutup koneksi 28: $mysqli->close(); 29: } else { 30: // jika tidak ada ajax request, maka alihkan ke halaman index.php 31: echo '<script>window.location=\"../../index.php\"</script>'; 32: } 33: ?> 6.4. Membuat file get_penjualan.php Buat file baru di dalam folder beranda dengan nama get_penjualan.php. File get_penjualan.php berfungsi untuk menampilkan jumlah data penjualan dari tabel penjualan pada database ke aplikasi. free e-book | torolab.id 20

Ketikan script berikut ini pada file get_penjualan.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // sql statement untuk menampilkan jumlah data dari tabel penjualan 08: $query = \"SELECT count(id_penjualan) as jumlah FROM tbl_penjualan\"; 09: // membuat prepared statements 10: $stmt = $mysqli->prepare($query); 11: // cek query 12: if (!$stmt) { // jika error 13: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 14: } 15: 16: // jalankan query: execute 17: $stmt->execute(); 18: // ambil hasil query 19: $result = $stmt->get_result(); 20: // tampilkan hasil query 21: $data = $result->fetch_assoc(); 22: // tampilkan data 23: echo number_format($data['jumlah']); 24: 25: // tutup statement 26: $stmt->close(); 27: // tutup koneksi 28: $mysqli->close(); 29: } else { 30: // jika tidak ada ajax request, maka alihkan ke halaman index.php 31: echo '<script>window.location=\"../../index.php\"</script>'; 32: } 33: ?> 6.5. Membuat file get_total.php Buat file baru di dalam folder beranda dengan nama get_total.php. File get_total.php berfungsi untuk menampilkan jumlah total penjualan dari tabel penjualan pada database ke aplikasi. Ketikan script berikut ini pada file get_total.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // sql statement untuk menampilkan total bayar dari tabel penjualan 08: $query = \"SELECT sum(jumlah_bayar) as total FROM tbl_penjualan\"; 09: // membuat prepared statements 10: $stmt = $mysqli->prepare($query); 11: // cek query 12: if (!$stmt) { // jika error 13: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 14: } 15: free e-book | torolab.id 21

16: // jalankan query: execute 17: $stmt->execute(); 18: // ambil hasil query 19: $result = $stmt->get_result(); 20: // tampilkan hasil query 21: $data = $result->fetch_assoc(); 22: // tampilkan data 23: echo \"Rp.\".number_format($data['total']); 24: 25: // tutup statement 26: $stmt->close(); 27: // tutup koneksi 28: $mysqli->close(); 29: } else { 30: // jika tidak ada ajax request, maka alihkan ke halaman index.php 31: echo '<script>window.location=\"../../index.php\"</script>'; 32: } 33: ?> Setelah semua file selesai dibuat, selanjutnya refresh browser untuk melihat perubahan pada aplikasi. Maka tampilannya akan terlihat seperti gambar berikut ini. free e-book | torolab.id 22

BAB 7 HALAMAN DATA PELANGGAN Halaman Data Pelanggan digunakan untuk mengelola data pelanggan. Pada halaman ini kita dapat menginput, mengubah, menghapus, dan mencari data pelanggan. Untuk membuat halaman Data Pelanggan ikuti langkah-langkah berikut ini. 7.1. Membuat file view.php Buat file baru di dalam folder pelanggan dengan nama view.php. File view.php merupakan file utama pada halaman Data Pelanggan, yang berisikan script untuk membuat view data pelanggan menggunakan DataTables Server-side Processing, membuat form entri dan ubah data pelanggan menggunakan bootstrap modal, dan melakukan proses CRUD menggunakan AJAX. Ketikan script berikut ini pada file view.php. 001: <div class=\"content-header row mb-3\"> 002: <div class=\"col-md-12\"> 003: <h5> 004: <!-- judul halaman tampil data pelanggan --> 005: <i class=\"fas fa-user title-icon\"></i> Data Pelanggan 006: <!-- tombol tambah data pelanggan --> 007: <a class=\"btn btn-info float-right\" id=\"btnTambah\" href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#modalPelanggan\" role=\"button\"><i class=\"fas fa-plus\"></i> Tambah </a> 008: </h5> 009: </div> 010: </div> 011: 012: <div class=\"border mb-4\"></div> 013: 014: <div class=\"row\"> 015: <div class=\"col-md-12\"> 016: <!-- Tabel pelanggan untuk menampilkan data pelanggan dari database --> 017: <table id=\"tabel-pelanggan\" class=\"table table-striped table-bordered\" style=\"width:100%\"> 018: <!-- judul kolom pada bagian kepala (atas) tabel --> 019: <thead> 020: <tr> 021: <th>No.</th> 022: <th>ID Pelanggan</th> <!-- kolom disembunyikan --> 023: <th>Nama Pelanggan</th> 024: <th>No. HP</th> 025: <th></th> 026: </tr> 027: </thead> 028: </table> 029: </div> 030: </div> 031: 032: <!-- Modal form data pelanggan --> 033: <div class=\"modal fade\" id=\"modalPelanggan\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modalPelanggan\" aria-hidden=\"true\"> 034: <div class=\"modal-dialog\" role=\"document\"> 035: <div class=\"modal-content\"> 036: <!-- judul form data pelanggan --> 037: <div class=\"modal-header\"> free e-book | torolab.id 23

038: <h5 class=\"modal-title\"><i class=\"fas fa-edit title-icon\"></i><span id=\"modalLabel\"></span></h5> 039: <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"> 040: <span aria-hidden=\"true\">&times;</span> 041: </button> 042: </div> 043: <!-- isi form data pelanggan --> 044: <form id=\"formPelanggan\"> 045: <div class=\"modal-body\"> 046: <input type=\"hidden\" id=\"id_pelanggan\" name=\"id_pelanggan\"> 047: 048: <div class=\"form-group\"> 049: <label>Nama Pelanggan</label> 050: <input type=\"text\" class=\"form-control\" id=\"nama\" name=\"nama\" autocomplete=\"off\"> 051: </div> 052: 053: <div class=\"form-group\"> 054: <label>No. HP</label> 055: <input type=\"text\" class=\"form-control\" id=\"no_hp\" name=\"no_hp\" maxlength=\"13\" onKeyPress=\"return goodchars(event,'0123456789',this)\" autocomplete=\"off\"> 056: </div> 057: </div> 058: <div class=\"modal-footer\"> 059: <button type=\"button\" class=\"btn btn-info btn-submit\" id=\"btnSimpan\">Simpan</button> 060: <button type=\"button\" class=\"btn btn-secondary btn-reset\" data-dismiss=\"modal\">Batal</button> 061: </div> 062: </form> 063: </div> 064: </div> 065: </div> 066: 067: <script type=\"text/javascript\"> 068: $(document).ready(function(){ 069: // ============================================ View ============================================= 070: // dataTables plugin untuk membuat nomor urut tabel 071: $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) 072: { 073: return { 074: \"iStart\": oSettings._iDisplayStart, 075: \"iEnd\": oSettings.fnDisplayEnd(), 076: \"iLength\": oSettings._iDisplayLength, 077: \"iTotal\": oSettings.fnRecordsTotal(), 078: \"iFilteredTotal\": oSettings.fnRecordsDisplay(), 079: \"iPage\": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength), 080: \"iTotalPages\": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength) 081: }; 082: }; 083: 084: // datatables serverside processing 085: var table = $('#tabel-pelanggan').DataTable( { 086: \"scrollY\": '45vh', // vertikal scroll pada tabel 087: \"scrollCollapse\": true, 088: \"processing\": true, // tampilkan loading saat proses data 089: \"serverSide\": true, // server-side processing 090: \"ajax\": 'modules/pelanggan/data.php', // panggil file data.php untuk menampilkan data pelanggan dari database 091: // menampilkan data 092: \"columnDefs\": [ 093: { \"targets\": 0, \"data\": null, \"orderable\": false, \"searchable\": false, \"width\": '30px', \"className\": 'center' }, 094: { \"targets\": 1, \"visible\": false }, // kolom disembunyikan 095: { \"targets\": 2, \"width\": '180px' }, free e-book | torolab.id 24

096: { \"targets\": 3, \"width\": '100px', \"className\": 'center' }, 097: 098: { 099: \"targets\": 4, \"data\": null, \"orderable\": false, \"searchable\": false, \"width\": '70px', \"className\": 100: 101: 'center', 102: // tombol ubah dan hapus 103: 104: \"render\": function(data, type, row) { 105: 106: var btn = \"<a style=\\\"margin-right:7px\\\" title=\\\"Ubah\\\" class=\\\"btn btn-info btn-sm getUbah\\\" 107: 108: href=\\\"javascript:void(0);\\\"><i class=\\\"fas fa-edit\\\"></i></a><a title=\\\"Hapus\\\" 109: 110: class=\\\"btn btn-danger btn-sm btnHapus\\\" href=\\\"javascript:void(0);\\\"> 111: 112: <i class=\\\"fas fa-trash\\\"></i></a>\"; 113: 114: return btn; 115: 116: } 117: 118: } 119: 120: ], 121: 122: \"order\": [[ 1, \"desc\" ]], // urutkan data berdasarkan id_pelanggan secara descending 123: 124: \"iDisplayLength\": 10, // tampilkan 10 data per halaman 125: 126: // membuat nomor urut tabel 127: 128: \"rowCallback\": function (row, data, iDisplayIndex) { 129: 130: var info = this.fnPagingInfo(); 131: 132: var page = info.iPage; 133: 134: var length = info.iLength; 135: 136: var index = page * length + (iDisplayIndex + 1); 137: 138: $('td:eq(0)', row).html(index); 139: 140: } 141: 142: } ); 143: 144: // =============================================================================================== 145: 146: // ============================================ Form ============================================= 147: // Tampilkan Modal Form Entri Data 148: $('#btnTambah').click(function(){ 149: 150: // reset form 151: $('#formPelanggan')[0].reset(); 152: // judul form 153: $('#modalLabel').text('Entri Data Pelanggan'); }); // Tampilkan Modal Form Ubah Data $('#tabel-pelanggan tbody').on( 'click', '.getUbah', function (){ // judul form $('#modalLabel').text('Ubah Data Pelanggan'); var data = table.row( $(this).parents('tr') ).data(); // membuat variabel untuk menampung data id_pelanggan var id_pelanggan = data[ 1 ]; $.ajax({ type : \"GET\", // mengirim data dengan method GET url : \"modules/pelanggan/get_data.php\", // proses get data pelanggan berdasarkan id_pelanggan data : {id_pelanggan:id_pelanggan}, // data yang dikirim dataType : \"JSON\", // tipe data JSON success: function(result){ // ketika sukses get data // tampilkan modal ubah data pelanggan $('#modalPelanggan').modal('show'); // tampilkan data pelanggan $('#id_pelanggan').val(result.id_pelanggan); $('#nama').val(result.nama); $('#no_hp').val(result.no_hp); } }); }); // =============================================================================================== free e-book | torolab.id 25

154: // ====================================== Insert dan Update ====================================== 155: // Proses Simpan Data 156: $('#btnSimpan').click(function(){ 157: 158: // Validasi form input 159: // jika nama pelanggan kosong 160: if ($('#nama').val()==\"\"){ 161: 162: // focus ke input nama pelanggan 163: $( \"#nama\" ).focus(); 164: // tampilkan peringatan data tidak boleh kosong 165: swal(\"Peringatan!\", \"Nama Pelanggan tidak boleh kosong.\", \"warning\"); 166: } 167: // jika no. hp kosong 168: else if ($('#no_hp').val()==\"\"){ 169: // focus ke input no. hp 170: $( \"#no_hp\" ).focus(); 171: // tampilkan peringatan data tidak boleh kosong 172: swal(\"Peringatan!\", \"No. HP tidak boleh kosong.\", \"warning\"); 173: } 174: // jika semua data sudah terisi, jalankan perintah simpan data 175: else { 176: // jika form entri data pelanggan yang ditampilkan, jalankan perintah insert 177: if ($('#modalLabel').text()==\"Entri Data Pelanggan\") { 178: 179: // membuat variabel untuk menampung data dari form entri data 180: var data = $('#formPelanggan').serialize(); 181: 182: $.ajax({ 183: 184: type : \"POST\", // mengirim data dengan method POST 185: 186: url : \"modules/pelanggan/insert.php\", // proses insert data 187: 188: data : data, // data yang dikirim 189: 190: success: function(result){ // ketika sukses menyimpan data 191: 192: if (result===\"sukses\") { 193: 194: // reset form 195: 196: $('#formPelanggan')[0].reset(); 197: 198: // tutup modal entri data pelanggan 199: 200: $('#modalPelanggan').modal('hide'); 201: 202: // tampilkan pesan sukses simpan data 203: 204: swal(\"Sukses!\", \"Data Pelanggan berhasil disimpan.\", \"success\"); 205: 206: // tampilkan data pelanggan 207: 208: var table = $('#tabel-pelanggan').DataTable(); 209: 210: table.ajax.reload( null, false ); 211: 212: } else { 213: 214: // tampilkan pesan gagal simpan data swal(\"Gagal!\", \"Data Pelanggan tidak bisa disimpan.\", \"error\"); } } }); return false; } // jika form ubah data pelanggan yang ditampilkan, jalankan perintah update else if ($('#modalLabel').text()==\"Ubah Data Pelanggan\") { // membuat variabel untuk menampung data dari form ubah data var data = $('#formPelanggan').serialize(); $.ajax({ // mengirim data dengan method POST type : \"POST\", // proses update data url : \"modules/pelanggan/update.php\", // data yang dikirim data : data, // ketika sukses mengubah data success: function(result){ if (result===\"sukses\") { // reset form $('#formPelanggan')[0].reset(); free e-book | torolab.id 26

215: // tutup modal ubah data pelanggan 216: $('#modalPelanggan').modal('hide'); 217: // tampilkan pesan sukses ubah data 218: swal(\"Sukses!\", \"Data Pelanggan berhasil diubah.\", \"success\"); 219: // tampilkan data pelanggan 220: var table = $('#tabel-pelanggan').DataTable(); 221: table.ajax.reload( null, false ); 222: } else { 223: // tampilkan pesan gagal ubah data 224: swal(\"Gagal!\", \"Data Pelanggan tidak bisa diubah.\", \"error\"); 225: } 226: } 227: }); 228: return false; 229: } 230: } 231: }); 232: // =============================================================================================== 233: 234: // =========================================== Delete ============================================ 235: $('#tabel-pelanggan tbody').on( 'click', '.btnHapus', function (){ 236: var data = table.row( $(this).parents('tr') ).data(); 237: // tampilkan notifikasi saat akan menghapus data 238: swal({ 239: title: \"Apakah Anda Yakin?\", 240: text: \"Anda akan menghapus data Pelanggan : \"+ data[ 2 ] +\"\", 241: type: \"warning\", 242: showCancelButton: true, 243: confirmButtonColor: \"#DD6B55\", 244: confirmButtonText: \"Ya, Hapus!\", 245: closeOnConfirm: false 246: }, 247: // jika dipilih ya, maka jalankan perintah hapus data 248: function () { 249: // membuat variabel untuk menampung data id_pelanggan 250: var id_pelanggan = data[ 1 ]; 251: 252: $.ajax({ 253: type : \"POST\", // mengirim data dengan method POST 254: url : \"modules/pelanggan/delete.php\", // proses delete data 255: data : {id_pelanggan:id_pelanggan}, // data yang dikirim 256: success: function(result){ // ketika sukses menghapus data 257: if (result===\"sukses\") { 258: // tampilkan pesan sukses hapus data 259: swal(\"Sukses!\", \"Data Pelanggan berhasil dihapus.\", \"success\"); 260: // tampilkan data pelanggan 261: var table = $('#tabel-pelanggan').DataTable(); 262: table.ajax.reload( null, false ); 263: } else { 264: // tampilkan pesan gagal hapus hapus data 265: swal(\"Gagal!\", \"Data Pelanggan tidak bisa dihapus.\", \"error\"); 266: } 267: } 268: }); 269: }); 270: }); 271: // =============================================================================================== 272: }); 273: </script> free e-book | torolab.id 27

7.2. Membuat file data.php Buat file baru di dalam folder pelanggan dengan nama data.php. File data.php adalah script dari DataTables Server-side Processing, yang digunakan untuk menampilkan data pelanggan dari tabel pelanggan pada database ke aplikasi. Ketikan script berikut ini pada file data.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: 05: // nama tabel 06: $table = 'tbl_pelanggan'; 07: // primary key tabel 08: $primaryKey = 'id_pelanggan'; 09: 10: // membuat array untuk menampilkan isi tabel. 11: // Parameter 'db' mewakili nama kolom dalam database. 12: // parameter 'dt' mewakili pengenal kolom pada DataTable. 13: $columns = array( 14: array( 'db' => 'id_pelanggan', 'dt' => 1 ), 15: array( 'db' => 'nama', 'dt' => 2 ), 16: array( 'db' => 'no_hp', 'dt' => 3 ), 17: array( 'db' => 'id_pelanggan', 'dt' => 4 ) 18: ); 19: 20: // memanggil file database.php untuk informasi koneksi ke server SQL 21: require_once \"../../config/database.php\"; 22: // memanggil file ssp.class.php untuk menjalankan datatables server-side processing 23: require '../../config/ssp.class.php'; 24: 25: echo json_encode( 26: SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ) 27: ); 28: } else { 29: // jika tidak ada ajax request, maka alihkan ke halaman index.php 30: echo '<script>window.location=\"../../index.php\"</script>'; 31: } 32: ?> 7.3. Membuat file insert.php Buat file baru di dalam folder pelanggan dengan nama insert.php. File insert.php digunakan untuk melakukan proses insert data pelanggan dari form entri data pelanggan ke tabel pelanggan pada database. Ketikan script berikut ini pada file insert.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // sql statement untuk insert data ke tabel pelanggan 08: $query = \"INSERT INTO tbl_pelanggan(nama, no_hp) VALUES (?,?)\"; 09: // membuat prepared statements 10: $stmt = $mysqli->prepare($query); 11: // hubungkan data dengan prepared statements 12: $stmt->bind_param(\"ss\", $nama, $no_hp); free e-book | torolab.id 28

13: 14: // ambil data hasil post dari ajax 15: $nama = trim($_POST['nama']); 16: $no_hp = trim($_POST['no_hp']); 17: 18: // jalankan query: execute 19: $stmt->execute(); 20: 21: // cek query 22: if ($stmt) { 23: // jika berhasil tampilkan pesan berhasil simpan data 24: echo \"sukses\"; 25: } else { 26: // jika gagal tampilkan pesan gagal simpan data 27: echo \"gagal\"; 28: } 29: 30: // tutup statement 31: $stmt->close(); 32: // tutup koneksi 33: $mysqli->close(); 34: } else { 35: // jika tidak ada ajax request, maka alihkan ke halaman index.php 36: echo '<script>window.location=\"../../index.php\"</script>'; 37: } 38: ?> 7.4. Membuat file get_data.php Buat file baru di dalam folder pelanggan dengan nama get_data.php. File get_data.php digunakan untuk menampilkan data pelanggan dari tabel pelanggan pada database berdasarkan id_pelanggan, yang selanjutnya data tersebut akan ditampilkan pada form ubah data pelanggan. Ketikan script berikut ini pada file get_data.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: // mengecek data get dari ajax 07: if (isset($_GET['id_pelanggan'])) { 08: // sql statement untuk menampilkan data dari tabel pelanggan berdasarkan id_pelanggan 09: $query = \"SELECT * FROM tbl_pelanggan WHERE id_pelanggan=?\"; 10: // membuat prepared statements 11: $stmt = $mysqli->prepare($query); 12: //cek query 13: if (!$stmt) { 14: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 15: } 16: 17: // ambil data get dari ajax 18: $id_pelanggan = $_GET['id_pelanggan']; 19: // hubungkan \"data\" dengan prepared statements 20: $stmt->bind_param(\"i\", $id_pelanggan); 21: // jalankan query: execute 22: $stmt->execute(); 23: // ambil hasil query 24: $result = $stmt->get_result(); free e-book | torolab.id 29

25: // tampilkan hasil query 26: $data = $result->fetch_assoc(); 27: 28: // tutup statement 29: $stmt->close(); 30: } 31: // tutup koneksi 32: $mysqli->close(); 33: 34: echo json_encode($data); 35: } else { 36: // jika tidak ada ajax request, maka alihkan ke halaman index.php 37: echo '<script>window.location=\"../../index.php\"</script>'; 38: } 39: ?> 7.5. Membuat file update.php Buat file baru di dalam folder pelanggan dengan nama update.php. File update.php digunakan untuk melakukan proses update data pelanggan di tabel pelanggan pada database melalui form ubah data pelanggan. Ketikan script berikut ini pada file update.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // mengecek data post dari ajax 08: if (isset($_POST['id_pelanggan'])) { 09: // sql statement untuk update data di tabel pelanggan 10: $query = \"UPDATE tbl_pelanggan SET nama = ?, 11: no_hp =? 12: WHERE id_pelanggan = ?\"; 13: // membuat prepared statements 14: $stmt = $mysqli->prepare($query); 15: // hubungkan \"data\" dengan prepared statements 16: $stmt->bind_param(\"ssi\", $nama, $no_hp, $id_pelanggan); 17: 18: // ambil data hasil post dari ajax 19: $id_pelanggan = trim($_POST['id_pelanggan']); 20: $nama = trim($_POST['nama']); 21: $no_hp = trim($_POST['no_hp']); 22: 23: // jalankan query: execute 24: $stmt->execute(); 25: 26: // cek query 27: if ($stmt) { 28: // jika berhasil tampilkan pesan berhasil ubah data 29: echo \"sukses\"; 30: } else { 31: // jika gagal tampilkan pesan gagal ubah data 32: echo \"gagal\"; 33: } 34: 35: // tutup statement 36: $stmt->close(); free e-book | torolab.id 30

37: } 38: // tutup koneksi 39: $mysqli->close(); 40: } else { 41: // jika tidak ada ajax request, maka alihkan ke halaman index.php 42: echo '<script>window.location=\"../../index.php\"</script>'; 43: } 44: ?> 7.6. Membuat file delete.php Buat file baru di dalam folder pelanggan dengan nama delete.php. File delete.php digunakan untuk melakukan proses delete data pelanggan dari tabel pelanggan pada database. Ketikan script berikut ini pada file delete.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // mengecek data post dari ajax 08: if (isset($_POST['id_pelanggan'])) { 09: // sql statement untuk delete data dari tabel pelanggan 10: $query = \"DELETE FROM tbl_pelanggan WHERE id_pelanggan=?\"; 11: // membuat prepared statements 12: $stmt = $mysqli->prepare($query); 13: // hubungkan \"data\" dengan prepared statements 14: $stmt->bind_param(\"i\", $id_pelanggan); 15: 16: // ambil data post dari ajax 17: $id_pelanggan = $_POST['id_pelanggan']; 18: 19: // jalankan query: execute 20: $stmt->execute(); 21: 22: // cek hasil query 23: if ($stmt) { 24: // jika berhasil tampilkan pesan berhasil hapus data 25: echo \"sukses\"; 26: } else { 27: // jika gagal tampilkan pesan gagal hapus data 28: echo \"gagal\"; 29: } 30: 31: // tutup statement 32: $stmt->close(); 33: } 34: // tutup koneksi 35: $mysqli->close(); 36: } else { 37: // jika tidak ada ajax request, maka alihkan ke halaman index.php 38: echo '<script>window.location=\"../../index.php\"</script>'; 39: } 40: ?> free e-book | torolab.id 31

Setelah semua file selesai dibuat, selanjutnya refresh browser untuk melihat perubahan pada aplikasi. Kemudian jalankan aplikasi untuk mencoba semua fungsi yang telah dibuat pada halaman Data Pelanggan. Tampilannya akan terlihat seperti gambar berikut ini.  Insert Data Pelanggan  View Data Pelanggan free e-book | torolab.id 32

 Update Data Pelanggan  Delete Data Pelanggan free e-book | torolab.id 33

BAB 8 HALAMAN DATA PULSA Halaman Data Pulsa digunakan untuk mengelola data pulsa. Pada halaman ini kita dapat menginput, mengubah, menghapus, dan mencari data pulsa. Untuk membuat halaman Data Pulsa ikuti langkah- langkah berikut ini. 8.1. Membuat file view.php Buat file baru di dalam folder pulsa dengan nama view.php. File view.php merupakan file utama pada halaman Data Pulsa, yang berisikan script untuk membuat view data pulsa menggunakan DataTables Server-side Processing, membuat form entri dan ubah data pulsa menggunakan bootstrap modal, dan melakukan proses CRUD menggunakan AJAX. Ketikan script berikut ini pada file view.php. 001: <div class=\"content-header row mb-3\"> 002: <div class=\"col-md-12\"> 003: <h5> 004: <!-- judul halaman tampil data pulsa --> 005: <i class=\"fas fa-tablet-alt title-icon\"></i> Data Pulsa 006: <!-- tombol tambah data pulsa --> 007: <a class=\"btn btn-info float-right\" id=\"btnTambah\" href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#modalPulsa\" role=\"button\"><i class=\"fas fa-plus\"></i> Tambah </a> 008: </h5> 009: </div> 010: </div> 011: 012: <div class=\"border mb-4\"></div> 013: 014: <div class=\"row\"> 015: <div class=\"col-md-12\"> 016: <!-- Tabel pulsa untuk menampilkan data pulsa dari database --> 017: <table id=\"tabel-pulsa\" class=\"table table-striped table-bordered\" style=\"width:100%\"> 018: <!-- judul kolom pada bagian kepala (atas) tabel --> 019: <thead> 020: <tr> 021: <th>No.</th> 022: <th>Provider</th> 023: <th>Nominal</th> 024: <th>Harga</th> 025: <th></th> 026: </tr> 027: </thead> 028: </table> 029: </div> 030: </div> 031: 032: <!-- Modal form data pulsa --> 033: <div class=\"modal fade\" id=\"modalPulsa\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modalPulsa\" aria-hidden=\"true\"> 034: <div class=\"modal-dialog\" role=\"document\"> 035: <div class=\"modal-content\"> 036: <!-- judul form data pulsa --> 037: <div class=\"modal-header\"> 038: <h5 class=\"modal-title\"><i class=\"fas fa-edit title-icon\"></i><span id=\"modalLabel\"></span></h5> free e-book | torolab.id 34

039: <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"> 040: <span aria-hidden=\"true\">&times;</span> 041: </button> 042: </div> 043: <!-- isi form data pulsa --> 044: <form id=\"formPulsa\"> 045: <div class=\"modal-body\"> 046: <input type=\"hidden\" id=\"id_pulsa\" name=\"id_pulsa\"> 047: 048: <div class=\"form-group\"> 049: <label>Provider</label> 050: <input type=\"text\" class=\"form-control\" id=\"provider\" name=\"provider\" autocomplete=\"off\"> 051: </div> 052: 053: <div class=\"form-group\"> 054: <label>Nominal</label> 055: <input type=\"text\" class=\"form-control\" id=\"nominal\" name=\"nominal\" onKeyPress=\"return goodchars(event,'0123456789.',this)\" autocomplete=\"off\"> 056: </div> 057: 058: <div class=\"form-group\"> 059: <label>Harga</label> 060: <div class=\"input-group mb-2\"> 061: <div class=\"input-group-prepend\"><div class=\"input-group-text\">Rp.</div></div> 062: <input type=\"text\" class=\"form-control\" id=\"harga\" name=\"harga\" onKeyPress=\"return goodchars(event,'0123456789.',this)\" autocomplete=\"off\"> 063: </div> 064: </div> 065: </div> 066: <div class=\"modal-footer\"> 067: <button type=\"button\" class=\"btn btn-info btn-submit\" id=\"btnSimpan\">Simpan</button> 068: <button type=\"button\" class=\"btn btn-secondary btn-reset\" data-dismiss=\"modal\">Batal</button> 069: </div> 070: </form> 071: </div> 072: </div> 073: </div> 074: 075: <script type=\"text/javascript\"> 076: $(document).ready(function(){ 077: // ============================================ View ============================================= 078: // dataTables plugin untuk membuat nomor urut tabel 079: $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) 080: { 081: return { 082: \"iStart\": oSettings._iDisplayStart, 083: \"iEnd\": oSettings.fnDisplayEnd(), 084: \"iLength\": oSettings._iDisplayLength, 085: \"iTotal\": oSettings.fnRecordsTotal(), 086: \"iFilteredTotal\": oSettings.fnRecordsDisplay(), 087: \"iPage\": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength), 088: \"iTotalPages\": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength) 089: }; 090: }; 091: 092: // datatables serverside processing 093: var table = $('#tabel-pulsa').DataTable( { 094: \"scrollY\": '45vh', // vertikal scroll pada tabel 095: \"scrollCollapse\": true, 096: \"processing\": true, // tampilkan loading saat proses data 097: \"serverSide\": true, // server-side processing free e-book | torolab.id 35

098: \"ajax\": 'modules/pulsa/data.php', // panggil file data.php untuk menampilkan data pulsa dari database 099: 100: // menampilkan data 101: \"columnDefs\": [ 102: 103: { \"targets\": 0, \"data\": null, \"orderable\": false, \"searchable\": false, \"width\": '30px', \"className\": 104: 105: 'center' }, 106: { \"targets\": 1, \"width\": '200px' }, 107: 108: { \"targets\": 2, \"width\": '80px', \"className\": 'right' }, 109: { \"targets\": 3, \"width\": '80px', \"className\": 'right' }, 110: 111: { 112: 113: \"targets\": 4, \"data\": null, \"orderable\": false, \"searchable\": false, \"width\": '70px', \"className\": 114: 115: 'center', 116: 117: // tombol ubah dan hapus 118: 119: \"render\": function(data, type, row) { 120: 121: var btn = \"<a style=\\\"margin-right:7px\\\" title=\\\"Ubah\\\" class=\\\"btn btn-info btn-sm getUbah\\\" 122: 123: href=\\\"javascript:void(0);\\\"><i class=\\\"fas fa-edit\\\"></i></a><a title=\\\"Hapus\\\" 124: 125: class=\\\"btn btn-danger btn-sm btnHapus\\\" href=\\\"javascript:void(0);\\\"> 126: 127: <i class=\\\"fas fa-trash\\\"></i></a>\"; 128: 129: return btn; 130: 131: } 132: 133: } 134: 135: ], 136: 137: \"order\": [[ 1, \"asc\" ]], // urutkan data berdasarkan provider secara ascending 138: 139: \"iDisplayLength\": 10, // tampilkan 10 data per halaman 140: 141: // membuat nomor urut tabel 142: 143: \"rowCallback\": function (row, data, iDisplayIndex) { 144: 145: var info = this.fnPagingInfo(); 146: 147: var page = info.iPage; 148: 149: var length = info.iLength; 150: 151: var index = page * length + (iDisplayIndex + 1); 152: $('td:eq(0)', row).html(index); } } ); // =============================================================================================== // ============================================ Form ============================================= // Tampilkan Modal Form Entri Data $('#btnTambah').click(function(){ // reset form $('#formPulsa')[0].reset(); // judul form $('#modalLabel').text('Entri Data Pulsa'); }); // Tampilkan Modal Form Ubah Data $('#tabel-pulsa tbody').on( 'click', '.getUbah', function (){ // judul form $('#modalLabel').text('Ubah Data Pulsa'); var data = table.row( $(this).parents('tr') ).data(); // membuat variabel untuk menampung data id_pulsa var id_pulsa = data[ 4 ]; $.ajax({ type : \"GET\", // mengirim data dengan method GET // proses get data pulsa berdasarkan id_pulsa url : \"modules/pulsa/get_data.php\", // data yang dikirim // tipe data JSON data : {id_pulsa:id_pulsa}, // ketika sukses get data dataType : \"JSON\", success: function(result){ // tampilkan modal ubah data pulsa $('#modalPulsa').modal('show'); free e-book | torolab.id 36

153: // tampilkan data pulsa 154: $('#id_pulsa').val(result.id_pulsa); 155: $('#provider').val(result.provider); 156: $('#nominal').val(result.nominal); 157: $('#harga').val(result.harga); 158: } 159: }); 160: }); 161: // =============================================================================================== 162: 163: // ====================================== Insert dan Update ====================================== 164: // Proses Simpan Data 165: $('#btnSimpan').click(function(){ 166: 167: // Validasi form input 168: // jika provider kosong 169: if ($('#provider').val()==\"\"){ 170: 171: // focus ke input provider pulsa 172: $( \"#provider\" ).focus(); 173: // tampilkan peringatan data tidak boleh kosong 174: swal(\"Peringatan!\", \"Provider tidak boleh kosong.\", \"warning\"); 175: } 176: // jika nominal kosong atau 0 (nol) 177: else if ($('#nominal').val()==\"\" || $('#nominal').val()==0){ 178: // focus ke input nominal 179: $( \"#nominal\" ).focus(); 180: // tampilkan peringatan data tidak boleh kosong 181: swal(\"Peringatan!\", \"Nominal tidak boleh kosong atau 0 (nol).\", \"warning\"); 182: } 183: // jika harga kosong atau 0 (nol) 184: else if ($('#harga').val()==\"\" || $('#harga').val()==0){ 185: // focus ke input harga 186: $( \"#harga\" ).focus(); 187: // tampilkan peringatan data tidak boleh kosong 188: swal(\"Peringatan!\", \"Harga tidak boleh kosong atau 0 (nol).\", \"warning\"); 189: } 190: // jika semua data sudah terisi, jalankan perintah simpan data 191: else { 192: // jika form entri data pulsa yang ditampilkan, jalankan perintah insert 193: if ($('#modalLabel').text()==\"Entri Data Pulsa\") { 194: 195: // membuat variabel untuk menampung data dari form entri data 196: var data = $('#formPulsa').serialize(); 197: 198: $.ajax({ 199: 200: type : \"POST\", // mengirim data dengan method POST 201: 202: url : \"modules/pulsa/insert.php\", // proses insert data 203: 204: data : data, // data yang dikirim 205: 206: success: function(result){ // ketika sukses menyimpan data 207: 208: if (result===\"sukses\") { 209: 210: // reset form 211: 212: $('#formPulsa')[0].reset(); 213: // tutup modal entri data pulsa $('#modalPulsa').modal('hide'); // tampilkan pesan sukses simpan data swal(\"Sukses!\", \"Data Pulsa berhasil disimpan.\", \"success\"); // tampilkan data pulsa var table = $('#tabel-pulsa').DataTable(); table.ajax.reload( null, false ); } else { // tampilkan pesan gagal simpan data swal(\"Gagal!\", \"Data Pulsa tidak bisa disimpan.\", \"error\"); } free e-book | torolab.id 37

214: } 215: }); 216: return false; 217: } 218: // jika form ubah data pulsa yang ditampilkan, jalankan perintah update 219: else if ($('#modalLabel').text()==\"Ubah Data Pulsa\") { 220: // membuat variabel untuk menampung data dari form ubah data 221: var data = $('#formPulsa').serialize(); 222: 223: $.ajax({ 224: 225: type : \"POST\", // mengirim data dengan method POST 226: 227: url : \"modules/pulsa/update.php\", // proses update data 228: 229: data : data, // data yang dikirim 230: 231: success: function(result){ // ketika sukses mengubah data 232: 233: if (result===\"sukses\") { 234: 235: // reset form 236: 237: $('#formPulsa')[0].reset(); 238: 239: // tutup modal ubah data pulsa 240: 241: $('#modalPulsa').modal('hide'); 242: 243: // tampilkan pesan sukses ubah data 244: 245: swal(\"Sukses!\", \"Data Pulsa berhasil diubah.\", \"success\"); 246: 247: // tampilkan data pulsa 248: 249: var table = $('#tabel-pulsa').DataTable(); 250: 251: table.ajax.reload( null, false ); 252: 253: } else { 254: 255: // tampilkan pesan gagal ubah data 256: 257: swal(\"Gagal!\", \"Data Pulsa tidak bisa diubah.\", \"error\"); 258: 259: } 260: 261: } 262: 263: }); 264: 265: return false; 266: 267: } 268: 269: } 270: 271: }); 272: 273: // =============================================================================================== // =========================================== Delete ============================================ $('#tabel-pulsa tbody').on( 'click', '.btnHapus', function (){ var data = table.row( $(this).parents('tr') ).data(); // tampilkan notifikasi saat akan menghapus data swal({ title: \"Apakah Anda Yakin?\", text: \"Anda akan menghapus data Provider : \"+ data[ 1 ] +\" - Nominal : \"+ data[ 2 ] +\"\", type: \"warning\", showCancelButton: true, confirmButtonColor: \"#DD6B55\", confirmButtonText: \"Ya, Hapus!\", closeOnConfirm: false }, // jika dipilih ya, maka jalankan perintah hapus data function () { // membuat variabel untuk menampung data id_pulsa var id_pulsa = data[ 4 ]; $.ajax({ // mengirim data dengan method POST type : \"POST\", // proses delete data url : \"modules/pulsa/delete.php\", // data yang dikirim data : {id_pulsa:id_pulsa}, // ketika sukses menghapus data success: function(result){ if (result===\"sukses\") { free e-book | torolab.id 38

274: // tampilkan pesan sukses hapus data 275: swal(\"Sukses!\", \"Data Pulsa berhasil dihapus.\", \"success\"); 276: // tampilkan data pulsa 277: var table = $('#tabel-pulsa').DataTable(); 278: table.ajax.reload( null, false ); 279: } else { 280: // tampilkan pesan gagal hapus hapus data 281: swal(\"Gagal!\", \"Data Pulsa tidak bisa dihapus.\", \"error\"); 282: } 283: } 284: }); 285: }); 286: }); 287: // =============================================================================================== 288: }); 289: </script> 8.2. Membuat file data.php Buat file baru di dalam folder pulsa dengan nama data.php. File data.php adalah script dari DataTables Server-side Processing, yang digunakan untuk menampilkan data pulsa dari tabel pulsa pada database ke aplikasi. Ketikan script berikut ini pada file data.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: 05: // nama tabel 06: $table = 'tbl_pulsa'; 07: // primary key tabel 08: $primaryKey = 'id_pulsa'; 09: 10: // membuat array untuk menampilkan isi tabel. 11: // Parameter 'db' mewakili nama kolom dalam database. 12: // parameter 'dt' mewakili pengenal kolom pada DataTable. 13: $columns = array( 14: array( 'db' => 'provider', 'dt' => 1 ), 15: array( 16: 'db' => 'nominal', 17: 'dt' => 2, 18: 'formatter' => function( $d, $row ) { 19: return number_format($d); 20: } 21: ), 22: array( 23: 'db' => 'harga', 24: 'dt' => 3, 25: 'formatter' => function( $d, $row ) { 26: return 'Rp. '.number_format($d); 27: } 28: ), 29: array( 'db' => 'id_pulsa', 'dt' => 4 ) 30: ); 31: 32: // memanggil file database.php untuk informasi koneksi ke server SQL 33: require_once \"../../config/database.php\"; free e-book | torolab.id 39

34: // memanggil file ssp.class.php untuk menjalankan datatables server-side processing 35: require '../../config/ssp.class.php'; 36: 37: echo json_encode( 38: SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ) 39: ); 40: } else { 41: // jika tidak ada ajax request, maka alihkan ke halaman index.php 42: echo '<script>window.location=\"../../index.php\"</script>'; 43: } 44: ?> 8.3. Membuat file insert.php Buat file baru di dalam folder pulsa dengan nama insert.php. File insert.php digunakan untuk melakukan proses insert data pulsa dari form entri data pulsa ke tabel pulsa pada database. Ketikan script berikut ini pada file insert.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // sql statement untuk insert data ke tabel pulsa 08: $query = \"INSERT INTO tbl_pulsa(provider, nominal, harga) VALUES (?,?,?)\"; 09: // membuat prepared statements 10: $stmt = $mysqli->prepare($query); 11: // hubungkan data dengan prepared statements 12: $stmt->bind_param(\"sii\", $provider, $nominal, $harga); 13: 14: // ambil data hasil post dari ajax 15: $provider = trim($_POST['provider']); 16: $nominal = trim($_POST['nominal']); 17: $harga = trim($_POST['harga']); 18: 19: // jalankan query: execute 20: $stmt->execute(); 21: 22: // cek query 23: if ($stmt) { 24: // jika berhasil tampilkan pesan berhasil simpan data 25: echo \"sukses\"; 26: } else { 27: // jika gagal tampilkan pesan gagal simpan data 28: echo \"gagal\"; 29: } 30: 31: // tutup statement 32: $stmt->close(); 33: // tutup koneksi 34: $mysqli->close(); 35: } else { 36: // jika tidak ada ajax request, maka alihkan ke halaman index.php 37: echo '<script>window.location=\"../../index.php\"</script>'; 38: } 39: ?> free e-book | torolab.id 40

8.4. Membuat file get_data.php Buat file baru di dalam folder pulsa dengan nama get_data.php. File get_data.php digunakan untuk menampilkan data pulsa dari tabel pulsa pada database berdasarkan id_pulsa, yang selanjutnya data tersebut akan ditampilkan pada form ubah data pulsa. Ketikan script berikut ini pada file get_data.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: // mengecek data get dari ajax 07: if (isset($_GET['id_pulsa'])) { 08: // sql statement untuk menampilkan data dari tabel pulsa berdasarkan id_pulsa 09: $query = \"SELECT * FROM tbl_pulsa WHERE id_pulsa=?\"; 10: // membuat prepared statements 11: $stmt = $mysqli->prepare($query); 12: //cek query 13: if (!$stmt) { 14: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 15: } 16: 17: // ambil data get dari ajax 18: $id_pulsa = $_GET['id_pulsa']; 19: // hubungkan \"data\" dengan prepared statements 20: $stmt->bind_param(\"i\", $id_pulsa); 21: // jalankan query: execute 22: $stmt->execute(); 23: // ambil hasil query 24: $result = $stmt->get_result(); 25: // tampilkan hasil query 26: $data = $result->fetch_assoc(); 27: 28: // tutup statement 29: $stmt->close(); 30: } 31: // tutup koneksi 32: $mysqli->close(); 33: 34: echo json_encode($data); 35: } else { 36: // jika tidak ada ajax request, maka alihkan ke halaman index.php 37: echo '<script>window.location=\"../../index.php\"</script>'; 38: } 39: ?> 8.5. Membuat file update.php Buat file baru di dalam folder pulsa dengan nama update.php. File update.php digunakan untuk melakukan proses update data pulsa di tabel pulsa pada database melalui form ubah data pulsa. Ketikan script berikut ini pada file update.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { free e-book | torolab.id 41

04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // mengecek data post dari ajax 08: if (isset($_POST['id_pulsa'])) { 09: // sql statement untuk update data di tabel pulsa 10: $query = \"UPDATE tbl_pulsa SET provider = ?, 11: nominal = ?, 12: harga = ? 13: WHERE id_pulsa = ?\"; 14: // membuat prepared statements 15: $stmt = $mysqli->prepare($query); 16: // hubungkan \"data\" dengan prepared statements 17: $stmt->bind_param(\"siii\", $provider, $nominal, $harga, $id_pulsa); 18: 19: // ambil data hasil post dari ajax 20: $id_pulsa = trim($_POST['id_pulsa']); 21: $provider = trim($_POST['provider']); 22: $nominal = trim($_POST['nominal']); 23: $harga = trim($_POST['harga']); 24: 25: // jalankan query: execute 26: $stmt->execute(); 27: 28: // cek query 29: if ($stmt) { 30: // jika berhasil tampilkan pesan berhasil ubah data 31: echo \"sukses\"; 32: } else { 33: // jika gagal tampilkan pesan gagal ubah data 34: echo \"gagal\"; 35: } 36: 37: // tutup statement 38: $stmt->close(); 39: } 40: // tutup koneksi 41: $mysqli->close(); 42: } else { 43: // jika tidak ada ajax request, maka alihkan ke halaman index.php 44: echo '<script>window.location=\"../../index.php\"</script>'; 45: } 46: ?> 8.6. Membuat file delete.php Buat file baru di dalam folder pulsa dengan nama delete.php. File delete.php digunakan untuk melakukan proses delete data pulsa dari tabel pulsa pada database. Ketikan script berikut ini pada file delete.php. 01: <?php 02: // Mengecek AJAX Request 03: if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' )) { 04: // panggil file config.php untuk koneksi ke database 05: require_once \"../../config/config.php\"; 06: 07: // mengecek data post dari ajax 08: if (isset($_POST['id_pulsa'])) { free e-book | torolab.id 42

09: // sql statement untuk delete data dari tabel pulsa 10: $query = \"DELETE FROM tbl_pulsa WHERE id_pulsa=?\"; 11: // membuat prepared statements 12: $stmt = $mysqli->prepare($query); 13: // hubungkan \"data\" dengan prepared statements 14: $stmt->bind_param(\"s\", $id_pulsa); 15: 16: // ambil data post dari ajax 17: $id_pulsa = $_POST['id_pulsa']; 18: 19: // jalankan query: execute 20: $stmt->execute(); 21: 22: // cek hasil query 23: if ($stmt) { 24: // jika berhasil tampilkan pesan berhasil hapus data 25: echo \"sukses\"; 26: } else { 27: // jika gagal tampilkan pesan gagal hapus data 28: echo \"gagal\"; 29: } 30: 31: // tutup statement 32: $stmt->close(); 33: } 34: // tutup koneksi 35: $mysqli->close(); 36: } else { 37: // jika tidak ada ajax request, maka alihkan ke halaman index.php 38: echo '<script>window.location=\"../../index.php\"</script>'; 39: } 40: ?> Setelah semua file selesai dibuat, selanjutnya refresh browser untuk melihat perubahan pada aplikasi. Kemudian jalankan aplikasi untuk mencoba semua fungsi yang telah dibuat pada halaman Data Pulsa. Tampilannya akan terlihat seperti gambar berikut ini.  Insert Data Pulsa free e-book | torolab.id 43

 View Data Pulsa 44  Update Data Pulsa  Delete Data Pulsa free e-book | torolab.id

BAB 9 HALAMAN DATA PENJUALAN Halaman Data Penjualan digunakan untuk mengelola data penjualan pulsa. Pada halaman ini kita dapat menginput, mengubah, menghapus, dan mencari data penjualan pulsa. Untuk membuat halaman Data Penjualan ikuti langkah-langkah berikut ini. 9.1. Membuat file view.php Buat file baru di dalam folder penjualan dengan nama view.php. File view.php merupakan file utama pada halaman Data Penjualan, yang berisikan script untuk membuat view data penjualan menggunakan DataTables Server-side Processing, membuat form entri dan ubah data penjualan menggunakan bootstrap modal, dan melakukan proses CRUD menggunakan AJAX. Ketikan script berikut ini pada file view.php. 001: <div class=\"content-header row mb-3\"> 002: <div class=\"col-md-12\"> 003: <h5> 004: <!-- judul halaman tampil data penjualan --> 005: <i class=\"fas fa-shopping-cart title-icon\"></i> Data Penjualan 006: <!-- tombol tambah data penjualan --> 007: <a class=\"btn btn-info float-right\" id=\"btnTambah\" href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#modalPenjualan\" role=\"button\"><i class=\"fas fa-plus\"></i> Tambah </a> 008: </h5> 009: </div> 010: </div> 011: 012: <div class=\"border mb-4\"></div> 013: 014: <div class=\"row\"> 015: <div class=\"col-md-12\"> 016: <!-- Tabel penjualan untuk menampilkan data penjualan dari database --> 017: <table id=\"tabel-penjualan\" class=\"table table-striped table-bordered\" style=\"width:100%\"> 018: <!-- judul kolom pada bagian kepala (atas) tabel --> 019: <thead> 020: <tr> 021: <th>No.</th> 022: <th>ID Penjualan</th> <!-- kolom disembunyikan --> 023: <th>Tanggal</th> 024: <th>ID Pelanggan</th> <!-- kolom disembunyikan --> 025: <th>Nama Pelanggan</th> 026: <th>No. HP</th> 027: <th>ID Pulsa</th> <!-- kolom disembunyikan --> 028: <th>Pulsa</th> 029: <th>Nominal</th> <!-- kolom disembunyikan, digabung dengan kolom Pulsa --> 030: <th>Jumlah Bayar</th> 031: <th></th> 032: </tr> 033: </thead> 034: </table> 035: </div> 036: </div> 037: free e-book | torolab.id 45

038: <!-- Modal form data penjualan --> 039: <div class=\"modal fade\" id=\"modalPenjualan\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modalPenjualan\" aria-hidden=\"true\"> 040: <div class=\"modal-dialog\" role=\"document\"> 041: <div class=\"modal-content\"> 042: <!-- judul form data penjualan --> 043: <div class=\"modal-header\"> 044: <h5 class=\"modal-title\"><i class=\"fas fa-edit title-icon\"></i><span id=\"modalLabel\"></span></h5> 045: <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"> 046: <span aria-hidden=\"true\">&times;</span> 047: </button> 048: </div> 049: <!-- isi form data penjualan --> 050: <form id=\"formPenjualan\"> 051: <div class=\"modal-body\"> 052: <input type=\"hidden\" id=\"id_penjualan\" name=\"id_penjualan\"> 053: 054: <div class=\"form-group\"> 055: <label>Tanggal</label> 056: <input type=\"text\" class=\"form-control date-picker\" data-date-format=\"dd-mm-yyyy\" id=\"tanggal\" name=\"tanggal\" value=\"<?php echo date(\"d-m-Y\"); ?>\" autocomplete=\"off\"> 057: </div> 058: 059: <div class=\"form-group\"> 060: <label>No. HP</label> 061: <select class=\"chosen-select\" id=\"id_pelanggan\" name=\"id_pelanggan\" onchange=\"get_pelanggan()\" autocomplete=\"off\"> 062: <option value=\"0\">-- Pilih --</option> 063: <?php 064: // panggil file config.php untuk koneksi ke database 065: require_once \"../../config/config.php\"; 066: // sql statement untuk menampilkan data no_hp dari tabel pelanggan 067: $query = \"SELECT id_pelanggan, no_hp FROM tbl_pelanggan ORDER BY no_hp ASC\"; 068: // membuat prepared statements 069: $stmt = $mysqli->prepare($query); 070: //cek query 071: if (!$stmt) { 072: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 073: } 074: // jalankan query: execute 075: $stmt->execute(); 076: // ambil hasil query 077: $result = $stmt->get_result(); 078: // tampilkan data 079: while ($data_pelanggan = $result->fetch_assoc()) { 080: echo\"<option value='$data_pelanggan[id_pelanggan]'> $data_pelanggan[no_hp] </option>\"; 081: } 082: // tutup statement 083: $stmt->close(); 084: ?> 085: </select> 086: </div> 087: 088: <div class=\"form-group\"> 089: <label>Nama Pelanggan</label> 090: <input type=\"text\" class=\"form-control\" id=\"nama\" name=\"nama\" readonly> 091: </div> 092: 093: <div class=\"form-group\"> free e-book | torolab.id 46