Part 10

Add live book search: results appear under the search box as you type, using Ajax.

#digital technology #gce #parkwood vale #wjec

← Previous part Next part →

We make the search box in the header useful. As you type, JavaScript asks a PHP page for matching books and shows them without reloading the page. In this part: 0:01 What Ajax is 2:26 Adding test books and cover images 7:23 The results box under the search bar 11:21 search.php: finding books with LIKE 18:06 Handling no results 19:26 Showing each book with its cover, author and star rating 32:32 Adding jQuery and reacting to typing 40:53 Sending the search with XMLHttpRequest and showing the results 52:19 Font Awesome stars and final styling Software: Adobe Dreamweaver, UwAmp, HeidiSQL, PHP, MySQL, JavaScript, jQuery, Bootstrap, Font Awesome.

Transcript

Okay, so in our previous sessions then, we've gone through self-registration and
resetting our passwords. Last session, we went through how to update information
within our database. So that principle, that creating a form in HTML,
submitting the form to PHP, and then processing it as a select or an insert or an
update command would be the same process for adding books to our database as well.
I will go through adding books to the database in another video where we look at the
API request from Google Books to get that information out.
But for this video, I'm going to pre-populate the database with a few books and I'm
going to take you through Ajax searching.
Ajax searching is when we search our database without having to refresh our page.
We use JavaScript, which is a J in Ajax, to post information to our
PHP and retrieve that information, then update some form of HTML.
So Ajax itself stands for asynchronous JavaScript and XML.
Asynchronous meaning that it can happen at the same time as other things happening
within our web page. JavaScript being the language is written in and XML is just
a form of transport
to allow us to pass information back and forth.
Okay, let's get into it.
Okay, so here I am back in my student account.
And as you can see, I've opened UwAmp up.
I've run UwAmp and that's it so far.
I'm going to open up my website so I can see where we are with things.
And what we're looking at today is this find a book section here.
Now on the official Parkwood Vale site, if I just load that up a second,
when I search for a book, so if I put in Harry, it finds any books that have Harry
in place. If I just put in A, what it's actually doing is finding all the books that
have an A in the title somewhere along the lines.
So what we're going to be doing is a similar sort of process.
When we search for something. A fly out appears and shows us anything that has been
found in that setup there. At the moment, ours doesn't.
So let's have a look at fixing that then, shall we?
First thing we need to do is add some information to our database.
Like I said in the preamble, I'm going to do this via database just to quickly add
some in to work with rather than having to set up the whole page to start with.
So I'm just launching HeidiSQL. I'm going to jump into my database and I'm going to go
into my books section here. In my book section then, I'm going to go into the data
side of things that will allow me to add in some records.
So I'm going to go add for a second, ISBN.
I'm just going to make something up.
One, two, three, four, five, six.
It doesn't have to be real. It's just so I can put something in place name Harry
Potter author okay why did not take my name
Harry Potter J K
Rowling publisher who did publish Harry Potter let's have a look
in here what have I got on this one do I not have any Harry Potter
no
okay let's have a look so Harry Potter publisher
and it's Bloomsbury nice and simple
then so in publisher then I'm gonna say Bloomsbury
description I'm just gonna simply write
Harry Potter book one I know it's not official
but last one going with ratings i'm going to give it a four star image i'm going to
leave copy i'm going to put three copies in place but it shouldn't make a difference
to what we're doing in this section here then i'm going to go in and add in a second
book just to have a look at this so it's a
the isbn is the well i'd say the opposite but i didn't quite type that right one two
three four five six there we go and six five four three two one and let's see what
could we do as well as that
Harry Potter books.
What else have I got? My browse book.
That browse book doesn't work.
Let's go back to Parkwood Vale and browse books.
See what we've got here. The Martian.
Brilliant book. Let's go with that one.
Martian. Now that will allow us as well to test this wild card a
element here author I am being lazy I'm gonna copy and paste Andy weir
and I'm going to see who the publisher is by going onto my page I did
today I don't actually have the publisher Barnes education tested and
let's see the Martian publisher
okay let's bring that back and it was done by crowning
crown a guy stuck on Mars
it is the name of the planet after all let's capitalize that and I'm gonna give it I
really enjoyed that book I'm gonna give it five and I just could put it two there
but the jacket for the books are missing on Parkwood Vale if I type in a it
does use the jacket so I am gonna need to have a jacket thankfully I can just steal
this one save image as
so webp already so i'm going to go into my documents i'm going to go
into Parkwood Vale images now i haven't got a specific folder yet for the
images the jacket images so i'm going to call it jacket there and just call it
the martian actually i'm going to call it by the
fake ISBN that I've given it. There we go.
I'm going to go back into here.
Let's jump back. I want Harry Potter book one.
Images.
Good old Bing images giving me prices instead.
there we go save image as that's a jpeg i'm going to just give
it my isbn my fake isbn and i'm going to need to normalize those pictures
now in my jacket image element here i'm going to put in one two three four five
six dot jpg for harry potter i'm going to do the opposite so six five four
three two one dot WebP for the martian so i've got the jacket image names in
place there's two books added into my database that i can use when we come to do
the ajax side of things next step then is going to be opening up dreamweaver
and getting my site back up to the way that it was.
Did you just click discover? Yep.
Happy with that. There we go. So here's my site.
We have our header information.
We have our account information.
We don't need that, but we will need to add something to our header.
If I scroll down on my nav bar and find my search element here, I have the find a
book section, but I need to add something in place that will allow me to do a
response. So once I've found a book and given it back to the
JavaScript side of things, that something then shows me what that book looks like.
What I'm going to do is just go in simply here.
I'm going to add in a div and I'm going to call that div
as id equals and call it live search.
that will allow me to stylize that as I come through to it.
Now, with the style of my live search, there are some properties I need to put in
place. For example, this position, I want this position to be absolute,
meaning that it's relative and it doesn't move around at all.
It's linked to exactly where it is.
I'm going to say that from the top of my page I want it to be 55 pixels
down and then I'm gonna say that its background is made up so background
itself there is background thank you very much
is an RGB color which is and I'm just reading from my other screen here
for what I use for Parkwood Vale, which is simply 239 each way.
Now, what I'm using here is inline CSS.
It allows me to add some CSS stylings to this section without having to sort
of set it as a style elsewhere.
It'll only apply to this div section here.
Now, I'm going to tell it that the maximum height that I want this to actually be
so it's controllable is 30 and I'm going to
use the em function which is 30 or 20 then a size
relevant to my page I'm going to say that it's overflow
on the y-axis is set to scroll so
if there are any more elements so it goes over the size of this 30 em
it will automatically create the scroll bar functionality for me i don't want
it to overflow the other direction so my overflow on my x-axis is going to be
set to uh hidden so it's not seen in any sort of way.
And the final property that's really important with this is that I'm going to set
its Z index, which means what position it holds on the
layer of my page is set to 100, so it's right the way in front of anything
else that I include.
Now, if I save that and I reload the page here, we'll see
that actually nothing's appeared in because I haven't actually given it any content
of sort yet. But when it comes through to it, and actually I didn't even put that
up. So let's put that up first.
There we go.
And refresh that. And still nothing because there's nothing inside of it, but I have
put it up. So it would have made that difference if needed to.
Like I said, though, when I add some content into it, it will be bound by these
style elements here.
Now what I'm going to do next is create my search response
element that will be triggering what happens within my finder book section here.
And I'm going to do that by creating a new PHP page.
So I'm going to right click here, go new file and that's going to be my new search
PHP.
So I'm going to say search.php.
And open that up a second and let's clear out all of these elements.
As always, I'm going to start with a PHP tag and I'm going to start with a session
tag so that it knows that I am already logged in and it can use any information
it needs to from my session to regard information.
And I'm going to include the connection to my database.
So I'm going to say config backslash connection
dot PHP.
Now that's all in place there.
I'm going to end my PHP tag. I'm going to save this search page and I'm going to put
that search page up.
What I can do then is go forward slash search and I should get a
blank page. I get no errors because I haven't asked it to do anything fancy yet.
The next part is the complicated part.
The next part is the interesting part where we set up our SQL to find what it is
we're looking for.
So I'm going to say my $SQL command is equal to, and it is going to be a select
command.
And I want to select all of the information.
So I'm going to use a star symbol as a everything category from,
and the page I want to select everything from is my books
table sorry not page books table I then want to say where
and I'm going to say books dot title so I'm talking about
title and this is where it gets interesting I'm going to say like rather than using
a direct representation I can use what's known as a wild card and by putting a
percentage symbol around my information, what I can effectively do
is say, I want it to sound something like this term I'm putting in place.
Now I've got to wrap that in single quotes as well there, which does cause a little
bit of a confusion for PHP. But there we go.
Now that search term there, if I put A in place, that wildcard would select
everything from books with the title contains an A at any point.
And that's because I have a wild card before it and a wild card after it.
If I only had the one wild card, that would look for any book that starts with an A.
If I only had the starting, it'd be any book that ends with an A.
By having the two wild cards, it's any book that contains the letter A.
And that's all in place at the moment.
I'm going to use my usual dollar sign result.
$result equals $connection query
and $sql
to put that in place. I'm then going to print underscore R just very
simply here a second to show you what's contained in result.
and save that. Let's put that.
And if I refresh this page,
I get nothing.
Shouldn't have got nothing. Let's see.
What have I not done? I did definitely put that page two seconds ago.
There we go. Let's go to my testing server.
Search is definitely there and contains all of that information.
That's exactly what I expected to see.
There we go. Result equals connection.
Very strange. Do you know how my books have, they do have A's in the title.
Let's echo out simply dollar sign echo dollar,
why did I do dollar sign? Simply echo dollar sign SQL.
And let's put that up.
When I refresh this, I get my query brilliantly.
Let's copy that query. let's check it into my database
and run it books title ah okay
books books ddd what I call it name there we go
from books with books dot name
and save that let's put that up there
refresh that and now we have some sort of response.
So we don't longer need to echo that side out.
Let's save that again and put that
and there we go. So we now have two rows being given back to us
and there are eight fields for each of those rows.
So what I can do is set up my display to loop through each of
those rows.
so I'm going to put in a instead of a print here while and again I say dollar sign
row equals
result fetch associated rows fetch
underscore ASOC
and there we go and put that in place
now that's going to loop through for each of my records and put out the information
I wanted put out if i put that up there it will do nothing at the moment because i
haven't actually printed anything but if i printed uh let's go echo dollar sign
row and i want to just echo out simply the name
save that put that up and
refresh it it's not happy with line eight not realign eight name Why
is it not happy with name?
Okay, let's go.
Select start from books like that.
Let's take that out.
And call to fetch_assoc. Why is it not happy with fetch_assoc for my results?
Perhaps I need to check first of all, if I have any results to be found.
So I've got my link there.
to say if dollar sign result
and I want to say num
underscore rows doesn't equal zero
actually if it does equal zero I'm just gonna do nothing
so I'm gonna simply
come here they break out of that PHP let's come back into PHP right
here and that nothing has been found.
So I say div class equals and I'm going to put this in a col
md12.
Inside that column what I'm going to do is simply print out a heading number
four saying no results.
So now I know that if I see no results that it hasn't found anything in place
and refresh no results okay so
that's giving me an error it didn't find anything like this where books that should
be named not books that should now give me a result at least because we did expect
to see a result and after that if I'm gonna say else
and wrap this down here inside my house.
Let's jump in a little bit because we're not going long lines today.
We can actually see quite a bit there.
So just to give you a couple of seconds to read that.
Start the session, include our connection, create our SQL query, run our query,
check if we have any results. If we don't, tell the user we don't.
If we do, come into this section here where we're echoing out our information.
That's where we're at. Let's put that up and see what happens over here.
Okay, brilliant. We're back to the same issue, but now it's on line 16 instead of 8.
So it doesn't like something along here.
Why is it not happy with my name row then?
Let's instead
print underscore r and have a look what's inside row.
So we should be able to now see what's going on with row.
Let's just double check. I have got results, but right there I have.
Brilliant. I got fetch_assoc. Doesn't need capitals.
It's in its elements there. Perfect.
Fine. And let's run it and see what happens.
So in our associated array, we do have ISBN, name, author, and so on.
Let's go back to echo and let's see if it's just being very pedantic.
Row and name, because that's thing I didn't do was I didn't capitalize that
in. Just run that and refresh.
It's expecting an issue. I've forgotten my semicolon.
Save it. Let's put it and refresh this page here.
Happy days. It's not working. That's all I expected to see.
Two different book titles.
Now all we've got to do is populate how the books look.
So when we have no information, we come back with no rows.
When we
of information to show them how it looks.
I'm gonna break back out of PHP by here and just simply make sure I put in my PHP
tag here to get back into PHP so that everything's in place.
Now my echo there won't work that's perfectly fine I don't expect it to I'm gonna be
putting in some base HTML with some CSS and it's just easier to come out of
PHP for that. I'm gonna put a couple of div tags so I'm
that is going to be my row tag.
I'm going to put some padding around it so I'm going to put a ps tag in place three
and I'm going to put some margin across the top of it.
I'm also going to use three for that section there and that's my first div.
Inside that div then I'm going to put in a column so div I'm going to put in class
and it would be a column so col-md- and
it's a three width column nice and simple that there is going to be where my image
tag goes so I'm going to check image in a second and just do source
equals and it's going to be let's
see the base root we double check my naming images forward
slash now in here let me just move get this in place you will see that I have the
jacket there but if I go to my testing view in image I don't have jacket
yet so I'm gonna have to put jacket up in a second but we'll deal with that in a
second I'm gonna say jacket here forward slash and I want to adjoin to
it my php element and I can do that just by checking a php tag in place here
and echoing out echo should be dollar sign row
and remembering I have to capitalize image
that should echo out my image now if I save that for a
second and I find my search my search up and
I was to refresh this it's come up there telling me it can't find that picture and
it actually says here the undefined index image in there
let's just double check I'm not calling it the wrong thing by printing print
underscore r again dollar sign row
right and let's put that up refresh
jacket image okay so I was calling it the wrong thing in here I want it as
jacket image it's still not going to find that picture as I explained earlier I
haven't put it in place it's still going to be an image error but that will be
seconds time alongside my jacket image then i need to now put in place a
div for the rest of my jacket details its class will
be equal to a col md9
giving me my sizing and this is where i'm putting in place all the
other information about it so i can say a href because i want it to have a link
on it is going to take me to my view book page which we haven't created yet don't
worry about that and inside there i'm just going to say very quickly turn caps lock
off if i confuse myself um full stop book and forwards
uh dollar sign so i want to say it uh is
bn is equal to and i'm going to echo dollar sign
row single quotes isbn now i
know book isbn page doesn't exist yet but we've got that in place so that when we
have created it that should work if i click anything within this section then it
will go through and do that i could wrap my picture in there as well but I'm not
going to at this stage I may change my mind a little bit later on
underneath that then inside the my link section here I'm gonna have a paragraph and
in that paragraph I'm gonna have some details about my book so I'm gonna put in
place a PHP type to echo out the dollar sign I want row
in there and I want the name of the book
and let me just save that and
what exactly I included in Parkwood Vale's.
So if I put in Harry, I got the name, I got the author and I got the star
rating. So I got name there, I'm gonna do a similar concept.
I'm gonna do that there and just simply put in author.
Let's make sure I call it the right thing.
It is just capital author. I'm gonna be even lazier and copy it from there and paste
it there. And for now, I'm gonna do the same thing.
I'm gonna do star rating.
I think I just called that simply rating.
There we go.
Now, if I save that and I put that up and I refresh my page,
I get JK Rowling, Harry Potter, four.
Andy Weir, The Martian, five. What I expected and still have an issue with that
picture, which is what I expected.
To fix the picture with the images, what I'm going to do is click on my jacket
folder here, press the up image,
in is coming okay there we go all done now when i refresh this i get those images
those jackets they're included that one's huge that one's not it is a good idea to
try and resize and make sure all your images are the same in place so in my jacket
here then let's have a look actually if i go inspect on that jacket because that's a
decent size for it is 128 by 203 so in here image source
d to d to d i didn't include name and image tag how bad of me there we go i'm going
to say width
equals and the image width here was 128 pixels so i say
128 pixels i say height
equals and let's go back and double check a second that's 203 pixels 203
pixels
there we go so let's not put that up let's put this up and refresh
this and they're both the same size perfect i don't need this array element this
here at the top a second i can get rid of that so i can just remove my print row
because i'm happy with that and that's all gone now my star rating this is
a slightly different setup because i have just echoed the rating here but I want it
to look a bit better than that.
What I'm going to do is inside my PHP section here, then let's just drop this down
and echo this out a little bit better off.
And I'm going to say that my possible star rating, the total number, my stars,
so dollar sign S is equal to five stars, top rating it could be.
I'm going to say my star rating, my dollar sign SR is equal
to my dollar sign rating, row sorry, and in my row it's getting
me my rating element.
Now I've got that in place there.
I'm going to say for, check a loop in place, dollar sign
iterator at zero,
dollar sign iterator is less than dollar sign star rating.
I want it to increase by one dollar sign I and I'm going to go plus plus.
And what it's going to actually do in this section here is remove
one from my star rating. So my S here.
And it's going to echo out for me
a span.
Let's see how well this works.
Class equals. Now, I know it's not going to show very much at the moment, actually.
Can I do that? No, I can't do that, but I can do these.
And we're going to have to include something else in a second, but we'll get to
that. I use a font awesome fun awesome star
and I've got that there
now I'm gonna that
closes there and let's close the span
as well
there okay that's in place now that's echoing out my stars
and I'm gonna add in a class called checked which will hopefully when we get around
to doing it or when we've programmed it in change those to gold.
I'm going to repeat this then this whole for loop for the remainder
of my stars. So if it's a four star rating it will span out four
checked stars.
Otherwise it will span out four whatever remained at normal stars and put
that in place.
now if I save this and I put this up I know it's not going to do very much at the
moment because I haven't got that font awesome in place when I refresh it you can't
see anything there
that's perfectly fine because we're going to include font awesome on our main page
which will allow us to see our star rating I wouldn't expect to see it by here but
that span class is in place for my star rating my row rating if I was to go
back and I was to inspect
And look at this. Inside my div, I have my image, which is giving me an error there.
And I'm going to look why image must have alternate text.
I haven't done that. I'm going to go down here.
It's giving me my clickable stuff.
Inside my clickable stuff, I got my paragraph.
I got my Andy Weir as the title.
And then I've got the five star checked elements.
That can't be seen because I haven't included anything to show them.
We do the same thing inside Harry Potter.
A second then. Expand out these properties.
you will see that there are four checked and one non-checked.
Again, not being shown because we haven't included Font Awesome in this section, but
they are all there to be seen.
So that is the layout of what I want to represent in
this section here when it drops down.
But obviously we don't have that dropdown in place just yet.
So that's our next step then, is how do we get that information to be requested and
put in place here? We've got our search there, and at the moment it's using always
searching for books with A in their name.
We want to replace that. We're going to replace that with some information as we go
forward. But what information do we replace it with and how do we do it?
That is where our Ajax element comes into place.
So our Ajax element is going to be available on
all of the pages that our nav bar exists on.
So we need that in our main footer for our main document.
So I'm going to go into my footer page here where I have the footer content and then
my JavaScript element. And that's where I'm going to be putting in my Ajax searching
elements. So I'm going to put in a script tag here
that will allow me to script my JavaScript.
The type is going to be of text and then it is going to be a text
JavaScript and I'm just going to simply finish that off.
So there is that element there and what I'm going to be doing is using a mixture of
JavaScript and jQuery which if I'm looking directly here I'm not sure if I've
included jQuery so I may need to include jQuery as well and
use that to search through these facilities.
Now jQuery I just mentioned a couple of times is a JavaScript library and
if I have a look very briefly
That should be okay there. So what I'm going to do is search for
jQuery CDN. Now,
CDN is a content delivery network that allows you to effectively
grab jQuery and use it within your website without having to download and install
and put everything in place. So I'm going to go for the minified version here.
I'm just going to copy my jQuery tag there and I'm just going to put
that because it likes to be first above these sections here If I
save it and just put my footer up for a second Just to make sure that hasn't messed
with the way that my website works as is I
Still get the fly out jQuery hasn't upset that and I'm going to continue and use the
jQuery elements within my section here
now what jQuery allows me to do is target different elements so I can use the simple
dollar sign expression open a bracket and then say that I want to use the
ID so the hashtag of my search which should be
from my header section the ID given to my search bar and I'm going to say that
when the my search has an input so I'm going to say on and I'm going to say
input
Then I wanted to do something and what I actually wanted to do is run a function for
me the function is going to be requesting and finding that information out
So I can say that there Let's just bring this down and end that there and it is an
empty function So not passing any parameters to it and to start with what I'm gonna
do is get to alert
So I can check that it's working and the alert is simply going to say
now if i save that and let's put that footer page up and
refresh here if i type in here i get an alert that says hello and every time i
type it's giving me an alert doesn't matter what it is i type it just gives me that
alert i'm pretty happy with that that's exactly what i expected.
What I want it to do though is I want it to tell me
what it is I typed.
So I'm going to say that my value comes from
the dollar sign this expression so whatever's posting it dot val.
now if i save that and i actually need to wrap that as a function so save don't
duplicate save and put that footer up refresh my page
now if i put in g it says g if i press delete it says
nothing if i put in h e l
l o very slowly i spell the word hello and when i delete it
So we don't want it to fire and try and search every time it does something because
if there's nothing in there, then we don't want it to do anything.
What we can do is compound this with a length check and see what the length
of our input is.
So if I go up to here, refresh my page now, and I put in G,
it's not happy with my length function because length isn't a function.
It is just a property. There we go.
Save that. Let's put that up.
and refresh.
Open in G, it says one. If I say G, two, every time I add a letter, it is increasing
the length of the input on this box.
And if I go like that, it says zero.
So what we can do is say, instead of alert, I'm going to say, if the
length input is equal to zero, then
we're okay. Don't do anything at the moment.
If it's not equal to zero and say else that's when I wanted to do something
and we're going to bring back that alert in place just very quickly and use the
value again just so that we can show our alert is working.
Save it and let's post it.
Refresh. Perfect. So if I put in H E
L L O
we get hello. If I delete it we don't get anything.
If I put in R and then I delete the letter R we don't get anything because
it's falling into this section here and it isn't doing anything.
Just perfectly fine that's exactly what we wanted to do.
in fact we're going to go a step further and we're going to prepare ready for what
we're going to do because we're going to say that our document which is the current
working document that we're working on i want to get element by id and as you can
see it helps us and it already puts that in place similar to our javascript we did
with our sliding image gallery we use class name there this time we're using id the
id that we're going to be looking for comes from our header which is my
I say live search there and I'm going to say that the live search dot inner
HTML
is equal to nothing that clears it all out and gets rid of it
and I'm simply going to return to say nothing on this response
I'm going to say document dot live search inner HTML equals And I'm going to say my
value. So whatever it is I've specified and put in place
Let's save that and put that up instead We don't need the alert Really let that
confuse things that would break things.
Let's get rid of that save that and put that up
And refresh so in here now if I put in H E LL O
you can see that the content
I'm typing appears in the
box below.
And it actually has that set restriction, so it can't go over the size of that
space. And if I delete it all, the box disappears.
So that is working as our basic element of searching, updating our page,
using those AJAX functions, but not actually changing anything.
We now need to focus on this section here and we want to change it so that it brings
back the information from our search page and displays it in that section.
And the way that I'm going to do that is to set up a new element called
xmlhttp equals new and surprisingly it's going to be an
xml http request and that is going to set up my
request that i'm going to send to it my xml http is going to be an on
ready state change function
and that is going to be a new function called and again it's going to do nothing now
i know we've got quite a few functions on the go here doing different bits and
pieces they are all needed to work as we expect it to what that's
going to say is have a request to my server and on ready state
change then execute this rather than just going off and getting it
now inside that i'm going to say if this as in my xml
ready state and i'm going to say ready
state
equals
4
And I'm going to compound that with a this dot
Status
Because I want to check the status code coming back out is
Equal to 200 which is an okay.
Everything is fine status. Then I wanted to set my document value
2 and let's tab that in
out and it is going to be instead of this value it'd be this as in my
request response
and it's going to be the response text so whatever they get from this request when
it's ready if it's a valid request then give us that response in this
if element
let's bring that back one line
and if did it just making sure all my tie-ins tie up nicely
So the XML request, the HTTP request that I'm going to put in place
is going to open a connection.
And the connection is going to be a style of get because I'm going to use a get
string like we did previously.
It is going to be going to my search page.
And it is the PHP page. Now, I know that we don't necessarily use .php with the rest
of our file names, but we do need to include it here.
I'm going to say $. My query, I'm going to simply put down to Q.
And then in there, I'm going to say plus $ this.
And this should be in brackets.
There we go. Dot val.
Now, the last parameter within this open element here is just simply going to stay
true.
So that's going to send that request.
It's going to call this request here,
recall it, and once it's ready, give me the response it's got.
The last part is going to be the XML HTTP request.send.
So now what's going to happen is if I enter something and it's longer than
nothing, it's going to set up a request.
It knows what to do when the state has changed to 4, which means it's got a
response, and the status is 200.
my live search with the response it gets from this search.
Now this search is passing a parameter through which we haven't defined on our other
site yet, but it's all set up and we have our jQuery in place.
If I save this and I put my footer back up, what I should be able to do
is refresh my page because it does need to update the JavaScript at the bottom.
And if I put something in this box here,
should search and respond to me.
But for some reason, I'm not getting anything.
Let's have a look at my inspect.
I do have errors in inspect and it says, failed, use the new operator.
Okay.
So where did I forget to put the new?
Here.
And now that we've got the new operator in place, let's put that up.
Refresh this. I'm gonna keep this open just in case I've made another mistake.
And if I put in the details, look at that.
back. If I get rid of it, it comes back.
It's fine in all books at the moment because I haven't told it to do anything
different.
In here, if I go back to my search page, remembering I called q in my get string,
I can change this to say
$sign underscore get.
yeah just making sure i didn't mess that up there we go and i
simply want to say q for my query now if i put search up
the brilliant thing with this is i don't have to refresh my page anymore
because it's going to that search page but it's going asynchronously So
if I put in a it will find them and it's also giving me an error which is not happy
with q and an undefined index element there.
Let me go back in. Let's see.
Get q there in my footer. I'm saying search.php.
q is in my get string.
Search. q. Save.
But.
Okay
That all looks pretty alright
Why does it not see
Undefined index Q
Sources let's go on to This page at the bottom here.
This is just a back end of it search equals Q
Okay, let's do search
I'm gonna say Q equals A.
If I search without Q, it's not happy there.
If I do search.php, Q equals A,
should be working fine because if I put that in there
as the Martian has an N but Harry Potter doesn't, it only brings back Harry
Potter.
um perhaps it shouldn't make an issue
right let's have a look at the javascript on here and
see what it's doing inspect so sources and
i want to come down to here so what i've done here is i've used the
sources section of the inspect and I put a breakpoint there so when I hit that
breakpoint it should pause as it has and I can see what information is getting
there this val is there
and possibly give me an error on that section there because q hasn't been given that
right element let's come back into here and say dollar sign this
should be working fine ah
val is a function val does need a function let's put the footer in place and pop
that up
and i can get rid of that breakpoint i can get rid of the terminal element because i
am very confident this is going to work but this time i do need to refresh because
i've changed the JavaScript at the bottom of my page.
I put it in N.
I shouldn't have been so confident.
Why didn't that work?
Let's footer save Q
equals. I've got the equal symbol.
Put the footer up and refresh.
N. We just get the Martian in place.
We no longer have that additional information.
We only have what we want.
Now I am in a situation where my book has been displayed and the title is there.
It will take me to where I expect it to take me to, but if I put in
A there, if I put in N, it gets rid of Harry Potter.
They are working, but the layout isn't quite what I was expecting.
Not quite as nice as it is here.
Now let's have a quick look. So we've got our search page here
then.
We have our row. We have our elements for our row.
Let's see. So div class row. Div class md3.
We've got a size.
I am also setting the size quite harshly there, which if
I go back,
in n there, that book is quite big, if I put in n here, the jackets are a lot
smaller. What size is that jacket there?
What did I use on this version?
That is 48 by 74. So let's say instead
we do 48 by 74 pixels. Save
that. Let's find search and push search back up and
and that is much more in line with what I was expecting to see
the Martian and you we're not going down the second line I wanted to go down on a
second line so I simply put in a break
and let's push that up and again because it's Ajax
I can just do that now it's gone over to that side there let's actually remove our
width section for our picture and see how that behaves because it should be governed
by our columns here and our different elements in place so
let's put that and let's go and
nope it's not liking that let's check those back in for a second then
save and let's put that up.
Let's do call eight and margin left two and
put that up and see how that looks.
It's a little bit tight, a little bit squashed.
I'll leave with that for a second, leaving that there.
I'm not going to overly fuss with that.
What I did say was that this isn't necessarily showing its rating because it
doesn't have in place the elements needed for our star rating and one of them being
font awesome f a star on my header page then on my header section here
where i include a lot of css elements i bootstrap on those different bits and pieces
i want to use and again a cdn for font awesome
now font awesome comes in a variety of different
awesome 4 is free and open for most people to use so font awesome 4
cdn if i go into here there is the font awesome css and actually that's using
version 6. as i've clicked onto it it's copied it so i can just come over to here
paste it
is a type of CSS link
and rel equals
stylesheet there you go so save that let's check
header up
and refresh my page.
Refresh my page. Now, let's see if it's worked.
And we're getting somewhere. We have empty boxes.
Now, I use Font Awesome 4. I wouldn't necessarily use Font Awesome 6
in this regard because it can cause issues.
So let's go back to Font Awesome, CDN Libraries.
I do want font awesome forks. I know that had my stars in
it and it was 4.7 I used and here we go 4
.7 CSS.
That's the one I want to copy URL.
So let's put in place the version I know included my
stars up that and refresh my page a
couple of times but in the end we have stars our stars are in place they are links
so let's go back into our search box for a second and again we want to
break row so we get on to the next line and let's put those up I don't necessarily
want the star rating to be that color for my a so i'm going to end my a tag
there and that will also cause issues my p tag so
let's go paragraph there and save
and let's see how that looks now again because it's ajx i can just delete it
we get this here there's our stars the only thing we don't have is that checked
value where I want to set it so that it changes color to gold if it is
checked.
Now, what I can do is simply put into the normal header section up here,
and I'm going to go as a style tag,
and that I'm going to say dot checked,
which was the style I used in my search element here.
so if they are checked they come there and it's a color
is gold
go golden rod looks quite nice color actually and save that in my header
section header put that up and
hey hmm
inspect element why did it not like to change the color
of my star checked
okay let's go color
golden rod yes that's
be like perhaps it didn't pull through and update that so let's check this in a few
times there we go head let's check there's my style check
there we go okay and then we have it they are now coming through correctly with
this star rating colored in golden like I've got on Parkwood Vale so I've managed
to put all that in place the only thing I'm having issues with at the moment is my
padding and the layout elements I've got there.
And let's go search. I've got this in place here.
Padding, D2D2D.
Let's check this back to nine.
That's got that there. Save that.
It's going to come through. It's going to put that in place.
Where can I try to add some better padding?
That's on my search. Let's check that up.
and put in a
okay so inspect let's have a look at this and we're going to
bring this over to here our picture there image okay
let's say margin
and i want say two pixels
that's not having any sort of impact at all that's not what we want to do we don't
want to put a margin on our image there that hasn't made a blind bit of difference
why is our picture what if we set instead attribute
width to be 100% of the box that
up and we get rid of the height element restriction altogether
you look at that so that's fixed that exactly
how I want to do so let's go back here width is gonna be 100% of its parent its
height is going to be relative to its width and I'm gonna save that I'm gonna put my
search up if I close that I will this page this time is to clear the CSS out that I
edited on the side there and if I put in a we now have that in place and we have
those two books and I'm going to check in a few more books up here a second I'm
gonna go to data let's copy I'm gonna duplicate rows with keys
and all I'm gonna do is add another thing there just so that we can say another book
so I'm gonna say not the not Martian and I'm going to do something similar with
Harry Potter.
I'm just duplicating keys with rows.
There we go. S and Harry Potter 1.
Okay. Now, if I go back into here and I delete that and I put in A again, we get all
of those boxes appearing.
Now, what height did I specify with my maximum height in this section here.
Let's see.
No, it was in the header in this section here.
I said that my position relative maximum height was 30 EM.
If I used to change that down to 10 EM and save that and put my header up.
Refresh.
We then have our scroll bar because it's taken up less space.
So that has allowed us in this section to put in that flyout window,
use JavaScript to search our database and find it using AJAX and pull it all
together.
Hopefully that all makes sense and now I'm staring at it.
Hopefully I record the right screen as well.
Let's see how that goes.
Thankfully I did record the right screen otherwise that would have been a very
painful hour to go back and do the whole thing again.
Thank you again for watching. If you have any questions any issues or anything like
that please don't hesitate to get in contact and I will do my best to support you.
Thank you.