Web-Based Applications

Using [Link]
We will study mainly this area from the following resources:

1. Our old tutorial

2. Book: Wrox-Beginning [Link] 4.5.1
3. [Link]
4. [Link]
5. [Link] MVC (& Web application Projects)
1. Book: Wrox-Beginning [Link] for Visual Studio 2015
2. [Link]
6. [Link] Interview Questions / Answers
[Link]
Professio/4988
7. Any other book, net resource, dictionaries, person, etc. as needed.
SOME BASICS WEB CONCEPTS
Static Web Pages:
The content (text, images, hyperlinks, etc.) and appearance of a static web page is always the same
– regardless of:
 Who visits the page, (like administrator or visitor) or
 When they visit, (means time) or
 How they arrive at the page, (means like through another website).

How Are Static Web Pages served onto a client browser?

There are two ways:

1. Type the exact location and name of the page in the URL bar of the browser.
2. Save the page(s) on web server. It involves the following steps:
1. A web author writes a page composed of pure HTML, and saves it within an .htm file
on the server (computer).
2. Sometime later, a user types a page request into their browser, and the request is
passed from the browser to the web server
3. The web server locates the .html page and converts it to an HTML stream.
4. The web server sends the HTML stream back across the network to the browser.
5. The browser processes the HTML and displays the page.

The Limitations of Static Web Pages:

 They are quite limited without any dynamic features like displaying current time.

 Also HTML offers no features for personalizing your web pages; each web page that
is served is the same for every user.

 There's also no security with HTML, the code is there for everybody to view, and
there's nothing to stop you from copying somebody else's HTML code and using it in
your own web page.

 Static pages might be very fast, as quick as copying a small file over a network, but
they are quite limited without any dynamic features.

Dynamic Web Pages:

Since we can't create our all possible pages hard-coded HTML files before the page is requested,
what we need is a way to generate the HTML after the page is requested. Such web pages are
called as dynamic web pages. Examples of such pages are:

 A site that is reactive, like to display the current date and time.
 A site which displays the values from an attached database file on the Internet like price of an
item,
 A site to display a stock catalogue (web service),
 Or you wanted to personalize your site to everyone who visited it, like administrator or user.

There are two ways of doing this:

Client-Side Scripting:
In the client-side model, modules (or plug-ins) attached to the browser do all the work of creating
dynamic pages. The HTML code is typically sent to the browser along with a separate file containing
a set of instructions, which is referenced from within the HTML page. However, it is also quite
common to find these instructions intermingled with the HTML codes. So, in this model, our set of five
steps now becomes six:

1. A web author writes a set of instructions for creating HTML, and saves it within an
.html file. The author also writes a set of instructions in a different language (to
handle dynamic content). This might be contained within the .htm file, or within a
separate file.

2. Sometime later, a user types a page request into their browser, and the request is
passed from the browser to the web server. (When you type a web address like
[Link] in your web browser and press Enter, the browser sends a
request to the web server at that address. This is done through HTTP, the
HyperText Transfer Protocol. HTTP is the protocol by which web browsers and
web servers communicate. When you send the address, you send a request to
the server. When the server is active and the request is valid, the server accepts
the request, processes it, and then sends the response back to the client
browser.

Because you are using the built-in Development Web Server, the server and the
client are really the same machine. However, in a real-world scenario, you’ll host
your web site on an external web server where it can be accessed by many
different clients.).

3. The web server locates the .html page, and may also have to locate a second file
 that contains the instructions (written in any scripting language).

4. The web server sends both the newly created HTML stream and instructions
back across the network to the browser.

5. A module within the browser processes the instructions and returns it as HTML
within the .html page – only one page is returned, even if two were requested.

6. The HTML is then processed by the browser which displays the page.

Everything you see, click, and interact with on a website is the work of front-end web development.
Client-side frameworks and scripting languages like JavaScript and Angular JS have made
interactive websites possible. Here’s a look at how this technology works in the scheme of a website,
and some of the most popular scripts and frameworks you should know.

The client is anywhere your users are viewing your site: mobile devices, laptops, or desktop
computers. 

Server-side scripting is executed by a web server; client-side scripting is executed by a browser.

Client-side scripting is always evolving—it’s growing simpler, quicker, and easier to use. As a result,
sites are faster, more efficient, and less work is left up to the server. Server-side scripting works
in the back end of a site, which the user doesn’t see. It creates a way for the site to access its
database, all the behind-the-scenes mechanics that organize and power a website. Client-side code,
however, handles what the user does see.
Benefits of client side scripting:
 Execute quickly because they don't require a trip to the server.
 Are reusable and obtainable from many free resources
 Create dynamic forms.
Drawbacks of client side scripting:
 Client-side technologies have fallen out of favor in recent times, as they take a long time
to download, especially if we have to download a second file with a separate set of
instructions. In some cases, we might have to download several files of separate
instructions.
 A second drawback is that each browser interprets these instructions in different ways, so
we have no way of guaranteeing that if Internet Explorer understands them, whether
Netscape Navigator or Opera will.
 Other major drawbacks are that it is a problem to write client-side code that uses server-
side resources such as databases, because it is interpreted at client-side.
 Also all code for client-side scripting is available to everybody, which can be undesirable.
Latest technologies in Client side Scripting:
Now that you’ve got a broad view of what front-end technology is and does, here’s a look at some of
the most widely used scripting languages and front-end frameworks. Languages are almost always
used in the context of their frameworks, which make quick work of complicated code with libraries of
pre-packaged, shareable code, and lots of add-ons. Your developer, in addition to HTML, CSS and
Java Script may use one or a combination of these when building the front end of your site. These
are actually frameworks of Java Script.
 AngularJS: An incredibly robust JavaScript framework for data-heavy sites
 JQuery, jQuery Mobile: A fast, small, JS object library that streamlines how JavaScript behaves
across different browsers
 [Link]: A server-side platform that uses JavaScript, and is changing the way real-time
applications can communicate with the server for faster response times and a more
seamless user experience. It works with another JavaScript framework, [Link], to build
server-side Web applications.
 Bootstrap: A mobile-first framework that uses HTML, CSS, and JavaScript to facilitate rapid
responsive app development
 React, for user interface design
 [Link], [Link], [Link], MeteorJS, and more
  TypeScript: A compile-to-JavaScript language that is a superset of JavaScript, created by
Microsoft
 AJAX (JavaScript + XML)—a technology that allows specific parts of a site to be updated without
a full-page refresh by asynchronously connecting to the database and pulling JSON– or XML-
based chunks of data.
 VBScript & JScript are Microsoft’s front-end scripts that run on the [Link] framework. JScript
is Microsoft’s reverse-engineered version of JavaScript.
 ActionScript, which creates animated interactive web applications for Adobe Flash Play
 Java (as “applets”) snippets of back-end code that run independently with a run-time
environment in the browser
Tip:
It’s worth researching what browsers your primary audience is most likely to use, and what back-end
scripts and APIs you’re using, and then decide on a script based on a stack or compatibility.
Client-side scripting breakthrough:

An important breakthrough that changed the hard-and-fast rules for client side vs. server side? AJAX.
The old standard was that server-side processing and page post-backs were used when the browser
needed to interact with things on the server, like databases. AJAX, with its asynchronous calls to the
server, can pull the data instantly and efficiently, without requiring a post-back. Read more about how
it works in this AJAX Front-End Technology article.
Another major boost is jQuery, a fast, small, and feature-rich JavaScript library with an easy-to-use
API that works across a multitude of browsers. Like code libraries do, jQuery changed the way that
millions of people write JavaScript, simplifying a number of other client-side scripts like AJAX at the
same time.

Server-Side Scripting:
With the server-side model, the HTML source is sent to the web server with an intermingled set of
instructions. Again this set of instructions will be used to generate HTML for the page at the time
the user requests the page. Once again, the page is generated dynamically upon request. Our set of
five steps once more becomes six, however, with the subtle twist regarding where the processing of
instructions is done:

1. A web author writes a set of instructions for creating HTML (including the dynamic
part of the code), and saves these instructions within a file.
2. Sometime later, a user types a page request into their browser, and the request is
passed from the browser to the web server
 3. The web server locates the file of instructions

4. The web server follows the instructions in order to create a stream of HTML

5. The web server sends the newly created HTML stream back across the network to
the browser.

6. The browser processes the HTML and displays the page

The twist is that all the processing is done on the server, before the page is sent back to the
browser.

The back end comprises four parts:

i. the server, the server is a powerful computer that runs the back-end software,
ii. your database, the database houses your site’s data
iii. a back-end web application (software written via server-side languages), and the software
communicates between the two.
iv. APIs, exchanges data between a database and any (client) software accessing it.

Server-Side Script Basics

 Runs on a server, embedded in the site’s code

 Designed to interact with back-end permanent storage, like databases, and process
information from the server to access the database—like a direct line from user to database
  Facilitates the transfer of data from server to browser, bringing pages to life in the browser,
e.g., processing and then delivering a field that a user requests or submits in a form
 Runs on-call. When a webpage is “called up,” or when parts of pages are “posted back” to the
server with AJAX, server-side scripts process and return data
 Powers functions in dynamic web applications, such as user validation, saving and retrieving
data, and navigating between other pages
 Plays a big role in how a database is built from the ground up and managed afterwards
 Build application programming interfaces (APIs), which control what data and software a site
shares with other apps.

