© 2023 Jia-Yu, CHEN All Rights Reserved

Project Structure

​​​​* Using Laravel Framework to implement **MVC Structure**(Model, View, Controller) 
​​​​  and develop a wep application. 
​​​​* We use **Laravel Breeze** to implement functions and views of User Authentication
​​​​
​​​​Backend: php 8.2.0(Laravel 10 Framework)
​​​​Frontend: Tailwind CSS + HTML + JavaScript, using Vite as building tool
​​​​Database: MySql
​​​​Package Manager: npm
​​​​Dependency Manager: Composer

Project Functions

• Personal Center
• Historical Chart
• Realtime Data
• Warning Management
• Administration Managment

Build Environment

1. node.js(LTS)(v18.14.1)& npm(v9.3.1):
   (for Windows) (for MacOS)
   you can check if it's installed successfully by enter>

   ​​​​node -v
   

   in the command line

2. XAMPP(8.2.0) portable: Ref Article in Chinese
   (for Windows) (for MacOS)
   If you encoutered error msg when quitting the control panel, delete the "xampp-control.ini" file in your xampp folder, and restart "xampp-control.exe", it should work!

3. Composer: (requires PHP 5.3.2+ version)
   (for MacOS) if you use ios please refer to this article
   (for Windows)
   You don't have to check any of the check boxes during installation ! When you see the following screen, choose the "php.exe" file in your xampp path that you just downloaded (this is just an example image, the path may differ in your device)

   
   Restart your device after the installation, enter>
   ​​​​composer(or composer -v)
   

   in your command line to see if it's installed successfully! (you can see the following screen if it's okay to use)

Project Folder Structure intro

There are some folder that are used more commonly, which are

• app/Http/Controllers: functions are written in here
• app/Http/Middleware: checking the Http Request validness instead of in controller to save time
• resources: Web View Folder
• resources/views: Web View(Blade.php)
• routes: manage data sending routes(GET, POST etc.)
• database/migrations: database files
• node_modules/: node Modules
• vendor/: Composer Modules

More Info in Official Documentation (Press Me)

Command for initialization (in your command line)

Reminder : Open your php/php.ini file and remove the semicolon(;) before this three lines

extension=gd
extension=sockets
extension=zip

and then you can run these commmand in your command line ↓

- composer install  #install all the dependencies into the vendor folder automactically, you couldn't open the serve without this step
- npm install #install node modules
- npm run build
- copy .env.example .env #copy the .env file
- php artisan key:generate
- php artisan migrate #migrate all tables with no data
- php artisan db:seed

Last but not the least, if you need to use email verify function, you have to setup your own stmp settings

• modify gray lines of below image in your own environment, and don't forget to use a valid email of your own
• if you have problem setting your email, you can reference this link
  

CSS framework: Tailwind CSS

We use Tailwind CSS (currently v3.3.2) as our CSS framework
Tailwind CSS official website