Building a Video Sharing Website: Part 1 Setup & CRUD Operations

Video Tutorial

Code on Github

In this tutorial we are going to complete the first installment of the series Building a Video Sharing Website. Before we get started, a quick disclaimer: This is not meant to be a complete beginner series. We will go through the beginning videos relatively quickly. If you are a beginner you might still be able to follow along but it will definitely help to have a basic understanding of Django before starting. We are going to build a website similar to the service that a site like Youtube or Vimeo provide. This site will be built using Python 3 and Django. It will allow a user to upload videos to share to the site. There will also be pages available allowing the user to update the uploads as well as delete the video. We will eventually add more advanced features to the site in future installments but in this part we will just focus on set up and the basic functionalities.

In this video we are going to focus on those operations, the CRUD operations. CRUD (Create, Read, Update, Delete) will be the foundation of this project. A user should have the option to create a video upload, update it, read it (or view it), and delete it. We aren’t going to focus on user authentication yet, that will come in a future video, so we won’t worry about forcing a user to login first to upload a video. That will come later. Let’s get started with this project.

Setting Up a Django Project

Before we can do anythig we need to install Django and set up a Django project. Let’s install Django with pip:

Now lets create a Django project:

This will create a folder with some files which will include a and a which we will use extensively. The will hold all of our project settings and the will hold the root url routes that we will create for our project.

Let’s create an app. An app is just a part of a Django project that will do one specific piece of the entire application. We will create a videos app to handle HTML forms for uploading, updating, and deleting videos as well as the Video model itself. We will create other apps as well to handle user authentication, user profiles, etc. Let’s get started with just the video app for now.

To do this, navigate to the directory that holds the file and run this command.

Now that our videos app is created, we need to add it to the file so we can use it. Go ahead and open

In this file you will see various different dictionaries, lists, and variables. We will go over them as we need to for now scroll down until you see INSTALLED_APPS, it should look something like this:

To add the videos app that we just created to it, all we need to do is add it to the list:

Now we are ready to use our videos app. Our first goal will be to render a simple index page.

Setting Up a Basic Index Page

To render a page we need to follow a couple steps, create any models needed for the view, create a view, and create a URL pattern for the view. We aren’t going to worry about models for now. Let’s create a simple view, navigate to the videos directory and open the file. Our first view will look like this:

This is the most basic of a view that you can have. All it does is render a HTML template called index.html inside of the videos app. We haven’t created that yet so lets go ahead a do that. Create a directory in videos called templates and then within that directory create a directory called videos. This is just the default for Django templates, the templates won’t be able to be found with the default settings unless they are set up in this way. Create a file called index.html. Let’s add some placeholder HTML for now:

In this file we are doing a couple things. First, we are adding CSS and Javascript for Bootstrap 4. We will use this to quickly add CSS styles to our template. We are also adding a h1 heading that says Index so that we know what page we are on. Next let’s tell Django what URL pattern should open this template. Open up the file called in the video-sharing directory (not in the videos directory). We need to add to the list in this file:

We first need to import the file from the video directory. We then add a URL pattern below the admin (which we will talk about later). This pattern is just an empty string so it will map to the root URL which is where the index page should be. we then next put in the view we want and then give it a name to reference it by.

At this point our fist view is all done and it should render at the root. Go back to where the file is and run the following command:

Go to localhost:8000 in a browser and you should see the index page we just created.

Adding the Create View

We need a way for users to upload videos to site. We are going to do this by using Django’s generic class based views. There is a CreateView that makes this process very easy. We don’t need to create a form, we just need to specify the fields in the form and then pass that form object to the template. But before we do that, we need to create the Video data structure in the file. Let’s open that up and create it:

