📒 [ TIL ] 2022.08.01_73일차 # 최종 프로젝트 (15)

문명주·2022년 8월 2일

TIL

스파르타코딩클럽-AI웹개발-2회차

목록 보기

70/82

[ 2022-08-01 (월) 오늘의 TIL ]

[ Today Project ]

drf 백엔드개발 + 프론트개발
: 이번 프로젝트는 팀프로젝트로 시작합니다.

[ Today Learn ]

검색결과리스팅 기능 구현

✏️ 내가 배운것, 얻은것

search_result.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>너 그거 폭스야</title>
    
    <!-- 파비콘 -->
    <link rel="shortcut icon" href="../static/image/favicon.png" type="image/x-icon">

    <!-- 부트스트랩 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <!--스타일 CSS -->
    <link rel="stylesheet" href="/static/CSS/pagenation.css">
    <link rel="stylesheet" href="../static/CSS/style.css">
    <link rel="stylesheet" href="../static/CSS/board.css">
</head>

<body style="background-color: rgb(43, 43, 43); color: black;">
    <!-- 로그인 공간 -->
    <div class="login-space">
        <div class="login-block">
            <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#myModal1">
                로그인
            </button>
            <button type="button" class="btn btn-light btn-sm" id="signup-button"
                onclick="location.href='signup.html'">회원가입</button>
            <button type="button" id="logout-button" class="btn btn-warning btn-sm" id="#"
                onclick="logout()">로그아웃</button>
        </div>
    </div>

    <!-- 상단공간 -->
    <div class="navbar">
        <!-- 사이트 로고 -->
        <img src="../static/image/logo.png" alt="" height="100px" onclick="location.href='index.html'">
    </div>

    <!-- 검색엔진 -->
    <!-- 드롭다운 검색 적용법 확인중, 안되면 그냥 검색창으로 놔둘 예정 -->
    <div class="input-group mt-3 mb-3 search-engine">
        <select type="button" id="searchOption">
            전체 게시글
            <option><a class="dropdown-item" href="#">제목</a></option>
            <option><a class="dropdown-item" href="#">내용</a></option>
            <option><a class="dropdown-item" href="#">제목+내용</a></option>
            <option><a class="dropdown-item" href="#">작성자</a></option>
        </select>
        <input type="text" class="form-control" placeholder="게시글 검색" id="searchKeywords">
        <img src="static/image/search_button.png" onclick="search()" class="search-button">
    </div>

    <!-- 게시판행 버튼들 -->
    <div class="Top-bar1 row justify-content-center">
        <div class="Top-bar1-buttons row">
            <img class="board" src="static/image/board01.png" onclick="location.href='board.html?boards=직장인'">
            <img class="board" src="static/image/board02.png" onclick="location.href='board.html?boards=대학생'">
            <img class="board" src="static/image/board03.png" onclick="location.href='board.html?boards=10대'">
            <img class="board" src="static/image/board04.png" onclick="location.href='board.html?boards=성인'">
            <img class="board" src="static/image/board05.png" onclick="location.href='board.html?boards=LGBTQ'">
            <img class="board" src="static/image/board06.png" onclick="location.href='board.html?boards=자유'">
            <img class="board" src="static/image/board07.png" onclick="location.href='board.html?boards=HOT'">
        </div>
    </div>
    <!-- 게시판 공간 -->
    <div class="board-space">
        <!-- 게시판 명 -->
        <div class="board-name" ><b id="board-name"></b></div>
        <div class="posting-space"><button class="posting-btn" onclick="location.href='posting.html'">게시물 작성</button></div>
        <div class="second-floor-board col">
            <!--게시판 -->
            <div class="worker-board row justify-content-center">
                    <!-- 자유 게시글 for문 -->
                    <div id="ArticlesDiv" class="articles">
                        <div id="search-post" class="list-post" ></div>
                        </div>
                </div>
            </div>
        </div>

        <!-- Scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
        <script src="/static/JS/api.js"></script>
        <script src="/static/Scripts/search.js"></script>
        <script src="/static/Scripts/boards.js"></script>
    </div>

    <!-- The Modal -->
    <div class="modal" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Modal Heading</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    Modal body..
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>

</body>

</html>

search.js

