Welcome To My Blog

Tempat Berbagi Ilmu Teknik Informatika. Semoga bermanfaat!

Rabu, 26 Maret 2014

APA ITU JQUERY? Check this out!

JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.
jQuery merupakan library Javascript yang akan membuat aplikasi web yang kita buat menjadi lebih menarik, baik dari sisi user-interface, proses maupun interaktivitas. Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.
Merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.

Salah satu buku yang cukup lengkap membahas mengenai jQueryadalah buku yang berjudul "Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques". Buku setebal kurang lebih 350 halaman ini mengulas secara tuntas mengenai jQuery, dimulai dari kelebihan dan daya tarik jQuery itu sendiri, sampai teknik-teknik memanfaatkan jQuery yang disertai contoh-contoh sederhana.
Buku ini ditulis oleh Jonathan Chaffer dan Karl Swedberg yang terbit pertama kalinya tahun 2007 (setahun setelah jQuery dirilis). Jonathan Chaffer adalah Chief Technology Officer of Structure Interactive yang berlokasi di Michigan. Jonathan juga aktif sebagai bagian dari tim pengembang CMS open source yaitu Drupal. Sementara itu Karl Swedberg adalah seorang web developer di perusahaan yang sama dengan Jonathan yaitu Structure Interactive. Karl yang sebelum menjadi web developer adalah seorang guru bahasa Inggris, fokus dalam hal web-standard, semantic CSS, dan unobtrusive JavaScript.

Buku Learning jQuery isinya cukup mudah dipahami dan dapat menjadi referensi bagi para pemula maupun yang sudah mahir di bidang web development. Buku ini cocok untuk para designer web maupun programmer web.

Garis besar dari isi dari buku ini antara lain menjelaskan mengenai:
Sekilas tentang jQuery. Termasuk didalamnya dijelaskan mengenai kelebihan jQuery, dimana bisa mendapatkan jQuery dan contoh sederhana penerapan jQuery. Isinya secara singkat saya rangkum dalam artikel saya sebelumnya.Selectors. Di bagian kedua ini dijelaskan mengenai DOM (Document Object Model) dan CSS, serta bagaimana penggunaan jQuery dalam mengatur tampilan (CSS + jQuery). Bagian ini cocok dibaca bagi para web designer yang sudah terbiasa dengan CSS.

Events. Selanjutnya buku ini menjelaskan mengenai event-event yang didukung oleh jQuery. Event-event tersebut akan meningkatkan interaktivitas web dengan pengunjung. Tersedia juga contoh-contoh menarik di bab ini.

Effects. Pada bab 4 buku ini, dijelaskan mengenai teknik-teknik jQuery untuk mengatur efek tampilan halaman web, termasuk didalamnya animasi-animasi yang bisa dilakukan oleh jQuery. Diantara animasi yang sering digunakan adalah fading dan sliding. Contoh sederhananya dapat dilihat disini.

DOM Manipulation. Di bagian ini dipaparkan mengenai bagaimana memanipulasi sebagian isi halaman web melalui jQuery. Manipulasi dapat berupa penambahan, penggantian, maupun penghapusan bagian tertentu dari halaman.

AJAX. Bagaimana jika jQuerydigabungkan dengan konsep AJAX? Di bagian keenam ini dijelaskan mengenai hal tersebut. Secara default, jQuery mendukung dengan baik konsep AJAX, baik format data teks, XML, maupun JSON.

Table Manipulation. Manipulasi data dalam tabel seperti sorting, seleksi, paging dapat dilakukan dengan cukup mudah dengan jQuery. Penasaran? Silahkan pelajari pada bab ini mengenai manipulasi tabel.

Forms with Function. Bagian ini membahas mengenai manipulasi form inputan termasuk tampilan dan bagaimana melakukan validasi form ala jQuery.

Shufflers and Rotators. Manipulasi images seperti untuk membuat galery foto dipaparkan di bagian ini.

Plugins. Bagian terakhir dari buku ini membahas mengenai plugin, yang merupakan salah satu kemampuan jQuery yang luar biasa. Disini diberikan beberapa plugin jQuery yang banyak digunakan serta dijelaskan juga mengenai bagaimana membuat plugin sendiri.


jQuery dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

Semoga Bermanfaat Buat Sobat.

Rabu, 12 Maret 2014

Sekilas tentang microsoft visual studio for windows phone

Kali ini saya akan menjelaskan tentang microsoft visual studio, Nah Microsoft  visual studio ini merupakan sebuah Software yang di referensikan bagi kalangan Developer windows, karena dapat digunakan untuk melakukan pengembangan suatu aplikasi yang dapat berjalan diatas Windows. tetapi gak cuman itu aja, Visual Studio juga dapat digunakan untuk Develope aplikasi Windows Mobile yang berjalan  di atas .NET Framework.
Microsoft Visual Studio kini telah menginjak versi Visual Studio 2012, dan ini yang kebetulan sedang saya
gunakan utuk mengembangkan  aplikasi di  windows 8 , Saya sudah instal dan mencobanya sendiri dan memang sangat bagus sekali. Banyak sekali fitur fitur baru yang tentunya akan semakin mempermudah kita sebagai developer. dan  menurut saya visual studio 2012 ini memang ditujukan untuk memfasilitasi pengembangan aplikasi di windows 8.

Nah Fitur-Fitur  baru yang saya rasakan diantaranya :



1. Untuk User interface yang jelas sudah baik sekali , tampilanya simple tapi mengandung banyak fitur bagus,
ada 2 tema yang dapat kita pilih yaitu Dark dan Light.

2. Kemampuanya membangun aplikasi Metro Style , dengan menggunakan c++ , c#, visual basic, HTML, JavaScript, XAML Kita sudah dapat membuat aplikasi Metro-Style untuk windows 8, tetapi kalau gak mau ribet Visual studio juga menyediakan 2 template Metro Style nya, Diantaranya model Grid dan Split
3. LightSwitch, dengan LightSwitch  kita akan dapat mempublish aplikasi yang sudah kita buat ke Azure dengan cara yang lebih gampang dan simple, selain itu membuat peforma menjadi lebih baik misalnya peningkatan proses loading pada saat membuka project, membuat screens dan tables, juga ketika kita Building Projects. oh iya sekedar info aja, pada versi sebelumnya LightSwitch ini terpisah dengan Visual Studio tetapi sekarang sudah termasuk/include di dalam visual Studio 2012

4. Solution Explorer yang berbeda, Solution Explorer itu merupakan semacam jendela yang mengandung semua file aplikasi Visual Studio dan dimana setiap proyek dapat mengandung lebih dari satu file. jadi Kita dapat melakukan penelusuran  ke methods dan properties pada proyek kita dan juga memungkinkan kita untuk melakukan pencarian file dan yang paling saya suka karena dapat melakukan preview pada objek-objek dan item-item eksternal.
5. Oh iya yang terakhir yang terbaru juga, dukungan dari .NET Framework 4.5
Oke kayaknya itu saja yang bisa saya bagikan, Bagi yang ingin download dan mencobanya bisa langsung meluncur ke website resminya dan mendownload Visual studio 2012 Express dan dapat juga mendownload versi sebelumnya yaitu Visual Studio 2010 secara Gratis Tinggal Klik gambar di bawah ini aja 



Kamis, 06 Maret 2014

Aplikasi Viewer video yang cetar dan membahana menggunakan Video Light Box

Pada kali ini saya akan menjelaskan tentang aplikasi yang menarik yaitu video light box, untuk aplikasi ini kalian bisa download disini videolightbox ini adalah suatu template untuk memunculkan video pada website yang akan kalian buat, banyak sekali template yang bisa kita gunakan. maka dari itu aplikasi ini sangat bagus untuk membuat website yang memiliki konten video. berikut cara-cara menggunakan aplikasi video light box:
1. Tampilan pertama muncul gambar seperti ini:
2. lalu pilih yang bertanda merah


3. kemudian klik, akan muncul menu seperti ini:
4. Dan kepada dosen saya tercinta (bosnya bos mafia) berhubung file video "kiky si kancil" nya ga ada, jadi saya pakai video ini *sad* kembali kelaptop. Nah langkah selanjutnya adalah
memilih template mana yang kalian suka, caranya pilih menu "Customize thumbnails" dan pilih template yang kalian suka. 

pilih button publish maka akan muncul menu diatas, maksudnya file yang kita buat akan disimpan dimana, nah soal ini terserah kalian. sebagai contoh saya simpan file ini di C. lalu pilih publish dan file video yang akan anda buat sedang diproses. 
taadaaa dan template video yang akan dimuat pada website anda telah berhasiiil

Cukup sekian penjelasan tentang aplikasi ini, luar biasa bukan? hehe selamat mencoba

Kamis, 27 Februari 2014

Tentang Framework Kiky si kancil

Assalamu'alaikum warahmatullahi wabarakatuh
Senang sekali bisa nulis-nulis lagi kepada pembaca sekalian, berhubung kuliah yang lumayan padat, jadi penulis belum sempat update-update tulisan terbaru. nah untuk sekarang kita akan mengenal framework kiky si kancil dan bagaimana framework itu bekerja. di kampus penulis ada dosen yang hebat, beliau kebetulan yang membuat framework ini, ya meskipun masih version 1,0 tapi framework ini sangat keren. dan mohon maaf untuk frame work ini masih belum bisa di share, karna belum ada ijin dari dosen. jadi penulis hanya memaparkan bagaimana cara kerja framework ini. Framework Kiky Si Kancil merupakan pengembangan dari CRUD (Create Read Update Delete) Generator yang dibuat menggunakan kombinasi Lazarus, jQuery-UI, NodeFire dan sedikit imajinasi, yu mari simak cara penggunaan framework ini
Pertama kali dosen saya memberikan file seperti ini, cara menggunakannya click kanan lalu pilih "run as administrator" lalu akan muncul aplikasi, dan browse. pilih file "kikysikancil_v1.01.kancil" lalu oke, akan muncul folder "kikysikancil" nah folder tersebut copy dan masukan ke folder "htdocs".
ini adalah tampilan dari framework kiky si kancil
pilih menu login, gunakan username : kiky dan passwordnya : kiky
setelah masuk, maka akan muncul home. nah untuk menggunakan frame work ini ada 3 cara.
1 . buat database di "phpmyadmin" disini secara default membuat databasenya di "db_kikysikancil" jadi mudahnya anda tinggal buat tabel baru di db_kikysikancil.  Untuk saat ini, Framework Kiky Si Kancil baru mendukung pemasukan data secara otomatis bertipe varchar. Untuk field dengan tipe yang lain, anda perlu memodifikasi coding yang di-generate oleh aplikasi CRUD pada folder \pages\
misalkan anda buat tabel mahasiswa dengan field sebagai berikut

2. Untuk melihat tabel yang kita buat, caranya ketikan : localhost/kikysikancil/config/lazarus.php maka akan muncul seperti ini

3. setelah pengecekan database anda, lalu jalankan kikysikancil.exe pada folder lazarus. seperti ini liat directorynya

4. lalu double click kikysikancil.exe akan muncul seperti ini:
    langkah selanjutnya browse index.php yang berada di luat folder lazarus, INGAT!


5. lalu pindah tab ke "Halaman" pada bagian ini untuk memunculkan menu pada halaman CRUD yang akan kita buat.

6. Pindah lagi ke tab "Judul" maka akan muncul hal seperti ini
ini tidak perlu kita ganti lagi, karna secara default akan seperti ini
7.  Nah Jgn lupa pilih halaman info, karna ini sangat luar biasa sekali.
lalu pilih tombol Eksekusi
8. Selanjutnya kita akan sedikit mengedit source code yang sudah ada, dengan cara buka folder "Pages" pilih file kiky_navigation.php (bisa memakai notepad) ketika sudah anda buka file tersebut, cari di baris 253 lalu ubah sedikit kodingnya menjadi ini:
<li><a class="qmitem-s" href="?pg=form_HalamanMahasiswaread">Mahasiswa</a></li>
lalu save.
9. Tadaa dan membuat CRUD dengan framework berhasil dengan sempurna untuk melihat hasilnya akan seperti ini:

login dengan username : kiky password: kiky 
pilih mahasiswa
nah beres kan membuat CRUD dengan itungan menit hehehe, terimakasih





Kamis, 20 Februari 2014

PERKEMBANGAN WEB 2.0 TECHNOLOGY

