Как сделать пошаговую форму регистрации в Yii2?

Question

[illy_Chuchelo]

Как реализовать пошаговую форму регистрации пользователя. Пользователь может покинуть регистрацию на любом шаге (закрыть вкладку в браузере), но затем, вернувшись, данные, введённые им ранее, будут сохранены.
Пока я сделал так чтобы, пользователю по очереди показывались поля формы, по нажатию "регистрация" данные записываются в бд.
Но пока что я совсем не понимаю как сделать так чтобы, при перезагрузки страницы форма и шаг были на месте
Скрипт для отображения формы я взял тут https://jsfiddle.net/aradul/2ce92efj/
По возможности, ответьте очень подробно пожалуйста..

Comments

[Дмитрий]

Добрый вечер.
Скрипт не имеет никакого отношения к yii.
Дополните свой вопрос кодом, как Вы вписали всё это в yii.

[Дмитрий]

Используйте cookie для сохранения шагов регистрации.
Метод register() сомнителен.
Вместо return $user->create(); будет уместней return $user->save(false);

[illy_Chuchelo]

Дмитрий, по поводу return $user->save(false);, я использую его в модели User. Такая цепочка для чистоты.
А по поводу Cookie я понимаю что нужно использовать их или сессии, но я не могу понять как конкретно и где ими пользоваться. На разных форумах и документации я не смог найти нужной инфы, поэтому решил спросить на прямую..

[Дмитрий]

я использую его в модели User. Такая цепочка для чистоты.

illy_Chuchelo, не вижу смысла.
Вот мой вопрос, подобный Вашему.
Три отдельных действия в контролере делать не обязательно, можно передавать какой-либо "флаг" и по нему определять какой сейчас шаг.
При переходе между "шагами" формы отправляйте ajax, cookies ставьте и читайте при помощи yii. Если будете ставить при помощи js или ещё как-то - возможны проблемы.

Answer 1

[vitaly_74]

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

Answer 2

[illy_Chuchelo]

Вообщем Я нашел очень хороший скрипт на JS, который сразу записывает данные с полей в куки.
Вот статья автора
И сам скрипт

(function ntSaveForms() {
 var text, cl;
 $(".ntSaveForms").each(function(i) {
 cl = "ntSaveForms"+i;
 $(this).addClass(cl); // add new class
 text = $.Storage.get(cl);
 if (text && text.length > 0 && !$(this).val()) {
 $(this).val(text); // set field data
 }
 });

$(".ntSaveForms").keyup(function() {
 $.Storage.set($(this).attr("class").split(" ")[$(this).attr("class").split(" ").length -1], $(this).val()); // save field data
 });

$(".ntSaveFormsSubmit").click(function() {
 $(".ntSaveForms").each(function(i) {
 $.Storage.remove("ntSaveForms"+i); // remove data
 });
 });
})();

Answer 3

[Артур]

После регистрации любых данных в бд, записать пользователю в куки его user ID. При последуюем входе, если с таким юзер айди есть в базе данные, вытащить их и заполнить.

Comments

[illy_Chuchelo]

Суть в том что мне нужно просто сделать пошаговую форму. Где пользователь, например ввел 2 поля из 4, закрыл окно, вернулся а эти поля в форме все еще заполнены.

[Артур]

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

Answer 4

[Сергей Сунцев]

Я вижу 2 способа
1) на Yii2

class User extends ActiveRecord
{
    const SCENARIO_STEP1 = 'step1';
    const SCENARIO_STEP2 = 'step2';
    ...

    public function scenarios()
    {
        return [
            self::SCENARIO_STEP1 => ['attr1', 'attr2'],
            self::SCENARIO_STEP2 => ['attr3', 'attr4', 'attr5'],
        ];
    }
    ...

отправляем в контроллер в зависимости от текущего шага нужную форму

public function actionStep1()
{
    $model = new OrderWizard();
    $model->setScenario(OrderWizard::SCENARIO_STEP1);

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['step-2', 'id' => $model->id]);
    } else {
        return $this->render('step-1', [
            'model' => $model,
        ]);
    }
}

2) На Js

• Отправляем сразу всю форму
  
• Создаем состояния (шаг1, шаг2 и т.д.)
  
• Показываем те элементы формы, которые удовлетворяют текущему состоянию.
  

Comments

[illy_Chuchelo]

Так этот вариант просто записывает кусок формы. Задача состоит в том чтобы пользователь, например, ввел 2 поля из 4, закрыл окно, вернулся а эти поля в форме все еще заполнены и на том же шаге..

[Сергей Сунцев]

illy_Chuchelo, Но мы же можем сохранять текущее состояние формы локально в куках или localstorage пользователя.

[illy_Chuchelo]

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

$(function(){
	/* Inits */
	initProgramSelection();
  
  /* Functions */
  function initProgramSelection(){
  	var $program_selection = $('div.program-selection');
    
    $('ul.nav-tabs a', $program_selection).on('click', function() {
      return false;
    });

    $('input.program-selection__button', $program_selection).on('click', function(e) {
    	e.preventDefault();
      
      var id = $(this).data('href');
      /* Далее нужно добавить проверку валидности заполненных полей перед переходом на следующий шаг */
      $('a[href="' + id + '"]', $program_selection).tab('show');
    });
  }

});