ایجاد یک برنامه تک صفحه ای با استفاده از Mustache و PHP

آیا تا به حال می خواهید به توسعه برنامه تک صفحه ای Mustache تسلط داشته باشید؟ آیا می دانستید که می توانید از PHP با آن استفاده کنید؟ در این آموزش، نحوه ایجاد یک برنامه تک صفحه ای با استفاده از Mustache و PHP را بررسی می کنیم.

در دنیای پر سرعت امروز، کاربران انتظار دارند که وب سایت ها و برنامه ها به سرعت بارگذاری شوند و تجربه ای یکپارچه ارائه دهند. برنامه های کاربردی تک صفحه ای (SPA) به عنوان یک راه حل محبوب برای برآورده کردن این انتظارات ظاهر شده اند. با استفاده از Mustache و PHP، توسعه دهندگان می توانند SPAهای پویا، پاسخگو و مقیاس پذیر بسازند که محتوا و عملکرد را بدون نیاز به بارگذاری مجدد صفحه ارائه می دهند. با این حال، تسلط بر این فناوری‌ها می‌تواند چالش برانگیز باشد، به‌ویژه برای کسانی که تازه وارد توسعه وب شده‌اند.

در این آموزش، ما عمیقاً به دنیای Mustache و PHP می پردازیم تا به شما در تسلط بر توسعه اپلیکیشن تک صفحه ای کمک کنیم. ما اصول اولیه SPA ها را پوشش خواهیم داد، در مورد مزایای استفاده از Mustache و PHP بحث خواهیم کرد و راهنمایی های گام به گام در مورد نحوه ساخت SPA از ابتدا ارائه خواهیم کرد. چه مبتدی باشید که به دنبال کسب اطلاعات بیشتر در مورد توسعه وب هستید یا یک توسعه دهنده با تجربه که به دنبال گسترش مهارت های خود است، این آموزش بینش های ارزشمند و نکات عملی را در اختیار شما قرار می دهد تا توسعه SPA خود را به سطح بعدی ارتقا دهید.

این را در یوتیوب مشاهده کنید

https://www.youtube.com/watch?v=B7hIR_Ii_d4

ساختار فایل

index.php
autoload.php
.htaccess
/controllers
   Nav.php
   Templates.php
/sass
     style.scss
/css (generated by Sass)
   style.css
   style.min.css
/views
   404.html
   about.html
   contact.html
   home.html
   partials/
      /contact
         forms.mustache
      footer.mustache
      header.mustache
      styles.mustache

فایل htaccess

ما در حال استفاده از .htaccess فایل برای تغییر مسیر همه تماس های صفحه به index.php فایل. بنابراین اگر به / بروید index.php را نشان می دهد و اگر به /about بروید همان index.php را نشان می دهد. ما از این به عنوان اساس مسیریابی خود استفاده خواهیم کرد.

<IfModule mod_rewrite.c>
    Options +FloowSymLinks
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) index.php [L]
</IfModule>

سبیل را نصب کنید

می توانید Mustache را از وب سایت آنها دانلود کنید یا از Composer برای نصب آن استفاده کنید. برای این آموزش، از Composer استفاده خواهیم کرد.

composer require mustache/mustache

با این کار از طریق Composer به فروشنده و autoloader دسترسی خواهیم داشت.

index.php ما را راه اندازی کنید

از آنجایی که این فایل برای تمام درخواست‌های این وب‌سایت استفاده خواهد شد، باید آن را به گونه‌ای پیکربندی کنیم که به عنوان روتر عمل کند.

<?php
require_once 'vendor/autoload.php';
require_once 'autoload.php';

Mustache_Autoloader::register();

Autoloader ما را ایجاد کنید (برای کلاس های برنامه ما)

در ویدیوی قبلی که ایجاد کردم، به نحوه ایجاد Autoloader خود برای کلاس های سفارشی خود پرداختم. شما می توانید آن ویدئو را در اینجا ببینید:

https://www.youtube.com/watch?v=ox8aeQ31PE0

این کد زمانی به کار می آید که شما در حال ایجاد کلاس های سفارشی خود هستید و نمی خواهید به آنها نیاز داشته باشید یا آنها را اضافه کنید. در این مورد، ما از آن برای بیرون کشیدن کلاس های سفارشی خود از آن استفاده خواهیم کرد controllers پوشه

<?php
function autoload($class) {
    include 'controllers/'.$class.'.php';
}

spl_autoload_register('autoload');

کلاس الگوهای ما را ایجاد کنید

کلاس الگو دارای چند روش کلیدی در خود خواهد بود که از Mustache استفاده می کند و محتوا/داده ها را ارائه می کند.

در ما __contruct روش، ما مقداردهی اولیه می کنیم Mustache Engine و جزئی های خود را به شی اضافه می کنیم. این به زمانی کمک می کند که ما از قسمت های زیر استفاده کنیم.

