halaman 1 dari 37

Transkripsi

1 halaman 1 dari 37

2 CMS BALITBANG (BAB 1 Latar Belakang & Installasi) 1. Latar Belakang Salah satu kebijakan strategis Kementerian Pendidikan Nasional yang dituangkan dalam Renstra Depdiknas adalah pemanfaatan secara optimal berbagai sarana seperti radio, televisi, komputer dan perangkat Teknologi Informasi dan Komunikasi (TIK) lainnya untuk digunakan sebagai media pembelajaran. Diasumsikan bahwa penggunaan teknologi informasi dan komunikasi melalui multimedia sebagai cara yang efektif dan efisien dalam menyampaikan informasi. Teknologi yang mendukung cara tersebut makin disempurnakan dari waktu ke waktu. Perkembangan teknologi informasi dan komunikasi melalui multimedia begitu cepat terkadang membuat kita belum siap untuk memanfaatkannya secara maksimal. Dalam masyarakat berpengetahuan, peranan ilmu pengetahuan dan penggunaan teknologi informasi dan komunikasi sangat dominan. Namun demikian, masyarakat Indonesia yang sebagian masih agraris belum sepenuhnya mampu memanfaatkan ilmu pengetahuan dan teknologi (IPTEK) yang berkembang sangat pesat dan sekaligus sebagai penggerak utama (prime mover) perubahan masyarakat. Sejauh ini, pemanfaatan teknologi informasi dan komunikasi dalam pembelajaran di sekolah masih kurang optimal. Sebaliknya, dalam menghadapi era globalisasi, pemanfaatan teknologi informasi dan komunikasi menjadi kebutuhan untuk meningkatkan efektivitas dan efisiensi pembelajaran berbasis ICT (Information and Communication Technology). Atas dasar pemikiran tersebut, Balitbang Kemdiknas sebagai lembaga penelitian dan pengembangan di bidang pendidikan memiliki peran yang sangat strategis dalam melakukan pengembangan dan inovasi di bidang pendidikan. Salah satu kegiatan yang dilakukan Balitbang Kemdiknas adalah Pembuatan Model Website Sekolah sejak Tahun Hingga saat ini (april 2011) model tersebut telah dipergunakkan oleh 413 sekolah (data terlampir pada menu pengguna). halaman 2 dari 37

3 2. Installasi CMS BALITBANG Pastikan file cms balitbang sudah terupload ke server. Adapun langkah installasinya adalah sebagai berikut : a. Membuat database, dapat dilakukan dengan cara mengetikkan pada browser: Setelah terbuka, pada kolom Create New database isilah nama database lalu klik Create. b. Klik webtemp (0) pada gambar di atas sehingga terlihat pada ambar di bawah: Klik tombol Import. halaman 3 dari 37

4 Klik Tombol Browse untuk memasukkan file yang akan diimport c. Pilih file sqlcms.sql yang berada pada folder xampp > htdocs > webtemp, lalu klik Open. Klik tombol Go untuk mengakhirinya, sehingga dengan demikian seluruh database yang dibutuhkan dalam website telah tersedia. halaman 4 dari 37

5 d. Bukalah Browser dan ketikkan Jika berhasil maka akan muncul tampilan seperti gambar berikut. e. Buka file config.php pada folder webtemp/lib dengan menggunakan aplikasi notepad. Ganti informasi data sekolah yang terdapat pada file config.php yang telah dibuka dengan aplikasi notepad seperti pada gambar di bawah teks (yang diblok). Isikan admin pada baris $ 1 dan $ 2 (baris yang dilingkari merah). $dbname harus sama dengan nama database yang anda buat (phpmyadmin). Nama tidak perlu Contoh : kajianwebsite Jika sudah, pilih menu file > save untuk menyimpan perubahan, tutup aplikasi notepad halaman 5 dari 37

6 Cobalah hasil pekerjaan anda dengan membuka browser lalu ketikkan Untuk dapat login, masukkan Username dan Password dengan nama admin, lalu akan muncul jendela website seperti pada gambar berikut: Tampilan gambar di atas merupakan halaman utama admin untuk meng-edit isi dan tampilan website sekolah. CMS BALITBANG halaman 6 dari 37

