Friday, September 13, 2013

Konsumsi data JSON Pada ASP.NET MVC 4 & Jquery Secara Realtime

Controller
1:   //Controller membuat Json ke String untuk membuat variable/paremeter Object Json ke Html  
2:      public ActionResult DataGrade()  
3:      {  
4:        var client = new WebClient();  
5:        client.Headers.Add("User-Agent", "Nobody");  
6:        var json = client.DownloadString(new Uri("http://localhost:7794/GetUser.svc/getJson"));  
7:        ViewBag.Json = json.ToString();  
8:        return PartialView("_PartialUserGrade");  
9:      }  
PartialView
1:  <table id="table-user" style="width:95%">  
2:    <tr><th colspan="5">Participant Grade</th></tr>  
3:    <tr><td colspan="5"></td></tr>  
4:   <tr>  
5:      <th>ID</th>  
6:      <th>Name</th>  
7:      <th>College</th>  
8:      <th>Country</th>  
9:      <th>Grade</th>  
10:    </tr>  
11:  </table>  
12:  @Scripts.Render("~/bundles/jquery")  
13:  @Scripts.Render("~/bundles/json2html")  
14:  @Scripts.Render("~/bundles/custom")  
15:  <script>  
16:    getUserAll(@Html.Raw(@ViewBag.Json));  
17:  </script>  
View : index.cshtml
1:  @{  
2:    ViewBag.Title = "Welcome IOAA";  
3:  }  
4:  @section hero {  
5:    <section class="hero">  
6:      <div class="container">  
7:        <h1>  
8:          <span class="line-one">International Olympiad of Astronomy and Astrophysics</span>  
9:        </h1>  
10:        <a href="#" class="call-button">@ViewBag.Title</a>  
11:      </div>  
12:    </section>  
13:  }  
14:  <br />  
15:  <div id="data">  
16:  </div>  
17:  <script type="text/javascript">  
18:    $(document).ready(function () {  
19:      var j = jQuery.noConflict();  
20:      j(document).ready(function () {  
21:        j("#data").everyTime(10000, function (i) {  
22:          j.ajax({  
23:            url: "/Home/DataGrade/",  
24:            cache: false,  
25:            success: function (html) {  
26:              j("#data").html(html);  
27:            }  
28:          })  
29:        })  
30:      });  
31:    });  
32:  </script>  

Membuat Data dalam format JSON menggunakan WCF

Membuat Project WCF pada Visual Studio 2012



sourcecode : GetUser.svc.cd
1:  using System;  
2:  using System.Data;  
3:  using System.Collections.Generic;  
4:  using System.Linq;  
5:  using System.Runtime.Serialization;  
6:  using System.ServiceModel;  
7:  using System.ServiceModel.Activation;  
8:  using System.Text;  
9:  using System.Data.SqlClient;  
10:  using System.ServiceModel.Web;  
11:  namespace JsonWcfService  
12:  {  
13:  public class GetUser : IGetUser  
14:    {  
15:    [WebInvoke(Method = "GET",  
16:            ResponseFormat = WebMessageFormat.Json,  
17:            RequestFormat = WebMessageFormat.Json,  
18:            BodyStyle = WebMessageBodyStyle.Wrapped,  
19:            UriTemplate = "GetJson")]  
20:      public List<User> GetUserGrade()  
21:      {  
22:        List<User> mylist = new List<User>();  
23:        using (SqlConnection conn = new SqlConnection("server=(local);database=osn2013;Integrated Security=SSPI;"))  
24:        {  
25:          conn.Open();  
26:          string cmdStr = String.Format("SELECT * FROM View_UserGrade ORDER BY Grade DESC");  
27:          SqlCommand cmd = new SqlCommand(cmdStr, conn);  
28:          SqlDataReader rd = cmd.ExecuteReader();  
29:          if (rd.HasRows)  
30:          {  
31:            while (rd.Read())  
32:            {  
33:              mylist.Add(new User(  
34:                rd.GetString(0),   
35:                rd.GetString(1),   
36:                rd.GetString(2),   
37:                rd.GetString(3),   
38:                rd.GetInt32(4)  
39:                ));  
40:            }  
41:          }  
42:          conn.Close();  
43:        }  
44:        return mylist;  
45:      }  
46:    }  
47:    [DataContract]  
48:    public class User  
49:    {  
50:      [DataMember]  
51:      public string userid{ get; set; }  
52:      [DataMember]  
53:      public string name{ get; set; }  
54:      [DataMember]  
55:      public string country { get; set; }  
56:      [DataMember]  
57:      public string college { get; set; }  
58:      [DataMember]  
59:      public int grade { get; set; }  
60:      public User(string UserID, string Name, string Country, string Collage, int Grade)  
61:      {  
62:        userid = UserID;  
63:        name = Name;  
64:        country = Country;  
65:        college = Collage;  
66:        grade = Grade;  
67:      }  
68:    }  
69:  }  
1:  using System.IO;  
2:  using System.Collections.Generic;  
3:  using System.Linq;  
4:  using System.Web;  
5:  using System.Runtime.Serialization;  
6:  using System.ServiceModel;  
7:  namespace JsonWcfService  
8:  {  
9:    [ServiceContract]  
10:    public interface IGetUser  
11:    {  
12:      [OperationContract]  
13:      List<User> GetUserGrade();  
14:    }  
15:  }  
sourcecode: webconfig.config
1:  <?xml version="1.0"?>  
2:  <configuration>  
3:   <system.web>  
4:    <compilation debug="true" targetFramework="4.0" />  
5:    <authentication mode="None" />  
6:   </system.web>  
7:   <system.serviceModel>  
8:    <serviceHostingEnvironment aspNetCompatibilityEnabled="false"/>  
9:    <standardEndpoints>  
10:     <webScriptEndpoint>  
11:      <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>  
12:     </webScriptEndpoint>  
13:    </standardEndpoints>  
14:    <bindings>  
15:     <webHttpBinding>  
16:      <binding name="NewBinding0" />  
17:     </webHttpBinding>  
18:    </bindings>  
19:    <services>  
20:     <service behaviorConfiguration="EmpServiceBehaviour" name="JsonWcfService.GetUser">  
21:      <endpoint address="" behaviorConfiguration="web" binding="webHttpBinding"  
22:       bindingConfiguration="NewBinding0" contract="JsonWcfService.IGetUser" />  
23:     </service>  
24:    </services>  
25:    <behaviors>  
26:     <endpointBehaviors>  
27:      <behavior name="web">  
28:       <webHttp defaultOutgoingResponseFormat="Json" />  
29:      </behavior>  
30:     </endpointBehaviors>  
31:     <serviceBehaviors>  
32:      <behavior name="EmpServiceBehaviour">  
33:       <serviceMetadata httpGetEnabled="true" />  
34:       <serviceDebug includeExceptionDetailInFaults="false" />  
35:      </behavior>  
36:      <behavior name="">  
37:       <serviceMetadata httpGetEnabled="true" />  
38:       <serviceDebug includeExceptionDetailInFaults="false" />  
39:      </behavior>  
40:     </serviceBehaviors>  
41:    </behaviors>  
42:   </system.serviceModel>  
43:   <system.webServer>  
44:    <modules runAllManagedModulesForAllRequests="true"/>  
45:   </system.webServer>  
46:  </configuration>  



Thursday, September 12, 2013

Membuat Query View SQL 2008 untuk menampilkan data participant grade

View/Query View

View adalah tabel virtual yang isinya didefinisikan oleh query database. View bukanlah sebuah tabel fisik, tetapi sekumpulan instruksi yang menghasilkan sekumpulan data.

Keuntungan Menggunakan View

  1. Membatasi akses data
  2. Menyediakan data yang independen
  3. Menampilkan view yang berbeda-beda dengan data yang sama
  4. Memudahkan query yang kompleks

Membuat View di SQL SERVER 2008

langkah yang pertama adalah masuk kedalam database sql server 2008 dan pilih database, berikutnya pada direktori view pilih dan klik kanan seperti screen shoot dibawah ini:

