En pratique : créer une calculatrice !

Statut
N'est pas ouverte pour d'autres réponses.

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 842
Réactions
3 146
Points
17 331
Bonjour à tous,

Aujourd'hui je vous propose un nouveau tutoriel qui vous expliquera comment créer une calculatrice en PHP. Ce tutoriel est classé simple, et pour faire une calculatrice il vous faudra comprendre et utiliser les variables et les conditions , principalement. Nous sommes partis. Nous allons voir une notion : les variables d'URL ( ou $_GET ).


Comment nous allons le faire ?
Nous allons réaliser une calculatrice simple, et sur deux pages. Une page sera le formulaire et l'autre sera le formulaire PHP (autrement dit là où on va gérer nos données, et générer un résultat). Au fait, nous allons rentrer un premier nombre, un deuxième puis mettre un signe. Ensuite, nous allons cliquer sur calculer , ça va nous diriger vers une page qui va nous calculer le résultat puis nous rediriger vers la page du formulaire pour nous indiquer le résultat.

Pour cela, vous allez créer deux pages : index.php (le formulaire où on rentre nos nombres) et form.php (PHP).

Création du formulaire
Pour faire notre formulaire, nous allons créer 3 champs, le nombre 1, le signe et le nombre 2, respectivement, nbr1, signe, nbr2.

Que mettre dans le signe ? On aura le choix entre:
  • +
  • -
  • / : c'est une division
  • * : c'est une mutliplication
Il faudra donc vérifier ce qu'ils mettent.
Nous allons les rediriger vers form.php .
Nous allons stocker ça dans des variables superglobales de données $_POST, donc la "method" sera post.
Ce qui donne dans index.php:

HTML:
<form method="post" action="form.php">
Sélectionnez un nombre: <input type="text" name="nbr1" /><br />
Sélectionnez le signe (+, -, /, *) : <input type="text" name="signe" /><br />
Sélectionnez le deuxième nombre: <input type="text" name="nbr2" /><br />
<br />
<input type="submit" valu="Faire le calcul" />
</form>

Comme vous pouvez le remarquer, l'attribut name est très important : c'est cet attribut que l'on va récupérer en PHP.



La page form.php : le PHP
Quant à la page form.php, ça va être un peu plus long, mais pas plus compliqué. D'abord, dans l'ordre logique des choses, nous allons vérifier si l'utilisateur a bien écrit quelque chose dans chaque champs.

Nous allons utiliser NULL, et pas empty, ça va être trop compliqué à vous expliquer ^^.
Mais maintenant, imaginons que l'utilisateur entre directement dans la page, dès que la variable de données n'existe pas ça va nous afficher une erreur. Alors, nous allons utiliser isset() qui va faire que même si la variable n'existe pas , alors on continue l'action (dans ce cas là, parce que sinon ça veut dire si ça existe).
Ce qui donnera:


PHP:
<?php


if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

?>
La fonction exit() est similaire à echo() (elle affiche un texte), mais cette fois ci , la fonction exit() arrête le code là. Autrement dit, c'est comme si, après la ligne exit();, le code n'existe pas.

Une fois qu'on a vérifier nos champs, nous allons vérifier si $_POST['signe'] (soit le signe rentré) est égal à + OU égal à - OU à / ou à *.

:modo: Pour faire un OU dans une condition, on utilise || ! :modo:

On va se la jouer à la dora, je vais vous laisser quelques minutes.:trollface:

Cette fois ci, nous n'avons plus besoin de mettre de isset() car nous avions vérifié qu'elles existaient.
Si on suit bien, il faut faire que si $_POST['signe'] est différent de +, -, * ou / alors on affiche un message et on exit();.
Au fait, ça va être : si $_POST['signe'] est différent de "+" , est différent de "-", de '*' et '/' alors...
Assez attendu, cela donne:

PHP:
<?php

if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

if($_POST['signe'] != "+" || $_POST['signe'] != "-" || $_POST['signe'] != "*" || $_POST['signe'] != "/" )
{
    exit("Le signe est incorrect");
}

?>

