Memulai dengan Sumber Data

Bagian ini memperkenalkan SimpleExampleServlet, yang merupakan contoh implementasi paling sederhana dari sumber data yang disediakan bersama 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 implementasi sumber data yang paling sederhana. SimpleExampleServlet mewarisi dari DataSourceServlet, mengimplementasikan generateDataTable(), dan harus dijalankan dalam container 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 ini 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 cara menjalankan dan menguji SimpleExampleServlet.

Jika Anda belum melakukannya, lihat bagian Penginstalan untuk mengetahui informasi tentang prasyarat, dan petunjuk cara mendownload dan mem-build library. Pastikan Anda menginstal server web yang juga berfungsi sebagai container servlet, seperti Apache Tomcat, jika Anda belum memilikinya di sistem. 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 menunjukkan data yang dikueri dari sumber data. Hal ini dijelaskan dalam bagian berikut:

Membuat Aplikasi Web di Apache Tomcat

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

  1. Buka direktori tempat Anda menginstal Tomcat. Hal 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 bernama WEB-INF.
     
  5. Ubah ke subdirektori WEB-INF dan buat subdirektori lain yang disebut lib.
    Jalur lengkapnya harus <tomcat_home>/webapps/myWebApp/WEB-INF/lib.
     
  6. Salin web.xml dari <data_source_library_install>/examples/src/html ke direktori WEB-INF. Dengan <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. Hal 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 menempatkannya di direktori yang berbeda.
     
  9. Jika Anda telah 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 dari 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 sesuaikan, petunjuk di bawah ini 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.

Langkah Berikutnya

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