GIMP Tutorial - Menginstall Brush

Salah satu hal yang dapat membantu kita dalam design adalah adanya semacam template gambar yang sudah tersedia, salah satunya brush. Pada GIMP, langkah-langkah yang dapat digunakan untuk menginstall brush dari berbagai sumber adalah:

1. Cari saja di google brush-brush yang dapat didownload dan digunakan secara GRATIS
2. Download brush yang ingin digunakan
3. Apabila dalam bentuk .zip, extraxt terlebih dahulu, kalau tidak, bisa langsung pindahkan ke direktori

C:\Documents and Settings\[username ente]\.gimp-2.8\brushes

atau kalau tidak ketemu, coba saja disini

C:\Users\[username ente]\gimp-2.8\brushes

Note: Biar lebih enak, kalau misal di folder brushes yang terekstrak itu folder kemudian di dalamnya baru ada brushes-nya, coba pindahin brush-brush-nya dari folder tersebut ke folder brushes, jadi di dalam folder brushes sudah langsung ada brush-brushnya, tidak ada folder lagi.

4. Pada gimp, klik Refresh Brush pada Brushes Dialog, kalau tidak ketemu coba pencet Ctrl+Shift+B.

Sudah, kalian sudah bisa berkreasi menggunakan brush-brush gokil yang ada di internet. Happy designing every one :)

Menambahkan Widget "Follower" pada Blogspot

Salah satu hal yang dapat dilakukan agar blog kita selalu banyak pengunjung adalah bahwa blog kita di-follow oleh banyak orang. Ketika kita meng-update blog, orang lain bisa langsung tahu dan langsung mengunjungi blog kita.

"Bagaimana agar blog kita di follow orang?" 

Salah satu cara yangdapat dilakukan adalah dengan menambahkan widget "Follow". Untuk pengguna blogspot, bisa ikuti langkah-langkah berikut ini:

1. Pergi ke Tata Letak pada menu blogger kalian.
2. Klik Tambah Gadget, terserah kalian maunya yang bentuk dan ukuran seperti apa.
3. Pilih Pengikut, setelah itu tentukan judul widget kalian. Kalau mau seperti yang lain ketik aja "Follow".
4. Kemudian pada jendela Tambah Widget, klik Simpan.
5. Jika kalian masih ragu dengan tata letaknya sudah sesuai atau belum, pilih saja Pratinau. Kalian bisa men-drag posisinya bila kurang enak.
6. Jika sudah selesai klik Simpan setelan.
7. Selesai, pengunjung setia kalian bisa mem-follow blog kalian.

Semoga ini membantu, happy blogging every one. :)

Windows 8 - Memperbaiki Brightness Windows 8

Mungkin dari judul postingan ini, banyak yang mengira "Emang kenapa? Penting amat.." dll. Tapi bagi kalian pengguna Windows 8 yang merasa bahwa tingkat brightness-nya sedikit aneh (kadang ok, kadang TERLALU TERANG dengan sendirinya), mungkin solusi yang saya tawarkan disini bisa membantu. Ikuti langkah-langkah ini.

1. Buka Control Panel -> Hardware Options -> Power Options, 
2. Pilih Change plan settings (entah pada Balanced atau apa, tergantung penggunaan kalian seperti apa).
3. Pilih Change advanced power settings.
4. Pilih Display -> Enable adaptive brightness
5. Ubah menjadi Off, entah itu pada on battery atau plugged in, terserah kalian maunya bagaimana, kalau saya sih dua-duanya.

Kalau perlu restart lagi agar perubahan bisa dilaksanakan. Itu solusi yang bisa saya tawarkan, mav kalau masih juga belum menyelesaikan masalah brightness-nya. Terima kasih telah membaca postingan ini :)

Inkscape tutorial - Pembuatan Bola Biliar yang Tampak 3D

Salah satu dari aspek design yang sangat populer sekarang ini adalah pembuatan gambar 3D. Lebih dari satu teknik dapat digunakan untuk membuat gambar 3D. Bahkan gambar 2D bisa dibuat terlihat 3D. Di sini saya akan menunjukkan bagaimana membuat bola biliar tapi yang tampak tiga dimensi menggunakan Inkscape. Ini adalah materi yang saya pelajari dan kopas dari sini.

Langkah-langkahnya adalah sebagai berikut:

- Buat sebuah lingkaran dengan memilih circle tool. Agar lingkarannya tidak asal, buatlah sambil menekan Ctrl.

- Hilangkan stroke-nya dengan klik kanan pada warna stroke di bagian bawah, kemudian pilih Remove Stroke.

- Ganti warna lingkaran tersebut dengan warna dasar bola yang kalian inginkan. Di sini saya menggunakan warna coklat tua.

- Pilih gradient tool (Ctrl+F1), dan pastikan kalian memilih tombol gradasi radialnya pada bagian atas jendela kalian setelah kalian memilih gradient tool.

- Pastikan lingkaran bawah yang terpilih setelah kalian melakukan gradasi pada lingkaran kalian.
- Pada color palette (opsi-opsi warna yang ada di bawah), pilih warna hitam. Lihatlah hasilnya. :)

- Buatlah suatu lingkaran sempurna lagi (dengan sambil menekan Ctrl). Warna Fill-nya putih dan warna stroke-nya None. Posisinya sesuaikan bagusnya bagaimana.

Note: Kalau kalian ingin zoom in, maka tekanlah Ctrl+Scroll ke atas.

- Pilih gradient tool lagi dan kali ini gunakan Linear Gradient button. Sambil menekan tombol Ctrl (agar membuat garis lurus), buat gradasi dari atas ke bawah pada lingkaran putih kita.
Note: Apabila kalian tidak bisa membuat gradasi, pastikan bahwa lingkaran kalian terseleksi dengan Selection Tool.
- Pilih Text tool (kurang tahu bener seperti ini namanya atau bukan). Ketikkan suatu angka yang Anda inginkan untuk bola kalian.

Note: Untuk masalah perbesar, cukup dengan Selection tool, kemudian di drag point-nya sehingga ukurannya membesar.

- Sambil menekan Shift key dan angka yang kalian masukkan itu terpilih, pilih warna stroke untuk angka kalian tersebut dengan memilihnya dari Color Palette. Langsung akan dijadikan stroke color.

Untuk sementara bola kita sudah mulai terlihat meyakinkan, tapi akan lebih bagus lagi kalau ditambah efek pencahayaan.
- Pilih bola kita (yang besar).
- Bikin copy-nya dengan menekan Ctrl+D. Warna replikanya  ubah menjadi putih.
- Pilih select tool dan select bola replika kita.
- Pilih node paling bawah dan kecilkan ukurannya dengan menseret node bawah ke atas.

- Setelah itu, dengan menekan shift key, drag node kiri ke  sebelah kiri sedikit.

Note: Sudah ketahuan kan untuk apa menekan shift key? :)

- Pilih menu Path -> Object to Path.
- Pilih Node tool (F2).
- Drag node bawah ke atas sedikit.
- Pilih gradient tool, sekali lagi menggunakan linear gradient button.
- Sambil menekan Ctrl, buat suatu garis lurus untuk menggradasi "lingkaran" putih kita tadi.
Note: Bila bola kalian kurang terlihat gradasinya, coba edit gradasi lingkaran putih gradasinya, atau ubah posisi atau ukuran angka dan lingkaran putihnya.

Sudah selesai, bola biliar kita pun sudah jadi. Gmapang bukan? Saya saja belajar ini kaget betapa gampangnya membuat "gambar 3D". Terus berlatih ya semua. ;)

Apa itu POSIX?

Mungkin bagi banyak orang istilah POSIX merupakan istilah yang jarang didengar, tapi bagi seorang computer scientist, POSIX merupakan suatu istilah yang mungkin akan sering didengar. Pada ilmu Sistem Operasi, istilah ini akan cepat atau lambat menjadi istilah yang cepat atau lambat akan dikenal.

POSIX (Portable Operating System Interface for UNIX) gampangnya merupakan suatu library code yang distandarkan untuk UNIX. Semua UNIX menggunakan code standar ini untuk melakukan operasi-operasi yang berkaitan dengan sistem. Hanya sistem operasi yang berbasis UNIX yang dapat menggunakan standar POSIX ini.

Windows Phone 7.5 Tutorial - Menggunakan Newtonsoft.Json (1)

Pada suatu pagi, saya sedang mengerjakan aplikasi lomba Nokia Lumia menggunakan WP 7.5 dan VS 2012. Alhamdulillah saya dapat source code dari abang angkatan saya. Teknik yang digunakan dalam aplikasi ini adalah untuk meng-consume data berupa JSON gan. Saya perlu membuat data Json tersebut lebih enak untuk dilihat, atau jangan Json banget lahh.

