Learning by sample gdi+ - thumbnail
-
Upload
soetam-rizky -
Category
Education
-
view
481 -
download
2
description
Transcript of Learning by sample gdi+ - thumbnail
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 0
GDI+ : Thumbnail 2011
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
GDI+ : Thumbnail
Learning By Sample Series
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 1
GDI+ : Thumbnail 2011
Foreword
Learning By Sample ?
So, why should I made this tutorial freely accessed by everyone ? Well, surely I
am just nobody, I also just another ordinary person with ordinary knowledge. However,
I always feel that some persons in the internet giving away their tutorial for free and I
feel being helped by them. Then, I remember one of my senior wisdom words : “If you
want to be given more, then start to give more”. And of course, I really believe those
words, since that I already proof it to be right all the time.
Also, I’m not an English native speaker, however, I just try to improve my
English in any other way, especially in written format. Thus, I think writing is the best
practice to improve my English freely. However, you will find many grammatical errors
in my tutorial, so please send me comments and also suggestion to improve it.
Then, why the format using Learning By Sample series ? Is it really different with
other tutorials out there ? Ehm, I already wrote three books (in Indonesian) using this
kind of format, and many readers already contact me about how this format really help
them to learn from the scratch. So, why in the world I’m not re-create it in English
format, right ? Eventhough actually, it is similar with Hands On Lab series which
already famous in Microsoft site previously.
All of my lesson also being designed as short samples and short time exercise.
Thus, I hope that each of tutorial series would take only at least 10-15 minutes
maximum to learn. Why keep it short ? Because many beginners (and even expert) will
find boring whenever they must keep studying more than 15 minutes (but you will
never get bored when you online in such time right ?).
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 2
GDI+ : Thumbnail 2011
Another reason is just because many of samples in this series come up from my
lecturing task exercise. So, I just try to compile all my lab exercises in order to keep it
tidy and also reusable for my students. That’s why you will find many unsorted course
material inside these series, however, just take a seat and enjoy the ride !
Requirements
In this series, I try to give simple example about GDI+. So what is GDI+ anyway ?
GDI+ or GraphicsDrawing Interface is merely part of .NET Framework which entirely
purposed in manipulating graphics. However I’m not going to make you understand
complex theory about this class. I just try to make you understand it in very simple and
stupid way.
All of my samples in this series use Visual Web Developer 2010 Express edition
however you can also do it all using Visual Studio. If you really want to follow this
series, then you should aware that basic programming knowledge is needed. You
should also familiar with ASP .NET especially for version 3.5 above.
FYI, I’m a VB guy, so please don’t complaint if I use VB entirely in this series. But
nowadays, there’s no such useful things if we argue about language differences,
because I just try to share something that I know. So, if you don’t like VB and want to
have another tutorial with your own favourit language, then I’d be happy to read it.
Now, let’s get started…….
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 3
GDI+ : Thumbnail 2011
Let’s Get Started
1. First, ensure that you already open Visual Web Developer 2010 Express Edition
2. Create a newly blank website and give it a name
3. Now, let’s create a new blank web page
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 4
GDI+ : Thumbnail 2011
4. In newly created web page, insert new table which has 3 rows and 2 columns, by
clicking menu Table � Insert Table and in available dialog box set its rows and
columns value :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 5
GDI+ : Thumbnail 2011
5. Type some text just for descriptive reason in first column and a FileUpload control
in second column, both of the at first row :
6. In second row of the table, put a Button in first column and an Image control in
second column. Set the width and height property of the Image control, both with
the same size which is 50px. This Image control will be used as thumbnail
container later.
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 6
GDI+ : Thumbnail 2011
7. In third row, put a Listbox for it first second and another Image control in next
column. In this second Image control set the width and height property to 300px,
since that this control will be the container of the real image.
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 7
GDI+ : Thumbnail 2011
8. And int the last row, put a Label control and set its Text property to none. This
Label will be the container of some explanation text later.
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 8
GDI+ : Thumbnail 2011
9. Now, let’s type some code for the Button, here it is :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 9
GDI+ : Thumbnail 2011
10. Still getting some typo errors ? Don’t worry, just add this function and procedure
below it :
11. Another error warning ? Then add this snippet at the top of Code editor :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 10
GDI+ : Thumbnail 2011
12. Then back to Design mode, set the only available Listbox to an autopostback
behavior. Then double click it to type the code inside :
13. The final step in the code editor is create a Page_Load event which contains this
code :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 11
GDI+ : Thumbnail 2011
14. And the last step is creating a folder which will hold all the uploaded images. Just
go to Solution explorer and right click in order to choose New folder and name it as
images folder.
15. Now, before you execute the web page, here is some explanations for you :
a. At first, we need two references : first for GDI+ (Drawing) and second for the
file operation (IO). File operation reference is needed for Listbox which
display all the thumbnail images in images folder.
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 12
GDI+ : Thumbnail 2011
b. Then we also need some basic variables to declare the IO operation
c. So, what happen when we click the Button ?
i. First, of course the uploading process happen
ii. Next, we create a thumbnail from the uploaded image using
GetThumbnailImage method. We create a 100 x 100 pixel thumbnail
for any uploaded image (you can also do calculation in order to keep
the image thumbnail looks proportional), and then save it with adding
prefix thumb. As you can see, that method need a dummy function
which return true value, so we create that dummy function….
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 13
GDI+ : Thumbnail 2011
iii. Then, the IsiList procedure being called in order to refresh the content
of Listbox. FYI, IsiList is an Indonesian phrase which means fill the
list. In this procedure we just grab all the contents in images folder
and display it in Listbox. Remember that this procedure being
executed two times, in Button click and in Page load.
d. Finally, when we already have some images uploaded, Listbox should have
some contents. Then when user click at one of those contents, we just
display the thumbnail version in first Image control, and the real one in
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 14
GDI+ : Thumbnail 2011
second Image control. I also add an description of how the thumbnail help us
in reducing bandwidth of user by display the real size of image and compare
it with the thumbnail size.
In this procedure also you can see how I manipulate the file name string.
When all the thumbnail file name begin with thumb, it means I have to
eliminate five first lettters in order to get the real name of Image file (focus
on Mid function usage).
16. Got something in the explanation ? Or still confuse ? Maybe executing the web page
will give you some enlightment …..
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 1
Page 15
GDI+ : Thumbnail 2011
17. Ok then, I don’t need any donation for this tutorial, but I really appreciate if you
help me to spread this tutorial to others. And also, give some critics, suggestions or
any other complaints to my email : [email protected] , also don’t forget to keep
visiting my site : www.bukanSembarang.info for more tutorials. See you in next
interesting tutorial : creating your own Captcha….