Web Services

Apa itu Web Services ?

Web service adalah aplikasi sekumpulan data (database), perangkat lunak (software) atau bagian dari perangkat lunak yang dapat diakses secara remote oleh berbagai piranti dengan sebuah perantara tertentu.  Secara umum,web service  dapat diidentifikasikan dengan menggunakan URL seperti hanya web pada umumnya. Namun yang membedakan web service dengan web pada umumnya adalah interaksi yang diberikan oleh web service. Berbeda dengan URL web pada umumnya, URL web service hanya menggandung kumpulan informasi, perintah, konfigurasi atau sintaks yang berguna membangun sebuah fungsi-fungsi tertentu dari aplikasi.

Web service dapat diartikan juga sebuah metode pertukaran data, tanpa memperhatikan dimana sebuahdatabase ditanamkan, dibuat dalam bahasa apa sebuah aplikasi yang mengkonsumsi data, dan di platform apa sebuah data itu dikonsumsi. Web service mampu menunjang interoperabilitas. Sehingga web service mampu menjadi sebuah jembatan penghubung antara berbagai sistem yang ada.

Menurut W3C Web services Architecture Working Group pengertian Web service adalah sebuah sistem softwareyang di desain untuk mendukung interoperabilitas interaksi mesin ke mesin melalui sebuah jaringan. Interfaceweb service dideskripsikan dengan menggunakan format yang mampu diproses oleh mesin (khususnya WSDL). Sistem lain yang akan berinteraksi dengan web service hanya memerlukan SOAP, yang biasanya disampaikan dengan HTTP dan XML sehingga mempunyai korelasi dengan standar Web. (Web Services Architecture Working Group, 2004).

Web pada umumnya digunakan untuk melakukan respon dan request yang dilakukan antara client dan server. Sebagai contoh, seorang pengguna layanan web tertentu mengetikan alamat url web untuk membentuk sebuahrequest. Request akan sampai pada server, diolah dan kemudian disajikan dalam bentuk sebuah respon. Dengan singkat kata terjadilah hubungan client-server secara sederhana.

Sedangkan pada web service hubungan antara client dan server tidak terjadi secara langsung. Hubungan antaraclient dan server dijembatani oleh file web service dalam format tertentu. Sehingga akses terhadap databaseakan ditanggani tidak secara langsung oleh server, melainkan melalui perantara yang disebut sebagai web service. Peran dari web service ini akan mempermudah distribusi sekaligus integrasi database yang tersebar di beberapa server sekaligus.

Contoh implementasi Web Services

Pada kesempatan kali ini saya akan mengimplementasikan salah satu fasilitas Web Service yang mudah untuk tempatkan pada blog ini. Web Service tersebut adalah Twitter for Website. Twitter for Websites adalah alat client-side scripting untuk menghubungkan atau mengintegrasi twitter dengan menampilkan tweets di situs web atau aplikasi javascript. yang dapat ditampilkan dari Twitter for Websites ini adalah Tweet Button, Follow Button, Embedded Tweets, bahkan Embedded Timelines. Namun pada kesempatan kali ini saya hanya mengimplementasikan 2 diantaranya, yaitu Embedded Timelines dan Tweet Button. Twitter membagikan Web Service ini secara cuma-cuma dan semua di sebarkan pada Developers Twitter. Untuk langkah penerapannya telah tersedia pada halaman developers twitter untuk masing-masing Widget Content. 

Bahasan yang pertama adalah Embedded Timelines, dapat dilihat pada halaman Embedded Timelines pada dev.twitter.com/web/embedded-timelines

Langkah-langkah untuk menambahkannya adalah :

1. Pertama-tama anda harus sudah log-in pada Twitter untuk membuat widget baru dan pada Blogger untuk menambahkannya pada Blog anda.

2. Masuk pada halaman ini twitter.com/settings/widgets/new atau pilih "Create a new timeline 

    widget" dari halaman dev.twitter.com/web/embedded-timelines 

3. Pilih dekorasi Timelines sesuai keinginan, bila telah sesuai pilih Create Widget.

4. Copy kode hasil dari pembuatan widget dan Paste pada halaman Blog yang kita inginkan.

5. Buka Blogger Dashboard, kemudian pilih menu Layout.

