Pendaftaran Siswa Ditambah dengan AJAX?!

-
Dalam database pendaftaran siswa, minggu ini ditambahkan dengan AJAX (Asynchronous Javascript and XML). Pada halaman awal, terdapat 2 menu yaitu List Siswa dan Pendaftaran Siswa.

Tampilan


 


Source Code

config.html

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

index.html

 <!DOCTYPE html>  
 <html>  
 <head>  
   <link rel="stylesheet" type="text/css" href="siswa.css">   
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">   
   <script>   
     function loadsiswa() {   
       var xhttp;   
       if (window.XMLHttpRequest) {   
         xhttp = new XMLHttpRequest();   
       }    
       else {   
         xhttp = new ActiveXObject("Microsoft.XMLHTTP");   
       }   
       xhttp.onreadystatechange = function() {   
         if (this.readyState == 4 && this.status == 200) {   
           document.getElementById("tampil").innerHTML = this.responseText;   
         }   
       };   
       xhttp.open("GET", "list-siswa.php", true);   
       xhttp.send();   
     }   
     function daftarsiswa() {   
       var xhttp;   
       if (window.XMLHttpRequest) {   
         xhttp = new XMLHttpRequest();   
       }    
       else {   
         xhttp = new ActiveXObject("Microsoft.XMLHTTP");   
       }   
       xhttp.onreadystatechange = function() {   
         if (this.readyState == 4 && this.status == 200) {   
           document.getElementById("tampil").innerHTML = this.responseText;   
         }   
       };   
       xhttp.open("GET", "form-daftar.php", true);   
       xhttp.send();   
     }  
     function hapus(id) {   
       var xhttp;   
       if (window.XMLHttpRequest) {   
         xhttp = new XMLHttpRequest();   
       }    
       else {   
         xhttp = new ActiveXObject("Microsoft.XMLHTTP");   
       }   
       xhttp.onreadystatechange = function() {   
         if (this.readyState == 4 && this.status == 200) {   
           alert(this.responseText);   
           loadsiswa();   
         }   
       };   
       xhttp.open("GET", "hapus.php?id=" + id, true);   
       xhttp.send();   
     }   
    </script>  
   <title>Pendaftaran Siswa Baru | SMK Coding</title>  
 </head>  
 <body style="text-align: center;">  
   <header>  
     <h3>Pendaftaran Siswa Baru</h3>  
     <h1>SMK Coding</h1>  
   </header>  
   <button type="button" onclick="loadsiswa()">List Siswa</button>  
   <button type="button" onclick="daftarsiswa()">Pendaftaran Siswa</button>  
   <div id="tampil"></div>  
   </body>  
 </html>

