Blogging System with Laravel & Voyager Admin Panel | Free Source Code

hello welcome to vfix technology hope everybody's doing good this is just a quick tutorial how the beginners or maybe the guys who knows LEL how they can create a quick admin panel and create a blogging system instantly and save a whole lot of time in order to do that we're going to use a package name Voyager admin panel that's a pretty famous one and it is available on GitHub has over 11,000 Stars so let's jump into it let's see how we going to go through so I just made a game plan where will make four steps and create a blogging system easy peasy for front end we're going to use the bootstrap template and for backend it's PHP LEL Version 9 because n as of now the LEL 10 is in the market but this package supports Version 9 only so far maybe in future you may see the new update so let's jump into it section the step first going to be install LEL let's make it happen I'm going to come to one of my folder directory and I'm going to get you all the resources links to my description of the video so let's create a project Name by the name of Voyager since we are using Voyager admin panel and let's install the LL Version 9 it will take some time maybe a minute or two let's wait for it in the meantime let me open the documentation so we can take the reference from here okay hopefully it's done yes it is let's jump to the directory voyagers and now time to install the package composer require TCG Voyager install again it'll take some time let me open the project into the vs code and I'm going to change the details about my database I have created a database by the name of Voyager let me update it now we can install the Voyer with some dummy installation details and it's done that is it so our admin panel is good to go that's our default credentials admin at admin.com and password is password let's start the server phpt serve that's the default LEL installation I'm going to go to forward slash admin and the default installation user name going to be admin at admin and password is going to be the password there we go so the very first thing you're going to see this is a complete solution for an admin panel everything is inbuilt but I see a little situation the image is broken because the reason is the URL so let me go here stop the server and we're going to come to the EnV file of the directory LEL app URL is different here I'm going to change it to the local one 1271 and Port is 8,000 let's save it and we have to restart the server as you know if you make any changes into the EnV file we have to restart the server I'm going to refresh there you go it's talking our language now the admin panel is ready in the admin panel you can see how many users it has inbuilt user cre create function user roll function media it has a gallery inside it post you can create articles which is supposed to be Google search friendly Pages you can create Pages you could have categories in the article and there are so many things you can explore even if you go to settings you can change details from here I'm going to attach the link of the Voyager admin panel the agenda of this video just to get how to kickart and create an instant blogging system via admin panel of the Voyager so this is working fine now let's jump to the step two okay step two is done my bad I apologize now we're going to go to the step three add front end template let's figure out let's make a quick Google search bootstrap blog templates I already downloaded it but just to show you how I found the one that's the one which I have used it so I'm going to put the link on the description you can download it I have already downloaded it it is right here in this folder start board strap clean blog I'm going to open it so the very first thing which you need to understand we going to copy all the Assets in the CSS file from here and let's come to our larel directory we're going to go to public and will'll paste the assets CSS and JavaScript folder here then let's open any of the file let's open this index and we're going to do the control U so get the source code copy everything thing let's make it more Dynamic resources folder views folder I'm going to create an another directory let's name it layouts and under layouts I'm going to create a file named app. blade. PHP let's paste it done so we have the front end template pasted that's the base file I'm going to change some details here here let's change the CSS link asset the lur method done let's come on the footer there's a Javascript file again copy this use laravel asset method to get it done now it's Dynamic so let's figure out how we can make this template as a master template and we we going to fetch the data on pages accordingly so that's the main component that's the footer let me rep it that's the headr so I'm going to copy this section from here and create a new file let's name it index blade. vhp we got we got to extend a file named layouts folder app name name if you see that that's the layout and that's the name of the file layout. app this is how we fetch the master blade now we're going to go ahead and inject a section named content let's paste this what we have copied from there so if you watch it closely it's just a main body wrapper and the header of the specific page rest head the head foot the CSS going to come from the layout so under layout what we are supposed to do we have to inject the body here so I'm going to say yield function and let's name it content so keep in mind every time you create Pages all you got to do just extend this file and under content section whatever you inject it automatically goes to the base template hope it makes sense to you if any question feel free comment below and I'll try to help you with best of my knowledge anyway this homepage supposed to be working fine let's check it out how it goes so we have to do few more steps now I want to [Music] create phpr Artis make controller and let's name it home controller so this going to be the logic it's app HTTP controllers the controller which we created under it let's create a function name public function let's give it name anything whatever you like I'm going to go with index and I'm going to written a view and we have named it index if I'm not wrong and if you see under resources views the file name is index one more last step we are supposed to do we have to define the route I'm going to take off the LEL default one let's use LEL route for said get method home and in the array we're going to pass home controller the class which we just created and the function name going to be index and let me give it a name just make it easy so we can call the routes I just named home so I created a new route by the name of home it has the controller and it going to follow this method index so we need to call it to use app let's pass the name space HTT let me see what it is HTTP controllers and the name of the controller which we just created home controller let's start the server hope it should work let's see what happens okay I'm going to go to local server something is missing we can find the Home controller here let's see okay my bad I just made a spelling error perfect so this is a static homepage which is now the next task is to make it Dynamic we're going to keep this part as the top part is static and this blogs are just static here just the markup I'm going to the data from the database because if you see here in posts we have like four published Post in the admin panel so what is the game plan right now grab the data from the admin panel database pretty simple first we have to create a model PHP Artis make model let's make model and I'm going to name that posts so it going to come into here app model and post now under our controller under home controller which we created on top let's fetch it use app models and let's name it post that's what we got we just created now all we got to do just use it I'm going to create a variable named post use the post for S all and let's pass it to the blade by the using compact method let's name it posts so now post variable is going into our templates and that's the key posts so we going to come to the homepage and let's fix it let's figure out how it looks like right now so we have to run a loop on this one and it will replicate all the automatically all the data going to come in the same format so this one is the main let's remove rest let's check it if it worked well we have to restart the server I apologize and it did work well so we have only one left now run the for each loop on this one only copy for each the variable name the kyv pest posts as let's keep it post paste it I'm going to give the Title Here post title and let's pass the exert to post exert these are the details coming from the database if you uh come here to the database and if you see posts let's go to the structure it has the details you can see author ID category title and excert is is a short description of the posts so we going to use the same values to patch it let's check it out if it works refresh there we go now we have one two three four posts excert for the fourth post is little bit large so I'm going to show you one small magic we can use St Str limit function of PHP St Str limit as the variable and the value let's keep it 50 characters so it going to make it short takes only 50 First characters let's see if it works so instead of this we can have only 50 characters perfect now it's just 50 character you can see so somehow we did get the posts list now time to grab the post details on a specific post when we click on it we just want to get a single post page now we can change some more details here you can set up the dates something like uh let me put post and it is supposed to be created at let's use a format function date month year you can see or maybe let's make the months capital M looks more visual now it shows the day today month and the year easy peasy you can change the you know the author details as well you can play around I'm going to link the documentation of this Voyager admin panel that's simple LEL details now let's figure out how we can create a single post page again we going to jump to our admin panel markup and let's click on one post that's the post detail page again shame shortcut control U we can need the header and the article part only we already have the footer and top bar Nar in the master template app which we created so in the views we're going to create one more file let's give it the name post detail do blade. PHP extend the section extend what layouts. app under layout folder get the app let's inject content we're going to say section content let's stop it and and under it we going to paste the content so far it is a static one just to check let's figure out how it goes so what we are supposed to do let's define the function public function let's give a name post detail and we going to pass the request here uh let's get it post and post where slug is request slug that's a we slug method of LEL and first or fail it should be here let's dump it let's see what happens DD post to array and we are supposed to create a route for that so route get method and we're going to pass what let's say slug so this request this slug goes to the request here and it captures that Slug and match it with the slug in the post and get us the data and uh let's make it happen again same controller home controller and method was post detail and let's give a name post. detail it should work all we are supposed to do just pass the route now if we come here under the loop just under the URL method we're going to say let's give a URL route and the route name we defined post do detail and we're going to pass post slug so it this slug goes to here and this data goes to the request from request it filters the data let's see what happens hope it should work refresh now if I click on it boom it did work we got ID one and the details if I click on the second one id2 so it is talking our language now instead of D dump we going say return View and it was post detail the name of the blade and we have to pass the key as well the compact method and pass the value first now if we refresh and click on it we got the single page which we already set up but it has the static values let's make it Dynamic so we're going to come to the post blade let's start from the top header let's give it the name to the post post since we have the value we pass the variable here if you see that post is under compact we can use this variable now post title [Music] and let's use post s Str limit same function post excert and let's make it 50 characters and the date was created at and let's use the format function day month year and finally under body we going to pass the details of the body so it is supposed to be post and body hop everything supposed to to be dynamic let's refresh the page there we go that's the title and it is the slug here's the title it is short description it got the date into our format and this post has only this much body let's click on some other one it has some extra content but the content is dynamic let's click on this one so everything is working as we want we have the list of post we have the post single post details but this background image seems to be static let's fix it so under this Voyager it's pretty simple if you see the documents you can easily get it I'll tell you how Voyager image and post image so that's a method Voyager image is a function under Voyager admin panel and just pass the variable image name and let's refresh perfect it did change it if I come on the home let's click on the very first article First Title First slug image and the body go back second second title second image and second details everything is dynamic here and it's working perfectly fine this is not used old POS so I'm going to take it off from here great almost ready let me fix the top NV bar as well it's under the app layout and app and here let me pass the route name which we gave it was route and the name was home now if we click on home it bring us to the let's check now great now there are certain pages like about us easy simple very simple if you click on about that's the template I'm going to do the control U all we need just head fun head and the main copy let's create a new file name about. play. PHP so let's extend the file name layouts app let's extend the section inject content stop and that's it so that's just the static page about us now we have to do two more things create a function public function let's give it the name about just written view the page name going to be about and finally just create a route route get let's pass the slug about us and the controller going to be home controller class and the method we have created is about and you can also Define a name so you can easily use it on the routes and let's name it about let's check it out refresh and on the app let's in the about URL we're going to pass this route route about hope it should work let's refresh I click on about H seems Miss we missed something let me make sure home controller return view about about page layouts y okay it was a little mistake and I just fixed it so we are good to go about Pages ready let's make the contact page as well I'm going to go to the templates contact back page control U all we want just the header and the main territory copy come here under views you'll create one more page let's give it the name contact. blade. PHP under blade we going to extend the master template then inject the section content and paste the specific area about no my bad it's contact okay cool and two steps more Define a function and Define a route public function let give a name contact return view name file name is cont Tex now finally Define the route route get let's define the slug contact us and the controller is home controller CL and the method is contact and let's define a name contact and just put this link into the main file in contact here I'm going to do just pass the route contact and hopefully everything should work fine let's check it out click on contact we got the contact page that's static about page is static homepage Dynamic homepage has Dynamic blogs on it if I click on any blog we get the page specific details and this is pretty much it so from this admin panel you can create more and more content and it going to keep showing on the homepage let me show you let's let's create a dummy content hello this is the test post let's get some content from anywhere okay okay we have body excert as I told short description status published slug you can change if you want categories you can add the categories from here categories but I can pick anyone as of now featured let's Market featured and let's pick any random image and SE title meta description keywords you can check it out create post now great we have added a new post and it is directly linked to our front end if I refresh the homepage we will have a new post here if I click on it that's the image we just added and that's the content that is it I really don't want to make it more long this video if you have any question any query any doubt feel free comment below and I will try to uh in the description will post all the resources link thank you so much

Channel: VFIX TECHNOLOGY

Views: 738

Keywords: php, laravel, adminpanel, laravel tutorial, free admin panel, blog, bloggin, laravel admin panel, php admin panel, coding

Id: M9tdYpf6FhA

Length: 33min 44sec (2024 seconds)

Published: Thu Oct 12 2023