// 검색기능
async function search() {
    const searchData = {
        type: document.getElementById('searchOption').value,
        search: document.getElementById('searchKeywords').value,
    }
    const response = await fetch(`${backend_base_url}/article/search/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(searchData)
    })
    // 세션 저장
    response_json = await response.json()
    result = JSON.stringify(response_json)
    num = response_json.length
    sessionStorage.setItem("result", result)
    sessionStorage.setItem("keyword", searchData.search)
    sessionStorage.setItem("type", searchData.type)
    sessionStorage.setItem("num", num)
    window.location.href = `${frontend_base_url}/search_result.html`
    return result
}

const PagingConf = {
    totalCount: 100,
    numbersPerPage: 5,
    navPageNumber: Math.ceil(sessionStorage.getItem("num")/10),
};
sessionStorage.removeItem("num")
const feedNumber = {
    num : 0
}

$(document).ready(function () {
    setPageInfo(PagingConf.numbersPerPage, PagingConf.navPageNumber, 1);
    // setFeedNumber( $(val) );
    makePageNav();
    getPosts();
});

function makePageNav() {
    const pageInfo = getPageInfo();
    renderPaging($('.paging'), PagingConf.totalCount, pageInfo.numbersPerPage, pageInfo.navPageNumber, pageInfo.currentPage, true);
}

function renderPaging(appendElement, totalCount, numbersPerPage, navPageNumber, currentPage) {

    let totalPage = Math.ceil(totalCount / numbersPerPage); // 전체 페이지수
    let pageGroup = Math.ceil(currentPage / navPageNumber); // 1~10 : 1그룹 11~20 : 2그룹

    let last = pageGroup * navPageNumber; // 마지막 페이지수, 전체 페이지수 넘지않게 처리
    if (last > totalPage) {
        last = totalPage;
    }

    let first = last - (navPageNumber - 1);
    let front = 1;
    let prev = first - 1;
    let next = last + 1;
    let rear = totalPage;

    let innerHtml = ''; // 이동 페이지 수와 화살표 html

    // 왼쪽 < <<
    if (prev > 0) {
        innerHtml += '<a href=#token operator">+ front + ')"> << </a>';
        innerHtml += '<a href=#token operator">+ prev + ')"> < </a> ';
    }
    // 중간 이동 태그
    for (let i = first; i <= last; i++) {
        if (currentPage === i) {
            innerHtml += '<a href=# class="on"token operator">+ i + ')">' + i + '</a> ';
        } else {
            innerHtml += '<a href=#token operator">+ i + ')">' + i + '</a> ';
        }
    }
    // 오른쪽 > >>
    if (last < totalPage) {
        innerHtml += '<a href=#token operator">+ next + ')"> > </a>';
        innerHtml += '<a href=#token operator">+ rear + ')"> >> </a>';
    }

    appendElement.empty();
    appendElement.append(innerHtml);
}

function movePage(currentPage) {
    const pageInfo = getPageInfo();
    setPageInfo(pageInfo.numbersPerPage, pageInfo.navPageNumber, currentPage);
    makePageNav();
    getPosts();
}

function setPageInfo(numbersPerPage, navPageNumber, currentPage) {
    const pageInfo = {
        numbersPerPage: numbersPerPage,
        navPageNumber: navPageNumber,
        currentPage: currentPage
    };
    sessionStorage.setItem('pageInfo', JSON.stringify(pageInfo));
}

function getPageInfo() {
    return JSON.parse(sessionStorage.getItem('pageInfo'));
}

function getFeedInfo() {
    return JSON.parse(sessionStorage.getItem('pageInfo'));
}


function getPosts() {
    $('#list-post').empty()

    const pageInfo = getPageInfo();

    let page = pageInfo.currentPage;
    let offset = pageInfo.numbersPerPage;
    let params = '?page=' + page;
    params += '&offset=' + offset;
    $.ajax({
        type: 'POST',
        url: `${backend_base_url}/article/search/`,
        data: {            
            type: sessionStorage.getItem("type"),
            search: sessionStorage.getItem("keyword")
        },
        async: false,
        success: function (response) {        
            console.log(response) 
            if (response.length != 0) {
                let posts = response;
                console.log(posts)
                let board_html = `<b id="board-name">'${sessionStorage.getItem("keyword")}' 검색결과</b>`
                $('#board-name').empty()
                $('#board-name').append(board_html)
                for (let i = 0; i < posts.length; i++) {
                    let cnt = i + 1
                    const id = posts[i]['id']
                    const title = posts[i]['article_title']
                    const author = posts[i]['author']
                    const date = posts[i]['article_post_date']
                    let temp_html = `<div class="tr" onclick="location.href='${frontend_base_url}/detail.html?id=${id}'">
                                        <div class="th number" scope="col">${cnt}.</div>
                                        <div class="th title" scope="col"><b>${title}</b></div>
                                        <div class="th author" scope="col">${author}</div>
                                        <div class="th date" scope="col">${date}</div>
                                    </div>`
                    $('#search-post').append(temp_html)
                }
            }
        },
        fail: function (response) {
            console.log("fail")
            // window.location.reload()
        }
    });
}

문명주

하루 한걸음씩 꾸준히 나아가는 개발자🙆‍♀️ https://github.com/Moonmooj

이전 포스트

📒 [ TIL ] 2022.07.29_72일차 # 최종 프로젝트 (14)

다음 포스트

📒 [ TIL ] 2022.08.01_73일차 # 최종 프로젝트 (15)

스파르타코딩클럽-AI웹개발-2회차

[ 2022-08-01 (월) 오늘의 TIL ]

[ Today Project ]

[ Today Learn ]

✏️ 내가 배운것, 얻은것

📒 [ TIL ] 2022.07.29_72일차 # 최종 프로젝트 (14)

📒 [ TIL ] 2022.08.02_74일차 # 최종 프로젝트 (16)

0개의 댓글

관련 채용 정보