Jiangjiang's Site

Comment

Experiment0:

website appearance design:

Source:
Basically I follow a template to design my website appearance and also add a few CSS classes to suit my own needs. http://www.oswd.org/design/preview/id/3649

Files Related:
../App_Themes/BlueSpring/colour.css
../App_Themes/BlueSpring/Style.css

Experiment1:

Add a comment for the website

Source:
I learned and used the code from Professor Rasala's blog software to implement this functionality.

Purpose: I considered this experiment as the first one because once it is implemented others can leave me a message when they go to my site so that I can get feedback from others in this class. This experiment shows how to save comments without using database and how to use RequiredField validation control to validate user input. Visitor may want to input some tags in the comment or the same section. So when I get the text from textboxes, I encode the text first which allows the user to inputs tags.

Test Case:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Comment/Default.aspx
2. Press the submit button.
Result: The following text will be shown in the page: Please leave me a message before submit

Case #2:
1. Go to http://net35.ccs.neu.edu/home/quintet/Comment/Default.aspx
2. Input your name and comment, then press the submit button.
Result: The browser will redirect to a new page with the following text: Thank you for your comment
3. Go to http://net35.ccs.neu.edu/home/quintet/Comment/ViewComments.aspx
Result: All of the comment will be shown here. The comments are arranged by chronological order. The latest one is in the very top.

Case #3:
1. Go to http://net35.ccs.neu.edu/home/quintet/Comment/Default.aspx
2. Input your comment and leaves your name as blank, then press the submit button.
Result: The browser will redirect to a new page with the following text: Thank you for your comment
3. Go to http://net35.ccs.neu.edu/home/quintet/Comment/ViewComments.aspx
Result: The same as Case #2, the comment you just left on the website will show "No name" in the visitor name section.

Case #4:
1. Go to http://net35.ccs.neu.edu/home/quintet/Comment/Default.aspx
2. Input your name and some tags such as html, body, p, table tag in the comment text box then press the submit button.
Result: The browser will redirect to a new page with the following text: Thank you for your comment
3. Go to http://net35.ccs.neu.edu/home/quintet/Comment/ViewComments.aspx
Result: The same as Case #2 and all the tags you input will be correctly shown in the page.

Files Related:
../App_Themes/BlueSpring/Style.css
../App_Code/Comment.cs
../App_Code/CommentItem.cs
../Comment/CommentSubmission.aspx
../Comment/CommentSubmission.aspx.cs
../Comment/Default.aspx
../Comment/Default.aspx.cs
../Comment/ViewComments.aspx
../Comment/ViewComments.aspx.cs

Experiment2:

Make blog software working with Calendar control

Purpose: This experiment makes blog software working with ASP.NET Calendar control so that a visitor can check blog entries by day or by month. There was a bug in this experiment and I fixed it in the last minute.Please see my blog entry for that. I won't go to details here.

Test Case:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Blog/Default.aspx
2. Choose a day.
Result: If there are blog entries created in that day, the page will show all the corresponding blogs. Otherwise, the page shows nothing but a Calendar control.

Case #2:
1. Go to http://net35.ccs.neu.edu/home/quintet/Blog/Default.aspx
2. Choose a month.
Result: If there are blog entries created in that month, the page will show all the corresponding blogs. Otherwise, the page shows nothing but a Calendar control.

Files Related: ../App_Code/Blog.cs
../Blog/Default.aspx
../Blog/Default.aspx.cs
../App_Themes/BlueSpring/Style.css

Experiment3: SQL

Show and delete records from Database

Insert records into Database

Search records from Database

Purpose: This experiment demonstrates the use of SQL and its interaction with C# by ADO.NET. I created a table Student_Info in the database which contains Student_ID, First_Name, Last_Name, Age, Email, Student_Major fields. Student_ID is the primary key of the table. There are 3 different functionalities for this experiment. The first functionality pops up all the records from database and presents those records on the web page by GridView control. You can do client sorting and delete records. The second experiment is to insert records into Database. Note that the Student_ID can not be blank or the same as any existing records. The third functionality is to search records from database by specific criterias. If you don't specify a criteria and just simply hit the search button, all the records will be shown.