6. Pada bagian Layout pilih Add a Gadget. Setelah muncul jendela baru, pilih HTML/JavaScript

7. Masukan Judul pada kolom judul, lalu Pastekan kode yang telah di Copy pada bagian Content

8. Langkah terakhir adalah klik Save, kemudian klik Save arrangement. Dan kita bisa lihat hasilnya.

Bahasan yang kedua adalah Tweet Button, dapat dilihat pada halaman Tweet Button pada . Tweet Button adalah tombol untuk membagikan atau men-share halaman yang ada kepada pengguna lain di Twitter dengan sebuah Tweet yang berisikan judul halaman, dan url halaman Blog. Langsung saja kepada bagaimana cara mengimplementasikannya :

1. Sama seperti cara untuk memasang Embedded Timelines, Pertama-tama anda harus sudah log-in pada Twitter untuk membuat widget baru dan pada Blogger untuk menambahkannya pada Blog anda.

2. Masuk pada halaman dev.twitter.com/web/tweet-button. Kemudian pilih tautan "Tweet button generator ".

3. Pada halaman ini kita dapat mengubah Tweet Button sesuai apa yang kita inginkan seperti memilih jenis button dan menambahkan option-option untuk button tersebut. Setelah button telah sesuai keinginan, Copy kode yang terdapat pada kolom "Preview and Code" dan Paste ke dalam HTML Tamplate pada Blog kita.

4. Masuk Blogger Dashboard, kemudian pilih menu Template dan pilih Edit HTML.

5. Setelah masuk editor HTML Blogger, kita search tag : 

    <div class='post-share-buttons'>

    Kemudian Paste kode Tweet Button yang telah kita Copy tepat dibawah tag tersebut.

6. Langkah terakhir adalah Save template, dan kita bisa langsung melihat hasilnya.

Itulah sedikit pembahasan tentang Web Services, dari mulai definisi apa itu Web Services hingga pada bagaimana cara mengimplementasikan fasilitas Web Services kedalam blog kita. Dari cara-cara yang sudah diterangkan terlihat cukup mudah bukan ?. Mungkin hanya ini yang dapat kita bahas pada kesempatan kali ini.

Video Microdata dan Web Services

Referensi :

https://en.wikipedia.org/wiki/Web_service
https://w3schools.com/webservices/
https://dev.twitter.com/

Read more

Cara Implementasi Microdata Pada Blog

Berikut ini adalah cara implementasi Microdata pada sebuah halaman web atau blog :


     1.  Langkah yang pertama adalah login pada Blogger.com

     2.  Setelah berhasil login, klik Design, Edit HTML. Untuk antisipasi jika terjadi 

          kesalahan sebaiknya backup terlebih dahulu tamplate sebelumnya.

     3.  Selanjutnya carilah kode seperti ini:

<b:includable id='post' var='post'>

     4.  Bila sudah ditemukan, sisipkan kode ini tepat dibawahnya :

          <div itemscope = "itemscope" itemtype="http://schema.org/Person">
          <span itemprop="name">Ichsan Perdana Putra</span>
          <span itemprop="gender">Male</span>
          <span itemprop="nationality">Indonesia</span>
          <span itemprop="email">chan.perdana@gmail.com</span>
          <span itemprop="url"><a href="twitter.com/IP_13">twitter.com/IP_13</a></span>
          </div>

         nb : kode diatas dapat diubah sesuai keingin, dengan vocabulary dari schema.org

     5. Untuk mengetahui keberhasilannya, testing dengan menggunakan Structured Data 
         Testing Tool dari Google. Atau dapat menggunakan extension web browser jika ada.
         Hasilnya adalah :

Structured Data Testing Tool

Microdata telah berhasil terpasang

Referensi :

http://optimasi-blog.blogspot.com/2012/12/microdata-pada-bloggercom.html
http://schema.org/

Read more

Syarat dan Ketentuan Untuk Menggunakan Microdata

Kosakata atau Vocabulary

