Tampilan Baru Pendaftaran Siswa dengan Bootstrap!

-



Postingan kali ini hanyalah sebuah perubahan tampilan pada Pendaftaran Siswa lalu, karena tugas kali ini adalah tentang BOOTSTRAP. Saya menambahkan beberapa style yang sekiranya memperindah tampilan Pendaftaran Siswa berikut.

Tampilan

 Tampilan Awal (index.html)

Tampilan list-siswa.php

Tampilan form-daftar.php

 
Tampilan form-edit.php

Source Code yang diubah

index.html

 <!DOCTYPE html>  
 <html>  
 <head>  
   <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">  
     h1{  
       text-align: center;  
       color: midnightblue;  
     }  
     h3{  
       text-align: center;  
       color: cornflowerblue;  
     }  
     h4{  
       text-align: center;  
       color: royalblue;  
     }  
   </style>  
   <script>   
     function loadsiswa() {   
       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("tampil").innerHTML = this.responseText;   
         }   
       };   
       xhttp.open("GET", "list-siswa.php", true);   
       xhttp.send();   
     }   
     function daftarsiswa() {   
       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("tampil").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);   
           loadsiswa();   
         }   
       };   
       xhttp.open("GET", "hapus.php?id=" + id, true);   
       xhttp.send();   
     }   
    </script>  
   <title>Pendaftaran Siswa Baru | SMK Coding</title>  
 </head>  
 <body style="text-align: center;">  
   <div class="container">  
     <br><br>  
     <h1>Pendaftaran Siswa Baru</h1>  
     <h3>SMK Coding</h3>  
     <br>  
     <button class="btn btn-info btn-md" onclick="loadsiswa()">List Siswa</button>  
     <button class="btn btn-info btn-md" onclick="daftarsiswa()">Pendaftaran Siswa</button>  
     <div id="tampil"></div>  
   </div>  
   </body>  
 </html>

list-siswa.php

 <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Pendaftaran Siswa Baru | SMK 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">  
     h1{  
       text-align: center;  
       color: midnightblue;  
     }  
     h3{  
       text-align: center;  
       color: cornflowerblue;  
     }  
     h4{  
       text-align: center;  
       color: royalblue;  
     }  
     table {   
       border: 2px solid #ccc;  
     }   
     table tr {   
       border: 1px solid #ddd;   
       padding: .35em;   
     }  
     table tr:nth-child(odd){  
       background: lavender;  
     }  
     table tr:nth-child(even) {   
       background: lightskyblue;    
     }  
     table th, table td {   
       padding: .625em;   
       text-align: left;   
     }   
     table th {   
       background: steelblue;  
       font-size: .85em;   
       letter-spacing: .1em;   
       text-transform: uppercase;  
       text-align: center;  
     }   
     table td {   
       white-space: nowrap;   
       overflow: hidden;   
       text-overflow: ellipsis;   
     }   
   </style>  
 </head>  
 <body>  
   <br>  
     <h4>Siswa yang sudah mendaftar</h4>  
   <br>    
   <div class="table-responsive">  
   <table border="1" align="center" class="table table-bordered table-striped table-hover">    
   <thead>    
     <tr>    
       <th class="col-md-1">No</th>    
       <th class="col-md-3">Nama</th>    
       <th class="col-md-4">Alamat</th>    
       <th class="col-md-3">Jenis Kelamin</th>    
       <th class="col-md-3">Agama</th>    
       <th class="col-md-5">Sekolah Asal</th>    
       <th class="col-md-3">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']."' class='btn btn-success btn-sm'>Edit</a> | ";  
       echo "<input type='button' class='btn btn-danger btn-sm' onclick=hapus('".$siswa['id']."') value='Hapus'>";   
       echo "</td>";    
       echo "</tr>";    
     }    
   ?>    
   </tbody>  
   </table>  
   </div>  
   <p> Total: <?php echo mysqli_num_rows($query) ?></p>  
   <div id="tampil"></div>  
   </body>  
 </html>

