XAMPPを用いてデータベースシステムを作成する1 XAMPP編

Web開発

XAMPP とは、よく利用されるアプリケーションやソフトウェアをまとめたもので、一括でインストールすることができるようになっているソフトパッケージです。

数年前から勉強を兼ねて、XAMPPを使いWebデータベースシステムを作ることに何度か取り組みましたが、時間が無く途切れ途切れの開発となっています。

途中まで作成していたデータベースを用いたサイトもほったらかしの状態です。

ここ2ヶ月、身体の調子も悪くブログ投稿をサボっていたこともあり、サボりついでにこのほったらかしにしていたサイトをどうにか完成させようと動き出しました。

しかし、それも1年以上も手を付けずでしたのでどうやっていたのか、開発方法などあやふやにしか覚えていません。

そこで、一からやり直すつもりで勉強し直しています。

1年も空いてしまうと、忘れてしまうものですね。

開発物はすべてそうですが。

やりだしたら完成するまでは空白期間をつくてはダメです。

それが分かっていても、現状の環境では時間をまとめて取るのが難しくいい加減になってしまいます。

忘れても思い出せるようにここにまとめて置くことにしました。

今回も完成まで行き着けるかどうか自信がないので、作成に用いるシステムの使い方などを思い出せるようにまとめておこうと再びブログを再稼働したのです。

特にデータベース系はやったことがなかったので、XAMPP を用いてテストしながらの開発となっています。

以下、XAMPP の設定や使い方をまとめます。

XAMPPのダウンロード

まず、XAMPPをダウンロードする必要があります。

XAMPP Installers and Downloads for Apache Friends
XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl.

からダウンロードします。

私のパソコン環境として、OSはWindows10 Home Ver.1803 を使っていますので、

XAMPP Site

赤枠部分をクリックしてダウンロードします。

もしくは、

ダウンロードページ

Download XAMPP
Download XAMPP for Windows, Linux, and OS X. Older versions of Solaris are also available.

からダウンロードしてください。

また、XAMPPの現在(2018/10/27)のバージョンは、 XAMPP7.2.11 / PHP7.2.11 です。

含まれるアプリケーションは以下のバージョンとなります。

  • Apache 2.4.35
  • MariaDB 10.1.36
  • PHP 7.2.11
  • phpMyAdmin 4.8.3
  • OpenSSL 1.1.0i
  • XAMPP Control Panel 3.2.2
  • Webalizer 2.23-04
  • Mercury Mail Transport System 4.63
  • FileZilla FTP Server 0.9.41
  • Tomcat 7.0.56 (with mod_proxy_ajp as connector)
  • Strawberry Perl 7.0.56 Portable

XAMPPに含まれているアプリケーションのバージョンを確かめるには、ダウンロードページ

xampp download

の「What’s Included?」と書かれた個所をクリックで表示されます。

XAMPPのインストールとアンインストール

上に書きましたように、XAMPPには10種類ほどのアプリケーションが同梱されています。

そこで、自分が必要とするものをインストールすればいいことになりますが、ここでは全てインストールすることとします。

必要とするアプリケーション

ちなみに、私がデータベースシステム開発に必要とする環境としては、

  • HTML
  • JavaScript
  • PHP
  • MySQL
  • Apache

が必要となります。

初心者のために少し説明をしておきます。

HTML
ウェブページを作成するために必要な言語です。いつもネットで見ているサイトは全てこの言語で作られています。

JavaScript
HTMLは基本的に動きのない固定画面しか作成できません。
JavaScriptはサイトコンテンツを動的にしたり、ブラウザとサーバーとのやりとりを行うための言語です。

PHP
PHPもJavaScriptと同じようなことを行うための言語ですが、決定的な違いはJavaScriptはクライアントサイドで動作する言語であることに対して、PHPはサーバーサイドで動作する言語です。

MySQL
サーバーにデータベースを構築するためのシステムです。最新のXAMPPではMySQLコンパチのMariaDBがインストールされます。

Apache
Webサーバーソフトウェア(HTTPサーバー)です。これがあって始めてサーバーとブラウザとのやり取りができます。

HTML及びJavaScriptはブラウザが解釈実行してくれるので何のアプリもいりませんが、Apache・PHP・MySQLに関してはサーバー側で動作するものなのでそれぞれのシステムが必要となってきます。

XAMPPは、このApache・PHP・MySQLを提供してくれます。

Webサーバーについて

自分の使っているパソコンからブラウザを用いてYoutubeを見ているとします。

Youtubeサイトは、自分のパソコン以外のどこかにあるコンピュータに構築されたWebサーバーにあります。

そのWebサーバーにあるYoutubeサイトのURLをブラウザに入力してリクエストすると、ブラウザにそのYoutubeサイトがWebサーバーから送られてくるわけです。

