Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Titanium Mobile

Titanium Mobile: Database Driven tabel dengan SQLite

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Titanium Mobile: Database Driven Tables with SQLite.
Titanium Mobile: Database Driven Tables with SQLite – Part 2

Indonesian (Bahasa Indonesia) translation by Afrahcute (you can also view the original English article)

Tutorial ini akan mengenalkan anda kepada SQLite dan pengembangan drive database dengan Titanium moblie. Khususnya, anda akan mempelajari membangun sebuah aplikasi untuk mengelola produk dengan sebuah database bukan hanya sistem file.

Mengapa Membuat Sebuah Drive Database Aplikasi?

Itu tidak masuk akal untuk mengelola file pribadi untuk sebuah produk. Terutama ketika ada Katalog Produk besar untuk pemeliharaan. Berikut adalah contoh.

File Structure Example

Folder dan file di sebelah kiri ialah bagaimana proyek kami akan melihat akhir. Hanya beberapa file dalam folder dan sebuah file database. Di sebelah kanan adalah dikeluar kontrol, menakutkan, direktori. Saya merasa gambar ini harus cukup memotivasi. Salah satu manfaat lainnya akan mengurangi jejak aplikasi.


Prasyarat

Kami akan membutuhkan Titanium Mobile, editor teks yang bagus (siapa pun yang membuat Anda nyaman akan bekerja), dan sebuah SQLite pengelola database. Inilah dua pengelola SQLite yang saya gunakan.

Keduanya adalah pilihan yang bagus. Aku benar-benar menyukai manajer SQLite, tapi saya pribadi tidak suka ia berjalan sebagai plugin Firefox daripada aplikasi mandiri. SQLite Database Browser tidak terlihat seperti dipoles, tetapi dapat dijalankan sebagai aplikasi mandiri. Karena ini, saya cenderung untuk menggunakan Database SQLite Browser.

Langkah 1: Buat aplikasi

Buka Titanium Developer dan membuat proyek baru. Pilihlah Mobile dan mengisi semua informasi yang diperlukan. Titanium Developer secara otomatis mendeteksi jika iPhone SDK dan Android SDK terpasang dengan benar. Kemudian klik Create Project.

New Ti Project Example

Langkah 2: Membuat dan Mempopulasikan Database

Buka program mana saja yang Anda pilih dan klik pada New Database. Beri nama basis data "products.sqlite". Aplikasi, database, dan nama file tidak masalah. Ingatlah apa yang Anda gunakan. Simpan file dalam folder sumber daya Titanium Developer yang dibuat. Isi dalam database dengan informasi produk Anda. Pastikan Anda menekan menyimpan.

Database Example

Langkah 3: Membangun app.js

