LoginSignup
0
0
はじめての記事投稿

模写「How To Make Login&Register Form With User &Admin Page Using -CSS -PHP -MySQL Database」

Posted at

模写参照サイト
https://www.youtube.com/watch?v=fC3j2U_UZrQ&list=PLHY9pOWDX7wPJLNUo2MLggVU0qmOYAlej&index=52

順番
1.admin page
(1)html(admin_page.php)
(2)css(style.css)
2.user page
(1)html(user_page.php)
(2)css(style.css)
3.register form
(1)html(register_form.php)
(2)css(style.css)
4.login page
(1)html(login_form.php)
(2)css(style.css)
5.register form(DB接続)「POSTメソッド」
6.login form(DB接続)「POST,SESSION」
7.admin page「SESSION」
8.user page「SESSION」
9.logout「SESSION」


1.admin page (html&css) [2023年6月29日]

(admin_page.php)

①page style
②link で遷移

image.png
image.png

(style.css)

③装飾

image.png
image.png


2.user page (html&css)[2023年6月29日]

(user_page.php)

①page style
②link で遷移

image.png
image.png

(style.css)

③装飾(CSSコードが省略、admin pageと同じ)

image.png


3.register form (html&css) [2023年6月30日]

(register_form.php)

①page style
②linkで遷移

image.png
image.png

(style.css)

③装飾

image.png
image.png


4.login form (html&css) [2023年6月30日]

(login_form.php)

①page style
②linkで遷移

image.png

image.png

(style.css)

③装飾(CSSコードが省略、register formと同じ)

image.png

DATABASE
新規作成ー
名:user_db
作成をクリック
image.png

テーブル名:user_form
カラム数:5
作成をクリック
image.png

id(INT,255,NONE,なし,PRIMARY AL☑️)
name(VARCHAR,255,なし)
email(VARCHAR,255,なし)
password(VARCHAR,255,なし)
user_type(VARCHAR,255,ユーザ定義:user)
保存するをクリック
image.png

構造
image.png


5.register form(DB接続)「POSTメソッド」[2023年7月15日]
(1)html(register_form.php)

①nameが存在した場合

image.png
②passwordと確認用の一致しない場合

image.png
③問題なしDBへ挿入した場合(データベースへ情報挿入済)
login_form.php画面へ遷移

image.png

データベース設定

image.png
データベース接続

image.png
接続失敗場合

image.png

(2)css(style.css)

①nameが存在した場合(エラーメッセジー)

image.png

②passwordと確認用の一致しない場合(エラーメッセジー)
image.png

image.png


6.login form(DB接続)「POST,SESSION」[2023年7月15日]

データベースと接続
アカウントが存在場合
タイプがadmin場合、sessionのadmin_nameへ保存、admin pageへ遷移
タイプがuser場合、sessionのuser_nameへ保存、user pageへ遷移

image.png
アカウントが存在しない場合エラー

image.png
image.png


7.admin page「SESSION」[2023年7月15日]

ログイン済み名前を表示

image.png
image.png
admin nameを画面に表示

image.png


8.user page「SESSION」[2023年7月15日]

ログイン済み名前を表示

image.png
image.png
user nameを画面に表示

image.png

9.logout「SESSION」[2023年7月15日]

ログイン済み情報を削除 loginへ遷移

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0