برای طراحی وب سایت دو راه وجود دارد:

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

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

ابتدا مفاهیم اینترنت، سرور،هاست، دامنه، وب سایت، اجزاء وب سایت، کلاینت، ادمین، فرانت اند یا یوآی و بک اند را بدانیم.

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

  برای تولید نرم افزار و یا وب سایت تحت وب باید تکنولوژی های زیر رو بدونیم، به راحتی می تونیم اینها رو یادبگیریم از تعداد و اسم هاشون نگران نشید!
نکته: نام گذاری پروژه، فایل ها، فولدر ها باید متناسب با پروژه باشد. برای نمونه اگر من یک پروژه وب سایت مدرسه ای به نام فرزانگان دارم، نام فولدر اصلی پروژه رو farzanegan می گذارم و همه ی کد های مرتبط رو در پوشه ی این پروژه دسته بندی می کنم.
 پوشه ها (فولدرهای) اصلی یک پروژه تحت وب شامل: public در این پوشه فایل index.html و یا index.php قرار دارد که همه کد های ما در نهایت در این فایل نمایش داده می شوند؛ 
در پوشه public ما پوشه assets رو داریم که شامل پوشه های css همان استایل های (اندازه فونت، سایز، رنگ پس زمینه، کناره، محل قرارگرفتن محتویات) سایت ما می باشند از قبیل ادر فایل های فونت و شروط نمایش سایت در دستگاه های متفاوت. پوشه دیگر js هست، فایل های با پسوند .js که شامل کد های جاوا اسکریپت هستند رو در بر می گیره، جاوا اسکریپت همون انیمیشن ها و حالت های تغییر داده های توی صفحه بر اساس یک اتفاق مانند mouseover/ onclick و از این دسته هستند. پوشه دیگر تصاویر هستند که با نام images/img معمولا ذخیره می شوند را داریم.

