Learning Web Development w/ Python Part 1
ArchieMaclean (619)

Learning Web Development with Python and Django

Part 1

If you already know a bit about web development, then check out Gareth Dwyer's Tutorial. This tutorial is intended for beginners, and takes things a bit more slowly.

Welcome!

In this tutorial, I'm going to be teaching you how you can use the Django web framework to make your own web apps with Python.

Prerequisites

For this tutorial, you should have a decent understanding of Python. Knowing some HTML and CSS helps.

The Client and the Server

Before we can start coding our own web app, we need to know a little of how the internet actually works - clients and servers.
Servers
Servers are basically the computers that 'run the websites'. Each website has its own server (in reality, large websites have lots of servers). Each server has its own domain name, e.g. www.google.com or www.repl.it.
Clients
Clients are computers that connect to servers - i.e. people who visit the website.

How do Clients connect to Servers?

This depends largely on what protocol is being used. The most common protocols are http (hyper-text transfer protocol) and https (secure hyper-text transfer protocol). On a very basic level, what happens is:

  • The client sends out a message saying "I want to see this page on this website, my address is xxxxx".
  • The message arrives at the server.
  • The server checks which page to send and then sends it back in the form of html (and often other filetypes, but we will be focusing on html here).
  • The browser of the client interprets the html to give a visual output.

How does this apply to Django?

When we use Django, we're basically writing our own server. Django takes care of all the sending and stuff, all we have to do is add our pages, and put them in a place Django can find them.


By now, you'll be itching to write some code, so lets get started!
When you create a Django project on repl, there is already some code in there, so I have made a basic template which has the bare minimum. Open the template, and click the fork button at the top to make your own copy.

You can now rename it to hello-world (or something else if you prefer).

Creating your very first app

Before we make any changes, you can click the square icon in the top right of the view panel:

This will open the page in a new tab so you can see the fullscreen version of it. You should get a page like this:

This is just the standard Django page, which appears when you haven't written any code yet.

Creating our first web page

When you type in a URL (such as https://ww.repl.it/languages/python) on a browser, there are three parts:

  • Protocol - almost always http or https.
  • Domain name - looks like www.repl.it/.
  • Page name - looks like languages/python, and is after the domain name.

With our project, we don't need to worry about the domain, because repl creates one for us to use (in the form <repl-name>--<username>.repl.co). However, we will need to think about our page names.

URLs and Views

There are 2 parts to displaying a page on Django - the URL, and the view. The view is what the client will see when they visit the page.

Writing our view

For this first project, we will be using function-based views. This means that each view is a Python function.

Navigate to the views.py file, and add the following code:

from django.http import HttpResponse

def homePageView(request):
  html = "Hello, World!"
  return HttpResponse(html)

So, what does this code do?

Line 1 imports HttpResponse , which we will need in order to return the html in the correct format.
On Lines 3-5 we create our view.

  • Line 3 - this is our function, called homePageView, because it will be the homepage of our website. It takes request as an argument - for more advanced projects, you will use request in your function, but we don't need to worry about it right now. request is a request object, that carries information about the request for the page.
  • Line 4 - this is the html for the website. This is extremely simple hmtl - it doesn't have any tags, all it has is the text "Hello, World!".
  • Line 5 - this is where we return the html, in a form Django can understand (HttpResponse)

If we run this code, we get...nothing! The reason for this is that Django doesn't know what to do with the view.

Adding the URL (Page name)

We need to tell Django where the view should be displayed.

Navigate to the urls.py file, and add the following:

from .views import homePageView

Then change urlpatterns to:

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url('',homePageView,name="home"),
]

Before we analyse the code, go to your website (in the other tab), and refresh. You'll see we got we wanted!

So how did this happen? Let's look at the code.

from .views import homePageView

This imports our homePageView function from the view.py file. The period . at the start tells Django to open it from the current directory (main). This is needed because the code will be run from somewhere else, so Django could get confused and try to import it from a different folder.

In urlpatterns we added

url('',homePageView,name="home"),

(Note that '' is 2 single-quotes, not 1 double quote)

This tells Django to treat it as a url. There are 3 arguments given:

  • The first ('') is the page name, which I described earlier. If it was something like about/aboutme then the page would be located at https://domain.name/about/aboutme (replacing domain.name with the domain name, obviously). However, it is just '' so the view will be located at just https://domain.name/.
  • The second is our view that we created in views.py and imported earlier.
  • The third is the name we give our page. It is not essential, but will come in useful later when we want to keep track of all the pages.

Congratulations!

You've made your first web page with Django! It may seem a bit convoluted right now, but this format is very helpful when we make bigger web applications and have many files.

That concludes Part 1

In Part 2, we will be looking at the more powerful class-based views, as well as multiple pages in out project.

Please upvote if you found this tutorial helpful, it supports me and lets me know that you want more! If you have any questions, post in the comments and I (or someone else) will answer them.

You are viewing a single comment. View All