Jquery & JsGrid) 화면 이쁘게 수정하기 & 게시판 기능 달기

 

1. 부트스트랩 홈페이지에서 사이즈 등을 조정할 수 있다. 사이즈는 css를 조정하기 보다 부트스트랩의 class를 이용하여 잘 맞추어주면 된다.

 

getbootstrap.com/docs/5.0/forms/form-control/#file-input

Form controls

2. 다음과 같이 포멧을 맞추어서 수정하였다.

<div class="modal fade modal-xl" id="addboardmodal" tabindex="-1" role="dialog" aria-labelledby="addboardmodalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <form name="add_board" id="add_board">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">글쓰기</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="section-top-border">
                        <div class="row">
                            <p class="col-lg-3 col-md-3 pt-3">게시글 종류<span style="color: red;">*</span></p>
                            <div class="col-lg-9 col-md-9" style="padding-top: 10px;">
                            <select id="board_mode">
                                <option value="board">거래이력</option>
                                <option value="contract">계약서</option>
                            </select>
                            </div>
                            <p class="col-lg-3 col-md-3 pt-3">게시글 제목<span style="color: red;">*</span></p>
                            <div class="col-lg-9 col-md-9" style="padding-top: 10px;">
                                <input class="single-textarea" name="title" id="title" required/>
                            </div>
                            <p class="col-lg-3 col-md-3 pt-3">게시글 내용<span style="color: red;">*</span></p>
                            <div class="col-lg-9 col-md-9" style="padding-top: 10px;">
                                <input class="single-textarea" name="content" id="content" required/>
                            </div>
                            <p class="col-lg-3 col-md-3 pt-3 contract_display ">계약서<span style="color: red;">*</span></p>
                            <div class="col-lg-9 col-md-9 contract_display mb-3" style="padding-top: 10px;">
                                <input type="file" class="form-control" name="contract" id="contract" required>
                            </div>
                            <p class="col-lg-3 col-md-3 pt-3 contract_display">해시값<span style="color: red;">*</span></p>
                            <div class="col-lg-9 col-md-9 contract_display" style="padding-top: 10px;">
                                <input type="text" class="single-textarea" style="display:inline;" readonly  id="file_hash" value="파일의 해시가 기록될 곳" />
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close_modal3">닫기</button>
                    <button type="submit" class="btn btn-primary" id="save_modal3">저장</button>
                </div>
            </div>
        </form>
    </div>
</div>

3. 결과 화면

수정된 결과 화면

4. show hide를 이용하여 상황별로 모달을 다르게 띄우게 하면 게시판 기능을 구현할 수 있다. class로 하나로 묶은 후에 한번에 show 및 hide를 하면된다.

        $("#board_mode").change(function(){
            if($("#board_mode").val()=="board"){
                alert("거래이력 작성!")
                $(".contract_display").hide();
            }else{
                alert("계약서 작성!")
                $(".contract_display").show();
            }
        })

        $(".contract_display").hide();

5. 게시판 요소를 클릭할 때 새 요소를 리턴하도록 설정한다. 여기서는 modal을 나타내는 id를 viewboardmodal로 바꾸어 두었습니다.

<div class="modal fade modal-xl" id="viewboardmodal" tabindex="-1" role="dialog" aria-labelledby="addboardmodalTitle" aria-hidden="true">

jsGrid를 사용하여 표를 만들었으며, 이를 이용하여 표를 클릭했을 때 해당 모달이 뜨도록 하면 게시판의 조회기능을 구현할 수 있다.

 

조회하는 양식은 거래이력, 계약서 2개 인데 내용이 겹치므로 2개를 하는 대신 show , hide를 사용하여 한다.

 

