CodeIgniter 4 User Login Tutorial - Part 1 - Project Setup & HTML

hello everyone this is Alex from Alex Lancome and today we're gonna build a user login system our project will contain a login form signup form and then we're gonna create a login session using CodeIgniter filters for protecting some areas of our site of our project here you go then we will also have a profile page where I will show you how you can edit your information let's say we say user and update so this is our project for today let's log out put this aside and let's start as always let's begin with a composer installation with the CodeIgniter installation we are computed composer so I will go to my exam folder let me bring it up so here I go into my project folder and let's open up our cell copy this let's give it a name login wait for a few seconds now it is done no need for power cell anymore and let me bring back this so here we have our login installation yeah actually we need power so for one more time to open up atom okay here we go let's do now I want to assign localhost as a root folder the public folder of our login project so I go here and scroll down down down I think I passed it yeah so let's change this test to login login remember that document root and directory should be exactly same path so once you have that done restart your Apache and let's check our our localhost nope up and running perfect now let's enable all of the environment settings that we're gonna need or actually let's create first the database again go local host PHP myadmin create new login and let's create a users table nice so now in user stable let's create some basic field columns like ID first name last name let's give few more rows that doesn't matter let's give five I don't think we will use them all so the next one is email password and let's create also a timestamp create it add and update it add I will get back to those if you don't know for what what is the purpose of this fields I will cover it a bit later so let's make the ID column an auto increment first-name let's make it a varchar of 50 lastname varchar' of 50 email also 1850's enough the password to 55 so here I created add let's make it a date/time field and let's give it a default value of current timestamp same for the updated add and with this I think we are good so we can create we can click Save and yes our user table users table is ready let's go back to our project and set up the environment settings so first of all duplicate the envy file make it dot envy let's give our our application a base URL which is HTTP localhost let's go down to the database let's open this and create so our database name is login our username is root we don't have password at least I don't have if you have tab here okay and of course let's set the environment to development so we can see our debug bar and any errors when they will occur nice let's go back to our localhost let me open it in new tab so we have access to our PHP myadmin we need it okay here we are we see the debug bar it is active and it is time to make to start build our basic controllers first of all let's create a user's controller so we go up controllers let's just duplicate the home the home controller so it is users change the class name let's make it echo users and let's go to our roads and change the default controller from home to users and same here localhost refresh ok so our basic routing is ready now we have to set up our template files we will work with bootstrap for just to keep things simple and good looking so we go to our views let's create a folder template where we will store our header and our footer files so we go create a folder template create a file footer dot PHP and the header dot PHP nice and Hindu dot PHP let's create a basic HTML markup grab the last two lines cut them and bring them to the footer now let's go to the bootstrap and the absolute in coverage by clicking here and in the header in the head section let's paste it like that and also I would like to have my own style sheet in other way we make some changes to the to our design by say some some basic stuff like padding or maybe some color change so we will put that in assets CSS style dot CSS and save now let's go to public folder let's create a folder named assets inside of assets create a folder named CSS and inside the CSS folder create style dot CSS file let's start with giving to our body background color of e 1 e 1 e 1 that's fine for now and let's create our first view file I shall not the first we already created header and footer one let's create login dot PHP so this is this will be our first first screen that user sees when he comes to the java application sorry for that let's start here with a container let's create a row and then inside inside the row let's create call twelve call the same mate offset SM true call md6 offset MD three so that our form looks centered inside the screen but not too large this is basic goods drop classes let's give it also a margin top five and padding top three padding bottom three let's make it a white background yeah a lot of classes and let's give one custom class of our own that we will use later on to style it it to style a little bit the the wrapper around the form now let's go inside and give one more container this will give us some extra padding on the left hand on the right so let's name it logging give a horizontal line and let's create a form with action on the self on the on the same page so not class action let's give it just a slash method post this is correct and now let's give few inputs so the first input will be our our email let's name it email address so here let's type set value email so what this does if you're not familiar after we we submit the form if there is any error and we will be redirected back to the form this will keep the value that we've typed inside the email field it will keep it inside so we don't have to type it again so let's let's continue with a password password input sorry so I have this snippet data type input and it gives me the bootstrap markup for for the field so password password inside the password we don't use the set value password because anyway you can see what you have typed then let's create so our form continues like that okay let's see if we have if we will have any errors or actually leave it for now so I don't make don't confuse you and I just want to create one more row here for our submit button button type submit' class BT and BT and primary again this is all bootstrap login and let's create one more deep but we will place our link to the rigid registration page so called twelve call sm8 let's make it text right let's create a link to the register and let's give it a text of don't have and I can't get a question let's make it like that let's check what we have so far where we go to our localhost nice we don't have nothing because we didn't love the views yet so let's go back to our user controller let's initialize the data here just to have it in case we will use it later but for now what I wanna do is I want to echo HECO view templates header let's pass the data here so we don't forget it later let's copy-paste and this will be our footer and this here will be our login login page login view so I guess now it should okay Colton defined function function set value yeah the reason this function is undefined is because we have to load the helper first helper for form it is a codeigniter helper that will help us validate the fields later on therefore we go to helper it's really simple and just inside the helper function you pass all the helpers you want to load in our case is just form okay let's check now okay perfect so what else we need to do here I think is let's just create this a navigation bar really quickly so we go to let me just remove this no need to repeat it and let's go back to our header let me find never get Nut Bars snippet so that you don't type it all from the beginning yeah let's take this one body let's change this light to dark right the way to change the link of the logo let's say CI for login no need for this and no need for this we will make the active class will be dynamic depending on which link is which page page we are visiting at the moment we will do it in a bit so let's make home let's say login instead of home register so for now this will be our login our now our navigation bar also we don't need this form here let's see okay let's wrap it inside the container so it will be centered and we take this div class container let's go back to yeah let's paste it here now get perfect so let's create also the registration page now and for that we go to our user controller and we say public function register and let's also let's actually let's copy this because this is everywhere the same and just let's change this to register let's go back to our views so we have a login here I think we can just duplicate this and make it register let's change the title register and now let's make some HTML changes also so we have the register form let's make our action here register nice so we will change a little bit the markup here so we'll create a div row from the beginning now let's wrap all of our form groups inside of it where do we have it account yet let me check this yeah actually we just need to remove this here or now let's let's close it above now let's close the box so we can separate it if we need something else here like to display our errors so we have a mail address let's create two new fields call 12 called the same color same six let's create our first name first name input first name let's give it a set value right from the start also first name and now let's copy this and make it last name so our our email function email inbox order let's wrap it inside it called 12 it will be a full width and our passwords again now we need two passwords we need the password that we have now and one extra field to confirm the password so let's make it call Sam now code 12 call the same six let's bring it here and copy/paste this let's say I confirm let's make it confirm okay one thing I see here is this type and this type of have to change it and I think in our login form same so now having done that let's change the button name to register and let's say already have an account and navigate back to our homepage so let's refresh okay register still doesn't work very nice and it doesn't work because we have to go to our routes and create actually it would work if we would go to user register in user register or is it users yeah and now we have I think we miss typed the video name the view file name so let's go to users yeah so it is register try again okay here we go looks nice so go back to login don't have an account yet so if you want to utilize this path we have to create it in our routes file then let's go here and let's say if we do just like get register and you say users register it will fall it will work fine but if I'm if I gonna submit this form now it will give me again a 404 error why is that because in the routes we specified only the get method to use this rule so what we can do to to monitor also our post request type match and inside here go get and post so I think if we refresh now yeah we are good to go and let's continue with our registration form in the next part

Channel: Alex Lancer

Views: 60,644

Keywords: codeigniter4, codeigniter 4 login, alexlancerci4login, codeigniter 4 tutorial

Id: uYX9FLi1BYg

Length: 30min 12sec (1812 seconds)

Published: Thu Apr 09 2020

Reddit Comments

[u/mustbelong]

Does this really need FIVE piece? It isnt that complicated of a thing, unless you know no programming, in which case starting with a framework this way is a hella bad and unlikley way.