Senin, 12 November 2018

PWEB C- PENDAFTARAAN SISWA-AJAX

Nama: Ayu Mutiara Sari
NRP: 05111740000149
Kelas: PWEB C



1. Index.php

 <!DOCTYPE html>   
  <html>   
  <head>   
   <script>    
    function listsiswa() {    
     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("awal").innerHTML = this.responseText;    
      }    
     };    
     xhttp.open("GET", "list-siswa.php", true);    
     xhttp.send();    
    }    
    function daftar() {    
     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("awal").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);    
       listsiswa();    
      }    
     };    
     xhttp.open("GET", "hapus.php?id=" + id, true);    
     xhttp.send();    
    }    
   </script>   
   <title>Pendaftaran Siswa Baru | SMK Coding</title>   
  </head>   
  <body>   
   <header>   
    <h3>Pendaftaran Siswa Baru</h3>   
    <h1>SMK Coding</h1>   
   </header>   
   <p><button type="button" onclick="listsiswa()">List Siswa</button></p>   
   <p><button type="button" onclick="daftar()">Pendaftaran Siswa</button> </p>  
   <div id="awal"></div>   
   </body>   
  </html>   

2.config.php
 <?php  
 $server = "localhost";  
 $user = "root";  
 $password = "";  
 $nama_database = "pendaftaran_siswaajax";  
 $db = mysqli_connect($server, $user, $password , $nama_database);  
 if( !$db ){  
   die("Gagal terhubung dengan database: " . mysqli_connect_error());  
 }  
 ?>  


3.list-siswa.php

 <?php include("config.php"); ?>   
  <!DOCTYPE html>   
  <html>   
  <head>   
   <title>Pendaftaran Siswa Baru | SMK Coding</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 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="awal"></div>   
   </body>   
  </html>  


4.form-daftar.php
 <!DOCTYPE html>   
  <html>   
  <head>   
   <script type="text/javascript">    
   function insert() {    
    var nama = document.getElementById("nama").value;    
    var alamat = document.getElementById("alamat").value;    
    var jenis_kelamin;    
    if(document.getElementById("jk_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');    
     listsiswa();    
    }    
    };    
    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="jk_l" value="laki-laki"> Laki-laki</label>   
     <label><input type="radio" name="jenis_kelamin" id="jk_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>Katolik</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="insert()" />   
    </p>   
    </fieldset>   
   </form>   
   </body>   
  </html>   



5.form-edit
 <?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>   
   <script type="text/javascript">    
    function edit(){    
    var nama = document.getElementById("nama").value;    
    var alamat = document.getElementById("alamat").value;    
    var jenis_kelamin;    
    if(document.getElementById("jk_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.');    
     listsiswa();    
    }    
    };    
    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="jk_l" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>   
     <label><input type="radio" name="jenis_kelamin" id="jk_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 == 'Katolik') ? "selected": "" ?>>Katolik</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>   


6.hapus.php
 <pre style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYKjT29wfCoTAGJN4b5jN44ZyxmvvVJme7q1j3WSObeVo_5hf1Nza6vBGxYh1xwpLKrwwMd1kxOEmLjEZeZ0Xe-fRtacCe1M-n-Ey11Ao_y5IneDYPIXOdfYg2JbmSfFOY6HnN1hrX5hK/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> &lt;?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";    
    }     
   }    
  ?&gt;    
 </code></pre>  


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


8.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!");   
  }   
  ?>   


Hasil:






0 komentar:

Posting Komentar