LANGKAH-LANGKAH MEMBUAT FORM LOGIN




Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana dan mudah untuk diikuti.
Secara Umum, form login akan sangat dibutuhkan pada situs web jika kita hanya ingin orang-orang tertentu yang bisa melihat bahkan merubah konten pada website. Ini merupakan cara yang baik untuk menjaga data kita aman dari orang-orang yang tidak dikehendaki.
Tutorial cara membuat form login dengan PHP dan MySQL ini dilengkapi dengan session. Pada saat proses login berhasil, secara otomatis akan tercipta sebuah session yang berfungsi sebagai informasi pribadi klien yang tersimpan di web server untuk digunakan sebagai proses login. Seperti dibawah ini.

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL

Konsep dalam cara membuat form login dengan php dan mysql adalah membuat halaman form login dengan HTML terlebih dahulu dan selanjutnya akan dilengkapi dengan skrip php untuk memeriksa data pengguna di database MySQL. Jika pengguna terdapat dalam database MySQL, maka PHP akan membuat session untuk pengguna tersebut dan sekaligus akan mengarahkan pada halaman web yang telah diproteksi.
Ikuti Langkah-langkah dibawah ini untuk cara membuat form login sederhana dengan PHP dan database MySQL yang dilengkapi session sesuai konsep diatas.

Langkah 1: Membuat Tabel MySQL User/Pengguna

untuk cara membuat databasenya sobat bisa cek atau kunjungi di halaman ini  . 

jika sobat sudah membuat database user pennggunanya di phpmyadmin sobat tinggal buka aplikasi notepad++ atau notepad sejenisnya untuk membuat html.

ini skrip Mysqlnya
-- Dumping database structure for tes_db
CREATE DATABASE IF NOT EXISTS `tes_db` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `tes_db`;
 
 
-- Dumping structure for table tes_db.karyawan
CREATE TABLE IF NOT EXISTS `karyawan` (
  `id_karyawan` int(10) NOT NULL AUTO_INCREMENT,
  `pass_karyawan` varchar(50) NOT NULL DEFAULT '0',
  `user_karyawan` varchar(50) NOT NULL DEFAULT '0',
  `nama_karyawan` varchar(50) DEFAULT NULL,
  `alm_karyawan` varchar(50) DEFAULT NULL,
  `gaji_karyawan` int(10) DEFAULT NULL,
  `tgl_gabung` date DEFAULT NULL,
  PRIMARY KEY (`id_karyawan`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;
 
-- Dumping data for table tes_db.karyawan: ~10 rows (approximately)
INSERT IGNORE INTO `karyawan` (`id_karyawan`, `pass_karyawan`, `user_karyawan`,
`nama_karyawan`, `alm_karyawan`, `gaji_karyawan`, `tgl_gabung`) VALUES
(1, '1234', 'admin', 'Admin Nyekrip', 'Website', 3000000, '2015-04-16'),

(2, '4321', 'staf', 'Staf Nyekrip', 'Server Web', 250000, '2015-04-16');


note: buat percobaan login boleh masukan username admin password 1234
atau username staff password 4321

Langkah 2: Membuat folder di xampp-->htdoc 

jika sobat akan membuat sebuah html dan php diperlukan sebuah folder untuk tempan menyimpan semua jenis filenya. disini saya membuat folder bernama DESWEB di localdisk C -->Xampp-->htdoc-->Desweb


Langkah 3: Membuat Form Login HTML

Dalam skrip ini kita akan membuat form tempat untuk memasuk-kan username dan password. Ketik-kan skrip berikut untuk membuat Form login dengan skrip HTML yang terdiri dari kolom username, kolom password dan tombol submit. Simpan skrip berikut dalam file dengan nama index.php. simpan di folder xampp-->htdoc-->desweb


Langkah 4 : Membuat Halaman Profil


Jika login telah berhasil, maka pengguna akan diarahkan langsung ke halaman profile yang berisi data pribadi user (lihat gambar halaman profil diatas). Dalam halaman ini juga dilengkapi dengan link logout untuk keluar dari halaman sekaligus menghapus session. Ketik-kan skrip berikut dan simpan dalam file dengan nama profile.php.

ini skrip untuk profilenya

Langkah 5: Membuat Skrip Fungsi Session PHP

Skrip ini bertugas untuk mengambil data tentang user dan menampilkan-nya pada halaman profil. Ketik-kan skrip berikut dan simpan dalam file dengan namasession.php

Langkah 6: Membuat Skrip Fungsi Logout PHP


Skrip ini bertugas untuk menghapus semua sesi dan langsung mengarahkan ke halaman utama (index.php) tempat form login berada. Ketik-kan skrip berikut dan simpan dalam file dengan nama logout.php.

Langkah 7: Membuat Skrip CSS Untuk Style Form Login

Skrip CSS ini untuk memberikan dan mengatur style HTML pada halaman form login dan halaman profil. Ketik-kan skrip berikut dan simpan dalam file dengan nama style.css. Untuk css ini disini saya mengadopsi dari blog nyekrip.com untuk panduan membuat css nya. saya hanya merubah sedikit untuk mengubah warna backgroundnya.
ini skripnya
.container {
width: 50%;
    margin: 0 auto;
}
h2{
background-color: #53bd84;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
color: #fff;
}
span{
display: block;
margin-bottom: 20px;
color: red;
}
.success{
display: block;
margin-top: 20px;
margin-bottom: 0;
font-size: 14px;
}
b{
color:green;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 25px;
}
div.main{
width: 306px;
padding: 10px 50px 30px;
border: 2px solid gray;
font-family: raleway;
float:left;
margin-top:15px;
}
input[type=text]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #53bd84;
font-size: 16px;
}
input[type=password]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #53bd84;
font-size: 16px;
}
label{
color: #53bd84;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
input[type=submit]{
font-size: 16px;
background: linear-gradient(#53bd84 5%, #fff 100%);
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline:none;
}
#profile {
padding:50px;
border:1px solid grey;
font-size:20px;
background-color:#A2DED0;
}
#logout {
float:right;
padding:5px;
border:dashed 1px gray
}
a {
text-decoration:none;
color:#6495ed
}
color:#6495ed}

