Web Programming Overview
Uploaded by
Saurav TomarWeb Programming Overview
Uploaded by
Saurav Tomarhttp://www.halvorsen.
blog
Web
Programming
Hans-Petter Halvorsen
Web is the Present and the Future
With HTML5 powerful Web Applications can be made
Web Applications
Desktop Applications
Mobile Apps
History of the Web
• Internet (1960s)
• World Wide Web - WWW (1991)
• First Web Browser - Netscape, 1994
• Google, 1998
• Facebook, 2004
• Smartphones, 2007
• Tablets, 2010
O. Widder. (2013). geek&poke. Available: http://geek-and-poke.com
Firefox
Edge
Opera
The Web Browser
Chrome
Safari
Web Pages Examples
Web Development Environments
Microsoft:
• Visual Studio (Windows, a scaled version is in beta for MacOS)
• Visual Studio Code (Cross-platform, open-source)
Others:
• WebStorm (JavaSCript IDE, client-side development and server-side
development with Node.js, etc.)
• Eclipse
• Atom (free and open-source text and source code editor for macOS,
Linux, and Windows)
• Sublime
• ...
The Web Programming Triangle
HTML Use HTML to define the
content of web pages
Web
Programming
CSS JavaScript
Use CSS to specify the layout of web pages Use JavaScript to program
the behavior of web pages
JavaScript CSS
Web Programming
HTML ASP.NET
IIS XML
Web Services SQL
Web API
JQuery
PHP AJAX
Basic Web Programming
• HTML
• CSS
• JavaScript
For more Dynamic Web Programming we use e.g.,
• ASP.NET
• SQL
• AJAX
• PHP
• etc.
HT
CSS
ML
Server
Web
JavaScript
Web Architecture
Internet Explorer Chrome Firefox Opera Safari
Web Browser
Client
HTML CSS JavaScript
Server-side
Web Server
Client-Server Example
Client
Web Browser
Response
Web Server
Request
Database
Internet Information Services (IIS), Apache, etc.
Web Platform
The Web Browser creates the visual web page you see in the browser based on the
<!DOCTYPE html> HTML code
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p> HTML, CSS, JavaScript
</body> Web Browser Client-side
</html>
The code runs on the server and converted to Web Page (HTML)
HTML before sending to client (Web Browser)
ASP.NET, PHP, ...
Web Server Server-side
Internet Information Services (IIS), Apache, etc.
Server-side Development Framework
• ASP.NET (Programming Language: C#, IDE: Visual Studio)
• PHP
• Python Django (Programming Language: Python)
• Ruby on Rails (Programming Language: Ruby)
• Node.js (Programming Language: JavaScript)
Client-side Development Framework
JavaScript is the de facto client-side programming language.
Typically you want to use a JavaScript Framework.
Here are some popular JavaScript Frameworks:
• AngularJS, Angular2 (JavaScript Framework, Google)
• Bootstrap (JavaScript/HTML, CSS Framework), Open source
framework
• JQuery
• TypeScript (Microsoft)
Web Server
Hans-Petter Halvorsen http://www.halvorsen.blog
Web Server
The term web server can refer to either the hardware (the computer) or the software (the
computer application) that helps to deliver web content that can be accessed through the
Internet.
The most common use of web servers is to host websites, but there are other uses such as
gaming, data storage or running enterprise applications.
• IIS - Internet Information Services
– Microsoft Windows
• Apache Web Server
– Open Source
– Cross-platform: UNIX, Linux, OS X, Windows, ...
• Nginx (pronounced "engine x") - Has become very popular latly
• GWS (Google Web Server)
• ...
Web Server Popularity
http://www.digi.no/921119/under-halvparten-bruker-apache
HTML
Hans-Petter Halvorsen http://www.halvorsen.blog
HTML
• HyperText Markup Language (HTML)
• The Visual appearance of a Web Site
• “Web Browser Language”: All Web Browser understand
HTML <!DOCTYPE html>
• HTML 5.x is the latest <html>
<head>
• Maintained by W3C <meta charset="UTF-8">
<title>Title of the
- World Wide Web Consortium document</title>
</head>
<body>
Content of the document......
</body>
</html>
The History of HTML
https://www.w3schools.com/html/html5_intro.asp
HTML5 is supported in all modern Browsers
Edge Chrome
Opera
Firefox
Safari
CSS
Hans-Petter Halvorsen http://www.halvorsen.blog
CSS
• CSS – Cascading Style Sheets
• Styles define how to display HTML elements
• CSS is used to control the style and layout of multiple
Web pages all at once body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External style sheet (Recommended!!)
– An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing just
one file.
– An external style sheet can be written in any text editor. The file should not contain
any html tags.
– The style sheet file must be saved with a .css extension
• Internal style sheet
– An internal style sheet should be used when a single document has a unique style.
– You define internal styles in the head section of an HTML page, inside the <style>
tag
• Inline style
– An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly!
JavaScript
Hans-Petter Halvorsen http://www.halvorsen.blog
JavaScript
• JavaScript is the programming language of the Web.
• All modern HTML pages are using JavaScript.
• JavaScript is the default scripting language in all modern
browsers, and in HTML5.
• JavaScript is probably the most popular programming language
in the world.
• It is the language for HTML, for the Web, for computers,
servers, laptops, tablets, smart phones, and more.
• JavaScript can Change HTML Elements! – which makes it very
powerful!
Why JavaScript?
JavaScript is one of 3 languages all web
developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web
pages
JavaScript vs. Java
• JavaScript and Java are different languages, both
in concept and design.
• JavaScript was invented by Brendan Eich, to be
used in Netscape (a no longer existing browser) in
1995, and was adopted by the ECMA standard
association in 1997.
JavaScript Example
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
JavaScript Frameworks
JavaScript is the de facto client-side programming language.
Typically you want to use a JavaScript Framework.
Here are some popular JavaScript Frameworks:
• AngularJS, Angular2 (JavaScript Framework, Google)
• Bootstrap (JavaScript/HTML, CSS Framework)
• JQuery
• TypeScript (Microsoft)
AngularJS, Angular2
JavaScript Framework developed and maintained by Google
• https://angularjs.org
• http://www.w3schools.com/angular/
Bootstrap
• Bootstrap is a popular HTML, CSS, and JavaScript framework for
developing responsive, mobile first projects on the web
• Bootstrap is a free and open-source front-end web framework for
designing websites and web applications.
• It contains HTML- and CSS-based design templates for typography,
forms, buttons, navigation and other interface components, as well
as optional JavaScript extensions.
• Unlike many web frameworks, it concerns itself with client-
side/front-end development only.
• http://getbootstrap.com
• http://www.w3schools.com/bootstrap/
JQuery
• http://www.w3schools.com/jquery/
TypeScript
• TypeScript is a free and open-source programming language
developed and maintained by Microsoft.
• It is a superset of JavaScript that compiles to JavaScript
http://www.typescriptlang.org
ASP.NET
Hans-Petter Halvorsen http://www.halvorsen.blog
ASP.NET
• ASP.NET is a Web Framework for creating Web Pages created and
maintained by Microsoft
• ASP.NET is built on top of the .NET Framework
• You use Visual Studio and C#
• ASP.NET Web Forms are very similar to standard Win Forms that
you are already familiar with.
• If you know ordinary Win Forms, you also know ASP.NET Web
Forms!
Web & ASP.NET
Web Browser
Client
HTML JavaScript CSS
Web Server
Server-side
ASP.NET
C#/VB.NET
.NET Framework
ASP.NET – 3 different Development Models
Web Sites
Web
Web Pages MVC
Forms
ASP.NET
C#/VB.NET
.NET Framework
ASP.NET
ASP.NET supports three different development models:
Very similar to PHP For more experienced The Web version of
GUI and Code mixed together Web Developers classic WinForms
If you are familiar with PHP this GUI and Code is separated.
is a good starting point. If you are familiar with WinForms
or WPF, this is a good choice
ASP.NET Core
Hans-Petter Halvorsen http://www.halvorsen.blog
ASP.NET – The Future
.NET Framework 1.0
2
The new .NET Core is a lightweight cross-platform 3
subset of the full .NET Framework 4
.NET Framework 4.6.x
Windows .NET Core 1.0
WPF, Cross-platform
Windows Forms
ASP.NET Web Forms UWP ASP.NET Core MVC
ASP.NET Core
ASP.NET Core 1.0 MVC ASP.NET Core 1.0 Web API
ASP.NET Core 1.0
ASP.NET Web Forms
.NET Framework 4.6.x .NET Core 1.0
Windows only Cross-platform
Windows, Mac, Linux
CLR CLR Core
CLR – Common Language Runtime
Choosing the right .NET
• .NET Framework (latest release .NET 4.6)
– Windows only
– Mature
• .NET Core (latest release .NET Core 1.0)
– Cross-platform (Windows, Mac, Linux)
– Immature, partly unfinished
– Open source
– Modular (NuGet packages)
ASP.NET Web Forms vs MVC
• Only MVC (ASP.NET Core MVC) will work with the new .NET
Core Framework
– .cshtml (mix of GUI and Code, so-called Razor files) + .cs files (pure C#
code files)
– No Visual Designer is available!
• ASP.NET Web Forms will continue to work with .NET
Framework 4.6.x (but not part of .NET Core!)
– .aspx (GUI) and .aspx.cs (Code behind) files + .cs (pure C# code files)
files
– Visual Designer is available
MVC
Each controller is responsible for
Web Requests handling user requests
Controller
Updates Updates
User Interface View Model
Get Data from
PHP
Hans-Petter Halvorsen http://www.halvorsen.blog
PHP The elePHPant, PHP mascot.
• PHP is a server-side scripting language for web development. It
is used to make dynamic and interactive Web Pages
• Old and well-known Technology
• Very Popular and easy to learn
• Open Source/Free and Cross-platform
• PHP + MySQL is a powerful combination
https://en.wikipedia.org/wiki/PHP http://www.w3schools.com/php/
PHP
• PHP files can contain text, HTML, CSS, JavaScript, and PHP code
• PHP code are executed on the server, and the result is returned
to the browser as plain HTML
• PHP files have extension ".php"
https://en.wikipedia.org/wiki/PHP http://www.w3schools.com/php/
PHP Example
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
AJAX
Hans-Petter Halvorsen http://www.halvorsen.blog
AJAX
• The key technique in an AJAX web application is the partial
refresh.
• With partial refreshes, the entire page doesn’t need to be posted
back and refreshed in the browser.
• Instead, when something happens, the web page asks the web
server for more information.
• The request takes place in the background, so the web page
remains responsive.
• When the web page receives the response, it updates just the
changed portion of the page
O. Widder. (2013). geek&poke. Available: http://geek-and-poke.com
AJAX
3.party Web
Components
Hans-Petter Halvorsen http://www.halvorsen.blog
Telerik
• Web Components for
ASP.NET, ASP.NET Core,
PHP, ...
• Components:
– Grid
– Charts
– ...
http://www.w3schools.com
References
• Wikipedia
• I. Sommerville, Software Engineering: Pearson, 2015.
• Web Server: http://www.digi.no/921119/under-halvparten-bruker-apache
• O. Widder. (2013). geek&poke. Available: http://geek-and-poke.com
• http://www.w3schools.com
Hans-Petter Halvorsen
University of Southeast Norway
www.usn.no
E-mail: hans.p.halvorsen@usn.no
Web: http://www.halvorsen.blog
