The World Wide Web

23
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

Transcript of The World Wide Web

Page 1: The World Wide Web

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 SistemAuraCMS hanya dapat dijalankan pada sebuah web server yang mendukung PHP dan database MySQL, sehingga kita memerlukan:§ Apache Web Server§ PHP§ Database MySQL§ phpMyAdminSoftware-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.exeInstalasi XAMPPSetelah 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.

Page 2: The World Wide Web

[gambar 3]Konfigurasi XAMPPSetelah 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 XAMPPInstalasi 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.

Page 3: The World Wide Web

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

Page 4: The World Wide Web

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 DatabasePilih 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 CobaSetelah 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:

Page 5: The World Wide Web

[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 AuraCMSSebelum 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 : adminPassword : 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. 

Page 6: The World Wide Web

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 AdminKita 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].

Page 7: The World Wide Web

  

Menu ManagerPada 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

Page 8: The World Wide Web

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 ManagerKita 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 ManagerInti dari CMS sebernarnya adalah bagian ini. Karena pada bagian inilah admin atau pengelola web lainnya memasukkan berbagai informasi terkini seputar sekolah maupun lingkungan disekitarnya.

Page 9: The World Wide Web

[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

Page 10: The World Wide Web

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 ManagerMenu 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 ManagerSedikit 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.

Page 11: The World Wide Web

  Files ManagerFasilitas 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 ManagerFungsi 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 ManagerSeperti 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 ManagerBagian 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.

 

Page 12: The World Wide Web

[gb2-19]  Calendar ManagerMemiliki 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 ManagerGaleri foto ini digunakan untuk menampilkan foto-foto layaknya album foto. Foto-foto akan ditampilkan sesuai kelompok/kategorinya masing-masing.

 [gb2-21]

  User ManagerTentu 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 WebsiteSetelah 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 IsiContent atau isi merupakan inti dari tujuan pembuatan website, dimana tujuannya secara umum adalah tersampaikannya informasi-informasi tentang sekolah (karena kita sedang membahas

Page 13: The World Wide Web

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 SekolahBerita-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/FotoGambar/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 BeritaSetelah 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.

Page 14: The World Wide Web

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

Page 15: The World Wide Web

[gb3-5]Cara penyisipan gambar mirip seperti pada membuat "Berita Sekolah". Tambahkan informasi profil SMKN 1.Galeri FotoGaleri 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 KegiatanAuraCMS 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:

Page 16: The World Wide Web

[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 DownloadKita 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

Page 17: The World Wide Web

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 HackingCara 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 / layout2.       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.

Page 18: The World Wide Web

[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 FireworksPembuatan 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.

Page 19: The World Wide Web

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