.png)
1. download applikasi xampp di pc/laptop kalian :
klik “Start” pada menu Action untuk Module “Apache” dan “MySQL” sehingga terlihat kedua module tersebut berubah warna menjadi hijau dan pada jendela log dibawahnya terlihat program sedang berjalan, dan biarkan ini terus berjalan sampai pembuatan web database kita selesai.
2. Kemudian bukalah File browser (chrome atau IE) kemudian ketikkan “http://localhost/phpmyadmin”
kemudian klik “New” pada menu sebelah kiri, munculah “Create Database”, masukkan nama database yang akan dibuat, disini saya membuat nama “paiq” kemudian biarkan isian disampingnya “Collation” dan klik “Create” setelah itu muncul gambar seperti berikut,
4. membuat field seperti gambar di bawah
.png)
kemudian klik “Go”, kemudian buatlah field seperti gambar berikut, hanya pada kolom “id” kemudian di centang pada “A_I” atau disebut Auto Increment, nomor akan bertambah jika terdapat record baru, ketika di klik “A_I” ini akan muncul jendela kecil menanyakan tentang “Primary” key, klik OK saja.
5. menu insert
.png)
kemudian klik “Save” dan setelah itu terlihat secara keseluruhan tabel perpustakaan yang telah kita susun, untuk mencoba mengisinya, maka pada menu klik lah “Insert”, kemudian klik “Go” dan lihatlah hasilnya dengan klik pada menu “Browse”. Sampai tahap ini berarti database perpustakaan sudah siap.
Tahap koneksi PHP-MySQL
1. download visual studio code
.png)
setelah selesai download kita pilih menu file dan membuat file baru seperti gambar di atas.
Bukalah Notepad, dan copy paste kode berikut
<?php
$kon = mysqli_connect('localhost','root','');
$link = mysqli_select_db($kon,"paiq") or die(mysqli_error());
?>
setelah itu carilah folder “xampp”, kemudian cari folder “htdocs” setelah itu buatlah folder baru dengan nama “koleksiku”, sehingga (dalam laptop saya) terbentuk seperti ini “d:/xampp/htdocs/koleksiku”
simpanlah kode diatas dengan nama “db_connect.php” (simpan dalam php bukan dalam txt) nanti akan hasilnya seperti berikut :
kemudian buka kembali Notepad dan copylah kode berikut,
<?php
include "db_connect.php";
$query=mysqli_query ($kon, "SELECT * FROM tbpaiq")or die (mysqli_error());
$jumlah = mysqli_num_rows($query);
echo "<html>";
echo "<head>";
echo "<link href='style.css' type='text/css' rel='stylesheet'>";
echo "</head>";
echo "<title>Perpustakaan Kecil</title>";
echo "<body>";
echo "<font color='darkmagenta' face='Arial' size=3><b><br>Koleksi Bukuku</b></font><br><br>";
echo "<a href='add.php' style=\"text-decoration: none\"><font face='tahoma' size='1'>Masukkan buku baru</font></a><br>";
echo "<br><table border=\"0\" cellpadding=\"1\" cellspacing=\"1\" bordercolor=\"blue\" bgcolor=\"white\">
<tr bgcolor='blue' height=\"30\"><font color='white'>
<th align='center'><font color='white' face='Arial' size=2>No</font></th>
<th align='center'><font color='white' face='Arial' size=2>Judul</font></th>
<th align='center'><font color='white' face='Arial' size=2>Penulis</font></th>
<th align='center'><font color='yellow' face='Arial' size=2>Ubah?</font></th>
</tr>";
$j=0;
while ($row=mysqli_fetch_array($query)) {
echo "<tr><td align='left' bgcolor='#657FFF'>";
echo "<font face='Arial' size=1>";
echo $j+1;
echo"</font>";
echo"</td>";
echo "<td align='left' bgcolor='#E8D3DF'>";
echo "<font face='Arial' size=1>";
echo $row["judul"];
echo"</font>";
echo"</td>";
echo "<td align='left' bgcolor='#E8D3DF'>";
echo "<font face='Arial' size=1>";
echo $row["penulis"];
echo"</font>";
echo"</td>";
echo"<td align='left' bgcolor='#E8D3DF'>";
echo "<a href='delete.php?id=".$row['id']."' style=\"text-decoration: none\" title=\"Hapus\"><font face='tahoma' size='1'>Hapus</font></a>
<a href='edit.php?id=".$row['id']."' style=\"text-decoration: none\" title=\"Edit\"><font face='tahoma' size='1'>Edit</font></a>"; $j++; }
echo"</table>";
echo "</body>";
echo "</html>";
?>simpan kode diatas dengan nama “index.php” dalam folder d:/xampp/htdocs/koleksiku. nanti akan jadi seperti ini :
kemudian kembali copy lah kode berikut
body,html {
margin: 0 5px;
font-family: Verdana,sans-serif;
font-size:12px
}
h1 {
font-size:1.4em;
color: #008000;
}
a {
color: #008000;
}
th { text-align: left;
}
td, th {
padding-right: 5px;
}
form dt {
width: 100px;
display: block;
float: left;
clear: left;
}
form dd {
margin-left: 0;
float: left;
}
form #submitbutton {
margin-left: 100px;
}
simpanlah dengan nama “style.css” di direktori d:/xampp/htdocs/koleksiku. hasilnya :
kemudian copy kembali perintah berikut,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tambah buku baru</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<form action="insert_koleksi.php" method="POST">
<font face="Tahoma" color="green" size="1"><b><br>Masukkan buku baru</b></font>
<table align="left">
<tr>
<td><font face="Tahoma" color="black" size="2">judul</font></td>
<td>:</td>
<td><input type="text" name="judul" size="30"></td>
</tr>
<tr>
<td><font face="Tahoma" color="black" size="2">penulis</font></td>
<td>:</td>
<td><input type="text" name="penulis" size="30"></td>
</tr>
<tr>
<td></td><td></td>
<td><input type="submit" value="Add">
<font face="Tahoma" color="green" size="2">
<a href="index.php" style="text-decoration:none">back</font></a>
</td>
</tr>
</table>
</form>
</body>
</html>
kemudian simpanlah dengan nama “add.php” dalam direktori d:/xampp/htdocs/koleksiku. hasilnya :Kembali copy perintah berikut
<?php
include "db_connect.php";
$judul = $_POST['judul'];
$penulis = $_POST['penulis'];
$query=mysqli_query($kon, "INSERT INTO tbpaiq(judul, penulis)
VALUES ('$judul', '$penulis')")or die (mysqli_error());
if($query) {
?>
<script language="JavaScript">
document.location='index.php'</script>
<?php
}
?>kemudian simpanlah dengan nama “insert_koleksi.php” juga simpan pada direktori d:/xampp/htdocs/koleksiku. hasilnya
lihat kembali kode berikut, copylah
<?php
include "db_connect.php";
$id = $_GET['id'];
$query = "DELETE FROM tbpaiq WHERE id = $id";
mysqli_query($kon, $query);
?>
<script language="JavaScript">
document.location='index.php'</script>
<?php
?>kemudian simpan dengan nama “delete.php” dalam d:/xampp/htdocs/koleksiku. ini hasilnya :
setelah itu copy lah kode berikut,
<?php
include "db_connect.php";
$id = $_GET['id'];
$query=mysqli_query($kon, "SELECT * FROM tbpaiq WHERE id='$id'");
while ($row=mysqli_fetch_array($query)){
$judul = $row['judul'];
$penulis = $row['penulis'];
echo "<html>";
echo "<body>";
echo "<font face='tahoma' color='green' size=4><b>Perbaiki koleksi</b></font>";
echo "<table align='left'>";
echo "<form method=\"post\" action=\"update.php?id=$id\" enctype='multipart/form-data'>";
echo "<br>";
echo "<tr><td><font face='Tahoma' color='black' size=2>judul </font></td><td>:</td><td><input type='text' name='judul' value='$judul' size='30'>
</td></tr>";
echo "<tr><td><font face='Tahoma' color='black' size=2>penulis</font></td><td>:</td><td><input type='text' name='penulis' value='$penulis' size='30'>
</td></tr>";
echo "<tr><td></td><td></td><td><font size='2'><input type='submit' name='submit' value='Update'/></font></td></tr>";
echo "</table></form></body></html>";
}
?>simpanlah dengan nama “edit.php” pada d:/xampp/htdocs/koleksiku. ini hasilnya :
berikut kode yang akan di copy lagi,
<?php
include "db_connect.php";
$id = $_GET['id'];
$judul = $_POST['judul'];
$penulis = $_POST['penulis'];
$query=mysqli_query ($kon, "UPDATE tbpaiq SET judul='$judul',
penulis='$penulis' WHERE id='$id'")or die (mysqli_error());
if($query) {
?>
<script language="JavaScript">
document.location='index.php'</script>
<?php
}
?>kemudian simpanlah dengan nama “update.php” dalam d:/xampp/htdocs/koleksiku. ini hasilnya :
and.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
