SEKOLAH MENENGAH KEJURUAN (SMK) NEGERI I KUPANG Jl. Prof. Dr. W. Z. Johannes, Telp. & Fax :(0380)

SEKOLAH MENENGAH KEJURUAN (SMK) NEGERI I KUPANG Jl. Prof. Dr. W. Z. Johannes, Telp. & Fax :(0380) 821150 Website Emai

: http://www.smkn1kupang.sch.id, : [email protected]

MODUL MULOK: WEB DESIGN (Revisi-1)

(HTML, PHP, MySQL, dan CMS) Oleh: Wahyudi Rahmat, ST ([email protected])

PEMERINTAH KOTA KUPANG DINAS PENDIDIKAN, PEMUDA & OLAHRAGA 2011

Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

1

I. HTML 1.1. Apa itu HTML? HTML adalah singkatan dari HyperText Markup Language yaitu salah satu bahasa pemprograman web desain dan juga biasa di sebut script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler (ASCII) dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Perintah-perintah HTML memungkinkan kita untuk menampilkan teks dalam bentuk paragraf, huruf besar, italic, tebal bahkan dapat juga menampilkan gambar dalam dokumen tersebut untuk dapat ditampilkan di client WWW secara grafikal. Salah satu fitur utama dari HTML adalah kemampuannya untuk menyertakan hypertext links ke dalam dokumen. Hypertext link memungkinkan kita untuk menampilkan dokumen lain hanya dengan mengklik suatu area di layar di mana dokumen yang ditunjuk dapat ditampilkan di layar. Dokumen yang ditunjuk tersebut dapat berasal dari komputer mana saja di seluruh dunia yang terhubung di internet. Dalam mendesain sebuah halaman HTML dapat dilakukan dengan menggunakan software khusus seperti Macromedia Dreamweaver, atau Microsoft Frontpage, tetapi selain itu kita juga dapat menggunakan Notepad, karena contoh software di atas biasanya hanya menawarkan kemudahan dalam menuliskan tag-tag atau perintah HTML. 1.2. Struktur Dasar HTML Struktur dasar dari HTML dapat dilihat dari contoh berikut

1

<TITLE>Judul halaman

2 3

Contoh Halaman HTML

Keterangan: 1. Tag, yaitu markup pada html yang memiliki fungsi-fungsi khusus yang mendefinisikan bagian-bagian pada sebuah halaman html, misalnya (tag head), berfungsi untuk menandakan bagian yang mendefinisikan head dari halaman html. 2. Atribut, yaitu markup yang mendefinisikan properti dari suatu element HTML, yang terdiri atas nama dan nilai. 3. Elemen yaitu markup yang berisi tag pembuka, isi, dan tag penutup. Dari contoh struktur dasar HTML di atas, apabila kita coba tampilkan pada halaman browser, maka akan terlihat sebagai berikut:

Gambar 1.1. Contoh halaman HTML


2

1.3. Format Tulisan pada halaman HTML Untuk membuat halaman web yang rapi dan menarik, tentu saja kita perlu melakukan pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan. Ada banyak tag-tag pemformatan penulisan yang disediakan pada bahasa HTML diantarannya dapat dilihat pada tabel berikut. Tag

Fungsi

Membuat tulisan italic (cetak miring)

Membuat tulisan bold (cetak tebal).

Membuat tulisan underline (garis bawah) .

Membuat tulisan berkedip.

Menentukan ukuran dari font yang berada di dalam tag.

Menentukan tingkatan heading yang ditampilkan dengan perbedaan besar huruf pada halaman HTML, memiliki nilai antara 1 dan 6, dengan 1 sebagai ukuran paling besar dan 6 paling kecil.

<MARQUEE>

Tag ini menyebabkan tulisan yang berada di antaranya bergerak dari kanan ke kiri.

Keyboard tag digunakan untuk mewakili tombol keyboard seperti Del atau Enter. Umumnya ditampilkan oleh browser dengan suatu monospaced font yang lebih kecil.

Preformatted text digunakan untuk menampilkan tulisan dengan format yang khusus. Tag ini bagus digunakan bila kita ingin menangani spasi antar baris; dan juga memudahkan anda untuk meletakan tab dalam dokumen anda.

<STRIKE>

Tulisan diantara tag akan di coret (contoh).

<STRONG>

Mirip dengan penggunaan tag bold, huruf akan ditampilkan dengan cetak tebal oleh browser.

Menandakan baris baru pada tulisan

Contoh penggunaannya dapat dilihat pada tabel berikut : Code

Hasil

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6


3

f o n t s i z e Cetak Tebal
Cetak miring
Cetak garis bawah
<s>Cetak dengan coretan
default font

Arial

Arial Black

1.4. Mengatur Pemerataan Tulisan Pemerataan tulisan adalah pengaturan tata letak tulisan pada halaman html, apakah itu rata kiri (left), rata kanan (right), atau rata kiri dan kanan (justified). Contoh dan cara pemerataan tulisan pada halaman html dapat dilihat sebagai berikut. Contoh : <TITLE>Pemerataan Tulisan Tulisan ini berada ditengah baris
Tulisan ini rapat kiri

Yang ini juga ditengah baris

Yang ini rapat kanan

Tampilan :

Gambar 1.2. Contoh pemerataan tulisan Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

4

1.5. Membuat List Agar sebuah daftar dapat dibaca dengan mudah, maka tentunya perlu dibuat sebuah list. Dalam bahasa HTML list dapat dibuat dengan menggunakan tag
untuk unordered list dan
untuk Ordered List. 1.5.1. Unordered List List yang paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuai untuk daftar item yang tidak memiliki hirarki atau urutan yang penting. Code tag yang digunakan untuk membuat sebuah Unordered list yaitu :

digunakan untuk mengawali dan mengakhiri suatu Unordered List. digunakan untuk membuat suatu heading untuk list tersebut.

digunakan untuk membuat masing-masing item list tersebut. Contoh : <TITLE>Unordered List
Daftar Belanja :
Beras

Sayur

Daging

Tampilan :

Gambar 1.3. Unordered List

1.5.2. Ordered List Ordered list adalah pembuatan daftar item yang memiliki hirarki atau urutan. Code tag yang digunakan untuk membuat sebuah Unordered list yaitu :

digunakan untuk mengawali dan mengakhiri suatu Ordered List. digunakan untuk membuat suatu heading untuk list tersebut.

digunakan untuk membuat masing-masing item list tersebut.


5

Contoh : <TITLE>Ordered List
Daftar Belanja :
Beras

Sayur

Bayam

Kangkung

Daging

Tampilan :

Gambar 1.4. Ordered List

1.6. Menyisipkan Gambar Untuk membuat tampilan halaman menjadi lebih menarik tentunya perlu disisipkan gambar. Untuk menyisipkan gambar pada sebuah halaman html cukup dengan menggunakan tag . Dan tag tersebut juga memiliki elemen-elemen sebagai berikut. SRC, digunakan untuk dari sumber file gambar. ALIGN, untuk merapikan elemen yang menentukan bagaimana gambar akan dirapikan secara relatif terhadap tulisan yang berdekatan dengan gambar. ALT= text, Menentukan tulisan yang akan ditampilkan (biasanya ditempatkan di antara tanda petik) jika browser tidak dapat menampilkan gambar untuk alasan tertentu. HEIGHT=h WIDTH=w, untuk Menentukan height (tinggi) dan width (lebar) dari gambar. Contoh: <TITLE>Menyisipkan Gambar

Tampilan:

Gambar 1.5. Menyisipkan gambar


6

Selain menyisipkan gambar pada halaman html, kita juga menyisipkan gambar yang menutupi seluruh bagian latar pada halaman html tersebut, yang biasa disebut dengan background atau gambar latar. Code/Tag untuk menyisipkannya berada pada bagian body, yaitu dapat dilihat pada contoh berikut : Background

size="4">Contoh

memasukkan

Tampilan :

Gambar 1.6. Menyisipkan Background

Tetapi perlu diingat sebelumnya, file gambar harus diletakkan pada folder yang sama dengan file halaman html, yang telah dibuat. Karena jika tidak gambar/background tersebut tidak akan muncul. 1.7. Membuat Link ke File atau Halaman Lain (Hyperlink) Tag yang digunakan untuk membuat hyperlink adalah
HREF=”lokasi”> hyperlink ,

<TITLE>Membuat hyperlink Kunjungi Situs Google

Tampilan :

Gambar 1.7. Membuat Hyperlink

Hyperlink tidak hanya dapat disisipkan pada teks tapi juga dapat disipkan pada file gambar, penggunaan tag-nya adalah sebagai berikut : Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

7

<TITLE>Membuat hyperlink

SRC="coba.com.png" ALT="Kunjungi

Tampilan :

Gambar 1.8. Membuat Hyperlink dengan gambar

1.8. Membuat Tabel Tag untuk membuat dalam tabel adalah

dengan beberapa code tag yang berada di dalamnya yaitu : untuk membuat baris. untuk membuat kolom. Dengan atribut didalamnya yaitu : Width untuk menentukan lebar. Border untuk menentukan tebal garis tabel. Align untuk menentukan posisi text. Rowspan untuk menggabungkan 2 buah baris. Colspan untuk menggabungkan 2 buah kolom. Contoh Code : <TITLE>Membuat Tabel

Merge 2 Baris Merge 2 kolom

a b

c d e


8

Tampilan :

Gambar 1.9. Membuat tabel

1.9. Menggunakan Form Form atau formulir atau kolom isian sangat diperlukan untuk membuat sebuah halaman web yang interaktif, karena dengan menggunakan form kita akan mendapatkan umpan balik dari pengunjung yang mengunjungi halaman web yang telah kita buat. Contoh dari penggunaan form ini sudah sangat banyak diaplikasikan, seperti membuat Buku tamu, Subscribe E-mail, dll. Contoh sederhana dari form dapat dilihat pada code berikut : <TITLE>Contoh Form
Silahkan masukkan alamat E-mail anda untuk berlangganan Newsletter kami :

