{"id":6152,"date":"2022-12-05T03:57:50","date_gmt":"2022-12-05T03:57:50","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=6152"},"modified":"2023-08-17T09:51:36","modified_gmt":"2023-08-17T09:51:36","slug":"django-user-profile","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/django-tutorial\/django-user-profile\/","title":{"rendered":"Django User Profile"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to implement a user profile in Django applications.<\/p>\n\n\n\n

This tutorial begins where the Django password reset tutorial<\/a> left off.<\/p>\n\n\n\n

A user profile consists of settings and information associated with a user. In this tutorial, you’ll learn how to allow users to update their profiles in Django applications.<\/p>\n\n\n\n

Installing the pillow package #<\/a><\/h2>\n\n\n\n

Since we’ll deal with images, we need to install the pillow<\/code> package by using the following pip<\/code> command:<\/p>\n\n\n

pip install Pillow<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Configuring the directory to store the uploaded images #<\/a><\/h2>\n\n\n\n
First, create a media<\/code> directory in the project:<\/p>\n\n\n
mkdir media<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, add the MEDIA_ROOT<\/code> and MEDIA_URL<\/code> to the settings.py<\/code> of the project:<\/p>\n\n\n
MEDIA_ROOT = BASE_DIR \/ 'media'<\/span>\nMEDIA_URL = '\/media\/'<\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The MEDIA_ROOT<\/code><\/code> specifies the directory that stores the uploaded image. The MEDIA_URL<\/code> specifies the URL that serves the image files from the MEDIA_ROOT<\/code><\/code> directory.<\/p>\n\n\n\n
Third, add the URL that serves the media files to the urls.py<\/code> of the project as follows:<\/p>\n\n\n
from<\/span> django.contrib import<\/span> admin\n<\/span><\/span>from<\/span> django.urls import<\/span> path, include\n<\/span><\/span>\n<\/span><\/span>from<\/span> django.conf import<\/span> settings\n<\/span><\/span>from<\/span> django.conf.urls.static import<\/span> static\n<\/span><\/span>\n<\/span><\/span>urlpatterns = [\n<\/span><\/span>    path('admin\/'<\/span>, admin.site.urls),\n<\/span><\/span>    path(''<\/span>,include('todo.urls'<\/span>)),\n<\/span><\/span>    path(''<\/span>,include('users.urls'<\/span>))\n<\/span><\/span>]\n<\/span><\/span>\n<\/span><\/span>if<\/span> settings.DEBUG:\n<\/span><\/mark>    urlpatterns += static(settings.MEDIA_URL,\n<\/span><\/mark>                          document_root=settings.MEDIA_ROOT)\n<\/span><\/mark><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
If the DEBUG<\/code> is True<\/code> in the settings.py<\/code> file, the Django app will serve the media files from MEDIA_URL<\/code>.<\/p>\n\n\n\n
Creating a profile model #<\/a><\/h2>\n\n\n\n
Modify the models.py<\/code> of the users<\/code> app and define the Profile<\/code> model as follows:<\/p>\n\n\n
from<\/span> django.db import<\/span> models\nfrom<\/span> django.contrib.auth.models import<\/span> User\nfrom<\/span> PIL import<\/span> Image\n\n\nclass<\/span> Profile<\/span>(models.Model)<\/span>:<\/span>\n    user = models.OneToOneField(User, on_delete=models.CASCADE)\n\n    avatar = models.ImageField(\n        default='avatar.jpg'<\/span>, # default avatar<\/span>\n        upload_to='profile_avatars'<\/span> # dir to store the image<\/span>\n    )\n\n    def<\/span> __str__<\/span>(self)<\/span>:<\/span>\n        return<\/span> f'{self.user.username}<\/span> Profile'<\/span>\n\n    def<\/span> save<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n        # save the profile first<\/span>\n        super().save(*args, **kwargs)\n\n        # resize the image<\/span>\n        img = Image.open(self.avatar.path)\n        if<\/span> img.height > 300<\/span> or<\/span> img.width > 300<\/span>:\n            output_size = (300<\/span>, 300<\/span>)\n            # create a thumbnail<\/span>\n            img.thumbnail(output_size)\n            # overwrite the larger image<\/span>\n            img.save(self.avatar.path)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
How it works.<\/p>\n\n\n\n
First, define the Profile<\/code> model inherits from the Model<\/code> class:<\/p>\n\n\n
class<\/span> Profile<\/span>(models<\/span>.Model<\/span>):<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, each user has a profile and each profile belongs to a user. Therefore, the relationship between the User<\/code> model and the Profile<\/code> model is one-to-one. <\/p>\n\n\n\n
user = models.OneToOneField(User, on_delete=models.CASCADE)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
If a User<\/code> is deleted, the Profile<\/code> associated with the User<\/code> is also deleted. This indicates in the on_delete=models.CASCADE<\/code> parameter of the OneToOneField()<\/code>.<\/p>\n\n\n\n
Third, define the avatar<\/code> field that holds the avatar of the user:<\/p>\n\n\n
avatar = models.ImageField(\n        default='avatar.jpg'<\/span>, # default avatar<\/span>\n        upload_to='profile_avatars'<\/span> # dir to store the image<\/span>\n)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
If users haven’t uploaded avatars, the default one is avatar.jpg<\/code> file. Also, we specify the directory (profile_avatars<\/code>)  that will store the uploaded avatars.<\/p>\n\n\n\n
Note that you can add more fields to the Profile<\/code> model like addresses, interests, etc., if needed.<\/p>\n\n\n\n
Fourth, download the avatar.jpg<\/code> file and copy it to the media<\/code> directory of the project:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Fifth, define the __str__()<\/code> method that returns a string representation of the Profile<\/code> model:<\/p>\n\n\n
def<\/span> __str__<\/span>(self)<\/span>:<\/span>\n   return<\/span> f'{self.user.username}<\/span> Profile'<\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Sixth, define the save()<\/code> method that saves the profile into the database, creates a thumbnail of the avatar, and stores it in the specified directory:<\/p>\n\n\n
def<\/span> save<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n    # save the profile first<\/span>\n    super().save(*args, **kwargs)\n\n    # resize the image<\/span>\n    img = Image.open(self.avatar.path)\n    if<\/span> img.height > 150<\/span> or<\/span> img.width > 150<\/span>:\n        output_size = (150<\/span>, 150<\/span>)\n        # create a thumbnail<\/span>\n        img.thumbnail(output_size)\n        \n        # overwrite the large image<\/span>\n        img.save(self.avatar.path)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Seventh, register the Profile in the admin.py<\/code> so that we can manage the profile on the admin page:<\/p>\n\n\n
from<\/span> django.contrib import<\/span> admin\nfrom<\/span> .models import<\/span> Profile\n\n\nadmin.site.register(Profile)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Applying the migrations #<\/a><\/h2>\n\n\n\n
First, make migrations by running the makemigrations<\/code> command:<\/p>\n\n\n
python manage.py makemigrations<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n
Migrations for<\/span> 'users'<\/span>:\n   users\\migrations\\0001<\/span>_initial.py\n      - Create model Profile<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, apply the migrations:<\/p>\n\n\n
python manage.py migrate<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n
Operations to perform:\n   Apply all migrations: admin, auth, contenttypes, sessions, todo, users\nRunning migrations:  \n   Applying users.0001<\/span>_initial... OK<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Creating the MyProfile view #<\/a><\/h2>\n\n\n\n
Define a MyProfile<\/code> class-based view in the views.py<\/code> file:<\/p>\n\n\n
from<\/span> django.views import<\/span> View\n\n# ...<\/span>\n\nclass<\/span> MyProfile<\/span>(LoginRequiredMixin, View)<\/span>:<\/span>\n    def<\/span> get<\/span>(self, request)<\/span>:<\/span>\n        user_form = UserUpdateForm(instance=request.user)\n        profile_form = ProfileUpdateForm(instance=request.user.profile)\n        \n        context = {\n            'user_form'<\/span>: user_form,\n            'profile_form'<\/span>: profile_form\n        }\n        \n        return<\/span> render(request, 'users\/profile.html'<\/span>, context)\n    \n    def<\/span> post<\/span>(self,request)<\/span>:<\/span>\n        user_form = UserUpdateForm(\n            request.POST, \n            instance=request.user\n        )\n        profile_form = ProfileUpdateForm(\n            request.POST,\n            request.FILES,\n            instance=request.user.profile\n        )\n\n        if<\/span> user_form.is_valid() and<\/span> profile_form.is_valid():\n            user_form.save()\n            profile_form.save()\n            \n            messages.success(request,'Your profile has been updated successfully'<\/span>)\n            \n            return<\/span> redirect('profile'<\/span>)\n        else<\/span>:\n            context = {\n                'user_form'<\/span>: user_form,\n                'profile_form'<\/span>: profile_form\n            }\n            messages.error(request,'Error updating you profile'<\/span>)\n            \n            return<\/span> render(request, 'users\/profile.html'<\/span>, context)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
First, import the View<\/code> class from django.views<\/code>:<\/p>\n\n\n
from<\/span> django.views import<\/span> View<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, define MyView<\/code><\/code> class that inherits from the View<\/code> class. The MyView<\/code><\/code> class has the get()<\/code> and post()<\/code> methods that correspond to the HTTP GET<\/code> and POST<\/code>.<\/p>\n\n\n\n
By using the View<\/code> class, you don’t need to have if-else branching inside a view function to determine whether the HTTP method is GET or POST.<\/p>\n\n\n\n
In the get()<\/code> method of the MyProfile<\/code> class, we create the UserUpdateForm<\/code> and ProfileUpdateForm<\/code> objects and pass them to the profile.html<\/code> template.<\/p>\n\n\n\n
In the post()<\/code> method, we also create the UserUpdateForm<\/code> and ProfileUpdateForm<\/code> objects but pass additional data from request.POST<\/code> and request.FILES<\/code>.  <\/p>\n\n\n\n
When both forms are valid, we save them into the database, create a flash message, and redirect the user back to the profile page.<\/p>\n\n\n\n
If one of the forms is not valid, we create an error message and redirect the user back to the profile page, and rerender the template.<\/p>\n\n\n\n
Creating profile.html template #<\/a><\/h2>\n\n\n\n
Create profile.html<\/code> in the templates\/users<\/code> directory that extends the base.html<\/code> template:<\/p>\n\n\n
{% extends 'base.html'<\/span> %} \n\n{% block content %}\n\n\n<div class<\/span>=\"center<\/span>\">\n\t<form<\/span> method<\/span>=\"POST<\/span>\" enctype<\/span>=\"multipart<\/span>\/form<\/span>-data<\/span>\" class<\/span>=\"card<\/span>\">\n\t\t{% csrf_token<\/span> %} \n\t\t\n\t    {% if<\/span> user<\/span>.profile<\/span> %}\n\t\t\t<img<\/span> src<\/span>=\"{{user<\/span>.profile<\/span>.avatar<\/span>.url<\/span>}}\" alt<\/span>=\"{{ user<\/span>.username<\/span> }}\" class<\/span>=\"avatar<\/span>\"  accept<\/span>=\".jpg<\/span>,.jpeg<\/span>,.png<\/span>\"\/>\n\t    {% endif<\/span> %}\n\t    \n\t    <h2<\/span> class<\/span>=\"text<\/span>-center<\/span>\">{{ user<\/span>.username<\/span> | title<\/span> }}<\/h2<\/span>>\n\t    <p<\/span> class<\/span>=\"text<\/span>-center<\/span>\"><a<\/span> href<\/span>=\"mailto<\/span>:<\/span>{{user.email}}\">{{user.email}}<\/a><\/p>\n   \t    <hr>\n\t\t\n            <label for=\"<\/span>email\">Email Address:<\/label>\n            <input type=\"<\/span>email\" id=\"<\/span>email\" name=\"<\/span>email\" value=\"<\/span>{{user.email}}\" \/>\n\t\t\t\n\t\t\n\t\t<label for=\"<\/span>avatar\">Avatar:<\/label>\n\t\t<input type=\"<\/span>file\" name=\"<\/span>avatar\" id=\"<\/span>avatar\">\t\n\t\t\n\t    <button type=\"<\/span>submit\" class=\"<\/span>btn btn-primary full-width\">Update Profile<\/button>\n\t\n\t<\/form>\n<\/div>\n\n{% endblock content %}<\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Manually creating a profile #<\/a><\/h2>\n\n\n\n
First, log in to the admin site using the superuser account, you’ll see the Profiles<\/code> under the Users<\/code> app:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Second, click Add Profile button to create a new profile for the existing user:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Third, add a new profile for the user John and click the Save button:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Django will show that the profile for the user John was added successfully.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
If you log in as John and open the profile page http:\/\/127.0.0.1:8000\/profile\/<\/code>, you’ll see the following page:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
On this form, you can update a profile by changing the email address and uploading a new avatar.<\/p>\n\n\n\n
Include the profile URL in the header #<\/a><\/h2>\n\n\n\n
Modify the base.html<\/code> template to add the profile URL to the header:<\/p>\n\n\n
{%load static %}\n<\/span><\/span><!DOCTYPE html<\/span>><\/span>\n<\/span><\/span><html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span>    <head<\/span>><\/span>\n<\/span><\/span>        <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n<\/span><\/span>        <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n<\/span><\/span>        <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"{% static 'css\/style.css' %}\"<\/span> \/><\/span>\n<\/span><\/span>        <title<\/span>><\/span>Todo List<\/title<\/span>><\/span>\n<\/span><\/span>    <\/head<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span>    <body<\/span>><\/span>\n<\/span><\/span>        <header<\/span> class<\/span>=\"header\"<\/span>><\/span>\n<\/span><\/span>            <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n<\/span><\/span>            \t<a<\/span> href<\/span>=\"{%url 'home'%}\"<\/span> class<\/span>=\"logo\"<\/span>><\/span>Todo<\/a<\/span>><\/span>\n<\/span><\/span>            \t<nav<\/span> class<\/span>=\"nav\"<\/span>><\/span>\n<\/span><\/span>\t            \t<a<\/span> href<\/span>=\"{%url 'home'%}\"<\/span>><\/span><i<\/span> class<\/span>=\"bi bi-house-fill\"<\/span>><\/span><\/i<\/span>><\/span> Home<\/a<\/span>><\/span>\n<\/span><\/span>\t                {% if request.user.is_authenticated %}\n<\/span><\/span>\t    \t              \t<a<\/span> href<\/span>=\"{% url 'tasks' %}\"<\/span>><\/span><i<\/span> class<\/span>=\"bi bi-list-task\"<\/span>><\/span><\/i<\/span>><\/span> My Tasks<\/a<\/span>><\/span>\n<\/span><\/span>\t    \t              \t<a<\/span> href<\/span>=\"{% url 'task-create' %}\"<\/span>><\/span><i<\/span> class<\/span>=\"bi bi-plus-circle\"<\/span>><\/span><\/i<\/span>><\/span> Create Task<\/a<\/span>><\/span>\n<\/span><\/span>\t\t                <a<\/span> href<\/span>=\"{% url 'profile' %}\"<\/span> title<\/span>=\"Update my profile\"<\/span>><\/span>Hi {{request.user | title}}<\/a<\/span>><\/span>\n<\/span><\/mark>\t    \t                <a<\/span> href<\/span>=\"{% url 'logout' %}\"<\/span> class<\/span>=\"btn btn-outline\"<\/span>><\/span>Logout<\/a<\/span>><\/span>\n<\/span><\/span>\t                {% else %}\n<\/span><\/span>\t\t\t\t<a<\/span> href<\/span>=\"{% url 'login' %}\"<\/span> class<\/span>=\"btn btn-outline\"<\/span>><\/span>Login<\/a<\/span>><\/span>\n<\/span><\/span>\t            \t        <a<\/span> href<\/span>=\"{% url 'register' %}\"<\/span> class<\/span>=\"btn btn-primary\"<\/span>><\/span>Join Now<\/a<\/span>><\/span>\n<\/span><\/span>\t                {% endif %}\n<\/span><\/span>\t             <\/nav<\/span>><\/span>\n<\/span><\/span>            <\/div<\/span>><\/span>\n<\/span><\/span>        <\/header<\/span>><\/span>\n<\/span><\/span>        <main<\/span>><\/span>\n<\/span><\/span>            <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n<\/span><\/span>            \t{% if messages %}\n<\/span><\/span>\t\t\t\t{% for message in messages %}\n<\/span><\/span>\t\t\t\t\t<div<\/span> class<\/span>=\"alert alert-{{message.tags}}\"<\/span>><\/span>\n<\/span><\/span>\t\t\t\t\t       {{message}}\n<\/span><\/span>\t\t\t\t\t     <\/div<\/span>><\/span>\n<\/span><\/span>\t\t\t\t\t   {% endfor %}\n<\/span><\/span>\t\t\t\t{% endif %}\n<\/span><\/span>            \n<\/span><\/span>             {%block content %}\n<\/span><\/span>             {%endblock content%}\n<\/span><\/span>            <\/div<\/span>><\/span>\n<\/span><\/span>        <\/main<\/span>><\/span>\n<\/span><\/span>        <footer<\/span> class<\/span>=\"footer\"<\/span>><\/span>\n<\/span><\/span>            <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n<\/span><\/span>                <p<\/span>><\/span>\u00a9 Copyright {% now \"Y\" %} by <a<\/span> href<\/span>=\"https:\/\/www.pythontutorial.net\"<\/span>><\/span>Python Tutorial<\/a<\/span>><\/span><\/p<\/span>><\/span>\n<\/span><\/span>            <\/div<\/span>><\/span>\n<\/span><\/span>        <\/footer<\/span>><\/span>\n<\/span><\/span>    <\/body<\/span>><\/span>\n<\/span><\/span><\/html<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Creating profile automatically #<\/a><\/h2>\n\n\n\n
If you log in as Jane<\/code> and access the profile page, you’ll get the following error:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The reason is that we haven’t created the profile for the user Jane<\/code>. To fix this issue, we should create a profile once a user registers successfully. To implement this, we’ll use something called signals in Django.<\/p>\n\n\n\n
First, create signals.py<\/code> file in the users<\/code> app with the following code:<\/p>\n\n\n
from<\/span> django.db.models.signals import<\/span> post_save\nfrom<\/span> django.contrib.auth.models import<\/span> User\nfrom<\/span> django.dispatch import<\/span> receiver\nfrom<\/span> .models import<\/span> Profile\n\n\n@receiver(post_save, sender=User)<\/span>\ndef<\/span> create_profile<\/span>(sender, instance, created, **kwargs)<\/span>:<\/span>\n    if<\/span> created:\n        Profile.objects.create(user=instance)\n\n\n@receiver(post_save, sender=User)<\/span>\ndef<\/span> save_profile<\/span>(sender, instance, **kwargs)<\/span>:<\/span>\n    instance.profile.save()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
In this signals.py<\/code> file:<\/p>\n\n\n\n
To define the one-to-one relationship<\/a>,  you use the OneToOneField<\/code>:<\/p>\n\n\n