Smarty چیست؟ معرفی و توضیح ویژگی‌ها به همراه مثال

در صورت آشنایی با برنامه نویسی وب و کار در این حوزه ممکن است نام اسمارتی (Smarty) به گوشتان خورده باشد.

اما اسمارتی چیست؟ اجازه دهید قبل از آن کمی مقدمه‌چینی کنیم!

برنامه نویسی وب شامل طراحی و نوشتن کد در فرآیند توسعه وب است. برنامه نویسی وب باید در هر دو سمت سرور و کلاینت به خوبی انجام شده باشد و امنیت سایت نیز در نظر گرفته شده باشد.

به عنوان برنامه نویس وب باید با فریم ورک‌ها و زبان‌های مرسوم برنامه نویسی وب آشنا باشید.

طراحی قالب یکی از مراحل مهم طراحی سایت است. شما می‌توانید قالب‌ها را خودتان طراحی کرده یا از قالب‌های آماده استفاده کنید.

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

در واقع طراحی وبسایت شامل دو بخش است، بخش اول نحوه به نمایش درآمدن اطلاعات و بخش دیگر خود اطلاعاتی که باید نمایش داده شوند.

به همین دلیل یکی از مباحثی که در آموزش برنامه نویسی وب مطرح می‌شود، موتورهای قالب و نحوه استفاده از آن‌هاست.

اگر با برنامه نویسی وب از قبل آشنایی داشته باشید، احتمالاً می‌دانید موضوع این مقاله چیست اما اگر گیج شده‌اید و آشنایی چندانی با اصطلاحات گفته شده تا اینجا ندارید هم نگران نباشید!

در ادامه این مقاله مقدمات لازم برای آشنایی با موتورهای قالب و یکی از پرکاربردترین موتورهای قالب یعنی اسمارتی مطرح خواهد شد.

همچنین در صورت داشتن علاقه می‌توانید در فرادرس آموزش طراحی قالب سایت را مشاهده کنید:

آموزش طراحی قالب استاتیک برای سایت

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

سیستم پردازش قالب چیست؟

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

این سیستم از قالب‌های ثابت از پیش طراحی شده در کنار عناصر پویایی نظیر درخواست‌های وب استفاده می‌کند.

سیستم پردازش قالب شامل موارد زیر است:

· یک مدل داده (مدلی انتزاعی برای مشخص کردن ساختار داده‌ها و نحوه ارتباط آن‌ها با هم)

· یک یا چند قالب

· یک موتور قالب

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

قالب وبسایت چیست؟

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

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

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

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

در واقع قالب بخشی از سایت است که همواره ثابت بوده و تغییری در آن ایجاد نمی‌شود. یعنی بخش منطقی سایت و اتفاقاتی که با تعامل کاربر با سایت می‌افتد باید از قالب جدا باشد.

اینجاست که بحث موتورهای قالب مطرح می‌شود.

موتور قالب چیست؟

موتور قالب (Template Engine) ابزاری است که این امکان را به شما می‌دهد تا با نوشتن کمترین کد ممکن، به ساخت یک قالب اچ‌تی‌ام‌ال بپردازید.

از موتور قالب برای ترکیب داده‌ها با قالب اچ‌تی‌ام‌ال استفاده می‌شود. هنگامی که برنامه یا سایت شما اجرا می‌شود، موتور قالب همان چیزی است که مقادیر پیش‌فرض موجود در قالب را با داده‌های واقعی جایگزین کرده و قالب شامل مقادیر واقعی را به صورت یک فایل (مثلاً اچ‌تی‌ام‌ال یا پی‌دی‌اف) به دستگاه کلاینت ارسال می‌کند.

موتور قالب این اجازه را به توسعه‌دهنده می‌دهد تا انواع مختلفی از محتوا (نظیر اچ‌تی‌ام‌ال) را بسازند در حالی که این فایل با ساختارهای برنامه‌نویسی نظیر دستورات شرطی و حلقه‌ها یکپارچه شده باشد.

