STUDY4U

STUDY4U

메뉴보기

라라벨 Model, Controller, View 실습

2020.04.07 10:49

Admin Views:245

 

 간단한 Model, Controller, View 프로젝트 만들기

 

프로젝트명 : sketchbook

목적 : 라라벨 MCV를 이용해서 간단한 폼을 만들어서, 내용을 DB에 입력, 출력하고, 입력한 내용을 편집할 수 기능을 연습해 본다.

 

# php artisan make:model Sketchbook -c -m

> App 폴더에 Sketchbook.php 모델 파일이 자동 생성이 된다.

> App/Http/Controllers 폴더에 SketchbookController.php 컨트롤러 파일이 자동 생성이 된다.

> database/migrations 폴더에 create_sketchbooks_table.php 마이그레이션 파일이 자동 생성이 된다.

 

create_sketchbooks_table 마이그레이션 파일을 다음과 같이 수정한후, 콘솔에서 "php artisan migrate" 하면 수정한 내용이 DB서버에 Migrated 된다.

public function up()

{

    Schema::create('sketchbooks', function (Blueprint $table) {

        $table->bigIncrements('id');

        $table->string('title');

        $table->string('author');

        $table->longText('books');

        $table->timestamps();

    });

}

 

# php artisan migrate

 

> routes/web.php 파일에 새로운 페이지(sketchbooks) 라는 라우트를 추가한다. 라우트 이름은 "sketchbook.index"로 지정하였다.

Route::get('/sketchbook','SketchbookController@index')->name('sketchbook.index');

 

# php artisan route:list

 

> App/Http/Controllers/SketchbookController.php 파일을 다음과 같이 수정한다.

public function index()

{

    return view('sketch.index');

}

[설명] 브라우저 주소창에 "localhost/sketchbook" 을 입력하면, "resources/views/sketch/index.blade.php" 파일이 로드된다.

 

> resources/views 폴더 하위에 layout.blade.php 레이아웃 파일을 다음과 같이 생성, 수정한다.

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes" />

        <title>@yield('title','브라우저제목 기본값')</title>

        <link rel="stylesheet" href="{{ mix('css/tailwind.css') }}" />

        @yield('page-styles')

    </head>

    <body>

    @include('sketch.header')

    @yield('content')

    @yield('page-scripts')

    </body>

</html>

[설명] 레이아웃에서 "@yield('이름')" 로 선언하면, view 파일에서 @section('이름') 내용 @endsection 처럼 section 구문으로 등록하면,  yield 로 선언된 영역에 내용이 출력된다.

@include('파일명') 도 yield 와 비슷하나, 파일을 출력한다. 즉, sketch 폴더에 있는 header.blade.php 파일의 내용이 출력된다.

참고로 CSS를 쉽게 사용하기 위해서 tailwindcss 를 추가로 등록하였다. 라라벨에 tailwindcss 설치 방법은 공식사이트에 자세히 설명되어 있다.

Tailwindcss 공식사이트 : https://tailwindcss.com/

 

 

> resources/views 폴더 하위에 "sketch" 라는 폴더를 생성하고, header.blade.php 파일을 생성한다. 헤더에는 메뉴가 출력된다.

<ul>

<li><a href="/">Home</a></li>

<li><a href="/sketchbook">Sketchbook</a></li>

</ul>

 

 

> resources/views/sketch 폴더 하위에 index.blade.php 파일을 생성한다.

@extends('layout')

@section('title','My SketchBook')

 

@section('page-styles')

<link rel="stylesheet" type="text/css" href="{{asset('css/styles.css')}}">

@endsection

 

@section('content')

 

<div class="container mx-auto">

<h2>내용</h2>

</div>

 

@endsection

 

@section('page-scripts')

<script src="{{asset('js/scripts.js')}}"></script>

@endsection

 

> public 폴더 하위에 'css/styles.css' 을 생성한다.  CSS 구문은 필요에 따라 차후에 추가할 계획이다.

@charset "utf-8";

 

 

> public 폴더 하위에  'js/scripts.js' 를 생성한다. 스크립트도 필요에 따라 추가하면 된다. 일단은 기본 틀만 등록하였다. ^^

(function(){

/* 사용자스크립트 */

 

})();

 

I want to
Update Delete List
List
Write
Tag