현재 JsGrid는 다음과 같은데 여기서 row Click에 event를 주어야 한다.

        $("#add_board").submit(function(e){
            e.preventDefault();
            let add_board = $("#add_board").serialize();
            let tidx = $("#tech_id").val();
            console.log(add_board)
            if(confirm('저장하시겠습니까?')){
                $.ajax({
                    type: "POST",
                    url : 'tech/add_board',
                    data: add_board+"&tidx="+tidx,
                    success: function(r){
                        $("#add_board")[0].reset();
                        $('#addboardmodal').modal('hide');
                        $("#board_table").jsGrid("loadData");
                    }  
                })
            }
        });

        $("#board_table").jsGrid({
            height: "auto",
            width: "100%",
    
            sorting: true,
            paging: false,
            autoload: true,
            pageLoading: true,
            
            deleteConfirm: "삭제하시겠습니까?",
    
            controller: {
                loadData: function(filter) {
                    return $.ajax({
                        type: "POST",
                        url: "tech/board_table",
                        data: {
                            "tidx" : $("#tech_id").val()
                        }
                    });
                }
            },
            onItemDeleted: function(args) {
                deleteBoard(args);
            },

            rowClick: function(args) { 
            },
    
            fields: [
                { name: 'board_idx', type: 'text', title:'No.', width:30, align:'center' },
                { name: 'title', type: 'text', title:'게시글 제목', width:80 },
                { name: 'writer', type: 'text', title:'글쓴이', width:50 },
                { name: 'content', type: 'text', title:'글내용', width:300, align:'center' },
                { name: 'contract_name', type: 'text', title:'계약서 이름', width:100, align:'center' },
                { name: 'contract_hash', type: 'text', title:'계약서 해시', width:100, align:'center' },
                { name: 'contract_txid', type: 'text', title:'txid', width:100, align:'center' },
                { name: 'contract_route', type: 'text', title:'계약서 경로', width:100, align:'center' },

                { type: "control", editButton: false, modeSwitchButton: false }
            ]
        });

먼저 초기 jsGrid를 불러올 때 modal을 hide 시켜준다. 이건 클릭시에 args값을 통하여 블록체인 및 DB에서 동기처리를 통하여 값을 불러온 후에 show를 하면 된다. 

                        $('#viewboardmodal').modal('hide');

먼저 console.log를 이용하여 조회에 필요한 index값을 가져온다. 조회 함수는 길이가 어느정도 있기 때문에 밖으로 따로 빼둔 후 호출하는 식으로 작동시킨다.

    function getboardInfo(args){
        console.log(ars);
        $.ajax({
            type: "POST",
            url : 'tech/getboardInfo',
            data : {"bidx" :args.item.board_idx},
            success: function(r){
                if(r.success){
                    alert("게시판조회")
                }else{
                    alert(r.message);
                }
            }
        })
    }

다음과 같이 함수를 rowClick때 실행시켜주면 POST 요청이 가게 된다.

            rowClick: function(args) {
                getboardInfo(args)
            },

6. 서버 사이드에서 POST요청을 받아서 응답을 주고 그 응답값을 게시판 글의 상세 내역으로 넣으면 된다. 

DB의 보안 때문에 자세한 문구나 입력값은 작성하지 않았지만 다음과 같은 형식으로 작성을 해주었다.

JSONResponse는 모듈인데 REST API를 더 정형화되게 만들어서 보내기 위하여 회사에서 사용하는 모듈이다. 만약 다른 양식이 잇다면 res.send에 해당 양식에 맞추어서 응답을 보내주면 된다.

router.post('/getboardInfo', async function(req, res){
	let rb = req.body;

	let bidx = rb.board_idx;
	let pmarr = [module_path, bidx];

	let query = `select 문`;
	let result = await DB.Sql( query, pmarr);

	if (result.affectedRows > 0){
		res.send(JSONResponse.successTrue(result));
	}else{
		res.send(JSONResponse.successFalse("에러발생"));
	}
});

 

select문은 넣기 전에 Mysqlworkbanch에서 실행을 한번 해주고 정해주면 더 정확하게 할 수 있다. 오류는 날 수 밖에 없으므로 체크할 수 있는 사항은 중간중간 무조건 체크를 해주고 실행을 하도록 한다.