Il nous a demandé de créer un site et de le mettre en ligne, suivant une source. Cette réalisation est faite en inclusion.

Le travail final:

La mise en page n’est pas tout à fait terminé…..donc les code seront mit ultérieurement.

Création: HTML, CSS, JavaScript et PHP .

Le code HTML: Les différentes parties.

Création d’une page index.php qui renvoie sur formation.php. Il ne doit surtout pas avoir d’espace au début du fichier, avant la balise <?php

On peut aussi créer un fichier .htaccess dans lequel on place la règle d’écriture, vers formation et vers index. Cette méthode est invisible dans la barre d’adresse et la page index.php devient inutile. C’est cette méthode qui est retenue.

La page contact:

Le script.php du formulaire est placé dans la page contact.php.

Dans ce script il faut changer le $destinataire et le formulaire fonctionne déjà.

Nous rajoutons les champs requis dans l’input avec required et nous donnons une class au  champs requis  dans le label.

Le type texte du mail est transformé en type Email.

Nous rajoutons un champ prénom dans le formulaire; pour cela il faut aussi rajouter la ligne concernant la valeur $prenom  et également renseigner le $headers en rajoutant .$prenom. pour que celui-ci indique aussi le prénom dans l’intitulé du mail.

Pour les boutons radios renseigner aussi la valeur $civilite, nous pouvons aussi la placer dans le $headers. Dans le formulaire, les boutons radios sont cheked via la valeur $civilite pour qu’il soit déjà activé en cas d’erreur.

Nous plaçons un sélecteur de tranche d’âge avec la balise <select> accompagnée d’un label. Indiquons la variable $age, sa valeur.

Nous faisons la même chose avec la case à coché chekbox.

