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

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

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

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

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

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

webアプリ開発環境(PaizaCloud)について

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

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

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

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のホームページ)へアクセスしてください。無料プランでお試しください。

手順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(無料)を使った、データベースを表示するアプリ作成にチャレンジしてください。

コメントを残す

メールアドレスが公開されることはありません。