بعد، ما ایجاد می کنیم render روش. این روش محتوا را از view HTML دریافت می کند و با استفاده از Mustache آن را تجزیه می کند. برای اهداف بلوک کد بعدی، a را کدگذاری کرده ایم $data آرایه ای که برای صفحه اصلی استفاده خواهد شد. در چند مرحله زیر، یک متد ایجاد می کنیم data که از دستور switch برای دریافت محتوا برای چندین صفحه استفاده می کند.

بالاخره داریم getPageURL. این روش صفحه فعلی را از URL می گیرد و به ما امکان می دهد از آن استفاده کنیم render تابعی برای بیرون کشیدن قالب مناسب از پوشه views.

<?php
class Templates {
    private $m;

    public function __construct(){
        $this->m = (new \Mustache_Engine(
            [
            'partials_loader' => new \Mustache_Loader_FilesystemLoader('views/partials'),
            ]
        ));
    }

    public function render($template) {
        $data['content'] = [
           'title' => 'Home',
           'heading' => 'Welcome to the home page!',
           'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        ];
        $template = @file_get_contents('views'. $template.'.html');
        if($template === false) {
            $template = file_get_contents('views/404.html');
        }
        return $this->m->render($template, $data);
    }

    public function getPageURL() {
        $url = explode('?', $_SERVER['REQUEST_URI']);
        return ($url[0] == "https://dev.to/" ? '/home' : $url[0]);
    }
}

توجه کنید @ نماد روی file_get_contents روش. این کار از نمایش هشدارها در صورت یافت نشدن فایل جلوگیری می کند. ما با تماس الگوی 404 خود به آن رسیدگی خواهیم کرد.

اولین الگوی ما را راه اندازی کنید

ما در حال حاضر به استفاده از {{}} متغیرهای سبیل در HTML ساده ما.

وقتی می بینید {{ variable }}، این متغیری را چاپ می کند که با داده های ارسال شده مطابقت دارد. در کد ما استفاده می کنیم {{ content.title }} برای عنوان این به الگو می گوید که به دنبال یک آرایه باشد content و مقدار را از title هدف – شی. اگر برای تولید یک شی رندر شده به الگو نیاز دارید، باید از آن استفاده کنید {{{ variable }}}، در غیر این صورت، فقط به صورت متن نمایش داده می شود.

شما نیز متوجه خواهید شد {{> styles }} در کد زیر این قسمت هایی را اضافه می کند که با آن نام مطابقت دارند. در زیر کمی بیشتر به آن خواهیم پرداخت.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ content.title }}</title>
    {{> styles }}
</head>
<body>
    {{> header }}
    <main>
        <h1>{{ content.heading }}</h1>
        <p>{{ content.content }}</p>
    </main>
    {{> footer }}
</body>
</html>

در بیشتر موارد، می‌توانید این را برای هر صفحه اضافی کپی کنید، مگر اینکه محتوا یا داده‌های متفاوتی را به الگو اضافه کنید.

برچسب های خاصی وجود دارد که در سبیل استفاده می کنید. من رایج ترین آنها را در اینجا لیست می کنم:

{{ variable }}
این به شما امکان می دهد متنی را از یک متغیر اضافه کنید.

{{{ variable }}}
این به شما امکان می دهد متن رندر شده را اضافه کنید (با متن متفاوت است {{}}).

