Skip to main content

PWEB-AJAX XML


Nama : Bobbi Adiyta
NRP : 05111740000099
KELAS : PWEB C

Saya membuat tugas pembuatan pendaftaran siswa menjadi xml, laman index.php sekarang bisa langsung mengakses:
  1. List Siswa (list siswa yang sudah mendaftar)
  2. Pendafataran siswa(formulir pendaftaran siswa)
Berikut adalah codingan yang saya gunakan, ada 8 file yang saya gunakan
  1. config.php
     <?php  
     $server = "localhost";  
     $user = "root";  
     $password = "";  
     $nama_database = "pendaftaran_siswa";  
     $db = mysqli_connect($server, $user, $password, $nama_database);  
     // echo "Berhasil bossku";  
     if( !$db ){  
       die("Gagal terhubung dengan database: " . mysqli_connect_error());  
     }  
     ?>  
    
  2. index.php
     <!DOCTYPE html>  
     <html>  
     <head>  
          <title>Pendaftaran siswa baru|| SMA PetaniCoding</title>  
          <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 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 edit() {  
           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-edit.php", true);  
          xhttp.send();  
         }  
       </script>  
     </head>  
     <body style="text-align: center;">  
               <header>  
                    <h3>Pendaftaran siswa baru</h3>  
                    <h1>SMA PetaniCoding</h1>  
               </header>  
               <h4>Menu</h4>  
                 <p align="center"><button type="button" onclick="showsiswa()">List Siswa</button></p>  
                 <p align="center"><button type="button" onclick="daftar()">Pendaftaran Siswa</button></p>  
                 </div>  
                 <div id="demo">  
                 </div>  
     </body>  
     </html>  
    
  3. form-daftar.php
     <!DOCTYPE html>  
     <html>  
     <head>  
          <title>Formulir Pendaftaran Siswa Baru ||SMA PetaniCoding</title>  
     </head>  
     <body style="text-align: center;">  
          <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" placeholder="nama lengkap" />  
         </p>  
         <p>  
           <label for="alamat">Alamat: </label>  
           <textarea name="alamat"></textarea>  
         </p>  
         <p>  
           <label for="jenis_kelamin">Jenis Kelamin: </label>  
           <label><input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>  
           <label><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label>  
         </p>  
         <p>  
           <label for="agama">Agama: </label>  
           <select name="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" placeholder="nama sekolah" />  
         </p>  
         <p>  
           <input type="submit" value="Daftar" name="daftar" />  
         </p>  
         </fieldset>  
       </form>  
     </body>  
     </html>  
    
  4. proses-pendaftaran.php
     <?php  
     include("config.php");  
     ?>  
     <script>  
         function showsiswa() {  
           if (window.XMLHttpRequest) {  
             xhttp = new XMLHttpRequest();  
            }  
           xhttp.onreadystatechange = function() {  
             if (this.readyState == 4 && this.status == 200){  
             }  
           };  
          xhttp.open("GET", "index.html", true);  
          xhttp.send();  
         }  
       </script>  
     <?php  
     if(isset($_POST['daftar'])){  
         $nama = $_POST['nama'];  
         $alamat = $_POST['alamat'];  
         $jk = $_POST['jenis_kelamin'];  
         $agama = $_POST['agama'];  
         $sekolah_asal = $_POST['sekolah_asal'];  
         $sql = "INSERT INTO calon_siswa (name, alamat, jenis_kelamin, agama,sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah_asal')";  
         $query = mysqli_query($db, $sql);  
      if( $query ) {  
           header('Location:index.php');  
         } else {  
           echo "gagal daftar";  
         }  
     }   
     else {  
       die("Akses dilarang...");  
     }  
     ?>  
    
  5. form-edit.php
     <?php  
     include("config.php");  
     // kalau tidak ada id di query string  
     if( !isset($_GET['id']) ){  
       header('Location: list-siswa.php');  
     }  
     //ambil id dari query string  
     $id = $_GET['id'];  
     // buat query untuk ambil data dari database  
     $sql = "SELECT * FROM calon_siswa WHERE id=$id";  
     $query = mysqli_query($db, $sql);  
     $siswa = mysqli_fetch_assoc($query);  
     // jika data yang di-edit tidak ditemukan  
     if( mysqli_num_rows($query) < 1 ){  
       die("data tidak ditemukan...");  
     }  
     ?>  
     <!DOCTYPE html>  
     <html>  
     <head>  
       <title>Formulir Edit Siswa | SMK Coding</title>  
     </head>  
     <body style="text-align: center;">  
       <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="name">nama: </label>  
           <input type="text" name="name" placeholder="name lengkap" value="<?php echo $siswa['name'] ?>" />  
         </p>  
         <p>  
           <label for="alamat">Alamat: </label>  
           <textarea name="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" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>  
           <label><input type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>  
         </p>  
         <p>  
           <label for="agama">Agama: </label>  
           <?php $agama = $siswa['agama']; ?>  
           <select name="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" placeholder="name sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />  
         </p>  
         <p>  
           <input type="submit" value="Simpan" name="simpan" />  
         </p>  
         </fieldset>  
       </form>  
       </body>  
     </html>  
    
  6. proses-edit.php
     <?php  
     include("config.php");  
     // cek apakah tombol simpan sudah diklik atau blum?  
     if(isset($_POST['simpan'])){  
       // ambil data dari formulir  
       $id = $_POST['id'];  
       $name = $_POST['name'];  
       $alamat = $_POST['alamat'];  
       $jk = $_POST['jenis_kelamin'];  
       $agama = $_POST['agama'];  
       $sekolah = $_POST['sekolah_asal'];  
       // buat query update  
       $sql = "UPDATE calon_siswa SET name='$name', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id";  
       $query = mysqli_query($db, $sql);  
       // apakah query update berhasil?  
       if( $query ) {  
         // kalau berhasil alihkan ke halaman list-siswa.php  
         header('Location: index.php');  
       } else {  
         // kalau gagal tampilkan pesan  
         die("Gagal menyimpan perubahan...");  
       }  
     } else {  
       die("Akses dilarang...");  
     }  
     ?>  
    
  7. 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 ){  
         header('Location:index.php');  
       } else {  
         die("gagal menghapus...");  
       }  
     } else {  
       die("akses dilarang...");  
     }  
     ?>  
    
  8. list-siswa.php
     <?php include("config.php"); ?>  
     <!DOCTYPE html>  
     <html>  
     <head>  
       <title>Pendaftaran Siswa Baru || SMA PetaniCoding</title>  
     </head>  
     <body style="text-align: center;">  
       <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);  
         $nomor=0;  
         while($siswa = mysqli_fetch_array($query)){  
           echo "<tr>";  
           $nomor++;  
           echo "<td>".$nomor."</td>";  
           echo "<td>".$siswa['name']."</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 "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";  
           echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";  
           echo "</td>";  
           echo "</tr>";  
         }  
         ?>  
       </tbody>  
       </table>  
       <p>Total: <?php echo mysqli_num_rows($query) ?></p>  
       </body>  
     </html>  
    
Berikut adalah hasilnya:


Tampilan awal
 -------------------------------------------------------------------------------------------------------


 
Tampilan List Siswa
 -------------------------------------------------------------------------------------------------------


Tampilan Form Pendaftaran Siswa
 -------------------------------------------------------------------------------------------------------


Hasil setelah mendaftarkan siswa baru
 -------------------------------------------------------------------------------------------------------


Tampilan edit data siswa
 -------------------------------------------------------------------------------------------------------


Tampilan hasil edit data siswa
 -------------------------------------------------------------------------------------------------------


Tampilan setelah melakukan delete data ke7
 -------------------------------------------------------------------------------------------------------

Comments

Popular posts from this blog

MPPL 9 - Manajemen Biaya

Kelas : MPPL C Jeremy Vijay - 05111740000062 Raja Permata Boy - 05111740000070 Bobbi Aditya - 05111740000099 Samuel Marcellinus - 05111740000134 Bastian Farandy - 05111740000190 Link Spreadsheet : SpreadSheet

MPPL - Pengalaman proyek

Nama : Bobbi Aditya Kelas : MPPL-C NRP : 05111740000099 Berikut ini adalah proyek yang saya ketahui Nama Proyek :   Pembangunan Aplikasi MSO (Maintenance System Online) Berbasis Web Deskripsi : Aplikasi ini berguna untuk pemantauan alat-alat yang ada pada PT. Semen Indonesia - Gresik apabila terjadi kerusakan yang harus segera dilaporkan, atau terdapat jadwal pemeliharaan rutin. Lokasi : PT. Semen Indonesia (Persero) Tbk. - Gresik Jl. Veteran, Gresik Jawa Timur, 61122 Waktu Proyek: 02 - 31 Januari 2019 Tim yang terlibat: Almas Aqmarina 05111640000171 Daniel Kurniawan 0511164000081 Produk yang dihasilkan: Sebuah aplikasi yang berada di dalam server Semen Indonesia yang berguna untuk melakukan pemantuan terhadap alat-alat yang ada pada PT. Semen Indonesia. Untuk addressnya tidak bisa diakses dari luar jaringan PT. Semen Indonesia. Fitur: • Tabel Laporan Harian • Pengelolaan Laporan Harian (tambah, ubah, hapus) • Unduh dala