Membuat CRUD dengan Django - Menampilkan data dari database

Disini kita akan belajar tentang cara membuat crud dengan framework django pada database MySql. mungkin kamu sudah familiar dengan kata CRUD yang merupakan singkatan dari Create, Read, Update dan Delete. CRUD maksudnya adalah membuat input data ke database, menampilkan data dari database, mengedit mengupdate data pada database serta menghapus data pada database. CRUD sangat lah penting jika kamu menggunakan operasi yang menggunakan database atau pengelolaan data pada database dengan framework django seperti misalnya menampilkan data dari database dengan codeigniter, menginput atau menambah data ke database, mengedit dan menghapus data.

Pada Tutorial Membuat CRUD dengan Framework django pada database MySql: Menampilkan data dari database ini kita akan belajar tahap awal untuk membuat CRUD dengan django, mulai dari konfigurasi model, view, template dan mengambil data dari database. silahkan simak baik-baik contoh dan penjelasan berikut ini untuk membuat crud dengan django.

Cara menampilkan data dari database Mysql dengan framework django.

okee, kita akan memulai dengan membuat projectnya dahulu, seperti biasa buka terminal lalu buat projeknya mellaui perintah dibawah ini.

django-admin startproject crudtutorial

Pada projek ini saya menamai dengan crudtutorial.

Setelah itu kita masuk kedalam folder tersebut, nah di dalam aplikasi CRUD ini kita akan membuat modul mahasiswa. Modul dapat diartikan sebagai folder yang berisi file - file Django seperti model, views, dan template. Untuk membuat sebuah modul diperlukan perintah startapp dengan melewatkan nama modul yang akan dibuat. Perhatikan perintah dibawah ini:

cd crudtutorial ## ini adalah untuk masuk ke folder projek kita
./manage.py startapp mahasiswa ## ini adalah perintah untuk membuat module app

Dikarenakan kita menggunakan mysql sebagai database kita,

kita perlu tambahan library pymysql, kita install menggunakan pip.

pip install pymysql

FYI!.

Saya pernah mencoba pada projek lain menggunakan library mysqlclient, namun terdapat error harus menginstall tambahan lainnya, maka dari itu saya memakai pymysql sebagai penghubung antara projek kita dengan database.

Jika ingin mencoba dan untuk mengatasi error pada mysqlclient bisa mampir kesini.

Kemudian setelah kamu berhasil membuat modul mahasiswa terebut dan mengintall library pysql, kita akan menkonfigurasi pada crudtutorial/settings.py sebagai berikut:

import pymysql
pymysql.version_info = (1, 3, 13, "final", 0)
pymysql.install_as_MySQLdb()

Tambahkan code tersebut dibawah "import os".

Penjelasan:

Ini adalah sebagai penghubung atau komunikasi antara projek kita dengan database,

Bagaimana mengenali database yang kita buat nanti?

Simak tambahan konfigurasi lagi dibawah ini.

DATABASES = {
     'default': {
        'ENGINE': 'django.db.backends.mysql', 
        'NAME': 'django_tutorialcrud',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': '127.0.0.1',   
        'PORT': '3306',
    }   
}

Edit pada DATABASES sesuai dengan code yang diatas.

Penjelasan:

Dalam code diatas adalah identitas dari database yang kita buat pada mysql. Tadi sebelumnya library pymysql adlaah sebagai penghubungnya, nah konfigurasi diatas adalah kita mengenali / menginisialisasikan database mana yang kita buat untuk aplikasi projek kita.

Pada kode diatas kita menggunakan nama databasenya adalah django_tutorialcrud.

Jangan lupa,

Untuk membuat databasenya terlebih dahulu ya..

Nah, setelah kalian berhasil mengkonfigurasikan untuk database, selanjutnya tak luput dong kita disini menggunakan templates sebagai layout kita. Apa itu templates ? silahkan baca postingan sebelumnya.

Berikut konfigurasi / inisialisasi untuk templates kita.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['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',
            ],
        },
    },
]

Edit bagian templates seperti pada kode diatas.

Penjelasan ada di postingan sebelumnya.

Setelah itu kita akan mendeklrasikan app module mahasiswa kita di django. Dengan cara mengedit pada bagian INSTALLED_APPS . Tambahkan mahasiswa pada array tersebut.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mahasiswa' ## Tambahkan ini
]

Oke, disini kita sudah menkonfigurasi awal pada projek aplikasi CRUD kita.

Setelah itu kita akan membuat models.py pada folder mahasiswa.

kita akan membuat satu class model di dalam mahasiswa/models.py. Class tersebut adalah Data Mahasiswa. Di dalam sebuah file model wajib terdapat sintaks from django.db import models yang artinya kita memanggil modul models yang tersedia di Django. Setiap class model akan diturunkan dari sebuah class models.Model. Di dalamnya akan terdapat pendefinisian field tabel dan berbagai function yang akan dimiliki class tersebut. Sekarang silahkan salin terlebih dahulu source code berikut ke mahasiswa/models.py:

from django.db import models

# Create your models here.
class Data_mahasiswa(models.Model):
    npm = models.CharField(primary_key=True, max_length=15)
    nama = models.CharField(max_length=100, blank=True, null=True)
    tgl_lahir = models.DateField(blank=True, null=True)
    alamat = models.CharField(max_length=200, blank=True, null=True)

    class Meta:
        db_table = 'dt_mahasiswa'

Penjelasan:

Setiap model dideklarasikan dengan sebuah class Python yang mewarisi models.Model.

Nama model disesuaikan dengan kebutuhan kamu, disini kita menggunakan nama Data_mahasiswa.

