Часть 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. Нестандартный шрифт.

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

 

Вывод

после проделанных шагов была получена полностью автоматизированная система идентификации IT-активов (с ОС Windows и ОС Linux) с приятным, понятным, удобным веб-отображением и возможностью предоставить данные начальству в наглядном виде, что позволяет комплексно оценить состояние и функционирование компонентов ИТ-инфраструктуры, а также помогает проводить анализ и планирование закупок оборудования. При этом время сбора данных сократилось в несколько раз.