[Laravel] JSON with Ajax 리스트 만들기 (1)

📒 MVC(Model View Controller) 기본 셋팅

1. Laravel 프로젝트 생성

우선 cmd 창 혹은 git bash 에서 경로를 지정한 후
컴포저를 사용하여 8.x 버전의 라라벨 프로젝트를 생성합니다.

composer create-project laravel/laravel="8.x" json_ajax_list

2. Layouts 폴더 및 View 파일 생성

resources/views 폴더 안에 layouts 폴더를 만든 후 app.blade.php 파일을 생성합니다.

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>API LIST</title>
</head>
<body>
    @section('container')
    @show
</body>
</html>

views 폴더 안에 메인 화면으로 사용할 index.blade.php 파일을 생성합니다.

@extends('layouts.app')

@section('container')
    <h1>Hello World</h1>
@stop

web.php 파일에 아래와 같이 라우터를 설정합니다.

Route::get('/', function () {
    return view('home');
});

3. Model 파일 생성 및 Migration 작업

php artisan make:model Board -m 명령어를 입력해 모델과 마이그레이션 파일을 생성합니다.
Board 모델이 생성되면 파일을 열어 아래와 같이 입력합니다.

<?php

namespace App\Models;

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

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

create_boards_table.php 마이그레이션 파일을 열어 아래와 같이 입력한 후

php artisan migrate --path=database/migrations/2022\_05\_24\_010601\_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->id();
            $table->string('title')->coment('게시판 제목');
            $table->longText('content')->comment('게시판 내용');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('boards');
    }
}

4. 테스트 데이터 생성

팩토리를 사용하여 테스트용 데이터를 생성하겠습니다.

php artisan make:factory BoardFactory 명령어를 입력해
database/factories 폴더 안에 BoardFactory 파일을 생성합니다.
파일이 생성되었으면 아래와 같이 입력합니다.

• 참고 자료 :
https://laravel.kr/docs/8.x/database-testing#creating-factories
https://github.com/fzaninotto/Faker

<?php

namespace Database\Factories;

use App\Models\Board;
use Illuminate\Database\Eloquent\Factories\Factory;

class BoardFactory extends Factory
{
    protected $model = Board::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'title'=>$this->faker->word,
            'content'=>$this->faker->paragraph,
        ];
    }
}

터미널에서 php artisan tinker 명령어를 입력한 후

App\\Models\\Board::factory()->count(10)->create();
를 입력해 10개의 데이터를 생성합니다.

Boards 테이블로 이동하여 생성된 데이터를 확인합니다.

5. Controller 생성

터미널에서 ctrl + c 로 tinker 를 종료시킨 후
php artisan make:controller Api/BoardController
명령어로 BoardController.php 파일을 생성합니다.
파일이 생성되었으면 아래와 같이 입력합니다.

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Board;
use Illuminate\Http\Request;

class BoardController extends Controller
{
    public function index(){
        $lists = Board::all();
        return response()->json($lists, 200);
    }

    public function show(Board $id): \Illuminate\Http\JsonResponse
    {
        return Response()->json([
            'id' => $id
        ], 200);
    }
}

6. Route 설정

routes\api.php 파일을 열어 아래와 같이 입력합니다.

<?php

use App\Http\Controllers\Api\BoardController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});
Route::get('/board', [BoardController::class, 'index']);
Route::get('/board/{id}', [BoardController::class, 'show']);

7. API 확인

터미널에 php artisan serve 를 입력하여 서버를 활성화시킨 후
http://127.0.0.1:8000/api/board 페이지에서 데이터를 확인합니다.

파라미터 값을 추가했을 때도 데이터가 화면상에 잘 출력 되는지 확인합니다.

'🌈 Programming > Laravel' 카테고리의 다른 글

[Laravel] .env 파일 설정으로 개발용, 서비스용 URL 나누기 (0)	2023.06.30
[Laravel] Ajax로 CRUD 게시판 만들기 (1) (0)	2022.05.26