Django for Designers

Introduction

In this tutorial, we will explain topics and provide commands for you to run on your own computer. You will leave with a working social bookmarking web app!

This is a tutorial on web programming, so we will go beyond just Django and discuss third-party Django apps and other real-world web development tools. We'll also be emphasizing areas of Django that particularly affect designers, such as static files, template inheritance, and AJAX.

Things you should know already

• HTML familiarity
• Basic Python proficiency
• Basic or better Javascript proficiency
• Pre-requisites that we will help with

We expect you to have git, Python, and a few other elements ready on your laptop before the tutorial. We will publish a laptop setup guide that steps you through:

• Installing Python, git, pip, virtualenv, and a reasonable text editor
• Setting up your env with Django, South, and django-debug-toolbar
• Basic command line knowledge (cd, ls, etc)
• Basic git knowledge
• Setting up your git repo for the tutorial

Things you do not need to know already:

• Django :)
• What an ORM is
• Anything database related

Curriculum

Part 1: Starting our project

This tutorial goes through the process of building a simple social bookmarking application, where users can save various URLs and tag those bookmarks to make them easier to find later. Our bookmarks application will be built on top of Django, a full-featured web framework written in Python.

Activate your env

The first step is to open your terminal window, navigate to the folder where you plan to store your app code (where you set up your virtualenv for this tutorial earlier) and activate your env:

$ source env/bin/activate

You'll know it worked because afterwards, you'll see

(env)

at the front of all your terminal lines in that terminal window!

Start your project

If you're following this tutorial at PyCon, in your terminal, run:

$ git clone git://github.com/aldeka/pycon-django-tutorial.git

This will download a few files that we'll be using in this tutorial.

Additionally, this sets us up to use a program called git to save our progress and sync up later, in case any of you get stuck. If you're not familiar with git, git is a version control system that tracks changes you make to files within a git repository (the folder you just cloned). You make commits in git, which are like save points in video games -- the commit messages tell you what changes are included in this commit. If later on you make some changes and delete something or mess something up, you can always go back to a previous commit and try again.

Git also has "branches"--parallel timelines where you can go off from the main branch (called "master") and try something out. It's often a good idea to start a new branch when you're writing a new feature. You can make as many commits as you want inside the branch, and it won't affect the main master timeline. You can make as many branches as you want, and branches of branches. You can even share branches with others (though we won't be doing that today). Git's branching system (and its non-centralized architecture generally) make it easy to try out new ideas in code without having to ask permission of everyone else who might be working on the same code as you. Then, when your new feature is done, you can then merge (or rebase--the exact process would take a much longer explanation) the changes back into the master timeline.

We'll be using the master branch (the default name for the main branch of code, which you're in right now) for syncing up throughout the class in case you get lost. You'll need to make your own branches for playing with the code on your computer, so that it doesn't interfere w. re-syncing later.

To make your first branch, first enter the pycon-django-tutorial directory:

$ cd pycon-django-tutorial

Then enter:

$ git branch my-branch-1

Congratulations! You're now in a branch named my-branch-1!

You can see what branch you are in (and what branches are in your repository) at any time by typing:

$ git branch

Set up your settings and database

Projects vs. apps distinction

Set up tests, watch them fail

Start your first app

Syncdb

Part 2: URLs, basic views, templates, static files

M-V-C separation concept

Writing our URLs

Handling those URLs with placeholder views

Django templates 101

Static files

Part 3: Models, our database, and making it visible

Introduction to databases and the ORM, or: finally, something we couldn't've done with plain HTML/CSS/JS!

Creating a basic model, in models.py

Creating tables (carefully, with South)

Add data to your app via the command line

Database migrations and South, part 2

Modify views and templates to use model data

Part 4: Reusing others' apps

Users and authentication

CRUD with Django forms

Part 5: AJAX and style time

Adding and updating bookmarks with JSON and asynchronous Javascript

(sync up here)

Time to make our CSS and/or JS more awesome!

Part 6: Sharing with others

Surfing to classmates' "runserver" instances

Deployment on Heroku

Brief discussion of other deployment options

Part 7: Exercises for the reader

Writing your own tests

Write your own styles / JS frontend behavior

Handling user-uploaded media

Accessing a Django-powered API (Tastypie)

Learn about regular expressions (those crazy things we used in URLs)

Learn about relational databases