در واقع موتور قالب به جدا ماندن بخش طراحی سایت از منطق آن کمک شایانی می‌کند.

مفاهیم گفته شده تا اینجا را می‌توان در شکل زیر خلاصه کرد:

معرفی موتورهای قالب مختلف

موتورهای قالب مختلفی برای اجرای کدهای نوشته شده به زبان‌های برنامه نویسی مختلف در قالب‌ها طراحی شده است.

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

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

آموزش پروژه محور Twig - موتور طراحی قالب در PHP

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

بحث بین استفاده کردن یا نکردن از موتور قالب برای پی‌اچ‌پی، بحثی دنباله‌دار و پایان نیافته میان توسعه دهندگان است. اما اگر قصد استفاده از یک موتور قالب پی‌اچ‌پی را در پروژه‌ خود دارید، اسمارتی یکی از بهترین موتورهای قالب است که قصد معرفی آن را در این مقاله نیز داریم.

البته در کنار اسمارتی، می‌توانید از پلیتز (plates)، بلید (blade) و ولت (volt) نیز استفاده کنید. اما تمرکز این مقاله تنها روی اسمارتی است.

معرفی اسمارتی

اسمارتی یک موتور قالب برای پی‌اچ‌پی است که متن‌باز بوده و کد آن در گیت‌هاب قابل بررسی است. اسمارتی سریع است و استفاده از آن نیز آسان.

به طور دقیق‌تر، اسمارتی مانند هر موتور قالب دیگری جداسازی ظاهر اپلیکیشن از محتوا و منطق آن را تسهیل می‌کند.

بهترین کاربرد اسمارتی در جایی است که توسعه دهنده برنامه و طراح قالب نقش‌های متفاوتی داشته باشند، یا همانطور که معمولاً اتفاق می‌افتد توسعه و طراحی توسط یک شخص انجام نشود.

اجازه دهید نقش اسمارتی را با یک مثال جا بیندازیم!

برای مثال فرض کنید در حال طراحی یک صفحه وب هستید که قرار است مقاله‌های روزنامه در آن نمایش داده شوند.

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

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

از طرفی اگر طراح سایت بخواهد تغییری در قالب ایجاد کند، اعمال این تغییرات مشکلی در عملکرد منطقی سایت ایجاد نخواهد کرد.

در واقع اسمارتی به تمرکز توسعه دهنده پی‌اچ‌پی و طراح روی وظایف خود کمک می‌کند، منظور از وظایف توسعه دهنده موارد زیر است:

· استخراج عناصر پایگاه داده به وسیله اجرای پرس‌وجو‌ها

· دستکاری و اعتبارسنجی داده‌ها به وسیله طراحی بخش منطقی سایت

· تغییر نحوه دسترسی به داده‌ها در صورت نیاز، مثلاً انتقال کل سیستم از MySQL به PostgreSQL بدون دخالت در کار طراح سایت

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

وظایف طراح هم می‌تواند شامل موارد زیر باشد:

· ساخت صفحات اچ‌تی‌ام‌ال بدون تداخل با کدهای پی‌اچ‌پی نوشته شده توسط توسعه دهندگان

· ایجاد تغییرات در طراحی بدون نیاز به تعامل با توسعه دهنده پی‌اچ‌پی

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

اسمارتی چگونه کار می‌کند؟

قالب‌ها در اسمارتی به وسیله فایل‌هایی با پسوند .tpl معرفی می‌شوند. این فایل شامل کد بخش طراحی سایت (اچ‌تی‌ام‌ال یا هر کد دیگری) است و طراح از طریق این فایل‌ها به داده‌هایی که توسعه‌دهندگان پی‌اچ‌پی فراهم کرده‌اند دسترسی پیدا می‌کند. بنابراین اسمارتی یک واسط مشترک است که توسعه‌دهنده پی‌اچ‌پی و طراح سایت روی آن برای نحوه دسترسی به داده‌ها توافق کرده‌اند. این توافق و نحوه دسترسی با استفاده از placeholder‌های اسمارتی صورت می‌گیرد.

