Dari pemula sampai mahir dalam Opencart: Pengembangan Modul

22 March, 2018
01 May, 2018
DirZn
4407
0

Mari kita mulai untuk melangkah lebih jauh, artikel ini akan membawa Anda untuk bisa menjadi pengembang Opencart. Anda bisa mulai membuat sebuah ekstensi untuk Opencart Anda.

Dari pemula sampai mahir dalam Opencart: Pengembangan Modul

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

Dalam artikel sebelumnya, kita memeriksa arsitektur MVC dan membuat pengontrol (Controller), model (Model), dan tampilan pertama kita di aplikasi OpenCart. Kita melakukan ini untuk membantu mendapatkan pemahaman yang lebih baik tentang aplikasi inti.

Untuk melangkah lebih jauh, kita akan melihat pembuatan modul khusus untuk OpenCart.

Apa itu Modul OpenCart?

Modul OpenCart sama seperti add-ons, plugin, atau ekstensi pada CMS pada umumnya. Melalui modul, OpenCart memberi kita kemampuan untuk memperluas fungsionalitasnya tanpa harus mengedit file aplikasi.

Seperti pada CMS lainnya, itu umumnya dianggap sebagai praktik terbaik untuk memperluas fungsionalitas aplikasi inti melalui API yang disediakan dan sama halnya juga dengan OpenCart yang tidak jauh berbeda. Modul memungkinkan kita untuk memperkenalkan, menghapus, atau memodifikasi/mengubah fungsionalitas aplikasi inti yang dilakukan dengan cara yang dapat dikompensasikan dan dipelihara.

OpenCart memiliki Pasar Ekstensi sendiri di mana sejumlah besar ekstensi sudah tersedia. Atau Anda dapat memeriksa berbagai modul OpenCart dan ekstensi melalui situs ini.

Gambar 65. Marketplace Opencart

Jika Anda membutuhkan ekstensi tertentu untuk dipasang pada Opencart Anda, Anda bisa menggunakan jasa kami untuk membuatkannya melalui halaman ini, atau Anda tetap bisa membuatnya sendiri.

Modul Pertama Kita

Agar terbiasa dengan sistem modul OpenCart, kita bisa menulis modul "Hello World" yang wajib. Ini akan mengambil input dari dashboard dan menampilkannya di front-end situs Opencart Anda.

Perhatikan bahwa OpenCart memiliki sejumlah modul pre-build (atau masih dalam tahap pembuatan). Dengan demikian, kita akan mencoba memanfaatkannya jika memungkinkan untuk dapat dikerjakan sendiri. Untuk memulai, lakukan yang berikut:

Buat sebuah file Controller di direktori Admin: admin/controller/extension/module/helloworld.php.
Buat sebuah file Language di direktori Admin: admin/language/en-gb/extension/module/helloworld.php.
Buat sebuah file View di direktori Admin: admin/view/template/extension/module/helloworld.twig.

File Bahasa (Language)

Sebagaimana dibahas dalam artikel sebelumnya, file bahasa berisi teks statis apa yang harus ditampilkan dalam file tampilan pada situs. Untuk file bahasa helloworld.php, variabel berikut ini berisi kemungkinan bidang teks yang kita perlukan untuk ditampilkan pada modul kita:

<?php
// Heading
$_['heading_title']     = 'Hello World';
 
// Text
$_['text_extension']    = 'Extensions';
$_['text_success']      = 'Success: You have modified HTML Content module!';
$_['text_edit']         = 'Edit HTML Content Module';
 
// Entry
$_['entry_name']        = 'Module Name';
$_['entry_code']        = 'Hello World Code';
$_['entry_status']      = 'Status';
 
// Error
$_['error_permission']  = 'Warning: You do not have permission to modify module Hello World!';
$_['error_name']        = 'Module Name must be between 3 and 64 characters!';
$_['error_code']        = 'Code Required';

File Pengontrol (Controller)

Buka file pengontrol "Hello World" yang baru saja kita buat dan sekarang tambahkan kelas; class ControllerExtensionModuleHelloworld extends Controller {} mengikuti Konvensi Penamaan Kelas. Selanjutnya, letakkan kode berikut di dalam class.

Langkah 1. Fungsi Bawaan (Default Function)

private $error = array();

	public function index() {
		$this->load->language('extension/module/helloworld');

		$this->document->setTitle($this->language->get('heading_title'));

		$this->load->model('setting/module');

		if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
			if (!isset($this->request->get['module_id'])) {
				$this->model_setting_module->addModule('helloworld', $this->request->post);
			} else {
				$this->model_setting_module->editModule($this->request->get['module_id'], $this->request->post);
			}

			$this->session->data['success'] = $this->language->get('text_success');

			$this->response->redirect($this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module', true));
		}

		if (isset($this->error['warning'])) {
			$data['error_warning'] = $this->error['warning'];
		} else {
			$data['error_warning'] = '';
		}

		if (isset($this->error['name'])) {
			$data['error_name'] = $this->error['name'];
		} else {
			$data['error_name'] = '';
		}

		if (isset($this->error['code'])) {
			$data['error_code'] = $this->error['code'];
		} else {
			$data['error_code'] = '';
		}

		$data['breadcrumbs'] = array();

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_home'),
			'href' => $this->url->link('common/dashboard', 'user_token=' . $this->session->data['user_token'], true)
		);

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_extension'),
			'href' => $this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module', true)
		);

		if (!isset($this->request->get['module_id'])) {
			$data['breadcrumbs'][] = array(
				'text' => $this->language->get('heading_title'),
				'href' => $this->url->link('extension/module/helloworld', 'user_token=' . $this->session->data['user_token'], true)
			);
		} else {
			$data['breadcrumbs'][] = array(
				'text' => $this->language->get('heading_title'),
				'href' => $this->url->link('extension/module/helloworld', 'user_token=' . $this->session->data['user_token'] . '&module_id=' . $this->request->get['module_id'], true)
			);
		}

		if (!isset($this->request->get['module_id'])) {
			$data['action'] = $this->url->link('extension/module/helloworld', 'user_token=' . $this->session->data['user_token'], true);
		} else {
			$data['action'] = $this->url->link('extension/module/helloworld', 'user_token=' . $this->session->data['user_token'] . '&module_id=' . $this->request->get['module_id'], true);
		}

		$data['cancel'] = $this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module', true);

		if (isset($this->request->get['module_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) {
			$module_info = $this->model_setting_module->getModule($this->request->get['module_id']);
		}

		if (isset($this->request->post['name'])) {
			$data['name'] = $this->request->post['name'];
		} elseif (!empty($module_info)) {
			$data['name'] = $module_info['name'];
		} else {
			$data['name'] = '';
		}

		if (isset($this->request->post['code'])) {
			$data['code'] = $this->request->post['code'];
		} elseif (!empty($module_info)) {
			$data['code'] = $module_info['code'];
		} else {
			$data['code'] = '';
		}

		if (isset($this->request->post['status'])) {
			$data['status'] = $this->request->post['status'];
		} elseif (!empty($module_info)) {
			$data['status'] = $module_info['status'];
		} else {
			$data['status'] = '';
		}

		$data['header'] = $this->load->controller('common/header');
		$data['column_left'] = $this->load->controller('common/column_left');
		$data['footer'] = $this->load->controller('common/footer');

		$this->response->setOutput($this->load->view('extension/module/helloworld', $data));
	}

Langkah 2. Perintah Validasi (Validation)

Saat kita mencoba memvalidasi data untuk disimpan dalam fungsi default. Berikut inilah perintah validasinya.

protected function validate() {
		if (!$this->user->hasPermission('modify', 'extension/module/helloworld')) {
			$this->error['warning'] = $this->language->get('error_permission');
		}

		if ((utf8_strlen($this->request->post['name']) < 3) || (utf8_strlen($this->request->post['name']) > 64)) {
			$this->error['name'] = $this->language->get('error_name');
		}

		if (!$this->request->post['code']) {
			$this->error['code'] = $this->language->get('error_code');
		}

		return !$this->error;
	}

Sekarang simpan file helloworld.php dan Anda sudah selesai dengan Pengontrol Admin dari Modul Hello World!

File Penampil (View)

Seperti yang sebelumnya dilakukan di pengontrol, Anda harus membuat file TWIG untuk tampilannya. Untuk itu, kita akan melakukan hal-hal berikut:

Info: Sejak Opencart merilis versi 3, maka untuk file tampilannya sudah tidak lagi menggunakan file dengan ekstensi TPL, tetapi sudah menggunakan ekstensi TWIG. Menurut saya secara pribadi, ekstensi TWIG justru lebih mudah digunakan, jadi bagi yang belum familiar dengan tipe ekstensi ini, Anda bisa lebih jauh mempelajarinya dengan mencari informasi sebanyak-banyaknya melalui mesin pencari, karena pada tutorial kita kali ini, saya tidak akan menjelaskan mengenai hal ini.

Langkah 1. Kontrol dasar pada bagian kepala file

Sebelum masuk ke bagian form, Anda harus memahami terlebih dahulu bahwa setiap file view, akan selalu ada perintah {{ header }} & perintah {{ footer }} untuk mendapatkan kontrol header & kontrol footer dan kode tersebut selalu sama dan harus diletakan pada kepala dan kaki dari setiap file View yang Anda buat.

Untuk membuat kontrol dasar header helloworld.twig sebelum form, lihat kode di bawah ini:

{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">×</button>
    </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
      </div>
      <div class="panel-body">

Langkah 2. Kontrol dasar pada form

form adalah elemen yang akan berisi kolom seperti kolom input teks, textarea, dan tombol untuk menyimpan atau membatalkan inputan.

Untuk membuat formulir seperti ini, lihat kode di bawah ini:

        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
            <div class="col-sm-10">
              <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
              {% if error_name %}
              <div class="text-danger">{{ error_name }}</div>
              {% endif %}
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-code">{{ entry_code }}</label>
            <div class="col-sm-10">
              <textarea name="code" placeholder="{{ entry_code }}" id="input-code" data-toggle="summernote" class="form-control">{{ code }}</textarea>
              {% if error_code %}
              <div class="text-danger">{{ error_code }}</div>
              {% endif %}
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
            <div class="col-sm-10">
              <select name="status" id="input-status" class="form-control">
                {% if status %}
                <option value="1" selected="selected">{{ text_enabled }}</option>
                <option value="0">{{ text_disabled }}</option>
                {% else %}
                <option value="1">{{ text_enabled }}</option>
                <option value="0" selected="selected">{{ text_disabled }}</option>
                {% endif %}
              </select>
            </div>
          </div>
        </form>

Langkah 3. Kontrol dasar pada bagian kaki file

Setelah bagian form, Anda juga harus memahami bahwa setiap sintaks HTML harus ada penutupnya, yang artinya, ketika membuat sintaks pembuka < > berarti juga harus ada sintaks penutup </>.

Untuk membuat kontrol dasar footer helloworld.twig sesudah form, lihat kode di bawah ini:

      </div>
    </div>
  </div>
  <link href="view/javascript/codemirror/lib/codemirror.css" rel="stylesheet" />
  <link href="view/javascript/codemirror/theme/monokai.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script> 
  <script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"></script> 
  <script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"></script> 
  <script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
  <link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/summernote/summernote-image-attributes.js"></script>
  <script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>
</div>
{{ footer }}

Pada titik ini, kita sudah selesai menyiapkan modul Hello World pertama kita. Pada titik ini, saatnya untuk memeriksa apakah modul tersebut berfungsi atau tidak.

Untuk melakukan itu, silahkan login terlebih dahulu ke halaman dasbor back-end Opencart Anda dan masuk ke halaman Extensions > Extensions, lalu pilih opsi Modules seperti pada gambar 67 di bawah.

Gambar 66. Menu Extensions > Extensions

Setalah Anda berada pada halaman modules di mana Anda akan melihat daftar modul OpenCart. Setelah itu, gulir ke bawah dan cari modul yang telah Anda buat yaitu modul "Hello World".

Gambar 67. Pilih opsi Modules

Setelah Anda menemukannya klik tombol "+" warna hijau untuk "Install" modul dan Anda akan melihat layar seperti ini:

Gambar 68. Klik tombol "+" warna hijau untuk "Install"

Kemudian, untuk bisa membuat modul ini bisa tampil pada halaman front-end Anda, maka terlebih dahulu buat satu modul "Hello World" ini dengan klik tombol Edit.

Gambar 69. Halaman modul "Hello World"

Isilah modul tersebut sesuai dengan keinginan Anda. Di dalam modul ini, kita membuat 3 kolom, yaitu;

Module Name ini adalah kolom untuk nama modul Anda.
Hello World Code ini adalah kolom untuk teks atau deskripsi modul Anda.
Status ini adalah kolom untuk mengaktifkan atau menonaktifkan modul Anda.

Pada kolom Hello World Code, Anda bisa mencobanya dengan mengetik kata apa saja pada kolom ini. Setelah selsai, jangan lupa untuk klik tombol simpan (Save).

Ringkasan

Dalam artikel ini, kita telah berhasil membuat sebuah Modul OpenCart yang sederhana dengan menggunakan struktur MVC. Sangat mudah untuk memanipulasi Modul OpenCart jika Anda akrab dengan konsep inti MVC. Artikel ini hanya memberikan ide dasar bagaimana mengembangkan modul sederhana mengikuti beberapa langkah sederhana.

Dalam artikel berikutnya, kita akan mulai bekerja dengan front-end dan akan mencoba untuk memperluasnya untuk toko online Anda. Silahkan berikan komentar Anda terkait dengan artikel ini melalui kolom komentar di bawah ini!

Sumber Artikel : https://code.tutsplus.com/tutorials/from-beginner-to-advanced-in-opencart-module-development--cms-21873

URL Singkat :