[Skripsi Terdokumentasi] Instalasi dan Memodifikasi Header Claroline

posted in: Tutorial | 5

Hmm…sebenarnya ini bukan tentang skripsi saya karena skripsi saya tentang Buku Pintar Elektronik (BPE). Berhubung ada temen yang mengalami kesulitan dan skripsinya tentang Claroline, akhirnya saya memutuskan untuk memakai judul dengan embel-embel “[Skripsi Terdokumentasi]” karena bagaimanapun ini tetep skripsi. Penulis setia kawan loh, gaes 😀

Bagi-bagi ilmu juga karena pada dasarnya ilmu adalah amanat/titipan dari Tuhan, biar berkah kata pak kyai * macak santri *

Okeh, memenuhi request dari kesulitan Mbak Uus (gitu sih panggilannya di kampus). Who is she? Yups…dia perempuan berjilbab, rajin membaca (anak perpus soalnya), rajin menabung, rajin memasak (kalo ini saya gak tau haha). Yang pengen kenalan silahkan datang ke orang tuanya dan langsung ajukan lamaran lengkap beserta CV dan portofolio lengkap kalian ish, apasih kembali ke Claroline

Artikel ini menjelaskan tentang instalasi Claroline sebagai salah satu Learning Management System (LMS) yang bisa kalian pakai untuk membuat e-learning. Selain instalasi, saya juga memberi sedikit modifikasi dengan menambahkan header logo (secara default belum ada logo di header). Kencangkan ikat kepala kalian dan simak langkah berikut ini.

INSTALASI CLAROLINE

  1. Saya asumsikan kalian sudah mengenal localhost termasuk XAMPP dan minimal pembuatan database di phpmyadmin.
  2. Unduh (istilah kerennya download) Claroline 1.11.10 dari link di bawah ini.
    Download Claroline 1.11.10
  3. Setelah selesai unduh, bukalah file Claroline tersebut. Karena berekstensi .zip, silahkan buka dengan winzip atau winrar atau sejenisnya.
    Claroline dalam .zip yang telah diunduh
    Claroline dalam .zip yang telah diunduh
  4. Masuk ke folder htdocs di xampp yang kalian install. O, iya…jangan lupa start dulu apache dan mysql-nya dari Control Panel XAMPP. Buat folder baru di htdocs dengan nama sesuka kalian, yang penting inget. Di sini saya beri nama clarolineku (perhatikan screenshot).
    Membuat folder clarolineku di htdocs
    Membuat folder clarolineku di htdocs
  5. Nah, ekstrak (gak pake kulit manggis) file .zip Claroline yang kalian download tadi ke folder clarolineku yang telah kalian buat. Pastikan struktur folder dan filenya sama seperti screenshot di bawah ini ya.
    Isi file .zip dari Claroline yang telah diekstrak
    Isi file .zip dari Claroline yang telah diekstrak
  6. Buka web browser lalu ketikkan http://localhost/clarolineku/claroline/install/
    Penjelasannya: dalam instalasi, hal ini berguna untuk melakukan pemanggilan folder install yang ada di dalam folder claroline. Lebih lengkapnya silahkan baca file yang bernama INSTALL.txt
  7. Pada tampilan instalasi yang muncul, pilih bahasa yang kalian inginkan. Di sini saya memilih English, tetapi ada juga Bahasa Indonesia jika kalian mau menggunakan Bahasa Indonesia. Klik Next untuk menuju langkah selanjutnya.
    Pilihan bahasa
    Pilihan bahasa
  8. Pada tampilan selanjutnya, kalian akan bertemu dengan License Agreement. Sebagai anak yang baik, silahkan baca dari awal sampai akhir. Saya anak yang buruk, jadi langsung klik Next aja – jangan ditiru 😀
    License Agreement
    License Agreement
  9. Selanjutnya ada Requirement yang menunjukkan kesesuaian antara Claroline dengan server (localhost) yang kalian miliki. Silahkan perhatikan screenshot ini baik-baik ya. Yang urgent adalah bagian Php version dan MySQL version. Jika sudah sesuai, silakan klik Next.
  10. Selanjutnya, kalian akan dihadapkan pada tampilan MySQL Database Setting. Pastikan settingan kalian seperti berikut.
    Database host : localhost
    Database username : root
    Database password : (kosongkan)Kosongkan database password sebelum diupload ke hosting sungguhan. Pada Database usage, gunakan mode Single dan lanjutkan dengan klik Next.

    MySQL Database Setting
    MySQL Database Setting
  11. Selanjutnya adalah pembuatan database. Nama database dapat diganti sesuai keinginan kalian. Lanjutkan dengan klik Next.

    MySQL Database and Table Names
    MySQL Database and Table Names
  12. Selanjutnya adalah pembuatan akun administrator. Isi dengan data yang mudah kalian ingat dan HARUS INGAT karena berkaitan dengan login.
    Administrator Account
    Administrator Account
  13. Pada tampilan Platform Setting, ada beberapa hal penting yang perlu kalian perhatikan. Pertama, pada bagian Absolute URL, kalian harus menggantinya dengan http://localhost/clarolineku/claroline . Mengapa harus diganti? Karena halaman index web Claroline adalah di folder clarolineku/claroline bukan di folder clarolineku (perhatikan kembali struktur folder claroline).
    Kedua, pada bagian Main language kalian boleh menggantinya dengan bahasa yang lain. Ketiga, pada bagian Server timezone, sesuaikan dengan daerah kalian (Indonesia ada pada Asia/Jakarta). Biarkan saja untuk settingan yang lain dan lanjutkan dengan klik Next.

    Platform Setting
    Platform Setting
  14. Pada tampilan Additional Information, silahkan isi sesuai keinginan kalian. Jangan lupa klik Next.
    Additional Information
    Additional Information
  15. Last step, akan muncul tampilan last check before install. Pastikan kembali jika ada kesalahan. Jika sudah beres, klik Install Claroline.
    Jika keluar tampilan Claroline setup successful, berarti instalasi sudah selesai dan berhasil. Jangan lupa baca Warning yang ada yakni kalian diminta untuk memproteksi atau menghapus folder install di dalam folder claroline. Hapus saja folder install ya (santai dulu). Jika ingin mencoba claroline, klik Go to your brand new campus.

 

MEMODIFIKASI LOGO HEADER CLAROLINE

Setelah kalian berhasil menginstal Claroline, secara default (bawaan, belum termodifikasi) tampilan web kalian belum memiliki header ataupun logo.Tampilan default dapat kalian lihat pada screenshot berikut ini.

Claroline default tanpa header
Claroline default tanpa header

Nah… untuk memodiifikasinya, silahkan perhatikan langkah-langkah berikut ini. O, iya…pastikan kalian sudah mempersiapkan logo atau gambar yang ingin kalian jadikan sebagai header ya.

  1. Login dengan akun administrator yang telah kalian buat saat proses instalasi tadi.
  2. Pada tampilan awal (homepage), akan ada enam menu utama yakni tiga menu di sebelah kiri (My desktop, My messages, dan Platform Administration) dan 3 menu di sebelah kanan (Username akun, Manage my account, dan Logout). Klik pada Platform Administration pada menu sebelah kiri.
    Klik Platform Administration
    Klik Platform Administration
  3. Pada tampilan selanjutnya, perhatikan bagian Platform configuration (iconnya kunci dan tang) lalu pilih Configuration.

    Klik Configuration
    Klik Configuration
  4. Selanjutnya akan muncul tampilan Configuration > pilih Main setting pada bagian platform.
    Klik Main setting
    Klik Main setting
  5. Okeh, sudah? Sip…jangan lupa siapin kopi jika merasa lelah dan bosan hehe.
  6. Pada bagian Main setting, kalian akan melihat beberapa tab yang bisa dipilih seperti General, Layout, Language, dan sebagainya. Klik pada bagian Layout.
    Klik tab Layout
    Klik tab Layout
  7. Yang harus kalian ganti adalah pada bagian Platform logo url dan atau Organization logo url. Perhatikan contoh URL yang telah disediakan di sebelah kanan. Penulisan URL hendaknya mengikuti kaidah tersebut termasuk dengan menyertakan teks “http://” . Kalian perlu tahu bahwa penulisan URL ini merupakan lokasi di mana kalian menyimpan gambar yang akan kalian jadikan header. Di sini saya membuat folder baru di dalam folder clarolineku dengan nama gambar. Kalian boleh memilih lokasi lain dan sesuaikan URL-nya dengan lokasi header kalian nantinya.
    Platform url logo
    Platform url logo
    Membuat folder gambar
    Membuat folder gambar
  8. Di dalam folder gambar tersebut, saya masukkan file gambar yang bernama header.png

    Memasukkan file header.png di folder gambar
    Memasukkan file header.png di folder gambar
  9. Karena file header.png masih di dalam folder clarolineku dan masih di htdocs, maka pengaksesan URL untuk file header.png adalah http://localhost/clarolineku/gambar/header.png . Kalau belum yakin, coba lakukan tes dengan memasukkan url gambar kalian di browser. Kalau berhasil, akan keluar gambarnya seperti tampilan yang saya miliki berikut.
    akses header
    Akses header dari web browser
  10. Kalau gambarnya muncul, lakukan saja copy paste URL-nya. Platform logo url adalah bagian kiri atas dari Claroline, sedangkan Organization logo URL adalah untuk bagian kanan dari Claroline. Jika kalian menginginkan gambar panjang, kalian juga bisa membuatnya seperti header saya berikut ini (gambar saya desain untuk e-learning SMA N 1 Karanganyar Demak).
  11. Jangan lupa simpan dengan klik OK dan akan keluar notif seperti berikut.
    Notifikasi penyimpanan berhasil
    Notifikasi penyimpanan berhasil
  12. Untuk melihat perubahannya, silahkan kembali ke halaman awal (homepage) kalian yakni pada http://localhost/clarolineku/claroline/desktop/index.php
  13. dan…….tada…..inilah tampilan saya.
    Penggantian header selesai
    Penggantian header selesai

Gimana? Keren kan? Hehe…

Saya harap langkah-langkah di atas bisa kalian praktikkan dengan mudah apalagi jika kalian sudah mengetahui dasar penggunaan localhost. Satu lagi catatan: ketika kalian mengupload Claroline ini ke hosting yang sudah online, pastikan juga kalian mengganti URL header-nya karena akan berubah lokasi jika sudah online (namadomain/namafolder/header.png). Untuk modifikasi lebih lanjut, silahkan make yourself to be more creative ya.

Jangan lupa tinggalkan jejak kalian dengan memberikan komentar atau pertanyaan jika masih ada yang ingin ditanyakan (kebiasaan dosen sebelum mengakhiri kelas – ada pertanyaan? ) . Yang mau nitip salam untuk Mbak Uus juga bisa komen di sini, nanti disampaikan atau barangkali dibaca ama orangnya 😀

Muhammad Faizin
Follow Faizin:

Writer and Developer

Dulu suka menulis kode dan sejenisnya sampe malem, sekarang juga masih. Kesukaan pada menulis cerita sedikit demi sedikit terpupuk, apalagi sebagai mantan anak sekolahan dengan cita-cita kuliah di luar negeri.