L'équipe.fr : les scores en direct
Je ne suis pas fan de football (mais vraiment pas), mais pourtant il m'arrive parfois de suivre un peu la ligue 1 (oui oui, c'est à peine contradictoire ce que je dis). Vu que tous les matchs passent sur Canal+ et que je n'ai pas cette chaîne, je suis les résultats sur le site de l'équipe à l'adresse suivante : http://www.lequipe.fr/Football/direct_foot.html.
Le problème est que ça m'énerve franchement d'avoir un onglet occupé pour afficher cette page. J'aimerais bien voir les scores dans un coin, de manière très discrète. Et puis je me suis rappelé que j'utilisais le navigateur Opera !
Les panneaux web d'Opera
Une des (nombreuses) fonctionnalités d'Opera est les panneaux web. Il s'agit de "bouts" de fenêtre permettant d'afficher une page web. Par exemple, je peux décider de mettre la page d'accueil de Google en panneau et ça donne ça :
Panneau web Google
Evidemment j'ai pensé à y mettre le site de l'équipe, mais il n'est pas adapté à la petite taille du panneau, même si elle est extensible à volonté (le but est que ce soit discret).
Alors comment faire ? Un peu de PHP (pour changer) et de CSS, et le tour est joué !
Le concept
Le concept est assez simple : récupérer la DIV HTML qui contient les scores sur la page http://www.lequipe.fr/Football/direct_foot.html, l'afficher et la mettre en forme avec une feuille de styles CSS.
Nous aurons donc 3 pages :
- games.class.php : contient la classe récupérant la DIV sur le site de l'équipe
- index.php : affiche le contenu récupéré par la classe "Games"
- styles.css : contient les styles permettant de mettre en forme le contenu de index.php
Ces pages sont très simples :
Page "games.class.php"
Voici le code de cette page :
<?php
class Games {
public static function get($url) {
if ($content = @file_get_contents($url)) {
$games = array();
// Get the page title
if (preg_match('!<title>(.*)</title>!sUi', $content, $matches)) {
$games['title'] = $matches[1];
// Get the page content
if (preg_match('!<div id="liste_directs">(.*)<script language="javascript" type="text/javascript">!sUi', $content, $matches)) {
$games['content'] = $matches[1];
}
else {
// Unable to parse content
throw new Exception('Unable to parse content');
}
}
else {
// Unable to parse title
throw new Exception('Unable to parse title');
}
}
else {
// Unable to get the page source
throw new Exception('Unable to get the page source');
}
return $games;
}
}
?>
Une seule méthode statique pour cette classe très simple. On commence par récupérer le code source de la page avec la fonction "file_get_contents". Ensuite on parse le titre de la page, et le contenu de la DIV contenant les scores. Les erreurs éventuelles sont propagées via des exceptions.
Page "index.php"
Voici le code de cette page :
<?php
require_once('games.class.php');
// Lives URL
define('LIVES_URL', 'http://www.lequipe.fr/Football/direct_foot.html');
// Get the games
try {
$games = Games::get(LIVES_URL);
} catch(Exception $e) {
$games['title'] = 'Directs Football - Erreur';
$games['content'] = '<div>Erreur : '. $e->getMessage() .'</div>';
}
?>
<html>
<head>
<title><?php echo $games['title']; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="180" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
echo $games['content'];
?>
</body>
</html>
Il s'agit là encore d'une page très simple. Nous nous contentons d'appeler la fonction statique de la classe "Games" et nous affichons les données qu'elle nous renvoie.
Ensuite un peu de CSS et le tour est joué ! Il suffit ensuite d'afficher la page "index.php" dans un panneau web et nous obtenons alors :
Panneau web l'équipe
C'est petit, discret, ça se ferme et s'ouvre d'un seul clic.
J'ai mis cette version simpliste (qui demanderait d'être travaillée un peu plus) en ligne. Mon hébergeur n'acceptant pas la fonction PHP "file_get_contents", j'utilise à la place curl (le principe reste le même).
Nouveau commentaire