El día de hoy vamos a resolver un ejercicio de programación en PHP. Se trata de simular la compra de productos a través de un formulario y luego mostrar el total.

Es un ejercicio de programación para aprender más sobre este lenguaje. La solicitud dice:

Realizar una página web dinámica con PHP que simule la compra de varios productos de una tiendita a través de un formulario web.

• Solicitar el nombre de 5 productos (cuadros de textos).
• Solicitar la marca de cada producto (desplegables).
• Solicitar el precio de cada producto (cuadros de número)
• El formulario tendrá los botones de enviar y reset
• Al presionar el botón de envío, el programa calculará la suma de los productos (subtotal), el IVA y el total de la compra (Subtotal + IVA)

Vamos a hacerlo dibujando el formulario de manera dinámica y recibiéndolo igualmente en el servidor.

Dibujando formulario con PHP

Primero veamos cómo solicitar los datos de los 5 productos con PHP (nombre, marca y precio).

Para eso simplemente hacemos un ciclo y en cada paso dibujamos los input (todos dentro del mismo form):

<form action-xhr="#" method="post">
    <?php
    $cantidadProductos = 5;
    ?>
    <?php for ($i = 0; $i < 5; $i++) { ?>
        <p>Producto <?php echo $i + 1 ?></p>
        <label for="">Nombre: </label>
        <input type="text" name="nombres[]" required>
        <label for="">Marca:</label>
        <select name="marcas[]" required>
            <option selected value="Marca 1">Marca 1</option>
            <option value="Marca 2">Marca 2</option>
            <option value="Marca 3">Marca 3</option>
        </select>
        <label for="">Precio:</label>
        <input type="number" name="precios[]" required>
        <br>
    <?php } ?>
    <br>
    <input type="submit">
    <input type="reset">
</form>

Fíjate en que el formulario tiene el action vacío, por lo que al enviarlo se enviará a la misma página en la que se está mostrando (es decir, el formulario y el manejo del mismo están en el mismo archivo).

Otra cosa importante es que en el name de los elementos estamos usando [] al final, esto quiere decir que cada campo del formulario será enviado como arreglo.

Nota: para enviar y resetear el formulario tenemos los input type submit y reset respectivamente.

Diferenciar entre ver página o procesar formulario

Debido a que el formulario y el procesamiento está en el mismo script de PHP necesitamos diferenciar si se quiere ejecutar el script o procesar el formulario.

Cuando visitamos la página del script desde el navegador estamos haciendo una petición GET, pero cuando el formulario es enviado hace una petición POST.

Nota: si quisieras podrías separar los archivos y procesar el formulario en, por ejemplo, procesar.php mientras que muestras el formulario en productos.php.

Para diferenciar podemos leer la clave REQUEST_METHOD del arreglo superglobal $_SERVER.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    # Ok, es una petición POST
}

Procesar formulario

Ahora veamos cómo procesar el formulario y mostrar IVA, total, etcétera. Simplemente vamos a hacer un ciclo for desde 1 hasta la cantidad de elementos y extraer el valor de cada arreglo según su índice.

<?php
$nombres = $_POST["nombres"];
$marcas = $_POST["marcas"];
$precios = $_POST["precios"];
$subtotal = 0;
for ($i = 0; $i < count($nombres); $i++) {
    $nombre = $nombres[$i];
    $marca = $marcas[$i];
    $precio = floatval($precios[$i]);
    $subtotal += $precio;
    printf("%s ($%s) marca %s<br>", $nombre, number_format($precio, 2), $marca);
}
$porcentajeIva = 0.16;
$iva = $subtotal * $porcentajeIva;
$total = $subtotal + $iva;

echo "<br><strong>Subtotal: </strong>$" . number_format($subtotal, 2) . "<br>";
echo "<strong>IVA: </strong>$" . number_format($iva, 2) . "<br>";
echo "<strong>TOTAL: </strong>$" . number_format($total, 2) . "<br>";
echo "<br><a href=''>Volver al formulario</a>";
exit;

El subtotal es la suma de todos los precios, luego se le aumenta el IVA (o impuesto) sacando el porcentaje de aumento y finalmente el total es la suma del subtotal y el IVA.

En este caso el IVA está en el 16 % pues así es en mi país, tú puedes cambiar ese porcentaje.

Nota: fíjate en el exit al final. Eso es para detener la ejecución del código y es necesario porque estoy usando el mismo archivo para ambas cosas y así prevengo que se vuelva a mostrar el formulario cuando lo estoy procesando.

Poniendo todo junto

El código completo queda como se ve a continuación. La salida ya la has visto en las imágenes anteriores.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $nombres = $_POST["nombres"];
    $marcas = $_POST["marcas"];
    $precios = $_POST["precios"];
    $subtotal = 0;
    for ($i = 0; $i < count($nombres); $i++) {
        $nombre = $nombres[$i];
        $marca = $marcas[$i];
        $precio = floatval($precios[$i]);
        $subtotal += $precio;
        printf("%s ($%s) marca %s<br>", $nombre, number_format($precio, 2), $marca);
    }
    $porcentajeIva = 0.16;
    $iva = $subtotal * $porcentajeIva;
    $total = $subtotal + $iva;

    echo "<br><strong>Subtotal: </strong>$" . number_format($subtotal, 2) . "<br>";
    echo "<strong>IVA: </strong>$" . number_format($iva, 2) . "<br>";
    echo "<strong>TOTAL: </strong>$" . number_format($total, 2) . "<br>";
    echo "<br><a href=''>Volver al formulario</a>";
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productos</title>
</head>

<body>

    <form action-xhr="#" method="post">
        <?php
        $cantidadProductos = 5;
        ?>
        <?php for ($i = 0; $i < 5; $i++) { ?>
            <p>Producto <?php echo $i + 1 ?></p>
            <label for="">Nombre: </label>
            <input type="text" name="nombres[]" required>
            <label for="">Marca:</label>
            <select name="marcas[]" required>
                <option selected value="Marca 1">Marca 1</option>
                <option value="Marca 2">Marca 2</option>
                <option value="Marca 3">Marca 3</option>
            </select>
            <label for="">Precio:</label>
            <input type="number" name="precios[]" required>
            <br>
        <?php } ?>
        <br>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

Por aquí te dejo más tutoriales de PHP en mi blog.