Memulai dengan Sumber Data

Bagian ini memperkenalkan SimpleExampleServlet, yang merupakan contoh implementasi paling sederhana dari sumber data yang disediakan dengan library. Bagian ini juga memberikan petunjuk langkah demi langkah tentang cara menjalankan dan menguji SimpleExampleServlet.

Memperkenalkan SimpleExampleServlet

Class SimpleExampleServlet terletak dalam paket examples. Class ini memberikan contoh penerapan sumber data yang paling sederhana. SimpleExampleServlet mewarisi dari DataSourceServlet, menerapkan generateDataTable(), dan harus dijalankan dalam penampung servlet.

Cuplikan SimpleExampleServlet disediakan di bawah. Fungsi generateDataTable mengekspos data ke library. Fungsi ini membuat deskripsi tabel data, menentukan kolom tabel data, dan mengisi tabel data dengan data. Library menangani semua tindakan lain yang diperlukan untuk menampilkan tabel data ke visualisasi kueri.

// This example extends DataSourceServlet
public class SimpleExampleServlet extends DataSourceServlet {

  @Override
  public DataTable generateDataTable(Query query, HttpServletRequest request) {
    // Create a data table,
    DataTable data = new DataTable();
    ArrayList cd = new ArrayList();
    cd.add(new ColumnDescription("name", ValueType.TEXT, "Animal name"));
    cd.add(new ColumnDescription("link", ValueType.TEXT, "Link to wikipedia"));
    cd.add(new ColumnDescription("population", ValueType.NUMBER, "Population size"));
    cd.add(new ColumnDescription("vegeterian", ValueType.BOOLEAN, "Vegetarian?"));

    data.addColumns(cd);

    // Fill the data table.
    try {
      data.addRowFromValues("Aye-aye", "http://en.wikipedia.org/wiki/Aye-aye", 100, true);
      data.addRowFromValues("Sloth", "http://en.wikipedia.org/wiki/Sloth", 300, true);
      data.addRowFromValues("Leopard", "http://en.wikipedia.org/wiki/Leopard", 50, false);
      data.addRowFromValues("Tiger", "http://en.wikipedia.org/wiki/Tiger", 80, false);
    } catch (TypeMismatchException e) {
      System.out.println("Invalid type!");
    }
    return data;
  }
}

Menjalankan dan menguji SimpleExampleServlet

Bagian ini memberikan petunjuk tentang cara menjalankan dan menguji SimpleExampleServlet.

Jika Anda belum melakukannya, lihat bagian Penginstalan untuk mengetahui informasi tentang prasyarat, serta petunjuk tentang cara mendownload dan mem-build library. Pastikan Anda menginstal server web yang juga berfungsi sebagai penampung servlet, seperti Apache Tomcat, jika belum ada di sistem Anda. Petunjuk di bagian ini khusus untuk Apache Tomcat di sistem Windows.

Untuk menjalankan dan menguji SimpleExampleServlet, buat aplikasi web yang menjalankan sumber data SimpleExampleServlet, lalu jalankan contoh halaman web dengan visualisasi yang menampilkan data yang dikueri dari sumber data. Hal ini dijelaskan di bagian berikut:

Membuat Aplikasi Web di Apache Tomcat

Ikuti atau sesuaikan petunjuk di bawah untuk membuat aplikasi web di Apache Tomcat. Petunjuk ini khusus untuk Apache Tomcat di sistem Windows:

  1. Buka direktori tempat Anda menginstal Tomcat. Ini ditulis dalam dokumen ini sebagai <tomcat_home>.
     
  2. Buka subdirektori webapps.
     
  3. Buat subdirektori bernama myWebApp.
     
  4. Ubah ke subdirektori yang baru saja Anda buat dan buat subdirektori lain yang disebut WEB-INF.
     
  5. Ubah ke subdirektori WEB-INF dan buat subdirektori lain yang disebut lib.
    Jalur lengkap harus <tomcat_home>/webapps/myWebApp/WEB-INF/lib.
     
  6. Salin web.xml dari <data_source_library_install>/examples/src/html ke direktori WEB-INF. <data_source_library_install> adalah direktori tempat Anda menginstal library sumber data. Baris berikut di web.xml menentukan dan memetakan SimpleExampleServlet:
    <servlet>
  <servlet-name>My Servlet</servlet-name>
  <description>My servlet description.</description>
  <servlet-class>SimpleExampleServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>My Servlet</servlet-name>
  <url-pattern>/simpleexample</url-pattern>
</servlet-mapping>
  7. Buka direktori tempat Anda menginstal library sumber data. Ini ditulis dalam dokumen ini sebagai <data_source_library_install>.
     
  8. Salin semua paket dependensi ke <tomcat_home>/webapps/myWebApp/WEB-INF/lib. Paket diinstal di <data_source_library_install>/lib, kecuali jika Anda memasukkannya ke direktori yang berbeda.
     
  9. Jika Anda sudah membuat library sendiri, salin visualization-datasource-1.0.2.jar dan visualization-datasource-examples.jar
    dari <data_source_library_install>/build
    ke <tomcat_home>/webapps/myWebApp/WEB-INF/lib.

    Jika Anda telah mengekstrak file zip, salin visualization-datasource-1.0.2.jar dan visualization-datasource-examples.jar
    dari <data_source_library_install>
    ke <tomcat_home>/webapps/myWebApp/WEB-INF/lib.
    Perhatikan bahwa nomor versi dalam nama file jar dapat bervariasi bergantung pada nomor versi terbaru.
  10. Mulai Tomcat, atau mulai ulang Tomcat jika sudah berjalan.
     
  11. Klik link berikut:

    http://localhost:8080/myWebApp/Simpleexample

    Layar menampilkan 6-7 baris teks, bergantung pada lebar layar Anda.
    Teks dimulai dengan google.visualization.Query.setResponse
    dan diakhiri dengan /Tiger'},{v:80.0},{v:false}]}]}});

    Ini adalah data yang ditampilkan oleh sumber data Anda ke visualisasi kueri.

Menggunakan Visualisasi untuk Melihat Data

File getting_started.html dalam direktori <data_source_library_install>/examples/src/html dapat digunakan untuk melihat visualisasi data. Baris berikut, yang diambil dari getting_started.html, menentukan servlet yang akan digunakan. Pemetaan servlet disiapkan pada langkah 8 pada Membuat Aplikasi Web di Apache Tomcat.

var query = new google.visualization.Query('simpleexample');

Untuk informasi selengkapnya tentang cara menentukan visualisasi dan menggunakan bahasa kueri, lihat Menggunakan Diagram dan Referensi Bahasa Kueri.

Ikuti atau adaptasikan petunjuk di bawah untuk melihat visualisasi data yang disediakan oleh sumber data:

  1. Salin file getting_started.html dari direktori <data_source_library_install>/examples/src/html
    ke direktori <tomcat_home>/webapps/myWebApp/.
     
  2. Klik link berikut http://localhost:8080/myWebApp/getting_started.html, Anda akan melihat kode berikut:



    Selesai! Anda telah menyiapkan sumber data pertama Anda.

Langkah Berikutnya

Contoh berikutnya dijelaskan di bagian Menggunakan Penyimpanan Data Eksternal. Atau, Anda dapat kembali ke Pengantar, atau menjelajahi link berikut: