[PHP] rekenmachine, form handling op dezelfde pagina - Softwareontwikkeling

zaterdag 1 maart 2014 17:08

Acties:

Topicstarter

Beste devvers,

Ik probeer PHP te doorgronden en loop tegen een probleem aan. Ik heb een simpele werkende rekenmachine gemaakt:

reken.html

HTML:

<html>
<body>
<form name="rekenen" action="reken.php" method="post">
<input type="text" name="a">
<select name="actie">
  <option value="optellen">+</option>
  <option value="aftrekken">-</option>
  <option value="vermenigvuldigen">*</option>
  <option value="delen">/</option>
</select>
<input type="text" name="b">
<input type="submit" value="=">
</form>
</body>
</html>

reken.php

PHP:

<?php
switch ($_POST["actie"]) 
{
case "optellen":
    echo $_POST["a"]+$_POST["b"];
    break;
case "aftrekken":
    echo $_POST["a"]-$_POST["b"];
    break;
case "vermenigvuldigen":
    echo $_POST["a"]*$_POST["b"];
    break;
case "delen":
    echo $_POST["a"]/$_POST["b"];
    break;
}
?>

Dit werkt. Als je op de button klikt, krijg je de uitkomst te zien op een verder lege pagina.
Ik heb nog geen zin om een controlemechanisme te programmeren dat controleert of beide tekstvelden zijn ingevuld.
Leuk en aardig, maar ik wil eigenlijk dat de uitkomst van de som rechts van de button wordt weergegeven. Als er dan op de button geklikt wordt, moeten de volledige som zichtbaar blijven, dus bijvoorbeeld:
4 * 4 =
Button klik!

4 * 4 = 16

Ik heb een poging gewaagd, maar 't lukt me niet:

HTML:

<html>
<body>
<form name="rekenen" action="" method="post">
<input type="text" name="a">
<select name="actie">
  <option value="optellen">+</option>
  <option value="aftrekken">-</option>
  <option value="vermenigvuldigen">*</option>
  <option value="delen">/</option>
</select>
<input type="text" name="b">
<input type="submit" name="uitvoeren" value="=">
<?php
if (isset( $_POST["uitvoeren"]))
{
echo "lol";
switch ($_POST["actie"]) 
{
case "optellen":
    echo $_POST["a"]+$_POST["b"];
    break;
case "aftrekken":
    echo $_POST["a"]-$_POST["b"];
    break;
case "vermenigvuldigen":
    echo $_POST["a"]*$_POST["b"];
    break;
case "delen":
    echo $_POST["a"]/$_POST["b"];
    break;
}
}
?>
</form>
</body>
</html>

Wat doe ik fout en hoe krijg ik dit werkend met alleen PHP en HTML?

[ Voor 0% gewijzigd door BtM909 op 06-03-2014 10:33 ]

zaterdag 1 maart 2014 17:13

Acties:

Douweegbertje

Wat kinderachtig.. godverdomme

Nja, je echo'ed nu letterlijk het antwoord van de som. Als je de som wilt laten zien, dan moet je zorgen dat je het echo'ed als "string". Als in :

code:

1	echo $_POST["a"].' / '.$_POST["b"];

Als je een echo 1*1 doet, dan krijg je het antwoord. Doe je echo '1*1' dan krijg je letterlijk wat er staat.

Daarbij wil je ook nog op iets wijzen, en dat is dat je nu een opdracht doet waarbij PHP niet echt DE oplossing is. Iets in de trend van JS zou een veel betere oplossing zijn om bijvoorbeeld een rekenmachine te maken.

k heb nog geen zin om een controlemechanisme te programmeren dat controleert of beide tekstvelden zijn ingevuld.

Geen zin. Terwijl DAT nou juist HET belangrijkste van zo'n oefening moet zijn. Regel 1 is: vertrouw nooit user input. Als je nou iets wilt leren / doorgronden, dan pak je juist dit soort punten als eerste op.

[ Voor 69% gewijzigd door Douweegbertje op 01-03-2014 17:16 ]

zaterdag 1 maart 2014 17:16

Acties:

Niet Henk

Als ik je zo begrijp, lukken alle berekeningen. Het enige wat je nog moet doen, is zorgen dat ze op dezelfde lijn worden weegegeven. Klopt dit?

Als je dit goed wilt doen, heb je wat CSS nodig. Je kan items op verschillende manieren op dezelfde hoogte zetten.

Probeer eens bij al je inputs style="display:inline-block;" als HTML attribuut toe te voegen. Dat zou ze op 1 lijn moeten zetten.

Dus zoiets:

code:

1	<input type="text" name="b" style="display:inline-block;" />

Oh, en met betrekking tot dat controlemechanisme: run die post waarden gewoon even door de ingebouwde PHP is_numeric() functie, en geef een foutmelding weer als deze niet true teruggeeft. Dat zou minder dan 5 minuten werk moeten zijn.

[ Voor 19% gewijzigd door Niet Henk op 01-03-2014 17:20 ]

zaterdag 1 maart 2014 17:21

Acties:

Verwijderd

Niet Henk schreef op zaterdag 01 maart 2014 @ 17:16:

Als je dit goed wilt doen, heb je wat CSS nodig. Je kan items op verschillende manieren op dezelfde hoogte zetten.]

Nee hoor. Bij alle gebruikte typen invoervelden is inline de standaard.

@TS:
Je wilt de value="" attribute gebruiken van de invoervelden om er een waarde te zetten als die beschikbaar is (dus als het formulier al gesubmit is). Heel simpel zou je bij het eerste formulierveld dan <input type="text" name="a" value="<?= htmlentities($_POST['a']); ?>"> zetten, waarbij htmlentities een klein beetje propere escaping doet. Mijn voorbeeld is erg simpel, ook zonder error checking. Ik zou dat wel toevoegen.

zaterdag 1 maart 2014 17:32

Acties:

Niet Henk

Verwijderd schreef op zaterdag 01 maart 2014 @ 17:21:
[...]

Nee hoor. Bij alle gebruikte typen invoervelden is inline de standaard.

Oh, volgens mij begreep ik dan de vraag niet helemaal.

Bij jouw oplossing hoort natuurlijk dat je even ook de select dropdown goed moet zetten:

code:

1	<option value="aftrekken" <?php if(isset($_POST['actie']) && $_POST['actie']=='aftrekken'){echo 'selected="selected"';}?> >-</option>

En dit natuurlijk passend voor al je <option> tags.

zaterdag 1 maart 2014 18:34

Acties:

Joep

Topicstarter

Het moet er zo uitzien als je op de button klikt:

Dus niet 8 + 8 = 16. Dat kan ik wel programmeren.

zaterdag 1 maart 2014 19:12

Acties:

Niet Henk

Begrepen. Volgens mij zijn de laatste reactie van mij, en die van Cheatah dan van toepassing. Houd er dus rekening mee dat je je HTML en je PHP niet gescheiden kan houden.

Dit zorgt dat de waarde van A blijft staan na de submit. Zelfde geld voor B.

code:

1	<input type="text" name="a" value="<?php echo htmlentities($_POST['a']); ?>">

Dit zorgt ervoor dat de geselecteerde option geselecteerd blijft na de submit, indien ingevoegd voor alle option tags.

code:

1	<option value="aftrekken" <?php if(isset($_POST['actie']) && $_POST['actie']=='aftrekken'){echo 'selected="selected"';}?> >-</option>

Dan is het verder aan jou om te zorgen dat de boel goed op 1 regel blijft. Zeg het als je daar problemen mee hebt

zaterdag 1 maart 2014 19:15

Acties:

Joep

Topicstarter

Thx Henk, ik begrijp door je post een artikel van w3schools nu veel beter. http://www.w3schools.com/php/php_form_complete.asp