Test Case:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Result.aspx
Result: All the records in Student_Info table will be poped up and presented by a GridView control. You can do client sorting and delete records.

Case #2:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Insert.aspx
2. Insert a record with into database. Use 001 as the Student_ID.
Result: Record Added.
3. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Result.aspx
Result: You can find the record you just added.

Case #3:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Insert.aspx
2. Insert a record with into database. Use 001 as the Student_ID.
Result: The following text will be shown: ERROR: A record with the same primary key already exists.

Case #4:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Insert.aspx
2. Insert a record with into database. Use a string more than 50 characters as the Student_ID.
Result: The following text will be shown: ERROR: Could not add record, please ensure the fields are correctly filled out.

Case #5:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Search.aspx
2. Press the search button.
Result: All the records will be shown in a GridView

Case #6:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Search.aspx
2. Type 20 in the Age textbox and press the search button.
Result: All the records with the Age field of 20 will be shown in a GridView, if there is no record, the following text will be shown: No record match your criteria.

Case #7:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/SQL_Experiments/Search.aspx
2. Type 20 in the Age textbox and Computer Science in the Student_Major table and press the search button.
Result: All the records with the Age field of 20 and the Student_Major of Computer Science will be shown in a GridView, if there is no record, the following text will be shown: No record match your criteria.

Files Related:
../App_Themes/BlueSpring/Style.css
../Experiment/SQL_Experiments/Insert.aspx
../Experiment/SQL_Experiments/Insert.aspx.cs
../Experiment/SQL_Experiments/Result.aspx
../Experiment/SQL_Experiments/Result.aspx.cs
../Experiment/SQL_Experiments/Search.aspx
../Experiment/SQL_Experiments/Search.aspx.cs

Experiment4: XSLT

Transform a XML file through XSLT

Query a Database and transform result through XSLT

Source:
I learned how to download file from this post:
http://dotnetslackers.com/community/blogs/haissam/archive/2007/04/03/Downloading-Files-C_2300_.aspx

I learned how to transform xml file by xslt from this post:
http://www.topxml.com/dotnet/articles/xslt/default.asp

Purpose:This experiment is to demonstrate the use of XSLT and its interaction with C#. In the first example, we used an XSLT file "XSLT_EX1.xslt" to display the data in "XML_EX1.xml". You can download the original xml file to see the difference compared with what web page shows. In the second example, we query the database and save the result into an XmlDocument object and then transform it by an XSLT file "XSLT_EX2.xslt".

Test Case:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/XSLT_Experiments/Example1.aspx
Result: All the records in the "XML_EX1.xml" is transformed by XSLT_EX1.xslt and presented on the web page. You can download the original xml file in the top of the page.

Case #2:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/XSLT_Experiments/Example2.aspx
Result: All the records in the table "Invoices" is transformed by XSLT_EX2.xslt and presented on the web page.

Files Related:

../Experiment/XSLT_Experiments/Example1.aspx
../Experiment/XSLT_Experiments/Example1.aspx.cs
../Experiment/XSLT_Experiments/Example2.aspx
../Experiment/XSLT_Experiments/Example2.aspx.cs
../Experiment/XSLT_Experiments/XML_EX1.xml
../Experiment/XSLT_Experiments/XSLT_EX1.xslt
../Experiment/XSLT_Experiments/XSLT_EX2.xslt

Experiment5: LINQ

Show and delete records from Database

Insert records into Database

Search records from Database

