기록 페이지

이은주·2022년 3월 11일
0

1. 등록 페이지 표 만들기

  • html
<table>
    <tbody>
    <tr class="tr1">
        <td>
            <label for="Name">이름</label>
        </td>
        <td>
            <p><input type="text" id="Name" class="input-name" value=""/></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>프로필 이미지</td>
        <td>
            <p><input type="file" class="input-image"></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Introduce">나를 표현하는 한 문장</label>
        </td>
        <td>
            <p><textarea id="Introduce" class="input-introduce" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Goal">목표</label>
        </td>
        <td>
            <p><textarea id="Goal" class="input-goal" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Favorite_thing">좋아하는 것</label>
        </td>
        <td>
            <p><textarea id="Favorite_thing" class="input-favorite-thing" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Good_thing">잘 하는 것</label>
        </td>
        <td>
            <p><textarea id="Good_thing" class="input-good-thing" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="First_values">우선 가치관</label>
        </td>
        <td>
            <p><textarea id="First_values" class="input-first-values" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="World_needs">세상이 필요로 하는 것</label>
        </td>
        <td>
            <p><textarea id="World_needs" class="input-world-needs" value=""></textarea></p>
        </td>
    </tr>
    </tbody>
</table>
이름

프로필 이미지

나를 표현하는 한 문장

목표

좋아하는 것

잘 하는 것

우선 가치관

세상이 필요로 하는 것

2. 프로필 이미지 미리보기

https://alikong.tistory.com/33 , http://yoonbumtae.com/?p=3304

  • html
<td>프로필 이미지</td>
<td>
    <p><input type="file" class="input-image" onchange="readURL(this);"></p>
    <p><img id="preview" width="200px" height="200px"/></p>
</td>
  • javascript
// 이미지 미리보기 
function readURL(input) {
    // 인풋 태그에 파일이 있는 경우
    if (input.files && input.files[0]) {
        // FileReader 인스턴스 생성
        const reader = new FileReader();
        // 이미지가 로드 된 경우
        reader.onload = function (e) {
            document.getElementById('preview').src = e.target.result;
        };
        // reader가 이미지 읽도록 하기
        reader.readAsDataURL(input.files[0]);
    } else {
        document.getElementById('preview').src = "";
    }
}
<!DOCTYPE html>
<html lang="en">

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

    <!--css 파일 불러오기-->
    <link rel="stylesheet" type="text/css" href="static/style.css">

    <title>기록하기</title>

    <script>
        $(document).ready(function () {
            recorded();
        });

        function recorded() {
            $.ajax({
                type: 'GET',
                url: '/mypage',
                data: {},
                success: function (response) {
                    alert(response['msg'])
                }
            });
        }

        function recording() {
            let Name = $('#Name').val()
            let Introduce = $('#Introduce').val()
            let Goal = $('#Goal').val()
            let Favorite_thing = $('#Favorite_thing').val()
            let Good_thing = $('#Good_thing').val()
            let First_values = $('#First_values').val()
            let World_needs = $('#World_needs').val()

            $.ajax({
                type: 'POST',
                url: '/mypage',
                data: {
                    Name_give: Name,
                    Introduce_give: Introduce,
                    Goal_give: Goal,
                    Favorite_thing_give: Favorite_thing,
                    Good_thing_give: Good_thing,
                    First_values_give: First_values,
                    World_needs_give: World_needs
                },
                success: function (response) {
                    alert(response['msg'])
                    // 새로고침
                    window.location.reload()
                }
            });
        }

        // 이미지 미리보기 [https://alikong.tistory.com/33][http://yoonbumtae.com/?p=3304]참고
        function readURL(input) {
            // 인풋 태그에 파일이 있는 경우
            if (input.files && input.files[0]) {
                // FileReader 인스턴스 생성
                const reader = new FileReader();
                // 이미지가 로드 된 경우
                reader.onload = function (e) {
                    document.getElementById('preview').src = e.target.result;
                };
                // reader가 이미지 읽도록 하기
                reader.readAsDataURL(input.files[0]);
            } else {
                document.getElementById('preview').src = "";
            }
        }
    </script>
