fbpx
  1. HOME
  2. ブログ
  3. IT技術
  4. 【Python】[第7回:前編] Responderを使ってDjangoチュートリアルをやってみた【adminページ改良編】

【Python】[第7回:前編] Responderを使ってDjangoチュートリアルをやってみた【adminページ改良編】

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

前回の記事の「【第6回】Responderを使ってDjangoチュートリアルをやってみた【静的ファイル管理編】」の続きです。

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

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

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

第1回はこちら

adminフォームのカスタマイズ

ついに、Djangoチュートリアルの最後です。

チュートリアルの最後では、管理者(admin)ページのカスタマイズをしましょう。

現在、Pollsアプリケーションは正常に動作していますが、どうも「質問の追加」が面倒な印象です。

質問(Question)を追加する際に、選択肢(Choice)も動的に追加できるようにしたほうが、より良いアプリケーションとなりそうです。

しかし、Djangoチュートリアルと同じような形にするには、ResponderではDjangoほど簡単にはいきません。

まずは雛形を作る

今までフィールドの追加は、質問と選択肢それぞれについて作成しました。

しかし、すべて「質問の追加機能(Add_question)」に統合したいと思います。

また、ついでに未来の質問を設定できるようにフォームを修正しましょう。

Questionの追加フォームの修正

まず、AddQuestionクラスのGETメソッドで、現在の日付をビューに渡すようにします。

次に、ビューも修正します。

(ついでにデザインも少し変更してみました)

確認

良い感じですね。

しかし、まだ、POSTメソッドの処理は修正していないのでうまく働きません。

選択肢フォームの追加

次に、質問に紐づける選択肢を登録するフォームを作成しましょう!

とりあえず、選択肢のフォームを2つ作成してみます。

下部には「Add another Choice」ボタンを設置し、3個以上の選択肢を登録できるようにします。

しかし、まだ add()関数 を実装していないので、ボタンを押しても何もおこりません。

JavaScriptで実装

では、早速、JavaScript で実装しましょう。

あらかじめ、 <div id="add_choice"> で追加する部分にID付けしておきました。

このIDをJavaScript側で見つけて、同じようなフォームを追加していきます。

したがって以下のように実装できます。

このJavaScriptは、先ほどの add_question.html の下部に追加すれば、OKです!

確認

Add another Choiceボタンを押すと・・・

【フォームが増えた!】

POST処理の修正 (Add)

それでは、POSTの処理を修正していきます。

やることは大して変わりませんが、ここで初めて配列として受け取るフォームchoices[]votes[]があります。

これらは、Responderでは get_list() 関数(responder.models.QueryDictクラス)を使って取得します。

実装

したがって、以下のように実装できます。

(ついでにエラー処理も記述)

確認

うまくいっていますね!

これで管理者ページはだいぶ使いやすくなりました。

Delete処理の修正

次に、他の処理も少し修正しましょう。

現在は「質問」と「選択肢」の削除はそれぞれで行う必要があります。

しかし、本来ならば「質問」を消せばそれに紐づいた選択肢も消えるべきです。

そうでなければ、データベースにゴミが溜まっていってしまうことになります。

そこで、以下のように修正しましょう。

これで、ある質問を消すと、その選択肢も一緒に削除されるようになりました。

Questionの情報を増やす

では、さらに、管理者ページをもっと使いやすくしてみましょう!

そのために、最近の投稿には、視覚的に分かりやすい工夫をしてみます。

このように、「直近の質問」「否」かを取得し、内包表記でリストにしてビューに渡してみます。

確認

ビューは、上記のように書き加えればOKです。(20行目あたり)

「〇」「×」表示で分かりやすくなりましたね。

上手くいったようです!

後編に続く

さらに、改良は続きます!

が、、、後半に続きます!

後半はこちらになります。

関連記事

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事