[Skripsi Terdokumentasi] Instalasi dan Memodifikasi Header Claroline

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.

   

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

   

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.

   

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.

   

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 😀

   

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.

    

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

    

     

12. Selanjutnya adalah pembuatan akun administrator. Isi dengan data yang mudah kalian ingat dan HARUS INGAT karena berkaitan dengan login.

    

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.
    

    

     

14. Pada tampilan Additional Information, silahkan isi sesuai keinginan kalian. Jangan lupa klik Next.

    

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.

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.

   

3. Pada tampilan selanjutnya, perhatikan bagian Platform configuration (iconnya kunci dan tang) lalu pilih Configuration.
   

   

    

4. Selanjutnya akan muncul tampilan Configuration > pilih Main setting pada bagian platform.

   

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.

   

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.

   

   

8. Di dalam folder gambar tersebut, saya masukkan file gambar yang bernama header.png
   

   

    

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.

   

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.

    

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.

    

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 😀