form-daftar.php

 <!DOCTYPE html>  
 <html>  
 <head>  
   <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">  
     h1{  
       text-align: center;  
       color: midnightblue;  
     }  
     h3{  
       text-align: center;  
       color: cornflowerblue;  
     }  
     h4{  
       text-align: center;  
       color: royalblue;  
     }  
   </style>  
   <script type="text/javascript">   
   function tambah() {   
     var nama = document.getElementById("nama").value;   
     var alamat = document.getElementById("alamat").value;   
     var jenis_kelamin;   
     if(document.getElementById("kel_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');    
            loadsiswa();    
          }   
     };   
     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>  
     <br>  
     <h4>Formulir Pendaftaran Siswa Baru</h4>  
   </header>  
   <div class="container">  
   <form action="proses-pendaftaran.php" method="POST" class="form-horizontal">  
     <div class="form-group">  
     <p>  
       <label for="nama">Nama: </label>  
       <input class="form-control" type="text" name="nama" id="nama" placeholder="Nama Lengkap" />  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea type="text" class="form-control" name="alamat" id="alamat"></textarea>  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <label><input type="radio" name="jenis_kelamin" id="jkel_l" value="laki-laki"> Laki-laki</label>  
       <label><input type="radio" name="jenis_kelamin" id="jkel_p" value="perempuan"> Perempuan</label>  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="agama">Agama: </label>  
       <select class="form-control" name="agama" id="agama">  
         <option>Islam</option>  
         <option>Kristen</option>  
         <option>Hindu</option>  
         <option>Budha</option>  
         <option>Atheis</option>  
       </select>  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input type="text" class="form-control" name="sekolah_asal" id="sekolah_asal" placeholder="Nama sekolah" />  
     </p>  
     </div>  
       <input type="submit" class="btn btn-primary" value="Daftar" name="daftar" onclick="tambah()" />  
       <br>  
   </form>  
   </div>  
   </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);  
 if( mysqli_num_rows($query) < 1 ){  
   die("Data tidak ditemukan.");  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Formulir Edit Siswa | SMK 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">  
     h1{  
       text-align: center;  
       color: midnightblue;  
     }  
     h3{  
       text-align: center;  
       color: cornflowerblue;  
     }  
     h4{  
       text-align: center;  
       color: royalblue;  
     }  
   </style>   
   <script type="text/javascript">   
     function edit(){   
     var nama = document.getElementById("nama").value;   
     var alamat = document.getElementById("alamat").value;   
     var jenis_kelamin;   
     if(document.getElementById("jkel_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.');   
       loadsiswa();   
     }   
     };   
     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>  
     <br><br>  
     <h4>Formulir Edit Siswa</h4>  
   </header>  
   <form action="proses-edit.php" method="POST" class="form-horizontal">  
     <div class="container">  
       <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />  
     <div class="form-group">  
     <p>  
       <label for="nama">Nama: </label>  
       <input class="form-control" type="text" name="nama" id="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama'] ?>" />  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea type="text" class="form-control" name="alamat" id="alamat"><?php echo $siswa['alamat'] ?></textarea>  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <?php $jk = $siswa['jenis_kelamin']; ?>  
       <label><input type="radio" name="jenis_kelamin" id="jkel_l" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>  
       <label><input type="radio" name="jenis_kelamin" id="jkel_p" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="agama">Agama: </label>  
       <?php $agama = $siswa['agama']; ?>  
       <select class="form-control" 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 == 'Atheis') ? "selected": "" ?>>Atheis</option>  
       </select>  
     </p>  
     </div>  
     <div class="form-group">  
     <p>  
       <label for="sekolah_asal">Sekolah Asal: </label>  
       <input class="form-control" type="text" name="sekolah_asal" id="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />  
     </p>  
     </div>  
       <input type="submit" class="btn btn-primary" value="Simpan" name="simpan" onclick="edit()" />  
   </form>  
   </div>  
   </body>  
 </html>

Komentar

Posting Komentar

Postingan populer dari blog ini

Halaman Berita? HTML & CSS!

-
Gambar
Minggu ini saya belajar HTML dan CSS. Saya juga mendapat tugas untuk membuat sebuah halaman berita, contohnya website TECHINASIA . Berikut adalah tampilan dari website tersebut. Berikut adalah tampilan dari halaman berita yang saya buat.   Header-Content Content-Footer Source Code HTML <!DOCTYPE html> <html> <head> <title>Cafe Corner</title> <link rel="stylesheet" type="text/css" href="custom.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> </head> <body> <div class="header"> <h2>CAFE CORNER</h2> </div> <div class="menu"> <ul> <li...
Baca selengkapnya

Menggunakan CodeIgniter!!

-
Gambar
Pada minggu ini, saya diberikan sebuah tuags untuk melanjutkan Tutorial menggunakan CodeIgniter pada website ini hingga mencapai tutorial ke-6. Berikut adalah tampilan setiap saya selesai mengikuti tutorialnya. Tutorial #3: Bootstrap pada CodeIgniter   Menambahkan template SBAdmin pada web local yang telah dibuat, yaitu tokobuah. Tutorial #4: Template Admin yang Efektif Penggunaan partials, dimana halaman ini dibagi menjadi bagian-bagian kecil. Partial yang dibuat antara lain:   head.php untuk meinyimpan isi dari tag <head> ;   navbar.php untuk menyimpan kode navbar;   sidebar.php untuk menyimpan kode menu bagian samping (sidebar) ;   breadcrumb.php untuk menyimpan kode link breadcrumb;   scrolltop.php untuk menyimpan kode tombol scrolltop;   footer.php untuk menyimpan kode footer;   modal.php untuk menyimpan kode modal;   js.php untuk meload javascript. Tutorial #5: Membuat Fitur CRUD   ...
Baca selengkapnya

Sistem Informasi Cinema 21 - APSI

-
Gambar
Sistem Informasi Aplikasi Cinema 21 atau M-Tix  Dalam pengembangan sebuah perusahaan selalu memerlukan 4 hal diatas yaitu Transaction Processing Systems, Management Information Systems, Decision Support Systems, dan Executive Information Systems. CINEMA 21 dibawah naungan PT. Nusantara Sejahtera Raya merupakan kelompok bioskop terbesar di Indonesia yang memulai kiprahnya di industri hiburan sejak tahun 1987. Lebih dari 30 tahun, CINEMA 21 berkomitmen untuk senantiasa memberikan pengalaman dan kenikmatan nonton terbaik untuk masyarakat Indonesia. Sampai dengan Agustus tahun lalu, CINEMA 21 memiliki total 1045 layar tersebar di 46 kota di 184 lokasi di seluruh Indonesia. Selain menyajikan film-film hasil karya anak bangsa, CINEMA 21 juga menayangkan film-film berkelas dunia.  CINEMA 21 terus mengikuti perkembangan teknologi dengan melengkapi fasilitas-fasilitasnya seperti 2D dan 3D. Di tahun 2012, CINEMA 21 telah menghadirkan pengalaman nonton dengan teknolo...
Baca selengkapnya