web apps and internet information...
Post on 07-Mar-2018
219 Views
Preview:
TRANSCRIPT
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
Hans-PetterHalvorsen,M.Sc.
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.
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</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
Hans-PetterHalvorsen,M.Sc.
HTMLWebPage
SimpleHTMLPageExample
14
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
HTMLCode
WebBrowser:
InthisExamplewewillcreateasimpleHTMLpageusingNotepadonly
Saveas.htmfileandopenfromFileExplorer
InthisExamplewewillcreateasimpleHTMLpageusingNotepadonly
ASP.NETWebApps
Hans-PetterHalvorsen,M.Sc.
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
Hans-PetterHalvorsen,M.Sc.
ASP.NETWebFormApp
ASP.NETWebFormExampleWhenyouarefinished,yourWebAppshouldlooksomethinglikethis:
WhenyouenteryourNameintheTextBox andclicktheOKButton,theprogramshouldrespondwithagreetings.
Title(ordinaryHTMLtext,orLabel)
TextBox ButtonLabel
Label
LetscreatethisExamplewithVisualStudio
WebServer
Hans-PetterHalvorsen,M.Sc.
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)
Hans-PetterHalvorsen,M.Sc.
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
Hans-PetterHalvorsen,M.Sc.
DeployHTMLWebSitetoIIS
IISDeployment<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
IISDeployment
TestyourWebPageinyourWebbrowser
“localhost”isyourpersonalcomputer, youcamalsouse
yourIPaddress.
WebServer
YourDevelopmentPC PCwithWebBrowser
Clients
WebPageDevelopment
ToolE.g.VisualStudio
SimpleHTMLPageExample
40
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
HTMLCode
WebBrowser:
Example
Hans-PetterHalvorsen,M.Sc.
DeployASP.NETWebApptoIIS
CreateWebAppinVisualStudio
CreateWebAppinVisualStudio
CreateandTestWebAppinVisualStudio
InternetInformationServices(IIS)Manager
1
2
3
RenameyourWebForm orAddNewDefaultDocument
CopyyourVisualStudioProject
AddyourApplication inIISManager
ThenTestyourWebApp4
TestIt
NotWorking?• Installcorrect.NETFrameworkintheVirtual
Machine• MakesuretheIISUserhasaccess(“owner”or
“read/write”)totheSQLServerDatabase
Example
Hans-PetterHalvorsen,M.Sc.
DeployASP.NETWebAppswithVisualStudio
Deployment/PublishAlternatives:- Createa“InstallationPackage”thatyouortheCustomerneedtoinstallontheserver(WebDeployPackage)
- Deploydirectlytotheserverusing“WebDeploy”(Youneedtohaveonlineaccesstotheserver)
- Deploydirectlytotheserverusing“FTP”(Youneedtohaveonlineaccesstotheserver)
- FileSystem
50
DeploymentAlternative#1
Hans-PetterHalvorsen,M.Sc.
FileSystemDeployment
FileSystemDeploymentRight-clickon theASP.NETProjectintheSolutionExplorerinVisualStudioandselect“Publish...”
Copy«MyWebApp»TotheIISFolder(inetpub/wwwroot)
InternetInformationServices(IIS)Manager
1
2
3
RenameyourWebFormorAddNewDefaultDocument
CopyyourVisualStudioProject
Then Testyour WebApp
AddyourApplication inIISManager
4
TestIt!
DeploymentAlternative#2
Hans-PetterHalvorsen,M.Sc.
WebPackageDeployment
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
WebPackageDeployment
TestIt
Hans-PetterHalvorsen,M.Sc.
UniversityCollegeofSoutheastNorwaywww.usn.no
E-mail:hans.p.halvorsen@hit.noBlog:http://home.hit.no/~hansha/
top related