Form Pendaftaran Mahasiswa Baru dengan Ajax

Nama: Ahmad Syauqi
NRP: 05111740000093

Berikut saya sertakan source code dengan screenshot hasilnya.

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

index.php

 <!DOCTYPE html>   
 <html>   
 <head>   
   <title>Pendaftaran siswa baru|| SMA PetaniCoding</title>   
   <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>   
   <header>   
     <h3>Pendaftaran siswa baru</h3>   
     <h1>SMA PetaniCoding</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 id="demo"></div>   
 </body>  
 </html>

form-daftar.php

 <!DOCTYPE html>   
 <html>   
 <head>   
      <title>Formulir Pendaftaran Siswa Baru ||SMA PetaniCoding</title>   
 </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" 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>

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 pendaftaran_siswa (nama, 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...");   
 }   
 ?>

form-edit.php

 <?php   
 include("config.php");  
 if( !isset($_GET['id']) ){   
      header('Location: list-siswa.php');   
 }   
 $id = $_GET['id'];   
 $sql = "SELECT * FROM pendaftaran_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>   
 </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" 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>

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 pendaftaran_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.php');   
        } else {   
         die("Gagal menyimpan perubahan...");   
        }   
 } else {   
       die("Akses dilarang...");   
 }  
 ?>

hapus.php

 <?php   
 include("config.php");   
 if( isset($_GET['id']) ){   
      $id = $_GET['id'];   
        $sql = "DELETE FROM pendaftaran_siswa WHERE id=$id";   
        $query = mysqli_query($db, $sql);   
        if( $query ){   
         header('Location:index.php');   
        } else {   
         die("gagal menghapus...");   
        }   
 } else {   
        die("akses dilarang...");   
 }   
 ?>

list-siswa.php

 <?php include("config.php"); ?>   
 <!DOCTYPE html>   
 <html>   
 <head>   
   <title>Pendaftaran Siswa Baru || SMA PetaniCoding</title>   
 </head>   
 <body>   
   <header>   
     <h3>Siswa yang sudah mendaftar</h3>   
   </header>   
   <br>   
   <table border="1">   
     <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 pendaftaran_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>

Berikut adalah hasil screenshotnya

Tampilan Awal