form-daftar.html

 <!DOCTYPE html>  
 <html>  
 <head>  
   <link rel="stylesheet" type="text/css" href="siswa.css">   
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">   
   <title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>  
   <script type="text/javascript">   
   function tambah() {   
     var nama = document.getElementById("nama").value;   
     var alamat = document.getElementById("alamat").value;   
     var jenis_kelamin;   
     if(document.getElementById("kel_l").checked) {   
       jenis_kelamin = "laki-laki";   
     }   
     else { jenis_kelamin = "perempuan";}   
     var agama = document.getElementById("agama").value;   
     var sekolah_asal = document.getElementById("sekolah_asal").value;   
     var xhttp;   
     if (window.XMLHttpRequest) {   
       xhttp = new XMLHttpRequest();   
     }    
     else {   
       xhttp = new ActiveXObject("Microsoft.XMLHTTP");   
     }   
     xhttp.onreadystatechange = function() {   
     if (this.readyState == 4 && this.status == 200)    
     {   
       alert('Pendaftaran berhasil');    
       loadsiswa();    
     }   
     };   
     xhttp.open("GET", "proses-pendaftaran.php?nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + "sekolah_asal", true);   
     xhttp.send();   
   }   
   </script>    
 </head>  
 <body>  
   <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" id="nama" placeholder="Nama Lengkap" />  
     </p>  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea name="alamat" id="alamat"></textarea>  
     </p>  
     <p>  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <label><input type="radio" name="jenis_kelamin" id="jkel_l" value="laki-laki"> Laki-laki</label>  
       <label><input type="radio" name="jenis_kelamin" id="jkel_p" value="perempuan"> Perempuan</label>  
     </p>  
     <p>  
       <label for="agama">Agama: </label>  
       <select name="agama" id="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" id="sekolah_asal" placeholder="nama sekolah" />  
     </p>  
     <p>  
       <input type="submit" value="Daftar" name="daftar" onclick="tambah()" />  
     </p>  
     </fieldset>  
   </form>  
   </body>  
 </html>

form-edit.html

 <?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);  
 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="siswa.css">   
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">   
   <script type="text/javascript">   
     function edit(){   
     var nama = document.getElementById("nama").value;   
     var alamat = document.getElementById("alamat").value;   
     var jenis_kelamin;   
     if(document.getElementById("jkel_l").checked)   
     {   
       jenis_kelamin = "laki-laki";   
     }   
     else { jenis_kelamin = "perempuan";}   
     var agama = document.getElementById("agama").value;   
     var sekolah_asal = document.getElementById("sekolah_asal").value;   
     var xhttp;   
     if (window.XMLHttpRequest) {   
       xhttp = new XMLHttpRequest();   
     }    
     else {   
       xhttp = new ActiveXObject("Microsoft.XMLHTTP");   
     }   
     xhttp.onreadystatechange = function() {   
     if (this.readyState == 4 && this.status == 200)    
     {   
       alert('Edit Berhasil.');   
       loadsiswa();   
     }   
     };   
     xhttp.open("GET", "proses-edit.php?id=" + <?php echo $id; ?> + "&nama=" + nama + "&alamat=" + alamat + "&jenis_kelamin=" + jenis_kelamin + "&agama=" + agama + "&sekolah_asal=" + "sekolah_asal", true);   
     xhttp.send();   
   }   
   </script>    
 </head>  
 <body>  
   <header>  
     <h3>Formulir Edit Siswa</h3>  
   </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" id="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama'] ?>" />  
     </p>  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea name="alamat" id="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" id="jkel_l" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>  
       <label><input type="radio" name="jenis_kelamin" id="jkel_p" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>  
     </p>  
     <p>  
       <label for="agama">Agama: </label>  
       <?php $agama = $siswa['agama']; ?>  
       <select name="agama" id="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" id="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />  
     </p>  
     <p>  
       <input type="submit" value="Simpan" name="simpan" onclick="edit()" />  
     </p>  
     </fieldset>  
   </form>  
   </body>  
 </html>

list-siswa.html

 <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Pendaftaran Siswa Baru | SMK Coding</title>  
   <link rel="stylesheet" type="text/css" href="siswa.css">   
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">   
 </head>  
 <body>  
   <header>  
     <h3>Siswa yang sudah mendaftar</h3>  
   </header>  
   <br>    
   <table border="1" align="center">    
   <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);    
     $no = 0;   
     while($siswa = mysqli_fetch_array($query)){    
       echo "<tr>";    
       $no++;   
       echo "<td>".$no."</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=hapus('".$siswa['id']."') value='Hapus'>";   
       echo "</td>";    
       echo "</tr>";    
     }    
   ?>    
   </tbody>  
   </table>  
   <p> Total: <?php echo mysqli_num_rows($query) ?></p>  
   <div id="tampil"></div>  
   </body>  
 </html>

hapus.php

 <?php  
 include("config.php");  
 if( isset($_GET['id']) ){  
   $id = $_GET['id'];  
   $sql = "DELETE FROM calon_siswa WHERE id=$id";  
   $query = mysqli_query($db, $sql);  
   if( $query ){  
     echo "Data Mahasiswa berhasil dihapus";  
   } else {  
     die("Gagal dihapus.");  
   }  
 } else {  
   die("Akses dilarang!");  
 }  
 ?>

proses-edit.php

 <?php  
 include("config.php");  
 if(isset($_POST['simpan'])){  
   $id = $_POST['id'];  
   $nama = $_POST['nama'];  
   $alamat = $_POST['alamat'];  
   $jk = $_POST['jenis_kelamin'];  
   $agama = $_POST['agama'];  
   $sekolah = $_POST['sekolah_asal'];  
   $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);  
   if( $query ) {  
     header('Location: index.html');  
   } else {  
     die("Gagal menyimpan perubahan.");  
   }  
 } else {  
   die("Akses dilarang!");  
 }  
 ?>

