Django - Index Page

When a new Django project is created with the startproject command, the URL http://localhost:8000/ shows a default index page. It shows that the Django installation is done successfully.

Create a project with the following command −

django-admin startproject myproject

Now that your project is created and configured, make sure it's working −

python manage.py runserver

On running the above command, you will get to see something like the following on your screen −

Validating models...

0 errors found
March 09, 2022 - 12:24:26
Django version 4.0, using settings 'myproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.Quit the server with CONTROL-C.

The development server is running at http://127.0.0.1:8000/. Open the link in the browser.

In the main "myproject" folder, use the manage.py command −

python manage.py startapp myapp

You just created the myapp application. Django also creates a "myapp" folder with the application structure −

myapp/
   __init__.py
   admin.py
   models.py
   tests.py
   views.py

__init__.py − Just to make sure python handles this folder as a package.
admin.py − This file helps you make the app modifiable in the admin interface.
models.py − This is where all the application models are stored.
tests.py − This is where your unit tests are.
views.py − This is where your application views are.

Update the INSTALLED_APPS list in the settings.py file of your project (add your app name) −

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'myapp',]

We will create a simple view in myapp to say "welcome to my app!"

Open "myapp\views.py" and add the following view function −

from django.shortcuts import render

# Create your views here.

def index(request):
   # other view code here
   return render(request, index.html', {})

In this view, we use HttpResponse to render the HTML page. To see this view as a page, we just need to map it to a URL.

Save the following Python script as myapp/urls.py −

from django.urls import path
from . import views

urlpatterns = [
   path('', views.index, name='index'),
]

The next step is to point the root URLconf at the myapp.urls module.

In myproject/urls.py, add an import for django.urls.include and insert an include() in the urlpatterns list, so you have −

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
   path('', include('myapp.urls')),
   path('admin/', admin.site.urls),
]

Now run the Django development server −

python manage.py runserver

Visit the following URL to verify that the hello() view is rendered −

http://localhost:8000/

You should be able to see the output of the index page.

A Django Home Page with Multiple Apps

However, a Django project may have more than one apps in it. Hence, the project home page should contain the links to the home pages of individual apps.

Let us create two apps in the current Django project −

python manage.py startapp customers

And,

python manage.py startapp products

Rewrite the main index page of the project as −

<!Doctype html>
<html>
<body>
   <!--header-->
   <div style="height:10%;">
      <h2 align="center">My Web Application</h2>
      <hr>
   </div>
   <div style="width:100%;">
      <!—side bar-->
      <div style="width:20%; float:left; border-right-style:groove">
         <ul>
            <b>
               <li><a href="admin/">Admin</a></li>
               <li><a href="customers/">Customers</a></li>
               <li><a href="Products/">Products</a></li>
            </b>
         </ul>
      </div>
      <!--contents-->
      <div style="margin-left:21%;">
         <p>
            <h2 align="center">Main Index Page</h2>
         </p>
      </div>
   </div>
   <br><br><br>
   <!--footer-->
   <hr>
   <div>
      <h4 align="right">All rights reserved</h4>
   </div>
</body>
</html>

The index page for the customer app should be saved in the templates directory. It is rendered by the view in customers/views.py file −

from django.shortcuts import render

# Create your views here.
def index(request):
   return render(request, "customerindex.html", {})

Similarly, the index page for products app is created and its mapped view is defined in the "products/views.py" file −

from django.shortcuts import render

# Create your views here.
def index(request):
   return render(request, "productindex.html", {})

You also need to define the urlpattern list for each app as −

from django.urls import path
from . import views

urlpatterns = [
   path("", views.index, name="customer-index"),
]

Similarly, do the following for the products app −

from django.urls import path
from . import views

urlpatterns = [
   path("", views.index, name="product-index"),
]

Update the URLCONF of the myproject/urls.py file −

from django.contrib import admin
from django.urls import path, include
from . import views

urlpatterns = [
   path('admin/', admin.site.urls),
   path('products/', include("products.urls")),
   path('customers/', include("customers.urls")),
   path('', views.index, name='index'),
]

Run the Django server and visit the root URL of the Django project (http://localhost:8000/) −

Print Page