Dari pemula sampai mahir dalam Opencart: Pengembangan Lainnya Pada Modul

Ini adalah artikel terakhir dari seri lanjutan dalam pengembangan Opencart. Pada artikel ini, Anda sudah dapat membuat dan menampilkan modul sendiri pada situs Opencart Anda.

Dari pemula sampai mahir dalam Opencart: Pengembangan Lainnya Pada Modul

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

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.

Tutorial Opencart

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.

Tutorial Opencart

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.

Tutorial Opencart

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.

Catatan: Opencart memiliki 4 posisi tata letak untuk setiap halaman situsnya, yaitu; posisi kiri (Column Left), posisi atas (Content Top), posisi bawah (Content Bottom), dan posisi kanan (Column Right).

Tutorial Opencart

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.

Tutorial Opencart

Gambar 74. Klik tombol Add Module

Tutorial Opencart

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.

Tutorial Opencart

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.

Perhatikan bahwa penting untuk membaca keterangan dari setiap baris kode di atas untuk memahami pekerjaan apa yang sedang dilakukan.

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';
Catatan: Jika situs Anda menggunakan multibahasa, letakkan file bahasa pada semua bahasa Anda.

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:

Tutorial Opencart

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.

Sumber Artikel : https://code.tutsplus.com/articles/from-beginner-to-advanced-in-opencart-more-module-development--cms-22289

URL Singkat :
DirZn

DirZn

Saya adalah seorang pengembang web lepas dengan semangat untuk terus belajar. Saya sangat menyukai dunia pemograman dengan menggunakan bahasa php yang sudah sangat lama saya pelajari. Melalui situs ini juga saya akan banyak berbagi kepada Anda semua.

Lihat semua artikel saya

Artikel Terkait

Komentar