Easy Page Scraping

I recently had a need to pull data from a different part of our site and display it in a floating div (triggered by a mouseover) for quick and easy access. Thanks to jQuery this process is incredibly simple and by using the framework in this post you will be off and running in no time. Before we get into the code I should mention that JavaScript has what is known as a "Same Origin Policy" which means a document or script loaded from one origin can not receive properties of a document from another origin. As a result we can't grab data from another domain using this approach. This security feature is absolutely critical otherwise it way be way too easy to use JavaScript to do (potentially) malicious things across domains.

For this example the basic premise is the following: we want to display some data on our home page that is buried in another page elsewhere on the same site. This event will be triggered by mousing over an anchor tag. So imagine we have a file named "network.php" which includes a page element w/ ID="WiFi" and we want to grab/display the data contained in that element on our home page. The data is loaded then displayed in a hidden container when the mouseover event is triggered.

I hope this gives you a clear idea of not only how to do page scraping but also why it is a useful technique to know. The documentation in the code should make things fairly self explanatory but if you still have questions please don't hesitate to leave them in the comments.

File Uploading With PHP

This example shows you how to build a file upload handler that lets users select a file they wish to upload along with a name for the file just in case they want to specify something other than the file name. The function then takes the data stream, moves the temporary file to a location of your choosing on the server, renames the file to match that of either the file name that was uploaded or if a name was provided on the input form it will rename it to that, adding underscores where spaces appear. Several error checks are performed along the way to ensure that everything happens as we expect it to. The following is a screenshot of the form itself after doing a submit, you will see the $_POST[] data along w/ the $_FILES[] data. This is helpful for both debugging as well as understanding what is going on behind the scenes.
PHP File Upload - Debug

In the $_POST[] array you will see two members, the first is a hidden form field value which defines the max file size and the second is 'sFile_Name' which is the value from the input field on the form. The $_FILES[] array contains the following information about the file: type [the mime type of the file uploaded], tmp_name [the location/name of the temporary file stored on the server], error [the error code reported by the server, 0 or UPLOAD_ERR_OK means no error occurred], and finally size [the size of the file].

Below you can see the renamed and processed file in the path we defined in our script, happily living on the server.
PHP File Upload - Files

Now for the code, everything is fairly documented and pretty straight forward. The biggest thing to keep in mind outside of the PHP code is that the form enctype must be set to "multipart/form-data" otherwise the file will not be submitted to the server. If you have any questions please leave them for me in the comments and I will reply as soon as I see them.