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

模写参照サイト
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」
<hr>

<h3>1.admin page （html&css）　[2023年6月29日]</h3>
<h4>(admin_page.php)</h4>
①page style<br>②link で遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/005c57ae-5722-bc7f-0a1d-81bf78d6bbbd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/68c9f17c-73d1-e881-a42a-b410b2914aad.png)

<h4>(style.css)</h4>
③装飾

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/d044793b-5a88-ddd7-2e5e-aee396932f90.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/4f801766-72f1-0dc8-a7fd-07dfb2b6698d.png)
<hr>


<h3>2.user page （html&css）[2023年6月29日]</h3>
<h4>(user_page.php)</h4>
①page style<br>②link で遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/fae2e7f8-4ad8-f242-41e6-40a58d34688c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/b0704212-3942-319d-06b6-34275d5e753d.png)

<h4>(style.css)</h4>
③装飾(CSSコードが省略、admin pageと同じ)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/98ff6c5b-55eb-b3e9-219d-6bdcdd386d40.png)
<hr>


<h3>3.register form （html&css） [2023年6月30日]</h3>
<h4>(register_form.php)</h4>
①page style<br>②linkで遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/d3e01440-3275-1b6d-4c93-2f50ccc95847.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/29fcb4b9-8e5d-b603-7ad6-4275a5cfadf9.png)


<h4>(style.css)</h4>
③装飾

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/7c861828-26d0-0b60-946b-730073a94768.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/eeffad10-85e8-1afa-df4a-ee0424ea4c12.png)
<hr>


<h3>4.login form （html&css） [2023年6月30日]</h3>
<h4>(login_form.php)</h4>
①page style<br>②linkで遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/f80544cb-3124-49e2-badd-bf3b3e67bd1d.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/00a6c83b-ca66-7584-762f-0ed7c633848b.png)


<h4>(style.css)</h4>
③装飾(CSSコードが省略、register formと同じ)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/d04fd588-6047-7261-0d3c-411df17beb99.png)



DATABASE
新規作成ー
名：user_db 
作成をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/eeec4dc1-a7b0-0b8c-8c54-4e522095c74b.png)

テーブル名：user_form
カラム数：5
作成をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/e3c52716-b030-4cc8-d69d-d2c78c15f5ee.png)

id(INT,255,NONE,なし,PRIMARY AL☑️）
name(VARCHAR,255,なし）
email(VARCHAR,255,なし）
password(VARCHAR,255,なし）
user_type(VARCHAR,255,ユーザ定義：user）
保存するをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/9260fa01-90ac-d7e5-4144-3a3303250147.png)

構造
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/9dda30aa-8889-8bc1-86fd-1dd6ec0abc6f.png)

<hr>

5.register form(DB接続)「POSTメソッド」［２０２３年７月１５日］
(1)html(register_form.php)

①nameが存在した場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/5363badf-0727-62f9-e138-1db865718950.png)
②passwordと確認用の一致しない場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/17d46f83-0fca-e4dc-400b-61f44764fb6f.png)
③問題なしDBへ挿入した場合（データベースへ情報挿入済）
login_form.php画面へ遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/e6f4cb73-6285-6ac0-5094-3c96584f58c8.png)


データベース設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/d41e1b50-a961-1db9-56b2-f8bab878b7e8.png)
データベース接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/4e6c3cc0-79e8-7267-bb8f-19f110907a5d.png)
接続失敗場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/66ca9db9-3efa-de12-ccb7-c3319c6f7e85.png)

(2)css(style.css) 

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/8a011882-69c8-e67e-94c7-a3eed5cba1fe.png)

②passwordと確認用の一致しない場合（エラーメッセジー）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/a96860b8-ad07-4e0d-d68b-ebabe4a93581.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/fc398c0c-2e1e-8f96-197e-7c86d7e717f2.png)
<hr>

6.login form(DB接続)「POST,SESSION」［２０２３年７月１５日］

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/1d2d46ae-a830-c606-97e3-02f20033707e.png)
アカウントが存在しない場合エラー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/0993959a-f2dc-c396-2598-696e137af0f5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/6bd0f0c7-5052-6ff2-29d7-d7d5f7a148c8.png)

<hr>
7.admin page「SESSION」［２０２３年７月１５日］
<p>ログイン済み名前を表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/f5051813-3006-e083-22ef-e6c029ca2c63.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/0bcc573b-2904-e127-52e3-a207e7083f15.png)
admin nameを画面に表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/17ef0887-9487-d3ad-0ed6-f650bbdeaf2c.png)

<hr>
8.user page「SESSION」［２０２３年７月１５日］
<p>ログイン済み名前を表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/13059c2f-0159-3800-eba4-c7a6ca01c356.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/69589d17-6c2a-9dad-ecf9-35417cef92ff.png)
user nameを画面に表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/0d028a23-7670-466c-6b79-8ce3c63dbde6.png)

9.logout「SESSION」［２０２３年７月１５日］
<p>ログイン済み情報を削除
loginへ遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480732/85ce160f-1ef6-745e-5d80-3a8843e6fb22.png)