i Bahasa pemrograman berbasis website

i

Bahasa pemrograman berbasis website

Kata Pengantar Puji dan sukur kami panjatkan kehadirat Allah SWT karena atas berkah, rahmat dan kuasanyalah buku Muatan Lokal SMA Budhi Warman II ini dapat diselesaikan. Buku ini disusun sebagai salah satu bahan ajar dalam pelaksanaan kegiatan belajar mengajar mata pelajaran Muatan Lokal SMA Budhi Warman II, Jakarta Dalam buku ini, disajikan materi pembelajaran Muatan Lokal secara sederhana, efektif dan mudah dimengerti. Symbol, gambar, diagram dan grafik disajikan untuk mempermudah peserta didik mengerti materi yang sedang dipelajari. Disusun sesuai dengan standard kompetensi dan kompetensi dasar mata pelajaran Muatan Lokal, peserta didik diharapkan bisa menggunakan buku ini sebagai panduan dalam mengerjakan tugas-tugas yang diberikan oleh guru pembimbing. Akhirnya, kami menyampaikan terimakasih kepada semua pihak yang telah membantu sekolah menerbitkan buku ini.

Jakarta, Agustus 2012

Yogi Adi Nugroho, S.Kom

i


Daftar Isi Kata Pengantar…………………………………………………….. iii Daftar Isi…………………………………………………………… iv Bab 1 Pengantar PHP……………………………………………... 1 1.1 Pengantar PHP…………………………………………. 2 1.2 Instalasi XAMPP………………………………………. 3 1.3 Bahasa Pemrograman PHP…………………………….. 6 1.3.1 Dasar Pemrograman PHP……………………. 6 1.3.2 Variabel………………….…………………….8 1.3.3 Tipe Data………………...…………………… 9 1.3.4 Operator……………………………………… 10 1.3.5 Struktur Kontrol……………………………… 12 Bab 2 Pengenalan Joomla………………………………………….15 2.1Content Management System (CMS)…………………. 16 2.2 Pemanfaatan CMS…………………………………….. 16 2.3 Kebutuhan system……………………………………… 18 Bab 3 Instalasi Joomla……………………………………………. 19 3.1 Instalasi Joomla………………………………………… 20 3.2 Membuka halaman administrator Joomla……………… 24 Bab 4 Mengelola Konten…………………………………………. 27 4.1 Struktur Artikel Joomla………………………………… 28 4.2 Membuat Section…….………………………………… 29 4.3 Membuat Category…………………………………….. 30 4.4 Membuat Article……………………………………….. 31 Bab 5 Mengelola Menu…………………………………………… 33 5.1 Membuka menu item manager………………………… 35 5.2 Membuka item manager : [main menu]...……………… 36 5.3 Merubah nama menu……………………………………38 5.4 Menampilkan / menyembunyikan item menu..………… 40 ii


Bab 6 Mengelola Extension Joomla……………………………….. 45 6.1 Pengenalan Extension………………………………….. 46 6.2 Menginstall Extension…………………………………. 49 6.2.1 Menginstall Component……………………… 51 6.2.2 Menginstall Module………………………….. 58 6.2.3 Menginstall Plugin..………………………….. 63 Bab 7 Mengelola Template……………………………………...… 69 7.1 Apa yang bisa dilakukan dengan template……………... 70 7.2 Menginstall template…………………….……………... 72 7.3 Mengaktifkan template……………................................ 73 Daftar Pustaka……………………………………………………… 75 Riwayat Penulis….………………………………………………… 76

iii


BAB 1 BAHASA PEMROGRAMAN BERBASIS WEBSITE

 Mengenal bahasa pemrograman berbasis website

 Mengetahui konsep bahasa pemrograman berbasis website

 Pengantar bahasa pemrograman berbasis website  Menginstall XAMPP  Bahasa pemrograman PHP

1


1.1

Pengantar PHP

PHP pada awalnya merupakan singkatan dari Personal Home Page, namun pada perkembangannya, setelah PHP 3.0 dirilis, singkatan PHP diubah menjadi sebuah akronim berulang, PHP : Hypertext Preprocessor. Untuk membuat sebuah website dinamis, script PHP disisipkan dalam sintaks dokumen HTML untuk kemudian diterjemahkan oleh webserver dengan module PHP yang berfungsi layaknya kamus untuk kemudian hasil terjemahannya ditulis kembali kedalam dokumen HTML sehingga komputer client tidak akan melihat kode sumber PHP karena telah di terjemahkan terlebih dahulu oleh web server kedalam sintaks HTML.

2


1.2

Instalasi XAMPP

Untuk dapat meng-compile (menjalankan) PHP di komputer kalian, kalian membutuhkan sebuah software tambahan yang berfungsi untuk membuat komputer kalian bekerja layaknya server. Salah satu software freeware (gratis) yang dapat kalian gunakan yaitu XAMPP. XAMPP sendiri merupakan akronim dari X yang berarti dapat melakukan komunikasi antar platform, Apache HTTP Server, MySQL, PHP dan Perl. Untuk menginstall XAMPP di komputer kalian, lakukan langkah-langkah dibawah ini : No Langkah Keterangan 1 Buka folder software mulok  mulok kelas xii

2

3

Dengan menggunakan software extractor seperti winrar, winzip atau 7zip, Extract file xampp.zip kedalam root directory drive hardisk kalian (contoh : c:/ atau d:/ atau f:/)


3

4

5

4

Buka folder XAMPP yang telah kalian extract pada langkah ke-2 lalu klik 2x pada file xampp-control.exe Windows XAMPP Control Panel akan ditampilkan. Jalankan module Apache dan MySql dengan mengclick tombol start pada module apache dan mysql

Klik UNBLOCK bila pada monitor terdapat warning Windows Security Allert


6

5

Bila sukses, maka status module Apache dan mysql akan berubah menjadi running


1.3

Bahasa Pemrograman PHP

Modul ini memiliki keterbatasan, PHP memiliki cukup banyak sintaks identifier (tanda pengenal). Waktu satu semester tidak akan cukup untuk membahas kesemua identifier dalam PHP. Untuk itu, dalam modul ini, yang akan dibahas hanyalah sekilas tentang bahasa pemrograman PHP. Kalian diharapkan dapat aktif mencari materi yang dibutuhkan untuk memperkaya pemahaman kalian tentang bahasa pemrograman PHP.

1.3.1

Sintaks dasar PHP

a. HTML Escaping Ketika server menerima suatu file, maka web server tersebut akan mencari tags pembuka “” yang merupakan identifier bagi web server untuk membedakan mana yang merupakan sintaks PHP dan mana yang merupakan sintaks HTML. Baris-baris kode PHP nantinya akan diletakan dalam tag “”. dibawah ini adalah contoh penggunaan bahasa PHP dalam sebuah halaman web. HTML ESCAPING Teks ini akan diabaikan oleh web server.
”; ?> Teks ini juga di abaikan oleh server OUTPUT PADA BROWSER Teks ini akan diabaikan oleh server Teks ini akan diproses oleh server Teks ini juga diabaikan oleh server

6


b. Pemisah Instruksi Untuk memisahkan instruksi atau perintah PHP yang satu dengan perintah lainnya, digunakan tanda titik koma (“;”). Contoh penulisan pemisah instruksi dalam PHP dapat kalian lihat pada sintaks dibawah ini : PEMISAHAN INSTRUKSI ”; echo “teks kedua, jangan lupa pemisah titik koma!
”; echo “teks ketiga”; ?> OUTPUT PADA BROWSER Ini teks pertama, jangan lupa pemisah titik koma ! Ini teks kedua, jangan lupa pemisah titik koma ! Ini teks ketiga

c. Mencetak Output Untuk mencetak output dari input yang telah kalian tuliskan, kalian dapat menggunakan sintaks echo(). Dibawah ini adalah contoh penggunaan sintaks echo dan print. MENCETAK OUTPUT DENGAN ECHO() ”; ?> OUTPUT PADA BROWSER Teks ini dicetak dengan menggunakan sintaks echo

d. Komentar Bila kalian sedang mengerjakan sebuah project, terkadang kalian perlu untuk menuliskan keterangan untuk menjelaskan kegunaan dari fungsi yang didekarasikan agar orang lain atau bahkan agar kalian sendiri tidak lupa akan apa yang kalian tulis. Sintaks atau penanda yang digunakan untuk menuliskan komentar dalam halaman PHP yaitu tanda garis miring dua kali bila komentarnya hanya terdiri dari satu baris (// komentar ) dan garis miring satu kali di ikuti oleh tanda bintang lalu di akhir dengan tanda bintang di ikuti oleh garis miring satu kali ( /* komentar */ ). Lihat contoh dibawah ini : 7


KOMENTAR PADA SINTAKS OUTPUT PADA BROWSER Hanya teks ini yang tercetak pada browser

Web server akan menganggap semua tulisan yang ada pada sintaks (//) dan (/* */) sebagai sebuah komentar pada koding yang kalian tulis, sehingga tidak akan diproses dan tidak akan di cetak pada halaman browser.

1.3.2

Variabel

Dalam sebuah bahasa pemrograman, khususnya PHP, variabel merupakan suatu hal yang penting untuk digunakan, karena variabel digunakan untuk menampung data baik itu data berupa input maupun output. Untuk mendeklarasikan variabel, kalian cukup menuliskan karakter dolar (‘ $ ’) lalu diikuti dengan nama variabel. Nama variabel ini bersifat Case Sensitive, artinya bila kalian mendeklarasikan variabel dengan nama “ $abc ”, maka untuk memanggil variabel tersebut, kalian harus menuliskan “ $abc ”, bila kalian menuliskan “ $AbC”, “ $abC ” atau penulisan lainnya yang berbeda dengan dekarasi awal, maka variabel tersebut tidak akan terpanggil. Contoh penulisan variabel: VARIABEL OUTPUT PADA BROWSER Selamat datang

8


Terdapat beberapa peraturan yang harus kalian penuhi dalam mendeklarasikan sebuah variabel, yaitu - Case Sensitive - Nama variabel hanya terdiri dari huruf Alfabet (A – Z / a - z), angka (1 - 9) dan underscore (“ _ “) - Nama variabel Tidak Boleh diawali dengan angka. - Nama variabel Tidak Boleh mengandung karakter khusus seperti @, #, %, dll. - Nama variabel Tidak Boleh mengandung karakter spasi.

1.3.3

Tipe Data

Jika kita berbicara tentang komputer, maka kita juga berbicara tentang data, karena pada dasarnya, tugas komputer adalah mengolah data, komputer tidak dapat melakukan tindakan apapun bila tidak ada data yang di input kedalam sistem. Dalam PHP, terdapat delapan tipe data yang dapat digunakan, yaitu Boolean, Integer, Float, String, Array, Object, Resources, Null. Namun dalam modul ini, tidak akan dibahas kedelapan tipe data diatas, yang akan dibahas hanyalah tipe data Integer, String, Null. A. Tipe Data Integer Tipe data integer merupakan deretan angka yang ditulis didalam sebuah set kelompok deret angka, contoh : A = {…, -2, -1, 0, 1, 2, …}. Contoh penulisan tipe data integer dapat kalian lihat pada sintaks dibawah ini ! TIPE DATA INTEGER

9


B. Tipe Data String String merupakan tipe data yang dapat digunakan untuk menyimpan barisan karakter. Untuk menuliskan string, kalian dapat menggunakan tanda petik ganda ( “…” ) Contoh penulisan String : TIPE DATA STRING OUTPUT PADA BROWSER Ini contoh penulisan string

C. Tipe Data Null Tipe data null digunakan untuk memberikan nilai kosong pada sebuah variable. Contoh penulisan tipe data null dapat kalian lihat pada sintaks dibawah ini : TIPE DATA NULL

1.3.4

Operator

Operator adalah symbol yang mengolah nilai pada operan dan menghasilkan satu nilai baru. Setiap operator akan mengolah data dengan satu cara tertentu. A. Operator Aritmatika Operator aritmatika digunakan untuk menghitung aritmatika dasar. OPERATOR + *

10

KETERANGAN CONTOH Penambahan x=2 x+2 Pengurangan x=2 5-x Pengalian x=4 x*5


HASIL 4 3 20

/

Pembagian

15/5 5/2

3 2.5

%

Modulus

++

Increment

1 2 0 x=6

--

Decrement

5%2 10%8 10%2 x=5 x++ x=5 x--

x=4

B. Assignment Operator OPERATOR = += -= *= /= .= %=

CONTOH x=y x += y x -= y x *= y x /= y x .= y x %= y

SAMA ARTINYA DENGAN x=y x = x+y x = x-y x= x*y x = x/y x = x.y x = x%y

C. Operator Perbandingan OPERATOR == != > < >= <=

CONTOH Adalah sama dengan Adalah tidak sama dengan Adalah lebih besar dari Adalah lebih kecil dari Adalah lebih besar sama dengan Adalah lebih kecil sama dengan

CONTOH 5==8 (Bernilai Salah) 5!=8 (Bernilai Benar) 5>8 (Bernilai Salah) 5<8 (Bernilai Benar) 5>=8 (Bernilai Salah) 5<=8 (Bernilai Benar)

D. Operator Logis OPERATOR KETERANGAN && Dan

||

Atau

CONTOH x=6 y=3 (x < 10 && y > 1) Bernilai benar x=6 y=3 (x==5 || y==5) Bernilai salah

11


!

Bukan

x=6 y=3 !(x==y) Bernilai benar

1.3.5

Struktur Kontrol

Untuk berkomunikasi dengan komputer, dibutuhkan struktur kontrol agar si komputer paham apa yang kita inginkan. Dalam PHP, terdapat beberapa struktur kontrol yang dapat kita gunakan, beberapa diantaranya yaitu if, else, else if dan while. A. IF Struktur konrol IF merupakan satu dari banyak fitur penting dalam sebuah bahasa pemrograman. Struktur IF dapat membuat suatu kondisi kapan suatu potongan atau bagian sintaks harus di eksesusi. Struktur IF dapat kalian lihat pada sintaks dibawah ini. STRUKTUR IF if(kondisi) { statement }

CONTOH PENGGUNAAN IF $a = 2; $b = 3; if($a < $b) { echo “variabel A lebih kecil dibanding variabel B”; } OUTPUT PADA BROWSER Variabel A lebih kecil dibanding variabel B

12


B. ELSE Terkadang kalian ingin membuat sebuah pernyataan yang akan ditampilkan bila kondisi IF tidak terpenuhi. Untuk kasus seperti ini, kalian dapat menggunakan kondisi ELSE. STRUKTUR IF if(kondisi) { Statement bila kondisi terpenuhi } else { Statement bila kondisi tidak terpenuhi } CONTOH PENGGUNAAN ELSE $a = 5; $b = 6; if($a > $b) { echo “variabel A lebih besar dibanding variabel B”; } else { echo “variabel B yang lebih besar !!!”; } OUTPUT PADA BROWSER Variabel B yang lebih besar

C. ELSEIF Kondisi ELSEIF digunakan untuk sebuah kondisi dimana kalian memberikan beberapa pilihan kepada program yang kalian buat. STRUKTUR IF if(kondisi_1) { Statement bila kondisi 1 terpenuhi } elseif(kondisi_n) { Statement bila kondisi n terpenuhi }

13


CONTOH PENGGUNAAN ELSE $a = 5; $b = 5; if($a < $b) { echo “variabel A lebih KECIL dibanding variabel B”; } elseif ($a == $b) { echo “nilai variabel A dan B adalah sama”; } elseif ($a > $b) { echo “variabel A lebih BESAR dibanding variabel B”; } OUTPUT PADA BROWSER nilai variabel A dan B adalah sama

D. WHILE Kondisi WHILE merupakan kondisi LOOP (berulang) yang paling simpel yang bisa kita gunakan dalam PHP. Untuk lebih jelasnya tentang WHILE, perhatikan barisan sintaks dibawah ini STRUKTUR WHILE while(kondisi) { statement } CONTOH PENGGUNAAN WHILE $a = 0; while($a <= 4) { echo “Cetak variabel”; $a++; } OUTPUT PADA BROWSER Cetak variabel Cetak variabel Cetak variabel Cetak variabel

14


BAB 2 PENGENALAN JOOMLA

 Menggunakan CMS Joomla

 Mengenal CMS Joomla

 Definisi CMS (Content Management System)  Pemanfaatan CMS  Kebutuhan System

.

15


2.1

Content Management System (CMS)

Sebelum kita berbicara tentang joomla, mari kita bahas terlebih dahulu tentang CMS. CMS erat kaitannya dengan website. CMS sendiri merupakan sebuah software yang digunakan untuk menambahkan ataupun mengubah isi dari sebuah website. Dengan CMS, kita tidak perlu lagi melakukan proses koding untuk membuat website. Biasanya, CMS terdiri dari dua bagian, yaitu Front End dan Back End.  Front End yaitu tampilan website yang nantinya akan dilihat oleh pengunjung website kita.  Back End yaitu halaman administrator yang nantinya digunakan oleh admin website untuk memasukan konten, menghapus konten, merubah tampilan website dan berbagai keperluan lainnya yang berhubungan dengan manajemen website.

2.2

Pemanfaatan CMS

Sebuah CMS dapat kita manfaatkan untuk membuat website dengan berbagai kebutuhan. Beberapa diantaranya yaitu sebagai berikut : - Website Pribadi - Profil Perusahaan - Profil instansi / yayasan sekolah - Galeri Foto - Aplikasi Penjualan Online - Dan lain sebagainya.

16


Saat ini tersedia cukup banyak aplikasi CMS yang dapat kita gunakan untuk mengelola website, diantaranya adalah sebagai berikut : - Joomla - Wordpress - Drupal - Moodle - Prestashop - Dan masih banyak lagi. Berdasarkan data yang diperoleh dari http://trends.builtwith.com/cms/Joomla!, jumlah website yang menggunakan CMS joomla saat ini mencapai 1.657.059 website. Di Indonesia ada cukup banyak lembaga pendidikan, pemerintahan ataupun perusahaan yang menggunakan joomla sebagai CMS website mereka. Beberapa diantaranya yaitu sebagai berikut : - http://www.kereta-api.co.id/ - http://kip-acehprov.go.id/ - http://www.bppt.go.id/ - http://www.depkes.go.id/ - http://www.imigrasi.go.id/ - http://budhiwarman2.com/ - http://sman70-jkt.sch.id/ - http://sman60jkt.com/

17


2.3

Kebutuhan Sistem

Ada dua cara untuk menjalankan joomla, yaitu secara online dan offline. - Online Online artinya website yang dibuat nantinya dapat diakses melalui jaringan internet. Untuk itu, dibutuhkan hosting dan domain agar website yang dibuat bisa diakses secara online lewat jaringan internet. - Offline Offline artinya website yang dibuat nantinya hanya bisa di akses oleh komputer kita sendiri, tidak bisa diakses oleh komputer lain lewat jaringan internet. Karena kita masih tahap belajar, model pengaksesan offline inilah yang nantinya akan kita gunakan.

18


BAB 3 INSTALASI JOOMLA


 Instalasi Joomla

 Menginstall Joomla  Membuka halaman administrator

19


3.1

Instalasi Joomla

Seperti yang dijelaskan pada bab sebelumnya, bahwa terdapat dua cara untuk menjalankan joomla, yaitu secara online (dengan jaringan internet) dan offline (tanpa jaringan internet). Pada Bab ini, kita akan menginstall joomla secara offline. Nantinya, bila website kita siap di publish, dengan menggunakan File Transfer Protocol (FTP), website yang kita jalankan secara offline akan kita upload ke hosting sehingga website kita bisa dijalankan secara online (dengan jaringan internet) sehingga bisa dilihat oleh semua orang yang memiliki akses ke internet. Untuk menginstall joomla, lakukan langkah-langkah dibawah ini! No 1

Langkah

Keterangan

Buka web browser lalu ketikan alamat localhost/joomla pada address bar.

2

Klik tombol Next

Klik Next

20


3

Klik tombol Next

Klik Next

4

Klik Tombol Next

Klik Next

Isi field yang tersedia dengan data dibawah ini, lalu klik Next - Database name : mysql - Host Name : localhost - Username : root - Password : (biarkan kosong, tidak usah di isi) - Database Name : joomla

5

Klik Next Isi sesuai settingan yang diberikan

21


Isi field yang tersedia dengan data dibawah ini, lalu klik tombol Install Sample Data setelah itu klik tombol Next - Site Name : --- Nama Kalian --- Your Email : Isi dengan email kalian - Admin Password : 123456 (boleh di isi bebas) - Confirm Admin Password : 123456 (sama dengan Admin Password)

6

Klik tombol Install Sample Data statusnya akan berubah menjadi “Sample data installed Successfully” Klik tombol NEXT 7

Halaman dibawah ini akan ditampilkan

22


8

Buka Windows Explorer, lalu masuk ke drive c:\  XAMPP  htdocs  joomla hapus Folder Instalation dari Joomla kalian.

9

Ketik kembali alamat localhost/joomla pada address bar browser (mozila, google chrome, internet explorer) kalian.

10

23

Bila instalasi sukses, maka halaman dibawah ini akan ditampilkan.


3.2

Membuka Halaman Administrator Joomla

Halaman administrator joomla digunakan untuk mengedit tampilan website joomla. Mulai dari memasukan / mengedit artikel, menambahkan menu, merubah template, memperkaya website dengan fitur-fitur tambahan dan lain sebagainya, semua dilakukan lewat halaman administrator joomla. Untuk membuka halaman administrator, lakukan langkah-langkah dibawah ini : No 1

Langkah Buka

Aplikasi

Keterangan web

browser

kalian

lalu

ketikan

alamat

localhost/joomla/administrator pada address bar browser kalian.

2

Halaman Login joomla akan ditampilkan

3

Masukan Username dan password kalian lalu klik tombol Login

4

Bila login sukses, maka halaman administrator Joomla akan ditampilkan.

24


25


Catatan :

26


BAB 4 Mengelola Content


 Mengelola Content

 Mengetahui struktur artikel joomla  Membuat section  Membuat category  Membuat article

27


4.1

Struktur Artikel Joomla

Joomla memiliki struktur dalam penulisan artikel. Struktur ini berfungsi untuk mengelompokan artikel yang dibuat. Untuk mempermudah kalian memahami struktur artikel dalam joomla, perhatikan contoh pengelompokan artikel dibawah ini. SECTION

BERITA

CATEGORY NASIONAL

INTERNASIONAL

ARTICLE

Indonesia mulai memproduksi mobil listrik secara masal

China dan jepang menjalin kerjasama dibidang teknologi

Menkominfo meresmikan program IGOS (Indonesia Goes Open Source)

Jepang mulai berbenah setelah terhantam tsunami dasyat

Pada setiap Section terdapat Category, dan didalam Category terdapat Article (Section  Category  Article). Pada contoh diatas, Berita (section) terbagi menjadi dua jenis, yaitu berita Nasional (Category) dan berita Internasional (Category), pada berita Nasional, terdapat dua artikel, yaitu artikel “Indonesia mulai memproduksi mobil listrik secara masal” dan “Menkominfo meresmikan program IGOS” sedangkan pada berita Internasional terdapat artikel “China dan jepang menjalin kerjasama dibidang teknologi” dan “Jepang mulai berbenah setelah terhantam tsunami dasyat” 28


4.2

Membuat Section

Untuk membuat section, lakukan langkah-langkah dibawah ini : No Langkah 1. Click menu Content  Section Manager

2.

Klik tombol New

3

Isi field dengan data disamping:

4

Klik tombol Save

5

Selesai

29

Keterangan

Title : Berita Alias : berita Publised : Yes Access Level : Public Image : - Select Image – Image Position : Left Description : Berita nasional dan internasional terbaru


4.3

Membuat Category

Untuk membuat section, lakukan langkah-langkah dibawah ini : No 1

Langkah Click menu Content  Category Manager

2.

Klik tombol New

3

Isi field dengan data disamping: (yang perlu kalian perhatikan, pada field Section, pilih section dimana category ini akan ditempatkan. Pada contoh ini, tempatkan category nasional pada section berita)

4

Klik tombol Save

5

Selesai

30

Keterangan

Title : Nasional Alias : nasional Publised : Yes Section : Berita Access Level : Public Image : - Select Image – Image Position : Left Description : Berita nasional terbaru


4.4

Membuat Article

Untuk membuat article, lakukan langkah-langkah dibawah ini : NO LANGKAH 1 Click menu Content  Article Manager

2.

Klik tombol New

3

Isi field dengan data disamping:

4

Isi text editor sesuai dengan berita yang ingin kalian tulis. Kalian bisa menggunakan bantuan Toolbar yang terletak di bagian atas Text Editor untuk mengedit tampilan berita kalian.

5

Klik tombol Save

6

Artikel tersimpan

31

KETERANGAN

Title : Bebas Alias : bebas Publised : Yes Section : Berita Published : Yes Front Page : Yes Category : Nasional


7

Untuk melihat artikel yang telah kalian buat, buka halaman utama joomla kalian

32


BAB 5 MENGELOLA MENU


 Mengelola menu utama joomla

 Membuka menu item manager  Membuka pengaturan main menu  Merubah nama menu  Menampilkan / menyembunyikan item menu

33


Joomla menggunakan pengelompokan dalam manajemen tampilan menu, perhatikan halaman awal joomla, pada halaman joomla terdapat 4 (empat) pengelompokan menu, yaitu Main Menu, Resources, Key Concepts dan Top Menu.

34


5.1

Membuka Menu Item Manager

Menu Item Manajer digunakan mengedit menu / navigasi joomla. Untuk membuka Menu Item Manager, lakukan langkah-langkah dibawah ini No 1

Langkah

Keterangan

Buka halaman administrator joomla

2

Klik navigasi Menus  Menu Manager

3

Halaman Menu Manager akan ditampilkan

4

Untuk mengedit Item / isi menu didalam Kelompok Menu, klik icon edit menu item

35


5

Contoh tampilan Kelompok menu menu Main Menu

5.2

Membuka Item Manager : [Main Menu] Main Menu merupakan navigasi utama pada website yang berbasis

CMS Joomla. Pada default template joomla, Navigasi Main Menu terletak pada bagian kiri atas website joomla kalian.

Navigasi Main Menu

36


Untuk membuka Menu Item Manajer : Main Menu, lakukan langkahlangkah dibawah ini : No 1

Langkah

Keterangan

Buka halaman administrator joomla

2

Klik navigasi Menus  Main Menu

3

Halaman Menu Item Manager : Main Menu akan ditampilkan

37


5.3 No 1

Merubah Nama Menu. Langkah

Keterangan

Pada halaman Menu Item Manager : Main Menu, klik menu yang akan dirubah namanya.

(Pada contoh kali ini, kita akan merubah nama menu Home menjadi Rumah) 2

Halaman Menu Item : [Edit] akan terbuka

4

Pada Menu Item Detail, ubah text field Title dan Alias dengan nama “Rumah”

38


5

Tekan tombol Save

6

Bila sukses, hasilnya akan tampak seperti gambar dibawah ini

7

Buka halaman utama website joomla kalian, perhatikan Main Menu di bagian kiri atas website joomla.

Menu yang tadinya bernama Home sekarang sudah berubah namanya menjadi Rumah

39


5.4

Menampilkan / Menyembunyikan Item Menu

No

Langkah

Keterangan

Buka halaman Menu Item Manager : Main Menu

Cara Pertama 1

Perhatikan kolom publish

Bila pada kolom publish menu item terdapat tanda

, maka

artinya menu tersebut dalam keadaan publish (ditampilkan di halaman joomla) 2

Untuk menonaktifkan / menyembunyikan menu tersebut, klik tanda pada kolom publish di item yang ingin di sembunyikan sehingga 40


tanda

akan berubah menjadi

Cara Kedua 1

Perhatikan Checkbox yang terdapat di sebelah kiri Menu Item

41


2

Klik checkbox pada Menu Item yang ingin di nonaktifkan

3 Klik tombol

4

yang terdapat di sebelah kanan atas layar kalian

Bila sukses, maka status publish dari item yang diberikan checkbox akan berubah menjadi

42


Sebelum

43


Sesudah

Catatan :

44


BAB 6 MENGELOLA EXTENSION JOOMLA


 Mengelola extension Joomla

 Pengenalan Extension  Mengintall Extension o Menginstall Component o Mengintall Module o Menginstall Plugin

45


6.1

Pengenalan Extension

Tidak banyak yang bisa kalian lakukan saat kalian menginstall joomla yang masih fresh. Bisa dibilang, website yang kalian buat masih kurang powerful karena hanya bisa melakukan fitur-fitur standard sebuah website secara umum. Untuk membuat website joomla kalian menjadi lebih powerful dengan berbagai fitur yang menarik dan memudahkan pengunjung kalian agar mereka bisa bertahan lebih lama melihat-lihat website kalian, kita akan menginstall tambahan. Extension digunakan untuk memperkaya website joomla sehingga website joomla yang kita buat akan memiliki fiturfitur yang lebih kaya, seperti menambahkan komentar, membuat tampilan dropdown menu, membuat gallery foto, membuat halaman kontak yang sudah dilengkapi dengan peta / maps, dan lain sebagainya. Dalam joomla, terbagi menjadi 5 jenis, yaitu Component, Module, Plugin, Template dan Language. Agar lebih mudah memahaminya, perhatikan gambar dibawah ini !

46


1. Component Component merupakan Extension yang paling besar dan paling kompleks dari seluruh jenis extension yang ada di joomla. Component bisa juga disebut sebagai Mini Application. Bila kita menginstall sebuah component, biasanya kita juga akan memiliki menu baru di halaman Adiministrator yang digunakan untuk mengelola Component yang sudah kita install.

2. Module Module merupakan extension yang lebih ringan dan lebih fleksibel dibandingkan dengan Component. Module digunakan untuk menghubungkan Component dengan template / halaman joomla. Sebagai contoh, module “Latest News”. Module Latest News digunakan untuk menghubungkan antara component Artikel dengan halaman joomla, dimana module Latest News ini akan menampilkan judul Artikel terbaru yang baru saja di tulis / di publish oleh Administrator website. Bila judul artikel tersebut diklik, maka pengunjung akan diarahkan ke artikel yang baru saja di publish.

3. Plugin Plugin merupakan extension yang paling berpengaruh pada joomla karena plugin akan dijalankan pada semua halaman joomla.

47


4. Template Pada dasarnya, template merupakan tampilan dari website joomla. Dengan menggunakan template, kalian bisa merubah tampilan dari joomla secara keseluruhan.

5. Language Extension language digunakan untuk mengelola bahasa yang digunakan pada website joomla.

48


6.2

Mengintall Extension

Untuk menginstall ataupun uninstall extension joomla, baik itu Component, Module, Plugin, Template ataupun Language, kita bisa menggunakan menu Extension  Intall / Uninstall pada halaman Administrator. Terdapat 3 cara untuk mengintall Extension kedalam website joomla, yaitu : 1. Mengupload file manual (Upload Package File), cara ini digunakan bila kita sudah memiliki file installer dari extension yang akan kita install. 2. Install dari directory joomla (Install From Directory), cara ini digunakan bila file installer extension ada didalam directory joomla kalian. 3. Install dari URL (Install From URL), cara ini digunakan bila kalian memiliki alamat file di jaringan internet yang berisi file installer extension. Contoh : http://yogiadi.web.id/file/com_contact.zip Untuk menginstall Extension pada CMS Joomla, lakukan langkah-langkah dibawah ini : No 1

49

Langkah Buka halaman Administrator Joomla

Keterangan


2

Klik Navigasi menu Extensions  Install / Uninstall

3

Halaman Extension Manager akan terbuka

5

Klik tombol Browse pada Upload Package File, lalu pilih extension yang akan dimasukan kedalam CMS Joomla

Klik Browse

50


6.2.1

Mengintall Component

Kita akan coba menginstall component JComments pada joomla. Component ini berguna untuk memberikan fitur komentar pada artikel. Dengan component JComments, pengunjung bisa menuliskan komentar pada artikel yang ada di website joomla. Untuk menginstall JComments, lakukan langkah-langkah dibawah ini : No 1


2


3


51

Ketarangan


5

Klik Icon Browse pada section Upload Package File

Klik Browse Masuk ke folder Materi Mulok Kelas XII  All About Joomla  Component  Komentar Pada Artikel

6

52


7

Klik file com_jcomments_v2.2.0.2.zip lalu klik tombol Open

1. Klik file com_jcomments_v2.2.0.2.zip

2. Klik Open

8

Klik tombol “Upload File and Install”

9

Bila sukses menginstall Extension Componen JComments, halaman dbawah ini akan ditampilkan, klik tombol Next 53


Klik Next

10

54

Perhatikan pada menu navigasi Component, bila instalasi Extension component JComments berhasil, maka pada menu navigasi Component akan ada 1 item baru, yaitu JComment


 Setting Component JComments Setelah berhasil menginstall Component pada joomla, langkah berikutnya adalah melakukan pengaturan awal pada component yang telah dibuat. Seperti yang sudah dibahas pada awal bab ini, Component bisa juga disebut sebagai Mini Application, dimana Component merupakan Extension yang paling besar dan paling kompleks dari seluruh jenis extension yang ada di joomla sehingga component harus di setting terlebih dahulu sebelum dapat digunakan. Untuk mengatur component JComments, lakukan langkah-langkah dibawah ini : No 1

Langkah Ketarangan Klik menu Component JComment Setting pada halaman administrator Klik Disini

2

Halaman Setting JComments akan terbuka

3

Pada tab General, Pilih kategori pada joomla yang ingin diberikan fitur komentar pada artikel. Tekan tombol ctrl (tahan) pada keyboard, lalu klik Category yang ingin di berikan fitur komentar pada artikel 55


Klik Tab Disini Tekan ctrl (tahan) Klik Category yang ingin diberikan fitur komentar 4

Tekan tombol Save

5

Buka halaman utama joomla kalian lalu perhatikan pada artikel yang masuk kedalam Section Berita  Category Nasional (artikel ini seharusnya ada di halaman awal joomla paling atas karena artikel ini baru kita buat pada bab 1)

Artikel yang dibuat pada Bab 1

6

Perhatikan bagian bawah artikel, bila settingan JComments benar maka pada bagian bawah artikel, akan ada teks “Add new comment” yang bila di klik akan menampilkan artikel yang baru kita buat dan sudah terdapat form comment artikel.

56


Click Disini

7

Form comment artikel akan ditampilkan

57


6.2.2

Mengintall Module

Sekarang kita akan mencoba menginstall Module Vinaura Visitor Counter pada joomla. Module ini berguna untuk mengkalkulasi total pengunjung yang pernah mengunjungi website kita. Dengan module ini, kita bisa mengetahui berapa banyak pengujung yang telah mengunjungi website kita. Untuk menginstall Vinaura Visitor Counter, lakukan langkahlangkah dibawah ini : No 1


2


3


58

Ketarangan


5


Klik Browse 6

Masuk ke folder Materi Mulok Kelas XII  All About Joomla  Module

7

Klik file vinaora_visitors_counter_2.0.zip lalu klik tombol Open

59


1. Klik file Vinaora_visitors_counter_2.0.zip

2. Klik Open

8


9

Bila sukses menginstall Extension Componen JComments, halaman dbawah ini akan ditampilkan

60


Secara default, bila kita menginstall module, module tersebut tidak akan ditampilkan sebelum kita mengubah setingan enable / disable pada halaman module manager. Selain harus mengatur settingan enable / disable, kita juga harus melakukan pengaturan tampilan module, dimana module tersebut akan ditampilkan, apakah dibagian atas website, dibawah, kanan atau kiri. Untuk mengubah settingan tersebut, lakukan langkah-langkah dibawah ini No Langkah Keterangan 1 Buka halaman Administrator Joomla

2

Klik Navigasi menu Extensions  Module Manager

3


61


4

Cari module Vinoura Visitors Counter, lalu klik module tersebut

Klik Disini

5

Ubah setingan enable menjadi Yes lalu tentukan posisi tempat module visit counter akan ditampilkan dengan mengubah pilihan Position

6

Kalian bisa merubah title mengganti teks default title dari module. Bila tidak ingin menampilkan title, berikan tanda centang pada pilihan No di Show Title

62


7

Klik tombol save

6.2.3

Mengintall Plugin

Tidak berbeda jauh, langkah-langkah untuk menginstall plugin sama seperti langkah menginstall module. Kita akan mencoba untuk menginstall plugin Share Content. Plugin ini berfungsi untuk menyediakan tombol sharing artikel ke berbagai social media seperti facebook, twitter, dll. Untuk menginstall plugin share content, lakukan langkah-langkah dibawah ini : No Langkah Ketarangan 1 Buka halaman Administrator Joomla

2


3


63


5


Klik Browse 6

Masuk ke folder Materi Mulok Kelas XII  All About Joomla  Plugin Share Content

7

Klik file plg_scrollingsharebutton-v1.9.1_j1.5 lalu klik tombol Open

64


1. Klik file plg_scrollingsharebutton-v1.9.1_j1.5

2. Klik Open


8

Setelah berhasil menginstall plugin share content, langkah berikutnya adalah kita harus melakukan pengaturan pada plugin yang sudah kita install. Lakukan langkah langkah dibawah ini No Langkah Keterangan 1 Buka halaman Administrator Joomla

65


2

Klik Navigasi menu Extensions  Plugin Manager

3

Halaman Plugin Manager akan terbuka

4

Cari Plugin Sexy Bookmarks, lalu klik plugin tersebut

5

Ubah setingan enable menjadi Yes

66


6

Perhatikan pada section parameter. Klik radio button yes bila kalian ingin menampilkan tombol share social media yang kalian inginkan

7

Klik tombol save

8

67


Catatan :

68


BAB 7 MENGELOLA TAMPILAN JOOMLA

 Dasar Pengembangan Website


 Fungsi dan kegunaan template  Mengintall dan mengaktifkan template

69


Template joomla digunakan untuk merubah keseluruhan tampilan daru website joomla. Template digunakan untuk mengatur tampilan component, module ataupun plugin pada joomla. Kita bisa menyesuaikan tampilan front-end maupun back-end website dengan merubah template joomla. Saat pertama kali menginstall Joomla, secara otomatis joomla memberikan tiga pilihan template yang dapat digunakan untuk tampilan halaman website joomla. Tiga template tersebut adalah beez, JA_Purity dan rhuk_milkway.

7.1

Apa yang Bisa Dilakukan Dengan Template

Sebuah template digunakan untuk memanipulasi cara content / isi website ditampilkan di browser. Dibawah ini adalah hal-hal yang bisa kalian lakukan dengan template joomla : - Mengubah Layout / tampilan keseluruhan website - Mengubah skema warna background, text serta link pada website - Mengatur tampilan gambar pada halaman website serta memasukan animasi kedalam website menggunakan flash ataupun AJAX - Merubah tampilan font pada website joomla

70


7.2

Mengintall Tempate Sekarang kita akan mencoba menginstall Template pada joomla.

Untuk menginstall template, lakukan langkah-langkah dibawah ini : No 1


2


3


71

Ketarangan


5


Klik Browse 6

Masuk ke folder Materi Mulok Kelas XII  All About Joomla  Template  bluePuzzle

7

Klik file Blue-Puzzle-j15.zip lalu klik tombol Open

1. Klik file Blue-Puzzle-j15.zip

2. Klik Open

8


9

Bila sukses menginstall template, status Install Template Success akan ditampilkan

72


7.3

Mengaktifkan template

Setelah berhasil menginstall template, langkah berikutnya adalah menjadikan template yang baru saja kita install sebagai template utama joomla. Lakukan langkah-langkah dibawah ini : No 1


2

Klik Navigasi menu Extensions  Template Manager

3

Halaman Template Manager akan terbuka

Keterangan

Perhatikan tanda bintang yang ada di baris default. Tanda bintang menandakan template yang saat ini sedang aktif digunakan.

73


4

Click radio button pada template Blue-Puzzle-j15, lalu klik tombol default yang terletak di pojok kanan atas halaman administrator

1. Klik Disini

7

2. Klik tombol default

Buka halaman joomla kalian, bila berhasil, tampilan joomla kalian akan berubah seperti tampak pada gambar dibawah ini :

74


Daftar Pustaka http://www.docs.joomla.org http://www.php.net/manual/en/ http://www.en.wikipedia.org/wiki/XAMPP

75


Riwayat Penulis Penulis dilahirkan di Jakarta, 9 April 1988. Menyelesaikan pendidikan SMA-nya di SMA Budhi Warman II Jakarta, penulis melanjutkan kuliah di fakultas Ilmu Komputer, jurusan Sistem Informasi, Bina Nusantara University. Penulis mulai mengenal Joomla saat masih duduk di bangku kuliah tepatnya pada semester 4 perkuliahannya di BiNus Univ. Saat itu penulis mendapat amanah untuk menjadi koordinator Media Center Daerah JADEBEK - Forum Silaturahim Lembaga Dakwah Kampus (FSLDK-JADEBEK). Dengan menggunakan CMS Joomla, penulis membuat website yang berisi berita, informasi serta agenda kegiatan FSLDK JADEBEK. Ditahun 2010, keinginan untuk berbagi ilmu kepada lebih banyak orang membuat penulis memutuskan untuk menjadi tenaga pengajar di SMA Budhi Warman II Jakarta. Sempat bekerja sebagai web programmer di salah satu perusahaan swasta di Jakarta, penulis memutuskan untuk menjadi programmer lepas disamping tugas utamanya sebagai tenaga pengajar di SMA Budhi Warman II Jakarta. Penulis dapat dihubungi lewat email ataupun facebook di alamat [email protected] https://www.facebook.com/yogiadi

76


i Bahasa pemrograman berbasis website

Recommend Documents