setelah melakukan langkah di atas akan menampilkan popup window untuk memilih tabel, pada gambar dibawah ini saya akan memilih 2 tabel yang akan dijadikan view


pada langkah berikutnya yaitu memilih field yang terdapat dalam tabel untuk ditampilkan dan dibagian wah ketika kita memilih secara otomatis mengenerate script query


setelah menentukan field kita dapat melihat hasil nya dengan cara klik "Execute SQL"

Change Password in Participants Page.

Assalamualaikum,,,

Pada kesempatan kali ini saya akan membahas mengenai form change password pada participants page, Change Password disini yaitu, peserta dapat mengubah passwordnya sendiri tanpa melalui admin, tapi untuk mengedit password yang tadi diubah itu tidak bisa, untuk mengeditnya peserta harus melapor ke admin dulu , atau solusinya bisa langsung menggantinya lagi.

Tampilan Change Password :



Source :

 private async void Button_Click_1(object sender, RoutedEventArgs e)
        {
            bool cek = false;
            cek = await service.cekPasswordAsync(new ParticipantIOAA.ServiceReference1.Login
            {
                Username = LoginPage.ID,
                UserPassword = txtOldPassword.Password.ToString()
            });
            if (cek)
            {
                bool ganti = false;
                ganti = await service.UpdatePasswordAsync(new ParticipantIOAA.ServiceReference1.Login
                {
                    Username = LoginPage.ID,
                    UserPassword = txtNewPassword.Password.ToString()
                });
                if (ganti)
                {
                    MessageBox.Show("Password has been changed");

                    txtOldPassword.Password = "";
                    txtNewPassword.Password = "";
                }
                else
                {
                    MessageBox.Show("Password cannot change");
                    txtOldPassword.Password = "";
                    txtNewPassword.Password = "";
                }
            }
            else
            {
                MessageBox.Show("Wrong old password");
                txtOldPassword.Password = "";
                txtNewPassword.Password = "";
            }
        }
    }
}

Sekian

Form Login pada Participants Page

Assalamualaikum ,,

Pada kesempatan kali ini akan saya tampilkan bagian-bagian yang ada pada participants form, yang pertama disini yaitu form login. Halaman yang pertama akan muncul saat menjalankan aplikasinya yaitu form login, setelah itu baru ke menu home/tampilan utama. tapi untuk masuk ke menu utama, peserta harus login dulu sesuai dengan username dan password nya. untuk mendapatkan username sama passwordnya peserta harus terlebih dahulu mendaftarkan diri ke admin, baru setelah itu admin memasukkan data ke database untuk keperluan login.

Tampilan Halaman Login :



Salah Password :


Source :

 private async void Button_Click_2(object sender, RoutedEventArgs e)
        {
            ID = txtUsername.Text;
            bool hasil = false;
            hasil = await service.LoginUserAsync(new ParticipantIOAA.ServiceReference1.Login
            {
                Username = txtUsername.Text,
                UserPassword = txtPassword.Password.ToString(),
                UserPrivillage = "participant"
            });
            if (hasil)
            {
                MainWindow main = new MainWindow();
                main.Show();
                var dlg = Window.GetWindow(this);
                dlg.Close();
            }
            else
            {
                MessageBox.Show("User or Password Wrong");
            }
        }

Sekian.

Penjabaran pen touch

Assalamualaikum,,

Pada malam kali ini saya akan membahas mengenai touch pen yang ada pada form peserta , kita bahas fungsinya beserta koding / sintak nya kayak gimana . oke pada touch ini terdapat beberapa fungsi yaitu diantaranya :

  • Save Ink
  • Save Ink as a bitmap
  • Load Ink
  • Cut Ink
  • Copy Ink
  • Paste Ink
  • Delete Ink
  • Select Ink
  • Format Ink
  • Stylus Color
  • Change stylus type
  • Change pen

Pada menu save ini , berfungsi untuk mengsave hasil dari gambar yang sudah kita buat dan dengan ekstensi .bmp .

int marg = int.Parse(this.inkCanv.Margin.Left.ToString());
RenderTargetBitmap rtb = 
        new RenderTargetBitmap((int)this.inkCanv.ActualWidth - marg,
                (int)this.inkCanv.ActualHeight - marg, 0, 0, 
            PixelFormats.Default);
