Laravel学習メモ
biladeファイルに書くタグはタグごとにgetかpostか決まっている。
下の様なリンクタグはgetになるので
< a href=""{{ action(CommentContoroller@delete, [id => $comment->id])}}>削除</a>
この様なリンクタグはgetになるのでrutesのweb.phpには、
Rutes::get(~~で指定してあげないと上手く動かない。
ニュースブログの作成
本日はニュースブログの作成で読んだユーザーが自由にコメントできる機能を実装しました。
指定の場所にコメントを入力するスペースを作るまではすぐできたのですが、入力したデータを保存させるのに手こずりました。その際に学んだことを書いていきます。
<form>タグはモデルにデータを飛ばす際に使うタグですが、飛ばしたい部分だけ囲めば大丈夫だと言うこと。
<form>タグの中では保存したいデータのnameと作ったテーブルのnameを合わせること。今回の場合は
<input type="hidden" name="news_id" value="{{$headline->id}}">
と書き、news_idのところがそれにあたりテーブルのところにも同じものがある。
またvalueのところには値が入り、今回の場合ユーザーが打ち込んだコメントのデータがそれにあたる。
最後に</form>で閉じる直前に{{ csrf_field() }} を入れて置かないとエラーになることがある。
ニュースブログの作成について
本日はニュースブログの作成を行なっていて、記事にTwitterと連動する機能をつけた。作業としてはとても簡単だったのだが、この機能を付けたいページがどのファイルに当たるのかを特定するのに時間がかかってしまった。
付けたいページのURLからルートのweb.php→対応したControllerのアクション→そのアクションがどのページを指しているかを辿っていたら特定できた。
特定したらページの機能を入れたい部分に以下の記述を入れると連動するボタンが作ることが出来る。
<div class="twitter">
<a href="//twitter.com/share" class="twitter-share-button" data-text=<"!-- ここにTweetした時にデフォルトで入れておきたい文字列を入れる -->" data-url="<!-- ここにTweetした時に入れたいURLを入れる -->" data-lang="ja<!-- 日本語の場合 -->">
</a>
</div>
基本的なCSS
よく使う基本的なCSSをまとめてみた。
【width height】
これは要素の高さと幅を指定することができる。
<div class="box">
</div>
.box {
background-color: black;
width: 100px;
heoght: 300px;
}
【margin】
これは要素間の余白の調整の際に使用する。
<div class="box1">
</div>
<div class="box2">
</div>
.box1 {
background-color: silver;
width: 300px;
height: 300px;
margin-bottom: 30px;
}
.box2 {
background-color: red;
width: 300px;
height: 300px;
}
【padding】
これは要素内の余白の調整の際に使用する。
<button>
hello
</button>
button {
background-color: bule;
padding: 100px 300px;
}
【border】
これは上で書いたmarginとpaddingの間にある境界線のこと。要素の外枠みたいな。
<button>
hello
</button>
button {
background-color: blue;
padding: 100px 300px;
border: 2px solid red;
}
【border-redius】
これは上で書いたborderの形状を変更できる。
button {
background-color: blue:
padding: 100px 300px;
border: 2px solid red;
border-radius: 30px;
}
【font-size】
これはそのままで文字の大きさを指定する。
<p>
hello
</p>
p {
font-size: 200px;
}
【font-weight】
これは文字の太さを指定する。
p {
font-size: 200px;
font-weiht: bold;
}
【font-style】
これは文字の種類を指定する。
p {
font-size: 200px;
font-weight: bold;
font-style: italic;
}
【background】
これは上で何回か出てきているが、要素の背景の色を指定できる。
<button>
hello
</button>
button {
background-color: blue;
padding: 100px 300px;
}
【display】
これはdisplay: block;とdisplay: inkine-block;があり前者は要素を縦並びに、後者は要素を横並びにする際に使用する。
<span>
hello
</span>
<span>
hello
</span>
<span>
hello
</span>
span {
display: block;
font-size: 30px;
}
（spanは元々はインライン要素）
ニュースブログの作成
テキストにそってニュースブログの作成を行なっていて理解度が深まった点。
Laraver mixはそのプロジェクトごとに環境構築をする必要がある、という事。
最初は別のプロジェクトで環境構築を行なっていたので行わなくてもいいと思ったが、npmコマンドを使おうとしたところエラーになったので、再度環境構築を行う事で解消できた。
本日の教訓
コードを書いている際にコメントを残す癖をつけること。
変数の中身だとか忘れそうなことは全て書き込みながら作っていくこと！
