Skip to main content

AJAX ft Bootstrap

Tugas kali ini kami menambahkan Bootstrap pada tugas kami yang sebelumnya, yaitu membuat website dengan ajax. Tujuan menggunakan Bootstrap adalah agar website yang dibuat memiliki tampilan yang lebih bagus dan variatif

Berikut hasil dari web yang saya buat



Tampilan List Siswa


Tampilan Pendaftaran Siswa


Tampilan setelah melukan daftar


Tampilan sesudah record dihapus


Tampilan Form Edit


Tampilan setelah melakukan Edit



Source Code

config.php
 <?php  
   $db = mysqli_connect('localhost', 'root', '','pendaftaran_siswa');  
   if(!$db ){  
     die("Gagal terhubung dengan database: " . mysqli_connect_error());  
   }  
 ?>

index.php
 <!DOCTYPE html>  
 <html>  
 <head>  
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">   
   <style type="text/css">  
    body{  
      background-image: url("download.jpg");  
      background-repeat: no-repeat;  
      background-size: cover;  
    }  
   </style>  
 </head>  
 <body >  
   <div class="container-fluid">  
     <header>  
     <h3 align="center">E-Report</h3>  
     </header>  
     <hr>  
     <h4 align="center">Menu</h4>  
     <p align="center"><button class="btn btn-primary" type="button" onclick="showsiswa()">Student List</button></p>  
     <p align="center"><button class="btn btn-primary" onclick="daftar()">Pendaftaran Siswa</button></p>  
   </div>  
   <div class="container align-middle" id="demo"></div>  
 </body>  
 </html>  
 <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 del(id)   
     {  
       if(window.XMLHttpRequest){   
        xmlhttp = new XMLHttpRequest();   
       }  
       xmlhttp.onreadystatechange=function(){  
        if(this.readyState==4 && this.status==200)  
        {  
          alert(this.responseText);   
          showsiswa();   
        }  
       }  
       xmlhttp.open("GET","hapus.php?id=" + id, true);  
       xmlhttp.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 insert(){  
      var nama = document.getElementById("nama").value;  
      var alamat = document.getElementById("alamat").value;  
      var jenis_kelamin;  
      if(document.getElementById("jenisL").checked) {  
       jenis_kelamin = "Laki-laki";  
      }  
      else {  
       jenis_kelamin = "Perempuan";  
      }  
      var agama = document.getElementById("agama").value;  
      var sekolah_asal = document.getElementById("sekolah_asal").value;  
      if(window.XMLHttpRequest) {  
       xmlhttp = new XMLHttpRequest();  
      }  
      xmlhttp.onreadystatechange=function(){  
       if(this.readyState==4 && this.status==200){  
        alert(this.responseText);  
        if(this.responseText == "Pendaftaran Siswa Berhasil") {  
         showsiswa();  
        }  
        else {  
         alert('Pendaftaran Siswa Gagal');   
        }  
       }  
      }  
      xmlhttp.open("GET","proses-pendaftaran.php?nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + sekolah_asal, true);  
      xmlhttp.send();  
     }  
   </script>

list-siswa.php
 <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
 </head>  
 <body>  
   <div class="container-fluid">  
     <header>  
       <h3>List Siswa</h3>  
     </header>  
       <table class="table table-bordered border="1px">  
         <tr>  
           <th>No</th>  
           <th>Nama</th>  
           <th>Alamat</th>  
           <th>Jenis Kelamin</th>  
           <th>Agama</th>  
           <th>Sekolah Asal</th>  
           <th></th>  
         </tr>  
       <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>";  
           echo "<td>";  
           echo "<button><a href='form-edit.php?id=".$siswa['ID']."'>Edit</a></button> | ";  
           echo "<input type='button' onclick=del('".$siswa['ID']."') value='Hapus'>";  
           echo "</td>";  
           echo "</tr>";  
         }  
        ?>   
       </tbody>   
       </table>  
     <p>Total Siswa: <?php echo mysqli_num_rows($query) ?></p>  
     <div id="demo"></div>  
   </div>  
 </body>  
 </html>

form-daftar.php
 <!DOCTYPE html>  
 <html>  
 <head>  
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">  
   <style type="text/css">  
     .iconform {  
       float: left;  
       text-align: center;  
       width: 35px;  
       height: 42px;  
       line-height: 40px;  
     }  
   </style>  
 </head>  
 <body>  
   <div class="container m-5">  
       <header>  
          <h3>Formulir Pendaftaran Siswa Baru</h3>  
       </header>  
       <form class="form-horizontal" action="proses-pendaftaran.php" >  
         <div class="form-row">    
           <div class="form-group col-md-5">  
             <label class="control-label col-xs-3" for="nama">Nama: </label>  
             <input class="form-control" name="name" id="nama" type="text" placeholder="Nama Lengkap" />  
           </div>   
         </div>  
         <div class="form-row">     
           <div class="form-group col-md-5">  
             <label class="control-label" for="alamat">Alamat: </label>  
             <input class="form-control" name="alamat" id="alamat" placeholder="Alamat"></input>  
           </div>  
         </div>  
         <div class="form-group">  
           <div class="form-check form-check-inline">  
             <input class="form-check-input" type="radio" name="jenis_kelamin" id="jenisL" type="radio" value="Laki-laki">  
             <label class="iconform"><i class="fas fa-male fa-2x"></i></label>  
           </div>  
           <div class="form-check form-check-inline">  
             <input class="form-check-input" type="radio" name="jenis_kelamin" id="jenisP" type="radio" value="Perempuan">  
             <label class="iconform" ><i class="fas fa-female fa-2x"></i></label>  
           </div>   
         </div>   
         <div class="form-group">  
           <label for="agama">Agama: </label>  
             <select class="form-control col-md-2" name="agama" id="agama" >  
             <option>Islam</option>  
             <option>Kristen</option>  
             <option>Hindu</option>  
             <option>Budha</option>  
             <option>Atheis</option>  
             </select>  
         </div>    
         <div class="form-row">  
           <div class="form-group col-md-5">  
             <label for="sekolah_asal">Sekolah Asal: </label>  
             <input class="form-control" name="sekolah_asal" id="sekolah_asal" type="text" placeholder="Nama Sekolah" />  
           </div>  
         </div>  
         <div class="form-group">  
           <input class="btn btn-primary" type="button" value="Daftar" name="daftar" onclick="insert()" />  
         </div>   
       </form>  
   </div>  
 </body>  
 </html>

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);  
 ?>  
 <!DOCTYPE html>  
 <html>  
 <head>   
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">  
   <style type="text/css">  
    body{  
      background-image: url("download.jpg");  
      background-repeat: no-repeat;  
      background-size: cover;  
    }  
   </style>  
 </head>  
 <body>  
   <div class="container"><br>  
   <h2>Formulit Edit Siswa</h2>  
   <form class="form-horizontal" action="proses-edit.php">  
     <fieldset>  
       <input type="hidden" name="id" value="<?php echo $siswa['ID'] ?>" />  
     <div class="form-row">  
       <div class="form group col-md-5">  
         <label class="control-label" for="nama">Nama: </label>  
         <input class="form-control" type="text" id="nama" name="nama" placeholder="Nama Lengkap" value="<?php echo $siswa['nama'] ?>">  
       </div>  
       <div class="col-md-5">  
         <label class="control-label" for="alamat">Alamat: </label>  
         <input class="form-control" id="alamat" name="alamat" value="<?php echo $siswa['alamat'] ?>"></input>  
       </div>  
     </div><br>  
     <div class="form-group">  
       <div class="form-check form-check-inline">  
         <input class="form-check-input" type="radio" name="jenis_kelamin" id="jenisL" type="radio" value="<?php echo ($siswa['jenis_kelamin'] == 'Laki-laki') ? "checked": "" ?>">  
         <label class="iconform"><i class="fas fa-male fa-2x"></i></label>  
       </div>  
       <div class="form-check form-check-inline">  
         <input class="form-check-input" type="radio" name="jenis_kelamin" id="jenisP" type="radio" value="<?php echo ($siswa['jenis_kelamin'] == 'Perempuan') ? "checked": "" ?>">  
         <label class="iconform" ><i class="fas fa-female fa-2x"></i></label>  
       </div>   
     </div>   
     <div class="form-group">  
       <label style="margin-right: 1%" for="agama">Agama: </label>  
         <select class="form-control col-md-2" name="agama" id="agama" >  
           <option>Islam</option>  
           <option>Kristen</option>  
           <option>Hindu</option>  
           <option>Budha</option>  
           <option>Atheis</option>  
         </select>  
     </div>   
     <div class="form-row">  
       <div class="col-md-5">  
          <label for="sekolah_asal">Sekolah Asal: </label>  
         <input class="form-control" id="sekolah_asal" type="text" name="sekolah_asal" placeholder="Sekolah Asal" value="<?php echo $siswa['sekolah_asal'] ?>" />  
       </div>  
     </div>  
     <br>  
     <div class="form-group">  
       <input class="btn btn-primary" type="button" value="Simpan" name="simpan"   
       onclick="update()" />  
     </div>  
     </fieldset>  
   </form>  
   </div>  
 </body>  
 </html>  
 <script type="text/javascript">  
     function update(){  
       var nama = document.getElementById("nama").value;  
       var alamat = document.getElementById("alamat").value;  
       var jenis_kelamin;  
       if(document.getElementById("jenisL").checked){  
         jenis_kelamin = "Laki-laki";  
       }  
       else{  
         jenis_kelamin = "Perempuan";  
       }  
       var agama = document.getElementById("agama").value;  
       var sekolah_asal = document.getElementById("sekolah_asal").value;  
       if(window.XMLHttpRequest){  
         xmlhttp = new XMLHttpRequest();  
       }  
       xmlhttp.onreadystatechange=function(){  
         if(this.readyState==4 && this.status==200){  
           alert(this.responseText);  
           if(this.responseText == "Proses Edit Berhasil") {  
             window.location.replace("index.php");  
           }  
           else {  
             alert('GAGAL');   
           }  
         }  
       }  
       xmlhttp.open("GET","proses-edit.php?id=" + <?php echo $id;?> + "&nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + sekolah_asal, true);  
       xmlhttp.send();  
     }  
 </script>

proses-pendaftaran.php
 <?php include("config.php");  
     $nama = $_GET['nama'];  
     $alamat = $_GET['alamat'];  
     $jk = $_GET['jenis_kelamin'];  
     $agama = $_GET['agama'];  
     $sekolah_asal = $_GET['sekolah_asal'];  
     $sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama,sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah_asal')";  
     $query = mysqli_query($db, $sql);  
     if( $query ) {  
       echo "Pendaftaran Siswa Berhasil";  
     } else {  
       echo "GAGAL";  
     }  
 ?>

proses-edit.php
 <?php  
 include("config.php");  
   $id = $_GET['id'];  
   $nama = $_GET['nama'];  
   $alamat = $_GET['alamat'];  
   $jk = $_GET['jenis_kelamin'];  
   $agama = $_GET['agama'];  
   $sekolah_asal = $_GET['sekolah_asal'];  
   $sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah_asal' WHERE ID=$id";  
   $query = mysqli_query($db, $sql);  
   if( $query ) {  
     echo "Proses Edit Berhasil";  
   } else {  
     die("Gagal menyimpan perubahan...");  
   }  
 ?>

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 ){  
          echo "Hapus Data Berhasil";  
        } else {  
          echo "GAGAL";  
        }       
      }   
 ?>

