How to Build a Django Movie App

Introduction

In this tutorial, we will be building a movie app using the Django framework. For this project, we will be using an API from RapidAPI link here.

Install Modules

To begin with this project we will first need to install a few modules, first is Django which will be our web server and requests to make HTTP requests. To install the above modules run the commands below in your terminal.

pip3 install Django

pip3 install requests

Project Configuration

To create our project run the command below in your terminal.

django-admin startproject django_movie

After the above command executes successfully, a folder called django_movie will be created, cd into the directory, and run the command below to create our application.

python3 manage.py startapp movie

Now inside the settings.py file in the django_movie folder in the installed_apps list add the code below.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'movie',
]

Create view

Now let’s create a view to get movie details. Inside the views.py file add the following code .

from django.shortcuts import render
import requests

def movie(request):
    if request.method == "POST":
        title = request.POST.get('title')
        url = "https://ott-details.p.rapidapi.com/search"

        querystring = {"title": title, "page": "1"}

        headers = {
            "X-RapidAPI-Key": "API-KEY",
            "X-RapidAPI-Host": "ott-details.p.rapidapi.com"
        }

        response = requests.request("GET", url, headers=headers, params=querystring).json()

        for data in response['results']:
            genre = data['genre']
            title = data['title']
            typ = data['type']
            released = data['released']
            return render(request, "movie/index.html", {"genre": genre, "title": title, "typ": typ, "released": released})

    return render(request, "movie/index.html")

The above code queries the API for the movie title and the details are rendered in the template. In the API we provided earlier from RapidAPI subscribe and get the API key and keep it private.

Create template

Inside the movie folder create a folder called templates and inside the folder create a folder called movie with a file index.html in it. Inside the index.html file insert the code below.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Netflix OTT Details</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #141414;
		}
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		.form {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #e50914;
			padding: 50px;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
		.form h2 {
			color: #fff;
			font-weight: 400;
			margin-bottom: 20px;
			text-align: center;
		}
		.form input[type="text"] {
			background-color: #fff;
			border-radius: 5px;
			border: none;
			padding: 10px;
			margin-bottom: 10px;
			width: 100%;
			font-size: 16px;
		}
		.form input[type="submit"] {
			background-color: #e50914;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px;
			cursor: pointer;
			font-size: 16px;
			width: 100%;
		}
		.result {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			padding: 50px 0;
		}
		.card {
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			margin: 20px;
			padding: 20px;
			max-width: 300px;
			text-align: center;
		}
		.card h3 {
			color: #e50914;
			font-size: 24px;
			font-weight: 400;
			margin-bottom: 20px;
		}
		.card p {
			color: #141414;
			font-size: 16px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="form">
			<h2>Find OTT Details on Netflix</h2>
			<form method="POST">
                {% csrf_token %}
				<input type="text" name="title" id="title" placeholder="Enter title" required>
                <input type="submit" value="Search">
			</form>
		</div>
		{% if genre %}
		<div class="result">
			<div class="card">
				<h3>{{ title }}</h3>
				<p>Genre: {{ genre }}</p>
				<p>Type: {{ typ }}</p>
				<p>Released: {{ released }}</p>
			</div>
		</div>
		{% endif %}
	</div>
</body>
</html>

Create application routes

Inside the movie folder create a file called urls.py file and insert the code below.

from django.urls import path, re_path
from . import views



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

Create project routes

Now let’s create routes for our main project, inside the urls.py file in the django_movie folder add the code below.

from django.contrib import admin
from django.urls import path,include 

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

Run

Now let’s now run our application, to do so open your terminal and run the command below.

python3 manage.py runserver

After running the command above our application should be available at the address [ http://127.0.0.1:8000 ]. Here is a screenshot of our running application.