Nhom

Notes

🚢 Transport Templates - Detailed Analysis & Use Cases

1. transport_home.html - Transportation Hub Dashboard

Purpose: Central navigation hub for all transportation services

Key Features:

• Statistics Dashboard: Real-time infrastructure counts
  • Active airports, airlines, stations, cities
  • Visual metrics cards with color-coded statistics
• Service Navigation Cards: Four main transport categories
  • ✈️ Flights: Primary air travel search
  • 🚌 Local Transit: Ground transportation (bus, train, ferry, metro)
  • 🚗 Car Rental: Future service (currently "Coming Soon")
  • 🚕 Taxi Services: Rideshare integration (future)
• Popular Routes Section: Pre-defined route suggestions
  • Vietnam Domestic: SGN→HAN, SGN→DAD, HAN→DAD
  • International: SGN→BKK, SGN→SIN, SGN→NRT
• Quick Stats Footer: Infrastructure overview with icons

Business Use:

• Landing Page: First point of contact for transportation services
• User Guidance: Helps users choose appropriate transportation mode
• Marketing Tool: Showcases available routes and services
• Analytics Dashboard: Shows system capacity and coverage

Template Structure:

{% extends 'blog/base.html' %}

{% load i18n %}

<!-- Multilingual title -->

{% block title %}

    {% if request.LANGUAGE_CODE == 'vi' %}Giao thông vận tải{% else %}Transportation{% endif %}

{% endblock %}

<!-- Service Cards Grid -->

<div class="row g-4">

    <!-- Flight, Transit, Car Rental, Taxi cards -->

</div>

<!-- Popular Routes -->

<div class="row mt-5">

    <!-- Domestic and International route cards -->

</div>

<!-- Statistics -->

<div class="card bg-light">

    {{ airport_count }}, {{ airline_count }}, {{ station_count }}, {{ city_count }}

</div>

2. flight_search.html - Flight Booking Interface

Purpose: Comprehensive flight search with booking integration

Key Features:

• Advanced Search Form:
  • Origin/Destination: Airport dropdowns with IATA codes
  • Date Selection: Departure (required) + Return (optional)
  • Passenger Count: 1-9 passengers with pluralization
  • Class Selection: Economy, Business, First
• Dynamic Results Display:
  • Flight cards with airline branding
  • Pricing for all available classes
  • Route information with timing
  • Direct links to flight details
• Multilingual Airport Names: Switches between English/Vietnamese
• Form State Persistence: Maintains search parameters in URL

Business Use:

• Flight Booking Engine: Core revenue-generating interface
• Customer Experience: User-friendly search with instant results
• Inventory Management: Shows real-time availability
• Revenue Optimization: Multi-class pricing display

Search Logic:

# View processes GET parameters

origin_code = request.GET.get('origin')        # IATA code (SGN, HAN)

destination_code = request.GET.get('destination')

departure_date = request.GET.get('departure_date')  # YYYY-MM-DD format

# Filters flights by route and availability

flights_qs = Flight.objects.filter(

    origin_airport__iata_code=origin_code,

    destination_airport__iata_code=destination_code,

    status__in=['SCHEDULED', 'DELAYED']  # Only bookable flights

)

Template Features:

• Dynamic Dropdowns: Airport selection with multilingual names
• Date Validation: HTML5 date picker with constraints
• Responsive Design: Mobile-friendly search interface
• Results Cards: Professional flight display with pricing

3. flight_detail.html - Comprehensive Flight Information

Purpose: Complete flight details for booking decisions

Key Features:

• Flight Header Card:
  • Airline branding with logo space
  • Flight number and carrier name
  • Real-time status badge
• Route Display:
  • Departure Section: Time, airport, city, terminal, gate
  • Duration Section: Flight time, aircraft type
  • Arrival Section: Time, airport, city
• Pricing Table: All available classes with current pricing
• Aircraft Information: Manufacturer, model, capacity
• Booking Integration: Direct links to reservation system

Business Use:

• Conversion Tool: Detailed information to encourage booking
• Customer Service: Complete flight details for support
• Operational Display: Real-time status and gate information
• Revenue Management: Class-based pricing presentation

Information Architecture:

<!-- Flight Header -->

<div class="card-header bg-primary">

    <h2>{{ flight.airline.iata_code }}{{ flight.flight_number }}</h2>

    <span class="badge">{{ flight.get_status_display }}</span>

</div>

<!-- Route Display -->

<div class="row">

    <div class="col-md-5"><!-- Departure --></div>

    <div class="col-md-2"><!-- Duration & Aircraft --></div>

    <div class="col-md-5"><!-- Arrival --></div>

</div>

<!-- Pricing -->

<div class="pricing-section">

    Economy: {{ flight.economy_price }}

    Business: {{ flight.business_price }}

    First: {{ flight.first_price }}

</div>

4. transit_search.html - Ground Transportation Search

Purpose: Multi-modal ground transportation booking

Key Features:

• Transport Type Tabs: Visual selection between modes
  • 🚌 Bus, 🚂 Train, ⛴️ Ferry, 🚇 Metro
• Station-Based Search:
  • Origin/destination station dropdowns
  • Station type indicators in options
• Advanced Filters:
  • Departure date (optional)
  • Transport type filter
  • Operator selection
• Results Display:
  • Multi-modal results in unified interface
  • Operator branding and route information
  • Pricing for standard/premium services

Business Use:

• Last-Mile Transportation: Complements flight bookings
• Local Travel: Serves domestic transportation needs
• Multi-Modal Integration: Seamless journey planning
• Operator Partnerships: Revenue sharing with transport companies

Search Parameters:

# Ground transportation search

origin_station_id = request.GET.get('origin_station')      # Station ID

destination_station_id = request.GET.get('destination_station')

departure_date = request.GET.get('departure_date')         # Optional

transit_type = request.GET.get('transit_type')             # BUS, TRAIN, etc.

# Filters by route and type

transits_qs = Transit.objects.filter(

    origin_station_id=origin_id,

    destination_station_id=destination_id,

)

Template Structure:

• Tab Navigation: Bootstrap pills for transport type selection
• Unified Search Form: Single form handling all transport modes
• Station Dropdowns: Transport stations with type indicators
• Results Grid: Cards showing available services with operator info

5. transit_detail.html - Ground Transportation Details

Purpose: Detailed ground transportation service information

Key Features:

• Service Header:
  • Transport type icon (bus, train, ferry, metro)
  • Route name and operator information
  • Vehicle number badge
• Journey Information:
  • Departure/arrival stations with local names
  • Platform/bay information
  • Service duration and timing
• Operator Details:
  • Transportation company information
  • Contact details and booking links
• Pricing Options: Standard and premium service levels
• Special Notes: Service-specific information in multiple languages

Business Use:

• Service Transparency: Complete information for booking confidence
• Operator Integration: Branded experience for partner companies
• Customer Support: Detailed service information for assistance
• Quality Assurance: Service-specific notes and requirements

6. flight_list.html - Flight Operations Dashboard

Purpose: Administrative flight monitoring and management

Key Features:

• Statistics Dashboard:
  • Total flights, displayed count
  • On-time vs delayed flight metrics
  • Color-coded status cards
• Flight Cards Grid:
  • Comprehensive flight information
  • Status indicators with color coding
  • Administrative action buttons
• Navigation Tools:
  • Quick access to flight search
  • Back to transportation home
• Operational Display: Recent flights with status monitoring

Business Use:

• Operations Management: Real-time flight status monitoring
• Performance Tracking: On-time performance metrics
• Staff Dashboard: Quick access to flight information
• System Health: Overview of flight operations

Data Display:

<!-- Statistics Cards -->

<div class="row mb-4">

    <div class="col-md-3">{{ flights.count }} Total</div>

    <div class="col-md-3">{{ flights|length }} Showing</div>

    <div class="col-md-3">{{ scheduled_count }} On Time</div>

    <div class="col-md-3">{{ delayed_count }} Delayed</div>

</div>

<!-- Flight Cards -->

{% for flight in flights %}

    <div class="card flight-card">

        <!-- Flight information with status -->

    </div>

{% endfor %}

7. transit_list.html - Transit Operations Dashboard

Purpose: Ground transportation service monitoring

Key Features:

• Multi-Modal Statistics:
  • Service type breakdown (trains, buses, metro, taxi, ferry)
  • Color-coded cards for each transport mode
  • Total service count
• Service Listings:
  • Comprehensive transit service cards
  • Operator information and branding
  • Route and timing details
• Administrative Tools:
  • Service management interfaces
  • Quick access to transit search
• Performance Monitoring: Service availability and status

Business Use:

• Service Portfolio: Overview of all ground transportation
• Operator Relations: Monitoring partner service performance
• Capacity Planning: Understanding service distribution
• Quality Control: Service availability and reliability tracking

Statistics Display:

<!-- Transport Type Statistics -->

<div class="row mb-4">

    <div class="col-md-2">{{ train_count }} Trains</div>

    <div class="col-md-2">{{ bus_count }} Buses</div>

    <div class="col-md-2">{{ metro_count }} Metro</div>

    <div class="col-md-2">{{ taxi_count }} Taxis</div>

    <div class="col-md-2">{{ ferry_count }} Ferries</div>

</div>

🔄 Template Integration & User Flows

Customer Journey Flow:

transport_home.html (Landing/Navigation)

    ↓ Choose Flight

flight_search.html (Search & Results)

    ↓ Select Flight

flight_detail.html (Booking Decision)

    ↓ Book Flight

OR

transport_home.html (Landing/Navigation)

    ↓ Choose Transit

transit_search.html (Ground Transport Search)

    ↓ Select Service

transit_detail.html (Service Booking)

Administrative Flow:

flight_list.html (Operations Dashboard)

    ↓ Monitor Status

flight_detail.html (Flight Management)

transit_list.html (Service Dashboard)

    ↓ Monitor Services

transit_detail.html (Service Management)

Common Template Features:

1. Multilingual Support: Complete Vietnamese/English switching
2. Bootstrap Framework: Responsive, professional design
3. FontAwesome Icons: Visual enhancement and user guidance
4. Base Template Extension: Consistent layout and navigation
5. Form State Persistence: URL-based state management
6. SEO Optimization: Dynamic page titles and meta information

Business Intelligence Integration:

• Real-time Statistics: Live counts and performance metrics
• Status Monitoring: Flight delays, service availability
• Revenue Tracking: Pricing display and booking conversion
• Partner Integration: Operator branding and deep-linking
• Customer Experience: Seamless multi-modal journey planning

This comprehensive template system provides complete coverage for both customer-facing transportation booking and administrative operations management, with full multilingual support and professional user experience design.