Laravel CMS | N-02 | Routes, Controllers and Views

Key Takeaways

hey which one I gonna pop all you are doing welcome to a brand new video so to me now we are in the second episode of our story of series making CMS using wearable CMS stands for control management system and that will allow you to create or screen kind of always manage them for your website so CMS is really nice and levo is even my sir but we're not going to use little boat for that for the see that so if you are how much watch the last story will already get started then again starting tutorial we have set about the environment that I'm gonna need the encounter the exam the web server how he's running and as you can see them go to touch the most of them settled off everything on the last day I'm not trying on them so let me really quickly open up down here and I'm gonna run who's have the web servers topology stop my people and make sure you start them and every single thing you really want to block your website or do something like this so it's on them then close this then go to load up CMS but them then we have setup as I've said this earlier in the last story so if you're new make sure he was first story all series for the first episode before coming up in to this one so with this particular episode what we're going to do actually is we're gonna set up the route so the route means like when you type in let's say for the slideshow domain name they of the house domain name a pro slash above the say for example in press enter and the route is gonna handle this for the time being there's nowhere else so you're saying SOI page you looking for you found and that mean this is a 404 page not found the sake of Bath's we're gonna do this arrived would say many goes into just a splash in everything nothing is behind the splash in here only the splash which means the index page and the main pages are going to take it into take the user into the index page and what about page or whatever page you're going to do and using this we're gonna need to access around file underneath ruler of ourselves so as I've said we've done this in the last episode if you're not make sure you watch it first before coming up in here and for this open up this using your favorite cover so I'm using Visual Studio code by the way and after up opening paths go into the routes and search for web dot PHP and this will all your web browser gonna go so as you can see this route is taking the welcome page I'm sure these guys so as you can see when it goes here this welcome page is being displayed and now let's say you wanna this planet just as simple as possible a hello world or something like every program is doing that by the way so let's say I guess and we go like for the let's say let's say a test or slash test and I'm gonna take it to function and this function is a callback so if you don't know I'll call back and when this is being triggered like let's say it's saying the scope function is saying when a get request is being submitted to that route 1 slash test callback this function within whatever it has with its inner structure so I'm gonna say not to beautiful noise being but we're gonna use this view so employees in jail just in a couple of minutes so now we're gonna just return a stunning string which kind of say hello world just smiley face ago suppose does disclose it to me should do the semicolon at the end now goes back go say Spanish test and now let's check this house for a second hopefully SBT is the hello world in a smiley face and this all is being done using a browser so we are using a get request let's say you can use also over request times like pose or codes or delete but from time being we're gonna just come to the get request because it's simple to get all the samples to HTTP requests I'm going to use for that and before doing this actually we can use or return a view automatically so let me do that before doing a control this something else called control of course which takes care of this would say without using this callback function you can remove all that and just close the parentheses and call yo control versus going to call its pages control thank always the control the naming convention name it's like with a couple of error of the beginning and a couple of case me naming convention because it's really helps debugging or reusing your code in further further ado whatever you do it with it so we say like controller and you call your method at index and boom this you're gonna just redirect it into your method under that controller so we're going to talk about this a level-one so let me just call this our full-time being again now let's cover the interview as could see here it's gonna return a view and if you is a function that's all I was to go and browse it says go ahead and browse for the internal resources views and Oscar T welcome buh-blabel HP and is selecting the work on here so if the audit another file called rotate test Blake PHP and say view the parentheses and put here test because I'm gonna look for the test you've got a compile it using the plate template engine I'm gonna just render it out into this one if this is kind of confusing to be simple just it's gonna return a file for us this is very simple the join a PHP or HTML file as long as it's one scientist CSS of course but it's gonna return it's as simple as this so for that that's creating your view and looking up but let me use a folder because it's a bit more structured but of course then just hang this for this just gonna be for static pages that say our I don't know about P or contact us page just for static pages and for now we're gonna use it for test so let me create a new file and called test blade the page and for that I'm going to let's say this using PHP and also HTML I'm gonna use HTML and hopefully I'm having no boiler palette in here so Arnold's White's not working for me I believe I have to use this so it doesn't matter really so let me just do this as hot as possible and use body analysts echo each for text so gonna call it each for 4h for the speeding up cuz it's very simple welcome and say welcome to test pink and this is gonna be like render all this HTML page or a pod file whatever into our when we requested the test routes in here usually guess with us so we've created that into the page just hopefully for PHP make sure you name your file or every part of girls like welcome index or whatever actually cause dot blame dot PHP because that tells we're above us we are using blade chocolaty engine and all we're gonna take all over that and even learn what's ablative with an angel and why you need to use it not just using plain PHP or HTML file rather than it was in like blade and because blade is very very easy to use as well as very very powerful for that for the sake of that so just okay for PHP not to go to back to the web for PHP which are also around and let me just delete all of them and start from scratch so let me get and say false like make sure you include for most fashion at the beginning of the round name you want to specify and I'm gonna keep tell it's a function the function of a callback function then close this thing's gonna just return make sure you use the new function G function so this where I stores all of these kind of files and we're gonna call it it's structured voice it is korban our pages so gonna call pages and rather than using the four slash better values another like directories naming convention is the thought so replace the former slash disease pages forward slash test top blade PHP now Marvel uses another thing is pages thoughts use or replaces the form slash with up done so pages dot test and not including them to plate a dot PHP because Laura is going to do all the dirty job for us you just need to specify the pages or the subfolder and the name of the file we want to include then just close this I'm gonna refresh this and I'll see what we get different second here we are well welcome to test page it's rendering time as you can see welcome to test page from the age for black versus white in here it's very simple as years as you can see you can place whatever plans in here very easy but using a code by function like this is a bit not not what we want actually move on to use a controller for that so the controller is something like it's it's named control because it's controls request so it gets a get request just gonna forwards it into the controller and control two executables let's say just gonna find or search for the database for you as you're called on a slap us and it's gonna return it with the view like return view and it's called with Stephanie with era so to positive omits to this far too into it and later on on this pinch so it's very simple use control so to do that you're gonna need to use the terminal you can use it manually but I really will probably you use the terminal because PHP our little house command line as I've told you before it's how I called PHP artisan so it's very powerful fortune using it's very very nice to use it rather than giving had been manually create so to do that open up the terminal has already done this you can control shift P and type in the above our terminal focus terminal and boom you have to turn on it though no make sure your terminal is the batter up to don't go CD and CD or directory so - could see the exam HD box total level CMS the main CMS project directory so for that let me just close could see this all the times so for that you're gonna college PHP artisan and mink controller and make sure you out of the time - resource and the task - Vsauce what it does actually if make this controller or resource a resource tab like an index method needs method remove method like the destroy method very simple like you have a model anyone up get the index page of it or you want to edit it like Adam you post pretty simple just lve resource will understand where the resource as we go along is a bit further on the series so we saw some a controller and I believe if you make sure you name your controller as if set pages controller Amy should use the couple keys and the pages it's not but naming it's not necessary what's the naming convention so press ENTER and Laura are gonna make the controller for us so let's proceed control operators successful you must see this control test so successful message not to proceed into the next step for that go by the closed round or not being so disaster about this so now going to be HTTP up HTTP controls and gonna find your control so sketchy pages controller to the job that we have just created and the index or the resource - - resource option has allowed us to get this create store show if you didn't specify resource just not gonna get getting everything but I really rather prefer using the resource because it makes life easier or not so this is the index page making sure you use it for : it's like when when you hit the index page so we're gonna use it my dear I mean just enough so now we turn the dashboard page and for that we're not created a dashboard P for our CMS yet so let's go ahead under which for nap so for this let me go ahead and do is this pretty simple creates an overplayed energy oh let me just winning this for making it even more easier so I'm gonna call it dashboard dashboard Hawkinsville in my dashboard okay but what dr. dot PHP and prevents is gonna be need to be some structured uni like on this head and you can call your your CSS files you JavaScript files but for now we're gonna stick to the plane in me everything looks really really easy I believe lyrical or includes class bootstrap I'm not that sure although so let me see this the top which wrapping you know it doesn't so we have to use despite this and ethically so we need to call it like link and slash sheet or the assault she let's see give me a second guys now I figure out what what was going on it's actually haven't included or you pretty much need to include the assets JavaScript up dot J s as well as ask the answer CSS CSS so this ass has function is pretty much tournament to go ahead and local resources sass if you don't know what size is a CSS pre-compiled so you just don't really care about that's three powerful gonna use it we're going to talk about bit more in the next tutorial so in the next episode whatever you call it so up top CSS as you could see this right you have to we are calling for and this blankets compiled it's gonna get straight into the public folder CSS and up top CSS only code in both Ruby so this Asus function cannot go handle loop in the DC public CSS up top CSS folder and just going to encode it and as you can see here these two or four of curly braces in here and does this mean actually is hekkub so if you're familiar with PHP PHP an option type or something echo function hello world this is pretty much the same so this is what's bleep top with an agent or Glade it does it's actually replacing these curly braces when it's compilers replacing this to collaborators by the PHP echo and this to one with this and like the comma of the end and this is all it does so that's why I asked you see blade is very powerful and that's why it's easy as going to use it to make your life very very easy as simple as possible so as well as DVD to include the JavaScript up top Jen's just press thus this one and do your header file and you're good to go now bootstrap is free ship it with levels so you can use it into the hood without including it or downloading it it's very nice convertible three simple things so now we're going to do the basic structure of HTML you can do this when you're out I'm not telling you to do this as me it's just very simple I'm going to do it with as far as possible using bootstrap classes so you're gonna be very very simple you make sure you use your thing or your imagination to me it looks way much better than this so I'm gonna also create them over there for that you get out make sure you're gonna find that this code on the github so check out the get help making description below on my website we're gonna find all of these files in there so make sure you check them up so of course I'm going to call this world and I'm gonna just call to once the site area the main air you're gonna convince for further knowing things I'm gonna call the site area as well as this one going to be mean area so the site area is not gonna be changed and my main area changes when when like the section changes like the dodge form the category is the admin the users the preview post it is post sprinkle thing change depending on the file your horn so the slide area I'm gonna have another div and using a class and booster I feel free to use push out because it's making life easier so as I've said column middle I'm gonna call column middle - well relieved late watch you sleep almost 2 to 12 not openly so class column in - let me just test put this I press save this and just go into Chrome which make from here we are and this is the chrome dev tool that's why I realized that day you scrub know one thing to mention I believe I didn't let you know is let's I have changed or you need to go to the web page browse in change pages or tests to dashboards in order to make it look nice that's its pages dashboard opt a PHP because we've changed the name or we renamed it so so that's what we're gonna change this test because not good looks nice and just before massage makes that's nothing in here just going to be empty which means the main page or our main index so it goes to them I'm gonna see this the same thing so yeah as you could see I can assume here you can take a look in here now the world the container Floyd and the world the column can teach you is taking its pot so with that sweet summon CSS styling with Psychopaths as well as they so before anything like this let me just add the links that we're going to need so we create another there I'm gonna call it plus romance might be a sign - area - call it continue okay and that container got a hostile think so we call a ul you all the links we're gonna use as well as the Li over legs and I called dashboard as well as a another one I'm gonna have added new post but see also you need the categories so another one is pretty much the other so I'm gonna just add those for the time being gonna a little more as we go farther the series so this is admin and it's out of this under the link so this other used to use image if you don't know it's image is like plugging on this extension that allows you to all complete your HTML tags not why it's not working with visual studio campaign believe I need to update this before proceeding with this every single project or something's going on for you it should write this work without any anything to do just right don't download it just in your code and you're good to go so with that I'm not gonna use this I'm gonna use your charter that's called this one for every single one of these you can skip this part guys if you really want to let me just do it and I'm gonna call this other side dashboard as well as this one I'm gonna pull its dick in post this one's gonna be the categories the county party okay now let's check this house you probably need to outer the background so for the time being I'm just gonna add it a style a custom style into the hidden file of this file or this the dashboard plan but as we go farther than this we're gonna learn about the layout so we're rolling out to be more specifically left so layouts allow you to just or all of this header files like all of this kind of things boring something like the link to the outside JavaScript blogging or JavaScript libraries also your CSS files all of them into one file but can it be respectively repeated each time you create a new file I see how the dashboard category how do you post edit those all of this gonna have the same hinder fun so why just repeating this every single time you can create the layouts and you could inherit from em boom you have your file repeat it for you using that we're gonna use this feature it's very very powerful it's gonna help us or loss during the series so the next episode ugly you're gonna use this very very enough to use so go now I'm just gonna call this as I've said this I'm gonna give it to my d for it so I'm gonna call it side area - mainly believe this is gonna be site area I mean copy that's possible and go ahead and do this tile you can feel free to skip this because it's not really necessary for you you can do it I work but you really really like it just title of things and we're gonna copy the background - color and we're gonna add it a bit like RGB 1500 or 1 okay and we can add a border those 3 yes I mean sure that's all stylists when I enter the scenes or under and it seems like I'm gonna start this alone and mix it looks better you can get the count of it if you really want to forget how to accept dislike very very possible so stick with me for second 5 pixels and we leave that to the job turf we make sure you open up the if you're new in Chrome from automatically cash this for you so if you if you are in chrome to open up the dev tools here in order to CSS to fresh well then you can close it and change your CSS it won't work for you when you're fresh the page just gonna start with the same system is your open up the dev tools is like a chrome feature or her own bad feature I can call this but I really like this maybe the others do feel the college if you like this feature on I think he would do it like this feature I was a good see well out of the border radius I don't think a border radius is a really nice idea and this call isn't the gear so you can use this just power it really need is to make it like a green green in the blue like this or something pretty much I'm not pretty sure like this and lifting up of the collar issue let's see if white let's use the axis movement [Music] this is only predefined so I know it's doing here so we can go into dance check the background [Music] got rid of this I can go and check out the best and let me put a mighty of this and the handy things like we can English from the sass or the freakin followed CSS is we can we don't really need this like every element we need to style to give it to my D this is not a really nice thing so with the sass we can put it into the parents and grab good together you can extend this way tutorial in the next story hopefully we gonna talk about this sass the layout and all of this structure of the HTML page to make you life way much easier than you can even imagine so but the idea I'm gonna just call it side list simples desk and go to sign - less and give it the list Russia style equals to 9 and I'm gonna give it a color of white and upon a size of about twenty Sol's let's see what's that gonna business so hopefully just gonna make things looks better a bit better and let's see for the main background gun out of the minimum width or height about 500 pixels okay to me this looks like takes the full page a bit my shirt you know okay no it's a bit nicer you can play around with this values of this what's going to looks like universe they may be able to type this bit more to make it looks a bit more well doesn't it looks a bit better have a dashboard other new post category and the Anthony we're gonna have a couple of all of these like they walk out I'm gonna and move on in organic systems is the our education system they implement the other view goes under the custom post editor theme gonna have a load of sub Linux begin to join so this is what was for the for the sake of this tutorial is very was very simple just talking about without the controller and what we can do with its and it's very simple soil so if you cannot understand thinking of this make sure you google this because it's how's it go a dog so you can understand it better otherwise you can put a comment below I'll be very happy to answer you or any of our followers to each other to be very nice so I guess this pod gets it guys we're gonna cover in the next episode hopefully be the layoffs and the sounds and how to compile it and how to use NPM the audience modular and everything that I'm gonna take it to the HTML structure we cannot go on and on it's Charles so it gonna be very very nice maybe even gonna talk about the model if you wouldn't have a bit of time so I'm always just kind of let's say you have a table on the database in the users table somebody clean a model level that table is going to represent all that more those represent that table so you can fetch into data you can save it then I'll put the data on it and it just involves that so models I very powerful that's why it's called an MVC which is stands for a model do you control if you've already seen the view which like means rendering things and the controller of course it's controlled request bus gets from the get or the coach interested in quest of course we're gonna learn about the model and little is really powerful so stick with this series guys hopefully you can understand this if any area you comes in area make sure you I'm invincible up hopefully understand you guys so thanks for watching I hope you really enjoyed this make sure you follow us or you this has been our website learn to code item is calm I'm gonna find all the stories in there to think us watching and people are you doing see you the next episode goodbye