###### tags: `database` `database system`
# Example Project Environment deployment
[TOC]
## Pre-step
### Download the required software
- Please download and install the following software first:
- [Node.js (Choose the one with LTS)](https://nodejs.org/en/)
- for frontend
- [XAMPP (version 3.2.27)](https://www.apachefriends.org/download.html)
- for backend
- [vs code (Optional)](https://code.visualstudio.com/)
- for coding
- or download from here:
- [Google Drive](https://drive.google.com/drive/folders/1y2WsAzCxhM4hTcSngrjtOp20HqdMwunM?usp=sharing) - These are the versions I currently use.
### Install
:::info
If you have already installed them, you can skip this step.
:::
- **XAMPP**
:::spoiler
1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
:::
- **Node.js**
:::spoiler
1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 
13. 
14. Check if the installation is successful
- click `start` (not that circle) and then type `powershell`, click `Run as Administrator`
- 
- If the version number appears after entering these two commands, `npm -v` and `node -v`, it means the installation is successful!
- 
- In my case, I am using node.js `v12.16.3` and the version number is based on the installer you downloaded.
:::
- **vs code**
:::info
Please download the latest version from the official website.
:::
:::spoiler
1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
:::
## Project Environment Configuration
### 1. Download source code
- [backend](https://github.com/zxjte9411/109-2-database-project-backend-example/archive/refs/heads/main.zip)
- [frontend](https://github.com/zxjte9411/109-2-database-project-frontend-example/archive/refs/heads/master.zip)
- after downloading these source codes, save them anywhere on your computer(ex: desktop). Then unzip them, you will get:
### 2. Deploy the backend
:::info
If you want to use your own DBMS (here we use mysql workbench as a demonstration), just do steps 1 to 7, and start only `Apache` in step 7.
and then see [DBMS config](#DBMS-config)
:::
1. **move code to the htdocs**
:::spoiler
1. open `XAMPP Control Panel` as administrator
2. click Explorer
3. find the `htdocs` folder and enter (the default path is in: `C:\xampp`)
4. delete them or move them to the location you want (p.s these files are not important)
5. copy the backend source code to the htdocs folder.
you will copy：
- db_sql_script
- img
- php
- README.md (optional)
6. check the backend file structure, and detail [see here](#Backend-file-structure)
:::
2. **start server and import DB tables and init data**
:::spoiler
1. return to the `XAMPP Control Panel`, and start the `Apache` and `MySql`
2. allow
3. open the database management interface:
4. you can change the language from here
5. import database
6. 
7. 
8. go to `C:\xampp\htdocs`, and enter the `db_sql_script` folder
9. select the `init_db.sql` file, and Open
10. click `Go` Button
11. import result
:::
### 3. Deploy the frontend
- Vue.js reference:
- [Official documents](https://vuejs.org/v2/guide/)
- [tutorial1](https://www.tutorialspoint.com/vuejs/index.htm)
- [tutorial2](https://bytutorial.com/tutorials/vuejs)
- [官方文件](https://vuejs.bootcss.com/guide/)
- [教學文章1](https://ithelp.ithome.com.tw/articles/10184750)
- [教學文章2](https://medium.com/@rorast.power.game/vue-js%E7%B3%BB%E5%88%97%E4%B8%80-%E5%85%A5%E9%96%80%E7%AF%87-9d131c9f3d39)
1. install the required packages for the front end
:::spoiler
1. use `vs code` open the frontend project
2. open terminal
3. type `npm install -g @vue/cli` in the terminal, then Enter
4. wait for the installation of the vue cli package to complete
5. done
6. and then type `npm install` to install the required package
7. done
:::
2. run the frontend server
::: spoiler
1. type `npm run serve` to start the frontend server
2. running
:::info
if you want to stop the server, just use `ctrl + c` in the terminal
:::
3. use `ctrl` + mouse left button to open the link, or type the url `http://localhost:8080/` in the browser by yourself.
:::danger
don't use the IP url to open it, it will not work
:::
:::
- the backend project is not complete. so please refer to the following chapter(Demo video) to complete it.
## Demo Video
- After you have completed the previous steps, the entire project is not complete. You need to write some SQL code in the corresponding file according to the following demonstration videos:
```
x. user story
- Related code:
- code file [requests API、requests API]
- code file [requests API]
...
```
- [video here](https://drive.google.com/drive/folders/1vUHKMRlWLIIwmnUoUOUo64r-Fhgx18yk?usp=sharing)
1. as a buyer, I want to browse the products so that I can see what I am interested in.
- Related code:
- login.php [getwallet]
- home.php [getproductdata、getproductcategories]
2. as a buyer, I want to buy the products so that I can drink.
- Related code:
- shoppingCart.php [getcoupon]
- purchaseshoppingcart.php [purchaseshoppingcart]
- login.php [updatewallet、getwallet]
3. as a seller, I want to process the order so that I can sell the products and make money
- Related code:
- processorder.php [getorderno、processorder、getsalesamount、updateorder、updateprofit、]
- orderrecord.php [getOrderlist]
- login.php [getprofit]
4. as a seller, I want to manage product inventory so that I can know the inventory status of the product
- Related code:
- myproduct.php [getmyproduct、replenishment]
5. as a seller, I want to manage the product's on and off shelves so that I can manage my produxts
- Related code:
- myproduct.php [getmyproduct、offproduct、launchproduct]
6. as a seller, I want to add new products so that I can diversify my products
- Related code:
- home.php [getproductcategories]
- uploadFile.php
- publish.php [publish]
- myproduct.php [getmyproduct]
- This is an implementation example of user story 1:
- getwallet
- getproductdata
- getproductcategories
## Other
### Default Account
- buyer
- account: buyer@example.com
- password: buyer
- seller
- account: seller@example.com
- password: seller
### DBMS config
1. go to here: `C:\xampp\htdocs`
2. open with `Code` (*right-click on the blank space*)
3. open `php/database.php`, and modify the `$username` and `$password` to your DB **account** and **password**
4. import the `init_db.sql` to your DBMS. For example, use MySql Workbanch:
### Backend file structure
```
htdocs
├── db_sql_script
│ └── init_db.sql // creat table、insert date ...
├── img // folder where pictures are stored
│ └── *.jpg
├── php // backend cdoe
│ ├── database.php // connect to DBMS
│ ├── headers.php
│ ├── myproduct.php // manage product
│ ├── processorder.php // manage order
│ ├── shoppingCart.php // process the "purchase" operation, and the shopping cart's state is stored in frontend, so don't care "shopping cart"
│ ├── home.php
│ ├── login.php
│ ├── orderrecord.php // manage order record
│ ├── publish.php // add new product
│ └── uploadFile.php // upload product's image
└── README.md
```
### Frontend file structure
```
109-2-database-project-frontend-example
├── node_modules
│ └── packages...
├── public
│ ├── index.html
│ └── favicon.ico
├── src
│ ├── assets
│ │ └── logo.png
│ ├── config
│ │ └── config.js
│ ├── store
│ │ ├── modules
│ │ │ ├── login.js
│ │ │ ├── products.js
│ │ │ ├── shoppingCart.js
│ │ │ └── walletProfit.js
│ │ └── index.js
│ ├── api
│ │ ├── home.js
│ │ ├── myproduct.js
│ │ ├── processorder.js
│ │ ├── walletOrProfit.js
│ │ ├── login.js
│ │ ├── order.js
│ │ └── shoopingCart.js
│ ├── components
│ │ ├── CartItems.vue
│ │ ├── Coupon.vue
│ │ ├── Loading.vue
│ │ ├── Navbar.vue
│ │ └── Replenishment.vue
│ ├── img
│ │ ├──coupon.jpg
│ │ └── logo.png
│ ├── router
│ │ └── index.js
│ ├── views
│ │ ├── Deposit.vue
│ │ ├── Login.vue
│ │ ├── NewProduct.vue
│ │ ├── ProcessOrder.vue
│ │ ├── Home.vue
│ │ ├── MyProduct.vue
│ │ ├── OrderRecord.vue
│ │ └── ShoppingCart.vue
│ ├── App.vue
│ └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── package-lock.json
└── README.md
```
```
team02
├── code
│ ├── frontend.zip
│ ├── backend.zip
(如果沒有前後端分離，那就只需壓縮為 {任意名稱}.zip)
│ └── README.md (簡單描述部屬步驟)
├── final_report.pdf
└── final.pptx
```
Sign in with Wallet
Connect another wallet