What is 3-tier architecture of Web Development

What is 3-tier architecture in Web Development?

In this design of web development with 3-tier architecture, the entire structure of the Web Application has been divided into three wide range of chambers, to split the entire system with crystal clear separation, based on certain crucial functionalities.

What are those 3 layers?

1. Presentation Layer
2. Business Logic Layer
3. Data Access Layer

This below image gives an overview of the 3-tier architecture:

Presentation Layer

This layer incorporates rendering/generating the layout of the web application or in other words, the user interface, as seen by the user. You can associate the presentation layer with the word "View". The Visual appearance of any web application depends on, how deep the Presentation layer is given importance. The significant technologies used are HTML, CSS and Javascript. When latest frameworks of Javascript are used, the appearance becomes more attractive and in turn pulls the user to choose the application, when there are multiple web apps of similar domain are in business. Front End Developers are responsible to create an awesome vivid appearance of the application.

Business Logic Layer

The term Business Logic itself implies, what this particular layer is made up of. When raw data is returned from the database, there needs to be some logic implied over the data, based on the need of the business. And this can be done with some key coding languages like Python, Java etc, or even with scripting languages like PHP, Perl etc

Data Access Layer

This layer is exclusively responsible for the database manipulation. It consists of programs/codes that enables the access of data from the database. An easy relative example of Data access layer code is, Stored Procedures written in SQL to access the data in the way its needed.

Significant benefits of the 3-tier architecture

• The Security is enhanced, as the client i.e browser doesn't have direct connection with the Data Access Layer

• Each tier can be maintained and upgraded independently.

• The Corporates can easily hire people with wide knowledge in each tier, so that the application's necessary development work can be handled effectively.

3 essential types of javascript functions demonstrated with examples

In any scripting or programming language, functions play a major role in the construction of simpler to complex programs. In Javascript there are three types of functions, based on the way it is structured as well as on the kind of usage.

What are the those three essential functions?

• Named Functions
• Anonymous functions
• Immediately invoked functions

I am going to present simple code here that can be written in all the three kinds of functions mentioned above. Below is a simple code to print the input name, the given number of times.
Here comes the,

Named Functions

//Function Definition
function printNamenTimes(name,n)
{
for (i = 0; i < n; i++)
{
  console.log(name);
}
}
//Function Call
printNamenTimes("Apple",10);

A Named Function as the name implies, has a name associated with it in the definition of the function and the function can be called easily with its name along with the arguments passed to it, whenever we need it in the program. This is a very straightforward way of constructing a function in Javascript.

Useful: When we need to call a function many times within a particular script.

Lets see the next one... 

Anonymous Functions

//Function Definition
var nameprinting = function(name,n)
{
for (i = 0; i < n; i++)
{
  console.log(name);
}
}
//Function Call
nameprinting("Orange",10);

Anonymous functions as the name indicates are anonymous and it has no name identification.
As you can see the function expression is assigned to a variable named "nameprinting"
and the variable is considered and called as a function, as it holds the function expression withing itself.

Useful: This form of function is mostly used when the function has single instance usage in the entire script.

Immediately invoked functions

//Function Definition
var nameprinting = (function(name,n)
{
for (i = 0; i < n; i++)
{
  console.log(name);
}
return name;
})("Grapes",10);

//printing the variable returns value "Grapes"

console.log(nameprinting);

The structure of the immediately invoked function, is in a way that the parameters are passed in the function expression itself. In immediately invoked functions, the browser executes the function immediately after getting into the function. The variable "nameprinting" which has got initially the function expression, eventually stores the return value of the function within itself and can be used outside the function expression.

IIFE(Immediately Invoked Function Expression) is a very powerful function pattern, that can be used in more complex javascript programs, which is out of the scope of this particular post, and will be covered separately.

Zurb Foundation - Grid System

Zurb Foundation is a responsive front end framework that helps us to develop beautiful responsive websites that work on all devices effortlessly. It is a similar framework as Twitter BooStrap Framework to some extent.

The powerful and most beneficial part of the Foundation Framework is its Responsive Grid System.

More on Foundation Grid System

In order to understand the Grid System, Imagine any web page as an excel sheet with 12 columns in it and with multiple rows as below.

Each cell can be merged with the adjacent cells above or below so that blocks can be formed for the web page. Below is an example for such merged cells into blocks formed page layout. The blocks can be formed in n different ways. Imagine a web page with such blocks and it can be easily created with piece of code in Zurb Foundation.

