Page 1 of 1

[TUTORIAL] Membuat halaman Custom pada Menubar

Posted: Wed Aug 14, 2013 8:49 pm
by DirZn
Sedikit berbagi nih dari apa yang saya sudah lakukan pada template OC buatan saya sendiri.

Sesuai subjek, di sini saya coba berbagi sedikit dengan sebisa mungkin dengan cara yang mudah dimengerti dan jelas.
Sebelumnya mohon dikoreksi juga kalo ada perintah yang salah pada tips yang saya bagi ini.
Okay lets start now...!

Pertama:
Buat table untuk database, sebagai contoh halaman yang akan kita buat adalah about us atau tentang kami.

Code: Select all

CREATE TABLE IF NOT EXISTS `about` (
  `about_id` int(11) NOT NULL AUTO_INCREMENT,
  `sort_order` int(3) NOT NULL DEFAULT '0',
  `status` tinyint(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`about_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=18 ;

Code: Select all

CREATE TABLE IF NOT EXISTS `about_description` (
  `about_id` int(11) NOT NULL,
  `language_id` int(11) NOT NULL,
  `title` varchar(64) COLLATE utf8_bin NOT NULL DEFAULT '',
  `description` text COLLATE utf8_bin NOT NULL,
  PRIMARY KEY (`about_id`,`language_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Code: Select all

CREATE TABLE IF NOT EXISTS `about_to_layout` (
  `about_id` int(11) NOT NULL,
  `store_id` int(11) NOT NULL,
  `layout_id` int(11) NOT NULL,
  PRIMARY KEY (`about_id`,`store_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Code: Select all

CREATE TABLE IF NOT EXISTS `about_to_store` (
  `about_id` int(11) NOT NULL,
  `store_id` int(11) NOT NULL,
  PRIMARY KEY (`about_id`,`store_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
Berikutnya:
Copy-paste semua folder/file root information:

  • OC/admin/controller/catalog/information.php
    OC/admin/language/bahasa/catalog/information.php
    OC/admin/model/catalog/information.php
    OC/admin/view/template/catalog/information_list.tpl
    OC/admin/view/template/catalog/information_form.tpl
  • OC/catalog/controller/information/information.php
    OC/catalog/language/bahasa/information/information.php
    OC/catalog/model/catalog/information.php
    OC/catalog/view/theme/*template_kamu/template/information/information.tpl
[/b]

Setelah kita dapat copy-an dari semua file di atas, sekarang ubah semua nama information menjadi about, maka hasilnya kita akan mendapatkan:

  • OC/admin/controller/catalog/about.php
    OC/admin/language/bahasa/catalog/about.php
    OC/admin/model/catalog/about.php
    OC/admin/view/template/catalog/about_list.tpl
    OC/admin/view/template/catalog/about_form.tpl
  • OC/catalog/controller/information/about.php
    OC/catalog/language/bahasa/information/about.php
    OC/catalog/model/catalog/about.php
    OC/catalog/view/theme/*template_kamu/template/information/about.tpl
[/b]

Berikutnya,
  • Kita buka semua file dimulai dari urutan paling atas. Copy-paste (CTRL + A) + (CTRL + C) pada setiap file di atas satu persatu.
    Buka NotePad kamu dan paste (CTRL + V) + (CTRL + S)
    Dan masih di NotePad tekan lagi (CTRL + H), setelah keluar jendela baru, pada kolom Find What: masukan information. Lalu tekan tab pada keyboard dan kita akan pindah pada kolom berikutnya yaitu Replace with: lalu masukan kata about, klik tombol Replace All dan tekan keyboard (CTRL + C).
    Buka kembali file di atas sesuai urutan pada file dimana sebelumnya kamu Copy untuk diubah atau (replace kata information menjadi about), tekan (CTRL + V).
Lakukan kembali hal yang sama pada setiap file information, sesuai urutan di atas. Setelah selesai, maka kamu sekarang sudah mendapatkan halaman baru pada OC kamu. Tapi halaman tersebut belum tampil pada halaman frontend (halaman muka) pada situs OC kamu.

Sekarang langkah berikutnya, buka:
  • OC/catalog/controller/common/header.php
    OC/catalog/language/bahasa/common/header.php
    OC/catalog/view/theme/*template_kamu/template/common/header.tpl
Cari kode:

Code: Select all

			$this->data['logo'] = '';
		}
Masukan kode beikut setelah kode di atas.

Code: Select all

		$this->load->model('catalog/about');
		$this->data['abouts'] = array();

		foreach ($this->model_catalog_about->getAbouts() as $result) {
      		$this->data['abouts'][] = array(
        		'title' => $result['title'],
	    		'href'  => $this->url->link('information/about', 'about_id=' . $result['about_id'])
      		);
    	}
Cari kode:

Code: Select all

		$this->data['text_home'] = $this->language->get('text_home');
Dan masukan kode berikut dibawahnya.

Code: Select all

		$this->data['text_about'] = $this->language->get('text_about');
Sekarang buka OC/catalog/language/bahasa/common/header.php dan tambahkan kode di bawah ini sebelum tag penutup php yaitu ?>

Code: Select all

$_['text_about']			= 'Tentang Kami';
Langkah terakhir, buka OC/catalog/view/theme/*template_kamu/template/common/header.tpl.

Cari kode:

Code: Select all

    <li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
Masukan kode berikut dibawahnya.

Code: Select all

    <?php if ($abouts) { ?>
    <li><a href="javascript:openPage()"><?php echo $text_about; ?></a>
    <div>
    <ul>
    <?php foreach ($abouts as $about) { ?>
    <li><a onclick="location='<?php echo $about['href']; ?>'"><?php echo $about['title']; ?></a></li>
    <?php } ?>
    </ul>
    </div>
    </li>
    <?php } ?>
SELESAI !!!

Yup, akhirnya kamu mendapatkan halaman pribadi dan contoh di atas bisa sebagai contoh awal untuk membuat halaman custom lainnya pada OpenCart kamu. Mohon dikoreksi kalo ada kesalahan, terima kasih... ;)

Re: [TUTORIAL] Membuat halaman Custom pada Menubar

Posted: Wed Apr 22, 2015 9:27 am
by dafelina
Mau tanya gan,

di baris terakhir yang menambahkan code di header.tpl

<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>

Itu kok tidak ada ya kalau di template yang digunakan ?

Mohon pencerahannya gan...soalnya kalau tidak ada code itu front end tidak tampil.... ???

Re: [TUTORIAL] Membuat halaman Custom pada Menubar

Posted: Thu Jun 18, 2015 2:05 pm
by jonsemar
dafelina wrote:Mau tanya gan,

di baris terakhir yang menambahkan code di header.tpl

<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>

Itu kok tidak ada ya kalau di template yang digunakan ?

Mohon pencerahannya gan...soalnya kalau tidak ada code itu front end tidak tampil.... ???
Coba agan lihat code-code agan, apakah ada kesalaahn sewaktu memasukan code tersebut. Biasanya itu kadang terjadi jika agan salah masukin code hehe

Re: [TUTORIAL] Membuat halaman Custom pada Menubar

Posted: Mon Jun 29, 2015 3:02 pm
by deva09
Wah ada yang mau berbagi tutorial. Saya izin simpan ya... Lumayan saya bisa menambahkannya di website saya. Semoga saja tampilannya bisa cocok dan pas dengan konsep website saya yang berisi informasi tentang mesin fotokopi. Terimakasih sharenya ya mas. ;D