データベースと連携したWebアプリケーション開発

データベース（DB）とは、データの追加・検索・削除などが簡単にできるよう整理された情報の集まりのことです。

中でも、複数のデータを関連付け管理するデータベースをリレーショナルデータベース（RDB）と言い、それらを効率的に扱うためのツールのことをリレーショナルデータベースマネジメントシステム（RDBMS）と言います。

webアプリケーション開発では必ずといっていいほどRDBMSが活用されています。顧客の年齢・性別などのデータと、購買履歴のデータを関連付けておすすめ商品を提案するなど、マーケティング戦略としてもよく利用されるシステムです。

今回はwebアプリ開発環境（PaizaCloud）を使い、データベースと連携したアプリケーション開発の方法を紹介します。この記事を読めば、初心者でも10分でアプリを作成することができます。

webアプリ開発環境（PaizaCloud）について

データベースと連携したwebアプリケーション開発には、RDBMSであるMySQL（データベース管理システム）、あるいはphpMyAdmin（MySQL専用の管理ツール）をインストールし各種設定を行う必要があります。これが初心者にとってはハードルの高い作業となります。

そこでオススメしたいのが、完全クラウド型のアプリケーション開発環境であるPaizaCloudです。使用するパソコンや場所を選ばずにブラウザを開くだけでサーバー・データベース等の開発環境が整います。

今回はPaizaCloudの無料プランを利用して、データベースの内容をwebページに表示する簡単なアプリケーションを作成していきます。

PaizaCloudの環境設定についてはコチラ → webアプリケーション開発の環境設定｜PaizaCloudの使い方

MySQLとは？

MySQLとは、データベース管理システム（RDBMS）の１つです。表形式でデータを格納し、データの検索・加工・削除を高速で実行します。

YouTube、Amazon、Facebook、Twitter等でも導入されており、世界的にも実績のあるシステムです。

オープンソースで公開されているため誰でも無料で利用することができます。MySQLには、phpMyAdminというMySQLを直感的に操作できる便利なツールがあります。

phpMyAdminとは？

phpMyAdminとは、MySQL（RDBMS）をwebブラウザ上で簡単に操作することができる大変便利なツールです。

MySQLはターミナルを起動してSQL文を使って操作するため、SQL文に慣れていない人にとっては扱いにくいシステムです。

ところが、phpMyAdmin（MySQL専用の管理ツール）を使えば、SQL文を使うことなくデータベースの作成・編集・削除を画面上で操作することができます。また、インポート・エクスポートなど便利な機能も豊富にあり、かなりオススメのツールです。

今回はphpMyAdminのインポート機能を使ってcsvファイルを読み込む方法を使い、データベースを作成していきます。

アプリ完成形（果物データベース）の確認

アプリ完成形を確認します。指定のURLにアクセスすることで、果物リスト（みかん・りんご・いちご）を表示するアプリを作成します。データベースを活用し、品種リストの表示ボタンをクリックすることで、それぞれの品種リストが確認できるようにします。

みかんの場合

みかんの「表示」をクリックすると・・・

みかんの品種リストが確認できる。

りんごの場合

りんごの「表示」をクリックすると・・・

りんごの品種リストが確認できる。

いちごの場合

いちごの「表示」をクリックすると・・・

いちごの品種リストが確認できる。

データベースの作成方法（csvファイルのインポート）

それではさっそく、webアプリ開発環境であるPaizaCloud（PaizaCloudのホームページ）へアクセスしてください。無料プランでお試しください。

PaizaCloudの環境設定についてはコチラ → webアプリケーション開発の環境設定｜PaizaCloudの使い方

手順１｜サーバーの作成

新規サーバ作成をクリックしてください。

手順２｜サーバーの設定

任意のサーバー名を入力し「phpMyAdmin」を選択して「新規サーバ作成」をクリックしてください。

手順３｜phpMyAdminの起動

左上のプルダウンメニューより「phpMyAdmin」を選択し、「Open phpMyAdmin」をクリックしてください。

手順４｜データベースの表示

ウィンドウが立ち上がったら、データベースをクリックしてください。

手順５｜データベースの作成

データベースの名前（mydb）を入力し、「作成」をクリックしてください。

手順６｜テーブル（fruits_list）の作成

テーブル名（fruits_list）とカラム数（４）を入力し、「実行」をクリックしてください。

手順７｜テーブル構成の設定

名前の列には上から「fruits_id」「fruits」「varieties_id」「varieties」と入力してください。
データ型の列には上から「INT」「VARCHAR」「INT」「VARCHAR」と入力してください。
長さ/値の列には上から「3」「10」「3」「10」と入力してください。

手順８｜テーブルのインポート

インポートをクリックしてください。

手順９｜csvファイルの読み込み設定

「ファイルを選択」をクリックして、csvファイルを選択してください。

下記のcsvファイル（ヘッダーなし）を作成してください。

手順１０｜csvファイルの読み込み実行

インポートタブの一番下までスクロールして「実行」をクリックしてください。

手順１１｜csvファイルの読み込み結果

問題なければ以下の画面が表示されます。次に「表示」をクリックしてください。

手順１２｜データベースの作成確認

データベースが作成できました。次に「データベース：mydb」をクリックしてください。

手順１３｜テーブル（varieties_list）の作成

テーブル名（varieties_list）とカラム数（４）を入力し、「実行」をクリックしてください。
その後、上記の手順７〜１２をもう一度繰り返して、テーブル（varieties_list）を作成してください。

以下の２種類のテーブルが作成できればOKです。

webアプリケーションの作成

次にアプリケーションを作成していきます。

手順１｜新規ディレクトリの作成

/home/ubuntuファイルを右クリックして、「新規ディレクトリ」をクリックしてください。

手順２｜新規ディレクトリ名の入力

ディレクトリ名（myapp）を入力してください。

手順３｜新規ファイルの作成

myappディレクトリを右クリックして、新規ファイルをクリックしてください。

手順４｜新規ファイルの作成

ファイル名（fruits.py）を入力してください。

手順５｜新規ディレクトリの作成

myappディレクトリを右クリックして、新規ディレクトリをクリックしてください。

手順６｜新規ディレクトリ名の入力

ディレクトリ名（templates）を入力してください。

手順７｜新規ファイルの作成

templatesディレクトリを右クリックして、３種類の新規ファイルを作成してください。

１．layout.htmlファイルの作成

ファイル名（layout.html）を入力してください。

２．show1.htmlファイルの作成

ファイル名（show1.html）を入力してください。

３．show2.htmlファイルの作成

ファイル名（show2.html）を入力してください。

以下の３種類のファイルが作成できていればOKです。

プログラミングコード（Python）の入力

これまで作成したファイルに、コードを記述していきます（全てコピペでOK）。

fruits.py

下記コードを入力（コピペ）し、保存ボタンをクリックしてください。

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)

db_uri = 'mysql+pymysql://root:@localhost/mydb?charset=utf8'
app.config['SQLALCHEMY_DATABASE_URI'] = db_uri
db = SQLAlchemy(app)

class Fruits(db.Model):
    __tablename__ = 'fruits_list'
    fruits_id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    fruits = db.Column(db.Text())
    varieties_id = db.Column(db.Integer)
    varieties = db.Column(db.Text())

class Varieties(db.Model):
    __tablename__ = 'varieties_list'
    fruits_id = db.Column(db.Integer)
    fruits = db.Column(db.Text()) 
    varieties_id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    varieties = db.Column(db.Text())

@app.route('/') 
def select_fruits():
    message = "果物リスト"
    fruits = Fruits.query.all()
    return render_template('show1.html', message = message, fruits = fruits)

@app.route('/variety/<int:fruits_id>')
def select_variety(fruits_id):
    message = "品種リスト"
    varieties = Varieties.query.all()
    key=fruits_id
    return render_template('show2.html', message = message, varieties = varieties,key=key)

layout.html

下記コードを入力（コピペ）し、保存ボタンをクリックしてください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flask - paiza</title>
        <style>body {padding: 10px;}</style>
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
</html>

show1.html

下記コードを入力（コピペ）し、保存ボタンをクリックしてください。

{% extends "layout.html" %}
{% block content %}
    <h1>{{ message }}</h1>
    <p>「表示」をクリックすると、品種リストを表示します</p>
    
    <table border="1" style="border-collapse: collapse">
        <tr>
            <th>果物コード</th>
            <th>果物</th>
            <th>品種リスト</th>
        </tr>

    {% for fruit in fruits %}
        <tr>
            <td>{{ fruit.fruits_id }}</td>
            <td>{{ fruit.fruits }}</td>
            <td><a href='/variety/{{ fruit.fruits_id }}'>表示</a></td>
        </tr>
    {% endfor %}
    </table>
{% endblock %}

show2.html

下記コードを入力（コピペ）し、保存ボタンをクリックしてください。

{% extends "layout.html" %}
{% block content %}
    <h1>{{ message }}</h1>
    <p><a href="/">戻る</a></p> 
 
    <table border="1" style="border-collapse: collapse">
        <tr>
            <th>品種コード</th>
            <th>品種</th>
        </tr>
    {% for variety in varieties %}
        {% if variety.fruits_id==key %}
            <tr>
                <td>{{ variety.varieties_id }}</td>
                <td>{{ variety.varieties }}</td>
            </tr>
        {% endif %}
    {% endfor %}
    </table>

{% endblock %}