Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Mooha — нодовый интерфейс для PHP

Anna | 31.05.2014 | нет комментариев

Мне Зачастую доводилось сталкиваться с нодовыми интерфейсами в программах. Начиная с музыкальных модульных приложений, заканчивая пакетами для создания трехмерной графики.

Идея графического управления логикой программы мне неизменно казалась дюже изящным, а в некоторых случаях, исключительным благополучным решением. Позднее, когда помимо музыки и видео я увлекся программированием (в основном PHP, так уж сложилось), мне захотелось испробовать, пускай даже в качестве эксперимента, сделать графическую оболочку для выполнения тех нехитрых задач, с которыми я сталкивался в своей работе.

Мое знакомство с нодовым интерфейсом (либо графическим программированием) началось с программы Plogue Bidule. Это приложение относится к семейству модульных программ для управления звуком в настоящем времени. В свое время эта программа помогала мне решать довольно нетривиальные задачи, касающиеся обработки звука и синхронизации сценического оборудования на живых выступлениях нескольких моих музыкальных планов.

Интерфейс программы Plogue Bidule выглядит дальнейшим образом:

В основе работы — создание логических цепочек. Как мне кажется, такой подход абсолютно безусловно вписывается в работу со звуком, правда кому-то может показаться трудным с первого взора. Звук в программе — это беспрерывный поток, тот, что возникает из источника (входящий канал звуковой карты, аудио файл либо генератор сигнала), и позже определенной обработки Почаще каждого отправляется на выход звуковой карты либо на запись в файл.

Основные руководящие конструкции интерфейса — ноды (либо модули, блоки, узлы и т.д.), которые по сути являются функциями. По аналогии с музыкальным оборудованием — это приборы, объединенные между собой проводами.

Plogue Bidule включает в себя много увлекательных вероятностей, которые не ограничены только работой со звуком, но для данной статьи этого изложения будет довольно.

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

Нодовые редакторы обширно применяются в графических пакетах для создания 3D графики. В таких программах «черные ящики» описывают труднейшие конструкции и функции, а интерфейс разрешает сберечь волю и эластичность в построении логики выполнения. Самая увлекательная, на мой взор, реализация нодовой системы в программе Houdini.

Так а что же с веб-программированием? Поиск схожих систем не дал итогов. Я подумал, что, допустимо, в такой спецтехнологии легко отсутствует надобность. И что идея моя родилась скорее от некомпетентности и наивности. Но желание испробовать сделать такой инструмент оказалось крепче моих сомнений.

Так родился план Mooha.

PHP, MySQL, HTML

Каким же образом дозволено объединить эти три спецтехнологии в одной нодовой системе, Дабы получить комфортный графический инструмент? В программах для создания 3D графики в нодовых редакторах Зачастую применяется распределение на контексты, которые традиционно нехорошо совместимы друг с ином. Но в нашем случае конструкции данных не настоль трудны и разнородны, Дабы плодить отдельные редакторы. Следственно я решил сделать цельное пространство, поделив ноды на категории по спецтехнологиям:

  • HTML/XML ноды (для итога HTML/XML тэгов)
  • PHP ноды (управление логикой)
  • Ноды запросов к базе данных MySQL

Идея состояла в том, Дабы переход между спецтехнологиями был неприметен для пользователя. Дабы соединение нод различных категорий между собой создавало цельный поток выполнения программы.

Разглядим по порядку все три категории нод.

HTML/XML ноды

Соединяя такие ноды между собой мы получаем простейшую конструкцию HTML документа. По-умолчанию HTML/XML нода имеет по одному входу и одному выходу. Вход (IN) — то, что помещается вовнутрь тэга, выход (OUT) — результирующая строка. Таким образом из последнего выхода ноды «HTML» мы получим строку:

<html>
  <head>
    <meta />
    <script />
  </head>
  <body>
    <div>
      <div />
      <div />
    </div>
  </body>
</html>

Служебная нода «Merge» применяется для вероятности повлиять на сортировку входящих соединений. Сортировка доступна в свойствах самой ноды. В последней ноде «HTML» два входящих соединения конкатенируются в том порядке, в котором случилось соединение. Т.е. если вначале подключили «HEAD», а потом «BODY», то в такой последовательности они и появятся в финальной строке.

Признаки тэга мы можем прописать в свойствах ноды, но при желании можем выводить их в виде коннекторов для входящих соединений. Скажем, добавив ноде «my div» коннекторы для признаков id и class мы получим такой вид:

<div id="my-id">
<div>my text</div>
</div>

Переменные со строковыми значениями «my-id» и «my-class» попадают в наши признаки. Переменная «my text» становится содержимым первого тэга div. Переменные — это теснее PHP ноды, о которых речь пойдет чуть ниже.

В качестве коннекторов мы можем выводить и образцы для замены текста внутри тэга. Скажем, если у нас имеется дальнейший тэг с прописанным содержимым:

<h1>Hello, %user%</h1>

И если образец %user% выведен как коннектор, то сейчас мы можем заменить данный образец переменной дальнейшим образом:

В первом случае текст внутри ноды прописан в ее свойствах и коннектор для данных отключен, а выведен только коннектор для замены образца. Во втором случае текст с образцом тоже приходит из переменной. И в том и в ином случае на выходе мы получим:

<h1>Hello, Mooha</h1>

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

Скажем, у нас есть файл template.tpl, тот, что содержит два образца для замены: %title% и %content%. Содержимое файла следующее:

<html>
  <head>
  </head>
  <body>
    <h1>%title%</h1>
    <div>%content%</div>
  </body>
</html>

Дабы подключить файл и заменить образцы переменными, довольно возвести вот такую схему:

В итоге получим:

<html>
  <head>
  </head>
  <body>
    <h1>My article title</h1>
    <div>My article content</div>
  </body>
</html>

Так как мы теснее вышли за рамки изложения только HTML нод, перейдем к дальнейшему типу — к PHP нодам.

PHP ноды

Это примитивный пример арифметических вычислений и вызова встроенной функции abs() с поддержкой PHP нод. Наименования нод произвольные и могут меняться в свойствах всякой ноды. Для комфорта я переименовал их так, Дабы были видны значения переменных и наименования арифметических операций.
Первые три ноды «1», «2» и «5» — это переменные, значения которых соответствуют наименованиям.
Т.е. в итоге мы получим такой скрипт:

<?php
  print abs((1 2)-5);
?>

А на выходе легко число 2.

Я постарался реализовать нужные логические конструкции, традиционно используемые в нодовых системах. Скажем, вот так выглядит сопоставление 2-х переменных (либо итогов 2-х потоков):

Итог будет true (1!=2).

А вот так дозволено делать выбор потока, исходя из условий:

Тут всякому красному коннектору в свойствах ноды присвоены значения, с которыми сравнивается значение, поступившее в коннектор оранжевого цвета. Если значения совпадают, то переключатель Switch пропускает соответствующий поток. В этом примере красные коннекторы имеют значения 1, 2 и 3. То есть итог такой конструкции будет «it was 2».

Во всех цепочках в соединениях передаются финальные значения всех предыдущих вычислений потока. Таким образом в дальнейшем примере у нас итог будет тоже «it was 2», но результирующая строка собирается из нескольких действий:

Генерируется приблизительно дальнейший код:

$data = 2;
switch ($data)
{
  case "1": // заданное в первом коннекторе значение для сопоставления
  $result = "it was 1";
  break;
  case "2":// заданное во втором коннекторе значение для сопоставления
  $result = str_replace("foo", "2", "in was foo");
  break;
  case "3": // заданное в третьем коннекторе значение для сопоставления
  $result = "it was 3";
  break;
  default:
  $result=false;
}
var_dump($result);

Отдельного внимания заслуживает нода Copy, которая по значениям из первого соединения размножает образец из второго. Это пригодно, скажем, в том случае, когда нам нужно размножить HTML код и заменить в нем образцы значениями из массива. В самом простом случае с одномерным массивом такая схема выглядит дальнейшим образом:

Для наглядности я назвал ноды значениями их переменных. В 1-й коннектор (для значений) мы запускаем JSON массив, во 2-й — HTML код с образцом для замены. Все ноды (либо цепочки нод), подключенные к коннектору образца будут скопированы столько раз, сколько имеется элементов в массиве, подключенному к первому коннектору. При этом у всякой ноды слева от такого соединения появится особая настройка, какие именно данные в ней заменять элементом из массива. В нашем случае в ноде с параграфом настроена замена образца %number%. Т.е. итогом этой схемы будет дальнейший код:

<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>

Вот пример труднее, с массивом объектов и с несколькими нодами:

В переменной «JSON» дальнейший массив объектов:

[
  {"title":"first title","content":"first content"},
  {"title":"second title","content":"second content"}
]

В ноде c тэгом <h1> образцу %title% в качестве источника для копирования указан объект «title» массива. В ноде с тэгом <p> образцу %content% в качестве источника для копирования указан объект «content» массива. В итоге генерируется дальнейший код:

<div>
  <h1>first title</h1>
  <p>first content</p>
</div>
<div>
  <h1>second title</h1>
  <p>second content</p>
</div>

По умолчанию нода Copy имеет тип foreach и работает так, как я описал в 2-х примерах выше. Но мы можем предпочесть тип for, позже чего появится вероятность настроить стартовое значение счетчика, финальное значение, шаг и тип инкремента (нарастающий либо убывающий).

Ноды запросов к таблицам базы данных MySQL

Базовая нода для запросов — это таблица, а вернее — оператор SELECT, тот, что выполняется по-умолчанию при подключении к любому полю. Присоединившись к последнему выходу, обозначенному символом “*”, мы исполним запрос:

SELECT * FROM `authors`

Итог получим в виде массива объектов в формате JSON. Это подключение «поймает» дальнейший комплект:

[
  { "id": "1", "Name": "Iain Menzies Banks", "Birthday": "1954-02-16" },
  { "id": "2", "Name": "Charles Michael Palahniuk", "Birthday": "1962-02-21" }
]

Дабы получить массив только имен авторов, соединение будет выглядеть дальнейшим образом:

На выходе мы получим обыкновенный одномерный массив:

["Iain Menzies Banks", "Charles Michael Palahniuk"]

На данный момент в редакторе есть несколько служебных SQL нод, с поддержкой которых дозволено исполнять несложные выборки. Скажем:

В первом случае (слева) мы исполним запрос:

SELECT * FROM `authors` WHERE id=1

И получим массив с одним объектом:

[
  { "id": "1", "Name": "Iain Menzies Banks", "Birthday": "1954-02-16" }
]

Во втором случае (справа) запрос будет таким:

SELECT * FROM `authors` WHERE Name LIKE '%Banks%'

А вот запрос с несколькими условиями и сортировкой:

SELECT * FROM `authors` WHERE (`Birthday` < '1990-01-01' AND `Birthday` > '1920-01-01') ORDER BY `Name` ASC

Служебная нода AND выступает тут не только в качестве логичного оператора в условии WHERE, но и в качестве соединения команд в одном запросе (в нашем случае, добавление к запросу команды ORDER BY)

Запросы INSERT, UPDATE и DELETE вызываются подключениями к таким же нодам-таблицам, но только с соответствующими настройками.

Легкой INSERT выглядит так:

INSERT INTO `authors` (`id`, `Name`, `Birthday`) VALUES ('1', 'Iain Menzies Banks', '1954-02-16')

UPDATE:

UPDATE `authors` SET `Name`='Iain Banks', `Birthday`='1954-02-17' WHERE `id`='1'

DELETE:

DELETE FROM `authors` WHERE `Birthday`<'1954-02-17'

В процессе построения генерируются запросы с применением PDO.

С поддержкой нодовых соединений дозволено возвести примерно всякие типы запросов, в том числе организовать JOIN объединения. Впрочем не для всех трудных запросов я обнаружил безукоризненные графические решения, следственно оставил вероятность вписать текст SQL инструкции в особую ноду. Немножко забегая вперед, скажу, что работу с базой данных дозволено возвести в системе и другими методами, не только с поддержкой MySQL нод.

«А сейчас совместно!»

И, наконец, пример объединения всех 3 спецтехнологий (MySQL, PHP и HTML) в одной цепочке, может выглядеть дальнейшим образом:

Тут у нас имеется заготовленный образец library.tpl для итога книг из домашней библиотеки. Содержимое приблизительно следующее:

<div>
  <select>
    <option value=''>all authors</option>
    %author-list%
  </select>
