Learn How To Create Basic Laravel Website | Laravel 5 Tutorial | Projects In Laravel | Eduonix



hey guys welcome to your first project in this project we're going to build a basic website using laravel now that may not sound like much but we're actually going to touch on a lot of the different aspects of laravel such as routes views controllers models migrations and so on so this is the landing page you can see we're using the bootstrap layout here we're using laravel mix2 to work with web pack to compile our sass ok so we're going to be using sass which is a CSS pre-compile err we have the home page we have the about page and the contact now the contact form actually works it's going to submit the data to the database which you can see I have here in PHP myadmin we have a messages table if we look at that you can see that we have the different submissions in there so just to give you an example let's say Harry Williams and then email we'll just say test at test comm and we'll just say hello world and if we submit that you'll see we'll get a message we're using flash messaging and if I reload the database you can see Harry Williams is in there and we also have a route that we can go to which is messages and that will pull all the messages from the database ok the link isn't visible on the website because this would be something that an administrator would go to obviously if this were a real world app you would have some kind of admin login but we're not going to we're not going to get into that just yet but I think overall this is a really good project for an introduction and in the next video we'll get started alright guys so we're going to start on our first project here and this is going to be a basic website but it's going to have some dynamic functionality it's going to have a contact form that submits to a database we're also going to pull those messages out of the database we're going to look at routing blade templates things like that controllers models so what I'm going to do here is in my htdocs my server we're going to just do a composer create project laravel slash laravel and then we'll call it basic website okay that's going to generate a larval project for us all right guys so the application is now generated so I'm going to open up my text editor which is Adam and we're going to just add a project folder and we're going to choose that basic website folder in the htdocs directory alright so this is the structure for a larval application now it's changed a little bit since earlier versions of it instead of having a routes file there's actually a routes folder and web dot PHP is where we supply our main routes alright but before we get into anything let's add a virtual host entry for this for this site so you want to go to your Apache folder context rrah and then the V host file I'm just going to copy this we did that in the introduction section and then let's change this to htdocs slash basic website slash public all right and then the server name let's just say basic web site dot dev all right so we'll save that close it up and then we want to edit the host file for that we need to run a text editor I in administrator mode if you're in Windows so I'm going to search for notepad and just do a run as administrator all right and then you want to just open up C Drive windows system32 drivers et Cie and let's show all files and we want to open up hosts and then in here we just want to do 127.0.0.1 and then basic website dev okay we'll save that and let's restart apache okay and then let's go to basic website dot dev and there it is all right so as I was saying that this is the main routes file you can see that the slash here it's just loading up slashers as the homepage is just loading a view called welcome and the views are in resources views and you can see there's a welcome blade dot PHP blade is the template engine that laravel uses by default and this is what you're seeing here okay it actually has all the styling within the within the mark-up here and then here's the content that you see here so we're not going to use any of this what we're going to do is create a new home blade PHP file and use that as our home page and we also want to create a layout so that we don't have to repeat you know all this crap the head tags body tags that stuff's going to be on every view so we want to layout that's going to just that we can extend that we'll have that stuff so let's go to the routes web dot PHP in the route and for the home page we can do whatever we want here if we want to say return 1 2 3 and we save that and reload it's just returning 1 2 3 you can load templates for our views from here like it like it was loaded in the Welcome view but you don't usually want to do that what you want to do is look is call a controller a controller method and then load the view from there you don't really want to have any logic in your routes ok but for now it's gonna that's going to be fine okay but we'll change it later so what I'll do is create some view files here in resources views let's say new file and we'll call this one a X let's do home first so home dot blade dot PHP alright then we'll create another one called about dot blade dot PHP let's create another one called contact dot blade dot PHP so those are the three pages that we'll be using all right now in home Glade PHP let's just go ahead and put in we'll just put an h1 and we'll say home ok save that and then if we go back to our route file just like they did with the welcome view we can just put in here home and if we go and reload you'll see it's going to give us that home view and then if we were to copy this a set in twice and then this one will say slash a boat and that's going to load the about view and then this one will be slash contact and that will load the contact view okay so we'll save that now this right here get is specifying the type of request so when you just visit a webpage you're making a get request to the server so this is handling get request to this row or this URL if this were a post request for instance submitting a form to add some data to the server you would do route post and you can use the same route with different request types ok but for now we're just dealing with ket alright and now let's go to a bulk dot blade and we'll just put an h1 here and just say about and then same with contact all right so now if we go to slash about we get the about template and slash contact we get the contact template all right when I say template and view I mean the same thing really now if we look at the source code it's just an h1 there's no HTML tags or head or body tag so we need to add those but I don't want to repeat it in every single one of these these views so what we'll do is create a layout so in the views folder we're going to create a new folder called layouts and then we're going to create a new file called app blade dot PHP ok so this is going to be our main layout so let's put in just some basic HTML tags we'll put a title just say actually let's just call this acne and then in the body where we want to render all of our templates we want to do a yield so we want to do this at sign and then we want yield and we want to yield the content all right so we'll save that and then let's go to our view files for instance home Glade dot PHP and we want to extend that layout all right so we can say at extends and then we can actually just do layouts dot app so what this is doing here it's going to look for a folder in the views folder called layouts which we have and then a file called aptly dot PHP which we have alright so if I save that and we just go back to the home view we see the h1 but if we look at the source code with a control u you'll see that it's outside of the actual markup from the layout so to put that inside here we want to put it in the content section okay because if we look we go back to our layout we're yielding content all right so let's go back to our home and what we'll do is do an at section section is going to be content all right and then we'll just go down here and then we just need to end the section all right so now if we save that and reload the source code you'll see the h1 is now where it's supposed to be within the body tags all right and we want to do this for all of our views we want to extend layout and then put the section so I'm going to copy that okay and then we'll just change that to about contact same thing okay so now all of our views will have that that wrap our that layout okay you can see that's included all right now let's say we wanted a sidebar here what we could do is go to our layout file and in here let's see we'll just go right under the yields for now and let's say at section and this section is going to be sidebar okay and let's say we want to actually know what we don't have to end it so we just want to go right under it and let's put in a div we'll give it a class of sidebar and we'll say this is the sidebar and let's actually put an h3 right here all right so let's save that now if we go back to let's say the home page you can see this is the sidebar and this is going to be on every page so if we go to about you'll also see it now we can append to this if we want on individual pages so if we go back to the home page let's go ahead and go under this section and we're going to do again at section sidebar and then we're going to do end section so if we save that okay we get the same thing now let's go back to the layout app blade dot PHP and we just want to go right under here and say at show okay and then let's go back to home blade dot PHP and then here we'll put a paragraph we'll say this is appended to the sidebar and we'll save that and reload now since we did that the original sidebar is not showing it's just the appended so in order to show the the parent we just need to say at parent and now if we reload the sidebar shows and the appended content now this appended content should only be on the home page so if we go to slash about you won't see it okay so it's only on the home page so that's how we can append to to a section now some things you may want to put in in a partial file or and include so if we go to our app blade PHP I want to put the sidebar mark up into an include file so in the views folder let's create a new folder called Inc I NC and then we'll create a file called sidebar dot blade dot PHP and then what we can do is take this right here and cut it actually let's take that as well this whole thing and we'll cut that and then put it in that sidebar file save that and then we can just include it here by saying include and that's going to be in the Inc folder so we want Inc dot and then the file name which is sidebar so let's save that and we should get the same exact thing all right so that's an include so I think that's a good place to stop in the next video we're going to start to add some content we're going to create a nav bar and I'm going to show you how to implement bootstrap as well as shafts ok sass is a CSS pre-compiled err that allows us to use things like variables and nested styles and all that and it's really easy to do with laravel it's pretty much set up already we just have to run a few commands alright so I will see you in the next video alright guys in this video we're going to start to add some content a menu and so on but I want to show you how we can compile our assets so laravel 5.4 uses something called and right here it says larval mix provides a fluent API for divining webpack build steps so if we open up in the root here webpack mix j s you'll see this code here and what this is doing is it's looking at the resources folder and then assets j s op j s and it's going to compile that down to the public version which is going to go in this public directory right here okay app j s okay if we look at that it looks absolutely horrible because it's compiled and minified all right same thing if we look at public apps ESS same thing so we don't want to touch this stuff app CSS or app j s in the public folder what we can do is use the resources folder if we go to assets j s app j s you can see this looks much nicer and it actually used uses view which is a JavaScript front-end framework and then if we look in the sass folder there's an app dot s CSS this is where we can add our custom CSS and then compile it down ok now you don't have to use sass you could just use regular CSS files if we go down here plain CSS what you can do is use mixed styles and then put your actual CSS files there and it'll it'll concatenate them together and then include it ok but we're going to use sass so the first thing we need to do is just run an NPM install now NPM is node package manager so you need to have no js' installed I don't so I'm going to install it now ok so go to node.js org we're going to grab the recommended version I already did so it's just oops I'm just going to go to my downloads folder ok and then right here node and we're just going to go through this very simple just click next next install and this will install node J s which is a JavaScript runtime environment basically it allows you to have JavaScript on the server and then also NPM which is used to install packages all right so that's all set let's click finish and then we should be able to use NPM so make sure you're in the basic website directory and we're just going to say NPM install oh I think I have to restart this commander all right so I'm just going to navigate back to that location htdocs basic website alright and make this bigger so we're going to go ahead and run NPM install and that's going to set up all of the nodejs dependencies alright which could take a few minutes now when we do this stuff in future projects I'm not going to really go you know fully explain it because I don't want to be repetitive so I'll just kind of do it you guys can follow along and what what this is doing right now if we look at the package.json file here it's setting up all of these dependencies okay Axios which is an HTTP client it's going to actually set up bootstrap staffs so we can use bootstrap without having to go and you know download it and all that Kraus environment jQuery which obviously is the JavaScript library laravel mix which we're using now to compile assets lodash which is underscore j/s and then view which is a front-end library or framework whatever you want to call it okay so it's setting up all that stuff right now now when we for instance add something to app dot s CSS to the sass file or we change something or we change something from the variables we have to run npm run dev okay and that will basically compile everything we do now if you don't want to have to keep running that command you can do npm run watch and it'll just kind of sit there and wait for changes in the sass files and then compile them down to the CSS alright it's pretty cool if we look at this variables file we can easily change for instance the background of the body these are all variables we can change the color of the you know the context like primary info success all that stuff fonts the navbar background and we can also add our own variables and use them in the app s CSS file alright so it's pretty cool alright guys so that took quite a while a few minutes at least but it did a lot so now what we can do is we can go into app dot s CSS and we can add styles here we could create another sass file and just simply import it like they did with variables and I think that's a good idea so let's go ahead and say new file underscore and we'll just call this custom dot s CSS alright and then we can just simply import it so we'll just copy that and let's put this down at the bottom and then we'll say custom and custom you don't need to include the underscore it knows that that is basically a partial that we're going to include our import so let's save it and we need to go to our index file or I'm sorry high index file but our layout which is aptly dot PHP and we need to link the public CSS ok so we want this to go to CSS slash app dot CSS okay it automatically knows to look in public so if we go here it's including this file which is the CSS that's compiled from everything okay bootstrap the variables file the custom file we just created it's all going to get compiled into this so if we go back to our application and reload you'll see that the the style has changed okay because it's implementing bootstrap because we're including it right here in the app dot s CSS file and also the variables and the custom so if we go to for instance variables and for the body background just to test it out let's put in black and save it now right now it's not going to take effect because it this needs to be compiled so if we go back to our command line here and we say npm run dev that's going to basically compile everything all right so that compiled now if we go back to our site and reload and might take a couple seconds you can see that the background is now black now if you don't want to have to keep doing that you can just do NPN run watch and basically it's just going to watch for your for your updates okay so now it's you can see it's watching it's not going back to our prompt so now let's change it back to what it was and then save and it should automatically compile okay because we're watching for it so my advice would be to just keep this running while you're in your development and you can simply you know edit your sass files so let's close that up that's all we're going to need for now next thing I want to do is add a navbar so let's go to get bootstrap calm and we'll go to getting started and then examples I'm going to click on the starter template here and then do a control you and we can just grab this nav tag here this is usually what I do instead of just you know typing it out so we'll grab that and let's go to our application and I'm going to put this in its own include file so in the ink folder we'll say new file we'll call this nav bar dot blade dot PHP and then just paste this in okay we'll save and then we want to include this in our layout so let's go back to layouts and we're going to put this right below the body tag and we're going to say include navbar okay let's go back it says oh i need to do inc dot navbar because it's in the includes folder and there we go there's our nav bar now the content is underneath it because we need to go and remove this nav bar fixed top class right here just get rid of that and then let's change the project name to just say Acme and then home which will go to slash a boat will go to slash about and contact will be splash contact and for now i'm going to get rid of the active class all right so if we reload now you can see the content is out from underneath it and we can also navigate to about in contact so what else what i want to do now is put the sidebar where it's supposed to be so we're going to use the bootstrap grid system so let's go back to the layout file and what I'll do is put in a div here and this is going to be our row and then we'll do call m.d. ate call lg8 so it's going to be an eight column div and then copy that that will be the main content and then this will be the sidebar this will be a four column div so now what we need to do is just grab the content put that in here sidebar we'll put that in here alright and let's see I also want to wrap actually no that's that should be fine what we do need to do is wrap this row in a container so let's say div class equals container and that's going to wrap everything all right so let's save that and now the sidebar is where it should be and everything's inside of the container let's give the sidebar Klout a well class to give it kind of a background and border so let's go to our sidebar partial file here and instead of the class of sidebar I'm going to call it class of well reload and now it's inside of a well okay now if you want the appending the appended content to go outside of that well we can just move show down to here and now it's outside of it okay all right so that looks pretty good let's go ahead and add some content to the home page so home blade just go right under the h1 and let's put a paragraph and then I'm going to type in lorem and then tab and that's going to give me some sample content so you can do this in Adam as well as sublime text okay so that will just add some content here and then for about we can do the same thing change it up a little bit okay it really doesn't matter what you put alright so now we have home about good so for a contact we're going to want a form and we're going to use something we're going to use a package called laravel I was laravel collective so we're not going to get into that just yet now one thing I want to do before I go is I want to create the showcase area the jumbotron so let's go to the ink folder I'm going to create a new file here and we're going to call this showcase dots blade dot PHP and then let's just put in a div and this is going to have a class of jumbotron and also text Center and in here we're going to have a container div okay and inside here let's put an h1 and we'll just say welcome to our site and then under that we'll have a paragraph and I'm going to give that a class of lead which will just make it a little bit bigger and we'll say welcome to our brand new laravel powered website and we'll say this site uses laravel version 5.4 all right and then we'll save that so we need to include it in our app blade PHP just like we did with the navbar so let's see what I want to put it let's just put it right under the container here okay when we'll just change that to showcase and there it is now one thing we can do in blade is we can add logic okay such as if statements so what I'm going to do here is go to our where I want to go yeah right here and we want to wrap this include in an if so we'll do at if and we can use this request object so requests double colon is and we can test for the route so we want to say if this is that slash then include the showcase okay then we'll do and if so let's save that and reload and still there if we go to about however or contact it's not there anymore so we can specify what content we want on which page and then I also just want to add a footer so let's go in the layout file we're going to go under the container div and let's say footer and I'm going to give this an ID of footer and also a class of Tech Center alright and in here we'll just put a paragraph that will say copyright 2017 and will put the the ampersand copy semicolon which will give us that copyright symbol and we'll just say acne alright now I want to add a little bit of styling to it so I'm going to go to that custom CSS file we created and here we'll say ID of footer and I want to add a margin top of let's say 30 pixels and let's see padding will say 20 pixels color will be white and background will be really dark gray okay we'll save that and since we have this watching you can see it got compiled successfully it even gives us a little a little notification down here and if we reload we get nothing why is that not changing see footer should work oh there we go I just I did a control f5 to clear the cache all right so that's good now in the next video we're going to start to add the contact form and we'll also start to get into some more dynamic stuff with controllers and models and all that hey guys in this video we're going to create our contact page we're going to use a package called laravel collective which is used for a couple things but it's mostly used for HTML and forms you can see it's an option and the docs here and this is laravel collective comm now this is for version 5.3 so what I'm going to do is just change that to 5.40 they don't have the Doc's yet okay so that's fine I mean most of this stuff is the same anyways so to install it we're going to use composer okay so we want to run this here except we want 5.4 so let's open up commander or whatever terminal you're using now I still have this watching for assets so what I'm going to do is just open a new tab here whoops if I do new console start okay and then I just need to navigate to that folder which is xampp slash htdocs slash basic website okay so from here I'm just going to copy that paste it in and I'm just going to change it to 5.4 and that should work alright while that's going on we next need to add a new provider to the config file so we want to grab this right here copy that and then go into the config folder and app dot PHP ok and then let's go down to where the providers are figures it's down at the bottom so these are the providers I'm just going to go to the last line here and paste this one in okay – collective so make sure you save that and then let's go back over here and we need to add these two aliases so let's copy those and the same file we're going to go down to aliases and just go to the last line here and paste those two in alright and then save and we should now be able to use it so opening a form we would use this syntax okay so the double curly brown the curly braces and then the double exclamations okay and then to create fields see fields would you do something like this so form text and the name and so on so let's get some create the form first so I'm going to grab these and let's go in to see resources views and we want contact blade dot PHP and what we'll do is show that that's copied and paste that in so this is basically going to give us the opening and closing tag for the form and then the URL that we want to submit to we're going to change that to say contact slash submit and we'll have to create a route for that and then here we want to put the different fields so we're using bootstraps so I'm going to put a div here with the class of form group okay and then in here let's create a label which we can see see right here so this will be cool now you can do you can use your PHP tags in here and you can echo out this stuff or you could just use the double curly brace which is what we're going to do so if we do double curly brace and paste that in that should give us the label okay and then for the actual input let's grab this paste that in so this is going to be a text field and this is actually going to be the name actually you know what let's keep it as email because that we are going to need an email too so what I'll do is copy this whole thing paste that in and then this will be the name all right so let's save that and just see if it's working if we go to contact and there it is we have our fields and label doesn't look very good but we'll fix that and then the last fields we're going to want is the message field so let's go ahead and paste this in the label will say message it'll just say enter message no actually this will just be message and then this will be enter message okay because that's the placeholder all right now we don't want this to be just a regular text field we want to be a text area so right here we can say medium text maybe that's not right oh no text area nevermind there we go now if we want to add a class to any of these what we can do is for the text right here we're going to put in an extra parameter and this is going to be the value okay if we wanted to insert a value here we could do that but this is going to be blank and then the next one is going to be an array of options and one of those options can be the class so we're going to say class is going to be form control which is a bootstrap class so if we go ahead and save that it's a legal string offset name what did I do here oh this is we don't want this here well actually we can keep it there but we'll get rid of that okay because this I guess is being looked at as the value so let's try that there we go also that's not a placeholder it's actually the value so I don't want that I don't want anything in there same with these I mean I guess if we want we could put a placeholder here like this so that needs quotes and then we can point that to enter name see if that works yeah okay so that's that and then what I'll do is just copy this basically this associative array and put one here this will say enter email and then put one here and this will say enter message okay so now if we go and reload now that looks pretty good so now we need a submit button and just go put that in a div we don't need a class though okay and then we can say double underscore form submit and inhale say submit and let's also give this a class so we want to put in our associative array and say class is going to be BTN and BTN primary okay reload and now we have our submit all right so when we submit it obviously this isn't going to be found because we haven't created this route so let's go to our routes folder and then web dot PHP and we need a route here so this is actually going to be a post since we're submitting a form and then this is going to be yeah post and then here let's put the route we want which is contact slash submit and what we want this to do is go to a controller function so we're going to have a controller called messages controller alright and we want it to go to a function inside that class which will be called submit ok so messages controller submit function so let's save that and this isn't going to work yet because we haven't submitted the all this should be in single quotes ok so it's saying messages controller doesn't exist which is what should happen alright so I'm going to stop here in the next video we're going to talk about controllers we're going to create the messages controller and handle that submission alright guys in the last video we created a contact form with laravel collective and we're submitting it to if we look at our routes file we're submitting it to a messages controller and then a function or method called submit so this doesn't exist yet this controller and where controllers go is in the app folder and then HTTP and then controllers and you can see we have this I guess this base kind of controller that that we need to extend when we create other controllers there's also some authentication stuff in here by default but we're not going to deal with any of that what we want to do is create a new controller so to do that we can use a tool called artisan ok so we can run PHP artisan commands to do tons of different things to do to create create controllers create models database migrations all kinds of stuff so what we're going to do is pull up the command line and let's clear this out and we're going to create a controller so we'll say PHP artisan and then we want to do create : controller I'm sorry it's not created to make make controller ok and then after that we want to put the name of the controller which is going to be messages controller alright so it was created successfully and now if you look in our controllers folder we have messages controller ok now up at the top here it gives us this it says namespace this basically means that this class belongs in in the controllers ok so app HTTP controllers and then this here when we say use it means that we want to pull something out and use it and illuminate basically you can kind of think of this as laravel so we're going to take it from laravel out of HTTP request ok and this this basically allows us to handle requests alright so if if we're routed to a controller method and there's a parameter attached an ID or something we can use the request to get it ok then we're just defining the class here and we're extending controller ok any time you create a controller you need to extend this core controller so if we look in the route source we're submitting this to a function or a method called submit so let's create that host a public function submit ok and public just means that we can access this from outside of the class so for now let's just let's just say return 1 2 3 and then we'll go back to our contact page and let's submit it and you'll see that it's just returning 1 2 3 so we know that this function is being called now in order to access the contact fields the data that's typed in here we need to use this request okay so in the submit we're going to pass in request and then the variable that we want which is request okay and then we can access these fields by saying request input and then in here you want to put the name the form name which will get the name field okay so let's go ahead and save that and we'll just type in test for the name and submit and we get test so that's how we can access these fields now we want to do some validation because we don't want for instance no name to be right now we can submit it even if there's no name and I don't want that I want these fields at least the name and the email to be required now when we use a controller that's extending this core controller we have all the methods and properties anything that's available in the core controller we can use and there's something called validate because of method called validate that we can use so what we're going to do is we're going to say this okay meaning this class and then the function we want is validate all right and then in here we just want to pass in request and then an array an associative array with the fields we want which is name and then the rules our rules can be more than one but we just want required all right and then we'll say email also required okay and then down here let's just return we'll just return success okay and now if we go back and reload and we submit oh it's just expected Namie Oh need a comma right here okay so we'll resubmit and you'll see that it's not actually it's not returning success it's not moving past this point because this isn't okay if I were to put stuff in here then we could submit now we need a way to let the user know what's going on because right now it's just not doing anything and when this runs it actually puts out the errors we just need to basically catch them in our template or an RV so what we'll do is go to app bleed dot PHP and figure out where we want to put these messages which I think should go right above the main content so right here and we can say if count which is a function that will just you know count errors we want to say yeah errors and if that is greater than 0 so if isn't if they're the errors are greater than 0 oops then we want to do a for each loop and basically loop through these errors so let's do at for each and we're going to say error is all as error all right and then we have to end the for each and in here what we want to do is display each error now I want to display it in a div and we're using bootstrap so I'm going to say alert and then alert danger which is going to make it read and then in here we just want to spit out the error okay so let's go ahead and save that and submit and now we get our errors the name field is required the email field is required now I don't like having all this stuff in my template itself or my layout so I'm going to create an include here called messages blade dot PHP and any errors or messages I want to be in this file and then will just include it so let's grab this and we'll cut that out and then we'll just put include and that's going to be inc dot messages okay and then we'll go and paste this in here and we should be all set if we submit still works all right so that's validation now what we want to happen when we submit this in our controller we want to call a model a message model and then insert it into the database so we don't have a database yet we haven't created one so in the next video we'll create the database we'll set up the model and I'll also introduce you to migrations alright guys so in the last video we set up our messages controller and we're submitting the form to it we added some validation now we need to take care of the database we want this contact form to submit this stuff to the database so we're going to use PHP myadmin to basically create the database and look at the data and so on so let's go to localhost / PHP myadmin and if you're using xampp you should automatically have this if you are not then go ahead and install it and get it set up alright or I mean you don't have to use this you could use the command line if you know if you know what you're doing so let's go to databases and let's create a new one we'll call this a basic website create and that's pretty much all we need to do here we're not going to have to insert the data here we're going to create a migration for that okay migrations are basically they allow you to interact with the database whether it's creating tables or you know inserting data or deleting tables or columns whatever it may be you want to do that through migrations not through PHP myadmin we're strictly using phpMyAdmin to see what we have in the database all right so we're going to go ahead and create the model so let's go to the command line and we're going to do PHP artisan just like we did make controller we're going to do make model all right and then the model name is going to be message okay your models should be singular and your controller should be plural now there's an extra option I want to add here and that's – M what that'll do is it'll create the migration file for us so that we don't have to create it ourselves all right so let's go ahead and run that and you'll see that in the app folder we now have a message PHP this is the model okay it may be a little confusing because there's no models folder they're just kind of put right in the app folder all right now the migration if we go to the database folder you'll see a migrations folder and there's this should be three files in here one is to create the users table and one is to create the password resets table and then one is to create the messages table so these two are actually included with laravel by default okay don't you we don't have a user's table yet because we just created the database but once we run migrate all of these files in here are going to run now this application isn't going to need the users table our password resets but I'm just going to leave them there and let them get created all right and then this one here is the one that we need to look at this is what we created basically a migration has two main methods up and down up is going to run when you run the migration in artisan and what this is going to do is create a table called messages it's going to add an ID field which will be auto increment and primary key and then it's going to add a couple times stamp fields created that and update that and then down is going to run if we decide to roll back the migration if we change our mind and we want to drop the messages table all right now I do want in here we want to add a couple more fields to this table when it's created we want the fields that you know the form has which is name email and what's the other one message so we just need to do table and then the type this is going to be a string and this is going to be the name field okay and we'll do the same thing for email and for message now message I want to be a little longer so instead of string we're going to use medium text okay there's long text medium text and then the down is fine because it's just going to drop the whole table if we roll back so that should do it let's go ahead and save this and then what we want to do is run the migration so we say PHP artisan migrate oh we didn't add our database parameters yet so to do that you want to go to the dot env file and go to where it says MySQL and put the database name which in my case is basic website the username which is root and then the password which is one through six for me make sure you put your own information in here and we'll save that and then let's see I think we're going to get another error let's just run yeah so this right here is I guess it's a bug this syntax error access violation it says that this 107 one specified key was too long now to fix this can we actually copy this all right look I don't mean to do that but I'm going to just search for this because there's a page I think it's the first one here tells us what to do yep so we actually have to go in to see what file is it I think it's the app provider file so if we go over here to app and then providers app service provider PHP there's a boot method we just want to grab this right here we need to put that in and in order to use the schema we have to put this in right here all right and save and now we should be able to do the migration just fine so again we'll do HP artisan migrate table users already exists oh so it did create the users table and then it hit the error okay so you'll see those users and migrations table what I'm going to do is just completely drop those and then run it again all right so now it created everything let's go ahead and look in here and we have users password resets migrations in our messages table migrations just basically keeps track of all the migrations that you do but if we look in messages and we go to structure you'll see we have an ID field a name email message created at and updated at so that's our table for the messages now what we want to do is in the controller we want to submit to the model into the database now to use the message model we need to include it up here so we're going to say use app and then back slash make sure you do a back slash I know that confuses some people it's the slash right above your Enter or return key and then we want the model name which is message okay use app slash message and now when we do our submission instead of just returning success we're going to create a new message all right so first thing we'll do is create a message variable set it to new and then the model name which is message now this is actually eloquent this is um a laravel database library you can do straight-up SQL statements but in most cases he won't eloquent as a much well more eloquent way to do it all right so we're just going to say new message and then we can assign each value so let's say message name and that's going to equal what what's entered in the form so remember we can get that with request input name alright we're just going to do the same for the other fields okay so this one will be email then this one will be message all right and then all we have to do now is save it so we'll say save message and we can do that by simply saying message save all right and then after that after it's entered into the database we want to redirect all right so let's say return redirect and let's go back to the home page all right so let's save and now let's see if this works okay so we'll go to our contact page you'll say John Doe email address oops and message you'll say hello I need a website submit redirects us back to the home page let's take a look at the database now in the messages table we'll click browse and there is and you can see the I D was put in automatically as well as created and updated at all right now the last thing I want to do here is show you how to use flash messages so after we redirect I want a message to say that your message has been submitted all right so what we'll do is down here which is where we redirect we want to just add on to this and we'll say with and then status it will say message sent all right now this by itself isn't going to show anything but it's going to give us access to the message on so what we have to do is output it in our view and I'm going to use the message hub where is it the message include so in views ink and then messages blade dot PHP and we'll go right under where we did the errors and we'll do an if will say if session whoops is it yeah if session status actually instead of status let's put let's put success okay and then if step if session success and here what we'll do is loop through actually no I don't have to loop through we can just put a div and we'll give it a class of alert and alert success and then in here we can just do session success okay that should work so let's go back to contacts we'll send in another one with say Mark Smith and Smith at yahoo.com hello how are you and submit and there we go we get our message sent alert or message and if we go to our database there's Mark Smith alright so we can now submit data to the database so in the next video which I believe will be the last I just want to have a page where we can actually see the messages that are sent now if this were a real application you'd probably have a log in system and have that blocked unless you know unless you log in but we're not going to get into that stuff just yet but I do want to show you how to fetch data from the database alright so we'll get into that next alright guys so we can now submit the contact form and the data does go in the database now what I want to do is create a new route and a new controller method to get the messages from the database and then output them okay into a route so let's go into our messages controller and create a new function so it's a public function and we'll call this get messages okay so in this get messages function we're going to set a variable and and this is you'll see how easy this is with eloquent so say messages equals and then the model which is message and then we can just do a double : all okay and that simple line is going to get all the messages from the database and put them into this variable and all we need to do is return a view and then pass that data to the view so we'll say return view messages okay we're going to create that and then to pass the data we can just do with messages and then the actual data which is in that variable messages and that's that so it's save it and then we're going to create a new route so let's go to routes web dot PHP and we'll just copy that and then let's see right here will say messages it's going to be a get get request and we want to set this I'm just going to copy this actually all right so then messages okay that's going to be get and that's going to be set to messages controller and then get messages all right we'll save that and now let's go to our views folder and create a new file called messages dot blade dot PHP I realize you already have a file that's that with that name but that's in the includes folder all right now what I'll do here is just copy what we have in the home all right and then we'll just change this to messages and let's see get rid of that paragraph and what we want to do is loop through the messages that are being passed in so for that let's first check to make sure there are any so we'll do if and then let's do count that's that should have a money sign it's a variable if count message is is greater than zero then we want to loop through with a for each okay so we'll say for each messages as message okay make sure you end that for each as well okay and then in here what we'll do is display let's do a ul and I'm going to give it a class I'm going to give it a class of list group and then we're going to put some Li tags with the class of list group item and in here let's do will say name and then we should be able to do message name alright we'll do that for the other fields as well so we'll copy that and this one will be email so that'll be message email and then this one will be the actual message text all right so let's save that and then we're going to go to slash messages and there we got we have john doe's message and info as well as Mark Smith so we're just about there the last thing I want to do is is I don't want to load the view from the routes file that's not good practice right here so we'll create controller methods for for all of these all three of them so let's go to controllers and we're going to create a new controller called pages controller so let's go to our terminal here and we'll say PHP artisan pages controller what's we have to do make controller as well alright okay and that should actually be an uppercase alright so that will create that and then what we'll do is we'll create a function here so public function and let's call it get home okay and then all we want to do here is just we just want to load the view so same thing we did in here we can just return the view okay and we'll do the same for the other two pages so this one will be get a boat that's going to load the about view and then get contact that'll load the contact okay so now we'll go back to our routes and instead of doing that we're going to do what we've been doing down here and just use a controller controller methods slash is going to go to pages controller and then it's going to call get home all right we'll do the same for about in contact so this one will go be slash a boat and then this one will be slash contact and that will call the get contact method okay so let's go ahead and reload and we should get the same yep good oh you know what one other thing I wanted to do is the active class for whatever page were on so let's go back let's go to the navbar include alright and then what we'll do is use the same logic we use for the showcase we have the where is it right here request is okay so we'll look at what route we're on and then put the active class depending on that so let's go to the first li here and we'll say class equals and for this we're going to put in double underscore request double : is and then the row which is going to be slash okay if that is true we're using shorthand syntax here if that's true then this class is going to be active if it's not then it's going to be blank okay so we can use that for all of these okay and then this one will be slash about and then this one will be slash contact so let's try that out okay you can see it's highlighted go to about that didn't work oh I think we just I think we just need to remove the slash here on those two there we go alright so now that's working so that's going to be it for this project guys I realize that this is kind of a lot for for the first project usually I don't do you know work with the database and all that in the first project but I think it give you a pretty well-rounded look at laravel so you know in the coming projects we're going to get more advanced and we're going to do more stuff with databases and migrations and authentication and all that so that's it thanks for watching and I will see you in the next project hope you've liked the video will soon be reaching out to you with some more stuff so don't forget to Like subscribe and recommend our videos to the other coders out there

