Kolaborasi CMS Balitbang dengan Bootstrap 3.1

Assalamu’alaikum Wr. Wb.

Salam sejahtera buat kita semua

Salam Hangat Selalu

sudah lama sekali saya tidak posting di blog saya yang sederhana ini. Sebagai wujud syukur saya terhadap apa yang sudah diberikan oleh Allah berupa kenikmatan kesehatan, ilmu, dan juga anugerah bagi saya sendiri telah lolos sebagai CPNS honorer kategori 2 walaupun masih banyak sekali kendala sampai saat artikel ini saya posting belum tahu kabar beritanya lagi kapan kepastian SK CPNS itu turun karena banyaknya honorer K2 yang bukan hak atau asli didalamnya sehingga honorer K2 asli seperti saya menanggung akibatnya. Wah sorri jadi curhat begini.

Postingan kali ini, sedikit sharing ilmu yang sudah saya dapatkan terutama mengenai CMS Balitbang yang kali ini akan saya kolaborasikan dengan Bootstrap 3.1 terbaru. Kenapa saya ambil bootstrap karena bootstrap sudah support html5 dan sudah responsive yang sesuai dengan kebutuhan user saat ini yang serba akses mobile.

Mudah2 dari artikel sederhana ini nantinya bisa sebagai jembatan untuk pengembangan lebih lanjut lagi kolaborasi Bootstrap dan CMS Balitbang ini karena jujur aja untuk designnya sendiri saya belum lama kenal dengan bootstrap, bagi rekan2 yang punya design bootstrap yang lebih bagus nantinya bisa dikolaborasikan dengan jembatan ini.

Sebelum lebih jauh lagi saya jelaskan tentang kolaborasi ini , silahkan bisa cek tampilan nya seperti dibawah ini;

tampilan depan di tab

tampilan di tablet

tampilan depan

Tampilan di pc

Untuk live demo bisa cek via link ini demo button melalui pc dan lihat perbedaan saat di buka di hp, tablet dan pc.

atau via hp langsung di alamat ini link live demo

Saya belum bahasa bagaimana cara membuat atau mengkolaborasikan CMS balitbang dan Bootstrap tapi saya akan tunjukan apa saja yang sudah saya update cms balitbang versi 3.5.2 ini.

Pada dasarnya untuk fitur-fiturnya tidak saya tambah cuma saya rubah untuk tampilan atau templatenya saja, yaitu:

  • Template ini masih saya buat 3 kolom untuk bagian depan yaitu kiri, kanan, dan tengah, dan 2 kolom untuk bagian detail atau isi yaitu isi dan kiri. Template ini sudah support html5 dan sudah responsive.
  • bagian modul sudah saya sediakan dua template seperti gambar dibawah ini, untuk modul kanan dan tengah yang di pasang selain di halaman depan tidak akan muncul, jadi modul kanan dan tengah hanya muncul di bagian depan aja, sedangkan dibagian profil, guru dsb hanya modul kiri aja dan bagian isi.

template modul 1 template modul 3

Template modul 2                                                       Template modul 3

  • Modul Slider berita sudah responsive
  • Modul galeri photo depan yang sudah responsive dan saya tambahkan galeri lightbox yang responsive juga.
  • Galeri Album photo dan galeri photo yang sudah responsive dan responsive galeri lightbox
  • Fitur berita dan artikel sudah saya buat responsive dan form komentar untuk detail isi berita dan artikel juga sudah responsive.
  • Tabel Guru, Siswa, Alumni, Blog, Agenda dll sudah responsive tabel
  • Form buku tamu juga sudah responsive
  • Warna design bisa di edit di bagian file cssnya.
  • navbar atau menu atas juga sudah responsive

Kurang lebih itu hasil modifikasi sederhana dari saya demi kemajuan pendidikan Indonesia, maaf belum sempat buat tutorialnya tapi tenang saja saya sudah siapkan cmsbalitbang + bootstrap  full source codenya jadi bukan berupa templatenya saja. Silahkan dipelajari ini sebagai dasar aja dan baru bagian depan atau front end, sedangkan back end dan member belum, mungkin dari artikel sederhana ini ada yang lebih bagus design dan lebih ahli dalam design template dengan bootstrap bisa dikembangkan ke bagian back end dan member dengan catatan sebaik apa design kita kalo tidak di share akan kurang bermanfaat.

Semoga artikel sederhana ini bisa menginpirasi rekan-rekan semua. Amiin

 silahkan download source codenya di bawah ini

download_button

Salam hangat selalu.

Aris Munandar

 

 

 

About arisddg31

Saya seorang guru TIK di SMA Negeri 3 Kota Sukabumi asal dari Kota Wates Jogjakarta

Posted on April 14, 2014, in Bootstrap, CMS Balitbang, Tutorial and tagged , , , , . Bookmark the permalink. 52 Komentar.

  1. bagus pa,, saya sudah coba implementasikan..

    http://mangegempalan.sch.id/

    tapi kelihatannya masih ada beberapa bugs… misalnya ketika di directory alumni/siswa ketika klik button cari dan hasilnya empty,, itu tampilan jadi ancur dan page jadi tidak terstuktur

  2. maaf bapak. saya mau tanya letak file “index.php?id=info” (di link info sekolah).

    itu di mana ya.? soalnya di CMS saya ada beberapa yang eror di situ. dan saya pengen mengedit bagian itu letaknya di file apa ya.? terima kasih bapak.

    • benar sekali mas, dan biasa heacker newbiew yang bisanya hanya menyerang web demo he he he, sebetulnya saya sahare itu ke keperluan pendidikan dan saya fokus di templatenya aja, dan itu juga hanya web demo dan tidak saya rubah securitynya, semuanya masih default bawaan cms balitbang, si hacker amatir ini masuk melalui akun member guru default aja kok, dan menyisipkan dua file aja, tapi yang jadi masalah, saya tidak pernah memikirkan hal tersebut mau dihack juga he he he saya tahu kok siap yang ngehack tapi biar saja he he he, karena demo itu saya taruh di satu hosting yach akhirnya semua di hosting tersebut di masukan itu semua, yah untuk beresih bersih aja mas he he he, saya tidak akan share secara open lagi sekarang, cuma yang mau minta filenya harus kirim ke emailnya dengan alamat jelas he he he.

  3. MAS TLOLONG DONG KIRIM FILENYA KE EMAIL SAYA

  4. Pak aris, kalau berkenan saya minta file cmsbalitbang&bootstrapnya, ke alamat email : jimat_kalimasada@yahoo.co.id

  5. saya juga lagi belajar bootstrap pak, terutama bootstrap 3, mohon bimbingannya, bisa saya file template nya pak? terimakasih–

  6. pa , permisi mau download tapi keliatanya link udah expired ini😦
    kalo bisa update link nya pak , makasih😀

  7. kalo bisa kirim link terbarunya ke email saya😀

  8. Download link nya broken pak… Pengen nyoba.. heheheh…😀

  9. mas minta file templet Kolaborasi CMS Balitbang dengan Bootstrap 3.1?

  10. sippp pak…. mohon bila berkenan saya ingin source codenya unt saya pelajari dan kembangkan lagi. terima kasih….. mohon kirim ke : nuglast3@gmail.com

  11. kok gak bisa di download ya?
    om, kalo boleh saya minta source-nya dikirim ke email saya ghaane@yahoo.co.id .
    buat belajar n syapa tau bisa ngembangin jadi programer website hebat seperti om Aris… ^_^
    makasih sebelumnya

  12. mas boleh sedot ngak filenya ? ini email aku mas : efraimnovianto@gmail.com
    buat kebutuhan belajar kok mas..🙂

  13. tolong share untuk templatenya mas, dan spesial bisa minta share untuk tutorial membuat templatenya sekalian dengan cara memasangnya.
    email : nafian@migebugan.sch.id

  14. Maaf file downloadnya udah ga valid, mohon diupload ulang untuk keperluan pendidikan..
    Terima kasih

  15. mas, boleh minta fil source code nya, soalnya di download ga bisa, bisa kirim ke email
    muhamad.deden@student.upi.edu

  16. jika boleh minta filenya untuk bahan pembelajaran saya akan sangat berterimakasih sekali🙂 email : admin@yosafatyeka.com

  17. Boleh share file nya untuk keperluan pembelajaran pak? email : brotherjo70@gmail.com
    Terimakasih

  18. mas minta file nya..,sebelumnya terima kasih. abdiecool@gmail.com

  19. sippp pak…. mohon bila berkenan saya ingin source codenya unt saya pelajari dan kembangkan lagi. terima kasih….. mohon kirim ke : syahrudin.fahry@gmail.com

  20. Bisa minta filenya kang??? mohon kirim ke email saya… tanx..

  21. pak mohon dikirimkan ke email mylinux.2004@gmail.com terima kasih…

  22. kok di download ga bisa pak tolong dong. terima kasih

  23. Assalamualaikum..
    Mas, boleh minta source codenya?
    Saya ingin mengembangkan website sekolah saya, dan saya ingin mempelajari script kolaborasi template balitbang dengan bootstrap ini.
    Kalau boleh, tolong kirimkan source codenya ke alamat email saya : ane@dzikri.com atau dzikriad@gmail.com
    Terimakasih sebelumnya ^_^

  24. boleh lah….kl buat smk ada ga pak guru….hehehe

  25. cara installnya bagaimana pak?

    • instalnya hampir sama dengan menginstal framework CI silahkan cari referensi di google untuk itu … klo sudah … langkahnya buat subdomain … atur konfigurasi di CInya seperti databasenya, config, dan di model konfig.php

  26. ijin download pak

  27. mahendrawj239@gmail.com

    pak, boleh minta source codenya , kirim ke email mahendrawj239@gmail.com
    makasih , pak.

  28. pak, boleh minta source codenya , kirim ke email zainuddin1006@gmail.com
    makasih , pak.

  29. Terima kasih ilmunya , bagaimana perkembangan website nya , saya malah lama tidak ufdate website , banyak blm bisa , termasuk buat banner rotator.

  30. Ijin download n otak atik ya pak…thanx..keren

  31. mas, dibahas cara temanya. Oia, kalo mau jadikan sidebar kanan kiri bagaimana ya mas. Biar sidebarnya tidak dikiri semua. Ditunggu jawabannya. Terima kasih…

  32. kok tidak bisa didownload pak,

  33. untuk login user dan password salah terus caranya gimana yah ???
    “USER DAN PASSWORD TIDAK SESUAI”

  34. Pak kami mengalami kesulitan pada validasi member di cms balitbang 3.5.2 padahal email domain yang kami gunakan sudah bisa untuk kirim dan terima email tapi untuk pendaftaran member di website validasi member ke email user tidak terkirim. Mohon bantuan solusinya pak. Terima kasih

  35. Terima kasih Banyak mass saya banyak belajar dar
    i postinganya

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: