MEMBUAT WEBSITE DENGAN Joomla!

98
Muhammad Yusuf Laboratorium Sistem Informasi Universitas Trunojoyo Email/FB : [email protected]

description

MEMBUAT WEBSITE DENGAN Joomla!. Muhammad Yusuf Laboratorium Sistem Informasi Universitas Trunojoyo Email/FB : [email protected]. Apa itu Joomla! ? (1). Joomla ! Adalah salah satu aplikasi untuk membuat website yang bersifat open source - PowerPoint PPT Presentation

Transcript of MEMBUAT WEBSITE DENGAN Joomla!

Page 1: MEMBUAT WEBSITE  DENGAN Joomla!

Muhammad YusufLaboratorium Sistem Informasi

Universitas TrunojoyoEmail/FB : [email protected]

Page 2: MEMBUAT WEBSITE  DENGAN Joomla!

Joomla ! Adalah salah satu aplikasi untuk membuat website yang bersifat open source

Dengan Joomla ! Bisa membuat website tanpa membutuhkan pengetahuan tentang desain atau pemrograman web.

Dengan Joomla! Dapat membuat website dengan waktu yang relatif singkat

Beberapa kemudahan yang ditawarkan Joomla! adalah:

a. Gratis Bisa didownload secara gratis di http://www.joomla.org, terdapat juga forum diskusi mengenai Joomla di http://www.id-jomla.com

Page 3: MEMBUAT WEBSITE  DENGAN Joomla!

b. Kemudahan mengelola website Mengelola isi website dengan Joomla !

Lebih mudah karena sudah disediakan untuk pengaturannya. Pengguna Joomla ! Tinggal membuat apa yang ingin diisikan ke dalam website-nya.c. Kemudahan mengganti tampilan website Tampilan atau yang biasa disebut template Joomla! Sangat banyak dan beragam sesuai dengan versi Joomla!.

Page 4: MEMBUAT WEBSITE  DENGAN Joomla!

Instalasi Joomla! secara Offline. Sebelum menginstal secara online, sebaiknya

Joomla diinstal pada komputer kita sendiri. Yang perlu disiapkan adalah : - Server lokal yakni XAMPP 1.5.3 - Source Joomla! yang akan digunakan, kali ini kita memakai Joomla 1.0.15. - Joomla! Feature, yaitu semua elemen yang dibutuhkan untuk memodifikasi website, seperti module, component, dan template.

Page 5: MEMBUAT WEBSITE  DENGAN Joomla!

Instalasi local server XAMPP 1.5.3.Sebelum menginstal Joomla!, kita memerlukan server sehingga Joomla! Dapat diinstal dan dijalankan di komputer local tanpa harus terhubung ke internet.

Cara menginstall XAMPP 1.5.3. yaitu : 1. Klik 2x icon XAMPP yang ada di komputer anda.

Page 6: MEMBUAT WEBSITE  DENGAN Joomla!

2. Pilih English pada pilihan bahasa yang disediakan3. Klik OK

Page 7: MEMBUAT WEBSITE  DENGAN Joomla!

4. Klik Next pada halaman setup wizard

Page 8: MEMBUAT WEBSITE  DENGAN Joomla!

Server XAMPP akan diinstall dalam folder C:\Program File

Page 9: MEMBUAT WEBSITE  DENGAN Joomla!
Page 10: MEMBUAT WEBSITE  DENGAN Joomla!
Page 11: MEMBUAT WEBSITE  DENGAN Joomla!

9. Klik Yes, jika anda ingin langsung menjalankan control panel XAMPP server.

Page 12: MEMBUAT WEBSITE  DENGAN Joomla!

Setelah menginstall XAMPP, langkah berikutnya adalah menginstall Joomla!. Namun, sebelumnya harus menjalankan service Apache dan MySQL terlebih dahulu.

