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

<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";
		    output += "<td class=\"book2\">"+seats[row][col]+ "</td>\n";
    output += "</tr>";
	output += "</tbody>\n";
	output += "</table>\n";

	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");
    else {
		alert("The seat was booked by somebody else!");



                <p><img src="cinemaLogo.jpg" alt="cinemaLogo" width="749" height="356" /></p>
<p>Booking </p>
<p>Date : 
  <select name="col" size="1" id="col2">
<table width="943" height="1174" border="1">
    <th width="326" height="42" scope="col">Movies</th>
    <th width="601" scope="col">Time</th>
    <th scope="row"><img src="spiderman.jpg" width="270" height="370" alt="spiderman" /></th>
    <th scope="row"><img src="brave.jpg" width="250" height="370" alt="brave" /></th>
    <th scope="row"><img src="vampire.jpg" width="250" height="368" alt="vampire" /></th>
<form id="booking">
	<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 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>
  <div><input type="button" onclick="book()" value="Book"></div>

<div id="map">
  <table width="487" height="39" border="1" align="center">
      <th width="333" height="33" scope="col">SCREEN</th>
  <table width="487" border="1" align="center">
<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>

<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>
<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>
<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>
<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>
<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>
<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>
<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>
  <table width="487" height="39" border="1" align="center">
      <th width="336" height="33" scope="col">ENTERANCE</th>

<input name="Reset" type="reset" onclick="showSeats()" value="Show Seats" />
6 Years
Discussion Span
Last Post by 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!


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


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

Edited by drjohn


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


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. =)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.