Static files and URL’s handling in Django

It’s very easy to handle static files like CSS, JavaScript ( Js ), images, and URLs (multiple pages)in the field of web development. Developers now can experiment a lot with dynamic URL’s while using Django as the backbone for their website.

Handling Static Files :

In this 4^th thread of Hello Django we will be discussing, how to link static files like css, js, and images to the html file. Django uses DTL (Django Template Language) as its own back-end template system, which is very similar to the Jinja2 used in flask web-development framework.

It all starts with defining the root directory for all the static files in projectName/projectName/settings.py. By default, a folder named ‘static’ in the application dir is used as a container to hold all the files.

After loading all the files in static folder, its time to edit the template. In your HTML file where css and javascript files are loaded using link tag and script tag respectively. While using this tags just use DTL way of defining the paths for that file. For Example :

Traditional way :

<link rel = "stylesheet" type = "text/css" href = "path/to/css/file.css" >

Django way:

<link rel = "stylesheet" type = "text/css" href = "{% static 'file.css' %}" >

similarly, while using JavaScript (JS) or image files you just have to change the href/src/ path for the static file in the above given manner.

P.S. It is very important to add {% load static %} at the very beginning of your template file.

Handling URL’s

Django treats every method defined in views.py as the base route for any URL to be loaded. While defining views in Django it is mandatory to keep them unique and in order to make them run them at the back-end, it has to be defined in the list of all the URLs’ i.e. in urls.py file.

For better understanding let’s look into an example where we will link another page to our existing index page displaying the details of each student like contact number, email, and home address.

First, we will have to define the models to store details of each student and to do so you can go through this thread Models in Django. And add a new view ‘Detail’ in views.py.

def Detail(request, student_id):
    try:
        info = ModelName.objects.get(pk = student_id)
        return render(request, "information.html", {"data" : info}
    except:
        raise Http404("No information found")

Here, student_id is the key value received from the index page which will work as foreign key to retrieve particular Detail only. Now add corresponding url in urls.py

path("<int:student_id>", views.Detail, name = "detail")

You can use Python RegEX to define custom and dynamic URLs. The last thing to do is to update the index page and define student names in an anchor tag and link the information.html to the Detail view.

<a href = {% url 'detail' data.id %}> {{data.name}} <a>

P.S. All the nomenclature are taken from the previous thread examples.

And that’s it, you are ready to go, and see the urls working, you can use the similar method to define multiple pages in your application. Don’t forget to migrate the models very time you update the models.py file. If you are curious enough you can see the migrations using the command:

python manage.py show migrations 

It’s a wrap for this thread, in the next thread we will see how to define forms in Django. ‘Till then Happy Coding 🙂