7 (BAB 2 Mengelola Bagian Utama Website Sekolah) 1. Mengelola Admin Buka website dengan alamat dan login sebagai admin. a. Hak Akses Admin Penentuan Hak akses admin dapat ditentukan pada menu Setting > Admin seperti gambar di atas sesuai dengan hak-hak yang akan diberikan kepada user. Admin Utama membuatkan beberapa admin user yang dapat membantu mengelola atau mengupdate website. Beberapa user yang diperlukan misalnya, diantaranya: i. Admin berita ii. Admin akses data guru iii. Admin akses data siswa iv. Admin TU b. Menambah Admin Pilih menu Setting Admin > Tambah Admin isikan data user seperti pada gambar di bawah: halaman 7 dari 37

8 Tentukan hak akses yang akan diberitakan oleh user tersebut, misalkan user adalah seorang admin TU, maka hak akses yang akan diberitakan terlihat seperti gambar di bawah: Klik tombol simpan, jika muncul pesan seperti gambar di bawah ini, menandakan pengiriman data ke tidak berhasil dikarenakan tidak ada koneksi internet untuk pengiriman data, tetapi Admin TU telah berhasil dibuat. Pilih menu Setting Admin > Lihat Admin untuk mengecek apakah data Admin TU telah berhasil dibuat. c. Edit Admin Untuk merubah hak akses admin dapat dilakukan dengan meng-klik tombol Edit pada jendela Lihat Admin halaman 8 dari 37

9 Lakukan perubahan hak akses setelah jendela Perubahan Data Admin Terbuka Pada jendela Perubahan Data Admin selain hak akses yang dapat diubah seorang Admin Utama dapat mengganti password dan baru. 2. Merubah Desain Banner Atas File Banner atas terdapat di dalam folder webtemp> Images> banneratas. Terdapat 2 buah file banner atas yang dapat anda ganti dengan menggunakan aplikasi pengelola gambar. a. Mengelola Banner Atas Banner atas dapat anda ganti sesuai dengan nama sekolah anda setelah anda buat file dan disimpan dalam folder Images> banneratas Untuk mengganti banner pilih menu Setting Admin > Gambar Atas. halaman 9 dari 37

10 Pada contoh gambar di atas sudah terdapat 2 buah banner yang akan muncul pada halaman website dan akan rolling berganti setiap halaman web dibuka/refresh. Anda dapat menambah atau menghapus banner atas sesuai keinginan melalui tombol atau fasilitas tool seperti yang terlihat pada gambar di atas. Untuk menambah gambar atas, klik Tambah Gambar Atas. Pilih gambar yang anda buat pada folder webtemp > Images > banneratas dengan meng-klik tombol browse. Setelah berhasil anda masukkan maka akan tampak gambar seperti gambar di bawah : Jika ingin menghapus banner atas, berikan cek pada banner yang akan dihapus lalu klik tombol Hapus. b. Mengelola Posisi Menu Menu ini hanya digunakan oleh top level admin, adapun langkah untuk mengelolany adalah sebagai berikut: halaman 10 dari 37

11 Setelah login ke CMS, klik menu Posisi Menu Untuk menambah Posisi submenu klik tombol Tambah Posisi Menu. Akan muncul form isian, isi data dengan lengkap. Pilih posisi submenu dan kategori menu, isi urut submenu Apabila anda memasukkan script PHP khusus, klik Browse untuk mencari file script tersebut. Dalam membuat script harus memenuhi standar CMS Balitbang. Atau anda dapat memilih script fungsi yang sudah ada. Pilih Template menu. Kemudian klik tombol Simpan. Untuk menghapus data, pada kolom hapus klik tombol Hapus Untuk menyembunyikan modul pada kolom, klik tombol Status Untuk mengubah data, klik tombol, kemudian akan muncul form isian, lengkapi data yang akan diubah, kemudian klik tombol Simpan. 3. Mengelola Profil Sekolah Terdapat 10 profil yang dapat anda kelola pada halaman Admin. Untuk mengelola Profil Sekolah terdapat pada menu Setting Admin > Menu & Profil. halaman 11 dari 37

