18

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Comunity Builder

5

Community Builder (CB) merupakankomponen Joomla! yang sangat populer untukmengelola database user. CB dikembangkansejak tahun 2005 oleh sekelompok program-mer yang tergabung dalam Beat B & CB Team(email: beat@joomlapolis.com) dari situswww.joomlapolis.com.

Komponen CB serta beberapa modul dan plug-in pendukung lainnya dapat didownload secara

gratis di situs www.joomlapolis.com, tentunyaAnda terlebih dahulu mendaftar sebagai anggota.Karena sangat populernya, kini CB telahdiintegrasikan dengan berbagai komponen lain,misalnya komponen forum Fireboard. Beberapaprogrammer website lain secara mandiri jugaada yang mengembangkan modul atau plug-inuntuk mendukung CB, misalnya modul CBSuperthumb untuk menampilkan avatar CB yangdikembangkan oleh Yose - Andy Sikumbang

1. MENGENALCOMMUNITY BUILDER (CB)

Gambar 5.2. Website JoomlaPolis (www.joomlapolis.com)Gambar 5.1. Logo Community Builder (CB)

19

Ebook V

ersi Pengenalan

Sebelum

Terbit(email: sikumbang@gmail.com) dari websitewww.templateplazza.com dan masih banyaklagi lainnya.

Hingga saat ini versi terbaru CB telahmencapai 1.1. Tidak hanya Joomla! 1.0.xx yangdidukung oleh CB, versi terbaru ini juga telahmendukung Joomla! 1.5.x. Jika Andamendownload langsung dari websiteJoomlapolis, nama file instalasi CB 1.1 adalahcb_1_1_0-unzip1st1.zip. File ini tidak bisalangsung diinstal tapi terlebih dahulu harusdiekstrak, karena di dalam file tersebutterdapat beberapa file modul dan satu filekomponen. File komponennya bernamacom_comprofiler dengan ukuran 551 kb.Inilah file komponen CB 1.1 yang siap diinstal.

Untuk memudahkan Anda agar langsung bisapraktik, di dalam CD Bonus telah penulissertakan file komponen CB 1.1 lengkap denganmodul dan plug-in pendukung lainnya.

2. MENGINSTAL CB

Nama File: com_comprofiler_1.1.zip (551 kb)Tersedia: ada dalam CD Bonus di folder

Databese User - Profil AnggotaFungsi: aksesoris Joomla! yang berguna untuk

mengelola keanggotaan suatu website.

1. Lakukan instalasi komponencom_comprofiler_1.1 ini, langkah-langkahnya lihat kembali bab 3 bagian 2.

2. Selesai instalasi, buka tools CB denganmengklik Components > CommunityBuilder > Tools.

3. Akan muncul halaman Tools Manager, laluklik Load Sample Data.

Gambar 5.3. Menu Tools Manager CB

4. Akan muncul halaman yang menyebutkanLoad Sample Data sukses.

Gambar 5.4. Load Sample Data

Gambar 5.5. Load Sample Data sukses

20

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

5. Lakukan kembali langkah 2 dan 3 di atasuntuk tools Synchronize Users danCheck Community Builder Databasesehingga muncul halaman yang menandakansukses untuk kedua tools tersebut.

Gambar 5.6. Synchronize Users sukses

Gambar 5.7. Check Community Builder Database sukses

6. Sampai tahap ini Anda telah suksesmenginstal dan mensikronisasi CB padaJoomla!

3. MENGINSTAL CB LOGIN

Nama File: cblogin_id-joomla.zip (12 kb)Tersedia: ada dalam CD Bonus di folder

Databese User - Profil AnggotaFungsi: memperoleh data dari pengunjung jika

ingin menjadi anggota sebuah situs sertasebagai pintu masuk untuk mengakseshalaman khusus anggota.

Contoh penggunaan CB Login bentuk ini dapatAnda lihat di website ID-Joomla (www.id-joomla.com) dimana di samping menu loginterdapat sebuah foto.

1. Lakukan instalasi modul cblogin_id-joomla.zip ini, langkah-langkahnya lihatkembali bab 3 bagian 2.

2. Selesai instalasi buka halaman ModuleManager dengan mengklik menu Modules> Site Modules.

3. Pada halaman Module Manager, klik tulisanCB Login Id-Joomla. Letak CB LoginId-Joomla ini tidak selalu berada di nomor2 seperti pada gambar, ini hanya contoh.

Gambar 5.9. CB Login Id-Joomla pada halaman ModuleManager

Gambar 5.8. Menu Site Modules

21

Ebook V

ersi Pengenalan

Sebelum

Terbit4. Lakukan editing pada modul CB Login Id-

Joomla seperti pada gambar, misalnya namamodul diganti menjadi LOGINANGGOTA, Published: Yes, Show ava-tar when logged-in pilih show always, danseterusnya. Data-data lainnya biarkanseperti aslinya. Kemudian klik Save.

5. Karena modul Login sekarang ada dua,maka non-aktifkanlah modul Login aslibawaab Joomla!

6. Untuk melihat CB Login Id-Joomla ini, bukahalaman front-end website Anda, makaakan nampak modul CB Login Id-Joomlaseperti pada gambar di bawah ini.

4. MENGGANTI ITEM ISIANFORM REGISTRASI

Secara default, isian Login Form bawaan asliJoomla! hanya memiliki 5 item seperti gambardi bawah ini.

Gambar 5.12. Item Login Form asli bawaan Joomla!

Tapi, dalam pembuatan website komunitassekolah ini kita menggunakan CB Login Id-Joomla. Secara default, isian form ini memiliki13 item seperti gambar berikut.

Gambar 5.13. Item Defaul CB Login

Gambar 5.10. Editing Modul CB Login Id-Joomla

Gambar 5.11. Tampilan modul CB Login Id-Joomladi halaman front-end.

22

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Ada beberapa item dalam form default CBLogin ini yang perlu ditambah atau digantisesuai informasi yang kita inginkan daripengunjung website kita yang nantinya akanmenjadi anggota. Informasi tersebut adalah:

1. Tipe Keanggotaan dibagi menjadi:a. Siswab. Guruc. Karyawan Sekolahd. Alumnie. Orang Tua Siswaf. Umum

2. Data umum pertama yang diinginkan:a. Namab. Nama Userc. Kata Sandid. Email

3. Data umum kedua yang diinginkan:a. Tanggal Lahirb. Alamatc. Kotad. Provinsie. Negaraf. Telp./HP.g. Website/Blog (kalau ada)i. Sumber tahu website ini.

3. a. Untuk Siswa: NIS, Kelas, Jurusan/ Ruangan.

b. Untuk Guru & Karyawan Sekolah:NIP, Bidang Studi/Jabatan.

c. Untuk Alumni & Orang Tua Siswa:Pendidikan/Pekerjaan.

Data-data tersebut di atas kalau kitamenggunakan Form Login asli bawaanJoomla! tidak bisa kita peroleh, tapi kalaumenggunakan CB Login dengan mudah bisakita modifikasi sesuai keinginan. Untukmelakukan modifikasi CB Login tersebut,lakukanlah langkah-langkah sebagai berikut.

1. Pada halaman admin, pilih Components> Community Builder > Field Manage-ment.

2. Akan muncul halaman Field Manager. Disini yang akan kita modifikasi adalah dataumum kedua dan data khusus, sedangkandata umum pertama secara otomatis telahtersedia karena asli bawaan Joomla!

3. Membuat item Tipe Anggota. Langkah-langkahnya adalah:a. Masih di halaman Field Manager, klik

tombol New Field di kanan atas.

Gambar 5.15.Tombol New Field

b. Muncul halaman Add Field, padabagian Type pilih Drop Down (SingleSelect). Pada bagian lainnya pilih atauisi seperti pada gambar di halamanberikut ini.

Gambar 5.14. Tampilan defaul Field Manager

23

Ebook V

ersi Pengenalan

Sebelum

Terbit

Gambar 5.16. Field tipe anggota bagian atas

c. Di bawah tulisan Use the table belowto add new values, klik tombol Add aValue sebanyak 5 kali. Pada kotakkosong yang muncul, isi dengan tipe-tipeanggota seperti gambar di bawah ini.

Gambar 5.17. Field tipe anggota bagian bawah

d. Terakhir klik tombol Save di kanan atas.Selamat Anda telah berhasil membuatsatu item untuk form registrasi, yaituTipe Anggota. Item inilah yangnantinya akan kita gunakan sebagaidasar pengelompokkan Daftar Anggota(lihat pada bagian...)

Gambar 5.18.Tombol Save

4. Membuat item title Tanggal Lahir.Langkah-langkahnya adalah:a. Masih di halaman Field Manager, klik

tombol New Field di kanan atas.b. Muncul halaman Add Field, pada

bagian Type pilih Date. Pada bagianlainnya pilih atau isi seperti pada gambardi bawah ini.

Gambar 5.19. Field tanggal lahir

24

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Item tanggal lahir ini nantinya kita gunakansebagai bahan untuk mengucapkan selamatulang tahun pada anggota.

5. Mengganti item title Website menjadiWebsite/Blog.Langkah-langkahnya adalah:a. Masih di halaman Field Manager, klik

2x tulisan name yang berwarna merahyang ingin diganti, yaitu website.

b. Muncul halaman Edit Field, gantidatanya seperti pada gambar di bawahini. (Ingat untuk tab, pilihannya selaluContact Info, begitu juga pada edit fieldberikutnya). Klik Save untukmenyimpan hasil edit field.

6. Mengganti item Location menjadi Kelas-Jurusan/Ruangan. Langkah-langkahnyaseperti nomor 5 di atas. Data-datanyasebagai berikut:Type : Text FieldTab : Contact InfoName : locationTitle : Kelas-Jurusan/RuanganDescription:Isilah jika Anda adalah Siswa. Kosongkanjika Anda bukan Siswa.Required? : NoShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 50Max Length : 0

7. Mengganti item Occupation menjadiBid.Studi/Jabatan. Langkah-langkahnyaseperti nomor 5 di atas. Data-datanyasebagai berikut:Type : Text FieldTab : Contact InfoName : occupationTitle : Bid. Studi / JabatanDescription:Kosongkan jika Anda bukan Guru atauKaryawan Sekolah. Jika Anda Guru, isidengan Bidang Studi yang Anda ajarkan danjabatan Anda jika ada jabatan yang Andapegang, misalnya Kepala/Wakil KepalaSekolah, Wali Kelas, dll. Jika AndaKaryawan Sekolah, isi dengan jabatan yangAnda pegang, misalnya Kepala/Staf TU,Ketua/Karyawan Yayasan, dll.Required? : NoShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : Yes

Gambar 5.20. Field website / blog

25

Ebook V

ersi Pengenalan

Sebelum

TerbitPublished : YesSize : 50Max Length : 0

8. Mengganti item Interest menjadi Kesandan Pesan. Langkah-langkahnya sepertinomor 5 di atas. Data-datanya sebagaiberikut:Type : Text FieldTab : Contact InfoName : interestTitle : Kesan dan PesanDescription :Isi kesan dan pesan Anda secara singkatdan jelas.Required? : YesShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 50Max Length : 0

9. Mengganti item Company menjadi Pend./ Pekerjaan. Langkah-langkahnya sepertinomor 5 di atas. Data-datanya sebagaiberikut:Type : Text FieldTab : Contact InfoName : companyTitle : Pend. / PekerjaanDescription:Kosongkan jika Anda bukan Alumni atauOrang Tua Siswa. Jika Anda adalah Alumnidan sedang melanjutkan pendidikan, isidengan Jurusan dan Perguruan Tinggitempat Anda kuliah. Jika Anda sudahbekerja atau Orang Tua Siswa, isi denganpekerjaan Anda sekarang.Required? : NoShow on Profile? : Yes: on 1 Line

