본문 바로가기
TIL/내배캠 사전캠프

23.05.11

by J1-H00N 2023. 5. 11.

전날 받은 상세 페이지 수정 코드를 토대로 sub1 ~ sub4의 코드를 수정했다.

받은 그대로에서 몇몇 변경사항이 있다.

1. mypost클래스를 담을 div가 없어 부모 div와 id='test1'을 부여했다.

2. 상세 설명과 감독/출연진 정보가 박스를 벗어나는 경우가 생겨 h1에서 각각 h4, h5로 사이즈를 줄였다. 하지만 상세설명이 너무 긴 경우 아직도 박스를 벗어나는 경우가 있어 제목, 상세설명, 감독/출연진에 각각 div를 부여해 길이에 따라 글씨 크기가 조정되도록 건의할 생각이다.

3. 등록자 comment도 너무 크고 누가 적은 것인지 제대로 표기되어있지 않아 텍스트와 사이즈에 수정을 했다.(h1 -> h3)

 

추가 수정 필요 사항

1. 상세 설명 페이지에서 로고 클릭 시 메인페이지로 넘어가지 않는 문제 수정

2. 앞서 말했던 제목, 상세 설명, 감독/출연진 각각 자동 사이즈 조절 기능 추가 혹은 각 영화에 맞게 사이즈 조정

3. 개인 관람평이 등록되지 않는 문제 수정

 

수정된 코드

 

index.html   =>  서지인 님

<!doctype html>
<html lang="ko-kr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- jQuary -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <!-- bootstrap -->
    <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>

    <title>비전5 영화 (마우스 오버)</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');

* {
    font-family: 'Gowun Dodum', sans-serif;
    font-family: 'Nanum Myeongjo', serif;
}

.mytitle {
    position: fixed;

    color: black;
    background-color: #fff;

    width: 100%;
    height: 150px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    z-index: 3;
}

.main {
    padding: 200px 0 100px 0;
    height: 2500px;
}

.mytitle>h1 {
    font-size: 50px;

    position: relative;
    left: 50px;
}

.mytitle > h1 > a {
    color: black;
}


.mytitle>button {
    width: 200px;
    height: 50px;

    border-radius: 50px;

    margin: 30px 20px 20px auto;
}

.mycards {
    width: 80%;
    margin: 0 auto;
}

.card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-title {
    margin: 10px auto 10px 10px;
    text-size-adjust: auto;
}

.screen {
    position: relative;
    overflow: hidden;
}

.card-img-top {

    filter: brightness(1);
}

.card-img-top:hover {

    filter: brightness(0.3);
}

.top {
    pointer-events: none;
    position: absolute;
    bottom: 100%;
    left: 10px;
    z-index: 2;
    color: white;
    text-size-adjust: auto;
    font-weight: 500;
}

.screen:hover .top {
    top: 5%;
}

.btn>a {
    text-decoration: none;
    /* 링크의 밑줄 제거 */
    color: inherit;
    /* 링크의 색상 제거 */

}

a {
    text-decoration: none;

}
    </style>

    <script>
        //DB에서 영화 정보를 가져 온 후 출력
        $(document).ready(function () {
            show_order1();
        });

        function show_order1() {
            fetch("/movies").then(res => res.json()).then(data => {
                let rows = data['result']
                rows.forEach((a) => {
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let comment = a['comment']
                    let star = a['star']
                    let director = a['director']
                    let character1 = a['character1']
                    let character2 = a['character2']
                    let character3 = a['character3']

                    let stars = ('⭐').repeat(star)

                    let temp_html = `<div class="col">
                                        <div class="card">
                                            <a href="{{url_for('input')}}">
                                                <div class="screen">
                                                    <div class="top">${desc}</div>
                                                    <img src="${image}"
                                                        class="card-img-top" alt="...">
                                                           
                                                </div>
                                            </a>
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p>${stars}</p>
                                            </div>
                                        </div>
                                    </div>`
                    $('#cards').append(temp_html)
                })
            })
        }
    </script>
</head>

<body>
    <div class="mytitle">
        <h1><a href={{url_for('home')}}>비전5 영화</a></h1>
        <!-- 영화 기록 버튼 -->
        <button type="button" class="btn btn-outline-dark"><a href="{{url_for('input')}}">영화 기록</a></button>
    </div>
    <div class="main">
        <h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 best4</h2>
        <!-- 기본 추천 카드 출력 -->
        <div class="mycards">
            <div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub1')}}>
                            <div class="screen">
                                <div class="top">‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해 다시 한번 가디언즈 팀과 힘을 모으고,
                                    성공하지 못할 경우 그들의 마지막이 될지도 모르는 미션에 나서는 이야기</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86883/86883_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">가디언즈 오브 갤럭시-Volume 3</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub2')}}>
                            <div class="screen">
                                <div class="top">아무리 빨리 달려도 과거를 앞지를 순 없다 돔(빈 디젤)과 그의 패밀리 앞에 나타난 운명의 적 단테(제이슨 모모아). 과거의 그림자는 돔의 모든 것을 파괴하기 위해 달려온다. 단테에 의해 산산히 흩어진 패밀리들은 모두 목숨을 걸고 맞서야 하는 함정에 빠지고 마는데.. 달리거나 죽거나, 그들의 마지막 질주가 시작된다!</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86996/86996_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">분노의 질주-라이드 오어 다이</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub3')}}>
                            <div class="screen">
                                <div class="top">사회초년생 ‘도하’와 인디 뮤지션 ‘태인’이 장거리 연애를 시작하면서 벌이는 언택트 러브 스토리</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86912/86912_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">롱디</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub4')}}>
                            <div class="screen">
                                <div class="top">'붉은 봉투를 줍는 자, 운명을 거스를 수 없다!' 혈기왕성한 형사 우밍한은 중요한 사건 현장에서 도로에 흩어진 증거물을 수집하던 중 의문의 붉은 봉투를 발견하고 무심코 줍는다. 그때부터 밍한에게 벌어지는 불길한 사건들! 자신에게 다가온 '운명'을 한사코 거부하던 밍한은 거듭되는 생명의 위협에 마지못해 인생 최대의 결심을 하는데... 얼결에 '부부'가 된 귀신과 최악의 빌런을 잡기 위해 인간+귀신 콤비가 벌이는 극강의 공조 수사! 코믹과 액션을 버무리고 감동과 반전까지 가미한, 풀옵션 오감으로 즐기는 블록버스터. 인류애 넘치는 콤비의 격정적인 공조가 마침내 시작된다! 이 콤비도, 두 사람의 공조 수사도 완전히 다 미쳤다!!!</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87003/87003_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">메리 마이 데드 바디</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
                <h2 style="width: 80%; margin: 80px auto 30px 0px; font-weight: 900;">유저가 추천하는 영화</h2>         
            </div>

            

            <!-- 현재 위치에 스크립트 내용 출력 -->
            </div>
        </div>
    </div>

</body>

</html>

 

input.html  =>  강정훈 님

<!doctype html>
<html lang="ko-kr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- jQuary -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <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>

    <title>비전5 영화 (마우스 오버)</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
            font-family: 'Nanum Myeongjo', serif;
        }

        .mytitle {
            position: fixed;

            color: black;
            background-color: #fff;

            width: 100%;
            height: 150px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            z-index: 3;
        }

        .main {
            padding: 200px 0 100px 0;
            height: 2500px;
        }

        .mytitle>h1 {
            font-size: 50px;

            position: relative;
            left: 50px;
        }

        .mytitle>button {
            width: 200px;
            height: 50px;

            border-radius: 50px;

            margin: 30px 20px 20px auto;
        }

        .mycards {
            width: 80%;
            margin: 0 auto;
        }

        .card-body {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .card-title {
            margin: 10px auto 10px 10px;
            text-size-adjust: auto;
        }

        .screen {
            position: relative;
            overflow: hidden;
        }

        .card-img-top {

            filter: brightness(1);
        }

        .card-img-top:hover {

            filter: brightness(0.3);
        }

        .top {
            pointer-events: none;
            position: absolute;
            bottom: 100%;
            left: 10px;
            z-index: 2;
            color: white;
            text-size-adjust: auto;
            font-weight: 500;
        }

        .screen:hover .top {
            top: 5%;
        }

        .btn>a {
            text-decoration: none;
            /* 링크의 밑줄 제거 */
            color: inherit;
            /* 링크의 색상 제거 */

        }
        /* 여기부터 */
        /* 등록팝업 */
        .popup_content{
            visibility: hidden;
            background-color: white;
            border-radius: 8px;
            border: solid;
            width: 450px;
            height: 550px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            margin-bottom: 40px;
            text-align: center;
            z-index: 100;
            transition:all .35s;
        }
        /* 등록팝업 안 텍스트박스들 */
        .textbox{
            width: 90%; 
            padding-left: 10px;
            font-size: 20px;
            border: 2px solid #bbb;
            border-radius: 8px;
            margin-top: 20px;
            resize: none;
        }
        /* 등록 취소 버튼 */
        .btn-option{
            width: 150px;
            height: 50px;
            border: 2px solid #ddd;
            background-color: white;
            border-radius: 8px;
            cursor: pointer;
        }
        .btn-option:hover{
            background-color: #bbb;
        }
    </style>

    <script>
        //DB에서 영화 정보를 가져 온 후 출력
        $(document).ready(function () {
            show_order1();
        });

        function show_order1() {
            fetch("/movies").then(res => res.json()).then(data => {
                let rows = data['result']
                $('#cards').empty()
                rows.forEach((a) => {
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let comment = a['comment']
                    let star = a['star']
                    let director = a['director']
                    let character1 = a['character1']
                    let character2 = a['character2']
                    let character3 = a['character3']

                    let stars = ('⭐').repeat(star)

                    let temp_html = `<div class="col">
                                        <div class="card">
                           
                                                <div class="screen">
                                                    <div class="top">${desc}</div>
                                                    <img src="${image}"
                                                        class="card-img-top" alt="...">
                                                           
                                                </div>
                                
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p>${stars}</p>
                                            </div>
                                        </div>
                                    </div>`
                    $('#cards').append(temp_html)
                })
            })
        }
        // 여기부터 영화등록
        function popupOpen(){
            // document.getElementById('popup').style.display= 'inline';
            document.getElementById('popup').style.visibility='visible';
        }
        // 등록함수
        function onResgistBtn(){
            let url  = $('#url').val();
            let comment = $('#comment').val();
            let star = $('#star').val();
            
            let formData = new FormData();
            formData.append("url_give", url);
            formData.append("comment_give", comment);
            formData.append("star_give", star);
            fetch('/input',{method: "POST", body: formData}).then((res) => res.json()).then((data) => {
                alert(data['msg'])
                window.location.reload();
                // window.location.reload(); 다시 메인화면으로 돌아가기
            })
            
        }
        function onCancelBtn(){
            // document.getElementById('popup').style.display = 'none';
            document.getElementById('popup').style.visibility = 'hidden';
            
            //메인페이지로 돌아가기
        }
    </script>
</head>

<body>
    <div class="mytitle">
        <h1>비전5 영화</h1>
        <!-- 영화 기록 버튼 -->
        <button onclick="popupOpen()" type="button" class="btn btn-outline-dark">영화 기록</button>
    </div>
    <div class="main">
        <div id="popup" class="popup_content">
            <h1>영화 등록하기</h1>
            <!-- url입력 텍스트박스 -->
            <input id="url" class="textbox" placeholder="url입력" type="text" style="height: 40px;">
            <!-- 코멘트 텍스트박스 -->
            <textarea id="comment" class="textbox" placeholder="코멘트를 입력해주세요." rows="8" cols="30" name="coments"></textarea>
            <!-- 별점부분 -->
            <div class="input-group mb-3" style="width: 90%; margin-left: 5%;">
                <label class="input-group-text" for="inputGroupSelect01">별점</label>
                <select class="form-select" id="star">
                    <option selected>-- 선택하기 --</option>
                    <option value="1">⭐</option>
                    <option value="2">⭐⭐</option>
                    <option value="3">⭐⭐⭐</option>
                    <option value="4">⭐⭐⭐⭐</option>
                    <option value="5">⭐⭐⭐⭐⭐</option>
                </select>
                
            </div>
            <!-- 버튼부분 -->
            <div style="margin-top: 50px; background-color: transparent; display: block;">
                <button onclick="onResgistBtn()" class="btn-option">등록</button>
                <button onclick="onCancelBtn()" class="btn-option">취소</button>
            </div>
        </div>
        <h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 best4</h2>
        <!-- 기본 추천 카드 출력 -->
        <div class="mycards">
            <div id="card" class="row row-cols-1 row-cols-md-4 g-3">
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub1')}}>
                            <div class="screen">
                                <div class="top">‘가모라’를 잃고 슬픔에 빠져 있던 ‘피터 퀼’이 위기에 처한 은하계와 동료를 지키기 위해 다시 한번 가디언즈 팀과 힘을 모으고,
                                    성공하지 못할 경우 그들의 마지막이 될지도 모르는 미션에 나서는 이야기</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86883/86883_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">가디언즈 오브 갤럭시-Volume 3</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub2')}}>
                            <div class="screen">
                                <div class="top">아무리 빨리 달려도 과거를 앞지를 순 없다 돔(빈 디젤)과 그의 패밀리 앞에 나타난 운명의 적 단테(제이슨 모모아). 과거의 그림자는 돔의 모든 것을 파괴하기 위해 달려온다. 단테에 의해 산산히 흩어진 패밀리들은 모두 목숨을 걸고 맞서야 하는 함정에 빠지고 마는데.. 달리거나 죽거나, 그들의 마지막 질주가 시작된다!</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86996/86996_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">분노의 질주-라이드 오어 다이</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub3')}}>
                            <div class="screen">
                                <div class="top">사회초년생 ‘도하’와 인디 뮤지션 ‘태인’이 장거리 연애를 시작하면서 벌이는 언택트 러브 스토리</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000086/86912/86912_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">롱디</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <a href={{url_for('sub4')}}>
                            <div class="screen">
                                <div class="top">'붉은 봉투를 줍는 자, 운명을 거스를 수 없다!' 혈기왕성한 형사 우밍한은 중요한 사건 현장에서 도로에 흩어진 증거물을 수집하던 중 의문의 붉은 봉투를 발견하고 무심코 줍는다. 그때부터 밍한에게 벌어지는 불길한 사건들! 자신에게 다가온 '운명'을 한사코 거부하던 밍한은 거듭되는 생명의 위협에 마지못해 인생 최대의 결심을 하는데... 얼결에 '부부'가 된 귀신과 최악의 빌런을 잡기 위해 인간+귀신 콤비가 벌이는 극강의 공조 수사! 코믹과 액션을 버무리고 감동과 반전까지 가미한, 풀옵션 오감으로 즐기는 블록버스터. 인류애 넘치는 콤비의 격정적인 공조가 마침내 시작된다! 이 콤비도, 두 사람의 공조 수사도 완전히 다 미쳤다!!!</div>
                                <img src="https://img.cgv.co.kr/Movie/Thumbnail/Poster/000087/87003/87003_185.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">메리 마이 데드 바디</h5>
                            <p>⭐⭐⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <h2 style="width: 80%; margin: 80px auto 30px auto; font-weight: 900;">유저가 추천하는 영화</h2>
        <!-- 현재 위치에 스크립트 내용 출력 -->
        <div class="mycards">
            <div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
                <div class="col">
                    <div class="card">
                        <a href="">
                            <div class="screen">
                                <div class="top">영화 설명</div>
                                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                                    class="card-img-top" alt="...">
                            </div>
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">영화 제목이 들어갑니다.</h5>
                            <p>⭐⭐⭐</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 

sub1.html  => 김근호 님

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

<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">

    <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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <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>

    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
            font-family: 'Nanum Myeongjo', serif;
        }

        .mylogo {
            text-indent: 25px;

            position: fixed;

            color: black;
            background-color: #fff;

            width: 100%;
            height: 150px;
            top: 0%;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            z-index: 3;
        }

        .mypost {
            width: 1000px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mytitle {
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mytxt {
            text-align: center;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;
        }

        .mybtn>button:hover {
            border: 2px solid black;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mybtn>button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            border: 1px solid black;
            color: black;
            border-radius: 50px;
            margin-top: 20px;
            margin-right: 30px;
        }

        .mytitle2 {
            width: 500px;
            height: 400px;
            margin: 20px 0px 20px 20px;
            padding: 20px 20px 20px 20px;
            border: 1px solid black;
        }

        .myposter {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
        }
    </style>
    <script>
        // //DB에서 영화 정보를 가져 온 후 출력
        $(document).ready(function () {
            show_order2();
        });

        function show_order2() {
            fetch("/movies1").then(res => res.json()).then(data => {
                let rows = data['result1']
                $('#test1').empty()
                rows.forEach((a) => {
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let comment = a['comment']
                    let star = a['star']
                    let director = a['director']
                    let character1 = a['character1']
                    let character2 = a['character2']
                    let character3 = a['character3']

                    let stars = ('⭐').repeat(star)

                    let temp_html1 = `<div class="mypost">
                                            <div class="mytitle">
                                                <br>
                                            <div class="myposter">
                                                <br>
                                                <div><img src="${image}"
                                                style="width:300px; height:400px;" /> </div>
                                                <div> <h1> ${stars} </h1> </div>
                                            </div>
                                                
                                                <div class="mytitle2">
                                                    <div> <h1> ${title} </h1> </div>
                                                    <br>
                                                    <div> <h4> ${desc} </h4> </div>
                                                    <br>
                                                    <div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
                                                </div>
                                        </div>
                                            <div class="mytxt">
                                                <h3> 등록자 관람평 : ${comment} </h3>
                                        </div>
                                    
                                        <div class="mytxt">
                                            <h1> 개인 관람평 </h1>
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="name" placeholder="url" />
                                                <label for="floatingInput">닉네임</label>
                                            </div>
                                            <div class="form-floating">
                                                <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                                                    style="height: 100px"></textarea>
                                                <label for="floatingTextarea2">관람평</label>
                                            </div>
                                            <div class="mybtn">
                                                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                                            </div>
                                    
                                            <br>
                                    
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">닉네임</th>
                                                        <th scope="col">관람평</th>
                                                        <th scope="col">삭제</th>
                                                    </tr>
                                                </thead>
                                        </div>`
                    $('#test1').append(temp_html1)
                })
            })
        }


        // --------------관람평 등록, 삭제----------------------
        // B : 데이터 받기 
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            fetch("/subB1").then(res => res.json()).then(data => {
                let rows = data['result']

                rows.forEach((a) => {
                    let id = a['id']
                    let comment = a['comment']

                    // 데이터 입력
                    let temp_html = `<tr>
                                    <td>${id}</td> 
                                    <td> ${comment} </td>
                                    <td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
                                    </tr>`
                    $('#a11').append(temp_html)
                })
            })
        }

        //  A : 데이터 보내기
        function save() {
            let id = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData()
            formData.append("id_give", id)
            formData.append("comment_give", comment)

            fetch("/subA1", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['msg'])
                window.location.reload()
            })
        }

        // 데이터 삭제 기능
        function del(a) {
            let formData = new FormData()
            let id = a
            formData.append("id_del", id)

            fetch("/subC1", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['del'])
                window.location.reload()
            })
        }


    </script>
