I decided to try to combine some css with some javascript to make a nice reusable piece to display my form messages. Here is the fruit of that labor.

The function is going to take three arguments. The first argument is a message and or list of messages. The second is the id of the node you would like to stick the message before. The last argument is a classname.

function showMessage(thismessage,location_id,classname){
// first clear showmessage div
if(document.getElementById(“showmessage”)){
var clearerror=document.getElementById(“showmessage”)
clearerror.parentNode.removeChild(clearerror)
}

The first part of the function will check to see if the div “showmessage” exists. If it does then it will remove it from the document.

// create an showmessage div
var location = document.getElementById(location_id);

We define the location so it can be used later. Below we create a new div and set the id attribute to showmessage. We then can style the div for each instance using the className. After that we create an unordered list.

With the list ready, the messages can then be put into an array. We will split the messages up in this example with a pipe “|”.  You can substitute your own delimiter.

var showmessagediv = document.createElement(“div”);
showmessagediv.setAttribute(“id”,“showmessage”);
showmessagediv.className = classname;
var showmessageul = document.createElement(“ul”);
showmessageul.setAttribute(“id”,classname+“list”);
var showmessage = new Array();
showmessage = thismessage.split(“|”);
for(i=0; i
var showmessageli = document.createElement(“li”);
var showmessagelitxt = document.createTextNode(showmessage[i]);
showmessageli.appendChild(showmessagelitxt);
showmessageul.appendChild(showmessageli);
}
showmessagediv.appendChild(showmessageul);
location.parentNode.insertBefore(showmessagediv,location);
// have to add this to display error until css corrected
}

Looping through the array, we create a new list element and insert the message. We append the message to the new list element and then append the list element to the unordered list element. When it is all done then we append the unordered list to the showmessage div. The last step of the function is to insert the new showmessage div right before the location_id.

Attached is the style I used with both the successful messages and the unsuccessfull images.

.errormsg {
clear: both;
display: block;
width: 90%;
color: #FFFFFF;
font-weight: bold;
background-color: #FF9D9D;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #FF0000;
}

.successmsg {
clear: both;
display: block;
width: 90%;
color: #333333;
font-weight: bold;
background-color: #9bc19b;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #039b03;
}

#errormsglist, #successmsglist {
margin-left: 0;
padding-left: 0;
list-style: none;
}

#errormsglist li, #successmsglist li{
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0;
}

#errormsglist li { background-image: url(/icon/exclamation.png); }

#successmsglist li { background-image: url(/icon/accept.png); }

You can modify the CSS and change the class name to what ever you wish. The only think to remember is if you style the list, to append “list” to the style.

showMessage.js
showMessage.css

exclamation.png

accept.png

By no means is this a guide for all new linux user, but just a compilation of things learned while setting up web services on a Linux box in the past.

The first step, but not always a necessary step is setting up a new user. This is the preferred way to start as the /etc/skel has been preloaded with all the necessary directories and files to get new users started. If you are going to be a system administrator and you are not familiar with the /etc/skel/, please take some time learn more information about placing files in the /etc/skel/ directory to save time setting up new users. You can put default web directory such as www or public_html plus any other files and or directories you want to give to all new users.

To setup a new user you can simply use the following command (replace username with the username you want to use)

adduser -m username

Now that you have created the account, it is best to setup a password for the account. You can assign a password to the account using the following command

passwd username

You should be prompted to enter in the new password and then confirm the password. Assume a new account needs to be setup with the username of ditto. When you run the passwd ditto command you should be prompted for the password as follows.

Changing password for user ditto.
New UNIX password:
Retype new UNIX password:

Your new account is almost ready to start putting files up for the web. One thing to pass along to new system administrators is that you have to make sure you setup the right permissions on this new account so it is strongly suggested that you do this now.

Now the path to the new account may differ depending on your server. Assume for now that new users are setup in the /home/ directory. Assuming your new user “ditto” was created successfully, the new account for ditto should be /home/ditto/. Any files in your /etc/skel/ directory would be there as well. You can check this by using the following command to change directories and list the contents of the directory

cd /home/ditto && ls

In this example we have two folders for our user ditto and they are the public_html and wwwconf directories.

To change the permissions on the users ditto directory so it can be viewed by visitors, the permissions on the ditto directory must be changed to something like 755. This can be done to just ditto directory using following command:

chmod 755 /home/ditto

If you don’t know what 755 is as far as permissions, pause this tutorial and take the time to learn about chmod and what the different permissions will do for you.

Now comes the part where many configurations likely differ depending on what you have installed to run on your server. This tutorial opts to save a core httpd related .conf file in one httpd directory (conf.d) and then from there look for more .conf files in the user directory called wwwconf/. This setup is not the only one possibility in the universe and if you have an older setup or wish to do it differently that is your choice.

You can start your .conf file by copying a current one or creating a new one in your httpd/conf.d/ directory. This tutorial will assume that directory is located at /etc/httpd/conf.d/. Creat your new .conf file in vi or vim by using the following command.

sudo vim web.ditto.com.conf

This is going to be the core configuration file for your virtualhost. You will need to start the virtualhost using the tag:

<VirtualHost *:80>

The VirutalHost directive is used to enclose a group of directives which will apply only to a particular virtual host. Inside this directive you will put all the information pertaining to your site. You can put the email address to your ServerAdmin, the absolute path to the Document Root, the ServerName and any ServerAlias

ServerAdmin webmaster@localhost
Documentroot /home/ditto/public_html/
ServerName www.ditto.com
ServerAlias ditto.com

Now it is necessary to give Apache some directives that will apply to our public_html directory. To do this you will create another node inside the VirtualHost node named Directory. The Directory node here is used to enclose a group of directives which will apply only to the named directory and sub-directories of that directory (in this case the public_html directory).

<Directory /home/ditto/public_html>
Options ExecCGI FollowSymLinks +Includes
</Directory>

This tells Apache that the execution of CGI scripts is permitted, the server will follow symbolic links in this directory, and that server-side includes are permitted.

You will also like to have some type of error log as is very useful when troubleshooting an issue on the box, so be sure to include the following code for error logging. You can access the logs in your httpd/logs directory

ErrorLog logs/ditto.error
CustomLog logs/ditto.log combined

Now for the customized part. In order to let the user create their own Directory options another Directory directive is created that will point to a folder where other options/modifications can be made by the account user.

<Directory /home/ditto/wwwconf>
AllowOverride All
</Directory>

What this does is allows ditto to ftp or ssh into the box and create a .conf file with their own directives and options in the wwwconf/ directory. The directive inside the above tag says any directive which has the .htaccess context is allowed in .htaccess files. After this tag is closed, it can be followed up with

Include /home/ditto/wwwconf/*.conf

which tells Apache to grab any file with .conf in the wwwconf/ directory of ditto (if you didn’t know it already, the “*” is a wildcard here).

That should do it. You can now put an end to your VirtualHost node (if you have not already) and your end result should look something like

<VirtualHost *:80>
ServerAdmin webmaster@localhost
Documentroot /home/ditto/public_html/
ServerName www.ditto.com
ServerAlias ditto.com
<Directory /home/ditto/public_html>
Options ExecCGI FollowSymLinks +Includes
</Directory>
ErrorLog logs/ditto.error
CustomLog logs/ditto.log combined
<Directory /home/ditto/wwwconf>
AllowOverride All
</Directory>
Include /home/ditto/wwwconf/*.conf
</VirtualHost>

You can now save this in the httpd/conf.d/ folder. Now if you want to add a mod re-wite or make a password protected directory in public_html, you can add a .conf file to the wwwconf directory and save my changes there. There is still one more command to use in order for all of this to work and that is the command to restart the httpd service. This can be done very easily using the following command.

service httpd restart

If you are running on an older system, this command may not be recognized. In those cases you should be able to use

/etc/init.d/httpd restart

Assuming you didn’t get any errors when you restarted the httpd service your web service should now be working. If you get an error, be sure to address it right away. Most common issues are invalid paths in the <Directory> tags or missing directories that the <Directory> tags are directed too.

Hopefully this tutorial was helpful to at least one user out there. This tutorial will be followed up next by a tutorial that will help you setup subdomains, create password protected directories and create mod rewrites.

My email was being returned with the reason: 550 Banned rcpt apache@localhost.localdomain. There was also another error 554 5.0.0 Service unavailable. Both of these errors on their own were not to helpful. I asked a friend (the one who sold me the box) to help and he gave me some good advice, but I was unable to resolve the issue and several Google searches didn’t reveal any solution.

I checked the maillog in /var/log/ and found that the mail was being sent internally, but I have to use my ISP mail server to actually deliver the messages and this was not happening. The error I found in the mail log that helped was “stat=Deferred: Temporary AUTH failure”. I was able to find the resolution to the issue right on the Sendmail.org site.

I use my sendmail as a client and up until last week I never had any issue with the setup I was using. I am still not sure if I began having an issue with sendmail because it was updated or if it was just my ISP found the security issue with the way I was using it, but eithr way, it stopped working correctly.

Here is the error:

----- The following addresses had permanent fatal errors -----
<apache@localhost.localdomain>
(reason: 550 Banned rcpt apache@localhost.localdomain *@localhost.localdomain)

----- Transcript of session follows -----
... while talking to mail.cableone.net.:
>>> RCPT To:<apache@localhost.localdomain>
<<< 550 Banned rcpt apache@localhost.localdomain *@localhost.localdomain
550 5.1.1 <apache@localhost.localdomain>... User unknown

Final-Recipient: RFC822; apache@localhost.localdomain
Action: failed
Status: 5.1.1
Remote-MTA: DNS; mail.cableone.net
Diagnostic-Code: SMTP; 550 Banned rcpt apache@localhost.localdomain *@localhost.localdomain
Last-Attempt-Date: Mon, 18 Aug 2008 21:45:23 -0500

---------- Forwarded message ----------
From: Mail Delivery Subsystem <MAILER-DAEMON>
To: <apache@localhost.localdomain>
Date: Mon, 18 Aug 2008 20:45:31 -0500
Subject: Returned mail: see transcript for details
----- The following addresses had permanent fatal errors -----
<support@cityofdilworth.com>
(reason: 550 Banned from (apache@localhost.localdomain) (*@localhost.localdomain))

----- Transcript of session follows -----
... while talking to mail.cableone.net.:
>>> MAIL From:<apache@localhost.localdomain> SIZE=1521
<<< 550 Banned from (apache@localhost.localdomain) (*@localhost.localdomain)
554 5.0.0 Service unavailable

Final-Recipient: RFC822; support@cityofdilworth.com
Action: failed
Status: 5.0.0
Diagnostic-Code: SMTP; 550 Banned from (apache@localhost.localdomain) (*@localhost.localdomain)
Last-Attempt-Date: Mon, 18 Aug 2008 20:45:31 -0500

---------- Forwarded message ----------

To resolve the issue, simply follow the instructions to setup SMTP AUTH that were provided by Benji Fisher. To start, log onto your machine as root.

1. Change directory to where your sendmail configuration files (sendmail.mc and sendmail.cf) are located, usually /etc/mail/
2. Create a safe subdirectory (suggested name auth/):# mkdir auth
# chmod 700 auth
3. Create a file with your authentication information (suggested name auth/client-info):
   AuthInfo:your.isp.net "U:root" "I:user" "P:password"

   filling in your ISP’s mail server, your user name, and your password. (Note: Earthlink, and perhaps other ISP’s, requires your full e-mail address as a user name.)

4. Generate the authentication database and make both files readable only by root:
   # cd auth
# makemap hash client-info < client-info
# chmod 600 client-info*
# cd ..
5. Add the following lines to your sendmail.mc file, filling in your ISP’s mail server:define(`SMART_HOST',`your.isp.net')dnl
define(`confAUTH_MECHANISMS', `EXTERNAL GSSAPI DIGEST-MD5 CRAM-MD5 LOGIN PLAIN')dnl
FEATURE(`authinfo',`hash /etc/mail/auth/client-info')dnl
6. Generate sendmail.cf:# m4 sendmail.mc > sendmail.cf
7. Restart the sendmail daemon, e.g., (this depends on your OS):# service sendmail restart or # /etc/init.d/sendmail restart

That should take care of the issue!

To save some time, I will explain the javascript and how to call it. You can grab the css from the example page.

<script type="text/javascript">
<!--//

// function to change the background and border of listing on mouse over
function highlight_listing(id) {
if(id != 1) { //this is what to do for all divs other then first one
id_above = id - 1;
listing_el = document.getElementById("listing"+id);
listing_above_el = document.getElementById("listing"+id_above);
listing_above_el.style.border = "#ffffff 2px solid"; // removes border on result above highlighted
listing_el.style.backgroundColor = "#edfcd3";
listing_el.style.border = "#99cc33 2px solid";
}

else {
listing_el = document.getElementById("listing"+id);
listing_el.style.backgroundColor = "#edfcd3";
listing_el.style.border = "#99cc33 2px solid";
}
}

function listing(id) {
if(id != 1) {
id_above = id - 1;
listing_el = document.getElementById("listing"+id);
listing_above_el = document.getElementById("listing"+id_above);
listing_above_el.style.borderBottom = "#cccccc 2px dotted"; //restores border to result above highlighted
listing_el.style.backgroundColor = "#ffffff";
listing_el.style.border = "#ffffff 2px solid";
listing_el.style.borderBottom = "#cccccc 2px dotted";
}
else {
listing_el = document.getElementById("listing"+id);
listing_el.style.backgroundColor = "#ffffff";
listing_el.style.border = "#ffffff 2px solid";
listing_el.style.borderBottom = "#cccccc 2px dotted";
}
}
//-->
</script>

The HTML can be spit through some query or loop and is straight forward.

<div id="listing1" class="listing" onmouseover="javascript:highlight_listing('1');" onmouseout="javascript:listing('1');">
<div id="listing_top">
<span class="left">
<a href="javascript:void(0);" title="121 Initech Rd">121 Initech Rd</a>
</span>
</div>
<div id="listing_left">
<a href="javascript:void(0);" title="121 Initech Rd"><img src="images/inventory/thumbs/0/0/0/000976.jpg" alt="121 Initech Rd" class="displayed" width="151" /></a>
2.00 bed 3.00 bath 1296 sqft<br />
Lake Home<br />
Listing: 08-1979
</div>
<div id="listing_right"><span class="large_price">$198699</span> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</div>
<div class="clear"></div>
</div>

<div id="listing2" class="listing" onmouseover="javascript:highlight_listing('2');" onmouseout="javascript:listing('2');">
<div id="listing_top">
<span class="left">
<a href="javascript:void(0);" title="121 Initech Rd">121 Initech Rd</a>
</span>
</div>
<div id="listing_left">
<a href="javascript:void(0);" title="121 Initech Rd"><img src="images/inventory/thumbs/0/0/0/000976.jpg" alt="121 Initech Rd" class="displayed" width="151" /></a>
2.00 bed 3.00 bath 1296 sqft<br />
Lake Home<br />
Listing: 08-1979
</div>
<div id="listing_right"><span class="large_price">$198699</span> His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</div>
<div class="clear"></div>
</div>

This can be completed repeated and by dynamically changing the value i you can populate the results so that

<div id="listingi” class=”listing” onmouseover=”javascript:highlight_listing(’i‘);” onmouseout=”javascript:listing(’i‘);”>

You can see the finished product here.

I ran into this template that I liked, but wanted to change the header image. I changed it, uploaded it and refreshed the page, but NOTHING changed. I spent a good 5 minutes on this before checking the css to see what was going on. Instead of finding a path to an image in the css for the background, I found a path to a file named rotate.php. The script was written by Matt Mullenweg (http://photomatt.net/scripts/randomimage) and seemed simple enough to me. What I liked about this script is that it didn’t require managing a bunch of images. If you want an image you simply stick it in a predefined directory and point to that directory.

I decided to rewrite this in coldfusion and within a few minutes I had a working. It is rather simple. Define your folder, define your extensions and define the url path to the folder and you are done. You will find the code below.


<cftry>
<!—
created by Andrew Alba >> http://www.albawebstudio.com
This will grab images from specified folder and randomly display them
You will only need to modify the three variables below
—>

<!— Insert the absolute path (with trailing slash) to the images.
“/home/mysite/public_html/images/” or “/www/mysite/web/images/random/”
If the images are in the same directory as
this script you can leave it as shown file
—>


<cfset folder = “#GetDirectoryFromPath(GetBaseTemplatePath())#”>

<!— List of allowed extensions (separate with space) —>
<cfset ext = “jpg jpeg png gif”>

<!— Insert the URL to the folder that contains the images —>
<cfset url_image_path = “http://www.homeshq.com/gfx/promotion/”>


<!— do not edit below this point —>
<!— lets get the contents of the folder —>
<cfdirectory directory=“#folder#” action=“list” name=“filelisting”>

<!— pull just file names out of the list —>
<cfset fileList = “”>
<cfoutput query=“filelisting”>
<cfif filelisting.type is “file”>
<cfset fileList = listappend(fileList,filelisting.name)>
</cfif>
</cfoutput>


<!— now we can create a new list of files —>
<cfset new_fileList = “”>
<cfloop list=“#fileList#” index=“i” delimiters=“,”>
<!— lets use our list of extensions to
weed out the files types we don’t want —>
<!— now we grab just the extension —>

<cfset file_ext = listlast(i,“.”)>
<!— if it finds file_ext is acceptable as per
ext then it adds it to the array —>
<cfif listfindnocase(ext,file_ext,” “)>
<cfset new_fileList = listappend(new_fileList,i)>
</cfif>
</cfloop>

<!— now to choose random number from the list —>
<cfset image_file =
listgetat(new_fileList,randrange(1,listlen(new_fileList),“SHA1PRNG”),“,”)>

<cflocation
url=“#url_image_path##image_file#?rand=#randrange(1,999999999,”SHA1PRNG“)#”
addtoken=“no”>

<cfcatch type=“any”></cfcatch>
</cftry>


Notice how we handle the email value checking first to see if it is empty to trigger an error and then using the logical operator OR (denoted as ||), we then look at another statement. In that statement we use the logical operator AND (denoted as &&) to trigger an error, and if both the email filed is not empty and the emailfilter.test is not valid then we do what is in between the curly brackets again. The contents are the same as what we described in the first statement.

The phone is very similar to the email, but nothing is done if no phone number is entered.

The subject is a handled a little differently as it is part of a select element. You will notice that the format in the IF statement changes to read the chosen value. Giving the default a value=”" allows the application to recognize when no subject is selected.

So now that the script is done, the only thing left is providing a place to display the error. The div/span can be placed where ever you want the error to be displayed. The error will only be displayed when triggered by the javascript.

<span id=“error_msg” class=“errormssg”> </span>

The trick here is when the id error_message style is defined. The key will be to make the class display none. The javascript will trigger the error to be visible (by changing display:block;) and then the error can be changed back by simply changing the style for id=”error_msg” display:block.

So lets take a look at the finished project. You can view and copy the finished product here.

Now depending on what type of data you are passing to the server with your form, you will often need to also validate your fields data on the server too. This tutorial will only look at the client side validation, leaving server side validation to another tutorial at some other time.

Lets first start with our form. We are going to do a simple form that just asks for name, email address, optional phone number, a select list for subject and text area for message. Oh, I always forget, we need a submit and clear button too. Lets start it all of with our form tag.

The form tag <form> will typically have the standard attributes of a method (get or post) and some sort of action. I often use AJAX to process my forms so the action may simply be action=”#” or action =”javascript:void();”. Knowing that we will be validating this form we are going to add one more attribute to the form element to validate the form when it is submitted and it is obviously called onsubmit. Here is the tag we will be using.

If you look what is inside the onsubmit attribute, it is pretty straight forward, we want to return the result of the javascript function we are going to create called validateForm() so that if it is true the form will will submit and if it is false it will not send.

Next we are going to just briefly go over the other form elements. There are several other elements, but for todays tutorial we are only going to use the <input>, <select> and <textarea> elements. The one thing to remember whenever using these elements is they should always have a name and id attribute and the input element should have a type attribute as well. Here is a an example of one of the input elements (for email) and our select and textarea elements.

The first thing we did was declare that we were going to use javascript by using the <script> tag. We then defined the function validateForm() which will have no values passed to it and use the curly brackets to hold our statements for the function.

Two regular expressions (regex) are then defined which will be used for validatig the email address and the pone number. I have created these two regex items, but you can find about any regex you could imagine at http://www.regexlib.com.

The next steps are going to be repeated in slightly different ways, so we will discuss them here in a little more detail. The first statement starts with the IF statement where we check to see if what is inside the () is true. If the statement is true it continues to process what is in the curly brackets.

The text on the right hand side of the first statement replaces the childNodes.data of the element with id=”error_message”. This is followed by style change of the element, in this example we change display:none to display:block.

To make it less confusing for the user, the next statement focuses the cursor back in the input field with id =”name”.  The last item in the IF statement is return false which will stop the form from processing. The IF statement is then closed with the end curly bracket.

 To be continued.