Kalau datanya berupa XML, bisa dengan gampang menggunakan System.Xml.Linq, tapi kalau untuk Json? Butuh suatu Reference baru gan. Setelah melihat source code abang angkatan saya, ternyata dia menggunakan Newtonsoft.Json gan. Saya lihat di namespace-namespace yang disediakan Microsoft, rupanya tidak ada. Harus sitambahkan sendiri dulu gan.

Tidak perlu kalian browsing kemana-mana. Ikuti saja langkah-langkah berikut

1. Pilih menu Tools -> Library Package Manager -> Package Manager Console.

2. Pada bagian bawah VS 2012 akan muncul semacam "Command Prompt".

3. Ketikkan Install-Package Newtonsoft.Json, kemudian tekan Enter.

4. Dia bakal download sendiri dan menambahkannya pada Projek kalian.

5. Setelah itu kalau semuanya berhasil, bakal seperti ini gan B)

Untuk tutorial setelah ini mungkin lain waktu gan, Happy coding every one... ;)

Menampilkan daftar Kategori pada Blogspot

Blog merupakan suatu media yang dapat digunakan seseorang untuk mencari informasi tertentu. Namun dengan semakin banyaknya blog yang ada di dunia maya, maka harus ada suatu teknik yang dapat mempermudah pencarian informasi tersebut.

Salah satu fitur yang dapat membantu seseorang yang mencari suatu informasi dalam blog seseorang adalah adanya daftar kategori, atau "Categories" pada tampilan pertama yang dilihat pengguna. Dengan adanya daftar ini, pengunjung blog bisa lebih cepat menelusuri blog dengan memilih kategori yang berkaitan dengan informasi yang dicarinya, kemudian menelusuri daftar postingan yang masuk ke dalam kategori tersebut.

Step-step berikut dapat dilakukan apabila ingin blogspot-nya menampilkan daftar kategori.

1. Pada blogspot Anda, pilihlah blog yang ingin kalian tambahkan fitur "Categories".

2. Di bawah tombol yang bertuliskan "Entri baru" ada beberapa menu. Pilihlah menu Tata Letak.

3. Di halaman menu tersebut akan ada beberapa link Tambah Gadget, pilih dimana enaknya daftar kategori kalian berada

4. Setelah kalian klik link tersebut, akan muncul jendela baru berisikan daftar Gadget yang bisa ditambahkan. Pilihlah Label.

5. Setelah itu kalian akan dimintai konfigurasi label seperti apa yang kalian inginkan. Beri judul "Categories". Pilih radio button Semua label, Alfabetik, dan Daftar (ini pilihan saya, terserah kalin maunya seperti apa).

6. Setelah selesai melakukan konfigurasi, tekan tombol Simpan.

7. Untuk melihat seperti apa tampilan blog kalian sekarang, pilih saja Pratinjau.

8. Jika kalian tidak ingin daftar kategori dimana dia berada sekarang, kalian bisa drag Gadget label kalian sesuai dengan yang apa kalian inginkan.

9. Setelah selesai, pilihlan tombol Simpan setelan pada bagian kanan atas.

Sudah selesai, kalian sekarang punya daftar kategori. Happy blogging everyone. ;)

Windows 8 + Construct 2 Tutorial - Snap View

Salah satu syarat agar aplikasi kita lolos ke Store adalah bahwa aplikasi kita harus (menurut saya ini syarat wajib, tapi saya  juga dengar-dengar ADA aplikasi yang tidak memenuhi syarat ini tapi lolos) mendukung tampilan Snap View. Apa itu Snap View, lebih bagus kalau saya  beri gambarnya saja ya.

Gambar diatas merupakan Snap View dari aplikasi Flood It. Intinya di sini adalah, si user bisa menjalankan dua aplikasi sekaligus dengan gampang. Pada Snap View tidak wajib aplikasi berjalan, bisa juga aplikasinya menyampaikan pesan bahwa aplikasi tersebut hanya bisa berjalan di Full View atau Filled View. Dengan catatan tentunya mempermudah user untuk pindah secara gampang.

Nah, setelah saya jelaskan tentang Snaap View, saatnya  implementasi masbro dan mbasist. Ikuti langkah ane ya. Saya hara kalian sudah ada game C2 yang sduah di export ke Windows 8 melalui Visual Studio, jika belum kalian baca dulu postingan ane yang ini ya.