Maintenant que nous avons vérifier le signe, plus qu'à effectuer le calcul. Nous allons créer la variable $resultat, qui va regrouper le résultat de $_POST['nbr1'] + $_POST['nbr2'].

BIEN SUR AVANT, ON AURAIT PU VERIFIER LES ENTREES DE NBR1 ET NBR2 MAIS C'EST CE QU'ON APPELLE LES REGEX ET JE NE VAIS PAS VOUS EMBROUILLER ^^

Donc, ça donne:

PHP:
$resultat = $_POST['nbr1'] + $_POST['nbr2'];

Maintenant, il faudra faire la redirection. Si on veut faire une redirection, vous devrez utiliser la fonction header(). Elle se présente sous:

PHP:
header("Location: URL");

Donc à la place de l'URL, on va mettre index.php.
Mais maintenant, vous allez me demander : comment vas-ton récupérer notre résultat ?
Et bien nous allons le récupérer à l'aide d'une variable d'URL., autrement dit; l'url sera:

index.php?resultat=XX
Alors comment allons-nous mettre le résultat ? Et bien on l'ajoutant directement, comme ceci (à savoir qu'il faut mettre un point entre une chaine de caractères et une variable ou autre !):

PHP:
header("Location: index.php?resultat=".$resultat);

Au total, la page sera comme ça:

PHP:
[COLOR=rgb(0, 0, 0)]<?php

if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

if($_POST['signe'] != "+" || $_POST['signe'] != "-" || $_POST['signe'] != "*" || $_POST['signe'] != "/" )
{
    exit("Le signe est incorrect");
}

// On déclare une variable

$resultat = $_POST['nbr1'] + $_POST['nbr2'];

header("Location: index.php?resultat=".$resultat);
?>

Modification de index.php : recueillir le résultat
Comme je l'ai dit plus haut, nous allons faire pour que, le chiffre qui est après ?resultat= soit indiqué. Pour cela, rien de plus simple, on va indiquer une variable d'URL $-GET['resultat'].

Rajoutez en haut du code ceci:

PHP:
<strong>Résultat:</strong> <?php echo $_GET['resultat']; ?>

Mais si le $_GET["resultat"] est vide, alors ça va afficher une erreur. Alors nous allons faire une petite condition, avec !isset, qui veut dire si XX n'existe pas:

PHP:
if!(isset($_GET['resultat']))
{
$_GET['resultat'] = 0;
}

Dans ces cas là, il va être égal à 0.



Sécurisation
Maintenant, imaginons que notre internaute fasse un bout de code qui permet de d'exploiter une faille XSS (du javascript) par exemple dans l'un de ces champs, alors, bon dans ce cas c'est pas bien grave mais dans d'autres très.

:modo: ALORS, quand vous voulez AFFICHER DES DONNEES QUE DES UTILISATEURS ont notées, SECURISEZ LE, avec une fonction nommée htmlspecialchars(); ! :modo:
Ce qui donne, au lieu de dire
PHP:
<strong>Résultat:</strong> <?php echo $_GET['resultat']; ?>

Vous dites

PHP:
[/COLOR][/COLOR][/COLOR][/COLOR]
[COLOR=rgb(0, 0, 0)][COLOR=#000000][COLOR=rgb(0, 0, 0)][COLOR=#000000]<strong>Résultat:</strong> <?php echo htmlspecialchars($_GET['resultat']); ?>

Vous voyez qu'avec htmlspecialchars, si vous metiez <script>alert("JE T'AI HACKE");</script>, ça l'affichera , et ça ne donnera pas le fenêtre JS ! :)


5b15e32a254a4e6024121e6c2ec250fb.png




Fichiers en entier
index.php:
PHP:
<?php
if(!isset($_GET['resultat']))
{
$_GET['resultat'] = 0;
}
?>
<strong>Résultat:</strong> <?php echo htmlspecialchars($_GET['resultat']); ?>
<br /><br />
<form method="post" action="form.php">
Sélectionnez un nombre: <input type="text" name="nbr1" /><br />
Sélectionnez le signe (+, -, /, *) : <input type="text" name="signe" /><br />
Sélectionnez le deuxième nombre: <input type="text" name="nbr2" /><br />
<br />
<input type="submit" valu="Faire le calcul" />
</form>

et form.php:

PHP:
<?php

if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

if($_POST['signe'] != "+" && $_POST['signe'] != "-" && $_POST['signe'] != "*" && $_POST['signe'] != "/" )
{
    exit("Le signe est incorrect");
}

// On déclare une variable

$resultat = $_POST['nbr1'] + $_POST['nbr2'];

header("Location: index.php?resultat=".$resultat);
?>


C'est la fin de ce tutoriel !
Si vous avez des questions n'hésitez pas , je suis là pour ça !

Si ça vous plait, je pourrai en faire d'autre, mais ça me prend du temps ! :D

Maxence103
 
Dernière édition:

Lyrix

Student ✦ UX/UI Design
Ancien staff
Inscription
20 Août 2012
Messages
22 670
Réactions
8 150
Points
36 866
<$echo @Louki + Modérateur

$Louki Modérateur + $echo Le roi du PHP

$Louki Modérateur le roi du PHP >;)

