23/11/2024

Autres

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
Sauvegarde

Sauvegarder et restaurer son PC avec Redo Backup And Recovery

Florian BURNEL 15 commentaires

I. Présentation Vous connaissez surement Acronis, Ghost, ou des solutions OpenSource comme SystemRescue CD mais cette fiche a pour but de vous faire découvrir REDO Backup and Recovery qui est un Live CD gratuit qui vous permettra de réaliser une image disque de votre PC (Sauvegarde) et part la suite de la restaurer si il y a besoin (restaurer). Ce logiciel ne permet pas de faire un clonage d’un disque dur vers un autre comme le permettent Acronis et Ghost, il se contente de proposer les fonctions principales. Il est très simple d’utilisation mais efficace, le seul petit bémol est l’interface en anglais et le clavier qui est en QWERTY par défaut (nous verrons comment le passer en AZERTY). II. Gravure de l’image ISO du logiciel Accédez au site de REDO Backup and Recovery puis téléchargez l’image ISO du logiciel dans la section Download. Ensuite gravez-là. III. Démarrez sur le CD Insérez le CD dans votre lecteur puis démarrez sur

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
RAM
Autres

Changer la barrette mémoire (RAM) d’un PC portable

Florian BURNEL 0 commentaire

I. Présentation Ce tutoriel va vous expliquer et vous montrer grâce à des photos comment changer la barrette mémoire de votre PC Portable. Dans notre cas, nous changerons la barrette mémoire d’un Netbook. Le principe est le même pour tout type de PC portable, que ce soit pour remplacer une barrette mémoire ou en ajouter une. II. Premièrement, retourner votre PC pour voir le dessous : Il va falloir ouvrir une des trappes se trouvant en dessous, celle qui nous intéresse est celle étant marqué par le petit dessin comme entouré sur la photo ci-dessous. III. Ouverture de la trappe : Une fois que vous avez repéré la trappe en question, dévissez la visse et ouvrez. Étant donné que nous faisons cela sur un Netbook, il y a un seul emplacement (aussi appelé slot) pour barrette mémoire, si vous avez un PC Portable classique vous en aurez plusieurs. IV. Retirer la barrette mémoire : Pour retirer la barrette mémoire il

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