Заметки web-разработчика: сентября 2017

Итак, в последнем видео, у нас было введение о некоторых ключевых компонентах в Laravel — включая маршрутизацию, которая находится в каталоге app/http. Мы также создали некоторые маршруты и затем узнали о том, как они отправляются к нашим методам контроллеров, которые, в свою очередь, загружают виды (views).

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

Дальше »

суббота, 16 сентября 2017 г.

Соцсеть. Внесение пользователя в БД. Урок 2.

Регистрация аккаунтов.

Создадим в корне файлы index.php, login.php, create-account.php

Дальше »

Соцсеть. Создание БД. Урок 1.

Создадим базу данных. Назовем ее SocialNetwork.

Дальше »

Переводы Laracasts. Введение в маршрутизацию, контроллеры и представления

(0:00)

Итак, вы долго ждали, и я думаю пришло время увидеть код Laravel. Я загружу сервер, и мы сделаем несколько изменений, чтобы вы поняли основной процесс – как загрузить «представление» и вывести результат в окно браузера.

Если вы хотите использовать локальный сервер, то можете сделать так:

php -S localhost:8888 -t public

И не забудьте установить корень документов (document root) на директорию /public. Если вы это сделаете и переключитесь в Chrome – увидите Laravel.

(0:30)

Или, если вы прошли второй урок и научились работе с Homestead, то как в таком случае будет выглядеть результат? Давайте быстренько посмотрим. Я переключусь обратно в окно терминала и с помощью ssh войду в нашу VM:

homestead ssh

И вы увидите что Laravel Homestead включает в себя команду serve. Заметьте что мы даём ей имя домена и путь, по которому должен находиться корень документов. Давайте попробуем. Мы пишем: serve,... как насчёт доменного имени laravel5.dev?

(1:00)

Наш путь будет внутри директории /home/Vagrant/Code, имя папки /learning-laravel-5, а корневой путь в /public. Итак:

serve laravel5.dev /home/Vagrant/Code/learning-laravel-5/public

Запустим эту команду. Это настроит nginx. Также, не забудьте, у нас собственный локальный домен, так что нужно поправить наш файл hosts.

В новой закладке терминала выполним:

sudo vi /etc/hosts

Внутренне наш IP останется тем же, но домен будет laravel5.dev. И готово. Посмотрим, сработает ли.

(1:30)

Если я переключусь в Chrome и открою laravel5.dev – всё работает через Homestead. Так что сами решайте, работать через встроенный сервер PHP или через VM c Homestead. Если вы поопытнее, я бы рекомендовал Homestead (там больше гибкости). Но если вы только пробуете построить свой первый сайт и изучаете первый фреймворк – это нормально, если вы пока остановитесь на простом сервере PHP. Итак, давайте перейдем к исходному коду.

(2:00)

Теперь, не знаю как вы, но я всегда когда вижу новый фреймворк, то структура папок сразу кажется мне ошеломительной. Все эти термины, о которых я ничего не знаю. Что это за Console? Или Commands? Events? Handlers, Providers, и Services? Слишком много всего! Так ведь? Это нормально. Вы освоите их шаг за шагом. Я обещаю вам, что они не настолько сложны, как может сначала показаться. Но для начала, давайте будем придерживаться основ.

(2:30)

Как мы получили эту статичную страницу приветствия («Welcome page»)?

Что же, всегда когда вы впервые открываете приложение на Laravel, вам нужно перейти в файл routes. И вы найдете его в /app/Http (считайте что эта папка инкапсулирует всю логику приложения по работе с HTTP). Здесь находятся маршруты. Итак, если посмотрим, там уже есть несколько предустановленных. Но сейчас нам интересен лишь этот:

Route::get('/', 'WelcomeController@index');

(3:00)

Итак, возможно вы пришли из старого (legacy) PHP-приложения, где структура папок определяет, как выглядит URL. Например, если вы хотели создать страницу по адресу блога, то вы бы создали папку /blog и в ней index.php.

Затем при переходе на example.com/blog вы бы увидели результат. Так? Ну как вы возможно догадались – это достаточно негибкий способ. Вместо этого мы специально объявим каждый маршрут в нашем приложении. И к счастью, Laravel делает это так просто как это только возможно.

(3:30)

Давайте вместе прочитаем что тут написано. У нас есть новый маршрут, и когда пользователь исполняет GET-запрос (GET-запрос – это просто тип запроса, самый лёгкий для понимания)... Просто думайте о GET как «когда я посещаю эту страницу»… Хм, какую страницу? Корневую (/ или root) страницу — то есть домашнюю страницу вашего сайта. Что нужно сделать дальше? Я хочу загрузить конкретный метод, и это должен быть метод от нашего контроллера.

(4:00)

Итак, мы говорим: «ищи WelcomeController, и вызови на нём метод с названием index()». Давайте посмотрим где его искать. Вот директория Controllers, вот WelcomeController.php, и если я прокручу текст ниже – вот этот метод index(). Он отвечает за обработку вызова к домашней странице. Давайте попробуем нечто простое:

