---
# System prepended metadata

title: TEAM 2 NETDEV

---

# Progress Team 2 




## Set Up Project Awal

### 1. Install Python 
    
  Install python melalui web resmi https://www.python.org/, kami menggunakan versi 3.12.3
 
### 2. Set Up Virtual Environtment


1. Buat environment
    ```
    python -m venv venv
    ```
    
2. Aktifkan environment 

    ```
    venv\scripts\activate
    ```
### 2. Set Up Django

    ```
    pip install django
    ```
![image](https://hackmd.io/_uploads/rJOVaqwG0.png)



### 3. Set Up Aplikasi

![image](https://hackmd.io/_uploads/BJXh69PGA.png)

 1. Start Project bernama 'nih'

    ```
    python manage.py startproject nih
    ```
    dengan struktur seperti ini : 
    
    ```
    nih/
        manage.py
        nih/
            __init__.py
            settings.py
            urls.py
            asgi.py
            wsgi.py

    ```
 2. Menjalankan server

    `python manage.py runserver`
    
    
 3. Buat aplikasi bernama 'bioskop'

    ```
    python manage.py startapp bioskop
    ```
    dengan struktur aplikasi : 
    
    ```
    bioskop/
        __init__.py
        admin.py
        apps.py
        models.py
        tests.py
        views.py
        migrations/

    ```
 4. Daftarkan aplikasi ke settings.py
    
    ```
    INSTALLED_APPS = [
        ...
        'bioskop',
    ]

    ```
 5. Pembuatan model

    Buat model di bioskop/models.py
    ```
    from django.db import models
    from django.utils import timezone 
    from datetime import timedelta # Import timezone for default value

    class Movie(models.Model):
        title = models.CharField(max_length=100)
        genre = models.CharField(max_length=100, default="Unknown")
        showtime = models.DateTimeField(default=timezone.now)
        #poster = models.CharField(max_length=100)  # Path relatif ke file static
        release_year = models.IntegerField(default=timezone.now().year)
        duration= models.DurationField(default=timedelta(hours=0))
        poster_url = models.URLField(max_length=200, default='https://example.com/default-poster.jpg')  # Default URL for the poster image



        def __str__(self):
            return self.title
    ```
6. Migrasi database 

    ```
    python manage.py makemigrations
    python manage.py migrate

    ```
 7. Membuat Admin Interface

    ```
    from django.contrib import admin
    from .models import Movie

    admin.site.register(Movie)

    ```
 8. Membuat URL dan View
 
     Views.py
     
    ```
    from django.shortcuts import render
    from .models import Film

    def index(request):
        films = Film.objects.all()
        return render(request, 'bioskop/index.html', {'Movie': Movie})

    ```
    
    Urls.py
    ```
    from django.urls import path
    from . import views

    urlpatterns = [
        path('', views.index, name='index'),
    ]

    ```
    
    nih/nih/urls.py
    
    ```
    from django.contrib import admin
    from django.urls import include, path

    urlpatterns = [
        path('admin/', admin.site.urls),
        path('bioskop/', include('bioskop.urls')),
    ]

    ```
    
 9. Menjalankan Server

    ```
    python manage.py runserver
    ```
 
## Set Up Navigation Bar

 Buat File base.html pada direktori templates nih/templates/base.html
 
    ```
    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>{% block title %}{% endblock title %}</title>

        <meta content="" name="description" />
        <meta content="" name="keywords" />

        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />

        <!-- Vendor CSS Files -->
        <link href="{% static 'assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" />
        <link href="{% static 'assets/vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet" />
        <link href="{% static 'assets/css/style2.css' %}" rel="stylesheet" />
        {% block stylecss %} {% endblock stylecss %}
      </head>
      <body>
        <!-- navbar.html -->
        <header class="header">
          <nav class="navbar">
            <a href="#">MOVIE-VERSE</a>
            <a href="/">Home</a>
            <a href="/buy-ticket">Buy Ticket</a>
            <a href="/about">About</a>
            <div class="dropdown">
              <a href="#" class="dropbtn">New User</a>
              <div class="dropdown-content">
                {% if not request.user.is_authenticated %}
                <a href="/auth/signup/" class="dropdown-item">Sign Up</a>
                <a href="/auth/login/" class="dropdown-item">Login</a>
                {% else %}
                <a href="/auth/logout/" class="dropdown-item">Log Out</a>
                {% endif %}
              </div>
            </div>
          </nav>
        </header>
        {% block body %} {% endblock body %}

        <script src="{% static 'assets/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
      </body>
    </html>

    ```

 Menghubungkan base.html dengan template lain dengan tag extends 'base.html'
 
    ```
    {% extends 'base.html' %}
    ```
    
 Menjalankan server
 
    ```
    python manage.py runserver
    ```

 Buka browser 'http://127.0.0.1:8000/bioskop/' untuk melihat apakah navbar berjalan
 
## Halaman Home
 1. Membuat view untuk halaman home
    ```
    from django.shortcuts import render, redirect, get_object_or_404

    def home(request):
        return render(request, 'home.html')
    ```
 2. Membuat template untuk halaman home
    ```
    {% extends 'base.html' %}
    {% block title %}MOVIE-VERSE{% endblock title %}
    {% block body %}
    <div class="container">
        <div class="content">
            <img src="../static/assets/img/logo.png" alt="" class="movie-image">
            <div class="text-sci">
                <h2>Welcome!
                    <br><span>To Movie-Verse</span>
                </h2>
                <p>Explore the Cinema World and Enjoy Movies Anywhere
                </p>
            </div>
        </div>
        <div class="logreg-box">
        {% block login%}
        {% endblock login%}
        </div>
    </div>
    {% endblock body %}


    ```
 3. Menambahkan Url untuk halaman home

    ```
    from django.urls import path
    from . import views
    from django.conf import settings
    from django.conf.urls.static import static


    urlpatterns = [
        path('', views.home, name='home'),
    ```
 4. Menjalankan server

    ```
    python manage.py runserver
    ```
## Halaman About.html

 1. Membuat view untuk halaman about

    ```
    from django.shortcuts import render

    def about(request):
        return render(request, 'bioskop/about.html')

    ```

 2. Membuat template about.html
    
    Buat file about.html dengan struktur : 
    ```
    bioskop/
        templates/
            bioskop/
                about.html

    ```
    Isi file html dengan : 
    ```
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>About Us</title>
        <meta content="" name="description" />
        <meta content="" name="keywords" />
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />
        <!-- Vendor CSS Files -->
        <link href="/static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="/static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
        <link href="/static/assets/css/style.css" rel="stylesheet" />
        <link href="/static/assets/css/style2.css" rel="stylesheet" />
      </head>
      <body>
        <header class="header">
          <nav class="navbar">
            <a href="#">MOVIE-VERSE</a>
            <a href="/">Home</a>
            <a href="/buy-ticket">Buy Ticket</a>
            <a href="/about">About</a>
            <div class="dropdown">
              <a href="#" class="dropbtn">New User</a>
              <div class="dropdown-content">
                {% if not request.user.is_authenticated %}
                <a href="/auth/signup/" class="dropdown-item">Sign Up</a>
                <a href="/auth/login/" class="dropdown-item">Login</a>
                {% else %}
                <a href="/auth/logout/" class="dropdown-item">Log Out</a>
                {% endif %}
              </div>
            </div>
          </nav>
        </header>

        <div class="container">
          <div class="heading"></div>
          <div class="container">
            <section class="about">
              <div class="about image">
                <img src="/static/assets/img/logo.png" alt="About Us Image" />
              </div>
              <div class="about-content">
                <h2 style="color: white">Who We Are</h2>
                <p style="color: white">
                  Founded in 2024, Movie Verse is dedicated to transforming the way you buy movie tickets. We are a passionate team of movie enthusiasts and tech experts who understand the joy of watching movies on the big screen. Our goal is
                  to bridge the gap between you and your favorite cinemas, ensuring that your movie night is just a few clicks away.
                </p>
                <a href="" class="read-more">Read More</a>
              </div>
            </section>
          </div>
        </div>

        <script src="/static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
      </body>
    </html>

    ```
 3. Menambahkan URL untuk Halaman About

    ```
    from django.urls import path
    from . import views

    urlpatterns = [
        path('', views.home, name='home'),
        path('about/', views.about, name='about'),
    ]

    ```
 4. Menjalankan Server dan Memeriksa

    ```
    python manage.py runserver
    ```
 
    
## Halaman Buy Ticket

1. Set up models.py
    ```
    from django.db import models
    from django.utils import timezone 
    from datetime import timedelta # Import timezone for default value

    class Movie(models.Model):
        title = models.CharField(max_length=100)
        genre = models.CharField(max_length=100, default="Unknown")
        showtime = models.DateTimeField(default=timezone.now)
        #poster = models.CharField(max_length=100)  # Path relatif ke file static
        release_year = models.IntegerField(default=timezone.now().year)
        duration= models.DurationField(default=timedelta(hours=0))
        poster_url = models.URLField(max_length=200, default='https://example.com/default-poster.jpg')  # Default URL for the poster image



        def __str__(self):
            return self.title
    ```
2. Membuat view untuk halaman buy ticket
    ```
    from django.shortcuts import render, redirect, get_object_or_404
    from .models import Movie, Seat
    from .forms import PaymentForm

    def movie_list(request):
        movies = Movie.objects.all()
        return render(request, 'bioskop/movie_list.html', {'movies': movies})

    ```
 3. Membuat template halaman buy ticket
 
     Disini kita namakan movie_list.html dan pastikan penempatan direktorinya.

    ```
     bioskop/
            templates/
                bioskop/
                    movie_list.html
    ```
    
    Isi template : 
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Buy Ticket</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway" rel="stylesheet">
        {% load static %}
        <link href="{% static 'assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/css/style2.css' %}" rel="stylesheet">
    </head>
    <body>
    <header class="header">
        <nav class="navbar">
            <a href="#">MOVIE-VERSE</a>
            <a href="/">Home</a>
            <a href="/buy-ticket">Buy Ticket</a>
            <a href="/about">About</a>
            <div class="dropdown">
                <a href="#" class="dropbtn">New User</a>
                <div class="dropdown-content">
                    {% if not request.user.is_authenticated %}
                        <a href="/auth/signup/" class="dropdown-item">Sign Up</a>
                        <a href="/auth/login/" class="dropdown-item">Login</a>
                    {% else %}
                        <a href="/auth/logout/" class="dropdown-item">Log Out</a>
                    {% endif %}
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <h1 style="color: white">Buy Ticket</h1>
        <div class="row">
            {% for movie in movies %}
            <div class="col-md-4">
                <div class="card">
                    <img src="{{ movie.poster_url }}" class="card-img-top" alt="{{ movie.title }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ movie.title }}</h5>
                        <p class="card-text">Genre: {{ movie.genre }}</p>
                        <p class="card-text">Jam Tayang: {{ movie.showtime }}</p>
                        <p class="card-text">Tahun Terbit: {{ movie.year }}</p>
                        <p class="card-text">Durasi: {{ movie.duration }} menit</p>
                        <a href="{% url 'choose_seat' movie.id %}" class="btn btn-primary">Choose Seat</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <script src="{% static 'assets/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
    </body>
    </html>

    ```
    
 4. Menambahkan url pada halaman buy-ticket

    ```
    from django.urls import path
    from . import views
    from django.conf import settings
    from django.conf.urls.static import static

    urlpatterns = [

        path('movies/', views.movie_list, name='movie_list'),

    ]
    ```
 5. Set up admin.py
    ```
    from django.contrib import admin
    from .models import Movie, Seat, Image
    admin.site.register(Movie)

    ```

 6. Jalankan server
    ```
    python manage.py runserver
    ```
    
## Halaman choose_seat

 1. Set up models.py
    ```
    from django.db import models
    from django.utils import timezone 
    from datetime import timedelta # Import timezone for default value

    class Seat(models.Model):
        movie = models.ForeignKey(Movie, on_delete=models.CASCADE)
        seat_number = models.CharField(max_length=10)
        booked = models.BooleanField(default=False)

    ```
 2. Membuat views untuk halaman choose_seat

    ```
    from django.shortcuts import render, redirect, get_object_or_404
    from .models import Movie, Seat
    from .forms import PaymentForm

    def choose_seat(request, movie_id):
        movie = get_object_or_404(Movie, id=movie_id)
        seats = Seat.objects.filter(movie=movie)

        if request.method == 'POST':
            selected_seats = request.POST.getlist('seat')
            if selected_seats:
                request.session['selected_seats'] = selected_seats
                request.session['movie_id'] = movie_id
                return redirect('payment')
            else:
                return render(request, 'bioskop/choose_seat.html', {
                    'movie': movie,
                    'seats': seats,
                    'error_message': "Please select at least one seat."
                })

        return render(request, 'bioskop/choose_seat.html', {
            'movie': movie,
            'seats': seats
        })
    ```
    
 3. Membuat template untuk halaman choose_seat

    Pastikan template choose_seat.html berada direktori yg tepat
    ```
    bioskop/
                templates/
                    bioskop/
                        choose_seat.html

    ```
    isi template : 
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Choose Seat</title>
        {% load static %}
        <link href="{% static 'bioskop/css/style.css' %}" rel="stylesheet">
        <!-- Include Font Awesome for icons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f4f4f4;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
            }
            h1, h2, h3 {
                color: #333;
            }
            .container {
                width: 90%;
                max-width: 800px;
                background: #fff;
                padding: 20px;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
                border-radius: 10px;
            }
            .screen {
                width: 100%;
                background-color: #ff6f61;
                padding: 10px;
                text-align: center;
                font-weight: bold;
                margin-bottom: 20px;
                border-radius: 5px;
                color: white;
            }
            .seats {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
                gap: 10px;
                justify-content: center;
            }
            .seat {
                width: 30px;
                height: 30px;
                background-color: #444;
                border-radius: 5px;
                text-align: center;
                line-height: 30px;
                color: white;
                cursor: pointer;
                position: relative;
                transition: background-color 0.3s ease;
            }
            .seat input[type="checkbox"] {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 100%;
                width: 100%;
            }
            .seat.booked {
                background-color: #ff4c4c;
                cursor: not-allowed;
            }
            .seat.selected {
                background-color: #6feaf6;
                transform: scale(1.1);
            }
            .seat.available:hover {
                background-color: #28a745;
            }
            .total-price {
                margin-top: 20px;
                font-size: 20px;
                color: #333;
                text-align: center;
            }
            .error {
                color: red;
                text-align: center;
                margin-top: 10px;
            }
            button {
                width: 100%;
                padding: 10px;
                background-color: #28a745;
                color: white;
                border: none;
                border-radius: 5px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }
            button:hover {
                background-color: #218838;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Choose Your Seat</h1>
            <h2>{{ movie.title }}</h2>
            <h3>{{ movie.showtime }}</h3>

            <!-- Representasi layar -->
            <div class="screen">SCREEN</div>

            <form id="seat-form" action="{% url 'payment' %}" method="post">
                {% csrf_token %}
                <div class="seats">
                    {% for seat in seats %}
                        <label class="seat {% if seat.booked %}booked{% elif seat.id|stringformat:"s"|default_if_none:"0" in request.session.selected_seats %}selected{% else %}available{% endif %}">
                            <input type="checkbox" name="seats" value="{{ seat.id }}" {% if seat.booked %}disabled{% endif %}>
                            <i class="fas fa-chair"></i>
                        </label>
                    {% endfor %}
                </div>
                <div class="total-price">
                    Total Price: Rp <span id="total-price">0</span>
                </div>
                {% if error_message %}
                    <div class="error">{{ error_message }}</div>
                {% endif %}
                <button type="submit">Proceed to Payment</button>
            </form>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const seatForm = document.getElementById('seat-form');
                const checkboxes = seatForm.querySelectorAll('input[type="checkbox"]');
                const totalPriceElement = document.getElementById('total-price');
                const seatPrice = 50000;  // Harga per kursi

                checkboxes.forEach(function(checkbox) {
                    checkbox.addEventListener('change', function() {
                        updateTotalPrice();
                        toggleSeatSelection(checkbox);
                    });
                });

                function updateTotalPrice() {
                    let totalPrice = 0;
                    checkboxes.forEach(function(checkbox) {
                        if (checkbox.checked) {
                            totalPrice += seatPrice;
                        }
                    });
                    totalPriceElement.textContent = totalPrice.toLocaleString('id-ID');
                }

                function toggleSeatSelection(checkbox) {
                    const seatLabel = checkbox.parentElement;
                    if (checkbox.checked) {
                        seatLabel.classList.add('selected');
                    } else {
                        seatLabel.classList.remove('selected');
                    }
                }
            });
        </script>
    </body>
    </html>

    ```
    
4. Menambahkan urls pada halaman choose_seat
    ```
    from django.urls import path
    from . import views
    from django.conf import settings
    from django.conf.urls.static import static

    urlpatterns = [
        path('choose-seat/<int:movie_id>/', views.choose_seat, name='choose_seat'),
    ]
    if settings.DEBUG:
        urlpatterns+= static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
    ```

5. Menjalankan server
    ```
    python manage.py runserver
    ```
    
## Halaman Payment

1. Membuat views untuk halaman payment
    ```
    from django.shortcuts import render, redirect, get_object_or_404
    from .models import Movie, Seat
    from .forms import PaymentForm

    def payment(request):
        selected_seats = request.session.get('selected_seats', [])
        movie_id = request.session.get('movie_id')
        movie = get_object_or_404(Movie, id=movie_id) if movie_id else None
        seat_price = 50000  # Harga per kursi
        total_price = len(selected_seats) * seat_price

        if request.method == 'POST':
            form = PaymentForm(request.POST)
            if form.is_valid():
                # Lakukan logika penyimpanan data pembayaran di sini jika diperlukan
                request.session['total_price'] = total_price
                return redirect('payment_success')
        else:
            form = PaymentForm()

        return render(request, 'bioskop/payment.html', {
            'form': form,
            'selected_seats': selected_seats,
            'total_price': total_price,
            'movie': movie
        })
    ```
 2. Membuat template untuk halaman payment

    Pastikan template choose_seat.html berada direktori yg tepat
    ```
    bioskop/
                templates/
                    bioskop/
                        payment.html

    ```
    isi template : 
    ```
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Payment</title>
        {% load static %}
        <link href="{% static 'bioskop/css/style.css' %}" rel="stylesheet" />
        <!-- Include Font Awesome for icons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
        <style>
          body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
          }
          .container {
            background: #fff;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            width: 100%;
          }
          h1 {
            text-align: center;
            color: #333;
          }
          form {
            display: flex;
            flex-direction: column;
          }
          form p {
            margin-bottom: 15px;
          }
          input,
          select,
          textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0 20px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
          }
          button {
            background-color: #28a745;
            color: white;
            padding: 15px 20px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
          }
          button:hover {
            background-color: #218838;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <h1>Payment</h1>
          <form method="post">
            {% csrf_token %} {{ form.as_p }}
            <button type="submit"><i class="fas fa-credit-card"></i> Submit Payment</button>
          </form>
        </div>
      </body>
    </html>

    ```
4. Menambahkan urls pada halaman payment

    ```
    from django.urls import path
    from . import views
    from django.conf import settings
    from django.conf.urls.static import static

    urlpatterns = [
        path('payment/', views.payment, name='payment'), 

    ]
    if settings.DEBUG:
        urlpatterns+= static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
    ```
    
## Halaman Payment Success
    
1. Membuat views untuk halaman payment_success
    ```
    def payment_success(request):
    selected_seats = request.session.get('selected_seats', [])
    total_price = request.session.get('total_price')
    movie_id = request.session.get('movie_id')
    movie = get_object_or_404(Movie, id=movie_id) if movie_id else None

    if movie:
        movie_title = movie.title
        movie_showtime = movie.showtime
    else:
        movie_title = "Unknown"
        movie_showtime = "Unknown"

    return render(request, 'bioskop/payment_success.html', {
        'selected_seats': selected_seats,
        'total_price': total_price,
        'movie_title': movie_title,
        'movie_showtime': movie_showtime
    })
    ```
 2. Membuat template untuk halaman payment_success

    Pastikan template choose_seat.html berada direktori yg tepat
    ```
    bioskop/
                templates/
                    bioskop/
                        payment_success.html

    ```
    isi template : 
    
    ```
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Pembayaran Berhasil</title>
        {% load static %}
        <link rel="stylesheet" href="{% static 'bioskop/css/style.css' %}" />
        <style>
          body {
            font-family: Arial, sans-serif;
            background-color: #f3f3f3;
            margin: 0;
            padding: 0;
          }
          .receipt {
            width: 80%;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
          .receipt h1 {
            text-align: center;
            color: #333;
            text-transform: uppercase;
            margin-bottom: 20px;
          }
          .receipt .details {
            margin-top: 20px;
          }
          .receipt .details p {
            margin: 5px 0;
            font-size: 16px;
          }
          .receipt .total {
            text-align: right;
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
          }
          .receipt .thank-you {
            text-align: center;
            margin-top: 30px;
            font-size: 18px;
            color: #28a745;
          }
          .button {
            display: inline-block;
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
          }
          .button:hover {
            background-color: #0056b3;
          }
          table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
          }
          th,
          td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
            text-align: left;
          }
          th {
            background-color: #f2f2f2;
          }
        </style>
      </head>
      <body>
        <div class="receipt">
          <h1>Pembayaran Berhasil</h1>
          <div class="details">
            <table>
              <tr>
                <th>Item</th>
                <th>Detail</th>
              </tr>
              <tr>
                <td>Judul Film:</td>
                <td>{{ movie.title }}</td>
              </tr>
              <tr>
                <td>Waktu Tayang:</td>
                <td>{{ movie.showtime }}</td>
              </tr>
              <tr>
                <td>Kursi yang Dipilih:</td>
                <td>{{ selected_seats|join:", " }}</td>
              </tr>
              <tr>
                <td>Total Harga:</td>
                <td>Rp {{ total_price }}</td>
              </tr>
            </table>
          </div>
          <div class="thank-you">
            <p>Terima kasih telah melakukan pembayaran. Transaksi Anda telah berhasil.</p>
          </div>
          <div style="text-align: center; margin-top: 20px">
            <a href="/" class="button">Kembali ke Beranda</a>
          </div>
        </div>
      </body>
    </html>

    ```
4. Menambahkan urls pada halaman payment

    ```
    from django.urls import path
    from . import views
    from django.conf import settings
    from django.conf.urls.static import static

    urlpatterns = [
        path('payment/success/', views.payment_success, name='payment_success'),  # Tambahkan path untuk view payment_success


    ]
    if settings.DEBUG:
        urlpatterns+= static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
    ```