Category Archives: Programming

Lesson 3: Beginning HTML

If you didn’t check out the last tutorial, quickly check it out. We are going to pull apart the HTML code that we found in that lesson to give a briefer in HTML.

HTML stands for Hyper Text Markup Language. It is a language that is based on control statements, basically commands wrapped around text to tell the web browser how to display the web pages. Without many of the HTML commands that we have available to us, web pages would just display as text. Fortunately, using the generic commands that many web browsers interpret the same way, we can make functional and graphical web pages.

In HTML, the commands are call tags. HTML tags tell the browser what to do with the data returned from the web server. Let’s take a look at our example from lesson 2. The entire text is here:

1
2
3
4
5
6
7
8
<html>
   <head>
      <title>My First Webpage</title>
   </head>
   <body>
      <p>Not going to say Hello World!</p>
   </body>
</html>

That would actually display a page that just had some text in it that says “Not going to say Hello World! and the title of the browser changes to “My First Webpage”.

So let’s review the various parts, keeping it in the hierarchy found. First of all we have the beginning and closing HTML tags.

1
2
<html>
</html>

These tell the browser that the markup found in the text is the HTML format. Every HTML page has a tag at the beginning and a tag at the end. The second tag, with the forward slash, is called a closing tag. This tells the browser that it has reached the end of the segment that matches the name in the closing tag. All text and tags found between an opening and closing tags are considered to be “nested” between those tags.

Let’s look at the next part. The head tag.

1
2
3
   <head>
      <title>My First Webpage</title>
   </head>

The head tag always goes next after the opening html tag. The head is the header section and contains information for the browser about the page, as well much of the scripting instructions that might appear on the page. We will get into that much later, but for now just think of the head section as definitions. For example, the Title tag, which is nested in the head section, tells the browser the name of the specific page that the user is on.

Next comes the body. Let’s look at how we wrote that code:

1
2
3
   <body>
      <p>Not going to say Hello World!</p>
   </body>

The body section always follows the head section. The body contains the actual data that is to be displayed on the web page, it tells the browser how the page should look. Text, graphics, and links can all be found in the body section. In this example, we are including the p tag which tells the browser to display a block of text as a paragraph. Notice the closing tag both for the p tag and the body tag.

That is it for this lesson. Congratulations, you are getting closer to creating your own web page! Next lesson, we will talk about taking this code, storing it in a file and viewing it in your web browser.

Lesson 2: Web Languages

If you have been looking into doing some web programming, then you probably have come across the great number of web programming languages available.  When you are designing a website, you write code into a file that get’s processed by the web server.  Review Lesson 1 if you are unsure of what a web server is.  When it comes to web languages, there are two categories of languages.

The first category is client side.  When you are writing client side programming, you are creating the parts of the web page that the user sees when they access your web page.  This includes things such as text, graphics, animations and forms for them to enter date.  Some examples of client side programming languages include HTML and JavaScript.

The second category, and much more diverse in languages, is server side.  Server side processes certain events that occur during the process of viewing a web page.  For example, if you submit a form,  server side programming may save the data you entered into a database.  Or, server side programming might be used to display text on a web page relevant to a the specific user.  Server side programming includes processes that occur on the server which format the page that is returned to the user and allows for more dynamic and data driven pages.  Some examples of server side languages are ASP.net, PHP,  and Java Server Faces.

When you begin writing code for a webpage, you will begin programming for client side at first.  With client side programming, any web server is capable of providing the pages to the users on the internet.  When you get into the various server side programming though, you will need specific web server types for the various programming language.  For example, programming in ASP.net requires Microsoft Internet Information Services.  Programming in PHP could run on IIS, but can also run on Apache.  Java server faces can run on a JBoss Application Server or a GlassFish server.  You will need a server software that can handle the commands in the server side language.  That topic is further down the line though, and we will be focusing on client side programming first.

Here, for your viewing and curiosity sake, is a sample of very basic HTML programming

1
2
3
4
5
6
7
8
<html>
   <head>
      <title>My First Webpage</title>
   </head>
   <body>
      <p>Not going to say Hello World!</p>
   </body>
</html>

In the next lesson, the various parts of the above will be explained. Please check it out!

Lesson 1: Web Pages

The most basic thing that you need to know about when it comes to programming web sites is how a user on a computer somewhere in the world even accesses your web page.   When a computer is connected to the internet, wherever it connects tells it the location of a few places where it can look up addresses.  The complicated name for this is DNS, but think of it like this:  You are looking for a business and someone hands you a phone book (if you even know what that is).  You now have a list of addresses and you can find the location of the business you are looking for.