Buka app Resources/app.js file (jika Anda tidak bekerja dengan Titanium Developer sebelumnya, "app.js" adalah file utama untuk aplikasi Anda.

Hapus semua kode yang sudah ada.

Dengan kesederhanaan dalam pikiran, saya ingin menjaga semua file untuk produk dalam satu folder. Mari kita pergi ke folder sumber daya dan membuat sebuah folder bernama "Produk". Kami akan menyelamatkan kami file lain di sini.

Kembali ke app.js, kami ingin membuat grup tab karena hal itu akan membuatnya mudah untuk menambahkan lebih banyak tab dan konten nanti. Tetapkan label jendela, minta jendela itu membuka file produk kami, dan tambahkan jendela ke tampilan kami saat ini. Anda akan memerlukan gambar untuk gambar tab Anda. Aku menyalin gambar dari tab di app KitchenSink, yang merupakan proyek demo showcase disediakan oleh Appcelerator untuk menampilkan semua fitur mereka.

Kami tidak akan menyentuh kode dalam app.js lagi, sehingga Anda dapat pergi ke depan dan menutupnya jika Anda ingin.


Langkah 4: Membangun Halaman Kategori Produk

Buat file JavaScript baru di folder produk kami bernama product_category.js. Hal penting yang perlu diingat dengan halaman ini adalah bahwa itu akan menjadi yang pertama memuat ketika aplikasi kita awalnya diluncurkan. Itu berarti kita akan memiliki sebagian besar kode kita di file ini. Yang hebat adalah bahwa kode ini akan digunakan kembali untuk file kita berikutnya, dengan hanya beberapa perubahan.

Sebelum kita membuat kode halaman ini, kita harus memikirkan apa yang perlu terjadi. Halaman perlu membuka database, membaca kolom kategori, dan menampilkan hasilnya dalam tampilan tabel. Untuk melampirkan hasil database ke tableView, kita perlu membuat sebuah array dan mendorong data ke dalamnya. Cara terbaik untuk melakukan ini adalah dengan membuat fungsi. Dengan cara ini kita tidak perlu tahu sebelumnya berapa banyak baris dalam database yang perlu dibaca. Kami hanya akan membiarkan beralih fungsi melalui database sampai membaca semua baris yang aktif.

Kita juga perlu membuat EventListener ketika salah satu baris diklik. Mari kita mulai dengan mengumpulkan semuanya kecuali fungsi dan EventListener.

Ini semua sangat mudah. Sekarang fungsi ()setData. Mulailah dengan menghubungkan ke database dan menanyakannya untuk kategori. Untuk menghapus duplikat dan hanya mengembalikan satu baris untuk setiap kategori, kita akan menggunakan perintah SQL DISTINCT.

Buat array dan gunakan pernyataan while untuk beralih melalui database. Permintaan database untuk nama bidang "kategori" dan atur itu ke judul baris. (Developer Titanium menggunakan "fieldByName" untuk membaca dari kolom yang ditentukan dalam database. Ini digunakan bersama dengan permintaan kami untuk memilih konten kami.) Tentukan bahwa ada elemen anak, dan setel path ke file berikutnya.

Akhirnya, lampirkanlah array ke tableView kami.

Sekarang, kita perlu membuat EventListener untuk membuka halaman selanjutnya. Satu hal yang juga perlu kita lakukan di sini adalah meneruskan variabel ke file berikutnya. Ini akan digunakan untuk membangun pertanyaan SQL berikutnya dan mengatur judul jendela. Kami juga akan mengatur panggilan balik dari pendengar ke jalur ke file berikutnya, meskipun itu statis.

Listener menangkap klik, lalu membuat jendela baru. Jendela baru ini membuka file berikutnya dan sedang mengatur judul jendela baru ke isi baris. Dalam kasus kami, ini adalah kategori produk. Kami kemudian membuat variabel dari konten baris dan meneruskannya ke jendela baru, menamai var. Terakhir, Listener membuka grup tab baru, yang merupakan halaman berikutnya.

Berikut adalah apa yang menunjukkan "product_category.js" file:

product_category.js Example

Langkah 5: Membangun halaman produk

Pilih semua kode dalam file "product_category.js" dan tekan copy. Buat file JavaScript baru bernama "products.js" dan rekatkan kodenya. Kami hanya perlu membuat beberapa modifikasi dan menambahkan variabel yang kami lewati agar halaman ini berkerja.

Dalam fungsi kita, di bawah kami panggil untuk membuka database, tambahkan kode berikut, penangkapan keluar melewati var.

Sekarang kita perlu mengubah pertanyaan kita ke database dan menggunakan variabel baru kita. Kami ingin sekarang membaca nama-nama produk dari kategori yang kami pilih sebelumnya dan menampilkan produk-produk itu.

Mengubah fieldByName di baris dari "category" ke "name" dan path ke file berikutnya.

Hal terakhir yang diperlukan untuk menyelesaikan halaman ini adalah mengubah var yang dilewatkan di EventListener. Ubah untuk memberikan nama produk dan gunakan nama var yang masuk akal.

Selesai Inilah yang terlihat seperti "products.js".

products.js Example

Langkah 6: Membangun Halaman Produk Individual.

Ini adalah file yang terakhir kita perlu menciptakan untuk tutorial ini. Tujuan dari Halaman ini akan menampilkan isi dari baris untuk produk individu. Membiarkan ' Lihat semua kode dan kemudian memecahnya.

Apa yang happing di atas adalah hal yang sama yang telah kita lakukan pada halaman sebelumnya, kita hanya tidak mendengarkan untuk tindakan, dan adalah mempopulasikan array diri kita sendiri, daripada menggunakan fungsi. Cara ini kita dapat label informasi dengan baris header dan memesan konten bagaimana kita ingin untuk menampilkan.

Semua yang perlu dilakukan adalah untuk menciptakan baris individu dalam array menggunakan nama-nama kolom database kami.

product_specs.js Example

Membungkus

Ini sepertinya banyak pekerjaan di awal, tetapi hasilnya sepadan. Bagian terbaiknya adalah begitu kode selesai dalam dua file produk pertama, tidak perlu disentuh. Fungsi setData () berskala tanpa bantuan. Kode yang sama akan berfungsi terlepas dari apakah database memiliki satu baris atau lima puluh tiga!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.