1. HOME
  2. ブログ
  3. IT技術
  4. 【第3回】Responderを使ってDjangoチュートリアルをやってみた【データベース操作編】

【第3回】Responderを使ってDjangoチュートリアルをやってみた【データベース操作編】

第3回~Responderを使ってDjangoチュートリアルをやってみた~

 

前回「【第2回】Responderを使ってDjangoチュートリアルをやってみた【データベース・モデル構築編】」の続きです。

今回も、Responder(レスポンダー)を使って「Djangoのチュートリアル」をやってみたいと思います。

Django のチュートリアル「はじめての Django アプリ作成」を、Responderで追う形になりますので、多少内容が異なる部分がありますが、成果物はできるだけ同じモノになるよう作る予定です。

【はじめての Django アプリ作成】
https://docs.djangoproject.com/ja/2.2/intro/

第1回はこちら

こちらの記事もオススメ!


データベースをWeb上で操作する

今回も、Djangoのチュートリアルには無い内容を含みますが、同じアプリケーションを作成する上では、通らねばならない道なのでやっていきたいと思います。

データベースへの追加や変更削除をWeb上で

今回の目標は章題の通り、データベースへの追加や変更削除をWeb上で行えるようにすることです。

前回で「Add」ボタンや「Change」ボタン、「Delete」ボタンを作りましたが、まだあれらは機能していませんでした。

今日は、それらを機能させていきたいと思います!

データの追加(Add)

ルーティング作業なので、いつものごとく urls.py に追記していきましょう。

まずは、 /add_question から実装していきます。

とりあえず、getで受け取ったなら質問追加ページ(add_question.html)を表示させて、postで受け取ったときにQuestionテーブルにデータを挿入し、管理者トップページ(admin_top)にリダイレクトさせてみます

実装

実装例は、以下のようになります。

やっていることは、前回とほとんど変わりませんね。

ビューの作成

次に、ビューを作っていきます。

これも、最低限の機能さえあれば良いので、以下のように実装しました。

これで、質問テーブルにデータを挿入できるようになりました!

実行

早速、動かしてみましょう!

うまく追加できました!

Choiceの追加機能を作る

やることは同じですので、説明は省きます。

さっきと違う点は、getで得た場合や、postでエラーを返すときに、Questionの一覧を渡す部分です。

コード

ビュー

ビューは、先と同じように、シンプルな実装にしました。

実行

動作確認してみましょう!

無事、動いているようです!

選択肢を一つ一つ追加するのは少し面倒ではありますが、機能としては、実現できているので良しとしましょう!

データの変更(Change)

次は、変更機能の実装です。

先ほどの「Add」では、各テーブルごとに処理を書いていましたが、「Change」機能は、工夫して一つの関数でまとめてみましょう

そんな時に役立つのが、引数を持つルーティングです。

例えば、http://127.0.0.1:5042/change/question/1 なら「Questionテーブルでid=1のデータを変更する処理」

http://127.0.0.1:5042/change/choice/2 なら「Choiceテーブルでid=2のデータを変更する処理」

というようにhttp://127.0.0.1:5042/change/の後に記述するパスによって機能を変更できます。

Responderでは、 @api.route('/change/{teble}/{data_id}') のように { } を使ってルーティングします。

コード

実際にコーディングしてみると、以下のように書くことができます。

(少し強引な部分もありますが...)

このように、引数をもつルーティングでは、処理を行う関数の引数としても、それらを追加してあげます

getで受け取った時は、まずはログインチェック authorized() をして、最初にどのテーブルを扱うかをチェックし保持しておきます。

table = Question if table_name == 'question' else Choice

次に、そのテーブルから主キーとなるidと合致するデータを持ってきて、ビューに渡します

ビューの実装

ビューは、以下のように実装しました。

少し複雑ですが、もらった table_name と対象のデータ field をhtml内に展開しているだけです。

これで一気に、QuestionとChoiceの「Change」機能の実装が終わりました

実行

それでは、実際に動かしてみましょう!

(スクショ撮った後が右下に写っていますが気にしないでください)

うまく機能していそうですね!

データの削除(Delete)

では次に、「Delete」機能ですが、これはさっきの「Change」機能と大きな違いはありません。

とはいっても、多少、postの処理が違うのと、ビューも少し異なります

コードと、実際に動いている様子を見て理解した方が早そうです。

コード

実行

上のコードが実際に動いている様子は、以下のようになります。

問題なく動いているようです!

どれもシンプルなビューですが、凝りたい人は、こだわって作ってみるのも面白いと思います!

第4回へつづく!

さて、今回は、ここまでになります。

今回の第3回でひとつの山場は越えたと思います。

難しい場所も多いので、一旦ここで立ち止まり、コードをしっかり読んで処理を理解する時間を設けても良いのではないでしょうか?

また、ここまでのコーディングが理解できると、いろいろな応用が効くようにもなるので、ぜひ遊んで見てください。

ちなみに、この記事で書いているコードで「ここはもっとこうしたら良いんじゃないか?」など見つけるのも面白いと思います。

さて、次回は「公開用のビュー」を作成していきます。

今までは、ずっと裏の実装をしていたので「Poll (投票)のアプリ」を作っていたことを忘れてしまいそうでしたが…(笑)

いよいよ形にしていくことになりますので、お楽しみに!

第4回の記事はこちら

【全編まとめ】Responderを使ってDjangoチュートリアルをやってみた

こちらの記事もオススメ!


ディレクトリ構成

現在のディレクトリ構成も載せておきます。

 

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡本社、東京オフィスの2拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア