Django is a web framework written in python. It is good for fast web application development. In this tutorial we will learn how to make a simple web page showing “Hello World” using django templates. we will also be applying styling to our page with css static files, we won’t be dealing with any database or any advanced stuffs here.
This tutorial is aimed at beginners, So I ‘ll try to explain things in simple language without much technical detail.
First, you need to install django, There are several ways to do so. The one I prefer and recommend is using virtual environment which allows us to separate our django project from the rest of our system, so that the software package version do not conflict with different projects
Install virtual environment.
we begin by installing pip
sudo apt-get install python-pip
then using pip we install virtualenv
sudo pip install virtualenv
Create and Activate Virtual environment
Start a new virtual environment with the name myenv
aman@vostro:~$ virtualenv myenv
New python executable in /home/aman/myenv/bin/python
Installing setuptools, pip, wheel...done.
change directory into the virtual environment that you just created
aman@vostro:~$ cd myenv
aman@vostro:~/myenv$
Activate the virtual environment.
aman@vostro:~/myenv$ source bin/activate
(myenv) aman@vostro:~/myenv$
Notice, the name of the virtual environment inside the brackets shows that the virtual environment is activated.
Let’s hit the ls command to see what inside it!
aman@vostro:/myenv$ ls
bin include lib local pip-selfcheck.json
you don’t really need to understand these files 🙂
Install django in virtual environment
Now, we will Install django inside myenv
(myenv) aman@vostro:~/myenv$ pip install django==1.9
Collecting django==1.9
Downloading Django-1.9-py2.py3-none-any.whl (6.6MB)
100% |████████████████████████████████| 6.6MB 124kB/s
Installing collected packages: django
Successfully installed django-1.9
(myenv) aman@vostro:~/myenv$
you can check if django was installed using pip freeze command
(myenv) aman@vostro:~/myenv$ pip freeze
Django==1.9
Start our new Django Project
1. Now we will create our Django project named ‘mywebpage’
(myenv) aman@vostro:~/myenv$ django-admin startproject mywebpage
and hit the ls command to see what myenv contains now.
(myenv) aman@vostro:~/myenv$ ls
bin include lib local mywebpage pip-selfcheck.json
you can see that a new folder named mywebpage has been created
We will rename mywebpage to src, I will explain why we are doing it later!
(myenv) aman@vostro:~/myenv$ mv mywebpage/ src
Now lets cd into src and hit ls to see its contents
(myenv) aman@vostro:~/myenv$ cd src/
(myenv) aman@vostro:~/myenv/src$ ls
manage.py mywebpage
well, it contains a file called manage.py and another folder named mywebpage
So, we renamed the previous folder to src to avoid confusion.
Note: Always remember that src is the root of our project and our manage.py file is in it.
the manage.py is a python file which points to your settings files. don’t worry if its not making sense now. It will later!!
go inside mywebpage folder
(myenv) aman@vostro:~/myenv/src$ cd mywebpage/
(myenv) aman@vostro:~/myenv/src/mywebpage$ ls
__init__.py settings.py urls.py wsgi.py
you can see 4 files: __init__.py settings.py urls.py wsgi.py
__init__.py is a special file that tells that its parent directory is a module.
You don’t really have to do anything with this file.
settings.py holds all the apps, database settings.
wsgi.py handles our requests and responses.
urls.py – here we define our urls. for example for a url like http://127.0.0.1:8000/home we must put its pattern in our urls.py file.
you can open these files and just try to understand them.
if you didn’t understand what these files do then you will in the next few steps 🙂
Run our server
and Now we will Run our Django Development server locally to test if everything was setup correctly.
To do so you need to be in the same directory where manage.py file is located
so change your directory to the previous one.
(myenv) aman@vostro:~/myenv/src/mywebpage$ cd ..
(myenv) aman@vostro:~/myenv/src$
and now enter this command to run our server
(myenv) aman@vostro:~/myenv/src$ python manage.py runserver
Performing system checks...
System check identified no issues (0 silenced).
You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.
October 06, 2016 - 15:05:43
Django version 1.9, using settings 'mywebpage.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
Now just copy-paste the ip-address of the server http://127.0.0.1:8000/ in your browser and you should be able to see that your django server is up and running.
So, now let’s proceed to our goal of creating a simple html page.
Create an App
An App is something that does a job. A project may have multiple apps. All of which specialize in doing their single jobs. The app that we will create has the job just of showing ‘Hello world’
Let’s create the app named helloworld
make sure you’re in the src directory!
(myenv) aman@vostro:~/myenv/src$ django-admin startapp helloworld
(myenv) aman@vostro:~/myenv/src$ ls
db.sqlite3 helloworld manage.py mywebpage
this command has created a folder named helloworld containing 4 files
let’s see those files
admin.py __init__.py migrations models.py tests.py views.py
__init.py__ – This file indicates that your app is a python package.
views.py – your logic goes here.
tests.py – for testing purposes.
models.py – this file holds your databases infos.
Don’t worry if you don’t understand these files 🙂
At this point I would say that you add your src folder to a text editor where you can easily manage all the project code. I would recommend sublime text or Atom text editor.
Now, we must add our newly created app to Installed Apps in settings.py like shown below using text editor of choice.
mywebpage/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'helloworld',
]
In the next part of this tutorial we will deal with templates, views and urls to finally create our ‘Hello world’ page.