Joomla! Untuk Pemula :D

Joomla! Untuk Pemula :D Penulis: Todi Adiatmo Wijoyo Blog : www.sebutsajatodi.co.cc Email : [email protected] *Diperbolehkan untuk menyebarkan artikel ini dengan mencantumkan nama dan alamat penulis degan tidak mengubah isinya, terimakasih :D

1.Apa itu Joomla ??

Saat ini internet makin merajalela, hampir semua orang mengakses tiap harinya. Sekarang ini kita mudah saja menjumpai orang mengkses internet, tidak perlu di warung internet, tapi juga di tempat umum seperti mall, kafe bahkan banyak yang mengakses internet melalui telefon gengam. Dengan banyaknya orang yang mengakses dan makin mudahnya internet diakses banyak yang memanfaatkan internet untuk media publikasi,sarana menyalurkan ide bahkan sebagai tempat berdagang. Dengan kondisi itu maka banyak tantangan yang muncul diantaranya adalah bagaimana kita dapat membuat web yang baik dan interaktif dengan cepat ? dan bagaimanakah orang non-IT dapat membuat web tersebut ? Jangan kawathir ! Joomla! Akan berusaha menjawab tantangan itu :D Jadi pada dasarnya Joomla! Adalah sebuah CMS(Content Management System) dimana CMS adalah semacam perangkat lunak , dalam hal ini perangkat lunak berbasis web dimana kita dapat melakukan publikasi, edit maupun menghapus konten web.Konten web sendiri dapat berupa halaman web, artikel, foto, dan hal lainya yang berhungan dengan web. Dengan bantuan CMS ini kita dapat men-develop web dengan cepat karena kita tidak perlu memikirkan kode php atau html dalam mengedit/men-develop web kita. Dalam kesempatan kali ini kita akan mencoba membuat sebuah portal berita yang bernama “Elektro Post” dimana pada portal tersebut kita akan dapat membuat berita, mengedit berita, mengisi poling, membuat galeri dan membuat form kontak. Untuk materi tidak perlu repot membuat sendiri karena sudah diperdisiapkan.

2.Persiapan Instalasi Joomla! Untuk dapat menggunakan Joomla! Kita harus mempersiapkan hal berikut : • • •

Web Server → Apache Database Server → MySql PHP

Untungnya kita tidak perlu repot memikirkan hal tersebut, kita hanya perlu menginstal perangkat tersebut menggunakan WAMP/XAMP. Untuk instalasi WAMP bisa dilakukan dengan menginstall file WampServer2.0f.exe yang bisa didapat melalui web http://www.wampserver.com/en/

3.Instalasi Joomla! Sebelum dapat memulai membangun situs kita kita perlu mempersiapkan 3 hal yaitu : mengekstrak file-file Joomla!, membuat database untuk Joomla! dan kemudian melakukan Instalasi Joomla! 3.1 Mengekstrak File Joomla! • Hidupkan server Wamp kita

Jika Wamp sudah hidup maka akan muncul di tray icon

•

•

•

Dengan menjalankan WAMP maka kita sudah menjalankan 3 servis berikut pada komputer kita : MySql , Apache dan PHP Buatlah sebuah folder yang namanya sesuai dengan nama web yang akan kita develop

Kali ini akan kita beri nama “ElektroPost” sesuai dengan skenario yang kita buat diatas. Unzip-lah file Joomla_1.5.9-Stable-Full_Package.zip yang sudah kita donwload ke folder tersebut

Setelah selasai meng-ekstrak hapuslah file “Joomla_1.5.9-Stable-Full_Package.zip” agar tidak memperbesar ukuran web kita Salinlah/Pindahkan folder www dalam web server lokal kita ◦ Pada Wamp di windows terletak pada C:/wamp/www/

3.2 Membuat Database untuk web kita • Bukalah web browser favorit anda, dan masuklah ke alamat : http://localhost/phpmyadmin/

Pada bagian Action buatlah sebuah database baru bernama “elektropost” kemudian tekan tombol create. Perlu diingat nama database yang kita gunakan disini karena akan kita pakai lagi waktu instalasi Joomla! 3.3 Instalasi Joomla • Bukalah web browser favorit anda, dan masuklah ke alamat : http://localhost/elektropost/installation/index.php (elektropost dapat diganti dengan nama web lain yang mungkin kita gunakan) • Step 1:Language Pilihlah English lalu tekan Next • Step 2:Pre-Installation check Tekan Next lagi, sebetulnya pada bagian ini Installer Joomla!akan melihat apakah sistem kita

mampu menjalankan Joomla! atau tidak, jika pada bagian ini ada yang dituliskan no berwana merah maka kita tidak bisa menginstall Joomla! pada sistem kita, tetapi dengan menggunakan WAMP biasanya kita dapat melewati proses ini dengan mudah pengecekan sistem oleh Installer Joomla! •

•

Step 3:License, Pada bagian ini kita diminta untuk menyetujui lisensi yang digunakan oleh Joomla! yaitu lisensi GNU, kita harus setuju dengan lisensi ini jika kita ingin melanjutkan instalasi, jika anda setuju anda dapat menekan next Step 4:Database Di bagian ini kita harus memasukkan parameter database yang akan digunakan untuk web Joomla! kita, sebelumnya kita sudah membuat sebuah database bernama “elektropost”.

• •