ですので、自分でサイトを作り全国の人に見てもらうとしたら、作ったサイトをどこかのWebサーバーに登録する必要があります。

しかし、サイトを作成する時いきなりWebサーバーにUpするわけにはいきません。

何故なら、作ったサイトが完璧に表示し、正確に動作するかどうか分からないからです。

そこで、自分のパソコンにWebサーバー領域を作り、1台のパソコンでサーバーとクライアントの2役をさせてしまうのです。

これならば、自分のパソコン内で自己処理ができテストできます。

XAMPPを自分のパソコンにインストールすると、これが可能となるわけです。

これで、自分のパソコンでテストし、完成させたサイトを最後に正規のWebサーバーにUpするということになります。

XAMPPはこのように使うためのソフトです。

XAMPPのインストール

やっと、インストールの説明です。

ダウンロードした「xampp-win32-7.2.11-0-VC15-installer.exe」をエクスプローラなどからダブルクリックしてください。

dav

もし、この画面が出てきたら「はい」をクリックしてください。

xampp01

このメッセージが出てきたら「OK」です。

以降、ダイアログ画面で「Next」をクリックして進めていけばいいですが、

xampp03

この画面では、どのソフトをインストールするか指定できます。

分からなければ、全てにチェックが入っている状態で「Next」をクリックしてください。

xampp04

ここで、XAMPPのインストールフォルダを決めます。

これも、「C:\xampp」のままでいいです。

もし、違うインストールフォルダにするのであれば、以下での説明に出てくる「C:\xampp」の部分を全てそのフォルダ名に変えてください。

XAMPPに同梱されているソフトが全てこのフォルダにインストールされます。

xampp05

この画面は「Bitnami for XAMPP」というサービスについての紹介画面です。

チェックを入れておくとブラウザが開いてBitnamiのページが表示されます。

「Bitnami」とは、WordPressなどのアプリケーションを同じように簡単にインストールできるサービスだそうです。

私はチェックを外しました。そのままでも結構です。

後は、「Next」をクリックしていってください。

xampp09

インストール中の緑のバーが右へ伸びていきますのでしばらく待ちます。

インストールが終わると、下の画面となります。

xampp10

「Finish」でXAMPPのインストールは完了します。

チェックが入っているとXAMPPのコントロールパネルが開きますので、全く分からない人はこの時点ではチェックを外して「Finish」してください。

XAMPPのアンインストール

アンインストールは、普通に「Windowsの設定」から「アプリ」を選択すれば、XAMPPをアンインストールできます。

XAMPPの起動と終了

XAMPPでインストールした各アプリケーションはXAMPPコントロールパネルから制御します。

XAMPPコントロールパネルの起動

コントロールパネルの起動は、「C:\xampp\xampp-control.exe」をダブルクリックします。

もしくは、Windowsスタートメニューのアプリ一覧の「XAMPP」の中にある「XAMPP Control Panel」をクリックしても起動することができます。

xampp start

始めてコントロールパネルを起動した時は、この画面が出てきますので米の国旗の方が選ばれている状態で「Save」をクリックしてください。

次の起動からはこの画面は出てきません。

すると、以下のXAMPPコントロール画面が表示されます。

xampp control panel

このパネルでApacheやMySQLなどの起動及び終了などを行います。

XAMPPコントロールパネルの

XAMPPコントロールパネルの終了はコントロールパネル右側の「Quit」ボタンをクリックして下さい。

以上でXAMPPのセットアップは完了し、ApacheやMariaDB(MySQL)、PHPなどが使えるようになりました。

しかし、インストール直後は各アプリケーションの設定がうまくできていませんので正常に動作しません。

この設定がちょっと大変です。

以降、XAMPP・Apache・PHP・MariaDB の設定をまとめますが、長くなりますので、新たな記事として書き込みます。

XAMPPで確認しておきたいこと

ポート番号の確認

最初にアプリケーションが使用するポート番号を確認しておく必要があります。

※ポート番号とは

WWWサーバなどのサーバ型のアプリケーションがクライアントとの通信のやり取りを行う上で使用する通信路の番号です。

アプリケーション毎に使用するポート番号が設定されていますが、他のアプリケーションが同じポート番号を使っていると通信が行えません。

※XAMPPでインストールされたアプリケーションがデフォルトで使用するポート番号
Service       ポート番号
—————————–
Apache        80, 443
MySQL         3306
FileZilla     21, 14147
Tomacat       8080

ポート番号の確認方法

「C:\xampp\install」フォルダにあるバッチファイル

portcheck.bat

を使用して確認できます。

1.Windowsスタートボタンを右クリックで出てくるメニューから「コマンドプロンプト」を選択し、コマンドプロンプト画面を出します。

2.カレントディレクトリを「C:\xampp\install」に移動させます。

現在のカレントディレクトリ> CD C:\xampp\install

