How To Create A Blog In Laravel 8 | Laravel 8 CRUD | Laravel 8 Blog | Create A Blog In Laravel

what's up guys my name is dari and i hope that you have a great day because today we're going to create a complete larval 8 project i want to start off on a basic level and create a complete blog if you're completely new to larva and you haven't really done it before i recommend you to watch my complete larval 8 from scratch course because i won't be covering most topics in depth since i've just spent a couple months doing that if you are interested in learning larval 8 i will add a link in the description down below just like the course we're going to work with a couple of tools right there i'm using google chrome as my browser and i'm using item as my command line interface first things first let's create a larva project inside my terminal i'm going to change directories and i want to go to my desktop forward slash workspace so in here let's create a laravel project let's say larval new laravel block this will create our larval project and this might take a second so i will cut this part out and i'll see you back in a second as you can see right now on my screen our application has been created and we're getting a pretty nice message back that we're ready to build something amazing so let's do that let's cd into larval block the folder that we just created and before i continue on i want to make sure that we're on the same page with our php version artisan version and npm version so first let's write down php artisan dash dash version and as you could see right there this video has been created on the 22nd of february in 2021 and we're using the most up-to-date larval version which is 8.2.8.1 after my laravel course i upgraded my php so let's write down php dash v and as you can see we're running on php 8.0 now the last thing that we need right here is npm mainly because we're going to work with tailwind for our css the reason i've chosen to use tailwind is because i'm trying to save us some time so let's say node space dash v and as you can see we're running on version 14.15.5 since we're on the topic of tailwind let's actually pull it in i'm running on a mac and lately i've been running into some issues with mix so larval mix now i kind of found a solution for this so follow along for a second step number one is to pull in our tailwind presets so let's say composer require laravel dash front end dash presets forward slash tailwind css space double dash dev by running this command larva will automatically discover the tailwind package we're going to use the authentication of laravel and we can pull that in with tailwind as well so let's say php artisan ui tailwind css space double dash art of authentication it's saying that we need to run or install npm and run it but before we do that let's write down npm remove larval dash mix now it's removing everything and this might take a second so i will cut it out now what we need to do is to run larval mix and save def so let's say npm install laravel dash mix space double dash safe dev and this might take a second as well all right now let's install npm so npm install space cross dash env space double dash save dev now to keep our css compiling every time we use tailwind let's write down npm run watch all right we're ready to go if we go to our visual studio code and let's open a project so let's open folder my desktop workspace laravel block let's open it and we're ready to kick off usually i double check to see if my tailwind has been compiled so let's open our public directory css and the app.css and right now you can see that our css has been compiled because we have a lot of stuff in here that we that we haven't created ourselves and if we write down command f or ctrl f write down tailwind you can see that tailwind has indeed been pulled in now the next step is to set up our database credentials so let's close off the app.css because we don't need it anymore let's open emv and our database credentials are stored right here the connection is mysql the host needs to be changed to localhost for me the port is a write the database name is larvalblock and we haven't created it yet but we will do it in a second the user is root and the password is dari 1234 for me for you this needs to be your my sequel credentials your password could also be empty but that's up to you i hope that you know how to use your own settings by now let's save it let's close it off and we're ready to create our first controller so let's go to our terminal let's open a new tab and let me zoom in let me cd to desktop workspace larval block and in here let's run php artisan make me a controller called pages controller and what we're going to do in here is basically defining the basic pages that we need i will only be focusing on the home page so let's open the visual studio code go to our app http controllers pages controller so i will only focus on the home page so the public function index if you want to add more pages you could basically go right below our public function index method and say public function about which will create the about page for you but i won't focus on it so let's remove it in here let's actually return a view so let's say return view and in here in single quotes we want to say index before we're going to work on our ui let's hop to our routes let's close off public actually routes web.php and let's scroll down for a second and as you can see right here we have three routes one which will return the view welcome page the authentication routes and the forward slash home route the first route is actually the one that we don't need so let's remove it while the second run is the authentication routes and these are basically all the routes that you need for authentication this is automatically pulled in because we pulled in the odds flag when we imported our tailwind css now if you hop to the cli and write down the php artisan route column list and let me actually zoom out all right and right here on the screen you can see all the routes that one single line has created for us we have the endpoint login log out password confirm password email reset reset with the token and register and these methods or these uris all refer to a method insider authentication controller what we need to do right now is to create a route for the home page so let's go back to visual studio code right above our routes of authentication let's create a new route so route column column get the first param is the endpoint so in our case it's forward slash comma the second one is the class so brackets pages controller colon colon class comma and the last one is the method so in single quotes index let's go up let's pull in our pages controller so let's say use app backslash http backslash controllers backslash pages controller and i'm not sure if i need to zoom in or not i think this looks better all right save it let's actually open our views so resources views let's get rid of welcome and home because i don't want to use it now let's create a new file called index.blade.php let's write down home save it go to the browser oh i actually forgot to run php artisan serve so let's do that as well let me zoom in let's say cd desktop workspace larval block let's say php artisan serve all right let's copy the uri that we have paste it in the browser and apparently our controller does not exist so let's see what we just did wrong oh it's a capital a my bad save it go to google chrome refresh it and home has been printed out now let's focus on controllers a little bit more controllers tend to group similar routes together and that's why i love to use a blog as my first project when i teach something a blog is something which is called a crot application some of you knew that some of you might not so that's why i like to repeat myself a crud application so c r u d stands for create read update and delete and these are the four primary operations that most common web applications provides on a resource and keep the words that i'm using in mind i use the word resource and that's exactly what we're going to use inside the terminal naming your methods in the controller can be the hardest part of writing a controller thankfully laravel has some very cool conventions for all of the rise of a traditional crutch controller called the resource controller so let's hop to our cli and here let's write down well let me zoom in again php artisan make me a controller called posts controller space double dash resource let's hit enter and oh i forgot to add a model so let's say php artisan make me a model called post all right and what the double dash resource does is generating an out of the box and convenience route definition that allows you to bind an entire resource controller at once let me show that to you let's go to the controller let's open posts controller and right here you can see a couple pre-filled methods that we have and if we go to our web.php file we need to define the route to our blocks so right below our forward slash endpoint let's say route column colon resource the endpoint will be for slash blog the second param is the posts controller column colon class let's pull it in so let's duplicate it let's change the second one to post controller all right save it i won't be covering all the methods right now in detail because i'm going to do it in a second when we're done designing our pages so whenever we reach the point it will be fresh in your mind now let's start off with the design phase i will be doing it relatively fast i won't cover every single word i use for tailwind so just follow along and if you are not interested in the designing part i will put the timestamp on the screen where you can skip forward so first let's design our layout let's go to our views open layouts app.blade.php and right here you can find the basic navigation that we could use but if we scroll down to the bottom we have a yield content section which i want to wrap inside a div so let's do that and right below our div let's create a new one and let's include the layouts.footer let's create a file so let's create a new file called footer.blade.php let's close it off because we won't need it right now i want to change the header class real quick i want to say that it needs to be bg gray 800 now let's go to our nav so right here let's copy one answer let's go right above our guest template otherwise it won't be visible when we log in so let's remove the entire href and instead the first one will be forward slash and inside the entry text let's write down home let's copy paste it one more time let's change the second one to block and the endpoint to forward slash blog as well now let's save it close it off and open the footer.blaze.php and let's start off with styling the footer so let's say footer a diff and another div in here now the first div has a class of bg gray dash 800 padding y-axis is 20 and the margin top is 20 as well first if has a class of sm grid grid calls 3 the width is 25 padding bottom is 10 the margin is auto and the border dash b-2 needs to be added and a border dash gray-700 now the second div does not need any classes but we need to add a h3 in here which says pages let's give it a class of text l so large for small devices and sm font dashboard text dash gray dash 100 right below our h3 let's create an unordered list with a class of py-4 for big devices so sm colon text dash s padding top is 4 text is gray 400. now in here we need to add list items so create an ally give it a class of padding bottom one inside their list items we need answers and the first one is the home page the endpoint is forward slash now let's copy the list item and paste it three more times so one two three the first endpoint is alright the second one is the block page so block and the href is forward slash blog third one is login so forward slash login and the last one is register so forward slash register this was it for the first if we could copy paste the div with the actual content so the div inside the grid copy it paste it one more time right below change the title to find us first answer is what we do second one is address third one is phone and the fourth one is contacts now let's remove the endpoints because h rest because we don't need it now let's do it one more time so let's go right below our div paste it right there change the title to latest posts and what you could do right here is to add a couple of your latest posts so why we love tech why we love design why to use laravel and let's say why php is the best let's remove the hrefs because we won't be doing this and right above our end footer or closing footer tag let's create a paragraph of a class width dash 25 width dash 4-5 padding bottoms 3 margin is auto text is extra small text is gray 100 typo and the pattern top is six and in here let's write down copyrights 2017 2021 code with dory all rights reserved let's scroll up save it close it off let's open the index.play.php let me get rid of my comments i want to start off designing the home page first so this ugly little thing that we have so first off let's extend the layouts.app file and remember that inside the app.play.php file at the bottom we have a yield content so in our index page we could say add section with the name of content and that's end section as well inside our section let's create a diff another div and one more so the first one has a class of well before we actually do that let's save it and look at the footer and header and to be honest this looks pretty good but the width of our footer needs to be better so let's open the footer real quick let's say width dash 4-5 refresh it and this is what we need save it close it off and the first div that we have inside our index page has a class of background dash image which we will create in a second it's a grid it's a grid dash called 1 and it has a margin of auto the second div has a class of flex text as grade as 100 padding top is 10 and the last div is a class of margin dash auto padding top of 4 padding bottom of 16 sm colon margin dash auto width is dash 45 block and the text is center so in here we could create an h1 do with the text with the text of do you want to become a developer give it a class of sm colon text dash white text 5 excel uppercase font-bold text shadow dash md and the padding bottom is 14. right below our h1 let's create an answer with the text of read more the href will bring us to forward slash blog align it a little bit better we have a class of text center the bg gray 50 text dash gray 700 and i know this might be pretty boring but it will get better in a minute padding y 2 padding x is 4 font is bold text is extra large and it's uppercase now i don't like to add a background image right here with talwind so i created the background image class now that is a custom class so let's create that real quick let's go to resources css app.css and in here we could create our own class so dot background dash image it has a background dash image of url which we don't have so let's go to pixelbay that's my go to website when i need images let's say laptop dark all right so let's choose which one is good we could use this one let's right click and open image in new tab copy it paste it inside the url in single quotes let's get the background dash position to center center background dash repeat to no dash repeat background dash attachment is fixed now the background size is a full cover and the height is 600 pixels save it let's save the index page as well go to the browser refresh our homepage and all right this looks pretty good right so let's continue on we're not done yet let's go to visual studio code and right below our first big div let's create a new one which has a class of sm colon grid grid dash calls dash 2 gap is 20 the width is 25 margin x is auto piloting y 15 the border is border b border dash grade dash 200. so in here we need to create a new div and we want the image so let's open pixabay again let's remove this one let's look up laptop now so let's let's just click on one refresh it all right this is good for now let's give it a width of 400. that needs to be bigger let's say 700 pixels yeah this looks fine so right outside of our div let's create a new div where we have actual content to the right side so let's say that we have a class of margin dash auto sm colon margin auto text is left width is 80 percent so 4-5 and it's block now in here we have a h2 with a class of text dash 3xl font dash extra bold and the text is gray so in our h2 let's say struggling to be a better let's say a web developer right below up h2 let's rate a paragraph with a class of py dash 8 text dash grade 500 and the text is small let's write down lorem in here and this is a bit too much so this is alright let's create a new paragraph with a class of font-extra bolt tag stash rate that's 600 and the text small and the padding bottom is nine in here let's write down low room again let's remove a little bit from the text that we have all right and right below our paragraph let's create an answer with the text of find out more href is to forward slash block give it a class of uppercase dash pg-500 text that's great dash 100 text is small font is extra bold pny tree p axis 8 rounded dash 3 excel save it let's look at the output and this looks pretty good but i think the text should be a lot bigger let me scroll up oh the div width needs to be 4-5 i don't know why i keep saying 25 my bad refresh it all right let's make the struggling to be a better web developer too for excel and the paragraphs could be large i guess let's see second one too so text l all right we need a new section so right below our div create a new one where we will add static data but if you'd like you could easily pull this in out of your database the div has a class of text that is center padding is 15 pg is black and the text is white so inside the div that's creating h2 and let's say class is text to excel padding bottom is 5 text l and in here let's say i'm an expert dot dot and right below our h2 let's create a span with a class of fonts extra bold block text is for excel and the py is one and in here let's say ux design copy paste it a couple times the second one is project management third one is digital strategy and the last one is let's say backhand development save it refresh it and this starts to look good but i think the paragraphs needs to be excel yeah this looks way better all right i want to showcase some of my newest blog posts that we created so what we could do is to create a section for it on the home page so let's scroll down right below our div let's create a new div and i'm starting to repeat myself constantly give it a class of text that is center pt is 15 and a pt bottom well let's say py 15. let's create a span right here class uppercase text is small and the text is gray 400 text in here is block we have an h2 with a class of text for excel font dashboard pt or py is 10. and let's say recent posts and let's create a paragraph with lorem ipsum let's remove again a bit more text over here give it a class of margin dash auto with dash 4-5 forward slash 5 my bad and the text is gray 500 save it refresh it and this starts to look very good let me zoom in actually wait let's actually change back the text of the paragraphs to l maybe now let's do s i need it to be zoomed in but i totally forgot to do it for my browser paragraph or the h2 to h3 again and yeah this looks good now what i want to do right now is to add some dummy or static data of posts right here so let's scroll down let's create a new div give it a class of sm grid create course 2 width is dash four dash five forward slash five again margin dash auto let's create a div in here with a class of flex pg yellow 700 text that is gray that's 100 pt 10. create a new div give a class of m auto pt-4 padding bottom is 16 sm colon m-auto width is dash four four slash five block let's give it a span class of uppercase text that's extra small let's say php right below our span let's create an h3 which has a class of text excel font dashboard py is 10. let's create lorem ipsum again and this is enough and right below our h3 let's create an answer we don't need to fill in the href but the class is uppercase bg dash transparent border dash 2 border dash gray dash 100 text gray 100 text is extra small font is extra bold p y is three p x is five and the rounded three excel borders let's write down find out more in here save it refresh it all right let's create a new div but i want to add an image right here but let's just scroll up to save some time copy the div that we have with the image and let's replace the div that we just created oops this does not needs to be right there let's add it in between it all right this looks good and i will keep it like this for now does it look good let me know in the comment section down below i'm not sure all right now let's go to our post controller in our visual studio code and right inside our index method let's return a view to block.index so this view does not exist yet but we will do it right now so let's go to our views let's create a new folder called blog and in here a new file called index.blade.php let's write down blog let's go to the browser let's go to block and block has been printed out right now we're ready to design the blog page so let's do that let's get rid of block extends let's say layouts.app let's create a section called content now let's end the section as well and here that's where they div with a class of width dash four dash four slash five margin auto text center a div inside of the div class of py 15 border dash b border dash gray-200 and inside our div let's create an h1 with a text of block posts with a class of text 6xl save it refresh the page and this start still looks pretty nice so let's continue on right below our divs let's create a new div with a class of sm colon grid crit calls 2 gap is 20 width is dash four dash four slash five margin x is auto py is fifteen border dash b border dash gray dash two hundred so in here we need two divs because we have a grid column two so div div the first div will be your image so once again let's go to our home page and let's copy the entire div and let's replace it with the first one inside the second div let's create an h2 with a text of learn how to write laravel code and this will be a static block which will wrap inside the loop later on so we can pull out block items from the database so let's give it a class of text grade 700 font dashboard text five excel pad and bottom is four right below our h2 let's create a span with a class of text there's grade as 500 and let's say buy span another span give the class of font dashboard italic text grade-800 in between code with dory so the author after the span comma one day ago right below let's create a paragraph with a class of text excel text dash create 700 pt is 8 pb is 10 leading dash eight and the font is light let's give it a lorem all right right below our paragraph an answer keep reading and we will come back on the href in a second but give it a class of uppercase bg dash blue dash 500 text this grade as 100 text is large font is extra bold p1 is four p axis eight and around it three excel corners save it refresh the page and this looks pretty nice right right now we have created our design even though it is static so we're finally ready to create some actual larval code i want to brainstorm for a couple of minutes with you i want to write down all the endpoints that we might need so let me go to vhs code let's actually close off all tabs and open the posts controller and let me go to the bottom i'll write it down right here so for our create whenever you want to create a new blog post you will be calling the forward slash blog method but what's next because this is the page that will showcase all blocks as you can see right in the uri right now but what if we want to create a post well we need to add a forward slash create endpoint right after it and for the read now in order to read blog posts we need to call our index method so for slash block for slash index the index will not be visible so it's just forward slash block what we have right now what about the update what do we need is it forward slash block for slash update nope this is wrong in order to update something we need to tell the application what we need to update so we need to perform a put method we basically want to do a request to forward slash block forward slash specific id or in our case it will be a slug now for the delete we need to do the same exact thing if we want to delete something we need to call forward slash block forward slash specific slug or a specific id but how can we tell what the difference is between the update and delete that's something that will be done with the csrf token or basically the method that you will pass into your form for the update we need to perform a put or a patch request or a method and for the delete we need to perform a delete method now besides the endpoints that we see right now we also need a page where we show data of a specific id or a slug what endpoints do we need if you want to show data it will be for slash blog forward slash id but instead we will perform a get method or request and the last one is the edit page this endpoint will be forward slash block forward slash specific id forward slash edit so we're basically saying well grab this id and edit it and this will also be a get request so what's next let's get rid of the comments we set up our database credentials so we haven't set up our database itself and in order to do that we need to create a migration in order to do that we need to hop to mysql write down my sql in terminal show tables well i mean show databases let's create a database called laravel blog semicolon so let's show databases again laravel block has been created let's open a new tab let's cd let me zoom in into desktop workspace laravel blog and since we already created our model or post model let's create a migration so let's say php artisan make me a migration called posts and it's creating our migration while it's actually done so go to visual studio code and our migrations are located in database migrations and it's always the bottom one once you create a new migration since it's been created based on timestamps so in our up method let's create a schema create insider create method let's call it posts function method all right inside our function we need to pass in blueprint table now the columns that we need to define is table increments which will be id we have a table string which will be the slug we have another string which is the title we have another long text which will be the description so i also want to create an image upload so let's say table string but we only want the image underscore path so we don't want to save our actual image in the database but only the image pad let's add timestamps so table timestamps which is a method with no name in here let's create a table unsigned big integer with the name of user id now let's link our user id to the users table that's this one so to this specific id in order to do that let's say table foreign so we have a foreign key called user underscore id access operator references to id on the table users let's save it let's go to item let's write down php artisan migrate and as you can see our post migration has been created but before we create our first post i want to show you the database structure so let's go back to mysql and let's write down use larval block and right now we need to say desk posts and as you could see right here our id is auto increment which is the primary key and the user id is the mole which means that it's a foreign key now to insert data let's add one row ourselves before we create the post page let's say insert into posts the value slug title description image underscore path and the user id the values are well let's add some dummy data the slug first dash post title is first post the description is description first post image pad is test we're not going to use it right now and the id is one so the user id if we try to add it right now you can see that we're getting an error message and that's actually good this means that our foreign key can't be found since we haven't registered an account so if i say select all from users as you can see our table is empty so it can't link our foreign key so let's do that first let's go back to the ui let's click on login in the menu well register actually my bad the name is code with dari email is infoad my info my password is something secret let's register we deleted the view home so this is something we need to change let's change the endpoint and as you can see we're logged in let's go back to my sql hit the arrow up twice let's insert it one more time and you can see that run row has been affected so our well let's actually select all from posts and as you can see and as you can see it has been added because our foreign key exists right now before we do anything let's think about it for a second we want to interact with our post table so what do we need we need to somehow place our model in between the controller and the database so let's pull in the model first inside our controller so let's go up let's actually close off the migration inside the post controller let's say use app backslash models backslash post let's scroll down and inside our index method let's create a new variable called post and let's set it equal to post column colon all so get me all posts before we send it back to the front end let's dd variable post to see what the output is or to actually see if it even works save it refresh the page well let's go to block and yes this works because we are getting back one row which is all right because we just added one row in our database what we could do in our controller is to keep it as a variable and pass the variable into the ui but that's a couple extra lines of code that we don't need what we could do is well let's actually get rid of everything i want to make it a little bit better so we're returning a view let's go right after the view method hit enter add a method with the first one is posts and we want to say post column colon order it by so we want to order it by updated underscore add comma desk so descending and then we want to get every post that we have we're ready to show our post in the ui so let's scroll down let's open the index.played in the blog and let's go right above our div right here let's add early braces and let's write down variable post to see if it even worked refresh it and this looks fine so what we could do is to get rid of it and wrap a for each loop around our div so let's create there for each as multiple posts but we want to print them out as one post so as one post let's copy our entire div remove it and let's paste it right inside of the loop let me align it all right so we're ready to make it dynamic so in our h2 let's get rid of learn how to write larval code post title save it go to chrome and first post has been printed out i'll come back on the span in a second but let's do the description first so let's say post description now for the keep reading button that we have let's say forward slash blog forward slash curly braces post slug this won't work right now but we will do it later on now is this it well like i said i want to add the author as well but how does that work we need to use eloquent relationships right there because we already have the user id for a specific post like this let me print it out so let's say we have post user underscore id refresh it and one has been printed out but this is not the way to go because we can't access the users table right in a relational database model it is expected that you will have tables that are related to each other just as we did then eloquent will provide a simple and powerful tool to make the process of relating your database tables very easy let's think about it one post can only have one user but what about the user well a user can have more than one post right or do you want to forbid them to create more posts after the first one now to fix that we need to create the most common relationship and that's the one-to-many relationship so let's open the post model let's roll up models post model and let's create a method so public function and for the name of the method as for the name of the method we use the name of the relationship method and call it as it is a property instead so let's say user what we need to do inside our method is to return this belongs to which is a method in here we need to pass in the model name so in our case it's user column column class so one post belongs to one user we also need to define a relationship method inside our user model so let's open it let's scroll to the bottom let's create a new method public function post so one user has many posts so return this has many and let's pass in the post column colon class save it go back to the index.blade.php let's get rid of my name right here and what we could do right now is to add curly braces and say post get me the user method that we just created and find me the name save it refresh the browser and code with dory so the author's name has been added the last thing that i want to add here is the date time so i want to get rid of one day ago and this won't work because if we go to our database the created and updated at are no but let's add the code let's go to index.blade let's get rid of one day ago now let's say create it on curly braces date which is the method of php and we want to be at j capital s capital m capital y format after the single quote let's add a comma string to time because we need to pass in the actual timestamp so let's say post which is a method so let's say post updated underscore ad save it refresh the page and as you can see it's null so it picks the 1st of january 1917. but later on when we create our posts it will automatically create a new timestamp so we are done for now i will come back for a picture later on while we create a post but for now let's just continue on we're done with showing a post so let's create a post now for ourselves and to do that we need to add a button somewhere so we could easily add a post but think about it you don't want to give everyone that enters your website the permission to create a post right so we need to build in some kind of security that only locked end users can add data so in our index.blade let's go up above our loop let's create an if statement where we want to check if odd column colon check this method the check method will determine if a user is already logged in or not if it is true we're going to print out a button so let's say div let's give it a class excuse me class of pt 15 dash 15 width is 80 and the margin is auto in here let's create an answer with the text of create a post the href is forward slash blog forward says create now let's give it a class let me align it a class of bg blue dash 500 uppercase bg dash transparent text is gray about 100 strength text is extra small font is extra bold py is 3 and it has rounded dash 3 excel corners save it refresh it and you can see that created post has been added here but it actually does not look good let's add p x of 5. save it refresh it and this looks pretty nice right right now we are logged in so we can't actually check if the button will appear if we log out so let's do that let's log out go to forward slash blog and there's no button to create a post let's log in now because we do want to create a post so let's say info passwords well still need to change the home page but let's go to blog now if we create a post it will not show anything because we still haven't created the route or the file so let's go to visual studio code inside our blog directory or folder create a new file called create.bladeblade.php write down create let's define the route in our controller so inside the create method let's say return a view to block.create save it refresh the page and create has been added what we could do right now is to go to our index page let's scroll down let's just copy everything paste it inside the create.blade.php and let's get rid of the loop we don't need it we don't need a check as well we do need the first div where we added in h1 so let's change the text to create post now let's also remove the border and let's set the text center to text left inside a div now right below our first section let's create a new div give it a class of width dash four four slash five margin auto pt20 and in here we're ready to create our form so let's write down form hit tab and let's set the action to forward slash block let's set the method equal to post and let's also set the enc type equal to multipart forward slash form-data and this is to let the application know that we're going to upload a file so right outside of our form opening tag let's add a csrf token so let's say at csrf which is the cross site request forgery and it needs to be added in case one website pretends to be another whenever someone's goal is to hijack your users access to your website csrf will prevent that now let's think for a minute what input fields do we need let's go to i term as you can see right here we have our id but that's auto increment we have our slug but we will create our slug based on the title we do need a title description image path and the created at an updated ad will be auto created and we will add the user id based on the user that is creating a post so let's go back to visual studio code and let's create our input fields below our csrf token let's write down input hit tab the type is text let's give it a name of title let's give it a placeholder of title dot dot and let's give it a class of bg dash gray dash 0 block border dash b-2 the width is full the height is 20 text is 6xl and the outline is none instead of adding another input field for the description i want to create a text area let's get rid of the id calls and rows we don't need it let me align it all right the name is description let's give it a placeholder of the description as well if the class of p y is 20 b g gray zero block border dash b the width is full the height is 60 text is excel and the outline is none as well now we do need a button in order to upload our image obviously and i don't want to use the ugly one that we have by default so let's change it up a little bit let's create a div and give the div a class of bg that's great dash lighter and the pt is 15. inside the div let's add a label and we don't need a 4 but we do need a class of width dash 44 flex flex dash cool items are centered px-2 p1 is 2 let's say 3 actually pg white rounded lg shadow dash lg it's tracking dash white i want the text to be uppercase i want a border the border is blue so bordered as blue and the cursor is a pointer now inside our label let's create a span with a class of margin top is to the text dash base and it's leading dash normal and here let's add a text let's say select a file and we need an input field that is hidden so right below our span let's create an input the type is equal to file let me align it again the name is image and let's set the class equal to hidden now let's save it let's go back to the browser refresh it and this starts to look pretty good but i don't want the background color to be white so let's change that up let's scroll up let's change the bg dash rate as 0 to bg transparent and let's copy it and replace the text area background color as well save it refresh the browser and this actually starts to look pretty good the only thing that's left right now is a button to submit it so let's add that as well right below our div let's create a button where the type is equal to submit well let me outline it again class is uppercase the margin top is 15 bg blue does 500 text squared is 100 text is at large font is extra bold the py-4 px is 8 and we have rounded corners so rounded 3 excel inside the button let's write down submit post save it refresh the browser and our button is added right there let's login let's say info i'm not telling you my password again same error must change the end point to forward slash we're logged in go to block let's create a post alright now before we test it out let's hop to our controller for a second i want to show you something we're going to use the create method that we're using right here to show the page but we will use the store method that we have right here to save the entered data so inside the store method we can use the request object that we have right there and the request object is the most common tool for accessing user data in laravel it's very easy to use and you'll have access to all of the ways users can provide inputs to your site so usually before i test it out i just add a dd right here to see if everything's fine and that's the the request save it go to google chrome well we need an image so i have my laptop open right here so let me save it to the desktop all right let's close it off because we don't need it at pixel bay as well add a title this is my new post description is new post let's select a file desktop laptop submit it and as you can see the die dump has been called it really doesn't matter what we're seeing on the screen right now the most important thing is that the flow works fine first things first let's validate the data that we have entered inside our input fields so let's get rid of our dd and in order to do that we're going to pull in the request object access operator we're going to access the validate method so inside the validate method we're going to pass in an array so let's add brackets and hit enter and inside the array we could basically say we have our title that needs to be required let's do the same thing for the description so description needs to be required now the image needs to be required as well but we have more rules so pipe the mimes jpeg png jpeg pipe and the maximum is 5048 kilobytes all right what is the next step we have our image right here so let's save that first so let's create a new variable called new image name which is equal to unique id which is a method that would generate a unique id for us now let's concatenate a dash not a dot but a dash my bad so candidate one more time and let's add the actual title to it let's concatenate one more time with a dot because we do need to add the request image extension so we're going to grab the extension from the current image now what we could do is to dd new image name to see the output save it refresh it click on continue well let's add our title again test test select a file click on laptop submit it and something is going wrong right here so what we could do is to add validation to see what is going wrong so right above our form let's say if so an if statement if the error is any so if there are errors print out a div with a class of width dash five margin is auto an unordered list and let's create a four each loop in there to print out the messages so we want to loop over all errors so error is all as one single error and how do we want to print them out as a list item so let's give it a class of width dash one four slash five margin bottom is four text that's great is fifty the background color is red 700 border is rounded to excel and the padding y is four inside our list item let's print out the error that we have save it refresh the page add the title test test add the image submit it and as you can see right here the image must be of a file type jpeg png or jpg so something is going wrong right there with our image and as you could see on my desktop it is a web p so that's not what we want so let's do that one more time let's go to pixabay let's just click on something this actually looks good let's download it i'm not a robot oh my god let's click on all the taxis that's downloaded it has been added so let's drag and drop it on the desktop well let's add a new file so test test select a file add the link submit it and this is our new image name now as you can see we have a unique id right here and if we refresh it the id will be changed what we need to do next is to move the image to a folder inside our public folder so let's go to the post controller get rid of the dd and in order to do that let's call the request object again we want to say image we want to move it and inside the method we need to pass into params the first param is the location where we want to move our image so let's say public underscore path parentheses folder called images outside the public path method let's add a comma and let's say the new image name so we're going to move this image right here to a folder called public or slash images a cool thing about this is that we don't need to create the image folder ourselves because it will do it for us if it does not exist now the next thing that i want to do is to add a slug because remember we have a column that needs to be filled in called slug and in order to do that we need to pull in a composer package called slug surface which will create the slug for us based on the title so let's go to the cli let's go to the other tab and in here let's say composer require cvie brock forward slash eloquent dash sluggable let's hit enter and it's pulling in everything that we need and our composer package has been added to the vendor folder and in order to make this package work we need to use this sluggable trait inside our model so let's go to the post model right below our has factory trait let's add a new one use sluggable and this actually does not work right now because we need to pull it in so let's say use cvie brock backslash eloquent sluggable backslash sluggable let's create a method right here right below the user method so let's say public function sliggable and i want to add the data type before we're returning something so let's say colin space array we're saying that the method or the return method of this method needs to be an array so let's return brackets now let's close it off with a semicolon what we want to return is in single quotes slug pointer another bracket and the source is title so we want to grab the title and make a slug out of it and that was pretty easy let's save it let's go to the controller because we need to pull in our slug service here as well so let's go to the top let's say use cvie brock backslash eloquent sluggable backslash surfaces backslash slug surface let's go back to our store method right here all right right here we could create a new variable so let's say slug and let's set it equal to slug surface colon colon create slug so a method that we just pulled in close it off let's go inside the method the create slug method accepts three params the first one is the model name so let's say post column colon class comma the second name is the column name so in our case in single quotes it's slug comma the last parameter is the title since we want to convert that into a slug so let's say request title now let's dd our slug so let's say dd slug save it go back to google chrome refresh the page on we just enter test as a title so let's do it one more time create a post let's say this is my title description is post title whatever select the image again submit it and as you can see our title has been converted to a slug now let's actually see if our image is being added or not so public we have our folder images and we have our image right here the image upload works as well the only thing that's left is to create the actual post but before we do that we need to tell our model which fields needs to be filled in before a post can be created so let's go to our post model and right above our methods let's create a new property so protect it fillable now let's set it equal to an array and close it off with a semicolon and inside the array we need to pass in the columns that needs to be filled in so let's say the title the slug the description the image underscore path and the user underscore id save it go to the post controller because we're ready to create our post so to do that let's say post column call and create let's pass in an array we have our title which we want to grab from the request input title we have our description which we want to grab from the request input description we have the slug and what we could do is to get rid of the variable that we created and copy this slug surface or where we create the slug and paste it right here which will save us a lot of lines of code we have our image pad image underscore path which we want to grab from the variable that we have because we don't want to upload the actual image we just want to upload the name of the file so let's do that and the last one is the user underscore id which we want to grab from the art so the authentication method user method and we just want the id let's add a comma instead of a semicolon my bad and right here as well alright save it and i want to add one more thing and that's adding a message whenever the post has been added so let's do that let's say we want to return a redirect to forward slash block so the block overview then we want to say with a message so the first param is message and the second program is the message content so let's say your post has been added now in order to print out the message let me outline it now in order to print out a message we need to go back to our index page because we are redirecting to the index.blade.php and in here we need to create a check so let's go right above the actual content let's create a new if statement and what we want to check is if the session has a message so that's basically the array that we just passed in inside our controller let's say right here so if there is a message let's write down div create a class of width dash for forward slash five margin is auto margin top is ten padding left is two let's create a paragraph where we will print out the error message but first let's give it a class of width dash one four 6 margin bottom is 4 text gray 50 but the background is green 500. corners are rounded dash 2 xl and the padding y is 4. if there are messages let's say curly braces print out the session get the actual message save it and we're ready to test it out so refresh the page actually create a post let's say this is my new post title is content of my new post select a file so the same image again submit it and as you can see your post has been added but i think we need to add a little bit more width so let's say the width is 2 6. but as you could see right here our post has been created our username has been added the created ad is right the title is right and the content is right the next thing that i want to do is to create a show page so whenever we click on the keep reading button i want to showcase this specific post and the reason why i waited with this was well we needed a slug to do that so let's go back to our controller let's scroll down because we need the show method and as you could see the resource list thinks that you will be using the id but what i want to do is to use the slug so let's do that let's change the param to slug and the type is a string you don't need to change this it will work but i think it looks better for now we actually don't need to do a lot inside the show method we just need to return a view of block dot show we need to showcase the blog post so we need to pass that in as well so let's go right outside of our view method line below let's add a axis operator because we want to access the width method we want to pass in one post comma and we want to grab it from the model so post column colon where the slug comma is actually the slug in the uri so the param that you see right here will be grabbed from the uri let me show that to you if the endpoint is forward slash block forward slash this is my first post it will grab this is my first post it will go and perform a query into the database to see if the column slug exists and then it will see if the slug param exists in our database we need to add one more method right here because we want to say that we want to grab the first post save it refresh the page click on keep reading this is fine because it says that the show page does not exist but the end point is correct so let's create the view scroll down blog new file show.blade.php and we could actually copy the entire index page so let's do that paste it inside the show method and let's get rid of the session message because we don't need it well actually let's remove it and let's copy paste the create page i think that's better so instead of saying create post we want to print out the title so let's say post title save it we don't need the errors because we don't have it and we don't need the form because we're not going to submit anything so let's get rid of that now inside the div let's create a span with a class of text as grade-500 let's say by another span class is font dashboard italic text dash grade-800 let's write down the username right here so let's say post user name right outside of our span let's go to the index page and let's copy the date that we have right there so let's create it on the state and the string to time paste it right after the span save it go right below our span create a paragraph give it a class of text excel text as grade as 700 pt is 8 pb is 10 leading dash 8 and the font is lite and in here we want to print out the post description save it refresh the page and i think this looks fine for now well we need to make sure that we can update a post so let's focus on that right now let's go to our controller scroll down and this is basically the same as the create we have a added page but we will perform the update method so insert our edit method let's change id to slug again and the type is a string and what we want to do right here is to return a view to block.edit which we don't have but we will create it in a second and this is basically the same as before we want to say width one single post because we want to edit one post and we want to grab it from the post model where the slug is equal to the log that has been passed in and then we want to perform the first method to get the first link save it let's scroll down and create the view so let's create a new file edit edit.blades.php and actually let's go to the view let's go to the blog page now let's add a button somewhere right here that is visible so we could edit a post easily so let's go to the index page now let's say right below keep reading now since we need to add the edit button for every single post we need to add it inside the for each loop and we only want to show the post if the user that's logged in has the same id as the creator of the blog post so let's say if this set the odd column colon user and grab me the id and the odd column column user id equal so double equal to post user id so we're doing two checks right here we're going to see if the user is even logged in and we want to see if the user id of the person that is logged in is equal to the creator of the post if it is let's create a span of class float dash right inside the span let's create an answer with the text of edit the href will be forward slash blog let me align it all right endpoint is forward slash block forward slash post slog and right outside of the curly braces forward slash edit so we want to edit a specific post now let's give it a class of text dash gray dash 700 italic and on hover colon text as gray dash 900 padding bottom is 1 and the border b is 2. save it refresh the page and this is all right now let's create our form oh let me go back just click on edit all right now let's start editing our edit page but this will pretty much be the same as the create page so let's copy everything paste it inside the edit page scroll up let's change the title to update post we do want to keep the error messages and right here we want to change the form action to forward slash block forward slash post slug so a specific post and here comes the tricky part we want to perform a put request since we want to update something and to make this work we need to add a new method so right below our csrf token let's say at method and in here we want to write down put and this will transfer the post method that we added to our form to a put request now let's go over our input fields because we don't need placeholders so let's get rid of it but we do need a value so let's set that equal to curly braces post title now let's do the same thing for text area but a text area can't have a value what we need to do instead is to add larval blade templates in between our opening and closing tag so let's say post description save it or refresh the page and this looks fine so we can edit the title and we can edit the description right now we're ready to create our edit controller or the update controller so let's go back to visual studio code controller update let's change the param to a string i mean a slug excuse me the data type is a string let's say slug first we need to say post where the slug is slug then we want to say update it we want to pass in an array and we could actually go up and copy everything that we have right here for the create method because it's pretty much the same paste it right inside of the update method and let's return a redirect so let's say return redirect do forward slash block and we want to pass in a message so with message and the message is your post has been updated all right let's save it and let's try it one more time let's change the title to this is my new updated post submit it and oops we have an undefined variable now i don't want to update the image pad so save it refresh the page and you can see that the post has been updated sorry for the terrible ui that i have right here but i don't want to change it anymore and you can see that the title has been updated now we could add validation here as well so let's go to the create copy the request validated paste it right above the update method let's get rid of the image save it go to the edit page and let's get rid of the inputs field because we don't want to edit the image save it refresh the page edit it one more time so let's remove updated submitted and this is my new post has been updated again you need to delete a post as well so in here i want to pass in the slug instead of the id we want to say variable post is model post where the slug is variable slug and then we want to say post delete what we need to do then is to return a redirect or we could actually copy the redirect that we have right there replace it we want to pass in a message but we want to say your post has been deleted save it and well we don't have anything on our ui to delete the post so let's go to the index.blade.php and right below our span let's create a new span but we can't copy the while span and entry that we had because we want to perform a delete request so we do need a form but let's say span the class is float dash right in the span we have a form let me align it with the action of forward slash block forward slash post slog so a specific post then we have the method which is equal to post now in here we need to pass in the csrf token and we want to say that the method is equal to delete now inside our form we need one button so let's say button the text is delete class is text as red dash 500 and the p right is 3. now let's give it a type of submit save it refresh the page and the delete button has been added let's click on it and you can see that the post has been deleted now before i wrap up the video let's log out i want to want one more validation and i could go on for hours and hours to add more validation and more interaction and add javascript or view or react but i just want to keep it simple and you can build on on this page that i just created for you if we go to the blog page we're not able to create a post and the delete and edit button are gone and if we click on keep reading it's fine as well now the issue is that if we change the end point to forward slash blog for slash create we're still able to create a post so let's somehow get through that what we need to do is to go to our post controller and right at the top we need to create a constructor so let's say public function double underscore construct and in here we want to say that this middleware so we want to call the middleware and we want to say that the odd comma array brackets single quotes accept is another array and in here and in here we need to pass in the methods that a user can access if they're not logged in so in our case it's index because we're just showcasing all posts and the show method save it go back to chrome refresh the page and we have been redirected to the login page now if we log in you can see that we can create a post now i want to change two more things in here the first thing is in the login controller i want to get rid of the redirect to the forward slash home page because we don't have that page we can command click on it but we could also go to the app providers and in here you can see the rod service provider as you can see the endpoint for the home content is forward slash home so let's get rid of home save it so let's go to the browser let's log in write down my email my password login and we have been redirected to the forward slash instead of the forward slash home page now the last thing is on the blog page and i want to change the image that we have right here so let's go to visual studio code close off the route service provider go to the index.blade and instead of having a static source let's remove it let's say curly braces asset inside the asset method we want to pass in the path to the image folder so images forward slash and let's concatenate the post image underscore path save it go to the browser refresh it and this is the static post that we created so let's delete it let's create a post let's say this is my new post my new post post description as the description select a file now select the lake submit it and as you can see our image has been added dynamic as well thank you for watching this video now i recently created a patreon where i will have my source code the reason why i started pratheon is because youtube is actually the only income source that i have online and i'm making tons of content for you guys so if you would like to support me subscribe to my patreon it's not expensive and if you don't want to subscribe don't be worried i appreciate every single one of you that watches the video that being said thank you for watching the video if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit that subscribe button

Channel: Code With Dary

Views: 53,434

Rating: 4.9603658 out of 5

Keywords: laravel, laravel 8, laravel php framework tutorial - full course for beginners 2020, laravel 8 tutorial for beginners, laravel php framework tutorial full course for beginners, learn laravel for beginners, learn laravel step by step, laravel full course, php laravel youtube, laravel tutorial youtube, how to learn laravel, laravel tutorial 2020 - the complete developer course, laravel tutorials from scratch to advanced, laravel 8 blog, how to create a blog in laravel 8

Id: HKJDLXsTr8A

Length: 90min 27sec (5427 seconds)

Published: Thu Feb 25 2021