関連記事
【開発実況シリーズ】Web日報登録システムを作る「#3 DB設計編」
2020.11.28
2021.03.14
【開発実況シリーズ】Web日報登録システムを作る「#4 プロジェクト環境構築編」
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第4回ということで、前回の続きを進めていきたいと思います。
前回までは
まずは、Todoリストを確認しておきましょう。
前回は、Webアプリのデータベース設計が完了しました。
社員を管理する「user」テーブルと、社員の勤怠情報を管理する「work」テーブルの2つを作成しました。
今回からは、開発フェーズに入っていきます。
設計フェーズで考えた設計に基づいて、実際にアプリを作っていくフェーズですね。
それでは、早速進めていきましょう！
プロジェクト環境構築
今回は「プロジェクト環境構築」ということで、開発フェーズを進めるための準備作業を行っていきます。
まずは、プロジェクトフォルダを作成します。
前回、アプリ名を「WoRKS」に決めたので、その名前で作成します。
プロジェクトフォルダにはアプリのソースコードだけでなく、設計資料などプロジェクトに関するものはまとめて管理したいので、資料を保管するための「doc」フォルダと、ソースを保管するための「web」フォルダを作成します。
前回作った画面設計の資料や、機能一覧、Todoリストなど、ドキュメント一式はdocフォルダに入れておきましょう。
webフォルダは、実際にアプリとして公開されるフォルダになります。
ここをVirtualHostに設定していきます。
開発時は開発用のローカルドメインでアクセス出来るように、hostsにレコードを追加します。
この辺りの話は、こちらも併せて学習してみてください。
各画面のパスも決めておきましょう。
社員側
login.php
index.php
管理者側
admin/login.php
admin/user_list.php
admin/user_result.php
としましょう。
各画面の空ファイルを作成していきます。
XAMPPのApacheとMySQLを起動。
ブラウザでアクセスすると、各画面が表示されました。
後は、データベースの接続情報など、各種設定情報を管理するための、コンフィグファイルも作成しておきましょう。
コンフィグファイルは、外部からアクセス出来ないようにwebフォルダの外に作成します。
configフォルダを作成して
DBへの接続情報を定義して、これでプロジェクトの基礎環境の構築は完了です。
後は、先ほど作った各画面ファイルに、実際のソースを書いていく形になります。
次回予告
最後にTodoを確認しておきましょう！
開発フェーズを進めていくに当たって、まずはプロジェクトの基礎環境構築が完了しました。
次回はここに、設計フェーズで作成した画面設計に沿って、各画面のUIを作っていきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