12 Seluruh isi profil bisa di-edit pada menu bagian Daftar Menu & Profil seperti gambar di bawah, anda dapat meng-edit pada bagian kolom Edit dengan menggunakan fasilitas Editor Khusus atau dengan Source HTML a. Mengelola Profil dengan menggunakan Editor Khusus Klik tombol Editor Khusus pada Visi dan Misi, akan tampak seperti pada gambar di bawah: halaman 12 dari 37

13 Menu Utama : untuk menentukan visi dan misi merupakan sub menu dari Profil Tampilkan : Admin dapat menampilkan atau menyembunyikan menu. Link : Link diisi 0 apabila tombol menu/submenu berupa konten profil. Target : self menampilkan link pada browser dan tab yang sama, Blank menampilkan link website pada tab yang berbeda. Urut : menentukan menu tersebut berada pada urutan ke berapa pada sub menu. Klik tombol Simpan jika telah selesai meng-edit. b. Mengelola profil dengan menggunakan Source HTML Bagi anda yang telah terbiasa menggunakan script HTML dapat meng-edit. Profil dengan menggunakan Source HTML seperti terlihat pada gambar di atas Untuk menu-menu yang lain hampir mirip cara pengeditan seperti langkah-langkah di atas. halaman 13 dari 37

14 CMS BALITBANG (BAB 3 Mengisi Data Website Sekolah) 1. Data Semester Data semester yang dimaksud di sini adalah jumlah semester yang digunakan pada sekolah, jika hanya terdapat 2 semester maka cukup membuat 2 semester pada halaman Admin dengan memilih menu Setting Admin > Semester. Anda dapat menambah atau mengurangi jumlah semester dengan meng-klik tombol Hapus atau Tambah Semester. 2. Data Jurusan / Program Studi Data Jurusan/Program Studi sekolah dapat ditambahkan atau dihilangkan pada menu Setting Admin > Jurusan/Program. 3. Data Pelajaran Data Pelajaran Studi sekolah anda dapat ditambahkan atau dihilangkan pada menu Setting Admin > Pelajaran. halaman 14 dari 37

15 Klik tombol Edit pada salah satu pelajaran yang akan di-edit. Hasil dari Data jurusan / Program Studi 4. Data Guru / Pegawai a. Import secara manual Setelah login ke CMS, klik menu Data Guru > Direktori Guru. Untuk menambah data guru klik tombol Tambah Guru. Akan muncul form isian, isilah data dengan lengkap, Pilih file dengan klik tombol Browse, format file.gif atau.jpg. Kemudian klik tombol Simpan. halaman 15 dari 37

16 Untuk menghapus data, berilah tanda check ( ) pada data yang akan dihapus, (bisa lebih dari satu), kemudian klik tombol Hapus. Untuk mengubah data klik tombol, kemudian akan muncul form isian, lengkapi data yang akan diubah, kemudian klik simpan. b. Import dari file Excel Klik menu Data Guru kemudian klik Import Data Guru. Buat format Data Guru dalam bentuk Excel dengan menekan tombol Format. Setelah disimpan, isikan data guru ke dalam file ini, lalu import melalui Pilih File Import dengan meng-klik tombol Browse untuk mengambil file tersebut. Klik tombol Import maka sistem akan memproses data. halaman 16 dari 37

17 5. Data Kelas Setelah login ke CMS, klik menu Setting Admin, kemudian klik Data Kelas. Untuk menambah Data Kelas klik tombol Tambah Kelas. Akan muncul form isian, isi data dengan lengkap. Masukkan kelas, NIP wali kelas dan pilih tingkatnya. Kemudian klik tombol Simpan. Untuk menghapus data, berilah tanda check ( ) pada data yang akan dihapus, (bisa lebih dari satu), kemudian klik tombol Hapus. Untuk mengubah data klik tombol, kemudian akan muncul form isian, lengkapi data yang akan diubah, kemudian klik Simpan. 6. Data Guru Mengajar Setelah login ke CMS, klik menu Setting Admin, kemudian klik Data Mengajar. Untuk menambah Data Mengajar klik tombol Tambah Mengajar. Akan muncul form isian, isi data dengan lengkap. Masukkan NIP dan nama Guru pengajar, pilih pelajaran dan kelas. halaman 17 dari 37

