Thursday, October 24, 2013

Rancangan Aplikasi Team Leader pada IOAA Part I (Flowchart)

Sebelum melangkah ke dalam pembuatan aplikasi, terlebih dahulu sebaiknya melakukan perancangan aplikasi untuk memudahkan proses pembuatan aplikasi.
Berikut adalah flowchart dari aplikasi team leader:


Flowchart Team Leader

Pada flowchart diatas dapat dijelaskan bahwa agar dapat menggunakan aplikasi ini seorang Team Leader harus melakukan login terlebih dahulu dengan memasukkan username dan password yang telah diberikan oleh admin. Ketika team leader melakukan login, aplikasi akan melakukan proses pengecekan ke dalam database untuk username dan password yang telah dimasukkan. Jika proses login gagal, team leader akan dialihkan kembali ke halaman login. Sebalinya jika login berhasil maka Team Leader dapat melanjutkan ke proses berikutnya yaitu marking. Pada proses marking, team leader memberikan nilai untuk setiap jawaban peserta. Nilai – nilai yang telah dimasukkan barulah kemudian ditampilkan kembali (Show Grade).

Sekilas Tentang Team Leader

Pada International Olympiad On Astronomy and Astrophysics (IOAA) terdapat beberapa actor yang sangat berperan, salah satunya adalah Team Leader.

Berikut adalah sekilas penjelasan tentang Team Leader:
1. Team Leader adalah pendamping peserta olimpiade dari masing – masing Negara
2. Team Leader pada umumnya adalah seorang ilmuwan atau dosen yang ahli pada bidang astronomi dan astrofisika

Tugas seorang team leader:
1. Memeriksa dan menilai jawaban peserta yang berasal dari negaranya
2. Melakukan moderasi dengan juri jika diperlukan. Moderasi biasanya terjadi apabila terdapat selisih nilai yang cukup jauh antara nilai yang diberikan oleh Juri dan Team Leader.

Flowchart terbaru participant page

Assalamualaikum,

Ini adalah flowchart yg terbaru digunakan pada form peserta, ..


Penjelasan :

•Start•Peserta 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.

Wednesday, October 23, 2013

Desain Database Aplikasi International Olympiad on Astronomy and Astrophysics (IOAA)

Untuk memenuhi kebutuhan aplikasi maka dibuat Database IOAA application. Database kami menggunakan SQL Server 2008. Untuk perancangan database ditampilkan seperti dibawah ini.





WCF pada Aplikasi International Olympiad on Astronomy and Astrophysics (IOAA)

WCF adalah produk kelanjutan dari Microsoft itu sendiri, merupakan pengembangan dari Web Service, dan yang utama adalah menjadikannya 1 package atau gabungan dari beberapa produk Microsoft. Saat menggunakan WCF, sebaiknya digunakan pada aplikasi yang mengutamakan security karena WCF ini memiliki banyak hambatan yang menyulitkan hacker untuk meretas situs ini. Pada waktu di WCF, semua request dari UI akan di-encode yang hanya bisa dibaca di web service. Ini juga memungkinkan tersimpannya atau terjaganya rahasia server dari web service. WCF tidak hanya hadir untuk menyelesaikan permasalahan dasar pada sistem distribusi, tetapi juga memperbaiki dalam proses pengembangan perangkat lunak. WCF menawarkan model programming yang memungkinkan untuk integrasi beberapa model pemrograman. Tujuan integrasi model programming tidak lain hanya untuk meningkatkan kualitas dan mengurangi lamanya proses pengembangan perangkat lunak. Untuk desain dari WCF yang digunakan pada aplikasi IOAA ini dapat dilihat seperti dibawah ini.



Gambar diatas adalah rancangan WCF untuk Aplikasi IOAA. Pada Aplikasi IOAA ini terdapat 4 privilege yaitu admin, participant, jury, teamleader yang mengakses ke 1 WCF.

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>