2 ----------------------------INFORMATION----------------------------Couverture : Classique

[Grand format (170x240)] NB Pages : 220 pages

- Tranche : (nb pages x 0,055 mm) + 2 = 14.1 ----------------------------------------------------------------------------

Devenez professionnel en programmation web grâce au jQuery, Ajax et le couple PHP & MySQL Tome 1

Blaise Lusikila Luambasu

14.1 606952

Blaise Lusikila Luambasu

Devenez professionnel en programmation web grâce au jQuery,

Ajax et le couple PHP & MySQL

Tome 1

Dev

enez

pro

fess

ionn

el en

pro

gram

mat

ion

web

gr

âce

au jQ

uery

, Aja

x et

le co

uple

PH

P &

MyS

QL

Blai

se L

usik

ila

Luam

basu

1

2 2

2 3

Dédicace

Je dédie le premier tome de ce livre à

Ma maman AMBA IMBENGA July

Comme souvenir de notre souffrance. Je suis reconnaissant envers toi, ma maman…

Blaise LUSIKILA LUAMBASU Ton fils

2 4

2 5

Préface

Beaucoup d’ouvrages parlent de la bibliothèque jQuery, technologie Ajax, le langage PHP et Le Système de Gestion de Base de Données MySQL sont importants et contribuent à la formation des bons programmeurs de demain, ainsi, nous vous encouragions de ne laisser aucun ouvrage de ce genre.

Car, nous vivons dans un monde de la complémentarité. C’est qui voudrait dire : la matière que tu n’as pas eu l’occasion de

comprendre dans tel ou tel autre ouvrage, peut être expliquée d’une façon très simple dans un autre ouvrage.

Cependant, nous estimons que, Blaise LUSIKILA LUAMBASU a rédigé cet ouvrage avec une volonté de concision et de progression dans sa démarche ; il est illustré par ailleurs de nombreux exemples et figures. En bref, c’est un ouvrage tellement pratique au point de faciliter la compréhension même aux néophytes qui n’ont pas des notions sur le sujet.

Nous vous informons que, ce livre ne constitue pas un condensé de commandes de la bibliothèque jQuery, technologie Ajax, du langage PHP et Le SGBD MySQL. Chaque notion importante est introduite par un exemple pratique simple. Afin de faciliter la compréhension maximale.

En tant que Directeur Général d’une institution Universitaire, en lisant quelques pages de cet ouvrage, nous trouvons que les étudiants et les enseignants trouveront des exemples pédagogiques pour chaque concept abordé, ainsi que des exercices thématiques.

Nous vous souhaitons bonne lecture.

Directeur Général de l’ESMICOM

Joseph MABOTI N’SIALA

2 6

2 7

Première étape :

Les bases de la bibliothèque jQuery

Cette première étape est consacrée à l’apprentissage rapide et précis des concepts de base qui vont nous aider à programmer en jQuery.

Nous allons ici découvrir qu’est ce que la bibliothèque jQuery, comment l’intégrer dans une page web, quelles sont ces méthodes de base et d’autres choses importantes.

2 8

2 9

Introduction

Vous vous demandez souvent, si c’est vraiment possible de réaliser un site web complexe comme Facebook ? Beaucoup pense même que facebook est venu de la magie. Non, loin delà, c’est un produit de la volonté et du travail informatique car, on peut faire mieux que ça, si on a seulement la volonté d’apprendre. D’ailleurs, nous allons vous le prouver si vous en avez des doutes.

Nous sommes certains que vous ne savez pas au juste ce que l’union de jQuery, Ajax, PHP et MySQL peut faire dans votre vie de programmeur web. Ce n’est pas grave, installez-vous seulement confortablement nous allons prendre soin de tout expliquer pas à pas et vous verrez l’importance.

Pour qui nous écrivons ce livre ?

Ce livre est écrit pour : • Les programmeurs de PHP et MySQL, langage CSS, HTML, qui sont

prêts et engagés de découvrir la bibliothèque jQuery et la technologie Ajax afin de les intégrer dans leurs pages web.

• Aux curieux comme d’habitude et surtout que ce sont eux qui se donnent souvent, qui se demandent au juste comment la bibliothèque jQuery et la technologie Ajax fonctionnent ?

Pas de souci mes amis curieux, ce livre vous montrera comment ça marche, comment ça fonctionne, comment ça tourne…

Comme nous avons l’habitude d’évoluer chronologiquement dans tous nos ouvrages, celui-ci ne peut pas rester indifférent, il est lui aussi comme un arbre à plusieurs étapes dont, chacune des étapes possède un ou plusieurs chapitres.

2 10

Donc, il faut lire chaque chapitre dans l’ordre chronologique. Cependant, rien ne vous oblige à respecter cet ordre si vous maîtrisez déjà tout ou partie des notions vues dans un chapitre particulier.

Est-ce que je suis clair ? Ok, rendez-vous au chapitre un de notre livre.

2 11

Chap I jQuery et le web

On se demande, vous êtes intéressés de lire ce livre ? Si oui, vous avez fait un bon choix car, il va vous apprendre à utiliser la bibliothèque JQuery dans votre site web ! Je suis fortement certain que vous allez vous poser la question de savoir :

Qu’est-ce que jQuery ?

A mon humble avis, cela est une bonne question qui mérite avoir une réponse. Tout ce que vous pouvez retenir est que, jQuery est une bibliothèque JavaScript libre créée par John… en janvier 2006.

Vous allez vous rendre compte que cette bibliothèque va nous rendre la vie facile pour l’exécution des commandes communes de JavaScript. Ainsi, nous aurons la facilité d’agir sur le code HTML, CSS, AJAX et JavaScript lui-même.

Quelles sont les fonctionnalités JQuery ?

JQuery a de nombreuses fonctionnalités, je peux citer quelques-unes maintenant avant que Satan vous conseille de ne pas continuer la lecture : • Vous avez la possibilité de parcours et de modifier le DOM ainsi que,

des sélecteurs CSS 1 à 3 ; • Vous avez la possibilité d’exécuter les Événements ; • Vous avez la possibilité de créer les effets visuels et les animations ; • Vous pouvez manipulations des feuilles de style en cascade

(ajout/suppression des classes, d’attributs…) ; • Vous pouvez l’utiliser avec Ajax ; • Vous avez la possibilité d’utiliser les Plugins que vous pouvez créer ou

même les plugins que les autres ont créés ;

2 12

Tout ça, nous avons la possibilité de les faire avec JavaScript mais pourquoi nous parles-tu de JQuery ?

Vous avez raison de parler ainsi car, c’était aussi mon cas lorsque je l’apprenais en 2007. Laisse-mois vous dire une chose :

jQuery a une seule devise qui est « Write less, do more », ce qui voudrait dire en Français « Écrivez moins pour faire beaucoup ».Comprenez directement qu’un programmeur professionnel comme moi, je n’ai pas besoin d’écrire plusieurs ligne de codes pour obtenir un résultat X au moment où il y a une possibilité qui pourra me permettre d’écrire quelque deux lignes seulement.

Je pense que vous aussi vous ne pouvez jamais vouloir travailler plus pour avoir le même salaire que la personne qui a moins travaillé.

Donc, en utilisant JQuery vous utiliserez des instructions simples qui vous permettront de réaliser des grandes choses sans avoir écrire plusieurs lignes de codes comme nous avons l’habitude de le faire en JavaScript.

Les navigateurs

Si vous avez déjà une fois dans votre vie consulté un site web ou encore, vous avez une fois parvenu à faire une rechercher sur le web, surement vous avez aussi utilisé un navigateur. En quelques mots je peux vous dire qu’un navigateur est un logiciel web qui vous permet de naviguer ou consulter de pages web.

