{"id":1331,"date":"2022-11-28T08:07:42","date_gmt":"2022-11-28T00:07:42","guid":{"rendered":"https:\/\/hostscripter.com\/?p=1331"},"modified":"2022-11-28T08:07:42","modified_gmt":"2022-11-28T00:07:42","slug":"part-2-create-your-own-login-system-using-php-and-mysql","status":"publish","type":"post","link":"https:\/\/hostscripter.com\/?p=1331","title":{"rendered":"Part 2: Create your own Login System using PHP and MySql"},"content":{"rendered":"

2. Creating the Login Form Design<\/h2>\n

We will now create a form that our users can use to enter their details and submit them for processing. We will be using HTML and CSS for this part of the tutorial as PHP will not be necessary on this page.<\/p>\n

Edit the\u00a0index.html<\/i>\u00a0file with your favorite code editor and add the following code:<\/p>\n

<\/div>\n
<!DOCTYPE html><\/span>\r\n<<\/span>html><\/span><\/span>\r\n\t<<\/span>head><\/span><\/span>\r\n\t\t<<\/span>meta charset<\/span>=<\/span>\"<\/span>utf-8\"<\/span><\/span>><\/span><\/span>\r\n\t\t<<\/span>title><\/span><\/span>Login<\/<\/span>title><\/span><\/span>\r\n\t\t<<\/span>link rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>https:\/\/use.fontawesome.com\/releases\/v5.7.1\/css\/all.css\"<\/span><\/span>><\/span><\/span>\r\n\t<\/<\/span>head><\/span><\/span>\r\n\t<<\/span>body><\/span><\/span>\r\n\t\t<<\/span>div class<\/span>=<\/span>\"<\/span>login\"<\/span><\/span>><\/span><\/span>\r\n\t\t\t<<\/span>h1><\/span><\/span>Login<\/<\/span>h1><\/span><\/span>\r\n\t\t\t<<\/span>form action<\/span>=<\/span>\"<\/span>authenticate.php\"<\/span><\/span> method<\/span>=<\/span>\"<\/span>post\"<\/span><\/span>><\/span><\/span>\r\n\t\t\t\t<<\/span>label for<\/span>=<\/span>\"<\/span>username\"<\/span><\/span>><\/span><\/span>\r\n\t\t\t\t\t<<\/span>i class<\/span>=<\/span>\"<\/span>fas fa-user\"<\/span><\/span>><\/span><\/span><\/<\/span>i><\/span><\/span>\r\n\t\t\t\t<\/<\/span>label><\/span><\/span>\r\n\t\t\t\t<<\/span>input type<\/span>=<\/span>\"<\/span>text\"<\/span><\/span> name<\/span>=<\/span>\"<\/span>username\"<\/span><\/span> placeholder<\/span>=<\/span>\"<\/span>Username\"<\/span><\/span> id<\/span>=<\/span>\"<\/span>username\"<\/span><\/span> required<\/span>><\/span><\/span>\r\n\t\t\t\t<<\/span>label for<\/span>=<\/span>\"<\/span>password\"<\/span><\/span>><\/span><\/span>\r\n\t\t\t\t\t<<\/span>i class<\/span>=<\/span>\"<\/span>fas fa-lock\"<\/span><\/span>><\/span><\/span><\/<\/span>i><\/span><\/span>\r\n\t\t\t\t<\/<\/span>label><\/span><\/span>\r\n\t\t\t\t<<\/span>input type<\/span>=<\/span>\"<\/span>password\"<\/span><\/span> name<\/span>=<\/span>\"<\/span>password\"<\/span><\/span> placeholder<\/span>=<\/span>\"<\/span>Password\"<\/span><\/span> id<\/span>=<\/span>\"<\/span>password\"<\/span><\/span> required<\/span>><\/span><\/span>\r\n\t\t\t\t<<\/span>input type<\/span>=<\/span>\"<\/span>submit\"<\/span><\/span> value<\/span>=<\/span>\"<\/span>Login\"<\/span><\/span>><\/span><\/span>\r\n\t\t\t<\/<\/span>form><\/span><\/span>\r\n\t\t<\/<\/span>div><\/span><\/span>\r\n\t<\/<\/span>body><\/span><\/span>\r\n<\/<\/span>html><\/span><\/span><\/code><\/pre>\n
If we navigate to the index page in our web browser, it will look like the following:<\/p>\n
\n
http:\/\/localhost\/phplogin\/index.html<\/span><\/div>\n
\"Basic<\/div>\n
Pretty basic right? Let’s edit our\u00a0style.css<\/i>\u00a0file and implement code that will improve the appearance of the form.<\/p>\n
Add the following code to the\u00a0style.css<\/i>\u00a0file:<\/p>\n
<\/div>\n
* <\/span>{<\/span>\r\n  \tbox-sizing<\/span>:<\/span> border-box;<\/span>\r\n  \tfont-family<\/span>:<\/span> -apple-system, BlinkMacSystemFont, \"segoe ui\"<\/span>, roboto, oxygen, ubuntu, cantarell, \"fira sans\"<\/span>, \"droid sans\"<\/span>, \"helvetica neue\"<\/span>, Arial, sans-serif;<\/span>\r\n  \tfont-size<\/span>:<\/span> 16<\/span>px;<\/span>\r\n  \t-webkit-font-smoothing<\/span>:<\/span> antialiased;<\/span>\r\n  \t-moz-osx-font-smoothing<\/span>:<\/span> grayscale;<\/span>\r\n}<\/span>\r\nbody <\/span>{<\/span>\r\n  \tbackground-color<\/span>:<\/span> #435165<\/span>;<\/span>\r\n}<\/span>\r\n.login<\/span> <\/span>{<\/span>\r\n  \twidth<\/span>:<\/span> 400<\/span>px;<\/span>\r\n  \tbackground-color<\/span>:<\/span> #ffffff<\/span>;<\/span>\r\n  \tbox-shadow<\/span>:<\/span> 0<\/span> 0<\/span> 9<\/span>px 0<\/span> rgba<\/span>(<\/span>0<\/span>, 0<\/span>, 0<\/span>, 0.3<\/span>)<\/span>;<\/span>\r\n  \tmargin<\/span>:<\/span> 100<\/span>px auto;<\/span>\r\n}<\/span>\r\n.login<\/span> h1 <\/span>{<\/span>\r\n  \ttext-align<\/span>:<\/span> center;<\/span>\r\n  \tcolor<\/span>:<\/span> #5b6574<\/span>;<\/span>\r\n  \tfont-size<\/span>:<\/span> 24<\/span>px;<\/span>\r\n  \tpadding<\/span>:<\/span> 20<\/span>px 0<\/span> 20<\/span>px 0<\/span>;<\/span>\r\n  \tborder-bottom<\/span>:<\/span> 1<\/span>px solid #dee0e4<\/span>;<\/span>\r\n}<\/span>\r\n.login<\/span> form <\/span>{<\/span>\r\n  \tdisplay<\/span>:<\/span> flex;<\/span>\r\n  \tflex-wrap<\/span>:<\/span> wrap;<\/span>\r\n  \tjustify-content<\/span>:<\/span> center;<\/span>\r\n  \tpadding-top<\/span>:<\/span> 20<\/span>px;<\/span>\r\n}<\/span>\r\n.login<\/span> form label <\/span>{<\/span>\r\n  \tdisplay<\/span>:<\/span> flex;<\/span>\r\n  \tjustify-content<\/span>:<\/span> center;<\/span>\r\n  \talign-items<\/span>:<\/span> center;<\/span>\r\n  \twidth<\/span>:<\/span> 50<\/span>px;<\/span>\r\n  \theight<\/span>:<\/span> 50<\/span>px;<\/span>\r\n  \tbackground-color<\/span>:<\/span> #3274d6<\/span>;<\/span>\r\n  \tcolor<\/span>:<\/span> #ffffff<\/span>;<\/span>\r\n}<\/span>\r\n.login<\/span> form input[type=\"password\"]<\/span>, .login<\/span> form input[type=\"text\"]<\/span> <\/span>{<\/span>\r\n  \twidth<\/span>:<\/span> 310<\/span>px;<\/span>\r\n  \theight<\/span>:<\/span> 50<\/span>px;<\/span>\r\n  \tborder<\/span>:<\/span> 1<\/span>px solid #dee0e4<\/span>;<\/span>\r\n  \tmargin-bottom<\/span>:<\/span> 20<\/span>px;<\/span>\r\n  \tpadding<\/span>:<\/span> 0<\/span> 15<\/span>px;<\/span>\r\n}<\/span>\r\n.login<\/span> form input[type=\"submit\"]<\/span> <\/span>{<\/span>\r\n  \twidth<\/span>:<\/span> 100%<\/span>;<\/span>\r\n  \tpadding<\/span>:<\/span> 15<\/span>px;<\/span>\r\n \tmargin-top<\/span>:<\/span> 20<\/span>px;<\/span>\r\n  \tbackground-color<\/span>:<\/span> #3274d6<\/span>;<\/span>\r\n  \tborder<\/span>:<\/span> 0<\/span>;<\/span>\r\n  \tcursor<\/span>:<\/span> pointer;<\/span>\r\n  \tfont-weight<\/span>:<\/span> bold;<\/span>\r\n  \tcolor<\/span>:<\/span> #ffffff<\/span>;<\/span>\r\n  \ttransition<\/span>:<\/span> background-color 0.2<\/span>s;<\/span>\r\n}<\/span>\r\n.login<\/span> form input[type=\"submit\"]<\/span>:hover<\/span> <\/span>{<\/span>\r\n\tbackground-color<\/span>:<\/span> #2868c7<\/span>;<\/span>\r\n  \ttransition<\/span>:<\/span> background-color 0.2<\/span>s;<\/span>\r\n}<\/span><\/code><\/pre>\n
We need to include our stylesheet in our\u00a0index.html<\/i>\u00a0file and therefore we must add the following code to the head section:<\/p>\n
<<\/span>link href<\/span>=<\/span>\"<\/span>style.css\"<\/span><\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\/css\"<\/span><\/span>><\/span><\/span><\/code><\/pre>\n
And now if we refresh the\u00a0index.html<\/i>\u00a0page in our web browser, our login form will look more appealing:<\/p>\n
\n
http:\/\/localhost\/phplogin\/index.html<\/span><\/div>\n
\"Awesome<\/div>\n
That looks much better! Let’s narrow down the form elements, so we can get a better understanding on what’s going on.<\/p>\n