Laravelの勉強をしたいんだけど、一体何から始めればいいんだろう？
まずは簡単なサイトでも作って、フォルダ構成や、基本的な事を学んでみようかなぁ？
こんにちは、ヨロと申します。
という事で、本日は「PHP」のフレームワークでもある「Laravel」で簡単なホームページを作る方法。
HTML, CSSファイルを保存する場所や、画像の表示の仕方、リンクの貼り方などをご紹介。
という事で、早速今回作るのはこれ。
今回の内容が理解出来るようになると、
これらが分かるようになるはず。
「Laravel」でファイルを作る際に、まず始めにするプロジェクトの準備に関する記事はこちら。
「Laravel」の環境構築, 最初にやる事, 準備, 設定方法【導入編】
【PHP初心者】Laravelで簡単なサイトを作ってみる：最初にファイルの準備
という事でまずはファイルの用意。
「コマンドプロンプト」でも「Windows PowerShell」でも何でもOKですが、まずはどちらかを開く。
「cd desktop」でデスクトップに移動し、
// ファイルの準備(今回は試しに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」と「style.css」以外のファイルの内容は適当で。
続いてCSSファイルを用意。
style.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タグ)を追加
// 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を使う。
// CSSを読み込むタグ
<link rel="stylesheet" href="{{ asset('css/style.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>終わり。
コメント