I'm trying to build mobile app for the web page which is implemented entirely in PHP Codeigniter framework. I figured I would reuse website's server API for the mobile app. For that I would need RESTfull services.
The thing is I don't know PHP at all! And from what I gather, websites built on Codeigniter don't normally have public endpoint to invoke it's API.
One example would be Ion-auth. The Authentication is done on PHP level with no REST services.
So my question is...does what I've written above make any sense and I understood the framework correctly? If so, does that mean, I'll have to write separate server for my mobile app which would have exactly the same functions and database, or maybe is there a way to reuse current services elegantly?
I have researched about codeigniter-restserver but it seems I would have to rewrite all the logic in the website and I would rather do it in spring or node.
You're going to get a pretty subjective group of answers for this. There are a couple ways to do what you seem to be looking for.
First, is a separate "API" controller with the CodeIgniter-restserver which duplicates all of your controller functions. This would be sub-optimal since you'll have to maintain your website's code in two places.
Another, slightly better option would be to check for $this->input->is_ajax_request() or something similar sent by the mobile app, then send responses back with the restserver but the usual view() for the website.
Ultimately, and your best option, would be to refactor all your code making a single codebase API endpoint (this is where you'd have to decide if CI is a reasonable API or if you want to use something else) and your website and mobile apps use it.
Edit
I just realized you specifically mentioned ion-auth, and I happen to have PyroCMS's users module open.
if ($this->input->is_ajax_request())
{
$user = $this->ion_auth->get_user_by_email($user->email);
$user->password = '';
$user->salt = '';
exit(json_encode(array('status' => true, 'message' => lang('user:logged_in'), 'data' => $user)));
}
so, for the restserver you could instead send back:
$this->response(array('status' => true, 'message' => lang('user:logged_in'), 'data' => $user)), 200);
Edit 2
Regarding how to send post data with Ajax, that's really a whole different question from the OP, but a quick example using jQuery:
// Not complete code
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
Example from https://api.jquery.com/jquery.post/
Related
I'm migrating an old MS-DOS Foxpro program to cakePHP, but in some part of the application process the user will have the possibility to load a text file and process it according to some business logic.
I worked the algorithm, and it's working fine, I programmed it in plain PHP.
But in some parts of the process the user must interact performing some tasks, in plain PHP it's possible to do it.
My question is:
How can I have an interactive file process on a MVC framework, since the controller had processed the data when it`s give the control to the view.?
jQuery-ajax could help?
What do you think?
Regards
Update
As Borislav Sabev pointed, I do this:
Create a file upload using using: jQuery Form Plugin
A PHP file parsing according the data structure on the uploaded file that returns to the client the parsed contents of the file in JSON.
Then the JSON data is sent for processing via ajax POST
$.each(data, function (i, fb) {
callAJAX(fb);
});
callAJAX just send the POST request
function callAJAX(fb){
$.ajax({
type: 'POST',
url: "proc.php",
dataType:"json",
complete: function(r,st){
},
success: function(r,st){
processError(r);
})
},
async: false
});
}
If there is a translation error, the PHP returns to the client an error message via JSON.
function proccessError(r)
{
$.each(r,function(i,d){
if (d['error'] == 1){
$.alert('Material not found in translation table','Error');
}
})
}
Now the big question:
When I open the $.alert dialog I want the user select the correct material via an autocomplete, but the code is no waiting for the user selection and pops another $.alert window. How can I tell jquery to wait to the user input an then continue with the processing?
BTW: this is the $.alert extension that I use:
$.extend({ alert: function (message, title) {
$("<div></div>").dialog( {
buttons: { "Ok": function () { $(this).dialog("close"); } },
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message)
.parents(".ui-dialog:eq(0)").wrap('<div class="error-w"></div>');
}
});
What #AD7six told you is completely right however your question is very vague.
What you seem to need is to provide an interactive (realtime?) way for a user to edit data after a files has been uploaded and processed?. If it is 'data arranged in rows' I can suggest some DataGrid - imagine this as a Web representation of your file's structure.
What you're trying to say with 'the view shows the result of a method or action on the controller' is that this case is in the normal HTTP (with MVC) flow:
Browser (user) initiates a request => Request is processed my Controller => Model is called (gets, saves or manipulates data) => Data is returned to Controller => Controller handles the data over to the View layer => The view layer renders, Controller returns the Response (the rendered view)
In order to do this thing interactively you will have to use AJAX (I propose AJAJ).
The overall paradigm in this case is that the above flow is iterated on every AJAX request. You can achieve this in many ways:
Use plain JavaScript and XMLHttpRequest
Use jQuery's XMLHttpRequest wrapper functions ($.ajax(), $.post(), $.get(), $.load(), etc.)
Some other JS lib's AJAX capabilities (MooTools for example)
Use an real-time JS app framework
This also heavily depends on the browsers (and versions) you need to support.
You will need to provide 'access' for the client-side via a controller or a full API. The best solution for an API would be REST. If this is an enterprise app I suggest you adhere to the Richardson Maturity Model.
If you don't need a fully-realtime app I'd go with jQuery AJAX or some other JS lib's AJAX.
The thing is that what you request as an answer is an overall explanation and that is why I am not going to provide code examples.
Cake has JSON views that you can use to return data.
The other option is an empty layout and a view that returns JSON encoded data like:
<?php echo json_encode($data);?>
Hope this helps. If anything ask.
I'm a newbie web developer diving into Backbone for the first time. One major question I've been grappling with (actually spending a lot of the last 2 days researching to no avail) is how exactly Backbone communicates with the server.
In my previous projects, I've been able to fetch data from my database using PHP and jQuery's $.getJSON method. I'm also able to do this when I use Backbone (ex. myCollection.url = "todos.php"). However, in every single tutorial, documentation, example code I've looked at, the url for the collection is always set as a directory and the urlRoot is directory/id (ex. myCollection.url = "/todos" and myModel.urlRoot = "/todos/5".
My question is how exactly is this managed? It seems a lot cleaner than the traditional way I was doing by adding GET parameters to my calls. At first I thought this was routing, but that seems to be only related to setting browser history and stuff. Some of the source code I've looked at uses SLIM PHP and Rails (neither of which I've used) but I have no clue how any of the parts fit together.
Backbone has its own api for communicating with server, such as fetch, save, destory.In fact, these methods do the same things with jQuery's $.ajax. For example, you use backbone's fetch in this way:
var UserModel = Backbone.Model.extend({
url : "rootURL/user",
});
var user = new UserModel;
user.fetch(
data:{
userId : 1, //the webservice will be: rootURL/user?userId=1 GET;
}
success:function(model, response, options){
//callback
},
error:function(model, response, options){
//callback
},
);
But you can also use the same way as in the jQuery to communicate with server in backbone's application.For example:
var UserView = Backbone.View.extend({
render: function(){
//do something
}
getUser: function(userId){
$.get("rootURL/user",
{ userId : userId},
success:function(data){
//callback
}
);
}
});
In my website I will have a "browse catalogue" button, which, onclick will change several elements of the page to display the catalogue element. I dont want a full page reload because several elements such as the nav bars and news feed will stay the same.
My question is how can i change several different divs with ajax onclick?
Essentially im not sure how to do place several different components in different divs across a page.
And i know there's a limit on simultaneous ajax calls, so im sure the proper way to do it wouldnt be to make a unique ajax call for each of my divs.
A little guidance would be great.
Using jQuery, you can get an json array of elements for each block that needs to be updated:
In your html page:
$.get("page.php?id=42",
function(result){
$('#title').text(result['title']);
$('#description').text(result['description']);
$('#price').text(result['price']);
}, "json");
In page.php:
$result = array('title' => 'foo', 'description' => 'bar', 'price' => 3);
echo json_encode($result);
header('Content-Type: application/json');
die();
I'm not sure if the right decision will be to send several ajax requests. Just create a request with unique attribute value, in so shape that server will know which blocks you need. On server side all required blocks concatenate in json object, and return it to client. After just parse object on blocks that should be. For example
$.ajax({
url : 'http://your.server.doment',
data : 'block[]=1&block[]=7&block[]=15',
type : 'post',
dataType : 'json',
success : function (object){
for( el in object) { $('#block_'+el).html(object[el]); }
}
});
you can use json
example
php request ajax
$div1="<table><tr><td>x</td></tr></table>";
$div2="<table><tr><td>x</td></tr></table>";
$div3="<table><tr><td>x</td></tr></table>";
$json = '{"div1":"'.$div1.'","div2":"'.$div2.'","div3":"'.$div3.'"}';
return $json;
uses jquery
$.ajax({url: 'ajax/test.php',
success: function(data) {
var obj = JSON.parse(data);
$("mydiv1").html(obj.div1);
$("mydiv2").html(obj.div2);
$("mydiv3").html(obj.div3);
}});
if you have a error in the parce function
replace spaces
example
$arr =array("\n","\t");
$div1= str_replace($arr,"",$div1);
Practically, ten or more elements updated in parallel on the page (each by a separate ajax) will not make such a big difference (unless you can test it with your website deployed into productive environment and prove I am wrong).
Nonetheless, if you wish to compact all the data exchange to one single request/response ajax call - it is very well possible but does require certain flexibility on the server side (see http://php.net/manual/en/function.json-encode.php).
I.e. one of the possible solutions is to produce json response on the server side, that generates a key-value pairs (JSON - javascript {} object) with keys being id of your elements and values being (new) html.
There are tons of ajax JS frameworks as jQuery, prototype, dojo, etc. (I will pick jQuery for this one).
Ajax request
$.ajax({
...
})
See http://api.jquery.com/jQuery.ajax/
Server response
// Assume we got
// var data = {key1:'html1',key2: 'html2'};
// Ajax handle can look like
success(data) {
$.each(data, function(key, val){
//console.log(key, val);
// Do some checks here.. But key should indicate #id of html elements
$(key).empty().append(html);
});
}
This is a basic outline but should keep you going into the right direction.
I'm trying to get an understanding of how Backbone.js, Slim PHP and Paris/Idiorm might work together and I'm having trouble completing the flow, starting with model attribute data, all the way to the database. PROBLEM: What exactly gets sent to my server when I do model.save() ?
Client-side: Backbone.js
var Donut = Backbone.Model.extend({
defaults: {
name: null,
sparkles: false,
creamFilled: false
},
url: function() {
return '/donut';
}
});
var bostonCream = new Donut({
name: 'Bawston Cream',
sparkles: true,
creamFilled: true
});
bostonCreme.save(); // <-- Problem: Not sure what & format this is sending
I think the above is my main problem. My understanding is that backbone will by default, know to send POST data since it's new. It sends it to /donut which is routed, but the question I have is WHAT does it send? And in what format? The outcome I want is to save those donut attributes to my DB. I can pass this server-side code a json like this using jQuery $.post()...
var myDonut = {"name":"Jelly Filled", "sparkles":false, "creamFilled":true};
$.post('http://localhost/donut', myDonut);
...and it happily takes it, saves it to my database. But with the current setup trying to send my backbone donut data, I get POST 500 Internal Server Error. Below I have some server-side code.
Server-side: Slim PHP w/ Paris
class Donut extends Model {}
$app->post('/donut', function() use ($app) { // Slim framework routes my POST...
$donuts = Model::factory('Donut')->create(); // Paris stuff...
$donuts->name = $app->request()->post('name'); // Slim request parameters...
$donuts->sparkles = $app->request()->post('sparkles');
$donuts->creamFilled = $app->request()->post('creamFilled');
$donuts->save(); // Paris... Save name, sparkles, and creamFilled to my DB
});
I have a feeling the answer is out there, but every example I've looked at seems to be missing one piece of the puzzle or another and I can't get that "A-hA!" moment. I thank you in advance and apologize if this is a really ignorant question. :-P
FOLLOWUP/EDIT: 1
Can you paste the error messages?
I get a POST http://localhost:8888/donut 500 (Internal Server Error) in the current state. I can get more information with the following code.
bostonCream.save({}, { // REPLACE bostonCream.save();
success: function(model, response) {
console.log('SUCCESS:');
console.log(response);
},
error: function(model, response) {
console.log('FAIL:');
console.log(response);
}
});
Now when I run backbone's save(), I still get the 500 Error but also XMLHttpRequest as my FAIL response. The only remarkable clue from the XMLHttpRequest is responseText = SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be null.
So my guess is that either 1) I'm messing something up with the save() in that it isn't capturing my attributes correctly, 2) It is currently sending my attributes in a format that my server isn't recognizing with the standard $app->request()->post() Slim methods (Doesn't seem to do much when I try accessing directly with $_POST either), 3) My server isn't setup correctly to take the kind of data that is being sent.
Another thing I noticed although I don't know what to make of it is that when I add
echo $_POST;
It returns to me an empty array. Still gives me the FAIL. If I do THIS however...
echo json_encode($_POST);
It gives me a SUCCESS and the response is a [ ]. Nothing in there. Clearly my POST data is still wonky.
I came up with a solution to completing the problem: how to get data from client to server using the default backbone save() and .sync - passed over to the Slim php framework and going through Paris/Idiorm to my DB.
I am including my working updated code below:
Client-side: Backbone.js
var Donut = Backbone.Model.extend({
defaults: {
name: null,
sparkles: false,
creamFilled: false
},
url: function() {
return '/donut';
}
});
var bostonCream = new Donut({
name: 'Bawston Cream',
sparkles: true,
creamFilled: true
});
bostonCream.save();
/***** If you want to check out the response to save() ? ***
bostonCream.save({}, {
success: function(model, response) {
console.log('SUCCESS:');
console.log(response);
},
error: function(model, response) {
console.log('FAIL:');
console.log(response);
}
});
************************************************************/
Sever-side: Slim PHP w/ Paris/Idorm
class Donut extends Model {}
$app->post('/donut', function() use ($app) {
$donuts = Model::factory('Donut')->create();
/* EDIT: Works... but not the Slim way
$parameters = json_decode(file_get_contents('php://input'), true);
$donuts->name = $parameters['name'];
$donuts->sparkles = $parameters['sparkles'];
$donuts->creamFilled = $parameters['creamFilled']; */
/* SLIM: Using Slim Request Object */
$requestBody = $app->request()->getBody(); // <- getBody() of http request
$json_a = json_decode($requestBody, true);
$donuts->name = $json_a['name'];
$donuts->sparkles = $json_a['sparkles'];
$donuts->creamFilled = $json_a['creamFilled'];
$donuts->save();
// echo json_encode($parameters); // Prove you've captured POST data, send it back
}
Now my code is happily using the default settings of Backbone.js (no changes to sync) and sending proper model attribute information to my server which seems to be successfully accepting the data and saving it to my DB.
The key here seems to be this line...
/* $parameters = json_decode(file_get_contents('php://input'), true); */
// EDITED: getBody() method not documented in Develop Doc, only Stable # time of post
$requestBody = $app->request()->getBody();
If you want to know "what exactly is sent to the server", you should have a look at the Backbone.sync function in Backbone's code. It is very well documented, step-by-step. Then, the cleanest way to achieve what you need is to write you own sync function, inspired by Backbone's sync.
Also, a quick way to see what is sent to the server is to use your browser debug console (Network tab). You can compare here what is sent by Backbone vs. what is sent when you use $.post directly. Please post this information if you need more help !
backbone sends json data to your php backend server, which you should expose your RESTful api to respond to http verb like get, post, put, delete and etc.
your backend api is responsible for communicating with database.
I am not sure about SLIM PHP. it seems to handle the request. Can you paste the error messages?
i am trying from my main web page to check and in some cases send a variable via URL like this (http://192.168.0.110/CVAL.CGI?A0=1) this is to modify the status of something in my web page depending on the value seen in the url.
Sounds like you need Ajax.
There are many javascript libraries that can help you with this functionality such as jQuery, Prototype, or one of the many found on this page.
Hope that is what you are looking for and is helpful. Next time post more specific details so we can answer your question correctly the first time. Specific, detailed examples of what you want to do are also helpful.
UPDATED:
Here is an example using the Prototype Javascript library given your example form:
new Ajax.Request('/CVAL.CGI?A0=1', {
method: 'get',
parameters: { anotherValue: 'something' },
onSuccess: function(transport) {
alert(transport.responseText); // this is what the server returned
}
});
This would result in a request to /CVAL.CGI?A0=1&anotherValue=something. Whatever CVAL.CGI returns in response to that request, is available from transport.responseText.
This way, the user never has to leave the page or submit a form but it is all done behind the scenes. Your parameters can be any values you want to send which you can grab from form fields or other user input. You can return responses in JSON to make accessing the return data easier as well. Change method from 'get' to 'post' to do post requests.