Downloads

A Multi Galaxy Space Adventure Game. If you’re a fan of space shooting games and like fireworks then, this game is for you.

 

hg

198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

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 our 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

 

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.

Post a Comment