Je débute ;)
 

Jowa

Membre
Inscription
23 Mai 2013
Messages
1 150
Réactions
193
Points
2 866
Bonjour à tous,

Aujourd'hui je vous propose un nouveau tutoriel qui vous expliquera comment créer une calculatrice en PHP. Ce tutoriel est classé simple, et pour faire une calculatrice il vous faudra comprendre et utiliser les variables et les conditions , principalement. Nous sommes partis. Nous allons voir une notion : les variables d'URL ( ou $_GET ).


Comment nous allons le faire ?
Nous allons réaliser une calculatrice simple, et sur deux pages. Une page sera le formulaire et l'autre sera le formulaire PHP (autrement dit là où on va gérer nos données, et générer un résultat). Au fait, nous allons rentrer un premier nombre, un deuxième puis mettre un signe. Ensuite, nous allons cliquer sur calculer , ça va nous diriger vers une page qui va nous calculer le résultat puis nous rediriger vers la page du formulaire pour nous indiquer le résultat.

Pour cela, vous allez créer deux pages : index.php (le formulaire où on rentre nos nombres) et form.php (PHP).

Création du formulaire
Pour faire notre formulaire, nous allons créer 3 champs, le nombre 1, le signe et le nombre 2, respectivement, nbr1, signe, nbr2.

Que mettre dans le signe ? On aura le choix entre:
  • +
  • -
  • / : c'est une division
  • * : c'est une mutliplication
Il faudra donc vérifier ce qu'ils mettent.
Nous allons les rediriger vers form.php .
Nous allons stocker ça dans des variables superglobales de données $_POST, donc la "method" sera post.
Ce qui donne dans index.php:

HTML:
<form method="post" action="form.php">
Sélectionnez un nombre: <input type="text" name="nbr1" /><br />
Sélectionnez le signe (+, -, /, *) : <input type="text" name="signe" /><br />
Sélectionnez le deuxième nombre: <input type="text" name="nbr2" /><br />
<br />
<input type="submit" valu="Faire le calcul" />
</form>

Comme vous pouvez le remarquer, l'attribut name est très important : c'est cet attribut que l'on va récupérer en PHP.



La page form.php : le PHP
Quant à la page form.php, ça va être un peu plus long, mais pas plus compliqué. D'abord, dans l'ordre logique des choses, nous allons vérifier si l'utilisateur a bien écrit quelque chose dans chaque champs.

Nous allons utiliser NULL, et pas empty, ça va être trop compliqué à vous expliquer ^^.
Mais maintenant, imaginons que l'utilisateur entre directement dans la page, dès que la variable de données n'existe pas ça va nous afficher une erreur. Alors, nous allons utiliser isset() qui va faire que même si la variable n'existe pas , alors on continue l'action (dans ce cas là, parce que sinon ça veut dire si ça existe).
Ce qui donnera:


PHP:
<?php


if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

?>
La fonction exit() est similaire à echo() (elle affiche un texte), mais cette fois ci , la fonction exit() arrête le code là. Autrement dit, c'est comme si, après la ligne exit();, le code n'existe pas.

Une fois qu'on a vérifier nos champs, nous allons vérifier si $_POST['signe'] (soit le signe rentré) est égal à + OU égal à - OU à / ou à *.

:modo: Pour faire un OU dans une condition, on utilise || ! :modo:

On va se la jouer à la dora, je vais vous laisser quelques minutes.:trollface:

Cette fois ci, nous n'avons plus besoin de mettre de isset() car nous avions vérifié qu'elles existaient.
Si on suit bien, il faut faire que si $_POST['signe'] est différent de +, -, * ou / alors on affiche un message et on exit();.
Au fait, ça va être : si $_POST['signe'] est différent de "+" , est différent de "-", de '*' et '/' alors...
Assez attendu, cela donne:

PHP:
<?php

if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

if($_POST['signe'] != "+" || $_POST['signe'] != "-" || $_POST['signe'] != "*" || $_POST['signe'] != "/" )
{
    exit("Le signe est incorrect");
}

?>

Maintenant que nous avons vérifier le signe, plus qu'à effectuer le calcul. Nous allons créer la variable $resultat, qui va regrouper le résultat de $_POST['nbr1'] + $_POST['nbr2'].

BIEN SUR AVANT, ON AURAIT PU VERIFIER LES ENTREES DE NBR1 ET NBR2 MAIS C'EST CE QU'ON APPELLE LES REGEX ET JE NE VAIS PAS VOUS EMBROUILLER ^^

Donc, ça donne:

PHP:
$resultat = $_POST['nbr1'] + $_POST['nbr2'];

Maintenant, il faudra faire la redirection. Si on veut faire une redirection, vous devrez utiliser la fonction header(). Elle se présente sous:

PHP:
header("Location: URL");

Donc à la place de l'URL, on va mettre index.php.
Mais maintenant, vous allez me demander : comment vas-ton récupérer notre résultat ?
Et bien nous allons le récupérer à l'aide d'une variable d'URL., autrement dit; l'url sera:

index.php?resultat=XX
Alors comment allons-nous mettre le résultat ? Et bien on l'ajoutant directement, comme ceci (à savoir qu'il faut mettre un point entre une chaine de caractères et une variable ou autre !):

PHP:
header("Location: index.php?resultat=".$resultat);

Au total, la page sera comme ça:

PHP:
[COLOR=rgb(0, 0, 0)]<?php

if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

if($_POST['signe'] != "+" || $_POST['signe'] != "-" || $_POST['signe'] != "*" || $_POST['signe'] != "/" )
{
    exit("Le signe est incorrect");
}

// On déclare une variable

$resultat = $_POST['nbr1'] + $_POST['nbr2'];

header("Location: index.php?resultat=".$resultat);
?>

Modification de index.php : recueillir le résultat
Comme je l'ai dit plus haut, nous allons faire pour que, le chiffre qui est après ?resultat= soit indiqué. Pour cela, rien de plus simple, on va indiquer une variable d'URL $-GET['resultat'].

Rajoutez en haut du code ceci:

PHP:
<strong>Résultat:</strong> <?php echo $_GET['resultat']; ?>

Mais si le $_GET["resultat"] est vide, alors ça va afficher une erreur. Alors nous allons faire une petite condition, avec !isset, qui veut dire si XX n'existe pas:

PHP:
if!(isset($_GET['resultat']))
{
$_GET['resultat'] = 0;
}

Dans ces cas là, il va être égal à 0.



Sécurisation
Maintenant, imaginons que notre internaute fasse un bout de code qui permet de d'exploiter une faille XSS (du javascript) par exemple dans l'un de ces champs, alors, bon dans ce cas c'est pas bien grave mais dans d'autres très.

:modo: ALORS, quand vous voulez AFFICHER DES DONNEES QUE DES UTILISATEURS ont notées, SECURISEZ LE, avec une fonction nommée htmlspecialchars(); ! :modo:
Ce qui donne, au lieu de dire
PHP:
<strong>Résultat:</strong> <?php echo isset($_GET['resultat']); ?>

Vous dites

