Bung Arkka’s Weblog

Just another weblog @ Werk!

b-Membuat Client-side Web Parts September 8, 2008

Filed under: F-Pages-17---13 — bungarkka @ 7:00 am
Tags:

Membuat Client-side Web Parts

Anda bisa lakukan banyak hal di SharePoint Designer karena fungsinya sama dengan aplikasi HTML/XML Editor.
Sebenarnya, SharePoint Designer adalah kelanjutan dari Microsoft Office Frontpage.
Sedangkan, SharePoint sendiri memiliki kelebihan, yaitu mengedit halaman atau page laungsung lewat browser.
Menggunakan designer untuk merubah SharePoint page bisa merusak performa dan halaman itu sendiri.
Cara yang lebih aman untuk merubah SharePoint page adalah menggunakan web part custom content yang terdiri dari 3, yaitu content editor, page viewer, dan XML web part.
Setelah anda membuat web part, web part ini bisa di ekspor dan dipergunakan kembali pada halaman lain.

 
Cakupan Re-use Elemen

Gunakan web part Content Editor dalam me-multiplikasi kembali halaman-halaman SharePoint.
Anda bisa mengimpor file HTML dengan Content Editor, sehingga nantinya anda bisa gunakan kembali elemen nya pada seluruh site collection.
Untuk melakukan hal ini, caranya:
1. Klik Site Actions dan pilih Create
2. Klik Document Library
3. Berikan nama Cakupan serta deskripsinya
4. Klik No untuk Navigation Quick launch
5. Pilih None untuk Document Template
6. Klik Create
Berikutnya, pastikan akses ke library sudah diset minimum untuk bisa di Read, caranya:
1. Klik Setting dan pilih Document Library Settings
2. Klik Permissions for this document library
3. Anda lihat bahwa Home Visitors minimal punya akses Read. Jika belum, maka ubahlah ke Read
Berikutnya, buatlah file HTML yang bernama main_nav.htm dan upload file ini ke library, caranya:
1. Buka Notepad dan ketik semua kode yang anda lihat ini
2. Save notepad nya dan berikan nama main_nav.htm
3. Saatnya untuk mengupload file ini, klik Upload
4. Klik browse. Ambil lokasi file itu dan klik Open
5. Klik OK
Sekarang buatlah tes page yang berisikan Content Editor web part, caranya
1. Navigasi ke Bamboomedia Intranet
2. Klik Site Actions dan pilih Create
3. Klik Web Part Page dibagian Web Pages
4. Berikan nama content test editor, biarkan yang lainnya default dan klik Create
5. Klik Add a Web Part untuk zona tengah
6. Pilih Content Editor Web Part dan klik Add
7. Klik menu Edit dan pilih Modify Shared Web Part
8. Dibagian Content Link, ketik address lokasi file main_nav.htm
9. Untuk Title nya dibagian Apperance, berikan nama Main_Nav
10. Pilih None untuk Chrome Type
11. Klik OK jika sudah selesai
Kelihatannya Title Bar ini kurang pas, maka klik Edit Ttile Bar Properties dan lakukan perubahan sebagai berikut. Klik OK jika sudah selesai.
Klik Exit Edit Mode untuk keluar.
Inilah Main_Nav web part yang mendapatkan isi konten nya dari Cakupan library.
Dan karena Main_Nav terhubung pada file, perubahan apapun yang terjadi pada file itu akan otomatis terjadi pada web part itu juga, sehingga penggunaan web part di page manapun akan menghemat waktu anda dalam mengedit dsb.

 
Cakupan Images dan Animasi Flash

Content Editor web part juga bisa diandalkan dalam menyertakan image atau gambar yang link ke suatu address.
Misalkan, cara menambahkan logo pada Main_Nav web part:
1. Klik Cakupan library
2. Klik Upload
3. Klik browse, ambil gambar logo yang ingin di upload. Klik Open lalu klik OK
4. Untuk main_nav, klik menu Edit dan pilih Edit in Microsoft Office SharePoint Designer
5. Tepat sebelum kata utama, berikan kode untuk menyertakan logo nya sebagai berikut
6. Jika sudah selesai, klik Save, lalu preview hasilnya. Kini logonya sudah tampil yaitu berbentuk lingkaran biru dengan panah bewarna kuning.
Adapun selain gambar logo, anda juga bisa menyertakan animasi flash dan tinggal menambahkan tags flash nya ke dalam file main_nav itu.

 
Menampilkan Pages didalam Frame

Page View web part membuat IFrame pada halaman yang bisa menampilkan situs dari URL yang valid.
Ketika pengguna mengklik link yang ada didalam Page Viewer web part, maka hasil link situs itu pun akan tampil didalam IFrame.
Dengan kata lain, gunakanlah Page Viewer untuk menampilkan sesuatu tanpa harus keluar navigasi dari halaman.
Salah satu contohnya adalah menyertakan Google Search ke dalam Page Viewer, caranya:
1. Buka Notepad baru
2. Ketik kode yang anda lihat disini
3. Save file ini dan berikan nama gsearch.htm
4. Klik Upload dan ambil file gsearch.htm untuk diupload ke Cakupan library
5. Sekarang buat tes page baru, klik Site Actions dan pilih Create
6. Klik Web Part pages
7. Berikan nama pageviewer
8. Biarkan yang lainnya default lalu klik Create
9. Klik Add a Web Part di zona Header
10. Pilih Page Viewer Web Part dan klik Add
11. Klik menu Edit dan pilih Modify Shared Web Part
12. Dibagian Page Viewer Link, tulis link yang mengarah pada file gsearch.htm
13. Klik Appearance dan dibagian Title tulis Google Search
14. Untuk Height, pilih Yes dan berikan 2024 pixel
15. Untuk Chrome Type pilih None
16. Jika sudah selesai klik OK
Sekarang anda punya Google Search langsung di halaman SharePoint anda.
Layaknya sebagai search engine, apapun yang anda cari akan menghasilkan sama seperti halnya membuka situs google.com.
Contohnya saya ketik perusahaan yang membuat demonstrasi video tutorial ini Bamboomedia Cipta Persada, dan tampillah beberapa link yang menuju ke situs resmi Bamboomedia.
Begitu juga jika saya cari SharePoint Official Website, dan kebanyakan situs resmi dari Microsoft yang hadir didepan layar.
Tiap kali saya klik link di hasil search google, situs itu pun muncul di dalam SharePoint, dan ini agaknya sedikit mengganggu jika saya nantinya ingin kembali pada Bamboomedia Intranet.
Ada baiknya agar link yang di klik akan membuka browser baru, sehingga kesannya tidak terlalu mengganggu, caranya:
1. Navigasi ke Cakupan library
2. Untuk gsearch, klik menu Edit dan pilih Edit in Microsoft Office SharePoint Designer
3. Dibagian kode paling atas, rubah target self menjadi target Google Window seperti ini
4. Klik Save dan preview hasilnya
Sekarang, tiap kali saya ingin melakukan suatu pencarian di Google, maka browser baru terbuka secara otomatis menampilkan hasil pencarian itu.
Browsernya juga bisa ditentukan seberapa besar-kecil penampilannya.
Bagi anda yang mahir dengan HTML, silahkan untuk mencobanya.

 
Melakukan Transformasi XSL

Gunakan XML Web Part untuk menampilkan data XML ke dalam bentuk tabel pada halaman SharePoint.
Anda bisa melakukannya dengan sumber data XML manapun, jadi bagi anda yang mahir XML, XML Web Part ini alat yang sangat berguna.
Anda bisa gunakan alat stsadm.exe untuk menghasilkan administration page untuk SharePoint site collection.
Untuk membuat halaman Intranet Administration, caranya:
1. Buka Command Prompt
2. Ketik command nya seperti yang tertampil disini. Lalu tekan Enter. Ada error yang menyatakan stsadm tidak dikenali. Ini sebabnya adalah letak alat stsadm tidak pada lokasi Documents and Settings Administrator. Pertama anda harus mencari lokasi alat tersebut, dan kemudian barulah bisa mengeksekusikan command nya. Ketik cd\ untuk kembali ke root folder.
3. Ini adalah lokasi alat stsadm.exe yaitu berada di dalam folder Common Files Microsoft Shared web server extensions 12 Bin. Copy paste lokasi ini ke Command Prompt.
4. Ketik cd  dan paste lokasinya lalu tekan Enter. Sekarang anda sudah berada pada lokasi yang benar.
5. Ketik lagi command nya, atau untuk mempermudah, tekan tombol Page Down pada keyboard untuk menampilkan kembali seluruh command nya.
6. Tekan Enter untuk mengeksekusinya
7. Setelah berhasil, ketik exit untuk keluar
8. File intranet.xml ini kemudian di cut dan di paste di folder My Documents
9. Buka Notepad baru, ketik kode nya seperti yang tertampil, lalu Save. Agar lebih mudah, copy paste kode nya yang sudah terdapat di dalam DVD ini.
10. Berikan nama intranet.xsl. Sekarang anda punya 2 file intranet yang satu xml yang satunya lagi xsl
11. Kembali ke Cakupan library, klik Upload dan klik Browse. Biar lebih cepat, saya ingin mengupload 2 file ini sekaligus, maka saya klik UPload Multiple Files dan saya pilih kedua file intranet itu.
Sekarang 2 file intranet sudah ada, kini tinggal membuat halaman baru yang akan menampilkan Intranet Administration nya, caranya:
1. Klik Site Actions lalu pilih Create
2. Klik Web Part Page
3. Berikan nama xml, biarkan yang lainnya default dan klik Create
4. Klik Add a Web Part dibagian zona Header
5. Pilih XML Web Part dan klik Add
6. Klik menu Edit dan pilih Modify Shared Web Part
7. Pada XML Link, ketik alamat lokasi file intranet.xml
8. Pada XSL Link, ketik alamat lokasi file intranet.xsl
9. Pada Appearance, berikan title nya Intranet Administration
10. Untuk Chrome Type, pilih Title Only
11. Klik OK
Dan tampillah isi pada Intranet Administration untuk alamat URL nya.
Klik Exit Edit Mode untuk menutupinya.
Disini anda bisa mengenal URL mana yang telah diberikan akses kepada siapa, dan apa saja yang terdapat di dalamnya dengan mengklik pilihannya pada Users, Usage, dan Theme.
Ada baiknya untuk menambahkan stsadm command di task scheduled di server agar data di-update secara otomatis.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s