1

I'm developing web application using PHP with CodeIgniter MVC framework with a huge real time client-side functionality needs. This is my first time to build large scale of client-side app. So I combine the PHP with a large scale of Javascript modules in one project.

As you already know, MVC framework seperate application modules into Model-View-Controller.

My concern is about View layer.

I could be display the data on the DOM by PHP built-in script tag by load some data on the Controller. Otherwise I could use AJAX to pulled the data -- treat the Controller like a service only -- and display the them by Javascript.

Here is some visualization

I could put the data directly from Controller:

<label>Username</label> <input type="text" id="username" value="<?=$userData['username'];?>"><br />
<label>Date of birth</label> <input type="text" id="dob" value="<?=$userData['dob'];?>"><br />
<label>Address</label> <input type="text" id="address" value="<?=$userData['address'];?>">

Or pull them using AJAX:

$.ajax({
  type: "POST",
  url: config.indexURL + "user",                
  dataType: "json",
  success: function(data) { 
    $('#username').val(data.username);
    $('#dateOfBirth').val(data.dob);
    $('#address').val(data.address);
  }
});

So, which approach is better regarding my application has a complex client-side functionality?

In the other hand, PHP-CI has a default mechanism to put the data directly from Controller, so why using AJAX?

2

If you're going to have a significant amount of logic written client-side, then consider using MV[C]-style "separation of concerns" in your client-side JS code. For example, you might have some JS "view" logic which handles rendering:

<script type="text/javascript">
function renderUser(user) {
  $('#username').val(user.username);
  $('#dateOfBirth').val(user.dob);
  $('#address').val(user.address);
}
</script>

Then define some JS "controller" logic to pass the data into the view. The design of this depends on expected usage of the application -- e.g. if "user" is only rarely displayed, then the JS controller logic might look like:

<script type="text/javascript">
function showUser() {
  $.ajax({
    type: "POST",
    url: config.indexURL + "user",                
    dataType: "json",
    success: function(data) {
      renderUser(data);
    }
  });
}
</script>

On the other hand, if the user is displayed on every page-request, then it's non-performant to fetch the user via AJAX -- better to include the user data as part of the initial page request. You can still use the same rendering function:

<script type="text/javascript">
renderUser(<?php echo json_encode($userdata); ?>);
</script>

Or if your web-application provides a real-time list of new user-accounts via web-sockets, you could draw them on-demand:

<script type="text/javascript">
var ws = new WebSocket("ws://localhost:9998/users");
ws.onmessage = function (evt) { 
    renderUser(evt.data);
};
</script>

The examples above are a crude but hopefully demonstrate the flexibility that comes with separating MVC in JS. For a better discussion of that topic, check out a tutorial on one of the popular JS MV* frameworks (Backbone, Angular, Ember, etc).

1

You can refer more detail about ajax. Ajax allow to respond user's request without refresh the whole page or go to a new page. In some situations it might has better user experience to use ajax. For traditional php post request, it allow to bring user to other page. Hence, you can apply both ways into your project base on different situation.

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.