I am here to write for the Leah-man. I am not professionally trained to design websites or program in any certain programming language. I was brought on to Ameronix to help with the selling of services aspect. I was a salesman of sporting goods once and I got pretty good at it after a couple of months. Most sporting goods are not that complicated. So then, in comparison, I am now selling computer programming and web design services. There is quite a learning curve when attempting to sell something this complex and complicated. There are so many different variations and options within this industry and knowing everything about it would almost be impossible, but helpful none the less. As a salesman, you are always trying to satisfy the customer and tell he or she that anything is possible. “Yes, we can do that” I always say, irregardless of truth. But the truth in web design and computer programming is that most everything is possible. And there are a million different ways to do the same thing. A hundred lines of code and ten lines of code can produce the same result and this is key when quoting a project. So in my finite wisdom, I just want to tell those salesmen and women out there that are selling web design and computer programming services, that unless you have an extraordinary amount of knowledge concerning this subject and you have studied for many years at a reputable university, please do not hesitate to ask your lead programmer and developer on advise for how long and how complicated a certain project is. Trust me, you will see the difference in the quotes and hopefully in the profits at the end of the fiscal year. Best of luck.

There are two schools of thought when it comes to the structuring of a web page via HTML. First there is the method that uses tables to position everything on the page. On more complicated layouts this often leads to tables nested within other tables. The second methodology takes advantage of the <div> tag. Everything that can be accomplished with one can be accomplished with the other, so it really comes down to a preference of which methodology do you prefer to “think in”.

What follows is a very simple “Hello World” example. Both code snippets produce the same page when viewed through a web browser. The code for both methodologies is provided (tables first, followed by the div style).

As you can see in the example the div code is much simpler and more elegant. Again, this is not always the case but was in this case since it was written first. While both of these examples have been very simple and straightforward it is not hard to take the concepts and apply them to much larger and more complicated structures.

<table>
  <tr>
     <td>
       Hello World!
     </td>
     <td>
       Hello World!
     </td>
   </tr>
</table>

<div style="float:left; margin:0px 119px 0px 3px;">Hello World!</div>
<div style="float:left;">Hello World!</div>

We will step through the code that utilizes tables first. The table was created with a fixed width however the table data elements were not given widths and thus defaulted to 50%. This provides the large amount of whitespace between the two “Hello Worlds”. The div code appears to be a bit more complex upon first inspection but is very simple as well. Within the style declarations in both div tags we encounter “float:left;”, this code puts both “Hello Worlds” on the same line. The closing div tag will automatically put all code below it on a new line. Therefore it is necessary to float the elements to get them on the same line. The white space between the two “Hello Worlds” is then created by the margin declarations.

The previous example may give the impression that it easier and more elegant to code using the table structure. The code appears much cleaner and has less attributes need to achieve the same output. However that is not the truth. I merely appear that way since I coded the table version first and then had to play with the div version to make it match. To illustrate this point I will do it the opposite way for the next example; code the div version first and then make a table version match it.

<div style="width:350px;">
  <div>
    Hello Earth!
  </div>
  <div style="float:right;">
    Hello Earth!
  </div>
</div>

<table width="356px" style="margin-left:-3px;">
  <tr>
    <td colspan="2">
      Hello Earth!
    </td>
   </tr>
  <tr>
    <td style="text-align:right;" colspan="2">
      Hello Earth!
    </td>
  </tr>
</table>

As you can see in the example the div code is much simpler and more elegant. Again, this is not always the case but was in this case since it was written first. While both of these examples have been very simple and straightforward it is not hard to take the concepts and apply them to much larger and more complicated structures.

Introduction

In a recent ASP .NET project I decided to use a global “Master Page” to contain my major theme code and use individual ASPX pages strictly for content. As a personal preference I like to use absolute paths relative to the site root. I very rarely have path issues when using absolute paths. This project requires that relative paths be used since the web application would be switching domains and placed within a sub-directory. One of the advantages of Master pages is that any pages in a sub-directory that utilize a Master page in the application’s root directory have their relative links updated automatically. The server adds the correct number of “../”’s to the front of the path. According to the MSDN documentation this occurs on all ASP web controls (anything that is <asp:….>). I noticed that my <link> paths were also automatically being updated, neat.

