Monday, September 9, 2013

Auto Refresh Page untuk Halaman IOAA

Membuat Auto refresh Halaman
dengan tujuan agar informasi pada halaman hasil penilaian dapat berubah secara realtime tiap 20 detik maka perlu ditambahkan script seperti berikut ini:
untuk fungsi mainnya adalah sebagai berikut ini dengan memanfaatkan sebuah thread maka secara otomatis dapat membuat halaman tersebut selalu auto refresh tiap 20 detik.
public Main()
        {

            try
            {
                RebindData();
                SetTimer();
            }
            catch (Exception e)
            {
                Console.WriteLine(e.Message);
            }

           
        }
Script diatas memanggil beberapa fungsi yaitu fungsi RebindData untuk menaruh script utama yang dijalankan sedangkan SetTimer untuk durasi waktu thread berlangsung. Berikut ini contoh script RebindData() dan SetTimer untuk halaman Moderation
        private void RebindData()
        {
            new Action(async () =>
            {
                var user = await MyService.GetLeaderIdAsync(new ServiceReference1.User { UserId = idleader });
                foreach (var usr in user)
                {
                    country = usr.UserCountry;
                }


                var gradeleader = await MyService.GetModerasiLeaderAsync(new ServiceReference1.ModerasiLeader { Country = country });
                if (gradeleader.Count() > 0)
                {
                    foreach (var grd in gradeleader)
                    {
                        dtgrdModeration.ItemsSource = await MyService.GetModerasiLeaderAsync(new ServiceReference1.ModerasiLeader { Country = country });
                        dtgrdModeration.Columns[0].DisplayIndex = 3;
                        dtgrdModeration.Columns[1].DisplayIndex = 2;
                        dtgrdModeration.Columns[2].DisplayIndex = 1;
                        dtgrdModeration.Columns[3].DisplayIndex = 0;
                    }
                }
            }).Invoke();
        }

        protected void dispatcherTimer_Tick(object sender, EventArgs e)
        {
            RebindData();
        }

        private void SetTimer()
        {
            DispatcherTimer dispatcherTimer = new DispatcherTimer();
            dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
            dispatcherTimer.Interval = new TimeSpan(0, 0, 20);
            dispatcherTimer.Start();

        }

Skema Text Editor IOAA



•Untuk mempermudah dalam pengisian jawaban baik berupa text, gambar maupun tabel.

•Untuk mempermudah dalam pembuatan rumus yang perlu dituliskan.

Membuat Text Editor pada IOAA

Text Editor merupakan salah satu fasilitas yang ada dalam aplikasi IOAA yang berfungsi sebagai lembar jawaban yang digunakan oleh peserta. fasilitas ini menyediakan beberapa fitur diantaranya adalah toolbar untuk format penulisan dan juga Ink Pen untuk membuat penulisan rumus. Selain itu, Text Editor ini bisa menyalin format text dari text editor lain seperti Microsoft Word dan Microsoft Excel yang berupa tabel, grafik maupun gambar.
Terdapat menu toolbar diatas yang berfungsi antara lain, mulai dari kiri :
1. Insert Picture, digunakan untuk mengambil gambar dari komputer.
2. Select all, digunakan untuk men select semua object yang ada pada Text Editor.
3. Cut, digunakan untuk memindahkan object.
4. Copy, digunakan untuk menyalin object.
5. Paste, digunakan untuk menempelkan object hasil dari menu cut maupun copy.

Untuk script utama yang digunakan untuk pengambilan warna dengan memanfaatkan fungsi lainnya adalah sebagai berikut :                                    
      public Color SelectedColor
        {
            get { return selectedColor; }
            private set
            {
                if (selectedColor != value)
                {
                    selectedColor = value;
                    CreateAlphaLinearBrush();
                    UpdateTextBoxes();
                    UpdateInk();
                }
            }
        }
Ink Pen merupakan salah satu menu dari Text Editor yang digunakan pada aplikasi IOAA yang berfungsi sebagai pembuat rumus dalam bentuk gambar. Aplikasi ini mempermudah dalam pembuatan gambar rumus secara langsung dengan teknologi touch pen sekarang ini

. Dibawah ini merupakan script untuk menaruh objek yang sudah digambar melalui Ink Pen untuk dimasukkan ke Text Editor.
private void Button_Insert(object sender, RoutedEventArgs e)
        {
            try
            {
            RenderTargetBitmap rtb = new RenderTargetBitmap((int)inkCanv.ActualWidth, (int)inkCanv.ActualHeight, 96d, 96d, PixelFormats.Default);
            rtb.Render(inkCanv);
           
            Rect bounds = inkCanv.Strokes.GetBounds();
            bounds.Inflate(20, 20);
            bounds.Intersect(new Rect(0d, 0d, inkCanv.ActualWidth,
            inkCanv.ActualHeight));

            Int32Rect boundsI = new Int32Rect((int)bounds.X, (int)bounds.Y,
            (int)bounds.Width, (int)bounds.Height);
            CroppedBitmap bmp = new CroppedBitmap(rtb, boundsI);
            Clipboard.SetImage(bmp);
            f1.RichTextControl1.Paste();
            this.Close();
                }
                catch (Exception exc)
                {
                    this.Close();
                }
        }

Dibawah ini merupkan video tutorial cara pembuatannya:


Tuesday, September 3, 2013

IOAA app bagian Juri Halaman Login

Selamat malem sahabat coding!!
Gimana kabarnya hari ini??? baik kan?? pastinya dong hehe,,,

Oke disini saya akan menshare tentang pembuatan aplikasi. Pada postingan saya sebelumnya telah dijelaskan bahwa ada beberapa bagian aplikasi yang harus dikerjakan antara lain Aplikasi Admin, Jury, Teamleader, Participant, dan Web. Disini saya mendapat bagian untuk mengerjakan aplikasi Jury.

Oke sobat coding semua langsung saja kita ke aplikasinya,,
Karena pada postingan sebelumnya sudah dijelaskan bahwa aplikasi ini berbasis desktop dengan menggunakan bahasa pemrograman C# dan harus memakai produk windows, maka saya menggunakan Microsoft Visual Studio sebagai editornya, untuk database saya menggunakan Microsoft SQL Server.

Oke pertama saya membuat halaman login
pertama saya buat halaman LoginPage.xaml
untuk contoh design yang kami buat seperti dibawah ini


kemudian pada halaman LoginPage.xaml.cs saya buat scriptnya seperti ini

Pada Pemrograman C# kita harus memanggil Library terlebih dahulu, untuk Library apa saja yang dibutuhkan lihat Script dibawah ini :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


Kemudian kita memanggil service WCFnya, karena disini kami menggunakan WCF yang dihubungkan ke database, WCF ini sendiri sebagai penghubung ke database, untuk memanggil service WCF lihat Script dibawah ini :

public partial class Home : Window

    {

        ServiceReference1.Service1Client service;
        public static string ID;


        public Home()

        {

            service = new ServiceReference1.Service1Client();
            InitializeComponent();

        }



Kemudian kita membuat event button Login:

private async void Button_Click_1(object sender, RoutedEventArgs e)</ br>
        {
            try
            {
                ID = txtusername.Text;
                bool hasil = false;
                hasil = await service.LoginUserAsync(new AdminIOAA.ServiceReference1.Login
                {
                    Username = txtusername.Text,
                    UserPassword = txtpassword.Password.ToString(),
                    UserPrivillage = "Jury"
                });
                if (hasil)
                {</ br>
                    MainWindow main = new MainWindow();
                    main.Show();
                    var dlg = Window.GetWindow(this);
                    dlg.Close();
                }
                else
                {
                    MessageBox.Show("User or Password Wrong");
                }
           } 
            catch (Exception err)
            {
                MessageBox.Show("Not Connected to Server, Please Contact Server");
           }
        }


Setelah event Button Login selesei dibuat, kita membuat event button close untuk close aplikasi, seperti dibawah ini :

private void btncloseclick(object sender, RoutedEventArgs e)
        {
            var msg = MessageBox.Show("Are you sure to quit?", "Warning", MessageBoxButton.YesNo);
            switch (msg)
            {
                case MessageBoxResult.Yes:
                    var dlg = Window.GetWindow(this);
                    dlg.Close();
                    break;
                case MessageBoxResult.No:
                    break;
            }
        }        


Untuk lebih lengkapnya halaman LoginPage.xaml.cs seperti dibawah ini :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


namespace AdminIOAA.Pages
{
    /// <summary>
    /// Interaction logic for Home.xaml
    /// </summary>
    public partial class Home : Window
    {
        ServiceReference1.Service1Client service;
        public static string ID;


        public Home()
        {
            service = new ServiceReference1.Service1Client();
            InitializeComponent();
        }


        private async void Button_Click_1(object sender, RoutedEventArgs e)
        {
            try
            {
                ID = txtusername.Text;
                bool hasil = false;
                hasil = await service.LoginUserAsync(new AdminIOAA.ServiceReference1.Login
                {
                    Username = txtusername.Text,
                    UserPassword = txtpassword.Password.ToString(),
                    UserPrivillage = "Jury"
                });
                if (hasil)
                {
                    MainWindow main = new MainWindow();
                    main.Show();
                    var dlg = Window.GetWindow(this);
                    dlg.Close();
                }
                else
                {
                    MessageBox.Show("User or Password Wrong");
                }
           } 
            catch (Exception err)
            {
                MessageBox.Show("Not Connected to Server, Please Contact Server");
           }
        }


        private void btncloseclick(object sender, RoutedEventArgs e)
        {
            var msg = MessageBox.Show("Are you sure to quit?", "Warning", MessageBoxButton.YesNo);
            switch (msg)
            {
                case MessageBoxResult.Yes:
                    var dlg = Window.GetWindow(this);
                    dlg.Close();
                    break;
                case MessageBoxResult.No:
                    break;
            }
        }        
    }
}


Mungkin sobat coding semua bisa mencoba membuat aplikasi dengan menggunakan bahasa pemrograman C#. Sekian dulu dari postingan saya kali ini, bertemu lagi di postingan saya selantutnya, sampai jumpa,,,

Salam Coding ^_^

Monday, September 2, 2013

Aplikasi Olympiade Astronomi

Malem guys,,,
Gimana kabarnya?? pasti baik kan sobat coding semua,,
oke disini saya akan menjelaskan tentang Aplikasi Olympiade Astronomi dan bagaimana ide ini bisa berkembang,,,
Sebenarnya Aplikasi ini idenya berasal dari Bapak Dr. Chatief Kunjaya selaku dosen dari prodi Astronomi Institut Teknologi Bandung, yang juga Presiden dari Olimpiade Astronomi Internasional. Ide ini berawal dari Olimpiade Astronomi Internasional, yang memakan banyak kertas karena perlombaan tersebut yang mengakibatkan banyak kertas terbuang, bukan masalah itu saja sobat coding, timbul juga masalah lain yaitu tentang penilaian lomba yang susah dan tidak efektif. Dari beberapa kasus diatas maka timbul ide untuk membuat aplikasi tentang lomba Olympiade Astronomi. Sebenarnya sebelum kelompok saya yang mengerjakan aplikasi ini, lebih dulu ada mahasiswa yang sudah mencoba membuat aplikasi Olympiade Astronomi tapi berbasis PHP, tapi Aplikasi ini masih menggunakan sistem Oympiade Nasional, maka dari itu Bapak Dr. Chatief Kunjaya ingin membuat sistem yang bertaraf Internasional. Dengan Bantuan Bapak Rifky selaku pembimbing kami maka Bapak Rifky membuat keputusan untuk menerima poject dari Bapak Dr. Chatief Kunjaya tersebut untuk mengerjakan Aplikasi Olympiade Astronomi, dan dengan demikian maka terciptalah sebuah aplikasi untuk perlombaan Olympiade astronomi yang kami berinama IOAA Aplication. Setelah terjadi pembicaraan antara kelompok kami, Pak Rifky dan Bapak Dr. Ary Setijadi selaku pembimbing utama kami, maka kami memutuskan untuk membuat aplikasi dengan menggunakan bahasa pemrograman C# WPF yang aplikasi ini untuk pemrograman berbasis Windows. Pada Aplikasi ini dibagi menjadi 4 Bagian:
1. Admin
2. Jury
3. Teamleader
4. Participant

Untuk tampilan aplikasi bisa dilihat di bawah ini, tapi harus Login terlebih dahulu sebagai apa user tersebut,,


Oke sekian dulu sobat coding tentang pengenalan Aplikasi Olympiade Astronomi, kita bertemu lagi di postingan-postingan saya selanjutnya,,,

Salam Coding ^_^

Penyempurnaan copy paste pada ink pen ke lembar jawaban

Assalamualaikum..

Malam ini masih di sibukkan dan masih di galaukan sama fungsi copy paste yang dari touch nya ke lembar jawaban peserta. dimana pada fungsi copy paste ini sangat penting , karna dimana peserta dapat menulis sendiri (oret-oret) rumusnya pada touch screen kemudian bisa langsung mencopykan ke lembar jawaban masing-masing. tapi sampe saat ini belum dapat berfungsi dengan baik . butuh kesabaran dan ketelitian dalam menyelesaikan ini . kalau misalkan kita copy gambar/grafik yg di buat dari microsoft word atau microsoft exel itu sudah dapat berfungsi . Dan juga apabila hasil dari touchnya kita copy kan ke paint, itu sudah dapat berfungsi .. tapi tinggal ini nih yang belum bisa berjalan, sabar pasti bisa.

Gambar proses pengcopyan.


Kemudian sekarang kita copykan ke lembar jawaban pesertanya , sebenarnya fungsi paste nya sudah aktif , tinggal menampilkan hasil copyannya yg belum dapat di tampilkan , kalau tidak bisa di copy maka fungsi paste nya tidak akan aktif.


Sekian...


Instalasi TemplateT Modern UI Pada WPF

Template Modern UI ini untuk memodifikasi tampilan WPF agar terlihat lebih menarik dibandingkan tampilan WPF default.

Hal yang harus dipersiapkan sebelum menginstal Template Modern UI pastikan tools Microsoft Visual Studio (Disini saya menggunakan Visual Studio 2012) telah terinstal di laptop atau komputer tercinta anda.

Berikut adalah langkah-langkah untuk menginstall Template Modern UI:
  1. Download file Template Modern UI disini. Walaupun template ini bersifat Open Source namun untuk mendapatkannya anda tetap harus mengeluarkan biaya untuk internet atau kalau mau gratis numpang dimana gitu... :D
  2. Eksekusi file yang telah di download tersebut sehingga proses penginisialisasi berjalan.
  3. Setelah proses penginisialisasi selesai, centang produk yang akan dipasangkan template (Microsoft Visual Studio Ultimate 2012) dan pilih instal.
  4. Proses instalasi selesai ditandai dengan munculnya pemberitahuan berikut.
Selanjutnya adalah membuat projek WPF menggunakan template Modern UI. Berikut adalah langkah langkah - langkahnya :
  1. Buka tools Visual Studio 2012.
  2. Pilih File > New > Project.
  3. Akan muncul jendela New Project. Pada bagian Templates pilih Visual C# > Windows > Modern UI WPF Application > Ok. Untuk lebih jelasnya dapat dilihat pada gambar berikut.
Untuk melihat tampilan WPF yang telah menggunakan template Modern UI jalankan projek dengan mengklik tombol berikut :
Atau dapat juga dengan melakukan klik kanan pada project kemudian pilih Debug > Start new instance.

Berikut adalah tampilan WPF dengan template Modern UI: