BlogEngine-JustCodeIt

1 Blog Engine “Just Code It”®

Daftar Isi Tentang Blog Engine ..................................................................................................................................... 3

Setup dan Konfigurasi BlogEngine ................................................................................................................ 3

Langkah Instalasi Blog Engine ................................................................................................................... 4

Langkah Konfigurasi BlogEngine ............................................................................................................... 7

Pemasangan Extension pada BlogEngine ................................................................................................... 10

Sekilas Tentang Cascade Stylesheet ........................................................................................................... 13

Customisasi Blog Engine Theme ............................................................................................................. 14

Ekstensibilitas di BlogEngine ....................................................................................................................... 22

Extensions Manager .................................................................................................................................... 22

Membuat Extension Sederhana .................................................................................................................. 23

Extension Setting ........................................................................................................................................ 25

Menambahkan JQuery Extension ............................................................................................................... 26

Menambahkan Widget ............................................................................................................................... 27

Membuat Widget Sederhana ...................................................................................................................... 28

Membuat Widget Untuk Menampilkan Koleksi Buku ................................................................................ 30


Prakata

Pertama Alhamdulillah puji syukur kepada Alloh Swt. Shingga modul ini bisa diselesaikan dalam waktu

sangat – sangat singkat. Hal yang kedua ini bukanlah sebuah buku tetapi ini adalah modul mini yang

digarap rame-rame dan diharapkan dapat menjadi referensi bagi semua. Tidak ada apapun di balik

modul ini kecuali keinginan kami untuk berbagi dan berkembang bersama komunitas IT Indonesia.

Perangkat lunak melebar ke dunia web dan ini menjadi hal yang menarik, bagaimanapun semua data

dan informasi kita lambat laun mengalir ke web mulai dari Blog, Social Networking atau sekedar curhat

lewat tweet mungkin menjadi hal yang biasa. Selain prilaku konsumen kita butuh pula prilaku innovator

yang tidak hanya belajar tetapi berinovasi terhadap teknologi sehingga kedepannya dapat bermanfaat

untuk kita, sekitar kita, dan lingkungan yang lebih luas yakni masyarakat internet.

Modul ini membahas tentang salah satu proyek open source yang saya pribadi cukup menyukainya

yakni, BlogEngine. BlogEngine adalah paket aplikasi web untuk blogging yang cukup menarik, ektensibel,

dan tentu saja tanpa investasi. Buku ini adalah bagian dari seri “Just Code It®”. Sebuah seri yang

mungkin pernah Anda unduh sebelumnya dengan judul WPF “Just Code It®”.

Kami penulis berterima kasih kepada Pak. Julius Fenata dari Microsoft Indonesia, Pak. Rudy Hartanto

dari MTI UGM, rekan-rekan peserta FCS 2009, dan tentu kalian yang membaca buku ini. Selamat

membaca dan selamat berinovasi.

Salam Inovasi,

Ridi, Ferro, Erick


Blog Engine 101

Berbagai teknik dasar penggunaan blog engine dan juga pengembangannya

Tentang Blog Engine

Blog engine adalah suatu aplikasi web yang memfokuskan pada komunikasi blog. Blog engine

dikembangkan dengan konsep ekstensibiltas dengan sekumpulan fitur yang sudah ada plus sekumpulan

fitur yang dapat dikembangkan melalui platform pengembangan Blog Engine. Blog Engine adalah proyek

open source yang kodenya dapat dimodifikasi, dirubah, dan ditambahkan sesuai dengan kebutuhan

dengan tetap menghargai hak cipta pengembangnya. Versi terakhir Blog Engine dapat di unduh di situs

http://codeplex.com/blogengine

Modul ini akan memfokuskan pada beberapa aksi dasar yakni

1. Setup dan konfigurasi BlogEngine

2. Pola Penggunaan BlogEngine

3. Pengembangan lebih lanjut dengan BlogEngine

Setup dan Konfigurasi BlogEngine

Blog engine cukup mudah untuk dipasangkan dan digunakan. Secara umum terdapat dua model

pemasangan blog engine yakni pemasangan di server berdedikasi dan di server yang dipakai secara

bersama sama (hosting server). Model pertama umum digunakan pada kebutuhan yang bersifat massive

sebagai contoh terdapat kebutuhan pembuatan blog massal pada setiap karyawan perusahaan, atau

perusahaan penyedia web menyediakan paket blog gratis. Model kedua umum digunakan pada kondisi

pengguna yang menyewa ruang host di hosting provider.

Sebelum melakukan setup dan konfigurasi, terdapat beberapa langkah-langkah yang harus dipersiapkan

untuk kebutuhan pemasangan dan pengembangan yakni.

1. Sistem Operasi Windows Server XP, Vista, 7, 2003, atau 2008. Sistem operasi klien hanya

disarankan untuk kebutuhan pengembangan saja.

2. Web Server IIS yang dapat dipasangkan di sistem operasi di atas.



3. Basis data SQL Server 2005 Express atau yang lebih tinggi dan dapat diunduh di

http://microsoft.com/sqlserver unduh pula Management studio express untuk kemudahan

pengelolaan data pada link yang sama

4. Microsoft .NET versi 3.5 yang bisa di unduh di http://Microsoft.com/net

5. Blog engine versi terkini dapat diunduh http://codeplex.com/blogengine

6. Visual Studio 2008 Express atau yang lebih tinggi untuk kebutuhan pengembangan lebih lanjut

