3: Get data from a database without refreshing the browser using AJAX - Learn AJAX programming

today I'm going to show you guys how to loading data from a database and insert it inside a website without having to refresh the browser each time we're going to do this using Ajax and PHP and what we're going to build today just to show you guys an example of how to actually do this it's going to be a comment field so right now as you guys can see inside my HTML document here I have a link to a style sheet that you guys can actually download in the description of this video I'm not going to worry about certain guys the styling of this episode because it's just basic CSS but if you guys want to have it you can download it down there now the second thing we need to have inside the HTML file is a link to jQuery because we need to use the occur to actually get this working again we're using jQuery to actually accomplish this using Ajax and the second thing we have in here is a pair of script tags that's going to head to take your code inside of it right now there's no take or code because we haven't actually done anything yet and inside my body tags I have a very basic div that has an ID set to comments which is going to have the comments inside of it and then I have a button down here that says show more comments and as you guys can see inside my website this is the actual world of the white box is the actual dip box that is going to have the common sense out of it and then we have the button down here we can actually click and then we can load in more comments inside our comments field so right now we have nothing inside our database again you need to be familiar with PHP to actually do this and inside my database I have no data to actually insert inside our comment field because when people create comments inside a website they do it using databases so we need to set up the database first and then have a connection to the database and then we can actually start including the 8 X code and the PHP code which will load in the data woman to actually click the button so inside my PHP myadmin database I'm going to go and create a new database so i'm going to click databases i notice it's in a different language but it's going to look exactly the same on your computer inside my databases tab down here i'm going to go and create a new database called ajax just to have some kind of name I'm going to create it and then inside my database I'm going to go to include some SQL code because we don't have any tables inside the database and right now I want to have a table that we can insert our comments inside of so I'm going to go and create a new table inside the SQL tab here so I'm going to go and say create table then we want to give it some kind of name I'm going to call this one comments parentheses semi-colon and then we're going to insert the columns inside the table I'm going to go and say the first one is an ID which is an integer I'm going to go and give it 11 different characters inside of it space not no space all to underscore increments space primary key comment and then we're going to go and say we want to have an author in my comment field here and again you guys can do whatever you want in my comment field here in my demo I want to have an author name and a message so I'm going to go and say we have a author sexy spell it correctly like so I want to set it to a text data type we're going to set it to not no comment next line then I'm just going to copy it right before the comment because you don't want to have a comment the last line and then I want to change the from author to message so now we basically have an ID and author and a message so if I were to actually run this code and insert it inside my table you guys can see we've got it inserted and now we're going to go and include the actual data because we're just going to insert it directly inside our database again if you guys have a website where people can write comments and insert it that's fine but who just can do this manually inside our database so I can actually show you guys a Tex now do I have the SQL code next to me here which I'm just going to go and paste in if you guys want to have this exact code you guys can download it together with the style sheet in the description of this video because I'm not going to hand write all of this text here and that's because this is not a PHP tutorial or database tutorial guys should know how to do this by now this is an ajax tutorial so we're just going to go ahead and paste in a bunch of quick comments and then move on so right now I have a bunch of comments I'm just going to go ahead and actually just paste in a times who have bunch of comments and then I'm going to go and say go so after we did so it should actually be inserted if you go into the comments table you guys can see we have a bunch of comments in here so now forward to go back inside the website and go back inside my text documents we're going to go and include the database connection to our database so I'm going to go and create a new document I'm going to go ahead and save this one as bb8 dot PHP which is going to be the database connection like I said to the database I'm going to over move the PHP tags like so I'm going to go and create four different variables which is going to be the parameters for the connection to the database I'm going to say that the first one which is going to be the server name like so which is equal to double quotes semicolon just going to paste this down three more times and change the second want to use the name the third one to password and the last one to database name or DB name like so now inside the server name we're going to go and write localhost inside the second one we're going to go and say root at least because I'm using xampp for this episode I'm going to go and include root inside my username if you guys are using something like web or mint or something else that runs your localhost server or if you're using an online server you need to fill in the correct information in order to get this working so in my case because i'm using xampp and i haven't changed the username and password my username is going to be root and my password is going to be empty now instead of my database name we call this one ajax when we created it inside PHP myadmin and underneath here we're going to go ahead and set a variable called con equal to my sqli underscore connect semicolon and then we just need to insert the variables up here one at a time so I'm going to say server name we're going to say use the name we're going to say password and the last one which is database named DB named like so and this is all we need to have now inside our index file we need to include the database connection at the top document so just going to go and say we have a database connection by writing the PHP tags then I'm going to include the documents that we just created called DPH dot PHP semicolon so now we have the database connection inside our front page called index of PHP and we can actually use the connection to pull out comments inside our website so inside our div tags down at the bottom here where we have the ID set to comments we're going to go to insert the actual data from the database so at least the first two pieces of comments because we don't want to load in all the comments at one time because it's going to take up a lot of resources while browser to load in all the different comments we have inside the database so we're just going to load in a couple of comments in this case we just converted to so inside the div tags I'm going to go and say we have some PHP code and then inside the PHP code I'm going to go and say we have a variable called SQL which is equal to double quotes and inside double quotes we're going to write the SQL query we're going to run inside the database so right now I'm going to say select all from comments and then we're going to go and set a limit to two then underneath here we're going to go and say we have a variable called result which is equal to my SQL I on the score Corie parentheses semicolon and then we're going to go incur the the actual SQL code up here we just wrote so we do get the first two comments from inside the database when we do actually use the dollar sign result variable down here then on the next line we're going to go and say we have and if statements because we need to actually check if we have any kind of results from the database if not then we need to get some kind of error message so right now we want to say we have my SQL i underscore num underscore rose parentheses and we want to check if it's greater than zero so if we get more than zero results then we need to run the code down here if we get zero results or below that then it needs to run this else statement down here we're just going to say echo there no comments like so so inside my if statement if we do actually have some kind of result from the database I want to run a while loop like so now inside the while loop I want to say we have a variable called row which is equal to the actual data that we get from the database which is going to be by writing MySQL I on the score Fitch underscore eStock parentheses and then we want to make sure we actually query the result inside here and insert the query result inside those n rope so now if we were to go down here connects the echo paragraph then copy the echo paste it below here close off the paragraph like so and then inside in between the paragraphs we're going to go ahead and say we have dollar sign rope and then we want to get the column called author in the database then I'm just going to go and copy this line of code paste it below and then get the methods then in between here I want to include a break just to make sure we don't have the author and the message right next to each other when we get the data like so and now if we were to go inside the website refresh you guys can see we get what we do I still get an error message ah we've got to include that to a connection so let's actually go back up to our MySQL I underscore query because we need to reference to the database connection come on and then there's girlcode oh and we also need to change the masculine um row two rows in plural save it go back inside our browser refresh and then you guys can see we get the first two comments now right now for ataxic click the button nothing happens because we haven't actually used to jQuery 8x code so that's the next thing we need to do inside our website so I'm going to go and go back inside my index page and at the very top of the documents I'm going to go ahead and go inside my scripts actually we include the jQuery code and I'm going to go ahead and write that we want to run the jQuery code after we load the rest of the document so I'm going to go and say we have a selector inside a query called documents dots ready parentheses semicolon because basically now we're running whatever's inside the parentheses after the rest of the document that's actually loaded so I'm going to say inside the ready function we have a function curly brackets and then what ever since I had occurred the practice is going to be run after everything is loaded so now we want to say we have a selector inside jQuery parentheses and this selector is going to be the one that we do something to in order to load a new comments so right now I want to select the button we have down here so I'm just going to go ahead and say button then we're going to say dots click and say when we click it we want to do whatever's inside the parentheses then inside the parentheses I'm going to go and take the other function that's going to run when we do actually click the button curly brackets and then inside the curly brackets it's going to be what we actually tell it to load in the new comments from the database so we're going to include a selector we're going to say we have a ID down here called comments because we need to select the actual container we want to load in the new data into so we're going to say we have has tag comments dots to load which is the jQuery AJAX function parentheses semicolon now inside the lo parentheses here we can actually include three different parameters the first one is going to be a tag to link to the file that we need to load in into I live down here the second parameter is going to be some kind of data you want to include inside the file that we linked to using a post method and the third one is going to be a callback that if you want to let ourselves know if this actually ran inside our code so we're going to go and use the first - which means - right now we need to include the first parameter which is the actual URL path to the file we need to load and right now we haven't actually created the file now we're going to create the file and when we create the file is going to be called load - comments dot PHP now before we include the second parameter we're going to create this file called load comments the PHP because we need to do one more thing with the actual data we pass on to this file here which I'm going to show you guys at the very end so we're going to copy the name here we'll have a new document save it inside a root folder as load - comments that PHP and inside this document I'm going to copy what we have inside the front page down here in the comments div just going to copy everything we have here insert inside a new document called load comments who everything into looks nice like so and we're going to change the limit now to something else so basically just doing the exact same thing inserting the exact same data but changing the limit up here inside the SQL statement so the way we're going to do that is right now we don't want to have it - and here we need it to load in more than two comments you know next time we click the button so we need to delete the - and include a new number now because I want to keep increasing the number each time I click the button repeatedly we need to do it by using the actual data we pass on from the second parameter inside the jQuery code so right now for what should go back inside the index file go to the top here we have the jQuery code I want to say to want to pass on some data by writing comment space curly brackets just like inside you want to include some kind of CSS string we used two curly brackets to group together a certain parameter inside you know the parentheses and in here I'm going to move down to next line so it looks a lot nicer to look at now before we include any kind of data inside the curly brackets I want to create a variable right before the actual click function here because we need to keep track of how many comments we have right now inside the web page so I'm going to go and create a variable which is going to be called Commons count instead of equal to two now the reason I decided to include two is because right now down here in the limit we set it to two meaning the right now we have two comments inside the browser so we also need to make sure the comment count is equal to the limit we have down here so after creating this variable you want to increase by a certain amount each time you click the button so I'm going to go inside the click function here right before we load in the new comments instead I want to change common count up here by setting it equal to a new value which is going to be the same plus two so right now I'm just loading in two more comments the next time I click the button which right now would exit before then the next time I click the comment button is going to be six and then so on and so on and so on so after we do this we can actually go inside the curly brackets down here and include the new count we have inside right here so I'm going to go and say if you have comments new count and set it colon space now normally would actually insert data inside a string like this or because we have a variable called comment counts I'm going to include it like a variable like so now forward to have multiple pieces of data we want to add inside the next document here I could say comma create some kind of name for the data colon then again a name and then you need to make sure that the last piece of data doesn't have the comment behind it so now we're passing on this number up here that we got from common count into our load comments the PHP using a post method so whenever we include data inside the second parameter we do it using post methods then inside our load comments the PHP file I'm going to get the post method be passed on from the jQuery code so I'm going to say we have a variable called comments new count instead of equal to variable underscore post brackets semicolon and then I want to get the post method call comments new accounts that we passed on from inside our index file down here we call the comment new counts so this is going to be the name for the post method so after we did this I'm just going to include this variable up here called comment new count inside MySQL sentence down here once I save it we're basically done if we were to go inside my browser and refresh you guys can see when I click the button we load in oops we did actually get some kind of error message which is because right now we did next include the database connection let's actually include that just like we did here at the top of our index file so we're going to include that right there and now if we were to refresh the browser you guys can see if it were to click the button we get two more columns from the database if we were to click it again we get two more and we get two more and we get two more and so on and so on and so on so we have no more comments inside the database so right now you guys can see we get no more comments and we don't refresh the browser each time I click it so this is basically how we can load in data from a database using a Tex PHP and da curry hope you guys enjoyed I'll see you guys next time

Channel: Dani Krossing

Views: 481,638

Keywords: how to load data from database without refreshing browser, get data from database without refreshing browser, get data from database without refreshing browser using ajax, how to load more comments using ajax, how to load more comments using ajax and php, how to load data from database using ajax, ajax load more comments tutorial, how to use ajax to load data from database, ajax, how to use ajax and php to load data from database, how to load data from database using ajax and php

Id: ejN-oAw9vC0

Length: 18min 49sec (1129 seconds)

Published: Mon Apr 24 2017