Replace data from an array with a new PHP

1

The exercise I am doing is to make an interface of a theater which contains 5 rows and 5 seats or chairs. the user can make a series of actions between which they are Book, Release and Buy ("R", "L" and "V").

Well the problem is this: when choosing the action either "R", "V" or "L", the arrangement is modified but only the first time, the second time it restarts again, what I want is that for each action you choose, those new actions or states that this user adds are saved.

The way in which you are going to modify and create the fix should only be with PHP and without using global variables since in the exercise I am doing this is specified. Your opinions would be very helpful thanks.

Code:

styles.min.css

input,input:hover{color:#fff!important}td,th{padding:8px;border-bottom:1px solid #fff}body{font-family:Arial,Helvetica,sans-serif}table{font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;font-size:12px;width:280px}th{font-size:13px;font-weight:400;background:#b9c9fe;border-top:4px solid #aabcfe;color:#039}td{background:#e8edff;color:#669;border-top:1px solid transparent}tr:hover td{background:#d0dafd;color:#339}select:invalid{box-shadow:0 0 5px 1px red}select:focus:invalid{outline:0}input{border-radius:4px;font-size:15px;margin:10px;display:inline-block;padding:10px 20px;background:#4299ef;box-shadow:0 15px 20px -10px transparent,inset 0 -2px 0 0 rgba(0,0,0,.2),inset 0 -16px 25px 0 #3273b3;transition:all .3s ease-in-out}input:hover{text-decoration:none;box-shadow:0 0 0 0 transparent,inset 0 -1px 0 0 rgba(0,0,0,.1),inset 0 10px 15px 5px #377dc3}

index.php

<?php

include_once 'interfaz.php';
include_once 'transaccion.php';

$listaEstados = array
    (
    array("L", "L", "L", "L", "L"),
    array("L", "L", "L", "L", "L"),
    array("L", "L", "L", "L", "L"),
    array("L", "L", "L", "L", "L"),
    array("L", "L", "L", "L", "L"),
);

$listaAcciones = array
    (
    "R" => "Reservar",
    "V" => "Comprar",
    "L" => "Liberar",
);

?>

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="estilos.min.css">
        <title>Ejercicio 4</title>
    </head>
    <body>
    <br>
    <br>
        <table align="center">
            <form method="post">
                <tr>
                    <td>
                        <label for="fila">Fila:</label>
                            <select name="fila" id="fila" required>
                            <?php echo interfaz::Filas($listaEstados); ?>
                        </select>
                    </td>

                <tr>
                    <td>
                        <label for="puesto">Puesto:</label>
                            <select name="puesto" id="puesto" required>
                            <?php echo interfaz::Puestos($listaEstados); ?>
                            </select>
                    </td>
                </tr>

                <tr>
                    <td>
                        <label for="acciones">Accion:</label>
                            <select name="accion" id="accion" required>
                            <?php echo interfaz::Acciones($listaAcciones); ?>
                            </select>
                    </td>
                </tr>

                <tr>
                    <td>
                        <input name="submit" type="submit" value="Enviar">
                        <input name="reset" type="reset" value="Actualizar">
                    </td>
                </tr>

                </tr>
            </form>
        </table>
    </body>
    </html>

interface.php

<?php

    class interfaz {

    public function mostrarInterfaz($listaEstados){

        $interfaz = '
        <table border="4" align="center">
            <tbody>
                <tr>
                    <th colspan="6">TEATRO</th>
                </tr>
                <tr>
                    <th></th>';

        foreach ($listaEstados as $indice => $valor) {
            $interfaz .= '<th>' . ($indice + 1) . '</th>';
        }

        foreach ($listaEstados as $indice1 => $valor) {
            $interfaz .= '<tr><th>' . ($indice1 + 1) . '</th>';
            foreach ($listaEstados as $indice2 => $valor) {
                $interfaz .= '<td align="center">' . $listaEstados[$indice1][$indice2] . '</td>';
            }
        }

        $interfaz .= '</tr></tr></tbody></thead></table>';
        return $interfaz;
    }

    public function Filas($listaEstados){
        $fila = '<option value="">Seleccione ...</option>';
        foreach ($listaEstados as $indice => $valor) {
            $fila .= '<option value="' . $indice . '">' . ($indice + 1) . '</option>';
        }
        return $fila;
    }

    public function Puestos($listaEstados){
        $puesto = '<option value="">Seleccione ...</option>';
        foreach ($listaEstados as $indice => $valor) {
            $puesto .= '<option value="' . $indice . '">' . ($indice + 1) . '</option>';
        }
        return $puesto;
    }

    public function Acciones($listaAcciones){
        $accion = '<option value="">Seleccione ...</option>';
        foreach ($listaAcciones as $indice => $valor) {
            $accion .= '<option value="' . $indice . '">' . $valor . '</option>';
        }
        return $accion;
    }
}

transaction.php

<?php

    class transaccion {

    public function cambiarEstado($listaEstados, $fila, $puesto, $accion){

        if ($listaEstados[$fila][$puesto] == "L") {
            if ($accion == "V" || $accion == "R") {
                $listaEstados[$fila][$puesto] = $accion;
            } else if ($accion == "L") {
                echo "<script>
                alert('Este puesto no se puede volver a liberar');
                </script>";
            }
        } else if ($listaEstados[$fila][$puesto] == "R") {
            if ($accion == "V" || $accion == "L") {
                $listaEstados[$fila][$puesto] = $accion;
            } else if ($accion == "R") {
                echo "<script>
                alert('Este puesto no se puede volver a reservar');
                </script>";
            }
        } else if ($listaEstados[$fila][$puesto] == "V") {
            echo "<script>
               alert('Este puesto ya está vendido');
               </script>";
            if ($accion == "R") {
                echo "<script>
               alert('Este puesto no se puede reservar');
               </script>";
            } else if ($accion == "L") {
                echo "<script>
               alert('Este puesto no se puede liberar');
               </script>";
            } else if ($accion == "V") {
                echo "<script>
               alert('Este puesto no se puede volver a vender');
               </script>";
            }
        }
        echo interfaz::mostrarInterfaz($listaEstados);
    }
}
    
asked by Daniel Alexander Paz 19.07.2018 в 01:10
source

1 answer

3

Daniel my proposal would be this.

An array that represents the rows, the seats and their current state. (This could even be handled on the client's side.)

    /*Nuestro objeto global*/
$arrPuestos=
    array(
            array("fila"=>1, "sillas"=>array(1=>"R", 2=>"V", 3=>"L", 4=>"L", 5=>"L")),
            array("fila"=>2, "sillas"=>array(1=>"V", 2=>"L", 3=>"L", 4=>"L", 5=>"L")),
            array("fila"=>3, "sillas"=>array(1=>"R", 2=>"R", 3=>"R", 4=>"R", 5=>"R")),
            array("fila"=>4, "sillas"=>array(1=>"L", 2=>"L", 3=>"L", 4=>"L", 5=>"L")),
            array("fila"=>5, "sillas"=>array(1=>"L", 2=>"L", 3=>"L", 4=>"L", 5=>"L")),
        );

An array for possible states:

/*Posibles status de cada asiento*/
$arrStatus=array("R","V","L");

Why not improve the grid, making things easier for the user?

This would be a novelty that in my opinion would bring quality to the code, improving the user experience. It is about putting in each chair three buttons with the possible states, for the user to choose there. In this way we are discounting three additional actions with respect to your original code: 1. Select the row; 2. Select the position; 3. Select the action ... and even a 4th one that would be to validate ...

The actions of each of these buttons can be heard by Javascript and modify the state of the object in that row / position.

And, working more the code, we would show deactivated the button of the current state of that position. I think of something similar to airplanes, where you can choose the free seats in a drawing of the plane and show you the seats that are payment, which are XXL, which are emergency exit, etc.

/*Botones para la grilla*/
$btnStatus="";
foreach ($arrStatus as $status){
    $btnStatus.='<a class="button is-info is-outlined is-small is-centered">'.$status.'</a>';

}

Now we read the array and build the grid.

/*Grilla*/
$tablaGrilla='<table class="table is-bordered">';
foreach ($arrPuestos as $filas) {
    $fila=$filas["fila"];
    $tablaGrilla.= "<tr><td>".$fila."</td>";
    foreach ($filas["sillas"] as $silla ){
        $tablaGrilla.='<td class="big-center">'.$silla.'<br>'.$btnStatus.'</td>';
    }      
    $tablaGrilla.="</tr>";
}
$tablaGrilla.="</table>";
echo $tablaGrilla;

The result would be something like this:

Notice that any CSS framework can give you a truly professional style to your grid.

Here I chose something simple like Bulma, but you can choose another one. It lacks one thing to make it look better, and it is to put bigger and centralize the letter of each row. I did not find it in Bulma, but that would be very easy to do with any other framework.

The intention is that you see how it would work and how it would be.

You would have a complete grid, nice to look at and easy to use and maintain.

We could think of an information bar to notify the user of each change that occurred when clicking on each button.

I hope you find it useful.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<pre>
<table class="table is-bordered">
  <tr>
    <td>1</td>
    <td class="subtitle is-3 is-spaced is-centered">R<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">V<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
  </tr>
  <tr>
    <td>2</td>
    <td class="subtitle is-3 is-spaced is-centered">V<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
  </tr>
  <tr>
    <td>3</td>
    <td class="subtitle is-3 is-spaced is-centered">R<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">R<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">R<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">R<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">R<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
  </tr>
  <tr>
    <td>4</td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
  </tr>
  <tr>
    <td>5</td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
    <td class="subtitle is-3 is-spaced is-centered">L<br><a class="button is-info is-outlined is-small is-centered">R</a><a class="button is-info is-outlined is-small is-centered">V</a><a class="button is-info is-outlined is-small is-centered">L</a></td>
  </tr>
</table>
</pre>
    
answered by 19.07.2018 в 06:14