proses-pendaftaran.php

 <?php  
 include("config.php");  
 if(isset($_POST['daftar'])){  
   $nama = $_POST['nama'];  
   $alamat = $_POST['alamat'];  
   $jk = $_POST['jenis_kelamin'];  
   $agama = $_POST['agama'];  
   $sekolah = $_POST['sekolah_asal'];  
   $sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";  
   $query = mysqli_query($db, $sql);  
   if( $query ) {  
     header('Location: index.php');  
   } else {  
     echo "Pendaftaran siswa gagal.";  
   }  
 } else {  
   die("Akses dilarang!");  
 }  
 ?>

proses-hapus.php

 <?php include("config.php"); ?>  
 <?php   
      mysqli_query($db, "delete from calon_siswa where id = ".$_GET['id']);   
 ?>

siswa.css

  @import url('https://fonts.googleapis.com/css?family=PT+Serif');   
  @import url('https://fonts.googleapis.com/css?family=Hind+Siliguri');  
  body {   
    background-color: ghostwhite;   
    margin: auto;   
  }   
  * {   
    font-family: 'PT Serif', serif;   
  }   
  h1, h3{   
    text-align: center;   
    color: lightsalmon;   
    text-shadow: 1px 1px 0px #DCDCDC;   
    margin: 50px 0px 0px 0px;   
    font-family: 'Hind Siliguri', sans-serif;   
  }   
  a:link {   
    text-decoration: none;   
  }   
  table {   
  border: 2px solid #ccc;   
  border-collapse: collapse;   
  width: 100%;   
  }   
  table tr {   
  border: 1px solid #ddd;   
  padding: .35em;   
  }   
  table tr:nth-child(even) {   
  background: lightcoral;    
  }   
  table th, table td {   
  padding: .625em;   
  text-align: left;   
  }   
  table th {   
  background: indianred;   
  color: #fff;   
  font-size: .85em;   
  letter-spacing: .1em;   
  text-transform: uppercase;   
  }   
  table td {   
  white-space: nowrap;   
  overflow: hidden;   
  text-overflow: ellipsis;   
  }

Komentar

Posting Komentar

Postingan populer dari blog ini

Halaman Berita? HTML & CSS!

-
Gambar
Minggu ini saya belajar HTML dan CSS. Saya juga mendapat tugas untuk membuat sebuah halaman berita, contohnya website TECHINASIA . Berikut adalah tampilan dari website tersebut. Berikut adalah tampilan dari halaman berita yang saya buat.   Header-Content Content-Footer Source Code HTML <!DOCTYPE html> <html> <head> <title>Cafe Corner</title> <link rel="stylesheet" type="text/css" href="custom.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="header"> <h2>CAFE CORNER</h2> </div> <div class="menu"> <ul> <li>
Baca selengkapnya

Tampilan Baru Pendaftaran Siswa dengan Bootstrap!

-
Gambar
Postingan kali ini hanyalah sebuah perubahan tampilan pada Pendaftaran Siswa lalu, karena tugas kali ini adalah tentang BOOTSTRAP. Saya menambahkan beberapa style yang sekiranya memperindah tampilan Pendaftaran Siswa berikut. Tampilan  Tampilan Awal (index.html) Tampilan list-siswa.php Tampilan form-daftar.php   Tampilan form-edit.php Source Code yang diubah index.html <!DOCTYPE html> <html> <head> <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> <style type="text/css"> h1{ text-align: center; color: midnightblue; } h3{ text-align: center; color: cornflowerblue; } h4{ text-ali
Baca selengkapnya

Rumah Sederhana dengan BlueJ!

-
Gambar
Pada minggu ini, saya mendapatkan tugas untuk membuat rumahmenggunakan BlueJ . Setelah berpikir cukup lama, saya akhirnya membuat rumah sederhana ini dengan beberapa pohon dan awan untuk melengkapi project minggu ini. Dalam pembuatannya, saya membaginya menjadi 6 Class , antara lain: Picture Canvas Square Triangle Circle Rectangle Dengan class-class tersebut, saya dapat menghasilkan gambar rumah berbentuk dua dimensi. Class Canvas berisi fungsi-fungsi yang berguna untuk merangkai bentuk gambar rumah tersebut, sedangkan Class Picture berguna untuk merangai bentuk gambarnya. Source Code Picture public class Picture { private Triangle roof; private Recta wall,door,tree1,tree2; private Square window1,window2,window3,window4; private Circle knob,sun; private Circle leaf1,leaf2,leaf3,leaf4,leaf5,leaf6; private Circle cl1,cl2,cl3,cl4,cl5,cl6; public Picture() { drawRoof(); drawWall(); drawWindow()
Baca selengkapnya