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

5. Creating the Home Page<\/h2>\n

The home page will be the first page our users see when they’ve logged-in. The only way they can access this page is if they’re logged-in, whereas if they aren’t, they will be redirected back to the login page.<\/p>\n

Edit the\u00a0home.php<\/i>\u00a0file and add the following code:<\/p>\n

<\/div>\n
<?php<\/span>\r\n\/\/ We need to use sessions, so you should always start sessions using the below code.<\/span>\r\nsession_start<\/span>(<\/span>)<\/span>;<\/span>\r\n\/\/ If the user is not logged in redirect to the login page...<\/span>\r\nif<\/span> (<\/span>!<\/span>isset<\/span>(<\/span>$_SESSION<\/span>[<\/span>'loggedin'<\/span>]<\/span>)<\/span>)<\/span> {<\/span>\r\n\theader<\/span>(<\/span>'Location: index.html'<\/span>)<\/span>;<\/span>\r\n\texit;<\/span>\r\n}<\/span>\r\n?><\/span><\/span><\/code><\/pre>\n
Basically, the above code will check if the user is logged in, if they are not, they will be redirected to the login page. Remember the\u00a0$_SESSION[‘loggedin’]<\/i>\u00a0variable we defined in the\u00a0authenticate.php<\/i>\u00a0file? This is what we can use to determine whether users are logged in or not.<\/p>\n
Now we can add some HTML to our home page. Below the closing tag, 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>Home Page<\/<\/span>title><\/span><\/span>\r\n\t\t<<\/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>\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 class<\/span>=<\/span>\"<\/span>loggedin\"<\/span><\/span>><\/span><\/span>\r\n\t\t<<\/span>nav class<\/span>=<\/span>\"<\/span>navtop\"<\/span><\/span>><\/span><\/span>\r\n\t\t\t<<\/span>div><\/span><\/span>\r\n\t\t\t\t<<\/span>h1><\/span><\/span>Website Title<\/<\/span>h1><\/span><\/span>\r\n\t\t\t\t<<\/span>a href<\/span>=<\/span>\"<\/span>profile.php\"<\/span><\/span>><\/span><\/span><<\/span>i class<\/span>=<\/span>\"<\/span>fas fa-user-circle\"<\/span><\/span>><\/span><\/span><\/<\/span>i><\/span><\/span>Profile<\/<\/span>a><\/span><\/span>\r\n\t\t\t\t<<\/span>a href<\/span>=<\/span>\"<\/span>logout.php\"<\/span><\/span>><\/span><\/span><<\/span>i class<\/span>=<\/span>\"<\/span>fas fa-sign-out-alt\"<\/span><\/span>><\/span><\/span><\/<\/span>i><\/span><\/span>Logout<\/<\/span>a><\/span><\/span>\r\n\t\t\t<\/<\/span>div><\/span><\/span>\r\n\t\t<\/<\/span>nav><\/span><\/span>\r\n\t\t<<\/span>div class<\/span>=<\/span>\"<\/span>content\"<\/span><\/span>><\/span><\/span>\r\n\t\t\t<<\/span>h2><\/span><\/span>Home Page<\/<\/span>h2><\/span><\/span>\r\n\t\t\t<<\/span>p><\/span><\/span>Welcome back, <?=<\/span>$_SESSION<\/span>[<\/span>'name'<\/span>]<\/span>?><\/span><\/span>!<\/<\/span>p><\/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
The above code is the template for our home page. On this page, the user will encounter a welcome message along with their name being displayed.<\/p>\n
We need to add CSS for the home page. Add the following code to\u00a0style.css<\/i>\u00a0file:<\/p>\n
<\/div>\n
.navtop<\/span> <\/span>{<\/span>\r\n\tbackground-color<\/span>:<\/span> #2f3947<\/span>;<\/span>\r\n\theight<\/span>:<\/span> 60<\/span>px;<\/span>\r\n\twidth<\/span>:<\/span> 100%<\/span>;<\/span>\r\n\tborder<\/span>:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n.navtop<\/span> div <\/span>{<\/span>\r\n\tdisplay<\/span>:<\/span> flex;<\/span>\r\n\tmargin<\/span>:<\/span> 0<\/span> auto;<\/span>\r\n\twidth<\/span>:<\/span> 1000<\/span>px;<\/span>\r\n\theight<\/span>:<\/span> 100%<\/span>;<\/span>\r\n}<\/span>\r\n.navtop<\/span> div h1, .navtop<\/span> div a <\/span>{<\/span>\r\n\tdisplay<\/span>:<\/span> inline-flex;<\/span>\r\n\talign-items<\/span>:<\/span> center;<\/span>\r\n}<\/span>\r\n.navtop<\/span> div h1 <\/span>{<\/span>\r\n\tflex<\/span>:<\/span> 1<\/span>;<\/span>\r\n\tfont-size<\/span>:<\/span> 24<\/span>px;<\/span>\r\n\tpadding<\/span>:<\/span> 0<\/span>;<\/span>\r\n\tmargin<\/span>:<\/span> 0<\/span>;<\/span>\r\n\tcolor<\/span>:<\/span> #eaebed<\/span>;<\/span>\r\n\tfont-weight<\/span>:<\/span> normal;<\/span>\r\n}<\/span>\r\n.navtop<\/span> div a <\/span>{<\/span>\r\n\tpadding<\/span>:<\/span> 0<\/span> 20<\/span>px;<\/span>\r\n\ttext-decoration<\/span>:<\/span> none;<\/span>\r\n\tcolor<\/span>:<\/span> #c1c4c8<\/span>;<\/span>\r\n\tfont-weight<\/span>:<\/span> bold;<\/span>\r\n}<\/span>\r\n.navtop<\/span> div a i <\/span>{<\/span>\r\n\tpadding<\/span>:<\/span> 2<\/span>px 8<\/span>px 0<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n.navtop<\/span> div a:hover<\/span> <\/span>{<\/span>\r\n\tcolor<\/span>:<\/span> #eaebed<\/span>;<\/span>\r\n}<\/span>\r\nbody.loggedin<\/span> <\/span>{<\/span>\r\n\tbackground-color<\/span>:<\/span> #f3f4f7<\/span>;<\/span>\r\n}<\/span>\r\n.content<\/span> <\/span>{<\/span>\r\n\twidth<\/span>:<\/span> 1000<\/span>px;<\/span>\r\n\tmargin<\/span>:<\/span> 0<\/span> auto;<\/span>\r\n}<\/span>\r\n.content<\/span> h2 <\/span>{<\/span>\r\n\tmargin<\/span>:<\/span> 0<\/span>;<\/span>\r\n\tpadding<\/span>:<\/span> 25<\/span>px 0<\/span>;<\/span>\r\n\tfont-size<\/span>:<\/span> 22<\/span>px;<\/span>\r\n\tborder-bottom<\/span>:<\/span> 1<\/span>px solid #e0e0e3<\/span>;<\/span>\r\n\tcolor<\/span>:<\/span> #4a536e<\/span>;<\/span>\r\n}<\/span>\r\n.content<\/span> > p, .content<\/span> > div <\/span>{<\/span>\r\n\tbox-shadow<\/span>:<\/span> 0<\/span> 0<\/span> 5<\/span>px 0<\/span> rgba<\/span>(<\/span>0<\/span>, 0<\/span>, 0<\/span>, 0.1<\/span>)<\/span>;<\/span>\r\n\tmargin<\/span>:<\/span> 25<\/span>px 0<\/span>;<\/span>\r\n\tpadding<\/span>:<\/span> 25<\/span>px;<\/span>\r\n\tbackground-color<\/span>:<\/span> #fff<\/span>;<\/span>\r\n}<\/span>\r\n.content<\/span> > p table td, .content<\/span> > div table td <\/span>{<\/span>\r\n\tpadding<\/span>:<\/span> 5<\/span>px;<\/span>\r\n}<\/span>\r\n.content<\/span> > p table td:first-child<\/span>, .content<\/span> > div table td:first-child<\/span> <\/span>{<\/span>\r\n\tfont-weight<\/span>:<\/span> bold;<\/span>\r\n\tcolor<\/span>:<\/span> #4a536e<\/span>;<\/span>\r\n\tpadding-right<\/span>:<\/span> 15<\/span>px;<\/span>\r\n}<\/span>\r\n.content<\/span> > div p <\/span>{<\/span>\r\n\tpadding<\/span>:<\/span> 5<\/span>px;<\/span>\r\n\tmargin<\/span>:<\/span> 0<\/span> 0<\/span> 10<\/span>px 0<\/span>;<\/span>\r\n}<\/span><\/code><\/pre>\n
Now that we have our home page set-up, we can redirect our users from the\u00a0authenticate.php<\/i>\u00a0file to our home page, edit\u00a0authenticate.php<\/i>\u00a0and replace the following line of code:<\/p>\n
<\/div>\n
echo<\/span> 'Welcome '<\/span> .<\/span> $_SESSION<\/span>[<\/span>'name'<\/span>]<\/span> .<\/span> '!'<\/span>;<\/span><\/code><\/pre>\n
With:<\/p>\n
<\/div>\n
header<\/span>(<\/span>'Location: home.php'<\/span>)<\/span>;<\/span><\/code><\/pre>\n
If you log in with the test account, you should see something like this:<\/p>\n
\n
http:\/\/localhost\/phplogin\/home.php<\/span><\/div>\n
\"PHP<\/div>\n
This is a pretty basic home page. You can customize it to how you want now that you understand how it works.<\/p>\n
<\/a><\/a><\/a><\/a><\/div>
<\/a><\/a><\/a><\/a><\/div>","protected":false},"excerpt":{"rendered":"
5. Creating the Home Page The home page will be the first page our users see when they’ve logged-in. The only way they can access this page is if they’re […]<\/p>\n","protected":false},"author":301,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[4],"tags":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9KaPo-lz","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1341,"url":"https:\/\/hostscripter.com\/?p=1341","url_meta":{"origin":1337,"position":0},"title":"Part 7: Create your own Login System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"7. Creating the Logout Script Creating the logout script is straightforward. All you need to do is destroy the sessions that were declared in the authenticate file. Edit the\u00a0logout.php\u00a0file and add the following code:  Initialize sessions, destroy them,\u2026","rel":"","context":"In "Blog"","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1329,"url":"https:\/\/hostscripter.com\/?p=1329","url_meta":{"origin":1337,"position":1},"title":"Part 1: Create your own Login System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"In this tutorial, I'll be teaching you how you can create your very own secure PHP login system. A login form is what your website's visitors can use to log in to your website to access restricted content, such as a profile page. We will leverage MySQL to retrieve account\u2026","rel":"","context":"In "Blog"","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"Secure Login System with PHP and MySQL","src":"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-login-system-php-mysql.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-login-system-php-mysql.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-login-system-php-mysql.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-login-system-php-mysql.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1339,"url":"https:\/\/hostscripter.com\/?p=1339","url_meta":{"origin":1337,"position":2},"title":"Part 6: Create your own Login System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"6. Creating the Profile Page The profile page will display the account information for the logged-in user. Edit the\u00a0profile.php\u00a0file and add the following code: