Display Dynamic MySQL Data in Bootstrap Modal using AJAX with Laravel

[Music] hey what's up guys so welcome back to abe nation programmer so in this video i'm gonna explain you that how we can dynamically get the data uh using laravel so we are using here bootstrap for model and that will help us to get the detail of a specific product so we have three products for now and all these products are coming dynamically from the database so if you see uh in our database we have three products having three different ids and having the name image and the description so what actually i need here is i need a pop-up that can display the description of the whole product so let's suppose if i have a headphone here so if i want to go up to the to the detail page for that you see here we have on the top we have the heading and the description right so that's the specific detail for a specific product right and you see that without page reloading we are able to see the data related to the specific product right so here for the dslr camera we have the description for a specific product and same as for the wireless earbuds right so for now we have only three products so you can have add as much as data into your database and check out the detail for a specific product so that's it that's what we are going to build all from the scratch and let's jump in and get started in the installation process all right guys so let's go into the installation process so i'm going to install the laravel 8 version so let's just simply click on the git bash here if you're using and you can also open up your cmd quantum command line terminal so on my desktop i'm going to install that so let's create here project layer composer created as project larval slash larval and the name of the project that i want here is load dash pop-up dash data so this is going to load the data whatever the name your you can name it so i just want to give it so once the installation is done i will be right back all right guys so the installation has been done and let's uh go into inside the directory so let's load dash pop-up dash data so i'm going inside the directory i'm going to use my vs code right so you can use your sublime or any code editor that you feel comfortable with right so now i just open that and let's go into first we have to look for layouts set the layouts for our application so i need to create i'm going to use here bootstrap for here so let's go inside your resources views and basically this is the welcome.blade.php so i'm going to remove every single thing from here and just change that to uh i just want to give it the name of index.blade.php all right so i'm going to just create a very basic layout for the html so you just need to press explanation mark this is going to create a very basic html structure and let's add some cdns for here so this is my previous project just close that and i also need to close my server which is my which might be running or i close that right okay that's fine okay so let's move into our project and i need to first add the bootstrap for cdn so let's go into your catbootstrap.com you can use the bootstrap version 4.5.2 depending upon so let's go down here and i'm going to grab this 5.0.0 but i need a bootstrap 4 version so i just need to go to the examples or i should need to go to the documentation and let's change that version to 4.6 right and just grab this bootstrap 4.6.0 version right so basically you can use bootstrap 5 still fine but i'm just using because it's the alpha version and it will help most of the viewers to understand more easily to use the model so mostly who don't have much knowledge about bootstrap 4. all right so just keep that simple and i just add the bootstrap for cdn just change that to load data on the load data dynamically using model all right so whatever i just gave it the name very simple so you can use anything so i also use here fonts if you want and let's go into your i want to keep things very much simple to all and resemble what we have created in the demo project so i'm going to use these fonts and every single thing so if you guys not interested you can just leave that and just work out to the main functionality all right so let's go and search for the um i'm going to search for the google fonts so fonts.google.com yeah it's just just taking a lot of time and i believe it's just that's the main reason yeah so i'm going to use here awesome form so just simply click over here and this why it just keep taking me on top yeah actually it's taking a bit time so really apologize for the internet connection might be slower here so that's the reason why it's just taking some much time all right so now it's back okay so i'm going to use here font so there are multiple fonts that you're going to use so i'm going to use here the the second one right so just simply dismiss that and just simply copy that and paste it inside your code just right down here so that we have used our cdn uh for the fonts and we have to use that later on i'm going to grab this awesome font family sansa all right so we're going to use that and also i need a jquery so i also need to add that so code.jquery.com i need the uncompressed version simply grab that and just paste it down to the ending body tag all right so that's fine all right okay now i need to grab the bootstrap 4 model or we should we can write it are on it's very simple bootstrap 4. so let's go into our body and i need to create here a container and that container should have actually the spelling should be right it should be container and inside here container i need to display the product so let's create here a row inside bootstrap four and i need to give it a class for that so which should be a custom css i will write here so product dash info i also need to bring here my custom css file also link and let's give it the name of style.css so i need to create here a folder inside acer so basically if i just want to create here a folder inside public so i i need to create here a folder a search inside assets i need to create in another folder which is css and that should be style dot css all right so that's fine okay so in sign assets so basically when we are using here asset which is a helper function in laravel which is by default uh access to the public folder now we need to access the assets and css so let's create that and exit says css slash style dot css all right so let's inside the css folder i'm going to create here a file with the name of style dot css which is already exist i think so i created that yeah so i created that here and inside my row product dash info i need to create here a column so the first should be call dash md-5 and the next i need to create here the left one which is which is seven so basically in bootstrap four or any version of bootstrap we have a single row of 12 right so make sure that it should not exceed then 12. all right so let's create here our image first so i'm going to create here image source i can just name anything here so acer slash img slash and the name of the image let's suppose if i have the headphones so for now i just want to keep that simple so headphone.jpg alright so in my old project i just need to grab my images from the you can you can grab any image from the google so i just grab all the images from the uh from my project so i think so i just have to go to my c directory and just open up my xampp [Applause] and i just was i'm just working on a reviews as well so you guys have a good thing that i'm working on the reviews application as well so this is going to really help you out so resources views actually it should be inside my public assets img and these are all my four images just grab that all and you just need to paste it inside your new application which i just created it should be here it goes actually i'm using split two screens and that actually the reason why you guys can't see the folder so now let's go inside my public assets and that's where i just just just paste my folder all right so let's go back here and i just want to check and i need to load my helper function here first so let's load that so asset and that should be all right so let's go back to the application so i need to run my server first so php artisan sir all right so let's go back and check this out so it's it's going to run my previous project actually i just need to close my previous project first so i need to close that my previous server okay that's fine and now if i go back to and refresh this so this looks like that it says the welcome not found and actually i just changed the name of the file you see it's it was previously welcome i updated that to index and i need to create here a controller as well a new controller so just give it the name of product controller so php are then make controller and the controller should be product controller all right so here inside my web.route and web.php and that's the route basically i just don't need that just remove it and let's add here a new get request i need that page to be slashed that means it's the main home page and i need to create here a controller so in laravel 8 we have to give it a complete controller path so app http controllers slash and the name of the controller which is product controller and the name of the uh method which should be index all right so actually it should be index all right so let's go inside your product controller and app http controllers and product controller and let's create here a method so public function index and i just returned the view [Applause] so let's give it the name of the index all right so let's saves it and let's have a look so i refresh this so this looks something which is absolutely empty because um yeah i think so it should load us load something here but actually it's not so it says the image is not found as well so let's go back to the index.blade and i need to check the route first so just give it the alt as an image and the path is actually not correct so i just want to see first so i believe that should be the directory that i have img slash headphone dot png actually it should be headphone dot png not the jp all right so now if i refresh back and it looks like something like that and definitely we need to add some styling as well later on and i need to uh right after that i need to give my product dash name here so inside my call that's md.7 i need to create a class and let's define the name of the product so for now it's just the headphone we are just giving a very static data and right after that btn i need to uh define here actually product dash name i need to give it inside my h2 um hmm so i just need to create here h2 with that class or product dash all right now it's fine so let's give it the headphone [Applause] all right so right after the h2 tag i need to create a button here so build bootstrap button so button having the class of bdn bdn secondary and that should be a back something like a grayish color right so some margin from the top which is empty that's four and i need to create here a class with the name of detail that's vdn and that should be a detail button all right saves it and let's have a look how it looks so this still looks very much uh ugly right now we have a style.css file so i just want to create a very basic css that will let us to look a little better all right so just want to create a way staric that means that box test sizing border dash box and then if you guys are not familiar about css you can watch my series as well so margin zero padding zero and i also need to define the body color which is basically i need to give it a background and actually i don't need to give that i i believe it's bootstrap pro already included that so it's still fine okay leave that for now so let's create a background color of 2f242 a2f and that should be not important and let's have a look whether our assets are picking up the right position that's fine okay so now after the body i need to have my product dash infill so let's define that so product dash info i need to give here a margin from the top to be 10 pixel and just remove that okay so the margin for the top 10 pixel i need to give you a border one pixel solid red all right and the padding that i need here is 20 pixels all right so let's go back and refresh this so you see here we have a border we have the image i need to just decrease the size of the the image as well later on so let's first first i want to decrease the size of the image all right so i go to my image tag and inside here i'm going to set my weight which should be 150 pixel and i'm going to change the height to be 130 pixels all right saves it and let's go back and refresh this now it it's it's now looking something which i just need now you see the font is still black and need to change that to white so i need to go here and define the css for my product dash name right so where is the yeah that should be my heading and let's create that first so i'm going to define here the css for my product information which should be pro prod dash name so just simply grab this and right after that i'm going to give my product dash name so let's first give it the font size i need the font size to be 26 pixels and the color that i need here is cc uh that's something like a red color so just to find that i need the border to the bottom should be one pixel um solid red and i need to define the font weight so i just want to give it the font rate of 500 and x i need to give it a width of 160 pixels uh and i also need to give some margin from the top to be 15 pixels and the last thing that i need here is a font family which i need here the asphalt which we have bringing so osfield and sans serif so saves it and refresh this so this looks something like that right and later on we have a multiple images that we can bring in now we i need here is the detail button like when i just click on this detail button this is going to open up the pop-up bootstrap 4 model right so let's create that here so i'm going to create right after the div of my container so that should be the end of my container so let's create here a model so bootstrap four model and there we go okay so just simply copy that place tab with it and you see that now we are good to go now i just want to give here the id of my model which i previously gave so with the help of that model we are able to when i click on this pattern and you are able to get the i uh get the uh you're able to show and hide the model right the pop-up so let's give it the idea of my model all right so now i just want to copy this uh my model id and i just need to bring it here so data dash toggle so basically i need to give here toggle that means once i click it will show and hide right so i need to give here a database toggle model and i need to give it the id here so data target equal to i just want to paste the id and remember just bring this hash that means it's the id right now that's fine and still it will not work we have to add a script down here that will automatically hide the model right so let's go back to our document and refresh this you see nothing is going to happen and the reason why because i need to add few more scripts here so i need to add here bootstrap 4 i need to grab the actually again i need to go to do the documentation go to the 4.6 version and let's grab the bootstrap.main.js which is this right so simply copy that and just paste it right after the jquery okay now if i go back to where we are and you see now we are able to simply open up the pop-up right and what actually i need when i do dynamically the the bootstrap 4 model will be will be show so for that i need to add a script down here as well so this is gonna really help us so by default the bootstrap model which is the id so i need to get the id of my model so my model and i want that model to be by default hide right so that's the property i just added here and refresh this still fine right so everything seems to be work fine now i need the data that i display here i need the data to be dynamically accessed so let's create here a model so php artisan make model and let's give it the name of the model which should be product and dash m for the migration so i added the migration so let's go inside your database migration and i believe this should be for the product right and let's create here a few fields here so dollar table i need the type to be string so first we have the name of the product so let's give it a title name next i need to define here dollar table dash string so we have the description of the product and that's it i think so that's it okay now i just need to migrate the table so phpr is in my grade and sorry so the migration doesn't work because we haven't set up our database so let's go to our dot enb and i'm gonna change that to load underscore dynamic underscored pop-up data whatever the name you want to give long database name right so let's go to my database create a new one and this simply creates that and i want to grab the most of my data from this from this previous table where i just have created my project for the demo so i need to create here i created the database and now i need to run the migration so php r is in my grade so this is going to run the migration for us so if i just go back and refresh that's fine let's go to the products table i need to add the data so i just need to grab from my previous project so i'm going to grab the description oops you have to def you have to write these all right so i just want to define my description and actually i forget to define the image right so first i need to go and grab create underscore product underscore table i forget to bring here the image so let's add that too and now i need to migrate it php artisan migrate actually the reason why because should not i don't want to save actually if i try to click go and now i need to run phpr as in migrate because the table is already migrated so i have to do here php artisan migrate call and refresh all right so now if i go back and you see now we have our image now let's add that the data insert it so again i need to copy the name or the title whatever you name it so for the next one i need to give it the title so first add the image i need to complete the first one and then i go back to the second okay so let's add the description same case for the image and i need to grab [Applause] so let's add the description i need to add another row so let's add one more oops actually inside it so so i need to define actually i don't know what happened here i need to add again [Applause] so wildlife ear birds then i have the image part and let's add the description [Applause] all right so now let's go and check it yeah so now we have our data inserted so i just go back and refresh this so this looks something very much similar to have now let's add here inside my i just want to close everything here i need to define here i need to pass here the controller the data which is coming dynamically from the product so let's gonna add here so all the products so i'm gonna create here a table so products with the help of eloquent we are able to get all the products and i need to pass with the compact method this compact method will help us to pass the data to our view so here just give it the name of products and i need to define my model for the product so use app slash models so this is all uh new in the larval 8 version so product you see that it i need to define here the complete part previously it was just use app slash product right and now we have the folder inside our laravel 8 version which is model and that's why we need so now i need to define my data in dynamically from the database and display to a view so i need to go to the resources views index.play.php and i need to [Music] write after the container i need to apply a condition if there is a product so it should be at the rate if so if there are some products and i need to apply a for each so dollar product as dollar key and same here i need to end this one so it should be first end for each and end if that should be in for each okay now here i need to display the name of the product name so let's give it the key dash title and right on top i need to access dynamically image so it should be dot and i need to pass here the image so that should be like asset slash img dot and key dash image all right so that's fine and let's have a look so it says app http controller product not found where i think it should be wrong here yeah so it should be product and now if i go back and refresh this and you see now we have our three different products now if i click on the detail here you see it all showing the same data because we haven't worked dynamically yet right so we haven't used any jquery we haven't used we haven't used any data through which we can get the detail of a specific product means that each product should have a specific id right so i'm gonna take a short break and i will be right back all right guys so welcome back here and now we are only left with now we need to show the data dynamically right so if i click on the detail it gonna show us in the specific result so let's go and first i need that the button should have the specific id means if i click on this id that should have id of one this detail should have an id of two and this should have the id of three depending upon whatever the id we have for the specific product right so let's go into our application and i need to go to my resources we use index.play.php and remember so this is our detail page now in order to get its id all i need is to just with the help of a loop we are able to get its id so i'm gonna grab its id by simply do here data dash target and this will help us to get the id when we are getting the data using ajax right so i'm gonna pass here dollar key dash id remember that we are looping the data and it will loop us the id of a specific of every single product right so now i need to go back and right after the scripts i need to define my jquery so let's define a dollar document dot ready function so whenever the document loads we have to first get its id right for whenever i click on the id that means that whenever i click on this button so this is gonna get its id so let's do that first so we have to define here the name of the click which should be uh actually where it goes so i need to define here detail dash bdn class so with the help of this class i'm able to have a click event so let's define that here so dollar actually it should be dark for the class so i need to click the function so whenever i click the function so this gonna get i i need to get its id so let's define the id so id equal to dollar this dot attribute so attribute is basically a method whenever we are using here anchor property means whenever we are linked so this will ab this property or this method will uh sorry this method will help us to get excited so i'm gonna define here data dash id so that actually data id i pass right here you see now inside my button i have pass your dollar key dash id right so it just saves it and now if i go back and refresh this actually i need to pass here i need to console the log so let's define here the id and now if i go back and refresh here so you can also learn about how we can use jquery as well so if you guys are not familiar much about jquery so it will really help you out and you see right now we are getting undefined so i need to first check this out why i'm getting yeah uh why i'm getting here undefined so let's go on top of it and check so this should not be actually this not be data dash target this should be data dash id right so actually i just give it data dash target which is actually the id for the model right now if i go back and refresh this and click on the detail you see now it's showing us one and when i click on here it's going to show us two and three for the product number three right so now we are actually able to get its id right so now let's go back and refresh this here and now i have to write here ajax here so dollar dot aj so every ajax should have a url which i just want to type here product underscore detail and yeah we are getting the product id as well so i need to concatenate concatenate here i have the type of the request which is get request and i need to pass here the data so let's pass here the id here so id and that id is actually the id which is coming from the variable right okay so after that when everything works well we have a success function and that success function should have the data and the data that is that will pass here right so i'm going to just simply do console.log and data and now i need to pass here this route with having the id so let's go inside your routes web.php i'm gonna get here a cat request the type of the request which is get so let's pass here the request and the controller so app slash http i just want to copy that all and change that method name to be product underscore detail so let's go into our controller app http controllers and define here a method so public function product underscore detail so this map function will help us to get it the specific product id so i'm going to pass here the id and here i need to get the product id so dollar product column column find our fail method this will help us if there is a product this is going to show us the id it should be find our fail not d right so saves it now if i go back and refresh this and once i click on this detail button you see it says that 404 not found actually because i need to pass your eid slash id right now if i go back and refresh this click on the detail you see now we are able to get the record of every so we have the id one the title the image when i once i click on this detail we have the id2 all the details of that product and same case for the third product so you can add as much products you want because everything is coming here dynamically now how we are gonna display this data on the model right so this is the main feature so let's add up here so i need to go to the model first so i need to remove this here because we need to load the data that is coming from our table so let's pass here the id so i'm going to give it the id and let's give it the name of the idea product dash description right d e s c for description right so i'm going to grab this and uh and i also need the to to show the title of our product so just remove that title and i need to give here per product title and just remove that class to be id because every single product should have a different uh product so it's good to have the id right so i need to display this remove this console.log and first we have the id for the product then i i think so it should be product dash title i passed you can give underscores you can give anything here so in my case it should be uh product dash title yep and the second one is product desc right so first i want to give you a product title dot html and if i pass it the data you you will notice that everything will be displayed here right so detail and so actually i need to console the log or i should simply do here is data dot so this will return us every single thing now i need to get its id as you say i've seen console the log and because i need here a name of the product so that should be data dot title and if i refresh back and go to the detail and you see now we have our title for our product right and if i want to get the description all i need here is just simply copy that and i need to change that to the description and we have to show the description here so i need to grab its id as well so product desc and just replace it with this one and now if i go back and refresh here and click on this product and you see now we have the title and the headphones with good quality sound so this is going to display up here same for the dslr camera and the wireless earbuds right so i hope you guys learned something out of it and the main reason why i make this topic and you guys will love it actually because in the coming next video or might be the second coming next video because i'm also working on a note and i plan to make a video where you can able to get the reviews means that you have a stars here you have the ratings once you click on the detail you are able to add your own ratings and the disk and the comments and just gonna save into your database and it's going to show us the average of the complete product so i'm working on the review management system so if you guys really love it and must watch that because in the next video with the help of this replicated code i want to save your time we will add some more css on it more html on it and we will have the review system so thank you for watching this video don't forget to like and subscribe and i want to see you guys in the next video

Channel: AB Nation Programmers

Views: 1,298

Keywords: PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal, Dynamic data show on bootstrap modal popup using php

Id: 9jDCXA3Daa0

Length: 36min 51sec (2211 seconds)

Published: Sun Apr 25 2021