• Pertama-tama, bukalah projek kalian yang berekstensi .sln
• Kemudian buka appx.packagemanifest, buka tab Packaging, pilih Choose Certificate -> Create Certificate. Isi publisher namenya sesuai dengan data riilnya. Jangan beri password, saya kurang tahu kenapa tapi saya baca di blog yang cukup bagus itu jangan.

• Pada folder plugin Windows 8 untuk C2 yang sudah kalian ekstrak, salin file index.html, index-fs.html, dan project.jsproj ke dalam folder C:\Program Files\Construcct 2\exporters\html5\metro.
• Pada Solution Explorer, apa bila ada file-file yang ada tanda kuning-kuning seperti tanda warning itu, artinya file-file tersebut belum ada pada projek kita, maka kita harus menambhakannya. Caranya  bagaimana? Klik kanan projek kita pada Solution Explorer, klik Add -> Add Existing Item. Cari file-file dengan tanda warning tersebut pada C:\Program Files\Construcct 2\exporters\html5\plugins\metro. Kalau pada Solution Explorer saya tidak ada karena sebelumnya sudah saya tambahkan. Hasilnya adalah sebagai berikut apabila saya Snap.

Secara default game kita akan terpause secara otomatis. Kalau di kepala kalian timbul pertanyaan “Bagaimana kalau saya ingin tampilan yang lebih menarik lagi?”. Gampang gan. Ikuti langkah berikut ini.

• Klik kanan pada projek kita di Solutions Explorer, Add -> Add Existing Item, Cari gambar yang menurut kalian menarik yang ada di komputer kalian. “Kita mau ngapain?” Lihat saja nanti hasilnya ;)
• Pergilah ke index.html
• Cari kodingan seperti yang di bawah ini.

• Ganti seperti yang ane lakukan

• Tekan Ctrl + F5 dan hasilnya seperti ini gan ;)

Kalau kalian klik gambar kalian itu, langsung aplikasi kita akan menjadi seperti biasa.

Mungkin itu yang ane bagikan untuk postingan kali ini. Kalau missal ada yang kurang jelas, silahkan ke blog ini, ane belajar dari situ ko.. ;) Mohon maaf kalau ada yang kurang atau salah ya. ;)

Windows 8 + Contruct 2 Tutorial - Meng-export Game C2 ke Visual Studio 2012

Halo rekan-rekan semua, sudah cukup lama sejak saya membuat postingan tutorial Windows 8. Ok, langsung saja kali ya.

Contruct 2 merupakan suatu tool yang sangat mempermudah developer untuk mengembangkan aplikasi game, entah itu di HTML 5, Android, bahkan Windows 8 tentunya. Setelah kita sudah sukses membuat game, pertanyaan yang timbul di kepala kita salah satunya bisa “Bagaimana saya jalankan game saya di Windows 8?”. Developer tidak perlu pusing, sudah ada plugin yang dapat digunakan. Plugin dapat didownload di sini.

Note: Sebenarnya tidak perlu dengan plugin ini sudah bisa kita export, tapi plugin ini akan kita gunakan setelah ini.

Setelah didownload, ikutilah langkah-langkah berikut ini.

• Extract folder tersebut pada direktori tertentu, kalau saya sendiri mengekstraknya ke folder Donwloads saya.
• Buka Command Prompt sebagai Administrator, atau cukup dengan shortcut Tombol Windows + X.
• Pergilah ke direktori dmana kalian mengekstrak folder plugin-nya.
• Ketik “install.cmd” (tanpa tanda kutip). Hasilnya bila benar akan seperti ini.

• Setelah itu, bukalah projek game C2 kalian, pada tab Project, pastikan Nama game, Author dan Description sudah terisi dengan benar, kalau tidak terisi akan menghasilkan pesan bahwa proses export tidak bisa.
• Setelah itu, insert-lah object baru, yaitu Windows 8 (pilih yang bagian Platform specific). Apabila tidak ada Windows 8 pada pilihan objek, kemungkinan proses instalasi plugin gagal, saya sarankan ulanngi lagi. Setelah sukses memasukkan objek baru, kita siap untuk mengexport. Pada contoh ini akan saya gunakan game sample Space blaster yang sudah disediakan.
• Pada tab Home, klik Export Project, pilih Windows 8, silahkan tentukan lokasi ekstraksi sesuka kalian. Hilnagkan tanda centang pada bagian Minify script. (Sayakurang tahu ini untuk apa persisnya, tapi ini opsional kok J).
• Pilih Export, kemudian tunggu hingga selesai.
• Pilih Open Destination Folder.
• Sudah dehh, game kalian sudah bisa dijalankan di Windows 8. ;)

