2. راه‌اندازی محیط کاری

ما از ابزارهای زیر استفاده خواهیم کرد (روی ویندوز 10 x64):

• [Laragon] برای اجرای سرور وب PHP؛
• [Netbeans] برای ویرایش کد PHP؛
• [Visual Studio Code] برای نوشتن کد جاوااسکریپت؛
• [node.js] برای اجرای آن‌ها؛
• [npm] برای دانلود و نصب کتابخانه‌های جاوااسکریپتی که به آن‌ها نیاز خواهیم داشت؛

2.1. محیط وب‌سرور

اسکریپت‌های PHP در محیط زیر نوشته و آزمایش شده‌اند:

• محیط وب‌سرور آپاچی / SGBD MySQL / PHP نسخهٔ ۷.۳ به نام Laragon;
• محیط توسعه NetBeans 10.0؛

2.1.1. نصب Laragon

Laragon یک بسته شامل چندین نرم‌افزار است:

• یک سرور وب آپاچی. ما از این برای نوشتن اسکریپت‌های وب در PHP استفاده خواهیم کرد؛
• SGBD و MySQL;
• زبان اسکریپتی PHP؛
• یک سرور Redis که کشینگ را برای برنامه‌های وب فراهم می‌کند:

Laragon را می‌توان (مارس ۲۰۱۹) از آدرس زیر دانلود کرد:

https://laragon.org/download/

• نصب [1-5] منجر به ساختار دایرکتوری زیر می‌شود:

• در [6]، پوشه نصب برای PHP؛

راه‌اندازی [Laragon] پنجره زیر را نمایش می‌دهد:

• [1]: منوی اصلی Laragon؛
• [2]: دکمه [Start All] سرور وب آپاچی را راه‌اندازی می‌کند و SGBD MySQL;
• [3]: دکمه [WEB] صفحه وب [http://localhost] را نمایش می‌دهد که با فایل PHP [<laragon>/www/index.php] مطابقت دارد، که در آن <laragon> پوشه نصب Laragon است؛
• [4]: دکمه [Database] به شما امکان می‌دهد SGBD و MySQL را با استفاده از ابزار [phpMyAdmin] مدیریت کنید. ابتدا باید این را نصب کنید؛
• [5]: دکمه [Terminal] یک پنجرهٔ دستور باز می‌کند؛
• [6]: دکمه [Root]، اکتشافگر فایل ویندوز را باز می‌کند و به پوشه [<laragon>/www] هدایت می‌کند که دایرکتوری ریشه وب‌سایت [http://localhost] است. اینجا جایی است که باید تمام برنامه‌های وب تحت مدیریت سرور آپاچی لارگون را قرار دهید؛

بیایید یک ترمینال Laragon را باز کنیم [5]:

• در [1]، نوع ترمینال را وارد کنید. سه نوع ترمینال در [6] موجود است؛
• در [2, 3]: دایرکتوری جاری؛
• در [4]، دستور [echo %PATH%] را تایپ کنید که فهرست پوشه‌های جستجو شده هنگام یافتن یک فایل اجرایی را نمایش می‌دهد. تمام پوشه‌های اصلی Laragon در این مسیر اجرایی گنجانده شده‌اند، که اگر پنجره فرمان [cmd] را در ویندوز باز می‌کردید، اینطور نبود. در این سند، هنگامی که لازم است برای نصب یک نرم‌افزار خاص دستوراتی را وارد کنید، این دستورات معمولاً در ترمینال Laragon وارد می‌شوند؛

2.1.2. نصب IDE NetBeans 10.0

NetBeans 10.0 را می‌توان از آدرس زیر دانلود کرد (مارس ۲۰۱۹):

https://netbeans.apache.org/download/index.HTML

فایل دانلود شده یک فایل فشرده ZIP است که کافی است از حالت فشرده خارج شود. پس از نصب و اجرای NetBeans، می‌توانید اولین پروژه خود را ایجاد کنید: PHP.

• در [1]، گزینه File / New Project را انتخاب کنید؛
• برای [2]، دسته [PHP] را انتخاب کنید؛
• در [3]، نوع پروژه [PHP Application] را انتخاب کنید؛

• در [4]، برای پروژه یک نام انتخاب کنید؛
• در [5]، یک پوشه برای پروژه انتخاب کنید؛
• در [6]، نسخه‌ای از PHP را که دانلود کرده‌اید، انتخاب کنید؛
• در [7]، رمزگذاری UTF-8 را برای فایل‌های PHP انتخاب کنید؛
• در [8]، حالت [Script] را برای اجرای اسکریپت‌های PHP در حالت خط فرمان انتخاب کنید. برای اجرای یک اسکریپت PHP در یک محیط وب، [Local WEB Server] را انتخاب کنید؛
• در [9,10]، مسیر نصب تفسیرگر PHP از بسته Laragon را مشخص کنید:

• برای تکمیل جادوگر ایجاد پروژه PHP، [Finish] را انتخاب کنید؛

• در [11]، پروژه با یک اسکریپت [index.php] ایجاد می‌شود؛
• در [12]، یک اسکریپت حداقلی PHP نوشته می‌شود؛
• در [13]، [index.php] اجرا می‌شود؛

• در [14]، نتایج در پنجره NetBeans [output] ظاهر می‌شوند؛
• در [15]، یک اسکریپت جدید ایجاد می‌شود؛
• در [16]، اسکریپت جدید؛

خواننده می‌تواند تمام اسکریپت‌های زیر را در پوشه‌های مختلف درون همان پروژه PHP ایجاد کند. کد منبع اسکریپت‌های این سند در ساختار دایرکتوری NetBeans زیر در دسترس است:

اسکریپت‌های این سند در ساختار دایرکتوری پروژه [scripts-console] [1] قرار دارند. ما همچنین از کتابخانه‌های PHP استفاده خواهیم کرد که در پوشه [<laragon-lite>/www/vendor] [2] قرار می‌گیرند، جایی که <laragon-lite> پوشه نصب نرم‌افزار Laragon است. برای اینکه NetBeans کتابخانه‌های [2] را به عنوان بخشی از پروژه [scripts-console] تشخیص دهد، ما باید پوشه‌های [vendor] و [2] را در شاخه‌های [Include Path] و [3] پروژه وارد کنیم. ما NetBeans را طوری پیکربندی خواهیم کرد که پوشه‌های [<laragon-lite>/www/vendor] و [2] در هر پروژه جدید PHP گنجانده شوند، و نه فقط در پروژه [scripts-console]:

• در [1-2]، به گزینه‌های NetBeans بروید؛
• در [3-4]، گزینه‌ها را برای PHP پیکربندی کنید؛
• در [5-7]، [Global Include Path] را برای PHP پیکربندی کنید: پوشه‌های مشخص‌شده در [7] به‌طور خودکار در [Include Path] هر پروژه PHP گنجانده می‌شوند؛

• در [9]، می‌توانید به ویژگی‌های شاخه [Include Path] دسترسی داشته باشید؛
• در [10-11]، کتابخانه‌های جدید توسط NetBeans کاوش می‌شوند. NetBeans کد PHP را در این کتابخانه‌ها کاوش می‌کند و کلاس‌ها، رابط‌ها، توابع و غیره را ثبت می‌نماید تا به توسعه‌دهنده کمک کند؛

• در [12]، یک قطعه کد از کلاس [PhpMimeMailParser\Parser] در کتابخانه [vendor/php-mime-mail-parser] استفاده می‌کند؛
• در [13]، NetBeans متدهای این کلاس را پیشنهاد می‌دهد؛
• در [14-15]، NetBeans مستندات متد انتخاب‌شده را نمایش می‌دهد؛

مفهوم [Include Path] مختص NetBeans است. PHP نیز این مفهوم را دارد، اما به نظر می‌رسد دو مفهوم متفاوت باشند.

اکنون که محیط کار راه‌اندازی شده است، می‌توانیم به اصول اولیه PHP بپردازیم.

2.2. محیط کاری برای JavaScript

این ابزارها را می‌توان از طریق Laragon نصب کرد (به بخش پیوندها مراجعه کنید):

در [4]، ما [node.js] را نصب می‌کنیم. پس از اتمام نصب، یک ترمینال Laragon را باز کنید (به بخش «لینک» مراجعه کنید) و نسخه نصب‌شده [node.js] (1) و همچنین [npm] (2) را بررسی کنید:

سپس، Visual Studio Code را نصب می‌کنیم که اغلب با نام‌های [code]، [VSCode] یا [3-6] شناخته می‌شود. پس از انجام این کار، می‌توانیم این ابزار توسعه را راه‌اندازی کنیم:

2.2.1. راه‌اندازی ویژوال استودیو کد

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

ابتدا، ظاهر پنجره [VSCode] را از پس‌زمینه سیاه به پس‌زمینه روشن تغییر می‌دهیم:

سپس، نوار کناری سمت چپ [1-2] را مخفی می‌کنیم، زیرا گزینه‌های آن نیز در منو موجود است. در [3-6]، کد را طوری تنظیم می‌کنیم که هر بار فایل ذخیره می‌شود و هر بار که متن کپی و چسبانده می‌شود، قالب‌بندی شود.

پس از ذخیره پیکربندی [Ctrl-S]، می‌توانید پنجره [Settings] [7] را ببندید. شما می‌توانید در هر زمان به پیکربندی [VSCode] و [8-10] بازگردید:

این پیکربندی‌ها در فایلی به نام [settings.json] ذخیره می‌شوند که می‌توان آن را مستقیماً ویرایش کرد. بیایید پنجره پیکربندی [Settings] را همان‌طور که قبلاً نشان داده شد باز کنیم:

در [4]، می‌توانید فایل [settings.json] را مستقیماً ویرایش کنید:

• در [1]، مسیر فایل [settings.json]. یکی از راه‌های بازگشت به پیکربندی پیش‌فرض، حذف این فایل است؛
• در [2]، پیکربندی‌هایی که همین حالا انجام دادیم؛

اکنون، بیایید یک ترمینال را در [VSCode] [1-2] باز کنیم:

• در [3]، نوع ترمینال باز شده، در این مورد PowerShell؛
• در [4] می‌توانید دستورات ویندوز را تایپ کنید؛
• در [6]، می‌توانید ترمینال‌های دیگری را باز کنید؛
• در [5]، فهرست ترمینال‌های باز؛
• در [7]، ترمینال فعال را می‌بندد؛

ما از ترمینال [VSCode] برای نصب بسته‌های جاوااسکریپت (کتابخانه‌ها) با استفاده از ابزار [npm] (مدیریت بسته‌های Node) استفاده خواهیم کرد. بیایید همان‌طور که قبلاً در ترمینال Laragon انجام دادیم، نسخه نصب‌شده [npm] را بررسی کنیم:

می‌توانیم ببینیم که دستور [npm] شناسایی نشد. این بدان معناست که این دستور در PATH (فهرست دایرکتوری‌هایی که برای یافتن یک فایل اجرایی جستجو می‌شوند، در این مورد [npm]) ترمینال وجود ندارد. می‌توانید بفهمید کدام PATH توسط ترمینال در حال استفاده است:

فایل اجرایی [npm] در هیچ‌یک از این پوشه‌ها یافت نمی‌شود. مانند سایر ابزارهای نصب‌شده توسط Laragon، این فایل در پوشه Laragon [<laragon>\bin] قرار دارد و دقیق‌تر در زیرپوشه‌های [nodejs] و [4-6].

برای راه‌اندازی [VSCode] و دسترسی به [npm]، [VSCode] را از یک ترمینال Laragon اجرا خواهیم کرد. وقتی به این روش اجرا شود، [VSCode] از PATH در ترمینال Laragon ارث می‌برد، که به نوبه خود حاوی پوشه‌ای با فایل‌های اجرایی [node] و [npm] است:

• به [1]: فرمان [path] را وارد کنید؛
• برای [2]: فهرست پوشه‌ها در PATH. این پوشه [node-v10] [2] را نشان می‌دهد که تضمین می‌کند فایل‌های اجرایی [node] و [npm] پیدا شوند؛

[VSCode] از طریق ترمینال Laragon با استفاده از دستور [code] اجرا می‌شود:

• در [2]، یک ترمینال به نام PowerShell در داخل [VSCode] باز می‌شود؛
• در [3-4]، می‌توانید ببینید که فایل‌های اجرایی [node] و [npm] قابل دسترسی هستند؛

توجه: ترمینال Laragon را که محیط توسعه [VSCode] را راه‌اندازی کرده است، نبندید، در غیر این صورت خود VSCode بسته خواهد شد.

اکنون یک پیکربندی نهایی را انجام می‌دهیم: ترمینال پیش‌فرض برای [VSCode] را تغییر می‌دهیم:

فایل [settings.json] بلافاصله به‌روزرسانی می‌شود:

حالا، بیایید یک ترمینال جدید باز کنیم: [VSCode] [1]:

• به [2]، یک ترمینال به نام [cmd] (نه PowerShell)؛
• در [3]، فرمان [path] خروجی ترمینال PATH را بازمی‌گرداند؛
• در [4]، می‌توانید به‌وضوح پوشه‌ای را که حاوی فایل‌های اجرایی [node] و [npm] است، ببینید

2.2.2. افزودن افزونه‌ها به ویژوال استودیو کد

بیایید با استفاده از [VSCode] یک فایل جاوااسکریپت ایجاد کنیم:

• در [3-4] یک پوشه ایجاد کنید؛
• در [5]، این را به عنوان پوشهٔ جاری برای [VSCode] تنظیم کنید؛
• در [6]، یک ترمینال باز کنید؛
• در [7]، می‌توانید ببینید که اکنون در پوشهٔ انتخاب‌شده قرار دارید. عملیات‌های زیر در این پوشه انجام خواهند شد؛

• در [1-3]: یک پوشه جدید ایجاد کنید؛
• در [4]: یک فایل به این پوشه اضافه می‌شود؛

• در [5-7]: ما اولین برنامه جاوا اسکریپت خود را ایجاد می‌کنیم؛

• در [8-9]: برنامه جاوااسکریپت را اجرا کنید؛
• نتیجه در کنسول اجرای [10] ظاهر می‌شود. در [11] می‌توانیم دستوری را که اجرا شده است ببینیم: این برنامه [node] بود که اسکریپت [test-01.js] را اجرا کرد. این امر تنها به این دلیل ممکن بود که این فایل اجرایی در داخل PATH قرار داشت، که خود آن نیز در داخل [VSCode] جای گرفته بود؛ در غیر این صورت، خطایی با مضمون ناشناخته بودن فرمان [node] رخ می‌داد؛

بیایید به همین ترتیب برای اجرای اسکریپت دوم، [test-02.js]، ادامه دهیم:

• در [1-3]، اسکریپت جدید را تعریف می‌کنیم. دستور [use strict] در خط ۱ نیازمند بررسی دستوری سخت‌گیرانه است. در این زمینه، هر متغیری باید با استفاده از یکی از کلمات کلیدی [let, const, var] اعلام شود. این امر برای متغیر [x] در خط ۲ صادق نیست؛
• هنگامی که این کد از طریق [Ctrl-F5] اجرا می‌شود، خطای [5] بازگردانده می‌شود. امکان دریافت هشدار در مورد این نوع خطا پیش از اجرا وجود دارد. این امر ارجح است. ما دو کار انجام خواهیم داد:
  • از [npm] برای نصب کتابخانه‌ای به نام [eslint] استفاده کنید که بررسی می‌کند سینتکس اسکریپت با استاندارد ECMAScript 6 مطابقت دارد؛
  • یک افزونه Visual Studio Code را نصب کنیم، که آن هم ESLINT نام دارد و استفاده از کتابخانه [eslint] را در [VSCode] آسان‌تر می‌کند؛

ابتدا، بیایید کتابخانهٔ JavaScript [eslint] را با استفاده از ابزار [npm] نصب کنیم. برای نصب کتابخانهٔ [npm] (که به‌عنوان بسته شناخته می‌شود)، باید نام دقیق آن را بدانید. اگر این را نمی‌دانید، می‌توانید به وب‌سایت [npm] در URL (۲۰۱۹) [https://www.npmjs.com/] مراجعه کنید:

• در [3]، بسته‌هایی که با [esl] شروع می‌شوند؛
• در [4-6]، بسته [eslint] یافت می‌شود؛

• در [7]، فرمان [npm] برای نصب بسته [eslint]؛
• در [8]، پیکربندی بسته؛
• در [9]، برای بررسی نحوی یک اسکریپت جاوااسکریپت استفاده می‌شود؛

ما بسته [eslint] را در یک پنجره [Terminal] درون [VSCode] نصب می‌کنیم. ابتدا باید یک فایل [package.json] را در ریشهٔ دایرکتوری کاری [VSCode] ایجاد کنیم. این فایل شامل فهرست بسته‌های jS مورد استفاده توسط پروژهٔ [VSCode] خواهد بود:

• در [1]، در اکسپلورر پروژه کلیک راست کنید (نه روی پوشه «tests»);
• در [3-4]، فایل [package.json] در ریشه پروژه [javascript]، در همان سطح پوشه [tests] (اما نه داخل [tests]) ایجاد می‌شود؛
• در [4-6]، یک شیء خالی jSON را در فایل [package.json] قرار دهید؛

سپس یک ترمینال [VSCode] برای نصب [eslint] باز می‌شود:

• در [2]، شما در ریشه پروژه [javascript] قرار دارید؛
• در [3]، دستوری که بسته [eslint] را نصب می‌کند؛
• پس از اجرا،
  • در [4-5]، فایل [package.json] تغییر یافته است. خط ۳ نسخهٔ نصب‌شدهٔ [eslint] را نشان می‌دهد. در خط ۲، [devDependencies] معادل آرگومان [--save-dev] برای نصب است. این آرگومان به این معناست که وابستگی نصب‌شده باید در فایل [package.json] به عنوان عنصری از خاصیت [devDependencies] فهرست شود. این خاصیت وابستگی‌های پروژه‌ای مورد نیاز در حالت توسعه را فهرست می‌کند، اما نه در حالت تولید. در واقع، وابستگی [eslint] تنها در حالت توسعه مورد نیاز است تا تأیید شود که کد نوشته شده با استاندارد ECMAScript مطابقت دارد؛
  • در [6]، پوشه‌ای به نام [node_modules] در پروژه ظاهر شده است. این همان پوشه‌ای است که وابستگی‌های پروژه در آن نصب می‌شوند؛

• در [7]، برخی از بسته‌های نصب‌شده. تعداد آن‌ها بسیار زیاد است. در واقع، نه تنها بسته [eslint] نصب شده، بلکه تمام بسته‌هایی که به آن وابسته‌اند نیز نصب شده‌اند؛

• [1-2]؛ در یک ترمینال [VSCode]، دستور پیکربندی بسته [eslint] صادر می‌شود. این برنامه تعدادی سؤال ([3]) را برای تعیین نحوه استفاده شما از [eslint] مطرح می‌کند. در صورت تردید، گزینه‌های پیش‌فرض را انتخاب شده باقی بگذارید. برای انتخاب یک گزینه، از کلیدهای جهت‌نما بالا و پایین صفحه‌کلید برای انتخاب گزینه و سپس تأیید آن استفاده کنید؛
• در [4]، فایلی با نام [.eslintrc.js] در ریشه پروژه ایجاد شده است؛
• در [6]، محتویات فایل. شما می‌توانید محتویات را در فایل خود کپی کنید؛

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

هیچ‌یک از این موارد برای نشانه‌گذاری خطاها در فایل [test-02.js] کافی نیست:

• شما باید دستور [2-3] را برای تحلیل فایل [tests/test-02.js] وارد کنید؛
• در [4]، خطای مربوط به متغیر اعلام‌نشده شناسایی می‌شود؛

ما قصد داریم افزونه‌ای به [VSCode] اضافه کنیم که به ما امکان مشاهده خطاهای جاوااسکریپت را به‌صورت بلادرنگ می‌دهد. این افزونه بر پایه بسته [eslint] است که نصب کرده‌ایم:

• در [3-5]، ما افزونه‌ای به نام [ESLint] را نصب می‌کنیم؛

• به [1]، یک صفحه اطلاعاتی درباره افزونهٔ تازه نصب‌شده؛
• در [2]، می‌توانیم ببینیم که حالت اعتبارسنجی برای [ESLint]، [type] است، که به این معنی است که دستورات jS هنگام تایپ متن اعتبارسنجی خواهند شد؛

ESLint را می‌توان از طریق فایل پیکربندی عمومی برای [VSCode] پیکربندی کرد:

• در [6-7]، پیکربندی برای [ESLint]. اینجاست که می‌توانید آن را تغییر دهید؛

حال بیایید به فایل [test-02.js] بازگردیم:

• در [3-4]، خطاهای مربوط به متغیر [x] اکنون علامت‌گذاری شده‌اند؛
• در [5]: تعداد خطاها در فایل ESLint;
• در [6]، نشان می‌دهد که فایل‌های معیوبی در پوشه [tests] وجود دارد؛

اگر خطا اصلاح شود، هشدارها برای ESLint ناپدید می‌شوند:

حال بیایید افزونه‌ای به نام [Code Runner] را نصب کنیم:

• پس از نصب افزونه‌های [Code-Runner] و [1-5]، می‌توان آنها را با استفاده از [6-7] (در بالا) پیکربندی کرد؛

• در [1-2]، عناصر پیکربندی [Code-Runner]؛
• در [3]، مشخص می‌کنیم که ترمینال خروجی باید قبل از هر اجرا پاک شود؛
• در [4]، عنصر [Executor Map] را که ابزارهای اجرای زبان‌های مختلف را فهرست می‌کند، پیدا کنید؛
• در [5-6]، پیکربندی به کلیپ‌بورد کپی می‌شود؛
• در [7-8]، فایل [settings.json] اصلاح می‌شود؛

• در [2]، یک ویرگول پس از آخرین عنصر در فایل [settings.json] [1] اضافه کنید؛
• در [3]، آنچه قبلاً در [5-6] کپی شده بود را الصاق کنید: این فهرست دستورات برای اجرای زبان‌های مختلف پشتیبانی‌شده توسط [VSCode] است؛
• در [4]، دستور اجرای فایل‌های جاوااسکریپت است. این تنها در صورتی کار می‌کند که [node] در داخل PATH از [VSCode] قرار داشته باشد. اگر اینطور نباشد، می‌توانید مسیر کامل فایل اجرایی [5] را وارد کنید؛

اکنون پیکربندی را ذخیره کنیم (Ctrl-S). با افزونه [Code Runner]، فایل‌های جاوا اسکریپت را می‌توان با کلیک راست روی کد [6] (در بالا) اجرا کرد:

2.2.3. برخی دستورات مفید [VSCode]

• برای قالب‌بندی کد خود، روی آن کلیک راست کنید [1];
• برای بستن پنجره‌های باز، روی عناوین آن‌ها کلیک راست کنید [2-3];

• برای نمایش یک پنجرهٔ خاص [4-5];
• برای ذخیره پروژه خود (Workspace) [6-9];
• برای ذخیره پروژه [10-11];

• برای باز کردن یک پروژه [11-16]:

• برای مشاهده افزونه‌های نصب‌شده برای [19-20]:

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