je vais parler dans ce tutoriel de l'Iframe. De bonne connaissance en html et en php sont nécessaire à la compréhension de ce tuto.
Voici un plan du tuto afin que si souhaité vous puissiez lire que les parties qui vous intéressent:
1. Qu'est ce que l'iframe
2. Inconvénients de l'iframe
3. Comment l'utiliser
4. Exemple avec un cas concret
Maintenant que vous savez de quoi on va parler on peut commencer!
1. Qu'est ce que l'iframe
Pour ce qui n'en ont jamais entendu parler l'iframe est un élément qui permet d'insérer une page web dans une autre.
- schéma iframe.jpg (12.43 Kio) Vu 1654 fois
Assez simple d'utilisation l'iframe peut être utile par exemple pour augmenter le caractère interactif de vos pages et pour un tas d'autres raisons.
2. Inconvénients de l'iframe
Malgré son utilité l'iframe possèdent un gros inconvénient: le contenu d'un iframe ne peut pas être référencé. C'est donc une limite à ne pas négliger. Voici cependant un script à placer dans votre head qui résout le problème de référencement.
- Code: Tout sélectionner
<script type="text/JavaScript">
if (parent.frames.length < 1)
{
document.location.href = ' page contenant l'iframe ';
}
</script>
3. Comment l'utiliser ?
Insérer tout simplement ce code dans la page qui contenir l'iframe.
- Code: Tout sélectionner
<iframe align="right" width="500" height="500" frameborder="1" scrolling="auto" src="page2.htm" name="nom de votre iframe"></iframe>
C'est l'affichage classique. Dans ce cas précis on affiche la "page2.htm" dans notre page principal.
Les attributs align, widht, height, frameborder et scrolling sont bien évidemment modifiable à votre guise. l'attribut src contient l'adresse de la page qui sera dans l'iframe. N'oublier pas de donné un nom à votre iframe dans l'attribut "name" afin de pouvoir l'appelé dans votre page principal.Il est aussi possible d'appeler une iframe via des liens html.
Etape 1: On définit tout d'abord le lien qui va appelé l'iframe.
- Code: Tout sélectionner
<a href="page2.htm" target="nom de votre iframe">Page 2</a>
l'attribut target est alors indispensable pour appeler correctement l'iframe. Elle doit contenir le nom de votre iframe. href contient ladresse de la page a inclure dans l'iframe.Etape 2: on définit ensuite l'iframe comme ceci.
- Code: Tout sélectionner
<iframe name="nom de votre iframe" scrolling="auto"> contenu de l'iframe </iframe>
Un click sur le lien qu' on a définit juste avant ouvrira et affichera le contenu de cette iframe. C'est si simple que cela!
le name est une fois de plus important, il doit être le même que celui contenu dans le target de votre lien. Il est tout à fait possible de placez un iframe dans une div ou un tableau html et d' utilisé plusieurs iframe ainsi que plusieurs liens.4. 4. Exemple avec un cas concret
Terminons ce tuto en illustrant les notions abordés plus haut grâce à un cas concret. Pour ce faire je vais vous présenter une situation devant laquelle j'ai été confronté et la solution que j'ai moi même mis en place pour les besoins d'un de mes sites.
Situation: J'ai une liste de 5 personnes et j'aimerai pouvoir afficher lors d'un clique les informations les concernant. Ces 5 personnes ainsi que leur infos sont stocké dans une base de donnée mysql .
Structure de la table 'personnel'
- Code: Tout sélectionner
-- Structure de la table `personnel`
--
CREATE TABLE IF NOT EXISTS `personnel` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nom` varchar(30) NOT NULL,
`age` int(2) NOT NULL,
`adresse` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
Problème:
Comment afficher ces informations en restant sur la même page sans utiliser d'Ajax. Évidemment cela serait beaucoup plus simples à réaliser si le lien pointait vers une autre page Comment être sur que les infos affichés sont bien ceux de la personne souhaitésUne solution simple et efficace comme vous vous en doutez: l'iframe.Cela consiste à crée des liens pour chaque personnes avec en paramètre de ce lien leur identifiant respectif. Ce lien appellera une autre page qui elle ne servira qu'a récupérer l'identifiant passé en paramètre et à affiché les infos de la personnes souhaités grâce à cette identifiant. Pour finir au lien de rediriger directement vers la deuxième page ( qui sert à afficher les infos) on met en place un iframe qui contiendra cette page ce qui nous permet de mettre à jour l'affichage des infos tout en restant sur la même page
- structure des fichiers.jpg (36.11 Kio) Vu 1654 fois
Je tiens à préciser que ce n'est pas la seul solution et que ce n'est probablement pas la meilleur! Elle est cependant assez rapide a mettre œuvre.
Explications:
Etape1: Affichage des liens
On souhaite afficher le nom des personnes ainsi qu'un lien pointant vers l'iframe des infos. On va chercher dans la base de données l'identifiant et le nom de chaque personne.
Une boucle classique php permet de les afficher.
Détail très important, on range leur identifiant en tant que paramètre du lien ( méthode GET). C'est ce paramètre qu'on utilisera dans le contenu de l'iframe afin de garantir l'intégrité des informations.
Créer donc un fichier index.php et copiez ce code. ( n'oubliez pas de rajouter la connexion à la base de donnée)
- Code: Tout sélectionner
$query= " select id, nom from personnel // requête qui retourne l'id et le nom de chaque personne
$resultat= mysql_query($query); // exécution de la requête
while ( $valeurs= mysql_fetch_array($resultat)) // boucle d'affichage
{
<a href="data.php?id=<?php echo $valeurs['id']; ?> "target="nom de l'iframe"> echo $valeurs['nom'];> // création du lien
}
Voila on a donc nos liens
Etape2: Affichage des infos
Maintenant il s'agit de créer notre deuxième page: C'est cette page qui sera appelé dans l'iframe et qui servira à afficher les infos.
On veut donc afficher les infos de la personnes souhaités.
On récupère donc l'id passé en paramètre et à l'aide d'une simple requête dans la bdd on affiche les infos correspondant.
Ouvrez un nouveau fichier php dans votre éditeur, nommé le data.php puis copier ces quelque lignes .
- Code: Tout sélectionner
if (isset($_GET['id'])) // Si on clique sur une personne
{
$id= $_GET['id']; // on récupère l'id passé en paramètre et on le range dans une variable
// on cherche les infos correspondant à l'id donc à la personne sur lequel on vient de cliquer
$sql = "SELECT age, adresse from personnel where danseur_id ='$id' ";
$req= mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
while ($data = mysql_fetch_array($req)) // boucle d'affichage
{
?>Age: <?php echo '<strong><big>'.$data['Age'].'</big></strong>';?> <br /> <?php
?>Adresse: <?php echo '<strong><big>'.$data['Adresse'].'</big></strong>';?> <br /><?php
}
}
Encore une fois ne pas oublier d'ajouter la connexion à la base de donnée
Etape 3:Appel de l'iframe
Dernière étape, la plus simple, on détermine l'endroit où on veut afficher l'iframe donc ou on veut afficher les infos. Pour ma part j'ai choisi de l'afficher dans une div à fond rouge. C'est pas très beau mais c'est plus pour appuyer mes explications.
code a insérer où vous voulez dans index.php
- Code: Tout sélectionner
<div style="background-color: #F00; width:**; height:**; ">
<iframe name="nom de l'iframe" src="**" width="**" height="**" frameborder="no"></iframe>
</div>
J'insiste encore sur le fait de l'importance du nom de l'iframe qui doit concordé dans le target des liens et dans l'appel de l'iframe.
Vous pouvez testé tous çà et l'adapter de façon à ce que ça colle à vos besoin.
En bonus un générateur gratuit d'iframe disponible ici
Voilà en espérant que ce tuto vous a plu et qu'il aidera certaine personne. A une époque j'aurai été bien content de tombés dessus sa m'aurait évité une semaine de recherche sur google
N'hésitez pour toutes questions ou remarques si j'ai laissé des erreurs ou autres.
BV
de 