Help us understand the problem. What is going on with this article?

プログラミングをかじったからには何らかの制作物を作りたい#4 ~Laravel, ページ作成, ルーティング

説明

このエントリーは初心者がとりあえず何かを作りたいと考え、それのみを理由にして記述しているものの4です。そのため、技術的な誤りや勘違いが多分に含まれている可能性があります。ご了承くださいませ。もしよろしければご指摘やご教示を頂けましたら幸いです。

できたもの

https://www.mend0.top

前回のあらすじ

プログラミングをかじったからには何らかの制作物を作りたい#3 ~作り直し編、完成したもの~
https://qiita.com/tatsuki1112/items/5bbffaa9da8f7727f7c5

実際に作成したものはできていて、それがどんなものなのかを説明した。

Laravel編

今回はLaravelでページを作成し、ルーティングなども行いました。
開発環境のMac上にDockerでLaravelを扱えるようにしました。

ページ作成 ~blade~

Laravelではviewにbladeというテンプレートが使用できます。Bladeを使うと、その中にPHPを記載できたり、テンプレートを継承したり、分割して記述したりなどができます。

今回私が作ったものに関して言えば以下のように分割して記述しています。

ページ名 ファイル名
トップ jangkengTop.blade.php
最強の一手を決める inspection.blade.php
👆のモーダル inspectionModal.blade.php
勝敗を決める judge.blade.php
👆のモーダル judgeModal.blade.php
結果一覧 total.blade.php

これらはすべてsrc/resources/views/layouts/下にあるapp.blade.phpを継承して記述しています。そのため、一度app.blade.phpにhead要素などを記述すれば、それを継承したテンプレートではいちいちそれらを記述する必要がなくなります。
ではそれらは如何にして利用すればよいのでしょうか。

@yield @extends @section @include

まず、viewの親を定義するのに使われるのが@yieldです。今回はbody要素内部以外の部分を共通化したかったのでapp.blade.phpを以下のように記述しました(イメージ)。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>JANGKENG</title>
</head>

<body>
   @yield('content')
</body>

</html>

それから子ビューを記述しますtop, inspection, judge, totalはすべてこのapp.blade.phpを継承しています。

@extends('layouts.app')

@section('content')

<body>
    内容を記述
    @include('modal')
</body>

@endsection

先頭の@extends('layouts.app')で上記親ビューを継承し、@section@endsectionの間の内容が親ビューのcontent部分に入ります。
今回は@include部分にはモーダルを分割して記述しました。
includeとyieldの違いがいまいちよくわからなかったのですが、どうやらincludeは単なる親子関係などがないhtmlを分割するためにあるものと言う感じでしょうか。
https://stackoverflow.com/questions/41916127/whats-the-difference-between-laravels-yield-and-include

確かに今回モーダル部分を分割した際にも、inspectionModal.blade.phpなどには特別な記述はせず、他のviewと同一のディレクトリに置いてあるのみです。

ルーティング

今回作成したものには、トップ、最強の一手、勝敗、合計という4枚のページがあります。これらを遷移させるためにルーティングをします。
Laravelのルーティングsrc/routes/web.phpで記述されます。
特に説明するよりも普通にコードを見ていただいたほうがわかりやすいと思います。

web.php
Route::get('/', function () {
    return view('jangkenTop');
});

Route::get('/inspect', function (){
    return view('inspection');
});

Route::get('/judge', function () {
    return view('judge');
});

Route::get('/total', 'ResultsController@getResults');

Route::post('/inspect', 'ResultsController@setResults');

それぞれにアクセスされたときにそれぞれのviewを返すという形です。total画面のみ、DBが関連してくるので単にviewを返すのではなく、コントローラーを経由しています。
このへんについては後ほど記述します。

今日はこのへんで、次回はLaravelMixやJqueryについて書きます!

tatsuki1112
学生時代は広告代理店のシステム管理部でPowerShell, Python, GAS, VBAなどを使って業務ツールを開発したり、パソコンを組み立てたり壊したりするアルバイトをしたり、原宿にあるシステム会社でインターン(laravel)などをしていました。いまはPHPを書いて生計を立てるなどをしています。でもWindowsやPowerShellの記事を書くことが多いような気がします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした