[PHP]初心者でもできるwebアプリケーションの作成(Windows) 環境構築編

webアプリケーションを作成した際に、あまり記事がなかったので私が実装したときに調べた内容をまとめる。

• 今回利用するもの
  • xampp
  • CodeIgniter
  • Bootstrap4
  • CanvasJs
  • PHP
  • MySQL

実装編では、下のものができます。画面の内容的には意味がわからないとなっております。

目的

それっぽいwebアプリケーションの作成をこの記事一つでできるようにする。

目次

1. xamppのインストール
2. codeIgniterのインストール
3. Bootstrap4のインストール
4. CanvasJSのインストール
5. データベースの作成
6. MySQLとCodeIgniterの接続
7. index.phpを消す

xamppのインストール

1、「公式サイト」のwindows向けのボタンをクリックするとインストーラーがダウンロードされる。

２、ダウンロードが終了したら、ファイルを開いてインストーラーを起動する。下の画面に行くまでに２回くらい許可なりを求められるが全部「OK」を押しましょう。下の画面が出てきたら「NEXT」をクリック。

３、次の画面はインストールするものを選択する画面です。デフォルトでは、全部にチャックが入っているので必要ないものは外しておきましょう。今回利用するのは、Apache,MySQL,PHPだけですが、phpMyAdminもあると便利なのでチャックを入れておきます。下の画面のようにして「NEXT」をクリック。

４、install先をC:￥xamppとし「NEXT」をクリック。

５、「NEXT」をクリック。

６、ブラウザが勝手に開きますが無視して大丈夫です。「NEXT」をクリックするとインストールが始まります。インストール中に許可を求められるが許可して問題ないです。

7、インストールがおわったら「Finish」をクリック。

8、言語を英語に設定し「save」をクリック。

9、下の画面が表示されるたら、ApacheとMySQlをstartさせましょう。

10、ブラウザで「http://localhost/dashboard 」URLを入力したら、下の画面が表示されたらインストール成功です。

codeIgniterのインストール

1、「CodeIgniter公式サイト」のDownloadをクリックするとzipファイルがインストールされる。

2、インストールが終了したら、zipを解凍する。解凍したファイルを「C:\xampp\htdocs」に移動させ、ファイル名をwebアプリケーション名に変更する。今回は「test_app」とした。

3、ブラウザを開き「http://localhost/webアプリケーション名 」とすると下の画面が表示される。

Bootstrap4のインストール

1、「Bootstrap4公式サイト」からcssとjsのファイルをダウンロードする。

2、ダウンロードしている間に、そのファイルを保存するフォルダを作成します。「C:\xampp\htdocs/webアプリケーション名」にassetsというフォルダを作成します。

3、ダウンロードが終了したら、zipを解凍する。解凍したら、中にjsフォルダとcssフォルダが入っているので、それらを先ほど作成したassetsフォルダに移動します。
*動作確認は後ほど実装編で行います。

CanvasJSのインストール

１、「CanvasJS公式サイト」のDownloadをクリックすると、ダウンロードが始まります。

２、ダウンロードが終了したら、zipを解凍します。解凍すると、canvasjs.min.jsというファイルがあるので、それを「C:\xampp\htdocs\test_app\assets\js」に保存します。
*動作確認は後ほど実装編で行います。

データベースの作成

1、xampp control panelを開き MySQLを起動させます。起動させたら右側にあるShellボタンをクリックします。起動できたら下の画像のようなものが起動すると思います。

2、それでは、データベースの作成を行っていきます。上から順番に実行して行けば上手くいくはずです。

#まずmysqlに移動します.
cd mysql

#次にmysqlに入ります。パスワードを求められますが、初期状態では何も設定されていないので
#何も入力せずにenterを押してください
mysql -u root -p

#問題なく起動したら、試しにデフォルトで作られるデータベースを見てみましょう
#MariaDB [(none)]>とでるはずです。
MariaDB [(none)]>show databases;

+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| phpmyadmin         |
| test               |
+--------------------+
5 rows in set (0.00 sec)
#上記のようなものが出てくると思います。数が多少違っても使うことはないので気にしない
#では作っていきます。データベースの名前は好きつけてください。
#今回はアプリケーションの名前にしました。
MariaDB [test_app]>create database test_app;

Query OK, 1 row affected (0.02 sec)
#上記のものが出てきたら成功です。確認したいのであれば
# show database;とすれば、一つ増えてるとおもいます。

#次にテーブルを作成します。
MariaDB [(none)]>use test_app;

Database changed
#上記のようなものが出てきたら成功です。
#長くなるので一行で書く必要はありません。；をつけない限りクエリは実行されません。
#test_app.　のあとがテーブル名になります。
MariaDB [test_app]> create table test_app.hoge(
    -> id int not null primary ket,
    -> temp int,
    -> place varchar(20));

Query OK, 0 rows affected (0.21 sec)
#上記のようなものが出てきたら成功です。


#本当にできているか確認する方法は,show columns from テーブル名
MariaDB [test_app]> show columns from hoge;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| id    | int(11)     | NO   | PRI | NULL    |       |
| temp  | int(11)     | YES  |     | NULL    |       |
| place | varchar(20) | YES  |     | NULL    |       |
+-------+-------------+------+-----+---------+-------+
3 rows in set (0.02 sec)

#テーブルにデータを入力していきます。
MariaDB [test_app]>insert into hoge values
    -> (0,10,'新潟'),
    -> (1,15,'東京'),
    -> (2,5,'新潟');

Query OK, 3 rows affected (0.03 sec)
Records: 3  Duplicates: 0  Warnings: 0
#もしかしたら、日本語が使えなくなってるかもしれないのでmysqlの設定を変更してください。
#確認
MariaDB [test_app]> select * from hoge;

MySQLとCodeIgniterの接続

1、「C:\xamppl\htdocs\test_app\application\config」の中にある、database.phpを以下のように編集していきます。

database.php

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'データベース名',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

上記のように編集し保存したら、接続がうまくいくはずです。

index.phpを消す

現在の設定のままviewなどを作るとurlがhttp://localhost/test_app/index.php/home となってしまいます。index.phpとあると気持ち悪いので、消していきます。

1、「C:\xamppl\htdocs\test_app\application\config」 の中にある、config.phpを以下のように編集します。

config.php

#$config['index_page'] = 'index.php';となっているところを
$config['index_page'] = '';              

上記のように編集し保存.

2、「C:\xampp\htdocs\test_app」に.htaccessというファイルを作り、中身を以下のようにし保存。

RewriteEngine On
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L]
RewriteRule ^(.*)/$ $1/index.html [L]            

まとめ

環境構築編では、つまるところも少なかったと思います。
実装編は、今までフレームワークを作ったことがない人がかなり苦労すると思います。
実装編に入る前にMVCモデルがどういったものなのかを調べておくと入りやすいかもしれません。
実装編はここ