Как сделать “Избранное” средствами Laravel и Vue.js

Разработка: Как сделать Избранное средствами Laravel и Vue.js

В наше время большинство сайтов используют функционал избранного/лайков/рекомендаций. В том числе такие крупные ресурсы, как Medium, Facebook, Вконтакте и т.д.

Мы рассмотрим как реализовать такой функционал с Vue.js в приложении Laravel. Это приложение будет типа персонального блога, в нём будут пользователи и статьи. Пользователи смогут создавать статьи и добавлять их в избранное. А также пользователи смогут видеть полный список избранных статей.

В приложении будут модель User (Пользователь) и модель Post (Статья), в нём будет система авторизации, которая позволит добавлять статьи в Избранное (и удалять из него) только авторизованным пользователям. Мы сделаем динамическую пометку в избранное средствами VueJs и Axios, т.е. без перезагрузки страницы.

Перед началом работы посмотрите как это будет выглядеть:

Разработка: Как сделать Избранное средствами Laravel и Vue.js

Итак, приступим.

Мы начнём с создания нового проекта Laravel:

laravel new laravel-vue-favorite
В результате будет создан проект с именем “laravel-vue-favorite”

С Laravel идут дополнительные библиотеки, такие как Bootstrap, VueJs и Axios, однако нужно их установить с помощью npm:

npm install
Также эта команда установит Laravel Mix, с помощью которого мы будем компилировать и собирать наши CSS и JavaScript.

Модели, миграции

Итак, нам необходима модель User (она идёт с Laravel), модель Post и модель Favorite, а также файлы миграции для них.

php artisan make:model Post -m
php artisan make:model Favorite -m

Эти команды создадут нужные нам модели вместе с миграциями. Откроем файл миграции таблицы posts и обновим метод up():

/**
* Define posts table schema
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}

Таблица posts будет содержать id, user_id (ID пользователя, создавшего статью), title, body и колонки с отметками времени.

Теперь откроем файл миграций таблицы favorites и обновим up():

/**
* Define favorites table schema
*/
public function up()
{
Schema::create('favorites', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->integer('post_id')->unsigned();
$table->timestamps();
});
}

Таблица favorites будет сводной. В ней будет две колонки:
user_id, в которой будет храниться ID пользователя, добавившего статью в избранное и post_id, в которой будет ID отмеченной статьи.

Файл миграции таблицы users оставим без изменений.

Перед запуском миграций настроим базу данных. Для этого добавим соответствующие настройки в файл .env:

DB_DATABASE=laravue
DB_USERNAME=root
DB_PASSWORD=root

Здесь нужно указать свои параметры базы.

Теперь запустим миграции:

php artisan migrate

Для тестирования работы приложения нам необходимо внести в него какие-либо данные. Для их генерации воспользуемся Laravel Model Factories, они же в свою очередь используют Faker PHP library.

Сгенерируем данные по Пользователям и Статьям. Добавим немного кода в конец файла database/factories/ModelFactory.php:

// database/factories/ModelFactory.php

$factory->define(App\Post::class, function (Faker\Generator $faker) {
// Get a random user
$user = \App\User::inRandomOrder()->first();

// generate fake data for post
return [
'user_id' => $user->id,
'title' => $faker->sentence,
'body' => $faker->text,
];
});

После этого перейдём к созданию классов заполнения базы:

php artisan make:seeder UsersTableSeeder
php artisan make:seeder PostsTableSeeder

Теперь откроем database/seeds/UsersTableSeeder.php и обновим метод run():

// database/seeds/UsersTableSeeder.php

/**
* Run the database seeds to create users.
*
* @return void
*/
public function run()
{
factory(App\User::class, 5)->create();
}

В результате будут созданы 5 различных пользователей. Сделаем то же самое со статьями. Откроем database/seeds/PostsTableSeeder.php и обновим run():

// database/seeds/PostsTableSeeder.php

/**
* Run the database seeds to create posts.
*
* @return void
*/
public function run()
{
factory(App\Post::class, 10)->create();
}

В результате будут созданы 10 различных статей по окончании работы скрипта.

Перед запуском генераторов данных обновим файл database/seeds/DatabaseSeeder.php:

// database/seeds/DatabaseSeeder.php