Ik ga ermee aan de slag.

woensdag 5 maart 2014 23:28

Acties:

Joep

Topicstarter

Ik ben al een stuk verder en heb de boel in één .php file weten te krijgen. Ik heb ondertussen het één en ander veranderd qua naam:

casio.php

PHP:

<html>
<body>
<?php
$operand_a=NULL;
$operand_b=NULL;
$result=NULL;
if(isset($_POST["execute"]))
{
    $operand_a=$_POST["operand_a"];
    $operand_b=$_POST["operand_b"];
    switch ($_POST["operator"]) 
    {
        case "addition":
            $result=$_POST["operand_a"]+$_POST["operand_b"];
            break;
        case "subtraction":
            $result=$_POST["operand_a"]-$_POST["operand_b"];
            break;
        case "multiplication":
            $result=$_POST["operand_a"]*$_POST["operand_b"];
            break;
        case "division":
            $result=$_POST["operand_a"]/$_POST["operand_b"];
            break;
    }
}
?>
<form method="post" action="">
<input type="text" name="operand_a" value="<?php echo $operand_a; ?>">
<select name="operator">
<option value="addition">+</option>
<option value="subtraction">-</option>
<option value="multiplication">*</option>
<option value="division">/</option>
</select>
<input type="text" name="operand_b" value="<?php echo $operand_b; ?>">
<input type="submit" name="execute" value="=">
<input type="text" name="result" value="<?php echo $result; ?>">
</form>
</body>
</html>

Hij onthoudt alleen natuurlijk de operator niet. Ik dacht dat de volgende lap code de boel wel zou verhelpen

PHP:

<option value="addition" <?php if($_POST["operator"]=="addition"){echo "selected";} ?>>+</option>
<option value="subtraction" <?php if($_POST["operator"]=="subtraction"){echo "selected";} ?>>-</option>
<option value="multiplication" <?php if($_POST["operator"]=="multiplication"){echo "selected";} ?>>*</option>
<option value="division" <?php if($_POST["operator"]=="division"){echo "selected";} ?>>/</option>

Maar helaas. Ik kreeg direct een error die verdwijnt zodra ik voor de eerste keer sumbit/uitreken:
http://tweakers.net/ext/f/QLq1WWZhwygKGGwhk3fpcK2t/full.png

Niet Henk schreef op zaterdag 01 maart 2014 @ 19:12:
Dit zorgt ervoor dat de geselecteerde option geselecteerd blijft na de submit, indien ingevoegd voor alle option tags.
code:
1
<option value="aftrekken" <?php if(isset($_POST['actie']) && $_POST['actie']=='aftrekken'){echo 'selected="selected"';}?> >-</option>

Ik heb nog niet gekeken of dit het probleem verhelpt btw, maar waarom moet de onderstaande code worden toegevoegd?

code:

1	isset($_POST['actie']) &&

donderdag 6 maart 2014 00:04

Acties:

bille

Don't call me Buff

Wat dacht je hier van, even asserts aan zetten zodat ook userinput wordt gechecked (al wordt dat afgeraden voor productie omgevingen):

PHP:

<?php
class Rekenmachine {
    public static function add($a, $b){
        assert(is_numeric($a) && is_numeric($b));
        return $a + $b;
    }
    public static function subtract($a, $b){
        assert(is_numeric($a) && is_numeric($b));
        return $a - $b;
    }
    public static function multiply($a, $b){
        assert(is_numeric($a) && is_numeric($b));
        return $a * $b;
    }
    public static function devide($a, $b){
        assert(is_numeric($a) && is_numeric($b) && $b !== 0);
        return $a / $b;
    }
}
$operand_a = $operand_b = $result = 0;

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $operand_a = filter_input(INPUT_POST,'operand_a');
    $operand_b = filter_input(INPUT_POST,'operand_b');
    $operator = filter_input(INPUT_POST,'operator');
    $result = Rekenmachine::$operator($operand_a, $operand_b);
}
?>
<html>
<body>
<form method="post" action="">
<input type="text" name="operand_a" value="<?php echo $operand_a; ?>">
<select name="operator">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="devide">/</option>
</select>
<input type="text" name="operand_b" value="<?php echo $operand_b; ?>">
<input type="submit" name="execute" value="=">
<input type="text" name="result" value="<?php echo $result; ?>">
</form>
</body>
</html>