I have created a sample web layout with the help of Foundation Framework that displays as below.

Below is the major component of Foundation code that has driven into the above layout. The code is mostly self understandable. The class "row" defines each row of the above block and any number of "div" from 1 to 12 can be defined in each row based on the layout need, with the help of the class "column". The large-6, large-12 etc defines how each row needs to be split into.

 <div class="row">
        <div class="large-6 column callout"></div>
        <div class="large-6 column callout"></div>
    </div>
    <div class="row">
        <div class="large-12 column callout"></div>
    </div>
    <div class="row">
        <div class="large-10 column callout"></div>
        <div class="large-2 column callout"></div>
    </div>
    <div class="row">
         <div class="large-6 column callout"></div>
         <div class="large-6 column callout"></div>
    </div>
</div>

In order to understand better, I have attached the code to this article.

Download code here

Please remember that Foundation is a responsive web framework. Take a look on the attached code in multiple devices or alter the browser size in your computer and see that the blocks stack up on one another on small browsers so that the content is visible and sized up completely and the responsiveness is achieved.

Read this before kick·off Sass

What is Sass?

Sass can be claimed as a most powerful CSS Extension language. It adds abundance of nice features to CSS, and helps the developers to build better stylesheets.

Sass is a CSS Preprocessor, How?

The developer writes Sass code in a .sass or .scss file and the Sass Preprocessor converts it to CSS format, that is .css file so that the browser understands the code and renders the page. The .scss format is the widely used one, because of its close to CSS syntax.

The advantage of Sass over css is that, it eradicates the monotonous code style of CSS and craft CSS easily.

How to install Sass on Windows?

Sass is a package provided by the programming language Ruby as one of its dependencies. All the packages of Ruby are called as Gems. Sass is one such Gem. To start with we need to install Ruby first on our machine.

Download and install the proper version of Ruby Installer that suits your computer from the below link.

http://rubyinstaller.org/downloads/

Please note that for a 64 bit Windows operating system, the below link works charm.

https://github.com/oneclick/rubyinstaller2/releases/download/rubyinstaller-2.5.0-2/rubyinstaller-2.5.0-2-x64.exe

 

Start using Sass

 

In your computer create a dummy folder to test, with couple of subfolders named, CSS and SCSS, and a .scss test file in the scss folder as below.

 

Now you can watch your .scss test file for any changes and tell the preprocessor to convert to .css file using an inbuilt watch program. 

In order to do this go to the Dummy folder in the command prompt and run the below command.

sass --watch scss:css

Hereupon when you do any change in your .scss file, the watcher detects the change and compile it into a .css file. Try adding code to .scss file, save and check for the compilation happening automatically.

Outline of Rest Architecture for Web Application

Rest (Representational State Transfer) is an architectural style for the web application.
A restful web service is nothing but a service that follows the below six important constraints that defines a rest architecture.

Client Server Separation

The Client and Server has individual responsibilities to do. The client's involvement is not needed for the server to perform any of its task and vice versa. So they are independently serviceable .

Stateless Communication between client and server

The client sends any request to the server with all the information embedded within the request itself
and the server provides the response based on the request and no state is maintained i.e no other information is retained by either the client or the server.

Cache-able

The response from server should indicate to the server if the information is cache able or not. This way the client can use the cached data and need not request the server for repetitive data.

Code on demand

The Server can optionally send piece of code to the client, where it can be executed in order to extend the functionality of the Client.

Layered System

The Rest based system can have multiple layers in it, including the client and many layers of server.
But each layer has knowledge as well as interaction only with the adjacent layers.

Uniform Interface

Interface separates from implementation and this is accomplished with the below four sub constraints of any rest architecture.

Resource Identification

The action of sending requests and receiving responses done by the client acts as an interface for the restful architecture. The request to get any resource is identified by the URI and the response is always received in any of the formats like HTML, JSON and XML. This doesn't have any dependency on how the data is stored or manipulated on the server side, which is considered as the implementation from server end. In this way, this constraint allows to achieve the Uniform interface constraint.

Operation control of resources by client

The client can perform any change to the resources on the server with the help of the HTTP methods and URI.

Independent messages

Any request sent by the client doesn't have any dependency on any other requests generated by the client. Each request is complete on its own to get the necessary response from the server.

HATEOAS (Hypermedia as the engine of application state)

This constraint provides a paradigm that whenever a client sends a request to the server, the server should provide not only the requested information, but all the possible related end points in the form of links to the client.

