Site Cloner PHP Script
Bargain Hunter PHP Script
Job Hunter PHP Script
Site Login and Access Control PHP Script

Why Use Node JS

Throughout the past few years, node.js has caught alot of people’s attention, including myself. So, I hope to explain in my own words, when and how I would use node.js. This is written from the perspective of a web developer who dominantly hand codes PHP, mySQL, HTML and CSS programmer. 

After Googling many different queries about node.js, you often find nothing about node.js vs html. Since basic Bootstrap websites will be more efficient than using a server side language, this can be chalked up as old school technology still being the most effective, especially with caching. So, for a small website with under 8 pages and hardly any future changes, HTML would be unbeatable, at least until someone tells me convincingly different.

With all that said, I spent the better part of a week setting up node applications…including Ghost. After the usual ‘things not going real smoothly’,  I did end up getting everything to work out on an Ubuntu 14 installation and learned the basic ins and outs of the setups; including startup scripts with Linux.

About The Present

When I look at these three links from w3techs.com, it shows how WordPress is still dominating market share and PHP is over 81% of the server side market share. Javascript shows only 0.2% market share and Node.js shows 0.1%.

http://w3techs.com/technologies/overview/content_management/all
http://w3techs.com/technologies/overview/programming_language/all
http://w3techs.com/technologies/details/ws-nodejs/all/all

Back to WordPress. The reason I use the WordPress example is to show that it is increasing in usage and market share. The link http://w3techs.com/technologies/details/cm-wordpress/all/all shows this.

What I am trying to get at here is that from a web developer’s perspective, there are so many WordPress and PHP sites that taking over these works or rehosting them is likely going to happen in the form of their current technology, or from using httrack to convert them to plain, old HTML. Making a makeover to Node will take more time and unlikely be appealing, especially cost-wise to a client.

So, from a typical web developer’s point of view, turning your back on popularity is not an option. On top of that, the race for better hardware is always on the up and up. So, although technology can make leaner, faster code, hardware can do the same.

And, for new websites, lean coding, strong caching(like Smarty Caching with PHP) and Varnish, and the realism that most clients are only capable of so much local traffic, I would likely not go to node.js. No only would the site take longer to build, but, the pros do not outweigh the cons.

Now, where I could use Node would be with the Ghost blogging platform because it is easy to setup, clone, and use. Also, it runs very fast and has decent documentation and templates.


When I Would Use Node JS

To put it bluntly, I would only use node.js to develop a web application that would need the ability to be very fast and handle very many users, or, with the Ghost blogging platform or newer complete applications that have a proven track record.

Typically, a custom node.js application would be a web developer’s dream application that had this potential to grow and prosper. However, realistically, this excludes almost any building of a typical small business website, or web application that would unlikely handle enough users to overload the hosting environment.

As far as custom coding goes, it would take some transition since it reminds me of a new experience with Smarty templating, using a PHP Framework, or trying to customize Joomla for the first time. Since node.js has synchronous and asynchronous ways of doing things, it is best to test and try rather than write code that will cause issues down the road.

How to Show and Hide images With Jquery

The goal here is to be able to show and hide images with a single click. The code below will load the pages and its images by default. But, the viewer will have the option to hide them, or re-display them by clicking a button. The code bwlow contains the html with an image and the jquery that shows and hides it.

Jquery

Here is a quickrunover of the code below. When the ‘.hiding_them’ class is clicked, the function is triggered. Then, we check for image visibility. If the image is visible, it becomes hidden. On the contrary, hidden images will show up.

<script type="text/javascript">
       
        $(document).ready(function () {
            $('.hiding_them').click(function () {

                if ($('img:visible').is(":visible")) {

                    $("img").hide();
                } else {
                    $("img").show();

                }

            });
        });

    </script>
       
      

HTML

The input button has the class name ‘hdining_them’. Jquery will repond when that class is clicked.

<form id="myform" action="">
            <input class="hiding_them" type="button" name="hide_images" value="Show | Hide Images"/>

        </form>

Jquery Removing a Table Row and Updating Backgrounds

This tutorial will show you you can remove a table row from the page and update the alternating background colors.

Until every programming language makes almost as much sense to your first speaking language, you may want to go thorugh the code below and translate it so that you can understand the process. Well, I will even help you with that this time.

Okay, once the submit button with the ‘contacted’ class is clicked, the function does its thing. The submit button exists in each table row. Therefore, the next line basically says remove this submit button’s first table row parent. That will remove the row and that includes the button you just clicked.

Since the original row above could have a blue background and the one below a blue background, the page could look ‘yucky’ since there won’t be that nice alternating color scheme. Well, not worry because the next two lines of code give each even and odd row a new background color so that everything stays nice and uniform.

