Download SAP Data Dengan RFC & C# WCF Web Service dan SQL Server Part1

Pada postingan kali saya akan berbagi cara mendownload data dari SAP ke database SQL Server dengan fitur RFC yang ada pada SAP melalui WCF web service C# dengan tools visual studio 2015.

di beberapa perusahaan terkadang membutuhkan data yang ada di system SAP untuk digunakan di aplikasi-aplikasi yang dikembangkan diluar SAP dengan database yang berbeda dari SAP dan salah satu fitur yang bisa digunakan untuk menurunkan data dari SAP ke system diluar SAP adalah RFC (Remote Function Call). 

ok kita langsung saja pada pokok pembahasan, untuk contoh saya akan mendownload data dari table (MARA-MATNR, MAKT-MAKTX, MARA-MEINS, MARA-MATKL, MARA-MTART). ada beberapa step yang akan kita lakukan yaitu :

1. SAP

    - Membuat structure untuk sesuai dengan field2 yang akan kita download

    - Membuat function untuk mengambil data.

2. SQL Server

    - Membuat Database

    - Membuat Table

    - Membuat Table Type

    - Membuat Stored Procedure

3. Visual Studio-> Create New Project WCF WebService.

Pada postingan kali ini saya akan membahas point no 1 dan 2 yaitu SAP dan SQL Server.

SAP

-> Membuat Structure

    untuk membuat structure kita jalankan tcode SE11

-> Membuat Function

    masuk ke tcode SE37 dan buat function baru

Sampai pada tahap ini untuk persiapan di SAP sudah selesai, selanjutnya kita akan menyiapkan database di SQL Server sebagai tujuan untuk menyimpan data yang akan kita download dari SAP.

SQL Server

-> Membuat Database

    Nama database yang akan kita buat EXAM atau bisa diganti sesuai keinginan

-> Membuat Table

    kita akan membuat table dengan nama ZMARA dan structurenya seperti berikut :

note : panjang data minimal harus sama dengan yang di SAP

-> Membuat Table Type

    Table type structurenya harus sama dengan table yang sudah dibuat

    CREATE TYPE [dbo].[zmaraType] AS TABLE(

[matnr] [varchar](50) NOT NULL,

[maktx] [varchar](50) NULL,

[meins] [varchar](3) NULL,

[matkl] [varchar](9) NULL,

[mtart] [varchar](4) NULL

      )

-> Membuat Stored Procedure

CREATE PROCEDURE [dbo].[SP_Update_ZMARA]

-- Add the parameters for the stored procedure here

@tblZmara zmaraType readonly

AS

BEGIN

-- SET NOCOUNT ON added to prevent extra result sets from

-- interfering with SELECT statements.

SET NOCOUNT ON;

MERGE INTO zmara T1

      USING @tblZmara T2

      ON T1.[matnr] = T2.[matnr]

      WHEN MATCHED THEN

  UPDATE SET 

T1.[MAKTX] = T2.[MAKTX],

T1.[MEINS] = T2.[MEINS],

T1.[MATKL] = T2.[MATKL],

T1.[MTART] = T2.[MTART]

  WHEN NOT MATCHED THEN

INSERT values(

T2.[MATNR], T2.[MAKTX], T2.[MEINS], T2.[MATKL], T2.[MTART]);

END

ok sampai disini persiapan dari sisi SAP dan SQL Server sudah selesai, untuk selanjutnya kita akan membuat Web Service di Visual Studio dan akan dibahas pada postingan Selanjutnya.

Terimakasih :D

Mengenal Komponen SAPUI5/UI5 - Belajar SAPUI5/UI5 Part 4

Hallo...

Seperti yang sudah saya sampai pada postingan Sebelumnnya, pada postingan kali ini saya akan berbagi cara menggunakan komponen table pada sapui5. saya akan membuat contoh penggunaan table pada sapui5 dengan library sap.m.Table dan sap.ui.table.Table. 

Pertama kita buka project pada postingan Sebelumnya, jika sudah kita buat view baru dengan nama ui5_table atau apa terserah teman2 :D dan tambahkan html baru untuk menampilkan view ui5_table.view dengan ui5_table.html, setelah membuat view dan file html kita tambah satu folder baru didalam WebContent dengan nama json, didalam folder json tersebut kita tambah file baru bernama data.json, caranya klik kanan pada folder json dan masukkan nama file data.json lalu copy-kan json berikut :

