13/01/2025

Développement Web

Développement Web

Liens dans une image en HTML

Florian BURNEL 0 commentaire

I. Présentation Le HTML permet à l’utilisateur d’interagir avec une image en offrant la possibilité de définir des zones cliquables dans l’image, on appelle cela une carte d’image. Lorsqu’on cliquera sur une zone précise de l’image, une page s’ouvrira, puis sur une autre zone, une autre page s’ouvrira, toutes les zones étant définies dans le code HTML de la page. Dans cet exemple, j’utiliserai l’image suivante et le but sera que lorsque je clique sur le routeur (à gauche) je sois redirigé vers la page du lexique de Neoflow proposant la définition d’un routeur, et lorsque je clic sur le switch (à droite) je sois redirigé vers la définition d’un switch disponible sur Neoflow. Étant donné que le routeur et le switch sont dans la même image, on est obligé de définir des zones cliquables à l’intérieur. II. Insérez une image dans la page Avant toute chose, il faut bien entendu insérer l’image dans la page HTML, de la manière

Lire cet article
Développement Web

Arrondir une valeur en décimale avec Math.round

Florian BURNEL 0 commentaire

I. Présentation En JavaScript, il faut utiliser la fonction Math.round pour arrondir une valeur à l’entier près. Cependant, il est possible de l’utiliser pour effectuer un arrondi au dixième, au centième, etc… Sinon vous obtiendrez un nombre avec beaucoup de chiffres après la virgule ce qui n’est pas forcément agréable. Nous allons donc voir dans ce tutoriel comment utiliser cette fonction. II. Procédure Pour se faire, je vais vous donner le code d’une page HTML qui est composée de deux zones de saisies de type « text » dans lesquels on affichera le résultat de l’opération « 100/3 ». Dans la première zone de saisie on affichera le résultat de l’opération sans arrondir, dans la seconde on affichera le résultat en arrondissant à 2 chiffres après la virgule. <HTML> <HEAD> <Script language=’javascript’> function CalculerSansArrondir() { Form1.input1.value = 100 / 3; } function CalculerAvecArrondir() { Form1.input2.value = Math.round((100 / 3) * 100) / 100; } </Script> </HEAD> <BODY onLoad=’CalculerSansArrondir();CalculerAvecArrondir();’> <FORM Name=’Form1′> <table> <tr> <td>Input 1</td><td><input

Lire cet article
Développement Web

Calculer la TVA et le prix TTC d’un produit

Florian BURNEL 0 commentaire

I. Présentation Nous allons voir à travers ce tutoriel comment créer une petite application qui permet de calculer le montant de la TVA et de vous donner le prix TTC d’un produit, à partir du prix hors taxes saisi par l’utilisateur. Dans cet exemple j’ai pris la valeur 19.6% pour la TVA mais vous pouvez la modifier selon la TVA qu’il vous intéresse. Cet exemple montrera uniquement le code HTML et le code JavaScript, aucune propriété CSS sera utilisée. Libre à vous de les ajouter si vous le souhaiter. II. Procédure A. Le code HTML de base <HTML> <HEAD> </HEAD> <BODY> <div> <h2>CONVERTISSEUR MONNAIES</h2> <br> <FORM Name=’Form1′> Montant hors taxes <input type=’text’ Name=’ht’ Value=’0′> <br> Montant TVA (19.6%) <input type =’text’ Name=’tva’> <br> Montant TTC <input type =’text’ Name=’ttc’> </FORM> </div> </BODY> </HTML> B. Le code JavaScript Pour que la conversion soit dynamique, c’est à dire que dès que l’utilisateur saisie un nombre, le calcul se fasse en temps réel,

Lire cet article
Développement Web

Ouvrir une URL en JavaScript avec l’objet window

Florian BURNEL 1 commentaire

I. Présentation Vous connaissez surement les liens HTML grâce à la balise <A>  et son attribut « HREF » où l’on indique l’URL du lien à suivre en cas de clique sur l’élément <A>. Cependant, grâce au JavaScript il est possible d’effectuer une redirection de la page en cours vers une autre page ou de l’ouverture d’une page dans une nouvelle fenêtre, selon un événement précis (clique sur une image, passage de la souris sur une image,…). Pour cela il faut utiliser l’attribut « href » du sous-objet « location », qui est un objet de « window », qui permet de rediriger l’utilisateur vers la page indiquée en valeur de l’attribut, ou bien alors utiliser le sous-objet « open » de l’objet « window » qui permet d’ouvrir l’URL passée en paramètre dans une nouvelle fenêtre de navigateur. II. Ouvrir une URL Comme je l’ai dis ci-dessus, window.location.href permet une redirection de la page en cours vers l’URL précisée

