PWEB7 - Membuat Database disertai penggunaan AJAX

TUGAS 6 - Pemrograman Web
Membuat Database disertai penggunaan AJAX
Nama : Bastian Farandy
NRP : 05111740000190
Kelas : Pemrograman Web C
Source Code:

config.php

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

index.php

 <!DOCTYPE HTML>  
 <html>  
 <head>  
      <title>Pendaftaran Siswa Baru | Institut Coding</title>  
       <style type="text/css">   
    ul{   
     display:table; margin:0 auto;   
    }   
    body {   
     background-color: grey;    
    }   
    fieldset{   
     background-color: lightgrey;   
    }   
  </style>  
 </head>  
 <body>  
      <header>  
           <h3 align="center">Pendaftaran Siswa Baru</h3>  
           <h1 align="center">Institut Coding</h1>  
      </header>  
      <fieldset>  
      <h4 align="center">Menu</h4>  
      <nav>  
           <ul>  
                <li><a href="form-daftar.php"><button type="button">Daftar Baru</button></a></li>  
                <br>  
                <li><a href="list-siswa.php"><button type="button">List Pendaftar</button></a></li>  
           </ul>  
      </nav>  
      </fieldset>  
 </body>  
 </html>

form-daftar.php

 <!DOCTYPE HTML>  
 <html>  
 <head>  
      <title>Formulir Pendaftaran Siswa Baru | Institut Coding</title>  
      <style type="text/css">  
           body {   
     background-color: grey;    
    }   
    fieldset{   
     background-color: lightgrey;   
    }  
      </style>  
      </style>  
 </head>  
 <body>  
      <script type="text/javascript">  
           function insertData(){  
                var name = document.getElementById("nama").value;  
                var address = document.getElementById("alamat").value;  
                var gender;  
                if(document.getElementById("pria").checked)  
                {  
                     gender = "Laki-laki";  
                }  
                else if(document.getElementById("wanita").checked)  
                {  
                     gender = "Perempuan";  
                }  
                var religion = document.getElementById("agama").value;  
                var school = document.getElementById("sekolah_asal").value;  
                if(window.XMLHttpRequest)  
                {  
                     xmlhttp = new XMLHttpRequest();  
                }  
                else  
                {  
                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
                }  
                xmlhttp.onreadystatechange=function(){  
                     if(this.readyState==4 && this.status==200)  
                     {  
                          alert(this.responseText);  
                          if(this.responseText == "sukses")   
                          {  
                               alert('Data berhasil disimpan');   
                          }  
                     }  
                }  
                xmlhttp.open("GET","proses-pendaftaran.php?name=" + name + "&address=" + address + "&gender=" + gender + "&religion=" + religion + "&school=" + school, true);  
                xmlhttp.send();  
           }  
      </script>  
      <header>  
           <h3 align="center">Formulir Pendaftaran Siswa Baru | Institut Coding</h3>  
      </header>  
      <form action="proses-pendaftaran.php">  
           <fieldset>  
                <p align="center">  
                     <label for="nama">Nama: </label>  
                     <input type="text" id="nama" placeholder="Nama Lengkap.." />  
                </p>  
                <p align="center">  
                     <label for="alamat">Alamat: </label>  
                     <textarea id="alamat"></textarea>  
                </p>  
                <p align="center">  
                     <label for="jenis_kelamin">Jenis Kelamin: </label>  
                     <label><input type="radio" name="jenis_kelamin" id="pria" value="laki-laki">Laki-laki</label>  
                     <label><input type="radio" name="jenis_kelamin" id="wanita" value="perempuan">Perempuan</label>  
                </p>  
                <p align="center">  
       <label for="agama">Agama: </label>  
       <select id="agama">  
         <option>Islam</option>  
         <option>Kristen</option>  
         <option>Hindu</option>  
         <option>Budha</option>  
         <option>Katolik</option>  
       </select>  
          </p>  
          <p align="center">  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input type="text" id="sekolah_asal" placeholder="nama sekolah" />  
          </p>  
          <p align="center">  
       <input type="button" value="Daftar" name="daftar" onclick="insertData()" />  
       &emsp;  
       <a href="index.php"><input type="button" value="Menu Utama"/></a></input>  
          </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";

?>

