Laravelでインスタグラムのようなモノを作ってみる-1

Laravel PHP

I wrote: 2017/09/23

ここ最近ですがLaravelについて勉強をしています。
勉強がてらインスタグラムのようなモノを作ってみようと思います。
シンプルなものを作るので出来栄えは初心者入門レベルです(´・ω・｀)

開発環境はこんな感じ。Homestead(仮想環境)でやります。
　MySQL 5.7.19
　PHP 7.1.7
　Laravel Framework 5.5.4 

１．こんな感じのデザインをまず作る
インスタのように投稿した写真が並ぶようなデザインにします。今はダミーを並べておきます。BootstrapのExampleを使いそれを変更して作りました。
22

 

２．postsテーブルを作る
postsつまり写真のテーブルを作ります。
次のコマンドでマイグレーションとコントローラーの雛形を作成！
　$ php artisan make:model Post -mc

作成されたマイグレーションのup()の中身を次のように変更！

    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('caption');
            $table->timestamps();
        });
    }


次のコマンドでpostsテーブルを作成！
マイグレーションからpostsテーブルが作成されます。
作成したテーブルに３つデータを加えておきます。
　$ php artisan migrate
14
３．写真を表示する
postsテーブルに登録されているデータを見て写真を表示させます。
id=1のデータがあるならimage-1.pngを表示する形にします。なので、image-1.png 〜 image-3.pngを用意しておきます。

web.phpをこんな感じにルーティングさせます。
　Route::get('/', 'PostsController@index');

PostsController.phpはこうする。

<?php
namespace App\Http\Controllers;
use App\Post;
 
class PostsController extends Controller
{
    public function index()
    {
    $posts = Post::all(); //postsテーブルを全取得
    return view('index', compact('posts'));//index.blade.phpへ$postsを渡す
    }
}

index.blade.phpはこうする。@extendsとか分からない人は検索してね。

@extends ('layouts.master')
@section ('content')
  <div class="row">
 
    @foreach ($posts as $post)
       <div class="card">
         <img src="/image/image-{{ $post->id }}.png" alt="Card image cap">
       </div>
    @endforeach
 
  </div>
@endsection

で、アクセスしてみると写真が３つ表示されてます！
32

今回はここまで。次回は写真をクリックした後をやりたいと思います。