PostgreSQL – Python – Apache – Bootstrap

Home Avintonアカデミー PostgreSQL – Python – Apache – Bootstrap

1. Apacheのセットアップ

sudo apt install apache2

1	sudo apt install apache2

サーバー状態の確認

service apache2 status

1	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からの要求を受け取る設定をします。
sudo vi /etc/postgresql/12/main/pg_hba.conf

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

# ホームディレクトリへ

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からの要求を受け取る設定をします。

sudo vi /etc/postgresql/12/main/pg_hba.conf

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

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

# 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;

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

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で表示されるのはこのページです。）

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

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

1. Apacheのセットアップ

サーバー状態の確認

ブラウザで確認

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

環境構築

Challenge!

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

ヒント:

SQL in JSON

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

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

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

採用情報

Avinton SDGs

Search

タグ