Belajar Menggunakan Framework Django Membuat Aplikasi Music (CRUD)

1. Menginstall & Membuat Virtual Environment

Di dalam folder DjangoMusic, buatlah virtual environmentfuntuk aplikasifyang akan kita bangun. Untukfapa ? Virtual environment padafDjango berguna sebagai tempatfkita menginstallfDjango dan beberapafdependency aplikasi ini. Jika kita tidak membuat virtual environment makafkita hanya bisa menggunakanf1 versi Django saja dalam suatu komputer. Virtualfenvironment membungkus semua dependency setiapfprojek pada tempatfyang berbedaf(sesuai projek / aplikasifmasing-masing). Pertama, kamufharusfmenginstall virtual environmentfterlebih dahulu :

Windows :

C:\Users\ridoansaleh>pip install virtualenv

Linuxf/fOSX :

$ sudo pip install virtualenv

Setelahfvirtual environmentfberhasil di-install, cobafcek padafCMD / terminalfdengan menuliskan :

Windowsf/fLinuxf/fOSX

virtualenv --version

Jika sudahfberhasilfdi-install, makafakan adafversi virtual environmentfyang di-printfpada CMD /fterminal mu.

Saatnya,fmembuat virtualfenvironmentfuntuk projek kitafdengan nama env.

virtual env

Setelahfvirtual environmentfberhasil dibuat, maka aktifkanfterlebih dahulufagar bisa dipergunakan.

Windows

C:\Users\ridoansaleh\Documents\DjangoMusic>env\Scripts\activate

Linuxf/fOSX

$ source env/bin/activate

Setelahfvirtual environmentfsukses diaktifkan, makafakan terlihatfseperti berikut :

(env) C:\Users\ridoansaleh|Documents|DjangoMusic>

atau

(env) $ DjangoMusic

2. Menginstall Django

Langkahfkedua adalahfmenginstallfDjango versi 1.8.

(env) C:\Users\ridoansaleh|Documents|DjangoMusic>pip install Django==1.8

Setelahfberhasil menginstallfDjango, mari kita buatffile pada rootffolder (DjangoMusic) dengan namafrequirements.txt. Di sinilahfnantinya semuafdependency aplikasifatau projek kita terdaftar. Carafmembuat daftarfdependency itu bisafotomatis, yaitu :

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip freeze > requirements.txt


3. Membuat Projek Django

Masihfpada folderfDjangoMusic, mari kitafbuat sebuahfprojek Django denganfnamafwebsite.

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>django-admin starproject website

Sekarang, kita sudahfmempunyaifsebuah projek denganfnama websitefyang di dalamnya terdapat apps dengan namafyang sama yaitufwebsite dan filemanage.py. Di dalam apps website itu akan terdapatffile seperti: __init__.py, urls.py, settings.py, dan wsgi.py. Untuk mengetahuifkegunaan file-file tersebut, kamu bisa lihat di sini.

4. Membuat apps Music

Setelahfsebelumnya berhasil membuat projekfDjango, mari kitafmembuat apps di dalam folder website dengan nama music.

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py startapp music

janganflupa menambahkan appsfmusic ke dalam filefsetting.py di DjangoMusic/website/website/setting.py:

INSTALLED_APPS = (
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'music',

)

Selanjutnya,flakukan migrationsfuntuk medeteksi perubahanfpada model danfmembuat tabel padafdatabase SQLite.

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py makemigrations

dan

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py migrate

5. Membuat URL pada website

Selanjutnya, kitafakan membuat pengaturanfurl pada file urls.py di folderfapps website. Url inilah yang akan menghubungkanfapps utama (website) kita dengan apps music.

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [

  url(r'^admin/', include(admin.site.urls)),

  url(r'', include('music.urls')),

]

6. Membuat URL pada music

