【初心者】レンタルサーバー(エックスサーバー)でPHPを動かしてみる

レンタルサーバーでPHPを動かす方法を、備忘録として残しておきます。

PHPを勉強してみようかなと思い立ったのですが、そもそも何をして良いのか、さっぱりわからない状態です。

XAMPP or レンタルサーバー

PHPの学習環境を作る方法を調べてみると、以下の内容がわかりました。

私はブログを書くためにレンタルサーバーを借りているので、XAMPPではなく、レンタルサーバーでPHPを動かしてみようと思います。

ちなみに、私が使っているレンタルサーバーは、エックスサーバーです。

エックスサーバーの初期ドメイン(~.xsrv.jp)が余っていますので、それを使おうと思います。

まずはHTMLを表示させてみる

①htmlファイルを用意する

まずはHTMLを表示させてみます。

テキストファイルを作成して、「test.html」と名前を変えました。

このファイルをテキストエディタで開き、以下のように記述しておきます。

<h1>テスト</h1>

②htmlファイルをサーバーに配置する

このファイルをどこに置けばよいのかわからなくて、エックスサーバーのヘルプを読みました。

エックスサーバーの「Xserverアカウント」にログインします。

ファイル管理を選択します。

該当のドメインの「public_html」のフォルダを開きます。

ここに、自分で作成したhtmlファイルをドラッグします。

サーバーの中に、htmlファイルが入りました。

③ブラウザから見ることができるか、確認してみる

Chromeなどのブラウザを開き、URLを入力してみます。

「http:// 」+　ドメイン名　の後ろに、「/+ファイル名」をつけます。

ちゃんと表示されました！

④階層を変えてみる

なんとなく[ public_html ]フォルダが、ごちゃごちゃするのが嫌だなぁと思いました。

htmlファイルをフォルダにまとめたくなったので、新しいフォルダを作って移動させてみます。

フォルダを作って、自分で作ったhtmlを移動させてみます。

ブラウザで表示するときは、「/+フォルダ名」をファイルの前に付けます。

PHPを動作させてみる

①PHPのコードを記入して、サーバーに置いてみる

さきほど作ったhtmlファイルに、PHPのコードを追加してみます。

<h1>テスト</h1>
<?php
$kakaku = 10;
$num = 5;
$sum = $kakaku * $num;
echo “{$kakaku}円のりんご{$num}個を買うと、金額は{$sum}円です。”;
?>

このファイルを、サーバーに置けば良いのではないでしょうか…？

同じ場所にドラッグすると、上書きすることができます。

ということで、さっそく上書きして、ブラウザで表示させてみたところ、「テスト」しか表示されませんでした。

※私はよくわかっていなかったので、拡張子を「.html」にしていたことが原因です。
　「.php」にすれば、表示できていたと思います。
　

エックスサーバーのヘルプを見てみたところ、以下のように書いてありました。

②.htaccessを編集してみる

調べてみたところ、以下の内容を「.htaccess」に追記すると良さそうです。

AddHandler fcgid-script .html

エックスサーバーの、サーバーパネルにログインします。

「.htaccess編集」をクリックします。

ドメインの右の「選択する」をクリックします。

以下の文字列を追加して、確認画面へ進みます。

AddHandler fcgid-script .html

「実行する」を押します。

③ブラウザで再度表示してみる

文字化けしていますが、どうやらPHPが実行されているみたいです！

文字コードをテキストエディタで「UTF-8」に変更して、再度サーバーにアップしました。

成功していますね！

PHPを書くのに、便利なエディタがある

私は、サクラエディタというテキストエディタで変更して、エックスサーバーの「ファイル管理」からファイルをアップロードしていました。

しかし、PHPのコードが見やすくて、ファイルのアップロードもできるエディタがあります。

色々あるみたいですが、私は「Atom」というエディタを使ってみようと思います。

Atom公式サイト

Atomエディタをインストールする

インストールして起動するとこのような画面が出てきます。

日本語にするパッケージをインストールします。

真ん中の「Install」を押すと、右側にテキストボックスが出てくるので「Japanese-menu」を入力して、右下のInstallを押します。

起動するたびに表示されないように、WelcomeGuideはチェックOFFにし、余計なタブを消します。

左上の「ファイル」「フォルダを開く」から、htmlファイルの場所を開きます。

これで、ファイルを編集することができます。

Remote-FTPをインストールする

Atomエディタから、ファイルをアップロードするために、「Remote-FTP」というパッケージをインストールします。

ファイルの「設定」を開きます。

真ん中のインストールを選択し、右側のテキストボックスに「Remote-FTP」と入力します。

「remote-ftp」のInstallを行います。

Configファイルを作成します。

「パッケージ」-「Remote FTP」-「Create FTP config file」を選択します。

Configファイルに、設定を入力していきます。

サーバー名がわからない場合は、エックスサーバーのサーバーパネルにログインして、調べます。

「サブFTPアカウント設定」をクリックします。

ドメイン選択で、使用しているドメインを選択します。

Atomエディタのconfigファイルを修正します。

htmlファイルを変更してみます。

ブラウザから表示させてみると、ちゃんとアップロードされています。

uploadを自分でクリックせず、htmlを保存しただけでも自動的にアップロードしてくれます。

今後について

画面から画面への値の受け渡しや、データベースと接続してみたいと思います。