Dengan hasil tampilan :

Gambar 1.10. Contoh Form Sederhana

Selain jenis dari control form diatas masih terdapat beberapa lagi elemen control yang terdapat pada tag form. Diantaranya dapat dilihat pada tabel berikut : No.

Elemen

Penjelasan

1

TEXT

Kontrol ini berfungsi untuk mengumpulkan suatu baris tulisan, dalam form ini dapat disisipkan atribut maxlength dan size untuk mengatur banyak huruf dan ukuran kotak.

2

RADIO

Merupakan form kontrol pilihan diantara sekelompok pilihan, jadi dalam sebuah kelompok hanya salah satu pilihan yang dapat dipilih.


9

3

CHECKBOX

Merupakan kontrol form yang paling sederhana, memiliki nilai true jika di centangkan

dan

false jika tidak dicentangkan 4

TEXTAREA

Kontrol ini berfungsi untuk mengumpulkan tulisan yang lebih dari satu baris, dapat disisipkan atribut yang sama seperti elemen TEXT

5

SELECT

Yaitu elemen control yang digunakan untuk menampilkan pilihan dalam bentuk listbox dengan tampilan scrool menu, elemen didalamnya adalah OPTION

6

SUBMIT

Yaitu tombol yang digunakan untuk mengirimkan data yang telah diinputkan pada form

7

RESET

Yaitu tombol yang digunakan untuk mengosongkan isi dari form.

8

OPTION

Option adalah pilihan yang terdapat pada control SELECT

Contoh dari elemen-elemen control di atas dapat dilihat pada code berikut, salin dan simpanlah dengan nama contohform.html : <TITLE>Contoh Form

Kuesioner Mahasiswa

Nama

Password

Jenis Kelamin Pria Wanita

Hobby Membaca, Sport, Music, Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

10

Memasak, Tamasya

Komentar

Jurusan <select size="1" name="Jurusan">

Yang tampilannya :

1

2 3

4

5

6

7

Gambar 1.11. Contoh Form control


11

II.

