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

 

 

 

Iklan

53 thoughts on “Kolaborasi CMS Balitbang dengan Bootstrap 3.1

  1. 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.

    • 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

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

  3. 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

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