User Read Only? : NoShow at Registration? : YesPublished : YesSize : 50Max Length : 0

10.Mengganti item City menjadi Kota.Langkah-langkahnya seperti nomor 5 diatas. Data-datanya sebagai berikut:Type : Text FieldTab : Contact InfoName : cityTitle : KotaRequired? : YesShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 0Max Length : 0

11. Mengganti item State menjadi Provinsi.Langkah-langkahnya seperti nomor 5 diatas. Data-datanya sebagai berikut:Type : Text FieldTab : Contact InfoName : stateTitle : ProvinsiRequired? : YesShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 0Max Length : 0

12.Mengganti item Zip Code menjadi NIS/NIP. Langkah-langkahnya seperti nomor 5di atas. Data-datanya sebagai berikut:Type : Text FieldTab : Contact Info

26

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Name : zipcodeTitle : NIS / NIPDescription:Kosongkan jika Anda bukan Siswa atauGuru/Karyawan Sekolah. Jika Anda adalahSiswa, isilah dengan Nomor Induk Siswa(NIS) yang Anda miliki, jika tidak tahu ataulupa kosongkan saja dulu, nanti diisi setelahAnda tanyakan pada Staf TU. Jika Andaadalah Guru/Karyawan Sekolah yang sudahPNS, isilah dengan Nomor Induk Pegawai(NIP) yang Anda miliki.Required? : NoShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 0Max Length : 0

13.Mengganti item Country menjadi Negara.Langkah-langkahnya seperti nomor 5 diatas. Data-datanya sebagai berikut:Type : Text FieldTab : Contact InfoName : countryTitle : NegaraRequired? : YesShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 0Max Length : 0

14.Mengganti item Address menjadi Alamat.Langkah-langkahnya seperti nomor 5 diatas. Data-datanya sebagai berikut:Type : Text FieldTab : Contact Info

Name : addressTitle : AlamatDescription:Isilah alamat Anda dengan lengkap, sepertiJalan/Gang, RT/RW, Nomor Rumah, sedikitpetunjuk seperti di samping GedungPemuda, dll.Required? : YesShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 50Max Length : 0

15.Mengganti item Phone# menjadi Telp./HP.Langkah-langkahnya seperti nomor 5 diatas. Data-datanya sebagai berikut:Type : Text FieldTab : Contact InfoName : phoneTitle : Telp./HPDescription:Jika Anda tidak mempunyai nomor teleponatau HP, isilah dengan nomor telepon/HPsaudara atau teman yang mudah/seringbertemu dengan AndaRequired? : YesShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 0Max Length : 0

16.Mengganti item Fax# menjadi Kenalwebsite ini dari. Langkah-langkahnyaseperti nomor 5 di atas. Data-datanyasebagai berikut:Type : Text FieldTab : Contact Info

27

Ebook V

ersi Pengenalan

Sebelum

TerbitName : phoneTitle : Kenal website ini dari.Description:Sebutkan dari mana Anda tahu websitesekolah ini, dari teman, guru, iklan, searchengine, majalah/surat kabar, atau lainnya.Required? : YesShow on Profile? : Yes: on 1 LineUser Read Only? : NoShow at Registration? : YesPublished : YesSize : 50Max Length : 0

Sampai pada langkah 16 di atas, Anda telahberhasil memodifikasi menu registrasi. Urutansementara item menu setelah Anda modifikasiadalah seperti gambar berikut.

Agar item tersebut tersusun rapi, Anda perlumengatur susunannya. Caranya, pada bagianReorder, klik tanda segitiga seperti berikut inisehingga posisinya sesuai keinginan:

menaikkan item satu langkah

menurunkan item satu langkah

Susunlah item menu registrasi tersebut sehinggaurutannya sama persis seperti pada gambar dibawah ini.

Gambar 5.22. Urutan akhir item menu registrasi.

Gambar 5.21. Urutan sementara item menu registrasi.

28

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Untuk melihat hasil field-field item menuregistrasi yang telah Anda buat pada formregistrasi sebenarnya, bukalah halaman front-end website Anda, pilih Daftar Baru padamodul LOGIN ANGGOTA maka akantampak form registrasi seperti pada gambar dibawah ini.

Gambar 5.23. Form Registrasi hasil modifikasi

Secara default petunjuk isian form registrasiCB Login Id-Joomla adalah seperti padagambar berikut ini.

5. MENGGANTI PETUNJUKISIAN FORM REGISTRASI

Kita dapat mengganti tulisan berbahasa Inggristersebut dengan bahasa Indonesia agar mudahdimengerti oleh pengunjung website sekolahkita. Untuk menggantinya, lakukanlah langkah-langkah berikut.

1. Tulisan petunjuk isian form registrasitersebut terdapat pada file language.php,dimana letaknya ada di components/com_comprofiler/plugin/language/default_language/default_ language.php.

2. Bukalah file language.php menggunakanMacromedia Dreamweaver, petunjuk isiantersebut terdapat pada baris 355, 356, 357,dan 518. Anda bisa juga menggunakanNotepad atau FrontPage, namun kedua pro-gram ini tidak bisa menampilkan nomor barisseperti halnya Macromedia Dreamweaver.Untuk mencari petunjuk isian tersebut Andamesti mencarinya secara hati-hati ataumenggunakan fasilitas search.

3. Pada baris 355, gantilah tulisan This FieldIS visible on profile dengan kata-kata:Item ini akan ditampilkan di halamanProfil Anda.

Gambar 5.24. Petunjuk isian Form Registrasi CB Login

29

Ebook V

ersi Pengenalan

Sebelum

Terbit4. Pada baris 356, gantilah tulisan This Field

IS NOT visible on profile dengan kata-kata: Item ini TIDAK akan ditampilkandi halaman Profil Anda.

5. Pada baris 357, gantilah tulisan This Fieldis required dengan kata-kata: Item initidak boleh kosong, harus diisi.

6. Pada baris 518, gantilah tulisan Field de-scription: Move mouse over icon dengankata-kata: Letakkan kursor di atastanda/image ini untuk melihatketerangan pengisian.

Sampai langkah nomor 6 di atas, Anda telahberhasil mengganti petunjuk isian form registrasiCB Login. Petunjuk isian tersebut sekarangadalah seperti pada gambar di bawah ini.

Gambar 5.25. Petunjuk isian Form Registrasi CB Loginsetelah dimodifikasi.

6. MEMBUAT CONTOH USERDARI HALAMAN ADMIN

Contoh user ini sangat perlu Anda buat untukmengecek berfungsi atau tidaknya menu Com-munity Builder (CB) yang nantinya kita buatuntuk halaman front-end atau untuk mengeceksuatu modul yang berhubungan dengan CB dihalaman front-end.

Contoh user ini kita buat sebanyak 6 orangsesuai dengan banyaknya tipe anggota. Untukmembuat contoh user ini lakukanlah langkah-langkah berikut.

1. Pada halaman admin, pilih Components/Community Builder/User Manage-ment.

2. Akan muncul halaman User Manage-ment. Klik tombol New pada kelompoktombol di bagian kanan atas.

3. Akan muncul halaman Add User, isilahdata-datanya sebagai berikut:Name: SiswaName User: siswaEmail: siswa@yahoo.comPassword: 123456Verify Password: 123456User Editor: (biarkan saja apa adanya)Group: RegisteredBlock User: (biarkan saja apa adanya)Approve User: (biarkan saja apa adanya)Confirm User: (biarkan saja apa adanya)Receive Moderator Emails: (biarkan

saja apa adanya)Tanggal Lahir: January/1/1991Tipe Anggota: SiswaNIS/NIP : 123-7891Kelas-Jurusan/Ruangan: XI-IPA/3Bid.Studi/Jabatan: (kosongkan karena

bukan Guru/Karyawan Sekolah)Pend./Pekerjaan: (kosongkan karena

bukan Alumni/Orang Tua)Alamat: Jl. Raya Bogor Km.17 No.89,

dekat Pabrik Khong Guan.Kota: Jakarta TimurProvinsi: DKI JakartaNegara: IndonesiaTelp./HP: 021-8754795 / 0818321212Kesan dan Pesan: Website bagus untuk

komunikasi antar kita

30

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Website / Blog : (boleh dikosongkan jikatidak punya)

Kenal website ini dari: Google

4. Pada nomor 3 di atas adalah contoh useruntuk Siswa. Buat lagi contoh user untukGuru, Karyawan Sekolah, Alumni, OrangTua Siswa, dan Umum seperti caramembuat contoh user Siswa. Datanyasesuaikan dengan tipe usernya.

5. Jika telah selesai membuat contoh user,maka halaman User Management akanterlihat seperti gambar di bawah ini.

Gambar 5.26. Daftar Contoh User

7. MEMBUAT MENUPROFIL ANGGOTA

Karena website yang kita bangun adalahwebsite komunitas, maka menu Profil Anggotaterdaftar perlu dibuatkan. Menu ini kitamasukkan dalam submenu MyCommunity.Menu ini sangat terkait dengan CB yang kitagunakan dalam mengelola database user.

Untuk membuat menu Profil Anggota ini,lakukanlah langkah-langkah berikut.

1. Pada halaman admin, pilih Menu >usermenu.

2. Akan muncul halaman Menu Manageruntuk usermenu. Klik tombol New padakelompok tombol bagian kanan atas.

3. Akan muncul halaman New Menu Item.Pada kotak bagian Components, kliktulisan component.

4. Akan muncul halaman Add Menu ItemComponent. Isi datanya seperti padagambar di bawah ini. Bagian Name tulisProfil Anda, bagian component pilih Com-munity Builder, URL: Top, acces levelpilih Public, dan published pilih Ya.

5. Terakhir klik tombol Save, maka Anda telahsukses membuat menu profil anggotadengan nama Profil Anda.

Gambar 5.27. Membuat menu profil anggotadengan nama Profil Anda

31

Ebook V

ersi Pengenalan

Sebelum

TerbitUntuk melihat menu profil anggota ini, bukalahhalaman front-end website Anda dan loginlahsebagai user, misalnya user siswa denganpassword 123456. Setelah itu klik menu ProfilAnda pada kelompok menu MyCommunity,maka akan tampil halaman profil anggotaseperti pada gambar di bawah ini.

Gambar 5.28. Halaman profil anggota

Setelah menu profil anggota berhasil Andabuat, kini Anda akan mengelompokkan anggotayang terdaftar di website kita. Pada bab inibagian 4 kita telah membuat tipe anggota yangterdiri atas Siswa, Guru, Karyawan Sekolah,Alumni, Orang Tua Siswa, dan Umum. Dalampengelompokan anggota terdaftar ini kita akanmengelompokkan anggota berdasarkan tipe

tersebut. Inti pengelompokan ini terletakpada filter tipe anggota yang kita buat.

Untuk membuat mengelompokan anggotaterdaftar di website kita lakukanlah langkah-langkah seperti di bawah ini.

1. Pada halaman admin, pilih menu Compo-nents > Community Builder > ListManagement.

2. Akan muncul halaman List Manager. Kliktitle Member List.

3. Akan muncul halaman Edit List, editlahdata-datanya seperti di bawah ini;a. Title: ganti tulisan Member List dengan

kata Semua Anggotab. Biarkan apa adanya untuk Description,

User Group to allow access, UserGroups to Include in List, Published,dan Default.

