Membuat Login Dan Dashboard

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul
Membuat Desain Tampilan Login dan Dashboard
A. Membuat Project Aplikasi Laundry

Untuk membuat aplikasi berbasis web kita dapat memulai dengan cara membuat folder
baru dengan nama sesuai aplikasi yang akan dikembangkan, pada kali ini kita akan
menggunakan nama folder atau aplikasi dengan nama “pwpb_laundry”. Folder tersebut dapat
kalian buat didalam folder “htdocs”, silakan kalian akses direktori dimana kalian menginstall
xampp pada laptop kalian. Secara default kalian bisa menuju direktori C://xampp/htdocs dan
kalian bisa membuat folder aplikasi baru itu pada direktori tersebut.
Gambar 1. Tampilan Folder Project Aplikasi

Setelah folder dibuat, maka kita dapat mengakses folder tersebut sebagai aplikasi
menggunakan browser yang ada pada device kalian. Cara akses adalah menggunakan url pada
browser dengan alamat url: localhost/pwpb_laundry. Setiap perubahan yang kita kembangan
pada aplikasi dapat dilihat secara langsung pada tampilan aplikasi dengan mengaksesnya
melalui browser setiap ada update pada aplikasi.
Gambar 2. Tampilan default folder aplikasi
Bait Syaiful Rijal, M.Pd | 1

B. Installasi Bootstrap dan JQuery

Setelah membuat database dan menyiapkan folder aplikasi, selanjutnya kita akan
menginstall library CSS. Hal ini dilakukan untuk mempermudah kita dalam membuat tampilan
antarmuka dari aplikasi yang akan kita kembangan. Untuk library CSS yang akan kita gunakan
adalah Bootstrap, khusus pada materi ini menggunakan versi 3. Kalian bisa download library
ini pada link yang sudah disertakan pada classroom.
Setelah kalian memiliki file bootstrapnya, sekarang copy dan paste file tersebut pada
folder aplikasi yang telah kita buat sebelumnya, yaitu didalam folder “pwpb_laundry”. Lalu
ekstrak file tersebut dan rename foldernya menjadi “assets”.
Gambar 3. Proses Instalasi Bootstrap

Untuk menjalankan bootstrap3 yang kita gunakan dengan baik, kita membutuhkan sebuah
Jquery. Hal ini dikarenakan bootstrap menggunakan jquery sebagai library javascriptnya. Oleh
karena itu, sekarang kita akan melakukan instalasi jquery pada aplikasi kita. Silakan kalian
download file jquery yang sudah disediakan pada classroom. Copy dan paste kan file jquery.js
kedalam folder “js” yang berada didalam folder assets pada project kita.
Gambar 4. Proses Instalasi JQuery

C. Membuat Halaman Login

Halaman login yang akan kita buat ini akan muncul pada saat pertama kali aplikasi laundry
ini diakses atau dijalankan. Oleh karena itu, kita akan membuat halaman login ini pada file
index.php. Hal ini dikarenakan file index.php adalah file yang akan pertama kali dijalankan
dalam suatu folder. Untuk itu silakan buatlah file index.php pada project kalian. Setelah itu,
bukalah folder project kalian pada teks editor yang kalian gunakan untuk selanjutnya
melakukan proses koding aplikasi.
Gambar 5. Membuka project pada teks editor
Setelah membuat file index.php, kita dapat mulai menulis coding tampilan aplikasi kita.
Jika kalian sudah memiliki tampilan desain yang sudah kalian buat sendiri silakan gunakan file
tersebut. Jika belum memiliki file tampilan kalian bisa mengikuti instruksi tampilan yang
disampaikan pada materi ini. Silakan ketik ulang source code berikut pada file index.php.
<!DOCTYPE html>
<html>
<head>
<title>LyJo</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body style="background: #f0f0f0">
<br/>
<br/>
<br/>
<br/>
<center>
<h2>APLIKASI LAUNDRY <br/> LyJO - Laundry Jogja</h2>
</center>
<br/>
<br/>
<br/>
<br/>

<div class="container">
<div class="col-md-4 col-md-offset-4">
<?php
if(isset($_GET['pesan'])){
if($_GET['pesan'] == "gagal"){
echo "<div class='alert alert-danger'>Login gagal! username
dan password salah!</div>";
}else if($_GET['pesan'] == "logout"){
echo "<div class='alert alert-info'>Anda telah berhasil
logout</div>";
}else if($_GET['pesan'] == "belum_login"){
echo "<div class='alert alert-danger'>Anda harus login untuk
mengakses halaman admin</div>";
}
}
?>
<form action="login.php" method="post">