Caranya adalah : 1. buka XAMMP melalui start-> All Program ->apachefriends->XAMPP->control panel XAMPP service Panel 2. Klik Start pada bagian Apache 3. Klik Start pada bagian MySQL

Page 13: MEMBUAT WEBSITE  DENGAN Joomla!

Dengan munculnya tulisan running, maka apache dan MySQL telah berjalan

Page 14: MEMBUAT WEBSITE  DENGAN Joomla!

Cara menginstalnya adalah :1.Buka folder di C:/Program

Files/XAMPP/htdocs/. Buat folder dengan nama Lab Komputasi

2.Copy seluruh isi folder Joomla! 1.0.153.Buka browser, lalu ketik

localhost/labkomputasi, lalu tekan ENTER.Secara otomatis akan membuka file index.php di folder lab komputasi/installation. Kemudian, klik Next.

Page 15: MEMBUAT WEBSITE  DENGAN Joomla!
Page 16: MEMBUAT WEBSITE  DENGAN Joomla!

4. Klik Next

Page 17: MEMBUAT WEBSITE  DENGAN Joomla!
Page 18: MEMBUAT WEBSITE  DENGAN Joomla!
Page 19: MEMBUAT WEBSITE  DENGAN Joomla!
Page 20: MEMBUAT WEBSITE  DENGAN Joomla!
Page 21: MEMBUAT WEBSITE  DENGAN Joomla!

Ini adalah username dan password untuk masuk/login ke Administrator Joomla.

Page 22: MEMBUAT WEBSITE  DENGAN Joomla!

Pada tampilan ini anda diminta untuk menghapus folder installation di dalam folder labkomputasi

Buka kembali Windows Explorer dan hapus folder installation di folder labkomputasi

Page 23: MEMBUAT WEBSITE  DENGAN Joomla!
Page 24: MEMBUAT WEBSITE  DENGAN Joomla!
Page 25: MEMBUAT WEBSITE  DENGAN Joomla!

Pertama harus masuk terlebih dahulu ke Adminstrator. Caranya adalah :1. Buka tab browser baru

2. Ketikkan di url address http://localhost/labkomputasi/administrator

3. Akan muncul seperti ini :

Page 26: MEMBUAT WEBSITE  DENGAN Joomla!

4. Masukkan username dan password di login

administrator. Lalu klik Login. Masuklah ke control panel seperti

dibawah :

5. Klik Language Manager

Page 27: MEMBUAT WEBSITE  DENGAN Joomla!

6. Klik New, untuk menambahkan bahasa baru

Page 28: MEMBUAT WEBSITE  DENGAN Joomla!

6. Akan muncul tampilan dibawah ini. Lalu klik Telusur/Browser.

Page 29: MEMBUAT WEBSITE  DENGAN Joomla!
Page 30: MEMBUAT WEBSITE  DENGAN Joomla!
Page 31: MEMBUAT WEBSITE  DENGAN Joomla!

10. Klik opsi Bahasa Indonesia, lalu klik Publish

Page 32: MEMBUAT WEBSITE  DENGAN Joomla!

Template Joomla ! Standar bisa diubah sesuai dengan keinginan kita. Jika tidak mahir dalam bahasa pemrograman dapat menggunakan template yang sudah ada dan bisa di download dari internet.

Berikut ini langkah-langkah modifikasi template Joomla :1. Klik menu Installer -> Template-site

seperti gambar dibawah ini.

Page 33: MEMBUAT WEBSITE  DENGAN Joomla!

2. Klik Telusuri/Browse seperti gambar dibawah ini

Page 34: MEMBUAT WEBSITE  DENGAN Joomla!
Page 35: MEMBUAT WEBSITE  DENGAN Joomla!
Page 36: MEMBUAT WEBSITE  DENGAN Joomla!
Page 37: MEMBUAT WEBSITE  DENGAN Joomla!
Page 38: MEMBUAT WEBSITE  DENGAN Joomla!
Page 39: MEMBUAT WEBSITE  DENGAN Joomla!