Purpose: This experiment demonstrates the use of LINQ. It uses the same table, Student_Info as Experiment3, which contains Student_ID, First_Name, Last_Name, Age, Email, Student_Major fields. Student_ID is the primary key of the table. There are 3 different functionalities for this experiment. The first functionality pops up all the records from database and presents those records on the web page by GridView control. You can do client sorting and delete records. The second experiment is to insert records into Database. Note that the Student_ID can not be blank or the same as any existing records. The third functionality is to search records from database by specific criterias. If you don't specify a criteria and just simply hit the search button, all the records will be shown.

Test Case:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Result.aspx
Result: All the records in Student_Info table will be poped up and presented by a GridView control. You can do client sorting and delete records.

Case #2:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Insert.aspx
2. Insert a record with into database. Use 0001 as the Student_ID.
Result: Record Added.
3. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Result.aspx
Result: You can find the record you just added.

Case #3:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Insert.aspx
2. Insert a record with into database. Use 0001 as the Student_ID.
Result: The following text will be shown: ERROR: A record with the same primary key already exists.

Case #4:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Insert.aspx
2. Insert a record with into database. Use a string more than 50 characters as the Student_ID.
Result: The following text will be shown: ERROR: Could not add record, please ensure the fields are correctly filled out.

Case #5:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Search.aspx
2. Press the search button.
Result: All the records will be shown in a GridView

Case #6:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Search.aspx
2. Type 20 in the Age textbox and press the search button.
Result: All the records with the Age field of 20 will be shown in a GridView, if there is no record, the following text will be shown: No record match your criteria.

Case #7:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/LINQ_Experiments/Search.aspx
2. Type 20 in the Age textbox and Computer Science in the Student_Major table and press the search button.
Result: All the records with the Age field of 20 and the Student_Major of Computer Science will be shown in a GridView, if there is no record, the following text will be shown: No record match your criteria.

Files Related:
../App_Themes/BlueSpring/Style.css
../App_Code/Student_Info.dbml
../Experiment/LINQ_Experiments/Insert.aspx
../Experiment/LINQ_Experiments/Insert.aspx.cs
../Experiment/LINQ_Experiments/Result.aspx
../Experiment/LINQ_Experiments/Result.aspx.cs
../Experiment/LINQ_Experiments/Search.aspx
../Experiment/LINQ_Experiments/Search.aspx.cs

Experiment6: Painting Zone

Draw basic graphics

Source:
I learned how to draw graphics on the web page from this post:
http://www.c-sharpcorner.com/UploadFile/desaijm/ ImageCanvasWebUserControl11162005045718AM/ImageCanvasWebUserControl.aspx

Purpose: This experiment is to demonstrate drawing basic graphics on the web page

Test Case:

Case #1: Go to http://net35.ccs.neu.edu/home/quintet/Experiment/Drawing_Experiments/Default.aspx
Result:
You can see some basic graphics is drawn on the web page.

Files Related:
../App_Themes/BlueSpring/Style.css
../Experiment/Drawing_Experiments/Default.aspx
../Experiment/Drawing_Experiments/Default.aspx.cs

Experiment6: AJAX

Show current time

Show update progress

Source: I learn from this post:
http://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

Purpose: This experiment shows how to use ASP.NET AJAX control to build simple AJAX application and also shows how to use web user control.

Test Cases:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/AJAX_Experiments/CurrentTime.aspx
Result: The page dynamically shows the current time.

Case #2:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/AJAX_Experiments/UpdateProgress.aspx
2. Click the button
Result: The page will show the update progress

Files Related:
../Experiment/AJAX_Experiments/CurrentTime.aspx
../Experiment/AJAX_Experiments/CurrentTime.aspx.cs
../Experiment/AJAX_Experiments/Timer.ascx
../Experiment/AJAX_Experiments/Timer.ascx.cs
../Experiment/AJAX_Experiments/UpdateProgress.aspx
../Experiment/AJAX_Experiments/UpdateProgress.aspx.cs

Experiment7: Javascript

Show current time

A timed alert box

Source: My second example is from:http://www.w3schools.com/JS/JS_examples.asp

Purpose: This experiment shows how to use Javascript to complete simple tasks

