12 avril 2010 | Dans Codes

Tutoriel – jQuery + Ajax – ma première page web

jQuery website

Ce weekend, j’ai eu envie d’apprendre les bases de jQuery, une librairie Javascript puissante et simple d’utilisation qui permet entre autres de créer des effets de transition sur les éléments d’une page web et d’utiliser des requêtes Ajax pour charger du contenu sans avoir besoin de recharger cette page ! Je vous propose donc ce petit exercice, niveau débutant.

Introduction

Avant toute chose, si vous ne disposez pas d’un outil favoris pour écrire vos fichiers HTML, CSS, PHP … (etc.) Je vous propose d’utiliser Aptana RadRails. Cet IDE ressemble à Eclipse, donc si vous avez déjà suivi mon tutoriel sur JAVA et les JSP, vous devriez vite retrouver vos repaires :) Puis il est agréable à utiliser et l’auto-complétion fonctionne plutôt bien. Pour télécharger Aptana, suivez ce  lien. Vous pouvez laisser les options par défaut.

Lancez Aptana. Le programme vous demandera d’installer un module pour pouvoir coder avec Ruby On Rails. Vous pouvez annuler cette étape, ce n’est pas nécessaire pour cet exercice :) Dans la perspective principale du logiciel, cliquez sur l’icône des perspectives, en haut à droite et sélectionnez Aptana web perspective.


bouton des perspectives Aptana

Maintenant, cliquez sur la même icône en haut à gauche, juste en dessous du menu File. Sélectionnez Default web project. Donnez-lui un nom puis cliquez sur Next. Cliquez sur Install JavaScript Libraries… Dans la liste qui s’affiche, cochez jQuery Support dans Featured Plugins puis cliquez sur Install.

Une fois fait, vous pouvez à nouveau créer votre Default web project en sélectionnant la librairie jQuery. Votre projet apparaîtra dans la liste des projets. Remarquez que le dossier lib contenant la librairie jQuery a été automatiquement créé, ainsi que des pages html d’exemples que vous pouvez supprimer.

Vue Projets

Pour cet exercice, vous aurons également besoin d’un petit plugin appelé Color Animations Plugin. Il vous suffit de le télécharger ici, de bien le renommer avec l’extension .js (et pas .js.txt, ce qui m’est arrivé quand je l’ai téléchargée :/ ) et de le copier dans le dossier lib votre projet sous Aptana.

Le projet

Bon, maintenant que tout est en place, voyons de plus près cet exercice. Le but est de créer une page web simple, composée d’un menu et d’un bloc de contenu. Lorsqu’on clique sur chacun des liens du menu, un contenu différent est chargé dans le bloc qui se trouve en dessous du menu. De plus, un effet de transition est ajouté aux liens du menu pour dynamiser le site :)

A la fin de l’exercice, votre site pourrait ressembler à quelque chose de ce genre :

Démo jQuery + Ajax

Pour une démo en live, vous pouvez aussi regarder cette vidéo :

étape 1 :

On va commencer par créer la page index.html avec le menu et le bloc de contenu. Pour se faire, on va utiliser une liste HTML et un div tout simple. Si vous ne connaissez pas le fonctionnement de ces balises, faites une recherche sur Google ou Bing et vous trouverez très rapidement des explications :)

Voici le code HTML contenu dans les balises <BODY> et </BODY> de la page index.html :

<div id="site">
        <h1>Mon premier essai avec JQuery et Ajax</h1>

	<div id="nav">
		<ul>
			<li id="first_li"><a class="ajax" href="page1.html">Texte 1</a></li>
			<li id="second_li"><a class="ajax" href="page2.html">Texte 2</a></li>
			<li id="third_li"><a class="ajax" href="page3.html">Texte 3</a></li>
		</ul>
	</div>

	<div class="clear"></div>

	<div id="content"></div>
</div>

On en profite pour créer le contenu qui va être chargé dans le bloc lorsque l’utilisateur clique sur les liens du menu. Créez trois fichiers html dans votre projet ( File > New > HTML File ). Pour chaque page, supprimez tout ce qui se trouve à l’intérieur et copiez le code suivant :

<div class="first_part">
	<div class="illustration">
		<img src="images/armored-tux.png" title="Armored Tux" alt="Armored Tux"/>
	</div>

	<div class="texte">
		<h2>Premier texte</h2>
		<p>Vestibulum iaculis consequat lacinia. Aenean dolor est, dignissim et ultrices eu, commodo tempus nunc.
		Nulla quis nisl sit amet justo porttitor lacinia blandit sit amet mauris. Proin non semper libero. </p>
	</div>
</div>

<div class="clear"></div>

<div class="second_chapter">
	<p>réalisation : votre nom</p>
</div>

Pensez à utiliser vos propres images ^^ Si vous ne savez pas quoi utiliser, vous pourrez récupérer les images de mon exemple à la fin de ce tutoriel.

étape 2 :

Passons au CSS, pour mettre tout ça en forme. Créez un dossier css à la racine de votre projet et, à l’intérieur, ajoutez un fichier CSS. Effacez ce qui s’y trouve et copiez-y ce qui suit :

body {
	text-align: center;
}

.clear {
	clear: both;
	margin-bottom: 15px;
}

#site {
	width: 800px;
	margin: 0 auto;
}

#nav {
	width: 700px;
	margin: 0 auto;
}
#nav ul {
	list-style-type: none;
}

#nav ul li {
	float: left;
	width: 200px;
	background-color: black;
	margin-right: 10px;
	border: 2px solid white;
	text-align: center;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#nav ul li a {
	display: block;
	width: 100%;
	padding: 10px 0px;
	text-decoration: none;
	color: white;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#content {
	width: 500px;
	overflow: hidden;
	margin: 0 auto;
}

.first_chapter {
	width: 500px;
}

.illustration {
	float: left;
	margin: 5px;
}

.texte {
	text-align: justify;
}

.second_chapter {
	background-color: lightGrey;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.second_chapter p {
	padding: 7px 0px;
}

Pensez à indiquer le fichier CSS dans votre page index.html avec le code suivant, à placer entre les balises <HEAD></HEAD> :

<link rel="stylesheet" type="text/css" href="css/style.css">

étape 3 :

Enfin, on passe au cœur de cet exercice, le code javascript qui va permettre d’animer nos liens et de charger notre contenu. Tout d’abord, il faut indiquer dans la page index.html qu’on va utiliser jQuery et Color Animations. Ajoutez donc les deux lignes de code suivante entre les balises <HEAD></HEAD> :

<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.color.js"></script>

Ensuite, on va créer deux fonctions. Pour commencer, on va indiquer que ces fonctions seront utilisées une fois la page web prête à être utilisée. Pour ce faire, on va utiliser $(document).ready() :

<script type="text/javascript">
	$(document).ready(function(){
                 ...
        });
</script>

A l’intérieur, on déclare les deux fonctions. La première sera appelée lorsqu’un clic aura lieu sur n’importe quel lien HTML. On utilise la méthode animate() pour modifier la couleur de fond et la couleur du texte de l’élément courant (grâce à $(this)) 2 fois de suite.

$("a").click(function(){
		$(this).animate({
		backgroundColor:'white',color:'black'
		}, 200).animate({
		backgroundColor:'black',color:'white'
		}, 500);
});

La seconde sera appelée lorsqu’un clic aura lieu sur les liens HTML de la classe ajax. On créé une requête ajax pour laquelle on spécifie la source a récupérer avec le paramètre url. En cas de succès, on charge la réponse de la requête dans le bloc appelé content !

$("a.ajax").click(function() {
	$.ajax({
	type:"GET",
	url:$(this).attr("href"),
	success: function(retour){
		$("#content").empty().append(retour);
		 }
	 });
	return false;
});

Au final, le code javascript est placé entre les balises <HEAD></HEAD> et donne ceci :

<script type="text/javascript">
		$(document).ready(function(){

			$("a").click(function(){
				$(this).animate({
					backgroundColor:'white',color:'black'
				}, 200).animate({
					backgroundColor:'black',color:'white'
				}, 500);
			});

			$("a.ajax").click(function() {
				 $.ajax({
				       type:"GET",
				       url:$(this).attr("href"),
				       success: function(retour){
						$("#content").empty().append(retour);
				       }
				   });
				   return false;
			});
		});
</script>

Il ne vous reste plus qu’à tester votre page en cliquant sur le bouton IE en bas de votre page index.html. Vous pouvez également cherchez votre projet sur votre disque dur et lancer le fichier index.html avec votre navigateur préféré (Regardez dans mes documents ou MyDocuments).

Si tout s’est bien passé, vous avez créé votre premier site web en utlisant jQuery et Ajax :D Bon, site web est un bien grand mot et il reste encore beaucoup de possibilités à explorer. Si vous voulez en apprendre davantage sur jQuery, visitez le site web officiel. Il existe aussi beaucoup de tutoriels sur internet qui vous aideront à progresser :)

edit: supression de l’archive du projet dû à une corruption du fichier.

Share

Billets pouvant vous intéresser :

  1. Tutoriel : Windows 7 – Enregistrer du son avec Audacity
  2. Tutoriel – Créer un site web avec Java [Partie I]
  3. Tutoriel : Windows 7 – Réaliser des captures d’écran avec FRAPS
  4. Tutoriel – Récupérer/Sauvegarder ses e-mails avec Thunderbird

Mots-clefs :, , , ,

4 réactions sur “Tutoriel – jQuery + Ajax – ma première page web”

  1. Mehdiway dit :
    29 octobre 2011 à 4 h 31 min

    Merci pour le très bon tuto, et c’est très bien expliqué en plus :D
    Je voudrais juste savoir, pourquoi vous n’avez pas utilisé la méthode .load() pour charger vos pages, c’est plus facile non ?

  2. ethan dit :
    31 octobre 2011 à 20 h 05 min

    Merci :)

    La méthode .load() doit pouvoir fonctionner aussi, je ne l’ai pas testée :)

  3. Anentropik dit :
    11 janvier 2012 à 13 h 13 min

    Bonjour,

    Merci pour ce joli petit exemple !

    Le lien vers votre archive contenant votre projet donne sur un fichier RAR corrompu inutilisable.

  4. ethan dit :
    12 janvier 2012 à 21 h 19 min

    Merci de me l’avoir signalé :) Malheureusement, je n’ai plus les sources et n’ai donc pas les moyens de refaire cette archive pour le moment. Il faudra que je trouve le temps de réécrire tout l’exemple pour régénérer l’archive.

Réagissez