/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$this->call(UsersTableSeeder::class);
$this->call(PostsTableSeeder::class);
}

И запустим генерацию данных:

php artisan db:seed
Готово.

Авторизация

К счастью, в Laravel уже есть встроенная система авторизации. Нужно только запустить соответствующего мастера:

php artisan make:auth
Будут созданы необходимые роуты и представления для авторизации и нам остаётся только зарегистрироваться в системе.

Роуты

Откроем файл routes/web.php и изменим маршруты:

// routes/web.php

Auth::routes();

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

Route::post('favorite/{post}', 'PostsController@favoritePost');
Route::post('unfavorite/{post}', 'PostsController@unFavoritePost');

Route::get('my_favorites', 'UsersController@myFavorites')->middleware('auth');
После регистрации или авторизации пользователя Laravel перенаправит его на роут /home по-умолчанию. Мы удалили роут /home, созданный при запуске make:auth и поэтому нужно обновить свойство redirectTo в обоих файлах app/Http/Controllers/Auth/LoginController.php и app/Http/Controllers/Auth/RegisterController.php на:

protected $redirectTo = '/';

Отношения Пользователь-Избранное

Пользователь может добавить много статей в избранное, а статья может быть добавлена в избранное многими пользователями, поэтому отношения между этими таблицами будут многие-ко-многим. Для этого откроем модель User и добавим favorites():

// app/User.php

/**
* Get all of favorite posts for the user.
*/
public function favorites()
{
return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps();
}

Laravel считает сводной таблицей post_user, но так как мы её переименовали (в favorites), нам нужно передать дополнительные параметры. Вторым параметром идёт имя сводной таблицы. Третьим – внешний ключ (user_id) модели, с которой создаётся связь (User), а четвёртым – внешний ключ (post_id) модели, к которой мы присоединяем (Post).

Обратите внимание, мы связали withTimeStamps() с belongsToMany(). Это позволит колонкам сводной таблицы с отметками времени (create_at и updated_at) автоматически сработать при добавлении или обновлении строки.

Контроллер статей

Создадим новый контроллер, в котором будут функции вывода статей, пометки в избранное и удаление такой отметки.

php artisan make:controller PostsController
Откроем app/Http/Controllers/PostsController.php и добавим в конец такой код:

// app/Http/Controllers/PostsController.php

// remember to use the Post model
use App\Post;

/**
* Display a paginated list of posts.
*
* @return Response
*/
public function index()
{
$posts = Post::paginate(5);

return view('posts.index', compact('posts'));
}

Метод index() вернёт все статьи и разделит их по 5 на странице, а затем обработает файл представления (который мы создадим) со всеми статьями.