On your computer, even though you are connected to the internet, when you want to find a website, like teechmi.com, your computer or device does not know how to get to the correct location.  In this case instead of a business, you are looking for a computer somewhere on the internet that has the data for teechmi.com.  This is called a web server.  However, your internet connection usually provides you a few “name servers” (aka phone books  that tell your computer how to get the web site you are looking for.  Once your computer knows the address, it sends the request and the various pipes that your request travels down is up to the “internet” and not your computer.

That’s how a web site is retrieved, but what does it take to hold the data for a website?  First off, you need a web server.  This not only has all of the web pages that you have created, but some sort of software that provides those web pages when a request is made for them.

The two most popular web server software found in use today are:

Internet Information Services (IIS) which is part of certain versions of Windows software
Apache which is a free open source web server

Once you have one of these software packages running and some web pages your computer can be called a web server (well, as long as it’s connected to the web!).  We will get into more details of how to make it so your web server can be found on the internet in the future.  That is about all you need to start for this lesson, helping you understand how a computer gets to a web page.

HTML and JavaScript – Repeating Anonymous Function

This post demonstrates how to use an anonymous function on an html page in order to create a looping action. It is a relatively simple process and the following code is all that is needed to see this in action.

The comments should be pretty self explanatory in this code to see what is being done. Try it yourself!

Notice a few things. If you would like to end or clear the interval you set in JavaScript, there is a function that is clearInterval. Make sure you replace the function name of the one you would like to repeat in the line where you call the setInterval, in this example the name is render.

Should be straightforward. A challenge is for you to use an onClick event to begin and end the interval that you create.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
	<head>
		<title>Repeating Anonymous Function</title>
	</head>
 
	<body>
		This is my text.  I'm going to repeatedly pop-up a message box that tells you how many times it's popped up.
 
	<script	type="text/javascript">
 
		//Our anonymous function declaration (at the end of the html document)
		(function() {
 
			//Set the timer variable
			var intTime = 5000;
			//Create the interval variable;
			var myInterval;
			//Create a counter
			var count = 0;
 
			//Create the interval with render being the function to call and intTime being the interval
			myInterval = setInterval( render, intTime);
 
			//Here is the function that our timer will call
			function render() {
				count += 1;
				alert("Number of Cycles: " + count);
 
				if (count == 10) {
					//The following ends the execution of the interval
					clearInterval(myInterval);
				}
			}
		//Complete our anonymous function
		})();
 
	</script>
	</body>
</html>

Talend Open Studio 5.2.0M4

For those awaiting release level 5.2 of Talend Open Studio for Data Integration, there is now a milestone release available from Talend’s website. For those awaiting a fix for the problems with connecting to SQL Server 2008 R2 using Windows Authentication, sorry to say but the problem is not corrected.

A solution remains to simple use SQL Server authentication, and that works, but this seems specifically to be a bug in the adding the connection and retrieving schema only.  If you create the connection and it errors and then manually define a schema for a table stored on your SQL Server 2008 R2 database, it will actually query the data successfully.  This means that they have attempted to make Windows Authentication work, but are not fixing certain bugs associated with it.

Although using SQL Server authentication is a valid work around, it is not an acceptable method to rely on long term.  Hopefully Talend still chooses to address this.

Basic HTML5 Canvas Tutorial

Have you yet to play around with the canvas tag available in HTML5?  Need help just getting started with a basic document so that you can begin manipulating it different processes?

The canvas element is a very useful tool to understand in web development.  It offers great potential to web graphics, animation and even to overall page layout.  Animate layers on your webpage to make it stand out or even create a game. The possibilities are extensive.

See the following code example to get started with a basic canvas element.  The comments should clearly highlight what the various lines of code are accomplishing.  Hopefully this helps you get a good start towards utilizing this excellent tag in HTML5.

<html>
 
	<head>
		<script type="application/javascript">
		//Create a function to call after page load to draw a rectangle on
		//our canvas element
		function createRect() {
			//Reference to our canvas element
			var myCanvas = document.getElementById("myCanvas");
			//Create the context for which we will manipulate our canvas
			var myContext = myCanvas.getContext("2d");
			//Create a filler for what we draw in our context
			myContext.fillStyle = "rgb(0, 0, 256)";
			//Create a shape to display
			myContext.fillRect(20, 20, 100, 150);
		}
		</script>
	</head>
	<!-- After the body loads, call our function to draw our rectangle -->
	<body onload="createRect()">
		<!-- Create the canvas element on our page -->
		<canvas id="myCanvas" width="800" height="600">help</canvas>
	</body>
 
</html>

That’s all there is to it!

Making Cisco VPN client work on Windows 8

If you have upgraded to Microsoft Windows 8 Developer Preview or Release Preview, you may have noticed the inability to connect to a VPN through the Cisco VPN Client software. This article specifically references Version 5.0.07.0290.

The connection attempts are not successful when trying to connect to a VPN network.

You need to apply a fix within the registry in order to make this work, and it is relatively easy. If you are not familiar with Windows Registry, do not attempt this fix. You can easily cause harm to your system if you do not know what you are doing!

Open the registry and navigate to HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ Services \ CVirtA

There is a value called “Display Name” and there are a bunch of characters preceding the text “Cisco Systems VPN Adapter”. It may be something like @oem7.inf,%CVirtA_Desc%;

Change the text of the “DisplayName” value to only read “Cisco Systems VPN Adapter” by removing the preceding data. See the screenshot for an example.

Fixed value in the registry to make Cisco VPN Client work in Windows 8

I/O Error: SSO Failed: Native SSPI Library not Loaded

When this error is encountered, it is because a process is seeking to use your windows credentials to connect to a Microsoft SQL Server.  When a Java application using jDTS attempts  a Single Signon to MS SQL Serve, a library is needed on the machine.  This is the ntlmauth.dll library which is often missing when you move your code from development to production.

This file must exist in the system’s path.  When on a Windows system, a good place to put it is in the Windows\System32 folder.
The library is available for download from the jDTS project at the following address: jDTS Project – Downloads

If this is not the specific issue you are encountering, check out this other issue when working in Talend Open Studio relating to Native SSPI Library not Loaded: Talend Open Studio – Native SSPI Library Not Loaded – v5.1.1

Creating Page Links Using getElementsByTagName and addEventListener

The following is a tutorial on how to make all div elements clickable on a web page.  Handle click events on all div tags or on any specific element type in your HTML.

Do you have a need on your HTML page to create links using all the elements of a specific type.  For example, you want all “div” elements to become links that provide some sort of action in javascript.  This can be accomplished using two main functions available in javascript.  The getElementsByTagName and addEventListener functions.

The way this is handled is to create an anonymous function that adds event listeners to your page when it loads.  These event listeners then pass the event to a function that uses a switch statement and the div ID to set specific logic for each div.

We start by creating a basic HTML page that ends with the call to our script as seen below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<head>
	<title>Make Divs Clickable!</title>
</head>
<body>
	<div style="background-color: black" id="FirstDiv">
              <h2 style="color: white">Click this div to say: FirstDiv</h2>
        </div>
 
	<div style="background-color: black" id="SecondDiv">
              <h2 style="color: white">Click this div to say: SecondDiv</h2>
        </div>
 
	<div style="background-color: black" id="ThirdDiv">
              <h2 style="color: white">Our third div is not handled</h2>
        </div>
 
	<script type="text/javascript" src="test.js" ></script>
 
</body>
 
</html>

Next, we create the following anonymous function in our javascript file which adds the event listeners and sets up the handling of the different div ID’s.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//create an anonymous function
(function() {
 
	//get all of our div elements
	var links = document.getElementsByTagName("div");
 
	//add an event handler to all of the page elements
	for( var i = 0, len = links.length; i < len; i++) {
		//add an event listener to our div
		links[i].addEventListener("mousedown", elementClickHandler);
 
 
	}
 
 
	function elementClickHandler(event) {
		//get the ID from the event
		var elementID = event.currentTarget.id;
 
		//do something based on the ID
		switch(elementID) {
		case "FirstDiv":
			//do something
			alert(elementID);
			break;
		case "SecondDiv":
			//do something
			alert(elementID);
			break;
		default:
			//do something
			alert("Some other div not Handled");
		}
	}
 
})();

That’s all there is to it. If you would like to download the ZIP file for this example, it is available via the link Make-div-Elements-Clickable.

Utility for converting JDEDebug log files to XML for Easier Viewing

TeechMi.com is offering a free utility to make the lives of JDE EnterpriseOne developers easier.  The JDE Debug log file contains a lot of useful information, but also a lot of non-useful information.  This utility takes a JDEDebug.log file and converts it to a hierarchical XML file.  Also, it strips it down to just function inputs and outputs and SQL statements executed.  Turn thousands of lines of log file into something much more quickly read.

Download the file, extract it and view the readme for instructions.

Download of ZIP File:   JDELog2XML.zip

Here is a screen shot of the script to run it:

Use this script to point the program to the input JDEDebug.log file and designate the output XML file for converting the log