KYO

Laravel5.6とAjaxで「いいね」機能を作るチュートリアル

2018年8月5日 Laravel , , , ,

Laravel5.6で、いいね機能の作り方をチュートリアル形式で解説します。ちなみに中級のチュートリアルを終えたレベルなら作れると思います。
今回はログインしているユーザーが投稿に対して「いいね」を押せる機能を作ります。「いいね」は一度押すともう押せなくして、「いいね」取り消しは不可能にします。ユーザーごとに「いいね」を押しているのかどうかも判別できるようにします。

参考動画

今回の動画は上記のYouTubeの動画を元に作りました。

プロジェクトの作成とマイグレーションファイルの作成

Like_Sample_Appというの名前のプロジェクトを作りました

マイグレーションした時にAppServiceProviderを編集しておかないとエラーが起きる場合があります。

なので対応しておきます

Like_Sample_App\app\Providers\AppServiceProvider.php

つぎにマイグレーションファイルを作成していきます。

まずは投稿記事をに関するテーブルとモデルを作りたいので下記のコマンドを実施します

LikeApp\database\migrations\2018_08_04_001742_create_posts_table.php

にマイグレーションファイルができています
このupメソッドを下記の通り編集

同じように「いいね」のモデルとテーブルを作成したいので下記コマンドを実施してマイグレーションファイルを作成

同様にマイグレーションファイルのupメソッドを編集する

これは参考動画の名残なのですが、boolean型のlikeというものがありますが、これは0と1です。
というのもPHPは0はfalseで、1はtrueという性質があります

モデルの編集

\LikeApp\app\Post.php

のパスにモデルが作られていますのでモデルを編集していきます

Postモデル

LIKEモデル

Userモデルに以下を追記する
Laravelではプロジェクトを作った時に最初からUserモデルがあります

マイグレーションする

テーブル

usersなどは予めマイグレーションファイルが用意されているので追加されます。今回はこのユーザー機能を使って「いいね」をします。

ユーザー認証機能を爆速で作る

ユーザー認証機能は1から作るとなかなか苦労しますが、Laravelは爆速で作れます
というかコマンド一つで作れるのでサクッといきます

こんだけでユーザー認証機能が完結します。早速ウェルカムページにアクセスしてみますと、ページの上部に
LOGINとREGISTERというリンクが張られておりますので適当に登録してユーザーを追加しておきます

ついで投稿データも適当に追加しておきます

画面を作る

次に画面を作ります。

Like_Sample_App\routes\web.php

こんな感じでルーティングを設定しましたのでコントローラーのほうを作っていきます。

Like_Sample_App\app\Http\Controllers\PostController.php

コントローラのファイルが作られますので編集していきます

postフォルダにのindex.blade.phpというビューファイルを呼び出しますが、Postの中身を渡しています。
Like_Sample_App\resources\views\post\index.blade.php
のファイルを作成してファイルを編集します

Youtubeの動画を若干アレンジしてカードで作りました。

いいね機能を付けた投稿
$post->user->nameで投稿者を特定していますが、これは先ほどPostモデルで定義したメソッドを呼び出しています。

これですね。これで紐づいているUserデータを取得できます。

Ajaxを使う

このYoutubeの動画でもポイントとなっているAjaxの部分を書いていきます。動画では「いいね」ボタンの他に「ぶー」ボタンの機能も付いていますので、ここではそれをかなり切り取った内容になります。

Like_Sample_App\public\js\like.js

というjsファイルを作成します

ajaxのurlはビューのほうで指定したリンク先です。
ajaxでの処理に成功したときにボタンを切り替えていますが画像で見るとわかりやすいので

良いねボタンの切り替え時

「いいね」ボタンを押すと微妙にアイコンが切り替わっています。これが押下済のボタンです。

postLikePostメソッドを実装する

先ほどコントローラーで定義したメソッドで実装していないものがあるので
実装していきます

PostControllerのpostLikePostメソッドです。YouTubeの動画からかなり切り抜いた内容になります

動画では「いいね」「ぶー」どっちのボタンを押したのかという条件でごちゃごちゃと処理内容が分岐していきますが、今回は「いいね」を押すこと前提の処理なのでその辺のロジックは全て削除しました。

これで「いいね」ボタンを押した時にlikeテーブルにデータが挿入されています

テーブルの内容

これで「いいね」機能はほぼ完成しましたが、最後に修正するべきことがあります。

Ajax通信で処理しているのでボタンを押すと、アイコンが切り替わるのですがこのままでは画面を更新したときに、押下済なのに押下できてしまいます。
この時、実際にはテーブルにレコードが新規挿入されるようなことは起こりませんが、画面上ではそのような見た目になってしまっているのでこれを修正します。

Like_Sample_App\resources\views\post\index.blade.php

ユーザーの「いいね」がないときは「未いいね」のアイコンにして、あるときは「いいね済」のアイコンを表示するようにしています。

とりあえず「いいね」ボタンを押して、新規にユーザーを作成してログインしてからもう一度、投稿一覧画面を見ると、「いいね」ボタンが押されていない状態になっています。
ユーザーごとに「いいね」してるのかどうかをしっかり振り分けていることも確認できます

これで「いいね」機能をAjaxを使って実装することに成功しました。
YouTubeにはこういった濃い内容の動画がうじゃうじゃあるので勉強に最適ですよ!

 




関連記事

Laravel5.6で画像投稿機能を使ったユーザー投稿型サイトを作った

2018年7月25日

Laravelは今アツいPHPのフレームワークです。(私はcakeとか使ったことないですが...)そんなわけでLaravelを使ってユーザー投稿型のサイトを作りました。 コンセプトは猫を救うです。野良猫とか迷い猫とか里親を探している猫とか、そういった猫に手を差し伸べていこうというサイトです。 ユーザーが猫に関する情報を投稿してレスポンスを...