{"id":1188,"date":"2014-03-11T07:47:55","date_gmt":"2014-03-11T07:47:55","guid":{"rendered":"http:\/\/blog.jaringanhosting.com\/?p=1188"},"modified":"2014-03-11T08:05:09","modified_gmt":"2014-03-11T08:05:09","slug":"asp-net-4-5-1-hosting-cara-membuat-gallery-gambar-sederhana-dengan-menggunakan-repeater-control-dan-jquery-pada-asp-net","status":"publish","type":"post","link":"https:\/\/blog.jaringanhosting.com\/index.php\/asp-net-4-5-1-hosting-cara-membuat-gallery-gambar-sederhana-dengan-menggunakan-repeater-control-dan-jquery-pada-asp-net\/","title":{"rendered":"ASP.NET 4.5.1 Hosting :: Cara Membuat Galeri Gambar Sederhana dengan Menggunakan Repeater Control dan Jquery pada ASP.NET"},"content":{"rendered":"

Dalam posting ini saya akan menjelaskan bagaimana membuat galeri gambar sederhana menggunakan kontrol repeater & jquery di ASP.NET<\/a>
\nLangkah – 1: create new project.
\nBuka file> new> project> pilih web ASP.NET aplikasi> entri nama aplikasi> klik ok.<\/p>\n

\"banner-jarhost-square\"<\/a>
\nLangkah-2: add a folder untuk store image thumbnail.
\nBuka solution explorer> klik kanan pada solution explorer> add> folder baru> masukkan nama folder
\nLangkah-3: tambahkan sebuah folder untuk store image big.
\nBuka database> klik kanan pada table> add new table> tambah kolom> simpan> masukkan nama table> ok.
\nLangkah-4: add a webpage dan desain untuk sample image gallery
\nBuka solution explorer> klik kanan pada bentuk nama project solution explorer> add> new item> pilih bentuk formulir web \/ web menggunakan halaman master di bawah web> masukkan nama halaman> add.<\/p>\n

Kode HTML
\n<\/strong><<\/code>h3<\/code>>ASP.NET Simple Image Gallery<\/<\/code>h3<\/code>>
\n<\/code><\/em><<\/code>table<\/code> border<\/code>=<\/code>\"0\"<\/code> cellpadding<\/code>=<\/code>\"0\"<\/code> cellspacing<\/code>=<\/code>\"0\"<\/code> width<\/code>=<\/code>\"100%\"<\/code>>
\n<\/code><\/em><<\/code>tr<\/code>>
\n<\/code><\/em><<\/code>td<\/code> width<\/code>=<\/code>\"150px\"<\/code> valign<\/code>=<\/code>\"top\"<\/code> align<\/code>=<\/code>\"center\"<\/code> style<\/code>=<\/code>\"border-right:3px solid #EEEEEE\"<\/code>>
\n<\/code><\/em><<\/code>div<\/code> id<\/code>=<\/code>\"ImageGallery\"<\/code> style<\/code>=<\/code>\"overflow:auto; height:350px; width:130px; display:inline-block;\"<\/code>><\/code><\/em><<\/code>asp:Repeater<\/code> ID<\/code>=<\/code>\"Repeater1\"<\/code> runat<\/code>=<\/code>\"server\"<\/code>>
\n<\/code><\/em><<\/code>ItemTemplate<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><<\/code>img<\/code> src='Thumbnail\/<%#Eval(\"FileName\") %>' alt='<%#Eval(\"FileName\") %>' width=\"100px\" style=\"cursor:pointer\" \/>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/<\/code>ItemTemplate<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/<\/code>asp:Repeater<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/<\/code>div<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/<\/code>td<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><<\/code>td<\/code>\u00a0valign<\/code>=<\/code>\"top\"<\/code>\u00a0align<\/code>=<\/code>\"center\"<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><<\/code>img<\/code>\u00a0id<\/code>=<\/code>\"bigImage\"<\/code>\u00a0alt<\/code>=<\/code>\"\"<\/code>\u00a0\/>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/<\/code>td<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/<\/code>tr<\/code>>
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/<\/code>table<\/code>><\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/p>\n

Langkah-5: tulis kode jquery<\/strong> berikut untuk image gallery sederhana.
\n<script src=<\/code>\"Scripts\/jquery-1.7.1.js\"<\/code>><\/script>
\n<\/code><\/em><script language=<\/code>\"javascript\"<\/code> type=<\/code>\"text\/javascript\"<\/code>>
\n<\/code><\/em>$(document).ready(<\/code>function<\/code> () {
\n<\/code><\/em>$(<\/code>'#ImageGallery img'<\/code>).click(<\/code>function<\/code> () {<\/code><\/em><\/em><\/div>\n
<\/code><\/em><\/em><\/em><\/em><\/em>var<\/code> bigImagePath = <\/code>'Images\/'<\/code> + $(<\/code>this<\/code>).attr(<\/code>'alt'<\/code>);
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em>$(<\/code>'#bigImage'<\/code>).attr(<\/code>'src'<\/code>, bigImagePath);<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em>});<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em>});
\n<\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/script><\/code><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/em><\/div>\n

Langkah-6: tulis kode berikut dalam page_load event<\/strong> untuk loading gambar thumbnail.
\nprotected<\/code> void<\/code> Page_Load(<\/code>object<\/code> sender, EventArgs e)<\/code><\/em>{
\n<\/code><\/em>if<\/code> (!IsPostBack)<\/code><\/em>{
\n<\/code><\/em>PopulateImages();<\/code><\/em>}<\/code><\/em>}<\/code><\/em><\/em><\/em><\/em><\/p>\n

Berikut adalah fungsinya …
\nprivate<\/code> void<\/code> PopulateImages()<\/code><\/em>{
\n<\/code><\/em>List<MyImages> myImages = <\/code>new<\/code> List<MyImages>();
\n<\/code><\/em>DirectoryInfo DI = <\/code>new<\/code> DirectoryInfo(Server.MapPath(<\/code>\"~\/Thumbnail\"<\/code>));
\n<\/code><\/em>foreach<\/code> (var file <\/code>in<\/code> DI.GetFiles())<\/code><\/em>{
\n<\/code><\/em>myImages.Add(<\/code>new<\/code> MyImages { FileName = file.Name });<\/code><\/em>}
\n<\/code><\/em>Repeater1.DataSource = myImages;
\n<\/code><\/em>Repeater1.DataBind();<\/code><\/em>}<\/code><\/em><\/em><\/em><\/em><\/p>\n

Langkah-7: jalankan aplikasi.<\/p>\n","protected":false},"excerpt":{"rendered":"

Dalam posting ini saya akan menjelaskan bagaimana membuat galeri gambar sederhana menggunakan kontrol repeater & jquery di ASP.NET Langkah – 1: create new project. Buka file> new> project> pilih web ASP.NET aplikasi> entri nama aplikasi> klik ok. Langkah-2: add a<\/p>\n","protected":false},"author":2505,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/1188"}],"collection":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/users\/2505"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/comments?post=1188"}],"version-history":[{"count":0,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/1188\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/media?parent=1188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/categories?post=1188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/tags?post=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}