Skip to main content

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

Comments

Post a Comment

Popular posts from this blog

PWEB CURRICULUM VITAE

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <style type="text/css"> body, html{ height: 100%; margin: 0; } .profil{ border-radius: 50%; } table{ border-spacing: 0; } p{ font-family: TW Cen MT; } img.a{ vertical-align: text-bottom; } img.b{ vertical-align: text-top; } .judul{ font-size: 20px; color: white; } .tulis{ font-size: 15px; color: white; } </style> <title>My Personal Blog</title> </head> <body background="img/Picture1.jpg" style="background-size:cover;"> <br><br><br><br><br> <table width="55%" align="center" style="vertical-align: middle"> <tr> <td
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

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