マナビヤ

人生が豊かになるブログ

manabiya

【第三回】知識ゼロから始めるPHPプログラミング入門【基礎編①】

f:id:fab5:20191210213210p:plain

こんにちは fab5 です♪

ここまで第一回第二回とPHPプログラミングを始めるための準備となるPHPの概要を進めてきました😀

前回までの記事はこちら↓

manabiya.fab5.work

manabiya.fab5.work

 

そしていよいよ今回は実際にPHPプログラムを組んでいくための基礎知識を勉強していこうと思います。

それでは早速いってみましょう👉 

PHPの基礎

それでは、PHPのプログラムを組んでいくにあたって

  • HTMLの基本(スケルトン)
  • プログラムの基礎 「print 」
  • プログラムの実行

以上の3つを順番に説明していきたいと思います。

これは基本中の基本になりますので確実に覚えていきましょう😀

 

HTMLの基本(スケルトン)

それでは、HTMLの基本となる「スケルトン」について説明していきます。

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


f:id:fab5:20191209191124j:image

このようにHTMLには基本骨格が決まっており、文章やPHPプログラムは<body>から</body>の間に書いていくようになります。

PHPプログラムを書き込んだ状態で保存する場合は必ず「.php」の拡張子で保存します。

これで、PHPプログラムを書き込んでいく準備ができました。

 

プログラムの基礎 「print 」

次に、プログラムの基礎として「print」という命令について説明していきます。

プリントというと普通は印刷やコピーのようなイメージがあるかもしれませんが、プログラムで言うprintというのは「表示」を意味します。

それでは、下の図を見てください。f:id:fab5:20191209191306j:image

この図で言いますと”から”の間にある「ページに書き出す文字列」という部分がWebページに表示される部分になります。

次に下の図を見てください。

 

f:id:fab5:20191209193145j:image

この図では<body>から</body>の間にPHPプログラムが書き込んであり、表示する部分は「Hello World」になります。

PHPプログラムは<?php~?>の間に書き込まれることになり、命令の最後には必ず「;」を付けるようにしてください。

 

プログラムの実行

それでは、このPHPプログラムを実行した場合、Webページにはどのように表示されるのか見ていきましょう。

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


f:id:fab5:20191209200024j:image

このようにブラウザのアドレスバーに先程制作したPHPプログラムのアドレスを打ち込みます。

アドレスを打ち込んだ後に「enter」で実行すると、Webページに「Hello World」と表示されます。

ここまでの説明でPHPプログラムの表示方法については理解できましたか?

 

イラストを入れる

それでは次に、画面にイラストを入れる方法について説明していきます。

このプログラムは最終的に「ジャンケン」をするところまで作っていきますので、とりあえず今回は日本語と画像をWebページに表示させるところまでいきたいとおもいます。

 

日本語と画像を入れる

日本語と画像を表示させるために

  • ソース
  • 実行画面

の2つに分けて説明していきます。

 

ソース

まずはソースについて説明します。

下の図をご覧下さい。


f:id:fab5:20191212201031p:plain

日本語(ジャンケンしよ!)と画像を表示するソースはこのようになります。

ここで新しく<p>や</p>というものが出てきましたね。

これは段落を意味しており、「ジャンケンしよ!」の下に画像が表示されるというソースになります。

画像を表示する場合は”<img src=’ ’>”を書き込むことになり「’」と「’」の間には画像ファイルの名前を書き込みます。

 

実行画面

再度ブラウザのアドレスバーにアドレスを打ち込んで実行させると、Webページには以下の図のように表示されます。


f:id:fab5:20191209203452j:image

まず、<p>のタグを入れたことで「Hello World」と「ジャンケンしよ!」は別の行に表示されます。

その下に「oyaji.gif」の画像が表示されることになります。

 

Webページとソース比較

それでは、Webページとソースを横に並べてそれぞれ比較してみましょう。


f:id:fab5:20191209211717j:image

この図のようにソースの命令と表示された文字や画像が矢印で結び付けられています。

ここまでは簡単に理解できますね😀

 

タグの形式

タグの形式には<p>文字列</p>のような始まりと終わりが必要なものと、<img src=’画像ファイル名’>のように終了タグが必要のないパターンがあります。

タグがいるモノといらないモノがあるというのはちょっとややこしいですね😅

 

エラーになるパターン

それでは、タグの中に入れる「”」や「’」の使い方でエラーになるパターンを説明します。

下の図をご覧下さい。
f:id:fab5:20191209211525j:image

このようにタグの中に複数の「”」を使用する場合は必ず「”」と「’」が区別出来るように種類を分けて書き込んでください。

まあ全部同じだと、どことどこが対応しているのか分からなくなりますしね😅

 

まとめ

それでは、本日のおさらいといきます。

言葉で説明するより目で見た方が早いと思うのでもう全部画像で説明します。

いや、むしろ説明しないので見てください。


f:id:fab5:20191209215116j:image


f:id:fab5:20191209215141j:image


f:id:fab5:20191209215203j:image


f:id:fab5:20191209215242j:image


f:id:fab5:20191210212549j:image

 

はい。それでは今日も最後までありがとうございました😀

また見てね~