Часть 2. Продолжение

 

Шаг 3.  Настройка ExtJs и PHP

Включает в себя соединение коннекторов друг с другом, с помощью которых и осуществляется передача данных из БД. Скачиваем библиотеку с официального сайта ExtJs [http://www.sencha.com/products/extjs/download/] и копируем на веб-сервер. Из большого списка готовых компонентов [http://docs.sencha.com/extjs/4.1.0/#!/example] выбрана таблица Grid with Live Search Capability, так как в ней уже реализован поиск, выделение строки при наведении мыши, сортировка по убыванию и возрастанию, скрытие/отображение полей. На веб-сервере в папке с ExtJs, в подпапке с табличным компонентом создаем файл Index.html, в котором подключаем все необходимые файлы и библиотеки (см. листинг 2), а также вносим поправки в основном файле live-search-grid.js [http://habrahabr.ru/sandbox/44023/].

Листинг 2 – Подключение библиотек и файлов.

Коннектор Jason в ExtJs не умеет напрямую соединяться с БД, поэтому связующим звеном (посредником) между таблицей Grid with Live Search Capability и запросом на выборку в БД SQL Server является PHP-коннектор, в файлах которого указывается тип работы с данными (см. листинг 3). Коннектор Jason настраивается в файле live-search-grid.js [http://newpg.ru/documentation/extjs/extjs_lessons/lesson5.html  и http://festerok.blogspot.com/2010/05/test1.html].

Листинг 3 – Код PHP для связи с запросом в БД.

В принципе, проделанных действий достаточно для отображения собранных данных. Связка MS SQL Server+PHP+ExtJs настроена корректно. В результате получаем быстро работающую программу с современным интерфейсом при минимальных знаниях в программировании (см. рис.5). Имея точный набор параметров IT-активов компании, можно провести анализ и включить в планы закупок устаревшее оборудование.

Рисунок 5 – Отображение автоматически собранных данных.

 

Шаг 4. Немного программирования

Для отображения полной информации проделанных шагов недостаточно, так как система учета IT-имущества на данном этапе кардинально мало чем отличается от штатных средств (отчетов) SCCM. Некоторые данные все равно приходится вводить вручную, такие как инвентарный и серийный номера ПК, модель монитора и принтера с их номерами, название филиала и отдела, ФИО, дату, гарантию, номер кабинета и телефона и прочее. Теперь связку SQLServer+PHP+ExtJs необходимо настроить для редактирования данных. Для этого таблица Grid with Live Search Capability была расширена и усовершенствована: добавлены дополнительные редактируемые поля, подключены плагины печати и экспорта данных.

Сделать дополнительные поля редактируемыми несложно. Необходимо только  подключить плагин редактирования, а выглядит он в виде выделенной строки с двумя кнопками UpdateCancel. Не нужно дополнительно создавать окно с множеством текстовых полей и меток, выпадающих списков и кнопок, а также писать код для изменения данных в таблице. В качестве примера [http://erum.ru/55.htm] в листингах отображу только поля Inv Nom PC, Garantiya, так как подключение остальных дополнительных полей происходит аналогичным способом. В результате получаем возможность изменять данные, кликнув два раза мышью по выделенной строке (см. рис.6).

    Рисунок 6 – Изменение данных выделенной строки.

Визуально информация может корректироваться, но данные в БД еще не попадают, поэтому изменения мы пока не увидим. Для этого формируем средствами PHP шаблон запроса для обновления данных, в котором описываем дополнительные поля. Файл php_upd.php (см. листинг 6) соединяю с новым запросом dbo.v_inventory_hard_edit в БД, который отвечает за обновление (редактирование) данных.

    Листинг 4 – PHP-код для обновления данных.

После этого БД “CM_INV” обо всех изменениях знает, но наша система учета ИТ-имущества их еще не отображает. Чтобы новая информация стала доступна, дополнительные редактируемые поля необходимо добавить в SQL-запрос на выборку dbo.v_inventory_hardware (см. листинг 1). Только теперь данные об инвентаризации готовы к просмотру и правке.

Чтобы информацию можно было распечатать, используем плагин печати [https://github.com/loiane/extjs4-ux-gridprinter?], добавим на форму кнопку (c названием PrintAll) (см. рис.5), активирующую нужное событие. Все содержащиеся данные компонента GridPanel через несколько секунд отобразятся на бумаге в табличном виде. Теперь анализ, сравнение, планирование можно производить, не будучи привязанным к компьютеру.   

Также нужно иметь возможность пересылать полученную информацию в электронном виде. Для решения этого вопроса используется плагин экспорта в MS Excel [http://www.masonzhang.com/2012/11/grid-to-excel-export-plugin-for-extjs-4.html]. Добавление кнопки на форму (с названием Export All to Excel) (см. рис.5) и обработчика события вызова плагина экспорта аналогичны действиям по подключению плагина печати.

Контекстное меню необходимо, если требуется произвести действия по конкретному ПК сотрудника, в моем случае это просмотр либо передача (в печатном или электронном виде) данных. Вызывается меню правой кнопкой мыши по выделенной строке (см. рис. 8). В появившемся окне отображается вся информация одного конкретного устройства (см. рис. 9_1, 9_2), которую также можно распечатать или экспортировать в MS Excel, что позволяют осуществить уже ранее подключенные плагины. В основной файл программы live-search-grid.js необходимо добавить код, который отвечает за создание меню, а также вызов и обработку событий [http://docs.sencha.com/extjs/4.1.0/#!/example/menu/action-grid.html].

Рисунок 8. Контекстное меню.

Рисунок 9. Данные конкретного устройства.

Рисунок 10. Данные конкретного устройства (продолжение).

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

Изменение стандартного шрифта является одним из способов, чтобы придать проекту наглядность, уникальность, стиль. Этого можно добиться вручную (с помощью jpeg-картинок, CSS, W3C и прочее), либо воспользоваться преобразователем шрифтов, например, Cufon [http://cufon.shoqolate.com/generate/] (см. рис.7), который является одним из самых популярных в данный момент. Cufon состоит из двух независимых частей. Первая - генератор шрифта, который преобразовывает стандартный шрифт (в форматах, TTF, OTF) в некоторый промежуточный формат для дальнейшего использования. Вторая часть – движок рендеринга на JavaScript. Скачать дистрибутив Cufon [cufon.shoqolate.com/js/cufon-yui.js], который в сжатом виде занимает 14 КБ. Для начала файл со стандартным шрифтом вставляется в форму [http://cufon.shoqolate.com/generate/], а после генерации получается файл DynarShadow_font.js. Подключение файлов шрифтов смотреть шаг 3.

            Рисунок 7. Нестандартный шрифт.

При тестировании системы инвентаризации пользовательских ПК предприятия разными браузерами никаких искажений не наблюдалось.