EVALUASI AKHIR SEMESTER PWEB

MEMBUAT WEBSITE PPDB


Karina Soraya Puspitasari
05111740000003
PWEB - C


1. Rancangan database untuk website PPDB sebagai berikut :

2. Rancangan interface websitenya sebagai berikut :

Rancangan Interface untuk halaman Log-In

Rancangan Interface untuk Halaman Depan Website PPDB

Rancangan Interface untuk Form Pendaftaran atau Form Edit Pendaftaran

Rancangan Interface untuk Halaman View Formulir atau Hasil Download


Dimana data yang dibutuhkan merupakan atribut pada tabel pendaftaran seperti apa yang sudah dirancang pada nomer satu


3. Implementasi :

  • Source Code config.php
  <?php    
  $server = "ajax.karinasraya.xyz";    
  $user = "karinasr_karina";    
  $password = "24maret2014";    
  $nama_database = "karinasr_Rapor";    
  $db = mysqli_connect($server, $user, $password, $nama_database);    
  if( !$db ){    
   die("Gagal terhubung dengan database: " . mysqli_connect_error());    
  }    
  ?>
  • Source Code data-list-siswa.php
 <?php include("config.php"); ?>    
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
  <table class="table table-hover" align="center">    
   <thead>    
   <tr>    
    <th>No</th>    
    <th>Nama</th>    
    <th>Alamat</th>    
    <th>Jenis Kelamin</th>    
    <th>Agama</th>    
    <th>Rata-Rata UN</th>  
    <th>Sekolah Asal</th>   
    <th>Sekolah Tujuan</th>  
    <th>Tindakan</th>    
   </tr>    
   </thead>    
   <tbody>    
   <?php    
   $sql = "SELECT * FROM Pendaftaran";    
   $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['nilaiUN']."</td>";   
    echo "<td>".$siswa['sekolah_asal']."</td>";    
    echo "<td>".$siswa['sekolah_tujuan']."</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="home.php"><button type="button">Menu Utama</button></a>    
  &emsp; <a href="form-daftar.php"><button type="button">Tambah Data</button></a></p>
  • Source Code download.php
 <?php  
 $connect = mysqli_connect("daftar.karinasraya.xyz", "karinasr_karina", "24maret2014", "karinasr_Rapor");  
 $sql = "SELECT * FROM Pendaftaran";   
 $result = mysqli_query($connect, $sql);  
 ?>  
 <html>   
  <head>   
  <title>DOWNLOAD FORMULIR</title>   
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />   
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>   
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>   
  </head>   
  <body>   
  <div class="container">   
   <br />   
   <br />   
   <br />   
   <div class="table-responsive">   
   <h2 align="center">FORMULIR PPDB KABUPATEN JEMBER</h2><br />   
   <table class="table table-bordered">  
    <tr>   
    <th>No</th>    
    <th>Nama</th>    
    <th>Alamat</th>    
    <th>Jenis Kelamin</th>    
    <th>Agama</th>    
    <th>Rata-Rata UN</th>  
    <th>Sekolah Asal</th>   
    <th>Sekolah Tujuan</th>  
           </tr>  
    <?php  
    while($row = mysqli_fetch_array($result))   
    {   
     echo '   
     <tr>   
      <td>'.$row["id"].'</td>   
      <td>'.$row["nama"].'</td>   
      <td>'.$row["alamat"].'</td>   
      <td>'.$row["jenis_kelamin"].'</td>   
      <td>'.$row["agama"].'</td>   
      <td>'.$row["nilaiUN"].'</td>  
      <td>'.$row["sekolah_asal"].'</td>   
      <td>'.$row["sekolah_tujuan"].'</td>   
     </tr>   
     ';   
    }  
    ?>  
   </table>  
   <br />  
   <form method="post" action="export.php">  
    <input type="submit" name="export" class="btn btn-success" value="Export" />  
   </form>  
   </div>   
  </div>   
  </body>   
 </html>
  • Source Code errors.php
 <?php if (count($errors) > 0) : ?>  
  <div class="error">  
       <?php foreach ($errors as $error) : ?>  
        <p><?php echo $error ?></p>  
       <?php endforeach ?>  
  </div>  
 <?php endif ?>
  • Source Code export.php
 <?php   
 //export.php   
 $connect = mysqli_connect("daftar.karinasraya.xyz", "karinasr_karina", "24maret2014", "karinasr_Rapor");  
 $output = '';  
 if(isset($_POST["export"]))  
 {  
  $query = "SELECT * FROM Pendaftaran";  
  $result = mysqli_query($connect, $query);  
  if(mysqli_num_rows($result) > 0)  
  {  
  $output .= '  
   <table class="table" bordered="1">   
           <tr>   
    <th>No</th>    
    <th>Nama</th>    
    <th>Alamat</th>    
    <th>Jenis Kelamin</th>    
    <th>Agama</th>    
    <th>Rata-Rata UN</th>  
    <th>Sekolah Asal</th>   
    <th>Sekolah Tujuan</th>  
           </tr>  
  ';  
  while($row = mysqli_fetch_array($result))  
  {  
   $output .= '  
   <tr>   
      <td>'.$row["id"].'</td>   
      <td>'.$row["nama"].'</td>   
      <td>'.$row["alamat"].'</td>   
      <td>'.$row["jenis_kelamin"].'</td>   
      <td>'.$row["agama"].'</td>   
      <td>'.$row["nilaiUN"].'</td>  
      <td>'.$row["sekolah_asal"].'</td>   
      <td>'.$row["sekolah_tujuan"].'</td>   
           </tr>  
   ';  
  }  
  $output .= '</table>';  
  header('Content-Type: application/xls');  
  header('Content-Disposition: attachment; filename=download.xls');  
  echo $output;  
  }  
 }  
 ?>
  • Source Code form-daftar.php
 <!DOCTYPE HTML>    
  <html>    
  <head>    
   <title>PPDB KABUPATEN JEMBER</title>    
   <link rel="icon" type="image/png" href="Logo.png">    
   <style type="text/css">    
     body {    
   background-color: #FF7F50;    
   }    
   fieldset{    
   background-color: #D2691E;    
   }    
   </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 nilai = document.getElementById("nilaiUN").value;   
      var school = document.getElementById("sekolah_asal").value;    
      var tujuan = document.getElementById("sekolah_tujuan").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 + "&nilai=" + nilai + "&school=" + school + "&tujuan=" + tujuan, true);    
      xmlhttp.send();    
     }    
   </script>    
   <header>    
     <h3 align="center">Formulir Pendaftaran</h3>    
     <meta charset="utf-8">   
     <meta name="viewport" content="width=device-width, initial-scale=1">   
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
   </header>    
   <form class="form-horizontal" 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="nilaiUN">Rata-Rata UN : </label>    
    <input type="number" id="nilaiUN" placeholder="skala 0-100" />    
    </p>   
    <p align="center">    
    <label for="sekolah_asal">Sekolah Asal: </label>    
    <input type="text" id="sekolah_asal" placeholder="nama sekolah" />    
    </p>   
     <p align="center">    
    <label for="sekolah_tujuan">Sekolah Tujuan: </label>    
    <input type="text" id="sekolah_tujuan" placeholder="nama sekolah" />    
    </p>   
    <p align="center">    
    <button type="button" class="btn btn-default" onclick="insertData()">Daftar</button>   
    &emsp;    
    <a href="home.php">    
    <button type="button" class="btn btn-default">Menu Utama</button>   
    </a>   
    </p>    
     </fieldset>    
   </form>    
  </body>    
  </html>
  • Source Code form-edit.php
 <?php   
  include("config.php");   
  if( !isset($_GET['id']) ){   
   header('Location: list-siswa.php');   
  }   
  $id = $_GET['id'];   
  $sql = "SELECT * FROM Pendaftaran WHERE id=$id";   
  ?>   
  <script type="text/javascript">   
    function updateData(){   
     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 nilai = document.getElementById("nilaiUN").value;   
     var school = document.getElementById("sekolah_asal").value;   
     var tujuan = document.getElementById("sekolah_tujuan").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 + "&nilai=" + nilai + "&school=" + school + "&tujuan=" + tujuan, true);   
     xmlhttp.send();   
    }   
  </script>   
  <!DOCTYPE html>   
  <html>   
  <head>   
   <title>FORMULIR PENDAFTARAN PPDB</title>   
   <link rel="icon" type="image/png" href="Logo.png">    
   <style type="text/css">   
    body {    
    background-color: #FF7F50;    
   }    
   fieldset{    
    background-color: #D2691E;   
   }    
   </style>   
  </head>   
  <body>   
   <header>   
       <h3 align="center">Edit Formulir Pendaftaran</h3>    
     <meta charset="utf-8">   
     <meta name="viewport" content="width=device-width, initial-scale=1">   
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
   </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="nilaiUN">Rata-Rata UN: </label>   
     <input type="number" id="nilaiUN" placeholder="skala 0-100"/>   
    </p>   
    <p align="center">   
     <label for="sekolah_asal">Sekolah Asal: </label>   
     <input type="text" id="sekolah_asal" placeholder="nama sekolah"/>   
    </p>   
    <p align="center">   
     <label for="sekolah_tujuan">Sekolah Tujuan: </label>   
     <input type="text" id="sekolah_tujuan" placeholder="nama sekolah"/>   
    </p>   
    <p align="center">   
     <input type="button" value="Update" name="update" onclick="updateData()" />   
    </p>   
    </fieldset>   
   </form>   
   </body>   
  </html>
  • Source Code hapus.php
 <?php   
  include("config.php");   
  if( isset($_GET['id']) )   
  {   
   // mengambil ID dari query   
   $id = $_GET['id'];   
   // menghapus data dari database   
   $sql = "DELETE FROM Pendaftaran 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');   
  }   
  ?>
  • Source Code home.php
  <!DOCTYPE HTML>    
  <html>    
  <head>    
   <title>PEMERINTAH KABUPATEN JEMBER</title>    
   <link rel="icon" type="image/png" href="Logo.png">    
    <style type="text/css">    
   ul{    
   display:table; margin:0 auto;    
   }    
   body {    
   background-color: white;    
   }    
   fieldset{    
   background-color: #D2691E;    
   }    
  </style>    
  </head>    
  <body>    
   <header>    
     <h2 align="center">PENERIMAAN PESERTA DIDIK BARU</h2>  
     <h2 align="center">KABUPATEN JEMBER</h2>   
     <center><img src="Logo.png" width="300px" height="200px"/></center>   
   </header>    
   <br>  
   <br>  
   <fieldset>    
   <nav>    
   <center>   
      <a href="form-daftar.php"><button type="button" class="btn btn-default">Tambahkan Pendaftar</button></a>   
      <br>   
      <a href="list-siswa.php"><button type="button" class="btn btn-default">List Pendaftar</button></a>    
      <br>  
      <a href="view.php"><button type="button" class="btn btn-default">View Formulir</button></a>    
   </center>   
   </nav>    
   </fieldset>    
  </body>    
  </html>
  • Source Code index.php
 <?php   
  session_start();   
  if (!isset($_SESSION['username'])) {  
       $_SESSION['msg'] = "You must log in first";  
       header('location: login.php');  
  }  
  if (isset($_GET['logout'])) {  
       session_destroy();  
       unset($_SESSION['username']);  
       header("location: login.php");  
  }  
 ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>PPDB KABUPATEN JEMBER</title>  
      <link rel="stylesheet" type="text/css" href="style.css">  
       <link rel="icon" type="image/png" href="Logo.png">    
 </head>  
 <body>  
 <div class="header">  
      <h2>Home Page</h2>  
 </div>  
 <center><div class="content">  
       <!-- notification message -->  
       <?php if (isset($_SESSION['success'])) : ?>  
    <div class="error success" >  
         <h3>  
      <?php   
           echo $_SESSION['success'];   
           unset($_SESSION['success']);  
      ?>  
         </h3>  
    </div>  
       <?php endif ?>  
   <!-- logged in user information -->  
   <?php if (isset($_SESSION['username'])) : ?>  
        <p>Welcome <strong><?php echo $_SESSION['username']; ?></strong></p>  
        <br>  
        <br>  
        <p> <a href="home.php" style="color: black;">PPDB KABUPATEN JEMBER</a> </p>  
        <p> <a href="index.php?logout='1'" style="color: red;">logout</a> </p>  
   <?php endif ?>  
 </div></center>  
 </body>  
 </html>
  • Source Code list-siswa.php
  <?php include("config.php"); ?>   
  <!DOCTYPE html>   
  <html>   
  <head>   
   <title>PPDB KABUPATEN JEMBER</title>   
   <link rel="icon" type="image/png" href="Logo.png">    
   <style type="text/css">   
    body {    
    background-color: #FF7F50;    
   }    
   fieldset{    
    background-color: #D2691E;   
   }    
   </style>   
  </head>   
  <body>   
   <header>   
    <h2 align="center">LIST PENDAFTAR</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>
  • Source Code login.php
 <?php include('server.php') ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>PPDB KABUPATEN JEMBER</title>  
  <link rel="stylesheet" type="text/css" href="style.css">  
   <link rel="icon" type="image/png" href="Logo.png">    
 </head>  
 <body>  
  <div class="header">  
       <h2>Login</h2>  
  </div>  
  <form method="post" action="login.php">  
       <?php include('errors.php'); ?>  
       <div class="input-group">  
            <label>Username</label>  
            <input type="text" name="username" >  
       </div>  
       <div class="input-group">  
            <label>Password</label>  
            <input type="password" name="password">  
       </div>  
       <div class="input-group">  
            <button type="submit" class="btn" name="login_user">Login</button>  
       </div>  
       <p>  
            Not yet a member? <a href="register.php">Sign up</a>  
       </p>  
  </form>  
 </body>  
 </html>
  • Source Code proses-edit.php
 <?php   
  include("config.php");   
  $id = $_GET['id'];   
  $nama_siswa = $_GET['name'];   
  $alamat = $_GET['address'];   
  $jenis_kelamin = $_GET['gender'];   
  $agama = $_GET['religion'];   
  $nilaiUN = $_GET['nilai'];   
  $sekolah_asal = $_GET['school'];   
  $sekolah_tujuan = $_GET['tujuan'];   
   // buat query update   
   $sql = "UPDATE Pendaftaran SET nama='$nama_siswa', alamat='$alamat', jenis_kelamin='$jenis_kelamin', agama='$agama', nilai='$nilaiUN',sekolah_asal='$sekolah_asal',sekolah_tujuan='$sekolah_tujuan' 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";   
   }   
  ?>
  • Source Code proses-hapus.php
  <?php include("config.php"); ?>    
  <?php    
   mysqli_query($db, "delete from Pendaftaran where id = ".$_GET['id']);    
  ?>
  • Source Code proses-pendaftaran.php
 <?php    
   include("config.php");    
   $nama = $_GET['name'];    
   $alamat = $_GET['address'];    
   $jenis_kelamin = $_GET['gender'];    
   $agama = $_GET['religion'];    
   $nilaiUN = $_GET['nilai'];    
   $sekolah_asal = $_GET['school'];    
   $sekolah_tujuan = $_GET['tujuan'];    
   $sql = "INSERT INTO Pendaftaran (nama, alamat, jenis_kelamin, agama, nilaiUN, sekolah_asal, sekolah_tujuan) VALUE('$nama', '$alamat', '$jenis_kelamin', '$agama','$nilaiUN', '$sekolah_asal','$sekolah_tujuan')";    
   $query = mysqli_query($db,$sql);    
   if($query)    
   {    
    // jika berhasil    
    echo "Data berhasil dimasukkan.";    
   }    
   else    
   {    
    //jika gagal    
    echo "Data gagal dimasukkan.";    
   }    
  ?>
  • Source Code register.php
 <?php include('server.php') ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>PPDB KABUPATEN JEMBER</title>  
  <link rel="stylesheet" type="text/css" href="style.css">  
   <link rel="icon" type="image/png" href="Logo.png">    
 </head>  
 <body>  
  <div class="header">  
       <h2>Register</h2>  
  </div>  
  <form method="post" action="register.php">  
       <?php include('errors.php'); ?>  
       <div class="input-group">  
        <label>Username</label>  
        <input type="text" name="username" value="<?php echo $username; ?>">  
       </div>  
       <div class="input-group">  
        <label>Email</label>  
        <input type="email" name="email" value="<?php echo $email; ?>">  
       </div>  
       <div class="input-group">  
        <label>Password</label>  
        <input type="password" name="password_1">  
       </div>  
       <div class="input-group">  
        <label>Confirm password</label>  
        <input type="password" name="password_2">  
       </div>  
       <div class="input-group">  
        <button type="submit" class="btn" name="reg_user">Register</button>  
       </div>  
       <p>  
            Already a member? <a href="login.php">Sign in</a>  
       </p>  
  </form>  
 </body>  
 </html>
  • Source Code server.php
 <?php  
 session_start();  
 // initializing variables  
 $username = "";  
 $email  = "";  
 $errors = array();   
 // connect to the database  
 $db = mysqli_connect('daftar.karinasraya.xyz', 'karinasr_karina', '24maret2014', 'karinasr_PPDB');  
 // REGISTER USER  
 if (isset($_POST['reg_user'])) {  
  // receive all input values from the form  
  $username = mysqli_real_escape_string($db, $_POST['username']);  
  $email = mysqli_real_escape_string($db, $_POST['email']);  
  $password_1 = mysqli_real_escape_string($db, $_POST['password_1']);  
  $password_2 = mysqli_real_escape_string($db, $_POST['password_2']);  
  // form validation: ensure that the form is correctly filled ...  
  // by adding (array_push()) corresponding error unto $errors array  
  if (empty($username)) { array_push($errors, "Username is required"); }  
  if (empty($email)) { array_push($errors, "Email is required"); }  
  if (empty($password_1)) { array_push($errors, "Password is required"); }  
  if ($password_1 != $password_2) {  
      array_push($errors, "The two passwords do not match");  
  }  
  // first check the database to make sure   
  // a user does not already exist with the same username and/or email  
  $user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";  
  $result = mysqli_query($db, $user_check_query);  
  $user = mysqli_fetch_assoc($result);  
  if ($user) { // if user exists  
   if ($user['username'] === $username) {  
    array_push($errors, "Username already exists");  
   }  
   if ($user['email'] === $email) {  
    array_push($errors, "email already exists");  
   }  
  }  
  // Finally, register user if there are no errors in the form  
  if (count($errors) == 0) {  
       $password = md5($password_1);//encrypt the password before saving in the database  
       $query = "INSERT INTO users (username, email, password)   
                  VALUES('$username', '$email', '$password')";  
       mysqli_query($db, $query);  
       $_SESSION['username'] = $username;  
       $_SESSION['success'] = "You are now logged in";  
       header('location: index.php');  
  }  
 }  
 // ...   
 if (isset($_POST['login_user'])) {  
  $username = mysqli_real_escape_string($db, $_POST['username']);  
  $password = mysqli_real_escape_string($db, $_POST['password']);  
  if (empty($username)) {  
       array_push($errors, "Username is required");  
  }  
  if (empty($password)) {  
       array_push($errors, "Password is required");  
  }  
  if (count($errors) == 0) {  
       $password = md5($password);  
       $query = "SELECT * FROM users WHERE username='$username' AND password='$password'";  
       $results = mysqli_query($db, $query);  
       if (mysqli_num_rows($results) == 1) {  
        $_SESSION['username'] = $username;  
        $_SESSION['success'] = "You are now logged in";  
        header('location: index.php');  
       }else {  
            array_push($errors, "Wrong username/password combination");  
       }  
  }  
 }  
 ?>
  • Source Code style.css
 * {  
  margin: 0px;  
  padding: 0px;  
 }  
 body {  
  font-size: 120%;  
  background:#E6E6FA;  
 }  
 .header {  
  width: 30%;  
  margin: 50px auto 0px;  
  color: black;  
  background: #A9A9A9;  
  text-align: center;  
  border: 1px solid #B0C4DE;  
  border-bottom: none;  
  border-radius: 10px 10px 0px 0px;  
  padding: 20px;  
 }  
 form, .content {  
  width: 30%;  
  margin: 0px auto;  
  padding: 20px;  
  border: 1px solid #A9A9A9;  
  background: white;  
  border-radius: 0px 0px 10px 10px;  
 }  
 .input-group {  
  margin: 10px 0px 10px 0px;  
 }  
 .input-group label {  
  display: block;  
  text-align: left;  
  margin: 3px;  
 }  
 .input-group input {  
  height: 30px;  
  width: 93%;  
  padding: 5px 10px;  
  font-size: 16px;  
  border-radius: 5px;  
  border: 1px solid gray;  
 }  
 .btn {  
  padding: 10px;  
  font-size: 15px;  
  color: black;  
  background: #A9A9A9;  
  border: none;  
  border-radius: 5px;  
 }  
 .error {  
  width: 92%;   
  margin: 0px auto;   
  padding: 10px;   
  border: 1px solid #a94442;   
  color: #a94442;   
  background: #f2dede;   
  border-radius: 5px;   
  text-align: left;  
 }  
 .success {  
  color: #3c763d;   
  background: #dff0d8;   
  border: 1px solid #3c763d;  
  margin-bottom: 20px;  
 }
  • Source Code view.php
 <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Formulir PPDB KABUPATEN JEMBER</title>  
   <link rel="icon" type="image/png" href="Logo.png">   
   <style type="text/css">   
   body {  
     background: #FFE4C4;  
     font-family: sans-serif;  
   }  
   .login {  
     padding: 1em;  
     margin: 2em auto;  
     width: 30em;  
     background: #fff;  
     border-radius: 3px;  
   }  
   label {  
     font-size: 10pt;  
     color: #555;  
   }  
   textarea {  
     padding: 8px;  
     width: 95%;  
     background: #efefef;  
     border: 0;  
     font-size: 10pt;  
     margin: 6px 0px;  
   }  
   .tombol {  
     background: #7A0000;  
     color: #fff;  
     border: 0;  
     padding: 5px 8px;  
   }  
 </head>  
 </style>  
 <body>  
     <header>  
     <h2 align="center">FORMULIR PENDAFTARAN SISWA BARU 2019</h2>  
     <h3 align="center">SEKOLAH MENENGAH ATAS KABUPATEN JEMBER</h3>  
     </header>  
     <div class="login">  
     <fieldset>  
     <p>  
     <?php  
     $sql = "SELECT * FROM Pendaftaran";  
     $query = mysqli_query($db, $sql);  
     $siswa = mysqli_fetch_array($query);  
     echo "<p align='center'> FORMULIR PENDAFTARAN SISWA BARU 2019</p>";  
     echo " <p align='center'> SEKOLAH MENENGAH ATAS KABUPATEN JEMBER</p>";  
     echo "__________________________________________________";  
     echo "<br />";  
     echo "<br />";  
     echo "<strong>Nama</strong><br>";  
     echo $siswa['nama']; echo "<br>";  
     echo "<br />";  
     echo "<strong>Alamat</strong><br>";  
     echo $siswa['alamat']; echo "<br>";  
     echo "<br />";  
     echo "<strong>Jenis Kelamin</strong><br>";  
     echo $siswa['jenis_kelamin']; echo "<br>";  
     echo "<br />";  
     echo "<strong>Agama</strong><br>";  
     echo $siswa['agama']; echo "<br>";  
     echo "<br />";  
     echo "<strong>Rata-Rata UN</strong><br>";  
     echo $siswa['nilaiUN']; echo "<br>";  
     echo "<br />";  
     echo "<strong>Sekolah Asal</strong><br>";  
     echo $siswa['sekolah_asal']; echo "<br>";  
     echo "<br />";  
     echo "<strong>Sekolah Tujuan</strong><br>";  
     echo $siswa['sekolah_tujuan']; echo "<br>";  
     echo "<br /></br></br></br>";  
     echo "<p align='right'>Tertanda,</p>";  
     echo "<p align='right'>Panitia PPDB Kabupaten Jember</p>";  
     ?>  
     </p>  
 </html>   
    <p align="right">  
    <a href="download.php">    
    <button type="button" class="btn btn-default">Download</button>   
    </a>   
    </p>   
 </body>
  • Hasil Implementasi
Tampilan awal Log-in


Jika belum memiliki akun, maka klik bagian Sign-up, kemudian akan ditampilkan formulir registrasi


Kemudian isikan data diri lalu klik register


Jika sudah memiliki akun, maka anda bisa langsung memasukkan username dan password


Jika berhasil Log-in akan muncul tampilan sebagai berikut


Halaman Awal PPDB Kabupaten Jember

Ketika memilih tambahkan pendaftar akan muncul form pendaftaran

Lalu isi form pendaftaran


Jika form telah diisi, klik daftar


Kemudian hasil input pada form pendaftaran akan muncul di list pendaftar, disana kita dapat mengedit form atau menghapusnya

Jika ingin mengedit data, maka klik edit dan akan ditampilkan formulir pendaftaran yang akan di edit


Jika kita memilih View Formulir akan muncul tampilan sebagai berikut



Kemudian jika kita ingin mengunduh formulir, klik tombol download lalu akan muncul tampilan sebagai berikut

Lalu pilih export untuk mendownload file




Komentar

Posting Komentar

Postingan Populer