AngularJS PHP Ecllipse
表題の通りのフレームワークと、API、IDEを使用して実装を進めようと思います。
必要な環境は下の記事にセットアップ方法を記述しています。
AngularJSに関しては、PHP(HTML)ファイルに下のような記述を行うと使用することができます。
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
設計をする
実装するにも、まずは設計をしないと始まりません。ただし、堅苦しく行いません。作るものは「31アイス」のレジ機能です。設計は次の通りです。
- 初期画面に開始ボタンを作成して表示する
- 多言語対応をする
- ログイン後、メニュー画面を表示する
- メニュー画面では、31アイスのフレーバー、コーン or カップの選択を行い、会計をする
環境構築
参考サイト；PHPUnitのインストール
- Eclipseを使用しますが、これにプラグインを追加します。Eclipse PDTです。
- Eclipseの実行の構成を開きます。
3．構成の内容を入力します。単一のテストを行う設定だと、JavaProjectではPHPUnitの実行クラスを選択できません。
- PHPUnitテストを実行する
余談：Composerのインストール(for windows)はここからインストーラーをダウンロードできます。ダウンロードページはこちらです。
そして、実行の構成部分に関してはこちらのサイトを参照しました。
画面の実装
画面側は、AngularJSでの実装になります。
作成するのは、初期画面とログインのモーダル画面です。
ちなみに、ログインのモーダル画面はここからコピッて使用しました。
ちなみに、自分の作成したものは下のような感じです。
今後も更新していきます。
でわでわ。。。
