Laravel 10 CRUD (Create, Read, Update and Delete)

in this video we're going to create a crude application with rather that means we run about basic add edit delete and the listing operation using relative 10. on the end of this video we'll be able to create a simple product crude application like this you will know how to get a list of a product create a new product for example here I'm going to create a product called MacBook Pro Max M1 add to description of our MacBook choose image of our Mac okay select category add the quantity add price and after that save it in our database all right our product has been created you can see it in our list of products you can edit product for example here add more description and after save change in database all right product has been updated you can stretch products and you can also navigate on this list of products and you will be able to delete product by click here confirm delete or not all right here I choose to delete products and you can see our product has been deleted so red open up our terminal and create a new rather project using composer create Dash project and the name of our project since this crude application I'm going to call it crude all right our other project has been created let's go ahead and CD into our crude open it in our vs code right now open a terminal in our vs code in the Run PHP artisan serve which you should spin up our web server for me and let's open up this area right here in our browser cool so our Avail application is installed and you can see our default data available application installation here the next thing I want to do is to open up a new tab in our browser and then open up this year rocker host slash PHP my admin and create a new database called crude okay let's go now in our vs code and see our project the first thing I want to do in my project is to open up the unv5 this environment withhold or our database connection information so I want to set up a database since I'm going to be using relative in the MySQL my database is crude my username root and my password root root all right I'm going to save change of my NV file I'm going to open up the new tab terminal because I want to create a model migration and a controller for our database now that is linked we can use PHP artisan make model which going code products Dash M for migration and C4 controller or write our model migration and controller is created so let's take a look that appear on our database folder on migration we can see our product table all right so what I'm going to do is to add some columns in our product table string name which will be needable table text description which will be needable table string category which will be kneelable table quantity which will be needable table price which will be needable string image which will be needable all right now we are going to create immigration for our new product table let's create this out and run PHP Artisan migrate all right we can see our product table has been created in our database Red Cross it and the EnV file all right before create our product view file I'm going to show you how this data verdeford page is called this page is located on our resource on view okay you can see this welcome blade PHP file which is called via routing who are located in our roots in verb file these roots called our welcome bread PHP on our default URL right here now I'm going to add a product to URL you can see error page not found now I'm going to resolve this error page by go on our view create a new folder called products and inside product add an index breed PHP okay add something on my index breed PHP for example products wrists okay this index will help us to list our product and go to call it via root get past our year products okay these are the products is that one was I write in my browser URL okay and and return a view who are in our products folder called index all right now we can see our index page are called let now show you how to call this view via controller I'm going in http on our controller in product controller and create a new function called index which will return View product index let's now change my route and call my product index blade PHP via controller since I'm going to use product controller I'm going to call it in Our Roots by using app http controller product controller let's now change our product roots and use our product controller Roots gets products products controller index to use these product roots we are going to call index function who are in product controller let's now add something in our controller to confirm that Our Roots is called via controller we create variable product and pass it any text okay after that I'm going to add these texts on our view okay this text now is passed in our view let's go in our index blade PHP and pass this text all right let's now see the change in our browser okay now you see our text is called in our browser right now go on on our location route and change gate to resource which will help us to get all roots that we will use for creating this crude application all right Now open up a new tab terminal and the Run PHP Artisan root wrists as you can see this is all root that will help us to create this code application all right let's create this out now I'm going to install the content of this package Json because we need it to compile our CSS and Js let's run npm install to install all the package Json dependencies all right let's create this out and run npm run Dev let's now go in our welcome blade PHP and add vit resources slash CSS slash app CSS and then resources slash GS slash app GS these app CSS are on our resources on CSS folder and this app Gs are on our resources on GS folder all right let's now test that it work where by add just any text in our overcome braid PHP all right you can see our text here in our review okay now we are going to add the a style for example color red as you can see it change our text all right now our CSS and GS compiler is the workwear let's now create a new folder called layouts and add in this folder a new file called app blade PHP which is will help us to add a new layout to our product view let's go now in our complete PHP and copy this part and pass it in our app blade PHP okay Let's cross this body and HTML all right we are going now to add a yield called content now we are going in our product index blade PHP and core our layout by using extend layout dot up let's now add session called content in which we will add all our HTML for our index blade PHP all right let's now navigate to our product URL and see the change you can see that the style will change now we are going in our layout upgrade PHP and remove this style which come by default with laravel let's go now in our app CSS and add our customer Style for example here body background color lid all right you can change it to Gray all right the color change let's now add my customer style CSS that has been prepared before if you need to use the same templates I will link where you can download it in description below let's go now on my system on download directory this is the template that I was downloaded before I'm going to open this template open the crude CSS copy the content of this file and add it in my app CSS now you can see our app changed the style let's go in our template again open this crude.html file in my vs code and copy this session and paste it in my index blade PHP all right as you can see our index blade PHP was changed before to continue right now go in our app CSS file and in a comment this line which will help us to add the font icon to our application all right now you can see our icon appear here all right so let's create a new product first we are going to add an action to this button let's jump up in my vs code on index blade PHP file and add Roots products dot create which will redirect us to product dot create view file let's go now in our browser click to add button and see what will appear okay you see now the error which means that create function is not created in product control so now we are going on controller in product controller and create a new function fabric function and the name of our function called create in this great function we will return View product dot create okay let's now go in our views on products and create a new file called create dot blade dot PHP all right in our create.blade.php file we are going to add the form first I'm going to extend layout dot app a decision content and then add main tag with class container and go in our crude.html template copy this second section good and paste it now create those blade.php file and go in our browser to see the form that will help us to create a product in our database all right so now we are going to add a function which will help us to add a new product in our database okay let's go here and add form posts action roots products dot store ink type multiparts slash form data okay this function will help us to add a new product in our database and add a security to our form by use this is left okay in that input add name name in this text area name description in this input name image okay let's now go in my browser and what I need to do is when I choose an image I will need that will appear here to do that I'm going on my input type file and add a function which will help us to show image let's add accept image on change foreign and add event okay let's now create a JavaScript function called show file let's add script function show file event VAR input equal event those targets VAR reader new file reader reader dot unload function via data URL is the dot results VAR output document get element by ID called file preview let's now add these file preview ID where I need that in my image change will be appear okay let's continue output.crc data URL reader dot read as data URL input dot files zero okay let's now verify that it work all right you can see the image change when I choose image all right now I'm going to continue and add category okay on this select I'm going to name category add for each Json decode array smartphone smartphone Smart TV Smart TV computer true as option key which you have an option vary okay let's copy option and paste it here in our forage advari option key and add option vary okay now you can see our select work let's now continue and add on this input name quantity and for this input name price all right can add product okay when I need to save I get errored show me that the store function is not created let's go now go on controller product controller and create the function store fabric function store requests variable requests okay now you can see the area disappear before to continue I'm going in my model on product.php file add protected fillable name description category quantity price and image okay let's now call our model in my product controller okay use app motor products okay I'm going to continue by creating variable code product and new product name equal requests name product description requests description product image because when I'm going to create a product image I need to save it in an image folder I'm going to use variable file name times dot dot Dot request image get create original [Music] extension requests image move in public path image it's variable file name all right when I will get an image from the form I will save it in a public path called image let's now add this variable file name in our product image okay let's continue by product category requests category products quantity request quantity products price requests price and after I'm going to save my product in database and after saving in our database I'm going to direct to our product list by use return redirect root products dot index with success comma products added successfully all right let's now go in our browser I'm going just the name Samsung TV description of our Samsung TV choose image all right select category add quantity and add price and after that save it in our database all right for the moment it will direct to our list but it's not shown in that list that verify that we will save it in our database okay as you can see the product has been added in our database all right now we are going to fetch our products from database to our list of products to do that we are go in our product controller and change our index function on variable products we are going to use product order by created at get after that we are going in our viewers on products in index.bred PHP add if condition okay we will do if count products is greater than zero we are going to group our product list and show it in a our list okay let's go for each products as products copy this part and save it in our groups okay on image we are going to use assets images product image images is the folder where we are save our image okay now we can see the image is up here let's continue variable products name product category products quantity all right let's go in our browser now you can see our product from database let's add a new product okay choose image select category okay okay and you can see the product list is now work all right now we are going to add a verification where we add a data in our database okay we'll go request validate name will be required and the image will be required okay after this requested validation we'll kind of go in our create dot bread PHP and add if you have any error we will show for each error or as error error all right now you can see when I save without add name and image I get error.name of product is required and the image is required all right okay we are going to continue add a message to our index blade PHP which is shown as if the product was added successfully or not add if message session get success show the message all right let's now add a product if I add without any products name they show me error let's add a name for example here HP laptop description of our HP laptop choose image select category quantity and price okay and after save it in our database now you can see the message that show product added sex free all right so I'm going now to add sweet alert which will help us to add beautiful notification alright let's open up a new tab in our browser in the search switch alerts too all right let's now open the switch element now we are going to use sweet alert to add a beautiful notification I'm just going to copy this link which will help us to install it in our application regrow in our layouts app dot blade PHP and add this link here all right we are going now to change the notification for our index blade PHP let's switch the beautiful no no as you can see the example of switch alert all right I'm going to use this example here okay go and just copy and go in my index blade PHP uh the script type text JavaScript all right I'm going to pass what I was copy okay all right now I'm going to change the title and add our variable message let's check if it works perfectly add in a new product all right all right can see the message appear now we are going to learn how to make a switch for our application before to add the switch I'm just going to add product not found within database there is no products let's now continue and add form which will help us to get is rich form methods get action roots products dot index accept child sets ETF dash eight for stretch and add to this input name stretch all right and don't worry requests stretch all right now we are going in our product controller to make stretch and pagination we are going to change our index function by add variable keyword request get stretch per page five if keyword is different of empty our variable product will return product where name like keywords or where category like keyword rattest paginate per page else variable products products latest paginate per page and on a return view we are going to add with one requests input page one dash one five all right now you can see when we add any key to search for example an iPhone you can switch by name and you can stretch by category all right so now to make a pagination by go in our index blade PHP and just add products links okay let's go in our browser to see what should we change for the moment we have for product in our database I'm going to paginas if I have five let's just add new product in order to get five product per page okay let's quickly add okay now you have five let's add another one all right now you can see pagination appear but there is no style to that pagination what I'm going to do here it just add style to our pagination let's add the layouts Dot pagination okay Rego in My Views on layout and add a pagination blade PHP okay okay and the return in my index blood PHP copy this part it in my pagination red PHP and add some condition if paginator has page we are going to show pagination if paginato is on first page copy this and show it okay else add this and remove that okay just add class active page each leaf paginato previous page URL all right let's now add another if condition if the generator has more pages copy that one paste it here in each leaf add paginator next page URL all right okay yes to work now we are going to add a number of page for each elements as elements if is showing elements we are going to add elements if is array element s we're going to add a forage element as page user another condition if page paginator current page show page with class active page okay copy this one otherwise I'm going to remove the class and the load Direct to URL all right okay now you can see our patch is up here now I'm finished to do our pagination now what we are going to do is just to add and edit now I'm going to add a root which will help us to edit products root product dot edit comma product ID okay when I click to edit button we are going to have error which means that edit function doesn't exist in our product controller let go in our product controller in the create the function edit but I use fabric function edit pass a variable ID okay product s find or fail ID and the return View products dot edit with our product okay we are going to create an edit page which you will show us our product what we are going to edit all right let's go in our views on product and create a new file called edit.blade.php okay I'm going in create blade PHP copy all the content of our create.beard PHP and paste it in my edit red PHP and make change here edit okay all right you can see now we are on the edit page we are going to change products here I'm going to change store to update and add products that we are going to edit all right okay add a method put which it will help us to update products add on the name input vary product name on description at the very product description okay product description on image we are going to show the image that we are going to edit by use assets go for the way our image are images images [Music] dot products image all right now you can see our product let's add an input type hiding with name hiding product image which you will help us to get the current image here with value product image all right this hiding input image will help us to get the the current image okay let's now go in our category and show the category of product but I use ESET product category and product category equal option key select or show nothing all right selected all right okay okay now you can see the category buffer product appear yes if I change the category also change okay let's add very product quantity vary product price all right let's add here an input type hiding with name hiding ID very product ID this input will help us also to get our ID of our product okay now we can see our product that you are going to edit is up here when I click to turn the save button they show us that there is an error update function doesn't exist in our product controller let's go in our product controller and create a new function fabric function the name of our function update requests requests foreign variable product all right on this function we are going to begin by the request validate name which will be required all right file name will be requests hiding product image remember to hide an input what I was added in my edit played PHP okay if request image is different to empty are going on our we're going to copy this part in our store function and add it here okay let's now find the product that we are going to edit by use product product find request hiding ID this I then come from on our edit bread PHP on the hiding input we which have a name hiding ID okay here just copy that and passed it in our update function and after update we are going to redirect to our product list by use return your direct root products dot index with message success product has been updated successfully all right let's go okay index okay let's now verify that the update just add something change image okay update yes all right our product has been updated successfully all right now we are going to work on the button delete now we are going to delete the product by go in our index blade PHP add form methods posts action root products dot destroy product ID okay this action will help us to destroy to delete our product let's add method delete with a security of our form at button let's add JavaScript function on click delete confirm events now we are going to create a function called delete confirm script close script add window delete confirm function Event Event prevents default VAR form e dot targets dot form and go in our sweet alert and check that we a beautiful sweet alert which will help us um you know try this okay I can use this yes Farm is very good I'm going to use it this okay let's pass it in my confirm delete function all right and change here by adform.submit all right let's now go in my products controller and creative function destroy by use public function destroy and pass ID of a product that we are going to delete products product find or fail ID because I need to delete the image also in my folder wheel I am delete product I'm going to use image Puff fabric Puff and go in our folder images variable image image half dot product image okay if file exists image in link image okay thank you product delete after delete product return redirect products with success product deleted all right okay when I can see product was deleted all right you can see the product was deleted let now just add study to customize my style of our button edit and delete it okay just add that style displayflex Style padding top for Pixel padding bottom for picture okay now you can see my button is very good it's very stylized okay I can test and add the new product okay the product has been added foreign by for example the more description okay change quantity okay the product has been updated can stretch any product in our list all right [Music] can make search by pagination okay or can delete product confirm delete or not this is the end of this video If you like this video don't forget to subscribe to my channel it motivates me to keep going

Channel: Share Tutorials

Views: 22,785

Keywords:

Id: MJp8ycjNW5s

Length: 98min 45sec (5925 seconds)

Published: Sun Feb 26 2023