ネビ活 | ネットビジネス生活

ネットxお金のスキルを作り、未来永劫豊かに暮らす事を目指すサイト

Laravel6チュートリアル超初心者向け:サイトを表示させて仕組みを理解しよう!

更新日:

Laravel6チュートリアル超初心者向け:サイトを表示させて仕組みを理解しよう!

ここでは、Laravelがまださっぱり分からない超初心者向けに、Laravel6でウェブページをブラウザに表示させる基本的なやり方をチュートリアルとして解説していきます。

 

Laravelでブラウザに表示されてるのはblade.phpに書かれたHTMLなんだ。

Laravelのblade.phpとは?普通のPHPは使える?初心者もよく分かる図と例で解説!

Neby

 

このブレードをブラウザでどうすれば表示できるのかを
チュートリアル形式で説明していきます。

あなたも実際に自分のPCで表示させて、使い方を体で覚えていってください。

このチュートリアルをやる事で、Laravelの構造がすごくよく分かるようになるよ!
Neby

 

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

Laravel6チュートリアル超初心者向け:ブレードでサイトを表示してみよう。

まずは、Laravelプロジェクトを新規作成します。

 

つまり新しいLaravelサイトをインストールするって事だよ。

Laravelプロジェクトとは?

次の項目で一緒にやっていこう↓

Neby

 

Laravelプロジェクト新規作成のやり方

コマンドプロンプト(XAMPPのShell/ターミナル)を開きます。

まず、cd で、Laravelプロジェクトを作成するフォルダに移動します。

例えば、XAMPPを使ってる場合は、htdocsフォルダ内に作成するので、まずそのフォルダまでのパスをコピーして、

cd D:\XAMPP\htdocs と入力、Enterするという感じです。

Dドライブにうまく移動できない時は、D: とだけ入力してEnter押すとDドラに移動できるよ。
フォルダを1個前に戻りたい時は、cd .. で戻れる。

コマンドcdの使い方。初心者でも図例でハマらずできる!

Neby

 

あとは、

コピーしました

コピー

composer create-project "laravel/laravel=6.*" newsite --prefer-dist

newsiteの部分は好きな名前に変えてOK

と入力、Enter。

5分ほどで、Laravelプロジェクトが新規作成されます。

このnewsiteの中にLaravelサイトを構成する全てのパーツが入ってるよ。
Neby

 

まずは、Laravelサイトを表示させてみる

まずは、前項で新規作成した新しいLaravelサイトを表示してみましょう。

今度は、

cd newsite と入力、Enterします。

これで、Laravelプロジェクトフォルダ(新サイトのフォルダ)内に移動しました。

次に

php artisan serve と入力、Enterします。

 

こうする事で http://127.0.0.1:8000 というURLが現れましたね。

 

このURLをブラウザにコピーして、ページを開いてみてください。
(http://localhost:8000でも同じアドレスになります。)

こういうサイトが表示されたはずです。

 

じゃあ、このページってどのファイルが表示されてるのか?

resources\views とフォルダを開いていくと、welcome.blade.phpというファイルがあります。

これをテキストエディタで開くと、htmlが書かれていて、それが上のサイトを表示してます。

 

じゃあ、実際、テキストエディタで開いてみましょう。

テキストエディタは、メモ帳、TeraPadなんかで開けるけど、おすすめは、Microsoft社が無料で配布しているVisualStudioCode(VScode)だよ。htmlと入力すれば、<html></html>と自動でタグに変換してくれるし、色分け表示してくれたり、コードのタイピングミスを教えてくれて、すごく使いやすいんだ。
Neby

 

実際にブラウザに表示されてるのは、82行目辺りにある<div class="content">という部分からです。

 

試しにそのすぐ下にあるLaravelという文字を適当な文字に変えてみましょう↓

で、ファイルを上書き保存して、ブラウザを更新してみてください。

 

このように、変わりました。

つまり、<div class="content">~</div>に挟まれてる部分のHTMLが表示されてるだけなんです。文字の大きさや色なんかは、同じく12行目くらいから書かれているstyleの部分のCSSで調整されてます。

 

どうやって、welcome.blade.phpが表示されてるのか?

じゃあ、ここでちょっとどういう構造で、このwelcome.blade.phpが表示されるのかについて、お勉強しましょう。

これが分かると、Laravelサイトの作り方がグングン分かってきます。

 

今度は、routesフォルダを開いてください。

中にweb.phpってファイルがありますよね。これを開きます。

 

この14行目辺りからの部分で、welcome.blade.phpを表示してます。

ちなみに、画像の/* */で囲われたピンク文字部分は、コメントアウト(説明が英語で書かれてるだけ)だから、邪魔なら削除しちゃってもなんの問題もないよ。
Neby

 

まず、Route::get っていうのは、サイトをブラウザで表示する時に使います。

  • get はブラウザ表示
  • postはフォーム送信

といった具合に使い分けたりします。

で、次の '/' これがURLです。/はトップページという意味です。

試しにこれを/mainに変更して、保存してみましょう。

 

ブラウザを更新してみてください。

404 | Not Found になってしまいました。これはURLを変えたからです。

 

じゃあ、今度は、ブラウザのURLに、/mainを追加してみてください。

このように、先程のwelcome.blade.phpが表示されました。

 

このreturn view の所のwelcomeが、welcome.blade.phpって事なんです。

なので、仮にあなたが、test1.blade.phpっていうブレードを作成したら、
ここをtest1に変えれば、今度は、test1.blade.phpが表示されます。

 

なるほど~、web.phpでそれぞれのブレードのURLを指定できるんだね。
これがLaravelの超基本となる仕組みなんだ。このブレード部分をViewって呼んだりもするんだ。View、つまりブラウザで見える部分っていう事。だから、return view (サイトを見てる人が入力したURLのビューをブラウザに返す)って書くわけ。
Neby

Laravelのビュー(View)とは?初心者にもよく分かる図でやさしく解説!

Laravelのblade.phpとは?普通のPHPは使える?初心者もよく分かる図と例で解説!

 

次のチュートリアルでは、実際に自分で1からブレードを作っていく方法を解説していきます。

Laravel6チュートリアル初心者向け:bladeでウェブページを作ってみよう!

 

ところで、あなたがLaravelを学び始めた理由ってなんですか?

稼げるって聞いたから?

じゃあ、どれくらい上達すれば稼げるのか?

本当にそんな高給を稼げるのかの現実を知ってますか?

詳しくは下の記事に本音の裏事情を書いてるので参考にしてくださいね。

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-PHP Laravel入門

Copyright© ネビ活 | ネットビジネス生活 , 2020 All Rights Reserved.