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.

This video is a continuation of our how to create a live score website seriers part 1

1. Add website structure

Here we change the index.php code so that we can use the structure files: header.php, footer.php, left.php, rigth.php. With these files also using bootstrap and custom css styles, we add strcture to the website content and colors and fonts.

ini_set('display_errors', 'Off');
error_reporting(E_ALL);

require_once 'config.php';
require_once 'classes/LiveScoreApi.class.php';

$LiveScoreApi = new LiveScoreApi(KEY, SECRET, DB_HOST, DB_USER, DB_PASS, DB_NAME);
$scores = $LiveScoreApi->getLivescores();

include 'inc/header.php';
include 'inc/left.php';

// live scores code goes here

include 'inc/rigth.php';
include 'inc/footer.php';

2. Add the live scores html

Then, we add the live scores html section so that when we iterate over the live scores that came from our football api services and display them to the website visitors.

<div class="match-line">
	<div class="row">
		<div class="col-md-2 time-box">
			<?=$_score['time']?>
		</div>
		<div class="col-md-4 team-name">
			<?=$_score['home_name']?>
		</div>
		<div class="col-md-2 score-box">
			<?=$_score['score']?>
		</div>
		<div class="col-md-4 team-name rigth">
			<?=$_score['away_name']?>
		</div>
	</div>
</div>

3. Make the website refresh every minute

Finally, we add javascript code in order to refresh the live scores every single minute. This way, we will provide the latest live scores to the visitors without them needing to refresh the page.

setInterval(function() {
	window.location.href = window.location.href;
}, 60000);