DAY-1: First Django Project

In this fast track course you will create an awesome event website using the python framework “Django”. On the Django homepage it is called “The web framework for perfectionists with deadlines”. In this course we will prove that this is very true.

This course boils down the Django development cycle to it’s essentials - we will not bore you with “historical facts” about python or any long running OS installation routines or useless “Hello World” programs.

We will get you started right away and let you create something awesome yourself !!!

After that course you will know the most important things about Django - what it can do, how it is used and you will have a feeling for how easy it is to get started. You will experience yourself that Django is a really powerful framework ...

  • write better apps in shorter time with less code
  • the code of the framework is mature, stable and follows state of the art best practices
  • you don’t have to do monkey work - you just define your data model and Django creates databases and tables, all default SQL queries, a powerful admin tool, type and input validations, session management, user and role management, a template engine, i18n features and much more for you
  • ...

Of course it is not possible to cover all aspects of Django in 4 hours ... this is not what we want and this is also not necessary to get you started on the fast lane.

Roll up your sleves and let’s get started!

For this tutorial we are using:

Summary of DAY-1

Let’s sum up what we will do in the first hour:

  • setup a fully blown, state of the art development environment
  • upgrade our libraries to lastest versions
  • create our a basic project structure
  • setup and test our runtime environment
  • connect our work to an online code repository

And all that in less than 1 hour. Let’s go.

1. Online Development Environment

Installation routines are always annoying and boring. We want to show you how to develop with Django - and not how to setup dev environments. For this reason we are using an online development environment in “the cloud”. We will be using cloud9, hereafter referred as c9 platform to develop, test and run Django projects.

So, please signup in c9.io and create an account. Don’t worry ... it’s free ...

Why c9?

c9 is a browser based IDE with a full pre-loaded Ubuntu Linux workspace and a server to host your Django website. You can choose to load a workspace specific to different frameworks. It makes it so easy to get started with a Django project - you just need a browser and an internet connection.

1.1 c9 dashboard

Ok - you have created a c9 account ... great! Now it is time to create a workspace. Please login with your c9 account and follow the steps below.

We would recommend that you are using 2 screens - have your c9 browser on one side and this course window on the other.

_images/c9-dashboard.png

Figure 1.1: c9 dashbaord

2. Django Workspace from git

The code examples we use in this tutorial are stored in a remote repository. We will be using git, a powerful version control system, to download code snippets. Do not worry about Git. You don’t need to know anything about Git to follow this tutorial - just follow the steps ...

2.1 Create workspace

  1. Login with your c9 account and go to the dashboard.

  2. Click on Create a new workspace.

  3. Type myevent in workspace name.

  4. Click on public.

  5. Enter https://github.com/slash4-de/django.git in Clone from Git or Mercurial URL field.

  6. Select Django as the template

    _images/c9-project-template.png

    Figure 1.2: Project template

  7. Click on Create Workspace button.

This will create new workspace named ‘myevent’.

2.2 Workspace Introduction

So let’s check out your online workspace. You have an editor, your own Linux shell and a runtime - that’s all you need to develop, test and run your application.

_images/c9-workspace.png

Figure 1.3: c9 Workspace

In above window, you can see:

  1. Run Project: When you click “Run Project” c9 will start a small “application server” with your code and you will be able to access and test it in your browser.
  2. Project exporer: Shows you a list of files and folders of your project.
  3. Bash: Browser based terminal to run Linux commands. In your c9 environment you have your own little Linux server - you can run commands like your were logged in with ssh.

2.3 Project Structure

Next we are taking a closer look at the file structure. Expand the tree of your project files on the left navigation ...

  • myevent: It’s the root directory of your project. It contains all the project files.
  • myevent/manage.py: Let’s you run Django utility functions for administrative tasks from the command line. We will take a closer look later.
  • myevent/myevent: It’s your Python package folder. It contains settings and configuration files about your project.
  • myevent/myevent/__init__.py: This is a special Python file to handle packages and modules. It is not important to understand it now. Anyway if you want to know how it works check out: https://docs.python.org/2/tutorial/modules.html#packages
  • myevent/myevent/urls.py: Here, you can define an URL Schema for your website. Basically you can map URLs to functions and views. We will take a closer look later.
  • myevent/myevent/wsgi.py: An interface between the application server and your project code. In the beginning you won’t need to modify things here.
  • myevent/myevent/settings.py: A configuration file for your Django project. It containts database settings, which modules to load and other global configuration parameters.

Note

Remember: The “myevent” folder is your “project” folder. It represents the basic Django structure and contains settings and helpers. It does NOT contain any application code.

2.4 Run Project

First we will update our environment to the latest versions.

Note

By default c9 will have Django 1.7.1 and Python 2.7 installed (as time of writing this tutorial), you can easily upgrade Django to latest version by:

sudo pip install --upgrade Django

Ok - we did not code a single row yet. Anyway - let’s see how we can run an application.

Go to “bash tab” at the bottom of your c9 workspace and type the following command next to workspace (master) $. See figure 1.4 (red underlined part). We do this to “rewind” our project files to the beginning of the course ...

git checkout -f day-1-step-1
_images/c9-bash.png

Figure 1.4: git checkout command

Note

In your c9 virtual Linux server, /home/ubuntu/workspace is your project root. manage.py will reside in the /home/ubuntu/workspace directory. If you are familiar with Linux - feel free navigate around in your workspace server. But - make sure to run the commands of this course from your project root folder.

  1. Now click on the Run Project button to run the project (See in workspace)
    _images/c9-runproject.png

    Figure 1.5: c9 workspace, run project

  2. For the first run, it will ask you to create a superuser (in the bash output window on the bottom). Type yes and provide the information (see image above). Remember the username and password you enter here.

  3. In the Run tab (next to bash tab), you will see your webserver URL. Generally, project urls look like this http://projectname-username.c9.io

  4. Copy the URL. Open new a new browser tab and paste it in the address bar. You will see a Django congratulation page if it runs successfully.

Note

The project URL is shown in line Your code is running at https://projectname-username.c9.io. The part after http (including http). For example, http://myevent-slash4.c9.io is the URL for us, where myevent is the project name and slash4 is your username. Alternatively, you can find your project URL by clicking on preference icon at top-right corner of workspace.

Important

Please remember or make notes of the username and password you provided here. You will need these in DAY-2 to login into the Admin Site.

3 Django App

Ok - now we are having a development environment, a runtime, a code repository and a basic project structure. Let’s start working on our application. A Django project is a collection of configuration files and applications. A project can consist of multiple “apps” which can be thought of as modules - designed to do specific tasks. Our “myevent” project could consist of an “events” and a “marketing” app - for example. In “events” you would put all the code for the end user that is looking for events - and in “marketing” you could put all the code for agencies that are doing marketing for those events. One app can be also be (re)used in multiple projects.

As an excercise - create an app and investigate what files will be created.

To create your app, make sure you’re in the same directory as manage.py (See 4) and type following command:

python manage.py startapp events

The command will generate the following files and folders. This is the default django app structure. It does not contain any functionality yet ...

events/
    __init__.py
    admin.py            # Your Admin application
    migrations/
        __init__.py
    models.py           # Your Data Model, goes here
    tests.py
    views.py            # Your views and logic, goes here

To develop our event website we have prepared an “events” app in our code repository. Get it by typing:

git checkout -f day-1-step-2

3.1 Activating module:

Since a project is seperated into multiple apps - you have to register your app to the project.

Double click on settings.py in the “myevent” folder in your filebrowser on the left and scroll to the INSTALLED_APPS section:

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'events',
)

As you can see - due to the git checkout -f day-1-step-2 command before - your events app is already registered. The other modules are activated by default and provide basic functionality for the Django framework.

4 Home Page

The default Django home page is a simple placeholder congratulation page. Time to spice up. Let us make beautiful home page. Type the following command to get an update:

git checkout -f day-1-step-3

Changes:

Following changes have happened. Please open each file and review the changes:

  • In events/views.py, following lines have been added.

    def home(request):
        return render(request, 'events/home.html')
    
  • In myeevnt/url.py, following line has been added.

    url(r'^home/$', 'events.views.home', name='home'),
    
    • New file added - events/templates/events/home.html
    • New file added - template/static/style.css
    • New file added - template/static/bootstrap.css
    • New file added - template/static/images/demo/bg-slide-01.jpg
  • Added STATICFILES_DIRS in myevent/settings.py

    STATICFILES_DIRS = (
       os.path.join(BASE_DIR, 'template', 'static'),
    )
    

    This tells Django that we have saved all our static files in template/static directory.

► Now run the project again and point your browser to your project URL. You will see your new event home page.

5. Assignments

Ok. Now we have a basic project an app structure - and a start page. As an excercise - please make some changes on the Home page.

  • Update Event name, venue, time etc.

Hints:

  1. On the project explorer, locate the events/template/home.html file
  2. Open the file and make changes. Press Ctrl-s to save the file.

After making changes, ► Run project see the results, 2.4. Point your browser to project URL to see changes.

Note

If you modify static files (e.g. *.html) you don’t need to restart / rerun your project. Just reload your page in the browser and you should see the changes directly.

You can get a solution from our code repository by typing :

git checkout -f day-1-solution-1

► Run project see the results, 2.4 and point your browser to project URL. Notice the changes in the home page.