membuat halaman login php

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



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.



Maka akan tampil tulisan seperti pada tampilan berikut :

7. Hapus semua tulisan yang ada pada halaman tersebut, lalu ubah dengan kode berikut :



Lalu simpan, dan lihat hasilnya di browser (Mozilla firefox), dengan alamat :

http://localhost/login/login.php

8. File New Basic Page CSS



9. Simpan pada folder login tadi, dengan nama style.css



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



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



13. Simpan halaman tersebut pada folder login tadi, dengan nama koneksi.php

14. Hapus isi pada halaman tersebut, dan gantilah dengan kode berikut :



15. Selanjutnya, Buat File baru di dreamweaver, File New Dynamic Page PHP

16. Simpan halaman tersebut pada folder login tadi, dengan nama aksi.php



18. Selanjutnya, buat File baru di dreamweaver, File New Dynamic Page PHP

19. Simpan halaman tersebut pada folder login tadi, dengan nama index.php



21. Selanjutnya, buat File baru di dreamweaver, File New Dynamic Page PHP

22. Simpan halaman tersebut pada folder login tadi, dengan nama logout.php




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



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

membuat halaman login php

Documents