Web Enabling Data

We now have to our credit, programs that enable execution of a general purpose select statement as well as those that update, insert and delete commands. These were all C# programs which were compiled into executable files.

Let's assume you want to display the contents of the customer table. Our program will very well serve this purpose. Alternatively, the program can be made to accept user input and depending upon the table name that the user typed in, the program can display contents of that table. You can easily do so with the help of a function called GetLine in Console. GetLine will cause the program to wait at the console for the user input followed by the 'Enter' key.

This situation comes with its share of problems though. The problem is that if there are five people who are going to use this program then you need to give them five copies of the program. If there are five thousand such users then you have to copy this on to five thousand different machines. Simply not possible. Wait a minute! Did you get a sudden brainwave? The perfect solution would be to 'put it on a network'!! But don't forget that there are many networking standards available. Some may have Novell, some may have Windows 2000, and others may have the Macintosh or even Linux/Unix. So what do we do now? You will have to make sure that the same program works under Linux as well as it does under a Mac or any other standard. Apart from this you would have the headache of having to train people to use the program.

The only solution to this problem is Web enabling data. This is the new standard of writing code. You need to access your data using Internet Technologies. It's only then that we can eliminate the loopholes that exist within the already available standards.

No matter which operating system you install, along with it you get access to a browser. When you use the Internet you use a browser, a.k.a. an user agent, that enables you to view web pages and enables data transfer over the Internet.

Since we do have a browser, can't we do a simple thing? Let the user type the name of our machine and get a form. Within the form he can key in the table name and once he does that he will get the details of that table. Which means you will now have to execute your code on a program called the WebServer.

This is what is meant by Web Enabling Data.

But before we leapfrog into the world of Web Enabling Data, let's acquaint ourselves with the basic language that the browser understands. It is called HTML.

HTML

Amongst browsers, the usual suspects are Netscape Navigator and Internet Explorer. What happens when you view a web page using such a browser? Technically speaking, you connect to a web server and a file comes over onto your computer, which is generally an HTML file.

HTML is the acronym for Hyper Text Markup Language. It is a document-formatting language. HTML is basically a stream of characters without any intelligent functionalities like the for and if statements.

Hence it cannot be considered an equivalent of a programming language. HTML, as simple as it is, allows any bumpkin to be an ace at it!

Assuming you have a Web Browser, let's write our first HTML program. You can use any editor like word to type your program in. The only thing that you must bear in mind is that the file must be saved with the extension .htm or .html. Create the file in your root directory. In our case, we will save in c: and since we are using the dos editor we shall begin by saying edit a.html

C:>edit a.html

Type the code as we have done below.

a.html Hi Bye Output Hi Bye

Note that the text must be on two separate lines. Once you have saved your file run your browser. In the browser you will see a white text box known as the address bar. Click there and type c:/a.html, in our case we have saved the file in the root of the C drive.

As of now we are picking up this html file from our hard disk. But when you are on the Net you are accessing a file from some other machine on the net. In that case, you give the address of that machine.

For instance, if you want to connect to the Microsoft site, you will type www.microsoft.com. Apart from that there is no difference in trying this on the Net or off the Net.

When the browser sees an html file, it reads it line by line. Hence, in the browser window you will see Hi Bye displayed. Wow! You have just written your first html program!

But didn't we write Hi and Bye on two separate lines? The browser, dumb as it is doesn't seem to understand this. Looks like the browser, by default, ignores enters! So, how can we make the browser understand? We can do so with the help of 'tags'.

HTML is based on 'tags', which instruct the browser how to display a piece of text or an image/picture.

A tag begins with '<' and ends with '>'.

So let's add a tag.

a.html Hi <br>

Bye Output Hi Bye

Going by the definition of a tag you will realize that br is a tag. It is enclosed within the angular brackets. <br> means next line. Save the file. Now when you view this file in the browser you will find that Hi and Bye are displayed on two separate lines.

Hence, HTML is nothing but a collection of tags. You just need to know which tag satisfies what purpose.

a.html

Bye Output Hi Bye

In this program, the tag b means bold. But here we also have </b>, which is a closing tag. This indicates that we are closing the <b> tag. Whatever is enclosed between the two will be made bold. Hence only Hi

will be bold. HTML tags are romantic, most of them always travel in pairs - called an opening tag and a closing tag. But some tags like <br> like to play the field for they prefer to remain single.

Using the <i> tag we will display Hi in italics.

a.html

Bye Output Hi Bye

It is all very mechanical! <i> means italics and hence Hi is displayed in italics. Had you included bye within <i> and </i> then bye would be in italics too! That's all the understanding that is required to learn HTML!

Now we have included another tag <h1>

a.html

<h1> You are Welcome again! <h1>

Output Hi Bye

You are Welcome again!

Since Hi is included in <i> </i> it will be displayed in italics. Bye is displayed in bold due to the <b>

tag. <hi> means heading1, it makes the text bigger. Thus, 'You are Welcome again!' is displayed in a bigger font.

a.html

<html>

<body>

<h1> You are Welcome again! <h1>

</body>

</html>

Output Hi Bye

You are Welcome again!

This program outputs the same result as the above. The only difference is that now it is a well-formed HTML program. Every HTML file must begin with the <html> and end with </html> tag. Whatever text is to be displayed within the browser must be enclosed within the <body> and </body> tag. This is the way an HTML program must be written. Hope the purists have forgiven us now!

Let's make our page attractive by adding a picture to it. Copy any gif file to your root directory and name it aa.gif. In our case, we copied it to c:

a.html

<html>

<body>

<h1> You are Welcome again! <h1>

</body>

</html>

img is the image tag, it is used to display pictures. Along with this tag you have to specify the name of the image file. Following the word 'img' is the word 'src' and after the '=' sign you specify your filename.

i.e. aa.gif. You can give the name of any picture file. But follow this syntax! Another thing to note is that you can have the file name included in single quotes or double quotes or you may exclude them totally. Thus viewing this file in the browser will now display the image you specified along with the text. In HTML parlance, src is called an attribute. An attribute describes / qualifies a tag.

You will see two hyperlinks in your browser window. The names of the html files will not be displayed but the words Hi and Bye will be underlined. And if you click on hi and bye the respective html files will be displayed instead.

Then there are tables in HTML a.html

<html>

<tr>

</tr>

<tr>

</tr>

</table>

</html>

The table tag has one attribute, border, that specifies how the lines or borders between columns looks like. The table tag encompasses two tags . tr stands for a table row and td for a table columns. We have two tr's , hence we have two rows and each tr encloses two td's one for each column.

Similarly, you can keep adding more and more tags depending on how you want your page to be displayed. Any book on HTML will list all the available tags. Our aim is not to learn html here but to use C# on the Net. Since knowing this much will suffice our forthcoming needs, let's get back on track!

In document Basic c# (Page 82-85)