About Pablo Varando

Software engineer with over two decades of experience in building real-world enterprise level applications. Extensive experience in integrations (at Oracle, Vurv/Recruitmax, Taleo, Cosential, Inc. and Currently with WebstaurantStore.Com)... Over a decade and a half of team management, project management and sales experience compliment my technical side to make an overall powerhouse team player that puts in 100% effort at all times! Specialties: Software Development, Web development, Graphic Design, Server and Hardware experience, project management, Sales Experience. I have experience in languages such as: Web/Software Development: ColdFusion - 20+ Years (Served on Team Macromedia and Team Adobe For Many Years) C# - 10+ Years Java - 10+ Years Angular - 3 Years Node.JS - 3+ Years jQuery - 5+ Years Native JavaScript (Non-Framework driven) - 15+ Years Database Development and Management: T-SQL - 15+ Years DBA - 10+ Years Graphic/UI: CSS - 10+ Years Graphic Design (Photoshop, Illustrator) - 20+ Years UX/UI - 5+ Years Mobile Development: Swift / Objective C (iOS) - 5+ Years Java (Android) - 5+ Years Cordova - 6+ Years Angular - 3 Years

One Form with multiple submit buttons with ColdFusion!

You can access all the files for this tutorial by going to the GIT repository for this tutorial at:
https://bitbucket.org/easycfm/tutorials/src/master/form-multiple-submits-example/

A user of the EasyCFM Facebook Page requested we create an example of handling multiple submit buttons with ColdFusion. This tutorial will walk you through how to create a web form that requests multiple pieces of data and then depending on which button the user clicked; process specific items from the form accordingly.

Step 1. Create the form page that will allow users to select a file to upload from their machine and display two buttons to tell the system what to do with it!

For this example we will begin with a Bootstrap html page skeleton. We can save this as “form-example.cfm” in the root of your ColdFusion site.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Form Buttons Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

The example above is basically a clean canvas bootstrap html page saved as a ColdFusion template that we will begin to build the form into. I opted to include bootstrap so you could see that you can handle a ColdFusion page like an HTML page. When all the ColdFusion tags and logic is finished processing, that you are left with is basically HTML so by including the bootstrap content inside of it it will end up displaying to the user as an HTML page with bootsrap and jquery capabilities. Pretty neat, huh?

So the next thing that we need to do is create a form that will contain multiple form buttons within it. The buttons will each do something different; and we can determine that one of two ways.

The easiest method is to name all the submit buttons that same name, but each will contain a different value. So on the processing page (what happens when you submit the form) we can write logic to check the field and see which one you pressed based on the value. (Note: The other method is to name the fields differently and then change your logic to process if a particular field exists, but that gets more complicated.. so let’s go with the simplest solution!)

So let’s get that logic in place… In between your <body> and </body> tag, we will insert the following code (this is the form):

<form method="post" action="form-example-process.cfm" enctype="multipart/form-data">
    <table class="table table-striped">
        <tr>
           <th>File</th>
           <th colspan="2">Select what you'd like to do with it!</th>
        </tr>
        <tr>
            <td>
               <input type="file" name="uploadFile" />
            </td>
            <td>
              <input type="submit" name="whatToDoWithFile" value="Upload File To Server" />
           </td>
           <td>
              <input type="submit" name="whatToDoWithFile" value="Upload File To Server and Email It To SiteAdmin" />
           </td>
        </tr>
    </table>
 </form>

If you placed the code in the proper place, which I am confident you did! Your code should look something very similar to this:

Now let’s break down what we actually did… the code above basically will create a web form with a file selection input (this allows the user to select a file on their local machine to upload to your site) and two buttons that trigger the upload and then based on user selection will either send the file in an email or not the site administrator! We accomplish this with the submit buttons. We will break that down in a few….

Note: The form tag has an added attribute “enctype=”multipart/form-data”” which basically tells the server that you will be sending files along with your request and not just data/strings. You can learn more on <form> tags here.

If you open the file in your browser now, you will see something similar to this:

Graphic 1.2 – Let’s see what the form looks like on a browser!

See… creating forms is easy…. you got this! The next part is to tell ColdFusion what to do with the form fields from the form (i.e. the file being uploaded and what you want it to do based on the submit button pressed).

It really sounds more complicated then it really is… trust me… 🙂 you have now completed the form page. The next thing you need to create is the form process page. You defined what that would be in your <form> tag with the action attribute as shown below:

Graphic 1.3 – Where is this form sending the data to anyway? Let’s check!

Step 2. Let’s create a processing page that will do something with the form submission data! This is the ColdFusion Part! Exciting!

So you now need to create a file called “form-example-process.cfm“. and save it in the same folder you saved the “form-example.cfm” file. Now because this is a processing page, we do not need to create a Bootstrap skeleton HTML page. This page will simply process what you are asking it to do and then send you somewhere else, so the users will never see it so no display is needed!

<cfif structKeyExists(form, 'fieldnames') AND structKeyExists(form, 'whatToDoWithFile') AND structKeyExists(form, 'uploadFile')>

   <!--- This code will only run when a form is submitted to this page, and when the variable "whatToDoWithFile" and "UploadFile" exists --->
   <!--- 
              ToDo: This is where we will put in the ColdFusion that will handle the processing   
   --->

</cfif>

So now… let’s break down what will be expected for this page to run correctly. The page expects for a form to be submitted to it… now ColdFusion can talk to these variables and do things with them… The first thing the page does is to check if three form variables exist. Form.FieldNames, Form.whatToDoWithFile, and Form.uploadFile.

We achieve this with the following code:

<cfif structKeyExists(form, 'fieldnames') AND structKeyExists(form, 'whatToDoWithFile') AND StructKeyExists(form, 'uploadFile')>
StructKeyExists() is a ColdFusion function that is native to ColdFusion. It's sole purpose is to check if the form structure contains a particular field. You can read more on it here: https://cfdocs.org/structkeyexists

If those three form fields exist, then we know we can do something with this form. But let’s talk a little about the fields and how/why they exist.

Form.Fieldnames = This is an automatic variable that will be created by ColdFusion of all the form fields being passed in. This gets generated anytime form fields are submitted to a ColdFusion file and contain all the fields available. We can use this as a way to ensure that an actual form was submitted and that the page wasn’t called directly in a browser!
Form.uploadFile = This is a form variable that contains the actual file that was uploaded to the server.
Form.whatToDoWithFile = This is the form submit button that was pressed by the user. There are two forms on the page with the same name, however only the one you click will be sent along with the request and that’s why we can know exactly what the user intended to do. Does that make sense?

Ok, you now get the idea of how it works… so what do we do on the ColdFusion side to handle this upload? and possibly email the file? Let’s talk through it!

Right under the ToDo comment in the processing page, let’s add some actual ColdFusion code.

<cfif form.whatToDoWithFile EQ "Upload File To Server">
    <!--- here we will upload the file to the uploads folder only --->
    <cffile action="upload" filefield="uploadFile" destination="#expandPath('/uploads/')#" nameconflict="makeunique" />
    <cfset uploadedFileName = cffile.serverfile />

    <!--- That's it... this processing is done now let's redirect the user back to the display page --->
    <cflocation url="form-example.cfm?actionCompleted=UploadedFile" addtoken="false" />
            
<cfelseif form.whatToDoWithFile EQ "Upload File To Server and Email It To SiteAdmin">
    <!--- here we will upload the file to the email folder and then email the file to the user --->
    <cffile action="upload" filefield="uploadFile" destination="#expandPath('/emails/')#" nameconflict="makeunique" />
    <cfset uploadedFileName = cffile.serverfile />

    <!--- Now let's send an email with the file as an attachment --->
    <cfmail from="uploads@mysite.com" to="administrator@mysite.com" subject="A User Uploaded A File For You!">
        <cfmailparam file="#expandPath('/emails/' & uploadedFileName )#" />
    </cfmail>
            
    <!--- That's it... this processing is done now let's redirect the user back to the display page --->
    <cflocation url="form-example.cfm?actionCompleted=EmailedFile" addtoken="false" />
<cfelse>
    <!--- Since no button matched what we wanted to do, just redirect back to the main page with an error --->
    <cflocation url="form-example.cfm?actionCompleted=Nothing" addtoken="false" />
</cfif>

That was a lot of code… I know it seems like that.. but let’s break it down and walk through it… It’ll make sense shortly!

The first thing we do is check to see if the button that the user clicked was “Upload File To Server”. If they did, then this piece of code will execute and do what you tell it to do. So let’s break that code down:

The first thing we did is call CFFILE with an action of Upload. This tells ColdFusion that the user is uploading a file to the server and then what it should do with that file. There are two additional attributes set on the tag which are destination (where should the file be placed?) and nameconflict (if the file already exists on the server, what should ColdFusion do with it!)

Then the next thing it does is to create a variable and give it a name of “uploadedFileName” and assign to that variable a value of the name of the file being saved on the server. This is important because the name on the server could be different then the name of the file on the users machine. The nameconflict attribute for example says makeunique so if that file already existed (say the user uploaded it twice) then the second time around it would give it a unique name and you’d want to know that the name of the file on the server is changed to something else. Make sense?

Now, the file is uploaded, next we will redirect the user back to the form page (form-example.cfm) and we will pass a URL variable named “actionCompleted” to that page telling it what we did!

Now, if the user didn’t click that button, but they instead clicked the button that said “Upload File To Server and Email It To SiteAdmin” then that code above would be ignored at processing and the logic would then run for the second block of the check because the value of that field matches this one and not the other one! Make sense?

Now, in this area, we have to upload the file and then email the file to the system administrator.. so there is more code to do, but let’s walk through it!

The first two lines will look very similar to the previous example.. It’s a CFFILE that uploads and then we set the uploadedFileName variable. The only thing that is different is that in the destination for this one it will upload to a folder named “emails” and the previous one uploaded the files to a folder named “uploads”. As you can see below:

Note: We did two folders so you can keep your files in different places on your site and know which ones came from uploads and which ones were sent to the system administrator! That would give you easier cleanup capabilities later on! (Thinking about ways to simplify maintenance later as you create things will help you later keeping your site more efficient!)

The next thing this code will do is send out an email using the <cfmail> tag. The cfmail tag has 3 attributes on it.
– from = This is the email address used in the from at send time. (if the recipient replies it would go to this! For example we will hard code it; however in a realistic setting you might as the user for their email address in a field field and put that in that location so they can respond accordingly.
– to = This is who will receive the email (the system administrator!)
– subject = This is the subject of the email being sent.

Inside the <cfmail> tags, you have a cfmailparam tag. This tag basically tells cfmail that you are wanting to attach a file to the email going out and where the file is located.

Last, we simply redirect the user like we did in the previous example, however the actionCompleted value will be different (so we can differentiate it later).

Last, if neither of the button values match the two checks, then we can assume a button with that name was submitted to the page but it did not have one of our desired actions; so therefore we will simply redirect the user back to the “form-example.cfm” page with an actionCompleted value of “Nothing”.

That is almost it… you’re almost done! So what do we have left to do now? Well remember that we are redirecting users back to the form page with a url variable that will tell them what the system did.. So we have to create some type of confirmation message to the user telling them what was done. So let’s open up the “form-example.cfm” page again from step 1.

Right before the <form> tag you will need to add the following block of code:

<cfif structKeyExists(URL, 'actionCompleted')>
    <div class="alert">
        <cfif url.actionCompleted EQ "UploadedFile">
            Your file was successfully uploaded!
        <cfelseif url.actionCompleted EQ "EmailedFile">
            Your file was successfully uploaded and email to the system administrator!
        <cfelseif url.actionCompleted EQ "Nothing">
            Nothing was done, just letting you know!
        </cfif>
    </div>
</cfif>

When you are done, your page should look something similar to this:

Basically, what we did here is check to see if when this page loads there is a URL variable named “actionCompleted” and if it exists, then display an alert window at the top of the page with a predefined message based on the action taken on the processing page. An example of this would look like this “This example shows you what would be shown after the user uploads and sends an email to the system administrator”.

And that’s it! You now have a single form that contains multiple buttons and processed differently in the back-end with ColdFusion based on what the user clicked.

if you run into problems or need further help let us know. We’re here to help!

You can access all the files for this tutorial by going to the GIT repository for this tutorial at:
https://bitbucket.org/easycfm/tutorials/src/master/form-multiple-submits-example/

Installing ColdFusion 2018 with IIS on Windows 10 Pro

If you’re new to ColdFusion, the biggest challenge most individuals have is getting ColdFusion setup and running on their local machine. This tutorial will walk you through the process and get you to the point that you can begin your development journey.

When this tutorial is finished, you will have IIS running on your Windows machine and ColdFusion installed and configured to process your ColdFusion Development code.

First things first… let’s get IIS installed. (what is IIS? IIS is Microsoft Internet Information Services – Basically the Web Server that will serve your content over the web (or port 80).

Note: if you already have IIS, you can skip this step and go to Step 2. To see if you already have IIS installed, do this:

Step 1. Check and/or Install IIS on your local machine.

Click Start (the little windows icon on the lower left) > and type “IIS”. If you see the screen below and no application, then you do not.

Graphic 1.0 – Check for existence of IIS on the local machine.

If you see the screen above, then you do not have IIS, so we will need to get it installed. So let’s clear out the IIS text you entered and replace it with programs as you see below and click on the “Add or Remove Programs” option at the top of the list:

Graphic 1.1 – Access Add & Remove Programs

Next, let’s scroll all the way to the bottom of the screen in the window and click on the Programs and Features option as seen below:

Graphic 1.2 – Access Programs & Features.

That will low a new window, on the left side of the window you will see “Turn Windows features on or off”. Click that!

Graphic 1.3 – Turn on Windows Features on or off.

Now you are the area of Windows that allows you to install additional features into your machine… the option you are looking for is Internet Information Services (or IIS).

Graphic 1.4 – Install Internet Information Services (part 1)

If you expand that option you will see 3 sub-items under it.

Graphic 1.5 – Install Internet Information Services (part 2)

For the purposes of this tutorial you need to expand the Web Management Tools and World Wide Services and select all the options inside of them as follows:

Graphic 1.6 – Install Internet Information Services (part 3)

Then click on “OK” it will go through all the things it needs (if might prompt you to use Windows Update to download files needed, let it). When it’s all finished close all the windows and go back to the desktop. Then click start and type in IIS (like we did when we started this) and now you should see IIS as an application on the machine. (see below). That means it’s installed and ready to go (all it needs now is ColdFusion!)

Graphic 1.7 – Confirm IIS is now installed on your machine.

Step 2. Download ColdFusion 2018

Next you have to get a copy of ColdFusion. You have two options for this.
1. Download the Latest Version of ColdFusion from Adobe’s Website.
2. You can download ColdFusion (current or older version) from CFMLREPO
(as outlined in this tutorial)

For the purpose of this tutorial, we will be going to Adobe’s website (keep in mind that they change their site all the time, so it might change since this tutorial was created. Just go and download the latest version of ColdFusion). In your browser go to: https://www.adobe.com/products/coldfusion-family.html

On their site, click on “Free Trial” as outlined below, this will take you

Graphic 2.0 – Navigate to Adobe’s website and download ColdFusion Trial.

This will take you to a registration screen, fill out all the details necessary. There is an option that asks what version of ColdFusion you want to download. For the purposes of this tutorial we will select Windows 64 Bit English. (but you’re free to select a different option if one suits your needs better).

Graphic 2.1 – What version of ColdFusion would you like to download?

Then when you’re done at the bottom of the page click the download button. This will download the ColdFusion installation file. (keep in mind that the file is pretty large.. 900+MB so it might take a bit! Go get a coffee and a donut and come back!)…

Step 3. Install ColdFusion 2018

Double-Click on the ColdFusion installation file. This will prompt you to allow administrator access as seen below:

Graphic 3.0 – Launch the installer and grant administrator access

Click Yes, then let the installation software get situated:

Let the installer run to 100%…. that will load the ColdFusion installation wizard on the right.

Graphic 3.1 – Installation Begins

Accept the terms of the software and click Next.

Graphic 3.2 – Licensing Agreement

Next, comes the licensing screen… here for development you can select either the 30 day trial (this is a 30 day enterprise license) or you can select the developer edition. The difference between the two at a high level is the number of requests you can do to the local server from different visitor ip’s. Since you are installing on a local development machine the Developer edition would be just fine.

Graphic 3.3 – Serial Number / Installation Type

Next screen, let’s select Server Configuration and click Next.

Graphic 3.4 – Server Configuration

Next, let’s select a server profile. For development machine select “Development Profile” and click Next.

Graphic 3.5 – ColdFusion Server Profile

Next, select the sub-components.. When i am working on a local development environment I tend to leave them all on (as I don’t know what I’ll need later, but in production you’d only install what is absolutely necessary). For the purposes of this tutorial, leave all the options checked and click Next.

Graphic 3.6 – Sub-Components Installation

Next, screen will ask you for remote component credentials. the default username is “admin”. You can change it if you’d like or leave it as is… then enter and confirm your password. Then click next.

Graphic 3.7 – Remote Component Administrator Credentials

For the next screen, this defines if you would like to access services remotely… since this is a development environment leave it off and click Next.

Graphic 3.8 – Add-On Services Remotely

Next, the wizard wishes to know where to actually install ColdFusion on your machine. The default path is fine.

Graphic 3.9 – Installation Path

The next screen asks on what port do you want the built-in ColdFusion server to run on.. the default is 8500. You can leave this setting as is, unless you have something else running on that port already. Then click Next.

Graphic 3.10 – Built-In Web Server Port Number

The next screen is for performance monitoring tools… You can leave the value local to your development environment or put localhost or 127.0.0.1. Then click Next.

Graphic 3.11 – Performance Monitoring Toolset

The next screen will prompt you to enter in the ColdFusion administrator password. Make this something you will remember as you will use this area quite a bit in your development. This is the administration area where you connect databases, configure mappings, turn on debug and more… Type in and confirm your password and click Next.

Graphic 3.12 – Administrator Password

The next screen will prompt you for a password for RDS. This is ColdFusion’s Remote Development System. Basically ColdFusion gives you the ability to connect behind the scenes with your coding editor to get live database connections and server settings. I will be discussing this in a later tutorial, but for now enter in a password (same or different as before) and click Next.

Graphic 3.13 – RDS Configuration

After you’re done with that, next the installer will ask is if you’d like to turn on server updates. I usually leave it on and click Next.

Graphic 3.14 – Server Updates

That gets us to the final screen in the installer which will show you all the things you defined… double check them and click “Install”.

Graphic 3.15 – Installation Summary

Let the installer do it’s thing (another Donut?) Note that you might get prompted to allow Java access, if you do then click “Allow Access”

Graphic 3.16 – Windows Security Alert – Grant Access

When it’s done it will bring up a screen to tell you it’s done.

Graphic 3.17 – Completion Screen

Click on Done, it should open a browser window that will take you to the ColdFusion administrator. If it does not, open up your web browser and go to: http://127.0.0.1:8500/CFIDE/administrator/index.cfm

When the browser page loads, it will prompt you for a password that you entered in Graphic 3.12 above. Type the password in and click “login”.

Graphic 3.18 – ColdFusion Administration Migration Wizard Screen.

Let it do it’s thing for a bit… then you will see this screen:

Graphic 3.19 – and… we… are… finished…

Step 4. Configure ColdFusion to Talk to IIS

We have everything installed… next we need to configure the connectors so ColdFusion runs under IIS. To do this, click start and expand the Adobe folder. Then open the “Web Server Configuration Tool” as seen below.

Graphic 4.1 – ColdFusion – Web Server Configuration Tool

You will see a window like the one below; which basically states that nothing is configured yet. Click on the “add” button.

Graphic 4.2 – No Configured Web Servers

The following window outlines you are wanting to configure your localhost machine, using the IIS server. No need to change anything, just click “OK”.

Graphic 4.3 – Web Server Configuration for IIS

The configuration screen will prompt you that it will need to restart IIS. Click Yes.

Graphic 4.4 – Confirm you are ok with IIS being restarted.

When it’s done, you will see the same window as before, but this time it will show you that IIS is configured to run ColdFusion.

Graphic 4.5 – Confirmation that it worked and that IIS is configured to run ColdFusion.

Step 5. Testing that it works…

To test that everything worked, let’s create a simple ColdFusion template called “test.cfm” and save it to C:\inetpub\wwwroot\

<cfset isThisWorking = "Yes, It's Working!" />
<cfoutput>
    #isThisWorking#
</cfoutput>

Now in a browser, go to: http://127.0.0.1/test.cfm (if it all worked, you should see this)

Graphic 4.6 – It Worked, Woot!

And that concludes this tutorial… if you run into problems or need further help let us know.

Welcome to the exciting world of ColdFusion and soon you will be building some amazing things! We look forward to seeing them!

Download, Every, CFML Version.. Ever!

Once of the big things I am always asked online is by most beginners is.. where can I find a ColdFusion Installation (free or near free)…. I then explain that to develop locally you can use Adobe’s ColdFusion or other flavors like Luceeor Railo… Most of us usually begin with Adobe (because it’s the easiest to install and get going, but in some cases especially in production many choose other platforms that do, basically, the same thing!

Note: My next post will walk through getting CF installed and take you step by step... so hang tight for that... it's coming soon!

Now most individuals that are starting out have no clue what they want to run… and that’s fine.. when you’re starting out you just want to get it installed and running….so you can start the fun part, coding! I was the same way in the beginning…. so I usually point them to Adobe… and help them when they run into issues….. However did you know that there is an online solution that has, every install released (versioned, and ready to download?) … Say Hello, to CFML Repo….

The site currently leverages Google Drive… and shows you the following:

You can access Railo, Lucee, Adobe ColdFusion and VM’s and IDEs….. so that’s pretty neat… and useful…. So that’s it… pretty simple… very convenient and a great resource to get your installs (when you can’t find them anywhere else!)

Calling all CFers…. Let’s make history…. Again!

Wanna help? Let us know!

Over the next few weeks I am going to be working through about 80 tutorials to teach ColdFusion again… from the ground.. up…. everything from 101 (output) to using Web Sockets and Mobile Interfaces, Printing and Spreadsheets and more!

Want to help? Got a particular tutorial you want to write or see? Hit me up….

Shoot me an email to: webmaster@easycfm.com

This is currently running on WordPress, so I can send you an invite and you can help… the more… the merrier…. shot out!

~~Pablo