فایل config و بارگذاری header/footer

ساخت فایل config.php

در قسمت قبل مبحث view را کامل کردیم تا بتوانیم با داده های دلخواه خود view مختلفی را بارگذاری کنیم. در این جلسه و قبل از شروع کار می خواهیم از یک فایل config (پیکربندی) استفاده کنیم. چرا؟ بگذارید یکی از دلایل آن را برایتان بگویم. در هر پروژه ای عناصری هستند که مرتبا تکرار می شوند. به طور مثال آدرس URL پروژه ما در سورس کد مرتبا تکرار خواهد شد؛ این آدرس در حال حاضر localhost/traversymvc است اما در آینده و زمانی که پروژه را روی هاست قرار دهیم قطعا تغییر می کند. اگر آدرس URL را به طور دستی در همه جا وارد کنیم هنگام ایجاد تغییرات (مثلا هنگام قرارگیری روی هاست) باید تک تک موارد آن را در فایل های مختلف پیدا کنیم و تغییر دهیم! این کار اصلا عقلانی نیست بنابراین می توانیم از یک ثابت یا متغیر استفاده کنیم تا در صورت نیاز به تغییر تنها آن را تغییر دهیم.

برای انجام این کار به پوشه config بروید و یک فایل به نام config.php ایجاد کنید. درون این فایل می نویسیم:

[restrict paid=true message=" "]

<?php
  // App Root
  echo __FILE__;

ما می خواهیم App root یعنی دیرکتوری اصلی app را به صورت یک متغیر داشته باشیم. برای این کار از __FILE__ استفاده می کنیم که به ما آدرس فایل فعلی (config.php) را می دهد.

سپس به فایل bootstrap.php میرویم و آن را require می کنیم:

// Load Config
  require_once 'config/config.php';

حالا اگر به آدرس localhost/traversymvc برویم با آدرس زیر مواجه می شویم:

c:\xamp\htdocs\traversymvc\app\config\config.php

اما ما app root را می خواهیم نه آدرس فایل Config.php را... می توانیم از تابع dirname (مخفف directory name - نام دیرکتوری) استفاده کنیم؛ این تابع آدرس پوشه پدر را به ما می دهد. بنابراین اگر بگوییم:

<?php
  // App Root
  echo dirname(__FILE__);

آدرس به شکل زیر در می آید:

c:\xamp\htdocs\traversymvc\app\config

اما هنوز هم به app root نرسیده ایم. برای حل این مشکل می توانیم یک بار دیگر از dirname استفاده کنیم:

// App Root
  echo dirname (dirname (__FILE__));

حالا آدرسی را می گیریم که می خواستیم:

c:\xamp\htdocs\traversymvc\app

برای دیدن خروجی، این کد را echo کردیم اما برای استفاده از آن در سر تا سر پروژه باید آن را در یک ثابت قرار دهیم. از آن جایی که این سری آموزشی برای افراد مبتدی در نظر گرفته نشده است مطمئن هستم که شما می دانید برای ساخت یک ثابت باید از define استفاده کنید:

// App Root
  define('APPROOT', dirname(dirname(__FILE__)));

برای اینکه از سالم بودن این کد اطمینان پیدا کنیم به views>pages>index.php میرویم و APPROOT را echo می کنیم:

<?php echo APPROOT; ?>

حالا یک ثابت برای URL نیز نیاز داریم (برای ایجاد لینک ها تا حد امکان نباید آن ها را به صورت دستی نوشت) بنابراین در همان فایل config.php می نویسیم:

<?php
  // App Root
  define('APPROOT', dirname(dirname(__FILE__)));
  // URL Root
  define('URLROOT', 'http://localhost/traversymvc');

در آخر نیز نام سایت را به عنوان ثابت اضافه می کنیم:

<?php
  // App Root
  define('APPROOT', dirname(dirname(__FILE__)));
  // URL Root
  define('URLROOT', 'http://localhost/traversymvc');
  // Site Name
  define('SITENAME', 'TraversyMVC');

از آنجا که نام فریم ورک را traversy گذاشته ایم فعلا نام سایت را هم همان می گذاریم (هنگام انتقال سایت روی هاست نامش را به SharePost تغییر می دهیم).

ایجاد Autoloader

اگر الان به فایل bootstrap.php سر بزنیم مشکلی نمی بینیم و ظاهرش نیز شلوغ به نظر نمی آید (تنها چند فایل require شده داریم) اما اگر بخواهیم این فریم ورک را گسترش دهیم و فایل های زیادی را به آن اضافه کنیم بسیار شلوغ می شود. برای حل این مشکل می توانیم یک autoloader بسازیم که تمام این فایل ها را به صورت خودکار load کند. برای آنکه autoloader ما کار کند باید نام کلاس شما با نام فایل شما یکی باشد؛ مثلا فایل pages.php دارای کلاس pages باشد. بنابراین در همان فایل bootstrap.php می نویسیم:

// Autoload Core Libraries
  spl_autoload_register(function($className){
    require_once 'libraries/' . $className . '.php';
  });

از این به بعد هر زمان که فایلی در libraries ایجاد کنیم به صورت خودکار require می شود.

فایل های header و footer

همانطور که گفتیم ما نمی خواهیم برای هر فایل، یک header جداگانه داشته باشیم. از آنجا که header و footer اکثر سایت ها در تمامی صفحات (یا حداقل اکثر صفحات) مشابه هم هستند کافی است آن ها را مانند وردپرس در یک فایل جداگانه ایجاد کنیم و بعدا در فایل هایمان بارگذاری کنیم.

برای شروع کار وارد پوشه views شوید و پوشه ای به نام inc بسازید. داخل این پوشه دو فایل به نام های header.php و footer.php بسازید. در فایل header همان header و کد های اصلی HTML را قرار می دهیم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

در فایل footer.php نیز کد های قسمت پایین را قرار می دهیم:

</body>
</html>

حالا دوباره به فایل header.php برگردید تا تغییراتی را ایجاد کنیم. یکی از این تغییرات اضافه کردن نام سایت در قسمت title است:

  <title><?php echo SITENAME; ?></title>

تغییر دیگر اضافه کردن style.css است:

  <link rel="stylesheet" href="<?php echo URLROOT; ?>/css/style.css">

باز به فایل footer.php برگردید و این بار فایل جاوا اسکریپت را در آن بارگذاری می کنیم:

  <script src="<?php echo URLROOT; ?>/js/main.js"></script>
</body>
</html>

چرا فایل جاوا اسکریپت را در همان header بارگذاری نکردیم؟ قبلا در مقالاتی مانند «مسیر ضروری رندرینگ» توضیح دادیم که اگر پروژه شما شدیدا به جاوا اسکریپت وابسته نیست بهتر است بارگذاری آن را به تعویق بیندزاید تا صفحه زودتر برای کاربران نمایش داده شود.

حالا باید برای هر view که داریم این فایل ها را require کنیم بنابراین در views>pages>index.php می نویسیم:

<?php require APPROOT . '/views/inc/header.php'; ?>
  <h1><?php echo $data['title']; ?></h1>
<?php require APPROOT . '/views/inc/footer.php'; ?>

حواستان باشد کد مربوط به echo کردن title را در جلسات قبل نوشتیم. الان فقط header و footer (خط اول و سوم) کد را به آن اضافه کرده ایم.

برای تست کردن قسمت های مختلف می توانید کدهای امتحانی بنویسید و صفحه را refresh کنید. به طور مثال برای چک کردن فایل Style.css می توانید در آن کد زیر را بنویسید:

body{
        background: red;
    }

سپس صفحه localhost/traversymvc را رفرش کنید. پس زمینه باید قرمز شده باشد.

نکته: اگر پس از رفرش کردن صفحه، پس زمینه قرمز نشد کلیدهای Ctrl + f5 را بزنید تا کش مرورگر شما پاک شود. مرورگر ها برای ذخیره منابع و سریع تر شدن بارگذاری صفحات منابعی مانند CSS و جاوا اسکریپت را در خود ذخیره می کنند تا بعدا نیاز به دانلود دوباره آن ها نباشد. بنابراین اگر کد داخل این فایل ها را تغییر دهید و فایل کش شده باشد تغییر محتوا را مشاهده نمی کنیم.

برای تست کردن جاوا اسکریپت هم به فایل main.js رفته و یک Alert ایجاد کنید:

    alert(1);

با رفرش کردن صفحه باید پیام "1" را مشاهده کنید.

همانطور که گفته شد باید header و footer را در تمام view های خود require کنیم بنابراین به فایل های pages.php بروید و همان کاری که با تابع index کردیم را نیز با about انجام دهید. یعنی:

<?php
  class Pages extends Controller {
    public function __construct(){

    }
    
    public function index(){
      $data = [
        'title' => 'Welcome'
      ];
     
      $this->view('pages/index', $data);
    }

    public function about(){
      $data = [
        'title' => 'About Us'
      ];

      $this->view('pages/about', $data);
    }
  }

و در آخر header و footer را برای صفحه about.php (درون پوشه views>pages) نیز require می کنیم:

<?php require APPROOT . '/views/inc/header.php'; ?>
  <h1><?php echo $data['title']; ?></h1>
<?php require APPROOT . '/views/inc/footer.php'; ?>

با رفتن به آدرس localhost/traversymvc/pages/about باید عبارت about us را مشاهده کنیم.

دانلود فایل های این جلسه

در قسمت بعدی به سراغ کار روی model و دیتابیس کار خواهیم کرد.