TUTORIAL PEMBUATAN WEB SEKOLAH CMS BALITBANG

Membangun 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 :

Baca Juga : CARA MEMBUAT BLOG DENGAN MUDAH (untuk pemula)

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.

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

4.       Dihalaman XAMPP pilihlah bahasa Inggris sebagai bahasa pengantar . Kemudian pilih Php MyAdmin.

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

• 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 bawah ini:

Langkah-langkah instalasi web sebagai berikut:

1.      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” 

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,

 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

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

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.

• Mengelola web sekolah 

Dalam bab ini kita akan melakukan pengelolaan web sekolah diantaranya adalah:

A.      Mengganti password admin

B.       Mengganti banner web (kop web)

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”

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/websekolah/admin.

7.       Masukan username dan password terbaru lalu login , kini username dan password hanya kita yang tahu.

  B.  Mengganti banner web (kop web)

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. buka folder gambar dan open file bernama “header_school.jpg”.

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

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)

• Mengisi konten sekolah

Pada bagian akhir Tutorial 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.

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

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

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.

4.       Lakukan pergantian berita seperti pada pembuatan artikel. Baik berita, dan foto. Setelah itu simpan.

5.       Cek pada tampilan web sekarang di http://localhost/websekolah lalu klik F5 . Klik selanjutnya untuk melihat berita secara lengkap

6.       Tampilan berita secara utuh.

Nah seperti itulah sahabat abah semuanya, TUTORIAL PEMBUATAN WEB SEKOLAH CMS BALITBANG, sampai jumpa di artikel selanjutnya, semoga bermanfaat.