Blog of Dave

• Setting up OpenSSL
  First we need to get OpenSSL setup on our system, which is not included with the Apache Windows binaries.  In fact the OpenSSL project doesn't even provide the binaries themselves, but you can find them at Shining Light Productions.  For this example, I will be choosing the Win32 OpenSSL v0.9.8k Light version.  If you see a message like the one below, you will need to install the Microsoft Visual C++ 2008 Redistributable Package and then attempt the OpenSSL installation again.
  
   
  
  Once you have it installed, you can do a quick test to make sure that it is set up properly:
  
  
  
  
• Creating Certificates
  Next, we will use the OpenSSL terminal interface to create our self-signed certificates.  To explain a bit about what is going on below, I have a site already existing on my system that can be reached at http://scribble.  What we are doing is creating a secure subdomain of https://secure.scribble.   Typically when I create certificates, I name the files with the host/domain obvious so that they can be easily identified later.  Obviously you will want to replace the domain name to match your setup, but type the following in the terminal in the OpenSSL/bin directory:
  
  

  openssl req -new -out secure.scribble.csr -keyout secure.scribble.pem

  
  
  That will generate what you see below.
  
  
  
  You may notice that I left a lot of the prompts blank.  Considering this is a dummy certificate in a development environment, that approach makes sense.  You may choose to be more explicit based on your needs.
  
  
  If we were to use this key as it is, we would be prompted for the password every time that Apache starts.  Since that is less than ideal, we will now generate a non-protected key from the one we created in the previous step by typing the following:
  
  

  openssl rsa -in secure.scribble.pem -out secure.scribble.key

  
  
  
  
  
  You can see that I was prompted for a pass phrase.  This is the same password that you created when we generated the certificate above.
  
  Now we need to need to build the certificate that we will actually import into Apache.  You can do so by typing:
  
  

  openssl x509 -in secure.scribble.csr -out secure.scribble.cert -req -signkey secure.scribble.key -days 1000

  
  
  This will result in the following output:
  
  
  
  You can see that we now have a .cert, .csr, .key, and .pem file for our domain.  We will use a combination of the .key and the .cert
  
  
• Configuring Apache
  Now we need to make sure that your Apache server is ready to serve SSL requests. 
  
  First, let's put the .key and .cert files that we created above into a directory under Apache.  In your "conf" directory, create a subdirectory named "ssl" and move secure.scribble.key and secure.scribble.cert into that new directory.
  
  Next we need to make sure that the mod_ssl module is enabled.  Open up the httpd.conf file for your Apache webserver.  Search for "mod_ssl" and you should find a line that looks like this:
  
  
  
  Yours will likely be commented out with a '#' sign in front of the line.  You will want to delete that '#' so that it looks like the highlighted line above.
  
  Next you will need to make sure that you have uncommented the line that includes the httpd-ssl.conf file like you see below:
  
  
  
  The last thing we need to do is configure our site.  Open up the conf/extra/httpd-ssl.conf file in an editor.  You will see that there is an amazingly huge and complex site definition in there already that starts with and ends about 150 lines later with .  We need to disable this site.  If you are feeling bold, you can simply delete it.  However, I take the approach of commenting it out entirely so that I still have it as a reference, which is my recommendation as well.   Starting with the line , put a '#' at the start of every line that doesn't already have one and continue until you comment out the line.
  
  Now it is finally time for us to create the site definition for our https://secure.scribble site.  We will use some of the concepts in the example, but eliminate most of them.  Here is what mine looks like after paring down all the excess:
  

  <VirtualHost *:443>
  DocumentRoot "C:/www/scribble"
  ServerName secure.scribble:443
  SSLEngine on
  SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
  SSLCertificateFile conf/ssl/secure.scribble.cert
  SSLCertificateKeyFile conf/ssl/secure.scribble.key
  </VirtualHost>    

  
  
  In that code you can see where we are pointing to the .key and .cert files that we created above. 
  
  Now, restart your Apache server and you are now serving up securely!
  
  

I am actually creating this blog entry as a bookmark for myself, but since I know that I never remember how to do it, others might benefit as well!

One way that you can set your JAVA_HOME variable and add to your PATH, is be doing the folowing.  As 'sudo' open up /etc/bash.bashrc and add the following to the end of the file.  NOTE: Set the java path to whatever the actual path is on your environment if it does not match /usr/lib/jvm/java

JAVA_HOME=/usr/lib/jvm/java
export JAVA_HOME
PATH=$PATH:$JAVA_HOME/bin
export PATH

When you reboot, try running the following:

$ echo $JAVA_HOME
/usr/lib/jvm/java
 echo $PATH
