スパルタコーディングクラブ　プログラミング入門コース　４週目

## 今週の学習
どうも未経験４０歳近いおっさんです。
さて早いものでもう７月です( ´∀｀ )
先週に引き続き今週も**pytohon**です

## フレームワーク
フレームワークは簡潔に言えば「**道具箱**」です
皆さん日常大工をするときに釘を打つのにトンカチを
使いますよね？。木の板を切る際にノコギリをつかいますよね？？
まさか包丁で釘を打ったり、木の板を切ったりしませんよね？？？？？( ´∀｀ )
**特定のアプリを作るのに適した機能がすでに入っている**
それがフレームワークです。

## FLASK
FLASKはpythonのフレームワークで
**WEBアプリ**を作るのに適したものです。
必要最低限の機能しかないため
PCのスぺ久が気になる方でも比較亭さくさく動きます。
ちょうどいいのでここの下に課題で書いたコードと
画像を貼っておきます。

## python側
```Python
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)
import requests
from bs4 import BeautifulSoup
# ここで「pymongo」パッケージの「MongoClient」という名前の機能をエディターに読み込んでいます
from pymongo import MongoClient

# 　ここでデータベースへの「パス」を書いています
client = MongoClient('mongodb+srv://sparta:test@cluster0.uxbinzy.mongodb.net/?retryWrites=true&w=majority')
# ここでデータベースにアクセスしています。
db = client.dbsparta


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


@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    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')

    # ここにコーディングして、metatagを先に持ってきます。
    ogtitl = soup.select_one('meta[property="og:title"]')['content'].split(' の')[0]
    ogimage = soup.select_one('meta[property="og:image"]')['content'].split('?')[0]
    ogdesc = soup.select_one('meta[property="og:description"]')['content']

    doc = {
        'titl': ogtitl,
        'desc': ogdesc,
        'imsge': ogimage,
        'star' : star_receive,
        'comment': comment_receive
    }
    db.movies.insert_one(doc)

    return jsonify({'msg': '登録完了!'})


@app.route("/movie", methods=["GET"])
def movie_get():
    all_movies = list(db.movies.find({}, {'_id':False}))
    return jsonify({'result': all_movies})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
```
## フロント側
```html
<!Doctype html>
<html lang="en">

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

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>

    <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>スパルタペディア</title>

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

    <style>
        * {
            font-family: 'Kosugi Maru', sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

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

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

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

						display: none;
        }

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

            margin-top: 20px;
        }

        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            listing();
        });
        //ここで「flasc(GET)」からデータを受け取り、それを「json」に加工して「data」と言う変数に渡している
        function listing() {
            fetch('/movie').then((res) => res.json()).then((data) => {
                //っこで変数名「rows」にoythonから「result」に格納されたデータを受け取る
                let rows = data['result']
                //ここでID名「cards-box」の中のタグを消す
                //ループ文内で宣言した変数それぞれに、辞書型の「キー」をそれぞれ宣言して格納している
                $('#cards-box').empty()
                rows.forEach((i)=>{
                    let comment = i['comment']
                    let desc = i['desc']
                    let imsge = i['imsge']
                    let titl = i['titl']
                    let star = i['star']
　　　　　　　　　　　　//ここで変数「star」の文字の数だけ⭐マークに変えている
                    let star_repeat = '⭐'.repeat(star)
　　　　　　　　　　　　//ここで受け取ったデータを各タグに格納している
                    temp_html = `<div class="col">
            <div class="card h-100">
                <img src="${imsge}"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">${titl}</h5>
                    <p class="card-text">${desc}</p>
                    <p>${star_repeat}</p>
                    <p class="mycomment">${comment}</p>
                </div>
            </div>
        </div>`
                    $('#cards-box').append(temp_html)
                })

            })
        }

        function posting() {
            //各変数にhtmlの各ID名から「中身」を受け取り格納している。
            let url = $('#url').val()
            let comment = $('#comment').val()
            let star = $('#star').val()
　　　　　　　//ここでインスタンス化？？して変数名「formData」に「キー」と「中身」を
            //設定して追加し、python(POST)側に送り返している
            let formData = new FormData();
            formData.append("url_give", url);
            formData.append("comment_give", comment);
            formData.append("star_give", star);

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

        function open_box() {
            $('#post-box').show()
        }

        function close_box() {
            $('#post-box').hide()
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>人生最高の映画</h1>
    <button onclick="open_box()">映画記録</button>
</div>
<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">映画URL</label>
    </div>
    <div class="input-group mb-3">
    <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 class="form-floating">
      <textarea id="comment" class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                style="height: 100px"></textarea>
        <label for="floatingTextarea2">コメント</label>
    </div>
    <div class="mybtns">
        <button onclick="posting()" type="button" class="btn btn-dark">記録</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">閉じる</button>
    </div>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://eiga.k-img.com/images/movie/97490/photo/6bfe14f287a8a19b/320.jpg?1670141541"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">映画のタイトルが入ります</h5>
                    <p class="card-text">ここに映画の説明が入ります。</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">自分の一行レビューを書きます</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://eiga.k-img.com/images/movie/97490/photo/6bfe14f287a8a19b/320.jpg?1670141541"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">映画のタイトルが入ります</h5>
                    <p class="card-text">ここに映画の説明が入ります。</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">自分の一行レビューを書きます</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://eiga.k-img.com/images/movie/97490/photo/6bfe14f287a8a19b/320.jpg?1670141541"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">映画のタイトルが入ります</h5>
                    <p class="card-text">ここに映画の説明が入ります。</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">自分の一行レビューを書きます</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://eiga.k-img.com/images/movie/97490/photo/6bfe14f287a8a19b/320.jpg?1670141541"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">映画のタイトルが入ります</h5>
                    <p class="card-text">ここに映画の説明が入ります。</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">自分の一行レビューを書きます</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
```
先週習ったクローニング機能とデータベース
今週習ったフレームワーク(FLASK)を合わせてできた結果がコチラ








![スクリーンショット (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469601/3f4db835-5e44-4249-a705-b4213df4b848.png)

ちなみに同じフレームワークで「**Django**」と言うモノもあります
コチラは最初からログイン機能や色々な機能が備わっている分
重たいです( ´∀｀ )
自分が「**どれくらいの規模のアプリを作りたいか**」に
よって使い分けてもいいですよね

余談ですが
こうやってコードの間に
コメントを書いておくと、後から自分が使いたい機能をコピーしたいときや
自分以外の人が見ても分かりやすいですよね？？。