본문 바로가기
PHP/Laravel

[Laravel 7.x] Ajax 를 이용한 계층형 게시판 조회

DungGi 2020. 8. 13. 14:52

[Laravel 7.x] '0'부터 시작하는 Laravel 계층형 게시판

 

[Laravel 7.x] '0'부터 시작하는 Laravel 계층형 게시판

PHP의 프레임워크인 Laravel Framework를 사용하여 첫 결과물로 계층형 게시판을 만들어 보았습니다. 버전은 7.21.0 이고, https://laravel.kr/docs/7.x 라라벨 코리아 한글 메뉴얼을 참고하였습니다. 필자가 만

dungvkorea.tistory.com

저번 포스팅에서 만들었던 계층형 페이지에 이어서 Ajax라는 기능을 사용하여 페이지를 검색하는 기능을 추가해보겠습니다. 사용된 프레임워크 버전과 같은 정보들은 이전 포스팅에서 확인 부탁드립니다.

SEARCH PAGE 다음에 나오는 인풋박스에 숫자를 입력하면 비동기 방식으로 해당하는 숫자의 페이지를 보여줍니다. 

아직 개발 초보이기 때문에 내용이 부실할 수도 있고, 틀린 부분이 있을 수도 있습니다. 피드백주시면 매우 감사하겠습니다.

포스팅에선 편의를 위해 반말을 사용하는 점 양해부탁드립니다 (_ _ ) 감사합니다.


1. 라우팅
2. 컨트롤러 메소드 정의
3. 뷰 작성하기

 

숫자를 입력하면 바로 게시판이 나오는 기능. 시간이 왜 저렇게 표시되는지 아직 해결하지 못 했다...

먼저 routes/web.php으로 가서 라우팅을 해준다. 메소드 전송방식은 POST, 컨트롤러에서의 메소드명은 ajaxServer로 하겠다.

 

1. 라우팅

Route::post('/tasks/ajaxServer', 'TaskController@ajaxServer');


그 다음 컨트롤러로 가서 메소드를 정의해 준다.

 

 

2. 컨트롤러 메소드 정의

public function ajaxServer(Request $request)
{
    $pageNum = $request->input('page');		// page파라미터 받아오기
    $writeList  = 10;	// 한 페이지에 몇개의 글이 나오게할건지
    $startNum = ($pageNum-1)*10;	// 각 페이지의 첫번째 글 번호
    $totalCount = Comment_page::count();	// 총 글 개수
    $totalPage   = ceil($totalCount/$writeList);	// 총 페이지 개수
        
    if($pageNum > $totalPage)	// 만약 입력한 페이지가 전체페이지 개수보다 크면 뷰에 1을 보냄
    {
        $result=1;
        return response()->$result;
    }
    else
    {
        $return_arr = array();	// 배열변수 선언
        $result = Comment_page::orderby('grp', 'DESC')
        ->orderby('sort','ASC')
        ->offset($startNum)
        ->limit($writeList)
        ->get();

        foreach($result as $row) {
            $row_array['id'] = $row['id'];
            $row_array['memo'] = $row['memo'];
            $row_array['name'] = $row['creator_name'];
            $row_array['time'] = $row['created_at'];
            $row_array['depth'] = $row['depth'];
            array_Push($return_arr, $row_array);
        }
    };
return response($return_arr);	// 배열을 뷰로 전송한다.
}

app/Http/Contorllers/TaskController.php

page 파라미터 값을 받아와 변수에 저장해주고 필요한 변수들을 만들어둡니다. 그리고 foreach 함수를 사용하여 데이터베이스의 데이터들을 배열에 하나씩 넣고 배열을 다시 index뷰로 전송한다.
다시 index뷰로 돌아갈 것이다. 저번 포스팅에서 만들었던 index뷰에 코드를 추가하는 식으로 작성하였다.

 

 

3. 뷰 작성하기

SEARCH PAGE :  <input id='key'>
<p>
    <table id="page2" cellpadding="5">
    	<p id="page"></p>
    </table>
</p>

페이지 부분 바로 밑에 찾을 페이지 입력란을 만들어준다. 아이디 page2 에는 페이지가 들어갈 것이고 page 에는 현재 검색 상태가 들어 갈 것이다. 다음으로 스크립트 부분을 보여줄건데. 함수를 하나씩 설명할 예정이다. 또한 JQuery 를 사용할건데 레이아웃에 제이쿼리 라이브러리를 추가하였으니 따로 추가할 필요는 없다.

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$('#key').on('keyup',function()
{
    $.fn.show();
});

$.fn.show = function()
{

    var key = $('#key').val();
    if(key.length == 0) {
        $('#page').html("페이지를 입력해주세요.");
        $('#page2').html('');
    }
    else
    {
    $.ajax({
        method: "POST",
        url: '/tasks/ajaxServer',
        data: { page : key },
        success: function(data) {
            $.fn.create(data);
        },
        error: function(data) {
            $('#page').html("존재 하지 않는 페이지 입니다.");
            $('#page2').html("");
        }
    });
    }
}

$.fn.create = function(data_val)
{   
    $('#page').html("");
    var tableData = "";
    var tableHead = "";

    tableHead += '<tr>';
    tableHead += '<th>id</th>';
    tableHead += '<th>MEMO</th>';
    tableHead += '<th>NAME</th>';
    tableHead += '<th>DATE</th>';
    tableHead += '</tr>';

    $("#page2").html(tableHead);
    $.each(data_val, function (index, value) {
        tableData += '<tr>';
        tableData += '<td>' + value.id + '</td>';
        if(value.depth == 0) {
            tableData += '<td>' + value.memo + '</td>';
        }
        else
        {
            tableData += "<td>";
            for(var i=0; i<value.depth; i++) {
                tableData += "&nbsp&nbsp";
                }
        tableData += "└"+value.memo+'</td>';
        }
    tableData += '<td>' + value.name + '</td>';
    tableData += '<td>' + value.time + '</td>';
    tableData += '</tr>';
    });
    $("#page2").append(tableData);
}

Ajax를 사용한 페이지 조회 스크립트 전체 코드다. 함수를 하나씩 설명하겠다.

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Ajax 요청시 옵션 값들을 정의할 수 있는 함수인데. 우리가 라라벨을 이용하고 있고 POST 메소드로 Request 전송을 할 때 @csrf 라는 보안토큰을 꼭 보내야된다. Ajax 통신도 마찬가지로 POST로 전송을 하려면 보안토큰이 필요하다. 그래서 먼저 Ajax 통신의 헤더에 토큰을 추가해주어야 한다.  라라벨메뉴얼 설명 (link)

$('#key').on('keyup',function()
	{
		$.fn.show();
	});

SEARCH PAGE 인풋박스에 키가 입력되엇을때 show 함수가 실행된다. 바로 show 함수를 살펴보자. 

$.fn.show = function()
{
    var key = $('#key').val();	// 변수 key의 값은 인풋박스의 입력값이 된다.
    if(key.length == 0) {	// 만약 인풋박스의 입력값이 없으면 페이지를 입력해달라는 텍스트 출력
        $('#page').html("페이지를 입력해주세요.");
        $('#page2').html('');
    }
    else
    {
    $.ajax({	//ajax 함수 선언.
        method: "POST",
        url: '/tasks/ajaxServer',	// 값을 보낼 주소 경로
        data: { page : key }, // 키의 값을 보낸다.
        success: function(data) { // 만약 성공한다면 create 함수를 실행한다.
            $.fn.create(data);
        },
        error: function(data) {	// 만약 에러가 난다면 에러 텍스트 전달.
            $('#page').html("존재 하지 않는 페이지 입니다.");
            $('#page2').html("");
        }
    });
    }
}

통신에 실패하면 "존재 하지 않는 페이지 입니다." 라는 텍스트가 출력될 것 이고 통신에 성공한다면 함수 create가 전달받은 data를 인자로 실행될 것이다. 다음은 create 함수 코드다.

$.fn.create = function(data_val)
{   
    $('#page').html(""); // "페이지를 입력해주세요" 를 공백으로 만든다.
    var tableData = ""; //데이터 문자열이 들어갈 변수
    var tableHead = "";

    tableHead += '<tr>';
    tableHead += '<th>id</th>';
    tableHead += '<th>MEMO</th>';
    tableHead += '<th>NAME</th>';
    tableHead += '<th>DATE</th>';
    tableHead += '</tr>';

    $("#page2").html(tableHead); // id=page2 부분에 테이블 헤드변수로 덮어쓰기.
    $.each(data_val, function (index, value) {//데이터가 있는만큼 돌려준다.
        tableData += '<tr>';
        tableData += '<td>' + value.id + '</td>';
        if(value.depth == 0) {// 댓글인지 그냥 글인지 판단한다 들여쓰기를 위해서.
            tableData += '<td>' + value.memo + '</td>';
        }
        else
        {
            tableData += "<td>";
            for(var i=0; i<value.depth; i++) {
                tableData += "&nbsp&nbsp";
                }
        tableData += "└"+value.memo+'</td>';
        }
    tableData += '<td>' + value.name + '</td>';
    tableData += '<td>' + value.time + '</td>';
    tableData += '</tr>';
    });
    $("#page2").append(tableData); // page2 부분에 추가로 tableData 삽입
}

아예 테이블부분의 코드를 문자열로 변수에 넣는 방식을 선택했다. 복잡해보이지만 하나씩 보면 이해가 갈 것이다.

 

필자는 Ajax를 공부할 때 w3school에서 가장 많은 도움을 받았다.

https://www.w3schools.com/js/js_ajax_intro.asp

 

AJAX Introduction

AJAX Introduction AJAX is a developer's dream, because you can: Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background AJAX Example Explained HTML Page

www.w3schools.com

 

'PHP > Laravel' 카테고리의 다른 글

[Laravel 7.x] '0'부터 시작하는 Laravel 계층형 게시판  (6) 2020.08.06

'PHP/Laravel' Related Articles

티스토리툴바