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

Menggunakan CodeIgniter!!

-
Gambar
Pada minggu ini, saya diberikan sebuah tuags untuk melanjutkan Tutorial menggunakan CodeIgniter pada website ini hingga mencapai tutorial ke-6. Berikut adalah tampilan setiap saya selesai mengikuti tutorialnya. Tutorial #3: Bootstrap pada CodeIgniter   Menambahkan template SBAdmin pada web local yang telah dibuat, yaitu tokobuah. Tutorial #4: Template Admin yang Efektif Penggunaan partials, dimana halaman ini dibagi menjadi bagian-bagian kecil. Partial yang dibuat antara lain:   head.php untuk meinyimpan isi dari tag <head> ;   navbar.php untuk menyimpan kode navbar;   sidebar.php untuk menyimpan kode menu bagian samping (sidebar) ;   breadcrumb.php untuk menyimpan kode link breadcrumb;   scrolltop.php untuk menyimpan kode tombol scrolltop;   footer.php untuk menyimpan kode footer;   modal.php untuk menyimpan kode modal;   js.php untuk meload javascript. Tutorial #5: Membuat Fitur CRUD   ...
Baca selengkapnya

Sistem Informasi Cinema 21 - APSI

-
Gambar
Sistem Informasi Aplikasi Cinema 21 atau M-Tix  Dalam pengembangan sebuah perusahaan selalu memerlukan 4 hal diatas yaitu Transaction Processing Systems, Management Information Systems, Decision Support Systems, dan Executive Information Systems. CINEMA 21 dibawah naungan PT. Nusantara Sejahtera Raya merupakan kelompok bioskop terbesar di Indonesia yang memulai kiprahnya di industri hiburan sejak tahun 1987. Lebih dari 30 tahun, CINEMA 21 berkomitmen untuk senantiasa memberikan pengalaman dan kenikmatan nonton terbaik untuk masyarakat Indonesia. Sampai dengan Agustus tahun lalu, CINEMA 21 memiliki total 1045 layar tersebar di 46 kota di 184 lokasi di seluruh Indonesia. Selain menyajikan film-film hasil karya anak bangsa, CINEMA 21 juga menayangkan film-film berkelas dunia.  CINEMA 21 terus mengikuti perkembangan teknologi dengan melengkapi fasilitas-fasilitasnya seperti 2D dan 3D. Di tahun 2012, CINEMA 21 telah menghadirkan pengalaman nonton dengan teknolo...
Baca selengkapnya