Blog Engine versi gratis (Express) bisa diunduh di http://microsoft.com/vstudio

Setelah mempersiapkan sekumpulan perangkat lunak di atas maka kita dapat memulai instalasi baik

dengan model dedikasi ataupun model hosting.

Langkah Instalasi Blog Engine

Pada bagian ini dikemukakan langkah-langkah instalasi di windows XP. Bagi sistem operasi Vista/7/2008

langkah-langkah kurang lebih sama yang membedakan terletak pada konfigurasi IIS7 untuk lebih

jelasnya dapat dilihat secara online di url

http://blogengine.codeplex.com/Wiki/View.aspx?title=Installation

1. Unduh versi web dari Blog Engine 1.5 yang dapat diperoleh di http://codeplex.com/blogengine

2. Buka browser dan yakinkan http://localhost dapat diakses

http://microsoft.com/sqlserver

http://microsoft.com/net


http://microsoft.com/vstudio

http://blogengine.codeplex.com/Wiki/View.aspx?title=Installation


http://localhost/


3. Berikutnya buka Windows Explorer kemudian temukan lokasi C:\Inetpub\wwwroot1.

4. Lakukan ekstraksi berkas BlogEngine.NET 1.5 (web).zip arahkan ke lokasi yang dikemukakan

pada langkah tiga. Sebagai langkah opsional Anda juga dapat merename folder utama

BlogEngine.web menjadi folder sesuai dengan selera Anda. Pada buku ini digunakan nama Blog

5. Gunakan Windows Explorer untuk menelusuri berkas hasil ekstraksi dan lakukan penambahan

izin akses web. Dengan memilih folder Blog Properties Web Sharing

6. Pilih Share this folder dan biarkan opsi lain yang tampil pada dialog edit alias dalam kondisi

default

1 Lokasi ini bersifat opsional sebenarnya dimungkinkan pemasangan di lokasi manapun yang diizinkan. Pada

implementasinya lokasi penempatan menjadi hal yang esensial dan wajib disepakati antara IT administrator dan pengembang


7. Pada Folder Blog navigasikan explorer ke App_Data kemudian tambahkan permission untuk

Network Services akses tulis (write) dengan langkah-langkah sebagai berikut.

a. Matikan simple file sharing dengan tidak mencentang opsi simple file sharing di menu

Tools Folder Options View

b. Pilih folder App_Data, kemudian pilih Properties

c. Pada tab general uncheck opsi read-only, untuk mengubah seluruh folder dan berkas

dibawahnya dalam kondisi bias ditulis dan dibaca

d. Pilih tab Security, pilih tombol Add, temukan user dengan nama Network Services

e. Pada dialog utama tab security akan tampil user name dengan nama Network Service,

tambahkan opsi full control


f. Lakukan hal yang sama untuk user ASPNET.

g. Pilih Ok untuk menyimpan semua perubahan

8. Buka browser anda kemudian akses ke alamat http://localhost/Blog. Selamat kita telah bersama

sama memasang Blog Engine.

Langkah Konfigurasi BlogEngine

Pada tahap ini kita akan melakukan sedikit konfigurasi blogengine, konfigurasi ini ditujukan agar

BlogEngine yang sudah dipasang dapat sesuai dengan kebutuhan kita. Berikut adalah langkah

langkahnya

1. Pilih menu login kemudian masukkan username dan password Admin : admin

http://localhost/Blog


2. Pada BlogEngine versi 1.5 atau yang lebih baru , hampir setiap bagian dari komponen Blog

adalah widget atau komponen terpisah. Dengan kata lain, pengguna dapat dengan mudah

mengubah isinya tanpa harus ke menu administrator. Widget ditandai dengan adanya menu edit

pada bagian kanan dialog ybs.

3. Penguna yang berhasil login dapat merubah berbagai opsi di menu adminstrasi yang hanya akan

muncul pada saat pengguna login

4. Add Entry adalah menu yang digunakan Anda untuk melakukan blogging. Pada bagian ini hal

yang menarik adalah.

a. Setiap post memiliki halaman unik yang isinya dapat berupa elemen-elemen HTML yang

cukup kaya seperti smiley, dsb.

b. Dukungan upload image dan berkas ke ruang penyimpanan blog.

c. Pengklasifikasian blog berdasar kategori

d. Kata-kata kunci blog yang memudahkan pengguna menemukan POI (point of interest)

e. Slug , suatu mekanisme perapihan judul agar user friendly terhadap url browser

5. Blogroll adalah list daftar blog rekan rekan yang dapat diambil melalui RSS.


6. Controls adalah sekumpulan konfigurasi prilaku dari tampilan BlogEngine

7. Categories berisi sekumpulan kategori posting, pada skala yang serius bagian ini sangat penting

untuk melakukan klasifikasi data.

8. Pages berisi halaman yang memungkinkan kita membuat halaman statis pada antarmuka blog.

Halaman ini bermanfaat untuk menyimpan seperti static page, halaman awal, dan infomasi

statis lainnya

9. Referrers , halaman ini untuk melacak posting yang di acu oleh posting lain.

10. Setting, berisi sekumpulan konfigurasi utama blogengine. Bagian ini adalah salah atu hal yang

penting dan patut diubah seusai dengan kebutuhan.

a. Informasi dasar, seperti nama blog, dan sebagainya

b. Pola komentar pengunjung

c. Impor dan ekspor content dari blog lain.

d. Pola pengiriman dan penerimaan email