Untuk isian-nya dapat diisi seperti ini ◦ Database type : mysql ◦ Host Name : localhost → diarahkan pada server mysql lokal kita ◦ Username : root → Default instalasi MySql pada WAMP ◦ Password : kosongkan saja → Default instalasi MySql pada WAMP ◦ Database Name :elektropost Step 5:FTP Configuration Kita dapat men-Skip step ini, tekan next saja Step 6:Configuration Dalam step ini kita diminta mengisi parameter dasar yang akan digunakan oleh situs kita , diantaranya adalah nama situs, email administrator, dan password administrator, sedangkan pada kolom bagian bawah kita juga dapat menginstall “sample data”, jika kita menginstal “sample data” maka kita akan mendapat suatu web yang sudah diisi oleh Joomla! dan kita dapat mengedit-nya, “sample data” ini cocok untuk kita yang ingin berlatih menggunakan Joomla! tetapi tidak/belum mempersiapkan conten web yang akan dibuat.

Untuk isian-nya dapat diisi : Site Name : Elektro Post Your Email : Email Anda Admin Password : isilah seuai password kesukaan anda, harap diingat karena akan kita gunakan untuk login kembali

•

Step 7:Finish Pada step ini kita sudah selesai melakukan Instalasi Joomla! Sekarang langkah terakhir yang perlu kita lakukan adalah menghapus folder “installation” pada folder web anda / “elektropost” yang terletak pada folder server web lokal anda

Selah proses instalasi selesai kita dapat mengecek web kita pada alamat : http://localhost/elektropost

dan http://localhost/elektropost/administrator

4 Serba Serbi Joomla Sebelum kita mencoba mempelajari Joomla! Lebih lanjut sebaiknya kita berkenalan dengan beberapa bagian dari Joomla! Lebih dahulu, kita mulai dengan : •

Template Template pada Joomla! adalah bagian Joomla! yang bertugas mengatur tampilan web kita pada layar browser dan mengatur tata letak komponen Joomla! yang lain. Dengan mengubah template ini kita dapat mengubah tampilan web Joomla! kita dengan cepat , hal yang menarik adalah bahwa kita tidak perlu belajar web design untuk dapat membuat situs yang tampil menarik karena dalam Joomla! Kita hanya perlu mengatur template-nya saja. Template Joomla! tersedia dalam 2 versi yaitu yang gratis dan berbayar, tetapi kita tidak perlu khawatir karena banyak template Joomla! yang gratis dan bagus. Pada instalasi default Joomla! Terdapat 3 buah templates yang dapat dipilih .Jika template yang kita pilih masih terlihat generik maka kita masih dapat meng-custom templates tersebut pada bagian banner. Masih kurang puas ? Kita juga bisa membuat template Joomla! kita sendiri. Setiap Template juga memiliki position yang berbeda-beda untuk meletakkan module

•

Contoh position module yang dimiliki oleh sebuah template Front End dan Back End Sebuah website Joomla! memiliki 2 bagian yaitu bagian yang dapat dilihat oleh semua orang dimana kita mempublikasikan web kita , bagian ini disebut Front End dan bagian untuk administrasi situs dimana kita dapat mengedit web kita , bagian ini disebut Back End. Back End Joomla! secara default terletak pada www.namasitus.com/administrator

•

User Dalam joomla terdapat berbagai macam user, tiap user mempunyai hak-nya sendiri sendir, setiap kali meng-install Joomla! terdapat 1 user default yaitu Admin, dengan hak Super Administrator, Di Joomla ada 2 macam user yaitu user yang dapat mengedi via halaman depan (Front End) atau user yang dapat mengedit melalui halaman belakang (Back End). Hirarki Usernya adalah

•

Article ,Section dan Categories Artikel ini adalah inti dari halaman web yang akan kita publikasikan , dimana pada artikel ini kita akan menulis isi dari web kita. Artikel yang kita tulis ini kemudian dapat dikelompokkan menjadi Section dan Categories. Dimana hirarki-nya adalah : ◦ Section → terbagi menjadi beberapa Categories → 1 Categories memiliki beberapa artikel Misalnya : Olahraga (Section) • Sepakbola (Categories) ◦ “Kaka pindah ke Madrid” (Article) ◦ “Drogba jadi tumbal” • Basket • F1 • Tenis Selain Section dan Categories sebuah artikel juga bisa kita set untuk kita tampilkan pada halaman depan (Front Page) web kita.

•

Front Page Front Page / Halaman depan adalah halaman spesial dalam Joomla! dimana halaman ini adalah halaman yang pertama kali muncul ketika web kita dibuka.

•

Module dan Component Module adalah bagian Joomla! yang terdapat pada web kita, modul ini dapat kita pasang pada posisi yang sudah disediakan oleh template. Misalnya : Breadcrumb,Menu,Polling. Sedangkan Component adalah bagian Joomla! Yang mengurusi tugas spesifik dari dari Joomla! misalnya membuat kontak baru, membuat polling dan memasang banner Hal yang ditawarkan joomla adalah banyaknya plugin (yang dapat berupa Module atau

Component) yang dapat kita install dengan cepat dan memberikan fungsi lain, misalnya dalam kesempatan kali ini kita akan menginstall plugin “Simple Image Gallery” untuk membuat galery foto dan plugin “JCE/Joomla Content Editor” yang akan memudahkan kita dalam mengedit artikel

5 Elektro Post

Dalam kesempatan ini kita akan membuat sebuah web berita yang bernama “Elektro Post” dengan susunan menu kira kira seperti ini • • • • •

Home → Front Page Techno → Berisi berita IT dari section Techno Olahraga → Berisi berita Olahraga dari section Olahraga Foto Bulan Ini → Galeri Foto – Foto Kontak Kami → Sebuah Form untuk mengontak pemilik/administrator web

Pada bagian module kita juga akan menambahkan sebuah modul untuk polling Susunan Section dan Categoriesnya : Olahraga • Sepakbola • F1 • Tenis • Basket Techno • Internet • Lifestyle • Trend Komputer 5.1 Membuat Section Sebelum mulai mengisi artikel sebaiknya kita membuat Section dan Categoriesnya dahulu agar nanti ketika kita membuat artikel kita tinggal mengelompok-kanya saja.Untuk mulai membuat section kita harus masuk ke bagian Content->Section Manager

Pada Bagian Section Manager pilihlah “New”

Isikan bagian Title dengan “Techno”

Kemudian ulangi Langkah yang sama untuk section “olahraga” 5.2 Membuat Categories Cara membuat section hampir sama dengan membuat section ,kita melakukanya dengan masuk ke dalam Content->Categories,

Pada bagian Category Manager pilihlah “New” Categories pertama yang kita buat adalah Olahraga dimana Categories ini merupakan bagian dari

Section Olahraga maka pada bagian Category[New] kita tinggal mengisi Title dengan : Sepakbola dan pada bagian Section Kita pilih Olahraga Pada bagian ini kita tinggal membuat jumlah categories seperti yang kita rencanakan sebelumnya dengan langkah seperti diatas. Olahraga (Section) • Sepakbola (Categories) • F1 (Categories) • Tenis (Categories) • Basket (Categories) Techno (Section) • Internet (Categories) • Lifestyle (Categories) • Trend Komputer (Categories) Pada Akhir bagian ini kita akan mempunyai bagian Categories seperti ini :

Hasil akhir penambahan categories yang kita lakukan

5.3 Menulis Artikel Pertama Akhirnya setelah kita membuat semua Section dan Categories yang diperlukan kita dapat memulai “ membuat”artikel pertama kita. Dalam tutorial ini untuk menyingkat waktu,maka artikel-nya hanya perlu meng-kopi paste dari file notepad yang sudah disediakan dalam di folder “berita”. *Semua artikel diambil dari Okezone.com Untuk mulai membuat artikel kita bisa masuk ke bagian content-> article manager

Seperti biasa, untuk menambah item baru kita cukup meng-klik tombol “New”

Kemudian kita akan sampai kepada sebuah layar untuk mengedit artikel, editor ini adalah editor WYSIWYG, seperti pada open office/microsoft office. Judul artikel kali ini adalah sesuai dengan judul file *.txt yang ada pada folder berita dan isinya juga sama dengan isi yang ada pada file notepad tersebut. Berita yang pertama yang diambil adalah : Federer di Bawah Tekanan.txt

Pengaturan pembuatan artikel pertama kita Title : Federer di Bawah Tekanan Section : Olahraga Categories : Tenis Pada Kolom kanan terdapat beberapa opsi lain yaitu : Published dan Front Page, Opsi “Published” mempunyai fungsi untuk menentukan apakah artikel yang kita buat akan kita publikasikan atau tidak, ada kalanya kita ingin membuat artikel yang cukup panjang sehingga pada awal penulisan kita tidak

ingin mempublikasinya terlebih dahulu. Default Opsi ini adalah Yes. Opsi kedua adalah “Front Page”, pada opsi ini kita bisa menentukan apakah artikel yang kita tulis masuk ke halaman depan atau tidak. Default opsi ini adalah no. Pada Artikel kali akan diset semua artikel dalam keadaan Published: yes Front Page : yes 5.4 Opsi “Read More” Ada kalanya ketika kita menulis sebuah artikel yang muncul pada halaman depan, artikel tersebut terlalu panjang jika tampil utuh, maka kita dapat memecah artikel tersebut menjadi bagian yang muncul di depan, dan sisanya (dibatasi oleh garis merah) adalah bagian yang akan muncul jika kita meng-klik judul artikel tersebut. Jika sudah selesai mengedit kita dapat men-save artikel dengan cara meng-klik tombol Apply/Save, perbedaanya adalah jika tombol Apply yang ditekan maka artikel akan ter-save dan kita tetap berada pada halaman yang sama, sedangkan jika kita menekan tombol Save maka artikel akan ter-save dan kita akan berpindah ke layar article manager, kegunaanya adalah tombol Apply biasa digunakan jika kita ingin mensave kemudian melihat hasilnya di layar , kemudian mengedit lagi artikel kita.

Sedikit tentang CSS dan style penulisan article pada umumnya setiap templates Joomla! memiliki style penulisan yang sudah ditentukan dan cocok dengan templates tersebut jadi pada layar pengeditan artikel kita tidak perlu mengedit jenis font/ukuran, kita hanya perlu menjadikan semua bagian text menjadi paragraf dengan cara menekan control+A kemudian klik format-Faragraph

Untuk artikel yang lain langkahnya sama saja, silahkan dibuat terlebih dahulu untuk semua artikel yang ada dalam folder berita. Untuk melihat apakah artikel yang kita tulis sudah masuk atau belum kita bisa mengecek ke alamat : http://localhost/elektropost/ dan melihat artikel yang kita tulis masuk ke dalam front page.

Screenshoot awal web Elektro Post yang kita kerjakan

5.5 Membuat Menu Baru Sekarang dengan semua artikel sudah kita buat kita bisa mengeksploarasi Joomla! lebih jauh dengan menambahkan menu-menu dan komponen lain , yang pertama akan kita tambahkan adalah sebuah menu yang akan merujuk ke bagian berita tertentu, dengan hirarki : • • • • •

Home → Front Page Techno → Berisi berita IT dari section Techno Olahraga → Berisi berita Olahraga dari section Olahraga Foto Bulan Ini → Galeri Foto – Foto Kontak Kami → Sebuah Form untuk mengontak pemilik/administrator web

Setiap kali kita menginstall Joomla! biasanya sudah disediakan 1 menu khusus dengan nama “main menu” , kita dapat mengaksesnya melalui Menus - > Main Menu

Kemudian kita akan masuk ke bagian menu manager dimana kita bisa menambahkan menu menu lain, seperti biasa untuk menambah menu cukup tekan tombol New

Pembuatan menu baru ini sedikit memerlukan pemahaman, pada dasarnya sebuah menu adalah sebuah link ke sebuah halaman lain dimana halama tersebut bisa berupa : • Sebuah artikel tunggal • Sebuah halaman yang berisi artikel dari section/category tertentu • Sebuah halaman kontak • Dan halaman khusus lainya jika kita menambahkan plugin pada Joomla! Kali ini kita akan menambahkan 2 Menu dan 7 Sub-Menu yaitu Menu Olahraga dan Techno serta Sub Menu Sepakbola,Tenis,F1 Basket, Internet, Lifestyle dan Trend Komputer.

5.6 Menambahkan Menu Olahraga yang menampilkan “Section Olahraga” Pada bagian Select Menu Item Type pilihlan Articles , kemudian Section dan pilihlah “Section Blog Layout”, pada pilihan ini maka artikel yang ada pada Section Olahraga akan ditampilkan seperti pada layout yang dimiliki oleh front page.

Pada layar selanjutnya pada Bagian Title dapat kita isi Olahraga , dengan parent item Top

Selanjutnya tekan tombol Save, dan kita dapat melihat hasilnya dengan masuk ke alamat http://localhost/elektropost/ pilih menu Olahraga

Hasil penambahan menu “Olahraga”

Langkah yang sama dapat diulangi untuk menu Techno yang akan menampilkan “Section Techno” 5.7 Membuat Sub-Menu Sepakbola yang menampilkan “Categories Sepakbola” Setelah berhasil membuat menu menu utama kita akan membuat menu sepakbola yang merupakan sub menu dari menu Olahraga, caranya cukup mudah kita kembali ke bagian Menus-> Main Menu, pilih New, Kali ini pilihlah Article → Category Blog Layout

Untuk pengaturan Title silahkan diisi Sepakbola dan untuk Parent Item, harus diisi Olahraga agar SubMenu Sepakbola ini muncul di bawah menu Olahraga.Pada bagian category pilihlah sepakbola.

Setelah itu klik Save dan lihatlah hasilnya di http://localhost/elektropost/ pilih menu Olahraga kemudian akan muncul menu baru yang berjudul sepakbola, klik pada menu itu Untuk sub menu yang lain caranya sama saja, silahkan ditambahkan untuk sub-menu Tenis,F1 Basket, Internet, Lifestyle dan Trend Komputer.

5.8 Mengedit parameter yang dimiliki sebuah menu, tampilan layout artikel Dalam Joomla! pada setiap menu-nya kita dapat mengatur hal hal apa saya yang bisa ditampilkan, untuk melakukanya kita perlu masuk ke bagian Menus → Main Menu ,pada “Menu Item Manager” editlah salah satu menu, misalnya menu Home. Untuk pengeditan menu yang pertama kita akan mengedit jumlah artikel yang dapat ditampilkan pada sebuah menu, sebagai contoh mari kita pelajari tampilan Front Page kita :

Pada bagian Leading sebuah artikel akan ditampilkan secara horizontal penuh

Pada bagian Intro sebuah artikel akan ditampilkan secara per kolom dimana secar default biasanya terdapat 2 buah kolom

Terakhir pada bagian Link, Artikel akan ditampilkan judulnya saja. Untuk melakukan pengaturan tersebut pada bagian menu yang menampilkan banyak artikel pada satu halamanya pada bagian kanan atas mempunyai opsi Paramater (Basic) yang dapat kita ubah nilainya :

Pengaturan layout artikel yang disdiakan oleh Joomla! Untuk mengedit parameter lain kita dapat masuk ke bagian Parameters(Component)

Pada bagian ini kita dapat mengedit, apakah Nama penulis akan ditampilkan ? Apakah tanggal dibuat akan ditampilkan? Apakah Artikel yang muncul dapat di-rating ? Dan masih banyak lagi, silahkan dicoba sendiri. 5.9 Membuat Polling Dalam Joomla! kita dapat membuat sebuah polling dengan cukup mudah, hal pertama yang perlu kita lakukan adalah membuat pollingnya, dan kemudian menampilkanya ke dalam web. Untuk membuat polling kita dapat masuk ke bagian : Components->Poll

Pada kesempatan kali ini kita akan membuat polling yang berjudul : Apakah Jenis Prosesor Anda ? Dengan pilihan AMD,Intel, dan Lainya

