レンタルサーバーでPHPを動かす方法を、備忘録として残しておきます。
PHPを勉強してみようかなと思い立ったのですが、そもそも何をして良いのか、さっぱりわからない状態です。
XAMPP or レンタルサーバー
PHPの学習環境を作る方法を調べてみると、以下の内容がわかりました。
- 「XAMPP(ザンプ)」というものをインストールすると、簡単にPHPを勉強する環境を作ることができる。
- 多くのレンタルサーバーにも、PHP環境が整っている。
私はブログを書くためにレンタルサーバーを借りているので、XAMPPではなく、レンタルサーバーでPHPを動かしてみようと思います。
ちなみに、私が使っているレンタルサーバーは、エックスサーバーです。
エックスサーバーの初期ドメイン(~.xsrv.jp)が余っていますので、それを使おうと思います。
まずはHTMLを表示させてみる
①htmlファイルを用意する
まずはHTMLを表示させてみます。
テキストファイルを作成して、「test.html」と名前を変えました。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_18.jpg)
このファイルをテキストエディタで開き、以下のように記述しておきます。
②htmlファイルをサーバーに配置する
このファイルをどこに置けばよいのかわからなくて、エックスサーバーのヘルプを読みました。
「ホームページのファイルはどこへアップロードすればいいですか?」
アップロードを行いたいドメイン名のフォルダを選択されますと、[ public_html ]というフォルダが表示されます。
この[ public_html ]内に、インターネット上で公開するファイルをアップロードしてください。
※エックスサーバー公式ヘルプより参照
![ちなのアイコン画像](https://tinapedia.com/wp-content/uploads/2020/08/cropped-s512_f_object_105_0.png)
[ public_html ]というフォルダの下に置けばいいんだね
エックスサーバーの「Xserverアカウント」にログインします。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_19.jpg)
ファイル管理を選択します。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_20-1024x191.jpg)
該当のドメインの「public_html」のフォルダを開きます。
ここに、自分で作成したhtmlファイルをドラッグします。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_01-1024x466.jpg)
サーバーの中に、htmlファイルが入りました。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_04-1024x340.jpg)
③ブラウザから見ることができるか、確認してみる
Chromeなどのブラウザを開き、URLを入力してみます。
「http:// 」+ ドメイン名 の後ろに、「/+ファイル名」をつけます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_02.jpg)
ちゃんと表示されました!
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_03.jpg)
④階層を変えてみる
なんとなく[ public_html ]フォルダが、ごちゃごちゃするのが嫌だなぁと思いました。
htmlファイルをフォルダにまとめたくなったので、新しいフォルダを作って移動させてみます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_05.jpg)
フォルダを作って、自分で作ったhtmlを移動させてみます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_06.jpg)
ブラウザで表示するときは、「/+フォルダ名」をファイルの前に付けます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_07.jpg)
PHPを動作させてみる
①PHPのコードを記入して、サーバーに置いてみる
さきほど作ったhtmlファイルに、PHPのコードを追加してみます。
このファイルを、サーバーに置けば良いのではないでしょうか…?
同じ場所にドラッグすると、上書きすることができます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_06.jpg)
ということで、さっそく上書きして、ブラウザで表示させてみたところ、「テスト」しか表示されませんでした。
※私はよくわかっていなかったので、拡張子を「.html」にしていたことが原因です。
「.php」にすれば、表示できていたと思います。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_07.jpg)
エックスサーバーのヘルプを見てみたところ、以下のように書いてありました。
.htmlや.htmでPHPを動作させたいのですが、どうすればいいでしょうか?
.htaccessを編集する必要があります。
ご利用いただいている環境によって設定内容が異なりますため、メールサポートへご相談下さい。
※エックスサーバー公式ヘルプより参照
②.htaccessを編集してみる
調べてみたところ、以下の内容を「.htaccess」に追記すると良さそうです。
エックスサーバーの、サーバーパネルにログインします。
「.htaccess編集」をクリックします。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_10.jpg)
ドメインの右の「選択する」をクリックします。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_11.jpg)
以下の文字列を追加して、確認画面へ進みます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_12.jpg)
「実行する」を押します。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_13.jpg)
③ブラウザで再度表示してみる
文字化けしていますが、どうやらPHPが実行されているみたいです!
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_14.jpg)
文字コードをテキストエディタで「UTF-8」に変更して、再度サーバーにアップしました。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_21.jpg)
成功していますね!
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_17.jpg)
PHPを書くのに、便利なエディタがある
私は、サクラエディタというテキストエディタで変更して、エックスサーバーの「ファイル管理」からファイルをアップロードしていました。
しかし、PHPのコードが見やすくて、ファイルのアップロードもできるエディタがあります。
色々あるみたいですが、私は「Atom」というエディタを使ってみようと思います。
Atomエディタをインストールする
インストールして起動するとこのような画面が出てきます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_51-1024x546.jpg)
日本語にするパッケージをインストールします。
真ん中の「Install」を押すと、右側にテキストボックスが出てくるので「Japanese-menu」を入力して、右下のInstallを押します。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_52-1024x638.jpg)
起動するたびに表示されないように、WelcomeGuideはチェックOFFにし、余計なタブを消します。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_53-1-1024x496.jpg)
左上の「ファイル」「フォルダを開く」から、htmlファイルの場所を開きます。
これで、ファイルを編集することができます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210301_54.jpg)
Remote-FTPをインストールする
Atomエディタから、ファイルをアップロードするために、「Remote-FTP」というパッケージをインストールします。
ファイルの「設定」を開きます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_01.jpg)
真ん中のインストールを選択し、右側のテキストボックスに「Remote-FTP」と入力します。
「remote-ftp」のInstallを行います。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_02-1024x569.jpg)
Configファイルを作成します。
「パッケージ」-「Remote FTP」-「Create FTP config file」を選択します。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_09.jpg)
Configファイルに、設定を入力していきます。
サーバー名がわからない場合は、エックスサーバーのサーバーパネルにログインして、調べます。
「サブFTPアカウント設定」をクリックします。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_04.jpg)
ドメイン選択で、使用しているドメインを選択します。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_05.jpg)
Atomエディタのconfigファイルを修正します。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_07-1.jpg)
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_08.jpg)
htmlファイルを変更してみます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_10.jpg)
ブラウザから表示させてみると、ちゃんとアップロードされています。
uploadを自分でクリックせず、htmlを保存しただけでも自動的にアップロードしてくれます。
![](https://tinapedia.com/wp-content/uploads/2021/03/20210303_11.jpg)
今後について
画面から画面への値の受け渡しや、データベースと接続してみたいと思います。
![](https://tinapedia.com/wp-content/themes/swell/assets/img/placeholder.gif)
![](https://www16.a8.net/0.gif?a8mat=3H7HO8+EHJQPE+CO4+5YJRL)