Creating a website with Django and installing a template and passing data to the template from form ( Part 1 )
Hi medium, recently I’ve learned Django and would love to share what I’ve learned here.
Before I get started let’s take a look at what this Part have :
Part 1 :
- Setting up Django
- Running Django Local Server
- Adding Template
- Setting up the Template to show in our local server
So let’s get started.
What is Django ?
Django is a high-level Python web framework that promotes quick development and simple, practical design. It’s built by professional developers to take care of a lot of the headaches of web development so you can concentrate on building your app instead of reinventing the wheel. It is also open source and free.
— Source : Django
As we see it is a high level Python Web framework. It is a very awesome package in my case. Anyway Let’s dig into it.
Setting Up Django Project
With all of python projects the first thing we always do is to install it’s dependencies and libraries.
We pip install Django :
pip install django or if you have it already update it using
pip install django --upgrade
You can use a virtual environment for projects like these i.e Django projects, but I wont be using one.
After it installs let’s create a project.
In your desired path create a folder, in my case I’ll call it Medium_Article
Now inside our folder we can run Command Prompt (cmd) to do this we can run cmd from start menu or an easier way we type cmd in the file explorer url path and enter “cmd”
In our command prompt we type the following command to get our project started.
django-admin startproject Medium_Article .The last argument ‘.’ is necessary when you already have a project folder otherwise you can leave it out if you did not create a folder and Django will create a folder for you. Either way you will still have the same structure as shown in Pic 06 . Also our project name is Medium_Article
This is what we got right now
manage.py is VERY IMPORTANT in Django projects. Now I will be using ATOM IDE so we open up our IDE.
We want to create an app now to do this
What is the difference between project and app in Django?
The complete application, including all of its components, is referred to as a project. A submodule of the project is referred to as an app. It’s self-contained and not linked with the other applications in the project, so you could theoretically pick it up and drop it into another project without making any changes. — Source
To start an app we run the following code in our cmd :
python manage.py startapp ArticleHere Article is my application Name.
Our Project folder will now look like this :
We now need to tell Django about our application that we just created. To do this we simply add a line to our settings.py file
As you can see we added our Name of our app .. in our case right now it’s called Article. Now Django knows it’s there.
Running Django Local Server
To run our local server we need to run the command :
python manage.py runserverAs we can see we have some migrations to do .
What are migrations ?
Django’s migrations are a means for you to propagate changes to your models (adding a field, removing a model, etc.) to your database schema. Although they’re meant to be mainly automated, you’ll need to know when to make migrations, when to execute them, and how to deal with typical issues.
— Source : Django Doc
We will not migrate our migrations just yet. Let’s take a look at our website. on the command prompt. it will give you a server link. highlight the link and copy it, use ctrl + shift + c in windows
This how our website would look like
Oh here’s a little tip, if you want to access your website on other devices in the same network :
instead of running
python manage.py runserverRun this instead. Please note that my port 8000 is open, you can change this port if yours are not.
python manage.py runserver 0.0.0.0:8000To access the page on other device you would need your computer IP address. To get this , open a new CMD and type ifconfig. You would see your computer IP address.
enter the following url in your device
http://<COMPUTER IP ADDRESS>:8000/and boom you can access it on your phone or tablet or whatever device. Anyway.
To migrate these we follow the same command that is given.
python manage.py migrateThis would create our database and sqlite file. We can use postgres but in another article I’ll cover that, for now we use the default database.
After running that command our directory would be updated and look like this
Adding Template
To add templates to Django , we first need to create a templates folder in the application directory. And inside our template folder we create another folder with the same name as our application name. Our directory would look like this :
Since we using a template, templates has its dependences such as css , images, javascripts so we would now need another folder called static. It has the same structure as our templates folder. Now it will look like this
Now that’s set up. Let’s get a template to use. You can always search google for “ Free Websites templates ” , just be careful as to which links you click. Use your discretion. I’ll be using this template : Moje. — Responsive Bootstrap Personal Resume vCard HTML/CSS Theme
Also I don’t want all those features so I’ll be stripping it down to nothing. Okay now that you got your desired template.
These are the files that our template have. We only want to use index.html and copy it to our template folder. the other folders we will copy it to our static folder.
Now let’s setup our django site.
Setting up the Template to show in our local server
We need to render our template in views.py inside of our Article folder.
Create a function named Home and pass in request.
We also import render from django.shortcuts.
Our function Home will return a rendered request with our html file path
It should look like this :
from django.shortcuts import render# Create your views here.def Home(request) :
return render(request,'Article/index.html')
As we can see our Application folder “ Article ” does not have a urls.py so we copy the urls.py from the Medium_Article folder and paste it inside Article. We edit the contents
"""Article URL Configuration"""from django.urls import pathurlpatterns = [
path('', views.Home, name = "Home"),
]
Please note that this urls.py file is inside Article folder. We would now need to edit the urls.py in our Parent Folder i.e Medium_Article
This urls.py should have look like :
from django.contrib import admin
from django.urls import path , includeurlpatterns = [
path('admin/', admin.site.urls),
path('', include('Article.urls')),
]
Yes I know it’s alot of steps and setups but as you do several projects, these steps would be like nothing. Trust me.
Okay after all this we make sure our server is running if not then simply rerun the command :
python manage.py runserverRefresh your page and you should have only text. if no Errors are found then great yess you did it, but as we can see the site is messy.
Please note the structure of the project is like this :
Now let us get our site looking better. To do this we need to edit our html file. Go to your index and add the following code to the top of your html file. the first line
{% load static %} after adding that, we look for stylesheet
As you can see this how our stylesheet format looks but we want to change it and point href to our static folder. To do this we do the following
Tip : to edit multiple lines you hight from
press alt+f3 to select muliple lines
then use right left arrow keys to move the cursors to desired position and you type away. This way can help you save immense amount of time.
Now we need to do the same for our javascripts . Scroll down to the end of the code and you will find javascripts
edit it as follows
Now refresh our website and boom it’s loaded properly.
Yes no images are shown but we will have to point it to the same location as we did with the javascripts and css.
Now that’s that restructure the website template to your liking. There’s more things to do :)
If you know css and javascript you can even edit those and change up the structure and website.
End of PART 1
— — — — — — — — — — — — — — — — — — — — — — — —
Resources :
You can find the resources in my github repo:
Here’s a link to the git repo : https://github.com/surenjanath/Django-Medium-Article
Do note that if you want to start from scratch I’ve put the original template inside my repo folder called IMPORTANT
Other resources :
Please see part 2 : https://surenjanath.medium.com/creating-a-website-with-django-and-installing-a-template-part-2-20b9cf891cd7
