WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.156 --> 00:00:03.616 align:middle The topic of API's is... 00:00:03.816 --> 00:00:08.836 align:middle ah ... a huge topic and hugely important these days. 00:00:09.586 --> 00:00:12.936 align:middle We're going to dive deep into API's in a future tutorial. 00:00:13.166 --> 00:00:17.556 align:middle But... I think we at least need to get to the basics right now. 00:00:18.616 --> 00:00:21.276 align:middle So here's the goal: see this heart icon? 00:00:21.746 --> 00:00:25.316 align:middle I want the user to be able to click it to "like" the article. 00:00:26.446 --> 00:00:31.356 align:middle We're going to write some JavaScript that sends an AJAX request to an API endpoint. 00:00:32.016 --> 00:00:38.306 align:middle That endpoint will return the new number of likes, and we'll update the page. 00:00:39.076 --> 00:00:41.986 align:middle Well, the number of "likes" is just a fake number for now, 00:00:41.986 --> 00:00:46.026 align:middle but we can still get this entire system setup and working. 00:00:46.646 --> 00:00:52.816 align:middle Oh, and by the way, if you look at the bottom of base.html.twig, our page does have jQuery, 00:00:53.026 --> 00:00:58.606 align:middle so we can use that: In the public/ directory, create a new js/ directory 00:00:59.016 --> 00:01:03.086 align:middle and a file inside called, how about, article_show.js. 00:01:03.086 --> 00:01:09.566 align:middle The idea is that we'll include this only on the article show page. 00:01:10.686 --> 00:01:18.266 align:middle Start with a jQuery $(document).ready() block: Now, 00:01:18.456 --> 00:01:22.276 align:middle open show.html.twig and, scroll down a little. 00:01:24.306 --> 00:01:30.606 align:middle Ah! Here is the hardcoded number and heart link: Yep, we'll start the AJAX request 00:01:30.666 --> 00:01:34.666 align:middle when this link is clicked and update the "5" with the new number. 00:01:35.646 --> 00:01:37.836 align:middle To set this up, let's make few changes. 00:01:41.556 --> 00:01:46.226 align:middle On the link, add a new class js-like-article. 00:01:46.226 --> 00:01:55.346 align:middle And to target the 5, add a span around it with js-like-article-count: 00:01:56.446 --> 00:01:59.386 align:middle We can use those to find the elements in JavaScript. 00:02:00.186 --> 00:02:01.456 align:middle Copy the link's class. 00:02:02.276 --> 00:02:04.166 align:middle Let's write some very straightforward... 00:02:04.166 --> 00:02:05.786 align:middle but still awesome... 00:02:05.786 --> 00:02:11.886 align:middle JavaScript: find that element and, on click, call this function. 00:02:12.936 --> 00:02:20.876 align:middle Start with the classic e.preventDefault() so that the browser doesn't follow the link: Next, 00:02:20.876 --> 00:02:27.356 align:middle set a $link variable to $(e.currentTarget): This is the link that was just clicked. 00:02:27.356 --> 00:02:32.236 align:middle I want to toggle that heart icon between being empty and full: 00:02:33.106 --> 00:02:41.946 align:middle do that with $link.toggleClass('fa-heart-o') .toggleClass('fa-heart'): 00:02:41.946 --> 00:02:49.876 align:middle To update the count value, go copy the other class: js-like-article-count. 00:02:52.506 --> 00:02:58.886 align:middle Find it and set its HTML, for now, to TEST: Simple enough! 00:02:58.886 --> 00:03:02.986 align:middle All we need to do now is include this JS file on our page. 00:03:03.846 --> 00:03:09.166 align:middle Of course, in base.html.twig, we could add the script tag right 00:03:09.166 --> 00:03:11.746 align:middle at the bottom with the others: But... 00:03:12.036 --> 00:03:16.766 align:middle we don't really want to include this JavaScript file on every page, 00:03:17.246 --> 00:03:20.106 align:middle we only need it on the article show page. 00:03:21.006 --> 00:03:22.186 align:middle But how can we do that? 00:03:22.186 --> 00:03:26.676 align:middle If we add it to the body block, then on the final page, 00:03:26.806 --> 00:03:33.176 align:middle it will appear too early - before even jQuery is included! 00:03:33.176 --> 00:03:38.786 align:middle To add our new file at the bottom, we can override the javascripts block. 00:03:39.566 --> 00:03:47.586 align:middle Anywhere in show.html.twig, add {% block javascripts %} and {% endblock %}: 00:03:47.586 --> 00:03:54.056 align:middle Add the script tag with src="", start typing article_show, and auto-complete! 00:03:55.076 --> 00:03:57.146 align:middle There is still a problem with this... 00:03:57.146 --> 00:03:59.066 align:middle and you might already see it. 00:03:59.706 --> 00:04:00.596 align:middle Refresh the page. 00:04:03.006 --> 00:04:04.256 align:middle Click and... 00:04:04.586 --> 00:04:06.326 align:middle it doesn't work! 00:04:06.946 --> 00:04:07.866 align:middle Check out the console. 00:04:10.106 --> 00:04:14.146 align:middle Woh! $ is not defined That's not good! 00:04:14.946 --> 00:04:18.426 align:middle Check out the HTML source and scroll down towards the bottom. 00:04:19.566 --> 00:04:24.176 align:middle Yep, there is literally only one script tag on the page. 00:04:24.886 --> 00:04:26.616 align:middle That makes sense! 00:04:27.406 --> 00:04:32.096 align:middle When you override a block, you completely override that block! 00:04:33.056 --> 00:04:36.946 align:middle All the script tags from base.html.twig are gone! 00:04:37.606 --> 00:04:44.516 align:middle Whoops! What we really want to do is append to the block, not replace it. 00:04:45.656 --> 00:04:46.436 align:middle How can we do that? 00:04:46.776 --> 00:04:53.076 align:middle Say {{ parent() }}: This will print the parent template's block content first, 00:04:53.376 --> 00:04:56.516 align:middle and then we add our stuff. 00:04:56.516 --> 00:05:02.556 align:middle This is why we put CSS in a stylesheets block and JavaScript in a javascripts block. 00:05:03.916 --> 00:05:04.466 align:middle Try it now! 00:05:05.046 --> 00:05:08.386 align:middle Refresh! And... 00:05:08.706 --> 00:05:14.536 align:middle it works! Next, let's create our API endpoint and hook this all together.