Ceux-ci peuvent également recevoir des styles de rouleau de thème en lettres. Ils peuvent être définis dans le parent

.

En savoir plus sur les séparateurs de liste.

Notez que nous n'utiliserons pas de séparateurs pour cette application particulière..

---

Étape 5: CSS

jQuery Mobile prend en charge une grande partie de la mise en forme. Cependant, nous avons toujours besoin de notre propre feuille de style pour le peaufiner. Par exemple, en regardant les images ci-dessus, nous pouvons voir que les icônes du tutoriel doivent être légèrement relevées. De plus, j'aimerais utiliser Tuts + red comme couleur de fond de l'en-tête et du pied de page, plutôt que le noir par défaut..

Créer un nouveau dossier, CSS, et ajouter une nouvelle feuille de style - je vais appeler le mien: mobile.css. Dans ce fichier, nous allons d’abord corriger le positionnement de l’icône:

 .ui-li-icon top: 9px; 

Ensuite, nous allons créer une poignée de classes, nommées d'après leurs sites de tutoriels respectifs. Ces classes contiendront des couleurs / formatages spécifiques pour le site. Par exemple, Nettuts + a une couleur vert plus foncé, tandis que MobileTuts + est jaune.

 .tuts background: # c24e00;  .nettuts background: # 2d6b61;  .psdtuts background: # af1c00;  .vectortuts background: # 1e468e;  .aetuts background: # 4a3c59;  .phototuts background: # 3798aa;  .cgtuts background: # 723b4a;  .audiotuts background: # 4b7e00;  .webdesigntutsplus background: # 0d533f;  .mobiletuts background: # dba600; 

Cela devrait aller pour le moment. La dernière étape pour index.php est d'appliquer le .tuts classe à la entête et bas de page éléments. De cette façon, le entête et bas de page rendra la couleur de fond correcte.

 
? 



---

Étape 6: YQL, PHP et la mise en cache

Maintenant, il est temps de vous éloigner de la mise en page et de travailler sur les fonctionnalités. Chacun des liens que nous avons créés et destinés à site.php? siteName = "siteName". Allons-y et créons ce fichier maintenant.

Même s'il s'agit d'une application relativement petite, nous devrions tout de même nous efforcer de suivre les meilleures pratiques. Dans ce cas, cela signifie que nous devrions garder le moins de PHP possible dans notre document. Au lieu de cela, nous allons utiliser site.php comme un manette de toutes sortes. Ce fichier gérera la logique initiale et se chargera en bas dans notre modèle HTML..

Assigner le nom du site

Afin de récupérer le flux RSS souhaité, nous devons d’abord saisir le nom du site sur lequel l’utilisateur a cliqué initialement. Si vous faites référence à une étape précédente, lorsque nous avons lié à site.php, nous avons également transmis le nom du site à travers la chaîne de requête. Avec PHP, cela peut facilement être récupéré, avec $ _GET ['siteName']. Cependant, que se passe-t-il si, pour une raison quelconque, cette valeur n'existe pas? Peut être site.php a été consulté directement ?? Nous devrions définir un site par défaut pour compenser ces situations.

 $ siteName = empty ($ _GET ['siteName'])? 'nettuts': $ _GET ['siteName'];

Si $ _GET ['siteName'] est vide, nous allons définir "nettuts" à la variable, $ siteName. Sinon, ce sera égal au nom du site respectif.

Sécurité

Même s'il s'agit d'un petit projet, essayons également de mettre en place une sécurité. Pour empêcher l’utilisateur d’attribuer automatiquement une valeur potentiellement dangereuse au nom du site clé, assurons-nous que la valeur est bien le nom de l'un de nos sites de didacticiels.

 // Préparer un tableau de sites de tutoriels $ siteList = array ('nettuts', 'flashtuts', 'webdesigntutsplus', 'psdtuts', 'vectortuts', 'phototuts', 'mobiletuts', 'cgtuts', 'audiotuts', 'audiotuts', 'audiotuts', 'aetuts '); // Si la chaîne n'est pas un nom de site, remplacez simplement par nettuts. if (! in_array ($ siteName, $ siteList)) $ siteName = 'nettuts'; 

