Tag Archives: bootstrap

Menerapkan Template Core UI dengan Framework Laravel

Salah satu kemudahan menggunakan framework atau library yang sedang naik daun, adalah dukungan yang banyak ditemukan di Internet. Begitu pula dengan Laravel, tidak sulit menemukan tutorial, kursus atau sumber daya lainnya baik dalam bentuk artikel maupun video yang membahas framework ini. Keuntungan lainnya adalah banyak ditemukan library lain yang sudah disesuaikan dengan framework Laravel ini, silakan search pada Github, banyak bertebaran package yang bisa digabungkan dengan framework Laravel

Bootstrap, sebagai CSS Framework yang juga banyak dipakai di dunia pengembangan web, juga memiliki banyak sekali varian theme dan template hasil pengembangan para developer, mulai yang gratis hingga berbayar. Salah satu template berbasis Bootstrap yang memiliki tampilan dan komponen yang menarik adalah Core UI. Core UI ini memiliki varian Free (Gratis dengan batasan tertentu) dan PRO (Berbayar dengan fitur penuh).Kali ini, saya akan coba menuliskan cara menerapkan template Core UI dengan Framework Laravel. Project ini menggunakan instalasi project baru, tidak menggunakan project Laravel yang sudah ada

Continue reading

Autocomplete dengan typeahead.js dan bootstrap

Prolog:

Rasanya sudah lama sekali tidak menulis di blog ini, entah karena sibuk beneran atau sibuk yang dibuat-buat. Akhirnya nemu juga bahan buat ditulis lagi dan waktu untuk menulis

Autocomplete adalah salah satu fitur yang sering dipakai ketika kita membuat sebuah aplikasi berbasis web. Dibandingkan dengan menggunakan select / dropdown biasa untuk memilih item, menggunakan autocomplete adalah pilihan yang tepat menurut saya, dikarenakan apabila menggunakan dropdown dan daftarnya sudah sangat panjang, akan sedikit menyulitkan untuk memilih item dari dropdown tersebut.

Sebelumnya saya sudah pernah menulis tentang autocomplete menggunakan jquery-ui dan ternyata sudah 5 tahun berlalu dari tulisan tersebut. Karena sekarang tren yang sedang berkembang dikalangan front-end web developer adalah menggunakan bootstrap, kita akan coba terapkan itu dalam fitur autoomplee ini. Dan twitter, selain mengembangkan bootstrap juga membuat sebuah library untuk fitur autocomplete ini, dengan nama typeahead.js Continue reading

Flatly Bootstrap Web Blog Themes (Iseng)

shot-20150424-1671-1rq3ho6

Jadi hasil iseng kemaren adalah memadupadankan bootstrap dengan sedikit css yang asal-asalan sehingga menjadi sebuah template. Bisa dipake buat webblog kalo mau, bebas aja sih mau diapain. Ini juga baru satu halaman doank lho ya 

Halaman demo nya ada di sini dudu.web.id/demo/weblog

Menggunakan Bootstrap Framework dengan tema flatly membuat kesan flat pada elemen-elemen yang ada. Kemudian icon-iconnya pake font-awesome (rencananya sih gitu, tau deh entar). Semoga bisa nambahin fitur ini dan itu kalo ada waktu selo lagi.

Oh ya, untuk CSS dan JS nya (Bootstrap, Jquery, Font-Awesome) pake CDN semua, jadi ga ikut di donlot, biar hemat space haha.

Source code ada di https://github.com/dwijonarko/weblog-template

Membuat template layout dengan Twig serta Twtitter Bootstrap pada Slim Framework

http://www.informulate.net/wp-content/uploads/2013/02/symfony-twitter-bootstrap.jpg

http://www.informulate.net/wp-content/uploads/2013/02/symfony-twitter-bootstrap.jpg

Setelah pada artikel sebelumnya kita membahas tentang memasang twig pada framework slim, pada artikel ini akan saya tuliskan cara pembuatan templating menggunakan twig dan slim framework.

Templating akan sangat berguna dalam membuat layout aplikasi, dengan templating kita tidak perlu lagi melakukan “copy-paste” seluruh halaman web. Kita cukup membuat sebuah layout halaman inti yang memuat struktur html dasarnya, memanggul file css dan javascript. Selanjutnya halaman yang berisi data yang sering berubah kita pisahkan dari halaman layout tersebut. Sehingga jika suatu saat kita akan mengganti layout tidak perlu mengubah seluruh halaman yang sudah kita buat. Dalam artikel ini nantinya pengaturan halaman akan menggunakan twitter bootstrap untuk mempermudah dan memperindah tampilan yang akan dibuat.