03. チャットページの作成

チャットページを作成します。チャットメッセージの送受信はまだできません。

解説

チャットページの表示について、すべきことは以下です。

前提

02. ユーザー認証機能の追加」を実施していない場合は、実施します。

空のページの作成

まず、空のページ(≒内容のほとんどないページ)を表示するコードを記述します。

チャットページ用のコントローラーの作成

以下のコマンドを実行し、「ChatController」という名前のコントローラーを作成します。

チャットページ用のコントローラーの編集

作成した「ChatController」の内容を編集します。

以下のコマンドを実行し、「ChatController.php」ファイルを開きます。



内容を以下のようにします。



解説)

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

チャットページを表示するためのルーティングの編集

チャットページが表示されるように、ルーティングファイルを編集します。

以下のコマンドを実行し、「routes/web.php」ファイルを開きます。



内容を以下のようにします。



解説)

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

ダッシュボードページ用のコントローラーの編集

ダッシュボードページからクリックしてチャットページに移動できるように、ダッシュボードページにリンク作成します。

以下のコマンドを実行し、ダッシュボードページ用のテンプレートファイルを開きます。



内容を以下のようにします。



解説)

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

空のページの動作確認

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

チャットページにアクセス

ブラウザで、以下のURLにアクセスする。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000



ログインするとダッシュボードページが表示される。

「Chat」をクリックします。



「chat」と表示されるページが表示されます。

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

メッセージ入力フォームとメッセージリストの表示

続いて、作成した空のページの内容として、メッセージ入力フォームとメッセージリストを追加します。

チャットページ用のテンプレートファイルの作成と編集

以下のコマンドを実行し、チャットページ用のテンプレートファイルを新規作成し、開きます。



内容を以下のようにします。



解説)

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

コントローラーの編集

作成したチャットページ用のテンプレートファイルが表示されるようにコントローラーを書き換えます。

以下のコマンドを実行し、「ChatController.php」ファイルを開きます。



内容を以下のようにします。



解説)

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

cssファイルとjsファイルのリビルト

以下のコマンドを実行し、cssファイルとjsファイルをリビルドします。

チャットページの動作確認

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

チャットページにアクセス

ブラウザで、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat



「メッセージ入力フォーム」と「(ダミーの)メッセージリスト」が表示されます。

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

関連ページ

前項目:02. ユーザー認証機能の追加

次項目:04. Pusherチャンネルの作成