Prestashop : Struktur Dasar dan Konfigurasi - Bag.2

3:16 PM | Labels: CSS Series, HTML Series, Javascript, PHP Code, PrestaShop, Script code, Website engineering

Sama seperti pada semua script PHP, Prestashop loading website menggunakan SATU file index.php. Misalnya toko online pakai theme Prestashop. Artinya semua file .php, .tpl, .html dan file lainnya beserta semua folder dalam CMS Prestashop ditempatkan di toko tersebut. Kita tidak membicarakan file Index.php, file .html atau .tpl secara detail. Kita hanya peduli dengan pemahaman bagaimana PrestaShop bekerja. Untuk menguatkan pemahaman saya ulang lagi esensi Bagian SATU.

CARA KERJA

Saat Anda masukkan URL www.bajuditoko.com atau www.lovingprize.com di address bar, webserver akan loading halaman index (index.php) dan mengubahnya menjadi informasi yang menentukan isi webpage. File index.php ini termasuk di dalamnya file config.inc.php yang ada di direktori config.

Pengaturan konfigurasi Prestashop diperankan oleh config.inc.php untuk seluruh konfigurasi dan setting. File config.inc.php memeriksa apakah semuanya sudah ter-install dan mendefinisikan template dasar (base theme), default direktori beserta alurnya (paths), status order dan lainnya.

Misalnya, kita akan sering mengubah kode pada baris 29 isi file config.inc.php :

@ini_set('display_errors', 'off'); menjadi @ini_set('display_errors', 'on');

untuk mengaktifkan “Error Reporting” - saat menginginkan pesan error ditampilkan di webpage untuk mengetahui diagnosa error. (setelah diagnosa didokumentasikan, segera kembalikan lagi status off).

Ketika file config (di folder config) dimuat (loaded), maka file index.php diperintahkan untuk menyertakan file header.php yang diambil langsung dari root install. Yang dimaksud dengan root install berarti langsung diambil dari Prestashop, bukan dari dalam subdirektori yang ada.

INDEX.PHP
Isi file index,php (v1.1.0.5) pada Prestashop secara garis besar meliputi kode berikut:

<?php
include(dirname(__FILE__).'/config/config.inc.php');
include(dirname(__FILE__).'/header.php');
$smarty->assign('HOOK_HOME', Module::hookExec('home'));
$smarty->display(_PS_THEME_DIR_.'index.tpl');
include(dirname(__FILE__).'/footer.php');
?>

HEADER.PHP
Isi file header.php secara garis besar meliputi kode berikut:

<?php
// P3P Policies (http://www.w3.org/TR/2002/REC-P3P-20020416/#compact_policies)
header('P3P: CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"');
require_once(dirname(__FILE__).'/init.php');
/* CSS */
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';
/* Hooks are voluntary out the initialize array (need those variables already assigned) */
$smarty->assign(array(
    'HOOK_HEADER' => Module::hookExec('header'),
    'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
    'HOOK_TOP' => Module::hookExec('top'),
    'static_token' => Tools::getToken(false),
    'token' => Tools::getToken(),
    'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
    'content_only' => intval(Tools::getValue('content_only'))
));
if(isset($css_files) AND !empty($css_files)) $smarty->assign('css_files', $css_files);
if(isset($js_files) AND !empty($js_files)) $smarty->assign('js_files', $js_files);
/* Display a maintenance page if shop is closed */
if (isset($maintenance) AND (!isset($_SERVER['REMOTE_ADDR']) OR $_SERVER['REMOTE_ADDR'] != Configuration::get('PS_MAINTENANCE_IP')))
{
    header('HTTP/1.1 503 temporarily overloaded');
    $smarty->display(_PS_THEME_DIR_.'maintenance.tpl');
    exit;
}
$smarty->display(_PS_THEME_DIR_.'header.tpl');
?>

HOOK
Baris kode ini:

$smarty->assign('HOOK_HOME', Module::hookExec('home'));

akan menentukan Hook (Hook memungkinkan administrator situs untuk menentukan di lokasi mana mereka ingin modul tertentu ditampilkan di webpage).
DISPLAY
Baris kode ini:

$smarty->display(_PS_THEME_DIR_.'index.tpl');

mengatakan tentang tampilan index.tpl dari direktori default theme. Prestashop (Anda menentukan theme untuk digunakan dengan pergi ke Back Office >>Preferances >> appearance).
FOOTER.PHP
Baris kode ini:

include(dirname(__FILE__).'/footer.php');

mengatakan tentang php yang mencakupi file footer.php dari direktori kita (dirname).
File footer.php secara garis besar mencakup kode berikut:

<?php
if (isset($smarty))
{
    $smarty->assign(array(
        'HOOK_RIGHT_COLUMN' => Module::hookExec('rightColumn'),
        'HOOK_FOOTER' => Module::hookExec('footer'),
        'content_only' => intval(Tools::getValue('content_only'))));
    $smarty->display(_PS_THEME_DIR_.'footer.tpl');
}
?>

FILE TPL

Setiap file diatas terkandung request PHP untuk memasukkan file lain. Meski ada pengaturan konfigurasi Prestashop, tapi Hooks dan file-file php belum punya HTML. Di sinilah diperlukan peranan file tpl.

File tpl adalah file template yang mencakup HTML dan kode Smarty.

File tpl sebagian besar ada di direktori theme, namun ada juga di modul karena setiap penulisan modul diperlukan file template (tpl) tersendiri.

Jika melihat header.php, Anda temukan bahwa file tersebut meliputi kode berikut:

$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';
if(isset($css_files) AND !empty($css_files)) $smarty->assign('css_files', $css_files);
if(isset($js_files) AND !empty($js_files)) $smarty->assign('js_files', $js_files);
$smarty->display(_PS_THEME_DIR_.'maintenance.tpl'); - Will display a maintenance page called maintenance.tpl if your shop is closed */
$smarty->display(_PS_THEME_DIR_.'header.tpl');

Isi kode diatas bisa dijelaskan sebagai berikut:

File global.css sedang dipanggil dari direktori theme Prestashop untuk itu diperlukan file-file CSS lain dan JavaScript yang sudah terkandung di dalamnya.

$smarty->display(_PS_THEME_DIR_.'maintenance.tpl'); - Akan menampilkan halaman pemeliharaan yang disebut maintenance.tpl jika toko online ditutup */

Tampilan HTML (yaitu bagian layout halaman web) berasal dari file header.tpl.

Kesimpulan Singkat

Index.php memanggil index.tpl dan file footer.php dan juga memanggil (atau meminta) footer.tpl.
Perlu diketahui bahwa file-file tpl menentukan layout situs html kita dan ada dalam folder theme.
File index.php meliputi header.php, index.tpl dan footer.tpl dari direktori theme.
Kemudian header.php memanggil header.tpl dan footer.php juga memanggil footer.tpl.
Kesimpulan akhir : HTML utama berasal dari ke-3 file template: index.tpl, header.tpl dan footer.tpl

Agar semuanya masuk akal mari kita buka header.tpl, index.tpl dan footer.tpl secara bersamaan.

Header.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
    <head>
        <base href="{$protocol}{$smarty.server.HTTP_HOST|escape:'htmlall':'UTF-8'}{$base_dir}" />
        <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:htmlall:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:htmlall:'UTF-8'}" />
{/if}
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta name="generator" content="PrestaShop" />
        <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico" />
        <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />
{if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}
    <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
    {/foreach}
{/if}
        <script type="text/javascript" src="{$base_dir}js/tools.js"></script>
        <script type="text/javascript">
            var baseDir = '{$base_dir}';
            var static_token = '{$static_token}';
            var token = '{$token}';
            var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
        </script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.2.6.pack.js"></script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery.easing.1.3.js"></script>
{if isset($js_files)}
    {foreach from=$js_files item=js_uri}
    <script type="text/javascript" src="{$js_uri}"></script>
    {/foreach}
{/if}
        {$HOOK_HEADER}
    </head>
    <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
    {if !$content_only}
        <div id="page">
            
            <div>
                <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
                <div id="header">
                    {$HOOK_TOP}
                </div>
            </div>
            
            <div id="left_column" class="column">
                {$HOOK_LEFT_COLUMN}
            </div>
            
            <div id="center_column">
    {/if}

Index.tpl

{$HOOK_HOME}

Footer.tpl

{if !$content_only}
            </div>

            <div id="right_column" class="column">
                {$HOOK_RIGHT_COLUMN}
            </div>

            <div id="footer">{$HOOK_FOOTER}</div>
        </div>
    {/if}
    </body>
</html>

Kesimpulannya :

Kita bisa melihat SUMBER DARI HOMEPAGE (semua modulnya dalam kondisi un-instal dan ada sedikit JavaScript yang dihapus dari footer sehingga kita bisa fokus pada HTML-nya saja) BERASAL DARI FILE TPL UTAMA.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="http://127.0.0.1/prestashop/" />
    <title>Prestashop demo</title>
    <meta name="description" content="Shop powered by PrestaShop" />
    <meta name="keywords" content="shop, prestashop" />
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="generator" content="PrestaShop" />
    <meta name="robots" content="index,follow" />
    <link rel="icon" type="image/vnd.microsoft.icon" href="/prestashop/img/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="/prestashop/img/favicon.ico" />
    <link href="/prestashop/themes/commotion/css/global.css" rel="stylesheet" type="text/css" media="all" />
        <script type="text/javascript" src="/prestashop/js/tools.js"></script>
        <script type="text/javascript">
            var baseDir = '/prestashop/';
            var static_token = '8d6a4d79d983512d770333775a7d8d24';
            var token = '521aacf70fb52a35b4f94e01366c4c64';
            var priceDisplayPrecision = 2;
        </script>
        <script type="text/javascript" src="/prestashop/js/jquery/jquery-1.2.6.pack.js"></script>
        <script type="text/javascript" src="/prestashop/js/jquery/jquery.easing.1.3.js"></script>
</head>
    <body id="index">
            <div id="page">
            
            <div>
                <h1 id="logo"><a href="/prestashop/" title="Prestashop demo"><img src="/prestashop/img/logo.jpg" alt="Prestashop demo" /></a></h1>
                <div id="header">
                </div>
            </div>
            
            <div id="left_column" class="column">
            </div>
            
            <div id="center_column">
                     </div>

            <div id="right_column" class="column">
            </div>

            <div id="footer">
        </div>
        </div>
        </body>
</html>

REKAPITULASI
Pertama, index.php loading request halaman php lain yang didefinisikan dalam file php. Selanjutnya halaman php ini memanggil file-fle tpl dan bersama-sama mengubahnya menjadi webpage.
Kedua, index.tpl hanya berisi satu baris:

{$ HOOK_HOME}.

Hal ini disebabkan file index hanya akan menampilkan modul-modul yang ditugaskan untuk homepage. Kategori dan halaman produk akan ditampilkan dengan bantuan modul lain.
Ketiga, kita menemukan body ID yang berbeda-beda pada masing-masing halaman, index.tpl, category.tpl, product.tpl misalnya.
Sehingga kita memiliki fleksibilitas untuk style halaman berbeda-beda dengan hanya menggunakan aturan pada global.css untuk menargetkan body ID. Darimana hal ini berasal? Jika melihat header.tpl Anda akan melihat satu baris ini: