マナビヤ

人生が豊かになるブログ

manabiya

【第七回】知識ゼロから覚えるPHPプログラミング入門(GET送信編②)

f:id:fab5:20191218211839j:image

  • GET送信について知りたい
  • データを送信するプログラムの書き方を知りたい。

この記事はこんな方に向けて書いています。

こんにちは fab5 です♪

前回はGET送信におけるデータを受け取るプログラムについて話をしました。

前回の記事はこちら↓

manabiya.fab5.work

前回もお話しましたがGET送信には「データを受け取る側のプログラム」「データを送る側のプログラム」があり、受け取る側については前回話したので、今回はデータを送る側のプログラムについて説明します。

 

データを送信するWebページを作成する

前回の記事でもURLの後に「?a=~」でデータを送信できると説明しましたが、これではちょっと使いずらいですよね😅

そこで、例えばYahoo検索なんかでよく見られる四角の枠にワードを打ち込んで「検索」ボタンを押すような感じのWebページを作りたいと思います。


f:id:fab5:20191218212846j:image

 

HTMLで送信フォームを作る

 

データを送信するWebページを作るにはこのようなソースになります。


f:id:fab5:20191218202220j:image

【sousin.html】

今回はPHPプログラムではなくHTMLだけで送信フォームを作ります。

青枠で囲った部分が送信フォームのソースコードになりますね。

それではこのソースを実行するとどうなるか見てみましょう。

 

フォームを使用する

上記のプログラムを実行した画面が下の図のようになります。

URLは送信ページのsousin.htmlですね。


f:id:fab5:20191218202308j:image

 

このように実行画面には「メッセージをどうぞ」という文字と四角のテキストボックス、右に送信ボタンというのが現れました。

それでは、テキストボックス内にメッセージを入れてみましょう。


f:id:fab5:20191218202329j:image

 

今回は「おならプー」という文字を送信してみます。

テキストボックスに文字を書き込んだら「送信」ボタンを押してみましょう。

 

すると、前回作成した「データを受け取るページ(今回からわかりやすいようにuketori.phpに名前を変更しています)」に切り替わり「おならプー」と表示されました。


f:id:fab5:20191218202357j:image

 

これで「データを受け取るページ」と「データを送信するページ」がうまく噛み合いましたね。

それでは次にフォームについて説明していきたいと思います。

 

フォームについて

フォームというのは<form>で始まり</form>で終わるプログラムのことでフォームの中に<input>というタグが書き込まれています。

 

ソースの説明

それでは、今回の送信フォームについて説明します。

まずは下の図をご覧下さい。


f:id:fab5:20191218204335j:image

 

formの後にactionというのがありますが、これはaction属性といってこのページから送信したデータをどこに送るか指定するものです。

ここでは「uketori.php」にデータを送信すると指定しています。

次に<input type=”text”~>というのがテキストボックスを作るもの。

そして<input type=”submit”~>が送信ボタンを作るものです。

 

フォームから受け取りWebページに送信される仕組み

ここで送るページから受け取るページにデータが送られる仕組みを説明します。

まずは下記のソースをご覧下さい。


f:id:fab5:20191218204401j:image

 

この図は上に送信元のソース、下に送信先のソースを表しています。

送信元のテキストボックスに書き込んだ文字がそのまま送信先に送られるので、uketori.phpのページ上にsousin.htmlで書き込んだ文字が表示されます。

ここまででGET送信の説明は終わりです。

ちょっとややこしい部分もありましたが理解できたでしょうか?

 

今回のおさらい

 

それでは恒例のおさらいコーナーがやって来ました!

 

いまいち理解できなかったなって方もこれを見てバッチリ覚えてくださいね😀それではどうぞ!


f:id:fab5:20191218211624j:image

 ※ 送り側ファイル内の様子

おや?し〇かちゃん風の女の子が送信ページから何か文字を送ったみたいですね。鼻歌まじりでなんだか楽しそうです♪


f:id:fab5:20191218211643j:image

 ※ 受け取り側ファイル内の様子

おっ!一方の受け取りページでは男性が何やら送られて来るのを待っている様子。こちらも鼻歌まじりでご機嫌さんですね☺️


f:id:fab5:20191218211701j:image

 

ん?画面に何かうっすらと文字が浮かび上がってきました。

※ 演出上のイメージです。実際ははっきりと切り替わります。


f:id:fab5:20191218211717j:image


f:id:fab5:20191218211738j:image

 

これ前もあったよね…

 

以上でGET送信の受け取る側、送る側のプログラムが書けるようになりました。

ここまでの応用で何か作れそうな気がするので上手くいったら次の記事で紹介しますね😀

それでは See you next time !! 

関連記事

manabiya.fab5.work

manabiya.fab5.work

manabiya.fab5.work

manabiya.fab5.work

manabiya.fab5.work

manabiya.fab5.work