e. Konfigurasi lain lebih lanjut seperti kompresi, penelusuran, dsb.

11. Profiles, berisi sekumpulan informasi mendasar tentang pengguna. Profil ini bermanfaat untuk

mendeskripsikan pengguna


12. Users, berisi informasi pengelolaan users.Pada halaman ini pengguna dapat menambahkan

sekumpulan user yang berhak untuk mensubmisi dan melakukan posting blog.

13. Extensions, bagian ini adalah dukungan BlogEngine agar dapat dikembangkan lebih jauh sesuai

dengan kebutuhan dan kekayaan informasi yang dapat ditampilkan. Extension pada umumnya

melekat pada setiap blog post. Bagian ini bisa dikembangkan sendiri atau diperoleh dari pihak

pengembang extension Blog Engine. Sekumpulan extension yang telah dikembangkan dapat di

unduh secara gratis di http://www.codeplex.com/BlogEngineExtensions

Bagian Extension adalah hal yang menarik. Pada bagian berikutnya kita akan mencoba memasang

ekstension pada BlogEngine sehingga kemampuan BlogEngine menjadi lebih menarik.

Pemasangan Extension pada BlogEngine

Pada bagian ini kita akan memasangkan suatu extension pemutar video. Extension SilverLight video ini

memungkinkan kita memutar video yang kita simpan di suatu tempat. Untuk memahaminya ikuti

langkah-langkah sebagai berikut.

1. Siapkan berkas ekstensi yang sudah dikemas dalam zip. Pada kesempatan ini akan dipasangkan

berkas plugin video berbasis SilverLight (SilverLightPlayer.zip).

2. Letakkan berkas .cs di folder App_Code/Extension, dan letakkan folder yang bersangkutan ke

root web site

3. Berikutnya silahkan mengacu pada halaman Extension dan yakinkan SilverLightPlayer plugin

telah terpasang

http://www.codeplex.com/BlogEngineExtensions


4. Apabila sistem operasi kita adalah XP atau 2003 maka tambahkan MIME di iis dengan mengikuti

langkah-langkah sebagai berikut

a. Buka IIS manager

b. Klik kanan pada Default Web Site Properties

c. Pilih Tab HTTP Headers dan pilih Mime map

d. Pilih File Types, kemudian new type dan isikan informasi sebagai berikut

5. Untuk mengujinya mari kita mengupload sebuah video (berekstensi .wmv) ke dalam folder

SilverLightPlayer

6. Kemudian buat sebuah entry blog dan tambahkan sintaksis Silverlight sebagai berikut

[Silverlight:namavideo.wmv]


7. Simpan Post dan akan tampak hasilnya sebagai berikut


Blog Engine Skin Development

Berbagai teknik dasar pembuatan theme blog engine dan juga pengembangannya

Sekilas Tentang Cascade Stylesheet

Style Sheets merupakan feature yang sangat penting dalam membuatDynamic HTML.

Meskipunbukan merupakan suatu keharusan dalammembuat web, akan tetapi penggunaan style sheets

merupakan kelebihantersendiri.Suatu style sheet merupakan tempat dimana anda mengontrol

danmemanage style-style yang ada. Style sheet mendeskripsikan bagaimana tampilan document HTML

di layar. Anda juga bias menyebutnya sebagaitemplate dari documents HTML yang menggunakanya.

Anda juga bisa membuat efek-efek sepesial di web anda denganmenggunakan style sheet.

Sebagai contoh anda bisa membuat style sheetyang mendefinisikan style untuk <H1> dengan style bold

dan italic danberwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warnakuning dan

menggunakan font verdana dan masih banyak lagi yang bisaanda lakukan dengan style sheet.Secara

teoritis anda bisa menggunakan style sheet technology dengan HTML.Akan tetapi pada prakteknya

hanya Cascading Style Sheet (CSS) technologyyang support pada hampir semua web Browser. Karena

CSS telah disetandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan diweb browser.

A. Inline Styles

Ada dua cara untuk merubah style dari web page anda yaitu dengan :

Merubah inline style

Menulis script untuk merubah style anda.

Dengan meggunakan inline style anda dapat membuat dynamic style tanpa harus Penambahkan

script ke web anda. Inline styles merupakan style yang bisa kita pasang pada element web

tertentu saja.

Contoh:

Jika anda ingin menambahkan style pada <H1> dengan warna merah,


anda harus mengeset attribut STYLE dari tag <H1>.

B. Menulis Script CSS

Metode kedua ini masih bisa dibagi lagi menjadi 2 yaitu menulis script dalam 1 halaman HTML

yang sama dan menulis CSS di file terpisah.

1. Menulis Script CSS di HTML Page

Caranya sangat mudah yaitu dengan menuliskan semua script CSS di dalam kurungan tag

<Script type=”stylesheet” language=”text/css”>

.... tulis CSS mu disini

</Script>

2. Menulis Script di File CSS terpisah

Solusi kedua ini lebih elegan untuk dilakukan karena membuat code CSS yang kita buat

lebih mudah dimanage. File css biasanya berekstensi “.css” dan yang kita lakukan di

halaman HTML yang menconsume CSS tersebut adalah menuliskan

<link href=”..{letak file css anda}..” rel=”stylesheet”/>

Customisasi Blog Engine Theme

Customization akan berdasarkan existing theme yaitu “Theme-CuriouslyGreen1.2” , kita akan

ubah menjadi “MIC-Generik” ,theme pada awalnya akan nampak seperti ini :

