CARA MEMBUAT WEBSITE MENGGUNAKAN JOOMLA

CARA MEMBUAT WEBSITE MENGGUNAKAN JOOMLA

Dalam membuat web menggunakan joomla, terlebih dahulu kita harus mempunyai:

1.      Aplikasi joomla

2.      Aplikasi XAMP

3.      File Zilla

CARA MENGINSTAL XAMPP

Sebelum menginstal Joomla, kita memerlukan sebuah server, sehingga Joomla dapat diinstal dan dijalankan di Komputer local tanpa harus terhubung ke Internet.

 

Cara menginstalnya adalah sebagai berikut ;

1. Klik dua kali icon XAMPP yang anda miliki atau klik kanan open pada file nya XAMPP.

2. Pilih Bahasa Indonesia pada pilihan bahasa yang digunakan.

3. Klik OK.
4. Klik next pada halaman setup wizard

5. Klik Install

6. Proses Instalasi akan berjalan. Jika sudah selesai, klik Finish. Setelah klik Selesai, akan muncul pesan seperti berikut :

7. Klik No agar XAMPP tidak masuk kedalam proses servis pada system operasi komputer kita. Dengan demikian, komputer tidak terbebani akibat dari XAMPP yang berjalan terus-menerus.

8. Klik Yes, jika Anda ingin langsung menjalankan control panel XAMPP server.

9. Dengan demikian, proses instalasi XAMPP server telah selesai.

Begitulah cara menginstal XAMPP. Kemudian kita akan melanjutkan dengan menginstal Joomla. Namun sebelumnya kita harus menjalankan XAMPP server terlebih dahulu.

MENJALANKAN XAMPP SERVER

Setelah menginstal XAMPP, langkah berikutnya adalah menginstal Joomla. Namun sebelumnya kita harus menjalankan service Apache dan MySql terlebih dahulu.

Caranya adalah sebagai berikut :

1. Buka XAMPP melalui Start – All Program – Apachefriends- XAMPP – Control XAMPP Service Panel.
2. Klik Start pada bagian Apache.
3. Klik Start pada bagian MySql. Maka XAMPP telah berjalan.

CARA MENGINSTAL JOOMLA

Setelah menjalankan service Apache dan MySql, selanjutnya kita bisa menginstal Joomla. Berikut adalah cara menginstal Joomla:

1. Buat folder di C – Program Files – XAMPP – Htdocs. Pada contoh kali ini, buat folder joomla.

2. Copy seluruh isi folder Joomla dari Internet.
3. Buka browser, lalu ketik localhost/joomla. Kemudian tekan Enter. Secara otomatis akan membuka file index.php di folder joomla/instalation. Kemudian klik next.

4. Isi formulir yang disediakan.

5. Lengkapi isian formulir

- Database Type : mysql

- Host Name : localhost

- Username : root

- Password : (kosongkan)

- Database Name : zaelanidb (contoh)

6. Klik next. Kemudian klik OK jika semua isian telah benar.

7. Masukkan nama situs (nantinya akan muncul di Title bar). Misalnya saja www.zaelaniakbar.com
8. Kemudian isi alamat email dan ganti pasword yang diberikan (nantinya akan menjadi pasword admin).
9. Klik Install Sample Data.

10. Klik next.

11. Klik view site untuk melihat halaman website yang telah Anda buat. Anda diminta untuk menghapus folder Instalation untuk bisa mengakses situs yang telah dibuat. Buka kembali windows explorer dan hapus folder Instalation di folder joomla.

12. Refresh internet explorer (tekan tombol F5). Tampilkan halaman utama Joomla.

13. Untuk mengubah/mengatur tampilan beserta isinya, dapat dilakukan di bagian administrator.

Masukkan username dan passwordnya.

14. Tampilan utama administrator yang berisi Control Panel, yang selanjutnya dapat kita ubah sesuai kebutuhan kita untuk membangun sebuah website.

15. Sebelum mengatur hal lain, sebaiknya atur terlebih dulu Global Configuration.

Tampilan website setelah diubah

Membuat menu serta artikel pada website yang kita buat:

