๐Ÿ‘ฉโ€๐Ÿ’ป Learn programming

[๋‚˜๋งŒ์˜ ๋‹จ์–ด์žฅ] 12. ์ˆ™์ œ - ์˜ˆ๋ฌธ ์ €์žฅ & ์‚ญ์ œ ๊ธฐ๋Šฅ ๋งŒ๋“ค๊ธฐ

๋””์ž์ธ ๋ฝ€์†ก์ด 2022. 5. 4. 15:19
๋ฐ˜์‘ํ˜•
  1. โ€œstatus_give = oldโ€ ์ผ ๋•Œ๋งŒ ์˜ˆ๋ฌธ ์ž‘์„ฑ ์นธ ๋„์šฐ๊ธฐ
  2. input ๋ฐ•์Šค์— ์ž…๋ ฅ๋œ ์˜ˆ๋ฌธ์ด ํ•ด๋‹น ๋‹จ์–ด๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธ
  3. ์žˆ์œผ๋ฉด DB์˜ examples ์ปฌ๋ ‰์…˜์— ์˜ˆ๋ฌธ ์ €์žฅ.
  4. ์˜ˆ๋ฌธ๋“ค ์ค‘์—์„œ ํ•ด๋‹น ๋‹จ์–ด์— ๊ด€ํ•œ ๊ฒƒ๋งŒ ์ฐพ์•„์™€์„œ ๋ณด์—ฌ์ฃผ๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด
  5. ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์‹œ, ์ƒˆ ์˜ˆ๋ฌธ ์ €์žฅ ์‹œ, ๊ธฐ์กด ์˜ˆ๋ฌธ ์‚ญ์ œ ์‹œ ํ•จ์ˆ˜ ์‹คํ–‰.
  6. ์˜ˆ๋ฌธ ์‚ญ์ œ ์‹œ ์—ฌ๋Ÿฌ ์˜ˆ๋ฌธ ์ค‘ ์–ด๋–ค ๊ฒƒ์ธ์ง€ ๊ตฌ๋ถ„์„ ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ ์ค„์— id ๋ถ€์—ฌ
  7. ๋‹จ์–ด ์‚ญ์ œ ์‹œ ํ•ด๋‹น ์˜ˆ๋ฌธ๋“ค๋„ ๊ฐ™์ด ์ง€์›Œ์คŒ.
  {% if status=="old" %} <!-- status๊ฐ€ old์ด๋ฉด -->
      <div id="examples" class="container"> // <!-- ์˜ˆ๋ฌธ div ํ‘œํ˜„ -->
          <h3 style="text-align: center;margin-bottom:1rem">Write your own sentences!</h3>
          <ul id="example-list">
              <li id="ex-0">This sentence contains the word 'word'.&nbsp;&nbsp;&nbsp;<a
                      href="javascript:delete_ex(0)">delete</a></li>
              <li id="ex-1">I don't like using the MS Word program.&nbsp;&nbsp;&nbsp;<a
                      href="javascript:delete_ex(1)">delete</a></li>
          </ul>
          <div class="d-flex justify-content-between" style="margin-left:20px;">
              <input id="new-example" class="form-control form-control-sm" style="margin-right: 0.5rem">
              <button class="btn btn-outline-secondary btn-sm" onclick="add_ex()">add</button> <!-- add ๋ฒ„ํŠผ ํด๋ฆญํ•˜๋ฉด add_ex() ํ•จ์ˆ˜ ํ˜ธ์ถœ -->
          </div>
      </div>
  {% endif %}
@app.route('/api/get_examples', methods=['GET'])
def get_exs():
#์˜ˆ๋ฌธ ๊ฐ€์ ธ์˜ค๊ธฐ
    word_receive = request.args.get("word_give") 
    result = list(db.examples.find({"word": word_receive}, {'_id': 0}))
    print(word_receive, len(result))

    return jsonify({'result': 'success', 'examples': result})

@app.route('/api/save_ex', methods=['POST'])
def save_ex():
#์˜ˆ๋ฌธ ์ €์žฅํ•˜๊ธฐ
    word_receive = request.form['word_give'] #word_receive ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ word_give๋ฅผ ๋ฐ›์Œ
    example_receive = request.form['example_give'] #example_receive ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ example_give๋ฅผ ๋ฐ›์Œ
    doc = {"word": word_receive, "example": example_receive} #๋„ํ๋จผํŠธ์— ์ €์žฅ
    db.examples.insert_one(doc) #๋„ํ๋จผํŠธ๋ฅผ db์˜ examples ์ปฌ๋ ‰์…˜์— ์ €์žฅ
    return jsonify({'result': 'success', 'msg': f'example "{example_receive}" saved'})