c. Sort By: Last Online(DESC), tentunyaterlebih dahulu diremove Name(ASC).

d. Biarkan kosong untuk Filter.e. Untuk Column 1, editlah menjadi

seperti gambar di bawah ini.

8. MENGELOMPOKAN ANGGOTAWEBSITE BERDASARKAN

TIPE ANGGOTA

Gambar 5.29. Item yang ada di kolom 1 (perhatikanada ada tanda yang harus dicentang dan ada yang

tidak dicentang)

32

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

f. Untuk Column 2 editlah menjadi sepertigambar di bawah ini.

g. Untuk Column 3, editlah menjadiseperti gambar di bawah ini.

Gambar 5.30. Item yang ada di kolom 2untuk tipe Semua Anggota

h. Jika sudah selesai klik tombol Save dikanan atas. Sampai di sini Anda telahberhasil mengelompokan anggota untuksemua tipe (Semua Anggota).

4. Selanjutnya mengelompokan anggotaberdasarkan tipe anggota Siswa.a. Masih di halaman List Manager, klik

tombol New untuk membuat list baru.b. Title: Siswac. Description: Siswad. User Group to allow access: Regis-

terede. User Groups to Include in List: Re-

gisteredf. Published: Yag. Default: Noh. Sort By: Last Online(DESC).i. Filter: Tipe Anggota Equal to siswa,

atau Tipe Anggota = siswa.j. Untuk Column 1, buatlah seperti

gambar di bawah ini.

Gambar 5.31. Item yang ada di kolom 3untuk tipe Semua Anggota Gambar 5.32. Item yang ada di kolom 1

untuk tipe anggota Siswa

33

Ebook V

ersi Pengenalan

Sebelum

Terbitk. Untuk Column 2 dan 3, buatlah seperti

gambar item untuk tipe SemuaAnggota.

j. Terakhir klik tombol Save di kanan atas.Sampai di sini Anda kembali berhasilmengelompokkan anggota terdaftarberdasarkan tipe anggota Siswa.

5. Untuk mengelompokan anggota berdasar-kan tipe anggota Guru, KaryawanSekolah, Alumni, Orang Tua Siswa, danUmum, caranya sama seperti mengelom-pokan tipe anggota Siswa tapi disesuaikandengan tipe anggota yang akan dibuat,hanya pada Column 1 yang berbeda.

Jika telah selesai mengelompokkan anggotaterdaftar di website kita berdasarkan tipenya,maka halaman List Manager akan terlihatseperti gambar di bawah ini.

Gambar 5.35. Daftar anggota berdasarkan tipe anggotanya,dimana tipe Semua Anggoya yang dijadikan default

9. MEMBUAT MENUDAFTAR ANGGOTA

Setelah kita mengelompokan anggota websiteberdasarkan tipe anggotanya, sekarang kitaakan menampilkan anggota website dalambentuk menu Daftar Anggota. Menu ini kitamasukkan dalam submenu MyCommunity.

Untuk membuat menu Daftar Anggota ini,lakukanlah langkah-langkah sebagai berikut.

1. Pada halaman admin, pilih Menu >usermenu.

2. Akan muncul halaman Menu Manageruntuk usermenu. Klik tombol New padakelompok tombol bagian kaan atas.

3. Akan muncul halaman New Menu Item.Pada kotak bagian Links, klik tulisan Link-Url.

Gambar 5.33. Item yang ada di kolom 1untuk tipe anggota Guru dan Karyawan Sekolah

Gambar 5.34. Item yang ada di kolom 1untuk tipe anggota Alumni, Orang Tua Siswa,

dan Umum.

34

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

4. Akan muncul halaman Add Menu Item:: Link - URL. Isi datanya seperti padagambar di bawah ini. Bagian Name tulisDaftar Anggota, bagian Link tulisindex.php?option=com_comprofiler&task=usersList&listid=2, bagian On Click, Openin pilih Parent Window with BrowserNavigation, parent item: Top, acces levelpilih Public, dan published pilih Ya.

Jika Anda perhatikan dimanakah asalalamat Link di atas? Alamat tersebutterdapat pada bagian URL for menu linkto this list di halaman Edit List untuk titleSemua Anggota.

Gambar 5.36. Membuat menu Daftar Anggota.

5. Terakhir klik tombol Save, maka Anda telahsukses membuat menu Daftar Anggota.

Untuk melihat menu daftar anggota ini, bukalahhalaman front-end website Anda dan loginlah

sebagai user, misalnya user siswa denganpassword 123456. Setelah itu klik menu DaftarAnggota pada kelompok menu MyCom-munity, maka akan tampil halaman DaftarAnggota seperti pada gambar di bawah ini.

Secara default halaman Daftar Anggota inilangsung menampilkan Semua Anggota karenaURL yang kita masukkan ketika membuatmenunya adalah URL dari halaman Edit Listuntuk title Semua Anggota. Untukmenampilkan daftar anggota tipe lainnya, padakotak bagian kanan terdapat pilihan tipeanggota yang ingin ditampilkan, silakan cobapilih.

Gambar 5.38. Halaman Daftar Anggota dengan kotak pilihanuntuk menampilkan daftar tipe anggota lainnya.

Gambar 5.37. Sumber URL untuk Daftar Anggota

35

Ebook V

ersi Pengenalan

Sebelum

Terbit

Nama File: plug_cb_lastviewstab_v0.2.9stable.zip (5 kb)

Tersedia: ada dalam CD Bonus di folderDatabese User - Profil Anggota

Fungsi: menampilkan jejak pengunjung profilsuatu anggota.

Jika kita melihat halaman Profil Anggotaseperti pada gambar... di halaman ..., baruterdapat satu tab untuk setiap profil. Padabagian ini kita akan menambahkan tab baruyang berguna untuk mencatat jejak pengunjungprofil suatu anggota. Untuk melakukan hal itukita menggunakan plugin CB LastViews Tab.