40 thoughts on “Learn How To Create Basic Laravel Website | Laravel 5 Tutorial | Projects In Laravel | Eduonix”

  1. Tell me, what is the sense of a framework with a PHP engine, so you really could programm PHP. Laravel isn't PHP-programming!!! You generate the PHP needed with a PHP-engine^^, isn't this funny.

  2. Brad do you have a part two to this video? If not, can you create a part two where we add more dynamic functionality and some front end with vue?

  3. Why would we create a pages controller and redirect routes to that when the same function is already being done by the routes?
    Thanks for the video btw 🙂 Really helps but just did not get why you did that.

  4. Great work. I love this. I'm a PHP developer in Nigeria

    I intent to build web apps (not actually a mere website) to manage sales and inventory. Can I do that with laravel? Show me tutorials related to it, please.

    Thanks!

  5. Laravel collective doesn't exist anymore,and composer require.. doesn't work (I'm using laravel 5.7).. How can I do this?

  6. after adding virtualhost content in httpd-vhosts.cnfig file my apache is shut down ……..plz give some solution

  7. Hi there, thank you so much for this. Clean tutorial, good pace, pleasant voice and tone to hear. Keep up the good work dude !

  8. @27:10 Anyone have any idea why my '<div class=''well"> ' doesn't work. It doesn't have the border. Can't figure it out.

  9. Very good video. Thank you very much for taking time out and making this wonderful video. I am sure it helps a lot of folks.

  10. I got this error even after using POST method in route ,
    Symfony Component HttpKernel Exception MethodNotAllowedHttpException

    The GET method is not supported for this route. Supported methods: POST.

  11. hello sir,
    i installed latest version and some of the files like app.css in public folder are missing.
    let me know the version in this video, or the thing i need to do in my latest version to move forward.

  12. Wow! This was a very great video. I have some basis skills in PHP and this was my first framework. I was warned for a very steep learning curve, but your video helped a lot.

    I was able to follow your video, step by step and even copied the same mistakes you made. I was glad that you have left them in the footage, because we (your viewers) can learn from them as well.

    I'm going to repeat your steps on a fresh machine, so I can summarize the steps. Thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *