PWEB8 - Mengimplementasikan Bootstrap

TUGAS 7 - Pemrograman Web
Mengimplementasikan Bootstrap dalam HTML
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>  
      <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
      <script type="text/javascript" src="js/jquery.js"></script>  
      <script type="text/javascript" src="js/bootstrap.js"></script>  
       <style type="text/css">   
    ul{   
     display:table; margin:0 auto;   
    }   
    body {  
     text-align: center;   
    }   
    fieldset{   
     background-color: lightgrey;   
    }   
  </style>  
 </head>  
 <body class="p-3 mb-2 bg-dark text-white">  
      <header>  
           <h3 align="center">Pendaftaran Siswa Baru</h3>  
           <h1 align="center">Institut Coding</h1>  
      </header>  
      <div class="p-3 mb-2 bg-secondary text-white">  
           <h4 align="center">Menu</h4>  
           <div class="p-3 mb-2 bg-light text-dark">  
                <ul class="list-group">  
                     <li class="list-group-item"><a href="form-daftar.php"><button class="btn btn-light" type="button">Daftar Baru</button></a></li>  
                     <li class="list-group-item"><a href="list-siswa.php"><button class="btn btn-light" type="button">Pendaftar</button></a></li>  
                </ul>  
           </div>  
      </div>  
 </body>  
 </html>

form-daftar.php

 <!DOCTYPE HTML>  
 <html>  
 <head>  
      <title>Formulir Pendaftaran Siswa Baru | Institut Coding</title>  
      <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
      <script type="text/javascript" src="js/jquery.js"></script>  
      <script type="text/javascript" src="js/bootstrap.js"></script>  
      <style type="text/css">  
           body {   
      text-align: center;    
    }   
      </style>  
 </head>  
 <body class="p-3 mb-2 bg-primary text-white">  
      <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>  
      <div class="p-3 mb-2 bg-light text-white">  
      <form action="proses-pendaftaran.php">  
      <ul class="list-group">  
           <div class="p-3 mb-2 bg-light text-dark">  
           <div class="form-group">  
                <li class="list-group-item">  
                     <label for="nama">Nama </label>  
                     <input type="text" class="form-control" id="nama" placeholder="Nama Lengkap.." />  
                </li>  
           </div>  
                <div class="form-group">                 
                <li class="list-group-item">  
                     <label for="alamat">Alamat </label>  
                     <textarea class="form-control" id="alamat" rows="3"></textarea>  
                </li>  
           </div>  
           <!-- Jenis Kelamin -->  
                <div class="form-group">  
                <li class="list-group-item">  
                     <label for="jenis_kelamin">Jenis Kelamin </label>  
                     <select class="form-control">  
                          <option id="pria" value="laki-laki">Laki-laki</option>  
                          <option id="wanita" value="perempuan">Perempuan</option>  
                     </select>  
                </li>  
           </div>  
                <!-- Agama -->  
                <div class="form-group">  
                <li class="list-group-item">  
       <label for="agama">Agama </label>  
       <select class="form-control" id="agama">  
         <option>Islam</option>  
         <option>Kristen</option>  
         <option>Hindu</option>  
         <option>Budha</option>  
         <option>Katolik</option>  
       </select>  
          </li>  
     </div>  
                <div class="form-group">  
          <li class="list-group-item">  
       <label for="sekolah_asal">Sekolah Asal </label>  
       <input type="text" class="form-control" id="sekolah_asal" placeholder="nama sekolah" />  
          </li>  
          <br/>  
       <input class="btn btn-primary" type="button" value="Daftar" name="Daftar" onclick="insertData()" />  
       &emsp;  
       <a href="index.php"><input class="btn btn-primary" type="button" value="Menu Utama"/></a></input>  
     </div>  
            </ul>  
           </div>  
      </div>  
      </form>  
 </div>  
 </body>  
 </html>

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'];  
 // untuk mengambil data dari database  
 $sql = "SELECT * FROM calon_siswa WHERE id=$id";  
 ?>  
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
   <script type="text/javascript" src="js/jquery.js"></script>  
   <script type="text/javascript" src="js/bootstrap.js"></script>  
 <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 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('Perubahan berhasil disimpan');   
           }  
           else {  
             alert('Perubahan gagal disimpan');   
           }  
         }  
       }  
       xmlhttp.open("GET","proses-edit.php?id=" + <?php echo $id;?> + "&name=" + name + "&address=" + address + "&gender=" + gender + "&religion=" + religion + "&school=" + school, true);  
       xmlhttp.send();  
     }  
 </script>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Formulir Edit Siswa | Institut Coding</title>  
   <style type="text/css">  
     body {   
     text-align: center;    
    }   
   </style>  
 </head>  
 <body class="p-3 mb-2 bg-dark text-white">  
   <header>  
     <h3 align="center">Formulir Edit Siswa | Institut Coding</h3>  
   </header>  
     <div class="p-3 mb-2 bg-secondary text-white">  
       <form action="proses-edit.php">  
       <ul class="list-group">  
         <div class="p-3 mb-2 bg-light text-dark">  
         <div class="form-group">  
           <li class="list-group-item">  
             <label for="nama">Nama </label>  
             <input type="text" class="form-control" id="nama" placeholder="Nama Lengkap.." />  
           </li>  
         </div>  
           <div class="form-group">        
           <li class="list-group-item">  
             <label for="alamat">Alamat </label>  
             <textarea class="form-control" id="alamat" rows="3"></textarea>  
           </li>  
         </div>  
         <!-- Jenis Kelamin -->  
           <div class="form-group">  
           <li class="list-group-item">  
             <label for="jenis_kelamin">Jenis Kelamin </label>  
             <select class="form-control">  
               <option id="pria" value="laki-laki">Laki-laki</option>  
               <option id="wanita" value="perempuan">Perempuan</option>  
             </select>  
           </li>  
         </div>  
           <!-- Agama -->  
           <div class="form-group">  
           <li class="list-group-item">  
           <label for="agama">Agama </label>  
           <select class="form-control" id="agama">  
             <option>Islam</option>  
             <option>Kristen</option>  
             <option>Hindu</option>  
             <option>Budha</option>  
             <option>Katolik</option>  
           </select>  
           </li>  
         </div>  
         <div class="form-group">  
         <li class="list-group-item">  
           <label for="sekolah_asal">Sekolah Asal </label>  
           <input type="text" class="form-control" id="sekolah_asal" placeholder="nama sekolah" />  
           </li>  
           <br/>  
           <input class="btn btn-secondary" type="button" value="Update" name="update" onclick="updateData()" />  
           &emsp;  
           <a href="index.php"><input class="btn btn-secondary" type="button" name="home" value="Menu Utama"/></a>  
         </div>  
       </ul>  
     </div>  
   </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('gagal menghapus data');  
   }  
 }   
 else   
 {  
   alert('akses dilarang...');  
 }  
 ?>

list-siswa.php

 <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Pendaftaran Siswa Baru | Institut Coding</title>  
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
   <script type="text/javascript" src="js/jquery.js"></script>  
   <script type="text/javascript" src="js/bootstrap.js"></script>  
   <style type="text/css">  
     body {   
     text-align: center;   
    }   
   </style>  
 </head>  
 <body class="p-3 mb-2 bg-dark text-white">  
   <header>  
     <h2 align="center">Siswa yang sudah mendaftar | Institut Coding</h2>  
   </header>  
   <div class="p-3 mb-2 bg-secondary text-white">  
   <div id='data_siswa'></div>  
   </div>  
   </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'];  
 $name = $_GET['name'];  
 $address = $_GET['address'];  
 $gender = $_GET['gender'];  
 $religion = $_GET['religion'];  
 $school = $_GET['school'];  
   // buat query update  
   $sql = "UPDATE calon_siswa SET nama='$name', alamat='$address', jenis_kelamin='$gender', agama='$religion', sekolah_asal='$school' 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"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>List siswa</title>  
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  
   <script type="text/javascript" src="js/jquery.js"></script>  
   <script type="text/javascript" src="js/bootstrap.js"></script>  
   <style type="text/css">  
     body {   
   text-align: center;    
    }   
   </style>  
 </head>  
 <body>  
 <table class="table table-hover table-dark">  
   <thead>  
     <tr>  
       <th scope="col">No</th>  
       <th scope="col">Nama</th>  
       <th scope="col">Alamat</th>  
       <th scope="col">Jenis Kelamin</th>  
       <th scope="col">Agama</th>  
       <th scope="col">Sekolah Asal</th>  
       <th scope="col">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 "<th scope='row'>".$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']."'><input class='btn btn-dark' type='button' value='Edit'/></a> &emsp;";  
       echo "<input class='btn btn-dark' type='button' onclick=hapus('".$siswa['id']."') value='Hapus'>";  
       echo "</td>";  
       echo "</tr>";  
     }  
       echo "<tr>";  
       echo "<td colspan='7'>";  
       echo "<a href='index.php'><button class='btn btn-dark' type='button'>Menu Utama</button></a> &emsp;";  
       echo "<a href='form-daftar.php'><button class='btn btn-dark' type='button'>Tambah Data</button></a>";  
     ?>  
   </tbody>  
 </table>  
 </body>  
 </html>

Screenshot

Halaman Utama (Full Halaman)


Halaman Utama (Setengah Halaman)


Halaman Pendaftaran (Full Halaman)


Halaman Pendaftaran (Setengah Halaman)


Halaman List Pendaftar (Full Halaman)


Halaman List Pendaftar (Setengah Halaman)


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