HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

RED

255

GREEN

BLUE

Example

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

Example

rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)

RGBA Color Values

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:

RED

255

GREEN

BLUE

ALPHA

Example

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

Django is a back-end server side web framework.

Django is free, open source and written in Python.

Django makes it easier to build web pages using Python.

Learning by Doing

In this tutorial you get a step by step guide on how to install and create a Django project. You will learn how to create a project where you can add, read, update or delete data.

You will learn how to make HTML Templates and use Django Template Tags to insert data within a HTML document.

You will learn how to work with QuerySets to extract, filter, and sort data from the database.

You will also learn how to set up a PostgreSQL database and how to deploy your Django project to the world.

Django Exercises

Top of Form

Test Yrself With Exercises

Bottom of Form

Django Quiz

Learn by taking a quiz! The quiz will give you a signal of how much you know about Django.

Learning by Examples

In the tutorial we will use examples to better explain the various concepts.

Example

<ul>

{% for x in mymembers %}

<li>{{ x.firstname }}</li>

{% endfor %}

</ul>

What is Django?

Django is a Python framework that makes it easier to create web sites using Python.

Django takes care of the difficult stuff so that you can concentrate on building your web applications.

Django emphasizes reusability of components, also referred to as DRY (Don't Repeat Yourself), and comes with ready-to-use features like login system, database connection and CRUD operations (Create Read Update Delete).

Django is especially helpful for database driven websites.

How does Django Work?

Django follows the MVT design pattern (Model View Template).

Model - The data you want to present, usually data from a database.
View - A request handler that returns the relevant template and content - based on the request from the user.
Template - A text file (like an HTML file) containing the layout of the web page, with logic on how to display the data.

Model

The model provides data from the database.

In Django, the data is delivered as an Object Relational Mapping (ORM), which is a technique designed to make it easier to work with databases.

The most common way to extract data from a database is SQL. One problem with SQL is that you have to have a pretty good understanding of the database structure to be able to work with it.

Django, with ORM, makes it easier to communicate with the database, without having to write complex SQL statements.

The models are usually located in a file called models.py.

View

A view is a function or method that takes http requests as arguments, imports the relevant model(s), and finds out what data to send to the template, and returns the final result.

The views are usually located in a file called views.py.

Template

A template is a file where you describe how the result should be represented.

Templates are often .html files, with HTML code describing the layout of a web page, but it can also be in other file formats to present other results, but we will concentrate on .html files.

Django uses standard HTML to describe the layout, but uses Django tags to add logic:

My Homepage

My name is {{ firstname }}.

The templates of an application is located in a folder named templates.

URLs

Django also provides a way to navigate around the different pages in a website.

When a user requests a URL, Django decides which view it will send it to.

This is done in a file called urls.py.

So, What is Going On?

When you have installed Django and created your first Django web application, and the browser requests the URL, this is basically what happens:

Django receives the URL, checks the urls.py file, and calls the view that matches the URL.
The view, located in views.py, checks for relevant models.
The models are imported from the models.py file.
The view then sends the data to a specified template in the template folder.
The template contains HTML and Django tags, and with the data it returns finished HTML content back to the browser.

Django can do a lot more than this, but this is basically what you will learn in this tutorial, and are the basic steps in a simple web application made with Django.

Django History

Django was invented by Lawrence Journal-World in 2003, to meet the short deadlines in the newspaper and at the same time meeting the demands of experienced web developers.

Initial release to the public was in July 2005.

Latest version of Django is 4.0.3 (March 2022).

To install Django, you must have installed, and a package manager like .

PIP is included in Python from version 3.4.

Django Requires Python

To check if your system has Python installed, run this command in the command prompt:

python --version

If Python is installed, you will get a result with the version number, like this

Python 3.9.2

If you find that you do not have Python installed on your computer, then you can download it for free from the following website:

PIP

To install Django, you must use a package manager like PIP, which is included in Python from version 3.4.

To check if your system has PIP installed, run this command in the command prompt:

pip --version

If PIP is installed, you will get a result with the version number.

For me, on a windows machine, the result looks like this:

pip 20.2.3 from c:python39libsite-packagespip (python 3.9)

If you do not have PIP installed, you can download and install it from this page:

Virtual Environment

It is suggested to have a dedicated virtual environment for each Django project, and in the you will learn how to create a virtual environment, and then install Django in it.

Virtual Environment

It is suggested to have a dedicated virtual environment for each Django project, and one way to manage a virtual environment is , which is included in Python.

The name of the virtual environment is your choice, in this tutorial we will call it myworld.

Type the following in the command prompt, remember to navigate to where you want to create your project:

Windows:

py -m venv myworld

Unix/MacOS:

python -m venv myworld

This will set up a virtual environment, and create a folder named "myworld" with subfolders and files, like this:

myworld
  Include
  Lib
  Scripts
  pyvenv.cfg

Then you have to activate the environment, by typing this command:

Windows:

myworldScriptsactivate.bat

Unix/MacOS:

source myworld/bin/activate

Once the environment is activated, you will see this result in the command prompt:

Windows:

(myworld) C:UsersYour Name>

Unix/MacOS:

(myworld) ... $

Note: You must activate the virtual environment every time you open the command prompt to work on your project.

Install Django

In the you will finally learn how to install Django!

Install Django

Now, that we have created a virtual environment, we are ready to install Django.

Note: Remember to install Django while you are in the virtual environment!

Django is installed using pip, with this command:

Windows:

(myworld) C:UsersYour Name>py -m pip install Django

Unix/MacOS:

(myworld) ... $ python -m pip install Django

Which will give a result that looks like this (at least on my Windows machine):

Collecting Django
Downloading Django-4.0.3-py3-none-any.whl (8.0 MB)
|████████████████████████████████| 8.0 MB 2.2 MB/s
Collecting sqlparse>=0.2.2
Using cached sqlparse-0.4.2-py3-none-any.whl (42 kB)
Collecting asgiref<4,>=3.4.1
Downloading asgiref-3.5.0-py3-none-any.whl (22 kB)
Collecting tzdata; sys_platform == "win32"
Downloading tzdata-2021.5-py2.py3-none-any.whl (339 kB)
|████████████████████████████████| 339 kB 6.4 MB/s
Installing collected packages: sqlparse, asgiref, tzdata, Django
Successfully installed Django-4.0.3 asgiref-3.5.0 sqlparse-0.4.2 tzdata-2021.5
WARNING: You are using pip version 20.2.3; however, version 22.3 is available.
You should consider upgrading via the 'C:UsersYour NamemyworldScriptspython.exe -m pip install --upgrade pip' command.

That's it! Now you have installed Django in your new project, running in a virtual environment!

Windows, Mac, or Unix?

You can run this project on either one. There are some small differences, like when writing commands in the command prompt, Windows uses py as the first word in the command line, while Unix and MacOS use python:

Windows:

py --version

Unix/MacOS:

python --version

In the rest of this tutorial, we will be using the Windows command.

Check Django Version

You can check if Django is installed by asking for its version number like this:

(myworld) C:UsersYour Name>django-admin --version

If Django is installed, you will get a result with the version number:

4.1.2

What's Next?

Now you are ready to create a Django project in a virtual environment on your computer.

In the next chapters of this tutorial we will create a Django project and look at the various features of Django and hopefully make you a Django developer.

My First Project

Once you have come up with a suitable name for your Django project, like mine: my_tennis_club, navigate to where in the file system you want to store the code (in the virtual environment), I will navigate to the myworld folder, and run this command in the command prompt:

django-admin startproject my_tennis_club

Django creates a my_tennis_club folder on my computer, with this content:

my_tennis_club
    manage.py
    my_tennis_club/
        __init__.py
        asgi.py
        settings.py
        urls.py
        wsgi.py

These are all files and folders with a specific meaning, you will learn about some of them later in this tutorial, but for now, it is more important to know that this is the location of your project, and that you can start building applications in it.

Run the Django Project

Now that you have a Django project, you can run it, and see what it looks like in a browser.

Navigate to the /my_tennis_club folder and execute this command in the command prompt:

py manage.py runserver

Which will produce this result:

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
October 27, 2022 - 13:03:14
Django version 4.1.2, using settings 'my_tennis_club.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

Open a new browser window and type in the address bar.

What's Next?

We have a Django project!

The next step is to make an app in your project.

You cannot have a web page created with Django without an app.

What is an App?

An app is a web application that has a specific meaning in your project, like a home page, a contact form, or a members database.

In this tutorial we will create an app that allows us to list and register members in a database.

But first, let's just create a simple Django app that displays "Hello World!".

Create App

I will name my app members.

Start by navigating to the selected location where you want to store the app, in my case the my_tennis_club folder, and run the command below.

If the server is still running, and you are not able to write commands, press [CTRL] [BREAK], or [CTRL] [C] to stop the server and you should be back in the virtual environment.

py manage.py startapp members

Django creates a folder named members in my project, with this content:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        migrations/
            __init__.py
        __init__.py
        admin.py
        apps.py
        models.py
        tests.py
        views.py

These are all files and folders with a specific meaning. You will learn about most of them later in this tutorial.

First, take a look at the file called views.py.

This is where we gather the information we need to send back a proper response.

You will learn more about views in the .

Views

Django views are Python functions that takes http requests and returns http response, like HTML documents.

A web page that uses Django is full of views with different tasks and missions.

Views are usually put in a file called views.py located on your app's folder.

There is a views.py in your members folder that looks like this:

my_tennis_club/members/views.py:

from django.shortcuts import render

# Create your views here.

Find it and open it, and replace the content with this:

my_tennis_club/members/views.py:

from django.shortcuts import render

from django.http import HttpResponse

def members(request):

return HttpResponse("Hello world!")

Note: The name of the view does not have to be the same as the application.

I call it members because I think it fits well in this context.

This is a simple example on how to send a response back to the browser.

But how can we execute the view? Well, we must call the view via a URL.

You will learn about URLs in the next chapter.

URLs

Create a file named urls.py in the same folder as the views.py file, and type this code in it:

my_tennis_club/members/urls.py:

from django.urls import path

from . import views

urlpatterns = [

path('members/', views.members, name='members'),

]

The urls.py file you just created is specific for the members application. We have to do some routing in the root directory my_tennis_club as well. This may seem complicated, but for now, just follow the instructions below.

There is a file called urls.py on the my_tennis_club folder, open that file and add the include module in the import statement, and also add a path() function in the urlpatterns[] list, with arguments that will route users that comes in via 127.0.0.1:8000/.

Then your file will look like this:

my_tennis_club/my_tennis_club/urls.py:

from django.contrib import admin

from django.urls import include, path

urlpatterns = [

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

path('admin/', admin.site.urls),

]

If the server is not running, navigate to the /my_tennis_club folder and execute this command in the command prompt:

py manage.py runserver

In the browser window, type 127.0.0.1:8000/members/ in the address bar.

Templates

In the Django Intro page, we learned that the result should be in HTML, and it should be created in a template, so let's do that.

Create a templates folder inside the members folder, and create a HTML file named myfirst.html.

The file structure should be like this:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
            myfirst.html

Open the HTML file and insert the following:

my_tennis_club/members/templates/myfirst.html:

<!DOCTYPE html>

<html>

<body>

<h1>Hello World!</h1>

<p>Welcome to my first Django project!</p>

</body>

</html>

Modify the View

Open the views.py file and replace the members view with this:

my_tennis_club/members/views.py:

from django.http import HttpResponse

from django.template import loader

def members(request):

template = loader.get_template('myfirst.html')

return HttpResponse(template.render())

Change Settings

To be able to work with more complicated stuff than "Hello World!", We have to tell Django that a new app is created.

This is done in the settings.py file in the my_tennis_club folder.

Look up the INSTALLED_APPS[] list and add the members app like this:

my_tennis_club/my_tennis_club/settings.py:

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'members'

]

Then run this command:

py manage.py migrate

Which will produce this output:

Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices... OK
Applying contenttypes.0002_remove_content_type_name... OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying auth.0012_alter_user_first_name_max_length... OK
Applying sessions.0001_initial... OK

(myworld) C:UsersYour Namemyworldmy_tennis_club>

Start the server by navigating to the /my_tennis_club folder and execute this command:

py manage.py runserver

In the browser window, type 127.0.0.1:8000/members/ in the address bar.

The result should look like this:

Templates

In the Django Intro page, we learned that the result should be in HTML, and it should be created in a template, so let's do that.

Create a templates folder inside the members folder, and create a HTML file named myfirst.html.

The file structure should be like this:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
            myfirst.html

Open the HTML file and insert the following:

my_tennis_club/members/templates/myfirst.html:

<!DOCTYPE html>

<html>

<body>

<h1>Hello World!</h1>

<p>Welcome to my first Django project!</p>

</body>

</html>

Modify the View

Open the views.py file and replace the members view with this:

my_tennis_club/members/views.py:

from django.http import HttpResponse

from django.template import loader

def members(request):

template = loader.get_template('myfirst.html')

return HttpResponse(template.render())

Change Settings

To be able to work with more complicated stuff than "Hello World!", We have to tell Django that a new app is created.

This is done in the settings.py file in the my_tennis_club folder.

Look up the INSTALLED_APPS[] list and add the members app like this:

my_tennis_club/my_tennis_club/settings.py:

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'members'

]

Then run this command:

py manage.py migrate

Which will produce this output:

Start the server by navigating to the /my_tennis_club folder and execute this command:

py manage.py runserver

In the browser window, type 127.0.0.1:8000/members/ in the address bar.

The result should look like this:

A Django model is a table in your database.

Django Models

Up until now in this tutorial, output has been static data from Python or HTML templates.

Now we will see how Django allows us to work with data, without having to change or upload files in the prosess.

In Django, data is created in objects, called Models, and is actually tables in a database.

Create Table (Model)

To create a model, navigate to the models.py file in the /members/ folder.

Open it, and add a Member table by creating a Member class, and describe the table fields in it:

my_tennis_club/members/models.py:

from django.db import models

class Member(models.Model):

firstname = models.CharField(max_length=255)

lastname = models.CharField(max_length=255)

The first field, firstname, is a Text field, and will contain the first name of the members.

The second field, lastname, is also a Text field, with the member's last name.

Both firstname and lastname is set up to have a maximum of 255 characters.

SQLite Database

When we created the Django project, we got an empty SQLite database.

It was created in the my_tennis_club root folder, and has the filename db.sqlite3.

By default, all Models created in the Django project will be created as tables in this database.

Migrate

Now when we have described a Model in the models.py file, we must run a command to actually create the table in the database.

Navigate to the /my_tennis_club/ folder and run this command:

py manage.py makemigrations members

Which will result in this output:

Migrations for 'members':
membersmigrations001_initial.py
- Create model Member

(myworld) C:UsersYour Namemyworldmy_tennis_club>

Django creates a file describing the changes and stores the file in the /migrations/ folder:

my_tennis_club/members/migrations/0001_initial.py:

# Generated by Django 4.1.2 on 2022-10-27 11:14

from django.db import migrations, models

class Migration(migrations.Migration):

initial = True

dependencies = [

]

operations = [

migrations.CreateModel(

name='Member',

fields=[

('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),

('firstname', models.CharField(max_length=255)),

('lastname', models.CharField(max_length=255)),

]

Note that Django inserts an id field for your tables, which is an auto increment number Django Insert Data

Update Records

To update records that are already in the database, we first have to get the record we want to update:

>>> from members.models import Member
>>> x = Member.objects.all()[4]

x will now represent the member at index 4, which is "Stale Refsnes", but to make sure, let us see if that is correct:

>>> x.firstname

This should give you this result:

'Stale'

Now we can change the values of this record:

>>> x.firstname = "Stalikken"
>>> x.save()

Execute this command to see if the Member table got updated:

>>> Member.objects.all().values()

Hopefully, the result will look like this:

{'id': 2, 'firstname': 'Tobias', 'lastname': 'Refsnes'},
{'id': 3, 'firstname': 'Linus', 'lastname': 'Refsnes'},
{'id': 4, 'firstname': 'Lene', 'lastname': 'Refsnes'},
{'id': 5, 'firstname': 'Stalikken', 'lastname': 'Refsnes'},
{'id': 6, 'firstname': 'Jane', 'lastname': 'Doe'}]>

Delete Records

To delete a record in a table, start by getting the record you want to delete:

>>> from members.models import Member
>>> x = Member.objects.all()[5]

x will now represent the member at index 5, which is "Jane Doe", but to make sure, let us see if that is correct:

>>> x.firstname

This should give you this result:

'Jane'

Now we can delete the record:

>>> x.delete()

The result will be:

(1, {'members.Member': 1})

Which tells us how many items were deleted, and from which Model.

If we look at the Member Model, we can see that 'Jane Doe' is removed from the Model:

>>> Member.objects.all().values()
{'id': 2, 'firstname': 'Tobias', 'lastname': 'Refsnes'},
{'id': 3, 'firstname': 'Linus', 'lastname': 'Refsnes'},
{'id': 4, 'firstname': 'Lene', 'lastname': 'Refsnes'},
{'id': 5, 'firstname': 'Stalikken', 'lastname': 'Refsnes'}]>

Add Fields in the Model

To add a field to a table after it is created, open the models.py file, and make your changes:

my_tennis_club/members/models.py:

from django.db import models

class Member(models.Model):
  firstname = models.CharField(max_length=255)
  lastname = models.CharField(max_length=255)
  phone = models.IntegerField()
  joined_date = models.DateField()

As you can see, we want to add phone and joined_date to our Member Model.

This is a change in the Model's structure, and therefor we have to make a migration to tell Django that it has to update the database:

py manage.py makemigrations members

Which, in my case, will result in a prompt, because I try to add fields that are not allowed to be null, to a table that already contains records.

As you can see, Django asks if I want to provide the fields with a specific value, or if I want to stop the migration and fix it in the model:

py manage.py makemigrations members
You are trying to add a non-nullable field 'joined_date' to members without a default; we can't do that (the database needs something to populate existing rows).
Please select a fix:
1) Provide a one-off default now (will be set on all existing rows with a null value for this column)
2) Quit, and let me add a default in models.py
Select an option:

I will select option 2, and open the models.py file again and allow NULL values for the two new fields:

my_tennis_club/members/models.py:

from django.db import models

class Member(models.Model):
  firstname = models.CharField(max_length=255)
  lastname = models.CharField(max_length=255)
  phone = models.IntegerField(null=True)
  joined_date = models.DateField(null=True)

And make the migration once again:

py manage.py makemigrations members

Which will result in this:

Migrations for 'members':
  membersmigrations�002_member_joined_date_member_phone.py
    - Add field joined_date to member
    - Add field phone to member

Run the migrate command:

py manage.py migrate

Which will result in this output:

Operations to perform:
Apply all migrations: admin, auth, contenttypes, members, sessions
Running migrations:
Applying members.0002_member_joined_date_member_phone... OK

(myworld) C:UsersYour Namemyworldmy_tennis_club>

Insert Data

We can insert data to the two new fields with the same approach as we did in the :

First we enter the Python Shell:

py manage.py shell

Now we are in the shell, the result should be something like this:

Python 3.9.2 (tags/v3.9.2:1a79785, Feb 19 2021, 13:44:55) [MSC v.1928 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>>

At the bottom, after the three >>> write the following (and hit [enter] for each line):

>>> from members.models import Member
>>> x = Member.objects.all()[0]
>>> x.phone = 5551234
>>> x.joined_date = '2022-01-05'
>>> x.save()

This will insert a phone number and a date in the Member Model, at least for the first record, the four remaining records will for now be left empty. We will deal with them later in the tutorial.

Execute this command to see if the Member table got updated:

>>> Member.objects.all().values()

The result should look like this:

{'id': 1, 'firstname': 'Emil', 'lastname': 'Refsnes', 'phone': 5551234, 'joined_date': datetime.date(2022, 1, 5)},
{'id': 2, 'firstname': 'Tobias', 'lastname': 'Refsnes', 'phone': None, 'joined_date': None},
{'id': 3, 'firstname': 'Linus', 'lastname': 'Refsnes', 'phone': None, 'joined_date': None},
{'id': 4, 'firstname': 'Lene', 'lastname': 'Refsnes', 'phone': None, 'joined_date': None},
{'id': 5, 'firstname': 'Stalikken', 'lastname': 'Refsnes', 'phone': None, 'joined_date': None}]>

Create Template

After creating Models, with the fields and data we want in them, it is time to display the data in a web page.

Start by creating an HTML file named all_members.html and place it in the /templates/ folder:

my_tennis_club/members/templates/all_members.html:

<!DOCTYPE html>

<html>

<body>

<h1>Members</h1>

<ul>

{% for x in mymembers %}

<li>{{ x.firstname }} {{ x.lastname }}</li>

{% endfor %}

</ul>

</body>

</html>

Do you see the {% %} brackets inside the HTML document?

They are Django Tags, telling Django to perform some programming logic inside these brackets.

You will learn more about Django Tags in our Django Tags chapter.

Modify View

Next we need to make the model data available in the template. This is done in the view.

In the view we have to import the Member model, and send it to the template like this:

my_tennis_club/members/views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def members(request):

mymembers = Member.objects.all().values()

template = loader.get_template('all_members.html')

context = {

'mymembers': mymembers,

}

return HttpResponse(template.render(context, request))

The members view does the following:

Creates a mymembers object with all the values of the Member model.
Loads the all_members.html template.
Creates an object containing the mymembers object.
Sends the object to the template.
Outputs the HTML that is rendered by the template.

The Result

We have created an example so that you can see the result:

If you have followed all the steps on your own computer, you can see the result in your own browser:

Start the server by navigating to the /my_tennis_club/ folder and execute this command:

py manage.py runserver

In the browser window, type 127.0.0.1:8000/members/ in the address bar.

Details Template

The next step in our web page will be to add a Details page, where we can list more details about a specific member.

Start by creating a new template called details.html:

my_tennis_club/members/templates/details.html:

Phone: {{ mymember.phone }}

Member since: {{ mymember.joined_date }}

Back to Members

Add Link in all-members Template

The list in all_members.html should be clickable, and take you to the details page with the ID of the member you clicked on:

my_tennis_club/members/templates/all_members.html:

Members

{% for x in mymembers %}
{{ x.firstname }} {{ x.lastname }}
{% endfor %}

Create new View

Then create a new view in the views.py file, that will deal with incoming requests to the /details/ url:

my_tennis_club/members/views.py:

from django.http import HttpResponse
from django.template import loader
from .models import Member

def members(request):
  mymembers = Member.objects.all().values()
  template = loader.get_template('all_members.html')
  context = {
    'mymembers': mymembers,
  }
  return HttpResponse(template.render(context, request))
  
def details(request, id):
  mymember = Member.objects.get(id=id)
  template = loader.get_template('details.html')
  context = {
    'mymember': mymember,
  }
  return HttpResponse(template.render(context, request))

The details view does the following:

Gets the id as an argument.
Uses the id to locate the correct record in the Member table.
loads the details.html template.
Creates an object containing the member.
Sends the object to the template.
Outputs the HTML that is rendered by the template.

Add URLs

Now we need to make sure that the /details/ url points to the correct view, with id as a parameter.

Open the urls.py file and add the details view to the urlpatterns list:

my_tennis_club/members/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('members/', views.members, name='members'),
    path('members/details/', views.details, name='details'),
]

If you have followed all the steps on your own computer, you can see the result in your own browser: .

If the server is down, you have to start it again with the runserver command:

py manage.py runserver

The extends Tag

In the previous pages we created two templates, one for listing all members, and one for details about a member.

The templates have a set of HTML code that are the same for both templates.

Django provides a way of making a "parent template" that you can include in all pages to do the stuff that is the same in all pages.

Start by creating a template called master.html, with all the necessary HTML elements:

MasterGet your own Django Server

my_tennis_club/members/templates/master.html:

<!DOCTYPE html>

<html>

<head>

<title>{% block title %}{% endblock %}</title>

</head>

<body>

{% block content %}

{% endblock %}

</body>

</html>

Do you see Django block Tag inside the <title> element, and the <body> element?

They are placeholders, telling Django to replace this block with content from other sources.

Modify Templates

Now the two templates (all_members.html and details.html) can use this master.html template.

This is done by including the master template with the {% extends %} tag, and inserting a title block and a content block:

Members

my_tennis_club/members/templates/all_members.html:

{% extends "master.html" %}

{% block title %}

My Tennis Club - List of all members

{% endblock %}

{% block content %}

<h1>Members</h1>

<ul>

{% for x in mymembers %}

<li><a href="details/{{ x.id }}">{{ x.firstname }} {{ x.lastname }}</a></li>

{% endfor %}

</ul>

{% endblock %}

Details

my_tennis_club/members/templates/details.html:

{% extends "master.html" %}

{% block title %}

Details about {{ mymember.f

Main Index Page

Our project needs a main page.

The main page will be the landing page when someone visits the root folder of the project.

Now, you get an error when visiting the root folder of your project:

127.0.0.1:8000/.

Start by creating a template called main.html:

MainGet your own Django Server

my_tennis_club/members/templates/main.html:

{% extends "master.html" %}

{% block title %}

My Tennis Club

{% endblock %}

{% block content %}

<h1>My Tennis Club</h1>

<h3>Members</h3>

<p>Check out all our <a href="members/">members</a></p>

{% endblock %}

Create new View

Then create a new view called main, that will deal with incoming requests to root of the project:

my_tennis_club/members/views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def members(request):

mymembers = Member.objects.all().values()

template = loader.get_template('all_members.html')

context = {

'mymembers': mymembers,

}

return HttpResponse(template.render(context, request))

def details(request, id):

mymember = Member.objects.get(id=id)

template = loader.get_template('details.html')

context = {

'mymember': mymember,

}

return HttpResponse(template.render(context, request))

def main( Add Main Index Page

Page Not Found

If you try to access a page that does not exist (a 404 error), Django directs you to a built-in view that handles 404 errors.

You will learn how to customize this 404 view later in this chapter, but first, just try to request a page that does not exist.

In the browser window, type 127.0.0.1:8000/masfdfg/ in the address bar.

You will get one of two results:

If you got the first result, you got directed to the built-in Django 404 template.

If you got the second result, then DEBUG is set to True in your settings, and you must set it to False to get directed to the 404 template.

This is done in the settings.py file, which is located in the project folder, in our case the my_tennis_club folder, where you also have to specify the host name from where your project runs from:

ExampleGet your own Django Server

Set the debug property to False, and allow the project to run from your local host:

my_tennis_club/my_tennis_club/settings.py:

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = False

ALLOWED_HOSTS = ['*']

Important: When DEBUG = False, Django requires you to specify the hosts you will allow this Django project to run from.

In production, this should be replaced with a proper domain name:

ALLOWED_HOSTS = ['yourdomain.com']

In the browser window, type 127.0.0.1:8000/masfdfg/ in the address bar, and you will get the built-in 404 template:

Customize the 404 Template

Django will look for a file named 404.html in the templates folder, and display it when there is a 404 error.

If no such file exists, Django shows the "Not Found" that you saw in the example above.

To customize this message, all you have to do is to create a file in the templates folder and name it 404.html, and fill it with whatever you want:

my_tennis_club/members/templates/404.html:

<!DOCTYPE html>
<html>
<title>Wrong address</title>
<body>

<h1>Ooops!</h1>

<h2>I cannot find the file you requested!</h2>

</body>
</html>

In the browser window, type 127.0.0.1:8000/masfdfg/ in the address bar, and you will get the customized 404 template:

Test View

When testing different aspects of Django, it can be a good idea to have somewhere to test code without destroying the main project.

This is optional off course, but if you like to follow all steps in this tutorial, you should add a test view that is exactly like the one we create below.

Then you can follow the examples and try them out on your own computer.

Add View

Start by adding a view called "testing" in the views.py file:

my_tennis_club/members/views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def members(request):

mymembers = Member.objects.all().values()

template = loader.get_template('all_members.html')

context = {

'mymembers': mymembers,

}

return HttpResponse(template.render(context, request))

def details(request, id):

mymember = Member.objects.get(id=id)

template = loader.get_template('details.html')

context = {

'mymember': mymember,

}

return HttpResponse(template.render(context, request))

def main(request):

template = loader.get_template('main.html')

return HttpResponse(template.render())

def testing(request):

template = loader.get_template('template.html')

context = {

'fruits': ['Apple', 'Banana', 'Cherry'],

}

return HttpResponse(template.render(context, request))

URLs

We have to make sure that incoming urls to /testing/ will be redirected to the testing view.

This is done in the urls.py file in the members folder:

my_tennis_club/members/urls.py:

from django. Add Test View

Django Admin

Django Admin is a really great tool in Django, it is actually a CRUD* user interface of all your models!

*CRUD stands for Create Read Update Delete.

It is free and comes ready-to-use with Django:

Getting Started

To enter the admin user interface, start the server by navigating to the /myworld folder and execute this command:

py manage.py runserver

In the browser window, type 127.0.0.1:8000/admin/ in the address bar.

The result should look like this:

The reason why this URL goes to the Django admin log in page can be found in the urls.py file of your project:

my_tennis_club/my_tennis_club/urls.py:

from django.contrib import admin

from django.urls import include, path

urlpatterns = [

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

path('admin/', admin.site.urls),

]

The urlpatterns[] list takes requests going to admin/ and sends them to admin.site.urls, which is part of a built-in application that comes with Django, and contains a lot of functionality and user interfaces, one of them being the log-in user interface.

Create User

To be able to log into the admin application, we need to create a user.

This is done by typing this command in the command view:

py manage.py createsuperuser

Which will give this prompt:

Username:

Here you must enter: username, e-mail address, (you can just pick a fake e-mail address), and password:

Username: johndoe
Email address: [email protected]
Password:
Password (again):
This password is too short. It must contain at least 8 characters.
This password is too common.
This password is entirely numeric.
Bypass password validation and create user anyway? [y/N]:

My password did not meet the criteria, but this is a test environment, and I choose to create user anyway, by enter y:

Bypass password validation and create user anyway? [y/N]: y

If you press [Enter], you should have successfully created a user:

Superuser created successfully.

Now start the server again:

py manage.py runserver

In the browser window, type 127.0.0.1:8000/admin/ in the address bar.

And fill in the form with the correct username and password:

Which should result in this user interface:

Here you can create, read, update, and delete groups and users, but where is the Members model?

Missing Model

The Members model is missing, as it should be, you have to tell Django which models that should be visible in the admin interface.

You will learn how to include the Members model in the next chapter.

Include Member in the Admin Interface

To include the Member model in the admin interface, we have to tell Django that this model should be visible in the admin interface.

This is done in a file called admin.py, and is located in your app's folder, which in our case is the members folder.

Open it, and it should look like this:

my_tennis_club/members/admin.py:

from django.contrib import admin

# Register your models here.

Insert a couple of lines here to make the Member model visible in the admin page:

my_tennis_club/members/admin.py:

from django.contrib import admin

from .models import Member

# Register your models here.

admin.site.register(Member)

Now go back to the browser and you should get this result:

Click Members and see the five records we inserted earlier in this tutorial:

Change Display

In the list in the screenshot above, we see "Member object (1)", "Member object (2)" etc. which might not be the data you wanted to be displayed in the list.

It would be better to display "firstname" and "lastname" instead.

This can easily be done by changing some settings in the models.py and/or the admin.py files. You will learn more about this in the next chapter.

Make the List Display More Reader-Friendly

When you display a Model as a list, Django displays each record as the string representation of the record object, which in our case is "Member object (1)", "Member object(2)" etc.:

To change this to a more reader-friendly format, we have two choices:

Change the string representation function, __str__() of the Member Model
Set the list_details property of the Member Model

Change the String Representation Function

To change the string representation, we have to define the __str__() function of the Member Model in models.py, like this:

my_tennis_club/members/models.py:

from django.db import models

class Member(models.Model):

firstname = models.CharField(max_length=255)

lastname = models.CharField(max_length=255)

phone = models.IntegerField(null=True)

joined_date = models.DateField(null=True)

def __str__(self):

return f"{self.firstname} {self.lastname}"

Which gives us this result:

Defining our own __str__() function is not a Django feature, it is how to change the string representation of objects in Python. Read more about Python objects in our Python object tutorial.

Set list_display

We can control the fields to display by specifying them in in a list_display property in the admin.py file.

First create a MemberAdmin() class and specify the list_display tuple, like this:

my_tennis_club/members/admin.py:

from django.contrib import admin

from .models import Member

# Register your models here.

class MemberAdmin(admin.ModelAdmin):

list_display = ("firstname", "lastname", "joined_date",)

admin.site.register(Member, MemberAdmin)

Remember to add the MemberAdmin as an argumet in the admin.site.register(Member, MemberAdmin).

Now go back to the browser and you should get this result:

Update Members

Now we are able to create, update, and delete members in our database, and we start by giving them all a date for when they became members.

Click the first member, Stalikken, to open the record for editing, and give him a joined_date:

While we are in here, let us give him a phone number as well:

Click "SAVE" and go back to the list of all members:

Repeat these steps and give all members a date and a phone number, and end up with a list like this:

Add Members

To add a new member, click on the "ADD MEMBERS" button in the top right corner:

You will get an empty form where you can fill in the members fields:

Fill in the fields and click "SAVE":

Now the Members Model have 6 members:

Delete Members

To delete a new member, you can either select a member and choose the action "Delete selected members" like this:

Or you can open a member for editing, and click the red DELETE button at the bottom, like this:

Template Variables

In Django templates, you can render variables by putting them inside {{ }} brackets:

Example

templates/template.html:

<h1>Hello {{ firstname }}, how are you?</h1>

Create Variable in View

The variable firstname in the example above was sent to the template via a view:

views.py:

from django.http import HttpResponse

from django.template import loader

def testing(request):

template = loader.get_template('template.html')

context = {

'firstname': 'Linus',

}

return HttpResponse(template.render(context, request))

As you can see in the view above, we create an object named context and fill it with data, and send it as the first parameter in the template.render() function.

Create Variables in Template

You can also create variables directly in the template, by using the {% with %} template tag.

The variable is available until the {% endwith %} tag appears:

Example

templates/template.html:

{% with firstname="Tobias" %}

<h1>Hello {{ firstname }}, how are you?</h1>

{% endwith %}

You will learn more about template tags in the next chapter.

Data From a Model

The example above showed a easy approach on how to create and use variables in a template.

Normally, most of the external data you want to use in a template, comes from a model.

We have created a model in the previous chapters, called Member, which we will use in many examples in the next chapters of this tutorial.

To get data from the Member model, we will have to import it in the views.py file, and extract data from it in the view:

members/views.py:

from django.http import HttpResponse, HttpResponseRedirect

from django.template import loader

from .models import Member

def testing(request):

mymembers = Member.objects.all().values()

template = loader.get_template('template.html')

context = {

'mymembers': mymembers,

}

return HttpResponse(template.render(context, request))

Now we can use the data in the template:

templates/template.html:

<ul>

{% for x Django Variables

If Statement

An if statement evaluates a variable and executes a block of code if the value is true.

Example

{% if greeting == 1 %}

<h1>Hello</h1>

{% endif %}

Elif

The elif keyword says "if the previous conditions were not true, then try this condition".

Example

{% if greeting == 1 %}

<h1>Hello</h1>

{% elif greeting == 2 %}

<h1>Welcome</h1>

{% endif %}

Else

The else keyword catches anything which isn't caught by the preceding conditions.

Example

{% if greeting == 1 %}

<h1>Hello</h1>

{% elif greeting == 2 %}

<h1>Welcome</h1>

{% else %}

<h1>Goodbye</h1>

{% endif %}

Operators

The above examples uses the == operator, which is used to check if a variable is equal to a value, but there are many other operators you can use, or you can even drop the operator if you just want to check if a variable is not empty:

Example

{% if greeting %}

<h1>Hello</h1>

{% endif %}

Is equal to.

Example

{% if greeting == 2 %}

<h1>Hello</h1>

{% endif %}

Is not equal to.

Example

{% if greeting != 1 %}

<h1>Hello</h1>

{% endif %} Django Tags

If Statement

An if statement evaluates a variable and executes a block of code if the value is true.

Example

{% if greeting == 1 %}

<h1>Hello</h1>

{% endif %}

Elif

The elif keyword says "if the previous conditions were not true, then try this condition".

Example

{% if greeting == 1 %}

<h1>Hello</h1>

{% elif greeting == 2 %}

<h1>Welcome</h1>

{% endif %}

Else

The else keyword catches anything which isn't caught by the preceding conditions.

Example

{% if greeting == 1 %}

<h1>Hello</h1>

{% elif greeting == 2 %}

<h1>Welcome</h1>

{% else %}

<h1>Goodbye</h1>

{% endif %}

Operators

Example

{% if greeting %}

<h1>Hello</h1>

{% endif %}

Is equal to.

Example

{% if greeting == 2 %}

<h1>Hello</h1>

{% endif %}

Is not equal to.

Example

{% if greeting != 1 %}

<h1>Hello</h1>

{% endif %}

For Loops

A for loop is used for iterating over a sequence, like looping over items in an array, a list, or a dictionary.

Example

Loop through the items of a list:

{% for x in fruits %}

{% endfor %}

Example

Loop through a list of dictionaries:

{% for x in cars %}

<h1>{{ x.brand }}</h1>

<p>{{ x.model }}</p>

{% endfor %}

Data From a Model

Data in a model is like a table with rows and columns.

The Member model we created earlier has five rows, and each row has three columns:

id	firstname	lastname	phone	joined_date
1	Emil	Refsnes	5551234	2022-01-05
2	Tobias	Refsnes	5557777	2022-04-01
3	Linus	Refsnes	5554321	2021-12-24
4	Lene	Refsnes	5551234	2021-05-01
5	Stalikken	Refsnes	5559876	2022-09-29

When we fetch data from the model, it comes as a QuerySet object, with a similar format as the cars example above: a list with dictionaries:

<QuerySet [

{

'id': 1,

'firstname': 'Emil',

'lastname': 'Refsnes',

'phone': 5551234,

'joined_date': datetime.date(2022, 1, 5)

{

'id': 2,

'firstname': 'Tobias',

'lastname': 'Refsnes'

'phone': 5557777,

'joined_date': datetime.date(2021, 4, 1 Django For Loop

Comments

Comments allows you to have sections of code that should be ignored.

Example

<h1>Welcome Everyone</h1>

{% comment %}

<h1>Welcome ladies and gentlemen</h1>

{% endcomment %}

Comment Description

You can add a message to your comment, to help you remember why you wrote the comment, or as message to other people reading the code.

Example

Add a description to your comment:

<h1>Welcome Everyone</h1>

{% comment "this was the original welcome message" %}

<h1>Welcome ladies and gentlemen</h1>

{% endcomment %}

Smaller Comments

You can also use the {# ... #} tags when commenting out code, which can be easier for smaller comments:

Example

Comment out the word Everyone:

<h1>Welcome{# Everyone#}</h1>

Comment in Views

Views are written in Python, and Python comments are written with the # character:

Example

Comment out a section in the view:

from django.http import HttpResponse

from django.template import loader

def testing(request):

template = loader.get_template('template.html')

#context = {

# 'var1': 'John',

return HttpResponse(template.render())

Read more about Python Comments in out Python Comment Tutorial.

Include

The include tag allows you to include a template inside the current template.

This is useful when you have a block of content that is the same for many pages.

Example

templates/footer.html:

<p>You have reached the bottom of this page, thank you for your time.</p>

templates/template.html:

<h1>Hello</h1>

<p>This page contains a footer in a template.</p>

{% include 'footer.html' %}

Variables in Include

You can send variables into the template by using the with keyword.

In the include file, you refer to the variables by using the {{ variablename }} syntax:

Example

templates/mymenu.html:

<div>HOME | {{ me }} | ABOUT | FORUM | {{ sponsor }}</div>

templates/template.html:

<!DOCTYPE html>

<html>

<body>

{% include "mymenu.html" with me="TOBIAS" sponsor="W3SCHOOLS" %}

<h1>Welcome</h1>

<p>This is my webpage</p>

</body>

</html>

Django QuerySet

A QuerySet is a collection of data from a database.

A QuerySet is built up as a list of objects.

QuerySets makes it easier to get the data you actually need, by allowing you to filter and order the data at an early stage.

In this tutorial we will be querying data from the Member table.

Member:

id	firstname	lastname	phone	joined_date
1	Emil	Refsnes	5551234	2022-01-05
2	Tobias	Refsnes	5557777	2022-04-01
3	Linus	Refsnes	5554321	2021-12-24
4	Lene	Refsnes	5551234	2021-05-01
5	Stalikken	Refsnes	5559876	2022-09-29

Querying Data

In views.py, we have a view for testing called testing where we will test different queries.

In the example below we use the .all() method to get all the records and fields of the Member model:

View

views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def testing(request):

mydata = Member.objects.all()

template = loader.get_template('template.html')

context = {

'mymembers': mydata,

}

return HttpResponse(template.render(context, request))

The object is placed in a variable called mydata, and is sent to the template via the context object as mymembers, and looks like this:

As you can see, our Member model contains 5 records, and are listed inside the QuerySet as 5 objects.

In the template you can use the mymembers object to generate content:

Template

templates/template.html:

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

{% for x in mymembers %}

<tr>

<td>{{ x.firstname QuerySet Introduction

Get Data

There are different methods to get data from a model into a QuerySet.

The values() Method

The values() method allows you to return each object as a Python dictionary, with the names and values as key/value pairs:

Example

views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def testing(request):

mydata = Member.objects.all().values()

template = loader.get_template('template.html')

context = {

'mymembers': mydata,

}

return HttpResponse(template.render(context, request))

Return Specific Columns

The values_list() method allows you to return only the columns that you specify.

Example

Return only the firstname columns:

views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def testing(request):

mydata = Member.objects.values_list('firstname')

template = loader.get_template('template.html')

context = {

'mymembers': mydata,

}

return HttpResponse(template.render(context, request))

Return Specific Rows

You can filter the search to only return specific rows/records, by using the filter() method.

Example

Return only the records where firstname is 'Emil'

views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def testing(request):

mydata = Member.objects.filter(firstname='Emil').values()

template = loader.get_template('template.html')

context = {

QuerySet Get

QuerySet Filter

The filter() method is used to filter your search, and allows you to return only the rows that matches the search term.

As we learned in the previous chapter, we can filter on field names like this:

Example

Return only the records where the firstname is 'Emil':

mydata = Member.objects.filter(firstname='Emil').values()

In SQL, the above statement would be written like this:

SELECT * FROM members WHERE firstname = 'Emil';

AND

The filter() method takes the arguments as **kwargs (keyword arguments), so you can filter on more than one field by separating them by a comma.

Example

Return records where lastname is "Refsnes" and id is 2:

mydata = Member.objects.filter(lastname='Refsnes', id=2).values()

In SQL, the above statement would be written like this:

SELECT * FROM members WHERE lastname = 'Refsnes' AND id = 2;

To return records where firstname is Emil or firstname is Tobias (meaning: returning records that matches either query, not necessarily both) is not as easy as the AND example above.

We can use multiple filter() methods, separated by a pipe | character. The results will merge into one model.

Example

Return records where firstname is either "Emil" or Tobias":

mydata = Member.objects.filter(firstname='Emil').values() | Member.objects.filter(firstname='Tobias').values()

Another common method is to import and use Q expressions:

Example

Return records where firstname is either "Emil" or Tobias":

from django.http import HttpResponse

from django.template import loader

from .models import Member

from django.db.models import Q

def testing(request):

mydata = Member.objects.filter(Q(firstname='Emil') | Q(firstname='Tobias')).values()

template = loader.get_template('template.html')

context = {

'mymembers': mydata,

}

return HttpResponse(template.render(context, request))

In SQL, the above statement would be written like this:

SELECT * FROM members WHERE firstname = 'Emil' OR firstname = 'Tobias';

Field Lookup

Order By

To sort QuerySets, Django uses the order_by() method:

Example

Order the result alphabetically by firstname:

mydata = Member.objects.all().order_by('firstname').values()

In SQL, the above statement would be written like this:

SELECT * FROM members ORDER BY firstname;

Descending Order

By default, the result is sorted ascending (the lowest value first), to change the direction to descending (the highest value first), use the minus sign (NOT), - in front of the field name:

Example

Order the result firstname descending:

mydata = Member.objects.all().order_by('-firstname').values()

In SQL, the above statement would be written like this:

SELECT * FROM members ORDER BY firstname DESC;

Multiple Order Bys

To order by more than one field, separate the fieldnames with a comma in the order_by() method:

Example

Order the result first by lastname ascending, then descending on id:

mydata = Member.objects.all().order_by('lastname', '-id').values()

In SQL, the above statement would be written like this:

SELECT * FROM members ORDER BY lastname ASC, id DESC;

Create Static Folder

When building web applications, you probably want to add some static files like images or css files.

Start by creating a folder named static in your project, the same place where you created the templates folder:

The name of the folder has to be static.

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/

Add a CSS file in the static folder, the name is your choice, we will call it myfirst.css in this example:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/
            myfirst.css

Open the CSS file and insert the following:

my_tennis_club/members/static/myfirst.css:

body {

background-color: lightblue;

font-family: verdana;

}

Modify the Template

Now you have a CSS file, with some CSS styling. The next step will be to include this file in a HTML template:

Open the HTML file and add the following:

{% load static %}

And:

Example

my_tennis_club/members/templates/template.html:

{% load static %}

<!DOCTYPE html>

<html>

<body>

{% for x in fruits %}

{% endfor %}

</body>

</html>

Restart the server for the changes to take effect:

py manage.py runserver

And check out the result in your own browser: 127.0.0.1:8000/testing/.

Didn't Work?

Just testing? If you just want to play around, and not going to deploy your work, you can set DEBUG = True in the settings.py file, and the example above will work.

Plan to deploy? If you plan to deploy your work, you should set DEBUG = False in the settings.py file. The example above will fail, because Django has no built-in solution for serving static files, but there are other ways to serve static files, you will learn how in the next chapter.

Example (in development):

my_tennis_club/my_tennis_club/settings.py:

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True

This will make the example work, but we want you to choose DEBUG = False, because that is the best way to learn how to work with Django.

Choose Debug = False

For the rest of this tutorial, we will run with DEBUG = False, even in development, because that is the best way to learn how to work with Django.

Example:

my_tennis_club/my_tennis_club/settings.py:

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = False

ALLOWED_HOSTS = ['*']

ALLOWED_HOSTS

When using DEBUG = False you have to specify which host name(s) are allowed to host your work. You could choose '127.0.0.1' or 'localhost' Add Static Files

WhiteNoise

Django does not have a built-in solution for serving static files, at least not in production when DEBUG has to be False.

We have to use a third-party solution to accomplish this.

In this Tutorial we will use WhiteNoise, which is a Python library, built for serving static files.

Install WhiteNoise

To install WhiteNoise in your virtual environment, type the command below:

pip install whitenoise

The result should be something like this:

Collecting whitenoise
Downloading whitenoise-6.2.0-py3-none-any.whl (19 kB)
Installing collected packages: whitenoise
Successfully installed whitenoise-6.2.0
WARNING: You are using pip version 20.2.3; however, version 22.3.1 is available.
You should consider upgrading via the 'c:usersYour Namemyworldscriptspython.exe -m pip install --upgrade pip' command.

Modify Settings

To make Django aware of you wanting to run WhitNoise, you have to specify it in the MIDDLEWARE list in settings.py file:

my_tennis_club/my_tennis_club/settings.py:

.
.
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
].
.

Collect Static Files

There are one more action you have to perform before you can serve the static file from the example in the . You have to collect all static files and put them into one specified folder. You will learn how in the .

Handle Static Files

Static files in your project, like stylesheets, JavaScripts, and images, are not handled automatically by Django when DEBUG = False.

When DEBUG = True, this worked fine, all we had to do was to put them in the static folder of the application.

When DEBUG = False, static files have to be collected and put in a specified folder before we can use it.

Collect Static Files

To collect all necessary static files for your project, start by specifying a STATIC_ROOT property in the settings.py file.

This specifies a folder where you want to collect your static files.

You can call the folder whatever you like, we will call it productionfiles:

my_tennis_club/my_tennis_club/settings.py:

.
.

STATIC_ROOT = BASE_DIR / 'productionfiles'

STATIC_URL = 'static/'

.
.

You could manually create this folder and collect and put all static files of your project into this folder, but Django has a command that do this for you:

py manage.py collectstatic

Which will produce this result:

131 static files copied to 'C:Usersyour_namemyworldmy_tennis_clubproductionfiles'.

131 files? Why so many? Well this is because of the admin user interface, that comes built-in with Django. We want to keep this feature in production, and it comes with a whole bunch of files including stylesheets, fonts, images, and JavaScripts.

my_tennis_club
    members/
    my_tennis_club/
    productionfiles/
        admin/
        myfirst.css

The Example Should Work

Now you have collected the static files of your project, and if you have , the example from the chapter will finally work.

Start the server and see the result:

py manage.py runserver

And check out the result in your own browser: .

Example

my_tennis_club/members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myfirst.css' %}">
<body>

{% for x in fruits %}
  <h1>{{ x }}</h1>
{% endfor %}

</body>
</html>

Add a Global CSS File

We have learned how to add a static file in the application's static folder, and how to use it in the application.

But what if other applications in your project wants to use the file?

Then we have to create a folder on the root directory and put the file(s) there.

It is not enough to create a static folder in the root directory, and Django will fix the rest. We have to tell Django where to look for these static files.

Start by creating a folder on the project's root level, this folder can be called whatever you like, I will call it mystaticfiles in this tutorial:

my_tennis_club
    db.sqlite3
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/

Add a CSS file in the mystaticfiles folder, the name is your choice, we will call it myglobal.css in this example:

my_tennis_club
    db.sqlite3
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/
        myglobal.css

Open the CSS file and insert the following:

my_tennis_club/mystaticfiles/myglobal.css:

body {

color: violet;

}

Modify Settings

You will have to tell Django to also look for static files in the mystaticfiles folder in the root directory, this is done in the settings.py file:

Add a STATICFILES_DIRS list:

my_tennis_club/my_tennis_club/settings.py:

STATIC_ROOT = BASE_DIR / 'productionfiles'

STATIC_URL = 'static/'

#Add this in your settings.py file:

STATICFILES_DIRS = [

BASE_DIR / 'mystaticfiles'

]

In the STATICFILES_DIRS list, you can list all the directories where Django should look for static files.

The BASE_DIR keyword represents the root directory of the project, and together with the / "mystaticfiles", it means the mystaticfiles folder in the root directory.

Search Order

If you have files with the same name, Django will use the first occurrence of the file.

The search starts in the directories listed in STATICFILES_DIRS, using the order you have provided. Then, if the file is not found, the search continues in the static folder of each application.

Modify the Template

Now you have a global CSS file for the entire project, which can be accessed from all your applications.

To use it in a template, use the same syntax as you did for the myfirst.css file:

Begin the template with the following:

{% load static %}

And refer to the file like this:

Exampl

my_tennis_club/members/templates/template.html:

{% load static %}

<!DOCTYPE html>

<html>

<body>

{% for x in fruits %}

{% endfor %}

</body>

</html>

The Project - My Tennis Club

If you have followed the steps in the entire Django tutorial, you will have a my_tennis_club project on your computer, with 5 members:

We want to add a stylesheet to this project, and put it in the mystaticfiles folder:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/
        mystyles.css

The name of the CSS file is your choice, we call it mystyles.css in this project.

Open the CSS file and insert the following:

my_tennis_club/mystaticfiles/mystyles.css:

body {

background-color: violet;

}

Modify the Master Template

Now you have a css file, the next step will be to include this file in the master template:

Open the master template file and add the following:

my_tennis_club/members/templates/master.html:

{% load static %}

<!DOCTYPE html>

<html>

<head>

<title>{% block title %}{% endblock %}</title>

</head>

<body>

{% block content %}

{% endblock %}

</body>

</html>

Check Settings

Make sure your settings.py file contains a STATICFILES_DIRS list with a reference to the mystaticfiles folder on the root directory, and that you have specified a STATICFILES_ROOT folder:

my_tennis_club/my_tennis_club/settings.py:

STATIC_ROOT = BASE_DIR / 'productionfiles'

STATIC_URL = 'static/'

#Add this in your settings.py file:

STATICFILES_DIRS = [

BASE_DIR / 'mystaticfiles'

]

Collect Static Files

Every time you make a change in a static file, you must run the collectstatic command to make the changes take effect:

py manage.py collectstatic

If you have executed the command earlier in the project, Django will prompt you with a question:

You have requested to collect static files at the destination
location as specified in your settings:

C:UsersYour Namemyworldmy_tennis_clubproductionfiles

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel:

Type 'yes'. This will update any changes done in the static files, and give you this result:

1 static file copied to 'C:UsersYour Nameminverdenmy_tennis_clubproductionfiles', 132 unmodified.

Now, if you run the project:

py manage.py runserver

It will look like this:

If you have followed all the steps on you own computer, you can see the result in your own browser:

In the browser window, type 127.0.0.1:8000/members/ in the address bar.

Spice up the Style!

In the example above we showed you how to include a stylesheet to your project.

We ended up with a purple web page, but CSS can do more than just change the background color.

We want to do more with the styles, and end up with a result like this:

First, replace the content of the mystyles.css file with this:

my_tennis_club/mystaticfiles/mystyles.css:

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');

body {

Add Styles to the Project

Database Engines

Django comes with a SQLite database which is great for testing and debugging at the beginning of a project.

However, it is not very suitable for production.

Django also support these database engines:

PostgreSQL
MariaDB
MySQL
Oracle

We will take a closer look at the PostgreSQL database engine.

PostgreSQL

PostgreSQL database is an open source relational database, which should cover most demands you have when creating a database for a Django project.

It has a good reputation, it is reliable, and it perform well under most circumstances.

We will add a PostgreSQL database to our Django project.

To be able to use PostgreSQL in Django we have to install a package called psycopg2.

Install psycopg2

Type this command in the command line to install the package. Make sure you are still inn the virtual environment:

pip install psycopg2-binary

The result should be something like this:

Collecting psycopg2-binary
Downloading psycopg2_binary-2.9.5-cp39-cp39-win_amd64.whl (1.2 MB)
|████████████████████████████████| 1.2 MB 3.3 MB/s
Installing collected packages: psycopg2-binary
Successfully installed psycopg2-binary-2.9.5
WARNING: You are using pip version 20.2.3; however, version 22.3.1 is available. You should consider upgrading via the 'c:usersYour Namemyworldscriptspython.exe -m pip install --upgrade pip' command.

The psycopg2 package is a driver that is necessary for PostgreSQL to work in Python.

We also need a server where we can host the database.

In this tutorial we have chosen the Amazon Web Services (AWS) platform, you will learn more about that in the .

Why AWS?

There are many providers out there that can host Django projects and PostgreSQL databases.

In this tutorial we will use the Amazon Web Services (AWS) platform, mainly because they offer a free solution that can host both Django projects and PostgreSQL databases. All you need is an AWS account.

Note: you can choose whatever server provider you like, they will most likely all give you a satisfying result, but they will have some provider-specific settings that you should be aware of when following this tutorial.

AWS

Go to aws.amazon.com, and create an account:

Once you have created an AWS account, it is time to sign in for the first time:

AWS Console

If this is your first time you sign into your AWS account, you will be directed to the AWS Console Home page:

Add the RDS Service

Once you have an AWS account, you can start creating a database.

We will use a database service at AWS, called RDS.

In the search field, search for "RDS", and click to start the service:

Once the service has started, you should see something like this:

In the next chapter we will create the PostgreSQL database.

Create Database

Inside the RDS service, create a database, either by navigating to the Database section, or just click the "Create database" button:

Settings

Once you have started creating a database, you will be given some choices for the type and settings of your database.

To add a PostgreSQL database to your Django project, choose the following options:

Standard creation method:

PostgreSQL engine method:

Free Tier Template:

Name of database, username, and password

You can choose any name, username, and password:

Keep the default instance configuration:

Check off the storage autoscaling:

It can be a good thing to enable storage autoscaling, but for this tutorial it is not necessary.

Grant public access, and create a new security group:

Give the security group a name, we will call it "w3-django":

Keep default db authentications:

Keep default monitoring:

Click Create database:

This will take a few minutes, but when it is finished, you will have a new PostgreSQL database, almost ready to run on your Django project!

In the next chapter you will learn how to connect your project to the database.

Modify Settings

To make Django able to connect to your database, you have to specify it in the DATABASES tuple in the settings.py file.

Before, it looked like this:

SQLite

my_tennis_club/my_tennis_club/settings.py:

.
.
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}
.

Now, you should change it to look like this:

PostgreSQL

my_tennis_club/my_tennis_club/settings.py:

.
.
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'postgres',
        'USER': 'masteruser',
        'PASSWORD': '12345678',
        'HOST': 'w3-django-project.cdxmgq9zqqlr.us-east-1.rds.amazonaws.com',
        'PORT': '5432'
    }
}
.

Note: The values will be different for your project.

Engine?

As you can see in the settings.py file, we insert postgresql instead of sqlite.

Name?

The database does not have a name, but you have to assign one in order to access the database.

If no name is given, the provider accepts 'postgres' as the name of the database.

Username and Password?

Insert the username and password that you specified when you created the database.

Host? Port?

As you can see in the settings.py file, we insert postgresql instead of sqlite, and insert the username and password that we specified when we created the database.

The HOST and PORT can be found under the "Connectivity & security" section in the RDS instance. They are described as "Endpoint" and "Port":

Which for my project is this:

'HOST': 'w3-django-project.cdxmgq9zqqlr.us-east-1.rds.amazonaws.com'
'PORT': '5432'

Migrate

Once we have done the changes in settings.py, we must run a migration in our virtual environment, before the changes will take place:

py manage.py migrate

Which will give you this result:

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, members, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying members.0001_initial... OK
  Applying members.0002_members_delete_member... OK
  Applying members.0003_rename_members_member... OK
  Applying sessions.0001_initial... OK

Now, if you run the project:

py manage.py runserver

And view it in your browser: .

You will get the home page of the project, but if you click on the "members" link, you will see that there are no members.

That is because the database is empty. In the we will fill the database with members.

Members

The "My Tennis Club" project has no members: .

That is because we have created a brand new database, and it is empty.

The old SQLite database contained 5 members, so let us dive into the admin interface and add the same 5 members.

But first we have to create a new superuser.

Create superuser

Since we now have a new database, we have to create the superuser once again:

This is done by typing this command in the command view:

py manage.py createsuperuser

Which will give this prompt:

Username:

Here you must enter: username, e-mail address, (you can just pick a fake e-mail address), and password:

My password did not meet the criteria, but this is a test environment, and I choose to create user anyway, by enter y:

Bypass password validation and create user anyway? [y/N]: y

If you press [Enter], you should have successfully created a user:

Superuser created successfully.

Now start the server again:

py manage.py runserver

In the browser window, type in the address bar.

And fill in the form with the correct username and password:

Which should result in this interface:

Add Members

When you are in the admin interface, click the "Add" button for "Members", and start inserting new members until you have a list like this:

My Tennis Club

In the browser window, type in the address bar.

And once again you have a Tennis Club page with 5 members!

Next: let's , so that the whole world can see it!

Deploy to the World

To deploy a project means to make it visible for other people on the internet.

So far, in this tutorial, we have made a Django project that runs locally on your computer. This is often called, "in development", and when we have deployed it, we call it "in production".

Where to Deploy?

There are many providers out there that offers servers for Django projects. In this tutorial we will use the Amazon Web Services (AWS) platform, mainly because they offer a free solution that only requires you to create an AWS account.

Note: you can choose whatever server provider you like, they will all give you the same result, but they will have some provider-specific settings that you should be aware of when following this tutorial.

AWS

Log into your AWS account. (If you do not have an AWS account, follow the steps in the Create AWS Account chapter.)

AWS Console

Once you have signed in, you should be directed to the AWS Console Home page:

Elastic Beanstalk

We will be using a service called "Elastic Beanstalk" to deploy the Django project.

In the search field at the top, search for "elastic beanstalk", and click to start the service:

Lock in Dependencies

Once you have started the "Elastic Beanstalk" service, we could start with the deployment, but first we need to lock in some dependencies, which means to make you local Django project ready for deployment.

You will learn how to in the next chapters.

Lock in Dependencies

When you create a Django application, there are some Python packages that your project depends on.

Django itself is a Python package, and we have to make sure that the server where we deploy our project also has the Django package installed, and all the other packages your project requires.

Luckily there is a command for this as well, just run this command in the command view:

py -m pip freeze > requirements.txt

The result of the above command, is a file called requirements.txt being created in the project:

my_tennis_club
    members/
    my_tennis_club/
    mystaticfiles/
    productionfiles/
    db.sqlite3
    manage.py

requirements.txt

The file contains all the packages that this project depends on: with this content:

my_tennis_club/requirements.txt:

asgiref==3.5.2
Django==4.1.4
psycopg2-binary==2.9.5
sqlparse==0.4.3
tzdata==2022.7
whitenoise==6.2.0

Note: You can create this file on your own, and insert the packages manually, just make sure you get all the packages your project depends on, and you must name the file requirements.txt.

Now the hosting provider knows which packages to install when we deploy our project.

But Elastic Beanstalk needs more information, go to the to create an "EB" config file.

Provider-Specific Settings

We have chosen AWS as our hosting provider, and Elastic Beanstalk as a service to deploy the Django project, and it has some specific requirements.

.ebextension Folder

It requires that you create a folder on the root level of your project called .ebextensions:

my_tennis_club
    .ebextensions/
    members/
    my_tennis_club/
    mystaticfiles/
    productionfiles/
    db.sqlite3
    manage.py
    requirements.txt

Create django.config File

In the .ebextensions folder, create a file called django.config:

my_tennis_club
.ebextensions/
django.config

Open the file and insert these settings:

my_tennis_club/.ebextensions/django.config:

option_settings:
  aws:elasticbeanstalk:container:python:
    WSGIPath: my_tennis_club.wsgi:application

Note: These steps are specific for AWS and Elastic beanstalk, but every provider has some provider-specific settings.

The next step is to wrap all the dependencies into one .zip file, which you will learn in the .

Zip Your Project

To wrap your project into a .zip file, you cannot zip the entire project folder, but choose the files and folders manually.

The files to include in the .zip file are highlighted (blue) in the example below:

my_tennis_club

.ebextensions/

members/

my_tennis_club/

mystaticfiles/

productionfiles/

db.sqlite3

manage.py

requirements.txt

With your file explorer, navigate to the project folder, select these files and folders, right-click and choose to create a zip file.

Zip File

Now you have a .zip file of your project which you can upload to Elastic beanstalk:

my_tennis_club
    .ebextensions/
    members/
    my_tennis_club/
    mystaticfiles/
    productionfiles/
    db.sqlite3
    manage.py

my_tennis_clup.zip

requirements.txt

Elastic Beanstalk

In AWS, navigate to the Elastic Beanstalk application, as we did in the Choose Provider chapter, and click the "Create application" button:

Create EB Application

Once you have clicked the "Create Application" button, you will be taken to this page, where you can give your Django project a name. I will name it "my-first-django":

Choose Platform

Then scroll down until you see the "Platform" section, and choose "Python", with the recommended version:

Upload .zip File

Next, scroll down to the next section, the "Application code" section, and choose "Upload your code".

Click on the "Choose file" button, navigate to the .zip file you created in the previous chapter and upload it:

The .zip file is uploaded, and we are ready to deploy!

Deploy

Click the "Create application" button to start deploying.

Waiting

The deployment will take a few minutes.

Success!

Finally the project is live, and you can view it by clicking the link below the Myfirstdjango-env header, or type the host address in your browser:

Deploy Changes

Any changes you do with the application locally, on your own computer, is not visible on the deployed version.

So if you make a change, and you want it to be visible on the deployed version, you have to upload a new .zip file.

Create .zip file

To wrap your project into a .zip file, follow the steps described in the Create .zip File chapter:

Start by selecting the relevant files and folders of your project, if you have the same project as we have in our tutorial, you should select the highlighted files in the example below:

my_tennis_club

.ebextensions/

members/

my_tennis_club/

mystaticfiles/

productionfiles/

db.sqlite3

manage.py

requirements.txt

Right-click and choose to create a .zip file.

Now you have a .zip file, containing the changes, and you can upload it to Elastic beanstalk:

my_tennis_club
    .ebextensions/
    members/
    my_tennis_club/
    mystaticfiles/
    productionfiles/
    db.sqlite3
    manage.py

my_tennis_clup.zip

requirements.txt

Upload to Elastic Beanstalk

Log into your Amazon Web Services account, and find your project under the "Elastic Beanstalk" application:

Click the "Upload and deploy" button.

Choose .zip File

Click the "Choose file" button to upload the .zip file you just created:

Deploy

Click the "Deploy" button:

Uploaded!

That's it, your project is updated with all the new changes.

Note: Follow these steps every time you want to update your project.

What is Slug?

Have you ever seen url's that look like this:

w3schools.com/django/learn-about-slug-field

The "learn-about-slug-field" part is a slug.

It is a description containing only letters, hyphens, numbers or underscores.

It is often used in url's to make them easier to read, but also to make them more search engine friendly.

Url Without Slug

If you have followed our Django Project created in this tutorial, you will have a small Django project looking like this:

And if you click the first member, you will jump to this page:

Check out the address bar:

127.0.0.1:8000/members/details/1

The number "1" refers to the ID of that particular record in the database.

Makes sense to the developer, but probably not to anyone else.

Url With Slug

It would have made more sense if the url looked like this:

Check out the address bar:

127.0.0.1:8000/members/details/emil-refsnes

That is a more user friendly url, and Django can help you create such url's in your project.

Modify the models.py File

Start by adding a new field in the database.

Open the models.py file and add a field called slug with the data type SlugField:

my_tennis_club/members/models.py:

from django.db import models

class Member(models.Model):

firstname = models.CharField(max_length=255)

lastname = models.CharField(max_length=255)

phone = models.IntegerField(null=True)

joined_date = models.DateField(null=True)

slug = models.SlugField(default="", null=False)

def __str__(self):

return f"{self.firstname} {self.lastname}"

This is a change in the Model's structure, and therefor we have to make a migration to tell Django that it has to update the database:

py manage.py makemigrations

And the migrate command:

py manage.py migrate

Change Admin

Now we have a new field in the database, but we also want this field to be updated automatically when we set the firstname or lastname of a member.

This can be done with a built-in Django feature called prepopulated_fields where you specify the field you want to pre-populate, and a tuple with the field(s) you want to populate it with.

This is done in the admin.py file:

my_tennis_club/members/admin.py:

from django.contrib import admin

from .models import Member

# Register your models here.

class MemberAdmin(admin.ModelAdmin):

list_display = ("firstname", "lastname", "joined_date",)

prepopulated_fields = {"slug": ("firstname", "lastname")}

admin.site.register(Member, MemberAdmin)

Enter the Admin interface and open a record for editing:

Click "SAVE" and the "slug" field will be auto populated with the firstname and the lastname, and since the "slug" field is of type SlugField, it will "slugify" the value, meaning it will put a hyphen between each word.

Next time you open the member for editing you will see the slug field with value:

Note: Since the new field is empty by default, you have to do this save operation for each member.

Modify Template

Now we can replace the ID field with the slug field throughout the project.

Add Slug Field

Add Bootstrap 5

There are two main methods to use bootstrap in your Django project. Either by downloading the required files and include them in your project, or you can install the bootstrap 5 module in your .

We will use the second method, installing Bootstrap 5 in the virtual environment.

Install Bootstrap 5

Bootstrap 5 should be installed in the virtual environment.

We will install it in an existing project, the , created earlier in this tutorial.

Open the command view, navigate to the virtual environment folder and activate the virtual environment:

Scriptsactivate.bat

Once you are inside the virtual environment, install Bootstrap 5 with this command:

pip install django-bootstrap-v5

Which will give you a result like this:

Collecting django-bootstrap-v5
Downloading django_bootstrap_v5-1.0.11-py3-none-any.whl (24 kB)
Requirement already satisfied: django<5.0,>=2.2 in c:usersyour namemyworldlibsite-packages (from django-bootstrap-v5) (4.1.4)
Collecting beautifulsoup4<5.0.0,>=4.8.0
  Downloading beautifulsoup4-4.11.1-py3-none-any.whl (128 kB)
     |████████████████████████████████| 128 kB 6.4 MB/s
Requirement already satisfied: tzdata; sys_platform == "win32" in c:usersyour namemyworldlibsite-packages (from django<5.0,>=2.2->django-bootstrap-v5) (2022.7)
Requirement already satisfied: asgiref<4,>=3.5.2 in c:usersyour namemyworldlibsite-packages (from django<5.0,>=2.2->django-bootstrap-v5) (3.5.2)
Requirement already satisfied: sqlparse>=0.2.2 in c:usersyour namemyworldlibsite-packages (from django<5.0,>=2.2->django-bootstrap-v5) (0.4.3)
Collecting soupsieve>1.2
  Downloading soupsieve-2.3.2.post1-py3-none-any.whl (37 kB)
Installing collected packages: soupsieve, beautifulsoup4, django-bootstrap-v5
Successfully installed beautifulsoup4-4.11.1 django-bootstrap-v5-1.0.11 soupsieve-2.3.2.post1

Update Settings

Next step is to include the bootstrap module in the INSTALLED_APPS list in settings.py:

my_tennis_club/my_tennis_club/settings.py:

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

Bootstrap 5 is now ready to use in your project!

Remove Old Styling

ThThe My Tennis Club project already has a stylesheet, remove it and the Members page without styling will look like this:

Add Bootstrap 5 to Template

To use Bootstrap 5 in the project, start by inserting some lines of code in the master.html template:

my_tennis_club/members/templates/master.html:




  
  {% load bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}

HOME
MEMBERS

{% block content %} {% endblock %}

As you can see, we inserted these three lines in the section:

  {% load bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}

The first line tells Django that it should load the Bootstrap 5 module in this template.

The second line inserts the element with the referral to the bootstrap stylesheet.

The third line inserts the

A list of all template tags:

Tag	Description
autoescape	Specifies if autoescape mode is on or off
block	Specifies a block section
comment	Specifies a comment section
csrf_token	Protects forms from Cross Site Request Forgeries
cycle	Specifies content to use in each cycle of a loop
debug	Specifies debugging information
extends	Specifies a parent template
filter	Filters content before returning it
firstof	Returns the first not empty variable
for	Specifies a for loop
if	Specifies a if statement
ifchanged	Used in for loops. Outputs a block only if a value has changed since the last iteration
include	Specifies included content/template
load	Loads template tags from another library
lorem	Outputs random text
now	Outputs the current date/time
regroup	Sorts an object by a group
resetcycle	Used in cycles. Resets the cycle
spaceless	Removes whitespace between HTML tags
templatetag	Outputs a specified template tag
url	Returns the absolute URL part of a URL
verbatim	Specifies contents that should not be rendered by the template engine
widthratio	Calculates a width value based on the ratio between a given value and a max value
with	Specifies a variable to use in the block

A list of all filter keywords:

Keyword

Description

add

Adds a specified value.

addslashes

Adds a slash before any quote characters, to escape strings.

capfirst

Returns the first letter in uppercase.

center

Centers the value in the middle of a specified width.

cut

Removes any specified character or phrases.

date

Returns dates in the specified format.

default

Returns a specified value if the value is False.

default_if_none

Returns a specified value if the value is None.

dictsort

Sorts a dictionary by the given value.

dictsortreversed

Sorts a dictionary reversed, by the given value.

divisibleby

Returns True if the value can be divided by the specified number, otherwise it returns False.

escape

Escapes HTML code from a string.

escapejs

Escapes JavaScript code from a string.

filesizeformat

Returns a number into a file size format.

first

Returns the first item of an object (for Strings, the first character is returned).

floatformat

Rounds floating numbers to a specified number of decimals, default one decimal.

force_escape

Escapes HTML code from a string.

get_digit

Returns a specific digit of a number.

iriencode

Convert an IRI into a URL friendly string.

join

Returns the items of a list into a string.

json_script

Returns an object into a JSON object surrounded by <script></script> tags.

last

Returns the last item of an object (for Strings, the last character is returned).

length

Returns the number of items in an object, or the number of characters in a string.

length_is

Returns True if the length is the same as the specified number

linebreaks

Returns the text with <br> instead of line breaks, and <p> instead of more than one line break.

linebreaksbr

Returns the text with <br> instead of line breaks.

linenumbers

Returns the text with line numbers for each line.

ljust

Left aligns the value according to a specified width

lower

Returns the text in lower case letters.

make_list

Converts a value into a list object.

phone2numeric

Converts phone numbers with letters into numeric phone numbers.

pluralize

Adds a 's' at the end of a value if the specified numeric value is not 1.

pprint

random

Returns a random item of an object

rjust

Right aligns the value according to a specified width

safe

Marks that this text is safe and should not be HTML escaped.

safeseq

Marks each item of an object as safe and the item should not be HTML escaped.

slice

Returns a specified slice of a text or object.

slugify

Converts text into one long alphanumeric-lower-case word.

stringformat

Converts the value into a specified format.

striptags

Removes HTML tags from a text.

time

Returns a time in the specified format.

timesince

Returns the difference between two datetimes.

timeuntil

Returns the difference between two datetimes.

title

Upper cases the first character of each word in a text, all other characters are converted to lower case.

truncatechars

Shortens a string into the specified number of characters.

truncatechars_html

Shortens a string into the specified number of characters, not considering the length of any HTML tags.

truncatewords

Shortens a string into the specified number of words.

truncatewords_html

Shortens a string into the specified number of words, not considering any HTML tags.

unordered_list

Returns the items of an object as an unordered HTML list.

upper

Returns the text in upper case letters.

urlencode

URL encodes a string.

urlize

Returns any URLs in a string as HTML links.

urlizetrunc

Returns any URLs in a string as HTML links, but shortens the links into the specified number of characters.

wordcount

Returns the number of words in a text.

wordwrap

Filter Reference

Field Lookups Reference

A list of all field look up keywords:

Keyword	Description
contains	Contains the phrase
icontains	Same as contains, but case-insensitive
date	Matches a date
day	Matches a date (day of month, 1-31) (for dates)
endswith	Ends with
iendswith	Same as endswidth, but case-insensitive
exact	An exact match
iexact	Same as exact, but case-insensitive
in	Matches one of the values
isnull	Matches NULL values
gt	Greater than
gte	Greater than, or equal to
hour	Matches an hour (for datetimes)
lt	Less than
lte	Less than, or equal to
minute	Matches a minute (for datetimes)
month	Matches a month (for dates)
quarter	Matches a quarter of the year (1-4) (for dates)
range	Match between
regex	Matches a regular expression
iregex	Same as regex, but case-insensitive
second	Matches a second (for datetimes)
startswith	Starts with
istartswith	Same as startswith, but case-insensitive
time	Matches a time (for datetimes)
week	Matches a week number (1-53) (for dates)
week_day	Matches a day of week (1-7) 1 is Sunday
iso_week_day	Matches a ISO 8601 day of week (1-7) 1 is Monday
year	Matches a year (for dates)
iso_year	Matches an ISO 8601 year (for dates)

Django Compiler (Editor)

If you want to create your own website or build Python applications using Django, check out onedoubt.com.

onedoubt.com is a website-building tool that enables you to create and share your own website, as well as develop and host your Python applications using Django.

You have full control over the website's appearance and functionality by editing the code directly in your web browser.

onedoubt.com Spaces is user-friendly and requires no setup, making it easy to use.

Get started with Django by selecting the Python environment in Spaces.

The code editor is packed with features to help you achieve more:

Templates: Start from scratch or use a template
Cloud-based: no installations required. You only need your browser
Terminal & Log: debug and troubleshoot your code easily
File Navigator: switch between files inside the code editor
And much more!

Learn Faster

Practice is key to mastering coding, and the best way to put your Django knowledge into practice is by getting practical with code.

Use onedoubt.com to build, test and deploy code.

The code editor lets you write and practice different types of computer languages. It includes Django, but you can use it for other languages too.

New languages are added all the time:

Languages

Learn More

If you don't know Django, we suggest that you read our Django Tutorial from scratch.

If you don't know Python, we suggest that you read our Python Tutorial from scratch.

Easy Package Management

Get an overview of your packages and easily add or delete frameworks and libraries. Then, with just one click, you can make changes to your packages without manual installation.

Build Powerful Websites

You can use the code editor in onedoubt.com to build frontend or full-stack websites from scratch.

Or you can use the 60+ templates available and save time

Create your Spaces account today and explore them all!

Share Your Website With The World

Host and publish your websites in no time with onedoubt.com.

W3Schools subdomain and SSL certificate are included for free with onedoubt.com. An SSL certificate makes your website safe and secure. It also helps people trust your website and makes it easier to find it online.

Want a custom domain for your website?

You can buy a domain or transfer an existing one and connect it to your space.

How Does It Work?

Get started in a few clicks with W3School Spaces.

Django Exercises

You can test your Django skills with W3Schools' Exercises.

Exercises

We have gathered a variety of Django exercises (with answers) for each Django Chapter.

Try to solve an exercise by editing some code, or show the answer to see what you've done wrong.

Count Your Score

You will get 1 point for each correct answer. Your score and total score will always be displayed.

Start Django Exercises

Good luck!

If you don't know Django, we suggest that you read our from scratch.

Django Quiz

You can test your Django skills with W3Schools' Quiz.

The Test

The test contains 25 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know about Django.

Count Your Score

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 25 points.

Start the Quiz

Good luck!

If you do not know Django, we suggest that you read our from scratch.

Document your skills
Improve your career

Study at your own pace
Save time and money

Known brand
Trusted by top companies

Who Should Consider Getting Certified?

Any student or professional within the digital industry.

Certifications are valuable assets to gain trust and demonstrate knowledge to your clients, current or future employers on a ever increasing competitive market.

W3Schools is Trusted by Top Companies

W3Schools has over two decades of experience with teaching coding online.

Our certificates are recognized and valued by companies looking to employ skilled developers.

Save Time and Money

Show the world your coding skills by getting a certification.

The prices is a small fraction compared to the price of traditional education.

Document and validate your competence by getting certified!

Exam overview

Fee: 95 USD

Number of questions: 70

Requirement to pass: 75% correct answers

Time limit: 70 minutes

Number of attempts to pass: Two

Exam deadline: None

Certification Expiration: None

Format: Online, multiple choice

Advance Faster in Your Career

Getting a certificate proves your commitment to upgrading your skills.

The certificate can be added as credentials to your CV, Resume, LinkedIn profile, and so on.

It gives you the credibility needed for more responsibilities, larger projects, and a higher salary.

Knowledge is power, especially in the current job market.

Documentation of your skills enables you to advance your career or helps you to start a new one.

How Does It Work?

Study for free at W3Schools.com
Study at your own speed
Test your skills with W3Schools online quizzes
Apply for your certificate by paying an exam fee
Take your exam online, at any time, and from any location

Get Your Certificate and Share It With The World

Example certificate:

Vue Certificate of Completion

Each certificate gets a unique link that can be shared with others.

Validate your certification with the link or QR code.

Check how it looks like in this .

Share your certificate on LinkedIn in the Certifications section in just one click!

Document Your Skills

Getting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary.

Looking to add multiple users?

Are you an educator, manager or business owner looking for courses or certifications?

We are working with schools, companies and organizations from all over the world.

Template Variables

In Django templates, you can render variables by putting them inside {{ }} brackets:

Example

templates/template.html:

<h1>Hello {{ firstname }}, how are you?</h1>

Create Variable in View

The variable firstname in the example above was sent to the template via a view:

views.py:

from django.http import HttpResponse

from django.template import loader

def testing(request):

template = loader.get_template('template.html')

context = {

'firstname': 'Linus',

}

return HttpResponse(template.render(context, request))

As you can see in the view above, we create an object named context and fill it with data, and send it as the first parameter in the template.render() function.

Create Variables in Template

You can also create variables directly in the template, by using the {% with %} template tag.

The variable is available until the {% endwith %} tag appears:

Example

templates/template.html:

{% with firstname="Tobias" %}

<h1>Hello {{ firstname }}, how are you?</h1>

{% endwith %}

You will learn more about template tags in the next chapter.

Data From a Model

The example above showed a easy approach on how to create and use variables in a template.

Normally, most of the external data you want to use in a template, comes from a model.

We have created a model in the previous chapters, called Member, which we will use in many examples in the next chapters of this tutorial.

To get data from the Member model, we will have to import it in the views.py file, and extract data from it in the view:

members/views.py:

from django.http import HttpResponse, HttpResponseRedirect

from django.template import loader

from .models import Member

def testing(request):

mymembers = Member.objects.all().values()

template = loader.get_template('template.html')

context = {

'mymembers': mymembers,

}

return HttpResponse(template.render(context, request))

Now we can use the data in the template:

templates/template.html:

<ul>

{% for x

A list of all filter keywords:

Keyword	Description
add	Adds a specified value.
addslashes	Adds a slash before any quote characters, to escape strings.
capfirst	Returns the first letter in uppercase.
center	Centers the value in the middle of a specified width.
cut	Removes any specified character or phrases.
date	Returns dates in the specified format.
default	Returns a specified value if the value is False.
default_if_none	Returns a specified value if the value is None.
dictsort	Sorts a dictionary by the given value.
dictsortreversed	Sorts a dictionary reversed, by the given value.
divisibleby	Returns True if the value can be divided by the specified number, otherwise it returns False.
escape	Escapes HTML code from a string.
escapejs	Escapes JavaScript code from a string.
filesizeformat	Returns a number into a file size format.
first	Returns the first item of an object (for Strings, the first character is returned).
floatformat	Rounds floating numbers to a specified number of decimals, default one decimal.
force_escape	Escapes HTML code from a string.
get_digit	Returns a specific digit of a number.
iriencode	Convert an IRI into a URL friendly string.
join	Returns the items of a list into a string.
json_script	Returns an object into a JSON object surrounded by <script></script> tags.
last	Returns the last item of an object (for Strings, the last character is returned).
length	Returns the number of items in an object, or the number of characters in a string.
length_is	Returns True if the length is the same as the specified number
linebreaks	Returns the text with <br> instead of line breaks, and <p> instead of more than one line break.
linebreaksbr	Returns the text with <br> instead of line breaks.
linenumbers	Returns the text with line numbers for each line.
ljust	Left aligns the value according to a specified width
lower	Returns the text in lower case letters.
make_list	Converts a value into a list object.
phone2numeric	Converts phone numbers with letters into numeric phone numbers.
pluralize	Adds a 's' at the end of a value if the specified numeric value is not 1.
pprint
random	Returns a random item of an object
rjust	Right aligns the value according to a specified width
safe	Marks that this text is safe and should not be HTML escaped.
safeseq	Marks each item of an object as safe and the item should not be HTML escaped.
slice	Returns a specified slice of a text or object.
slugify	Converts text into one long alphanumeric-lower-case word.
stringformat	Converts the value into a specified format.
striptags	Removes HTML tags from a text.
time	Returns a time in the specified format.
timesince	Returns the difference between two datetimes.
timeuntil	Returns the difference between two datetimes.
title	Upper cases the first character of each word in a text, all other characters are converted to lower case.
truncatechars	Shortens a string into the specified number of characters.
truncatechars_html	Shortens a string into the specified number of characters, not considering the length of any HTML tags.
truncatewords	Shortens a string into the specified number of words.
truncatewords_html	Shortens a string into the specified number of words, not considering any HTML tags.
unordered_list	Returns the items of an object as an unordered HTML list.
upper	Returns the text in upper case letters.
urlencode	URL encodes a string.
urlize	Returns any URLs in a string as HTML links.
urlizetrunc	Returns any URLs in a string as HTML links, but shortens the links into the specified number of characters.
wordcount	Returns the number of words in a text.
wordwrap	Wrap words at a specified number of characters.
yesno	Converts Booleans values into specified values.
i18n
l10n
tz

Template Variables

In Django templates, you can render variables by putting them inside {{ }} brackets:

ExampleGet your own Django Server

templates/template.html:

<h1>Hello {{ firstname }}, how are you?</h1>

Create Variable in View

The variable firstname in the example above was sent to the template via a view:

views.py:

from django.http import HttpResponse

from django.template import loader

def testing(request):

template = loader.get_template('template.html')

context = {

'firstname': 'Linus',

}

return HttpResponse(template.render(context, request))

As you can see in the view above, we create an object named context and fill it with data, and send it as the first parameter in the template.render() function.

Create Variables in Template

You can also create variables directly in the template, by using the {% with %} template tag.

The variable is available until the {% endwith %} tag appears:

Example

templates/template.html:

{% with firstname="Tobias" %}

<h1>Hello {{ firstname }}, how are you?</h1>

{% endwith %}

You will learn more about template tags in the next chapter.

Data From a Model

The example above showed a easy approach on how to create and use variables in a template.

Normally, most of the external data you want to use in a template, comes from a model.

We have created a model in the previous chapters, called Member, which we will use in many examples in the next chapters of this tutorial.

To get data from the Member model, we will have to import it in the views.py file, and extract data from it in the view:

members/views.py:

from django.http import HttpResponse, HttpResponseRedirect

from django.template import loader

from .models import Member

def testing(request):

mymembers = Member.objects.all().values()

template = loader.get_template('template.html')

context = {

'mymembers': mymembers,

}

return HttpResponse(template.render(context, request))

Now we can use the data in the template:

templates/template.html:

<ul>

{% for x in mymembers %}

<li>{{ x.firstname }}</li>

{% endfor %}

</ul>

We use the Django template tag {% for %} to loop through the members.

You will learn more about template tags in the next chapter.

Template Variables

In Django templates, you can render variables by putting them inside {{ }} brackets:

Example

templates/template.html:

<h1>Hello {{ firstname }}, how are you?</h1>

Create Variable in View

The variable firstname in the example above was sent to the template via a view:

views.py:

from django.http import HttpResponse

from django.template import loader

def testing(request):

template = loader.get_template('template.html')

context = {

'firstname': 'Linus',

}

return HttpResponse(template.render(context, request))

As you can see in the view above, we create an object named context and fill it with data, and send it as the first parameter in the template.render() function.

Create Variables in Template

You can also create variables directly in the template, by using the {% with %} template tag.

The variable is available until the {% endwith %} tag appears:

Example

templates/template.html:

{% with firstname="Tobias" %}

<h1>Hello {{ firstname }}, how are you?</h1>

{% endwith %}

You will learn more about template tags in the next chapter.

Data From a Model

The example above showed a easy approach on how to create and use variables in a template.

Normally, most of the external data you want to use in a template, comes from a model.

We have created a model in the previous chapters, called Member, which we will use in many examples in the next chapters of this tutorial.

To get data from the Member model, we will have to import it in the views.py file, and extract data from it in the view:

members/views.py:

from django.http import HttpResponse, HttpResponseRedirect

from django.template import loader

from .models import Member

def testing(request):

mymembers = Member.objects.all().values()

template = loader.get_template('template.html')

context = {

'mymembers': mymembers,

}

return HttpResponse(template.render(context, request))

Now we can use the data in the template:

templates/template.html:

<ul>

{% for x

Template Tags

In Django templates, you can perform programming logic like executing if statements and for loops.

These keywords, if and for, are called "template tags" in Django.

To execute template tags, we surround them in {% %} brackets.

Example

templates/template.html:

{% if greeting == 1 %}

<h1>Hello</h1>

{% else %}

{% endif %}

Django Code

The template tags are a way of telling Django that here comes something else than plain HTML.

The template tags allows us to to do some programming on the server before sending HTML to the client.

templates/template.html:

<ul>

{% for x in mymembers %}

<li>{{ x.firstname }}</li>

{% endfor %}

</ul>

In the next chapters you will learn about the most common template tags.

Tag Reference

A list of all template tags:

Tag	Description
autoescape	Specifies if autoescape mode is on or off
block	Specifies a block section
comment	Specifies a comment section
csrf_token	Protects forms from Cross Site Request Forgeries
cycle	Specifies content to use in each cycle of a loop
debug	Specifies debugging information
extends	Specifies a parent template
filter	Filters content before returning it
firstof	Returns the first not empty variable
for	Specifies a for loop
if	Specifies a if statement
ifchanged	Used in for loops. Outputs a block only if a value has changed since the last iteration
include	Specifies included content/template
load	Loads template tags from another library
lorem	Outputs random text
now	Outputs the current date/time
regroup	Sorts an object by a group
resetcycle	Used in cycles. Resets the cycle
spaceless	Removes whitespace between HTML tags
templatetag	Outputs a specified template tag
url	Returns the absolute URL part of a URL
verbatim	Specifies contents that should not be rendered by the template engine
widthratio	Calculates a width value based on the ratio between a given value and a max value
with	Specifies a variable to use in the block

For Loops

A for loop is used for iterating over a sequence, like looping over items in an array, a list, or a dictionary.

Example

Loop through the items of a list:

{% for x in fruits %}

{% endfor %}

Example

Loop through a list of dictionaries:

{% for x in cars %}

<h1>{{ x.brand }}</h1>

<p>{{ x.model }}</p>

{% endfor %}

Data From a Model

Data in a model is like a table with rows and columns.

The Member model we created earlier has five rows, and each row has three columns:

id	firstname	lastname	phone	joined_date
1	Emil	Refsnes	5551234	2022-01-05
2	Tobias	Refsnes	5557777	2022-04-01
3	Linus	Refsnes	5554321	2021-12-24
4	Lene	Refsnes	5551234	2021-05-01
5	Stalikken	Refsnes	5559876	2022-09-29

When we fetch data from the model, it comes as a QuerySet object, with a similar format as the cars example above: a list with dictionaries:

<QuerySet [

{

'id': 1,

'firstname': 'Emil',

'lastname': 'Refsnes',

'phone': 5551234,

'joined_date': datetime.date(2022, 1, 5)

{

'id': 2,

'firstname': 'Tobias',

'lastname': 'Refsnes'

'phone': 5557777,

'joined_date': datetime.date(2021, 4, 1

Django QuerySet

A QuerySet is a collection of data from a database.

A QuerySet is built up as a list of objects.

QuerySets makes it easier to get the data you actually need, by allowing you to filter and order the data at an early stage.

In this tutorial we will be querying data from the Member table.

Member:

id	firstname	lastname	phone	joined_date
1	Emil	Refsnes	5551234	2022-01-05
2	Tobias	Refsnes	5557777	2022-04-01
3	Linus	Refsnes	5554321	2021-12-24
4	Lene	Refsnes	5551234	2021-05-01
5	Stalikken	Refsnes	5559876	2022-09-29

Querying Data

In views.py, we have a view for testing called testing where we will test different queries.

In the example below we use the .all() method to get all the records and fields of the Member model:

View

views.py:

from django.http import HttpResponse

from django.template import loader

from .models import Member

def testing(request):

mydata = Member.objects.all()

template = loader.get_template('template.html')

context = {

'mymembers': mydata,

}

return HttpResponse(template.render(context, request))

The object is placed in a variable called mydata, and is sent to the template via the context object as mymembers, and looks like this:

As you can see, our Member model contains 5 records, and are listed inside the QuerySet as 5 objects.

In the template you can use the mymembers object to generate content:

Template

templates/template.html:

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

{% for x in mymembers %}

<tr>

<td>{{ x.firstname

Create Static Folder

When building web applications, you probably want to add some static files like images or css files.

Start by creating a folder named static in your project, the same place where you created the templates folder:

The name of the folder has to be static.

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/

Add a CSS file in the static folder, the name is your choice, we will call it myfirst.css in this example:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/
            myfirst.css

Open the CSS file and insert the following:

my_tennis_club/members/static/myfirst.css:

body {

background-color: lightblue;

font-family: verdana;

}

Modify the Template

Now you have a CSS file, with some CSS styling. The next step will be to include this file in a HTML template:

Open the HTML file and add the following:

{% load static %}

And:

Example

my_tennis_club/members/templates/template.html:

{% load static %}

<!DOCTYPE html>

<html>

<body>

{% for x in fruits %}

{% endfor %}

</body>

</html>

Restart the server for the changes to take effect:

And check out the result in your own browser: 127.0.0.1:8000/testing/.

Didn't Work?

Just testing? If you just want to play around, and not going to deploy your work, you can set DEBUG = True in the settings.py file, and the example above will work.

Example (in development):

my_tennis_club/my_tennis_club/settings.py:

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True

This will make the example work, but we want you to choose DEBUG = False, because that is the best way to learn how to work with Django.

Choose Debug = False

For the rest of this tutorial, we will run with DEBUG = False, even in development, because that is the best way to learn how to work with Django.

Example:

my_tennis_club/my_tennis_club/settings.py:

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = False

ALLOWED_HOSTS = ['*']

ADS CODE

Frequently Ask

What is VPS ? Explain in 100 word.

HTML RGB and RGBA Colors

RGB Color Values

Example

Shades of Gray

Example

RGBA Color Values

Example

What is Django?

How does Django Work?

Model

View

Template

My Homepage

URLs

So, What is Going On?

Django History

Django Requires Python

PIP

Virtual Environment

Virtual Environment

Install Django

Install Django

Windows, Mac, or Unix?

Check Django Version

What's Next?

My First Project

Run the Django Project

What's Next?

What is an App?

Create App

Update Records

Delete Records

Add Fields in the Model

Insert Data

Details Template

{{ mymember.firstname }} {{ mymember.lastname }}

Add Link in all-members Template

Members

Create new View

Add URLs

Update Members

Add Members

Delete Members

WhiteNoise

Install WhiteNoise

Modify Settings

Collect Static Files

Handle Static Files

Collect Static Files

The Example Should Work

Example

Database Engines

PostgreSQL

Install psycopg2

Modify Settings

SQLite

PostgreSQL

Engine?

Name?

Username and Password?

Host? Port?

Migrate

Members

Create superuser

Add Members

My Tennis Club

Lock in Dependencies

Provider-Specific Settings

.ebextension Folder

Create django.config File

Add Bootstrap 5

Install Bootstrap 5

Update Settings

Remove Old Styling

Add Bootstrap 5 to Template

Django Exercises

Exercises

Count Your Score

Start Django Exercises

Django Quiz

Document your skills
Improve your career

Study at your own pace
Save time and money

Known brand
Trusted by top companies