Задать вопрос
  • Как работает ф-ция url в laravel?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    url() https://laravel.com/docs/10.x/helpers#method-url
    Функция url генерирует полный URL для указанного пути:

    $url = url('user/profile');
     
    $url = url('user/profile', [1]);

    Если путь не указан, возвращается экземпляр Illuminate\Routing\UrlGenerator:

    $current = url()->current();
     
    $full = url()->full();
     
    $previous = url()->previous();
    Ответ написан
    Комментировать
  • Как правильно подружить Vue и php?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    а vue выступает сугубо в роли небольших компонентов на разных страницах

    Исходя из этого я могу предположить, что подобные виджетики скорее всего не нуждаются в серверном рендере, а значит все довольно просто.
    Настраиваем любой сборщик (webpack, vite). На входе будет какой-нибудь main.js, на выходе готовый файл (по умолчанию), пара файлов (main и vendor, если настроили разделение) или больше, в зависимости от хитрожопости настроек. Вот эти файлы и подключаем (соблюдая порядок, если их несколько, например vendor перед main)

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

    import Vue from 'vue';
    import Calculator from './calc/Calculator.vue';


    На странице, где нужно вставить компонент пишем нечто вроде

    <div class="calc"></div>

    Сюда будет рендериться компонент в рантайме. Например так (в том же main.js)

    document.querySelectorAll('.calc').forEach(el => {
        new Vue({
            el    : el,
            render: h => h(Calculator, {
                props: {
                   /// Пропсы, если надо
                },
            }),
        });
    });


    То есть каждый виджет в этом случае будет независимым vue приложением.

    Если нужно передавать в компоненты какие-то данные, то можно научить компонент самому их запрашивать. Но тут придется отдельные роуты создавать. Или прямо на страницу в head выплевывать их в виде json

    <script>window.calcData = <?= json_encode($calcData) ?>;</script>


    а в компоненте по mounted их доставать

    mounted() {
      const d = window.calcData;
    }
    Ответ написан
    1 комментарий
  • Как сделать overflow hidden для body по нажатию?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    // Добавить
    document.body.style.overflow = 'hidden';
    
    // Убрать
    document.body.style.overflow = '';
    Ответ написан
    1 комментарий
  • Как изменить дочерний класс через другой дочерний класс?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    ну если именно на CSS, то так

    .blog-category:has(> .current-cat) > .cat-item-all {
      background:red;
    }


    Однако пока еще не работает в FireFox
    Ответ написан
    1 комментарий
  • Как установить промежуток времени?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    isAfter возвращает булево значение. Да/Нет.
    const time1 = moment(now, 'HH:mm').isAfter('08:00'); // текущее время больше 8
    const time2 = moment(now, 'HH:mm').isBefore('14:00');// текущее время меньше 14
    if (time1 && time2) { // Если оба условия совпали, то магаз открыт
       console.log(now);
    }
    Ответ написан
  • Как заменить два параметра через replace?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Комментировать
  • Как Laravel «понимает» аутентифицирован пользователь или нет?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    В самой сессии хранится идентификатор залогиненного пользователя.

    643d31c6beb10205163174.png

    Для гостей этот идентификатор отсутствует
    Ответ написан
    1 комментарий
  • Как исправить большой отступ между значениями на графике?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Вероятно вам нужны мульти-оси с разными скейлами для каждой оси.
    https://www.chartjs.org/docs/latest/samples/line/m...
    Ответ написан
    Комментировать
  • Laravel Relationships, как получить запись связывания?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    Если хотите меньше писать, то называйте таблицы правильно.
    Связующие таблицы состоят из названий связываемых таблиц в единственном числе в алфавитном порядке.

    У вас она должна называться category_post и содержать минимум два столбика unsignedBigInteger
    post_id | category_id

    Модели должны быть названы в единственном числе Category и Post

    Отношения тоже следует называть соответственно. Тут интуитивно просто: если связь ко многим – множественное число (для отношений hasMany, belongsToMany), иначе единственное (для отношений hasOne, belongsTo).

    Методы всегда называются в camelCase. Первая буква маленькая.

    Только тогда у вас будет работать вся магия ларавел по умолчанию, без дополнительных описаний. Например, не нужно будет указывать таблицу в модели (protected $table = 'categories';)

    -------

    Например, Пользователь и Пост. У каждого пользователя может быть множество постов, но каждый пост принадлежит единственному пользователю. Тогда мы можем описать эту связь так (связь будет один-ко-многим)

    class User {
      public function posts(): HasMany {
        return $this->hasMany(Post::class); // юзер->имеетМного(Постов)
      }
    }
    class Post {
      public function user(): BelongsTo {
        return $this->belongsTo(User::class); // пост->относитсяК(Юзеру)
      }
    }
    
    // Получение данных
    
    foreach ($user->posts as $post) {
       // Все посты пользователя
    }
    
    $post->user->name; // Имя пользователя, которому принадлежит этот пост.
    
    // Добавление постов
    
    $user->posts()->create([ 
      'title' => 'Title of post',
      'content' => 'Long content',
      // id юзера в такой записи указывать не нужно, он будет проставлен автоматически.
    ]);


    ---------

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

    class Post extends Model
    {
        public function categories(): BelongsToMany
        {
          return $this->belongsToMany(Category::class); // пост->относитсяКоМногим(Категориям)
        }
    }
    
    class Category extends Model
    {
        public function posts(): BelongsToMany
        {
          return $this->belongsToMany(Post::class); // категория->относитсяКоМногим(Постам)
        }
    }


    Это всё, что нужно для связи.

    Получить все посты из категории

    foreach ($category->posts as $post) {
    
    }


    C сортировкой

    $posts = $category->posts()->orderBy('created_at')->get();


    Для создания есть те же методы create(), save().
    Кроме того, есть возможность присоединить уже существующую модель.

    $post = Post::create([...]); // Создали пост, он никому не принадлежит
    $category->attach($post->id); // Теперь он связан с категорией


    Есть метод sync() для синхронизации пачки моделей.

    Всё это очень подробно написано в официальной документации.
    Я по сути просто сделал небольшую выжимку оттуда.
    https://laravel.com/docs/10.x/eloquent-relationships
    Ответ написан
    1 комментарий
  • Поиск точного вхождения?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Ответ написан
    Комментировать
  • Как сделать таймер без глобальных переменных?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Модуль Counter.js
    export default class {
        #enabled = false;
        #timer = null;
    
        #elHours;
        #elMinutes;
        #elSeconds;
    
        #hours = 0;
        #minutes = 0;
        #seconds = 0;
        
        constructor(el) {
            this.#elHours = el.querySelector('.hours');
            this.#elMinutes = el.querySelector('.minutes');
            this.#elSeconds = el.querySelector('.seconds');
            document.addEventListener('keydown', this.startBySpace.bind(this));
        }
        
        startBySpace() {
            if (e.code === 'Space') {
                if (this.#enabled) {
                    this.#enabled = false;
                    clearInterval(this.#timer);
                } else {
                    this.#enabled = true
                    this.#timer = setInterval(() => this.tick(), 1000);
                }
            }
        }
        
        tick() {
            this.#seconds++;
            if (this.#seconds === 60) {
                this.#seconds = 0;
                this.#minutes++;
                if (this.#minutes === 60) {
                    this.#minutes = 0;
                    this.#hours++;
                }
            }
            this.render();
        }
        
        render() {
            elSeconds.innerHTML = this.zero(this.#seconds);
            elMinutes.innerHTML = this.zero(this.#minutes);
            elHours.innerHTML = this.zero(this.#hours);
        }
        
        zero(number) {
            return number < 10 ? `0${number}` : `${number}`;
        }
    }


    Использование, например в файле main.js

    import Counter from './Counter.js';
    
    document.querySelectorAll('.clocks').forEach(clock => {
        new Counter(clock);
    });
    Ответ написан
  • Как поправить функцию, чтобы она работала после обработки Webpack?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Она не перестает работать. Функция исчезает из глобального пространcтва имен и становится недоступной.
    Можно ее принудительно засунуть в объект window
    window.tabsChanger = function(evt, a) {
        // ...
    }


    <div onclick="tabsChanger">
    </div>


    Но, возможно лучшим вариантом будет навешивать обработчик с помощью addEventListener

    document.querySelector(...)?.addEventListener('change', function(evt){
    
    })
    Ответ написан
    Комментировать
  • Почему не работает :hover?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    643801970bffe545468400.png

    Подсветка намекает на некорректное значение цвета.

    Очевидно перепутали букву l с цифрой 1
    Ответ написан
    1 комментарий
  • Как получить в php данные отправленные через fetch?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    это такой же "POST" как если использовать форму для отправки данных?

    Разумеется. Какой он еще может быть? =)
    Не имеет значения, как именно был инициирован запрос – отправкой формы или скриптом.
    Ответ написан
    Комментировать
  • Можно ли получить элемент с другого сайта и вставить в текущий?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Как парсить сайты?
    Парсить можно чем угодно: js, php, python и т.д.
    Ответ написан
    6 комментариев
  • Как в bootstrap по копке отключать и включать поле для ввода данных?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    так же как и без бутстрапа.

    button.addEventListener('click', ()=>{
      input.disabled = !input.disabled;
    });
    Ответ написан
    Комментировать
  • Разница между JavaScript и HTML5 игрой?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    На html игры не пишут. Их всегда пишут на javascript
    Просто так называют игры, которые для отображения используют холст (canvas)
    Такое название сложилось исторически, с тех времен, когда игры в основном писались на флеше. Вот чтобы их как-то обособить игры на js стали называть играми на html5 в противовес флешу.
    Ответ написан
    Комментировать
  • Чем можно проверить сайт вместо W3C?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Этот валидатор полностью соответствует спецификации HTML
    Если он говорит об ошибке, значит ошибка есть. В данном случае в стандарте не прописаны такие значения для данных атрибутов. И это нормально.

    UPD

    Что-то я поспешил с выводом.

    Вполне себе валидные теги.

    642ada67bcf77209536503.png
    Ответ написан
  • Как сделать чтобы при наведении на кнопку она меняла цвет другой кнопки?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    Сергей Молвов, с has все довольно просто

    .vskrytiye__ot:has(.vskrytiye__btn:not(.blue):hover) .vskrytiye__btn.blue {
      /* Стили для второй кнопки при наведении на первую */
    }
    .vskrytiye__ot:has(.vskrytiye__btn.blue:hover) .vskrytiye__btn:not(.blue) {
      /* Стили для первой кнопки при наведении на вторую */
    }


    Заморочки с :not из-за того, что наличие класса .blue - единственное различие между кнопками

    Однако можно привязаться к последовательности кнопок в html

    .vskrytiye__ot:has(.vskrytiye__ot__b:first-child .vskrytiye__btn:hover) .vskrytiye__ot__b:last-child .vskrytiye__btn {
      /* Стили для последней кнопки при наведении на первую */
    }
    .vskrytiye__ot:has(.vskrytiye__ot__b:last-child .vskrytiye__btn:hover) .vskrytiye__ot__b:first-child .vskrytiye__btn {
      /* Стили для первой кнопки при наведении на последнюю */
    }


    Но так длиннее получается.

    Лучше всего будет дать кнопкам разные классы

    .vskrytiye__ot:has(.first-btn:hover) .second-btn {
      /* Стили для второй кнопки при наведении на первую */
    }
    .vskrytiye__ot:has(.second-btn:hover) .first-btn {
      /* Стили для первой кнопки при наведении на вторую */
    }


    Но это не будет работать на данный момент в FireFox!
    Ответ написан
    5 комментариев