目次
データベースと連携した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)の1つです。表形式でデータを格納し、データの検索・加工・削除を高速で実行します。
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の使い方
手順1|サーバーの作成
- 新規サーバ作成をクリックしてください。
手順2|サーバーの設定
- 任意のサーバー名を入力し「phpMyAdmin」を選択して「新規サーバ作成」をクリックしてください。
手順3|phpMyAdminの起動
- 左上のプルダウンメニューより「phpMyAdmin」を選択し、「Open phpMyAdmin」をクリックしてください。
手順4|データベースの表示
- ウィンドウが立ち上がったら、データベースをクリックしてください。
手順5|データベースの作成
- データベースの名前(mydb)を入力し、「作成」をクリックしてください。
手順6|テーブル(fruits_list)の作成
- テーブル名(fruits_list)とカラム数(4)を入力し、「実行」をクリックしてください。
手順7|テーブル構成の設定
- 名前の列には上から「fruits_id」「fruits」「varieties_id」「varieties」と入力してください。
- データ型の列には上から「INT」「VARCHAR」「INT」「VARCHAR」と入力してください。
- 長さ/値の列には上から「3」「10」「3」「10」と入力してください。
手順8|テーブルのインポート
- インポートをクリックしてください。
手順9|csvファイルの読み込み設定
- 「ファイルを選択」をクリックして、csvファイルを選択してください。
下記のcsvファイル(ヘッダーなし)を作成してください。
手順10|csvファイルの読み込み実行
- インポートタブの一番下までスクロールして「実行」をクリックしてください。
手順11|csvファイルの読み込み結果
- 問題なければ以下の画面が表示されます。次に「表示」をクリックしてください。
手順12|データベースの作成確認
- データベースが作成できました。次に「データベース:mydb」をクリックしてください。
手順13|テーブル(varieties_list)の作成
- テーブル名(varieties_list)とカラム数(4)を入力し、「実行」をクリックしてください。
- その後、上記の手順7〜12をもう一度繰り返して、テーブル(varieties_list)を作成してください。
- 以下の2種類のテーブルが作成できればOKです。
webアプリケーションの作成
- 次にアプリケーションを作成していきます。
手順1|新規ディレクトリの作成
/home/ubuntuファイルを右クリックして、「新規ディレクトリ」をクリックしてください。
手順2|新規ディレクトリ名の入力
- ディレクトリ名(myapp)を入力してください。
手順3|新規ファイルの作成
- myappディレクトリを右クリックして、新規ファイルをクリックしてください。
手順4|新規ファイルの作成
- ファイル名(fruits.py)を入力してください。
手順5|新規ディレクトリの作成
- myappディレクトリを右クリックして、新規ディレクトリをクリックしてください。
手順6|新規ディレクトリ名の入力
- ディレクトリ名(templates)を入力してください。
手順7|新規ファイルの作成
- templatesディレクトリを右クリックして、3種類の新規ファイルを作成してください。
1.layout.htmlファイルの作成
- ファイル名(layout.html)を入力してください。
2.show1.htmlファイルの作成
- ファイル名(show1.html)を入力してください。
3.show2.htmlファイルの作成
- ファイル名(show2.html)を入力してください。
以下の3種類のファイルが作成できていれば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 %}
Pythonライブラリ(webアプリ作成ツール)のインストール
- ターミナルをクリックしてください。
「pip install sqlalchemy」と入力して、Enter(or Return)を押してください。
「pip install flask-sqlalchemy」と入力して、Enter(or Return)を押してください。
webアプリの起動方法
「cd myapp」と入力して、Enter(or Return)を押してください。
- 「FLASK_APP=fruits.py FLASK_ENV=development flask run」と入力して、Enter(or Return)を押してください。
- 「5000」と書かれた地球儀マークをクリックしてください。
- webアプリ(果物データベース)の完成です。
まとめ
データベースと連携したwebアプリケーションを開発すると、様々な便利なサービスを提供することができます。
初心者でもクラウド型のアプリケーション開発環境(PaizaCloud等)を利用すれば、アプリの作成は十分に可能です。
是非、phpMyAdmin(無料)を使った、データベースを表示するアプリ作成にチャレンジしてください。