Skip to main content

PWEB-BOOTSTRAP


Nama : Bobbi Aditya
NRP : 05111740000099
Kelas : PWEB C

Bootstrap adalah sebuah fitur yang memudahkan kita dalam mendesign dan memperindah web yang sudah kita buat. Dalam tugas kali ini, saya mencoba mengimplementasikan bootstrap dalam tugas pendaftaran siswa yang telah diimplementasikan ajax didalamnya untuk memperindah tampilannya.

Berikut saya sertakan source code yang telah saya buat:

config.php
 <?php  
 $server = "localhost";  
 $user = "root";  
 $password = "";  
 $nama_database = "pendaftaran_siswa";  
 $db = mysqli_connect($server, $user, $password, $nama_database);  
 // echo "Berhasil bossku";  
 if( !$db ){  
   die("Gagal terhubung dengan database: " . mysqli_connect_error());  
 }  
 ?>
form-daftar.php
 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Formulir Pendaftaran Siswa Baru ||SMA PetaniCoding</title>  
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
   <script type="text/javascript" src="js/jquery.js"></script>  
   <script type="text/javascript" src="js/bootstrap.js"></script>  
 </head>  
 <body style="text-align: center;">  
      <header>  
           <h3>Formulir Pendaftaran Siswa Baru</h3>  
      </header>  
 <div style="width: 720px;position: absolute;left: 25%;">  
   <form class="form-horizontal" action="proses-pendaftaran.php" method="POST">  
     <div class="form-group">  
       <label for="nama">Nama: </label>  
       <input class="form-control" type="text" name="nama" placeholder="Nama lengkap" />  
     </div>   
     <div class="form-group">  
       <label for="alamat">Alamat: </label>  
       <textarea class="form-control" name="alamat"></textarea>  
     </div>   
     <div class="form-group">  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <br>  
       <label><input class="form-check-input" type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>  
       <br>  
       <label><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label>  
     </div>   
     <div class="form-group">  
       <label for="agama">Agama: </label>  
       <select class="form-control" name="agama">  
         <option>Islam</option>  
         <option>Kristen</option>  
         <option>Hindu</option>  
         <option>Budha</option>  
         <option>Atheis</option>  
       </select>  
     </div>   
     <div class="form-group">  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input class="form-control" type="text" name="sekolah_asal" placeholder="nama sekolah" />  
     </div>   
     <div class="form-group">  
       <input class="btn btn-primary" type="submit" value="Daftar" name="daftar" />  
     </div>   
   </form>  
 </div>  
 </body>  
 </html>
form-edit.php
 <?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>  
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
   <script type="text/javascript" src="js/jquery.js"></script>  
   <script type="text/javascript" src="js/bootstrap.js"></script>  
 </head>  
 <body style="text-align: center;">  
   <header class="bg-primary text-white">  
     <h3>Formulir Edit Siswa</h3>  
   </header>  
 <div class="bg-info text-white" style="width: 720px;position: absolute;left: 25%;">  
   <form class="form-horizontal" action="proses-edit.php" method="POST">  
       <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />  
     <div class="form-group">   
       <label for="name">Nama: </label>  
       <input class="form-control" type="text" name="name" placeholder="name lengkap" value="<?php echo $siswa['name'] ?>" />  
     </div>  
     <div class="form-group">  
       <label for="alamat">Alamat: </label>  
       <textarea class="form-control" name="alamat"><?php echo $siswa['alamat'] ?></textarea>  
     </div>  
     <div class="form-group">  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <br>  
       <?php $jk = $siswa['jenis_kelamin']; ?>  
       <label><input class="form-check-input" type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>  
       <br>  
       <label><input class="form-check-input" type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>  
     </div>  
     <div class="form-group">  
       <label for="agama">Agama: </label>  
       <?php $agama = $siswa['agama']; ?>  
       <select class="form-control" 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>  
     </div>  
     <div class="form-group">  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input class="form-control" type="text" name="sekolah_asal" placeholder="name sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />  
     </div>  
     <div class="form-group">  
       <input class="btn btn-primary" type="submit" value="Simpan" name="simpan" />  
     </div>  
   </form>  
   </div>  
   </body>  
 </html>
hapus.php
 <?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:index.php');  
   } else {  
     die("gagal menghapus...");  
   }  
 } else {  
   die("akses dilarang...");  
 }  
 ?>
index.php
 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Pendaftaran siswa baru|| SMA PetaniCoding</title>  
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
   <script type="text/javascript" src="js/jquery.js"></script>  
   <script type="text/javascript" src="js/bootstrap.js"></script>  
      <script>  
     function showsiswa() {  
       if (window.XMLHttpRequest) {  
         xhttp = new XMLHttpRequest();  
        }  
       xhttp.onreadystatechange = function() {  
         if (this.readyState == 4 && this.status == 200){  
          document.getElementById("demo").innerHTML = this.responseText;  
         }  
       };  
      xhttp.open("GET", "list-siswa.php", true);  
      xhttp.send();  
     }  
     function daftar() {  
       if (window.XMLHttpRequest) {  
         xhttp = new XMLHttpRequest();  
        }  
       xhttp.onreadystatechange = function() {  
         if (this.readyState == 4 && this.status == 200){  
          document.getElementById("demo").innerHTML = this.responseText;  
         }  
       };  
      xhttp.open("GET", "form-daftar.php", true);  
      xhttp.send();  
     }  
     function edit() {  
       if (window.XMLHttpRequest) {  
         xhttp = new XMLHttpRequest();  
        }  
       xhttp.onreadystatechange = function() {  
         if (this.readyState == 4 && this.status == 200){  
          document.getElementById("demo").innerHTML = this.responseText;  
         }  
       };  
      xhttp.open("GET", "form-edit.php", true);  
      xhttp.send();  
     }  
   </script>  
 </head>  
 <body class="bg-light" style="text-align: center;">  
           <header class="bg-primary text-white">  
                <h3>Pendaftaran siswa baru SMA PetaniCoding</h3>  
           </header>  
   <div style="width: 500px; position: relative;left: 33%;">  
           <h4 class="bg-info text-white">Menu</h4>  
    <div class="list-group">  
             <p align="center"><button type="button" class="btn btn-primary" onclick="showsiswa()">List Siswa</button></p>  
             <p align="center"><button type="button" class="btn btn-primary" onclick="daftar()">Pendaftaran Siswa</button></p>  
             </div>  
     </div>  
     <div id="demo">  
     </div>  
 </body>  
 </html>