Internet
Dunia internet seakan-akan telah menjadi bagian hidup dari masyarakat modern saat ini. Betapa tidak, karena internet secara lengkap menyediakan kebutuhan akan informasi, berita, serta ilmu pengetahuan. Dengan internet seolah-olah tidak ada lagi batasan antar ruang dan waktu dalam berkomunikasi dengan berbagai orang di berbagai belahan dunia. Sebagai konsumen dari teknologi web tentunya mengharapkan tampilan layar yang mengasyikan serta mudah dipakai dan dimanfaatkan. Pada dasarnya web merupakan suatu kumpulan hyperlink yang menuju dari alamat satu ke alamat lainnya dengan bahasa HTML (HyperText Markup Languange).
Teknologi AJAX
Dalam pengaplikasian web HTML tidak mungkin sendiri dalam membuat suatu desain yang benar-benar bagus. Oleh karena itu HTML selalu ditemani oleh CSS (Cascading Style Sheet) untuk mempercantik desain, JavaScript untuk membuat tampilan yang dinamis, dan XML (eXtensible Markup Language) yang digunakan untuk mendefinisikan format data . Teknologi penggabungan dari JavaScript dan XML saat ini yang marak disebut dengan AJAX (Asynchorous JavaScript And XML) yang menekankan pada pengelolaan content dalam website.

Perkembangan Web 2.0

Inovasi dalam dunia web semakin hari kian mengalami perkembangan yang berarti, ini dibuktikan dengan adanya Teknologi Web 2.0 yang dikembangkan sekitar tahun 2004. Walaupun sudah termasuk lama kedengarannya oleh para praktisi web, namum sebagian besar mereka masih bertanya-tanya tentang fungsi dan kegunaannya. Web 2.0 merupakan teknologi web yang menyatukan teknologi-teknologi yang dimiliki dalam membangun web. Penyatuan tersebut merupakan gabungan dari HTML, CSS, JavaScript, XML, dan tentunya AJAX.

Perkembangan web 2.0 lebih menekankan pada perubahan cara berpikir dalam menyajikan konten dan tampilan di dalam sebuah website. Dalam perkembangannya Web 2.0 diaplikasikan sebagai bentuk penyajian halaman web yang bersifat sebagai program desktop pada umumnya seperti Windows. Fungsi-fungsi pada penerapannya sudah bersifat seperti desktop, seperti drag and drop, auto-complete, serta fungsi lainnya. Aplikasi Web 2.0 disajikan secara penuh dalam suatu web browser tanpa membutuhkan teknologi perangkat yang canggih dari sisi user. Tidak mengherankan bila suatu aplikasi (software) dapat diakses secara online tanpa harus menginstalnya terlebih dahulu. Software tersebut misalnya software pengolah kata (seperti MS Word) atau software pengolah angka (seperti MS Excel).

Teknologi ke depan suatu software berbasisi web tidak lagi dijual melainkan suatu fasilitas gratis yang dapat digunakan setiap waktu. Permasalahan manajemen file juga tidak merepotkan, bahkan file dapat disimpan dan juga dapat di-sharing dengan user lain. Implementasi dari teknologi Web 2.0 dapat dilihat pada aplikasi sprearsheet pada Google yang merupakan aplikasi untuk operasi mengolah angka seperti MS Excel. Aplikasi ini dapat dilihat pada http://spreadsheets.google.com/ , tentunya aplikasi tersebut membutuhkan suatu akun Google untuk memasukinya.

Suatu web 2.0 biasanya digunakan sebagai akhir dari siklus peluncuran produk software, mengilustrasikan setiap produsen software tidak lagi meluncurkan produknya dalam bentuk fisik. Karena web menjadi platform, pengguna cukup datang ke website untuk menjalankan aplikasi yang ingin mereka gunakan. Hasil dari pengembangan fitur di dalam software dapat langsung dirasakan oleh pengguna. Software tidak lagi dijual sebagai produk namun berupa layanan (service).

Karakteristik Web 2.0

Kemudahan berinteraksi antara user dengan sistem merupakan tujuan dibangunnya teknologi Web 2.0. Interaksi tersebut tentunya haruslah diimbangi dengan kecepatan untuk mengakses, oleh karena itu diperlukan suatu bandwith yang cukup untuk loading data. Loading data tersebut dilakukan saat pertama kali membuka situs, data-data tersebut antara lain CSS, JavaScript, dan XML. Salah satu karakteristiknya adalah adanya dukungan pada pemrograman yang sederhana dan ide akan web service atau RSS. Ketersediaan RSS akan menciptakan kemudahan untuk di-remix oleh website lain dengan menggunakan tampilannya masing-masing dan dukungan pemrograman yang sederhana. Adanya kemajuan inovasi pada antar-muka di sisi pengguna merupakan karakter dari Web 2.0. Dukungan AJAX yang menggabungkan HTML, CSS, Javascript, dan XML pada Yahoo!Mail Beta dan Gmail membuat pengguna merasakan nilai lebih dari sekedar situs penyedia e-mail. Kombinasi media komunikasi seperti Instant Messenger (IM) dan Voice over IP (VoIP) akan semakin memperkuat karakter Web 2.0 di dalam situs tersebut.

