PostgreSQL、Python、Apache、Bootstrapを用いたウェブアプリケーション

PostgreSQL – Python – Apache – Bootstrap

1. Apacheのセットアップ

sudo apt install apache2

 
サーバー状態の確認
service apache2 status

 
ブラウザで確認
VM上で http://localhost に接続し、Apacheのテストページが表示されていることを確認してください。
 
2. PythonでPostgreSQLに問い合わせを送る
PostgreSQLによるデータ分析で使ったデータを今回も使います。
環境構築
# ホームディレクトリへ
cd ~

# 今回用のディレクトリを作成
mkdir swa

# 作成したディレクトリに移動
cd swa

# Pythonファイルを作成
touch swa.py

# PostgreSQLに接続するモジュールをインストールします
sudo apt-get install python3-psycopg2

# Flaskを使うためのモジュールをインストールします
sudo pip install setuptools

# Flask（Python向けウェブフレームワーク）をインストールします
sudo pip install Flask

# PostgreSQLにPythonからの要求を受け取る設定をします。
vi /etc/postgresql/9.5/main/pg_hba.conf

# 赤枠内の設定を書き換えてください。


# PostgreSQLサーバーを再起動します
sudo service postgresql stop
sudo service postgresql start

環境設定は以上です。
Challenge!
ウェブアプリケーションのサンプル
複数の技術を組み合わせて簡単なウェブアプリケーションのサンプルを作る演習をします。 具体的には、PythonからPostgreSQLデータベースに問い合わせし、その内容をApacheサーバーを経由してBootstrapウェブページ上に表示します。 表示されたウェブページではjapan_cities内の検索ができるように、検索機能を追加します。 それぞれの関係性を図に表すと以下のようになります。 
ヒント:
SQL in JSON
下記のSQLコードを用いて、データベースのデータをJSON形式で取得できます。
select
    jsonb_pretty(to_jsonb(array_agg(json_build_object(
    'prefecture', prefecture,
    'city', city,
    'ward', ward,
    'population', population,
    'city_ward', city_ward))))
from
    japan_cities;

Bootstrap Table で手軽にテーブルを作成できます。
FlaskはこのようなPythonコードで動作します。
import sys
import json
import psycopg2
import psycopg2.extensions
psycopg2.extensions.register_type(psycopg2.extensions.UNICODE)
psycopg2.extensions.register_type(psycopg2.extensions.UNICODEARRAY)

from flask import Flask  # Import class Flask from module flask
from flask_cors import CORS, cross_origin  #Import flask-cors to accept access to the data
app = Flask(__name__)    # Construct an instance of Flask class
CORS(app)                # apply CORS

@app.route('/')   # Register index() as route handler for root URL '/'
def index():
   #Route handler (or View Function) for root URL '/'
   return 'Hello, you have reached the default route for the python endpoint'

@app.route('/cities.json')
def cities():
    con = None
    js_string = ''

    try:
        con = psycopg2.connect(database='avinton', user='postgres', password='postgres', host='127.0.0.1',port='5432')
        cur = con.cursor()
        cur.execute("""
        
        上の SQL in JSON のSQLコード
        
        """)

        js_string = str(cur.fetchone()[0])
        print(js_string)

    except psycopg2.DatabaseError as e:
        print('DB Error %s' % e)
        sys.exit(1)

    finally:
        if con:
            con.close()

    return js_string

@app.route('/test')
def test():
    return 'test'

if __name__ == '__main__':  # Script executed directly?
   app.run()  # Launch built-in web server and run this Flask webapp



HTMLファイルをApache2のディレクトリ内に配置しましょう。
（http://localhostで表示されるのはこのページです。）
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Data Table in Bootstrap&lt;/title&gt;
 
          ~~~import Bootstrap source~~~
               (css,javascript)
  &lt;/head&gt;
 
  &lt;body&gt;
          ~~~create table with the data~~~
  &lt;/body&gt;
&lt;/html&gt;

index.html としてApache2のディレクトリに保存します。 最終的には以下のように、データベースのデータをフロントエンドで表示できます。  

	
		
			前へ

PostgreSQL – Python – Apache – Bootstrap

PostgreSQL – Python – Apache – Bootstrap

1. Apacheのセットアップ

サーバー状態の確認

ブラウザで確認

2. PythonでPostgreSQLに問い合わせを送る

環境構築

Challenge!

ウェブアプリケーションのサンプル

ヒント:

SQL in JSON

Bootstrap Table で手軽にテーブルを作成できます。

FlaskはこのようなPythonコードで動作します。

HTMLファイルをApache2のディレクトリ内に配置しましょう。

採用情報

Avinton SDGs

Search

PostgreSQL – Python – Apache – Bootstrap

PostgreSQL – Python – Apache – Bootstrap

1. Apacheのセットアップ

サーバー状態の確認

ブラウザで確認

2. PythonでPostgreSQLに問い合わせを送る

環境構築

Challenge!

ウェブアプリケーションのサンプル

ヒント:

SQL in JSON

Bootstrap Table で手軽にテーブルを作成できます。

FlaskはこのようなPythonコードで動作します。

HTMLファイルをApache2のディレクトリ内に配置しましょう。

採用情報

Avinton SDGs

Search

タグ