jQuery & Ajax & PHP Tutorial: Load Website Content Dynamically (Faster)

who will do better on human or goldfish
do you think that your website will be seen by a human or goldfish let’s find
out hey what’s up guys Senaid here from codingpassiveincome.com the place where I
help others to become a web developer much easier and faster than they will
do it on they own so that is something that interesting consider subscribing
recently Microsoft Corporation released a study where he talks about the
attentions of a human and a goldfish and one main point from that study is that
human attention is 8.25 seconds while the goldfish attention is 9 seconds and
for those of you that doesn’t see why this so important it means that if our
website is loading much slower or even this time it means that you will lose a
lot of visitors and for that reason it is extremely important that your website
speed is under this 8.25 seconds or slower and the ideal will be under 5
seconds so industry doc I want to show the base on how we can load the
dynamically data for your website so first before we even start to this
tutorial I want to explain you the basics that you need to understand so
let’s say that we want to create one website and let’s say inside this
website they will have the place we will load a lot of the content and from the
right side we will have one sidebar and if we do not load the data dynamically
it means that this is we’ll have to wait while all content
here is loaded and all content here is loaded and as a result it can happen
that your wrists are eight hours longer than our human attention is so we answer
at the lockers we always try to find a waste load website faster and the goal
is that first we load quickly all the HTML elements and CSS libraries and
later all the things that we can do dynamically do does that so in this video
I’m just going to show you let’s say that we have one table country and
inside of table we have a lot of the data and here we are going to display
that data and here we will just show the shortcode of those countries and the
group what how we are going to achieve that we will just lose the basic element
and after that inside jQuery we are going to wait for a complete document
load and once it happens we will from the Ajax make a call to our PHP let’s
say here PHP is going to get the data about countries return the data to the
jQuery and after that jQuery will append all the data here and which means that
in extremely short period of time we’ll achieve all the content here and once
this content is loaded we will use jQuery again make requests the PHP
return but this time we are going to put all the data inside this sidebars such
crises we have loaded all content here and all content here dynamically which
means that only few parts of our website has been loaded directly so let me now
show you how to do so now here’s my PHPstorm I created a new product and run
read.php file so this file is the file that we are going to use to
read the data from the table that I have created country table inside this
database so here is some basic information is nothing special and the
goal is to make a read page just like I have on my codingpassiveincome blog so as you
can see I have here a list of all tutorials and when you click we will be
able to read about this post and here at the left we have some content and here
at the right we have some sidebar we are loading popular readers recent leaders
etc so all those things are dynamically and I’m going to show you how to make
that so first thing that we need to do is we will design this website so I lose
boost up so I will go to the get boost calm for us let’s get started and
hashtag download and I will copy this okay oh that include CSS from the bootstrap and down inside body I would have design our website so I will see container
style margin top top let’s say 20 pixels okay and we will close this and
inside this container I will have one row and here I will have one class=col-md-8 and down here let’s duplicate I’ll have an 4 so this md
8 is for our content and this is our sidebar and as you can see i am using
all classes from the bootstrap so for those of you that don’t know what this means
just do some rumors it removes upgrade system and also for those of you that
want to download the source code from this tutorial you will find a link in
the description below so let’s first load the data that will
be static and loaded at first so that you can see the difference so at the top
I’ll write PHP code and let’s say here first I’m going to check is there any ID
that that we have so this ID basically represents ID inside our country table so we will say if let’s say not isset GET
ID we will just redirect that person because he came here by mistake or he is
trying something that we doesn’t want and let’s say at the top I will have one
function resurrect that is going just to redirect the visitor for example to my
index dot PHP file for this tutorial I will always have ID and also I don’t
have index dot PHP file but for you when you make some real functionality this is
the code that you are going to use and down here let’s say now we need to make
a connection and check do we have any data related to this ID so let’s say I
will make one php file let’s say connection and inside this file I will
just say that my host is localhost want to make it simple for you
my babies user is route and my babies
password is an empty I don’t have an ID this is jQuery I’m not sure do a payload
website and I’ll take a little outside dynamically so we don’t need to create those
variables but I’m just trying to make it as simple as possible for you
so create new variable connection people new mysli and here you just specify
all the informations maybe I should say this is datebase name like this and
now we will just include this file and it will automatically connect to this
database also we can do some additional checking healed if we have successfully
connected but let’s not focus on that so required connection.PHP and here I
will say post ID=connection->real escapestring (get ID) which means we are
trying to protect ourself from MySQL in action and now let’s see how many rules
do we have in our table shall say clay and heat I will say select name’s about from countries where ID
evil force hiding and if a squad number of roles because than zero even if we
don’t include this it’s a word but I love to use it and he else will elect so
if someone tried to manipulate the ID and specify the number that doesn’t
exist in the database they’re just going to redirect that person somewhere else
any way you want it might is its index.PHP file and here let’s say you will
have data equal as well first five so in the variable data I
will put the name and about so what you can do I can say like this and see the
data so let’s see refresh and as you can see we have an array and it is
associative array we have key name which is Afghanistan and we have keep about
it’s quite hard to find it’s right here so now let’s display this data just here
so let’s look at one

PHP see echo data name let’s duplicate this I will
say here about and I will change this to the parlor and let’s see what’ll
happen so as you can see now inside our content I have loaded the name of this
country and some about text we can also see he
Center and the title is does in the center of this content and this is the
most important data in our case and we have loaded exactly that and as you
can see now we don’t have a sidebar at the moment and they do not have any
additional countries down the road that I have planned to include like you can
select restore to read about other countries etc so in order to load sidebar here I will firstly I will put some title let’s say again align Center and
here ll say country course and I’m going to create one table let’s say class will
be table we want to enable hover and let’s say this table will be border
again those are all the classes from the bootstrap and let’s say I will have one
table board and inside this table body I’m just going to append all the data
our database so now the next thing that you need to do is need to include jQuery
library so just go to the code jquery.com
and here click on the minified and cooks very simple and unfold here okay
so I like to do it this way and down here we are going to write our
jQuery code so see text our script and here I’m going that to wait for a
complete document load so I will say document.ready function () so once the
document has been loaded I am going to make a call to the function getdata and
I will specify some key so that you know what content I am trying to get so here
I can say function getdata and here I will say key that’s my key and let’s
make a deck score so for this a dress code I will say that URL is that they
will have another file ajax.PHP method of this a to echo is post data type
that will be returned from the server I will say text and data that I am sending
it to the server is that the key okay and the last thing
that you need to do is to rise access function which means here we will expect
the code that is returning from the server and once we get let’s see what is
the best way to do it so I will say if our key is get sidebar it means that I am
going to include all the data from response to our table body so I’m going
to do that just by making up object and saying that attend response okay so
that’s it other man and now I’m going to create a text file and he I’ll see if is the first key we
will see required connection.PHP and he we will see if our post key=getSidebar
will execute this part of the code because we are going to help
another key that will get the additional countries so at the top healthy response
okay and he will see ask well equal connection query and if you don’t
remember this connection variable is declared inside connection dot PHP it’s
right here okay and here I will say select we need name
and country code so let me show you name is May of the country and country code
is just short code country code from country okay and we will use while sql
fetch_array so if you don’t understand this part of
the code we are basically using the PHP while loop and going through each and
every row in the table and getting the row by row so for those of you that are
not usefull with this there is another tutorial my youtube channel you can find
that one and learn about this concept and here I would say I will concatenate
the string to the response so I will see here we will have table row and inside
this table will help column like this let’s duplicate and see
country code and of course other and I want us to return our data to the jQuery
right and now he did help me properly this should work so let’s make a test so
yeah there is some problem because I have written a lot of the code so the
unexpected token let’s see it looks but I have forgot to save Connor let’s make
again and it is working novels so as you can see again this is directly load and
dynamically have this sidebar with all country code and the last thing that I
want to do is to go dynamically the some three random countries download this
text so how we are going to achieve that well we’ll just make another call and
say he gets other countries okay and in the ajax.PHP I will does duplicate
this change the part is to get other countries and
here I will say we need name and for description from country holder by
random limit 3 so it means that I want to get 3 random countries from the
country table and that’s it way isn’t and I will change this I’ll see the
quest will be column md4 so each country will be 4 I will change this to the h2
and let’s see align center and I will change this to the party so let’s make a
test again refresh so it’s not working because I didn’t specify this he said I
need to say else we are going to append the data and we need to append here so
let’s say we’ll specify ID content and I will see he content let’s make a test
well as three country poor so this year is good probably has some typos country code the problem is he short description and
of this so now as you can see we have those three random countries if I keep
refreshing little each time be different so here is the most important part this
is why the visitor has came to this one to this page you want to read about
against and down here we are giving him an option to read about some other
countries and here from the right side we have a list of the short codes so how
we can improve this is that to give some link to those titles so or Oregon does
say here like paragraph a line for example right let’s say he read more it
here and will does let’s find out the link so say 8th fret here and the link
will be read PHP ID equal and now we need to specify ID and he told us say
theta ID and let’s this okay so let’s say I want to read about this country
read more and I can read about that one so I want to read about this again and
so on and also on the same way we were able to
specify the links for those titles but that I’m sure you already know how to do
it anyway guys I hope that this is very simple and useful tutorial for you and
if you have any questions please ask in the comment
below or if you just want to say hey this is great tutorial that will be
awesome too

16 Replies to “jQuery & Ajax & PHP Tutorial: Load Website Content Dynamically (Faster)”

  1. Heya Senaid, I was waiting for this tutorial. About, how to create dynamic websites.

    Got only 2 questions:

    1) I saw in your video, you putted text out the about table, with next line in it <br>. How do you do that, with writing that in your database and fetching that out, like you did?

    2) Is this also, the best way, to store images links, in the database. With this method?

    Thx =)

  2. I love your tutorials, educational and as a beginner I gradually understand the ideas and tutorials.

  3. It is really very useful. Can u please make an video on how to make our database data more secure for displaying on website ?

  4. I'm reliably told that goldfish have a memory span of 6 seconds….so neither if the memory span of people on websites is 8.25 seconds

Leave a Reply

Your email address will not be published. Required fields are marked *