CSS (Cascading Style Sheet) Cascading Style Sheet (CSS) adalah sebuah script yang digunakan untuk mengendalikan dan mengubah tampilan dari sebuah halaman html. Normalnya, format halaman html seperti bentuk font, warna font, warna background, dan lainlain, didefinisikan bersamaan dengan perintah html, tetapi dengan CSS kita tidak perlu melakukan hal tersebut, cukup dengan mendefinisikannya sekali dan disimpan dalam sebuah file baru yang berekstensi .css, dan di link pada halaman html dengan mengunakan tag: . Untuk lebih jelasnya dapat kita lihat pada contoh berikut, salinlah script berikut dan simpan dengan nama style.css : a { color:#0000FF; text-decoration:none; } a:hover { color:#FF0000; text-decoration:underline; } body { font-family: verdana, tahoma, helvetica, arial, sans-serif; font-size: 90%; color:#000000; margin: 1em; background-color:#F8F8F8; } form { font-size: 80%; } h2 { font-size:95%; font-weight:bold; padding-bottom:0em; } p { text-align:left; font-size: 80%; line-height: 2em; } table { border: 2px solid #CCCCCC; } td { font-size:80%; }

Sedikit penjelasan mengenai script diatas: CSS mendefinisikan style dari tiap-tiap elemen, tag, atau kelas yang berada pada file html, seperti yang tampak pada script diatas warna font pada tag link () diberi warna biru (color: #0000FF), dan tanpa menggunakan style apapun (textdecoration: none;), tetapi ketika disorot dengan pointer mouse (hover) maka warna font akan menjadi merah (color: #FF0000), dan diberi garis bawah (text-decoration: underline;). Simpanlah file style.css tadi pada folder yang sama dengan file contohform.html (yang sebelumnya telah dibuat) dan tambahkan line berikut pada diantara tag : File cobaform.html : <TITLE>Contoh Form ....

Setelah itu coba save, dan jalankan file cobaform.html, pasti akan terlihat perbedaan yang terjadi, di mana tampilan yang sebelumnya seperti ini :


12

Gambar 2.1. Tampilan sebelum ditambahkan file style.css

Berubah menjadi tampilan yang seperti gambar berikut :

Gambar 2.2. Tampilan setelah ditambahkan file style.css


13

III. PHP, MySQL, dan APACHE PHP merupakan script yang menyatu dengan HTML dan berada pada server (server side HTML embedded scripting) yang artinya semua sintaks yang kita berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. Dengan PHP ini Anda dapat membuat beragam aplikasi berbasis web, mulai dari halaman web yang sederhana sampai aplikasi komplek yang membutuhkan koneksi ke database. Sedangkan MySQL adalah sebuah perangkat lunak sistem manajemen basis data (DBMS) yang sering digunakan dalam membuat suatu situs web yang dinamis. MySQL menggunakan bahasa SQL guna melayani permintaan query database. SQL (dibaca “ess-que-el”) merupakan kependekan dari Structured Query Language. SQL digunakan untuk berkomunikasi dengan sebuah Database. Sesuai dengan ANSI, SQL merupakan bahasa standar untuk sistem menajemen database relasional. Statemen SQL digunakan untuk melakukan tugas-tugas seperti melakukan update terhadap database, atau mengambil data dari sebuah database. Untuk menjalankan kedua software di atas kita memerlukan sebuah software lagi yang disebut dengan web server. Dan web server yang kita gunakan di sini adalah Apache. Apache adalah web server yang dapat dijalankan di banyak sistem operasi (Unix, BSD, Linux, Microsoft Windows, serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web yang dinamis. Protokol yang digunakan untuk melayani fasilitas web/www ini mengunakan HTTP (HyperText Transfer Protocol). Apache memiliki fitur-fitur canggih seperti pesan kesalahan yang dapat dikonfigur, autentikasi berbasis basis data dan lain-lain. Apache juga didukung oleh sejumlah antarmuka pengguna berbasis grafik (GUI) yang memungkinkan penanganan server menjadi mudah. Ketiga software di atas sangat diperlukan untuk membuat sebuah website yang dinamis, kita dapat menginstalnya secara terpisah dengan cara mendownload software tersebut pada tiap-tiap website resminya. Tetapi saat ini telah disediakan sebuah cara yang mudah yaitu dengan menginstal sebuah software package yang telah mengandung ketiga software di atas dengan sekali Install, software tersebut adalah XAMPP. Menginstal XAMPP XAMPP adalah sebuah software paket (package) yang menyatukan software yang dibutuhkan dalam desain web, diantaranya PHP, MySQL, dan Apache, Sehingga memudahkan kita dalam hal penginstalannya ke dalam komputer. XAMPP sendiri adalah singkatan dari X (Cross) Apache, MySQL, PHP, and PERL. XAMPP yang kita gunakan saat ini adalah XAMP versi 1.7.3, yang di dalamnya terdapat softwaresoftware antara lain : Apache v.2.2.14, MySQL v.5.1.41, PHP v.5.3.1, Perl v.5.10.1, phpMyAdmin v.3.2.4, dan lain-lain. Berikut adalah langkah-langkah menginstal XAMPP pada Windows. 1. Run setup XAMPP dengan dobel klik pada xampp-win32-1.7.3.exe. maka akan muncul windows instalasi XAMPP (perlu diperhatikan, versi XAMPP yang digunakan disini adalah v1.7.3, yang kemungkinan cara instalasinya tidak sama dengan XAMPP versi lainnya). 2. Pada kolom Destination Folder, secara default akan diarahkan pada C:\, biarkan saja seperti itu dan klik Install. Tunggulah sampai proses instalasi selesai. 3. Akan muncul command prompt window, yang menanyakan ############################################################################ # XAMPP 1.7.3 - Setup # #--------------------------------------------------------------------------# # Copyright 2009 Carsten Wiedmann (FreeBSD License) # #--------------------------------------------------------------------------# # Authors: Carsten Wiedmann # # Kay Vogelgesang # ############################################################################ Should I add shortcuts to the startmenu/desktop? (y/n): y


14

Tekan Enter. 4. Akan muncul pertanyaan selanjutnya: Should I locate the XAMPP paths correctly? Should I proceed? (y/x=exit setup): y

Tekan Enter lagi. 5. Muncul lagi Pertanyaan selanjutnya: Should I make a portable XAMPP without drive letters? NOTE: - You should use drive letters, if you want use services. - With USB sticks you must not use drive letters. Your choice? (y/n): n

Tekan Enter. 6. Proses konfigurasi akan dimulai dengan ditandai munculnya beberapa pesan text berikut: relocating XAMPP... relocate XAMPP base package relocate Apache relocate FileZilla FTP Server relocate Mercury relocate MySQL relocate OpenSSL relocate Perl relocate PHP relocate phpMyAdmin relocate Sendmail relocate Webalizer relocate XAMPP Demopage relocating XAMPP successful. XAMPP is ready to use. Press to continue:

Tekan Enter. 7. Akan muncul pesan bahwa setup akan memperbaiki setting php.ini dan mysql.ini, tekan Enter untuk mengeksekusi. 8. Setelah itu akan muncul pilihan berikut: 1. start XAMPP Control Panel 2. relocate XAMPP (current path: C:\xampp) 3. disable HTTPS (SSL) 4. disable Server Side Includes (SSI) 5. enable IPv4 only (current: IPv4/6 (auto)) 6. disable mod_perl 7. disable Apache::ASP x

Exit

Please choose (1-7/x):

Tekan 1 lalu Enter, untuk memulai XAMPP Control Panel. 9. Tutuplah command-prompt windows tadi, dan perhatikan XAMPP Control panel, akan tampak seperti gambar berikut:

Gambar (a)

Gambar (b)

Klik lah pada tombol Start disamping Apache dan MySQL untuk memulai menjalankan Web Server dan Database server, tunggu sampai muncul tulisan Running (seperti pada Gambar (b)) Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

15

Yang menandakan server telah berjalan dengan baik. (Terkadang muncul pesan firewall ketika proses memulai server, klik saja Allow untuk memperbolehkan web service berjalan). 10. Cobalah local server anda dengan membuka browser (Internet Explorer/Mozilla Firefox) dan ketikkan pada Addres bar: http://localhost/ atau http://127.0.0.1 11. Jika semua berjalan dengan baik maka tampilan awal XAMPP akan ditampilkan. Contoh Aplikasi PHP PHP memiliki banyak sekali sintaks dan fungsi, untuk lebih jelasnya dapat kita lihat contoh penggunaan Script PHP dengan Database MySQL yang dijalankan pada Server Apache melalui contoh aplikasi Buku Tamu (Guestbook). Membuat Buku tamu dengan PHP dan MySQL Berikut adalah langkah-langkah pembuatan buku tamu sederhana: 1. Pastikan bahwa Server Apache, dan MySQL telah dijalankan, dengan cara men-Start service Apache dan MySQl melalui XAMPP Control panel. 2. Buatlah sebuah database yang akan menyimpan data buku tamu di dalam MySQL, yaitu dengan cara : 2.1 Kita akan menggunakan sebuah tools yang sudah disediakan oleh XAMPP untuk mempermudah kita mengolah database, tools tersebut adalah PHPMyAdmin. Untuk menjalankan PHPMyAdmin, buka halaman browser dan ketikkan http://127.0.0.1/phpmyadmin pada addres bar maka akan muncul tampilan seperti pada gambar berikut.

Gambar. Tampilan Phpmyadmin

2.2 2.3

Buatlah sebuah database baru dengan mengetikkan bukutamu pada kolom Create new database dan klik Create. Apabila database bukutamu berhasil dibuat maka akan muncul tampilan seperti pada gambar ..., dari sini maka database tersebut sudah dapat digunakan.


16

Gambar. database telah berhasil diciptakan

2.4

Langkah selanjutnya adalah membuat table, untuk menyimpan record dari buku tamu, yaitu dengan mengklik tab SQL ( yang disediakan :

) dan mengetikkan kode berikut pada kolom

CREATE TABLE bukutamu ( id INT (10) UNSIGNED NOT NULL AUTO_INCREMENT, nama VARCHAR (15) NOT NULL, situs VARCHAR (30) NOT NULL, email VARCHAR (30) NOT NULL, pesan TEXT NOT NULL, waktu DATETIME NOT NULL, PRIMARY KEY(id), UNIQUE(id), INDEX(id) );

2.5

Laku klik pada tombol GO, setelah itu klik pada menu bukutamu (1), apabila table berhasil diciptakan maka akan muncul tampilan sebagai berikut.

Gambar 3.3. Table telah berhasil diciptakan

3.

Setelah itu langkah selanjutnya adalah mengoneksikan database dengan php, yaitu dengan menggunakan script php yang mendefinisikan informasi server yang kita gunakan, salin script berikut dan save dengan nama koneksi.php pada folder C:\xampp\xampp\htdocs\bukutamu .


17

File koneksi.php :

4.

setelah membuat file koneksi.php, salin lagi script berikut ini dan simpan pada tempat yang sama dengan file koneksi.php, dengan nama index.php. File index.php : <script language="JavaScript"> alert('Terima kasih. Anda telah mengisi buku tamu'); document.location='lihat_bukutamu.php'; <script language="JavaScript">alert('Nama dan pesan harus diisi'); Buku Tamu


18

ISI BUKU TAMU

Nama* :

Email :

Situs :

Pesan*

Lihat Bukutamu

Sebelumnya jangan lupa menyalin file style.css yang telah dibuat pada latihan sebelumnya, pada folder yang sama dengan file index.php dan koneksi.php. Apabila script di atas telah diketikkan dengan benar maka saat dijalankan tampilannya akan seperti gambar berikut.

Gambar 3.4. Tampilan form isi buku tamu

5.

Lalu buatlah sebuah halaman untuk melihat isi dari buku tamu, salinlah script berikut ini dan simpan dengan nama lihat_bukutamu.php pada folder yang sama dengan koneksi.php, dan index.php : File lihat_bukutamu.php : Lihat bukutamu <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


19

LIHAT BUKU TAMU

Daftar Buku Tamu :

<strong> - <strong>email:"> - <strong>situs:" target="_blank"> -
""

ISI BUKU TAMU

Apabila script di atas telah diketikkan dengan benar maka saat dijalankan tampilannya akan seperti gambar berikut.

Gambar. Tampilan lihat isi buku tamu (dengan beberapa contoh isian)


20

IV. CMS (Content Management System) 4.1. Pengertian CMS Apa itu CMS? Content Management System (CMS) atau Sistem Manajemen Isi adalah perangkat lunak (software) dengan konsep dan metode yang memungkinkan seseorang untuk membuat, menambahkan serta memanipulasi (mengubah) isi dari suatu website. CMS secara sederhana dapat diartikan sebagai sebuah sistem yang memberikan kemudahan kepada para penggunanya dalam mengelola dan mengadakan perubahan isi sebuah website dinamis tanpa sebelumnya dibekali pengetahuan tentang hal-hal yang bersifat teknologi website. Dengan demikian penulis ataupun sumber daya lain yang diberikan otoritas setiap saat dapat menggunakannya secara bebas untuk membuat, menghapus atau bahkan memperbaharui isi website tanpa campur tangan langsung dari pihak webmaster. CMS memisahkan antara isi dan desain. Setiap bagian dari website dapat memiliki isi dan tampilan yang berbeda-beda, tanpa harus khawatir kehilangan identitas dari website secara keseluruhan. Oleh karena semua data disimpan dalam satu tempat, pemanfaatan kembali dari informasi yang ada untuk berbagai keperluan dapat dengan mudah dilakukan. CMS memberikan kefleksibelan dalam mengatur alur kerja (workflow) dan hak akses (Access rights), sehingga memperbesar kesempatan para pengguna untuk turut berpartisipasi dalam pengembangan sebuah website. Hal ini akan sangat menguntungkan bila website yang dikelola memiliki kompleksitas yang tinggi dan mengalami kemajuan yang cukup pesat. Kemampuan atau fitur dari sebuah sistem CMS berbeda-beda, namun kebanyakan dari software ini memiliki fitur publikasi berbasis web, manajemen format, kontrol revisi, pembuatan halaman depan (front page), pencarian, dan pengarsipan. Content Management System banyak digunakan untuk pembuatan Website dan dapat dikelompokkan ke dalam beberapa jenis. berdasarkan fungsinya CMS dikelompokkan menjadi CMS Web Portal, WebBlogs, E-Commerce, Groupware, Web Forums, E-Learning, Image Galleries, Wiki dan lainnya. Sedangkan pengelompokan CMS berdasarkan sifatnya yaitu CMS Komersial (berbayar) dan CMS Open Source. Salah satu perangkat lunak (software) Content Management System yang saat ini dikenal luas yaitu Joomla!, Sebuah software CMS yang powerful, bersifat open source dan dapat diperoleh dan dipergunakan secara bebas oleh siapa saja. Banyak sekali varian CMS yang beredar saat ini, yang berasal dari perusahaan atau vendor yang berbeda, di antaranya adalah Mambo, Joomla!, Drupal, PHPNuke, Wordpress, dll. Dan untuk saat ini CMS yang akan digunakan adalah Joomla! dengan versi 1.5. 4.2. Joomla! Joomla! adalah software Content Management System (CMS) yang bebas dan terbuka (Open Source) ditulis dengan menggunakan bahasa pemrograman PHP dan MySQL sebagai Database Management Systems (DBMS). Joomla! pertama kali dirilis dengan versi 1.0.0, pada tanggal 17 september 2005 dengan Project Code Sunrise, Fitur-fitur Joomla pada saat itu di antaranya adalah sistem caching untuk peningkatan performance, RSS, blogs, poling, dll. Lisensi yang digunakan oleh Joomla! adalah General Public License (GPL) sehingga Joomla! bersifat Free 1. Asal kata Joomla! sendiri berasal dari kata Suwaheli dari penduduk Kenya dan Tanzania di Benua Afrika yang berarti “all this together” atau "kebersamaan". Joomla! mempunyai prinsip fleksibel, simple, elegant, customizeable dan powerful. Fitur-fitur Joomla! diantaranya adalah sistem caching untuk peningkatan performansi, RSS, blogs, poling, dll. 1

Free artinya adalah bebas, bukan gratis. Makna free lebih mengacu pada kebebasan. Kebebasan mengembangkan, kebebasan menggunakan untuk kepentingan apa saja dan kebebasan mendistribusikan tanpa diharuskan membayar lisensi. Kebebasan mendistribusikan inilah yang membuat kata free menjadi gratis (pemaknaan secara tidak langsung). Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST 21

Joomla terdiri dari 3 elemen dasar yaitu web server, bahasa pemrograman PHP dan Database Management Systems MySQL. Paket Joomla! terdiri dari beberapa bagian yang terpisah dan dimodulkan secara fleksibel sehingga dapat mudah dikembangkan dan diintegrasikan kembali, paket tersebut disebut dengan “extension”. Extention dalam Joomla! Dibagi ke dalam beberapa paket yaitu Templates, Components, Modules, Plug In dan Languages Pack. Extension Joomla tersebut dapat diperoleh dari beberapa website pendukung pengembangan CMS Joomla yang sebagian besar bersifat Open Source, di antaranya yaitu OpenSourceMatters, Joomla.org, Joomla24, Joomla-id, JoomlaArt dan lain sebagainya. 4.3. Mengapa Joomla? Ada beberapa alasan mengapa kita akan membahas mengenai Joomla! di antaranya adalah: 1. Joomla! sangat mudah digunakan dan dipelajari baik itu bagi pengguna awam maupun pengguna yang sudah profesional dalam bidang pembuatan web 2. Joomla! memiliki sistem yang sangat stabil dan yang dapat dikatakan memiliki bug yang paling sedikit dibandingkan software CMS lainnya. 3. Extension yang tersedia sangat banyak, dan dapat memenuhi hampir semua fasilitas yang diperlukan oleh penggunanya, baik hanya digunakan sebagai blog pribadi maupun sebuah website e-commerce yang profesional. 4. Proses perkembangan Joomla! sangat cepat, karena sifatnya yang open source, jadi pengembangan dari Joomla! ini tidak hanya dilakukan oleh developer Joomla!, tetapi juga bagi siapa saja yang tertarik untuk turut serta memperbaikinya. 5. Joomla! merupakan CMS yang Free. 6. Joomla! Mendukung SEF (Search Engine Friendly) dan RSS (Really Simple Syndication) sehingga dapat mempermudah proses publikasi dari website yang menggunakan Joomla! sebagai software CMS-nya. 4.4. Instalasi Joomla! Joomla merupakan sebuah software, dan sebagaimana halnya software joomla perlu memalui langkah-langkah instalasi untuk dapat digunakan. Tetapi Sebelum menginstalasi Joomla! 1.5, perlu sediakan dulu kebutuhan-kebutuhan minimum yang diperlukan agar Joomla! dapat dijalankan dengan baik, diantaranya : 1. Web Server, Misalnya: Apache (versi 1.13.19 atau yang lebih baik), 2. Aplikasi PHP (versi 4.3 atau yang lebih baik), 3. Sistem manajemen Database seperti MySQL (versi 4.1.x atau yang lebih baik), dan 4. File package Joomla!. Untuk kebutuhan pada poin 1 sampai 3 tentunya sudah disediakan oleh XAMPP, tinggal kebutuhan yang ke 4, dapat kita download secara gratis pada situs resminya yaitu www.joomla.org/download. Juga diperlukan sebuah database yang kosong untuk mengisi informasi dari Joomla!, untuk itu buatlah sebuah database menggunakan PHPMyAdmin, dengan nama joomla. (cara pembuatan database menggunakan PHPMyAdmin telah dijelaskan sebelumnya). Setelah semua kebutuhan terpenuhi kita bisa masuk pada bagian instalasi : Pertama-tama ekstraklah file package joomla dengan cara: klik kanan pada package joomla, dan pilih extract files.. (sebelumnya pastikan program WinRAR telah terinstal pada komputer anda), seperti yang terlihat pada gambar berikut.


22

Gambar 4.1 Extract package joomla

Extractlah package tersebut pada folder C:\xampp\xampp\htdocs\joomla seperti yang tampak pada gambar berikut.

Gambar 4.2 Lokasi extract package joomla

Tekan OK, dan tunggulah sampai proses ekstraksi selesai, setelah itu bukalah browser dan ketikkan http://localhost pada addressbar, dan tekan enter, apabila semua berjalan dengan baik maka proses instalasi Joomla! akan dimulai. Proses instalasi pada Joomla! 1.5.x dibagi kedalam 7 langkah yaitu Language (pemilihan bahasa), Pre-Instalation Check, License, Database, FTP Configuration, Configuration, dan Finish. Langkah 1. Language (Pemilihan Bahasa)

Gambar 4.3 Pemilihan bahasa

Pada langkah 1 akan ditentukan bahasa apa yang akan digunakan selama proses instalasi, secara default Joomla! akan memilih bahasa Inggris (En-US), Next. Untuk menuju halaman instalasi selanjutnya. Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

23

Langkah 2. Pre-Installation Check Pre-Installation Check adalah peroses di mana Joomla! akan mengecek apakah kebutuhankebutuhan minimum dan Setting yang telah direkomendasikan oleh sudah terpenuhi, proses PreInstallation Check tampak seperti pada gambar berikut.

Gambar 4.4 Pre-installation Check

Kotak bagian atas pada Pre-Installation Check adalah kebutuhan minimun dari Joomla!, jadi apabila ada salah satu dari poin tersebut tidak terpenuhi maka Joomla! tidak akan dapat berjalan dengan baik (bahkan tidak dapat berjalan sama sekali), untuk kotak bagian bawah adalah setting yang direkomendasikan, jadi jika salah satu poin tidak terpenuhi tidak akan terlalu berpengaruh pada hasil instalasi Joomla!. Next lagi untuk menampilkan halaman proses instalasi selanjutnya. Langkah 3. License Lisensi (License), adalah proses instalasi Joomla! yang menunjukkan lisensi yang digunakan oleh Joomla! yaitu GNU GPL, karena Joomla bersifat Open Source, Next untuk menampilkan halaman proses instalasi selanjutnya.

Gambar 4.5 Lisensi

Langkah 4. Database Configuration Halaman instalasi selanjutnya adalah Database Configuration, di sini user akan diminta untuk memasukkan parameter-parameter yang sesuai dengan parameter hasil instalasi MySQL dan konfigurasinya. Hostname adalah nama host dari komputer atau server yang digunakan. Dan nama host default dari XAMPP adalah localhost, untuk Username digunakan root karena juga merupakan User name default dari XAMPP yang memegang hak akses super administrator pada MySQL server, pada bagian Password dikosongkan saja karena database MySQL pada XAMPP tidak menggunakan password secara default, dan untuk kolom Database buatlah sebuah database menggunakan PHPMyadmin (Cara membuat database dengan PHPMyadmin telah dijelaskan Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST 24

sebelumnya) dengan nama joomla dan ketikkan pada kolom Database Name, untuk Advanced settings dibiarkan dalam posisi default.

Gambar 4.6 Konfigurasi database

Next untuk memasuki langkah selanjutnya. Langkah 5. FTP Configuration yaitu FTP Configuration, untuk konfigurasi FTP tidak ada parameter penting yang harus diubah pada langkah ini, cukup klik next untuk menuju langkah selanjutnya Langkah 6. Configuration Pada langkah ini user akan diminta untuk mengisikan parameter umum dari website yang akan dibuat, seperti Site Name yaitu nama website, alamat email dan password administrator, masukkanlah informasi yang diminta sesuai dengan keinginan anda, tampilan konfigurasi tersebut akan tampak seperti di bawah ini.

Gambar 4.7 Konfigurasi umum

password yang di inputkan pada proses instalasi inilah yang akan digunakan untuk login ke halaman administrator/back end Joomla!, Apabila kolom Admin password tidak di isikan sebelumnya, maka Joomla! akan secara otomatis menggenerate password admin secara random. Secara default Joomla! telah menyediakan sampel data yang berisikan contoh Isi dari website yang telah dibangun menggunakan CMS Joomla, tetapi untuk saat ini kita tidak perlu menginstalnya, karena kita akan mencoba langkah demi langkah untuk membuat sebuah website pribadi sederhana menggunakan CMS Joomla! ini. Jadi saat ini abaikan saja dulu tombol Install Sampel Data. Dan tekan tombol Next. Sebelumnya akan muncul peringatan bahwa sampel data belum di instal, tekan OK, untuk melanjutkan langkah instalasi Joomla!. Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

25

Langkah 7. Finish Pada langkah terakhir ini dengan alasan keamanan Joomla! akan memperingatkan penggunanya untuk menghapus direktori Installation (yang terletak pada direktory C:xampp\xampp\joomla\instalation\ ), karena selama direktori tersebut belum dihapus maka halaman depan dari Website Joomla! tidak akan dapat diakses oleh user, jadi sebelum mengakhiri proses instalasi folder instalasi tersebut harus terlebih dahulu dihapus.

Gambar 4.8 Finish

Setelah menghapus folder Installation, maka website Joomla! akan bisa dapat diakses, dengan mengetikkan alamat http://localhost/joomla, halaman depan akan tampak seperti pada gambar 4.9, yang merupakan halaman depan default dari Joomla! 1.5. apabila kita menginstalkan sampel data.

Gambar 4.9 Halaman depan default Joomla.


26

4.5. Administrasi Joomla! 1.5 Seluruh pengaturan website, mulai dari penambahan konten, pengaturan module, instalasi component dan plug in, pemilihan template, sampai pemilihan bahasa diatur di dalam administrasi Joomla!, untuk dapat mengakses administrasi diperlukan hak/rights yang memadai, jadi diperlukan sebuah LoginID dan password untuk dapat mengakses halaman administrator. Hak atau rights dari Joomla! dibagi menjadi 2 kelompok utama yaitu Front-End User Group dan Back-End user Group lebih rinci mengenai pembagian hak dapat dilihat pada tabel berikut. Tabel 4.1 Front-End User Group Group Hak Registered Registered atau kelompok user yang telah meregistrasi pada website memiliki beberapa hak khusus yang ditetapkan oleh administrator, di mana pengunjung biasa tidak dapat mengaksesnya Author Kelompok user ini memiliki hak yang sama yang dimiliki oleh Registered User, tetapi untuk author memiliki hak tersendiri untuk memodifikasi informasi yang ia miliki. Editor Editor memiliki semua hak yang dimiliki oleh Author, ditambah dengan hak untuk mengubah atau mengedit konten pada halaman website. Publisher Publisher memiliki semua hak yang dimiliki oleh Editor, ditambah dengan hak untuk menambahkan konten pada halaman website, di mana Publisher dapat menentukan apakah sebuah konten akan di publikasikan atau tidak.

Group Manager

Administrator

Super Administrator

Tabel 4.2 Back-End User Group Hak Seorang Manager dapat menciptakan konten dan melihat seluruh informasi dari website, tetapi tidak dapat : Mengadministrasi User Menginstal modul, komponen, bahasa atau template baru pada website Melakukan perubahan pada konfigurasi website Mengirim Mass-mail pada semua user Administrator memiliki semua hak yang dimiliki oleh Manager, hanya saja administrator tidak memperoleh hak untuk mengubah konfigurasi website, dan mengubah atau menambah template atau bahasa dari website. Super Administrator memiliki semua hak administrasi pada Joomla!, dan hanya Super Administrator yang dapat menambahkan Super Administrator baru

Untuk memasuki halaman administrator pada Joomla! bisa dengan mengetikkan http://localhost/joomla/administrator/ pada addresbar browser, tekan enter maka akan muncul tampilan sebagai berikut.


27

Gambar 4.10 Halaman login administrator

Masukkan Username dan Password yang sebelumnya telah dibuat pada saat proses instalasi lalu klik pada tombol Login. Setelah berhasil melakukan login pada halaman Administrator Login, akan ditampilkan halaman control panel di mana terletak seluruh tombol yang mewakili setiap pengaturan yang ada pada bagian administrasi Joomla!.

Gambar 4.11

Menu Administrasi (Control Panel) utama pada Joomla! 1.5

Berikut ini akan dijelaskan fungsi dari setiap submenu dan tombol yang ada pada bagian administrasi Joomla! 1.5. Gambar Penjelasan 1. Add New Article Tombol Add New Article digunakan untuk menambah konten baru dari website, konten tersebut dapat berupa halaman website yang statis, sebuah informasi atau dokumentasi. Setiap Artikel dibagi ke dalam beberapa kategori, dan setiap kategori dibagi ke dalam beberapa Section. 2. Article manager Tombol Artikel Manager digunakan untuk memasuki halaman yang digunakan untuk mengatur seluruh konten yang ada pada website. 3. Front Page Manager Tombol Front Page Manager digunakan untuk memasuki halaman pengaturan konten yang ditampilkan pada halaman muka (Frontpage). Pada halaman tersebut dapat dilihat konten mana saja yang sedang ditampilkan di halaman depan. 4. Section Manager Tombol Section Manager digunakan untuk memasuki halaman pengaturan Section pada website, Section adalah pengelompokan secara umum dari konten pada sebuah website, pengelompokan yang lebih khusus dilakukan pada Category Manager. Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

28

5. Category Manager Tombol Category Manager digunakan untuk memasuki halaman pengaturan kategori pada website, Category pada Joomla! website adalah pengelompokan secara khusus dari sebuah konten yang memiliki topik yang hampir sama. 6. Media Manager Tombol Media Manager digunakan untuk memasuki halaman pengaturan media, secara default media manager akan memberikan tampilan dari direktori images pada website, pada bagian media manager ini kita dapat melakukan upload, atau menghapus file, tetapi hanya terbatas pada direktori images tersebut. 7. Menu Manager Tombol Menu Manager digunakan untuk memasuki halaman pengaturan menu yang akan ditampilkan pada website, di sini kita dapat melakukan pengaturan dan pengeditan menu mana saja yang akan ditampilkan pada halaman website, pada Joomla! CMS, menu dibagi ke dalam beberapa tipe di antaranya adalah Internal Link, yang dapat berupa Articles yaitu konten statis di dalam website, Contacts yaitu link untuk memasuki halaman kontak, News Feeds yaitu link untuk memasuki halaman artikel yang dikategorikan pada News Feeds, Polls yaitu link untuk mengakses halaman polling , Search yaitu link untuk memasuki halaman pencarian, User yaitu link untuk mengakses halaman informasi user yang telah teregistrasi ke dalam website, Web links yaitu link untuk mengakses halaman kumpulan link, dan Wrapper yaitu link untuk mengakses halaman sebuah website tanpa harus meninggalkan website Joomla!, lalu Eksternal Link yaitu menu link yang akan membawa user ke website luar, Separator yaitu menu yang digunakan untuk menjadi induk dari menu-menu khusus seperti Drop-down Menu, atau Cross-fading Menu, Alias yaitu menu yang digunakan sebagai link untuk mengakses menu yang sudah ada sebelumnya. 8. Language Manager Tombol Language Manager digunakan untuk memasuki halaman pengaturan Bahasa, di sini pihak administrator akan dapat menentukan bahasa utama dari website. Pada setiap versi dari Joomla! hanya akan menyediakan 1 bahasa yaitu bahasa Inggris, jadi untuk menambahkan bahasa baru, kita perlu men-download lagi pada situs Extension Joomla! (http://extensions.joomla.com) 9. User Manager Tombol User Manager digunakan untuk memasuki halaman pengaturan User dari website joomla, hanya user dengan Hak Administrator atau Super Administratorlah yang berhak melakukan perubahan pada bagian ini. 10. Global Configuration Tombol Menu Manager digunakan untuk memasuki halaman pengaturan website secara global, di antaranya adalah pengaturan situs yaitu Nama Website, Offline Message, List Length, Metadata Settings, dan Seo Setting. Pengaturan System yaitu System Settings, User Settings, Media Settings, Debug Settings, Cache Settings, dan Session Settings. Dan Pengaturan Server. 4.6. Pengaturan Isi (Contents) dan Administrasi pada Website menggunakan Joomla! Seperti yang telah dibahas sebelumnya, semua pengaturan yang berhubungan dengan administrasi sebuah website yang menggunakan Joomla! CMS, dilakukan pada halaman Administrator Joomla! , beberapa pengaturan yang dapat dilakukan pada halaman administrasi Joomla! di antaranya adalah Menambah atau mengubah konten, menu, atau user account, membuat Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

29

custom module, serta menginstal dan memodifikasi extensions (advanced module, component, dan plugin), bahasa, dan template. Proses administrasi konten, modul, komponen, section, category, dan lain sebagainya pada Joomla! tidak akan terlepas dari peran Text Editor. Text editor pada Joomla! (atau pada kebanyakan Content Management System) disebut dengan WYSIWYG (What You See is What You Get) editor. Cukup banyak Pilihan WYSIWYG editor yang dapat digunakan pada Joomla!, pada kondisi default, instalasi Joomla! 1.5.x, akan menyediakan sebuah WYSIWYG editor yaitu TinyMCE 2.0. Tetapi editor ini dirasa masih memiliki fungsi yang kurang memadai, untuk itu kita akan memasang sebuah komponen tambahan berupa WYSIWYG editor yang bernama CKEditor dengan versi terbarunya adalah 1.2. 4.7. Menginstal Plug In dan Komponen Tambahan: CKEditor 1.2 Untuk menginstal komponen tambahan pada Joomla! kita cukup menggunakan menu install/uninstall extensions, yang berada pada menu Extensions > Instal/Uninstall seperti yang terlihat pada gambar berikut.

Gambar 4.12

Menu Install/Uninstall Extension

Maka kita akan memasuki halaman Extension Manager, yaitu halaman yang digunakan untuk menginstall fitur-fitur tambahan pada joomla, seperti yang tampak pada gambar berikut.

Gambar 4.13

Pada

Halaman Extension manager

bagian

Upload package, tekan tombol Browse, dan arahkan pada file CKEditor.1.2.zip, lalu tekan tombol Upload File & Install, maka plug in tersebut akan di instalkan ke dalam joomla yang kita gunakan. Apabila semua berjalan dengan baik maka akan muncul konfirmasi bahwa Instalasi komponen sukses. Yang berarti kompenen tersebut sudah dapat kita gunakan. Langkah selanjutnya adalah membuat CKEditor menjadi WYSIWYG editor default yang akan kita gunakan yaitu dengan masuk pada halaman control panel melalui menu Site > Global Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

30

Configuration, ubahlah value Default WYSIWYG Editor yang awalnya adalah Editor - TinyMCE

menjadi Editor - CKEditor dan tekan tombol Save, seperti yang tampak pada gambar berikut.

Gambar 4.14

Mengubah Default WYSIWYG Editor

Berikut adalah sedikit penjelasan mengenai fungsi-fungsi tombol yang tersedia pada CKEditor.

Gambar 4.15 Tampilan umum CKEditor (default)

Fungsi dari tiap-tiap tombol yang ada pada editor CKEditor dapat dilihat pada tabel berikut. Tabel 4.3 Fungsi Tombol pada CKEditor Tombol

Nama

Fungsi

Bold, Italic, Underline, Striketrough

Bold untuk memberi cetak tebal pada huruf, Italic untuk cetak miring, Underline untuk huruf dengan garis bawah, dan Striketrough untuk huruf dengan coretan

Align

(dari kiri kekanan) Left untuk paragraf rata kiri, Center untuk rata tengah, Right untuk rata kanan, Full untuk rata kiri dan kanan

Style

Untuk menentukan gaya yang dipakai pada kata atau kalimat

Format

Untuk menentukan format yang dipakai pada kata atau kalimat

Font family

Untuk menentukan jenis huruf(font) yang dipakai pada kata atau kalimat

Font size

Untuk menentukan huruf(font)

Ordered list, Unordered List

Untuk menambahkan list atau penomoran pada kata atau kalimat


ukuran

31

Outdent, Inden, Blockquote

Untuk menambahkan/mengurangi posisi tab sebelum kalimat, dan menambahkan tanda kutip.

Undo, Redo

Untuk kembali, atau maju 1 langkah kerja yang telah dilakukan

Add Hyperlink, Remove Hyperlink, Insert/Edit Anchor

Untuk menambah atau menghapus hyperlink, dan menambah atau mengedit anchor

Cut, Copy, Paste, Paste as plain text, Paste From Word

Tombol untuk meng-copy dan paste tulisan, untuk paste from word akan menempelkan tulisan beserta dengan format yang sesuai dengan format dokumen aslinya.

Insert/Edit Image

Untuk menambah artikel

Edit Source Code

Mengedit Source Code konten dalam bahasa HTML

Emotions

Menambahkan gambar Emotion.

Insert Flash

Untuk menambahkan Shockwave Flash (*.swf).

Select Text Color

Memilih warna dari huruf (font)

Insert Horizontal Line

Untuk menambahkan garis pembatas

Subscript, Superscript

Untuk memformat huruf berada di bawah atau di atas kata.

Insert Custom Character

Untuk menambahkan /simbol yang tidak baku

Insert New Table

Untuk menambahkan tabel

Toggle Full Screen Mode

Untuk mengaktifkan mode penuh layar pada Editor

Form Toolbar

Toolbar untuk mengedit form, terdiri dari Checkbox, Radio Buton, Text Field, Text area, Selection Field, Buton, Image Button, dan Hidden Field.

gambar

pada

media

karakter

Tabel hanya menjelaskan beberapa tombol yang akan sering digunakan Pada CKEitor. 4.8. Menambah atau Mengedit Konten Konten pada Joomla! CMS disebut dengan article yang dapat berupa informasi, dokumentasi dan halaman-halaman statis lainnya. Sebuah konten dapat dihubungkan dengan sebuah menu agar bisa diakses oleh pengunjung website. Pada saat melakukan penambahan konten kita harus terlebih dahulu melakukan pengelompokan konten tersebut ke dalam kategori, dan melakukan


32

pengelompokan kategori ke dalam section. Sehingga pada saat pertama kali kita melakukan penambahan konten harus dilakukan melalui beberapa tahap yaitu : 1. Pembuatan Section Untuk menciptakan Section terlebih dahulu kita harus masuk ke dalam halaman administrasi Joomla! dengan memasuki Username dan password yang sesuai pada saat instalasi, lalu klik pada tombol Section Manager atau memilih menu Content > Section Manager seperti yang tampak pada gambar 4.18.

atau

Gambar 4.16

Memilih Section Manager

Pada halaman Section Manager klik pada tombol New

Gambar 4.17 New Section

Setelah itu ketikkan judul (title) dan alias serta sedikit informasi mengenai Section yang akan dibuat, misalkan di sini akan dibuat sebuah Section baru dengan nama artikel. Maka tampilan pembuatan New Section akan seperti gambar berikut.

Gambar 4.18 Informasi New Section


33

Lalu klik pada tombol Save. Maka pada daftar section akan muncul sebuah section baru yaitu Section artikel.

Gambar 4.19 Section telah berhasil disimpan

Dengan mengikuti langkah-langkah diatas buat juga sebuah section lagi, yaitu section Info. 2. Pembuatan Category Setelah membuat Section, tahap selanjutnya adalah membuat Category, yang merupakan pembagian yang lebih spesifik dari sebuah konten, untuk melakukan penambahan Category, kembali pada control panel dan klik pada tombol New Category atau melalui submenu Content > New Category, seperti yang tampak pada gambar berikut.

atau

Gambar 4.20 Memilih Category Manager

Pada halaman Category Manager klik pada tombol New, ketikkan judul (title) dan alias serta sedikit informasi mengenai Category yang akan dibuat, misalkan di sini akan dibuat sebuah Category baru dengan nama berita dan dimasukkan pada Section artikel yang telah dibuat sebelumnya. Maka tampilan pembuatan New Category akan tampak seperti pada gambar berikut.

Memilih artikel sebagai Section

Gambar 4.21 Informasi New Category

Setelah itu klik pada tombol Save. Untuk menyimpan informasi yang telah diketikkan, Maka pada daftar Category akan muncul sebuah Category baru yaitu Category Umum. Buat juga sebeuah kategori lagi pada section Artikel dengan nama perjalanan, dan satu kategori pada section Info, yaitu kategori Umum. Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

34

3. Pembuatan Content Setelah mempersiapkan Section dan Category sekarang kita dapat membuat sebuah konten yang akan dimasukkan ke dalam kategori dan section yang telah buat tadi, yaitu dengan cara mengklik tombol Add New Article pada control panel, atau melalui sub-menu Content > Article Manager dan mengklik pada tombol New. Seperti yang tampak pada gambar berikut

1 2 Klik

Gambar 4.22 New Article

Sama seperti Section dan Category, ketikkan judul (title) dan alias dan ketikkan konten yang akan ditampilkan pada halaman website nanti, misalnya kita akan membuat halaman selamat datang bagi pengunjung website yang kita buat ini, berikut adalah contoh pesan selamat datang.

Gambar 4.23 Penambahan Artikel/Konten

Untuk kolom Alias bisa dibiarkan kosong karena Joomla! akan menggenerate isi dari kolom tersebut sesuai dengan aturan baku dari penulisan alias yaitu tanpa spasi dan harus menggunakan huruf kecil. Untuk kolom Section pilihlah section info dengan umum sebagai Category. Dan agar tampilan lebih menarik kita dapat menambahkan gambar, langkah-langkah penambahan gambar pada artikel yaitu dengan mengklik pada tombol insert/edit image ( ) maka akan muncul dialog Image Properties, masuk pada tab Upload, dan browse-lah file gambar (contoh: welcome.png), dan klik pada tombol Send it to server. Setelah itu dialog akan beralih pada Tab Image Info, ketikkanlah parameternya seperti yang tapak pada gambar berikut.


35

Gambar 4.24 Memasukkan gambar

Sedikit keterangan mengenai parameter gambar yang disediakan CKEditor:  Alternative Text berfungsi untuk menamai gambar, yang akan muncul jika gambar tersebut disorot oleh kursor mouse,.  Width, Height adalah adalah kolom untuk mengatur kuran lebar dan tinggi gambar,  Border berfungsi untuk menentukan ketebalan garis pinggir pada gambar, jika tidak diisi maka gambar tidak akan diberi border.  HSpace (Horizontal Space) berfungsi untuk menentukan jarak gambar dari tulisan secara vertikal, dimana semakin besar nilainya maka gambar akan semakin ke kanan.  VSpace (Vertikal Space) berfungsi untuk menentukan jarak gambar dari tulisan secara vertikal, dimana semakin besar nilainya maka gambar akan semakin ke bawah.  Align berfungsi untuk menentukan Posisi dari gambar. Setelah itu tekan OK, maka gambar tersebut akan dimasukkan ke dalam konten yang telah kita ketikkan tadi, dan satu hal lagi yang perlu diperhatikan, agar konten ini ditampilkan pada halaman depan dari website yang sedang kita buat ini, maka alihkan Radio Buton pada pilihan Front page ke Yes. Dan simpanlah konten tersebut dengan menekan tombol Save. Untuk melihat hasil dari konten Selamat datang yang telah kita buat tadi, tekanlah tombol prewview yang berada pada sudut kiri atas halaman administrasi Joomla ( tampak tampilan sebagai berikut.

). Maka akan

Gambar 4.25 Melihat preview dari website


36

4.9. Mengganti Tampilan (Template) Website. Agar website yang kita buat tampak lebih menarik kita dapat mengganti template dari website yang kita gunakan, pada CMS proses mengganti Tampilan/tema sangatlah mudah berikut adalah langkah-langkah mengganti Template Website pada CMS Joomla!. Pertama masuklah pada halaman Template Manager, melalui menu Extensions > template Manager, akan terlihat pilihan template yang disediakan oleh Joomla, coba pilihlah JA_Purity, lalu klik tombol default dan coba lihatlah preview dari website anda sekarang. Langkah-langkah mengubah template website dapat dilihat pada gambar berikut.

3 1 2

Klik

Gambar 4.26 Langkah-langkah mengganti template website

Setelah template diubah maka tampilan website anda akan menjadi seperti berikut.

Gambar 4.27 Tampilan website setelah template diganti.

4.10. Membuat Menu Menu adalah link yang menghubungkan konten yang kita buat, Untuk membuat sebuah menu item pada CMS Joomla perlu dibuat terlebih dahulu pengelompokan menu teresebut. Perlu diketahui juga menu adalah module oleh sebab itu menu dapat diletakkan di bagian mana saja pada halaman website Joomla!. sesuai dengan ketersedian posisi modul pada template yang kita gunakan. 1. Membuat Kelompok Menu Baru Untuk membuat sebuah kelompok menu baru masuk pada halaman Menu Manager masuklah melalui menu Menus > Menu Manager, pada halaman Menu Manager klik new maka akan muncul halaman Menu [New], Sebagai contoh kita membuat sebuah kelompok menu baru yaitu Artikel, masukkan pada kolom Unique Name: artikel, Title : Artikel, Description: Menu Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

37

Artikel, dan Module Name: Artikel, Lalu klik save untuk membuat kelompok menu tersebut. Untuk lebih jelas dapat dilihat pada gambar berikut.

Gambar 4.28 Membuat kelompok Menu baru

Setelah itu jangan lupa untuk mengaktifkan modul Menu tersebut pada menu manager, yaitu dengan memasuki menu Extensions > Modul Manager. Pada awalnya Modul artikel akan bertanda ( ) yang artinya tidak di publikasi, kliklah pada tanda tersebut hingga menjadi tanda centang ( ) untuk memublikasikan Modul tersebut, sehingga akan ditampilkan pada halaman depan website yang kita buat. Setelah itu pada posisi defaultnya Modul menu yang kita buat tersebut akan berada pada posisi pertama, untuk mengganti posisinya menjadi posisi kedua cukup tekan pada tanda ( ), untuk menurunkan posisi Modul. 2. Menambah Menu Item Untuk menambah Menu Item, masuklah pada kelompok menu yang sudah kita buat tadi (Menu Artikel), yaitu melalui menu Menus > Artikel, Tekan tombol New, maka akan muncul pengaturan menu baru, klik pada Articles, lalu Category List layout, seperti yang pada gambar berikut.

1

Klik

2

Gambar 4.29 Memilih tipe dari Menu Item

Akan muncul halaman Menu Item [new] masukanlah parameter yang diinginkan pada kolomkolom yang telah disediakan pada bagian Menu Item Details, untuk Parameter Basic klik pada tombol Select Category, maka akan muncul pemilihan kategori yang sebelumnya sudah kita buat yaitu section artikel dan kategori umum, yang ditunjukkan dengan Artikel/Umum, apabila semua sudah di set dengan benar yekan tombol save untuk menyimpan menu, seperti yang tampak pada gambar berikut.


38

Klik

1 2

Gambar 4.30 Membuat New Menu Item

Dengan mengikuti langkah yang sama seperti diatas buatlah Menu Perjalanan. Sehingga apabila kita mengklik site preview tampilannya akan menjadi seperti pada gambar berikut.

Gambar 4.31 Tampilan Website setelah ditambahkan menu.

3. Membuat Menu untuk Single Content Maksud dari Menu untuk Single Content disini adalah menu yang terhubung ke satu artikel yang kita buat, sehingga terlihat sebagai sebuah halaman baru. Misalnya kita ingin membuat sebuah halaman yang berisikan profil diri kita. Pertama-tama buatlah sebuah konten yang berisikan profile diri kita, contohnya dapat terlihat pada gambar berikut.


39

Gambar 4.32 Contoh konten profil.

Save dengan nama Title: Profile, Alias: profil dan masukkan pada Section: Info, dalam Category: umum. Setelah konten selesai dibuat, saatnya untuk membuat menu yang untuk menampilkan konten tersebut. Masuklah pada kelompok menu Main Menu, melalui menu Menus > Main Menu*, Tekan tombol New, maka akan muncul pengaturan menu baru, klik pada Articles > Article Layout.

Gambar 4.33 Membuat menu Article layout

Selanjutnya akan masuk pada bagian pengaturan Menu Article Layout, klik tombol Select pada bagian Parameter Basic, Kolom Select Article. Akan muncul Lightbox yang berisikan list Artikel yang telah kita buat sebelumnya, klik pada Artikel Profil, setelah itu isikan menu item details, dengan Title: profil, Alias: profil, Display in: Main Menu. Lebih jelas tampak pada gambar berikut.


40

Gambar 4.34 Parameter Menu Article layout

Klik pada tombol save untuk menyimpan menu tersebut, dan cobalah untuk melihat hasilnya dengan menekan tombol site preview, jika semua berjalan lancar maka tampilan website yang akan menjadi seperti pada gambar berikut.

Gambar 4.35 Tampilan wesite setelah ditambah menu profile.

4.11. Membuat Custom Modul Custom module adalah module yang kita buat sendiri dengan menggunakan Editor WYSIWYG dan bahasa HTML tanpa harus melalui proses instalasi, Sehingga untuk lebih memperindah tampilan website kita dapat menambahkan modul buatan sendiri seperti Jam Flash, Link Favorit, Counter Pengunjung, dan lain-lain. 1. Custom Modul: Jam Flash Untuk membuat modul dengan menggunakan jam flash, terlebih dahulu kita menyiapkan file .swf nya, misal nama file jam Flash tersebut adalah jamkalender.swf, masuklah pada bagian Modul Manager, melalui menu Extension > Module Manager, klik tombol new untuk membuat sebuah Modul baru, akan muncul halaman pilihan Jenis Modul apa yang akan kita buat, pilih Custom HTML, dan klik Next.


41

2 Klik 1

Gambar 4.36 Memilih jenis Modul.

Selanjutnya akan masuk pada halaman Menu [Edit], pada bagian Details ketikkan Title : Jam/Kalender, Position: Right. Lalu pada bagian Custom Output (Dialog CKEditor), klik pada Add Flash ( ), akan muncul dialog Flash Properties, masuk pada tab Upload, browse file jamkalender.swf, dan tekan pada tombol Send it to Server. Masukkan Properties sesuai dengan keinginan anda, dan tekan tombol OK.

Gambar 4.37 Memasukkan file Flash

Lalu kembali pada CKEditor buatlah file flash tersebut berada ditengah dengan mengklik Center Alignment ( ). Tekan tombol Save untuk menyimpan modul yang telah kita buat. Kliklah site preview, maka apabila dilakukan dengan benar maka tampilan web akan terlihat seperti pada gambar berikut.


42

Gambar 4.38 Tampilan Website dengan tambahan Modul Jam kalender.

2. Custom Modul: Link Favorit Membuat Custom modul yang berisikan link favorit ini pada prinsipnya sama dengan Custom modul jam Flash, hanya saja disini kita akan meletakkan gambar yang berisikan link ke beberapa situs favorit. Langkah-langkah pembuatannya adalah sebagai berikut. Masuk pada bagian Modul Manager, melalui menu Extension > Module Manager, klik tombol New untuk membuat sebuah Modul baru. Pada halaman pemilihan Jenis Modul apa yang akan kita buat, pilih Custom HTML, dan klik Next. Ketikkan Favorite Link sebagai nama modul dan set Position menjadi right. Pada bagian CKEditor Masukanlah gambar logo dari website yang akan di link, dengan menekan tombol Insert/Edit Image ( ), pada dialog Image properties, masuk pada tab Link, dan masukkan alamat website sesuai dengan logo. (Misal: http://www.joomla.org),

Gambar 4.39 Menambahkan link pada gambar.

Terus masukkan gambar dan link lalu susun seperti yang tampak pada gambar berikut.

Gambar 4.40 Tampilan Favorite Links pada CKEditor

Letakkan posisi modul seperti pada Untuk mengetahui apakah gambar dimunculkan dengan baik, kita dapat menggunakan Tombol preview ( ), apabila sudah sesuai dengan yang kita inginkan maka tekanlah Tombol save untuk menyimpan Modul. Apabila semua berjalan dengan baik maka tampilan web selanjutnya adalah seperti yang tampak pada gambar berikut ini.


43

Gambar 4.41 Tampilan Website dengan tambahan Modul Favorite Links.

4.12. Menambah Buku Tamu (GuestBook) Buku tamu merupakan salah satu bagian yang penting dalam hal pengembangan website, karena adanya feedback dari pengunjung maka kita akan tahu apa saja kekurangan dari website yang kita sajikan, apa kebutuhan pelanggan, dan lain-lain, sehingga nantinya kita dapat membuat sebuah website yang lebih baik. Untuk Guestbook atau buku tamu telah tersedia komponen yang dapat dipasangkan pada Joomla, yaitu PhocaGuestBook. Langkah-langkah pemasangan Guestbook ini dapat adalag sebagai berikut. Pertama-tama siapkan package komponen PhocaGuestbook, yaitu dengan nama com_phocaguestbook_v1.3.1.zip , instal komponen tersebut melalui Install/Unistall Manager. Setelah PhocaGuestbook telah selesai di Install, masuk pada bagian Components > Phoca guestbook > Guestbook, Buat sebuah daftar buku tamu baru dengan menekan tombol New, isikan parameter-parameter yang disediakan, Contoh: Title: Buku Tamu, Alias: buku-tamu. Seperti yang tampak pada gambar 4.42, Klik Save jika semua parameter telah dlengkapi.

Gambar 4.42 Membuat New Guestbook pada Phoca Guestbook.


44

Langkah selanjutnya adalah membuat Menu yang di Link pada Komponen PhocaGuestbook, yaitu dengan memasuki menu Menus > Main Menu*, Buatlah New Menu, dengan memilih tipe Internal Link > Phocaguestbook > Phocaguestbook .

Gambar 4.43 Membuat menu untuk Phoca Guestbook

Akan muncul halaman Menu Item [New], isikan parameter title sesuai dengan keinginan anda (misal: Buku Tamu/Guestbook), pada kolom Select guestbook, pilihlah Guestbook. Apabila semua sudah dilakukan cobalah preview website yang anda buat lagi, akan muncul sebuah menu baru yaitu Buku Tamu, yang apabila di klik akan terlihat seperti gambar berikut.

Gambar 4.44 Halaman Phoca Guestbook.

4.13. Menambah Counter Pengunjung Satu lagi fasilitas yang perlu dimiliki oleh sebuah website adalah fasilitas Counter pengunjung, pada CMS Joomla! fasilitas ini sudah tersedia dalam bentuk modul yang tinggal kita instalkan saja pada website yang kita buat, nama modul counter pengunjung yang akan kita gunakan adalah Vinaora Visitors Counter versi 1.7.3. Sama seperti extension lainnya kita dapat menginstalkan modul counter pengunjung ini melalui Extension Manager yang dapat diakses melalui menu Extensions > Instal/Uninstall. Browse file mod_vvisit_counter.1.7.3.zip , dan tekan tombol Upload File & Install. Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

45

Setelah modul selesai di Install, jangan lupa untuk mempublish modul tersebut, karena secara default, modul yang baru di Install tidak akan di publish ke dalam website yang kita buat. Cara mempublish modul tersebut adalah melalui halaman Modul manager, yang dapat diakses pada menu Extensions > Modul Manager, di sini kita juga dapat mengedit parameter-parameter dari modul yang baru saja kita instalkan, yaitu dengan mengklik nama dari modul tersebut, seperti yang terlihat pada gambar berikut.

klik

Gambar 4.45 Modul Manager

Setelah diklik maka akan ditampilkan parameter-parameter dari modul tersebut, dalam hal ini adalah Vinaora Visitors Counter. Kita dapat mengubah parameter tersebut sesuai dengan keinginan kita, sebagai contoh lihat pada gambar berikut.

1 2 3

4

Gambar 4.46 Mengedit parameter module.

Pada gambar diatas saya melakukan beberapa perubahan diantaranya : 1. Pada Title diubah dengan Counter 2. Enabled diubah menjadi Yes 3. Modul Position diubah menjadi right, dan 4. Pada Modul Details, bagian Display mode diubah menjadi Simple Masih banyak lagi yang bisa diubah, anda bisa mencobanya sendiri, apabila telah selesai, Save untuk menyimpan seting dari modul tersebut, dan cobalah preview website anda, tampilannya akan menjadi seperti pada gambar berikut.


46

Gambar 4.47 Tampilan web setelah ditambah modul counter pengunjung.

4.14. Menambahkan Menu Link Favorite (Menggunakan Web Link Manager) CMS Joomla! juga telah menyediakan sebuah komponen yang dapat menyimpan link-link favorit yang kita ketahui, untuk dibagikan kepada pengunjung website masuk pada website kita, Komponen tersebut bernama Web Link. Untuk menambahkan link, seperti halnya konten, kita harus mengelompokkannya terlebih dahulu ke dalam kategori, jadi buatlah sebuah kategori dari web link kita terlebih dahulu, yaitu dengan cara mengakses menu Components>Web Links>Categories. Pada halaman Category Manager: [Web Links], tekan tombol New untuk menambahkan kategori, masukkan Title dan Alias, pada bagian details, dan beri deskripsi singkat mengenai kategori yang kita buat pada bagian Description (opsional). Contohnya seperti yang tampak pada gambar berikut.

Gambar 4.48 Membuat kategori Web Link - Favorite.

Setelah membuat kategori, saatnya untuk menambahkan link pada kategori tersebut, yaitu dengan mengakses halaman Web Link manager, melalui menu Components>Web Links>Links. Tekan tombol New, dan masukanlah Informasi link favoritmu sesuai dengan parameter yang disediakan, sebagai contoh lihat pada gambar berikut.


47

Gambar 4.49 Menambahkan Web Link.

Tekan tombol Save, apabila telah selesai memasukkan parameter dari web link yang akan ditambahkan. Buatlah beberapa web link, dan jangan lupa untuk memasukannya pada Category Favorite, atau anda dapat membuat kategori baru jika link yang ingin anda sharing cukup bervariasi. Lalu seperti halnya konten, Web link yang telah kita buat tersebut tidak akan langsung ditampilkan pada website yang kita buat, kita harus terlebih dahulu membuat menu yang terhubung pada kategori link yang telah kita buat tadi, yaitu dengan cara tambahkan menu baru pada Main Menu, dengan nama Links, pilih Web link Category List Layout sebagai tipe menu baru yang akan dibuat ini, masukan Links sebagai title dengan alias links, dan pada bagian Parameter (Basic) pilih Favorite. Lebih jelas tampak pada gambar berikut.

Gambar 4.50 Membuat menu Links.

Save menu tersebut setelah selesai memasukkan parameter yang dibutuhkan, dan lihatlah preview website anda, apabila semua berjalan dengan lancar maka website anda sekarang akan terlihat seperti pada gambar berikut.


48

Gambar 4.51 Tampilan web setelah ditambah menu Links.

4.15. Menambahkan Menu Kontak (Menggunakan Contact manager) Fitur lain yang disediakan oleh CMS Joomla! adalah Contact manager, dimana kita dapat menambahkan link feedback pada pengunjung website yang datang pada website kita, Contact pada CMS Joomla! juga merupakan sebuah komponen, kegunaan dari Contact manager ini adalah pengunjung dapat meninggalkan pesan yang langsung ditujukan pada kontak yang telah disediakan atau penanggung jawab dari website. Cara membuat menu kontak adalah sebagai berikut. Seperti halnya Konten dan Web Link, kita terlebih dahulu harus membuat kategori dari kontak tersebut, yaitu dengan cara mengakses menu Components>Contacts>Categories. Pada halaman Category Manager: [Contacts], tekan tombol New untuk menambahkan kategori, masukkan Title dan Alias, pada bagian details, dan beri deskripsi singkat mengenai kategori yang kita buat pada bagian Description (opsional). Contohnya seperti yang tampak pada gambar berikut.

Gambar 4.52 Membuat kategori pada Contact.

Setelah kategori dibuat, selanjutnya kita dapat menambahkan kontak, yaitu dengan mengakses halaman Contact Manager, melalui menu Components>Web Links>Links. Tekan tombol New, dan masukanlah Informasi Kontak anda sesuai dengan parameter yang telah disediakan, sebagai contoh lihat pada gambar berikut.


49

Gambar 4.53 Menambahkan Detail Kontak.

Sebagai tambahan pada bagian Contact Image atau foto harus terlebih dahulu diletakkan pada direktori images/stories, maka secara otomatis akan foto tersebut di list oleh Joomla, seperti yang tampak pada gambar berikut.

Gambar 4.54 Menambahkan Image/Foto pada Detail Contact.

Tekan tombol Save, apabila telah selesai memasukkan parameter dari kontak yang akan ditambahkan. Selanjutnya adalah membuat Menu untuk menampilkan halaman kontak yang telah kita buat tadi yaitu dengan cara tambahkan menu baru pada Main Menu, dengan nama Kontak, pilih Standart Contact Layout sebagai tipe menu baru yang akan dibuat, masukan Kontak sebagai title dengan alias kontak, dan pada bagian Parameter (Basic) pilih nama kontak yang akan ditampilkan. Lebih jelas tampak pada gambar berikut.

Gambar 4.55 Membuat menu Kontak.

Save menu tersebut setelah selesai memasukkan parameter yang dibutuhkan, dan lihatlah preview website anda, sebagai contoh akan terlihat seperti gambar berikut. Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

50

Gambar 4.56 Tampilan web setelah ditambah menu Kontak.

4.16. Personalisasi Web (Membuat Header Logo) Header dari setiap template pada CMS Joomla! memiliki ukuran, ekstensi, dan lokasi yang berbeda-beda, tetapi yang jelas gambar header/logo tersebut biasanya tersimpan di dalam direktori template//images , untuk template yang kita gunakan disini (ja_purity) memiliki 2 header image, yang pertama bernama logo.png yang terletak pada direkori joomla/template/ja_purity/images yang berukuran 207x80 pixel dan header#.jpg pada direktori joomla/template/ja_purity/images/header yang berukuran 600x80 pixel. Lebih jelasnya lihat pada gambar berikut Logo.png 207x80 px

Header#.jpg 207x80 px

Gambar 4.57 Ukuran dan nama file logo dan header pada Ja_purity.

Ja_purity memiliki style dynamic header dimana gambar header akan berganti secara acak setiap kali halaman direfresh, atau berpindah halaman. Pertama-tama mari kita mulai dengan mengedit membuat file Logo.png. Bukalah software image editor yang pada saat ini kita gunakan Adobe Photoshop CS, buatlah sebuah file image baru dengan mengklik pada menu File>New... dan atur ukuran image dengan Width: 207 pixel, dan Height: 80 pixel, Resolution: 72 pixel/inci, Background Contents: Transparent. Seperti yang tampak pada gambar berikut.

Gambar 4.58 Membuat image baru pada Adobe Photoshop CS Modul Mulok (WEB Desain) | Wahyudi Rahmat, ST

51

Tekan OK, maka akan muncul sebuah canvas baru yang berukuran 207x80 pixel, mulailah berkreasi pada canvas tersebut, dengan misalnya menambahkan Huruf menggunakan Horizontal Tipe Tools ( ), ketikan kata misalkan “Website Pribadiku”, ganti jenis font dan berikan layer style seperti Stroke dan Outer Glow, sebagai contoh lihat gambar berikut.

Layer Style

Gambar 4.59 Menambahkan text dan layer style pada canvas

Simpanlah image tersebut melalui menu File>Save As..., dengan parameter, File Name: logo; Format: PNG (*.PNG). (Kenapa dalam format PNG? Karena format PNG mendukung Transparency/Gambar yang transparan, jika disimpan dalam format JPG maka transparency akan hilang) pada dialog PNG Option pilih Interlaced, salin file tersebut pada direktory C:\xampp\xampp\htdocs\joomla\templates\ja_purity\images. Overwite saja file logo yang kita buat dengan file logo yang sudah ada, dan cobalah lihat kembali tampilan website anda setelah merubah file logo.png tersebut. (sebagai catatan apabila tidak terjadi perubahan, cobalah untuk menghapus chache yang ada pada browser anda). Selanjutnya adalah membuat file header.jpg, sama seperti file logo.png buatlah sebuah file image baru dengan mengklik pada menu File>New... dan atur ukuran image dengan Width: 600 pixel, dan Height: 80 pixel, Resolution: 72 pixel/inci, Background Contents: Transparent. Lalu buka pula sebuah file image misalnya Garden.jpg, gunakan Move Tool ( ), klik pada image Garden.jpg, dan draf pada canvas header yang tadi kita buat. Atur tata letaknya seperti yang anda Inginkan, berikan tambahan tulisan diatasnya contohnya “Selamat Datang”, dan berikan pula beberapa Layer Style seperti Stroke, Drop Shadow, dan Outer Glow, sehingga tampak seperti gambar berikut.


52

Drag

Gambar 4.60 Membuat file header.jpg

Simpanlah image tersebut melalui menu File>Save As..., dengan parameter, File Name: header; Format: JPEG (*.JPG;*.JPED;*.JPE). pada dialog JPEG Option ubah nilai Quality menjadi 10, dengan Format Option: Baseline Optimized, Save dan salin file tersebut pada direkori C:\xampp\xampp\htdocs\joomla\templates\ja_purity\images\header. Sebagai catatan anda bisa menghapus 3 file header yang telah disediakan secara default pada direkori header tersebut, agar nantinya yang ditampilkan hanya header yang telah anda buat, setelah selesai, sebagai contoh maka tampilan header website anda akan menjadi seperti gambar berikut.

Gambar 4.61 Tampilan Logo dan Header setelah diganti.

Demikianlah cara-cara bagaimana membangun sebuah website sederhana dengan CMS Joomla!, Sebenarnya masih banyak lagi fitur-fitur yang dimiliki CMS (dalam hal ini Joomla!) yang belum dijelaskan disini, dengan mencoba dan berkreasi lebih jauh, anda akan mendapatkan pengalaman yang menyenangkan dalam membuat Website menggunakan CMS.

SalamWahyudi rahmat, ST (Guru SMK negeri 1 Kupang)


53

Kuesioner Mahasiswa
Nama
Password
Jenis Kelamin	Pria Wanita
Hobby	Membaca, Sport, Music, Modul Mulok (WEB Desain) \| Wahyudi Rahmat, ST 10 Memasak, Tamasya
Komentar
Jurusan	<select size="1" name="Jurusan">

SEKOLAH MENENGAH KEJURUAN (SMK) NEGERI I KUPANG Jl. Prof. Dr. W. Z. Johannes, Telp. & Fax :(0380)

Recommend Documents

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6