I've built a web site that uses AJAX to update a div. Most of the data displayed in the div is drawn from a MySQL database. All the pages are PHP.
I've tried to follow best practices. I put all the query strings into stored procedures in the database. The PHP files call the stored procedures with parameters that JavaScript functions pass via AJAX. Does this meet best practices? Is it RESTful?
Is someone said, "Write me an example that uses PHP, JavaScript, and MySQL to build a web app that integrates MVC and REST design principles", would this example suffice?
Here's some source code. First, index.php
<html>
<head>
<script language="JavaScript" type="text/javascript">
//Update innerHTML of middle div
function update(target){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var middleDisplay = document.getElementById('middle');
middleDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", target, true);
ajaxRequest.send(null);
}
</script>
<script language="javascript" type="text/javascript">
//Call a PHP file which creates a new order.
function neworder(id){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
var url = "create_order.php?id="+id;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
update('step1.php');
}
</script>
</head>
<body>
<div id=”header”>Welcome message, menu bar, etc.</div>
<div id=”middleDisplay”><?php include “step1.php” ?></div>
</body>
</html>
Here's the contents of "step1.php":
<?php
include “../util.php”; //Includes the Session_Start() command and SQL connect strings.
$order = mysqli_query($connect,”CALL open_orders()”);
$order_table = “<table>”;
while($row = mysqli_fetch_array($query)){
$order_table .= “<tr><td>’.$row[‘date’].’</td><td>’.$row[‘name’].’</td></tr>
}
$order_table .=”</table>”;
echo’
<form name=”myForm”>
<label>Enter id for a new order</label>
<input type=”text” name=”id_input”><input>
<button onclick=”neworder(document.GetElementById(myForm.id_input).value)”>Click here to make a new order</button>
</form><br/>
‘;
echo $order_table;
?>
Here's the contents of create_order.php:
<?php
include “../util.php”;
$id = $_GET[‘id’]’
//code to prevent SQL injection.
$query=mysqli_query($connect, “CALL new_order($id)”);
?>
Finally, here are the two procedures in MySQL:
CREATE PROCEDURE AS open_orders()
BEGIN
SELECT date, name FROM order WHERE status <> 0;
END
CREATE PROCEDURE AS new_order(user_id TINYINT)
BEGIN
INSERT INTO order (id) VALUES user_id
END
index.php has a header div and a middleDisplay div. The header div has a welcome message and a navigation menu. It should never change. The JavaScript function update uses AJAX to change the InnerHTML of the middle div, where all navigation will take place.
The middle div is pre-populated by stage1.php. Stage1.php executes a SQL query to get open orders. It places the results in a table. It also has a form for creating new orders.
Here’s where I’m unsure of myself: I can’t set the form to POST to another PHP file. That would change the URL. I want the URL to stay the same so I can keep the header div and update only the middleDisplay div. Instead, I call a JavaScript function, neworder.
neworder does two things. First, it sends an AJAX request to create_order.php?id=foo. Then, it calls the update function, which uses AJAX to update the middle div.
There are many other JavaScript functions in index.php, and many other PHP files that populate middle div. But these files represent the concept:
- One PHP file that builds the structure with divs.
- Multiple PHP files that display data in the middle div.
- Multiple PHP files that call SQL routines. Sometimes these SQL routines return data, which the PHP files set as session variables. Sometimes (as in the above example), they don’t return anything at all.
- Multiple JavaScript functions (all located in index.php) that take data from the "display" PHP files and pass data to the "SQL routine" PHP files.
- Have I made an example of MVC design?
- Would the PHP that calls SQL routines be the model, the display PHP file the View, and the JavaScript functions the Controller?
- Is this an example of RESTful design?
- I use the GET parameter in the AJAX call and access the
$_GETarray in the PHP files. But the function doesn't expect to GET any data. It just wants the PHP file to call a routine on the database. Is that a violation of RESTful design?
