PHP初心者向け|Laravelで簡単なWebサイトを作る方法|独学勉強法・練習・学習

man

困ってる人
Laravelの勉強をしたいんだけど、一体何から始めればいいんだろう?

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


こんにちは、ヨロと申します。

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

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

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

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

  • ブラウザでHTMLを表示する方法
  • CSSとJavaScriptの読み込み方
  • 画像の貼り付け方
  • リンクの貼り方
  • ルーティングの基本
  • これらが分かるようになるはず。

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

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

    PHP初心者向け|Laravelで簡単なWebサイトを作る方法|最初にファイルの準備

    という事でまずはファイルの用意(今回は試しにsampleというファイルを作成します)

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

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

    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」 – ポチが1才になりました
    「style.css」

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

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

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

    index.htmlの中に書く内容

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="style.css">
    
            <title>我が家の愛犬ポチの日記</title>
        </head>
    
        <body>
            <h1>我が家の愛犬ポチの日記</h1>
    
            <img src="inu.png.webp">
    
            <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">ポチが1才になりました</a></p>
        </body>
    
    </html>

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

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

    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
    });

    を追加。

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

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

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

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

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

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

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

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

    画像を読み込む

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

    そして画像を読み込むタグは、

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

    そうすると最終的に「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.webp') }}" 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')}}">ポチが1才になりました</a></p>
        </body>
    
    </html>

    終わり。