The Problem:

The problems started to show up when I added JavaScript to the Master page for navigation. Everything worked fine in the application’s root directory (also the location of the Master Page file), but for pages in a sub-directory the script tag’s “src” attribute was not updating. Thus my navigation did not work and any other scripts would not load.

The Solution:

To rectify this error I had to write a custom server control. Having never done this before I hit some problems, but I will go through all of the steps to get the custom control created and working.

1. Create a new Class in your project, name it “Script.cs”, it should be placed in the App_Code directory.
2. Import the necessary namespaces and declare your namespace (this is very important)

   using System;
   using System.ComponentModel;
   using System.Security.Permissions;
   using System.Web;
   using System.Web.UI;
   using System.Web.UI.WebControls;
   namespace Ameronix

3. Next declare a couple of enums for the script type and script language, these will make future expansion easier.

   
   public enum ScriptType { javascript };
   
   public enum ScriptLanguage { javascript };

4. Since this is a control that is not visible to the user we are extending the .NET class “Control”. We also need to set some security levels and toolbox data.

   
       [
   
       AspNetHostingPermission(SecurityAction.Demand,
   
           Level = AspNetHostingPermissionLevel.Minimal),
   
       AspNetHostingPermission(SecurityAction.InheritanceDemand,
   
           Level = AspNetHostingPermissionLevel.Minimal),
   
       DefaultProperty("ScriptSource"),
   
       ToolboxData("<{0}:Javascript runat\"server\" />")
   
       ]
   
       public class Script : Control

5. Next we declare our properties that will be accessible. I have included the Script’s source, type, and language, as these are the most common.

   
           /// <summary>
   
           /// The source url for the script
   
           /// </summary>
   
          [
   
           Bindable(true),
   
           Category("Behavior"),
   
           DefaultValue(""),
   
           Description("The relative path to the javascript file."),
   
           Localizable(false)
   
           ]
   
           public string ScriptSource
   
           {
   
               get { return ViewState["ScriptSource"] as string; }
   
               set { ViewState["ScriptSource"] = value; }
   
           }        /// <summary>
   
           /// The type of script this is
   
           /// </summary>
   
           public ScriptType ScriptType
   
           {
   
               get { return (ViewState["ScriptType"] == null) ? ScriptType.javascript : (ScriptType)ViewState["ScriptType"]; }
   
               set { ViewState["ScriptType"] = value; }
   
           }
   
   /// <summary>
   
           /// The language the script is written in
   
           /// </summary>
   
           public ScriptLanguage ScriptLanguage
   
           {
   
               get { return (ViewState["ScriptLanguage"] == null) ? ScriptLanguage.javascript : (ScriptLanguage)ViewState["ScriptLanguage"]; }
   
               set { ViewState["ScriptLanguage"] = value; }
   
           }

