【Python】0からWebアプリ！ハンズオン(1)～設計、DB構築編～

# 概要
Pythonで0からWebアプリを作る機会があったので、そのまとめとして！
この記事ではアプリの設計、データベースの設計、構築について書いています。

これまでの記事
[【Python】0からWebアプリ！ハンズオン(0)～環境構築編～ - Qiita](https://qiita.com/tsumasakky/items/d8069418d1fa6f2fa185)

# こんな方に読んでほしい
* プログラミング未経験だけどアプリ作ってみたい方
* 新人Webプログラマの方
* 経験者だけどPythonでWebアプリ書いたことない方

# ゴール
HTML, CSS, JavaScript, Python, SQLを使ってCURD機能を持ったWebアプリを作成するのが目標です。

# 必要なもの
* PC（Windows OS）
* インターネット回線
* わくわくした気持ち

# 1. アプリのイメージ
今回は題材として簡単なTodoアプリを作りたいと思います。

必要となる機能は

* Todo一覧（Read）
* Todo追加（Create）
* Todo更新（Update）
* Todo削除（Delete）

の4つとします。これらの頭文字をとってCRUDと表現することがあり、業務系アプリのほとんどはこれらの機能がベースとなっています。
それぞれの画面イメージを作成してみました。

### Todo一覧
登録されたTodoを一覧形式で表示します。
新規追加ボタンがあり、そこから新規登録フォームが開きます。
各行に編集、削除は各行に配置されたボタンから行えます。
<img width="469" alt="2020-07-31_13h42_29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/efe56d8a-3e57-1fee-8219-f0f01113836b.png">

### Todo追加
Todoの新規登録フォームです。タイトルを入力し、「追加」ボタンを押すことで一覧に追加されます。
<img width="417" alt="2020-07-31_13h43_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/9c90d812-40bb-a8ff-e228-62ac276742d0.png">

### Todo更新
Todoの編集フォームです。タイトルを更新し、「更新」ボタンを押すことでTodoが更新されます。
<img width="420" alt="2020-07-31_13h45_18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/160d4d1a-a1cf-daff-ebd4-a586d927f790.png">

### Todo削除
一覧の削除ボタンを押すと、該当行のデータが削除されます。そのとき、削除してよいかどうかのメッセージが表示され、「削除」ボタンを押すとTodoが削除されます。
<img width="469" alt="2020-07-31_13h46_37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/3e191caf-4dc3-ca43-27ef-374f00ddfd9f.png">

# 2. データベースの設計
データベースの設計はこれだけです(笑)
ポイントとしてはis_deletedという列を設けることで、Todoの論理削除を可能とするところです。
論理削除というのは、データは残っているが「消えた or 消えていない」のフラグを持たせることでユーザーからは削除されたように見える
方法のことです。消すときにはis_deleted= trueとして、一覧ではis_deletedがtrueのデータは表示しないこととします。

反対に、SQLのDELETE文でデータベースから完全にデータを削除することを「物理削除」といいます。

<img width="335" alt="2020-07-31_14h46_24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/c0d80931-c31b-23b8-c559-8a89d26f7c6a.png">
id: TodoのIDです（一意）
title: Todoの題名です
created: Todoを作成した日時です
isDeleted: Todoが削除されたかどうかです

# 3. データベースの構築
では、実際にデータベースから作っていきましょう！
pgAdmin4はブラウザで動作するツールです。Windowsの場合、メニューバーの検索ボックスに「pgadmin」と入力すると出てくるはずです。
<img width="593" alt="2020-07-31_14h11_51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/fd2409f5-feda-8c5d-47e0-cfd559482b26.png">

ここから以下の順番で生成していきます。
サーバーグループ -> サーバー -> データベース -> スキーマ -> テーブル

### サーバーグループの作成
まずはデータベースのサーバーグループを作成する必要があります。

Object > Create > Server Groupを選択します。
<img width="500" alt="2020-07-31_14h13_03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/8c59cd9a-ade2-82a9-cee2-bb7add18cf77.png">

名前は「TodoServers」としました。
<img width="692" alt="2020-07-31_14h14_44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/81d33719-02f3-4e9b-1da8-7d24a6f2c751.png">

### サーバーの作成
続いて、サーバーを作成します。
TodoServersを右クリック > Create > Serverを選択します。
<img width="519" alt="2020-07-31_14h16_24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/62428b78-2400-2a2f-98aa-ad1d0bd27e56.png">

Nameは「TodoServer」としました。
<img width="448" alt="2020-07-31_14h28_25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/0bc1caa6-c854-d2f9-edd3-467093536ca4.png">

Connectionタブにて、
Host name/address: localhost
Password: postgres
を入力し、Saveしてください。
<img width="396" alt="2020-07-31_14h30_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/c072fd14-b42e-195c-f756-1bcb78ce63e4.png">

### データベースの作成
続いてデータベースを作成します。
TodoServerのDatabasesを右クリックして、Create > Databaseを選択します。
<img width="432" alt="2020-07-31_14h39_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/b57c9863-09e0-2300-ae09-3c6f0cca0db6.png">

名前を「TodoDatabase」としてSaveしてください。
<img width="390" alt="2020-07-31_14h40_29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/189120df-026b-8ed4-c855-e72a4924f482.png">

### テーブルの作成
TodoDatabaseのSchemas > public > Tablesを右クリックし、Create > Tableを選択します。
<img width="460" alt="2020-07-31_14h43_18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/8033020a-cb9d-284f-fe11-11e970c60b13.png">

Nameは「todo」とします。
<img width="544" alt="2020-07-31_14h44_17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/6bd5593d-8947-bb95-6046-943a7ba45cc5.png">

Columnsタブで画像の通り列を設定していき、Saveしてください。（右上の＋ボタンから追加できます）
<img width="546" alt="2020-07-31_14h45_45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/dd5744c8-2e5c-98a9-8ae9-fe41c9c1229a.png">

# まとめ
今回はここまで！
アプリの簡単な画面設計、データベース設計、データベース構築を行いました！

# 次回は･･･
サーバーサイド（Rest API）の構築を行います！
[【Python】0からWebアプリ！ハンズオン(2)～ハローワールド編～ - Qiita](https://qiita.com/tsumasakky/items/07105da031340257065e)