Яндекс.Практикум

Сайт-визитка на Laravel

Есть старая мудрость: «Хочешь научиться сам — попробуй научить другого». Глубинный смысл заключается в том, что когда пытаешься кому-то что-то рассказать, приходится самому разобраться что называется «до донышка»....
Сайт-визитка на Laravel

Есть старая мудрость: «Хочешь научиться сам — попробуй научить другого». Глубинный смысл заключается в том, что когда пытаешься кому-то что-то рассказать, приходится самому разобраться что называется «до донышка».

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

Цикл разработки сайта на Laravel

Сайт-визитка на Laravel
Схема разработки сайта на Laravel

Приложение на Laravel имеет несколько этапов:

  1. Установка laravel
  2. Настройка окружения, доступа к базе
  3. Настройка ключевых точек или URL (роутинг)
  4. Создание структур базы данных (модели)
  5. Заполнение базы данных
  6. Создание шаблонов (вьюхи)
  7. Соединение шаблонов с роутами через контроллеры
  8. Добавление валидации, форм
  9. Выкатка в продакшен с полировкой всего и вся

Причем с пункта 3 по 8 может повторяться множество раз для каждого нового раздела сайта.

Для примера можно  разбить сайт по контроллерам и моделям: новости, статические страницы, каталог, галереи…  Каждый такой раздел разрабатывается отдельно.

Постановка задачи

Цель: написать простейшую визитку за 4-5 страниц как начальный проект. Затем можно будет дописывать и улучшать. «Гуру», заглянувшие на огонек, прошу строго не судить. Если есть что полезного сказать – милости прошу в комментарии или в личку.

Шаблон: простой шаблон из пабилка на bootstrap 3. Текст будет либо сгенерированный, либо абстрактный. Не хочу делать сайт-призрак, да еще и с ворованным контентом – вдруг реальному какому сайту наврежу.

Функционал. Пока будет простой текст, взятый из шаблонов на диске, что-то возможно сделаю в базе. Будет контактная форма для отсылки сообщений на e-mail и пока на этом всё.

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

Забыл добавить архив с шаблоном. templategarden-nova.

Этап 1. Установка фреймворка

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

К сожалению Дмитрий Афанасьев удалил свои уроки по 4 ветке, но установка 4 и 5 ветки практически не отличается. Поэтому вот его новое видео.

Дополнение от 1.04.2015. Я перепутал с каналом knowcity(Павел Наумов), где были выложены очень интересные уроки по Laravel. Если первые 9 уроков я скачал себе на жесткий диск, то его серию уроков по созданию социальной сети я скачать не успел. Долгое время уроки висели в плейлисте, но не работали. А сейчас и плейлиста нет.

К счастью, в поиске по точному названию я нашел канал, где есть все эти уроки: Benetta Kary. Почему-то просто по запросу «laravel» эти каналы и уроки не показываются.

Учтите, что в руководстве приводится ключ к composer —prefer-dist. Если вы его укажете, то получите 5 версию Laravel. Поэтому нужно указывать так: 4.* и вы получите последнюю версию 4.2.

Еще один тонкий момент в настройке корневой папки проекта. В XAMPP нужно настроить на папку public в файле xampp\apache\conf\extra\httpd-vhosts.conf .

В OpenServer можно задать в настройках сервера так, что папки public, public_html и другие будут автоматом корнем сайта. Можно руками указать для вашего нового сайта папку, которая будет считаться корнем. Второй вариант предпочтительнее, поскольку другие движки могут использовать просто папку public (например, wolf cms) и из-за этого будут проблемы с установками и работой этих движков.

Этап 2. Настройка приложения

В Laravel есть возможность задать несколько настроек для разных окружений: production  и local. Теоретически, в папке local хранятся настройки для локальной машины, а остальные принимаются во внимание по умолчанию и т.д. Фактически, нужно указать, что вы работаете на локальной машине.

Для этого для Windows идете в свойства системы и смотрите как называется ваша машина. Затем в файле \you-site.dev\bootstrap\start.php меняете на свое значение:

