Membuat Website Pendaftaran + Login + Upload Foto + Edit Data menggunakan query dan MySQL
by Hana Machmudah
Pada kali ini saya membuat website menggunakan PHP. Website kali ini yaitu website Pendaftaran Peserta Didik Baru. Disini pengguna dapat melakukan login terlebih dahulu untuk masuk ke dalam webiste dan memilki akun di website tersebut. Kemudian pengguna juga dapat melakukan upload gambar dalam form yang telah disediakan. Data dari form tersebut baik berupa data diri ataupun data gambar semua disimpan dalam database.
Tampilan website di halaman depan:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href=""><img src="img/log.jpg" alt="gambar"></a>
</header>
<div class=" formContainer" style="margin-top: 80px; margin-bottom: 80px">
<h1 style="margin-bottom: 40px;">Login</h1>
<div class="container">
<form id="formMahasiswa" autocomplete="off" action="proses-login.php" method="POST">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" minlength="1" maxlength="15">
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="password" name="password" class="form-control" minlength="1" maxlength="20">
</div>
<button name="login" type="submit" class="btn btn-primary" style="margin-top: 20px; width: 100%;">Login</button>
</form>
</div>
<?php if (isset($_GET['status'])) : ?>
<br><br>
<p>
<?php
if ($_GET['status'] == 'gagal') {
echo "<h5 style='color: red;'>Informasi Login Salah!</h5>";
}
?>
</p>
<?php endif; ?>
</div>
</div>
</div>
<footer>
<h6>© All Rights Reserved.</h6>
</footer>
</body>
</html>
config.php
<?php
$server = "localhost";
$user = "root";
$password = "";
$nama_database = "pendaftaran_siswa";
$db = mysqli_connect($server, $user, $password, $nama_database);
if (!$db) {
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
delete.php
<?php
include("config.php");
if (isset($_GET['id'])) {
$id = $_GET['id'];
$sql = "Select * from calon_siswa Where id=$id";
$query = mysqli_query($db, $sql);
$data = mysqli_fetch_array($query);
if(is_file("images/".$data['foto'])){
unlink("images/".$data['foto']);
}
$sql2 = "Delete from calon_siswa Where id=$id";
$query2 = mysqli_query($db, $sql2);
if ($query2) {
echo 'alert("Penghapusan data berhasil!")';
header('Location: list-siswa.php');
} else {
die("Gagal menghapus...");
}
} else {
die("Akses Dilarang...");
}
edit.php
<?php
include("config.php");
if (isset($_POST['simpan'])) {
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
if(isset($_POST['ubah_foto'])){
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
$fotobaru = date('dmYHis').$foto;
$path = "images/".$fotobaru;
if(move_uploaded_file($tmp, $path)){
$sql= "Select * From calon_siswa WHERE id='$id'";
$query = mysqli_query($db, $sql);
$data = mysqli_fetch_array($query);
if(is_file("images/".$data['foto']))
unlink("images/".$data['foto']);
$sql = "Update calon_siswa set nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah', foto='$fotobaru' Where id='$id'";
$query = mysqli_query($db, $sql);
if ($query) {
header('Location: list-siswa.php');
} else {
die("Gagal menyimpan perubahan...");
}
} else{
echo "alert(Maaf, Gambar gagal untuk diupload.)";
header('Location: list-siswa.php');
}
}
else {
$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);
if ($query) {
header('Location: list-siswa.php');
} else {
die("Gagal menyimpan perubahan...");
}
}
} else{
die('Akses Dilarang ...');
}
form-edit.php
<?php
include("config.php");
if (!isset($_GET['id'])) {
header('Location: list-siswa.php');
}
$id = $_GET['id'];
$sql = "Select * From calon_siswa Where id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
if (mysqli_num_rows($query) < 1) {
die("Data tidak ditemukan...");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Edit Siswa | SMK Coding</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href="menu.php"><img src="images/sso.png" alt="gambar"></a>
</header>
<div class=" formContainer" style="margin-top: 80px; margin-bottom: 80px">
<h1 style="margin-bottom: 40px;">Form Edit Data Siswa</h1>
<div class="container">
<form id="formMahasiswa" autocomplete="off" action="proses-edit.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>">
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama" placeholder="Nama Lengkap Calon Siswa" class="form-control" minlength="3" maxlength="40" value="<?php echo $siswa['nama'] ?>">
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<textarea name="alamat" class="form-control" placeholder="Alamat Lengkap Siswa"><?php echo $siswa['alamat'] ?></textarea>
</div>
<div class=" form-group">
<label for="sekolah_asal">Sekolah Asal</label>
<input type="text" name="sekolah_asal" placeholder="Sekolah Asal Calon Siswa" class="form-control" minlength="1" value="<?php echo $siswa['sekolah_asal'] ?>">
</div>
<div class=" form-group">
<label for="agama">Agama</label>
<?php $agama = $siswa['agama']; ?>
<select name="agama" class="form-control">
<option>Pilih Agama Calon Siswa</option>
<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>
</div>
<div class="form-group">
<label for="jenis_kelamin">Jenis Kelamin</label><br>
<?php $jk = $siswa['jenis_kelamin']; ?>
<input type="radio" name="jenis_kelamin" value="Laki-laki" <?php echo ($jk == 'Laki-laki') ? "checked" : "" ?>> Laki-laki<br>
<input type="radio" name="jenis_kelamin" value="Perempuan" <?php echo ($jk == 'Perempuan') ? "checked" : "" ?>> Perempuan<br>
</div>
<div class="form-group">
<label for="foto">Foto</label><br><br>
<input type="file" name="foto" value=""><br><br>
<input type="checkbox" name="ubah_foto" value="true"> Ceklis jika ingin mengubah foto<br>
</div>
<button name="simpan" type="submit" class="btn btn-primary" style="margin-top: 20px;">Simpan</button>
</form>
</div>
</div>
<footer>
<h6>© All Rights Reserved.</h6>
</footer>
</body>
</html>
form-regis.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href="menu.php"><img src="images/sso.png" alt="gambar"></a>
</header>
<div class=" formContainer" style="margin-top: 80px; margin-bottom: 80px">
<h1 style="margin-bottom: 40px;">Form Pendaftaran Calon Siswa</h1>
<div class="container">
<form id="formMahasiswa" autocomplete="off" action="proses-pendaftaran.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama" placeholder="Nama Lengkap Calon Siswa" class="form-control" minlength="3" maxlength="40">
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<textarea name="alamat" class="form-control" placeholder="Alamat Lengkap Siswa"></textarea>
</div>
<div class="form-group">
<label for="sekolah_asal">Sekolah Asal</label>
<input type="text" name="sekolah_asal" placeholder="Sekolah Asal Calon Siswa" class="form-control" minlength="1">
</div>
<div class="form-group">
<label for="agama">Agama</label>
<select name="agama" class="form-control">
<option>Pilih Agama Calon Siswa</option>
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Atheis</option>
</select>
</div>
<div class="form-group">
<label for="jenis_kelamin">Jenis Kelamin</label><br>
<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki<br>
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan<br>
</div>
<div class="form-group">
<label for="foto">Foto</label><br><br>
<input type="file" name="foto" value=""><br><br>
<input type="checkbox" name="ubah_foto" value="true"> Ceklis jika ingin menambahkan foto<br>
</div>
<button name="daftar" type="submit" class="btn btn-primary" style="margin-top: 20px;">Daftar</button>
</form>
</div>
</div>
<footer>
<h6>© All Rights Reserved.</h6>
</footer>
</body>
</html>
login.php
<?php
include("config.php");
if (isset($_POST['login'])){
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "Select * from akun where username='$username' && password='$password'";
$query = mysqli_query($db, $sql);
$cek = mysqli_num_rows($query);
if ($cek > 0) {
header('Location: menu.php');
} else {
header('Location: index.php?status=gagal');
}
}
?>
menu.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href="menu.php"><img src="images/sso.png" alt="gambar""></a>
</header>
<div class=" formContainer" style="margin-top: auto; margin-bottom: auto;">
<h1>Pendaftaran Siswa Baru </h1>
<br><br>
<div class="d-flex justify-content-center">
<a href="form-daftar.php"><button class="mr-3 btn btn-primary"> Daftar Baru</button></a>
<a href="list-siswa.php"><button class="btn btn-primary">Pendaftar</button></a>
</div>
<?php if (isset($_GET['status'])) : ?>
<br><br><br>
<p>
<?php
if ($_GET['status'] == 'sukses') {
echo "<h3>Pendaftaran siswa baru berhasil!</h3>";
} else {
echo "<br><br><h3>Pendaftaran gagal!</h3>";
}
?>
</p>
<?php endif; ?>
</div>
<footer>
<h6>© All Rights Reserved.</h6>
</footer>
</body>
</html>
regis.php
<?php
include("config.php");
if (isset($_POST['daftar'])) {
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
if(isset($_POST['ubah_foto'])){
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
$fotobaru = date('dmYHis').$foto;
$path = "images/".$fotobaru;
if(move_uploaded_file($tmp, $path)){
$sql = "Insert into calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal, foto) values ('$nama', '$alamat', '$jk', '$agama', '$sekolah', '$fotobaru')";
$query = mysqli_query($db, $sql);
if ($query) {
header('Location: menu.php?status=sukses');
} else {
header('Location: menu.php?status=gagal');
}
} else{
echo 'alert("Maaf, Gambar gagal untuk diupload")';
echo "<br><a href='form-daftar.php'>Kembali Ke Form</a>";
}
}
else{
$sql = "Insert into calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) values ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
$query = mysqli_query($db, $sql);
if ($query) {
header('Location: menu.php?status=sukses');
} else {
header('Location: menu.php?status=gagal');
}
}
}
else{
die("Akses dilarang...");
}
daftar-siswa.php
<?php include("config.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
.custab {
border: 1px solid #ccc;
padding: 5px;
transition: 0.5s;
}
.custab:hover {
box-shadow: 3px 3px 0px transparent;
transition: 0.5s;
}
</style>
</head>
<body>
<header style="margin-bottom: 20px;">
<a href="menu.php"><img src="images/sso.png" alt="gambar""></a>
</header>
<h1>List Daftar Calon Siswa</h1>
<div class=" container" style="margin-top:20px; margin-bottom: 40px">
<p style="text-align: right; margin:15px">
<a href=" form-daftar.php" class="btn btn-primary btn-xs col-md-3">[+] Tambah Baru</a>
</p>
<div class="col-md-12 col-md-offset-2 custyle">
<table class="table table-striped custab">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Sekolah Asal</th>
<th>Foto</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>";
if($siswa['foto'] != NULL){
echo "<td><img src='images/".$siswa['foto']."' width='100' height='100'></td>";
} else{
echo "<td><p>Tidak ada foto!</p></td>";
}
echo "<td class='text-center'>";
echo "<a class='btn btn-info btn-xs' href='form-edit.php?id=" . $siswa['id'] . "' ><span class='glyphicon glyphicon-edit'></span>Edit</a> | ";
echo "<a class='btn btn-danger btn-xs' href='hapus.php?id=" . $siswa['id'] . "'><span class='glyphicon glyphicon-remove'></span>Hapus</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p style="font-weight : bolder">Total : <?php echo mysqli_num_rows($query) ?></p>
</div>
</div>
<footer>
<h6>© All Rights Reserved.</h6>
</footer>
</body>
</html>
Komentar
Posting Komentar