Sumber :
http://pasca.walisongo.ac.id/id/informasi/3/detail/1/

Rabu, 11 Desember 2013

tutorial application bar | windows phone | 6 Desember 2013

Assalamu'alaikum wr wb
Apa kabar teman-teman? semoga kabar kalian baik-baik saja. nah untuk tutorial kali ini saya akan membahas application bar. Apa itu application bar?  application bar adalah menu. kita akan buat menu seperti ini,
nah saya saat memberikan tutorial biasanya membuat button ini tidak rapi, nah untuk sekarang penggunaan buttom menggunakan ini, mengapa? karna saat membuat aplikasi device, kita harus meminimalisir pemborosan space. jadi menggunakan buttom yang kemarin saya jelaskan sangat tidak dianjurkan, kemarin itu sebagai simple saja. nah saat kita bisa menggunakan application bar, applikasi yang kita buat menjadi semakin menarik dan enak diliat. langkah pertama tentu saja kalian bikin dulu new project, beri nama "applicationBar"
lalu setelah itu kalian bikin new folder. caranya click application bar lalu click kanan akan muncul add, pilih menu itu dan ada pilihan new folder. nah folder itu beri nama "Images" lalu dari mana images icon buttom itu? dan ternyata saat kita instal microsoft visual studio 2010 akan secara default terinstal SDKnya. biasanya SDKnya itu ada di program files, untuk versi 64bit biasanya ada program files (x86) click folder itu lalu cari folder dengan nama "Microsoft SDKs" click folder itu lalu pilih lagi folder "windows phone" lalu pilih lagi folder "v7.1" lalu pilih lagi folder "icon" lalu pilih folder "dark", nah di folder itu ada image icon yang akan kita buat.
tambahkan gambar yang ada digambar itu. lalu yang akan kita gunakan yaitu yang gambar add, lalu favs.addto, favs.rest sama download.rest.
nah langkah selanjutnya, kalau di microsoft visual studio 2010 code bar ini telah disediakan pada bagian bawah koding, jadi tinggal kita hapus tanda commentnya.nah untuk microsoft visual studio 2012 code ini harus ditulis lagi "wayahna" :D
nah kalian tinggal edit2 lagi ada code ini
<!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="addBT" IconUri="/Images/AppBar/appbar.add.rest.png" Text="Add" Click="addBT_Click" />
            <shell:ApplicationBarIconButton x:Name="addGenreBT" IconUri="/Images/AppBar/appbar.favs.addto.rest.png" Text="Add Genre" Click="addGenreBT_Click" />
            <shell:ApplicationBarIconButton x:Name="addSongBT" IconUri="/Images/AppBar/appbar.favs.rest.png" Text="Add Song" Click="addSongBT_Click" />
            <shell:ApplicationBarIconButton x:Name="downloadBT" IconUri="/Images/AppBar/appbar.download.rest.png" Text="Download" Click="downloadBT_Click" />
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="Add Name Artist" Click="menuItem1_Click" />
                <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="Add Genre" Click="menuItem2_Click" />
                <shell:ApplicationBarMenuItem x:Name="menuItem3" Text="Add Song " Click="menuItem3_Click" />
                <shell:ApplicationBarMenuItem x:Name="menuItem4" Text="Add Favorit Song" Click="menuItem4_Click" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>

 oh iya lupa Ini adalah CATATAN PENTING!!!! nah kalian kan sudah menambahkan Image ke folder "Images" click semua image itu lalu pilih di propertis nanti ada tulisan Build Action nah kalian ganti yang asalnya "resource" menjadi "content" hal ini penting sekali
untuk " Click="downloadBT_Click" menunjukan link buttonnya, INGAT jangan di ketik ulang code itu, karna akan terjadi error. caranya double click di bagian Click="" nanti akan secara otomatis masuk ke link buttom tersebut. coba debug applicationnya, jika berhasil maka akan muncul seperti ini 

Dan untuk pengoprasian selanjutnya Aplication Bar ini sama saja dengan tombol Button hanya saja jika di sebuah aplicasi mobile tidak ada sebuah buttom yang berada di tengah layar melainkan di bawah layar… nah Aplication Bar ini bertujuan untuk mempercantik sebuah aplikasi dan juga untuk membuat simple sebuah aplikasi. Tetapi pada dasarnya ini adalah sebuah tombol button yang bisa membuat aksi,, bisa di coba kok… 
Dan jika ingin tahu cara membuat action sebuah  button bisa lihat dipostingan sebelumnya… terima kasih semoga postingan ini dapat membantu … 


Cuma ini yang bisa saya buat tutorial program yang saya buat dan hanya bisa menjalankan apa yang saya pahami dikampus saya, semoga bermanfaat bagi rekan2 semua untuk apalikasi yang saya buat.

Rabu, 04 Desember 2013

Tutorial membuat Image Control | Windows Phone | 29 november 2013

Assalamu'alaikum warahmatullahi wabarakatuh

Kita berjumpa lagi di tutorial windows phone, kali ini saya akan membahas tutorial yang sedikit "expert", apa maksud dari "expert"? maksudnya, pada tutorial kemarin2 biasanya saya membahas dasar-dasar untuk membuat aplikasi pada windows phone, nah untuk kali ini saya akan membuat aplikasi yang lebih menarik lagi, mengapa ini begitu menarik? karna pada aplikasi ini user diberikan interface-interface yang semakin membuat menarik user. okeh kita langsung aja buat new project.

1. Open aplikasi microsoft visual studio 2010 expert for windows phone
2. pilih new project, lalu kita pilih menu visual C# dan pada menu bagian kanan pilih juga windos phone aplication
3. beri nama project kita dengan nama"imageControll" atau untuk namanya bebas, suka suka kalian
4. mari mengoding riaaaaaaa


nah setelah kita buat, mari buat dulu skema aplikasinya dengan menambahkan beberapa element. aplikasi yang akan kita buat ini sebagai gambarannya mampu menampilkan gambar yang dipilih user, dan mampu menscroll layar, karna gambarnya cukup banyak. menarik bukan? yok mari ikuti tutorial ini dengan serius, kembali ke tujuan, maka tambahkan beberapa element ke dalam aplikasi tersebut diantaranya tambahkan element Image dan text block.

posisinya buat seperti gini, oh iya lupa sebelumnya kalian harus tambahkan image terlebih dahulu, caranya seperti ini 

penjelasannya klik pada nama projectnya, lalu klik kanan kemudian ada menu seperti diatas, dan pilih new folder. mengapa membuat new folder terlebih dahulu? karna kita akan menggunakan gambar yang banyak, untuk  memudahkan dan supaya terlihat rapi maka kita membuat new folder. beri nama folder tersebut dengan "Images" langkah selanjutnya
nah lalu klik pada folder images, klik kanan dan akan muncul menu seperti ini kemudian pilih Existing Item. nanti akan masuk dimana anda menyimpan gambar yang akan kita masukan, kalian masukan gambar apa saja, tapi anda masukan harus ada 10 gambar. nah setelah kalian tambahkan gambar, langkah selanjutnya tambahkan element lagi. tadikan anda telah menambahkan element image dan text block jangan lupa kedua element itu beri nama. saya memberi nama untuk Image "outputIMG" dan untuk text block "outputTB". langkah selanjutnya tambahkan element grid, nah grid ini untuk apa? grid ini untuk membuat seperti table, jadi untuk membuat table di windows phone itu kita memakai grid.
cara membuat colomn dan row nya ketikan koding ini

<Grid Height="450" HorizontalAlignment="Left" Margin="26,284,0,0" Name="grid1" VerticalAlignment="Top" Width="417">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67*" />
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="65*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="87" />
                        <RowDefinition Height="63" />
                        <RowDefinition Height="111" />
                        <RowDefinition Height="39" />
                        <RowDefinition Height="75" />
                        <RowDefinition Height="75" />
                    </Grid.RowDefinitions>

