web apps and internet information...

WebAppsandInternetInformationServices(IIS)

Hans-PetterHalvorsen,M.Sc.

WebServerDeployment

Contents• IntroductiontoWebApps– HTMLExample

• IntroductiontoASP.NET– ASP.NETExample

• IntroductiontoWebServers• InternetInformationServices(IIS)– DeployaHTMLWebSitetoIIS– DeployanASP.NETWebApptoIIS

WebPlatforms

PCswithWebBrowsers

ClientsServers

TheCloud/Internet/Local

Network

WebServers

DatabaseServers

HTML

HTML

WebApps


WebBrowsers

MicrosoftEdge

InternetExplorer

Chrome

Opera

Firefox

Safari

HTML• HyperTextMarkupLanguage(HTML)• TheVisualAppearanceofaWebSite• “WebBrowserLanguage”:AllWebBrowserunderstandHTML

• HTML5isthelatest• MaintainedbyW3C

- WorldWideWebConsortium

<!DOCTYPE html><html><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body></html>

WYSIWYGHTMLEditors• AdobeDreamweaver(MonthlyPayment)• Kompozer (Free)• Bluegriffon (Free)• Sparkle($80),etc...OtherHTMLEditors(notWYSIWYG)• VisualStudio(ASP.NET)• CoffeeCup ($69,FreeTrial)• Coda($99)• ...

WYSIWYG– WhatYouSeeIsWhatYouGetYoudontneedtoknowHTMLsyntax- ItsjustlikeusingMSWord.

Onlypossible tochangetheHTMLsourcecodeandthenselect“Preview”inordertoseehowitlookslikeinaWebBrowser.YouneedtoknowHTMLsyntax

HTML

JavaScriptCSS

WebProgramming

UseHTML todefinethecontentofwebpages

UseCSS tospecifythelayoutofwebpages

TheWebProgrammingTriangle

UseJavaScript toprogramthebehaviorofwebpages

CSS

JavaScriptWeb

Server

WebArchitecture

WebServer

WebBrowserHTML JavaScriptCl

ient

CSS

Server-side

InternetExplorer Chrome Firefox Opera Safari

MicrosoftEdge

Client-ServerExample

Database

Client

WebServer

Request

Response

WebBrowser

InternetInformationServices(IIS),Apache,etc.




</body></html>

WebPlatform

Client-side

Server-side

WebBrowser

WebServer

WebPage(HTML)

HTML,CSS,JavaScript

ASP.NET,PHP,...InternetInformationServices(IIS),Apache,etc.

ThecoderunsontheserveranditsconvertedtoHTMLbeforesending totheclient(Web

Browser)

TheWebBrowsercreatesthevisualwebpageyouseeinthebrowserbasedontheHTMLcode

Example


HTMLWebPage

SimpleHTMLPageExample

14




</body></html>

HTMLCode

WebBrowser:

InthisExamplewewillcreateasimpleHTMLpageusingNotepadonly

Saveas.htmfileandopenfromFileExplorer

InthisExamplewewillcreateasimpleHTMLpageusingNotepadonly

ASP.NETWebApps


WebServer

ASP.NETC#/VB.NET

.NETFramework

WebBrowser

HTML JavaScriptServer-side

Client

ASP.NET

CSS

Theserver-sideASP.NETpagesareconvertedontheservertoHTMLpagesbeforeitissenttotheclient

ASP.NETisusedtocreatedynamicwebpages

WebSites

ASP.NETC#/VB.NET

.NETFramework

ASP.NETWebPages

ASP.NETWebForms

ASP.NETMVC

ASP.NET– DifferentwaysofcreatingWebSiteswithASP.NET

http://www.asp.net

Youcanuse(atleast)3differentapproacheswhencreatingWebSiteswithASP.NET

ASP.NETWebPages

ASP.NETWebForms

ASP.NETMVC

• SimilartothedesktopdevelopmentmodelusedinWPF• GUI(*.aspx files)andCode(*.aspx.cs)separatedindiff.Files• ForthosewhoarefamiliarwithWinForms,.NET,WPF,etc.

• MVC– Model- View– Controller• Anewdevelopmentmodelwhereyousplityourdevelopment

into3parts/components:ModelsforData,ViewsforDisplayandControllersforInput.For“Advanced”Developers

• SingePageModel(Theserver-sidecodeismixedinbetweentheHTML)

• UsestheRazorsyntax(.cshtmlfiles)• SimiliarasClassicASPandPHP• AtoolcalledMicrosoftWebMatrixisoptimizedforthis

developmentmodel,butyoucanalsouseVisualStudioifyouwantto.

ASP.NETWebFormsCreateaNewProjectinVisualStudio

Example


ASP.NETWebFormApp