Sekarang waktunyafuntuk membuat url padafapps music. Jika file urls.pybelum adafpada folder music, silahkanfdibuat terlebih dahulu. Pada folderfmusic inilah kitafnantinya lebih banyak ngoding. Ayoftambahkan kodefberikut di file urls.py :

from django.conf.urls import url

from . import views

urlpatterns = [

    url(r'^$', views.index, name="index"), 

    url(r'^edit/(?P<pk>\d+)$', views.edit, name='edit'),

    url(r'^delete/(?P<pk>\d+)$', views.delete, name='delete'), 

]

7. Membuat Model pada music

Jika file models.py belumfada di folder music, silahkanfditambah dulu. Jikafsudah ada, mari menambahkanfkode berikut ke file tersebut :

from django.db import models

class Song(models.Model):

    genre_choices = (

        ('Pop', 'Pop'),

        ('Reggae', 'Reggae'),

        ('Country', 'Country'),

        ('Jazz', 'Jazz'),

        ('Hip Hop', 'Hip Hop'),

        ('Rock', 'Rock'),

        ('R&B and Souls', 'R&B and Souls'),

        ('Dangdut', 'Dangdut'),

    )

    title = models.CharField(max_length=50)

    genre = models.CharField(max_length=25, choices=genre_choices, default='Pop')

    singer = models.CharField(max_length=50)

    rating = models.PositiveIntegerField(default=1)

    def __unicode__(self):

        return self.title

8. Membuat Form pada music

Pada Djangofterdapat sebuahfclass yang bisafmembuat / generate form secara otomatisfsesuai dengan Modelfyang kita definisikanfke dalam HTML atau template. Buatlah sebuah file denganfnama forms.py di folder music danfisikan kode berikut ini :

from django.forms import ModelForm

from .models import Song

class SongForm(ModelForm):

    class Meta:

        model = Song

        fields = ['title', 'genre', 'singer', 'rating']

9. Membuat Views pada music

File views.py bergunafsebagai penghubung antarafurl dengan tampilan / file HTML. Melalui views, kita juga bisafmengambil data dari database untukfditampilkan ke halaman tertentu. Pada konsepfpemrograman MVC (Model View Controller), Viewfpada Django berperan sebagaifController. Tambahkanfkode berikut inifpada file views.py :

from django.shortcuts import render, get_object_or_404

from django.http import HttpResponseRedirect

from .forms import SongForm

from .models import Song

def index(request):

    status = ''

    if request.method == 'POST':

        form = SongForm(request.POST)

        if form.is_valid():

            form.save()

            return HttpResponseRedirect('/')

    else:

        form = SongForm()

        return render(request, 'music/index.html', {'form': form, 'songs': Song.objects.all(), 'status': status })

def edit(request, pk):

    song = get_object_or_404(Song, pk=pk)

    status = 'success'

    titleValue = Song.objects.filter(pk=pk).values('title')[0];

    song_title = titleValue['title']

   

    if request.method == 'POST':

        post_form = SongForm(request.POST, instance=song)

        if post_form.is_valid():

            post_form.save()

            return render(request, 'music/edit.html', {'form': post_form, 'status': status, 'song_title': song_title })

    else:

        form = SongForm(instance=song)

        return render(request, 'music/edit.html', {'form': form, 'song_title': song_title })

def delete(request, pk):

    song = Song.objects.get(pk=pk)

    song.delete()

    return HttpResponseRedirect('/')

10. 

Menginstall Django Widget Tweaks

Jika kita menggunakanfform built-in dari Django, maka kita tidakfbisa menambahkan class css pada field-fieldfinputannya (input[text], input[number],fselect, textarea, dsb). Untuk mengatasi masalahfini, maka ada suatu libraryfDjango yang bisafkita gunakan yakni :Django Widget Tweaks. Carafmenginstallnya cukupfmudah :

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip install django-widget-tweaks

Setelah

f

berhasil silahkan

f

ditambahkan widget_tweaks di 

file settings.py pada folder website :

