Back
Featured image of post Membuat Blog Dengan Django
programming python django

Membuat Blog Dengan Django

kali ini kita akan belajar tentang django, django sendiri adalah web framework bahasa pemrograman python yang populer dan banyak digunakan, dengan framework ini kita bisa membuat website dengan cepat, karena sebagian besar keperluan untuk membuat web seperti TemplateView dan fungsi lainya untuk membuat website sudah di cover dalam web framework ini.

Apa Yang Akan Dipelajari

dalam pembahasan kali ini kita akan mempelajari

  • Membuat Virtual Environtment Menggunakan Python
  • Instalasi Django
  • Membuat Project dan Django dan Konfigurasinya
  • Membuat Django Application (Studi Kasus Blog)
  • Mendesain Model
  • Membuat Template dari Bootstrap 5
  • Mendesain View Menggunakan Class Base View

memang cukup pajang pembahasan kali ini karena kita akan membuat project Blog menggunakan Django, yuk langsung saja ke pembahasanya

Persiapan Projects

ada beberapa hal yang harus disiapkan untuk membuat project ini diantaranya adalah

pastikan sudah mempunyai text editor pada studi kasus kali ini saya akan menggunakan pycharm, pastikan juga sudah mempelajari Python Fundamental dam OOP menggunakan python

Membuat Virtual Environtment

untuk menghindari include library yang diperlukan kita perlu membuat virtual environtment untuk isolasi package dan python lihat bagian Apa itu Virtualenv, cara membuatnya simple cukup dengan perintah

python3 -m venv django-simple-blog_venv

perintah ini digunakan untuk membuat virtual environtment dengan nama django-simple-blog_venv

Mengaktifkan Virtual Environtment

ada 2 cara mengaktifkanya yaiti cara mengaktifkan virtual environtment di windows dan di Linux/OSX

  • Windows

kita bisa menggunakan perintah

django-simple-blog_venv/Scripts/activate
  • Linux/OSX

sedangkan jika menggunakan linux atau OSX bisa menggunakan perintah

source django-simple-blog_venv/bin/activate

jika sudah aktif maka akan terlihat seperti ini

Tanda Jika Virtual Entirontment Sudah Aktif
Tanda Jika Virtual Entirontment Sudah Aktif

Instalasi Django

untuk instalasi django kita bisa lihat di dokumentasi kita dapat menginstall menggunakan pip, untuk perintahnya sudah tersedia di PYPI http://pypi.org/, kita bisa menggunakan perintah

pip install django

dengan perintah ini kita bisa menginstall django versi terbaru, yaitu versi 3.1

Note: versi django tersebut adalah versi terbaru saat postingan ini dibuat, versi django ini hanya kompartibel dengan versi python 3 (versi 3.6+)

Membuat Project

kita akan membuat project dengan perintah

django-admin startproject simple_web .

perintah ini akan membuat project direktori di direktori aktif saat ini ketika ditambahkan tanda . agar tidak membuat directori baru kerika membuat project

jika sudah membuat project strukturnya akan seperti ini

Struktur Project Bawaan Django
Struktur Project Bawaan Django

Menjalankan Server Development

untuk menjalankan server development pada django bisa dengan perintah

python manage.py runserver

maka hasilnya akan seperti ini

server development django yang berjalan di port 8000
server development django yang berjalan di port 8000

Membuat Apps Django

sekarang kita akan membuat Django Apps mah dalam kasus ini kita akan membuat aplikasi Blog dari 0, dari direktori projects masikan perintah

python manage.py startapp blog

perintah ini akan membuat folder apps django yang bernama blog

struktrunya akan seperti ini

blog/
    __init__.py
    admin.py
    apps.py
    migrations/
    __init__.py
    models.py
    tests.py
    views.py

sekarang mari kita bahas satu satu apa kegunaan file diatas

  • __ init__.py
  • admin.py
  • apps.py
  • migrations
  • models.py
  • tests.py
  • views.py

Mengaktifkan Aplikasi

setelah selesai membuat aplikasi kita perlu mendaftarkan aplikasi django yang baru saja kita buat agar dikenali oleh django, kita meng inisialisasinya pada INSTALLED_APPS di file settings.py yang berada pada root project kita, seperti ini

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog', # folder aplikasi yang didaftarkan
]

Note: kamu juga bisa mendaftarkan aplikasi mu dengan format seperti ini

INSTALLED_APPS = [
   'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'blog.apps.BlogConfig ', # folder aplikasi yang didaftarkan
]

dimana blog.apps.BlogConfig didapat dari class yang berada di file apps.py

isi dari file tersebut seperti ini

from django.apps import AppConfig


class BlogConfig(AppConfig):
    name = 'blog'

