Pengenalan Umbraco API dengan Visual Studio 2010

ID Artikel: 2599136 - Melihat produk di mana artikel ini berlaku.
Perbesar semua | Perkecil semua

Tentang Penulis

Perkecil tabel iniPerbesar tabel ini
Perkecil gambar iniPerbesar gambar ini
MVP RidiF
Artikel ini dibuat oleh MVP Ridi Ferdiana.Microsoft berterimakasih kepada para MVP yang secara proaktif telah membagi pengetahuan mereka dengan para pengguna lainnya.

Pengantar

Application Programming Interface (API) dan component based model menjadi suatu tradisi dan tren pengembangan solusi saat ini. Keduanya memungkinkan suatu solusi pengembangan yang lebih rapid, terstruktur, dan tentu mudah dalam pengembangannya.

Artikel ini akan mengekplorasi pustaka API salah satu CMS yang berada di paket Web PI yaitu Umbraco. Pada artikel ini akan dikembangkan suatu aplikasi contoh yang bertujuan mendemokan kemampuan visual studio 2010 dalam memudahkan kita melakukan eksplorasi pustaka API Umbraco.

Artikel ini adalah lanjutan dari artikel sebelumnya mengenai bagaimana memulai pemograman Umbraco dengan Visual Studio 2010 .

Resolusi

Artikel ini akan melakukan tiga hal yakni

1. Memahami pustaka API Umbraco melalui Visual Studio Object Browser

2. Membuat Web Services yang menggunakan pustaka API Umbraco

3. Mengintegrasikan Web Services yang dikembangkan ke Umbraco

Pustaka API Umbraco
Selayaknya aplikasi web yang dikembangkan dengan ASP.NET. Berbagai pustaka pemograman (API) yang dienkapsulasi dalam access modifier public dan protected dapat diakses dan digunakan kembali untuk kebutuhan pengembangan lebih lanjut (reusable). Umbraco adalah salah satu CMS yang dikembangkan dengan teknologi Web Forms dan memiliki berbagai assembly yang dapat digunakan untuk pengembangan lebih lanjut.

Langkah-langkah berikut akan menuntun Anda dalam mengeksplorasi pustaka Umbraco API.

Langkah 1. Membuka Web Site Umbraco

Pada langkah ini Anda dapat menggunakan Visual Studio 2010 untuk membuka web site Umbraco yang terpasang pada local file system atau IIS. Hal ini dapat dilakukan dengan melakukan File -> Open -> Web Site
Perkecil gambar iniPerbesar gambar ini
Gambar 1. Open Web Site di VS 2010

Gambar 1. Open Web Site di VS 2010

Pada setiap Anda membuka proyek atau web site Umbraco, pada umumnya akan tampil sebagai berikut. Pada saat dialog ini muncul abaikan dengan memilih opsi No.

Perkecil gambar iniPerbesar gambar ini
Gambar 2. Dialog Notifikasi pada saat membuka Umbraco Project

Gambar 2. Dialog Notifikasi pada saat membuka Umbraco Project

Sesaat setelah Anda menjawab No, selayaknya web Umbraco akan dibuka.

Langkah 2. Mengidentifikasi Assembly Umbraco

Pada bagian ini, Anda dapat melihat API Umbraco dengan membuka folder Bin, pada solusi proyek.
Perkecil gambar iniPerbesar gambar ini
Gambar 3. Solusi Proyek Umbraco

Gambar 3. Solusi Proyek Umbraco


API Umbraco menggunakan standar namespace yang diawali dengan Umbraco dan CMS sebagai contoh.

1. CMS

2. Umbraco.datalayer

3. Umbraco

4. Umbraco.Linq

5. Dsb.

Langkah 3. Ekplorasi melalui Object Browser

Cara mudah mengekplorasinya adalah dengan menggunakan menu Object Browser yang merupakan bagian dari sub menu View

Perkecil gambar iniPerbesar gambar ini
Gambar 4. Object Browser

Gambar 4. Object Browser

