Senin, 26 November 2018

Desain WEB Menggunakan Bootstrap

Nama : Hafidz Firman Asqalany
NRP   : 05111740000195
Kelas : PWEB-C

1. Tampilan Awal


2. Tampilan setelah klik menu List Siswa


3. Tampilan setelah klik menu Pendaftaran Siswa



Source Code :

1. 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());  
 }  
 ?>  

2. index.php

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Pendaftaran Siswa Baru | 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>  
 <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>  
 <style type="text/css">  
   body{ background-image: url('index.JPG');  
             }  
   </style>  
 <body  
 style="text-align: center;">  
   <header>  
     <h3>Pendaftaran Siswa Baru</h3>  
     <h1>SMK Coding</h1>  
   </header>  
   <h4>Menu</h4>  
   <p><button type="button" onclick="showsiswa()">List Siswa</button></p>    
     <p><button type="button" onclick="daftar()">Pendaftaran Siswa</button></p>    
     </div>    
     <div id="demo">    
     </div>    
   </body>  
 </html>  

3. list-siswa.php

 <?php include("config.php"); ?>    
  <!DOCTYPE html>    
  <html>    
  <head>    
   <title>Pendaftaran Siswa Baru || SMA SUKA-ONAR</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>DAFTAR PENDAFTAR</h3>    
   </header>    
   <br>   
   <div class="table">  
   <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['nama']."</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>    

4. form-daftar.php

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Formulir Pendaftaran Siswa Baru | 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>  
     <h3>Formulir Pendaftaran Siswa Baru</h3>  
   </header>  
   <form action="proses-pendaftaran.php" method="POST">  
     <fieldset>  
     <p>  
       <label for="nama">Nama: </label>  
       <input type="text" name="nama" placeholder="nama lengkap" />  
     </p>  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea name="alamat"></textarea>  
     </p>  
     <p>  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <label><input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>  
       <label><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label>  
     </p>  
     <p>  
       <label for="agama">Agama: </label>  
       <select name="agama">  
         <option>Islam</option>  
         <option>Kristen</option>  
         <option>Hindu</option>  
         <option>Budha</option>  
         <option>Atheis</option>  
       </select>  
     </p>  
     <p>  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input type="text" name="sekolah_asal" placeholder="nama sekolah" />  
     </p>  
     <p>  
       <input type="submit" value="Daftar" name="daftar" />  
     </p>  
     </fieldset>  
   </form>  
   </body>  
 </html>  

5. 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 >  
   <header>  
     <h3>Formulir Edit Siswa</h3>  
           <table class="table table-bordered table-striped">  
   </header>  
   <form action="proses-edit.php" method="POST">  
     <fieldset>  
       <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />  
     <p>  
       <label for="nama">Nama: </label>  
       <input type="text" name="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama'] ?>" />  
     </p>  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea name="alamat"><?php echo $siswa['alamat'] ?></textarea>  
     </p>  
     <p>  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <?php $jk = $siswa['jenis_kelamin']; ?>  
       <label><input type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>  
       <label><input type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>  
     </p>  
     <p>  
       <label for="agama">Agama: </label>  
       <?php $agama = $siswa['agama']; ?>  
       <select 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>  
     </p>  
     <p>  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input type="text" name="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />  
     </p>  
     <p>  
       <input type="submit" value="Simpan" name="simpan" />  
     </p>  
     </fieldset>  
   </form>  
   </body>  
 </html>  

6. 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: list-siswa.php');  
   } else {  
     die("gagal menghapus...");  
   }  
 } else {  
   die("akses dilarang...");  
 }  
 ?>  

7. 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'];  
   $nama = $_POST['nama'];  
   $alamat = $_POST['alamat'];  
   $jk = $_POST['jenis_kelamin'];  
   $agama = $_POST['agama'];  
   $sekolah = $_POST['sekolah_asal'];  
   // buat query update  
   $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);  
   // apakah query update berhasil?  
   if( $query ) {  
     // kalau berhasil alihkan ke halaman list-siswa.php  
     header('Location: list-siswa.php');  
   } else {  
     // kalau gagal tampilkan pesan  
     die("Gagal menyimpan perubahan...");  
   }  
 } else {  
   die("Akses dilarang...");  
 }  
 ?>  

8. 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  
 // cek apakah tombol daftar sudah diklik atau blum?  
 if(isset($_POST['daftar'])){  
   // ambil data dari formulir  
   $nama = $_POST['nama'];  
   $alamat = $_POST['alamat'];  
   $jk = $_POST['jenis_kelamin'];  
   $agama = $_POST['agama'];  
   $sekolah = $_POST['sekolah_asal'];  
   // buat query  
   $sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah asal')";  
   $query = mysqli_query($db, $sql);  
   // apakah query simpan berhasil?  
   if( $query ) {  
     // kalau berhasil alihkan ke halaman index.php dengan status=sukses  
     header('Location: index.php');  
   } else {  
     // kalau gagal alihkan ke halaman indek.php dengan status=gagal  
     echo('gagal daftar');  
   }  
 } else {  
   die("Akses dilarang...");  
 }  
 ?>  


Tidak ada komentar:

Posting Komentar