Anda di halaman 1dari 19

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

[gambar 1]
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
 

[gambar 2]
4. Klik [Finish] saat instalasi telah selesai, pilih [Yes] untuk menuju XAMPP Control Panel.
[gambar 3]
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.

[gambar 4]
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].

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

[gambar 6]
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.
[gambar 7]
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:

[gambar 8]
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.

[gambar 9]
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].

[gambar 10]
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:
[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.

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.

[gb2-1]
 
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:

[gb2-2]
 
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:

[gb2-3]
 
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.

[gb2-4]
 
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 pada kolom "Published" yang sebaris dengan
"menu item" tersebut. Dan sebaliknya untuk mengaktifkan menu item, klik tanda yang
sebaris. Atau jika kita menghendaki untuk menghapus menu item tersebut, cukup klik .
Atau jika kita ingin melakukan perubahan pada menu item tersebut, klik .
 
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".
 

[gb2-5]
 
 
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.
 

[gb2-6]
 
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.
 

[gb2-7]
 
Isikan pertanyaan polling beserta jawaban yang diinginkan dan klik [MASUKKAN POLLING
BARU] untuk menyimpannya.
 
Kembali ke halaman "Polling Manager", klik tanda pada polling yang baru kita buat untuk
mem-publikasikan polling baru tersebut.
 

[gb2-8]
 
 
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.
[gb2-9]
 
Klik "Add News" untuk memasukkan berita baru, tunggulah hingga form input berita seperti
gambar di bawah ini ditampilkan.

[gb2-10]
 
 
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.

[gb2-11]
 
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.

[gb2-12]
 
 
Blok Manager
Menu ini digunakan untuk mengatur blok-blok yang berisi teks, gambar, atau link. Kita dapat
menambah, mengedit, atau menghapus blok.

[gb2-13]
 
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].

[gb2-14]
 
 
Modul Manager
Sedikit berbeda dengan ‘Blok', modul berbentuk program dengan fungsi tertentu guna
melengkapi kebutuhan website.

[gb2-15]
 
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.

[gb2-16]
 
 
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.

[gb2-17]
 
 
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'.

 
[gb2-18]
 
 
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.

 
[gb2-19]
 
 
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.

 
[gb2-20]
 
 
Gallery Manager
Galeri foto ini digunakan untuk menampilkan foto-foto layaknya album foto. Foto-foto akan
ditampilkan sesuai kelompok/kategorinya masing-masing.

 
[gb2-21]
 
 
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.

 
Latihan Mengelola Website
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.

[gb3-1]
Pilih file-file gambar/foto yang akan digunakan sebagai ilustrasi berita dengan meng-klik tombol
[Browse...], kemudian klik [Upload]. Perhatikan penulisan nama file jika akan digunakan dalam
artikel/berita atau halaman web.
Kita juga perlu membiasakan diri dengan tag HTML yang bersangkutan, misalnya untuk
memasukkan gambar ke dalam artikel:
‹img src="files/nama_gbr.jpg"›
Catatan: berikan nama file yang baik untuk tiap file gambar yang akan di-upload. Nama file
sebaiknya tidak mengandung spasi, tanda hubung ( - ), simbol khusus. Gunakan underscore ( _ )
untuk menghubungkan 2 (dua) kata, misalnya: foto_phbn.jpg
§ Tulis Berita
Setelah semua file gambar/foto yang dibutuhkan sukses di-upload, selanjutnya klik menu News
Manager. Klik Add News untuk menuliskan berita baru.

[gb3-2]
Tuliskan ‘Title' berita, kemudian pilih ‘Topik' yang sesuai, di sini kita menggunakan [Berita
Terkini]. Kemudian tuliskan ‘Isi Berita'-nya. Untuk memasukkan gambar/foto ke dalam teks, klik
yang akan menampilkan jendela Insert/edit image seperti di bawah ini.
[gb3-3]
Isikan ‘Image URL' seperti ditunjukkan pada Files Manager. Misalnya, pada contoh ini tertulis
files/LombaDesain.jpg yang akan menampilkan preview dari gambar/foto tersebut. Isikan juga
‘Image Description' dan juga ‘Title' gambar, yang merupakan atribut tambahan. Atur juga
‘Appearance' dari gambar tersebut. Perhatikan gambar di bawah ini.

[gb3-4]
o Kita atur ‘Alignment' gambar terhadap teks, di sini kita gunakan ‘Left' karena gambar berada
di sebelah kiri teks.
o ‘Dimensions' biasanya disesuaikan dimensi gambar/foto, kita juga boleh merubahnya jika
ternyata dimensi gambar/foto terlalu besar.
o ‘Vertical space', merupakan jarak vertikal teks terhadap gambar (perhatikan teks yang berada
di bawah gambar).
o ‘Horizontal space', adalah jarak horizontal teks yang berada di samping gambar.
o ‘Border' atau garis tepi gambar, jika kita menginginkan gambar/foto dibingkai garis.
o ‘Style', pengaturan CSS yang dapat diterapkan pada gambar.
Satu berita telah kita tambahkan, selamat!
 
Halaman "Tentang SMKN 1"
Selanjutnya melakukan editing sederhana halaman ‘Tentang SMKN 1'. Klik menu Pages
Manager, kemudian klik Edit yang sebaris dengan "Tentang SMKN 1", tampilan seperti berikut
akan muncul:
[gb3-5]
Cara penyisipan gambar mirip seperti pada membuat "Berita Sekolah". Tambahkan informasi
profil SMKN 1.
Galeri Foto
Galeri foto atau biasa juga disebut sebagai online photo album digunakan untuk menampilkan
koleksi foto/gambar. Web sekolah juga perlu menggunakan galeri foto ini untuk menampilkan
berbagai events yang pernah diselenggarakan.
Untuk membuat galeri foto, kita perlu mempersiapkan foto/gambar yang akan ditampilkan.
Gambar-gambar tersebut harus disesuaikan terlebih dahulu. Foto yang diperoleh dari kamera
digital biasanya memiliki resolusi dan dimensi yang besar (lebih dari 800 x 600 pixel). Dimensi
foto/gambar tersebut perlu diperkecil agar ukuran filenya menjadi lebih kecil, sehingga menjadi
lebih ringan saat di-load pada halaman web. Kita bisa menggunakan berbagai macam aplikasi
pengolah gambar atau image viewer seperti: ACDSee, Ms Office Picture Manager, atau yang
lainnya. Untuk tampil optimal dalam AuraCMS, sebaiknya lebar gambar tidak lebih dari 350px.
Setelah semua gambar yang akan di-upload siap, klik Gallery Manager pada menu admin, klik
Buat Kategori untuk membuat kategori foto yang di-upload.

[gb3-6]
AuraCMS akan secara otomatis menciptakan sebuah folder kosong. Klik Upload sehingga muncul
form seperti di bawah ini. Pilih ‘Kategori' yang akan diisi, kemudian pilih file-file yang akan di-
upload. Kita bisa melakukan upload lima file sekaligus. Kemudian klik [upload] untuk
mengupload file-file gambar tersebut.

[gb3-7]
Kalender Kegiatan
AuraCMS versi 2 telah menyediakan fasilitas event calendar untuk menampilkan daftar agenda
kegiatan pada kalender yang berada di halaman depan.
Klik menu admin Calender Manager sehingga muncul halaman seperti di bawah ini:
[gb3-8]
Untuk menambahkan agenda kegiatan, klik link Tambah Data sehingga tampil form seperti
berikut:

[gb3-9]
Isikan Judul, Background Color, Color, dan Isi. Waktu Mulai dan Waktu Akhir bisa kita isi
secara manual dengan format penulisan tanggal yyyy-mm-dd atau lebih mudahnya dengan
memilih tanggal pada kalender yang muncul apabila kita meng-klik ikon di samping kanan form
isian tersebut. Background Color dan Color digunakan untuk memberikan efek warna pada
latar belakang dan angka yang ditampilkan di kalender.
Membuat Fasilitas Download
Kita akan mempraktekan pembuatan fasilitas download untuk file-file tutorial. Langkah pertama,
upload semua file tutorial menggunakan File Manager di menu admin.

[gb3-10]
Kemudian, pada menu Download Manager, klik Add Category dan buatlah kategori "Tutorial"
seperti tampak di bawah ini. Klik [tambah] untuk menciptakan kategori download baru.

[gb3-11]
Setelah kategori selesai dibuat, klik Add Download. Pada form yang disediakan isilah ‘Judul'
downloadnya, kemudian ‘Url' file (misalnya: files/MembangunWebSekolah1.zip), ‘Keterangan'
singkat untuk file tersebut, dan ‘Size' file. Klik [tambah].