Lakukan scroll down untuk melihat pustaka yang dimiliki oleh Umbraco. Gambar 5 memberikan contoh eksplorasi pustaka Umbraco.BusinessLogic yang terletak di berkas cms.dll
Perkecil gambar iniPerbesar gambar ini
Gambar 5. cms.dll pada Object Browser

Gambar 5. cms.dll pada Object Browser

Pada saat eksplotari tantangannya adalah kompleksitas. Percaya atau tidak API Umbraco memiliki setidaknya ratusan method dan class yang bisa Anda gunakan. Tabel 1 memberikan suatu referensi singkat berbagai API yang umum digunakan pada Umbraco API

Tabel 1. Beberapa contoh Referensi API Umbraco
Perkecil tabel iniPerbesar tabel ini
SkenarioNamespaceClass
Memanipulasi dokumenumbraco.BusinessLogic

umbraco.cms.businesslogic.web
Document, User, DocumentType
Memanipulasi frontend member umbraco.cms.businesslogic.memberMemberType, Member, MemberGroup
Mengelola backend userumbraco.BusinessLogic;UserType, User
Tabel 1 mengemukakan fakta menarik tentang Umbraco API yang mungkin dapat dipahami sebagai suatu design pattern dari Umbraco CMS. Beberapa asumsi yang dapat diperoleh berdasar pada Tabel 1 adalah.

1. API Umbraco yang diekspos dan digunakan kembali pada umumnya berasal dari layer BusinessLogic

2. Model pemograman yang teratur yang mengikuti pola (Abstract Type à Class à Yang Lainnya). Sebagi contoh untuk memanipulasi object Member maka kita harus menggunakan MemberType, class Member, kemudian baru yang lain

3. Umbraco.dll dan cms.dll adalah dua pustaka API yang mutlak dibutuhkan pada saat kita mengembangkan Umbraco. Hal ini dikarenakan Umbraco menggunakan dua dll tersebut untuk memanipulasi objeknya

Asumsi di atas akan dipraktikkan dengan membuat aplikasi web services yang akan memanipulasi objek pada Umbraco.

Membuat Web Services di Umbraco

Pada bagian ini kita akan membuat sebuah web service yang mengkonsumsi pustaka Umbraco. Pada tahap ini kita akan membaca daftar konten yang ada di sebuah server Umbraco. Berikut adalah langkah-langkahnya.

Langkah 1. Membuat Proyek Web Services

Pada Visual Studio 2010 silahkan membuat sebuah proyek baru dengan tipe Empty Web Application seperti pada gambar 6

Perkecil gambar iniPerbesar gambar ini
Gambar 6. Pembuatan Proyek Web Services

Gambar 6. Pembuatan Proyek Web Services

Tambah sebuah item baru dengan memilih menu Project à New Item
Perkecil gambar iniPerbesar gambar ini
Gambar 7. Add New Item

Gambar 7. Add New Item

Pilih web services kemudian beri nama UmbracoContentServices
Perkecil gambar iniPerbesar gambar ini
Gambar 8. UmbracoContentService.asmx

Gambar 8. UmbracoContentService.asmx

Bagi veteran pengembang .NET sudah tidak asing lagi dengan berkas .asmx yang sering dikenal dengan asp.net web services. Pada ASP.NET 4.0 memang sudah terdapat model pemograman services dengan nama Windows Communication Foundation. Tetapi dikarenakan arsitektur Umbraco 4.7 menggunakan model web services maka kita akan mengembangkannya dengan model web services.

Langkah 2. Membuat Kode Web Services

Pada bagian ini akan ditemukan berkas UmbracoContentServices.asmx dan UmbracoContentServices.asmx.cs. Selayaknya sebuah dokumen web services terdapat WebMethod yang berupa layanan web yang dimiliki oleh web services tersebut. Pada langkah ini dibuatlah sebuah metode yang akan membaca web di Umbraco dengan nama GetContentNodes dan memiliki beberapa parameter yang dibutuhkan.

