tutorial pembanguan web sekolah cms balitbang m · membangun web sekolah dengan cms 2 bab 1...
TRANSCRIPT
# Fajar Suharmanto
1 Membangun Web Sekolah Dengan CMS
TUTORIAL PEMBANGUAN WEB SEKOLAH
CMS BALITBANG
embangun web sekolah kini bukanlah hal yang sulit , banyak cara yang kini bisa dilakukan
oleh pihak sekolah salah satunya menggunakan CMS gratis. Dalam program CMS ini sekolah
tidak terlalu dipusingkan dengan kode-kode HTML yang sangat rumit seperti membangun
web dengan Dreamweaver. Website sekolah adalah salah satu ‘senjata’ bagi sekolah untuk
menunjukan jati diri mereka pada orang banyak. Sekaligus sebagai media informasi bagi
orang-orang luar yang ingin mengetahui lebih lengkap tentang sekolah tersebut. Di sisi lain, website sekolah
bisa dijadikan sebagai ajang promosi sekolah saat tahun ajaran baru.
Berikut ini adalah 3 manfaat website sekolah :
1. Memperkenalkan profil sekolah sehingga masyarakat luas mengetahui informasi apapun tentang sekolah
seperti : Fasilitas yang tersedia, Kurikulum intra dan ekstra kurikuler termasuk materi pebelajaran online dan
pustaka maya, prestasi yang telah diraih oleh sekolah, informasi mengenai perencanaan sekolah dan
kebutuhan biaya, macam dan kualitas kegiatan-kegiatan yang diselenggarakan sekolah. Jumlah dan kualifikasi
tenaga pendidik dan kependidikan yang ada.
2. Sebagai media komunikasi antara sekolah dengan dunia luar, bentuk komunikasi yang terjalin diantaranya
: komunikasi antara siswa dengan guru terkait pelaksanaan pembelajaran, komunikasi antara siswa melalui
media forum, komunikasi antara orangtua siswa/ calon siswa dengan sekolah melalui media email ataupun
form kontak di website
3. Sebagai media resmi sekolah untuk media publikasi informasi ke masyarakat, seperti : pengumuman, Pers
Release, dan Berita resmi sekolah.
Sayangnya, ada beberapa hal sering terjadi pada website-website sekolah. Mulai dari kurang update
karena tidak punya tim pengurus/redaksi yang siap mengurus dan memberi informasi lewat website sekolah
hingga masalah kehabisan bandwidth karena hosting yang kurang mencukupi.
Oleh karena itulah diperlukan adanya sistem pengelolaan website seperti memiliki struktur organisasi
pengelola perangkat teknologi secara terstruktur yang menangani perangkat keras, perangkat lunak, tim
desain web dan tim pengelola informasi serta tim redaksi yang mengelola sistem publikasi dan komunikasi.1
Termasuk didalamnya terdapat tim admin website yang kuat, dinamis dan penghargaan dalam hal salary.
Dalam tutorial kali ini kami akan membantu peserta pelatihan untuk belajar pengembangan web dari
mulai nol, yaitu dari mulai pertama, pembangunan localhost offline dimasing-masing computer lalu kedua ,
intalasi CMS web yang sudah dilaunching oleh tim IT kemendiknas. Serta bagian ketiga bagian editing template
(tampilan) untuk disesuaikan dengan kebutuhan sekolah kita.
1 http://natuna.org/pentingnya-membangun-website-sekolah-di-natuna.html
M
# Fajar Suharmanto
2 Membangun Web Sekolah Dengan CMS
BAB 1 INSTALASI server Langkah pertama dalam dalam membuat Web adalah melakukan instalasi web server local (PHP, MySQL,
Apache) dengan menggunakan XAMP. Dalam tutorial ini kami sudah menyediakan CD materi berisi semua
content dan software yang dibutuhkan.
Langkah Instalasi
1. Bukalah installer XAMPP versi win32-1.7.7-V9-installer. Klik dua kali sehingga otomatis akan membuat folder
C:/xampp
2. Setelah instalasi maka muncul XAMPP control Panel. Klik Start khusus untuk Apache dan MySql, sehingga
berubah status menjadi “Running”.
3. Bukalah Internet browser
(Chrome/Firefox/Safari) lalu ketikan
localhost sehingga muncul XAMPP.
Pastikan setiap pengeditan web
offline Xampp control panel harus
diaktifkan.
# Fajar Suharmanto
3 Membangun Web Sekolah Dengan CMS
3. Dihalaman XAMPP pilihlah bahasa Inggris sebagai bahasa pengantar . Kemudian pilih Php MyAdmin
4. Selanjutnya sampai dihalaman PhpMyadmin klik “basis data”. Maka tahap awal instalasi server telah selesai.
Tampilan Basis data (data base) dimana upload cms akan ada diposisi ini.
# Fajar Suharmanto
4 Membangun Web Sekolah Dengan CMS
BAB 2 INSTALASI web
Setelah selesai installasi web server, dilanjutkan dengan
installasi Website Sekolah. Untuk menginstallnya, pastikan
folder yang berisi materi file website sekolah (nama folder
“websekolah” ) sudah dicopy ke folder htdocs yang
berada pada drive C > Xampp, seperti gambar di samping
ini:
Langkah-langkah instalasi web sebagai berikut:
1. Bukalah CD bonus dalam tutorial ini. Carilah folder inti yaitu “websekolah”, tetapi sebelumnya instalasi
dulu software pendukung yaitu “winzip” atau “winrar” untuk pembuka sistem extract.
2. Setelah instalasi winzip ataupun winrar lakukan extract pada file bernama “websekolah”. Klik kanan file
tersebut lalu pilih Extract Files…
3. Hasilnya akan menjadi sebuah folder bernama “websekolah” bedanya
folder ini tidak tersektrak seperti sebelumnya. Selanjutnya pindahkan
(copy paste) folder ini menuju “C:/xampp/htdocs”
# Fajar Suharmanto
5 Membangun Web Sekolah Dengan CMS
Folder websekolah telah berpindah
4. Kita akan membuat database web. Bukalah browser internet dan ketikan “http://localhost/phpmyadmin”.
Lalu pilih basis data (database)
5. Ketikan di kolom “ciptakan databasebaru” nama database kita, misalnya “sekolahDB” lalu klik ciptakan.
Database berhasil dibuat
# Fajar Suharmanto
6 Membangun Web Sekolah Dengan CMS
5. Lalu klik database yang dibuat tadi “sekolahdb”
6. Pada bagian database yag dibuat tadi klik import.
7. Klik pilih file. Lalu cari file bernama “sql-cms.sql’, file ini bisa ditemukan di
C:/Xampp/htdocs/websekolah/sql-cms.sql
8. Setelah filenya didapat pilih open. Selanjutnya klik go dibagian paling bawah
# Fajar Suharmanto
7 Membangun Web Sekolah Dengan CMS
info bahwa upload database telah berhasil
9. Buka C:/Xampp/htdocs/websekolah/lib . Cari file bernama “config.php” .
10. klik kanan file config.php dan open with
notepad lalu ok
11. Aturlah file config seperti contoh dibawah ini. Sesuaikan dengan nama sekolah dan admin sekolah anda.
Jika sudah klik crtl-S (simpan)
Perhatikan pada $
dbname, tuliskan
sesuai nama database
yang tadi dibuat.
Pada password
kosongkan saja
# Fajar Suharmanto
8 Membangun Web Sekolah Dengan CMS
12. selanjutnya buka internet browser lalu ketikan http://localhost/websekolah
Dan untuk membuka admin bukalah internet browser lalu ketikan http://localhost/websekolah/admin
Maka preview web sudah selesai. Inilah cms balitbang yang akan kita lakukan modifikasi.
Dengan demikian bab intalasi telah selesai.
# Fajar Suharmanto
9 Membangun Web Sekolah Dengan CMS
BAB 3 Mengelola web sekolah Dalam bab ini kita akan melakukan pengelolaan web sekolah diantaranya adalah:
A. Mengganti password admin
B. Mengganti banner web (kop web)
C. Menambah profil sekolah
A. Mengganti Password Admin
Kita diharapkan dapat mengganti password yang terlebih dahulu dibuat oleh instalasi awal. Dengan
mengguakan username dan password baru diharapkan hanya orang-orang tertentu saja yang mengetahuinya.
1. Masuklah ke http://localhost/websekolah/admin. lalu tuliskan user : admin dan password : admin lalu
login.
2. Setelah masuk ke tampilan admin, klik “Setting Admin” lalu klik “lihat admin”
# Fajar Suharmanto
10 Membangun Web Sekolah Dengan CMS
3. Setelah masuk ke “LIhat admin” maka hapuslah usename “alan”
4. Klik ok . lalu Pilih
Setting Admin lalu pilih
“tambah admin”
5. Isikan username ,
password admin
dan email admin
terbaru . dibagian
bawah centang
“checklist semua”
lalu klik “simpan”
6. Klik logout lalu
masuk kembali ke
http://localhost/we
bsekolah/admin.
# Fajar Suharmanto
11 Membangun Web Sekolah Dengan CMS
7. Masukan username dan password terbaru lalu login , kini username dan password hanya kita yang tahu.
B. Mengganti banner web (kop web) cara 1
Pada bagian ini yang diperlukan adalah software grafis seperti Adobephotoshop (versi bebas).
1. Bukalah adobe photoshop. Klik open lalu carilah file gbanner1.jpg yang terletak di
C: / Xampp/htdocs/websekolah/images/banneratas
2. Setelah gambar terbuka maka tumpuklah gambar tersebut dengan gambar profil sekolah kita. Bukalah
Bonus CD tutorial ini lalu buka folder gambar dan open file bernama “header_school.jpg”
Gambar header yang akan mengganti
gambar awal
# Fajar Suharmanto
12 Membangun Web Sekolah Dengan CMS
3. Pindahkan gambar terbaru ke gambar lama dengan dengan “move tool”. Cukup menekan dan menahan
gambar lama ke gambar baru
4. Gunakan Ctrl-T untuk mengatur lebar dan menutupi gambar lama.
5. gunakan juga maintain aspect ratio untuk
mengatur skala gambar agar tetap berubah.
6. Pada layers, pilih background lalu klik “delete layer”
# Fajar Suharmanto
13 Membangun Web Sekolah Dengan CMS
7. Selanjutnya klik file> save as pada folder C: / Xampp/htdocs/websekolah/images/banneratas. Arahkan
pada file gbanner1.jpg. Jangan lupa pilih format JPG
8. Buka internet browser ketikan http://localhost/websekolah. kini gambar header telah berubah ( catatan:
karena terdapat dua gambar maka header akan berubah otomatis bergantian dengan gambar banner ke dua.
Untuk itu lakukan pula perubahan pada gambar kedua)
Mengganti banner web (kop web) dengan cara ke -2
Cara lain memasukan gambar atas adalah :
1. Masuklah ke Masuklah ke http://localhost/websekolah/admin.
# Fajar Suharmanto
14 Membangun Web Sekolah Dengan CMS
2. Pilih setting admin dan pilih gambar atas
3. Pilih setting admin dan pilih “Tambah Gambar Atas”
4. Klik Pilih file. Sebelumnya tulis judul “header”
5. Ambilah gambar yang ada di CD bonus tutorial ini klik open. Selanjutnya klik simpan. Dan klik refresh
6. Tampilan 3 gambar header kini.
Catatan: memasukan gambar lewat
admin beresiko tampilan yang tidak
teratur dalam skala aslinya.
# Fajar Suharmanto
15 Membangun Web Sekolah Dengan CMS
C. menambah profil sekolah
Untuk mengganti profil sekolah maka dibutuhkan langkah-langkah seperti berikut:
1. Masuklah ke admin dan isikan username dan password
2. Masuklah ke setting admin dan pilih “Menu & Profil”
3. Didalam menu profil terdapat menu sekolah yang sudah siap dan siap di edit sesuai dengan kebutuhan
sekolah. Untuk melakukan pengeditan kita bisa mengklik kolom edit dengan symbol Word
4. Misalnya kita akan mengganti menu profil dengan submenu Visi dan Misi sekolah. Maka sorot submenu
“visi dan misi” lalu klik edit
5. Ketika kita mengklik edit pada visi dan misi maka akan muncul tampilan seperti di Microsoft word. Ubahlah
visi dan misi contoh tersebut dengan visi misi sekolah anda yang baru (disesuaikan)
# Fajar Suharmanto
16 Membangun Web Sekolah Dengan CMS
6. Selesai melakukan editing klik “simpan”
7. Lakukan hal yang sama pada semua sub menu dan sesuaikan dengan profil sekolah masing-masing.
Untuk melakukan pengecekan apakah visi dan misi berhasil ditulis maka buka http://localhost/websekolah
lalu klik profil > visi misi sekolah
# Fajar Suharmanto
17 Membangun Web Sekolah Dengan CMS
BAB 4 Melengkapi data sekolah Pada bagian bab ini kita akan mengisi semua data yang berhubungan dengan administrasi sekolah. Dimulai dengan jumlah Semester sampai dengan pengelolaan SPP
A. menambah atau menghilangkan data jurusan/prodi
Masuk kehalaman admin pilih Setting Admin> Semester
Jika sekolah kita bukan sekolah kejuruan (SMK) maka hapuslah jurusan dengan member tanda centang pada
setiap jurusan
B .Data semester
Masuk kehalaman admin pilih Setting Admin> Semester
Karena rata-rata sekolah mempunyai 2 semester maka hapuslah data semester 3
dengan memberikan ceklist sebelumnya pada data semeseter 3
C .Data pelajaran
Masuk kehalaman admin pilih Setting Admin> Pelajaran. Beri centang bagi pelajaran yang ingin dihapus.
Sedangkan bagi pelajaran baru yang ingin
datambah maka pilih “tambah Pelajaran”
# Fajar Suharmanto
18 Membangun Web Sekolah Dengan CMS
Isikan kode pel, pelajaran dan pelajaran raport. Lalu klik simpan.
Kini pelajaran IPS sudah masuk kedalam kumpulan pelajaran
Isikan kode pel, pelajaran dan pelajaran raport. Lalu klik simpan.
d .Data guru
1. Untuk data guru maka pilih “Data guru”. Piliih “Direktori guru” untuk menghapus data guru sebelumnya .
caranya pilih direktori Guru. Lalu centang semua guru lalu pilih hapus.
2. Untuk memasukan data guru maka pilih “tambah guru”
3. Tambahkan foto profil dengan klik “pilih File” .
4. klik open.lalu
simpan
# Fajar Suharmanto
19 Membangun Web Sekolah Dengan CMS
3. Kita juga bisa langsung mengisi data guru dengan cara meng export dari exel . Caranya adalah buka Data
guru> Import guru . Lalu klik “Format” untuk mengambil format excel. Dimana format pengetikan data guru
harus sesuai dengan data excel tersebut
4. Buka Download “Format Guru” di Excel. Lalu ketikan data guru tersebut lengkap.
Lalu save as file tersebut dengan nama
“FormatGuru.xls” (jangan lupa lokasi
dimana kita menyimpannya.
5. Klik “Pilih file” dan open file format guru tadi.
6. Setelah file terpilih klik “import”
d .Data Kelas
1. Untuk mengisi data kelas maka masuklah ke setting admin > data kelas. Untuk menambah daftar keles
beserta guru pengajar maka klik “tambah kelas”
# Fajar Suharmanto
20 Membangun Web Sekolah Dengan CMS
2. isi data yang tertera lalu “simpan”. Klik lihat kelas untuk melihat perubahan data kelas.
3. Kini data guru sudah bertambah.
Untuk menghikangkan data guru
dan kelas, silakan centang checklist
semua dan klik hapus.
E. Data guru pengajar
1. Sedangkan untuk proses pengisian data guru pengajar maka pilih Data Guru > Data Mengajar lalu pilih
“tambah mengajar”. Data ini digunakan jiga guru mengajar lebi dari satu pelajaran.
2. Jika data guru terisi lengkap maka muncul nama-nama guru pengajar. Maka tambahkan nama pelajaran lalu
klik “Simpan”
F. Data siswa
1. Untuk pengisian data siswa masuklah ke menu data siswa
selanjutnya pilih direktori siswa.
# Fajar Suharmanto
21 Membangun Web Sekolah Dengan CMS
2. Untuk pengisian klik tambah siswa
3. Isikan data siswa baru.lalu klik simpan. Lakukan hal yang sama untuk tiap kelas
3. Klik pilih untuk melihat penambahan siswa.
# Fajar Suharmanto
22 Membangun Web Sekolah Dengan CMS
BAB 4 Mengisi konten sekolah Pada bagian akhir bab ini kita akan mengisi web sekolah dengan informasi-informasi yang berhubungan dengan sekolah itu sendiri ataupun berita (content) yang berhubungan dengan informasi seputar pendidikan. A. mengisi agenda sekolah
1. Masuk kedalam admin lalu pilih Fitur> Agenda . Didalam agenda lakukan editing pada agenda yang
sudah ada
2. isikan info agenda yang terbaru lalu klik simpan. Lalu pilih lihat agenda
3. Buka http://localhost/websekolah lalu lihat pada modul agenda. Jika tanggal 15 Okt diklik maka muncul
info kegiatan sekolah.
# Fajar Suharmanto
23 Membangun Web Sekolah Dengan CMS
B. mengisi artikel
Dalam mengisi artikel web sama halnya seperti kita mengisi konten pada blog. Bahkan cms ini hampir
menyerupai aplikasi Microsoft word.
1. Langkah awal masuk menu Fitur> Artikel
2. Lakukan edit pada pada salah satu artikel yang akan diganti.
3. Isikan berita terbaru menggantikan berita yang lama.
4. Tambahkan gambar seba gai ilustrasi. Klik “Pilih Gambar”
5. lalu pilih gambar dari hardisk atau computer kita ,sendiri lalu klik open
# Fajar Suharmanto
24 Membangun Web Sekolah Dengan CMS
6. Untuk pengecekan masuklah ke http://localhost/websekolah lalu klik F5 .
7. Untuk melihat artikel secara utuh , klik “Selanjutnya” ada dibagian bawah kanan.
C. mengisi berita bergerak
Ditampilan awal kita melihat ada berita yang berganti-ganti (slide show), module tersebut dapat diganti
didalam menu berita caranya sebagai berikut:
1. Masuk ke admin lalu klik Fitur > Berita
# Fajar Suharmanto
25 Membangun Web Sekolah Dengan CMS
2. Didalam menu berita munculah banyak contoh daftar berita yang siap diganti dengan berita versi sekolah
kita.
3. Ambil satu berita yang akan kita ganti misalnya berita nomor 1. Lalu klik edit
3. Lakukan pergantian berita seperti pada pembuatan artikel. Baik berita, dan foto. Setelah itu simpan.
4. Cek pada tampilan web sekarang di http://localhost/websekolah lalu klik F5 . Klik selanjutnya untuk
melihat berita secara lengkap
# Fajar Suharmanto
26 Membangun Web Sekolah Dengan CMS
5. Tampilan berita secara utuh.
D. memasukan MAteri ajar
1. Untuk membuat materi ajar kita bisa langsung masuk ke admin. Lalu masuk ke fitur > materi ajar
2. Pilih pelajaran Bahasa Indonesia. Lalu klik tambah materi ajar.
3. Karena file ini harus bisa didownload oleh murid lewat pdf maka
siapkan materi kita yang berasal dari word lalu kita jadikan PDF.
Caranya :
a. Install driver PDF yang ada di bonus CD ini. (close program word
sebelumya)
# Fajar Suharmanto
27 Membangun Web Sekolah Dengan CMS
b. Install driver sampai selesai
c. Buka file materi yang akan dibuat pdf. Misalnya pelajaran bahasa Indonesia. (buka cd bonus materi bahasa
Indonesia). Lalu save PDF dan Publish.
d. Kini file word kita sudah berextensi PDF. Silakan buka file kita tadi
4. Kembali ke admin maka klik “tambah
Materi Ajar”
# Fajar Suharmanto
28 Membangun Web Sekolah Dengan CMS
5. Ambil materi yang sudah berbentuk PDF tadi lalu klik Open
6. Setelah file masuk lalu klik “simpan”. Cek Materi ajar di Localhost/websekolah
7. Pilih Pelajaran Bahasa Indonesia. Lalu klik materi yang tadi kita buat. Yaitu materi “Hubungan Kemaknaan”
8. Selanjutnya klik “Download File”. Jika aktivasi member telah dikatifkan maka file bisa diambil.
# Fajar Suharmanto
29 Membangun Web Sekolah Dengan CMS
Demikian tutorial ini. Masih banyak fitur yang belum dijelaskan seperti pembuatan halaman komunitas,
gallery dll. Semoga berguna bagi kawan-kawan semua.
Untuk pemasangan domain dan hosting dari desain yang dibuat silakan hubungi tim tutorial kami.
Terima kasih wassalamu ‘alaikum wr wb. Salam IT
*BIODATA PENULIS
Fajar Suharmanto , lahir di Jakarta beberapa tahun yang lalu. Kini tinggal di
Jatikramat 2 Kota bekasi.Pernah Sekolah di SDN Jatikramat 1, SMP di 272
lubang buaya, SMA N di 67 halim, kuliah S1 di FKIP UNS jurusan Penidikan Teknik
Pembangunan dan kini melanjutkan studi S2 di STIMIK Eresha School of IT dan S2
di Univ Negeri Jakarta program Penelitian dan Evaluasi Pendidikan. Sekarang
mengabdikan ilmunya sebagai guru di SDN JM 8 Bekasi. Buku yang telah ditulis
antara lain : Internet untuk pemula, High Quality Joomla, Membangun Toko online
untuk remaja, dll.
Email : [email protected]
Blog : http://bangfajars.wordpress.com
Facebook : http://www.facebook.com/bang.fajar
Pin BB : 328454c7
Daftar Pustaka
120 Menit Belajar Sendiri| Membuat Website Sekolah sumber : http://kajianwebsite.org/html/index.php
http://dewamahardika.blogspot.com/2011/07/cara-membuat-file-pdf-melalui-microsoft.html
http://natuna.org/pentingnya-membangun-website-sekolah-di-natuna.html