黄色部分を入力し[Enter]キーで、カレントディレクトリが C:\xampp\install となります。

CMD1

3.portcheck.bat を実行します。

C:\xampp\install >portcheck.bat

黄色部分を入力し[Enter]キーで実行します。

すると、次のようなエラーメッセージが表示されるはずです。

CMD2

Fatal error: Uncaught Error: Call to undefined function ereg_replace() in C:\xampp\install\portcheck.php:13
Stack trace:
#0 {main}
   thrown in C:\xampp\install\portcheck.php on line 13

これは、portcheck.bat から実行している

「C:\xampp\install」フォルダにある portcheck.php に記されている ereg_replace() が PHP7 では削除されており使用できないためです。

4.portcheck.php を修正します。

portcheck.php をエディタで開き、以下のように修正します。

修正前 → $port = ereg_replace(‘-‘, ”, $argv[1]);

修正後 → $port = preg_replace(‘/-/’, ”, $argv[1]);

修正後、上書き保存します。

5.再度 portcheck.bat を実行します。

CMD3

今度はエラーが出ないで正常に動作しコマンドプロンプトに戻ってきます。

「C:\xampp\install」フォルダ内に portcheck.ini というファイルが作成され、チェック内容が記されています。

portcheck.ini をエディタで開きますと、ポート番号の空きを確認できます。

[Ports]
Port80=FREE
Port443=FREE
Port3306=FREE
Port21=FREE
Port14147=FREE
Port8080=FREE

と、全て「FREE」であればOKです。

もし、以下のように「BLOCKED」の表示があれば他のウェブサーバーやデータベースが既に起動している状態です。

[Ports]
Port80=BLOCKED
Port443=BLOCKED
Port3306=BLOCKED
Port21=FREE
Port14147=FREE
Port8080=FREE

その場合は既にそのポート番号を使っているアプリケーションの設定を変更するか、またはXAMPPでインストールしたアプリケーションのポート番号に関する設定を変更する必要があります。

また注意として、このチェックをする時にXAMPPコントロールパネルから Apache と MySQL を起動している場合、ポート番号を使っていますので上の表示となります。

このチェックは、XAMPPの各アプリケーションを「Stop」させた状態で行ってください。

Apache を起動して動作を確認してみる

Apache とは上で説明しましたようにWebサーバです。

これを起動していると、自分が今使っているパソコンをWebサーバとして利用できます。

すなわち、自分のパソコン内に置いたhtmlファイルやphpファイルなどにアクセスし、ブラウザにその結果が表示できるわけです。

Apache を起動する前に、Apache が起動していない場合どうなるかを確認しておきます。

ChromeなどのWebブラウザを起動し、次の URL にアクセスします。

「http://localhost/」

これはブラウザを起動したPCと同じPC上で動作するWebサーバへアクセスしようとしています。

しかし、Apache は起動していませんので次のようなエラー画面が表示されます。

localhost1

では、Apache を動かしてみます。

XAMPPコントロールパネルから Apache の「Start」ボタンをクリックし、Apache を起動します。

xampp control panel2

起動後、再度

「http://localhost/」

にアクセスします。

すると、今度はWebサーバであるApacheが起動していますので、アクセスしたURLに対するコンテンツがブラウザに表示されます。

localhost2

「Welcome to XAMPP」というタイトルの画面です。

http://localhost/dashboard/」

http://localhost/dashboard/index.html」

上の2つの指定でも同様にアクセスできますが、

「http://localhost/」

でアクセスした時に、何故 dashboard 下にあるファイルにアクセスするのか分かりません。

http://localhost/index.html」

にアクセスするはずなのに?

まあ、これはまた調べることにしまして次にいきます。

↑ 分かりました。

http://localhost/index.html」は、「C:\xampp\htdocs\index.html」にアクセスしていますが、「C:\xampp\htdocs」に「index.html」はありません。

あるのは「index.php」です。

デフォルトの設定では、「index.php」にもアクセスできるようになっていますので、「index.php」にアクセスします。

この「index.php」内に「dashboard」ディレクトリが指定されていました。

ですので、「http://localhost/dashboard/index.html」にアクセスしているわけです。

各アプリケーションの起動と停止

起動

XAMPPコントロールパネルから各アプリケーションに対応した「Start」ボタンを押すだけです。

起動すると、PIDやポート番号が表示され、アプリケーション名が緑色のバックになります。

停止

XAMPPコントロールパネルから各アプリケーションに対応した「Stop」ボタンを押すだけです。

以上、一通りXAMPPの立ち上げを書きましたが、まだこれではデータベース等は正常に動作させることができません。

新規記事として、設定及び使い方をまとめます。

ここでは、XAMPPコントロールパネルでの各アプリの「起動と停止」方法を覚えておいてください。

インストールやポート番号の確認などは最初だけですので。

コメント

タイトルとURLをコピーしました