目录
II. Presentation of My Calculator
III. Design and Implementation Process
V. Personal Journey and Learnings
The Link Your Class | https://bbs.csdn.net/forums/ssynkqtd-04 |
---|---|
The Link of Requirement of This Assignment | https://bbs.csdn.net/topics/617378696 |
Link to the finished project code | kk/ at main · kaleidoscape/kk (github.com) |
The Aim of This Assignment | < Back End Separation Calculator> |
MU STU ID and FZU STU ID | <21125180_832102207> |
I. PSP Table
Personal Software Process Stages | Estimated Time(minutes) | Actual Time(minutes) |
---|---|---|
Planning (Total) | 600 | 700 |
• Estimate and Preparation | 600 | 700 |
Development (Total) | 350 | 400 |
• Analysis | 50 | 50 |
• Design Spec | 10 | 20 |
• Design Review | 10 | 30 |
• Coding Standard | 10 | 10 |
• Design | 20 | 45 |
• Coding | 120 | 200 |
• Code Review | 60 | 70 |
• Test | 70 | 80 |
Reporting (Total) | 70 | 80 |
• Test Report | 0 | 0 |
• Size Measurement | 0 | 0 |
• Postmortem & Process Improvement Plan | 70 | 80 |
Sum | 910 | 1180 |
II. Presentation of My Calculator
III. Design and Implementation Process
A calculator application implemented in JavaScript and PHP, including the functionality of a basic calculator and a scientific calculator, and interacting with a MySQL database to save history. JavaScript is used to send expressions entered by the user to the server side, which evaluates the result using the eval() function and stores the expression and result in a MySQL database.
The front end interface includes a history list that is automatically updated after each calculation to display the last 10 calculation histories.
IV. Code Explanation
The front-end code is written using HTML, CSS, and JavaScript. It includes a text box for the user to input expressions, as well as buttons for entering numbers, operators, and executing calculations. There is also an area to display the result and a list to display the history of calculations.
- The
appendToExpression(value)
function is used to add values to the expression text box. - The
clearExpression()
function is used to clear the content of the expression text box. - The
calculate()
function sends the expression to the server for calculation and displays the result in the result area. It also calls thestoreInDatabase()
function to store the expression and result in the database and theupdateHistoryList()
function to update the history record list. - The
storeInDatabase(expression, result)
function stores the expression and result in a MySQL database. It uses an XMLHttpRequest object to send the data to a back-end processing script namedstore.php
. - The
updateHistoryList()
function gets the most recent calculation history and updates the history record list. It uses an XMLHttpRequest object to get history data from a back-end processing script namedhistory.php
and renders it in an HTML list.
The back-end code is written using PHP, and it performs calculation and storage operations by interacting with a MySQL database.
- The
calculate.php
script receives the expression from the front-end and calculates the result using theeval()
function. It then returns the result in JSON format to the front-end. - The
store.php
script receives the expression and result from the front-end and stores them in a data table named "history." - The
history.php
script retrieves the most recent 10 history records from the database and returns them in JSON format to the front-end.
The overall workflow is that the user inputs an expression in the front-end interface, then clicks the calculate button. The front-end uses an XMLHttpRequest object to send the expression to the server for calculation and display the result on the interface. At the same time, the front-end also sends the expression and result to the server for storage in the database. Finally, the front-end uses another XMLHttpRequest object to get the history record and update the history record list.
V. Personal Journey and Learnings
I learned how to link back and forth code and how to use the database, and use the XMLHttpRequest object to send expressions to the server for evaluation and display the results on the interface. At the same time, the front end also sends the expressions and results to the server for storage in the database.