Django — Step 4

Brian Mayrose

3 min readJul 8, 2019

Adding A Second App

Django — Step 3

Static Files and Media

medium.com

In Step 4 we are going to add a second app. This will also basically be a recap of what we did in step 1.

We will call this new app display_1.

While in the project root from the terminal, run the startapp command:

pyhton manage.py startapp display_1

This creates a new directory titled ‘display_1’

Open up settings.py and add this new app to the INSTALLED_APPS section below the ‘index.apps.IndexConfig’ we added in step 1:

'display_1.apps.Display1Config',

Django removes the ‘_’ character automatically when it created the class definition.

Save settings.py and open the djDemo/urls.py file and add the path to the new app:

path('display_1', include('display_1.urls'),

Save this urls.py and create a urls.py file within the display_1 directory. Just like in the index/urls.py file we need to add our imports and make a path for the main page of the display_1 app. We are also going to create a path to a page that will show an individual item from the display page.

from django.urls import path
from . import viewsurlpatterns = [
    path('', views.index, name='display_1'),
    path('<int:display_1_item_id>', views.display_1_item, name='display_1_item'),
    ]

Save display_1/urls.py and open display_1/views.py and we can define the routes. Just like in step 1 we define an index route, but now we also define route for individual items:

from django.shortcuts import renderdef index(request):
    return render(request, 'display_1/index.html')def display_1_item(request):
    return render(request, 'display_1/display_1_item.html')

Save this view file and create a directory in the templates directory titled ‘display_1’. Within this new directory create an index.html file and a display_1_item.html file. You can actually copy the contents of the index.html file from step 1 into both of these new HTML files, just change the display text. We will be updating this content in future steps to display dynamic content from a database.

{% extends 'base.html' %}{% block content %}
Display index
{% endblock %}

Save and reload your development server

python manage.py runserver

Then navigate to http://127.0.0.1:8000/display_1/

You will see the new index.html contents displayed with the same background-color as defined from the base.html template.

To add some custom css to this page just create a display_1/static directory and inside create a css directory. Thin inside the css directory create a css file called display_1_index.css and add a styled class:

.display_body{
  background-color: #aaaaff;
}

Save the css file and open the display_1/index file and add the class to a body tag within the content blocks:

{% block content %}<body class="display_body">
Display index
</body>{% endblock %}

Save the HTML file and open the base.html file and add a link to this new css file:

<link rel="stylesheet" href="{% static 'css/index.css' %}">
<link rel="stylesheet" href="{% static 'css/display_1_index.css' %}">

Now start the server and you will see a different color for the background of the display_1 index page than for the index page of the project.

The separation of the css files within their appropriate app directories helps with future changes especially when your project is large with numerous apps.

In step 5 we will go over adding reusable components. We will create a navigation bar in order to navigate between these two pages.

Django — Step 5

Reusable Components