PHP adalah singkatan dari Hypertext Preprocessor, yaitu bahasa pemrograman yang sebenarnya mirip dengan JavaScript dan Python. Perbedaannya adalah, PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript bisa digunakan untuk frontend dan backend. Sementara itu, Python hanya untuk sisi server (backend).
Berikut adalah source code :
index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendaftaran SMAN 1 Ponorogo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="front-page">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href=".">
Pendaftaran Siswa Baru SMAN 1 Ponorogo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="daftar.html">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pendaftar.html">Lihat Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="row mb-4">
<div class="col-sm-12">
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Selamat datang</h4>
<h5 class="card-title">di website Pendaftaran Siswa Baru SMAN 1 Ponorogo</h5>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title"><strong>Daftar Baru</strong></h5>
<p class="card-text">Klik tombol di bawah<br>untuk melakukan pendaftaran siswa baru.</p>
<a href="daftar.html" class="btn btn-primary">Daftar</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title"><strong>Lihat Pendaftar</strong></h5>
<p class="card-text">Klik tombol di bawah<br>untuk melihat seluruh pendaftar.</p>
<a href="pendaftar.html" class="btn btn-primary">Lihat Pendaftar</a>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="text-dark">
© SMAN 1 Ponorogo 2021
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendaftaran Siswa - SMAN 1 Ponorogo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="form-daftar">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href=".">
Pendaftaran Siswa Baru SMAN 1 Ponorogo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" href="daftar.html">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pendaftar.html">Lihat Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<form id="form-daftar">
<h2 class="h3 mb-3 fw-normal text-center">
Formulir Pendaftaran Siswa Baru<br>SMAN 1 Ponorogo
</h2>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="nama" id="nama" placeholder="Nama lengkap Anda" required>
<label for="nama">Nama Lengkap</label>
</div>
<div class="row">
<div class="col-md-6">
<label for="jenis_kelamin">Jenis Kelamin</label>
<select class="form-select form-floating mb-3" name="jenis_kelamin" id="jenis_kelamin" required>
<option label="Pilih jenis kelamin" hidden></option>
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</div>
<div class="col-md-6">
<label for="agama">Agama</label>
<select class="form-select form-floating mb-3" name="agama" id="agama" required>
<option label="Pilih agama" hidden></option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Khonghucu">Khonghucu</option>
</select>
</div>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="sekolah_asal" id="sekolah_asal" placeholder="Sekolah asal Anda" required>
<label for="sekolah_asal">Sekolah Asal</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Alamat Anda" name="alamat" id="alamat" style="height: 100px" required></textarea>
<label for="alamat">Alamat</label>
</div>
<button id="submit-btn" type="button" class="btn btn-primary w-100 pt-2 btn-block">Daftar</input>
</form>
</main>
<footer class="text-muted">
<div class="container">
<p class="text-dark">
© SMAN 1 Ponorogo 2021
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
$('#submit-btn').on('click', () => {
var form = $('#form-daftar')[0];
var fd = new FormData(form);
let dataSiswa = {
nama: $('#nama').val(),
jenis_kelamin: $('#jenis_kelamin').val(),
agama: $('#agama').val(),
sekolah_asal: $('#sekolah_asal').val(),
alamat: $('#alamat').val(),
}
let flag = false;
if(!dataSiswa.nama.length ||
!dataSiswa.jenis_kelamin.length ||
!dataSiswa.agama.length ||
!dataSiswa.sekolah_asal.length ||
!dataSiswa.alamat.length) flag = true
if(!flag){
fd.append('nama', dataSiswa.nama);
fd.append('jenis_kelamin', dataSiswa.jenis_kelamin);
fd.append('agama', dataSiswa.agama);
fd.append('sekolah_asal', dataSiswa.sekolah_asal);
fd.append('alamat', dataSiswa.alamat);
$.ajax({
type: 'POST',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
url: "php/create_daftar.php",
data: fd,
success: function(resultData) {
Swal.fire({
icon: 'success',
title: 'Pendaftaran berhasil',
text: 'Data Anda berhasil terkirim',
heightAuto: false
})
form.reset();
}
});
}else{
Swal.fire({
icon: 'error',
title: 'Terjadi kesalahan',
text: 'Periksa kembali data yang Anda masukkan',
heightAuto: false
});
}
});
</script>
</body>
</html>
register2.html
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendaftar - SMAN 1 Ponorogo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="lihat-pendaftar">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href=".">
Pendaftaran Siswa Baru SMAN 1 Ponorogo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="daftar.html">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="pendaftar.html">Lihat Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row mb-3">
<div class="col-sm-6">
<h2>Siswa yang sudah mendaftar</h2>
</div>
<div class="col-sm-6 float-end">
<a href="daftar.html" class="btn btn-primary mb-2 float-end">Daftar baru</a>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Agama</th>
<th scope="col">Sekolah Asal</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody id="listSiswa">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Data Pendaftar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="form-edit">
<div class="modal-body">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="nama" id="nama" placeholder="Nama lengkap Anda" required>
<label for="nama">Nama Lengkap</label>
</div>
<div class="row">
<div class="col-md-6">
<label for="jenis_kelamin">Jenis Kelamin</label>
<select class="form-select form-floating mb-3" name="jenis_kelamin" id="jenis_kelamin" required>
<option label="Pilih jenis kelamin" hidden></option>
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</div>
<div class="col-md-6">
<label for="agama">Agama</label>
<select class="form-select form-floating mb-3" name="agama" id="agama" required>
<option label="Pilih agama" hidden></option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Khonghucu">Khonghucu</option>
</select>
</div>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="sekolah_asal" id="sekolah_asal" placeholder="Sekolah asal Anda" required>
<label for="sekolah_asal">Sekolah Asal</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Alamat Anda" name="alamat" id="alamat" style="height: 100px" required></textarea>
<label for="alamat">Alamat</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary" id="edit-btn">Simpan</button>
</div>
</form>
</div>
</div>
</div>
<footer class="text-muted text-center">
<div class="container">
<p class="text-dark">
© SMAN 1 Ponorogo 2021
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready( () =>{
$.ajax({
type: 'GET',
url: "php/read_list.php",
success: function(resultData) {
// console.log(resultData)
resultData.split("\n").forEach(element => {
if(element){
let data = JSON.parse(element);
if(!data) return;
$('#listSiswa').append(`
<tr>
<td>${data.id}</td>
<td>${data.nama}</td>
<td>${data.alamat}</td>
<td>${data.jenis_kelamin}</td>
<td>${data.agama}</td>
<td>${data.sekolah_asal}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataSiswa(${data.id})">Edit</button>
<button class="btn btn-danger btn-sm" onclick="deleteDataSiswa(${data.id})">Hapus</button>
</td>
</tr>
`)
}
});
}
});
});
const getDataSiswa = (id => {
$.ajax({
type: 'GET',
url: "php/read_data_siswa.php?id=" + id,
success: function(resultData) {
let data = JSON.parse(resultData);
$('#edit-btn').data('id', id);
$('#nama').val(data.nama);
$('#jenis_kelamin option[value='+data.jenis_kelamin+']').attr('selected','selected');
$('#agama option[value='+data.agama+']').attr('selected','selected');
$('#sekolah_asal').val(data.sekolah_asal);
$('#alamat').val(data.alamat);
}
});
});
$('#edit-btn').on('click', () => {
let dataSiswa = {
id: $('#edit-btn').data('id'),
nama: $('#nama').val(),
jenis_kelamin: $('#jenis_kelamin').val(),
agama: $('#agama').val(),
sekolah_asal: $('#sekolah_asal').val(),
alamat: $('#alamat').val(),
}
let flag = false;
if(!dataSiswa.nama.length ||
!dataSiswa.jenis_kelamin.length ||
!dataSiswa.agama.length ||
!dataSiswa.sekolah_asal.length ||
!dataSiswa.alamat.length) flag = true
if(!flag){
$.ajax({
type: 'POST',
url: "php/update.php",
data: dataSiswa,
success: function(resultData) {
Swal.fire({
icon: 'success',
title: 'Edit data berhasil',
text: 'Data Anda berhasil diperbarui',
heightAuto: false
}).then((result) => {
if (result.isConfirmed) {
location.reload();
}
})
}
});
}else{
Swal.fire({
icon: 'error',
title: 'Terjadi kesalahan',
text: 'Periksa kembali data yang Anda masukkan',
heightAuto: false
});
}
});
const deleteDataSiswa = (id => {
Swal.fire({
title: 'Apakah Anda yakin akan menghapus data pendaftaran?',
text: "Tindakan ini tidak bisa dibatalkan.",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#dc3545',
cancelButtonColor: '#0d6efd',
confirmButtonText: 'Hapus',
cancelButtonText: 'Batal',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: 'GET',
url: "php/delete.php?id=" + id,
success: function(resultData) {
Swal.fire({
icon: 'success',
title: 'Hapus data berhasil',
text: 'Data Anda berhasil dihapus',
heightAuto: false
}).then((result) => {
if (result.isConfirmed) {
location.reload();
}
})
}
});
}
})
});
</script>
</body>
</html>
style.css
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.front-page, .form-daftar{
width: 100%;
max-width: 1000px;
padding: 15px;
margin: 2rem auto;
}
.lihat-pendaftar {
width: 100%;
padding: 15px;
margin: 2rem auto;
}
.swal2-container{
z-index: 100000;
}
.swal2-popup{
z-index: 99995;
}
config.php
<?php
$server = "localhost";
$user = "id18158808_pendaftar";
$password = "ya%{NO6<LAJB/iJW";
$nama_database = "id18158808_pendaftar_db";
$db = mysqli_connect($server, $user, $password, $nama_database);
if (!$db) {
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
createRegister.php
<?php
include("config.php");
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$nama = str_replace("'", "\'", $_POST['nama']);
$jenis_kelamin = str_replace("'", "\'", $_POST['jenis_kelamin']);
$agama = str_replace("'", "\'", $_POST['agama']);
$sekolah_asal = str_replace("'", "\'", $_POST['sekolah_asal']);
$alamat = str_replace("'", "\'", $_POST['alamat']);
$sql = "INSERT INTO calon_siswa (nama, jenis_kelamin, agama, sekolah_asal, alamat)
VALUE ('$nama', '$jenis_kelamin', '$agama', '$sekolah_asal', '$alamat')";
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}
readData.php
<?php
include("config.php");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'GET'){
$id = str_replace("'", "\'", $_GET['id']);
$sql = "SELECT * FROM calon_siswa WHERE id = $id";
$query = mysqli_query($db, $sql);
while ($siswa = mysqli_fetch_array($query)) {
echo json_encode([
"id" => $siswa["id"],
"nama" => $siswa["nama"],
"jenis_kelamin" => $siswa["jenis_kelamin"],
"agama" => $siswa["agama"],
"sekolah_asal" => $siswa["sekolah_asal"],
"alamat" => $siswa["alamat"],
]);
echo "\n";
break;
}
}else{
die("Method not allowed");
}
deleteData.php
<?php
include("config.php");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'GET'){
$id = str_replace("'", "\'", $_GET['id']);
$sql = "DELETE FROM calon_siswa
WHERE id=$id";
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}
updateData.php
<?php
include("config.php");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$id = str_replace("'", "\'", $_POST['id']);
$nama = str_replace("'", "\'", $_POST['nama']);
$jenis_kelamin = str_replace("'", "\'", $_POST['jenis_kelamin']);
$agama = str_replace("'", "\'", $_POST['agama']);
$sekolah_asal = str_replace("'", "\'", $_POST['sekolah_asal']);
$alamat = str_replace("'", "\'", $_POST['alamat']);
$sql = "UPDATE calon_siswa
SET nama='$nama', jenis_kelamin='$jenis_kelamin', agama='$agama', sekolah_asal='$sekolah_asal', alamat='$alamat'
WHERE id=$id";
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}
Sekian artikel pada kesempatan kali sampai jumpa di artikel selanjutnya, terimakasih.
Komentar
Posting Komentar