見出し画像

Djangoでアプリ作成〜体重管理アプリ編12〜

こんにちは、こちょすです!最近どんどん暖かくなってきていて、半袖で過ごせる日が増えてきたので嬉しい気持ちです!

さて、今回もDjangoで体重・体脂肪率管理アプリを作成していきましょう!🔥

前回の復習

前回は更新機能を実装しました。更新機能の場合、登録機能とは異なり、既存のレコードに対して処理を行うので、そのレコードを特定するためのキー(=pk)を指定する必要があったのでした。
そのポイントさえ押さえておけばオールオッケーです!(ほんとはもう少し色々と学ぶことはあるのですが、まずはざっくりイメージをつかむことが大切💪

さて、今回はCRUDの最後のD(Delete)、削除機能を実装していきます!

念のためもう一度CRUDのイメージ図を出しておきますねー❗️

スクリーンショット 2020-05-02 22.18.10

では、張り切って最後のD、完成させていきましょう🔥

削除処理のルーティングの設定(urls.py)

新しい機能を追加するときはまずはここから!ですね!💪

deleteのurlパターンを追加したいのですが、もうわかってきている方も多いと思うので、まずは見ないで書いてみてください!
ヒントは「delete処理でも対象のレコードを特定する必要がある!」です✍️

では回答!こんな感じです💪

スクリーンショット 2020-05-02 22.31.39

いかがでしたか??正解できた方は自信を持ってください!できなかった方も復習して理解できればおっけーです👌

削除処理追加(views.py)

では削除処理を実装していきましょう!🔥もうurls.pyでだいたい予想が付いている方も多いかもしれませんが、update処理ととてもよく似ています!

スクリーンショット 2020-05-02 23.08.40

updateと処理はとてもよく似ているので、違っている部分(つまりdelete処理の肝)を説明していきます!💪

ポイント1:formの生成が無い

updateやaddの場合、ユーザの入力をしてもらう必要があるので、formの生成が必要でしたが、deleteの場合、ユーザから新たに入力してもらう必要は無いので、削除しています。


ポイント2:save()ではなく、delete()を使っている 

登録処理と更新処理の場合、どちらもsave()を呼び出してDBの登録または更新を行なっていましたが、削除の場合はdelete()関数を利用します。
これはお約束ごとのようなものなので、覚えちゃってくださいね!✍️

また、saveを実行するときには、methodがPOSTかどうかだけでなく、入力内容が妥当かどうかをis_valid()で確認していましたが、今回はユーザから新たに入力してもらう必要はないので、この条件を削除しています。


ポイント3:contextに登録しているのがformではなく、day

ここは少し混乱するポイントかもしれません💦が、大丈夫です!

updateやaddの場合、テンプレートファイルに表示するのは、入力を受け付けるformです。一方でdeleteの場合、入力を受け付ける必要は無いので、登録されている内容をそのまま表示すればいいので、formではなく、Dayオブジェクトを渡しています。

では次にdelete対象を表示するhtmlを作っていきまっしょい!🔥💪

削除確認画面の実装(day_confirm_delete.html)

ここもupdateなどととてもよく似た作りなので、見ないでできる方はぜひ見ないで実装してみてくださいね💪ポイントとしては1点だけ!

「views.pyから渡されているのはformではなく、dayですよー!」

では回答!

スクリーンショット 2020-05-03 21.41.24

いかがでしょうか??

ではもう一息!一覧画面に対して、更新ページへのリンクの隣に削除ページへのリンクも貼っていきましょう!

この実装もupdateを参考に、ぜひ自分で実装してみてくださいね!✍️ポイントは、

「urlタグを使って、deleteページを呼び出す!そのときにpkを渡すのも忘れずにね!」

では回答!🔥✋

スクリーンショット 2020-05-03 22.10.34

こうですね!thタグでつけた#は、bootstrapで生成されるテーブルの見た目を整えるだけなので、正直なんでもいいです!(つけなくても笑)

ではこれでちゃんと動くかどうか、実際にサーバを起動して確認していきましょうー!💪

まずは一覧画面に遷移して、真ん中のレコード(100KG)の削除ボタンをクリックしてみましょー🔥

スクリーンショット 2020-05-03 22.14.07

では削除ボタン押下!(どきどき)

スクリーンショット 2020-05-03 22.19.06

おっけー!無事遷移しました!では送信ボタンで削除できたか確認してみましょう🔥

では送信ボタン押下!(どきどき)

スクリーンショット 2020-05-03 22.23.50

おっけい!無事に削除できましたね!👏👏🎉

これでついにCRUDの全ての機能を実装することに成功しました!!

スクリーンショット 2020-05-03 22.25.56

これで一通りのデータ操作ができるようになったことになります!やったね!💪

次回以降は、今実装した機能をブラッシュアップしたり、おまけ的な機能を実装していこうと思います🔥


ツイッターもやってます!エンジニアのみなさまにとって有益な情報を発信していきたいと思いますので、ぜひフォローお願いします🙇🙏


この記事が参加している募集

おうち時間を工夫で楽しく

この記事が気に入ったらサポートをしてみませんか?