</head>

<body>
    <div class=mylogo>
        <br>
        <p style="font-size:50px;"> 비전5 영화 </p>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="test1">
        <div class="mypost">
            <div class="mytitle">
                <br>
                <div class="myposter">
                    <br>
                    <div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                            style="width:300px; height:400px;" /> </div>
                    <div>
                        <h1> ⭐⭐⭐ </h1>
                    </div>
                </div>

                <div class="mytitle2">
                    <div>
                        <h1> 제목 </h1>
                    </div>
                    <br>
                    <div>
                        <h4> 상세설명 </h4>
                    </div>
                    <br>
                    <div>
                        <h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
                    </div>
                </div>
            </div>
            <div class="mytxt">
                <h1> 코멘트 </h1>
            </div>

            <div class="mytxt">
                <h1> 개인 관람평 </h1>
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="name" placeholder="url" />
                    <label for="floatingInput">닉네임</label>
                </div>
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                        style="height: 100px"></textarea>
                    <label for="floatingTextarea2">관람평</label>
                </div>
                <div class="mybtn">
                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                </div>

                <br>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">닉네임</th>
                            <th scope="col">관람평</th>
                            <th scope="col">삭제</th>
                        </tr>
                    </thead>
            </div>
        </div>
</body>

 

sub2.html  => 김근호 님

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

<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">

    <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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <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>

    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
            font-family: 'Nanum Myeongjo', serif;
        }

        .mylogo {
            text-indent: 25px;

            position: fixed;

            color: black;
            background-color: #fff;

            width: 100%;
            height: 150px;
            top: 0%;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            z-index: 3;
        }

        .mypost {
            width: 1000px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mytitle {
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mytxt {
            text-align: center;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;
        }

        .mybtn>button:hover {
            border: 2px solid black;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mybtn>button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            border: 1px solid black;
            color: black;
            border-radius: 50px;
            margin-top: 20px;
            margin-right: 30px;
        }

        .mytitle2 {
            width: 500px;
            height: 400px;
            margin: 20px 0px 20px 20px;
            padding: 20px 20px 20px 20px;
            border: 1px solid black;
        }

        .myposter {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
        }
    </style>
    <script>
        // //DB에서 영화 정보를 가져 온 후 출력
        $(document).ready(function () {
            show_order2();
        });
        
        function show_order2() {
            fetch("/movies2").then(res => res.json()).then(data => {
                let rows = data['result2']
                $('#test1').empty()
                rows.forEach((a) => {
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let comment = a['comment']
                    let star = a['star']
                    let director = a['director']
                    let character1 = a['character1']
                    let character2 = a['character2']
                    let character3 = a['character3']

                    let stars = ('⭐').repeat(star)

                    let temp_html1 = `<div class="mypost">
                                            <div class="mytitle">
                                                <br>
                                            <div class="myposter">
                                                <br>
                                                <div><img src="${image}"
                                                style="width:300px; height:400px;" /> </div>
                                                <div> <h1> ${stars} </h1> </div>
                                            </div>
                                                
                                                <div class="mytitle2">
                                                    <div> <h1> ${title} </h1> </div>
                                                    <br>
                                                    <div> <h4> ${desc} </h4> </div>
                                                    <br>
                                                    <div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
                                                </div>
                                        </div>
                                            <div class="mytxt">
                                                <h3> 등록자 관람평 : ${comment} </h3>
                                        </div>
                                    
                                        <div class="mytxt">
                                            <h1> 개인 관람평 </h1>
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="name" placeholder="url" />
                                                <label for="floatingInput">닉네임</label>
                                            </div>
                                            <div class="form-floating">
                                                <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                                                    style="height: 100px"></textarea>
                                                <label for="floatingTextarea2">관람평</label>
                                            </div>
                                            <div class="mybtn">
                                                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                                            </div>
                                    
                                            <br>
                                    
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">닉네임</th>
                                                        <th scope="col">관람평</th>
                                                        <th scope="col">삭제</th>
                                                    </tr>
                                                </thead>
                                        </div>`
                    $('#test1').append(temp_html1)
                })
            })
        }


        // --------------관람평 등록, 삭제----------------------
        // B : 데이터 받기 
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            fetch("/subB2").then(res => res.json()).then(data => {
                let rows = data['result']

                rows.forEach((a) => {
                    let id = a['id']
                    let comment = a['comment']

                    // 데이터 입력
                    let temp_html = `<tr>
                                    <td>${id}</td> 
                                    <td> ${comment} </td>
                                    <td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
                                    </tr>`
                    $('#a11').append(temp_html)
                })
            })
        }

        //  A : 데이터 보내기
        function save() {
            let id = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData()
            formData.append("id_give", id)
            formData.append("comment_give", comment)

            fetch("/subA2", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['msg'])
                window.location.reload()
            })
        }

        // 데이터 삭제 기능
        function del(a) {
            let formData = new FormData()
            let id = a
            formData.append("id_del", id)

            fetch("/subC2", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['del'])
                window.location.reload()
            })
        }


    </script>
</head>

<body>
    <div class=mylogo>
        <br>
        <p style="font-size:50px;"> 비전5 영화 </p>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="test1">
        <div class="mypost">
            <div class="mytitle">
                <br>
                <div class="myposter">
                    <br>
                    <div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                            style="width:300px; height:400px;" /> </div>
                    <div>
                        <h1> ⭐⭐⭐ </h1>
                    </div>
                </div>

                <div class="mytitle2">
                    <div>
                        <h1> 제목 </h1>
                    </div>
                    <br>
                    <div>
                        <h4> 상세설명 </h4>
                    </div>
                    <br>
                    <div>
                        <h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
                    </div>
                </div>
            </div>
            <div class="mytxt">
                <h1> 코멘트 </h1>
            </div>

            <div class="mytxt">
                <h1> 개인 관람평 </h1>
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="name" placeholder="url" />
                    <label for="floatingInput">닉네임</label>
                </div>
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                        style="height: 100px"></textarea>
                    <label for="floatingTextarea2">관람평</label>
                </div>
                <div class="mybtn">
                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                </div>

                <br>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">닉네임</th>
                            <th scope="col">관람평</th>
                            <th scope="col">삭제</th>
                        </tr>
                    </thead>
            </div>
        </div>
</body>

 

sub3.html  => 김근호 님

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

<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">

    <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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <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>

    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
            font-family: 'Nanum Myeongjo', serif;
        }

        .mylogo {
            text-indent: 25px;

            position: fixed;

            color: black;
            background-color: #fff;

            width: 100%;
            height: 150px;
            top: 0%;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            z-index: 3;
        }

        .mypost {
            width: 1000px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mytitle {
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mytxt {
            text-align: center;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;
        }

        .mybtn>button:hover {
            border: 2px solid black;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mybtn>button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            border: 1px solid black;
            color: black;
            border-radius: 50px;
            margin-top: 20px;
            margin-right: 30px;
        }

        .mytitle2 {
            width: 500px;
            height: 400px;
            margin: 20px 0px 20px 20px;
            padding: 20px 20px 20px 20px;
            border: 1px solid black;
        }

        .myposter {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
        }
    </style>
    <script>
        // //DB에서 영화 정보를 가져 온 후 출력
        $(document).ready(function () {
            show_order2();
        });
        
        function show_order2() {
            fetch("/movies3").then(res => res.json()).then(data => {
                let rows = data['result3']
                $('#test1').empty()
                rows.forEach((a) => {
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let comment = a['comment']
                    let star = a['star']
                    let director = a['director']
                    let character1 = a['character1']
                    let character2 = a['character2']
                    let character3 = a['character3']

                    let stars = ('⭐').repeat(star)

                    let temp_html1 = `<div class="mypost">
                                            <div class="mytitle">
                                                <br>
                                            <div class="myposter">
                                                <br>
                                                <div><img src="${image}"
                                                style="width:300px; height:400px;" /> </div>
                                                <div> <h1> ${stars} </h1> </div>
                                            </div>
                                                
                                                <div class="mytitle2">
                                                    <div> <h1> ${title} </h1> </div>
                                                    <br>
                                                    <div> <h4> ${desc} </h4> </div>
                                                    <br>
                                                    <div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
                                                </div>
                                        </div>
                                            <div class="mytxt">
                                                <h3> 등록자 관람평 : ${comment} </h3>
                                        </div>
                                    
                                        <div class="mytxt">
                                            <h1> 개인 관람평 </h1>
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="name" placeholder="url" />
                                                <label for="floatingInput">닉네임</label>
                                            </div>
                                            <div class="form-floating">
                                                <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                                                    style="height: 100px"></textarea>
                                                <label for="floatingTextarea2">관람평</label>
                                            </div>
                                            <div class="mybtn">
                                                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                                            </div>
                                    
                                            <br>
                                    
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">닉네임</th>
                                                        <th scope="col">관람평</th>
                                                        <th scope="col">삭제</th>
                                                    </tr>
                                                </thead>
                                        </div>`
                    $('#test1').append(temp_html1)
                })
            })
        }


        // --------------관람평 등록, 삭제----------------------
        // B : 데이터 받기 
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            fetch("/subB3").then(res => res.json()).then(data => {
                let rows = data['result']

                rows.forEach((a) => {
                    let id = a['id']
                    let comment = a['comment']

                    // 데이터 입력
                    let temp_html = `<tr>
                                    <td>${id}</td> 
                                    <td> ${comment} </td>
                                    <td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
                                    </tr>`
                    $('#a11').append(temp_html)
                })
            })
        }

        //  A : 데이터 보내기
        function save() {
            let id = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData()
            formData.append("id_give", id)
            formData.append("comment_give", comment)

            fetch("/subA3", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['msg'])
                window.location.reload()
            })
        }

        // 데이터 삭제 기능
        function del(a) {
            let formData = new FormData()
            let id = a
            formData.append("id_del", id)

            fetch("/subC3", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['del'])
                window.location.reload()
            })
        }


    </script>
