Butacas de una sala de cine

Oscar1 · #1 (**permalink**) 23/05/2010, 08:13

Hola a todos.

Antes de nada me gustaría comentar que he buscado por todos lados y no he encontrado lo que necesito, seguramente porque no se lo que necesito.

Estoy elaborando un proyecto del final del 2º curso de ciclo medio de Formación Profesional de Explotacion de redes y Sistemas Informaticos. Decidí hacerlo sobre una página web de gestion de ventas de entradas de cine online.

Durante el transcurso de este proyecto he visitado este foro en tropocientas ocasiones y de no ser por este foro no se que hubiera hecho. Asi que antes de nada quiero agredecer a todas las personas que contribuyen en este foro.

Bien,

pues tengo una tabla, en php, que me dibuja las butacas de cine:

Código PHP:

Ver original<table border="0" align="left">
                    
    <?php
                
    // Dibujar la tabla
                                                
    // Definición de constantes
    define("iniCol", 12);
    define("fiCol", 1);
    define("iniFil", 10);
    define("fiFil", 0);
                        
    // Bucle para dibujar la tabla
    // Filas
    for($i = iniFil; $i >= fiFil; $i--){
        if ($i == 0){
        echo '<tr><td><a></a></td>';
    } else {
        echo '<tr><td><a>' . $i . '</a></td>';
    }
    
        // Columnas                     
    for($x = iniCol; $x >= fiCol; $x--){
        // Pasar variables de PHP a Javascript  
        echo '<script languaje="JavaScript">
            var fila="' . $i . '";
            var colum="' . $x . '";
            mostrarFilaColum(fila, colum);
            alert (\'Fila: \' + fila + \'. Columna: \' + colum);
        </script>';
        if ($i == 0){
            echo '<td align="center" name="fila:$i;colum:$x">' . $x . '</td>';
        } elseif ($i == 5 && $x == 3){
            echo '<td align="center" name="fila:$i;colum:$x">fila: 5, colum: 3</td>';
        } else {
                                    
            //$fila[$i] = $i;
            //$colum[$x] = $x;
                                    
            echo '<td class="color" align="center" name="fila:' . $i . ';colum:' . $x . '" 
                                    onclick="javascript:mostrarFilaColum(fila, colum);">
            <a href="fila:' . $i . ';colum:' . $x . '">
                            <img id="img" src="http://www.forosdelweb.com/img/seientTrans.png"/>
            </a>
 
            </td>';
            echo '<input name="' . $i . '" type="hidden" value="' . $i . '" />';
            echo '<input name="' . $x . '" type="hidden" value="' . $x . '" />';
            }
    }
    echo "</tr>";
    }
                        
    ?>
    </table>

Imagen del código anterior:

(Hay varias lineas que las tengo de prueba)

1r Problema:

Quiero hacer que al pulsar en un td (una celda) se cambie la imagen que hay (butaca transparente) por otra imagen (butaca verde) y al volver a pulsar se ponga como antes (butaca transparente).

2o problema:

Como puedo hacer para identificar unívocamente cada una de las celdas (o butacas), para luego mediante PHP pueda decirle a la bdd que butacas son las que ha elegido el usuario.

A ver si alguien sabe como hacer para que cuando pulse en una butaca me aparezca un "alert" con el numero de fila y columna de esa butaca.

Lo he puesto en el apartado de JavaScript, porque creo que la solución sera en código Javas.

Sinceramente, no se como hacerlo, no se que poner en el evento onClick para que me pille variables diferentes segun la butaca.

Ojala me puedan ayudar.

_cronos · #2 (**permalink**) 23/05/2010, 09:19

Para lo de las butacas verdes o transparentes puedes almacenar una variable que cada vez que haga click aumente en 1, y si es impar que esté en verde, y si no transparente. Lo otro ya no sé que decirte porque de PHP no entiendo mucho la verdad.
Saludos (:

Oscar1 · #3 (**permalink**) 23/05/2010, 09:45

Cita:

Iniciado por _cronos

Para lo de las butacas verdes o transparentes puedes almacenar una variable que cada vez que haga click aumente en 1, y si es impar que esté en verde, y si no transparente. Lo otro ya no sé que decirte porque de PHP no entiendo mucho la verdad.
Saludos (:

Muchas gracias por tomarte la molestia de ayudarme. Tu solución me gusta, aunque estoy pensando que también podria hacer que al hacer clcik en una butaca, que una variable ($verde) se ponga en 1 y al hacer click de nuevo se ponga en 0.

O incluso hacer una matriz de 3 valores: 0, 1 y 2.
0 = Transparente
1 = Verde
2 = Rojo

El mayor problema es el 2º, me tiene desmoralizado.

A, y otra cosa cronos, si me pudieras pasar un código para hacer lo que me comentas te lo agradaceria, ya que en clase nos enseñaron poco y nada de javascript y me vuelvo loco buscando codigo y sintaxis que no me suelen funcionar como deseo.

Saludos :D

_cronos · #4 (**permalink**) 23/05/2010, 11:47

Les tendrías que colocar el evento onclick a las celdas con las butacas. P. ej:
<td onclick='fondo()'></td>

Código Javascript:

Ver original<script type='text/javascript'>
 var fondo = 0; //incializas la variable fondo a 0
function fondo(){
 var fondo++; //cada vez que haganclick la aumentas
 if (fondo%2 != 0){ //si es impar, el resto no será cero al dividirlo entre 2
  this.style.backgroundColor = '#0000FF';//creo que el verde es así
 }else{
  this.style.backgroundColor = '#FFFFFF';//en blanco
 }
}
</script>

Lo de que ponerlo solo en 0 y en 1 también puedes hacerlo pero ya es más 'rebuscado' para mí. Lo que si que no entendí fue lo de 0, 1 y 2. ¿Para qué quieres 3 valores? Si hubiera 3 colores de fondo sí pero sino con 2 te vale.
Saludos (:

Adler · #5 (**permalink**) 23/05/2010, 14:02

Hola

Mira @Oscar1 justamente la semana pasada trabajé en algo bastante parecido a lo que te ocupa. Está casi que en bruto. Usa ASP, AJAX y XML, aunque se puede dejar unicamente en ASP y AJAX. La parte de ASP es fácilmente adaptable a PHP. Si te interesa te lo paso

Suerte

Oscar1 · #6 (**permalink**) 23/05/2010, 15:20

Cita:

Iniciado por Adler

Hola

Mira @Oscar1 justamente la semana pasada trabajé en algo bastante parecido a lo que te ocupa. Está casi que en bruto. Usa ASP, AJAX y XML, aunque se puede dejar unicamente en ASP y AJAX. La parte de ASP es fácilmente adaptable a PHP. Si te interesa te lo paso

Suerte

Buenas Adler, gracias por responderme.

Pues la verdad es que me interesaria mucho, aunque no se como funciona ni AJAX ni ASP ni XML :S. Pero puedo aprender, aunque tengo como mucho 3 dias para aprenderlos :(

Otra manera seria que sin entender al 100% pudiera adaptar tu trabajo al mio.

Dime que tengo que decirte o proporcionarte para que me lo pases.

Saludos :) y muchas gracias

Edito: y si me pudieras ayudar para adaptar la parte de ASP a PHP y asi dejarlo en PHP y AJAX te lo agradeceria eternamente

Oscar1 · #7 (**permalink**) 23/05/2010, 17:10

Cita:

Iniciado por _cronos

Les tendrías que colocar el evento onclick a las celdas con las butacas. P. ej:
<td onclick='fondo()'></td>

Código Javascript:

Ver original<script type='text/javascript'>
 var fondo = 0; //incializas la variable fondo a 0
function fondo(){
 var fondo++; //cada vez que haganclick la aumentas
 if (fondo&#37;2 != 0){ //si es impar, el resto no será cero al dividirlo entre 2
  this.style.backgroundColor = '#0000FF';//creo que el verde es así
 }else{
  this.style.backgroundColor = '#FFFFFF';//en blanco
 }
}
</script>

Lo de que ponerlo solo en 0 y en 1 también puedes hacerlo pero ya es más 'rebuscado' para mí. Lo que si que no entendí fue lo de 0, 1 y 2. ¿Para qué quieres 3 valores? Si hubiera 3 colores de fondo sí pero sino con 2 te vale.
Saludos (:

Lo de los 3 colores es porque quiero poner el verde para que se vea la eleccion del usuario (del asiento), el transparente no esta escogido (el asiento) y el rojo para asiento ocupado.

Bueno 2 cosas sobre el codigo anterior:

1a: no se si a mi no me funciona bien el PC o el codigo esta mal. Si pongo <td onclick='fondo()'></td> y en la funcion pongo this.sty.... no funciona. Tengo que hacerlo asi:

<td onclick='fondo(this)'></td>
function fondo(hola){
hola.style.backgroundColor = '#0000FF';//creo que el verde es así

2a: es muy sencillo el código por lo tanto me encanta, pero... no me sirve para nada, de hecho solo serviria en el caso de tener una sola celda. Porque vamos a poner un ejemplo con 2 celdas:

haces clic en la 1º celda y la variable fondo se incrementa en 1 (fondo = 1) por lo tanto pongamos que se pone de color blanco, si ahora pulsamos en la celda 2 (fondo = 2) la celda se pondria de color verde. Y yo no quiero que el hecho de que haya pulsado con anterioridad una celda me afecte a la siguiente elección.

De todas maneras muchas gracias porque sin tu código no hubiera sacado esto:

Código HTML:

Ver original<td id="celda" align="center" onclick="cambiarFondo(this);>

Código PHP:

Ver originalfunction cambiarFondo(celda){
                
    if (celda.style.backgroundColor == "LawnGreen"){
        celda.style.backgroundColor = "transparent"
    }else{
        celda.style.backgroundColor = "LawnGreen"
    }
  }

A ver si entra Adler y me ayuda jeje

Adler · #8 (**permalink**) 24/05/2010, 13:17

Hola

Como te comenté, está bastante en bruto

Cine.asp

Código Javascript:

Ver original<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
 
function captura_objeto(idnombre) {
    if (ns6) {
    return document.getElementById(idnombre);
    } else if (ie4) {
    return document.all[idnombre];
    } else if (ns4) {
    return document.layers[idnombre];
    } else{
    return null;
    }
}
 
 
 
function creaAjax(){
var ajax = false;
          if (window.XMLHttpRequest) { // Mozilla, Safari,...
        ajax = new XMLHttpRequest();
 
             if (ajax.overrideMimeType) {
                    ajax.overrideMimeType('text/xml');
             }
          } else if (window.ActiveXObject) { // IE
                 try {
                        ajax = new ActiveXObject("Msxml2.XMLHTTP");
                 } catch (e) {
                    try {
                           ajax = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                 }
          }
    return ajax;
}
 
 
 
 
 
function Evento(elemento,nomevento,funcion) {
      if (elemento.attachEvent) {
              var f=function() {
                funcion.call(elemento,window.event);
            }
            elemento.attachEvent('on'+nomevento,f);
            return true;
      } else if (elemento.addEventListener) {
              elemento.addEventListener(nomevento,funcion,false);
              return true;
        }else{
              return false;
    }
}
 
 
 
 
function init() {
Evento(captura_objeto('hr'), 'change', function(){MuestraPatio(document.getElementById('fch').options[document.getElementById('fch').selectedIndex].value, document.getElementById('hr').options[document.getElementById('hr').selectedIndex].value)});
 
var img = captura_objeto('patio').getElementsByTagName('IMG');
    for (i=0; i < img.length; i++) {
                Evento(captura_objeto(img[i].id), 'click', function(){MarcaButaca(this.id, document.getElementById('fch').options[document.getElementById('fch').selectedIndex].value, document.getElementById('hr').options[document.getElementById('hr').selectedIndex].value)});
    }
}
 
 
 
function MuestraPatio(fecha, hora) {
var objetosel = '';
var ajax = creaAjax();
ajax.onreadystatechange = function() {
 
        if (ajax==null){
        alert ('Tu navegador web no soporta AJAX!');
        return;
        }
 
     if (ajax.readyState==4){
                       if(ajax.status==200){    
            butacas = ajax.responseXML.documentElement.getElementsByTagName('butaca');
    
            for (i=0; i<butacas.length; i++) {
                objetosel = butacas[i].getElementsByTagName("reservada");
                          window.document['butaca_libre_'+ objetosel[0].firstChild.nodeValue].src = './cine_ocupado.bmp';
                window.document['butaca_libre_'+ objetosel[0].firstChild.nodeValue].id = 'butaca_ocupada_'+ objetosel[0].firstChild.nodeValue;
                  }
                       }
                       else if (ajax.status==404) {
 
                                    alert('La dirección no existe');
        } else {
                                    alert('Error: ' + ajax.status);
                                    }
                  }
}
    ajax.open('GET','cine_ajax.asp?butaca=&fecha='+fecha+'&hora='+hora,true);
             ajax.send(null);
}
 
 
 
function MarcaButaca(idbutaca, fecha, hora) {
// Butaca ocupada
    if (idbutaca.split('_')[1] == 'ocupada') {
        alert('La butaca ' + idbutaca.split('_')[2] +' ya esta reservada')
    } else {
var objetosel = '';
var ajax = creaAjax();
ajax.onreadystatechange = function() {
 
        if (ajax==null){
        alert ('Tu navegador web no soporta AJAX!');
        return;
        }
 
     if (ajax.readyState==4){
                       if(ajax.status==200){    
            butacas = ajax.responseXML.documentElement.getElementsByTagName('butaca');
    
            for (i=0; i<butacas.length; i++) {
                objetosel = butacas[i].getElementsByTagName('reservada');
                          window.document['butaca_libre_'+ objetosel[0].firstChild.nodeValue].src = './cine_ocupado.bmp';
                  }
                       }
                       else if (ajax.status==404) {
 
                                    alert('La dirección no existe');
        } else {
                                    alert('Error: ' + ajax.status);
                                    }
                  }
}
    
    ajax.open('GET','cine_ajax.asp?butaca='+idbutaca.split("_")[2]+'&fecha='+fecha+'&hora='+hora,true);
             ajax.send(null);
    }
}
 
 
window.onload = init;
</script>
</head>
<body>
Reservar Butacas en el Cine<br /><br />
fecha <select name="fch" id="fch">
<option value="">Selecciona Fecha</option>
<%
For i = 0 to 31
%>
<option value="<%=Date()+i%>"><%=Date()+i%></option>
<%
Next 'i
%>
</select>
<br /><br />
hora <select name="hr" id="hr">
<option value="">Selecciona Hora</option>
<option value="1">10:00</option>
<option value="2">11:00</option>
<option value="3">12:00</option>
<option value="4">13:00</option>
</select>
<br /><br /><br />
Patio de Butacas<br />
<div id="patio">
<%
For i = 1 to 25
If i = 1 or i = 6 or i = 11 or i = 16 or i = 21 Then
fila = (i / 5) +1
Response.Write Int(fila) & " "
End If
Response.Write "<img src=""./cine_libre.bmp"" id=""butaca_libre_"&i&""" name=""butaca_libre_"&i&""" alt=""Butaca: "&i&""" title=""Butaca: "&i&""" />&nbsp;"
If i = 5 or i = 10 or i = 15 or i = 20 or i = 25 Then
Response.Write "<br />"
End If
Next 'i
%>
</div>
</body>
</html>

Cine_Ajax.asp

Código ASP:

Ver original<%
Dim asiento, fch, hr, oConn, rs, SQL, registros, i
Dim objStream
Dim Butaca
Butaca = 2
 
asiento = Request.QueryString("butaca")
fch = Request.QueryString("fecha")
hr = Request.QueryString("hora")
 
IF asiento = "" Then
 
' Conexión a bd
SQL ="SELECT Fecha, Hora, Butaca FROM Cine WHERE Fecha = #"&fch&"# AND Hora = "&hr&" ORDER BY Butaca ASC" 
set rs = oConn.Execute(SQL)
 
If rs.eof = True or rs.bof = True then
Response.Write ""
Else
' Recogemos los registros
registros = rs.getrows()
rs.Close
Set rs = Nothing
oConn.Close
Set oConn = Nothing
End If
 
 
Response.Write "<?xml version=""1.0"" encoding=""UTF-8""?>"
%>
<anfiteatro>
<%
For i = 0 to UBound(registros,2)
%>
<butaca>
<reservada><%=registros(Butaca,i)%></reservada>
</butaca>
<%
Next 'i
%>
</anfiteatro>
<%
 
 
ELSE
 
'Conexión bd
SQL="INSERT INTO Cine (Fecha, Hora, Butaca) values (#"&fch&"#, "&hr&", "&asiento&")"
oConn.Execute(SQL)
 
Response.Write "<?xml version=""1.0"" encoding=""UTF-8""?>"
%>
<anfiteatro>
<butaca>
<reservada><%=asiento%></reservada>
</butaca>
</anfiteatro>
<%
END IF
%>

Como ves el ASP es fácilmente adaptable a PHP. Esta es básicamente la idea, ahora has de adaptarla a lo que te ocupa

Suerte

Oscar1 · #9 (**permalink**) 24/05/2010, 14:56

Hola,

Muchisimas gracias Adler. Te lo agradezco muchisimo.

A ver si cuando acabe el proyecto lo subo en algun servidor para que lo podais ver jejeje.
No es nada del otro mundo, pero para ser un trabajo de grado medio de informatica pues no esta mal.

Adler · #10 (**permalink**) 25/05/2010, 03:42

Cita:

Iniciado por Oscar1

Hola,

Muchisimas gracias Adler. Te lo agradezco muchisimo.

A ver si cuando acabe el proyecto lo subo en algun servidor para que lo podais ver jejeje.
No es nada del otro mundo, pero para ser un trabajo de grado medio de informatica pues no esta mal.

Estaré a la espera

Suerte

Oscar1 · #11 (**permalink**) 25/05/2010, 11:15

Hola de nuevo,

Como podria hacer una consulta de actualización (UPDATE) desde javascript?

Adler · #12 (**permalink**) 25/05/2010, 11:55

Hola

Cita:

Iniciado por Oscar1

Hola de nuevo,

Como podria hacer una consulta de actualización (UPDATE) desde javascript?

Javascript trabaja del lado del cliente por lo tanto no hay modo

Suerte

Oscar1 · #13 (**permalink**) 25/05/2010, 12:02

Cita:

Iniciado por Adler

Hola

Javascript trabaja del lado del cliente por lo tanto no hay modo

Suerte

Lo se, pero mira que he conseguido (no es directamente javascript pero hago un onclick xD):

Código PHP:

Ver originalecho '<td id="' . $row['idLocalitat'] . '" onclick="parent.location=\'prova.php\'" >

esto por un lado. entonces al hacer click en esa celda ira a prova.php:

Código PHP:

Ver original<?php
 
    session_start();
    
    // Conectarse a la BDD
        require("../funcions.php");
        $db = connecta();
    
    // Pasar variables de sesión
    $sala = $_SESSION['sala'];
    
    $sql = "UPDATE localitats
            SET estat = 'L'
            WHERE idSala = $sala AND ----------------------------
            ORDER BY fila DESC, columna DESC;";
    
    // Realizar la consulta a la BD:
    $resultat = mysql_query($sql) or die(mysql_error());
    
    //return to previous screen
    echo '<script type=""text/javascript"">history.go(-1);</script>';
 
    
    
?>

y me retorna a la misma página donde estaba, pero con una butaca marcada como asignada o ocupada.

Adler · #14 (**permalink**) 25/05/2010, 12:17

Hola

Sí, lo entiendo. Pero eso no es hacer un update usando javascript, sino una redirección usando javascript, por cierto es mas correcto parent.location.href.
De cualquier modo ¿es una pregunta o una afirmación? por que no me queda claro donde quieres llegar

Suerte

Oscar1 · #15 (**permalink**) 25/05/2010, 12:27

es una afirmación y tienes razón es una redirección, pero es que no tenia otra manera de hacerlo :S.

Ok, ahora incorporo el parent.location.href. que ya te digo, yo de javascript se lo básico fundamental.

Gracias de nuevo jeje