Apakah cukup sampai situ saja, belum gan. Akan saya jelaskan  di postingan berikut saya. ;)

Kalau saya masukkan di sini semua takutnya kebanyakan isi, kalian bosen bacanya dehh. Hehehe

Inkscape Tutorial - Membuat Gambar Kartun Ninja

Untuk membuat game yang seru, poster, animasi dan yang lain semacamnya, tentunya juga dibutuhkan design yang mantap. Untuk post kali ini, saya ingin menjelaskan bagaimana membuat suatu tokoh kartun ninja yang jahat. Dalam post ini saya akan menggunakan Inkscape, yaitu salah satu alternative dari CorelDraw yang dapat didownload secara gratis di sini. Ini adalah materi yang ane dapat dari link ini.

1. Buka Document Properties -> Shift+Ctrl+D.

2. Hilangkan centang pada Show page border untuk menghilangkan border halaman.

3. Buat suatu lingkaran dengan garis hitam, fill-ny no fill.

4. Buat ketebalan garisnya menjadi 8.

5. Buat sautu persegi dengan square tool (F4).

6. Buat perseginya menjadi mirip dengan oval dengan memanipulasi lingkaran yang ada pada gari bantu  perseginya.

7. Dengan select tool (F1), pilih lingkarannya.

8. Pilih Path -> Object to Path. Pilih path tool (F2) untuk melihat hasilnya.

10. Pilih Lingkaran dan persegi-nya dan beri Fill warna hitam untuk kedua-duanya.

11. Pilih Ractangle tool (F4) dan buat tangan kanan ninja kita. Silahkan sesuaikan tingkat oval perseginya seperti apa.

12. Klik kiri pada tangan kanannya agar dapat melakukan rotasi pada tangan ninja kita.

13. Duplikasikan tangan kanan tengan shortcut Ctrl+D.

14. Buat rotasi dan atur kembali tingkat oval-nya jika diperlukan.

15. Dengan bentuk persegi, buatlah kaki-kaki kecilnya.

16. Buat suatu oval dengan menggunakan lingkaran dan beri warna fill sesuai dengan warna kulit.

17. Pilih Path -> Object to Path. Pilih path tool (F2) kemudian bikinlah bentuk topeng/maskerny sesuai dengan keinginan Anda.

18. Bila kekurangan node, tekan tombol insert new node.

19. Menggunakan lingkaran, buatlah kedua bola matanya, untuk stroke beri warna abu-abu, untuk fill beri warna hitam. Terserah kalau ingin diberi warna yang berbeda. :)

20. Untuk membuat sabuknya, pilih Bezier tool (Shift+F6). Tentukan koordinat node-nodenya. Tambahkan bila perlu node-node baru.

21. Untuk membuat ikat kepala, gunakanlah Bezier Tool, beri tiga node. Gunakan Ctrl+C kemudian drag salah satu node agar terlihat node handler masing-masing node. Sesuaikanlah bentuk ikat kepala dengan keinginan kalian mau seperti apa. :)

22. Tekan Ctrl+A untuk memilih semua objek, kemudian tekan Ctrl+G atau pilih Object->Group untuk menjadikan semua objek menjadi satu objek.

Hasil akhirnya adalah seperti pada gambar di bawah ini.

Semoga postingan ini bermanfaat. Teruslah berlatih, berkarya, dan tentunya berbagi ya.. ;)

Keyword async dan await

Selamat datang di postingan terbaru saya ini. :)

Kali ini saya akan membahas salah satu fitur baru dalam bahasa pemrograman C#, yaitu keyword async dan await. Fitur baru dalam C# 5.0 ini merupakan fitur yang dapat membantu pembuatan aplikasi yaitu dalam hal meningkatkan tingkat responsiveness atau ketanggapan aplikasi, dan menghindari bottleneck performance, atau kemacetan performa.

Penggunaan untuk async dan await  bagusnya hanya pada operasi-operasi yang membutuhkan waktu lama, contohnya adalah membuat suatu panggilan I/O. Tetapi apabila operasinya hanya sebentar, atau hanya memakan CPU cycle, maka bagusnya kita menjalankan operasi tersebut secara sinkronus.

Bagaimana cara menggunakannya? Carany sangat sederhana. Berikut penjelesannya.

1. Letakkan keyword async pada method (fungsi), anonymous method, ekspresi lambda, atau bahkan pada control events (bisa dibilang fungsi-fungsi dari suatu kontrol, entah itu tombol, combo box, dll.) yang akan ada keyword await. Satu fungsi asinkronus bisa memiliki lebih dari satu keyword await.
2. Semua fungsi yang memiliki keyword await, harus memiliki keyword async juga sebelum nama fungsinya.
3. Microsoft menganjurkan nama dari fungsi, atau apa pun yang menggunakan keyword async await mengandung kata "Async". Contohnya nama fungsi originalnya GetFeeds, tetapi karena kita menggunakan keyword async await, kita dianjurkan untuk mengganti nama fungsinya menjadi GetFeedsAsync.
4. Suatu fungsi async hanya bisa mengembalikan nilai void, Task, atau Task<T>.

Untuk contoh dari keyword async dan await saya usahakan ada pada postingan berikutnya.

Semoga bisa memberikan pencerahan lebih lanjut tentang fitur C# 5.0 yang keren ini. Kalau belum jelas juga, coba ke halaman msdn ini.

Tampilan Menarik dalam Windows 8

Halo teman-teman, bagaimana kabar kalian semua?

Untuk postingan di blog saya yang satu ini saya ingin share pendapat ane tentang tampilan Windows 8 Style.

Windows 8  Style

"Apa yang menarik disini?"

Yang membuat saya menyukai antarmuka dari sistem operasi Microsoft yang terbaru ini adalah sebagai berikut:

1. Tampilan sederhana, namun cukup powerful.

2. Aplikasi-aplikasi yang saya install di Windows 8, bisa muncul sebagai suatu tile. Dengan begini, suatu aplikasi yang kontennya bisa memiliki update baru, bisa ditampilkan pada tile aplikasi tersebut. Contohnya bisa dilihat di gambar bawah ini.

Live Tiles

 

Tile aplikasi Mail (pojok kiri atas) dan People (di bawah Mail) terupdate, menginformasikan saya bahwa saya mendapatkan notifikasi e-mail baru di milis, dan notifikasi dari aplikasi Facebook yang tersinkronisasi dengan aplikasi People saya. Dengan begini, saya tidak perlu repot-repotmembuka e-mail, facebook, dan lain-lain. Mav kalau gambarnya terlalu kecil. :P

Selain dari tile, ada juga toast notification. Contohnya apabila saya dapat chat dari teman facebook saya, maka akan keluar semacam pop-up yang berisi pesan dari teman saya tadi. Atau bisa juga apabila ada update dari aplikasi tertentu, maka akan muncul juga pop-up berisi informasi tentang apa yang terbaru. Tentunya fitur ini ada untuk aplikasi-aplikasi tertentu saja, tergantung dari developer-nya.
Mungkin itu saja yang saya share di postingan kai ini, terima kasih sudah membaca, harap komentarnya ya.. :)

Contoh IMK yang menyebalkan

Hai semuanya, selamat datang kembali.

Kali ini saya ingin share tentang suatu IMK (Interaksi Manusia dan Komputer) yang bagi saya cukup menyebalkan.

Apa yang menyebalkan disini?

Waktu itu saya sedang meng-install suatu aplikasi yang ukurannya cukup besar, saya mendapatkan pesan diatas. Masalahnya adalah, saya tidak mengerti apa yang akan terjadi pilihan-pilihan tombol diatas.

- Apabila saya pilih Skip, saya khawatir komponen tersebut malah tidak ikut dalam proses instalasi.

- Kalau saya pilih Cancel, saya khawatir malah instalasi saya dibatalkan.

- Saya pilih tombol Close, saya benar-benar tidak tahu apa yang akan terjadi pada instalasi aplikasi tersebut.


Bagi saya ini cukup menjengkelkan, silahkan komentarnya apabila ingin berpendapat #tapi jangan yang pedas ya.. :P

Windows 8 App Tutorial 1 – Navigation and Passing Data

Baik, marilah kita mulai seri pertama tutorial Windows 8 ini..

Untuk seri pertama ini akan dibahas mengenai pembuatan Windows 8 Metro App yang ngga beda jauh dari tradisi belajar pemrograman, yaitu Hello World!. Tentunya juga ga terlalu rumit-rumit amat mengenai masalah codingan-nya. Intinya dari tutorial ini hanyalah pengenalan lebih dalam terkait pembuatan Windows 8 Metro Style Apps, seperti navigasi halaman, dan bagaimana caranya mengoper nilai dari satu halaman ke halaman lain.