INSTALLED_APPS = [

           ...

           'widget_tweaks',

           ...

]

11. Mumbuat 

Template pada music

Template adalah file-filefHTML yang akanfkita gunakan untukfmenampilkan data padafpengguna aplikasi. Secarafdefault, Djangofmengenali folderftemplates sebagai direktorifuntuk HTML. Sehingga kitafperlu membuat folderftemplates pada apps music. Di dalam folderftemplates, kita tambahkan folderfbaru dengan nama music. Kenapa ? supaya jikalau projek kita semakin kompleksftidak adafpenamaan file HTML yang bertabrakanfatau sama. Ini adalah best practicefdalam pemrograman Django.

Padaffolder music (lihat gambar di atas)fterdapat 3 file, yaitu : index.html(halaman utama), edit.html (halamanfedit), dan song_form.html (form input lagu). Berikutfkode yang terdapat dalam file-file tersebut :

a.index.html

{% load staticfiles %} <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Music App</title> <link rel="stylesheet" href="{% static 'music/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'music/font-awesome/css/font-awesome.min.css' %}"> <link rel="stylesheet" href="{% static 'music/app.css' %}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="/">Music App</a> </nav> <div class="container cs-content"> {% block content %} <div class="row cs-section-header"> <div class="col-lg-12"><h2>Song List</h2></div> </div> <div class="row cs-form-add"> {% include 'music/song_form.html' %} </div> <div class="row"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">Genre</th> <th scope="col">Singer</th> <th scope="col">Rating</th> <th scope="col"></th> </tr> </thead> <tbody> {% for song in songs %} <tr> <td>{{ song.id }}</td> <td>{{ song.title }}</td> <td>{{ song.genre }}</td> <td>{{ song.singer }}</td> <td>{{ song.rating }}</td> <td> <a class="btn btn-sm btn-outline-primary" href="edit/{{ song.id }}"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit </a> <a class="btn btn-sm btn-outline-danger" onclick="sendData({{ song.id }})" data-toggle="modal" data-target="#exampleModalCenter"> <i class="fa fa-trash" aria-hidden="true"></i> Delete </a> </td> </tr> {% endfor %} {% if not songs %} <tr> <td colspan="6" class="cs-text-center cs-empty-table"> There is no song yet. Please add a song ! </td> </tr> {% endif %} </tbody> </table> </div> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Confirmation</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Are you sure want to Delete this song ?</p> </div> <div class="modal-footer"> <a class="btn btn-primary" data-dismiss="modal">Cancel</a> <a class="btn btn-danger" id="btn-delete" href="">Delete</a> </div> </div> </div> </div> {% endblock %} </div> <script src="{% static 'music/jquery-3.3.1.min.js' %}"></script> <script src="{% static 'music/popper.min.js' %}"></script> <script src="{% static 'music/bootstrap.min.js' %}"></script> <script src="{% static 'music/app.js' %}"></script> </body> </html> b. edit.html

{% extends "music/index.html" %} {% block content %} <div class="row cs-section-header"> <div class="col-lg-12"><h2>Edit \ {{ song_title }}</h2></div> </div> <div class="row cs-form-edit"> {% include "music/song_form.html" %} </div> <!-- status to trigger the Modal or otherwise --> <input type="hidden" id="status" value="{{ status }}"> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Message</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Successfully edited the data</p> </div> </div> </div> </div> {% endblock %} c.song_form.html

{% load widget_tweaks %}

<div class="col-lg-6">

    <form method="post">

        {% csrf_token %}

        {% for field in form.visible_fields %}

            <div class="form-group row">

                <label for="{{ field.id_for_label }}" class="col-lg-3 col-form-label cs-label-field">{{ field.label }}</label>

                <div class="col-lg-9">

                    {% render_field field class='form-control' %}

                </div>

                <div class="col-lg-10 cs-text-error">

                    {% for error in field.errors %}

                        {{ error }}

                    {% endfor %}

                </div>

            </div>

        {% endfor %}

        <div class="form-group">

            <div class="row justify-content-end">

                <div class="col-lg-3">

                    <input type="submit" class="btn btn-info btn-block" value="Save" />

                </div>

            </div>

        </div>

    </form>