Ultra Pilammo 6666Mhz AMD, 4251Mbit/s RAM, Gefors V6666 MegaTurbo, 43" TFS, Ultra 80Gig Firewire netwerkkaart en 5D geluid met 66 speakers in 5 dimensies

donderdag 6 maart 2014 08:19

Acties:

HuHu

Joep schreef op woensdag 05 maart 2014 @ 23:28:
Ik ben al een stuk verder en heb de boel in één .php file weten te krijgen. Ik heb ondertussen het één en ander veranderd qua naam:

casio.php

code:

<html>
<body>
<?php
$operand_a=NULL;
$operand_b=NULL;
$result=NULL;
if(isset($_POST["execute"]))
{
    $operand_a=$_POST["operand_a"];
    $operand_b=$_POST["operand_b"];
    switch ($_POST["operator"]) 
    {
        case "addition":
            $result=$_POST["operand_a"]+$_POST["operand_b"];
            break;
        case "subtraction":
            $result=$_POST["operand_a"]-$_POST["operand_b"];
            break;
        case "multiplication":
            $result=$_POST["operand_a"]*$_POST["operand_b"];
            break;
        case "division":
            $result=$_POST["operand_a"]/$_POST["operand_b"];
            break;
    }
}
?>
<form method="post" action="">
<input type="text" name="operand_a" value="<?php echo $operand_a; ?>">
<select name="operator">
<option value="addition">+</option>
<option value="subtraction">-</option>
<option value="multiplication">*</option>
<option value="division">/</option>
</select>
<input type="text" name="operand_b" value="<?php echo $operand_b; ?>">
<input type="submit" name="execute" value="=">
<input type="text" name="result" value="<?php echo $result; ?>">
</form>
</body>
</html>

Hij onthoudt alleen natuurlijk de operator niet. Ik dacht dat de volgende lap code de boel wel zou verhelpen

code:

<option value="addition" <?php if($_POST["operator"]=="addition"){echo "selected";} ?>>+</option>
<option value="subtraction" <?php if($_POST["operator"]=="subtraction"){echo "selected";} ?>>-</option>
<option value="multiplication" <?php if($_POST["operator"]=="multiplication"){echo "selected";} ?>>*</option>
<option value="division" <?php if($_POST["operator"]=="division"){echo "selected";} ?>>/</option>

Maar helaas. Ik kreeg direct een error die verdwijnt zodra ik voor de eerste keer sumbit/uitreken:
http://tweakers.net/ext/f/QLq1WWZhwygKGGwhk3fpcK2t/full.png

[...]

Ik heb nog niet gekeken of dit het probleem verhelpt btw, maar waarom moet de onderstaande code worden toegevoegd?

code:

1	isset($_POST['actie']) &&

Dat laatste gaat helpen. $_POST is een array die wordt gevuld als je een formulier verzend middels een POST (vandaar de naam

). Als je de pagina voor de eerste keer bekijkt is $_POST dus nog leeg (geen formulier verzonden) en kan hij $_POST["operator"] niet vinden. Dus geeft hij een foutmelding.

Als je isset() toevoegt, dan kijk je eerst of $_POST["operator"] überhaupt bestaat en ga je daarna pas de waarde ervan proberen te bekijken. Als hij niet bestaat, wordt dat overgeslagen.

donderdag 6 maart 2014 21:54

Acties:

Joep

Topicstarter

