Code Map Feature in Visual Studio 2012

Visual Studio , Posted at : Sep/24/2013  
1866 Views   2 Comments

Fitur Code Map merupakan salah satu tools baru yang disediakan di Visual Studio 2012 untuk memvisualisasikan struktur kode program yang dibuat dalam sebuah aplikasi. Semakin kompleks aplikasi yang dibuat maka akan semakin menyulitkan programmer untuk melihat secara global ataupun detail struktur program. Misalnya kita ingin melihat sebuah prosedur di referensi dari prosedur mana saja, container tipe data dari sebuah prosedur, dsb. Dengan code map semua dapat dilakukan dengan mudah dan dapat membantu programmer atau software architect untuk melihat secara visual referensi kode yang dibutuhkan. Selain itu fitur ini juga dapat memberikan informasi secara visual alur kode program pada saat debugging.

Mari kita lihat contohnya dengan membuat sebuah Console Application yang saya buat dengan menggunakan Visual Studio 2012 Ultimate.

1. Tambahkan sebuah class kedalam project dan berikan nama CustomerModel.vb. Ketikkan kode berikut ini:

Public Class CustomerModel
    Public Property ID As String
    Public Property Name As String
    Public Property City As String
End Class

2. Tambahkan sebuah Interface dan berikan nama IProcessing.vb :

Public Interface IProcessing(Of T)
    Function Add(ByVal NewObject As T) As Integer
    Function Update(ByVal UpdatedObject As T) As Integer
    Function Delete(ByVal DeletedObject As T) As Integer
End Interface

3. Tambahkan sebuah class dan berikan nama DAL.vb :

Imports System.Data.SqlClient
 
Public Class DAL
 
    Public Shared Function ExecSQL(ByVal ConnString As String, ByVal Query As String,
                                   ByVal CmdType As CommandType) As Integer
        Dim Conn As New SqlClient.SqlConnection(ConnString)
        Using Cmd As New SqlClient.SqlCommand
            Dim intRetVal As Integer = 0
            With Cmd
                .CommandType = CmdType
                .Connection = Conn
                .CommandText = Query
                Try
                    Conn.Open()
                    intRetVal = .ExecuteNonQuery
                Catch ex As SqlClient.SqlException
                    Throw New Exception(ex.Message, ex)
                Finally
                    Conn.Dispose()
                End Try
            End With
            Return intRetVal
        End Using
    End Function
 
End Class

4. Tambahkan sebuah class dan berikan nama :

Public Class CustomerBL
    Implements IProcessing(Of CustomerModel)
 
    Public Function AddCustomer(NewObject As CustomerModel) _
        As Integer Implements IProcessing(Of CustomerModel).Add
 
        Dim strSQL = String.Format(
            "Insert Into Customers(CustomerID,CompanyName,City) Values" &
            "('{0}','{1}','{2}')", NewObject.ID, NewObject.Name, NewObject.City)
 
        Return DAL.ExecSQL("Database=Northwind;Server=.;Integrated Security=True",
                           strSQL, CommandType.Text)
 
    End Function
 
    Public Function DeleteCustomer(DeletedObject As CustomerModel) _
        As Integer Implements IProcessing(Of CustomerModel).Delete
 
        Dim strSQL = String.Format(
            "Delete From Customers Where CustomerID = '{0}'", DeletedObject.ID)
 
 
        Return DAL.ExecSQL("Database=Northwind;Server=.;Integrated Security=True",
                   strSQL, CommandType.Text)
    End Function
 
    Public Function UpdateCustomer(UpdatedObject As CustomerModel) _
              As Integer Implements IProcessing(Of CustomerModel).Update
 
        Dim strSQL = String.Format(
            "Update Customers Set CompanyName='{0}',City='{1}' Where CustomerID='{2}'",
            UpdatedObject.Name, UpdatedObject.City, UpdatedObject.ID)
 
        Return DAL.ExecSQL("Database=Northwind;Server=.;Integrated Security=True",
           strSQL, CommandType.Text)
 
    End Function
End Class

Nama-nama fungsi diatas (sebagai hasil implementasi dari interface) sengaja saya ubah namanya untuk membantu memperjelas visualisasi code map. Tentunya fokus dari pembahasan artikel ini bukan pada detail implementasi kode program yang ditulis di atas, dan kode tersebut langsung saya ketik tanpa dijalankan terlebih dahulu apakah ada error atau tidak :) …ya, tentunya bukan disitu fokus pembahasannya :)

5. Ketikkan kode berikut ini di Module1.vb :

Module Module1
 
    Sub Main()
        Dim custBL = New CustomerBL
        Dim intRetVal = 0
 
        'Add New Customer
        Dim newCust = New CustomerModel With {
            .ID = "NTV1",
            .Name = "Native Enterprise",
            .City = "Bandung"}
        intRetVal = custBL.AddCustomer(newCust)
        Console.WriteLine("Return value (Add): " & intRetVal.ToString)
 
        'Update Customer
        newCust.Name = "Native Enterprise-IT Training Provider"
        intRetVal = custBL.UpdateCustomer(newCust)
        Console.WriteLine("Return value (Update): " & intRetVal.ToString)
 
        'Delete Customer
        intRetVal = custBL.DeleteCustomer(newCust)
        Console.WriteLine("Return value (Delete): " & intRetVal.ToString)
 
        'Add other new Customer
        OtherMethodToAddCustomer()
    End Sub
 
    Sub OtherMethodToAddCustomer()
        Dim custBL = New CustomerBL
 
        Dim newCust = New CustomerModel With {
            .ID = "NTV1",
            .Name = "Native Enterprise",
            .City = "Bandung"}
        Dim intRetVal = custBL.AddCustomer(newCust)
        Console.WriteLine("Return value (Add): " & intRetVal.ToString)
    End Sub
 
End Module

6. Buka file IProcessing.vb. Klik kanan fungsi Add dan pilih menu “Show on Code Map”. Visual Studio akan membuatkan sebuah file yang berekstensikan .dgml :

7. Klik kanan Diagram Add dan pilih menu “Show Containing Type”. Dengan memilih menu tersebut maka kita dapat melihat container tipe data untuk prosedur Add tersebut :

8. Klik kanan diagram Add dan pilih menu “Find All References” untuk melihat semua implementasi dari prosedur Add yang terdapat di dalam interface tsb :

Dari gambar di atas dapat dilihat bahwa terdapat sebuah class yang merefer ke prosedur Add (Interface) yaitu AddCustomer yang terdapat di dalam class CustomerBL.

9. Klik kanan diagram AddCustomer dan pilih menu “Find All References” :


 

Dapat kita lihat di gambar bahwa prosedur AddCustomer dipanggil dari dua prosedur lain yaitu Main dan OtherMethodToAddCustomer. Diagram tersebut juga menunjukkan prosedur OtherMethodToAddCustomer dipanggil dari prosedur Main.

10. Klik kanan prosedur AddCustomer dan pilih menu “Show Methods This Calls” untuk melihat prosedur-prosedur yang dipanggil oleh AddCustomer :

Terdapat beberapa prosedur yang dipanggil oleh AddCustomer salah satunya yaitu External. External ini merefer ke class System.String yang terdapat di dalam .net fx library, prosedur yang dipanggil yaitu Format (String.Format).

11. Klik kanan diagram ExecSQL dan get_ID kemudian pilih menu “Show Containing Type” :

Prosedur ExecSQL terdapat didalam class DAL (perhatikan icon class), sedangkan prosedur get_ID terdapat di dalam properti ID (perhatikan icon Property) dimana properti ID ini terdapat di dalam class CustomerModel :

12. Untuk melihat semua member yang terdapat di dalam interface kita dapat melakukan colapse atau hide diagramnya (klik menu sudut kiri atas diagram) :

13. Komentar dapat ditambahkan ke setiap blok diagram untuk memberikan informasi tambahan :

Sekarang mari kita lakukan debugging kode programmnya.

14. Tempatkan breakpoint pada prosedur AddCustomer yang terdapat di dalam class CustomerBL dan debug aplikasinya. Perhatikan perubahan warna yang terdapat di dalam diagram code map untuk prosedur Main dan AddCustomer :

15. Lakukan Step Into  Debugging. Perhatikan icon panah kuning pada saat prosedur ExecSQL di eksekusi :

Code map diagram akan sinkron dengan proses debugging yang sedang dilakukan untuk memperlihatkan secara visual letak atau posisi debuggingnya.

Dari penjelasan fitur tersebut diatas tentunya hal ini akan membantu programmer atau software architect untuk menganalisa struktur kode program dari aplikasi yang dibuat. Semoga bermanfaat :)


[Comments]
Yudy Patrianto  Sep/25/2013 09:22:05 :

 Terima kasih pak...

Rully  Sep/27/2013 08:19:37 :

Yudi > Sama-sama mas yudi :)


[Write your comment]
Name (required)
Email (required-will not published)
 
Comment

cxdw
Input code above below (Case Sensitive) :
About Me 
Rully Yulian MF
Rully Yulian Muhammad Firmansyah | Microsoft Certified Trainer | IT Trainer at Native Enterprise | IT Consultant | Software Developer | MCAD | MCPD | MOS | Bandung, West Java, Indonesia.
[Read More...]
Top Download 
Mapping Hak Akses User Pada MenuStrip Sampai Control Button : Downloaded 6083 times  
Bagaimana caranya menginstal database ketika deploying sebuah aplikasi? : Downloaded 4689 times  
Simple Voice Engine Application With Sound Player Class... : Downloaded 3554 times  
Change Group,Sort Order, Filtering By Date in Crystal Reports : Downloaded 3324 times  
WinForms DataGrid Paging With SqlDataAdapter : Downloaded 2706 times  
Links 
Certifications 
MOS 2007
MCT
MCPD
MCTS
MCAD.NET
ASP.NET Brainbench
Native Enterprise 
Follow Me 
Facebook   LinkedIn   Twitter
Syndication 
Hosted By 
Native Enterprise News 
© Copyright 2006-2016   Rully Yulian MF   All rights reserved.