Selasa, 21 Oktober 2008

Membangun Web Sekolah berbasis AuraCMS

The World Wide Web (commonly shortened to the Web) is a system of interlinked hypertext documents accessed via the Internet. With a Web browser, a user views Web pages that may contain text, images, videos, and other multimedia and navigates between them using hyperlinks. -Wikipedia

Apa itu web sekolah?

Web sekolah adalah sebuah sistem yang merupakan kumpulan berbagai informasi tentang suatu sekolah yang dapat diakses secara global melalui internet.

Apa itu AuraCMS?

Setelah membaca bagian ke-2, di bagian ke-3 ini kita akan berlatih melakukan pengelolaan website sekolah sebenarnya. Harapannya, anda dapat mengelola dan mengembangkan website meskipun bersifat lokal saat ini.

Perencanaan Isi

Content atau isi merupakan inti dari tujuan pembuatan website, dimana tujuannya secara umum adalah tersampaikannya informasi-informasi tentang sekolah (karena kita sedang membahas web sekolah) yang bersangkutan. Kemudian, apa saja informasi yang akan disampaikan? Jawabannya bisa jadi beraneka ragam tergantung website sekolah seperti apa yang sedang kita kerjakan. Namun secara umum bisa kita uraikan sebagai berikut:

1. Informasi sejarah, visi dan misi, dan profil singkat sekolah. Biasanya berupa teks.

2. Berita Sekolah yang meliputi kegiatan KBM, perayaan hari besar, kegiatan sosial, kegiatan kesiswaan, dan sebagainya. Bentuknya berupa teks dengan ilustrasi gambar/foto.

3. Foto-foto kegiatan.

4. Lain-lain: agenda kegiatan untuk dimasukkan ke dalam kalender, jejak pendapat pemilihan ketua osis, file-file modul belajar agar dapat di download oleh pengunjung, dan links penting yang terkait.

Untuk isi website nomor 1 sudah kita lakukan pada bagian ke-2 tutorial ini. Selanjutnya adalah isi website nomor 2 s/d 4.

Berita Sekolah

Berita-berita yang dimuat pada website biasanya berupa teks dan dilengkapi ilustrasi berupa gambar/foto. Untuk mempermudah proses penulisan berita, yang perlu kita lakukan adalah:

§ Upload Gambar/Foto

Gambar/foto yang akan kita gunakan dalam artikel/berita/halaman website harus di-upload terlebih dahulu. Caranya, klik Files Manager dari menu admin.AuraCMS adalah Content Management System[1] hasil karya anak bangsa untuk website yang berbasis PHP4 dan MySQL berlisensi GPL (General Public License). AuraCMS memiliki bentuk yang sederhana dan mudah dioperasikan tanpa memerlukan pengetahuan tentang HTML ataupun PHP.

Mengapa kita memerlukan CMS?

CMS dapat mempermudah pengelolaan web yang semakin kompleks dan dinamis content-nya. Pengelola web hanya cukup melakukan entri berita/artikel yang ingin ditampilkan tanpa perlu membongkar file-file HTML. Hal ini dapat terjadi berkat bantuan sebuah database yang menampung berbagai artikel yang diisikan.

Selain itu, website yang menggunakan CMS dapat juga dilengkapi dengan berbagai fungsionalitas interaktif seperti: shoutbox, kalender, pencarian, dan lain-lain.

Kebutuhan Sistem

AuraCMS hanya dapat dijalankan pada sebuah web server yang mendukung PHP dan database MySQL, sehingga kita memerlukan:

§ Apache Web Server

§ PHP

§ Database MySQL

§ phpMyAdmin

Software-software tersebut tersedia gratis di internet, kita hanya perlu mendownloadnya dan menginstalnya pada komputer yang akan digunakan untuk mendesain. Bisa juga menggunakan software lain yang telah mengemas ke-empat software tersebut dalam satu paket instalasi. Software-software tersebut diantaranya: PHPTriad, Apache2Triad, XAMPP, dan lain-lain. Pada modul ini akan digunaan XAMPP yang dapat didownload dari alamat:

http://www.apachefriends.org/download.php?xampp-win32-1.6.6a-installer.exe

Instalasi XAMPP

Setelah berhasil mendownload XAMPP dari situsnya, kita akan memiliki sebuah program instalasi seperti berikut:



installer xampp

