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
