یک صفحه وب سایت چگونه ساخته می شود؟ (نحوه کار کردن سایت ها – بخش دوم)

مقدمه: یک صفحه در سایت چگونه ساخته می شود؟

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

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

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

چرا فقط دسترسی با آی پی آدرس سایت، کار سخت و دشواری است؟

به طور ساده و از روی مدل TCP/IP متوجه شدیم که، هر برنامه در کامپیوتر یا هر دستگاه، برای اینکه بتواند درخواست های خود را به سایر دستگاه های شبکه برساند باید از یک سری قوانین پیروی کند.

ابتدا باید درخواست خود را، با توجه به پروتکل TCP/IP ، بسته بندی کند. سپس از روی کارت شبکه خود، به دستگاهی که می داند باید چطور آن بسته ارسال کند، می فرستد.

آن دستگاه ها هم، بسته را به نزدیک ترین مسیریاب فرستاده و به این صورت درخواست به مقصد می رسد.

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

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

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

همین شد که تصمیم گرفته شد برای دسترسی راحت تر برای انسان ها، از یک نام استفاده شود.

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

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

توضیح: ما در یک فیلم جداگانه به صورت مجزا در مورد اینکه دامنه چیست، صحبت کرده ایم. همچنین در این فیلم به صورت کامل انواع نام دامنه  و پسوند های دامنه های اینترنتی را معرفی کرده ایم. همچنین در مورد نحوه ثبت دامنه و موارد مرتبط با آن نیز، به صورت مجزا به بحث نشستیم. برای دیدن کامل این فیلم می توانید از لینک زیر استفاده کنید:

استفاده از نام دامنه و پسوند دامنه برای ساخت سایت

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

بر همین اساس، یک سری موسسه هایی به وجود آمد که بر این  نام گذاری ها نظارت داشته باشند و آن ها را ثبت کنند(همانند IANA). مهم این بود که این اسم ها هم منحصر به فرد باشند.

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

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

عموما دو دسته بندی کلی برای پسوند های دامنه وجود دارد. یکی دسته بندی های عمومی که قدیم محدود بود اما چند سال هست که بسیار متنوع شده، و دسته بندی های مبتنی بر کشور.

هر کدام از آن ها، برای گرفتن نام مورد نظر، ممکن است قوانین خاص خود را داشته باشند (مثلا نحوه گرفتن دامنه به صورت ir با us فرق دارد، همین طور گرفتن پسوند edu و سایر موارد دیگر)

شکل بالا هم در واقع دسته بندی های یه مقدار جدیدتر در مورد Top level domain را نشان می دهد (که عموما با اسم پسوند دامنه شناخته می شود).

آشنایی با بخش های مختلف اسم دامنه

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

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

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

بسته به نوع document یا سندی که طرف مقابل برای ما ارسال می کند، ممکن است نوع جواب متفاوت باشد.

به عنوان مثال در جایی برای ما یک صفحه html برگشت داده  می شود؛ در جایی فقط یک عکس برگشت داده می شود؛ در جاهایی هم فقط یک سری داده خام تحت یک فرمت مثلا json به ما برگشت داده می شود. (جلوتر وقتی در مورد درخواست فرستادن برای باز شدن یک سایت صحبت کردیم، دقیق تر در مورد http صحبت می کنیم)

توضیح کوتاه: ما به صورت کامل در یک ویدئو مجزا، بصورت کامل در مورد پروتکل Http، صحبت کرده ایم. در صورتی که می خواهید در این مورد بیشتر اطلاعات کسب کنید، می توانید از لینک زیر استفاده کنید:

نحوه تبدیل نام دامنه به آدرس آی پی واقعی یک سایت چگونه است؟

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

حتما باید مکانیزمی وجود داشته باشد که بتواند اسم مورد نظر را برای آدرس مورد نظر در خود ذخیره کند تا هر گاه دستگاهی یک اسمی را درخواست کرد، بتواند آدرس مورد نظر عددی آن را پیدا کند. این وظیفه در شبکه یا اینترنت بر عهده name server ها می باشد.

واقع به صورت کامل تر یک DNS یا domain name server یک سرور یا یک سرویس بر روی یک سرور است که وظیفه تبدیل اسم ها به آدرس های عددی آن ها را بر عهده دارد. این سرورها هم به صورت داخلی در شبکه و هم به صورت خارجی در کل اینترنت موجود هستند.

تعدادی name server های بین المللی داریم که توسط یک سازمان واحد به  نام verisign مدیریت می شوند و تمامی سایر name server های بین المللی باید خود را در این سازمان، verify کنند.

به این ترتیب تبدیل اسم به آدرس آی پی انجام شده و درخواست ما می تواند برای طرف مقابل فرستاده شود. در نظر بگیرید که مسیریاب های مختلف، دریافت ما را به مقصد رسانده و دوباره جواب درخواست را به ما بر می گردانند.

سرور یک سایت، چگونه به درخواست رسیده پاسخ می دهد؟

در طرف مقابل، همین طور که کلاینت از مرورگر یا یک برنامه خاص برای فرستادن درخواست خود استفاده می کند، سرور یک سایت نیز برای پاسخ دادن، از یک برنامه استفاده می کند.

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

سپس  از روی هدر های مختلفی که بر روی آن گذاشته شده، به لایه TCP و سپس application می رسد. مثلا در مثال خاص ما، می فهمد که یک درخواست آمده که پروتکل آن HTTP هست و پورت آن نیز ۸۰ می باشد. بنابراین می فهمد که سرویس دهنده  این درخواست، در واقع برنامه یا سرویسی به نام وب سرور است و درخواست رسیده را به آن ارسال می کند.

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

وب سرور های معروفی هستند که روی سرور ها وظیفه پاسخ به درخواست های http رسیده به یک سرور را دارند، مثل آپاچی، nginx و لایت اسپید (هر کدام مزیت ها و معایب خاص خودشون را دارند که بحث صحبت ما نیست).

در نظر داشته باشید که درخواست هایی که در لایه اپلیکیشن های هر دو طرف فرستاده می شود، در قالب پروتکل Http هست.

در واقع کلاینت یک http request می فرستد و طرف مقابل با یک http response به ما پاسخ می دهد. خود پروتکل Http دارای دو بخش header body هست.

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

در هدر یک سری اطلاعات کنترلی وجود دارد. در صورتی که در خواست به درستی پاسخ شود، در هدر موقع پاسخ، سرور status code مساوی ۲۰۰  را بر می گرداند. اگر این این صفحه موجود نباشد کد وضعیت ۴۰۰  برگشت داده می شود. بسته به اینکه درخواست داده شده در سمت سرور و پاسخ آن، در چه وضعیتی باشد، عملا یک status code از سمت وب سرور برگشت داده می شود.

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

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

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

وب سرور برای بررسی اینکه چه پاسخی را برای ما باید بفرستد، به جاهایی مراجعه می کند که برای آن تعریف شده است (مثال درایو c کامپیوتر خودمان).

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

داده های مورد نظر، هم می تواند در بین فایل های موجود در سرور؛ و هم می تواند در دیتابیس آن موجود باشد که اطلاعات مرتبط را در خود ذخیره می کند. در واقع پایگاه داده، جایی برای مدیریت داده های سایت یا اپلیکیشن ما به صورت منظم و با قابلیت دسترسی بهتر و سریع تر می باشد.

پس این موارد روی آن ها process انجام شده و به  وب سرور داده می شود. وب سرور آن ها را در قالب پروتکل http در آورده (یعنی یک header و body به آن اضافه می کند) و دوباره مثل همان فرایند سمت کاربر، به لایه های پایین تر فرستاده می شود تا به دست ما برسد.

در سمت کاربر (کلاینت یا همان Front-End) چگونه یک صفحه سایت به نمایش در می آید؟

در واقع مرورگر برای تفسیر اطلاعات نشانه گذاری شده که شامل فایل های Html  و css و  javascript هست، از مدلی به نام document object model استفاده می کند.

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

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

ما در سمت فرانت یا کاربر یا کلاینت، با Html و  css و  javascript سر کار داریم و سمت سرور با زبان های برنامه نویسی سمت سرور و پایگاه داده های مختلف برای ذخیره سازی داده ها.

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

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

چگونه CMS ها در ساخت سایت به ما کمک می کنند؟

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

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

مهم ترین نکته در cms ها، این هست که پنل کاربری قابل فهمی برای مدیریت داده هایی دارند که قرار است در اختیار کاربران قرار بگیرد. همین باعث شد تا به سرعت cms های مختلف برای حوزه های مختلف (چه عمومی و چه اختصاصی) توسعه داده شود.

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

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

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

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

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

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

فرقی ندارد که وردپرس یا هر cms یا سیستم دیگری را انتخاب کنید. اما در نظر داشته باشید در ابتدای کار، اگه cms دیگه ای را انتخاب کنید، دردسر های واقعا زیادی را خواهید داشت که در وردپرس چنین چیزی وجود ندارد.

به دلیل حجم بالای استفاده از وردپرس در سراسر دنیا،  هر امکاناتی را که فکرش را بکنید به صورت رایگان یا با هزینه های کم، برای این سیستم موجود هست. در نتیجه عملا شما از بسیاری از چیزها بی نیاز خواهید شد. این در صورتی است که برای اکثر cms ها چنین چیزی وجود ندارد.

در صورتی که می خواهید با بالا آوردن یک سایت با استفاده از CMS وردپرس آشنا شوید، می توانید از آموزش بعدی ما (در لینک زیر) استفاده کنید:

نتیجه گیری برای مقاله «سایت ها چگونه ساخته می شوند؟»

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

در ابتدا به بررسی این مشکل پرداختیم که چرا فقط دسترسی به سایت با آی پی آدرس آن، برای یک کاربر مشکل می باشد.

پس از آن به بررسی نام دامنه و پسوند دامنه، برای ساختن یک وبسایت اشاره کردیم. در ادامه با بخش های مختلف نام یک دامنه و همین طور ساختار URL در صفحات وب، آشنا شدیم.

سپس فهمیدیم که Name server ها چگونه کار تبدیل یک نام دامنه با آدرس آی پی یک سایت (و بالعکس) را انجام می دهند. در واقع با مراحل Resolve کردن نام یک دامنه به صورت کامل آشنا شدیم.

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

در انتها نیز به این موضوع پرداختیم که چگونه CMS ها مثل وردپرس، برای ساخت سایت، می توانند به ما کمک کنند.

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

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

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

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

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