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:

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 GET  request.

Here is an example that uses curl from the command line as a client:

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.

Client-Server Architecture

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.

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.

Project Folder

Lets create a project directory:

Install Django

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:

You should see this folder structure and files generated:

The important files are manage.py, settings.py, and urls.py.

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:

You will see some output such as:

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 sqlite3 db.sqlite3.

The sqlite3 program provides a new type of shell, which is meant for inspecting our database.

Here is an example interaction:

The .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.

The select * from auth_user; is SQL. SQL is a language dedicated to programming databases. This command means, "Give me everything in the auth_user table."

Type sqlite3 .quit  to exit.

Running the Server

You run the server with  ./manage.py runswever.

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:

We now need to tell our website about the blog apps’ existence. We do this by adding it to the INSTALLED_APPS tuple.

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:

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.

Saying Hello

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 views.py  file.

Add this to it:

Now we need to configure our website with which request will trigger this view function. We do this by adding a line to website/urls.py:

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 Parameters

HTTP 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:

Note that we can extract anything passed in the URL after the ? character using the request GET dictionary.

Now website/urls.py:

You should now get a response:

Here are two exercises you can create.

Time Clock

You can get an exact time by doing the following:

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 website/urls.py.

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 int() or float():

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!

Like This Article? Read More From DZone Python Frameworks for Web Developers in 2018 PyDev of the Week: Luke Plant Web Dev Roundup: Django Unchained Free DZone Refcard

web dev ,python ,web application ,http ,tutorial ,django

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

Test in Production (the Netflix Way)
Remove Guesswork and Save Time Prioritizing Your Workflow
Adopt Continuous Delivery Without Harming End Users
How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)
[null, {"document_url": "https://dzone.com/articles/bounty-tutorial-developing-a-basic-web-application", "unformatted_src": "/themes/dz20/images/DZone_MobileLogin2.png", "src": "https://dzone.com/themes/dz20/images/DZone_MobileLogin2.png", "formatted_filename": "DZone MobileLogin"}, null, null, {"document_url": "https://dzone.com/articles/bounty-tutorial-developing-a-basic-web-application", "unformatted_src": "https://dzone.com/storage/temp/6702036-python1.png", "src": "https://dzone.com/storage/temp/6702036-python1.png", "formatted_filename": "python", "alt_text": "Image title", "rendered_width": 681}, null, {"document_url": "https://dzone.com/articles/bounty-tutorial-developing-a-basic-web-application", "unformatted_src": "https://dzone.com/storage/temp/6702042-python2.png", "src": "https://dzone.com/storage/temp/6702042-python2.png", "formatted_filename": "python", "alt_text": "Image title", "rendered_width": 763}, null, {"document_url": "https://dzone.com/articles/bounty-tutorial-developing-a-basic-web-application", "unformatted_src": "https://dzone.com/storage/temp/6702131-python3.png", "src": "https://dzone.com/storage/temp/6702131-python3.png", "formatted_filename": "python", "alt_text": "Image title", "rendered_width": 829}, null, null, null, null, null]