XAMPP

【備忘録】 XAMPP インストール から hello world!までの手順

投稿日:2020年5月29日 更新日:

この記事はだいたい 4 分ほどで読めます。

VSCode で PHP をいじりたくて XAMPP のインストールと初期設定を行った際の備忘録です。

programing

環境

  • PC:Windows10
  • XAMPP:7.4.6

XAMPP セットアップ

ダウンロード

XAMPP download

ブラウザで[XAMPP]で検索してダウンロードサイトからインストーラをダウンロード。

インストール

ダウンロードしたインストーラを起動します。

Warning

XAMPP install1

Yesをクリック。

Warning

XAMPP install2

OKをクリック。

Setup – XAMPP

XAMPP install3

Nextをクリック。

Select Components

XAMPP install4

Nextをクリック。

Installation folder

XAMPP install5

インストール先を選択する画面です。

デフォルトはCドライブでした。

変更する場合はフォルダを選択します。

今回はDドライブに変更してNextをクリック。

Language

XAMPP install6

言語の選択画面です。

日本語とかなさそうなのでそのままNextをクリック。

Bitnami for XAMPP

XAMPP install7

Nextをクリックします。

ブラウザが開くけどとりあえずすぐ閉じる。

Installing

XAMPP install8

インストールが始まりました。

Completing the XAMPP Setup Wizard

XAMPP install9

インストール完了です。

チェックボックスを付けたままFinishをクリックするとコントロールパネルが起動します。

起動

インストールディレクトリ(今回の場合は D:\xampp\ )の[xampp-control.exe]をダブルクリックします。

※インストール時に立ち上げるかどうか聞いてくるので立ち上げるを選択すると勝手に立ち上がる。

XAMPP Control Panel

XAMPP Contrl Panel

ApacheとMySQLを起動します。

StartボタンをクリックしてModule部分が緑になってPIDとPortに値が入ればOK。。かな

動作確認

Apache,PHP,MySQL がそれぞれ動いてるか phpMyAdmin を動かしてみます。

browser

ブラウザのurlに localhost/phpmyadmin と入力。

phpMyAdmin が起動するのでデータベースを作成してみます。

phpmyadmin1

[データベース]タブをクリックしてテキストボックスに適当な名前を入力して作成をクリック。

phpmyadmin2

新しいテーブルができました。

Apache,PHP,MySQLがそれぞれ動いているようです。

ルートディレクトリに適当なファイルを作成して動かしてみます。

vscode1

D:\xampp\htdocsに phplessons というフォルダを作成し index.php ファイルを作成

ブラウザで確認。

browser2

表示されました。

次はHTMLファイルで確認してみます。

先ほど作成した index.php を削除します。

vscode2

index.html を作成。

ブラウザで確認。

browser3

。。。表示されない。

PHP部分がコメントアウトされちゃってる。

htmlファイルでもPHP埋め込んで動くように設定を変更してみます。

httpd.confを編集

XAMPP Control Panelを開きます。

Apacheの[Config]ボタンをクリック。

さらに[Apache(httpd.conf)]をクリックします。

最終行に下記を追加して保存します。

AddType application/x-httpd-php .php .html

Apacheを再起動してもう一度確認します。

browser4

表示されました。

htmlファイルにPHPを埋め込んで処理がされました。

感想

VSCode の PHP の拡張機能を試したくてローカル環境に XAMPP をセットアップしました。

インストーラ一発でローカル環境の構築がほぼほぼ完了できるってのは感動的です。

その昔、PHPを動かすのにIISと戦ったのはいい思い出です。

おわり。

-XAMPP
-, , , ,

執筆者:


comment

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

関連記事

パソコン操作

【備忘録】XAMPP で VSCode の拡張機能 PHP Debug を使う手順

この記事はだいたい 4 分ほどで読めます。 XAMPP をセットアップしたので VSCode の拡張機能 PHP Debug をセットアップして動かしてみました。 XAMPP をセットアップしたときの …

Search for…

フリーランスのITエンジニアで一人親方のページです

趣味は犬の散歩と洗車と草むしり

[IT系のこと・興味のあること・日常のこと]を記事にしています