# 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
```

### 3. Set Up Aplikasi

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)
```