Kidsacookin.com

KidsACookin.com

Project Report

CIS 690 – Implementation Project

URL: www.kidsacookin.com

Submitted by:

Bhamidimarri Varun Rao

Department of computer and information sciencesKansas State University

Manhattan, Kansas - 66502

1

Kidsacookin.com

TABLE OF CONTENTS

KidsACookin.com......................................................................................................................................1

Introduction:...............................................................................................................................................3

o Objective:.......................................................................................................................................3

o Target Audience:.......................................................................................................................3

o Brief Description:.....................................................................................................................3

Technologies:..............................................................................................................................................4

o Microsoft .NET:..........................................................................................................................4

o Oracle 9i:.......................................................................................................................................4

o Javascript:.....................................................................................................................................4

o CSS:...................................................................................................................................................5

Project Resources:...................................................................................................................................5

System Architecture:..............................................................................................................................5

Site map.........................................................................................................................................................6

Database Design:......................................................................................................................................6

o Tables:.............................................................................................................................................7

o Packages:.......................................................................................................................................8

Functionalities:..........................................................................................................................................9

Organization of code:...........................................................................................................................10

Improvements:.........................................................................................................................................16

Testing:.........................................................................................................................................................17

o Microsoft Test Center:.........................................................................................................17

o Ants LOAD test:........................................................................................................................18

Problems faced:.......................................................................................................................................22

Snapshots:...................................................................................................................................................23

References:.................................................................................................................................................29

2

Kidsacookin.com 3

Kidsacookin.com

Introduction:

Objective:

The main objective of the project was to convert the existing Kidsacookin website using the C#.net technology.Kidsacookin site the way it was had lots of bugs, which had made it’s maintenance a big problem. Also adding new features to the site was tough and needed complete restructuring. With these things in mind we thought it was better to convert the site using the Microsoft .NET framework which will make reusability, maintainability and addition of new features easier.

Target Audience:

Kidsacookin is a weekly TV show which talks about easy to make recipes and other cooking tips, which are targeted at children of all ages, and those who guide them. It is used by family nutrition program agents to take after school classes about cooking. The website Kidsacookin.com is in correspondence to the show.

Brief Description:

kidsacookin.com, is in correspondence with the weekly series “kids a Cookin’” on the Kansas television stations. “Kids a Cookin'” is produced for K-State Research and Extension's Family Nutrition Program (FNP) by the Department of Communications and the Kansas Regents Educational Communications Center (ECC). The main features of the project –

1. Full scale website on “.NET”2. Main site/Management site3. Image and video upload4. Very dynamic, updated weekly, very less static pages5. keeping track of the users accessing the site

4

Kidsacookin.com

6. Video streaming – using streaming server.

Technologies:Microsoft .NET Framework 2003 / Visual Studio IDE 1.1

The main technology used has been the Microsoft .NET framework with C# as the language used for implementation. The IDE used has been the visual studio..NET provides a programming model, and infrastructure, to make creating scalable, secure and stable applications faster, and easier than with previous Web technologies..NET is a technology for creating dynamic Web applications. It is part of the .NET Framework; you can author .NET applications in any .NET compatible language, including Visual Basic .NET, C#, and J#. .NET pages (Web Forms) are compiled, providing better performance than with scripting languages. Web Forms allow you to build powerful forms-based Web pages. When building these pages, you can use .NET server controls to create common UI elements, and program them for common tasks. These controls allow you to rapidly build a Web Form out of reusable built-in or custom components, simplifying the code of a page.

Oracle 9i Oracle9i Database, offers all the features and capabilities necessary

to develop, deploy, and maintain the most scalable and performing Internet-based and traditional mission-critical applications. Oracle provides the most powerful database for secure, reliable, high capacity Internet

5

Kidsacookin.com

applications, data warehouses and e-commerce web sites. It scales to support the most demanding, high throughput applications.

Others: (Client Side)Javascript

JavaScript is the dynamic object scripting language used in millions of web pages and server applications worldwide. We have used JavaScript to make a lot of client side validations thus reducing load on the web server.

Cascading Style Sheets: CSS provided a very powerful way to provide similar look and feel

throughout the site.

Project Resources:

ResourceType ResourcesServer Node name Oznet.ksu.edu

Operating Systems/Version/Release

Windows server 2003

Processor PentiumHTML Editor Microsoft Visual Studio

Database Management Oracle 9 Performance Analysis Microsoft Application Test Center, ANTS

Load Test Report Tools MS Word 20023, MS Visio 2003 , MS paint

2003

6

Kidsacookin.com

System Architecture:

Site map This has been drawn using VISIO. Shows the links we have from the home page.

7

Kidsacookin.com

Database Design:

The backend used is Oracle 9i. The application does not contain any SQL statements in the .NET code. All data is retrieved using procedures. Keeping all the SQL statements as procedures makes it easy to modify the queries, without re-compiling the application.Tables:

8

Kidsacookin.com

The HOMEPAGE table acts like a starting point or the application. It contains the id’s (recipe id, tip id, user survey id etc) used for that week. The RECIPE table contains the data corresponding to a particular recipe, where as the TECHNIQUE_ENTRIES contain the data for the tips and techniques. The VIDEO table contains the information about the English and Spanish videos stored on the STREAMING server.All the queries used by the website have been pre compiled into procedures, as part of packages. The main idea here was to keep the queries away from the .NET pages. We also found this much easy to code, modify and maintain. Also, as it is pre – compiled, we know the errors before executing. Below, shows the package structure of the procedures.

9

Kidsacookin.com

Packages:

1. Homepage Package – procedures for data to be retrieved for the home page

2. Tips Package – procedures for all the tips and techniques

3. Management Package – procedures for the management site

4. Recipe Package – procedures for all the recipes

10

Kidsacookin.com

Functionalities: The diagram below shows the navigation bar for the site and

information about each of the options on the navigation bar.

11

Kidsacookin.com

Organization of code:

Kidsacookin.com has only two Web Forms:-1. Welcome.aspx – which is the welcome page2. Site.aspx – shows all the other pages – depending on the QueryString

The main idea here has been to use a single web form to show all the pages on the site.Every page on the site will have 3 things in common:-

1. Header2. Navigation3. Footer

What changes is only the center of the page, which is filled up by using placeholders and user controls. This helps us in providing good reusability of the code. User Controls in .NET provide a good way of providing reusability.

The files in the project have been arranged in the following folders:Welcome.aspx is the welcome page for the site which has 3 main usercontrols :-

1. HeaderHomepage.ascx2. LevtNav.ascx3. HomePage.ascx

The files in the project have been arranged in the following folders:1. Components – contain the class files used throughout the site.

12

Kidsacookin.com

a. “manage_kidsacookin.cs” – which contains all the functions which call the “Oracle Procedures” and retrieve the data.

b. “getImage.aspx” – is used to retrieve the image (BLOB) from the database and write it out to the output stream.Response.ContentType = "image/jpeg";

c. “getPdf.aspx” – is used to retrieve the Pdf (BLOB) from the database and write it out to the output stream.Response.ContentType = "application/pdf";

2. UserControls – contains all the controls for the website. Each page

on the site is actually a control which is loaded into a “placeholder” on an “aspx” file. All the controls provide reusability(header.ascx , footer.ascx etc)

13

Kidsacookin.com

a. “Recipe” folder for the controls used for showing the recipes.

b. “Tips” folder for controls used for the tips

c. “HomepageLinks” folder for the controls used on the HomePage.

14

Kidsacookin.com

d. “OtherControls” – folder for other miscellaneous controls

e. “videos” – folder for controls used to show the video on the recipe and the tips page.

Welcome.aspx :www.kidsacookin.com/Welcome.aspx

15

Kidsacookin.com

The image below shows the welcome.aspx page in the design view in Visual studio. It shows the idea of using place holders which dynamically adds the header, footer and the homepage control.

The site.aspx page shows up all the other pages in the site depending on the query string. The query string will decide which control to be added to the place holders. This helps in making the controls reusable in different pages.

16

Kidsacookin.com

The image below shows organization of the various files in the visual studio view. It shows the various folders in which the files have been kept and the functionality.The folder “usercontrols” contains all the controls that are added to the site.aspx page placeholder depending on the query strings.The folder “components” contains all the class files with functions defined, used by all the controls. All the functions calling the oracle procedures are defined here.

17

Kidsacookin.com 18

Kidsacookin.com

Improvements:

1. Code Size Reduction: there has been about 40-50% reduction in code as compared to ASP site we had before. All the common functions have been moved to the files kept in the “components” folder. These common functions can be called by any of the controls, without having to worry about how they have been implemented.

2. No pop – up pages (no possibility of being blocked by any pop – up blockers) – The ASP site we had used a pop – up window to show the video. This used to get blocked by the pop – up blocker. To overcome this I used a javascript DIV tag with the video control, which is a part of the page, and shows up only when the “view video” link is clicked.

3. No queries on the web pages: All the queries needed to retrieve data have been kept in procedures on the database. There procedures are precompiled, that makes it faster to access and helps finding errors before executing the pages. I big advantage I found was it makes it easier for us to change the queries, without messing with the .NET code. All adding new functionality would just involve adding a new procedure and the .NET code calling it.

4. Easier to maintain and more organized: The code is much more organized now, and changing or adding new features, would be very easy.

5. Better look and feel: The site has a better look and feel than before. With the use of Javascript, we have the images being displayed for all the recipes, on the mouse over event. The list of recipes provides with all the information one needs before he would like to view the recipe.

19

Kidsacookin.com

It shows the image, description and a short teaser. It has an extensive use of CSS, which makes the pages have similar look and feel.

6. Exception handling: exception handling has been done throughout, wherever there is a possibility of exception, using try and catch blocks. This was not available on the ASP site.

Testing:

Microsoft Application Test Center:

Application Center Test is designed to stress test Web servers and analyzes performance and scalability problems with Web applications, including Active Server Pages (ASP) and the components they use.

Application Center Test simulates a large group of users by opening multiple connections to the server and rapidly sending HTTP requests. 

