Our website development team manages many web sites (each with a different vanity URL) on our INTRAnet. We'd like to implement something (code snippet) that is easy to add the Application.cfm/OnRequestEnd.cfm page which would insert a record into the database tracking things like page, url, querystring, userid, etc - basic stuff. Inserting the record is not a big deal. What I'd like to know is from a performance stand point, what would you all recommend so that we dont' get a bottleneck of inserts queued up as employees hit the various sites. We can't use jQuery since not every site will have the same version of jQuery so we really are limited to just using Coldfusion - I think.
Ideally, what we'd like to be able to do is create one main tracking file on our main server and reference that file from all of our other sites. Then if/when we need to make an update, we can make a global change - kind of like how Google Analytics does, just not nearly as much details.
On all of the sites we support, we do have our department logo on those pages. I thought about building a tracking process into the loading of the image, much like they do with emails.
Any thoughts on this would be appreciated of if you have a better idea - I'm all ears.
UPDATED
Regarding the image processing, I could not find the original link for the tutorial from easycfm.com but I found what appears to be the identical code here: http://www.experts-exchange.com/Software/Server_Software/Web_Servers/ColdFusion/A_2386-Track-your-Emails-using-coldfusion.html
I would say that you should not try to prematurely optimise this until you have a reason to. If you find you have a problem down the track, you can deal with it then.
Create a Logging CFC and implement a method which receives the metrics you wish to log, and then wraps that up into a record to insert into the DB, and use <cfquery> to write them to a DB table. Call the function from OnRequestEnd.cfm.
I specifically suggest rolling this into a Logging CFC because if you need to change the implementation of how you log things later on, you can just change the inner workings of the logging method, instead of having to mess with all your sites.
Adam Cameron's answer is probably the way you should go. On top of that what I would suggest is inserting those records into a table with no additional indexes. This will cause the inserts to be very quick. Then you can use a scheduled database job to move this data into a nice normalised schema that is quick to analyse.
I wouldn't write off using JavaScript just because each site will have a different version of JQuery. People still used to be able to get stuff done prior to the existence of JQuery it is just a JavaScript library. It is very basic JavaScript to include dynamically include a script file that points at your tracking file with the relevant parameters.
<script type="text/javascript">
var script = document.createElement("script");
var body = document.getElementsByTagName("body")[0];
script.setAttribute("src", "http://www.yourdomain.com/trackingfile.cfm?" + yourparams);
body.appendChild(script);
</script>
As you can see, no need for JQuery.
Related
I want generate a development tool that I can input code (Such as HTML, CSS and JS) and it will create a preview/result window (like JSFiddle). I will be using it for tutorials in school and need a unique site to do this from (I would love to use CodePen, JS Fiddle or Codecademy... But I can't).
I am able to generate a form that can be processed and shown in an iframe (through PHP where it simply echos the information into a new html file that is shown in the iframe). But this came with problems; I only have a cheap server and won't want to put too much pressure on it so need todo this through JS/jQuery.
Firstly is this possible? And how would I go about doing it (code examples would be great!)?
Thanks in advance (I appologise if I haven't given enough detail but I'm fairly new to this and may just be asking a pointless question (I'm only 15 :/ ) )
Cheers :)
There is a rather impressive project called php.js that will let you parse and execute a subset of PHP code in the browser.
If you want to do it complete on a client/ in browser like jsfiddel do, then you need 2 or more frames.
One is for your code and one is for the output.
If you click on "run", then need to apply your code to the frame. You can do this by accessing the document object of the frame. If you got it, you´ll need to inject your code there. There many examples in the web on how to access a child document object from an frame/iframe.
I am C++ developer and I haven't really followed up on any development related to the web for a very long time. I have this project I would like to implement, really as a goal to sort of catch up on these technologies. My project is this:
display some content in a browser (for example the content of a 3D scene using a canvas and WebGL), have a button on the page. When the button is clicked, send the data to the server (the camera position for instance), render the image on the server (using some offline high-quality rendering solution), return the image back to the browswer, and finally, display it in the canvas.
I believe I can fill up the gaps with simple things such as WebGl, canvas and HTML 5. I am familiar with some of these techniques and I can learn. Where I am completely lost is the technology that is used or needed to do things such as sending the data to a server, having them processed there, and sending some result back to the client. Now I have done some research on the Web of course, but the is SO MUCH STUFF out there, that it's just REALLY hard to know in which direction going. They are tons of libraries, APIs, bits of technologies, etc.
I am suspecting I need to use some combination of JavaScript, DOM, HTML5 ... but would appreciate if people having done that before or knowing how this should work, could point me to the right direction. I am really looking for something basic, and IF possible not using some sort of 3rd party APIs. I don't want to do something complicated just simple, send data, process, send back for display. My goal is to understand the principles, not to make something professional or super powerful. I am doing this with an educational goal in mind (to learn and understand).
I read about RESTFul but I am still unsure if this is what I need. Really if someone can either simply describes me the basic technology components that I need for this project, point me to documents, tutorials, examples, give me the name for the bits and pieces of technologies I should read about, it would be greatly appreciated.
I realize the scope of this question is very large (and that I should have done my home work before instead of having years now of knowledge to catch up on). I believe though this question can be of great interest to many. And I also promise that I will post my findings and why not my working example when I have one figured out and working.
Thank you.
NOT AN ANSWER, just suggestions/ideas that include code. A structured/formatted comment.
Unsure how to use/code them in C++, but this is just an issue of rendering HTML and implementing javascript code.
The essentials are:
Have jQuery lib loaded. One way is:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Use a javascript code block for your jQuery script:
<script type="text/javascript">
$(document).ready(function() {
$('#mybutton').click(function() {
var pic = $('image_selector').val();
$.ajax({
type: "POST",
url: "ind.php",
data: "img=" + pic
})
.done(function(recd) {
$('#txtHint').html(recd);
});
}); //END mybutton click
}); //END document.ready
</script>
I don't know how you would send a pic as a var, or how to structure that, but you get the basic gist...
On the server side, it works like this (using PHP for eg):
<?php
$image = $_POST['img'];
//Do something with the received image
Actually, now that I'm thinking about it, you are sending an image (something I haven't done before), so I don't think you can just send it like text or a JSON object... You may need to post it with the enctype='multipart/form-data attribute for file uploads, as you do when using a form for uploads? Just guessing.
Anyway, this is not intended to answer your question, just to give you some hints as to where to look further.
See these simplistic examples for the basics of AJAX:
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
When I use google maps, I am interested in its implemention, so I use the firebug to inspect.
Then I found that its javascript loading strategy is rather interesting. Take this page for example:
The overlay example
Then when I open this page first time, the following js are loaded:
https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bcommon,map,util,poly%7D.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bonion,geometry%7D.js
But if I refresh the page(use the ctrl+f5), the following js are loaded:
https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js
However the page still works, the overlay is drawn in the map. But where is the poly.js and etc?
Also, can anyone tell me how to load the js by components? For exmaple the common util poly in the example.
What should I know when I write the different components?
1. When poly.js loads, it passes a string to google.maps.__gjsload___.
Here's an excerpt:
google.maps.__gjsload__('common', '\'use strict\';var Ai=isNa...
The rest of the file is just the contents of that string.
My hunch is this function probably stores this string in localStorage or sessionStorage so that it only has to be retrieved once.
2. Also, if you want to learn about loading js files as-needed, look into AMD and/or CommonJS:Modules.
A good imlementation of AMD (my preference) is RequireJS.
Update
I did some poking around, and localStorage and sessionStorage do not appear to be being used on this page. I also can't duplicate your results. In Firebug, poly.js always loads for me. There may be some magic happening somewhere, but I don't see it.
However, it's entirely possible to store a string in localStorage and sessionStorage for retrieval without having to make an extra js call.
Also,any one can tell me how to load the js by components?
this touches on the topic of asynchronous javascript file loading. if you've ever used a language that has a way to "include" a file at any point in a script, you'll understand that javascript does not have this capability. because of that, there is this whole paradigm of "aysnc javascript addition" via script tag injection.
script tag injection: you dynamically make a script tag, and set its source to the file you need, and insert that tag into the DOM, and voila, a new file has been loaded and executed. With javascript heavy applications, this is common, especially when loading third party applications. Google does it alllll the time, just check out google analytics' include script for a good example of this.
Now, since this is a touchy and delicate type of coding to do, some "javascript component / module / asset loading" frameworks have refined it and made it pretty stable. common.js, require.js, etc have all done good jobs at this.
What should I know when I write the different components ?
For what you're doing with google maps, you don't really need to know much. but if you get into javascript module pattern development, you need to know this: make sure you protect your global namespace from being cluttered by your own variables, so encapsulate all of your work in closures when possible, and (recommended but not required) start them all with a ; so they don't break each other if they get loaded out of order.
I'm new to web development but from what I've learned so far, I'm sure what I want to do is super easy. I just haven't quite figured it out, yet.
I have an app that pulls external html pages. These pages all pertain to grain prices. I have about ten pages or so and currently to change the prices I open each page, find the prices and manually change them. What I want to do is just have all the pages pull their prices from the same document (I'm assuming this will have to be an xml or txt document) so that I just have to update that one external document.
The external document will be hosted on the same server as the html pages.
This seems like something I should be able to do simply with javascript and Ajax and I have seen many examples using just that. The thing is that in all of the examples I've seen, the ajax calls an entire text document instead of just one piece of it.
For example, I have an html page called Northern Alberta Prices and it lists about six different grain prices. I want that page to call the external document (let's call it prices.xml) and get all the northern Alberta prices off of it and put them in their proper places on the html page and then I want the Central Alberta Prices page to also call prices.xml and take the relevant prices off it etc.
What would be the best way to do this?
(I'm not able to use PHP on my server at the moment but any answers involving PHP would still be welcome.)
Thank you for your time.
You'd have to call the entire document and then interact with the specific node in the XML
without the actual schema there's not much more help I can give you, although there is an ok tutorial here:
http://www.sitepoint.com/server-side-xml-javascript/
which will help you understand the core concepts behind data manipulation
Yes, to use XML with PHP you can do this:
http://php.net/manual/en/simplexml.examples-basic.php
That pretty much says, you can do this:
<?php
include 'example.php';
$movies = new SimpleXMLElement($xmlstr);
echo $movies->movie[0]->plot;
?>
... Which will get the Plot attribute from the first movie node. Please let me know if you have any additional questions.
Edit: One more option I came across was using jQuery (javascript):
http://think2loud.com/224-reading-xml-with-jquery/
I want to plug my clients' websites to a system that I have. I need to be able to use some information that is in the website in order to improve the user experience in my system (automatically pre-filled forms, show their address, etc...).
The problem I face is that my client's website provider will not code that feature (add a link passing the information I need). So my idea is to have a JavaScript file that will be included in all the pages (they are willing to do this, because it's only copy & paste)... and then this JavaScript code will somehow extract the data I need and create the link the way I need.
One thing that will help is that all my clients' websites are provided by the same companies, and they are all template-based. So all the websites from the same provider have the same HTML structure.
Do you know any other way of doing this? If JavaScript is the way to go, what's the best way to scrape the information?
Thanks!
I'm not sure if your 'system' is a web tool or desktop based program, but if it is a web tool dynamic drive have a nice piece of javascript that can achieve the results you want without needing to modify the clients site:
Dynamic Ajax Content
Now I'm guessing you may want to change the content around your self and not display it exactly as it is on your clients site. So heres a quick modification of their script function loadpage() so that you can catch the html in a variable (loadedContent):
var loadedContent;
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
loadedContent = page_request.responseText
}
Now if you follow the instructions on their page to setup and call the script ... after its execution you will have the html of the page stored in loadedContent for you to play about with.
if you want to test it working before you implement it, go to the link above, open your developer console, put the moded code in and hit enter. This should replace their function on the fly. Now see their demo at the top, click on one of the different pages. Nothing visible should happen. Go to your console and now type in loadedContent. You should see the html they where trying to load stored there.
Hope this helps