jQuery Infinite Scroll Tutorial With PHP & MySQL & Ajax (Like Facebook)

Infinite scroll is everyway Facebook Twitter Instagram they are all using and in this video to learn how to make one hey what's up guys Senaid here from codingpassiveincome.com the place where I help others to become other developer much easier and faster than they will do it them they form so that is something that's interesting consider subscribing so before we start writting the code I want to explain the basic that you need to understand for this tutorial so our goal is to create a normal HTML document and inside this document we will have one container so let's say like this and then inside this container we are going to add the rows from our table with our sum the results and let's see this is our scroller for the document and he'll add moment right here so with jQuery we are going to detect the position of this scroll and if the scroll is here we are going to make ajax call so let's say he Ajax are going to make with Ajax call to the server and on the server with PHP we are going to connect to the database and from the table let's say this is our table and inside table we have some rows and some columns okay and with we are going to select a few let's say we are going to get only those tool and add that with PHP we will return to the jQuery and the query will append the data to this container and now those rows will be transferred here and after that this scroll up will jump here again and reader will be able to read all those content and once the scroll is against down here we will make ajax call again select the next to return to the jquery, jquery will append again and so on so pretty much that it's very concept and I hope so that this is clear explanation and now we are going to write a code so now here at my PHP store I have created a new product and inside this project I have imaged folders and there is that for loading dot tip and there is one index.HTML file so first thing that we need to do is of course that our XAMPP serverbecause we are going to use PHP and also inside PHP my admin' I have created a new table new database jQuery infinite scroll and new table country and inside this table they are just the name of the countries and some text about those countries this is does the data that you are going to use for this tutorial and for those of you that are going to download the source code for this tutorial I also include the SQL file anyway so the first thing I'm going just to include the bootstrap libraries so that we can easily create nice looking website so I will go to getbootstrap.com for us let's get started hashtag download and I will just copy this CSS in the head of our document down below I will also copy bootstrap javascript I will paste it just before the closing body tag and of course we need to include jQuery so I'll go to the code.jquery.com and here I will select the minified version the latest one and us copy this and I will say this one does before bootstrap so pretty much that's it I love to do it this way okay so it's nicely formatted and that's it now we have all libraries and we need to include some basic design so let's say our create our container I will say class container this is from bootstrap and with the style I will does say margin top 20 pixels okay close the tab and here inside I will create a new row class row and inside this row I will have column md6 and I will say column and the offset is 3 and I will say this will be results so later we will access this class results and append all the data come to Ajax code so that's it very simple design and if you want to conduct I can show you what I want to talk to you so let's see country name and down here I will have some text about this country that's sure the design so let's refresh so here we go it's centered in the center of the screen and here is some text about country and now as we will just dynamically append this data so we can add as many as we want okay and this is this will be the result so that's it so now first thing after we have computed all libraries and we have some basic design the next thing is we need to write the jquery code so script type text/javascript okay and we are going to say document.ready function and that's it so what this part of the code is doing basically we will wait for all libraries to load we will wait for all elements to load etc and here I'm just going to call the function get data and now I will write this function get data and inside this function we will make an AJAX call to the server and get some data and for this function I will create some global variables so I'll say var start=0 which is the current position in the table limit=five which means with every Ajax call I will get five results from that table and in the example on my whiteboard I have showed how to get two but this I will show how to get five the number really doesn't matter and let's say I will have one variable which is reachedmax=false it means that if we have already got all the data from this table that there isn't reason to make another Ajax call so here inside this function first thing is to check if created max return witch means if we are at the end there isn't reason to make Ajax call and now we will ray right ajax request so I will do this and here I'm going to say URL let's say I have file data.php method for this ajax call is post let's say we are sending data type to the It's say I will have get data one I will have start our start limit is our limit and that is all we need and here I will also say success function okay and inside this function of will receive response and we are going to check this response and it should contain the data from the table and you let us attend all data to this results so let's now write the code that will go inside this data.PHP so I will create a new file PHP file and I will say data out of the ladies we don't mean and here I will say if is post get data it means if there is this basically I'm using this like all this if I have multiple Ajax call to the same file this will be the key by which I don't know which data Ajax is at the moment so this is the one and here I'm going to make a connection to our database out saying you my screen and here I will write our host is localhost and if you never seen this part here you don't need to include it if you are using sublime text add-on brackets or any other so all you need to write is this so this here is just a functionality by PHP store it just made for accorded to make it easier to know what is the next parameter so as you can see if I just do this it says I need to write the username so now the next part I don't know what it is but if I do this it will say its password and if I do again I need to write the database name this infinite scroll and that's it we should be able to make this connection and now we are going to accept the informations that are sent so we have start but I will use connection real escape string just to make some protection and here I will say post start now I will say do the same it limit and after that all I need to do is to query our database and get the informations from this table so I will say SQL equal connection query select name about from Country limit start limit okay so if you don't know what is query is doing let me show you they all go to the PHP my admin' and limit for example 0 5 ok good and as you can see let's have a link code ID 2 so as you can see it will start from the index 0 and it will get 5 rose and if I want to get only two arrows I will do this and there is a result but if I want to start from the fifth and get 10 original is both the 6 7 8 and so on so this is what this query will do ok and now here we'll check if they are some result so if number of the rows is bigger than 0 then we have some data else we don't have it so the say reach max so from the PHP will return to jQuery rated max which will be just a keyword that you know that there isn't any more data inside our table and now we are just going to get from the table if they are so close so say response=empty and I will use while loop in PHP and say while data equal SQL fetch array we will just append to this string here the data so I will see the data will be they will have one do and he will have h2 with a title with the name of the country and we will have one paragraph with the data so I will say here data name ok and here I will have data about and once this loop is finished we will return the response to the Drake query and the last thing is inside this a tech school now once we get the data from data.PHP we will check and see if response=reachedMax it will set rated next to the true so that you don't make any more ajax calls else we will do this we will find the results and append all data from the response so I will say .response because this is the quest if it was an ID we will use hash tag so results.append response and that's it this is this should be very simple and now once you have appended we need to increase this start so each time we get the next row so I'll just say he start+=limit in it and let's make a test so refresh and we have not let's see what's wrong console let's sing get it okay 8x URL data type success is functional so the mistake is right here this part should be data and our data type should be text made small mistake as test again okay so now what is the problem data that page be on line 9 so yeah I should change those because if we use single quote then we cannot use variables like this okay we'll make mistakes and here we go so now we have loaded five countries and some text about those and now if we take the network if I scroll to the end nothing will happen because you don't have that functionality but right now you can see that we have loaded five countries and something about those it means that this part is working just fine awesome so now let's just write a function that will check for the scroll position and if we are at the end we will just call this function get data again so let's say window dot scroll function and now which this means that you are setting on the object window the scroll event and we will call the function and check if window.scroll top=document.height - window.height hey you will call the function get date and let's see okay so we scroll to the bottom and as you can see we have loaded more countries school again we have more scroll again for North scroll again load more and that's it so basically if this is something that is confusing to you this here will get the scroll position from this to this part and this will get the document here and we have window hey so if you want you can just print those to the console log and see what is happening is like homework for you so pretty much guys that's it I hope that this is very simple tutorial and very useful for you and if you have any questions please post in the comments below and also if you like this video please like it and share it to your friends take care

Channel: Coding Passive Income

Views: 20,580

Keywords: jquery, php, mysql, ajax, jquery tutorial, php tutorial, mysql tutorial, ajax tutorial, jquery infinite scroll, jquery ajax, database, tutorial, jquery ajax tutorial, tutorials, jquery tutorial for beginners, learn php, howto, beginners, jquery page scroll, jquery page scroll event, jquery scroll animation, facebook, twitter, instagram, scrol infine ajax php mysql

Id: XRAlEbVL8vQ

Length: 20min 28sec (1228 seconds)

Published: Sat Aug 05 2017