kali ini saya akan menjelaskan tentang CRUD Sederhana
CRUD adalah akronim untuk Create, Read, Update, dan Delete. Operasi CRUD adalah manipulasi data dasar untuk database.
Dalam tutorial ini kita akan membuat Web PHP sederhana Berisi Tentang CRUD Asia Pasifik
* Pertama kita akan membuat database dengan mengaktifkan XAMMP. Seperti gambar di bawah ini
* Selanjutnya buka browser dan ketik : Localhost/phpmyadmin/
* lalu kita klik "Baru" Tombol di sebelah kiri dan anda tulis nama database anda. seperti contoh di bawah ini saya membuat "asiapasifik2". setelah selesai anda klik buat
* Setelah selesai selanjutnya kita akan membuat tabel. seperti contoh di bawah ini saya akan membuat tabel pendaftaran yang terdiri dari 5 kolom yaitu ID, Nama, Username, Password, dan Email. setelah selesai di atur kita klik kirim.
* Setelah itu kita akan membuat kolom-kolom yang sudah saya jelaskan. seperti gambar di bawah ini
* Penjelasan :
untuk bagian barisan "nama" adalah nama kolom yang akan kita isi. ini penting agar kita bisa gampang dan ingat dalam membuat crud. jika ada kesalahan dalam penamaan di database maupun di php yang akan kita buat nanti harus berhubungan maksudnya adalah namanya harus sama. jika ada salah ketik nama saja bisa mengakibatkan error. seperti gambar di atas yaitu ID, nama, username, password, email.
untuk bagian barisan "jenis" adalah jenis kolom. seperti ID adalah INT atau integer. adalah urutan no dari satu sampai seterusnya dan hanya bisa nomor urut saja tidak bisa di isi huruf. lalu untuk nama - email adalah jenis VARCHAR yaitu jenis kolom yang bisa di isi huruf dan angka. karena password, username, dan email tidak hanya huruf saja tetapi juga ada angka.
untuk bagian barisan "panjang/nilai" adalah jumlah karakter yang akan kita masukkan. seperti contoh di atas yaitu VARCHAR panjang/nilainya adalah 250. jadi kita bisa mengisi huruf atau angka sampai panjangnya 250 karakter.
setelah selesai mengatur kita centangkan AUTO_INCREMENT atau AI lalu akan muncul pesan seperti di bawah ini. kita cukup klik kirim.
fungsinya adalah membuat kolom ID sebagai Primary Key atau Kunci Utama agar data ID tidak bisa di ubah.
dan database pun sudah jadi.
Selanjutnya kita akan membuat halaman Web CRUD dengan PHP langkah pertama adalah.
kita membuat index.php di Data (C:)/xampp/htdocs/"namaprojectkita"/index.php dengan mengunakan Sublime Text.
lalu isikan data index.php dengan kode di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Masuk Pendaftaran Asia Pasifik</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
body{
background-image: url(pacific-ocean.jpg);
}
</style>
</head>
<body>
<form method="post" action="daftar_anggota.php">
<div class="box-form0">
<div class="title-form0">
Selamat Datang. Silahkan klik tombol masuk.
</div>
<div class="content-form0"><br>
<input type="submit" value="Masuk"><br><br>
</div>
</div>
</form>
</body>
</html>
penjelasan :
<title>Masuk Pendaftaran Asia Pasifik</title> => judul untuk bagian tab agar menampilkan sesuai yang kita tulis
<link rel="stylesheet" type="text/css" href="css/style.css"> => untuk desain web. saya akan menjelaskannya nanti setelah index.php
<style>
body{
background-image: url(pacific-ocean.jpg);
}
</style> => untuk menampilkan gambar background dan tulis nama gambar sesuai file yang kita copy di folder index.php yang sudah kita buat. pastikan anda tahu jenis gambar anda jika jpg maka tulis di belakang nama gambar .jpg dan berlaku juga untuk png dan lain-lain.
<form method="post" action="daftar_anggota.php">
</form> => untuk membuat form jika kita klik tombol jenis submit maka kita akan ke halaman web php selanjutnya.
<div class="box-form0">
<div class="title-form0">
Selamat Datang. Silahkan klik tombol masuk.
</div> => untuk membuat kotak dan judul sesuai yang kita tulis di index.php
</div>
<div class="content-form0"><br>
<input type="submit" value="Masuk"><br><br>
</div> => untuk membuat tombol submit agar kita bisa masuk ke halaman selanjutnya.
seperti inilah gambar dari index yang sudah di buat. kita cukup ketik di kolom link yaitu localhost/"namaproject"/
* {
margin: 0;
padding: 0; adalah kode untuk menentukan margin, padding dan font-family web
font-family: sans-serif;
}
.box-form0 {
width: 30%;
min-height: 400px; adalah kode untuk tampilan di dalam (kotak) web
border:1px solid #999;
margin: 10% auto;
box-shadow: 0px 10px 20px #fff;
}
.title-form0 {
width: 100%;
height: 30px;
background-color: #00b300; adalah kode untuk tampilan bagian judul web
text-align: center;
color: #fff;
line-height: 30px;
font-size: 18px;
}
.content-form0 {
max-width: 100%;
height: 500px; adalah kode untuk tampilan bagian dalam web
background-color: #eee;
padding: 1%;
}
input[type=submit]{
width: 25%;
height: 30px;
font-size: 15px;
margin-bottom: 1%;
background-color: #990099; adalah kode untuk tampilan tombol submit web
border: 1px solid;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
lalu kita akan membuat daftar_anggota.php yaitu untuk membuat halaman web php agar kita bisa mengisi Nama, Username, Password, dan Email. berikut ini adalah kodenya
<!DOCTYPE html>
<html>
<head>
<title>Halaman Pendaftaran Asia Pasifik</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
body{
background-image: url(pacific-ocean.jpg);
}
</style>
</head>
<body><br>
<input type="button" value="Keluar" onclick="window.location.href='logout.php'" /><br>
<div class="box-form">
<div class="title-form">
Pendaftaran Asia Pasifik
</div>
<div class="content-form">
<form action="proses.php" method="post">
Nama : <br>
<input type="text" name="nama" maxlength="250" required placeholder="Masukkan nama anda" /><br>
Username : <br>
<input type="text" name="username" maxlength="12" required placeholder="Masukkan username anda" /><br>
Password : <br>
<input type="password" name="password" maxlength="8" required placeholder="Masukkan password anda" /><br>
Email : <br>
<input type="text" name="email" maxlength="250" required placeholder="Masukkan email anda" /><br>
<input type="submit" value="Daftar"><br><br>
<a href="Tampilan.php">Daftar Anggota sudah Terdaftar</a>
</form>
</div>
</div>
</body>
</html>
Penjelasan :
<input type="button" value="Keluar" onclick="window.location.href='logout.php'" /><br>
kode di atas menjelaskan untuk membuat tombol button Keluar dan akan memunculkan pesan dari logout.php
Username : <br>
<input type="text" name="nama" maxlength="250" required placeholder="Masukkan nama anda" /><br>
kode di atas menjelaskan untuk membuat kolom nama jenis text, untuk nama saya ketikan "nama" persis seperti di database yang sebelumnya saya jelaskan agar bisa masuk ke database, maxlength adalah panjang karakter yang bisa kita inputkan cuma 250 karakter. required artinya memberi validation harus di isi jika tidak maka akan memunculkan pesan isikan kolom ini. placeholder adalah menampilkan tulisan yang akan kita tulis seperti yang saya ketik yaitu "masukkan nama anda".
Password : <br>
<input type="password" name="password" maxlength="8" required placeholder="Masukkan password anda" /><br>
kode di atas sama seperti yang saya jelaskan sebelumnya. tetapi yang berbeda adalah bagian type password adalah jika kita mengisi kolom password maka yang di tampilkan cuma tanda *******
untuk penjelasan email dan username sama seperti nama.
<a href="Tampilan.php">Daftar Anggota sudah Terdaftar</a>
kode di atas yaitu menampilkan link agar kita bisa ke Tampilan.php
seperti inilah tampilan daftar_anggota.php
seperti inilah kode style.css untuk bagian daftar_anggota
.box-form {
width: 30%; adalah kode untuk tampilan di dalam (kotak) web
min-height: 400px;
border:1px solid #999;
margin: 10% auto;
box-shadow: 0px 10px 20px #fff;
}
.title-form {
width: 100%;
height: 30px; adalah kode untuk tampilan bagian judul web
background-color: #00b300;
text-align: center;
color: #fff;
line-height: 30px;
font-size: 18px;
}
.content-form {
max-width: 100%;
height: 500px; adalah kode untuk tampilan bagian dalam web
background-color: #eee;
padding: 1%;
}
.content-form form input[type=text]{
width: 90%;
height: 30px;
padding-left: 1%; adalah kode untuk tampilan inputan yang akan kita masukkan
font-size: 17px;
margin-bottom: 1%;
}
.content-form form input[type=submit]{
width: 20%;
height: 30px;
font-size: 17px;
margin-bottom: 1%; adalah kode untuk tampilan tombol submit di bagian form input
background-color: #990099;
border: 1px solid;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 5%;
height: 30px;
font-size: 15px;
margin-bottom: 1%;
background-color: #000000; adalah kode untuk tampilan tombol button di web
border: 1px solid;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.content-form form input[type=submit]:hover {
background-color: #333;
} adalah kode untuk tampilan submit jika kita mengarahkan pointer ke tombol tersebut
input[type=submit]:hover {
background-color: #333;
} adalah kode untuk tampilan submit jika kita mengarahkan pointer ke tombol tersebut
input[type=button]:hover {
background-color: #333;
} adalah kode untuk tampilan submit jika kita mengarahkan pointer ke tombol tersebut
selanjutnya kita akan membuat proses.php fungsinya adalah untuk menyimpan data yang sudah kita isi ke database. seperti ini lah kodenya
<?php
$server = "localhost"; //nama seerver
$username = "root"; //nama username mysql
$password = ""; //password
$database = "asiapasifik2"; //nama database dipakai
mysql_connect($server,$username,$password) or die("Koneksi Gagal");
//koneksi ke database
mysql_select_db($database) or die("Database tidak ada");
//memilih database, menampilkan pesan jika gagal
//mengambil data dari form
$Nama = $_POST['nama'];
$Username = $_POST['username'];
$Password = $_POST['password'];
$Email = $_POST['email'];
//input ke tabel pendaftaran
$input = mysql_query("INSERT INTO pendaftaran (nama, username, password, email) VALUES ('$Nama','$Username','$Password','$Email')");
//cek sudah terinput atau belum
if ($input) //jika sukses
{
echo "Berhasil Terdaftar";
}
else
{
echo "Gagal Terdaftar";
}
?>
<a href="daftar_anggota.php">Kembali</a>
intinya dari kode di atas adalah jika kita berhasil memasukkan data dengan benar maka akan muncul pesan berhasil jika tidak maka akan muncul gagal terdaftar. faktor yang menpengaruhinya adalah bagian input name dan nama kolom di database harus sama
selanjutnya kita akan membuat config.php fungsinya adalah untuk menghubungkan web php yang kita buat terkoneksi dengan di database. seperti inilah kodenya
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "asiapasifik2";
$connection = mysqli_connect($servername, $username, $password, $dbname);
if (!$connection) {
die("Connection Failed:".mysqli_connect_error());
}
?>
selanjutnya kita akan membuat logout.php fungsinya adalah untuk kita agar bisa keluar dari halaman daftar_anggota.php jika sudah selesai menambah data. seperti inilah kodenya
<?php
session_start();
session_destroy();
echo "<script>alert('Anda sudah keluar dari halaman Pendaftaran. Silahkan Masuk Kembali'); window.location = 'index.php'</script>";
?>
seperti inilah tampilannya jika kita sudah keluar dari halaman daftar_anggota.php
selanjutnya kita akan membuat tampilan.php fungsinya adalah menampilkan data yang sudah kita inputkan dari database. seperti inilah kodenya
<?php
include 'config.php';
$query = mysqli_query($connection,"SELECT * FROM pendaftaran ORDER BY id DESC");
?>
<head>
<title>List Daftar Asia Pasifik</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
body{
background-image: url(pacific-ocean.jpg);
}
</style>
</head>
<body>
<div class="box-form1">
<div class="title-form1">List yang sudah Mendaftar di Asia Pasifik</div>
<div class="content-form1">
<form action="" method="post">
<table border="1" cellpadding="0" cellspacing="1">
<tr>
<th>ID</th>
<th>Nama</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php if(mysqli_num_rows($query)>0) { ?>
<?php
$no = 1;
while ($data = mysqli_fetch_array($query)) {
?>
<tr>
<td><?php echo $no ?></td>
<td><?php echo $data['nama'];?></td>
<td><?php echo $data['username'];?></td>
<td><?php echo $data['password'];?></td>
<td><?php echo $data['email'];?></td>
<td>
<a href="form-edit.php?id=<?php echo $data['id']; ?>"> Edit </a> |
<a href="hapus.php?id=<?php echo $data['id']; ?>" onClick="return confirm('Anda yakin ingin menghapus ini?');"> Hapus </a>
</td>
</tr>
<?php $no++; } ?>
<?php } ?>
<a href="daftar_anggota.php">Kembali</a><br><br>
</table>
</form>
</div>
</div>
</body>
intinya adalah kita bisa melihat, mengedit, dan menghapus data. seperti inilah tampilannya
dan seperti inilah kode style.css untuk tampilan.php
.box-form1 {
width: 74%;
min-height: 400px;
border:1px solid #999;
margin: 10% auto;
box-shadow: 0px 10px 20px #fff;
}
.title-form1 {
width: 100%;
height: 30px;
background-color: #00b300;
text-align: center;
color: #fff;
line-height: 30px;
font-size: 18px;
}
.content-form1 {
max-width: 100%;
height: 500px;
background-color: #eee;
padding: 1%;
}
selanjutnya kita akan membuat form-edit.php fungsinya adalah untuk membuat form edit dari data yang sudah kita buat. seperti inilah kodenya
<?php
include_once("config.php");
$id=$_GET['id'];
$query="SELECT * FROM pendaftaran WHERE id=" . $id;
$hasil=mysqli_query($connection, $query);
?>
<head>
<title>List Daftar Asia Pasifik</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
body{
background-image: url(pacific-ocean.jpg);
}
</style>
</head>
<div class="box-form2">
<div class="title-form2">Ubah Data</div>
<div class="content-form2">
<form method="post" action="update.php">
<?php while ($data=mysqli_fetch_array($hasil)) { ?>
<table border="0" cellpadding="0" cellspacing="1"><br>
<tr>
<td>Nama : </td>
<td> <input type="text" name="nama" maxlength="250" required placeholder="Masukkan kembali nama anda" value="<?php echo$data['nama'] ?>"></td>
</tr>
<tr>
<td>Username : </td>
<td> <input type="text" name="username" maxlength="10" required placeholder="Masukkan kembali username anda" value="<?php echo$data['username']?>"></td>
</tr>
<tr>
<td>Password : </td>
<td> <input type="password" name="password" maxlength="8" required placeholder="Masukkan kembali password anda" value="<?php echo$data['password']?>" ></td>
</tr>
<tr>
<td>Email : </td>
<td> <input type="text" name="email" maxlength="250" required placeholder="Masukkan kembali email anda" value="<?php echo$data['email']?>" ></td>
</tr>
<tr>
<td> </td>
<input type="hidden" name="id" value="<?php echo$data['id']?>">
<td><input type="submit" name="UbahData" value="Ubah Data" onClick="return confirm('Anda yakin ingin mengubah data ini?');"></td>
</tr>
</table>
<?php } ?>
<a href="Tampilan.php">Kembali</a>
</form>
</div>
intinya adalah disini kita dapat mengubah data yang sudah kita masukkan di database
dan inilah kode style.css untuk form-edit.php
.box-form2 {
width: 40%;
min-height: 400px;
border:1px solid #999;
margin: 10% auto;
box-shadow: 0px 10px 20px #fff;
}
.title-form2 {
width: 100%;
height: 30px;
background-color: #00b300;
text-align: center;
color: #fff;
line-height: 30px;
font-size: 18px;
}
.content-form2 {
max-width: 100%;
height: 500px;
background-color: #eee;
padding: 1%;
}
seperti inilah tampilan form-edit.php
selanjutnya kita akan membuat update.php fungsinya yaitu untuk menyimpan data yang sudah kita ubah di form-edit.php agar tersimpan ke database. seperti inilah kodenya
<?php
include_once("config.php");
$id=$_POST['id'];
$nama=$_POST['nama'];
$username=$_POST['username'];
$password=$_POST['password'];
$email=$_POST['email'];
$query="UPDATE pendaftaran SET nama='$nama', username='$username', password='$password', email='$email' WHERE id=$id";
$hasil=mysqli_query($connection, $query);
if ($hasil) {
header('Location:Tampilan.php');
} else {
echo "Update Data Gagal";
}
?>
intinya adalah kita bisa menyimpan data yang sudah kita ubah ke database.
Selanjutnya adalah kita akan membuat hapus.php fungsinya adalah yaitu agar kita bisa menghapus data yang sudah tersimpan di database. seperti inilah kodenya
<?php
include_once("config.php");
$id = $_GET['id'];
$query="DELETE FROM pendaftaran WHERE id = $id";
$hasil=mysqli_query($connection, $query);
if ($hasil) {
header('Location:Tampilan.php');
}else{
echo "Hapus data Gagal";
}
?>
intinya adalah kita bisa menghapus data yang sudah di simpan di database langsung dari daftar_anggota.php dengan cara klik link hapus.
ini adalah linknya downloadnya jika anda ingin mencoba CRUD sederhana buatan saya.
https://github.com/DwikyValentino/CRUD-sederhana-Web-Programming-2.git
* setelah anda download selanjutnya ekstra dan copy tersebut di xampp/htdocs yang sudah saya jelaskan sebelumnya.
* lalu anda buat database dan namai database dengan nama "asiapasifik2"
* lalu anda inport asiapasifik2.sql ke database tersebut
Selesai. Terima kasih sudah membaca Tutorial ini
Nama Saya Dwiky Valentino (17090053) Kelas 5B mahasiswa dari Politeknik HarBer Tegal
Wassallamualaikum wr. wb.
0 komentar:
Posting Komentar