dan hasil akhir dari customization kita adalah seperti snapshot berikut:


Langkah-langkah yang harus anda lakukan adalah sebagai berikut :

1. Buat folder baru di bawah folder “Theme” , beri nama “MIC-Generik”

2. Select semua isi di dalam folder theme “ Couriousity Green” dan paste ke dalam folder

“MIC-generik” yang baru dibuat

3. Buka master page “site.master” , dan CSS file “default.css” dengan klik ganda pada

keduanya.seharusnya kini ada 2 tab baru terbuka di IDE anda


4. Sebelum mulai mengoprek “default.css” , copylah semua image asset yang diperlukan ,

dengan cukup menekan CTRL+A kemudian CRTL+C di dalam folder “MIC-GENERIC”

Dan paste semua isi folder tersebut ke dalam folder “images” dibawah folder theme “MIC-

Generic”.sehingga akan nampak seperti ini :

5. Kemudian fokuskan perhatian anda ke CSS file “default.css” karena disini kita akan

melakukan banyak hal , perhatikan bagian selector #header , ubahlah menjadi :

#header

{

width: 100%;

height: 81px;

background-color: #4d4d4d;

background: url('images/banner.jpg')repeat-x;

color: #ffffff;

}

6. Untuk menambahkan logo “microsoft Innovation center “ , Ubah selector id Slogan

