Create a Leaderboard / Scoreboard page with Custom Page

First, open your active theme folder. In this tutorial I will use the default theme “/content/themes/default/”.

Create a php file and name it “page-leaderboard.php”, you can replace “leaderboard” with another page name you want, ex: “page-top-palyers.php”, you can access it with “yout-domain.com/top-players”.

Next, put php code below inside “page-leaderboard.php” file

<?php

$page_title = 'Leaderboard';
$meta_description = 'Top players';

require_once( TEMPLATE_PATH . '/functions.php' ); //Load theme functions

include  TEMPLATE_PATH . "/includes/header.php";

// CONTENT

include  TEMPLATE_PATH . "/includes/footer.php"

?>

Explain: We include theme functions, header and footer. $page_title and $meta_description is required

Let’s get the recorded scores from database. make sure you’re have a game that already integrated with CloudArcade API and also have submitted score, if not, it will be empty.

Download sample project with API Integration here, then add it with upload game method.

Update “page-leaderboard.php” with code below

<?php

$page_title = 'Leaderboard';
$meta_description = 'Top players';

require_once( TEMPLATE_PATH . '/functions.php' ); //Load theme functions

include  TEMPLATE_PATH . "/includes/header.php";

// CONTENT
?>

<div class="container">
	<div class="game-container">
		<?php

		$amount = 10;

		$conn = open_connection();
		$sql = "SELECT * FROM scores WHERE created_date > DATE_SUB(NOW(), INTERVAL 1 MONTH) ORDER by score DESC LIMIT ".$amount;
		$st = $conn->prepare($sql);
		$st->execute();
		//
		$row = $st->fetchAll(PDO::FETCH_ASSOC);
		$list = [];
		foreach($row as $item){
			$item['game_title'] = Game::getById($item['game_id'])->title;
			$item['username'] = User::getById($item['user_id'])->username;
			array_push($list, $item);
		}

		//Show the list
		echo '<ul>';
		foreach($list as $item){
			echo '<li>'.$item['game_title'].', '.$item['username'].', '.$item['score'].'</li>';
		}
		echo '</ul>';

		?>
	</div>
</div>

<?php

include  TEMPLATE_PATH . "/includes/footer.php"

?>

Preview the result, go to “your-domain.com/leaderboard”.

The result will look like this:

We fetch top 10 players from all games in the last 1 month

The looks is very basic, let’s implement bootstrap table.

<?php

$page_title = 'Leaderboard';
$meta_description = 'Top players';

require_once( TEMPLATE_PATH . '/functions.php' ); //Load theme functions

include  TEMPLATE_PATH . "/includes/header.php";

// CONTENT
?>

<div class="container">
	<div class="game-container">
		<?php

		$amount = 10;

		$conn = open_connection();
		$sql = "SELECT * FROM scores WHERE created_date > DATE_SUB(NOW(), INTERVAL 1 MONTH) ORDER by score DESC LIMIT ".$amount;
		$st = $conn->prepare($sql);
		$st->execute();
		//
		$row = $st->fetchAll(PDO::FETCH_ASSOC);
		$list = [];
		foreach($row as $item){
			$item['game_title'] = Game::getById($item['game_id'])->title;
			$item['username'] = User::getById($item['user_id'])->username;
			array_push($list, $item);
		}

		//Show the list
		?>

		<h3>Top Players</h3>
		<br>

		<table class="table table-bordered">
			<thead>
				<tr>
					<th scope="col">#</th>
					<th scope="col">Usename</th>
					<th scope="col">Game Title</th>
					<th scope="col">Score</th>
				</tr>
			</thead>
			<tbody>

		<?php
		$index = 0;
		foreach($list as $item){
			$index++;
			?>

			<tr>
				<th scope="row"><?php echo $index ?></th>
				<td><?php echo $item['username'] ?></td>
				<td><?php echo $item['game_title'] ?></td>
				<td><?php echo $item['score'] ?></td>
		    </tr>

			<?php
		}

		?>
			</tbody>
		</table>
	</div>
</div>

<?php

include  TEMPLATE_PATH . "/includes/footer.php"

?>

Here is the result:

Look better right ?

You can explore the api script at “/includes/api.php”, also there are a JavaScript version Game API

If a player submitted a score, their previous score will not be removed, so there will be a duplicates, you can fix it by filtering the result.

You can put multiple leaderboard on a single page.

Leave a Reply

Your email address will not be published. Required fields are marked *