rtb.Render(this.inkCanv);
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
encoder.Save(file);
file.Close();


Pada menu open ini berfungsi untuk membuka gambar dari luar aplikasi , dan dalam bentuk ekstensi .jpg .bmp .

this.inkCanv.Strokes = new StrokeCollection(file);


Sesua dengan namanya yaitu NEW , fungsi ini untuk mengganti lembar dengan yang baru.

this.inkCanv.Strokes.Clear();


Pada fungsi cut ini fungsinya yaitu memotong obyek yag telah di seleksi.

if (this.inkCanv.GetSelectedStrokes().Count > 0)
    this.inkCanv.CutSelection();


Fungsi ini yaitu untuk mengcopy obyek yang telah di seleksi.

if (this.inkCanv.GetSelectedStrokes().Count > 0)
    this.inkCanv.CopySelection();


Fungsi ini adalah untuk menempelkan hasil copy an pada tempat yang kita inginkan.

if (this.inkCanv.CanPaste())
    this.inkCanv.Paste();


Fungsi ini untuk menghapus obyek

if (this.inkCanv.GetSelectedStrokes().Count > 0)
{
    foreach (Stroke strk in this.inkCanv.GetSelectedStrokes())
        this.inkCanv.Strokes.Remove(strk);
}


Fungsinya yaitu untuk menyeleksi obyek

this.inkCanv.Select(this.inkCanv.Strokes);


Fungsi ini yaitu untuk memformat semua obyek yang di seleksi.

StylusSettings dlg = new StylusSettings();
dlg.Owner = this;

// Try getting the DrawingAttributes of the first selected stroke.
StrokeCollection strokes = this.inkCanv.GetSelectedStrokes();

if (strokes.Count > 0)
    dlg.DrawingAttributes = strokes[0].DrawingAttributes;
else
    dlg.DrawingAttributes = this.inkCanv.DefaultDrawingAttributes;

if ((bool)dlg.ShowDialog().GetValueOrDefault())
{
    // Set the DrawingAttributes of all the selected strokes.
    foreach (Stroke strk in strokes)
        strk.DrawingAttributes = dlg.DrawingAttributes;
}


private void createGridOfColor()
{
    PropertyInfo[] props = typeof(Brushes).GetProperties(BindingFlags.Public |
                                          BindingFlags.Static);
    // Create individual items
    foreach (PropertyInfo p in props)
    {
        Button b = new Button();
        b.Background = (SolidColorBrush)p.GetValue(null, null);
        b.Foreground = Brushes.Transparent;
        b.BorderBrush=Brushes.Transparent;
        b.Click += new RoutedEventHandler(b_Click);
        this.ugColors.Children.Add(b);
    }
}


Fungsinya disini yaitu untuk mengembalikan kursor , menghapus , menghapus per obyek dan menyeleksi.

public DrawingAttributes DrawingAttributes
{
    set
    {
        chkPressure.IsChecked = value.IgnorePressure;
        chkHighlight.IsChecked = value.IsHighlighter;
        penWidth = value.Width;
        penHeight = value.Height;
        currColor = value.Color;
    }
    get
    {
        DrawingAttributes drawattr = new DrawingAttributes();
        drawattr.IgnorePressure = (bool)chkPressure.IsChecked;
        drawattr.Width=penWidth;
        drawattr.Height = penHeight;
        drawattr.IsHighlighter = (bool)chkHighlight.IsChecked;
        drawattr.Color = currColor;
        return drawattr;
    }
}

Sekian...

FlowChart Participants Page

Assalamualaikum,,,

Berikut adalah tampilan dari flowchart pada participants page , pada flowchart ini di buat menggunakan microsoft visio 2007.

FlowChart Participants Page :


Penjelasan :

StartPeserta melakukan login.Proses login , apakah login benar atau tidak , kalau benar makan akan masuk ke pengolahan data/menu utama. Kemudian apabila salah, maka akan kembali ke proses login.Apabila peserta masuk ke menu list constants, questions, change password, settings dan logout maka akan masuk ke data/inpormasi.Peserta melakukan logout, apabila YA maka akan keluar dari aplikasi, dan apabila tidak , maka akan kembali pada pengolahan data.End.

Sekian.

Monday, September 9, 2013

Timer untuk Program Olympiade Astronomi

Berikut ini adalah contoh bagaimana cara membuat timer yang dapat diset pada halaman admin. yang pertama untuk mengatur berapa banyak waktu yang dibutuhkan dalam pertandingan terlebih dahulu atur waktuna pada halaman set timer yang ada pada aplikasi admin IOAA. Dibawah ini merupakan tampilan XMLnya.

sciprt  utamanya adalah sebagai berikut :
          bool hasil = await MyService.InsertTimerAsync(new ServiceReference1.Timer
            {
                startTime = txtdate.Text + " " + txttime.Text,
                endTime = Convert.ToInt16(txtduration.Text)

            });
            if (hasil)
            {
                MessageBox.Show("Timer was Set");               
            }
            else
            {
                MessageBox.Show("Cannot Set");
            }
dimana script diatas memanggil servise InsertTimerAsync yang merupakan service dari WCF yg berisi sript seperti dibawah ini:
public bool InsertTimer(Timer TimerInsert)
        {
            string strMessage = string.Empty;
            con.Open();
            SqlCommand cmd = new SqlCommand("update tbl_timer set start_time=@start_time,end_time=DATEADD(MINUTE,@end_time,@start_time)", con);
            cmd.Parameters.AddWithValue("@start_time", TimerInsert.startTime);
            cmd.Parameters.AddWithValue("@end_time", TimerInsert.endTime);
            try
            {
                int result = cmd.ExecuteNonQuery();

                con.Close();
                if (result == 1)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
            catch (Exception e)
            {
                return false;
            }           
        }
Setelah settingan untuk timer sudah dibuat maka cara membuat timer dan mencocokkan hasil settingan timer adalah sebagai berikut :
public void timer_Tick(object sender, object e)
        {
            new Action(async () =>
            {
                bool cek = await service.checkTimerAsync();

                if (cek)
                {
                    txtWarning.Content = "";
                    gridSoal.Visibility = Visibility.Visible;
                    var c = await service.GetTimeAsync();
                    foreach (var cou in c)
                    {
                        sec = cou.Timer;
                    }
                    jam = sec / 3600;
                    int b = jam * 3600;
                    menit = (sec - b) / 60;
                    detik = (sec - b) % 60;



                    // Else continue counting.
                    if (detik < 1)
                    {
                        detik = 59;
                        if (menit == 0)
                        {
                            menit = 59;
                            if (jam != 0)
                                jam -= 1;

                        }
                        else
                        {
                            menit -= 1;
                        }
                    }
                    else
                        detik -= 1;
                    // Display the current values of hours, minutes and seconds in
                    // the corresponding fields.
                    t0.Text = "Time :";
                    t1.Text = ":";
                    t2.Text = ":";
                    txtJam.Text = jam.ToString();
                    txtMenit.Text = menit.ToString();
                    txtDetik.Text = detik.ToString();
                    if ((jam == 0) && (menit == 0) && (detik == 0))
                    {
                        // If the time is over, clear all settings and fields.
                        // Also, show the message, notifying that the time is over.

                        // this.Frame.Navigate(typeof(HalamanPeserta), rootPage);
                        t0.Text = "";
                        t1.Text = "";
                        t2.Text = "";
                        txtJam.Text = "";
                        txtMenit.Text = "";
                        txtDetik.Text = "";
                        gridSoal.Visibility = Visibility.Collapsed;
                        txtWarning.Content = "End Competition";
                        timer.Stop();
                    }
                }
                else
                {
                    // MessageBox.Show("Not the competition time");
                    gridSoal.Visibility = Visibility.Collapsed;
                    t0.Text = "";
                    t1.Text = "";
                    t2.Text = "";
                    txtJam.Text = "";
                    txtMenit.Text = "";
                    txtDetik.Text = "";
                    txtWarning.Content = "Not the competition time";

                }
            }).Invoke();


        }