Tag Archives: bootstrap

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.