MVC (model view controller) pattern is a popular pattern that makes easier to deal with programs that have databases. Although it is widely used in PHP, Java, and other modern programming languages, it is hard to find a simple explanation with simple example source code. So the purpose of this post is to explain MVC pattern with simple source code.
The view is responsible to display data in a specific format, usually in user interface. View accepts data from the model and display the data somewhere and somehow (to the user). We can consider the view as a receptionist who shows and explain data to guests.
The model is responsible to manage data (usually to save data or retrieve necessary data from a database). It stores data in a database and retrieves data from a database. We can consider the model as a warehouse specialist who deals with every data of a database.
The controller is responsible to handle view and model layers to work together. The controller receives a request from a client and invokes the model to fetch requested data and sends the data to the view. We can consider the controller as a supervisor of the view and the model.
Saturday, April 15, 2017
Wednesday, April 5, 2017
Dynamically add table-elements to a table
This is html to dynamically add table-elements to a table.
Below is a link and a button to add table-elements to an existing table.
Click to append
<head>
<script type='text/javascript'>
function appendScheduleBikou() {
if (!document.createElement) return;
var tr_e = document.createElement("tr");
var td_e1 = document.createElement("td");
var text = document.createTextNode("Name");
td_e1.appendChild(text);
tr_e.appendChild(td_e1);
var td_e2 = document.createElement("td");
tr_e.appendChild(td_e2);
var input_e = document.createElement("input");
input_e.setAttribute("type", "input");
input_e.setAttribute("value", "John");
td_e2.appendChild(input_e);
document.getElementById("generate-here").appendChild(tr_e);
}
</script>
</head>
<body>
<a href='javascript:appendScheduleBikou();'>click</a>
<table >
<tbody id="generate-here">
<tr><td>Name</td><td><input value="Jack"></td>
</tbody>
</table>
</body>
Below is a link and a button to add table-elements to an existing table.
Click to append
| Name |
<head>
<script type='text/javascript'>
function appendScheduleBikou() {
if (!document.createElement) return;
var tr_e = document.createElement("tr");
var td_e1 = document.createElement("td");
var text = document.createTextNode("Name");
td_e1.appendChild(text);
tr_e.appendChild(td_e1);
var td_e2 = document.createElement("td");
tr_e.appendChild(td_e2);
var input_e = document.createElement("input");
input_e.setAttribute("type", "input");
input_e.setAttribute("value", "John");
td_e2.appendChild(input_e);
document.getElementById("generate-here").appendChild(tr_e);
}
</script>
</head>
<body>
<a href='javascript:appendScheduleBikou();'>click</a>
<table >
<tbody id="generate-here">
<tr><td>Name</td><td><input value="Jack"></td>
</tbody>
</table>
</body>
Saturday, April 1, 2017
Start Python programming: explanation for the first program
We saw how server-side scripting using Python is done, but I think you didn't understand details of the code of Python.
The code was like this:
print("<h1>Welcome to my website</h1>")
amount = 100.0
if amount < 100:
discount = amount * 0.05
elif amount < 500:
discount = amount * 0.10
else:
discount = amount * 0.15
print ("<p>Your amount: ",amount,"</p>")
print ("<p>Discount: ",discount, "</p>")
print ("<p>Net payable: ",amount-discount,"</p>")
print("") is, as explained in the last post, used to display something written in-between these --> " ". So print("<h1>Welcome to my website</h1>") works just to display "<h1>Welcome to my website</h1>" in the browser.
"amount = 100.0" is initialization of a variable. "amount" is a variable defined to store a value, which is intended to be used to store how much amount of money is used. But, before being initialized, variables store initial value like "null", which is called undefined value (that can be considered as a garbage...it can't be used productively). So the "amount" value is initialized with the value "100" in the code, namely, "amount = 100.0". Now the "amount" variable doesn't have an undefined value (garbage) inside...it has "100" inside the variable.
A variable is like a small box. This box can have only one thing (a value) inside but the thing inside always can be exchanged to another thing (another value).
But there are some types of variables in Python like "Integer", "String" and so on. But you don't need to explicitly write what the type of the variable is in Python.
For example, in Java, you need to explicitly write what the type is for all variables like:
int age = 10;
"int" is indicating the "age" variable is an integer-type-variable.
But in Python, you can write this way:
age = 10;
"int" doesn't need to be written because Python itself will automatically check what the variable type is,
which means "variable type doesn't need to be written explicitly".
The next is if-statement.
if amount < 100:
discount = amount * 0.05
elif amount < 500:
discount = amount * 0.10
else:
discount = amount * 0.15
The statement says "if amount < 100:", which means "if amount variable is smaller than 100, the following will be executed." And "the following" is "discount = amount * 0.05" according to the statement.
if amount < 100:
discount = amount * 0.05
"discount = amount * 0.05" means "Caculate amount * 0.05 at first and then assign the result value to the discount variable". So the discount variable would have a value that is the payment amount discounted with 0.05 (5%).
elif amount < 500:
discount = amount * 0.10
"elif" in the if-statement means "else if". This "elif"-part is executed only if the first condition (if amount < 100:) is not satisfied AND if the amount variable is smaller than 500. So if amount is 99, the discount rate is 0.05 (5%) because it satisfies the first condition. But if the amount is more than 100 but less than 500, the discount rate is 0.10 (10%).
else:
discount = amount * 0.15
The code under "else"-condition is executed for every condition that doesn't satisfies "if amount < 100:" and "elif amount < 500:", e.g., amount = 600, amount = 700, or amount = 99999999 (every number that doesn't satisfy other conditions above).
But, for example,
if amount < 100:
discount = amount * 0.05
elif amount < 500:
discount = amount * 0.10
else:
discount = amount * 0.15
elif amount < 600:
discount = amount * 0.10
in this case, "elif amount < 600:" and the following code will be ignored because "elif amount < 600:" is written after "else:"-condition is written. Codes are executed from upside to downside, so there is nothing left to be checked after "else"-condition is checked. (Every number that doesn't satisfy the first and second is treated under else-condition, so nothing is left for the fourth condition "elif amount < 600:".)