18 Kemudian klik tombol Simpan. Untuk mengubah data klik tombol bawah ini:, kemudian akan muncul tampilan seperti di Klik tombol, apabila akan diubah data kelasnya kemudian klik tombol Simpan. Untuk menghapus data, berilah tanda check( ) pada data yang akan dihapus, (bisa lebih dari satu), kemudian klik tombol Hapus. 7. Mengelola Data Siswa a. Import secara manual Setelah login ke CMS, klik menu Data Siswa. Untuk menambah data siswa klik Direktori Siswa, kemudian klik Tambah Siswa. Akan muncul form isian, isi data dengan lengkap. Pilih file dengan klik tombol Browse, format file.gif atau.jpg. Kemudian klik tombol Simpan. halaman 18 dari 37

19 Untuk menghapus data, berilah tanda check ( ) pada data yang akan dihapus, (bisa lebih dari satu), kemudia klik tombol Hapus. Untuk mengubah data klik tombol, kemudian akan muncul form isian, lengkapi data yang akan diubah, kemudian klik Simpan. b. Import dari file Excel Setelah login ke Administrator, klik menu Data Siswa pilih Import Siswa Untuk menambah Data Siswa klik Format, maka akan keluar perintah untuk menyimpan file data siswa yang berupa file excel. Pilih Save File lalu klik OK. Setelah format file excel tersimpan di folder yang telah anda tentukan langkah selanjutnya membuka file tersebut untuk diisi sesuai dengan petunjuk yang diberikan, terutama penulisan format tanggal lahir, dan format lainnya. Setelah pengisian data siswa selesai dilakukan penyimpanan kembali dengan cara: klik file > Save As > (pada Save as type: Microsoft Office Excel Workbook) lalu klik save. halaman 19 dari 37

20 Untuk mengimport data siswa yang telah diisi, klik Browse, selanjutnya akan muncul gambar seperti di bawah ini: Pilih file yang akan diimport, selanjutnya klik IMPORT, jika sewaktu mengisi data siswa dengan format excel yang benar maka setelah meng-klik Import akan ditampilkan gambar seperti di bawah ini: halaman 20 dari 37

21 CMS BALITBANG (BAB 4 Mengisi Fitur Website Sekolah) Content Management System hal yang wajib dikuasai oleh seorang administrator web agar website terlihat dinamis dikarenakan informasi yang ada selalu up to date. Pada bab ono akan dijelaskan berbagai cara mengelola konten yang diperlukan diantaranya: Pengelolaan Agenda, Artikel, Info Pengelolaan Opini, Link, Galeri Foto, Peta Situs dan Kontak Sekolah 1. Mengelola Agenda Meng-edit Agenda Klik tombol Edit lalu ganti judul serta isi agenda sesuai agenda yang diinginkan. Arahkan kursor pada tombol kalender lalu klik tanggal yang sesuai dengan agenda yang direncanakan untuk menentukan tanggal awal dan akhir agenda. halaman 21 dari 37

22 Klik tombol Warna atau isikan kode warna untuk memberikan warna tanggal agenda. Pilih salah satu warna yang anda inginkan lalu klik tombol simpan untuk menyimpan perubahan warna tanggal agenda. Anda dapat melihat agenda atau Menambah Agenda pada menu yang muncul seperti pada gambar di bawah ini: Klik Tampilkan Web untuk melihat hasil pekerjaan anda. Hasil agenda yang telah anda edit akan terlihat seperti pada gambar di bawah: Menghapus dan Menambah Agenda Anda dapat menghapus atau menambah Agenda pada toombol-tombol yang terlihat pada gambar berikut: halaman 22 dari 37

