I'm thinking about going with Google charts for a project I'm working on. I have all my data on my own server and so I was wondering what is the best way to go about inserting this data into a chart, there are a few alternatives:
Create the DataTable object from data that is provided inline. That is, print all the data into the HTML document. This will crowd out everything else since I have a lot of data, but I don't know if this is important. This way we can avoid one HTTP request.
Dynamically create a .js files for every request, holding the data, and letting it be included with a script tag in the document.
Retrieve the data using ajax (Google suggests this in their documentation)
Using the chartwrapper and adding a datasource pointing to my own server. This would be equivalent to the above, I suppose, and functionally equivalent to (2).
So what is the most common solution? What do you usually solve this?
I wouldnt worry about crowding out your data. Printing it out into a javascript datatable wont be visible to the user, and the browser wont care. However I would suggest you only print out what you need for each page so you dont have more than required.
I think probably any of your solutions are fine, so pick the one that suits you best.
Related
I'm working on a editing tool (type of a simple CMS) in PHP/MySQL for a product catalog. I have search the Internet for a solution but I don't even know what to search for. So now my hope is on you guys.
I have a form where you can put all kinds of data like part.no, description an so on. All of this data is saved into a MySql table (items). I also have a table with predefined specifications.
What I want to do, and that I can't find a solution for, is to have a dropdown meny (or similar) and a add button to add a row for each related specifications without saving the whole form each time. I want to save first when all specifications is selected.
So, can I use PHP for this or do I need jQuery/Javascript or similar? I know it's possible, have seen it in OpenCart :-)
I hope someone understands my question. It's hard to explane i a language I'm not fully manage.
Regards
Client-side vs Server-side
Javascript: This sits in the user's browser. So anything you want to move in the user's browser will be done with JavaScript. This is "client-side"
PHP: This site on the server, so takes inpute from the user's browser and gives back a response (generally HTML, but can also be JSON or XML which is read by Javascript.). This is "server-side".
Libraries
jQuery: This is a set of functions written for Javascript to make it easier. So it runs in the user's browser and makes it easier for you to write bits that move on the screen.
You get similar libraries that help you write PHP (commonly called "frameworks") and there are many others for javascript as well.
Where to start
Write your HTML page as you want it to look. Keep it simple for the first time.
Then write some javascript (possibly using jQuery) to move the menu. Google "jquery menu dropdown" or similar and you'll find a solution you cna customise.
Then write some PHP that gives you the HTML you wrote in '1'.
Then decide what's going to happen when you click on a link in the HTML, and repeat the process (write HTML, incorporate Javascript to make it move, write PHP to give HTML)
Then work out which bits of the HTML are common or structured and should come from a database.
Without writing it for you (in which case you'll never learn) best to start one bit at a time and build as your knowledge grows. Bucket loads of examples on the web when youreach a particular problem you need to solve.
After comment "[how to] make it possible to select and add single/multiple specifications (from another table) without saving the whole form each time a specs is added":
Growing with AJAX
What you are asking is AJAX - this is where you get Javascript to talk to the server, and for javascript to move bits on the page based on the results. jQuery is probably the easiest (and probably has best documentation / examples for the ajax, as well as moving the DOM).
Basically: you have an "event" that you trap in JavaScript, example
/// Using jQuery to trap a button click
$().ready( function() {
$("#ButtonID").click( function(e) {
e.preventDefault();
alert('Button Clicked');
});
});
Then you build in an AJAX call inside that event (also check out get or post as the syntax is easier, you just get less control). The AJAX wil send a request to your PHP server, and you can get PHP to return HTML which you can replace/insert using the DOM manipulation functions linked below (e.g. before, html etc) or, when you get more advanced, you'll send back JSON which is a data structure you cna more easily manipulate in JavaScript to stipulate what actions are required.
As above, without actually writing it for you, the best place to start is to read the docs and have a go. Google "jquery AJAX PHP table example" or similar and you'll find an example somewhere.
I understand that within same folder, I can use include() function for external PHP file, but now I would like to call the function in another PHP file which located in another URL.
For example, my live website (liveexample.com/table.php) has drop-down list and table, but without data.
My another PHP file (dataexample.com/data.php) is connected to database and process to extracting data out. But, it is in another server.
I need to make my data on [dataexample.com/data.php] delivers to [liveexample.com/table.php] and let the looping to draw table with data out on [liveexample.com/table.php] page.
Anyone has idea to design this method of delivering data from another server to another by using function call in PHP?
Or any other better solution to deliver my data between two different servers such as make the data record set into array and send to [liveexample.com/table.php]?
Please give me advise or consultation. Appreciate much!
I think SOAP webservice would be perfect for you to attain what you want but if possible just copy the same codes you have from the separate server.
If you make [dataexample.com/data.php] output your data as XML, then you can use it as a web service. What that means is, you can take that XML output (by sending a request the the data URL), and then parse it to load the data. This way, you can use that service any way you want. One way would be like you wanted, other examples would be via AJAX, or Flash etc.
So here are a few topics worth looking into:
using PHP for web services: http://wso2.org/library/3032
parsing XML data: http://www.w3schools.com/php/php_xml_simplexml.asp
I hope this will give a pretty good idea of how to achieve what you want to accomplish, because there a few options you can go by. Like Cristopher said, SOAP is one of them.
Have a great day.
What's a better practice? Load data in HTMLformat or JSON-format? When I load HTML i'm able to keep all the html in my php view-file. When i load JSON I have to put it in html elements clientside with javascript.
I know that a 'best-practice-question' isn't suitable for stackoverflow. So a better answer to my question is a list of benefits and disadvantages of both techniques.
I'd say use JSON whenever you need to process the data client-side, use HTML when you just want to dump it into some container-div.
For example, consider an image viewer, you can fetch a list of preview-image-urls using JSON, create a list of images client side and display them, scroll them around and so on.
On the other hand, if you're performing some action using ajax, and you just want to display a status message (like your table of data in the popup div), I'd suggest rendering the HTML on server side and just display it.
If you plan to call the data often in the same session, the network traffic and the responsiveness will be better if you just call JSON data. The HTML/JS overhead being in the cache, only data will cross the network from the second call.
However it looks you just need to render a table with TRs/TDs. If you don't call it often, you're better off with a simple HTML dump.
Another consideration is about clearly separating the data and the view, for cleaner code and easier maintenance. A JSON call allows a clear separation between data and HTML. In an HTML dump both are mixed.
I've just answered to another question, it was for JSP, but that may interest you.
What is the best approach for handling a complex form in html?
If you later have to do a mobile version, or another client in general, you might benefit from using JSON all over. JSON will also be smaller (might matter or not, depending on your html, the amounts of elements, ...)
Here's a good article on the subject: http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html
Looking to start a project that would require me to use Flash or Flex (I have not worked with either of these yet, yikes!!!). Flash would be the front end user interface that needs to display items pulled from a MySQL Database (I was thinking ajax via jQuery but open to suggestions). My question is, What would be the best approach for something like this?
High level
Flash calls to display image through ajax/php from Db
I don't know how to code the Flash part, any tutorials that kinda sound like what I'm doing? suggestions? thoughts? other ideas?
Side Note: The database table will contain text that describes the image being passed to flash, so I would like to display both the text and image.
Thanks for any advice/help,
--Phill
I'd recommend you try AMFPHP or ZendAMF. Both of these use AMF3 (which requires you to use Actionscript 3/FlashCS3+), and it is one of the quickest ways to get data into Flash.
You could also use php to generate an xml file and just request that url in Flash to load up the XML. You can also use ajax like you said, but it's probably going to be the slowest method open to you, unless you're working with very small data sets.
Regardless of the method you choose, I'd suggest you use Actionscript 3. It's much faster and if you use XML, it'll be a life saver.
Here's a tutorial about setting up flash to work with PHP & MySQL:
link
I've been asked to create a web UI that allows a user to modify a specific section of the HTML DOM and then POST the modifications back to the server for storage. The modification should be done via drag'n'drop, with my tool of choice being jQuery. The server will be PHP, but written by someone else since I'm not a PHP programmer.
The only way I can think to do this is to send back to the server the entire DOM section via AJAX whenever it is modified. However, that is expensive since the section could be quite large. Furthermore I'm not sure how I'd efficiently capture the modified section and write it to a string which can be sent to the server. Overlapping events would also be a big concern.
Any ideas for a better approach? Are there libraries/tools (JavaScript or server-side) that I should be considering? Many thanks.
Well if you are dealing with some list of elements, say rows in table you can send back a map where particular row is mapped to a position then when you re-initialize the page you can feed such map back and rearrange the list.
Also - another idea (since you are using PHP) you can have some sort of a model on the back end which backs your visual DOM element, then again - you send back some parameters you have changed (order, size, etc.) and adjust/save the model
Instead of sending the entire DOM section you should try to serialize the DOM section you're sending to something more lightweight (like JSON). Since it's HTML, serializing it to JSON will dramatically reduce it's size.
Apart from that I think there's not much you can do besides some AJAX request to allow the server to save the changes.
You'd want to use something like the UI plugin to facilitate the actual dragging/dropping/reorganizing. I don't know of any libraries that will pick out DOM objects and AJAX information to a server in a particular fashion, so you would probably have to code something like that yourself to suit your specific needs. It might help to know what sort of DOM node you're trying to send.
If you're building something like a custom WYSIWYG, sending the entire node might be the best approach without losing information. If you're doing something simple like allowing users to drag and drop to reorder a list something like the following code might suffice:
var toPost = '';
function handler(data) {//handle server response}
$("ul#container li").each(function(){toPost+=this.getAttribute('rel');});
$.post('processing_script.php',{data:toPost},handler);
I checked into how Google handles these. If you drag and drop an element on the iGoogle homepage, a GET request is sent to the Google handling script with the following parameters:
et '4af26272PQUMZP8V'
mp '19_1:4_1:7_1:13_1:16_1:18_2:2_2:3_2:14_2:11_2:_opt_3:17_3:6_3:12_3'