Алексей Уколов

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

ID uint `gorm:"primary_key"`

Settings -> Editor -> Code Style -> PHP -> Wrapping and Braces -> Braces Placement

Роуты Laravel и роуты Backbone - это совсем разные вещи их не надо между собой дружить.

Есть шаблон приложения и область контента, которая меняется без перезагрузки страницы.
Вот при переходе по роутам #profile/#list и т.д. нужно, чтобы Laravel собирал данные и передавал их в соответствующие модели.

Это не Laravel должен делать, а как раз Backbone. На Laravel вам нужно реализовать REST-апи (ну или какое захотите), с которым будет работать Backbone.

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

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    width: 170px;
    text-align: center;    
}
.child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: black;
    border-radius: 50%;
}

Посмотреть вживую.

Ну или стильный, модный, молодежный flexbox:

.parent {
    width: 170px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.child {
    width: 50px;
    height: 50px;
    background: black;
    border-radius: 50%;
}

Поиграться.

У вас по сути N систем из трех взаимосвязанных элементов.
Сами системы между собой никак не связаны, а вот элементы внутри системы между собой нужно как-то связать.
Самый простой вариант - использовать индексы (интерактивный пример):

var buttons = document.querySelectorAll('.js-btn-item'),
    popups = document.querySelectorAll('.js-products-popup'),
    closers = document.querySelectorAll('.js-btn-close'),
    index, button, popup, closer;

for (index = 0; index < buttons.length; index++) {
    button = buttons[index];
    popup = popups[index];
    closer = closers[index];

    button.addEventListener('click', buttonHandler(popup));
    closer.addEventListener('click', closerHandler(popup))
}

function buttonHandler(popup) {
    return function (event) {
        event.preventDefault();
        popup.classList.add('js-popup-show');
    }
}

function closerHandler(popup) {
    return function (event) {
        event.preventDefault();
        popup.classList.remove('js-popup-show');
    }
}

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

Для того, чтобы этот вариант работал, естественно, элементы каждого типа должны идти в строго одинаковом порядке.
Чтобы этого избежать, можно использовать родителя-обертку, внутри которого содержатся все 3 элемента системы (пример). Такой подход, помимо всего прочего, за счет делегирования позволяет устанавливать N обработчиков, а не N*2, как в первом случае. Но код обработчика слегка усложняется - добавляется проверка целевого элемента.

Третий способ показал Алексей Зуев - он более декларативный, как видите, javascript-кода там совсем немного - одна универсальная функция. Но этот вариант требует использования id вместо классов, это не всегда возможно.

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

$clothes_col->where('category_id', $category)->random()->toArray();

$category += 0;
Что за ужас? Вы уж либо типы приводите нормально, либо используйте whereLoose

$(e).one('click', function () {
  в следующий раз не вызывать эту функцию при клике на $(e)
})

Документация

Ведь прямо на той странице написано:

updateResult(".currentItem", this.owl.currentItem);

На ваш вопрос нет правильного ответа.

Логика определения того, нужно ли выносить общие стили в какой-то общий селектор проста:
если это действительно общие стили, то есть изменять их в будущем тоже нужно будет для всех селекторов разом, то лучше написать их так, как во втором варианте;
если это просто совпадение (например, какие-то одинаковые отступы у двух элементов), то лучше правила продублировать.

Есть и лучший вариант - использовать препроцессор, например, SCSS, тогда можно будет вынести общие правила в миксин или в переменные или просто наследовать селекторы.

Вот пара примеров соглашений о стиле:
www.phpied.com/css-coding-conventions
google-styleguide.googlecode.com/svn/trunk/htmlcss...
Вообще, по запросу "css styleguide" много всего находится, выбирайте соглашение по вкусу.

По поводу порядка объявления селекторов, рекомендую почитать ответы к этому вопросу.

Насколько я понял из вашего описания проблемы, дело в document.write - он просто перезаписывает все, что есть на странице (подробнее).
Вам нужно писать в innerHtml какого-то конкретного элемента - вот так:

var myNumber = 10;

function newFunc(number) {
    var el = document.getElementById('bar'),
        content = '';
    
    for (var i = 1; i <= number; i++) {
        content += 'Number: ' + i + '<br />';
    }
    
    el.innerHTML = content;
}

newFunc(myNumber);

А с массивами лучше работать так (вот почему):

var myNumber = 10;

function newFunc(number) {
    var newArray = [],
          str;

    for (var i = 0; i < number; i++) {
        str = 'Number: ' + (i + 1) + '<br />';
        newArray.push(str);
        console.log(str);
    }
}

newFunc(myNumber);

Это при условии, что вам действительно потом нужен этот массив, и вы не используете его как кривую замену обычному оператору for:

var myNumber = 10;

function newFunc(number) {
    for (var i = 1; i <= number; i++) {
        console.log('Number: ' + i + '<br />');
    }
}

newFunc(myNumber);

SELECT c.id_category as id, n.name as name, p.name as parent_name
FROM category as c
LEFT JOIN cat_info as n USING(id_category)
LEFT JOIN cat_info as p ON c.id_parent = p.id_category

Документация.

Pma не для php, а на php. Никто не мешает его использовать вне зависимости от того, на чем вы пишете.
Если не хочется разворачивать lamp/wamp для pma, можно использовать самостоятельные приложения - HeidiSQL (легкий инструмент, запускается под Wine) или Mysql Workbench (есть несколько уникальных или редких функций, но часто глючит и имеет ужасно кривой интерфейс).

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

var buttonItems = document.querySelectorAll('.button-item'),
    index, button;

for (index = 0; index < buttonItems.length; index++) {
    button = buttonItems[index];
    button.addEventListener('click', function (event) {
        console.log('click');
        event.preventDefault();
    });
}

Пример

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

Лучше делать так:

var buttons = document.querySelectorAll('.button-item'),
    index, button;

for (index = 0; index < buttons.length; index++) {
    button = buttons[index];
    button.addEventListener('click', clickHandler);
    button.addEventListener('dblclick', doubleClickHandler);
}

function clickHandler(event) {
    console.log('click', this.innerText);
    event.preventDefault();
}

function doubleClickHandler(event) {
    console.log('doubleclick', this.innerText);
    this.removeEventListener('click', clickHandler);    
    this.removeEventListener('dblclick', doubleClickHandler);
}