Upload
yoppy-hastri-muhammad
View
255
Download
1
Embed Size (px)
DESCRIPTION
Membuat Halaman Login Sederhana Menggunakan Bahasa PHP dan Koneksi dengan Database
Citation preview
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 1
MEMBUAT HALAMAN LOGIN SEDERHANA
1. Buatlah database dengan nama db_web
2. Pada database tersebut, buatlah tabel dengan nama login, jumlah fields isikan dengan
angka 2
3. Isi field pada tabel tersebut seperti gambar berikut :
4. Lakukan insert pada tabel tersebut sebagai berikut :
username : admin
password : smkkhas
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 2
5. Bukalah dreamweaver, dan ikuti langkah berikut :
6. Simpan file tersebut, di Local Disk C , folder appserv, folder www. Buatlah folder
baru dengan nama login. Setelah itu, simpan file tersebut dengan nama login.php.
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 3
Maka akan tampil tulisan seperti pada tampilan berikut :
7. Hapus semua tulisan yang ada pada halaman tersebut, lalu ubah dengan kode berikut :
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 4
Lalu simpan, dan lihat hasilnya di browser (Mozilla firefox), dengan alamat :
http://localhost/login/login.php
8. File New Basic Page CSS
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 5
9. Simpan pada folder login tadi, dengan nama style.css
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 6
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 7
10. Copy kan tulisan berikut pada halaman tersebut :
/* CSS Document */ body{ background:#ECF0F1; font-family: sans-serif; } #kotak{ width: 520px; height: 250px; background: #fff; margin: 150px auto 100px auto; color:#2ECC71; } #atas{ height: 35px; width: 520px; text-align: center; font-size: 15pt; padding-top:20px; } #bawah{ height: 200px; width: 520px; } .masuk{ width: 400px; height:40px; margin-top:10px; margin-left: 60px; font-size: 12pt; border: 1px solid #2ECC71; padding-left:10px; color:#2ECC71; } .masuk:focus{ width: 400px; height:40px; margin-top:10px; margin-left: 60px; font-size: 12pt; padding-left:10px; color:#1ABC9C; outline: none; box-shadow: 0 0 5px #2ECC71; } #tombol{ width: 400px; height:40px; margin-top:10px; margin-left: 60px; background: #2ECC71; border:none; color:#fff; font-size: 14pt; outline:none; }
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 8
11. Simpan, dan lihat hasilnya di browser, pada url: http://localhost/login/login.php. Maka
akan muncul tampilan seperti berikut :
12. Selanjutnya, buat koneksi database nya. Caranya : Buat File baru di dreamweaver, File
New Dynamic Page PHP
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 9
13. Simpan halaman tersebut pada folder login tadi, dengan nama koneksi.php
14. Hapus isi pada halaman tersebut, dan gantilah dengan kode berikut :
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 10
15. Selanjutnya, Buat File baru di dreamweaver, File New Dynamic Page PHP
16. Simpan halaman tersebut pada folder login tadi, dengan nama aksi.php
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 11
17. Hapus isi pada halaman tersebut, dan gantilah dengan kode berikut :
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 12
18. Selanjutnya, buat File baru di dreamweaver, File New Dynamic Page PHP
19. Simpan halaman tersebut pada folder login tadi, dengan nama index.php
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 13
20. Hapus isi pada halaman tersebut, dan gantilah dengan kode berikut :
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 14
21. Selanjutnya, buat File baru di dreamweaver, File New Dynamic Page PHP
22. Simpan halaman tersebut pada folder login tadi, dengan nama logout.php
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 15
23. Hapus isi pada halaman tersebut, dan gantilah dengan kode berikut :
24. Dan,akhirnya selesai juga. Silahkan lihat hasilnya di browser,
http://localhost/login/login.php
25. Ketika saya login, dengan username : admin, dan password : smkkhas, maka akan tampil
Modul Pemrograman Web 2015
Arbiati Faizah | SMK Khoiriyah Hasyim 16
Dan hasilnya
Tapi, kalau saya login dengan username dan password selain itu,
Maka akan tampil
26. Jangan lupa dipelajari yaa.pasti masih bingung kan ??!!
27. Kalau tampilannya tidak seperti itu, silahkan coba lagi