Codeigniter App Tutorial

Codeigniter App Part 3 – Home Controller and View

welcome to section 3 of the codeigniter app tutorial in this section we'll be creating a new controller which will be a home controller and that will replace

the default welcome controller and on the home page it's not going to be much if we look at our finished product we basically just have a bootstrap template we have a heading paragraph a login form

which we probably won't do right now and the navbar alright so a pretty simple layout so let's get to it so I'm going to go into my controllers folder and we want to create a new file

and I'm gonna save that as home dot PHP alright so the format of any code any controller in code ignitor is going to be class and then the name of the controller with a capital letter at the

beginning and we need to say extends CI control controller all right so this will be our home controller class and it's very important to extend CI controller and we

can actually create our own group controller and put it in the core folder which I'll show you how to do later that'll be called my controller and we can then we can add methods to that core

controller but that's later so right now all we need to do with this controller at the moment is bring in the view the home view alright so what we want to do is create a public function called index

all right so this whatever we put in here is going to be it's going to be called when we call our controller so when we say mind to do slash home whatever we have in that index control

is going to show up all right if we change this to let's say I don't know app that to to access this method through the URL we'd have to go home slash app all right and then whatever we

put in here will it'll run in the browser when we visit that that method so the common URL structure for this is controller slash method and then if we want parameters alright so params so as

an example if we said public function app and then we put in an ID all right so this ID would be the params all right so we would have app slash I'm sorry home controller

slash app method slash ID which would be basically a number alright so that's how the URL structure is and you can actually change that if you want if you want to switch things around we can do

that through the routes file which I'll go over in a little bit alright so what we want is to get this home controller to display a view alright now to load a view it's pretty

easy we just want to say this load view and then the view name which will just say home alright so let's save that and if we reload it's not going to work because we

don't have that view so we need to go to the views folder and create a new file and we want to save this we want to save this as home alright home dot PHP

and we'll just say this is the home okay so if we save that and then we go and reload nothing happens the slowed view home that's very strange

oh I'm sorry I never change I never change this back so we want this to be index and we don't want to pass in a parameter all right all right so now we get this is the home

view so whatever we put in this view is going to show up when we visit the home controller all right so what I want to do now is I don't want I want the home controller to be default because right

now as it is if we just go to our app that still goes to the Welcome controller so to do that we need to go to the config routes PHP and this default controller we want to get rid of

welcome and put in home all right so now if we go back and reload now our home can show our home controller and our home view is showing so we can actually go ahead and get rid of the Welcome

controller I'm going to delete that and I'm going to delete the Welcome message view as well so what I want to do now is go to the home view and I'm just going to paste in some HTML all right so we

have no um let me get rid of this we have no dynamic code now okay so this is just a HTML bootstrap markup alright so if we save this and reload we have our title menu and then our main content and

a footer now we don't have our CSS and JavaScript included so we need to do that next now we don't want to put our CSS and JavaScript in the views folder we want this publicly available so what

we need to do is create a new folder in the root directory so I'm going to open up this is our root directory okay so you should be able to see the app and sis

folder and alongside it you want to create a new folder called assets alright and in that assets folder we want to add a CSS folder a JavaScript folder and you can also add

an image folder as well but I don't believe this app has any images all right so what we want to do now is add our CSS files and what I'm gonna do is drag in two CSS files and one is the

main bootstrap CSS file and the other one is a custom CSS file which is empty and that's for our own custom CSS in for the JavaScript I'm going to bring in nothing actually what we want to do is I

don't believe we need any extra JavaScript files we do want to include jQuery though so let's go ahead and get that CDN link all right so jQuery grab this

and we want to paste this inside of our head and we also want to link those CSS files now when you want to point to any link on in your app from a view there's a

special function we can use kind of like a variable for the domain alright so we want to say PHP echo base URL alright so what this is going to give us here is this alright it's going to give us

localhost / Mike to do and then slash so we don't need a slash after after this all right and that's gonna be assets slash CSS slash bootstrap dot CSS all right

ah this is stylesheet and type all right so let's copy this and we want our custom CSS all right it's good let's go ahead and reload all right so here's the the home view so we

just have basically our navbar welcome message and we have a box which will include our login later now you might not have noticed it yet but if we keep things the way they are right now all

right if we just use this load view then every single view is going to have to have this doctype the head the navbar all of this is going to have to be included in every single view so we

don't want that what we want to do is create layouts all right so we want to have a main layout that will include all this and then we can just include just the view file in the main content area

all right or in the sidebar or wherever we want to include it all right so what we want to do is in under views we want to create a new folder and we want to name that layouts

all right so in that layouts folder I'm going to create a new file and I'm going to call it main dot PHP so what we want to do here is go to the home view grab everything and paste that in the main

layout right and we want to take just of just the home view content all right so just this h1 in this paragraph and cut that out go back to the home view delete all that and just paste this in just the

content for the home view all right so if we save that and then what we want to do is in the controller instead of calling it like this one thing I forgot to mention is when you load a view

actually you know what I need to show you how to pass in data so if we want to pass data to the view dynamic or static we'd want to use the data array and inside of here we can declare a variable

let's say let's just say welcome all right so data welcome and then say we set that to the text welcome all right so what we want to do is if we want to show this value

I'm sorry this value inside our view then we just want to pass it in as a parameter we want to pass in data all right so if we save that and I'm just gonna keep the view as is like this Oh

save this and you can see our layouts gone but that's fine what we want to do is display that that welcome value so in the h1 tag we can say PHP echo welcome and save and if we reload we get an

error alright so welcome is undefined let's see I'll go echo welcome the home controller oh I'm sorry we have this as a capital we don't want that alright so now it's it's giving us that

text so I'm sorry that shouldn't go there it needs to go here all right so that's how you can pass data along and ultimately we want to set

our data variables to most likely be a model call which we'll call our database grab the values we put the values in our data array and pass it to the view all right so that's kind of an important

step that I forgot to mention all right so now back to that the template layout issue instead of just saying this load view we're going to create a variable a data variable and we're going to call

this main content and we want to set this we want to set this to whatever view we want all right so in this case it's gonna be home all right so that's gonna give us the home view all right so

here we want to say this load view and the first parameter we want is going to be our layout all right so we're gonna say layouts slash main and that's going to be this file here the main PHP file

alright so we also want to pass in that data array which is going to be main content which equals home all right so let's save that and we have our home view that's fine

let's just make this static all right and what we need to do now is go into the main view and where we had our main content which is right here we just want to include the main content

variable so we're gonna say PHP echo I'm sorry not not that go we want to load the view so I'm gonna say PHP this load view and the view is going to be the main content variable

all right so it's grabbing main content which is equal to home and we're just serving up whatever view is going to be in the main content in this case will be home if we go to the home controller

alright so let's try this again alright so now we just have that one layout and if we need to change for instance the title or whatever we can just edit this one page instead of a bunch of different

view files the view files will only have basically what's in the main content alright so in the next video we'll be looking into the list and the task controllers along with their models and

We will setup a default controller and create a main layout that we can use with all of our views

The full source code is at – https://github.com/bradtraversy/mytodo_ci