Aplikasi Parsing XML || Windows Phone - 27 Desember 2013

Assallamu'allakum Jumat~
 Juma'ah Mubarokah !
Assalamu'allaikum Visual Advanced Pogramming~

Dan keyword minggu ini adalah “lagu favorit" Lagu kesukaan saaku adalah "Simfoni by Once" ehehehe karena ya suka aja... musik nya tuh dimainin sama orkestra... lagu nya terkesan mewah bgt... dan itu keren ehehehe

Hmm kembali lagi kepraktikum minggu ini,,,

Di minggu ini kita akan membuat Aplikasi untuk Menampilkan Biodata dari salah satu girlband korea. Data – data tersebut akan kita di simpan dalam bentuk Xml.

 

Pertama kita buka aplikasi Microsoft Visual Studio 2010 for windows phonenya :

1. Buka aplikasi windows phone – new project – name dan solution name (AplikasiParsingXml)
2. Kemudian Pilih platform Windows Phone 7.1
3. Klik kanan – Add – New Item -  tambahkan folder baru dengan nama ViewModels
4. Klik kanan pda folder ViewModels – tmbah folder baru (Image)masukkan gambar
   
5. Klik kanan pada folder ViewModels – Add – New item - tambah kan class baru denga nama Member.cs

Berikut adalah isi dari class Member. cs

using System;

using System.Collections.Generic;

using System.Diagnostics;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace AplikasiParsingXml.ViewModels

{

    public class Member

    {

        public string name { get; set; }

        public string birth { get; set; }

        public string picture { get; set; }

        public string place { get; set; }

        public string height { get; set; }

        public string blood { get; set; }

        public string histories { get; set; }

    }

Buka halam MainPage.xaml tambahkan koding berikut ini pada “Control Panel” :

<ListBox x:Name="MainListBox" Margin="0,0,-12,0" SelectionChanged="MainListBox_SelectionChanged">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <Image Height="150" Width="150" Source="{Binding picture}"></Image>

                        <StackPanel Margin="0,0,0,17" Width="332" Height="78">

                            <TextBlock Text="{Binding name}" TextWrapping="Wrap"

                                       Style="{StaticResource PhoneTextExtraLargeStyle}"/>

                            <TextBlock Text="{Binding birth}" TextWrapping="Wrap" Margin="12,-6,12,0"

                                       Style="{StaticResource PhoneTextSubtleStyle}"/>

                        </StackPanel>

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

Buka file MainPage.xaml.cs tambahkan beberapa reference untuk kebutuhan parsing xml:

using System;

using System.Collections.Generic;

using System.Diagnostics;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Collections.ObjectModel;

using System.Xml.Linq;

using Microsoft.Phone.Shell;

using AplikasiParsingXml.ViewModels;

namespace AplikasiParsingXml

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

        //Selanjutnya buat Method MainPage_Loaded, karena kode diatas memanggil MainPage_Loaded

        private void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            ObservableCollection <Member> Items = new ObservableCollection <Member>();

            //add from xml

            XDocument XDoc = XDocument.Load("data.xml");

            foreach (var member in XDoc.Descendants("member"))

            {

                ItemViewModel item = new ItemViewModel();

                item.name = member.Element("name").Value;

                item.birth = member.Element("birth").Value;

                item.picture = member.Element("picture").Value;

                item.place = member.Element("place").Value;

                item.height = member.Element("height").Value;

                item.blood = member.Element("blood").Value;

             foreach

               (var historyItem in XDoc.Descendants("history"))

                {

                    item.histories += historyItem.Element("item").Value + ", ";

                }

                Items.Add(item);

            }

            MainListBox.ItemsSource = Items;

        }

        //Buat method yang dipanggil ketika item dari LisTBox di pilih

        private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            if (MainListBox.SelectedIndex == -1)

            return;

            PhoneApplicationService.Current.State["Item"] = MainListBox.SelectedItem;

            NavigationService.Navigate(new Uri("/DetailsPage.xaml", UriKind.Relative));

            MainListBox.SelectedIndex = -1;

        }

    }

}

Selanjutnya kita buat halaman detail untuk Member.

 Klik kanan pada project pilih Add -> New Item -> Windows Phone Potrait Page, berinama “DetailsPage.xaml” . Tambahkan koding berikut pada “Control panel”.

<Image Source="{Binding picture}" Width="150" Height="150" HorizontalAlignment="Left"></Image>

            <TextBlock Text="name :"></TextBlock>

            <TextBlock Text="{Binding name}"></TextBlock>

            <TextBlock Text="birth :"></TextBlock>

            <TextBlock Text="{Binding birth}"></TextBlock>

            <TextBlock Text="place :"></TextBlock>

            <TextBlock Text="{Binding place}" TextWrapping="Wrap"></TextBlock>

            <TextBlock Text="height :"></TextBlock>

            <TextBlock Text="{Binding height}"></TextBlock>

            <TextBlock Text="blood type:"></TextBlock>

            <TextBlock Text="{Binding blood}"></TextBlock>

            <TextBlock Text="histories :"></TextBlock>

            <TextBlock Text="{Binding histories}" TextWrapping="Wrap"></TextBlock>

Buka file DetailPage.xaml.cs dan tambahkan method berikut :

protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            if

                (PhoneApplicationService.Current.State.ContainsKey("Item"))

            {

                DataContext = PhoneApplicationService.Current.State["Item"];

            }

        }

Nah selanjutnya tambahkan reference System.xml.Linq.  Caranya Klik Kanan pada project Add Reference - System.Xml.Linq. Dan tambahkan file Data.xml pada project yg udah kita buat,,
nah di data.xml itu berisi biodata . Klik kanan – New item – XML file (data.xml).

Example :

Inilah ceritaku... apa ceritamu ?

Read More … Aplikasi Parsing XML || Windows Phone - 27 Desember 2013

Input Scope || Windows Phone - 20 Desember 2013

Allhamdulillah udah jum'at lgi ihh meni teu ka raos~

Dan jum'at ini bapa nya udah sembuh ahahahaha tapi aku datang telat... abis dari percetakan mabroooo~ *curhat*
pas aku masuk, anak-anak + dosen-dosen flat-flat aja lah... aku inisiatif aja tanya "Pa, aku telat loh... ko ga ada keyword ny sih ?" anak-anak malah pda teriak "nyanyi-nyanyi" wkwkwk efek dangdutan-dangdutan mulu nih dikelas... ahahaha
Keyword absensi hari ini adalah "Apa yang kamu banggakan dari Politeknik TEDC Bandung"  mau tau ga jawaban aku apa ? Udah bisa ketebak belum ? ahahahaha
aku jawab, "Bangga dengan Jembatan Polteknya" ahahahaha padahal situasi jembatan poltek saat ini lagi longsor lah... konyol.. ckckckckk

Udah ahh~ kembali kemateri yu cyyynnnnn...

praktekkan cara menggunakan input scope tersebut .

• Buka visual studio 2010, pilih file kemudian pilih new project.
• Pilih visual c# dan windows phone app.
• Beri nama InputScopeApp
• Pilih windows phone Os 7.1.
• Buat tiga buah textbox dan textblock.
• Kemudian masukkan coding seperti gambar yang telah saya tandai di bawah ini.

• kemudian anda tinggal merubah name valuenya sesuai dengan kebutuhan anda.
• Dan berikutnya anda hanya tinggal menambahkan coding yang di blok tersebut, untuk menambahkan input scopenya.
• Jalankan program, dan begitulah cara menggunakan input scope ini.

Berikutnya mari kita bahas materi lanjutannya mengenai isolated storage, isolated storage merupakan sebuah penyimpanan yang terisolasi. Jadi, windows phone ini menyediakan sebuah API buat kita para pengembang software agar bisa menyimpan file-file kita yang di butuhkan aplikasi.

Isolated storage ini terbagi dua, yaitu file storage dan setting storage. Jadi kita bisa menyimpan dalam bentuk file atau settingan. Dan untuk menjaga keamanan, walaupun windows phone menyediakan isolated storage, kita hanya dapat mengakses isolated storage pada aplikasi kita sendiri. Jadi, aplikasi yang lainnya, tidak akan bisa kita buka isolated storagenya melalui aplikasi kita, kecuali data kontak atau data sms.

Walaupun windows phone menyediakan isolated storage ini dengan kapasitas tidak terbatas, selaku pengembang yang bijak, kita juga harus tau, bahwa smartphone itu, storagenya sangat kecil. Jadi jangan sampai aplikasi kita itu membebani smartphone kita.

Seperti itulah penjelasan singkat mengenai isolated storage, file storage dan setting storage. Saya rasa masih cukup mudah dipahami, karena penjelasan ini masih sangat sederhana. Nanti kedepannya saya akan mempraktek kan bagaimana cara penggunaan isolated storage, file storage dan setting storage dalam sebuah aplikasi sederhana, agar anda dapat lebih mudah memahami masing masing dari setiap fungsi berikut.

saya rasa cukup sampai disini dulu tutorial saya semoga bermanfaat untuk semuanya. Dan saya mohon maaf kepada bapak dosen,  atas keterlambatan postingan minggu ini di karenakan gangguan koneksi sebelumnya .. mohon di maklumi ..

Read More … Input Scope || Windows Phone - 20 Desember 2013

Tidak Ada Pertemuan || Windows Phone - 13 Desember 2013

Assalamu'allaikum jum'at~

Hari ini ternyata ga ada pertemuan loh....... Kata-katanya sih bapa nya sakit..... Cepat sembuh ya bapa biar bisa ktmu lgi di jumat depan ehehehe

Dan tumben-tumbenan sekali kita ga ada tugas.. ada sih.... bikin project untuk UAS..
tpi bingung.... soalnya belum ajuin judulnya.... jadi aja ampe lupa ga upload deh... ehehehe

Read More … Tidak Ada Pertemuan || Windows Phone - 13 Desember 2013

Application Button || Windows Phone - 6 Desember 13

Assalamu’allaikum Jum’at…….

Subbhanallah ya jum’at dating begitu cepat…. Dan setiap jum’at akan selalu bertemu dengan Advanced Visual Programming..

Udah lama ga ngitung jumlah pertemuan…..dan ga kerasa sekarang udah sampe di pertemuan ke 12… ckckckk subhanallah.. waktu berjalan bgtu cepat…saking betah nya di dunia nih…

Dan pengabsenan kali ini, keyword nya adalah “Apa yang kamu banggakan dari indonesia”…. Beberapa temen-temen ada yang jawab “karena sumberdaya alamnya”, ”karena makanan-makanannya”, ada juga yang jawab “Karena pahlawan-pahlawan nya”, “karena koruptor-koruptornya” dank arena ga boleh sama tiap orang…… aku jawab aja “aku bangga sama Indonesia karena kamu~ (nada genit)” wkwkwkwkwk sontak sekelas pada ngetawain ehehehe

Hayu ahh cuss balik lgi ke matakuliah nya ehehehe Latihan kali ini membahas tentang Application Bar Icon Button dan Application Bar Menu Item.  Application bar icon button ini merupakan sebuah tombol yang akan muncul di bar atau bagian bawah aplikasi. Tombol inilah yang di sebut application bar icon button. 

Tepat di sebelah kanan button, ada symbol “…” yang apabila tombol ini di klik, akan menampilkan application bar menu item.  Application bar menu item ini merupakan menu yang tampil seperti biasa, tetapi bedanya, menu ini terdapat di dalam application bar.

Langsung saja kita praktekkan latihan application bar ini :

Sebelum kita mengisikan  item-item dan codding-nya, terlebih dahulu ikuti langkah-langkah berikut :

• Buka file C pada laptop/PC anda
• Kemudian pilih program file (untuk windows phone 2010 (32 Bit), tapi kalau anda memakai  64 Bit, maka yang anda pilih program file x86).
• Selanjutnya pilih Microsoft SDKs
• Pilih Windows Phone
• Dan pilih yang v7.1
• Pilih Icon
• Pilih Dark
• Pilih icon yang anda butuhkan. Tapi dalam tutorial saya kali ini, saya akan mencontoh kan 4 icon, yaitu icon appbar.add.rest, appbar.cancel.rest, appbar.check.rest. dan appbar.delete.rest.

Setelah itu langsung saja kita praktekkan pembuatan application bar tersebut :

• Buka visual studio 2010, pilih file kemudian pilih new project.
• Pilih visual c# dan windows phone app.
• Beri nama ApplicationBar
• Pilih windows phone Os 7.1.
• Terlebih dahulu kita kan membuat folder baru pada project yang akan kita buat. Folder ini berfungsi untuk menyimpan gambar icon yang akan kita pergunakan. Berilah nama folder tersebut dengan nama “Images”, setelah itu, buat satu folder lagi di dalam folder images tersebut, berilah nama “AppBar” pada folder  tersebut. Kemudian masukkan gambar yang anda pilih tadi ke dalam folder AppBar tersebut.
• Guna dari folder AppBar ini yaitu untuk mengorganisir images yang khusus untuk aplikasi bar saja. 
• Blok ke empat  gambar icon pada folder AppBar.
• Lihat pada menu properties dan search “Build Action”
• Klik pada kotak build actionnya dan pilih “Content”.
• Kemudian buka MainPage.xaml, sekarang kita akan memasang icon-icon itu pada bar-nya. Pada aplikasi Microsoft Visual windows phone 2010,  menu bar-nya telah disiapkan, namun codding-nya masih dalam bentuk coment. Untuk lebih jelasnya, anda bisa melihat coding di bawah ini :

<phone:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

            <shell:ApplicationBarIconButton x:Name="addAB" IconUri="/images/appbar/appbar.add.rest.png" Text="add" Click="addAB_Click" />

            <shell:ApplicationBarIconButton x:Name="cancelAB" IconUri="/images/appbar/appbar.cancel.rest.png" Text="cancel" Click="cancelAB_Click"/>

            <shell:ApplicationBarIconButton x:Name="checkAB" IconUri="/images/appbar/appbar.check.rest.png" Text="check" Click="checkAB_Click" />

            <shell:ApplicationBarIconButton x:Name="downloadAB" IconUri="/images/appbar/appbar.download.rest.png" Text="download" Click="downloadAB_Click" />

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem x:Name="menuitem1" Text="MenuItem 1" Click="menuitem1_Click" />

                <shell:ApplicationBarMenuItem x:Name="menuitem2" Text="MenuItem 2" Click="menuitem2_Click" />

            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>

    </phone:PhoneApplicationPage.ApplicationBar>

   

</phone:PhoneApplicationPage>

Maka application bar tersebut telah selesai di buat. Seperti tampilan di bawah ini :

Sekarang saya akan membuat icon button tersebut dapat  berfungsi saat saya mengkliknya.

Langkah pertama yaitu , saya akan membuat folder baru lagi pada file ApplicationBar dan nama foledernya yaitu “Views” setelah itu saya akan membuat item baru pada folder Views tersebut, caranya :

Buat sebuah halaman lagi, misalkan saja kita membuat page download.

Kemudian klik pada button downloadnya, masukkan coding berikut :

NavigationService.Navigate(new Uri("/view/downloadpage.xaml", UriKind.Relative));

Ini baru 1 button yang dikasih fungsi yaaaaaaaa… anda bisa menambahkan beberapa aksi lain agar aplikasi lebih menarik…

Owkey~

Ini ceritaku…. Apa ceritamu ?

Read More … Application Button || Windows Phone - 6 Desember 13