Share
Quand Panic a dévoilé son statut au monde, j'ai été à la fois impressionné et inspiré. Dans le tutoriel et le screencast d'aujourd'hui, je vais vous montrer comment créer un tableau d'état similaire.!
Voici ce que notre tableau d'état aura: en haut, un graphique de pages vues; Il faudrait un autre tutoriel pour obtenir ces données de Google Analytics. Par conséquent, pour aujourd'hui, nous allons utiliser des données aléatoires. Ensuite, nous allons extraire nos prochains événements de Google Agenda. Nous aurons une table d'état du projet, extrayant les données d'une base de données. Enfin, nous afficherons les tweets de notre "société" et d'autres personnes mentionnant notre société. Allons-y!
Avant de commencer, je dois mentionner que les icônes que j'utilise dans ce projet proviennent du jeu gratuit de Smashing Magazine intitulé On Stage; malheureusement, je ne peux pas les inclure dans les fichiers de démonstration, mais voici une liste des noms de fichiers que j'ai renommés pour le projet (la plupart du projet dépend des noms de fichier); J'ai redimensionné les icônes à 64x64px; il devrait être évident que vous allez à travers le tutoriel quelles icônes appartiennent où.
Bien que notre page finie ait un contenu dynamique, nous allons d'abord construire l'interface en utilisant du contenu statique pour tout configurer, puis nous travaillerons plus tard sur le code côté serveur..
Voici notre shell préliminaire:
Tableau de statut
Pas difficile du tout: trois divs dans un div d'emballage. Regardons div # data maintenant. À l'intérieur, nous mettrons deux divs:
Programme
- 3/22Rencontre avec Chris les détails vont ici
- 3/26Vacances
- 4/15Date limite de Foobar
- 5/24Party de bureau
Nous allons remplir div # visites avec JavaScript dans un moment. Pour ce qui est de div # planning, nous avons mis dans une liste. Plus tard, nous allons extraire ces données de Google Agenda, mais cela nous donnera quelque chose pour construire l'interface. La partie importante est que nous avons emballé la date de l'événement dans em balises et les détails de l'événement dans petit Mots clés.
La prochaine section principale est div # projets. Cela nous montrera les dernières informations sur les projets de notre petite entreprise imaginaire. Tout comme le calendrier, nous extrairons cela d'une source de données (une base de données, dans ce cas); pour l'instant, c'est juste une table statique:
 | Gizmo | À temps | Joe Sally |
