LoginSignup
2
1
@mokomokosparta

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

Last updated at Posted at 2023-07-02

今週の学習

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

フレームワーク

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

FLASK

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

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)

フロント側

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

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

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

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1