@app.route('/api/delete_ex', methods=['POST'])
def delete_ex():
#์˜ˆ๋ฌธ ์‚ญ์ œํ•˜๊ธฐ
    word_receive = request.form['word_give'] #word_recive ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ word_give๋ฅผ ๋ฐ›์Œ
    number_receive = int(request.form["number_give"]) #number_receive ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ number_give๋ฅผ ์ •์ˆ˜ํ˜•์œผ๋กœ ๋ฐ›์Œ
    example = list(db.examples.find({"word": word_receive}))[number_receive]["example"] 
		#example์€ db์˜ examples ์ปฌ๋ ‰์…˜์—์„œ word์— ํ•ด๋‹นํ•˜๋Š” ์˜ˆ๋ฌธ ๋ฆฌ์ŠคํŠธ ์ค‘ number_receive ๋ฒˆ์งธ example ๋ฌธ์žฅ.
    print(word_receive, example)
    db.examples.delete_one({"word": word_receive, "example": example}) 
    return jsonify({'result': 'success', 'msg': f'example #{number_receive} of "{word_receive}" deleted'})
  function get_examples() {
      $("#example-list").empty()
      $.ajax({
          type: "GET",
          url: `/api/get_examples?word_give=${word}`,
          data: {},
          success: function (response) {
              let examples = response["examples"];
              for (let i = 0; i < examples.length; i++) {
                  let example = examples[i]["example"];
                  console.log(example)
                  let html_temp = `<li id="ex-${i}">${example}&nbsp;&nbsp;&nbsp;<a
                  href="javascript:delete_ex(${i})">delete</a></li>`
                  $("#example-list").append(html_temp)
              }
          }
      });
  }

  function add_ex() { //๋‹จ์–ด๋ฅผ ์ €์žฅํ•˜๋Š” add_ex ํ•จ์ˆ˜
      let new_ex = $('#new-example').val(); //new_ex๋ผ๊ณ  new-example input ๋ฐ•์Šค ์„ ์–ธ
      if (!new_ex.toLowerCase().includes(word.toLowerCase())) { //๋งŒ์•ฝ ์†Œ๋ฌธ์ž๋กœ ์ด๋ฃจ์–ด์ง„ new_ex๊ฐ’์ด ์†Œ๋ฌธ์ž๋กœ๋งŒ ์ด๋ฃจ์–ด์ง„ word ๋‹จ์–ด๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š์œผ๋ฉด 
          alert(`the word '${word}' is not included.`); // ์˜ˆ๋ฌธ์— ๋‹จ์–ด๋ฅผ ํฌํ•จ์‹œ์ผœ๋‹ฌ๋ผ๋Š” alret ๋„์šฐ๊ธฐ
          return; //๋ฆฌํ„ดํ•˜์—ฌ ๋ฉˆ์ถ”๊ธฐ
      }
      console.log(new_ex) 
      $.ajax({
          type: "POST",
          url: `/api/save_ex`,
          data: {
              word_give: word, 
              example_give: new_ex
          }, // ๋‹จ์–ด์™€ ์˜ˆ๋ฌธ ์ฃผ๊ธฐ
          success: function (response) { //์„ฑ๊ณตํ•˜๋ฉด
              get_examples(); //get_examples ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์„œ ์˜ˆ๋ฌธ์„ ๊ฐ€์ ธ์˜ค๊ณ 
              $('#new-example').val(""); //new-example input ๋ฐ•์Šค๋Š” ๋น„์›Œ์คŒ.
          }
      });

  }

  function delete_ex(i) {
      console.log("deleting", i)
      $.ajax({
          type: "POST",
          url: `/api/delete_ex`,
          data: {
              word_give: word,
              number_give: i
          },
          success: function (response) {
              get_examples()
          }
      });
  }
//status๊ฐ€ old์ผ ๊ฒฝ์šฐ์—๋งŒ ์˜ˆ๋ฌธ๋“ค์„ ๊ฐ€์ ธ์™€์„œ ๋ณด์—ฌ์คŒ 
$(document).ready(function () { 
    {% if status=="old" %}
        get_examples()
    {% endif %}
๋ฐ˜์‘ํ˜•