How to create a live-score website
In this video tutorial, we show you how to start creating a live-score website using our football api.
Welcome to our short series of how to create a live-score website using the football api of live-score-api.com. In this first video, we're just going to set up our developer machine and create our very own first page containing only live-scores. In the following videos, we're going to go through all of our features that we can find in our documentation. Going through fixtures, match events. past matches or history data, head-to-head team comparison, and getting the league standings.
Before we can start developing our website we need to make sure that we have some things set up. First, we need is an account at live-score-api.com which we already have here and then we need an API key and API secret which we will change for every single video. You can get yours from your profile. In the top right corner, you can go to your profile and then you will find your key and secret. You need both of them to access our data.
Afterward, we need a text editor where we can edit our source code. In our case, we are going to use NetBeans and finally, we need a web server and in our case, we are using MAMP. But with the same success, you can use, LAMP, WAMP, XAMPP. Once we have installed everything that we need, we can start preparing our machine to simulate a web server as much as possible.
To do that we need to create a virtual host and then point that virtual host to our machine and then from our machine to our web server which in our case is MAMP. Let's go ahead and do that. Now to do this we need to update our hosts file. The location of the hosts file will depend on your operating system so for Linux, Windows, and Mac it will be in a different place, but the good thing is that the content that we need to type in is always the same. So the first thing we need to provide is an IP address and it's always 127.0.0.1 and this will tell our operating system every time when we make a request to a certain domain name it will look at this IP. This IP is our localhost or computer. The next thing we need to do is we need to come up with a domain name that we can use for development purposes only so in this case we just chose ls which is short for live-score and dot local. The dot local extension will help us remember that this is only on our machine. The last thing we need to do is we need to make these changes permanent.
Now our hosts file has been changed we need to also point that domain name to our web server, which in our case is MAMP. But this can be achieved with any other webserver. To do that we need to edit the virtual hosts file. Again it's location will depend not only on the operating system but also on the software, you chose for your web server. Once again we just need to type the same thing.
The first thing we need to do is we need to make a new virtual host and point to port 80 which is always the default port that web browsers use. Then we need to provide the folder where the website is going to be located on our machine. It is not required but for easiness, we use the same folder name ls.local as the domain name to make it easier to locate our files. We need to provide the server name which is ls.local the same as in our hosts file. We have made this already permanent so it's already saved we need to restart our web server to make these changes available because the webserver caches the virtual hosts file so it won't be able to find that domain name.
We just stop it. Then we started again this could be done also to the console or terminal or any other graphical interface. Now we are ready to check our website. To do that we write http://ls.local. It's very important to write HTTP because otherwise, you will just trigger a google search. Then once we hit enter we'll get this internal server error. That's completely normal. It's because we don't have the folder where the website is. To fix that we need to create a folder that we name ls.local and now if we refresh it shows the contents of the folder. since there is nothing inside. There is no content.
With everything set up let's go and see how to create a live-score website using our football api. We have already set up a project in our NetBeans editor there we're going to put our files. The first thing we do is create an empty file that we're going to name config.ini. We're going to put our key and our secret from our profile. The purpose of this is to abstract the credentials from the code so in case we need to change them we just change them in one place and then they get changed throughout our project.
All of this code will be in GitHub so you can just download it and change it and create your own project from it. We have the configuration settings to set up in this new file. It could be anything else like a JSON file composer file. Any configuration file that's not code works perfectly fine.
We now create a config.php which is going to provide other configurations
and on top of that is going to parse our ini file. This $ini array is going to contain
all the information from here which will be the index and then this will be the value.
We can easily see that it is part of the new file.
Now it will open config.php, we can see that the key is this and then the file of the secret
test the next step would be to put these into constants so nobody can change them. Maybe we're developing as a part of the team so maybe somebody uses the
$ini variable for something else.
We need an index file because this is the first file that the webserver opens when we open a domain. We'll just create this index file. Inside this index file we include our
confing.php. We have access to our constants that we just created and to do that
check that the key and secret constants. Now have an index file so we will no longer see the contents of the folder, but will rather see what we just var_dumped separately.
We can come here and create a new URL which will be pretty much this. And then we replace our constant key and the secret with the secret constant and now this is the URL that is going to give us all the live-scores. We want to put it into a JSON response because we're going to use the JSON extension and then we do file it data and then the URL right there. Now one thing is that we're using PHP as an example but we can use any other programming language. In our documentation at the end of every page, there are examples of how to use in this case would find examples with Python, Curl. There are also examples of filtering by country, by the league, and by competition.
We are going to go into filtering in the next episodes. Going back here let's see if we actually have gotten something. So we just dump down the result from the operation and then we refresh and see what happens. Now we have our data so we can see that
success it true and then we have the
data index. But this is a string and doesn't really work for us. To do a bit differently we take this and put it into
json_encode function we make it an array so it's easier to work with it.
If we go down and we use data then we use the data inside it's just a coincidence of data and data to refresh one more time now. It's one cool thing about HTML is that we can actually preformat this if we used
pre tag here which is going to make discovery appear in a nice way.
To see and now we can see that it looks much much better and we can also see that we have a
match key which is an array of all the matches currently being played. What we could do now is we could make this look a bit better and put it into a table.
Let's say we have this is file and then we have our HTML code and in the head, you can put all your search engine optimization, but in the body, we are going to put this table and inside this table, we are going to have a row for each match. Inside each row, we are going to put the home side and then the score and then away side.
We are going to loop over all the data which is inside data and then inside the match. We make this as a match which is for easiness. With this underscore, so we can easily track variables inside the loop. It's not a requirement but it makes things easy, so now we can copy all of this to have the same structure and order our code a bit. We can print the home team name and print the current score.
Now it looks much better and we can easily see the matches. One thing that every live-score website needs is actually the live timing of the match. You can just add a new field here and we will just print time and once again now we have also the time. This one is finished and this one is finished and this one is finished this one has finished after extra time. These ones are in progress and this one is in added time in the second half and this is how to build a live-score website page using our football api right.
In the next video, we are going to add some design and start filtering the data and adding making our website much better and more interesting for the users