自己管理Webサイトアプリを作成してみた vol.1(ログイン画面から、アカウントの登録画面まで)
- 最初に
皆さんお久しぶりです。やっと大学の前期のカリキュラムをすべて終わらせたので、夏休みです。今年は、新型コロナウィルスの影響で大学での生活が大きく変わって慣れないところでもありますが、夏休みに突入したので、自己学習として、HTML.PHP,Mysql,css,出来れば、動的な動作をさせる言語を使った自己管理(予定)するWeb上のアプリケーションを作成していこうかなと思います。 なぜ作ろうかと思ったのかは、やはり新型コロナウィルスの影響で自分の予定が管理しきれていないところが多くあったので、実際に作って自分で使いたいと思ったからです。
今回の記事では、画面遷移、おおよその画面設計を作成していきます。
画面遷移の設計 画面遷移の予定は、まず最初にログイン画面から始まり、そこで、アカウントがある場合は、そのままメールアドレス、パスワードを記入してログインしますその際にパスワード、メールアドレスに間違いがあった場合は、その画面で通知をして報告します。アカウントが無い場合は、アカウントの登録画面の方へ飛びますそこでは、アカウントの情報を入力し、完了したらログイン画面に戻る仕組みを作成していきます。 ログインが完了したら、そこでは、予定の一覧を表示し追加する場合、追加ボタンを設定し押したら予定の追加画面に飛ぶように作成を行います。 予定の設定は、まず、記入しその後確認終わったらまた、ログイン後の画面に戻る仕組みです。 画面遷移の内容を以下の図にも示します。
設計 設計ですが、おおむねに設定は、済ませているので、今で来ているところまでをまとめていきます。
- ログイン画面 ログイン画面は、設計できでいるのですがまだ、ログインの設計が出来ていませんこれは、夏休みの課題です。 ・プログラム
<!DOCTYPE html>
予定管理システム
ログイン
<form action="yotei.php" method="POST">
<table>
<p>e-mail:</p><input type="text" id="email" name="email"><br>
<p>パスワード:</p><input type="text" id="pass" name="pass"><br>
</table>
<input type="submit" value="送信">
</form>
<a href="new.php"><p>新規会員ですか?</p></a>
<a href="serch.php"><p>パスワード、IDをお忘れですが?</p></a>
<?php
$dsn = 'mysql:dbname=schedule_management;host=localhost;charset=utf8';//データベースの情報を設定
$user = 'root';//ユーザー選択
$password = '';//パスワード
?>
* アカウントの追加 ・アカウントの登録画面 <!DOCTYPE html>
新規アカウント作成
ここでは、新規アカウントの作成を行います。
アカウント作成には、E-mail、パスワードを入力してもらいます。
・確認 <!DOCTYPE html>
<?php var_dump($POST); ?>
<?php var_dump($POST); $e_mail=$POST['email']; $pass=$POST['pass']; ?>以下の内容で登録します
メールアドレス:<?php echo $e_mail;?>
パスワード:<?php echo $pass;?>
・完了 <!DOCTYPE html> if (isset($error['pass']) && $error['pass'] == 'blank');
?>
<?php $dsn = 'mysql:dbname=ほげほげ;host=localhost;charset=utf8';//データベースの情報を設定 $user = 'ほげほげ';//ユーザー選択 $password = ''ほげほげ;//パスワード
// $dbh = new PDO($dsn, $user, $password);
// $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// echo '接続に成功しています';
try{
$dbh = new PDO($dsn,$user, $password);//データベースに接続
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);//エラーをどこまで報告するのかの指定
// $sql="INSERT INTO user (id,name,message,date) VALUE (NULL :name, :message ,:date)";/SQL文でデータベースに追加
//SQLの追加の文を記入する(6・3)以降
$sql="INSERT INTO user2 (email,pass) VALUES (:email,:pass)";
$stmt=$dbh->prepare($sql);
$stmt->bindValue(':email',$e_mail, PDO::PARAM_STR);
$stmt->bindValue(':pass',$pass);
$stmt-> execute();
$date = array();
/*while($row =$stmt->fetch(PDO::FETCH_ASSOC)){
$date[]=$row;
}*///この文があるとUODATE文が受け取れないので不要
// echo '処理が終了しました。';
// echo '接続に成功しています';
}catch (PDOException $e){
print('Connection failed:'.$e->getMessage());
die();
}
?>
<h1>登録完了</h1>
<a href="login.php"><p>ログイン画面へ</p></a>
・実際のデータベース
- まとめ 今回は、長すぎてしまうので、ログイン画面からアカウントの登録画面までの記事とさせてください。実際に今は、今まで行ってきたことのまとめですが、今後は、ログイン後の画面の設計また、一番わからないログインの仕組みも作成していきたいなと思います。
Webサイトのレイアウトやデザインが個人的に難しすぎる
投稿が止まりすみません。課題に追われていました。 今回は、今まで作成してきたポートフォリオサイトのデザインの事について記事にしていこうと思います。 やっぱり作成するからには、じぶんが納得いくようなサイトの構造を作りたい、構成したとよく思いますし、この作ったサイトをかっこよく、美しく、渋くとデザインへのこだわりをノートなどに書くのは、簡単ですが、実際にCSSを使って作ってみようと思うと手が進まないものなので、今回は、この記事を作成すると同時に自分も勉強していこうと思います。
- サイトのレイアウトについて ・レイアウトとは:レイアウトとは、自分が作成したものを何処に配置していくかということで、私たちの身近なレイアウト例としては、部屋の配置です。ここにテレビを置きたい、ここに冷蔵庫、ここにテーブルを置いていこうといったものがレイアウトです。Webサイトのレイアウトもここに名前のブロックを入れて、ここには、ToDoリストでも入れてみようといったものです。 ・Webのレイアウト例 Webのレイアウトの例としては、様々なモノがあります。 1:シングルカラムレイアウト シングルカラムレイアウトは、サイドにコンテンツを定めず1つのカラムが縦に並べているスタイルで、スマホなどのサイトは、この構造が多いと思います。
2:マルチカラムレイアウト マルチカラムレイアウトは、1つのページを様々に分割する表記するレイアウトで、Webのサイトでは、この表記が多いと思います。例としては、左にメニューバーがある右には、選択したコンテンツを表示しているものです。
3:グリット型レイアウト グリット型レイアウト、簡単に言ってしまうとメルカリなどの表示の仕方で、1つのページに様々なコンテンツを表示してありそれを選択していくといったレイアウトでSNSでの活用が目立つと思います。
参考:ドコドア
- 今現在のポートフォリオサイトデザインについて 今回のポートフォリオサイトのレイアウトは、シングルカラムレイアウトで作成していきました。しかし、デザインがはっきり言ってまだ、美しいとも言えませんこれは、今後デザイン力を鍛えていく必要がありますね。 分割で貼っていきます。
背景は、木目で渋くいこうとしましたが、配色があれちょっと違和感があるなとおもいますので、次回以降治していきます。
今回は、デザインやレイアウトについで記事にしていきましたが、はっきり言ってデザインは、人それぞれです。流行っている服を見てコレダサくない?と思うのと一緒だと自分は、思っているので、デザインは、自分が納得するようなものを作成していきましょう。
【C++】ラーメンの発券機作ってみた
今回は、C++に挑戦しようと思います。
今回は、予算を事前に決めてその予算内に買い物するような仕組みにしたいと思います。
まずフローチャートの作成から始めようと思います。
フローチャートを作成することによって大まかな設計が建てられるので、余裕があるのであれば作成してから行うとスムーズに作成できると思います。
仕組みとしては、選んで、条件読んでの繰り返しを行っています。
【ソースコード】
#include<iostream>
using namespace std;
int main(void) {
int m=0;
int y = 0;
int yosan = 0;
int keisan = 0;
int sum=0 ;
///////予算の設定/////
cout << "今回の予算を記入" << endl;
cin >>yosan ;
//////ラーメンの選択///////
cout << "商品を選択して下さい" << endl<<"4で確定になります"<<endl;
cout << "1:豚骨ラーメン(500円)" << "味噌ラーメン(600円)"
<< "しょうゆラーメン(450円)" << endl;
while ( cin >> m)
{
switch (m) {
case 1:
sum += 500;
cout << "豚骨ラーメン購入" << endl;
break;
case 2:
sum += 600;
cout << "味噌ラーメン購入" << endl;
break;
case 3:
sum += 450;
cout << "しょうゆラーメン購入" << endl;
break;
default:
break;
}
if (m == 4) break ;
}
keisan = yosan - sum;
////予算から引いてまだ大丈夫なのか///////
if (keisan > 0) {
cout << "今現在の余り予算は、" << keisan << "円" << endl;
}
else {
cout << "予算オーバーです" << endl;
return 0;
}
////トッピングはいるのか///////
cout << "トッピングはいりますか?" << endl;
cout << "購入する方は" << "1を" << "購入しない方は" << "1以外を押してください" << endl;
cin >> y;
if (y == 1) {
cout << "1:きくらげ(50円)" << "2:煮卵(100円)" << "3:チャーシュー(150円)"
<< "4:チャーハン(250円)" << endl;
cout << "5を入力で注文が確定します" << endl;
int t = 0;
while (cin >> t) {
switch (t) {
case 1:
sum += 50;
cout << "きくらげ購入" << endl;
break;
case 2:
sum += 100;
cout << "煮卵購入" << endl;
break;
case 3:
sum += 150;
cout << "チャーシュー(150円)" << endl;
break;
case 4:
sum += 250;
cout << "チャーハン(250円)" << endl;
default:
break;
}
if (t == 5) break;
}
keisan = yosan - sum;
if (keisan> 0) {
cout << "合計は、" << sum << "円です。" << endl;
}
else {
cout << "予算オーバーです。" << endl;
return 0;
}
}
else {
cout << "合計は、" << sum <<"円です。" <<endl;
}
return 0;
}
表示結果
(予算が足りている例)
(予算が足りていない例)
【今後の発展】
構造体にしていけばもう少しプログラミングする量が減るのではないのかと考察する。
次回は、構造体も使用して作成していきます。
簡単では、ありますが今回は、これで終わります。
ポートフォリオサイトを作りなおしてみた ~DBの表示が出来た件~
皆様、こんにちは今回もポートフォリオサイトの作成の進展を書いていこうと思います。更新が悪くて申し訳ございません。大学の課題を終えるのに必死です。
話は、変わり以前DB導入の所で、表示されていない事について書いた記事がありましたが、その後の進展について今回は、書いていこうと思います。
まず、最初に原因についてを言ってしまうと、データを記入することは、していましたが、そのデータを表示させようとしませんでした。
ここで、SQLの文についてまとめていこうと思います。
まず、データの取得方法です。
SELECT * FROM デーブル名
です。SELECTは、日本語で「選択する」と言う意味です。データを選択して取得するものであると自分は、そう思えました。
この文を読んで思うことは*(アスタリスク)は、何の目的で描いているの?と自分は、最初思いました。この*(アスタリスク)は、すべてのカラムという意味です。
ここで、まだ”カラム”と言う言葉が出てきました。自分は、この言葉の意味を知らないので、わかりませんでした。
・カラムとは:テーブルの列にあたる部分の事です
https://26gram.com/database-terms より引用
次にデータの追加方法についてです。
INSERT INTO テーブル名 VALUES(テーブルの構造にあったデータを入れましょう)
INSERT INTOは、日本語で、~を挿入するという意味です。
例としては、
テーブルsampleにID、name,romaziと言った構造しているとします。そこに
INSERT INTO sample VALUES (1,'鈴木','suzuki');
と記入すると、IDに1が入り、nameの所に鈴木が入り、romaziの所にsuzuki が入ります。
こういう働きするのかINSERT INTO文です。
次に更新の方法です。
UPDATE テーブル名
SET カラム名 = 値, カラム名 = 値
WHERE id = 1
この文では、まず更新するテーブルを選択し、その後内容を記入してから、どこのIDを更新するのかを選択してデータの更新を行っていきます。
最後に削除の方法です。
DELETE FROM テーブル名
WHERE 条件
削除の方法は、テーブル名を選択して条件を選択して削除を行います。
例:delete from user where age < 20;
この文は、テーブルuserのカラムageの所で20未満の物を削除する文です。
ここで、一回道がそれて条件について説明します。
条件は、AND、OR、比較演算子について説明していきます。
AND
ANDは、簡単言うと条件が両方成り立っているのかを比較します。
例:delete from user where id="1" AND
old < 20;
上記の文の場合は、idが1でoldが20未満ではないと消去が出来ません。
例のように条件が両方成り立っていなければ消去ができないのです。
OR
ORは、ANDとは、違い片方の条件が成り立てば、条件は、満たされます。
例:
delete from user where id="1" OR
old < 20;
強引では、ありますが、上記の文の場合idが1かoldが20未満のどちらが達成していれば消去が可能になります。
比較演算子
比較演算子は、以下に引用しているサイトの記事がわかりやすかったので、参照します。
【これだけ覚えてたらOK!】SQL構文まとめ - Qiitaより引用
比較演算子 | 意味 |
---|---|
= | 左右の値が等しい |
+ | 左辺は右辺より小さい |
< | 左辺は右辺より大きい |
> | 左辺は右辺の値以下 |
<= | 左辺は右辺の値以下 |
>= | 左辺は右辺の値以上 |
<> |
左右の値が等しくない |
https://qiita.com/tatsuya4150/items/69c2c9d318e5b93e6ccd
では、本題の今のポートフォリオサイトの現在についてです。
まずデータベースのプログラムからです。
データベースのプログラムは、以上のようになりました。説明もソースプログラムのコメントに記入していきました。なぜかと言いますと実際にこの文は、何をしているのかを分かりやすくするために行いました。
実際の表示結果を以下に示します。
・まず記入し送信します。
接続に成功し、データの一覧が表示されます。
phpmyadminの方もしっかり反映されています。
今後の展開として、まず時間の表示を修正(現段階で何かしらのエラーが起きている)また、このままデプロイしてしまうと誰でも情報の更新が出来てしまうので、ログイン画面を作成し、責任者が更新できるような構造を作成していくことが目標です。
大学のオンライン講義もいいが、課題がものすごく多いのでそう思うと実際に大学行って講義受けたいと思いました。今後も頑張ります。
ポートフォリオサイトを作りなおしてみた 今の報告
みなさまお久しぶりです。最近更新を停止して申し訳ございません。訳としましては、言い訳にも見られてもおかしくは、無いのですが、今のご時世の影響で、大学は、再開したものの出席ついての課題がかなり多く自分自身課題を処理するので、キャパオーバーな状態でしたが、段々慣れてきましたので、再開使用と思いますが今までのように1週間に1回は、厳しいような気がしますがなるべく頑張ります。
今回は、前回まで作成をしてエラーが出て積んでいたポートフォリオサイトの作りなおしで、DB(データベース)ですが完全では、無いのですが、少し前進したので、記事にしていこうと思います。
前回の記事では、接続まで行いましたが、その後、実際にDBをPHPの中にSQL文を記入してどうなるがをやってみたのですがまぁ、すごいエラーに襲われました。出たエラーは
*2{
の部分が原因らしいのですか、$srmt->fetch()で行ってしまうと、UPDATE文が受け取れなくなると書かれているサイトがあり参考にして実行したのですが、更新しデータを入力すると、
今まで出来なかったDBへのデータの追加を行うことができましたが、画面上には、表示されません。
(実際の画面)
※datataim(スペルも違うし、おかしいぞ自分)
のような結果でした、今後の課題、この問題の解決と解決後、ログインページを作成し、ログイン後情報を更新するような仕組みを作成していこうと思います。
また、もしエラーの解決法、アドバイスがありましたら、コメント欄でお教えください。
ここにソースコードを示す
*1:Connection failed:SQLSTATE[HY093]: Invalid parameter number: parameter was not defined
*2:Error:SQLSTATE[HY000]: General error
が多かったです。
Connection failed:SQLSTATE[HY093]: Invalid parameter number: parameter was not definedのエラーの原因としては、SQL文のエラーが原因で発生していましたので、SQL文を修正すればエラーは、消えました。
Error:SQLSTATE[HY000]: General errorのエラーは、
ZOOMの使い方、個人的に困った点
自分の学校もオンライン形式の講義が始まりました。使用しているアプリケーションは、ZOOMがメインで行われています。
今回は、ZOOMの使い方を書いていこうと思います。
1.ZOOMとは
ZOOMとは、簡単に言ってしまうと複数人で同時にビデオ会議が出来る便利なモノです。また、ZOOMは、パソコンのみではなくスマホ、タブレットに対応しAndroid、iOSなど様々なOSにも対応しています。
ZOOMの主な使い方としては、オンライン講義、オンライン会議、オンライン研修最近では、オンライン飲み会にも使われています。
2.ZOOMの入手方法
まず公式サイトにアクセスをして下さい
アクセスしたらダウンロードの所をクリックして自分が求めているもの(多分ミーティング用ZOOMクライント)をダウンロードをして下さい
3.会議の入り方
ZOOMをダウンロードしサインインしたら以下の画像が表示されると思います。
そしたら四つの四角の右上の参加を押します。
するとミーティングに参加で会議IDと参加する時の名前記入があります。そして下にビデオをオフにして参加、オーディオに接続しないかの選択があるので、参加する講義、会議にあった設定で参加して下さい。
パスワードが無ければそのまま入れますが、ある場合は、パスワードの入力画面が出ますので、記入して入りましょう。
3.ZOOMを使って困ったこと
自分が初めてZOOMを使用して困ったことは、会議に入ったのに先生の話が聞こえないぞなぜなぜなんだとなった経験があります。原因としては、オーディオに参加せず会議に入ると音が聞こえないので、オーディオに参加してその後にマイクを切ることが大切です。(自分は、切るの忘れて恥かいた)
ポートフォリオサイトを作りなおしてみた 第2回~DBの挑戦~
今回は、前回のポートフォリオサイトを作りなおしてみたの続きの第2回目です。
今回は、主にphpを使用したデータベースの接続をメインに行っていこうと思います。最終的には、お知らせコーナー的なやつを作成
まず今回使うデータベース等の作業で使用するアプリケーションは、XAMPPさんを使用させていただきます。
XAMPPとは、完全無償で、PHP、データベース(略してDB)をインストールでき公式サイトには、最も人気のあるPHP開発環境です。
公式HP https://www.apachefriends.org/jp/index.html
また、DB(Darabase)は、情報の検索、貯蓄等が容易に使用できるように整備された情報の集まりであります。
DBが使用されている例としては、
・顧客の情報をまとめる
・ログインなどのユーザー情報の管理
などに使われています。
また、今回は、DBの中でもMySqlを使用していきます。
MySQLとは、多くのデータを高速に動作が出来、世界中の中でかなりの使用支持率の高いデータベース管理システムです
1、MySQLの設定
まず最初にXAMPPを起動しApacheとMySQLを起動します起動すると以下のようになります。
その後MySQLのAdminをクリックします。
すると、
のような画面が表示されます。
そしたら、左側にあるNEWをクリックします。
データベースを作成するが出たら以下のように設定していきました。
utf8_general_ci とは、アルファベットの大小の区別はしないモードです。
データベースが作成出来たら次は、テーブルの作成です。今回は、自分のデータを管理するので、userのテーブルを作成しカラム数(行列で表現さてる列の事)は、4にしました。
カラムの中身は、以下通りです。
名前 | データ型 | 長さ | その他 | |||||
カラム1 | id | INT | インデックスえおPRIMARY A_Iにチェックを入れる | |||||
カラム2 | name | VARCHAR | ||||||
カラム3 | what | TEXT | ||||||
カラム4 | date | DATETIME |
実際に作成すると
のようになります。
これでデータベースの作成は、完成です。
2、DBとの接続
次に作成したDBを接続する作業に移ります。
最初にソースプログラムを表示します。
最初の部分では、$dsnの所では、作成したDBについての情報についての設定、$userは、使用するユーザーについてです。(roorは、データベースの総合的な管理者を表しています。)
$passwordは、パスワードです。
以下のプログラムでは、まずtryの所では、DBの接続を行っています。$dbhは、データベースの接続,
の所では、エラーを何処まで報告するのかを設定しています。
接続に成功したらそのままechoで表示されますが、失敗するとcatchのところでエラー文が表示されます。
成功すると以下のように表示されます。
報告遅れましたが、情報更新を行う内容で行っていこうと思っていて今は、FORMで情報を送るようなシステムで構築していっていま。
FORMの所のソースプログラム
今回は、DBの接続まで行っていきました。
次回は、データの追加をやっていこうと思います。