Member Avatar for no183

Hi all, as titled i need to create a cinema ticketing system which i am very headache to it. Here are some problem i faced, actually i need to create a very complex one as the webpage
1) Need to able to select the number of ticket required before enter to the seat selecting page (so that it can select number of seat based on the number of ticket enter - i only managed to do 1 ticket at the time.
2) After selecting the ticket and press the "book" button, it will come to a page where it show the seat status (blue for booked, red for unbooked) instead of this, i want the seat number to be shown as well in this page, any idea?
3) Besides, u can see that the date is only for today, how bout if i want to make it for multiple date?

I alraedy attached the html. Hope u guys can help me, thanks :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
  .book {background-color:blue; text-align:center}
  .unbook {background-color:red; text-align:center}
  .book2 {background-color:blue; color:blue}
  .unbook2 {background-color:red; color:red}
  body {
	background-color: #999;
}
</style>
</head>

<script type="text/javascript">
<!--
   //create 8 column
   seats = new Array(8);
   
function initArray(seat) {
	for (var row=0; row<seat.length; row++) {  //initialise the row
		seat[row] = new Array(8);
    }
	for (var row =0; row<seat.length; row++) {
        for (var col=0; col<seat[row].length; col++) {
			seat[row][col] = "Available";
		}	
	}       
}

 
function showSeats() {
	var elem = document.getElementById("map");
	var output="";
    
	output += "<table border='1'>\n";
	output += "<tbody>\n";

	for (var row =0; row<seats.length; row++) {
		output += "<tr>\n";
		for (var col=0; col<seats[row].length; col++){
			if (seats[row][col]=="Available")
			output += "<td class=\"unbook2\">"+seats[row][col]+ "</td>\n";
                else
		    output += "<td class=\"book2\">"+seats[row][col]+ "</td>\n";
		}	
    output += "</tr>";
	}	
	
	output += "</tbody>\n";
	output += "</table>\n";

	//alert(output);
	elem.innerHTML = output;
}
	 
	 
function book() {
	var row = document.getElementById("row").selectedIndex;
	var col = document.getElementById("col").selectedIndex;
	var r = document.getElementById("row").options;
	var c = document.getElementById("col").options;

	if (seats[row][col]=="Available") {
        seats[row][col] = "Booked";
	    alert("Seat successfully booked");
	    showSeats();
	}
    else {
		alert("The seat was booked by somebody else!");
	}          
}


	initArray(seats);

//-->
</script>

</head><body>
                <p><img src="cinemaLogo.jpg" alt="cinemaLogo" width="749" height="356" /></p>
             
<p>Booking </p>
<p>Date : 
  
  <select name="col" size="1" id="col2">
    <option>Today</option>
  </select>
</p>
<table width="943" height="1174" border="1">
  <tr>
    <th width="326" height="42" scope="col">Movies</th>
    <th width="601" scope="col">Time</th>
  </tr>
  <tr>
    <th scope="row"><img src="spiderman.jpg" width="270" height="370" alt="spiderman" /></th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row"><img src="brave.jpg" width="250" height="370" alt="brave" /></th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row"><img src="vampire.jpg" width="250" height="368" alt="vampire" /></th>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p><br>
  
</p>
<form id="booking">
  <label>
      Row 
	<select id="row">
	  <option value="1" selected="">A</option>
	  <option value="2">B</option>
	  <option value="3">C</option>
	  <option value="4">D</option>
	  <option value="5">E</option>
      <option value="6">F</option>
      <option value="7">G</option>
      <option value="8">H</option>
	</select>
  </label>


  <label>
      Column 
	<select id="col">
	  <option value="1" selected="">1</option>
	  <option value="2">2</option>
	  <option value="3">3</option>
	  <option value="4">4</option>
	  <option value="5">5</option>
	  <option value="6">6</option>
	  <option value="7">7</option>
	  <option value="8">8</option>
	</select>
  </label>
  
  <div><input type="button" onclick="book()" value="Book"></div>
</form>



<hr>
<div id="map">
  <table width="487" height="39" border="1" align="center">
    <tr>
      <th width="333" height="33" scope="col">SCREEN</th>
    </tr>
  </table>
  <table width="487" border="1" align="center">
  <tbody>
<tr>
<th width="8" class="unblock">A</th>
<td width="8" class="unbook">A1</td>
<td width="8" class="unbook">A2</td>
<td width="8" class="unbook">A3</td>
<td width="8" class="unbook">A4</td>
<td width="8" class="unbook">A5</td>
<td width="8" class="unbook">A6</td>
<td width="8" class="unbook">A7</td>
<td width="8" class="unbook">A8</td>

</tr><tr>
<th width="8" class="unblock">B</th>
<td width="8" class="unbook">B1</td>
<td width="8" class="unbook">B2</td>
<td width="8" class="unbook">B3</td>
<td width="8" class="unbook">B4</td>
<td width="8" class="unbook">B5</td>
<td width="8" class="unbook">B6</td>
<td width="8" class="unbook">B7</td>
<td width="8" class="unbook">B8</td>
</tr><tr>
<th width="8" class="unblock">C</th>
<td width="8" class="unbook">C1</td>
<td width="8" class="unbook">C2</td>
<td width="8" class="unbook">C3</td>
<td width="8" class="unbook">C4</td>
<td width="8" class="unbook">C5</td>
<td width="8" class="unbook">C6</td>
<td width="8" class="unbook">C7</td>
<td width="8" class="unbook">C8</td>
</tr><tr>
<th width="8" class="unblock">D</th>
<td width="8" class="unbook">D1</td>
<td width="8" class="unbook">D2</td>
<td width="8" class="unbook">D3</td>
<td width="8" class="unbook">D4</td>
<td width="8" class="unbook">D5</td>
<td width="8" class="unbook">D6</td>
<td width="8" class="unbook">D7</td>
<td width="8" class="unbook">D8</td>
</tr><tr>
<th width="8" class="unblock">E</th>
<td width="8" class="unbook">E1</td>
<td width="8" class="unbook">E2</td>
<td width="8" class="unbook">E3</td>
<td width="8" class="unbook">E4</td>
<td width="8" class="unbook">E5</td>
<td width="8" class="unbook">E6</td>
<td width="8" class="unbook">E7</td>
<td width="8" class="unbook">E8</td>
</tr><tr>
<th width="8" class="unblock">F</th>
<td width="8" class="unbook">F1</td>
<td width="8" class="unbook">F2</td>
<td width="8" class="unbook">F3</td>
<td width="8" class="unbook">F4</td>
<td width="8" class="unbook">F5</td>
<td width="8" class="unbook">F6</td>
<td width="8" class="unbook">F7</td>
<td width="8" class="unbook">F8</td>
</tr><tr>
<th width="8" class="unblock">G</th>
<td width="8" class="unbook">G1</td>
<td width="8" class="unbook">G2</td>
<td width="8" class="unbook">G3</td>
<td width="8" class="unbook">G4</td>
<td width="8" class="unbook">G5</td>
<td width="8" class="unbook">G6</td>
<td width="8" class="unbook">G7</td>
<td width="8" class="unbook">G8</td>
</tr><tr>
</tr><tr>
<th width="8" class="unblock">H</th>
<td width="8" class="unbook">H1</td>
<td width="8" class="unbook">H2</td>
<td width="8" class="unbook">H3</td>
<td width="8" class="unbook">H4</td>
<td width="8" class="unbook">H5</td>
<td width="8" class="unbook">H6</td>
<td width="8" class="unbook">H7</td>
<td width="8" class="unbook">H8</td>
</tr></tbody>
</table>
  <table width="487" height="39" border="1" align="center">
    <tr>
      <th width="336" height="33" scope="col">ENTERANCE</th>
    </tr>
  </table>
</div>

<br>
<input name="Reset" type="reset" onclick="showSeats()" value="Show Seats" />
</html>
  • 3 Contributors
  • 6 Replies
  • 120 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by php_noob

Dani AI

Generated

A practical way to tackle this is to split the system into three clear layers: front-end state and UX, an API that serves seat layouts and availability, and a small database to store showtimes, seats and bookings. has the interface idea; is correct that availability becomes a database concern; is right that a single static HTML file won’t be enough for a robust solution.

Front-end notes: implement a two-step flow — select ticket count and ticket type, then open the seat map for a specific showtime. Persist the ticket count between pages via session (server-side), a short-lived token, or localStorage. Render each seat element with a visible label and a data attribute (for example data-seat-id). Client logic should toggle selection, show the seat number inside the UI element, and refuse additional selections once the chosen ticket count is reached. Keep all status colors tied to semantic classes like available, held, booked so styling and accessibility are simple to manage.

Server and DB guidance: model auditoriums, seats, shows (date/time), and bookings. Use a UNIQUE constraint on (show_id, seat_id) to prevent double-booking. Use a “hold” state with reserved_until for short reservations while the buyer completes payment, and expire holds with a background job. Final booking must verify availability server-side inside a transaction (or with INSERT-and-check) to avoid race conditions.

Example table sketch:

CREATE TABLE shows (id INT PRIMARY KEY, auditorium_id INT, start_time DATETIME);
CREATE TABLE seats (id INT PRIMARY KEY, auditorium_id INT, row CHAR(2), number INT);
CREATE TABLE bookings (
  id INT PRIMARY KEY, show_id INT, seat_id INT,
  status ENUM('held','confirmed','cancelled'),
  reserved_until DATETIME, created_at DATETIME,
  UNIQUE (show_id,seat_id)
);

Multi-date support is simply different show records; present a date/showtime picker, fetch availability for the chosen show_id, and update the map. For live updates, use short polling or WebSocket broadcasts so two users see changes quickly. A good incremental path: build a front-end prototype with fixed JSON, then add the API and DB, finally add reservation expiry and concurrency testing.

Recommended Answers

All 6 Replies

Member Avatar for no183

Anyone? please

Member Avatar for php_noob

Do you need some help in designing? or in code? Its really complex to discuss it here.
Maybe we could collaborate.... PM me!

Member Avatar for no183

i think designing is ok right because i can simply edit it in myself, the tough part is the javascript

Member Avatar for drjohn

this is a database problem.
how good are your mysql / php skills

Edited by drjohn
Member Avatar for no183

n00b , frankly speaking, i never did that before :(

Member Avatar for php_noob

I see.... but you see it's a process... it's not that simple as "here is I want to see" boom.... result. drjohn has a point.
there is a database involved. The HTML you attached is not that helping also. it's too plain to decide where you will be going. =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.