SSE698Project2

= SSE 698 =
 * Professional Seminar - Web Development **


 * David Thrasher **

= Project 2 = The second project for this class will demonstrate a general grasp for ASP .NET. I will do this by creating a website that covers each of the ASP items that are in the list below that I submitted in project 1.
 * Introduction**

//List of ASP topics that are covered in project 2:// a) CSS b) Applying Styles c) ASP Server Controls d) Declare and use ‘data types’ e) Arithmetic, Comparison, and Concatenation Operators f) Switches and Loops g) Methods (Functions & Subroutines) h) Objects/Classes i) Constructors j) Master pages k) Content pages l) Themes m) Relative, Root-Based Relative, and Absolute URLs n) Navigation Controls o) Programmatic Redirection

Cascading Style Sheets (CSS) is a style sheet language that describes the formatting rules of webpages that use the CSS sheet for its layout. These pages can be generated in many ways but I prefer to use Visual Studio to create the sheet by hand. The //intellatype// that Visual Studio provides assisted in helping me understand what elements I could act on and the variables they could be set to. An example of this is shown in the image below.
 * CSS**

I created a CSS sheet that acted on the webpages “body”, “p”, and “div” HTML tags. I set the “body” tag’s font, background image URL, the background repeating properties, the backgrounds position, the background color, the text’s color, and the text’s alignment. The color attributes can take a specific color’s name, or a hex value can be used that represents the red, green, and blue of the color. I try to use the name to keep confusion at a minimum, plus I don’t want to keep looking at a color chart to figure out what color I am acting on. Then I set the “p” tags background color, and other text elements. Finally I set the “div” tag to inherit the color of the “p” tag and tell it not to transform he text and align the text to the center of the page. The image below shows all of the elements in the default.css file.

Next, this file has to be attached to the webpage that is being created. I have used CSS before and felt did this by writing including the ‘link’ HTML tag inside of the pages ‘head’ tags. The image below shows the ‘link’ tag inside the ‘header’ tags that includes the CSS file.

In order to show how the CSS file changed the webpage’s style, I created an ASP webpage named CSS-Example.aspx. The code contents of the .aspx file are shown in the image below.

To show the affect on the page, below is an image of the webpage opened in Internet Explorer with the CSS link removed from the aspx file.

The image below is an image of the webpage opened in Explorer with the CSS link included.

I will use .CSS files again to setup the theme later in the Themes section of this report.

Visual Studio gives a tool that gives the person designing the website a GUI to modify the style that has been added to the page. To do this the user needs to select “Apply Styles” from the “View” menu as shown in the image below.
 * Applying Styles**

Then the style will be displayed on the left tool box. What ever element is selected in the main page is displayed on the left. To modify this, I selected the right arrow and selected the “Modify Style” selection on the drop down list. This is shown in the image below.

Once this is selected, a dialog opens up that gives the person designing the page controls to modify the style of the page’s elements. The elements that have already been setup by the CSS file are bolded, when another change is modified with this tool that modification is bolded to show it has changed. There is a “preview” box at the bottom that shows what the current selection of these elements will display on the screen. Below is an image of the tool.

I selected the “line-through” box and then clicked the OK button, this wrote code into the CSS file. Instead of appending this to the already existing “body” tag it added a new “body” tag to the end of the document with the existing information as well as the newly added “line-through”. The newly added code in the CSS file is shown in the image below.

When the page is refreshed the new CSS file is used which changes the style dynamics of the webpage. The image below depicts this change.

I removed the newly added information in the CSS file so I could keep the original design I created.

The Server Controls, for the most part, are the GUI controls that can be added to the webpage. These controls can then call events in the C# file that perform a specific process. To set one of these up I did a drag and drop from the tool box of a “DropDownList” control to the webpage I created. Then I also did a drag and drop from the tool box of the “Image” to the webpage. This page was one I setup to be a master page when learning about those but I wanted to add a control to this to demonstrate this concept. The image below shows the main page in Split view that shows the code and design of the webpage with the two items, as well as a other items, but for now I am only explaining the “DropDownList” and “Image”.
 * ASP Server Controls**

As you can see in the image there is an “onselectedindexchanged” attribute attached to the “DropDown”. This raises the “imgDropDown_SelectedIndexChanged” event that is located in the MasterPage.master.cs file. I have code here that changes the picture based on what the user has selected in the “DropDown” box.

