MIS 3200 – C# (C Sharp)

Naming conventions CamelCase (or CamelBack) notation – All letters in a word are lowercase except for the first letter – Additional words are joined to the first starting with a capital letter followed by lowercase letters until the next word. (ThisIsAnExample) – Our folders and file names will be in CamelCase and will only contain letters and numbers (no spaces or other characters) – Acronyms are treated as separate words so they will be capitalized (MIS3200Example)

Unit 1.1 L1 Let’s create a Web Site Purpose – A home for all your MIS classes Design – Principles: learned in MIS2010 (MIS201B) – Tools: Visual Studio Express 2012 – Elements: C# script, style sheets, master pages

Let’s get started… Locate and select VS Express for Web from the start menu. Note: the exact position in the Start menu may be different on your computer

Get Started - Welcome Screen (what you should see after you select VS Express) Since we have not already created our web site, this is where we will begin. Click File (in the menu bar), then click “New Web Site” Since we have not already created our web site, this is where we will begin. Click File (in the menu bar), then click “New Web Site”

Create your MIS Portfolio Web Site 1.Click New Web Site… 2.Select Visual C# 3.Select ASP.NET Web Forms Site 4.Click the Browse button 5.Select the Desktop 6.Type \ASPPub after the word “Desktop” in the Folder box - the folder path should look like: C:\Users\yourOhioID\Desktop\ASPPub 7.Click Open 8.Click Yes 9.Finally, click OK The next slide demonstrates these steps

New web site creation window

Default web page Click here to see the toolbox Click here to see the toolbox Click here to switch the window from “Source” to “Design” view The “Solution Explorer” shows all folders and files for the web site The “Solution Explorer” shows all folders and files for the web site The “Properties” shows controllable options for the currently selected item You can see which files you are currently working on or have recently opened

Creating folders Right-click here to add folders (and files) to the web site Let’s set up the folder structure that we will be using for the rest of the quarter. We start by creating a “top-level” folder (one that is found at the top of our web site) called MIS3200 and continuing by making several “sub- folders” (folders that will be contained in the “MIS3200” folder). The sub- folders will be named Images, Unit1, Unit2 … Unit7

Our folder structure First, add a folder named MIS3200 Next, create several sub-folders by right-clicking MIS3200 and selecting New Folder. The first folder will be named Images, the rest of the folders will be named Unit1, Unit2, up through Unit7 Be sure to name the folders exactly as you see them listed here. The folders all start with an Uppercase letter and contain no spaces.

Two views, one page Visual Web Developer provides two different views of a web page – Source View Shows the HTML that defines the page Allows us to work directly with HTML tags – Design View Shows what the page will look like Allows us to design a page using drag-and-drop controls Today we will work with the “Design” view and talk about the “Source” view in our next class. Today we will work with the “Design” view and talk about the “Source” view in our next class.

Default web page Click “Design” to see a visual representation of what our web site is going to look like Click “Design” to see a visual representation of what our web site is going to look like This is the new Default.aspx page in Sourceview. We need edit this page to fit our needs but before we can do that we need to understand how this page is designed.

Web page design In MIS2010 (MIS201B) you learned the basic principles of good design – Proximity – Alignment – Repetition – Contrast We can use “master pages” to help us with the first three principles

Master Page Contains information common to several pages Is a separate file that has to be created and edited separately from “content” pages Changes on the master page will automatically appear on all content pages that use it

Opening a master page Next, change to the Design view First, double-click Site.master in the solution explorer to open up the master page

Editing the master page Select the page heading “your logo here” and replace it with “[YOUR-NAME]’S MIS PORTFOLIO” Select the page heading “your logo here” and replace it with “[YOUR-NAME]’S MIS PORTFOLIO” Changes you make to the Master page will appear on all pages that use it.

Editing the master page Change the copyright information to: “Copyright 2013 Your Name” Change the copyright information to: “Copyright 2013 Your Name”

Saving your changes After you are finished making any changes to a page, be sure to save the file. Click on the multiple disks button to save all open files.

Content Page / Web Form Unlike a master page, content pages only contains information relevant to themselves For MIS3200, all content pages will be “Web Forms” which allow for rich content to be quickly added and easily edited Content pages are what you commonly encounter when you think “web page”

Adding a web page Right-click here to Add New Item to the web site. We will add a Web Form (web page) to the web site. Right-click here to Add New Item to the web site. We will add a Web Form (web page) to the web site.

Create your MIS3200 Home Page 1.Right-click MIS Click Add New Item… 3.Select Visual C# 4.Select Web Form 5.Change the default name of the web form to MIS3200YourName.aspx 6.Check Select master page 7.Click Add 8.Select the master page Site.master 9.Click OK The next slide demonstrates these steps

New web site creation After you click OK Visual Web Developer should look similar to the next slide

MIS3200 home page Change to the Design view

MIS3200 home page Note, changes to the web page are only allowed in the content area. If you want to make changes to the header, footer or navigation, you must open and edit the master page.

MIS3200 home page 1st, enter the following text into the content area: Welcome to my MIS3200 Course Home Page 1st, enter the following text into the content area: Welcome to my MIS3200 Course Home Page 2nd, change format option from Paragraph to Heading 2 Notice how the text appears to be capitalized now. This is a result of a style sheet and we will talk about this in our next class. 2nd, change format option from Paragraph to Heading 2 Notice how the text appears to be capitalized now. This is a result of a style sheet and we will talk about this in our next class.

MIS Portfolio home page If the page was already open, you will see the name here. Single-clicking the name will show the file. If the page was already open, you will see the name here. Single-clicking the name will show the file. If the page is closed, you use the Solution Explorer to find the file in question and double-click the file name to open it. We are going to go back to the Default.aspx page and make some changes. Switching between pages is easy - simply find the page in question and click on it.

Modifying the MIS Portfolio 2nd, change format option from Paragraph to Heading 2 Notice how the text appears to be capitalized now. This is a result of a “style sheet”. 2nd, change format option from Paragraph to Heading 2 Notice how the text appears to be capitalized now. This is a result of a “style sheet”. 1st, delete ALL of the text found in the featured content area and content area and then enter the following text: Welcome to my mis course home page 1st, delete ALL of the text found in the featured content area and content area and then enter the following text: Welcome to my mis course home page

Modifying the MIS Portfolio 2 With the cursor immediately after PAGE (click after the word PAGE), press Enter on your keyboard a few time to expand the area so we have a larger space to work with.

Modifying the MIS Portfolio 3 Add text My MIS Courses Under My MIS Courses add a bullet point by selecting Format -> Bullets and Numbering And select Plain Bullets Under My MIS Courses add a bullet point by selecting Format -> Bullets and Numbering And select Plain Bullets

Working with the Toolbox Click on the Toolbox to access controls and other objects If you would like the Toolbox to remain on the screen, you can use the pin button to make it stay. Clicking the pin button a second time will “auto-hide” the Toolbox.

Adding a HyperLink Drag the HyperLink control and drop it after the bullet point We will talk more about controls in our next class

HyperLink Properties 1st, right-click the HyperLink and select Properties Doing this will show you the Properties window for the HyperLink we added to the page. On the next slide we will modify some of the HyperLink’s properties.

HyperLink Properties 2 1st, set the Text property to MIS3200 2nd, set the ID property to hlMIS3200 See the next slide on how to set the NavigateURL property

HyperLink Properties 3 1.Click in the text box to the right of NavigateURL 2.Click the NavigateURL details button 3.Select the MIS3200 folder 4.Select MIS3200YourName.aspx 5.Click OK 6.The NavigateURL property is now set

Running the web site We are now ready to see if everything works. We will talk about what debugging means later We will talk about what debugging means later 1st, click the Start Debugging button (also known as the Run button) 2nd, make sure debugging is enabled and click OK

What your web site looks like Click MIS3200 to make sure your HyperLink takes you to the MIS3200 Course Home Page Your web site should look similar to these two pages

How does the web site run? The website runs when you click on the Debug menu in Visual Studio Express and select Start Debugging. A web page opens up whose URL looks like: Also, in the bottom right hand corner you will see an icon that shows that a page is running on your computer.

Unit 1 L1 Portfolio Framework Directions 1.After completing slides If it is not already open, then open and run the website/project from your DESKTOP 3.Open the webpage “../MIS3200/MIS3200JoeBobcat.aspx” 4.Click on Debug (menu) > Start Debugging 5.Use the Snipping tool to get a picture of the page running, that includes the web address 6.The web address will include the word “localhost”. 7.Submit the snapshot to the dropbox. 8.The URL is not needed this week because the webserver is under maintenance.

Closing VS Express Now we are ready to close Web Developer. Click the X in the upper-right corner. If you are still in debugging mode (running), click Yes to stop debugging.

Moving the web site to the ASPNET server – step by step Start by completely Closing VS Express and find your desktop. 1.On the desktop, right-click the ASPPub folder and Cut 2.Double-click the ASPNET shortcut on your desktop 3.Re-name the existing ASPPub folder to ASPPub.old *** if you already have an ASPPub.old folder – rename ASPPub to ASPPub.oldx, where x is a number one larger than the previous number, e.g. ASPPub.old2 *** 4.Paste the new ASPPub folder below the old one in the “white space” area Since the web server is bring upgraded, the next step will not work. Once the upgrade is complete, this is what you will need to submit each time (instead of the snapshot). Open a web browser and run the web site using its public URL (this is your public MIS Portfolio URL):

Moving the web site to the ASPNET server - visually Let’s see what our MIS Portfolio web site looks like after deploying (copying and verifying that it works) it to a public web server… (right-click and re-name) 4 (right-click and paste here in the white space) After step 4, you should see the ASPPub folder

What your web site looks like on the ASPNET server It should look the same as when it was running locally (i.e. from the localhost); however, it should now be available to everyone on the Internet With a Publicly accessible URL

To get credit… To get credit for your L1 assignment: a.Submit a screenshot of the MIS3200JoeBobcat.aspx running from your DESKTOP and upload the screenshot to the appropriate dropbox on ISMS. b.Copy your ASPPUB folder to your ASPNET (server location).

Think About It! What is a master page? What is a content page? What is localhost? Why do we need a public URL?