VISUAL C# No.34: Membuat Simple Photo Gallery - Next Previous Button Navigation

Membuat Simple Photo Gallery – Dengan Next dan Previous Button

Lihat, betapa mudahnya membuat sebuah aplikasi sederhana simple photo gallery dengan C#, cobalah :)
Tutorial ini merupakan tutorial yang terinspirasi dari tutorial sebelumnya yaitu ‘Membuat Picture Viewer’. Tak terasa tutorial ‘Membuat Picture Viewer’ sudah menginjak ke part penambahan tombol prev dan next. Tetapi menurut saya pribadi, ada baiknya tutorial prev dan next ini terlebih dahulu kita sendirikan agar lebih mudah dipahami pembaca, baru nanti kita buatkan part berikutnya.

Tutorial ini sengaja kita buat dalam bentuk text, sangat simple dan kodenya sederhana sekali, bila anda telah menggunakan Visual Studio 2010 pasti sudah langsung mampu mengikuti tutorial text ini.

Perhatikan, membuat simple photo gallery ini sangat gampang sekali asal anda menggunakan Visual Studio. Untuk versi express (gratis) anda dapat mendownloadnya di MSDN.

Pertama, mari kita buat gui dengan mempersiapkan beberapa komponen seperti MenuStrip, PictureBox, dan Button. Kemudian kita tata sedemikian rupa dan kita berikan nama kepada masing masing komponen seperti pada gambar berikut ini:

Lihat, kita menata sedemikian rupa, sangat mudah, anda tinggal drag and drop saja komponen yang anda butuhkan ke dalam Windows Form.
Pada menuStrip, kita menambahkan Open dan Exit, untuk button, kita membuat dua buah button dengan nama masing masing seperti pada gambar.
Sudah taukan bagaimana menambahkan fungsi/method ke setiap komponen? Yup, anda tinggal double click saja komponen.

Langsung saja ke kode, perhatikan kode simple berikut ini:

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

/***********
* SIMPLE IMAGE GALLERY
* PREV AND NEXT BUTTON
* BY Okie Eko Wardoyo
* MediaTutorial.web.id
* *********/
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.IO; //perlu ditambahkan untuk directory
namespace NEXT_PREVIOUS
{
public partial class Form1 : Form
{
Bitmap img = null;
//kita buat variable
string directoryPath;
string[] filesArray;
int totalFiles;
int i = 0;
public Form1()
{
InitializeComponent();
}
private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
this.Close();
}
private void openToolStripMenuItem_Click(object sender, EventArgs e)
{
if (openFileDialog1.ShowDialog() == DialogResult.OK)
{
//kita jadikan mode zoom agar ukuran file fit dengan pictureBox
pictureBox.SizeMode = PictureBoxSizeMode.Zoom;
//pictureBox.Load(openFileDialog1.FileName);
img = new Bitmap(openFileDialog1.FileName);
pictureBox.Image = img;
//kita coba mengambil directory dari FileName
directoryPath = Path.GetDirectoryName(openFileDialog1.FileName);
//kita coba tampilkan di window output
Console.WriteLine(directoryPath);
//mari kita buat array string
filesArray = Directory.GetFiles(@directoryPath);
//kita coba tampilkan di window output
foreach (string file in filesArray)
{
Console.WriteLine(file);
}
totalFiles = filesArray.Length;
//kita coba tampilkan di window output
Console.WriteLine("Total semua = "+totalFiles);
//kita sekarang akan men-set curent i
i = Array.IndexOf(filesArray, openFileDialog1.FileName);
//yuk kita tampilkan curent i di output biar keliatan
Console.WriteLine("Curent i = " + i);
}
}
private void buttonNext_Click(object sender, EventArgs e)
{
if (img != null)
{
if (i < totalFiles-1)
i++;
img = new Bitmap(filesArray[i]);
pictureBox.Image = img;
//kita coba tampilkan di window output
Console.WriteLine("i = " + i);
}
}
private void buttonPrev_Click(object sender, EventArgs e)
{
if (img != null)
{
if (i > 0)
i--;
img = new Bitmap(filesArray[i]);
pictureBox.Image = img;
//kita coba tampilkan di window output
Console.WriteLine("i = " + i);
}
}
}
}

Penjelasan kode:
Hal pertama yang harus kita tambahkan adalah using System.IO; , ini adalah reference yang akan kita gunakan untuk fungsi-fungsi Directory.
Yang kedua, kita harus membuat beberapa variable yang nanti akan kita gunakan, diantaranya adalah:
string directoryPath;
string[] filesArray;
int totalFiles;
int i = 0;

Yup, saya yakin, tanpa dijelaskan pun anda sudah dapat memahami nya sendiri, oke, kalo begitu mari kita melanjutkan untuk memberikan fungsi/method pada MenuStip, yaitu pada open dan exit.

Bagaimana cara menambahkannya? Anda tinggal double click submenu open, dan submenu exit, kemudian system akan otomatis membuat dua buah method yaitu:
private void exitToolStripMenuItem_Click(object sender, EventArgs e){}
private void openToolStripMenuItem_Click(object sender, EventArgs e){}

Berikutnya kita tambahkan method untuk buttonNext dan buttonPrev, caranya sama, hanya dengan double click, maka nanti akan membuat fungsi:
private void buttonNext_Click(object sender, EventArgs e){}
private void buttonPrev_Click(object sender, EventArgs e){}

Nah, sangat sederhana bukan. Coba perhatikan kodenya, dan amati, saya yakin tanpa penjelasan anda akan mengerti dengan sendirinya.

Mudah mudahan bermanfaat, dan pada tutorial berikutnya, kita akan menggunakan metode ini untuk membuat Prev dan Next button pada tutorial ‘Membuat Windows Picture Viewer’.

Download the source files