Developing a Basic Web Application Using Python
In this in-depth, code-heavy tutorial, learn how to use Python to create basic web apps. Once you know how to do this, you can make any web app to fit your needs!
Join the DZone community and get the full member experience.Join For Free
There are a few things we need to explain before getting into the thick of things. Let's focus on the overall picture with a few analogies:
- The internet is a network of computers. Its goal is to enable communication between them.
- A network is composed of nodes and edges. Visually, it is a set of dots and connections. The London tube map is an example.
- Your family, friends, colleagues, and acquaintances can be thought of as a network of people. (This is how social networks model our relationships.)
- To communicate, we must have a means by which our messages reach the intended destination.
- On one hand, we need something physical to connect the computers. These are the wires.
- On the other hand, we need some conventions (software) to ensure messages reach their destinations.
- One way this is done over the internet is called TCP/IP.
- TCP ensures the messages arrive safely with nothing missing. Every computer has an IP which is a unique address.
- You can think of TCP as an envelope and IP as the address on it.
HTTP and the Request/Response Cycle
To communicate effectively, the elements of a network need to agree on some protocol. That protocol for humans can be English, but there are other protocols (Chinese, for example).
Many computers on the internet use HTTP to communicate. Every time you click on a link, or type a URL and enter into a browser, you are making what is called an HTTP
Here is an example that uses
curl from the command line as a client:
$ curl - sv www.example.com - o / dev / null * About to connect() to www.example.com port 80(#0) * Trying 18.104.22.168... * Connected to www.example.com (22.214.171.124) port 80 (# 0) > GET / HTTP / 1.1 > User - Agent: curl / 7.30 .0 > Host: www.example.com > Accept: * /* >
< HTTP/1.1 200 OK < Accept-Ranges: bytes < Cache-Control: < Content-Type: text/html < Date: Thu, 21 Aug 2014 12:09:46 GMT < Etag: "359670651" < Expires: Thu, 28 Aug 2014 12:09:46 GMT < Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT < Server: ECS (iad/182A) < Content-Length: 1270 <!doctype html> <html> <head> <title>Example Domain</title> </head> <body> <div> <h1>Example Domain</h1> <p>This domain is established to be used for illustrative examples in documents. </p> </div> </body> </html>
*is information from the
>is the HTTP request text that
<is the HTTP response text that
Note that the response includes the HTML page that will be rendered in a browser.
Tip: HTTP is just text. We send text requests and we receive text responses. All complex pretty pages in the browser are created from these text responses.
In software development, architecture is a way of organizing code that you see time and time again. It's also called a pattern.
A browser is a great example of a client. It sends HTTP requests to a server. A server returns an HTTP response, which the browser then renders as a web page. We will see other examples of a client-server architecture when we introduce using databases.
Browsers understand how to render HTML. HTML is a way to structure text.
<!doctype html> <html> <head> <title>Example Domain</title> </head> <body> <div> <h1>A Header</h1> <p>Here is some text between p elements</p> </div> </body> </html>
Note it consists of elements like this: <el>content<el>. We don't need to dive any deeper than this.
Data needs to be stored somewhere. Typically, we save data in files. Databases are another way of saving data which has some advantages over plain files. Web applications often save data in databases rather than files. You can think of a database much as you would spreadsheet software. It stores information in a collection of tables.
Using Chrome, open developer tools: view/Developer/DeveloperTools.
A tab will pop up. Click on the Network tab. Now type a URL (web address) that is familiar to you. Inspect the HTTP
GET request. Here, we try with www.example.com:
Note that we have the same information we found with
curl above. It is presented in a more user-friendly way, however. Explore one of your favorite websites using the developer tools to inspect what is going on at the HTTP network level.
All internet experiences, online shopping, news, videos, sending texts, etc. boils down to computers sending messages, much like what we have described above. HTTP is not the only protocol in town, but the concept of computers acting as clients and servers communicating by sending requests and responses is almost universal.
Let's prepare to create our web services.
Lets create a project directory:
mkdir website cd website
pip is a way to install Python code. Python code is installed as a package. To list all currently installed python packages:
$ pip freeze.To install Django:
$ pip install django.
Creating Django/Python Project
We use a script supplied by Django to set up a new project:
$ django-admin.py startproject website
You should see this folder structure and files generated:
website - manage.py - website - __init__.py - settings.py - urls.py - wsgi.py
The important files are
A lot of configuration is needed to set up a web application.
website/settings.py contains a lot of names that define all the configuration for our website. All the defaults are good for now.
Note that the
INSTALLED_APPS name is defined as a tuple of strings. We will be adding to that tuple shortly. Note also that the DATABASES name is defined as a dictionary.
Creating the Database
Notice that the current directory doesn’t include a
db.sqlite3 file. Django, like all web frameworks, stores its data in a database. Let's create that database now:
python manage.py syncdb
You will see some output such as:
(django) website $ ./manage.py syncdb Creating tables ... Creating table django_admin_log Creating table auth_permission Creating table auth_group_permissions Creating table auth_group Creating table auth_user_groups Creating table auth_user_user_permissions Creating table auth_user Creating table django_content_type Creating table django_session You just installed Django's auth system, which means you don't have any superusers ˓→defined. Would you like to create one now? (yes/no): yes Username (leave blank to use 'greg'): Email address: Password: Password (again): Superuser created successfully. Installing custom SQL ... Installing indexes ... Installed 0 object(s) from 0 fixture(s)
Now, the top-level folder website contains a file called
db.sqlite3. This is your database.
Inspecting the Database
. Choose the sqlite-shell-win32-x86-....zip file. Unzip it by double-clicking it. Then, drag and drop it into C:BOOTCAMPPython34. The last step is to add it to a directory on the
A database application is like a server. We send requests using clients. The clients in this case aren’t the browser but typically programs such as our Python website.
We will use another server to independently inspect our database. You launch the client by typing
The sqlite3 program provides a new type of shell, which is meant for inspecting our database.
Here is an example interaction:
(django) website sqlite3 db.sqlite3 SQLite version 3.7.13 2012-07-17 17:46:21 Enter ".help" for instructions Enter SQL statements terminated with a ";" sqlite> .tables auth_group auth_user_user_permissions auth_group_permissions django_admin_log auth_permission django_content_type auth_user django_session auth_user_groups sqlite> select * from auth_user; 1|pbkdf2_sha256$12000$YqWBCAkWemZC$+hazwa/dPJNczpPitJ2J0KR8UuAX11txLlSkrtAXk5k=|2014- ˓→08-21 14:59:05.171913|1|greg||||1|1|2014-08-21 14:59:05.171913 sqlite>
.tables command lists all the tables that exist in the database. We rrecognizethese as being the same that were created earlier by running the
.manage.py syncdb command.
select * from auth_user; is SQL. SQL is a language dedicated to programming databases. This command means, "Give me everything in the
sqlite3 .quit to exit.
Running the Server
You run the server with
Now you can send http requests using your browser as client. Enter http://127.0.0.:8000/. You should see:
You can quit the server at any point by with ctrl + c.
Creating and Installing the Blog App
Tip: Django, like any framework, provides a way of organizing your code. It provides a proven architecture that you learn to work within.
A good web framework makes a lot of decisions for you. You build on the combined experience of the developers who created it. Django introduces the concept of an app as a way to organize code. Our blog will be an app. We create it with:
./manage.py startapp blog. We now have a folder directory generated that looks like:
- blog | - __init__.py | - admin.py | - models.py | - tests.py | - views.py - db.sqlite3 - manage.py - website - __init__.py - settings.py - urls.py - wsgi.py
We now need to tell our website about the blog apps’ existence. We do this by adding it to the
INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'website', 'blog', )
Creating Web Services
We will start by programming the server to return a responses to an HTTP
GET request. We will always need to do two things:
Map a url to a view function
Define the view function
This file matches URLs to view functions. When the Django server receives a URL, it searches in this file for one that matches. If it matches, it executes the mapped function. If it doesn’t find anything, you get a 404 Page Not Found error.
Django provides us with what it calls view functions. These are ordinary Python functions, but they take a request object and they respond with a string or what is called an HTTP Response object. In your blog app, open the
Add this to it:
from django.http import HttpResponse def hello(request): return HttpResponse('hello')
Now we need to configure our website with which request will trigger this view function. We do this by adding a line to
urlpatterns = patterns('', url(r'^hello$', 'blog.views.hello'), url(r'^admin/', include(admin.site.urls)), )
In our browser, http://localhost:8000 responds with "hello".
We have responded to a
GET request. We will often follow this pattern of creating a view function and hooking it up to a URL.
GET requests can pass parameters in the URL. Here is an example: http://localhost:8000/whoami/?name=greg&sex=male.
The parameter section is defined by
? followed by
&- separated keys and values.
Here, we have the parameters: name, equal to greg; sex, equal to male. As usual, we need to do two things: create a view function and hook it up in
website/urls.py. First, the view function:
def whoami(request): sex = request.GET['sex'] name = request.GET['name'] response = 'You are ' + name + ' and of sex ' + sex return HttpResponse(response)
Note that we can extract anything passed in the URL after the
? character using the request
urlpatterns = patterns('', url(r'^$', 'blog.views.hello'), url(r'^time$', 'blog.views.time'), url(r'^whoami/$', 'blog.views.whoami'), url(r'^admin/', include(admin.site.urls)), )
You should now get a response:
You are greg and of sex male
Here are two exercises you can create.
You can get an exact time by doing the following:
>>> import datetime >>> datetime.datetime.now()
Program your server to respond the time when it receives an HTTP GET request to this URL: http://localhost:8000/time.
You will need to create a view function in
blog/views.py, and hook it up to a URL in
Body Mass Index Service
You have just been contracted by the NHS to provide a service that calculates the BMI. Both other websites and mobile apps will be using your service. The endpoint (URL) will respond successfully to the following type of URL: bmi/?mass=75&height=182.
Look up the BMI equation on Wikipedia, write a BMI view function, and hook it up to the website URLs.
You may have to revisit the notion of type in Python. Remember there is a difference between ‘5’ and 5.
To transform a number as a string into a number you can cast it using either
>>> float('5') 5.0 >>> int('5') 5
By now you have discovered that you can trigger any type of programming sending a
GET request to your server. You simply hook up a URL to a view function. Come up with something that is useful to you!
Opinions expressed by DZone contributors are their own.