<div class="panel">
<br/>
<div class="panel-body">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"
name="username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"
name="password">
</div>
<input type="submit" class="btn btn-primary"

value="Log In">
</div>
<br/>
</div>
</form>
</div>
</div>
</body>
</html>
Setelah menuliskan sourcecode diatas pada index.php, maka kita akan mendapatkan hasil
tampilan aplikasi kita yang bisa kalian lihat pada gambar 6. Sebagai catatan, kalian sekalian
dibebaskan untuk melakukan eksplorasi mandiri terkait pengembangan aplikasi pada topik ini.
Jika dirasa tampilan yang diberikan pada contoh materi ini kurang menarik, silakan dirubah
sesuai dengan kreasi kalian masing-masing. Adapun penggunaan template yang sudah ada dan
dapat digunakan bebas dari internet juga diperbolehkan, yang terpenting kalian memahami apa
yang kalian tuliskan, tidak sekedar copy paste maupun edit tanpa dipelajari lebih detail.

Gambar 6. Tampilan halaman login aplikasi
Saya jelaskan sedikit disini, perhatikan pada syntax berikut.
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
Syntax diatas merupakan siyntax untuk menghubungkan pada library css dan js yang kita
gunakan pada pengembangan aplikasi ini, yaitu file bootstrap.css, javascript.js, dan jquery.js.
Jika diperhatikan pada syntax setelah kode href atau src, disitu diikuti oleh alamat direktori
dimana file tersebut diletakan atau berada. Seperti kita ketahui file yang diakses kita simpan
didalam folder assets, maka kita perlu mengakses direktori folder assets terlebih dahulu.
Dikarenakan file index.php berada dalam 1 direktori yang sama dengan folder assets yaitu pada
root atau direktori dasar aplikasi, maka kita cukup langsung menuliskan nama foldernya.
Namun jika file php kita berbeda direktori dengan file assets nya, maka kita perlu
menambahkan “../” untuk dapat mengakses kepada direktori root dimana folder assets berada.
Untuk lebih jelasnya penggunaan tersebut nanti akan dipraktekkan saat kita membuat halaman
dashboard pada role masing-masing user.
D. Membuat Halaman Dashboard

Setelah membuat halaman login, selanjutnya kita akan membuat halaman dashboard yaitu
halaman yang akan diakses setelah melakukan login. Untuk halaman dashboard kita akan
membuat sejumlah dengan jumlah user yang ada pada aplikasi, karena pada aplikasi yang kita
kembangkan diketahui memiliki 3 jenis user yaitu admin, kasir, dan owner maka masing-
masing user akan dibuatkan halaman dashboard terpisah.
Secara prinsip apa yang nantinya akan kita kerjakan adalah kegiatan yang mirip dan
berulang. Yang dimaksud disini adalah secara prinsip kita akan memuat 1 buah template
tampilan dashboard, hanya saja untuk membedakan mengenali user kita akan melakukan
sedikit variasi dimasing-masing jenis user dengan membedakan tampilan untuk fiturnya.
Secara teknis kita akan membuat kembali file yaitu index.php, hanya saja kali ini file tersebut

diletakan pada direktori sesuai role masing-masing user. Untuk lebih detailnya kalian dapat
mengikuti langkah-langkah dibawah sebagai persiapan sebelum melakukan coding tampilan.
Buatlah folder sejumlah jumlah user dan beri nama folder tersebut sesuai dengan nama
user. Kita akan membuat 3 buah folder, yaitu folder admin, kasir, dan owner. Setelah itu, pada
masing-masing folder silakan kalian isi dengan sebuah file yaitu index.php. Maka kita akan
mendapatkan project kita sebagai berikut.
Gambar 7. Tampilan update project persiapan halaman dashboard.
1. Membuat Halaman Dashboard Admin

Sebelum kita membuat tampilan dashboard untuk halaman admin, perlu diketahui
bahwasanya segala sesuatu yang merupakan fitur-fitur aplikasi untuk admin akan kita kelola
dalam 1 folder yaitu didalam folder admin. Oleh karena itu, nantinya setiap file php yang
akan menjadi sourcecode untuk fitur admin ada didalam folder admin, begitu pula untuk
masing-masing user juga berlaku hal yang sama.
Dalam membuat tampilan dashboard admin silakan buka file index.php yang ada
didalam folder admin. Setelah itu kalian bisa menuliskan syntax sourcecode seperti dibawah
atau kalian bisa menggunakan kegiatan eksplorasi mandiri mencari referensi tampilan lain di
internet maupun buku. Catatan penting, jangan lupakan fitur-fitur yang ada dalam user
admin untuk dapat disesuaikan dibuatkan menu pada dashboard.
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi LyJo</title>
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
</head>


<nav class="navbar navbar-inverse" style="border-radius: 0px">
<div class="container-fluid">
<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-

toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">LyJo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-

collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><i
class="glyphicon glyphicon-home"></i> Dashboard</a></li>
<li><a href=""><i class="glyphicon glyphicon-
user"></i> User</a></li>
<li><a href=""><i class="glyphicon glyphicon-tower"></i>
Outlet</a></li>
<li><a href=""><i class="glyphicon glyphicon-folder-close"></i>
Paket</a></li>
<li><a href=""><i class="glyphicon glyphicon-sunglasses"></i>
Pelanggan</a></li>

shopping-cart"></i> Transaksi</a></li>
usd"></i> Laporan</a></li>
<li><a href=""><i class="glyphicon glyphicon-eye-open"></i> Ganti
Password</a></li>
<li><a href=""><i class="glyphicon glyphicon-log-
out"></i> Log Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Halo, Admin !</p></li>
</ul>
</div>
</div>
</nav>

<div class="alert alert-info text-center">
<h4 style="margin-bottom: 0px"><b>Selamat datang!</b> di aplikasi Laundry
LyJo. Anda login Sebagai Admin!</h4>
</div>
<div class="panel">
<div class="panel-heading">
<h4>Dashboard</h4>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">

<h1>
<i class="glyphicon glyphicon-
user"></i>
<span class="pull-right">
</span>
</h1>
Jumlah Pelanggan
</div>
</div>
</div>
<div class="panel panel-warning">
<h1>
retweet"></i>
</span>
</h1>
Jumlah Cucian Di Proses
</div>
</div>
</div>
<div class="panel panel-info">
<h1>
info-sign"></i>
</span>
</h1>
Jumlah Cucian Siap Ambil
</div>
</div>
</div>
<div class="panel panel-success">
<h1>
ok-circle"></i>
</span>
</h1>
Jumlah Cucian Selesai

</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>Riwayat Transaksi Terakhir</h4>
</div>
<table class="table table-bordered table-striped">
<tr>
<th width="1%">No</th>
<th>Invoice</th>
<th>Tanggal</th>
<th>Pelanggan</th>
<th>Berat (Kg)</th>
<th>Tgl. Selesai</th>
<th>Harga</th>
<th>Status</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Setelah menuliskan syntax pada file index.php, kita dapat melihat hasilnya dengan cara
mengakses melalui browser pada url: localhost/pwpb_laundry/admin. Maka halaman akan
diarahkan kehalaman admin dengan tampilan sebagai berikut.

Gambar 8. Tampilan template dashboard halaman admin
2. Membuat Halaman Dashboard Kasir

Setelah selesai membuat template tampilan dashboard pada admin, kita dapat
menggunakan sourcecode yang sama untuk membuat tampilan dashboard pada user kasir.
Perlu diperhatikan mengenai detail fitur apa saja yang ada dalam user untuk membedakan
tampilan menu yang ditampilkan. Untuk itu dapat kita buka file index.php yang ada didalam
folder kasir lalu tuliskan syntax sebagai berikut.
<!DOCTYPE html>
<html>
<head>

</head>

</button>
</div>

collapse-1">

<li><a href=""><i class="glyphicon glyphicon-sunglasses"></i>

Pelanggan</a></li>

shopping-cart"></i> Transaksi</a></li>
Password</a></li>
</ul>
<li><p class="navbar-text">Halo, Kasir !</p></li>
</ul>
</div>
</div>
</nav>
LyJo. Anda login Sebagai Kasir!</h4>
</div>
<div class="panel">
<h4>Dashboard</h4>
</div>
<div class="row">
<h1>
user"></i>
</span>
</h1>
Jumlah Pelanggan
</div>
</div>
</div>
<h1>
retweet"></i>
</span>
</h1>
</div>
</div>
</div>

<h1>
info-sign"></i>
</span>
</h1>
</div>
</div>
</div>
<h1>
ok-circle"></i>
</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>Riwayat Transaksi Terakhir</h4>
</div>
<table class="table table-bordered table-striped">
<tr>
<th width="1%">No</th>
<th>Invoice</th>
<th>Tanggal</th>
<th>Pelanggan</th>
<th>Berat (Kg)</th>
<th>Tgl. Selesai</th>
<th>Harga</th>
<th>Status</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Setelah menuliskan syntax pada file index.php, kita dapat melihat hasilnya dengan cara
mengakses melalui browser pada url: localhost/pwpb_laundry/kasir. Maka halaman akan