Kosakata Microdata menyediakan bentuk semantic atau makna dari suatu benda. Pemilik web dapat membuat kosata khusus atau menggunakan kosakata yang telah tersedia pada web tersebut. Kosakata yang sering digunakan biasanya adalah kosakata dari Schema.org, ini meliputi Person, Event, Organization, Product, Review, Review-aggregate, Breadcrumb, Offer-aggregate dan sebagainya. Schema.org telah digunakan oleh banyak mesin pencarian seperti Google, Yahoo dan Microsoft untuk meningkatkan hasil pencarian mereka. Selain Schema.org, terdapat kosakata yang sering digunakan yaitu Vocabulary.org.

Atribut

Kita harus paham dengan atribut yang akan digunakan dalam sebuah microdata. Berikut adalah atribut-atribut global dan kegunaannya :

•           Itemscope : Menunjukan suatu benda berisi informasi mengenai benda tersebut
•           Itemtype   : Menunjukan sifat-sifat dari suatu benda
•           Itemid       : Menunjukan kode unik atau ID suatu benda
•           Itemprop   : Menunjukan nilai suatu benda seperti nama, elemen dan unsur lain

Contoh Penggunaan atribut :

           <section> Hello, my name is John Doe, I am a graduate research assistant at

the University of Dreams.

My friends call me Johnny.

You can visit my homepage at 

<a href="http://www.JohnnyD.com">www.JohnnyD.com</a>.

I live at 1234 Peach Drive, Warner Robins, Georgia.</section>

Berikut adalah markup yang sama dengan menambahkan Schema.org :

<section itemscope itemtype="http://schema.org/Person">

Hello, my name is

<span itemprop="name">John Doe</span>,

I am a

<span itemprop="jobTitle">graduate research assistant</span>

at the

<span itemprop="affiliation">University of Dreams</span>.

My friends call me

<span itemprop="additionalName">Johnny</span>.

You can visit my homepage at

<a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>.

<section itemprop="address" 

itemscope itemtype="http://schema.org/PostalAddress">

I live at

<span itemprop="streetAddress">1234 Peach Drive</span>,

<span itemprop="addressLocality">Warner Robins</span>,

<span itemprop="addressRegion">Georgia</span>.

</section>

</section>

Penjelasan :

<section itemscope itemtype="http://schema.org/Person">

Tipe yang digunakan adalah orang

<span itemprop="name">John Doe</span>

Untuk item nama

<span itemprop="jobTitle">graduate research assistant</span> 

Untuk item pekerjaan

<span itemprop="affiliation">University of Dreams</span>

Untuk item afiliansi

<span itemprop="additionalName">Johnny</span>

Untuk item nama tambahan

<section itemprop="address" itemscope

itemtype="http://schema.org/PostalAddress">

Tipe yang diubah menjadi alamat

<span itemprop="streetAddress">1234 Peach Drive</span>

Untuk item jalan

<span itemprop="addressLocality">Warner Robins</span>

Untuk item lokasi

<span itemprop="addressRegion">Georgia</span>

Untuk item wilayah bagian

Referensi :

http://en.wikipedia.org/wiki/Microdata_(HTML)
http://schema.org/

Read more

Microdata

Microdata adalah sebuah script baru HTML5 yang memungkinkan data dapat dibaca oleh mesin (dalam hal ini Search Engine) untuk dimasukan dalam sebuah dokumen HTML. Dengan kata lain Microdata membantu komputer untuk memahami isi yang terdapat dari suatu halaman web.

Microdata membuat suatu halaman web lebih mudah untuk diurai dan dimengerti oleh komputer sehingga pengguna dapat menggunakan informasi pada suatu halaman web untuk membuat suatu informasi yang lebih akurat.

Perusahaan Search Engine seperti Bing, Google dan Yahoo menggunakan Microdata untuk menampilkan banyak potongan-potongan data dalam hasil pencarian mereka, seperti sebuah peristiwa, nama seseorang yang terkenal, hingga ke suatu ulasan tertentu. 

Tools Microdata Reveal Google Chrome

Gambar diatas adalah contoh penggunaan Tools Microdata. Terlihat dalam suatu halaman web IMDB, tools tersebut mengambil Microdata yang ada seperti nama film, genre film, tanggal publish dan sebagainya. Sehingga kita dapat menggunakan informasi yang ada dengan lebih mudah dan akurat.

Referensi :

http://webdesign.about.com/od/microdata/a/what-is-microdata.htm

Read more