<script type="text/javascript">
    $('.contacted').click(function () {

        $(this).parents("tr").first().remove();

        /*
         Toggle table rows
         */

        $("tr:even").css("background-color", "#fff");
        $("tr:odd").css("background-color", "#E2E4FF");

    });

</script>

Posting a select form On Change With Jquery

With this example, you will see how you can post a form when you change a value from a drop down select element.

Jquery Code

The code below can be translated to mean the following. When the ‘myclass’ class is changed from a user selecting a different option, that form is automatically submitted.

<script type="text/javascript">

    $(document).ready(function () {
        $('.myclass').change(function () {
            $(this).closest('form').trigger('submit');
        });
    });
</script>

HTML Select Element

WThe select element has a class called ‘myclass’ and its name attribute is my_item.

 <select class="myclass" name="my_item">      
    <option value="all">All</option>     
    <option value="1">One</option>     
    <option value="2">Two</option>  
</select>

Using Shadowbox For Video and Images

Shadowbox is a web based application which allows users to displya text or image links that popup in a shadowbox. Shadowbox can be downloaded from shadowbox-js.com.

To use Shadowbox with youtube video,
1) Download Base(standalone) and check all options.
2)
Unzip and upload the shadowbox folder or files to the desired location on the server. Rename the folder to something different if you want to keep everything in one folder.
3) Add the following inside the <head></head> tags:

<link rel=”stylesheet” type=”text/css” href=”js/shadowbox.css”>
<script type=”text/javascript” src=”js/shadowbox.js”></script>

<script type=”text/javascript”>
Shadowbox.init();
</script>

4) Use the link format below to make popups for youtube video..

<a href=”http://www.youtube.com/v/abcde45t&hl=en&fs=1&rel=0&autoplay=1″ rel=”shadowbox;width=720;height=480;player-swf;” ><img  src=”images/img.png” /></a>
 


Changing CSS With JQuery

JQuery makes it very simple to alter css properties for an element, id, or class. The code below shows how an input value can become orange in case the number is greater than 10.

Initially, the change() function is activated when an input field changes. It is similar to Javascript’s onchange attribute. Then, the value is stored as an object with $(this).val() and the class is stored as an object $(this).attr(‘class’).  Now, conditional statements are used to change the css text color if the value of a given input box becomes greater than 10. If it becomes greater than 10 the text becomes orange. If the text is 10 or less it becomes black. The full code is given below.

$(document).ready(function(){

    $(“input”).change(function() {

    var myvalue = $(this).val();
    var myattributenclass = $(this).attr(‘class’);
    
    if(myvalue > 10 && myattributenclass == “class1”){
        $(this).css(“color”, “#dc4000”);
    }    
    else {
    $(this).css(“color”, “#000000”);
    }
    
    if(myvalue > 10 && myattributenclass == “class2”){
        $(this).css(“color”, “#dc4000“);
    }
    else {
    $(this).css(“color”, “#000000”);
    }
    
    if(myvalue > 10 && myattributenclass == “class3”){
        $(this).css(“color”, “#dc4000“);
    }
    else {
    $(this).css(“color”, “#000000”);
    }
    
    if(myvalue > 10 && myattributenclass == “class4”){
        $(this).css(“color”, “#dc4000”);
    }
    else {
    $(this).css(“color”, “#000000”);
    }
    
    if(value > 10 && myattributenclass == “class5”){
        $(this).css(“color”, “#dc4000“);
    }
    else {
    $(this).css(“color”, “#000000”);
    }
    
    });
});


Passing Values Into Javascript Function

Here are two methods for which you can use DOM(Document Object Model) to use values within html forms.

Example 1:
When someone clicks the button, the value 25 become a parameter for the get_price() function.  It becomes ‘value’.

<html><body>
<script>
function get_price(value){
var price1 = document.getElementById(“myid”).value;
//return true;
alert(“Price is: $”+ price1 + “.00”);
window.location.reload();
return true;
}
</script>

<div>Hats
    <form>
<input type=”text” id=”myid” name=”myid” value=”25″/>
<input type=”button” id=”thebutton” name=”thebutton” onclick=”get_price(this.form.myid.value)”/>
</form></div><div style=”clear:both;”></div>
</body></html>

Example 2:
The code below just calls the get_price()  function without parameters. Then, using DOM we select the desired id for which to make the price1 variable.

<html><body>
<script>
function get_price(){
var price1 = document.getElementById(“myid”).value;
alert(“Price is: $”+ price1 + “.00”);
window.location.reload();
return true;
}
</script>

<div>Hats
    <form>
<input type=”text” id=”myid” name=”myid” value=”25″/>
<input type=”button” id=”thebutton” name=”thebutton” onclick=”get_price()”/>
</form></div><div style=”clear:both;”></div>
</body></html>


Javascript Auto Submit Form

Online courses, and other forms may have the need to submit the information after a specific time period. For example, a student may have 30 minutes to complete a course. If the course is not completed on time, submitting the work automatically is much like a teacher grabbing the exam paper at the bell. Students may try clever things, but using the autocommit, sessions, ip tracking and cookies could ensure that the exam is rather cheat-proofed and submitted on time.

Here is the javascript code which can go above the form in the php file.

<script>
function submit_it() {
//The dom below shows which form to select
//document.forms[1].my_form_name.click();
//or
document.forms[1].elements[‘my_form_name’].click();
}
//automatically submit form after 52 minutes which is 6000ms * 52min=31800000ms
//setTimeout(“submit_it()”,31800000);
setTimeout(“submit_it()”,10000);
</script>

Javascript Strings vs PHP Strings with Functions

Javascript and PHP share many similarities when writing functions; such as how the function is written:
function(){}.

However, there are a few fundamental differences. For one, Javascript functions can start be started by using html, while php functions tend to be called from PHP files. 

Several methods to start Javascript files are to run when the page loads using <body onload'”myfunction()”> or to call them when a form is submitted <input type=”button” value=”Submit” onclick=”myfunction()” />, or to create an anchor link <a href=”javascript:myfunction()”>Text link</a>.

With Javascript, there are many event handlers for which to start a function. Many of the popular event handlers are:
onload , onclick, onmouseover, onmouseout, onfocus, onchange, onblur and onsubmit.

PHP tends to call a function within php such as:
myfunction(); or
$myfunc=myfunction();

Other differences exist within the functions. Javascript and PHP can use similar methods to create variables in strings:
(i.e.) $myvar=”Here is a string of text”;
However, Javascript can create and use strings without ‘$’ and do not need to close the line:
myvar= “Here is a string of text”

In PHP, variables wouls always need ‘$’ to define a string.

The Javscript setTimeout() function is a decent method for which to start another block of Javascript code at a specified time:

Here is an example below for which the setInterval function will start the setCountDown() function after 2 minutes have elapsed.

setTimeout(‘setInterval(“setCountDown()”,1000);’,120000); // Start timer


Ajax Basics

Using ajax is a very fast method to retrieve data from a database with a php file.

1) create a request object (looks like PHP oop)
var=new XMLHttpRequest();

2) Send a request to the server with open() and send() methods
xmlhttp.open(“GET”,”myfile.php?q=”+str,true);
xmlhttp.send();

3) response from server Use responseText for string from server or responseXML as xml data
//3A. SET / STORES A FUNCTION (or the name of a function) to be called automatically each time the readyState property changes 
xmlhttp.onreadystatechange=function()  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
//3B. RESPONSE FROM SERVER
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
    }
  }

Javascript is great stuff. But, it does have a few drawbacks. This article is about redirecting a web page or module if Javascript is not enabled. According to w3 Schools, 95% of all web browsers had Javascript turned on and this number had generally shown an upward trend in usage since 2000. These days, after installation, Javascript is turned on by default with most browsers.

If you really want to cater to everyone, you could make one website with Javascript while you could redirect the others to a non-javascript site (or page).

A noscript tag can be added into html, the main index.php file, or any other page for which you want to redirect a user if no Javascript is enabled. Here is the code to redirect users:

<noscript> <meta http-equiv=”refresh” content=”2; URL=http://www.the websiteaddress.com”></noscript>

As a web developer, we have experienced users who disable Javascript, but often for the sake of malicious activity. They had done so to cause a harassment issue by trying to go around the Javascript validation. The current ip tracking from Unix timestamps, ip addresses and proxy servers is under investigation. Here is a link which explains how users trying to hide their identity can be identified:
See link.

To deal with individuals that like to browse your website for no other reason than being an annoyance, you can run the noscript tag and redirect to page for which the ip address and Unix timestamp will be inserted into a database. You can then track the ip’s browsing behavior for each and every visited page. The Unix timestamp will pinpoint exact time to the second, and ultimately, the location for which such behavior occurred.

<!–[if lte IE 6]>
<meta http-equiv=”refresh” content=”0; url=/ie6.html” />
<script type=”text/javascript”>
/* <![CDATA[ */
window.top.location = ‘/page_for_ie6.html’;
/* ]]> */
</script>
<![endif]–>