In another webpage named schedule.asp I attached a “Calendar” to the webpage by performing a drag and drop from the tool box to the page. Then I set up an event so when a selection changes, the “onselectionchange” attribute throws the event “SchoolCalender_SelectionChanged1” in the schedule.cs file. I show the .aspx Source and Design view by showing the Split view of this in the image below.

In order to show an example of this I created a webpage named students.aspx that has three tables. The tables are nested so the data is displayed correctly. Below is the image of the Design view of the webpage.
 * Declare and use ‘data types’**

In order to get the tables to be nested correctly I had to move the table tags by hand in the webpage’s source. It took a while to for me to figure out how to do a “ColumnSpan” for a table with Visual Studio’s GUI. I found it was easier to edit the source code to get the tables to act the way I wanted. Below is an image of the code for students.aspx.

Then I needed to populate the tables with names. I do not have a connection to a database yet because that will be done in Project 3 so I created three arrays to hold the students first name, last name, and age in the master page’s code MasterPage.master.cs file. I also setup an integer that holds the total length’s of the arrays. I declare them public so the students.aspx can create a “MasterPages_MasterPage” object and call the arrays and there size. The definition of the arrays and integer in the MasterPage.master.cs file is shown in the image below.

When this object is created, a method is called that loads data into the arrays using a “for” loop. The image below shows the arrays getting assigned the values.

Then in the students.cs file I declare an object named “masterP” from the “MasterPages_MasterPage” class. Then I start a “for” loop that starts at 0 and goes to the full length of the array with the “masterP.arraySize” integer. In the image there are some “…” that represent code that I used in order to format the cell objects’ borders. I omitted that form this because it is just cosmetic information for the cell. The item in the arrays current location that the loop is being looped over is read into a “TableCell” object named “firstName”, “lastName”, or “age”. The “TableCell” objects are then read into a “TableRow” object named “addMe”. Then the object “addMe” is added to the table “Table3”. The code that depicts this is displayed in the image below. Then end result of this fills in the table on the webpage with the contents in the arrays. The image below shows this page with the loaded data.

The Arithmetic Operators used in ASP.NET .cs files work the same as they do in C# code. To show an example of this I added a small bit of code to the end of the students.aspx.cs load event that changes the page’s title. I setup an integer named “arithmeticInt” with the value of 1 and a double named “arithmeticDouble” with the value of 10. Then I added the two numbers together typecasting the double to an integer and stored the result in the integer “arithmeticInt”. Then I attached this result to the page’s title. The code is depicted in the image below.
 * Arithmetic, Comparison, and Concatenation Operators**
 * Arithmetic**

The result this has on the webpage’s title bar is depicted in the image below.

I use Comparison Operators in a couple of pages in this project. The best example of this is the one that is setup for the “DropDown” list on the Master page MasterPage.master.cs file. This is in the “imgDropDown_SelectedIndexChanged” that is attached to the “imgDropDown” in the “MasterPage.master” ASP “DropDown” server control shown in the ASP Server Control’s section. The C# behind this actually causes the image to change based on what the user selects. The options are “No Picture”, “Real School”, and “Cartoon School”. If the user selects “No Picture” the image “schoolImage” visible attribute is set to false so it cannot be seen. If the “Real School” is selected, the image “schoolImage” visible attribute is set to true and an image of Mercer’s engineering building is loaded into the image. If the user selects “Cartoon School” the image “schoolImage” visible attribute is set to true and an image of an image of a cartoon school is displayed. This is all done by comparing the string of the selected item in the “DropDown” against a hard coded string in a Comparison Operator. The image below depicts this source code used to handle this action.
 * Comparison**

The result if “No Picture” is selected is shown below on the webpage.

The result if “Real School” is selected is shown in the image below.

The result if “Cartoon School” is selected is depicted in the image below.

The Concatenation Operators are used to combine strings to one string. An example of this is when the arrays for the student’s first name, last name, and age are being created. The current number being looped over in the “for” loop, is appended to the string that is going to be placed to that location in the array. The image below depicts the code used to setup the arrays.
 * Concatenation**

The string’s in the arrays are read into a table and displayed on the student’s webpage as depicted in the image below.