ini akan membuat table, copas aja kalau kalian belum mengerti. langkah selanjutnya kalian tambahkan element image di setiap colom dan rownya, total yang kalian masukan element imagenya itu ada 9. sebelumnya kalian beri nama itu element imagenya kalau saya memeberikan nama, mulai dari image 1 sampai image 9, tadikan kita memasukan 10 image, nah satu lagi untuk apa? satu lagi itu untuk element "outputIMG" sebagai tampilan awalnya saja
tampilan yang kalian buat harus sama kaya gini yah

kalian pasti bertanya, itu mengapa gridnya keluar dari emulatornya? nah menariknya pada aplikasi ini kita akan menggunakan Scrollviewer, jadi user bisa menggeser grid tersebut ke atas. sekarang cara menambahkan image ke dalam element image, 
pada properties image kalian pilih "Source" nanti klik pada bagian kanan dari "Source" nanti akan muncul seperti ini, kalian pilih imagenya
ini koding yang sangat sensitif, karna beberapa kali juga saya gagal, karna koding ini. saya sarankan anda mengikuti koding ini yah, koding ini berupa scrollviewer yang bisa di scroll oleh user

 <ScrollViewer Margin="5,0,1,-146" Height="787" VerticalAlignment="Bottom">
                <Grid Height="450" HorizontalAlignment="Left" Margin="26,284,0,0" Name="grid1" VerticalAlignment="Top" Width="417">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67*" />
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="65*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="87" />
                        <RowDefinition Height="63" />
                        <RowDefinition Height="111" />
                        <RowDefinition Height="39" />
                        <RowDefinition Height="75" />
                        <RowDefinition Height="75" />
                    </Grid.RowDefinitions>
<Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/2.jpg" Tap="Image1" ImageFailed="image1_ImageFailed" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Image Grid.Column="1" Height="150" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/3.png" Tap="Image2" ImageFailed="image2_ImageFailed" Grid.RowSpan="2" />
<Image Grid.Column="2" Height="150" HorizontalAlignment="Left" Name="image3" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/4.jpg" Tap="Image3" ImageFailed="image3_ImageFailed" Stretch="Fill" Grid.RowSpan="2" />
<Image Grid.Row="2" Height="150" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/5.jpg" Tap="Image4" ImageFailed="image4_ImageFailed" Margin="0,0,134,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
<Image Grid.Column="1" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/6.jpg" Tap="Image5" ImageFailed="image5_ImageFailed" Grid.RowSpan="2" />
<Image Grid.Column="2" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/7.jpg" Tap="Image6" Grid.RowSpan="2" /
<Image Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image7" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/8.jpg" Tap="Image7" Grid.ColumnSpan="2" Grid.RowSpan="2" />
 <Image Grid.Column="1" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image8" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/10.jpg" Tap="Image8" Grid.RowSpan="2" />
 <Image Grid.Column="2" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image9" Stretch="Fill" VerticalAlignment="Top" Width="126" Source="/ImageControl2;component/Images/9.jpg" Tap="Image9" Grid.RowSpan="2" />
<TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0" Name="outputTB" Text="" VerticalAlignment="Top" Width="202" />
    </Grid>
            </ScrollViewer>

mohon maaf saya tidak bisa menjelaskan koding ini satu persatu, yang jelas kita telah menggunakan scroll viewer. untuk yang berwarna biru perlu kalian perhatikan, itu merupakan link yang telah kita masukan di "source" image. jika koding ini terjadi error maka kalian perhatikan  koding ini,
lalu langkah selanjutnya pada image yang berada di grid klik dan kemudian ke bagian propertis, kalian pilih event, dan pilih tap
ini berguna agar saat image yg user pilih, akan keluar di bagian "outputIMG" dan "outputTB" istilahnya element image ini akan berguna seperti button.
lalu kalian masuk ke MainPage.xaml.cs
masukan namespace ini, karna jika tidak system tidak akan bisa membaca Image.
kalian ketikan koding ini yah, ingat link gambarnya harus sesuai dengan yng telah kita masukan. ini baru sampai Image4, untuk yang lainnya sama seperti ini tinggal copas aja. dan jgn lupa linknya jangan sampai tertukar. akhirnya membuat aplikasi ini telah selesai. bagaimana jadinya? nih check this out!!

selamat mencoba dan berkreasi :D