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

man

困ってる人

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

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



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

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

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

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

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

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

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

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


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

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

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

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

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

    「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の中に書く内容

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

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

    style.cssの中に書く内容

    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ファイル)を読み込む

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

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

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

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

    画像を読み込む

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

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

    終わり。

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