{"id":1852,"date":"2023-04-12T03:01:55","date_gmt":"2023-04-12T03:01:55","guid":{"rendered":"https:\/\/imilkom.usu.ac.id\/?p=1852"},"modified":"2023-04-12T16:21:51","modified_gmt":"2023-04-12T16:21:51","slug":"imilkom-belajar-10-cara-membuat-login-dan-signup-form-di-php","status":"publish","type":"post","link":"https:\/\/imilkom.usu.ac.id\/?p=1852","title":{"rendered":"Imilkom Belajar-#10 Cara Membuat Login dan Signup Form di PHP"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

Login dan signup adalah bagian penting dari banyak\naplikasi web modern. Artikel ini akan membahas bagaimana cara membuat fitur\nlogin dan signup menggunakan PHP dan MySQL.<\/p>\n\n\n\n

Langkah 1: Buat database MySQL<\/p>\n\n\n\n

Langkah pertama adalah membuat database MySQL di\nserver lokal atau server web. Dalam artikel ini, kita akan menggunakan server\nlokal.<\/p>\n\n\n\n

Pertama, buka aplikasi XAMPP dan nyalakan Apache dan\nMySQL. Kemudian, buka browser web dan masukkan alamat\nhttp:\/\/localhost\/phpmyadmin\/.<\/p>\n\n\n\n

Setelah itu, buat database baru dengan mengklik tombol\n“New” di panel sebelah kiri dan memasukkan nama database yang\ndiinginkan.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Langkah 2: Buat tabel untuk pengguna<\/p>\n\n\n\n

Setelah database dibuat, buat tabel untuk menyimpan informasi\npengguna. Dalam artikel ini, kita akan membuat tabel dengan nama\n“users” dan kolom-kolom berikut:<\/p>\n\n\n\n

id (INT, AUTO_INCREMENT, PRIMARY KEY)<\/p>\n\n\n\n

username (VARCHAR)<\/p>\n\n\n\n

email (VARCHAR)<\/p>\n\n\n\n

password (VARCHAR)<\/p>\n\n\n\n

Untuk membuat tabel ini, klik database yang telahdibuat dan pilih “SQL” di bagian atas halaman. Masukkan perintah SQLberikut:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Langkah 3: Membuat halaman login<\/p>\n\n\n\n

Pertama, buat file baru dengan nama”login.php” dan tambahkan kode berikut:<\/p>\n\n\n\n

<\/p>\n\n\n\n

<?php\n    session_start();\n?>\n<!DOCTYPE html>\n<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"style\/login_signup.css\">\n    <\/head>\n    <body>\n        <div class=\"container\">\n            <h2>Login Form<\/h2>\n            <p id=\"message\" style=<?php\n                    if (isset($_SESSION['message']) and $_SESSION['message']=='Akun berhasil dibuat'){\n                        echo \"color:green;\";\n                    }\n                    else echo \"color:red;\";\n                ?>>\n                <?= isset($_SESSION['message'])?$_SESSION['message']:\"\" ?>\n                <?= $_SESSION['message']=\"\"?>\n            <\/p>\n            <form method=\"post\" id=\"login_form\" action=\"login_proccess.php\">\n                <label for=\"nama_atau_email\"><b>Nama atau email<\/b><\/label><br>\n                <input type=\"text\" id=\"nama_atau_email\" size=\"30\" placeholder=\"Masukkan nama atau email\" name=\"username\"><br>\n                <label for=\"password\"><b>Kata sandi<\/b><\/label><br>\n                <input type=\"password\" id=\"password\" size=\"30\" placeholder=\"Masukkan kata sandi\" name=\"password\"><br>\n                <input type=\"submit\" id=\"submit\">\n            <\/form>\n            <p>Belum memiliki akun silahkan <a href=\"signup.php\">daftar<\/a><\/p>\n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Kemudian, buat file baru dengan nama”login_process.php” dan tambahkan kode berikut:<\/p>\n\n\n\n
<?php\nsession_start();\n\n\/\/ Menghubungkan ke database\n$db = new mysqli(\"localhost\", \"root\", \"\", \"imilkom_belajar_10\");\n\n\/\/ Mendapatkan input dari form\n$username = $_POST['username'];\n$password = $_POST['password'];\n\n\/\/ Mengecek apakah input kosong\nif(empty($username) || empty($password)) {\n  $_SESSION['message'] = \"Username dan password harus diisi\";\n  header(\"location: login.php\");\n  exit();\n}\n\n\/\/ Mengecek apakah pengguna ada di database\n$result = $db->query(\"SELECT * FROM users WHERE ( username='$username' OR email = '$username') AND password='$password'\");\nif($result->num_rows == 0) {\n  $_SESSION['message'] = \"Username atau password salah\";\n  header(\"location: login.php\");\n  exit();\n}\n\n\/\/ Menyimpan informasi pengguna ke session\n$user = $result->fetch_assoc();\n$_SESSION['user'] = $user['username'];\n$_SESSION['message'] = \"Login berhasil\";\nheader(\"location: index.php\");\nexit();\n?><\/code><\/pre>\n\n\n\n
Langkah 4: Membuat halaman signup<\/p>\n\n\n\n
Pertama, buat file baru dengan nama”signup.php” dan tambahkan kode berikut:<\/p>\n\n\n\n
<?php\n    session_start();\n?>\n<!DOCTYPE html>\n<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"style\/login_signup.css\">\n    <\/head>\n    <body>\n        <div class=\"container\">\n            <h2>Signup Form<\/h2>\n            <p id=\"message\" style=\"color:red;\">\n                <?= isset($_SESSION['message'])?$_SESSION['message']:\"\" ?>\n                <?= $_SESSION['message']=\"\"?>\n            <\/p>\n            <form method=\"post\" id=\"login_form\" action=\"signup_proccess.php\">\n                <label for=\"nama_atau_email\"><b>Nama<\/b><\/label><br>\n                <input type=\"text\" id=\"nama\" size=\"30\" placeholder=\"Masukkan nama\" name=\"nama\"><br>\n                <label for=\"nama_atau_email\"><b>Email<\/b><\/label><br>\n                <input type=\"email\" id=\"email\" size=\"30\" placeholder=\"Masukkan email\" name=\"email\"><br>\n                <label for=\"password\"><b>Kata sandi<\/b><\/label><br>\n                <input type=\"password\" id=\"password\" size=\"30\" placeholder=\"Masukkan kata sandi\" name=\"kata_sandi\"><br>\n                <input type=\"submit\" id=\"submit\">\n            <\/form>\n            <p>Sudah memiliki akun silahkan <a href=\"login.php\">login<\/a><\/p>\n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Kemudian, buat file baru dengan nama”signup_process.php” dan tambahkan kode berikut:<\/p>\n\n\n\n
<?php\nsession_start();\n\n\/\/ Menghubungkan ke database\n$db = new mysqli(\"localhost\", \"root\", \"\", \"imilkom_belajar_10\");\n\n\/\/ Mendapatkan input dari form\n$username = $_POST['nama'];\n$email = $_POST['email'];\n$password = $_POST['kata_sandi'];\n\n\/\/ Mengecek apakah input kosong\nif(empty($username) || empty($email) || empty($password)) {\n  $_SESSION['message'] = \"Semua field harus diisi\";\n  header(\"location: signup.php\");\n  exit();\n}\n\n\/\/ Mengecek apakah email sudah digunakan\n$result = $db->query(\"SELECT * FROM users WHERE email='$email'\");\nif($result->num_rows > 0) {\n  $_SESSION['message'] = \"Email sudah digunakan\";\n  header(\"location: signup.php\");\n  exit();\n}\n\n\/\/ Membuat akun baru di database\n$db->query(\"INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')\");\n$_SESSION['message'] = \"Akun berhasil dibuat\";\nheader(\"location: login.php\");\nexit();\n?><\/code><\/pre>\n\n\n\n
Langkah 5: Menambahkan fitur logout<\/p>\n\n\n\n
Untuk menambahkan fitur logout, buat file baru dengannama “logout.php” dan tambahkan kode berikut:<\/p>\n\n\n\n
<?php\nsession_start();\nsession_unset();\nsession_destroy();\nheader(\"location: login.php\");\nexit();\n?><\/code><\/pre>\n\n\n\n
Langkah 6: Melindungi halaman yang hanya dapat diakses\nsetelah login<\/p>\n\n\n\n
Untuk melindungi halaman yang hanya dapat diaksessetelah login, tambahkan kode berikut di awal file tersebut:<\/p>\n\n\n\n
<?php\nsession_start();\nif(!isset($_SESSION['user'])) {\n  $_SESSION['message'] = \"Anda harus login terlebih dahulu\";\n  header(\"location: login.php\");\n  exit();\n}\n?><\/code><\/pre>\n\n\n\n
Berikut tampilan apabila index.php langsung diakses menggunakan url<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Langkah 7: Menampilkan informasi pengguna yang telah\nlogin<\/p>\n\n\n\n
Untuk menampilkan informasi pengguna yang telah login,tambahkan kode berikut ke halaman yang hanya dapat diakses setelah login:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Halaman Setelah Login<\/title>\n<\/head>\n<body>\n    <h2>Selamat datang, <?php echo $_SESSION['user']; ?><\/h2>\n    <p><?php echo $_SESSION['message']; ?><\/p>\n    <a href=\"logout.php\">Logout<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Langkah 8: Memperindah tampilan form login dan signup<\/p>\n\n\n\n
Untuk memberikan tampilan yang bagus buat file CSS didalam folder style dengan nama \u201clogin_signup.css\u201d<\/p>\n\n\n\n
.container{\n    margin:0;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 1px;\n    padding:30px;\n    border-radius: 5%;\n    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;\n    background-color: #E9F8F9;\n}\nhtml{\n    color:#537FE7;\n}\nh2{\n    text-align: center;\n}\n#message{\n    text-align: center;\n}\n#login_form{\n    margin:3px;\n}\ninput{\n    padding: 10px 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n    border:1px;\n}\n#submit{\n  margin:0;\n  position: relative;\n  left:50%;\n  transform: translateX(-50%);\n  background-color: #C0EEF2;\n  border: 1px;\n  border-radius: 5%;\n}\n#submit:hover{\n    background-color: #76DAE5;\n}\na{\n    color:#655DBB;\n}<\/code><\/pre>\n\n\n\n
Berikut adalah contoh proses signup dan login <\/p>\n\n\n\n
  1. Signup<\/li><\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    2. Setelah signup data akan tersimpan di localhost<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    3. Log in<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    4. Tampilanindex.php setelah berhasil login<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Sekarang IMILKOMers telah berhasil membuat fitur login dansignup menggunakan PHP dan MySQL nih!. IMILKOMers dapat menyesuaikan kode ini sesuai dengan kebutuhan aplikasi web nya ya.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Login dan signup adalah bagian penting dari banyak aplikasi web modern. Artikel ini akan membahas bagaimana cara membuat fitur login dan signup menggunakan PHP dan MySQL. Langkah 1: Buat database…<\/p>\n","protected":false},"author":2,"featured_media":1866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[14],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts\/1852"}],"collection":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1852"}],"version-history":[{"count":4,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts\/1852\/revisions"}],"predecessor-version":[{"id":1870,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts\/1852\/revisions\/1870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/media\/1866"}],"wp:attachment":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}