Integrasi PHP dengan Template

-

 

1. Buat Folder

  • Buat folder siswa di c:\xampp\htdocs 
  • Copy kan hasil koding PHP (login & CRUD siswa), hasil form template & admin template yang sudah dibuat sebelumnya ke folder siswa.

2. Integrasi php dengan form login

Edit file login.php sebagai berikut :

<!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>
</div>
<?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>

3. Integrasi form login dengan admin template

-   Buat file 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-->
      <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>

  • buat file 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>
  • 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 &copy; Polibest 2022</div>
            <div>
  • buat file 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>

  • Edit file konten.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, 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>

  • Edit file siswa.php
<?php
if (!isset($_GET['aksi'])){
?>


<div class="container-fluid px-4">
<h1 class="mt-4">Data Siswa</h1>
<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>
<?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>
<?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>";
  }  
?>


Maka hasilnya : 

1. Tampilan Login





2. Tampilan Dashboard




3. Tampilan Data siswa


5. Tampilan edit siswa










Komentar

Posting Komentar

Postingan populer dari blog ini

Open Source Intelligence (OSINT)

-
Gambar
OSINT  ( Open Source Intelligence ) Adalah pada proses pengumpulan dan analisis informasi yang tersedia untuk umum dari berbagai sumber terbuka untuk tujuan intelijen. Ini termasuk penggunaan informasi yang dapat diakses oleh publik secara legal, seperti situs web, media sosial, laporan publik, basis data, dan publikasi lainnya. OSINT digunakan oleh berbagai pihak, termasuk perusahaan, pemerintah, penegak hukum, dan profesional keamanan siber untuk mengumpulkan informasi yang relevan dan berharga. Sumber-sumber OSINT mencakup media, internet, media sosial, pemerintah, akademik, dan komersial. Proses OSINT melibatkan definisi tujuan, pengumpulan data, pengolahan data, analisis, dan penyajian laporan. Manfaat OSINT meliputi deteksi ancaman dan keamanan, pemantauan media sosial, investigasi dan penegakan hukum, intelijen bisnis, pengumpulan informasi di medan perang, penilaian risiko, dan dukungan untuk keputusan pemerintah. Beberapa alat dan teknik umum yang digunakan dalam OSINT ter...
Baca selengkapnya

Mengenal MongoDB For VSCode

-
Gambar
  Memaksimalkan Pengembangan Database dengan Visual Studio Code MongoDB adalah salah satu database NoSQL yang paling populer di dunia, digunakan oleh ribuan pengembang untuk menyimpan dan mengelola data mereka. MongoDB menawarkan fleksibilitas, skalabilitas, dan kinerja tinggi, menjadikannya pilihan utama untuk banyak aplikasi modern. Dalam upaya untuk memudahkan pengembangan dan administrasi database MongoDB, tim MongoDB merilis ekstensi MongoDB for Visual Studio Code. Visual Studio Code (VSCode) adalah salah satu editor kode sumber terpopuler yang tersedia secara gratis. MongoDB for VSCode adalah ekstensi yang memungkinkan pengembang untuk terhubung ke database MongoDB, menjelajahi data, mengeksekusi query, dan mengelola koleksi data, semuanya tanpa perlu meninggalkan VSCode. Dalam artikel ini, kita akan menjelajahi bagaimana MongoDB for VSCode dapat memaksimalkan produktivitas Anda dalam pengembangan dan administrasi database MongoDB. Instalasi MongoDB for VSCode Langkah pertama...
Baca selengkapnya

GETTING STARTED WITH MATPLOTLIB & SEABORN

-
Gambar
    Getting Started with Matplotlib and Seaborn 1. Pertama tama silahakan load data train.csv sehingga seperti dibawah ini  2. Coba tampilkan basic info dari data tersebut seperti di bawah ini  Lets Have some questions to asnwer 1. Siapakah para penumpang titanic? (Umur, Jenis kelamin, Kelas dll) - Mari kita visualisasikan!, silahkan coba untuk membuat visualisasi seperti gambar di bawah ini  - Hint untuk membuat seaborn seperti gambar di atas dan di bawah ini
Baca selengkapnya