Memulai Pengembangan Umbraco di Visual Studio 2010

ID Artikel: 2587240 - 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


Saat ini terdapat banyak Content Management System (CMS) yang siap di unduh melalui WebMetrix. Orchard, dotNETNuke, MojoPortal, atau Umbraco. Hal yang menarik adalah CMS tersebut bisa Anda pasang, coba, dan pelajari hanya dengan beberapa klik saja. Artikel ini tidak akan membahas bagaimana Anda memasang CMS yang tersedia pada WebMetrix. Artikel ini akan membahas bagaimana memulai pengembangan salah satu CMS yang terdapat di dalam webmatrix yakni Umbraco.

Artikel ini ditujukan bagi developer yang tidak hanya hendak memakai CMS sebagai solusi webnya tetapi juga melakukan ekstensibilitas di atas CMS tersebut. Selayaknya dengan solusi CMS pada era Web 2.0, CMS Umbraco mendukung ekstensibilitas dengan berbagai model pemograman dengan teknologi Microsoft mulai dari Razor, XSLT, ASP.NET webforms, LiNQ2Umbraco hingga dukungan implementasi di Azure dengan Umbraco Azure Accelarator. Artikel ini adalah seri pertama dari petualangan pengembangan Umbraco di atas Visual Studio. Pada artikel pertama ini akan dilakukan konfigurasi lingkungan pengembangan Umbraco di Visual Studio 2010.

Resolusi

Hal yang harus disiapkan

Artikel ini dikembangkan dengan sekumpulan kebutuhan perangkat lunak seperti:

1. Microsoft Windows 7 Professional SP1 atau yang lebih baik.

2. Visual Studio 2010 Professional atau yang lebih baik. Perangkat ini dapat diunduh di download center Microsoft atau melalui akun MSDN

3. Umbraco installation bisa di unduh di http://umbraco.codeplex.com/

4. SQL Server Express 2008 R2 atau yang lebih baik yang sudah terpasang

5. IIS yang sudah terpasang dengan baik (dapat pula menggunakan IIS Express atau Cassini tetapi tidak didemokan di sini)



Setelah ke lima hal tersebut sudah tersedia maka berikutnya dapat dilakukan persiapan pengembangan Umbraco di Visual Studio. Langkah-langkah berikut mungkin akan dilakukan berulang kali pada saat hendak mengembangkan solusi di atas Umbraco.



Model Pengembangan

Pengembangan dengan menggunakan Web Umbraco pada artikel ini dilakukan dengan memisahkan proyek solusi menjadi dua bagian yakni solusi site dan solusi proyek.

· Solusi site berisi Umbraco site yang dipasangkan di IIS. Solusi ini digunakan untuk menguji Umbraco di development site

· solusi proyek berisi Umbraco proyek beserta proyek-proyek lain yang akan dikodekan di Visual Studio. Solusi ini digunakan untuk mengelola kode-kode yang ditambahkan di Umbraco

Pemisahan ini dilakukan untuk memudahkan tim dalam mengembangkan solusi yang memudahkan dari sisi konfigurasi pengembangan dan efesiensi pengujian. Sebagai contoh apabila pengembangan menggunakan SVN seperti Team Foundation Server (TFS) maka penggunaan model ini memberi model sinkronisasi yang lebih baik ditingkat efisiensi kode.

Langkah Pemasangan Umbraco pada IIS

Pemasangan Umbraco pada IIS adalah sesuatu yang sama mudahnya dengan memasang Umbraco melalui WebMetrix. Langkah-langkahnya adalah sebagai berikut.

Lakukan Pembuatan basis data kosong SQL Server 2008 R2 melalui SQL Server Management Studio 2010

Pada langkah ini dibuat dua buah basis data yakni DevSite dan DevContent. DevSite akan digunakan untuk menyimpan basis data Umbraco sementara DevContent digunakan untuk menyimpan basis data tambahan yang mungkin ditambahkan.


Perkecil gambar iniPerbesar gambar ini
2587257


Instalasi Umbraco ke IIS

Pada langkah ini harus disiapkan folder web IIS. Pada kerangka pengembangan yang harus dilakukan adalah melakukan setup untuk IIS Web. Pada kesempatan ini dibuat sebuah folder dengan nama UmbracoBase di folder document. Ekstraksi dilakukan di BaseUmbraco tersebut

Perkecil gambar iniPerbesar gambar ini
2587258



Kemudian buatlah pembuatan web site di IIS Manager. Sebagai contoh pada Gambar di buat web site dengan port 1000 untuk aksesnya


Perkecil gambar iniPerbesar gambar ini
2587259



Hasilnya akan tampak sebagai berikut

Perkecil gambar iniPerbesar gambar ini
2587260


Hal berikutnya yang harus dilakukan adalah mengubah application pool UmbracoBase menjadi versi 4.0 dengan mode integrated
Perkecil gambar iniPerbesar gambar ini
2571582





Sama halnya dengan site yang lain Umbraco juga membutuhkan permission khusus untuk melakukan setting permission. Setting permission dapat mengikuti standar berikut.

http://our.umbraco.org/wiki/install-and-setup/set-umbraco-folder-permissions-from-command-line


Konfigurasi dan Setup Umbraco

Berikutnya dapat dilakukan ujicoba berdasarkan alamat port yang digunakan. Pada artikel ini menggunakan port 1000. Silahkan tunggu beberapa saat untuk melakukan inisialisasi web apps.

Perkecil gambar iniPerbesar gambar ini
2587261



Pilih Sql Server pada langkah pemilihan database seperti pada gambar di bawah ini. Konfirmasi untuk melakukan penginstalan. Pada langkah ini pastikan bahwa opsi Otentikasi model user telah diaktifkan pada SQL Server

Perkecil gambar iniPerbesar gambar ini
2571584



Tunggu beberapa saat hingga proses instalasi database menjadi 100%. Apabila mengalami kondisi -1% maka jangan ragu untuk melakukan refresh browser untuk mengulangnya kembali

Perkecil gambar iniPerbesar gambar ini
2571585


Buat sebuah user. User yang dimaksud adalah pengguna yang mengakses Umbraco lewat panel dibelakang


Perkecil gambar iniPerbesar gambar ini
2587262



Anda akan diminta untuk memasangkan starter kit. Pada tahap ini sesuaikan dengan kebutuhan. Artikel ini tidak menentukan mana yang sesuai. Namun demikian penulis sendiri menyarankan untuk tidak memasangnya untuk fleksibilitas ke depan.

Berikutnya sistem akan mengarahkan ke Umbraco Panel.

Perkecil gambar iniPerbesar gambar ini
2587263


Pada tahap ini hal yang dapat dilakukan adalah memilih StarterKit. Starterkit dapat dipasang dibagian Developer Section di bagian Package.

Perkecil gambar iniPerbesar gambar ini
2571588


Apabila hendak menggunakan skin bawaan maka pengguna dapat menginstall skin, tetapi apabila hendak melakukan pengembangan terlebih dahulu maka disarankan melakukan pengembangan terlebih dahulu dengan skin dasar agar mudah dikembangkan untuk membuat desain yang sesuai dengan kebutuhan. Pada artikel ini dilakukan pemasangan dengan skin dasar (tidak memasang skin) dikombinasikan dengan Umbraco Business Starter Kit.

Perkecil gambar iniPerbesar gambar ini
2587264


Langkah Persiapan Pengembangan di Visual Studio

Pada langkah ini kita akan mempersiapkan berbagai hal yang dapat dilakukan di Visual Studio untuk memanipulasi Umbraco. Hal yang pertama dilakukan tentu adalah dengan membuka Visual Studio. Apabila ini adalah kali pertama mengembangkan solusi Umbraco maka langkah-langkah berikut mutlak dilakukan


