フルスタックエンジニアのノウハウ
2020.11.28    2021.03.14

【開発実況シリーズ】Web日報登録システムを作る「#4 プロジェクト環境構築編」

【開発実況シリーズ】Web日報登録システムを作る「#4 プロジェクト環境構築編」

この記事の動画版はこちら

チャンネル登録お願いします!


今回は、開発実況シリーズ「Web日報登録システム」の第4回ということで、前回の続きを進めていきたいと思います。


前回までは


まずは、Todoリストを確認しておきましょう。




前回は、Webアプリのデータベース設計が完了しました。


関連記事

【開発実況シリーズ】Web日報登録システムを作る「#3 DB設計編」


社員を管理する「user」テーブルと、社員の勤怠情報を管理する「work」テーブルの2つを作成しました。


今回からは、開発フェーズに入っていきます。
設計フェーズで考えた設計に基づいて、実際にアプリを作っていくフェーズですね。


それでは、早速進めていきましょう!



プロジェクト環境構築


今回は「プロジェクト環境構築」ということで、開発フェーズを進めるための準備作業を行っていきます。


まずは、プロジェクトフォルダを作成します。


前回、アプリ名を「WoRKS」に決めたので、その名前で作成します。




プロジェクトフォルダにはアプリのソースコードだけでなく、設計資料などプロジェクトに関するものはまとめて管理したいので、資料を保管するための「doc」フォルダと、ソースを保管するための「web」フォルダを作成します。




前回作った画面設計の資料や、機能一覧、Todoリストなど、ドキュメント一式はdocフォルダに入れておきましょう。


webフォルダは、実際にアプリとして公開されるフォルダになります。


ここをVirtualHostに設定していきます。




開発時は開発用のローカルドメインでアクセス出来るように、hostsにレコードを追加します。




この辺りの話は、こちらも併せて学習してみてください。


関連記事

DNSの基礎(初心者向けに解説)


各画面のパスも決めておきましょう。


社員側

login.php

index.php


管理者側

admin/login.php

admin/user_list.php

admin/user_result.php


としましょう。




各画面の空ファイルを作成していきます。




XAMPPのApacheとMySQLを起動。




ブラウザでアクセスすると、各画面が表示されました。




後は、データベースの接続情報など、各種設定情報を管理するための、コンフィグファイルも作成しておきましょう。


コンフィグファイルは、外部からアクセス出来ないようにwebフォルダの外に作成します。


configフォルダを作成して




DBへの接続情報を定義して、これでプロジェクトの基礎環境の構築は完了です。




後は、先ほど作った各画面ファイルに、実際のソースを書いていく形になります。



次回予告


最後にTodoを確認しておきましょう!




開発フェーズを進めていくに当たって、まずはプロジェクトの基礎環境構築が完了しました。


次回はここに、設計フェーズで作成した画面設計に沿って、各画面のUIを作っていきましょう!


おすすめ記事