Setup

Introduction

Django is a Python web framework designed to encourage loose coupling and strict separation between pieces of an application. These pieces are: data access logic, business logic, and presentation logic. Together they comprise a concept that's called the Model-Template-View (MTV) pattern of software architecture:

Model: the data access layer. This layer contains anything and everything about the data: how to access it, how to validate it, which behaviors it has, and the relationships between the data.
Template: the presentation layer. This layer contains presentation-related decisions: how something should be displayed on a Web page or other type of document.
View: the business logic layer. This layer contains the logic that access the model and defers to the appropriate template(s). You can think of it as the bridge between models and templates.

Setting up a Django Project

Create a new Django web project called sigcse. Type at the command line:

django-admin.py startproject sigcse

This creates a new folder named sigcse. Change to that directory with the following command line:

cd sigcse

This folder should contain the following four files:

File Name	Description
`__init__.py`	Used to indicate that the current folder is a Python package.
`manage.py`	Utility script that allows you to interact with the current Django project in various ways.
`settings.py`	Configuration file for this Django project.
`urls.py`	The URL mappings for this Django project.

Run the web server to see if it works correctly. Type at the command line:
```
python manage.py runserver
```
Now, visit http://localhost:8000/ (open link in a new tab) with your Web browser. You should see a welcome page.
Open Komodo Edit and create a new Komodo project. From the main menu select Project/New Project..., in the dialog window type sigcse.komodoproject as the name of the project, navigate to the sigcse directory, and press the Save button.
Create folders for your static resources and web template pages. In the Places sidebar use the secondary mouse button to bring up the context menu. Select the New Folder... option, type static in the dialog window and press the OK button. Repeat the same steps to create a folder called templates. Make sure both the static and templates folders are at the same level directly under the sigcse folder.

Tell Django the location of your static and templates folders. Open and edit the settings.py file. At the top of the file add the following line:

import os.path

Locate in that same file the definition of the variables STATICFILES_DIRS and TEMPLATE_DIRS in order to add the highlighted lines shown below:

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(os.path.dirname(__file__), 'static').replace('\\','/'),
)

TEMPLATE_DIRS = (
    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(os.path.dirname(__file__), 'templates').replace('\\','/'),
)

Create a CSS file called styles.css and store it in the static folder. This file should contain the following:

body {
    color: #efd;
    background: #453;
    padding: 0 2em;
    margin: 0;
    font-family: sans-serif;
    font-size: 120%;
}

h1 {
    padding: 30px 30px;
    background: #675;
    color: #ffa;
    font-size: 150%;
}

h2 {
    color: #bf8;
    border-top: 1px dotted #fff;
    margin-top: 2em;
}

p {
    margin: 1em 0;
}

a:link {
    color: #fe5;
}

a:visited {
    color: #fe5;
}

a:hover {
    color: #fe5;
}

hr {
    margin: 20px 0px;
    color: #efd;
    background-color: #efd;
    height: 2px;
}

dt {    
    padding-top: 15px;
    font-weight: bold;
    color: #ffa;
}

dd {
    font-style: italic;
}

table {
    margin: 10px auto 10px auto;
    border: 1px solid #ffa;
    border-collapse: collapse;    
}

td, th {
    padding: 7px 15px;
    border: 1px dotted #999999;    
}

th {
    background: #675;
    color: #ffa;
}

footer {
    font-size: 90%;
    color: #ffa;
    text-align: center;
}

Create a base.html file in the templates folder. Every HTML file that we create will extend from this file. The contents of this file should be:

<!DOCTYPE html>

<html>
    
<head>
    <meta charset="utf-8"/> 
    <link rel="stylesheet" href="{{ STATIC_URL }}styles.css"/>    
    <title>Django Workshop</title>
</head>

<body>
    {% block main %}No body!{% endblock %}
    <hr/>    
    <footer>
        Workshop 30: <em>Web Development with Python and Django</em>
        <br/>
        <strong>SIGCSE 2012</strong>        
    </footer>
</body>

</html>

Create a new application called examples. Open a new command line window and move to the sigcse directory once again. At the command line type:
```
python manage.py startapp examples
```

Create a view that sends information to the template. Open and edit the file examples/views.py so that it has the following content:

from django.shortcuts import render

def foo(request):
    data_dic = {}
    # Populate the data dictionary here.
    # ...
    return render(request, 'foo.html', data_dic)

Link the view function with a URL pattern. Open and edit the urls.py file by adding the highlighted line:

from django.conf.urls.defaults import patterns, include, url

# Uncomment the next two lines to enable the admin:
# from django.contrib import admin
# admin.autodiscover()

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'sigcse.views.home', name='home'),
    # url(r'^sigcse/', include('sigcse.foo.urls')),
    (r'^foo/', 'sigcse.examples.views.foo'),

    # Uncomment the admin/doc line below to enable admin documentation:
    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    # url(r'^admin/', include(admin.site.urls)),
)

Create a foo.html file in the templates folder. The contents of this file should be:

{% extends "base.html" %}

{% block main %}
    <h1>Foo</h1>
    <p>
        Yes! This is my first Django Web page.
    </p>
{% endblock %}

Using your web browser, visit the following URL: http://localhost:8000/foo/ (open link in a new tab)

How Everything Fits Together

The following figure illustrates how the view, the model and the template components fit together in Django in the context of a complete HTTP request/response cycle.