Lire cet article
Développement Web

Les fenêtres de confirmation en JavaScript

Florian BURNEL 0 commentaire

I. Présentation En JavaScript, il est possible de faire apparaître une fenêtre de confirmation à l’utilisateur pour qu’il confirme ou annule l’action qu’il vient de réaliser. Par exemple, si l’utilisateur souhaite supprimer un élément, on peut lui demander si il est sûr de vouloir supprimer cet élément. Si il clic sur « OK » l’élément sera supprimé, si il clic sur « Annuler » l’action sera annulée. Dans un autre cas, nous pouvons demander une confirmation à l’utilisateur lorsqu’on lui demande de remplir un formulaire. Cela lui permet de confirmer, d’approuver, les informations saisies. Si il clic sur « OK » le formulaire est envoyé sinon il ne l’est pas. II. Syntaxe de la fonction confirm() Voici la syntaxe de cette fonction : confirm(‘Êtes vous sur de vouloir supprimer cet élément ?’); III. Exemple d’utilisation Prenons le cas où l’on demande à l’utilisateur son âge et ensuite on lui demande de confirmer l’information saisie dans un formulaire avant de l’envoyer si l’utilisateur confirme, ou de retourner

Lire cet article
Développement Web

Les alertes en JavaScript

Florian BURNEL 0 commentaire

I. Présentation Il est possible, grâce à du code JavaScript – très simple – d’afficher une boîte de dialogue d’alerte qui affiche un message d’avertissement à l’utilisateur. Pour que l’alerte s’affiche il faudra indiquer sur quel événement elle se déclenche, par exemple on peut afficher une alerte lorsque l’utilisateur passe sa souris sur une image ou clic sur l’image, etc… II. Syntaxe d’une alerte alert(‘votre message’); A. Démonstration n°1 Dans ce premier exemple, nous allons afficher un message d’alerte indiquant « Bienvenue » lorsque l’utilisateur charge la page du site web. Si l’on suit la syntaxe vu ci-dessus, dans notre cas cela donnera : alert(‘Bienvenue’); Étant donné que l’on veut que ce message d’alerte s’affiche au chargement de la page on va utiliser l’événement JavaScript appelé « onLoad » et l’appliquer sur la balise « Body ». Cela signifie que lorsque la page va charger l’élément « Body » de la page l’alerte va se déclencher. Le code complet sera donc : <html> <body onLoad= »alert(‘Bienvenue’); »> </body> </html> B.

Lire cet article
Développement Web

Exécuter des commandes shell par un script PHP

Mickael Dorigny 3 commentaires

I. Présentation Avec la fonction PHP « shell_exec », il est possible d’exécuter des commandes sur un serveur linux à travers un script PHP. Cela donne par exemple la possibilité de gérer son serveur par une interface web. II. Utilisation A. Exemple d’utilisation vim PhpScript.php <?php shell_exec (‘mkdir dossier02’); ?> B.Exécution du script en mode console Pour exécuter notre script et voir si il fonctionne, on doit l’exécuter avec la commande « php <nom du fichier> » : php PhpScript.php Il est aussi intéressant sur une page web de récupérer et d’afficher le résultat d’une commande exécutée par le script PHP : <?php $Commande = shell_exec (‘ls -al’); echo « $Commande »; ?>

Lire cet article
Développement Web

Utiliser la variable prédéfinie $_SERVER

Florian BURNEL 1 commentaire

I. Présentation Il existe une variable prédéfinie de PHP dont le nom est $_SERVER qui permet d’obtenir diverses informations sur le visiteur qui se connecte au serveur et le serveur web en lui-même. $_SERVER est un tableau de données. Nous allons voir avec ce tutoriel quelques une des valeurs que l’on peut donner à cette variable, qui peut permettre d’afficher l’adresse IP du visiteur et le navigateur avec lequel il accède à la page web. II. Procédure A. Création de la page Pour cela créez une nouvelle page PHP et insérez le code suivant (exemple avec deux valeurs) : <?php Echo « IP du visiteur : « .$_SERVER[‘REMOTE_ADDR’] ; Echo « <br> »; Echo « Navigateur du visiteur : « .$_SERVER[‘HTTP_USER_AGENT’] ; ?> REMOTE_ADDR permet d’obtenir l’adresse IP tandis que HTTP_USER_AGENT permet d’obtenir le navigateur avec lequel le visiteur a accédé à la page web. Enfaite, il suffit d’écrire le code : $_SERVER[‘Valeur’], selon ce que vous souhaitez obtenir comme informations. B. Exemple Voici un autre

Lire cet article
Développement Web

PHP – Générateur de mot de passe paramétrable

Florian BURNEL 13 commentaires

I. Présentation Trouver des mots de passe complexes pour ses utilisateurs n’est pas toujours simple mais c’est sans compter sur l’utilisation d’un script PHP qui peut nous en générer des complexes, rapidement et en grande quantité. Nous allons donc voir comment créer ce script, que vous pourrez paramétrer selon ce que vous souhaitez obtenir en remplissant seulement un formulaire. II. Que permet-il de paramétrer ? Le nombre de caractères que le mot de passe doit contenir. Le nombre de mot de passe à générer. Le type de caractères que doit contenir le mot de passe. III. Quel est le rôle de chaque page ? Il y a une page qui contient uniquement le formulaire où l’utilisateur doit indiquer ce qu’il souhaite obtenir, cette page envoie ensuite les paramètres à une autre page qui génére les mots de passe. Le nom de cette première page est ParamPasswd.php. La seconde page génére et affiche l’intégralité des mots de passe selon les paramètres

Lire cet article
Développement Web

Créer un convertisseur entre deux unités

Florian BURNEL 4 commentaires

I. Présentation Ce tutoriel a pour but de vous expliquer comment créer un convertisseur entre deux unités. Dans notre exemple on fera un convertisseur qui convertis les Euros en Francs et les Francs en Euros, mais vous pouvez reprendre le même principe pour écrire le code d’un convertisseur entre deux autres unités. II. Procédure Cet exemple montrera uniquement le code HTML et le code JavaScript, aucune propriété CSS sera utilisée. Libre à vous de les ajouter si vous le souhaiter. A. Le code HTML de base <HTML> <HEAD> </HEAD> <BODY> <div> <h2>CONVERTISSEUR MONNAIES</h2> <br> <FORM Name=’Form1′> Euros <input type=’text’ Name=’Euros’> <br> Francs<input type =’text’ Name=’Francs’> </FORM> </div> </BODY> </HTML> B. Le code JavaScript Maintenant qu’on a notre page avec nos deux champs de saisie et le titre, ajoutons du code JavaScript : Pour que la conversion soit dynamique, c’est à dire que dès que l’utilisateur saisie un nombre, celui-ci soit converti au fur et à mesure, nous allons exécuter la

Lire cet article
Développement Web

Vérifier si une valeur est un nombre

Florian BURNEL 0 commentaire

I. Présentation Ce tutoriel a pour but de vous faire découvrir la fonction booléenne isNaN qui retourne True (vrai) lorsque la valeur n’est pas un nombre et qui retourne False (faux) lorsque la valeur en est un. Le nombre peut être entier ou décimal. II. Procédure Pour vérifier le fonctionnement de cette fonction, réalisons un exemple. Dans cet exemple, il nous faut une page HTML qui devra contenir un champ de saisie où l’utilisateur devra saisir son poids, qui bien sûr devra être un nombre. La page contiendra également un bouton permettant d’envoyer les informations. <HTML> <HEAD> </HEAD> <BODY> <FORM Name=’Formulaire1′> Votre poids <input type=’text’ Name=’Poids’ Value= »> kg <input type=’button’ Name=’Envoyer’ Value=’Envoyer’> </FORM> </BODY> </HTML> Nous avons maintenant une page HTML avec un champ de saisie et un bouton. Ajoutons maintenant du JavaScript pour contrôler l’information avant d’envoyer le formulaire. Dans un premier temps, ajoutons une fonction JavaScript permettant de vérifier que le champ de saisie n’est pas vide. S’il

Lire cet article
css
Développement Web

Création d’un menu horizontale simple

Florian BURNEL 0 commentaire

I. Présentation Ce tutoriel a pour but de vous aider dans la création d’un menu horizontale de manière simple, avec seulement du HTML et quelques propriétés CSS à affecter à des éléments de votre page. II. Code de base Dans un premier temps, constituez votre menu de la manière suivante : Remplacez les « # » par le lien menant à votre page. Vous obtiendrez ceci : Accueil Fiches Lexique Forums Ensuite, dans le HEAD de votre page, ouvrez une balise style pour y insérer propriétés CSS, ou mettez les propriétés directement dans votre feuilles de style si elle est déclarée dans votre page. III. Personnaliser les puces On définit des propriétés pour les puces contenues dans la div menu. Tout d’abord une couleur de fond de nos puces (background), qu’elles utilisent aucun style de liste c’est à dire, par défaut, les « ronds » (list-style). Ensuite, une couleur de police (color), puis, très important, on indique qu’on affiche les puces en ligne (display).

Lire cet article
Développement Web

Les formulaires en HTML

Florian BURNEL 0 commentaire

I. Présentation Les formulaires sont des éléments permettant à l’internaute d’interagir avec votre site web. Ils permettent à l’utilisateur de saisir des informations dans différents champs et une fois qu’il a finit il envoie les informations grâce au bouton d’envoie, qui en général est un input de type submit. En effet, un formulaire est constitué de balises input qui peuvent prendre différentes formes comme un champs de saisie simple sur une ligne mais aussi de balise select pour créer une liste déroulante ou la balise textarea pour créer une zone de texte paramétrable. Vous trouverez des explications sur les différents types d’input dans un autre tutoriel dédié à cela. II. Les balises du formulaire Le début du formulaire est représenté par la balise <form> et la fin </form>, il est important de les inclure dans une page car si vous avez plusieurs formulaires dans la même page il faut pouvoir les différencier. Dans cette balise on précise une ACTION, c’est-à-dire

Lire cet article
Type d'INPUT HTML
Développement Web

Les différents types d’input

Florian BURNEL 2 commentaires

I. Présentation Ce tutoriel a pour but de vous faire découvrir les différents types d’INPUT disponible en HTML. Pour rappel, les INPUT sont des éléments interactifs utilisés dans les formulaires qui permettre à l’utilisateur d’interagir avec le site web. Syntaxe : <input type=’nom_type’ name=’son_nom’> Syntaxe avec une valeur par défaut : <input type=’nom_type’ name=’son_nom’ value=’ok’> II. Input type « text » Ce type d’input crée un champ de saisie de texte d’une ligne dont on peut paramétrer la taille et la longueur maximale. III. Input type « password » Ce type est utilisé pour la saisie des mots de passe, tous les caractères saisis sont remplacés par un « rond ». IV. Input type « radio » Avec ce type d’input vous pouvez créer un bouton à cocher ou non par l’utilisateur, vous pouvez en mettre plusieurs, ce qui permettra à l’utilisateur de faire son choix parmi plusieurs options. Cependant, l’attribue name doit être égal pour tous les boutons radio

Lire cet article
Développement Web

PHP- Authentification avec MySQL – Session

Florian BURNEL 1 commentaire

I. Présentation Dans ce tutoriel, nous allons apprendre à protéger notre base de données grâce à une authentification avec les outils MySql et la fonction Session en PHP (cette fiche). Le principe de la session PHP permet de sauvegarder des données inter-pages. Grâce à ceci, nous comparerons les données recueillies avec la liste des User enregistrés dans MySql et leur mot de passe pour vérifier que la session existe et est valable et L’utilisateur est correctement authentifié et le couple Login/Mot de passe existe. Nous commençons par un formulaire d’identification simple en HTML qui enverra les données à une page qui commencera la session et enregistrera les données reçu dans cette session. II. La page index.html Nous entrons le code suivant dans l’index.html : <FieldSet> <FORM action= »VerifId.php » method=POST> <Legend> Identification</Legend> <INPUT Type=Test Name= »Login » placeholder= »Login » required> <INPUT Type=Test Name= »Password » placeholder= »Passord » required> <INPUT Type=SUBMIT Value= »Log ! »> </FORM> </FieldSet> II. La page VerifId.php Le fichier VerifId.php aura pour but de débuter la session

Lire cet article