در سمت سرور، داده‌ها در placeholderها تعبیه شده و در لایه طراحی، طراح به داده‌ها از طریق همان placeholderها دسترسی پیدا خواهد کرد.

تعدادی از ویژگی‌های اسمارتی

· اسمارتی به شدت سریع است

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

· تنها یک بار قالب را کامپایل می‌کند

· تنها فایل‌های مربوط به قالبی را دوباره کامپایل می‌کند که در آن تغییراتی صورت گرفته باشد

· می‌توانید توابع و تغییردهنده‌های مورد نیاز خود را به راحتی بسازید، بنابراین زبان اسمارتی بسیار قابل توسعه است

· دستورات شرطی اسمارتی به تجزیه کننده (Parser) پی‌اچ‌پی فرستاده می‌شوند، بنابراین می‌توانید دستورات شرطی ساده یا پیچیده‌ای را به راحتی بنویسید.

سینتکس اسمارتی

اسمارتی از یک زبان نشانه‌گذاری استفاده می‌کند.

فرادرس آموزش‌های مناسبی در زمینه زبان‌های نشانه‌گذاری نظیر ایکس‌ ام ال ارائه کرده است:

آموزش زبان XML (ایکس ام ال)

تمامی دستورات اسمارتی بین دو اکولاد قرار می‌گیرند. در نظر گرفتن یک سینتکس خاص برای اسمارتی به این علت است که کد اسمارتی باید از کد پی‌اچ‌پی و کد مربوط به قسمت طراحی سایت قابل تمایز باشد.

موتور قالب این فایل‌ها را خوانده و فایل‌های مجاز اچ‌تی‌ام‌ال را به وسیله آن‌ها تولید خواهد کرد.

در ادامه با تعدادی از مفاهیم مورد استفاده در سینتکس اسمارتی آشنا خواهید شد.

متغیرها

فرض کنید از اسمارتی برای نمایش داده‌های مربوط به سیستم یک فروشگاه استفاده می‌کنیم. هر صفحه وب توسط موتور قالب برای نمایش داده‌های خواسته شده پردازش می‌شود. داده‌ها در متغیرها ذخیره می‌شوند. برای دسترسی به مقادیر متغیرها از طریق اسمارتی، یک علامت دلار در ابتدای نام متغیر می‌گذاریم، مانند مثال زیر:

<h2>{$sArticle.articleName}</h2>

این مثال کوچک نشان می‌دهد که مقداری که متغیر حاوی آن است در عنصر <h2> نمایش داده خواهد شد. نقطه‌ای که بین کلمات sArticle و articleName قرار گرفته است به معنای این است که متغیر sArticle تنها یک مقدار نداشته و به صورت آرایه‌ای از مقادیر تعریف شده و برای دستیابی به مقدار articleName، از یک نقطه جداکننده استفاده شده است.

تغییردهنده‌ها

گاهی تنها قصد نمایش داده‌ها در خروجی را نداریم، بلکه می‌خواهیم تغییراتی روی داده‌ها قبل از نمایش نهایی آن اعمال کنیم. اینجا همان جایی است که تغییردهنده‌‌های اسمارتی به کمک ما می‌آیند. تغییردهنده‌ها، توابع کوچکی هستند که برای دستکاری داده‌ها استفاده می‌شوند. مثال زیر اعمال یک تغییردهنده به یک متغیر را نشان می‌دهد:

<div>

{$sArticle.description|truncate:120}

</div>

همانطور که مشاهده کردید، با اضافه کردن تنها یک | و آوردن نام تغییر دهنده بلافاصله بعد از نام متغیر، تغییردهنده را به متغیر اعمال کردیم. در این مثال تغییردهنده ما truncate است که به متغیر description اعمال شده و حداکثر تعداد کاراکترهای آن را ۱۲۰ عدد تعیین کرده است. پارامترهایی مانند عدد ۱۲۰ را می‌توان با گذاشتن دو نقطه بعد از نام تغییردهنده، به آن اضافه کرد.

همچنین می‌توان چندتغییردهنده را روی یک متغیر اعمال کرد، مانند مثال زیر:

<div>

{$sArticle.description|strip_tags|truncate:120}

</div>

در این مثال، قبل از اعمال تغییردهنده مربوط به تعداد کاراکترها، تگ‌های اچ‌تی‌ام‌ال از متغیر description حذف می‌شوند.

دستورات شرطی

ممکن است بخواهید خروجی‌ها را بر اساس تصمیمات مختلفی تعیین یا دستکاری کنید. می‌توانید مقدار یک متغیر را با استفاده از دستورات شرطی، نسبت به آن‌ شرط‌ها بررسی کنید. در مثال زیر نمونه‌ای از تعریف یک دستور شرطی در اسمارتی را می‌بینید:

{if $sArticle.description}

{$sArticle.description}

{else}

{$sArticle.description_long|strip_tags|truncate:120}

{/if}

در این مثال، تعریف شدن یا نشدن یک متغیر مورد بررسی قرار گرفته است.

حلقه‌های تکرار

برای مدیریت تعدادی زیادی از داده‌ها مثلاً یک لیست طولانی از محصولات، می‌توانیم به صورت پویا آیتم‌های لیست را بررسی کنیم. برای مثال می‌توانید آرایه‌ای برای نگهداری محصولات بسازید و مقدار مربوط به هر محصول را به طور خودکار تولید کنید. کد زیر این کار را انجام می‌دهد:

<ul>

{foreach $sArticles as $item}

<li>{$item.articleName}</li>

{/foreach}

</ul>

همانطور که دیدید، حلقه با یک {foreach}آغاز شده و با یک {/foreach} پایان یافته است. در این مثال حلقه روی $sArticle اجرا شده و نام هر کدام از آن‌ها (articleName) را در آرایه item قرار داده است.

`مقایسه سینتکس اسمارتی با سینتکس پی‌اچ‌پی`

تعریف متغیر در پی‌اچ‌پی:

<?=$foo?>

تعریف متغیر در اسمارتی:

{$foo}

دسترسی به آرایه در پی‌اچ‌پی:

<?=$foo['bar']?>

دسترسی به آرایه در اسمارتی:

{$foo.bar}

همانطور که مشاهده می‌کنید، سینتکس اسمارتی نسبت به پی‌اچ‌پی از سادگی بیشتری برخوردار است.

آیا اسمارتی بهترین موتور قالب برای PHP است؟

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

از بهترین رقبای اسمارتی می‌توان به سونت اشاره کرد که یک موتور قالب شئ‌گرا برای پی‌اچ‌پی است.

نحوه نصب و استفاده از اسمارتی

در این قسمت نصب اسمارتی آموزش داده خواهد شد. با پیش‌نیازها و ابزار لازم برای نصب اسمارتی آشنا خواهید شد.

پیش‌نیازهای نصب اسمارتی

اسمارتی نیازمند یک وب سرور نظیر آپاچی است که پی‌اچ‌پی نسخه 5.2 یا بالاتر روی آن نصب باشد. فرض می‌کنیم که نحوه راه اندازی یک وب سرور را می‌دانید و با اصول و مفاهیم اولیه برنامه نویسی وب آشنایی دارید.

نصب اسمارتی

نصب اسمارتی بسیار آسان است. تنها کافیست که فایل فشرده را دانلود کرده و آن را از فشردگی خارج کنید (extract کنید). حال باید پوشه کتابخانه‌های اسمارتی را در مسیری که برای اپلیکیشن شما قابل دسترسی باشد قرار دهید.

برای دانلود اسمارتی، به سایت رسمی اسمارتی مراجعه کنید.

استفاده از اسمارتی

زمانی که از اسمارتی در ساخت اپلیکیشن خود استفاده می‌کنیم، باید دایرکتوری‌هایی را برای اسمارتی در ساختار دایرکتوری اپلیکیشن خود در نظر بگیریم. در این مسیرها یا دایرکتوری‌ها فایل‌های قالب یا template، قالب‌های کامپایل شده و فایل پیکربندی قالب قرار دارند.

استفاده از اسمارتی نیازمند دسترسی به فایل پی‌اچ‌پی Smarty.class و سپس ساختن یک شئ از نوع اسمارتی است که دسترسی شما به کل سیستم اسمارتی را فراهم خواهد کرد.

یک فایل .tpl شامل تمامی کد لایه طراحی (اچ‌تی‌ام‌ال و سی‌اس‌اس) باید ساخته شود.

یک فایل با فرمت .php نیز توسط توسعه دهنده‌ پی‌اچ‌پی برای ساخت منطق سایت ایجاد خواهد شد. ارتباط بین فایل‌های پی‌اچ‌پی و قالب‌ها به وسیله‌های متغیرهای اسمارتی صورت می‌گیرد.

اگر با اچ‌تی‌ام‌ال و سی‌اس‌اس آشنا نیستید می‌توانید در فرادرس آموزش‌‌های طراحی سایت به وسیله این زبان‌ها را مشاهده کنید:

مثالی از کاربرد اسمارتی

فرض کنید کد پی‌اچ‌پی شما حاوی دو متغیر زیر باشد:

$msg= ‘Hello World, this is mu first Smarty!’;

$title = ‘Hello Smarty World’;

در ادامه، متغیرهای پی‌اچ‌پی به متغیرهای اسمارتی واگذار می‌‌شوند:

$smarty->assign(‘title’,$title);

$smarty->assign(‘message’,$msg);

در نهایت تابع display، نام فایل قالب یا همان فایل .tpl شما را گرفته و آن را به موتور اسمارتی فرستاده و نتیجه را به صورت یک فایل اچ‌تی‌ام‌ال نمایش می‌دهد:

$smarty->display(‘test.tpl’);

کد فایل tpl شما نیز به صورت زیر خواهد بود:

<html>

<head>

<title>{$title}</title>

</head>

<body>

{$message}

</body>

<html>

همانطور که مي‌بینید، در فایل .tpl قادر به استفاده از متغیرهای اسمارتی حاوی مقادیر متغیرهای پی‌اچ‌پی خواهید بود. هیچ گونه دسترسی مستقیم به متغیرهای پی‌اچ‌پی برای شما فراهم نشده است. همچنین کاری به چگونگی تولید مقادیر این متغیرها ندارید. تنها به آن‌ها برای نمایش در صفحات وب دسترسی خواهید داشت.

کلام آخر درباره Smarty چیست؟

در این مقاله موتورهای قالب و یکی از موتوهای قالب پرکاربرد یعنی اسمارتی مورد بحث و بررسی قرار گرفتند.

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

از آنجایی که به عنوان برنامه نویس وب همواره باید اطلاعات خود را بروز نگه دارید و با تکنولوژی‌های جدید آشنا شوید، به هیچ وجه از فرادرس که آموزش‌ها و نکات بسیار مفیدی درباره توسعه و طراحی وب ارائه کرده است، غافل نشوید!

منابع

https://www.techopedia.com/definition/4899/website-template

https://www.pabbly.com/tutorials/template-engine-in-expressjs/

https://www.fullstackpython.com/template-engines.html

https://ourcodeworld.com/articles/read/847/top-7-best-open-source-php-template-engines

https://www.smarty.net/docs/en/what.is.smarty.tpl

https://developers.shopware.com/designers-guide/smarty/

https://www.packtpub.com/product/smarty-php-template-programming-and-applications/9781904811404