| Widget | Derrière | John Joe Jane |
| Gadget | Achevée | Sally Jane |
| Foobar | Attendre | John Joe |
| Bazquirk | À temps | Sally Jane Joe |
le div # twitter va nous montrer deux groupes de tweets: ceux de notre société et ceux mentionnant notre société. Nous allons utiliser le twitterlib de Remy Sharp pour faire cela. Voici le balisage dont nous aurons besoin:
Enfin, nous allons importer les scripts que nous utilisons:
Bien sûr, en production, vous mettriez tout cela dans un seul fichier.
Le dernier fichier ici, statBoard.js sera notre propre création.
Avant de commencer le CSS, voici à quoi ressemblera notre produit fini; cela devrait rendre le CSS un peu plus clair.
Tout d'abord, nous allons configurer le corps et h1, ainsi que tous nos contenus principaux pour qu'ils contiennent leurs enfants.
body background: # f3f3f3; police: bold 25px / 1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; couleur: # 494949; h1 margin: 0; rembourrage: 0; taille de la police: 40px; #wrap> div overflow: hidden;
Ensuite, considérons ce premier contenu div, qui a un identifiant de Les données.
#data margin-bottom: 40px; #visits width: 48%; marge droite: 2%; float: gauche; taille de police: 12px; #tooltip position: absolute; affichage: aucun; rembourrage: 2px 5px; arrière-plan: # 494949; couleur: #fefefe; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
Nous allons donner à cette div une marge inférieure de 40px, juste pour respirer. Ensuite, nous allons passer à son premier enfant, div # visites: faites-le flotter à gauche, définissez sa largeur et sa marge droite, et réduisez la taille de la police.
D'où vient cette info-bulle div? Il sera inséré lors de la création du graphique d'analyse à l'aide d'un plugin jQuery. Ici, nous définissons les styles visuels, tout en les positionnant de manière absolue et en les masquant. Lorsque nous survolons des points de notre graphique, celui-ci sera positionné puis affiché en fondu..
Regardons div # planning suivant:
#schedule float: left; arrière-plan: # 494949; couleur: # f3f3f3; largeur: 44%; rembourrage: 3%; débordement caché; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; #schedule ul list-style-type: none; marge: 0; rembourrage: 0; #schedule li margin-bottom: 5px; largeur: 1000px; #schedule em font-style: normal; arrière-plan: # aa3636; marge droite: 10px; affichage: inline-block; largeur: 50px; rembourrage: 0 10px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; #schedule small taille de police: 12px; couleur: #bababa; style de police: italique;
Cela ne devrait pas être trop difficile à comprendre; nous voulons div # planning être à la droite de div # visites, nous la faisons donc flotter à gauche et nous nous assurons que la largeur + le rembourrage seront égaux à 50%. Ensuite, ajoutez de la couleur et rasez les coins. le débordement caché est important. Rappelez-vous que nous allons extraire les détails de l'événement. nous ne voulons pas que les détails couvrent plus d'une ligne, nous allons donc les laisser déborder et ensuite masquer le débordement.
Le style pour le ul et li sont assez simples; nous avons donné le li une largeur de 1000px pour que ces détails ne soient pas bouclés.
Ensuite nous avons le ems à l'intérieur div # planning. C'est là que nos dates iront. Nous supprimons l'italique habituel en définissant le style de police sur normal. En définissant l'affichage sur inline-block, nous pouvons définir une largeur de 50px; comme nous affichons la date au format m / d, cela devrait être beau dans tous les cas. Et bien sûr, aux coins.
Enfin, pour les détails, nous utilisons le petit étiquette; nous allons définir la taille, le style et la couleur de la police.
La prochaine section principale de notre tableau d’état est div # projets.
#projects table width: 100%; espacement des bordures: 5px; #projects td padding: 2px; fond: #efefef; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; #projects td: not (: last-child) text-align: center; #projects img vertical-align: middle;
Nous veillerons à ce que notre tableau occupe toute la largeur de la page; nous allons également donner aux cellules une marge avec espacement des bordures. Nous allons donner à chaque cellule un peu de rembourrage et arrondir légèrement les coins. Ensuite, utilisons quelques sélecteurs CSS3 pour centrer le texte dans chaque cellule et attendre la dernière; si le navigateur ne prend pas en charge: not () ou: last-child, cette règle sera ignorée et toutes les cellules resteront alignées à gauche: ce n'est pas grave. Enfin, nous centrerons les images verticalement.
Il ne reste que le twitter div:
#twitter> div overflow: hidden; taille de police: 20px; #twitter ul list-style-type: none; largeur: 5000px; position: relative; #twitter li float: left; marge droite: 10px; #twitter img vertical-align: middle; marge droite: 10px; bordure: 0; hauteur: 20px; largeur: 20px;
Actuellement, notre div # twitter a seulement deux divs vides à l'intérieur. Nous allons bientôt charger les tweets avec JavaScript, mais voici ce que nous voulons faire: chaque div dans div # twitter sera un chapiteau, défiler les tweets à travers l'écran. Par conséquent, nous allons définir ces divs pour masquer leur débordement, et définissez également leur police sur 5px moins que le reste de la page. Pour les listes, nous allons supprimer les puces, les positionner relativement (afin de pouvoir animer le bon positionnement pour faire le rectangle de sélection) et définir la largeur à 5000px; J'expliquerai la largeur une fois que nous aurons le JavaScript. Chaque élément de la liste (chaque tweet) sera flottant à gauche et recevra un peu de marge droite. Enfin, les images (nous afficherons des images de profil Twitter) sont stylées de manière appropriée..
Sur le JavaScript! Pour ne pas encombrer l’espace de noms global, nous allons créer une fonction unique qui renverra les méthodes de notre tableau de statut. Voici la coque avec laquelle nous allons commencer:
var statBoard = function () return graphVisits: function (sélecteur) , twitterize: function (sélecteur, fn, objet) , iconizeWorkers: function (sélecteur)
Construisons graphVisits premier; vous voudrez probablement utiliser les analyses de Google Analytics ou de votre choix d’application de statistiques. Cependant, nous allons simplement générer des données aléatoires pour notre exemple.
Tout d'abord, nous allons configurer nos variables:
Accentsconagua
var el = $ (sélecteur), data = [], prev = null, showTooltip = fonction (x, y, contenu) $ ('', id:' tooltip ', texte: content, css: top: y + 5, left: x + 5). appendTo (' body '). fadeIn (200); ; Respectivement, nous avons l'élément dans lequel nous allons insérer le graphique, le tableau de données que nous transmettrons au plugin Flot jQuery, prev, que vous verrez en cours d’utilisation, et une fonction showTooltip. Cela crée ça info-bulle div # que nous avons appelé plus tôt, l’ajoute au corps et s’efface en fondu.
el.height ($ ('# agenda'). outerHeight ()); pour (i = 0; i < 32; i++) data.push([new Date(2010, 2, i).getTime(), Math.floor(Math.random() * 6000)]); Ensuite, nous définissons la hauteur de l’élément qui contiendra le graphique; le plugin flot l'exige. Nous avons mis à la même hauteur de div # planning; La méthode outerHeight de jQuery renvoie la hauteur de l'objet, y compris son remplissage et sa bordure. Ensuite, nous allons remplir notre tableau Les données; Le plugin Flot accepte un tableau de tableaux, chaque tableau intérieur ayant une coordonnée x et y. Pour nos coordonnées x, nous allons utiliser une date JavaScript; les valeurs que nous passons dans le constructeur Date sont l'année, le mois et le jour (il y en a plus, pour régler l'heure). Nous fixons l'année à 2010 et le mois à mars (c'est zéro, donc Jan = 0). Cela nous permettra d'avoir des dates dans le bas. Nous allons définir la coordonnée y à un nombre aléatoire.
(Remarque: dans le screencast, j’ai dit à tort que le paramètre année était basé sur l’époque Unix, de sorte que la valeur 10 donnerait lieu à 1980; c’est inexact; ce que j’ai expliqué plus haut est exact.)
$ .plot (el, [data: data, couleur: '# 494949', lignes: show: true, points: show: true], xaxis: mode: 'time', timeformat: ' % b% d ', grille: survolable: vrai, cliquable: vrai);
Maintenant, nous créons le graphique; nous appellerons la méthode plot et passerons l'élément qui tiendra le graphique en tant que premier paramètre. Le deuxième paramètre est un tableau, avec un seul objet: les données seront notre tableau de données, la couleur sera la couleur de notre ligne graphique; ensuite, nous définissons les objets lignes et points à afficher: true; les lignes "relieront les points" sur notre graphique, et les points rendront chaque point de donnée plus important. Nous pourrions mettre des objets multiples comme celui-ci dans le tableau du second paramètre pour représenter plusieurs ensembles de données..
Le dernier paramètre est un autre objet. il définit des propriétés sur le graphique. Nous allons définir l’axe des x pour qu’il soit en mode temps; la timeformat est la façon dont nous voulons que la date soit formatée. Selon la documentation Flot, "% b% d" utilisera le mois et le jour. Ensuite, nous définissons la grille permutable et cliquable.
el.bind ('plothover', fonction (event, pos, item) if (item) if (prev! = item.datapoint) prev = item.datapoint; $ ('# tooltip'). remove (); showTooltip (item.pageX, item.pageY, item.datapoint [1]); else $ ('# tooltip'). remove (); prev = null;); L'étape suivante consiste à créer la fonctionnalité d'info-bulle. le plover event est déclenché lorsque vous survolez le graphique, et il transmet trois paramètres aux gestionnaires d'événements: l'événement, la position et le point de données sur lequel vous survolez. Tout d'abord, nous allons vérifier si nous sommes sur un article. Si nous sommes, nous allons vérifier si prev ne correspond pas à la position du point. Si cela ne signifie pas que nous ne sommes pas sur ce point à la dernière plover (nous pourrions nous déplacer sur un élément, rappelez-vous). Par conséquent, nous allons enregistrer le point sur lequel nous nous trouvons, nous assurer que l'info-bulle ne s'affiche pas ailleurs et l'afficher dans le nouvel emplacement. Si prev égal au point de donnée actuel, nous n'avons rien à faire, car l'info-bulle est déjà affichée. Enfin, si nous ne sommes pas sur un point, nous allons nous assurer que l'info-bulle ne s'affiche pas et définir prev retour à null.
C'est la fin de notre graphVisits une fonction; passons à notre gazouillis une fonction:
twitterize: fonction (sélecteur, fn, sujet) var conteneur = $ (sélecteur);
Twitterize prend trois paramètres: le sélecteur de l'élément dans lequel charger les tweets, le nom de la fonction à appeler dans la bibliothèque twitterlib et le sujet de notre appel Twitter; cela pourrait être un nom d'utilisateur si nous utilisons la fonction de chronologie, ou une chaîne de recherche si nous utilisons la fonction de recherche.
Une fois que nous sommes dans la fonction, nous aurons le conteneur tweet.
twitterlib [fn] (sujet, limite: 10, fonction (tweets) var list = $ ('Ensuite, nous appelons twitterlib. Nous utilisons le nom de la fonction transmis et définissons le sujet comme premier paramètre. Ensuite, nous utilisons l'objet options pour indiquer à la bibliothèque de ne nous envoyer que les dix derniers tweets correspondant à notre demande. Enfin, nous ajoutons une fonction de rappel, qui reprend les tweets que nous recevons de twitterlib. Tout d’abord, nous définissons nos variables. Vous les verrez tous en cours d'utilisation.
pour (i = 0; i < len; i++ ) $('Nous passons maintenant en boucle sur chaque tweet du groupe. Nous allons créer un fragment HTML d'un élément de liste et une image encapsulée par une ancre. Nous trouvons l'ancre, définissons le href, et utilise fin() retourner au li. Ensuite, nous trouvons l'image, définissons la source et revenons à l'élément de la liste. Enfin, nous ajoutons le texte du tweet à l'élément de liste, qui le placera après l'ancre. Nous courons ce texte à travers twitterlib.ify.clean; cela reliera les liens, les mentions et les hashtags. Ensuite, nous allons ajouter l'élément de liste à la liste non ordonnée que nous avons créée..
Lorsque nous avons traité tous nos tweets, nous annexons la liste au conteneur..
Flashback: rappelez-vous comment nous définissons la largeur de #twitter ul à 5000px? Nous avons fait cela pour que chaque tweet soit sur une seule ligne et ne soit pas bouclé. C'est parce que nous allons maintenant obtenir la largeur de chaque élément de la liste.
$ ('li', liste) .each (fonction (i, el) totalWidth + = $ (el) .outerWidth (true);); list.width (totalWidth); Nous allons parcourir chaque élément de la liste (nous pouvons utiliser la liste comme paramètre de contexte) et utiliser le largeur extérieure fonction pour obtenir la largeur. Juste comme outerHeight, largeur extérieure inclut la bordure et le rembourrage, et (depuis que nous sommes passés vrai) les marges. Nous ajoutons toutes ces largeurs à notre totalWidth variable. Maintenant, totalWidth est la bonne largeur pour notre liste, nous allons donc définir cela.
function scrollTweets () var rand = totalWidth * Math.floor (Math.random () * 10 + 15); list.startAnimation (right: totalWidth, rand, 'linear', function () list.css ('right', - container.width ()); scrollTweets ();); scrollTweets (); Prochain ordre du jour: faire défiler cette liste. Nous allons calculer la vitesse de défilement en multipliant la largeur totale par un nombre entier aléatoire compris entre dix et quinze. Ensuite, nous faisons l'animation. Normalement, nous utiliserions le animer fonction, mais nous utilisons le plugin pauseanimate, nous utilisons donc la fonction startAnimation. Nous voulons animer la bonne valeur à totalWidth. Le paramètre duration obtient le nombre aléatoire. Nous allons régler l'assouplissement sur 'linéaire'; par défaut, c’est le «swing», qui s’adoucira au début et à la fin. Enfin, une fonction de rappel: nous allons définir la bonne position de notre liste sur la largeur du conteneur. Cela le poussera à la droite de l'écran. Ensuite, nous appellerons notre fonction scrollTweets afin que le cycle redémarre.
En dehors de notre ScrollTweets fonction, nous l'appellerons pour commencer.
La dernière partie de gazouillis sont les événements de vol stationnaire:
list.hover (function () list.pauseAnimation ();, function () list.resumeAnimation ();); ); // fin de l'appel twitterlib
Lorsque nous survolons notre liste de tweets, nous utilisons le plug-in pauseanimate pour suspendre temporairement l'animation. Nous allons utiliser la fonction resumeAnimation dans la fonction mouseout. C'est la fin de gazouillis!
Notre dernière fonction consistera à échanger les noms des travailleurs contre leurs images..
iconizeWorkers: fonction (sélecteur) $ (sélecteur) .each (fonction (i, el) var el = $ (el), workers = el.text (). split ("), imgs ="; $ .each ( travailleurs, fonction (i, val) imgs + = '
'; ); el.html (imgs); ); Ce n'est pas trop compliqué nous obtiendrons les éléments correspondant au sélecteur qui est passé et itérerons chacun d'eux. Nous obtenons leur contenu en le divisant au niveau des espaces et nous le stockons dans un tableau appelé travailleurs. Ensuite, pour chaque travailleur, nous ajoutons une image à la chaîne imgs, qui utilise les noms pour obtenir les images. Ensuite, nous remplaçons les noms par la chaîne imgs, en utilisant la méthode html de jQuery.
Bien sûr, nous devons appeler nos méthodes depuis notre code HTML:
L'étirement final: obtenir les données avec PHP. D'abord, récupérons les données du projet à partir d'une base de données. Cela nécessite que nous ayons créé une base de données. Vous êtes probablement assez familier avec le processus: j'ai lancé PhpMyAdmin et créé une base de données appelée "projets". Ensuite, j'ai créé une table appelée "project_status". Il comporte quatre champs: id (clé primaire à incrémentation automatique), nom, statut et ouvriers. Voici les données que j'ai entrées:
La fonction qui obtient ces données n'est pas difficile. Créez un fichier appelé statboard.php et entrons dedans!
function getProjects () $ sql = new mysqli ('localhost', 'root', ',' projects ') ou die (' ne peut pas se connecter '); $ resultat = $ sql-> query ("SELECT * FROM project_status" ); $ html = ""; tandis que ($ row = $ result-> fetch_object ()) $ name = ucwords ($ row-> name); $ status = ucwords ($ row-> status); $ img = str_replace ("", "", $ row-> status); $ html. = "
$ name 
$ status$ row-> travailleurs "; return $ html; Tout d'abord, nous créons une instance de la classe mysqli et la connectons à nos bases de données. Ensuite, interrogez la base de données pour toutes les lignes. Nous allons créer une chaîne appelée $ html, que nous reviendrons à la fin. Ensuite, nous utiliserons une boucle while pour parcourir chaque ligne que nous avons reçue. Dans notre boucle, nous définissons trois variables. Nous obtenons le nom et le statut, et utilisons la fonction PHP ucwords pour capatliser les premières lettres de chaque mot. Ensuite, nous obtenons le statut. Nous voulons utiliser ce statut comme nom des icônes de statut, nous allons donc utiliser str_replace pour supprimer les espaces dans l'étiquette de statut. Enfin, nous concaténons la ligne du tableau. Ces trois lignes produiront le même code HTML que celui utilisé lors du prototypage.
Une fois que nous avons parcouru chaque ligne, nous retournons la chaîne HTML. Pour utiliser ceci sur notre page, nous devrons d’abord obtenir statBoard.php:
Ensuite, nous allons supprimer la table que nous avons codée en dur précédemment et ajouter ceci à sa place:
Notre dernier travail consiste à extraire le calendrier de Google Agenda; Tout d'abord, vous devez définir votre calendrier sur public. ensuite, vous aurez besoin du flux XML pour le calendrier.
Nous ferons cela dans deux fonctions; commençons le premier:
function parseCalendarFeed ($ feed_url, $ count = 4) $ content = fichier_get_contents ($ feed_url); $ x = new SimpleXmlElement ($ content); $ entrées = $ x-> entrée; $ arr = array ();
Rencontrez le parseCalendarFeed une fonction; il faut deux paramètres: l'URL du flux et le nombre d'éléments que nous voulons obtenir. Nous commençons par extraire le contenu de l'URL et créer un SimppleXmlElement avec. Si vous inspectez cet objet, vous verrez que les événements sur le caledar sont dans la entrée élément; nous allons le stocker pour une utilisation ultérieure. Enfin, nous allons créer le tableau que nous renverrons à la fin..
pour ($ i = 0; $ i < count($entries); $i++) $item = explode("
", $ entrées [$ i] -> contenu); array_unshift ($ item, (chaîne) $ entrées [$ i] -> titre); Ensuite, nous allons passer en boucle sur chaque élément de $ entrées; nous voulons obtenir l'élément de contenu et l'élément de titre. Il y a un problème avec l'élément content, cependant; c'est formaté comme ceci:
Quand: [date ici]
Statut de l'événement: confirmé
Description de l'événement: [description ici]
Nous allons donc utiliser la méthode PHP exploser pour le casser dans un tableau, appelé $ item, avec chaque ligne en tant que membre du tableau. Ensuite, nous aurons le titre de l'entrée et utiliser array_unshift pour l'ajouter au début de $ item.
Lorsque cela sera fait, nous aurons un tableau ressemblant à ceci:
array ([0] => [titre de l'événement] [1] => Quand: [la date] [2] => [3] => Statut de l'événement: [le statut] [4] => Description de l'événement: [la description ])
foreach ($ item en tant que $ k => $ v) if ($ k === 2 || $ k === 3) unset ($ item [$ k]); else $ temp = exploser (":", $ v); $ item [$ k] = (isset ($ temp [1]))? trim ($ temp [1]): $ temp [0]; Maintenant, nous passons en boucle sur chaque membre du $ item tableau; nous n'avons pas besoin de membres avec les index 2 ou 3, nous allons donc les désélectionner. Pour le reste des éléments, nous les scinderons à la virgule. Cependant, nous devons utiliser une expression ternaire pour rétablir la valeur, car le premier élément (le titre) ne comporte pas de virgule. S'il y a un deuxième élément dans le tableau temporaire, nous allons définir la valeur dans le $ item tableau à la deuxième partie, qui contient les informations que nous voulons. S'il ne dispose pas d'un deuxième morceau (ce qui sera le cas pour le titre), nous utiliserons le premier. Maintenant, notre tableau ressemble à ceci:
tableau ([0] => [titre de l'événement] [1] => [la date] [4] => [la description])
Parfait… sauf que les indices sont incorrects.
$ item = array_values ($ item); $ item [1] = exploser ("", substr ($ item [1], 4, 6)); $ months = array ('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Sep', 'Oct', 'Nov', ' Déc'); $ item [1] [0] = array_search ($ item [1] [0], $ mois) + 1; $ item [1] = imploser ($ item [1], '/'); array_unshift ($ arr, $ item); // fin pour $ arr = array_slice ($ arr, 0, $ count); return $ arr; // fin parseCalendarFeed Pour gérer les index, nous utilisons la fonction array_values, nous les réinitialisons. Maintenant, il ne reste plus qu'à formater la date. Nous aimerions que la date soit au format «m / d». La date a un index de 1 dans notre tableau d'items, nous allons donc définir exploser ce membre; mais nous n'explosons pas le membre entier. Nous en obtenons une sous-chaîne, commençant à l’indice 4 et passant à 6 caractères. Cela nous donnera le nom du mois et le numéro du jour.
Nous aurons besoin de comparer le nom du mois avec un autre tableau, nous créons donc le $ mois tableau. Ensuite, nous mettons $ item [1] [0] (le nom du mois) à l’index du nom du mois dans $ mois un de plus. Nous utilisons la fonction array_search pour obtenir le bon index et en ajouter un car le tableau est basé sur zéro. Enfin, nous allons imploser le tableau, qui joint les membres, en passant "/" comme séparateur. Maintenant, notre date est correctement formatée. La dernière chose à faire est de le mettre dans $ arr; nous utilisons arrayunshift pour le mettre sur le début du tableau. Une fois que nous aurons fini de travailler avec toutes les entrées, elles seront dans l'ordre inverse, c'est ce que nous voulons..
Enfin, nous allons découper le tableau afin qu’il contienne uniquement le nombre d’éléments souhaités. Ensuite, nous pouvons le retourner!
Nous utilisons le parseCalendarFeed fonctionner dans notre getSchedule une fonction:
function getSchedule () $ feed = "http://www.google.com/calendar/feeds/7dsn8r5l974nlqo6uji6t386s4%40group.calendar.google.com/public/basic"; $ events = parseCalendarFeed ($ feed); $ html = ""; foreach ($ events as $ event) $ html. = "
$ événement [1] $ event [0] "; if (isset ($ event [2])) $ html. =" $ événement [2] "; else $ html. =""; return $ html; Dans cette fonction, nous stockons l'URL du flux et le transmettons à parseCalendarFeed; nous allons commencer notre $ html chaîne, puis boucle à travers chaque événement. Cela générera la même structure HTML que celle utilisée lors du prototypage; nous devons vérifier l'existence de détails ($ événement [2]) s'ils sont là, nous les ajoutons; sinon, on ferme l'item de la liste. Une fois que nous avons parcouru tout le monde, nous retournons la chaîne $ html.
Pour appeler le calendrier sur la page, utilisez-le à la place des éléments de la liste codés en dur:
&ly;?php echo getSchedule (); ?>
Étape 5: Admirez-le avec fierté!
Et c'est tout; c’est tout notre tableau d’état qui fonctionne, qui tire les données et défile sur Twitter! J'espère que vous vous êtes amusés et laissez-moi savoir ce que vous pensez.
$ status