bille schreef op donderdag 06 maart 2014 @ 00:04:
Wat dacht je hier van

Stapje voor stapje

OO is een flinke stap die ik nog moet nemen, maar waarom worden asserts voor productie afgeraden? Performance hit? Not done/niet netjes?

HuHu schreef op donderdag 06 maart 2014 @ 08:19:
[...]

Dat laatste gaat helpen. $_POST is een array die wordt gevuld als je een formulier verzend middels een POST (vandaar de naam ). Als je de pagina voor de eerste keer bekijkt is $_POST dus nog leeg (geen formulier verzonden) en kan hij $_POST["operator"] niet vinden. Dus geeft hij een foutmelding.

Als je isset() toevoegt, dan kijk je eerst of $_POST["operator"] überhaupt bestaat en ga je daarna pas de waarde ervan proberen te bekijken. Als hij niet bestaat, wordt dat overgeslagen.

Fijne uitleg, thx

Het werkt nu. Edit: en ik begrijp $_POST en isset() beter

PHP:

<html>
<body>
<?php
$operand_a = $operand_b = $result = NULL;
if(isset($_POST["execute"]))
{
    $operand_a = $_POST["operand_a"];
    $operand_b = $_POST["operand_b"];
    switch ($_POST["operator"]) 
    {
        case "addition":
            $result = $_POST["operand_a"] + $_POST["operand_b"];
            break;
        case "subtraction":
            $result = $_POST["operand_a"] - $_POST["operand_b"];
            break;
        case "multiplication":
            $result = $_POST["operand_a"] * $_POST["operand_b"];
            break;
        case "division":
            $result = $_POST["operand_a"] / $_POST["operand_b"];
            break;
    }
}
?>
<form method="post" action="">
<input type="text" name="operand_a" value="<?php echo $operand_a; ?>">
<select name="operator">
<option value="addition" <?php if(isset($_POST["operator"]) && $_POST["operator"]=="addition"){echo "selected";} ?>>+</option>
<option value="subtraction" <?php if(isset($_POST["operator"]) && $_POST["operator"]=="subtraction"){echo "selected";} ?>>-</option>
<option value="multiplication" <?php if(isset($_POST["operator"]) && $_POST["operator"]=="multiplication"){echo "selected";} ?>>*</option>
<option value="division" <?php if(isset($_POST["operator"]) && $_POST["operator"]=="division"){echo "selected";} ?>>/</option>
</select>
<input type="text" name="operand_b" value="<?php echo $operand_b; ?>">
<input type="submit" name="execute" value="=">
<input type="text" name="result" value="<?php echo $result; ?>">
</form>
</body>
</html>

vrijdag 7 maart 2014 09:28

Acties:

HuHu

Je kunt dit nog toevoegen:

PHP:

1	$operator = isset($_POST['operator']) ? $_POST['operator'] : '';

Dan kun je bij al die <option> dingen vergelijken met $operator en hoef je niet continue dezelfde code te herhalen.

Wat je ook kunt doen:

PHP:

<?php
$operators = array(
  'addition'       => '+',
  'subtraction'    => '-',
  'multiplication' => '*',
  'division'       => '/',
);

$currentOperator = isset($_POST['operator']) && in_array($_POST['operator'], $operators) ? $_POST['operator'] : '';
?>

<select name="operator">
  <?php foreach ( $operators as $operator => $symbol ) : ?>
  <option value="<?php echo $operator; ?>" <?php if ($currentOperator  == $operator) { echo "selected"; } ?>><?php echo $symbol; ?></option>  
  <?php endforeach; ?>
</select>

vrijdag 7 maart 2014 09:47

Acties:

Low-Tech

Vergeet niet de filter_input zoals billie had staat.

Fractal Design Meshify S2, Asus ROG B550-F, AMD 3700x, 3080?, Corsair H115i Pro, G-Skill 3600-16 32GB Trident Z Neo