이어서 Create Task Page의 스타일링을 조금 바꿔보겠다.
px는 패딩을 양쪽, py는 위아래에 주는 것이다.
Title과 Body 입력칸을 좌우로 늘렸다.
Submit 버튼을 오른쪽으로 옮겼다.
전체를 div로 감싸주고 패딩을 양옆에 64 주었다.
Submit 버튼 연결하기
POST를 보낼 때 URI를 복수형으로 쓰고 action이 store이다.
※ 강의에는 ↓이렇게 나왔는데 라라벨 버전이 달라서 이게 맞는지 모르겠다.
실행은 잘 됨
이렇게 뜨는데,
CSRF attack을 방지하기 위해서 라라벨에서 제공하는 기능이다.
https://laravel.com/docs/7.x/csrf#csrf-introduction
CSRF Protection - Laravel - The PHP Framework For Web Artisans
laravel.com
<meta name="csrf-token" content="{{ csrf_token() }}"> 을 layout blade에 넣어주고
4째줄에 붙여넣었다.
그리고 create blade 파일 form 밑에 @csrf를 추가해준다.
그러면 Submit 버튼을 눌렀을 때
localhost:8000/tasks 페이지로 리다이렉트가 잘 된다.
데이터를 받으면 리퀘스트를 보내게 된다.
데이터에는 타이틀과 바디가 있다.
타이틀과 바디를 보내면
5행의 클래스를 여기서 사용해주면
post 리퀘스트 요청을 보낼 때 보내는 데이터에 접근할 수 있다.
(※ 이렇게 해도 된다.
https://act-think.tistory.com/122
코지코더 - 라라벨 15. 폼 Validation
Validation title 또는 body를 안 쓰고 Submit하게되면 에러가 뜬다. title과 body는 NULL이 허용되지 않는 필수 필드로 세팅했기 때문이다. (1) JavaScript로 하는 방법이 있고 (2) Server에서 하는 방법이 있..
act-think.tistory.com
)
( ※ 여기서 title은 input의 name이다. ↓
body는 textarea가 아니라 input이다.
)
이렇게 하면 이 두 개에 접근할 수 있는데,
DB에 추가를 할 때 어떻게 하냐면
task 모델(Task.php)을 사용해보겠다.
6행을 추가하고
22행을 추가한다.
( ※ 또는 이렇 6행을 추가하지 않고 이렇게 써도 된다.
)
23행에 데이터를 넣으면 된다.
이 title과 body에 넣을 것이다.
위에 써놨던 두 줄을 여기에 집어넣는다.
태스크, 태스크를 생성해줘
그런데 그 태스크에 title과 body를 넣을거야.
거기에는 이 데이터를 넣어줘.
이렇게 하면 그 데이터가 생성이 된다.
웹페이지에서 Submit을 하면
Route에서 post를 Submit한 것을 받아서
TaskController@store로 보낸다.
그리고 store에 가면 방금 받은 Request의 정보를 받아왔는데
이 Request에서 title과 body를 받아오는데
이 데이터를 이용해서 task 레코드를 생성할 건데,
이 데이터로 생성을 해달라.
이렇게 하고 이것을 변수에 담으면 (19행)
생성된 전체 레코드가 이 변수 안으로 들어간다.
그리고 모델(Task.php)에서 설정을 해줘야 한다.
title과 body에만 데이터를 채울 수 있다.
cf) 이렇게 쓰면 title에만 데이터를 채울 수 없다.
이번에는 index 페이지에서
생성된 데이터의 Task List를 출력하는 것을 해보겠다.
TaskController에서
index가
이 페이지이다.
index에서 task 테이블의 모든 정보를 다 가져와서 보내줘.
이렇게 하면 index blade에서
여기에 접근 가능하다.
'Laravel > 코지코더' 카테고리의 다른 글
코지코더 - 라라벨 13. 태스크 수정하기 (0) | 2020.06.07 |
---|---|
코지코더 - 라라벨 12. 태스크 디테일 페이지 (0) | 2020.06.06 |
코지코더 - 라라벨 10. 태스크 추가 폼 만들기 (0) | 2020.06.06 |
코지코더 - 라라벨 09. 태스크 MVC 파일 만들기 (0) | 2020.06.06 |
코지코더 - 라라벨 08. tailwindcss 설치하기 (1) | 2020.06.05 |
댓글