[SHARE] Cara Membuat Modul Di OpenCart (Basic)

[gangsar.swapurba]

Cara untuk membuat modul untuk OpenCart secara garis besar dibagi menjadi dua langkah:

Untuk bagian Admin
Untuk bagian Front

Pada contoh kali ini, saya akan membuat modul dengan nama Halo. File yang harus dibuat pertama-tama adalah:

• /catalog/language/bahasa_kita/module/halo.php
• /catalog/view/template/module/halo.tpl
• /catalog/controller/module/halo.php
• /admin/language/bahasa_kita/module/halo.php
• /admin/view/template/module/halo.tpl
• /admin/controller/module/halo.php

Kita mulai untuk membuat bagian front-nya dulu:

Untuk Bagian Front:

Secara garis besar, file yang harus di-edit ada 3, yaitu:

• /catalog/language/bahasa_kita/module/halo.php
• /catalog/view/template/module/halo.tpl
• /catalog/controller/module/halo.php
  

Pertama, kita bayangkan tulisan apa saja yang nanti akan tampil di modul halo ini. Misalnya:

cara_membuat_modul_opencart_2.GIF (5.82 KiB) Viewed 7590 times

lalu kita isi variabel di /language/bahasa_kita/module/halo.php. Seperti di bawah ini:

Code: Select all


<?php
// Heading 
$_['heading_title']  = 'Halo ...';

// Text
$_['text_halo']  = 'Halo, ';
$_['text_tamu']  = 'Fren';
$_['text_login']  = 'Login';
$_['text_logout']  = 'Logout';

?>


Kedua, kita edit file /catalog/view/template/module/halo.tpl.

Code: Select all


<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
      <?php echo $text_halo . $text_nama?>
      <?php if (!$logged) { ?>
      <a href="<?php echo $login; ?>"><?php echo $text_login; ?></a> dulu <?php echo $text_nama; ?> ... 
      <?php } else { ?>
      <a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a>
      <?php } ?>
  </div>
</div> 


Ketiga, untuk bagian controllernya yaitu yang ada di /catalog/controller/module/halo.php kita ubah seperti di bawah ini: (penjelasannya ada di listing kodenya)

Code: Select all


<?php  
class ControllerModuleHalo extends Controller {
    protected function index() {
        
        /**
         * load ini mengambil dari /catalog/language/bahasa_kamu/module/halo.php.
         * jadi, kalo mau me-load bestseller caranya ya: $this->language->load('module/bestseller').
         */
        $this->language->load('module/halo');
        
        /**
         * semua variabel yang akan berlaku nanti di template yang akan kita gunakan harus di masukkan dalam variabel $this->data.
         * jadi kalau ingin menggunakan variabel $cocok = 'Aku cocok sama Kamu.' di template nanti, maka harus kita wrap variabel cocok itu dalam variabel $this->data. jadinya seperti ini:
         * @example $this->data['cocok'] = 'Aku cocok sama Kamu.'
         */
        $this->data['heading_title'] = $this->language->get('heading_title');
        
        $this->data['text_login'] = $this->language->get('text_login');
        $this->data['text_logout'] = $this->language->get('text_logout');
        $this->data['text_halo'] = $this->language->get('text_halo');
        
        /**
         * $this->customer diambil dari /system/library/customer dan ini terload otomatis pada saat sistem mulai bekerja (autoload) mirip seperti fitur yang ada di CodeIgniter. 
         */
        $this->data['text_nama'] = $this->customer->isLogged() ? $this->customer->getFirstName() : $this->language->get('text_tamu');
        $this->data['login'] = $this->url->link('account/login', '', 'SSL');
        $this->data['logout'] = $this->url->link('account/logout', '', 'SSL');
        $this->data['logged'] = $this->customer->isLogged();
        
        /**
         * di sini kita meload file yang akan dijadikan template oleh kita. mudah sekali membacanya & basic sekali untuk programmer php.
         */
        if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/halo.tpl')) {
            $this->template = $this->config->get('config_template') . '/template/module/halo.tpl';
        } else {
            $this->template = 'default/template/module/halo.tpl';
        }
        
        /**
         * yang terakhir adalah render(). untuk lebih detailnya bisa lihat di /system/engine/controller.php pada fungsi render().
         */
        $this->render();
    }
}
?>


