ルートの追加
今回は一覧からデータを削除をできるようにしてみます。まずはrouteを追加します。削除はPOSTで削除対象のIdを受け取り処理します。
config/routes
/ArticleDelete ArticleDeleteR POST
フォームはInputFormで実装してみます。Idのみの送信なのでこのほうが簡単です、たぶん。
Handler/ArticleList.hs
module Handler.ArticleList where
import Import
getArticleListR :: Handler Html
getArticleListR = do
articles <- runDB $ selectList [] [Desc ArticlePublished]
defaultLayout $(widgetFile "articleList")
--削除処理のポスト
postArticleDeleteR :: Handler Html
postArticleDeleteR = do
articleIdText <- runInputPost $ ireq hiddenField "articleId"
case (fromPathPiece articleIdText) of
Just articleId -> do
_ <- runDB $ delete (articleId :: ArticleId)
redirect ArticleListR
Nothing -> undefined
_ -> undefined
フォームから送信されるデータの取得にInputFormを使用します。InputFormはHTMLを生成しません。HTML側は直接書きます。
Yesodにはフォームには3種類、Applicative・Monadic・Inputがあり、Inputフォームが一番を自由度が高いものです。
まずはHandlerの実装です。
- runInputPostでInputFormによりPOSTされたデータを取得しています。(GETの場合はrunInputGetを使います。)
- 必須項目、hiddenタイプ、articleIdという名前のフィールドの値を取得しています。
- Idはテキスト値として送信されるので、それをfromPathPieceでキー値に変換しています。変換可能な場合はJust値となります。
- キー値の場合、deleteで対象キーのデータを削除します。
以上がHandler側の削除処理の実装です。View側にはFormと削除リンクを追加します。
templates/articleList.hamlet
<h1>Article一覧画面
<a href="@{ArticleR}">新規登録
<table border="1px">
<tr>
<th>タイトル
<th>公開日
<th>ビュー数
<th>
$forall Entity articleId article <- articles
<tr>
<td>
#{articleTitle article}
<td>
#{show $ articlePublished article}
<td>
$maybe count <- articleViewCount article
#{count}
<td>
<a href="@{ArticleUpdateR articleId}">編集
<a href="#" onclick="if(confirm('削除します。')){articleDeleteForm.articleId.value='#{toPathPiece articleId}';articleDeleteForm.submit();}">削除
<form name="articleDeleteForm" method=post action=@{ArticleDeleteR}>
<input type=hidden name=articleId>
フォームを作成し、Id用の隠しフィールドを定義しています。削除処理用のリンクを追加し、javascriptでフォームからIdを送信して完成です。Idは文字列ではないので、toPathPieceで文字列表現としています。fromPathPieceとtoPathPieceは文字列とキーを相互に変換できます。
以上が削除の処理でした。これでなんとなくYesodでの開発が行えるようになった気がします。
DB操作の基本はこれですべてです。
参考URL
コメントを書く