Application Center Test supports several different authentication schemes and the SSL protocol, making it ideal for testing personalized and secure sites.

Although long-duration and high-load stress testing is Application Center Test's main purpose, the programmable dynamic tests will also be useful for functional testing. Application Center Test is compatible with all Web servers and Web applications that adhere to the HTTP protocol.

Properties 

Test type: DynamicSimultaneous browser connections: 1Warm up time (secs): 0Test duration: 00:00:05:00Test iterations: 32Detailed test results generated: Yes

 Summary 

20

Kidsacookin.com

Total number of requests: 1,337Total number of connections: 1,337

 Average requests per second: 4.46Average time to first byte (msecs): 134.58Average time to last byte (msecs): 142.07Average time to last byte per iteration (msecs): 5,936.03

 Number of unique requests made in test: 38Number of unique response codes: 2

 

Errors Counts

 HTTP: 0DNS: 0Socket: 0

 Additional Network Statistics 

21

Kidsacookin.com

Average bandwidth (bytes/sec): 21,789.33 

Number of bytes sent (bytes): 482,338Number of bytes received (bytes): 6,054,462

 Average rate of sent bytes (bytes/sec): 1,607.79Average rate of received bytes (bytes/sec): 20,181.54

 Number of connection errors: 0Number of send errors: 0Number of receive errors: 0Number of timeout errors: 0

 Response Codes 

Response Code: 302 - The requested resource resides temporarily under a different URI (Uniform Resource Identifier).

Count: 33Percent (%): 2.47

 Response Code: 200 - The request completed successfully.

Count: 1,304Percent (%): 97.53

 

The request completed successfully 97.53%. According to statistics, there were no errors reported. The average number of request/sec is 4.46 msec, with the average time for the last byte being 142.07 msec.

ANTS Load Test

ANTS Load is designed to load and stress test .NET XML web sites and services. It is especially useful for major load testing and proof-of-concept testing; if we need to know that your architecture will scale as you expect, then ANTS Load is the tool to use. We can use ANTS Load to test applications designed either for your intranet, or for the Internet.

22

Kidsacookin.com 23

Kidsacookin.com

The image below shows that the time to connect for most of the request (288) was less that 50 msec.

The time for the first byte and the last byte for the requests is shown below. We can see that the time to receive the first byte for most of the requests (156) is between 50 – 100 msecs. Also, the time for the last byte for most of the request (128) is also within 50 – 100 msecs. This shows that the response time for most of the requests is not that high.

24

Kidsacookin.com 25

Kidsacookin.com

Problems faced:

1. Avoid the video page to be blocked by a pop – up blocker: The ASP website we had before used to have a pop –up page for showing the video. This used to get blocked by most of the pop – up blocker. While converting the site to .NET, this was one of our main challenges. I came up with an idea of a DIV tag which can be placed on the same page. This shows up when we click on “view video” with the control having the video.

2. ASP.net view state concept and dynamically adding user controls – The idea of VIEWSTATE is .NET is something which took time to understand. There were situations where controls once added where lost once the page was reloaded (POSTBACK). We had dynamic controls added to the pages, which used to get lost on “POSTBACK”. We have to make the page remember the controls it had before it does a “POSTBACK”.

3. Browser compatibility and ADA compliance – I had used a lot of Javascript on the recipe page and the tips and techniques page. The tips and techniques page had to show the image for the PDF and the VIDEO only if we have the PDF and VIDEO uploaded for it. This had to be done on the Javascript “mouseover” event. I had some problems in getting it right. This was not compatible with mozilla initially. Also making the site ADA compliant took some time.

26

Kidsacookin.com

Snapshots: Homepage:The home page shows the recipe and the tip of this week. Clicking on the image will take us to the recipe and the tip page. It has a navigation bar showing the various features of the site. It has a fun poll section which is changed weekly.

27

Kidsacookin.com 28

Kidsacookin.com

Recipe Page:Recipe page shows the various categories in which the recipes have been categorized. It is categorized according to either skill levels or categories like breads, desserts etc.

29

Kidsacookin.com 30

Kidsacookin.com

:

31

Kidsacookin.com

The recipe page for the “Applesauce Muffins” recipe is shown below.

32

Kidsacookin.com

Tips and techniques page:Similar to the recipe categories we have categories for tips. The page below shows all the categories and the tip of the week on the right side.

33

Kidsacookin.com

The page shows the tips in the “How To” techniques category. For each of the tip we have the option of viewing the PDF or the video. There is an option to select the speed.

34

Kidsacookin.com

References: [1] ASP.net Quickstart Tutorial: http://www.dotnetjunkies.com/quickstart/aspplus[2] Microsoft .NET Technologies (http://www.w3schools.com/ngws/ngws_intro.asp)[3] ASP.net Tutorial: http://msconline.maconstate.edu/tutorials/aspnet/[4] ADA compliance: http://bobby.watchfire.com/bobby/html/en/index.jsp[5] Online Lynx Viewer: http://www.delorie.com/web/lynxview.html[6] Javascript – using DIV tags: http://www.apolc.org/computer/html/main2_1_13.htm

35