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

094: <label>Pulsa</label> 095: <select class=\"chosen-select\" id=\"id_pulsa\" name=\"id_pulsa\" onchange=\"get_pulsa()\" autocomplete=\"off\"> 096: <option value=\"0\">-- Pilih --</option> 097: <?php 098: // sql statement untuk menampilkan data no_hp dari tabel pelanggan 099: $query = \"SELECT id_pulsa, provider, nominal FROM tbl_pulsa ORDER BY provider ASC, nominal ASC\"; 100: // membuat prepared statements 101: $stmt = $mysqli->prepare($query); 102: // cek query 103: if (!$stmt) { 104: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 105: } 106: // jalankan query: execute 107: $stmt->execute(); 108: // ambil hasil query 109: $result = $stmt->get_result(); 110: // tampilkan data 111: while ($data_pulsa = $result->fetch_assoc()) { 112: echo\"<option value='$data_pulsa[id_pulsa]'> $data_pulsa[provider] – \".number_format($data_pulsa['nominal']).\" </option>\"; 113: } 114: // tutup statement 115: $stmt->close(); 116: // tutup koneksi 117: $mysqli->close(); 118: ?> 119: </select> 120: </div> 121: 122: <div class=\"form-group\"> 123: <label>Harga</label> 124: <div class=\"input-group mb-2\"> 125: <div class=\"input-group-prepend\"><div class=\"input-group-text\">Rp.</div></div> 126: <input type=\"text\" class=\"form-control\" id=\"harga\" name=\"harga\" readonly> 127: </div> 128: </div> 129: </div> 130: <div class=\"modal-footer\"> 131: <button type=\"button\" class=\"btn btn-info btn-submit\" id=\"btnSimpan\">Simpan</button> 132: <button type=\"button\" class=\"btn btn-secondary btn-reset\" data-dismiss=\"modal\">Batal</button> 133: </div> 134: </form> 135: </div> 136: </div> 137: </div> 138: 139: <script type=\"text/javascript\"> 140: // fungsi untuk menampilkan data pelanggan dari select box ke textfield 141: function get_pelanggan(){ 142: // membuat variabel untuk menampung id_pelanggan 143: var id_pelanggan = $('#id_pelanggan').val(); 144: 145: $.ajax({ 146: type : \"GET\", // mengirim data dengan method GET 147: url : \"modules/penjualan/get_pelanggan.php\", // proses get data pelanggan berdasarkan id_penjualan 148: data : {id_pelanggan:id_pelanggan}, // data yang dikirim 149: dataType : \"JSON\", // tipe data JSON 150: success: function(result){ // ketika sukses get data free e-book | torolab.id 47

151: // tampilkan data 152: $(\"#nama\").val(result.nama); 153: } 154: }); 155: } 156: 157: // fungsi untuk menampilkan data pulsa dari select box ke textfield 158: function get_pulsa(){ 159: // membuat variabel untuk menampung id_pulsa 160: var id_pulsa = $('#id_pulsa').val(); 161: 162: $.ajax({ 163: type : \"GET\", // mengirim data dengan method GET 164: url : \"modules/penjualan/get_pulsa.php\", // proses get data pelanggan berdasarkan id_penjualan 165: data : {id_pulsa:id_pulsa}, // data yang dikirim 166: dataType : \"JSON\", // tipe data JSON 167: success: function(result){ // ketika sukses get data 168: // tampilkan data 169: $(\"#harga\").val(result.harga); 170: } 171: }); 172: } 173: 174: $(document).ready(function(){ 175: // datepicker plugin 176: $('.date-picker').datepicker({ 177: autoclose: true, 178: todayHighlight: true 179: }); 180: 181: // chosen-select plugin 182: $('.chosen-select').chosen(); 183: 184: // ============================================ View ============================================= 185: // dataTables plugin untuk membuat nomor urut tabel 186: $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) 187: { 188: return { 189: \"iStart\": oSettings._iDisplayStart, 190: \"iEnd\": oSettings.fnDisplayEnd(), 191: \"iLength\": oSettings._iDisplayLength, 192: \"iTotal\": oSettings.fnRecordsTotal(), 193: \"iFilteredTotal\": oSettings.fnRecordsDisplay(), 194: \"iPage\": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength), 195: \"iTotalPages\": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength) 196: }; 197: }; 198: 199: // datatables serverside processing 200: var table = $('#tabel-penjualan').DataTable( { 201: \"scrollY\": '45vh', // vertikal scroll pada tabel 202: \"scrollCollapse\": true, 203: \"processing\": true, // tampilkan loading saat proses data 204: \"serverSide\": true, // server-side processing 205: \"ajax\": 'modules/penjualan/data.php', // panggil file data.php untuk menampilkan data penjualan dari database 206: // menampilkan data 207: \"columnDefs\": [ 208: { \"targets\": 0, \"data\": null, \"orderable\": false, \"searchable\": false, \"width\": '30px', \"className\": 'center' }, free e-book | torolab.id 48

209: { \"targets\": 1, \"visible\": false }, // kolom disembunyikan 210: 211: { \"targets\": 2, \"width\": '70px', \"className\": 'center' }, 212: 213: { \"targets\": 3, \"visible\": false }, // kolom disembunyikan 214: 215: { \"targets\": 4, \"width\": '150px', }, 216: 217: { \"targets\": 5, \"width\": '100px', \"className\": 'center' }, 218: 219: { \"targets\": 6, \"visible\": false }, // kolom disembunyikan 220: 221: { 222: 223: \"targets\": 7, \"width\": '170px', 224: \"render\": function ( data, type, row ) { 225: 226: return data +' - '+ row[ 8 ]+''; 227: } 228: 229: }, 230: 231: { \"targets\": 8, \"visible\": false }, // kolom disembunyikan, digabung dengan kolom Pulsa 232: 233: { \"targets\": 9, \"width\": '100px', \"className\": 'right' }, 234: 235: { 236: 237: \"targets\": 10, \"data\": null, \"orderable\": false, \"searchable\": false, \"width\": '60px', \"className\": 238: 239: 'center', 240: 241: // tombol ubah dan hapus 242: 243: \"render\": function(data, type, row) { 244: 245: var btn = \"<a style=\\\"margin-right:7px\\\" title=\\\"Ubah\\\" class=\\\"btn btn-info btn-sm getUbah\\\" 246: 247: href=\\\"javascript:void(0);\\\"><i class=\\\"fas fa-edit\\\"></i></a><a title=\\\"Hapus\\\" 248: 249: class=\\\"btn btn-danger btn-sm btnHapus\\\" href=\\\"javascript:void(0);\\\"> 250: 251: <i class=\\\"fas fa-trash\\\"></i></a>\"; 252: 253: return btn; 254: 255: } 256: 257: } 258: 259: ], 260: 261: \"order\": [[ 1, \"desc\" ]], // urutkan data berdasarkan id_penjualan secara descending 262: 263: \"iDisplayLength\": 10, // tampilkan 10 data per halaman // membuat nomor urut tabel \"rowCallback\": function (row, data, iDisplayIndex) { var info = this.fnPagingInfo(); var page = info.iPage; var length = info.iLength; var index = page * length + (iDisplayIndex + 1); $('td:eq(0)', row).html(index); } } ); // =============================================================================================== // ============================================ Form ============================================= // Tampilkan Modal Form Tambah Data $('#btnTambah').click(function(){ // reset form $('#formPenjualan')[0].reset(); $('#id_pelanggan').val('').trigger('chosen:updated'); $('#id_pulsa').val('').trigger('chosen:updated'); // judul form $('#modalLabel').text('Entri Data Penjualan'); }); // Tampilkan Modal Form Ubah Data $('#tabel-penjualan tbody').on( 'click', '.getUbah', function (){ // judul form $('#modalLabel').text('Ubah Data Penjualan'); var data = table.row( $(this).parents('tr') ).data(); // membuat variabel untuk menampung data id_penjualan var id_penjualan = data[ 1 ]; free e-book | torolab.id 49

264: $.ajax({ 265: 266: type : \"GET\", // mengirim data dengan method GET 267: 268: url : \"modules/penjualan/get_data.php\", // proses get data penjualan berdasarkan id_penjualan 269: 270: data : {id_penjualan:id_penjualan}, // data yang dikirim 271: 272: dataType : \"JSON\", // tipe data JSON 273: 274: success: function(result){ // ketika sukses get data 275: 276: // ubah tanggal menjadi d-m-Y 277: 278: var tgl = result.tanggal; 279: 280: var dateAr = tgl.split('-'); 281: 282: var tanggal = dateAr[2] + '-' + dateAr[1] + '-' + dateAr[0]; 283: 284: // tampilkan modal ubah data penjualan 285: 286: $('#modalPenjualan').modal('show'); 287: 288: // tampilkan data penjualan 289: 290: $('#id_penjualan').val(result.id_penjualan); 291: 292: $('#tanggal').val(tanggal); 293: 294: $('#id_pelanggan').val(result.pelanggan).trigger('chosen:updated'); 295: 296: $('#nama').val(result.nama); 297: 298: $('#id_pulsa').val(result.pulsa).trigger('chosen:updated'); 299: 300: $('#harga').val(result.jumlah_bayar); 301: 302: } 303: 304: }); 305: 306: }); 307: 308: // =============================================================================================== 309: 310: // Proses Simpan Data 311: $('#btnSimpan').click(function(){ 312: 313: // Validasi form input 314: // jika tanggal kosong 315: if ($('#tanggal').val()==\"\"){ 316: 317: // focus ke input tanggal 318: $( \"#tanggal\" ).focus(); 319: // tampilkan peringatan data tidak boleh kosong 320: swal(\"Peringatan!\", \"Tanggal tidak boleh kosong.\", \"warning\"); 321: } 322: // jika data pelanggan kosong else if ($('#id_pelanggan').val()==\"\"){ // focus ke input data pelanggan $( \"#id_pelanggan\" ).focus(); // tampilkan peringatan data tidak boleh kosong swal(\"Peringatan!\", \"Data Pelanggan tidak boleh kosong.\", \"warning\"); } // jika data pulsa kosong else if ($('#id_pulsa').val()==\"\"){ // focus ke input data pulsa $( \"#id_pulsa\" ).focus(); // tampilkan peringatan data tidak boleh kosong swal(\"Peringatan!\", \"Data Pulsa tidak boleh kosong.\", \"warning\"); } // jika semua data sudah terisi, jalankan perintah simpan data else { // jika form entri data penjualan yang ditampilkan, jalankan perintah insert if ($('#modalLabel').text()==\"Entri Data Penjualan\") { // membuat variabel untuk menampung data dari form entri data var data = $('#formPenjualan').serialize(); $.ajax({ // mengirim data dengan method POST type : \"POST\", // proses insert data url : \"modules/penjualan/insert.php\", free e-book | torolab.id 50

323: data : data, // data yang dikirim 324: 325: success: function(result){ // ketika sukses menyimpan data 326: 327: if (result===\"sukses\") { 328: 329: // reset form 330: 331: $('#formPenjualan')[0].reset(); 332: 333: $('#id_pelanggan').val('').trigger('chosen:updated'); 334: 335: $('#id_pulsa').val('').trigger('chosen:updated'); 336: 337: // tutup modal entri data penjualan 338: 339: $('#modalPenjualan').modal('hide'); 340: 341: // tampilkan pesan sukses simpan data 342: 343: swal(\"Sukses!\", \"Data Penjualan berhasil disimpan.\", \"success\"); 344: 345: // tampilkan data penjualan 346: 347: var table = $('#tabel-penjualan').DataTable(); 348: 349: table.ajax.reload( null, false ); 350: 351: } else { 352: 353: // tampilkan pesan gagal simpan data 354: 355: swal(\"Gagal!\", \"Data Penjualan tidak bisa disimpan.\", \"error\"); 356: 357: } 358: 359: } 360: 361: }); 362: 363: return false; 364: 365: } 366: 367: // jika form ubah data penjualan yang ditampilkan, jalankan perintah update 368: 369: else if ($('#modalLabel').text()==\"Ubah Data Penjualan\") { 370: 371: // membuat variabel untuk menampung data dari form ubah data 372: 373: var data = $('#formPenjualan').serialize(); 374: 375: $.ajax({ 376: 377: type : \"POST\", // mengirim data dengan method POST 378: 379: url : \"modules/penjualan/update.php\", // proses update data 380: 381: data : data, // data yang dikirim success: function(result){ // ketika sukses mengubah data if (result===\"sukses\") { // reset form $('#formPenjualan')[0].reset(); $('#id_pelanggan').val('').trigger('chosen:updated'); $('#id_pulsa').val('').trigger('chosen:updated'); // tutup modal ubah data penjualan $('#modalPenjualan').modal('hide'); // tampilkan pesan sukses ubah data swal(\"Sukses!\", \"Data penjualan berhasil diubah.\", \"success\"); // tampilkan data penjualan var table = $('#tabel-penjualan').DataTable(); table.ajax.reload( null, false ); } else { // tampilkan pesan gagal ubah data swal(\"Gagal!\", \"Data penjualan tidak bisa diubah.\", \"error\"); } } }); return false; } } }); // =============================================================================================== // =========================================== Delete ============================================ $('#tabel-penjualan tbody').on( 'click', '.btnHapus', function (){ var data = table.row( $(this).parents('tr') ).data(); free e-book | torolab.id 51

382: // tampilkan notifikasi saat akan menghapus data 383: swal({ 384: title: \"Apakah Anda Yakin?\", 385: text: \"Anda akan menghapus data penjualan tanggal : \"+ data[ 2 ] +\" - Pelanggan : \"+ data[ 4 ] +\", No. HP : \"+ data[ 5 ] +\"\", 386: type: \"warning\", 387: showCancelButton: true, 388: confirmButtonColor: \"#DD6B55\", 389: confirmButtonText: \"Ya, Hapus!\", 390: closeOnConfirm: false 391: }, 392: // jika dipilih ya, maka jalankan perintah hapus data 393: function () { 394: // membuat variabel untuk menampung data id_penjualan 395: var id_penjualan = data[ 1 ]; 396: 397: $.ajax({ 398: type : \"POST\", // mengirim data dengan method POST 399: url : \"modules/penjualan/delete.php\", // proses delete data 400: data : {id_penjualan:id_penjualan}, // data yang dikirim 401: success: function(result){ // ketika sukses menghapus data 402: if (result===\"sukses\") { 403: // tampilkan pesan sukses hapus data 404: swal(\"Sukses!\", \"Data Penjualan berhasil dihapus.\", \"success\"); 405: // tampilkan data penjualan 406: var table = $('#tabel-penjualan').DataTable(); 407: table.ajax.reload( null, false ); 408: } else { 409: // tampilkan pesan gagal hapus hapus data 410: swal(\"Gagal!\", \"Data Penjualan tidak bisa dihapus.\", \"error\"); 411: } 412: } 413: }); 414: }); 415: }); 416: // =============================================================================================== 417: }); 418: </script> 9.2. Membuat file data.php Buat file baru di dalam folder penjualan dengan nama data.php. File data.php adalah script dari DataTables Server-side Processing, yang digunakan untuk menampilkan data penjualan dari tabel penjualan 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: // sql statement untuk join table 06: $table = <<<EOT 07: ( 08: SELECT a.id_penjualan,a.tanggal,a.pelanggan,a.pulsa,a.jumlah_bayar,b.nama,b.no_hp,c.provider,c.nominal 09: FROM tbl_penjualan as a INNER JOIN tbl_pelanggan as b INNER JOIN tbl_pulsa as c 10: ON a.pelanggan=b.id_pelanggan AND a.pulsa=c.id_pulsa 11: ) temp 12: EOT; free e-book | torolab.id 52

13: 14: // primary key tabel 15: $primaryKey = 'id_penjualan'; 16: 17: // membuat array untuk menampilkan isi tabel. 18: // Parameter 'db' mewakili nama kolom dalam database. 19: // parameter 'dt' mewakili pengenal kolom pada DataTable. 20: $columns = array( 21: array( 'db' => 'id_penjualan', 'dt' => 1 ), 22: array( 23: 'db' => 'tanggal', 24: 'dt' => 2, 25: 'formatter' => function( $d, $row ) { 26: return date('d-m-Y', strtotime($d)); 27: } 28: ), 29: array( 'db' => 'pelanggan', 'dt' => 3 ), 30: array( 'db' => 'nama', 'dt' => 4 ), 31: array( 'db' => 'no_hp', 'dt' => 5 ), 32: array( 'db' => 'pulsa', 'dt' => 6 ), 33: array( 'db' => 'provider', 'dt' => 7 ), 34: array( 35: 'db' => 'nominal', 36: 'dt' => 8, 37: 'formatter' => function( $d, $row ) { 38: return number_format($d); 39: } 40: ), 41: array( 42: 'db' => 'jumlah_bayar', 43: 'dt' => 9, 44: 'formatter' => function( $d, $row ) { 45: return 'Rp. '.number_format($d); 46: } 47: ), 48: array( 'db' => 'id_penjualan', 'dt' => 10 ) 49: ); 50: 51: // memanggil file database.php untuk informasi koneksi ke server SQL 52: require_once \"../../config/database.php\"; 53: // memanggil file ssp.class.php untuk menjalankan datatables server-side processing 54: require '../../config/ssp.class.php'; 55: 56: echo json_encode( 57: SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ) 58: ); 59: } else { 60: // jika tidak ada ajax request, maka alihkan ke halaman index.php 61: echo '<script>window.location=\"../../index.php\"</script>'; 62: } 63: ?> 9.3. Membuat file get_pelanggan.php Buat file baru di dalam folder penjualan dengan nama get_pelanggan.php. File get_pelanggan.php digunakan untuk menampilkan data nama pelanggan dari tabel pelanggan pada database berdasarkan id_pelanggan yang dikirim dari select box No. HP. Selanjutnya data tersebut free e-book | torolab.id 53

akan ditampilkan ke textfield Nama Pelanggan pada form entri/ubah data penjualan. 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: // 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 nama 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(); 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: ?> 9.4. Membuat file get_pulsa.php Buat file baru di dalam folder penjualan dengan nama get_pulsa.php. File get_pulsa.php digunakan untuk menampilkan data harga pulsa dari tabel pulsa pada database berdasarkan id_pulsa yang dikirim dari select box Pulsa. Selanjutnya data tersebut akan ditampilkan ke textfield Harga pada form entri/ubah data penjualan. 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\"; free e-book | torolab.id 54

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 harga 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: ?> 9.5. Membuat file insert.php Buat file baru di dalam folder penjualan dengan nama insert.php. File insert.php digunakan untuk melakukan proses insert data penjualan dari form entri data penjualan ke tabel penjualan 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 penjualan 08: $query = \"INSERT INTO tbl_penjualan(tanggal, pelanggan, pulsa, jumlah_bayar) VALUES (?,?,?,?)\"; 09: // membuat prepared statements 10: $stmt = $mysqli->prepare($query); 11: // hubungkan data dengan prepared statements 12: $stmt->bind_param(\"siii\", $tanggal, $pelanggan, $pulsa, $jumlah_bayar); 13: 14: // ambil data hasil post dari ajax 15: $tanggal = trim(date('Y-m-d', strtotime($_POST['tanggal']))); 16: $pelanggan = trim($_POST['id_pelanggan']); free e-book | torolab.id 55

17: $pulsa = trim($_POST['id_pulsa']); 18: $jumlah_bayar = trim($_POST['harga']); 19: 20: // jalankan query: execute 21: $stmt->execute(); 22: 23: // cek query 24: if ($stmt) { 25: // jika berhasil tampilkan pesan berhasil simpan data 26: echo \"sukses\"; 27: } else { 28: // jika gagal tampilkan pesan gagal simpan data 29: echo \"gagal\"; 30: } 31: 32: // tutup statement 33: $stmt->close(); 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: ?> 9.6. Membuat file get_data.php Buat file baru di dalam folder penjualan dengan nama get_data.php. File get_data.php digunakan untuk menampilkan data penjualan dari tabel penjualan pada database berdasarkan id_penjualan, yang selanjutnya data tersebut akan ditampilkan pada form ubah data penjualan. 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_penjualan'])) { 08: // sql statement untuk menampilkan data dari tabel penjualan berdasarkan id_penjualan 09: $query = \"SELECT a.id_penjualan,a.tanggal,a.pelanggan,a.pulsa,a.jumlah_bayar, b.nama,b.no_hp,c.provider,c.nominal 10: FROM tbl_penjualan as a INNER JOIN tbl_pelanggan as b INNER JOIN tbl_pulsa as c 11: ON a.pelanggan=b.id_pelanggan AND a.pulsa=c.id_pulsa WHERE id_penjualan=?\"; 12: // membuat prepared statements 13: $stmt = $mysqli->prepare($query); 14: // cek query 15: if (!$stmt) { 16: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 17: } 18: 19: // ambil data get dari ajax 20: $id_penjualan = $_GET['id_penjualan']; 21: // hubungkan \"data\" dengan prepared statements 22: $stmt->bind_param(\"i\", $id_penjualan); 23: // jalankan query: execute 24: $stmt->execute(); free e-book | torolab.id 56

25: // ambil hasil query 26: $result = $stmt->get_result(); 27: // tampilkan hasil query 28: $data = $result->fetch_assoc(); 29: 30: // tutup statement 31: $stmt->close(); 32: } 33: // tutup koneksi 34: $mysqli->close(); 35: 36: echo json_encode($data); 37: } else { 38: // jika tidak ada ajax request, maka alihkan ke halaman index.php 39: echo '<script>window.location=\"../../index.php\"</script>'; 40: } 41: ?> 9.7. Membuat file update.php Buat file baru di dalam folder penjualan dengan nama update.php. File update.php digunakan untuk melakukan proses update data penjualan di tabel penjualan pada database melalui form ubah data penjualan. 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_penjualan'])) { 09: // sql statement untuk update data di tabel penjualan 10: $query = \"UPDATE tbl_penjualan SET tanggal = ?, 11: pelanggan = ?, 12: pulsa = ?, 13: jumlah_bayar = ? 14: WHERE id_penjualan = ?\"; 15: // membuat prepared statements 16: $stmt = $mysqli->prepare($query); 17: // hubungkan \"data\" dengan prepared statements 18: $stmt->bind_param(\"siiii\", $tanggal, $pelanggan, $pulsa, $jumlah_bayar, $id_penjualan); 19: 20: // ambil data hasil post dari ajax 21: $id_penjualan = trim($_POST['id_penjualan']); 22: $tanggal = trim(date('Y-m-d', strtotime($_POST['tanggal']))); 23: $pelanggan = trim($_POST['id_pelanggan']); 24: $pulsa = trim($_POST['id_pulsa']); 25: $jumlah_bayar = trim($_POST['harga']); 26: 27: // jalankan query: execute 28: $stmt->execute(); 29: 30: // cek query 31: if ($stmt) { 32: // jika berhasil tampilkan pesan berhasil ubah data 33: echo \"sukses\"; free e-book | torolab.id 57

34: } else { 35: // jika gagal tampilkan pesan gagal ubah data 36: echo \"gagal\"; 37: } 38: 39: // tutup statement 40: $stmt->close(); 41: } 42: // tutup koneksi 43: $mysqli->close(); 44: } else { 45: // jika tidak ada ajax request, maka alihkan ke halaman index.php 46: echo '<script>window.location=\"../../index.php\"</script>'; 47: } 48: ?> 9.8. Membuat file delete.php Buat file baru di dalam folder penjualan dengan nama delete.php. File delete.php digunakan untuk melakukan proses delete data penjualan dari tabel penjualan 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_penjualan'])) { 09: // sql statement untuk delete data dari tabel penjualan 10: $query = \"DELETE FROM tbl_penjualan WHERE id_penjualan=?\"; 11: // membuat prepared statements 12: $stmt = $mysqli->prepare($query); 13: // hubungkan \"data\" dengan prepared statements 14: $stmt->bind_param(\"i\", $id_penjualan); 15: 16: // ambil data post dari ajax 17: $id_penjualan = $_POST['id_penjualan']; 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(); free e-book | torolab.id 58

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 Penjualan. Tampilannya akan terlihat seperti gambar berikut ini.  Insert Data Penjualan  View Data Penjualan 59 free e-book | torolab.id

 Update Data Penjualan  Delete Data Penjualan free e-book | torolab.id 60

BAB 10 HALAMAN LAPORAN PENJUALAN Halaman Laporan Penjualan digunakan untuk menampilkan dan mencetak laporan data penjualan pulsa. Pada halaman ini kita dapat menampilkan laporan data penjualan pulsa berdasarkan filter tanggal penjualan. Laporan yang ditampilkan bisa perhari, perminggu, perbulan, dan pertahun. Laporan dapat dicetak/export ke dalam format Ms. Excel. Untuk membuat halaman Laporan Penjualan ikuti langkah- langkah berikut ini. 10.1. Membuat file view.php Buat file baru di dalam folder laporan dengan nama view.php. File view.php merupakan file utama pada halaman Laporan Penjualan, yang berisikan script untuk membuat form filter data penjualan berdasarkan tanggal penjualan, dan membuat view data penjualan berdasarkan filter tanggal penjualan. 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 laporan penjualan --> 005: <i class=\"fas fa-file-alt title-icon\"></i> Laporan Penjualan 006: </h5> 007: </div> 008: </div> 009: 010: <div class=\"border mb-4\"></div> 011: 012: <div class=\"row\"> 013: <div class=\"col-md-12\"> 014: <!-- form filter data penjualan --> 015: <form id=\"formFilter\" action=\"modules/laporan/export.php\" method=\"get\"> 016: <div class=\"row\"> 017: <div class=\"col\"> 018: <div class=\"form-group mb-0\"> 019: <label>Filter : </label> 020: </div> 021: </div> 022: </div> 023: 024: <div class=\"row\"> 025: <div class=\"col\"> 026: <div class=\"form-group\"> 027: <input type=\"text\" class=\"form-control date-picker\" data-date-format=\"dd-mm-yyyy\" id=\"tgl_awal\" name=\"tgl_awal\" placeholder=\"Tanggal Awal\" autocomplete=\"off\" required> 028: </div> 029: </div> 030: 031: <div class=\"col\"> 032: <div class=\"form-group\"> 033: <input type=\"text\" class=\"form-control date-picker\" data-date-format=\"dd-mm-yyyy\" id=\"tgl_akhir\" name=\"tgl_akhir\" placeholder=\"Tanggal Akhir\" autocomplete=\"off\" required> 034: </div> 035: </div> 036: free e-book | torolab.id 61

037: <div class=\"col\"> 038: <div class=\"form-group\"> 039: <button type=\"button\" class=\"btn btn-info btn-submit\" id=\"btnTampil\">Tampilkan</button> 040: </div> 041: </div> 042: 043: <div class=\"col\"> 044: <div class=\"form-group right\"> 045: <!-- tombol export data ke excel --> 046: <button type=\"submit\" class=\"btn btn-success mb-3\" id=\"btnExport\"> 047: <i class=\"fas fa-file-excel title-icon\"></i> Export ke Excel 048: </button> 049: </div> 050: </div> 051: </div> 052: </form> 053: </div> 054: </div> 055: 056: <div class=\"border mt-2 mb-4\"></div> 057: 058: <div class=\"row\"> 059: <div id=\"tabelLaporan\" class=\"col-md-12\"> 060: <!-- Tabel untuk menampilkan laporan data penjualan dari database --> 061: <table class=\"table table-striped table-bordered\" style=\"width:100%\"> 062: <!-- judul kolom pada bagian kepala (atas) tabel --> 063: <thead> 064: <tr> 065: <th class=\"center\">No.</th> 066: <th class=\"center\">Tanggal</th> 067: <th class=\"center\">Nama Pelanggan</th> 068: <th class=\"center\">No. HP</th> 069: <th class=\"center\">Pulsa</th> 070: <th class=\"center\">Jumlah Bayar</th> 071: </tr> 072: </thead> 073: <!-- parameter untuk memuat isi tabel --> 074: <tbody id=\"loadData\"></tbody> 075: </table> 076: </div> 077: </div> 078: 079: <script type=\"text/javascript\"> 080: $(document).ready(function(){ 081: // datepicker plugin 082: $('.date-picker').datepicker({ 083: autoclose: true, 084: todayHighlight: true 085: }); 086: 087: // menyembunyikan tabel laporan 088: $('#tabelLaporan').hide(); 089: // menyembunyikan tombol export 090: $('#btnExport').hide(); 091: 092: // Tampilkan tabel laporan data penjualan 093: $('#btnTampil').click(function(){ 094: // Validasi form input 095: // jika tanggal awal kosong 096: if ($('#tgl_awal').val()==\"\"){ free e-book | torolab.id 62

097: // focus ke input tanggal awal 098: $( \"#tgl_awal\" ).focus(); 099: // tampilkan peringatan data tidak boleh kosong 100: swal(\"Peringatan!\", \"Tanggal awal tidak boleh kosong.\", \"warning\"); 101: } 102: // jika tanggal akhir kosong 103: else if ($('#tgl_akhir').val()==\"\"){ 104: // focus ke input tanggal akhir 105: $( \"#tgl_akhir\" ).focus(); 106: // tampilkan peringatan data tidak boleh kosong 107: swal(\"Peringatan!\", \"Tanggal akhir tidak boleh kosong.\", \"warning\"); 108: // jika semua tanggal sudah diisi, jalankan perintah untuk menampilkan data 109: } else { 110: // membuat variabel untuk menampung data dari form filter 111: var data = $('#formFilter').serialize(); 112: 113: $.ajax({ 114: type : \"GET\", // mengirim data dengan method GET 115: url : \"modules/laporan/get_data.php\", // proses get data penjualan berdasarkan tanggal 116: data : data, // data yang dikirim 117: success: function(data){ // ketika sukses get data 118: // menampilkan tabel laporan 119: $('#tabelLaporan').show(); 120: // menampilkan data penjualan 121: $('#loadData').html(data); 122: // menampilkan tombol export 123: $('#btnExport').show(); 124: } 125: }); 126: } 127: }); 128: 129: // saat tombol export diklik 130: $('#btnExport').click(function(){ 131: // tampilkan pesan sukses export data 132: swal(\"Sukses!\", \"Laporan Data Penjualan berhasil diexport.\", \"success\"); 133: }); 134: }); 135: </script> 10.2. Membuat file get_data.php Buat file baru di dalam folder laporan dengan nama get_data.php. File get_data.php digunakan untuk menampilkan data penjualan dari tabel penjualan pada database berdasarkan tanggal, yang selanjutnya data tersebut akan ditampilkan pada halaman Laporan Penjualan. 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['tgl_awal'])) { 08: // variabel untuk nomor urut tabel 09: $no = 1; free e-book | torolab.id 63

10: // variabel untuk total bayar 11: $total = 0; 12: // sql statement untuk menampilkan data dari tabel penjualan berdasarkan tanggal 13: $query = \"SELECT a.id_penjualan,a.tanggal,a.pelanggan,a.pulsa,a.jumlah_bayar, b.nama,b.no_hp,c.provider,c.nominal 14: FROM tbl_penjualan as a INNER JOIN tbl_pelanggan as b INNER JOIN tbl_pulsa as c 15: ON a.pelanggan=b.id_pelanggan AND a.pulsa=c.id_pulsa 16: WHERE a.tanggal BETWEEN ? AND ? ORDER BY a.id_penjualan ASC\"; 17: // membuat prepared statements 18: $stmt = $mysqli->prepare($query); 19: // cek query 20: if (!$stmt) { 21: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 22: } 23: 24: // ambil data get dari ajax 25: $tgl_awal = date('Y-m-d', strtotime($_GET['tgl_awal'])); 26: $tgl_akhir = date('Y-m-d', strtotime($_GET['tgl_akhir'])); 27: // hubungkan \"data\" dengan prepared statements 28: $stmt->bind_param(\"ss\", $tgl_awal, $tgl_akhir); 29: // jalankan query: execute 30: $stmt->execute(); 31: // ambil hasil query 32: $result = $stmt->get_result(); 33: // tampilkan hasil query 34: while ($data = $result->fetch_assoc()) { 35: echo \"<tr> 36: <td width='30' class='center'>\".$no.\"</td> 37: <td width='90' class='center'>\".date('d-m-Y', strtotime($data['tanggal'])).\"</td> 38: <td width='170'>\".$data['nama'].\"</td> 39: <td width='90' class='center'>\".$data['no_hp'].\"</td> 40: <td width='170'>\".$data['provider'].\" - \".number_format($data['nominal']).\"</td> 41: <td width='100' class='right'>Rp.\".number_format($data['jumlah_bayar']).\"</td> 42: </tr>\"; 43: $no++; 44: $total += $data['jumlah_bayar']; 45: }; 46: echo \"<tr> 47: <td class='center' colspan='5'><strong>Total</strong></td> 48: <td class='right'><strong>Rp.\".number_format($total).\"</strong></td> 49: </tr>\"; 50: 51: // tutup statement 52: $stmt->close(); 53: } 54: // tutup koneksi 55: $mysqli->close(); 56: } else { 57: // jika tidak ada ajax request, maka alihkan ke halaman index.php 58: echo '<script>window.location=\"../../index.php\"</script>'; 59: } 60: ?> 10.3. Membuat file export.php Buat file baru di dalam folder laporan dengan nama export.php. File export.php digunakan untuk mengexport laporan data penjualan pulsa ke dalam format Ms. Excel. Ketikan script berikut ini pada file export.php. free e-book | torolab.id 64

01: <?php 02: // panggil file config.php untuk koneksi ke database 03: require_once \"../../config/config.php\"; 04: // mengecek data get dari ajax 05: if (isset($_GET['tgl_awal'])) { 06: header(\"Content-Type: application/force-download\"); 07: header(\"Cache-Control: no-cache, must-revalidate\"); 08: // nama file hasil export 09: header(\"content-disposition: attachment;filename=LAPORAN-DATA-PENJUALAN-TANGGAL-\".$_GET['tgl_awal'].\"-SD- \".$_GET['tgl_akhir'].\".xls\"); 10: ?> 11: <!-- Judul laporan --> 12: <center> 13: <h3>LAPORAN DATA PENJUALAN</h3> 14: </center> 15: <!-- Table untuk di Export Ke Excel --> 16: <table border='1'> 17: <h3> 18: <thead> 19: <tr> 20: <th class=\"center\" valign=\"middle\">No.</th> 21: <th class=\"center\" valign=\"middle\">Tanggal</th> 22: <th class=\"center\" valign=\"middle\">Nama Pelanggan</th> 23: <th class=\"center\" valign=\"middle\">No. HP</th> 24: <th class=\"center\" valign=\"middle\">Pulsa</th> 25: <th class=\"center\" valign=\"middle\">Jumlah Bayar</th> 26: </tr> 27: </thead> 28: </h3> 29: 30: <tbody> 31: <?php 32: // variabel untuk nomor urut tabel 33: $no = 1; 34: // variabel untuk total bayar 35: $total = 0; 36: // sql statement untuk menampilkan data dari tabel penjualan berdasarkan tanggal 37: $query = \"SELECT a.id_penjualan,a.tanggal,a.pelanggan,a.pulsa,a.jumlah_bayar, b.nama,b.no_hp,c.provider,c.nominal 38: FROM tbl_penjualan as a INNER JOIN tbl_pelanggan as b INNER JOIN tbl_pulsa as c 39: ON a.pelanggan=b.id_pelanggan AND a.pulsa=c.id_pulsa 40: WHERE a.tanggal BETWEEN ? AND ? ORDER BY a.id_penjualan ASC\"; 41: // membuat prepared statements 42: $stmt = $mysqli->prepare($query); 43: //cek query 44: if (!$stmt) { 45: die('Query Error: '.$mysqli->errno.'-'.$mysqli->error); 46: } 47: 48: // ambil data get dari ajax 49: $tgl_awal = date('Y-m-d', strtotime($_GET['tgl_awal'])); 50: $tgl_akhir = date('Y-m-d', strtotime($_GET['tgl_akhir'])); 51: // hubungkan \"data\" dengan prepared statements 52: $stmt->bind_param(\"ss\", $tgl_awal, $tgl_akhir); 53: // jalankan query: execute 54: $stmt->execute(); 55: // ambil hasil query 56: $result = $stmt->get_result(); 57: // tampilkan hasil query 58: while ($data = $result->fetch_assoc()) { free e-book | torolab.id 65

59: echo \"<tr> 60: <td width='30' class='center'>\".$no.\"</td> 61: <td width='90' class='center'>\".date('d-m-Y', strtotime($data['tanggal'])).\"</td> 62: <td width='170'>\".$data['nama'].\"</td> 63: <td width='90' class='center'>\".$data['no_hp'].\"</td> 64: <td width='170'>\".$data['provider'].\" - \".number_format($data['nominal']).\"</td> 65: <td width='100' class='right'>Rp.\".number_format($data['jumlah_bayar']).\"</td> 66: </tr>\"; 67: $no++; 68: $total += $data['jumlah_bayar']; 69: }; 70: echo \"<tr> 71: <td class='center' colspan='5'><strong>Total</strong></td> 72: <td class='right'><strong>Rp.\".number_format($total).\"</strong></td> 73: </tr>\"; 74: 75: // tutup statement 76: $stmt->close(); 77: ?> 78: </tbody> 79: </table> 80: <?php 81: } 82: // tutup koneksi 83: $mysqli->close(); 84: ?> 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 Laporan Penjualan. Tampilannya akan terlihat seperti gambar berikut ini. free e-book | torolab.id 66

BAB 11 PENUTUP Demikianlah pembahasan e-book Belajar Mudah Pemrograman Web, Membuat Aplikasi Penjualan Pulsa dengan PHP dan AJAX. Materi dalam e-book ini masih sangat sederhana, namun sudah cukup memadai sebagai dasar pembelajaran pemrograman web interaktif yang lebih baik dan lebih cepat menggunakan PHP dan AJAX, serta dapat menjadi referensi untuk mengembangkan aplikasi yang lebih kompleks. Sebagai pendukung latihan, Anda dapat mendownload final project pada link berikut: https://drive.google.com/open?id=1bfN6b2PDOHiX8TyTeFn_Q1RXZQ7w2bv2 Penulis menyadari masih banyak kekurangan dalam e-book ini, untuk itu penulis sangat menghargai kritik maupun saran yang membangun, sehingga dapat menulis lebih baik lagi untuk e-book yang akan datang. Kritik dan saran dapat Anda sampaikan melalui e-mail [email protected]. Semoga e-book ini dapat dipahami dan bermanfaat bagi Anda yang ingin mempelajari pemrograman web maupun yang ingin berkarir di bidang pengembangan website. Sampai jumpa lagi pada e-book torolab.id selanjutnya. free e-book | torolab.id 67

BAB 12 DAFTAR PUSTAKA URL PHP Manual, http://php.net/manual/en/ MariaDB, https://mariadb.org/ jQuery, https://jquery.com/ AJAX, https://api.jquery.com/category/ajax/ XAMPP, https://www.apachefriends.org/ Visual Studio Code, https://code.visualstudio.com/ Bootstrap, https://getbootstrap.com/ Datepicker, https://bootstrap-datepicker.readthedocs.io/en/latest/ Chosen, https://harvesthq.github.io/chosen/ DataTables, https://datatables.net/ SweetAlert, https://sweetalert.js.org/ Font Awesome, https://fontawesome.com/ free e-book | torolab.id 68