Simple Blog Using Django 1.9

Developing a simple blog is a good project to start development in Django. Blog project requires you to implement basic CRUD process which is used frequently in any web app development.

This first tutorial series will explain how to develop blog project in Django that will cover CRUD, routing, and basic templating as simple as possible. After following this article you’ll have a good foundation into web app development in Django framework. In this article I also assume you have installed python and Django regardless your environment is (Windows, Linux, Mac, etc).

First, let’s create a project named myblog in your terminal:

$ django-admin startproject myblog

You’ll see a directory named myblog, let’s go to the directory and type:

$ python manage.py runserver

Your Django app is running now using port:8000 as default setting. If you open the browser and access localhost:8000 you’ll see like this:

By default Django is using sqlite as the default database which is sufficient for now to keep us focus with the topic which is creating blog. Let’s run migration to add database that will be used by our app to store data:

$ python manage.py migrate

you’ll see the result as follow:

We’ll add superuser to login to default admin from Django framework by typing as follow:

python manage.py createsuperuser

Please fill username, email & password you wish. Now we can login to Django admin page by accessing localhost:8000/admin/login and fill username & password using credential we have created before.

Create an app named articles, this app will be used to perform CRUD for articles in our blog project:

python manage.py startapp articles

You can see now we have one new directory in our Django root directory named articles with structure as follow:

add app “articles” in myblog/settings.py in myblog directory in Django root directory

In models we define a table named Article with column title, content, updated and timestamp. From model we can create the database for this table by

then open models.py inside articles directory. And insert code as follow:

In models we define a table named Article with column title, content, updated and timestamp. From model we can create the database for this table by executing this command in terminal:

$ python manage.py makemigrations

you will see Django create a migration files as follow

we create table article from this migration by executing command as follow:

$ python manage.py migrate

we need to add few records from admin for now for testing purpose. Go to articles/admin.py and add code:

we import Article that we have defined before from models.py then put this class into admin, so in admin page we can perform CRUD process for article. Now, let’s go to admin page http://localhost:8000/admin/ and login using credential we have created before when create super user. After login you will like like this

As you can see we have Articles below site administration. Let’s create 3–5 articles record. We will use this records to help us working with showing article from database to our blog page. Inside myblog/myblog folder, you can see a file named urls.py this file is used to route url of your Django file. For now you can see a code like this:

urlpatterns = [
   url(r’^admin/’, include(admin.site.urls)),
]

this means that when you access localhost:8000/admin from your web browser, it will redirected to admin. Now if we put localhost:8000/articles you’ll get error message from Django because Django doesn’t understand this url should be pointed to what view. Let’s modify urlpatterns to point to method list in myblog views, so the code will be like this:

create urls.py inside articles directory and add code

at views.py inside articles directoy modify the code:

when you run localhost:8000/articles in your web browser you will see a word “index”. Now, we’ll go into interesting part. Fetching articles from database we have created before from admin page into index page. Modify the code at index method as follow:

we need a template for this page. Create a directory inside articles named templates. Inside the directory create a file named index.html. The file structure will be like this

inside templates/index.html add code

the code itself is pretty intuitive. Cool, when you access localhost:8000/articles it will contain list of articles we have made before from admin page. Just another problem is it will display whole content in article list which is not a good practice. Usually blog will only contain the summary in article list and then when we access the detail we can read the whole article. Therefore let’s modify this part:

{{ article.content }}

into

{{article.content|truncatechars:60}}

you can see now if the content is longer than 60 characters will be truncated. Now we’re going to implement the detail page. Usually in a blog when we click the article title it will be redirected to the detail page where we can read the whole page. Let’s create one additional route in myblog/articles/urls.py like this:

Add new method named detail in articles/views.py with code as follow:

We add some code at line 4–5 and line 16–21. We need to create a template file for detail which is detail.html. At templates directory create a file named detail.html with code as follow:

Just like any other blog we need a page to create a new article. From articles/urls.py let’s add one routing to add creating new article named create

as you can see I add additional code at line 6 and line 14. At articles/views.py we’ll add method for creating article:

we add new code at line 5 to import form then from line 24 to line 33 to add logic for creating article page & insert it into database. Next, at articles create a file named forms.py with code

Last we need to create a template page create.html in templates directory with code

My file structure will be like this for now:

you can add new article from localhost:8000/articles/create now. The layout is still messy I know, please bear with me. We’re focusing with CRUD for now then later we can work with layout & other cool features to be added to our simple blog project.

So far we have implemented Create and Read, we also need a method to update existing article. Let’s create additional method named update in articles/views.py

here I add new code at line 3 followed by line 35 to line 45 to implement the update method

then add new route for updating record at articles/urls.py at line 7 and 16

now, when you access for example localhost:8000/1/update you can edit article with id 1. Last part for this part is adding delete article method. From articles/views.py let’s add delete method as follow:

At line 3 I add new library named redirect, this library will be used in line 50. Don’t forget to add urls for this method in articles/urls.py at line 8 & line 18

You can remove any article for example previously we have created an article with id 1 (the first article), so when we access localhost:8000/articles/1/delete it will remove the first article then redirect to index page again. Cool, now we just implemented a very basic blog & CRUD using Django framework. The code for this article is also available at https://github.com/gerry-sabar/django-blog-1 .

Cool! We have implemented a very basic blog now. You can continue this article which covers layouting to make your blog looks nicer.