Ceux-que vous voyez ici, sont les icônes des navigateurs web les plus

utilisés dans le monde entier. Alors, puisque vous allez devoir développer des sites web, il faut directement penser navigateur car, ce par lui que votre site sera visité.

Nous avons constaté que les différentes versions du langage JavaScript et des navigateurs web, certaines fonctionnalités ont été retenues, d’autres non.

Cela voudrait dire, vous pouvez écrire une instruction JavaScript dans votre site web, lors de lacement, l’instruction s’exécute bien dans tel navigateur mais pas dans tel autre.

Ce n’est pas tout, cette même instruction peut très bien marcher dans telle version de navigateur, mais pas dans telle autre version de ce même navigateur.

2 13

Toutes ces choses imposent les programmeurs de tester une instruction JavaScript si elle est compatible dans tel navigateur et dans telle version de ce même navigateur ainsi de suite.

Imaginez maintenant si vous allez tester votre instruction pour voir si elle est passable dans tous les navigateurs du marché et dans toutes les versions de ces navigateurs. Combien de temps allez-vous consommé ? Beaucoup.

Dieu est grand, depuis janvier 2006 la bibliothèque JQuery nous a amené une solution, Quelle est cette solution ? Elle prend en charge toutes les différentes versions du langage JavaScript qui existent. Encore, elle marche très bien avec tous les navigateurs qui existent quelques soient ses différentes versions.

Quelle joie !

Combien d’entreprises utilisent JQuery à cause de sa grande facilité ?

Cette bibliothèque est pour nous tous, elle est venue nous rendre tous la vie facile. Franchement je peux vous dire que beaucoup d’entreprises de web utilisent aujourd’hui la bibliothèque JQuery non seulement parce qu’elle est facile à utiliser mais aussi, elle est très efficace.

Pour ne pas citer toutes les grandes entreprises du web qui l’utilisent, je citerai quelques-unes que vous connaissez parfaitement : • Google • Microsoft • IBM • Netflix • Entreprise : cliniqueinformatique.org • Réseau sociale : facebook.com • Réseau sociale : filenoox.com

Vous êtes finalement convaincu ? Oui. C’est bien, nous pouvons poursuivre notre aventure puisque vous êtes

bel et bien convaincu.

Trouver et utiliser JQuery

Où trouver cette bibliothèque JQuery1 et comment l’utiliser ? Ce n’est pas difficile à trouver, rendez-vous à l’adresse suivante : 1 http://jquery.com/download/

2 14

http://jquery.com/download/ Une fois vous entrez, le site vous donne deux choix :

1. jquery_min.js – most recent stable ; 2. jquery.js

Dans le premier dossier, vous ne trouvez pas de commentaires, cela fait que ce dossier ne soit pas lourd environs 92,2 Kio.

Tandis que dans le deuxième dossier, vous trouvez plein de commentaires ce qui rend le fichier un peu lord environs 247 Kio.

Il y a-t-Il une différence entre les deux ? Je peux dire oui et non. Pour quoi oui ? Parce que, le premier choix est la version minimisée de

la bibliothèque, dans ce dossier, on n’a pas inséré des commentaires ainsi, le dossier n’a pas le même poids que l’autre version. Donc, il est plus lourd que la version minimisée.

Pour quoi non ? Parce que, toutes ces deux versions « version minimisée et la version non minimisée » donnent le même résultat. Il n’y-a pas une différence du point de vue fonctionnement.

Comment puis-je télécharger un truc pareil ? L’Internet Explorer, me donne le message suivant : « Editeur du fichier jquery.js n’a pas pu être vérifié ». Mon professeur ceci n’est pas un virus ?

2 15

Mozilla me pose la question suivante : « Si vous faites confiance à ce site, cliquez sur le bouton autorisé… »

Ne craint rien comme la Bible nous dit. Ce n’est pas un virus, tous ces

deux fichiers sont parfaitement saints. Continuer ton téléchargement avec allégresse.