Pour que dans le message il apparaisse l’heure, la date et autre; nous pouvons indiquer  dans la valeur $message  dans le if (( $nom  ……

Le code CSS:

Pour aligner les spires il faut rajouter quelques pixels à l’image dans l’enveloppe.

Les liens, de l’entête et du pied de page, sont  placés en dehors. Ils sont en display:block, en overflow:hidden, une hauteur est appliqué, et un padding-top de même hauteur pour les chasser.

PHP

La galerie est d’abord faite en html (.php).Un   script est placé pour indiquer le chemin. Un autre script d’appel est placé le plus bas possible(pour que celui-ci est toutes les informations).  Après un peu de CSS il faut l’intégrer.

Nous créons un fichier config, retailleur-image, cache et un dossier  lib(contenant lib-image et lib-credit).

Nous pouvons copier le php  après <ul> (dans galerie.php) et changer le chemin. Dans le fichier galerie enlever les vignettes(ce qu’on a pas besoin). Il faut donner une valeur à $largeurDiapo et $hauteurDiapo, pareil pour vignette. Il n’y a pas besoin de valeur r ni de compteur plus d’incrémentation .

Pour tester tout ça, il faut le mettre sur le serveur.

Apres la connexion sur cpanel d’o2switch, je crée un sous-domaine(site-imep.gwd-france.com) pour l’exercice évalué. Puis je me connecte  à cyberduck pour envoyer le contenu dans le dossier que je viens de créer et qui est apparue dans cyberduck. Un simple glissé déposé sur le dossier suffit.

Nous pouvons vérifier que tout fonction correctement (formulaire de contact compris).

Nous créons une fonction (lignes 1 à 12) qui doit être appelé (ligne 29 à 36). Ici nous faisons des moyens (pour l’heure nous ne nous occupons pas du formulaire).

Ligne 1 à 7 et 22 à 24 nous écrit un nombre de fois défini Béjour!

Compte à rebours: rentrez une valeur en A.

Calculer un carré:

Plus grand que:

autre méthode:

function plusGrandTer( $x, $y) {
  return  ($x>$y) ? $x : $y ;
}

La mienne plus basique:

Racine carré:

l’idée globale est que l’on récupère la valeur de retour pour en faire quelque chose.

Tableau de calcule d’hypoténuse:

L’arrondi à deux chiffre peut s’écrire ligne 32 de cette façon:

round (hypotenuse ($i,$j) ,2)

Pour préparer les images de notre galerie nous allons créer des fonctions.(voir article précédant Galerie d’images).

Dans un premier temps nous créons la page en statique, ainsi que la mise en page. Créons également le dossier images, pour les vignettes et les images.

Ce qui nous donne:

Après nous remanions le tous, quelques dossiers renommés, déplacé, etc.

Le dossier cache nous sert pour les vignettes.

Nous partons du fichier animaux.html que nous coupons en plusieurs fichers que nous plaçons dans inclusion.

Le main du site devient galerie.php.

Nous faisons plutôt deux fichiers css:

Le dexième css:

Qui est associer avec le javascript pour former une bordure autour du bloc afficheur.

L’entête du site: entete.php

La navigation principale: navigation.php

Nous plaçons du php pour lire tous les fichiers se trouvant dans galeries, sans les fichiers courants et parents,  symbolisés ici par (!=’.’     et     !=’..’)  ensuite nous donnons l’ordre d’écrire ces fichiers qui remplacent le menu initial.

Le main: galerie.php

Le titre de la galerie apparaîtra avec son nom respectif. Et les fichiers lu grace au php seront bien des images (celles qui s’afficheront). Pour l’instant les vignettes sont remplacées par le nom de ce fichier (chaque image).

Nous plaçons du php « include » pour inclure l’entête, la navigation, en haut du main et un en bas de page pour le pied de page.

Le pied de page: pied.php

Le lien, pour le fichier javascript, et un script qui font fonctionner la galerie d’images.

Le code javascript:

Au clic sur le menu, le titre de la galerie s’affiche (ici paysages) et au clic sur les fichiers, apparaît l’image choisie.

Pour aller plus loin il nous faut voir les fonction dans php…..(ce référer à l’article Fonction php ).

Intégrer les fonctions:

Nous créons les fonctions que nous plaçons dans le dossier inclusions sous l’intitulé « lib-images.inc ».

Nous créons aussi un fichier « reducteur-image.php », et un autre « recadreur-image.php » pour exécuter les actions.

Et c’est dans galerie.php que nous plaçons le lien  (en quelque sorte l’url) , ici, du réducteur et du recadreur, pour afficher l’image exécutée.

Les fonctions:

<?php
function transformeLargeurImage( $image, $largeur ) {
return imagescale( $image, $largeur, -1, IMG_BICUBIC );
}

function transformeEchelleImage( $image, $coef) {
// Votre code ici utilsant la fonction imagesx()
$largeur = imagesx( $image )*$coef;
return imagescale( $image, $largeur, -1, IMG_BICUBIC );
}

function transformeHauteurImage( $image, $hauteurFinale) {
return imagescale(
$image,
imagesx($image) * $hauteurFinale / imagesy($image),
$hauteurFinale,
IMG_BICUBIC ) ;
}
function recadreImageAuCentre( $image, $largeur, $hauteur) {
$x = ( imagesx($image) – $largeur ) / 2 ;
$y = ( imagesy($image) – $hauteur ) / 2 ;
return imagecrop($image, [‘x’=>$x,’y’=>$y,’width’=>$largeur,’height’=>$hauteur]);
}

// Réduit ou agrandit à la taille maximum permettant à la totalité de l’image de se placer dans le rectangle de $largeurMaximum par $hauteurMaximum

function reduitFormatMaximum( $image, $largeurMaximum, $hauteurMaximum) {
$coef = min( $largeurMaximum/imagesx($image),$hauteurMaximum/imagesy($image) );
return transformeEchelleImage( $image, $coef) ;
}

// Réduit ou agrandit à la taille minimum permettant de remplir tout le rectangle

de $largeurMinimum par $hauteurMinimum
function reduitFormatMinimum( $image, $largeurMinimum, $hauteurMinimum) {
$coef = max( $largeurMinimum/imagesx($image),$hauteurMinimum/imagesy($image) );
return transformeEchelleImage( $image, $coef) ;

}
// recadre au centre selon le rectangle de $largeur par $hauteur en minimisant les zones rognées

function recadreAuMaximum($image,$largeur,$hauteur) {
$image = reduitFormatMinimum($image, $largeur, $hauteur);
$image = recadreImageAuCentre($image, $largeur, $hauteur);
return $image;
}

Intégration dans galerie.php:

Les lignes 21 et 22 intègrent les vignettes à la place d’ // .entree. qui lui était utile, quand on n’avait commencé que par le « reducteur-image »

Par la suite nous numérotons les images.

Nous plaçons un compteur, que nous acrémentons dans la boucle et aussi une balise <span>.

Puis un peu de css:

Ensuite nous retaillons l’image avec un seul fichier: retailleur-image.php qui remplacera les deux autres(recadreur et reducteur).

Nous plaçons le chemin retailleur-image (ligne 25 et 29)  et plaçons « r=1 » entre le « ? » et le « & » de la ligne 29.

Nous codons le retailleur .Par la même occasion nous voulons faire de sorte que les images soit en cache, pour sortir plus vite et que celui-ci se vide, quand il dépasse une certaine taille. Il nous faut donc aussi créer un autre fichier lib-cache.inc.

Les fonction qui nous permettent de lire et de vider le dossier cache.

Nous rajoutons la possibilité de retailler et recadrer l’image. Ceci dans galerie.php avec l’action de valider. Nous nous servons des valeurs du retailleur, l, h, et r.

Un peu de cosmétique.

Le css:

Ici le lien de la galerie améliorée à utiliser pour nos site avec images de substitutions, avec possibilité de retailler celles-ci.

http://galerie-v5.gwd-france.com/galerie.php

Ex:

Ces deux exemples font la même chose.

Tant que ‘$compteur’ est <à 5  il augmente de 1.

Il écrira donc ‘Bonjour !’ jusqu’a 5 fois.

Récupérer les fichiers dans un dossier:

On utilise des fonctions déjà programmées:

http://php.net/manual/fr/funcref.php

Nous pouvons comptabiliser le nombre de fichier:

Le même type, plus complet, qui affiche les dossiers et fichiers.

Décrivons chacun de ces éléments.

• Le premier sert à l’initialisation. C’est la valeur que l’on donne au départ à la variable (ici, elle vaut 0).

• Le second, c’est la condition. Comme pour lewhile, tant que la condition est remplie, la boucle est réexécutée. Dès que la condition ne l’est plus, on en sort.

• Enfin, le troisième c’est l’incrémentation, qui vous permet (c’est l’exécution) d’ajouter 1 à la variable à chaque tour de boucle.

Ici, une phrase s’écrit autant de fois que le chiffre rentrée.

Compte à rebours:

Dans un tableau:

Par sécurité il aurait été prudent d’écrire ($i*$b) dans echo.

Tableau de multiplication:

Un bout de code pour la même chose mais plus facilement récupérable:

Formulaire simple:

<form action= »accueil.php » method= »post »>
<label>Quel est votre prénom ? </label>
<input type= »text » name= »prenom » id= »truc »><br>
<label>Quel est votre nom ? </label>
<input type= »text » name= »nom »><br>
<input type= »submit »>
</form>

Champ de formulaire google:

<form action= »http://google.fr/search » method= »get »>
<input type= »texte » name= »q »>
<input type= »submit » value= »google »>
</form>

Calculatrice:

Les « if »:

Retour à la calculatrice:

Chaque fois que l’on clique pour une opération, celle-ci est indiquée et réalisée.

Petite précision:

echo ‘$a = ‘. $a .'<br>’;//chaine à apostrophe : les variables ne sont pas évaluées et le caractère $ est traité comme un caractère ordinaire.
echo « \$b = $b <br> » ;// chaine à guillemets : les variables sont évaluées dans la chaine.
if ( $operation==’+’ ) {
echo ‘$a + $b = ‘.($a+$b);// le . est l’opérateur de concaténation. Les parenthèse forcent l’évaluation de l’opération avant la concaténation.

type= »number » step= »0.01″
type= »number » step= »0.01″  pour préciser le nombre de chiffres après la virgule, entre name et  value.

Plus dur!

Un formulaire, si l’on ne répond pas oui, il ne se passe rien(en faite il est répété).

Et quand on répond oui, un message s’affiche: Je le savais!

Autre formulaire:

Qui nous dit si a est plus petit ou plus grand que b ou encore égale.

Un autre:

Rentrez  un chiffre pour savoir si il est compris entre 0 et 100.