Benefits of Server-side Scripting:

 One of the key advantages this has over the client-side model is that only the HTML
code describing the finished page is actually sent to the browser. This means that
our page's logic is hidden away on the server.
 Server-side scripting prevents increasing of the load as it does not require plug-ins
or browser scripting technology (such as JavaScript). Overloading leads
to problems like slow loading, high CPU usage, and even freezing.
 Loading time of the web pages is often reduced with Server-side scripting which
helps to improve your site’s Google ranking.
 An increased security is ensured for user privacy and is the preferred choice for e-
commerce, membership and social media sites.
 Server-side scripting is necessary to run dynamic pages on browsers that do not fully
support JavaScript and most browsers run it.
 Website owners can create their own applications and make use of CMS (content
management system) to easily create and update content on the web without coding
as the Server-side scripting languages like PHP can be configured to run CMS
applications, like WordPress and Joomla.
Drawbacks of Server side Scripting:
 Server-side scripting is slow at times like: 1.) If the user disconnects from the internet,
or 2.) The web hosting is down. Then the script may take a long time to execute.
 The scripting software has to be installed on the server.
 A database is required to store the dynamic data that needs a regular backing up and
has to be kept secure.
  Here the pages have to be refreshed often in order to show the dynamic content.
Ajax, an innovative method of exchanging data with a server is used by the
developers which resolve the problem.
 Websites using large applications and with heavy traffic have to make use of more
powerful hosting methods like dedicated servers or cloud hosting to cope with
demand.
Latest technologies in Server side Scripting:

Popular Server-Side Languages:

 PHP: The most popular server-side language on the web, PHP is designed to pull and edit
information in the database. Its most commonly bundled with databases written in the SQL
language. PHP was designed strictly for the web and remains one of the most widely used
languages around. It’s easy to install and deploy, is staying competitive with lots of modern
frameworks, and is the foundation for a number of content-management systems. PHP-
powered sites: WordPress, Wikipedia, Facebook
 Python: With fewer lines of code, the Python programming language is fast, making it ideal for
getting things to market quickly. The emphasis is on readability and simplicity, which makes it
great for beginners. It’s the oldest of the scripting languages, is powerful, and works well
in object-oriented designs. Python-powered sites: YouTube, Google, The Washington Post
 Ruby: If you’re expecting complicated logic on the database side of your site, the Ruby
programming language is an excellent option. Unlike Python, Ruby is equal parts simplicity and
complexity, pairing simple code with more flexibility and extra tools. It requires developers to
use the Ruby on Rails framework, which has vast libraries of code to streamline back-end
development. Ruby-powered sites: Hulu, Twitter (originally), Living Social, Basecamp
 C#: The language of Microsoft’s .NET Framework—the most popular framework on the web—
C# combines productivity and versatility by blending the best aspects of the C and C++
languages. It’s excellent for developing Windows applications, and can be used to build iOS,
Android mobile apps with the help of a cross-platform technology like Xamarin.
 C++: Great for complex applications also built on the .NET Framework, the C++ programming
language is a difficult but high-powered language that works well for data-heavy sites. Speed
is central to C++, and it runs well alongside other languages like Java and Python.
 Java: “Compile once, run anywhere” is its motto—and it’s excellent for enterprise-level
applications, high-traffic sites, and Android apps. Java sites: Twitter, Verizon, AT&T, Salesforce
…And Their Server-Side Frameworks
 Ruby on Rails: This Ruby framework is the overriding way to implement Ruby. Its “gems”
include plug-ins and libraries of code that streamline development.
 [Link]: This Microsoft framework is the most popular enterprise-level framework—it
supports multiple programming languages simultaneously for one project. So, the same
application can be built with both C# and C++, via CLI (common language interface). It’s most
recent iteration, [Link] 5, is now open to non-Windows platforms for the first time.
 Django: This Python framework was developed to meet the needs of development in a fast-
paced environment.
 [Link]: JavaScript is typically a front-end script, but with the [Link] framework, it can be
used in server-side technology, from APIs to entire stacks. Its core selling point is how it
handles client-server communication—it’s fast, doesn’t bottleneck, and is ideal for real-time
apps like chat rooms, data-heavy applications, and any software that requires the streaming
of fresh content, like a news feed. [Link] sites: Dow Jones, PayPal, LinkedIn
 [Link] & Koa: These JavaScript-powered middleware frameworks work on top of the
[Link] development environment and control the flow of information on the back end of a
site.

Factors to select any type of scripting technology:

 Are they supported on the platform you use?

 Are they difficult to learn?

 Are they easy to maintain?

 Do they have a long-term future?

 Do they have extra capabilities, such as being able to parse XML?

 Are a lot of people already using them – are there a lot of tools available?

 Are the support, skills, and knowledge required to use them readily available?

History of [Link]:

ActiveX Controls:
An ActiveX control is a self-contained program (or component), written in a language such as C++ or
Visual BASIC. When added to a web page, it provides a specific piece of client-side functionality,
such as:

 a bar chart,
  timer,
 client authentication, or
 database access.
ActiveX controls are added to HTML pages via the <object> tag, which is now part of the HTML
standard. Despite being compatible with the HTML standard, they are not supported on any browser
without an ActiveX plug-in. Without this, they will only function on Internet Explorer. Also, unlike
VBScript, ActiveX is able to manipulate items on the user's machine such as the files or Windows
registry. For this reason it is very often considered a security risk and is not even allowed through
firewalls. Consequently, ActiveX controls still can't really be considered either a common or a cross-
platform way of making your pages dynamic and are falling out of use.

ASP:
Active Server Pages (ASP) is now dubbed (named formally) "Classic ASP" and if you see this term
in the book, we will be using it to describe any ASP that isn't [Link].
ASP commonly relied on either of the JavaScript or VBScript scripting languages (although it was
also possible to use any scripting language installed on Windows, such as PerlScript) to create
dynamic web pages. ASP is a module (the [Link] file) that you attach to your web server, and it then
processes the JavaScript/VB Script on the web server, and turns it into HTML, before sending it into
the server, rather than doing it on the browser. ASP lets us use practically any of the functionalities
provided by Windows, such as database access, e-mailing, graphics, networking, and system
functions, and all from within a typical ASP page.

ASP's shortcomings:
 It is very, very slow performance wise.
 It is also restricted to using only scripting languages. It can't do all the things that a fully-
fledged programming language can. Secondly, the scripting languages, being like
"junior" versions of full programming languages, took a lot of shortcuts to make the
language smaller. Some of these shortcuts make their programs more complicated
than is otherwise necessary.
As we're going to see, [Link] rectifies a lot of this by making code more structured, easier to
understand, and shorter.

[Link]:
[Link] also relies on a module attached to the web server. However, the [Link] module
(which is a physical file called aspnet_isapi .dll) doesn't do all of the work itself; it passes some on to
the .NET Framework to do the processing for it.
How does [Link] differ from ASP?
We add ASP code to our pages in the same way as we do client-side script, and this leads to
problems such as messy coding and restricted functionality. [Link] has no such problems.
First off [Link] allows you to use a far greater selection of full programming languages and
also allows you to utilize to the full the rich potential of the .NET Framework. It helps you create
faster, more reliable dynamic web pages with any of the programming languages supported by
the .NET Framework. Typical languages supported natively are [Link], C# and a new version of
JavaScript called [Link]. On top of this it is expected that third party developers will create
versions of Perl, Python, and many others to work in [Link]. We've chosen [Link] as its
arguably the simplest for beginners, and it can do pretty much anything that the other languages we
mentioned can as well. Lastly, and most importantly we've chosen [Link] as it comes free with
[Link] – so when you install [Link] you get [Link] as well.
A clean separation between presentation and code. With classic ASP, your programming logic was
often scattered throughout the HTML of the page, making it hard to make changes to the page later.
[Link] and [Link] (or C#)

At this stage, you might be thinking, "Hang on, I've got to figure out [Link], then I've got to get a
handle on [Link] – that sounds like an awful lot to learn." Don't worry; you won't be learning two
languages. [Link], as we said right from the beginning, is not a language – it is a technology. This
technology is accessible, via a programming language. What we're going to be doing is teaching you
[Link] features as we teach you [Link]. So in other words, you will be creating your web pages
using [Link] and using [Link] to drive it. However, before you rush out and get a [Link] book
instead, we will be approaching the language from the angle of creating dynamic web pages only.

As compared to ASP 1.0, in [Link] 2.0 “70% less code” is needed

In summation, ASP .NET is a server-side technology that lets us use fully-fledged programming
languages to create your web pages.

An introduction to [Link]:
[Link] is a framework (Set of libraries. It’s a part of .net framework) that supports the building of
robust and performant web applications.
Think of it as the structural support for a car. You can add a couple of different body designs on
top of this structure: [Link] Web Forms and [Link] MVC. These two approaches both rest on
[Link].
The current versions, Visual Studio 2010 (often pronounced as “twenty-ten”) and [Link] 4, build
on top of the successful Visual Studio 2008 and [Link] 3.5 releases, leaving many of the beloved
features in place, while adding new features and tools in other areas.
Now see in Beginning [Link] 4.5.1 (wrox’s book) from p. xxxiii. And follow this way to read:
1. Keep reading and highlighting the most important matters and also keep performing any
practical work along with.
2. After one chapter is finished, keep revising the highlighted text by copying the highlighted
text in the word file and arranging and remembering the text from this word file.
3. After that attempt exercises.