技能五輪ウェブデザインに向けて（２）

技能五輪ウェブデザインに向けて（２）

【技能五輪ウェブデザイン】
Windows10（VirtualBox5.1.18+vagrant1.92）htaccessを設定し、REST化する方法

※これは vagrant と virtualbox でWebサーバー環境を構築している前提で行います。
※vagrant up 済の状態で開始します。

１：まずは、vagrant reloadで起動する

leftPhotoImage
DOSプロンプトから、vagrant reload で起動する

２：VirtualBox画面上で、SHELL画面を起動する

leftPhotoImage
仮想OS上のコンソール画面で操作します。キャプチャからWindowsのほうへ制御復帰するには、キーボード上の右側のCTRLキーで復帰します。
leftPhotoImage
キャプチャボタンを押してしまうと、制御が仮想OSのほうに移ります。
leftPhotoImage
ユーザーID：vagrant
パスワード：vagrant
カーソルが動きませんが、ちゃんと入力は受け付けております。
画面上で、

sudo vi /etc/httpd/conf/httpd.conf

と入力し、ファイルの編集に入ります。
leftPhotoImage
上下左右のキーでスクロールしていき、最初に　AllowOverride None　と書いてあるところを探します。
leftPhotoImage
AllowOverride None

と書いてある部分を None →　All に変更します。
leftPhotoImage
さらに下へスクロールしていき、同じように　AllowOverride None　と書いてあるところを探します。
leftPhotoImage
AllowOverride None

と書いてある部分を None →　All に変更します。

合計二か所変更いたします。
leftPhotoImage
変更が終了したら、ESCキーを押し、：ｗ と入力します。（Windows上では、 SHIFT+； で ： と表記します）

ENTERキーで確定します。
leftPhotoImage
確定すると、上記のようなファイルを書き込んだという旨の表示になります。
leftPhotoImage
：q と入力します。（Windows上では、 SHIFT+； で ： と表記します）

ENTERキーで確定します。
leftPhotoImage
カーソルに戻ってきます。そのまま、このキャプチャ画面の抜けるため、キーボード上の右側のCTRLキーを押して制御をWindowsに戻します。
leftPhotoImage
キャプチャ画面を抜けて、閉じる動作（保存）を選択してください。
leftPhotoImage
再び、vagrant reload で再起動します。

３：ローカルサーバー上のフォルダに .htaccess ファイルを配置

leftPhotoImage
今回使用したローカルサーバーフォルダは
D：￥LWS￥wd￥public￥REST
だったので、そのフォルダに .htaccess ファイルを配置します。

なんでも、index.php に記述を集めようという方法です。

４：http://192.168.33.10/REST/index.php にアクセスしてみる

leftPhotoImage
JSONデータが全部表示されています。

JSONの表示には、PHPで以下のような記述にしております。

header("Content-Type: application/json; charset=utf-8");
print $json;
leftPhotoImage
若年者ものづくり競技大会を意識して同じように作ってみました。

/jakunen/main

とアクセスされたら、API Documentのmainと同様にJSONデータがフル表示されるようにしました。

５：http://192.168.33.10/REST/jakune/main/mio にアクセスしてみる【固有ユーザー名にアクセス】

leftPhotoImage
テーブル内の mio という名前のユーザー情報だけ表示

６：：http://192.168.33.10/REST/jakune/main/2 にアクセスしてみる【2番目のユーザーにアクセス】

leftPhotoImage
テーブル内の id=2 のユーザー情報だけ表示
  • ※結論：vagrant も xampp も htaccess だけで REST は実現できる。
  • ※RESTのため、$_SERVER['REQUEST_METHOD']の値を見てCRUD対応。
  • ※HTMLのFormからは GET / POST しか送信できない。
  • ※JSのAjaxから GET / POST / PUT / DELETE を送信する方法が１つ。
  • ※FormのHIDDENパラメータから PUT / DELETE を送信して、$_SERVER['REQUEST_METHOD']を上書きする方法が２つめ。
  • ※どうやら技能五輪は、GETだけで良さそう。
↑