In the similar way that the Operators work like C#, the switches and loops behind the .cs files work the same as C# switches and loops. The default page for the project is a redirect page that sends the user to the master page’s default page. I chose to put a switch to do this in the BasePage.cs used to setup the theme for this page. The switch statement takes the “DateTime.Now.DayOfWeek” values and compares it to the “DayOfWeek. ”. When the current day is found, the theme is changed to that day’s name’s theme. The code that is used in the switch statement is depicted in the image below.
 * Switches and Loops**

I also use loops to load and get data from the arrays in different locations. A good example of there use is when the arrays’ values are being setup and the number is appended the string that is being stored in the array. The code below shows the “for” loop that is used to execute this task.

Methods are sections of code in a class that can be called to execute a specific section of code. There are two types of methods in the ASP .NET C# cope called “Functions” and “Subroutines”.
 * Methods (Functions & Subroutines)**

A subroutine is a method that does not return any data to the location that called the method. This is used to set something up that does not require a return value. To show an example of this I setup a method to setup the data in the arrays named “setupArrays” in the “MasterPages_MasterPage” class. This populates the arrays with the data to be read into the table on the student webpage. The image below depicts the code used to setup the method.
 * Subroutine**

The call to this method is depicted in the image below.

Like a subroutine a function is a method that executes a specific segment of code. The only difference is it also returns a datatype when it is done executing the section of code. I used this in the schedule.aspx.cs code. When the user clicks on a date in the calendar, the “SchoolCalendar_SelectionChagned1” event is raised. Then I have an “if” statement that calls a function named “checkDate” and it sends it the day of the week the user selected. That function sets up a Boolean named “reutrnMe” that will returned that’s current value is ‘true’. Then an if statement checks if the sent date is “Saturday” or “Sunday”, if it is, the value for “returnMe” is set to false. After this is complete “returnMe” is returned to the function call. The code that calls the function and the code for the function are depicted in the image below.
 * Function**

Each of the .cs files that are created is a C# class file. An example of this is the “MasterPages_MasterPage” class that I use to create an object of that class named “masterP”. The students’ C# code, students.aspx.cs, uses the “masterP” object to call the public arrays and integer defined in the “MasterPages_MasterPage” class. The code used to setup the “masterP” object in this C# code is depicted in the image below.
 * Objects/Classes**

The code that makes up this class is shown in the image below.

A constructor is a method that is called when a classes’ object is created. This code is used to setup specific information that is needed by that class. In order to load the array sin the “MasterPages_MasterPage” object’s arrays, I used a constructor. By doing this I do not have to have a separate subroutine call in the students’ webpage C# code to set his data up. When the object is being defined in the students.aspx.cs file, the constructor is called when it is being setup. The constructor in the “MasterPages_MasterPage” is depicted in the image below.
 * Constructors**

A Master page is a webpage that defines the appearance, and basic tools that can be used in content pages that are added to the master page. I added the CSS sheet to this page so any content pages for the master page will also have that same CSS applied to them. The master page is a good location to put navigation controls, header information, and specific user information. In the master page I created I just put a title bar inside HTML “p” tags, a link to the default redirect page, and the “Drop Down” list with the image that is displayed from the “Drop Down” selection. The source view for the Master Page is depicted in the image below.
 * Master pages**

The Design view of the Master page is depicted in the image below.

Pages that can be added to Master page are called Content pages. These pages use the same CSS that is defined by the Master page and are in a location defined by the Master page. The scheduale.aspx and students.aspx are both Content pages. Doing this allows the website to have a defined look and feel. To add a content page the user right clicks on the Master page and selects to add a content page as shown in the image below.
 * Content pages**

The image below depicts the scheduale.aspx Content page in design view.

The other Content page named students.aspx is depicted in the design view in the image below.

As you can see in both images of the Content pages, the Master page is visible; this allows the user creating the website to know what the end result of the webpage will look like.

Themes are used by ASP so a specific CSS file can be loaded for a webpage. They can be used to let the user select a specific style or change the look of a page to show importance. I used the redirect page to show this. When the default.aspx page is loaded, a switch statement checks the current day of the week. When the day of the week is found in that switch statement the theme for that date is then loaded to the page. In order to do this I had to create a BasePage.cs file in the directory “App_Code”. This page is used to load the CSS theme for that day. It has to be done in the “PreInit” event in this class. The code for the BasePage.cs file its location, and the location of the CSS files it can load is shown in the image below.
 * Themes**

