Pembuatan Desain dan Implementasi Login Page

Muhammad Ulin Nuha

Updated: 05 Jan, 2021 • 0 • min read

Table of Contents

salam baik semuanya dikarenakan admin penulis lagi males-malesanya jadi jarang update jadi kali ini saya mau updae tentang bahasa pemrograman website yang saya pelajari diberbagai media..semoga bermanfaat ya...hanya login page nya aja ya ...untuk lebih lengkap tunggu selanjutnya ya.. oke

A. Pendahuluan

1. Pengertian

Log masuk (bahasa Inggris: login, juga biasa disebut sebagai log in, log on, logon, signon, sign on, signin, sign in) adalah proses untuk mengakses komputer dengan memasukkan identitas dari akun pengguna dan kata sandi guna mendapatkan hak akses menggunakan sumber daya komputer tujuan.

Desain biasa diterjemahkan sebagai seni terapan, arsitektur, dan berbagai pencapaian kreatif lainnya. Dalam sebuah kalimat, kata "desain" bisa digunakan, baik sebagai kata benda maupun kata kerja. Sebagai kata kerja, "desain" memiliki arti "proses untuk membuat dan menciptakan objek baru". Sebagai kata benda, "desain" digunakan untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau berbentuk benda nyata.

Implementasi/im·ple·men·ta·si/ /impleméntasi/ n pelaksanaan; penerapan: pertemuan kedua ini bermaksud mencari bentuk -- tentang hal yang disepakati dulu.

Desain dan implementasi login page adalah dimana kita mendesain suatu page atau halaman untuk membuat akses komputer ke komputer lain.

2. Latar Belakang

Dengan ini saya akan membuat desain dan implementasi login page dengan menggunakan tamplate yang saya unduh secara gratis di Internet.

3. Maksud dan Tujuan

Untuk mengimplementasikan login page pada tugas mata kuliah kemarin.

B. Alat dan Bahan

1. Laptop

2. Koneksi Internet

3. Tamplate Login Page

C. Jangka Waktu Pelaksanaan

Dari mulai pengerjaan jam 10-00 WIB – 12.00 WIB pada tanggal 05 Januari 2020

D. Tahapan Pelaksanan

1. Pertama dengan merancang class diagram dan activity diagram.

Diagram kelas adalah diagram UML yang menggambarkan kelas-kelas dalam sebuah sistem dan hubungannya antara satu dengan yang lain, serta dimasukkan pula atribut dan operasi.

Untuk membuat suatu sistem buat class diagram terlebih dahulu seperti dibawah ini:

Diagram aktivitas adalah bentuk visual dari alir kerja yang berisi aktivitas dan tindakan, yang juga dapat berisi pilihan, pengulangan, dan concurrency. Dalam Unified Modeling Language, diagram aktivitas dibuat untuk menjelaskan aktivitas komputer maupun alur aktivitas dalam organisasi.

Activity Diagram ini sesuai dengan namanya, menjelaskan mengenai aktivitas yang terjadi pada sistem. Fungsinya, yaitu untuk memperlihatkan urutan aktivitas pada sistem, membantu memahami proses secara keseluruhan, serta menggambarkan proses bisnis lebih detail. Biasanya, Activity Diagram merupakan alur terperinci dari Use Case Diagram yang sudah dibuat sebelumnya.

Untuk membuat suatu sistem buat Activity Diagram terlebih dahulu seperti dibawah ini:

2. Membuat Database dan tabel

Pertama saya membuat database : pweb. Dengan mempunya tabel 2 yaitu

Tabel dblogin : id, username, dan password (login)

Tabel mhs : nim, nama, kelamin, alamat dan no_hp (dashboard)

Database dan Table

Tabel dblogin

3. Desain dan implementasi (coding) halaman login

Berikut ini berupa codingan hasil page index.php :

<!DOCTYPE html>

<head>

<title>Login</title>

</head>

<body>

</div>

</div>

<p class="login-card-description">Sign into your account</p>

<label for="email" class="sr-only">Username</label>

</div>

<label for="password" class="sr-only">Password</label>

</div>

</form>

<a href="#!" class="forgot-password-link">Forgot password?</a>

<p class="login-card-footer-text">Don't have an account? <a href="#!" class="text-reset">Register here</a>

</p>

<a href="#!">Terms of use.</a>

<a href="#!">Privacy policy</a><br>

<?php

if(isset($_GET['pesan'])){

if($_GET['pesan']== "gagal"){

echo "login gagal";

}else if($_GET['pesan'] == "logout"){

echo " Anda berhasil logout";

}else if($_GET['pesan'] == "belum_login"){

echo " Anda belum melakukan login ";

}

</nav>

</div>

</main>

</form>

</body>

</html>

Saya menggunakan tamplate page login yang gratis no copyright di google. Dalam penjelasan codingan yang perlu diperhatikan hanyalah ini :

Dalam form method ini berguna untuk mengeksekusi ke file cek_login.php untuk meneruskan action selanjutnya.

4. Implementasi (coding) proses login dengan pembacaan atau pencocokan data yang di database (cek_login.php)

<?php

session_start();

include 'koneksi.php';

$username =$_POST['username'];

$password = md5 ($_POST['password']);

$data = mysqli_query($koneksi, "select * from dblogin where username= '$username' and password='$password'");

$cek = mysqli_num_rows($data);

if($cek > 0){

$_SESSION['username']=$username;

$_SESSION['status']="login";

header("location:admin/index.php");

}else{

header("location:index.php?pesan=gagal");

}

Didalam codingan diatas kita tau bahwa untuk meneksekusi ke page selanjutnya ada pencocokan database dimulai dari koneksi.php dengan memilih database (pweb) yang sudah dibuat lalu memilih tabel (dblogin) lalu dilanjutkan dengan pencocokan yang dimasukkan input username dan password dengan tabel (dblogin). Jika sukses akan dilanjutkan ke page admin/index.php.

5. Penerapan 1 halaman untuk pembuktian session (Terapkan pada halaman Dashboard), jika session NULL maka halaman dashboard tidak bisa dibuka/diredirect ke halaman login (pweb/index.php).

Lalu mencoba dengan menggunakan session dipage pweb/index.php saya masukkan username dan password saya mencoba dengan username (admin) password (123) terdapat session bertuliskan login gagal.