Memulai dengan Sumber Data

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

Memperkenalkan SimpleExampleServlet

Class SimpleExampleServlet berada dalam paket examples. Class ini memberikan contoh penerapan sumber data paling sederhana. SimpleExampleServlet diwarisi dari DataSourceServlet, menerapkan generateDataTable(), dan harus dijalankan dalam container servlet.

Cuplikan SimpleExampleServlet diberikan 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, dan petunjuk cara mendownload dan membangun pustaka. Pastikan Anda menginstal server web yang juga berfungsi sebagai penampung servlet, seperti Apache Tomcat, jika Anda belum memilikinya 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. Hal ini ditulis dalam dokumen ini sebagai <tomcat_home>.
     
  2. Buka subdirektori webapps.
     
  3. Buat subdirektori bernama myWebApp.
     
  4. Beralih ke subdirektori yang baru saja Anda buat dan buat subdirektori lain bernama WEB-INF.
     
  5. Ubah ke subdirektori WEB-INF dan buat subdirektori lain bernama 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 pustaka 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 lain.
     
  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 akan 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 di 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 Membuat Aplikasi Web di Apache Tomcat.

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

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

Ikuti, atau sesuaikan, 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 hal 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: