Skip to content

Commit

Permalink
Adding bootstratp to the templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mike014
Mike014 committed Jan 19, 2025
1 parent b96a5f9 commit 4a0ba89
Show file tree
Hide file tree
Showing 10 changed files with 179 additions and 185 deletions.
4 changes: 2 additions & 2 deletions movie_ranker/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
SECRET_KEY = "django-insecure-5dyf_vug_z&&l_@r6@#6k=j5(5_zpz=t!hjet-l#lryyhj&li@"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
DEBUG = True

ALLOWED_HOSTS = ["0.0.0.0", "127.0.0.1", "localhost"]

Expand Down Expand Up @@ -56,7 +56,7 @@
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [],
"DIRS": [os.path.join(BASE_DIR, "movies", "templates", "movies")],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
Expand Down
Binary file modified movies/.DS_Store
View file
Binary file not shown.
Binary file modified movies/templates/.DS_Store
View file
Binary file not shown.
53 changes: 53 additions & 0 deletions movies/templates/movies/base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Movie Ranker{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Movie Ranker</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'user_profile' %}">User Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'subscribe' %}">Subscribe</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'subscribe' %}">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>

<!-- Main Content -->
<div class="container mt-4">
{% block content %}{% endblock %}
</div>

<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
120 changes: 59 additions & 61 deletions movies/templates/movies/home.html
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Movie Ranker</title>
</head>
<body>
<h1>Welcome to Movie Ranker</h1>
{% extends "base.html" %}

<!-- Navigation Links -->
<nav>
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'user_profile' %}">User Profile</a></li>
<li><a href="{% url 'subscribe' %}">Subscribe</a></li>
</ul>
</nav>
{% block title %}Home - Movie Ranker{% endblock %}

<!-- Form for selecting the genre -->
<form method="get" action="{% url 'home' %}">
<label for="genre">Choose a genre:</label>
<select name="genre_id" id="genre">
{% block content %}
<h1>Welcome to Movie Ranker</h1>

<!-- Form for selecting the genre -->
<form method="get" action="{% url 'home' %}" class="mt-4">
<div class="mb-3">
<label for="genre" class="form-label">Select Genre:</label>
<select id="genre" name="genre_id" class="form-select">
{% for genre in genres %}
<option value="{{ genre.id }}" {% if genre.id == selected_genre_id %}selected{% endif %}>
{{ genre.name }}
</option>
<option value="{{ genre.id }}" {% if genre.id == selected_genre_id %}selected{% endif %}>{{ genre.name }}</option>
{% endfor %}
</select>
<button type="submit">Filter</button>
</form>
</div>
<button type="submit" class="btn btn-primary">Filter</button>
</form>

<!-- Show the filtered movies -->
<ul>
{% for movie in movies %}
<li>
<h2><a href="{% url 'movie_details' movie.id %}">{{ movie.title }}</a></h2>
<p>Rating: {{ movie.rating }}</p>
<p>Release Date: {{ movie.release_date }}</p>
<!-- Show the movie affiliate link -->
<!-- Display movies -->
<div class="row mt-4">
{% for movie in movies %}
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">{{ movie.title }}
<h2><a href="{% url 'movie_details' movie.id %}">{{ movie.title }}</a></h2>
</h5>
<p class="card-text">{{ movie.overview }}</p>
{% if movie.affiliate_link %}
<a href="{{ movie.affiliate_link }}" target="_blank">Watch Now</a>
<a href="{{ movie.affiliate_link }}" target="_blank" class="btn btn-primary">Watch Now</a>
{% endif %}
</li>
{% empty %}
<p>No movies found for the selected genre.</p>
{% endfor %}
</ul>
</div>
</div>
</div>
{% empty %}
<p class="text-muted">No movies found for the selected genre.</p>
{% endfor %}
</div>

<!-- Sponsored movies -->
<h2>Sponsored Movies</h2>
<ul>
<!-- Sponsored movies -->
<h2>Sponsored Movies</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
{% for movie in sponsored_movies %}
<li>{{ movie.title }} (Genre: {{ movie.genre }})</li>
<tr>
<td>{{ movie.title }}</td>
<td>{{ movie.genre }}</td>
</tr>
{% endfor %}
</ul>
</tbody>
</table>

<!-- Adding banner for ads -->
<div class="ad-banner">
{% if selected_genre_id %}
{% if selected_genre_id == 28 %} <!-- Assuming 28 is the ID for Action -->
<img src="/static/ads/action_ad.jpg" alt="Action Movies Ad">
{% elif selected_genre_id == 35 %} <!-- Assuming 35 is the ID for Comedy -->
<img src="/static/ads/comedy_ad.jpg" alt="Comedy Movies Ad">
{% else %}
<img src="/static/ads/default_ad.jpg" alt="Default Ad">
{% endif %}
{% else %}
<img src="/static/ads/default_ad.jpg" alt="Default Ad">
{% endif %}
</div>
</body>
</html>
<!-- Adding banner for ads -->
<div class="ad-banner mt-4">
{% if selected_genre_id %}
{% if selected_genre_id == 28 %}
<img src="/static/ads/action_ad.jpg" class="img-fluid" alt="Action Movies Ad">
{% elif selected_genre_id == 35 %}
<img src="/static/ads/comedy_ad.jpg" class="img-fluid" alt="Comedy Movies Ad">
{% endif %}
{% endif %}
</div>
{% endblock %}
24 changes: 6 additions & 18 deletions movies/templates/movies/movie_details.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,13 @@
<!-- Recap: This file is used to define the HTML template for displaying the details of a specific movie.
The template will display the title, overview, release date, rating, and genres of the movie.
Changes: 31/12/2024
In this file, we define the HTML structure for displaying the details of a specific movie.
The title of the movie will be displayed as a heading.
The overview, release date, rating, and genres of the movie will be displayed as paragraphs.
A link to go back to the movie list will be provided at the bottom. -->
{% extends "base.html" %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} - Movie Details</title>
</head>
<body>
{% block title %}{{ title }} - Movie Details{% endblock %}

{% block content %}
<h1>{{ title }}</h1>
<p><strong>Overview:</strong> {{ overview }}</p>
<p><strong>Release Date:</strong> {{ release_date }}</p>
<p><strong>Rating:</strong> {{ rating }}</p>
<p><strong>Genres:</strong> {{ genres|join:", " }}</p>

<a href="{% url 'movie_list' %}">Back to Movie List</a>
</body>
</html>
<a href="{% url 'movie_list' %}" class="btn btn-primary">Back to Movie List</a>
{% endblock %}
96 changes: 33 additions & 63 deletions movies/templates/movies/movie_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Ranker</title>
</head>
<body>
<h1>Top Movies</h1>
{% extends "base.html" %}

<!-- Form for selecting the genre -->
<form method="get" action="{% url 'movie_list' %}">
<label for="genre">Choose a genre:</label>
<select name="genre_id" id="genre">
{% block title %}Home - Movie Ranker{% endblock %}

{% block content %}
<h1>Welcome to Movie Ranker</h1>

<!-- Form for selecting the genre -->
<form method="get" action="{% url 'home' %}" class="mt-4">
<div class="mb-3">
<label for="genre" class="form-label">Select Genre:</label>
<select id="genre" name="genre_id" class="form-select">
{% for genre in genres %}
<option value="{{ genre.id }}" {% if genre.id == selected_genre_id %}selected{% endif %}>
{{ genre.name }}
</option>
<option value="{{ genre.id }}" {% if genre.id == selected_genre_id %}selected{% endif %}>{{ genre.name }}</option>
{% endfor %}
</select>
<button type="submit">Filter</button>
</form>
</div>
<button type="submit" class="btn btn-primary">Filter</button>
</form>

<!-- Show the filtered movies -->
<ul>
{% for movie in movies %}
<li>
<h2><a href="{% url 'movie_details' movie.id %}">{{ movie.title }}</a></h2>
<p>Rating: {{ movie.rating }}</p>
<p>Release Date: {{ movie.release_date }}</p>
<!-- Show the movie affiliate link -->
<!-- Display movies -->
<div class="row mt-4">
{% for movie in movies %}
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">
<a href="{% url 'movie_details' movie.id %}">{{ movie.title }}</a>
</h5>
<p class="card-text">{{ movie.overview }}</p>
{% if movie.affiliate_link %}
<a href="{{ movie.affiliate_link }}" target="_blank">Watch Now</a>
<a href="{{ movie.affiliate_link }}" target="_blank" class="btn btn-primary">Watch Now</a>
{% endif %}
</li>
{% empty %}
<p>No movies found for the selected genre.</p>
{% endfor %}
</ul>

<!-- Sponsored movies -->
<h2>Sponsored Movies</h2>
<ul>
{% for movie in sponsored_movies %}
<li>{{ movie.title }} (Genre: {{ movie.genre }})</li>
{% endfor %}
</ul>

<!-- Adding banner for ads -->
<div class="ad-banner">
{% if selected_genre_id %}
{% if selected_genre_id == 28 %} <!-- Assuming 28 is the ID for Action -->
<img src="/static/ads/action_ad.jpg" alt="Action Movies Ad">
{% elif selected_genre_id == 35 %} <!-- Assuming 35 is the ID for Comedy -->
<img src="/static/ads/comedy_ad.jpg" alt="Comedy Movies Ad">
{% else %}
<img src="/static/ads/default_ad.jpg" alt="Default Ad">
{% endif %}
{% else %}
<img src="/static/ads/default_ad.jpg" alt="Default Ad">
{% endif %}
</div>
</div>
</div>
</body>
</html>

<!--
This HTML file represents the main page for viewing movies filtered by genre.
It includes a form for selecting the genre, a list of filtered movies, a section for sponsored movies,
and an ad banner that changes based on the selected genre.
If there are no movies for the selected genre, an appropriate message is displayed.
-->
{% empty %}
<p class="text-muted">No movies found for the selected genre.</p>
{% endfor %}
</div>
{% endblock %}
40 changes: 15 additions & 25 deletions movies/templates/movies/subscribe.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Movie Ranker</title>
</head>
<body>
{% extends "base.html" %}

{% block title %}Login - Movie Ranker{% endblock %}

{% block content %}
<h1>Login</h1>
<p>Please log in to access your account.</p>

<!-- Navigation Links -->
<!-- <nav>
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'user_profile' %}">User Profile</a></li>
</ul>
</nav> -->

<form method="post" action="{% url 'subscribe' %}">
{% csrf_token %}
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Login</button>
<div class="mb-3">
<label for="username" class="form-label">Username:</label>
<input type="text" id="username" name="username" class="form-control" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</body>
</html>
{% endblock %}
Loading

0 comments on commit 4a0ba89

Please sign in to comment.