setelah selesai menginisialisasi, kita lanjut ke step selanjutnya yaitu mendesain model

Mendesain Model

pada tahap ini kita akan mendesain model untuk aplikasi kita, kita akan merancang data schema dengan mendefinisikan model dalam blog/models.py pada aplikasi kita, buka file models.py yang ada dalam folder blog kemudian isi seperti ini

from django.db import models
from django.contrib.auth.models import User

# Create your models here.

# status params
STATUS = (
    (0, 'Draft'),
    (1, 'Publish'),
)


#  created models
class Posts(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(max_length=200, unique=True)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='blog_post')
    contents = models.TextField()
    created_on = models.DateTimeField(auto_now=True)
    status = models.IntegerField(choices=STATUS, default=0)

    class Meta:
        ordering = ['-created_on']

    def __str__(self):
        return self.title

Pembahasan Models

setelah menulis model diatas mari bahas apa sih yang yang ditulis mari kita bahsa satu satu

  • title: adalah field berisi CharField yang akan diterjemahkan ke VARCHAR dalam SQL
  • slug: digunakan untuk mempercantik URL supaya SEO frendly
  • author: adalah relasi dari table user yang bersifat One-to-Many maksudnya adalah 1 autor bisa menulis banyak post

Note: Bahasan Lebih Lanjut Mengenai Author, kita bisa lihat bentuk dari Field Modelnya yang bebentuk ForeignKey seperti ini

models.ForeignKey(User, on_delete=models.CASCADE, related_name='blog_post')

nah dalam model Posts ini kita mempunyai relasi ke table Users yang maa kita import dari django.contrib.auth.models bawaan django sehingga kita bisa akses nilai field dari models Users ke models Posts yang kita buat

  • contents: adalah field yang akan kita gunakan untuk menyimpan postingan kita dapat kita lihat bahwa dia bernilai TextField yang akan diterjemahkan menjadi TEXT dalam SQL
  • created_on: adalah field yang berisi waktu yang akan digunakan untuk menyimpan data waktu postingan itu dibuat, disini kita menggunakan method django yang bernama timezone untuk mengetahui waktu dan untuk menambahkan secara otomatis kita bisa menambahkan attribut auto_now atau auto_now_add
  • status: digunakan untuk menentukan pilihan apakah mau di publish atau draft suatu postingan

Note: pada field status kita dapat menggunakan parameter choices untuk meentukan pilihan berdasarkan nilai sudah ditentukan contoh

# status params
STATUS = (
   (0, 'Draft'),
   (1, 'Publish'),
)
# penerapan pada models
status = models.IntegerField(choices=STATUS, default=0)

Melakukan Migrasi dan Menerapkan pada Database Django

setelah membuat model kita perlu menerapkanya pada database dengan cara melakukan migrasi, nah cara melakukan migrasi di django kita cukup menggunakan perintah

python manage.py makemigrations

perintah ini akan melakukan inisialisasi pada database kita seperti ini

proses inisialisasi sebelum penerapan ke database
proses inisialisasi sebelum penerapan ke database

nah setelah melakukan inisialisasi terapkan perubahan pada database dengan perintah

python manage.py migrate

maka proses nya akan terlihat seperti ini

Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying blog.0001_initial... OK
  Applying blog.0002_auto_20210317_1612... OK
  Applying sessions.0001_initial... OK

Registrasi Model ke Admin

tahap selanjutnya setelah membuat model adalah melakukan registrasi Model ke Admin Agar Bisa diakses melalui Dashboard Bawaa Django, cara registrasinya seperti ini

from django.contrib import admin
from blog.models import Posts

#  config panel admin for posts model
class PostsAdmin(admin.ModelAdmin):
    list_display = ('title', 'slug', 'status', 'created_on')
    list_filter = ("status", )
    search_fields = ['title', 'contents']
    prepopulated_fields = {'slug': ('title', )}

# Register your models here.
admin.site.register(Posts, PostsAdmin)

oke sekarang kita akan kupas satu satu apa sih yang baru saja kita tulis mari kita bahas 1 per satu

class PostsAdmin(admin.ModelAdmin):
    list_display = ('title', 'slug', 'status', 'created_on')
    list_filter = ("status", )
    search_fields = ['title', 'contents']
    prepopulated_fields = {'slug': ('title')}

adalah konfigurasi untuk admin panel kita contoh disini kita ada

  • list_display: di gunakan untuk mengatur field apa saja yang akan ditampilkan di dashboard
  • list_filter: yaitu terkait dengan filterisasi field yang akan ditampilkan
  • search_fields: pengaturan pencarian
  • prepopulated_fields: digunakan untuk mengatur pengelompokan antar field dalam dashboard

