comment 0

Django admin multiple files upload

kasih gambar biar menarik. . .

Beberapa bulan ini aku baru saja memulai babak baru sebagai backend engineer. Bisa dibilang aku masih sangat dangkal ilmu untuk hal ini, maka dari itu aku ingin menulis untuk media pembelajaran nantinya.

Seperti kita ketahui Django merupakan salah satu full-stack framework yang powerful. Django ini berbasis pemrograman python, salah satu bahasa pemrograman yang mudah dipelajari oleh siapapun.

Untuk membuat sebuah project Django, aku merekomendasikan selalu menggunakan virtual environment, supaya library python yang kita pasang tidak mengganggu python project yang lain. Python sendiri mempunyai virtual environment module bawaan (venv). Berikut perintah dasar membuat virtual environment dengan Python.

python3 -m venv nama_environment

Untuk mengaktifkan environment kita jalankan perintah berikut ( OS saya Ubuntu )

source nama_environment/bin/activate

Langkah selanjutnya adalah menginstall django pada virtual environment tersebut.

pip install django

Dengan perintah tersebut kita menggunakan pip (python package management system) untuk memasang django ke dalam virtual environment yang telah kita siapkan. Langkah selanjutnya adalah membuat django project / inisialisasi django dengan perintah berikut.

django-admin startproject belajardjango

django akan membuat direktori baru bernama “belajardjango” yang berisi code inisialisasi django,

belajardjango/
├── belajardjango
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
  • Direktori belajardjango/ adalah root direktori yang berisi seluruh file dari project.
  • File manage.py adalah program untuk mengelola project Django. Kita akan sering mengeksekusi manage.py saat ingin melakukan sesuatu terhadap project, misalnya: menjalankan server, melakukan migrasi, menciptakan sesuatu, dll.
  • File belajardjango/__init__.py adalah sebuah file kosong yang menyatakan direktori ini adalah sebuah paket (python package).
  • File belajardjango/settings.py adalah tempat kita mengkonfigurasi project.
  • File belajardjango/urls.py adalah tempat kita mendeklarasikan URL.
  • File belajardjango/wsgi.py adalah entri point untuk WSGI-compatible

Selanjutnya, kita akan membuat app atau bisa kita katakan sebagai modul ke dalam project django yang telah kita buat, dengan perintah berikut.

python manage.py startapp catatangambar

Disini kita akan membuat app tentang sebuah catatan yang dapat ditambahkan multiple images di dalamnya (ya karena judul post ini django admin multiple files upload). Maka directory project kita akan tertambah satu directory baru untuk app catatangambar seperti berikut.

├── belajardjango
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── catatangambar
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py

Setelah itu kita tambahkan app baru ini ke dalam INSTALLED_APPS pada settings.py

INSTALLED_APPS = [
    "catatangambar",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
]

Kita mulai saja untuk membuat struktur database app di kelas models pada models.py kita tambahan kode berikut.

from django.db import models

class Catatan(models.Model):
    judul = models.CharField(max_length=255)
    deskripsi = models.TextField()

    def __str__(self):
        return self.judul

class Gambar(models.Model):
    catatan = models.ForeignKey(Catatan, on_delete=models.CASCADE, null=True)
    imagefile = models.ImageField(upload_to="gambar")

    def __str__(self):
        return "%s - %s " % (self.catatan.judul, self.imagefile)

terdapat 2 class pada models, ingat class pada models ini nantinya akan mempresentasikan table pada database kita. Yang pertama ada class Catatan, di dalam class ini kita mempunyai field judul dan deskripsi. Kemudian ada class Gambar, berisi foreign key dari class catatan dan juga image field untuk menyimpan gambar. Lalu kita tambahan django admin page handler class pada admin.py

from django.contrib import admin
from catatangambar.models import Catatan, Gambar

class PhotoInline(admin.StackedInline):
    model = Gambar
    extra = 1

class CatatanAdmin(admin.ModelAdmin):
    inlines = [PhotoInline]

    def save_model(self, request, obj, form, change):
        obj.save()

        for afile in request.FILES.getlist("photos_multiple"):
            obj.photos.create(image=afile)

admin.site.register(Catatan, CatatanAdmin)

Disini kita membuat class PhotoInLine dengan StackedInLine object kemudian menginisialisasi inlines pada class CatatanAdmin dengan class tersebut. Jangan lupa untuk mendaftarkan kelas pada admin site. Langkah berikutnya kita menambahkan media path untuk directory upload kita pada settings.py di dalam direktori belajardjango .

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

nantinya image yang terupload akan disimpan pada direktori dengan nama media. Selanjutnya kita tambahkan path baru pada urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [path("admin/", admin.site.urls)] + static(
    settings.MEDIA_URL, document_root=settings.MEDIA_ROOT
)

Kemudian jalankan perintah berikut untuk membuat database migration, dari class models menjadi strukur database.

python manage.py makemigrations

dan lakukan migrasi setelah itu

python manage.py migrate

kemudian buat super user baru dengan perintah berikut.

python manage.py createsuperuser

terakhir jalankan project django dengan perintah berikut.

python manage.py runserver localhost:8000

pada alamat berikut http://localhost:8000/admin , untuk masuk ke django admin. Di dalam kita akan menemukan panel seperti berikut ini.

Pada gambar diatas terlihat kita dapat menambahkan multiple gambar pada catatan kita. Terimakasih.

Leave a Reply

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


 

This site uses Akismet to reduce spam. Learn how your comment data is processed.