Nama : Reza Adipatria Maranatha

NRP   : 05111740000186

Kelas  : PWEB C


Comments

Post a Comment

Popular posts from this blog

SISTEM PENGGAJIAN

-- 1 -- Penerbitan adalah industri yang berkonsentrasi memproduksi dan memperbanyak sebuah literatur dan informasi atau sebuah aktivitas membuat informasi yang dapat dinikmati publik. Percetakan adalah sebuah proses industri untuk memproduksi secara massal tulisan dan gambar, terutama dengan tinta di atas kertas menggunakan sebuah mesin cetak. -- 2 -- Pada Sistem pegajian dan pengupahan yang ada masalah-masalah yang dapat terjadi adalah karyawan yang melakukan kecurangan pada sistem yang ada. kecurangan ini dapat dilakukan dengan masukan nama-nama karyawan fiktif dalam daftar gaji dan upah atau membayar lebih kepada karyawan yang ada dalam daftar gaji dan upah -- 3 -- Yang bisa ditingkatkan dari sistem penggajian yang ada ialah : memperketat sistem sehingga dapat mengurangi kecurangan-kecurangan yang dapat dilakukan karyawan, seperti sistem mengecek data yang ada di sistem dengan data pada kondisi sesungguhnya serta membuat seluruh dokumen ke dalam bentuk digital, sehingga ...
Post a Comment
Read more

Tugas Membuat Forms

Tugas kali ini saya membuat sebuah Form Registrasi untuk web berita saya untuk form yang saya buat, saya membuat nya dalam bentuk Modal, yaitu adalah pop-up jika tombol register di klik Berikut adalah hasil dari apa yang saya buat Ini adalah website berita saya Kemudian jika tombol register di klik akan muncul form pop-up Berikut adalah source code nya : HTML: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="inicss.css"/> </head> <body> <div class="header"> <h1>PIAL ROSE NEWS</h1> </div> <ul> <li><a class="active" href="#">News</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">...
Post a Comment
Read more

Form Tagihan Air PHP

Nama : Reza Adipatria Maranatha NRP : 05111740000186 Kelas : PWEB C Tugas kali ini saya membuat sebuah form tagihan air yang datanya kita olah dan tampilkan menggunakan PHP atau Hypertext Preprocessor. Berikut hasil dari web saya : Ini adalah tampilan depan form nya Ini merupakan Invoice apabila pelanggan telah melakukan submit form tersebut Source Code Index.php : <!DOCTYPE html> <html> <head> <title>Perusahaan Daerah Air Mandi</title> <link rel="stylesheet" href="test.css"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="leftcontainer"> ...
Post a Comment
Read more