Membuat Polling “Apakah Jenis Prosesor Anda ?” Sampai pada langkah ini kita telah berhasil membuat polling kita, langkah selanjutnya adalah menampilkanya dalam web yang kita buat. Kita akan menampilkan polling kita dalam sebuah modul. Kemudian modul tersebut akan kita letakkan dibawah menu utama kita. Pilihlah Extensions-> Module Manager , pilih new , kemudian pilihlah Polling

Pada Modul ini pengaturanya cukup mudah, ktia hanya perlu mengisi Title: “Apakah Prosesor Yang Anda Gunakan”, Position → pilih left , dan pada module parameters pilihlah sesuai nama polling yang anda buat sebelumnya.

Setelah langkah diatas selesai kita dapat mengeceknya pada alamat http://localhost/elektropost/

5.10 Membuat Breadcrumbs Dalam dunia web dikenal breadcrumb sebagai sarana navigasi, breadcrumb ini berguna agar ketika kita menjelajahi suatu web kita mengerti kita sudah sampai pada bagian mana dan kita dapt dengan mudah kembali ke bagian sebelumnya. Dengan adanya breadcrumb ini navigasi web kita akan sangat jelas dan dapat dipastikan anda tidak akan tersesat.

Contoh Sebuah Breadcrumb yang akan kita buat Dalam breadcrumb diatas kita dapat melihat bahwa kita sedang membaca artikel “Renaul Dapat Sponsor Baru” dan kemudian kita dapat kembali ke bagian sebelumnya dengan mengklik link yang disediakan, yaitu Home, Olahraga, atau F1. Untuk membuat breadcrumb caranya hampir sama seperti ketika kita membuat module polling, kita cukup masuk ke bagian Extensions->Module Manager-> New , kemudian pilih “breadcrumb”, pada layar pengaturan kita hanya perlu mengisi Title :

“Elektro Post”, dan pada position diisi dengan “breadcrumb”. Pada templates Joomla! memang biasanya disediakan bagian khusus untuk breadcrumb. Seperti biasa kita bisa melihat hasil kerja kita pada alamat http://localhost/elektropost/

Breadcrumb akan muncul pada bagian atas dari situs kita 5.11 Menambahkan Plugin “Simple Image Gallery” Langkah selanjutnya kita akan menambahkan sebuah Plugin ke dalam situs Elektro Post kita untuk memudahkan kita membuat galery, pertama tama kita install dulu plugin ini dengan cara masuk ke bagian Extensions->Install/Uninstall

Kemudian pada bagian “Upload Package File” pilih choose file dan pilih file “plugin_jw_sigv1.2.1r2_j1.5.zip” (nama file mungkin berbeda)

Kemudian tekan Upload File & Install. Setelah instalasi selesai kita perlu mengaktifkan plugin ini terlebih dahulu dengan cara masuk ke Extensions->Plugin dan carilah “Simple Image Gallery Plugin” kemudian tekan “Enable Plugin”

Setelah menginstall Plugin hal selanjutnya yang kita perlu lakukan adalah menyiapkan foto untuk galeri kita ini. Foto tersebut ada di dalam folder Galeri. Copilah folder ini ke direktori Joomla! kita yaitu Elektropost/Image/Stories/

Path dimana kita akan menaruh folder “Galeri” Hal yang kita perlu lakukan selanjutnya adalah membuat artikel baru yang bernama “Foto Bulan Ini” dan pada bagian isinya kita isi : {gallery}galeri{/gallery}

dimana galeri dapat kita ubah dengan folder lain yang terdapat pada Elektropost/Image/Stories/. Kemudian jangan lupa mengubah section menjadi “Uncategorised”

Artikel yang akan menampilkan galeri kita Setelah membuat artikel tersebut kita perlu membuat sebuah menu yang merujuk ke artikel yang kita buat tadi, caranya sama seperti ketika membuat menu lain, hanya saja kali ini kita pilih Article->Article Layout

Untuk pengaturanya seperti biasa, hanya saja pada bagian “Select Article” kita pilih select kemudian kita pilih artikel kita yang berjudul “Foto Bulan Ini”.Kemudian tekan “save”

Memilih Artikel kita untuk keperluan pembuatan Galeri

Hasil pembuatan galery menggunakan plugin “Simple Image Gallery” 5.12 Menambahkan Plugin “JCE/Joomla Content Editor Tujuan dari menambahkan plugin JCE ini adalah editor bawaan default Joomla! kurang baik salah satu kekuranganya adalah penanganan gambar yang kurang baik, dan fitur copy-paste yang tidak lengkap. Untuk menginstall plugin ini kita masuk ke bagian Extensions->Install/Uninstall

Kemudian pada bagian “Upload Package File” pilih choose file dan pilih file “com_jce_153.zip” kemudian setelah selesai dilanjutkan menginstall file “plg_jce_152.zip” (nama file mungkin berbeda)

Pilih “com_jce_153.zip” kemudian tekan upload file & install Setelah proses instalasi selesai kita harus mengubah editor yang digunakan oleh Joomla! menjadi JCE yang baru saja kita install, caranya adalah masuk ke bagian Site → Global Configuration, pada bagian default WYSIWYG Editor pilihlah Editor – JCE 1.5.2

Mengedit editor defautl Joomla! 5.13 Menambahkan foto pada artikel Jika proses diatas sudah selesai maka kita akan segera menggunakan editor JCE untuk menambahkan foto pada artikel kita. Artikel yang akan kita tambahkan foto adalah artikel dengan judul “Kaka Hengkang, Pato Ikhlas”, Sebelum kita mengedit artikel copy-lah file foto yang ada dalam folder berita ke dalam folder image/stories milik Joomla!

*Foto yang akan diupload pada namanya tidak boleh mengandung spasi Kemudian masuklah ke bagian Content->Arcticle Manager lalu pilih artikel yang bersangkutan. Untuk menambahkan foto kita cukup meng-klik ikon dengan gambar ini

Icon untuk mengedit gambar Pilihlah foto yang sesuai kemudian tekan insert.

Foto yang diupload pertama kali masih tidak pas layoutnya Untuk mengedit foto kita dapat meng-klik foto tersebut kemudian menyesuaikan ukuranya. Kemudian untu merubah posisinya pada gambar klik kanan dan pilih insert/edit image

Pilih Insert/Edit Image

Pada Bagian Alignment pilihlah left untuk menggeser gambar ke kiri text Kita dapat menggeser gambar ke kiri/kanan text dengan cara memilih alignment-nya jika kita ingin

gambar ada di kiri text maka pilih Alignment = left dan jika di kanan pilih Alignment = right, kali ini kita akan memilih left. Kemudian pada bagian margin isilah dengan nilai 10, agar gambar memiliki jarak dengan text Isikan margin dengan nilai 10 Setelah selesai mengedit kita akan mendapatkan layout foto yang lebih baik

Hasil pengeditan gambar, sekarang tampak lebih rapi

5.14 Membuat Form Kontak Form kontak adalah form yang memungkinkan user/pengunjung mengirim email dari web kita menuju email kita tanpa kita perlu mempublikasikan alamat email kita, form ini berguna agar alamat e-mail kita tidak tersebar di internet, sehingga e-mail kita lebih aman dari gangguan tangan jahil.

Form kontak yang akan dibuat Untuk Membuat Form ini pertama tama kita harus membuat kategori kontak, kemudian baru membuat kontak (orang yang akan menerima email) itu sendiri. Pertama mari kita buat kategori kontak baru dengan cara masuk ke bagian Components->Contacts>Categories. Buatlah sebuah kategori baru, pada Category Manager tekan New dan masukkan titlenya dengan “Admin”

Menambahkan kategori kontak baru

Setelah kita membuat kategori baru kita dapat menambahkan kontak dengan cara masuk ke bagian Components->Contacts->Contacts Seperti Biasa tekanlah tombol New dan buatlah kontak dengan detail yang anda mau, jangan lupa isikan email kontak yang anda buat dengan benar

Membuat kontak baru , perhatikan bagian Name,Category dan E-Mail Pada form ini yang perlu diperhatikan adalah Name dimana akan kita isi sesuai nama orang akan menjadi orang yang menerima email, kemudian bagian Category pilihlah Admin seperti kategori kontak yang kita buat sebelumnya dan pada bagian email isilah email kontak tersebut Langkah yang akan kita lakukan selanjutnya adalah membuat menu yang akan berisi tentang fom untuk mengontak Admin ini, caranya adalah masuk ke bagian Menu → Main Menu pilih New, kemudian pilihlah Internal Link → Contacts → Standard Contact Layout

Pilihlah “Standart Contact Layout” Kemudian pada layar berikutnya , pada bagian Title isilah nama menu ini menjadi “Kontak Kami” dan pada bagian Select Contact pilihlah Admin.

Jangan lupa memilih “Admin” pada bagian Select Contact Jika tahap ini sudah selesai maka kita sudah berhasil membuat form “Kontak Kami”, silahkan cek hasilnya di http://localhost/ElektroPost/ dan pilih menu “Kontak Kami”

5.15 Bagian Terakhir : Template Joomla! Kekuatan sebuah web selain pada isinya juga pada desain web yang digunakan, pada Joomla! desain web ini dapat kita pilih melalui template, pada default instalasi Joomla! kita mendapat 3 template secara cuma-cuma yaitu : beez,JA_Purity dan rhuk_milkyway, untuk template lainya dapat kita cari di internet , tetapi sekali lagi, ada template gratis dan ada template berbayar. Untuk mengatur template kita, kita dapat masuk ke bagian Extensions → Template manager, pada defaultnya template yang digunakan adalah rhuk_milkyway, jika kita ingin menganti template lain kita cukup memilih template yang kita inginkan dan kemudian tekan “default”

Memilih template Joomla!

Tampilan baru dengan template JA_Purity

*Perlu diperhatikan bahwa tiap template kadang menyediakan position yang berbeda, misalnya ada template yang menyediakan posisi breadcrumb ada yang tidak , untuk itu kadang kita perlu menyesuakan position module kita lagi Seperti pada Template JA_Purity tidak terdapat posisi breadcrumb.

7 Meng-upload web yang kita buat ke hosting kita

