1. Introduction
This is our first individual assignment for Programming unit this semester. This assignment was given in December 2013, and submission date is on 10th February 2014.
In this assignment, we were asked to create and design a Photo Viewer application. This application should be able to allow the users to browse through pre-loaded images. Programming will be done using Visual Basic.NET 2008 software.
At the end of the assignment, we should be able to produce documentation on Photo Viewer application.
2. Design Structure
2.1 Layout Form 1
Below is the layout of Form 1:
Button 1: “Add” button – used to add images.
Button 2: “Save” button – used to save new images.
Button …show more content…
3: “Cancel” button – used to cancel action.
Button 4: “Exit” button – used to close Photo Viewer application.
Button 5: “View Photos” button – used to view images.
Picture Box: It is where the image will appear.
Labels: This is where the details of the image are shown.
2.2 Form 1 Coding
Here is the coding listing for Form 1:
Imports System.IO
Public Class Form1 Dim filename As String Dim strdirectory As String = "\VB\Photo Viewer\"
Private Sub save_record()
Dim opentext As StreamWriter If File.Exists(strdirectory & "photos.txt") Then opentext = File.AppendText(strdirectory & "photos.txt") Else opentext = File.CreateText(strdirectory & "photos.txt") End If
opentext.WriteLine(txtimgno.Text) opentext.WriteLine(txtcaption.Text) opentext.WriteLine(txtdate.Text) opentext.WriteLine(rtbDescription.Text) opentext.WriteLine() opentext.Close() pbxPhoto.Image.Save(strdirectory & "images\" & txtimgno.Text & ".jpg") MsgBox("Image saved!", MsgBoxStyle.Information) gbxDetails.Enabled = False btnSAVE.Enabled = False btnCancel.Enabled = False gbxDetails.Enabled = False btnADD.Enabled = True btnVIEW.Enabled = True btnExit.Enabled = True
txtcaption.Clear() txtdate.Text = "" txtimgno.Clear() rtbDescription.Clear() pbxPhoto.Image = Nothing filename = …show more content…
"" OpenFileDialog1.FileName = "" End Sub Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load btnSAVE.Enabled = False btnCancel.Enabled = False gbxDetails.Enabled = False
End Sub
Private Sub btnADD_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnADD.Click With OpenFileDialog1 .FilterIndex = -1 .Filter = "IMAGE FILES (*.jpg;*.gif;*.png)|*.jpg;*.gif;*.png"
.ShowDialog() If .FileName = "" Then MsgBox("No image selected!") Else filename = .FileName pbxPhoto.Image = Image.FromFile(filename) gbxDetails.Enabled = True btnSAVE.Enabled = True btnCancel.Enabled = True btnADD.Enabled = False btnVIEW.Enabled = False btnExit.Enabled = False
End If End With End Sub
Private Sub btnCancel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnCancel.Click Dim x As Integer x = MsgBox("Cancel adding picture?", MsgBoxStyle.Question + MsgBoxStyle.OkCancel)
If x = vbOK Then gbxDetails.Enabled = False btnSAVE.Enabled = False btnCancel.Enabled = False gbxDetails.Enabled = False btnADD.Enabled = True btnVIEW.Enabled = True btnExit.Enabled = True
txtcaption.Clear() txtdate.Text = "" txtimgno.Clear() rtbDescription.Clear() pbxPhoto.Image =
Nothing filename = "" OpenFileDialog1.FileName = "" End If
End Sub
Private Sub btnExit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnExit.Click Dim x As Integer x = MsgBox("Exit form?", MsgBoxStyle.Question + MsgBoxStyle.OkCancel)
If x = vbOK Then Me.Close()
End If End Sub
Private Sub btnSAVE_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSAVE.Click If txtcaption.Text = "" Or txtdate.Text = "" Or txtcaption.Text = "" Or rtbDescription.Text = "" Then MsgBox("Cannot continue save, all details must be completed first!", MsgBoxStyle.Critical) Else Dim opentext1 As StreamReader Dim flag As Boolean flag = False opentext1 = File.OpenText(strdirectory & "photos.txt")
While opentext1.Peek -1 If txtimgno.Text = opentext1.ReadLine Then flag = True Else opentext1.ReadLine() opentext1.ReadLine() opentext1.ReadLine() opentext1.ReadLine() End If
End While opentext1.Close() If flag = False Then save_record() Else MsgBox("Done") End If End If
End Sub
Private Sub btnVIEW_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnVIEW.Click frmViewPhotos.Show() End Sub
Private Sub gbxDetails_Enter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles gbxDetails.Enter
End Sub
Private Sub pbxPhoto_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles pbxPhoto.Click
End Sub
End Class
2.3 Layout Form 2
Below is the layout of Form 2:
Button 1: “Search” Button- Used to search any ID.
Button 2: “Search” Button- Used to search any Captions.
Button 3: “Previous” Button – Used to previous the images
Button 4: “Next” Button – Used to next the images.
Button 5: “Close” Button – Used to close the application.
Picture Box: It is where the image will appear.
Labels: This is where the details of the image are shown.
2.4 Form 2 Coding
Here is the coding listing for Form 2:
Imports System.IO
Public Class frmViewPhotos Dim arrphotos(50, 4) Dim strdirectory As String = "\VB\Photo Viewer\photos.txt" Dim count As Integer = 0 Dim index As Integer = 0 Private Sub load_image(ByVal index As Integer) pbxImage.Image = Image.FromFile("\VB\Photo Viewer\Images\" & arrphotos(index, 0) & ".jpg") txtimgno.Text = arrphotos(index, 0) txtcaption.Text = arrphotos(index, 1) txtdate.Text = arrphotos(index, 2) rtbDescription.Text = arrphotos(index, 3) End Sub Private Sub load_array() Dim opentext As StreamReader Dim x As Integer opentext = File.OpenText(strdirectory) x = 0 While opentext.Peek -1 arrphotos(x, 0) = opentext.ReadLine arrphotos(x, 1) = opentext.ReadLine arrphotos(x, 2) = opentext.ReadLine arrphotos(x, 3) = opentext.ReadLine opentext.ReadLine()
x += 1
End While count = x opentext.Close()
End Sub Private Sub frmViewPhotos_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
load_array() load_image(0) End Sub
Private Sub btnNext_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnNext.Click If index count - 1 Then index += 1 load_image(index) Else index = 0 load_image(index) End If End Sub
Private Sub btnPrevious_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnPrevious.Click If index 0 Then index -= 1 load_image(index) Else index = count - 1 load_image(index) End If End Sub
Private Sub btnSearch2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSearch2.Click
For x = 0 To count - 1 If arrphotos(x, 0) = TextBox1.Text Then MsgBox("Image found!") load_image(x) End If Next
End Sub
Private Sub btnSearch_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSearch.Click For x = 0 To count - 1 If arrphotos(x, 1) = TextBox2.Text Then MsgBox("Image found!") load_image(x) End If Next End Sub
Private Sub btnClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnClose.Click Dim x As Integer x = MsgBox("Exit form?", MsgBoxStyle.Question + MsgBoxStyle.OkCancel)
If x = vbOK Then Me.Close() End If End Sub
Private Sub GroupBox1_Enter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GroupBox1.Enter
End Sub
End Class
2.5 Objective Definition Table
No
Type
Property
Value
Event Procedure
1
FORM1
Name
PhotoAdd
PhotoAdd_Load
Text
Add Photo
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
2
ADD
Name
BtnAdd
BtnName_Click
Text
Add
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
3
SAVE
Name
BtnSave
BtnSave_Click
Text
Save
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
4
CANCEL
Name
BtnCncel
BtnCncel_Click
Text
Cancel
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
5
VIEW PHOTOS
Name
ViewPhtos
BtnViewPhotos_Click
Text
ViewPhotos
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
6
EXIT
Name
BtnExt
BtnExit_Click
Text
Exit
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
7
SEARCH
Name
BtnSearch
BtnSearch_Click
Text
Search
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
8
PREVIOUS
Name
BtnPrvios
BtnPrevious_Click
Text
Previous
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
9
NEXT
Name
BtnNxt
BtnNext_Click
Text
Next
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
10
CLOSE
Name
BtnClse
BtnClose_Click
Text
Close
Font Size
9
Font Colour
Black
Font Style
Segoe Print, 9pt, style=Bold
11
LABEL
Name
Label1
Text
Photo Details
Font Size
9
Font Colour
Lime
Font Style
Palatino Linotype, 12pt, style=Bold
12
LABEL
Name
Label2
Text
Images No
Font Size
9
Font Colour
Lime
Font Style
Palatino Linotype, 12pt, style=Bold
13
LABEL
Name
Label3
Text
Caption
Font Size
9
Font Colour
Lime
Font Style
Palatino Linotype, 12pt, style=Bold
14
LABEL
Name
Label4
Text
Date Taken
Font Size
9
Font Colour
Lime
Font Style
Palatino Linotype, 12pt, style=Bold
15
LABEL
Name
Label5
Text
Description
Font Size
9
Font Colour
Lime
Font Style
Palatino Linotype, 12pt, style=Bold
16
LABEL
Name
Label6
Text
Search By ID
Font Size
9
Font Colour
Black
Font Style
Palatino Linotype, 12pt, style=Bold
17
LABEL
Name
Label7
Text
Search By Caption
Font Size
9
Font Colour
Black
Font Style
Palatino Linotype, 12pt, style=Bold
3. Flow Charts
What is Algorithm?
1. Firstly user should Run F5 to debug the program, then click the add button to select the images/pictures(choose)
2. Then save the images.
3. After that, if the user want to cancel click the cancel button
4. Secondly, if the user wants to view the image, you should click view my image button.
5. Thirdly, if the user want to search by ID or by CAPTION click search button
6. Lastly, if the user want to exit click Exit and it will exit or close the whole program
4. Implementation
Picture show the main screen of Photoviewer.
ADD IMAGE
1. If user want to add an image to the photo viewer, click button.
2. This window will appear
3. Select the image user wants to upload.
4. Click OPEN.
5. Fill in the details of the selected image.
6. Click to cancel the adding operation.
7. A pop up message will appear if user didn’t fill in the image details.
8. Click OK and Click button to save the picture to the system.
VIEW IMAGE
1. If user wants to view the pictures that have been saved, click button.
2. Selected image will appear with the details. Refer to picture
3. Click button to view the next picture.
4. If user wants to view the previous picture just click.
5. If user wants to search for a specific picture, either enters ID or Caption .
5. Testing Error
Program Name:
Photo Viewer
Developer:
Muhammad Rifa’ie Bin Ma’arof
Form Name:
Form1/2 -Photo Viewer
Date:
Object
Name
Test Data
Test Description
Expected Outcome
Search by ID/Search by Caption
Click
Error
Exit Button
Click
Error
Must cancel all the operation and then the exit button will working
View the image
Click
The details are not correct as refer into the image.
Next/Previous Button
Click
Next/Previous button only can be five images only. If user click more than five images the application will error.
ERROR-WHEN THE USER CLICKS THE SEARCH BUTTON
ALL THE DETAILS NOT CORRECT AS REFER INTO THE IMAGE
ERROR IN EXIT BUTTON
Step 1.User must cancel all the operations. Step 2.The exit button will working after the cancelation operation already make it.
NEXT/PREVIOUS BUTTON ONLY CAN BE UP FIVE IMAGES ONLY,IF MORE THAN FIVE IMAGES THE APPLICATION WILL ERROR.
THIS IS HAPPEN WHEN USER CLICK THE NEXT/PREVIOUS BUTTON MORE THAN FIVE IMAGES
6. Program Installation Process
1. If user wants to install the Photo Viewer application just proceed to the install button.
1. This window screen will appear when the installation already complete.
7. Conclusions
I would like to appreciate the support provided by my Colleagues and special thanks to Miss Fazida who contributed in giving ideas on how does this assignment should be done.
For this assignment, the title is known as Photo Viewer. Throughout the assignment, you’ll be able to see we’re using Microsoft Visual Basic 2008.
I have included the flow chart to show how the system works and a detailed implementation which is similar to a guideline to help people to understand how to operate the program without errors. Installations are also provided at the end of the topic for our assignment.