CRUD App Kalkulator Dengan Vs Code
Ditulis Oleh:
Sutimah Senior Accounting Increms Oktober, 2021
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi
- CRUD App Kalkulator Dengan Vs Code
- Pembuatan Database
- Pembuatan Folder Koneksi ke Database
- Pembuatan File Utama Master Halaman
- Pembuatan FILE Halaman Utama (HOME)
- Pembuatan File Kontrol Menu Halman (SWITCH)
- Pembuatan File Hapus Data (DELETE)
- Pembuatan FILE Ubah Data (Update)
- Sekilas Info Bahasa Pemrograman
- Catatan Tambahan
- Hasil Aktual Projek
CRUD App Kalkulator Dengan Vs Code
Dalam pembuatan aplikasi online maupun offline tentu harus mempersiapkan aplikasi pendukungnya, seperti : Aplikasi text editor maupun Aplikasi Database (db), dalam hal ini, ada beberapa aplikasi yang harus di siapkan dan di install pada komputer seperti dibawah ini :
Perlu diketahui bersama, Notepad++ dan Sublime maupun aplikasi text editor tidaklah jauh berbeda dengan visual studio code, semua kembali kepada para pengguna.
Aplikasi text editor berfungsi untuk penulisan skrip pemrograman PHP, JAVA, JAVASCRIPT, CSS maupun bahasa pemrograman yang lainnya, yang mana semua itu sesuai dengan fungsi text editor tersebut dibuat oleh pembuatnya.
Dalam memahami bahasa-bahasa pemrograman maka tentu harus sering membaca, menulis dan mempraktekkannya secara langsung, minimal meluangkan waktu dalam satu hari selama 2 jam untuk membaca suatu skrip dan tentu langsung memperaktekkannya, menjadi seorang programmer yang berkelas tentu harus merelakan waktu dalam hal ini, disebabkan menjadi seorang programmer untuk waktu 24 jam itu sebenarnya tidaklah cukup dalam artian membutuhkan waktu yang cukup panjang untuk dapat memahami dan mendalami bahasa pemrograman sehingga dapat ditulis dan berbuah menjadi aplikasi yang sangat amat bermanfaat oleh para pengguna, bahkan menjadi suatu penghasilan untuk menyambung sisa hidup yang masih tersisa di dunia yang fana ini.
Dalam penulisan pemrograman tentu ada istilah Case Sensitivity, Case Semsitivity adalah istilah yang membahas suatu kepekaan. Adapun untuk bahasa pemrograman PHP tidak membedakan huruf besar dan kecil untuk penamaan fungsi (function), nama class, maupun keyword bawaan PHP seperti echo, while.
Perhatikan contoh dibawah ini yang tidak terjadi suatu kesalahan dalam penulisan :
<?php
echo “Bagaimana kabar kalian ?”; atau eCHo “Bagaimana kabar kalian ?”; atau ECHO “Hai kalian ?”;
?>
Adapun bahasa pemrograman PHP membedakan penulisan huruf besar dan huruf kecil (case sensitive) untuk penamaan variabel. Variabel $nama, $Nama dan _ $NAMA_ akan dianggap sebagai 3 variabel yang berbeda. Tentu akan terjadi error dikarenakan salah menulis nama variabel, yang seharusnya menggunakan huruf kecil, ditulis dengan huruf besar, contohnya : <?php $Manubar=”Manubar”; echo “$mAnubar”; ?>.
Tentu akan menerbitakan suatu kesalahan yakni : Warning: Undefined variable $mAnubar.
Catatan : Aplikasi Text Editor : Sublime, Notepad++, Visual Studio code, Dreamweaver dll, dalam hal ini disesuaikan dengan kebutuhan anda dalam mempermudah penulisan skrip, semua aplikasi tersebut memiliki kelebihan masing-masing pada fasilitas yang disediakan.
Langkah-langkah membuat aplikasi, buka aplikasi Visual Studio Code, klik file pilih new window pada toolbar diatas kanan atas, kenapa harus new window, dikarenakan biasanya bagi yang sudah memiliki Vs Code biasanya sudah terisi file-file projek atau file latihan dan lain-lain, jika tidak ada file lain maka tentu langsung saja membuat folder baru.
Pilih Open Folder Buatlah folder baru dengan nama kalkulator pada folder xampp-htdocs setelah itu buatlah file dengan nama index.php, perhatikan pada gambar yang sudah disediakan, jika membuat filenya diluar aplikasi text editor Vs Code maka dapat menggunakan notepad, buka notepad dan klik Save As untuk menyimpan dan pilih tempat di penyimpanan pada folder Xampp – htdocs didalam folder kalkulator.
Perhatikan gambar dibawah ini :
Jika ingin membuat folder diluar Aplikasi text Editor maka cukup langsung ke Folder Xampp-htdocs klik kanan pada mouse pilih new-folder, seperti gambar dibawah ini :
Buatlah folder dengan nama kalkulator seperti gambar dibawah ini;
Jika sudah selesai maka klik tombol Select Folder, dan akan muncul kotak dialog pilihan jika membuat folder barunya dari visual studio code, silahkan pilih sesuai kebutuhan pengguna.
Adapun tahapan dalam pembuatan file seperti pada gambar dibawah ini ;
Jika sudah selesai maka buatlah folder bs pada atau didalam folder kalkulator, kemudian masukkan file bootstraps.css dan bootstrap.js serta jquery.js seperti gambar dibawah ini ; jikalau belum memiliki silahkan download disini : Bootstraps dan Jquery
Bila semua diatas sudah dilakukan maka tulislah skrip dibawah ini pada file yang sudah diberi nama index.php pada text editor visual studio code. Perhatikan dalam penulisan skrip pemrograman karena bersifat case sensitif (huruf kecil dan huruf besar dianggap berbeda).
Tulislah skrip pada index.php seperti dibawah ini :
<?php header('Location: http://localhost/kalkulator/app_halaman.php'); ?>
Bila sudah menyelesaikan skrip diatas, silahkan simpan.
PEMBUATAN NAMA DATABASE
Dalam hal pembuatan database tidak lepas dari CRUD merupakan kependekan dari Create, Read, Update, Delete (Membuat, membaca, mengubah, menghapus), hal ini merupakan suatu hal yang wajib ada pada aplikasi apapun, disinilah puncak klimak dalam suatu pengembangan aplikasi tersebut menjadi aplikasi yang sangat bermanfaat digunakan oleh para pengguna (user).
Adapun lanjutan dari materi sebelumnya yakni : memberi fungsi sesuai apa yang diharapkan, perhatikan petunjuk yang diberikan dibawah ini :
Membuat Database pada phpmyadmin (MariaDB atau MySQL) jika belum memilikinya silahkan download pada situs resminya : Download App Xampp.
Jika sudah mendownload silahkan untuk menginstal pada perangkat keras (komputer), kemudian perhatikan pada gambar dibawah ini :
Buka App Xampp klik start pada apache dan MySQL kemudian klik tombol Admin pada MySQL.
Kemudian buatlah database dengan nama : datakalkulator, dalam penulisan jangan ada spasi, dan perlu diperhatikan nama database menggunakan huruf kecil agar mudah dimonitor dan terhindar dari kesalahan penulisan., jika sudah silahkan klik tombol Create (buat).
Kemudian klik nama database datakalkulator untuk membuat table dengan nama : table_kalkulator (menggunakan huruf kecil), isi pada Number of columns dengan 8, dan klik tombol Go.
Kemudian isi kolom tersebut seperti pada table & gambar dibawah ini :
| Name | Type | Lenght/values | A-I |
| id | INT | 11 | Primary √ |
| kode | CHAR | 21 | Unique |
| k1 | FLOAT | ||
| k2 | FLOAT | ||
| hasil_1 | FLOAT | ||
| k3 | FLOAT | ||
| k4 | FLOAT | ||
| hasil_2 | FLOAT |
Bila sudah di isi silahkan untuk mengklik tombol save, maka hasilnya seperti dibawah ini ;
PEMBUATAN FOLDER & FILE KONEKSI DATABASE
Buka folder Xampp yang berada pada Lokal Drive C: klik folder Xampp-htdocs-kalkulator kemudian klik kanan pada mouse pilih new-folder berilah nama : koneksi, dalam pembuatan folder baru dapat juga dilakukan pada Vs Code.
Kemudian buka app visual studio code, untuk membuat file dengan nama koneksidb.php pada folder koneksi, perhatikan gambar dibawah ini ;
Kemudian tulislah skrip seperti dibawah ini kemudian jika sudah selesai Simpan (Ctrl + S):
<?php
$Server = "localhost"; $Pengguna = "root"; $Sandi = ""; $Database = "datakalkulator";
$koneksidb = new mysqli($Server, $Pengguna, $Sandi, $Database); if ($koneksidb->connect_errno) { printf("Gagal Koneksi silahkan hubungi Team IT Anda atau pihak yang berkompeten dalam hal ini: %s\n", $koneksidb); exit(); }
?>
Keterangan :
$Server =”localhost” ; Mengoneksi servel local pada computer yang sudah terinstall Xampp
$Database =”datakalkulator” ; Nama database yang sudah dibuat pada halaman sebelumnya.
Printf dan echo memiliki fungsi yang sama yaitu : untuk menampilkan teks (text).
MySQL merupakan database terpopuler, disebabkan MySQL bersifat open source dan gratis, adapun database selain MySQL juga ada seperti Oracle, PostgreSQL, dan Microsoft SQL Server. Bahasa pemrograman PHP juga bisa digunakan untuk berkomunikasi dengan aplikasi database ini, walaupun gratis Mysql, fitur yang ada di dalam MySQL tidak kalah canggih dengan aplikasi database berbayar seperti Oracle. Namun perlu diketahui bahwa Aplikasi database seperti Oracle dan Microsoft SQL Server biasanya hanya dipakai oleh perusahaan besar yang berkelas enterprise, pada situs web hosting yang menyediakan Oracle dan Microsoft SQL Server hampir tidak ada, jika ada tentu harganya sangat mahal sebab harus membayar biaya lisensi. Mayoritas web hosting hanya menyediakan MySQL (atau MariaDB) dengan sistem operasi Linux.
PHP versi 5.6 kebawah masih menggunakan penulisan mysql dan untuk versi 5.6 dalam penulisan menggunakan mysqli, dan dalam penulisan variabelnya pun harus dibalik seperti :
$query = mysqli_query($koneksidb, $updateSql) <!—versi php 5.6 ke atas -->
$query = mysql_query($updateSql, $koneksidb) <!—versi php 5.6 ke bawah -->
PEMBUATAN FILE UTAMA MASTER HALAMAN
Masih pada Vs Code, buat file pada folder yang sudah ada yaitu : kalkulator, tambahkan file tersebut dan beri nama ; app_halaman.php, kemudian tulislah skripnya seperti dibawah ini;
<?php session_start(); include_once "koneksi/koneksidb.php"; ?>
<body> <div class="row"> <!-- Membuat dan menentukan Row halaman-->
<div class="col-12"> <?php include "buka_halaman.php"; ?> </div> </div> </body>
Jika sudah silahkan simpan (ctrl+S), app_halaman.php akan terhubung ke file index.php.
PEMBUATAN FILE HALAMAN UTAMA (HOME)
Kemudian pada halamanutama.php atau bagi yang belum memiliki silahkan buat file baru pada folder kalkulator dengan halamanutama.php <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale=1,
user-scalable=yes">
<link rel="stylesheet" href="bs/bootstrap.css">
<script src="bs/jquery.js"></script>
<script src="bs/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#k1,#k2").keyup(function() {
var k1 = $("#k1").val();
var k2 = $("#k2").val();
var hasil_1 = parseFloat(k1) + parseFloat(k2);
$("#hasil_1").val(hasil_1);
});
$("#k3,#k4").keyup(function() {
var k3 = $("#k3").val();
var k4 = $("#k4").val();
var hasil_2 = parseFloat(k3) - parseFloat(k4);
$("#hasil_2").val(hasil_2);
});
});
</script>
</head>
Keterangan :
Fungsi pada :
<meta charset="utf-8">, agar aplikasi yang dibuat bisa membaca simbol-simbol maupun huruf-huruf yang berbeda dari alphabet seperti (jepang, china dll).
Fungsi pada :
<meta name="viewport" content="width = device-width, initial-scale=1, user-scalable=yes">,
berfungsi agar responsive ketika dibuka pada hardware berbasis tablet maupun android.
Fungsi pada :
<link rel="stylesheet" href="bs/bootstrap.css">,
memanggil class yang sudah terhimpun pada suatu file yang diletakkan pada folder bs yang didalamnya berisi file bootstrap.css yang berperan menampilkan warna, design serta tata letak, besar & kecilnya huruf serta pengaturan-pengaturan untuk mempercantik tampilan halaman yang berisi konten atau data.
Fungsi pada : <script src="bs/jquery.js"></script>, memanggil class yang sudah terhimpun pada suatu file yang diletakkan pada folder bs yang didalamnya berisi file jquery.js
Fungsi pada :
$(document).ready(function() {
$("#k1,#k2").keyup(function() {
var k1 = $("#k1").val();
$(document).ready(function(), dokumen yang ditulis sudah siap untuk di eksekusi, dan diarahkan pada fungsi keyup (jika data di input maka akan saling terkoneksi dengan inputan lainnya).
Var maupun Const dan let merupakan suatu variable jika php diawali dengan $ sebagai bentuk pendeklerasian seperti var sekolah = “tempat belajar” jika PHP $sekolah = “tempat belajar”.
$("#k1,#k2"), Mencari id atau name k1 dan k2 jika ada maka akan dilanjutkan kefungsi selanjutnya yaitu ;
$("#k1,#k2").keyup(function() {
Var hasil_2 = parseFloat(k3) - parseFloat(k4); menentukan id yang memiliki k3 dan k4 sebagai bilangan float, maka ditulis dengan parseFloat, jika integer maka ditulis dengan parseInt.
Kemudian diantaranya diberikan tanda pengurangan, atau penambahan, perkalian ataupun pembagian dan lain-lain.
Penulisan skrip pada javascript diletakkan diantara <head> dan </head>.
Catatan : “skrip pada keterangan merupakan penjelasan skrip bukan untuk dimasukkan atau ditulis kembali”
Fungsi pada : val(); suatu value (nilai) yang belum diketahui nilainya sehingga diberi tanda kurung yang kosong ().
Untuk mengetahui tentang fungsi pada javascript, silahkan kunjungi disini : Dasar Javascript
Dan untuk mengetahui perbedaan Var, Const dan Let dapat dilihat disini : CRUD Tanpa Refresh dengan select PHP & Javacript
Jika sudah dilakukan penulisan diatas, maka silahkan untuk menulis skrip lanjutannya seperti dibawah ini :
Tulislah skrip lanjutan ini dibawahnya dari </head>
<body>
<!-- tanda Ini berfungsi mematikan perintah atau disebut komentar -->
<?php
if ($_GET) {
if (isset($_POST['SimpanData'])) {$pesanError = array();
if (trim($_POST['k1']) == "") {
$pesanError[] = "Data <b>angka</b> tidak boleh kosong !";
}
if (trim($_POST['k2']) == "") {
$pesanError[] = "Data <b>angka</b> tidak boleh kosong !";
}
if (trim($_POST['k3']) == "") {
$pesanError[] = "Data <b>angka</b> tidak boleh kosong !";
}
if (trim($_POST['k4']) == "") {
$pesanError[] = "Data <b>angka</b> tidak boleh kosong !";
}
// $dataKode = $_POST['dataKode'];
$datak1 = $_POST['k1'];
$datak2 = $_POST['k2'];
$datahasil_1 = $_POST['hasil_1'];
$datak3 = $_POST['k3'];
$datak4 = $_POST['k4'];
$datahasil_2 = $_POST['hasil_2'];
Keterangan :
Fungsi pada ; if ($_GET) {, Jika mendapatkan hasil inputan pada sebuah post[‘SimpanData’] yang di eksekusi maka periksa dulu data yang ada yakni : $pesanError = array();Fungsi pada ; if(trim($_POST['k1']) == "") {, jika ternyata yang diposting atau yang di input sama dengan kosong atau tidak ada yang di isi, maka akan menerbitkan pesan error.
Fungsi pada ; $datak1 = $_POST['k1'];, merupakan pendeklarasian suatu variable sama dengan apa yang di input pada kolom input sesuai name dan id yang diberikan, jika id=k1 maka akan saling terhubung dengan k1 yang lain.
Kemudian silahkan menlanjukan untuk menulis skrip dibawah ini ;
Tulislah skrip lanjutan dibawahnya dari $datahasil_2 = $_POST['hasil_2'];
if (count($pesanError) >= 1) {
echo "<div class='mssgBox'>";
echo "<img src='gambar/stop_gaes.png'> <br><hr>"; // Ambil Gambar dari folder gambar
$noPesan = 0;
foreach ($pesanError as $indeks => $pesan_tampil) {
$noPesan++;
echo " $noPesan. $pesan_tampil<br>";
}
echo "</div> <br>";
} else {
$query = "SELECT max(cast( kode as decimal)) id FROM tabel_kalkulator";
if ($hasil_kode = mysqli_query($koneksidb, $query)) {
$data = mysqli_fetch_assoc($hasil_kode);
$ambil_Kode = $data['id'];
$ambil_Kode = $ambil_Kode + 1;
$dataKode = str_pad($ambil_Kode, 4, "0", STR_PAD_LEFT);
}
Keterangan;
Fungsi pada ; if (count($pesanError) >= 1) {, if ditemukan kesalahan lebih atau sama dengan 1, maka akan menerbitkan gambar, yang mana folder gambar serta nama file gambar sudah ditentukan sebelumnya.
Fungsi pada ;
foreach ($pesanError as $indeks => $pesan_tampil),
foreach merupakan metode pengulangan pada array, begitu juga dengan while, untuk mengetahui hal ini silahkan kunjungi disini :
Fungsi pada ; else , begitu juga selain dari sebelumnya, jika sudah tidak ditemukan error maka dilanjutkan pada skrip selanjutnya, yaitu pembuatan kode urut.
Adapun untuk gambar silahkan buat folder baru di dalam folder kalkulator, beri nama folder baru tersebut dengan nama ; gambar. kemudian masukkan gambar yang dimiliki atau yang sudah kami berikan.
Sesuaikan nama file seperti pada skrip dibawah ini ;
"<img src='gambar/stop_gaes.png'>
Jika sudah kita melanjutkan skrip selanjutnya yakni memasukan data kedalam database yang sudah disediakan, adapun skrip seperti dibawah ini :
Tulislah skrip lanjutan dibawahnya dari :
$dataKode = str_pad($ambil_Kode, 4, "0", STR_PAD_LEFT);}
$tambahSql = "INSERT INTO tabel_kalkulator SET kode= '$dataKode',
k1 = '$datak1',
k2 = '$datak2',
hasil_1 = '$datahasil_1',
k3 = '$datak3',
k4 = '$datak4',
hasil_2 = '$datahasil_2'";
$hasil_keputusan = mysqli_query($koneksidb, $tambahSql)
or die("Gagal query" . mysqli_error($koneksidb));
if ($hasil_keputusan) {
echo "<meta http-equiv='refresh' content='0; url=?halaman=Utama'>";
}
exit;
}
}
}
$query = "SELECT max(cast( kode as decimal)) id FROM tabel_kalkulator";
if ($hasil_kode = mysqli_query($koneksidb, $query)) { $data = mysqli_fetch_assoc($hasil_kode);
$ambil_Kode = $data['id'];
$ambil_Kode = $ambil_Kode + 1;
$dataKode = str_pad($ambil_Kode, 4, "0", STR_PAD_LEFT);
}
$datak1 = isset($_POST['k1']) ? $_POST['k1'] : '';
$datak2 = isset($_POST['k2']) ? $_POST['k2'] : '';
$datahasil_1 = isset($_POST['hasil_1']) ? $_POST['hasil_1'] : '';
$datak3 = isset($_POST['k3']) ? $_POST['k3'] : '';
$datak4 = isset($_POST['k4']) ? $_POST['k4'] : '';
$datahasil_2 = isset($_POST['hasil_2']) ? $_POST['hasil_2'] : '';
?>
Skrip selanjutnya berada dibawah ini, jika sebelumnya ada skrip silahkan skrip yang lama dihapus mulai dari judul <tittle> Aplikasi Kalkulator </tittle> sampai sebelum </body> kemudian diganti dengan skrip ini :
<title> Aplikasi Kalkulator</title>
<div class="modal fade" id="kursuskalkulator" role="dialog" width="100%" aria- hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h4>Create-Read-Update-Delete <sup>(CRUD)</sup><br /> Input & Update Data Kalkulator</h4> </div> <div class="modal-body"> <div class="row"> <!-- Membuat dan menentukan Row halaman--> <div class="col-12 p-2"> <!-- ukuran halaman yang ditampilkan --> <div class="table-responsive p-2"> <form action="?halaman=Utama" method="post" name="form1" id="form1"> <table class="table table-bordered table-striped"> <!-- memanggil fungsi class pada bootstrap.css dan bootstrap.js --> <thead> <tr> <td colspan="5" class="text-center"><strong>PROJEK KALKULATOR</strong></td> </tr> <tr> <td colspan="5" class="text-center"><input type="text" name="dataKode" id="dataKode" title="Kode Data" class="text-center" value="<?php echo $dataKode; ?>" size="11" maxlength="21"></td> </tr> <tr> <td class="text-center">No</td> <td class="text-center">Input Number</td> <td class="text-center"> </td> <td class="text-center">Input Number</td> <td class="text-center">Result</td> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td class="text-center"><input type="number" name="k1" id="k1" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak1; ?>"></td> <td class="text-center">+</td> <td class="text-center"><input type="number" name="k2" id="k2" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak2; ?>"></td> <td class="text-center"><input type="number" name="hasil_1" id="hasil_1" placeholder="Hasil" title="Input Angka" class="text-center" value="<?php echo $datahasil_1; ?>"></td> </tr> <tr class="text-center"> <td>2</td> <td><input type="number" name="k3" id="k3" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak3; ?>"></td> <td>-</td> <td><input type="number" name="k4" id="k4" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak4; ?>"></td> <td><input type="number" name="hasil_2" id="hasil_2" placeholder="Hasil" title="Input Angka" class="text-center" value="<?php echo $datahasil_2; ?>"></td> </tr> <tr> <td class="text-center"> </td> <td colspan="5"> <div class="text-center"><button type="submit" name="SimpanData" id="SimpanData" class="badge badge-primary" title="Simpan Data">Simpan Data</button> <button type="reset" class="badge badge-default" id="IsiData">Reset</button> <button type="reset" class="badge badge-danger" data-dismiss="modal">Batal</button> </div> </td> </tr> </tbody> </table> </form> </div> </div> </div> </div> </div> </div></div>
Keterangan :
Catatan : “skrip pada keterangan merupakan penjelasan skrip bukan untuk dimasukkan atau ditulis kembali”
Fungsi pada :
div class="modal fade" id="kursuskalkulator" role="dialog" width="100%" aria- hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"><h4>Create-Read-Update-Delete <sup>(CRUD)</sup><br /> Input & Update Data Kalkulator</h4></div> <div class="modal-body">
Menampilkan halaman baru berupa popup, yang diambil dari class modal pada bootstrap.
Adapun untuk penjelasan dapat mengunjunginya disini : Modal Bootstrap
Kemudian jika sudah ditulis skrip diatas Silahkan menulis skrip lanjutan dibawah ini ;
<div class="row">
<!-- Membuat dan menentukan Row halaman--> <div class="col-10 p-2"> <!-- ukuran halaman yang ditampilkan --> <h4 class="text-center text-primary"> Aplikasi Kalkulator <sup class="text-danger">App Multi</sup></H4> <div class="table-responsive p-4"> <a href="javaScript:void(0);" data-toggle="modal" data-target="#kursuskalkulator" class="btn btn-primary pull-right bottom-gap TombolTambahHo"> Tambah Data </a> <p></p> <form id="form1" name="form1" method="post"> <table class="table table-bordered table-striped"> <tbody> <tr> <td colspan="8" class="text-center"><strong>PROJEK KALKULATOR</strong></td> </tr> <tr> <td class="text-center"></td> <td colspan="6" class="text-center"> </td> <td class="text-center"><img src="gambar/print_gaes.png" width="40" height="44" alt="" onClick="javascript:window.print()" /></td> </tr> <tr> <td class="text-center">No</td> <td class="text-center">Input Number</td> <td class="text-center"> </td> <td class="text-center">Input Number</td> <td class="text-center">Result</td> <td class="text-center">Nomor Data</td> <td class="text-center">Edit</td> <td class="text-center">Delete</td> </tr> <!-- Pengambilan data dari database MariaDB (MySQl pada phpMyAdmin) perhatikan dalam penulisannya dibawah ini --> <?php $sql = "SELECT * FROM tabel_kalkulator"; $myQry = mysqli_query($koneksidb, $sql) or die("Query salah : " . mysqli_error($koneksidb)); $nomor = 0; while ($kolomData = mysqli_fetch_array($myQry)) { $nomor++; $Kode = $kolomData['kode']; ?> <tr> <td rowspan="2" class="text-center"> <p></p> <?php echo $nomor; ?> </td> <td class="text-center"><?php echo $kolomData['k1']; ?></td> <td class="text-center">+</td> <td class="text-center"><?php echo $kolomData['k2']; ?></td> <td class="text-center"><?php echo $kolomData['hasil_1']; ?></td> <td rowspan="2" class="text-center"> <p></p> <?php echo $kolomData['kode']; ?> </td> <td rowspan="2" class="text-center"> <p></p> <a href="?halaman=Ubah-DataKalkulator&Kode=<?php echo $Kode; ?>" target=" _self" onclick="return confirm('Apakah Anda Yakin Mengubah Data ini...?')"> <span class="badge badge-warning">Ubah</span></a> </td> <td rowspan="2" class="text-center"> <p></p> <a href="?halaman=Hapus-DataKalkulator&Kode=<?php echo $Kode; ?>" target="_self" onclick="return confirm('Apakah Anda Yakin Menghapus...?')"> <span class="badge badge-danger">Hapus</span></a> </td> </tr> <tr class="text-center"> <td><?php echo $kolomData['k3']; ?></td> <td>-</td> <td><?php echo $kolomData['k4']; ?></td> <td><?php echo $kolomData['hasil_2']; ?></td> </tr> <tr> <td colspan="8" class="text-center"> </td> </tr> <?php } ?> </tbody> </table> </form> </div></div></div> </body> </html>
PEMBUATAN FILE KONTROL MENU HALAMAN (SWITCH)
Jika penulisan skrip diatas sudah selesai silahkan buat file baru pada folder kalkulator dengan nama : buka_halaman.php, kemudian tulislah skrip dibawah ini;
<?php
# KONTROL MENU HALAMAN PROGRAM if ($_GET) { // Jika mendapatkan variabel URL:?halaman switch ($_GET['halaman']) { case 'Utama': if (!file_exists("halamanutama.php")) die("HALAMAN KOSONG MAAF YA!"); include "halamanutama.php"; break; case 'Ubah-DataKalkulator': if (!file_exists("ubahdata_kalkulator.php")) die("Kalian Gimana Sih, ngak ada halamannya kok!"); include "ubahdata_kalkulator.php"; break; case 'Hapus-DataKalkulator': if (!file_exists("hapusdata_kalkulator.php")) die("Kalian Gimana Sih, ngak ada halamannya kok!"); include "hapusdata_kalkulator.php"; break; //===== Silahkan menambahkan kontrol halaman dibawah ini jika ingin dikembangkan ======= default: if (!file_exists("halamanutama.php")) die("Halaman Utama Tidak ada Gaes !"); include "halamanutama.php"; break; } } else { // Jika tidak mendapatkan variabel URL: ?halaman if (!file_exists("halamanutama.php")) die("Halaman Utama Tidak ada Gaes !"); include "halamanutama.php"; } ?>
Silahkan simpan (Ctrl+S), dan buatlah file baru pada folder kalkulator dengan nama ; hapusdata_kalkulator.php.
PEMBUATAN FILE HAPUS DATA (DELETE)
Jika sudah membuat file baru pada folder kalkulator dengan nama ; hapusdata_kalkulator.php, tulislah skrip dibawah ini;
<?php
include_once "koneksi/koneksidb.php";
if ($_GET) {
if (empty($_GET['Kode'])) {
echo "<b>Data yang dihapus tidak ada</b>";
} else {
$hapusSql = "DELETE FROM tabel_kalkulator
WHERE kode='" . $_GET['Kode'] . "'";
$hasil_keputusan = mysqli_query($koneksidb, $hapusSql)
or die("Gagal query" . mysqli_error($koneksidb));
if ($hasil_keputusan) {
echo "<meta http-equiv='refresh' content='0; url=?halaman=Utama'>";
}
}
}
?>
Bila sudah selesai silahkan disimpan (ctrl+S), kemudian buka Aplikasi browse (chrome opera dll), ketik alamat : localhost/kalkulator, jika benar maka tidak akan menerbitkan error.
PEMBUATAN FILE UBAH DATA (UPDATE)
Silahkan buatlah file baru pada folder kalkulator dengan nama : ubahdata_kalkulator.php
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width = device-width, initial-scale=1, user-scalable=yes"> <link rel="stylesheet" href="bs/bootstrap.css"> <script src="bs/jquery.js"></script> <script src="bs/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#k1,#k2").keyup(function() { var k1 = $("#k1").val(); var k2 = $("#k2").val(); var hasil_1 = parseFloat(k1) + parseFloat(k2); $("#hasil_1").val(hasil_1); }); $("#k3,#k4").keyup(function() { var k3 = $("#k3").val(); var k4 = $("#k4").val(); var hasil_2 = parseFloat(k3) - parseFloat(k4); $("#hasil_2").val(hasil_2); }); }); </script> </head> <body> <!-- tanda Ini berfungsi mematikan perintah atau disebut komentar --> <?php if ($_GET) { if (isset($_POST['SimpanData'])) { $pesanError = array(); if (trim($_POST['k1']) == "") { $pesanError[] = "Data <b>angka</b> tidak boleh kosong !"; } if (trim($_POST['k2']) == "") { $pesanError[] = "Data <b>angka</b> tidak boleh kosong !"; } if (trim($_POST['k3']) == "") { $pesanError[] = "Data <b>angka</b> tidak boleh kosong !"; } if (trim($_POST['k4']) == "") { $pesanError[] = "Data <b>angka</b> tidak boleh kosong !"; } // $dataKode = $_POST['dataKode']; $datak1 = $_POST['k1']; $datak2 = $_POST['k2']; $datahasil_1 = $_POST['hasil_1']; $datak3 = $_POST['k3']; $datak4 = $_POST['k4']; $datahasil_2 = $_POST['hasil_2']; if (count($pesanError) >= 1) { echo "<div class='mssgBox'>"; echo "<img src='gambar/stop_gaes.png'> <br><hr>"; // Ambil Gambar dari folder gambar $noPesan = 0; foreach ($pesanError as $indeks => $pesan_tampil) { $noPesan++; echo " $noPesan. $pesan_tampil<br>"; } echo "</div> <br>"; } else { $updateSql = "UPDATE tabel_kalkulator SET k1 = '$datak1', k2 = '$datak2', hasil_1 = '$datahasil_1', k3 = '$datak3', k4 = '$datak4', hasil_2 = '$datahasil_2' WHERE kode ='" . $_POST['dataKode'] . "'"; $hasilkeputusan_update = mysqli_query($koneksidb, $updateSql) or die("Gagal query" . mysqli_error($koneksidb)); if ($hasilkeputusan_update) { echo "<meta http-equiv='refresh' content='0; url=?halaman=Utama'>"; } exit; } } } $Kode = isset($_GET['Kode']) ? $_GET['Kode'] : $_post['dataKode']; $cekSql = "SELECT * FROM tabel_kalkulator WHERE kode ='$Kode'"; $keputusan_cek = mysqli_query($koneksidb, $cekSql) or die("Gagal query" . mysqli_error($koneksidb)); $kolomData = mysqli_fetch_array($keputusan_cek); $dataKode = $kolomData['kode']; $datak1 = isset($kolomData['k1']) ? $kolomData['k1'] : $_POST['k1']; $datak2 = isset($kolomData['k2']) ? $kolomData['k2'] : $_POST['k2']; $datahasil_1 = isset($kolomData['hasil_1']) ? $kolomData['hasil_1'] : $_POST['hasil_1']; $datak3 = isset($kolomData['k3']) ? $kolomData['k3'] : $_POST['k3']; $datak4 = isset($kolomData['k4']) ? $kolomData['k4'] : $_POST['k4']; $datahasil_2 = isset($kolomData['hasil_2']) ? $kolomData['hasil_2'] : $_POST['hasil_2']; ?> <div class="row"> <!-- Membuat dan menentukan Row halaman--> <div class="col-10 p-2"> <!-- ukuran halaman yang ditampilkan --> <title> Aplikasi Kalkulator</title> <div class="modal fade" id="Ubahkalkulator" role="dialog" width="100%" aria-hidden="true"> <div class="modal-xl"> <div class="modal-content"> <div class="modal-header"> <h4>Create-Read-Update-Delete (CRUD)<br /> Update Data Kalkulator</h4> <a href="?halaman=Utama" onclick="return confirm('Apakah Anda Yakin membatalkan hal ini...?')"> <span class="badge badge-danger">Batal</span></a> <!-- <button type="reset" class="badge badge-danger" data-dismiss="modal">Batal</button> --> </div> <div class="modal-body"> <div class="table-responsive p-4"> <form action="?halaman=Utama" method="post" name="UbahData" id="UbahData"> <table class="table table-bordered table-striped"> <tbody> <tr> <td colspan="5" class="text-center"> <strong>PROJEK KALKULATOR <sup>(UBAH DATA)</sup></strong> </td> </tr> <tr> <td colspan="5" class="text-center"> <input name="dataKode" type="text" id="dataKode" class="text-center" value="<?php echo $dataKode; ?>" readonly> </td> <!-- <td class="text-center"> </td> --> </tr> <tr> <td class="text-center">No</td> <td class="text-center">Input Number</td> <td class="text-center"> </td> <td class="text-center">Input Number</td> <td class="text-center">Result</td> </tr> <tr> <td class="text-center">1</td> <td class="text-center"><input name="k1" type="number" id="k1" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak1; ?>"></td> <td class="text-center">+</td> <td class="text-center"><input name="k2" type="number" id="k2" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak2; ?>"></td> <td class="text-center"><input name="hasil_1" type="number" id="hasil_1" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datahasil_1; ?>"></td> </tr> <tr class="text-center"> <td>2</td> <td><input name="k3" type="number" id="k3" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak3; ?>"></td> <td>-</td> <td><input name="k4" type="number" id="k4" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datak4; ?>"></td> <td><input name="hasil_2" type="number" id="hasil_2" placeholder="Angka" title="Input Angka" class="text-center" value="<?php echo $datahasil_2; ?>"></td> </tr> <tr> <td class="text-center"> </td> <td colspan="4" class="text-center"><input name="SimpanData" type="submit" id="SimpanData" title="Simpan Data" value="Simpan Data"></td> </tr> </tbody> </table> </form> </div> </div> </div> </div> </div> </div> </div> </body> </html> <script> $(".modal#Ubahkalkulator").modal('show'); </script>
Keterangan :
Fungsi pada :
<a href="?halaman=Utama" onclick="return confirm('Apakah Anda Yakin membatalkan hal ini...?')"> <span class="badge badge-danger">Batal</span></a>
Mengarahkan halaman pada kontrol menu halaman (buka_halaman.php) saat di klik tombol batal dan memberikan konfirmasi dahulu.
Fungsi pada ;
<div> tag yang bersifat netral dalam artian dapat ditambahkan class didalamnya dan harus di akhir </div>
Fungsi pada ; type="number", type ini dapat disesuaikan kebutuhan pada kolom input, bisa di isi text atau hidden.
Fungsi pada ;
<script>
$(".modal#Ubahkalkulator").modal('show');
</script>
Memunculkan modal yang ada pada bootstrap adapun untuk cara memanggil yang dari class maka cukup diawali titik sedangkan jika memanggil dari name atau id maka harus diawali oleh tanda pagar (#), seperti skrip diatas.
Sekilas Tentang Bahasa Pemograman
JavaScript merupakan bahasa pemrograman web yang digunakan untuk memanipulasi element HTML dan membuat interaksi, JavaScript termasuk bahasa pemrograman web berbasis client (client side programming language),yakni JavaScript di proses di dalam web browser, sama seperti kode HTML dan CSS. Adapun untuk bahasa pemgrograman PHP tentu berbeda dalam hal ini, dikarenakan bahasa pemrograman PHP diproses di server (server side programming language).
JavaScript disebut sebagai bahasa pemrograman high-level (tingkat tinggi ) adapun kode programnya mirip dengan bahasa inggris. Dalam bahasa pemrograman high-level yang perlu diketahui bahwa semua bahasa pemrograman modern saat ini sudah termasuk ke dalam high level programming language, seperti PHP, Pascal, C, C++, dan JAVA.
JavaScript memiliki fitur dinamis, tidak bertipe dan diproses secara interpreted. JavaScript mirip dengan bahasa PHP yakni; tidak perlu menetapkan sebuah variabel harus bertipe integer, float, maupun string. Setiap variabel di dalam JavaScript bisa diisi dengan tipe data apa saja dan kapan saja sepanjang kode program (bersifat dinamis).
Tentu sangat berbeda dengan bahasa pemrograman seperti Pascal, C++ maupun JAVA yang setiap variabelnya hanya dapat diisi dengan tipe data yang sudah ditetapkan, atau dikenal sebagai Typed Programming Language.
Dalam bahasa pemrograman jenis ini, bila sebuah variabel sudah ditetapkan bertipe integer (angka bulat), maka sepanjang kode program tidak dapat diisi dengan tipe data string (teks) maupun float (angka desimal). JavaScript menggunakan standar spesifikasi ECMAScript, disebabkan yang membuat dan mengembangkan JavaScript adalah ECMA. ECMA merupakan singkatan dari European Computer Manufacturers Association, merupakan sebuah lembaga standarisasi eropa khusus komputer.
HTML dan CSS, JavaScript menjadi teknologi inti dari pembuatan konten halaman web (World Wide Web). Ketiga teknologi ini memiliki peran masing-masing. HTML digunakan untuk membuat struktur dan isi dari halaman web (content). CSS untuk memperindah maupun mempercantik tampilan website (design) dan Javascript berfungsi menangani interaksi (behavior). Bahasa populernya adalah : “HTML for content, CSS for presentation and JavaScript for behavior”.
Catatan tambahan :
<?php session_start(); include_once "koneksi/koneksidb.php"; ?> <link rel="stylesheet" href="bs/bootstrap.css"> <script src="bs/jquery.js"></script> <script src="bs/bootstrap.js"></script> <body> <div class="row"> <!-- Membuat dan menentukan Row halaman--> <div class="col-12"> <?php include "buka_halaman.php"; ?> </div> </div> </body> ?>Jika skrip dibawah ini diletakan pada app_halaman.php maka pada halaman berikutnya tidak perlu lagi dimasukan skrip dibawah ini, karena akan membaca untuk semua halaman dikarenakan sudah include “buka_halaman.php” yang mana semua halaman sudah ada didalamnya.
<link rel="stylesheet" href="bs/bootstrap.css">
<script src="bs/jquery.js"></script>
<script src="bs/bootstrap.js"></script>
Adapun dalam meletakkannya harus diatas <?php include “buka_halaman.php” ?> jika berada dibawah tentu tidak akan berfungsi.
Adapun untuk class seperti pada table jika ingin memanggil class lebih dari dua maka cukup dipisah dengan spasi saja, seperti skrip dibawah ini, memanggil 3 class sekaligus.
<table class= "table table-bordered table-striped">
table = 1 class, table-bordered = 1 class dan table-striped= 1 class, maka semua tiga class. class=”p-0” atau “p-4” untuk menentukan margin pada kiri dan kanan halamanSedangkan class=”col-8” atau “col-3” menentukan jumlah batas panjang halaman, jika col-3 sama dengan halaman dibagi 3 berarti masih ada space 3 kolom lagi karena semua berjumlah menjadi 4 kolom diambil dari akhir col-12 sebagai batas halaman.
Hasil Aktual Projek
Hasil Aktual Aplikasi dibawah ini :
Aplikasi Kalkulator App Multi
Silahkan dikembangkan dengan menambahkan tabel, namun perlu di ingat jika ingin memotong garis dibawah menggunakan rowspan
Semoga artikel ini dapat memberikan manfaat.
Silahkan untuk membaca artikel tentang "Upgrade Memory Lenovo Ideapad 12 Gb sd 20 Gb"
Input Data Tanpa Refresh Dengan Database MYSQL
Perhatikan setiap warna yang diberikan, karena kata-kata itu akan saling berhubungan atau dikenal dengan INTEGRASI jika sudah jadi maka menjadi INTEGRITED, Para penggunanya menjadi INTEGRITER (Integrity), Kata setiap warna yang diberikan selalu berhubungan dengan skrip selanjutnya
Input Data Tanpa Refresh Dengan Radio button
Kita Melanjutkan dari Input data tanpa refresh dengan database MySQL I yang sudah kita bahas sebelumnya, maka kita melanjutkan pembahasan ini walaupun tidak jauh berbeda hanya perbedaan pada pilihan kelamin, yang sebelumnya menggunakan type input, sekarang menggunakan type Radio button atau Checkbox kita pilih salah satunya saja,
Input Data Tanpa Refresh Dengan Checkbox
Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox. Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada
