Create a favorite button

- [Instructor] In this chapter we'll build a small scale project to demonstrate how to create asynchronous buttons using AJAX and PHP. Asynchronous buttons have become common in modern web applications. The idea, there's a small button or a link or an icon or something that you click on the page and it makes a small update to the application state. Maybe you're liking a status post that someone has put on Facebook. Or you're favoriting article that you like. Or reacting to something. Or maybe you have a blog post and you want to publish it. All of these things can change the state of the application without us having to reload the page. It's especially useful when there's a lot of items on the page and we just want to quickly make a change to an item by pressing a button. The process in every case is the same. We notify the server about the change. The server updates the database so that they can keep track of the change. And then we can visually indicate the change to the user on the webpage. So they can see that the change succeeded. In our project we're going to create a button which will allow us to mark one of several blog posts as a favorite. I have a new project started inside my Sites directory called AJAX_BUTTON. This is included in the exercise files if you have those. If not, you can certainly create your own. Let's start with index.php and take a look at what's there. So it's a basic HTML page. At the very beginning I'm initializing my sessions in PHP and that's because I'm going to be using the sessions to keep track of which blog posts have been marked as favorites. Now in the real world we probably would set up a database, we probably would have lots of users and then we would mark which user had favorited which blog post. Right, we'd store that in the database so we'd have it in the future. But that's an awful lot of work to go through and it's really not relevant to the AJAX work that we're trying to do. So we're going to cheat a bit and fake the database by having session favorites. We're going to have one user and that's us with a set of blog posts and we're going to store what our favorites are. We're just going to store the session so that we can keep track of them. And that will serve as a stand in for the database. If we scroll down you will see that I've got a bit of basic style information. We'll take a look at what that looks like when we view it in the browser in a moment. And then you can see that I've got a series of blog posts. In a div with id "blog-posts" and I've got div with id "blog-post-101" class is "blog-post" and then it's got some placeholder content in it. Blog Post 101 and some loren ipsum text inside the paragraph tags. Then after that I've got my button. So here's the button. Class is "favorite-button", the text says "Favorite" and it's a button that we can click. The idea is that we'll click that button and it will mark this particular blog post as being our favorite. But there's not just one blog post, we have several. So here's Blog Post 102 and Blog Post 103. And each of those also has a favorite button. So it's going to be important that we're able to tell these apart. Before when we've been working with AJAX we just had a single AJAX button perform one action. Now we have many buttons that all perform similar actions but they're slightly different because in each case we want to affect a different blog post. And then down at the bottom you can see that we've got some placeholder for out JavaScript. "favorite" is the name of the function we're going to call. You can see we've got a basic XMLHttpRequest in there. The kind of thing we've been working with before. Notice that I'm setting the request header here to set Requested-With to XMLHttpRequest. Now, when I'm doing the event binding because I have several buttons I have to do it a bit differently. Now instead of getting an element by it's ID, I have to get elements, plural, by their class name. So I'm finding all elements who have a class name of "favorite-button". If you look up here, all of my buttons have that class name. Every single one, class is "favorite-button". So it's going to find all of those. That's going to be my buttons. Then I've got a JavaScript loop that goes through, i starting at 0, while i is less than the length of buttons that we have, and incrementing i each time. It loops through, so for each time we go through the buttons we tell it to take item 0, item 1, item 2, item 3, etcetera. It brings up each button in turn and it adds an event listener to it. So each one of these gets the event listener for click and when it's clicked then it will call favorite. We'll come back and work more on that in just a moment and we actually work on sending the request. Let's go ahead and save that file. Let's take a look at favorite.php and see what we've got there as a placeholder. So when this page is called by our AJAX request it's also going to start up the session. It's going to make sure that favorites has an initial value. We do that on both pages just to make sure that it exists and we have our stand-in database ready to go. Then I've got a function here "is_ajax_request", we talked about that before. It's going to check and see whether Requested-With is equal to XMLHttpRequest, so that we know this is from AJAX. Notice that negative there. If it's not an AJAX request then just exit. It won't do anything. But if it is an AJAX request then we're going to extract the ID, the ID for the blog post that we want to mark. We need to know which one it is. Once we figure out which one it is then we can store that in session favorites and we can return true or false. Then this page will receive that event. It will be in the responseText for true or false. If the result is true, then we'll be able to visually indicate that this blog post has been marked. We'll know it succeeded and the database now has that stored. So that's the setup. Let's take a quick look at it in the browser. So we're going to be inside Firefox. For me the location is going to be localhost/~kevinskoglund/ You'll need to adapt that to be whatever your webroot is. And then it's going to be ajax_button So this is what it looks like. Again Blog Post number one and it has a favorite button. Blog Post number two and it has a favorite button. Blog Post 103 and it has a favorite button. Now those buttons right now aren't going to actually work correctly. We're going to have to do a little bit of work to make that work out. So don't click them yet. Right now we're just looking at what we've got as a starting point. So that we know where we're going to go from here. In the next movie let's talk about what we need to do in order to send that buttons AJAX request, because it's going to work a little bit differently than the way we've done it in the past.