Outline of HTML 5 Semantic Structure

HTML5 has new semantic tags replacing the old conventional tags. The new semantic tags describe the content in a better way than the traditional ones with numerous advantages. Here is the pictorial representation of the major HTML5 structural tags.

HTML5 semantic elements are supported on all contemporary browsers like Chrome, Firefox, Safari etc. Let's have a look on the usage of important semantic tags.

<article>(Block) - Content such as blog post or Article.

<aside>(Block) - Content slightly related to the main content on page i.e the secondary content.

<figure>(Block) - Grouping static content like image/Video etc

<figcaption>(Text) - Use with <figure> tag to provide caption.

<footer>(Block) - Provide author information, Copyright data etc.

<header>(Block) - Include Navigation and introductory headings, logos.

<hgroup>(Block) - For grouping <H1> to <H6>

<nav>(Block) - Site level Navigation.

<mark>(Text) - To highlight or reference text.

<section>(Block) - Grouping of content with common headings (similar to chapters).

<time>(Text) - For Date/Time representation.

What are the main advantages of new semantic tags?

1. Maintenance of HTML page is easy as the new markups have extra information about the structure within their name itself.
2. Better Search Engine Optimization.

Comprehend the difference between Block and Inline Elements of HTML

There are three major types of HTML elements.

1. Structural Elements
2. Block Elements
3. Inline Elements

Structural Elements

The Structural Elements are <html>, <head> and <body> tags.

Block Level Elements

1. All Block elements occupy a rectangular space within the web page and the content before and after the element are separated with the help of line spacing (in other words line break) i.e they represent a separate section from the elements preceding and following them.
2. The block elements provide structure to a particular web page. 
3. Examples of Block Elements: Headings, Paragraphs, Body, <table>, <div> etc.
4. HTML5 introduced new block elements for every sections of the web page like section, header, footer etc.
5. A Block element should never be inside an inline element.
6. Many of the block elements can be nested. A block element can contain other block elements. But the exceptions are <p> and <pre> and they can contain only inline elements and plain text.
7. They never overlap or overlapped by other elements.
8. They change the content flow.
9. Block elements occupy the full width available and just enough height to accommodate the content.
10. They have the CSS box properties.

Inline Elements

1. They are the elements within a line. Examples: <span>, <em>, <img>, <a> etc.
2. Inline elements can contain inline elements but no block elements.
3. Inline Elements are mostly used to format words and characters.
4. Inline elements take only as much space as their content requires.
5. They do not change the content flow.

The below HTML and Image differentiates between block and inline elements.

<h1>Block Level Element - Heading</h1>

<p>Block Level Element - Paragraph1

<span>Inline Span Element</span>
<a href="">Inline Anchor Element</a>
</p>
<p>Block Level Element - Paragraph2</p>

 

The Java program doorway - main method

In any Java Application, there should be at-least one main method available and can be in any of the classes. The JVM starts the execution from the first statement of the main method and ends after the last statement. A Sample main method...

public class MyFirstApp

{

public static void main(String[] args)

{

System.out.println("Main method inside class MyFirstApp");

}

}

The keyword 'public' specifies that the main method can be accessed from anywhere. 

The 'static' keyword implies that the main method can be accessed without instantiation i.e objects are not needed to access the main method.

'void' denotes that the main method doesn't return any value.  

