Zenn
🍳

PHPを使ったウェブサイトの作り方

2022/11/11に公開
HTML
PHP
Web
XAMPP
tech

PHPを使ったウェブサイトの作り方を簡潔に説明します. よく勘違いしている人がいますが, PHPのウェブサイトを制作する段階ではレンタルサーバーを契約する必要はありません. 開発や表示は自身のパソコン上で行えます. 完成後に外部に公開したい方はさくらサーバーなどを契約しましょう.

手順

  1. XAMPPをインストールします. 適切なものをダウンロードしてインストールしてください. 全てデフォルトの設定通りで大丈夫です.
  2. PHPのパスを通します. Windowsのデフォルト設定ではC:\xampp\phpにphp.exeがあるはずです.
  3. ターミナルを再起動して, php -vを入力し, パスが通っているか確認してください.
  4. 適当なディレクトリに下記コードをindex.phpというファイル名で保存します. 今回はデスクトップにしました. このように, HTMLの中に<?php echo "Hello World! by PHP"; ?>のようにPHPのコードを埋め込んで使います.
index.php
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello PHP</title>
</head>

<body>
    <p> Hello World! by HTML </p>
    <p> <?php echo "Hello World! by PHP"; ?> </p>
</body>

</html>
  1. ターミナルを起動し, 先ほどindex.phpを作成したディレクトリに移動してphp -S localhost:8000を実行するとローカルサーバーを立てられます.
  2. ブラウザで http://localhost:8000/ にアクセスすると, index.phpが表示されます.
  3. PHPはHeaderやFooterなど共通のパーツをファイルとして読み込むために使うことも多いです. ここではフッターを共通パーツとして作りましょう.
footer.php
<footer>
    © 2022 <a href="https://github.com/ohno">Shuhei Ohno</a>
</footer>
  1. 先ほどのindex.phpに<?php include './footer.php';?>を追記することで, このfooter.phpを埋め込むことができます.
index.php
 <html lang="ja">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Hello PHP</title>
 </head>
 
 <body>
     <p> Hello World! by HTML </p>
     <p> <?php echo "Hello World! by PHP"; ?> </p>
+    <?php include './footer.php';?>
 </body>
 
 </html>
  1. ブラウザをF5キーを押すなどして更新すると, 追記されます.

おわりに

このように, PHPでウェブサイトを作るといっても, 90%以上がHTMLです. まずはHTMLを極めてください. 実際の開発フローでも,

  1. まずはHTML・CSS・JSだけでページを作る.
  2. この時点でBasic認証をかけたテスト用サーバーにアップロードする
  3. URLとパスワードをクライアントに送り, デザインや表示等を確認してもらう.
  4. OKが得られてから, 必要な個所だけPHPに置き換えて完成させる.

ということが多いです. WordPressの案件も同様です.

今回のファイル類はこちらのリポジトリに置いておきました.
https://github.com/ohno/PHP-example

下記のリンク集も役に立つと思います.
https://zenn.dev/ohno/articles/3d65e214d9280b

Discussion