PHP:
[/COLOR][/COLOR]
[COLOR=rgb(0, 0, 0)][COLOR=#000000]<strong>Résultat:</strong> <?php echo htmlspecialchars(isset($_GET['resultat'])); ?>

Vous voyez qu'avec htmlspecialchars, si vous metiez <script>alert("JE T'AI HACKE");</script>, ça l'affichera , et ça ne donnera pas le fenêtre JS ! :)


5b15e32a254a4e6024121e6c2ec250fb.png




Fichiers en entier
index.php:
PHP:
<?php
if(!isset($_GET['resultat']))
{
$_GET['resultat'] = 0;
}
?>
<strong>Résultat:</strong> <?php echo htmlspecialchars($_GET['resultat']); ?>
<br /><br />
<form method="post" action="form.php">
Sélectionnez un nombre: <input type="text" name="nbr1" /><br />
Sélectionnez le signe (+, -, /, *) : <input type="text" name="signe" /><br />
Sélectionnez le deuxième nombre: <input type="text" name="nbr2" /><br />
<br />
<input type="submit" valu="Faire le calcul" />
</form>

et form.php:

PHP:
<?php

if(isset($_POST['nbr1']) == NULL)
{
    exit("Nombre 1 non rentré");
}
if(isset($_POST['signe']) == NULL)
{
    exit("Signe non complété");
}
if(isset($_POST['nbr2']) == NULL)
{
    exit("Nombre 2 non rentré");
}

if($_POST['signe'] != "+" && $_POST['signe'] != "-" && $_POST['signe'] != "*" && $_POST['signe'] != "/" )
{
    exit("Le signe est incorrect");
}

// On déclare une variable

$resultat = $_POST['nbr1'] + $_POST['nbr2'];

header("Location: index.php?resultat=".$resultat);
?>


C'est la fin de ce tutoriel !
Si vous avez des questions n'hésitez pas , je suis là pour ça !

Si ça vous plait, je pourrai en faire d'autre, mais ça me prend du temps ! :D

Maxence103
On peut effectuer la même fonction 'Calculer' BEAUCOUP plus simplement
 

Lyrix

Student ✦ UX/UI Design
Ancien staff
Inscription
20 Août 2012
Messages
22 670
Réactions
8 150
Points
36 866
Non, sinon très bonne présentation et tutoriel pour crée une calculatrice dans le domaine ou je suis le plus fort :trollface:

Et merci de ton partage ;)
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 842
Réactions
3 146
Points
17 331
On peut effectuer la même fonction 'Calculer' BEAUCOUP plus simplement

Oui c'est sur avec case, break, switch etc... mais ce tutoriel s'adresse aux débutants et je vais pas les faire chie* avec ça!
 

Switch.

Codeur Web à ton service | > Python
Premium
Inscription
13 Janvier 2013
Messages
2 956
Réactions
968
Points
6 491
<$echo @Louki + Modérateur

$Louki Modérateur + $echo Le roi du PHP

$Louki Modérateur le roi du PHP >;)

Je débute ;)
$Louki = "roi du php";
$Louki = false;

if ($louki)
{
echo 'Bizarre :trollface:';
}
else
{
echo ' Louki est mauvais en php';
}

:trollface:
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 842
Réactions
3 146
Points
17 331
Cette erreur :p
Une xss force le site à afficher du HTML d'où la balise <script>.
Bon tuto sinon :)

Non , tu as mal compris ce que j'ai dit !
J'ai dit exploiter une faille XSS , et donc avec le code que j'ai mit ça aurait afficher du javascript ^^

Mais c'est pas grave, merci ! :)
 

ZDERKOZ

Premium
Inscription
19 Décembre 2012
Messages
2 235
Réactions
604
Points
12 176
merci du tuto et j'aimerai savoir si tu pourrait m'apprendre via skype car j'aimerai faire des programeS ? :)
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 842
Réactions
3 146
Points
17 331
merci du tuto et j'aimerai savoir si tu pourrait m'apprendre via skype car j'aimerai faire des programeS ? :)

De rien, et désolé je ne peux pas t'apprendre directement, tu peux appreendre ici :
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut