【PHP】Dreamweaver2020とXAMPPを使ってPHP開発環境を作る方法

Pocket

今回はAdobeのコードエディター、「Dreamweaver2020」と、PHPの開発環境を作ってくれる「XAMPP」を使ってPHPの開発環境を作る手順をメモしますφ(・_・”)メモメモ

 

今回はこちらのコードを例にして、PHPを使用できる環境を作っていきます。使用するデータ形式はPHPで作成していきます。bodyタグ内の「php? echo”こんにちわ” ;?」の部分がPHPコードとなっており、正常にPHPは動作する環境ができていればブラウザに「こんにちわ」と表示されるはずです。

Dreamwaver00

何も表示されませんね( ゚д゚)

それもそのはず、PHPはサーバー上で動く言語であり、サーバー環境を構築してあげなければ動きません。HTML、CSSと順調に来た人でも、まずはこのことを理解しておかないとPHPのスタート地点にすら立てませんので、がんばって環境を構築していきましょう(`・ω・´)

XAMPPをダウンロードする

まずはこちらのサイトからXAMMPをダウンロードしましょう

https://www.apachefriends.org/jp/download.html

XAMPPを起動させる

MySQL使用00

ダウンロードが完了したら、フォルダ内に「xampp-control.exe」があるはずなので、クリックします。

 

Dreamwaver01

ApacheとMySQLの「Start」ボタンを押します。実は単にPHPの動作を確認するだけならApacheの起動だけでいいのですが、MySQLもセットで起動しておいても問題はないでしょう。

Dreamwaver02

正常に起動すれば、PIDとPortに番号が割り当てられます。これでXAMPPの起動は完了です。

Dreamweaverの設定

Dreamwaver03

まずは上のメニューバーから「サイト」→「新規サイト」を選びます

 

サイト設定

Dreamwaver04

左のメニューバーで「サイト」を選択し、「サイト名」と「ローカルサイトフォルダー」の設定をします。
「ローカルサイトフォルダー」は「Xampp」フォルダ内にある「htdocs」フォルダを選択します。

サイト名:任意の名前で大丈夫です
ローカルサイトフォルダ:htdocsフォルダ

 

サーバー設定

Dreamwaver04.5

左メニューバーから「サーバー」を選択し、「+」ボタン(サイトを追加)を押します。

 

Dreamwaver05

「サーバー名」は任意の名前を付けて、「使用する接続」には「ローカル/ネットワーク」を選択します。
更に「サーバーフォルダー」には「htdocsフォルダ」を選択し、「Web URL」には「http://localhost/」と入力します

下画像のようになれば大丈夫だと思います。

Dreamwaver06

サーバー名:任意の名前で大丈夫です。
使用する接続:ローカル/ネットワーク
サーバーフォルダー:htdocsフォルダ
WevURL:http://localhost/

 

 

Dreamwaver07

上のタブの「詳細設定」を押します。

 

Dreamwaver08

「テストサーバー」項目の、サーバーモデルに「PHP MySQL」を選択し、「保存」ボタンを押します。

 

Dreamwaver09

テストというボタンを選択して、「保存」ボタンを押します。

 

これで設定は完了です。それでは最後に動作を確認するためブラウザを見てみましょう。

 

PHPが使えるか動作を確認する

Dreamwaver10

画面下のボタンから、今回私は「Google Chrome」を使って確認してみますが、確認する為のブラウザはなんでも構いません。

Dreamwaver11

無事に「こんにちわ」という文章がPHPコードによって表示されていますね。
PHPが使用できる環境が構築できたということですね(*’ω’*)

おわりに

私はこの方法でPHPを使用する、ローカル開発環境を構築できました。この方法で立ち上げに失敗する方は

  • 「Apache」がちゃんと起動しているか
  • Dreamweaverのサイト管理設定がしっかりできているか
  • 作成しているデータファイルはPHPか

この辺りを確認してみながら環境の構築を目指してみてくださいね。
それでは今回はここまでです。お疲れ様でした(・ω・)ノシ

エッグ

シェアする

コメントを残す

メールアドレスが公開されることはありません。

コメントする