Manajemen Web AuraCMS

Sebelum melangkah lebih jauh pada desain, ada baiknya kita mengenal terlebih dahulu manajemen web menggunakan AuraCMS. Tujuannya, agar kita tahu letak dari masing-masing bagian web sekolah yang kita buat menggunakan AuraCMS.

Login form

Login pada tempat yang tersedia dengan memasukkan:



Username : admin

Password : auracms



Username dan password tersebut adalah default dari AuraCMS saat pertama kali digunakan. Kita bisa melakukan perubahan terhadap password tersebut jika dikehendaki. Hal ini umumnya dilakukan jika web tersebut telah di-upload pada server hosting sebenarnya.



Sementara kita tidak perlu melakukan perubahan pada username maupun password default tersebut.



Setelah berhasil login, kita akan dihadapkan pada halaman login dengan menu administrasi di samping kiri halaman, seperti gambar berikut:

Admin Menu

Beranda Admin, adalah halaman pertama yang dijumpai saat kita sukses melakukan login.

Edit Admin, digunakan untuk melakukan perubahan pada e-mail, dan password dari admin yang bersangkutan.

Menu Manager, fasilitas untuk pengelolaan menu umum web. Admin dapat menambah, mengurangi, atau mengedit menu yang ada.

Pages Manager, fasilitas pengelolaan halaman web. Halaman web di sini merupakan halaman statis, berisi informasi yang bersifat tetap pada jangka waktu yang relatif lama.

Polling Manager, fasilitas pembuatan polling atau jejak pendapat.

News Manager, segala informasi berupa berita dikelola di sini. Admin dapat menuliskan artikel yang akan ditampilkan pada halaman depan web dengan urutan yang terbaru tampil teratas.

Buku Tamu Manager, digunakan untuk mengelola berbagai informasi pengunjung dan komentarnya.

Blok Manager, pengaturan lokasi tampilan dari fungsi tertentu.

Modul Manager, pengaturan modul-modul tambahan untuk memperkaya fungsional web.

Files Manager, digunakan untuk melakukan upload file. Dicantumkan juga bagaimana membuat link menuju file yang telah di-upload.

Download Manager, pengelolaan link download baik menuju file-file internal maupun link eksternal menuju situs lain.

Links Manager, pengelolaan link-link menarik.

Logout, link untuk mengakhiri sesi admin.

Shoutbox Manager, pengelolaan dari modul pesan singkat.

Calendar Manager, tempat mencantumkan events yang akan dilaksanakan/terjadi.

Gallery Manager, fasilitas album foto online.

User Manager, pengelolaan ke-anggota-an web.





Edit Admin

Kita mulai pertama kali dengan menu "Edit Admin". Pada tahap ini kita akan menyesuaikan alamat e-mail dan password. Klik menu "Edit Admin" sehingga muncul halaman seperti berikut:

Edit Admin


Ubah alamat e-mail dengan alamat kita dan ganti password lama (Old Password) dengan password yang baru (yang mudah saja, misalnya: admin), jangan lupa untuk menuliskan password baru dua kali seperti yang diminta. Akhiri dengan klik [Update].





Menu Manager

Pada bagian ini, kita akan mengurangi sejumlah"menu item" yang tidak perlu untuk web sekolah. Klik pada "Menu Manager" dan perhatikan halaman yang ditampilkan.

Menu Manager

Menu Item yang tidak diperlukan dan bisa dinon-aktifkan atau dihapus antara lain:

* Site Credit
* Donasi
* Hosting IIX Support AuraCMS
* Statistik Website
* Whois Online
* Alquran Online
* Free Templates
* Premium Templates
* Jadwal Televisi
* Horoskop
* Song Lyrics
* Weather
* Glossary
* FAQ



Untuk menon-aktifkan, kita cukup mengklik cek pada kolom "Published" yang sebaris dengan "menu item" tersebut. Dan sebaliknya untuk mengaktifkan menu item, klik tanda cross yang sebaris. Atau jika kita menghendaki untuk menghapus menu item tersebut, cukup klik del. Atau jika kita ingin melakukan perubahan pada menu item tersebut, klik edit.



Sedangkan menu item yang lain akan diedit untuk disesuaikan dengan kebutuhan, misalnya menu "Tentang AuraCMS" dapat di-edit menjadi "Tentang SMKN 1". Klik [Update] untuk menyimpan perubahan tersebut. Kita ubah juga menu "Sejarah AuraCMS" menjadi "Sejarah SMKN 1".