Test Cases:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/JavaScript_Experiments/CurrentTime.aspx
2. Click the button.
Result: The current time will be displayer in a input tag
Case #2:
1. Go to http://net35.ccs.neu.edu/home/quintet/Experiment/JavaScript_Experiments/TimedAlertBox.aspx
2. Click the button.
Result: A pop up window will be displayed after 3 seconds.

Files Related:
../Experiment/JavaScript_Experiments/CurrentTime.aspx
../Experiment/JavaScript_Experiments/CurrentTime.aspx.cs
../Experiment/JavaScript_Experiments/myJS.js
../Experiment/JavaScript_Experiments/TimedAlertBox.aspx
../Experiment/JavaScript_Experiments/TimedAlertBox.aspx.cs

Project

Draw Fractals

Source:
I learned how to display basic graphics from Experiment #6.
I wrote this as one of my Computer Graphics term project using Java2D and Java Swing one year ago. In the last time, the program can correctly draw self-similar fractals but didn't work for tree drawing and I didn't fully solve the scaling problem which is solved in this time.

Purpose:
This project shows how we can send dynamic image content to browser and how to draw self-similar fractals algorithmically

Algorithm description:

There are 3 steps for the drawing algorithm:

1. Calculate the final path: Recursively replace the initial rule by grammar. For example, the initial rule is "F", the grammar is F+F-F, the iteration step is 2. Then the final path is F+F-F+F+F-F-F+F-F. This is done by computePath() function in Data.cs file.

2. Scale: Let the cursor go through all the paths in the unit coordinate system(Each time when we draw a line, the length of the line is 1) but we didn't draw the path at this time. Keep track of the largest and smallest X-coordinate and Y-coordinate value of the cursor during the process. So later on when we want to draw the path on the screen, we go through the same process and map the x,y value from unit coordinate system to screen. The scale process makes sure we can display our final picture in a fixed bitmap whatever how many iteractive steps we go through. This is done by calling drawPath(false) function in Lindermayer.cs file.

3. Draw fractals: Let the cursor go through all the paths in the unit coordinate system and draw the final path on the screen. Each time when we draw a line, we map x,y value from unit coordinate system to the screen. This is done by calling drawPath(true) function in Lindermayer.cs file.

The Enhancement compared with my old work:

1. Well Scaled: You can refer to the algorithm description section or my code.

2. Tree drawing: My last year's program can handle only self-similar fractals which are Grammar #2 - #8, this time the program can handle tree drawing which are Grammar #1, #9 and #10. The difference is that when we draw a tree, we need to always save our state and pop it up later on. I figured out this could be done by using a stack. Please refer to my code for more details.

Drawbacks:

1. I would like to enhance the project so that it can show not only the drawing result, but also the drawing process. I did some research on that, this could be done by Javascript or Silverlight, but ASP.NET always triggers post-back events. I didn't figure out how to do it by ASP.NET server side.

Test Case:

Case #1:
1. Go to http://net35.ccs.neu.edu/home/quintet/Project/Lindermayer/Default.aspx
2. Choose a grammar from grammar menu, if you don't choose a grammar, the program will use the default grammar.
3. Choose a background color such as black, if you don't choose a background color, the program will use the default color, white.
4. Choose a pen color such as white, if you don't choose a pen color, the program will use the default color, green.
5. Choose the pen width, if you don't choose the pen width, the program will use the default width, 1.
6. Click the draw button.
Result: The specified fractal will be draw in the panel.
7. Click N++ button to increase the N value or N-- button to decrease the N value. Note that N goes from 0 - 6.

Files Related:
../App_Themes/BlueSpring/Style.css
../App_Code/Data.cs
../App_Code/State.cs
../App_Code/DrawingPanel.cs
../App_Code/Lindermayer.cs
../App_Code/Project/Lindermayer/Default.aspx
../App_Code/Project/Lindermayer/Default.aspx.cs