📒 [ TIL ] 2022.08.03_75일차 # 최종 프로젝트 (17)

문명주·2022년 8월 4일

TIL

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

목록 보기

72/82

[ 2022-08-03 (수) 오늘의 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 onload="articleDetail()" style="background-color: rgb(43, 43, 43); color: black;">
    <!-- 로그인 공간 -->
    <div class="login-space">
        <div class="login-block">
            <button type="button" id="login-button" class="btn btn-light btn-sm" data-bs-toggle="modal"
            data-bs-target="#staticBackdrop">로그인</button>
            <button type="button" class="btn btn-light btn-sm" id="signup-button"
                onclick="location.href='signup.html'">회원가입</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">
        <div class="Top-bar1-buttons row">
            <img class="board" src="static/image/board03.png" onclick="location.href='board.html?boards=10대'">
            <img class="board" src="static/image/board02.png" onclick="location.href='board.html?boards=20대'">
            <img class="board" src="static/image/board04.png" onclick="location.href='board.html?boards=30대'">
            <img class="board" src="static/image/board01.png" onclick="location.href='board.html?boards=직장인'">
            <img class="board" src="static/image/board05.png" onclick="location.href='board.html?boards=연인'">
            <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-space1"><button class="posting-btn" onclick="postClick()">게시물 작성</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>
        <div class="paging" style="cursor:pointer"></div>
            <article class="article">
                <ul class="contents"></ul>
                <div class="buttons"></div>
            </article>
        <!-- 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/article_detail.js"></script>
    </div>

    <!-- 로그인 모달창 -->
    <div class="modal fade login-modal" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content login-modal-size">
            <div class="modal-header">
                <h5 class="modal-title">로그인</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="floatingloginID" placeholder="ID">
                    <label for="floatingInput">ID</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="floatingloginPassword"
                        placeholder="Password">
                    <label for="floatingPassword">비밀번호</label>
                </div>
                아직 <a href="signup.html">계정</a>이 없으시다면?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                <button type="button" class="btn btn-primary" onclick="handleLogin()">로그인</button>
        <script src="/static/Scripts/boards.js"></script>
    </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',
            "Authorization": "Bearer " + localStorage.getItem("access"),
        },
        body: JSON.stringify(searchData)
    })
    if (searchData['search'] == '') {
        alert('검색어를 입력해주세요!')
    } else {
        // 세션 저장
        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
    }
    

    response_json = await response.json()
    return response_json.articles
}

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 postClick() {
    if (!localStorage.getItem("access")) {
        alert('로그인해주세요!')
    } else {
        window.location.href='posting.html'
    }
}

function getPosts() {

    $('#search-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="post-line row" onclick="location.href='${frontend_base_url}/detail.html?id=${id}'">
                                        <div class="th number col-1" scope="col">${cnt}.</div>
                                        <div class="th title col-6" scope="col"><b>${title}</b></div>
                                        <div class="th author col col-md-col1" scope="col">${author}</div>
                                        <div class="th date col" 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.08.02_74일차 # 최종 프로젝트 (16)

다음 포스트

📒 [ TIL ] 2022.08.03_75일차 # 최종 프로젝트 (17)

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

[ 2022-08-03 (수) 오늘의 TIL ]

[ Today Project ]

[ Today Learn ]

✏️ 내가 배운것, 얻은것

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

📕 [WIL] 2022.08.04_76일차 # WIL KPT회고

0개의 댓글

관련 채용 정보