【PHP】Laravel初心者が独学の勉強法として簡単なサイトを作ってみた【練習・学習】

2019.04.20 / 更新日：2019.06.10

困ってる人

Laravelの勉強をしたいんだけど、一体何から始めればいいんだろう？

まずは簡単なサイトでも作って、フォルダ構成や、基本的な事を学んでみようかなぁ？

こんにちは、よろと申します。

という事で、本日は「PHP」のフレームワークでもある「Laravel」で簡単なホームページを作る方法。

HTML, CSSファイルを保存する場所や、画像の表示の仕方、リンクの貼り方などをご紹介。

という事で、早速今回作るのはこれ。

今回の内容が理解出来るようになると、

ブラウザでHTMLを表示する方法

CSSとJavaScriptの読み込み方

画像の貼り付け方

リンクの貼り方

ルーティングの基本

これらが分かるようになるはず。

「Laravel」でファイルを作る際に、まず始めにするプロジェクトの準備に関する記事はこちら。

「Laravel」の環境構築, 最初にやる事, 準備, 設定方法【導入編】

【PHP初心者】Laravelで簡単なサイトを作ってみる：最初にファイルの準備

という事でまずはファイルの用意。

「コマンドプロンプト」でも「Windows PowerShell」でも何でもOKですが、まずはどちらかを開く。

「cd desktop」でデスクトップに移動し、

// ファイルの準備(今回は試しにsampleというファイルを作成)

laravel new sample

もしくは、

composer create-project laravel/laravel --prefer-dist sample

と入力

// ファイルの準備(今回は試しにsampleというファイルを作成)

laravel new sample

もしくは、

composer create-project laravel/laravel --prefer-dist sample

と入力

ファイルが出来るまで結構時間がかかるので、しばらく待つ。

「Application key set successfully.」と表示されればOK。

【Laravel】サーバーの起動方法

「cd sample」でsampleフォルダ(プロジェクトファイル)の中に入る。

「php artisan serve」でサーバーを起動。

「localhost:8000」にアクセスが可能になる。

もし、アクセス先を変えたい場合は、

「php -S localhost:7000 -t public」で7000番にしてみたりといろいろ。

この場合「コマンドプロンプト」上で「Listening on http://localhost:7000」と表示されればOK。

そうすると「sample」フォルダ内には自動的にいろんなファイルが作られる。

PHP初心者がLaravelで簡単なサイトを作ってみる：ファイルの準備

今回のホームページを作るにあたって必要になるファイルが、

「index.html」 – メインページになるHTMLファイル
「welcome.html」 – 可愛いわんちゃんがうちに来てくれました
「like.html」 – ポチの好きな食べ物
「dislike.html」 – ポチの嫌いな食べ物
「birthday.html」 – ポチが１才になりました
「style.css」

(ファイル名は適当でOK)

もしここまでの内容が分からないという場合は、こちらの記事がおすすめ。

HTML, CSSタグの書き方, ホームページの作り方【初心者・入門編】

index.htmlの中に書く内容

// index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">

        <title>我が家の愛犬ポチの日記</title>
    </head>

    <body>
        <h1>我が家の愛犬ポチの日記</h1>

        <img src="inu.png">

        <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>

        <p><a href ="welcome.html">可愛いわんちゃんがうちに来てくれました</a></p>
        <p><a href ="like.html">ポチの好きな食べ物</a></p>
        <p><a href ="dislike.html">ポチの嫌いな食べ物</a></p>
        <p><a href ="birthday.html">ポチが１才になりました</a></p>
    </body>

</html>

// index.html

<!DOCTYPE html>

<html>

<head>

<title>我が家の愛犬ポチの日記</title>

</head>

<body>

<h1>我が家の愛犬ポチの日記</h1>

<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>

<p><a href ="welcome.html">可愛いわんちゃんがうちに来てくれました</a></p>

<p><a href ="like.html">ポチの好きな食べ物</a></p>

<p><a href ="dislike.html">ポチの嫌いな食べ物</a></p>

<p><a href ="birthday.html">ポチが１才になりました</a></p>

</body>

</html>

今回は練習なので「index.html」と「style.css」以外のファイルの内容は適当で。

続いてCSSファイルを用意。

style.cssの中に書く内容

// style.css

body {
	text-align: center;
}

// style.css

body {

text-align: center;

}

CSSファイルの保存先は「public\css」

それぞれのHTMLファイルの名前を変更し保存

そして、それぞれのファイル名を変更後「resource\views」内に保存。

「index.html」 → 「index.blade.html」
「welcome.html」 → 「welcome.blade.html」
「like.html」 → 「like.blade.html」
「dislike.html」 → 「dislike.blade.html」
「birthday」 → 「birthday.blade.html」

それぞれのページ(HTMLファイル)を読み込む

// routes/web.php

Route::get('/', function () { // ホームページにきたら～
    return view('index'); // index.blade.php
});


Route::get('/welcome', function () { // http://www.****/welcome にアクセスがあった場合、
    return view('welcome'); // welcome.blade.phpを返す。
});

Route::get('/like', function () { // http://www.****/welcome にアクセスがあった場合、
    return view('like'); // welcome.blade.phpを返す
});

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

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

を追加。

// routes/web.php

Route::get('/', function () { // ホームページにきたら～

return view('index'); // index.blade.php

});

Route::get('/welcome', function () { // http://www.****/welcome にアクセスがあった場合、

return view('welcome'); // welcome.blade.phpを返す。

});

Route::get('/like', function () { // http://www.****/welcome にアクセスがあった場合、

return view('like'); // welcome.blade.phpを返す

});

Route::get('/dislike', function () {

return view('dislike'); // dislike.blade.php

});

Route::get('/birthday', function () {

return view('birthday'); // birthday.blade.php

});

を追加。

index.blade.phpに、リンク(aタグ)を追加

// index.blade.php

<a href="{{url('/welcome')}}"></a>
<a href="{{url('/like')}}"></a>
<a href="{{url('/dislike')}}"></a>
<a href="{{url('/birthday')}}"></a>


トップに戻る場合のタグは、

<a href="{{url('/')}}"></a>

// index.blade.php

トップに戻る場合のタグは、

CSSを読み込むタグ：ヘルパー関数のassetを使う

「public/css」に「style.css」を保存。

ファイルを読み込む時は、ヘルパー関数のassetを使う。

// CSSを読み込むタグ

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

// CSSを読み込むタグ

画像を読み込む

画像ファイルの保存先は「public\images」

// 画像を読み込むタグ

<img src="{{ asset('images/inu.png') }}" alt="inu">

// 画像を読み込むタグ

そうすると最終的に「index.blade.html」の中身はこんな感じ。

// index.blade.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">

        <title>我が家の愛犬ポチの日記</title>
    </head>

    <body>
        <h1>我が家の愛犬ポチの日記</h1>

        <img src="{{ asset('images/inu.png') }}" alt="dog">

        <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>

        <p><a href="{{url('/welcome')}}">可愛いわんちゃんがうちに来てくれました</a></p>
        <p><a href="{{url('/like')}}">ポチの好きな食べ物</a></p>
        <p><a href="{{url('/dislike')}}">ポチの嫌いな食べ物</a></p>
        <p><a href="{{url('/birthday')}}">ポチが１才になりました</a></p>
    </body>

</html>

// index.blade.html

<!DOCTYPE html>

<html>

<head>

<title>我が家の愛犬ポチの日記</title>

</head>

<body>

<h1>我が家の愛犬ポチの日記</h1>

<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>

<p><a href="{{url('/welcome')}}">可愛いわんちゃんがうちに来てくれました</a></p>

<p><a href="{{url('/like')}}">ポチの好きな食べ物</a></p>

<p><a href="{{url('/dislike')}}">ポチの嫌いな食べ物</a></p>

<p><a href="{{url('/birthday')}}">ポチが１才になりました</a></p>

</body>

</html>

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール