Wix Code - новый функционал для правки кода сайта

Она позволяет создавать наиболее сложные порталы, собирать сведения о поведении их посетителей, разрабатывать приложения без необходимости длительного изучения языков веб-программирования и верстки. Как сделать сайт с помощью Wix и других конструкторов мы описывали в предыдущей статье.

Для использования Wix Code изначально нужно включить одноименный блок на панели инструментов. Появится несколько новых панелей:

• Свойства
• Коды (добавляется в нижней части редактора)
• Структура сайта (добавляется в левой части редактора)
• В меню Добавить появляется много новых элементов – База данных, Пользовательский ввод и другие. 

Рассмотрим теперь основные инструменты, которые были представлены на тестирование в бета-версии (на данный момент продолжается этап испытаний, хотя объявлено о полноценном запуске платформы).

Базы данных

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

1. На боковой панели Структура сайта необходимо кликнуть по значку «+» в разделе База данных, и выбрать пункт Новая коллекция. Может появиться всплывающее окно с подсказками, нужно будет нажать Начать создание
2. Откроется окно Создать коллекцию базы данных. Присваиваем коллекции любое удобное имя
3. В выпадающем меню можно выбрать разрешение на совершение операций – чтение, запись, изменение или удаление данных. Чаще всего будет использоваться Форма ввода, чтобы пользователи могли добавлять информацию, но изменять и удалять ее сможет только администратор.
4. Нажмите кнопку Создать коллекцию – и откроется таблица базы данных для добавления или просмотра сведений.

После создания коллекции в редакторе можно добавлять поля, которые будут доступны пользователям для внесения информации. Необходимо внимательно выбирать тип поля, чтобы сбор данных был максимально продуктивным.

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

Связь между созданной формой и базой данных осуществляется путем настройки сборщика данных. Для его установления необходимо выбрать в разделе меню Добавить пункт База данных, а затем – Набор данных. Кликнув на кнопку Редактировать набор данных, вы откроете окно настроек, где нужно выбрать пункт Соединение с коллекцией, а режим нужно установить Только запись (write-only).

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

После завершения всех описанных операций создайте кнопку Отправить, нажатие которой инициирует отправку всех сведений в базу. Не забудьте протестировать форму и проверить корректность заполнения базы данных.

Динамические страницы

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

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

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

Существует два типа динамических страниц – для одного элемента (например, рецепта, или как в описываемом случае – отдельного курса) или категории (каталога, раздела).

Для динамической страницы прописывается адрес, после чего наступает момент собственно создания контента, который привязывается к базе данных. Например, добавляется поле заголовка, который подключается к полю Title в созданной заранее базы, поля описания курса и т.д. – все элементы, которые изначально предусмотрены для определенной категории страниц. После создания всех страниц необходимо записать базу данных, кликнув по кнопке Опубликовать (Publish):

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

Интерактивность сайта

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

Рассмотрим пример, в котором изображение будет показываться только после нажатия на кнопку.

1. В Редакторе необходимо добавить элементы Картинка и Кнопка.
2. Далее нужно выбрать пункт Свойства для элемента Кнопка => При нажатии (onclick)
3. В коде автоматически пропишется нужная часть.
4. Для того чтобы скрыть изображение до момента его вызова пользователем, при добавлении картинки необходимо выбрать соответствующий пункт (Hidden on load). Каждое изображение имеет свой id, который отображается при наведении курсора на изображение. Его необходимо запомнить или записать.
5. Далее вводим конструкцию $w, нажимаем Ctrl+Пробел, и выбираем id изображения из предложенного списка.
6. Нажмите на Период (Period) – отобразится список функций, которые можно выполнять с изображением. Необходимо выбрать пункт show(animationName), после чего код обретет такой вид:

В данном случае вместо animationName будет использоваться один из вариантов появления изображения после клика пользователя – Плавное появление (FadeIn), Резкое появление (DropIn), Вылет (FlyIn) или Появление вращением (SpinIn).

Резюмируя описанное, можно отметить, что платформа Wix Code станет достойным инструментом как для опытных программистов, так и для абсолютных новичков, которые хотят разобраться подробнее в структуре своего сайта, и сделать его еще лучше.