1

El ejercicio que estoy haciendo consiste en hacer una interfaz de un teatro el cual contiene 5 filas y 5 puestos o sillas. el usuario podrá hacer una serie de acciones entre las cuáles están Reservar, Liberar y comprar ("R", "L" y "V").

Interfaz

Bueno el problema es el siguiente: al escoger la acción ya sea "R", "V" o "L", el arreglo si se modifica pero solo la primera vez, la segunda vez se reinicia de nuevo, lo que quiero es que por cada acción que escoga se guarden esas nuevas acciones o estados que agrego ese usuario.

La forma en la que se vaya a modificar y crear el arreglo solo debe ser con PHP y sin utilizar variables globales ya que en el ejercicio que estoy haciendo se específica esto. Sus opiniones serían de mucha ayuda gracias.

Código:

estilos.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>

interfaz.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;
    }
}

transaccion.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);
    }
}
8
  • Primeramente vamos a investigar dónde ocurre lo que dices en tu código. Para ello habrá que tratar de adiviinar qué hace tu programa y que lógica sigue... ¿por qué no lo explicas brevemente en la pregunta? Cuando uno empieza a ver de arriba hacia abajo ya hay algo que choca muchísimo: ¿por qué tienes un curioso array lleno de la letra L? ¿Conoces la utilidad de los arrays en programación (una de ellas es precisamente para evitar repetir datos)? Así que al ver un array lleno de L me detuve y decidí empezar a preguntarte cosas para que aclares el contexto.
    – A. Cedano
    el 18 jul. 2018 a las 23:56
  • Bueno es un ejercicio que estoy haciendo y me piden explícitamente guardar en un array la información de un teatro que va a tener 5 filas y 5 sillas y ese poco de "L" que vez significan que los puestos estan libres el 19 jul. 2018 a las 0:09
  • Ahora se entiende mejor sabiendo de qué se trata. De todos modos sigo viendo un problema más de lógica que de otra cosa. El el array que guarda la información de las filas/sillas no has implementado una forma de identificar qué fila/silla es cada una. Cuando alguien reserva un puesto, o lo deja libre, ¿de qué forma vas a saber que el puesto 3 de la fila 2 por ejemplo está libre o fue reservado?
    – A. Cedano
    el 19 jul. 2018 a las 1:30
  • No le específico que fila ni que puesto está reservado,comprado o liberado ya que esa persona lo escoge en la interfaz. solo le muestro el mensaje "Este puesto esta reservado"... etc el 19 jul. 2018 a las 1:33
  • Como en una parte de la pregunta pediste si te podían ayudar en general con el código, me permito por eso hacerte estos comentarios. Yo pensaría el array como un solo objeto con varias claves que guarden la información. De ese modo en todo momento mantendrías actualizado el estado de ese objeto y tu programa no sería taannnn largo y repetitivo. Ejemplo: $arrPuestos=array(11=>"R", 12=>"V", 13=>"L" ... 21=>"V", 22=>"L", 23=>"R" ...); es sólo un ejemplo donde se usarían dos dígitos, el 1º sería la fila y el 2º sería la silla. Y la letra indicaría el estado de ese puesto.
    – A. Cedano
    el 19 jul. 2018 a las 1:45

1 respuesta 1

3

Daniel mi propuesta sería esta.

Un array que represente la filas, los asientos y su estado actual. (Esto incluso se podría manejar del lado del cliente).

    /*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")),
        );

Un array para los posibles estados:

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

¿Por qué no mejorar la grilla, facilitando las cosas al usuario?

Esto sería una novedad que en mi opinión aportaría calidad al código, mejorando la experiencia de usuario. Se trata de poner en cada silla tres botones con los posibles estados, para que el usuario elija allí. De este modo estamos descontando tres acciones suplementarias con respecto a tu código original: 1. Seleccionar la fila; 2. Seleccionar el puesto; 3. Seleccionar la acción ... y hasta una 4ª que sería la de validar...

Las acciones de cada uno de estos botones se pueden escuchar por Javascript y modificar el estado del objeto en esa fila/puesto.

Y, trabajando más el código, mostraríamos desactivado el botón del estado actual de ese puesto. Pienso en algo parecido a los aviones, donde puedes elegir en un dibujo del avión los asientos libres que hay y te muestra los asientos que son de pago, que son XXL, que son salida de emergencia, etc.

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

}

Ahora leemos el array y construimos la grilla.

/*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;

El resultado sería algo parecido a esto:

introducir la descripción de la imagen aquí

Fíjate que cualquier framework CSS le puedes dar un estilo verdaderamente profesional a tu grilla.

Aquí escogí algo sencillo como Bulma, pero puedes optar por otro. Le falta una cosa para que se vea mejor, y es poner más grande y centralizar la letra de cada fila. No lo encontré en Bulma, pero eso sería muy fácil de hacer con cualquier otro framework.

La intención es que veas cómo funcionaría y como quedaría.

Tendrías una grilla completa, agradable a la vista y fácil de usar y de mantener.

Podríamos pensar en una barra informativa para avisar al usuario de cada cambio ocurrido al hacer click en cada botón.

Espero te sea de utilidad.

<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>

4
  • La verdad es que viendo el trabajo que hiciste te agradezco mucho. lo de cambiar la interfaz puede que lo adapte a mi código, pero el ejercicio que estoy haciendo requiere que para crear, modificar el array no sea ni con javascript ni utilizando variables globales :( el 19 jul. 2018 a las 4:33
  • @DanielAlexanderPaz la expresión global utilizada por mi en un comentario no se refiera a variables globales, sino a tener todo el estado de las filas/puestos en un solo array. En cuanto a cambiar el estado del objeto, si se requiere que sea en PHP no ha problema, puedes usar Ajax para indicar desde el cliente que el objeto ha cambiado y actualizarlo en PHP. De cualquier modo, tendrás que pasar por Javascript o pagar el precio de tener que recargar la interfaz cada vez que ocurra un cambio en la grilla o cada vez que haya que validar.
    – A. Cedano
    el 19 jul. 2018 a las 4:53
  • Si la verdad que me hubiera gustado agregarle javascript o AJAX, pero el ejercicio pide un código más básico, lo de la interfaz agradable me parece muy bueno ya hasta la estoy añadiendo. el 19 jul. 2018 a las 5:21
  • @DanielAlexanderPaz Entiendo. En ese caso yo crearía los botones dentro del bucle que crea cada fila/columa, poniéndole a cada botón la información suya y de la fila/puesto que se presionó, así tendrás una referencia para poder usarla y actualizar el estado de ese puesto. Es una idea para adaptar el mismo código cumpliendo los requerimientos del ejercicio.
    – A. Cedano
    el 19 jul. 2018 a las 5:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.