Scribd
Unggah
59 tayangan17 halaman

Aplikasi CRUD HTML

Dokumen tersebut menjelaskan langkah-langkah pembuatan sistem pendaftaran siswa baru menggunakan PHP dan MySQL database. Langkah-langkahnya meliputi pembuatan database dan tabel, penambahan dan tampilan data, serta pembuatan halaman-halaman PHP untuk memproses pendaftaran dan mengelola data siswa.

Diunggah oleh

Okta Prty
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
59 tayangan17 halaman

Aplikasi CRUD HTML

Dokumen tersebut menjelaskan langkah-langkah pembuatan sistem pendaftaran siswa baru menggunakan PHP dan MySQL database. Langkah-langkahnya meliputi pembuatan database dan tabel, penambahan dan tampilan data, serta pembuatan halaman-halaman PHP untuk memproses pendaftaran dan mengelola data siswa.

Diunggah oleh

Okta Prty
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 17

1. Pertama, mari kita membuat database bernama pendaftaran_siswa.

2. Setelah itu, buatlah tabel di dalam database tersbut dengan nama calon_siswa.
3. Berikan tipe data kolomnya seperti ini.

CREATE TABLE `pendaftaran_siswa`.`calon_siswa` (


`id` INT NOT NULL AUTO_INCREMENT ,
`nama` VARCHAR(64) NOT NULL ,
`alamat` VARCHAR(255) NOT NULL ,
`jenis_kelamin` VARCHAR(16) NOT NULL ,
`agama` VARCHAR(16) NOT NULL ,
`sekolah_asal` VARCHAR(64) NOT NULL ,
PRIMARY KEY (`id`)
) ENGINE = InnoDB;

4. Kemudian kita coba isi dengan sebuah data, klik Insert.

INSERT INTO `calon_siswa` (`id`, `nama`, `alamat`, `jenis_kelamin`, `agama`,


`sekolah_asal`) VALUES (NULL, 'Lia', 'Jl. Mangga No. 3, Mataram', 'perempuan',
'islam', 'SMPN 32 Ampenan');

5. Setelah itu buat proyek/direktori baru di direktori htdocs atau /var/www/html.


6. Buat file-file PHP yang diperlukan
a. Config.php
b. Form-daftar.php
c. Form-edit.php
d. Hapus.php
e. Indeks.php
f. List-siswa.php
g. Proses-edit.php
h. Proses-pendaftaran.php
Keterangan:
a. Config.php  untuk menyimpan konfigurasi database
b. Indeks.php  halaman utama
c. List-siswa.php  halaman untuk menampilkan data siswa
d. Form-daftar.php  halaman formulir pendaftaran
e. Proses-pendaftaran.php  skrip yang memproses pendaftaran
f. Form-edit.php  form untuk edit data siswa
g. Proses-edit.php  skrip untuk memproses edit / update
h. Hapus.php  skrip untuk menghapus data dari database
7. Membuat koneksi ke database MySql
a. Buka file config.php, silahkan isi dengan kode berikut:

<?php
$server = "localhost";
$user = "root";
$password = "kopi";
$nama_database = "pendaftaran_siswa";
$db = mysqli_connect($server, $user, $password, $nama_database);
if( !$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
?>

Untuk menghubungkan PHP dengan MySQL, kita menggunakan


fungsi mysqli_connect() dengan parameter alamat server, user, password, dan nama
database.
Silahkan isi password sesuai dengan yang dibuat di servernya. Jika tidak menggunakan
passsword, maka dikosongkan saja.

$password = "";

Jika koneksi gagal, variabel $db akan bernilai FALSE.


Karena itu, kita bisa mengeceknya dengan ekspresi IF.

if( !$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}

Berikut ini tampilan saat koneksinya gagal, karena password-nya salah.

8. Membuat halaman index


9. Sekarang, silahkan isi file index.php dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
</head>
<body>
<header>
<h3>Pendaftaran Siswa Baru</h3>
<h1>SMK Coding</h1>
</header>
<h4>Menu</h4>
<nav>
<ul>
<li><a href="form-daftar.php">Daftar Baru</a></li>
<li><a href="list-siswa.php">Pendaftar</a></li>
</ul>
</nav>
</body>
</html>

10. Cara menampilkan data tabel MySql


a. Silahkan buka list-siswa.php dan isi dengan kode berikut:

<?php include("config.php"); ?>


<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
</head>
<body>
<header>
<h3>Siswa yang sudah mendaftar</h3>
</header>
<nav>
<a href="form-daftar.php">[+] Tambah Baru</a>
</nav>
<br>
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Sekolah Asal</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
echo "<td>".$siswa['id']."</td>";
echo "<td>".$siswa['nama']."</td>";
echo "<td>".$siswa['alamat']."</td>";
echo "<td>".$siswa['jenis_kelamin']."</td>";
echo "<td>".$siswa['agama']."</td>";
echo "<td>".$siswa['sekolah_asal']."</td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p>Total: <?php echo mysqli_num_rows($query) ?></p>
</body>
</html>

b. Pertama kita membutuhkan koneksi ke database, maka kita harus mengimpor


file config.php agar variabel $db dapat dibaca.

<?php include("config.php"); ?>

c. Setelah itu, kita melakukan query untuk mengambil data siswa pada tabel calon_siswa.

$sql = "SELECT * FROM calon_siswa";


$query = mysqli_query($db, $sql);

d. Hasil dari query tersetbut, kemudian kita ubah menjadi array dengan
fungsi mysqli_fetch_array() dan hasilnya disimpan dalam variabel $siswa.

$siswa = mysqli_fetch_array($query)

e. Perulangan while akan mengulang selama masih ada isi dalam tabel. Kemudain,
selama perulangan…kita tampilkan datanya.
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";

echo "<td>".$siswa['id']."</td>";
echo "<td>".$siswa['nama']."</td>";
echo "<td>".$siswa['alamat']."</td>";
echo "<td>".$siswa['jenis_kelamin']."</td>";
echo "<td>".$siswa['agama']."</td>";
echo "<td>".$siswa['sekolah_asal']."</td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
echo "</td>";
echo "</tr>";
}

f. Perhatikan array $siswa, indeksnya sesuai dengan nama kolom pada database dan
bersifat case sensitive.
g. Terakhir, kita menampilkan total data yang ada di dalam tabel dengan
fungsi mysqli_num_rows().

echo mysqli_num_rows($query);

11. Cara menambahkan data ke tabel MySql


a. Ada dua file yang kita butuhkan untuk menambahkan data ke MySQL.
1) Form-daftar.php  halaman untuk form input
2) Proses-pendaftaran.php skrip untuk memproses data yang di inputkan
b. Silahkan buka file form-daftar.php dan isi dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>
</head>

<body>
<header>
<h3>Formulir Pendaftaran Siswa Baru</h3>
</header>
<form action="proses-pendaftaran.php" method="POST">
<fieldset>
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="nama lengkap" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat"></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<label><input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-
laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan">
Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<select name="agama">
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Atheis</option>
</select>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="nama sekolah" />
</p>
<p>
<input type="submit" value="Daftar" name="daftar" />
</p>
</fieldset>
</form>
</body>
</html>

c. Perhatikan pada tag pembuka <form>, di sana kita menggunakan


atributaction dan method.

<form action="proses-pendaftaran.php" method="POST">


...

d. Atribut action digunakan untuk menentukan skrip mana yang akan memproses data
inputan. Sedangkan atribut method untuk menentukan metode pengiriman datanya.
e. Perhatikan juga pada input-nya, disana ada atribut name. Atribut ini untuk
menentukan kunci indeks dari array $_POST dan $_GET.
f. Selanjutnya isi file proses-pendaftaran.php dengan kode berikut

<?php
include("config.php");
// cek apakah tombol daftar sudah diklik atau blum?
if(isset($_POST['daftar'])){
// ambil data dari formulir
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
// buat query
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama,
sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
$query = mysqli_query($db, $sql);
// apakah query simpan berhasil?
if( $query ) {
// kalau berhasil alihkan ke halaman index.php dengan status=sukses
header('Location: index.php?status=sukses');
} else {
// kalau gagal alihkan ke halaman indek.php dengan status=gagal
header('Location: index.php?status=gagal');
}
} else {
die("Akses dilarang...");
}
?>

g. Pertama kita ambil data yang dikirim dari formulir, semuanya tersimpan pada
variabel $_POST. Karena tadi kita menggunakan method POST pada form.
h. Setelah itu, kita buat query penyimpanan. Lalu melakukan pengecekan, apakah
query-nya berhasil atau gagal.
i. Untuk menampilkan pesan berhasil dan gagal pada halaman index.php, silahkan
tambahkan kode berikut di bawah tag <nav> pada file index.php:

<?php if(isset($_GET['status'])): ?>


<p>
<?php
if($_GET['status'] == 'sukses'){
echo "Pendaftaran siswa baru berhasil!";
} else {
echo "Pendaftaran gagal!";
}
?>
</p>
<?php endif; ?>

12. Menghapus data dari tabel MySql


a. Kita membutuhkan id untuk menentukan data yang akan dihapus. Karena itu, kita
mengirimkan id melalui query string.
Contoh:

http://localhost/pendaftaran-siswa/hapus.php?id=1

b. Query string-nya adalah ?id=1. Query string akan tersimpan dalam variabel $_GET.
c. Untuk lebih jelasnya, silahkan buka file hapus.php dan isi dengan kode berikut:

<?php
include("config.php");
if( isset($_GET['id']) ){
// ambil id dari query string
$id = $_GET['id'];
// buat query hapus
$sql = "DELETE FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query hapus berhasil?
if( $query ){
header('Location: list-siswa.php');
} else {
die("gagal menghapus...");
}
} else {
die("akses dilarang...");
}
?>

d. Sekarang coba klik link hapus, maka datanya akan langsung terhapus.
e. Sebenarnya cara ini kurang aman, karena kita tidak meberikan dialog konfirmasi
kepada user. Misalnya seperti mananyakan ‘Apakah yakin akan menghapus?’

13. Update data di tabel MySql


a. Pertama kita ambil id data yang akan di-edit. Setelah itu kita melakukan query
untuk mengambil data dari database dan menampilkannya ke dalam form.
b. Setelah di-edit, selanjutnya melakukan query update untuk menyimpan perubahan.
c. Untuk lebih jelasnya, silahkan buka file form-edit.php dan isi dengan kode berikut:

<?php
include("config.php");
// kalau tidak ada id di query string
if( !isset($_GET['id']) ){
header('Location: list-siswa.php');
}
//ambil id dari query string
$id = $_GET['id'];
// buat query untuk ambil data dari database
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
// jika data yang di-edit tidak ditemukan
if( mysqli_num_rows($query) < 1 ){
die("data tidak ditemukan...");
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Formulir Edit Siswa | SMK Coding</title>
</head>
<body>
<header>
<h3>Formulir Edit Siswa</h3>
</header>
<form action="proses-edit.php" method="POST">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="nama lengkap" value="<?php
echo $siswa['nama'] ?>" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat"><?php echo $siswa['alamat'] ?></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" <?php
echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" <?php
echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="agama">
<option <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
<option <?php echo ($agama == 'Kristen') ? "selected": "" ?
>>Kristen</option>
<option <?php echo ($agama == 'Hindu') ? "selected": "" ?
>>Hindu</option>
<option <?php echo ($agama == 'Budha') ? "selected": "" ?
>>Budha</option>
<option <?php echo ($agama == 'Atheis') ? "selected": "" ?
>>Atheis</option>
</select>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="nama sekolah"
value="<?php echo $siswa['sekolah_asal'] ?>" />
</p>
<p>
<input type="submit" value="Simpan" name="simpan" />
</p>
</fieldset>
</form>
</body>
</html>

d. Ada beberapa hal yang perlu diperhatikan dalam kode tersebut.


1) Pertama kita mengubah data dari hasil query menjadi array dengan
menggunakan fungsi mysqli_fetch_assoc().
Kenapa menggunakan fungsi tersebut?
2) Karena data yang akan kita ambil adalah satu baris dan agar indeks array-nya
menggunakan nama kolom.
Contoh:

Array
(
[id] => 1
[nama] => Lia
[alamat] => Jl. Mangga No. 3, Mataram
[jenis_kelamin] => perempuan
[agama] => Islam
[sekolah_asal] => SMPN 32 Ampenan
)

e. Kemudian data tersebut kita tampilkan untuk menjadi nilai default pada form.
f. Jangan lupa untuk membuat input id dengan tipe hidden untuk menyimpan id data
yang akan di-update.

<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />

g. Untuk input radio dan select, kita menggunakan operator ternary agar bisa membuat
atribut checked dan selected.

<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" <?php echo
($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" <?php echo
($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="agama">
<option <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
<option <?php echo ($agama == 'Kristen') ? "selected": "" ?>>Kristen</option>
<option <?php echo ($agama == 'Hindu') ? "selected": "" ?>>Hindu</option>
<option <?php echo ($agama == 'Budha') ? "selected": "" ?>>Budha</option>
<option <?php echo ($agama == 'Atheis') ? "selected": "" ?>>Atheis</option>
</select>
</p>

h. Setelah itu, silahkan isi file proses-edit.php dengan kode berikut:

<?php
include("config.php");
// cek apakah tombol simpan sudah diklik atau blum?
if(isset($_POST['simpan'])){
// ambil data dari formulir
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
// buat query update
$sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat',
jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query update berhasil?
if( $query ) {
// kalau berhasil alihkan ke halaman list-siswa.php
header('Location: list-siswa.php');
} else {
// kalau gagal tampilkan pesan
die("Gagal menyimpan perubahan...");
}

} else {
die("Akses dilarang...");
}
?>

Anda mungkin juga menyukai