یاد گرفتن برنامه نویسی وب یکی از گزینه هایی است که خیلی از افراد رویای یادگیری و کسب درآمد از آن را دارند و احتمالا برای شروع از HTML و CSS شروع می کنند. اما پس از آن به نقطه ای می رسند که دیگر نمیدانند چه کاری باید انجام بدهند، پیش از این در یک مقاله مسیر برنامه نویسی وب و طراحی وب را برای شما توضیح داده ام.
در این مقاله می خواهم ماهیت کلی برنامه نویسی وب را به تو نشان بدهم تا به یک درک کامل برسی که برای برنامه نویسی وب چه چیزهایی لازم داری و چه کارهایی باید انجام بدهی.
نرم افزارهای تحت وب به چه صورت ساخته می شوند؟
برنامه نویس برای ساخت برنامه های تحت وب نیاز دارد تا برروی دو قسمت کار کند.
کلاینت و سرور
سمت کلاینت و سمت سرور در واقع به ما می گویند که کدهای سازنده نرم افزاری که در حال استفاده از آن هستیم کجا اجرا خواهند شد.
کلاینت بخشی است که کدهای سازنده واسط کاربری روی آن اجرا می شوند. در واقع کدهای client یا front-end روی دستگاه مشتری اجرا می شود و در اختیار یک کاربر قرار می گیرد تا از طریق واسط کاربری خواسته خود را انجام بدهد و بجز ارسال اطلاعات یا دریافت اطلاعات از سمت سرور کار دیگری انجام نمی دهد.
سرور بخشی است برنامه نویس کارهای ضروری و فعل های لازم برای پردازش اطلاعات را در آن سمت قرار می دهد. و این کدها بر روی کامپیوتر هایی که در دسترس کاربران قرار ندارند اجرا می شوند
بهتر است با یک تصویر کلاینت و سرور را ببینیم:

در این تصویر میبینی برنامه نویسی که یک نرم افزار تحت وب ساخته است، آن را برروی یک سرور قرار داده تا فرآیندهای مختلف در این محل انجام شوند، داده ها ذخیره شوند و کارهای مختلف دیگری هم انجام شود و حتی کدهای سازنده client هم روی سرور قرار می گیرند و در زمانی که کاربر درخواست بدهد بر روی سیستم کاربر اجرا می شوند.
در این مقاله قصد دارم تا بخش Front-end یا کلاینتی که در تصویر بالا دیدیم را هم با هم بسازیم.
قرار است با استفاده از Html، Css و J-Query, bootstrap یک فرم برای ثبت نام کاربر بسازیم.
البته هدف این آموزش این نیست که این سه تکنولوژی را یاد بگیری بلکه می خواهیم یک درک کلی از این فرآیند و نحوه برقراری ارتباط با سرور را یاد بگیری.
برای ساخت این صفحه یک template آماده می بینیم تا بر اساس آن یک صفحه را بسازیم.

اگر بخواهیم به صورت جزئی به این صفحه نگاه کنیم متوجه می شویم که 2 کار انجام می دهد :
ظاهر صفحه توجه کاربر را جلب می کند
به کاربر می گوید قرار است از طریق فرمی که در این صفحه قرار داده ایم ثبت اطلاعات انجام بدهی.
خب حالا که ذهنت این دو مساله را تفکیک کرده است به سراغ پیاده سازی ها می رویم و طبیعتا دو پیاده سازی داریم :

• پیاده سازی مربوط به ساخت ظاهر صفحه
• پیاده سازی کارهای مربوط به ثبت اطلاعات که جلوتر در مورد آن توضیح خواهم با

برای ساخت واسط کاربری این صفحه از سه تا ابزار زیر استفاده می کنیم:

• HTML
• CSS
• Bootstrap

و نحوه پیاده سازی این واسط کاربری به شکل زیر است :

با استفاده از HTML ساختمان را می سازیم
با استفاده از CSS و Bootstrap کارهای زیبا سازی را انجام می دهیم
پیش از آنکه به سراغ کدها برویم یک نما از چیزی که در نهایت می خواهیم به آن برسیم را ببینیم:

ساختار سازنده این صفحه در یک تگ div با HTML قرار دارد و برای زیبایی آن از کلاس های Bootstrap استفاده کرده ایم.

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

• Header
• Main
• Footer

کدهای سازنده این سه قسمت به این صورت هستند:

و بر اساس این تصویر کدهای سازنده Header به شکل زیر هستند:

همانطور که در تصویر میبینی کدهای سازنده هر قسمت در Header به همراه خروجی آن نشان داده شده.
احتمالا اگر در کدها نگاه کنی میبینی که یک پارامتر به اسم class وجود دارد، از طریق کلاس می توانیم مواردی که از Bootstrap و Css می خواهیم را می توانیم بر روی عناصر HTML اعمال کنیم. چیزهایی که در جمله بالا با نام (مواردی) از آنها صحبت شد می تواند مربوط به Responsive کردن صفحه، یا استایل خاص دادن به یک عنصر باشد.
بنابراین نکته مهم این است که برای استفاده از امکانات Bootstrap از خصوصیت Class استفاده می کنیم.
این که امکانات Bootstrap را چطور یاد بگیریم جواب بسیار ساده ای دارد و آن این است که به بخش Documentation سایت  getbootstrap.com برویم و در آنجا از بخش Components هر کنترلی که لازم داریم را یاد بگیریم یا اینکه کپی کنیم . ????
مانند تصویر زیر:

یعنی اینکه امکانات بوت استرپ و کلاس های آن را یاد بگیرید و بشناسید اما لازم نیست کدهای آن را حفظ کنید.
بگذار یک مثال بزنم تا بهتر برای تو جا بیفتد.
مثلا اگر بخواهیم عناصر سازنده footer  همه در یک ردیف قرار بگیرند از کلاسی به نام row استفاده می کنیم.

این استفاده تنها عنوان  کردن نام کلاس row است و پس از آن این فراخوانی کلاس به صورت اتوماتیک اثر خود را بر روی عنصر مورد نظر خواهد گذاشت و نیازی نیست بیش از حد با کدها درگیر بشوی.
حالا به سراغ بخش Main برویم:

بخش دوم Main که در سمت راست قرار دارد و فرم ثبت نام در آن قرار دارد با کدهای زیر ساخته شده است:

و حالا به سراغ Footer می رویم :

هر کدام از div هایی که دارای کلاس های footerCol هستند، یک img در آن قرار دارد و footer را تشکیل می دهد. و مابقی div ها هم به همین شکل هستند
تا به اینجای کار به صورت کامل صفحه پیاده سازی شد و حالا باید در مورد کاری که فرم برای ثبت اطلاعات انجام می دهد صحبت کنیم.
در یک جمله خلاصه:
کاری که برای انجام عملیات ثبت نام در سمت کلاینت انجام می شود تنها دریافت اطلاعات و ارسال آن ها به سمت Server است و برای این کار از Jquery استفاده می کنیم.
و کافی است با سه مفهوم زیر ارتباط برقرار کنیم:

• دسترسی به یک کنترل توسط J-Query
• تعریف یک متد با استفاده از J-query
• استفاده از متد ارسال اطلاعات به سمت server

که به شکل زیر انجام می شود:

و اینجا کار در قسمت Client به پایان می رسد .
حالا که کلیت ساخت Front-End را درک کردید  می توانید ریز جزئیات و آموزش کامل HTML و CSS و Bootstrap بعلاوه JQuery را ببینید.
همچنین مابقی کارها در Backend انجام می شود که در یک مقاله دیگر در مورد آن صحبت مب کنیم و توضیح می دهیم که بر روی این اطلاعات ارسال شده در بانک چه کاری قرار است انجام شود.