Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cara Membuat Template Joomla Pertama Anda

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dalam tutorial ini, Anda akan belajar tentang dasar-dasar template Joomla, dan membuat satu dari awal. Kita akan segera melalui instalasi server lokal dan Joomla itu sendiri, dan kemudian membuat template yang berfungsi dasar.


1. Persiapan

Sebelum memulai template kita, ada beberapa hal yang perlu disiapkan.
Sama seperti kebanyakan CMS, Joomla membutuhkan server dengan PHP dan MySQL terinstal. Menginstal yang di atas secara manual bisa sangat menyebalkan dan, jujur saja, buang-buang waktu (kecuali jika Anda ingin masuk ke bagaimana hal itu dilakukan dengan tepat).
Apa yang akan kita lakukan adalah mengunduh penginstal tunggal untuk semua hal di atas yang akan menancapkan server lokal di sistem Anda dan memberi Anda panel kontrol yang sangat bagus juga.

Jadi pergilah ke WAMP dan unduh versi terbaru. (MAMP untuk Mac)

Setelah installer diunduh, jalankan dan install WAMP di tempat yang mudah diingat. Jika semua sesuai rencana Anda akan melihat folder bernama : wamp

Anda sekarang juga harus memiliki ikon di bar notifikasi Anda (di mana jam berada) yang memberi Anda akses ke panel kontrol WAMP. Anda dapat menggunakan ini untuk beberapa hal, termasuk me-restart server.


2. Mengunduh dan menginstal Joomla

Sekarang setelah server kita terinstal, kita bisa mendapatkan Joomla dan mengaturnya. Pergi ke Joomla dan unduh rilis terbarunya.

Sebelum kita lanjutkan, mari kita lihat folder wamp kita lagi. Di dalamnya Anda akan menemukan sekumpulan folder, tapi yang kita minati adalah folder www.
Ini adalah root dari setup server Anda dan ini adalah di mana kita akan menginstal Joomla. (catatan: Anda dapat menginstal sebanyak mungkin salinan Joomla di sini sesuai keinginan Anda, atau hal lain dalam hal ini)

Jadi, ekstrak unduhan Joomla ke folder www. Saya biasanya mengganti namanya pada titik ini dengan nama situs saya atau hanya mempersingkatnya menjadi joomla.

Joomla sekarang ada di server kita. Namun ada satu hal terakhir yang perlu kita lakukan sebelum menginstal, dan itu untuk membuat database. Buka browser Anda dan masuk ke http://localhost.
Di sini Anda akan menemukan area admin server Anda, di sinilah kita membuat database kita.

Untuk membuat database, klik pada phpmyadmin di bawah bagian Alias Anda.

Untuk tutorial ini kita akan memanggil database kita joomla. Anda tidak akan membuat pengguna dengan kata sandi di sini, alih-alih menggunakan rincian pengguna root. Sangat disarankan agar Anda membuat pengguna dengan kata kunci yang kuat dalam situasi sebenarnya.

Sekarang kita punya sebuah database, kita bisa mulai menginstal Joomla. Jalankan browser Anda dan masuk ke http://localhost/joomla (atau apa pun yang Anda sebut situs Anda saat mengekstraknya.)

Layar pertama sudah cukup jelas. Pilih bahasa dan tekan next.

Layar berikutnya yang Anda lihat adalah daftar pemeriksaan Pra-Instal. Ini adalah daftar item dan pengaturan yang dibutuhkan agar Joomla berhasil diinstal. Pastikan Anda memiliki konfigurasi yang diperlukan dan klik next.

Pada halaman berikutnya, baca lisensinya dengan saksama, dan, bila sudah siap klik next dan masukkan rincian yang dibutuhkan (Host Name: localhost, Username: root, no password dan joomla sebagai Database name), dan tekan next.

Lewati layar FTP Configuration dengan mengklik next dan pada halaman berikutnya, masukkan nama situs Anda, alamat email dan pilih kata sandi. Ini akan menjadi password yang akan Anda gunakan untuk masuk ke area admin joomla beserta dengan username: admin.
Kita tidak akan memasang data sampel sekarang juga, karena kita ingin menambahkan modul satu per satu untuk melihat bagaimana template kita masuk nanti di tut. Klik next.

Selamat! Joomla sudah siap dan berjalan, tapi sebelum kita bisa masuk dan bermain-main kita harus menghapus folder instalasi. Jadi pergi ke folder www Anda di dalam wamp, dan kemudian masuk ke folder joomla dan hapus folder instalasi


