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?