windowsでウェブサイト開発入門 PHPでプログラミング4 XAMPPの動作確認とVS codeでのプログラムコードの入力

シェアする

こんにちは。だいぶ時間が空いてしまいましたが、更新していきます。

前回、Visual Studio Code をインストールの説明でした。今回は、いよいよプログラムコードを入力して、自分のパソコンにインストールしたサーバーで表示していきます。

XAMPPの動作確認とVS codeでのプログラムコードの入力

では、作業を始めていきましょう

ウェブサーバーの起動

まずは、ウェブサーバーを起動します。

スタートメニューでXAMPPのコントロールパネルを起動し、

Apacheの右側のサーバーの「Start」ボタンを押します。

ブラウザで表示確認

ブラウザを起動して、

http://localhost

と入力して、表示されることを確認しましょう。

vs codeエディタの準備

次に、visual studio code (略してvs code)を起動します。

コーディング開始!

では、コードを書いていきましょう。

PHPというプログラミング言語ではなく、まずは、htmlというブラウザへ表示するページを記述する言語だけを使いますね。htmlだけで書かれたページは、ウェブサーバーはまるまるブラウザに渡すだけになります。

作業フォルダを開く

エディタが開いたら、今、ウェブサーバーが表示しているドキュメント(文書)が置いてあるフォルダを作業フォルダに設定します。

File -> Open Folder とメニューをクリックしてください。

下図のような感じで「C:\xampp\htdocs」とたどって、「フォルダの選択」をクリックします。

下図のように、開いたフォルダがHTDOCSという項目が表示されます。

作業フォルダと作業ファイルを作成

作業フォルダ作成

テスト用にフォルダを作成しましょう。

その空間の何もないところを右クリックして、「New Folder」をクリックします。

フォルダの名前を入力してEnterを押すと、作成されます。

テストファイル作成

次にテスト用のファイルを作成します。

できた「test」フォルダを右クリックして、「New File」をクリックします。

「index.html」と入力してEnterキーを押すと、ファイルが作成されます。

コードの入力

入力しましょう。

vs codeには、入力サポート機能がついてます。

まず、html と入力すると、下図のように、入力候補が出てきます。html:5 を選んでください。5の意味ですが、新しい HTMLバージョン5用のタグを入力してくれます。バージョン4までの古いHTMLと違い、かなり使えるタグが増えてます。特に理由がなければ5を使うようにしましょう。

html:5 を選択すると、下図のように一気に10行ぐらいのコードが入力されます。

これは、決まりごとのようなもので、バージョン5を使うことや、スマホで適正なサイズで表示されるための設定などがされています。基本、このまま使っちゃいましょう。

ではテストhtml文書を入力していきます。

<head>タグの中の<title>タグの中に、「テスト文書」と入力します。<タグ名>と</タグ名>で囲まれた間が「タグ名」の中になります。

ですので、<title>テスト文書</title>となるように入力するという意味です。

続けて、bodyタグのなかに、h1タグでヘッダを記述します。<は入力せず、h1と入力すると、vs code がタグの候補を表示してくれます。h1を選んでください。マウスで選ばなくても、キーボードの上下キーとEnterキーで選ぶこともできます。

下図のように、開始タグと終了タグが自動で入力され、さらに、タグの間にカーソルが移動してますので、このままh1タグ内の文を入力することができます。

このように、vs codeの入力サポート機能は便利ですので、ぜひ、使いこなして、キーボード入力を減らしていきましょう。余談ですがこの入力サポートの機能を「スニペット」といいます。snippetは英語で「断片」って意味ですね。

そんな感じでスニペット機能をふんだんに利用して、下のリストを入力してみてください。

コード入力の様子を下図に見せますね。

それぞれ<を打たずに  ul、li などのタグ名を入力して、スニペットを利用して入力しています。そしてスニペットを選択するときは、タブキー(qの左側のTab)を使ってます。

一瞬で選択できますよ。

ブラウザで表示を確認

phpなどのプログラムを実行しない場合、htmlファイルはブラウザでそのまま表示できてしまいますが、ここは、いったんウェブサーバーを通して表示を確認してみましょう。

ブラウザを起動して、URLに、 http://localhost/test  と入力してみましょう。

下図のような感じで表示されますよね。これは、ただローカルのファイルを表示しているのではなく、この場合は自分のパソコンの中ですが、ウェブサーバーにtestというフォルダの内容を表示するように要求を出しているんです。

そして、ウェブサーバーは、特にファイル名を指定されなかったときは、フォルダ内に、index で始まるファイルを探して、表示しています。この場合、index.html が見つかってますね。そのほかに、index.php などが、対象になります。これは、ウェブサーバープログラムであるapache の設定を変えることで指定することができますよ。

まとめ

今回は、Visual Studio Codeを使ってプログラムコードを入力(コーディング)を行い、ウェブサーバーで表示させるところまでやってみました。

これで、準備は整った感じです。しばらく、この後は

第5回:HTML、CSSを理解する
第6回:phpを理解する

といった感じで、CSSまで理解して、そのあと、いよいよ、サーバー側で実行されるPHPを使っていきますね。

次は、あまり間をあけず、書きたいと思います。

この記事が気に入ったら
いいね ! しよう