[SpartaCodingClub] 웹서비스 개발 프로젝트 : "FaceTheNew" 개발일지(2)

Moonsun Kim·2021년 10월 23일
FaceTheNewprojectspartacodingclubwebweb service교환학생
1

웹서비스 개발 프로젝트 : "Face The New"

목록 보기
3/4
post-thumbnail

FaceTheNew

1. 서버

[미완 코드]

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

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbfacethenew


# HTML 화면 보여주기
@app.route('/')
def home():
    return render_template('mainhome.html')

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

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

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

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


# API 역할을 하는 부분
@app.route('/searchunivsinfo', methods=['GET'])
def listing():
    univsinfo = list(db.searchunivs.find({}, {'_id': False, 'formControlContinent': False, 'formControlNation': False, 'formControlUniv': False}))
    return jsonify({'all_univsinfo': univsinfo})


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

2. '파견 대학 검색' page

[미완 코드]

<!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">
        <title>FaceTheNew : 파견 대학 검색</title>

        <link rel="shortcut icon"
              href="https://media.vlpt.us/images/waterlily_0101/post/b0a997db-b387-4f8f-a9c5-5042800353db/world-map.png">

        <meta property="og:image"
              content="https://media.vlpt.us/images/waterlily_0101/post/fb89d14c-a927-46b9-94fc-bcf7b237df3e/FaceTheNew-MAIN-TITLE-%EC%9B%90%EB%B3%B8.gif">
        <meta property="og:title" content="FaceTheNew : 파견 대학 검색">
        <meta property="og:description" content="">

        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

        <style>
            * {
                font-family: 'Noto Sans KR', sans-serif;
            }

            .mytitle {
                margin-top: 50px;
                margin-bottom: 50px;
                text-align: center;
                cursor: pointer;
            }

            .mybtn-group {
                background-color: black;
                width: 1400px;
                height: 45px;
                margin: 25px auto 0 auto;

                border-top: 1px black solid;
                border-bottom: 1px black solid;
            }

            .mybtn-secondary {
                background-color: black;
                color: white;

                width: 200px;
                height: 45px;
                border: 1px black solid;;

                font-size: 17px;

                cursor: pointer;

                transition-duration: 0.3s;
            }

            .mybtn-secondary:hover {color:#A3A4FF}

            .mybtn-secondary:active {color:grey}

            .subtitle {
                background-color: white;
                width: 1400px;
                height: 70px;
                line-height: 70px;

                margin: 120px auto 60px auto;

                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;
            }

            .searchuniv {
                background-color: lightgrey;
                width: 1100px;
                height: 50px;
                line-height: 50px;

                border-radius: 13px;

                color: white;
                font-size: 17px;

                margin: 0 auto 60px auto;

                box-shadow: 5px 5px 5px #A3A4FF;
                transition-duration: 0.3s;
            }

            .input-group-text {
                padding:40px;
            }

            .form-control-continent {
                background-color: lightgrey;
                width: 282.3px;
                height: 50px;
                line-height: 50px;

                border-left: 1px lightgrey solid;
                border-right: 1px lightgrey solid;
                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;

                padding-left: 10px;

                color: white;
                font-size: 17px;

                cursor: pointer;
            }

            .form-control-nation {
                background-color: lightgrey;
                width: 282.3px;
                height: 50px;
                line-height: 50px;

                border-left: 1px lightgrey solid;
                border-right: 1px lightgrey solid;
                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;

                padding-left: 10px;

                color: white;
                font-size: 17px;

                cursor: pointer;
            }

            .form-control-univ {
                background-color: lightgrey;
                width: 282.3px;
                height: 50px;
                line-height: 50px;

                border-left: 1px lightgrey solid;
                border-right: 1px lightgrey solid;
                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;

                padding-left: 10px;

                color: white;
                font-size: 17px;

                cursor: pointer;
            }

            .sch_smit {
                background-color: lightgrey;
                height: 50px;
                width: 50px;
                line-height: 50px;

                border: 1px lightgrey solid;
                border-radius: 13px;

                background-image: url("https://media.vlpt.us/images/waterlily_0101/post/cd260f99-d6dc-49cf-b144-bf8f3af30a49/search.png");
                background-position: center;
                background-size: cover;

                float: right;

                cursor: pointer;
            }

            .univimage {
                background-color: white;
                width: 1400px;
                height: 500px;
                margin: 0 auto 0 auto;
            }

            table {
                width: 1400px;
                margin: 0 auto 0 auto;
            }

            td {
                padding: 0 0 20px 0;
                width: 33%;
            }

            .someinfo {
                background-color: lightgrey;
                width: 1400px;
                height: 50px;
                line-height: 50px;
                margin: 0 auto 0 auto;

                text-align: center;

                vertical-align: text-bottom;
            }

            .messagebox2 {
                width: 1400px;
                margin: 15px auto 300px auto;

                border: 1px black solid;
            }
        </style>

        <script type="text/javascript">
            function categoryOption1(e) {
                var formControlNation_asia = ["-- 국가 --", "대만", "레바논", "말레이시아", "베트남", "우즈베키스탄", "인도네시아", "일본", "중국", "태국", "파키스탄"];
                var formControlNation_europe = ["-- 국가 --", "노르웨이", "독일", "러시아", "스웨덴", "스위스", "스페인", "영국", "터키", "프랑스"];
                var formControlNation_northamerica = ["-- 국가 --", "멕시코", "미국", "캐나다"];
                var formControlNation_southamerica = ["-- 국가 --", "브라질", "우루과이", "칠레", "콜롬비아"];
                var formControlNation_oceania = ["-- 국가 --", "호주"];
                var formControlNation_africa = ["-- 국가 --", "모로코", "이집트"];
                var target = document.getElementById("formControlNation");

                if(e.value == "asia") var d = formControlNation_asia;
                else if(e.value == "europe") var d = formControlNation_europe;
                else if(e.value == "northamerica") var d = formControlNation_northamerica;
                else if(e.value == "southamerica") var d = formControlNation_southamerica;
                else if(e.value == "oceania") var d = formControlNation_oceania;
                else if(e.value == "africa") var d = formControlNation_africa;

                target.options.length = 0;

                for (x in d) {
                    var opt = document.createElement("option");
                    opt.value = d[x];
                    opt.innerHTML = d[x];
                    target.appendChild(opt);
                }
            }

            function categoryOption2(e) {
                var formControlUniv_대만 = ["-- 대학 --", ""];
                var formControlUniv_레바논 = ["-- 대학 --", ""];
                var formControlUniv_말레이시아 = ["-- 대학 --", ""];
                var formControlUniv_베트남 = ["-- 대학 --", ""];
                var formControlUniv_우즈베키스탄 = ["-- 대학 --", ""];
                var formControlUniv_인도네시아 = ["-- 대학 --", ""];
                var formControlUniv_일본 = ["-- 대학 --", "Sapporo University"];
                var formControlUniv_중국 = ["-- 대학 --", "Jinan University"];
                var formControlUniv_태국 = ["-- 대학 --", ""];
                var formControlUniv_파키스탄 = ["-- 대학 --", ""];

                var formControlUniv_노르웨이 = ["-- 대학 --", ""];
                var formControlUniv_독일 = ["-- 대학 --", ""];
                var formControlUniv_러시아 = ["-- 대학 --", ""];
                var formControlUniv_스웨덴 = ["-- 대학 --", ""];
                var formControlUniv_스위스 = ["-- 대학 --", ""];
                var formControlUniv_스페인 = ["-- 대학 --", ""];
                var formControlUniv_영국 = ["-- 대학 --", ""];
                var formControlUniv_터키 = ["-- 대학 --", ""];
                var formControlUniv_프랑스 = ["-- 대학 --","Neoma Business School"];

                var formControlUniv_멕시코 = ["-- 대학 --", ""];
                var formControlUniv_미국 = ["-- 대학 --", "Loyola University New Orleans", "University of Wisconsin-Stout"];
                var formControlUniv_캐나다 = ["-- 대학 --", "University of Ottawa", "University of Saskatchewan"];

                var formControlUniv_브라질 = ["-- 대학 --", ""];
                var formControlUniv_우루과이 = ["-- 대학 --", ""];
                var formControlUniv_칠레 = ["-- 대학 --", "Finis Terrae University"];
                var formControlUniv_콜롬비아 = ["-- 대학 --", ""];

                var formControlUniv_호주 = ["-- 대학 --", "Deakin University"];

                var formControlUniv_모로코 = ["-- 대학 --", "Groupe ISCAE"];
                var formControlUniv_이집트 = ["-- 대학 --", ""];

                var target = document.getElementById("formControlUniv");

                if(e.value == "대만") var d = formControlUniv_대만;
                else if(e.value == "레바논") var d = formControlUniv_레바논;
                else if(e.value == "말레이시아") var d = formControlUniv_말레이시아;
                else if(e.value == "베트남") var d = formControlUniv_베트남;
                else if(e.value == "우즈베키스탄") var d = formControlUniv_우즈베키스탄;
                else if(e.value == "인도네시아") var d = formControlUniv_인도네시아;
                else if(e.value == "일본") var d = formControlUniv_일본;
                else if(e.value == "중국") var d = formControlUniv_중국;
                else if(e.value == "태국") var d = formControlUniv_태국;
                else if(e.value == "파키스탄") var d = formControlUniv_파키스탄;

                else if(e.value == "노르웨이") var d = formControlUniv_노르웨이;
                else if(e.value == "독일") var d = formControlUniv_독일;
                else if(e.value == "러시아") var d = formControlUniv_러시아;
                else if(e.value == "스웨덴") var d = formControlUniv_스웨덴;
                else if(e.value == "스위스") var d = formControlUniv_스위스;
                else if(e.value == "스페인") var d = formControlUniv_스페인;
                else if(e.value == "영국") var d = formControlUniv_영국;
                else if(e.value == "터키") var d = formControlUniv_터키;
                else if(e.value == "프랑스") var d = formControlUniv_프랑스;

                else if(e.value == "멕시코") var d = formControlUniv_멕시코;
                else if(e.value == "미국") var d = formControlUniv_미국;
                else if(e.value == "캐나다") var d = formControlUniv_캐나다;

                else if(e.value == "브라질") var d = formControlUniv_브라질;
                else if(e.value == "우루과이") var d = formControlUniv_우루과이;
                else if(e.value == "칠레") var d = formControlUniv_칠레;
                else if(e.value == "콜롬비아") var d = formControlUniv_콜롬비아;

                else if(e.value == "호주") var d = formControlUniv_호주;

                else if(e.value == "모로코") var d = formControlUniv_모로코;
                else if(e.value == "이집트") var d = formControlUniv_이집트;

                target.options.length = 0;

                for (x in d) {
                    var opt = document.createElement("option");
                    opt.value = d[x];
                    opt.innerHTML = d[x];
                    target.appendChild(opt);
                }
            }

            function SearchUniv() {
                $.ajax({
                    type: "GET",
                    url: "/searchunivsinfo",
                    data: {},
                    success: function(response) {
                        let univsinfo = response['all_univsinfo']
                        console.log(univsinfo)
                    }
                })
            }
        </script>
    </head>
    <body>
        <div class="mytitle">
            <img src="https://media.vlpt.us/images/waterlily_0101/post/02ff83ce-0474-4e0d-b886-69cf1b445588/FaceTheNew-TITLE-%EC%9B%90%EB%B3%B8-%EC%B5%9C%EC%A2%85.gif"
                 style="max-width:30%; height: auto;"
                 onclick="location.href='/'">
        </div>

        <div class="mybtn-group">
            <button class="mybtn-secondary hover1" onclick="location.href='/aboutfacethenew'">FaceTheNew 소개</button>
            <button class="mybtn-secondary hover1" onclick="location.href='/requireddocs'">교환학생 지원 서류</button>
            <button class="mybtn-secondary hover1" onclick="location.href='/searchunivs'">파견 대학 검색</button>
            <button class="mybtn-secondary hover1" onclick="location.href='/lifehack'">교환학생 학교생활 Tip</button>
        </div>

        <div>
            <h1 class="subtitle">◦ 파견 대학 검색</h1>

            <div class="searchuniv" id="searchUniv" name="searchUniv">
                <span class="input-group-text" id="inputGroupPrepend">파견 대학 검색</span>
                <select class="form-control-continent" id="formControlContinent" name="formControlContinent" onchange="categoryOption1(this)" aria-describedby="inputGroupPrepend1" required>
                    <option name="Continent" value="option1">대륙 </option>
                    <option name="Continent" value="asia">아시아</option>
                    <option name="Continent" value="europe">유럽</option>
                    <option name="Continent" value="northamerica">북아메리카</option>
                    <option name="Continent" value="southamerica">남아메리카</option>
                    <option name="Continent" value="oceania">오세아니아</option>
                    <option name="Continent" value="africa">아프리카</option>
                </select>
                <select class="form-control-nation" id="formControlNation" name="formControlNation" onchange="categoryOption2(this)" aria-describedby="inputGroupPrepend2" required>
                    <option value="option2">국가</option>
                </select>
                <select class="form-control-univ" id="formControlUniv" name="formControlUniv" aria-describedby="inputGroupPrepend2" required>
                    <option value="option3">대학</option>
                </select>
                <button id="search_btn" type="button" title="검색" class="sch_smit" onclick="SearchUniv()"></button>
            </div>

            <div class="univimage" id="UnivImage">
                <img src="https://t4.ftcdn.net/jpg/02/87/59/67/240_F_287596718_0Y53hkbfo5wTYUg31Ogdqs93YRA1QDpG.jpg"
                     alt="univimage"
                     style="width: 1400px; height: 500px;">
            </div>

            <div id="SearchUnivResult" class="searchunivresult">
                <table id="message-box">
                    <tbody id="messagebox1">
                    <tr>
                        <td><h3>◦ University Name</h3><span id="UnivName"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;대학교 이름</h4></span></td>
                    </tr>
                    <tr>
                        <td><h3>◦ Location</h3><span id="UnivLocation"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;대학교 위치</h4></span></td>
                    </tr>
                    <tr>
                        <td><h3>◦ Office Telephone Number</h3><span id="UnivOfficeTelNum"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;대학교 전화번호</h4></span>
                        </td>
                        <td><h3>◦ Contact Email</h3><span id="UnivContactEmail"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;대학교 이메일</h4></span>
                        </td>
                        <td><h3>◦ Website</h3><span id="UnivWebsite"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;대학교 웹사이트</h4></span>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div class="someinfo">
                    <p>학교 유형:&nbsp;&nbsp;<span style="color: white;">사립/공립</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>학교 규모:&nbsp;&nbsp;<span style="color: white;">S/M/L/XL</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>재적학생수:&nbsp;&nbsp;<span style="color: white;">00명</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>취업률:&nbsp;&nbsp;<span style="color: white;">00%</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>Exam Type:&nbsp;&nbsp;<span style="color: white;">TOEFL, IELTS</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>QS World University Ranking:&nbsp;&nbsp;<span style="color: white;">00등</span></span></p>
                </div>

                <div class="messagebox2" id="messagebox2">
                    <h3>◦ 학교 소개</h3>
                    <p>학교 소개입니다.</p><br/>

                    <h3>◦ 설치 학과</h3>
                    <p>설치 학과는 00입니다.</p><br/>

                    <h3>◦ Study Duration</h3>
                    <p>학기 기간입니다.</p><br/>

                    <h3>◦ Requirement</h3>
                    <h5>- GPA</h5>
                    <p>000</p>
                    <h5>- Language Proficiency:</h5>
                    <p>000</p>
                </div>
            </div>
        </div>
    </body>
</html>

[문제점]

✅ 버튼(onclick="SearchUniv()")을 누르면 클라이언트가 선택한 대학의 정보를 Robo 3T에 저장되어 있는 searchunivs라는 collections에서 data를 가져와야 한다. 그런데 안 가져와져서 script에 작성한 function SearchUniv() 코드를 지우고 다시 처음부터 짜봤다. 일단 선택된 학교의 정보 말고, 모든 학교의 data를 가져오게끔 코드를 짜보았는데 success가 반응을 안 한다.

[모든 대학 정보를 db에서 가져오는 코드]

<!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">
        <title>FaceTheNew : 파견 대학 검색</title>

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

        <link rel="shortcut icon"
              href="https://media.vlpt.us/images/waterlily_0101/post/b0a997db-b387-4f8f-a9c5-5042800353db/world-map.png">

        <meta property="og:image"
              content="https://media.vlpt.us/images/waterlily_0101/post/fb89d14c-a927-46b9-94fc-bcf7b237df3e/FaceTheNew-MAIN-TITLE-%EC%9B%90%EB%B3%B8.gif">
        <meta property="og:title" content="FaceTheNew : 파견 대학 검색">
        <meta property="og:description" content="">

        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

        <style>
            * {
                font-family: 'Noto Sans KR', sans-serif;
            }

            .mytitle {
                margin-top: 50px;
                margin-bottom: 50px;
                text-align: center;
                cursor: pointer;
            }

            .mybtn-group {
                background-color: black;
                width: 1400px;
                height: 45px;
                margin: 25px auto 0 auto;

                border-top: 1px black solid;
                border-bottom: 1px black solid;
            }

            .mybtn-secondary {
                background-color: black;
                color: white;

                width: 200px;
                height: 45px;
                border: 1px black solid;;

                font-size: 17px;

                cursor: pointer;

                transition-duration: 0.3s;
            }

            .mybtn-secondary:hover {color:#A3A4FF}

            .mybtn-secondary:active {color:grey}

            .subtitle {
                background-color: white;
                width: 1400px;
                height: 70px;
                line-height: 70px;

                margin: 120px auto 60px auto;

                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;
            }

            .searchuniv {
                background-color: lightgrey;
                width: 1100px;
                height: 50px;
                line-height: 50px;

                border-radius: 13px;

                color: white;
                font-size: 17px;

                margin: 0 auto 60px auto;

                box-shadow: 5px 5px 5px #A3A4FF;
                transition-duration: 0.3s;
            }

            .input-group-text {
                padding:40px;
            }

            .form-control-continent {
                background-color: lightgrey;
                width: 282.3px;
                height: 50px;
                line-height: 50px;

                border-left: 1px lightgrey solid;
                border-right: 1px lightgrey solid;
                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;

                padding-left: 10px;

                color: white;
                font-size: 17px;

                cursor: pointer;
            }

            .form-control-nation {
                background-color: lightgrey;
                width: 282.3px;
                height: 50px;
                line-height: 50px;

                border-left: 1px lightgrey solid;
                border-right: 1px lightgrey solid;
                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;

                padding-left: 10px;

                color: white;
                font-size: 17px;

                cursor: pointer;
            }

            .form-control-univ {
                background-color: lightgrey;
                width: 282.3px;
                height: 50px;
                line-height: 50px;

                border-left: 1px lightgrey solid;
                border-right: 1px lightgrey solid;
                border-top: 1px lightgrey solid;
                border-bottom: 1px lightgrey solid;

                padding-left: 10px;

                color: white;
                font-size: 17px;

                cursor: pointer;
            }

            .sch_smit {
                background-color: lightgrey;
                height: 50px;
                width: 50px;
                line-height: 50px;

                border: 1px lightgrey solid;
                border-radius: 13px;

                background-image: url("https://media.vlpt.us/images/waterlily_0101/post/cd260f99-d6dc-49cf-b144-bf8f3af30a49/search.png");
                background-position: center;
                background-size: cover;

                float: right;

                cursor: pointer;
            }

            .univimage {
                background-color: white;
                width: 1400px;
                height: 500px;
                margin: 0 auto 0 auto;
            }

            table {
                width: 1400px;
                margin: 0 auto 0 auto;
            }

            td {
                padding: 0 0 20px 0;
                width: 33%;
            }

            .someinfo {
                background-color: lightgrey;
                width: 1400px;
                height: 50px;
                line-height: 50px;
                margin: 0 auto 0 auto;

                text-align: center;

                vertical-align: text-bottom;
            }

            .messagebox2 {
                width: 1400px;
                margin: 15px auto 300px auto;

                border: 1px black solid;
            }
        </style>

        <script type="text/javascript">
            function categoryOption1(e) {
                var formControlNation_asia = ["-- 국가 --", "대만", "레바논", "말레이시아", "베트남", "우즈베키스탄", "인도네시아", "일본", "중국", "태국", "파키스탄"];
                var formControlNation_europe = ["-- 국가 --", "노르웨이", "독일", "러시아", "스웨덴", "스위스", "스페인", "영국", "터키", "프랑스"];
                var formControlNation_northamerica = ["-- 국가 --", "멕시코", "미국", "캐나다"];
                var formControlNation_southamerica = ["-- 국가 --", "브라질", "우루과이", "칠레", "콜롬비아"];
                var formControlNation_oceania = ["-- 국가 --", "호주"];
                var formControlNation_africa = ["-- 국가 --", "모로코", "이집트"];
                var target = document.getElementById("formControlNation");

                if(e.value == "asia") var d = formControlNation_asia;
                else if(e.value == "europe") var d = formControlNation_europe;
                else if(e.value == "northamerica") var d = formControlNation_northamerica;
                else if(e.value == "southamerica") var d = formControlNation_southamerica;
                else if(e.value == "oceania") var d = formControlNation_oceania;
                else if(e.value == "africa") var d = formControlNation_africa;

                target.options.length = 0;

                for (x in d) {
                    var opt = document.createElement("option");
                    opt.value = d[x];
                    opt.innerHTML = d[x];
                    target.appendChild(opt);
                }
            }

            function categoryOption2(e) {
                var formControlUniv_대만 = ["-- 대학 --", ""];
                var formControlUniv_레바논 = ["-- 대학 --", ""];
                var formControlUniv_말레이시아 = ["-- 대학 --", ""];
                var formControlUniv_베트남 = ["-- 대학 --", ""];
                var formControlUniv_우즈베키스탄 = ["-- 대학 --", ""];
                var formControlUniv_인도네시아 = ["-- 대학 --", ""];
                var formControlUniv_일본 = ["-- 대학 --", "Sapporo University"];
                var formControlUniv_중국 = ["-- 대학 --", "Jinan University"];
                var formControlUniv_태국 = ["-- 대학 --", ""];
                var formControlUniv_파키스탄 = ["-- 대학 --", ""];

                var formControlUniv_노르웨이 = ["-- 대학 --", ""];
                var formControlUniv_독일 = ["-- 대학 --", ""];
                var formControlUniv_러시아 = ["-- 대학 --", ""];
                var formControlUniv_스웨덴 = ["-- 대학 --", ""];
                var formControlUniv_스위스 = ["-- 대학 --", ""];
                var formControlUniv_스페인 = ["-- 대학 --", ""];
                var formControlUniv_영국 = ["-- 대학 --", ""];
                var formControlUniv_터키 = ["-- 대학 --", ""];
                var formControlUniv_프랑스 = ["-- 대학 --","Neoma Business School"];

                var formControlUniv_멕시코 = ["-- 대학 --", ""];
                var formControlUniv_미국 = ["-- 대학 --", "Loyola University New Orleans", "University of Wisconsin-Stout"];
                var formControlUniv_캐나다 = ["-- 대학 --", "University of Ottawa", "University of Saskatchewan"];

                var formControlUniv_브라질 = ["-- 대학 --", ""];
                var formControlUniv_우루과이 = ["-- 대학 --", ""];
                var formControlUniv_칠레 = ["-- 대학 --", "Finis Terrae University"];
                var formControlUniv_콜롬비아 = ["-- 대학 --", ""];

                var formControlUniv_호주 = ["-- 대학 --", "Deakin University"];

                var formControlUniv_모로코 = ["-- 대학 --", "Groupe ISCAE"];
                var formControlUniv_이집트 = ["-- 대학 --", ""];

                var target = document.getElementById("formControlUniv");

                if(e.value == "대만") var d = formControlUniv_대만;
                else if(e.value == "레바논") var d = formControlUniv_레바논;
                else if(e.value == "말레이시아") var d = formControlUniv_말레이시아;
                else if(e.value == "베트남") var d = formControlUniv_베트남;
                else if(e.value == "우즈베키스탄") var d = formControlUniv_우즈베키스탄;
                else if(e.value == "인도네시아") var d = formControlUniv_인도네시아;
                else if(e.value == "일본") var d = formControlUniv_일본;
                else if(e.value == "중국") var d = formControlUniv_중국;
                else if(e.value == "태국") var d = formControlUniv_태국;
                else if(e.value == "파키스탄") var d = formControlUniv_파키스탄;

                else if(e.value == "노르웨이") var d = formControlUniv_노르웨이;
                else if(e.value == "독일") var d = formControlUniv_독일;
                else if(e.value == "러시아") var d = formControlUniv_러시아;
                else if(e.value == "스웨덴") var d = formControlUniv_스웨덴;
                else if(e.value == "스위스") var d = formControlUniv_스위스;
                else if(e.value == "스페인") var d = formControlUniv_스페인;
                else if(e.value == "영국") var d = formControlUniv_영국;
                else if(e.value == "터키") var d = formControlUniv_터키;
                else if(e.value == "프랑스") var d = formControlUniv_프랑스;

                else if(e.value == "멕시코") var d = formControlUniv_멕시코;
                else if(e.value == "미국") var d = formControlUniv_미국;
                else if(e.value == "캐나다") var d = formControlUniv_캐나다;

                else if(e.value == "브라질") var d = formControlUniv_브라질;
                else if(e.value == "우루과이") var d = formControlUniv_우루과이;
                else if(e.value == "칠레") var d = formControlUniv_칠레;
                else if(e.value == "콜롬비아") var d = formControlUniv_콜롬비아;

                else if(e.value == "호주") var d = formControlUniv_호주;

                else if(e.value == "모로코") var d = formControlUniv_모로코;
                else if(e.value == "이집트") var d = formControlUniv_이집트;

                target.options.length = 0;

                for (x in d) {
                    var opt = document.createElement("option");
                    opt.value = d[x];
                    opt.innerHTML = d[x];
                    target.appendChild(opt);
                }
            }

            function categoryOption3(g) {
                const text = g.options[g.selectedIndex].text;
                console.log(g.options[g.selectedIndex].text);
            }

            function searchUniv() {
                $('#messagebox1').empty()
                $.ajax({
                    type: "GET",
                    url: "/searchunivsinfo",
                    data: {},
                    success: function (response) {
                        let univsinfo = response['all_univsinfo']
                        for (let i = 0; i < univsinfo.length; i++) {
                            let ContactEmail = univsinfo[i]['UnivContactEmail']
                            let Location = univsinfo[i]['UnivLocation']
                            let Name = univsinfo[i]['UnivName']
                            let OfficeTelNum = univsinfo[i]['UnivOfficeTelNum']
                            let Website = univsinfo[i]['UnivWebsite']

                            let temp_html = `<tr>
                                                <td><h3>◦ University Name</h3><span id="Name"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${Name}</h4></span></td>
                                            </tr>
                                            <tr>
                                                <td><h3>◦ Location</h3><span id="Location"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${Location}</h4></span></td>
                                            </tr>
                                            <tr>
                                                <td><h3>◦ Office Telephone Number</h3><span id="OfficeTelNum"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${OfficeTelNum}</h4></span>
                                                </td>
                                                <td><h3>◦ Contact Email</h3><span id="ContactEmail"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${ContactEmail}</h4></span>
                                                </td>
                                                <td><h3>◦ Website</h3><span id="Website"><h4 style="color: blue; cursor: pointer;"token interpolation">${Website}'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${Website}</h4></span>
                                                </td>
                                            </tr>`
                            $('#messagebox1').append(temp_html)
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
        <div class="mytitle">
            <img src="https://media.vlpt.us/images/waterlily_0101/post/02ff83ce-0474-4e0d-b886-69cf1b445588/FaceTheNew-TITLE-%EC%9B%90%EB%B3%B8-%EC%B5%9C%EC%A2%85.gif"
                 style="max-width:30%; height: auto;"
                 onclick="location.href='/'">
        </div>

        <div class="mybtn-group">
            <button class="mybtn-secondary hover1" onclick="location.href='/aboutfacethenew'">FaceTheNew 소개</button>
            <button class="mybtn-secondary hover1" onclick="location.href='/requireddocs'">교환학생 지원 서류</button>
            <button class="mybtn-secondary hover1" onclick="location.href='/searchunivs'">파견 대학 검색</button>
            <button class="mybtn-secondary hover1" onclick="location.href='/lifehack'">교환학생 학교생활 Tip</button>
        </div>

        <div>
            <h1 class="subtitle">◦ 파견 대학 검색</h1>

            <div class="searchuniv" id="searchUniv" name="searchUniv">
                <span class="input-group-text" id="inputGroupPrepend">파견 대학 검색</span>
                <select class="form-control-continent" id="formControlContinent" name="formControlContinent" onchange="categoryOption1(this)" aria-describedby="inputGroupPrepend1" required>
                    <option name="Continent" value="option1">대륙 </option>
                    <option name="Continent" value="asia">아시아</option>
                    <option name="Continent" value="europe">유럽</option>
                    <option name="Continent" value="northamerica">북아메리카</option>
                    <option name="Continent" value="southamerica">남아메리카</option>
                    <option name="Continent" value="oceania">오세아니아</option>
                    <option name="Continent" value="africa">아프리카</option>
                </select>
                <select class="form-control-nation" id="formControlNation" name="formControlNation" onchange="categoryOption2(this)" aria-describedby="inputGroupPrepend2" required>
                    <option value="option2">국가</option>
                </select>
                <select class="form-control-univ" id="formControlUniv" name="formControlUniv" onchange="categoryOption3(this)" aria-describedby="inputGroupPrepend2" required>
                    <option value="option3">대학</option>
                </select>
                <button id="search_btn" type="button" title="검색" class="sch_smit" onclick="searchUniv()"></button>
            </div>

            <div id='result'></div>

            <div class="univimage" id="UnivImage">
                <img src="https://t4.ftcdn.net/jpg/02/87/59/67/240_F_287596718_0Y53hkbfo5wTYUg31Ogdqs93YRA1QDpG.jpg"
                     alt="univimage"
                     style="width: 1400px; height: 500px;">
            </div>

            <div id="SearchUnivResult" class="searchunivresult">
                <table id="message-box">
                    <tbody id="messagebox1">
                    </tr>
                    </tbody>
                </table>

                <div class="someinfo">
                    <p>학교 유형:&nbsp;&nbsp;<span style="color: white;">사립/공립</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>학교 규모:&nbsp;&nbsp;<span style="color: white;">S/M/L/XL</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>재적학생수:&nbsp;&nbsp;<span style="color: white;">00명</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>취업률:&nbsp;&nbsp;<span style="color: white;">00%</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>Exam Type:&nbsp;&nbsp;<span style="color: white;">TOEFL, IELTS</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>QS World University Ranking:&nbsp;&nbsp;<span style="color: white;">00등</span></span></p>
                </div>

                <div class="messagebox2" id="messagebox2">
                    <h3>◦ 학교 소개</h3>
                    <p>학교 소개입니다.</p><br/>

                    <h3>◦ 설치 학과</h3>
                    <p>설치 학과는 00입니다.</p><br/>

                    <h3>◦ Study Duration</h3>
                    <p>학기 기간입니다.</p><br/>

                    <h3>◦ Requirement</h3>
                    <h5>- GPA</h5>
                    <p>000</p>
                    <h5>- Language Proficiency:</h5>
                    <p>000</p>
                </div>
            </div>
        </div>
    </body>
</html>

[한 것]

✅ selectbox에서 선택한 대학 이름을 console창에 뜨게 했다.
✅ 모든 대학 정보를 DB에서 가져오게 했다.

[할 것]

✅ 선택한 대학 이름을 서버로 보내고, 서버에서는 전달받은 대학 이름으로 DB에서 조회해야 한다.
✅ 대학 이름을 받으면 그 대학 이름만 정보 반환하는 용도의 API를 하나 만들어야 한다.

profile
Moonsun Kim
:)
이전 포스트

[SpartaCodingClub] 웹서비스 개발 프로젝트 : "FaceTheNew" 개발일지(1)

다음 포스트

[SpartaCodingClub] 웹서비스 개발 프로젝트 : "FaceTheNew" 개발일지(3)

0개의 댓글