HTTP Fundamentals, Part 1: URL, Encoding, Request and Response

HTTP fundamentals a web developer needs to know:

  • HTTP address is called a URL (Uniform Resource Locator). Everything on the Internet is a resource.

     

    Example: http://mydevsite:1234/mydevpage?first=Rodan&last=Sotto#comment

     

    URL consists of the following parts:

     

    <scheme>://<host>:<port>/<path>?<query>#<fragment>

     

    • Scheme describes how to access a particular resource. In our example above, it’s HTTP. It can be HTTPS, FTP, or MAILTO.
    • Host is the name of the computer hosting the resource. In our example, it’s mydevsite.
    • Path is the path to the specific resource. In our example, it’s /mydevpage. A URL does not have to point to a specific file, like an image (*.jpg) or ASPX file (*.aspx). Nowadays, URLs are dynamic and, for search engine optimization (SEO), they usually contain descriptive keywords. See URL optimization for SEO.
    • Port is specified if the host is listening to HTTP requests on a port number other than 80, which is the default HTTP port number. Usually specified when testing, debugging, or developing web sites. In our example, its 1234.
    • Query, or query string, comes after ? (the question mark) and contains name=value pairs separated by & (the ampersand). In our example, its first=Rodan&last=Sotto.
    • Fragment is the part after the # sign. This is processed by the browser to display the element identified by the fragment at the top of the screen. In our example, the comment section is displayed on top of the screen.
  • URL encoding is the process of encoding unsafe characters found in the URL. The Internet standards list characters that are unsafe for URLs and thus they are encoded using % (the percent sign). One unsafe character is the space character and is usually encoded to %20. See URL unsafe characters.

     

    Example: http://mydevsite:1234/mydevpage/my%20file.txt

     

  • Content type is the MIME (Multipurpose Internet Mail Extensions) type that the server sends to the client so the requested resource can be displayed properly. The content type for an HTML resource, for example, is “text/html”, where “text” is the primary media type and “html” is the media subtype. If the client did not receive any content type information, it can guess the content type by scanning the first bytes of the response, and if that fails, will use the file extension instead. The client can also specify which content types it will accept when requesting a resource with multiple representations, a process called content type negotiation.
  • HTTP request and HTTP response form a single HTTP transaction. These 2 different message types are carefully formatted readable text messages that both server and client understand. Anyone that can send data over a network can participate, like the good old command line Telnet. Tools, such as Fiddler, can be used to inspect HTTP messages.
  • HTTP Request Methods:
    • GET to retrieve a resource
    • PUT to store a resource
    • DELETE to remove a resource
    • POST to update a resource
    • HEAD to retrieve the headers for a resource
  • Redirect response is sent by the server to the client to mean that the resource has moved to a new location and the client needs to send a request again to the new location. Redirect is also used to make sure all requests for resources from a server go through a specific location, a SEO practice known as URL canonicalization.
  • POST/Redirect/GET pattern is a common web design pattern employed by web applications when servicing POST requests so that the client is left with a response from a GET request. This avoids the issues with user refreshing or printing the page as a result of of the response of a POST request.
  • 3 common types of HTTP requests:
    • GET request , for example when clicking a link.

       

      GET http://mydevsite:1234/mydevpage/mydefault.aspx HTTP/1.1
      Host: mydevsite.com

       

    • POST request, when filling up a form whose method is POST. Form inputs go into the HTTP message body.

       

      POST http://mydevsite:1234/mydevpage HTTP/1.1
      Host: mydevsite.com
      firstName=Rodan&lastName=Sotto

       

    • Forms and GET request, when filling up a form whose method is GET. Form inputs go into the query string of the URL. Use this type of request if the operation does not require writing to the server, basically a safe retrieval operation. An example would be a search.

       

      GET http://mydevsite:1234/mydevpage?first=Rodan&last=Sotto HTTP/1.1
      Host: mydevsite.com

       

  • HTTP request message consists of the following parts:

     

    [method] [URL] [version]
    [headers]
    [body]

     

  • HTTP request headers, the Host header is one of them, contain useful information that can help the server process a request. Except for the host header, all request headers are optional. Popular request headers are:
    • Referer – URL of the referring page
    • User-Agent – information on the client software making the request, usually the browser
    • Accept – content types the client is willing to accept; used for content type negotiation
    • Accept-Language – languages the client prefers
    • Cookie – cookie information
    • If-Modified-Since – date the client last retrieved the resource; requests the server to only send the resource if it’s been modified since that time
  • A full HTTP request might look like the one below. Note that some headers contain multiple values, like the Accept header. The * (asterisk) in one of the values, usually provided as the last value, means anything. The q=[0..1] represents relative degree of preference, 1.0 being the highest and the default value. In our example below, the Accept header tells us the client will accept any content types but likes HTML best.

     

    GET http://mydevsite/ HTTP/1.1
    Host: mydevsite.com
    Connection: keep-alive
    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) Chrome/16.0.912.75 Safari/535.7
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Referer: http://www.google.com/url?&q=mydevsite
    Accept-Encoding: gzip,deflate,sdch
    Accept-Language: en-US,en;q=0.8
    Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

     

  • HTTP response message consists of the following parts:

     

    [version] [status] [reason]
    [headers]
    [body]

     

  • A full HTTP response might look like the one below:

     

    HTTP/1.1 200 OK
    Cache-Control: private
    Content-Type: text/html; charset=utf-8
    Server: Microsoft-IIS/7.0
    X-AspNet-Version: 2.0.50727
    X-Powered-By: ASP.NET
    Date: Sat, 14 Jan 2012 04:00:08 GMT
    Connection: close
    Content-Length: 17151
    <html>
    <head>
    <title>My Development Site</title>
    </head>
    <body>
    ... content ...
    </body>
    </html>

     

  • HTTP Response Status Code Categories
    • 100-199 – Informational
    • 200-299 – Successful
    • 300-399 – Redirection
    • 400-499 – Client Error
    • 500-599 – Server Error
  • Common HTTP Response Status Codes
    • 200 – OK
    • 301 – Moved Permanently; redirect response used in URL canonicalization
    • 302 – Moved Temporarily; redirect response used in the POST/Redirect/GET pattern
    • 304 – Not Modified; in response to the If-Modified-Since request header
    • 400 – Bad Request
    • 403 – Forbidden
    • 404 – Not Found
    • 500 – Internal Server Error; usually happens due to programming errors in a web application

CSS Fundamentals

In my last blog here, I talked about ways to put CSS in an HTML, the preferred method using external style sheets, and how styles are overwritten when using more than one method.  I also talked about the syntax for declaring a CSS property.

Here I am going to go through some of the basic CSS properties that one would need to know in order to have a good understanding of the capabilities of the CSS, and also a means to brush up one’s CSS knowledge if it ever becomes rusty.  So here they are:

/* comments */
/*
* declaring a CSS property */
p {
border-style: solid;
}
/*
* declaring multiple CSS properties */
p {
background-color: #00FF00;
font-size: 8px;
}
/*
* setting font-size using em which is a relative measure
* 1em = default font size, 2em = twice as big, and 0.5em = half the size */
p {
font-size: 2em;
}
/*
* declaring fall back fonts in case user's computer does not have the font
* note CSS has default fonts and they are serif, sans-serif, and cursive */
p {
font-family: Verdana, serif;
}
/*
* styling a table's border property to 1px, solid line, and color black */
table {
border: 1px solid black;
}
/*
* styling a link's text-decoration property to hide the underline */
a {
text-decoration: none;
color: #cc0000;
}
/*
* creating a button
* use border-radius property to give the button a rounder look
* use margin: auto to put equal left and right margin on the button,
* centering it on the page
* use text-align to set alignment of text inside the button */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
border-radius: 5px;
margin: auto;
text-align: center;
}
/*
* styling every element on the page using the universal (*) selector */
* {
color: black;
}
/*
* styling an element nested somewhere inside another element or
* is a child of another element using nested selectors */
div h3 {
color: red;
}
/*
* styling an element nested directly inside another element or
* is a direct child of another element */
body > div > p {
color: #7ac5cd;
}
/*
* note that more specific selectors will override other selectors
* e.g. <p> selector will be overridden by nested selector body > div > p
* nested selectors can be overridden too by the class and id selectors */
/*
* so far we have used HTML element selectors and the universal selector */
/*
* styling using the class selector - the . selector */
.myClass {
font-family: cursive;
color: #0000cd;
}
/*
* styling using the id selector - the # selector */
#myID {
font-family: Courier;
color: #cc0000;
}
/*
* note that the id selector is more specific than the class selector,
* thus the id selector will override the class selector */
/*
* using pseudo-class selectors - the : selector,
* to select HTML items not part of the document tree */
/*
* styling a link's unvisited link */
a:link {
text-decoration: none;
color: #008b45;
}
/*
* styling a link's visited link */
a:visited {
color: #ee9a00;
}
/*
* styling a link when it's hovered over by the mouse */
a:hover {
color: #00ff00;
}
/*
* styling elements that are the first children of their parents */
p:first-child {
font-family: cursive;
}
/*
* styling elements that are not the first children of their parents -
* the second, or the third, and so on... */
p:nth-child(2) {
font-family: Tahoma;
}
/*
* CSS positioning */
/*
* positioning using the display property
* 4 possible values:
* block - stacks the elements on top of each other like blocks in a column
* inline-block - puts the elements next to each other like blocks in a row
* inline - puts the elements next to each other but not as blocks:
* they don't keep their dimensions
* none - hides the element and it's contents from the page */
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display: block;
}
/*
* CSS box model
* every element follows the box model in CSS,
* where each element contains the content surrounded by padding, which
* in turn is surrounded by border, which in turn is surrounded by margin
* margin is the space around the element,
* the space between the element and the elements around it
* border is the edge of the element; set using the border property
* padding is the space between the border and the content of the element
* content is the actual stuff
/*
* setting the margin using margin: auto */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
margin: auto;
}
/* setting the margin using margin: top right bottom left */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
margin: 20px 50px 10px 5px;
}
/* setting the margin using margin-top, margin-right, margin-bottom,
* and margin-left properties */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
margin-top: 20px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 5px;
}
/*
* note that you can use negative values on the margins,
* which will move the element in the other direction */
/*
* setting the padding is similar to setting the margin
* you can use padding property to set top, right, bottom, left padding
* you can use padding property to give it one value,
* to apply same value of padding on all sides
* or you can use the padding-top, padding-right, padding-bottom,
* and padding-left properties */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
padding: 10px;
}
/*
* positioning using the float property
* setting float to right will put the element on right side of the page
* setting float to left will put the element on left side of the page */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
float: right;
}
/*
* note that floating elements will go on top of non-floating elements,
* unless you set the clear property to the following values:
* left will move the non-floating element below any floating elements
* on the left side
* right will move the non-floating element below any floating elements
* on the right side
* both will move it below any floating elements on left and right sides */
div {
height: 50px;
background-color: #69D2E7;
clear: both;
}
/*
* positioning using the position property
* CSS positioning, by default, is static,
* meaning elements are positioned where they would normally go
* setting position to absolute will position the element relative
* to the first parent element that does not have a static position
* if there is no such element then it is positioned relative to <html>
* setting position to relative will position the element relative
* to where it would have been placed if it had a default static position
* setting position to fixed will anchor the element to the browser window
* and stays put even when you scroll up or down */
div {
height: 50px;
background-color: #69D2E7;
position: fixed;
}

 

You could also look at this link for a quick review of CSS basics.

SQL Server: How to Linked Server an Access Database

Below is the script to create a linked server to an Access database:

EXEC master.dbo.sp_addlinkedserver 
@server = N'MyLinkedServerAccessDB',
@srvproduct = N'Access',
@provider = N'Microsoft.Jet.OLEDB.4.0',
@datasrc = N'C:\MyAccessDB.mdb'

 

Plus you also need to create the linked server login.  What’s important to note here is that the password for the admin account in the Access database is blank by default, unless you have set the password.

EXEC master.dbo.sp_addlinkedsrvlogin 
@rmtsrvname = N'MyLinkedServerAccessDB',
@useself = N'False',
@locallogin = N'sa',
@rmtuser = N'admin',
@rmtpassword = ''

General: Recursive Programming

So what is recursive programming?  As someone who took up Computer Science, this is something you learn in school but never really used it at work.  Unless you work in a specialized field, it is not something that one might use when programming business applications.

Remember Fibonacci?  Fibonacci numbers are defined as the sum of the two preceding numbers.

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...

I still remember Fibonacci because I was given a test on it in my job interview 4 years ago.  In fact, I blogged about it here.  You can use a loop function to program Fibonacci, but a recursive function is the way to go, as in below:

public int fibonacci(int n)
{
if (n <= 0) return 0;
else if (n == 1) return 1;
else return fibonacci(n - 1) + fibonacci(n - 2);
}

You can use recursive functions to implement linked lists and binary search as well.  Go to this link to quickly refresh yourself on recursive programming.