سایت‌های امروزی از دو قسمت فرانت‌اند (Front end) و بک‌اند (Back end) تشکیل شده‌اند، آن قسمتی از وبسایت که توسط کاربر قابل مشاهده بوده و در مرورگر او نمایش داده می شود فرانت‌­اند نام دارد و بخشی که مربوط به پردازش‌های سمت سرور می‌شود را بک‌اند می‌نامند.

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

مرحله اول HTML :

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

مرحله دوم css:

هرچند HTML بسیار مهم است اما به تنهایی نمی‌تواند ظاهر زیبایی به وبسایت بدهد و در نهایت تنها امکان ایجاد سایتی مانند نخستین صفحه‌ی وب تاریخ را خواهد داشت، برای زیباسازی صفحات وب از تکنولوژی CSS استفاده می‌کنیم.

مرحله سوم javascript :

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

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

فریم­ورک (Framework) چیست؟

فریم‌ورک (Framework) یا “چهارچوب” در واقع مجموعه‌ آماده­ای از کلاس‌ها، کدها و توابع برنامه‌نویسی است که در قالب یک پکیج ارائه می‌شود و در طراحی پروژه‌های نرم‌افزاری به کمک برنامه‌نویسان می‌آید.

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

معمولا در روند طراحی پروژه‌هایی در سطح استاندارد برای افزایش سرعت و بهبود عملکرد کار از فریم‌ورک‌ها استفاده می‌کنیم، از معروف‌ترین فریم‌ورک‌های مربوط به HTML و CSS می‌توان به بوت‌استرپ (Bootstrap) اشاره کرد.

کتابخانه (library) چیست؟

به زبان ساده مفهوم کتابخانه نیز تا حدودی شبیه به فریم‌ورک است. (چندین کتابخانه در کنار هم می‌توانند یک فریم‌ورک را ایجاد کنند)

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

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

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

تفاوت سایت های استاتیک و داینامیک

اصولا به وبسایت‌هایی که احتیاجی به تغییرات زیادی ندارند و معمولا تمام المان‌های سازنده‌ی آن‌ها ثابت بوده و مدام به‌روزرسانی نمی‌شود یک وبسایت استاتیک (Static) یا ایستا می‌گوییم.

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

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

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

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

مرحله چهارم انتخاب زبان برنامه‌­نویسی:

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

برای این منظور انتخاب‌های فراوانی پیش روی شماست، یکی از محبوب‌ترین زبان‌های برنامه‌نویسی تحت وب PHP نام دارد، تا به امروز بیش از ۸۰ درصد وبسایت‌های جهان با استفاده از زبان برنامه‌نویسی پی‌اچ‌پی ایجاد شده‌اند، از معروف‌ترین آن‌ها می‌توان به فیس‌بوک و ویکی‌پدیا اشاره کرد.

البته زبان‌های بسیار زیادی برای برنامه‌نویسی قسمت بک‌اند یک وبسایت وجود دارد، به عنوان مثال ASP , Python , Node JS , Java و… که در صورت تمایل می‌توانید از آن‌ها نیز استفاده کنید.

ذکر این نکته حائز اهمیت است که برای شروع برنامه‌نویسی لازم است در ابتدا تا حدودی با نحوه‌ی نوشتن الگوریتم‌ آشنا بوده تا به‌راحتی از پس تحلیل برنامه‌تان برآیید.

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

مرحله پنجم انتخاب دیتابیس:

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

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