Untuk membuat sebuah kolom bertipe Varchar, digunakan CharField.

Untuk membuat sebuah kolom bertipe Date, digunakan DateField.

Parameter max_length digunakan untuk menentukan batas maksimal string yang akan disimpan.

Parameter blank digunakan agar dapat mengizinkan kolom diisi dengan string kosong.

Parameter null digunakan agar dapat mengizinkan kolom tidak diisi dengan nilai apapun.

Parameter primary_key digunakan untuk menginisialisasikan atribut tersebut sebagai primary key.

Class meta db_table adalah dibunakan untuk menamai tabel pada database, disini kita memberi nama tabelnya dt_mahasiswa.

Setelah itu jalankan migration, yang berguna untuk apa yang kita buat pada model itu akan membuat atribut masing-masing. Untuk migratenya perintahnya seperti dibawah ini

./manage.py makemigrations ## kita buat makemigration terlebih dahulu
./manage.py migrate ## lalu kita migrate

Setelah berhasil, kita akan membuat views.py nya.

apa itu views? silahkan baca postingan sebelumnya.

mahasiswa/views.py

from django.shortcuts import render
from .models import Data_mahasiswa
# Create your views here.

def index(request):
    hasil = Data_mahasiswa.objects.all()
    print(hasil) ## untuk lihat hasilnya silahkan liat diterminal
    data = {
        'data':hasil,
    }   
    return render(request,"index.html",data)

Penjelasan:

Perhatikan pada line ke 2, dimana itu adalah kita mengimport dari model yang kita buat tadi. Gunanya apa? kita mendapatkan data dari database melalui model tersebut. Disini saya rasa temen-temen pembaca sudah paham akan model MVC. Dan juga import tersebut nanti kita bisa query secara ORM.

Selanjutnya kita buat fungsi index dengan parameter request, Didalam fungsi tersebut ada pengambilan data menggunakan query ORM dari django.

Pada " Data_mahasiswa.objects.all() " adalah query tersebut, dimana akan menampilkan semua data. SImpel bukan?. Untuk lebih lanjutnya tentang query silahkan baca dokumentasinya.

setelah itu ada print dimana akan menampilkan datanya dalam terminal ketika kita menjalan projek tersebut.

Jika dalam terminal terdapat tulisan "" maka kita berhasil mengambil data tersebut dari database.

Selanjutnya kita parsing variabel hasil di dict pada variabel data.

lalu kita parsing return ke index.html dengan parameter data.

Tahap akhir, kita akan membuat templatesnya,

Jangan lupa untuk membuat folder templates pada root projek kita.

Berikut code untuk index.html

<html>
<head>
	<title>Membuat CRUD sederhana menggunakan framework Django</title>	
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

</head>
<body>
	<center>
        <h1>Membuat CRUD sederhana menggunakan framework Django</h1>
        <h3>Afrizal's Blog</h3>
	</center>
	<br/>
	<br/>
	<div class="container">
		<table id="example" class="table table-striped table-bordered" style="width:100%">
			<thead>
				<tr>			
					<th>NPM</th>
					<th>Nama</th>
					<th>Tanggal Lahir</th>
					<th>Alamat</th>
				</tr>
			</thead>
			<tbody>
                {% for mahasiswa in data %}
				<tr>				
					<td>{{mahasiswa.npm}}</td>
					<td>{{mahasiswa.nama}}</td>
					<td>{{mahasiswa.tgl_lahir}}</td>
					<td>{{mahasiswa.alamat}}</td>
                </tr>
                {% endfor %}
			</tbody>
		</table>
    </div>
   
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable();
        } );
    </script>
</body>
</html>

Penjelasan:

Dari kode diatassudah tak asing bagi kita yang berkecimpung di framework web, kita ambil parsing data return yang di views dengan variabel data, lalu kita looping menggunakan for untuk menampilkan data tersebut.

Kita jalankan server menggunakan perintah

python manage.py runserver

Sekarang teman-teman bisa cek hasilnya di browser

Kurang lebih hasilnya seperti berikut.

nah, kenapa kok No data available in table?

Yupp, karena kita masih belum menambahkan data apapun ke database.

UPDATE !!(08/04/2020)

Saat ini Django telah merilis versi terbarunya, yaitu 3.1.

Apa saja yang berubah dari versi sebelumya? silahkan cek release notes .

Karena di Django 3.1 mysqlclient itu harus memiliki versi 1.4.0 atau lebih.

Jika tidak maka akan muncul error seperti ini django.core.exceptions.ImproperlyConfigured: mysqlclient 1.4.0 or newer is required; you have 0.9.3.

Maka dari itu ubah code pymysql.version_info = (1, 3, 13, "final", 0) menjadi

pymysql.version_info = (1, 4, 0, "final", 0)

Silahkan simak ke tutorial berikutnya

Membuat CRUD dengan Django - Menginput data ke database

Baca:

Membuat CRUD dengan Django - Menampilkan data dari database

Membuat CRUD dengan Django - Menginput data ke database

Membuat CRUD dengan Django - Mengupdate data

Membuat CRUD dengan Django - Menghapus data

Terima kasih ,

Semoga bermanfaat,

Salam..

Cara menampilkan data dari database Mysql dengan framework django.

UPDATE !!(08/04/2020)

Baca:

Comments

Related Posts

Integrasi Redis Pada Aplikasi Django di Web Hosting DomaiNesia

Menampilkan Sebaran Data Covid-19 menggunakan Django Dan API Kawal Corona

Deploy Aplikasi Django ke Heroku