Kebutuhan parameter didasarkan pada kebutuhan API Umbraco dalam membaca content node. Content node adalah node yang berada pada kategri Content. Pada Umbraco hal ini dapat Anda lihat dengan login ke panel Umbraco kemudian memilih menu Content. Gambar 9 menjelaskan maksud ContentNode yang terdapat pada Umbraco.
Perkecil gambar iniPerbesar gambar ini
Gambar 9. Salah satu contoh Content Node.png

Gambar 9. Salah satu contoh Content Node

Content Node pada Umbraco dapat dibaca dengan menggunakan pustaka manipulasi dokumen yang telah dikemukakan pada Tabel 1. Berdasar kondisi demikian, hal pertama yang harus dilakukan adalah menambahkan referensi cms.dll, businesslogic.dll dan umbraco.dll. Hal tersebut dapat dilakukan dengan menggunakan menu add reference pada web services Anda yakni dengan memilih menu project à Add Reference
Perkecil gambar iniPerbesar gambar ini
Gambar 10. Add reference

Gambar 10. Add reference

Telusur lokasi berkas pustaka tersebut ke berkas instalasi Umbraco dengan memilih menu Browse dan mencari berkas pustaka tersebut pada folder Bin. Apabila telah ditambahkan maka akan tampil di bagian References
Perkecil gambar iniPerbesar gambar ini
References

Gambar 11. References

Berikutnya pustaka ini akan dipanggil dalam kode .asmx.cs. Pada bagian ini ditambahkan pemanggilan referensi agar lebih mudah dengan menggunakan kata kunci using sebagai berikut. Pada bagian tersebut juga ditambahkan pemanggilan System.Text untuk pustaka manipulasi teks.
Perkecil gambar iniPerbesar gambar ini
Gambar 12. Pemanggilan Pustaka Umbraco

Gambar 12. Pemanggilan Pustaka Umbraco

Berikutnya akan dibuat sebuah WebMethod. WebMethod tersebut yang akan dipanggil melalui web services.
Perkecil gambar iniPerbesar gambar ini
Gambar 13. Kode Konten

Gambar 13. Kode Konten

Gambar 13. Menggambarkan kode yang dikembangkan untuk membaca contents. Hal tersebut dijelaskan sebagai berikut.

1. Fungsi yang diekpsoskan melalui web services dinamakan dengan GetContents dan memiliki parameter id berupa integer yang mengacu pada id dokumen yang hendak dibaca.

2. Variabel hasil dan builderHasil adalah variabel yang digunakan untuk menyimpan hasil pembacaan.

3. Class Document bertujuan untuk membaca document yang ada dalam Umbraco content. Pemanggilan HasChildren bertujuan untuk mengecek apakah dokumen yang dimaksud memiliki subs (anak) dan pemanggilan property Children akan menampilkan list array dari subs tersebut bila ada.

4. Iterasi foreach membaca setiap dokumen subs yang kemudian dimasukkan pada builderHasil yang berupa StringBuilder objek dan dipisahkan dengan tanda titik koma.

5. Hasil dari builderHasil dikonversi menjadi string kemudian disimpan di variabel hasil. Hal ini menjamin interoperabilitas web services dalam hal pengelolaan variabel yang bersifat sederhana seperti string.

Langkah 3. Menguji coba Web Services

Pada bagian ini dapat dilakukan Build dan Compile dengan memilih menu Build à Build Solution. Yakinkan tidak ada kesalahan pengetikan sehingga hasil Build sukses.
Perkecil gambar iniPerbesar gambar ini
Gambar 14. Build Solution

Gambar 14. Build Solution

Uji coba web services yang dikembangkan dengan memilih konteks menu pada UmbracoContentService, kemudian memilih menu konteks View in Web Browser
Perkecil gambar iniPerbesar gambar ini
Gambar 15. View in Web Browser

Gambar 15. View in Web Browser

