メニューを表示してみる③(laravel)

programming
programming
この記事は約5分で読めます。

HTML/CSSで静的なサイトを作ることはできますが

動的なサイト(ユーザーによって表示内容を変えることができる)を

作成するためには、バックエンド言語を使う必要があります!

だから、PHPのフレームワークであるlaravelを使うんですね!

そうです!

フレームワークを使うことで、規則性を崩さずコードを書くことができます!

「規則性がある=誰でもそのコードが読みやすい」ということで

複数人で開発をする際には重宝しますし、あとで自分でも読みやすいです

MVCモデルについて

laravelでは、MVCという機能に基づいて処理をするので、それぞれの機能を理解する必要があります!

(逆にここを理解するとlaravelはスムーズに使えます!)

M(Model)

データベースへの処理に必要

V(View)

Modelから抽出されたデータやテンプレートを表示させる

C(Controller)

全体の制御を行う。MやVに命令を行う

laravel立ち上げ

前回の記事で記載済みなので、ターミナルへの記述だけ書いておきます!

user@USERnoMacBook-Air htdocs % composer create-project laravel/laravel coffeeshop --prefer-dist

Controllerの作成

user@USERnoMacBook-Air coffeeshop % php artisan make:controller MenuController

「app>Http>Controllers」にフォルダが作成されます!

今回Controllerで指示したい内容は

Menuテーブル(DB)にある情報を取ってくるようにModelに指示する

Modelで取得したデータをViewで表示させる

ことです。

Modelも必要なので作成しておきましょう

Modelの作成

user@USERnoMacBook-Air coffeeshop % php artisan make:model Menu  

「app>Models」にフォルダが作成されます!

【コントローラー】

    public function index()
    {
        $items=Menu::all();
        return response()->json([
            'message'=>'OK',
            'data'=>$items
        ],200);
    }

【モデル】

class Menu extends Model
{
    protected $table = 'menus';
}

Modelで取得したデータをViewで表示させる

【ルーティング】

「/menu」に接続した時に、MenuControllerでindexアクションしたものをget(呼び出す)

use App\Http\Controllers\MenuController;
Route::get('/menu',[MenuController::class,'index']);

ちなみに「MenuControllerでindexアクションしたもの」とは

$items=Menu::all(); のことで、DBのMenuテーブルの全てのデータのことです。

データが取得できたか確認

laravelのサーバ立ち上げ

ターミナルで魔法の言葉「php artisan serve 」でサーバを立ち上げましょう

「Starting Laravel development server: http://127.0.0.1:8000」で立ち上がったとおもいます。

「http://127.0.0.1:8000/menu」でweb にアクセスしてみましょう!

↓こんな感じでDBからデータを抽出できました。

↓MAMPのデータと比較してみましょう

nameとdetailが文字化けしているので修正しておきます。

最後の一行を追記することで解決しました!

   public function index()
    {
        $items=Menu::all();
        return response()->json([
            'message'=>'OK',
            'data'=>$items
        ],200,[],
        JSON_UNESCAPED_UNICODE
    );
    }

まとめ

仕組みさえ押さえれば

簡単にDBの情報を表示させることができるんですね!

そうなんです!

フレームワークだからこそ、少ないコードで簡単にできます

次はDBから抽出したデータをフロントエンドに渡していく方法を書いていきますね!

最後まで読んでいただき、ありがとうございます!

↓よかったらいいねお願いします🥺

コメント

タイトルとURLをコピーしました