Python FlaskとMySQLを使用してゼロからWebアプリを作成する：パート3

このチュートリアルシリーズの前のパートでは、バケットリストアプリケーションにログインおよびログアウト機能を実装しました。シリーズのこのパートでは、ユーザーがバケットリストアイテムを追加して表示するために必要なバックエンドとフロントエンドを実装します。

はじめに

GitHubからのチュートリアルの前の部分のクローンを作成することから始めましょう。

git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part2.git

ソースコードのクローンが作成されたら、プロジェクトディレクトリに移動して、Webサーバーを起動します。

cd PythonFlaskMySQLApp_Part2
python app.py

ブラウザでhttp：// localhost：5002 /を指定すると、アプリケーションが実行されているはずです。

バケットリストアイテムの追加

ステップ1：アイテムを追加するためのインターフェースを作成する

まず、ログインしているユーザーがバケットリストアイテムを追加するためのインターフェースを作成します。 templatesに移動しますプロジェクトディレクトリ内のフォルダを作成し、addWish.htmlというファイルを作成します。。 addWish.htmlを開きます次のHTMLコードを追加します：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Python Flask Bucket List App</title>


    <link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">

    <script src="../static/js/jquery-1.11.2.js"></script>


</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="#">Add Item</a>
                    </li>
                    <li role="presentation"><a href="/logout">Logout</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>
        <section>
            <form class="form-horizontal" method="post" action="/addWish">
                <fieldset>

                    <!-- Form Name -->
                    <legend>Create Your Wish</legend>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="txtTitle">Title</label>
                        <div class="col-md-4">
                            <input id="txtTitle" name="inputTitle" type="text" placeholder="placeholder" class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="txtPost">Post</label>
                        <div class="col-md-4">
                            <textarea class="form-control" id="txtPost" name="inputDescription"></textarea>
                        </div>
                    </div>

                    <!-- Button -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="singlebutton"></label>
                        <div class="col-md-4">
                            <input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
                        </div>
                    </div>

                </fieldset>
            </form>

        </section>
        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>

    </div>
</body>

</html>

app.pyを開きます新しいルートとメソッドを追加して、Add Wishを表示しますページ。

@app.route('/showAddWish')
def showAddWish():
    return render_template('addWish.html')

userHome.htmlを開きます新しいメニュー項目を追加して、Add Wishにリンクしますページ。

<li role="presentation"><a href="/showAddWish">Add Wish</a></li>

変更を保存して、サーバーを再起動します。ブラウザでhttp：// localhost：5002にアクセスし、有効なメールアドレスとパスワードを使用してログインします。ログインしたら、ウィッシュを追加をクリックしますリンクをクリックすると、[ウィッシュの追加]ページが表示されます。

ステップ2：データベースの実装

バケットリストにアイテムを追加するには、tbl_wishというテーブルを作成する必要があります。

CREATE TABLE `tbl_wish` (
  `wish_id` int(11) NOT NULL AUTO_INCREMENT,
  `wish_title` varchar(45) DEFAULT NULL,
  `wish_description` varchar(5000) DEFAULT NULL,
  `wish_user_id` int(11) DEFAULT NULL,
  `wish_date` datetime DEFAULT NULL,
  PRIMARY KEY (`wish_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

tbl_wish titleがあります、description およびID 願い事を作成したユーザーの

次に、MySQLストアドプロシージャを作成して、tbl_wishにアイテムを追加する必要があります。テーブル。

USE `BucketList`;
DROP procedure IF EXISTS `BucketList`.`sp_addWish`;

DELIMITER $$
USE `BucketList`$$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_addWish`(
    IN p_title varchar(45),
	IN p_description varchar(1000),
	IN p_user_id bigint
)
BEGIN
	insert into tbl_wish(
		wish_title,
		wish_description,
		wish_user_id,
		wish_date
	)
	values
	(
		p_title,
		p_description,
		p_user_id,
		NOW()
	);
END$$

DELIMITER ;
;

ステップ3：MySQLストアドプロシージャを呼び出すPythonメソッドを作成する

addWishというメソッドを作成します app.pyで。

@app.route('/addWish',methods=['POST'])
def addWish():
    # Code will be here

このメソッドにデータを投稿するため、定義されたルートで明示的に宣言しました。

addWishが呼び出されたときメソッドでは、セッション変数userをチェックして、それが本物の呼び出しであるかどうかを検証する必要があります。存在します。セッションを検証したら、投稿されたtitleを読み取りますおよびdescription 。

_title = request.form['inputTitle']
_description = request.form['inputDescription']
_user = session.get('user')

必要な入力値を取得したら、MySQL接続を開き、ストアドプロシージャsp_addWishを呼び出します。。

conn = mysql.connect()
cursor = conn.cursor()
cursor.callproc('sp_addWish',(_title,_description,_user))
data = cursor.fetchall()

ストアドプロシージャを実行した後、データベースに変更をコミットする必要があります。

if len(data) is 0:
    conn.commit()
    return redirect('/userHome')
else:
    return render_template('error.html',error = 'An error occurred!')

これが完全なaddWishですメソッド。

@app.route('/addWish',methods=['POST'])
def addWish():
    try:
        if session.get('user'):
            _title = request.form['inputTitle']
            _description = request.form['inputDescription']
            _user = session.get('user')

            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_addWish',(_title,_description,_user))
            data = cursor.fetchall()

            if len(data) is 0:
                conn.commit()
                return redirect('/userHome')
            else:
                return render_template('error.html',error = 'An error occurred!')

        else:
            return render_template('error.html',error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html',error = str(e))
    finally:
        cursor.close()
        conn.close()

すべてのソースコードを保存して、サーバーを再起動します。ブラウザでhttp：// localhost：5002にアクセスし、有効なメールアドレスとパスワードを使用してログインします。サインインしたら、ウィッシュを追加をクリックしますリンク。 titleを入力してくださいおよびdescription ご希望の場合は、公開をクリックしてください。ウィッシュを正常に追加すると、ユーザーのホームページにリダイレクトされます。 MySQLデータベースにログインすると、tbl_wishにウィッシュが含まれているはずです。テーブル。

バケットリストアイテムを表示する

ステップ1：ウィッシュを取得するためのストアドプロシージャを作成する

ユーザーが作成したウィッシュを取得するMySQLストアドプロシージャを作成しましょう。ユーザーのIDが必要になりますパラメータとして、特定のユーザーIDによって作成されたウィッシュのデータセットを返します。

USE `BucketList`;
DROP procedure IF EXISTS `sp_GetWishByUser`;

DELIMITER $$
USE `BucketList`$$
CREATE PROCEDURE `sp_GetWishByUser` (
IN p_user_id bigint
)
BEGIN
    select * from tbl_wish where wish_user_id = p_user_id;
END$$

DELIMITER ;

ステップ2：データを取得するためのPythonメソッドを作成する

次に、sp_GetWishByUserを呼び出すPythonメソッドを作成しましょう。ユーザーが作成したウィッシュを取得するためのストアドプロシージャ。 getWishというメソッドを追加します app.pyで。

@app.route('/getWish')
def getWish():
    try:
        if session.get('user'):
            _user = session.get('user')
        else:
            return render_template('error.html', error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html', error = str(e))

上記のコードに見られるように、このメソッドは有効なuserでのみ呼び出すことができますセッション。有効なユーザーセッションを検証したら、MySQLデータベースへの接続を作成し、ストアドプロシージャsp_GetWishByUserを呼び出します。。

 _user = session.get('user')

# Connect to MySQL and fetch data
con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_GetWishByUser',(_user,))
wishes = cursor.fetchall()

MySQLからデータをフェッチしたら、データを解析してdictionaryに変換します。 JSONとして簡単に返すことができるようにします。

wishes_dict = []
for wish in wishes:
    wish_dict = {
        'Id': wish[0],
        'Title': wish[1],
        'Description': wish[2],
        'Date': wish[4]}
wishes_dict.append(wish_dict)

データをdictionaryに変換した後データをJSONに変換します戻ってきます。

return json.dumps(wishes_dict)

これが完全なgetWishですメソッド。

@app.route('/getWish')
def getWish():
    try:
        if session.get('user'):
            _user = session.get('user')

            con = mysql.connect()
            cursor = con.cursor()
            cursor.callproc('sp_GetWishByUser',(_user,))
            wishes = cursor.fetchall()

            wishes_dict = []
            for wish in wishes:
                wish_dict = {
                        'Id': wish[0],
                        'Title': wish[1],
                        'Description': wish[2],
                        'Date': wish[4]}
                wishes_dict.append(wish_dict)

            return json.dumps(wishes_dict)
        else:
            return render_template('error.html', error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html', error = str(e))

ステップ3：JSONデータをHTMLにバインドする

ユーザーのホームページが読み込まれると、getWishが呼び出されます。 jQuery AJAXを使用してメソッドを作成し、受信したデータをHTMLにバインドします。 userHome.html内次のjQueryを追加します AJAXスクリプト：

<script>
    $(function() {
        $.ajax({
            url: '/getWish',
            type: 'GET',
            success: function(res) {
                console.log(res);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
</script>

上記の変更を保存して、サーバーを再起動します。有効なメールアドレスとパスワードでログインしたら、ブラウザコンソールを確認すると、次のようにデータベースからウィッシュリストが取得されます。

[{
    "Date": "Fri, 23 Jan 2015 23:26:05 GMT",
    "Description": "I want to climb Mount Everest",
    "Id": 1,
    "Title": "Climb Everest"
}, {
    "Date": "Fri, 23 Jan 2015 23:27:05 GMT",
    "Description": "I want to jump from top of a mountain",
    "Id": 2,
    "Title": "Bungee Jump"
}]

ここで、JSONを反復処理する必要がありますデータをHTMLにバインドします。ブートストラップlist-groupを使用しますウィッシュリストアイテムを表示します。 list-groupの基本的なテンプレートは次のとおりです：

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Wish Title</h4>
    <p class="list-group-item-text">Wish Description</p>
  </a>
</div>

上記のHTMLコードをjumbotronに追加します userHome.htmlのdiv 。外観は次のとおりです。

次に、上記のlist-groupを作成します。ウィッシュリストエントリごとに動的にdivし、それをjumbotronに追加します div。 getWishの成功コールバック内関数呼び出し、次のようにdivを作成します：

var div = $('<div>')
    .attr('class', 'list-group')
    .append($('<a>')
        .attr('class', 'list-group-item active')
        .append($('<h4>')
            .attr('class', 'list-group-item-heading'),
            $('<p>')
            .attr('class', 'list-group-item-text')));

上記のdivのクローンを作成して、list-groupを作成します。ウィッシュリストアイテムごとにdiv。次に、返されたJSONを解析します JavaScriptオブジェクトへの文字列。

var wishObj = JSON.parse(res);

ここで、wishObjを繰り返し処理しますウィッシュアイテムごとに、新しいdivのクローンを作成し、それをjumbotronに追加します。 div。

var wish = '';

$.each(wishObj, function(index, value) {
    wish = $(div).clone();
    $(wish).find('h4').text(value.Title);
    $(wish).find('p').text(value.Description);
    $('.jumbotron').append(wish);
});

上記の変更を保存して、サーバーを再起動します。有効なメールアドレスとパスワードを使用してログインすると、特定のユーザーが作成したウィッシュのリストが表示されます。