WEBエンジニアになりたい!part6

どうも、10月下旬まで半ズボンを履く方のカルロスです。

 

今回は、データベースとWEBサイトの情報を保存できるようにしました。

結構大変、ヤバいことに手を出してしまいました。

 

前回の課題

サイトをCSS Jqueryを使ってオシャレにグレードアップさせる。

前回までのサイトがこちらです。

 

 

どうでしょう、

地味ですよね

特にあそこが

あそこです。

 

ボタン

 

スイッチ、ボタン、釦。

必要ですね、グレードアップ。

 

 

どうでしょう。イメージは、POP&KIDS。

とても押したくなるデザインに生まれ変わりました。

私が小学生だったら、半日は押し続けていた事でしょう。

参考(コピペした)サイトはこちらです。

https://saruwakakun.com/html-css/reference/buttons

 

青いボタンのソースコードがこちらです。

 

オレンジのボタンはこちら。

 

CSSで、色や形を形成しています。

今回は、コピペでデザインを変更しました。

CSS上級者になったら、カルロスデザインのボタンを作りたいものです。

 

では本編。

 

データベースにレシピを登録しよう

 

今回の、シュウイチ先生です。

左利きの雰囲気を出しているシュウイチ先生ですが

右利きでした。

 

まず、データベースの準備をしましょう。

 

あれ、データベースなんて持ってたっけ

 

 

持ってました、ダウンロードしていたXAMPPの中にしっかり入ってました。

詳しくは、PART2をご覧ください↓↓↓

https://dont-be-webcreater.com/2018/08/12/part2/

 

データベースはテーブルとカラムで管理されています。

テーブルがデータベースの中のフォルダの様なもので、

フォルダ(テーブル)の中にカラムがります。

 

それぞれWEBサイトの情報を対応させていきます。

 

データベースのテーブルとカラムを設定する画面です。

 

サイトの中の入力する項目をデータベースにカラムとして設定します。

 

これでOKです。

次は、phpで情報をデータベースに保存するためのコードを書きます。

 

どこの項目が、どこのカラムに保存されるか指示しています。

この辺りは、半分意味分らん状況でコードを書いていました。

 

準備はバッチグーです。

早速レシピをデータベースに保存してみましょう。

 

鉄火巻きのレシピを書きました。

ちなみにカルロスの好きな寿司ネタはサラダ巻きです。

 

レシピを投稿!!

 

すると、

 

指定したカラムに情報を保存する事が出来ました。

大成功です。サイコー。

 

これで、レシピサイトっぽくなってきました。

しかし、このままだと投稿したレシピは投稿しっぱなしで、後から内容を訂正する事が出来ません。

 

という事で次回は、投稿したレシピを編集する機能を付け足します。

 

次回の課題

サイトのレイアウトを調整する。

今回の学び

データベースに情報を保存できるようになった。

 

 

段々と、内容が複雑になっており、

意味もわからずコードを書いている状況になってきてしまいました。

時間をかけてでも、内容を理解しながらプログラミング出来るよう頑張ります。

カルロスはまだまだ、補助輪付きのプログラマー。

IT業界を立ち漕ぎで爆走できる日は来るのでしょうか。

 

見たい、知りたい、触りたい、などありましたら、コメントやSNSに連絡下さい。

真心込めて、対応させて頂きます。では、また次回。

 

part7へ続く
 

コメントを残す

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