Mini calculadora con php

calculadora php

Hola que tal amigos, siguiendo con el desarrollo de aprendizaje del lenguaje Php, vamos hacer algo diferente esta vez 😀 , nuestro objetivo será poner en práctica los conocimientos que hemos obtenido a lo largo del curso, pues bien que mejor manera de iniciar que realizando una mini calculadora. Como todo programador junior, principiante o como lo queramos llamar, debemos arrancar con cosas pequeñas pero sustanciosas, bien el objetivo final será el siguiente:

calculadora php

Listo, pues manos a la obra, iniciemos creando nuestro formulario base, para lo cual vamos a teclear las siguientes lineas de código:

🛡 Los ataques informáticos crecen cada día
YouTube IconProtege tus Dispositivos - Usa Kaspersky Antivirus.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< !DOCTYPE html>

<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Jugando con Php</title>
    </head>
   
    <body>
     <h2>MINI CALCULADORA CON PHP</h2>    
     <form method="post">
        <label>Número 1:</label>
        <input name="num1" type="text" pattern="[0-9.]+" placeholder="ingrese número 1" required autofocus/>
        <br /><br /><label>Número 2:</label>
        <input type="text" name="num2" pattern="[0-9.]+" placeholder="ingrese número 2" required/>
     </form>
    </body>
   
</html>

Bien, expliquemos algunas cosas hasta el momento, nuestros datos los enviaremos usando el método post, además necesitaremos 2 cajas de texto en las cuales ingresaremos los números para aplicarle las operaciones fundamentales.
Listo, cada campo lo vamos a validar de tal forma que sea obligatorio(required), que permita solo ingresar datos validos(pattern=»[0-9.]+»).
El siguiente paso es agregar los radiobutton para cada operación matemática y un botón calcular.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<br /><br /><label>Resultado:</label>
<input type="text" name="res" value="" readonly/>
           
 <br /><br /><label>SUMAR</label>
 <input type="radio" name="op" value="1" checked/>
           
 <label>RESTAR</label>
 <input type="radio" name="op" value="2"/>
           
 <label>MULTIPLICAR</label>
 <input type="radio" name="op" value="3"/>
           
 <label>DIVIDIR</label>
 <input type="radio" name="op" value="4"/>
           
 <br /><br /><input type="submit" value="CALCULAR" name="enviar"/>

A cada radio le asignaremos un identificador, 1=sumar, 2=restar y así sucesivamente. Por defecto estará activa la opción sumar(checked), el campo resultado será de solo lectura(readonly).
Ahora hagamos el código php para resolver cada operación:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
   if(isset($_POST['enviar'])){ // si damos clic al botón calcular entonces ...
                       
        if($_POST['op'] === "1"){ // si esta activo el radiobutton sumar entonces ...
            $resul = $_POST['num1'] + $_POST['num2']; // a la variable resul le asignamos la suma de los campos
        }
        elseif($_POST['op'] === "2"){ //sino, si esta activo el radio restar entonces ...
            $resul = $_POST['num1'] - $_POST['num2'];
        }
        elseif($_POST['op'] === "3"){
            $resul = $_POST['num1'] * $_POST['num2'];
        }
        else{
            $resul = $_POST['num1'] / $_POST['num2'];
        }
       
    }
?>

Finalmente, debemos modificar la propiedad value del campo resultado, editando nos quedará de la siguiente manera:

1
<input type="text" name="res" value="<?php if(isset($_POST['enviar'])){ echo $resul;} ?/>" readonly>

Listo amigos, al campo resultado le imprimimos el valor que tenga la variable resul cuando se haya dado clic al botón calcular y finalmente probemos nuestra mini calculadora 😛

6 comentarios

  1. Alcides Contestar

    Me aparece el siguiente error:
    Parse error: syntax error, unexpected ‘?’ in C:\xampp\htdocs\ejercicios\calc.php on line 54

      • Alcides Contestar

        Excelente, funciona de mil maravillas, gracias por la celeridad y exactitud de tu respuesta.
        Que habrá sido que hice mal?

        • Ivan David Lopez Contestar

          Con gusto amigo, al parecer era cierre de algunas etiquetas, al momento de copiar código de las páginas también hay que tener en cuenta que pasen en el formato correcto, algunas comillas, llaves o signos especiales aveces se alteran.
          Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *