2013 ~ Teknik Informatika Poltek TEDC Bandung

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

<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.

Tutorial membuat Image Control | Windows Phone | 29 november 2013

20.24 Cerita Kuliah No comments

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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</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

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<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" /

</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

Tutorial membuat halaman pada aplikasi berbasis windows phone | Windows Phone | 22 November 2013

09.03 Cerita Kuliah No comments

Assalamu'alaikum warahmatullahi wabarakatuh

Teman-teman yang berbahagia, selamat membaca kembali di tutorial windows phone, untuk saat ini saya kan menjelaskan tentang bagaimana membuat halaman pada aplikasi windows phone kalian pasti tau aplikasi akan lebih menarik jika tampilannya yang dinamis tidak statis, artinya itu akan memungkinkan berganti halaman. nah kita akan belajar tentang berganti halaman, istilahnya kita sebut "link". oke tidak berlama-lama, mari kita buat new project, dan kalian beri nama "navigationPage" langkah berikutnya kalian buat page. tambah kan text box dan beri nama "input1TXT" tambahkan text block dan beri nama "output2TB" pasangkan text box diatas text block, kalau tambahkan 4 button. nah button ini adalah yang akan menghubungkan antar halaman (page). button 1 berinama "Go Page 2" button 2 berinama "Go Page 3" button 3 berinama "Go Page 4" button 4 beri nama "Go Page 5" kira-kira jadinya akan seperti ini

perlu di ingat, kita membuat 5 page, jadi yang kalian lakukan adalah buat seperti ini sampai 5 page. perlu diperhatikan juga penamaan nya jgn sampai sama dengan page sebelumnya. karna akan error. aplikasi ini akan memunculkan input user di halaman yang user inginkan, misalnya user menginput di MainPage dan menekan button "Go Page 4" nanti kata tersebut akan muncul di page 4. mudahkan? konsepnya ini mudah sekali teman-teman. misalnya kita buat koding di button "Go page 2" maka akan sama jika kita masukan di button "Go Page 3". nih kodingnya pada button:
private void page2BT_Click(object sender, RoutedEventArgs e)
{
string name = input1TXT.Text;
NavigationService.Navigate(new Uri("/views/SecondPage.xaml?name=" + name, UriKind.Relative));
}

maksud dari koding ini text box 1 di isi berupa string, lalu string tersebut di link ke SecondPage.xaml dengan parameter name, untuk NavigationService.Navigate maksudnya yang kita inputkan akan dipindahkan kemana, jadi jangan lupa memakai ini. karna jika tidak maka tidak akan bisa. oh iya sempet lupa, tadi kalian kan sudah bikin 5 halaman (page) nah untuk penamaannya kita samakan saja yaaa page ke 2 beri nama "SecondPage" page ke 3 beri nama "PageThree" page 4 beri nama "PageFour" page ke 5 beri nama "PageFive" nah kalau udah copas koding ini ke setiap button yah.
private void page3BT_Click(object sender, RoutedEventArgs e)
{
string name = input1TXT.Text;
NavigationService.Navigate(new Uri("/views/PageThree.xaml?name=" + name, UriKind.Relative));
}

private void page4BT_Click(object sender, RoutedEventArgs e)
{
string name = input1TXT.Text;
NavigationService.Navigate(new Uri("/views/PageFour.xaml?name=" + name, UriKind.Relative));
}

private void page5BT_Click(object sender, RoutedEventArgs e)
{
string name = input1TXT.Text;
NavigationService.Navigate(new Uri("/views/PageFive.xaml?name=" + name, UriKind.Relative));
}

paham kan yah? jadi ini untuk link ke halaman yang akan kita tuju, nah bagaimana kodingnya menampilkan input user dihalaman lain? ini kan hanya masuk ke halaman. nah
string name = input1TXT.Text;
koding itu menginput jenis string ke dalam text box. lalu bagaimana kodingnya merespon dari koding itu?
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
string name = "";
if (NavigationContext.QueryString.TryGetValue("name", out name))
{
output2TB.Text = String.Format("name = {0}", name);

}
}

koding ini yang akan menampilkan yang user input, jika berhasil akan muncul seperti ini

misalkan kita mau masukan ke page 5

nah seperti ini jadi pada page ini kita masukan koding yang barusan, hanya diganti linknya.

private void page1BT_Click(object sender, RoutedEventArgs e)

{
  string name = input5TXT.Text;
NavigationService.Navigate(new Uri("/views/MainPage.xaml?name=" + name, UriKind.Relative));
}

private void page2BT_Click(object sender, RoutedEventArgs e)
{
  string name = input5TXT.Text;
NavigationService.Navigate(new Uri("/views/SecondPage.xaml?name=" + name, UriKind.Relative));
}

private void page3BT_Click(object sender, RoutedEventArgs e)
{
  string name = input5TXT.Text;
NavigationService.Navigate(new Uri("/views/PageThree.xaml?name=" + name, UriKind.Relative));
}

cukup sekian tutorial kali ini, jadi intinya koding ini hanya dibalikan saja antara halaman satu dengan yang lainnya. mudahkan? yok coba :)
semoga bermanfaat, terimakasih

Aplikasi Sederhana Menggunakan Microsoft Visual Studio | Windows Phone | 15- November- 2013

04.24 Cerita Kuliah No comments

Assalamu'alaikum Warahmatullahi wabarakatuh

Untuk mereview materi sebelumnya, untuk saat ini saya akan kembali mengulas dan menggunakannya ke dalam aplikasi yang akan kita buat, ada point2 yang akan kita buat diantaranya:

1.Menerima/mengirim nilai input/input dari dan ke user
2.Fungsi IF atau SWITCH Statement berdasarkan nilai input yang dimasukan oleh user
3.Fungsi FOR iteration
4.Tanggal sekarang dengan format 15 Septer 2013 08:00:00
5.Penggunaan .NetClass
6.Membuat Class dan Namespace pada file yang baru
7.Penggunaan Collection

Element ini akan ditambahkan pada mini aplikasi yang akan kita buat, untuk point pertama itu mudah sekali, ini sama hanya kaya materi yang saya pernah jelaskan sebelumnya, nah untuk memulai buat new project, setelah anda buat, tambahkan button, text box dan text block. untuk penamaan supaya sama, sama memberi nama button yaitu "clickBT" lalu untuk text box saya kasih nama "inputTXT" sedangkan untuk text block saya kasih nama "outputTB". nah setelah kalian buat, mari kita ngoding :)
masih inget apa yang mesti kita lakukan? ketikan kode ini pada MainPage.xaml.cs

private void clickBT_Click(object sender, RoutedEventArgs e)

{

string newValue;

newValue = inputTXT.Text;

outputTB.Text = "Nama Anda :" + newValue;

}

jika benar maka akan keluar seperti ini,

yess point pertama sudah beres, ini memuat konten input dan output, nah sekarang kita masuk ke point ke 2 yaitu Fungsi IF atau SWITCH Statement berdasarkan nilai input yang dimasukan oleh user. ini sih sudah ada pada materi sebelumnya, gampang saja yu kita langsung sikaaaat! saya memilih menggukan switch karna menurut saya lebih simple dan mudah ditulis. tambahkan dahulu elementnya, tambahkan button dengan nama "click2BT" lalu tambahkan textblock, text block ini berguna sebagai label aja, dan kontennya masukan ini "Kriteria calon istri Idaman Anda (1=Cantik, 2=Sholihah, 3=Kaya)" itu gak perlu diberi nama, karna hanya digunakan sebagai label aja. lalu tambahkan textbox dengan nama "input2TXT" dan tambahkan satu lagi textblock dengan nama "output2TB" setelah kalian tambahkan masukan kode ini pada "click2BT":

private void click2BT_Click(object sender, RoutedEventArgs e)

{

string message;

switch (input2TXT.Text)

{

case "1":

message = "Cantik";

break;

case "2":

message = "Sholihah";

break;

case "3":

message = "Kaya";

break;

default:

message = "Maaf Masukan Pilihan yang tersedia";

break;

}

output2TB.Text = message;

}

nah kita telah menjawab point ke 2, dan yang ke 3 itu menggunakan for, mungkin kalian telah tau penggunaan for. mungkin saya skip saja, dan langsung ke point "Tanggal sekarang dengan format 15 Septer 2013 08:00:00" nah pertama2 mari kita buat button baru, dan tambahkan element textblock dan beri nama "dateTB" lalu click dua kali pada button, dan ketikan kode ini private void button1_Click(object sender, RoutedEventArgs e)

{

DateTime mytime = DateTime.Now;

dateTB.Text = mytime.ToString("dd MMMM yyyy hh:mm:ss");

}

ini coba kalian ketikan kode ini

Button mynewbutton = new Button();

//inisialisasi instan objek dari class button

mynewbutton.Name = "newbutton";

mynewbutton.Height = 100;

mynewbutton.Width = 200;

mynewbutton.Content = "new button";

mynewbutton.Margin = new Thickness(100.0, 100.0, 100.0, 100.0);

//pada margin harus dilengkapi dengan new thickness kalau tidak di lengkapi dengan itu maka dia akan error

mynewbutton.HorizontalAlignment = HorizontalAlignment.Stretch;

mynewbutton.VerticalAlignment = VerticalAlignment.Stretch;

//setting properties nya

//ContentGrid.children.add(mynewbutton);

//untuk memindah kan button ke content grid ,contentgrid ini

TextBox mytextbox = new TextBox();

mytextbox.Name = "new textboxt";

mytextbox.Height = 72;

mytextbox.Width = 456;

mytextbox.Margin = new Thickness(14, 170, 0, 0);

mytextbox.TextWrapping = TextWrapping.Wrap;

mytextbox.Text = "new textbox";

mytextbox.VerticalAlignment = VerticalAlignment.Top;

//tidak bisa langung di tulis kan top ,jika error langsung saja di arahkan pointer nya ke arah yang error

//contentGrid.children.add(mytextbox);

}

private void textBox1_TextChanged_1(object sender, TextChangedEventArgs e)

{

}

sekian untuk tutorial ini, semoga bermanfaat :)

tutorial xaml sintaks, layout control, Silver light event handler, input control | Windows Phone | 08 November 2013

19.52 Cerita Kuliah 1 comment

Assalamu'alaikum warahmatullahi wabarakaatuh

Okeh saya akan membahas mengenai "xaml sintaks", seperti kita ketahui pada tutorial sebelumnya kita sering menggunakan xaml, karna pada windows phone menggunakan xaml sintaks. yaa untuk mempersingkat waktu mari kalian buat new project. beri nama "XamlSintaks", nah mari saya akan sedikit menjelaskan tentang xaml sintaks, pada MainPage.xaml ada di bagian atas code seperti ini x:Class="XamlSintaks.MainPage" itu adalah "Mainpage" sebuah class, dan "XamlSintaks" adalah nama namespace atau nama project yang barusan kita buat. akan secara otomatis nama tersebut akan sama dengan file MainPage.xaml.cs karna kalau beda maka tidak akan bisa terhubung antara file MainPage.xaml dengan MainPage.xaml.cs. nah kemudian ada sintaks xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
apakah maksud dari kode tersebut? jadi maksudnya adalah sama halnya dengan "Using" ini telah saya bahas pada tutorial sebelumnya, jadi anda tidak perlu khawatir untuk menuliskan kode ini, karna secara default akan ada pada file MainPage.xaml lalu bagaimana dengan ini?
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
"d" itu sama dengan kode ini
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
memakai blend, nanti kita akan menggunakan microsoft blend untuk merubah tampilan, lalu ada Width dan Height itu jika kita ubah akan berpengaruh pada kompiler aplikasi kita. lalu ada kode ini
SupportedOrientations="Portrait" Orientation="Portrait"
maksud "SupportedOrientations" adalah orientasi yang aplikasi suport ini hanya potrait saja, dan maksud dari "Orientation" adalah default tampilan saat aplikasi di running. contohnya seperti ini

ya seperti ini, ini merupakan defaulnya saat tampilan pertama aplikasi yang akan kita buat, ketika devicenya di miringkan, jika "SupportedOrientations" nya hanya potrait maka akan seperti ini

nah jadi tulisannya akan seperti ini. lalu kode ini apa?

shell:SystemTray.IsVisible="True">

jika ini true maka akan muncul seperi tampilan sinyal pada kompiler kita, kalau bernilai false, tidak akan muncul tampilan tersebut. lalu kita coba masukan kode ini

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

nah akan muncul seperti itu jadi tampilannya bisa potrait juga bisa landscape.

sekarang kita masuk ke tutorial layout control, hal ini sangat dibutuhkan karna ini menentukan user experience dalam aplikasi, kalau kita ibaratkan dengan web para developer menggunakan css. okeh kita akan mulai dengan new project, dan beri nama "LayoutControl", nah disini saya akan menjelaskan beberapa point:

- Grid

- Stack Panel

- Canvas

disini saya akan coba masukan element canvas, kalian cari di toolbox. kita akan bermain di margin, yah.. setelah kalian tambahkan canvas pada device coba geserkan ke kanan dan ke kiri, itu akan membuat marginnya berubah-ubah. kalau di device saya

tidak ada tulisan margin berapanya, jadi bisa kita lihat di codingnya, mengapa ada tanda panah ke kiri dan kebawah? sedangkan ke atas dan ke kanan tidak ada? karna di kode itu ada

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

inilah yang membuat seperti itu, jika kita ubah dari Left ke Right sedangkan dari bottom ke top, akan berbeda lagi arah panahnya. lalu bagaimana jika kita mau menampilkan semuanya? caranya gampang, tinggal kita ganti dari Left menjadi Stretch dan dari bottom menjadi Stretch juga. akan tampil seperti ini,

nah seperti ini. sekarang mari kita hapus canvas yang tadi kita buat, dan saya akan sedikit menjelaskan tentang kode

<Grid.RowDefinitions>

</Grid.RowDefinitions>

saya akan menambahkan element baru namanya Grid, disini saya gunakan Stretch supaya Grid ini berada di tengah lalu marginnya gunakan 0 semuanya supaya berada tepat ditengah-tengah caranya seperti ini

grid tersebut akan secara otomatis, ke tengah-tengah lalu masukan kode ini pada grid yang telah anda buat

<Grid.RowDefinitions>

<Grid.RowDefinitions Height="60"/>

<Grid.RowDefinitions Height="60*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

jika berhasil, maka akan keluar seperti ini

sama seperti kita membuat table sih, tapi yang ini lumayan membingungkan. lalu bagaimana jika kita mau menambahkan bottom di dalam grid tersebut?

tinggal ketikan code bottom di dalam grid tersebut dan ingat, kita akan masukan buttom dimana? apakah di row 2 colomn 1 apa dimana? nah nanti jangan lupa masukan kita akan masukan buttom dimananya. nah cukup sekian, InsyaAllah pembahasannya akan dilanjutkan lagi karna berhubung saya ada tugas lagi, wassalamu'alaikum warahmatullahi wabarakaatuh...

Tutorial .NET dan Silverlight, namespace, collection | Windows phone | 1 NOVEMBER 2013

19.15 Cerita Kuliah No comments

Assalamu'alaikum warahmatullahi wabarakaatuh..
tema tutorial kali ini adalah play with .NET and Silverlight, di windows phone ini kita akan menggunakan .NET framework yang sudah dibuat pada microsoft dan silverlight ini adalah sebuah framework untuk membuat aplikasi sedangkan untuk game menggunakan framework XNA. nah untuk XNA mungkin kita akan bahas pada sesi lain, nah di project sebelumnya yang namanya "date and time" coba deh kalian buka kembali. yang ada pada gambar ini

nah DateTime adalah sebuah class .NET library karna ini udah dibuat default oleh microsoft, jadi DateTime ini harus di ikuti oleh new. sama halnya dengan TimeSpan sebuah class .NET juga yang harus adanya inisialisasi. ada beberapa class dari .NET library ini yang tidak perlu instance, contohnya adalah:

nah untuk class String bisa langsung berdiri sendiri, contohnya seperti gambar diatas. selain class ini ada banyak lagi yang tidak perlu instance. mari kita buat project baru

new project >> pilih visual C# >> Windows Phone Application >> beri nama project dengan nama "CreateAButton" lalu tambahkan Button dan beri content "Add Element" dan Text Box dengan text "First Text Box" nah di microsoft visual studio 2010 kalau kita buat file baru, ada dua file yaitu MainPage.xaml dan MainPage.xaml.cs nah pada element ini

adalah contoh dari class .NET library bisa kalian lihat jika kursor kalian di arahkan ke Button maka akan muncul tulisan "System.Windows.Control.Button" artinya ini merupakan class dari button. oh ya itu yang ada pada gambar di atas, "ContentPanel" harap diganti menjadi "ContentGrid" supaya sama dengan tutorial. lalu anda ketikan kode ini:

private void button1_Click(object sender, RoutedEventArgs e)

{

Button myNewButton = new Button();

myNewButton.Name = "newButton";

myNewButton.Height = 100;

myNewButton.Width = 200;

myNewButton.Content = "New Button";

myNewButton.Margin = new Thickness(100.0, 100.0, 100.0, 100.0);

myNewButton.HorizontalAlignment = HorizontalAlignment.Stretch;

myNewButton.VerticalAlignment = VerticalAlignment.Stretch;

ContentGrid.Children.Add(myNewButton);

TextBox myTextBox = new TextBox();

myTextBox.Name = "newTextBox";

myTextBox.Height = 72;

myTextBox.Width = 456;

myTextBox.Margin = new Thickness(14, 170, 0, 0);

myTextBox.TextWrapping = TextWrapping.Wrap;

myTextBox.Text = "New Text Box";

myTextBox.VerticalAlignment = VerticalAlignment.Top;

ContentGrid.Children.Add(myTextBox);

}

coding ini, adalah membuat element dari MainPage.xaml.cs yang biasanya kita buat element itu tinggal drag and drop, sekarang kita buat melalui koding. mudah kan?
hasilnya akan seperti ini:

okeh materi selanjutnya adalah Mengenal Name Space. jika kita lihat ke aplikasi sebelumnya, kita selalu menggunakan namespace.

nah seperti ini namespace tuh. saat kita buat project baru, pasti namespace ini akan digunakan secara default. namespace adalah sebuah cara untuk "membungkus" sebuah code, ini akan berguna sekali ketika code ini besar atau banyak. contoh logikanya seperti ini, ada dua nama "opik". opik yang pertama berada di bandung sedangkan opik yang satunya berada di jakarta. jadi kita tidak akan pernah tertukar opik yang di bandung dengan opik yang di jakarta.

jadi opik ini adalah nama class, sedangkan bandung adalah nama namespacenya jadi nama class dibungkus oleh namespace. jadi ketika kita memanggil nama class yang sama itu tidak akan tertukar karna kita memakai namespace, kecuali kalau kita tidak menggunakan namespace akan akan ada dua class, jadi bingung mana yang akan dipanggil. kalau masih di basic itu masih blm kerasa kegunaan namespace saat aplikasi besar, maka akan berguna sekali menggunakan namespace. okeh kalian buat new project.
new project >> pilih visual C# >> Windows Phone Application >> beri nama project dengan nama "UnderstandingNameSpaces"
lalu kita tambahkan Button, dan dua text box. text box pertama beri nama "namespace1" dan untuk text box kedua beri nama "namespace2". ketika code ini ke dalam button

jadi seperti ini, disini saya menggunakan class IsolatedStorageSettings adalah sebuah class yang dapat menyimpan data di lokal HP kita, namanya IsolatedStorageSettings. untuk System.IO.IsolatedStorage adalah nama namespace, jadi didalam namespace "System" ada namespace "IO" juga didlmnya ada namespace "IsolatedStorage" dan didlmnya ada class namanya "IsolatedStorageSettings" apakah dapat dimengerti?

coba kita liat di bagian paling atas..

nah bisa anda lihat "using" ini adalah sebuah deklarasi untuk menggukan suatu namespace. jika kita pindahkan "System.IO.IsolatedStorage" ke bagian paling atas, maka akan secara otomatis kita tidak perlu menggunakan code yang ada digambar yang atas. cukup menggunakan ini.

private void button1_Click(object sender, RoutedEventArgs e)

{

IsolatedStorageSettings mySetting =IsolatedStorageSettings.ApplicationSettings;

}

nah seperti ini, jadi kita tidak cape mengetik ulang. oke sekarang kita akan membuat namespace yang baru. coba ketikan code ini

namespace FirstSpace

{

class TestClass

{

public string getString()

{

return "Inside First Space";

}

namespace SecondSpace

{

class TestClass

{

public string getString()

{

return "Inside Second Space";

}

hati kurung kurawalnya berlebihan atau kurang, harus diperhatikan baik-baik. ini kan kita mempunya nama class yang sama, lalu akan kita panggil satu-satu. seperti contoh yang tadi. untuk memanggilnya ketikan kode ini

FirstSpace.TestClass firstNameSpace = new FirstSpace.TestClass();

SecondSpace.TestClass secondNameSpace = new SecondSpace.TestClass();

namespace1.Text = firstNameSpace.getString();

namespace2.Text = secondNameSpace.getString();

bagaimana hasilnya? coba kalian lihat sendiri :)

cukup sekian tutorial dari saya semoga bermanfaat, wasalamu'alaikum warahmatullahi wabarakaaatuh

Tutorial date and time, build class | Windows Phone | 25 Oktober 2013

09.55 Cerita Kuliah No comments

Okeh seperti biasa untuk minggu ini saya akan sedikit menjelaskan tentang Tutorial mengenai pembuatan date and time, lalu membuat sebuah class. date and time ini banyak sekali digunakan. terutama oleh media sosial seperti

mengapa sangat diperlukan? karna date and time ini merupakan history yang pernah kita lakukan pada media sosial tertentu. untuk memperjelas kapan kita melakukan pembaruan (update), jadi kita harus gunakan date and time ini. yah untuk tidak berlama-lama lagi mari kita mulai pembelajaran windows phone ini
nah yang pertama mari kita buka microsoft visual studio 2010.
new project >> pilih visual C# >> Windows Phone Application >> beri nama project dengan nama "date and time"
lalu tambahkan element button dan text block lalu buttonnya kita kasih nama "showTimeBT" dan textblocknya kita kasih nama "timeTextBlock" lalu double click pada button.
ketikan code ini:

private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
DateTime myTime = DateTime.Now;
timeTextBlock.Text = myTime.ToString();
}
maka hasilnya akan terlihat seperti ini.

nah ada lagi format membuat date and time,
private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
DateTime myTime = DateTime.Now;
//timeTextBlock.Text = myTime.ToString();
timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToShortDateString(), myTime.ToShortTimeString());
}
coban anda bedakan dengan yang ini
private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
  DateTime myTime = DateTime.Now;
  //timeTextBlock.Text = myTime.ToString();
timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToLongDateString(), myTime.ToLongTimeString());
apa perbedaannya antara ToShortDateString dengan ToLongDateString?

private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
  DateTime myTime = DateTime.Now;
  //timeTextBlock.Text = myTime.ToString();
//timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToLongDateString(), myTime.ToLongTimeString());
timeTextBlock.Text = DateTime.now.AddDays(5).ToString();
liat apa yang akan terjadi. maka jumlah hari akan bertambah 5, misalkan hari ini tgl 24 maka akan muncul tgl 29. begitu pula sebaliknya jika kita memberikan (-5) maka hari ini dikurangi 5. ada pula coding ini
private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
DateTime myTime = DateTime.Now;
//timeTextBlock.Text = myTime.ToString();
//timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToShortDateString(), myTime.ToShortTimeString());
timeTextBlock.Text = myTime.ToString("dd MMMM yyyy hh:mm:ss");
}
perlu diperhatikan untuk penulisan format ini sangat sensitif. misalkan penulisan pada "MMMM" itu harus besar, karna jika tidak hasilnya sidak akan sesuai dgn yang kita inginkan, seharusnya muncul bulan. namun jika kita tulis "mmmm" maka akan keluar "54".
private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
  DateTime myTime = DateTime.Now;
  //timeTextBlock.Text = myTime.ToString();
//timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToShortDateString(), myTime.ToShortTimeString());
timeTextBlock.Text = myTime.ToString("dddd, dd MMMM yyyy hh:mm:ss");
}

jika kita menuliskan code ini maka akan muncul, nama hari. nah ini menurut saya yang menarik, bagaimana sih menampilkan date and time menggunakan bahasa indonesia? gimana hayooo?
mudah saja. langkah pertama tambahkan dulu di yang paling atas:

setelah itu masukan coding ini,

private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
DateTime myTime = DateTime.Now;
//timeTextBlock.Text = myTime.ToString();
//timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToShortDateString(), myTime.ToShortTimeString());
CultureInfo CultureInfo = new CultureInfo("id-ID");
timeTextBlock.Text = myTime.ToString("dddd, dd MMMM yyyy hh:mm:ss", CultureInfo);
}

maka akan muncul tanggal,bulan,hari dengan format bahasa indonesia. perlu dipahami bahwa kode "id-ID" merupakan kode negara indonesia, jadi kalau kita hendak memberikan format negara jerman misalnya harus menggunakan kode negara jerman. cari saja ke mbah gugle.
Anda ingin mengetahui umur anda berapa sampai saat ini? check this out this code!
private void showTimeBT_Click(object sender, RoutedEventArgs e)
{
//DateTime myTime = DateTime.Now;
//timeTextBlock.Text = myTime.ToString();
//timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToShortDateString(), myTime.ToShortTimeString());
//CultureInfo CultureInfo = new CultureInfo("id-ID");
//timeTextBlock.Text = myTime.ToString("dddd, dd MMMM yyyy hh:mm:ss", CultureInfo);
DateTime myBirtday = new DateTime(1992, 03, 31);
TimeSpan timespan = DateTime.Now.Subtract(myBirtday);
timeTextBlock.Text = String.Format("{0} hari {1} jam {2} detik", timespan.Days, timespan.Hours, timespan.Seconds);
}
pengen tau caranya seperti ini?

inilah masterpeace koding tutorial kali ini, check this out!

private void showTimeBT_Click(object sender, RoutedEventArgs e)

{

//DateTime myTime = DateTime.Now;

//timeTextBlock.Text = myTime.ToString();

//timeTextBlock.Text = String.Format("Date {0} Time {1}", myTime.ToShortDateString(), myTime.ToShortTimeString());

//CultureInfo CultureInfo = new CultureInfo("id-ID");

//timeTextBlock.Text = myTime.ToString("dddd, dd MMMM yyyy hh:mm:ss", CultureInfo);

DateTime myBirtday = new DateTime(1993, 05, 05);

TimeSpan timeSpan = DateTime.Now.Subtract(myBirtday);

//timeTextBlock.Text = String.Format("{0} hari {1} jam {2} detik", timespan.Days, timespan.Hours, timespan.Seconds);

timeTextBlock.Text = relativeTimeAgo(timeSpan);

}

private string relativeTimeAgo(TimeSpan timeSpan)

{

const int SECOND = 1;

const int MINUTE = 60 * SECOND;

const int HOUR = 60 * MINUTE;

const int DAY = 24 * HOUR;

const int MONTH = 30 * DAY;

double delta = Math.Abs(timeSpan.TotalSeconds);

if (delta < 0)

{

return "not yet";

}

if (delta < 1 * MINUTE)

{

return timeSpan.Seconds == 1 ? "one second ago" : timeSpan.Seconds + "seconds ago";

}

if (delta < 2 * MINUTE)

{

return "a minute ago";

}

if (delta < 45 * MINUTE)

{

return timeSpan.Minutes + "minutes ago";

}

if (delta < 90 * MINUTE)

{

return "an hour ago";

}

if (delta < 24 * HOUR)

{

return timeSpan.Hours + "hours ago";

}

if (delta < 48 * HOUR)

{

return "yesterday";

}

if (delta < 30 * DAY)

{

return timeSpan.Days + "days ago";

}

if (delta < 12 * MONTH)

{

int month = Convert.ToInt32(Math.Floor((double)timeSpan.Days / 30));

return month <= 1 ? "one month ago" : month + "months ago";

}

else

{

int years = Convert.ToInt32(Math.Floor((double)timeSpan.Days / 365));

return years <= 1 ? "one years ago" : years + "years ago";

}

untuk lebih jelasnya

Untuk materi kedua, langsung aja cek video ini yah, udah lengkap banget ini

Teknik Informatika Poltek TEDC Bandung

Welcome To My Blog

Follow Me

Categories

Rabu, 11 Desember 2013

tutorial application bar | windows phone | 6 Desember 2013

Rabu, 04 Desember 2013

Tutorial membuat Image Control | Windows Phone | 29 november 2013

Rabu, 27 November 2013

Tutorial membuat halaman pada aplikasi berbasis windows phone | Windows Phone | 22 November 2013

Kamis, 21 November 2013

Aplikasi Sederhana Menggunakan Microsoft Visual Studio | Windows Phone | 15- November- 2013

Rabu, 13 November 2013

tutorial xaml sintaks, layout control, Silver light event handler, input control | Windows Phone | 08 November 2013

Rabu, 06 November 2013

Tutorial .NET dan Silverlight, namespace, collection | Windows phone | 1 NOVEMBER 2013

Rabu, 30 Oktober 2013

Tutorial date and time, build class | Windows Phone | 25 Oktober 2013

Blog Archive

Translate

Blogroll

About Me

About

Follow Me

Categories

Rabu, 11 Desember 2013

Rabu, 04 Desember 2013

Rabu, 27 November 2013

Kamis, 21 November 2013

Rabu, 13 November 2013

Rabu, 06 November 2013

Rabu, 30 Oktober 2013

Social Profiles

Blog Archive

Translate

Blogroll

About Me

About