{"id":62,"date":"2016-05-06T10:18:50","date_gmt":"2016-05-06T10:18:50","guid":{"rendered":"http:\/\/symbioticindia.in\/docu\/?p=62"},"modified":"2016-05-06T10:18:50","modified_gmt":"2016-05-06T10:18:50","slug":"how-to-create-a-login-page-with-php-and-mysql","status":"publish","type":"post","link":"http:\/\/symbioticindia.in\/docu\/2016\/05\/06\/how-to-create-a-login-page-with-php-and-mysql\/","title":{"rendered":"How to create a Login page with PHP and MySQL"},"content":{"rendered":"<h3>Introduction<\/h3>\n<p>It\u2019s easy to use <a href=\"http:\/\/mrbool.com\/how-to-create-your-own-search-engine-with-php-and-mysql\/32733\" target=\"_blank\">PHP with MySQL<\/a> to create it. But for these kind of webpages we need to use form validation on our webpages, if anyone use JavaScript so it\u2019s well and good because JavaScript is a very good technique to use and <a href=\"http:\/\/mrbool.com\/validation-in-javascript-emails-letters-and-empty-input-textbox\/25472\" target=\"_blank\">solve Form Validation problems<\/a>. But we will directly go to our work just create a simple Sign-in page to make you understand the concept of Sign-in webpage in this article.<\/p>\n<h3>Requirements for Sign-In webpage:<\/h3>\n<ul>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<li>PHP<\/li>\n<li>MySQL<\/li>\n<li>Xampp\/Wamp server<\/li>\n<\/ul>\n<h3>Using HTML to design the Sign-In webpage:<\/h3>\n<p>First of all we need to design the Sign-In webpage. Commonly what we see on a Sign-In webpage. There is username and password form boxes and a button to sign in to the profile page of user. And also sometimes we saw CAPTCHA which is used to identify the user on the webpage during the wrong entries of the Sign-In webpage. There is also an easy method to put CAPTCHA on a webpage. But now in this article we will just learn how to design a Sign-In webpage. Let\u2019s start\u2026<\/p>\n<p><strong>Listing 1<\/strong>: Sign-In.html<\/p>\n<div class=\"div_listagem\">\n<pre class=\"pre_listagem\">&lt;!DOCTYPE HTML&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Sign-In&lt;\/title&gt;\r\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style-sign.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body id=\"body-color\"&gt;\r\n&lt;div id=\"Sign-In\"&gt;\r\n&lt;fieldset style=\"width:30%\"&gt;&lt;legend&gt;LOG-IN HERE&lt;\/legend&gt;\r\n&lt;form method=\"POST\" action=\"connectivity.php\"&gt;\r\nUser &lt;br&gt;&lt;input type=\"text\" name=\"user\" size=\"40\"&gt;&lt;br&gt;\r\nPassword &lt;br&gt;&lt;input type=\"password\" name=\"pass\" size=\"40\"&gt;&lt;br&gt;\r\n&lt;input id=\"button\" type=\"submit\" name=\"submit\" value=\"Log-In\"&gt;\r\n&lt;\/form&gt;\r\n&lt;\/fieldset&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt; \r\n<\/pre>\n<\/div>\n<p><img decoding=\"async\" class=\"imagem_artigo\" src=\"http:\/\/file.mrbool.com\/mrbool\/articles\/Faisal\/LoginPagePHP\/LoginPagePHP01.jpg\" alt=\"Output of the Sign-in Webpage\" \/><\/p>\n<p><strong>Figure 1<\/strong>: Output of the Sign-in Webpage<\/p>\n<p>In Figure 1 you can see the output of the Listing 1. But there is a problem, as we used the fieldset tag and the fieldset tag size is being a problem on this page. So we should change the width of the fieldset tag size. I have a simple way to use the Inline Style of CSS to get rid from this problem. Let\u2019s see the inline CSS style code.<\/p>\n<p><strong>Listing 2<\/strong>: Inline CSS Style<\/p>\n<div class=\"div_listagem\">\n<pre class=\"pre_listagem\">&lt;fieldset style=\"width:30%\"&gt;&lt;legend&gt;LOG-IN HERE&lt;\/legend&gt;\r\n<\/pre>\n<\/div>\n<p>So let\u2019s we check the output of the sign-in.html webpage after writing the inline CSS style in the fieldset tag as you can see it in the Listing 2. As I told you that it\u2019s an easy way to use Inline Style. We can use it from the external file by giving an ID name for the fieldset tag. But the easiest way is to use Inline Style in this kind of situations to handle them. And we should commonly find easiest ways to get rid from the problems.<\/p>\n<p><img decoding=\"async\" class=\"imagem_artigo\" src=\"http:\/\/file.mrbool.com\/mrbool\/articles\/Faisal\/LoginPagePHP\/LoginPagePHP02.jpg\" alt=\"Output of the Sign-in Webpage with updated size of fieldset tag\" \/><\/p>\n<p><strong>Figure 2<\/strong>: Output of the Sign-in Webpage with updated size of fieldset tag<\/p>\n<h3>Description of sign-in webpage:<\/h3>\n<p>As you can see in the Listing 1 and 2 we used such a good Html tags to design a simple log-in form. We used legend tag with fieldset tag to use texts on the upper side of the form. And in the form we used method POST. And action to send data to another webpage. Which will be PHP Programmed webpage, I named it connectivity.php. And there is one new thing as type that is password. The functionality of type password is to don\u2019t show the text what we will enter in the password box. Instead of password texts or characters it will show bold dots like ?.<\/p>\n<h3>Why we are using POST not GET method:<\/h3>\n<p>We are using POST method because it is secure. If we use GET method our data will not private. POST is commonly being used for these kind of webpages, due to its security. And when we are dealing with our ID and Password, so we should be alert from the hackers. Because the GET is being used in Phishing webpages, by which people are making fool the internet users to get their personal ID and Password.<\/p>\n<h3>Using CSS on Sign-in.html webpage:<\/h3>\n<p>Now it\u2019s time to use CSS style on the webpage to create some attraction. We can use many kind of styles. But the good thing is that which matches to this page. For this we will use many CSS Styles, so I think the better way is use an external file and link it to the sing-in.html webpage. Let\u2019s start\u2026<\/p>\n<p><strong>Listing 3<\/strong>: style.css<\/p>\n<div class=\"div_listagem\">\n<pre class=\"pre_listagem\">\/*CSS File For Sign-In webpage*\/\r\n#body-color{\r\nbackground-color:#6699CC;\r\n}\r\n#Sign-In{\r\nmargin-top:150px;\r\nmargin-bottom:150px;\r\nmargin-right:150px;\r\nmargin-left:450px;\r\nborder:3px solid #a1a1a1;\r\npadding:9px 35px; \r\nbackground:#8000CC;\r\nwidth:400px;\r\nborder-radius:20px;\r\nbox-shadow: 7px 7px 6px;\r\n}\r\n#button{\r\nborder-radius:10px;\r\nwidth:100px;\r\nheight:40px;\r\nbackground:#FF00FF;\r\nfont-weight:bold;\r\nfont-size:20px\r\n}\r\n<\/pre>\n<\/div>\n<h3>Description of style.css<\/h3>\n<p>We used three ids in the external CSS style webpage. One we used for the body, we identified it by the body-color name, and we applied CSS styles on it. In the next one, we used for the div tag and we identified it by Sign-In in the CSS styles webpage. In the last we used an ID for button and we applied CSS styles on it. There are some new CSS styles as font-weight, font-size which all about to font (text).<\/p>\n<p><img decoding=\"async\" class=\"imagem_artigo\" src=\"http:\/\/file.mrbool.com\/mrbool\/articles\/Faisal\/LoginPagePHP\/LoginPagePHP03.jpg\" alt=\"Sign-in webpage after applying CSS Style (linking the style.css webpage)\" \/><\/p>\n<p><strong>Figure 3<\/strong>: Sign-in webpage after applying CSS Style (linking the style.css webpage)<\/p>\n<p>As you can see the change on the sign-in.html webpage after linking the style.css webpage. And we used some good colors on tags to create it more attractive. From these kind of webpages we know the importance of CSS Styles. As you can see the Figure 1, how it was looking and how it is looking now? We should use different type of CSS styles on our webpages. To create them attractive and more beautiful.<\/p>\n<h3>Using PHP and MySQL to get Log In user Profile page:<\/h3>\n<p>As we can see the Figure 3 now it\u2019s fully ready to <a href=\"http:\/\/mrbool.com\/how-to-create-a-sign-up-form-registration-with-php-and-mysql\/28675\" target=\"_blank\">log in by entering the user name and password<\/a>. But before we enter any data to this webpage on Figure 3. We should create two pages. One profile page and other ID and password validation. For checking or validating the ID and Password we need to save ID and Password to the database, for this we need two more things as a database and a table. So let\u2019s create a database and then a table.<\/p>\n<p><strong>Listing 4<\/strong>: creating table<\/p>\n<div class=\"div_listagem\">\n<pre class=\"pre_listagem\">CREATE TABLE UserName\r\n(\r\nUserNameID int(9) NOT NULL auto_increment,\r\nuserName VARCHAR(40) NOT NULL,\r\npass VARCHAR(40) NOT NULL,\r\nPRIMARY KEY(UserNameID)\r\n);\r\n<\/pre>\n<\/div>\n<p><em><strong>NOTE<\/strong>: As we didn\u2019t create the Sign-Up page so we should insert data to the UserName table and then we enter that data from the sign-in.html page to connect with user profile page.<\/em><\/p>\n<p><strong>Listing 5<\/strong>: Inserting data to the table UserName:<\/p>\n<div class=\"div_listagem\">\n<pre class=\"pre_listagem\">INSERT INTO \r\nUserName (userName, pass) \r\nVALUES\r\n(\"mrbool\",\"mrbool123\");\r\n<\/pre>\n<\/div>\n<p>So we completed the requirements of the database. Now we are going create a PHP programing file. In which we will get the data and check it if the ID and Password are available in the database and entered correct then the user will be able to online to the user profile page.<\/p>\n<p><strong>Listing 6<\/strong>: connectivity.php<\/p>\n<div class=\"div_listagem\">\n<pre class=\"pre_listagem\">&lt;?php\r\ndefine('DB_HOST', 'localhost');\r\ndefine('DB_NAME', 'practice');\r\ndefine('DB_USER','root');\r\ndefine('DB_PASSWORD','');\r\n\r\n$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die(\"Failed to connect to MySQL: \" . mysql_error());\r\n$db=mysql_select_db(DB_NAME,$con) or die(\"Failed to connect to MySQL: \" . mysql_error());\r\n\/*\r\n$ID = $_POST['user'];\r\n$Password = $_POST['pass'];\r\n*\/\r\nfunction SignIn()\r\n{\r\nsession_start();   \/\/starting the session for user profile page\r\nif(!empty($_POST['user']))   \/\/checking the 'user' name which is from Sign-In.html, is it empty or have some text\r\n{\r\n\t$query = mysql_query(\"SELECT *  FROM UserName where userName = '$_POST[user]' AND pass = '$_POST[pass]'\") or die(mysql_error());\r\n\t$row = mysql_fetch_array($query) or die(mysql_error());\r\n\tif(!empty($row['userName']) AND !empty($row['pass']))\r\n\t{\r\n\t\t$_SESSION['userName'] = $row['pass'];\r\n\t\techo \"SUCCESSFULLY LOGIN TO USER PROFILE PAGE...\";\r\n\r\n\t}\r\n\telse\r\n\t{\r\n\t\techo \"SORRY... YOU ENTERD WRONG ID AND PASSWORD... PLEASE RETRY...\";\r\n\t}\r\n}\r\n}\r\nif(isset($_POST['submit']))\r\n{\r\n\tSignIn();\r\n}\r\n\r\n?&gt;\r\n<\/pre>\n<\/div>\n<p><img decoding=\"async\" class=\"imagem_artigo\" src=\"http:\/\/file.mrbool.com\/mrbool\/articles\/Faisal\/LoginPagePHP\/LoginPagePHP04.jpg\" alt=\"Taking input from user as the user\u2019s ID and Password to get log-in\" \/><\/p>\n<p><strong>Figure 4<\/strong>: Taking input from user as the user\u2019s ID and Password to get log-in<\/p>\n<p>As you can see at this stage the webpage of sign-in.html is working well. Because we need a webpage which takes input from user\u2019s ID and Password, and the main thing it should not show the user\u2019s Password which he is giving input at the getting log-in time. When we entered the correct user\u2019s ID and Password then press Log-in button to get log in.<\/p>\n<p><img decoding=\"async\" class=\"imagem_artigo\" src=\"http:\/\/file.mrbool.com\/mrbool\/articles\/Faisal\/LoginPagePHP\/LoginPagePHP05.jpg\" alt=\"Getting log-in successfully using the ID and Password which we saved in database\" \/><\/p>\n<p><strong>Figure 5<\/strong>: Getting log-in successfully using the ID and Password which we saved in database<\/p>\n<h3>Description of Connectivity.php:<\/h3>\n<p>In the connectivity.php webpage, first of we create a connection between PHP and MySQL. And then we used SELECT query to select two things from the database, which is userName and Pass. When we used SELECT query, you can see the query we have used \u201c*\u201d its mean that we selected all data from the database for the login. But in the same query we also used WHERE clause to compare that all data which are fetched with the sign-in.html. From sign-in html two things are coming to connectivity.php page, which is username and password. Then we used an there function of PHP programming Language that is mysql_fetch_array(). This will fetch all data according to the SELECT query. And in last we used if statement to know the condition of query. Because sometimes it could be happen the user and password is not present in the database. For this purpose to check the query is executed and what it gives us result in if statement. For calling the function we used and other If statement to get know that the user as pressed the Log-in button or not, if he\/she has pressed so the function will be call and get sign-in.<\/p>\n<h3>Conclusion:<\/h3>\n<p>In this article we got the initial knowledge how a sign-in page works and how a user get sign-in to his\/her profile webpage on internet. I hope you understood the problem. For any query don\u2019t hesitate just give a comment.<\/p>\n<p>Read more: <a href=\"http:\/\/mrbool.com\/how-to-create-a-login-page-with-php-and-mysql\/28656#ixzz47ryVcGKT\">http:\/\/mrbool.com\/how-to-create-a-login-page-with-php-and-mysql\/28656#ixzz47ryVcGKT<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Read more: http:\/\/mrbool.com\/how-to-create-a-login-page-with-php-and-mysql\/28656#ixzz47ryeS5EI<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction It\u2019s easy to use PHP with MySQL to create it. But for these kind of webpages we need to use form validation on our webpages, if anyone use JavaScript so it\u2019s well and good because JavaScript is a very good technique to use and solve Form Validation problems. But we will directly go to ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"http:\/\/symbioticindia.in\/docu\/2016\/05\/06\/how-to-create-a-login-page-with-php-and-mysql\/\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,6],"tags":[],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-mysql","category-php"],"_links":{"self":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":1,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":63,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/62\/revisions\/63"}],"wp:attachment":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}