The Five Pillars of the Web

Les Pinter



Html 5 | CSS | JavaScript | SQL | C#

There are five skills that every company expects its new programmers to have mastered. This article will describe a simple website that uses all five. It's something that a high-school student can absolutely master within a single school year, and possibly much less time. This is the skill set of what is called a Full Stack Developer. And the going pay rate for full stack developers is sixty dollars an hour. Let's get started.

1. HTML 5

HyperText Markup Language is the lingua franca of browsers like Internet Explorer or FoxFire. There are tiny differences, but with a little effort, a page will look the same in any browser that hosts it.

HTML 5 is the latest version of this technology. Use NotePad to enter the following into a file called "Test.html" located on your desktop:

<!doctype html>
<html>
<head>
<Title>Put a title here</Title>
<Style>
  p { text-indent: 25px; }
</Style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

Save the file on your desktop, then double-click on it with your left mouse button. Windows knows that ".html" files should be opened with your default browser, whichever one you have designated. Usually it's Internet Explorer, or whatever the name of that new one is.

Congratulations; you've written your first web page. This is called "declarative programming" because there's no code; you just write statements, and the browser uses them to lay out the page.

2. Cascading Style Sheets

You can use styles to modify the layout elements in your page. First we'll see what a style is, and then we'll see several ways to apply styles to your html.

Inline styles

The simplest way is called "inline styles." You put the styling properties in the tag where you want them to be applied:

<p style="fontsize: 14pt; color: Red; font-stroke: Italic;" >Hello, World!</p>

Using global styles in the <head> section