{

"ProductCollection": [

{

"ProductId": "1239102",

"Name": "Power Projector 4713",

"Category": "Projector",

"SupplierName": "Titanium",

"WeightMeasure": 1467,

"WeightUnit": "kg",

"Price": 856.49,

"CurrencyCode": "EUR",

"Status": "Available",

"Quantity": 3,

"UoM": "PC"

},

{

"ProductId": "2212-121-828",

"Name": "Gladiator MX",

"Category": "Graphics Card",

"SupplierName": "Technocom",

"WeightMeasure": 321,

"WeightUnit": "pc",

"Price": 81.7,

"CurrencyCode": "USD",

"Status": "Discontinued",

"Quantity": 10,

"UoM": "PC"

},

{

"ProductId": "K47322.1",

"Name": "Hurricane GX",

"Category": "Graphics Card",

"SupplierName": "Red Point Stores",

"WeightMeasure": 588,

"WeightUnit": "pc",

"Price": 219,

"CurrencyCode": "EUR",

"Status": "Out of Stock",

"Quantity": 25,

"UoM": "PC"

},

{

"ProductId": "22134T",

"Name": "Webcam",

"Category": "Accessory",

"SupplierName": "Technocom",

"WeightMeasure": 700,

"WeightUnit": "g",

"Price": 59,

"CurrencyCode": "EUR",

"Status": "Available",

"Quantity": 22,

"UoM": "PC"

}

]

}

setelah itu save dan buka file ui5_table.view lalu tambah source code berikut :

1. Deklarasai sap.m.Table

var oTable = new sap.m.Table("idTable", {

headerToolbar : new sap.m.Toolbar({

content : new sap.m.Label({

text : "Products"

})

}),

columns : [

new sap.m.Column({

header : new sap.m.Label({

    text : "Product"

})

}),

    new sap.m.Column({

    header : new sap.m.Label({

    text : "Supplier"

    })

    }),

    new sap.m.Column({

    header : new sap.m.Label({

    text : "Status"

    })

    }),

    new sap.m.Column({

    header : new sap.m.Label({

    text : "Weight"

    })

    }),

    new sap.m.Column({

    header : new sap.m.Label({

    text : "Price"

    })

    })

]

})

//binding json data to table

oTable.bindItems("/ProductCollection", new sap.m.ColumnListItem({

        cells : [ 

        new sap.m.ObjectIdentifier({

        title : "{Name}",

        text : "{Category}"

        }),

        new sap.m.Text({

            text : "{SupplierName}"

        }),

        new sap.m.Text({

            text : "{Status}"

        }),

        new sap.m.ObjectNumber({

        number : "{WeightMeasure}",

unit : "{WeightUnit}"

        }),

        new sap.m.ObjectNumber({

        number : "{Price}",

unit : "{CurrencyCode}"

        })

        ]

    }))

2. Deklarasi sap.ui.Table

var oTableUI = new sap.ui.table.Table("uiTable",{

selectionMode : sap.ui.table.SelectionMode.Single,

navigationMode: sap.ui.table.NavigationMode.Scrollbar,

alternateRowColors:true,

enableColumnReordering:true,

enableCellFilter:true,

visibleRowCount:5

})

//add uitable columns

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Product"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "Name") 

  }));

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Supplier"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "SupplierName")

  }));

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Status"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "Status")

  })); 

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Weight"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "WeightMeasure")

  }));

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Unit"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "WeightUnit")

  })); 

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Price"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "Price")

  })); 

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Currency"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "CurrencyCode")

  })); 

oTableUI.bindRows("/ProductCollection");

terakhir pada bagian berikut :

     return new sap.m.Page({

title: "UI5 Table",

content: [oTableUI,oTable

]

});

setelah itu kita buka file ui5_table.controller.js, lalu kita aktifkan function bawaan sapui5 yang bagian onInit dan masukkan source code berikut :

var oModel = new sap.ui.model.json.JSONModel();

oModel.loadData("json/data.json");

sap.ui.getCore().setModel(oModel);

source didalam onInit ini berfungsi untuk mengambil data json didalam folder json/data.json lalu ditampung didalam sebuah model yang bernama oModel

setelah itu kita coba jalankan dan lihat hasilnya, jika berhasil maka akan tampil seperti berikut :

sekian sharing kali ini semoga bermanfaat, Terimakasih :D.

Mengenal Komponen SAPUI5/UI5 - Belajar SAPUI5/UI5 Part 3

Halo...

Pada postingan kali ini saya akan melanjutkan postingan sayang sebelumnya mengenal komponen sapui5 part2, saya akan melanjutkan pembahasan tentang komponen sapui5 dan yang akan saya bahas pada postingan kali ini adalah Button, pada umumnya setiap aplikasi yang kita buat pasti akan membutuh yang namanya si Button ini heee :D

