HTML CSS AND JAVA SCRIPT CODE FOR ONLINE TICKET BOOKING SYSTEM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dhorbahara Tours and Travels - Vehicle Booking System</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            color: #333;
        }
        header {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            text-align: center;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        header::before {
            content: '🚗';
            font-size: 40px;
            margin-right: 10px;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .form-group input[type="button"], .form-group input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
            padding: 10px;
            border-radius: 5px;
        }
        .form-group input[type="button"]:hover, .form-group input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .seat-map {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .seat {
            width: 30px;
            height: 30px;
            margin: 5px;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
            background-color: #28a745;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .seat.selected {
            background-color: #ffc107;
        }
        .seat.booked {
            background-color: #dc3545;
            cursor: not-allowed;
        }
        .seat:hover:not(.booked) {
            background-color: #17a2b8;
        }
        .booking-details {
            margin-top: 20px;
        }
        .actions {
            display: none;
            margin-top: 20px;
        }
        .actions button {
            margin-right: 10px;
        }
        .seat-map {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
            gap: 5px;
        }
        .seat {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #6c757d;
        }
        .seat.booked {
            background-color: #dc3545;
        }
        .seat.selected {
            background-color: #ffc107;
        }
        .seat:hover:not(.booked) {
            background-color: #17a2b8;
        }
        .header {
            text-align: center;
            margin: 20px 0;
        }
        .header h1 {
            margin: 0;
        }
        .header p {
            font-size: 18px;
        }
        .print-content {
            display: none;
        }
        .print-content p {
            margin: 0;
            font-size: 16px;
        }
        .print-content h1 {
            margin: 0;
            font-size: 24px;
        }
        .company-info {
            margin-top: 20px;
            text-align: center;
        }
        .company-info p {
            margin: 5px 0;
            font-size: 16px;
        }
        .error {
            color: #dc3545;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <header>
        Dhorbahara Tours and Travels
    </header>
    <div class="container">
        <div class="form-group header">
            <h1>Vehicle Booking System</h1>
            <p>Contact No: 98271062244</p>
        </div>
        <div class="form-group">
            <label for="username">Name:</label>
            <input type="text" id="username" placeholder="Enter your name">
            <div id="usernameError" class="error"></div>
        </div>
        <div class="form-group">
            <label for="mobile">Mobile Number:</label>
            <input type="text" id="mobile" placeholder="Enter your mobile number">
            <div id="mobileError" class="error"></div>
        </div>
        <div class="form-group">
            <label for="vehicle">Vehicle Type:</label>
            <select id="vehicle">
                <option value="Bus">Bus</option>
                <option value="Car">Car</option>
                <option value="Bike">Bike</option>
            </select>
        </div>
        <div class="form-group">
            <label for="vehicleNo">Vehicle Number:</label>
            <input type="text" id="vehicleNo" placeholder="Enter vehicle number (4 digits)">
            <div id="vehicleNoError" class="error"></div>
        </div>
        <div class="form-group">
            <label for="startPlace">Starting Place:</label>
            <select id="startPlace">
                <option value="Kathmandu">Kathmandu</option>
                <option value="Pokhara">Pokhara</option>
                <option value="Biratnagar">Biratnagar</option>
                <option value="Lalitpur">Lalitpur</option>
                <option value="Bhairahawa">Bhairahawa</option>
            </select>
        </div>
        <div class="form-group">
            <label for="place">Destination Place:</label>
            <input type="text" id="place" placeholder="Enter destination place">
        </div>
        <div class="form-group">
            <label for="date">Date:</label>
            <input type="date" id="date">
        </div>
        <div class="form-group">
            <label for="departureTime">Departure Time:</label>
            <input type="time" id="departureTime">
        </div>
        <div class="form-group">
            <label for="estimatedTime">Estimated Travel Time (hours):</label>
            <input type="number" id="estimatedTime" step="0.1" min="0">
        </div>
        <div class="form-group">
            <label for="type">Vehicle Type:</label>
            <select id="type">
                <option value="Normal">Normal</option>
                <option value="AC">AC</option>
                <option value="Deluxe">Deluxe</option>
                <option value="Luxury">Luxury</option>
            </select>
        </div>
        <div class="form-group">
            <label for="age">Passenger Age:</label>
            <input type="number" id="age" min="0">
        </div>
        <div class="form-group">
            <input type="button" value="Select Seats" onclick="selectSeats()">
        </div>
        <div id="seatSelection" class="form-group" style="display: none;">
            <label for="seats">Choose Your Seats:</label>
            <div id="seatMap" class="seat-map"></div>
        </div>
        <div class="form-group">
            <input type="button" value="Confirm Booking" onclick="confirmBooking()">
        </div>
        <div id="bookingDetails" class="booking-details"></div>
        <div id="actions" class="actions">
            <input type="button" value="Print Ticket" onclick="printBooking()">
            <input type="button" value="Download Ticket" onclick="downloadBooking()">
        </div>
    </div>

    <script>
        const seatData = {
            Bus: Array(32).fill(false),
            Car: Array(13).fill(false),
            Bike: Array(1).fill(false)
        };

        function calculateTotalPrice(estimatedTime, vehicle, type, seatCount) {
            const rates = { Bus: 100, Car: 150, Bike: 200 };
            const baseRate = rates[vehicle];
            const vehicleTypes = { Normal: 1, AC: 1.1, Deluxe: 1.2, Luxury: 1.3 };
            let totalPrice = baseRate * estimatedTime * seatCount * vehicleTypes[type];

            const age = parseInt(document.getElementById('age').value, 10);
            if (age < 15 || age > 60) {
                totalPrice *= 0.9; // 10% discount
            }
            return totalPrice.toFixed(2);
        }

        function updateBookingDetails() {
            const vehicle = document.getElementById('vehicle').value;
            const estimatedTime = parseFloat(document.getElementById('estimatedTime').value);
            const departureTime = document.getElementById('departureTime').value;
            const vehicleNo = document.getElementById('vehicleNo').value;
            const age = parseInt(document.getElementById('age').value, 10);
            const type = document.getElementById('type').value;
            const seatCount = document.querySelectorAll('.seat.selected').length;
            const distance = estimatedTime * (vehicle === 'Car' ? 60 : vehicle === 'Bus' ? 50 : 70);
            const arrivalTime = new Date(`${new Date().toDateString()} ${departureTime}`);
            arrivalTime.setHours(arrivalTime.getHours() + estimatedTime);

            const totalPrice = calculateTotalPrice(estimatedTime, vehicle, type, seatCount);

            document.getElementById('bookingDetails').innerHTML = `
                <h2>Booking Confirmation</h2>
                <p><strong>Vehicle:</strong> ${vehicle}</p>
                <p><strong>Vehicle Number:</strong> ${vehicleNo}</p>
                <p><strong>Starting Place:</strong> ${document.getElementById('startPlace').value}</p>
                <p><strong>Destination Place:</strong> ${document.getElementById('place').value}</p>
                <p><strong>Date:</strong> ${document.getElementById('date').value}</p>
                <p><strong>Departure Time:</strong> ${departureTime}</p>
                <p><strong>Estimated Travel Time:</strong> ${estimatedTime} hours</p>
                <p><strong>Estimated Distance:</strong> ${distance} km</p>
                <p><strong>Arrival Time:</strong> ${arrivalTime.toLocaleString()}</p>
                <p><strong>Type:</strong> ${type}</p>
                <p><strong>Seats Chosen:</strong> ${document.querySelectorAll('.seat.selected').length}</p>
                <p><strong>Total Price:</strong> Rs ${totalPrice}</p>
                <p><strong>Discount:</strong> ${age < 15 || age > 60 ? '10%' : '0%'}</p>
                <p>Thank you for choosing us!</p>
                <div class="company-info">
                    <p>Dhorbahara Tours and Travels</p>
                    <p>Kathmandu, Nepal</p>
                    <p>Contact No: 98271062244</p>
                    <p>Email: dhorbaharatours88@gmail.com</p>
                </div>
            `;

            document.getElementById('actions').style.display = 'block';
        }

        function selectSeats() {
            const vehicle = document.getElementById('vehicle').value;
            const seatCount = seatData[vehicle].length;
            const seatMap = document.getElementById('seatMap');
            seatMap.innerHTML = '';

            for (let i = 0; i < seatCount; i++) {
                const seat = document.createElement('div');
                seat.className = `seat ${seatData[vehicle][i] ? 'booked' : ''}`;
                seat.textContent = i + 1;
                seat.onclick = function() {
                    if (!seat.classList.contains('booked')) {
                        seat.classList.toggle('selected');
                    }
                };
                seatMap.appendChild(seat);
            }

            document.getElementById('seatSelection').style.display = 'block';
        }

        function confirmBooking() {
            const username = document.getElementById('username').value;
            const mobile = document.getElementById('mobile').value;
            const vehicleNo = document.getElementById('vehicleNo').value;

            if (!username || !/^[a-zA-Z\s]+$/.test(username)) {
                document.getElementById('usernameError').textContent = 'Please enter a valid name.';
                return;
            } else {
                document.getElementById('usernameError').textContent = '';
            }

            if (!mobile || !/^\d{10}$/.test(mobile)) {
                document.getElementById('mobileError').textContent = 'Please enter a valid 10-digit mobile number.';
                return;
            } else {
                document.getElementById('mobileError').textContent = '';
            }

            if (!vehicleNo || !/^\d{4}$/.test(vehicleNo)) {
                document.getElementById('vehicleNoError').textContent = 'Please enter a valid 4-digit vehicle number.';
                return;
            } else {
                document.getElementById('vehicleNoError').textContent = '';
            }

            updateBookingDetails();
        }

        function printBooking() {
            const printWindow = window.open('', '', 'height=600,width=800');
            printWindow.document.write('<html><head><title>Print Ticket</title>');
            printWindow.document.write('<style>body {font-family: Arial, sans-serif;} .container {width: 100%; margin: 0; padding: 20px;} .company-info p {margin: 5px 0; font-size: 16px;}</style>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(document.querySelector('.booking-details').innerHTML);
            printWindow.document.write('<div class="company-info">');
            printWindow.document.write('<p>Dhorbahara Tours and Travels</p>');
            printWindow.document.write('<p>Kathmandu, Nepal</p>');
            printWindow.document.write('<p>Contact No: 98271062244</p>');
            printWindow.document.write('<p>Email: dhorbaharatours88@gmail.com</p>');
            printWindow.document.write('</div>');
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        }

        function downloadBooking() {
            const content = document.querySelector('.booking-details').innerHTML;
            const blob = new Blob([content], {type: 'text/html'});
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'booking_confirmation.html';
            link.click();
        }
    </script>
</body>
</html>
HTML

w they have reshaped consumer behavior and the broader industry.

History of Online Ticket Booking Systems

Early Developments

The concept of booking tickets online began to take shape in the late 20th century, driven by the rapid expansion of the internet and advances in technology. Here are some key milestones in the development of online ticket booking systems:

  • 1980s – Emergence of Online Travel Agencies (OTAs): The idea of booking travel online started to gain traction with the rise of early online travel agencies. Companies like Travelocity and Expedia pioneered the concept, allowing users to search for and book flights, hotels, and rental cars from their computers.
  • 1990s – Growth of E-commerce Platforms: The 1990s saw significant growth in e-commerce platforms, including those focused on ticket booking. The launch of websites like Ticketmaster revolutionized the event ticketing industry, making it possible to purchase concert, theater, and sports tickets online.
  • 2000s – Expansion and Innovation: The 2000s marked a period of rapid expansion and innovation in online ticket booking systems. Mobile technology began to play a significant role, with the introduction of mobile apps for ticket booking, and the integration of real-time updates and electronic tickets.

How Online Ticket Booking Systems Work

Online ticket booking systems operate through a combination of software, databases, and payment processing technologies. Here’s a step-by-step overview of how these systems work:

  1. User Interface (UI): The user interacts with the booking system through a website or mobile app. The UI provides search options, filters, and booking forms to help users find and select the desired tickets.
  2. Search and Selection: Users enter their preferences (e.g., travel dates, destination, event type) into the search form. The system queries its database and presents available options based on the user’s criteria.
  3. Availability Check: The system checks the availability of tickets in real-time, ensuring that the options presented are current and accurate. This involves interfacing with various inventory systems to retrieve up-to-date information.
  4. Booking and Payment: Once users select their tickets, they proceed to the booking page, where they enter personal details and payment information. The system processes the payment through a secure gateway and confirms the booking.
  5. Confirmation and Delivery: After successful payment, the system generates a booking confirmation and delivers it to the user via email or SMS. The confirmation typically includes a ticket or reservation number, which can be used for check-in or entry.

Benefits of Online Ticket Booking Systems

Online ticket booking systems offer numerous benefits to both consumers and service providers:

1. Convenience

The primary advantage of online ticket booking systems is convenience. Users can search for, book, and pay for tickets from the comfort of their homes or on the go using mobile devices. This eliminates the need to visit physical ticket offices or wait in long queues.

2. 24/7 Availability

Online booking systems are available 24/7, allowing users to book tickets at any time of day or night. This flexibility is especially valuable for international travelers and those with busy schedules.

3. Real-Time Updates

Online ticket booking systems provide real-time updates on ticket availability, prices, and booking status. Users can make informed decisions based on the latest information, reducing the risk of overbooking or missing out on desired options.

4. Comparison and Personalization

Online platforms often offer tools for comparing prices and options across different providers. Users can also receive personalized recommendations based on their preferences and previous bookings, enhancing the overall booking experience.

5. Secure Transactions

Modern online ticket booking systems use advanced encryption and security measures to protect users’ personal and financial information. Secure payment gateways ensure that transactions are processed safely and efficiently.

Challenges Faced by Online Ticket Booking Systems

While online ticket booking systems offer many benefits, they also face several challenges:

1. Technical Issues

Technical glitches and downtime can disrupt the booking process and affect user experience. Ensuring system reliability and uptime is critical for maintaining customer satisfaction.

2. Fraud and Security Concerns

Online ticket booking systems are vulnerable to fraud and cyber-attacks. Protecting against phishing, identity theft, and other security threats requires continuous monitoring and robust security protocols.

3. Customer Service

Providing effective customer service can be challenging, especially for large-scale ticketing platforms with high transaction volumes. Addressing customer queries, handling cancellations, and managing refunds require efficient processes and responsive support teams.

4. Integration with Third-Party Systems

Online ticket booking systems often need to integrate with third-party systems, such as airlines, event organizers, and payment processors. Ensuring seamless integration and data exchange can be complex and requires careful coordination.

5. Accessibility and Usability

Ensuring that online ticket booking systems are accessible and user-friendly for all individuals, including those with disabilities, is essential. Designing intuitive interfaces and providing clear instructions can enhance usability and inclusivity.

The Future of Online Ticket Booking Systems

The future of online ticket booking systems is likely to be shaped by several emerging trends and technological advancements:

1. Artificial Intelligence and Machine Learning

Artificial intelligence (AI) and machine learning are expected to play a significant role in the future of online ticket booking. AI-driven algorithms can provide personalized recommendations, optimize pricing, and enhance customer service through chatbots and virtual assistants.

2. Blockchain Technology

Blockchain technology has the potential to revolutionize ticketing by providing a secure and transparent way to manage ticket transactions. Blockchain can help prevent fraud, reduce counterfeit tickets, and ensure the authenticity of transactions.

3. Enhanced Mobile Integration

As mobile technology continues to advance, online ticket booking systems will likely offer even more seamless integration with mobile devices. Features such as mobile ticketing, real-time notifications, and location-based services will enhance the user experience.

4. Virtual and Augmented Reality

Virtual reality (VR) and augmented reality (AR) technologies may transform the way users experience and book tickets. VR and AR can provide immersive previews of events, venues, and travel destinations, helping users make more informed decisions.

5. Sustainable Practices

There is a growing focus on sustainability in the travel and entertainment industries. Online ticket booking systems may adopt eco-friendly practices, such as digital-only tickets and carbon offset options, to align with environmental goals.

Conclusion

Online ticket booking systems have fundamentally changed the way we purchase tickets for travel, entertainment, and other activities. From their early beginnings in the 1980s to their current state of advanced technology and user-centric design, these systems have continually evolved to meet the needs of modern consumers.

The benefits of online ticket booking are clear: convenience, 24/7 availability, real-time updates, and secure transactions. However, challenges such as technical issues, security concerns, and customer service need to be addressed to ensure a seamless experience.

Looking ahead, the future of online ticket booking systems is filled with exciting possibilities, including AI-driven personalization, blockchain security, and enhanced mobile integration. As technology continues to advance, these systems will play an increasingly important role in shaping the way we interact with the world.

For more information on online ticket booking systems and to explore various booking options, visit these travel websites, event ticket platforms, and train booking services.

In summary, online ticket booking systems have transformed the ticketing landscape, offering unparalleled convenience and efficiency. As technology continues to evolve, these systems will continue to enhance our ability to manage and enjoy our travel and entertainment experiences.

Leave a Reply

Your email address will not be published. Required fields are marked *

Resize text
Scroll to Top