Differences
This shows you the differences between two versions of the page.
|
ii:assignments:s2:shopping-cart-2025 [2025/04/10 15:08] florin.stancu |
ii:assignments:s2:shopping-cart-2025 [2026/05/26 17:38] (current) florin.stancu |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| **Deadline**: | **Deadline**: | ||
| - | * **//19.05.2025// <color red>Deadline</color>** 😥! | + | * **//26.05.2025// <color red>Deadline (soft)</color>** ! |
| + | * **//28.05.2025// ** <color red>Deadline (hard), 10% per zi (x 2)</color> ! | ||
| **Changelog:** | **Changelog:** | ||
| - | * **//10.04.2025//**: assignment published! | + | * **//07.05.2025//**: assignment published (: |
| ===== Introduction ===== | ===== Introduction ===== | ||
| Line 40: | Line 41: | ||
| ==== Web frontend design (HTML/CSS) ==== | ==== Web frontend design (HTML/CSS) ==== | ||
| - | The design (aspect) of the web pages does not really matter as long as it meets the functionality requirements described in this document (just don't make it too ugly). | + | The design (aspect) of the web pages does not really matter as long as it meets the functionality requirements described in this document (just don't make it too ugly, plus you get are bonuses if it's very unique/nice). |
| As a minimum, you must display photo thumbnails for each product listed on the front page. | As a minimum, you must display photo thumbnails for each product listed on the front page. | ||
| Line 70: | Line 71: | ||
| Each of the products must have a "Add to cart" button/icon beside it to add the item to cart (see the next section for specifics). | Each of the products must have a "Add to cart" button/icon beside it to add the item to cart (see the next section for specifics). | ||
| - | //Bonus ideas:// filtering / ordering the products, multiple categories, database storage (SQL/NoSQL). | + | //Bonus ideas:// beautiful/unique styles / filtering / ordering the products, multiple categories, database storage (SQL/NoSQL). |
| ==== Shopping Cart ==== | ==== Shopping Cart ==== | ||
| Line 87: | Line 88: | ||
| ==== Checkout page ==== | ==== Checkout page ==== | ||
| - | As a final step before ordering, you will implement a page with a form where the user will see the products to be ordered and the totals and fill with the user's contact info. | + | As a final step before ordering, you will implement a page with a form where the user will see the products to be ordered and the totals and fill with the user's contact info. Please don't forget the //submit// button! |
| The checkout form MUST be reachable using GET (i.e., the usual browser navigation) at the ''/checkout'' URL. | The checkout form MUST be reachable using GET (i.e., the usual browser navigation) at the ''/checkout'' URL. | ||
| Line 103: | Line 104: | ||
| Note: data validation is optional, but nice to have nevertheless ;) | Note: data validation is optional, but nice to have nevertheless ;) | ||
| - | On submission, at minimum, you should print all of the data in any human readable format (i.e., NOT binary!) on the Flask console, which should also help you with debugging. | + | On checkout form submission, at minimum, you should print all of the data in any human readable format (i.e., NOT binary!) on the Flask console, which should also help you with debugging. |
| For a more realistic implementation and obtaining full points for this task, we require you to also save the order on the server, either by creating small text-based files in a directory (e.g., ''./submitted-data/<date>.txt''), use a structured format (e.g. ''json / yaml'') or, for an extensive bonus, insert them into a database. | For a more realistic implementation and obtaining full points for this task, we require you to also save the order on the server, either by creating small text-based files in a directory (e.g., ''./submitted-data/<date>.txt''), use a structured format (e.g. ''json / yaml'') or, for an extensive bonus, insert them into a database. | ||
| Line 114: | Line 115: | ||
| **Obligatory / common sense:** use Flask's standard port of ''5000'' when serving from any of your scripts. PLEASE DO NOT CHANGE IT, otherwise we will have to manually edit the ''http://localhost:<port>'' URL for each non-conforming solution and will be greatly penalized! | **Obligatory / common sense:** use Flask's standard port of ''5000'' when serving from any of your scripts. PLEASE DO NOT CHANGE IT, otherwise we will have to manually edit the ''http://localhost:<port>'' URL for each non-conforming solution and will be greatly penalized! | ||
| - | Lastly, in order for your web application to be easily shared (with us :P), you should add a proper Dockerfile that can be used to readily build + run it. | + | In order for your web application to be easily shared (with us :P), you should add a proper Dockerfile that can be used to readily build + run it. |
| You may start from any base image, although we recommend [[https://hub.docker.com/_/python|''python:<version>-alpine'']] due to its low disk footprint. | You may start from any base image, although we recommend [[https://hub.docker.com/_/python|''python:<version>-alpine'']] due to its low disk footprint. | ||
| Thus, a containerized solution must work using the following steps: | Thus, a containerized solution must work using the following steps: | ||
| - | * the ''docker build -t iap1-tema .'' command should run successfully; | + | * the ''docker build -t iap1-tema ./'' command should run successfully; |
| * ''docker run -p 5000:5000 -it iap1-tema'' should start the Flask server and make it accessible on ''http://localhost:5000''. | * ''docker run -p 5000:5000 -it iap1-tema'' should start the Flask server and make it accessible on ''http://localhost:5000''. | ||
| - | <note>Â | + | <note important>Â |
| - | Please follow the archiving conventions and have everything (especially the ''Dockerfile'') inside its root directory! | + | If you do not wish to implement containerization but wish to avoid further penalizations regarding the testability of your website, you **must** name the Flask entrypoint as ''server.py'' and make it runnable using ''python3 server.py'' (a proper virtual environment with the declared ''requirements.txt'' will be automatically setup by our scripts beforehand). |
| </note> | </note> | ||
| Line 132: | Line 133: | ||
| * **[20p] Flask server & basic design**: the basic Flask server routing + server-side template for a online shopping website; this includes having at least two pages sharing the same base template! | * **[20p] Flask server & basic design**: the basic Flask server routing + server-side template for a online shopping website; this includes having at least two pages sharing the same base template! | ||
| - | * **[20p] Front page** showcasing your products with (mock/sample) images (dynamically rendered using the template engine from structured data, as requested)! | + | * **[25p] Front page** showcasing your products with (mock/sample) images (dynamically rendered using the template engine from structured data, as requested)! |
| * **[20p] Shopping Cart** for a working Add to Cart feature for the front page, displaying the current cart's items count inside your global menu & building the cart's dedicated page; | * **[20p] Shopping Cart** for a working Add to Cart feature for the front page, displaying the current cart's items count inside your global menu & building the cart's dedicated page; | ||
| - | * **[20p] Checkout page** with a functional form & submission data console printing and persiente storage (optional);Â | + | * **[20p] Checkout page** with a functional form & submission data console printing and saving them to persistent storage;Â |
| - | * **[20p] Docker container:** must respect all backend conventions + must supply a working Dockerfile for quickly setting up your website during the grading process; | + | * **[15p] Docker container:** must respect all backend testing conventions & supply a working Dockerfile for quickly setting up your website during the grading process; |
| * **[up to 20% of the assignment's points] Bonuses!** Almost everything extra counts, so don't be shy (make sure to also mention them inside your Readme). | * **[up to 20% of the assignment's points] Bonuses!** Almost everything extra counts, so don't be shy (make sure to also mention them inside your Readme). | ||
| Line 141: | Line 142: | ||
| The project's source code (i.e., no binary / generated files need to be included) must be archived (''.zip'', please) and make sure the scripts (incl. Dockerfile) are placed directly in the root folder (i.e. depth=0) of the archive! Otherwise, the grading process will be encumbered => penalizations++ :( | The project's source code (i.e., no binary / generated files need to be included) must be archived (''.zip'', please) and make sure the scripts (incl. Dockerfile) are placed directly in the root folder (i.e. depth=0) of the archive! Otherwise, the grading process will be encumbered => penalizations++ :( | ||
| + | |||
| + | <note> | ||
| + | Please follow the archiving conventions and have everything (especially the ''Dockerfile'') inside its root directory! | ||
| + | </note> | ||
| <note important> | <note important> | ||
| Line 149: | Line 154: | ||
| ===== Resources ===== | ===== Resources ===== | ||
| - | |||
| - | **TODO: //some automation scripts / conventions checker will be posted here in a couple of days! Please stand by :D //** | ||
| * [[https://getbootstrap.com/docs/5.3/getting-started/introduction/|Bootstrap]] CSS framework, as per recommendations. | * [[https://getbootstrap.com/docs/5.3/getting-started/introduction/|Bootstrap]] CSS framework, as per recommendations. | ||
| Line 158: | Line 161: | ||
| ===== FAQ ===== | ===== FAQ ===== | ||
| + | |||
| + | **Q: Can I use LLMs to generate code?** \\ | ||
| + | A: Generally yes, for reference / individual snippets only: must be understood by you and manually integrated (no fullly automated coding agent usage); be warned that **you will be heavily penalized** if we deem your resulting code to be too similar (note: outright plagiarism will give you 0 overall score for this assignment) or using a too advanced style (for someone with introductory-level skills, e.g. highly functional code, advanced structure comprehensions etc.). | ||
| **Q: Can I write the tool in something other than Python?** \\ | **Q: Can I write the tool in something other than Python?** \\ | ||
