[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-cara-membuat-login-dan-logout-sederhana-dalam-php":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":10,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},437,"cara-membuat-login-dan-logout-sederhana-dalam-php","Belajar PHP – Cara membuat login dan logout sederhana dalam PHP","Pada tutorial kali ini, kita akan membahas tentang cara membuat fitur login dan logout sederhana dalam PHP. Adapun persiapan yang harus kamu ikuti sebelum lanjut ke artikel ini adalah: Siapkan webserv",null,[],"2020-09-24T16:00:00Z","2026-07-14T04:39:39.608759Z","\u003Cp>Pada tutorial kali ini, kita akan membahas tentang cara membuat fitur login dan logout sederhana dalam PHP.\u003C\u002Fp>\n\u003Cp>Adapun persiapan yang harus kamu ikuti sebelum lanjut ke artikel ini adalah:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Siapkan webserver di komputer local kamu. Kamu bisa baca tentang menginstall xampp di komputer kamu disini: Cara menginstall xampp di windows\u003C\u002Fli>\n\u003Cli>Belajar tentang session di dalam PHP. Untuk yang belum tahu, bisa baca dulu pembahasan tentang session dalam php pada artikel ini: next akan dibahas\u003C\u002Fli>\n\u003Cli>Membuat tampilan halaman login dan logout. Kita akan gunakan framework \u003Ca href=\"https:\u002F\u002Fgetbootstrap.com\u002Fdocs\u002F4.2\">Boostrap 4\u003C\u002Fa>, Buat yang belum tahu, Boostrap adalah framework css yang bisa memudahkan kita membuat tampilan website.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Jika persiapan di atas sudah kamu siapkan, kita akan lanjutkan ngodingnya.\u003C\u002Fp>\n\u003Ch4>Struktur File\u003C\u002Fh4>\n\u003Cp>Kalian bisa membuat 4 file seperti di bawah ini. Penjelasan mengenai masing-masing file akan kita bahas selanjutnya.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>- index.php\n- login.php\n- logout.php\n- process.php\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>Step 1. Membuat tampilan interface login form dan halaman admin\u003C\u002Fh4>\n\u003Cp>Pertama kita buat sebuah file \u003Ccode>login.php\u003C\u002Fcode>, file ini yang akan menjadi halaman login form.\u003C\u002Fp>\n\u003Cp>Kodenya ada di bawah ini.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;!-- Required meta tags --&gt;\n\t&lt;meta charset=\"utf-8\"&gt;\n\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\t&lt;!-- Bootstrap CSS --&gt;\n\t&lt;link rel=\"stylesheet\" href=\"https:\u002F\u002Fstackpath.bootstrapcdn.com\u002Fbootstrap\u002F4.2.1\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS\" crossorigin=\"anonymous\"&gt;\n\t&lt;title&gt;Login &amp; Logout PHP&lt;\u002Ftitle&gt;\n&lt;\u002Fhead&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;div class=\"row\"&gt;\n\t\t\t&lt;div class=\"col-md-4 offset-md-4\"&gt;\n\t\t\t\t&lt;div class=\"card mt-5\"&gt;\n\t\t\t\t\t&lt;div class=\"card-title text-center\"&gt;\n\t\t\t\t\t\t&lt;h1&gt;Login Form&lt;\u002Fh1&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t&lt;div class=\"card-body\"&gt;\n\t\t\t\t\t\t&lt;form action=\"process.php\" method=\"post\"&gt;\n\t\t\t\t\t\t\t&lt;div class=\"form-group\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"username\"&gt;Email address&lt;\u002Flabel&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"text\" name=\"username\" class=\"form-control\" id=\"username\" aria-describedby=\"username\" placeholder=\"username\"&gt;\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t\t\t&lt;div class=\"form-group\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"password\"&gt;Password&lt;\u002Flabel&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"password\" name=\"password\" class=\"form-control\" id=\"password\" placeholder=\"Password\"&gt;\n\t\t\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\u002Fbutton&gt;\n\t\t\t\t\t\t&lt;\u002Fform&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t&lt;\u002Fdiv&gt;\n\t\t&lt;\u002Fdiv&gt;\n\t&lt;\u002Fdiv&gt;\n&lt;\u002Fbody&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Tampilannya kurang lebih akan seperti ini.\u003C\u002Fp>\n\u003Cfigure>\n \u003Cfigcaption>\n\u003Ci>Tampilan halaman login.php\u003C\u002Fi>\n\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Kedua, kita akan membuat sebuah file \u003Ccode>index.php\u003C\u002Fcode> yang nantinya berfungsi sebagai halaman yang dituju setelah berhasil login.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;!-- Required meta tags --&gt;\n\t&lt;meta charset=\"utf-8\"&gt;\n\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\t&lt;!-- Bootstrap CSS --&gt;\n\t&lt;link rel=\"stylesheet\" href=\"https:\u002F\u002Fstackpath.bootstrapcdn.com\u002Fbootstrap\u002F4.2.1\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS\" crossorigin=\"anonymous\"&gt;\n\t&lt;title&gt;Login &amp; Logout PHP&lt;\u002Ftitle&gt;\n&lt;\u002Fhead&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;div class=\"row\"&gt;\n\t\t\t&lt;div class=\"col-md-4 offset-md-4  mt-5\"&gt;\n\t\t\t\t&lt;div class=\"alert alert-success\" role=\"alert\"&gt;\n\t\t\t\t  Berhasil login ke dalam sistem.\n\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t&lt;div class=\"card\"&gt;\n\t\t\t\t\t&lt;div class=\"card-title text-center\"&gt;\n\t\t\t\t\t\t&lt;h1&gt;Halaman Admin&lt;\u002Fh1&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t&lt;div class=\"card-body\"&gt;\n\t\t\t\t\t\t&lt;p&gt;Hello username&lt;\u002Fp&gt;\n\t\t\t\t\t\t&lt;p&gt;Kamu berhasil ke halaman admin.&lt;\u002Fp&gt;\n&lt;a href=\"logout.php\" &gt;Logout&lt;\u002Fa&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t&lt;\u002Fdiv&gt;\n\t\t&lt;\u002Fdiv&gt;\n\t&lt;\u002Fdiv&gt;\n&lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Tampilan halamannya kurang lebih akan seperti gambar dibawah ini.\u003C\u002Fp>\n\u003Cfigure>\n \u003Cfigcaption>\n\u003Ci>tampilan halaman index.php\u003C\u002Fi>\n\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch4>Step 2. Membuat file untuk memproses login form dan logout.\u003C\u002Fh4>\n\u003Ch4>1. process.php\u003C\u002Fh4>\n\u003Cp>Pertama, buat sebuah file \u003Ccode>process.php\u003C\u002Fcode> yang berfungsi sebagai file yang memproses form saat di submit.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php \nsession_start();\n\u002F\u002Flist user yang valid\n\u002F\u002Fselain user ini tidak bisa login.\n$list_user = [\n\t[\n\t\t'username' =&gt; 'john',\n\t\t'password' =&gt; '123456'\n\t],\n\t[\n\t\t'username' =&gt; 'admin',\n\t\t'password' =&gt; 'admin'\n\t]\n];\n\u002F\u002Fdapatkan data user dari form\n$user = [\n\t'username' =&gt; $_POST['username'],\n\t'password' =&gt; $_POST['password'],\n];\n\u002F\u002Fcocokan data user dengan list user yang valid.\n\u002F\u002Fmisalnya pakai looping saja.\nforeach ($list_user as $key =&gt; $value) {\n\t\n\t\u002F\u002Flogin success\n\tif($value['username'] == $user['username'] &amp;&amp; $value['password'] == $user['password']){\n\t\t$_SESSION['login'] = true;\n\t\t$_SESSION['username'] =  $data['username'];\n\t\t$_SESSION['message']  = 'Berhasil login ke dalam sistem.';\n\t\theader(\"Location: index.php\");\n\t}\n\t\u002F\u002Fpassword salah\n\telse if($value['username'] == $user['username'] &amp;&amp; $value['password'] !== $user['password']){\n\t\t$_SESSION['error'] = 'Password anda salah';\n\t\theader(\"Location: login.php\");\n\t}\n\t\u002F\u002Fusername salah\n\telse if($value['username'] !== $user['username']){\n\t\t$_SESSION['error'] = 'Username anda tidak ditemukan.';\n\t\theader(\"Location: login.php\");\n\t}\n}\n?&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Penjelasan process.php\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Paling atas, kita tambahkan code \u003Ccode>session_start();\u003C\u002Fcode> ini berfungsi agar kita bisa menggunakan session di dalam file ini.\u003C\u002Fp>\n\u003Cp>Karena tutorial ini kita buat sangat sederhana, maka list user yang bisa login ke dalam sistem kite definisikan dlu di dalam variable \u003Ccode>$list_user\u003C\u002Fcode> di line 6.\u003C\u002Fp>\n\u003Cp>Di line 19, kita menampung informasi user yang didapatkan dari form di login.php\u003C\u002Fp>\n\u003Cp>Di line 28 kita melakukan perulangan dari data \u003Ccode>$list_user\u003C\u002Fcode> dan mengecek apakah username dan password dari form login sesuai dengan list_user.\u003C\u002Fp>\n\u003Cp>Jika username &amp; password benar, maka kita redirect ke halaman \u003Ccode>index.php\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>Jika salah maka kita redirect balik lagi ke halaman \u003Ccode>login.php\u003C\u002Fcode> dengan pesan session.\u003C\u002Fp>\n\u003Ch4>2. Logout.php\u003C\u002Fh4>\n\u003Cp>Kedua, buat sebuah file lagi untuk menghandle proses logout. Kita beri nama \u003Ccode>logout.php\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003C?php \nsession_start();\n\u002F\u002Flogout\n\u002F\u002Fhapus semua session\nsession_unset();\n\u002F\u002Ftampilkan sukses logout\n$_SESSION['logout'] = 'Berhasil logout.';\nheader(\"Location: login.php\");\n?>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Penjelasan logout.php\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Pada file logout.php, kita menghapus semua session yang dibuat sebelumnya, bisa di lihat di line 6.\u003C\u002Fp>\n\u003Cp>Jika sudah logout, kita redirect lagi ke halaman \u003Ccode>login.php\u003C\u002Fcode> dengan pesan logout berhasil.\u003C\u002Fp>\n\u003Ch4>Tambahan\u003C\u002Fh4>\n\u003Cp>Sedikit tambahan di file \u003Ccode>index.php\u003C\u002Fcode>, jika tidak ada session login maka kita akan redirect ke halaman login.php\u003C\u002Fp>\n\u003Cp>Jadi file index.php akan menjadi seperti berikut ini.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php\nsession_start();\nif(empty($_SESSION['login'])){\n\theader(\"Location: login.php\");\n}\n?&gt;\n&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;!-- Required meta tags --&gt;\n\t&lt;meta charset=\"utf-8\"&gt;\n\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\t&lt;!-- Bootstrap CSS --&gt;\n\t&lt;link rel=\"stylesheet\" href=\"https:\u002F\u002Fstackpath.bootstrapcdn.com\u002Fbootstrap\u002F4.2.1\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS\" crossorigin=\"anonymous\"&gt;\n\t&lt;title&gt;Login &amp; Logout PHP&lt;\u002Ftitle&gt;\n&lt;\u002Fhead&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;div class=\"row\"&gt;\n\t\t\t&lt;div class=\"col-md-4 offset-md-4  mt-5\"&gt;\n\t\t\t\t&lt;div class=\"alert alert-success\" role=\"alert\"&gt;\n\t\t\t\t  Berhasil login ke dalam sistem.\n\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t&lt;div class=\"card\"&gt;\n\t\t\t\t\t&lt;div class=\"card-title text-center\"&gt;\n\t\t\t\t\t\t&lt;h1&gt;Halaman Admin&lt;\u002Fh1&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t&lt;div class=\"card-body\"&gt;\n\t\t\t\t\t\t&lt;p&gt;Hello &lt;?php echo $_SESSION['username']?&gt;&lt;\u002Fp&gt;\n\t\t\t\t\t\t&lt;p&gt;Kamu berhasil ke halaman admin.&lt;\u002Fp&gt;\n\t\t\t\t\t\t&lt;center&gt;\n\t\t\t\t\t\t\t&lt;a href=\"logout.php\"&gt;Logout&lt;\u002Fa&gt;\n\t\t\t\t\t\t&lt;\u002Fcenter&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t&lt;\u002Fdiv&gt;\n\t\t&lt;\u002Fdiv&gt;\n\t&lt;\u002Fdiv&gt;\n&lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Tambahan untuk halaman \u003Ccode>login.php\u003C\u002Fcode> adalah menampilkan pesan error jika username atau password salah dan pesan saat sudah logout.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php \nsession_start();\n?&gt;\n&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;!-- Required meta tags --&gt;\n\t&lt;meta charset=\"utf-8\"&gt;\n\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\t&lt;!-- Bootstrap CSS --&gt;\n\t&lt;link rel=\"stylesheet\" href=\"https:\u002F\u002Fstackpath.bootstrapcdn.com\u002Fbootstrap\u002F4.2.1\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS\" crossorigin=\"anonymous\"&gt;\n\t&lt;title&gt;Login &amp; Logout PHP&lt;\u002Ftitle&gt;\n&lt;\u002Fhead&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;div class=\"row\"&gt;\n\t\t\t&lt;div class=\"col-md-4 offset-md-4 mt-5\"&gt;\n\t\t\t\t&lt;?php\n\t\t\t\tif(isset($_SESSION['error'])) {\n\t\t\t\t?&gt;\n\t\t\t\t&lt;div class=\"alert alert-warning\" role=\"alert\"&gt;\n\t\t\t\t  &lt;?php echo $_SESSION['error']?&gt;\n\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t&lt;?php\n\t\t\t\t}\n\t\t\t\t?&gt;\n\t\t\t\t\n\t\t\t\t&lt;div class=\"card \"&gt;\n\t\t\t\t\t&lt;div class=\"card-title text-center\"&gt;\n\t\t\t\t\t\t&lt;h1&gt;Login Form&lt;\u002Fh1&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t&lt;div class=\"card-body\"&gt;\n\t\t\t\t\t\t&lt;form action=\"process.php\" method=\"post\"&gt;\n\t\t\t\t\t\t\t&lt;div class=\"form-group\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"username\"&gt;Email address&lt;\u002Flabel&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"text\" name=\"username\" class=\"form-control\" id=\"username\" aria-describedby=\"username\" placeholder=\"username\"&gt;\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t\t\t&lt;div class=\"form-group\"&gt;\n\t\t\t\t\t\t\t\t&lt;label for=\"password\"&gt;Password&lt;\u002Flabel&gt;\n\t\t\t\t\t\t\t\t&lt;input type=\"password\" name=\"password\" class=\"form-control\" id=\"password\" placeholder=\"Password\"&gt;\n\t\t\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\u002Fbutton&gt;\n\t\t\t\t\t\t&lt;\u002Fform&gt;\n\t\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t&lt;\u002Fdiv&gt;\n\t\t&lt;\u002Fdiv&gt;\n\t&lt;\u002Fdiv&gt;\n&lt;\u002Fbody&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Nah jika kalian sudah berhasil mengikuti tutorial ini akan mendapatkan tampilan yang seperti di bawah ini.\u003C\u002Fp>\n\u003Cfigure>\n \u003Cfigcaption>\n\u003Ci>Login dengan PHP\u003C\u002Fi>\n\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Gimana teman-teman? Cukup mudah kan? Ini adalah salah satu dasar dari proses autentikasi dalam PHP. Dasar login &amp; logout menggunakan session sebagai pertanda apakah kita sedang login atau tidak.\u003C\u002Fp>\n\u003Cp>Untuk artikel berikutnya, kita akan membahas lagi tentang proses login dan logout mungkin dengan menyambungkannya dengan database.\u003C\u002Fp>\n\u003Cp>Jika tutorial ini bermanfaat, bisa di share dan komen jika ada pertanyaan ya.\u003C\u002Fp>","Pada tutorial kali ini, kita akan membahas tentang cara membuat fitur login dan logout sederhana dalam PHP. Adapun persiapan yang harus kamu ikuti sebelum lanju",[],[],0]