Setelah kita selesai membuat web kita, kita tentu ingin mempublikasikan web kita kepada dunia, agar web tersebut dapat diakses semua orang. Web elektropost yang kita buat ini sebelumnya kita buat pada komputer kita (localhost), agar web kita dapat diakses secara publik maka kita perlu memindahkan-nya ke server publik yang dapat diakses semua orang. Istilah yang perlu kita ketahui : Domain Name : Domain name adalah nama web kita di internet, nama ini adalah nama yang kita ketik di web browser kita, semisal www.detik.com atau www.kaskus.us , kita dapat mendaftarkan nama yang kita inginkan untuk domain kita, misalnya www.namasaya.com, caranya cukup mudah kita hanya perlu ke penyedia layanan web kemudian mendaftarkan nama yang kita inginkan, jika nama tersebut belum dipakai kita dapat mempergunakan-nya, adapun yang perlu diketahui adalah domain ini tidak gratis atau kita harus membayar secara rutin tiap tahun untuk tetap dapat menggunakan nama yang kita pilih Perkiraan nama domain: .com, .us, co.id , .web.id , .info, .net , .org → sekitar 100rb / tahun adapun beberapa domain yang free , contohnya : .co.cc , .co.nr , .tk Web Hosting Provider: Web Hosting Provider perusahaan pemilik server yang dapat diases secara publik, untuk dapat mempublikasikan web kita kita perlu “meminjam” disk space dan bandwidth penyedia layanan ini. Tarif sewanya antara 5rb-60rb per bulan, hal ini bergantung pada bandwidth dan disk space yang kita pakai Langkah demi langkah meng-upload web “Elektropost” a.Membeli dan mengkonfigurasi Domain Serta Menyewa Web Hosting b.Menyiapkan database untuk web Joomla! kita c.Mengkonfigurasi web Joomla! kita dan meng-upload file kita ke web hosting

a. Membeli dan mengkonfigurasi Domain Serta Menyewa Web Hosting Pertama-tama kita masuk ke salah satu penyedia web hosting yang ada di indonesia, kali ini yang dicontohkan adalah www.dracoola.com , kita akan mencoba melihat apakah nama www.sebutsajatodi.com bisa kita gunakan.

Mengecek apakah kita bisa membeli domain dengan nama www.sebutsajatodi.com

Contoh daftar harga yang ditwarkan untuk www.sebutsajatodi.com Kebetulan kita tidak hanya bisa memilih sebutsajatodi.com saja tetapi jika kita menginginkan kita bisa memilih ekstensi lain seperti .net/.org. Jangan lupa harga diatas adalah untuk per-tahun dan setelah satu tahun kita harus memperpanjang domain kita agar tetap bisa digunakan.

Setelah kita membeli domain langkah selanjutnya yang diperlukan adalah menyewa web-hosting , berikut ini adalah contoh harga yang ditawarkan berikut fasilitasnya

Contoh harga webhosting yang ditawarkan Dracoola Perlu diperhatikan dibagian atas ada pilihan untuk server Indonesia/ server Amerika, perbedaanya adalah server Amerika biasanya lebih murah, hanya saja untuk diakses dari indonesia lebih lambat, dan sebaliknya server Indonesia dapat diakses dari indonesia lebih cepat tetapi harganya relatif lebih mahal, hal ini tinggal kita sesuaikan saja, apakah target pengunjung kita lebih banyak berdomisili di Indonesia atau di Luar negeri.

Pembayaran untuk pembelian domain dan layanan web host ini biasanya dilakukan melalui transfer bank, dan setelah masalah administrasi kita selesaikan maka kita akan mendapat username dan login untuk mengakses web kita. Tidak punya dana untuk beli domain dan web host tapi tetap ingin mempunyai web kita sendiri? Jangan khawatir kita bisa membuat domain kita secara gratis , misalnya di www.co.cc, sedangkan untuk web hosting gratis ada banyak yang ditawarkan di internet, salah satunya adalah http://www.1000webhost.com. Tetapi web hosting gratisan ini biasanya aksesnya lambat sehingga menyulitkan kita untuk melakukan maintenance web. Jika ingin memangkas biaya tetapi ingin mempunyai web host yang cepat mungkin kita bisa memilih domain gratis dan membeli web hostnya saja, misalnya membuat domain seperti www.sebutsajatodi.co.cc dan kemudian menghost-nya di Dracoola. Sekarang kita asumsikan bahwa kita sudah membeli domain serta paket web host di Dracoola / web hosting lain, langkah selanjutnya adalah mengarahkan domain milik kita ke name server web host provider kita. Contoh dibawah ini adalah mengkonfigurasi agar domain kita diarahkan ke Dracoola (nama nameserver yang akan kita pakai akan kita dapatkan setelah kita membeli domain).

Pengaturan nameserver untuk web kita Pengaturan nameserver ini berkaitan dengan Domain Name System/DNS, DNS adalah sistem yang mencovert tulisan yang kita ketik di browser, misal www.sebutsajatodi.co.cc menjadi alamat ip address, proses konversi ini biasa disebut resolve ip address. Analoginya adalah jika kita melihat phonebook kita di handphone, jika kita mengetik todi maka akan muncul nomornya.Yang akan kita gunakan untuk menelfon nomor-nya kan ? bukan nama todi? DNS prinsipnya kurang lebih begitu. b.Menyiapkan database untuk web Joomla! kita Sebelum kita meng-upload file Joomla! Kita ke web hosting kita langkah yang kita perlukan adalah menyiapkan database kita pada web hosting kita, prosesnya sedikit berbeda dari yang kita lakukan pada langkah awal. • Masuklah ke Cpanel web host anda, misal www.namadomainanda.co.cc/cpanel • Login lah dengan user dan password yang diberikan oleh provider web hosting anda

•

Membuat database baru, Pada bagian Database pilihlah MySQL Database Wizard, atau menu sejenis, perlu dicermati bahwa jika kita menyewa web host kita tidak bisa membuat database baru langsung melalui phpMyAdmin

•

Menu Database Wizard untuk membuat Database baru Isikan nama database anda, kemudian catatlah nama database ini

•

Buatlah username dan password untuk database ini

•

Berilah user semua privelages

Memberi user todi semua privelage agar database dapat kita fungsikan

•

Catatlah parameter nama database, user dan login nya .Perlu diperhatikan !! Nama login dan nama database yang kita buat tadi sedikit berbeda dengan nama yang akan digunakan, misalnya jika kita memiliki login cpanel loginsaya maka nama user dan database akan diawali prefix loginsaya_namalogin dan loginsaya_namadatabase, perhatikan pada step 3 diatas ◦ Nama Database :loginsaya_ DatabaseElektropost ◦ Login Database : loginsaya_Todi ◦ Password Database : Todi

Yang kita lakukan berikutnya adalah mengkopi database local kita ke database kita pada web hosting • Masuklah ke http://localhost/phpmyadmin/ • Pilihlah database elektropost

•

•

•

Memilih database elektropost pada phpMyAdmin Kemudian pilihlah tab Export

Memilih tap Export untuk mengekspor tabel dalam database kita Hal berikut yang kita lakukan adalah mengekspor tabel dalam database elektropost ke sebuah file yang ber-ekstensi *.sql, kemudian file ini nantinya akan kita gunakan dalam database yang berada dalam database web host kita Pada bagian bawah halaman pilihlah “Save as File” kemudian pilihlah Go

Menyimpan tabel dalam database kita ke file elektropost.sql Setelah kita mensave tabel dalam database kita, hal selanjutnya yang kita lakukan adalah mengimpor file elektropost.sql ke database dalam web host kita • Kembalilah ke CPanel pada web host kita , misalnya www.namadomainanda.co.cc/cpanel

•

Pada Database pilihlah PhpMyAdmin

•

Pilihlah phpMyAdmin Pilihlah database DatabaseElektropost

•

Pilihlah database yang akan kita gunakan untuk web kita Pilihlah tab import

•

Masuklah tab import untuk mengimpor tabel yang kita perlukan Pilihlah Choose File dan pilihlah file elektropost.sql yang tadi kita buat

•

Pilihlah file elektropost.sql Setelah memilih file elektropost.sql tekanlah Go pada bagian bawah layar

Sampai disini kita telah berhasil membuat database yang kita perlukan untuk website kita, sehingga pada bagian selanjutnya yang kita perlukan tinggal mengubah sedikit konfigurasi Joomla! Dan kemudian meng-upload webnya menggunakan bantuan FileZilla.

Mengkonfigurasi web Joomla! kita dan meng-upload file kita ke web hosting Sebelum kita meng-upload web Joomla! kita, kita perlu merubah sedikit parameter pada konfigurasi Joomla! , hal ini disebabkan karena nama database kita pada web dan nama database yang kita gunakan pada komputer kita berbeda. • Carilah file configuration.php pada folder Joomla! Kita, file milik saya terletak di :

• •

Carilah file configuration.php pada folder web anda Editlah file configuration.php dengan text editor (tampilan text editor mungkin berbeda beda) Ubahlah parameter $user, $password, dan $db, misal dengan catatan yang tadi kita buat ◦ Login Database : loginsaya_Todi ▪ $user ='loginsaya_ Todi'; ◦ Password Database : Todi ▪ $password ='Todi'; ◦ Nama Database :loginsaya_ DatabaseElektropost ▪ $db ='loginsaya_ DatabaseElektropost';

Pengubahan configuration.php Kemudian install-lah FileZilla, FileZilla adalah sebuah program FTP Client yang akan sangat membantu kita dalam mengup-load web kita ke internet, bukalah FileZilla selesai kita install, loginlah ke web kita dengan username dan password yang kita miliki (password dan user ftp didapat dari provider web host kita). • Login ke web kita melalui FileZilla, masukkan host, username dan password lalu tekan quickconnect

Isilah host,username, dan password anda •

FileZilla mempunyai 2 layar, layar sebelah kiri adalah file yang terdapat pada komputer kita atau local site sementara layar sebelah kanan adalah file yang terletak pada webhosting kita

•

Pada bagian kanan (remote site) pilihlah folder public_html, kemudian dobel klik untuk membuka folder tersebut, pada folder public_html inilah web kita akan kita upload

• •

Memilih folder public_html Hapuslah semua file yang terdapat pada folder public_html Pastikan pada bagian remote site merujuk ke /public_html

•

Melihat folder yang aktif pada remote site Pada local site pilihlah folder Joomla! Kita yaitu folder ElektroPost

Pilihlah folder tempat web yang ingin anda upload •

•

Pada bagian Filename pilihlah semua file dengan menekan cara menekan control+A, kemudian klik kanan dan pilih upload

Mengupload semua file ke folder /public_html pada remote site Tunggulah proses upload selesai

Setelah proses ini selesai maka kita dapat membuka web browser,mengetik alamat domain kita dan menikmati web hasil latihan kita :D

8 Penutup Tidak terasa kita sudah menyelesaikan tutorial singkat ini, semoga latihan membuat web portal berita “Elektro Post” ini dapat berguna bagi kita semua :D

9 Referensi • • •

en.wikipedia.org dan id.wikipedia.org sumber berita dan foto adalah milik okezone.com sumber foto galeri adalah milik pribadi penulis Terimakasih telah membaca tutorial singkat saya :D