AJAX, PHP, MYSQL

Tugas kali ini kami diminta untuk membuat database kemudian menggunakan AJAX(Asynchronous Javascript and XML ) untuk database, kami memakai yang telah kemarin dibuat yaitu database 'pendaftaran_siswa' kemudian menambahkan AJAX

Berikut hasil dari web yang saya buat

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" type="text/css" href="css.css">  
 </head>  
 <body>  
   <div>  
     <header>  
     <h3 align="center">E-Report</h3>  
   </header>  
   <h4 align="center">Menu</h4>  
   <p align="center"><button type="button" onclick="showsiswa()">Student List</button></p>  
   <p align="center"><button onclick="daftar()">Pendaftaran Siswa</button></p>  
   </div>  
   <div 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" type="text/css" href="css.css">  
 </head>  
 <body>  
   <header>  
     <h3>List Siswa</h3>  
   </header>  
     <table 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>";  
       }  
       ?>  
     </table>  
   <p>Total Siswa: <?php echo mysqli_num_rows($query) ?></p>  
   <div id="demo"></div>  
 </body>  
 </html>

form-daftar.php

 <!DOCTYPE html>  
 <html>  
 <head>  
   <link rel="stylesheet" type="text/css" href="css.css">  
 </head>  
 <body>  
      <header>  
           <h3>Formulir Pendaftaran Siswa Baru</h3>  
      </header>  
   <form action="proses-pendaftaran.php" >  
     <fieldset>  
     <p>  
       <label for="nama">Nama: </label>  
       <input name="name" id="nama" type="text" 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 name="jenis_kelamin" id="jenisL" type="radio" value="Pria"> Laki-laki</label>  
       <label><input name="jenis_kelamin" id="jenisP" type="radio" 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 name="sekolah_asal" id="sekolah_asal" type="text" placeholder="nama sekolah" />  
     </p>  
     <p>  
       <input type="button" value="Daftar" name="daftar" onclick="insert()" />  
     </p>  
     </fieldset>  
   </form>  
   </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" type="text/css" href="css.css">   
 </head>  
 <body>  
   <form action="proses-edit.php">  
     <fieldset>  
       <input type="hidden" name="id" value="<?php echo $siswa['ID'] ?>" />  
     <p>  
       <label for="nama">Nama: </label>  
       <input type="text" id="nama" name="nama" placeholder="Nama Lengkap" value="<?php echo $siswa['nama'] ?>" />  
     </p>  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea id="alamat" name="alamat"><?php echo $siswa['alamat'] ?></textarea>  
     </p>  
     <p>  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <?php $jk = $siswa['jenis_kelamin']; ?>  
       <label><input id="jenisL" type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>  
       <label><input id="jenisP" type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>  
     </p>  
     <p>  
       <label for="agama">Agama: </label>  
       <input id="agama" type="text" name="agama" placeholder="Agama" value="<?php echo $siswa['agama'] ?>" />  
     </p>  
     <p>  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input id="sekolah_asal" type="text" name="sekolah_asal" placeholder="Sekolah Asal" value="<?php echo $siswa['sekolah_asal'] ?>" />  
     </p>  
     <p>  
       <input type="button" value="Simpan" name="simpan"   
       onclick="update()" />  
     </p>  
     </fieldset>  
   </form>  
   </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";  
        }       
      }   
 ?>

css.css

 th,td{  
   padding: 15px;  
 }  
 table{  
   text-align: center;  
 }  
 body{  
   background-color: #ff9900;  
 }  
 a:link{  
      text-decoration: none;  
 }

Nama : Reza Adipatria Maranatha
NRP : 05111740000186
Kelas : PWEB C

PWEB

Search This Blog

AJAX, PHP, MYSQL

Comments

Post a Comment

Popular posts from this blog

Tugas Membuat Forms

HTML and CSS

Tugas Web Berita