JohnHendri Django Bootstrap
CARA MENGGUNAKAN BOOTSTRAP PADA DJANGO
John Hendri
john.hendri@raharja.info :: http://ilmuti.org/author/john-hendri/
Abstrak
Bootstrap dan Django sama-sama framework yang sangat banyak digunakan oleh
kalangan web developer, Bootstrap menangani masalah tampilan sebuah web atau kita
bisa sebut front-end sedangkan Django adalah web framework yang menangani masalah
back-end sebuah web. Masing-masing framework ini sama-sama mempunyai kelebihan
sehingga jika kita membangun sebuah website menggunakan perpaduan kedua
framework ini akan mendapatkan hasil yang sangat baik dan memuaskan, juga
mempermudah atau memperingkas kerja developer. Ketika kita berbicara mengenai
layout sebuah website, warna yang menarik serta menginginkan web yang responsive
tentu Boostrtap menangani semua keinginan kita dan tidak lengkap juga kalau sebuah
website yang dinamis tidak mempunyai database, Django tentu akan memberikan
halaman admin yang sudah tersedia ketika kita menginstall framework ini.
Kata Kunci: Anti virus, SMADAV, Operating System, Install
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pendahuluan
Bootstrap pertamakali dikembangkan oleh Mark Otto dan Jacob Thornton pada pertengan
tahun 2010 di Twitter. Bootstrap dikembangkan secara open source dengan lisensi MIT.
Banyak sekali class-class serta plugin javascript yang di sediakan oleh bootstrap untuk
membantu memudahkan kita mendeploy sebuah tampilan setiap halaman website, ini
membuat bootstrap front-end framework yang banyak di gunakan di dunia. Django tentu
juga framework open source yang dikembangkan berdasarkan bahasa Python oleh Django
Software Foundation yang di desain untuk menangani back-end sebuah web seperti
database, security, dan banyak fitur-fitur lainnya sehingga website kita bisa dinamis.
Dengan kita mempelajari kedua framework ini kita bisa membangun website yang kita
inginkan seperti website popular lainnya, tentunya banyak setingan yang akan kita rubah,
walau demikian class-class serta function-function yang sudah disediakan oleh Django
memudahkankan kita untuk bekerja, sangat menarik jika kita lebih mendalami framework
Django ini.
Komunitas – komunitas local sering mengadakan workshop atau sekedar kopdar sehingga
sangat membantu kita jika dalam kesulitan, bahkan organisasi Django international lah
yang membuat Django berkembang pesat hingga saat ini. Saat penulis membuat artikel
ini Django sudah versi 1.11.1. Django sendiri memang berbasis bahasa python namun
jika kita belum mengerti atau belum menguasai bahasa python janganlah khawatir.
Django sendiri bisa kita pelajari karena syntax yang di sajikan sangatlah sedikit dan
ringkas, sehingga kalau kita sering berlatih kita akan memahami bahasa pyton dengan
sendirinya.
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pembahasan
Pada artikel sebelumnya penulis sudah menjelaskan membuat sebuah project hingga
menggunakan admin interface pada Django, kali ini kita akan membuat view atau
tampilan sebuah web menggunakan framework css yaitu bootstrap, sehingga membuat
tampilan lebih menarik dengan menggunakan bahasa html5 dan css3.
Untuk pertama buatlah pada project kita buatlah sebuah directory yang berjudul templates
seperti yang terlihat pada gambar dibawah
Pada directory ini kita akan menempatkan file html kita, kemudian buat file html yang
kita inginkan sebagai tampilan web kita seperti pada gambar, dari gambar diatas kita coba
untuk membuat base.html untuk view dasar atau tampilan home sebuah web disini kita
akan membuat navbar
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
(Sambungan gambar diatas)
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pada file base.html ini kita akan menerapkan Bootstrap CDN dengan mengcopy link dari
website resmi bootstrap
Dengan script html diatas akan menghasilkan navbar sederhana seperti dibawah ini
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Sebelumnya harus kita import juga di view.py seperti pada gambar
Tak lupa juga kita harus kita import juga di view.py seperti pada gambar
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Penutup
Dibutuhkan banyak latihan dan varisi penulisan yang berbeda untuk mencapai serta
mengasah hingga mencapai tahap piker yang lebih baik dan logika yang matang untuk
menciptakan sesuatu, karena itu kita harus kreatif dant tidak tergantung pada contohcontoh yang ada pada saat ini, teruslah menuntut ilmu dengan banyak literature yang ada
serta banyak-banyaklah sharing dengan teman-teman sehingga mendapatkan pengalaman
yang lebih baik.
Referensi
Pengalaman pribadi
Biografi
JOHN HENDRI (John)
Pria ‘Minang’ yang lahir dikota kecil Sawahlunto (Padang). Pekerja keras,
FOTO
suka tantangan dan menyukai hal-hal baru seputar technology. Bekerja di
Perusahaan Logistic dan sangat serius dalam menuntut ilmu di perguruan
tinggi daerah Tangerang mengambil jurusan Teknik Informatika konsentrasi
Software Enginer. Saat ini dalam proses pembelajaran bahasa python., FB john hendri.
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
John Hendri
john.hendri@raharja.info :: http://ilmuti.org/author/john-hendri/
Abstrak
Bootstrap dan Django sama-sama framework yang sangat banyak digunakan oleh
kalangan web developer, Bootstrap menangani masalah tampilan sebuah web atau kita
bisa sebut front-end sedangkan Django adalah web framework yang menangani masalah
back-end sebuah web. Masing-masing framework ini sama-sama mempunyai kelebihan
sehingga jika kita membangun sebuah website menggunakan perpaduan kedua
framework ini akan mendapatkan hasil yang sangat baik dan memuaskan, juga
mempermudah atau memperingkas kerja developer. Ketika kita berbicara mengenai
layout sebuah website, warna yang menarik serta menginginkan web yang responsive
tentu Boostrtap menangani semua keinginan kita dan tidak lengkap juga kalau sebuah
website yang dinamis tidak mempunyai database, Django tentu akan memberikan
halaman admin yang sudah tersedia ketika kita menginstall framework ini.
Kata Kunci: Anti virus, SMADAV, Operating System, Install
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pendahuluan
Bootstrap pertamakali dikembangkan oleh Mark Otto dan Jacob Thornton pada pertengan
tahun 2010 di Twitter. Bootstrap dikembangkan secara open source dengan lisensi MIT.
Banyak sekali class-class serta plugin javascript yang di sediakan oleh bootstrap untuk
membantu memudahkan kita mendeploy sebuah tampilan setiap halaman website, ini
membuat bootstrap front-end framework yang banyak di gunakan di dunia. Django tentu
juga framework open source yang dikembangkan berdasarkan bahasa Python oleh Django
Software Foundation yang di desain untuk menangani back-end sebuah web seperti
database, security, dan banyak fitur-fitur lainnya sehingga website kita bisa dinamis.
Dengan kita mempelajari kedua framework ini kita bisa membangun website yang kita
inginkan seperti website popular lainnya, tentunya banyak setingan yang akan kita rubah,
walau demikian class-class serta function-function yang sudah disediakan oleh Django
memudahkankan kita untuk bekerja, sangat menarik jika kita lebih mendalami framework
Django ini.
Komunitas – komunitas local sering mengadakan workshop atau sekedar kopdar sehingga
sangat membantu kita jika dalam kesulitan, bahkan organisasi Django international lah
yang membuat Django berkembang pesat hingga saat ini. Saat penulis membuat artikel
ini Django sudah versi 1.11.1. Django sendiri memang berbasis bahasa python namun
jika kita belum mengerti atau belum menguasai bahasa python janganlah khawatir.
Django sendiri bisa kita pelajari karena syntax yang di sajikan sangatlah sedikit dan
ringkas, sehingga kalau kita sering berlatih kita akan memahami bahasa pyton dengan
sendirinya.
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pembahasan
Pada artikel sebelumnya penulis sudah menjelaskan membuat sebuah project hingga
menggunakan admin interface pada Django, kali ini kita akan membuat view atau
tampilan sebuah web menggunakan framework css yaitu bootstrap, sehingga membuat
tampilan lebih menarik dengan menggunakan bahasa html5 dan css3.
Untuk pertama buatlah pada project kita buatlah sebuah directory yang berjudul templates
seperti yang terlihat pada gambar dibawah
Pada directory ini kita akan menempatkan file html kita, kemudian buat file html yang
kita inginkan sebagai tampilan web kita seperti pada gambar, dari gambar diatas kita coba
untuk membuat base.html untuk view dasar atau tampilan home sebuah web disini kita
akan membuat navbar
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
(Sambungan gambar diatas)
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pada file base.html ini kita akan menerapkan Bootstrap CDN dengan mengcopy link dari
website resmi bootstrap
Dengan script html diatas akan menghasilkan navbar sederhana seperti dibawah ini
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Sebelumnya harus kita import juga di view.py seperti pada gambar
Tak lupa juga kita harus kita import juga di view.py seperti pada gambar
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Penutup
Dibutuhkan banyak latihan dan varisi penulisan yang berbeda untuk mencapai serta
mengasah hingga mencapai tahap piker yang lebih baik dan logika yang matang untuk
menciptakan sesuatu, karena itu kita harus kreatif dant tidak tergantung pada contohcontoh yang ada pada saat ini, teruslah menuntut ilmu dengan banyak literature yang ada
serta banyak-banyaklah sharing dengan teman-teman sehingga mendapatkan pengalaman
yang lebih baik.
Referensi
Pengalaman pribadi
Biografi
JOHN HENDRI (John)
Pria ‘Minang’ yang lahir dikota kecil Sawahlunto (Padang). Pekerja keras,
FOTO
suka tantangan dan menyukai hal-hal baru seputar technology. Bekerja di
Perusahaan Logistic dan sangat serius dalam menuntut ilmu di perguruan
tinggi daerah Tangerang mengambil jurusan Teknik Informatika konsentrasi
Software Enginer. Saat ini dalam proses pembelajaran bahasa python., FB john hendri.
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit),
dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org