ASP.NETWebFormExampleWhenyouarefinished,yourWebAppshouldlooksomethinglikethis:

WhenyouenteryourNameintheTextBox andclicktheOKButton,theprogramshouldrespondwithagreetings.

Title(ordinaryHTMLtext,orLabel)

TextBox ButtonLabel

Label

LetscreatethisExamplewithVisualStudio

WebServer


WebServerPlatforms

Thetermwebservercanrefertoeitherthehardware(thecomputer)orthesoftware(thecomputerapplication)thathelps todeliverwebcontentthatcanbeaccessedthroughtheInternet.Themostcommonuseofwebserversistohostwebsites, butthereareotherusessuch asgaming,datastorageorrunningenterpriseapplications.

InternetInformationServices

ASP.NETCross-platform:UNIX,Linux,OSX,Windows, ...

(pronounced "enginex")- Hasbecomeverypopularlately

PHP

WebServerPopularity

http://news.netcraft.com/archives/2015/09/16/september-2015-web-server-survey.html

InternetInformationServices(IIS)


InternetInformationServices(IIS)

• WebServerfromMicrosoft• IntegratedwithWindows

https://en.wikipedia.org/wiki/Internet_Information_Services

InternetInformationServices(IIS)• IIS– InternetInformationServices• WebServerthathosttheWebPages/WebSite• MakesuretohavetheIISRoleinstalledwithASP.NETsub

components

DefaultIISDirectory:C:\inetpub\wwwroot

Installation/Configuration

YouneedtoturnIISon

Searchfor«Windows Features»oropentheControlPanel

InternetInformationServices(IIS)Manager

Deploy/PublishWebServicetoIISCopyWebServiceFiles(Project)todefaultIISDirectory:C:\inetpub\wwwroot

Example


DeployHTMLWebSitetoIIS

IISDeployment<!DOCTYPE html><html><body>



</body></html>

IISDeployment

TestyourWebPageinyourWebbrowser

“localhost”isyourpersonalcomputer, youcamalsouse

yourIPaddress.

WebServer

YourDevelopmentPC PCwithWebBrowser

Clients

WebPageDevelopment

ToolE.g.VisualStudio

SimpleHTMLPageExample

40




</body></html>

HTMLCode

WebBrowser:

Example


DeployASP.NETWebApptoIIS

CreateWebAppinVisualStudio

CreateandTestWebAppinVisualStudio


1

2

3

RenameyourWebForm orAddNewDefaultDocument

CopyyourVisualStudioProject

AddyourApplication inIISManager

ThenTestyourWebApp4

TestIt

NotWorking?• Installcorrect.NETFrameworkintheVirtual

Machine• MakesuretheIISUserhasaccess(“owner”or

“read/write”)totheSQLServerDatabase

Example


DeployASP.NETWebAppswithVisualStudio

Deployment/PublishAlternatives:- Createa“InstallationPackage”thatyouortheCustomerneedtoinstallontheserver(WebDeployPackage)

- Deploydirectlytotheserverusing“WebDeploy”(Youneedtohaveonlineaccesstotheserver)

- Deploydirectlytotheserverusing“FTP”(Youneedtohaveonlineaccesstotheserver)

- FileSystem

50

DeploymentAlternative#1


FileSystemDeployment

FileSystemDeploymentRight-clickon theASP.NETProjectintheSolutionExplorerinVisualStudioandselect“Publish...”

Copy«MyWebApp»TotheIISFolder(inetpub/wwwroot)


1

2

3

RenameyourWebFormorAddNewDefaultDocument

CopyyourVisualStudioProject

Then Testyour WebApp

AddyourApplication inIISManager

4

TestIt!

DeploymentAlternative#2


WebPackageDeployment


Right-clickon theASP.NETProjectintheSolution ExplorerinVisualStudioandselect“Publish...”

Ifyoumissthe“Deploy”option,makesuretoinstallthe“WebDeploy”features.YoumaydownloadandinstallitfromWebPI(WebPlatformInstaller)(Googleitanddownloadit)

CreateWebPackageWizard

CreateWebPackageWizardIfyourWebAppusesaDatabaseconnectioninWeb.config, youmaysetuptheConnectionStringontheServerhere.

YoumayfillintheConnectionString totheDatabase

PreparationYoumayneed toinstallthe“WebDeploy”softwareontheServerDownloadWebPI(WebPlatformInstaller)andthenselecttoInstall“WebDeployforHostingServers”

ImportPackageinIIS

ImportPackageinIISMakesureyouhavecopied theInstallationPackagetotheServer

TestIt


UniversityCollegeofSoutheastNorwaywww.usn.no

E-mail:[email protected]:http://home.hit.no/~hansha/

web apps and internet information...

Documents