وبسایت واقعاً چیست؟
وقتی یک سایت را در مرورگر باز میکنیم، معمولاً فقط ظاهر آن را میبینیم؛ متنها، تصاویر، دکمهها، منوها، فرمها و بخشهای مختلف صفحه.
اما یک وبسایت فقط همین ظاهر قابل مشاهده نیست. پشت هر سایت، چند لایه مختلف با هم کار میکنند تا صفحه برای کاربر نمایش داده شود و سایت بتواند کارهایی مثل نمایش محتوا، ثبتنام کاربر، ارسال فرم، فروش محصول یا ذخیره اطلاعات را انجام دهد.
برای درک سادهتر، میتوانیم وبسایت را مثل یک ساختمان در نظر بگیریم. ساختمان فقط نمای بیرونی ندارد؛ به زمین، آدرس، طراحی داخلی، سیستم برق، لولهکشی، انبار و مدیریت نیاز دارد. وبسایت هم همینطور است.
در این جلسه، هدف ما این است که با اجزای اصلی یک سایت آشنا شویم، بدون اینکه وارد جزئیات سنگین برنامهنویسی یا سرور شویم.
هاست و دامنه در ساختار یک سایت چه نقشی دارند؟
هر وبسایت برای اینکه در اینترنت قابل دسترسی باشد، به یک محل نگهداری و یک آدرس نیاز دارد.
هاست محل نگهداری فایلها و اطلاعات سایت است. یعنی جایی که فایلهای سایت، تصاویر، کدها و بخشی از اطلاعات مورد نیاز سایت در آن قرار میگیرند.
دامنه آدرس قابل خواندن سایت است؛ همان چیزی که کاربر در مرورگر وارد میکند، مثل example.com.
اگر بخواهیم با مثال ساختمان توضیح بدهیم:
- هاست مثل زمینی است که ساختمان سایت روی آن قرار میگیرد.
- دامنه مثل آدرس آن ساختمان است.
- کاربر با وارد کردن دامنه، به سمت سایت هدایت میشود.
در این جلسه فقط باید نقش کلی هاست و دامنه را بدانیم. جزئیات مهمتر مثل دیتاسنتر، سرور، IP، انواع هاست، VPS، سرور اختصاصی و نحوه باز شدن سایت در مرورگر را در جلسه بعد بررسی میکنیم.
ظاهر سایت؛ فرانتاند چیست؟
بخشی از سایت که کاربر در مرورگر میبیند، فرانتاند یا Frontend نام دارد.
فرانتاند شامل ظاهر صفحه، چیدمان بخشها، رنگها، فونتها، دکمهها، فرمها، منوها، تصاویر و تعاملات ظاهری سایت است. این همان بخشی است که کاربر مستقیماً با آن ارتباط برقرار میکند.
کدهای فرانتاند در مرورگر کاربر اجرا میشوند. به همین دلیل به آنها کدهای سمت کاربر یا Client-side هم گفته میشود.
سه تکنولوژی اصلی در فرانتاند عبارتاند از:
| تکنولوژی | نقش در سایت |
|---|---|
| HTML | ساختار صفحه، مثل تیترها، متنها، لینکها و بخشها |
| CSS | طراحی ظاهری، رنگ، فاصله، چیدمان و واکنشگرایی |
| JavaScript | تعاملات، حرکتها و رفتارهای پویا در مرورگر |
HTML اسکلت صفحه را میسازد، CSS ظاهر آن را زیبا و منظم میکند، و JavaScript باعث میشود صفحه با کاربر تعامل داشته باشد.
برای مثال، باز شدن یک منو، تغییر حالت یک دکمه، نمایش یک اسلایدر یا بررسی ساده یک فرم در مرورگر میتواند با JavaScript انجام شود.
چرا کدهای ظاهری سایت قابل مشاهده هستند؟
چون کدهای فرانتاند باید به مرورگر کاربر ارسال شوند تا مرورگر بتواند صفحه را نمایش دهد.
به همین دلیل، اگر روی یک صفحه راستکلیک کنید و گزینههایی مثل View Page Source یا Inspect را بزنید، میتوانید بخشی از کدهای ظاهری سایت را ببینید.
اما نکته مهم این است که با این کار فقط ظاهر سایت را میبینید، نه منطق پشت صحنه، نه دیتابیس، نه رمزها، نه تنظیمات اصلی و نه کدهای سمت سرور.
پس ممکن است بتوانید ظاهر یک بخش از سایت را بررسی کنید، اما نمیتوانید با راستکلیک کردن، موتور اصلی سایت را ببینید یا بردارید.
ابزارهای کمکی فرانتاند
در طراحی سایت، همیشه لازم نیست همه چیز از صفر کدنویسی شود. ابزارهای زیادی وجود دارند که ساخت ظاهر سایت را سریعتر، منظمتر و حرفهایتر میکنند.
فریمورکهای CSS مثل Bootstrap و Tailwind مجموعهای از کلاسها و الگوهای آماده هستند که به طراح و برنامهنویس کمک میکنند سریعتر ظاهر صفحات را بسازد.
Sass یک ابزار کمکی برای نوشتن CSS منظمتر در پروژههای بزرگتر است.
کتابخانهها و فریمورکهای JavaScript مثل React و Vue برای ساخت رابطهای کاربری پیچیدهتر استفاده میشوند.
اما در مسیر این دوره، لازم نیست در ابتدای راه همه این ابزارها را حرفهای یاد بگیرید. ما با وردپرس، صفحهسازهای حرفهای مثل Bricks و ابزارهای هوشمند کار میکنیم. مهم این است که بدانید این ابزارها در کدام لایه سایت قرار میگیرند و چه نقشی دارند.
محتوای چندرسانهای در سایت
بخش مهم دیگری از هر سایت، محتوای چندرسانهای است.
محتوای چندرسانهای شامل فایلهایی است که فقط متن ساده نیستند؛ مثل:
- تصاویر
- ویدیوها
- فایلهای صوتی
- پادکستها
- آیکونها
- فایلهای دانلودی
- انیمیشنها
مدیریت درست این فایلها در کیفیت سایت تأثیر زیادی دارد. یک تصویر سنگین، یک ویدیوی نامناسب یا فایلهای بدون نظم میتوانند باعث کند شدن سایت و کاهش کیفیت تجربه کاربر شوند.
یک طراح سایت حرفهای فقط ظاهر صفحه را نمیچیند؛ بلکه به حجم فایلها، فرمت تصاویر، کیفیت رسانهها، سرعت بارگذاری و نظم فایلها هم توجه میکند.
در جلسات بعدی، مدیریت تصاویر، فرمتها، نسبت ابعاد و آمادهسازی فایلهای رسانهای را دقیقتر بررسی میکنیم.
بکاند چیست و چرا سایت به آن نیاز دارد؟
اگر فرانتاند ظاهر سایت باشد، بکاند یا Backend بخش پشت صحنه سایت است.
بکاند روی سرور اجرا میشود و کاربر آن را مستقیماً نمیبیند، اما بسیاری از کارهای اصلی سایت در همین بخش انجام میشود.
برای مثال، وقتی کاربر وارد حساب کاربری میشود، فرم ارسال میکند، محصولی را به سبد خرید اضافه میکند، دیدگاه ثبت میکند یا یک نوشته از سایت باز میشود، بکاند در پشت صحنه درگیر پردازش اطلاعات است.
به کدهای بکاند، کدهای سمت سرور یا Server-side هم گفته میشود.
برخلاف کدهای فرانتاند، کدهای سمت سرور با راستکلیک یا Inspect قابل مشاهده نیستند. این کدها روی سرور اجرا میشوند و فقط نتیجه نهایی به مرورگر کاربر ارسال میشود.
زبانهای مختلفی برای برنامهنویسی سمت سرور وجود دارند؛ مثل PHP، Python، ASP.NET، Ruby و Node.js. در مسیر وردپرس، مهمترین زبان برای ما PHP است، چون وردپرس با PHP ساخته شده است.
در این دوره قرار نیست از ابتدا وارد برنامهنویسی سنگین PHP شویم، اما باید بدانیم وردپرس در پشت صحنه با PHP کار میکند.
سایت ایستا و سایت پویا چه تفاوتی دارند؟
سایت ایستا یا Static معمولاً صفحاتی دارد که از قبل آماده شدهاند و بدون پردازش پیچیده به کاربر نمایش داده میشوند.
اما سایت پویا یا Dynamic میتواند بر اساس شرایط مختلف، محتوای متفاوتی تولید کند یا اطلاعات جدیدی از کاربر بگیرد.
وردپرس یک سیستم پویاست. یعنی وقتی کاربر وارد یک صفحه میشود، وردپرس فقط یک فایل ساده آماده را نمایش نمیدهد؛ بلکه اطلاعات را از دیتابیس میخواند، تنظیمات سایت را بررسی میکند، قالب را اعمال میکند و خروجی نهایی را به مرورگر میفرستد.
برای مثال، یک فروشگاه اینترنتی، سایت عضویت، فرم ثبتنام، بخش دیدگاهها و پنل کاربری همگی به پردازش سمت سرور نیاز دارند.
اگر اینترنت را قطع کنید و فقط ظاهر یک صفحه ذخیرهشده را ببینید، ممکن است متن و تصویر صفحه را مشاهده کنید، اما دیگر نمیتوانید وارد حساب شوید، خرید کنید یا اطلاعات جدید ارسال کنید. چون ارتباط با بکاند و سرور قطع شده است.
دیتابیس چیست و چه نقشی در سایت دارد؟
هر سایت پویا به جایی برای ذخیره اطلاعات نیاز دارد. اینجا نقش دیتابیس یا پایگاه داده مشخص میشود.
دیتابیس مثل حافظه سایت است. اطلاعات مهم سایت در آن ذخیره میشوند؛ مثل نوشتهها، برگهها، کاربران، تنظیمات، دیدگاهها، محصولات، سفارشها و بسیاری از دادههای دیگر.
در وردپرس، بخش زیادی از اطلاعات سایت داخل دیتابیس قرار دارد. وقتی یک نوشته را باز میکنید، وردپرس اطلاعات آن نوشته را از دیتابیس میخواند، آن را با قالب و تنظیمات سایت ترکیب میکند و خروجی نهایی را به مرورگر کاربر میفرستد.
PHP بهعنوان زبان سمت سرور با دیتابیس ارتباط برقرار میکند. یعنی اطلاعات را میگیرد، پردازش میکند و نتیجه مناسب را آماده میسازد.
در سایتهای وردپرسی معمولاً با MySQL یا MariaDB سروکار داریم. دانستن جزئیات تخصصی دیتابیس در ابتدای راه لازم نیست، اما باید بدانید که وردپرس بدون دیتابیس نمیتواند مثل یک سیستم پویا کار کند.
نقشهای تخصصی در ساخت یک سایت
در پروژههای بزرگ، ساخت و نگهداری یک سایت ممکن است بین چند تخصص تقسیم شود.
Frontend Developer روی ظاهر سایت، رابط کاربری و کدهایی کار میکند که در مرورگر اجرا میشوند.
Backend Developer روی منطق پشت صحنه، پردازش اطلاعات، ارتباط با دیتابیس و عملکردهای سمت سرور کار میکند.
متخصص دیتابیس روی مدیریت، ساختار، امنیت و بهینهسازی دادهها تمرکز دارد.
اما برای شروع طراحی سایت، لازم نیست از همان ابتدا یکی از این مسیرها را بهصورت عمیق انتخاب کنید. چیزی که برای یک طراح سایت وردپرسی مهم است، داشتن درک پایهای از همه این بخشهاست.
شما قرار نیست در شروع کار متخصص همه چیز باشید، اما باید بدانید هر بخش چه نقشی دارد و وقتی مشکلی پیش میآید، ریشه آن ممکن است در کدام لایه باشد.
مسیر یادگیری ما در این دوره
در این دوره هدف ما این نیست که شما را وارد حجم زیادی از اصطلاحات و ابزارهای پراکنده کنیم. مسیر یادگیری باید مرحلهبهمرحله و بر اساس نیاز واقعی پروژه باشد.
ابتدا زیربنای وب را میشناسیم؛ یعنی میفهمیم سایت از چه بخشهایی ساخته میشود، هاست و دامنه چه نقشی دارند، وردپرس چگونه نصب میشود و چرا مفاهیمی مثل PHP، دیتابیس، رسانه، امنیت و نگهداری اهمیت دارند.
بعد از اینکه این پایه را شناختید، یادگیری ابزارهایی مثل Bricks، ووکامرس، سئو، بهینهسازی سرعت و امنیت برای شما منطقیتر و سادهتر میشود.
رویکرد ما این است که از ابزارهای حرفهای و هوش مصنوعی کمک بگیریم تا سریعتر و هوشمندانهتر کار کنیم، اما در عین حال منطق پشت ابزارها را هم بفهمیم.
اگر فقط قالب و افزونه نصب کنید، با اولین خطا یا مشکل جدی متوقف میشوید. اما اگر ساختار سایت را بشناسید، میتوانید بهتر تصمیم بگیرید، بهتر عیبیابی کنید و در پروژههای واقعی حرفهایتر عمل کنید.
مفاهیم کلیدی جلسه
هاست (Host): محل نگهداری فایلها و اطلاعات سایت روی اینترنت.
دامنه (Domain): آدرس قابل خواندن سایت که کاربر در مرورگر وارد میکند.
فرانتاند (Frontend): بخش قابل مشاهده سایت که در مرورگر کاربر اجرا میشود.
کلاینتساید (Client-side): کدهایی که در سمت کاربر و داخل مرورگر اجرا میشوند.
اچتیامال (HTML): زبان ساختاردهی صفحه و تعیین اجزای اصلی محتوا.
سیاساس (CSS): زبان استایلدهی برای طراحی ظاهر، رنگ، فاصله و چیدمان صفحه.
جاوااسکریپت (JavaScript): زبان ایجاد تعامل و رفتارهای پویا در مرورگر.
بکاند (Backend): بخش پشت صحنه سایت که منطق اصلی سایت را پردازش میکند.
سرورساید (Server-side): کدهایی که روی سرور اجرا میشوند و کاربر مستقیماً آنها را نمیبیند.
پیاچپی (PHP): زبان برنامهنویسی سمت سرور که وردپرس با آن ساخته شده است.
دیتابیس (Database): محل ذخیره اطلاعات سایت مثل نوشتهها، کاربران، تنظیمات و محصولات.
مایاسکیوال (MySQL): یکی از رایجترین سیستمهای مدیریت دیتابیس در سایتهای وردپرسی.
نکات مهم برای مرور درس
یک وبسایت فقط چیزی نیست که در مرورگر میبینیم.
ظاهر سایت با HTML، CSS و JavaScript ساخته میشود و در مرورگر کاربر اجرا میشود.
بخشی از کدهای ظاهری سایت قابل مشاهده هستند، اما این به معنی دسترسی به منطق اصلی سایت نیست.
بکاند روی سرور اجرا میشود و کارهایی مثل ورود کاربر، ثبت فرم، خرید، نمایش محتوای پویا و ارتباط با دیتابیس را مدیریت میکند.
وردپرس یک سیستم پویاست و برای نمایش محتوا با PHP و دیتابیس کار میکند.
دیتابیس حافظه سایت است و اطلاعات مهم سایت در آن ذخیره میشود.
برای شروع طراحی سایت، لازم نیست متخصص همه بخشها باشید، اما باید نقش هر بخش را بشناسید.
تمرین پیشنهادی
برای درک بهتر تفاوت ظاهر سایت و پشت صحنه آن، این تمرین را انجام دهید:
- یک سایت دلخواه را در مرورگر باز کنید.
- روی صفحه راستکلیک کنید و گزینه View Page Source یا Inspect را انتخاب کنید.
- سعی کنید بخشهایی از HTML، CSS یا JavaScript را تشخیص دهید.
- حالا به این فکر کنید که اطلاعاتی مثل کاربران، سفارشها، رمزها، تنظیمات و محتوای ذخیرهشده سایت در این کدهای ظاهری دیده نمیشوند.
- نتیجه بگیرید که ظاهر سایت در مرورگر قابل مشاهده است، اما منطق اصلی و اطلاعات سایت در سمت سرور و دیتابیس قرار دارند.
این تمرین کمک میکند تفاوت بین فرانتاند، بکاند و دیتابیس را بهتر درک کنید.
جمعبندی جلسه
در این جلسه یاد گرفتیم که وبسایت فقط یک صفحه زیبا در مرورگر نیست. هر سایت از چند لایه اصلی ساخته میشود: هاست و دامنه برای محل و آدرس، فرانتاند برای ظاهر قابل مشاهده، فایلهای چندرسانهای برای محتوا، بکاند برای پردازش و دیتابیس برای ذخیره اطلاعات.
درک این لایهها باعث میشود وردپرس را اصولیتر یاد بگیرید. از اینجا به بعد وقتی درباره هاست، دامنه، PHP، دیتابیس، گوتنبرگ، رسانه، امنیت یا خطاهای وردپرس صحبت میکنیم، میدانید هر موضوع در کدام بخش از ساختار سایت قرار میگیرد.
در جلسه بعدی، دقیقتر وارد بحث هاست، دامنه، دیتاسنتر، سرور و IP میشویم و بررسی میکنیم سایت چطور در اینترنت برای کاربر باز میشود.