Добавим в файл resources/views/layouts/app.blade.php (пониже ) такой код:</p> <p><code>// resources/views/layouts/app.blade.php</p> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /></code><br /> А затем это перед элементом списка Logout:</p> <p><code>// resources/views/layouts/app.blade.php</p> <li> <a href="{{ url('my_favorites') }}">My Favorites</a> </li> <p></code><br /> Теперь создадим представление index. Создайте папку posts внутри views и в ней файл index.blade.php. Получится resources/views/posts/index.blade.php:</p> <p><code>// resources/views/posts/index.blade.php</p> <p>@extends('layouts.app')</p> <p>@section('content')</p> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="page-header"> <h3>All Posts</h3> </p></div> <p> @forelse ($posts as $post)</p> <div class="panel panel-default"> <div class="panel-heading"> {{ $post->title }} </div> <div class="panel-body"> {{ $post->body }} </div> </p></div> <p> @empty</p> <p>No post created.</p> <p> @endforelse</p> <p> {{ $posts->links() }} </p></div> </p></div> </div> <p>@endsection</code><br /> Откройте браузер и увидите такую страничку:</p> <p><img src="https://tehnojam.pro/uploads/images/00/00/24/2017/03/07/f7e0763e8d.png" class="image-center" alt="Разработка: Как сделать Избранное средствами Laravel и Vue.js" /></p> <p>Вернёмся к PostsController и добавим недостающие методы:</p> <p><code>// app/Http/Controllers/PostsController.php</p> <p>// remember to use<br /> use Illuminate\Support\Facades\Auth;</p> <p>/**<br /> * Favorite a particular post<br /> *<br /> * @param Post $post<br /> * @return Response<br /> */<br /> public function favoritePost(Post $post)<br /> {<br /> Auth::user()->favorites()->attach($post->id);</p> <p> return back();<br /> }</p> <p>/**<br /> * Unfavorite a particular post<br /> *<br /> * @param Post $post<br /> * @return Response<br /> */<br /> public function unFavoritePost(Post $post)<br /> {<br /> Auth::user()->favorites()->detach($post->id);</p> <p> return back();<br /> }</code></p> <h5>Добавляем VueJs</h5> <p>С помощью Vue мы сделаем кнопку Избранного. По нажатию на неё, статья добавиться в избранное (или удалится из избранного) без перезагрузки страницы, используя AJAX. Здесь нам пригодится Axios – основанный на Promise HTTP-клиент для браузера и node.js.</p> <p>Создадим компонент Vue, для этого создайте файл Favorite.vue в папке resources/assets/js/components с таким содержимым:</p> <p><code>// resources/assets/js/components/Favorite.vue</p> <p><template><br /> <span><br /> <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)"><br /> <i class="fa fa-heart"></i><br /> </a><br /> <a href="#" v-else @click.prevent="favorite(post)"><br /> <i class="fa fa-heart-o"></i><br /> </a><br /> </span><br /> </template></p> <p><script> export default { props: ['post', 'favorited'],</p> <p> data: function() { return { isFavorited: '', } },</p> <p> mounted() { this.isFavorited = this.isFavorite ? true : false; },</p> <p> computed: { isFavorite() { return this.favorited; }, },</p> <p> methods: { favorite(post) { axios.post('/favorite/'+post) .then(response => this.isFavorited = true) .catch(response => console.log(response.data)); },</p> <p> unFavorite(post) { axios.post('/unfavorite/'+post) .then(response => this.isFavorited = false) .catch(response => console.log(response.data)); } } } </script></code><br /> В компоненте Favorite есть два раздела: template и script. В template мы задали разметку, которая будет обработана при вызове компонента. Мы используем обработку с условием, она нам должна вывести нужную кнопку. То есть если isFavorited равно true, кнопка должна быть отмечена как избранная и при нажатии вызвать unFavorite(). В противном случае она выглядит как не помеченная и вызывает при клике метод favorite().</p> <p>В разделе script мы задали свойства компонента – post (тут будет ID статьи) и favorited (true или false в зависимости от того, в каком он состоянии для текущего авторизованного пользователя). Также мы задали переменную isFavorited для условной обработки шаблона.</p> <p>При подключении компонента мы задаём значение isFavorited равным рассчитанному свойству isFavorite. То есть свойство isFavorite вернёт значение свойства favorited, которое может быть true или false.</p> <p>Также мы создали два метода: favorite() и unFavorite(), оба принимающие post как аргумент. С помощью Axios мы делаем POST-запрос к заданным ранее роутам. В favorite(), при успешном POST-запросе, мы задаём isFavorited в true, иначе выводим ошибку в консоль. То же самое и для unFavorite() – только меняем isFavorited на false.</p> <h5>Регистрация компонента</h5> <p>Перед использованием компонента необходимо зарегистрировать его в экземпляре Vue. Открыв resources/assets/js/app.js вы увидите, что Laravel зарегистрировал компонент Example. Заменим его на наш Favorite:</p> <p><code>// resources/assets/js/app.js</p> <p>Vue.component('favorite', require('./components/Favorite.vue'));</code><br /> Теперь скомпилируем и соберём наши стили и скрипты:</p> <p><code>npm run dev</code></p> <p>Теперь можно использовать наш компонент. Откроем resources/views/posts/index.blade.php и добавим в конец (после закрывающего div в panel-body) такой код:</p> <p><code>// resources/views/posts/index.blade.php</p> <p>@if (Auth::check())</p> <div class="panel-footer"> <favorite :post={{ $post->id }}<br /> :favorited={{ $post->favorited() ? 'true' : 'false' }}<br /> ></favorite> </div> <p>@endif</code><br /> Теперь кнопка добавления в избранное будет показана только авторизованным пользователям. А чтобы узнать, добавлена ли статья в избранное, нужен метод favorited(), который мы и создадим. Откройте app/Post.php и добавьте код:</p> <p><code>// app/Post.php</p> <p>// remember to use<br /> use App\Favorite;<br /> use Illuminate\Support\Facades\Auth;</p> <p>/**<br /> * Determine whether a post has been marked as favorite by a user.<br /> *<br /> * @return boolean<br /> */<br /> public function favorited()<br /> {<br /> return (bool) Favorite::where('user_id', Auth::id())<br /> ->where('post_id', $this->id)<br /> ->first();<br /> }</code><br /> Здесь мы получаем и приводим к булеву первую строку запроса, где user_id это идентификатор текущего пользователя, а post_id это идентификатор статьи, с которой мы работаем сейчас.</p> <p>Теперь наше приложение будет выглядеть так:</p> <p><img src="https://tehnojam.pro/uploads/images/00/00/24/2017/03/07/4889091451.png" class="image-center" alt="Разработка: Как сделать Избранное средствами Laravel и Vue.js" /></p> <h5>Вывод избранного</h5> <p>Для вывода избранных статей мы создали ранее роут my_favorites, доступный только авторизованным пользователям. </p> <p>Создадим UsersController, обрабатывающий этот роут:</p> <p><code>php artisan make:controller UsersController</code><br /> Теперь откроем app/Http/Controllers/UsersController.php и добавим код:</p> <p><code>// app/Http/Controllers/UsersController.php</p> <p>// remember to use<br /> use Illuminate\Support\Facades\Auth;</p> <p>/**<br /> * Get all favorite posts by user<br /> *<br /> * @return Response<br /> */<br /> public function myFavorites()<br /> {<br /> $myFavorites = Auth::user()->favorites;</p> <p> return view('users.my_favorites', compact('myFavorites'));<br /> }</code><br /> Теперь создадим представление. Создайте папку users в resources/views, а в ней файл my_favorites.blade.php:</p> <p><code>// resources/views/users/my_favorites.blade.php</p> <p>@extends('layouts.app')</p> <p>@section('content')</p> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="page-header"> <h3>My Favorites</h3> </p></div> <p> @forelse ($myFavorites as $myFavorite)</p> <div class="panel panel-default"> <div class="panel-heading"> {{ $myFavorite->title }} </div> <div class="panel-body"> {{ $myFavorite->body }} </div> <p> @if (Auth::check())</p> <div class="panel-footer"> <favorite :post={{ $myFavorite->id }}<br /> :favorited={{ $myFavorite->favorited() ? 'true' : 'false' }}<br /> ></favorite> </div> <p> @endif </p></div> <p> @empty</p> <p>You have no favorite posts.</p> <p> @endforelse </p></div> </p></div> </div> <p>@endsection</code></p> <p><img src="https://tehnojam.pro/uploads/images/00/00/24/2017/03/08/6ee53a54ea.png" class="image-center" alt="Разработка: Как сделать Избранное средствами Laravel и Vue.js" /></p> <p>Готово! </p> <p><a href="https://github.com/ammezie/laravel-vue-favorite" target="_blank">Полный код примера.</a></p> <p>По материалам “Implement a Favoriting Feature Using Laravel and Vue.js” by Chimezie Enyinnaya</p> </div><!-- .entry-content --> <footer class="entry-meta"> <span class="cat-links"><span class="screen-reader-text">Categories </span><a href="https://tehnojam.pro/category/category/development" rel="category tag">Разработка</a></span> <nav id="nav-below" class="post-navigation"> <span class="screen-reader-text">Post navigation</span> <div class="nav-previous"><span class="prev" title="Previous"><a href="https://tehnojam.pro/category/technologies/torgovye-vojny-vokrug-nesushestvujushih-kvantovyh-kompjuterov.html" rel="prev">Торговые войны вокруг несуществующих квантовых компьютеров</a></span></div><div class="nav-next"><span class="next" title="Next"><a href="https://tehnojam.pro/category/secure/obnarodovannye-sekretnye-fajly-tsru-podrobno-opisyvajut-instrumenty-dlja-vzloma-iphone-android-smart-televizorov.html" rel="next">Обнародованные секретные файлы ЦРУ подробно описывают инструменты для взлома iPhone, Android, смарт-телевизоров</a></span></div> </nav><!-- #nav-below --> </footer><!-- .entry-meta --> </div><!-- .inside-article --> </article><!-- #post-## --> <div class="comments-area"> <div id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html#respond" style="display:none;">Отменить ответ</a></small></h3> <form action="https://tehnojam.pro/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-form-comment"><label for="comment" class="screen-reader-text">Comment</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p><label for="author" class="screen-reader-text">Name</label><input placeholder="Name *" id="author" name="author" type="text" value="" size="30" /> <label for="email" class="screen-reader-text">Email</label><input placeholder="Email *" id="email" name="email" type="email" value="" size="30" /> <label for="url" class="screen-reader-text">Website</label><input placeholder="Website" id="url" name="url" type="url" value="" size="30" /> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='365' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="a3378c8d98" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="138"/></p> </form> </div><!-- #respond --> </div><!-- #comments --> </div> </main><!-- #main --> </div><!-- #primary --> <div id="right-sidebar" itemtype="https://schema.org/WPSideBar" itemscope="itemscope" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"> <div class="inside-right-sidebar"> <aside id="search-2" class="widget inner-padding widget_search"><form method="get" class="search-form" action="https://tehnojam.pro/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:"> </label> <input type="submit" class="search-submit" value="Search"> </form> </aside> <aside id="recent-posts-2" class="widget inner-padding widget_recent_entries"> <h2 class="widget-title">Свежие записи</h2> <ul> <li> <a href="https://tehnojam.pro/category/it-news/ezhenedelnyj-android-dajdzhest-2.html">Еженедельный Android-дайджест #2</a> </li> <li> <a href="https://tehnojam.pro/category/software/kak-perenesti-mac-os-khakintosh-na-ssd.html">Как перенести Mac OS (Хакинтош) на SSD</a> </li> <li> <a href="https://tehnojam.pro/category/development/kak-importirovat-vse-moduli-vuejs-srazu.html">Как импортировать все модули Vuejs сразу</a> </li> <li> <a href="https://tehnojam.pro/category/it-news/ezhenedelnyj-android-dajdzhest-1.html">Еженедельный Android-дайджест #1</a> </li> <li> <a href="https://tehnojam.pro/category/development/dobavljaem-poiskovyj-filtr-v-recyclerview-v-android.html">Добавляем поисковый фильтр в RecyclerView в Android</a> </li> </ul> </aside><aside id="recent-comments-2" class="widget inner-padding widget_recent_comments"><h2 class="widget-title">Свежие комментарии</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link">Sherus</span> к записи <a href="https://tehnojam.pro/category/software/ustanovka-mac-os-high-sierra-na-ga-b250-hd3.html#comment-82">Установка Mac OS High Sierra Hackintosh на GA b250 HD3</a></li><li class="recentcomments"><span class="comment-author-link"><a href='http://fokusov.com' rel='external nofollow' class='url'>Игорь Фокусов</a></span> к записи <a href="https://tehnojam.pro/category/software/ustanovka-mac-os-high-sierra-na-ga-b250-hd3.html#comment-79">Установка Mac OS High Sierra Hackintosh на GA b250 HD3</a></li><li class="recentcomments"><span class="comment-author-link">Sherus</span> к записи <a href="https://tehnojam.pro/category/software/ustanovka-mac-os-high-sierra-na-ga-b250-hd3.html#comment-73">Установка Mac OS High Sierra Hackintosh на GA b250 HD3</a></li><li class="recentcomments"><span class="comment-author-link">manjarqo</span> к записи <a href="https://tehnojam.pro/category/software/delaem-globalnoe-menju-v-plasma-5_9.html#comment-43">Делаем глобальное меню в Plasma 5.9</a></li><li class="recentcomments"><span class="comment-author-link"><a href='http://sdnit.ru' rel='external nofollow' class='url'>Николай</a></span> к записи <a href="https://tehnojam.pro/category/software/delaem-globalnoe-menju-v-plasma-5_9.html#comment-6">Делаем глобальное меню в Plasma 5.9</a></li></ul></aside><aside id="archives-2" class="widget inner-padding widget_archive"><h2 class="widget-title">Архивы</h2> <ul> <li><a href='https://tehnojam.pro/category/2018/03'>Март 2018</a></li> <li><a href='https://tehnojam.pro/category/2018/02'>Февраль 2018</a></li> <li><a href='https://tehnojam.pro/category/2018/01'>Январь 2018</a></li> <li><a href='https://tehnojam.pro/category/2017/12'>Декабрь 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/10'>Октябрь 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/09'>Сентябрь 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/08'>Август 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/07'>Июль 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/05'>Май 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/04'>Апрель 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/03'>Март 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/02'>Февраль 2017</a></li> <li><a href='https://tehnojam.pro/category/2017/01'>Январь 2017</a></li> </ul> </aside><aside id="categories-2" class="widget inner-padding widget_categories"><h2 class="widget-title">Рубрики</h2> <ul> <li class="cat-item cat-item-12"><a href="https://tehnojam.pro/category/category/secure" >Безопасность</a> </li> <li class="cat-item cat-item-8"><a href="https://tehnojam.pro/category/category/hardware" >Железо</a> </li> <li class="cat-item cat-item-10"><a href="https://tehnojam.pro/category/category/internet-of-things" >Интернет вещей</a> </li> <li class="cat-item cat-item-9"><a href="https://tehnojam.pro/category/category/back-to-the-future" >Назад в будущее</a> </li> <li class="cat-item cat-item-6"><a href="https://tehnojam.pro/category/category/it-news" >Новости IT</a> </li> <li class="cat-item cat-item-5"><a href="https://tehnojam.pro/category/category/development" >Разработка</a> </li> <li class="cat-item cat-item-4"><a href="https://tehnojam.pro/category/category/software" >Софт</a> </li> <li class="cat-item cat-item-11"><a href="https://tehnojam.pro/category/category/itagregator" >Техноагрегатор</a> </li> <li class="cat-item cat-item-7"><a href="https://tehnojam.pro/category/category/technologies" >Технологии</a> </li> </ul> </aside><aside id="meta-2" class="widget inner-padding widget_meta"><h2 class="widget-title">Мета</h2> <ul> <li><a href="https://tehnojam.pro/wp-login.php">Войти</a></li> <li><a href="https://tehnojam.pro/feed"><abbr title="Really Simple Syndication">RSS</abbr> записей</a></li> <li><a href="https://tehnojam.pro/comments/feed"><abbr title="Really Simple Syndication">RSS</abbr> комментариев</a></li> <li><a href="https://ru.wordpress.org/" title="Сайт работает на WordPress — современной персональной платформе для публикаций.">WordPress.org</a></li> </ul> </aside> </div><!-- .inside-right-sidebar --> </div><!-- #secondary --> </div><!-- #content --> </div><!-- #page --> <div class="site-footer "> <div id="footer-widgets" class="site footer-widgets"> <div class="footer-widgets-container grid-container grid-parent"> <div class="inside-footer-widgets"> <div class="footer-widget-1 grid-parent grid-25 tablet-grid-50 mobile-grid-100"> </div> <div class="footer-widget-2 grid-parent grid-25 tablet-grid-50 mobile-grid-100"> </div> <div class="footer-widget-3 grid-parent grid-25 tablet-grid-50 mobile-grid-100"> </div> <div class="footer-widget-4 grid-parent grid-25 tablet-grid-50 mobile-grid-100"> </div> </div> </div> </div> <footer class="site-info" itemtype="https://schema.org/WPFooter" itemscope="itemscope"> <div class="inside-site-info "> <div class="copyright-bar"> © 2018 All rights reserved Tehnojam </div> </div> </footer><!-- .site-info --> </div><!-- .site-footer --> <a title="Scroll back to top" rel="nofollow" href="#" class="koromo-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="400" data-start-scroll="300"> <span class="screen-reader-text">Scroll back to top</span> </a> <div class="koromo-side-left-cover"></div> <div class="koromo-side-right-cover"></div> </div> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/tehnojam.pro\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."}}}; /* ]]> */ </script> <script type='text/javascript' src='https://tehnojam.pro/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.0.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var PT_CV_PUBLIC = {"_prefix":"pt-cv-","page_to_show":"5","_nonce":"87674d4953","is_admin":"","is_mobile":"","ajaxurl":"https:\/\/tehnojam.pro\/wp-admin\/admin-ajax.php","lang":"","loading_image_src":"data:image\/gif;base64,R0lGODlhDwAPALMPAMrKygwMDJOTkz09PZWVla+vr3p6euTk5M7OzuXl5TMzMwAAAJmZmWZmZszMzP\/\/\/yH\/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAPACwAAAAADwAPAAAEQvDJaZaZOIcV8iQK8VRX4iTYoAwZ4iCYoAjZ4RxejhVNoT+mRGP4cyF4Pp0N98sBGIBMEMOotl6YZ3S61Bmbkm4mAgAh+QQFCgAPACwAAAAADQANAAAENPDJSRSZeA418itN8QiK8BiLITVsFiyBBIoYqnoewAD4xPw9iY4XLGYSjkQR4UAUD45DLwIAIfkEBQoADwAsAAAAAA8ACQAABC\/wyVlamTi3nSdgwFNdhEJgTJoNyoB9ISYoQmdjiZPcj7EYCAeCF1gEDo4Dz2eIAAAh+QQFCgAPACwCAAAADQANAAAEM\/DJBxiYeLKdX3IJZT1FU0iIg2RNKx3OkZVnZ98ToRD4MyiDnkAh6BkNC0MvsAj0kMpHBAAh+QQFCgAPACwGAAAACQAPAAAEMDC59KpFDll73HkAA2wVY5KgiK5b0RRoI6MuzG6EQqCDMlSGheEhUAgqgUUAFRySIgAh+QQFCgAPACwCAAIADQANAAAEM\/DJKZNLND\/kkKaHc3xk+QAMYDKsiaqmZCxGVjSFFCxB1vwy2oOgIDxuucxAMTAJFAJNBAAh+QQFCgAPACwAAAYADwAJAAAEMNAs86q1yaWwwv2Ig0jUZx3OYa4XoRAfwADXoAwfo1+CIjyFRuEho60aSNYlOPxEAAAh+QQFCgAPACwAAAIADQANAAAENPA9s4y8+IUVcqaWJ4qEQozSoAzoIyhCK2NFU2SJk0hNnyEOhKR2AzAAj4Pj4GE4W0bkJQIAOw==","is_mobile_tablet":"","sf_no_post_found":"\u0417\u0430\u043f\u0438\u0441\u0435\u0439 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e."}; var PT_CV_PAGINATION = {"first":"\u00ab","prev":"\u2039","next":"\u203a","last":"\u00bb","goto_first":"\u041d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","goto_prev":"\u041d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","goto_next":"\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","goto_last":"\u041d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","current_page":"\u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","goto_page":"\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443"}; /* ]]> */ </script> <script type='text/javascript' src='https://tehnojam.pro/wp-content/plugins/content-views-query-and-display-post-page/public/assets/js/cv.js?ver=2.1.1'></script> <script type='text/javascript' src='https://tehnojam.pro/wp-content/plugins/pt-content-views-pro/public/assets/js/cvpro.min.js?ver=5.3.4.3'></script> <!--[if lte IE 11]> <script type='text/javascript' src='https://tehnojam.pro/wp-content/themes/koromo/js/classList.min.js?ver=1.0.1'></script> <![endif]--> <script type='text/javascript' src='https://tehnojam.pro/wp-content/themes/koromo/js/menu.min.js?ver=1.0.1'></script> <script type='text/javascript' src='https://tehnojam.pro/wp-content/themes/koromo/js/a11y.min.js?ver=1.0.1'></script> <script type='text/javascript' src='https://tehnojam.pro/wp-content/themes/koromo/js/navigation-search.min.js?ver=1.0.1'></script> <script type='text/javascript' src='https://tehnojam.pro/wp-content/themes/koromo/js/back-to-top.min.js?ver=1.0.1'></script> <script type='text/javascript' src='https://tehnojam.pro/wp-includes/js/comment-reply.min.js?ver=4.9.8'></script> <script type='text/javascript' src='https://tehnojam.pro/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script> <script async="async" type='text/javascript' src='https://tehnojam.pro/wp-content/plugins/akismet/_inc/form.js?ver=4.0.8'></script> </body> </html>