وبسایت های امروز جزئی از زندگی ما شده‌اند، فراگیری آنها به حدی است که برای کوچکترین قدم در دنیای دیجیتال باید با آنها تعامل کنیم، ما یا به وبسایت های دیگران سر می‌زنیم یا با راه‌اندازی وب سایت خودمان، صاحب یکی از آنها هستیم. بر اساس مولفه‌های «باسوادی مدرن» آشنایی و راه‌اندازی ابتدایی سایت‌ها به زودی در ردیف موارد روتینی مانند کار با موبایل و حتی تلفن در خواهد آمد!در دهه ۱۹۹۰ بود که وب رونق گرفت و شرکت‌های بزرگی نظیر یاهو، گوگل و مایکروسافت به طور جدی پا به عرصه گذاشته و با راه‌اندازی وبسایت خود سرویس‌های نرم‌افزاری متفاوتی را ارائه دادند. از آن زمان نزدیک به ۳۰ سال گذشته و اکنون، وب و خدمات آن، نظیر وب‌سایت‌ها و اپلیکیشن‌ها آنچنان فراگیر شده‌اند که از اشخاص حقیقی ساده تا کسب‌وکارهای بزرگ بین‌المللی به نوعی درگیر، وابسته و ارائه‌دهنده خدماتی شده‌اند که بستر اصلی آن «وبسایت» است؛ در این مقاله قصد داریم شما را با مولفه‌ها و ابعاد اصلی، الزامات و مبانی راه‌اندازی وبسایت، نقش و چگونگی عملکرد بخش‌های مختلفش آشنا کنیم.
سیر تحول وب‌سایت‌های اینترنتی
سایت‌ها و تکنولوژی‌های مربوط به آن نیز مانند خودِ ساختار وب، دچار تحولات زیادی شده‌اند، گذر از دوره پیدایش راه‌اندازی وب سایت‌های Static که عملا ترکیبی از نسخه‌های ابتدایی HTML و CSS بودند تا شکلگیری زبان قدرتمند JavaScript که جوانه‌های شکلگیری زبان‌های سمت سرور و شی‌گرا را به وجود آورد تا سیستم‌های مدیریت محتوای آماده با دنیایی از افزونه‌ها که راه‌اندازی و مدیریت سایت را برای بسیاری از کاربران با دانش ابتدایی کامپیوتر میسر کرده است. آنهایی که به دنبال کسب درآمد بوده و از زاویه دیجیتال مارکتینگ به موضوع نگاه می‌کنند، از راه‌اندازی وبسایت اغلب به دنبال یک فروشگاه‌ساز بوده و به دنبال راه‌اندازی فروشگاه اینترنتی هستند، ما در این مقاله افراد با نیازها و نیت‌های مختلف را در نظر گرفته‌ایم تا نهایتا بتوانند به دلخواه خود به راه‌اندازی وبسایت اینترنتی‌شان به اشکال گوناگون بپردازند
ساخت و ایجاد ویژگی‌های ظاهری سایت
فعلا لازم است در این حد بدانید که ویژگی‌های ظاهری سایت به کمک HTML,CSS,Javascript ساخته شده و البته یک زبان سمت سرور، موتور و نیرو محرکه سایت است؛ به عکس زیر که یک استعاره به ساختار یک سایت است توجه کنید:
ترکیبی از گرافیک سایت، html، css و javascrip
بگذارید در بدو امر، قضایا را به شکلی ساده و در واقع کاربردی شروع کنیم. در فرایند راه‌اندازی وبسایت اینترنتی، روند شکل گیری «ظاهر سایت» اغلب بدین گونه است که ابتدا یک پوسته با ابزارهای گرافیکی نظیر فتوشاپ تهیه می‌شود. این کاری است که توسط طراح رابط کاربری یا همان ui designer صورت می‌گیرد و اولین قدم از راه‌اندازی وبسایت اینترنتی است. سپس المان‌های بی‌جان این پوسته نظیر دکمه‌ها و باکس‌ها، توسط css و html کد شده و نهایتا امکان تعریف رویداد و تعامل سایت با کاربر به وسیله کدهای javascript صورت می‌گیرد.
درباره HTML:
HTML یا همان hyper text markup language به معنای زبان نشانه‌گذاری ابرمتن است زبان HTML از تگ ها تشکیل شده است. تگ ها کدهایی هستند که ما بین علامت های کوچکتر و بزرگتر قرار می گیرند (به این صورت: <tag>)
تگ ها محتویات یک صفحه وب را در برمی گیرند و ساختار کلی صفحه را تشکیل می دهند. مرورگرهای وب تگ های HTML را خوانده و متون و تصاویر را بر طبق آنها نشان می دهند.
به علاوه آنچه در مرورگر کاربر نمایش داده می‌شود تماما، تبدیلی به کدهای HTML است و کاربر به کدهای پشت‌صحنه دسترسی و تعاملی با آنها ندارد.
تا قبل از html 5 ظاهرسازی سایت نیز به وسیله تگ‌های html انجام می‌شد، اکنون اما در فرایند راه‌اندازی وبسایت، جلوه‌های بصری سایت توسط css یا همان cascading style sheet انجام شده و فایل‌های css و javascript به صورت جداگانه تهیه شده و در فایل html اصطلاحا embed و فراخوانی می‌شوند. این رویه‌ها و استاندارد‌ها به نوعی از طرف W3C به عنوان الزامات راه‌اندازی وبسایت به عنوان یک روند صحیح در نظر گرفته می‌شوند.
ساختار HTML و تگ‌ها:
ساختار اصلی HTML شامل تگ‌هایی است که در میان آنها عده ای اصلی هستند، این تگ‌های اصلی شامل خود تگ HTML و تگ head و تگ body هستند.
تگ HTML:
المان <HTML> به کامپیوتر شما میگوید که این یک صفحه ی HTML می باشد. این تگ ریشه ی صفحه وب است. به این معنی که باقی المان ها همگی باید زیر مجموعه ی این المان باشند.
عبارت <doctype html> حتما باید قبل از المان <html> بیاید و مشخص میکند که این یک صفحه ی HTML 5 است. در نسخه های قدیمی تر HTML عبارت doctype پیچیده تر بود و نیازمند معرفی کردن پارامتر های متعددی بود. اما در HTML 5 عبارت doctype خلاصه شده است.
خاصیت lang از المان HTML مشخص میکند که زبان متن های صفحه ی وب چیست. مقدار en-US برای خاصیت lang بیانگر این است که متن های این صفحه به زبان انگلیسی می باشد. برای زبان فارسی از مقدار fa-IR استفاده کنید.
تگ head:
تگ head حاوی اطلاعات اضافی یا metadata در مورد صفحه ی وب است. منظور از metadata این است که داده ها و اطلاعاتی را در مورد داده های موجود در صفحه ی وب در این قسمت قرار می دهیم.
همچنین درون المان head، المان title قرار می‌گیرد که عنوان صفحه ی وب را مشخص میکند. وجود المان title در درون head الزامی است. اطلاعاتی نظیر عنوان صفحه ی وب، نویسنده ی صفحه ی وب، نام شرکت یا موسس سایت، کلمات کلیدی و همچنین استایل ها و کدهای جاوا اسکریپت.
تگ Body:
المان body حاوی اطلاعات و داده های اصلی و بدنه ی صفحه ی وب می باشد؛ المان body زیر مجموعه ی HTML می باشد و پس از تگ head ظاهر می شود. در درون المان body باقی عناصر صفحه ی وب قرار میگیرند و عناصری که قرار است به کاربر نمایش داده شوند همگی باید در درون body قرار گیرند.
درباره css:
css در فرایند راه‌اندازی وبسایت مسئول presentation در وبسایت بوده و layout یا نوع قرارگیری المان‌ها را در صفحه مشخص میکند، css از ساختاری نسبتا ساده برخوردار است و به کمک آن می‌توانید ظاهر و شکل نمایش یک صفحه HTML را مشخص و سفارشی کنید. به کمک CSS می توان ظاهر صفحه ی وب را از محتوای آن جدا و مستقل کرد.
فرمت‌های ظاهری می‌توانند، شامل رنگ و فونت و موقعیت و ظاهر هر المان و شی درون صفحه باشند. این جداسازی کار خوانایی متون را افزایش می‌دهد و نیز کنترل بیشتری بر روی مشخصه‌های ظاهری متون و مستندات به وجود آورده است. با CSS می‌توان فرمت و ظاهر چند صفحه را به یکباره تغییر داد، صفحات با سادگی بیشتری ساخته خواهند شد و از تکرار مکرررات در ساختار صفحات جلوگیری خواهد شد.
و البته الویت با قرار دادن این کدها در فایلی خارجی است که در HTML فراخوانی می شود، چرا که با این کار هنگامی که سایت فراخوانی می‌شود، این فایل برای یک بار در سیستم کاربر بارگذاری شده و فراخوانی مجددی صورت نمی‌گیرد، بدیهی است که این کار سرعت و زمان اجرای صفحات را نیز بهبود می‌دهد.
نحوه نگارش CSS
یک دستور CSS دارای دو بخش است:
انتخابگر CSS
انتخابگر CSS عبارتی است که مشخص میکند این دستور CSS روی کدام عنصر HTML باید اعمال گردد. به عبارت دیگر عنصر HTML را انتخاب میکند.
تعریف قانون:
از چند جفت خاصیت و مقدار تشکیل شده است که با سمیکالن از هم جدا شده اند. خاصیت ها یا property ها ویژگی CSS ای هستند که میخواهیم آن را تنظیم کنیم. و مقدار مشخص میکند که خاصیت مورد نظر باید به چه صورتی باشد. بین خاصیت و مقدار از دونقطه استفاده میکنیم.
به مثال زیر توجه کنید:
در این مثال، انتخابگر ما h1 است. یعنی میخواهیم به تگ های h1 استایل دهیم؛ مقدار red به ویژگی color اختصاص داده شده تا رنگ عنوان h1 قرمز رنگ شود.
درباره Javascript
در فرایند راه‌اندازی وبسایت، جاوا اسکریپت یک زبان برنامه نویسی است که در صفحات وب استفاده می شود و به شما اجازه می دهد که منطق برنامه تان را در صفحه ی وب پیاده سازی کنید. به کمک جاوا اسکریپت می توانید صفحه ی وب تان را تعاملی تر کنید یعنی به کاربر اجازه دهید که با صفحه ی وب ارتباط بهتری برقرار کند.
به کمک جاوا اسکریپت می توان کارهای بسیار زیاد و متنوعی را از جمله موارد زیر انجام داد: که اجرای انیمیشن های مختلف درون صفحه ی وب مانند نمایش دادن، مخفی کردن تدریجی عناصر، حرکت دادن نوشته ها و تصاویر، ایجاد اسلایدشو (SlideShow) ها و انواع جلوه های خاص درون صفحه ی وب از آن جمله است.
سناریوی اختصاصی و حرفه‌ای؛ سخت‌تر و پیچیده‌تر!
خب! درست زمانی که قصد راه‌اندازی وبسایت را داریم، قبل از آن که شروع کنیم و گام به گام مراحل و مبانی و الزامات راه‌اندازی وبسایت از نقطه صفر تا رسیدن به ایستگاه پایانی در نقطه ۱۰۰ را توضیح دهیم ، بهتر است یک سری از مفاهیم اساسی را برای شما توضیح دهیم:
سر زدن به پشت صحنه؛ Backend در سایت:
نتیجه کدها نهایتا در مرورگر برای کاربر ظاهر می‌شود، در حالی که سرور، پایگاه داده و کدهای پشت‌صحنه به همراه پروتکل‌های مختلف برای این نمایش نهایی این خروجی دست به دست هم داده‌اند
ارتباط بین بخش‌های مختلف در سایت
هر سایتی که در پروسه راه‌اندازی وبسایت شکل می‌گیرد، اصطلاحا یک بخشِ طرفِ سرور، (سرور ساید) دارد که به صورت تخصصی‌تر واژه Backend را برای آن به کار می‌بریم؛ این بخشی از سایت شماست که دیده نمی‌شود. اما نحوه عملکرد و نقش این مولفه در وبسایت چیست؟
به طور ساده و خلاصه، هنگامی که یک کابر (client) سرویسی را از شما درخواست میکند، پردازش‌های بسیاری در سمت سرور، به عنوان موتور پردازشگری که برای پاسخ‌دهی به درخواست‌های کاربر با کدهای بک‌اند سروکار دارد، انجام می‌شود.
بدین وسیله، وبسایت شما به وب‌سایتی پویا تبدیل می‌شود. اما پویایی به چه معناست؟
پویایی و Dynamic بودن در مقابل ایستایی و Static بودن وبسایت
پویایی یک وبسایت یا همان Dynamic بودن آن در مقابل static به معنای «ایستایی» سایت به کار می‌رود. وب‌سایت‌های ایستا عملکردِ از قبل مشخص شده و غیرِ انعطاف‌پذیری دارند، چرا که در آنها پایگاه داده وجود ندارد و دخل و تصرفی روی محتوا انجام نمی‌شود؛ در مقابل در وب‌سایت‌های دینامیک که سرور و بک‌اند نقش ایفا میکند، ورودی‌های دریافت شده توسط کاربر به پایگاه داده ارسال می‌شوند تا در موقع مقتضی، بسته به درخواست و تعامل کاربر با وبسایت، اطلاعات خاصی از پایگاه داده فراخوانی شده و عملکردی خاص را در سایت رقم بزند.
البته ارتباط بین بک‌اند و فرانت‌اند، ارتباطی ارگانیک و در راستای عملکرد سیستم (در اینجا سایت) است. مثلا هنگامی که یک فرم در صفحه‌ای از سایت ایجاد می کنید، در حال انجام بخشی از کار فرانت‌اند (مربوط به ظاهر سایت) هستید (توسط افزونه‌ها، html و یا فریم‌ورک‌هایی نظیر Boosstrap).
در این جا چنین فرمی نهایتا در خدمت کارکرد بک‌اند قرار می‌گیرد، به این شکل که در ابتدا فرم ایجاد شده و سپس اطلاعات مندرج در فرم اعتبارسنجی شده و به سمت سرور ارسال می‌شود. نهایتا این اطلاعات به سمت دیتابیس پاس داده شده و حالا اطلاعات و سطوح مختلف آن بسته به درخواست فراخوانی می‌شود.
مکانیسم ارسال درخواست به سرور
پروتکل‌های HTTP,HTTPS به همراه متدهای Get و Post سبب می‌شوند تا اطلاعات دریافتی از کاربر دریافت شده و به سمت پایگاه داده هدایت شوند
پروتکل‌های وب و متدهای Get و Post
ارسال درخواستها به وسیله پروتکل‌های مخصوص وب، یعنی http و https به وسیله متدهای Get و Post انجام می‌شود. به شکل اجمالی در روش GET داده موجود بر روی يک فرم که قرار است برای سرويس دهنده ارسال شود ، به انتهای URL و به شکل ” نام / مقدار” ، اضافه می گردد. متد GET، گزينه پيش فرض در خصوص نحوه ارسال اطلاعات يک فرم می باشد .
متد Get
در روش GET، پارامترها را به کمک query string که مستقيما در انتهاي URL اضافه شده اند، به سرور مي فرستيم.
query string به قطعه متني که پس از علامت “?” آمده باشد مي گويند. GET تنها روش موجود به منظور ارسال داده بين سرويس گيرنده و سرويس دهنده نمی باشد و در اين رابطه از متد POST نيز استفاده می گردد.
متد POST
يکی از معايب ارسال داده با استفاده از query string ، به ماهيت ارسال اطلاعات برمی گردد . درصورتی که ضرورتی و يا علاقه ای به نمايش داده ارسالی در آدرس URL را نداشته باشيم، می توان از متد POST استفاده نمود .
عملکرد روش فوق تا اندازه ای شبيه متد GET بوده و تنها تفاوت اساسی بين آنان به ارسال داده در بدنه HTTP Request برمی گردد. ( نه به عنوان بخشی همراه URL ) متد مذکور، ايمنی بسيار بالائی را نسبت به متد GET ارائه نمی نمايد و ما صرفا” داده ارسالی را در URL مشاهده نمی نمائيم . متد POST ، همچنين امکان ارسال حجم بيشتری از اطلاعات را فراهم می نمايد. برخی از سرويس دهندگان وب دارای محدوديت حجم متن ارسالی همراه يک URL می باشند. متد POST ، دارای چنين محدوديتی نمی باشد.
انواع زبان‌های Backend و Serverهای مرتبط:
هنگام راه‌اندازی وبسایت بسته به نوع زبانی که برای بک‌اند، انتخاب می‌کنید، اعم از اینکه php، java و یا مثلا asp باشد با سرورهای متفاوتی مواجه خواهید بود.
درباره Java
جاوا مانند اسمش تا حدی عجیب و غریب و خاص است. تقریبا تمام خوره‌های برنامه نویسی متفق‌القول بر این عقیده هستند که این زبان منحنی یادگیری بسیار سختی داشته و کمترین متخصصین واقعی را با بیشترین سطح دستمزد به خود اختصاص داده است. در کشور ما جاوا برای پیاده‌سازی و راه‌اندازی وب سایت‌های مربوط به نهادهای دولتی به خصوص سیستم بانکی کشور استفاده شده و سرورهایی مانند tomcat و Glassfish در آن به مدیریت درخواستها می‌پردازند
درباره ASP
در اینجا اگر ASP یا همان Active Server Pages که در واقع همان نسخه مبتنی بر وب C# است را انتخاب کرده باشید، سرور IIs مایکروسافت برای هندل کردن درخواستها وارد عمل می‌شود؛ اگرچه که در نسخه‌های جدید این زبان، cross platform بودن به ویژگی‌های آن اضافه شده و افزون بر قابلیت open source، وابستگی آن بهIIS دچار دگرگونی شده است.
در مورد استفاده از ASP حرف و سخن بسیار است، چرا که زبانی قدرتمند و مناسب برای راه‌اندازی وبسایت‌هایی است که تیمی نسبتا گسترده و حرفه‌ای را برای راه‌اندازی و نگهداری بالای سر خود می‌بیند.
درباره PHP
PHP یک زبان برنامه‌نویسی است که برای وب توسعه یافته و می‌توان از آن به عنوان یک زبان عمومی نیز استفاده کرد. این زبان در سال ۱۹۹۵ میلادی توسط راسموس لردورف ساخته شده، کدهای این زبان توسط یک سرور وب که نرم‌افزار PHP بر روی آن نصب می‌شود، تفسیر می‌شوند. دستورات این زبان به صورت مستقیم درون کدهای HTML قرار گرفته و علاوه بر برنامه‌نویسی وب می‌تواند، برای مقاصد غیر وبی نیز استفاده شود. زبان PHP به واسطه فریم ورک‌های قدرتمندی همچون لاراول از شی‌گرایی و برنامه نویسی پیچیده نیز استفاده میکند.
اگر زبان انتخابی شما PHP یا همان PHP: Hypertext Preprocessor باشد، وب‌سروری مثل Apache که یک وب‌سرور لینوکسی است برای ارسال درخواستها وارد عمل می‌شود. در حال حاضر وب‌سرورهای دیگری هم مانند nginx وجود دارند و شما بسته به زبانی که انتخاب کرده‌اید و دیگر موارد می‌توانید از یکی از آنها استفاده کنید.
زبان PHP زبان همه‌منظوره‌ای است که به خصوص از طرف کسب‌وکارهای مقیاس کوچک و متوسط استقبال خوبی را تجربه میکند. دلیل این امر سادگی یادگیری این زبان و مدیریت و نگهداری کم هزینه و ساده سایت‌هایی است که با آن پیاده‌سازی شده‌اند. بنابراین زبانی پراستفاده برای راه‌اندازی وب‌سایت‌های اینترنتی به شمار می‌رود.
در مجموع زبان‌های برنامه‌نویسی BackEnd زبان‌هایی سطح بالا هستند، این به این معناست که ارتباط خروجی برنامه و سورس کد از طریق تفسیر و به وسیله یک مفسر (Interpreter) انجام می‌شود؛ سطح بالا بودن این زبان‌ها کار با آنها را آسان‌تر میکند، یعنی سینتکس و گرامری نزدیک به زبان انسان داشته و این گرامر خاص به وسیله مفسر، به درک کامپیوتر و زبان ۰ و یکی آن می‌رسد.
نکاتی در رابطه با پایگاه داده
در فرایند راه‌اندازی وب‌سایت‌های اینترنتی، پایگاه‌های داده رابطه‌ای (RDBMS) ارتباط نظام‌دار اطلاعات را به شکلی یک‌پارچه و منسج فراهم میکند و از این نظر عملکردی متفاوت با «فایل» دارد. تفاوت از این جاست که اطلاعات در قالب موجودیت‌هایی (Entity) که ویژگی‌های (Attributes) مختلفی دارند، ذخیره شده و در قالب فیلد، رکورد و جدول، ساختار و انسجام و نمایش می‌یابند ( مجموعه فیلدهای مربوط به مصداقی از یکی از موجودیت‌ها، مثلا رکوردی با id یک که به کالایی با مشخصات مختلف از موجودیت کالا و جدول کالای فروش رفته ارشاره میکند. شامل اطلاعاتی از قبیل رنگ، آخرین قیمت، مدل…)
مهمترین عملیاتی که بر روی این اطلاعات انجام می‌شود، عملیات CRUD هست که ب سرواژه‌های اعمال Create, Read, Update و Delete اشاره دارد. ساختن و درج اطلاعات در سطوح مختلف پایگاه داده، خواندن اطلاعات (نمایش و گزارش‌گیری)، به روز رسانی و اصلاح و نهایتا پاکسازی این اطلاعات کارویژه‌های اصلی CRUD را تشکیل می‌دهند.
انواع سرویس‌دهنده‌های پایگاه داده
Microsoft Sql server و mySql از معروفترین و رایج‌ترین سرویس‌دهنده‌های پایگاه داده هستند و به ترتیب به وسیله دو غول عظیم فناوری، یعنی مایکروسافت و اوراکل ارائه می‌شوند و در راه‌اندازی وب‌سایت‌های اینترنتی کابرد بسیار دارند.
سناریوی آسان؛ نسخه حاضر و آماده
هنگامی که قصد راه‌اندازی یک وبسایت به منظورهای مختلفی، مثلا راه‌اندازی فروشگاه اینترنتی را دارید، گزینه‌های متفاوتی پیش روی شما قرار می‌گیرد. مثلا عده‌ای از سیستم‌های مدیریت محتوا که احتمالا اسمشان را شنیده‌اید، نظیر «وردپرس»، «جوملا» و یا «دروپال» استفاده می‌کنند.
در چنین شرایطی یک پکیج کامل، کمتر انعطاف‌پذیر (نسبت به شرایطی که کدنویسی می‌کنید)، تا حدی خودکار و البته آسان پیش روی شما قرار می‌گیرد. در این حالت شما ابتدا یک «دامنه» خریداری کرده و بعد برای میزبانی و راه‌اندازی آن یک هاست نیز تهیه می‌کنید و با نصب قالب دلخواه بر روی سیستم مدیریت محتوای مورد استفاده (مثلا وردپرس) کار استفاده از سایت خود را شروع می‌کنید.
سیستم‌های مدیریت محتوا به خصوص وردپرس با دنیایی از امکانات و افزونه‌هایی نظیر ووکامرس که یک فروشگاه‌ساز اینترنتی معروف است، توجه افراد بسیاری به خصوص مردمان عادی که متخصص کامپیوتر نیستند را به خود جلب کرده‌اند. این روزها این CMSها سهم بسیاری از پروژه‌های راه‌اندازی وبسایت اینترنتی را به خود اختصاص داده‌اند.
در ضمن اگر با مفاهیم و کلمات کلیدی مانند «هاست»، «دامنه»، «سیستم‌های مدیریت محتوا» و «قالب» آشنا نیستید، نگران نباشید، ما در ادامه در مطالب سایت، برای آنها آموزش مفصلی ارائه خواهیم کرد. امیدواریم که این مقاله که به منظور آشنایی شما با مبانی و الزامات راه‌اندازی وبسایت و آشنایی با فرایند چندمرحله‌ای طراحی گرافیک، کدنویسی بخش کاربر، کدنویسی بخش سرور و پایگاه داده در راه‌اندازی وبسایت اینترنتی تهیه شده مورد توجه شما قرار گرفته باشد و بتوانید سایت و فروشگاه اینترنتی خود را هرچه زودتر بسازید.
جمع بندی
در این مقاله به شکلی ساده و کاربردی با روند طراحی یک سایت و مکانیسم عملکرد آن که منجر به تعامل و ارتباط بین کدهای سمت کاربر و سرور می‌شد آشنا شده و نگاهی به مفاهیمی همچون دیتابیس و زبان‌هایی مانند HTML، CSS و PHP انداختیم؛ امیدواریم که این مطلب برای شما مفید واقع شود.
