République Algérienne Démo ratique et Populaire

Université M'Hamed Bougara-Boumerdes

Fa ulté des s ien es

département d'informatique

TOAW

� Triangle de Pas al

Boukellouz Wafa

Groupe : ILTI

1

Table des matières

0.1 Introdu tion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

0.2 Types des sites web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

0.2.1 Les sites statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

0.2.2 Les sites dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

0.3 Php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.3.1 Dé�nition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.3.2 Utilisation pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.4 Html et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.4.1 HTML (HyperText Markup Language) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.4.2 Les versions du HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.4.3 CSS (Cas ading Style Sheets) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.4.4 Les versions du CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

0.5 Travail à faire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

0.5.1 Démmar he de resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

0.5.2 Code sour e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

0.5.2.1 Fi hier Formulaire.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

0.5.2.2 Fi hier Pas al.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

0.5.2.3 Fi hier Fon tion.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

0.5.2.4 Fi hier style. ss . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

0.5.3 A� hage des résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

0.5.3.1 La page Formulaire.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

0.5.3.2 La page Pas al.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

0.6 Con lusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2

Table des �gures

1 Fon tionnement du web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Fon tionnement des sites web statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3 Fon tionnement des sites web dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4 Relation entre les � hiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

5 Formulaire.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

6 Pas al.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3

0.1 Introdu tion

L'internet est basé sur une ar hite ture de réseau nommée lient-serveur. Ce i signi�e qu'il existe des ma hines

hébergeant l'information et fournissant l'a ès (les serveurs) et d'autres her hant ette information (les lients).

Dans le as d'un site internet, les pages omposant le site sont sto kées sur un serveur a�n de permettre aux lients

de les onsulter.

A notre niveau, nous distinguerons trois r�les :

� Le serveur : une ma hine qui héberge les pages d'un site

� L'administrateur : personne qui rée et met à jour le site

� Le lient : personne qui onsulte le site via Internet

Figure 1 � Fon tionnement du web

4

0.2 Types des sites web

On onsidère qu'il existe deux types de sites web : les sites statiques et les sites dynamiques.

0.2.1 Les sites statiques

Ce sont des sites réalisés uniquement à l'aide des langages HTML et CSS. Ils fon tionnent très bien mais leur

ontenu ne peut pas être mis à jour automatiquement : il faut que le propriétaire du site (le webmaster) modi�e

le ode sour e pour y ajouter des nouveautés. Ce n'est pas très pratique quand on doit mettre à jour son site

plusieurs fois dans la même journée, Les sites statiques sont don bien adaptés pour réaliser des sites � vitrine �,

pour présenter par exemple son entreprise, mais sans aller plus loin. Ce type de site se fait de plus en plus rare

aujourd'hui, ar dès que l'on rajoute un élément d'intera tion ( omme un formulaire de onta t), on ne parle plus

de site statique mais de site dynamique.

Figure 2: Fon tionnement des sites web statiques

0.2.2 Les sites dynamiques

plus omplexes, ils utilisent d'autres langages en plus de HTML et CSS, tels que PHP et MySQL. Le ontenu

de es sites web est dit � dynamique � par e qu'il peut hanger sans l'intervention du webmaster. La plupart des

sites web, aujourd'hui sont des sites dynamiques.

Figure 3: Fon tionnement des sites web dynamiques

5

0.3 Php

0.3.1 Dé�nition

PHP est un langage de s ript HTML exé uté du �té du serveur. Il veut dire � PHP : Hypertext Prepro essor

�. Sa syntaxe est largement inspirée du langage C, de Java et de Perl, ave des améliorations spé i�ques. Le but du

langage est d'é rire rapidement des pages HTML dynamiques.

L'origine de PHP remonte à 1995 quand Rasmus Lerdorf a réé PHP/FI, une librairie de s ripts Perl utilisés

pour la publi ation de son CV sur son site personnel. Au fur et à mesure des évolutions, la librairie a été portée

en C et agrémentée de nouvelles fon tionnalités pour réer des pages dynamiques simples pour le web et a éder à

quelques sour es de données. PHP/FI signi�e Personal Home Page/Forms Interpreter.

0.3.2 Utilisation pratique

� Forums et Messageries

� Commer e éle tronique

� Banque / Comptes en ligne

� Publi ation en ligne

� Moteurs de re her he

0.4 Html et CSS

Les langages HTML et CSS sont à la base du fon tionnement de tous les sites web. Quand un site est onsulté

via navigateur, il faut savoir que, en oulisses, des rouages s'a tivent pour permettre au site web de s'a� her.

L'ordinateur se base sur e qu'on lui a expliqué en HTML et CSS pour savoir e qu'il doit a� her.

0.4.1 HTML (HyperText Markup Language)