(“#slogan”) menjadi :

#slogan

{

width:234px;

height:25px;

background:transparenturl('images/mic.png')no-repeat;

position: absolute;

left: 30px;

bottom: 50px;

color: #DADADA;

text-transform: lowercase;

font-size: 13px;

}

7. Untuk membentuk main image seperti pada snapshot

Anda dapat menambahkan 2 selector CSS baru sebegai berikut :

#mainimage

{

background:whiteurl('images/mainimage.jpg')repeat-x;

width:100%;

height:318px;

margin-top:0px;

}

#mainimage.img

{

width:1000px;

height:318px;

margin:auto;

background:transparenturl('images/image.png')no-repeat;

}

8. CSS tersebut tidak akan tertampil seketika , anda harus menambahkan HTML tag ke dalam

site.master yang sudah kita buka sebelumnya,yang perlu anda perhatikan adalah bagian

yang “dikurung” tag “header” , anda harus melakukan komen di beberapa bagian seperti di

bawah ini :

<divid="header">

<divid="header_inner">



<divid="slogan"></div>

</div>

</div>

image utama bagian lain yang perlu diperhatikan adalah setelah tag “header” selesai , kita

harus menambahkan HTML tag baru yang belum ada sebelumnya untuk menampilkan

image utama ,

<divid="mainimage">

<divclass="img">

</div>

</div>

<divid="uppermenus"></div>


9. Bagian header dan image utama telah terselesaikan , kini saatnya kita beralih ke bagian

menu , kita akan mengubah tampilan hyperlink pada saat hover , untuk itu perhatikan

bagian #menu a:hover

#menua:hover

{

background: inherit;

color: #8d8d8d;

background: transparenturl('images/a.png')repeat-x;

}

10. Kini kita beralih ke widget , widget merupakan komponen di sebelah kiri page yang akan

memuat bagian seperti tagcloud dan categories , widget pada dasarnya adalah sebuah

usercontrol. Yang akan kita ubah adaah bagian headernya saja , kita akan memberi sentuhan

rounded background untuk memberi kesan dinamis

h3

{

margin-top: 30px;

color:White;

font-size: 15px;


height: 34px;

width:185px;

background: url('images/headlcontent.png')no-repeat;

}

11. Kini kita beralih ke bagian terpenting , yaitu right column dimana didalamnya akan termuat

semua isi blog post kita ,

Yang kita lakukan adalah mengubah CSS untuk mengubah warna background blog post

anda, perhatikan selector “#rcol” , selector ini menghandel ukuran , posisi dan background

yang akan mempercantik tampilan post kita.

#rcol

{

position: relative;

margin-left: 25px;

width: 700px;

background:whiteurl('images/Post.png')no-repeat;

float:left;


}

12. Kini saatnya mengubah warna header/judul Blog post kita Dari awalnya

Menjadi

Dengan mengubah CSS pada bagian

.posth1

{

margin-top: -16px;

margin-bottom:20px;

color: #ffffff;

font-size: 21px;


min-height: 34px;}

.posth1span

{

color: #8feafd;

}

.posth1a

{

margin-top:0px;

text-decoration: none;

color: white;

}

13. sampai sejauh ini sebenarnya kita telah berhasil mengkostumisasi komponen primer dari

sebuah blog, yaitu bagian menu , widgets dan post, namun untuk melengkapi tampilan

sesuai secreenshot , kita akan menambahkan 1 kolom lagi di bagian paling kanan untuk

menampung logo-logo , logo-logo yang dimasukkan disini adalah logo partner Microsoft

Innovation center seperti MSR (microsoft research), untuk keperluan tersebut kita akan buat

terlebih dahulu kolomnya, silakan buat CSS berikut ( CSS ini baru dan belum ada sebelumnya

) kita beri nama selector tersebut #logocol

#logocol

{

position: relative;

margin-left: 20px;

width: 150px;

float:left;

}


14. kini kita telah punya main container dari logo-logo yang akan kita masukkan , kini kita akan

buat selector untuk masing-masing logo,

#logocol.MSR

{

width:150px;

height:75px;

background:transparenturl('images/MSR.png')no-repeat;

margin-top:10px;

}

#logocol.MICID

{

margin-top:10px;

width:150px;

height:75px;

background:transparenturl('images/MICindo.png')no-repeat;

}

15. selector tersebut belum askan serta merta tertampil , kita harus menambahkan HTML script

terlebih dulu, buka site.master dan tambahkan kode berikut pada lokasi seprti gambar

Kode nya adalah

<divid="logocol">

<divclass="MSR"></div>

<divclass="MICID"></div>

</div>

16. kini semua komponen telah lengkap sudah dan kita telah memiliki halaman blog engine

yang beda dari lainnya, dan sebagai info sampai sata ini belum ada theme yang seperti anda

buat pada session hari ini.

Ke depan anda dapat mengedit aset yang ada sehingga theme yang baru saja kita buat lebih

fit dengan kebutuhan anda.


Blog Engine Extension Development

Berbagai teknik dasar pengembangan extension blog engine

Ekstensibilitas di BlogEngine

Salah satu kelebihan dari aplikasi BlogEngine adalah sifatnya yang ekstensible sehingga anda dapat

menambahkan fungsi/fitur baru dengan relatif mudah.

Ada dua macam fitur yang dapat anda tambahkan pada aplikasi BlogEngine anda yatu extensions dan

widget.

Extension adalah sekumpulan class dengan attribut khusus yang dapat digunakan untuk menambahkan

fungsionalitas dan melakukan modifikasi pada aplikasi BlogEngine anda.

Widget adalah spesial kontrol yang dapat anda tambahkan kedalam sidebar, fungsinya sama dengan

Webpart control pada ASP.NET. Widget dapat dipindah posisinya dengan cara menggeser widget

tersebut kedalam area khusus yang sudah disediakan.

BlogEngine sendiri juga sudah menyediakan banyak extension dan widget yang dapat anda gunakan,

anda dapat mendownload extension tersebut pada alamat :

http://www.dotnetblogengine.net/page/extensions.aspx

Anda juga dapat mengembangkan extensions dan widget sesuai dengan keinginan dan kebutuhan anda.

Pada Modul ini akan dibahas beberapa topik yaitu:

Menambahkan Extensions pada BlogEngine

Membuat Extensions sederhana

Menambahkan Widget pada Blogengine

Membuat Widget sederhana

Extensions Manager

BlogEngine sudah menyediakan beberapa extension bawaan yang dapat anda gunakan. Anda dapat

melihat extensions yang terpasang pada aplikasi anda dengan cara : Login sebagai administrator →

kemudian pilih menu ‘extensions’ pada menu ‘Administration’.

http://www.dotnetblogengine.net/page/extensions.aspx


Maka akan terbuka tampilan Extension Manager yang menampilkan seluruh daftar extensions yang

terpasang pada aplikasi anda.

Pada daftar diatas terdapat beberapa extensions bawaan contohnya:

Smiles : digunakan untuk mengkonversi karakter ascii tertentu menjadi gambar smiles pada saat

pengguna memberikan komentar.

BreakPost : digunakan untuk memecah posting ketika ditemukan tag [more].

SendCommentMail : secara otomatis mengirimkan email ke pemilik blog ketika ada pengguna

yang memberi komentar.

Membuat Extension Sederhana

Ada beberapa tahapan yang harus dilakukan untuk membuat extension baru pada BlogEngine yaitu:

Buat class baru yang mempunyai attribute ‘Extension()’ yang berisi nama extension, versi dan

nama pembuat.

Tambahkan namespace BlogEngine.Core dan BlogEngine.Core.Web.Controls.

Tambahkan fungsionalitas yang anda inginkan kedalam class tersebut. Anda dapat

menambahkan fungsionalitas pada event-event tertentu yang sudah disediakan.

Setelah selesai copykan class tersebut kedalam folder ‘App_Code\Extensions’.

Lihat pada Extensions Manager apakah extension yang anda buat sudah terdaftar.

Beberapa event yang dapat anda tambahkan fungsionalitasnya adalah :


Event yang berkaitan dengan posting blog anda:

Post.AddingComment

Post.CommentAdded

Post.RemovingComment

Post.CommentRemoved

Post.Rated

Post.Saving

Post.Saved

Event yang berkaitan dengan komentar (comment) :

Comment.Approving

Comment.Approved

Comment.Serving

Event yang berkaitan dengan halaman (page) :

Page.Saving

Page.Saved

Sebagai contoh kita akan membuat sebuah extension sederhana yang digunakan untuk mengubah font

pada tampilan posting blog anda. langkah-langkahnya sebagai berikut:

1. Buat class baru dengan nama ‘MySimpleExtension.cs’ pada folder ‘App_Code\Extensions’.

2. Tambahkan dua namespace BlogEngine.Core dan BlogEngine.Core.Web.Controls.

using BlogEngine.Core;

using BlogEngine.Core.Web.Controls;

3. Beri atribut ‘Extension’ pada class untuk menandai bahwa class tersebut adalah extension.

Atribut ‘Extension’ mempunyai tiga parameter yaitu nama extension, versi, dan nama pembuat.

[Extension("My Simple Extension","v 1.0","Erick")]

public class MySimpleExtension{}

4. Kemudian tambahkan method pada event Post.Serving. Event Post.Serving terjadi ketika posting

ditampilkan.

public class MySimpleExtension

{

public MySimpleExtension()

{

Post.Serving+=new EventHandler<ServingEventArgs>(Post_Serving);

}

private void Post_Serving(object sender, ServingEventArgs e)

{


e.Body = e.Body.ToUpper();

}

}

5. Kemudian masuk pada menu Admin → Extensions, lihat pada extensions manager, maka anda

akan dapat melihat extension yang baru saja anda buat.

6. Coba tambahkan posting baru dengan menggunakan huruf kecil semua, maka ketika posting

tersebut ditampilkan hurufnya akan diformat menjadi huruf kapital semua.

Extension Setting Jika anda ingin menyimpan setting dari extension yang anda buat, anda dapat menggunakan object

ExtensionSettings. Untuk mencoba menggunakan object ini, lanjutkan aplikasi yang sudah anda buat

diatas.

1. Tambahkan object ExtensionSetting, dan buat method InitSetting seperti pada kode dibawah ini:

[Extension("My Simple Extension","v 1.0","Erick")]

public class MySimpleExtension

{

protected static ExtensionSettings _setting = null;

public MySimpleExtension()

{

Post.Serving+=new EventHandler<ServingEventArgs>(Post_Serving);

InitSetting();

}

private void Post_Serving(object sender, ServingEventArgs e)

{

if (_setting.GetSingleValue("Case") == "Upper")

e.Body = e.Body.ToUpper();

else

e.Body = e.Body.ToLower();

}

private void InitSetting()

{

ExtensionSettings settings = new ExtensionSettings(this);


settings.IsScalar = true;

settings.AddParameter("Case");

settings.AddValue("Case","Upper");

_setting = ExtensionManager.InitSettings("MySimpleExtension", settings);

}

}

2. Untuk merubah nilai parameter ‘Case’ pada ExtensionSettings buka extensions manager

kemudian klik edit.

3. Ubah nilainya dari ‘Upper’ menjadi ‘Lower’, maka secara otomatis semua isi posting blog anda

akan dikonversi menjadi huruf kecil.

Menambahkan JQuery Extension Ada beberapa extension tambahan yang menggunakan library JQuery (Javascript Framework) untuk

menambahkan interaktifitas yang menarik. Contoh ekstension yang menggunakan library JQuery

tersebut adalah PrettyPicture.

PrettyPicture adalah salah satu JQuery plugin yang digunakan untuk menampilkan gambar secara

interaktif. Pada contoh dibawah ini kita akan menambahkan extensions baru yang menggunakan plugin

PrettyPicture JQuery. Pada contoh dibawah ini kita akan menggunakan JQuery versi 1.3.2

1. Tambahkan folder JQuery yang berisi file jquery-1.3.2.min kedalam root folder aplikasi

BlogEngine anda.

2. Tambahkan file ‘JQuery.cs’ kedalam folder ‘App_Code\Extensions’.

3. Tambahkan juga folder ‘prettyPhoto’ kedalam root folder aplikasi BlogEngine anda.

4. Tambahkan file ‘PrettyPhoto.cs’ kedalam folder ‘App_Code\Extensions’.

5. Sekarang anda sudah dapat menggunakan fitur ini untuk menampilkan album photo pada

aplikasi anda. Caranya tambahkan rel="prettyphoto" pada tag <a href></a> ketika anda

menambahkan picture pada posting anda. Misalnya :


<p><a title="Photo" rel="prettyphoto"

href="/BlogEngine/image.axd?picture=2009%2f10%2fPenguins.jpg"><img

src="/BlogEngine/image.axd?picture=2009%2f10%2fPenguins.jpg" alt="" width="200"

height="200" /></a></p>

Menambahkan Widget Selain extensions, BlogEngine juga memiliki widget. Widget adalah spesial kontrol yang dapat anda

tambahkan kedalam sidebar, fungsinya sama dengan Webpart control pada ASP.NET. Widget dapat

dipindah posisinya dengan cara menggeser widget tersebut kedalam area khusus yang sudah

disediakan.

BlogEngine sudah menyediakan beberapa widget bawaan yang dapat digunakan, misalnya: Tag Cloud,

Month List, Most Comment, Newsletter, dan masih banyak lagi. Anda dapat menambahkan widget

dengan memilih dari menu widget yang berada pada pojok kanan bawah dari halaman administrator.

Pilih salah satu widget yang ingin anda gunakan, kemudian tekan tombol ‘Add’ untuk menambahkan

widget ke dalam halaman. Anda dapat melakukan pengaturan layout dengan cara drag n drop.


Membuat Widget Sederhana Pada contoh dibawah ini akan dibuat widget sederhana yang akan menampilkan daftar link dari situs

favorite anda.

Untuk membuat widget minimal anda harus memiliki sebuah file berupa asp.net web user control yaitu

widget.ascx. Agar dapat digunakan sebagai widget anda harus menurunkan file .ascx tersebut dari

abstract class ‘WidgetBase’ yang terdapat pada namespace ‘BlogEngine.Core’.

Langkah pembuatan widget:

1. Buat folder dengan nama ‘MyWidget’ pada folder ‘widgets’.

2. Pada folder ‘MyWidget’ tambahkan file baru dengan nama widget.ascx, tambahkan kode

berikut:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="widget.ascx.cs"

Inherits="widgets_MyWidget_widget" %>

<asp:Repeater ID="rptUrl" runat="server">

<ItemTemplate>

<a href='<%# Eval("Url") %>'><%# Eval("Domain") %></a><br />

</ItemTemplate>

</asp:Repeater>

3. Pada file widget.ascx.cs tambahkan kode berikut:

public partial class widgets_MyWidget_widget : WidgetBase {

public override string Name

{

get { return "MyWidget"; }

}

public override bool IsEditable

{

get { return false; }

}

public override void LoadWidget()

{

List<DaftarLink> lstUrl = new List<DaftarLink>();

DaftarLink objUrl1 = new DaftarLink();

objUrl1.Domain = "MUGI";

objUrl1.Url = "www.mugi.or.id";

lstUrl.Add(objUrl1);


objUrl2.Domain = "INDC";


objUrl2.Url = "www.geeks.netindonesia.net";



objUrl3.Domain = "WSS-ID";

objUrl3.Url = "www.wss-id.org";


rptUrl.DataSource = lstUrl;

rptUrl.DataBind();

}

}

class DaftarLink

{

private string _domain;

private string _url;

public string Domain

{

get { return _domain; }

set{ _domain = value;}

}

public string Url

{

get{ return _url;}

set { _url = value; }

}

}

4. Property Name, property IsEditable, dan method LoadWidget() adalah abstact method yang

terdapat pada class WidgetBase dan harus diimplementasikan ketika anda membuat widget.

5. Tampilan dari widget yang anda buat adalah sebagai berikut:


Membuat Widget Untuk Menampilkan Koleksi Buku Pada contoh kali ini kita akan mencoba membuat widget yang digunakan untuk menampilkan gambar

dari koleksi buku yang kita miliki, gambar akan diambil dari website amazon berdasarkan kode isbn dari

buku. Data-data buku yang kita miliki akan disimpan kedalam file xml.

Untuk membuat aplikasi ini anda membutuhkan dua web user control yaitu widget.aspx untuk

menampilkan daftar buku dan edit.aspx untuk memanipulasi data buku. Langkah pembuatan widget ini

sebagai berikut:

1. Buat folder dengan nama ‘Koleksi’, kemudian tambahkan web user control dengan nama

‘widget.aspx’. tambahkan kode berikut:

<style type="text/css">

.bookEntry {

float: left;

padding: 3px;

background-color:#ABCEE1;

margin: 0 10px 10px 0 ;

}

.bookEntry a {

padding:0;

margin: 0;

display:inline;

}

.bookEntry a img {

width: 75px;

height: 110px;

padding:0;

margin:0;

display:inline;

}

</style>

<asp:Repeater ID="rptBooks" runat="server">

<ItemTemplate>

<div class="bookEntry">

<a href="http://www.amazon.com/exec/obidos/ASIN/<%# Eval("Isbn")%>"

title="<%# Eval("Title")%> by <%# Eval("Author")%>" >

<img src="http://images.amazon.com/images/P/<%#

Eval("Isbn")%>.01.TZZZZZZZ.jpg" alt="<%# Eval("Title")%> by <%# Eval("Author")%>" />

</a>

</div>

</ItemTemplate>

</asp:Repeater>

2. Kemudian tambahkan pula kode untuk membaca file xml untuk ditampilkan kedalam repeater

control sebagai berikut:


using System.Text;

using System.Xml;

using System.Globalization;

using BlogEngine.Core;

using System.Collections.Specialized;

using System.Web.Security;

public partial class widgets_Koleksi_widget : WidgetBase {

public override string Name {

get { return "Koleksi"; }

}

public override bool IsEditable {

get { return true; }

}

public override void LoadWidget() {

string cacheKey = "koleksi";

if (Cache[cacheKey] == null) {

BuildList();

}

rptBooks.DataSource = Cache[cacheKey];

rptBooks.DataBind();

}

private void BuildList() {

StringDictionary settings = GetSettings();

XmlDocument doc = new XmlDocument();

if (settings["content"] != null) {

doc.InnerXml = settings["content"];

XmlNodeList booksXml = doc.SelectNodes("//book");

if (booksXml != null) {

if (booksXml.Count > 0) {

List<Book> books = new List<Book>();

foreach (XmlNode node in booksXml) {

Book book = new Book();

if (node.Attributes["title"] != null) {

book.Title = node.Attributes["title"].InnerText;

}

if (node.Attributes["isbn"] != null) {

book.Isbn = node.Attributes["isbn"].InnerText;

}

if (node.Attributes["author"] != null) {

book.Author = node.Attributes["author"].InnerText;

}

books.Add(book);

}

Cache.Insert("koleksi", books);

}


}

}

}

}

3. Buat class ‘Book’ untuk representasi data yang anda ambil dari dokumen xml agar dapat di

binding kedalam GridView control.

public class Book {

private string m_isbn;

private string m_title;

private string m_author;

public string Isbn {

get { return m_isbn; }

set { m_isbn = value; }

}

public string Title {

get { return m_title; }

set { m_title = value; }

}

public string Author {

get { return m_author; }

set { m_author = value; }

}

}

4. Kemudian untuk memanipulasi datanya (insert, update, delete) tambahkan web user control

dengan nama ‘edit.ascx’. Tambahkan kode berikut:

<fieldset>

<legend>Tambah Buku</legend>

<label for="<%=txtIsbn.ClientID %>">Isbn</label><br />

<asp:TextBox runat="server" ID="txtIsbn" Width="250px" /><br /><br />

<label for="<%=txtTitle.ClientID %>"><%=Resources.labels.title %></label><br />

<asp:TextBox runat="server" ID="txtTitle" Width="250px" />

<br /><br />

<label for="<%=txtAuthor.ClientID %>">Author</label><br />

<asp:TextBox runat="server" ID="txtAuthor" Width="250px" Text="" />

<asp:Button runat="server" ID="btnAdd" Text="Add book" />

</fieldset>

<asp:GridView runat="server" ID="grid" CellPadding="2"

Width="100%"

AutoGenerateColumns="False"

AlternatingRowStyle-BackColor="#F1F1F1"

AutoGenerateDeleteButton="True"

AutoGenerateEditButton="True">


<HeaderStyle HorizontalAlign="left" />

<Columns>

<asp:TemplateField HeaderText="Isbn">

<ItemTemplate>

<%# Eval("Isbn") %>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtIsbn" Width="90%" Text='<%# Eval("Isbn") %>'

/>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="<%$ Resources:labels, title %>">

<ItemTemplate>

<%# Eval("Title") %>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtTitle" Width="90%" Text='<%# Eval("Title")

%>' />

</EditItemTemplate>


<asp:TemplateField HeaderText="Author">

<ItemTemplate>

<%# Eval("Author")%>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtAuthor" Width="90%" Text='<%# Eval("Author")

%>' />

</EditItemTemplate>


</Columns>

</asp:GridView>

5. Tambahkan juga kode untuk menambahkan , mengupdate, dan delete data kedalam file xml.

using System.Data;

using System.Web.UI.WebControls;

using System.Xml;

using System.Collections.Specialized;

public partial class widgets_Koleksi_edit : WidgetEditBase {

protected void Page_Load(object sender, EventArgs e) {

if (!Page.IsPostBack) {

BindGrid();

}


grid.RowEditing += new GridViewEditEventHandler(grid_RowEditing);

grid.RowUpdating += new GridViewUpdateEventHandler(grid_RowUpdating);

grid.RowCancelingEdit += delegate { grid.EditIndex = -1; };

grid.RowDeleting += new GridViewDeleteEventHandler(grid_RowDeleting);

btnAdd.Click += new EventHandler(btnAdd_Click);

}

private void btnAdd_Click(object sender, EventArgs e) {

XmlDocument doc = Doc();

XmlNode books = doc.SelectSingleNode("books");

if (books == null) {

books = doc.CreateElement("books");

doc.AppendChild(books);

}

XmlNode book = doc.CreateElement("book");

XmlAttribute id = doc.CreateAttribute("id");

id.InnerText = Guid.NewGuid().ToString();

book.Attributes.Append(id);

XmlAttribute isbn = doc.CreateAttribute("isbn");

isbn.InnerText = txtIsbn.Text.Trim();

book.Attributes.Append(isbn);

XmlAttribute title = doc.CreateAttribute("title");

title.InnerText = txtTitle.Text.Trim();

book.Attributes.Append(title);

XmlAttribute author = doc.CreateAttribute("author");

author.InnerText = txtAuthor.Text.Trim();

book.Attributes.Append(author);

books.AppendChild(book);

Save(doc);

BindGrid();

Cache.Remove("koleksi");

}

private void Save(XmlDocument doc) {

StringDictionary setting = GetSettings();

setting["content"] = doc.InnerXml;

SaveSettings(setting);

}


private XmlDocument Doc() {

StringDictionary setting = GetSettings();

XmlDocument doc = new XmlDocument();

if (setting["content"] != null)

doc.InnerXml = setting["content"];

return doc;

}

private void grid_RowDeleting(object sender, GridViewDeleteEventArgs e) {


string id = (string)grid.DataKeys[e.RowIndex].Value;

XmlNode node = doc.SelectSingleNode("//book[@id\"" + id + "\"]");

if (node != null) {

node.ParentNode.RemoveChild(node);

Save(doc);

BindGrid();


}

}

private void grid_RowUpdating(object sender, GridViewUpdateEventArgs e) {


string id = (string)grid.DataKeys[e.RowIndex].Value;

TextBox textBoxIsbn = (TextBox)grid.Rows[e.RowIndex].FindControl("txtIsbn");

TextBox textBoxTitle =

(TextBox)grid.Rows[e.RowIndex].FindControl("txtTitle");

TextBox textBoxAuthor =

(TextBox)grid.Rows[e.RowIndex].FindControl("txtAuthor");

XmlNode node = doc.SelectSingleNode("//book[@id=\"" + id + "\"]");

if (node != null) {

node.Attributes["isbn"].InnerText = textBoxIsbn.Text;

node.Attributes["title"].InnerText = textBoxTitle.Text;

node.Attributes["author"].InnerText = textBoxAuthor.Text;

grid.EditIndex = -1;

Save(doc);

BindGrid();


}

}

private void grid_RowEditing(object sender, GridViewEditEventArgs e) {

grid.EditIndex = e.NewEditIndex;

BindGrid();

}

private void BindGrid() {


XmlNodeList list = doc.SelectNodes("//book");


if (list != null) {

if (list.Count > 0) {

using (XmlTextReader reader = new XmlTextReader(doc.OuterXml,

XmlNodeType.Document, null)) {

DataSet ds = new DataSet();

ds.ReadXml(reader);

grid.DataSource = ds;

grid.DataKeyNames = new string[] { "id" };

grid.DataBind();

ds.Dispose();

}

}

}

}

public override void Save() {


}

}

6. Pilih widget yang barusan anda buat, kemudian klik edit pada widget untuk menambahkan data

buku yang baru. Tampilan dari widget yang barusan anda buat adalah sebagai berikut:

BlogEngine-JustCodeIt

Documents

Transcript of BlogEngine-JustCodeIt