diarahkan kehalaman kasir dengan tampilan sebagai berikut. Perbedaan tampilan dapat
kalian pada bagian menu yang berada dibagian atas tampilan aplikasi.
Gambar 9. Tampilan template dashboard halaman kasir
3. Membuat Halaman Dashboard Owner

Setelah selesai membuat template tampilan dashboard pada kasir, kita dapat
menggunakan sourcecode yang sama untuk membuat tampilan dashboard pada user owner.
Perlu diperhatikan mengenai detail fitur apa saja yang ada dalam user untuk membedakan
tampilan menu yang ditampilkan. Untuk itu dapat kita buka file index.php yang ada didalam
folder owner lalu tuliskan syntax sebagai berikut.
<!DOCTYPE html>
<html>
<head>

</head>


</button>
</div>

collapse-1">
Password</a></li>
</ul>
<li><p class="navbar-text">Halo, Owner !</p></li>
</ul>
</div>
</div>
</nav>
LyJo. Anda login Sebagai Owner!</h4>
</div>
<div class="panel">
<h4>Dashboard</h4>
</div>
<div class="row">
<h1>
user"></i>
</span>
</h1>
Jumlah Pelanggan
</div>
</div>
</div>
<h1>


retweet"></i>
</span>
</h1>
</div>
</div>
</div>
<h1>
info-sign"></i>
</span>
</h1>
</div>
</div>
</div>
<h1>
ok-circle"></i>
</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading text-center">
<h4>Silakan gunakan menu laporan untuk melihat rekap laporan
transaksi</h4>
</div>
</div>
</div>
</body>

</html>
Setelah menuliskan syntax pada file index.php, kita dapat melihat hasilnya dengan
cara mengakses melalui browser pada url: localhost/pwpb_laundry/owner. Maka halaman
akan diarahkan kehalaman owner dengan tampilan sebagai berikut. Perbedaan tampilan
dapat kalian pada bagian menu yang berada dibagian atas tampilan aplikasi.
Gambar 10. Tampilan template dashboard halaman owner
__ Selamat Belajar dan Berkarya __

Membuat Login Dan Dashboard

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Login Dan Dashboard

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Membuat Desain Tampilan Login dan Dashboard

A. Membuat Project Aplikasi Laundry

Gambar 1. Tampilan Folder Project Aplikasi

Gambar 2. Tampilan default folder aplikasi

Bait Syaiful Rijal, M.Pd | 1

B. Installasi Bootstrap dan JQuery

Gambar 3. Proses Instalasi Bootstrap

Gambar 4. Proses Instalasi JQuery

Bait Syaiful Rijal, M.Pd | 2

C. Membuat Halaman Login

Gambar 5. Membuka project pada teks editor

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

Bait Syaiful Rijal, M.Pd | 3

<form action="login.php" method="post">

<input type="submit" class="btn btn-primary"

Bait Syaiful Rijal, M.Pd | 4

Gambar 6. Tampilan halaman login aplikasi

Saya jelaskan sedikit disini, perhatikan pada syntax berikut.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

D. Membuat Halaman Dashboard

Bait Syaiful Rijal, M.Pd | 5

Gambar 7. Tampilan update project persiapan halaman dashboard.

1. Membuat Halaman Dashboard Admin

<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

Bait Syaiful Rijal, M.Pd | 6

<button type="button" class="navbar-toggle collapsed" data-

<div class="collapse navbar-collapse" id="bs-example-navbar-

<li><a href=""><i class="glyphicon glyphicon-

Bait Syaiful Rijal, M.Pd | 7

Bait Syaiful Rijal, M.Pd | 8

Bait Syaiful Rijal, M.Pd | 9

Gambar 8. Tampilan template dashboard halaman admin

2. Membuat Halaman Dashboard Kasir

<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

<div class="collapse navbar-collapse" id="bs-example-navbar-

Bait Syaiful Rijal, M.Pd | 10

<li><a href=""><i class="glyphicon glyphicon-sunglasses"></i>

<li><a href=""><i class="glyphicon glyphicon-

Bait Syaiful Rijal, M.Pd | 11

Bait Syaiful Rijal, M.Pd | 12

Gambar 9. Tampilan template dashboard halaman kasir

3. Membuat Halaman Dashboard Owner

<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

Bait Syaiful Rijal, M.Pd | 13

<div class="collapse navbar-collapse" id="bs-example-navbar-

Bait Syaiful Rijal, M.Pd | 14

<i class="glyphicon glyphicon-

Bait Syaiful Rijal, M.Pd | 15

Gambar 10. Tampilan template dashboard halaman owner

__ Selamat Belajar dan Berkarya __

Bait Syaiful Rijal, M.Pd | 16

Anda mungkin juga menyukai

Selamat Belajar dan Berkarya