Building a Video Sharing Website: Part 3 Adding User Profiles

Video Tutorial

Code on Github

In this addition to the series we will build add user profiles. These profiles should be public and viewable by anyone logged in or not logged in. There should also be a way for the user that is connected to the profile to be able to edit the profile information. This button should only be availble if the user connected to the profile is logged in. Let’s get started building this.

Setting up a New App

First we need to start a new app and add it to installed_apps in settings.py. Just like we did in the beginning, we need to run this command:

And then we need to add it to installled_apps in settings.py:

Creating the Profile Model

Now that we have our new app set up, we can begin to build it. We will start with models.py and create the data structure for our profile. We need a couple fields here. We first want to connect our profile to a user, we also want to save a name, location, and image for the profile. Finally we will override the __str__ method to make the profile look a little better in the admin page.

Building the Profile View

Now let’s build a view to display a user profile. We will use the generic View class to inherit from. This class has different methods that will be called based on what HTTP method is used in the request. In this case, we will just be handling get requests to display the profile here. So, we will create a method called get that will hold all of the logic to be ran when we receive a get request. We will get a profile object using get_object_or_404 and we will get all of the videos uploaded by this user as well. We will pass both of these variables into the context dictionary to be passed into the template. Finally, we will render the template.

Adding the Profile View URL Pattern

We will create the URL pattern for the profile view similar to how we created the DetailView for the videos. We will pass in a primary key to determine which user profile should be retrieved. We will also create a separate file and include it in our root urls.py file.

Root urls.py:

Profiles urls.py:

Building the Profile Template

In this template we want to first show the user, name, location, and image and then we want to loop through and display every video posted by the user. We will extend the base template found in the videos template folder, so all of our content will go in the same content block that is defined in that base template.

Adding the Profile Fields To the Sign Up Form

We want to allow the user to add profile information when they sign up. Since we are using alluth for authentication, it is pretty easy to do. But before we add it to the form, we need to create a ProfileForm:

profiles/forms.py:

First we create a form and add the name, location, and image fields that we added to our model earlier. We then need to do two things, we need to set a default image if an image is not added to the form, and we need to save the user and then set the profile user, name, location, and image. Finally we save the profile as well. We set the image in the clean method and we need the signup method for allauth to run after we submit the form and save the data.

Now that we have that form created, we can very easily add it to the sign up form by adding one line to our settings.py:

Now when we load the sign up form, we should see the profile fields there as well.

Updating the Profile

Finally, we need to create a way for the logged in user to be able to update the profile information after it is created. We can use a regular UpdateView to easily accomplish this.

Now we can add to our profiles.urls.py:

We can then create the template that the UpdateView renders:

Finally, let’s add a link to the update template in our profiles template to show if the currently logged in user is the same as the profile user:

That concludes this addition to this series of building a video sharing web application with Python and Django. We are starting to get a functional application together. In the future, we will continue to add more to this application.