박주니 개발 정리

라라벨 CRUD 정리 본문

라라벨

라라벨 CRUD 정리

박주니 2022. 3. 18. 18:09
728x90
반응형

CRUD에 들어가기 앞서서 Model과 Controller를 미리 셋팅해주시길 바랍니다.

  1. model 및 controller 새로 만듭니다. php artisan make:model board -mc
  2. App\database\migrations\create_boards_table.php에 들어가셔서 테이블 구성을 만듭니다.
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBoardsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('boards', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->integer('user_id')->unsigned();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('boards');
    }
}
  • 참고할 부분▶ Schema::create를 할 때 user_id 테이블을 만들어야 하는 이유는 상세 페이지 이동할 때 그 user_id에 따라서 해당 데이터를 가져올 것이기 때문입니다. 지금 이 페이지에서는 구체적이게 설명하지 않겠지만 추가하실 때 해당 user에 id를 board DB 'user_id'에 추가하시면 됩니다. 

  3. php artisan migrate를 진행해서 DB에 board를 생성합니다.

  4. App\Models\Board 로 들어가서 $fillable에 DB 구성을 넣습니다.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Board extends Model
{
    use HasFactory;
    protected $fillable = [
        'title',
        'user_id'
    ];
}

●Read 

  1. resource\views 에서 users 폴더를 새로 만들고 read, create, update, delete 구분해서 테스트할 페이지를 만듭니다. 저는 index.blade.php에서 create+read를 동시 진행할 것이기 때문에 index, update, delete로 만들었습니다. 

2. index, update, delete를 간단하게 폼을 구성합니다. 

  • index.blade.php(read + create)
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">board</div>
                    <div>
                        <h2>title</h2>
                        <div>
                            view data
                        </div>
                    </div>
                    <form>
                        @csrf
                        <h2>title</h2>
                        <input type="text" name="title">
                        <button type="submit">create</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
  • update.blade.php(read + update)
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">update board</div>
                    <div>
                        <h2>title</h2>
                        <div>
                            view data
                        </div>
                    </div>
                    <form>
                        @csrf
                        <h2>title</h2>
                        <input type="text" name="title">
                        <button type="submit">update</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
  • delete.blade.php(delete)
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">delete board</div>
                    <form>
                        @csrf
                        <button type="submit">delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

3. web.php에서 index, update, delete 프론트를 연결할 루트를 만듭니다.

Route::get('/board', [App\Http\Controllers\BoardController::class, 'index'])->name('users.index');
Route::get('/board/update/{user}', [App\Http\Controllers\BoardController::class, 'show'])->name('users.update');
Route::get('/board/delete/{user}', [App\Http\Controllers\BoardController::class, 'deleteView'])->name('users.delete');
  • 참고할 부분▶ 우선 지금 하는 방식은 임의로 만드는 것이기 때문에 나은 코드는 resource 및 group, prefix 사용하는 것은 추후에 진행할 예정입니다. 현재 이동하는 방식에 대해서 이해가 되지 않는다면 제가 pagination 설명하는 부분에서 이동 경로 부분을 자세히 다룬 부분이 있으니 따라서 하시면 이해가 되실 것입니다.

4. BoardController에서 web.php에서 지정한 class를 미리 만들어놓습니다.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BoardController extends Controller
{
    public function index(){

    }

    public function show(){

    }

    public function deleteView(){
        
    }
}
  • 참고할 부분▶ 우선 update 및 delete는 상세 페이지로 이동해서 다뤄야하기 때문에 단순하게 index부터 view 보이는 것을 진행하겠습니다. 

5. public function index()에 return view를 해서 users.index가 보이게 합니다.

    public function index(){
        return view('users.index');
    }

6. Create 순서부터 먼저 진행해주시길 바랍니다. 왜냐하면 data가 있어서 그것을 read해서 보이게 할 수 있기 때문입니다. 

7. BoardController index class에서 Board data를 전체 가지고 와서 compact()로 해당 경로에 데이터를 보내줍니다.

    public function index(){
        $boards = Board::all();
        return view('users.index', compact('boards'));
    }

8. views\users\index.blade.php로 돌아가서 @foreach를 통해 배열로 되어있는 data를 각각 빼내서 read한 후 보이게 합니다.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">board</div>
                    <div>
                        <h2>title</h2>
                        <div>
                            @foreach ($boards as $board)
                                {{ $board->title }}
                            @endforeach
                        </div>
                    </div>
                    <form action= {{ route('board.create') }} method="POST">
                        @csrf
                        <h2>user_id</h2>
                        <input type="number" name="user_id">
                        <h2>title</h2>
                        <input type="text" name="title">
                        <button type="submit">create</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

※참고사항▶ 우선 저는 data를 all로 해서 전체 가져오기를 했지만 한번 paginate()를 이용해서 응용해서 가져오시는 방법을 추천합니다.


●Create

  1. index.blade.php에서 초반에 셋팅한 form에 method POST로 하고 web.php에 controller 에서 create class로 갈 수 있게 셋팅을 합니다.
                        <form action= {{ route('board.create') }} method="POST">
                            @csrf
                            <h2>user_id</h2>
                            <input type="number" name="user_id">
                            <h2>title</h2>
                            <input type="text" name="title">
                            <button type="submit">create</button>
                        </form>
  2.  web.php에서 form 태그에서 board.create를 요청했을 때 contorller create 클래스로 갈 수 있게 설정합니다.
    Route::post('/board', [App\Http\Controllers\BoardController::class, 'create'])->name('board.create');
  3.  BoardController에서 create class를 만들어서 Board Model을 연결하고 input에서 전달한 값을 request로 받았기 때문에 그 값을 테이블 형식에 맞춰서 create를 합니다.
    <?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    use App\Models\Board;
    
    class BoardController extends Controller
    {
        public function index(){
            return view('users.index');
        }
    
        public function show(){
    
        }
    
        public function deleteView(){
    
        }
    
        public function create(Request $request){
            Board::create([
                'title' => $request->title,
                'user_id' => $request->user_id
            ]);
            return redirect()->back();
        }
    }
     

 

      ①use App\Models\Board; 이 Board Model을 연결해서 그 Board를 가지고와 create를 하면 해당 model에 데이         터를 추가할 수 있습니다.

      ②$request 는 input에서 전달한 값이기 때문에 저는 request 안에 title 및 user_id를 담아서 보냈기 때문에 그것          을 해당 table에 따라 구분해서 넣으면 됩니다. 


●Update (상세페이지 활용 및 update 기능)

  1. 먼저 Create를 진행하시고 update를 진행하시길 바랍니다. 데이터가 있어서 해당 데이터를 변경할 수 있습니다. 
  2. update할 때는 보통 상세페이지에서 이뤄어지기 때문에 경로를 /board/update/{user} 로 보냅니다. 그럼 controller show class에는 queryString으로 보낸 $user을 가지고 오면 아까 설정해둔 views\users\update.blade.php가 보이게 합니다.
        public function show($user){
            return view('users.update');
        }
     
  3.  
  4.  이제 상세페이지를 이용하기에 앞서서 Models\Board에서 belongsTo를 통해 user에 id와 board에 user_id를 join할 수 있게 준비합니다. 
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Board extends Model
{
    use HasFactory;
    protected $fillable = [
        'title',
        'user_id'
    ];
    public function user()
    {
        return $this->belongsTo(User::class, 'user_id');
    }
}

   4. 우선 이해하기 쉽게 BoardController 에서 queryString으로 받은 $user을 가지고 User data와 $user을 user_id         로 찾아서 가져온 Board data를 compact해서 프론트로 보냅니다.

    public function show($user){
        $user_select = User::find($user);
        $board = Board::where('user_id', $user)->first();
        return view('users.update', compact('user_select', 'board'));
    }

      참고할 부분▶ $user_select는 find() 안에 값을 넣게 되면 기본적으로 id를 인식해서 값을 가지고 오게 됩니다.          $board는 user_id를 user의 id 와 동일한 값을 찾아서 첫번째 인자를 가지고 옵니다. 나중에 상세 데이터를 가져오        실 때 응용하시면 됩니다. 그리고 compact('user_select', 'board') 는 아까 $user_select, $board 값을 담아서 프론        트에 보내주겠다는 의미입니다.

    

   5. 다시 update.blade.php로 돌아와서 user data에서는 email을 가지고 오고 board data에서는 title을 가지고 올         수 있게 셋팅합니다.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">update board</div>
                    <div>
                        <h2>title</h2>
                        <div>
                            <h2>email</h2>
                            {{ $user_select->email }}
                            <h2>title</h2>
                            {{ $board->title }}
                        </div>
                    </div>
                    <form>
                        @csrf
                        <h2>title</h2>
                        <input type="text" name="title">
                        <button type="submit">update</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

      참고할 부분▶ 현재 보이는이지는 한 유저에 다한 정보와 그 유저가 작성한 title을 보게 되는 것입니다. 

     

    6. form태그에서 update를 할 경우 action은 '/board/update/{{$board->id}}'로 해서 현재 변경하고자 하는 유저          id 를 queryString으로 지정하고 그 유저가 적은 title을 변경할 수 있게 설정합니다.

                    <form action='/board/update/{{ $board->id }}' method="POST">
                        @method('PUT')
                        @csrf
                        <h2>title</h2>
                        <input type="text" name="title">
                        <button type="submit">update</button>
                    </form>

       참고할 부분▶update를 할경우에는 method를 post가 아닌 put으로 해야합니다. 왜냐하면 다중으로 변화시키         는 것은 post이지만 일부만 변경하는 것은 put 이기 때문입니다. 그런데 form태그 method는 get 또는 post밖에         되지 않기 때문에 @method('PUT')으로 해서 method를 PUT으로 지정합니다. 

   

   7. web.php에서 form태그에서 요청한 경로를 통해 contorller update class 갈 수 있게 설정합니다.

Route::put('/board/update/{board}', [App\Http\Controllers\BoardController::class, 'update']);

 

    8. BoardController update class에서 $request와 queryString으로 받은 $board를 통해서 Board DB id가 $boar           d일 때 $request 안에 들어있는 title로 변경될 수 있게 설정합니다. 그럼 프론트에서 확인했을 때 input에 적은           내용이 수정되어 프론트에서 변경된 내용을 볼 수 있을 것입니다.

    public function update(Request $request, $board){
        $board_detail = Board::find($board);
        $board_detail->title = $request->title;
        $board_detail->save();
        return redirect()->back();
    }

      ①Board::find($board); Board DB의 id=$board로 가져오겠다는 의미입니다.

      ②$board_detail->title = $request->title; id가 $board인 Board data title table에 있는 value를 $request 즉                  input 으로 전달한 title과 동일하게 하겠다는 의미입니다.

      ③$board_detail->save(); ①+② 조건을 부합하다면 그 내용으로 저장을 하겠다는 의미입니다. 


●Delete (상세페이지 활용한 delete 기능)

  1.  우선 delete 프론트로 이동하는 방법은 update view 설정했던 것과 동일하게 맞춰주시면 됩니다.
  2.  저는 queryString에 해당되는 User data를 제거할 것이기 때문에 먼저 detailView class에서 queryString에 해당되는 user data를 compact에서 프론트에 내보내줍니다.
        public function deleteView($user){
            $user_select = User::find($user);
            return view('users.delete', compact('user_select'));
        }
  3.  delete.blade.php로 돌아와서 form태그 method를 POST로 하고 action 경로는 web.php에서 delete기능을 하는 controller 경로로 요청합니다. queryString은 보내진 user data의 id로 보냅니다.
    @extends('layouts.app')
    
    @section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">delete board</div>
                        <form action='/board/delete/{{ $user_select->id }}' method="POST">
                            @csrf
                            <button type="submit">delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
  4.  web.php에서 form태그에 요청한 경로가 controller에서 delete class로 갈 수 있게 설정합니다.
    Route::post('/board/delete/{user}', [App\Http\Controllers\BoardController::class, 'delete']);
  5. BoardController에서 delete class을 만들고 queryString으로 보낸 $user로 해당 User data를 찾아서 delete하시면 됩니다. 확실히 이해하실려면 db 보시면 queryString에 해당되는 id가 제거된 것을 볼 수 있을 것입니다.
        public function delete($user){
            $user_detail = User::find($user);
            $user_detail->delete();
            return redirect('board');
        }

      ①User::find($user); User DB의 id=$user로 가져오겠다는 의미입니다.

      ②$user_detail->delete(); id=$user인 User data를 제거하겠다는 의미입니다.

 

추가되어야할 부분▶ 유효성 검사 및 web.php를 resource, prefix, group을 활용해서 코드를 수정해야합니다. 현재 설명된 부분은 간단한 crud만 설명을 해봤습니다.

728x90
반응형
Comments