2
\$\begingroup\$

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.

  1. Have I made an example of MVC design?
  2. Would the PHP that calls SQL routines be the model, the display PHP file the View, and the JavaScript functions the Controller?
  3. Is this an example of RESTful design?
  4. I use the GET parameter in the AJAX call and access the $_GET array 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?
\$\endgroup\$
1
\$\begingroup\$

First lets define MVC design and break apart your question:

M: Model (datastructure or business logic)

V: View (the display of your information)

C: Controller (the one that connects the M to the V)

  1. Have I made an example of MVC design?

    I'm sorry but negative (unless someone wants to point in and say its right). Your not using any OOP design to achieve the MVC. Rather your components aren't standalone. Example: step1.php has both ECHO (which is a display) and some DB logic to it. Your create_order.php could be a model where you do a DB entry however your not giving it back. Furthermore your DIV includes a PHP file.

  2. Would the PHP that calls SQL routines be the model, the display PHP file the View, and the JavaScript functions the Controller?

    Somewhat a bit ok on the logic despite the mess. However let's clarify something:

    1. Ideally if the JavaScript injected the response code into index.php's DIV it would have been a controller. Think the controller as "can you deal with the logic for me and when you're done, give it back".
    2. Your model logic is ok to assume as DB connection and manipulation is old school but its a good stepping stone. However, a MODEL itself is anything that deals with heavy manipulation of logic and data. He is the guy that does something.
    3. The view is the PHP, HTML, or could be JavaScript again that once get the data gives it in a nice bow-tie.
  3. Is this an example of RESTful design?

    REST-ful means API call if you want an analogy. You are using forms to put data in.

  4. I use the GET parameter in the AJAX call and access the $_GET array 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?

    Read #3 for the answer.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.