Membuat Login Sederhana Pada SimDesa

Assalamu'alaikum Wr. Wb. pada kesempatan kali ini saya akan meneruskan postingan sebelumnya yang masih membahas tentang Aplikasi Desa dengan SimDesa. Nah, disini saya akan berbagi tentang bagaimana cara membuat tampilan login sederhana pada SimDesa. Sebelum itu kita bahas dulu maksud pembuatan dari login pada Aplikasi Desa ini.

A. Pengertian

SimDesa ini adalah sebuah CMS yang mempermudah sebuah desa untuk memanagement semua administrasi desa yang disediakan oleh desa untuk masyarakatnya.

B. Latar Belakang

Setelah kemarin kita sudah menginstall dan measukkan database kita sudah bisa menggunakannya. Hanya saja kita belum bisa untuk membuat sebuah user siapa saja yang akan mengakses. Jadi kita belum tahu siapa saja yang sudah merubah atau mengganti serta menambahkan beberapa perintah pada SimDesa tersebut.

C. Maksud dan Tujuan

Maksud dan tujuan saya membuat konfigurasi ini adalah saya ingin membuat sebuah login sederhana yang diperuntukkan agar siapa saja yang bisa mengakses SimDesa ini. Jadi tidak semua orang bisa mengakses, kita harus melewati tahap login untuk agar bisa masuk kedalam fitur fitur SimDesa.

D. Jangka Waktu

Jangka watu pelaksanaan untuk membuat sebuah tampilan login sederhana ini kurang lebih 15-20 menit.

E. Alat dan Bahan

Server / PC yang suda terinstall SimDesa dan sudah memasukkan database
LAMP Server (Installed)
Beberapa script untuk tampilan login

F. Langkah Kerja

1. Pertama pastikan kita sudah meng-install SimDesa dan LAMP Server serta sudah memasukkan database nya.

2. Setelah itu kita masuk pada phpmyadmin dan buat database disana. Disitu saya membuat nama databasenya dengan nama "login"

3. Setelah kita membuat database, kita masuk pada database yang telah kita buat dan pilih tab Structure. Kita bisa isikan seperti dibawah

4. Kemudian kita isikan seperti dibawah dan kita klik save untuk melanjutkan konfigurasi

5. Setelah itu kita buka terminal, masuk superuser, dan masuk pada direktori /var/www/html/simdesa-master/

6. Kemudian pada direktori tersebut kita buat file direktori untuk login. Disini saya memberi nama pada direktori tersebut dengan nama login

#mkdir login

7. Kemudian kita masuk pada direktori login tersebut

#cd login

8. Nah, disini kita memasukkan beberapa script pada beberapa file.php, pertama saya akan memasukkan script pada file index.php, sebelumnya kita masuk pada file index.php

#nano index.php

9. Nah pada file index.php ini kita masukkan beberapa script. Kalian bisa copy paste scriptnya dibawah

<!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 keluar dan save dengan perintah ctrl + x kemudian y dan enter

10. Kemudian kita masukkan lagi beberapa script pada connect.php

11. Kemudian kita masukkan lagi script scriptnya. Kalian bisa copy paste lagi

<?php

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

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

?>

Kemudian kita keluar dan save dengan perintah ctrl + x kemudian y dan enter

12. Setelah itu kita masukkan lagi script pada login.php

#nano login.php

13. Tambahkan script dibawah ini

<?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 keluar dan save dengan perintah ctrl + x kemudian y dan enter

14. Kemudian kita masuk pada pada home.php

#nano home.php

15. Tambahkan lagi beberapa script dibawah 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 keluar dan save dengan perintah ctrl + x kemudian y dan enter

16. Kemudian kita masukkan script terakhir yaitu pada logout.php

#nano logout.php

17. Kalian bisa copy paste script dibawah ini

<?php
session_start();
if(session_destroy()){
header("Location: index.php");
}

?>

18. Kemudian kita coba masuk dengan menambahkan /login pada saat kita mengakses SimDesa melalui web browser

localhost/simdesa-master/login

G. Kesimpulan

Sebelum kita membuat login pada SimDesa, semua orang dapat mengakses dengan sesuka hatinya. Nah, tidak ada salahnya setelah kita membuat database untuk SimDesanya lalu membuat login untuk SimDesanya. Agar tidak semua orang dapat mengaksesnya sesuka hati. Jadi disini kita perlu membuat sebuah login SimDesa agar hanya orang orang tertentu yang dapat mengakses.

H. Referensi