Центр поддержки Wix
    Главная
  1. Создание сайта
  2. Продвинутые функции
  3. CMS (в прошлом Менеджер контента)
  4. Пользовательский ввод
    5. Руководство: Создание формы для хранения данных пользователей в коллекции базы данных

Руководство: Создание формы для хранения данных пользователей в коллекции базы данных

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

1. Включите инструменты разработчика

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

Включите Инструменты разработчика отметив галочкой соответствующий бокс в меню Инструменты в редакторе.

После того, как вы включили эту функцию, вы увидите несколько изменений в редакторе:
  • Панель Properties. Если вы закроете эту панель, вы сможете снова открыть ее через меню Инструменты.
  • Панель кода будет добавлена внизу в редакторе.
  • Слева в редакторе появится боковое меню Site Structure.
  • В меню Добавить появится больше элементов, включая Ввод данных и База данных (Database).

2. Создайте коллекцию базы данных

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

Чтобы создать коллекцию:

  1. В боковой панели Структура сайта (Site Structure), нажмите иконку + напротив Database и нажмите New Collection. Если появилось всплывающее окно Introducing Database Collections, то нажмите Start Creating.
  2. Затем откроется окно Create a Database Collection.
  3. Назовите свою коллекцию. Примечание: Присвоить название для коллекции можно только один раз. Переименовать коллекцию в дальнейшем не будет возможности.
  4. В выпадающем меню выберите предполагаемое использование для своей коллекции. Продуймайте, каким пользователям вы дадите доступ для чтения, добавления, изменения или удаления ваших данных. Для своей формы вам лучше всего выбрать Form Input, позволив всем пользователям добавлять содержание, но при этом сохранив за собой в качестве Админа право изменения данных.
  5. Нажмите Создать коллекцию (Create Collection). Откроется Панель управления данными. Это таблица, которая позволит вам добавлять содержание в свою коллекцию базы данных.

3. Настройте свою коллекцию базы данных

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

Чтобы настроить коллекцию:

  1. В управлении данными справа в строке хедера нажмите на иконку +, чтобы добавить новое поле в свою коллекцию.
  2. Настроить поле, чтобы оно соответствовало информации, которую вы хотите получить от своих пользователей. Убедитесь, что вы выбрали правильный тип данных в соответствии с содержанием своего поля. 
  3. Настройте поле для каждого элемента своей формы.

4. Настройте дизайн своей формы

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

Чтобы начать:

  1. Откройте меню Добавить и выберите Ввод данных.
  2. Перетащите элементы из Ввод данных на свою страницу. Вы можете выбрать элементы Ввод, Текстовое поле, Переключатели и Выпадающий список.

5. Настройте свои элементы

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

Чтобы настроить свои элементы:

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

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

6. Добавьте и настройте Источник данных (Dataset)

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

Чтобы добавить Источник данных на страницу:

  1. Нажмите на Добавить в панели инструментов в редакторе. Нажмите Database и затем Источник данных. Источник данных будет добавлен на вашу страницу.
  2. Нажмите на иконку Источника данных и нажмите Manage Dataset. 
  3. Под Connect a Collection выберите свою коллекцию.
  4. В разделе Mode выберите Write-only.
  5. Закройте панель.

7. Подключите элементы свой формы

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

Чтобы подключить элементы к Источнику данных:

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

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

8. Создайть кнопку Отправить

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

Чтобы создать кнопку Отправить:

  1. Добавитьте кнопку на свой сайт и измените текст кнопки на Отправить.
  2. Нажмите на иконку Подключить к данным . 
  3. В новом окне в поле Connect Button выберите свой источник данных.
  4. В Link connects to выберите Submit.
  5. По желанию, создайте сообщение загрузки.
  6. В When successful, navigate to, по умолчанию установлено Stay on this page (Остаться на этой странице). Вы также можете выбрать A link... (Ссылка) для направления посетителей на другую страницу сайта после заполнения формы. 

Когда пользователи будут заполнять форму, данные будут проверены перед сохранением.

9. Протестируйте свою форму

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

Чтобы проверить форму:

  1. Нажмите Предпросмотр.
  2. Введите значения в поля формы и нажмите Отправить.
  3. Вернитесь в редактор.
  4. Выберите свою коллекцию в боковом меню Site Structure. Вы увидите, что ваша форма будет представлена в качестве поля в коллекции.

10. Опубликуйте свой сайт

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

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

В редакторе нажмите Опубликовать для публикации сайта.

11. Просмотрите данные в реальном времени

Когда вы публикуете свой сайт, ваша форма будет доступна посетителям вашего сайта. Когда пользователь отправляет форму на опубликованном сайте, данные формы будут сохранены в вашей Live Database.

Для просмотра информации, отправленной пользователем:

  1. Откройте управление своим сайтом в своем аккаунте Wix. Выберите База данных Wix среди Мои приложения.
  2. Выберите Коллекция, чтобы просмотреть данные.

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