ETS - Manajemen Prestasi Siswa !

-
Setiap akhir semester tugas guru adalah memasukkan nilai ke dalam aplikasi E-Rapor. Aplikasi E-Rapor adalah aplikasi yang digunakan untuk mengenerate laporan perkembangan siswa per semester.
Berikut adalah tampilan sederhana dari input prestasi siswa yang saya buat.

Tampilan

Tampilan E-Rapor Input Prestasi Siswa



Tampilan Database

Source Code

config.php

 <?php  
 $server = "localhost";  
 $user = "root";  
 $password = "";  
 $nama_database = "prestasi_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>Prestasi Siswa SMK Coding</title>  
   <link rel="stylesheet" type="text/css" href="thisis.css">  
 </head>  
 <body>  
   <br><br><br><br><br><br>  
   <h1>Prestasi Siswa SMK Coding</h1>  
   <h3>E-Rapor</h3>  
   <br>  
   <h2>Menu</h2>  
       <button class="btn" onclick="location.href='form-input.php'">Input Prestasi Siswa Baru</button>  
       <br>  
       <button class="btn" onclick="location.href='list-siswa.php'">Prestasi Siswa</button>  
   <?php if(isset($_GET['status'])): ?>  
     <br><br>  
     <p>  
     <?php  
       if($_GET['status'] == 'sukses'){  
         echo "Input prestasi siswa baru berhasil!";  
       } else {  
         echo "Input gagal!";  
       }  
     ?>  
     </p>  
   <?php endif; ?>  
   </body>  
 </html>

thisis.css

 @import url('https://fonts.googleapis.com/css?family=Abel');  
 @import url('https://fonts.googleapis.com/css?family=Questrial');  
 @import url('https://fonts.googleapis.com/css?family=Righteous');  
 body{  
      background: #f3f3f3;  
      color: #333;  
      width: 100%;  
      font-family: sans-sherif;  
      margin: 0 auto;  
 }  
 h1{  
      font-family: 'Oswald', sans-serif;  
      text-align: center;  
 }  
 h3{  
      font-family: 'Abel', sans-serif;  
      text-align: center;  
 }  
 h2{  
      font-family: 'Calibri';  
      font-size: xx-large;  
      font-weight: lighter;  
      text-align: center;  
 }  
 .btn{  
      margin-right: auto;  
      margin-left: auto;  
      padding: 5px;  
      display: block;  
      color: black;  
      text-align: center;  
 }  
 a{  
      margin-right: auto;  
      margin-left: auto;  
      padding: 5px;  
      width: 150px;  
      display: block;  
      color: black;  
      text-align: center;  
      text-decoration: none;  
 }  
 a:hover{  
      background-color: lightpink;  
      display: block;  
 }  
 table{  
      padding: 15px;  
      margin: 15px;  
      border-collapse: collapse;  
      border-color: transparent;  
      margin-right: auto;  
      margin-left: auto;  
 }  
 th{  
      background-color: grey;  
      border-color: transparent;  
      border-bottom: 1px solid #ddd;  
      color: white;  
      width: auto;  
      padding: 15px;  
      font-family: 'Calibri';  
      font-weight: lighter;  
      text-align: center;  
 }  
 td{  
      border-color: transparent;  
      border-bottom: 1px solid #ddd;  
      padding: 10px;  
      text-align: left;  
      font-family: 'Abel', sans-serif;  
 }  
 tr:hover{  
      background-color: #f5f5f5;  
 }  
 p{  
      font-family: 'Calibri';  
      font-size: large;  
      text-align: center;  
      color: red;  
 }  
 form{  
      margin-right: auto;  
      margin-left: auto;  
      width: 50%;  
 }  
 input[type=text], select{  
      width: 80%;  
      padding: 10px;  
      margin: 3px;  
      display: inline-block;  
      border: 1px solid #ccc;  
      border-radius: 4px;  
      box-sizing: border-box;  
 }  
 input[type=text]:focus{  
      background-color: lightpink;  
 }  
 textarea{  
      width: 80%;  
      height: 150px;  
      padding: 10px;  
      box-sizing: border-box;  
      border: 2px solid #ccc;  
      border-radius: 4px;  
      background-color: #f8f8f8;  
      resize: none;  
 }

list-siswa.php

 <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Prestasi Siswa SMK Coding</title>  
   <link rel="stylesheet" type="text/css" href="thisis.css">  
 </head>  
   <br><br>  
   <h3>List Prestasi Siswa SMK Coding</h3>  
   <nav>  
     <a href="form-input.php">[+] Tambah Baru</a>  
   </nav>  
   <br>  
   <table border="1">  
   <thead>  
     <tr>  
       <th>No.</th>  
       <th>Nama</th>  
       <th>Kelas</th>  
       <th>Jenis Prestasi</th>  
       <th>Keterangan</th>  
     </tr>  
   </thead>  
   <tbody>  
     <?php  
     $sql = "SELECT * FROM input_prestasi";  
     $query = mysqli_query($db, $sql);  
     while($siswa = mysqli_fetch_array($query)){  
       echo "<tr>";  
       echo "<td>".$siswa['id']."</td>";  
       echo "<td>".$siswa['nama']."</td>";  
       echo "<td>".$siswa['kelas']."</td>";  
       echo "<td>".$siswa['jenis_prestasi']."</td>";  
       echo "<td>".$siswa['keterangan']."</td>";  
       echo "<td>";  
       echo "<a href='input-edit.php?id=".$siswa['id']."'>Edit</a>";  
       echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";  
       echo "</td>";  
       echo "</tr>";  
     }  
     ?>  
   </tbody>  
   </table>  
   <p style="text-align: center; color: black;">Total: <?php echo mysqli_num_rows($query) ?></p>  
   </body>  
 </html>

