Create CMS Website with Laravel Statamic Full Tutorial for Beginners

hello my friends welcome again in this video we are going to start a new laravel series and we are going to build a laravel cms website with a statomic cms if you go to satamic.dat and here is our the website and you can navigate inside the documentation and see what you want so for example if you go to the installation this is how we can install the satamic with the help of composer so you need to have the composer installed okay so just copy this command and go to the terminal navigate to the directory and first install the okay after that you now can run the statomic new and the name of the application you want to create so in our case atomic new and i'm going to add a name laravel okay and which starter kit would you like to install from and this is the satamix atomic is blank you have the starter kit but we are going to install the first one the black one and i think okay now it's going to install the statomic website you can create via composer so compose the create project and statamix atomic in the name it is here is the official starter kit so a beautiful multi-author capable block so this is the block a super clean mark down focus block so is for the mag down and all other things docs quick start your documentation website so if you want to want to start a documentation website you can choose this one a boutique one as a simple commerce okay if you're going to the laravel and open with visual studio code i'm going to zoom it yeah okay this is this one and this is the goddess laravel it's a laravel application and one more you we have a user here so you see now it's uh empty and we have this content assets is going to be here and this working with the dot jump file so we have a collections and pages here from now we have only the home we have a globals and the navigation okay navigation here taxi name is here now i want to register a new user and we need to go to so just around this okay and go to the quick start here and we need to run this php please make user copy this one run it here and give it the email for example test garage test name laravel and password okay you can put your password here and you want this to be super user yes and now the user is created now if i go here and navigate to the laraveller the test here is the statomic website we have the documentation there get support from satanic con and control panel so if you go here you need to pass the email and password you added here okay i add this email so pass it here and the password and login and here is the like uh wordpress the cms of ceramic and you have the collection here for now we have only two pages and we have only the home page which is welcome to your new to your new statomic website again another test and we have a navigation this is not here we can create here navigations we have a taxonomies here assets and we can create folder upload blueprints and we are going to work in the next video with that so we have a three blueprints we have pages assets and the user and pages if you go here you have a title this is pages and the section for my section in sidebar submit section has title content author and template and sidebar has slug and parents so if you go to the pages here and home page you see here is the title content author and template you have a default layout and errors for four and here is the slack and published or not so you go here inside the pages so the sidebar dslog parent here is the mind so you can create a field one more field for example here and add there for example i'm going to add just text and leave it and i'm going to delete again so if i finish so we have the text here say this one and now if i go here home and we have a text okay in the next video we are going to do more of that remove now save and you go here you don't have so you can add how many fields you want you have already grit select toggle and here you have an option for only for text for example here for media here and relationship with assets collection entries form sites and other stuff okay i think this is this video is going to be enough for now and yeah you see i see you in the next video if you like please subscribe to my channel and share with your friends thank you very much and see you hello my friends welcome again we are in the part two now to work with laravel statement cms we are inside the dashboard here is our application and i have opened the statonmic.dev to see the docks here and here we have the configuration and inside the config we have a statomic folder and all the files of statomic so if i go to config statomic and we have all the configs for satamic and if i go we have the api for control panel forms loud loads search sites if you go here we have a default one and the name is going to be inside the what is inside the config app name and if you go to the config app name you now you know now we have the default is data mix so if i change to the and what is inside the dnv app name okay if i go inside the univ and we have the satamic here we can change the laraveler save and nothing happened here and you know because if we go now to the resources inside the views we have three files the default antlers html the home one and layout and this layout one so if i change this to sorry site name say save and refresh now and you see we have laraveler but i'm going to leave to give it the title over the title of the page or the site name if you don't have okay and this layout antlers is like a default layout in laravel applications so here we have the basic html and here we have the yet content laravel but here we add template content okay so anything we cannot can render here if you go to the so if i change this remove this one save come here refresh and we are not having this in the center because i remove it save refresh and this atomic control panel and that links are coming from the [Music] home from here on antlers and to show you inside the dashboard we have the collections and for now we have only the pages but if i go here edit collections okay and here we have the template and by default is going to be default or inside the layout we have the layout page so this this layout here and if i change for example to four or four 404 and save come here refresh we have a 404 page change the layout and save refresh okay we have the dalvin css here and the site.js and that's coming from if i go here the webpack we have a resource.jsi.js here and inside the resources gis site.js now we don't have anything here when we have italian css so if inside the css italian css here we have imported the base of the admin component and utilities and we import the site which is this one here for now we don't have anything but if you make changes here we don't need to add inside the web component webpack but by default it's going to is important that italian css is going to add inside here okay so i want to render [Music] dynamic data here and we go to the pages home where you see we have this welcome to your new statomic website okay but in the home because here we are the template is home so inside the home here we have this control panel and the documentation and get support okay control panel documentation get support if i change the template to default one and if you you see we we have got a listing or continue editing when we save so if i say we i'm staying here and refresh now and we have the text here okay welcome to your new statomic website and if you go to the default one so we have only the content and if you want to add the title of the page we can add here for example just add it here and so this is the title refresh and we have a home here and if i change the title to [Music] home page for example just to make a change refresh and we have home page here you see it's not a very good styles here so if i add h1 with the class of text to excel and text [Music] green 500 for example okay and here at the paragraph content save come here refresh and nothing happened why nothing happen if i need to run maybe the npm and that okay we need to add the npm install to install the dependencies because i don't have i don't make this before so install all okay npm run dev here okay yes if they refresh now yeah now we have a home page change but we have in line and that's it inside the layouts we need to remove this save come here refresh and we have that one uh maybe we want that here a div with a class of marks with six excel and makes auto save on here refresh yeah now we haven't stayed in the center okay and that's it for this video hope you enjoy if you like please like the video and see you in the next one thank you very much hello my friends welcome again we are in the part three now to work with the laravel statement website here is our application we display the homepage title and content here is the dashboard and inside the collections we have only one collection pages and here we can create a new collection over if we go to the pages we have only one page we could this is home page okay this one and i'm going to create another one so i create entry and i'm going to call it uh about about us and this is about us page for the content the author is laravel and with the you go here with the with satanic free version you have only one user if you want more users you can go for the pro the user has the member account for to your site application okay so if you want more user you need to go to the pro features okay [Music] and the template here we have a author which is template i'm going to leave it default one and slack here is what the title or you can change but i'm going to leave it as it is and here we have create another one so save and i'm going to create another one so another one we're going to contact contact us and this is the contact us page okay and the same thing here well default one slug is contact us and now go to the links thing and save and publish here we have about us contact us you go here and slash about about us here is the title and the content if i change this contact us yeah this is the title and the content okay if we go here i want to create a new collection and this is uh for the basic of statement series so i'm going i'm not going to go deeper just to show the basics so i'm going to create a new collection and i'm going to call it the posts and here we said we we recommend a blue name so not post but posts and create a collection and go here we have this button to create our entry or first i'm going to scaffold resources and if you want a blab blueprint you can check this so i need a book i'm joking for boss if you need the index template it's going to create a new index file inside the post directory in the in the views directory so if you want the index you can checked and the same things for the show so if i open the terminal and sorry [Music] okay open with a [Music] gold and here is our application we need to zoom it yeah inside the resources we have views and now we have only the errors and default home and layout so when i go here if i create now i'm going to we are going to have a post directory in this index and show file so if i create this okay go back and you see now we have a posts here with index antlers html and show this assignment okay now go and go configure collections here we have if you want to enable publish dates i'm going to enable that and for the rubble i'm going to leave it as it is blueprints is post okay template is going to be post show layout is going to be the default layout road is going to be if you've got collections and yeah here we have a routing and for example if you're going to go to the blog slack and it's going to create this this okay so here you can go for the posts and slack okay save this go back now and we have posts here and go to the blueprints inside the box we have the title and if you go to the creator entry and we have only the title okay so what we need for the post we go to blueprints pose and for the pose we need here we can add fields so create field here and for the pause we need the author so when we have users and i'm going to call it a author okay and this is the variable name of the fields and the maximum is going to be one we have only one after if conditions and validation so if you want validation like a boolean date or required so you cannot click required and this is going to be required so finish another one for the content and is we have a markdown or bard this is more like here we have uh for the inline code code log images tables and displays this html here we have sets but i'm not going to do now and with this finish that we have validation conditions but i believe it okay title author part what we can add more here uh yeah we need the image so create a field here and we need the image various assets okay we need the a filter image and this is the variable name container we have only one container for images assets and amongst this one we need only one for the hello uploads yet and this is finish this and save okay now i go to the post create a new post and for example laravel is [Music] awesome choose an author and we have only one type something here content and we can bolt what we want we cannot link here we can browse images or upload file here if i have something here okay and it's uploading it's showing here the slack and the date publish and now we have a if we go and check this view now we don't have anything because inside the show if i see title here save refresh and now we have a title okay one more thing it's going to be long video if you go here and go to the github okay i can i want to add this in the repo the github repository because someone comment and need this so if i go here and test okay create this repository here and i'm going to add it and pass in the in the description below so this is for this video if you like please subscribe to my channel like the video and share with your friends thank you very much and see you in the next hello my friends welcome again here we are in the our application this is the homepage and here's the dashboard in this video i'm going to create a navigation so i don't want to go to the page about us and contact us manually okay so if you go here and inside the collections we have pages and posts inside the pages we have about home page and about us and contact us i want to create one page for the post so create an entry here and i'm going to call it boss i'm going to go pause index and okay save and publish and now we have a purpose you'll see here we have a list with checks but now you can drag and drop the it's like a menu to reorder that okay so i'm going on the post to be here and about to contact us over there and now i want to go to the code here is our code and the layout inside the layout i want to display the navigation and if i go here i want to check to have a simple and i think we have here yeah okay this one and copy this code and pass it here please save and come back not about us but okay here yeah we have blocks and links okay first thing and change this step lavender and underneath here to go to the home page here is our links i don't need the button and save come here refresh okay now there are available and we have this lastly if you go to the satamic dev and tax slash for navigation and here is how can display the navigation for the collections collection pages okay so just copy this one come here and pass it here and we end with this one okay and we display the title here okay just private title and strap url save go here and refresh and now we have about us contact us and posts here and this is because i don't make a save changes here okay come here refresh and now we have posts about us and contact us okay if you want to have uh the home page here so the home page here i think is yeah down there include home to true sorry sorry come here and include home tutorial let's say come here refresh and now we have the home page and i won't change the name here no home page but just home uh save okay very fresh now and yeah we have the home here the post is going to the post about us about us page and contact us okay now we're going to the post we don't have anything because inside the post index we're not showing anything so if i want to show the title of come here refresh and we have the title of the page pos and now here inside here i want to display all the posts but in the next video because it's going to be long videos so for this video i think yeah okay just created the navigation and created the hump post page here and reorder them if you like please subscribe to my channel and see you in the next video thank you very much hello my friends welcome again here is of our application and here is the dashboard of our statement website so here we have the homepage posts page about us and contact us now inside the post page i want to display all the posts here and after that when we click the the post i'm going to go to show the single post okay so our first thing here inside the collections uh posts and we have only one post here and we have the outer and before that i want to pass the feature image maybe here i think it's more nice here or before after the title okay so if i go to the blueprints pause here and maybe yeah down there okay save and the part i'm going to tear another down save this now and go a little pause and click that okay i think it's a nice one here is the feature image the date and the slack is the bird outdoor and not that okay i want to create another one so i'm going to go to the ipsum and create some some entries here okay and the author is vendor bros files we have only one i'm going to leave it or just now i'm going to create upload another downloads open this one okay and create another one save and create another one come here copy this uh copy this one and another elder here sorry upload image plotting images here and now we have three posts i'm going to leave it for now and okay so if i go another code and here is the default handlers but inside the pos and we have index and we display only the title okay so where is that possible display under that of the page but i want to display the collection so if you go to the statement and search for collection here inside the tax code contact okay so tags and collections and here we have an example with collection from blog or collection blog in our case is uh so i'm going to copy this and pass it here and now for the blog the thing is yeah okay here it's from the post and replace now yeah we have three titles because we display the title here but i want to display the image and so on so if i go here and i'm going to search for the balloon css article and yeah we have something here and then i want to display like this so copy the code here and okay we have a table and here we have the article but i don't want all of that we need okay and now inside this i want to do um and if i save here refresh and collection blog yeah i forgot here not block but uh post refresh okay now we have three but the title is not our title if we go to the articles here and we have the image the title i want to add our title [Music] sorry and refresh now yeah we have our titles leather and awesome away to yours and okay now we need the author name here an image and the image is [Music] what we add here so if you go to the blueprints and inside the post so feature image and you know we have this so this is a variable for the image so if i come here and add the feature image okay refresh now yeah we have the image uh what we can do up and we need the author name so the output name is what we add the blueprint sorry i'll go here and authority we have the author and where is the author router after name so after if we come and check this and now maybe we need to add you know like this uh maybe like this sorry name a refresh yeah and uh the date here okay refresh and yeah we have the date what can do in the more update here and yeah the image of the author is not our image so if you come here alpha name and [Music] author uh what what the author has so if i go here and provide here what we have we have a avatar but we i don't have navata so i'm going to i don't know if i have navador so just search for avatar here and download the avatar [Music] okay i'm going to download the first one okay go here and upload this avatar now okay save and in our code our outdoor avatar okay refresh oh yeah the avatar is very we need to add the age of eight maybe and with eight and if i go and refresh image class h8 and width 8 and what yeah now we have this okay and now i want to when we click here to go to the single pause so where we have a hand shaft here and we put the url and that's it and another one for the title or no yeah we use for the image sorry for the image we have the url and refresh now okay when we click does this you see down there we have that and click here now okay click here yeah and for this video that's it see you in the next one if you like please subscribe to my channel and share with your friends thank you very much hello my friends welcome again we are in the part six now to create laravel cms website with the statomic cms here we have the front end of our application the home page the posts about us and contact us in the post we display the post and now i want to add the imagination here and when you click here for now we display under the title but i want to display the image the author and the content as well okay and for that i have search and inside the italian components i find this one for the to show the post and procrastination this one okay go back to the code here we display the all the posts okay and find that one to display the title of the post of the page okay just [Music] now if you go to the documentation of statement and we have front end here tags collection and here we have imagination and this is how we can add pagination so we have collection for the posts what we have here and add limit and paginate to true and add the scoping as post okay go back and here now remove this one at the collection of the posts and the collection of the posts and adhere the paginate and we check if we have no results but otherwise a display here okay i'm not going to copy this just cut this one and add it here and after that add the post collection so we have a scope as a boss and add it here and the div remove from here close the post and close the div here okay and then a little bit and if i go now here and refresh yeah everything okay now i want to add the pagination down there and refresh to see what we have yeah we have validation but for now we have only three posts and if you go here we limit to 10 if i limit now the two refresh yeah we have only two uh next and preview and you see we have the page two now here and page one okay but this is not a very good style so i'm going to copy this one and you find this inside the italian components if you want okay show code and i'm just going to copy this and pass it inside the paginate okay remove this one and this i want to make it a shaft for the previous page and this one for the next page let's chef next page and here i want to display the this is recorded but i want to display the total items okay and that's it sorry remove this one and add it here uh total items and remove this well here refresh and yeah we have the data items of three but we have the background to 200 or that is not showing the background if i just change the bg grade of 400 for example and the same thing here and the same thing here okay come back refresh and yeah we have lisa okay now i want to display the i will click here to display the post and i find this one inside the italian components show code and first i we have a here we have a header i don't know header i want only the this and so i don't want the footer so yeah only this one copy go to the show method show hunters and pass it here refresh and this is how this look and now we need to modify this okay go up here here is a title add the title here uh we don't have any attacks or categories so i'm going to leave it hardcoded for now and the image i'm going to add the image okay we have a feature image and here is the okay here is the content and i'm going to add the our content is part for for us okay and he is the author of our name and the role what but then and display the role here just see what we have if i refresh okay this is the content and learner and we need that the image of our author so we have author avatar refresh yeah it's a image for now we don't have the follow but we can add the follow so if you go here and make this ash sraf and https twitter.com and there comb okay i refresh and it's the same thing if you go here to the post and find this one for example here choose another one okay here's the title and here is the content and the image okay you can style the how you want that just to show you how we can and when we display that cryptocurrency here i want to display the the date and just add the spam another date here refresh and okay here's the date and this is what we what i'm doing for this video if you like please subscribe and share with your friends thank you very much and see you in the next one thank you hello my friends welcome again we are in the part 7 how to create a cms website with us atomic and here is the front end we have homepage posts about us and contact us in the post page we display that pause and i got the imagination here and when we click to the post we go to a single post and show the post the title the date and here is the hardcoded tag but i'm going to change this now and the content and the user who gave that post okay but before i want to change the look here so for the number if you go to the views and layout here we have a body and just intently pick this one so we have a body with a bg grade 200 i'm going to change the 100 and the header we have [Music] i'm going to add bg blue 500 and i'm going to change the text the xb100 save come here refresh and yeah i'm going to leave this how it is okay there you go boss yeah okay now i'm going i have opened the statomic dev and inside the core concepts you have the taxonomies here and you can read the documentation after work how to use them okay and now inside the dashboard we can go to taxonomies and create one and the recommended use title is plural so in our case tags create that okay and configure taxonomy created the blueprints for the tags and here we can choose the collection i want to use this taxonomy and in our case i want to use only for the post save now and if you go to the collection pause okay and here we have the tags okay so for example save level and now we want to display here but before that i want to go to taxonomy and tax we have only data i'm going to create another one for live wire blade wire and create another one another one for vue.js save go to the tags and we have three okay if you go to the code inside the content uh taxonomies we have title tags and the folder tags we have the live wire and view js dot em file title of data blueprints and so on okay learning yeah good now i'm going to go to the collection and add to the boss and add tag here so this one i'm going to add the livewire save and this one view js okay now inside the code uh i want to go and i don't i don't think i have said you uh the statement don't store the data inside the database but inside the the yam file and md for the post for example if you go here content collections and pages and posts and you have here the title and dot md so we have title also birth okay and here we have tags and the tag is added to this one okay so inside the posts show where we have this cryptocurrency here i want to display the tags that have this and here we made a loop and i'm going to end that and here we display the title and here the url save this one and go here now refresh and now we have the level here and you see the url and down there okay so if i go to the this one we have ujs and you see here download we have posts tags and view js so [Music] your collection url taxonomy slack for example product stacks or in our case block tax index or in our case pause tax and now we need the index and or if we want to down yeah here so collection taxonomy name in our case is collection exposed and taxonomy name is bugs and index okay so if i go here inside the post go and create new folder call it tags and inside it new file for index antlers html and another one for show show hunters dot html okay and we can display like this one url terms and in our case it's tax not terms but copy this and inside the index no times but tax and save and if i go now clear this now we don't have anything but if i go to the tags and yeah we show the all the tags and i cut this and not inside this section with a glass of margin top then and not here yeah now i will add the plus here with margin two and add in two and dg blue 500 save refresh okay class here with uh paddington save refresh yeah here we have other packs we can add the h1 here for example then add the title of the page of the collection and we are his tags make another class with the padding of all and text for excel save refresh yeah here stacks and livewire i don't have anything now but if we go here and here's how how we can display the entries for that tag so show here and just sit here and this save and if i go and refresh we have data that is always on here for the live wire if you go back and check the level we have this one and for the ujs we have this one but here i want to add the like a card and inside the index of the pose so we have this column and i want to do the same thing inside the show here okay and we need to add before that this div not the url but not the us sorry okay and here we close to the div and if i save and come here refresh yeah we have this go here go here yeah but i think it's better to create a component or in statement we can use partial and i think you can find somewhere the partial huh if i search views yeah and how you can create a version okay so it's good to add the we recommend refusing any views intended to be on the user especially with an underscore okay so inside the post i'm going to create a file call it uh underscore and card dot antlers stmn okay now i want to add [Music] here that this one cut from here and pass it here save and now we can add the partial line here like this so and post dark okay save and where we are inside we can do the same thing for the sorry for the index okay and then then save and if you comment here refresh yeah we have the same thing if we go to the pause okay that's okay that is good and this is always where tax it's going to work what we can show other things here i think this video is enough for now and see you in the next video if you like please subscribe and share with your friends this video thank you very much hello my friends welcome again and this video i'm going to create navigation and add the search functionality here and with that i think we are going to finish this series so we have an application here's if you go to the layouts layout page and we have an enough collection pages so we add the pages here and there is a problem so if we create a page here and we can display can this be displayed here and for that i'm going to create a navigation and we recommend a recommend name that matches where it will be used like my number good enough i'm going to name it mine now and the handle is going to be mine now okay create that configure navigation and choose the collection i'm going to choose pages save and go to my name and link into entry i'm going to choose all pages here reorder the pages save changes and now inside here where we have a collection so if you go to the documentation and inside the navigation you can read the or you can use okay i'm going to remove that and not the mine enough here the same thing for the closing mine now and save this one come here refresh and we have the same thing okay go to the pause about us close um yeah now so when we here we are inside the miner yeah if you if we don't want this one we can remove and save changes come here refresh and yeah we have only three we can add one and link to entry and this is the contact us select we add the contact us save changes and yeah we have it here okay now the second one i want to add the search functionality and if you go here you have the search here and we need that form okay and i'm going to add inside the layout and before the links here save come here go to the and here it is but don't need the button i'm going to add some classes here and i'm going to add the margin margin left of 4 padding 2 and text is going to be okay 1 900 and maybe around it and okay save come here refresh and yeah that's it is so if i search for narevel and now we have four four pages not found okay so first we need that to create a search here inside the views new file and i'm going to create search antlers dot html okay and we need to add that okay save with that we don't have anything because they don't tell the statement where they go and we need to create a page for that and i'm going to create page for the search results i'm going to call it and the template is going to be search and the slug is going to be search as well save this one and go here and search for learner and we have page not found because inside the layouts the action is going to be search results but if i change this to search and now search for the event and yeah here we have uh the laravel and the post lava but i want to search only for the tax for the pos and we can find here something so we can specific search a specific index okay so search result stuck and if your site default index includes only the title from the from all collections okay so here we have and that is inside this config satamic search okay so if i go here and inside the config statomic search yeah we have a default one if i create another one i'm going to call it a pos and it's going to be an array and there were i'm going to copy all of that pass it here driver local and this is going to be collection of the post and we want the title and the part so the content we call it bard in the post if we go here you can so in the side of post we have a title and the bart okay i'm going i need to search and here as well so uh will that now if you go to the search results we can specify the index and so the index is posts if i search and save and come here search for level and here we are we have laravel is only one yeah that's it's okay but here i want to add you know what i mean i won't add the partial because we have a okay and it's inside the boss and the partial discard save this refresh and this is the search results okay so we have a search we have a pause and i'm going to change this inside the index here we limit the two but i'm going to limiting 12 save come here refresh and now we have three of them and that's it for the uh statonic for this series i'm not sure if i i'm going to create another one to go in much details for the statement but for now this is going to be the last video if you have any uh you can comment it in the in this video or any video if you want and i'm going to see what what i can do if you like please subscribe to my channel like the video share with your friends hope you enjoy and see you in the next videos thank you very much

Channel: Laraveller

Views: 3,446

Keywords: laravel, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel tutorial series, laravel 8 project, laravel 8 project tutorial, laravel 8 project from scratch, laravel mode, laravel model, laravel tutorial, laravel project, laravel cms tutorial, laravel cms project, laravel cms admin panel, laravel statamic, laravel cms website, statamic collections, build cms with laravel, build blog with laravel, laravel statamic cms

Id: KAZyMw0NRH4

Length: 92min 1sec (5521 seconds)

Published: Wed Mar 31 2021