</head>

<body>
    <div class=mylogo>
        <br>
        <p style="font-size:50px;"> 비전5 영화 </p>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="test1">
        <div class="mypost">
            <div class="mytitle">
                <br>
                <div class="myposter">
                    <br>
                    <div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                            style="width:300px; height:400px;" /> </div>
                    <div>
                        <h1> ⭐⭐⭐ </h1>
                    </div>
                </div>

                <div class="mytitle2">
                    <div>
                        <h1> 제목 </h1>
                    </div>
                    <br>
                    <div>
                        <h4> 상세설명 </h4>
                    </div>
                    <br>
                    <div>
                        <h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
                    </div>
                </div>
            </div>
            <div class="mytxt">
                <h1> 코멘트 </h1>
            </div>

            <div class="mytxt">
                <h1> 개인 관람평 </h1>
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="name" placeholder="url" />
                    <label for="floatingInput">닉네임</label>
                </div>
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                        style="height: 100px"></textarea>
                    <label for="floatingTextarea2">관람평</label>
                </div>
                <div class="mybtn">
                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                </div>

                <br>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">닉네임</th>
                            <th scope="col">관람평</th>
                            <th scope="col">삭제</th>
                        </tr>
                    </thead>
            </div>
        </div>
</body>

 

sub4.html  => 김근호 님

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

<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">

    <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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <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>

    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
            font-family: 'Nanum Myeongjo', serif;
        }

        .mylogo {
            text-indent: 25px;

            position: fixed;

            color: black;
            background-color: #fff;

            width: 100%;
            height: 150px;
            top: 0%;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            z-index: 3;
        }

        .mypost {
            width: 1000px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mytitle {
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mytxt {
            text-align: center;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;
        }

        .mybtn>button:hover {
            border: 2px solid black;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mybtn>button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            border: 1px solid black;
            color: black;
            border-radius: 50px;
            margin-top: 20px;
            margin-right: 30px;
        }

        .mytitle2 {
            width: 500px;
            height: 400px;
            margin: 20px 0px 20px 20px;
            padding: 20px 20px 20px 20px;
            border: 1px solid black;
        }

        .myposter {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
        }
    </style>
    <script>
        // //DB에서 영화 정보를 가져 온 후 출력
        $(document).ready(function () {
            show_order2();
        });
        
        function show_order2() {
            fetch("/movies4").then(res => res.json()).then(data => {
                let rows = data['result4']
                $('#test1').empty()
                rows.forEach((a) => {
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let comment = a['comment']
                    let star = a['star']
                    let director = a['director']
                    let character1 = a['character1']
                    let character2 = a['character2']
                    let character3 = a['character3']

                    let stars = ('⭐').repeat(star)

                    let temp_html1 = `<div class="mypost">
                                            <div class="mytitle">
                                                <br>
                                            <div class="myposter">
                                                <br>
                                                <div><img src="${image}"
                                                style="width:300px; height:400px;" /> </div>
                                                <div> <h1> ${stars} </h1> </div>
                                            </div>
                                                
                                                <div class="mytitle2">
                                                    <div> <h1> ${title} </h1> </div>
                                                    <br>
                                                    <div> <h4> ${desc} </h4> </div>
                                                    <br>
                                                    <div> <h5> 감독 : ${director} / 출연진 : ${character1}, ${character2}, ${character3} </h5> </div>
                                                </div>
                                        </div>
                                            <div class="mytxt">
                                                <h3> 등록자 관람평 : ${comment} </h3>
                                        </div>
                                    
                                        <div class="mytxt">
                                            <h1> 개인 관람평 </h1>
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="name" placeholder="url" />
                                                <label for="floatingInput">닉네임</label>
                                            </div>
                                            <div class="form-floating">
                                                <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                                                    style="height: 100px"></textarea>
                                                <label for="floatingTextarea2">관람평</label>
                                            </div>
                                            <div class="mybtn">
                                                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                                            </div>
                                    
                                            <br>
                                    
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">닉네임</th>
                                                        <th scope="col">관람평</th>
                                                        <th scope="col">삭제</th>
                                                    </tr>
                                                </thead>
                                        </div>`
                    $('#test1').append(temp_html1)
                })
            })
        }


        // --------------관람평 등록, 삭제----------------------
        // B : 데이터 받기 
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            fetch("/subB4").then(res => res.json()).then(data => {
                let rows = data['result']

                rows.forEach((a) => {
                    let id = a['id']
                    let comment = a['comment']

                    // 데이터 입력
                    let temp_html = `<tr>
                                    <td>${id}</td> 
                                    <td> ${comment} </td>
                                    <td> <button onclick ="del('${id}'+'${comment}')">삭제</button></td>
                                    </tr>`
                    $('#a11').append(temp_html)
                })
            })
        }

        //  A : 데이터 보내기
        function save() {
            let id = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData()
            formData.append("id_give", id)
            formData.append("comment_give", comment)

            fetch("/subA4", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['msg'])
                window.location.reload()
            })
        }

        // 데이터 삭제 기능
        function del(a) {
            let formData = new FormData()
            let id = a
            formData.append("id_del", id)

            fetch("/subC4", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['del'])
                window.location.reload()
            })
        }


    </script>
</head>

<body>
    <div class=mylogo>
        <br>
        <p style="font-size:50px;"> 비전5 영화 </p>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="test1">
        <div class="mypost">
            <div class="mytitle">
                <br>
                <div class="myposter">
                    <br>
                    <div><img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                            style="width:300px; height:400px;" /> </div>
                    <div>
                        <h1> ⭐⭐⭐ </h1>
                    </div>
                </div>

                <div class="mytitle2">
                    <div>
                        <h1> 제목 </h1>
                    </div>
                    <br>
                    <div>
                        <h4> 상세설명 </h4>
                    </div>
                    <br>
                    <div>
                        <h5> 감독 : 감독이름 / 출연진 : 출연자1, 출연자2, 출연자3 </h5>
                    </div>
                </div>
            </div>
            <div class="mytxt">
                <h1> 코멘트 </h1>
            </div>

            <div class="mytxt">
                <h1> 개인 관람평 </h1>
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="name" placeholder="url" />
                    <label for="floatingInput">닉네임</label>
                </div>
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                        style="height: 100px"></textarea>
                    <label for="floatingTextarea2">관람평</label>
                </div>
                <div class="mybtn">
                    <button type="button" class="btn btn-outline-dark">등록하기</button>
                </div>

                <br>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">닉네임</th>
                            <th scope="col">관람평</th>
                            <th scope="col">삭제</th>
                        </tr>
                    </thead>
            </div>
        </div>
</body>

 

app.py  => 김장원 님, 한지훈(본인)

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.rsr8xyc.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

# 개별 페이지 출력
@app.route('/')
def home():
    return render_template('index.html')

@app.route('/sub1')
def sub1():
    return render_template('sub1.html')


@app.route('/sub2')
def sub2():
    return render_template('sub2.html')


@app.route('/sub3')
def sub3():
    return render_template('sub3.html')

@app.route('/sub4')
def sub4():
    return render_template('sub4.html')

@app.route('/input')
def input():
    return render_template('input.html')


# 관람평 데이터1 -----------------------------
# A : 데이터 받기
@app.route("/subA1", methods=["post"])
def subA1():
   id_receive = request.form['id_give']
   comment_receive = request.form['comment_give']
   sum = id_receive + comment_receive
   doc = {
       'id': id_receive,
       'comment' : comment_receive,
       'sum' : sum
   }
   db.vision5_comment1.insert_one(doc)
   return jsonify({'msg': '저장완료'})

#  B : 데이터 보내기
@app.route("/subB1", methods=["GET"])
def subB1():
    comment_data = list(db.vision5_comment1.find({},{'_id':False}))
    return jsonify({'result': comment_data})

#삭제기능
@app.route("/subC1", methods=["post"])
def subC1():
    id_receive = request.form['id_del']
    db.vision5_comment1.delete_one({'sum':id_receive})
    return jsonify({'del': '삭제 성공'})

# 관람평 데이터2 -----------------------------
# A : 데이터 받기
@app.route("/subA2", methods=["post"])
def subA2():
   id_receive = request.form['id_give']
   comment_receive = request.form['comment_give']
   sum = id_receive + comment_receive
   doc = {
       'id': id_receive,
       'comment' : comment_receive,
       'sum' : sum
   }
   db.vision5_comment2.insert_one(doc)
   return jsonify({'msg': '저장완료'})

#  B : 데이터 보내기
@app.route("/subB2", methods=["GET"])
def subB2():
    comment_data = list(db.vision5_comment2.find({},{'_id':False}))
    return jsonify({'result': comment_data})

#삭제기능
@app.route("/subC2", methods=["post"])
def subC2():
    id_receive = request.form['id_del']
    db.vision5_comment2.delete_one({'sum':id_receive})
    return jsonify({'del': '삭제 성공'})

# 관람평 데이터3 -----------------------------
# A : 데이터 받기
@app.route("/subA3", methods=["post"])
def subA3():
   id_receive = request.form['id_give']
   comment_receive = request.form['comment_give']
   sum = id_receive + comment_receive
   doc = {
       'id': id_receive,
       'comment' : comment_receive,
       'sum' : sum
   }
   db.vision5_comment3.insert_one(doc)
   return jsonify({'msg': '저장완료'})

#  B : 데이터 보내기
@app.route("/subB3", methods=["GET"])
def subB3():
    comment_data = list(db.vision5_comment3.find({},{'_id':False}))
    return jsonify({'result': comment_data})

#삭제기능
@app.route("/subC3", methods=["post"])
def subC3():
    id_receive = request.form['id_del']
    db.vision5_comment3.delete_one({'sum':id_receive})
    return jsonify({'del': '삭제 성공'})

# 관람평 데이터4 -----------------------------
# A : 데이터 받기
@app.route("/subA4", methods=["post"])
def subA4():
   id_receive = request.form['id_give']
   comment_receive = request.form['comment_give']
   sum = id_receive + comment_receive
   doc = {
       'id': id_receive,
       'comment' : comment_receive,
       'sum' : sum
   }
   db.vision5_comment4.insert_one(doc)
   return jsonify({'msg': '저장완료'})

#  B : 데이터 보내기
@app.route("/subB4", methods=["GET"])
def subB4():
    comment_data = list(db.vision5_comment4.find({},{'_id':False}))
    return jsonify({'result': comment_data})

#삭제기능
@app.route("/subC4", methods=["post"])
def subC4():
    id_receive = request.form['id_del']
    db.vision5_comment4.delete_one({'sum':id_receive})
    return jsonify({'del': '삭제 성공'})


# 웹 스크롤링 --------------------------------------------
# 웹 스크롤링 데이터 mongoDB에 저장
import requests
from bs4 import BeautifulSoup

@app.route('/input', methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    # 입력한 url 저장
    comment_receive = request.form['comment_give']
    # 입력한 comment 저장
    star_receive = request.form['star_give']
    # 입력한 별점 저장

    headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url_receive,headers=headers)
    soup = BeautifulSoup(data.text, 'html.parser')

    ogtitle = soup.select_one('meta[property="og:title"]')['content']
    ogimage = soup.select_one('meta[property="og:image"]')['content']
    # ogdesc = soup.select_one('meta[property="og:description"]')['content'] # cgv에는 og:description 태그 부분이 없기에 주석처리
    # meta tag에서 제목, 이미지, 간단 설명 스크랩하는 코드

    director = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(2) > a').text
    # 감독 정보 selector 복사
    character = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(5) > a:nth-child(1)').text
    # 출연진 정보 selector 복사
    character_2 = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(5) > a:nth-child(2)').text
    # 출연진이 따로 따로 저장되어 있어 두번째 등장인물 저장
    character_3 = soup.select_one('#select_main > div.sect-base-movie > div.box-contents > div.spec > dl > dd:nth-child(5) > a:nth-child(3)').text
    # 세 명까지 저장
    desc = soup.select_one('#menu > div.col-detail > div.sect-story-movie').text.strip()
    # meta tag에 없던 세부 설명을 가져오기 위해 selector 따로 복사

    doc = {
        'title' : ogtitle.replace(' | 영화 그 이상의 감동. CGV',''),
        # 'desc' : ogdesc,
        'desc' : desc,
        'image' : ogimage,
        'comment' : comment_receive,
        'star' : star_receive,
        'director' : director,
        'character1' : character,
        'character2' : character_2,
        'character3' : character_3
    }
    db.movies.insert_one(doc)
    # main이라는 콜렉션 생성, 데이터들 가져와서 저장하기

    return jsonify({'msg':'등록 완료!'}) # 위 코드가 정상 작동 시 등록 완료라는 메시지 반환

# DB 데이터 -> 메인에 출력--------------------------------------------------------------------------
@app.route("/movies", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies():
    all_movies = list(db.movies.find({},{'_id':False})) 
    # 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
    # db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
    return jsonify({'result': all_movies}) # 저장한 값 반환

# DB 데이터 -> 상세 페이지에 출력*****************************************************************************
# DB 데이터 -> 가디언즈 오브 갤럭시-Volume 3의 상세 페이지에 출력-----------------------------------------------
@app.route("/movies1", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies1():
    all_movies1 = list(db.movies.find({'title':"가디언즈 오브 갤럭시-Volume 3"},{'_id':False})) 
    # 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
    # db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
    return jsonify({'result1': all_movies1}) # 저장한 값 반환

# DB 데이터 -> 분노의 질주-라이드 오어 다이의 상세 페이지에 출력-------------------------------------------------
@app.route("/movies2", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies2():
    all_movies2 = list(db.movies.find({'title':"분노의 질주-라이드 오어 다이"},{'_id':False})) 
    # 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
    # db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
    return jsonify({'result2': all_movies2}) # 저장한 값 반환

# DB 데이터 -> 롱디의 상세 페이지에 출력------------------------------------------------------------------------
@app.route("/movies3", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies3():
    all_movies3 = list(db.movies.find({'title':"롱디"},{'_id':False})) 
    # 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
    # db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
    return jsonify({'result3': all_movies3}) # 저장한 값 반환

# DB 데이터 -> 메리 마이 데드 바디------------------------------------------------------------------------------
@app.route("/movies4", methods=["GET"]) # 메인화면에서 목록을 불러오기 위한 get
def movies4():
    all_movies4 = list(db.movies.find({'title':"메리 마이 데드 바디"},{'_id':False})) 
    # 코멘트, 감독, 등장인물은 메인화면에서 표시하지 않을 것이기 때문에 제외
    # db에서 main 콜렉션에 있는 데이터들을 리스트화 해서 저장
    return jsonify({'result4': all_movies4}) # 저장한 값 반환

if __name__ == '__main__':
    app.run('0.0.0.0',port=5000,debug=True)

 

크게 위와 같이 만들어졌고 그 외에도 각자 여력이 있을 때 자신의 파트가 아니더라도 서로 도움을 주신 덕분에 거의 3일만에 그럴듯한 페이지가 완성되었습니다.

저작자표시

'TIL > 내배캠 사전캠프' 카테고리의 다른 글

23.05.11  (0) 2023.05.11
23.05.10  (0) 2023.05.10
23.05.09  (0) 2023.05.09
23.05.08  (0) 2023.05.08

관련글

티스토리툴바