le in_array () fonction nous permet de déterminer si une valeur - dans notre cas, la valeur de $ siteName -- est égal à l'un des éléments de la $ siteList tableau.

Caching

En fin de compte, nous utiliserons l'excellent YQL pour effectuer nos requêtes. Pensez à YQL en tant qu'API pour API. Plutôt que d'avoir à apprendre vingt API différentes, la syntaxe de type SQL de YQL vous permet d'en apprendre une seule. Cependant, bien que YQL effectue lui-même un peu de mise en cache, enregistrer les flux RSS vers un fichier texte sur notre serveur. De cette façon, nous pouvons améliorer un peu les performances.

Nous commençons par créer une nouvelle variable, $ cache, et en le rendant égal à l'emplacement de stockage du fichier mis en cache.

 $ cache = dirname (__ FILE__). "/ cache / $ siteName";

Le code ci-dessus pointe vers le répertoire actuel du fichier, puis dans un dossier de cache et, enfin, le nom du site sélectionné..

J'ai décidé que ce fichier en cache devrait être mis à jour toutes les trois heures. En tant que tel, nous pouvons lancer un rapide si et déterminez la dernière fois que le fichier a été mis à jour. Si le fichier n'existe pas ou si la mise à jour date de plus de trois heures, nous interrogeons YQL..

 $ cache = dirname (__ FILE__). "/ cache / $ siteName"; // Re-cache toutes les trois heures si (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

Il est ridiculement facile de travailler avec YQL. Dans notre cas, nous l'utilisons dans un but très simple: récupérez le flux RSS, sous forme JSON, du site qui a été passé par la chaîne de requête, via nom du site. Vous pouvez expérimenter les différentes commandes en utilisant la console YQL.





Pour interroger un flux RSS, nous utilisons la commande: SELECT * FROM feed WHERE url = "chemin / vers / rss / feed".

• Nettuts + Feed: http://feeds.feedburner.com/nettuts
• Psdtuts + Feed: http://feeds.feedburner.com/psdtuts
• Vectortuts + Feed: http://feeds.feedburner.com/vectortuts
• etc.

Construire le chemin

Par souci de lisibilité, nous allons construire notre requête YQL dans des sections.

 // Requête YQL (SELECT * from feed?) // Split pour la lisibilité $ path = "http://query.yahooapis.com/v1/public/yql?q="; $ path. = urlencode ("SELECT * FROM feed WHERE url =" http://feeds.feedburner.com/$siteName ""); $ path. = "& format = json";

La clé est la deuxième partie ci-dessus; une fois la page chargée, nous avons pris le nom du site dans la chaîne de requête. Maintenant, nous avons seulement besoin de l'insérer dans le SÉLECTIONNER question. Heureusement, tous les sites de tutoriels utilisent Feedburner! Assurez-vous que vous code url la requête pour remplacer les caractères spéciaux.

D'accord, le chemin est prêt; utilisons file_get_contents () prendre le fil!

 $ feed = file_get_contents ($ path, true);

En supposant que $ feed soit maintenant égal au JSON renvoyé, nous pouvons stocker les résultats dans un fichier texte. Cependant, assurons-nous d'abord que les données ont été renvoyées. Tant que quelque chose est retourné de la requête, $ feed-> query-> count sera égal à une valeur supérieure à zéro. Si c'est le cas, nous allons ouvrir le fichier mis en cache, écrire les données dans le fichier et enfin le fermer..

 // Si quelque chose a été retourné, cache if (is_object ($ feed) && $ feed-> requête-> count) $ cachefile = fopen ($ cache, 'w'); fwrite ($ cachefile, $ feed); fclose ($ cachefile); 

