Building a Social Media App With Django and Python Part 14: Direct Messages Pt. 1

Video Tutorial

In this tutorial we are going to start to add direct messages between users. In this part we will get it working with it’s basic functionality and then we will come back and add some extra features to it next. This will not be a real time chat, to do that would be more complicated and would require something like Django channels. If there is any interest in that, I could come back later and update it to include that. However for now, we won’t do that. We will need to make quite a few changes to get this working, let’s start with out models.py.

Updating the Models.py

We will need two new models for this, we will need a ThreadModel which will hold all messages between two users. Then we will have a MessageModel that will hold the data for the individual message. On the thread model, we will need to hold the user, the receiving user, and a boolean for if there are any unread messages. For the message model, we will hold the thread its attached to, the sending user, the receiving user, the body, the image, the date it was sent, and a boolean for if its read.

Next we need to create a couple forms to handle creating a new thread or message.

Updating the Forms.py

We will need two forms, one will create a thread, where we need to input a username of the person we want to talk to. We also need a message thread that will have a text box for the message. Let’s add both of these two our social/forms.py file.

Next we need to create a couple views that use these forms and hold the logic for the functionality of our dm system.

Updating the Views.py

We are going to need a couple views, a CreateThread, a ListThreads (our inbox), a CreateMessage, and a ThreadView. These will handle all of the basic functionality for the direct messages. Let’s go through them one by one.

The CreateThread view will have two methods on it, one will be a get method that will display the form to enter a user name. There will also be a post method to handle creating the thread. To create a thread we want to get what was entered in the form and see if there is a user that matches that username. If there is not we will stop here. If there is a user, we will check to see if there is a thread between these users already, if there is we won’t create one and we will just open that thread up. And finally, if there is no thread we will create one and redirect to that new thread.

Next, we need a ListThreads view. This will act as an inbox, where we can see all of our conversations. All we need here is a get method that will get all threads where the logged in user is either the sending user or receiving user.

Next we need a CreateMessage view. This will need one method, a post method to create a message. We don’t need a get method because our form will be displayed in our ThreadView which will show the conversation. We just need to send a post request to this view to create the message and then redirect back to the ThreadView.

Finally, we need a ThreadView that will show all messages in a thread and it will display a form at the bottom to send a new message.

Now that we have the views created, we need to create our html templates for each of them.

Creating the HTML Templates

First we need the create thread with the form.

Next we need the ListThreads template which we will call inbox.html

We don’t need a template for the CreateMessage view so the last view we need to create a template for is the ThreadView. This one will be a little more complicated. We need to put the messages on the left or right of the screen based on who sent them, if the logged in user is the user who sent the message, that message will show up on the left, otherwise it will show up on the right. Then at the bottom we will show our create message form.

Next we need to update our urls.py

Updating Urls.py

Nothing new or special here, we just need url paths for each of our views.

Adding the Inbox Link to the Navbar

Let’s add a link to the navbar to get to our inbox.

Adding Some CSS Styles

The final step is to add some CSS styles to make everything look better, we already added them to our templates so let’s just add them to our style.css now.

This is where we will stop for today, next we will come back and add some extra features like notifications, image uploads, and unread alerts.