이제 투두로그 사이트의 화면을 설계할 순서입니다.

 

사이트의 메인에 연결하면 아래와 같은 메인 화면을 표시하도록 하겠습니다.

 

계정이 있는 사용자가 우측의 Login 을 클릭하면 아래와 같이 로그인할 수 있는 페이지를 표시합니다.

계정이 없는 사용자는 가입하기를 클릭하고 이름과 이메일을 입력하고 가입할 수 있습니다.

 

로그인을 완료한 사용자는 다음과 같이 화면이 변경되며 자신의 프로젝트 목록을 볼 수 있습니다.

프로젝트의 이름을 클릭하면 상세 정보를 볼수 있습니다.

프로젝트 정보 하단의 Task 목록 보기 를 누르면 해당 프로젝트에 포함된 할일 목록을 볼 수 있습니다.

할일을 클릭하면 상세 내용을 수정할 수 있는 화면이 표시되며 사용자는 할일 정보를 수정하고 반영할 수 있습니다.

 

프로젝트 별이 아닌 전체 태스크 목록은 "내 태스크"를 클릭해서 검색할 수 있습니다.

 

이제 위 화면을 구현하기 위한 작업을 시작해 봅시다.

라라벨 5.2부터는 Authentication Scaffolding 기능이 포함되어 사용자 인증 관련 뷰와 컨트롤러를 생성하고 라우팅을 등록해 주므로 이것을 사용하도록 하겠습니다.

php artisan make:auth 아티즌 명령을 실행하면 코드와 뷰가 생성됩니다.

$ php artisan make:auth 
Created View: /home/vagrant/Code/todolog.app/resources/views/auth/login.blade.php
Created View: /home/vagrant/Code/todolog.app/resources/views/auth/register.blade.php
Created View: /home/vagrant/Code/todolog.app/resources/views/auth/passwords/email.blade.php
Created View: /home/vagrant/Code/todolog.app/resources/views/auth/passwords/reset.blade.php
Created View: /home/vagrant/Code/todolog.app/resources/views/auth/emails/password.blade.php
Created View: /home/vagrant/Code/todolog.app/resources/views/layouts/app.blade.php
Created View: /home/vagrant/Code/todolog.app/resources/views/home.blade.php
Created View: /home/vagrant/Code/todolog.app/resources/views/welcome.blade.php
  
Installed HomeController.
Updated Routes File.
 
 
Authentication scaffolding generated successfully!
CODE

생성된 뷰 파일들의 용도는 다음과 같습니다.

 

  • layouts/app.blade.php - 다른 페이지에서 사용하는 레이아웃을 정의한 페이지

  • welcome.blade.php - 사이트의 웰컴 페이지
  • home.blade.php - 로그인 사용자의 대시보드 뷰
  • auth/login.blade.php - 로그인 페이지
  • auth/register.blade.php - 사용자 등록 페이지
  • auth/passwords/email.blade.php - 패스워드 재설정 확인 페이지
  • auth/passwords/reset.blade.php - 암호 재설정 프롬프트 페이지
  • auth/emails/password.blade.php - 암호 재설정 이메일

초기 화면을 확인하기 위해 브라우저를 구동하고 todolog.app 에 접속하면 아래와 같은 초기 화면이 표시되며 이를 기준으로 설계한 화면을 반영해 보겠습니다.


먼저 레이아웃을 정의한 layouts/app.blade.php 를 열어서 타이틀 항목을 봅시다.

<title>Laravel</title>
CODE

모든 뷰는 app.blade.php 를 상속받으므로 동일한 페이지 제목(Laravel)을 갖게 되므로 @yield 로 자식 페이지마다 각각의 제목을 갖도록 다음과 같이 수정합니다.

<title> @yield('title', 'Laravel')</title>
CODE

 

이제 설계한 화면에 맞게 우측의  사이드 메뉴를 수정해 보겠습니다.

메뉴는  Auth::guest() 를 사용하여 사용자의 로그인 여부에 따라서 서로 다른 메뉴를 출력하고 있습니다.

<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
    <!-- Authentication Links -->
    @if (Auth::guest())
        <li><a href="{{ url('/login') }}">로그인</a></li> <!-- 1 -->
        <li><a href="{{ url('/register') }}">가입하기</a></li> <!-- 2 -->
    @else
        @if (Auth::guest())
    <li><a href="{{ url('/login') }}">로그인</a></li>
    <li><a href="{{ url('/register') }}">가입하기</a></li>