Untuk menginstal plug-in CB LastViews Tabini, lakukanlah langkah-langkah seperti dibawah ini.

1. Pada halaman admin, pilih Components/Community Builder/Plugin Manage-ment.

2. Akan muncul halaman Plugin Manager.Lakukan instalisasi pada bagian InstallNew Plugin. Caranya sama seperti saatkita menginstal aksesoris Joomla!, bedanyainstal plugin menunya lewat suatukomponen.

3. Selesai instalisasi, masih di halaman PluginManager, aktifkan plugin CB LastViewsTab. Caranya sama seperti kitamengaktifkan modul Joomla!, bedanyadaftarnya ada di Plugin Manager suatukomponen.

Sampai di sini Anda telah berhasil membuattab baru yang nantinya bernama Last Visi-tors. Untuk melihat tab ini di halaman ProfilAnggota, bukalah halaman front-end websiteAnda dan loginlah sebagai user, misalnya usersiswa dengan password 123456.

Setelah itu klik menu Daftar Anggota padakelompok menu MyCommunity, kemudianklik salah satu anggota misalnya guru. Ketikahalaman profil guru muncul hanya satu tabyang ada, yaitu Contact Info. Untukmemunculkan tab Last Visitors, refresh-lahhalaman front-end Anda atau bisa juga klikmenu yang lain dulu kemudian kembali lagi kehalaman profil guru tersebut, maka akanmuncul tab Last Visitors seperti gambar dibawah ini.

Gambar 5.39. Plugin CB LastView sedang aktif.

Gambar 5.40. Tab Last Visitors.

10. MENAMBAHKAN TABJEJAK PENGUNJUNG PROFIL

SUATU ANGGOTA

36

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Nama File: plug_cbprofilebook_1_0.zip(51 kb)Tersedia: ada dalam CD Bonus di folder

Databese User - Profil AnggotaFungsi: menampilkan pesan pribadi untuk

suatu anggota, misalnya pesan guru padaseorang siswa agar rajin belajar.

Sebagai suatu website komunitas, komunikasiantaranggota komunitas perlu diberikan saranaseluas-luasnya. Salah satunya adalahmenambahkan tab CB Profile Book di halamanprofil anggota. Tab ini berfungsi sebagai bukutamu pribadi bagi anggota komunitas, sehinggasetiap anggota bebas memberikan pesan dankesan buat anggota lainnya tentunya secarasopan dan beradab.

Untuk instalisasi dan pengaktifan plugin CBProfile Book ini, lakukanlah seperti halnyainstalisasi dan pengaktifan plugin Last Visitorssebelumnya.

Setelah instalisasi dan pengaktifan selesai,tibalah saatnya melakukan pengecekan.Bukalah halaman front-end website Anda danloginlah sebagai user, misalnya user siswadengan password 123456. Setelah itu klikmenu Daftar Anggota pada kelompok menuMyCommunity, kemudian klik salah satuanggota misalnya guru.

Ketika halaman profil guru muncul, klik tabProfile Book. Untuk mengisi pesan dankesan, klik tulisan Sign Profile Book,kemudian isilah data yang diminta serta pesandan kesan Anda pada kolom isian yang tersedia.

11. MENAMBAHKAN TABBUKU TAMU PRIBADI

Untuk mengakhiri, klik tombol Submit Entry.Maka pesan dan kesan pun tercatat dalam bukutamu guru yang bersangkutan seperti padagambar di bawah ini.

Gambar 5.41. Tampilan Buku Tamu Pribadi.

12. UCAPAN ULANG TAHUNPADA ANGGOTA

Nama File: mod_CbBirthday1.1.zip (19 kb)Tersedia: ada dalam CD Bonus di folder

Databese User - Profil AnggotaFungsi: menampilkan ucapan ulang tahun pada

anggota suatu website.

Selaku pengelola suatu website komunitas,perhatian pada anggota perlu kita tunjukkan,misalnya dengan mengucapkan selamat ulangtahun pada mereka. Tapi bagaimana kalauanggota website kita telah mencapai ratusan

Anda bisa juga mengganti nama tab ProfileBook (_pb_ProfileBook) dengan nama tabBuku Tamu Pribadi pada bagian Tab Man-ager CB.

37

Ebook V

ersi Pengenalan

Sebelum

Terbitbahkan ribuan, tentu kita akan kesulitanmendata siapa saja anggota yang berulangtahun, pada hari apa, dan lain-lain.

Namun Anda jangan khawatir, CB akanmengatur semuanya untuk Anda melalui modulCbBirthday. Modul ini bekerja menggunakandata yang diperoleh dari item title TanggalLahir. Coba Anda lihat kembali ketikamembuat item title Tanggal Lahir dihalaman....

Untuk instalisasi dan pengaktifan modulCbBirthday ini, lakukanlah instalisasi danpengaktifan modul seperti biasanya. Setelah ituedit settingan modulnya menjadi seperti gambardi bawah ini.

Setelah instalisasi, pengaktifan, dan editsettingan selesai, tibalah saatnya melakukanpengecekan. Untuk melakukan pengecekan inikita perlu mengubah salah satu tanggal danbulan lahir contoh user yang telah kita buatsebelumnya. Misalnya yang akan kita ubahadalah tanggal dan bulan lahir contoh userSiswa. Caranya lakukanlah seperti langkah-langkah di bawah ini.

1. Pada halaman admin, pilih Components/Community Builder/User Manage-ment.

2. Akan muncul halaman User Manager.Klik contoh user yang akan kita gantitanggal dan bulan lahirnya, yaitu Siswa..

3. Akan muncul halaman Edit User. Pada tabContact Info, ganti tanggal dan bulanlahirnya menjadi seperti tanggal dan bulansaat ini, yaitu saat Anda menginstal modulCbBirthday sekarang ini, misalnya 8 April.Setelah selesai, klik tombol Save yangterletak di pojok kanan atas.

