Membuat Visual Studio solution untuk pengembangan aplikasi berbasis SharePoint Sebelum developer membuat class, method, dan sebagainya, Team Leader harus membuatkan Visual Studio solution terlebih dahulu. Tutorial berikut ini menunjukkan bagaimana caranya untuk menyiapkan folder-folder yang dibutuhkan serta membuat solution beserta project dan konfigurasinya. Langkah-langkah pada tutorial ini hanya perlu dilakukan satu kali saja untuk sebuah Team Project.
Membuat solution berserta project-project yang dibutuhkan 1. Pastikan Anda sudah melakukan mapping antara code repository di VSTS dengan local folder. 2. Buka Visual Studio 2015.
3. Pada window Team Explorer, pastikan Anda sudah terhubung dengan Team Project yang hendak Anda buatkan solution-nya. Klik Source Control Explorer.
4. Pada window Source Control Explorer, klik kanan pada area putih di bawah folder BuildProcessTemplates, lalu pilih New Folder
5. Beri nama folder baru tersebut sebagai External Libraries. Folder ini berfungsi untuk menyimpan file .dll yang tidak dihasilkan oleh kompilasi dari source code Anda (misalnya Microsoft.SharePoint.dll, EPPlus.dll, dan sebagainya). Buat satu folder lagi bernama Source. Folder ini nantinya merupakan folder di mana solution Anda berada.
6. Klik menu File > New > Project.
7. Pada window New Project, pilih Visual Studio Solutions di panel bagian kiri (ada di dalam kategori Other Project Types). Pilih template Blank Solution. Pilih .NET Framework yang sesuai dengan kebutuhan. Untuk pengembangan aplikasi berbasis SharePoint 2013 ke atas, gunakan .NET Framework 4.5. Beri nama solution pada isian Name (biasanya sama atau mirip dengan nama dari Team Project, namun tanpa ada spasi). Setelah itu, klik Browse untuk memilih folder Source yang dibuat pada langkah No 6. Pastikan pilihan Add to Source Control dalam keadaan tercentang. Klik tombol OK.
8.
Klik menu View > Solution Explorer untuk membuka window Solution Explorer.
9. Pada window Solution Explorer, klik kanan solution yang baru saja Anda buat, lalu pilih Add > New Project…
10. Pada window Add New Project, pilih Visual C# pada panel bagian kiri. Pilih template Class Library. Pilih .NET Framework 4.5. Beri nama project sesuai dengan fungsinya. Project yang dibuat pada langkah ini berfungsi untuk menyimpan konstanta dan method-method extension. Menurut konvensi yang berlaku di Altrovis, format nama untuk sebuah project adalah NamaSolution.FungsiProject. Maka dari itu, nama dari project ini adalah PGNSakaSite.Constants. Klik tombol OK untuk membuat project.
11. Visual Studio secara otomatis membuat file Class1.cs pada project yang baru saja kita buat. Hapus file tersebut dengan klik kanan pada file Class1.cs, lalu pilih Delete.
12. Klik OK pada pop-up yang muncul.
13. Buat sebuah project lagi dengan langkah yang sama dengan No 10. Project pada langkah ini berfungsi untuk menyimpan class-class entitas. Maka dari itu, beri nama project ini sebagai PGNSakaSite.Entities. Jangan lupa untuk menghapus juga file Class1.cs yang otomatis dibuatkan oleh Visual Studio.
14. Lakukan sekali lagi untuk membuat project yang berfungsi untuk menyimpan method-method helper dengan nama PGNSakaSite.Helpers. Hapus juga file Class1.cs yang dibuatkan secara otomatis oleh Visual Studio.
15. Terakhir, buat project yang berfungsi untuk menyimpan web parts. Klik kanan solution, lalu pilih Add > New Project. Pada window Add New Project, pilih SharePoint Solutions pada panel kiri. Pilih SharePoint 2013 – Empty Project sebagai template. Gunakan .NET Framework 4.5. Beri nama project sebagai PGNSakaSite.WebParts. Setelah itu, klik tombol OK.
16. Pada window SharePoint Customization Wizard, pastikan URL dari local SharePoint di VM sudah benar dengan klik tombol Validate.
17. Akan terdapat pop-up bertuliskan Connection successful jika URL sudah terisi dengan benar. Klik tombol OK untuk menutup pop-up tersebut.
18. Kembali ke window SharePoint Customization Wizard, pilih Deploy as a farm solution. Setelah itu, klik tombol Finish.
19. Klik kanan pada project PGNSakaSite.Constants, pilih Properties.
20. Ubah isian Default namespace menjadi PGNSakaSite (tanpa ada .Constants).
21. Simpan dengan Ctrl+S.
22. Pada window Source Control Explorer, klik kanan Team Project PGN Saka Site, lalu pilih Check In Pending Changes.
23. Klik tombol Yes untuk menyimpan semua perubahan pada solution dan project.
24. Akan muncul halaman Pending Changes pada window Team Explorer. Isi komentar kemudian klik tombol Check In.
25. Pilih Yes pada pop-up Check-in Confirmation.
26. Setelah proses check-in sukses, akan ada pesan pada bagian atas halaman Pending Changes.
Membuat referensi antar project 1. Klik menu View > Solution Explorer untuk membuka window Solution Explorer.
2. Klik kanan node References pada project PGNSakaSite.Entities, lalu pilih Add Reference…
3. Pilih Solution pada panel di kiri (ada di dalam Projects). Beri tanda centang pada project PGNSakaSite.Constants. Klik tombol OK.
4. Klik kanan node References pada project PGNSakaSite.Helpers, lalu pilih Add Reference…
5. Beri tanda centang pada project PGNSakaSite.Constants dan PGNSakaSite.Entities. Klik tombol OK.
6. Klik kanan node References pada project PGNSakaSite.WebParts, lalu pilih Add Reference…
7. Beri tanda centang pada project PGNSakaSite.Constants, PGNSakaSite.Entities, dan PGNSakaSite.Helpers. Klik tombol OK.
8. Klik kanan solution PGNSakaSite, lalu pilih Build Solution untuk melakukan local build (compile) pada solution.
9. Klik kanan solution PGNSakaSite, pilih Check In…
10. Pada halaman Pending Changes, beri komentar lalu klik tombol Check In.
11. Klik tombol Yes pada pop-up Check-in Confirmation.
12. Setelah proses check-in sukses, akan ada pesan pada bagian atas halaman Pending Changes.
Membuat web part dan menentukan nama feature 1. Klik kanan pada project PGNSakaSite.WebParts, lalu pilih Add > New Item…
2. Pilih template Visual Web Part (Farm Solution Only). Isi nama web part sesuai dengan fungsinya, lalu klik tombol Add.
3. Pastikan di dalam web part yang Anda buat terdapat file NamaWebPartUserControl.ascx, NamaWebPartUserControl.ascx.cs, dan NamaWebPartUserControl.ascx.designer.cs. Karena nama HelloWorld digunakan pada langkah sebelumnya, maka file yang dibuat adalah HelloWorldUserControl.ascx, HelloWorldUserControl.ascx.cs, dan HelloWorldUserControl.ascx.designer.cs.
4. Tuliskan suatu code pada HelloWorldUserControl.ascx, misalnya sebuah Heading.
5. Klik kanan pada node Feature1, lalu pilih Rename.
6. Beri nama yang sama dengan nama project, namun dilengkapi dengan spasi. Dalam contoh ini yaitu PGN Saka Site Web Parts.
7. Klik kanan node PGN Saka Site Web Parts.feature lalu pilih Open.
8. Pastikan isian Title sama dengan nama feature pada langkah No 6. Pastikan juga web part yang ingin dimasukkan ke dalam feature ini sudah ada pada list di dalam panel Items in the feature.
9. Simpan dengan Ctrl+S. 10. Lakukan local build dengan Ctrl+Shift+B.
Deploy project ke local SharePoint Agar web part yang kita buat bisa digunakan di SharePoint, kita harus melakukan deploy terlebih dahulu. Tutorial berikut menunjukkan cara melakukan deploy ke local SharePoint. Langkah-langkah untuk melakukan deploy ke server Altrovis melalui Release Management dijelaskan pada dokumen yang berbeda. 1. Deploy ke local SharePoint dengan klik kanan project PGNSakaSite.WebParts lalu pilih Deploy.
2. Buka http://spdev/ pada Internet Explorer. Klik icon Settings, pilih Site settings.
3. Pada halaman Site Settings, klik link Site collection features pada bagian Site Collection Administration.
4. Pastikan PGN Saka Site Web Parts terdapat pada daftar feature yang ada. Pastikan juga feature tersebut sudah dalam keadaan Active.
Menambahkan web part ke suatu halaman Setelah project berhasil di-deploy, maka web part-web part yang ada di dalam project tersebut bisa ditambahkan ke halaman-halaman di SharePoint yang memiliki web part zone. 1. Kembali ke halaman Home dengan mengklik logo SharePoint di kiri atas.
2. Klik icon Settings, pilih Edit page.
3. Tambahkan web part yang telah dibuat sebelumnya.
4. Setelah berhasil ditambahkan, pilih tab PUBLISH, klik Publish.
5. Klik tombol Continue pada pop-up Publish.
6. Selamat! Web part yang berisi tulisan Hello World berhasil ditambahkan ke halaman Home.
Memperbaiki Title dan Description web part Agar web part yang Anda buat lebih informatif, perbaiki Title dan Description dari web part tersebut. 1. Klik kanan file HelloWorld.webpart lalu pilih Open.
2. Ubah isi Title dan Description sesuai dengan fungsi web part.
3. Simpan dengan Ctrl+S. 4. Deploy kembali project PGNSakaSite.WebParts.
5. Pastikan bahwa web part Anda sudah memiliki Title dan Description yang lebih informatif. Hal ini bisa dilihat ketika hendak menambahkan web part pada suatu halaman.
6. Pastikan proses deploy ke local SharePoint telah berhasil.
7. Terakhir, jangan lupa untuk selalu Check In Pending Changes.