Di sini saya memberi nama website saya “Catatan Reza Pahlevi”, karena saya ingin membagi berbagai tulisan serta artikel yang saya buat kepada orang-orang melalui website yang saya buat. Di bawah ini adalah tampilan control panel (administrator) pada website saya, di dalam joomla ketika kita mengedit website yang kita buat seperti mengubah template website, mengisi artikel, menambahkan berbagai atribut lain kita harus masuk terlebih dahulu sebagai admin dan mengeditnya melalui control panel, seperti gambar di bawah ini halaman administrator pada website saya.

Pada joomla ketika kita ingin membuat suatu menu kita mengeditnya dengan cara masuk ke dalam menu lalu memilih dimana kita akan membuat menu untuk website kita, caranya ialah dengan memilih New jika kita ingin membuat menu baru, di sini saya menggunakan Main Menu, Top Menu, User Menu, Situs Saya, Examples Pages, Key Concepts dan Universitas Gunadarma. Pada bagian Main Menu saya membuat lagi beberapa section dari main menu diantaranya ada Home, Pengetahuan, Seputar TI, Sepakbola, FC Internazionale Milano, Islami, Link Joomla serta Hubungi Saya. Pada bagian section inilah saya membuat artikel berdasarkan kategorinya masing-masing.

Pada joomla ketika kita ingin membuat suatu artikel kita harus membuat section dan kategorinya, oleh karena itu sebelumnya saya membuat section pada bagian menu serta beberapa categorinya, misal pada section Seputar TI saya membuat beberapa categori seperti Internet, Jaringan Komputer dan Tips. Lalu setelah itu saya membuat artikel berdasarkan section dan categorinya yang sudah saya tentukan sebelumnya.

Tampilan Menu Manager , di sini tempat dibuatnya berbagai Menu pada website yang kita buat

 

Tampilan Menu Item Manager, di sini tempat dibuatnya berbagai Section dan Categori untuk menulis artikel pada website kita

 

Mengatur template yang akan digunakan pada website:

Pada joomla hampir sama seperti pada blog, kita bisa mengatur sendiri template yang akan kita gunakan pada website kita bisa mendownload pada situs yang menyediakan template joomla ataupun kita bisa membuatnya sendiri. Di sini saya menggunakan salah satu template yang disediakan situs penyedia template joomla, setelah filenya kita download kita bisa mengaturnya dengan memilih menu extension-install/uninstall, langkah pertama kita menginstall file templatenya ke dalam joomla setelah itu msuk ke dalam menu template manager dan mengganti template default dari situs joomla dengan template yang sudah kita download sebelumnya.

Tampilan awal (home) dari website yang saya buat terdapat berbagai Menu dan Section yang saya buat serta template yang saya ubah

Menambahkan ekstensi dan komponen lain pada website kita

Untuk mempercantik website yang kita buat, jjomla telah mengaturnya dalam suatu paket yang bernama ekstensi, atau pada blog disebut gadget. Joomla telah menyediakan berbagai macam ekstensi-ekstensi yang bisa kita download. Untuk mengatur ekstensi ini muncul di website kita caranya ialah setelah kita mengupload filenya pada control panel administration kita bisa mengaturnya pada bagian extension kita pilih modul manager lalu kita pilih tanda centag dan publish pada ekstensi yang akan kita tanpilkan pada website yang kita buat, pada website saya, saya menambahkan beberapa ekstensi yaitu google translator, jam biner, serta jcomment yang berfungsi agar pengunjung website kita dapat menambahkan komentar pada artikel yang saya buat. Tampilannya seperti di bawah ini:  

Tampilan ketika kita ingin memosting artikel pada website:

Sumber: http://rofahani.blogspot.com/2013/02/cara-membuat-website-menggunakan-joomla.html

HAML – Markup Indah Pengganti HTML

HAML – Markup Indah Pengganti HTML

Haml adalah markup seperti Html, tetapi lebih indah, human-readable (enak dibaca) dan dapat memangkas banyak waktu. Haml sendiri adalah library dari bahasa pemprograman Ruby (atau biasa disebut Gem) yang meng-compile file .haml ke file .html jadi kita tidak perlu menginstall ruby di server karena proses compile dapat dilakukan di komputer lokal. Tapi kita tetap harus menginstall Ruby di komputer lokal kita.

Haml

