{"id":123,"date":"2022-08-18T14:24:52","date_gmt":"2022-08-18T14:24:52","guid":{"rendered":"https:\/\/beproblemsolver.com\/?p=123"},"modified":"2024-05-15T15:18:22","modified_gmt":"2024-05-15T15:18:22","slug":"user-login-in-php-with-session","status":"publish","type":"post","link":"https:\/\/beproblemsolver.com\/user-login-in-php-with-session\/","title":{"rendered":"User Login in PHP with Session &#038; MySQL"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/beproblemsolver.com\/user-login-in-php-with-session\/#Introduction\" >Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/beproblemsolver.com\/user-login-in-php-with-session\/#Forging_a_clean_UI_with_Bootstrap_for_User_Login\" >Forging a clean UI with Bootstrap for User Login<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/beproblemsolver.com\/user-login-in-php-with-session\/#Build_and_Hook_up_your_MySQL_database\" >Build and Hook up your MySQL database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/beproblemsolver.com\/user-login-in-php-with-session\/#Fun_Logic_of_PHP_User_Login_System\" >Fun Logic of PHP User Login System<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/beproblemsolver.com\/user-login-in-php-with-session\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">User login functionality in a website is a pretty simple but compulsory component. In all modern dynamic websites, the client asks for a login and admin panel so that they can do basic tasks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also see the second part of this post in: T<a href=\"https:\/\/beproblemsolver.com\/registration-form-in-html-and-with-phpmailer\/\" data-type=\"URL\" data-id=\"https:\/\/beproblemsolver.com\/registration-form-in-html-and-with-phpmailer\/\">he registration Form in the HTML<\/a> post.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today I will give you a simple and clean-looking login system with PHP and MySQL. We will maintain the login tracking with PHP Sessions and let Bootstrap make us a clean UI Design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Why PHP? Because despite being <strong><em>ancient<\/em><\/strong>. As some developers believe. PHP is fundamental to our web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Around 81.7% of the websites on the web use PHP as their server-side language.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And why not PHP?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP powers famous CMS(Content Management System) like WordPress and Joomla. Open Source OOPs frameworks like Laravel and CodeIgniter. And numerous others. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reason: PHP is simple and clean to write. Easy-to-understand and beginner-friendly. Vast community support and adaptability toward developer needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s what will do in this simple project:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>User Login Design with Bootstrap 5<\/li>\n\n\n\n<li>PHP code for MySQL Database<\/li>\n\n\n\n<li>Logic to process the login request<\/li>\n\n\n\n<li>Throw errors if the wrong entry of login credentials<\/li>\n\n\n\n<li>Redirect to Admin if successful request<\/li>\n\n\n\n<li>Conclusion<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Forging_a_clean_UI_with_Bootstrap_for_User_Login\"><\/span>Forging a clean UI with Bootstrap for User Login<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First, we create <strong>index.php<\/strong> and write our UI design with the latest Bootstrap 5. We added Google Fonts <strong>Poppins<\/strong> for making our UI look eye-catching. Whenever possible, we relied on CDN links because it keeps our code lightweight and less resource intensive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>index.php<\/strong> file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!doctype html>\n&lt;html lang=\"en\">\n\n&lt;head>\n  &lt;!-- Required meta tags -->\n  &lt;meta charset=\"utf-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n  &lt;!-- CSS -->\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins&amp;display=swap\" rel=\"stylesheet\">\n  &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n  &lt;link rel=\"stylesheet\" href=\"assets\/css\/style.css\">\n\n  &lt;title>Login&lt;\/title>\n&lt;\/head>\n\n&lt;body>\n  &lt;div class=\"container text-center d-flex align-items-center min-vh-100\">\n\n    &lt;div class=\"card mx-auto bg-info py-5\" style=\"width: 25rem;\">\n      &lt;h1>Login&lt;\/h1>\n\n      &lt;div class=\"card-body\">\n        &lt;form action=\"\" method=\"post\">\n          &lt;div class=\"mb-3\">\n            &lt;label for=\"email\" class=\"form-label\">Email address&lt;\/label>\n            &lt;input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" required>\n          &lt;\/div>\n          &lt;div class=\"mb-3\">\n            &lt;label for=\"password\" class=\"form-label\">Password&lt;\/label>\n            &lt;input type=\"password\" class=\"form-control\" id=\"password\" name=\"password\" required>\n          &lt;\/div>\n\n          &lt;button type=\"submit\" class=\"btn btn-primary\" name=\"login\">Login&lt;\/button>\n        &lt;\/form>\n      &lt;\/div>\n    &lt;\/div>\n\n  &lt;\/div>\n  \n  &lt;!-- JS -->\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\">&lt;\/script>\n&lt;\/body>\n\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we do simple CSS styling in our <strong>style.css<\/strong> file. To make our plain background something fun to look at, I have added a small background image in webp format. Also, coded in background color as a backup in the case of legacy browsers that do not support <strong>webp<\/strong> format yet.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Poppins', sans-serif;\n  background: #f1f1f1;\n  background: url(\"..\/img\/email-pattern.webp\");\n}<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Build_and_Hook_up_your_MySQL_database\"><\/span>Build and Hook up your MySQL database<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before we start preceding the actual PHP logic part. We need a database for keeping a record of our login users. And the best choice of course is MySQL&#8211;why because it&#8217;s free and open source like PHP. Not to mention very beginner-friendly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, go to your <strong>PHPMyAdmin<\/strong> whether you&#8217;re working online or in the local environment. And set up your database with a relevant name to your project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/phpmyadmin-1024x487.jpg\" alt=\"Create a new database in phpmyadmin on localhost\" class=\"wp-image-167\" srcset=\"https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/phpmyadmin-1024x487.jpg 1024w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/phpmyadmin-300x143.jpg 300w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/phpmyadmin-768x365.jpg 768w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/phpmyadmin.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Create Database in PHPMyAdmin in localhost<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After the Database is created. Set up a table named users which has mainly four columns we need: <strong>id<\/strong>, <strong>email<\/strong>, <strong>password<\/strong>, and <strong>active. <\/strong>We can also execute the below SQL code in the<strong> <\/strong>PHPMyAdmin <strong>SQL tab<\/strong> and this will generate our table <strong>&#8220;users&#8221;<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"sql\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">CREATE TABLE `users` (\n  `id` int(5) NOT NULL,\n  `email` varchar(255) NOT NULL,\n  `password` varchar(255) NOT NULL,\n  `active` tinyint(1) NOT NULL\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/create-database-table-with-sql-code-1024x487.jpg\" alt=\"Create table in database by running SQL code\" class=\"wp-image-172\" srcset=\"https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/create-database-table-with-sql-code-1024x487.jpg 1024w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/create-database-table-with-sql-code-300x143.jpg 300w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/create-database-table-with-sql-code-768x365.jpg 768w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/08\/create-database-table-with-sql-code.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Create a table in the database by running SQL code<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We can insert user login details by running the following SQL code. We are hard-coding this now. But we can create a PHP code for the signup process later. First, we must deploy our user login system.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"sql\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">INSERT INTO `users` (`id`, `email`, `password`, `active`) VALUES\n(1, 'test@gmail.com', '1234', 1);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next in line, we hook up a connection between MySQL and PHP:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>connection.php<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n$servername = \"localhost\"; \/\/ Enter Your severname here\n$username = \"root\"; \/\/ Enter your MySQL database username here\n$password = \"\"; \/\/ \/\/ Enter your MySQL database password here\n$dbname = \"ld_call\"; \/\/ Enter your Database Name here\n\n$conn = new mysqli($servername, $username, $password, $dbname);\n\nif ($conn->connect_error) {\n  die(\"Connection failed: \" . $conn->connect_error);\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now our UI and database are set. Next, we tackle our User Login process head-on! Yay! I am excited!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, check our latest post on how to <a href=\"https:\/\/beproblemsolver.com\/rest-api-with-laravel-and-postman\/\">Create Rest API with Laravel and Postman in 9 steps<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fun_Logic_of_PHP_User_Login_System\"><\/span>Fun Logic of PHP User Login System<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We can all be intimated by logic in programming languages. I remember dreading the C++ practical exams in school. It was so pain-wracking process to write the simplest logic. But it is mostly because&#8211; we don&#8217;t try to understand why we are writing the code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, you say to run our program and accomplish something.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But breaking it down into small chunks and bits of pieces is more useful. Let&#8217;s understand with current logic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We need to determine the login process. But before you write any code. Let&#8217;s write pseudo-code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What the heck is pseudo-code?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Good question! It&#8217;s not actual code. When we write small pieces of notes we as coders for simplifying the complex logic processes &#8212; we call them <strong>pseudo-code<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sure, our login process is pretty straightforward. And we could code it without effort.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But if you get in habit of writing <strong>pseudo-code<\/strong> before writing a single line of actual code. You will fall in love with coding. And even page-long logic will seem like child play for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pseudo Code for User Login Process:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The login form is filed by the user and submit is clicked.<\/li>\n\n\n\n<li>Details arrive at the logic part. Where first we clean them for any unintentional garbage like backslashes, whitespace, etc.<\/li>\n\n\n\n<li>Sanitized login details are stored and then compared with values inside our database for verification.<\/li>\n\n\n\n<li>If no match then we pop up an error message for the user.<\/li>\n\n\n\n<li>If the details match up, we redirect the user to the admin page.<\/li>\n\n\n\n<li>Also, code a session that tracks our logged-in user.<\/li>\n\n\n\n<li>Set up a logout process that removes our session.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid creating too many pieces when writing pseudo code and vice versa don&#8217;t make too few of them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let us jump to the actual code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nrequire_once(\"connection.php\");\nsession_start();\n\nfunction santize($data)\n{\n  $data = trim($data);\n  $data = stripslashes($data);\n  $data = htmlspecialchars($data);\n  return $data;\n}\n\nif (isset($_POST['login'])) {\n  $email = santize($_POST['email']);\n  $password = santize($_POST['password']);\n\n  $sql = \"SELECT id FROM users WHERE email = '$email' AND password = '$password' AND active = 1\";\n  $result = mysqli_query($conn, $sql);\n\n  if (mysqli_num_rows($result) > 0) {\n    $_SESSION['login_active'] = [$email, $password];\n    header(\"Location: admin.php\");\n    exit();\n  } else {\n    $_SESSION['errors'] = \"Login Error! Check Email &amp; Password\";\n    header(\"Location: index.php\");\n    exit();\n  }\n}\n?><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Before we go to the admin part. Add this snippet block for showing user login errors. This is to implement a temporary PHP session. Paste this code in a place where you want to show errors. Mind UI though.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php if (isset($_SESSION['errors'])) : ?>\n        &lt;div class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\">\n          &lt;?php\n          $message = $_SESSION['errors'];\n          unset($_SESSION['errors']);\n          echo $message;\n          ?>\n          &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\">&lt;\/button>\n        &lt;\/div>\n      &lt;?php endif; ?><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Insert this snippet code of PHP at the top of our <strong>index.php<\/strong> and create <strong>admin.php<\/strong> which will be displayed in case of a successful login attempt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>admin.php<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!doctype html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;!-- Required meta tags -->\n  &lt;meta charset=\"utf-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  &lt;!-- Bootstrap CSS -->\n  &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n  &lt;link rel=\"stylesheet\" href=\"assets\/css\/style.css\">\n  &lt;title>Admin&lt;\/title>\n&lt;\/head>\n&lt;body>\n  &lt;nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\n    &lt;div class=\"container-fluid\">\n      &lt;a class=\"navbar-brand\" href=\"\">Admin&lt;\/a>\n      &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n        &lt;span class=\"navbar-toggler-icon\">&lt;\/span>\n      &lt;\/button>\n      &lt;div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n        &lt;ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">&lt;\/ul>\n\n        &lt;div class=\"d-flex\">\n          &lt;a class=\"btn btn-outline-danger\" href=\"logout.php\">Logout&lt;\/a>\n        &lt;\/div>\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/nav>\n\n  &lt;div class=\"container\">\n    &lt;h1>Welcome to Admin&lt;\/h1>\n  &lt;\/div>\n\n  &lt;!-- Option 1: Bootstrap Bundle with Popper -->\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\">&lt;\/script>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now we can insert PHP code at the top of admin.php which checks whether you are login session is active. Without this,<em> everyone will be able to access your admin file<\/em>. So do put this code above your admin.php Html code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Note:<\/strong> You can use this code on other pages that need to be secured by the login process.<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nrequire_once(\"connection.php\");\nsession_start();\n\nif (!isset($_SESSION['login_active'])) {\n  header(\"Location: index.php\");\n  exit();\n}\n?><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now we are pretty much ready to deploy our user login functionality at any server or local host. You can combine this PHP user login with the <a href=\"https:\/\/beproblemsolver.com\/simple-php-shopping-cart-with-session\/\" data-type=\"URL\" data-id=\"https:\/\/beproblemsolver.com\/simple-php-shopping-cart-with-session\/\">PHP Shopping cart<\/a> as well.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have the seen whole process of building a user login system with PHP, MySQL, and Bootstrap 5. You can just copy the code and deploy it as needed. Below you download the whole code from my <a href=\"https:\/\/github.com\/PawanKumar-Dev\" data-type=\"URL\" data-id=\"https:\/\/github.com\/PawanKumar-Dev\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub repository<\/a>. It also includes the database file of SQL&#8211; so don&#8217;t forget to import it if using that code.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/PawanKumar-Dev\/loginwithalert--corephp-BT5-.git\" target=\"_blank\" rel=\"noreferrer noopener\">Download Code at Github<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And if you are looking for an amazing free code editor. Check out our <a href=\"https:\/\/beproblemsolver.com\/why-vs-code-editor-in-2022\/\">Why VS code in the 2022<\/a> post.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lastly if, you think our code helped you solve a need or problem then do comment and follow us on GitHub and social media. Have fun guys!\ud83d\ude0a <a href=\"https:\/\/beproblemsolver.com\/about\/\" data-type=\"URL\" data-id=\"https:\/\/beproblemsolver.com\/about\/\" target=\"_blank\" rel=\"noreferrer noopener\">Problem Solver<\/a> is signing off! Ta-da. \ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>User Login in a website is a pretty simple but compulsory component. In all dynamic websites, the client asks for a login and admin panel so that they can do basic tasks. Learn to code user login system &#038; download code in this post.<\/p>\n","protected":false},"author":1,"featured_media":132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAow6-e6DA:productID":"","footnotes":""},"categories":[14,19,18,17,16,15],"tags":[8,12,11,9,7,6,10,13],"class_list":["post-123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","category-bootstrap","category-css","category-html","category-mysql","category-php","tag-bootstrap-5","tag-css3","tag-html5","tag-login-system","tag-mysql","tag-php","tag-php-with-session","tag-pseudo-code"],"_links":{"self":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":0,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/media\/132"}],"wp:attachment":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}