Membuat sebuah tampilan login sederhana pada CMS SimDesa

A. Pengertian

CMS SimDes atau sebuah sistem manajemen desa merupakan sebuah CMS yang dapat membantu memenejemen administrasi pada desa sehingga dapat mempermudah untuk pendataan dan lain sebagainya.

B. Latar belakang, Maksud dan tujuan

CMS SimDes atau sebuah sistem manajemen desa merupakan sebuah CMS yang dapat membantu memenejemen administrasi pada desa sehingga dapat mempermudah untuk pendataan dan lain sebagainya, Namun aplikasi ini memiliki sebuah kekurangan pada keamananya yang sangat terlihat yaitu kita tidak perlu melakukan login kedalam CMS ini. Karena tidak ada loginnya maka siapa saja dapat masuk ini sangat rawan karena siapapun bisa mengubah data-data yang terdapat pada server. dan ini membuat saya berinisiatif untuk membuat sebuah login untuk CMS ini.

C. Alat dan Bahan
- Server/localhost yang sudah terinstall CMS SimDesanya
- PC/Laptop
- Beberapa script

D. Langkahnya

1. Pertama kita pastikan sudah mengintall LAMP Servernya atau jika menggunaka windows XAMPPnya dan juga phpmyadminnya.

2. Kita buka terlebih dulu phpmyadminnya dengan cara menuliskan pada URL Browser 'localhost/phpmyadmin' jika pada localhost jika pada server 'IP Servernya/phpmyadmin'

setelahnya akan muncul seperti gambar dibawah,

Kita buat database untuk loginnya pada phpmyadminnya dengan cara tekan 'Darabase' pada tab menu dipojok kiri atas, Setelah itu isikan nama databasenya pada kolom losong seperti gambar diatas lalu tekan 'Create'

3. Selanjutnya kita buat table pada tab 'structure' selanjutnya akan muncul seperti gambar dibawah,
kita isikan nama tablenya pada kolom kosong tersebut isikan jumlahnya 4 untuk melanjutkannya tekan 'go'

4. Kita buat tablenya seperti gambar dibawah,

Lalu tekan 'go' untuk melanjutkan pembuatn tablenya.

5. Pada directory simdesnya kita buat sebuah directory baru untuk loginnya dengan cara memasukan perintah berikut,

|# mkdir login

Seperti gambar dibawah,

6. Lalu kita masuk pada directory yang kita buat tadi dengan perintah,

|# cd login/

Seperti gambar dibawah,

7. lalu kita buat scriptnya dengan perintah berikut,

|#nano index.php

Selanjutnya kita masukan script 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>

Seperti gambar dibawah,

8. Selanjutnya kita buat lagi scriptnya dengan perintah berikut,

| #nano connect.php

Seperti gambar dibawah,

Lalu masukan script berikut,

<?php

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

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

?>

Seperti gambar dibawah,

9. Kita buat lagi dengan perintah berikut,

|# nano login.php

Seperti gambar dibawah,

Lalu masukan script berikut,

<?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>
';
}

?>

Seperti gambar berikut,

10. Kita buat lagi scripnya dengan perintah berikut,

|# nano home.php

Seperti gambar berikut,

lalu masukan script berikut,

<?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>

Seperti gambar dibawah,

11. Terakhir kita buat lagi untuk logoutnya dengan cara memasukan perintah berikut,

|# nano logout.php

seperti gambar dibawah,

Lalu masukan script berikut,

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

?>

Seperti gambar dibawah,

Sampai sini kita sudah bisa membuat tampilan loginnya seperti gambar dibawah denga cara masu pada browser lalu tuliskan pada URLnya 'localhost/simdes/login' atau jika pada server 'IP Server/simdes/login' seperti gambar dibawah,

Namun ini sebenarnya masih belum selesai karena kita hanya membuat sebuah tampilanya saja dan masih belum membuat akunnya untuk membuat akunnya dengan cara masuk lagi ke phpmyadmin lalu buka menu 'structurenya' tadi lalu pada table loginnya kita tekan 'insert' seperti gambar dibawah,

Lalu akan keluar seperti ini,
Isikan kolom kosong tersebut sesuai dengan username dan password yang diinginkan

Setelah selesai mengisikan kolom-kolom tersebut yang akan dijadikan sebagai akunnya lalu tekan 'go' untuk menyelesaikan seperti gambar dibawah,

Setelah sampai disini kita sudah dapat menggunakan loginnya namun sebelumnya kita direct dulu scriptnya ke simdesnya dengan cara masuk lagi ke directory simdesnya lalu konfigurasikan script pada login.php dan ubah seperti gambar berikut,

Disini kita direct loginnya langsung ke simdesnya yaitu pada index.php seperti gambar diatas.

SEMOGA BERMANFAAT !
Sumber :
- http://www.sentralteknologi.com/2016/05/cara-membuat-halaman-login-sederhana.html?m=1
- Bantuan dari Bima Zainuddin ihsan dan pidoyono patan ( Ahli Perangkat lunak)