6. Finally we override the Render() method so we can actually output the element.

   
   
           /// <summary>
   
           /// Renders the control at runtime
   
           /// </summary>
   
           /// <param name="writer">The writer to use to output the HTML</param>
   
           protected override void Render(HtmlTextWriter writer)
   
           {
   
               base.Render(writer);            string type;
   
               string language;
   
   switch (ScriptType)
   
               {
   
                   case ScriptType.javascript:
   
                   default:
   
                       type = “text/javascript”;
   
                       break;
   
               }
   
   switch (ScriptLanguage)
   
               {
   
                   case ScriptLanguage.javascript:
   
                   default:
   
                       language = “javascript”;
   
                       break;
   
               }
   
   writer.Write(”<script src=\”{0}\” type=\”{1}\” language=\”{2}\”></script>”, ResolveClientUrl(ScriptSource), type, language);
   
   writer.Write(Environment.NewLine);
   
           }

   The most important line converts our relative link for any page underneath a sub-directory.

   
   
   writer.Write("<script src=\"{0}\" type=\"{1}\" language=\"{2}\"></script>", ResolveClientUrl(ScriptSource), type, language);
   
   

   The code should resemble the following:

   
   
   using System;
   
   using System.ComponentModel;
   
   using System.Security.Permissions;
   
   using System.Web;
   
   using System.Web.UI;
   
   using System.Web.UI.WebControls;namespace Ameronix
   
   {
   
   public enum ScriptType { javascript };
   
       public enum ScriptLanguage { javascript };
   
   [
   
       AspNetHostingPermission(SecurityAction.Demand,
   
           Level = AspNetHostingPermissionLevel.Minimal),
   
       AspNetHostingPermission(SecurityAction.InheritanceDemand,
   
           Level = AspNetHostingPermissionLevel.Minimal),
   
       DefaultProperty(”ScriptSource”),
   
       ToolboxData(”<{0}:Javascript runat\”server\” />”)
   
       ]
   
       public class Script : Control
   
       {
   
           /// <summary>
   
           /// The source url for the script
   
           /// </summary>
   
          [
   
           Bindable(true),
   
           Category(”Behavior”),
   
           DefaultValue(”"),
   
           Description(”The relative path to the javascript file.”),
   
           Localizable(false)
   
           ]
   
           public string ScriptSource
   
           {
   
               get { return ViewState[”ScriptSource”] as string; }
   
               set { ViewState[”ScriptSource”] = value; }
   
           }
   
   /// <summary>
   
           /// The type of script this is
   
           /// </summary>
   
           public ScriptType ScriptType
   
           {
   
               get { return (ViewState[”ScriptType”] == null) ? ScriptType.javascript : (ScriptType)ViewState[”ScriptType”]; }
   
               set { ViewState[”ScriptType”] = value; }
   
           }
   
   /// <summary>
   
           /// The language the script is written in
   
           /// </summary>
   
           public ScriptLanguage ScriptLanguage
   
           {
   
               get { return (ViewState[”ScriptLanguage”] == null) ? ScriptLanguage.javascript : (ScriptLanguage)ViewState[”ScriptLanguage”]; }
   
               set { ViewState[”ScriptLanguage”] = value; }
   
           }
   
   /// <summary>
   
           /// Renders the control at runtime
   
           /// </summary>
   
           /// <param name=”writer”>The writer to use to output the HTML</param>
   
           protected override void Render(HtmlTextWriter writer)
   
           {
   
               base.Render(writer);
   
   string type;
   
               string language;
   
   switch (ScriptType)
   
               {
   
                   case ScriptType.javascript:
   
                   default:
   
                       type = “text/javascript”;
   
                       break;
   
               }
   
   switch (ScriptLanguage)
   
               {
   
                   case ScriptLanguage.javascript:
   
                   default:
   
                       language = “javascript”;
   
                       break;
   
               }
   
   writer.Write(”<script src=\”{0}\” type=\”{1}\” language=\”{2}\”></script>”, ResolveClientUrl(ScriptSource), type, language);
   
   writer.Write(Environment.NewLine);
   
           }
   
       }
   
   }

7. Now we have a new control, but our ASP pages cannot see it. We need to map the namespace in our application. Open your web.config file and add the following to your system.web directive.

   
   
         <pages>
   
           <controls>
   
             <add tagPrefix="amx" namespace="Ameronix"/>
   
           </controls>
   
         </pages>
   
   

   The tag prefix will be useful shortly so don’t forget it.

8. In your master page file start a new tag “<amx:” auto complete should display “Script” now. Fill in the required variables and your new control will be used in the master page. Note: you MUST include runat=”server” or the control will not be converted into the appropriate script tag. For example:

   
   
   <amx:Script ID="js_jquery" ScriptSource="resources/js/jquery.js" ScriptType="javascript" ScriptLanguage="javascript" runat="server" />
   
   

Many if not most current websites handle sensitive data in one form or another. Be it email addresses, passwords, credit card information or some other form of data, visitors to websites demand that thier information be kept confidential. As developers it is our job to uphold visitor expectations. This is a vexing problem considering the rise of internet piracy and credit fraud. However, there are is a tool available to developers that can help protect both your and your clients interests: encryption. One of the safest ways to store sensitive data securely is through the use of encryption. The following describes the use and features of encryption using the tool: Mcrypt (an open source third party encryption library written for the PHP language).Encryption is the process of converting plain text information into ciphertext (text unreadable by humans) through the use of algorithms and functions known as ciphers. MCrypt offers a wide variety of encryption ciphers, choosing the correct cipher for your application may require some further research into pros and cons of each. Something to keep in mind, however, is that encryption can either be one-way or two-way, meaning once the ciphertext is created it can either not be decrypted, or can be reformed into plaintext by using a decryption cipher. For example, a two way encryption cipher such as MCRYPT_3DES (Triple DES) would be best for storing credit card information, as the plaintext credit card number is needed to process a transaction.

Another decision that needs to be made is which block cipher mode to utilize with your encryption cipher. A cipher using a constant key and plaintext will always return the same ciphertext. To provide more security block cipher modes use Initialization Vectors (IVs) to process the ciphertext into a randomized constant length string. The four main block cipher modes supported by MCrypt are Cipher Block Chaining (CBC), Output Feedback (OFB), Cipher Feedback (CFB), and Electronic Codebook (ECB). These four modes are geared towards confidentiality. reference

Initialization Vectors are required for use in block cipher modes. They allow a block cipher to process a string of plaintext into a block of cipher text unique from every other block of ciphertext. The size of the IV coorelates to the block cipher you chose for your encryption scheme. MCrypt provides a useful method of retrieving the size of this string called mcrypt_get_iv_size, which takes into account the cipher and encryption mode as parameters, and returns the length of the required IV. Note: Mode ECB does not require an IV.

Lastly and perhaps most importantly, an Encryption Key needs to be chosen for the application. All of the Ciphers available through MCrypt are built on open standards. For the application to obtain actual security, a secret key needs to be created for the encryption scheme. “This principle is known as Kerckhoffs’ principle - ‘only secrecy of the key provides security’”.

After choosing the encryption scheme (cipher, mode, iv, and key) that best fit the website application, encrypting and decrypting is a simple matter of calling the library’s mcrypt_encrypt and mcrypt_decrypt methods.

I have worked for a small web development company called Ameronix for about a year now and I have come to many conclusions about companies and their willingness to spend money, but one major fact always remains the same: Most companies want to spend as little money as possible and get something that comes in a pretty box. This boxed entity that I speak of is in most cases considered a “Vertical Market Solution”. These prepackaged solutions do have their time and there place, but the majority of all companies run their operations in such a peculiar way, there is no way that such a generic form of a solution would not make your company morph to the limitations of the program. Without bias, I speak the truth about the value of custom programming. Yes, it does cost more and yes, it will take a longer time to develop and implement into your organization’s daily routine, but will also reveal the most efficient use of your money. By having professional programmers build your company a custom program, you will not have to install that huge program, which contains elements you will never use, into your server and basically take up huge amounts of space that you will never be able to use again. A programmer will be able to pick your brain, so to speak, and decipher exactly what it is that your company does on a daily basis and what the program needs to consist of in order to do the job properly and efficiently. To examine the contrast of my argument, I will admit the time and the place for a prepackaged vertical solution. If your operation is a start-up or is still in the process of achieving a certain monthly income which denies your company the capability of allotting funds to pay for a custom job, then I say buy and use the Vertical Market Solution. But please consult a professional about which one to use and let them install it into your operations and make sure that everything is working the way it is intended to do so. Remember, you can always call Ameronix Corporation for any of your professional IT needs. Thanks for listening and I will talk with you next week.

Best regards, Brad Darden