How to create livescore website part 2
This is the second tutorial on how to create a livescore website. Here, we make our website work faster, make it prettier, and covert the kickoff times to a timezone.
Hello again! This is the second part of our tutorials on how to crate a live score website. In the previous video, we managed to get this list with livescores from our soccer api, and in today's video, we're going to make it look much nicer. And we're also going to add the start times of the matches in the local time zone that we want them to be.
Before that, we need to make something. We need to cache the responses that we get from our soccer API into our database. Why do we need to do that? We're actually getting three things out of it and let's take a look at this small diagram here. If this is you or your user or many of your users what happens is that the device here. Whether it is a laptop or a mobile phone, it sends a request to your server requesting live scores and then your server sends a request to our service and then the data flows backward. This connection here between our servers in your server is there 99.9999% of the time. But what happens for a couple of milliseconds or seconds when this connection is down? Then the user experience that there are no live scores and your service is broken so in order to prevent that we actually are going to cache the live scores and match statistics and everything else we request from our soccer api in our local database.
Then it's a very simple database it just has a URL, JSON that responds to this URL and then the time when we last requested this data. So we can track it and then update it every 60 seconds. So now we solve this issue, a second thing that we gain out of it is that we save time for this connection response because most of the time we're going to be getting the data from the database and then back to the user. The third thing is you have a hundred people here they all request scores and because we call all the time our soccer api and then back to them so you just spent hundred of your requests in three seconds, let's say for two minutes. It doesn't matter, but if they're cashed here then only the first request will go to our servers so you spend one request instead of a hundred the following 99 people are going to get it from the database and after some time we are going to reset it. In our case, we'll say 60 seconds.
So how do we achieve this caching? Here there is a small class that we had on our project. It will be in our GitHub repository, we have a connection to MySQL database but could be easily any other database and we have this function called
useCache(), which takes a URL tries to find it in the database here and it defines the time if the
JSON response it's still valid. Meaning we have obtained it in less than a minute then we can just use it if not then, of course, we need to call our soccer api services again. We also have the
saveCache() function which takes
$url and a
$json and accordingly updates or inserts in the table and this database. Then we can reuse it once we need it again.
So how do we actually take advantage of this? We need to refactor this code a bit and we're going to gain more things out of it but now we're going to focus on the cache. So if we take this URL as the first time we can actually add it here as protected let's just called it
$_baseUrl. And this section never changes so once you download it then you're all set so we can leave it like this, but we need to build a different URL for every type of data that we request from our soccer api: one so for live scores we and one for fixtures into the features and so on. So we're going to make a new function called
buildLink(). This function will take an
$endpoint as a parameter and what this function will do is very simple it's going to return the
_baseUrl here together with the
$endpoint that we want and finally we're going to add the authentication part to the key and the secret. Now if we try out our page it will be broken. I'm not going to do that but it won't work. For that, we need to make our official function for
getLivescores() which we call get live scores and here we can take advantage of the previous function and we want only this part with scores.
Just and don't forget the question mark so then these parameters can work correctly, but now the request to our soccer api doesn't happen so we need to be stopped until that we have to write a new function that I'll just call
makeRequest() will take full URL. I need to do exactly what we're doing and just want to place it here. But here we're going to add our caching so the first thing we're going to do is we're going to try to get the cash from our database. We'll try to use the cache and if it is
false then the cash is either not there or not valid anymore it has been more than 60 seconds past. We will return it and we don't forget
json_decode(). What happens if we don't have a cache? then we call our soccer API servers as we do right now, but before we return this information here to the caller whichever that is. In this case will be to
getLivescores() function, first we store it to the cache so we can then use it the next time. So it's a simple function code here and the final step is that
getLivescores() just transfers the response from the request to the caller.
And who is the caller? The caller is
index.php, here we can move our class make it official object here and now our
$data will be instead. Let's try this one out and back to our live scores will refresh the live scores refreshed which means everything's working fine. And if we look in our database we can see a new row and it just happened now and this is the JSON that we got from our soccer API servers. In this case the
URL is a number but this is simply because like mySQL works much faster with numbers so what we're doing in our code is converting the URLs to a number so we can work much faster with it this is totally up to you. Now in the future when we request
getLivescores() will happen much faster unless there has been a minute passed and then we just want to get the data to form our cache so as we keep working with this you will notice that this number here all the time is going to change once we make a new request after a minute. Like it just happened now so two minutes after it.
So now we want the live scores that we get from our soccer api are much prettier. For that, we are going to use Twitter bootstrap and we're going to need the CSS part of it. Just going to take it. I'm going to put it into our
head section here and if we refresh now we can see things are improving it looks much better. What we want to do now is put the content in the center of the page put it into the table with nice borders align it a bit and then finally, of course, and put the start time in the time zone that wanted.
To be so what we are going to do now we are going to wrap our
table into a
container. This is a standard Twitter bootstrap class that simply centers the content in the center of the page. You can already see things are centering. This is the
container. It starts here and ends up somewhere here, but what we want to do is we want to put in the center in the center and want to have space here for the list of countries that we want to add each one.
Twitter bootstrap is using the concept of rows. Right now we have one
row so we just add one here and inside the rows, we need to itself and we thought we had the right of 12 cells. So for the country's we're gonna use it's three cells or that live scores that you already have we're going to use nine cells may be and then we leave three cells for something else after the live scores. In many cases, websites have banners and promotions and other types of articles on the right side so we're just going to leave it like that. Now let's see how it looks. Right? Much, much in the center.
Now let's make this table bordered. I pretty much like for the tables bootstrap has covered this one as well. We just need to write the
table table-bordered and then I would like to make this like the header a bit better so we'll just blueish color to stand out from the rest of the content to the table and then let's see how it. Looks amazing! We can just shrink this face of it with this one so we get relations like we should be six. Yes much better. Now we want to improve some other things we want to move this to the right side this in the center and then add a new column that will contain the start time. So let's just use this inline styling it's not the best idea but for the purposes okay
text-align: center let's make this bold just so they also stand out a bit more let go super.
That's what you want. Let's get the start time on the right side. Let's call it KO for kick-off. Here and for now we're just going to use the
scheduled field from our soccer api, which is our official field for the start time and the match started and this time is always UTC.
If you want to use it in a different time zone, then you have to convert it and that's what we're going to do now. Let's convert now this kickoff time, so start times to whatever time zone we want and to do that we're going to do it here. Let's say we're going to make a function that will take up
$timezone and produce the time of the match within this time zone. And you make this time zone a variable, because maybe in the future we want users to be able to change the time zone in which they want to see their matches so, for now, I'm just going to call
Let's add a new file for
functions.php and here we make a new function that we will call
convert(). After time and some short search on Google, I'm sure you're going to find an example code, but today we have this one that I took from Stack Overflow. So we can do this faster. The date is actually today's date. And then we want to add to it the start time of the match and we don't forget to add the seconds. Our soccer api time zone is always UTC, and we want to convert it this time zone and right. Let's refresh and see what happens. Did something get broken? I figured out we actually forgot to include our
functions.php so there is no way for our script to know that there is a function that can convert dates. Nice! Let’s try again and now things have changed and you can see that actually it moved a bit so if we decide to change the time zone to something else like
Europe/Istanbul then it works. This is the way to change the start time to a timezone. Until next time!