28/04/2010 : Article mis à jour suite à la refonte graphique du site Clubic.

Le site Clubic ne prévoit pas d'affichage optimisé pour l'iPhone. Avec un peu de CSS, de PHP et de JQuery, j'ai réussi à faire, sans trop de mal, un petit bidule qui affiche les derniers articles parus sur le site, et qui permet de les consulter. Tout ça en s'adaptant à la résolution du téléphone.

Principe

Le principe est de créer des classes PHP permettant de se connecter au site de Clubic, de récupérer la liste des derniers articles et de les mettre en forme sur une page avec un peu de CSS.

Heureusement Apple a bien documenté la création d'applications web pour l'iPhone ici. Des CSS toutes prêtes sont ainsi disponibles dans les exemples d'applications ainsi que des fichiers JavaScript permettant de gérer le passage en mode paysage par exemple. Pour cette application, je suis parti de la CSS de l'exemple Simple Browser ainsi que du fichier browser.js de ce même exemple.

Scripts PHP

Il nous faut commencer par récupérer la liste des articles de la page d'accueil de Clubic. Evidemment nous n'avons pas accès à la base de données de Clubic, il va donc falloir ruser.

La page d'accueil affiche un petit bouton "Afficher le flux d'actu condensé" qui affiche la liste des dernières actualités, avec un système de pagination. En surveillant les flux HTTP qui circulent lorsque l'on clique sur les numéros de la pagination, on voit à chaque fois un appel à la page : http://www.clubic.com/ajax/news-light.php. Des paramètres lui sont passés en POST :

• action = display
• page = numéro de page

Nous allons exploiter cette page pour créer notre version iPhone.

Nous allons créer trois classes PHP :

• la classe Article : elle représente un article Clubic. Elle possède 3 attributs (titre de l'article, la date de publication, le lien vers l'article). Niveau méthodes, cette classe possède juste un constructeur et des accesseurs.
• la classe ArticlesParser : cette classe va parser différentes pages. Elle possède deux méthodes statiques :
  • la méthode getArticlesList : elle prend en paramètre l'URL de la page news-light.php. Elle va parser le code source de cette page pour en extraire les différents articles. Elle retourne un tableau d'objets Article
  • la méthode getArticleContent : elle prend en paramètre l'URL d'un article. Elle va parser le code source de cette page pour en extraire le contenu de l'article sans tout ce qui l'entoure (structure du site, commentaires, ...). Elle retourne une chaîne de caractères qui correspond au contenu de l'article.
• la classe URL : cette classe va permettre d'ouvrir une connexion à la page news-light.php et de lui passer les paramètres POST. Elle contient une seule méthode statique. Cette méthode est reprise telle qu'elle d'un commentaire de la fonction file_get_contents de la doc PHP. Pour cette raison, cette classe ne sera pas détaillée.

Ces trois classes suffisent à créer notre application. La page d'accueil de l'application fera appel à la méthode ArticlesParser::getArticlesList pour récupérer la liste des articles. A nous ensuite d'afficher cette liste sur la page. Lorsque nous cliquerons sur un article, nous ferons appel à la méthode ArticlesParser::getArticleContent pour afficher le contenu de cet article.

Voici donc le contenu du fichier article.class.php :

Quelques petites explications :

• L'instruction URL::file_post_contents($url) récupère la liste des actualités Clubic.
• L'instruction $handle = fopen($url, 'rb'); permet d'ouvrir un fichier situé sur un serveur distant. Pour que cela fonctionne, il faut que l'option soit activée dans le fichier php.ini (allow_url_fopen = On)
• Chaque article est situé entre les balises : <div class="news-item*> </div> d'où l'expression régulière. De même, chaque contenu d'article est situé entre les balises <div class='editorial'> </div>
• On complète les URLs relatives avec http://www.clubic.com

Page d'accueil

La page d'accueil est assez simple. On inclue le fichier article.class.php afin d'utiliser les classes définies précédemment.

Comme expliqué sur la page Configuring the viewport, il faut ajouter la ligne suivante dans le head :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Cela permet d'adapter le contenu de la page à la résolution de l'iphone.

Voilà à quoi ressemble notre page index.php :

Le fichier scripts.js inclus permettra de gérer les actions relatives aux clics sur les titres des articles. La div dont l'id est articleContent est masquée dans la CSS. Cette div contiendra le contenu de l'article.

Le code PHP récupère la liste des articles Clubic et les affiches dans une liste de type ul.

Code Javascript

J'utilise la librairie JQuery qui simplifie quand même sacrément le code Javascript. Le fichier script.js commence par supprimer l'évènement click des liens. En effet, lorsqu'on clique sur un lien, on ne veut pas afficher la page de l'article, mais récupérer le contenu de l'article et le placer dans la div dont l'id est articleContent. On ajoute donc un écouteur sur l'évènement click aux éléments de liste li. Ce qui se passe lorsqu'on clique sur un li :

• récupération de l'URL et du titre de l'article sur lequel on vient de cliquer
• écriture du titre de l'article dans l'élément h1 de la div articleContent
• on masque la liste ul et on affiche la div articleContent
• appel AJAX vers un script PHP (getArticleContent.php) auquel on passe l'URL de l'article. Ce script se contente d'appeler la méthode ArticlesParser::getArticleContent pour récupérer le contenu de l'article
• affichage du contenu de l'article récupéré dans la div realContent

Le code simple du script getArticleContent.php :

Et le code du fichier script.js :

Conclusion

Et voilà ! Evidemment cette application est très simple, mais c'était juste pour essayer. On pourrait y ajouter les commentaires, l'authentification sur le site, l'accès aux anciens articles, supprimer les vidéos flash (qui ne marchent pas sur iPhone) dans les articles, ...