2021/12/15 よりサイトリニューアルしました

PHP,MySQLで大喜利サイトを作ってみる⑤ユーザーログインと回答投稿ページの作成

回答反映画面2

 

前回、CMSのログインとお題が掲載されるトップページを作成しました。↓

 

今回はユーザーログインと回答ページを作成したいと思います。

作成する大喜利サイトの仕様として、ユーザーがログインしていないと

①回答できない

②他人の回答に投票(いいね)ができない

③問い合わせなどができない

上記のような制限をかけるようにします。

それではまず、ユーザーログインのページを作成します。

 

 

ユーザーログインページ

ユーザーログイントップページ

ユーザーログインTOP

サイドメニューからユーザーログイン画面へ飛ぶリンクを貼っておきます。

このページは上記画面のようにユーザーログインするか、ユーザー登録から行うかの選択画面になります。

ユーザー登録済みの場合はログインページへ、まだの場合はユーザー登録ページへ誘導します。

 

ユーザー登録ページ

ユーザー登録ページ

ユーザーアカウントの情報を入力する画面です。大喜利ネームとパスワード、任意でアイコンもアップロード出来るようにしています。入力内容は次のページへpostします。

 

ユーザーアカウントDB登録

不正な入力チェックを行い、すでに同じ名前が使用されていなければデータベースへ登録を行います。

テーブルは下記の通り。

codenamepassimg

 

ユーザーログインチェック画面

ユーザーログイントップページから登録済みのユーザー情報を入力すると、このページでデータベースを参照し、一致する情報があればSESSIONをスタートさせてログインさせます。

続いて回答ページを作成します。

 

 

回答ページ作成

回答反映ページ(トップページ)

index.phpに、モックで作成したhtmlをphpに埋め込んでいます。

データベースを参照し、ユーザーの回答があれば全てカード形式で表示させるようにしています。

※いいねや回答削除などは後日詳細をまとめます。

 

回答チェックページ

前回作成したトップページの回答フォームのデータは、このページでチェックをかけます。

ログイン済み、かつまだ回答をしていない(原則1題1回答)のであれば、回答がデータベースに書き込まれます。

テーブルは下記の通り。

codem_wnamecommentgoodtime

m_wにお題の日付、回答内容はcommentに、goodはいいね、timeには回答した日時が入ります。

 

 

回答反映後の画面

回答反映画面

回答投稿後、トップページへ戻るとデータベースに登録された内容がカード式でTwitterのようにずらりと並ぶようになっています。

次回は「いいね」機能の実装についてまとめたいと思います。 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です