[gb3-12]
Membangun Link
Link biasanya saling dipertukarkan oleh admin untuk meningkatkan rating pencarian di search
engine seperti Google. Umumnya, sebuah website yang banyak dijadikan rujukan website lainnya
akan memiliki tingkat tertinggi dalam pencarian.
Klik pada Add Link dan isikan informasi link pada form yang telah disediakan. Untuk diingat
bahwa yang dimaksud ‘Url' adalah alamat website lengkap, misalnya: http://www.smkn1-
nganjuk.co.cc . Klik [Add] untuk menyimpan link baru tersebut.

[gb3-13]
Demikianlah fungsi-fungsi utama dari AuraCMS yang perlu kita ketahui. Fungsi-fungsi lain
seperti: Buku Tamu Manager, User Manager, Blok Manager, Modul Manager, dan lain-lain (yang
belum dibahas di sini) bisa anda utak-atik sendiri.
Default Theme Hacking
Cara termudah dan tercepat untuk merubah tampilan web berbasis AuraCMS adalah dengan
memodifikasi default theme-nya. Kita bisa memulai dari melihat struktur theme yang terletak di:
c:\xampp\htdocs\smkn1\themes\auracms. Setiap theme tersimpan dalam sebuah folder
sesuai nama theme-nya (misalnya, default theme diberi nama ‘auracms').
Jika kita tengok ke dalam folder ‘auracms' tersebut, bisa kita lihat susunan file dan folder sebagai
berikut:

[gb4-1]
 
Dari gambar di atas bisa kita lihat bahwa theme AuraCMS terdiri dari:
1.       3 (tiga) file HTML untuk mengatur tampilan / layout
2.       2 (dua) folder: css (menampung file pengaturan style) dan images (menampung file-file
gambar/image yang dipergunakan dalam layout).
Untuk mengubah tampilan secara sederhana, kita bisa melakukannya dengan mengganti file-file
gambar utama dengan file-file baru. Mari kita tengok terlebih dahulu file-file utama yang
membentuk layout default AuraCMS.
[gb4-2]

[gb4-3]
Dimensi dari masing-masing gambar adalah:
 aura-cms.gif -- 200 x 79 pixel
 headerbg.gif -- 1 x 85 pixel
 headerphoto.jpg -- 820 x 120 pixel
 tableft.gif -- 4 x 84 pixel
 tabright.gif -- 175 x 84 pixel
Ubah nama ke-lima gambar di atas dengan menambahkan satu karakter, misalnya tambahkan
underscore ( _ ) di depan nama file sehingga:
aura-cms.gif       >          _aura-cms.gif
 
Ini perlu kita lakukan agar nama-nama file aslinya masih dapat diketahui. Selanjutnya, kita perlu
membuat gambar-gambar penggantinya.
Mendesain dengan Macromedia Fireworks
Pembuatan desain dalam tutorial ini menggunakan Macromedia Fireworks. Anda bisa
menggunakan Adobe Photoshop atau software lain yang sudah dikuasai. Tutorial ini juga tidak
akan menjelaskan detil melakukan ini-itu di Fireworks, jika menjumpai kesulitan.. tekan F1.
Pertama, buat area kerja dengan ukuran 820 x 400 pixel. Susun gambar atau bentuk sesuai
keinginan dengan ukuran sesuai dimensi file-file di atas.

[gb4-4]
Setelah semua tersusun, yang kedua kita bisa mulai melakukan slice untuk memotong gambar-
gambar tersebut sesuai ukuran. Potongan-potongan tersebut selanjutnya di-ekspor.
[gb4-5]
Jangan lupa untuk memastikan bahwa ‘Properties' masing-masing potongan memiliki format
yang sesuai, perhatikan bagian .
Ketiga, kita lakukan proses ekspor one by one untuk tiap-tiap slice. Klik-kanan masing-masing
slice, kemudian pilih "Export Selected Slice...", kemudian arahkan menuju folder
themes/auracms/images. Beri nama sesuai bagiannya masing-masing. Hasil pemotongan
gambar di atas adalah sebagai berikut:

[gb4-6]
Dan hasil akhir default theme yang telah dimodifikasi tampak seperti di bawah ini.

[gb4-7]

Anda mungkin juga menyukai