How to start web development with Python using the Django framework

Photo by Émile Perron on Unsplash

A web framework is a collection of tools that allows web developers to overcome much of the difficulties and repetitions during web development. For example, most websites need the same basic functionalities: the ability to connect to a database, set URL routes, display content on a page, handle security properly, and so on. Rather than recreate all of this from scratch, programmers have created web frameworks in all the major programming languages: Django and Flask in Python, Rails in Ruby, and Express in JavaScript among many, many others.

Django inherited Python’s “batteries-included” approach, which means that the framework has everything necessary to develop a full-fledged application. That’s because Django offers built-in HTML templating, URL routing, object-relational mapping and session management, helping developers to avoid the vexing search for third-party tools. Moreover, it includes out-of-the-box support for common tasks in web development:

• user authentication
• templates, routes, and views
• admin interface
• robust security
• support for multiple database backends

Django also helps with SEO(search engine optimization), it offers a lot of useful SEO tools. With the Django SEO framework, developers can reduce page loading time by using cached templates and compressing CSS and JavaScript.

Above all, Django constantly evolves thanks to its community, which updates and improves components of the framework while also developing new libraries to solve issues that professionals often face when developing web applications.

Thanks to all these features, many important companies, such as Instagram, Spotify, Dropbox, and many others, are using the Django web development framework.

I think Django is an excellent choice for any developer who wants to build
Modern and robust web applications with a minimal amount of code.

After this introduction, we can start setting up the development environment.

Setting up the development environment

Photo by RawFilm on Unsplash

A virtual environment is a tool that helps to keep dependencies required by different projects separate by creating isolated python virtual environment for them. This means that each project can have its own dependencies, regardless of what dependencies every other project has.

In python, to build a virtual environment we use the virtualenv package.

Installing the python binding for virtualenv:

pip install virtualenv

Then we create the environment with the following command:

virtualenv project

This will create the project Folder, we move into it with cd project, and we activate the virtual environment:

On UNIX(Mac and Linux): source project/bin/activate
On Windows: project\env\Scripts\activate.Bat

We installed, created, and activated the project’s virtual environment; now, it’s Django’s round to be installed and set up.

To install Django’s python binding, we simply type on the terminal(in the project’s folder with the virtual environment activated):

pip install Django

Starting with Django

After installing everything we need, we can start to develop with the Django web framework.

First, we create our Django project:

django-admin startproject djangowebsite

Let’s take a look at our project’s folder:

Don’t worry about all these python files, in this tutorial we are only going to use:

• manage.py to manage the entire website.
• urls.py to manage the website’s URLs
• settings.py to manage the website’s settings

Pretty intuitive :)

Now, the first thing I guess you want to do is running the website, to do that you just need to move into /project/djangowebsite directory and execute the following command in your terminal:

python manage.py runserver

Open with your browser the http://127.0.0.1:8000/ URL and you should see the following:

Congratulations! You ran your first Django Website!

But, as you can see, our website is not very useful. This is because the HTML page displayed when accessing 127.0.0.1:8000/ is the default Django’s HTML page. Let’s see how we can return a custom HTML page(instead of the default one) when accessing 127.0.0.1:8000/.

We need to create the templates folder, in which we will save the HTML files, in the /project/djangowebsite directory.

Again, to clarify doubts, let’s take a look at the project’s directory:

Now, we create the index.html file in the /project/djangowebsite/templates folder and type:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

This code simply returns a big Hello World. But that’s not all: we need the website to return index.html when accessing 127.0.0.1:8000/. To do that we follow these two simple steps:

- Modify settings.py to add to the website the templates folder we created.

- Modify urls.py to display index.html when entering the website.

Modify settings.py

To edit the file we open it and about the 57th line you should see something like this:

'DIRS': [],

We need to add to DIRS the templates folder we created before:

'DIRS': [os.path.join(BASE_DIR, 'templates')],

We’re done modifying the settings.py file let’s change urls.py

Modify urls.py

Before modifying the urls.py file, let’s take a look at it.

from django.contrib import admin
from django.urls import path
urlpatterns = [
 path('admin/', admin.site.urls),
]

In the first two lines, it imports the needed modules. The urlpatterns is the list in which we are going to add the website’s URLs.

We want to add the '/' URL(stands for 127.0.0.1/) to the URL patterns list:

from django.contrib import admin
from django.urls import path
from django.shortcuts import render
def index(request):
 return render(request, 'index.html')
urlpatterns = [
 path('admin/', admin.site.urls),
 path('/', index),
]

At line 3, we imported the render function, which helps us to make the website return a custom HTML page.

At lines 6 and 7, we defined the index() function returning the index.html, the file we created before.

At the end(line 12), we make return the index.html function when accessing to '/' which, as I already said stands for 127.0.0.1/.

Running your first custom website with Django

To run the website, as we have already seen, you just need to execute:

python manage.py runserver

That’s what you should see:

Awesome!

You developed your first custom website with the Django web framework!

As it is said in the title, this tutorial was just a way of how to START web development with python, so, this tutorial ends here, but don’t worry, I’m planning to post other tutorials about Django web development.

By the way, I have some suggestions for you to create a simple and awesome-looking website with the knowledge you should have achieved after following this tutorial:

• Update the index.html file, insert some good HTML template with CSS and javascript implementation. If you don’t have HTML, CSS or javascript knowledge, you can download some nice HTML templates from the web
• Publish your website online for free with the pythonanywhere service, you can find a lot of tutorials that explain how to do it.

See you in the next post, stay tuned.