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

SISTEM PENGGAJIAN

-- 1 -- Penerbitan adalah industri yang berkonsentrasi memproduksi dan memperbanyak sebuah literatur dan informasi atau sebuah aktivitas membuat informasi yang dapat dinikmati publik. Percetakan adalah sebuah proses industri untuk memproduksi secara massal tulisan dan gambar, terutama dengan tinta di atas kertas menggunakan sebuah mesin cetak. -- 2 -- Pada Sistem pegajian dan pengupahan yang ada masalah-masalah yang dapat terjadi adalah karyawan yang melakukan kecurangan pada sistem yang ada. kecurangan ini dapat dilakukan dengan masukan nama-nama karyawan fiktif dalam daftar gaji dan upah atau membayar lebih kepada karyawan yang ada dalam daftar gaji dan upah -- 3 -- Yang bisa ditingkatkan dari sistem penggajian yang ada ialah : memperketat sistem sehingga dapat mengurangi kecurangan-kecurangan yang dapat dilakukan karyawan, seperti sistem mengecek data yang ada di sistem dengan data pada kondisi sesungguhnya serta membuat seluruh dokumen ke dalam bentuk digital, sehingga ...
Post a Comment
Read more

Aplikasi Mobile Banking Penarikan Uang

Nama Anggota : Samuel Marcellinus 05111740000134 Reza Adipatria Maranatha 051111740000186 Bastian Farandy 05111740000190 Alfin Pradana 05111740000191 APSI C Aplikasi M-Banking Penarikan Uang  Pada Tugas ini, kami membuat sebuah aplikasi Mobile Banking menggunakan website "bubble.is". Disini kami membuat fitur Penarikan. Aplikasi dapat di akses di :  Apps Berikut hasil Tampilan Aplikasi Tampilan awal Registrasi untuk membuat akun Mobile-Banking Tampilan Login setelah membuat akun Kemudian kita isikan username dan password yang telah kita buat kemudian klik tombol Login, dan akan masuk ke Menu utama seperti dibawah Kemudian kita coba untuk masuk ke menu Penarikan Apabila kita tekan salah satu dari nominal di atas, akan digenerate kode untuk mengambil uang Transaksi Selesai
Post a Comment
Read more

SISTEM INFORMASI

Sistem Informasi  merupakan suatu sistem di dalam organisasi yang mempertemukan kebutuhan dalam pengelolaan transaksi, menjalankan operasi, dan kegiatan strategi lainnya yang bersifat manajerial serta mampu menyediakan informasi bagi pihak luar untuk laporan tertentu. Sistem Informasi sendiri memiliki beberapa fungsi, seperti: Memperbaiki produktivitas aplikasi pengembangan serta dalam pemeliharaan sebuah sistem Menjamin kualitas serta keterampilan dalam penggunaan Sistem Informasi Mengidentifikasi kebutuhan apa saja yang dapat mendukung sistem informasi Mengantisipasi serta memahami akan adanya konsekuensi secara ekonomi Menetapkan investasi yang akan diarahkan pada sistem informasi Mengembangkan proses perencanaan yang efektif Bagan Sistem Informasi Transaction Processing Systems Merupakan sebuah sistem pemrosesan informasi untuk bisnis transaksi yang melibatkan pengambilan, perubahan dan pengembalian dari seluruh transaksi data. Ciri khas dari sebuah TPS i...
Post a Comment
Read more