Bergantung pada ASP.NET Development Web Server maka akan tampil sebuah web services dengan dua fungsi utama yang salah satunya adalah fungsi yang telah dibuat.
Perkecil gambar iniPerbesar gambar ini
Gambar 16. Web Srevices yang dikembangkan

Gambar 16. Web Srevices yang dikembangkan

Apabila dilakukan pemilihan menu GentContents kemudian mengisikan sebuah nilai integer sebagai berikut.
Perkecil gambar iniPerbesar gambar ini
Gambar 17. Pengujian GetContents Service

Gambar 17. Pengujian GetContents Service

Maka akan tampil hasil
Perkecil gambar iniPerbesar gambar ini
Gambar 18. Keasalahan pada Pengujian

Gambar 18. Keasalahan pada Pengujian

Hal tersebut terjadi diakibatkan services yang kita kembangkan tidak menemukan site Umbraco yang kita cari dan tidak bisa membacanya lewat Data Layernya. Pada langkah berikutnya akan dilakukan integrasi web services ini dengan Umbraco.

Mengintegrasikan Web Services dengan Umbraco

Langkah 1. Publikasi Web Services

Pada bagian ini akan dilakukan integrasi antara web services dengan Umbraco. Hal ini dilakukan agar web services yang dikembangkan memiliki domain yang sama dengan Umbraco yang terpasang. Hal yang pertama dilakukan adalah mempublikasikan Web services dengan memilih menu Build à Publish. Dialog akan memunculkan model publikasi. Pada tahap ini pilih file system kemudian telusur folder yang hendak disimpan.
Perkecil gambar iniPerbesar gambar ini
Gambar 19. Dialog Publikasi

Gambar 19. Dialog Publikasi

Hasil publikasi dapat diperhatikan dalam file eksplorer. Pada file eksplorer akan tampil sebuah file .dll pada folder bin, sebuah file .asmx, dan juga folder web.config.
Perkecil gambar iniPerbesar gambar ini
Gambar 20. Hasil Publikasi Services

Gambar 20. Hasil Publikasi Services

Hal pertama yang dilakukan adalah melihat berkas web.config yang dihasilkan. Secara prosedur harus dilakukan pemetaan antara web.config yang ada di Umbraco dengan web.config yang ada di Services. Pada proyek ini tidak ditemukan depedensi di web.config sehingga web.config di umbraco tidak memerlukan perubahan.

Berkas UmbracoContentService,asmx kemudian diletakkanpada folder Umbraco/webservices sementara berkas dll yang ada di folder bin dipindahkan ke folder /Bin di instalasi Umbraco.

Langkah 2. Pengujian di Umbraco

Setelah melakukan pemasangan di Umbraco maka dapat dilakukan pengujian web services yang dibuat. Hal pertama yang dilakukan adalah dengan mengetahui ID document. ID Document dapat diperoleh dengan masuk ke Umbraco Panel dengan alamat http://namadomain/Umbraco (ganti nama domain dengan localhost atau nama domain Anda). Pilih kategori content, kemudian pilih salah satu rootcontent à pilih Properties dan perhatikan IDnya. ID ini berupa angka. Seperti pada Gambar 21.
Perkecil gambar iniPerbesar gambar ini
Gambar 21. Content Properties

Gambar 21. Content Properties

Pada gambar 21 tampak bahwa document ID yang diperoleh adalah 1063. Angka ini kemudian diujicobakan pada web services yang sudah diletakkan di /Umbraco/webservices. Sebagai contoh apabila domain nya adalah localhost:1003 maka alamatnya adalah sebagai berikut http://localhost:1003/umbraco/webservices/UmbracoContentService.asmx . Alamat web services tersebut kemudian di akses dengan mengisikan angka 1063 yang sudah diperoleh pada properties document.
Perkecil gambar iniPerbesar gambar ini
Gambar 22. Ujicoba Umbraco Content Services

Gambar 22. Ujicoba Umbraco Content Services.


Hasil yang ditampilkan dalam Gambar 23.
Perkecil gambar iniPerbesar gambar ini
Gambar 23. Hasil Pengujian Cumbraco Content Services.