setelah mengetahui itu semua kita bisa registrasi model nya menggunakan admin.site.register seperti ini

admin.site.register(Posts, PostsAdmin)

Membuat Username dan Password

lanjut ke langkah berikutnya kali ini kita akan membuat username dan password untuk mengamankan dashboard admin yang kita punya kita cukup dengan perintah

python manage.py createsuperuser --username="admin" --email="admin@django.id"

dimana admin adalah username yang akan kita gunakan untuk login, setelah menjalankan perintah diatas outputnya akan seperti ini

membuat username dan password
membuat username dan password

output diatas terjadi karena saya menggunakan password admin sekarang mari kita lihat model yang sudah kita registrasi pada step sebelumnya sekarang sudah bisa diakses di dashboard pada url http://localhost:8000/admin/login/?next=/admin/ seperti ini

login admin django
login admin django

login menggunakan username dan password yang dibuat tadi setelah itu kita akan diarahkan ke halaman utama dashboard seperti ini

halaman utama dashboard
halaman utama dashboard

sekarang coba click posts untuk membuat postingan baru atau bisa klik url http://localhost:8000/admin/blog/posts/add/

Membuat Postingan Pertama

setelah itu coba isi postinganya misal saja seperti ini

membuat postingan pertama
membuat postingan pertama

kemudian klik save hasilnya seperti ini

daftar postingan
daftar postingan

Sekilas Tentang View

setelah membuat model, membuat user, sekarang kita akan membuat view django, yap ini adalah bagian yang paling vital disini kita akan membuat dan menempatkan logika di aplikasi kita dalam file views.py disini akan dibahas sedikit tentang apa itu Views

  • Class Based Views

class based view adalah views yang dibuat menggunakan class (Class Based) sehingga lebih praktis dan reusable (Dapat digunakan Ulang). django sendiri telah menyediakan class based view bawaan sehingga mempermudah dan mempercepat proses development, lebih lengkap tentang class based view bisa dilihat disini https://docs.djangoproject.com/en/3.2/topics/class-based-views/intro/

untuk penggunaan dan penerapanya bisa mengunjungi website ini https://ccbv.co.uk/

  • Function based View

adalah kebalikan dari Class Based View yaitu view yang dibuat berbasis fungsi contohnya seperti ini

membuat listview menggunakan fungsi

from django.shortcuts import render, get_object_or_404
from .models import Post
def post_list(request):
    posts = Post.published.all()
    return render(request, 'blog/post/list.html', {'posts': posts})

membuat post_detail menggunaka fungsi

def post_detail(request, year, month, day, post):
post = get_object_or_404(Post, slug=post, status='published', publish__year=year, publish__month=month publish__day=day)
    return render(request,'blog/post/detail.html', {'post': post})

kelebihan dari membuat view seperti ini kita bisa mengerti betul dan dapat kita custom dengan mudah.

Kapan Kita Harus Menggunakan Class Based View atau Function Based View

setelah mengetahui jenis-jenis views pada django kapan kita harus menggunakan class atau function based view jawabanya ada 3 berdasarkan pengalaman pribadi

  1. Sesuai Kasus yang sedang dikerjakan
  2. Deadline Projects
  3. Fleksibilitas (kerapian kode dan fungsionalitas program)

kita bahas satu per satu

Sesuai Kasus yang dikerjakan

kadang ketika kita dapat project yang dimana project itu skalanya menengah sampai besar kita dapat menggunakan class based view untuk mempercepat proses development, jika sebaliknya kita bisa menggunakan function based view

Deadline Projects

deadline menjadi salah satu hal yang membuat kita kalang kabut untuk mengerjakan sebuah project :) yap disini kita juga dapat menjadikan acuan bagaimana kita membuat suatu logika dalam pengembangan aplikasi dengan memperhatikan juga skala dan waktu pengerjaan project.

Fleksibilitas Aplikasi

fleksibilitas disini maksudnya adalah kerapian dan fungsionalitas penerapan logika pada suatu aplikasi, dalam kasus tertentu kita bisa membuat class based view dan function based view secara bersamaan untuk handle fungsi atau fitur yang tidak disediakan oleh class based view misalnya dapat kita ganti atau kombinasikan dengan fungsi, atau kita bisa custom class nya sesuai kebutuhan.

Membuat Views dengan Class Based Views

pada studi kasus kali ini kita akan menggunakan class based views untuk blog yang akan kita buat, pertama buat file views.py dalam direktori blog lalu isi seperti ini

from django.views import generic

# import models
from .models import Posts


# Create your views here.

class PostsListView(generic.ListView):
    queryset = Posts.objects.filter(status=1).order_by('created_on')
    template_name = 'blog/index.html'