String[] is an array of strings (sequence of characters) and is named 'args' (This name "args" can vary"). In Java, the main method needs a single array of strings as parameter.

Queries:

Can we declare a main method as Private?

                               or

Can we remove static keyword from the main method?

                               or

Can we remove the argument String[] args from the main method?

If we do any of the above, the compiler will run properly. But at run time, the JVM throws the error message.

What will happen if I write "static public void" in place of "public static void"?

The program will run and execute properly with no errors.

Can I have many main methods in the same class?

No, Compiler error occurs.

Note:

The name of the class containing the main method must be the same as the name given to the program file itself.

All about $GLOBALS in PHP

PHP Superglobals or Auto-globals

In PHP there are certain predefined variables and are called superglobals or Auto-globals. Those variables are accessible throughout the program irrespective of their scope. One such is a variable named $GLOBALS.

$GLOBALS

PHP stores all the global variables (variables within global scope of the script) currently available in the script, in an associative array called $GLOBALS[index]. "index" refers to the name of the individual global variables.

 

Example:

global $myVar = 3;

global $a = 20;

"myVar" is a global variable and holds the value 3.

"a" is a global variable and holds the value 3.

implies

$GLOBALS['myVar'] = 3;

$GLOBALS['a'] = 20;

The example given below explains the $GLOBALS array.

<?php
$x = "save";

function toclose()
{
$y = "close";
}
?>

Here, $x will be stored in the $GLOBALS array (as x is declared outside the function) and $y wont be stored in the $GLOBALS array (as y is declared inside the function).

Generally a global variable has scope only outside the functions. Since $GLOBALS[] is a superglobal, this can be used to access the global variables even within the functions. Here is an example to portrait this scenario..

Code:

<?php

$myVar = 10;

function testglobals()

{

 $GLOBALS['myVar'] = 20;

}

testglobals();

echo $myVar;

?>

Result:

20

Note: From the above exemplar, we can note that, with the help of superglobal $GLOBALS, it is possible to access or modify any global variable inside any space of the program.

Some of the other PHP Superglobals are

$GLOBALS, $_SERVER, $_REQUEST, $_POST, $_GET,
$_FILES, $_ENV, $_COOKIE, $_SESSION.

These can be discussed in future posts.

Basic framework for websites of present style

Designing a compact website is one of the key factors for success in the bush of web. In current era, your websites serve as an icon for your own dream of passion in any field such as Business, Arts, Education, Sports, Entertainment or whatever it maybe. Henceforth the websites need to be well designed to cope up with today's trend as well as to satisfy the requirements of your viewers and dispense a great user experience. Here are some basic elements a website should possess to attain a neat design.

Banner

A banner is a rectangular piece of element  made up of texts/graphic images/sounds/animations etc. usually present at the top of the website. This bears the symbol/logo/watchword of your website.

Tabbed Navigation

This allows the user to load multiple pages into tabbed segments of a single page. This element is useful for proper organization of the web info and makes the user navigation easy and clear. When the user clicks on any tab, that particular tab turns up to the front.

Fly-out Menu

In view of the fact that the websites have more categories and sub categories, it should provide fly-out menus with navigation links to all categories in addition to the standard Tabbed Navigation. This type of menu allows the user to peer instantly into all the categories just by moving the mouse over the menu. This hugely lowers the number of clicks the user requires to do and offer a rich overview of the website to the viewer.

Tabbed Navigation & Fly-out Menu

Rollover

This is an interactive effect adapted in websites which allows the user to rollover a text/image/button and making them react i.e do a simple action.

Exemplar: Flip between two images.

When the user perform "mouse over" by moving over the first image,the second image will appear - when the user "mouses out" by moving the mouse away from the image, the first image will reappear.

Go to http://www.yahoo.com/ and rollover the smaller images to look over the larger ones.

Skinning & Themes

Skinning is a technique through which the same website can be presented with different look & feel to different users (custom designed) based on the individual's taste. In this case, the website needs to propose a range of per-designed themes/skins for the user's choice.

Social Media elements

Social media plays a significant role in increasing the exposure of a particular website among viewers. This can be accomplished by integrating the social media icons within you website and bring to light your realm in the social world.

FAQ Page

FAQ (Frequently Asked Questions) Page is a collection of most commonly asked questions with the answers. The FAQ Page adds value to your website and serves as a reference guide for your users.

Popups

A popup is a small window that emerge in the front and is activated when you choose something with the mouse/key. A well designed popup is the one with all the browser components such as browser menus, scroll bar and re-sizing options. The response time for popup is faster compared to the original page itself.

Site map

A site map lists all the pages on the website with links organized in hierarchical fashion. It provides the search engine with information regarding the entire content of your website. For large sites, this helps the people to figure out the information they are looking for. The site map can be compared with the traditional geographical map.

Iconography

Icons are the emblematic representation of some idea. The icons completely change the appearance of your website. The iconic link takes less space compared to a textual link. They can be placed in Navigation Bars, Side Bars, footers etc. The clever use of icons provide better experience to the user.

Google maps

This is a free element from Google. It is very easy to embed Google maps to any website. You can embed a simple map, a set of driving directions, a map you created using Custom Maps for Google Maps, a map of a local search or maps created by other users into your website.

Photo/Video gallery

Embedding Photo/Video gallery is one of the most popular web design trend existing today.

http://www.bing.com/images?FORM=Z9LH

http://www.bing.com/videos/browse?FORM=Z9LH1

Search Box

This element improves the quality of site navigation and accessibility. In addition to this forthright benefit, the site's search box also helps the website owner to learn more about the user expectations from their site, through search query analysis.