tags: database database system

Example Project Environment deployment

Pre-step

Download the required software

• Please download and install the following software first:

• Node.js (Choose the one with LTS) for frontend

• XAMPP (version 7.2.27) for backend

• vs code (Optional) for coding

Install

(If you have already installed them, you can skip this step.)

XAMPP

---

Node.js

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

Please download the latest version from the official website.

---

Project Environment Configuration

1. Deploy the backend

move code to the htdocs

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

start server and import DB tables and init data

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

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

---

2. Deploy the frontend

Vue.js reference:

• Official documents

• tutorial1

• tutorial2

• 官方文件

• 教學文章1

• 教學文章2

install the required packages for the front end

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

run the frontend server

1. type npm run serve to start the frontend server

2. running

3. use ctrl + mouse left button to open the link, or type the url http://localhost:8080/ in the browser by yourself.

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:

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]

Scenario 1 video

---

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]

Scenario 2 video

---

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]

Scenario 3 video

---

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]

Scenario 4 video

---

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]

Scenario 5 video

---

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]

Scenario 6 video

---

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