AMIT3023 Web Application Programming Practical Exercise 11

Practical Exercise 11

Q1. Creating the Data Files

• Open the given [Practical11] ASP.NET web application project in Visual Studio.

• Create a new SQL Server Express database named [DemoDB.mdf] in the [App_Data] folder.

• Create new table named [Friend] with the following fields and add the following records
to the table:

[Id] is an identity
(auto increment) field

[Photo] field stores the filenames

• The actual photos are stored in the [Photos] folder of the web application.

Academic Year 2020/2021 Page 1 of 8

AMIT3023 Web Application Programming Practical Exercise 11

• Add a new DBML (LINQ to SQL Classes) file named [DemoDB.dbml] to the project.

• From Server Explorer, drag-and-drop the [Friend] table to the Object Relational (OR)
Designer. The following entity class should be generated:

• The [ListFriend.aspx] page has been completed.

Click the link to navigate to

the [EditFriend.aspx] page

Q2. Uploading Photo

• Drag-and-drop the given [SimpleImage.cs] file onto the project root in Solution Explorer.

Academic Year 2020/2021 Page 2 of 8

AMIT3023 Web Application Programming Practical Exercise 11

The SimpleImage class contains methods

for performing simple image manipulation

• Open the [InsertFriend.aspx] page (which is partially completed). Currently, the page
can insert a [Friend] record. However, photo uploading has not been programmed.

RegularExpressionValidator that checks the

file extension (which is not setupcorrectly)

• Select the RegularExpressionValidator that checks the file extension. In Properties Window,
set its ValidationExpression property to the following value:

• Press [F7] to switch to the associated C# file. Add the following using statement:

Namespace for the

SimpleImage class

• In the btnInsert_Click event handler, locate the [TODO] section. Complete the section with
the following codes:

Academic Year 2020/2021 Page 3 of 8

AMIT3023 Web Application Programming Practical Exercise 11

• Test the result. Ensure that input validation rejects none JPG and PNG file. Insert a new
[Friend] record. Ensure that the photo is uploaded, cropped, resized and saved successfully.

Try to insert a new [Friend] record. It should be shown

(with photo) in the [ListFriend.aspx] page after insertion

Q3. Replacing Photo

• Open the [EditFriend.aspx] page (which is partially completed). Currently, the page can
update and delete a [Friend] record. However, photo replacement and deletion have
not been programmed.

NOTE: While updating a [Friend] record, the user may or may not want to replace the photo.

Academic Year 2020/2021 Page 4 of 8

AMIT3023 Web Application Programming Practical Exercise 11

Thus, if NO photo is selected in the FileUpload control, we assume that the user wants to
keep the existing photo. However, if a photo is selected, we assume that the user wants to
replace the existing photo with a new one.

As a result, it is not necessary to use a RequiredFieldValidator to validate the FileUpload

control. The user may leave the field empty to indicate he does not want to replace the
existing photo.

RegularExpressionValidator that checks the

file extension (which is not setup correctly)

• Select the RegularExpressionValidator that checks the file extension. In Properties Window,
set its ValidationExpression property to the following value:

• Press [F7] to switch to the associated C# file. Add the following using statements:

Namespace for
the File class

• In the btnUpdate_Click event handler, locate the [TODO] section. Complete the section with
the following codes:

NOTE: There are 2 steps in the photo replacement process: (1) Delete the existing photo,
and (2) Save the new photo (including cropping and resizing).

Academic Year 2020/2021 Page 5 of 8

AMIT3023 Web Application Programming Practical Exercise 11

Since the new photo is having a different unique random filename. It is also necessary to
update the [Friend] record with the filename of the new photo.

If a photo is selected and upload (means the

user wants to replace the existing photo)

Obtain the filename of the existing

photo from the [Friend] record

Delete the existing photo

Save the new photo

Update the [Friend] record with

the filename of the new photo

• Test the result. Ensure that input validation rejects none JPG and PNG file. Update a [Friend]
record without selecting a photo. Then, update a [Friend] record with a new photo being
selected. Ensure that both cases are working as expected. Also ensure that the old photo has
been deleted from the [Photos] folder.

Select a new photo to

replace the existing photo

Academic Year 2020/2021 Page 6 of 8

AMIT3023 Web Application Programming Practical Exercise 11

The record
should show the
new photo now

In addition, the old photo

should also be deleted from
the [Photos] folder

Q4. Deleting Photo

• In the btnDelete_Click event handler, locate the [TODO] section. Complete the section with
the following codes:

NOTE: Remember to delete the associated images (e.g. product images, profile images, etc)
while deleting the relevant database records (e.g. product records, member records, etc).
Leaving behind the images (which may no longer be used again) will be taking up the
storage space of the web server.

Academic Year 2020/2021 Page 7 of 8

AMIT3023 Web Application Programming Practical Exercise 11

• Test the result. Delete a [Friend] record.Ensure that it is working as expected. Also ensure
that its photo has been deleted from the [Photos] folder.

Delete a [Friend] record. Its photo should

also be deleted from the [Photos] folder

Academic Year 2020/2021 Page 8 of 8