Getting Started on Django

In the previous blog post we saw a little about creating responsive web page using Bootstrap framework. This is part 1 of many post on getting started on web development. We are going to see from basic concepts of creating a webapp to deployment in cloud using Django.

What is Django?

Django is free and open-source Web framework written in python. It is often known as

The web framework for perfectionists with deadlines

Installation

Python Installation

Why python? Django is written in python, so it needs python to run. Specifically we need python 3 since python 2 is nearing its end of support.

Visit https://www.python.org/downloads/ and it will automagically detect your operating system and displays latest version. Download and install it.

Note:
  • Make sure to check 'Add python 3.x to path' and proceed with default installation parameters.
  • Python 3 is now available in windows store(link here)
  • Python is available by default on Linux and OSx but you need to update it to latest version
  • To verify installation,

    On Windows open Command Prompt and type python --version

    On Linux/OSx Open Terminal and type python3 --version

    and it should display the installed version number as shown below

    PIP Installation

    PIP is a tool for installing Python packages.(python package manager). Pip is installed by default along with python installer

    To verify installation,

    On Windows open Command Prompt and type pip --version

    On Linux/OSx Open Terminal and type pip3 --version

    and it should display the installed version number as shown below

    Virtual Environment

    When working on multiple projects Creating virtual environment allows us to install different version of same packages without affecting the global version or other packages. The basic concept is whatever happens inside project folder stays inside project folder.

    Before installing a Virtual Environment, Create a newfolder and enter into it

    On Windows open Command Prompt and type pip install virtualenv

    On Linux/OSx Open Terminal and type pip3 install virtualenv

    After Successful installation, Let's create our venv using the following command python3 -m venv djEnv

    The above command creates a virtual environment named djEnv(you can use any name). We need to activate our venv before using it. To activate execute the following command

    On Windows open Command Prompt and type djEnv\Scripts\activate

    On Linux/OSx Open Terminal and type djEnv/bin/activate

    After activating virtual environment you should see (djEnv) as prefix. Now we are ready to install django

    Django Installation

    Django can be installed with PIP using the following command pip install django

    Verify the installation by checking the django version python3 -m django --version

    Now lets create our django powered site

    On Windows open Command Prompt and type django-admin.exe startproject djSite .

    On Linux/OSx Open Terminal and type django-admin startproject djSite .

    After executing the above command you should see the directory like this inside out test folder

    On the outside we have
    manage.py it is used to manage the site and django has a built in webserver for development purpose which can be started using this file. And inside oursite(djSite) we have settings.py in which all the configurations of the site are stored. Then we have urls.py which contains all the urls of our site. Rest of the file are not important now and we will discuss it later.
    Lets test our site by running it on our webserver using the following command.python3 manage.py runserver

    Ignore those migration warnings now that the server is started visit http://127.0.0.1:8000/ On your browser and you should see the image as below which indicates django is configured correctly.

    Now let's add some html to our project. Create a folder called ‘templates’ to place our HTML files. Inside templates create index.html and write your HTML code.Placing the html files doesn't work. We need to tell django to look into templates folder. We do so in settings.py. Append the string ‘templates/’ inside DIR array under TEMPLATES See here and save the file

    Create a new file called views.py inside project folder which is used to define the function to get and load the template

    Finally, in URL.py we define a url for the html to be displayed, so the user can go the url and view the page.enter the following code in urls.py

    final folder structure
    This is how our final folder structure looks

    Now again run the server and go to http://127.0.0.1:8000/index/ our html page will be loaded successfully.

    Now we are about to deploy it into real server and go online

  • Add the project into a new github repo
  • Create a free account on https://www.heroku.com/
  • After loginig into heroku dashboard click create new app fill the details.
  • Now before deploying we to do a little configuration for Heroku
  • Procfile is used to say what command should be run by heroku to execute our project. Create a Procfile inside the project folder by copy pasting the following line web python manage.py runserver 0.0.0.0:$PORT
  • Next Create a file called requirements.txt and write the list of packages to be installed. At the moment we have only one package django to be installed so write django inside it and save it.
  • In settings.py add the following two lines
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    ALLOWED_HOSTS = ['localhost', 'dj-tutorial.herokuapp.com/']

    Replace 'dj-tutorial.herokuapp.com/' to your heroku app name.

  • Now push the changes to github and back to heroku dashboard.

  • In the next screen under deployment method click github and then click ‘Connect to GitHub’.
  • After connecting to GitHub, in the new screen click search the github repo and click connect, then check enable automatic deploy and finally click Deploy Branch.
  • After getting success message click view and navigate to /index/
    i.e. https://dj-tutorial.herokuapp.com/index/. Thats it now we have our first webpage(to be evolved as webapp) deployed on server.

    To summarize we installed python and its tools(pip,venv) then using venv we created a virtual environment and installed django using pip. Finally we created a project, added html files inside template folder, configured settings for heroku before deployment.

    Link to Project on Github

    In the upcoming posts lets see how to store and display dynamic data in our site based on our users.

    Vignesh

    Vignesh K R

    Junior Web Developer aka SpiderMan