Untuk menginstall ruby, jika anda menggunakan sistem Window$, anda bisa mengunduh installernya di http://rubyinstaller.org/downloads/ dan pilih versi 1.9.2 untuk kestabilan. Di Linux dan Mac anda bisa menggunakan RVM, Ruby Version Manager di http://beginrescueend.com/. Untuk mengetes apa ruby sudah terinstall, buka command-line atau terminal (di Windows, Start > run > ketik ‘cmd’, atau Start > accesscories > command line)

Setelah menginstall ruby, sekarang kita perlu menginstall library dari Haml itu sendiri. Mudah kok, cukup dengan perintah pada command-line:

1	gem install haml

atau diawali dengan kata `sudo’ pada Linux atau Mac OS X.
Baiklah kini Haml (dan Ruby) sudah ter-install, saatnya kita belajar Haml dari contoh file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

!!! %html     %head         %title Judul Halaman         %link{:rel => 'stylesheet', :href => 'style.css'}     %body         %h1 Heading 1         %p             Lorem ipsum dolor sit amet,             %strong consectetur             adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.         .container             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.         #wrapper             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.         %div{ :class => 'container', :id => 'wrapper'}             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.

Simpan file diatas dengan nama index.haml (atau nama lain) lalu ketikkan di command line/terminal perintah:

1	haml index.haml index.html

Dimana ‘haml’ adalah nama perintah untuk meng-compile file haml, ‘index.haml’ adalah nama dari file input berupa Haml yang kita buat diatas, sedang ‘index.html’ adalah file output hasil kompilasi dari file haml. Saya sarankan file output dan file input namanya sama, misal index.haml untuk index.html, view.haml untuk view.html, dan seterusnya.

Hasilnya dalam index.html:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>   <head>     <title>Judul Halaman</title>     <link href='style.css' rel='stylesheet' />   </head>   <body>     <h1>Heading 1</h1>     <p>       Lorem ipsum dolor sit amet,       <strong>consectetur</strong>       adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.     </p>     <div class='container'>       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.     </div>     <div id='wrapper'>       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.     </div>     <div class='container' id='wrapper'>       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.     </div>   </body> </html>

Tag dalam Haml, seperti dalam file Haml diatas cukup dengan tanda % di depan nama tag. Misal %html, %title, dan sebagainya.

Sedangkan untuk Tag yang berada di dalam tag lain, Haml menggunakan konsep indentasi. Biasanya indentasi dalam Haml adalah 1 tab atau 2 spasi (ala Ruby), untuk lebih jelasnya apa maksud penggunaan indentasi dalam Haml, lihat contoh berikut ini:

1 2 3 4 5 6 7 8

%body      %p          Lorem ipsum dolor sit amet, consectetur adipiscing elit.          %strong              Praesent pretium justo              %em                  non nibh commodo iaculis.          Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.

Dan jika di-compile maka hasilnya:

1 2 3 4 5 6 7 8 9 10 11 12

<body>   <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit.     <strong>       Praesent pretium justo       <em>         non nibh commodo iaculis.       </em>     </strong>     Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.   </p> </body>

Bagaimana? Sudah jelas maksud indentasinya?

Ya, Indentasi Haml berfungsi sebagai pengganti tag nesting pada Html. Sebuah indentasi bisa berupa 1 tab atau beberapa spasi. Syaratnya, jumlahnya harus sama dan konsisten.

Sedangkan tanda !!! diawal dokumen adalah doctype dari html. !!! melambangkan xhtml 1, dan !!! 5 adalah html 5.

Bagaimana dengan atribut Html seperti href dan title pada tag a (anchor), description dan content pada tag meta? Untuk memberikan atribut html, bisa dilakukan dengan memberi tanda kurung kurawal setelah nama tag tanpa spasi. Contohnya:

1	%a{ :href => '/page.html', :title => 'Link ke sebuah halaman'} Link

dituliskan dalam bentuk haml seperti ini:

1	<a href='/page.html' title='Link ke sebuah halaman'>Link</a>

Contoh-contoh diatas adalah sebagian kecil dari fitur Haml. Haml tidak hanya memperindah kode (dan lebih human-readable), tapi juga memangkas waktu penulisan tag-tag Html biasa. Haml banyak digunakan oleh developer Rails sebagai pengganti Erb atau developer PHP sebagai pengganti tag Html biasa.

Selamat Mencoba