• Dari menu yang diberikan oleh Joomla, mungkin banyak yang tidak diperlukan. Anda bisa mengubah namanya atau menonaktifkan jika tidak diperlukan. Untuk modifikasi menu dengan cara :

Klik Menu yang ada di control panel Administrator, lalu pilih mainmenu. Setelah masuk ke halaman Menu Manager [mainmenu], klik tulisan Home dan ganti menjadi HALAMAN UTAMA seperti dibawah ini.

Page 40: MEMBUAT WEBSITE  DENGAN Joomla!

Jika menu lain tidak diperlukan, klik unpublish atau hilangan menu tersebut dengan cara :1.Pada halaman Menu Manager, ceklist item menu yang akan dihilangkan2.Klik ikon Unpublish dibagian atas.

Item menu yang tidak dipakai adalah : Joomla!! Licence, Links, Search, News Feed, FAQs, Wrapper.

Page 41: MEMBUAT WEBSITE  DENGAN Joomla!
Page 42: MEMBUAT WEBSITE  DENGAN Joomla!

Selain main menu, ada juga item menu pada bagian atas yang disebut Top Menu.

Sekarang kita akan mengubah item Top Menu menjadi HALAMAN UTAMA, TENTANG LAB KOMPUTASI dan FORUM LAB KOMPUTASI

Caranya adalah :1. Dari halaman control panel, klik Menu dan

pilih topmenu.

Page 43: MEMBUAT WEBSITE  DENGAN Joomla!

2. Klik Home

Page 44: MEMBUAT WEBSITE  DENGAN Joomla!

3. Ubah menjadi HALAMAN UTAMA

4. Klik Save, tampilan halaman menu Manager pun akan berubah seperti dibawah ini.

Untuk mengatur posisi item Top Menu

Untuk menampilkan atau tidak item Top Menu pd halaman website

Page 45: MEMBUAT WEBSITE  DENGAN Joomla!

Untuk keperluan tertentu, kita perlu menambahkan beberapa menu sesuai dengan kebutuhan.

Caranya adalah :1. Klik ikon menu di halaman Menu Manager

(top menu).

Page 46: MEMBUAT WEBSITE  DENGAN Joomla!
Page 47: MEMBUAT WEBSITE  DENGAN Joomla!

3. Klik Save

Pada Link, ketikkan dulu tanda ‘/’ karena kita akan membuat link halamannya nanti .

Page 48: MEMBUAT WEBSITE  DENGAN Joomla!

Tampilan Top Menu setelah diubah seperti gambar berikut :

Page 49: MEMBUAT WEBSITE  DENGAN Joomla!

Pada sebuah website, biasanya ada profil pemilik website tersebut atau memberikan informasi yang berkaitan dengan website itu.

Caranya adalah :1. Pada control panel, klik Menu lalu pilih

Menu Manager

Page 50: MEMBUAT WEBSITE  DENGAN Joomla!
Page 51: MEMBUAT WEBSITE  DENGAN Joomla!

Dapat kita lihat Menu TENTANG LAB KOMPUTASI yang kita buat sudah ada pada daftar menu, tetapi belum berfungsi. Agar dapat berfungsi seperti yang diharapkan, maka harus memodifikasinya lewat Site Modul.

Page 52: MEMBUAT WEBSITE  DENGAN Joomla!

1. Klik tab Module-> Site Module

2. Klik TENTANG LAB KOMPUTASI

Page 53: MEMBUAT WEBSITE  DENGAN Joomla!
Page 54: MEMBUAT WEBSITE  DENGAN Joomla!

Dengan demikian, menu TENTANG LAB KOMPUTASI sudah dapat berfungsi, tetapi belum ada isinya. Untuk membuat isi menu (content) Tentang Lab Komputasi, klik tab Content dan pilih Static Content Manager

Pilih Static Content ManagerKlik New