[probably lots of paths]:/usr/lib/jvm/java/bin

I was given a problem yesterday where I needed to do the following client-side validation. If a user selects a checkbox that they wish to enable credit card transactions, I need to display a panel of specific credit card companies and they need to select at least one before submitting.

If you think about writing the JS to do this without a library it is a somewhat lengthy task. In essence, you would need to do some type of an onsubmit function on your form, check the value of the key checkbox. If it was checked, check the value of each credit card checkbox to see if the user had selected one of the children. After writing this in JQuery, I thought it might be worth demonstrating what an easy task this is.

Let's start with the specific part of my form that has my checkboxes:

<label for="RequireCCInfo">Require Credit Card Information?</label>
<input name="RequireCCInfo" id="RequireCCInfo" value="1" type="checkbox">
<div id="CreditCardCompanyPanel">
	<div>
		<input id="ccAmex" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccAmex">American Express</label>
	</div>
	<div>
		<input id="ccVisa" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccVisa">Visa</label>
	</div>
	<div>
		<input id="ccDiscover" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccDiscover">Discover</label>
	</div>
	<div>
		<input id="ccMc" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccMc">Master Card</label>						
	</div>
</div>

There is nothing too notable in all of that other than the fact that you should notice that I have added a class "ccCheckBox" to all of my dependent checkboxes. I will explain more on that in a bit, but I wanted to point out that it is there. You will also notice that I am not doing anything in the way of hiding the "CreditCardCompanyPanel" div. We need to determine at request time whether that will be hidden or not based on whether the "RequireCCInfo" checkbox is checked.

Now, here is the fun part... I am including the JS that I use for this task below:

<script language="javascript">	
(document).ready(function(){
	$("#RequireCCInfo").change(function(){
		toggleCreditCardCompanyPanel();
	}); 	
	function toggleCreditCardCompanyPanel()	{
		if ($("#RequireCCInfo").attr("checked") == true) 	$("#CreditCardCompanyPanel").show();	
		else $("#CreditCardCompanyPanel").hide();
	}
	$("#SaveButton").click(function(){
		var pass = false;
		if ($("#RequireCCInfo").attr("checked") == true){
			$(".ccCheckBox").each(function() {
               			if ($(this).attr("checked") == true) pass = true;
            		});
		}
		else pass = true;
		if (pass) $("#frmMyForm").submit();
		else alert('You must select at least on credit card company if "Require Credit Card Information" is checked.');
	}); 
	toggleCreditCardCompanyPanel();
});
</script>

First, by using the $(document).ready() function we are telling JQuery to run this JS once the DOM has been completely loaded. Let's look at each section within that ready() block...

The first thing you will see is the $("#RequireCCInfo").change() method. JQuery gives us the concept of binding a listener to an element. For our example, this listener says that anytime that an element with an ID of "RequireCCInfo" is changed, that we will run the code in its function(). You will see that anytime our "RequireCCInfo" checkbox is changed we are going to run a function called toggleCreditCardCompanyPanel(). As you can see we have that method defined immediately after our "RequireCCInfo" checkbox.

In our toggleCreditCardCompanyPanel() method, we are making the decision as to whether or not our "CreditCardCompanyPanel" will be displayed based on whether our user has decided to check the box labeled "Require Credit Card Information?". By using the JQuery selectors we are in essence saying: If a checkbox with an ID of "RequireCCInfo" is checked, display an element with the ID "CreditCardCompanyPanel". Otherwise we will hide this element.

Next comes our validation on form submit... and pretty cool stuff!

Basically I have added a listener which is bound to our submit button with the ID of "SaveButton" which will submit our form "frmMyForm". Anytime that this button is clicked, we will run the code in the function() block. We start this function by setting a value pass=false. We will use this variable to determine whether our form has passed validation. Next we get just a small taste of the magic of JQuery selectors. First, as we did in the toggleCreditCardCompanyPanel() function, we are determining if the element with the ID of "RequireCCInfo" is checked. If so, by using the each() function, we are going to loop through all elements on the page with the class "ccCheckBox" (remember that from above?). In each iteration of the loop we are going to determine if the element has been checked. If so, we are going to set pass=true since we know that our validation has passed.

Lastly, now that we have determined that our form is either going to pass/fail, we take the appropriate action. If pass==fail, we are simply going to alert a message telling the user that if they are going to enable credit cards that they have to choose at least one credit card company. Otherwise, we are going to call the submit() method on our form.

I almost took the time to write out the equivalent of this in POJS (plain old JavaScript) to show how much easier life is with JQuery, but I realized I didn't have the time, patience, or will. JQuery has spoiled me!