{{# variable }} هر چی میخوای اینجا {{/ variable }}
اگر یک متغیر درست باشد

{{^ variable }} هر چی میخوای اینجا {{/ variable }}
اگر یک متغیر نادرست باشد

{{# array }}
   {{ item }}
{{/ array}}

موارد را از یک آرایه به عنوان یک حلقه یا استفاده کنید {{ array.item }} برای به دست آوردن یک مورد

{{> folder/template }}
یک سبیل جزئی از یک پوشه دریافت کنید، به یاد داشته باشید که الگوهای موجود در این پوشه باید پسوند .mustache را داشته باشند زیرا از طریق کد Mustache ارائه می شود.

تنظیمات جزئی

در این قسمت از آموزش قصد داریم a را ایجاد کنیم header، footer، و style جزئي. جزئی را به عنوان یک در نظر بگیرید include یا require فایلی که معمولاً در PHP استفاده می کنید.

در views/partials پوشه، فایل های زیر را ایجاد کنید:

سربرگ.سبیل

<header>
    {{# nav.header }}
        <div class="logo">[logo]</div>
        <ul>
            {{# links }}
                <li><a href="{{ url }}">{{ name }}</a></li>
            {{/ links }}
        </ul>
    {{/ nav.header }}
</header>

پاورقی.سبیل

<footer>
    {{# nav.footer }}
        <ul>
            {{# links }}
                <li><a href="{{ url }}">{{ name }}</a></li>
            {{/ links }}
        </ul>
    {{/ nav.footer }}
</footer>

سبک ها.سبیل

<link href="/css/style.min.css" rel="stylesheet">

شما می توانید هر تعداد جزئی که نیاز دارید ایجاد کنید، اما برای این آموزش، ما فقط از این 3 مورد استفاده خواهیم کرد.

کلاس Nav خود را ایجاد کنید

در پوشه کنترلرها، فایل Nav.php خود را ایجاد کنید. ما از این برای ایجاد پویا لینک های هدر و پاورقی استفاده می کنیم.

<?php

class Nav {

    public function header() {
        $header = [
            'links' => [
                ['url'=>"https://dev.to/", 'name'=>'Home'],
                ['url'=>"https://dev.to/about", 'name'=>'About'],
                ['url'=>"https://dev.to/contact", 'name'=>'Contact'],
            ]
        ];
        return $header;
    }

    public function footer() {
        $footer = [
            'links' => [
                ['url'=>"https://dev.to/about", 'name'=>'About'],
                ['url'=>"https://dev.to/contact", 'name'=>'Contact'],
            ]
        ];
        return $footer;
    }
}

اکنون که کلاس nav را ایجاد کرده ایم، می توانیم آن را به کلاس قالب خود اضافه کنیم.

در شما Templates.php فایل، یک متغیر جدید در زیر اضافه کنید private $m;، بنابراین اکنون می گوید

private $m;
private $nav;

این متغیر کلاس ما را اعلام می کند. بنابراین، در حال حاضر، در شما constructor اضافه کردن $this->nav = new Nav(); زیر Mustache_Engine متغیر. این به ما امکان دسترسی به کلاس nav را می دهد.

ما در یک لحظه از این استفاده خواهیم کرد.

ایجاد داده های پویا

در قسمت اول کد، فقط داده ها را برای صفحه اصلی اضافه کردیم.

$data['content'] = [
    'title' => 'Home',
    'heading' => 'Welcome to the home page!',
    'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
];

ما می خواهیم این را بگیریم و آن را پویاتر کنیم. ایجاد یک تابع جدید در Templates.php فایل فراخوانی شد data(). ما می‌خواهیم عبارت هدر، پاورقی و سوئیچ خود را برای داده‌ها اضافه کنیم. کد نهایی شما باید چیزی شبیه به این باشد:

public function data($page) {
    $data['nav']['header'] = $this->nav->header();
    $data['nav']['footer'] = $this->nav->footer();
    switch ($page) {
        case '/home':
            $data['content'] = [
                'title' => 'Home',
                'heading' => 'Welcome to the home page!',
                'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            ];
            break;
        case "https://dev.to/about":
            $data['content'] = [
                'title' => 'About',
                'heading' => 'Welcome to the about page!',
                'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                'additional' => ['item 1', 'item 2', 'item 3']
            ];
            break;
        case "https://dev.to/contact":
            $data['content'] = [
                'title' => 'Contact',
                'heading' => 'Welcome to the contact page!',
                'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            ];
            break;
        default:
            $data['content'] = [
                'title' => '404',
                'heading' => 'Oops! Page Not Found',
                'content' => 'This page cannot be found, please try again.'
            ];
            break;
    }
    return $data;
}

این به ما اجازه می دهد تا قالب های HTML دیگری را در نظر خود ایجاد کنیم (about.html،contact.html،404.html) و همچنین به قسمت های سرصفحه و پاورقی ما پیوند دهید.

اگر قبلاً این کار را نکرده اید، ادامه دهید و آن صفحات را ایجاد کنید.

آنها باید شبیه home.html باشند که قبلا ایجاد کرده ایم.

index.php را برای تغییرات قالب به روز کنید

ما در ابتدا index.php را با ارجاع به ایجاد کردیم Mustache_Autoloader. اکنون می توانیم این صفحه را تمام کنیم.

کد زیر را به پایان از index.php:

$templates = new Templates();
$page = $templates->getPageURL();
$data = $templates->data($page);

echo $templates->render($page, $data);

آن کد اکنون باید وارد شود Templates class و توابعی را که ایجاد کردیم برای نمایش داده ها و دریافت الگوها فراخوانی کنید.

نتیجه

اکنون باید بتوانید کد خود را اجرا کنید و صفحات و محتوای مختلف روش های خود را مشاهده کنید.

این یک راه ساده برای ایجاد یک وب سایت پویا است و نکته جالب این است که سبیل اهمیتی نمی دهد که داده ها از کجا آمده اند. در این آموزش، ما آن را به روش سخت کدگذاری می کنیم، اما می توانید آن را از یک پایگاه داده، یک API، یک فایل JSON یا حتی یک CSV بکشید. تا زمانی که داده‌ها را به الگو ارسال می‌کنید، Mustache آن را در جایی نمایش می‌دهد {{ variable }} است.

تنها چیزی که باید به خاطر بسپارید این است که Mustache یک موتور قالب “بدون منطق” است. بنابراین نمی توانید عبارات منطقی را انجام دهید. داده ها باید قبل از ورود به الگو آماده شوند. بنابراین اگر شما نیاز به انجام یک if بیانیه، شما باید این کار را قبل از رندر کردن قالب در کد PHP انجام دهید. خارج از آن، این یک ابزار بسیار مفید برای ایجاد وب سایت های پویا و مبتنی بر داده است.

ویدیوی بالا را تماشا کنید یا با استفاده از نمایه GitHub من، کدهای کامل را از اینجا دانلود کنید: https://github.com/thedevdrawer/mustache-php.

موفق باشید در برنامه نویسی با سبیل.