return 'hello world!';

(4:30)

Отлично. Идём обратно, обновим, и вуаля! Легко и просто. Сделаем ещё один? Если я перейду в файл routes.php… вы будете часто видеть как я это делаю (вместо перехода к боковой панели и поиску файла). Так что лучше выберите себе хороший редактор, позволяющий очень быстро набирать имя и переходить к нужному файлу.

Хорошо. Как насчет обязательной страницы контактов? Давайте напишем её вместе. Повторяйте мои действия!

(5:00)

У нас новый маршрут, и когда мы получаем GET-request к странице contact (которую нужно писать так: /contact, но слэш можно опустить). Затем куда мы хотим пойти? В какой метод нам стоит направить запрос? Давайте пока будем придерживаться WelcomeController, хотя в действительности, я бы создал отдельный контроллер, возможно какой-то общий PagesController для статичных страниц на моём сайте. В любом случае, пока придержимся этого варианта, и вызовем метод contact():

Route::get('contact', 'WelcomeController@contact');

(5:30)

Хорошо, мы настроили новый маршрут. Перейдем обратно в WelcomeController.php. Я добавлю тут новый метод:


public function contact()

{

  return 'Contact me';

}

(Пока что просто жёстко пропишем здесь «Contact me»). Так, посмотрим, работает или нет. Открываем:

laravel5.dev/contact

и вот она. Ваша самая первая страница! Поздравляю!

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

(6:00)

В данных двух примерах мы всего лишь возвращаем строки. За кулисами Laravel распознает и выберет подходящий ответ. В реальной жизни мы не возвращаем строки. Возможно код вернет что-то типа JSON, если вы строите API, но для типичного веб-приложения, вы скорее всего загрузите HTML-код. Это и есть «вид» (view — представление, шаблон). В Laravel думайте о виде, как о неком подставном шаблоне. Он очень простой – лишь дайте ему данные и он отобразит их для пользователя.

(6:30)

Все ваши виды будут храниться в директории /resources/views. Заметьте, это будет базовая директория. Нам не нужно писать полностью resources/views/welcome. Также не нужно беспокоиться и о расширении (типа welcome.blade.php). В этом нет необходимости. Просто пишите welcome. А может файл внутри поддиректории, как это довольно часто бывает — ведь у вас будет куча видов и вам стоит правильно их организовать.

(7:00)

Если у вас к примеру форум, то сделайте /views/forum/[name-of-the-view]. В таких случаях можно обращаться к нему как forum/name. Или если хотите, можно сделать это более объектно-ориентированным на вид используя точку вместо слэша: forum.name

(7:30)

Laravel будет искать его в директории resources/views/forum, и затем в файле name.php или name.blade.php. Но, в нашем случае, мы используем просто welcome:

return view('welcome');

Теперь заменим вот на это:

return view('pages.contact');

(Возможно я хочу папку /pages, и вид с названием contact). Хорошо, давайте создадим его. Вот здесь. Новый файл. Внутри pages/contact.blade.php.

Насчёт Blade – возможно вам незнаком этот термин. Это шаблонизатор Laravel. Вы полюбите его. Но мы разберемся с ним чуть позже.

(8:00)

ОК, для начала я просто вставлю здесь большой блок HTML-кода. Позднее я покажу вам как подчистить здесь всё, используя штуки типа мастер-страниц. Итак, я всего лишь напишу:

<h1>Contact Me!</h1>

Хорошо. Это всё что нам было нужно. Давайте еще раз посмотрим на рабочий процесс, и затем посмотрим на это в браузере. Мы определили наш маршрут так, что при GET-запросе к example.com/contact мы направляем его к контроллеру, который как бы жонглирует всем миром приложения.

(8:30)

Он получает запрос (типа «Я хочу увидеть страницу contact») и возвращает ответ: «Вот твоя страница». Так или иначе, в том классе мы ссылаемся на метод contact(). Теперь, если мы переключимся туда, в наш метод contact(), то мы только лишь загрузим вид pages/contact. И конечно же, вид – это просто базовый HTML для примера. Хорошо, посмотрим на это в браузере. Переключусь обратно и обновлю. И вот оно – мы загрузили наш вид.

(9:00)

Отлично! Итак, это было ваше первое введение, очень лёгкое введение в основы маршрутизации. Вы ознакомились с тем как выглядит контроллер, и как мы загружаем вид. Как вы можете представить, в будущих уроках мы разберёмся с этим намного глубже. Надеюсь, вам интересно!

Laravel. Блог. Likes, dislikes на Vue. Не закончено!

Сайт: https://vuejs.org/v2/guide/installation.html

CDN: https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js

Дальше »

пятница, 15 сентября 2017 г.

Как установить NPN на Open Sever

Внимание! Получается в последствии работать через командную строку Windows. Мы заходим в папку с проектом и пишем команду npm install. После окончания инсталяции нам нужно собрать проект. Мы пишем команду npm run watch
А до этого инсталируем все на Open Server.

Дальше »