이름

프로필 이미지

나를 표현하는 한 문장

목표

좋아하는 것

잘 하는 것

우선 가치관

세상이 필요로 하는 것

기록하기

3. 클라이언트-서버 연결하기

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

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

@app.route("/mypage", methods=["POST"])
def mypage_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

@app.route("/mypage", methods=["GET"])
def mypage_get():
    return jsonify({'msg': 'GET 연결 완료!'})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)
  • javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
    recorded();
});

function recorded() {
    $.ajax({
        type: 'GET',
        url: '/mypage',
        data: {},
        success: function (response) {
            alert(response['msg'])
        }
    });
}

function recording() {
    $.ajax({
        type: 'POST',
        url: '/mypage',
        data: {sample_give: '데이터전송'},
        success: function (response) {
            alert(response['msg'])
        }
    });
}
</script>

4. POST

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

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

@app.route("/mypage", methods=["POST"])
def mypage_post():
    Name_receive = request.form['Name_give']
    Introduce_receive = request.form['Introduce_give']
    Goal_receive = request.form['Goal_give']
    Favorite_thing_receive = request.form['Favorite_thing_give']
    Good_thing_receive = request.form['Good_thing_give']
    First_values_receive = request.form['First_values_give']
    World_needs_receive = request.form['World_needs_give']

    doc = {
        'Name': Name_receive,
        'Introduce': Introduce_receive,
        'Goal': Goal_receive,
        'Favorite_thing': Favorite_thing_receive,
        'Good_thing': Good_thing_receive,
        'First_values': First_values_receive,
        'World_needs': World_needs_receive
    }

    db.mypage.insert_one(doc)

    return jsonify({'msg': '기록 완료!'})
  • javascript
function recording() {
    let Name = $('#Name').val()
    let Introduce = $('#Introduce').val()
    let Goal = $('#Goal').val()
    let Favorite_thing = $('#Favorite_thing').val()
    let Good_thing = $('#Good_thing').val()
    let First_values = $('#First_values').val()
    let World_needs = $('#World_needs').val()

    $.ajax({
        type: 'POST',
        url: '/mypage',
        data: {
            Name_give: Name,
            Introduce_give: Introduce,
            Goal_give: Goal,
            Favorite_thing_give: Favorite_thing,
            Good_thing_give: Good_thing,
            First_values_give: First_values,
            World_needs_give: World_needs
        },
        success: function (response) {
            alert(response['msg'])
            // 새로고침
            window.location.reload()
        }
    });
}
  • html
<table>
    <tbody>
    <tr class="tr1">
        <td>
            <label for="Name">이름</label>
        </td>
        <td>
            <p><input type="text" id="Name" class="input-name" value=""/></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>프로필 이미지</td>
        <td>
            <p><input type="file" class="input-image" onchange="readURL(this);"></p>
            <p><img id="preview" width="200px" height="200px"/></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Introduce">나를 표현하는 한 문장</label>
        </td>
        <td>
            <p><textarea id="Introduce" class="input-introduce" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Goal">목표</label>
        </td>
        <td>
            <p><textarea id="Goal" class="input-goal" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Favorite_thing">좋아하는 것</label>
        </td>
        <td>
            <p><textarea id="Favorite_thing" class="input-favorite-thing" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="Good_thing">잘 하는 것</label>
        </td>
        <td>
            <p><textarea id="Good_thing" class="input-good-thing" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="First_values">우선 가치관</label>
        </td>
        <td>
            <p><textarea id="First_values" class="input-first-values" value=""></textarea></p>
        </td>
    </tr>
    <tr class="tr1">
        <td>
            <label for="World_needs">세상이 필요로 하는 것</label>
        </td>
        <td>
            <p><textarea id="World_needs" class="input-world-needs" value=""></textarea></p>
        </td>
    </tr>
    </tbody>
</table>
<button onclick="recording()" type="button">기록하기</button>

5. GET

profile
이은주
이전 포스트

지니뮤직 1~50 순위 크롤링 하기

다음 포스트

6주차 진행사항

0개의 댓글