Simpan semua file HTML, PHP dan CSS dalam satu folder bernama ” DESWEB ” dan letakkan folder tersebut dalam folder htdocs. Folder htdocs terletak dalam folder XAMPP, dalam tutorial ini kami menggunakan XAMPP .

Setelah melakukan semua langkah cara membuat form login diatas, sekarang saatnya kita untuk mencoba form login dengan PHP dan MySQL yang dilengkapi session dengan mengetik-kan alamat ” http://localhost/DESWEB/index.php ” pada halaman browser.
Demikian tutorial cara membuat form login dengan PHP dan MySQL, jika terdapat langkah yang kurang dimengerti, silahkan kirim pertanyaan melalui kolom komentar dibawah ini. Terimakasih.

Comments

Post a Comment

Popular posts from this blog

MEMBUAT FORM LOGIN MENGGUNAKAN TEMA BOOSTRAP DAN PHP

Image
       Membuat form login merupakan salah satu bagian dari  web programming  khusuunya pada pembangunan aplikasi berbasis web,  form login php  merupakan fitur penting untuk memberikan HAK AKSES pada sebua web, aplikasi dan lain sebagainya.. Dan untuk tutorial php kali ini saya akan menggunakan theme dari framework bootstrap sebagai front-end agar form login kita lebih menarik selain itu kita bisa belajar bootstrap secara langsung dalam tutorial membuat form login ini. Membuat  Form login  dengan bootstrap   Langkah  pertama   kita akan belajar membuat form login dengan bootstrap.  Unduh file bootstrap disini   sebagai tema yang akan kita pakai. atau sobat bisa akses getboostrap.com untuk memilih tema yang diinginkan. buatlah sebuah direktori dengan mengekstrak file boostrap hasil downloadan pada langkah satu di dalam htdocs dengan nama HTML dan isinya seperti gambar berikut . Buat...
Read more

CARA MENGKONEKSIKAN DATABASE AGAR MUNCUL DI WEB BROWSER MENGGUNAKAN XAMPP DAN PHPMYADMIN

Image
Untuk mengkoneksikan database dengan web, agar database dapat tampil di web browser, kita harus melakukan pemrograman terlebih dahulu, contohnya menggunakan notepad++, 1. sebelum itu bukalah windows eksplorer, lalu klik drive C kemudian carilah folder dengan nama xampp, setelah itu carilah folder berjudul htdocs dan kemudian buka. 2. setelah itu buatlah folder di dalam folder htdocs tersebu dengan nama bebas sesuai kebutuhan, misalkan kami membuat folder dengan nama desweb. 3. lalu buka notepad++, dan buat file baru dengan mengklik new di toolbar. 4. Lalu cobalah tulis skrip seperti diatas untuk memunculkan "selamat datang", pada browser web 5. Save dan beri nama index, arahkan ke drive C, lalu buka folder xampp lalu htdocs dan bka folder yang telah kita buat disana, karena kita membuatnya dengan nama desweb, maka simpanlah file tersebut di desweb dengan nama index.php artinya file tersebut berextention php. 6. kemudian bukalah web...
Read more