[gangsar.swapurba]

Untuk Bagian Admin:

Sekarang kita masuk ke bagian admin. Menurut Saya, bagian admin inilah yang agak rumit (menurut pendapat saya, sih). Oke, keep stay tune on this tutorial, wohkey...

Untuk bagian admin juga, secara garis besar, file yang harus di-edit ada 3, yaitu:

• /admin/language/bahasa_kita/module/halo.php
• /admin/view/template/module/halo.tpl
• /admin/controller/module/halo.php

Misi kita kali ini adalah agar pada halaman edit modulnya agar seperti gambar di bawah ini:

cara_membuat_modul_opencart_1.GIF (18.8 KiB) Viewed 7588 times

Pertama, kita tentukan variabel-variabel yang akan digunakan di halaman admin untuk modul ini. Ubah file admin/language/bahasa_kita/module/halo.php

Code: Select all


<?php
// Heading
$_['heading_title'] = 'Halo';

// Teks
$_['text_module'] = 'Halo';
$_['text_success']= 'Berhasil: Anda berhasil mengubah modul Halo!';
$_['text_content_top']= 'Content Top - Atas';
$_['text_content_bottom'] = 'Content Bottom - Bawah';
$_['text_column_left']= 'Column Left - Kiri';
$_['text_column_right'] = 'Column Right - kanan';

// Entry
$_['entry_layout']= 'Layout:';
$_['entry_position']= 'Posisi:';
$_['entry_status']= 'Status:';
$_['entry_sort_order']= 'Urutan Pengurutan:';

// Error
$_['error_permission']= 'Peringatan: Anda tidak memiliki wewenang untuk mengubah modul Halo!';
?>


Kedua, kita ubah template yang ada di /admin/view/template/module/halo.tpl. Bagian inilah yang menurut pendapat saya agak rumit (karena membutuhkan skill desain yang mumpuni).

Kebetulan file yang mau saya edit ini agak sama dengan file template dari modul Information. Jadi saya hanya mengubah beberapa bagian saja. Dan kalau kita lihat sekilas perbedaannya menggunakan winDiff atau program "peng-compare-an" lainnya, terlihat perbedaannya hanya pada <div class="content"> saja. seperti yang saya ambil screenshotnya di bawah ini:

cara_membuat_modul_opencart_3.GIF (55.59 KiB) Viewed 7588 times

Tapi ini hanya pada kasus ini saja, modul yang lain seperti: bestseller & lainnya pasti lah berbeda. File /admin/view/template/module/halo.tpl-nya kita ubah seperti di bawah ini:

Code: Select all


<?php echo $header; ?>
<div id="content">
<div class="breadcrumb">
  <?php foreach ($breadcrumbs as $breadcrumb) { ?>
  <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
  <?php } ?>
</div>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
  <div class="heading">
    <h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
    <div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><?php echo $button_cancel; ?></a></div>
  </div>
  <div class="content">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
      <table id="module" class="list">
        <thead>
          <tr>
            <td class="left"><?php echo $entry_layout; ?></td>
            <td class="left"><?php echo $entry_position; ?></td>
            <td class="left"><?php echo $entry_status; ?></td>
            <td class="right"><?php echo $entry_sort_order; ?></td>
            <td></td>
          </tr>
        </thead>
        <?php $module_row = 0; ?>
        <?php foreach ($modules as $module) { ?>
        <tbody id="module-row<?php echo $module_row; ?>">
          <tr>
            <td class="left"><select name="halo_module[<?php echo $module_row; ?>][layout_id]">
                <?php foreach ($layouts as $layout) { ?>
                <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                <?php } else { ?>
                <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                <?php } ?>
                <?php } ?>
              </select></td>
            <td class="left"><select name="halo_module[<?php echo $module_row; ?>][position]">
                <?php if ($module['position'] == 'content_top') { ?>
                <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                <?php } else { ?>
                <option value="content_top"><?php echo $text_content_top; ?></option>
                <?php } ?> 
                <?php if ($module['position'] == 'content_bottom') { ?>
                <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                <?php } else { ?>
                <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                <?php } ?> 
                <?php if ($module['position'] == 'column_left') { ?>
                <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                <?php } else { ?>
                <option value="column_left"><?php echo $text_column_left; ?></option>
                <?php } ?>
                <?php if ($module['position'] == 'column_right') { ?>
                <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                <?php } else { ?>
                <option value="column_right"><?php echo $text_column_right; ?></option>
                <?php } ?>
              </select></td>
            <td class="left"><select name="halo_module[<?php echo $module_row; ?>][status]">
                <?php if ($module['status']) { ?>
                <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                <option value="0"><?php echo $text_disabled; ?></option>
                <?php } else { ?>
                <option value="1"><?php echo $text_enabled; ?></option>
                <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                <?php } ?>
              </select></td>
            <td class="right"><input type="text" name="halo_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
            <td class="left"><a onclick="$('#module-row<?php echo $module_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
          </tr>
        </tbody>
        <?php $module_row++; ?>
        <?php } ?>
        <tfoot>
          <tr>
            <td colspan="4"></td>
            <td class="left"><a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a></td>
          </tr>
        </tfoot>
      </table>
    </form>
  </div>
