CodeIgniter 4 Tutorial - Simple Blog Part 1

hello everyone this is Alex from Alex Lansford calm and guys codeigniter 4 is out and I'm really really excited to see all the new stuff that all the contributors have have done because the framework has been completely rewritten and I just want to dive deep and see what's going on here so first of all today we're gonna build a really simple blog and see what to see this is the new stuff and the new syntax that coding metaphor is using we will see how to communicate with the database and play a little bit with the we derived routing so first thing to notice is that several require server requirement are have been changed of course so the the minimum required version for PHP is 7.2 today I will be using examp server for on my local machine and I also encourage you to go to the Apache friends dot org download the latest Sam minds um my version of zamp is not the latest but it will do the job just fine so how can you see how can you check if your zamp is compatible let's say with with a newer to run the new version of CodeIgniter for first of all if you don't have example installed on your machine please navigate to this website and download the appropriate files to your operating system once you download it of course you have to run it so open some control panel start apache and mysql server and then just navigate to localhost what you will see here is a PHP info button where you can click and check which PHP version currently is installed on your system on my system is 7.2 so I am fine okay that this one is out of the way and let's go and download the code igniter for framework there are different ways you can do it one of them is using composer another one is navigating to this link I will leave it in down in the description and download it manually I will use the manual method just for the sake of this tutorial because I don't want to cover the installation of composer and to save us some time so let's go click on the source code let's check it out in our folder let's unzip it and get all the files copy all these files and now go to find your hump installation folder - um - and let's go HT dogs and let's create a new folder here the new folder will be called you can name it whatever you like I will name it CI for YouTube I will go inside of this folder and paste all the files here ok cool so now let's see what's going on just after pasting the files inside this folder we can go localhost and CI for YouTube okay so the first change looks like if you navigate inside inside the installation folder you still don't see nothing the main changed that I've seen so far is that your app runs once you are inside the public folder so once we go to the public folder we can see the welcome message of CodeIgniter and this makes total sense because most of the PHP applications run on Apache web servers which have public HTML folder which is accessible actually all the files inside the public HTML folder are can be accessed by by typing something the correct URL so for instance if we go back to the root folder we can see the env file in the file is the file that stores all the critical information of our orders all the sensitive information of our project one of which is database username and password and of course we don't want this to be publicly available so what we have to do is we have to say to our server the the public folder is the is the folder from where our application runs so that user and any visitor actually of our website cannot access all the files outside the public so what we have to do we can adjust jump very easily for that open again your control panel and let's go to the config button of the Apache module click apache HTTP d cone scroll scroll down after load modules you will find you will find a document root that points to jump HT dogs folder what we're gonna do now we will say that our root folder is there for youtube.com lick ok and exactly say the same right here type here so let's save this let's restart apache mysql just to be sure so now we don't need to write always now our localhost points directly to the public folder so now i cannot access any more env file it does not exist because it's outside of the public folder so the next thing we have to do is let's actually open our code editor and check out the files so I will do it here is my folder I will open up Adam this is my preferred code editor and you can use whichever you like of course so as you can see in our public folder we have very little files just the index dot PHP and the first thing I want to do is copy this env file because this is just a demo demo file it's not doing anything right now so if i duplicate it and make it dot env now where it now this this is how you enable it after that the first thing we have to do everything inside of dot env file right now is it's commented out so the first thing we have to do is an uncommon CI environment and set it to development this will enable the this will tell to the framework that we need to see all the debug information in case we do some in case we have some type or some error in our code because when it is in production you will see no you won't see actual error you will see some friendly user friendly message saying something something went wrong but you won't be able to debug it so set this to development and this will will enable one more new field new feature of codeigniter of coordinator for specifically so let's refresh our localhost and now we did not enable okay let me check again development development okay so the reason that I don't see what I want to say is because there is one more thing that we have to enable I guess it is inside the app folder config and up dot PHP you see by default code igniter has a base URL localhost colon 8080 we don't use port 8080 we are using just a localhost so let's save this and let's go again to our web page okay now we see you can see this developer how-to how to call it like a debug bar where you can see different technical information about your application we will use it in a little little bit after so next thing that I would like you to show is actually let's start creating our project so at this point we have installed code igniter it is running everything looks good the first thing that we will start with is going back to our project closing this for now that folder now actually we need the up folder this is where everything all the files that we need are stored so the controllers let's go to the controllers if you are coming from codeigniter 3 this might look familiar to you if you are not codeigniter is in MVC you use the same DC pattern for it's for 4/4 functionality MVC means Model View control controller so each of the controllers each of the controllers help you build the the logic of your application let's say now we want to build a block system so in this block system we will have two type of entities let's say one of them is the block and dynamic post that we want to review and to create and another one and another entity is pages this will be just static pages that will let's say it will be a home page and an about page so for each entity of a website this is Hawaii how I see they use our harm using the controllers I will create a separate controller so let's start with the pages let's go to controllers folder and create new file pages with capital PHP and let's copy the home controller whatever it has inside to avoid not waste time for typing it all over again let's copy it here so this is how you start by default also you have to rename the class name the class name must be always the same as the file name this is how codeigniter works so once we created this controller we can go to the trouble page and say localhost / pages yeah it shows exactly the same stuff because we're rendering the same stuff let's say we remove this file this line from index function from index method brother let's say just echo this pages class or controller let's check again refresh and this is Paige's controller awesome so back to our controller if we would ring it another for another method let's say function by the way you don't have to specify public function but by default if you don't specify the type of function it is considered to be public it is good it is a good practice to write it though but I don't always do it so let's say functions show me show me [Music] and let's give it a variable page and let's say by default this page equals home and we say echo this is this page this page is page semicolon so would would what this method does is that we go if we go again here and now we extend our URL and say pages show me you see now we get this page is home because the default variable of method show me is home but let's say we will specify about us this page is about us so just by writing the simple method we already created some sort of dynamic functionality to our application now let's make it more useful let's go to our views folder and let's create a folder inside here named pages okay this I created the file sorry for that let's create a folder pages inside pages folder let's create two files home dot PHP and about dot php' let's also create in our views folder another folder for templates that will store our header and our footer so we don't have to write it in each and every file we create so create new folder templates templates let's create a new file inside there we go called header dot PHP and one more footer dot PHP in our header dot PHP let's create an HTML block take the last body and HTML remove it from header and move it to sorry you know I guess you don't see this and let's move it through to footer so for just to make things more easy and LU and look a bit better let's use bootstrap for that what we need is just go to getting started with bootstrap for copy display copy this line the CSS style sheet and [Music] let's go again to header and paste it inside our head section so let's give it a title ci4 tutorial blog tutorial copy that save that and also copy all the JavaScript all the JavaScript and let's paste it inside the footer above the body tag the closing body tag okay so now that we have that let's see how how can we use it in our application so first of all let's go back to pages and [Music] let's use this simple fact function echo of you this is how you call a view inside the CodeIgniter 4 it is a bit different from CodeIgniter 3 so now we have to specify the files so the view the view function by by default look inside the views folder so if you have some structure inside the views folder you have to start from specifying your your folders inside the view inside the view function so we have template let's call first header no need to specify it dot PHP let's copy this few times let's make this footer and between we need to call our page so we go to the pages folder and let's just copy this variable here okay we can remove this line and now if we go to pages let's say home let's create an h1 tag let's say home let's go to about page and also create h1 tag and say about us and let's see okay so we have any our first error congratulations our first error has arrived so you see the debugging and the error reporting has has been changed also now you can click through different tabs I still don't know them very well what they show what they do so let's see what we can grab from what information can we see from here first of all invalid file square brackets curly brackets actually zero search okay oh nice so you can search some error just by clicking on a search button search link here invalid formats coordinator view view rendered arguments so I think something's wrong with the file name that we have specified yes so about us does not exist but about exists okay this also didn't do the trick but let's see here system path of view view dot PHP arguments guys I'm sure if you don't see if you see these phones like really then they don't look clean maybe if i zoom yeah I guess this should be better so the path which causing the problem is the template slash header dot PHP and this is because we don't have folder template we have folder template so let me go and change that to templates template and let's run again our our application ok so finally we did it a page is show me about I guess the same will show our home or even if we type home it's it's also will show home so one thing we can do here is the example that I grabbed from CodeIgniter official documents is that we can check whether this page exists or not and if we if it does not exist then we can throw a 404 error so let's go back here and just above this line but above the up of you I will paste this code so this code checks if the file named that's a home dot PHP exists actually if it doesn't does not exist then throw this error and do not continue to try even to view these pages so let's see what happens now if we type something if you try to navigate to a page that does not exist let's say contact us contact okay so now we get a 404 error let me go back to animate and cool so actually our static pages are already function are already functioning well so what I would suggest us to do let's just tell them a little bit so we can enjoy the whole process I don't like looking like on on simple unstyled Elm HTML elements I don't like the way they look I think coding not coding neither sort of bootstrap makes this job really easy even to even when you are developing something even for yourself it it is so easy to implement and to visualize the whole project might in a much better better way so let's go back to where we were here let's go to show me okay so show me is now home by default and let's make this homepage look a little bit a little bit nicer so let's go here and let's start by creating a section inside this section we will we will create a div called actually you know what let's go to there is no need to reinvent the wheel type here jumbotron jumbo tron and just wrap this code so once you get this code just paste paste it inside the section and let's say CI for blog and let's write something like CodeIgniter is awesome brain work for creating fast web apps and let's give here a paragraph something like a check out check out my first web app built with CodeIgniter 4 and let's give this ok leave it leave it for now little for now as it is so in the about page let's go just also create a section a deep container a container and now let's just grab some lorem ipsum actually I have Laura mushroom installed a mile on my atom so let's go and create a ch3 about notice real usage each one about us and give a paragraph lorem lorem ipsum yeah it's just an extension for for a atom you can find it lorem ipsum and install it also it helps create some dummy text and let's create one more here ich learn more and again the room awesome now let's go to our header and let's add a navigation bar so our navigation bar will be let's create a dark the ark example also from grabbing it from the bootstrap website navbar and let's take something something simple yeah I think this will do so let's take this back to our project paste it here let's remove the disabled button let's remove actually and pricing and disabled buttons let's name this we don't need this home about us okay let's do just one more thing here let's wrap it all inside the container so let's try deep container take this closing deep and place it right before the nav tag closes and let's change light to dark so what you have now okay I like it the only thing I think we have to do is to wrap our jumbotron also inside the container so to do that we go to home page inside Jumbotron div class container okay I think it's much better like that so now of course I don't think that anyone will ever say that page is slash so much about us is a normal URL or or if it is a safe friendly URL and I will totally agree with you that's why let's see the routing how it works how we can override the default behavior behavior of codeigniter and simplify the stuff for us so for that we had to go to the app folder config to the app folder config and routes what you will see here this is some default setup we don't usually touch it except if you you can change the default controller we don't need this for now what you can see though that if we don't type anything the first the first rule then CodeIgniter will assume that you are calling the home controller and index method what we need to do though is we have to say that let's change this let's make this pages pages pages index and we will have to modify our index method instead of this we want to show something from here so what we can do is we can grab this as it is bring it here and say this home so now if we go back to our project and we just navigate to localhost voila so the next thing I would like to do is to make this page accessible without me needing to write pages show me and all that a long long URL so we go back to root and we say that we can create a wild mask here saying why any so meaning that anything that is written after the slash we want to parse it wrong pages controller pages method show me and map it to this variable so anything I write here which say it will be about this will translate into this segment now let's check if it works about and here we go so now we can create even our links in the project so let's go back to header and let's say first of all let's say that our see check let's change the logo CI for blog let's point that to the home page as well as this link let's point it also to the home page and above us will become about I'm giving relative links so that it works on any page of course we can do we can write the full URL like localhost but I don't see the reason to do this here okay cool so let's just refresh blog home home about us that looks fantastic okay guys so let's wrap it up here and in the next video we will jump to the blog section and we will connect to the database we'll create a form where we will create post and we'll make our website more dynamic so thank you very much for watching this video expecting to see you in the second part of this tutorial bye bye

Channel: Alex Lancer

Views: 58,506

Keywords: php, php framework, codeigniter4, codeigniter4 tutorial, alexlancer codeigniter4

Id: R1StjWM_LOE

Length: 38min 47sec (2327 seconds)

Published: Sun Mar 22 2020