<script type="text/javascript">
        function updateData(){
            var nama_siswa = document.getElementById("nama").value;
            var alamat_siswa = document.getElementById("alamat").value;
            var gender_siswa;
            if(document.getElementById("pria").checked)
            {
                gender_siswa = "Laki-laki";
            }
            else if(document.getElementById("wanita").checked)
            {
                gender_siswa = "Perempuan";
            }
            var agama_siswa = document.getElementById("agama").value;
            var sekolah_siswa = document.getElementById("sekolah_asal").value;
            if(window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function()
            {
                if(this.readyState==4 && this.status==200)
                {
                    alert(this.responseText);
                    if(this.responseText == "sukses") 
                    {
                        alert('Perubahan berhasil disimpan'); 
                    }
                    else {
                        alert('Perubahan gagal disimpan'); 
                    }
                }
            }

            xmlhttp.open("GET","proses-edit.php?id=" + <?php echo $id;?> + "&nama_siswa=" + name + "&alamat_siswa=" + address + "&gender_siswa=" + gender + "&agama_siswa=" + religion + "&sekolah_siswa=" + school, true);
            xmlhttp.send();
        }
</script>

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Edit Siswa | Institut Coding</title>
    <style type="text/css">
        body {  
       background-color: grey;    
     }  
     fieldset{  
       background-color: lightgrey;
     } 
    </style>
</head>

<body>
    <header>
        <h2 align="center">Formulir Edit Siswa | Institut Coding</h3>
    </header>

    <form action="proses-edit.php">

        <fieldset>

            <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />

        <p align="center">
            <label for="nama">Nama: </label>
            <input type="text" id="nama" placeholder="Nama Lengkap" />
        </p>
        <p align="center">
            <label for="alamat">Alamat: </label>
            <textarea id="alamat"></textarea>
        </p>
        <p align="center">
            <label for="jenis_kelamin">Jenis Kelamin: </label>
            <label><input type="radio" name="jenis_kelamin" id="pria" value="laki-laki">Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" id="wanita" value="perempuan">Perempuan</label>
        </p>
        <p align="center">
            <label for="agama">Agama: </label>
            <select id="agama">
                <option>Islam</option>
                <option>Kristen</option>
                <option>Hindu</option>
                <option>Budha</option>
                <option>Katolik</option>
            </select>
        </p>
        <p align="center">
            <label for="sekolah_asal">Sekolah Asal: </label>
            <input type="text" id="sekolah_asal" placeholder="nama sekolah"/>
        </p>
        <p align="center">
            <input type="button" value="Update" name="update" onclick="updateData()" />
        </p>

        </fieldset>


    </form>

    </body>
</html>

hapus.php

 <?php

include("config.php");

if( isset($_GET['id']) )
{
    // mengambil ID dari query
    $id = $_GET['id'];

    // menghapus data dari database
    $sql = "DELETE FROM calon_siswa WHERE id=$id";
    $query = mysqli_query($db, $sql);

    //jika query berhasil
    if( $query )
    {
        alert('Data berhasil dihapus.');
        header('Location: list-siswa.php');
    } 
    else 
    {
        alert('Data gagal dihapus.');
    }

} 
else 
{
    alert('Akses Dilarang');
}

?>

list-siswa.php

 <?php include("config.php"); ?>

<!DOCTYPE html>
<html>
<head>
    <title>Pendaftaran Siswa Baru | Institut Coding</title>
    <style type="text/css">
        body {  
       background-color: grey;    
     }  
     fieldset{  
       background-color: lightgrey;
     } 
    </style>
</head>

<body>
    <header>
        <h2 align="center">Siswa yang sudah mendaftar | Institut Coding</h2>
    </header>
    <fieldset>
    <div id='data_siswa'></div>
    </fieldset>
    </body>
</html>

<script type="text/javascript">

    function hapus(id) 
    {
        if(window.XMLHttpRequest)
        { xmlhttp = new XMLHttpRequest(); }
        else
        { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
        xmlhttp.onreadystatechange=function(){
        if(this.readyState==4 && this.status==200)
        {
            alert(this.responseText); 
            listData(); 
        }
    }

        xmlhttp.open("GET","proses-hapus.php?id=" + id, true);
        xmlhttp.send();
    }

    function listData()
    {
        if(window.XMLHttpRequest)
        { xmlhttp = new XMLHttpRequest(); }
        else
        { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

        xmlhttp.onreadystatechange=function()
        {
            if(this.readyState==4 && this.status==200)
            {
                document.getElementById('data_siswa').innerHTML = this.responseText; 
            }
        }

        xmlhttp.open("GET","data-list-siswa.php", true);
        xmlhttp.send();
    }

 listData();
</script>

proses-edit.php

 <?php

include("config.php");

$id = $_GET['id'];
$nama_siswa = $_GET['name'];
$alamat = $_GET['address'];
$jenis_kelamin = $_GET['gender'];
$agama = $_GET['religion'];
$sekolah_asal = $_GET['school'];

    // buat query update
    $sql = "UPDATE calon_siswa SET nama='$nama_siswa', alamat='$alamat', jenis_kelamin='$jenis_kelamin', agama='$agama', sekolah_asal='$sekolah_asal' WHERE id=$id";
    $query = mysqli_query($db, $sql);

    //jika query berhasil
    if( $query ) {
        // kalau berhasil alihkan ke halaman list-siswa.php
        echo "Data berhasil diperbaharui";
    } 
    else 
    {
        //jika gagal
        echo "Data gagal diperbaharui";
    }


?>

proses-hapus.php

 <?php include("config.php"); ?>  
 <?php   
      mysqli_query($db, "delete from calon_siswa where id = ".$_GET['id']);   
 ?>

proses-pendaftaran.php

 <?php  
      include("config.php");  
      $nama = $_GET['name'];  
      $alamat = $_GET['address'];  
      $jenis_kelamin = $_GET['gender'];  
      $agama = $_GET['religion'];  
      $sekolah_asal = $_GET['school'];  
      $sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE('$nama', '$alamat', '$jenis_kelamin', '$agama', '$sekolah_asal')";  
      $query = mysqli_query($db,$sql);  
      if($query)   
      {  
        // jika berhasil  
        echo "Data berhasil dimasukkan.";   
      }   
      else   
      {  
        //jika gagal  
        echo "Data gagal dimasukkan.";  
      }  
 ?>

data-list-siswa.php

 <?php include("config.php"); ?>  
 <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);  
     $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 "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";  
       echo "<input type='button' onclick=hapus('".$siswa['id']."') value='Hapus'>";  
       echo "</td>";  
       echo "</tr>";  
     }  
     ?>  
   </tbody>  
 </table>  
 <p align="center">Total: <?php echo mysqli_num_rows($query) ?> &emsp; <a href="index.php"><button type="button">Menu Utama</button></a>  
 &emsp; <a href="form-daftar.php"><button type="button">Tambah Data</button></a></p>

Screenshot:

Halaman Utama

Form Daftar

Ketika menekan tombol "Daftar"

List Siswa

 List siswa setelah siswa "Joji" dihapus




Comments

Post a Comment

Popular posts from this blog

PWEB5 - Membuat Form Pembayaran Air

Image
TUGAS 4 - Pemrograman Web Membuat Form Pembayaran Air serta menampilkan datanya ke dalam tabel dengan PHP Nama : Bastian Farandy NRP : 05111740000190 Kelas : Pemrograman Web C Source Code form.html <!DOCTYPE html> <html> <head> <title>Form Pembayaran HTML</title> <style type="text/css"> table { border-collapse: collapse; vertical-align: middle; padding: 10px; align-content: center; } .ket { text-align: center; } body { background-image: url("bg1.jpg"); background-position: center; } </style> </head> <body> <form action="data.php" method="post" id="form"> <table width="750" height="800" align="center" bgcolor="white"> <tr> <td colspan="4" align="center"><h1>Form Pembayaran Rekening Air</h1></td> </tr> <tr
Read more

EAS - PWEB - Membuat Sistem PPDB Online

Image
EAS - Pemrograman Web Membuat sistem PPDB Online Nama : Bastian Farandy NRP : 05111740000190 Kelas : Pemrograman Web C Soal : Buat rancangan databasenya Dalam tugas ini, database diperlukan sebanyak 2 buah, yaitu database untuk menghandle data siswa, serta database untuk menghandle proses login. Database "rumahbun_bastian0190" dengan tabel calon_siswa untuk menghandle data siswa Database "rumahbun_regis: dengan tabel users untuk menghandle proses login Buat rancangan interface aplikasi Interface Login Interface Sign Up Interface Menu Utama Interface Pendaftaran Siswa Baru Interface List Pendaftar Interface setelah dilakukan Hapus data Interface setelah mengedit salah satu data Interface setelah salah satu data di update Data dari database dapat di download dengan menekan "Submit Query" pada Daftar Siswa, hasilnya sebagai berikut Implementasi dan hostingkan Hosting Untuk hosting, saya menggu
Read more

MPPLC - FP

Final Project - MPPL C Nama : Bastian Farandy NRP   : 05111740000190 Kelas  : MPPL C Nama : Samuel Marcellinus NRP   : 05111740000134 Kelas  : MPPL C Link Dokumen : Doc Final Project Cibus Link Powerpoint: PPT Final Project Cibus
Read more