Page 55: MEMBUAT WEBSITE  DENGAN Joomla!
Page 56: MEMBUAT WEBSITE  DENGAN Joomla!
Page 57: MEMBUAT WEBSITE  DENGAN Joomla!

Pada bagian select to menu, klik Tentang Lab Komputasi

Ketik nama menu item yaitu Tentang lab Komputasi. Setelah itu , klik Link To Menu

Page 58: MEMBUAT WEBSITE  DENGAN Joomla!
Page 59: MEMBUAT WEBSITE  DENGAN Joomla!

Sorot dan copy alamat yang tampil saat kita mengklik menu Tentang Lab Komputasi. (Bukan yang ada di top menu)

Page 60: MEMBUAT WEBSITE  DENGAN Joomla!

Jadi ketika mengklik TENTANG LAB KOMPUTASI baik yang ada di Top Menu maupun Main Menu, akan menampilkan halaman yang sama.

Page 61: MEMBUAT WEBSITE  DENGAN Joomla!

1. Klik Media Manager pada control panel

Page 62: MEMBUAT WEBSITE  DENGAN Joomla!

3. Pada bagian Create directory, ketik gambarcontent (disarankan tanpa spasi), Kemudian klik ikon create.

Page 63: MEMBUAT WEBSITE  DENGAN Joomla!

5. Klik Telusuri/browse untuk mencari gambar di komputer kita, pada bagian File Upload

Page 64: MEMBUAT WEBSITE  DENGAN Joomla!
Page 65: MEMBUAT WEBSITE  DENGAN Joomla!

Membuat SectionPada website ini akan ditampilkan informasi mengenai buku baru dan buku yang sedang laris dipasaran (Best Seller). Untuk menampilkan informasi tersebut, kita harus membuat dua section. Supaya lebih mudah , kita akan memanfaatkan section yang sudah ada, yaitu The News yang akan diubah menjadi BUKU BARU dan Newsflash diubah menjadi BUKU BEST SELLER.

Langkah-langkahnya adalah :

Page 66: MEMBUAT WEBSITE  DENGAN Joomla!

2. Klik section The News

Page 67: MEMBUAT WEBSITE  DENGAN Joomla!

3. Ubah Title dan section name menjadi BUKU BARU. Pada bagian published, klik option Yes. Lalu klik SAVE

4. Lakukan hal yang sama untuk mengubah Newsflashes menjadi Buku Best Seller

Page 68: MEMBUAT WEBSITE  DENGAN Joomla!

Setelah membuat section Buku Baru dan Buku Best Seller, sekarang kita buat juga kategori buku untuk section buku Baru dan Best Seller.Kategorinya adalah :

Buku Baru (section)- Buku Komputer

- Buku Umum - Buku Teknologi dan Handphone

Page 69: MEMBUAT WEBSITE  DENGAN Joomla!

Buku Best Seller (Section) - Buku Komputer - Buku Umum - Buku Teknologi dan Handphone

Kategori Buku untuk Section Buku Baru Sekarang kita akan membuat kategori di section Buku Baru. Caranya :1.Klik tab Content, pilih Category

Manager.

Page 70: MEMBUAT WEBSITE  DENGAN Joomla!

3. Di halaman Category : New [Content], ketikkan pada : Category Title : Buku Komputer Baru Category Name : Buku Komputer Baru Section : pilih BUKU BARU Published : pilih option Yes Ketikkan pada Description : Buku tentang computer baru terbit

Page 71: MEMBUAT WEBSITE  DENGAN Joomla!

4. Klik SAVE pada pojok kanan atas. Sekarang lakukan hal yang sama untuk membuat kategori Buku Teknologi dan Handphone Terbaru dan Buku Umum Terbaru

Page 72: MEMBUAT WEBSITE  DENGAN Joomla!

Kemudian kita akan menghilangkan kategori yang tidak perlu. Ceklist pada : latest News, Newsflash, dan Example FAQs. Setelah itu klik ikon Unpublished.

Page 73: MEMBUAT WEBSITE  DENGAN Joomla!

Mengisi content pada kategori buku baru. Caranya adalah :1. Klik tab Content->Content by Section->

Buku Baru->Buku Baru items.

Page 74: MEMBUAT WEBSITE  DENGAN Joomla!

3. Lalu isikan Title dan Title Alias dengan BELAJAR MS WORD 2007, Lalu pilih Section dengan BUKU BARU, Category dengan Buku Komputer Baru

Page 75: MEMBUAT WEBSITE  DENGAN Joomla!

4. Isikan Intro Text dan Main Text seperti gambar dibawah :

Page 76: MEMBUAT WEBSITE  DENGAN Joomla!
Page 77: MEMBUAT WEBSITE  DENGAN Joomla!

6. Klik tab Images, lalu pada MOSImage Control, klik combo box Sub-Folder dan pilih folder /gambarcontent

Page 78: MEMBUAT WEBSITE  DENGAN Joomla!
Page 79: MEMBUAT WEBSITE  DENGAN Joomla!
Page 80: MEMBUAT WEBSITE  DENGAN Joomla!

10. Klik tab MetaInfo, lalu klik AddSect/Cat/Title. Akan muncul pada Keyword BUKU BARU (Section), Buku Komputer Baru (Kategori), BELAJAR MS WORD 2007 (Title Content).

Page 81: MEMBUAT WEBSITE  DENGAN Joomla!

11. Klik Tab PublishingJika content ingin ditampilkan di halaman Utama, berikan ceklist

Page 82: MEMBUAT WEBSITE  DENGAN Joomla!
Page 83: MEMBUAT WEBSITE  DENGAN Joomla!

Informasi yang ditampilkan pada website tidak hanya produk

saja, tetapi juga kegiatan yang akan dan telah dilakukan. Untuk itu perlu membuat section informasi dengan

kategori Berita dan Agenda. Caranya seperti yang dijelaskan sebelumnya. Hasilnya di Category Manager menjadi

seperti ini :

Page 84: MEMBUAT WEBSITE  DENGAN Joomla!

1. Klik Content ->Content by Section -> INFORMASI ->INFORMASI Items seperti gambar berikut :

Page 85: MEMBUAT WEBSITE  DENGAN Joomla!

3. Lalu ketikkan pada Title dan Title Alias : AGENDA SEMINAR BUKU MS WORD. Pada Category pilih AGENDA. Lalu intro Text isikan mengenai informasi dari Seminar tersebut sepeti Hari/Tanggal, Waktu, Tempat, dsb. Lalu klik SAVE.

Page 86: MEMBUAT WEBSITE  DENGAN Joomla!

1. Klik NEW, pilih Blog - Content Section dan klik NEXT

Page 87: MEMBUAT WEBSITE  DENGAN Joomla!

3. Pada Menu Manager, terdapat INFORMASI LAB KOMPUTASI

Page 88: MEMBUAT WEBSITE  DENGAN Joomla!
Page 89: MEMBUAT WEBSITE  DENGAN Joomla!
Page 90: MEMBUAT WEBSITE  DENGAN Joomla!
Page 91: MEMBUAT WEBSITE  DENGAN Joomla!
Page 92: MEMBUAT WEBSITE  DENGAN Joomla!
Page 93: MEMBUAT WEBSITE  DENGAN Joomla!
Page 94: MEMBUAT WEBSITE  DENGAN Joomla!
Page 95: MEMBUAT WEBSITE  DENGAN Joomla!
Page 96: MEMBUAT WEBSITE  DENGAN Joomla!
Page 97: MEMBUAT WEBSITE  DENGAN Joomla!
Page 98: MEMBUAT WEBSITE  DENGAN Joomla!

Setelah selesai melakukan perubahan setting silahkan save changes