Langsung saja tanpa basa basi lagi, kita ke TKP, ikuti saja langkah-langkah berikut..

1.  Buka Visual Studio 2012-nya dan pilih New -> Project

2.  Disini akan digunakan template Visual C#, pilih Windows Store. Pada tampilan terbesar dari jendela New Project, pilih Blank App (XAML). Nama dari projek adalah LuasPersegi. Terserah lokasi penyimpanan projek dimana, kalau saya di drive E.

              


3.  Selanjutnya, tekan tombol OK, #you don’t say…

4.  Pada jendela Solution Explorer, klik kanan pada MainPage.xaml, pilih Delete. Atau singkatnya klik kanan MainPage.xaml, tekan tombol del untuk menghapusnya. Akan ditanyakan apa benar kita ingin menghapusnya, klik Ok.

            

5.  Masih di Solution Explorer, klik kanan pada LuasPersegi, pilih Add, pilih New Item. Singkatnya Ctrl+Shift+A.

 

6.  Pada jendela Add New Item, pilih Basic Page (XAML), beri nama MainPage.xaml, klik Ok. Setelah itu kalian akan ditanyakan semacam konfirmasi. Seperti biasa, klikOk.

Note: Apabila kalian mendapatkan eror, coba tekan Ctrl+F5.

“Tadi ngapain sih ngapus MainPage.xaml, trus bikin Basic Page dengan nama yang sama??”. Kalau kalian heran soal itu, ini alasannya. Intinya, dengan kita menggunakan template Basic Page, kita sudah menyediakan beberapa fungsi yang tidak tersedia apabila kita menggunakan MainPage.xaml yang pertama tadi..
Sekarang kita akan membuat UI-nya

1. Ok, balik lagi ke Visual Studio. Buatlah suatu TextBlock, entah kalian bikin dari Toolbox,  atau tulis manual di panel xaml-nya. Kemudian di bawahnya, buatlah sebuah TextBox, kemudian di bawahnya lagi sebuah Button.

2. Sekarang beralih ke bagian design versi codingan. Editlah codingan xaml untuk TextBlock dengan kodingan berikut:

•          FontSize=”15”
•           Text=”Masukkan sisi persegi:”

#FontSize untuk mengatur ukuran font, sementara Rext untuk menentukan tulisan yang akan ditampilkan apa.

3.  Editlah kodingan xaml untuk TextBox dengan kodingan berikut:

•           x:Name=”sisi”
•           Text=””

#x:Name untuk menentukan nama dari TextBox,

4.  Editlah kodingan xaml untuk Button dengan kodingan berikut:

•           x:Name=”hit”
•           Content=”Hitung Luas”

#Content untuk menentukan teks dalam Button
Untuk saya, kodingan lengkap xaml-nya m,enjadi seperti ini:

Sekarang kita akan bikin halaman kedua untuk menampilkan luas dari persegi dengan ukuran sisi yang dimasukkan oleh user ke dalam TextBox yang kita buat tadi.

8.  Kita kembali lagi ke Solution Explorer, klik kanan pada LuasPersegi, pilih Add, kemudian pilih New Item.

9.  Sama seperti sebelumnya, pilih Basic Page, beri nama Halaman2.xaml untuk page tersebut.

10.  Setelah kita buat itu, kita beri pada halaman tersebut dua TextBlock.

11.  Untuk TextBlock pertama, editlah kode xaml-nya dengan property sebagai berikut:

•           FontSize = “30”
•           Text = “Luas persegi:”

12.  Untuk TextBlock kedua, editlah kode xaml-nya dengan property sebagai berikut:

•           FontSize = “50”
•           Text = “”
•           x:Name=”cetak”

Untuk saya sendiri, kode xaml-nya adalah seperti ini:

Baiklah, sudah kita siapkan kedua halaman untuk membuat aplikasi penghitung luas persegi. Sekarang objective-nya adalah page MainPage.xaml harus bisa memberikan data ke Halaman2.xaml, agar kemudian bisa dihitung luas persegi dan menampilkannya di Halaman2.xaml.

Ada berbagai cara untuk melakukan ini. Di sini saya akan mendemonstrasikan salah satu cara untuk mencapai objective kita tadi. Caranya adalah, pada App.xaml, kita siapkan suatu variable yang akan menampung nilai sisi yang dimasukkan user. Kemudian, ketika user sudah memasukkan nilai sisi dan menekan Button yang sudah kita siapkan tadi, maka aplikasi akan berpindah dari MainPage.xaml ke Halaman2.xaml, dengan nilai sisi tadi sudah disimpan dalam variabel dalam App.xaml tadi.
Langsung saja kita terapkan konsep diatas.

