こんにちは、ikuxxと申します。
という事で、本日は「PHP」のフレームワークでもある「Laravel」で簡単なホームページを作る方法。
HTML, CSSファイルを保存する場所や、画像の表示の仕方、リンクの貼り方などをご紹介。
という事で、早速今回作るのはこれ。
今回の内容が理解出来るようになると、
これらが分かるようになるはず。
「Laravel」でファイルを作る際に、まず始めにするプロジェクトの準備に関する記事はこちら。
「Laravel」の環境構築, 最初にやる事, 準備, 設定方法【導入編】
【PHP初心者】Laravelで簡単なサイトを作ってみる:最初にファイルの準備
という事でまずはファイルの用意。
「コマンドプロンプト」でも「Windows PowerShell」でも何でもOKですが、まずはどちらかを開く。
「cd desktop」でデスクトップに移動し、
1 2 3 4 5 6 7 8 9 |
// ファイルの準備(今回は試しに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」 – ポチが1才になりました
「style.css」
(ファイル名は適当でOK)
もしここまでの内容が分からないという場合は、こちらの記事がおすすめ。
HTML, CSSタグの書き方, ホームページの作り方【初心者・入門編】
index.htmlの中に書く内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 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">ポチが1才になりました</a></p> </body> </html> |
今回は練習なので「index.html」と「style.css」以外のファイルの内容は適当で。
続いてCSSファイルを用意。
style.cssの中に書く内容
1 2 3 4 5 |
// 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ファイル)を読み込む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 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タグ)を追加
1 2 3 4 5 6 7 8 9 10 11 |
// 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> |
CSSを読み込むタグ:ヘルパー関数のassetを使う
「public/css」に「style.css」を保存。
ファイルを読み込む時は、ヘルパー関数のassetを使う。
1 2 3 |
// CSSを読み込むタグ <link rel="stylesheet" href="{{ asset('css/style.css') }}"> |
画像を読み込む
画像ファイルの保存先は「public\images」
1 2 3 |
// 画像を読み込むタグ <img src="{{ asset('images/inu.png') }}" alt="inu"> |
そうすると最終的に「index.blade.html」の中身はこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 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')}}">ポチが1才になりました</a></p> </body> </html> |
終わり。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
Laravelの勉強をしたいんだけど、一体何から始めればいいんだろう?
まずは簡単なサイトでも作って、フォルダ構成や、基本的な事を学んでみようかなぁ?