Pertama yang perlu disiapkan adalah software. Ada tiga software yang perlu
diinstal dan disiapkan berikut.
- XAMPP berfungsi sebagai web server untuk menjalankan web yang kita buat didalamnya sudah teradapat server PHP dan Database MySql.
- Visual Studio Code berfungsi sebagai code editor pada saat programming.
- Google Chrome berfungsi sebagai web browser untuk menampilkan hasil web yang kita buat.
Selanjutnya kelangkah langkah pembuatan berikut.
-
Langkah pertama menyalakan web server dan database servernya dengan
cara klik start sampai module apache dan mysql berubah menjadi berwarna
hijau.
- Selanjutnya membuat database. Buku web browser chrome ketikan "localhost/phpmyadmin" di url untuk membuka phpmyadmin, lalu buat database dengan nama "db_php_mysql".
-
selanjutnya buat table dengan nama "mahasiswa" dengan struktur tabel
berkut.
-
Buat satu table lagi bernama "admin" sebagai akses login ke aplikasi web nantinya. Dengan struktur folder seperti berikut.
-
Membuat struktur folder. Jika kalian install xamppnya di C: maka pergi
ke directori C:\xampp\htdocs lalu buat folder dengan nama terserah
kalian disini saya contohkan dengan memberi nama "crud_php_mysql" lalu
didalam folder tersebut buat struktur folder seperti berikut.
-
didalam struktur folder tersebut terdapat beberapa folder termasuk assets sebagai tempat file tampilan seperti css dan javascript. folder config untuk tempat konfigurasi database dan lain lain. folser pages sebagai tempat halaman dan proses.
-
didalam folder crud terdapat file index.php sebagai halaman yang pertama ditampilkan difile tersebut kerikan code berikut.
<?php @session_start(); require "config/conn.php"; if (@$_SESSION['admin'] || @$_SESSION['user']) { ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="assets/style.css"> </head> <body> <div class="container"> <div class="header"> Crud </div> <div class="content"> <?php if (@$_SESSION['admin']) { $user_terlogin = @$_SESSION['admin']; } else if (@$_SESSION['user']) { $user_terlogin = @$_SESSION['user']; } $sql_user = mysqli_query($conn, "SELECT * FROM admin where id = '$user_terlogin'") or die(mysqli_error($conn)); $data_user = mysqli_fetch_array($sql_user); echo "Selamat datang : " . $data_user['user'] . " <a href='config/logout.php'>Logout</a></br></br>"; ?> <?php $page = @$_GET['page']; if ($page == '' || $page == 'home') { require "pages/tampil.php"; } else if ($page == 'tambah') { require "pages/tambah.php"; } else if ($page == 'ubah') { require "pages/ubah.php"; } else if ($page == 'hapus') { require "pages/hapus.php"; } ?> </div> <div class="footer"> @copyright2020 </div> </div> </body> </html> <?php } else { header("location: login.php"); } ?>
-
Juga file login.php sebagai halaman login ke website kita. ketikan code berikut.
<?php @session_start(); include "config/conn.php"; if (@$_SESSION['admin'] || @$_SESSION['user']) { header("location:index.php"); } else { ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="assets/style.css"> </head> <body> <div class="container"> <div class="header"> Login </div> <div class="content"> <form action="" method="post"> <table class="tbl"> <tr> <td>Username</td> <td>:</td> <td><input type="text" name="user" id="user" required></td> </tr> <tr> <td>Password</td> <td>:</td> <td><input type="password" name="pass" id="pass" required></td> </tr> <tr> <td colspan="2"></td> <td> <input type="submit" name="login" value="Login" id="login" class="btn-primary"> </td> </tr> </table> <?php $user = trim(mysqli_real_escape_string($conn, @$_POST['user'])); $pass = trim(md5(mysqli_real_escape_string($conn, @$_POST['user']))); $login = @$_POST['login']; if (isset($login)) { if ($user == "" || $pass == "") { ?> <script type="text/javascript"> alert("Username atau password tidak boleh kosong"); </script><?php } else { $queri = "SELECT * FROM admin where user = '$user' and pass = '$pass'"; $sql = mysqli_query($conn, $queri) or die(mysqli_error($conn)); $data = mysqli_fetch_array($sql); $cek = mysqli_num_rows($sql); if ($cek >= 1) { if ($data['role'] == "admin") { @$_SESSION['admin'] = $data['id']; header("location: index.php"); } else if ($data['role'] == "user") { @$_SESSION['user'] = $data['id']; header("location: index.php"); } } else { echo "login gagal"; } } } ?> </form> </div> <div class="footer"> @copyright2020 </div> </div> </body> </html> <?php } ?>
-
Selanjutnya didalam folder assets terdapat file style.css yang berfungsi sebagai memperindah tampilan web. Ketikan code css berikut.
* body{ font-family: Arial, Helvetica, sans-serif; } .container{ background-color: aliceblue; max-width: 900px; margin: auto; } .header{ background-color: cornflowerblue; padding: 20px; font-weight: bold; text-align: center; } .content{ padding: 20px; background-color: whitesmoke; } a{ text-decoration: none; color: black; } .btn-primary{ background-color: blue; color: white; padding: 5px; border-radius: 5px; border: 0px; } .btn-warning{ background-color: orange; color: black; padding: 5px; border-radius: 5px; } .btn-danger{ background-color: red; color: white; padding: 5px; border-radius: 5px; } .footer{ background-color: cornflowerblue; padding: 20px; text-align: center; } table { width: 100%; border-collapse: collapse; } td{ padding: 10px; } th{ background-color: teal; }
-
Selanjutnya di folder config terdapat file database.php yang dimana file ini berfungsi sebagai koneksi kedatabase. ketikan isi file tersebut dengan code berikut.
<?php $conn = mysqli_connect('localhost','root','','db_php_mysql'); ?> -
Lalu juga terdapat file logout.php yang berfungsi untuk proses logout. ketikan code berikut.
<?php @session_start(); session_destroy(); header("location: /crud_php_mysql/login.php"); ?> -
Selanjutnya di folder pages yang didalamnya terdapat file tampil.php yang berfungsi sebagai menampilkan data dari database. ketikan code berikut di file tampil.php
<a href="?page=tambah" class="btn-primary">Tambah data</a><br><br> <form action="" method="post"> <table class="tbl"> <tr align="right"> <td><input type="text" name="cari" id="cari" placeholder="Cari Nama" required><input type="submit" name="btn" id="btn"></td> </tr> </table> </form> <table border="1"> <thead> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> <th>Opsi</th> </tr> </thead> <tbody> <?php $no=1; $cari = @$_POST['cari']; $btn = @$_POST['btn']; if(isset($btn)){ $sql = mysqli_query($conn, "SELECT * from mahasiswa where nama like '%$cari%'"); } else { $sql = mysqli_query($conn, "SELECT * from mahasiswa"); } while ($data = mysqli_fetch_array($sql)) { ?> <tr> <td align="center"><?php echo $no++; ?></td> <td><?php echo $data['nama']; ?></td> <td><?php echo $data['alm']; ?></td> <td align="center" style="width:100px;"> <a href="?page=ubah&id=<?php echo $data['id']; ?>" class="btn-warning">Edit</a> <a onclick="return confirm('Anda yakin ingin Menghapus data ini ?')" href="?page=hapus&id=<?php echo $data['id']; ?>" class="btn-danger">Hapus</a> </td> </tr> <?php } ?> </tbody> </table>
-
Lalu terdapat juga file tambah.php yang berfungsi sebagai fitur tambah data. Kerilan code berikut di file tambah.php
<form action="" method="post"> <table class="tbl"> <tr> <td>Nama</td> <td>:</td> <td><input type="text" name="nama" id="nama" required></td> </tr> <tr> <td>Alamat</td> <td>:</td> <td><input type="text" name="alm" id="alm" required></td> </tr> <tr> <td colspan="2"></td> <td> <input type="submit" name="simpan" value="Simpan" id="simpan" class="btn-primary"> </td> </tr> </table> </form> <?php $nama = @$_POST['nama']; $alm = @$_POST['alm']; $simpan = @$_POST['simpan']; if(isset($simpan)){ $sql = mysqli_query($conn, "INSERT into mahasiswa values ('','$nama','$alm')"); ?> <script type="text/javascript"> window.location.href = "?page=home"; </script> <?php if($sql === false){ ?> <script> alert("gagal simpan data!"); </script> <?php } } ?>
-
Lalu ada juga file ubah.php yang berfungsi sebagai fitur mengedit data. ketikan code berikut.
<?php $id = @$_GET['id']; $sql_select = mysqli_query($conn, "SELECT * from mahasiswa where id = '$id'"); $data_sql_select = mysqli_fetch_array($sql_select); ?> <form action="" method="post"> <table class="tbl"> <tr> <td>Nama</td> <td>:</td> <td><input type="text" name="nama" id="nama" required value="<?php echo $data_sql_select['nama']; ?>"></td> </tr> <tr> <td>Alamat</td> <td>:</td> <td><input type="text" name="alm" id="alm" required value="<?php echo $data_sql_select['alm']; ?>"></td> </tr> <tr> <td colspan="2"></td> <td> <input type="submit" name="ubah" value="Simpan" id="ubah" class="btn-primary"> </td> </tr> </table> </form> <?php $nama = @$_POST['nama']; $alm = @$_POST['alm']; $ubah = @$_POST['ubah']; if(isset($ubah)){ $sql = mysqli_query($conn, "UPDATE mahasiswa set nama = '$nama', alm = '$alm' where id = '$id'"); ?> <script type="text/javascript"> window.location.href = "?page=home"; </script> <?php if($sql === false){ ?> <script> alert("gagal simpan data!"); </script> <?php } } ?>
-
Lalu yang terakhir file hapus.php yang memiliki fungsi sebgai menghapus data data didatabase. ketikan code berikut.
<?php $id = @$_GET['id']; $sql = mysqli_query($conn, "delete from mahasiswa where id = '$id'"); ?> <script type="text/javascript"> window.location.href = "?page=home"; </script> <?php if ($sql === false) { ?> <script> alert("gagal hapus data!"); </script> <?php } ?>
Dari langkah diatas kita telah membuat crud dan login sederhana juka
kalian menginginkan file source codenya, klik link dibawah ini.
Jika ada yang ditanyakan silahkan komentar dibawah ini. Terimakasih
0 Komentar