$env = $app->detectEnvironment(array(

'local' => array('work-pc'),

));

Теперь нужно настроить доступ к базе данных. Для доступа к базе данных нужно поправить конфиг в папке \ you-site.dev \app\config\local\database.php. Ничего сложно там нет, все и так понятно.

В принципе, этого достаточно для начала разработки.

Но для комфортной работы нам понадобится настроить IDE, которой пользуетесь. Тут уже на ваше усмотрение: можно использовать NetBeans, можно использовать PhpStorm. В NetBeans очень удобно работать, бесплатен, но нет подсветки  шаблонизатора blade, нет мультикурсора, не так удобен плагин Emmet для верстки, есть другие косяки. Но она на рабочей машине работает быстрее, чем phpStorm. В phpStorm есть куча разных плюшек, есть программа EAP, где на тестирование можно взять бесплатно эту IDE, но ресурсов жрет она больше почему-то, более наворочена. А вот добиться нормальной темы так и не получилось на рабочей машине. Странно, но дома на другом мониторе нормально тема отображается.
Вот видео настройки phpStorm для разработки приложений именно на Laravel.

Лично мне AptanaStudio 3, CodeLobster, phpDesign по душе не пришлись, поэтому я не буду советовать использовать их.

Так же хочу сказать, что использовать Notepad++, SublimeText для программирования на php не очень удачное решение. Они быстры, но с IDE и близко не стояли. Хотя я привык к SublimeText, я его использую только что-то быстро поправить или работать с шаблонами blade.

Дополнительные пакеты Laravel

Поскольку Laravel построен с учетом новейших технологий пакетов, для расширения его возможностей в него можно встроить дополнительные пакеты. Я пока приведу самый нужный пакет для автодополнения в IDE.

IDE helper

Основной косяк в Laravel заключается в том, что используется очень много анонимных функций-замыканий. Из-за этого не поддерживается автодополнение в IDE. Для этого есть готовый пакет ide helper, который просматривает всё приложение и генерируете специальный файл-хелпер для IDE с описанием переменных, функций, классов. Очень удобно, рекомендую.

Ставится он просто с помощью composer.

  1. В консоли вводим: composer require barryvdh/laravel-ide-helper 1.11 и ждем когда пакет проинсталлируется.
  2. В конфиг app/config/app.php добавляем в массив провайдеров:'Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider',
  3. В файл composer.json добавляем для автоматической генерации этого файла при всех изменений в пакетах:
    "scripts": {
    "post-update-cmd": [
    "php artisan clear-compiled",
    "php artisan ide-helper:generate",
    "php artisan optimize"
    ],
    },
  4. Теперь сгенерирум: php artisan ide-helper:generate

В корне появится файл _ide-helper.php, где будут все объявления. Теперь его обнаружит IDE и будет предлагать автокомплит к вашему коду.

Заключение

Статья что-то получается большой и читать её становится сложновато. Поэтому я пока остановлюсь, а в следующей статье разберу следующие этапы создания простого сайта-визитки на Laravel версии 4.

Понравилась статья? Поделиться с друзьями:
IPCalc Blog
Комментарии: 5
  1. Alex

    так может сразу на laravel 5 делать ?
    как бы актуальнее будет.

    1. admin (автор)

      Вот статья https://habrahabr.ru/post/254277/ . Это о 5 версии. А вот адекватный комментарий после статьи https://habrahabr.ru/post/254277/#comment_8351357 И я с Евгением Борисовым согласен полностью!

      1. Alex

        ок. понятно.

        у вас, кстати, переход по ссылкам из вашего комментария не работает
        https://take.ms/NnIgL

      2. admin (автор)

        Спасибо, исправил. Проблема была в конфликте плагина HyperCache и Wp-NoExternalLinks. Заменил плагин на Wp SuperCache и вроде все заработало ?

  2. admin (автор)

    Действительно, я ошибся и перепутал с каналом knowcity. Дополнил статью.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: