Dari pemula sampai mahir dalam Opencart: Pengembangan Lainnya Pada Modul

Artikel ini adalah bagian dari seri yang disebut: Dari pemula sampai mahir dalam Opencart.

• Dari pemula sampai mahir dalam Opencart: Pengembangan Modul

Selamat datang kembali di seri OpenCart ini. Terima kasih karena Anda masih setia untuk mengikuti artikel ini sampai pada tahap ini. Dalam artikel sebelumnya tentang pengembangan modul, kita telah berhasil membangun modul "Hello World" pertama kita dengan menggunakan struktur MVC (Model-View-Controller) sehubungan dengan dasbor.

Pada artikel ini, kita akan membangun modul agar tampil pada front-end situs Anda. Saya sarankan Anda meninjau artikel sebelumnya jika Anda belum membacanya. Banyak pengembang takut mengembangkan modul untuk OpenCart, karena mereka pertama kali mencari modul yang tersedia di pasar, tetapi sebenarnya sangat mudah untuk mengembangkan modul itu sendiri jika Anda ingin sedikit mempelajarinya.

Seperti yang Anda ketahui, kita telah berhasil membangun modul sederhana dengan mengambil satu input dari halaman back-end dan menyimpannya ke dalam database.

Gambar 70. Modul "Hello World"

Contoh kolom pada modul "Hello World" adalah sebagai berikut;

1. Module Name: Modul Hello World
2. Hello World Code: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta tellus in hendrerit pellentesque. Donec accumsan tellus vitae porta pulvinar. Vivamus pharetra libero eget diam tempor euismod. Donec quis velit tempus, eleifend est maximus, cursus odio. Maecenas id tellus velit. Curabitur et enim aliquet, tristique metus hendrerit, faucibus justo. Proin rhoncus enim quis lorem interdum, sit amet feugiat orci tincidunt.
3. Status: Enabled

Setelah itu, simpan! Dan pada halaman Modules, Anda akan melihat notifikasi Success: You have modified HTML Content module!, seperti gambar di bawah ini.

Gambar 71. Notifikasi berhasil setelah mengubah/memodifikasi modul

Tata Letak Modul (Module Layouts)

Setelah tadi kita telah berhasil membuat dan menyimpan satu modul untuk situs Opencart, kita tidak akan bisa langsung melihat atau belum bisa langsung menampilkan modul tersebut pada front-end kita. Untuk bisa menampilkannya, kita harus masuk ke halaman pengaturan untuk tata letak front-end situs kita terlebih dahulu. Pada halaman tersebut, dapat kita lihat semua halaman situs. Di sana, kita bisa menambahkan atau mengubah ataupun menghapus tata letak yang tidak diperlukan sesuai dengan nama halaman situs. Selanjutnya bisa Anda eksplor sendiri untuk mendapatkan pengertian yang lebih jelas mengenai halaman tata letak ini, sekarang mari kita lanjutkan untuk mengatur tata letak untuk modul kita.

Masuk ke halaman Design > Layouts, lalu pilih edit pada Account.

Gambar 72. Menu Design > Layouts

Di sinilah kita akan menambahkan modul "Hello World" kita agar dapat tampil pada halaman Account di front-end situs kita.

Gambar 73. Tata letak untuk halaman Account

Untuk meletakan modul kita pada halaman Account, kita akan coba meletakan modul kita pada posisi kanan (Column Right). Klik tombol "+" untuk menambahkan baru, lalu pilih Modul Hello World seperti gambar di bawah ini.

Gambar 74. Klik tombol Add Module

Gambar 75. Pilih modul Modul Hello World

Setelah selesai, jangan lupa klik tombol Save untuk menyimpan perubahan tata letak ini. Seperti pada umumnya, setiap kali kita menyimpan suatu pekerjaan dari setiap fitur/halaman menu, maka kita akan mendapatkan notifikasi untuk memberitahukan kepada kita bahwa kita telah berhasil mengubah/memodifikasinya.

Gambar 76. Notifikasi berhasil setelah mengubah/memodifikasi tata letak

Baiklah, sekarang kita sudah benar-benar menyelesaikan pekerjaan kita pada halaman admin situs Opendart kita, selanjutnya kita akan membuat pengontrolnya untuk halaman front-end situs kita agar modul yang telah kita buat bisa tersinkronisasi antara pengaturan pada back-end dapat berjalan dengan baik pada front-end.

Membuat File Pengontrol (Controller) Front-end

Dalam pembuatan pengontrol (controller), sebelumnya sudah saya bahas, dan setiap pengontrol memiliki kelas (class) umum yang sama pada Opencart. Bagi Anda yang belum jelas atau melewatkan mengenai pengontrol (controller) ini, Anda bisa mengikutinya pada artikel Konvensi Penamaan Kelas OpenCart.

1. Arahkan ke catalog/controller/extension/module dan buat file PHP baru.

2. Beri nama file helloworld.php.

3. Buka file Anda dan gunakan Konvensi Penamaan Kelas OpenCart, yaitu; class ControllerExtensionModuleHelloworld extends Controller {}.

4. Buat fungsi default OpenCart di dalam kelas, yaitu; public function index($setting) {}.

5. Di dalam fungsi default index(), tulis kode seperti di bawah ini:

		$this->load->language('extension/module/helloworld'); // Untuk memuat file bahasa

		$data['code'] = html_entity_decode($setting['code'], ENT_QUOTES, 'UTF-8'); // untuk mendapatkan nilai yang disimpan dari kolom Hello World Code pada admin modul "Hello World" dan parsing ke variabel untuk menggunakan ini di dalam tampilan modul

		return $this->load->view('extension/module/helloworld', $data); // Jalur untuk template modul

Dan kita telah selesai membuat pengontrol modul untuk front-end Opencart kita.

Membuat File Penampil (View) Front-end

1. Arahkan ke folder template default toko Anda, yaitu; catalog/view/theme/default/template/extension/module.

2. Buat file template baru.

3. Beri nama helloworld.twig.

4. Tuliskan kode HTML di dalam file tersebut sebagai berikut:

<div>
  <h2>{{ heading_title }}</h2>
  {{ code }}
</div>

Membuat File Bahasa (Language) Front-end

1. Buat file bahasa helloworld.php di dalam catalog/language/en-gb/extension/module Anda.

2. Tambahkan variabel berikut untuk ditampilkan pada modul kita:

<?php
// Heading
$_['heading_title']     = 'Modul Hello World';

Apa yang Baru Saja Kita Lakukan?

Pada dasarnya, modul Opencart bekerja hanya karena membutuhkan inputan dari dasbor dan menampilkannya di front-end situs. Dalam hal ini, kita juga telah menambahkan beberapa data sebagai pembelajaran dari Modul Hello World pada halaman back-end dan mengatur tata letak dan posisi di mana modul harus ditampilkan. Dalam kasus ini, tata letak tersebut adalah halaman akun (account) dan posisinya berada di sebelah Kanan Kolom (Column Right).

Menguji Modul Buatan Sendiri

Pekerjaan untuk menulis modul untuk front-end toko kita telah selesai. Tetapi jangan pernah berasumsi bahwa ini pasti bekerja sebelum Anda benar-benar telah menguji kodenya bekerja dengan baik.

1. Anda dapat menuju ke halaman akun (account) dari bagian kaki situs Anda atau masukan tautan berikut pada peramban Anda http://localhost/OpencartStore/index.php?route=account/account.

2. Pada halaman tersebut, modul kita harus berada dalam posisi yang ditentukan sesuai dengan gambar berikut:

Gambar 77. Tampilan Modul Hello World pada halaman account

Selamat! Modul ini muncul di posisi yang benar dan dalam tata letak yang benar. Ini berarti bahwa semua pekerjaan Anda baik-baik saja. Anda juga dapat memeriksa apakah modul Anda muncul di Tata Letak halaman lain atau tidak (jika Anda juga menambahkannya pada halaman lain). Jika Anda telah mengikuti langkah yang benar, maka itu juga harus muncul di sana.

Kesimpulan

Pada titik ini, Anda telah melakukan pekerjaan paling signifikan dalam seri pengembangan OpenCart. Seperti yang saya sebutkan dalam pengenalan artikel ini, mengembangkan modul untuk OpenCart cukup mudah bagi pemula untuk mengambilnya dan memulai.

Dalam artikel-artikel berikutnya, saya akan mencoba untuk menjelaskan lebih banyak mengenai Opencart dan juga mengenai pengembangan lebih lanjut untuk CMS Opencart. Semoga tutorial-tutorial dari seri lanjutan di atas cukup untuk menambahkan sedikit keberanian Anda untuk mengeksplor dalam membuat sebuah ekstensi Opencart. Jangan takut untuk mencoba dan terus belajar, jika ada kesalahan atau masalah yang terjadi. Saya akan coba membantu Anda semampu yang saya ketahui dan mohon maaf apabila ada kekurangan dalam penulisan.

Jika Anda menyukai artikel saya, berikan umpan balik Anda menggunakan kolom komentar di bawah ini.