form-input.php

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Pengisian Prestasi Siswa SMK Coding</title>  
   <link rel="stylesheet" type="text/css" href="thisis.css">  
 </head>  
 <body>  
   <br>  
     <h3>Pengisian Prestasi Siswa SMK Coding</h3>  
   <br>  
   <form name="form" action="proses-input.php" method="POST">  
     <fieldset>  
       <label for="nama"><pre>Nama: </pre></label>  
       <input type="text" name="nama" placeholder="Nama Lengkap" />  
       <label for="kelas"><pre>Kelas: </pre></label>  
       <select name="kelas">  
         <option>A</option>  
         <option>B</option>  
         <option>C</option>  
         <option>D</option>  
         <option>E</option>  
       </select>  
       <label for="jenis_prestasi"><pre>Prestasi yang Dicapai: </pre></label>  
       <input type="text" name="jenis_prestasi" placeholder="Jenis Prestasi" />  
       <label for="keterangan"><pre>Keterangan: </pre></label>  
       <textarea name="keterangan"></textarea>  
       <input type="submit" value="SUBMIT" name="submit">  
     </fieldset>  
   </form>  
   </body>  
 </html>

proses-input.php

 <?php  
 include("config.php");  
 // cek apakah tombol submit sudah diklik atau blum?  
 if(isset($_POST['submit'])){  
   // ambil data dari formulir  
   $nama = $_POST['nama'];  
   $kelas = $_POST['kelas'];  
   $jp = $_POST['jenis_prestasi'];  
   $keterangan = $_POST['keterangan'];  
   // buat query  
   $sql = "INSERT INTO input_prestasi (nama, kelas, jenis_prestasi, keterangan) VALUE ('$nama', '$kelas', '$jp', '$keterangan')";  
   $query = mysqli_query($db, $sql);  
   // apakah query simpan berhasil?  
   if( $query ) {  
     // kalau berhasil alihkan ke halaman index.php dengan status=sukses  
     header('Location: index.php?status=sukses');  
   } else {  
     // kalau gagal alihkan ke halaman indek.php dengan status=gagal  
     header('Location: index.php?status=gagal');  
   }  
 } else {  
   die("Akses Dilarang!");  
 }  
 ?>

hapus.php

 <?php  
   include("config.php");  
   if( isset($_GET['id']) ){  
   // ambil id dari query string  
     $id = $_GET['id'];  
   // buat query hapus  
     $sql = "DELETE FROM input_prestasi WHERE id=$id";  
     $query = mysqli_query($db, $sql);  
   // apakah query hapus berhasil?  
     if( $query ){  
       header('Location: list-siswa.php');  
     } else {  
       die("Data Gagal Dihapus!");  
     }  
   } else {  
     die("Akses Dilarang!");  
   }  
 ?>

input-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 input_prestasi 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>Pengisian Prestasi Siswa SMK Coding</title>  
   <link rel="stylesheet" type="text/css" href="thisis.css">  
 </head>  
 <body>  
   <header>  
     <h3>Pengisian Prestasi Siswa SMK Coding</h3>  
   </header>  
   <form name="form" action="proses-edit.php" method="POST">  
     <fieldset>  
       <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />  
       <label for="nama"><pre>Nama: </pre></label>  
       <input type="text" name="nama" placeholder="Nama Lengkap" value="<?php echo $siswa['nama'] ?>" />  
       <label for="kelas"><pre>Kelas: </pre></label>  
       <?php $kelas = $siswa['kelas']; ?>  
       <select name="kelas">  
         <option <?php echo ($kelas == 'A') ? "selected": "" ?>>A</option>  
         <option <?php echo ($kelas == 'B') ? "selected": "" ?>>B</option>  
         <option <?php echo ($kelas == 'C') ? "selected": "" ?>>C</option>  
         <option <?php echo ($kelas == 'D') ? "selected": "" ?>>D</option>  
         <option <?php echo ($kelas == 'E') ? "selected": "" ?>>E</option>  
       </select>  
       <label for="jenis_pretasi"><pre>Prestasi yang Dicapai: </pre></label>  
       <textarea name="jenis_prestasi"><?php echo $siswa['jenis_prestasi'] ?></textarea>  
       <label for="keterangan"><pre>Keterangan: </pre></label>  
       <input type="text" name="keterangan" placeholder="Keterangan Prestasi yang Dicapai" value="<?php echo $siswa['keterangan'] ?>" />  
       <br><br>  
       <input type="submit" value="SAVE" name="simpan" />  
     </fieldset>  
   </form>  
   </body>  
 </html>

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'];  
     $nama = $_POST['nama'];  
     $kelas = $_POST['kelas'];  
     $jp = $_POST['jenis_prestasi'];  
     $keterangan = $_POST['keterangan'];  
     // buat query update  
     $sql = "UPDATE input_prestasi SET nama='$nama', kelas='$kelas', jenis_prestasi='$jp', keterangan='$keterangan' WHERE id=$id";  
     $query = mysqli_query($db, $sql);  
     // apakah query update berhasil?  
     if( $query ) {  
       // kalau berhasil alihkan ke halaman list-siswa.php  
       header('Location: list-siswa.php');  
     } else {  
       // kalau gagal tampilkan pesan  
       die("Gagal Menyimpan Perubahan!");  
     }  
   } else {  
     die("Akses Dilarang!");  
   }  
 ?>

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