visual basic homework help

Hello,

Use the attached handout and the files to complete Tutorial 1. When you are done, submit the link to your Home page here.

Web Application Tutorial 1: Homepage
In this assignment you will:
⇒ Add .aspx pages to your project
⇒ Add web user controls and register them on .aspx pages
⇒ Create master pages and editable regions
⇒ Learn to integrate your projects with .css style sheets and JavaScript
I. Open and Review a Web Application
Start VS.NET and open your project (File  Open Web Site). Make sure that File System is selected as the
source. Choose the drive you mounted (remember to connect through VMWare if you are off campus) and
open it.
As you can see in the solution explorer (right), your website already includes multiple files and folders. The
name of your site is in bold on the top. You should see the folders such as App_Code, bin, Images, Scripts
and Contents. There are many files that need to be present in every website in its root, such as web.config.
Do not copy, move or delete any of the folders and files that were there from the moment it was created –
as we progress in the course, you will learn the purpose of most of them.
Next, we will build the site master page, or the page that will be the source of the rest of the pages. Each
master page has…
1. …sections that cannot be changed. For example, if you have a set of menu buttons and want to keep it
the same through the entire site, place it in a non-changing area of the site template. The nonchanging sections create the uniformity of the site.
2. …sections that can be changed, or the editable regions. These regions are usually left blank on the
master page and are edited later, when we create more pages from the master.
Goreva VB.NET, INFS 3121/6121
1
Web Application Tutorial 1
II. Create the Master Page
The master page that we will design for our website includes four sections:
Top section, includes the banner picture and the links – non-editable
Left section, includes
product categories –
non-editable
Main area, includes the contents of the future pages – editable
Bottom section, includes the same links as the top and the copyright info – non-editable
We will add the master page to the root of the site. Right click on the Content folder and select Add  Add
New Item. You may notice that some menus will already have Master Page, so you can select it if you see it.
If not, select Master Page when the Add New Item menu comes up. Give your page a meaningful name (I
named mine Template.master) and click Add.
You will see a blank page with the only section named Content Place Holder. In fact, if you switch to the
Source view and see the HTML code, you will see two content place holders. One on the top is called
“Content1” (or “head”) and includes the items that will not be seen on the page, such as page title, scripts,
and links. The other content place holder is called “Content2” (or “Main”, as I will refer to it in the future)
and includes the items that will show on the page, such as controls, text, and tables. We will mostly use the
second content place holder as the main one.
We will need to add contents to the Master page. One way to do it is to place everything we need on the
Master page. The problem with this approach is that it creates a clutter of web elements on the page and it is
difficult to follow, especially for a beginner. That’s why we will break the contents into four areas: Top, Left,
Bottom, and Main, and add each of them separately, by creating a web user control for each of them.
We will also need the styles for different elements, such as tables, table cells and links. Like the Master page,
the style sheet and the rest of the pages will be placed in the Contents folder.
Right click on the Contents folder and add a new style sheet to your project (Content  Add  Style Sheet).
Give it a meaningful name (e.g. ProjectStyles.css). This style sheet will contain all page styles in the site.
Erase its contents and copy the contents of the text file ProjectStyles.txt to the new style sheet.
Goreva VB.NET, INFS 3121/6121
2
Web Application Tutorial 1
III. Add Web User Controls
You already know the most common (and may be not so common) controls, such as a text box, a button or a
drop down combo box. A web user control is a control just like one of these, but designed by the
programmer. After a web user control is created, working with it is not so different than working with other
controls: you can drag it from the Solution Explorer and drop on the form, where you want it to be. The only
difference is, you drag the common controls from the Toolbox; you drag the web user controls from the
Solution Explorer. This approach reminds a lot of the lego.
III-1. top.ascx
Right click Content and add a new web user control to your Content folder; name it top.ascx.
Many pages that you add to the project (such as .aspx and .ascx) have three different views. You can switch
views by clicking Design, Split, and Source buttons at the bottom of the screen. The Design view shows the
page as it will look in the browser. The Source view shows only the HTML code of the page. Finally, the
Split view lets you see both the design and the code. Practice switching among the views using the top
control that you just added.
Add a link to your style sheet to the code of the document, just below the top line:
The link that we added has three attributes: (1) href points to the style sheet file, (2) rel tells that we are
linking to a style sheet, and (3) type shows that the type of the file is css or text.
Add a table to your form (you can either type the code of the table in the Source view, or click the TABLE
menu on the top if you are in Design view). The table should include two rows and one column. Remember
that the rows are coded with the tags and the columns with the tags. The top_main style comes from
the style sheet.
Right click the folder Images and choose Add  Existing Item to add the banner picture banner.jpg to the
folder Images. Hint: if you do not see the image in the folder where you saved it, you may need to change the
types of the filtered files from .aspx and other to All files. Drag the banner from the Images folder to the top
row of the table you’ve just added.
In the second row, insert another table with 1 row and 5 columns. Set the class of the table to top_links
In table cells insert the following links, left to right: Home, Products Catalog, Shopping Cart, Contact Us,
and Log In.
Goreva VB.NET, INFS 3121/6121
3
Web Application Tutorial 1
Home
Product Catalog
Shopping Cart
Contact Us
Login
The pages catalog.aspx, cart.aspx, etc. do not exist yet, so most links will not work until we add these pages.
You user control will look somewhat like this:
Build your project and save it.
III-2. left.ascx
Add a new web user control to your Content folder, similar to what you did in the previous step. Name it
left.ascx.
Add the link to the style sheet below the top line, which is the control definition:
Insert a table with one column and the number of rows equal to the number of your product categories plus 1
for the header (5 total).
Goreva VB.NET, INFS 3121/6121
4
Web Application Tutorial 1
Type Select Product Category in the top cell of the table. The bottom cells will be empty for now (we will
insert buttons later), but if you want to place some text there just to see what it will look like, you can type
Exotic, Weird, Classic, and Leather in the corresponding cells.
III-3. bottom.ascx
Add the third web user control to your project and name it bottom.ascx. Insert two tables, one after the other.
The top table has 1 row and 5 columns and includes the same links that you added in part III-1. The bottom
table has 1 row and 3 columns and includes the text as shown:
Type your email address instead of mine. Rebuild you project and save it.
IV. Populate the Master Page:
We will create the outline for the Master page and place the three web user controls.
Switch to the Master page Template.master. In the Source view of the page, insert the link to the style sheet
somewhere in the section.
The link Content/ProjectStyles.css is a relative link to the stylesheet from the Master page. Both the style
sheet and the Master page are in the Content folder; therefore, we do not need any additional steps up- or
down-folder to link them.
As you can see, the contents are of the page is outlined by the element and the element inside
the form.
Goreva VB.NET, INFS 3121/6121
5
Web Application Tutorial 1
Immediately after the tag insert a table with 1 column and 2 rows. Inside the tag add the
reference to the class .outerTable ().
Drag the user controls top.ascx from Solution Explorer to the top cell of the table. Drag the bottom control
bottom.ascx from Solution Explorer the bottom of the page after all tables:
When a web user control is placed on a page, it gets an asp tag in the code where it was placed and the
registration tag on top of the page. For example, for the top control you will see two new lines of code added.
One is exactly where the control was place on the page:
The other line is the control registration and is typically added after the page settings line (top of the code):
There may be several common issues with the web user controls, you will know there is an issue when
Visual Studio does not display a control on the page and gives an error of creating it. The following three
hints will help you troubleshoot if this happens.
1. Make sure that the tag prefix is the same for both lines. In our case it’s uc1; therefore, the top line
should also start with uc1.
2. The ID in the top line should be the same as the tag name in the bottom line; in our case it is top.
3. Once you gave a certain ID to a user control, you cannot have another control with the same ID. For
example, we just added a control with the ID uc1. We cannot have another control with the same ID
or tag prefix.
Goreva VB.NET, INFS 3121/6121
6
Web Application Tutorial 1
Add another table with two columns and one row in the bottom cell. Inside the tag add the reference
to the class .contents_table. Link the right column to the style class contents_table_left, and the right column
to contents_table_right.
In the left cell of this table, place the user control left.ascx. Leave the right side blank.
Make sure that three registration lines were added on the top of the page and that your controls are visible
and do not have any errors.
Your entire page will look like this:
We need to make sure that the right section of the table is editable. You have an editable content area named
by default ContentPlaceHolder1. Move the opening and the closing tags for this area inside the right cell of
Goreva VB.NET, INFS 3121/6121
7
Web Application Tutorial 1
the table and change its ID to something meaningful (I named it Main because there will be no other editable
areas on the page):
The Master page should not have a form; each page can have only one form; therefore, if the Master has it, it
will be the same on every page. Find the opening form tag and remove it.
Find the closing tag and remove it also.
V. Adding Pages with the Master Page
We will now add the first .aspx page to the project, and it will be created from our new Master page.
Right click Content  Add  Web Form (with Master). Change the item name from Default to Home.
Choose the master page you just added in Select a Master Page dialog box. If you do not see your master
page, you will need to click on the Content folder and make sure that Template.master displays in the right
side of the dialog.
Goreva VB.NET, INFS 3121/6121
8
Web Application Tutorial 1
The Master page does not have a form. In order for most ASP controls to work, we will need a form on each
page. You will start each new page with this step. Place a form on your page inside the main content place
holder, give it a default id “form1” and make sure that it runs on the server:
Finally, drag the image home_pic.png from the Images folder to the Main area inside the form on the Home
page and make sure the image displays.
IV. Add JavaScript that changes the colors of the menu items:
You already know how to add a style or the link to a .css document on your .aspx pages. The next two
examples show how you can add JavaScript to your code and call this script from any place on the page. We
will add the function NewCol(temp) that changes the font color of the current element to white when it’s
pointed at (temp is the name of the element that will be passes to the function). Another function is
OldCol(temp), it changes the font color back to what it was.
Open the page bottom.ascx in HTML view and add the following code before the code of the tables:
Find the link to the Home page and add the following attributes to the tag:
Home
Explanation of the HTML code:
 The attribute id=”BM1” means that we assign an ID to the text (to be able to refer to it in the future);
 BM1 is short for Bottom Menu 1. We will call all items on the bottom menu BM1, BM2, etc.
 href= “Page URL” is the code that creates a reference to another web page.
 onmouseover and onmouseout are the commands that fire when the mouse points at the text and when
the pointer is removed.
 The tag (anchor) in our case makes the text a hyperlink.
Goreva VB.NET, INFS 3121/6121
9
Web Application Tutorial 1
Repeat Step V for the rest of the links. Change the HTML code for Products Catalog (BM2,
href=“catalog.aspx”), Shopping Cart (BM3, href=“cart.aspx”), Contact Us (BM4, href=“contact.aspx”), and
Login (BM5, href=“user.aspx”)
Build your project (BUILD  Build Web Site) and open the home page in the browser. Your links will not
work (except the first one) because we did not create the pages yet, but everything else should work. Here is
the URL of my project (yours will be slightly different, just change twelvechairs to the name you have
given): http://infsweb01.rmu.edu/twelvechairs/Content/home.aspx
Goreva VB.NET, INFS 3121/6121
10
Web Application Tutorial 1
body{background-color:Gray;}
/*This sets the style of the table that includes the top links
table,*/
/*including the table, the link element and the cell element
*/
.top_links
{
width:670px;
border:1px solid #663300;
font:normal small-caps;
text-align:center;
margin:0px 0px 0px auto;
padding:0px
}
.top_links a{text-decoration:none; color:#663300; font-weight:bold}
.top_links td{ background-color:silver; border-left:1px solid
#663300}
.top_links td:hover a{color:#FFCC99}
.top_links td:hover{background-color:#663300}
/*This table includes all contents of the page: the menus and the
main area*/
.outerTable
{
border:1px solid #663300;
background-color:White;
margin:30px auto 10px auto;
width:860px;
padding:0px;
}
/*This table includes the left menu and the right section, */
/*where the main contents of the page is*/
.contents_table
{
width:860px;
padding:10px
}
/*This table includes only the left menu*/
.contents_table_left
{
width:180px;
vertical-align:top;
}
/*This sets the styles of the left menu, inluding the table, */
/*the button elements , the cell elements , and the top
cell*/
.left_menu{width:150px; text-align:center}
.left_menu input {width:80px}
.left_menu td {padding:5px}
.left_menu td#left_menu_top
{
font-size:smaller;
font-weight:bold;
color:White;
background-color:#804141;
padding-bottom:10px;
padding-top:10px
}
/*This table includes the right section of the page with contents*/
.contents_table_right
{
width:680px;
}
/*This sets the styles of the footer and the link elements of the
footer*/
.bottom_menu
{
width: 450px;
font-size:smaller;
font-weight:bold;
color:#FFCC99;
margin:0px auto 0px auto
}
.bottom_menu a{color:#FFCC99;}
/*This is the style of the six panels on the Calalog page that
contain product info*/
.panel_styles
{
width:200px;
height:200px;
display:block;
float:left;
}
.panel_styles img {
border:none;
}
Welcome to Twelve Chairs!
We are a unique online furniture store
where you can find any style – from a
bunny chair to a classic leather recliner.
We guarantee satisfaction, comfort, and
the best prices.
Happy Shopping!
Twrlue Chairs
Online Furniture Store