That page has to be connected to the Devault.aspx page in order for that code to run. This is done by setting the “_Default” class to inherit the “BasePage” class. The image below shows the entire contents of the Default.aspx.cs file.

Now when this page is viewed, the theme for that day is used. Below is an example of the theme for Sunday, which sets the background color to red.

A Relative URL is a link to data from the point of the file looking for that data. For example, there is an image in the following directory that needs to be seen by the CSS page default.css: /src/images/books.jpg The default.css file is located in the following directory: /src/Styles/default.css
 * Relative, Root-Based Relative, and Absolute URLs**
 * Relative**

In order for the default.css file to find the image, a Relative url can be used. The URL starts with two periods to show that it needs to look in the “/src” directory. Then it has the directory name it needs to look for which is the “images” directory. Finally it has the name of the image so it can be loaded to the page. The image below depicts the source code that does that in the default.css file.

The Root-Based Relative URL gives the item’s URL location from the root location of the site. The Theme Style.css pages use this because there location may change one day and they will still need to have the location of the image books.jpg. The URL that points to the image contains the full root path of the file and the path starts with a “/” to show that it starts from the root. The Sytle.css style pages use the same code for the “background-image” in the “body”.
 * Root-Based Relative**

The Absolute URL is different in that the URL can point to a different webpage. I created an example of this to prove the concept. I have seen people point to other some sites point to others in the past for images and the site that host replace the image with something to discredit the site liking to it. Below is an example of some code that points to another website in Sunday’s Stile.css file.
 * Absolute**

When the redirect Default.aspx page is loaded, the image below shows that the background image is now changed to the URL shown above.

In order to create a site that gives the user an ability to go to a specific page without going through a lot of other pages a Navigation Controls need to be put in place. To do this I chose to add a “Menu” item to the “MasterPage”. After I did the basic drag and drop, I clicked on the arrow on the top right of the menu in design view and selected “Edit Menu Items…”.
 * Navigation Controls**

That page then brings up the “Edit Menu Items” GUI to add items to the menu and select the “NavigateUrl”.

When the box to the right of the “NavigateUrl” is clicked, another window is displayed that allows the user to select the page they want the menu item to be linked to. The image below depicts where this.

Then that URL is loaded into the “Menu Item Editor”. The image below shows the URL added to the “Menu Item Editor”.

One the menu is complete, it is added to the “MasterPage” so whenever the master page is used to setup the site, the navigation control is always available. The image below shows the webpage with the menu.

Program Redirection gives the ability to send data from one page to another. This way information can be sent to a page so it can display or hold the data from the previous page. To show this I added a “Drop Down” menu to the students.aspx page populated with the student’s last name and first name. Then I added a button to throw the event to redirect to a new page I created named SelectedStudent.aspx. The image below depicts the added drop down list and button on the students’ page.
 * Programmatic Redirection**

In order to add the student’s names to the drop down, I had to create a “ListItem” object and add the text to that item. Then I was able to add the “ListItem” to the “DropDown” box. The image below shows the code used to do this that was added to the loop that reads the array’s data into the Table.

Then I had to add a button click event that sends the text to the SelectedStudent.aspx page. The text had spaces and a comma in it that caused issues when sending the data to the page so I had to replace those characters. I replaced the spaces with nothing and I replaced the commas with hyphen marks. The image below shows the code that sets up the string to send and the redirect call to the SelectedStudent.aspx webpage.

Then the SelectedStudent.aspx page receives that data and loads it into the label on the webpage. The image below depicts the addition to the label on the webpage in the SelectedStudent.aspx.cs file.

The page shows the data was received by displaying the text that was selected in the “DropDown” box on the students.aspx page. In the URL the data that was sent can also be seen in the address bar. This is depicted in the image below.

I have used classic ASP years ago and I primarily used it to connect to a database. Before reading this book I thought that database connection was the man purpose for ASP, I quickly found I was wrong. I have a new appreciation for ASP and if I ever create a web site I think I would use ASP in order to design it. The use of Master pages with content pages; and the use of themes with CSS files make for a quick and clean looking webpage. It has the ability to send data through Redirects as well as ASP server controls that can be added for interface usability. The ability to add C# OOP to handle data makes it appeal even more.
 * Conclusion**