list-siswa.php
 <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Pendaftaran Siswa Baru || SMA PetaniCoding</title>  
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
   <script type="text/javascript" src="js/jquery.js"></script>  
   <script type="text/javascript" src="js/bootstrap.js"></script>  
 </head>  
 <body style="text-align: center;">  
   <header>  
     <h3>Siswa yang sudah mendaftar</h3>  
   </header>  
   <br>  
   <table class="table table-bordered table-striped table-hover">  
   <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);  
     $nomor=0;  
     while($siswa = mysqli_fetch_array($query)){  
       echo "<tr>";  
       $nomor++;  
       echo "<td>".$nomor."</td>";  
       echo "<td>".$siswa['name']."</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>
proses-edit.php
 <?php  
 include("config.php");  
 // cek apakah tombol simpan sudah diklik atau blum?  
 if(isset($_POST['simpan'])){  
   // ambil data dari formulir  
   $id = $_POST['id'];  
   $name = $_POST['name'];  
   $alamat = $_POST['alamat'];  
   $jk = $_POST['jenis_kelamin'];  
   $agama = $_POST['agama'];  
   $sekolah = $_POST['sekolah_asal'];  
   // buat query update  
   $sql = "UPDATE calon_siswa SET name='$name', 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: index.php');  
   } else {  
     // kalau gagal tampilkan pesan  
     die("Gagal menyimpan perubahan...");  
   }  
 } else {  
   die("Akses dilarang...");  
 }  
 ?>
proses-pendaftaran.php
 <?php  
 include("config.php");  
 ?>  
 <script>  
     function showsiswa() {  
       if (window.XMLHttpRequest) {  
         xhttp = new XMLHttpRequest();  
        }  
       xhttp.onreadystatechange = function() {  
         if (this.readyState == 4 && this.status == 200){  
         }  
       };  
      xhttp.open("GET", "index.html", true);  
      xhttp.send();  
     }  
   </script>  
 <?php  
 if(isset($_POST['daftar'])){  
     $nama = $_POST['nama'];  
     $alamat = $_POST['alamat'];  
     $jk = $_POST['jenis_kelamin'];  
     $agama = $_POST['agama'];  
     $sekolah_asal = $_POST['sekolah_asal'];  
     $sql = "INSERT INTO calon_siswa (name, alamat, jenis_kelamin, agama,sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah_asal')";  
     $query = mysqli_query($db, $sql);  
  if( $query ) {  
       header('Location:index.php');  
     } else {  
       echo "gagal daftar";  
     }  
 }   
 else {  
   die("Akses dilarang...");  
 }  
 ?>


Berikut saya sertakan beberapa hasil tampilannya:
Tampilan awal

Tampilan list siswa

Tampilan pendaftaran siswa

Tampilan edit data siswa


Sekian terima kasih :))
Labels:

Comments

Post a Comment

Popular posts from this blog

MPPL 9 - Manajemen Biaya

Kelas : MPPL C Jeremy Vijay - 05111740000062 Raja Permata Boy - 05111740000070 Bobbi Aditya - 05111740000099 Samuel Marcellinus - 05111740000134 Bastian Farandy - 05111740000190 Link Spreadsheet : SpreadSheet
Post a Comment
Read more

MPPL - Pengalaman proyek

Nama : Bobbi Aditya Kelas : MPPL-C NRP : 05111740000099 Berikut ini adalah proyek yang saya ketahui Nama Proyek :   Pembangunan Aplikasi MSO (Maintenance System Online) Berbasis Web Deskripsi : Aplikasi ini berguna untuk pemantauan alat-alat yang ada pada PT. Semen Indonesia - Gresik apabila terjadi kerusakan yang harus segera dilaporkan, atau terdapat jadwal pemeliharaan rutin. Lokasi : PT. Semen Indonesia (Persero) Tbk. - Gresik Jl. Veteran, Gresik Jawa Timur, 61122 Waktu Proyek: 02 - 31 Januari 2019 Tim yang terlibat: Almas Aqmarina 05111640000171 Daniel Kurniawan 0511164000081 Produk yang dihasilkan: Sebuah aplikasi yang berada di dalam server Semen Indonesia yang berguna untuk melakukan pemantuan terhadap alat-alat yang ada pada PT. Semen Indonesia. Untuk addressnya tidak bisa diakses dari luar jaringan PT. Semen Indonesia. Fitur: • Tabel Laporan Harian • Pengelolaan Laporan Harian (tambah, ubah, hapus) • Unduh dala
Post a Comment
Read more