@else
    <li><a href="{{ url('/task') }}">내 태스크</a></li>
    <li><a href="{{ url('/project') }}">내 프로젝트</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            {{ Auth::user()->name }} <span class="caret"></span>
        </a>

        <ul class="dropdown-menu" role="menu">
            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>로그아웃</a></li>
        </ul>
    </li>
@endif
    @endif
</ul>
CODE
  • 1 : 로그인은 로그인이 되지 않았을 경우에만 표시하며 로그인하면 사용자의 프로젝트 목록을 표시합니다.
  • 2:  가입하기 메뉴는 로그인 후 로그아웃으로 표시합니다.
  • 3, 4: 로그인한 사용자의 프로젝트 목록을 드롭다운 메뉴로 표시해 주기위해 컨트롤러에서 전달 받은 프로젝트의 배열로 foreach 루프를 수행합니다. 컨트롤러에서 값을 넘기지 않을 경우 Undefined variable: projects 처럼 런타임 에러가 발생하므로 안전하게 @if 로 변수의 존재 여부를 확인하는 습관을 들이는 것도 좋습니다.
  • 5:  프로젝트의 url 을 링크하고 프로젝트 이름을 표시해 줍니다.
  • 6: 로그인 했으므로 가입하기 대신 로그아웃 메뉴를 표시합니다.

 

이제 하단의 다음 항목을 봅시다.

<!-- 1 -->
@yield('content') 

<!-- 2 JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
CODE
  • 1: content 항목은 상속받은 자식 뷰에서 처리하겠다고 지시하고 있으며 자식 뷰는 @section('content') 구문을 사용하면 됩니다.
  • 2 : 사용할 자바 스크립트를 다운받을 CDN(Contents Delivery Network)의 URL을 지정합니다. 자바 스크립트를 하단에 기술하면 브라우저가 페이지 그리는 속도가 빠릅니다. 

 

이제 초기 화면에서는 전체 등록된 사용자, 프로젝트, 할일 정보를 표시할 예정이므로 이것을 처리할 컨트롤러를 만들어 보겠습니다. 컨트롤러의 이름은 WelcomeController 이며 자동 생성된 HomeController 를 사용하지 않는 이유는 HomeController 내의 메소드들은 로그인했을 경우에만 사용 가능 하므로 로그인 여부와 상관없이 보여야 하는 초기 화면에 사용할 수 없기 때문입니다.

$ php artisan make:controller WelcomeController
 
Controller created successfully.
CODE

이제 app/Http/Controllers/WelcomeController.php 를 열어서 아래와 같이 __construct() 와 index() 메소드를 구현해 줍니다.

app/Http/Controllers/WelcomeController.php

/** 
 * 세션 정보를 사용하기 위해 web 미들웨어 그룹 지정.
 *
 * @return void
 */
public function __construct() //1
{
    $this->middleware('web');
}
 
/** 
 * 사이트 웰컴 화면
 * 
 * @return \Illuminate\Http\Response 
 */
public function index()  //2
{
    // 3 사용자, 프로젝트, 태스트 수 가져오기. 아직 모델을 생성하지 않았으므로 0 으로 설정
    $uc = 0; //User::count();	
    $pc = 0; //Project::count();
    $tc = 0; //Task::count();

    $total = [ 'user' => $uc,
           'project' => $pc,
           'task' => $tc,
	];
	return view('welcome')->with('total', $total);
}
CODE
  • 1 : 로그인 여부를 확인하려면 세션을 사용해야 하므로 web 미들웨어를 지정해야 하며 routes.php 의 미들웨어 web 그룹에 라우팅을 정의하는 방법과 컨트롤러 클래스의 생성자에 미들웨어를 지정하는 2가지 방법중 후자를 사용하여 web 미들웨어를 지정합니다.

    web 미들웨어가 지정되어 있지 않으면 세션 확인을 못 하므로 우측 상단의 로그인 메뉴가 계속 표시됩니다.

  • 2 :  메소드의 주석 부분으로 phpDoc 형식으로 메소드의 이름과 파라미터, 리턴 타입을 적는 습관을 들이는 것이 좋습니다. php는 타입이 유연한 장점이 있지만 반대로 잘못된 타입을 넘겨도 실제 실행해 봐야 아는 문제가 있지만 주석에 타입을 명시하면 잘못된 사용시 IDE등에서 경고를 내주므로 실수 여지가 줄어듭니다.
  • 3 : 웰컴 화면에서 전체 사용자와 프로젝트, 태스트 수를 표시할 예정이지만 아직 데이타가 없으므로 모두 0 으로 하드 코딩하고 나중에 모델을 생성하고 주석을 풀어주면 됩니다.
  • 4 : 로그인 후 보여줄 사용자의 프로젝트 정보로 일단은 하드 코딩합니다.
  • 5: 뷰에 with() 메소드로 표시할 정보를 넘겨 줍니다. 

 

이제 app/Http/routes.php 를 열어서 라우팅을 수정해 봅시다.

<?php
Route::get('/', 'WelcomeController@index');  //1

Route::group(['middleware' => ['web']], function () {  //2
    //
});

// 추가된 라우팅
Route::group(['middleware' => 'web'], function () { //3
    Route::auth();
    Route::get('/home', 'HomeController@index');
});
CODE
  • 1 : 클로저로 바로 뷰를 호출하는 view('welcome)' 코드를  웰컴 컨트롤러의 index() 메소드가 처리하도록 라우팅을 수정합니다.
  • 2:   3번 항목의 라우팅과 중복되므로 혼란이 없도록 2번 항목의 라우트 그룹을 삭제합니다.
  • 3 :  artisan make:auth 명령으로 추가된 라우팅 항목으로 Route::auth() 메소드는 다음과 같은 로그인/사용자 등록/암호 재설정을 위한 라우팅을 래핑한 헬퍼 메소드입니다.

    // Authentication Routes...
    $this->get('login', 'Auth\AuthController@showLoginForm');
    $this->post('login', 'Auth\AuthController@login');
    $this->get('logout', 'Auth\AuthController@logout');
    
    // Registration Routes...
    $this->get('register', 'Auth\AuthController@showRegistrationForm');
    $this->post('register', 'Auth\AuthController@register');
    
    // Password Reset Routes...
    $this->get('password/reset/{token?}', 'Auth\PasswordController@showResetForm');
    $this->post('password/email', 'Auth\PasswordController@sendResetLinkEmail');
    $this->post('password/reset', 'Auth\PasswordController@reset');
    CODE

이제  사이트에 연결하면 보여주는 웰컴 페이지(resources/views/welcome.blade.php)를 수정하여 전체 등록된 사용자, 프로젝트, 할일 수를 표시하도록 만들어 보겠습니다. 

resources/views/welcome.blade.php

@extends('layouts.app')

{{-- 1 --}}
@section('title')
    웰컴 페이지
@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">라라벨 Todo 사이트</div> {{-- 2 --}}

                <div class="panel-body">
                    <div class="container">
                            총 가입자 수 : {{ $total['user'] }}</p> {{-- 3 --}}
                            프로젝트  수 : {{ $total['project'] }}</p>
                            Task     수 : {{ $total['task'] }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
CODE
  • 1 : app.blade.php 에서 타이틀 부분을 @yield 로 정의했으므로 자식마다 브라우저에 표시되는 페이지의 제목을 가질 수 있으므로 현재 페이지의 제목을 설정합니다.
  • 2 : 페이지의 컨텐츠 헤딩을 설정하는 부분입니다.
  • 3 : 컨트롤러에서 넘겨 받은 데이타를 블레이드 템플릿 문법을 사용하여 출력합니다.

 

 make:auth로 자동 생성된 HomeController  는 수정하지는 않지만 구조를 분석해 보겠습니다.

 
/**
 * Create a new controller instance.
 *
 * @return void
 */
public function __construct()  // 1
{
    $this->middleware('auth');
}

/**
 * Show the application dashboard.
 *
 * @return \Illuminate\Http\Response
 */
public function index()  //2
{
    return view('home');
}
CODE
  • 1: 컨트롤러의 생성자로 auth 미들웨어를 설정하고 있으므로  현재 컨트롤러의 메소드는 로그인을 해야 사용이 가능한 것을 알 수 있습니다.
  • 2 : 로그인 되었을 경우 index() 메소드는 home 뷰로 연결을 하게 됩니다.

이제 resources/views/home.blade.php 를 열어서 panel_body 부분을 아래와 같이 세션에 message가 있을 경우 출력하도록 수정합니다.  

<div class="panel-body">
    @if(Session::has('message'))
        <div class="alert alert-danger">
            {{Session::get('message')}}
        </div>
    @else
        You are logged in!
    @endif
</div>
CODE

 

이제 초기 설정이 끝났으므로 브라우저에서 http://todolog.app/ 에 연결하면 정상적으로 메인 페이지가 표시되는 것을 볼 수 있습니다.