Edit Menu

Pages Manager

Pages Manager dimanfaatkan untuk pengelolaan halaman-halaman yang terdapat di website dan bersifat statis. Saat ini kita hanya perlu melakukan peng-editan sederhana dari halaman-halaman yang ada.



Misalnya kita akan mengedit halaman "Selamat Datang di Website AuraCMS", klik pada link [Edit] sehingga muncul seperti di bawah ini. Lakukan perubahan judul halaman web dan isinya. Pada AuraCMS versi 2 ini telah dilengkapi dengan fungsi-fungsi pengolah kata sehingga mempermudah penulisan halaman maupun artikel, tidak diperlukan pengetahuan HTML. Klik [Edit] setelah melakukan perubahan.



Edit Halaman

Edit juga halaman "Sejarah AuraCMS" menjadi "Sejarah SMKN 1", demikian pula dengan halaman "Tentang AuraCMS" menjadi "Tentang SMKN 1".





Polling Manager

Kita juga dapat membuat jajak pendapat sederhana tentang suatu hal, misalnya tentang desain web yang kita buat. Klik link "Tambah Jajak Pendapat" yang kemudian akan menampilkan form pembuatan polling.



Polling

Isikan pertanyaan polling beserta jawaban yang diinginkan dan klik [MASUKKAN POLLING BARU] untuk menyimpannya.



Kembali ke halaman "Polling Manager", klik tanda cross pada polling yang baru kita buat untuk mem-publikasikan polling baru tersebut.



Publikasi Polling

News Manager

Inti dari CMS sebernarnya adalah bagian ini. Karena pada bagian inilah admin atau pengelola web lainnya memasukkan berbagai informasi terkini seputar sekolah maupun lingkungan disekitarnya.

News Manager

Klik "Add News" untuk memasukkan berita baru, tunggulah hingga form input berita seperti gambar di bawah ini ditampilkan.

Add News


Isikan ‘Title' atau Judul berita, pilih ‘Topik', dan isikan ‘Isi Berita'-nya. AuraCMS 2 ini sudah dilengkapi dengan pengolah teks dengan tampilan grafis sehingga kita tidak perlu lagi menghapal kode-kode HTML. Setelah semuanya lengkap, klik [Save] untuk menyimpannya.



Selain memasukkan berita baru, kita dapat pula menambah, merubah, dan menghapus berita yang telah ada saat instalasi AuraCMS. Untuk meng-edit berita yang ada, klik link [Edit] yang sebaris dengan berita tersebut. Sedangkan untuk men-delete, beri tanda centang pada checkbox di depan berita yang bersangkutan dan kemudian klik [Delete].



Topik berita pada AuraCMS juga dapat ditambah, di-edit, dan dihapus untuk disesuaikan dengan kebutuhan website sekolah yang kita bangun. Seperti tampak pada gambar di bawah ini.

News Menu




Klik link ‘Add Topic' untuk menambah topik baru, ‘List Topic' untuk menampilkan daftar topik yang ada, mengedit, atau menghapusnya. ‘Comment' untuk menampilkan komentar-komentar pengunjung. Dan, ‘Artikel Masuk' untuk menampilkan artikel-artikel kiriman pengunjung.





Buku Tamu Manager

Link ini untuk menampilkan data pengunjung yang mengisi buku tamu dan komentarnya. Komentar-komentar dari pengunjung dapat pula dikomentari oleh admin. Selain itu, komentar pengunjung yang tidak sesuai bisa dihapus dari buku tamu.

buku tamu

[gb2-12]





Blok Manager

Menu ini digunakan untuk mengatur blok-blok yang berisi teks, gambar, atau link. Kita dapat menambah, mengedit, atau menghapus blok.

blok manager

Pada gambar di atas bisa kita lihat bahwa setiap blok memiliki ‘Status' aktif atau tidak, ‘Order' atau urutan tampilan (jika tampil pada posisi yang sama), serta ‘Posisi' tampilannya dalam layout (jika tertulis ‘Pindah kiri' berarti posisi blok tersebut ada di layout sebelah kanan).



Kita juga bisa menambahkan blok dengan mengklik ‘Buat Blok Baru'. Isikan ‘Judul Blok' dan ‘Isi Blok', kemudian pilih ‘Posisi Blok' tempat tampilnya. Klik [Submit].

buat blok

Modul Manager

Sedikit berbeda dengan ‘Blok', modul berbentuk program dengan fungsi tertentu guna melengkapi kebutuhan website.

modul

Pada default instalasi AuraCMS, telah disertakan beberapa modul seperti tampak pada gambar di atas. Kita bisa mengatur tampil/tidaknya sebuah modul, merubah posisi (urutan dan tempat) tampilnya modul, juga melakukan edit dan delete pada modul.





Files Manager

Fasilitas selanjutnya adalah untuk keperluan upload file ke dalam website. Seperti tampak pada gambar di bawah ini, ‘File Manager' hanyalah berfungsi untuk melakukan upload dan delete file pada website kita. Jika kita hendak menghubungkan file yang di-upload dengan artikel yang kita tulis, maka petunjuk yang diberikan bisa dijadikan pedoman. Syaratnya, kita harus sudah memahami penulisan kode HTML seperti yang dicontohkan.

file man

Download Manager

Fungsi menu ini adalah untuk menciptakan link menuju suatu file yang dapat di-download oleh pengunjung melalui web kita. Kita dapat melakukan ‘Add Download', ‘Add Category', menghapus atau mengedit kategori yang ada. Setiap link download, harus masuk pada salah satu kategori yang ada.

download
Links Manager

Seperti namanya, menu ini digunakan untuk mengatur link dari website kita menuju website lain yang menjadi partner atau rujukan. Links tersebut dikelompokkan dalam kategori-kategori yang telah dibuat sebelumnya. Selain itu, pengunjung juga dapat memberikan informasi link yang bermanfaat dan akan ditampung pada ‘Incoming Links'.

links

Shoutbox Manager

Bagian menu yang satu ini digunakan untuk mengelola pesan singkat yang dikirimkan oleh pengunjung. Sehingga pesan singkat dari pengunjung bisa di-filter jika terdapat pesan-pesan yang sifatnya tidak sopan, provokatif, teror, atau menyinggung masalah SARA.

shoutbox


Calendar Manager

Memiliki fungsi untuk menampilkan informasi agenda kegiatan pada kalender. Jika kita mengisikan agenda kegiatan pada tanggal tertentu, maka pada tanggal tersebut akan ditandai sehingga dapat diketahui oleh pengunjung.

kalender
Gallery Manager

Galeri foto ini digunakan untuk menampilkan foto-foto layaknya album foto. Foto-foto akan ditampilkan sesuai kelompok/kategorinya masing-masing.

gallery

User Manager

Tentu saja fasilitas yang satu ini digunakan untuk mengatur keanggotaan website kita. Kita sebagai admin dapat menambahkan user baru atau mengedit/menghapus user yang ada. Selain ditambahkan oleh admin, user dapat pula mendaftar melalui form di halaman depan.

user manager



1. Dobel-klik pada file tersebut untuk menjalankan proses instalasi. Pilih bahasa yang mudah kita pahami (hanya ada 3 bahasa pada kenyataanya: English, Deutsch, Japanese), misalnya bahasa Inggris. Klik [OK].

2. Kemudian [Next] pada halaman "Welcome to the XAMPP 1.6.x Setup Wizard".

3. Klik [Next] pada halaman selanjutnya hingga proses instalasi dilakukan



proses instal xampp



4. Klik [Finish] saat instalasi telah selesai, pilih [Yes] untuk menuju XAMPP Control Panel.

instal selesai

Konfigurasi XAMPP

Setelah XAMPP berhasil diinstal, ada beberapa hal yang harus dilakukan agar komputer yang kita gunakan sesuai dengan kebutuhan AuraCMS.

Pertama, buka file c:\xampp\apache\bin\php.ini menggunakan Notepad, carilah baris yang berisi keterangan register_globals = OFF ubahlah menjadi register_globals = ON. Simpan file tersebut.

Kedua, kita berpindah ke tampilan XAMPP Control Panel yang tampak seperti gambar di bawah ini. Tampak pada gambar bahwa Apache dan MySQL dalam keadaan tidak aktif. Untuk mengaktifkan Apache dan MySQL, klik [Start] yang berada di sampingnya.

xampp control panel


Pada saat [Start] di-klik, ada kalanya muncul "Windows Security Alert" seperti di bawah ini. Kita boleh memilih [Unblock] ataupun [Ask Me Later]. Namun kita tidak dapat menggunakan aplikasi yang namanya tercantum pada tampilan jika memilih [Keep Blocking].

windows security alert

Gambar di bawah ini menunjukkan bahwa Apache dan MySQL telah aktif dengan ditandai tulisan [Running].

xampp running


Struktur Direktori XAMPP

Instalasi XAMPP pada komputer akan membentuk serangkaian direktori pada c:\xampp. Direktori yang penting dan perlu kita perhatikan adalah c:\xampp\htdocs dimana semua file-file AuraCMS akan kita simpan di sini. Kenapa "htdocs"? Karena hanya file-file yang disimpan pada direktori inilah yang akan ditampilkan pada web browser.

Buatlah sebuah direktori baru bernama smkn1 di dalam direktori htdocs.

struktur xampp


Untuk menguji apakah XAMPP dapat berkerja dengan baik, bisa dilakukan melalui web browser. Jalankan web browser yang terdapat pada komputer kita, dan ketikkan localhost pada address bar-nya. Mungkin kita akan menjumpai tampilan sebagai berikut:

xampp frontpage

Instalasi AuraCMS

Setelah server nyata bekerja dengan baik, selanjutnya adalah mendownload AuraCMS dari alamat: http://www.auracms.org/. Untuk dapat mendownload, kita harus mendaftar terlebih dahulu pada form yang telah disediakan (hal ini tidak dimuat pada tulisan ini).

Setelah berhasil mendownload, ekstrak-lah seluruh isinya ke dalam direktori c:\xampp\htdocs\smkn1. Kita bisa menggunakan aplikasi seperti: 7-zip, WinZip, WinRAR, atau yang lain untuk melakukannya.

Membuat Database

Pilih phpMyAdmin pada "Tools" yang disediakan oleh XAMPP. Agar dapat berjalan dengan baik dan mampu menampung berbagai content web, kita perlu membuat satu buah database dengan menggunakan bantuan phpMyAdmin.

Tuliskan nama database yang akan digunakan untuk menampung data-data AuraCMS, misalnya: smkn1, klik [Create] untuk menciptakan database baru.

membuat database di phpMyAdmin

Berikutnya, klik tab [Import] kemudian [Browse] file dengan nama auracms.sql yang terdapat dalam folder c:\xampp\htdocs\smkn1 yang merupakan hasil ekstrak sebelumnya. Klik [Go].

import database
Langkah ini digunakan untuk melakukan import skema database yang digunakan AuraCMS.

Berikutnya adalah melakukan pengeditan sederhana pada file:

c:\xampp\htdocs\smkn1\includes\config.php. Ubah beberapa parameter ini sesuai dengan lingkungan kerja kita.

$mysql_user = 'root'; //username database mysql, umumnya ‘root'

$mysql_password = ''; //password database mysql (jika ada)

$mysql_database = 'smkn1'; //nama database mysql yang telah dibuat sebelumnya

$mysql_host = 'localhost'; //nama server database mysql, umumnya ‘localhost'

Simpan perubahan yang sudah dilakukan.

Uji Coba

Setelah semua langkah di atas selesai dilakukan, selanjutnya melakukan uji coba. Masih dengan browser kesayangan, tuliskan alamat: localhost/smkn1 pada address bar-nya dan jangan lupa untuk menekan tombol [Enter]. Jika semua proses telah dilakukan dengan benar, kita akan mendapati tampilan halaman depan (frontpage) seperti berikut:

AuraCMS frontpage

[gambar 11]

Keterangan singkat:

A. Login form untuk admin dan user website. Admin miliki kekuasaan tertinggi dalam pengelolaan website, sedangkan user biasa memiliki beberapa fasilitas terbatas.

B. Contoh blok yang digunakan untuk promosi berupa teks dan link.

C. Kalender untuk menampilkan tanggal dalam 1 (satu) bulan beserta agenda kegiatan di dalamnya (jika ada).

D. Pesan Singkat atau biasa disebut shoutbox yang merupakan media interaktif untuk pengunjung.

E. Modul jajak pendapat (Polling) yang dapat digunakan untuk mengukur pendapat pengunjung tentang sesuatu.


Tidak ada komentar: