Integrasi PHP dengan HTML
Integrasi PHP
Langkah-langkahnya:
1. Buat folder siswa di c:\xampp\htdocs.
2. Copy kan hasil koding PHP (login & CRUD siswa) ke folder siswa.
3. Copy kan juga hasil form template yang sudah dibuat sebelumnya
.png)
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Login</h1>
<form action="" method="POST">
<label>Username</label><br>
<input type="text" name="username"><br>
<label>Password</label><br>
<input type="password" name="password"><br>
<button type="submit" name="login">Log in</button>
</form>
<?php
include "koneksi.php";
if (isset($_POST['login'])){
$user = $_POST['username'];
$pass = md5($_POST['password']);
$login=mysqli_query($koneksi, "SELECT * FROM user
WHERE username='$user' AND password='$pass'");
$cocok=mysqli_num_rows($login);
$r=mysqli_fetch_array($login);
if ($cocok > 0){
$_SESSION['username'] = $r['username'];
header('location:index.php');
}else{
echo "<script>window.alert('Maaf, Anda Tidak Memiliki akses');
window.location=('index.php')</script>";
}
}
?>
</body>
</html>
5. Selanjutnya buat file baru header.php
<a class="navbar-brand ps-3" href="index.php">Aplikasi Data Siswa</a>
<!-- Sidebar Toggle-->
<button
class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0"
id="sidebarToggle"
href="#!"
>
<i class="fas fa-bars"></i>
</button>
<!-- Navbar Search-->
<form
class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0"
>
</form>
<!-- Navbar-->
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
id="navbarDropdown"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
><i class="fas fa-user fa-fw"></i
></a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdown"
>
<li><a class="dropdown-item" href="#!">Profile</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="logout.php">Logout</a></li>
</ul>
</li>
</ul>
6. Buat file baru sidebar.php
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">MENU UTAMA</div>
<a class="nav-link" href="index.php">
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<a class="nav-link" href="siswa">
<div class="sb-nav-link-icon"><i class="fas fa-paste"></i></div>
Data siswa
</a>
</nav>
7. Kemudian buat file footer.php
<div class="container-fluid px-4">
<div
class="d-flex align-items-center justify-content-between small"
>
<div class="text-muted">Copyright © Polibest 2022</div>
<div>
8. Buat file baru dashboard.php
<?php
$siswa = mysqli_query($koneksi, "SELECT * FROM siswa");
$jumlah_siswa = mysqli_num_rows($siswa);
$siswa_lk = mysqli_query($koneksi, "SELECT * FROM siswa where jenis_kelamin='laki-laki'");
$jumlah_siswa_lk = mysqli_num_rows($siswa_lk);
$siswa_pr = mysqli_query($koneksi, "SELECT * FROM siswa where jenis_kelamin='perempuan'");
$jumlah_siswa_pr = mysqli_num_rows($siswa_pr);
?>
<div class="container-fluid px-4">
<h1 class="mt-4">Dashboard</h1>
<div class="row">
<div class="col-xl-3 col-md-6">
<div class="card text-center bg-primary text-white mb-4">
<div class="card-body card-title"><h1><?php echo $jumlah_siswa; ?></h1></div>
<div class="card-footer">
Jumlah Siswa
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card text-center bg-primary text-white mb-4">
<div class="card-body card-title"><h1><?php echo $jumlah_siswa_lk; ?></h1></div>
<div class="card-footer">
Siswa Laki-laki
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card text-center bg-primary text-white mb-4">
<div class="card-body card-title"><h1><?php echo $jumlah_siswa_pr; ?></h1></div>
<div class="card-footer">
Siswa Perempuan
</div>
</div>
</div>
</div>
</div>
9. Kemudian edit file konten.php menjadi seperti contoh
<!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, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Membuat Admin Template</title>
<link
href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css"
rel="stylesheet"
/>
<link href="css/styles.css" rel="stylesheet" />
<script
src="https://use.fontawesome.com/releases/v6.1.0/js/all.js"
crossorigin="anonymous"
></script>
</head>
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<!-- Navbar Brand-->
<?php
include "header.php";
?>
</nav>
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<?php
include "sidebar.php";
?>
<!-- Akhir Menu Sidebar -->
</div>
<div id="layoutSidenav_content">
<main>
<?php
if (!isset($_GET['page'])){
include "dashboard.php";
}elseif ($_GET['page'] == 'siswa'){
include "siswa.php";
}else{
echo "Maaf, halaman tidak ditemukan!";
}
?>
</main>
<a
class="nav-link collapsed"
href="#"
data-bs-toggle="collapse"
data-bs-target="#collapsePages"
aria-expanded="false"
aria-controls="collapsePages"
>
<footer class="py-4 bg-light mt-auto">
<?php
include "footer.php";
?>
</footer>
</div>
</div>
<script src="js/scripts.js"></script>
<script src="js/datatables-simple-demo.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/simple-datatables.js"></script>
<script src="js/Chart.min.js"></script>
<script src="assets/demo/chart-area-demo.js"></script>
<script src="assets/demo/chart-bar-demo.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous" ></script>
</body>
</html>
10. Edit juga file siswa.php menjadi seperti ini
<?php
if (!isset($_GET['aksi'])){
?>
<div class="container-fluid px-4">
<h1 class="mt-4">Data Siswa</h1>
<div class="card mb-4">
</div>
<div class="card mb-4">
<div class="card-header">
<a type ="button" class="btn btn-primary" href="index.php?page=siswa&aksi=tambah">Tambah Siswa</a>
</div>
<div class="card-body">
<table id="datatablesSimple">
<thead>
<tr>
<th>No</th>
<th>NIS</th>
<th>Nama Siswa</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$siswa=mysqli_query($koneksi, "SELECT * FROM siswa");
$no = 1;
while ($data = mysqli_fetch_array($siswa)){
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data['nis']; ?></td>
<td><?php echo $data['nama_siswa']; ?></td>
<td><?php echo $data['jenis_kelamin']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td><a href="index.php?page=siswa&aksi=edit&id=<?php echo $data['id_siswa'] ?>">Edit</a> |
<a href="index.php?page=siswa&aksi=hapus&id=<?php echo $data['id_siswa'] ?>">Hapus</a></td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<?php
}elseif ($_GET['aksi']=='tambah'){
?>
<div class="container-fluid px-4">
<h1 class="mt-4">Data Siswa</h1>
<div class="card mb-4 col-md-8">
<div class="card-header">
<h5> Tambah Siswa </h5>
</div>
<div class="card-body">
<form action='' method="POST" enctype='multipart/form-data'>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="a">
<label>NIS</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="b">
<label>Nama Siswa</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="c">
<label>Jenis Kelamin</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="d">
<label>Alamat</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="file" name="e">
<label>Foto Siswa</label>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-block" type="submit" name="simpan">Simpan</button>
</div>
</form>
</div>
</div>
</div>
<?php
if (isset($_POST['simpan'])){
$dir_foto = 'foto/';
$filename = basename($_FILES['e']['name']);
$uploadfile = $dir_foto . $filename;
if ($filename != ''){
if (move_uploaded_file($_FILES['e']['tmp_name'], $uploadfile)) {
mysqli_query($koneksi,"INSERT INTO siswa (nis, nama_siswa, jenis_kelamin, alamat, foto_siswa)
VALUES('$_POST[a]','$_POST[b]','$_POST[c]','$_POST[d]','$filename')");
echo "<script>window.alert('Sukses Menambahkan Data Siswa.');
window.location='siswa'</script>";
}else{
echo "<script>window.alert('Gagal Menambahkan Data Siswa.');
window.location='index.php?page=siswa&aksi=tambah'</script>";
}
}else{
mysqli_query($koneksi,"INSERT INTO siswa (nis, nama_siswa, jenis_kelamin, alamat)
VALUES('$_POST[a]','$_POST[b]','$_POST[c]','$_POST[d]')");
echo "<script>window.alert('Sukses Menambahkan Data Siswa .');
window.location='siswa'</script>";
}
}
}elseif ($_GET['aksi']=='edit'){
$siswa = mysqli_query($koneksi, "SELECT * FROM siswa where id_siswa='$_GET[id]'");
$data = mysqli_fetch_array($siswa);
?>
<div class="container-fluid px-4">
<h1 class="mt-4">Data Siswa</h1>
<div class="card mb-4 col-md-8">
<div class="card-header">
<h5> Update Siswa </h5>
</div>
<div class="card-body">
<form action='' method="POST" enctype='multipart/form-data'>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="a" value="<?php echo $data['nis']; ?>">
<label>NIS</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="b" value="<?php echo $data['nama_siswa']; ?>">
<label>Nama Siswa</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="c" value="<?php echo $data['jenis_kelamin']; ?>">
<label>Jenis Kelamin</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="text" name="d" value="<?php echo $data['alamat']; ?>">
<label>Alamat</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" type="file" name="e">
<label>Foto Siswa</label>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-block" type="submit" name="update">Simpan</button>
</div>
</form>
</div>
</div>
</div>
<button type="submit" name="update">Simpan</button>
<?php
if (isset($_POST['update'])){
$dir_foto = 'foto/';
$filename = basename($_FILES['e']['name']);
$uploadfile = $dir_foto . $filename;
if ($filename != ''){
if (move_uploaded_file($_FILES['e']['tmp_name'], $uploadfile)) {
mysqli_query($koneksi,"UPDATE siswa SET nis = '$_POST[a]',
nama_siswa = '$_POST[b]',
jenis_kelamin = '$_POST[c]',
alamat = '$_POST[d]',
foto_siswa = '$filename' where id_siswa = '$_GET[id]'");
echo "<script>window.alert('Sukses Update Data Siswa.');
window.location='siswa'</script>";
}else{
echo "<script>window.alert('Gagal Update Data Siswa.');
window.location='index.php?page=siswa&aksi=tambah'</script>";
}
}else{
mysqli_query($koneksi,"UPDATE siswa SET nis = '$_POST[a]',
nama_siswa = '$_POST[b]',
jenis_kelamin = '$_POST[c]',
alamat = '$_POST[d]',
foto_siswa = '$filename' where id_siswa = '$_GET[id]'");
echo "<script>window.alert('Sukses Update Data Siswa .');
window.location='siswa'</script>";
}
}
}elseif ($_GET[aksi]=='hapus'){
mysqli_query($koneksi, "DELETE FROM siswa where id_siswa='$_GET[id]'");
echo "<script>window.alert('Data Siswa Berhasil Di Hapus.');
window.location='siswa'</script>";
}
?>
Tampilan Loginnya akan menjadi seperti ini
.png)
.png)
Tampilan Data Siswa akan menjadi seperti ini
.png)
Tampilan Tambah siswa akan menjadi seperti ini
.png)
Komentar
Posting Komentar