MIS 3200 – C# (C Sharp)

http://aspnet.cob.ohiou.edu/mis3200/ASPPub

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 L1Let’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”

Create your MIS Portfolio Web Site

1. Click New Web Site…2. Select Visual C#3. Select ASP.NET Web Forms Site4. Click the Browse button5. Select the Desktop6. Type \ASPPub after the word “Desktop” in the Folder box -

the folder path should look like:C:\Users\yourOhioID\Desktop\ASPPub

7. Click Open8. Click Yes9. Finally, click OK

The next slide demonstrates these steps

New web site creation window

2

3

4

1

5

6

8

7

9

Default web page

Click here to seethe 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 “Properties” shows controllableoptions for the currently selected item

You can see which files you are currentlyworking 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 structureFirst, add a foldernamed MIS3200

Next, create several sub-folders

by right-clicking MIS3200 andselecting New Folder.

The first folder will be namedImages, the rest of the folderswill 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.

Default web page

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 explorerto 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”

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”

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 Itemto the web site. We will add a WebForm (web page) to the web site.

Create your MIS3200 Home Page

1. Right-click MIS32002. Click Add New Item…3. Select Visual C#4. Select Web Form5. Change the default name of the web form to

MIS3200YourName.aspx6. Check Select master page7. Click Add8. Select the master page Site.master9. 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

4

6

3

7

12

5

8

9

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

2nd, change format option fromParagraph to Heading 2

Notice how the text appears to be capitalized now. This is a result of a style sheet and we will talk aboutthis 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 is closed, you usethe 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 fromParagraph 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

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 NumberingAnd 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 NavigateURL2. Click the NavigateURL details button3. Select the MIS3200 folder4. Select MIS3200YourName.aspx5. Click OK6. The NavigateURL

property is now set

21

5

4

3

6

Running the web site

We are now ready to see if everything works.

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 4-402. If it is not already open, then open and run the

website/project from your DESKTOP3. Open the webpage “../MIS3200/MIS3200JoeBobcat.aspx”4. Click on Debug (menu) > Start Debugging5. Use the Snipping tool to get a picture of the page running,

that includes the web address6. 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 Xin 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 Cut2. Double-click the ASPNET shortcut on your desktop3. 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): http://aspnet.cob.ohio.edu/YourOhioID/ASPPub

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…

2

1

3 (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?