class PostsDetailView(generic.DetailView):
    model = Posts
    template_name = 'blog/posts_detail.html'

disini kita menggunakan class generic pada views cek di https://docs.djangoproject.com/en/3.2/topics/class-based-views/generic-display/ atau ke https://ccbv.co.uk/

dalam class generic ini sudah ada views bawaan jadi kita tinggal pake saja, untuk membuat views secara mudah dan code menjadi lebih simple.

Menambah URL pattern untuk views (membuat route)

pada tahap ini kita kan menambahkan URL Patterns agar views yang tadi kita buat dapat diakses dan ditampilkan di browser, langkah pertama buat file urls.py dalam direktori blog kemudian isi seperti ini

from . import views # import views
from django.urls import path

# posts urls route

urlpatterns = [
    path('', views.PostsListView.as_view(), name='posts'),
    path('<slug:slug>/', views.PostsDetailView.as_view(), name='posts_detail'),

]

dimana pada pembuatan urlpatterns ini kita perlu import views yang tadi kita buat kemudian agar views dapat ditampilkan dan di eksekusi kita dapat menggunakan method as_view()

Templating (Membuat Template)

yap coba kita lihat lagi pembuatan views di views.py ada paremeter yang namanya template_name disetiap class pada views

yap itu adalah template html yang akan kita buat, langkah pertama tambahkan templates dalam settings.py seperti ini

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

selanjutnya buat file base.html, direktori partials, dan index.html serta file lainya seperti hirarki ini

blog/templates
└── blog
    ├── base.html
    ├── index.html
    ├── partials
    │   └── navbar.html
    └── posts_detail.html

kemudian kita membuat satu per satu file htmlnya seperti ini

Template utama (base.html)

file ini akan menjadi template induk dari file file lainya artinya menjadi turunan-turunan dari file lain dalam file ini kita membuat sebuah template dasar (blueprint) dari suatu template

{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

    <title>{% block titles %} {% endblock titles %} - Simple Blog</title>
  </head>
  <body>
    {% block contents %}
    
    {% endblock contents %}

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>

    <!-- footer -->
    <footer class="py-3 bg-grey">
      <p class="m-0 text-dark text-center ">Copyright &copy; My Website</p>
  </footer>
  </body>
</html>

Pecahan Perbagian (partials)

pada tahap ini kita akan membuat pretelan (pecahan) bagian-bagian template agar menjadi lebih ter struktur dalam kasus ini kita akan memecah bagian navbar saja (partials/navbar.html)

<nav class="navbar navbar-expand-lg navbar-darj bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="{% url 'posts' %}">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="{% url 'posts' %}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'posts' %}">Blog</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Membuat Halaman Utama (index.html)

selanjutnya kita membuat template untuk halaman utama yang akan kita turunkan dari base.html sebagai template induknya seperti ini

{% extends 'blog/base.html' %}
{% load static %}

{% block titles %}
    Blog
{% endblock titles %}



{% block contents %}
<link rel="stylesheet" href="{% static 'css/blog_style.css' %}">
{% include "blog/partials/navbar.html" %}

<div class="container">
    <div class="row">
        <!-- Blog Entries Column -->
        <div class="col-md-8 mt-3 left">
            {% for post in posts_list %}
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title">{{ post.title }}</h2>
                    <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>
                    <p class="card-text">{{post.content|slice:":200" }}</p>
                    <a href="{% url 'posts_detail' post.slug  %}" class="btn btn-primary">Read More &rarr;</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% endblock contents %}

hasilnya seperti ini

halaman index
halaman index

Membuat Halaman untuk Menampilkan Detail Postingan

selanjutnya agar postingan kita dapat dibaca kita perlu membuat halaman detail seperti ini

{% extends "blog/base.html" %}

{% block titles %}
  {{ object.title}}
{% endblock titles %}



{% block contents %}
{% include "blog/partials/navbar.html" %}

<div class="container">
    <div class="row">
      <div class="col-md-8 card mb-4  mt-3 left  top">
        <div class="card-body">
          <h1>{{ object.title }}</h1>
          <p class="text-muted">{{ object.author }} | {{ object.created_on }}</p>
          <p class="card-text ">{{ object.contents | safe }}</p>
        </div>
        </div>
    </div>
  </div>
{% endblock contents %}

halaman detail postingan
halaman detail postingan

Conclusion

sampai disini dulu pembahasan project django kali ini, semoga bermanfaat dan selamat mencoba, link repo project dapat di akses dan di download di gitlab dibawah ini :)

comments powered by Disqus
© 2020 - 2022 Feri Lukmansyah
Built with Hugo
Theme Stack designed by Jimmy