CodeIgniter-Bootstrap Tutorial : Contoh Aplikasi Daftar Pemilih Tetap Dengan CodeIgniter dan Bootstrap

Haaaahhh…akhirnya bisa nongol lagi di blog kesayangan saya ini. Minggu-minggu yang terlewatkan dengan kesibukan yang tidak seperti biasanya. Banyak ilmu baru, pengalaman baru, gadget baru, dan pacar masih tetap yang kemarin ;). Kerjaan juga nambah banyak, dan ketika kemarin saya pulang ke bali untuk melaksanakan upacara, ibu saya pun bertanya tentang skripsi dan kapan saya akan wisuda. Entah kenapa, saya seketika merasakan kembali ke masa-masa jomblo dulu. Satu hal yang saya rasakan, ditanyakan tentang kapan wisuda dan kapan punya pacar itu sama-sama ngeri gimana gitu :p. Dengan entengnya saya menjawab, kalau skripsi saya sedang proses, padahal aslinya belum terjamah sama sekali. Tinggal menunggu waktu dan mood yang tepat untuk menjamah skripsi beserta laporannya, apalagi kalo pake sistem kebut semalam (#haha).

Dan minggu ini saya mulai beraksi dengan gadget baru saya, yuppzzzz… si ipin4. Yaw minimal lihat-lihat UI-nya dulu dan nyobain objective C. Nah, ngomong-ngomong soal produk apple, saya pengen ketawa ngakaks gara-gara beberapa hari yang lalu pacar saya cerita kepada saya. Kata dosen instalasi komputer dan dosen PTI, laptop apple itu gak bagus, komponen-komponennya pake buatan perusahaan lain. Sumpahhh dah, sampe rumah saya cuma bisa ketawa sambil geleng-geleng. Mungkin beliau-beliau yang bilang demikian belum tau juga, kalo produk-produk laptop brand lainnya juga memakai komponen buatan perusahaan lain. Nah, saya jadi bingung, artinya laptop brand lainnya juga gak bagus dong?? Dan yang bikin saya tambah geleng-geleng, yang ngomong kalo laptop apple itu gak bagus, dulu mengharapkan juga kalo semua dosen bisa pake Macbook Air :ngakaks.

Yaw udah lah, daripada ngurusin yang begituan, mending kita isi dengan belajar sesuatu yang baru. Nah, kali ini saya akan membagikan contoh aplikasi sederhana yang menggunakan Twitter Bootstrap untuk tampilan view-nya. Daleman aplikasinya masih tetap pakai CodeIgniter. Aplikasi ini adalah sebuah aplikasi untuk menampilkan daftar pemilih tetap untuk keperluan pemilihan umum daerah. Tingkatnya saya buatkan hanya sebatas provinsi. Data-data pemilih tetap dapat di-import dari file dengan format (.xls) dengan ketentuan tertentu. Untuk di halaman depan untuk para pemilih, hanya dapat melihat data dirinya sudah masuk atau belum. OK deh, biar gak banyak lala-lele, langsung aja dicekibrot skrinsutnya di bawah ini :

Tampilannya sederhana, maklum saya juga baru kali ini ngoprek Twitter Bootstrap. Kelebihannya yaw tampilannya memang responsive di berbagai ukuran layar. Jadinya cocok bagi yang lagi kurang mood untuk membuat tampilan versi mobile untuk device seperti smartphone dan tablet ;). Seperti biasa, filenya saya upload di gudang download. OK deh, semoga aplikasi sederhana ini bisa bermanfaat untuk rekan-rekan yang sedang belajar menerapkan Twitter Bootstrap di aplikasi yang dibangun dengan CodeIgniter.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like]
Download Aplikasi
[/to_like]