Untuk melihat hasilnya, bukalah halaman front-end situs Anda maka modul CbBirthday akanterlihat seperti gambar berikut ini.

Gambar 5.43. Tampilan modul CbBirthday.

Gambar 5.42. Edit settingan modul CbBirthday.

38

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Pada gambar tampilan modul CbBirthdaytersebut terlihat bahwa yang berulang tahunhari ini, yaitu 8 April, adalah siswa denganumur 17 tahun. Sementara itu juga terlihatbahwa 2 hari lagi karyawan_sekolah jugaakan berulang tahun dengan umur 33 tahun.

Nah, cukup mudah bukan untuk mengucapkanselamat ulang tahun kepada anggota websitekomunitas yang kita buat? CB memang sangatmembantu dalam hal itu semua.

Nama File: com_cbpictureadmin.zip (6 kb)Tersedia: ada dalam CD Bonus di folder

Databese User - Profil AnggotaFungsi: meyetujui (approved) foto/avatar

yang diupload anggota untuk ditampilkan.

Jika Anda perhatikan modul Login Id-Joomla,di situ terdapat sebuah foto/avatar. Fototersebut secara otomatis akan berganti fotonyadengan foto anggota bersangkutan yangsedang login. Agar foto tersebut bisa tampil,maka uploadlah foto/avatarnya melalui menuProfil Anggota. Untuk melakukannya, ikutilahlangkah-langkah seperti di bawah ini.

1. Bukalah halaman front-end website Andadan loginlah sebagai anggota, misalnyasiswa dengan password 123456.

2. Klik menu Profil Anda, maka akan munculhalaman profil anggota siswa (siswa pro-file page).

13. MENYETUJUI AVATARYANG DIUPLOAD ANGGOTA

3. Di atas tulisan siswa profile page terdapattulisan edit. Klik tulisan tersebut Edit >Update Your Image, maka akan munculhalaman submit a new image for upload.

4. Pada isian select file, klik browse, lalu pilihfoto yang akan diupload. Misalnya fotosiswa (siswa.jpg) yang terdapat dalam CDBonus di folder Databese User - ProfilAnggota. Kemudian klik upload.

Sampai di sini upload foto anggota telah suksesditandai dengan berubahnya foto/avatar sepertidi bawah ini.

Gambar 5.44. Avatar sebelum upload foto (kiri/no image) danavatar setelah upload foto (kanan/pending approval).

Pada gambar di atas terdapat avatar yangpending approval berarti fotonya telahdiupload dan menunggu persetujuan adminuntuk ditampilkan. Bagaimana agar foto/ava-tar yang telah diupload bisa muncul sehinggatidak muncul tulisan pending approval lagi?Untuk melakukan hal ini kita perlumenggunakan komponen cbpictureadmin.

Lakukanlah instalasi com_cbpictureadmin.Lihat kembali caranya seperti pada bab 3bagian 2. Setelah selesai instalasi dan masih dihalaman admin, lakukan langkah-langkahselanjutnya seperti di bawah ini.

39

Ebook V

ersi Pengenalan

Sebelum

Terbit1. Pada bagian menu, klik Components >

CB Picture Admin > Edit Config. Padapilihan Default View, pilih Need Approval.Biarkan data lainnya seperti apa adanya,lalu klik Save Config untuk menyimpanhasil settingan.

2. Maka akan muncul tulisan ConfigurationUpdated!!.

3. Beralih pada bagian menu, klik Compo-nents > CB Picture Admin > Main.

4. Maka akan muncul halaman untuk approve.Klik approve untuk siswa seperti padagambar di bawah ini.

Gambar 5.45. klik approve untuk anggotayang disetujui foto/avatar-nya untuk ditampilkan.

5. Maka akan muncul halaman yangmenanyakan apakah admin menyetujui foto/avatar yang telah diupload untukditampilkan. Jika ya, klik Approve Pic-ture. Jika tidak, klik Delete. Karena disini kita hanya melakukan pengecekan,maka klik Approve Picture.

Sampai pada langkah 5 di atas, maka Andatelah berhasil menyetujui avatar anggotawebsite untuk ditampilkan fotonya. Untukmeng-approve foto/avatar anggota berikutnya,Anda bisa langsung pada langkah 3 di atas.Untuk langkah 1 cukup sekali saja, yaitu padatahap penyetingan awal atau jika Anda inginmengubah settingannya lagi.

Selanjutnya buka halaman front-end websiteAnda dan loginlah sebagai siswa dengan pass-word 123456. Coba Anda lihat, setelah loginmaka foto di modul Login Anggota akanberubah menjadi foto anggota yangbersangkutan. Sedangkan jika anda klik menuProfil Anda, maka foto profil pun akanberubah menjadi foto anggota yangbersangkutan, dalam hal ini siswa.

Gambar 5.47. Foto anggota di halaman profil anggota

Gambar 5.46. Foto anggota di modul login

40

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

Jika Anda membuka halaman profil anggota,pada bagian atas halaman tersebut akanterdapat menu Community > About Com-munity Builder. Jika Anda klik maka akanmuncul seperti gambar seperti di bawah ini.

14. MENGHILANGKAN MENUABOUT CB

Untuk mengeceknya, bukalah halaman front-end website Anda dan loginlah sebagai anggotasiswa dengan pasword 123456. Kemudianklik menu Profil Anda. Coba Anda lihat menuCommunity > About Community Builderpasti tidak ada lagi.

Gambar 5.49. About Community Builder.

Anda bisa menghilangkan menu tersebut agartidak mengganggu tampilan website Anda.Untuk melakukannya, ikutilah langkah-langkahseperti di bawah ini.

1. Pada halaman admin, pilih Components/Community Builder/Tab Management.

2. Akan muncul halaman Tab Manager. Kliktitle Menu.

3. Akan muncul halaman Edit Tab[_UE_MENU ]. Pada bagian Parameterdi kanan kosongkan bagian settings untukFirst Menu Name dan biarkan settinganlainnya seperti apa adanya. Untukmengakhiri, klik tombol Save di pojok kananatas.

Gambar 5.48. About Community Builder.

15. MENGATURKONEKSI ANTAR-ANGGOTA

Mempunyai teman sebanyak-banyaknyaadalah prinsip dasar jika kita ingin bergabungdalam suatu komunitas. Jika kita diajakberteman dan kita menghindar tanpa sebabyang jelas, tentu ini bertentangan dengan prinsipawal ketika kita akan bergabung dalamkomunitas tersebut. Pertemanan ini ibaratmembentuk suatu keluarga yang berbeda-bedapemikiran, status, kebangsaan dan lain-laindalam suatu ikatan untuk bersama-samamencapai suatu tujuan dengan memecahkanberbagai permasalahan Pertemanan ini harus

41

Ebook V

ersi Pengenalan

Sebelum

Terbitmenjunjung tinggi prinsip kesopanan dan etikapergaulan walau pun dalam dunia maya.

Sebagai pengelola website komunitas sekolah,kita perlu menyediakan fasilitas bagi anggotauntuk mendaftar teman-teman yang seringmereka hubungi sehingga memudahkanmereka dalam berinteraksi, seperti mengirimpesan, chatting, dan lain-lain. Fasilitas ini dalamCB sudah disediakan, yaitu plug-in Connec-tion. Untuk mengaktifkan fasilitas ini, ikutilahlangkah-langkah seperti di bawah ini.

1. Pada halaman admin, pilih Components/Community Builder/Configuration.

2. Akan muncul halaman ConfigurationManager, klik tab Connection

3. Lakukan setting Connection seperti padagambar di bawah ini

4. Klik tombol Save pada pojok kanan atasuntuk menyimpan.

Harap Anda perhatikan, bahwa plugin CB Con-nections di Plugin Manager CB serta tittleConnections di Tab Manager CB juga harusdalam keadaan aktif atau published.

Agar setiap permintaan koneksi dari seoranganggota diketahui oleh anggota yang sedanglogin, maka anda mesti menambahkan settinglagi pada modul Login Id-Joomla bagian pa-rameter seperti pada gambar di bawah ini.

Untuk mengetahui apakah fasilitas koneksipada CB ini sudah berfungsi atau belum, kitaperlu mengetesnya. Untuk itu, lakukanlahpermintaan koneksi seperti pada langkah-langkah di bawah ini.1. Bukalah halaman front-end website Anda

dan loginlah sebagai anggota, misalnyasiswa dengan password 123456.

2. Klik menu Daftar Anggota, kemudian kliksalah satu anggota, misalnya guru, sehinggamuncul halaman profil anggota guru.

3. Di sini siswa melakukan permintaankoneksi/request connection pada anggotaguru. Caranya, pada bagian atas profilanggota, klik menu Connections/RequestConnections.

Gambar 5.50. Melakukan setting koneksi untuk mengaktifkanplugin Connections CB.

Gambar 5.51. Setting untuk menampilkan pending koneksi padamodul Login Id-Joomla.

42

Ebo

ok V

ersi

Pen

gena

lan

Seb

elum

Ter

bit

4. Akan muncul jendela Message, isi pesananda untuk permintaan koneksi, kemudianklik Submit.

5. Akan muncul jendela Connection Pend-ing Accepted, klik OK.

Ketika siswa melakukan permintaan koneksipada guru dengan mengklik OK pada jendelaConnection Pending Accepted, maka secaraotomatis permintaan itu akan menunggu/pend-ing sampai ada persetujuan oleh anggota yangdiminta koneksi, dalam hal ini anggota guru.

Untuk menyetujui permintaan koneksi darianggota siswa, lakukanlah langkah-langkahberikut.1. Masih di halaman front-end website Anda

dan loginlah sebagai anggota guru denganpassword 123456. (Jika tadi anggota siswamasih login, maka anggota siswa terlebihdahulu logout). Coba anda perhatikan,setelah login di bawah avatar terdapattulisan yang memberitahukan bahwa adapermintaan koneksi untuk disetujui/ac-cepted.

2. Klik menu Profil Anda, maka akan munculhalaman profil anggota guru.

Gambar 5.52. Pesan untuk permintaan koneksi olehanggota siswa.

3. Pada bagian atas profil anggota, klik menuConnections/Manage Connections,maka akan muncul halaman koneksi.

4. Pada tab Manage Action, centang tandasetuju untuk menerima koneksi, kemudianklik Update.

Gambar 5.53. Guru menerima permintaan koneksidari siswa.

5. Akan muncul tab Manage Connections,pilih type anggota yang meminta koneksitersebut yaitu Siswa. Beri sedikit komentarpada isian Comment. Kemudian klik Up-date.

Sampai di sini, data guru telah masuk dalamdaftar koneksi siswa. Anda bisa melihatnya ditab Connection pada profil siswa. Anda punbisa juga mengganti nama tab Connectiondengan nama tab Daftar Teman, dengan caramengganti title _UE_CONNECTION denganDaftar Teman di bagian Tab Manager.

43

Ebook V

ersi Pengenalan

Sebelum

Terbit

Gambar 5.54. Data guru telah masuk dalam daftar koneksisiswa, dimana tab Connection diganti namanya menjadi tab

Daftar Teman.

Setelah sebelumnya kita menggunakanberbagai modul dan plugin yang mendukungCB dalam melengkapi menu website kita,selanjutnya kita akan menggunakan sumberdaya yang ada di dalam CB itu sendiri untukmelengkapi menu website kita. Di sini kita akanmembuat tab Laporan Hasil Belajar Siswa.

16. MEMBUAT TAB LAPORANHASIL BELAJAR SISWA

BERSAMBUNGversi lengkap ada di buku