Problema javascript e database

di il
12 risposte

Problema javascript e database

Salve a tutti, io ho una pagina html dove creo dinamicamente con javascript dei bottoni che mi simulano dei posti a sedere di uno stadio. Ho anche un database dove registro quali posti sono già stati prenotati oppure sono occupati per altri motivi.
Ho difficoltà nel segnalare all'utente che accede al sito quali posti sono non prenotabili (magari colorandoli di rosso o mettendoci una X sopra e disabilitando il bottone). vorrei sapere se qualcuno di voi può aiutarmi: la mia idea era quella di controllare ogni volta che creo un nuovo bottone (lo faccio dinamicamente) se questo è occupato cioè se è gia presente nel database.

Ringrazio anticipatamente chi mi risponderà e porgo i miei saluti

12 Risposte

  • Re: Problema javascript e database

    marcomattei ha scritto:


    vorrei sapere se qualcuno di voi può aiutarmi: la mia idea era quella di controllare ogni volta che creo un nuovo bottone (lo faccio dinamicamente) se questo è occupato cioè se è gia presente nel database.
    Mi pare una idea piuttosto inefficiente. Io scaricherei prima la situazione di tutti i posti che sono disponibili, in un colpo solo, e poi andrei a creare i pulsanti verificando la situazione del posto corrispondente all'interno del pacchetto dei dati scaricati, senza però scaricare la singola situazione posto per posto.

    Un secondo controllo dovrà successivamente essere fatto per controllare che, nel frattempo, qualcuno non abbia occupato i posti scelti durante l'operazione.

    Ciao!
  • Re: Problema javascript e database

    Probabilmente mi sono spiegato male, la mia idea era quella di scaricare i posti occupati tramite una query e mano mano che creo i bottoni verificare se essi sono disponibili o occupati. Per il secondo controllo non è necessario in quanto non deve essere considerata anche questa situazione particolare.

    Lei Marco eventualmente mi potrebbe dare una mano?
  • Re: Problema javascript e database

    marcomattei ha scritto:


    la mia idea era quella di scaricare i posti occupati tramite una query e mano mano che creo i bottoni verificare se essi sono disponibili o occupati.
    Ok, ma qual è il problema specifico? Ancora non è stato chiarito.

    E' come dire "devo installare un citofono con pulsanti per suonare a ogni appartamento", senza aggiungere null'altro.
    Bene, quindi chiedo... dov'è la difficoltà? nel trovare il pannello? nel collegare i fili? nel scegliere quello giusto? nel collaudarlo?

  • Re: Problema javascript e database

    Il problema é collegare i fili praticamente ho la query fatta che mi dice quali posti sono occupati e anche lo script che mi crea tutti i bottoni/posto. Il mio problema é come fare comparire i bottoni occupati diversi dagli altri (rossi ad esempio)
  • Re: Problema javascript e database

    marcomattei ha scritto:


    Il problema é collegare i fili praticamente ho la query fatta che mi dice quali posti sono occupati e anche lo script che mi crea tutti i bottoni/posto. Il mio problema é come fare comparire i bottoni occupati diversi dagli altri (rossi ad esempio)
    E' sufficiente assegnare loro uno stile specifico (tramite l'attributo class) avendo precedentemente collegato alla pagina Web un foglio di stile CSS nel quale è definito l'aspetto per ciascuna delle classi supportate (es. "free" per libero, "taken" per occupato, "locked" per provvisoriamente bloccato e così via), definendo le proprietà di stile da applicare per ciascun elemento (ad esempio, uno sfondo diverso, verde, rosso o giallo, ricordando i colori del semaforo).
  • Re: Problema javascript e database

    Sisi questo lo so fare però il mio problema è come assegnare un determinato bottone alla classe “occupied”. Se può essere utile posso anche postare del codice con cui creo i bottoni dinamicamente.

    Chiedo scusa se non sono molto chiaro, ma è il mio primo post su questo forum...
  • Re: Problema javascript e database

    marcomattei ha scritto:


    Sisi questo lo so fare
    E allora dovresti essere più specifico. Ti avevo anche fatto la domanda apposta.

    marcomattei ha scritto:


    però il mio problema è come assegnare un determinato bottone alla classe “occupied”
    Se usi la libreria JQuery, puoi chiamare la funzione :
    $(button).addClass("occupied");
    Nella documentazione ci sono altrettanti metodi per togliere quella classe, o per commutarla semplicemente.

    Se invece usi il JavaScript classico, seguendo questo esempio puoi scrivere qualcosa come
    
    var button = document.getElementById("theButton");
    button.classList.add("occupied");
    

    marcomattei ha scritto:


    Se può essere utile posso anche postare del codice con cui creo i bottoni dinamicamente.
    Direi che è indispensabile (nelle sue parti rilevanti) almeno per capire se hai usato librerie o framework, cosa hai fatto finora, cosa manca, qual è il problema specifico, eccetera.

    Ciao!
  • Re: Problema javascript e database

     <?php
    	$info = $_POST['info'];
    	$errore = occupied_seats($info);
    	
    	function occupied_seats($info){
    		
    		$servername = "localhost";
    		$username_database = "root";
    		$password = "";
    		$dbname = "database_stadio";
    		// Create connection
    		$conn = new mysqli($servername, $username_database, $password, $dbname);
    		// Check connection
    		if ($conn->connect_error) {
    			die("Connection failed: " . $conn->connect_error);
    		}
    		$array = explode(",",$info);
    		print_r($array);
    
    		$sql = "select * from biglietto where Fila='".$array[0]."' and Posto='".$array[1]."' and IdPartita='".$array[2]."' and IdSettore='".$array[3]."'";
    		$result = $conn->query($sql);
    		$return="".$array[0].",".$array[1]."";
    		while ($row=$result->fetch_assoc()) {
    			$return= "".$return.";";
    		} 
    		echo $return;
    	}
    ?>
    questo è il codice con cui trovo i posti occupati dal database
    function costruisciposti(settore, idpartita){
    	
    	document.getElementById("scelta").innerHTML = "";
    	switch(settore){
    		case "Ovest":
    		var i=document.getElementById("scelta");
    		for(var r=1; r<9; r++)
    		{
    			for(var c=1;c<=r; c++)
    			{
    				posto = document.createElement("button");
    				posto.setAttribute("id", r+","+c);
    				posto.onclick = function() 
    				{
    					if(index>9){
    						alert("Numero massimo di posti prenotabili (5) raggiunto!");
    					}
    					else
    					{
    						var idposto = this.getAttribute("ID");
    						arr[index]=idposto;
    						if (postioccupati(idposto, idpartita, 3)==1){
    							posto.backgroundColor=red;
    							posto.disabled=true;
    						}
    						arr[index+1]=settore;
    						arr[index+2]=idpartita;
    						alert(arr[index]+arr[index+1]);
    						index+=3;
    						this.style.background="#D6B03F";
    					}
    				}
    				i.appendChild(posto);
    			}
    			var endl=document.createElement("br");
    			i.appendChild(endl);
    		}	
    		for(var r1=1; r1<9; r1++)
    		{
    			for(var c1=1;c1<=8; c1++)
    			{
    				posto = document.createElement("button");
    				posto.setAttribute("id", r+","+c1);
    				posto.onclick = function() 
    				{
    					if(index>9)
    						alert("Numero massimo di posti prenotabili (5) raggiunto!");
    					else
    					{
    						var idposto = this.getAttribute("ID");
    						arr[index]=idposto;
    						if (postioccupati(idposto, idpartita, 3)==1){
    							posto.backgroundColor=red;
    							posto.disabled=true;
    						}
    						arr[index+1]=settore;
    						arr[index+2]=idpartita;
    						alert(arr[index]+arr[index+1]);
    						index+=3;
    						this.style.background="#D6B03F";
    					}
    				}
    				i.appendChild(posto);
    			}
    			var endl=document.createElement("br");
    			i.appendChild(endl);
    			r++;
    		}
    		for(var r2=1; r2<9; r2++)
    		{
    			for(var c2=8;r2<c2; c2--)
    			{
    				posto = document.createElement("button");
    				posto.onclick = function() 
    				{
    					if(index>9)
    						alert("Numero massimo di posti prenotabili (5) raggiunto!");
    					else
    					{
    						var idposto = this.getAttribute("ID");
    						arr[index]=idposto;
    						if (postioccupati(idposto, idpartita, 3)==1){
    							posto.backgroundColor=red;
    							posto.disabled=true;
    						}
    						arr[index+1]=settore;
    						arr[index+2]=idpartita;
    						alert(arr[index]+arr[index+1]);
    						index+=3;
    						this.style.background="#D6B03F";
    					}
    				}
    				posto.setAttribute("id", r+","+(9-c2));
    				i.appendChild(posto);
    			}
    			var endl=document.createElement("br");
    			i.appendChild(endl);
    			r++
    		}
    		var elem = document.getElementById("scelta");
    		elem.scrollIntoView();
    		break;
    e questo è un pezzo della funzione che mi crea i posti (avrò poi gli altri casi per gli altri settori)
  • Re: Problema javascript e database

    Come sempre mi scuso anticipatamente se ci sono degli errori nel modo in cui ho postato le cose o se manca qualcosa e ringrazio anticipatamente chi mi risponderà
  • Re: Problema javascript e database

    marcomattei ha scritto:


    Come sempre mi scuso anticipatamente se ci sono degli errori nel modo in cui ho postato le cose o se manca qualcosa e ringrazio anticipatamente chi mi risponderà
    Ok, ma qual è il problema attuale?

    Io ti ho già indicato dei suggerimenti, tu hai postato il codice precedentemente mancante, ma come hai proseguito i tuoi tentativi?
    Cosa sei riuscito a fare (o non fare)?
  • Re: Problema javascript e database

    Non riesco a collegare le due parti cioè io tramite un clic su un settore dello stadio faccio partire il codice js che mi crea i posti però vorrei che mentre crea i posti controlli anche quali sono occupati e poi gli applicherei una classe per colorarli di rosso ad esempio
  • Re: Problema javascript e database

    marcomattei ha scritto:


    vorrei che mentre crea i posti controlli anche quali sono occupati e poi gli applicherei una classe per colorarli di rosso ad esempio
    La situazione dei posti dovresti averla all'interno di un array o una matrice, con (ipotizzo) un valore diverso in base allo stato del singolo posto, come detto già in un precedente post, ad esempio "occupato", "libero", ecc.

    Presumo che questa struttura venga aggiornata nel momento in cui si ricevono dal database le informazioni relativo allo stato attuale dei posti.

    Per identificare lo stato del singolo posto, in fase di creazione del pulsante relativo basta controllare nella struttura dati qual è il valore presente nella cella che corrisponde a quel posto, in modo da assegnare la classe CSS specifica, che ne regola la visualizzazione corretta.

    Come aggiungere una classe a un elemento te l'ho già indicato in una risposta precedente.

    Il codice che hai postato mi risulta poco leggibile e un pochino farraginoso: io tenderei a separare il più possibile la parte logica (es. struttura dati con lo stato dei posti, funzioni che agiscono su tali posti per cambiarne lo stato, funzioni che recuperano lo stato dalla struttura, ecc.) dalla parte della UI, ossia quella delle funzioni che prendono lo stato attuale dei posti e la riversano sugli elementi della pagina tramite assegnazione di classi CSS opportune, le quali devono essere definite in un file CSS separato dove viene indicato, per ogni stato possibile del posto, come questo deve apparire (colore di sfondo, eventuale immagine, ecc.).

    Le due parti, logica e UI, devono parlarsi a vicenda chiamando l'una metodi dell'altra quando l'utente fa un clic, ad esempio, oppure quando qualcosa varia nella struttura dati a fronte di un cambiamento, proveniente dal DB remoto o dall'applicazione di un'azione da parte dell'utente (quindi una risposta a un evento) per poter aggiornare la rappresentazione. Riassumendo con un motto, "Divide et impera".

    Non saprei cosa altro aggiungere, poiché tu dici che la difficoltà è "collegare le due parti", una affermazione che in pratica sottende lo sviluppo dell'intera soluzione: se hai una difficoltà specifica nell'uso di una API è un discorso, se invece è necessario scrivere tutto il codice per far funzionare il sistema è un altro discorso.
Devi accedere o registrarti per scrivere nel forum
12 risposte