Cela semble déroutant, mais ce n'est vraiment pas le cas. La fonction fopen () accepte deux paramètres:

• Le fichier à ouvrir: Nous avons stocké ce chemin dans le $ cache variable en haut de la page. Notez que si ce fichier n'existe pas, il le créera pour vous..
• Privilèges d'accès: Ici, nous pouvons spécifier quels privilèges sont disponibles. w signifie "écrire".

Ensuite, nous ouvrons ce fichier et écrivons le contenu de $ feed (les données JSON RSS renvoyées) dans le fichier et fermez-le.

Utilisation du fichier mis en cache

Ci-dessus, nous avons d'abord vérifié si le fichier en cache avait plus de trois heures.

 if (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

Mais si ce n'était pas le cas? Dans ce cas, nous courons un autre déclaration, et récupérer le contenu du fichier texte, plutôt que d'utiliser YQL.

 if (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL?  else  // We already have local cache. Use that instead. $feed = file_get_contents($cache); 

Enfin, nous ne pouvons pas faire grand chose avec le flux RSS JSON avant de le décoder avec PHP.

 // Décode ce shizzle $ feed = json_decode ($ feed);

Et cela devrait le faire pour notre manette! Avec la logique hors du chemin, ajoutons notre modèle HTML.

 // Inclure la vue include ('views / site.tmpl.php');

Voici notre finale site.php. Clique sur le développer icône pour le voir.

 count) $ cachefile = fopen ($ cache, 'wb'); fwrite ($ cachefile, $ feed); fclose ($ cachefile);  else // Nous avons déjà un cache local. Utilisez cela à la place. $ feed = file_get_contents ($ cache);  // Décode ce shizzle $ feed = json_decode ($ feed); // Inclure la vue include ('views / site.tmpl.php'); 

---

Étape 7: Le modèle de site

À la fin de l'étape précédente, nous avons chargé dans notre modèle (ou vue). Allez-y et créez ça vues dossier, et site.tmpl.php fichier. N'hésitez pas à le nommer comme vous le souhaitez. Ensuite, nous allons insérer notre code HTML.

Points d'intérêt ci-dessus

• Remarquez comment nous suivons la même présentation de base: en-tête, zone de contenu, pied de page.
• Comme ce modèle sera utilisé pour chaque site de tutoriel Tuts +, nous devons définir le titre de manière dynamique. Heureusement, si vous vous en souvenez, le nom du site a été transmis à la chaîne de requête et stocké dans le répertoire. $ siteName variable (comme "nettuts"). Pour mettre en majuscule la première lettre et appliquer la signature + après le nom, nous allons passer la variable à travers ucwords () (met en majuscule la première lettre de chaque mot de la chaîne), et ajoute un "+":

• Nous allons bientôt afficher le nombre de commentaires pour chaque publication à côté du titre. Nous pouvons, encore une fois, utiliser ThemeRoller pour le styler, via le data-counttheme = "e" attribut.


Filtrer à travers l'alimentation

À ce stade, nous avons accès à la $ feed objet qui contient notre flux RSS. Pour disséquer cet objet, vous pouvez soit print_r ($ feed), ou utilisez la console YQL pour une vue plus jolie. Nous allons utiliser ce dernier dans ce cas. Vérifiez-le.





Pour récupérer les données pour chaque publication, nous devons filtrer les éléments suivants: $ feed-> requête-> résultats-> item. PHP en fait un jeu d'enfant avec pour chaque().

Dans le pour chaque() déclaration, nous pouvons maintenant accéder aux valeurs souhaitées avec $ item-> titre, ou $ item-> commentaires, qui affichera le titre et le numéro du commentaire, respectivement. Ajouter ce qui suit dans le

Mots clés.

 
 query-> résultats-> item en tant que $ item) ?> 
 
 & origLink =guid-> contenu); ?> "> Titre; ?>  
 commentaires; ?>  
  