1- اچ تی ام ال HTML 
به کد های اصلی اچ تی ام ال تگ می گویند و مهمترین آنها جهت نمایش اطلاعات به درستی: تگ html/head/body هستند؛ نمونه یک صفحه اچ تی ام ال مانند زیر نوشته می شود. مثال: من در کد زیر مخصوصا یک فاصله و تک کوت (') انداختم داخل تگ تا اجرا نشود، در غیر اینصورت شما تنها می تونستید بخش داخل تگ بادی رو ببینید و نه خود تگ هارو. در زمان کد نویسی شما این فاصله ها و تک کوت ' رو نمی گذارید.

< html >
< head >عنوان هر صفحه وب در این بخش نمایش داده می شود، بسیار مهم است که عنوان مربوط به محتویات داخل صفحه باشد، چون برای موتور های جستجو هم مفید و کاربردی است<'/'head>
< body >هر آنچه شما ما بین تگ های بادی سایت خود قرار بدهید، داخل صفحه مرورگر قابل دیدن می باشد!<'/'body>
<'/'html>

برای فراگیری و تمرین و دیدن نمونه کد اچ تی ام ال نیاز به هیچ چیز خاصی ندارید، با ایجاد یک فایل بر روی صفحه دسکتاپ خودتون می تونید کد های اچ تی ام ال رو تمرین و فراگیری نمایید. برای مثال روی صفحه کامپیوتر با دکمه سمت راست موس کلیک کنید، از گزینه  New-> Text Document رو انتخاب کنید، سپس نام و پسوند فایل رو تغییر بدید، برای نمونه نام فایل رو بگذارید index و پسوندش رو .html بگذارید، نتیجه فایل با این نام می شود index.html دقت کنید که فاصله هم درش نباشه، سپس با مرورگر این صفحه رو می تونید باز کنید و اگه کد های اچ تی ام ال درش نوشته باشین به راحتی اجرا می شوند و قابل برسی هستند. برای کد نویس می تونید با نوت پد خود سیستم عامل ویندوز این فایل رو باز کنید و کد هاتون رو داخل صفحه بنویسید و گزینه ی کنترول ctrl و s کد های شما رو توی این صفحه ذخیره می کنند؛ در زمان رفرش صفحه در مرورگر می تونید نتیجه ی کد های جدیدتون رو ببنید، پس هر زمان که کد تازه ای نوشتین نیاز هست بعد از ذهیره شدن صفحه رو دوباره رفرش کنید. بعدا می تونید نرم افزار هایی نصب کنید که wisiwig نام دارند که مخفف هر آنچه می بینید نتیجه ی همان کدی است که نوشته شده. نرم افزار های wisiwig برای افراد مبتدی هست معمولا، که می خواهند با دیدن نتیجه کدی که می زنند روند فراگیری خودشون رو سرعت بدهند. مانند نرم افزار adobe dreamweaver

2- سی اس اس CSS 
در همان صفحه ی نمونه ی فایل اچ تی ام ال هم می توانید کد سی اس اس رو وارد کنید و بصورت داخل خطی کدی رو به یک تک اچ تی ام ال نصبت بدید، مثلا حاشیه بدید، رنگ و اندازه ی یک بخش رو مشخص کنید.
 برای مثال:

This is a test!

در بخش سی اس اس کد نمونه ما به تگ اچ 1 که نمونه ی هدینگ عنوان هست، ویژگی رنگ قرمز دادیم و یک بردر ی پیکسلی سبز ممتد، این نمونه تنها برای آموزش شما بود که یک ذهنیتی از کد سی اس اس داشته باشین، بهترین حالت استفاده از کد سی اس اس بصورت خارجی external می باشد؛ این کد ها رو بر روی صفحه هایی با پسوند .css ذخیره می کنیم و در پوشه مخصوص assest/css سایت و یا پروژه قرار می دهیم.

3- جاوا اسکریپت JAVASCRIPT 

4- مای اسکیوال MYSQL 

5- پی اچ پی PHP

6- سرور لوکال xampp

7- نرم افزار محیط کد نویسی IDE

8- کامپوزر برای زبان برنامه نویسی پی اچ پی Composer 

یکی از بهترین منابع فراگیری زبان های برنامه نویسی وب سایت w3schools.com به آدرس w3school هست. برنامه های آموزشی Envato Tuts+, Lynda,  Udemy، هم می توانید در یوتوب و یا وب سایت خودشان تماشا کنید و مرحله به مرحله با مدرس کد هارو در سیستم خودتون اجرا کنید.

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

موارد بالا حد اقل هایی هستند که برای راه اندازی یک وب سایت به آنها جهت راه اندازی نیاز داریم.
و البته یک نرم افزار آی دی ایی IDE که درش بتونیم کد هامون رو بنویسیم. من خودم با برنامه ی نوت پد پلاس پلاس به آدرس وب سایت https://notepad-plus-plus.org/downloads کد می نویسم و از اون راضی هستم. 
نرم افزار vscode هم ویرایشگر کد خوبی هست به ادرس اینترنتی https://code.visualstudio.com/ 

نکته: قبل از نصب نرم افزار زمپ، بهتر است این برنامه رو در بخشی (درایوی) به غیر از درایو ویندوز(سیستم عامل) بریزید، تا در صورت خراب شدن سیستم عامل و تعویض آن پروژه های شما دست نخورده و سالم بمانند. در زمان نصب برنامه زمپ برنامه از شما می خواهد تا آدرس فایل php.exe رو به نرم افزار بدهید، خودش معمولا بصورت عادی همون فولدر پی اچ پی رو میاره اگرم نیاورد از خودتون از این آدرس درصورتی که برنامه رو روی درایو D ریخته باشید، باز کنید و آدرس درست رو بهش بدین D:\Xamp\php، در اینجا برنامه می خواد آدرس php.exe رو برای ما بگذاره توی سیستم ورایبل جایی که اگه شما روی آیکون my computer در ویندوز کلیک سمت راست کنید می تونید با رفتن به تب ( دکمه ) properties-> advance ->environmental variables در آنجا در path یا مسیر این دستورات رو می گذاره تا وقتی شما توی بخش دستورات خطی (کامند پرامت) دستور پی اچ پی اجرا کنید سیستم شما متوجه این کتابخانه کد بشود و دستورات پی اچ پی اجرا شوند.
زمپ از شما می خواهد تا نرم افزار ادیتور خود یا همون IDE رو هم مشخص کنید، من همون notepad++.exe رو از آدرس نصبش انتخاب می کنم.

اگر بر روی سیستم خودتون یا لوکال می خواهید پروژه رو پیاده سازی کنید به سرور php و mysql نیاز دارید، نرم افزار های wamp و xampp برای ویندوز و lamp برای لینوکس، mamp برای مک قابل استفاده هستند. در مراحل بعدی نحوه استفاده از هر کدوم رو خیلی ساده خدمتتون آموزش می دهم. من خودم از نرم افزار زمپ به آدرس اینترنتی https://www.apachefriends.org/download.html استفاده می کنم که خیلی قابلیت های زیادی نسبت به ومپ داره. زمپ یک نرم افزار متن باز رایگان هست که استفاده از آن هیچ تخصص خاصی نیاز نداره، و پس از نصب شما بر روی سیستم خودتون می توانید از سرور پی اچ پی php، مای اسکئوال mysql به راحتی بهره مند شوید. 

پس از نصب نرم افزار آی دی ایی  IDE (محیط کد نویسی)، و زمپ Xampp (لوکال سرور) می تونید کد نویسی رو با ایجاد یک پروژه در فولدر htdocs زمپ شروع کنید، در ابتدا بدون نیاز به دیتا بیس می تونید دستورات پی اچ پی رو همونجا در فولدر پروژه در فایلی به نام index.php بنویسید و از طریق مرورگر نتیجه قابل دیدن خواهند بود. جهت استفاده از دیتابیس مای اسکیوال mysql database یک دیتا بیس باید بسازیم و توی اون تیبل هامون رو می سازیم بعدا.  

نرم افزار کامپوزر composer یک نرم افزاریست که به ما کمک می کنه تا کتابخانه های آماده پی اچ پی رو بر روی پروژه هامون از طریق دستور خطی نصب کنیم، و با نصب کامپوزر یک سری دستورات برامون در محیط کامند پرامت یا پاورشل قابل اجرا می شوند، فقط کافیه پس از نصب کامپوزر از طریق دستور cd به فولدر پروژه در آدرس htdocs بروید و دستور cd D:\Xamp\htdocs\my-project رو اجرا کنید، سپس دستور php artisan serve رو می زنید، در حال حاضر با مرورگر و آدرس http://localhost:8000 می تونید پروژه خودتون رو توی سیستم لوکال (به جای هاست و سرور واقعی) راه اندازی کنید.

کلیدواژه:آموزش طراحی سایت,آموزش برنامه نویسی وب,آموزش صفر تا صد وب,آموزش پله پله و کاربردی طراحی وب سایت,آموزش طراحی فروشگاه اینترنتی

1 year ago