未分類

スポンサー広告

挑戦Laravel5.4 ミニブログ 記事の表示

2017/10/08

挑戦Laravel5.4 ミニブログ 記事の表示

挑戦Laravel5.4 ミニブログ 投稿機能作成 ではコントローラー内でクラスをnewしたりしていますがとりあえずDBに書き込み出来たところまで来ました。DIはもっと機能を学習してから実装予定でございます。今回はDBからデータを引っ張り出して表示したいと思います。

記事の表示

ミニブログをうたっていますのでトップページは特に用意せずに新着がいつでも表示されるようにしておこうと思います。更にカテゴリ別、日付順の記事のリンクを貼っておこうと思います。現在のトップページは127.0.0.1/miniblog/publicになっています。各ページは127.0.0.1/miniblog/public/id番号でアクセスしていただこうと思います。最新記事だけ127.0.0.1/miniblog/public/id番号と127.0.0.1/miniblog/publicの2通りのアクセスができるようにしていきます。

まずは番号固定の方が簡単ですね。127.0.0.1/miniblog/public/id番号の方から考えます。

インストールフォルダ(miniblog)/routes/web.php

Route::get('/{id}', 'ContributeController@show'});

/webphpを編集します。public/1でアクセスがあった場合/1の1をidとして渡してContributeControllerのshowメソッドを実行してねということです。コントローラーにshowメソッドを作成します。

インストールフォルダ(miniblog)/rapp/Http/Controllers/ContributeController.php

	 public function show($id){
	 	$contribute= new Contribute();
	 	$data = $contribute->find($id);
	 	
	 	return view('/welcome')->with(compact('data'));
	 }

を追記します。ブラウザに入力された(どこかのリンクをクリックからの)アドレス(127.0.0.1/miniblog/public/id番号)のid番号を引数としてもらいます。contributeテーブルのモデルをuse App\Contribute;で使用できるようにしておき、オブジェクトを作成します。そのオブジェクトに対してfind(引数-主キーに対して)することでcontributeテーブルからデータを取得します。

returnでwelcome.bladeを開いて今取得したdataを配列で渡す。

という一連の操作になります。

現状のwelcome.bladeにはdataを表示する場所がありませんのでwelcome.bladeに変数dataを表示します。表示方法は{{  }}の中に変数を書きます。welcome.bladeのデフォルトのCSSやHTMLは今回必要のないものも沢山ありますので大幅に書き換えます。

welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Laravel</title>

	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

	<!-- Styles -->
	<style>
		html, body {
			background-color: #fff;
			color: #636b6f;
			font-family: 'Raleway', sans-serif;
			font-weight: 100;
			height: 100vh;
			margin: 0;
		}
		.full-height {
			height: 100vh;
		}
		.flex-center {
			align-items: center;
			display: flex;
			justify-content: center;
		}
		.position-ref {
			position: relative;
		}
		.top-right {
			position: absolute;
			right: 10px;
			top: 18px;
		}
		.links > a {
			color: #636b6f;
			padding: 0 25px;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: .1rem;
			text-decoration: none;
			text-transform: uppercase;
		}
		.m-b-md {
		margin-bottom: 30px;
		}
	</style>
</head>
<body>
	<div class="flex-center position-ref full-height">
		@if (Route::has('login'))
			<div class="top-right links">
				@if (Auth::check())
					<a href="{{ url('/home') }}">Home</a>
				@else
					<a href="{{ url('/login') }}">Login</a>
				@endif
			</div>
		@endif

		<div class="content">
			{{ $data->id or '' }}
			{{ $data->title or '' }}
			{{ $data->descript or '' }}
			{{ $data->category or ''  }}
			{{ $data->comment or '' }}
			{{ $data['id'] or '' }}
			{{ $data['title'] or '' }}
			{{ $data['descript'] or '' }}
			{{ $data['category'] or '' }}
			{{ $data['comment'] or '' }}
		</div>
	</div>
</body>
</html>

ID登録のリンクは削除しました。(といってもLoginページの先にRegisterがありますが)その他HTML,CSSも書き換えたり削除したりと大幅変更です。

ただ、ポイントはコントローラーから->with(compact('data'))で渡されたものがこちら側(bladeの方)では$dataとして取得できます。それぞれの項目は、DBのカラム名で取得できます。

$data->idのようなObject形式であったり、$data['id']のような配列形式でもいいようです。存在しないプロパティや配列の要素にアクセスするとエラーが発生しますので、or ''としておくことでPHPのissetと同じように使えます。

今回は両方の形式で表示できること見るために2回同じものを表示しています。

何とか投稿した記事が表示されました。これはアドレス的に記事のID番号指定のページになりますのでおそらくトップページからのリンクという感じでしょう。なのでトップページは別に考えなくてはいけません。

ログインの事や登録(Register)、コントローラで直DBを触りに行ってるなどいろいろ突っ込みどころ満載のようですがとりあえずここは完成ということにしておきます。

rssfeed
コメント
2017年12月02日 22時23分
eifadabeqa さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月02日 22時30分
ocesuuhod さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月02日 22時37分
ioirawepo さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月02日 22時44分
osotata さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月02日 22時50分
ohimafuqexile さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月02日 22時55分
imuquwubocud さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月02日 23時03分
ulonifenep さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 01時18分
uojapinolver さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 01時35分
aoqviho さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 01時39分
aremixuva さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 01時40分
uperuyul さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 01時48分
abalixuhbezu さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 01時53分
uwaeyudupi さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 01時53分
esalaju さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 02時04分
eroloceketoh さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月08日 23時58分
acodeekui さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2017年12月09日 00時18分
urexatozeije さん
http://price-of-levitra-20mg.mobi/ - price-of-levitra-20mg.mobi.ankor <a href="http://buyventolin-online.mobi/">buyventolin-online.mobi.ankor</a> http://buylevitrageneric.mobi/
2018年01月04日 13時18分
ujodgeso さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月04日 13時22分
ayiwihenavo さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月04日 13時32分
eyihowoepad さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月04日 13時36分
esusiduyo さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月04日 14時03分
ienvuqanam さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月04日 14時17分
udoriyoq さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月04日 17時36分
ineyufeyukee さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月05日 10時22分
eluneqi さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年01月05日 10時36分
exorapurolica さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/

コメントよろしくお願いします。

お名前
コメント
関連記事

将棋の駒をCSSで表示する。

挑戦Laravel5.4 ミニブログ 記事の表示

挑戦Laravel5.4 ミニブログ 投稿機能作成

挑戦Laravel5.4 ミニブログ 下準備編からログイン

Laravel5.4 MySQLと接続その4

Laravel5.4 MySQLと接続その3

Laravel5.4 MySQLと接続その2

Laravel5.4 MySQLと接続

Laravel5.4 HelloWorld

PHPフレームワーク Laravelを使ってみる

Hyper-VのCentOSのApacheでHello World

Hyper-VのCentOSにApacheをパッケージからインストールする

横スクロール はみ出し要素検出

Linux CentOSをHyper-Vに入れてみた

set_error_handler

CSSでリボン

ボックスを左から順に並べる

ルパン三世 タイプライター風 CSS 別バージョン

グーグルカレンダーをサイトに表示する

googlemapの挿入 ホームページにグーグルマップを張り付ける(簡易版)

ホームページ作成時刻

2020東京オリンピックカウントダウン

iframeで読み込まれた際に表示されないようにする。

ルパン三世 タイプライター風 CSS

縦位置 中央 その4

縦位置 中央 その3

縦位置 中央 その2

縦位置 中央

透過したボックスの要素は透過しない

文字詰め (カーニング) Webフォント

プラグインを使わずJavaScriptで円グラフ作ってみた。

CSSでheight100%

ドロップキャップ

before疑似要素、after疑似要素

floatの解除と余白

CSSで三角

絵文字 顔文字 📱スマホで使える

絵文字 顔文字😜

ふり仮名 RUBY要素

スターウォーズ風オープニングロールをCSSで実装してみた。

cssによる縦書きその1

marquee ??

ブラウザの基本操作

背景画像の拡大縮小

CKEditorのその後2 プレビューウィンドウ

CKEditorのその後1 プレビューにCSS

required

KCFinderの画像アップロード時の最大サイズ

ヒアドキュメント

短絡演算子というものについて学んだ

CKEditorのツールバーのカスタマイズ

HTML5のひな型

HelloWorld

kcfinderのuploadDirの設定

パスを通す

JDKのインストール

0詰め

eclipseのエディタの文字サイズの変更

mailtoの覚書

基本的なSQL文

Java開発環境作成

Hyper-v エラーコード32788

閉包テーブルに挑んでみた

JavaScriptのデフォルト引数がモバイルサファリでは動かなかった

スポンサー広告