MIS 3200 – C# (C Sharp) http://aspnet.cob.ohiou.edu/mis3200/ASPPub Let’s create a Web Site Purpose A home for all your MIS classes, including MIS3200 Design? Principles? Those learned in MIS2010 , (MIS201B), including…Proximity, Alignment, Repetition, Contrast Tools? HTML, style sheets, master pages (and some coding, but only later!) Let’s get started… Locate and select Visual Web Developer 2010 Express 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 Visual Web Developer) 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” Get Started - Welcome Screen (what you will likely see at home after installing Visual Web Developer) A new install of Visual Web Developer Express will show you a start page that looks like this. You can use the “New Web Site” link here the same as we just did under the File menu. Create your MIS Portfolio Web Site 1. 2. 3. 4. 5. 6. 7. 8. 9. Click New Web Site… Select Visual C# Select ASP.NET Web Site Click the Browse button Select the Desktop Type \ASPPub after the word “Desktop” in the Folder box - the folder path should look like: C:\Users\yourOhioID\Desktop\ASPPub Click Open The next slide demonstrates Click Yes these steps Finally, click OK New web site creation window 2 3 5 1 8 6 7 4 After you click OK Visual Web Developer should look similar to the next slide 9 Default web page You can see which files you are currently working on or have recently opened The “Solution Explorer” shows all folders and files for the web site Click here to see the toolbox The “Properties” shows controllable options for the currently selected item Click here to switch the window from “Source” to “Design” view There is a lot going on here but don’t panic, you don’t need to know it all at once Creating folders 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 Right-click here to add folders (and files) to the web site Our folder structure 1st, add a folder named MIS3200 MIS3200 2nd, 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. 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) 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. Default web page This is the new Default.aspx page in Design view. We need edit this page to fit our needs but before we can do that we need to understand how this page is designed. Click “Design” to see a visual representation of what our web site is going to look like 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 1st, double-click Site.master in the solution explorer to open up the master page 2nd, change to the Design view Editing the master page Changes you make to the Master page will appear on all pages that use it. Select the page heading “MY ASP.NET APPLICATION” and replace it with “YOUR NAME’S MIS PORTFOLIO” Editing the master page Click immediately below and to the left of the purple box and add copyright information to the master page: “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. Create your MIS3200 Home Page 1. 2. 3. 4. 5. 6. 7. 8. 9. Right-click MIS3200 Click Add New Item… Select Visual C# Select Web Form Change the default name of the web form to MIS3200YourName.aspx Check Select master page Click Add Select the master page Site.master Click OK The next slide demonstrates these steps New web site creation 3 1 4 2 8 9 5 6 After you click OK Visual Web Developer should look similar to the next slide 7 MIS220 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 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 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. 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. Modifying the MIS Portfolio 1st, delete ALL of the text found in the content area and then enter the following text: Welcome to my mis 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. 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 Working with the Toolbox Move the mouse over the Toolbox to access controls and other objects If you would like the Toolbox to remain on the screen, you can use the 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 before after 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. 2. 3. 4. 5. 6. Click in the text box to the right of NavigateURL Click the NavigateURL details button 1 Select the MIS3200 folder Select MIS3200YourName.aspx Click OK The NavigateURL 3 property is now set 2 4 5 6 Running the web site We are now ready to see if everything works. 1st, click the Start Debugging button (also known as the Run button) 2nd, make sure debugging is enabled and click OK We will talk about what debugging means later 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? Notice the URL? It has the word localhost Web Developer Express sets up a temporary web server on your local computer so you can access your new web site. You can see this in the lower right corner of your computer. The problem? Only YOU can access your localhost web site. We now have to deal with getting your web site moved over to a public web server where anybody can access the web site. To make our web site publicly available we must copy it to the ASPNET server. This is demonstrated on the next few slides. Closing Web Developer 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 Web Developer 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 5. Open a web browser and run the web site using its public URL (this is your public MIS Portfolio URL): http://aspnet.cob.ohio.edu/YourOhioID/ASPPub Moving the web site to the ASPNET server - visually 2 3 (right-click and re-name) 4 (right-click and paste here in the white space) 1 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… After step 4, you should see the ASPPub folder What your web site looks like on the ASPNET server Publicly accessible URL 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 Unit 1.1 Portfolio Framework Directions 1. 2. Complete slides 4-40 Submit your MIS Portfolio public URL to the drop box called: Unit 0 Portfolio Framework Note, it should look something like this: http://aspnet.cob.ohio.edu/YourOhioID/ASPPub To get credit… To get credit for your L1 assignment: a. b. Verify the MIS Portfolio page looks and functions as described in the slides via the public URL Verify the MIS3200 Course Home Page looks and functions as described in the slides via the public URL What next? (the next set of lecture notes) and submit your public URL to drop box. All L1 (and L3) assignments are due 10 minutes BEFORE the start of class Think About It! What is a master page? What is a content page? What is localhost? Why do we need a public URL?