Open in app Responses (17) To respond to this story, get the free Medium app. Open in app Putra Nurfajar Putra Nurfajar over 2 years ago saya selalu kedapati error seperti ini ModuleNotFoundError: No module named ‘widget-tweaks’.. itu bagaimana ya ? 11 rudyrahadian rudyrahadian about 2 years ago wihh keren bingitss!! 1 Ruitze Coderz Ruitze Coderz almost 3 years ago sebagian gambar tidak muncul om. totlong di perbaiki 5 Ahmad Zulfikar Ahmad Zulfikar over 2 years ago kok saya selalu error gini ModuleNotFoundError: No module named ‘widget-tweaks’ tolong bantuannya 1 Ridoan Saleh Nasution Ridoan Saleh Nasution AUTHOR almost 3 years ago Ruitze Coderz .. Gambar yang mana om ? Kalau gambar microphone dan guitar-nya itu bebas mau di-download gambar apa saja atau dari mana saja. Yang penting namanya sama dengan microphone.jpeg dan guitar.jpg . Iyan Gustiana Iyan Gustiana almost 2 years ago Makasih materi gan khadam ikhwan khadam ikhwan almost 2 years ago di step 13 ,gak bisa di ‘makemigration’ om , tulisanya unexpected EOF while parsing Ridoan Saleh Nasution Ridoan Saleh Nasution AUTHOR over 2 years ago kdv .. bro, udah buat folder static-nya belum ? Di dalam folder tersebut, dibuat lagi folder dengan nama music. Jadi file-file statik disimpan pada folder music. Titoyuwonouii Titoyuwonouii 4 days ago Mas Ridoan sy mengikuti arahan untuk membuat aplikasi itu tapi setelah di website>python manage.py makemigrations ada error ini: File "C:projectsatu\website\website\urls.py", line 20, in url(r'^admin/', include(admin.site.urls)), yg bagian ini…... Read More Ridoan Saleh Nasution Ridoan Saleh Nasution AUTHOR about 2 years ago Ahmad Munir .. mas, bisa share source code-nya ? Belajar Membuat Aplikasi Music (CRUD) Menggunakan Framework Django Ridoan Saleh Nasution Ridoan Saleh Nasution Jan 28, 2018·9 min read Image for post Photo by Kevin on Unsplash Apa kabar, teman-teman ? Setelah belajar cara menginstall Python pada laptop sudah kelar. Kemudian sudah belajar Python juga. Sepertinya ada yang kurang kalau kita belum membuat suatu aplikasi. Benar gak ? Pada dasarnya, tujuan kita belajar suatu bahasa pemrograman ialah untuk bisa membuat suatu aplikasi. Percuma kita paham bahasanya namun tidak pernah membuat sesuatu yang bermanfaat darinya. Apalagi kita seorang programmer yang sangat membutuhkan skill dalam membangun aplikasi. Orang lain akan sulit untuk percaya bahwa kita menguasai suatu bahasa pemrograman tanpa adanya bukti aplikasi yang sudah pernah kita kerjakan / buat. Info Penting : Saya akan meng-update tutorial ini secara berkala. So, jangan heran ya teman2 jika ada perubahan di sini. Tujuannya hanya untuk memperbaiki serta meningkatkan kualitas tutorial. Tutorial ini untuk Siapa ? Pastinya tutorial ini buat kalian yang masih dalam tahap belajar membuat aplikasi berbasis CRUD (Create, Read, Update, and Delete) menggunakan framework Django. Artinya kalian masih dalam tahap pemula di bahasa Python atau framework Django. Diharapkan kalian harus sudah memahami konsep dasar bahasa Python karena itu lah pondasinya. Seperti cara pendeklarasian variabel, list, dictionary, if else, function, perulangan dan sebagainya. Jika kalian belum paham bahasa Python atau belum pernah belajar itu, silahkan belajar di sini. Setelah mengerti, coba baca sedikit mengenai framework Django. Aplikasi ini dibuat pakai apa ? Selain menggunakan Django, aplikasi Music ini juga dibuat menggunakan framework / library lain. Berikut detilnya : Django v1.8 Django v1.8 bukanlah versi terbaru. Tapi, ini masih relevan untuk kamu pelajari. Django berperan sebagai bahasa server side. SQLite v3 Database SQLite adalah database yang dibuat untuk kepentingan development saja. SQLite sendiri sudah menjadi database default bagi Django. Tidak perlu kamu install. Sudah ada bersama Django. Bootstrap v4.0 Bootstrap adalah framework HTML, CSS, dan JavaScript terpopuler di kalangan developer seluruh dunia berdasarkan jumlah star yang dimilikinya pada Github. Bootstrap v4.0 adalah versi terbaru. Framework ini relatif sangat mudah untuk digunakan atau dimodifikasi. JQuery v3.3.1 Framework JQuery bertujuan memudahkan developer untuk menggunakan JavaScript dengan source code yang minimalis / lebih sedikit serta kompatibel di semua browser modern. Font Awesome v4.7.0 Font Awesome merupakan framework yang menyediakan icon berkualitas yang bisa diperoleh secara gratis maupun berbayar. Django Widget Tweaks Django Widget Tweaks ialah library Django untuk membantu developer menambahkan atribut pada form yang dibangun menggunakan form generator / built-in atau ClassForm. Seperti Apa Tampilan Aplikasinya ? Aplikasi Music yang akan kita bangun berguna untuk menyimpan, mengubah serta menghapus data Lagu (Song). Atribut dari lagu terdiri dari: title (judul), genre (genre), singer (penyanyi), dan rating (bintang atau nilai). Berikut adalah tampilan dari aplikasi setelah selesai : Image for postImage for post Gambar Halaman Utama Aplikasi Music ini hanya terdiri dari 2 halaman, yaitu: utama dan edit. Sangat sederhana dikarenakan tutorial ini hanya diperuntukkan bagi pemula dalam dunia pemrograman Django. Tidak untuk yang sudah expert atau ahli. Namun, tetap saja para expert boleh memberikan komentar berupa masukan pada tutorial ini. Menggunakan Text Editor Apa ? Sebenarnya tidak ada batasan text editor yang bisa kamu gunakan. Namun, ada beberapa text editor yang lebih unggul dari yang lain dari segi fitur. Text editor apapun bisa kamu gunakan. Saya pada pengerjaan aplikasi ini menggunakan Visual Studio v1.19.2 atau versi terbaru. Saya memilih menggunakan ini dikarenakan fitur highlight syntax Django tersedia, struktur folder yang rapi, tersedia beberapa tema menarik dan lain-lain. Text editor saya menggunakan tema Monokai. Image for postImage for post Gambar Visual Studio Code Struktur Aplikasi yang Akan Kita Bangun DjangoMusic |---.gitignore |---LICENSE |---README.md |---requirements.txt \---website | db.sqlite3 | manage.py | +---music | | admin.py | | forms.py | | models.py | | tests.py | | urls.py | | views.py | | __init__.py | | | +---static | | \---music | | | app.css | | | app.js | | | bootstrap.min.css | | | bootstrap.min.js | | | jquery-3.3.1.min.js | | | popper.min.js | | | | | +---font-awesome | | | +---css | | | | font-awesome.css | | | | font-awesome.min.css | | | | | | | \---fonts | | | fontawesome-webfont.eot | | | fontawesome-webfont.svg | | | fontawesome-webfont.ttf | | | fontawesome-webfont.woff | | | fontawesome-webfont.woff2 | | | FontAwesome.otf | | | | | \---picture | | guitar.jpg | | microphone.jpeg | | person_radio.jpg | | piano.jpeg | | | \---templates | \---music | edit.html | index.html | song_form.html | \---website settings.py urls.py wsgi.py __init__.py Akhirnya, Kita akan Ngoding Udah capek belum ? Tutorial ini memang dibuat khusus bagi orang yang suka membaca. Panjang banget memang. Tapi kan biar mudah dipahami dan tidak membuat pembaca semakin bingung akan hal-hal aneh atau belum pernah ditemui sebelumnya di Projek yang akan kita buat. Oke, langsung saja kita ke inti / tahapan tutorialnya. Image for postImage for post Langkah pertama untuk memulai tutorial ini adalah pastikan komputer / laptop kamu sudah terinstall Python. Cara mengeceknya adalah tulis perintah python pada terminal / CMD kamu : C:\Users\ridoansaleh>python Python 2.7.14 (v2.7.14:84471935ed, Sep 16 2017, 20:19:30) [MSC v.1500 32 bit (Intel)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> Selanjutnya buatlah folder dengan nama DjangoMusic pada File Explorer kamu. Terserah sih namanya apa saja. Namun, saya sarankan namanya harus relevan dengan aplikasi yang akan kita buat. Ada baiknya samakan aja dulu. 1. Menginstall & Membuat Virtual Environment Di dalam folder DjangoMusic, buatlah virtual environment untuk aplikasi yang akan kita bangun. Untuk apa ? Virtual environment pada Django berguna sebagai tempat kita menginstall Django dan beberapa dependency aplikasi ini. Jika kita tidak membuat virtual environment maka kita hanya bisa menggunakan 1 versi Django saja dalam suatu komputer. Virtual environment membungkus semua dependency setiap projek pada tempat yang berbeda (sesuai projek / aplikasi masing-masing). Pertama, kamu harus menginstall virtual environment terlebih dahulu : Windows : C:\Users\ridoansaleh>pip install virtualenv Linux / OSX : $ sudo pip install virtualenv Setelah virtual environment berhasil di-install, coba cek pada CMD / terminal dengan menuliskan : Windows / Linux / OSX virtualenv --version Jika sudah berhasil di-install, maka akan ada versi virtual environment yang di-print pada CMD / terminal mu. Saatnya, membuat virtual environment untuk projek kita dengan nama env. virtualenv env Setelah virtual environment berhasil dibuat, maka aktifkan terlebih dahulu agar bisa dipergunakan. Windows C:\Users\ridoansaleh\Documents\DjangoMusic>env\Scripts\activate Linux / OSX $ source env/bin/activate Setelah virtual environment sukses diaktifkan, maka akan terlihat seperti berikut : (env) C:\Users\ridoansaleh\Documents\DjangoMusic> atau (env) $ DjangoMusic 2. Menginstall Django Langkah kedua adalah menginstall Django versi 1.8. (env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip install Django==1.8 Setelah berhasil menginstall Django, mari kita buat file pada root folder (DjangoMusic) dengan nama requirements.txt. Di sinilah nantinya semua dependency aplikasi atau projek kita terdaftar. Cara membuat daftar dependency itu bisa otomatis, yaitu : (env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip freeze > requirements.txt 3. Membuat Projek Django Masih pada folder DjangoMusic, mari kita buat sebuah projek Django dengan nama website. (env) C:\Users\ridoansaleh\Documents\DjangoMusic>django-admin startproject website Sekarang, kita sudah mempunyai sebuah projek dengan nama website yang di dalamnya terdapat apps dengan nama yang sama yaitu website dan file manage.py. Di dalam apps website itu akan terdapat file seperti: __init__.py, urls.py, settings.py, dan wsgi.py. Untuk mengetahui kegunaan file-file tersebut, kamu bisa lihat di sini. 4. Membuat apps Music Setelah sebelumnya berhasil membuat projek Django, mari kita membuat apps di dalam folder website dengan nama music. (env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py startapp music Jangan lupa menambahkan apps music ke dalam file settings.py di DjangoMusic/website/website/settings.py : Selanjutnya, lakukan migrations untuk medeteksi perubahan pada model dan membuat tabel pada database 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, kita akan membuat pengaturan url pada file urls.py di folder apps website. Url inilah yang akan menghubungkan apps utama (website) kita dengan apps music. 6. Membuat URL pada music Sekarang waktunya untuk membuat url pada apps music. Jika file urls.py belum ada pada folder music, silahkan dibuat terlebih dahulu. Pada folder music inilah kita nantinya lebih banyak ngoding. Ayo tambahkan kode berikut di file urls.py : 7. Membuat Model pada music Jika file models.py belum ada di folder music, silahkan ditambah dulu. Jika sudah ada, mari menambahkan kode berikut ke file tersebut : 8. Membuat Form pada music Pada Django terdapat sebuah class yang bisa membuat / generate form secara otomatis sesuai dengan Model yang kita definisikan ke dalam HTML atau template. Buatlah sebuah file dengan nama forms.py di folder music dan isikan kode berikut ini : 9. Membuat Views pada music File views.py berguna sebagai penghubung antara url dengan tampilan / file HTML. Melalui views, kita juga bisa mengambil data dari database untuk ditampilkan ke halaman tertentu. Pada konsep pemrograman MVC (Model View Controller), View pada Django berperan sebagai Controller. Tambahkan kode berikut ini pada file views.py : 10. Menginstall Django Widget Tweaks Jika kita menggunakan form built-in dari Django, maka kita tidak bisa menambahkan class css pada field-field inputannya (input[text], input[number], select, textarea, dsb). Untuk mengatasi masalah ini, maka ada suatu library Django yang bisa kita gunakan yakni : Django Widget Tweaks. Cara menginstallnya cukup mudah : (env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip install django-widget-tweaks Setelah berhasil silahkan ditambahkan widget_tweaks di file settings.py pada folder website : INSTALLED_APPS = [ ... 'widget_tweaks', ... ] 11. Membuat Template pada music Template adalah file-file HTML yang akan kita gunakan untuk menampilkan data pada pengguna aplikasi. Secara default, Django mengenali folder templates sebagai direktori untuk HTML. Sehingga kita perlu membuat folder templates pada apps music. Di dalam folder templates, kita tambahkan folder baru dengan nama music. Kenapa ? supaya jikalau projek kita semakin kompleks tidak ada penamaan file HTML yang bertabrakan atau sama. Ini adalah best practice dalam pemrograman Django. Image for postImage for post Gambar Struktur Folder Templates Pada folder music (lihat gambar di atas) terdapat 3 file, yaitu : index.html (halaman utama), edit.html (halaman edit), dan song_form.html (form input lagu). Berikut kode yang terdapat dalam file-file tersebut : a. index.html b. edit.html c. song_form.html 12. Membuat Folder Static files Folder static adalah tempat penyimpanan file statik seperti css, js, gambar, dan lain-lain. Sama halnya dengan templates, Django juga mengenali folder dengan nama static sebagai default untuk penyimpanan file statik. Ayo kita buat folder static dalam apps music. Image for postImage for post Gambar Struktur Folder Static a. Font Awesome bisa di-download di sini. b. Gambar gitar dan microphone bisa di-download di sini. c. Bootstrap v4.0 dan JQuery bisa di-download di sini. d. Kode file app.css d. Kode file app.js 13. Menjalankan Aplikasi Setelah semua kode telah ditulis, bootstrap telah di-download, dan hal lainnya sudah selesai dilakukan, maka langkah terakhir adalah menjalankan aplikasi. Caranya cukup simple : Lakukan migrations untuk mendeteksi perubahan pada models.py (env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py makemigrations Lakukan migrate untuk membuat tabel pada database SQLite sesuai dengan daftar aplikasi yang ada di settings.py (INSTALLED_APPS). (env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py migrate Selanjutanya adalah menjalankan server. (env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py runserver Performing system checks... System check identified no issues (0 silenced). January 28, 2018 - 21:45:01 Django version 1.8, using settings 'website.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CTRL-BREAK. Setelah server berhasil dijalankan berarti kamu sudah berhasil membuat suatu aplikasi. Untuk lebih mengerti konsep pembuatan aplikasi dengan Django, kamu perlu meluangkan waktu membaca dokumentasi mereka di sini. Jangan lupa untuk membuka http://127.0.0.1:8000/ di browser mu. Aplikasi akan persis seperti gambar di atas (sebelumnya). Source Code Aplikasi Setelah membaca tutorial yang relatif panjang ini, mungkin di antara teman2 ada yang tidak sukses menjalankan aplikasinya. Salah satu penyebabnya mungkin ada bagian tutorial yang lupa dibaca sehingga file kodingan-nya tidak lengkap atau masalah lainnya. Oleh sebab itu, saya telah mempublikasikan projek ini di Github agar teman2 dapat mengaksesnya. Silahkan cek di sini. [ Update: source code-nya sudah sedikit berbeda karena sudah ditambahkan halaman login dan sign up ] Demo Aplikasi Bagi kalian yang penasaran dengan hasil akhir dari aplikasi kita ini, mari cek di Music-App. Aplikasi tersebut memang sengaja saya hosting di Python Anywhere. Cara hosting-nya relatif mudah, cukup dengan meng-upload file secara manual atau kloning langsung dari repositori Github kamu. Kesimpulan Setelah mempelajari tutorial yang relatif panjang ini, kalian diharapkan sudah mengerti cara pembuatan aplikasi berbasis CRUD menggunakan framework Django v1.8. Jika ada sesuatu yang ingin kamu tanyakan mengenai isi tutorial ini, silahkan tinggalkan komentar di bawah! Kritik dan saran juga boleh disampaikan. Semoga berhasil membuat aplikasi Django pertama Anda. 128 17 Django Python Web Development Sqlite Web More from Ridoan Saleh Nasution Follow Software Engineer More From Medium Cheat Sheet to Watching Dota 2 & TI Mitchel Huffa When a Robot Writes Your News, What Happens to Democracy? CNN First World Problem for Developers: Reading Our Own Code Surya Nirvana in bisaGo2020 Web development technologies you can learn in 2018 Connor Leech in Employbl How to enforce HTTPS on Heroku deployed apps i.e. React Uros Randelovic in JavaScript In Plain English Dummy Guides for Newby Workers in Blockchain Industries Oktafia Putri in The Startup Progressive Web Apps with PokeAPI and Deploy using Firebase Amendo in Easyread Features And Breaking Changes In TypeScript 4 Pranav Bhatia in JavaScript In Plain English About Help Legal Get the Medium app A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Get started
Belajar Membuat Aplikasi Music (CRUD) Menggunakan Framework Django
Apa kabar, teman-teman ?
Setelah belajar cara menginstall Python pada laptop sudah kelar. Kemudian sudah belajar Python juga. Sepertinya ada yang kurang kalau kita belum membuat suatu aplikasi. Benar gak ?
Pada dasarnya, tujuan kita belajar suatu bahasa pemrograman ialah untuk bisa membuat suatu aplikasi. Percuma kita paham bahasanya namun tidak pernah membuat sesuatu yang bermanfaat darinya. Apalagi kita seorang programmer yang sangat membutuhkan skill dalam membangun aplikasi. Orang lain akan sulit untuk percaya bahwa kita menguasai suatu bahasa pemrograman tanpa adanya bukti aplikasi yang sudah pernah kita kerjakan / buat.
Info Penting :
Saya akan meng-update tutorial ini secara berkala. So, jangan heran ya teman2 jika ada perubahan di sini. Tujuannya hanya untuk memperbaiki serta meningkatkan kualitas tutorial.
Tutorial ini untuk Siapa ?
Pastinya tutorial ini buat kalian yang masih dalam tahap belajar membuat aplikasi berbasis CRUD (Create, Read, Update, and Delete) menggunakan framework Django. Artinya kalian masih dalam tahap pemula di bahasa Python atau framework Django. Diharapkan kalian harus sudah memahami konsep dasar bahasa Python karena itu lah pondasinya. Seperti cara pendeklarasian variabel, list, dictionary, if else, function, perulangan dan sebagainya. Jika kalian belum paham bahasa Python atau belum pernah belajar itu, silahkan belajar di sini. Setelah mengerti, coba baca sedikit mengenai framework Django.
Aplikasi ini dibuat pakai apa ?
Selain menggunakan Django, aplikasi Music ini juga dibuat menggunakan framework / library lain. Berikut detilnya :
- Django v1.8
Django v1.8 bukanlah versi terbaru. Tapi, ini masih relevan untuk kamu pelajari. Django berperan sebagai bahasa server side. - SQLite v3
Database SQLite adalah database yang dibuat untuk kepentingan development saja. SQLite sendiri sudah menjadi database default bagi Django. Tidak perlu kamu install. Sudah ada bersama Django. - Bootstrap v4.0
Bootstrap adalah framework HTML, CSS, dan JavaScript terpopuler di kalangan developer seluruh dunia berdasarkan jumlah star yang dimilikinya pada Github. Bootstrap v4.0 adalah versi terbaru. Framework ini relatif sangat mudah untuk digunakan atau dimodifikasi. - JQuery v3.3.1
Framework JQuery bertujuan memudahkan developer untuk menggunakan JavaScript dengan source code yang minimalis / lebih sedikit serta kompatibel di semua browser modern. - Font Awesome v4.7.0
Font Awesome merupakan framework yang menyediakan icon berkualitas yang bisa diperoleh secara gratis maupun berbayar. - Django Widget Tweaks
Django Widget Tweaks ialah library Django untuk membantu developer menambahkan atribut pada form yang dibangun menggunakan form generator / built-in atau ClassForm.
Seperti Apa Tampilan Aplikasinya ?
Aplikasi Music yang akan kita bangun berguna untuk menyimpan, mengubah serta menghapus data Lagu (Song). Atribut dari lagu terdiri dari: title (judul), genre (genre), singer (penyanyi), dan rating (bintang atau nilai). Berikut adalah tampilan dari aplikasi setelah selesai :
Aplikasi Music ini hanya terdiri dari 2 halaman, yaitu: utama dan edit. Sangat sederhana dikarenakan tutorial ini hanya diperuntukkan bagi pemula dalam dunia pemrograman Django. Tidak untuk yang sudah expert atau ahli. Namun, tetap saja para expert boleh memberikan komentar berupa masukan pada tutorial ini.
Menggunakan Text Editor Apa ?
Sebenarnya tidak ada batasan text editor yang bisa kamu gunakan. Namun, ada beberapa text editor yang lebih unggul dari yang lain dari segi fitur. Text editor apapun bisa kamu gunakan. Saya pada pengerjaan aplikasi ini menggunakan Visual Studio v1.19.2 atau versi terbaru. Saya memilih menggunakan ini dikarenakan fitur highlight syntax Django tersedia, struktur folder yang rapi, tersedia beberapa tema menarik dan lain-lain. Text editor saya menggunakan tema Monokai.
Struktur Aplikasi yang Akan Kita Bangun
DjangoMusic
|---.gitignore
|---LICENSE
|---README.md
|---requirements.txt
\---website
| db.sqlite3
| manage.py
|
+---music
| | admin.py
| | forms.py
| | models.py
| | tests.py
| | urls.py
| | views.py
| | __init__.py
| |
| +---static
| | \---music
| | | app.css
| | | app.js
| | | bootstrap.min.css
| | | bootstrap.min.js
| | | jquery-3.3.1.min.js
| | | popper.min.js
| | |
| | +---font-awesome
| | | +---css
| | | | font-awesome.css
| | | | font-awesome.min.css
| | | |
| | | \---fonts
| | | fontawesome-webfont.eot
| | | fontawesome-webfont.svg
| | | fontawesome-webfont.ttf
| | | fontawesome-webfont.woff
| | | fontawesome-webfont.woff2
| | | FontAwesome.otf
| | |
| | \---picture
| | guitar.jpg
| | microphone.jpeg
| | person_radio.jpg
| | piano.jpeg
| |
| \---templates
| \---music
| edit.html
| index.html
| song_form.html
|
\---website
settings.py
urls.py
wsgi.py
__init__.pyAkhirnya, Kita akan Ngoding
Udah capek belum ? Tutorial ini memang dibuat khusus bagi orang yang suka membaca. Panjang banget memang. Tapi kan biar mudah dipahami dan tidak membuat pembaca semakin bingung akan hal-hal aneh atau belum pernah ditemui sebelumnya di Projek yang akan kita buat. Oke, langsung saja kita ke inti / tahapan tutorialnya.
Langkah pertama untuk memulai tutorial ini adalah pastikan komputer / laptop kamu sudah terinstall Python. Cara mengeceknya adalah tulis perintah python pada terminal / CMD kamu :
C:\Users\ridoansaleh>python
Python 2.7.14 (v2.7.14:84471935ed, Sep 16 2017, 20:19:30) [MSC v.1500 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>Selanjutnya buatlah folder dengan nama DjangoMusic pada File Explorer kamu. Terserah sih namanya apa saja. Namun, saya sarankan namanya harus relevan dengan aplikasi yang akan kita buat. Ada baiknya samakan aja dulu.
1. Menginstall & Membuat Virtual Environment
Di dalam folder DjangoMusic, buatlah virtual environment untuk aplikasi yang akan kita bangun. Untuk apa ? Virtual environment pada Django berguna sebagai tempat kita menginstall Django dan beberapa dependency aplikasi ini. Jika kita tidak membuat virtual environment maka kita hanya bisa menggunakan 1 versi Django saja dalam suatu komputer. Virtual environment membungkus semua dependency setiap projek pada tempat yang berbeda (sesuai projek / aplikasi masing-masing). Pertama, kamu harus menginstall virtual environment terlebih dahulu :
Windows :
C:\Users\ridoansaleh>pip install virtualenvLinux / OSX :
$ sudo pip install virtualenvSetelah virtual environment berhasil di-install, coba cek pada CMD / terminal dengan menuliskan :
Windows / Linux / OSX
virtualenv --versionJika sudah berhasil di-install, maka akan ada versi virtual environment yang di-print pada CMD / terminal mu.
Saatnya, membuat virtual environment untuk projek kita dengan nama env.
virtualenv envSetelah virtual environment berhasil dibuat, maka aktifkan terlebih dahulu agar bisa dipergunakan.
Windows
C:\Users\ridoansaleh\Documents\DjangoMusic>env\Scripts\activateLinux / OSX
$ source env/bin/activateSetelah virtual environment sukses diaktifkan, maka akan terlihat seperti berikut :
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>atau (env) $ DjangoMusic
2. Menginstall Django
Langkah kedua adalah menginstall Django versi 1.8.
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip install Django==1.8Setelah berhasil menginstall Django, mari kita buat file pada root folder (DjangoMusic) dengan nama requirements.txt. Di sinilah nantinya semua dependency aplikasi atau projek kita terdaftar. Cara membuat daftar dependency itu bisa otomatis, yaitu :
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip freeze > requirements.txt3. Membuat Projek Django
Masih pada folder DjangoMusic, mari kita buat sebuah projek Django dengan nama website.
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>django-admin startproject websiteSekarang, kita sudah mempunyai sebuah projek dengan nama website yang di dalamnya terdapat apps dengan nama yang sama yaitu website dan file manage.py. Di dalam apps website itu akan terdapat file seperti: __init__.py, urls.py, settings.py, dan wsgi.py. Untuk mengetahui kegunaan file-file tersebut, kamu bisa lihat di sini.
4. Membuat apps Music
Setelah sebelumnya berhasil membuat projek Django, mari kita membuat apps di dalam folder website dengan nama music.
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py startapp music Jangan lupa menambahkan apps music ke dalam file settings.py di DjangoMusic/website/website/settings.py :
Selanjutnya, lakukan migrations untuk medeteksi perubahan pada model dan membuat tabel pada database 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, kita akan membuat pengaturan url pada file urls.py di folder apps website. Url inilah yang akan menghubungkan apps utama (website) kita dengan apps music.
6. Membuat URL pada music
Sekarang waktunya untuk membuat url pada apps music. Jika file urls.py belum ada pada folder music, silahkan dibuat terlebih dahulu. Pada folder music inilah kita nantinya lebih banyak ngoding. Ayo tambahkan kode berikut di file urls.py :
7. Membuat Model pada music
Jika file models.py belum ada di folder music, silahkan ditambah dulu. Jika sudah ada, mari menambahkan kode berikut ke file tersebut :
8. Membuat Form pada music
Pada Django terdapat sebuah class yang bisa membuat / generate form secara otomatis sesuai dengan Model yang kita definisikan ke dalam HTML atau template. Buatlah sebuah file dengan nama forms.py di folder music dan isikan kode berikut ini :
9. Membuat Views pada music
File views.py berguna sebagai penghubung antara url dengan tampilan / file HTML. Melalui views, kita juga bisa mengambil data dari database untuk ditampilkan ke halaman tertentu. Pada konsep pemrograman MVC (Model View Controller), View pada Django berperan sebagai Controller. Tambahkan kode berikut ini pada file views.py :
10. Menginstall Django Widget Tweaks
Jika kita menggunakan form built-in dari Django, maka kita tidak bisa menambahkan class css pada field-field inputannya (input[text], input[number], select, textarea, dsb). Untuk mengatasi masalah ini, maka ada suatu library Django yang bisa kita gunakan yakni : Django Widget Tweaks. Cara menginstallnya cukup mudah :
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>pip install django-widget-tweaksSetelah berhasil silahkan ditambahkan widget_tweaks di file settings.py pada folder website :
INSTALLED_APPS = [
...
'widget_tweaks',
...
]11. Membuat Template pada music
Template adalah file-file HTML yang akan kita gunakan untuk menampilkan data pada pengguna aplikasi. Secara default, Django mengenali folder templates sebagai direktori untuk HTML. Sehingga kita perlu membuat folder templates pada apps music. Di dalam folder templates, kita tambahkan folder baru dengan nama music. Kenapa ? supaya jikalau projek kita semakin kompleks tidak ada penamaan file HTML yang bertabrakan atau sama. Ini adalah best practice dalam pemrograman Django.
Pada folder music (lihat gambar di atas) terdapat 3 file, yaitu : index.html (halaman utama), edit.html (halaman edit), dan song_form.html (form input lagu). Berikut kode yang terdapat dalam file-file tersebut :
a. index.html
b. edit.html
c. song_form.html
12. Membuat Folder Static files
Folder static adalah tempat penyimpanan file statik seperti css, js, gambar, dan lain-lain. Sama halnya dengan templates, Django juga mengenali folder dengan nama static sebagai default untuk penyimpanan file statik. Ayo kita buat folder static dalam apps music.
a. Font Awesome bisa di-download di sini.
b. Gambar gitar dan microphone bisa di-download di sini.
c. Bootstrap v4.0 dan JQuery bisa di-download di sini.
d. Kode file app.css
d. Kode file app.js
13. Menjalankan Aplikasi
Setelah semua kode telah ditulis, bootstrap telah di-download, dan hal lainnya sudah selesai dilakukan, maka langkah terakhir adalah menjalankan aplikasi. Caranya cukup simple :
Lakukan migrations untuk mendeteksi perubahan pada models.py
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py makemigrationsLakukan migrate untuk membuat tabel pada database SQLite sesuai dengan daftar aplikasi yang ada di settings.py (INSTALLED_APPS).
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py migrateSelanjutanya adalah menjalankan server.
(env) C:\Users\ridoansaleh\Documents\DjangoMusic>website>python manage.py runserver
Performing system checks...System check identified no issues (0 silenced).
January 28, 2018 - 21:45:01
Django version 1.8, using settings 'website.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
Setelah server berhasil dijalankan berarti kamu sudah berhasil membuat suatu aplikasi. Untuk lebih mengerti konsep pembuatan aplikasi dengan Django, kamu perlu meluangkan waktu membaca dokumentasi mereka di sini. Jangan lupa untuk membuka http://127.0.0.1:8000/ di browser mu. Aplikasi akan persis seperti gambar di atas (sebelumnya).
Source Code Aplikasi
Setelah membaca tutorial yang relatif panjang ini, mungkin di antara teman2 ada yang tidak sukses menjalankan aplikasinya. Salah satu penyebabnya mungkin ada bagian tutorial yang lupa dibaca sehingga file kodingan-nya tidak lengkap atau masalah lainnya. Oleh sebab itu, saya telah mempublikasikan projek ini di Github agar teman2 dapat mengaksesnya. Silahkan cek di sini.
[ Update: source code-nya sudah sedikit berbeda karena sudah ditambahkan halaman login dan sign up ]
Demo Aplikasi
Bagi kalian yang penasaran dengan hasil akhir dari aplikasi kita ini, mari cek di Music-App. Aplikasi tersebut memang sengaja saya hosting di Python Anywhere. Cara hosting-nya relatif mudah, cukup dengan meng-upload file secara manual atau kloning langsung dari repositori Github kamu.
Kesimpulan
Setelah mempelajari tutorial yang relatif panjang ini, kalian diharapkan sudah mengerti cara pembuatan aplikasi berbasis CRUD menggunakan framework Django v1.8. Jika ada sesuatu yang ingin kamu tanyakan mengenai isi tutorial ini, silahkan tinggalkan komentar di bawah! Kritik dan saran juga boleh disampaikan. Semoga berhasil membuat aplikasi Django pertama Anda.
Komentar
Posting Komentar
This Message