</div>
<br />
<div>%book-list%</div>

У нас есть два образца для замены: %author-list% и %book-list%. В 1-й нам необходимо вывести тэги option, соответствующие каждому авторам. Во 2-й — все книги, а именно — размножить блок «book block», в котором содержится HTML код итога одной книги. 1-й список нам необходим для того, Дабы фильтровать книги по автору (для этого действия мы будем применять функцию jquery в образце library.tpl).

Для первого образца %author-list% мы добавляем ноду Copy («Author Copy»), которая по данным из таблицы «authors» клонирует тэг «option», при этом вовнутрь тэга помещает имя автора, а признаку «value» присваивает значение id. На выходе ноды «Author Copy» мы получим дальнейший код:

<option value='1'>Iain Menzies Banks</option>
<option value='2'>Charles Michael Palahniuk</option>
<option value='3'>Mikhail Bulgakov</option>

Нода «book block» содержит дальнейший код:

<div class='author-%author-id%'>
  <img width='100' src='images/%image%' align='left' />
  <b>%title%</b> by <b>%author%</b>
  <br />
  ISBN: %isbn%<br />
  <small>%description%</small>
  <br clear='all'/>
</div>

Образцы в этом блоке заменяются данными книги из объединенной выборки 2-х таблиц «books» и «authors». Таблица «authors» тут необходима для итога в книге имени ее автора. Сам блок клонируется столько раз, сколько у нас записей в таблице «books».

Вот что у нас получится в итоге:

Завершение

В этой статье я постарался описать основную идею работы системы. В плане реализовано много других вероятностей. Некоторые из них — нормальные для нодовых интерфейсов, некоторые мне пришлось изобретать самому, с учетом специфики редактора. Вот неполный список доступных на данный момент инструментов:

  • Создание групп — особых нод, вовнутрь которых дозволено прятать целые схемы и выводить только нужные входящие и выходящие коннекторы. Глубина вложенности групп неограниченна.
  • Вероятность выводить переменные из всякий вложенной схемы в качестве параметров для группы-родителя.
  • Сохранение логических схем либо их частей в качестве сниппетов, для повторного применения в других скриптах.
  • Вероятность написания своих функций, которые дозволено выводить в редакторе в виде нод.
  • Создание своих либо подключение готовых классов, вероятность итога способов классов в качестве нод.
  • Подключение скриптов (include), как сделанных в самой системе, так и скриптов из других файлов.
  • Вероятность редактирования файлов, применяя встроенный редактор.
  • Инструменты для создания и редактирования таблиц MySQL.

Итог работы редактора — комплект генерированных PHP файлов. Всякая сцена — это обособленный скрипт, сохраненный в особой папке. Такой скрипт может выполняться без помощи самого редактора. Помимо того, в настройках системы дозволено предпочесть стартовый сценарий, тот, что будет включать в себя основную логику работы каждого плана, исходя из полученных данных (строка запроса либо передаваемые параметры).

Цель написания этой статьи — осознать, насколько такая система может быть увлекательна для разработчиков. Я слишком длинно и увлеченно занимался этим планом и у меня изменилось отношение к нему с того момента, как я начал над ним работу. Следственно я буду весьма благодарен за отзывы и комментарии, за вопросы и предложения, а также за участие в тестировании.

На данный момент план примерно завершен и идет процесс отладки. Вовсе скоро я буду готов выложить бета-версию. Для того, Дабы быть в курсе процесса разработки и узнать о выходе плана — необходимо легко подписаться на приобретение новостей любым комфортным методом на сайте Mooha.net.

Техническая информация

В плане использованы следующие инструменты:

  • HTML5 Canvas и Javascript (нодовый редактор)
  • JQuery 2.0 (панели свойств и настроек)
  • Codemirror (встроенный редактор файлов)
  • CKEditor (расширенный редактор полей таблиц базы данных)
  • Spectrum Colorpicker (метаморфоза цвета элементов нод)
  • jQuery File Tree Plugin (браузер файловой системы)

Серверная часть тестировалась в таких условиях:

  • Apache 2.2.22
  • PHP 5.4.3
  • MySQL 5.5.24
 Источник: programmingmaster.ru
Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB