Selasa, 03 Januari 2017

Membuat Halaman Login Sederhana Pada SIMDES

Om Swastyastu

Kali ini saya akan berbagi tentang bagaimana cara membuat membuat halaman login sederhana di Aplikasi SIMDES.

1.PENGERTIAN
Hasil gambar untuk login
SIMDES adalah program aplikasi komputer yang berbasis desktop yang dapat digunakan oleh kantor kelurahan maupun kabupaten, untuk mencatat data kependudukan mulai informasi Kartu Keluarga, kematian warga, kelahiran dan surat pengantar. Aplikasi SIMDES ini dibuat dengan menggunakan bahasa pemrograman PHP, MySql, serta Twitter Bootstraps untuk desain yang responsive dan menarik.

2.LATAR BELAKANG

Latar belakang saya membuat halaman  login sederhana pada SIMDES adalah
karena dalam aplikasi simdes orang akan gampang langsung masuk ke aplikasii tersebut, sehingga tingkat keamanannya tidak akan bisa terjamin

3.MAKSUD DAN TUJUAN

Maksud dan tujuan saya membuat halaman login pada simdes ini adalah agar seseorang tidak asal bisa keluar masuk pada aplikasi yang sudah kita install, jadi dengan membuat halaman login maka orang tidak akan sembarang bisa masuk ke aplikasi ini.

4. ALAT DAN BAHAN YANG DIBUTUHKAN
  • laptop/pc yang sudah terinstall simdes
  • koneksi internet
5.JANGKA WAKTU

Jangka waktu yang dbutuhkan untuk membuat halaman sederhana pada simdes adalah 30 menit

6.TAHAP PELAKSANAAN
  • Tahap pertama kita kita buatt databasenya terlebih dahulu, disini saya membuat databasenya dengan nama login.                                                                                              
     
  • - Setelah kita membuat database, kita masuk pada database yang telah kita buat dan pilih tab Structure. Kita bisa isikan seperti dibawah
  • Kemudian kita isikan seperti dibawah dan kita klik save untuk melanjutkan konfigurasi                                                                                                     
  • Kemudian kita buat folder pada direktory semdesa,disini saya membuat folder dengan nama login, dengan perintah #mkadir login.
  • Kemudian kita pindah ke direktory yang kita buat tadi, dengan perintah #cd login
    -Kemudian kita akan menambahkan skrip pada php.ini, dengan cara mengetik perintah pada terminal #nano index.php
    -Kemudian tambahkan skript dengan mengkopy skript di bawah ini.
    <!DOCTYPE html>
    <html>
    <head>
     <title>Login Sederhana Dengan MySqli</title>
     <style>
     .form {
      margin: 10% 0 0 25%;
      float: left;
      width: 60%;
     }
     .input {
      padding: 1%;
      color: #777777;
      font-size: 14pt;
      float: left;
      width: 80%;
      margin-bottom: 1%;
     }
     .submit {
      padding: 1%;
      color: #fff;
      background-color: #11b022;
      font-size: 14pt;
      font-family: Times New Roman;
      float: left;
      width: 25%;
     }
     .welcome {
      color: #11bb22;
      font-size: 20pt;
      font-weight: 900;
      font-family: Centaur;
     }


     </style>
    </head>
    <body>

    <div class="form">
    <span class="welcome">Harap Login Terlebih Dahulu !</span>
     <form action="login.php" method="post">
      <input class="input" type="text" name="username" placeholder="Username">
      <input class="input" type="text" name="password" placeholder="Password">
      <input class="submit" type="submit" value="Login">
     </form>
    </div>
    </body>
    </html>
     

    Kemudian kita akan memasukkan beberapa skript lagi pada connect.php dengan perintah #nano connect.php

  • -Kemudian copykan skrip di bawah pada connect.php                                                             <?php

    $host  = 'localhost';
    $user  = 'root';
    $pass = '';
    $db    = 'loginmysqli';

    $connect = new mysqli($host, $user, $pass, $db);
    if($connect->connect_error){
     echo 'Terjadi Kesalahan';
    }

    ?>
  •  

    -jika sudah maka kita simpan dengan menekan ctrl+x lalu y kemudian tekan Enter. Setelah itu kita akan mengkonfigurasi pada login.php dengan perintah #nano login.php

  • -kemudian tambahkan skript atau langsung copykan sript dibawah ini, setelah itu disimpan dengan menekan ctrl+x lalu y kemudian tekan Enter
  • <?php
    include 'connect.php';

    $username = $_POST['username'];
    $password = $_POST['password'];

    $query    = "SELECT * FROM admin WHERE username = '$username' AND password = '$password'";
    $runquery = $connect->query($query);

    if($runquery->num_rows > 0){
     session_start();
     $_SESSION['username'] = $username;
     header("Location: home.php");
    } else {
     echo '<h1>
    Username atau Kata Sandi Salah!</h1>
    ';
    }

    ?>
  •  
  • kemudian kita akan mengkonfigurasi pada home.php dengan perintah #nano home.php
  • -kemudian tambahkan skript di bawah ini
  • <?php
    session_start();
    if(!isset($_SESSION['username'])) {
     header("Location: index.php?access_denied");
    }

    ?>

    <!DOCTYPE html>
    <html>
    <head>
     <title>Halaman Admin</title>
     <style>
     .welcome {
      color: #11bb22;
      font-size: 35pt;
      font-weight: 900;
      font-family: Centaur;
     }
     </style>
    </head>
    <body>

    <h1 class="welcome">
    Selamat Datang <?php echo $_SESSION['username']; ?>!</h1>
    <a href="logout.php">Log Out >></a>

    </body>
    </html>
  •  
  • -Kemudian kita akan mengkonfigurasi pada logout.php dengan perintah #nano logout.php

  • -Kemudian tambahkan skript di bawah iini
  • <?php
    session_start();
    if(session_destroy()){
     header("Location: index.php");
    }

    ?>
    kemudian kita simpan dengan menekan CTRL+X lalu y kemudian tekan Enter. 
  • -Setelah itu kita cek dengan masuk ke web  browser dengan cara mengetik pada localhost
  • localhost/simdes/login jika berhasil maka akan muncul tampilan seperti pada gambar di bawah ini

7.HASIL DAN KESIMPULAN

Hasilnya saya dapat mebuat halaman login sederhana pada aplikasi simdes kita, dengan membuat halaman login sederhana ini maka user tidak akan bisa sembarang masuk pada aplikasi simdes ini, aplikasi simdes ini digunakan untuk mempermudah admin desa mencatat tentang desa   tersebut, sehingga aplikasi ini dapat dimanfaatkan dengan lebih optimal.


8.REFERENSI

http://www.sentralteknologi.com/2016/05/cara-membuat-halaman-login-sederhana.html

Mungkin cukup sekian terima kasih dan semoga bermanfaat.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)