23 Untuk menghapus Agenda, berikan tanda centang pada kotak Agenda yang ingin dihapus, lalu klik tombol Hapus. Untuk menambah Agenda, klik Tambah Agenda lalu isi agenda yang ingin dimasukkan seperti pada langkah meng-edit Agenda. 2. Mengelola Artikel Pada dasarnya mengelola Artikel hampir mirip dengan mengelola Agenda, hanya saja terdapat perbedaan pada saat meng-edit Artikel menyerupai aplikasi pengolah kata. Pada halaman Admin pilih menu Fitur > Artikel maka akan tampak seperti gambar di bawah ini: Meng-edit Artikel Klik tombol edit untuk meng-edit isi Artikel yang pernah dibuat. halaman 23 dari 37

24 Meyisipkan Gambar Klik Insert/EditImage pada toolbar, maka akan muncul kotak dialog Image / Properties seperti tampak pada gambar berikut: Klik tombol Browse Server untuk memilih file gambar. File-file gambar yang sudah terdapat di dalam folder webstamp akan tampil seperti pada gambar di atas dan bisa langsung anda gunakan sebagai gambar pendukung artikel. Jika ingin mengambil file gambar dari lokasi lain atau belum terdapat pada folder webtemp anda dapat meng-klik tombol Browse pada bagian bawah kotak dialog. halaman 24 dari 37

25 Pilih file yang akan digunakan lau klik open, maka file tersebut akan masuk ke dalam folder webtemp seperti terlihat pada gambar: Klik gambar yang baru anda masukkan. Gambar akan terisi pada bagian URL, dan pada bagian Preiew belum nampak gambar yang anda masukkan. Jika anda ingin menampilkan gambar pada preview, anda harus menambahkan baris path:../../../userfiles/image/nama_gambar.jpg seperti pada gambar di bawah. halaman 25 dari 37

26 Isikan nilai width dan height agar gambar yang ingin dimasukkan tidak terlalu besar, anda dapat menentukan letak gambar terhadap teks dengan mengatur pada bagian Align. Setelah selesai klik OK. Klik menu Tampilkan Web untuk melihat hasilnya. Klik Selengkapnya, dan akan terlihat seperti pada gambar di bawah: Untuk menghapus dan menambah artikel Pengelolaan sebelumnya. sama langkahnya dengan langkah halaman 26 dari 37

27 Data Jurusan/Program Studi sekolah anda dapat ditambahkan atau dihilangkan pada menu Setting Admin > Jurusan/Program. 3. Mengelola Info Sekolah Setelah login ke CMS klik menu fitur, selanjutnya menu Info Sekolah. Untuk menambah informasi klik Tambah Informasi. Akan muncul form isian, isi data dengan lengkap. Kemudian tekan tombol Simpan. Untuk menghapus data, berilah tanda centang pada data yang akan dihapus, kemudian klik tombol Hapus. Untuk mengubah data klik tombol edit, kemudian akan muncul form isian, lengkapi data yang akan diubah, kemudian klik Simpan. halaman 27 dari 37

28 4. Mengelola Berita Setelah login ke CMS, klik menu Filter. Untuk menambah berita klik tombol Berita, klik Tambah Berita. Akan muncul form isian, isi data dengan lengkap. Apabila ada gambar, silahkan browse file, pilih file formnat.jpg. Kemudian tekan tombol Simpan. Untuk menghapus data, berilah tanda centang pada data yang akan dihapus, kemudian klik tombol Hapus. Untuk mengubah data klik tombol, kemudian akan muncul form isian, lengkapi data yang akan diubah, kemudian klik tombol Simpan. halaman 28 dari 37

29 5. Mengelola Opini Menu ini merupakan fasilitas untuk memvalidasi opini member atau menghapus opini member. Klik No Valid untuk mengubah status menjadi Valid dan dapat dibaca secara umum oleh semua user website. Klik Valid untuk mengubah status menjadi No Valid. Klik Delete untuk menghapus opini. 6. Mengelola Link Web Setelah login ke CMS klik menu Fitur, selanjutnya klik menu Link Web. Untuk menambah Link klik tombol Tambah Link Web. Akan muncul form isian, isi data dengan lengkap. Pilih jenis dari link website tersebut. Kemudian tekan tombol Simpan. halaman 29 dari 37

30 Untuk menghapus data, berilah centang pada data yang akan dihapus, kemudian klik tombol Hapus. Untuk mengubah data klik tombol data yang akan diubah, kemudian klik Simpan., kemudian akan muncul form isian, lengkapi 7. Mengelola Galeri Setelah login ke CMS klik menu Fitur, selanjutnya klik menu Galeri Photo. Untuk menambah kelompok album photo, klik Tambah Album, lalu isi Judul Album dan Simpan. Dan untuk menambah foto pada kelompok Album tertentu klik pada kolom Tambah Photo. Akan muncul form isian, isi data dengan lengkap. Pilih file dengan klik tombol Browse, format file.jpg. ukuran file tidak lebih dari 200 kbyte. Kemudian klik tombol Simpan. halaman 30 dari 37

31 Untuk menghapus data, berilah centang pada data yang akan dihapus, kemudian klik tombol Hapus. 8. Mengelola Peta Situs Setelah login ke CMS, klik menu Setting Admin, lalu pilih Menu & Profil. Untuk melakukan edit pada peta situs klik ikon jika sudah diedit, klik Simpan. pada kolom edit. Selanjutnya 9. Mengelola Kontak Sekolah Setelah login ke CMS, klik menu Setting Admin, lalu pilih Menu & Profil. halaman 31 dari 37

32 Untuk melakukan edit pada Kontak Sekolah, klik ikon Selanjutnya jika sudah diedit, klik Simpan. pada kolom edit. halaman 32 dari 37

33 CMS BALITBANG (BAB 5 Mengatur Desain Template Website Sekolah) Secara umum indah tidaknya website adalah saat ppertama website tersebut dibuka atau dikunjungi user, dan user akan merasa betah berlama-lama membrowsing website yang anda buat bila tampilannya menarik dan kontentnya bermanfaat. Untuk membuat website yang cantik dan menarik sebenarnya bisa memanfaatkan template-template yang telah disediakan dan itu tidaklah sulit karena pada CMS ini sudah dilengkapii dengan fasilitas pengaturan template baik secara manual maupun dengan cara bantuan software. Mengatur Desain Menggunakan Artister Langkah-langkah penggunaan software Artisteer Install software Artisteer. Setelah proses instalasi selesai klik shortcut Artisteer di desktop, klik pilihan html page untuk memulainya. Pilih menu Layout untuk memilih layout sesuai dengan tampilan website anda, tampilannya seperti pada gambar di bawah ini: halaman 33 dari 37

34 Untuk mengatur lebar website klik menu Sheet pilih Width > pilih yang bernilai 1000 pixel. Untuk mengatur tinggi rendahnya tampilan header klik menu header > height > 150 pixel. Jika benar tampilannya seperti pada gambar di bawah ini: halaman 34 dari 37

35 Langkah selanjutnya tinggal mengatur background, pewarnaan dan menu. Hal tersebut bisa dicoba dengan membuka menu Background, Color & Fonts / Menu. Ilustrasinya seperti pada gambar berikut: Sampai di sini pengaturan tempalate sudah selesai, selanjutnya tinggal menyimpan hasil pengaturan template tersebut dengan melakukan: klik file > Html Page. Tentukan letak folder penyimpanannya, defaultnya Artisteer sudah membuatkan folder pada My Documents seperti gambar berikut ini: halaman 35 dari 37

36 Copy folder (dalam contoh ini nama folder aku ) yang berisi file-file Artisteer ke folder sub folder temp yang letaknya berada di folder webtemp Langkah berikutnya kopikan file index tpl.htm yang berada di folder webtemp/temp/art-alan/ atau yang ada di folder art-biru ke folder aku. Buka file config.php yang berada di folder lib, pada baris ke 14 ganti dengan tulisan berikut : $alan=../temp/aku/ ; halaman 36 dari 37

37 Untuk mencoba template yang telah dibuat, buka browser dan ketikkan maka tampilan website anda sudah berubah. CV MITRA TEKNOLOGI SEJATI SMS SIAP MEMBANTU PELATIHAN DAN PENGEMBANGAN WEB SITE SEKOLAH MENGGUNAKAN CMS BALITBANG halaman 37 dari 37