3. Melihat lebih dekat pada Joomla

Akhir-akhir ini sulit untuk masuk ke diskusi Open Source CMS tanpa disebutkan nama Joomla.
Penginstalannya bersama panel admin intuitif membuatnya sangat populer di kalangan pengguna yang mencari CMS mudah sementara, pada saat bersamaan, dikemas dengan fitur yang
ribuan pengembang sibuk membangun aplikasi dan modulnya. Jika perlu, terbiasalah dengan back end (saya merekomendasikan artikel Joomla 101 singkat ini di blog Themeforest untuk mendapatkan nuansa cepat.)

Untuk mengunjungi situs Anda, klik preview di sudut kanan atas area admin. Apa yang akan Anda dapatkan adalah template default tanpa konten dan modul yang paling mendasar dimuat.


4. Template

Untuk mulai memahami struktur template, mari kita lihat yang default. Masuklah ke folder www Anda, lalu di dalam folder joomla Anda harus melihat folder template.
(wamp/www/joomla/templates). Di sinilah semua template yang berbeda berada. Anda dapat beralih di antara template di panel admin.

Di dalam folder template, Anda akan melihat folder untuk setiap template yang terinstal. Joomla dilengkapi dengan tiga template: beez, rhuk_milkyway dan ja_purity. Ingat lokasi ini karena di sinilah Anda akan memasang template baru Anda di masa mendatang.

Meskipun sebagian besar template terdiri dari beberapa file, hanya dua yang dibutuhkan untuk membuat template bekerja. Mereka adalah:

  • index.php
  • templateDetails.xml

Yang pertama - index.php - adalah tempat semua markup berada dimana Anda memasukkan Joomla include. Ini bisa dilihat sebagai kait kecil dimana joomla menutup informasi, seperti modul misalnya

File kedua adalah templateDetails.xml. Anda bisa melihat ini sebagai daftar instruksi ke Joomla. Daftar ini harus menyertakan nama template, nama file yang digunakan dalam template (gambar dll..) Dan posisi yang ingin Anda gunakan (include yang disebutkan di atas.)

Di atas adalah contoh file templateDetails.xml. Seperti yang bisa Anda lihat, ini adalah daftar spesifik yang memberi tahu Joomla tentang template-nya, seperti nama, pencipta, tanggal dibuat, dll...
Perhatikan bagian positions pada kode di atas. Inilah posisi yang kita bicarakan sebelumnya, include.
Ada yang cukup jelas, seperti footer.
Jika Anda meletakkan include footer joomla di area footer dari desain Anda, Anda akan dapat mengendalikan beberapa aspek footer menggunakan back end Joomla. Mari kita mencoba dan menggabungkan template sederhana.


5. Memulai template

Mari kita melakukan beberapa persiapan sehingga kita memiliki sesuatu untuk dikerjakan. Buka folder template Anda, dan buat folder baru. Mari kita menyebutnya template_tut.

Di dalam folder baru Anda, buatlah sebuah file bernama index.php, dan yang lainnya disebut templateDetails.xml (copy/paste kode pada contoh di atas di dalamnya).

Buka file index.php Anda di notepad atau apapun yang Anda gunakan untuk mengedit kode, dan copy/paste yang berikut ini:

Kita memiliki DOCTYPE, kode PHP untuk bahasanya, dan di bagian head Joomla include pertama kita. Ini bukan dalam daftar xml karena ini bukan sebuah position.

Apa yang dilakukan ini adalah menyertakan kode header joomla (yang menyertakan judul halaman), dan banyak hal lain yang mungkin bisa mengisi setengah tutorialnya sendiri.

Selesaikan markup pada halaman dengan menambahkan tag body dan menutup tag html.


6. Menggunakan template

Setelah kita memiliki file dasar yang ada, mari tambahkan include lagi, kali ini untuk menampilkan konten utama dari setiap halaman yang ditampilkan.

Anda sekarang harus memiliki ini di index.php Anda

Sebelum kita menguji template kita, mari tambahkan artikel jadi kita punya beberapa konten. Pastikan WAMP berjalan dan masuk ke area admin Anda di Joomla dengan http://localhost/joomla/administrator

Sekarang masukkan rincian login Anda

Buka Content di menu dan kemudian ke Article Manager di drop down

