</>مدرسه زیب‌موجیاد بگیر، تمرین کن، بساز
مدرسهPHPدرس 4
درس 4 از 80 · ۴۵ دقیقه

ترکیب PHP و HTML در اولین صفحه پویا

HTML اسکلت صفحه را می‌سازد و PHP مقدارهای متغیر را در جای مناسب قرار می‌دهد. تگ کوتاه <?= برای نمایش یک مقدار در قالب HTML خوانا و استاندارد است.

۰امتیاز شما
نقشه این درس

بعد از این درس دقیقاً چه بلدی؟

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

فرم چاپی با جای خالی

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

نکته مهم برای شروع PHP

HTML اسکلت صفحه را می‌سازد و PHP مقدارهای متغیر را در جای مناسب قرار می‌دهد. تگ کوتاه <?= برای نمایش یک مقدار در قالب HTML خوانا و استاندارد است.

چرا مهم است؟ این مفهوم یکی از آجرهای مسیر حرفه‌ای PHP است. فعلاً لازم نیست همه جزئیات را حفظ کنی؛ باید دلیل استفاده و اثر هر خط را بفهمی.

اولین تمرین تو: قالب کارت همیشه ثابت است، اما نام هر کاربر متفاوت است. PHP نام را در محل تعیین‌شده قرار می‌دهد.

مفهوم‌های اصلی

اول بفهم، بعد کد بنویس

قالب HTML

بخش ثابت و قابل مشاهده صفحه است.

<?= ?>

شکل کوتاه و استاندارد echo برای قرار دادن مقدار در HTML است.

Escape خروجی

برای داده کاربر باید نویسه‌های HTML را بی‌خطر کنیم تا کد ناخواسته اجرا نشود.

سناریوی واقعی

کارت خوش‌آمدگویی کاربر

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

ورودی روشنقانون قابل توضیحخروجی قابل بررسی
بازی ساختن کد

قطعه‌ها را به ترتیب درست بچین

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

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

    هنوز پاسخی بررسی نشده است.

    کارگاه تعاملی

    کد را کامل کن و ساختار آن را بررسی کن

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

    lesson-4.php
    گزارش بررسیبررسی‌گر ساختار آماده است
    کد را کامل کن و «بررسی ساختار» را بزن.
    در مثال‌های پیشرفته، اجرای ناامن سروری نداریم؛ اجزای ضروری کد بررسی می‌شوند.
    کدخوانی استاد

    این مثال خط‌به‌خط چه می‌گوید؟

    فعلاً حفظ نکن؛ هر خط را به یک جمله ساده تبدیل کن.

    1. 1<?php

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

    2. 2$name = "سارا";

      یک مقدار با نام $name نگه‌داری می‌شود تا در خط‌های بعد دوباره استفاده شود.

    3. 3?>

      این خط بخشی از منطق اصلی مثال است؛ نام‌ها و علامت‌ها را از راست به چپ، بخش‌به‌بخش بخوان.

    4. 4<h1>سلام <?= htmlspecialchars($name, ENT_QUOTES, "UTF-8") ?></h1>

      این خط بخشی از منطق اصلی مثال است؛ نام‌ها و علامت‌ها را از راست به چپ، بخش‌به‌بخش بخوان.

    5. 5<p>به مدرسه PHP خوش آمدی.</p>

      این خط بخشی از منطق اصلی مثال است؛ نام‌ها و علامت‌ها را از راست به چپ، بخش‌به‌بخش بخوان.

    منبع رسمی همین درسمستندات اصلی PHP را ببین ←برای عمیق‌ترشدن؛ لازم نیست در شروع همه آن را بخوانی.
    حالا نوبت توست

    نام را تغییر بده و یک متغیر تازه برای نام دوره بساز؛ سپس آن را داخل پاراگراف نمایش بده.

    تمرین پلکانی

    از ساده به چالشی، بدون پرش

    ۱ · گرم‌کردن

    یکی از مقدارهای مثال را عوض کن، خروجی را روی کاغذ حدس بزن و سپس بررسی کن.

    ۲ · تثبیت

    نام را تغییر بده و یک متغیر تازه برای نام دوره بساز؛ سپس آن را داخل پاراگراف نمایش بده.

    ۳ · ساختن

    سناریوی «کارت خوش‌آمدگویی کاربر» را با نام‌های واضح‌تر و یک حالت تازه گسترش بده.

    دام‌های رایج

    این سه اشتباه را انجام نده

    1

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

    2

    باز و بسته‌کردن بی‌دلیل PHP در هر کلمه

    3

    قرار دادن منطق سنگین داخل قالب نمایش

    آزمون پایان درس

    5 پرسش کوتاه؛ مطمئن شو واقعاً یاد گرفته‌ای

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

    پرسش 1 از 5

    <?= $name ?> چه کاری انجام می‌دهد؟

    پرسش 2 از 5

    کدام توضیح، «قالب HTML» را دقیق‌تر بیان می‌کند؟

    پرسش 3 از 5

    بهترین قدم بعد از خواندن مثال این درس چیست؟

    پرسش 4 از 5

    کدام روش نشان می‌دهد این درس را واقعاً فهمیده‌ای؟

    پرسش 5 از 5

    کدام رفتار احتمال خطا را در همین موضوع بیشتر می‌کند؟

    پایان درس 4

    درس را فقط وقتی تمام کن که کد را تغییر داده‌ای

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