Gambar 23. Hasil Pengujian Cumbraco Content Services.

Gambar 23 menunjukkan bahwa pada dokumen dengan ID 1063 memiliki 5 anak dokumen yang masing-masing dipisahkan oleh tanda koma. Berdasar hasil tersebut dapat disimpulkan bahwa ektensibilitas dan interoperabilitas yang terdapat di Umbraco dapat diakses dengan menggunakan Umbraco API dan dapat diekpos melalui kanal web services.


Perkecil gambar iniPerbesar gambar ini
Community Solutions
SANGGAHAN KONTEN SOLUSI KOMUNITAS


MICROSOFT CORPORATION DAN/ATAU MASING-MASING PENYUPLAINYA TIDAK MEMBUAT PERNYATAAN-PERNYATAAN TENTANG KESESUAIAN, KEBENARAN, ATAU KEAKURASIAN INFORMASI DAN GRAFIS TERKAIT YANG TERKANDUNG DI DALAMNYA. SEMUA INFORMASI DAN GRAFIS TERKAIT TERSEBUT DIBERIKAN ""APA ADANYA"" TANPA JAMINAN DALAM BENTUK APA PUN. MICROSOFT DAN/ATAU MASING-MASING PENYUPLAINYA DENGAN INI MENYANGGAH SEMUA JAMINAN DAN SYARAT-SYARAT BERKENAAN DENGAN INFORMASI DAN GRAFIS TERKAIT INI, TERMASUK SEMUA JAMINAN DAN SYARAT-SYARAT TERSIRAT MENGENAI KELAYAKAN JUAL, KELAYAKAN UNTUK TUJUAN TERTENTU, UPAYA YANG SELAYAKNYA DIKERJAKAN, HAK, DAN KEADAAN TIDAK MELANGGAR HAK KEKAYAAN INTELEKTUAL PIHAK LAIN. ANDA KHUSUSNYA SETUJU BAHWA MICROSOFT DAN/ATAU PARA PENYUPLAINYA TIDAK PERNAH BERTANGGUNGJAWAB, DALAM KEADAAN APAPUN, ATAS SEGALA BENTUK KERUGIAN YANG BERSIFAT LANGSUNG, TIDAK LANGSUNG, GANTI KERUGIAN SEBAGAI UANG PAKSA, INSIDENTAL, KHUSUS, DAN KERUGIAN KONSEKUENSIAL, ATAUPUN KERUGIAN APA PUN TERMASUK, NAMUN TIDAK TERBATAS PADA, KERUGIAN AKIBAT HILANGNYA KESEMPATAN UNTUK MENGGUNAKAN, HILANGNYA DATA ATAU KEUNTUNGAN, YANG TIMBUL AKIBAT ATAU YANG BERHUBUNGAN DALAM CARA APAPUN DENGAN PENGGUNAAN ATAU KETIDAKMAMPUAN UNTUK MENGGUNAKAN INFORMASI DAN GRAFIS TERKAIT YANG TERKANDUNG DI DALAMNYA, BAIK BERDASARKAN KONTRAK, PERBUATAN MELAWAN HUKUM, KELALAIAN, TANGGUNG JAWAB MUTLAK ATAS KERUGIAN, ATAU LAINNYA, WALAUPUN JIKA MICROSOFT ATAU SALAH SATU PENYUPLAINYA TELAH DIBERITAHU MENGENAI KEMUNGKINAN ADANYA KERUGIAN-KERUGIAN TERSEBUT.

Properti

ID Artikel: 2599136 - Kajian Terakhir: 25 September 2013 - Revisi: 5.1
Berlaku bagi:
  • Microsoft Visual Studio 2010 Premium
  • Microsoft Visual Studio 2010 Professional
  • Microsoft Visual Studio 2010 Service Pack 1
  • Microsoft Visual Studio 2010 Ultimate
Kata kunci: 
kbmvp kbcommunity kbstepbystep KB2599136

Berikan Masukan

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com