Установка і настройка робочого оточення

У цій статті ми розглянемо такі питання:

Установка середовища розробки PhpStorm і створення проекту в ній
Налагодження та використання відладчика Xdebug для налагодження серверних скриптів.
Налагодження та використання відладчика Xdebug для налагодження клієнтських скриптів.
Робота з базами даних MySQL

Установка середовища розробки PhpStorm і створення проекту в ній

Викачуємо інсталяційний файл PhpStorm і запускаємо його. В процесі установки немає нічого особливого, тому не будемо загострювати на ньому увагу. Перш, ніж продовжити, створіть віртуальний хост, як це було описано в попередній частині статті. Запускаємо PhpStorm і в головному меню вибираємо File. New Project. Project name вкажіть довільний, Location - папка, в якій будуть зберігатися (або вже зберігаються) файли вашого сайту. Project type - виберіть PHP Empty Project.

Натиснувши "OK", ви завершите створення проекту. Тепер створимо в папці нашого проекту файл index.php такого змісту:

Можете перевірити результат в браузері. Ви повинні побачити "7 10".

Налагодження та використання відладчика Xdebug для налагодження серверних скриптів

Насамперед відкриваємо конфігураційний файл PHP З: \ wamp \ bin \ php \ phpX.X.X \ php.ini

Доступ до цього файлу ви також можете отримати з розділу PHP меню Wamp

Замініть весь код в секції [xdebug] на цей:

У цьому ж файлі знайдете змінну zend_extension. В папці з: /wamp/bin/php/phpX.X.X/zend_ext/ знайдіть файл з назва на подобі php_xdebug-2.2.5-5.5-vc11-x86_64.dll. яке залежить від версій Wamp і Xdebug. Задайте змінної zend_extension шлях до цього файлу:

На цьому настройка Xdebug завершена. Переходимо до налаштування PhpStorm. У правому верхньому куті вікна PhpStorm знайдіть, поки ще порожній, що випадає список конфігурацій. У ньому зараз всього одні пункт Edit Configurations.

При кліці по цьому пункту відкриється наступне вікно:

У цьому вікні натисніть по іконці з зображенням плюса і в випадаючому списку виберіть PHP Web Application

Після цього перед вами відкриється вікно додавання нової конфігурації. У графі сервер потрібно вказати сервер, який буде використовувати дана конфігурація, але для початку потрібно додати. Для цього клікніть по іконці. поруч з списком, що випадає серверів:

Клікнувши по кнопці OK, ви завершите процедуру додавання сервера і перед вами знову відкриється вікно редагування конфігурації. У цьому вікні в списку, що випадає Server виберіть доданий сервер, вкажіть довільне ім'я конфігурації, Start Url залиште за умовчанням, в якості браузера вкажіть той, який вважаєте за краще використовувати.

Клікнувши ОК, в завершите створення конфігурації.

Є два способи запуску процесу налагодження. Один з них - клікнути по іконці з зображенням зеленого жука в правому верхньому куті вікна PhpStorm:

При кліці по цій іконці в браузері відкриється нова вкладка і почнеться виконання скрипта. Як тільки виконання дійде до точки зупинки, виконання скрипта призупиниться і вікно PhpStorm прийме наступний вигляд:

У вкладці Variables ви можете бачити значення всіх доступних в даний момент змінних. Клікнувши по іконці з плюсів у вкладці Watches ви можете додати вираз, за зміною значення якого хочете спостерігати. Додайте вираз:

Так як виконання скрипта ще не дійшла до ініціалізації змінних, ви побачите наступне:

Над вкладкою Variables присутній панель управління процесом виконання скрипта:

Значення кнопок на ній зліва направо:

Step Over. Виконання скрипта продовжиться до наступного рядка
Step Into. Якщо в рядку присутні виклики функцій, процес виконання продовжиться всередині цієї функції і зупиниться на її першому рядку
Force Step Into. При налагодженні великих додатків можна вказати отладчику не «входити" в деякі методи при використанні функції Step Into. Це може істотно заощадити час. Однак, може виникнути ситуації, коли в виключений метод все таки потрібно заглянути. Щоб не міняти кожен раз настройки, ви можете користуватися функцією Force Step Into
Step Out. Автоматично завершує виконання даної функції і зупиняє процес виконання скрипта на рядку, в якій ця функція була викликана
Run to Cursor. Автоматично виконує всі рядки коду, але зупиняється на тій, де встановлений курсор

Встановіть курсор на рядку $ c = addition ($ n, $ m); і клацніть на кнопці "Run to Cursor". Виконання скрипта дійде до зазначеного рядка і зупиниться. Тим часом, відбудеться ініціалізація змінних і ви побачите їх значення на панелі Variables:

Так само, значення будь-якої змінної можна дізнатися, просто навівши на неї курсор миші в будь-якому місці скрипта. Крім того, на вкладці Watches тепер можна побачити результат виконання раніше доданих виразів:

Клік по кнопці "Step Over" продовжить виконання скрипта до наступного рядка. При цьому на вкладці Variables ви побачите значення змінної $ c. Клікнувши тепер по кнопці "Step Into" ви опинитеся всередині функції multiplication. При цьому на панелі Variables ви зможете бачити тільки значення змінних, які були передані в функцію як параметри. Щоб завершити виконання скрипта натисніть клавішу F9.

Існує також альтернативний спосіб запуску процесу налагодження скриптів. Щоб ним скористатися вам буде потрібно розширення для браузера Google Chrome Xdebug helper. Встановіть це розширення, а потім перейдіть в PhpStorm і клацніть на кнопці в правому верхньому кутку його вікна:

Це ікона розширення Xdebug helper. яке ми встановили раніше. Після цього обновіть сторінку і якщо в скрипті є точки зупину, то його виконання перерветься на них і чекатиме ваших дій з управління процесом налагодження.

Налагодження та використання відладчика Xdebug для налагодження клієнтських скриптів

Виберіть нову конфігурацію в випадаючому списку конфігурацій і клацніть по іконці з зеленим жуком.

Робота з базами даних MySQL

Крім засобів розробки і налагодження IDE PhpStorm має вбудовані засоби для роботи з різними базами даних. Розглянемо роботу з ними на прикладі MySQL. У правому верхньому куті вікна PhpStorm знайдіть закладку Database. Клікнувши по ній, ви відкриєте поки ще порожню вкладку. Клацніть по кнопці з зображенням плюса і в випадаючому списку виберіть Data Source, а потім MySQL

Перед вами відкриється вікно налаштування з'єднання з базою даних, в нижній частині якого ви побачите повідомлення про те, що у вас відсутній драйвер бази даних.

Щоб вирішити цю проблему досить клікнути по посиланню Download. По закінченню процесу установки драйвера заповніть поля форми:

Якщо ви використовуєте базу даних, що зберігається на вашому комп'ютері, то досить вказати її назву і ім'я користувача, який використовується для підключення (зазвичай root). Натисніть Test Connection. щоб протестувати з'єднання. На цьому процес настройки завершено. На вкладці Database ви побачите таблиці вашої бази даних.

інші статті