Bab

Membuat Login dan Menu Utama

13
Sebelum membuat aplikasi sederhana terlebih dahulu kita akan membuat menu
login dan menu-menu yang akan ditampilkan dalam aplikasi kita nanti. Berikut
ini adalah program untuk membuat menu login sbb :
1. Buatlah folder baru didalam htdocs dengan nama folder elearning
2. Buatlah file php dibawah ini dalam folder elearning.

a) Ini adalah file untuk koneksi ke Database elearning

db.php

b) Ini adalah file untuk registrasi mahasiswa untuk login.

registrasi.php

1
c) Ini adalah file untuk login.
login.php

2
d) Ini adalah file untuk logout.
logout.php

e) Ini adalah file untuk cek, untuk mengecek apakah telah melakukan
login atau belum.
cek.php

f) Ini adalah file untuk index, akan diarahkan ke halaman index bila
pengguna telah login. Namun jika belum login maka akan diarahkan
untuk login terlebih dahulu.
index.php

3
3. Buatlah folder baru didalam elearning dengan nama folder halaman
4. Buatlah file php dibawah ini dalam folder halaman

a) Buatlah file home, untuk menampilkan halaman home dari menu

index.
home.php

b) Buatlah file mahasiswa, untuk menampilkan halaman mahasiswa dari

menu index.
mahasiswa.php

4
5. Buatlah folder baru didalam elearning dengan nama folder css
6. Buatlah file css dibawah ini dalam folder css dengan nama style.css
(dicopy saja)

body {
font-family: Arial, Sans-Serif
}

.clearfix:after,
.clearfix:before {
content: "";
display: table
}

.clearfix:after {
clear: both
}

a{
color: #0067ab;
text-decoration: none
}

a:hover {
text-decoration: underline
}

.form {
width: 300px;
margin: 0 auto
}

input[type=email],
input[type=password],

5
input[type=text] {
width: 200px;
border-radius: 2px;
border: 1px solid #ccc;
padding: 10px;
color: #333;
font-size: 14px;
margin-top: 10px
}

input[type=submit] {
padding: 10px 25px 8px;
color: #fff;
background-color: #0067ab;
text-shadow: rgba(0, 0, 0, .24) 0 1px 0;
font-size: 16px;
box-shadow: rgba(255, 255, 255, .24) 0 2px 0 0 inset, #fff 0 1px 0 0;
border: 1px solid #0164a5;
border-radius: 2px;
margin-top: 10px;
cursor: pointer
}

input[type=submit]:hover {
background-color: #024978
}

.content {
width: 80%;
margin: 10px auto
}

6
header {
background-color: #fff;
padding: 20px 10px;
border-radius: 5px;
border: 1px solid #f0f0f0;
margin-bottom: 10px
}

header h1.judul,
header h3.deskripsi {
text-align: center
}

.menu {
background-color: #87cefa;
border: 1px solid #f0f0f0;
border-radius: 8px;
margin-bottom: 10px
}

div.menu ul {
list-style: none;
overflow: hidden
}

div.menu ul li {
float: left;
text-transform: uppercase
}

div.menu ul li a {
display: block;
padding: 0 20px;
text-decoration: none;

7
 color: #2c2c2c;
font-family: sans-serif;
font-size: 13px;
font-weight: 400;
transition: all .3s ease-in-out
}

div.menu ul li a.hoverover,
div.menu ul li a:hover {
cursor: pointer;
color: #fff
}

div.badan {
background-color: #fff;
border-radius: 5px;
border: 1px solid #f0f0f0;
margin-bottom: 10px
}

div.halaman {
text-align: center;
padding: 30px 20px
}

8
 Dari semua file dan folder yang dibuat maka urutan di foldernya adalah
seperti ini:
1. Ini adalah isi dari folder elearning

2. Ini adalah isi dari folder css

3. Ini adalah isi dari folder halaman

Sekarang coba jalankan di browser:

localhost/elearning

Karena kita belum memiliki akun di website tersebut, maka pilihlah daftar
disini.

9
Isilah registrasi diatas, dan ingat email serta passwordnya.
Kembali ke halaman localhost/elearning dan login dengan akun yang sudah
didaftarkan. Selanjutnya akan tampil halaman dibawah ini.

Kembali ke halaman localhost/phpmyadmin, dan pilih elearning.

10
Selanjutnya pilih tabel mahasiswa

11
Dibawah ini adalah data mahasiswa yang telah regsitrasi:

12