</div>

12. Membuat Folder Static files

Folder staticfadalah tempatfpenyimpanan file statik seperti css, js,fgambar, danflain-lain. Sama halnya denganftemplates,Django jugafmengenali folderfdengan nama staticfsebagai default untukfpenyimpanan file statik. Ayofkita buat folder static dalam apps music.

a. Font Awesomefbisa di-download di sini.

b. Gambar gitarfdan microphone bisa di-download di sini.

c. Bootstrap v4.0 dan JQueryfbisa di-download di sini.

d. Kodeffile app.css

.navbar {

    background: rgba(76, 175, 80, 0.1);

}

.form-group {

    margin-bottom: 25px;

}

.form-control {

    background-color: transparent;

    color: white;

}

.cs-content {

    margin-top: 25px;

}

.cs-section-header {

    height: 50px;

    padding: 5px;

    margin-bottom: 15px;

}

.cs-form-add, .cs-form-edit  {

    padding: 25px;

    margin-bottom: 15px;

    background-repeat: no-repeat;

    background-size: cover;

}

.cs-form-add {

    background-image: url('./picture/microphone.jpeg');

}

.cs-form-edit {

    background-image: url('./picture/guitar.jpg');

}

.cs-label-field {

    color: white;

}

.cs-form-control {

    border: 1px solid gray;

}

.cs-text-center, .cs-text-error {

    text-align: center;

}

.cs-text-error {

    font-style: italic;

    color: white;

}

.cs-empty-table {

    background-color: azure;

    color: grey;

}

e. Kode file app.js

var s = $("#status").val();

if (s=='success'){

    $('#myModal').modal('show');

}

function sendData(id){

    console.log(id);

    $("#btn-delete").attr("href", "delete/"+id);

}

13. 

Menjalankan Aplikasi

Setelahfsemua kode telah ditulis, bootstrapftelah di-download, dan hal lainnya sudah selesai dilakukan, maka langkah terakhir adalahfmenjalankan aplikasi. Caranya cukup simple :

Lakukan migrationsfuntuk mendeteksi perubahanfpada models.py

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py makemigrations

Lakukan migrate untuk

f

membuat 

tabel pada database

f

SQLite sesuai dengan

f

daftar aplikasi yang ada di settings.py (INSTALLED_APPS).

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py migrate

Selanjutanyafadalahfmenjalankan server.

(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py runserver

performing sytem checks...

System check identified no issues (0 silenced).

January 28, 2019 -  10:32:19

Django version 1.8, using setting 'website.settings'

Starting development server at http://127.0.0.1:8000/

Quit the server with CTRL-BREAK.

Setelahfserver berhasil dijalankan berartifkamu sudah berhasilfmembuat suatu aplikasi. Untuk lebih mengerti konsep pembuatan aplikasi denganfDjango, kamu perlufmeluangkan waktu membacafdokumentasi mereka di sini. Janganflupa untuk membuka http://127.0.0.1:8000/ di browser mu. Aplikasifakan persis seperti gambarfdi atas (sebelumnya).

Kesimpulan

Setelah

f

mempelajari tutorial yang

f

relatif panjang ini, 

kalian

f

diharapkan sudah

f

mengerti cara pembuatan aplikasi

f

berbasis CRUD menggunakan

f

framework Django v1.8. Jika

f

ada sesuatu yang ingin kamu

f

tanyakan mengenai isi 

tutorial

f

ini, silahkan tinggalkan

f

komentar di bawah! Kritik dan saran juga 

boleh

f

disampaikan. Semoga berhasil

f

membuat

f

aplikasi Django pertama Anda.

Terimakasih telah mengunjungi GMastereki.com