Klik New untuk menambahkan artikel

Berikan judul artikel Anda, isikan sebuah alias, pastikan dipublikasikan ke halaman depan dan tekan save

Mari kita lihat seperti apa artikel kita di halaman depan. Klik preview di pojok kanan atas setelah menyimpan. Anda harus melihat halaman depan situs Anda dengan teks Anda.

Sekarang setelah kita mempublikasikan konten, mari kita lihat apakah template yang kita buat benar-benar berfungsi. Kembali ke area admin Anda dan klik Extensions dan kemudian Template Manager

Anda harus melihat template_tut dalam daftar, jadi silakan pilih, dan atur sebagai default.

Tekan preview dan periksa template baru yang bagus. Nah mungkin tidak begitu bagus tapi itu template joomla pertama Anda. YAY!


7. Menambahkan beberapa isi ke template kita

Kita membuat template kita bekerja, ini mengambil informasi header termasuk judul dan menampilkan konten yang kita buat di back end joomla. Sebelum menambahkan lebih banyak include lagi, mari kita lihat lebih dekat pada include module position; yang kita namai dalam file xml kita.

Mereka disertakan dengan cara berikut:

Jadi untuk menambahkan, misalnya, posisi kiri, index.php kita akan terlihat seperti ini:

Sementara kita berada di itu, mari kita tambahkan posisi footer

Jika Anda kembali ke area admin Anda, dan pergi ke Module Manager Anda akan melihat modul yang ada di sana, modul Main Menu. Modul ini terinstal meski kita memilih untuk menginstal versi sederhana Joomla.

Menu sudah terkait ke posisi kiri (yang baru kita masukkan ke dalam template kita), jadi mari kita lihat seperti apa tampilannya. Tekan preview

Seperti yang bisa Anda lihat, sekarang kita memiliki menu dengan tautan ke Home. Anda dapat menambahkan lebih banyak item menu dan menautkan ke konten yang berbeda melalui Menu Manager.

Mari kita mendapatkan footer yang bekerja. Buka Module Manager, klik new dan pilih Footer. Kemudian tekan next.

Pada halaman berikut, berikan modul baru judulnya: Footer, dan pada dropdown Position, pilih Footer.

Klik save dan kemudian preview halamannya.
Anda sekarang juga harus melihat informasi footer pada template Anda.


8. Menambahkan lebih banyak posisi dan modul

Mari kita menata halaman kita sedikit sehingga kita bisa melihat apa yang kita lakukan. Di folder template_tut Anda membuat folder baru dan namakan "CSS", dan buatlah sebuah file di dalamnya yang disebut 'template.css"

Masukkan include di index.php di beberapa div dan bungkus semuanya di div kontainer dan kemudian tautkan style sheet Anda seperti contohnya. Jangan ragu untuk menyalin tata letak berantakan saya jika Anda belum menggunakan salah satu dari milik Anda sendiri. Saya melakukan ini benar-benar cepat untuk tutorial ini.

dan CSS

Mari kita mengaitkan sidebar kanan dan header dengan posisi. Tambahkan posisi top ke posisi header dan posisi kanan ke side bar kanan.

Sekarang mari kita membuat modul untuk kedua posisi tersebut. Pergi ke area admin Joomla, login jika perlu, dan masuk ke Module Manager di bawah menu drop down Extensions. Anda harus melihat Main Menu dan Footer yang kita buat sebelumnya. Ikuti langkah yang sama untuk membuat dua modul lagi. Modul Search yang akan Anda tempatkan di posisi teratas, dan modul Login yang akan Anda tempatkan pada posisi kanan.

Pratinjau halaman Anda, Anda sekarang harus memiliki bar pencarian di header dan form login di sidebar kanan Anda. Ini cukup banyak dasar-dasar template Joomla. Anda menciptakan posisi dalam desain Anda, seperti kaitan kecil untuk Joomla untuk mengirim info, yang dalam kebanyakan kasus Anda buat di back end. Anda bisa menerapkannya pada hampir semua desain dengan menggunakan banyak posisi yang ditawarkan Joomla. Saya harap ini berguna bagi Anda semua, ingatlah bahwa ini adalah hal yang sangat mendasar, template Joomla dapat dibuat serumit dan sekuat yang Anda inginkan.

  • Berlangganan Feed RSS NETTUTS untuk tutorial dan artikel pengembangan web harian lainnya.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.