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

どうも、お母さんのお古のTシャツを着ているカルロスです。

最近、仕事でミスして怒られるたびに

プログラミングのモチベーションが上がっております。

 

今回は、phpを使ってサイトで入力した情報を送信できるようにしました。

 

前回の課題

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

 

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

 

 

そして、今回のアップデートがこちらです。

 

 

違いがわかりますでしょうか

難しいですね、サイゼの間違い探しくらい難しいと思います。

 

正解はこちらです。

手順の項目を縦並びから、横並びにしました。

 

 

え?それだけかって?

それだけです。

カルロス、縦並びを横並びに変えただけじゃん

サボんなよって思ってます?

 

甘ちゃんですね、

プログラミングの世界で縦並びから横並びにするのは一苦労なのです。

エクセルとは違います。カルロスが何をしたのか説明しましょう。

 

 

こちらが、手順のhtmlです。

カラフルで可愛いですね、因みにカルロスの好きな色は青色です。

 

こちらが、CSS

そしてこの一文が項目を横並びにするコードです。

このコード以外にも横並びにするコードがいくつかありましたが、

flexが一番文字数を少なく動かせたので、こちらを採用しました。

 

説明は以上です。

どうでしょう、WEBサイトはこんな感じで配置を調整しています。

意外と簡単でしたね。

すいません、サボってスプラトゥーンやってました。

 

さて本編に入りましょう。

 

PHPを使ってサイトの内容を送信しよう

 

毎度お馴染み、シュウイチ先生に教えてもらいました。

シュウイチ先生、好きなお菓子はハリボーだそうです。

一つ食べたら、止まらなくなっちゃうんだとか。

因みにカルロスは二、三個食べたら満足です。

 

 

現在、料理のレシピサイトを作っている途中です。

サイトの外観(html)は大体完成しましたが、

入力したレシピを投稿する機能をつけていません。

なので、今回はレシピを投稿できるようにしました。

 

参考にしたサイトはこちらです。

https://techacademy.jp/magazine/4955

 

 

htmlの中を<form>というタグを使って、送信するデータを選択します。

こちらが今回の追加したコードです。

form action=”index.php”←データを送るためのphpのファイルの名前です。

method=”get”←データの受け取り方を書きました。受け取り方にはgetとpostの2種類があります。関東と関西みたいなものです。(違いました、以下で説明します。)

 

index.phpのコードです。

formの中の送信する入力欄をこの中に書き込みました。

 

準備完了です。

 

私の好物アジフライのレシピを入力してみました。

アジフライだったら、バケツ一杯分くらい食べられます。

いつかの夜、アジフライで神経衰弱をする夢を見ました。

それくらい好きです。

 

レシピを公開するを押すと、、、

 

こんな感じです。

これでいいんです。大成功です。

 

URLに注目ください。

index.php?syasin=food_aji_fry.png&ryourimei=アジフライ&syokuzai1=アジ&syokuzai2=小麦粉&syokuzai3=卵&syokuzai4=パン粉&tejun1=アジに小麦粉を付ける&tejun2=アジに卵を付ける&tejun3=アジにパン粉を付ける&tejun4=油で揚げる&kotu=よく噛んで食べる

送信したいデータが、URLに反映されています。

これが、GETです。POSTはURLに反映されない受け取り方法でした。

GETだと送信した物がURLで丸見えです。見られるのが恥ずかしい物はPOSTを使いましょう。

 

無事レシピを送信できるようになりました。

しかし、送ったレシピを保存するデータベースがありません。

次回は、レシピを保存するデータベースを作ります。

 

次回の課題

前回の課題で、大してサイトをグレードアップ出来ませんでした。

という事で、

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

 

今回の学び

・PHPを使ってデータを送信出来るようになった。

 

 

WEBエンジニアになりたいシリーズ、見てくれる方が少しずつ増えてます。

お陰で、カルロスの元気玉はグングン大きくなっています。

part6も頑張るぞ!

 

おいカルロス!カルロス、おい!あーー、カルロス!ロス、、カルロス、、カルロス!!

などありましたらコメント下さい。

では次回。

 

part6へ続く

 

コメントを残す

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