</div>
<script type="text/javascript"><!--
var module_row = <?php echo $module_row; ?>;

function addModule() {   
    html  = '<tbody id="module-row' + module_row + '">';
    html += '  <tr>';
    html += '    <td class="left"><select name="halo_module[' + module_row + '][layout_id]">';
    <?php foreach ($layouts as $layout) { ?>
    html += '      <option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>';
    <?php } ?>
    html += '    </select></td>';
    html += '    <td class="left"><select name="halo_module[' + module_row + '][position]">';
    html += '      <option value="content_top"><?php echo $text_content_top; ?></option>';
    html += '      <option value="content_bottom"><?php echo $text_content_bottom; ?></option>';
    html += '      <option value="column_left"><?php echo $text_column_left; ?></option>';
    html += '      <option value="column_right"><?php echo $text_column_right; ?></option>';
    html += '    </select></td>';
    html += '    <td class="left"><select name="halo_module[' + module_row + '][status]">';
    html += '      <option value="1" selected="selected"><?php echo $text_enabled; ?></option>';
    html += '      <option value="0"><?php echo $text_disabled; ?></option>';
    html += '    </select></td>';
    html += '    <td class="right"><input type="text" name="halo_module[' + module_row + '][sort_order]" value="" size="3" /></td>';
    html += '    <td class="left"><a onclick="$(\'#module-row' + module_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>';
    html += '  </tr>';
    html += '</tbody>';
   
    $('#module tfoot').before(html);
   
    module_row++;
}
//--></script>
<?php echo $footer; ?>


Ketiga, untuk bagian /admin/controller/module/halo.php. Sebelumnnya kita lihat dulu hal-ihwal sebenarnya dari Class Controller (bisa lihat di http://www.opencart.com/index.php?route ... h=77_43_45) hanyalah Class biasa yang hanya terdiri dari variabel $error & function index().

Code: Select all


<?php class ControllerModuleName extends Controller {
private $error = array();
public function index() {
}
} ?>


Kalo dilihat dari kebanyakan modul opencart yang sudah ada, Class ini hanya terdiri dari 2 fungsi, , yaitu:
fungsi index() & fungsi validate().
Fungsi index() biasanya yang untuk melakukan proses utama. Sedangkan fungsi validate() itu yang untuk memvalidasi apakah user itu memiliki permisi yang cukup atau tidak untuk mengubah-ubah pengaturan modul ini.

Dari contoh modul-modul yang sudah ada, Saya lihat kebanyakan modul menerapkan langkah-langkah seperti berikut:

• meload language
• meload model
• validasi permisi user
• isi variabel-variabel yang penting / yang akan digunakan di template
• buat breadcumbs
• inject variabel-variabel tadi yang sudah dibuat ke template
• render

Lebih baik, kita menggunakan pola yang sudah dibuat oleh modul-modul sebelumnya saja agar tidak repot, agar kita hanya tinggal mengganti & menambahkan yang diperlukan saja.

Untuk file controller modul Halo ini, setelah saya edit mencontoh dari modul Information, bentuknya seperti di bawah ini:

Code: Select all

<?php
class ControllerModuleHalo extends Controller {
   private $error = array();
   
   public function index() {   
      $this->load->language('module/halo');

      $this->document->setTitle($this->language->get('heading_title'));
      
      $this->load->model('setting/setting');
            
      if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
         $this->model_setting_setting->editSetting('halo', $this->request->post);      
               
         $this->session->data['success'] = $this->language->get('text_success');
                  
         $this->redirect($this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'));
      }
            
      $this->data['heading_title'] = $this->language->get('heading_title');

      $this->data['text_enabled'] = $this->language->get('text_enabled');
      $this->data['text_disabled'] = $this->language->get('text_disabled');
      $this->data['text_content_top'] = $this->language->get('text_content_top');
      $this->data['text_content_bottom'] = $this->language->get('text_content_bottom');      
      $this->data['text_column_left'] = $this->language->get('text_column_left');
      $this->data['text_column_right'] = $this->language->get('text_column_right');
      
      $this->data['entry_layout'] = $this->language->get('entry_layout');
      $this->data['entry_position'] = $this->language->get('entry_position');
      $this->data['entry_status'] = $this->language->get('entry_status');
      $this->data['entry_sort_order'] = $this->language->get('entry_sort_order');
      
      $this->data['button_save'] = $this->language->get('button_save');
      $this->data['button_cancel'] = $this->language->get('button_cancel');
      $this->data['button_add_module'] = $this->language->get('button_add_module');
      $this->data['button_remove'] = $this->language->get('button_remove');
      
       if (isset($this->error['warning'])) {
         $this->data['error_warning'] = $this->error['warning'];
      } else {
         $this->data['error_warning'] = '';
      }

        $this->data['breadcrumbs'] = array();

         $this->data['breadcrumbs'][] = array(
             'text'      => $this->language->get('text_home'),
         'href'      => $this->url->link('common/home', 'token=' . $this->session->data['token'], 'SSL'),
            'separator' => false
         );

         $this->data['breadcrumbs'][] = array(
             'text'      => $this->language->get('text_module'),
         'href'      => $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'),
            'separator' => ' :: '
         );
      
         $this->data['breadcrumbs'][] = array(
             'text'      => $this->language->get('heading_title'),
         'href'      => $this->url->link('module/account', 'token=' . $this->session->data['token'], 'SSL'),
            'separator' => ' :: '
         );
      
      $this->data['action'] = $this->url->link('module/account', 'token=' . $this->session->data['token'], 'SSL');
      
      $this->data['cancel'] = $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL');

      $this->data['modules'] = array();
      
      if (isset($this->request->post['halo_module'])) {
         $this->data['modules'] = $this->request->post['halo_module'];
      } elseif ($this->config->get('halo_module')) {
         $this->data['modules'] = $this->config->get('halo_module');
      }   
      
      $this->load->model('design/layout');
      
      $this->data['layouts'] = $this->model_design_layout->getLayouts();
                  
      $this->template = 'module/halo.tpl';
      $this->children = array(
         'common/header',
         'common/footer'
      );
            
      $this->response->setOutput($this->render());
   }
   
   private function validate() {
      if (!$this->user->hasPermission('modify', 'module/halo')) {
         $this->error['warning'] = $this->language->get('error_permission');
      }
      
      if (!$this->error) {
         return true;
      } else {
         return false;
      }   
   }
}
?>


Kita lihat hasilnya di halaman Extensions ==> Module ==> Halo -> Edit. Kalo ga ada masalah, kita tambahkan modulnya di situ dan terapkan layout Home dan posisinya di atas saja (untuk mencoba dulu).

cara_membuat_modul_opencart_4.GIF (29.12 KiB) Viewed 7588 times

Kalau Kita lihat di halaman Home & terpampang modul seperti di bawah ini:



Berarti Kita sudah berhasil... Merdeka...
Begitulah kira-kira dasar cara membuat modul di OpenCart. Selesai...

Yang lain kalo ada yang ingin menambahkan, silahkan...

Cek juga di http://www.opencart.com/index.php?route ... h=77_43_45

[screenager8]

Bagus bagus. Sebagai designer, bener2 gk ngerti kalau di controller itu cuma ada 2 fungsi. Lanjutkan!

[45101K]

Cocok ini untuk di ikuti teruskan mas gangsar.swapurba


saya nyelam sambil minum kopi nich

[qahar]

Bagus tutorialnya..

[gangsar.swapurba]

yo'i abang-abang semua... monggo direview lagi, takut ada yang salah...

[bogalakon]

Fantastik...

Kurang dikit tuh kayaknya mastah: <?php echo $text_halo . $text_nama?>

[gangsar.swapurba]

Oke om, yang sebelah mananya om.... biar nanti langsung dibenerin...

[TheCovenant]

ajib...se ajib-ajib nya..

baru basic aja ane udah bijimana kalo udah advance yahhh...

[gangsar.swapurba]

Ah, bro TheCovenant, kayaknya bro TheCovenant ini "katak dalam tempurung" nih...

Cuman pengen sharing aja kok...

[gangsar.swapurba]

O, ya... Ada tambahan lagi.

Ketika mengerjakan proyek yang berbasis MVC, teman-teman jangan melihat kesemuanya dengan sekali lihat. Mulailah dulu dari M[odel] misalnya, jika sudah, setelah itu, baru V[iew] kita bereskan, setelah itu menuju C[ontroller]. Urutan pengerjaan seperti ini, hanya dimaksudkan agar teman-teman tidak keblinger karena melihat proyek secara keseluruhan. Metode ini juga worthy untuk mempelajari kode proyek orang lain yang berbasis MVC juga. Jadi, keuntungannya adalah kita dapat melihat secara sebagian-sebagian sehingga kita bisa lebih fokus pada apa yang sedang kita garap terlebih dahulu.

Urutan pengerjaan di atas pun dapat diubah oleh keinterestan teman-teman, sesuai keinginan teman-teman. Misalnya kita fokus ke V[iew] dulu, baru C[ontroller], setelah itu M[odel].

Happy Coding...

[miss_pricella]

thx a lot bwt om gangsar.swapurba its so very2 help me....boleh tanya ya ...aq lagi bwt form baru tapi aq bingung ga pernah ke detect url nya:(..yg om kasih itu aq cuman pake frontnya aja..apa ngaruh kalo ga pake adminnya? ..puyeng

[miss_pricella]

udah dapet jawaban dan A VERY BIG HELP dari master gangsar.swapurba..jawabannya harus dipake adminnya untuk meregistrasi modul baru hehe....aduhhh thx alot banget tiada tara...:big hug: ...

[Djengkol]

ada niat buat bikin modul bahasa SUNDA cuma rada bingung di pengaturan (Setting->Localisations->Languanges) pas bagian LOCALE..kalo buat english kan en_US.UTF-8,en_US,en-gb,english nah kalo buat sunda gmana gan kira-kira..
cita-cita ogut membangun suatu webstore yang mempunyai nilai budaya..

[gangsar.swapurba]

ayo lanjut ...

[qahar]

Urutan pengerjaan di atas pun dapat diubah oleh keinterestan teman-teman, sesuai keinginan teman-teman. Misalnya kita fokus ke V[iew] dulu, baru C[ontroller], setelah itu M[odel].

Selalu mulai dari Controller bro. Karena Controller yang menentukan Model and Language apa saja yang mau dipanggil. Termasuk template (View) yang ingin digunakan.

Terlebih lagi MVC Opencart itu menggunakan pola Hierarchy MVC.

1. Coba aja cek di catalog\controller\common\home.php ada $this->children.
2. Kalau di buka catalog\controller\common\header.php, di dalamnya memanggil child 'module/language' (hanya ada di 1.5.2.x)

[gangsar.swapurba]

Njeh ... njeh ... njeh ... Matur Suwun

[gangsar.swapurba]

Iya, tapi masalahnya, kayaknya modul di OpenCart kurang portable kayak plugin di W**dp***s. Jadi, user ketika menghapus folder pluginnya, ya selesai. Lha, kalo OpenCart

(Di luar topik sih ... )

[qahar]

Ya itu karena Opencart belum memiliki hook dan pendekatan MVC-nya juga berbeda.
Beberapa diskusi mengenai ini: Coding Standards Improvement Proposal dan Ideas for OpenCart 2.0

[gangsar.swapurba]

Njeh njeh njeh ... Matur suwun ...