# Webサイト制作 2020年度 最終課題 自己点検ページ　　　グループ番号　 g2121

## １　制作物のカテゴリー：Webサイト

## ２　制作物の概要説明

メモ帳サービス
* ユーザー名、パスワードを入力しユーザー登録を行う
* 登録したユーザー名とパスワードでログインを行う
* ログインするとメモ帳一覧が表示され新たなメモの作成や既存のメモの削除が行える
* トップページからはお問い合わせフォームや使い方ページにアクセスできる

## ３　相互評価する受講者に特に見てもらいたい注目点、および上手く作り込めなかった反省点
ー見て欲しい点ー
* サイトのデザインを細部まで作り込んだ
* ファビコンやロゴのデザイン
* スマホ画面のほとんどに対応して表示することが可能
* ログイン機能・ユーザーの保存機能で、どこでもいつでもメモにアクセスできる

ーできなかった点ー
* スマホ画面表示は対応しているが、スマホからメモの書き込み・削除ができない
* お問い合わせで、メールを実際に送信することができなかった

## ４−２　HTMLとCSSを使いこなしているか
* HTML
ートップページー
index.html : 約80行
ー登録画面ー
register.html : 約50行
ーお問い合わせ画面ー
contact.html : 約50行
ー説明画面ー
instruction.html : 約50行

* CSS
ートップページ(index.html)ー
index.css : 約180行
ー登録画面(register.html)ー
register.css : 約250行
ーお問い合わせ画面(contact.hrml)ー
contact.css : 約150行
ー送信完了画面(contact.php)ー
contact_after.css : 約70行
ー説明画面(instruction.html)ー
instruction.css : 約250行
ーメモ画面（memo.php）ー
memo.css : 約170行

## ４−３　JavaScriptとjQueryとAjaxをどのように使用したか
* jQueryとAjaxはjs/register.js[18-44行]で使用している。これは、サーバ側にPOSTをしており、ユーザ名とパスワードを送信し、data.jsonに書き込む処理はregister.phpによって行なっている。また、これらは　js/memo.js[28-51行],[82-107行]でも使用している。
* JavaScriptでは、　js/login.js [18-28行]にて内容のチェックを行なっている。具体的には空文字であれば、サーバに投げる前にエラーを表示させるようにしている。

## ４−４　PHPを使いこなしているか
* register.php[65行]にて、ユーザの名前とパスワードをjsonファイルに書き込み、新規登録を行っている。また、同じユーザー名は作れないようにしている。

* contact.php[111行]では、contact.htmlからの質問内容などの情報を読み取り、お問い合わせとして送信したように見せた。また、過去のお問い合わせを表示するようにしている。

* memo_add.phpでは[58-73行]にてdata.jsonにメモデータの追加を行なっている。
* 認証の失敗時にはmemo_add.php[50-56行],memo_delete.php[48-54行]のような処理を行なっている。
* memo_delete.phpでは[56-81行]にてメモデータの削除処理を行なっている。中では、データの全検索やデータの存在確認などの処理を行なっている。
* memo.phpにて、メモの一覧を表示させている。
* memo.php[66-69行]にてメモデータが存在しない場合は、「データが存在しない」皆を表示する

## ４−５　Cookieを使いこなしているか
* js/login.js[31-32行]にて、ログイン時にユーザ名とパスワードをCookieに保存し、ユーザ認証に用いている。
* js/login.js[3-4行]にてWindow読み込み時に残っているログイン情報を消すために、Cookieを削除している。
* js/memo.js [65-75行]にてユーザとパスワード情報を抜き出している。
*

## ５　他サイトなどからの著作物の引用、テンプレートサイトなどの利用
無料の公開素材で引用元明記が不要な物を除き、他サイトから画像素材などを引用したときはここにそれらをすべて列挙してください。素材として公開されていない画像（例えば実際に営業している店舗のホームページ画像など）は使用してはいけません。GoogleやBingなどの画像検索で見つけた画像はほとんど著作権保護の対象になっていますから使えません。無料の画像素材を配布しているサイトなどを使用してください。この説明文と下記の記載例を消し、この部分にすべての引用素材を記載します。公開されているサンプルコードやテンプレート提供サイトを利用した時も、ここに記載してください

記載例

* サイトトップページ背景画像　

　ータイトル：スマホ操作ー
　https://www.photo-ac.com/main/detail/389479?title=%E3%82%B9%E3%83%9E%E3%83%9B%E6%93%8D%E4%BD%9C&searchId=3127064136

ーイラスト素材：レスポンシブのイメージー
https://www.ac-illust.com/main/detail.php?id=2563630&word=%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%81%AE%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8&searchId=236021522