در ابتدای دوره اشاره کردیم که این فریمورک دارای یک کامپوننت یا ماژول اصلی به نام Base است اما همان‌طور که در ادامهٔ دوره خواهیم دید، قادر خواهیم بود تا بسته به نیاز خود ماژول‌های دیگری نیز بسازیم. ساختار ماژول اصلی این فریمورک به صورت زیر است:

Base
├── Config
│   └── Database.php
├── Controllers
│   └── DefaultController.php
├── Models
│   └── User.php
└── Views
    └── default
        ├── about.php
        ├── homepage.php
        ├── notfound.php
        └── users.php

در واقع، ساختار اصلی معماری MVC که موضوع اصلی این دوره است به وضوح در این ماژول مشخص است به طوری که سه فولدر اصلی تحت عناوین Views ،Models و Controllers داریم که به ترتیب هر کدام از این فولدرها دربرگیرندهٔ فایل‌های مرتبط با «منطق اصلی اپلیکیشن»، «فایل‌های مرتبط با رابط کاربری» و همچنین «فایل‌های ارتباط‌دهنده مابین ویو و مدل» هستند. آنچه در این آموزش قصد داریم مورد بررسی قرار دهیم، پوشهٔ Views است که فایل‌هایی دربرگیرندهٔ کدهای اچ‌تی‌ام‌ال، سی‌اس‌اس، جاوااسکریپت و همچنین پی‌اچ‌پی را در خود جای داده‌اند.

با توجه به اینکه در هر ماژول می‌توانیم به منظور مجزاسازی بخش‌های مختلف خودِ ماژول از بیش از یک کنترلر استفاده نماییم، همان‌طور که ملاحظه می‌شود، داخل فولدر Views فولدر دیگری تحت عنوان default ساخته‌ایم که نام آن برگرفته از کنترلری به نام DefaultController است که در ادامهٔ آموزش‌ها آن را خواهیم ساخت. با این ترفند، کلیهٔ فایل‌های ویو مرتبط با هر کنترلرِ خاص داخل پوشه‌ای با نامی مرتبط با همان کنترلر قرار خواهد گرفت و این مسئله منجر به داشتن کنترل بیشتری روی سورس‌کد خواهد شد.

داخل پوشهٔ default چهار فایل مختلف خواهیم ساخت که به ترتیب مرتبط با صفحات «دربارهٔ ما»، «هوم‌پیج وب‌سایت»، «صفحهٔ 404» و همچنین «لیست کاربران» خواهد بود که برای شروع،‌ فایلی تحت عنوان about.php حاوی کدهای زیر می‌سازیم:

<!DOCTYPE html>
<html>
    <head>
        <title>About</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="../../../../css/styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>About</h1>
            <p>This is the about page of the site. <?= $data['param'] ?></p>
        </div>
    </body>
    <script src="../../../../js/app.js"></script>
</html>

همان‌طور که می‌بینیم، ساختار اولیهٔ یک صفحهٔ اچ‌تی‌ام‌ال را نوشته‌ایم اما به منظور درک بهتر کدهای فوق، در ادامه بخش‌های مهم این فایل را توضیح خواهیم داد.

با توجه به اینکه ممکن است بخواهیم دیتای فارسی در این صفحات درج کنیم، تگِ <"meta charset="utf-8> را در بخش هِد فایل قرار داده‌ایم. همچنین قصد داریم تا از فریمورک بوت‌استرپ در طراحی رابط کاربری این فریمورک استفاده نماییم و از همین روی با استفاده از CDN این فریمورک را به صفحهٔ خود ایمپورت کرده‌ایم و از آنجا که بخش‌هایی از این فریمورک نیاز به لایبرری جی‌کوئری دارند، بالتبع فایل جی‌کوئری را نیز در بخش هِد این فایل ایمپورت کرده‌ایم (جهت آشنایی با مفهوم CDN می‌توانید به مقالهٔ‌ شبکه‌ٔ توزیع محتوا چیست و چگونه کار می‌کند؟ مراجعه نمایید.) همچنین در خط ششم متاتگی با عنوان viewport اضافه کرده‌ایم که این تضمین را ایجاد می‌کند تا صفحات سایت‌مان در ابزارهای هوشمندی همچون موبایل و تبلت نیز به صورت کاملاً ریسپانسیو بارگزاری شوند.

علاوه بر بارگزاری فایل سی‌اس‌اس فریمورک بوت‌استرپ که دست‌مان را در طراحی صفحات خیلی باز می‌گذارد، ممکن است نیاز داشته باشیم که برخی از کدهای بوت‌استریپ را اصطلاحاً اُورراید کرده و یا کدهای کاستومایزشدهٔ خودمان را بنویسیم که در همین راستا در فولدر public پوشه‌ای ساخته‌ایم تحت عنوان css و داخلش فایلی ایجاد کردیم به نام styles.css و هر کدی که داخل این فایل قرار گیرد، کدهای پیش‌فرض بوت‌استرپ را اُورراید می‌کند چرا که محل قرارگیری این فایل بعد از تگ مربوط به فایل بوت‌استرپ است.

همچنین داخل فولدر public پوشهٔ دیگری به نام js ساخته‌ایم که حاوی فایلی به نام app.js است که در ادامهٔ این آموزش خواهیم دید که چگونه از این فایل برای تغییر متنی داخل صفحهٔ هوم‌پیج استفاده خواهیم کرد.

آنچه در ارتباط با مسیردهی فایل‌های styles.css و app.js از داخل فایل about.php حائز اهمیت است آنکه با توجه به محل قرارگیری فایل about.php در مسیر mvc/app/Base/Views/default/ نیاز است تا چهار لایه خارج شده تا در نهایت به روت پروژه یا همان فولدر mvc رسیده سپس وارد فولدر public شده و فولدر و فایل مد نظر را هدف قرار دهیم و از همین روی به ازای تک‌تک پوشه‌هایی که باید خارج شویم، از علائم /.. استفاده کرده‌ایم.

نکته‌ٔ دیگری که در ارتباط با این فایل نیاز به توضیح دارد آن است که در خط چهاردهم آرایه‌ای به صورت ['data['param$ را چاپ کرده‌ایم. این آرایه در واقع همان پراپرتی params$ است که در حین ساخت کلاس App با مقدار پیش‌فرض [] تعریف کردیم که در ادامهٔ آموزش با کاربردش بیشتر آشنا خواهیم شد.

ساخت ویو مرتبط با صفحهٔ هوم‌پیج

ساختار فایل homepage.php تا حد زیای شبیه به فایل about.php است به طوری که داریم:

<!DOCTYPE html>
<html>
    <head>
        <title>Homepage</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="../../../../css/styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1 id="title">Title</h1>
            <p>This is the homepage of the site.</p>
        </div>
    </body>
    <script src="../../../../js/app.js"></script>
</html>

تنها چیزی که در ارتباط با این صفحه نیاز به توضیح دارد، تگ <h1> با شناسهٔ title است که قصد داریم به محض لود شدن صفحه، از طریق فایل جاوااسکریپت app.js مقدار این تگ را تغییر دهیم به طوری که در این فایل جاوااسکریپتی داریم:

document.getElementById("title").innerHTML = "Text changed to Homepage";

همان‌طور که می‌بینیم، با استفاده از تابع ()getElementById گفته‌ایم محتویات اِلِمانی با شناسهٔ title به استرینگ «Text changed to Homepage» تغییر یابد.

ساخت ویو مرتبط با صفحهٔ 404

در کلاس App که در آموزش‌های آتی توسعهٔ آن را ادامه خواهیم داد، گفته‌ایم اگر کاربر لینکی را وارد کرد که از قبل در کلاس Routing تعریف نشده باشد، با صفحهٔ 404 یا اصطلاحاً Not Found مواجه گردد که برای این منظور، فایلی تحت عنوان notfound.php به صورت زیر تعریف خواهیم کرد:

<!DOCTYPE html>
<html>
    <head>
        <title>404</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="../../../../css/styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>404</h1>
            <p>The page you`re looking for is not found</p>
        </div>
    </body>
    <script src="../../../../js/app.js"></script>
</html>

لازم به یادآوری است که این فایل کاملاً استاتیک است و صرفاً قرار است پیامی مبنی بر «یافت نشدن صفحهٔ مورد نظر» در معرض دید کاربر قرار دهد.

ساخت ویو مرتبط با صفحهٔ لیست کاربران

در آموزش مرتبط با ساخت مدل قصد داریم مدلی به منظور فراخوانی لیست کلیهٔ کاربران سایت بسازیم و از همین روی فایلی تحت عنوان users.php به صورت زیر نیاز خواهیم داشت:

<!DOCTYPE html>
<html>
    <head>
        <title>Users` List</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="../../../../css/styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>Users` List</h1>
            <?php
            if ($data['param']) {
                echo "<ol>";
                foreach ($data['param'] as $user) {
                    echo "<li>{$user['first_name']} {$user['last_name']}</li>";
                }
                echo "</ol>";
            }
            ?>
        </div>
    </body>
    <script src="../../../../js/app.js"></script>
</html>

تنها بخشی از کدهای فوق که کمی نیاز به توضیح دارد، خطوط چهارده تا بیست‌ودوم است که به صورت دینامیک (پویا) اجرا می‌گردند. با استفاده از یک دستور شرطی، ابتدا چک کرده‌ایم که آرایه‌ای تحت عنوان data$ دارای کلیدی به نام param وجود داشته باشد؛ سپس یک لیست ساخته و با استفاده از یک حلقه مقادیر first_name و last_name هر کاربر را چاپ کرده‌ایم.

در این آموزش دیدم که چگونه می‌توان دست به ساخت لایهٔ View از معماری سه‌لایهٔ MVC زد به طوری که کلیهٔ فایل‌های مورد نیاز برای کنترلر DefaultController را ساختیم که در آموزش‌های آتی آن را توسعه خواهیم داد. حال به منظور تکمیل این ماژول، نیاز است تا لایهٔ‌ مدل را نیز کدنویسی کنیم که در آموزش آتی خواهیم دید که به چه شکل می‌توان دست به ساخت آن جهت ارتباط با دیتابیس زد.