1.  Mauk ke App.xaml, dengan memilihnya dari Solution Explorer.

2.  Klik tombol F7 untuk masuk ke code-behind-nya.

3.  Ubahlah programnya sehinga terlihat seperti ini (tambahin aja kode yang dikotakin hijau):

“Apa maksud dari kode diatas??”

Pertama-tama kita membuat suatu variabel bertipe integer dengan access modifier private bernama sisi. Variabel inilah yang akan digunakan untuk menampung nilai sisi kita tadi. Namun karena kita memberinya access identifier private, maka maka variabel sisi hanya dapat diakses dari dalam App.xaml.cs, sehingga dibutuhkan Property yang ada get dan set-nya utnuk variabel sisi. Ntar kita akan memasukkan suatu baris program ke dalam MainPage.xaml.cs dan Halaman2.xaml.cs sehinnga pentransferan menggunakan variabel sisi dalam App.xaml.cs bisa dilakukan.  Ntar kita akan lihat prakteknya biar lebih jelas.

Sekarang marilah kita kembali ke MainPage.xaml kita tadi.

4.  Tekan F7 setelah menampilkan MainPage.xaml untuk masuk ke code-behind-nya.

5.  Tambahkan potongan program ini diatas baris public MainPage().

Potongan program diatas kita tambahkan supaya kita dapat menggunakan beberapa variabel-variabel dan fungsi-fungsi dalam App.xaml.cs yang bisa kita gunakan dan otak-atik.

6.  Kembali ke MainPage.xaml.

7.  Double click pada Button yang kita buat, secara otomatis dia akam membuat suatu Event Click dari Button tersebut, dan           kalian akan masuk ke tampilan MainPage.xaml.cs yang merupakan code-behind MainPage.xaml. Tampilannya akan seperti ini.

8.  Tambahkan potongan program di dalam fungsi tersebut agar terlihat seperti ini.

Sekarang akan saya jelaskan apa maksud dari kodingan diatas. Untuk baris pertama, kita memanggil property Sisi dari app yang merupakan “instansi” dari App.xaml.cs kita. Kita memasukkan inputan user yang ada pada TextBox sisi kedalam variabel sisi dari App.caml.cs. Disinilah dimana set tadi beraksi. Agar kita dapat memasukkan nilai ke dalam variabel sisi. Agar tidak bingung atau pusing lihatlah property Sisi pada App.xaml.cs. Untuk baris kedua, tujuannya adalah untuk melakukan perpindahan ke Halaman2.xaml.

9.  Sekarang kita beralih ke Halaman2.xaml. Tekan F7 untuk masuk ke code-behind-nya.

10. Di sekitar constructor-nya, jadikan programnya seperti ini.

Untuk program di dalam kotak merah pertama sudah saya jelaskan di sebelumnya. Nah, untuk yang program di dalam kotak merah kedua adalah untuk menghitung nilai luas segitiga berdasarkan nilai sisi yang dimasukkan lewat MainPage.xaml dan disimpan lewat “instansi” App.xaml.cs dan menampilannya pada Halaman2.xaml bagian TextBlock cetak tadi. Nah, bagian app.Sisi ini sebenarnya adalah get dari property Sisi pada App.xaml.cs. Tujuannya sudah jelas bukan? Untuk membuat nilai dari variabel sisi yang bersifat private dapat diambil oleh selain dari App.xaml.cs. Kalau get adalah untuk memasukkan nilai, set adalah untuk mengambil nilai.

Sekarang kita lihat bagaimana aplikasi kita… :)

Akan saya masukkan sisi-nya 25.. Gambar dibawah ini tentunya saya perbesar di postingan ini agar jelas terlihat.

MainPage.xaml

Akan saya tekan tombolnya untuk menghitung luas dari perseginya…

Halaman2.xaml

Alhamdulillah sudah selesai sesi tutorial ini. Semoga bermanfaat bagi siapapun yang membaca. Kalau ada kekurangan mohon dimaafkan. Semoga juga sesi berikutnya bisa segera terbit.
Sekian dari saya.
Wassalaamu’alaykum Wr. Wb.

Hello World!

Sama seperti kebanyakan tradisi pemrograman,

Mari awali blog ini dengan membaca do'a basmalah...

Dan saya awali postingan pertama dengan mempost..

Hello World!!