Ok, langsung saja kita buka project sebelumnya yang sudah kita buat pada postingan saya membuat project baru sapui5, setelah membuka projectnya kita tambahkan view baru dengan nama ui5_button, untuk menambah view baru caranya kita klik menu file atau klik kanan di folder belajar_ui5->new->Other

lalu pilih SAPUI5 Application Development->View

 Masukkan nama view "ui5_button" dan klik finish

Setelah membuat view akan langsung terbentuk dua file yaitu ui5_button.view.js dan ui5_button.controller.js untuk file html tidak ter-create otomatis seperti pada pertama kali kita membuat project, file html untuk menampilkan view ui5_button.view akan kita tambahkan secara manual, untuk memudahkan kita copy saja file index.html dengan nama ui5_button.html

untuk menambah html caranya klik kanan pada WebContent->html, berikut struktur project kita setelah menambah file html :

dan ganti file ui5_button.html menjadi seperti berikut :

Ok selanjutnya kita buka file ui5_button.view dan kita tambahkan komponen button, untuk button disini saya akan menggunakan sap.m.Button dan sap.ui.commons.Button :

untuk masing-masing button saya hanya menggunakan 2 properti saja yaitu text dan icon, untuk icon apa saja yang bisa kita gunakan bisa lihat DISNI tinggal kita copy nama iconnya terus dimasukkan di properti icon. pada bagian sap.m.Page saya menampilkan uiButton pada properti subHeader dan mButton pada content dan saya menambahkan properti footer. untuk melihat lebih details properti apa saja yang ada pada sap.m.Page bisa dilihat di https://sapui5.hana.ondemand.com/docs/api//symbols/sap.m.Page.html#constructor

ok sekarang kita coba jalankan dan kita lihat hasilnya :

kita sudah berhasil membuat button, dan sekarang kita akan menambahk event klik pada masing-masing button, untuk menambahkan event klik pada button kita harus menambahkan event press pada masing-masing button dan membuat function yang akan dijalankan pada event klik tersebut, untuk function kita taruh di dalam controller, ok kita buka file ui5_button.controller dan kita buat function dengan onKlik

secara default pada controller sudah tersedia 4 function, yaitu :

1. onInit : akan dijalankan ketika pertama kali halaman di load

2. onBeforeRendering : akan berjalan sebelum proses rendering halaman website

3. onAfterRendering    : akan berjalan setelah proses rendering halaman website

4. onExit : akan berjalan ketika kita keluar dari halaman

ok, kita coba refresh dan lihat hasilnya apakah event klik pada button sudah berjalan lancara, jika muncul alert Hallo berarti kita berhasil menambahkan even klik pada button

Ok cukup sekian sharing kali ini, untuk berikutnya saya akan sharing tentang table pada sapui5, ok sampai jumpa pada postingan selanjutnya, Terimakasih.... :D

Mengenal Komponen SAPUI5/UI5 - Belajar SAPUI5/UI5 Part 2

Halo...

melanjutkan postingan saya sebelumnya Membuat Project Baru SAPUI5, pada postingan kali ini saya akan membahas komponen-komponen yang ada dan bisa kita gunakan dalam sapui5, pada umumnya dalam web programming komponen2 yang digunakan seperti table, textfield/textbox, label/text, combobox, button, radio button, checkbox dll, di sapui5 pun menggunakan komponen2 tersebut untuk lebih jelasnya komponen2 yang ada di sapui5 bisa dilihat disini.

Sebelum lanjut pada pembahasan saya akan menjelaskan terlebih dahulu perbedaan library yang saya bahas di postingan sebelumnya yaitu sap.m dan sap.ui.commons.

sap.m ini kita gunakan apabila kita akan membuat web yang bisa dijalankan di smartphone karena komponen2 didalamnya sudah responsive berbeda dengan sap.ui.commons yang tidak mendukung tampilan yang responsive namun tetap bisa buka melalui smartphone tapi tidak responsive, nah itu perbedaan mendasar dari library sap.m dan sap.ui.commons.

komponen2 pada sapui5 secara default sudah memiliki event, constructor, agregation dan properti2 yang bisa digunakan, misalnya untuk mengatur width, height, text dll, setiap komponen memiliki properti yang berbeda-beda, event, constructor, agregation dan properti2 untuk setiap komponen bisa dilihat disini tinggal pilih komponen yang mau dilihat.

sebelumnya kita buka project yang sudah kita buat sebelumnya

ok mari kita mulai pada pembahasan kita :

1. Text

Text ini biasanya digunakan untuk menampilkan text, untuk menggunakan komponen text

kita bisa menuliskan source code berikut didalam file index.view 

pertama kita deklarasikan variable untuk text disini variablenya cText kemudian properti text kitas isi "Hello Word"

untuk menampilkan cText harus kita panggil didalam content return new sap.m.Page, yang ditampilkan dihalaman web kita adalah new sap.m.Page beserta content2 nya. ok sekarang kita jalankan aplikasinya dan lihat hasilnya :

2. Label dan TextBox / Input

berikut cara penggunaan label dan textbox di sapui5

dan hasilnya seperti berikut :

3. Combobox

source code :

keterangan :

- oModel adalah variable untuk menampung data berupa JSON yang akan ditampilkan dicomboBox

- oItemTemplate : ini berfungsi untuk menampilkan data dari model dimana bind aggregation dari comboBox akan diisi dengan oItemTemplate ini

Sekian sharing kali ini, untuk komponen selanjutnya akan saya tulis di tulisan berikutnya,

Terimakasih :D

Membuat Project Baru SAPUI5/UI5 - Belajar SAPUI5/UI5 Part 1

Pada postingan kali ini saya akan berbagi tentang sapui5 / ui5 yaitu cara membuat project baru di sapui5, dimana untuk editor kita menggunakan eclipse versi oxygen (bisa juga pakai eclipse yang lain) tapi saya sarankan menggunakan versi oxygen.

sebelum lanjut pada pembahasan ada baiknya kita berkenalan terlebih dahulu dengan sapui5/ui5, sapui5 merupakan sebuah framework yang disediakan oleh SAP jika belum tau apa itu SAP silahkan dicari di goole :D, tapi saya akan sedikit memberikan gambaran apa itu SAP.

SAP merupakan suatu software yang dikembangkan untuk mendukung suatu organisasi dalam menjalankan kegiatan operasionalnya secara lebih efisien dan efektif. SAP merupakan software Enterprise Resources Planning (ERP), yaitu suatu tools IT dan manajemen untuk membantu perusahaan merencanakan dan melakukan berbagai aktivitas sehari-hari.  

nah itu sedikit pencerahan apa itu SAP, untuk lebih detailnya silahkan di googling ya sobat.... :D, sekarang kita lanjutkan pembahasan tentang sapui5. sapui5 merupakan framework berbasis javascript yang disediakan oleh SAP dimana untuk programmingnya bisa menggunakan javascript atau xml. sapui5 ini sudah menerapkan konsep model view controller (MVC), nah itu sedikit pencerahan apa itu sapui5 :D

ok sebelum kita mulai membuat project baru sapui5, kita harus menambahkan add on sapui5 terlebih dahulu di eclpise, caranya klik menu help->Install New Software

Setelah itu dibagian work with diisi seperti gambar berikut  :

setelah itu klik select All dan klik Next sampai proses instalasinya selesai.

Setelah proeses instalasi selesai kita buat project baru klik File->new->Project

lalu pilih SAPUI5 Application Development -> Application Project

kemudian klik next dan isi nama project, untuk Library secara default akan menggunakan sap.m tetapi kita bisa menggunakan keduanya dalam satu project dan bisa kita tambahkan manual didalam source code. note : untuk perbedaan library sap.m dan sap.ui.commons nanti akan dibahas terpisah

setelah mengisi nama project klik next dan isikan nama view dan pilih Development program -> JavaScript lalu klik finish

sampai disini kita sudah berhasil membuat project baru sapui5, berikut structure project sapui5 yang sudah kita buat 

secara default akan terbuat file index.view, index.controller dan index.html

index.view ini tempat kita membuat tampilan web kita

index.controller ini untuk menuliskan logic program kita

index.html untuk menampilkan view web kita yang dijalankan melalui web browser

untuk index.html akan terlihat seperti berikut

seperti yang saya jelaskan sebelumnya kita bisa menggunakan library sap.m dan sap.ui.commons dalam satu project, untuk menambahkan library sap.ui.commons dalam project cukup dengan menambahkan dibagian data-sap-ui-libs="sap.m" menjadi data-sap-ui-libs="sap.m, sap.ui.commons" begitu seterusnya jika ingin menambah library dalam project kita, ok untuk menjalankan project yang sudah kita buat caranya klik kanan di source code index.html -> Run As -> Web App Preview dan di eclipse akan muncul satu tab baru untuk menampilkan halaman web kita atau kita juga bisa membukanya dengan web browser dengan cara klik pada bagian yang ditandai merah

ok cukup sekian untuk sharing kali ini, untuk sharing berikutnya saya akan membahas komponen2 yang ada di sapui5 dan cara menggunakan nya.

Terimakasih semoga bermanfaat :D