You can put this in the <Style> section, as I did above. (The inline style would override the global style for the "p" tag in case of conflicts.) Each tag type (e.g. paragraphs (<p>, list elements (<ul>,<ol>,<ll>, headers (<h1>...<h6>) and even the catchall <div> can be styled in this section.

You can also designate classes (prefixed with a period) or ids (prefixed with a hashtag), and use them like this:

<Style>
.main { text-indent: 10px; color: FireBrick; font-weight: bold; }
#idea { font-weight: bold; color: Green; }
</Style>
...
<p class="main">This is a big deal</p>
<p id="idea">I have a great idea!</p>

This is a big deal

I have a great idea!

Note that you probably shouldn't use the same ID for more than one element; the code

<a href="#main">Go to the main point:</a>

will move the cursor to the named ID when the <a> hyperlink is clicked if and only if there is only one. Also, an element can have only one ID, but multiple classes. So ordinarily you'll use classes in the Style section of your web page. Also, you can use JavaScript code to find an element by ID and change its attributes. That turns out to be very handy, as we'll see shortly.

Class styling can be applied to any and all tags, with a few exceptions (<br /> for a new line break, <hr /> for a "horizontal rule" or dividing line, for example.)

Applying the same styling to all of your web pages

Once you've gotten rid of most or all of your inline styling, you can move the entire <style> section to a file called "StyleSheet.css" (or "banana.css" if you prefer) and add a single line to the head section of all of your pages:

<link rel="stylesheet" type="text/css" href="StyleSheet.css">

Now, all of your pages that use the tag and class definitions in your stylesheet will look alike. Change something in your style sheet, and it ripples through all of your website. Neat, eh?

3. JavaScript

Iexplore.exe is the browser executable. It's seven-hundred and ninety-eight kilobytes of executable code. Whiskey-Tango-Foxtrot! Our little Magic Wand word processor did about the same formatting on text files, and it was twenty kilobytes. 20kb compared to 798kb. Internet Explorer had better be doing something besides text formatting...

...and it is. It can run programs written (typically) in JavaScript. It's event-driven - it launches functions embedded within the html in response to events like clicking on a button or link, launching a form, or loading the body of a web page. And it can do just about anything you can think of. Here's a trivial example:

<input type="button" onclick="alert('I"ve been clicked!');" value='Click me' />>

Try it:    

Usually JavaScript functions are declared in <Script> blocks either in the head or in the body: (This code is taken from the excellent examples at w3Schools.com)

<!DOCTYPE html>
<html>
<body>

<p>Creating a JavaScript Object.</p>

<p id="demo"></p>

<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
document.getElementById("demo").style.textShadow = "3px 3px 3px #300";
</script>

</body>
</html>

Here's how it looks when the page runs:

This script runs when processed by the browser - the default 'load' event.

Declaring functions

Usually functions are declared in the <head> section, and are then referred to by name:

Example of named functions referred to in event hooks

<!DOCTYPE html>
<html>

<head>

<script>
function AlertMe() { alert('Hi there'); }
</script>

</head>

<body>

<p onclick="AlertMe()" >Click me please />

</body>
</html>

You can do amazing things with JavaScript. It can be a a challenge, but most of the really cool stuff you see on web pages is done with JavaScript.

External script files

As with style sheets, you can incorporate javascript functions by reference using the <script src="url"> tag:

<!DOCTYPE html>
<html>
<head>
<script src="MyJavaScriptLib.js">

The "src" can be either relative *e.g. "scripts/MyLib.js" or absolute :

   <script type="text/javascript" src="javascript/jquery-1.3.2.min.js" />

Thereafter you can simply refer to library functions as if they had been declared at the top of the html.

I've seen style sheets and script files containing thousands of lines of code. However, downloading and studying the code may save you considerable time and money. Either way, I won't lie to you; these two technologies can become very challenging. But if you want to inhabit this world, do what you have to do. If it were easy, anyone could do it.

4. SQL Server

SQL stands for Structured Query Language. There are dozens of vendors with different dialects, but essentially they're used to store data in and and retrieve data from tables, using just four commands:

  1. SELECT
  2. INSERT
  3. UPDATE
  4. DELETE

There are books a thousand pages thick on these four commands, so obviously it can be a very complex skill to master. We'll only touch on the basics.

So far, you've only needed NotePad and Internet Explorer to experiment with the first three technology. That just came to a screeching halt.

Both SQL Server and web server pages require additional software. SQL Server has a server component, which runs 24/7, waiting for your commands. Web pages consist of an html file and a file containing code written in C#, Java, or any of hundreds of other server-side languages. This code runs under the Internet Information Server when you request a page, or in response to event handlers attached to events (like button-clicks or user selection of a row in a combobox.) We'll use the little mini-IIS located within Visual Studio 2017.

We'll first look at SQL. SQL comes with a "Management Console that is actually a "client" that communicates with the server. You can directly type commands into "query" windows, and then execute them.

However, installing and setting up SQL Server Developer Edition adds a level of complexity that I want to avoid for now, so we'll just use Visual Studio and create a "local MDF" file that the Visual Studio Integrated Development Environment (IDE) can handle. One of the benefits is that the database is located in a local file with an ".MDF" extension that you can copy with all of the other website files, and it will still work. That's easy to understand.

First you'll need to create a database. Then we'll use a table stored in the database to supply data for our web page.

Open Visual Studio; you'll see the Integrated Development Environment.

Fig. 1 - The IDE Start Page

In the Start Page, select Create an Empty Web Project called FirstSite. Your screen will look like this:

Fig. 2 - Empty Project

Right-click on the Project Name and select Add, New Item. Type "Database" in the filtering textbox at the upper right of the IDE and select SQL Server Database (C#):

Fig. 3 - Add a database

Press Ctrl+Alt+S to open the Server Explorer. You'll see the screen in Fig. 4:

Fig. 4 - Database created

Next we'll create a Customer table to hold records. Right-click on the project name, and from the context menu select Add New Table:

Fig. 5 - Add a new table

Next you'll need to create a table. A table has rows and columns, just like a spreadsheet. Say you want a client list. Use File, New Query to create an empty query window and enter this:

  CREATE TABLE CLIENT (
	ID Int NOT NULL IDENTITY(1,1) PRIMARY KEY,
	FirstName VarChar(20) NOT NULL DEFAULT '',
	LastName  VarChar(20) NOT NULL DEFAULT '',
	Address   VarChar(40) NOT NULL DEFAULT '',
	City      VarChar(20) NOT NULL DEFAULT '',
	State     Char(2)     NOT NULL DEFAULT '',
s	ZIP       VarChar(10) NOT NULL DEFAULT '',
	Phone     VarChar(16) NOT NULL DEFAULT '')

Click the 'Update' button at the upper left corner of the screen, and then select 'Update Database' (didn't we just do that?) to execute the script to create the table. Right-click on 'Tables' in the Server Explorer and select 'Refresh' to verify that the table was created.

Finally, in the Server Explorer, right-click on the Customer table name and pick Show Table Data. Type in a few customers for testing.

Fig. 6 - Add a few rows of data

Now that we've got test data, we'll use Microsoft's EntityFramework to read the data and prepare it for display. Click on the Tools Menu, select the NuGet Package Manager, and select the Package Manager Console (Fig. 7):

Fig. 7 - Install Entity Framework

In the NuGet Package Manager Console, type

      Install-Package EntityFramework

It will take a few seconds to install. Once it's finished, we'll have the IDE write code to retrieve our data.

Next, right-click on the Project name, select Add, New Item. Type ADO in the filter textbox at the upper right, and then pick ADO.Net C# Entity Data Model. (Don't pick the Visual Basic version.)

Fig. 8 - Create the Entity Model

In the ensuing wizard screens (about 5 of them), accept all of the defaults. Once you get to the screen that asks you to select objects to include in the generated code, select the Client table:

Fig. 9 - Select the Client table

After a short delay, you'll find a bunch of code in the App_Code folder. You don't even need to look at it.

5 - The Web Page with C# Code-behind

So finally we come to the web page that's going to use this data. Highlight the project name, right-click, select Add, New Item, and select Web Form. Again, make sure you select the C# version of the form. The default name of "Default.aspx" is fine. Your IDE should now look like this:

Fig. 10 - Empty web page

The ".aspx" extension tells the web server that the page will contain a mixture of (1) HTML and (2) C# code that writes HTML. What reaches your browser is pure HTML and JavaScript - the only things that browsers can understand.

The first line is a directive that tells the IDE to expect C# code in the code-behind file, which is the same name as the HTML file but with a ".cs" (C-sharp) extension:

Click on the "+" to the left of the web page name (the .aspx file) and you'll see another file name below it: Default.aspx.cs. This is the code-behind associated with the web page. The Page_Load event handler code runs when the page loads. Other events are called by other event handlers, like button_click or selected_item_changed.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{

	}
}

We'll display the data from the CLIENTS table in a <table>, which has been part of HTML since forever. Browsers use the data in a <table> to format the rows and columns. To create a table, the IDE uses a template called a GridView:

<%@ Page Language="C#" AutoEventWireup="true"
 		CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
			
           <asp:GridView ID="GridView1" runat="server" />
         
        </div>
    </form>
</body>
</html>

The runat="server" attribute allows you to refer to the template by its ID in the code-behind. That's how the data will be passed to the template processing code that will actually generate the <table> code:

using System;
using System.Linq;
using System.Collections.ObjectModel;
public partial class _Default : System.Web.UI.Page
{
	DatabaseEntities mgr = new DatabaseEntities();
	public ObservableCollection<CLIENT> clients { get; set; }

	protected void Page_Load(object sender, EventArgs e)
	{ clients = new ObservableCollection<CLIENT>();
	  var query = mgr.CLIENTs
	  .OrderBy(x => x.LastName)
	  .ThenBy(x => x.FirstName);
	  foreach(CLIENT C in query) { clients.Add(C); }
	  GridView1.DataSource = clients;
	  GridView1.DataBind();
	}
}

I've removed some of the using statements (which allow you to bypass providing long prefixes that tell the IDE where various objects are located) and added two that are going to be needed to create a query object and the ObservableCollection that will hold the data. (The funny name alludes to the fact that the object announces to the surrounding environment when it's contents have changed. Remarkably, objects don't do that automatically.)

The generated code created when we added the ADO object defined a data manager object that lets you take advantage of IntelliSense to help build the SQL SELECT (query) statement that will retrieve the data. It can be both declared and instantiated (created) in the class declaration before the first executable code to run, the Page_Load event handler.

In the Page_Load event, we create a CLIENT object based on the prior declaration, and then create a query object based on the CLIENTs class found in the generated DataBaseEntity code. We then "populate" the collection with data returned from SQL Server. Finally, we assign the selected data to the GridView's DataSource and call DataBind(). Fig. 10 shows you the result:

Fig. 11 - The generated page

The generated HTML that formats the table is exactly what you'd have to write manually:

<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
	<th scope="col">ID</th>
	<th scope="col">FirstName</th>
	<th scope="col">LastName</th>
	<th scope="col">Address</th>
	<th scope="col">City</th>
	<th scope="col">State</th>
	<th scope="col">ZIP</th>
	<th scope="col">Phone</th>
</tr>
<tr>
	<td>2</td>
	<td>Christine</td>
	<td>Arce</td>
	<td>2032 Marshall</td>
	<td>Berkeley</td>
	<td>CA</td>
	<td>92002</td>
	<td>(415) 223-2031</td>
</tr>
<tr>
	<td>1</td>
	<td>Les</td>
	<td>Pinter</td>
	<td>35056 Hwy 190</td>
	<td>Springville</td>
	<td>CA</td>
	<td>93265</td>
	<td>(650) 464-6924</td>
</tr>
</table>

You can select other templates in the IDE to format the table with pre-defined styles. You can add a page title with a dropshadow. You can use cookies that may be present on the user's computer to add or change elements in the page. You can add a dropdown combo to let the user display only people with last names starting with a selected letter, using the SelectedIndexChanged event to filter the data on the server side. You can also write JavaScript to do the filtering on the full set of data which has been included in the generated page. Deciding what to do is the hard part; doing it is relatively simple.

Conclusion

These are the five pillars of the web. This simple example barely scratches the surface of what can be done with web pages. If you master these five skills, you can be part of the new world of information technology. With the Internet, you can deliver any amount of information to anyone, anywhere in the world, at any time, for free. How can that not change the world?

❑❑❑