We are doing a few different things here. We are creating some basic a CharField, TextField, and FileFields to build the pieces that the user will need to upload with the files. We are using one of Django’s built in validators FileExtensionValidator to check the file extensions to make sure they only upload a video file for the videoFile variable and an image for the thumbnail variable. We are also using a DateTimeField to automatically fill in the current time when they upload the video. We are also creating a relationship between the User and the Video to store the user who is uploading the video. The User object is imported at the top because it is built into Django. Now with our first model created, we are ready to get started building the CreateView. But before we do that, we need to run some set up commands in the terminal. Naviagate to the directory holding the file and run these commands:

Now lets open up to add our CreateView:

First, we create a class called CreateVideo. It will inherit from the CreateView class. We need to give it the model it should be creating an object for, which in this case is Video. We specify the fields that should be in the form and tell it where and what the name of the template is. We then add a method, get_success_url() which will give it a redirect url to go to once the form is successfully submitted. In this case we are going to send it to the video-detail url which we haven’t created yet. We also need to pass in the current objects primary key as an argument. This will make more sense after we add the DetailView.

Now that we have the view created we need to create a HTML template. But first we are going to make a base template so we don’t have to repeat ourselves anymore.

Now with that created lets make our create view template. We are going to add this in the same directory that our index.html file is in and we will call it create_video.html.

In this template all we are doing is putting in the form that the CreateView is automatically creating for us. You will also see that we put a filter on it called crispy. Crispy Forms is something we can add to help make the forms look better but we need to install it and set it up.

We also need to add a couple of things to our file:

We need to add crispy_forms to the INSTALLED_APPS, we also need to tell it to use Bootstrap 4, we will add this line to the bottom of

The last part for building the create view is to add a URL route for it. Let’s create a file in videos called Now first before we open that up we need to add it to our root URLs. Open up the file in the main app directory and add this line:

Now all of our video URLs will start with videos/. Open up the file we just created and add this:

Now our create form will render at ‘videos/create’. For class based views we need to add .as_view() after the view name. This won’t work correctly without the DetailView so let’s add that in now.

Adding the Detail View

To add the detail view, first we need to add a view. We are going to use another class based view for that. We will add the following to videos/

The detail view is very simple, we inherit from the DetailView class and give it the model we are using and the name of the HTML template. The primary key is automatically passed into the view without us having to do anything. Next we need to make that template:

There are a couple important pieces to this template. We use video.js to give us an improvement on the basic HTML5 video player. We are also using sharer.js to easily create sharable links for our videos. We put these share links inside of a modal that will pop up when the share icon is pressed. We also added some ion icons to improve the look of the links from basic text. The rest is just basic bootstrap with some Django templates thrown in. When we need to link to another page on the site we can use {% url ‘urlName’ %} to route to it based on the name given to the url pattern. We can also pass in primary keys or anything else into the url with this syntax: {% url ‘urlName’ %} It is important to note that object is the default name passed into the context so in this case. The video that is used for the detail view will automatically get passed into the template with the name of object.

Finally, let’s add the url pattern in videos/

Same as before, we will add .as_view() after any class based view. We use the syntax <int:pk> to add the primary key for the specific video into the url.

Now the last two views we need are an update view and a delete view.

Adding the Update View

Now let’s add the update view to the videos/ file:

The update view is pretty similar to the create view. We even use the same template as before. We give it the model, the fields for the form, and the template_name and then the get_success_url gives it a redirect url after successful submission of the form. The only thing left to add for this view is the URL pattern. Let’s open videos/ to add that:

We are also adding in the primary key for the video using <int:pk>. That finishes our update view to edit videos that are already posted.

Adding the Delete View

The final view we are adding for the first part of this tutorial is the delete view.

This is almost identical to the previous views with a different template. Django’s class based views makes these very easy to build. In this view we are redirecting back to the index page after deleting a video. This template will go to a confirmation page before deleting the video. Let’s build that template now. We’ll put in in the videos/templates/videos directory and call it delete_video.html to match what we put in the view.

All we have to do here is create a form that asks if they are sure that they want to delete the video. Once they submit the form, it will delete the video from the database.

Finally, we need to add the url pattern for this view.

This concludes the first part of this series. In the future we will add more parts to this tutorial to the point where will have a fully functioning web application.