Il a fait son apparition dès 1991 lors du lan ement du Web. Son r�le est de gérer et organiser le ontenu. C'est

don en HTML qu'on é rit e qui doit être a� hé sur la page : du texte, des liens, des images.

0.4.2 Les versions du HTML

� HTML 1 : 'est la toute première version réée par Tim Berners-Lee en 1991.

� HTML 2 : la deuxième version du HTML apparaît en 1994 et prend �n en 1996 ave l'apparition du HTML 3.0.

C'est ette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le fon tionnement

de ette version sont donnés par le W3C (tandis que la première version a été réée par un seul homme).

� HTML 3 : apparue en 1996, ette nouvelle version du HTML rajoute de nombreuses possibilités au langage

omme les tableaux, les applets, les s ripts, le positionnement du texte autour des images, et .

� HTML 4 : il s'agit de la version la plus répandue du HTML (plus pré isément, il s'agit de HTML 4.01). Elle

apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui dé oupent une page web en

plusieurs parties), des tableaux plus omplexes, des améliorations sur les formulaires, et . Mais surtout, ette

version permet pour la première fois d'exploiter des feuilles de style, le CSS.

� HTML 5 : 'est La dernière version. En ore assez peu répandue, elle fait beau oup parler d'elle ar elle apporte

de nombreuses améliorations omme la possibilité d'in lure fa ilement des vidéos, un meilleur agen ement du

ontenu.

0.4.3 CSS (Cas ading Style Sheets)

aussi appelées Feuilles de style, le r�le du CSS est de gérer l'apparen e de la page web (agen ement, position-

nement, dé oration, ouleurs, taille du texte. . . ). Ce langage est venu ompléter le HTML en 1996.

6

0.4.4 Les versions du CSS

� CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de e langage qui permet de

présenter sa page web, omme les ouleurs, les marges, les poli es de ara tères, et .

� CSS 2 : apparue en 1999 puis omplétée par CSS 2.1, ette nouvelle version de CSS rajoute de nombreuses

options. On peut désormais utiliser des te hniques de positionnement très pré ises, qui nous permettent

d'a� her des éléments où on le souhaite sur la page.

� CSS 3 : 'est la dernière version, qui apporte des fon tionnalités parti ulièrement attendues omme les bordures

arrondies, les dégradés, les ombres, et .

7

0.5 Travail à faire

Réaliser une page web ontenant un formulaire onstitué d'un simple hamp texte et d'un bouton d'envoi

permettant de saisir l'ordre d'un triangle de Pas al. L'envoi du formulaire permet ainsi d'a� her un triangle de

Pas al.

Contraintes de réalisation

1. le hamp texte doit être valide (non vide et obligatoirement un entier positif)

2. une stru ture de donnée doit être utilisé pour sauvegarder le tableau en mémoire avant de l'a� her. (traitement

PHP)

3. fa torisation du ode en utilisant les fon tions utilisateurs

4. indi es des ases du triangle doivent être d'une ouleur di�érente

5. e n'est pas une ontrainte, 'est optionnel :les ases appartenant à une même diagonale doivent avoir une

même ouleur. Deux diagonales su essives doivent des ouleurs di�érentes (utilisation des CSS) En fait, 'est

pour montrer une des ara téristiques du triangle de Pas al : les sommes su essives des des ases appartenant

à la même diagonale onstituent la suite de Fibona i.

0.5.1 Démmar he de resolution

dans e TP, on a utilisé trois � hiers PHP, un � hier de style ss.

� formulaire.php : ontient le formulaire pour inserer les données né éssaires.

� Pas al.php : ontiend le ode php qui fait appelle aux fon tions al ulant le triangle de Pas al.

� fon tion.php : fon tiotns permettand de al ulet et d'a� her le triangle de Pas al

� style. ss : la mise en forme des pages.

On dé rit les relations entre les � hiers par le s héma i-dessous

Figure 4 � Relation entre les � hiers

8

0.5.2 Code sour e

0.5.2.1 Fi hier Formulaire.php

9

0.5.2.2 Fi hier Pas al.php

10

0.5.2.3 Fi hier Fon tion.php

11

12

0.5.2.4 Fi hier style. ss

13

14

0.5.3 A� hage des résultats

0.5.3.1 La page Formulaire.php

Figure 5 � Formulaire.php

15

0.5.3.2 La page Pas al.php

Figure 6 � Pas al.php

16

0.6 Con lusion

La ombinaison du HTML,CSS et PHP permet de réaliser des sites web dynamiques répondants aux besoins uti-

lisateurs,mais on peut retrouver autre langages de programmation qui peuvent étre désignés omme des on urents

de php tel que :

ASP.NET, Ruby, Java et les JSP (java server pages).

17