Panduan Membuat Halaman Login dan Registrasi Dengan PHP
January 27, 2020
Panduan Membuat Halaman Login dan Registrasi Dengan PHP. Bagaimana cara membuat halaman login dan registrasi dengan PHP. Mari kita pelajari pembahasan serta langkah-langkah dari login sampai proses registrasinya. Halaman login atau registrasi merupakan halaman pertama yang biasa kita jumpai bila kita ingin menggunakan fasilitas suatu produk atau suatu layanan tertentu, jutaan orang mungkin baru menyadari bahwa membuat halaman login dan registrasi merupakan suatu hal yang sangat mudah untuk dibuat, bisa dilakukan oleh semua kalangan bagi mereka yang menginginkannya.
Produk digital pada era sekarang mengharuskan kita untuk terlus melakukan improvisasi agar sebagai generasi penerus kita dapat mengikuti perkembangan jaman dengan baik, meskipun kita hanya sebagai penikmat produk digital.
Pada artikel Panduan Membuat Halaman Login dan Registrasi Dengan PHP, kami akan memberikan informasi secara lengkap dan tuntas. Harapannya setelah membaca artikel yang telah kami buat, para pembaca bisa langsung mencoba dan dapat menghubungi layanan kami jika menemui suatu kendala.
Panduan Membuat Halaman Login dan Registrasi Dengan PHP
1. Menyiapkan Hosting
Untuk membuat halaman login dan registrasi dengan PHP, kita diharuskan untuk mempunyai hosting pribadi, pada saat ini jika anda melakukan pembelian hosting, anda juga bisa mendapatkan domain secara gratis. Tergantung paketan hosting apa yang kalian gunakan atau kalian beli.
Sebagai rekomendasi, kami melakukan pembelian hosting dari layanan Hostingan.id dengan hanya mengambil paket 1 bulan cloud hosting dengan biaya Rp. 25.000,- saja. Sedangkan untuk domainnya, kami implementasikan dengan domain pribadi yang sudah kami miliki sebelumnya.
Untuk harga hosting secara lengkap, kalian bisa lihat seluruh price list hostingan id saja langsung, harga yang ditawarkan cukup terjangkau untuk kantong pribadi, terlebih untuk paket hosting yang paling murah dan unlimited kita berhak mendapatkan gratis domain my.id
 |
| Gambar 1 Daftar Paket Hostingan.id |
2. Membuat Database Dengan Hosting
Setelah selesai melakukan pembelian hosting, silahkan kalian langsung masuk ke halaman cPanel dari akun Hostingan.id dengan memilih Database Wizard seperti gambar di bawah ini.
 | |
| Gambar 2. Membuat Database Baru |
Silahkan mengikuti prosedur selanjutnya dengan memberikan nama database sesuai kebutuhan kalian masing-masing. Jangan lupa untuk checklist pada bagian All Privilage sehingga kita bisa menggunakan seluruh akses untuk membuat database.
Sebagai catatan, untuk pemilihan hosting kalian bisa menggunakan jenis layanan lain juga bisa, tetapi untuk prosedur pembuatan tidak akan jauh berbeda. Karena pada dasarnya semua jenis layanan hosting sama saja, yang membedakan hanyalah fitur dan harga saja.
Selanjutnya silahkan untuk membuat table pada database yang sudah kalian buat, karena kita akan membuat halaman login dan registrasi, standar table yang digunakan cukup isikan "users" dan menambahkan 4 tabel, dengan rincian id, username, e-mail, password. Lalu klik tombol save, untuk lebih jelasnya kalian dapat melihat gambar di bawah ini.
 | |
| Gambar 3. Tabel Struktur Database |
Pada tahapan ini, database yang kalian siapkan sudah bisa digunakan untuk membuat halaman login dan registrasi. Jangan lupa pada bagian type dan collation kalian bisa mengikuti sesuai dengam Gambar 3 saja untuk tahapan percobaan pertama kali.
Keterangan:
ID = Digunakan sebagai penomoran yang ada di database
Username = Digunakan sebagai user untuk proses login menuju ke halaman tertentu, jumlah var char berarti jumlah maksimal karakter yang dapat digunakan untuk membuat username sebanyak 100 karakter.
email = Digunakan sebagai data pelengkap dari user baru, dengan jumlah karakter maksimal 100 untuk email yang dapat ditulis.
Password = Digunakan sebagai proses login ke halaman tertentu, jumlah karakter password juga telah disetting sebanyak 100 karakter juga.
Username = Digunakan sebagai user untuk proses login menuju ke halaman tertentu, jumlah var char berarti jumlah maksimal karakter yang dapat digunakan untuk membuat username sebanyak 100 karakter.
email = Digunakan sebagai data pelengkap dari user baru, dengan jumlah karakter maksimal 100 untuk email yang dapat ditulis.
Password = Digunakan sebagai proses login ke halaman tertentu, jumlah karakter password juga telah disetting sebanyak 100 karakter juga.
3. Setting phpMyadmin Dengan Database
Proses selanjutnya adalah dengan melakukan setting phpMyadmin dengan database, tujuannya adalah agar pada saat ada user yang melakukan proses registrasi dan login, maka seluruh data-data yang telah dimasukkan pada tabel berupa username, email, dan password dapat direkam ke dalam database. Proses ini termasuk sangat vital saat membuat halaman login dan registrasi dengan PHP, karena kita terkadang lupa untuk setting phpMyadmin dengan database yang sudah kita buat sebelumnya.
• Buka notepad atau program sejenis notepad pada komputer kalian.
• Copy dan paste script PHP di bawah ini.
session_start();
// variable declaration
$username =
"";
$email = "";
$errors = array();
$_SESSION['success'] =
"";
// connect to database
$db = mysqli_connect('localhost', 'username', 'password',
'database');
// REGISTER USER
if
(isset($_POST['reg_user'])) {
//
receive all input values from the form
$username
= mysqli_real_escape_string($db, $_POST['username']);
$email
= mysqli_real_escape_string($db, $_POST['email']);
$password_1
= mysqli_real_escape_string($db, $_POST['password_1']);
$password_2
= mysqli_real_escape_string($db, $_POST['password_2']);
//
form validation: ensure that the form is correctly filled
if
(empty($username)) { array_push($errors, "Username is required"); }
if
(empty($email)) { array_push($errors, "Email is required"); }
if
(empty($password_1)) { array_push($errors, "Password is required"); }
if
($password_1 != $password_2) {
array_push($errors,
"The two passwords do not match");
}
//
register user if there are no errors in the form
if
(count($errors) == 0) {
$password
= md5($password_1);//encrypt the password before saving in the database
$query
= "INSERT INTO users (username, email, password)
VALUES('$username', '$email',
'$password')";
mysqli_query($db,
$query);
$_SESSION['username']
= $username;
$_SESSION['success']
= "You are now logged in";
header('location:
index.php');
}
}
// ...
// LOGIN USER
if
(isset($_POST['login_user'])) {
$username
= mysqli_real_escape_string($db, $_POST['username']);
$password
= mysqli_real_escape_string($db, $_POST['password']);
if
(empty($username)) {
array_push($errors,
"Username is required");
}
if
(empty($password)) {
array_push($errors,
"Password is required");
}
if
(count($errors) == 0) {
$password
= md5($password);
$query
= "SELECT * FROM users WHERE username='$username' AND
password='$password'";
$results
= mysqli_query($db, $query);
if
(mysqli_num_rows($results) == 1) {
$_SESSION['username']
= $username;
$_SESSION['success']
= "You are now logged in";
header('location:
index.php');
}else
{
array_push($errors,
"Wrong username/password combination");
}
}
}
?>
Pada script yang diberikan warna hijau merupakan kunci di mana kita dapat melakukan setting dengan database yang kita buat. Untuk lebih jelasnya akan kami jabarkan di bawah ini.
$db = mysqli_connect('localhost', 'username', 'pasword', 'database);
Sebelumnya, jangan lupa save script di atas dengan nama server.php untuk memudahkan kalian untuk copy paste dari script yang akan diberikan nanti. Lalu, silahkan kalian upload file server.php tersebut ke bagian file manager. Kalian bisa membuat directory baru atau upload langsung di public_html.
Keterangan:
Localhost : Merupakan url atau alamat dari database hosting kalian masing-masing. Bisa berupa angka ataupun berupa alamat url.
Username : Merupakan username dari hosting yang kalian punya, silahkan cek profile hosting kalian masing-masing.
Password : Merupakan password yang digunakan pada saat membuat database.
Database : Merupakan nama database yang kalian buat.
Sebagai contohnya.
$db = mysqli_connect('cloud.hostinga.id', 'akupunyahost', '12345', 'tesloginregister');
Beberapa kasus yang sering kami jumpai, pada saat mengatur atau menghubungkan phpMyadmin dengan database, banyak user yang mengalami kendala karena hanya kurangnya pengetahuan bagaimana cara setting nya.
Semoga berhasil dalam melakukan setting databasenya!
4. Membuat Halaman Login
Sebagai contoh dalam membuat halaman login, kalian dapat melihat pada Gambar 1 yang sudah kami berikan langsung contohnya. Terlihat sederhana, karena untuk mempercantik kami menyerahkan kepada kalian untuk mencoba versi masing-masing. Harapan kami, setelah membaca artikel ini kalian dapat implementasi secara langsung.
Masuk E-Rongsok
Not
yet a member? Sign up
Silahkan save script tersebut dengan login.php. Untuk tahapannya seperti pada saat membuat file server.php kalian cukup membuka notepad, save as, file type diganti all, lalu klik tombol save.
Penjelasan singkat kenapa kalian diminta untuk menamakan file tersebut sesuai yang kami arahkan, karena ada sebagian script yang jika kalian tidak membacanya terlebih dahulu maka tidak akan sinkron dengan yang lainnya. Contoh sebagai berikut.
Script tersebut berada pada posisi paling atas pada file login.php, karena untuk melakukan eksekusi login, kita meminta bantuan dari file server.php apakah username dan password yang dimasukkan oleh user terdaftar atau tidak.
Jika kalian ingin merubah nama file tersebut, kalian jangan lupa untuk mengganti nama file server.php yang sudah kalian save berikutnya.
Setelah selesai membuat file login.php, langkah selanjutnya kalian harus upload file tersebut ke dalam folder yang sama seperti file server.php ditempatkan. Jangan sampai terpisah, karena nanti tidak akan sinkron pada saat eksekusi file nya.
5. Membuat Halaman Registrasi
Pada dasarnya, untuk membuat halaman registrasi tidak jauh berbeda pada saat kita membuat file login.php yang sudah kita bahas sebelumnya. Silahkan disimak script untuk membuat halaman registrasi di bawah ini.
Daftar E-Rongsok
Already
a member? Sign in
Silahkan lakukan langkah yang sama pada saat membuat file login.php. Tetapi pada tahapan ini yang perlu kalian lakukan adalah memberikan nama dari file berikut berupa register.php agar sesuai dengan halaman login.php yang telah dituliskan sebelumnya.
Tambahan
Pada script di bawah ini digunakan untuk mempercantik tampilan dari halaman login dan register, silahkan disimak penempatan script nya.
Script dari style.css digunakan untuk mempercantik tampilan dari halaman tersebut, dalam arti bahwa kita akan menggabungkan antara CSS, HTML, dan PHP berjalan dengan seiringan. Sebagai informasi bahwa HTML digunakan untuk front end sedangkan PHP digunakan untuk back end dari semua aspek pemrograman.
Dan perlu diperhatikan juga sebagai penjelasan tambahan juga bahwa, fungsi dari script di bawah ini digunakan untuk memberikan informasi jika terjadi error pada saat melakukan login atau registrasi.
Terkait file untuk style.css dan errors.php akan kita berikan setelah penjelasan menampilkan halaman yang kita inginkan saat setelah kita berhasil melakukan proses login.
6. Membuat Halaman Index
Tahapan akhir dalam tutorial ini akhinya datang juga, karena pada saat kita sudah berhasil untuk membuat halaman login dan registrasi kita sekarang hanya memikirkan halaman apa yang ingin kita tampilkan. Tetapi kami akan memberikan contoh sebagai bahan pengetahuan saja kalian setelah membaca artikel yang kami buat.
 |
| Gambar 4 Tampilan Halaman Index |
Di sini kami ingin memberikan contoh bahwa kami ingin membuat suatu aplikasi bernama E-Rongsok dimana setiap orang yang ingin menjual barang rongsoknya diharuskan melakukan registrasi dan login terlebih dahulu. Setelah melakukan proses login, maka kalian akan di rujuk untuk menambahkan jenis barang rongsok apa saja yang ingin kalian buat.
Sebagai contoh sederhana saja, kami akan memberikan contoh script untuk menampilkan halaman berupa username dan action untuk logout. Script terlampir di bawah ini
session_start();
if
(!isset($_SESSION['username'])) {
$_SESSION['msg']
= "You must log in first";
header('location:
login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location:
login.php");
}
?>
Home Page
echo
$_SESSION['success'];
unset($_SESSION['success']);
?>
if (isset($_SESSION['username'])) : ?>
Welcome
Silahkan save file di atas dengan nama index.php lalu upload ke folder yang sama seperti yang telah kalian lakukan sebelumnya.
Pada tahapan ini, pada dasarnya kalian sudah bisa mencoba untuk menggunakan halaman login dan registrasi versi kalian sendiri. Kalian juga dapat edit script yang sudah kami berikan dan berkreasi sesuai keinginan kalian masing-masing.
Sesuai yang sudah kami janjikan, kami akan memberikan file style.css dan errors.php untuk kalian upload ke dalam folder yang sama seperti yang telah kalian lakukan sebelumnya.
body {
margin:0;
font-family:
'Open Sans', sans-serif;
font-size:
120%;
background:
#F8F8FF;
}
.header{
color:
black;
background:
#D0EAF7;
text-align:
center;
padding:
15px;
}
.header .judul{
font-size:
17pt;
}
header .deskripsi{
font-size:
11pt;
}
form, .content {
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.input-group {
margin:
10px 0px 10px 0px;
}
.input-group label {
display:
block;
text-align:
center;
margin:
3px;
}
.input-group input {
height: 27px;
border: 1px solid #B0C4DE;
width:
65%;
font-size: 16px;
}
.btn {
padding:10px;
font-size:
15px;
color:
white;
background:
#5F9EA0;
border:
none;
border-radius:
5px;
}
Silahkan kalian save dengan nama file style.css untuk script yang ada di atas. Dan kalian bisa edit sesuai kebutuhan masing-masing untuk mempercantik tampilan halaman kalian.
Untuk file errors.php silahkan kalian save script yang ada di bawah ini.
if (count($errors) > 0) : ?>
endif ?>
Silahkan upload kedua file tersebut ke dalam folder yang sudah kalian gunakan untuk membuat halaman login dan registrasi. Lihat hasil yang telah kalian buat, jika ada pertanyaan mengenai hal tersebut dapat langsung mengontak kami melalui email:
Untuk artikel berikutnya mengenai membuat halaman invoice dengan PHP dan bisa membuat history langsung di e-mail kalian bisa langsung KESINI, sekian yang dapat kami berikan. Jika ada pertanyaan silahkan langsung tinggalkan komentar.
Sekian artikel seputar tutorial dengan topik pembahasan mengenai Panduan Membuat Halaman Login dan Registrasi Dengan PHP. Semoga bisa memberikan cara panduan yang berguna dan bermanfaat bagi temen temen yang membutuhkan.