Mengunduh Template Pengembangan

Hal yang menarik pada Visual Studio 2010 adalah adanya fitur extension manager yang memudahkan dalam menambah dan mengunduh template baru. Sebagai solusi Open Source Umbraco memiliki banyak dukungan dari komunitas termasuk dengan template Visual Studio ini yang dikembangkan oleh komunitas. Hal yang dilakukan adalah sebagai berikut.

Buka Visual Studio dan pilih menu Tools --> Extension Manager. Kemudian pada borang pencarian lakukan pencarian secara online dengan kata kunci Umbraco, sehingga akan tampil seperti pada gambar.

Perkecil gambar iniPerbesar gambar ini
2587265


Pilih Umbraco Project untuk mengunduhnya, setelah itu disarankan untuk melakukan restart visual studio.



Membuat Project Umbraco

Langkah berikutnya adalah membuat projecyt dengan template tersebut. Sama halnya dengan membuat proyek atau solution pada umumnya, pengguna akan dihadapkan pada pemilihan lokasi Umbraco. Pada langkah ini lakukan telusur ke path instalasi Umbraco di langkah Instalasi Umbraco ke IIS

Perkecil gambar iniPerbesar gambar ini
2571591


Pilih folder, setelah memastikan bahwa kondisi folder sesuai dengan apa yang dibutuhkan Umbraco maka lakukan konfirmasi dengan memilih menu create project. Hasilnya akan dibuat sebuah project yang mirip dengan struktur folder Umbraco

Perkecil gambar iniPerbesar gambar ini
2571592


Hal yang menarik untuk diperhatikan adalah berkas SyncProjectWithUmbraco.bat. Apabila dieksekusi, berkas ini akan melakukan penyalinan dengan proyek umbraco yang sudah dipilih pada langkah awal. Berkas .bat tersebut tentu dapat diubah sesuai dengan kebutuhan.


Langkah berikutnya adalah membuat project terpisah untuk mengembangkan modul-modul yang modular. Sebagai contoh apabila hendak mengembangkan modul MemberProfile maka dibuatlah sebuah project Web yang akan dibuat. Pada contoh ini akan dibuat project dengan nama MemberProfile yang akan berisi modul registrasi, lupa password, dan ganti password.


Membuat Project Modul Umbraco

Langkah yang harus dilakukan adalah dengan membuat project baru di solusi yang sudah ada

Kemudian pilih ASP.NET Empty Web Application dengan tipe framework 4.0 dan pada contoh ini dberi nama MemberProfile

Perkecil gambar iniPerbesar gambar ini
2587266


Hasilnya adalah sebuah web kosong yang siap dikembangkan di pemrograman Umbraco.


Perkecil gambar iniPerbesar gambar ini
2571595


Pada saat tulisan ini ditulis model pengembangan web Umbraco dapat dilakukan melalui tiga pendekatan yakni

· Menggunakan User Control (ASP.NET Web Form)

· Menggunakan XSLT

· Menggunakan Razor

Artikel berikutnya akan membahas satu demi satu model pengembangan teknologi ASP.NET di Umbraco

Ringkasan

Pada artikel ini dipelajari bagaimana mempersiapkan lingkungan pengembangan aplikasi web cms dengan Umbraco. Sebagai open source CMS, umbraco dapat dipasang dan dikonfigurasi dengan mudah di IIS dan dikembangkan lebih jauh dengan Visual Studio. Model pemrograman yang beragam akan dibahas pada artikel selanjutnya.

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: 2587240 - Kajian Terakhir: 25 September 2013 - Revisi: 8.1
Berlaku bagi:
  • Microsoft Visual Studio 2010 Premium
  • Microsoft Visual Studio 2010 Professional
Kata kunci: 
kbmvp kbcommunity kbstepbystep KB2587240

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