Динамические страницы wix code как создать

База данных кода Wix и моделирование данных

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

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

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

База данных кодов Wix

Как и все базы данных, база данных Wix Code состоит из отдельных таблиц, которые мы называем коллекциями . В нашем примере художественной школы (см. Изображение ниже) у нас есть две коллекции, по одной для курсов и учителей.

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

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

Пополнение коллекций

У вас есть несколько вариантов для заполнения ваших коллекций. Вы можете вручную вводить данные непосредственно в Wix Content Manager, либо в свои данные Live, либо в свои данные песочницы.

Если вы являетесь специалистом по Excel, вы можете выполнять всю работу в Excel (или любой другой программе для работы с электронными таблицами, которую вы предпочитаете), сохранять лист в виде файла CSV и затем импортировать его в базу данных Wix Code. На самом деле, вы можете создать всю свою коллекцию таким образом, схему и все. Вы можете импортировать в свои данные Live или данные песочницы.

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

Третий вариант – создать форму для ввода пользовательского ввода и сохранения его в базе данных.

Использование внешних баз данных

Если у вас уже есть база данных, вы можете подумать, что не хотите воссоздавать ее в Wix. Хорошей новостью является то, что вам не нужно. Пока ваша база данных предоставляет API, вы можете получить к нему доступ с вашего сайта Wix.

Для простых приложений вы можете использовать модуль wix-fetch – реализацию стандартного API JavaScript Fetch – для доступа к вашей внешней базе данных с помощью HTTP-запроса и использования этих данных на страницах вашего сайта Wix.

Вы также можете связать модуль wix-fetch с другим модулем Wix, wix-router , который позволяет управлять маршрутизацией входящих запросов. Используя функциональные возможности обоих этих модулей, вы можете создавать оптимизированные для SEO динамические страницы, на которых отображаются разные данные в зависимости от URL-адресов, используемых для их доступа.

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

Используя wix-router и wix-fetch, вы можете написать код, который извлекает информацию из входящих запросов на страницу профиля, запрашивает внешнюю базу данных для получения информации для страницы, а затем вводит эти данные в страницу профиля. Вы даже можете повысить безопасность своей страницы с помощью модуля wix-users.

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

Крюки данных

Вы можете добавить хуки к действиям в ваших коллекциях, используя API wix-data .

Например, в нашей коллекции Учителей у нас есть два отдельных поля: Имя и Фамилия. Чтобы упростить отображение имен на наших страницах, мы также хотим, чтобы одно поле содержало оба имени вместе. Для этого мы можем добавить ловушку beforeInsert к нашей коллекции Teachers, которая подключается к действию вставки, считывает содержимое полей «Имя» и «Фамилия», а затем объединяет их и заполняет поле «Полное имя».

Моделирование ваших данных

Теперь, когда мы рассмотрели саму базу данных, давайте поговорим о моделировании ваших данных в базе данных Wix Code.

Коллекционные схемы

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

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

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

Поля идентификатора и основные поля

Каждая коллекция имеет поле _ID, которое является первичным ключом для этой таблицы. Коллекции также имеют основное поле (обозначенное значком замка), которое является ключом отображения для каждого элемента.

Когда вы создаете соединения, используя справочные поля (см. Следующий раздел), значения поступают из основного поля. Конечно, сама ссылка использует поле _ID. Если вы планируете использовать справочные поля, рекомендуется убедиться, что данные, которые вы храните в основном поле, уникальны.

Поля ссылки

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

Каждое поле ссылки указывает на конкретную коллекцию. Значение, отображаемое в поле ссылки в каждом элементе коллекции, берется из значения основного поля ссылочной коллекции.

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

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

Создание страниц из вашего контента

Конечно, хранение и поддержание данных – это хорошо, но реальный смысл наличия веб-сайта – это отображение контента для посетителей. Итак, давайте поговорим о том, как это работает с Wix Code.

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

Настройка динамической страницы

Когда вы создаете динамические страницы в коде Wix, вы сначала определяете URL-адрес, который будет контролировать, какой контент может отображать ваша страница. Некоторые URL-адреса могут указывать один элемент, а другие могут указывать целую категорию элементов (например, все курсы определенного уровня).

Вы устанавливаете шаблон URL, выбирая поле (или поля) из вашей коллекции. Один шаблон URL, который вы можете использовать для отображения каждого из ваших курсов, может быть https: //… / Courses /

Затем вы создаете макет страницы в редакторе, размещая на странице различные элементы и соединяя те, которые хотите использовать для отображения динамических данных, в полях вашей коллекции. Вы можете использовать текстовые элементы, изображения, кнопки, полосы и различные элементы, состоящие из нескольких элементов, такие как повторители, таблицы и галереи. Если вы хотите, чтобы некоторые элементы оставались статичными, например заголовки, просто не подключайте их.

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

Реальные динамические страницы могут выглядеть примерно так.

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

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

Наконец, обратите внимание, что URL-адреса страниц уникальны для каждой страницы. По сути, каждая из этих страниц уникальна. И Wix Code создает их автоматически для нас. Если мы добавим новый курс в нашу коллекцию, страница для него будет создана автоматически.

Мастер-страницы

Еще одна интересная вещь, которую вы можете сделать с помощью Wix Code, – это создание страниц с основными сведениями. Например, вы можете создать страницу, которая будет выступать в качестве указателя, в котором перечислены все учителя в вашей школе и курсы, которые каждый из них преподает. Это потребует извлечения информации из нескольких коллекций (курсов и учителей), а затем отфильтрует курсы по их учителю, чтобы отображались только соответствующие курсы.

Наши коллекции баз данных созданы в структуре «многие к одному»; У каждого учителя есть много курсов, которые они преподают. Если выше мы отображали каждый курс и его отдельного учителя, то теперь мы используем противоположный подход и показываем каждого учителя и все его курсы.

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

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

Резюме

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

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 станет достойным инструментом как для опытных программистов, так и для абсолютных новичков, которые хотят разобраться подробнее в структуре своего сайта, и сделать его еще лучше.

Динамические страницы wix code как создать

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 71ad4007a800b794 • Your IP : 82.102.23.104 • Performance & security by Cloudflare

Создание сайта с использованием динамических страниц

1. Нажмите на значок Добавить в левой части редактора.
   • Редактор Wix: нажмите Добавить />в левой части редактора.
   • Editor X: нажмите Добавить элементы />в верхней части Editor X.
2. Нажмите Менеджер контента.
3. Нажмите Добавить на сайт.
4. Выберите коллекцию шаблонов или начните с пустого.
5. Введите название коллекции.
6. Нажмите Создать страницу.

Шаг 2 | Добавьте свой контент в коллекцию

1. Перейдите в Менеджер контента в редакторе:
   • Редактор Wix: нажмите на значок Менеджер контента />слева в редакторе.
   • Editor X: нажмите на Менеджер контента />в верхней части Editor X.
2. Выберите коллекцию, которую вы создали на предыдущем шаге.
3. Заполните все столбцы для каждого элемента, который вы хотите отобразить.

Шаг 3 | Настройте динамические страницы элементов

1. Перейдите на динамическую страницу элемента в редакторе.
   • Редактор Wix:
     1. Нажмите Меню истраницы />в левой части редактора.
     2. Нажмите на динамическую страницу, добавленную на шаге 1 (она имеет то же название, что и коллекция).
     3. Нажмите на динамическую страницу «Title».
        />
     1. Нажмите Страницы в верхней части редактора.
     2. Прокрутите вниз до Collection-Name» Pages (Dynamic).
     3. Выберите «Название коллекции» Title.
        />
     1. Нажмите на каждый элемент на странице и нажмите Подключить к данным. />(или />в Editor X).
     2. Настройте элемент, используя доступные параметры (разные элементы имеют разные параметры).

     Шаг 4 | Настройте динамические страницы списка

     1. Перейдите на динамическую страницу элемента в редакторе.
        • Редактор Wix:
          1. Нажмите на значок Страницы />в левой панели редактора.
          2. Нажмите на динамическую страницу, добавленную на шаге 1 (она имеет то же название, что и коллекция).
          3. Нажмите на динамическую страницу «Название коллекции» (All).
             />
          1. Нажмите Страницы в верхней части редактора.
          2. Прокрутите вниз до Collection-Name» Pages (Dynamic).
          3. Нажмите на динамическую страницу «Название коллекции» (All).
             />
          1. Нажмите на каждый элемент на странице и нажмите Подключить к данным. />(или />в Editor X).
          2. Настройте элемент, используя доступные параметры (разные элементы имеют разные параметры).

          Шаг 5 | Синхронизируйте опциональную песочницу (Sandbox) и живую коллекцию

          1. Перейдите в Менеджер контента в редакторе:
             • Редактор Wix: нажмите на значок Менеджера контента />слева в редакторе.
             • Editor X: нажмите значок Менеджер контента />в верхней части Editor X.
          2. Нажмите на коллекцию, чтобы открыть ее.
          3. Нажмите « Синхронизировать с Live» вверху.
          4. Выберите количество элементов для синхронизации.