132 comments

  1. Iyon Reply

    Bro, password adminnya diencrypt pake apa? bukan MD5 yah. Oia, tolong data perorang (Per DPT) dikasih fotonya dong (No image) aja deh. plzzzz….

    • Gede Lumbung Post authorReply

      pake md5, cuma saya gabungkan dengan sebuah string, cek codingan di file login, saya gabungkan dengan sebuah string yg bisa diganti dari file config.php

      kalo menambahkan foto, itu lain cerita lg, kudu donasi brow, masak yg ini udah gratis, trus nambah fitur ente gak mau bayar sih 🙂

  2. solah Reply

    Mas…maaf yang harus di setting apa aja ya.? Aku dah atur url dari file config.ph dan nama database di database.php tapi data yg ada di database tidak keluar kecuali nama kabupatennya. Dibantu ya mas!

  3. afy Reply

    maaf mas mau nanya kalau mau tambah cetak laporan DPT gmn soal maklum pemula tlong pencerahannya…

  4. dey Reply

    maaf bli, mohon pencerahan. setelah sy ekstrak lalu diletakkan di xampp/htdocs/kpu, tidak ada menu login nya, malah langsung tampil pencarian, tampilanya tidak seperti skrinsut, cara pengaturannya bgmana?

  5. dion Reply

    halaman login admin nya apa ya?
    mas ada nomer telp kah? ada yang mau saya tanyakan, terimakasih

  6. Itoel Reply

    Bung…di wampp kok ng jalan ya…? konfigurasi nya gmn kl CI? pd hal aplikasi lain jalan.
    Trims byk sblmnya

  7. fitri Reply

    mas klo mau nambahin peta pake API google map tau ga caranya ?? butuh banget ni tutorialnya, udah nyari” ga dapet juga.. Makasih 🙂

  8. ananda Reply

    bli, hebat banget.

    aku mau tanya kalau syntak : $this->config->item[‘nama_instansi’] dst
    sebelumnya dibuat script untuk mendefinisikannya gimana

    txs,
    keep coding

    • h3ndrock Reply

      Kalau dilihat sintaknya, bisa dilihat di file application/config/config.php.

  9. ucaimut Reply

    KK,, ijin download ya sama nti di edit”.. lagi mo belajar tentang Frame work Codeigniter + Bootstrap cocok banget nih dapet disini, thQ,-

  10. Afi Reply

    mas mau nanya lg ini kok klau input data kecamatan, desa/kelurahan nga bs mohon pencerahannya

  11. Afi Reply

    mas sy dah input kecamatan, kelurahan/desa trus sy simpan tampil di layar seperti To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier. nah bagaimana cara mengatasi, mohon pencerahannya sebelumx trim mas…

  12. Nugo Reply

    blik kenapa yaa pas nambah data, lalu di klik simpan malah muncul konfirmasi g jelas. trus kalo d cancel malah nge-blank gitu. tlg infona. thks

  13. Afy Reply

    mas bli tlong link untuk download sistem informasi akademik sekolah smp berbasis web

  14. Nugo Reply

    mas sy dah input kecamatan, kelurahan/desa trus sy simpan tampil di layar seperti To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier. nah bagaimana cara mengatasi, mohon pencerahannya sebelumx trim mas…

  15. Edi Santoso Reply

    mas bro koq dropdownnya punya q gag bis diakses ya?dulu waktu baru diinstall bisa diakses, thank’s bro

    • Gede Lumbung Post authorReply

      jquery nya ngambil yg versi online brow, kalo offline otomatis dropdown gak bisa, dropdownnya pake plugin dropdown jquery

      • Nugo Reply

        iya sama aq juga, udah coba d chrome, firefox, IE 8,9,10 dropdownnya g muncul padahal udah online. klo jquery versi berapa klo offline??????

  16. asep Reply

    Maaf Mas Bro Mau tanya ni ko pas penambahan Kecamatan sama Kelurahan engga mau tampil di layar data kecamatannya padahal sudah pake google chrome

  17. ari Reply

    aduh..ngeliat blog ini luar biasa. kayak akan ilmu dan file freeware full source code. Semoga mas gede lancar rejekinya.

    #masih jauh perjalanan.
    #gw mau ngebut ah belajar programming.

  18. Sucipto Reply

    Mas gedelumbung yang baik hati.. 😀

    mau tanya, itu kode bootstrapnya kok jadi warna biru?? apa itu pake fitur customize dari situs bootstrapnya ya? kalo boleh tau yang di ganti bagian mana aja itu mas?

  19. Afy Reply

    mas aku dah coba pake chrome tapi hasil sama tetap blank gmn solusix. mohon pencerahannya

  20. Edi Santoso Reply

    oke mas bro dah bisa, pake plug in jquery.
    oya q mau juga pasang sama datepicker, tp gmn ya konfigurasinya?
    nih untuk script nya :

    terus klo yang ini ditaruh dimana? file datepicker.js apa dmn?

    $(‘#datepicker’).datepicker

    mohon pencerahannya, Thank’s

  21. rikoy Reply

    ngga bisa masuk ke /app_admin
    ada error:

    Error Number: 1048

    Column ‘captcha_time’ cannot be null

    INSERT INTO `captcha` (`captcha_time`, `word`) VALUES (NULL, NULL)

    Filename: /Applications/XAMPP/xamppfiles/htdocs/kpu/controllers/app_admin.php

    Line Number: 69

    kenapa ya?tolong dong.. 🙂

  22. h3ndrock Reply

    Koq tidak sesuai dengan judulnya yang ada kalimat tutorial? Ini sih membagi-bagi kan contoh aplikasi. Mungkin admin harus berhati-hati dengan kalimat ‘tutorial’, atau apakah ini yang sering diajarkan di kampus-kampus? Bagikan kopian (contoh aplikasi) dan mahasiswa disuruh belajar sendiri. Kalau tanggapan komentar dianggap tutor (bimbingan), yah terima kasih lah.

    • Gede Lumbung Post authorReply

      untuk bung h3ndrok, makasi banget atas komennya yang sangat membangun
      menurut saya pribadi, tutorial itu bisa bermacam-macam
      bisa berupa video, langkah-langkah, bahkan contoh yang sudah jadi
      dari contoh yang sudah jadi, kita belajar secara mandiri utk melihat bagaiman alur dari aplikasi berjalan
      dan menurut saya pribadi karena saya sudah merasakan, itu lebih efektif, daripada memberikan tutorial yg berupa langkah-langkah, seperti kebanyakan buku-buku yang beredar di toko buku
      saya cuma menekankan, bagaimana caranya belajar secara mandiri dan langsung ke studi kasus
      mengenai kalimat tutorial, selama judul dan isi dari postingan tidak melenceng, menurut saya sah-sah saja, namanya juga kita berkutat di dunia nge’Blog, dan sambil belajar SEO
      kalau ada pertanyaan, saya sudah berikan email saya, jadi rekan-rekan yang ingin bertanya, bisa langsung bertanya via email

      salam
      Gede Lumbung

  23. h3ndrock Reply

    Terima kasih atas tanggapan komentar saya. Saya seorang pengajar di salah satu PTN di Pontianak. Tadinya saya berfikir bahwa komputer (aplikasi) itu mudah dipelajari bahkan mudah dibuat (aplikasinya) dengan sedikit mau membaca help (F1) atau User Guide-nya. Namun anggapan itu sirna dengan sendirinya begitu mengetahui banyak orang Indonesia (maaf mahasiswa) yang tidak punya sifat mandiri hingga harus dituntun (tidak semua orang bisa belajar secara otodidak) terlebih dengan latar belakang pendidikan SLTA di Kalimantan Barat (Indonesia?). Yang menjadi pertanyaan saya atau lebih tepatnya pernyataan, Mampukah kita mengetahui semua latar belakang pembaca kita. Kadang saya perhatikan anda tidak merespon pertanyaan yang mungkin menurut anda kadarnya ‘sepele’ atau mudah. Tapi lagi-lagi menurut yang berkomentar mungkin itu masalah yang serius. Saya hanya kasihan dengan anda, bagaimana membuat keputusan menjawab atau membiarkan pertanyaan dari pembaca. Namun bagaimanapun saya salut kepada Anda, yang telah bersuahpayah membuat blog yang sangat bermutu ini. Saran saya bagi para pembaca lainnya mungkin kalau ingin bertanya usahakan dulu tanya ke om gugel atau dicari dahulu permasalahannya dan jika masih tidak ketemu mungkin bisa bertanya langsung ke Mas Gede, karena se-umur saya (lahir 1967) saya juga bersusah payah mencari info tentang materi ini langsung dari sumber aslinya di twitter.github.com. Ok, selamat berkarya.

    • Gede Lumbung Post authorReply

      makasi bang atas saran dan bantuannya utk ikut membantu pengunjung lain yg bertanya dan belum sempat saya jawab komentarnya
      mungkin karena keterbatasan waktu, jadi saya jarang bisa balas komentar2 yang ada
      saya sangat senang, ada pengunjung seperti mas h3ndrock yg ikut membantu memberikan solusi atas pertanyaan yg diajukan oleh pengunjung lain
      dan saya sangat berharap, pengunjung disini bisa saling membantu untuk berdiskusi

  24. Khaer Ansori Reply

    wah abang yang satu ini emang kurang ajar pinter nya.
    ane aja baru belajar bootstrap 2 hari kemarin.
    eh udah nongol aja postingan ini.
    yang gak habis pikir tu ada aja ide bikin aplikasi nya.
    mantap dah om.
    keep going. 😀

  25. udest Reply

    bingung cara makenya gan, udh dicopy ke htdocs, udh instal db_kpu jg, pemanggilan di browser gimana gan.?

  26. viovios Reply

    mantabs gan… request dong mas cara untuk bikin framework php sendiri…

  27. iqbal_hnn@yahoo.co.id Reply

    mas bro artinya script ini apa??

    $pilih[‘id’] = $this->uri->segment(3);

  28. Kurniawan Reply

    Mas gedelumbung yang baik hati dan selalu berbagi ilmu,,
    sbelumnya sya bertrima kasih,berkat program anda,sya bisa lulus prpl
    ini sya sdang mncoba yang kpu,,
    sya mau tnya mas,
    kenapa pada saat di panggil di browser langsung pada pncrian data pemilih mas?
    dan knapa navbar-nya tidak muncul?
    terima kasih mas gede
    semoga ilmu yang anda bagi selalu bermanfaat dan mndapatkan pahala dari Tuhan,,amminn :))

  29. Achmad Hadi Kurnia Reply

    mas o tampilannya plain yah diaya. trus di halaman awal tidak ada daftar pemilihnya. tidak ada gambar2 dan warna. cssnya gak load
    mohon pencerahannya

  30. Achmad Hadi Kurnia Reply

    teryata di file konfignya mas. saya hapus saya karakter di antara petik satu $config[‘base_url’] = ”;
    soalnya saya pake subdomain di xampp nya 😀

  31. Achmad Hadi Kurnia Reply

    mass maaf ada error lagi. chaptanya kok gak bisa muncul

    • Gede Lumbung Post authorReply

      tabel captcha belum ada
      atau folder captcha permisionnya yg bermasalah, set chmod 777 kalo pake linux atau mac

  32. Guntur Reply

    mas gede lumbung . yang baik hati , baru pertama aku masuk kesini dan langsung woww !!

    tapi sudah aku donload , dan sudah mempraktekannya . namun saat menjalankan terjadi erorr . Seperti ini :

    Unable to connect to your database server using the provided settings.

    Filename: C:\AppServ\www\kpu\system\database\DB_driver.php

    Line Number: 124

    aku pake , appserv . trims mas gedelumbung dear gun .mohon balasan dan pencerahannya , karna baru blajar dari 0 putul nih ,. hehe

      • Guntur Reply

        Cara nginstallnya bagaimana mas ? apakah ada file yang harus di instal . untuk file sql nya sudah aku laksanakan dengan baik .

        namun saat membuka terjadi begitu terus .

        salam gede , thanks responya . masih butuh banyak pencerahan nih . kurang asupan soalnya 🙂

  33. Kos Reply

    Bli’ Bulan depan Bali Pilkada Gubernur kayanya kepake nehh program DPT..?

  34. Richard Reply

    Bro, yang diatur apa aja sih..??
    gua udah import databasenya, terus udah samain nama file dengan nama baseurl yang di config.php..
    tapi tetep aja File Not Found..
    Tolong Pencerahannya bro..

    But, Thanks Udah berbagi Ilmu..
    mudah-mudahan selalu sukses bro..

  35. bejo Reply

    bootstrap apa ya gan? ntar ane searching di mbah google aja deh 😀

  36. rasyusud\f Reply

    bli gede yang baik hati
    ini CI versi berapa ya klo boleh tau?

  37. fadillah Reply

    Baik banget bang… makasih yah bang sharenya…
    jarang banget ada programmer mau share programnya..
    ijin download.. 🙂 thanks a lot..

  38. jaringan santri Reply

    mas klo jqurey nya mo offline code mana saja yg harus d rubah?

  39. donie Reply

    mas setelah aku instal ..ketika di ketikan url nya kok blank yah..? eng muncul halaman index nya..mohon pencerahan

  40. nugroho Reply

    untuk mengubah warna menu navbar jadi biru gimana caranya??

    di file css yg mana? bagian ap mas???

  41. dimas Reply

    asslkm,maaf mas ane mo nanya paswod wat login apaan yah,,??

    mohon share ya pleas

  42. bento Reply

    Mas bos….knapa yah klo pas mau tambah data master kelurahan….untuk field Nama Kecamatan nggak muncul….?….matur tengkyu…..:)

  43. Tom Reply

    Bli,knapa di ane combonya gk mw update ya.? Msal dah milih kabupaten, combo kecamatan tetep kosong.. Smuanya gitu.. Itu gimana bli.?

  44. kurip Reply

    mohon maap pa, ko di browser tidak seperti yang di contoh, semua nya acak2an tidak ada warna & gambar. apa mungkin ada yang perlu disetting lagi. saya pake xampp 1.7.3.
    terima kasih….

  45. Satya Wiguna Reply

    mas kapan negh bikin Aplikasi perhitungan suara Pemilu legislatif nya??

  46. @Ponk_Ivan Reply

    mass kl di cek nota kl mau tambah barang kok tombol tambahkan barang tidak aktif…??

  47. nid Reply

    Error

    SQL query:


    — Database: `db_kpu`

    — ——————————————————–

    — Table structure for table `captcha`

    CREATE TABLE IF NOT EXISTS `captcha` (
    `captcha_id` bigint( 13 ) unsigned NOT NULL AUTO_INCREMENT ,
    `captcha_time` int( 10 ) unsigned NOT NULL ,
    `word` varchar( 20 ) COLLATE latin1_general_ci NOT NULL ,
    PRIMARY KEY ( `captcha_id` ) ,
    KEY `word` ( `word` )
    ) ENGINE = MYISAM DEFAULT CHARSET = latin1 COLLATE = latin1_general_ci AUTO_INCREMENT =73;

    MySQL said: Documentation

    itu tuh kenapa yah mas ? mohon bantuannya…

  48. iqbal Reply

    mohon bantuannya…
    ketika saya input data di tabel yg berbeda dan setelah saya klik simpan muncul

    “Terjadi Kesalahan!
    Field NIK/KTP harus diisi.
    Field Nama harus diisi.
    Field Alamat harus diisi.”

    salanhya dmn?? padahal dah aq isi textboxnya… trus ngedit java srciptnya dmn??
    makasih…

  49. sam Reply

    mas, mohon di detailkan sedikit mengenai combo box nya yang tidak bisa muncul

    saya sudah coba coment coment diatas yang bahas combo ( ex. summon jquery online ataupun ofline dengan versi terbaru malahan) tapi tetap tidak muncul .. apakah dan dimanakah salah nya

    saya sudah coma di beberapa browser

    tks ya

  50. ery Reply

    kak pernah nanganin reservasi hotelnya menggunakan ci gag?

  51. ttitanaya Reply

    saya sudah daftar tp kok g ada link aktivasinya… jadi saya g bisa download,… bantu dong

  52. fauzy Reply

    mohon bantuannya…
    ketika saya input data di tabel yg berbeda dan setelah saya klik simpan muncul

    “Terjadi Kesalahan!
    Field NIK/KTP harus diisi.
    Field Nama harus diisi.
    Field Alamat harus diisi.”

  53. Kuru Reply

    Mantep li bro. sukme sanget…
    Ditunggu tutorial selanjutnya, pang nyidang coding2an hehehe

  54. fahrizal Reply

    ini support di browser apa yach ? di buka ppake firefox gak jalan pas milih kabupaten. kata firebug ===> TypeError: $.browser is undefined

  55. jhony Reply

    Sebelumnya terima kasih banyak atas share ilmunya, jarang-jarang aa orang seperti mas gede ini. SALUT..

    Langsung aja ya mas…

    Saya sudah download aplikasi KPU, CI_SIMPEG, GUDANG dan sudah saya setting semuanya, baik di config, router, database maupun semua yang ada di controller ataupun di models.
    Namun, setiap saya jalankan lewat browser (saya pakai google chrome) LOCALHOST/CI_SIMPEG selalu muncul error :
    “Internal Server Error

    The server encountered an internal error or misconfiguration and was unable to complete your request.
    Please contact the server administrator, admin@localhost and inform them of the time the error occurred, and anything you might have done that may have caused the error.
    More information about this error may be available in the server error log.”

    Bagaimana mas gede solusinya…
    sebelumnya saya ucapkan lagi banyak-banyak terima kasih…

    salam

  56. iswan Reply

    saat dijalankan muncul pesan berikut :
    padahal database udah di upload
    mohon arahan mas…
    makasih

    A PHP Error was encountered

    Severity: Notice

    Message: Only variable references should be returned by reference

    Filename: core/Common.php

    Line Number: 257

  57. permana Reply

    A PHP Error was encountered

    Severity: Notice

    Message: Only variable references should be returned by reference

    Filename: core/Common.php

    Line Number: 257

    ( klo muncul pesan seperti ini kenapa ya mas ? )

  58. julpan Reply

    gan.. kok gak bisa masuk ke admin ya gan.. udah dimasukan url /app_admin.. tetap gak bisa

  59. oman Reply

    sama seperti pesan di atas… notice itu muncul tapi tidak ada file common.php nya… hal yang sama juga ada pada aplikasi yang pendikan itu, tapi ada file common.phpnya dan sudah teratasi tetapi utk yang aplikasi kpu ini kok gak ada ya? mohon pencerahannya.. trims

  60. efrin Reply

    Permisi gan, ane nyoba masukin kabupaten baru. nah ketika daftarin nama kabupaten lalu klik button tambahkan, broswer reload dngan cepat ( icon kedip2 ) dan saya stop browser nya, dan ngecek trnyata nama kabupaten yg dtambahkan itu duplicate banyak banget 🙁 ada solusi kah?
    dan untuk menghapus data tersebut, fungsi hapus data secara check all pun gak bisa. sepertinya button hapus data blm berfungsi.