1. 你想我做? (做完比番你 / $) 2. 你想我做完話你知點做? (花時間 / $$) 3. 你想我經你隻手做? (花花花時間 / $$$) 有冇咩取向?? 我唔係想同你打心理戰，但係我想知一知呢樣野先 10 個識等如全部識晒，咁你會比幾多個識比你自己? 我諗我會報 HKD 400 / phase 你用 mac ? 留一個聯絡方式? ttps://t.me/louislabs/ 留一留個 ec2 個登入方法? thanks Q: 我俾 pem key 同 elastic ip 你？ A: 可以呀，你經果頁 upload 比我 OK ? 揸定主意，用 nextjs 啦嘛 © 2024, Made with ❤️ by ThemeSelection 會唔會可以再簡單小小？例如唔洗右上嗰啲function? ### references https://themeselection.com/item/materio-free-mui-nextjs-admin-template/ --- 51.21.113.230 --- ## Phase 2 ### ASSIGNMENT MARKING CHECKLIST V1 #### PHASE 2A: SECURE SERVER SETUP (DEADLINE FEB.17, 2024) (SUBTOTAL: 5') In this phase, you are required to set up a secure server for later development. Some guidance will be given in the tutorial. 1. Instantiate a free Virtual Cloud Machine (Amazon EC2 recommended or other free VPS) **\_** / 1' - [ ] Details of the Free Usage Tier: http://aws.amazon.com/free - [ ] You can apply for the education coupon on AWS - [ ] With a Linux distribution, install only Ngnix, NodeJS and SQLite (or MySQL) - [ ] To minimize the attack surfaces, always install only what you need 1. Apply necessary security configurations **\_** / 2' - [ ] Apply proper firewall settings to your VM: block all ports except 22, 80 and 443 only - [ ] Apply proper updates for the server software packages in a regular manner - [ ] Hide the versions of OS, Ngnix, and NodeJS in HTTP response headers 1. Configure the VM so that your website is accessible at http://sxx.ierg4210.ie.cuhk.edu.hk **\_** / 2' - [ ] Apply for an elastic public IP, and ALWAYS associate it with the instantiated VM - [ ] Submit your elastic IP through the provided Google Form link1 before 5pm, Feb 17, 2024 - [ ] TAs will then assign you a domain name and configure the DNS mapping for you - [ ] Upload all your pages to the server. They should then be accessible through: - [ ] http://[your-own-public-IP], or - [ ] http://sxx.ierg4210.ie.cuhk.edu.hk #### PHASE 2B: DATA PRESENTATION & MANAGEMENT (DEADLINE FEB. 25, 2024) (SUBTOTAL: 20') In this phase, you will implement the core functions of the website mainly with NodeJS and SQL. 1. SQL: Create a database with the following structures (to be covered in the tutorial) **\_** / 1' - [x] A table for `categories` - [x] Required columns: -[ ] [x] `cid` (primary key), -[ ] [x] `name` - [x] Data: at least 3 `categories` of your choice - [x] A table for `products` - [x] Required columns: -[ ] [x] `pid (primary key)`, -[ ] [x] `cid`, -[ ] [x] `name`, -[ ] [x] `price`, -[ ] [x] `description` - [x] Data: at least 3 products for each category 1. HTML, NodeJS & SQL: Create an `admin panel` - [x] Design several HTML forms to manage(you can `insert`, `update` and `delete` information, `CRUD`) products in DB **\_** / 5' -[ ] [x] `insert` -[ ] [x] `update` -[ ] [x] `delete` -[ ] [x] Dropdown menu to select `cid` according to its name -[ ] [x] Input fields for inputting -[ ] [x] `name`, -[ ] [x] `price` -[ ] [x] Textarea for inputting `description` - [x] Design several HTML forms to manage `categories` in DB **\_** / 2' -[ ] [x] `insert` -[ ] [x] `update` -[ ] [x] `delete` 2. HTML, NodeJS, SQL: Update the ***main page*** created in Phase 1 - [x] Populate the `category` list from DB **\_** / 1' - [x] Based on the `category` selected by the user, populate the corresponding product list from DB **\_** / 3' -[ ] [x] The `cid=[x]` is reflected as a query string in the URL -[ ] [x] 你想用邊種? 新做法我可以留番個註解比你 -> 新 3. HTML, NodeJS & SQL: Update the `product details` page created in Phase 1 **\_** / 2' - [x] Display the details of a product based on its DB record - [?] Display the inventory of a product based on its DB record 4. Support of automatic image resizing for product images **\_** / 3' 5. Supporting HTML5 Drag-and-drop file selection in the admin panel **\_** / 2' - [x] limit to upload jpg file - [x] File field for uploading an image (format: jpg/gif/png, size: <=5MB) - [/] For the file uploaded, store it with its name. **\_** / 1' -[ ] default to `my_path/image.jpg` - [?] When a large image is uploaded, the server will resize it and show a thumbnail image in the panel - [x] On the main page, display thumbnails. On the product description page, display the larger image - [?] Create a dropping area that takes an image - [?] Display a thumbnail (i.e. smaller width and height) if the dropped file is an image; reject it otherwise ### !!!CSRF --- ## PHASE 3 ### AJAX SHOPPING LIST (DEADLINE: MAR 10, 2024) (SUBTOTAL: 13') In this phase, you will implement the shopping list, which allows users to shop around your products. This phase is designed to let you practise Javascript programming. 1. JS: Dynamically update# the `shopping list` - [x] When the `addToCart` button of a product is clicked, add it to the shopping list **\_** / 1' -[ ] [x] Adding the same product twice will display only one row of record - Once a product is added, -[ ] Users are allowed to -[ ] [x] update its `quantity` and -[ ] [x] delete it with a number input, or -[ ] [x] two buttons for increment and decrement -[ ] [x] Store its -[ ] [x] `pid` and -[ ] [x] `quantity` in the browser's `localStorage` **\_** / 2' -[ ] [x] Get the -[ ] [x] `name` and -[ ] [x] `price` from the server (with `pid` as input) **\_** / 3' -[ ] [x] Calculate and display the `total amount` at the client-side **\_** / 1' - [x] Once the page is reloaded, the shopping list is restored **\_** / 2' -[ ] Page reloads when -[ ] [x] users browse another category or -[ ] [x] visit the product detail page -[ ] [x] Populate and retrieve the stored products from the `localStorage` - [?] Supporting infinite scroll when browsing products in the main page **\_** / 3' #The whole process of shopping list management must be done without a page load --- - aws setup swap file - https://repost.aws/knowledge-center/ec2-memory-swap-file --- ## phase 5 ### Paypal Sandbox Accounts 1. Sign up at https://developer.paypal.com/dashboard/ : ______ / 1' a. Create two sandbox accounts – a merchant account and a buyer account: i. A merchant account – Email and Password sb-j4nbw29912003@business.example.com XIE b. Create a sandbox application linked to the merchant account: i. an application – Client ID https://developer.paypal.com/dashboard/accounts/edit/4829534511909691981?accountName=sb-j4nbw29912003@business.example.com helloworld Client ID AQT5-eAKNK7IhAhBGlbHBu_9jBx74ZLCfEioKUWQMXMuMmLcnffmpoUz_z-ewOuKZmpSlDk74UtlH58O Secret key 1 EMtwOzHACol7Tx8NHOa3eV3TPu2AerZEunJ3MBZfYYcxPeUDy-TNLqqcdL0UDQsrHMpQKeCRPcjKnwNy #### Paypal Integration - Front End Ref: - https://developer.paypal.com/community/blog/how-to-add-paypal-checkout-payments-to-your-react-app/ 2. Create a checkout button via PayPal standard checkout APIs: ______ / 1' a [x] Include the PayPal JavaScript SDK b [x] Set up a container element for the button c [x] Render the button by paypal.Buttons().render() 3. [x] When the checkout button is clicked, `createOrder()` is called: ______ / 3' a [x] every individual product (or any other data) to server. -[x] `name` -[x] `quantity` b [x] It waits for server to generate a JSON string named `orderDetails`. -[ ] refer backend `6.` c [x] It submits the order now to PayPal using the actions.order.create() function. 4 [x] After the buyer has completed the payment, `onApprove()` is called: ______ / 2' a [x] It passes the `orderDetails` to server. b [x] It clears the shopping cart. 5 [x] If the buyer cancels the payments, `onCancel()` is called: ______ / 1' a [x] It passes necessary information to server. #### Paypal Integration - Back End 6. Server follows the following steps to generate the `orderDetails`: ______ / 5' a. server generates a digest that is the hash from a string composed of at least: -[x] of each selected product -[x] `name` -[x] `quantity` -[x] The `price` of each selected product gathered from DB, -[x] The `total price` of all selected products, -[x] `Currency code`, -[x] Merchant’s `email address`, and -[x] A `random salt` b.[x] server puts the generated digest in the `custom_id` of an order. c.[x] server generates an `UUID`, and puts it in the `invoice_id` of an order. d.[x] server generates other necessary fields of an order, including at least: -[x] `amount` - the `total price` and `currency code` -[x] `items` - the `name`, `quantity`, `price` of each selected item 7. Server follows the following steps to insert and update the DB orders table: ______ / 3' a. When `createOrder()` is called, it inserts a new entry: -[x] `UUID` - TEXT (Primary Key) - [x] custom_id - [x] invoice_id -[x] `username` - TEXT `customer's username` -[x] `digest` - TEXT, `custom_id` -[x] `salt` - TEXT b. [x] When `onApprove()` is called, it updates the corresponding entry: -[] `orderDetails` - TEXT c. [x] When `onCancel()` is called, it deletes the corresponding entry. #### Miscellaneous Changes 8. [x] Display the DB orders table in the admin panel: product list, payment status…etc. ______ / 2' 9. [x] Let members check the most recent five orders in the member portal . ______ / 2' ### signal flow #### Notes version: ```mermaid sequenceDiagram actor Client Note left of Client: checkout button is clicked Note left of Client: `createOrder() is called Client->>Server: fetch("/my-server/get-order-details"... Note over Server: generate `orderDetails` Server->>Client: return json `orderDetails` Note over Client: purchase_units: [amount, itesm, custom_id, invoice_id] Paypal-->>Client: send payment page Note over Client: Client proceed payment Client-->>Paypal: client approve payment Note over Client: When `onApprove()` is called Client->>Server: fetch("/my-server/save-order"... Note over Server: it `update` the corresponding entry Note over Client: When `onCancel()` is called Client->>Server: fetch("/my-server/cancel-order"... Note over Server: it `deletes` the corresponding entry ``` #### My version: ```mermaid sequenceDiagram actor Client Note left of Client: checkout button is clicked Note left of Client: createOrder() is called Client->>Server: fetch("/my-server/get-order-details"... Note over Server: generate `orderDetails` Server->>Client: return json `orderDetails` Note over Client: purchase_units: [amount, itesm, custom_id, invoice_id] Paypal-->>Client: send payment page Note over Client: Client proceed payment Client-->>Paypal: client approve payment Paypal->>Server: event_type: CHECKOUT.ORDER.APPROVED Note left of Paypal: with (resources.id + resources.status) Note over Client: When `onApprove()` is called Client->>Server: fetch("/my-server/save-order"... Note right of Client: with resources.id Note over Server: receive 2 id, found match and stastus "approved" Note over Server: it `update` the corresponding entry Note over Client: When `onCancel()` is called Client->>Server: fetch("/my-server/cancel-order"... Note over Server: it `deletes` the corresponding entry ```