Oh, je pensais avoir trouvé un fichier zip ou un dossier contenant plusieurs fichiers à télécharger ?

Mais voici ce que j’ai pu trouver dans ton site, que des écrits bizarres que je n’arrive même pas à lire.

Oui, mon frère c’est ça la bibliothèque jquery que nous avons cherchée.

Tout ce qu’il te reste à faire est de créer un dossier dans bureau nommé le jquery_cours en suivant l’exemple de l’image suivante :

2 16

Vous voyez le dossier jquery_cours dans l’image 1. Bon, qu’est-ce qu’on fait maintenant ? Dans ce dossier, copier toutes ces lignes de codes dans un fichier et

donne-le le nom de jquery.js L’image qui suit nous montre que, le fichier jquery est déplacé dans le

dossier c :\Documents and Settings\Administrateur\Bureau\jquery_cours

2 17

Dans notre dossier jquery_cours, nous n’avons qu’un seul fichier qui est jquery.js c’est donc notre tout premier fichier.

Le voilà, il fera bel et bien l’affaire à la suite de notre aventure. Retenez

que c’est dans ce même dossier « jquery_cours » que nous allons créer tous les autres fichiers : HTML, CSS et JavaScript.

Pour ne pas perdre le temps « time is money », je souhaite qu’on entre dans la pratique. En passant, le deuxième moyen d’utiliser Jquery est de faire référence sur un fichier jquery.js se trouvant à distance dans un CDN (Content Delivery Network). Comme Google.

Nous parlerons de cette approche plus tard.

Pré requis

ATTENTION, ATTENTION, Je ne peux pas vous conseiller de lire ce livre si vous n’avez pas un peu de connaissance sur quelques langages qui seront manipulés par la bibliothèque JQuery. Bref, avant de continuer la lecture, vous devriez avoir même une petite connaissance sur les langages suivants :

• HTML • CSS • JavaScript

2 18

2 19

Chap II Prémier pas avec jQuery

Je pense que vous avez une petite ou une grande connaissance des langages que je venais de citer ci-haut. Maintenant lancez votre logiciel de création de site quant à moi, j’utilise Notepad++.

C’est pourquoi même pour copier les codes de la bibliothèque jquery, j’ai utilisé Notepad++.

Voulez-vous savoir pourquoi je l’aime ? Seulement parce qu’il est très simple, en plus, il est gratuit, il suffit d’avoir une connexion internet puis vous le télécharger sans une condition quelconque.

Quelle facilité ?

2 20

Maintenant, on va faire un petit essai. Mais avant tout, vous devez savoir comment ça marche. La

bibliothèque jquery peut être incluse dans toutes les pages web en utilisant le code suivant :

Dans cet exemple, l’attribut src égal ="/chemin/jquery.js. Comme vous

pouvez le voir, l’emplacement du fichier est dans le dossier chemin. Donc, tous nos fichiers HTML et autres, doivent se trouver dans le même dossier que la bibliothèque jquery.

Par exemple : nous aurons besoin de créer un fichier JavaScrip, celui-ci nous aidera à programmer nos instructions en utilisant la bibliothèque.

Qu’est-ce qu’on écrit dans le fichierjava.j ? Tout ce que nous aurons besoin d’exécuter comme instruction dans votre feuille HTML.

Je vous donne cet exemple :

Voici une petite instruction JavaScript qui peut se trouver dans le fichier fichierjava.js. Elle aura pour but de demander au navigateur d’afficher « Bonjour Blablabla ».

NB : A la place d’utiliser un fichier JavaScipt pour programmer vos instructions, vous pouvez aussi directement programmer vos instructions JavaScript dans la même feuille HTML.

<scriptsrc="/chemin/fichiejava.js"></script>

<script src="/chemin/jquery.js"></script>

jQuery(function(){

jQuery(‘#DivBonjour’).html(‘Bonjour Blablabla’) ;

}) ;