laravel 로 배우는 서버사이드 #5

Laravel�로�배우는�서버사이드�#5게시판�만들어보기

ABCD,�SNOWKIWI�/�한성일

1. 어플리케이션 구조

게시판

HTML 파일들

파일 구조

-�add.blade.php�-�edit.blade.php�-�list.blade.php�-�login.blade.php�-�view.blade.php

-�default.blade.php

resources/views/board/contents/

resources/views/board/layout/

public/css/

-�abcd.css

-�BoardContents.php�-�BoardUser.php

app/

-�BoardController.php

app/Http/Controllers/

2. VIEW 설정

부트스트랩

http://getbootstrap.com/

http://getbootstrap.com/

CSS 등록

public/css/abcd.css css 폴더를 만들고 abcd.css 생성

/*�Common�*/�.vertical-align�{��display:�flex;��align-items:�center;��flex-direction:�row;�}�

.content�{��position:�relative;��padding:�15px;��margin:�0�-15px�15px;��border-color:�#e5e5e5�#eee�#eee;��border-style:�solid;��border-width:�1px�1px;��-webkit-box-shadow:�inset�0�3px�6px�rgba(0,0,0,.05);��box-shadow:�none;�}�

/*�Login�Form�*/�.form-signin�{��max-width:�330px;��padding:�15px;��margin:�0�auto;�}�

.form-signin�input[type="email"]�{��margin-bottom:�-1px;��border-bottom-right-radius:�0;��border-bottom-left-radius:�0;�}�.form-signin�input[type="password"]�{��margin-bottom:�10px;��border-top-left-radius:�0;��border-top-right-radius:�0;�}

View 구조

-�add.blade.php�-�edit.blade.php�-�list.blade.php�-�login.blade.php�-�view.blade.php

-�default.blade.php

resources/views/board/contents/

resources/views/board/layout/

Default Layout

resources/views/board/layout/default.blade.php

<!DOCTYPE�html>�<html�lang="ko">�<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>�@yield('title')�</title>�

��<link�href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"�rel="stylesheet">��<link�href="css/abcd.css"�rel="stylesheet">�

��<script�src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>��<script�src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>�</head>�

<body�class="container">�

@yield('content')�

</body>�</html>

등록 컨텐츠resources/views/board/contents/add.blade.php

@extends('board.layout.default')�@section('title')��등록�@stop�@section('content')��<div�class="page-header">��<h1>ABCD�<small>ABout�CoDing</small></h1>��</div>��<form�action="/add"�id="addForm"�method="post"�>��<div�class="form-group">��<input�type="text"�name="title"�class="form-control"�placeholder="제목을�입력하세요."�required�autofocus>��</div>��<div�class="form-group">��<textarea�name="contents"�class="form-control"�rows="5"�required></textarea>��</div>��<input�type="hidden"�name="_token"�value="{{�csrf_token()�}}">�

��<div�class="vertical-align">��<div�class="col-md-11�text-right">��<button�class="btn�btn-primary"�type="submit">등록</button>��</div>��<div�class="col-md-1�text-left�">��<button�class="btn�btn-default"�id="listBtn"�type="button">��목록��</button>��</div>��</div>��</form>��<script>��$(document).ready(function(){��$("#listBtn").click(function(){��location.href�=�"/list";��});��});��</script>�@stop

수정 컨텐츠

resources/views/board/contents/edit.blade.php

@extends('board.layout.default')�@section('title')��수정�@stop�@section('content')��<div�class="page-header">��<h1>ABCD�<small>ABout�CoDing</small></h1>��</div>��<form�action="/edit"�id="editForm"�method="post"�>��<div�class="form-group">��<input�type="text"�name="title"�class="form-control"��

placeholder="제목을�입력하세요."�value="{{$contents->title}}"�required�autofocus>��</div>��<div�class="form-group">��<textarea�name="contents"�class="form-control"�rows=“5"�required>{{$contents->contents}}</textarea>��</div>��<input�type="hidden"�name="pageid"�value="{{�$pageid�}}">��<input�type="hidden"�name="_token"�value="{{�csrf_token()�}}">��<div�class="vertical-align">��<div�class="col-md-11�text-right">��<button�class="btn�btn-primary"�type="submit">수정</button>��</div>�

��<div�class="col-md-1�text-left�">��<button�class="btn�btn-default"�id="listBtn"�type="button">��목록��</button>��</div>��</div>��</form>��<script>��$(document).ready(function(){��$("#listBtn").click(function(){��location.href�=�"/list";��});��});��</script>�@stop

소스 설명

@extends('board.layout.default')�@section('title')��수정�@stop�@section(‘content')�~�

@stop

default.blade.php 에 지정된 영역

<input�type="hidden"�name="_token"�value="{{�csrf_token()�}}">

POST 전달에 사용되는 토큰 Post form 에 히든으로 위치 없으면 서버전송시 에러 발생

목록 컨텐츠 1resources/views/board/contents/list.blade.php

@extends('board.layout.default')�@section('title')��목록�@stop�@section('content')��<div�class="page-header">��<h1>ABCD�<small>ABout�CoDing</small></h1>��</div>�

��<div�class="panel�panel-default">����<table�class="table">��<thead>��<tr>��<th�class="col-md-1">#</th>��<th�class="col-md-6">제목</th>��<th�class="col-md-2">작성자</th>��<th�class="col-md-2">작성일</th>��<th�class="col-md-1">조회수</th>��</tr>��</thead>��<tbody>��@foreach�($contents�as�$item)��<tr>��<th�scope="row">{{�$item->id�}}</th>��<td><a�href="/view?pageid={{�$item->id�}}">{{�$item->title�}}</a></td>��<td>{{�$item->reg_user_name�}}</td>��<td>{{�$item->created_at�}}</td>��<td>{{�$item->view_count�}}</td>��</tr>��@endforeach��</tbody>��</table>��</div>

목록 컨텐츠 2��<div�class="vertical-align">��<div�class="col-md-8">��<?php�echo�$contents->render();�?>��</div>�

��<div�class="col-md-3�text-right�">��@if�(Session::has('login'))��<button�type="button"�id="addFormBtn"�class="btn�btn-default�btn-primary">등록</button>��@endif��</div>��<div�class="col-md-1�btn-group�text-right">��@if�(Session::has('login'))��<button�class="btn�btn-default"�id="logoutBtn"�type="button">��로그아웃��</button>��@else��<button�class="btn�btn-default"�id="loginFormBtn"�type="button">��로그인��</button>��@endif��</div>��</div>��<script>��$(document).ready(function(){��$("#addFormBtn").click(function(){��location.href�=�"/add-form";��});�

��$("#loginFormBtn").click(function(){��location.href�=�"/login-form";��});�

��$("#logoutBtn").click(function(){��location.href�=�"/logout";��});��});��</script>�@stop

소스설명

@if�(Session::has(‘login'))�//�실행될�문장�

@endif

세션이 있을때만 실행

�<?php�echo�$contents->render();�?>

페이지네이션 생성

로그인 컨텐츠

resources/views/board/contents/login.blade.php

@extends('board.layout.default')�@section('title')��로그인�@stop�@section('content')��<div>��<form�class="form-signin"�action="login"�method="post">��<h2>ABCD�로그인</h2>��<input�type="email"�name="email"�class="form-control"��

placeholder="이메일"�required�autofocus>��<input�type="password"�name="password"�class="form-control"��

placeholder="비밀번호"�required>��<button�class="btn�btn-lg�btn-primary�btn-block"�type="submit">로그인</button>��<input�type="hidden"�name="_token"�value="{{�csrf_token()�}}">��</form>��</div>�@stop

게시물 보기 컨텐츠 1resources/views/board/contents/view.blade.php

@extends('board.layout.default')�@section('title')��{{$contents->title}}�@stop�@section('content')��<div�class="page-header">��<h1>ABCD�<small>ABout�CoDing</small></h1>��</div>�

��<div�class="row�vertical-align">��<div�class="col-md-8">��<h4>{{$contents->title}}</h4>��</div>��<div�class="col-md-4�text-right">��<p>작성자�:�{{$contents->reg_user_name}}�작성일�:�{{$contents->created_at}}</p>��</div>��</div>��<div�class="content">��{{$contents->contents}}��</div>�

��<div�class="vertical-align">��<div�class="col-md-8"></div>��<div�class="col-md-3�text-right�">��<div�class="btn-group"�role="group">��@if�(Session::has('login'))��<button�type="button"�id="editFormBtn"�class="btn�btn-default">수정</button>��<button�type="button"�id="delBtn"�class="btn�btn-default">삭제</button>��@endif��<button�type="button"�id="listBtn"�class="btn�btn-default">목록</button>��</div>��</div>

게시물 보기 컨텐츠 1��<div�class="col-md-1�btn-group�text-right">��@if�(Session::has('login'))��<button�class="btn�btn-default"�id="logoutBtn"�type="button">��로그아웃��</button>��@else��<button�class="btn�btn-default"�id="loginFormBtn"�type="button">��로그인��</button>��@endif��</div>��</div>��<script>��$(document).ready(function(){��$("#editFormBtn").click(function(){��location.href�=�"/edit-form?pageid={{$pageid}}";��});��$("#delBtn").click(function(){��location.href�=�"/delete?pageid={{$pageid}}";��});��$("#listBtn").click(function(){��location.href�=�"/list";��});��$("#loginFormBtn").click(function(){��location.href�=�"/login-form";��});��$("#logoutBtn").click(function(){��location.href�=�"/logout";��});��});��</script>�@stop

3. DB설정

acbd 커넥션에 연결

#4 참조

USE abcd_db;

기본 스키마 생성

CREATE�TABLE�users�(��id�INT�NOT�NULL�AUTO_INCREMENT,��email�VARCHAR(45)�NULL,��password�VARCHAR(45)�NULL,��name�VARCHAR(45)�NULL,��PRIMARY�KEY�(id))�ENGINE�=�InnoDB;

CREATE�TABLE�contents�(��id�INT�UNSIGNED�NOT�NULL�AUTO_INCREMENT,��title�VARCHAR(45)�NULL,��contents�TEXT�NULL,��reg_user_id�INT�NOT�NULL,��reg_user_name�VARCHAR(45)�NULL,��view_count�INT�NULL�DEFAULT�0,��updated_at�TIMESTAMP�NULL,��created_at�TIMESTAMP�NULL,��PRIMARY�KEY�(id),��INDEX�fk_contents_users_idx�(reg_user_id�ASC),��CONSTRAINT�fk_contents_users��FOREIGN�KEY�(reg_user_id)��REFERENCES�abcd_db.users�(id)��ON�DELETE�CASCADE��ON�UPDATE�CASCADE)�ENGINE�=�InnoDB;

회원 정보 입력

insert into users (email, password, name) values ( '[email protected]', password('1234'), 'test user');

insert into users (email, password, name) values ( ‘[email protected]’, password('1234'), ‘Jamie Han');

기본 회원 생성확인

SELECT * FROM users;

4. Model 설정

모델 생성

콘솔 홈 디렉토리로 이동1

cd�~/Documents/laravel-space/abcd

cd�C:\laravel-space\abcd

2php�artisan�make:model�BoardUser�php�artisan�make:model�BoardContents

app/BoardContents.php�app/BoardUser.php3 파일 생성 확인

BoardUser 모델

app/BoardUser.php

<?php�

namespace�App;�

use�Illuminate\Database\Eloquent\Model;�

class�BoardUser�extends�Model�{��protected�$table�=�'users';��protected�$fillable�=�['id',�'email',�'password',�'name'];��protected�$hidden�=�['password'];�}�

BoardContents 모델

app/BoardContents.php

<?php�

namespace�App;�

use�Illuminate\Database\Eloquent\Model;�

class�BoardContents�extends�Model�{��protected�$table�=�'contents';��protected�$fillable�=�['id',�'title',�'reg_user_id',�'reg_user_name',�'view_count',�'updated_at',�'created_at'�];��protected�$hidden�=�[];�}

5. Route 설정

routes.php

/* Board */ Route::get('/login-form', 'BoardController@loginForm'); Route::post('/login', 'BoardController@login'); Route::get('/logout', 'BoardController@logout'); Route::get('/add-form', 'BoardController@addForm'); Route::post('/add', 'BoardController@add'); Route::get('/edit-form', 'BoardController@editForm'); Route::post('/edit', 'BoardController@edit'); Route::get('/delete', 'BoardController@delete'); Route::get('/list', 'BoardController@listView'); Route::get('/view', 'BoardController@view');

app/Http/routes.php

6. 컨트롤러 설정

컨트롤러 생성

콘솔 홈 디렉토리로 이동1

cd�~/Documents/laravel-space/abcd

cd�C:\laravel-space\abcd

2

3

파일 생성 확인

php artisan make:controller BoardController

app/Http/Controllers/BoardController.php

코딩 위치

app/Http/Controllers/BoardController.php

class�BoardController�extends�Controller�{�

기본�생성�함수�삭제후�코딩�

}

use App\BoardContents; use App\BoardUser;

다음라인 추가

로그인

��public�function�loginForm()�{��return�view('board.contents.login');��}�

��public�function�login(Request�$request)�{��$email�=�$request->input('email');��$password�=�$request->input('password');�

��$user�=�BoardUser::whereRaw('email�=�?�and�password�=�password(?)',�[$email,�$password]�);�

��if�(�$user->count()�>�0�)�{�//�로그인�성공��$request->session()->put('login',�true);��$request->session()->put('user_id',�$user->get()[0]->id);��$request->session()->put('user_name',�$user->get()[0]->name);��return�redirect('/list');��}�else�{��//�로그인�실패��return�redirect('/login-form');��}��}

로그인 실행

http://localhost/login-form


게시물 등록

��public�function�addForm()�{��return�view('board.contents.add');��}�

��public�function�add(Request�$request)�{��$title�=�$request->input('title');��$contents�=�$request->input('contents');�

��$boardContents�=�new�BoardContents();��$boardContents->title�=�$title;��$boardContents->contents�=�$contents;��$boardContents->reg_user_id�=�$request->session()->get('user_id');��$boardContents->reg_user_name�=�$request->session()->get('user_name');��$boardContents->save();�

��return�redirect('/list');��}

게시물 등록

http://localhost/add-form


게시물 목록

��public�function�listView()�{��//�페이지네이션�사용��$contents�=�BoardContents::orderBy('id',�'desc')->paginate(5);��$contents->setPath('/list');��return�view('board.contents.list')->with('contents',�$contents);��}

게시물 목록

/add

http://localhost/list


게시물 수정

��public�function�editForm(Request�$request)�{��$pageid�=�$request->input('pageid');��$boardContents�=�BoardContents::find($pageid);��return�view('board.contents.edit')->with('contents',�$boardContents)�

->with('pageid',�$pageid);��}�

��public�function�edit(Request�$request)�{��$pageid�=�$request->input('pageid');��$title�=�$request->input('title');��$contents�=�$request->input('contents');�

��$boardContents�=�BoardContents::find($pageid);��$boardContents->title�=�$title;��$boardContents->contents�=�$contents;��$boardContents->save();�

��return�redirect('/view?pageid='.$pageid);��}

게시물 수정



게시물 삭제

��public�function�delete(Request�$request)�{��$pageid�=�$request->input('pageid');��$boardContents�=�BoardContents::whereRaw('id�=�?',�[$pageid]);��$boardContents->delete();��return�redirect('/list');��}

게시물 삭제



로그아웃

��public�function�logout(Request�$request)�{��$request->session()->flush();��return�redirect('/list');��}

로그아웃 실행



게시물 보기

��public�function�view(Request�$request)�{��$pageid�=�$request->input('pageid');��BoardContents::whereRaw('id�=�?',�[$pageid])->increment('view_count');��$contents�=�BoardContents::find($pageid);��return�view(‘board.contents.view')->�

with('contents',�$contents)->with('pageid',�$pageid);��}

게시물 보기 실행

http://localhost/view


Viewhttp://localhost/login-form

http://localhost/add-form http://localhost/edit-form

/add





http://localhost/edit-form



게시판 소스는 꼭 한번 해보시고 수정해보세요. 그러면 라라벨 웹개발 프로세스를 이해하시는데 큰도움이 될거라 생각합니다.

이번 과정이 모두 끝났습니다. 그동안 정말 수고하셨습니다. :)

궁금하신 부분은 슬렉으로 문의 주세요. http://abcds.kr/wp-login.php?action=slack-invitation

https://abcds.slack.com

http://abcds.kr/wp-login.php?action=slack-invitation

https://abcds.slack.com

정말!! 수고하셨습니다. :)

http://abcds.kr/

http://abcds.kr/

laravel 로 배우는 서버사이드 #5

Software