Create a website with django in [2020]

You probably searching about website with django or build a website with django because you know the strength that django provides while developing website. When you think about making a website then some few things that come into your mind is that you need to be an expert coder to build a website or something like that. You need to write a whole bunch of code to do so but believe me it’s not. Here we will discuss building a website in django framework. You probably already know the strength of django but I want to give you a little brief introduction about what a django framework is and which languages you can use to build a website with django.

What is django?

Django is a framework for perfectionists with deadlines. What I mean by this is simple. You can build any kind of website or web application using this framework and the main specialty in this framework is that it uses python as its backend language and you might already know about python’s simple syntax and popularity. So without wasting much time lets dive into building our website.

What you need to make a website with django?

  1. You need to know about python basic syntax
  2. You need to know about html, css.
  3. Some django basics like Urls, models, views etc.

Setting Up Django in our system:

In order to start making a website in django the no. 1 thing that you will require is python. So let’s go ahead and install python.

Then you need to install django using command prompt. You can refer to django documentation but i will explain it below.

You can install virtual environment and Django by clicking here.

A thought about our website with django:

Our website will have a homepage where we will display our short introduction and list of our posts. Then we have a detail page where we will display the detail of the posts whenever a user clicks on any post.

We will have an administration site where we will be able to add post, delete post, or update our posts.

So let’s start working on our website.

In order to create a project in django you need to be inside the folder where you install virtual environment. Activate your virtual environment and type the following command to create a django project.

>>> django-admin startproject mySite

You will see a folder created inside the folder that you are currently in. The next thing you should do is to check that weather your project is successfully created or not. To check this just type

>>> python manage.py runserver

You will see something like this.

Then inside command prompt type the following command to create an app called blog.

>>> python manage.py startapp blog

You will see a new folder created inside the root directory of your project.

Now open you project folder inside a text editor. You will see something like this.

Folder structure django website mubashartech.com

The upper folder will be the root folder where all your project folders, files and databases are stored and the folder named as blog will be your app that you have just created.

Open up settings.py file inside mySite subfolder and register blog application under installed apps. It will look like this.

Now our project is ready to be worked with. Let’s open up models.py file inside blog application folder and type the below lines of code.

from django.db import models
class Article(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    author = models.CharField(max_length=50)
    date = models.DateField()
    def __str__(self):
        return self.title

Now let’s go to command prompt and migrate our database so that our model in synced inside database.

To migrate our database, type the following command inside command prompt.

>>> python manage.py makemigrations

And finally let’s migrate our database

>>> python manage.py migrate

You will see something like this:

migrations mubashartech.com

You may something different as I previously migrated my database but that will be similar to this.

Now our model is synced inside our database. Let’s open up admin.py file inside blog application folder and type the following lines of code to it.

from django.contrib import admin
from .models import Article
admin.site.register(Article)

Now let’s go ahead and create a super user for our website.

To create a super user in django just go to your command prompt and type the following command.

>>> python manage.py createsuperuser

You will be asked to fill out your name, email and password and once you confirmed your password your super user will be created.

Now you can access django provided administration site and since we registered our model in admin.py file you will be able to create articles from there.

Open up command prompt and type the following command to run your project.

>>> python manage.py runserver

This will run your project. Now open up any browser and type the following address there.

127.0.0.1:8000/admin and you will see a page like this.

administration page screenshot mubashartech.com

Just fill in the user name and password you just created and click on login.

Once you logged in then you will see a page like this:

Articles adding page in django admin mubashartech.com

Just click on articles and on the right hand corner of the next screen you will find a button named Add Articles. Once you added some articles then just follow along. I recommend adding up to 2 or 3 dummy articles that we can display into our site. Just add some don’t worry you can change them later on.

Now we will be creating our views.

So open up views.py file inside blog application and add these lines of code.

from django.shortcuts import render
from .models import Article
def homeView(request):
    article = Article.objects.all()
    context = {'articles': article}
    return render(request, 'blog/index.html', context)
def detailView(request, pk):
    article = Article.objects.get(pk=pk)
    context = {'article': article}
    return render(request, 'blog/post.html', context)
def aboutView(request):
    return render(request, 'blog/about.html')

Now I will explain the above code. We are creating 3 views namely homeView, detailView and aboutView.

homeView: So this view will handle the request when a user request for home page. For example, if someone come into the main url of your website then this view will be called.

detailView: We will have a list of our articles in our homepage and once a user clicks on any post list then this view will render detail of that post.

aboutView: This view will render details about you whenever someone want to know about you or whenever someone click on the about page link in the navigation menu.

Now let’s create the templates we are using inside our views, so let’s do that:

Now go ahead and create a new folder inside blog application folder and name it as templates and then create a new folder inside that template folder and name it as blog. Your folder structure might look like this.

template folder mubashartech.com

Create a file inside blog folder you just created and name it as index.html and add these lines of code.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> My website</title>
  </head>
  <body>
    {% for article in articles %}
<ul>
       <li><a href="{{article.pk}}">{{article.title}}</a></li>
</ul>
{% endfor %}
  </body>
</html>

Now let’s create another file inside blog folder and add these lines of code to it.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>{{article.title}}</title>
  </head>
  <body>
    <h1> {{article.title}} </h1>
	<p> {{article.content}} </p>
	<p> by {{article.author}} </p>
	<p> at {{article.date}} </p>
  </body>
</html>

So we have created the home and detail page of our website. Now let’s create the last page inside blog folder and name it as about.html and add these lines of code to it.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> about page </title>
  </head>
  <body>
    <h1> Hi here is what I do </h1>
	<p> I am a programmer and teaching people how to code. You can check my other tutorials at mubashartech.com </p>
  </body>
</html>

Last step in creating our website, create a file inside blog application and name it as urls.py and add these lines of code to it.

from django.urls import path
from . import views
urlpatterns = [
    path('', views.homeView, name='home'),
    path('<int:pk>/', views.detailView),
    path('about/', views.aboutView, name='about')
]

Let’s register this urls.py file inside the main urls.py file of our project. Open the urls.py file from mySite folder and add these lines of code to it. Note: You must open the file mySite/urls.py and add these lines.

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('', include('blog.urls')),
    path('admin/', admin.site.urls),
]

Now our project is created successfully and lets test this by typing the following command inside command prompt.

Python manage.py runserver

And open browser and type the following address in the address bar:

127.0.0.1:8000 and you will see your page up and running. Click on any post link and you will see the details of that post. And if you want to open about page then type 127.0.0.1:8000/about and you will see the page that you have created for your users to know about you. That’s all and if you have any question you can ask it in the comment section and I will definitely answer. In the next article I will teach you how to style this website to make it look more cool.

Spread the love

3 thoughts on “Create a website with django in [2020]

  1. Pingback: Online Teech
  2. Pingback: Online Teech
  3. Pingback: Online Teech

Leave a Reply

Your email address will not be published. Required fields are marked *