Dans le code ci-dessus, nous construisons un élément de liste contenant le titre de la publication, le nombre de commentaires et un lien vers article.php qui contient également le nom du site et le lien permanent (vers l'article d'origine sur le site Tuts +) dans la chaîne de requête.

Lorsque nous affichons la page mise à jour dans le navigateur, tada!



Notez que le nombre de commentaires est dans une bulle jaune et qu'il flotte à droite? C'est parce que nous avons appliqué le data-counttheme = "e" attribut à la liste d'emballage non ordonnée. Comme c'est pratique.

Hmm? Je pense que le texte est trop volumineux pour ces longs titres. Une rapide visite à Firebug montre que je peux cibler le h2 balises avec une classe de .ui-li-cap. Revenons à notre feuille de style (mobile.css) et ajoutons une nouvelle règle:

 .ui-li-heading taille de la police: 12px; 

C'est mieux.



---

Étape 8: Affichage de la publication complète

La dernière étape consiste à construire article.php, qui affichera l'intégralité de l'affichage. Comme avec site.php, article.php servira de notre manette, et interrogera l'article sélectionné avec YQL et chargera la vue appropriée.

 requête-> résultats-> item; include ('views / article.tmpl.php');

Si vous avez suivi, le code ci-dessus devrait vous paraître un peu plus familier. Lorsque nous avons chargé cette page, à partir de site.php, nous avons traversé deux éléments, via la chaîne de requête:

• Nom du site: Contient le nom du site de tutoriel sélectionné
• Lien Orig: Un lien vers la publication originale sur le site du didacticiel

La différence avec la requête YQL, cette fois-ci, est que nous correspondons à la guid (lien orig) avec la publication sur laquelle l'utilisateur a cliqué (ou appuyé). De cette façon, une seule annonce sera renvoyée. Consultez cet exemple de requête YQL pour avoir une meilleure idée de ce que je veux dire..



Modèle d'article

Au bas du code ci-dessus, nous avons chargé le fichier de modèle pour la page d'article: views / article.tmpl.php. Nous allons créer ce fichier maintenant.

   
 
 
  
  
 
 Titre; ?> 
 
 la description; ?> 
 
  
  

Ah - si familier. Nous avons déjà examiné ce modèle. La seule différence est que, cette fois, puisqu'il n'y a qu'une publication de la requête YQL à afficher, nous n'avons pas besoin de nous embêter avec une pour chaque() déclaration.


Page d'article sans style

À ce stade, la prochaine étape consiste à commencer à appliquer le style souhaité à l'article. Je ne vois pas la nécessité de l'examiner dans ce didacticiel, car tout dépend de vos goûts personnels. Voici ma version super-minimale.


Application d'une taille de police, d'une hauteur de ligne, d'un remplissage et d'un formatage d'image.

Pieds verrouillés

Une dernière chose: dans la section de bas de page de l'article, nous faisons un lien vers la publication d'origine sur Nettuts +. Dans son état actuel, le lecteur ne le verra que lorsqu'ils auront atteint le bas de l'article. Verrouillons le pied de page au bas du point de vue actuel à tout moment. Nous pouvons utiliser le position de données attribut pour y parvenir.

C'est mieux!

---

Avaient fini!

Et, avec relativement peu de travail, nous avons réussi à construire un lecteur RSS mobile pour les sites Tuts +. Il peut certainement être étendu pour fournir des fonctionnalités supplémentaires, une vérification des erreurs et des améliorations de performances, mais cela devrait vous aider à démarrer! Si vous souhaitez développer le projet et le rendre meilleur, à tout prix? faire! Merci de votre lecture et veillez à vous reporter à la documentation de jQuery Mobile pour plus de détails. Je ne doute pas que vous rencontrerez plus de tutoriels jQuery Mobile sur notre site partenaire, Mobiletuts+.

Ajoutez le Reader à l'écran d'accueil de votre iPhone


Voir la démo ou mieux faire!
Code