End Demo - Akber Alwani Blog | .NET Professionals User Group



Learning WebMatrix – Part 3: DemoDemo OverviewThis demo shows how to create custom helpers, how to Install a WebApp with WebMatrix Installer, and how to publish a Web site.FeaturesDemo FlowPrerequisitesDurationMicrosoft WebMatrix 20 mins This demo will show how to create custom helpers using Razor syntax. In the first part, we will show how to create a helper that will render an email address. Then, we will create an inline C# helper to render a formatted date.Talking PointsDemo stepsScreenshotsCreating an inline CSHTML helperNow we will create a custom helper that will render an e-mail address as a link.To create a helper, we place a cshtml file in App_Code folder. We define @helper methods inside that file.To use the helper, we just need to write “@filename.helpername”. Open the Web site HelpersEmail Open App_Code/MyHelpers.cshtml and highlight the helper code:@helper ShowEmail(string email) { <a href="@email">@email</a>}Pause on @helperOpen Page.cshtml to show how the helper is usedHighlight this line:@MyHelpers.ShowEmail("john.s@")Run the Web siteScreenshot 1: E-mail addressesCreating an inline C# helper using @functions This approach is an enhancement of Razor Inline code helpersIt is useful to include .NET framework functionality.In this example we will use .net string formatting to show the current date.To create an inline helper in c#, we have to define static methods inside a @functions code block. C# helper methods are called in the same way as the inline razor helpers. Open the helper file App_Code/MyInlineHelpers.cshtml and highlight FormatDate method:@functions{ public static string FormatDate(string format) { return String.Format(format, DateTime.Now); } }Pause on @functions block.Open Page2.cshtml to show how the helper is consumed.Highlight the line :<p>Long date: @MyInlineHelpers.FormatDate("{0:D}")</p> <p>Short time: @MyInlineHelpers.FormatDate("{0:t}")</p>Run the Web siteScreenshot 2: Inline C# helpers exampleThis demo will show how to integrate DotNetNuke with WebMatrix, and easily customize the site before publishing it.Talking PointsDemo stepsScreenshotsDotNetNuke is a content management platform (CMS) for building professional websites with dynamic content and interactive features.By using CMS platforms, any authorized user can edit the content and create new pages without the need of programming skills.DotNetNuke has features for commercial websites, community portals and intranets as well.Setup: Installing DotNetNukeNote: Before executing this demo, make sure you’ve installed the Web Platform Installer 3It is recommended to execute these steps before presenting demo in order to have DotNetNuke already downloaded in the computer that will be used. This will prevent the download delay time.Create New Site from Web GallerySelect DotNetNuke Community Edition and click NextIn the EULA Dialog Box, click on I AcceptOnly for users of Windows Vista/7 without administration privileges: click Yes on the message dialog “Do you want to allow the following program from an unknown publisher to make changes on this computer”?After this step, DotNetNuke will be downloaded.When the installation ends, WebMatrix will create a new DotNetNuke web site. Pause on files and show the project structureScreenshot 1: DotNetNuke successfully installedScreenshot 2: The DotNetNuke project created by WebMatrixRunning DotNetNuke for the first timeNow we will run and set up DotNetNuke Choose automatic installation Run the site for the first time. You will load a Web page with DotNetNuke Installation Wizard.In the dialog box Select Installation Method, choose Auto and click NextIn the Installation results page, click on Click here to access your portal to load home page.Pause on the portal page.Screenshot 3: DotNetNuke Install WizardScreenshot 4: A successful set upScreenshot 5: DotNetNuke home pageCustomizing the portalWebMatrix integration makes easier to edit the templates offline, before publishing. We can create many DotNetNuke portals for testing purposes in minutes, and have local copies of it. Click on Login, and enter admin for the user and dnnadmin for the password.The portal will ask to change your password. Write 12345678 as the new password and login again.Pause on the portal. Walk through the main tasks such as creating a new page.Screenshot 7: adding a new pageThis demo will show how to take advantage of the Search Engine Optimization Reports Workspase included in WebMatrix. Talking PointsDemo stepsScreenshotsSEO Reports will check and identify issues, such as broken links or HTML errors, that could make your site less visible for search engines. After repairing those issues your site will be more discoverable.In Advanced Settings, we can specify the maximum urls to crawl and the maximum download sizeThe report returns 8 warnings, related to <meta> tag description. Search engines use the meta tag to know about the page. The more information we provide in the meta tag, the better the page ranks.Create a new site from template choosing BakeryGo to Reports, and create a new report.Run the report for the Bakery site. The report should return 8 warnings.Expand the issues and pause on the warning messageScreenshot 1: New SEO reportScreenshot 2: Issue listScreenshot 3: Issue list expandedTo fix the issues, we will have to include meta description tag in _SiteLayout.cshtml, where head is defined. After running again the report, we will see there are no issuesFixing the warning and generating the reports:Open _SiteLayout.cshtmlAdd the tag <meta name="description" content="Fourth Coffee store – Cupcakes, European bakery, chocolate cakes and hot drinks"> immediately after the head tag <head>.Save and rerun the report for Bakery. Pause on resultsScreenshot 4: Description meta tag addedScreenshot 5: No issuesThis demo will show how to publish a Web site using a WebmatrixTalking PointsDemo stepsScreenshotsOpen the app we had been writing from scratchShow the hosting gallery, talking points – lots of cheap hosting providers to choose fromPrep work for presenter – sign up with a host and make a note of the credentials.? Remove any old app demos from the host prior to the demo.Publish the application, show the publishing progress.Make one change.Republish – highlight that we only publish the changed file.In this demo, we will learn how to publish a site in a hosting provider. There are lots of inexpensive and free hosting providers for WebMatrix.You need to sign up with one of them and then use WebMatrix to publish your site. We will use an existing site to focus on the deployment process. First of all, we’ll see the current site working Open WebMatrix and select New Site -> Site from FolderSelect Source\Code and then WebGridRun the site to view the WebGrid showing products from the database.Publishing Site hosting options.Review the hosting gallery.Select a provider and explain that we have a user already signed up for demo purposes.Click on the Publish menu and select Find Web HostingReview the Web Hosting list. Mention that there are a lot of options in . We will use Adhost for this demo, but any of the hosts listed could be used as well.Explain that before publishing a site, we have to sign up to a hosting provider. Adhost would ask for a Name, Last Name and Email Address and would send a registration confirmation email with more instructions. Publishing the siteEntering the credentialsSelect the Database for the first deployment.Proceeding to publish the siteClick on the Publish menu and select Settings.A Publishing Settings window pops up. Select the Web Deploy Protocol and enter the following data:Server: : farm1\20474Password: Lp6$8vA@Sitename: 20474rdjv4.YourApplicationDestination URL: Select Save Password and click on Validate Connection to check it. Click on PublishA Publish Compatibility dialog will appear to ask permission for testing if your site is compatible with the server. This test will upload a few files and delete them after the test, but it is not necessary to run it. Click No.The Publish Preview window shows the list of files to be copied. Because this is the first deploy, make sure that Bakery.sdf database is checked so it is copied to the site and click Continue.A status bar will indicate that the site is being published.Verifying site publicationAfter the publication process finishes, the site can be viewed in the hosting provider.The process shows you a message indicating that the publication process is finished.Click on the link and view the site published in your hosting providerHighlight that the URL includes the site of the provider. Editing your site content and publishing it.During the lifecycle of your sites you will need to introduce changes, new functionalities and enhancements.With WebMatrix we are only publishing what we have modified, using less time and less bandwitdth. Local testing: Explain that it is not a good idea to publish your changes directly as we are going to do in this demo step. It’s a good practice to perform a local test before uploading. Open the default.cshtml file in the Files view.Uncomment the following line to alternate colors of the rows in the grid@*.alt { background-color: #E8E8E8; color: #000; }*@Save the File and click on the Publish menuThe Publish Preview window shows the files that had changed. Because this file is the one we modified, accept the changes and click on ContinueHighlight that this second deploy took less time. Mention to be carefull with uploading the local and the remote dababase. Local database shouldn’t be copied.Verify that the changes were applied by browsing the publishing page: To find an Adhost account working with the site already uploaded, you can check:Server: : farm1\20469Password: Eh1$7xH@Sitename: 20469xsiv4.YourApplicationDestination URL: End Demo ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download