Senin, 30 September 2024

Bab 5 Pemrograman Web dan Perangkat Bergerak Kls 12 Rpl

 Pengolahan Input User Lanjutan dan Basis Data Mobile



A. Teknik Pengolahan input User 

Design interface sangat berpengaruh pada user dalam berkomunikasi dengan komputer. Apabila suatu program sulit untuk digunakan, maka hal ini akan memaksa user untuk melakukan suatu kesalahan saadenenggunakan program tersebut. Istilah desain antarmuka (design interface) identik dengan desain untuk komputer, peralatah desin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman dan interaksi penggunanya. Tujuan dari penggunaan design interface adalah untuk membuat interaksi pengguna sesederhana dan seefisien mungkin tentang bagaimana user berinteraksi dengan komputer menggunakan tampilan antarmuka (interface) yang ada pada layar komputer. 


1. Konsep Penggunaan User Interface Aplikasi dalam Perangkat Bergerak

            Untuk dapat membuat sebuah user interface yang menarik, harus memahami kontrol user interface yang terdapat di android, karena keberadaan user interface pada Aplikasi android memberikan pengaruh terhadap penggunanya. Padahal tujuan utama dari adanya sebuah aplikasi ketika membantu atau mempermudah penggunanya Jangan sampai user bingung ketika menggunakan aplikasi yang telah dibuat

A. View 

        View identik dengan sebuah objek untuk menggambar sesuatu pada layar di mana user dapat berinteraksi dengannya dan viewgroup adalah sebuah objek yang memegang objek view lainnya untuk menentukan layout user interface. Untuk me- nentukan layout dapat membuatnya di file XML yang menawarkan struktur mudah terbaca untuk layout (secara mendasar mirip dengan HTML). Perhatikan bentuk layout vertikal dengan sebuah text view dan sebuah button sebagai berikut.


<?xml version="1.0" encoding="utf-8"?> 


<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/ android" 


xmlns:tools="http://schemas.android.com/tools" 


android:layout_width="match_parent" 


android:layout_height="match_parent" 


android:orientation="vertical" 


android:gravity="center" 


tools:context="com.example.rizaova.project1.MainActivity"> 


<TextView android:id="@+id/teks" 


android:text="Ini Teks" 


android:layout_width="wrap_content" 


android:layout_height="wrap_content" /> 


<Button


 android:id="@+id/tombol" 


android:layout_width="wrap_content" 


android:layout_height="wrap_content" 


android:text="Ini Tombol content"/> 


</LinearLayout>


b. Kontrol User Interface 

Terdapat banyak kontrol user interface yang disediakan oleh android yang diizinkan untuk membangun grafis user interface pada aplikasi. Beberapa jenis kontrol user interface yang digunakan antara lain sebagai berikut.

Jenis-Jenis Kontrol User Interface:

1 TextView 

   Kontrol ini digunakan untuk menampilkan teks ke pengguna. 

2. EditText 

 Subclass yang telah ditetapkan dari TextView yang mencakup kemampuan.

3. AutoCompleteTextView 

Deskripsi AutoCompleteTextView adalah tampilan yang mirip dengan EditText, kecuali bahwa menunjukkan daftar saran penyelesai- an secara otomatis saat pengguna mengetik 

4. Button

 Button bisa ditekan atau diklik oleh pengguna untuk melaku- kan suatu tindakan. 

5. ImageButton 

ImageButton adalah sebuah AbsoluteLayout untuk menentu- kan lokasi yang tepat dari dengan menunjukkan sebuah button berupa gambar bisa ditekan atau diklik oleh pengguna.

 6. CheckBox

 Switch on/off dapat diubah oleh pengguna

 7 ToggleButton

 Sebuah button on/off dengan lampu indikator. RadioButton memiliki dua sifat yaitu dicentang atau tidak 

8. RadioButton

 RadioButton memiliki dua sifat yaitu dicentang atau tidak dicentang

9. RadioGroup

 RadioGroup digunakan untuk kelompok bersama RadioButton.

10. ProgressBar 

ProgressBar memberikan umpan balik visual tentang beberapa tugas yang sedang berlangsung. 

11. Spinner

 Sebuah daftar yang berisi salah satu nilai dari satu set.

 12. TimePicker

 Untuk memilih waktu dengan mode 24 jam atau mode AM/PM.

 13. DatePicker 

Untuk memilih tanggal

C. Membuat User Interface 

Android menyediakan berbagai jenis kontrol yang dapat digunakan dalam user interface seperti button, text field, seek bar, check box, zoom button, toggle button, dan lain-lain. Kontrol input, yaitu komponen interaktif yang terdapat pada user interface suatu aplikasi. Sebagaimana diketahui bahwa pada saat membuat user interface pada android, objek view memiliki ID unik yang ditugaskan untuk mengidentifikasi. Sintaks untuk ID dalam sebuah tag XML adalah sebagai berikut.

 android:id="@+id/teks" 

Guna membuat sebuah kontrol user interface/view/widget harus menentukan view/widget dalam file dan menetapkan ID unik sebagai berikut.

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout"xmlns:android="http://schemas.android.com/apk/res/android"



Sedangkan untuk memanggilnya dapat menggunakan perintah berikut. 


TextView my/Teks=(Textview)findViewById(R.id.teks); 


2. Prosedur Desain User Interface dalam Aplikasi Perangkat Bergerak

 User interface (UI) untuk aplikasi Android dibuat menggunakan hierarki layout (objek ViewGroup) dan widget (objek View). Layout identik dengan kontainer tidak terlihat yang mengontrol bagaimana tampilan sub/cabang yang diposisikan pada layar, sedangkan Widget identik dengan komponen UI, seperti tombol dan kotak teks. Di samping itu, Android menyediakan kosakata XML untuk kelas ViewGroup dan View, sehingga sebagian besar Ul dapat didefinisikan dalam file XML. Namun demikian, membuat layout menggunakan Android Studio Layout Editor memudahkan pembuatan layout dengan tampilan seret dan letakkan.


a. Membuka Layout Editor 

Langkah-langkah mempersiapkan ruang kerja untuk membuat project Android adalah sebagai berikut.

 1) Di jendela Project Android Studio, buka app→ res→ layout activity_main xml. 

2) Untuk memberi lebih banyak ruang bagi Layout Editor, sembunyikan jendela Project dengan memilih View → Tool Windows Project (atau klik Project di sisi kıri Android Studio). 

3) Bila editor Anda menampilkan sumber XML, klik tab Design di bagian bawah jendela. 

4) Klik Select Design Surface dan pilih Blueprint.

 5) Klik Show di toolbar dan pastikan Show Constraints telah dicentang. 

6) Pastikan Autoconnect tidak aktif. Tooltip pada toolbar akan tertulis Turn On Autoconnect (karena sekarang Autoconnect tidak aktif). 

7) Klik Default Margins 8 di toolbar dan pilih 16 (Anda tetap bisa mengatur margin untuk setiap tampilan nanti). 

8) Klik Device in Editor di toolbar dan pilih Pixel XL. 

Editor layar akan menampilkan gambar sebagai berikut.


Jendela Component Tree yang berada di sisi kiri bawah menunjukkan tampilan hierarki layout. Tampilan root adalah ConstraintLayout yang berisi satu objek Text View. Constraint Layout identik dengan layout yang mendefinisikan posisi untuk setiap tampilan berdasarkan batas terhadap tampilan dan layout induk. Dengan cara ini, minimal mampu membuat layout sederhana dan kompleks dengan hierarki tampilan datar. Oleh sebab itu, cara tersebut digunakan untuk menghindari layout tersarang (layout di dalam layout) sehingga dapat meningkatkan waktu yang dibutuhkan untuk menggambar UI. Misalnya, untuk mendeklarasikan ukuran tampilan layout menjadi sebagai berikut.

 1) Tampilan A terletak 16dp dari kiri layout induk.

 2) Tampilan A terletak 16dp dari atas layout induk.

 3) Tampilan B sejajar dengan bagian atas tampilan A. 

4) Tampilan B terletak 16dp di sebelah kanan tampilan A.

 Hasil layout akan tampak sebagai berikut.


b. Menambahkan Kotak Teks 

Langkah-langkah dalam menambahkan kotak teks adalah sebagai berikut. 

1) Menghapus semua yang terdapat dalam layout dengan cara klik TextView di jendela Component Tree, kemudian tekan Delete.

 2) Dari jendela Palette di sebelah kiri, klik Text di panel kiri, selanjutnya seret Plain Text ke dalam editor desain dan letakkan di dekat bagian atas layout. Hal ini bertujuan untuk membuat widget EditText menerima masukan teks biasa.

 3) Klik tampilan di editor desain dengan menggeser tuas pengubah ukuran di setiap sudut (kotak), dan jangkar pembatas di setiap sisi (lingkaran). 

4) Guna kontrol yang lebih baik, memerlukan zoom in pada editor menggunakan tombol pada toolbar. 

5) Klik-tahan jangkar di sisi atas, selanjutnya diseret ke atas sampai terkunci ke bagian atas layout dan lepaskan. Hasilnya adalah pembatas untuk menetapkan tampilan harus 16dp dari atas layout (karena menyetel margin default ke 16dp). Selanjutnya membuat pembatas dari sisi kiri tampilan ke sisi kiri layout.

Hasilnya akan terlihat sebagai berikut.


C. Menambahkan Tombol

 Langkah-langkah dalam menambahkan kotak tombol diawali dari jendela Palette, klik Widgets di panel kiri, lalu seret Button ke dalam editor desain dan letakkan di dekat sisi kanan. Selanjutnya, membuat pembatas dari sisi kiri tombol ke sisi kanan kotak teks. Guna membatasi tampilan dalam penjajaran horizontal, perlu membuat pembatas antara garis dasar teks. Langkahnya adalah klik tombol tersebut, lalu klik

 Edit Baseline yang muncul di editor desain tepat di bawah tampilan yang dipilih dan jangkar garis dasar muncul di dalam tombol. Klik-tahan jangkar ini lalu seret ke jangkar garis dasar yang muncul di kotak teks. Di samping itu, membuat penjajaran horizontal menggunakan tepi atas/bawah, tetapi tombolnya memuat pengisi di sekitar gambar sehingga penjajaran visual tidak akan tepat bila menyejajarkan tampilan dengan cara tersebut. Hasilnya akan terlihat seperti gambar berikut.



d. Mengubah String Ul 

Guna melihat pratinjau UI dilakukan dengan klik Select Design Surface di bagian toolbar dan pilih Design. Pada layar terlihat masukan teks sudah terisi dengan "Name"

dan tombolnya diberi label "Button." Langkah langkah dalam mengubah string U antara lain sebagai berikut. 

1) Buka jendela Project lalu buka app→ res values strings.xml strings.xml merupakan file sumber daya string untuk menetapkan dan mengelola semua string Ul di satu lokasi dengan tujuan mempermudah untuk menemukan, meng update, dan melakukan pelokalan (dibandingkan dengan string hard-coding dalam layout atau kode aplikasi). 

2) Klik Open editor di bagian atas jendela editor untuk membuka Translations Editor, yang menyediakan antarmuka simpel untuk menambahkan dan mengedit string default, serta membantu semua string terjemahan tetap teratur.

 3) Klik Add Key untuk membuat string baru sebagai "hint text untuk kotak teks Selanjutnya, masukkan "edit message untuk nama kunci, masukkan "enter a message untuk nilainya dan klik OK 

4) Tambahkan kunci lain bernama "button_send" dengan nilai "Send"



Untuk melakukan konfigurasi string untuk setiap tampilan harus kembali ke file layout dengan mengklik activity_main.xml di bilah tab, dan tambahkan string sebagai berikut. 

1) Klik kotak teks di layout dan klik Attributes di sidebar kanan, apabila jendela Attributes belum terlihat di sebelah kanan. 

2) Cari properti text (yang saat ini disetel ke "Name") dan hapus nilainya.

3) Cari properti hint lalu klik Pick a Resource di sebelah kanan kotak teks. Pada kotak dialog yang muncul, klik dua kali edit_message dari daftar yang ada.

4) Klik tombol di layout dan cari properti text→ klik Pick a Resource pilih button_send.


e. Membuat Ukuran Kotak Teks yang Fleksibel

 Untuk membuat layout yang responsif terhadap beragam ukuran layar, dapat dilakukan dengan merancang kotak teks supaya dapat membentang untuk mengisi semua ruang horizontal yang ada dengan memperhitungkan keberadaan tombol dan margin. Sebelum melanjutkan, klik Show di toolbar dan pilih Blueprint.

Langkah-langkah dalam membuat ukuran kotak teks yang fleksibel adalah sebagai berikut.


 1) Pilih kedua tampilan (klik satu tampilan, tahan Shift dan klik tampilan lain). lalu klik kanan salah satu tampilan dan pilih Chain → Create Horizontal Chain. Rantai adalah pembatas dua arah di antara dua atau beberapa tampilan yang memungkinkan Anda untuk memasang tampilan yang diikat secara bersamaan.

 2) Pilih tombol dan buka jendela Attributes. Dengan menggunakan pemeriksa tampilan di bagian atas jendela Attributes, margin kanan diatur menjadi 16. 

3) Sekarang, klik kotak teks untuk melihat atributnya. Klik indikator lebar dua kali, sehingga disetel ke Match Constraints, seperti yang ditunjukkan oleh gambar berikut.


Match constraints, berarti lebar akan meluas memenuhi definisi batasan dan margin horizontal. Oleh karena itu, kotak teks membentang untuk mengisi ruang horizontal setelah memperhitungkan tombol dan semua margin yang ada. Bila layout tidak berubah seperti yang diharapkan, klik pada bagian bawah untuk melihat tampilan XML yang seharusnya dan bandingkan dengan apa yang lihat di tab Text. Sekarang layout sudah selesai dan akan terlihat seperti gambar berikut.


f. Menjalankan Aplikasi 

Apabila aplikasi sudah terinstal pada perangkat yang digunakan, cukup klik Apply Changes di toolbar untuk meng-update aplikasi dengan layout baru, atau klik Run untuk menginstal dan menjalankan aplikasi. 

3. Teknik Desain Aplikasi Lanjutan 

Beberapa hal yang paling mendasar yang harus diperhatikan dalam pembuatan User interface Design adalah sebagai berikut.

 a. Menggunakan Hierarki Visual 

Sedapat mungkin kita membuat suatu desain interface di mana user dapat fokus pada suatu yang penting. Ukuran, warna, dan penempatan pada setiap elemen yang selaras dapat membuat suatu alur yang jelas, sehingga dimengerti oleh user. Hierarki yang jelas akan menjadi runtutan yang baik dalam menurunkan kompleksitas suatu action. Walaupun action tersebut memanglah kompleks. 

b. Mengetahui tentang User dari Aplikasi yang Digunakan. 

Tujuan dari user adalah tujuan programmer juga, sehingga seorang programmer harus mengerti user lebih lagi. Pelajari mengenai pengalaman dan keahlian-keahlian yang dimilikinya, serta apa yang dibutuhkan oleh user sekarang. Mengetahui serta mempelajari interface yang user sukai serta mencari tahu bagaimana user meng- gunakannya. Tidak perlu terpaku dengan tren yang ada sekarang ini. Fokus pada apa yang user butuhkan agar dapat menyelesaikan setiap tujuannya.

c. Tetap Konsisten 

User membutuhkan suatu konsistensi. Bahasa, layout, dan desain adalah sesuatu hal kecil dari elemen interface yang membutuhkan konsistensi. Interface yang konsisten membuat user dapat dengan mudah mengerti untuk apa itu berfungsi, sehingga meningkatkan efisiensi mereka. 

d. Menyediakan Feedback 

Interface yang baik harus dapat memberitahu user setiap action yang terjadi seperti error, loading, dan lain-lainnya. Hal ini dilakukan untuk menghindari adanya kesalahpahaman user. 

e. Keep It Simple 

Desain interface yang paling baik itu tidak pernah terlihat. Mereka tidak per- nah menampilkan sesuatu yang tidak perlu untuk ditampilkan. Ketika kita akan menambahkan suatu elemen di dalam desain interface, hal yang paling utama harus dipertanyakan adalah "Apakah elemen tersebut benar-benar diperlukan?" atau "Mengapa user sangat menginginkan animasi yang bagus pada desain kita?" Apakah menambahkan sesuatu hanya karena ingin atau itu merupakan hal yang penting. Jangan biarkan desain interface hanya untuk "pamer" dan uji kemampuan saja.

 f. Keep Moving Forward 

Dalam membuat desain interface pasti akan membuat kesalahan. Tetapi, tetap terus mencoba karena dari situlah akan menjadikan desain antarmuka (interface) Anda menjadi yang lebih baik lagi.


g. Perhatikan Pattern-Pattern yang Penting 

Sekarang ini, user lebih banyak menggunakan aplikasi-aplikasi selain aplikasi yang dibuat, misalnya Facebook, Twiter, dan lain-lainnya. Hal tersebut dikarenakan pattern-pattern yang digunakan sesuai dengan user dan mudah dimengerti oleh user. Oleh karena itu, gunakanlah pattern-pattern yang mudah dimengerti oleh user dan membuat mereka merasa nyaman dan diberi kemudahan dalam memakai aplikasi yang dibuat.

h. Empower Your User 

Apabila ada bagian-bagian yang kompleks, berikan user sebuah tutorial sehingga mereka dapat mengerti. Kemudian, user dapat dipermudah juga dengan beberapa shortcut keyboard untuk beberapa aksi khusus. Hal-hal tersebut dapat menambahkan pengalaman user terhadap desain.

i. Speak Their Language

 Tetap menjaga desain yang interaktif dengan user bukan hanya mendesain sesuatu yang mengagumkan, tetapi tidak interaktif. Label dan pesan-pesan yang digunakan haruslah singkat, padat, dan jelas, sehingga tidak menimbulkan kerancuan terhadap user. Dengan ini, user akan mengapresiasi desain yang dibuat karena mereka tidak dipaksakan untuk mendengarkan apa yang diinginkan, tetapi mereka mengikuti apa yang mereka inginkan.

j. Be Forgiving

 Seberapa baik dan jelas interface yang dibuat, pasti user akan tetap saja melakukan kesalahan. Interface harus dapat mentolerir setiap kesalahan yang dilakukan oleh user. Desain yang baik juga harus dapat memberikan user kesempatan untuk melakukan Undo Action. Selain itu, Anda harus dapat memberitahu apabila ada kesalahan action dari user. Misalnya ketika memasukkan input tanggal yang tidak sesuai harus ada pesan kesalahan sebagai penanda.

B. Aplikasi Basis Data Mobile 

Sistem operasi Android memiliki library SQLite yang dapat digunakan untuk membuat aplikasi basis data cli- ent. Library SQLite telah diintegrasikan dengan teknologi browser, sehingga me miliki kemampuan aplikasi berbasis web client (javascript) untuk menggunakan fitur database ini. Dukungan ini secara default telah diaktifkan, sehingga tidak perlu menggunakan konfigurasi (aktivasi). Sebagai library untuk pengolahan data SQLite memiliki beberapa tipe data yang didukung, yaitu Text sebagai data alfanu- merik (kumpulan karakter atau kata), Integer sebagai jenis data numerik tanpa koma, dan Real sebagai jenis data numerik dengan bilangan berkoma.


1. Konsep dan Prosedur Akses Basis Data dalam Aplikasi Perangkat Bergerak

 Di aplikasi mobile, menggunakan backend database SQLite dapat berguna untuk untuk pembuatan dan pemeliharaan database. Misalnya, membuat dan menggunakan prepopulated database dan menggunakan SQLite utility library untuk mengimplementasikan database backend pada aplikasi restoran. Aplikasi ini dapat digunakan baik oleh chef maupun user biasa untuk melihat berbagai macam kategori menu dan kuliner. Aplikasi restoran menggunakan gerakan mengusap untuk berganti kategori, serta memilih salah satu menu yang akan ditampilkan detailnya. Sebuah database SQLite dapat digunakan untuk menyimpan semua kategori menu dan detail menu. Menggunakan Android SQLite API secara langsung dapat menghasilkan berbagai bentuk boilerplate code. Ada beberapa Android utility library untuk membantu mempermudah proses ini dan juga menyajikan fitur-fitur tambahan untuk penggunaan database SQLite yang lebih mudah dan efisien di aplikasi Android. Salah satunya berupa SQLiteAssetHelper yang identik dengan salah satu library yang populer di kalangan komunitas pengembang aplikasi Android berdasarkan keterlibatan pengembang aplikasi dan penggunaannya.



a. Pembukaan/Pembuatan Database 

Pada dasarnya, tahapan dalam mengakses program ke database dilakukan melalui dua tahap, yaitu membuka/membuat database dan menjalankan perintah SQL. Penutupan database tidak diperlukan karena akan secara otomatis ditutup apabila program ditutup. Pembukaan atau pembuatan database dapat dilakukan dengan satu perintah, yaitu open Database (string namadb, string versi, string deskripsı, int ukuran). Apabila database yang akan dibuka belum ada, maka web engine akan secara otomatis membuatkan database-nya. Misalnya var db = openDatabase("diary", "1.0", "database diary", 6000); 


b. Eksekusi Perintah SQL 

Perintah SQL diberikan pada parameter pertama dari fungsi executeSql. Perintah SQL yang dapat diberikan berupa perintah CREATE, DROP, INSERT, UPDATE, DELETE dan SELECT. Eksekusi perintah SQL dapat dilakukan dengan menggunakan perintah berikut.


db.transaction ( 


function (transaction) 



transaction.executeSql (sql, undefined, 


function (transaction, result)


 { //sukses 


}, function (transaction, err) 


{


 //error


 } 


);


 } 


);


c. Membaca Data Tabel 

Pencarian/pembacaan data Android dari suatu tabel dapat dilakukan dengan menggunakan perintah SQL SELECT. Supaya dapat menampilkannya, Anda dapat menggunakan perintah berikut. 


transaction.executeSql (sqlSELECT, undefined,


 function (transaction, result) 


{


 if (result.rows.length) 


for (var i = 0; i < result.rows.length; i i++) 



var row = result.rows.item (i);


 var kolom = row.column; 




}, 


undefined


 );


Keterangan:


 1) sqlSELECT digunakan sebagai perintah SQL SELECT yang akan dijalankan. 


2) result digunakan sebagai objek yang berisikan data hasil seleksi jika berhasil. 


3) rows digunakan sebagai objek properti dari result dengan kumpulan item (baris) hasil seleksi. 


4) column digunakan sebagai nama kolom sesuai definisi tabel yang akan diambil nilainya dari baris terpilih.


 2. Penggunaan Konektor dalam Aplikasi Akses Basis Data 

Terdapat berbagai cara dalam menghubungkan App Client (Android) ke Remote Database Server seperti MySQL, SQL Server, Oracle, Sybase, DB2, postgreSQL, Firebird dan lainnya. Salah satu caranya, yaitu dengan bantuan Remote Database Connector (RDC). RDC, yaitu sebuah middleware berupa Java web server yang membantu memudahkan dalam menghubungkan aplikasi android ke berbagai Remote Database Server, sehingga tidak perlu membuat Web Server dengan PHP atau sejenisnya. Misalnya, membuat database MySQL-nya dengan nama: trq-jual dan satu tabel dengan nama: brng. Field-field yang dibutuhkan adalah sebagai berikut. 


Jika database MySQL sudah dibuat, maka masukkan beberapa data. Misalnya sebagai berikut.


Lalu, perbatikan langkah-langkah berikut. 


a. Pastikan Windows-nya sudah terinstal lava dan RDC Server sudah terekstrak


b. Buka config.properties dan menyesuaikan config database-nya seperti JdbcUrl, User, dan Pussword. Sedangkan lainnya dapat diabaikan untuk sementara.


 #Lines starting with 'a' are comments. 


#Backslash character at the end of line means that the command continues in the next line. 


DriverClass com.mysql.jdbc.Driver 


JdbcUrl=jdbc:mysql://localhost/trq-jualfcharacterEncoding=utf8 


#SQL Server 


#DriverClass net.sourceforge.jtds.jdbc.Driver 


#JdbcUrl=jdbcijtds.sqlserver://<database server ip>/<database>


 User-root 


Password qwerty12 


Server Port-17178 


#If Debug is true then this file will be reloaded on every query. 


#This is useful if you need to modify the queries.


 Debug-true 


#commands 


sql.select_brng SELECT FROM brng


c. Kemudian aktifkan text editor seperti Notepad++ dan buka RunRLC.bat untuk menyesuaikan path direktori java.exe pada Windows yang digunakan. 

d. Untuk mengaktifkan atau menjalankan RDC-nya, klik dua kali pada RunRLC. bat. Maka, akan muncul seperti gambar di bawah ini:



e. Untuk memastikan lagi apakah RDC sudah running atau belum, bisa dicek dengan cara membuka: http://localhost:17178/?method=test di browser yang digunakan atau diganti dengan localhost IP yang bersangkutan. Jika sudah running, maka akan muncul tulisan seperti pada gambar berikut.



f. Selanjutnya, membuat project baru, misalnya dengan nama: MyConnectDB. Setelah tersimpan, import Class Table dan DBRequestManager dengan baik.

 g. Setelah selesai, aktifkan Class Table dan masukkan code sebagai berikut.

'load data from a RDC Request


'Result = DBResult object got from a RDC request


'AutomaticWidths True > set the column widths automaticaly


'Written by Abhisar Thoriq


Public Sub LoadRDCResult (Result As DBResult, AutomaticWidths As Boolean)


cAutomaticWidths = AutomaticWidths NumberOfColumns = Result.Columns.Size innerClearAll(NumberOfColumns)


Dim Headers(NumberOfColumns) As String Dim ColumnWidths(NumberOfColumns) As Int Dim HeaderWidths (NumberOfColumns) As Int Dim DataWidths(NumberOfColumns) As Int Dim col, row As Int Dim str As String For col = 0 To NumberOfColumns - 1 Headers(col) = Result.Columns.GetKeyAt(col) If Automatic Widths = False Then ColumnWidths(col) = 130dip HeaderWidths(col) = 130dip DataWidths(col) = 130dip Else HeaderWidths(col) = cvs. MeasureStringWidth(Headers(col), Typeface.DEFAULT, cTextSize) + 8dip + cLineWidth DataWidths(col) = 0


Dim FieldValue As Object For row = 0 To Result.Rows.Size - 1 Dim Record() As Object = Result.Rows.Get(row) FieldValue = Record(col) If FieldValue <> Null Then FieldValue = FieldValue Else FieldValue = "" End If If GetType(FieldValue) = "java.lang.String" Then Data Widths(col) = Max(DataWidths(col), cvs. MeasureStringWidth(str, Typeface.DEFAULT, cTextSize) + 150dip + cLineWidth)


Else


Data Widths (col) Max(DataWidths(col), cvs. MeasureStringWidth(str, Typeface.DEFAULT, 50dip + cLineWidth) cTextSize) +


End If


Next


Column Widths(col) = Max(HeaderWidths(col), Data Widths(col))


End If


Next


SetHeader(Headers)


SetColumns Widths(ColumnWidths)


For Each Record() As Object In Result.Rows


Dim R(NumberOfColumns) As String


Dim FieldV As String


For col = 0 To NumberOfColumns - 1


FieldV Record(col)


R(col) = FieldV


Next


AddRow(R)


Next


End Sub

 

h.Setelah semuanya selesai, aktifkan pada aktifity main. Pada sub proces_Globals dan sub Globals deklarasikan objek - objek sebagai berikut.

Sub Process Globals


"These global variables will be declared once when the application starts.


"These variables can be accessed from all modules.


Dim reqManager As DBRequestManager


'Sesuaikan alamat IP Server RDC


Dim RDCServer As String = "http://192.168.100.34:17178"


End Sub


Sub Globals


"These global variables will be redeclared each time the activity is created.


"These variables can only be accessed from this module.


Dim Table1 As Table


Dim PnlTable As Panel


End Sub


i. Pada event Activity_Create masukkan code code berikut.


 Sub Activity Create(FirstTime As Boolean) 


'Do not forget to load the layout file created with the visual designer. 


For example: 


'Set judul untuk activity ini. 


Activity. Title = "List Brng" 


Tambahkan menu. 


Activity.AddMenultem("Sync data Brng","SyncBrng")


 Initialize Panel. 


PulTable. Initialize("")


 "Tampilkan Panel di activity ini. 


Activity.AddView(PnlTable, 0,0,100%x,100%y) 


Initialize Table. 


Table1. Initialize(Me, "Table1", 4, Gravity.CENTER_HORIZONTAL, True) 


Table1.CellAlignment = Bit.OR(Gravity.LEFT, Gravity.CENTER_ VERTICAL) 


Table1.HeaderColor = Colors.Blue 


Table1.HeaderTextColor = Colors. Yellow 


Tablet.TextColor = Colors Blue Table 


TableColor = Colors Red 


Table1.AddToActivity(Pn/Table, 0, 0, PniTable.Width, PulTable. Height)


 If First Time Then


Initialize RDC-nya. req 


Manager.Initialize(Me, RDCServer) 


End If 


End Sub 


J. Berikutnya, membuat fungsi baru dengan nama GetDataBrng sebagai berikut. 


Sub GetDataBrng 


Dim cmd As DBCommand 


cmd.Initialize 


cmd.Name "select_brng" 


req Manager.ExecuteQuery(cmd, 0, "select_brng") 


End Sub 


k. Selanjutnya membuat event Click untuk object menu SyncBrng seperti code berikut. 


Sub SyncBrng Click() 


ProgressDialog Show 2("Loading data from server. Please wait...", False) 


GetDataBrng 


End Sub 


l. Setelah itu membuat event Job Dene yang akan berjalan ketika proses komunikasi antara App Client (Android) dengan web server selesai dikerjakan. Perintahnya adalah sebagai berikut. 

Sub JobDone(Job As HttpJob)


If Job.Success = False Then


Log("Peringatan: " & Job. ErrorMessage)


ProgressDialogHide


Else


If Job. JobName = "DBRequest" Then


Dim result As DBResult = reqManager.HandleJob(Job)


Tampilkan data ke dalam bentuk Tabel.


Table1.LoadRDCResult(result, True)


Progress DialogHide


End If


End If


Job.Release


End Sub


m. Pada akhirnya, lakukan penyimpanan (Save) dan Run/Compile project dalam versi Release. Jika datanya ingin ditampilkan ke dalam ListView, akan tampak sebagai berikut.








Minggu, 29 September 2024

Bab 4 Pemrograman Berorientasi Objek

 



Membuat Aplikasi Multimedia 

A Pengertian Multimedia 

Kemajuan teknologi memberikan berbagai macam manfaat bagi kehidupan manusia. Teknologi diciptakan untu mempermudah sekaligus mempercepat aktivitas-aktivitas yang dilakukan oleh manusia. Dahulu, manusia menggunakan surat untuk dapat berkomunikasi dengan seseorang yang lokasinya cukup jauh. Saat ini, dengan adanya media elektronik seperti halnya ponsel, dapat mempermudah komunikasi tanpa terhalang oleh jarak dan waktu. Ponsel merupakan salah satu perangkat multimedia yang akrab dalam kehidupan masyarakat. 

Multimedia adalah pemanfaatan komputer untuk menyajikan dan menggabungkan teks, grafik, audio, dan video dengan alat dan penghubung yang memungkinkan pengguna untuk berinteraksi dan berkomunikasi. Terdapat banyak komponen penting untuk multimedia. Pertama, harus ada komputer untuk mengoordinasikan hal-hal yang Anda lihat dan dengar. Kedua, harus ada penghubung yang menghubungkan informasi. Ketiga, harus ada alat navigasi yang memungkinkan Anda menjelajahi web dan informasi yang terhubung. Terakhir adalah cara untuk mengumpulkan dan memproses informasi. 

Java menyediakan fasilitas pembangunan aplikasi multimedia dengan JMF atau Java Media Framework. Fasilitas ini memungkinkan Anda menambahkan audio, video, dan media lainnya ke dalam program Java. Berikut akan dijelaskan mengenai cara menerapkan objek multimedia dalam membangun aplikasi Java menggunakan JMF.

(B) Pengenalan JMF 

MF atau Java Media Framework amework (JMF) adalah library Java JMF yang memungkinkan audio, video, dan media lainnya untuk ditambahkan ke aplikasi dan applet Java. Paket opsional ini dapat menangkap, memutar, mengalirkan, dan mentranskode banyak format media, serta memungkinkan pengembangan aplikasi multimedia lintas platform. 

Java Media Framework (JMF) adalah bagian dari Application Programming Interface (API). JMF menjadi salah satu solusi dalam pemrograman multimedia berbasis Java. API ini memungkinkan developer untuk mengintegrasikan dua bagian dari aplikasi yang berbeda secara bersamaan. Saat ini, JMF versi 2.1 merupakan pengembangan yang dilakukan Sun Microsystems untuk membawa pemrosesan media berbasis waktu ke Java.


Media berbasis waktu adalah data yang berubah sehubungan dengan waktu, seperti klip audio dan video, sequence MIDI, dan animasi. Format yang didukung meliputi AU, AVI, MIDI, MPEG, QuickTime, dan WAV. Beberapa kegunaan dari JMF, antara lain sebagai berikut. 

1. Memutar media streaming dari internet. 

2. Mengabadikan audio dan video dengan mikrofon dan kamera video. 

3. Memproses media berbasis waktu dan mengubah format tipe konten. 

4. Mengirim audio dan video secara real time di internet (video streaming). 

5. Melakukan siaran langsung acara radio atau televisi.


Secara garis besar, Java telah memiliki kemampuan dasar dalam pengolahan media, kecuali Codecs, Capturers, dan Renderers. Pada bagian ini, JMF berperan sebagai pelangkap Java untuk pengolahan multimedia. 

C. Arsitektur dan Instalasi JMF 

Sebelumnya Anda telah diperkenalkan dengan Java Media Framework beserta sistem kerja dan konstruksinya. Pada subbab ini, Anda akan dijelaskan mengenai arsitektur dari JMF dan langkah-langkah instalasinya.

1. Arsitektur JMF 

Arsitektur dari JMF sangatlah sederhana dan secara singkat dapat dibagi dalam tiga bagian, yaitu sebagai berikut. 

a. Input Input berguna untuk memastikan ketersediaan media yang akan diproses. Media tersebut dapat berupa gambar, suara, atau film pendek. 

b. Process Process atau proses berguna untuk mengolah media yang dimasukkan untuk menjadi sebuah tampilan pada bagian output. 

c. Output Output berguna untuk menampilkan hasil tampilan akhir dari media yang telah diolah.


2. Langkah-Langkah Instalasi JMF 

Langkah-langkah untuk melakukan instalasi JMF pada Java, antara lain sebagai berikut. 

a. Download terlebih dahulu library JMF dari website resmi pada laman http://www.oracle.com/technetwork/java/javase/ download-142937.html.


b. Klik Download, kemudian Anda akan diarahkan pada halaman pemilihan versi software yang akan di-download. Setelah itu, klik Windows Performance Pack atau jmf- 2_1_1e-windows-i586.exe, kemudian proses download pun akan dimulai.


C. Double click file hasil download jmf-2_1_1e-windows-i586.exe tersebut. Setelah itu, akan muncul tampilan Software License Agreement, klik Yes untuk memulai instalasi.


d. Atur direktori penyimpanan instalasi, disarankan tetap mengikuti direktori standar yang telah diatur program. Setelah menentukan direktori instalasi, klik Next.


e. Pada tampilan Select Components, centang semua bagian, kecuali pada bagian Permit. Setelah itu, klik Next.


f. Selanjutnya, pada tampilan setup complete, klik radio button Yes, I want to restart my computer now, kemudian klik Finish.


g. Komputer akan di-restart untuk mempersiapkan aplikasi JMF. Setelah proses restart selesai, aplikasi JMF plugin siap digunakan. 

(D) Cara Menggunakan JMF 

Aplikasi JMF plugin yang telah terinstal dapat digunakan Luntuk memutar file audio dengan menggunakan aplikasi JMStudio. Langkah-langkah menggunakan JMF adalah sebagai berikut. 

1. Pastikan JMF sudah terinstal di komputer. 

2. Buka direktori penyimpanan file JMF pada folder C:\Program Files (x86)UMF2.1.1e\bin\.


3. Double click pada file JMStudio.exe.


4. Klik pada File - Open File. Selanjutnya, pilih file multimedia yang ingin diputar.



5. Klik Open atau double click pada file yang ingin diputar. Setelah itu, file akan tereksekusi secara otomatis.


E. Membuat Proyek Mutimedia dengan JMF


 Setelah IMF plugin sudah terpasang. Anda dapat langsung mengimplementasikannya untuk membuat sebuah proyek pemrograman sederhana dengan Java Media Player.


 1. Membuat Player MP3 Sederhana dengan Command Line 

Pada bagian ini akan diimplementasikan pembuatan aplikasi audio player sederhana yang akan menggunakan class manager dan interface player, keduanya merupakan dasar dari pembuatan aplikasi berbasis JMF. Aplikasi ini dapat digunakan untuk mengeksekusi sebuah file multimedia dengan tipe mp3, wav, au, serta beberapa model yang lain. 


Perhatikan kode program berikut.


1 import javax.media.*; 


2 import java.io.File; 


3 import java.io.IOException; 


4 import java.net.URL; 


5 import java.net.MalformedURLException;


 6


 7 public class SimpleAudioPlayer { 


8 private Player audioPlayer = null;



10 public SimpleAudioPlayer (URL url) throws IOException,


 11 NoPlayerException, 


12 CannotRealizeException { 


13 audioPlayer Manager. createRealizedPlayer (url); 


14 {


 15 


16 public SimpleAudioPlayer (File file) throws IOException,


17 NoPlayerException, 


18 CannotRealizeException { 


19 this (file.toURL()); 


20 {


21


 22 public void play() { 


23 audioPlayer.start(); 


24 {


25 


26 public void stop() {


27 audioPlayer.stop(); 


28 audioPlayer.close(); 


29 


30 


31 public static void printUsage() {


 32 System.out.println("Usage: java SimpleAudioPlayer audioFile"); 


33 }


 34 


35 public static void main(String[] args) {


36 try { 


37 if (args.length== 1) {


38 File audioFile new File(args[0]);


 39 SimpleAudioPlayer player = new SimpleAudioPlayer (audioFile); 


40 System.out.println(); 


41 System.out.println("-> Playing file <" + 


42 audioFile.getAbsolutePath() + ">"); 


43 System.out.println(" exit"); Press the Enter key to 


44 player.play(); 


45 System.in.read();


 46 System.out.println("-> Exiting"); 


47 player.stop(); 


48 } else {


 49 printUsage();


 50 { 


51 } catch (Exception ex) 


 52 ex.printStackTrace();


53 { 


54 System.exit(0);


 55 }


56 }



a. Import library yang dibutuhkan dengan perintah berikut.


 import javax.media.*; 


import java.io.File; 


import java.io.IOException; 


import java.net.URL; 


import java.net.MalformedURLException;


 Package javax.media adalah salah satu dari banyak package JMF yang berisi class manager dan interface player, kedua bagian ini berperan penting dalam mengaktifkan fungsi JMF untuk mengeksekusi file multimedia.


 b. Mempersiapkan sebuah sistem audio player, yang akan dimulai dari awal track. 


public class SimpleAudioPlayer { 


private Player audioPlayer = null; 


C. Mempersiapkan instant system player yang akan direspons oleh class manager, serta mempersiapkan alamat media yang akan dieksekusi. 


public SimpleAudioPlayer (URL url) throws


 IOException, NoPlayerException,


        CannotRealizeException { 


     audioPlayer = Manager.createRealizedPlayer (url;


 } 


d. Perintah untuk memutar dan menghentikan file multimedia.


 public void play() { 


audioPlayer.start();


 }


 public void stop() {


 audioPlayer.stop(); 


audioPlayer.close();


 }


e. Membuat sebuah method untuk menampilkan ("Usage: Java SimpleAudioPlayer audioFile");


 public static void printUsage() { 


        System.out.println("Usage: java


 SimpleAudioPlayer audioFile") ;

}


f. Pada bagian main program, digunakan untuk menjalankan file audio yang telah dipersiapkan.

public static void main(String[] args) {

try {

if (args.length == 1) {

File audioFile = new File(args[0]);

SimpleAudioPlayer player = new

SimpleAudioPlayer (audioFile);

System.out.println();

System.out.println("-> Playing file <" +

audioFile.getAbsolutePath() + ">");

System.out.println("Press the Enter key to

exit");

player.play();

System.in.read();

System.out.println("-> Exiting");

player.stop();

} else {

printUsage();

}

} catch (Exception ex) {

ex.printStackTrace();

System.exit(0);

}


g. Untuk menjalankan kode program tersebut, siapkan sebuah file bertipe .mp3. File tersebut disimpan pada drive tertentu, misalnya C:\a.mp3.


2. Membuat MP3 Player Sederhana

Pada bagian ini, JMF akan diimplementasikan untuk memainkan file multimedia bertipe mp3 dengan tampilan sederhana. Langkah-langkah untuk memainkan file mp3 dengan JMF adalah sebagai berikut.


a. Import library package.

b. Membuka library.

c. Memainkan file multimedia.


Untuk membuatnya, perhatikan kode program berikut.


1 import java.io.File;

2 import javax.media.Manager:

3 import javax.media.Player:

4 public class Main2 (

5 static Player audioPlayer = null;

6 public static void main(String[] args) (

7 try {

8 System.out.println("TIDAK TAMPILAN TAPI AKAN TERDENGAR SUARA MUSIK");

9 Manager.createRealizedPlayer (new 

10 File("C:\\a.mp3").toURL()).start();

11 } catch (Exception ex) {

12 ex.printStackTrace();

13 }

14 }

15 }


Penjelasan kode program tersebut adalah sebagai berikut.

a. Bagian ini digunakan untuk import JMF library package, model library yang di-import adalah model sederhana karena tidak menggunakan frame AWT atau Swing.

import java.io.File;

import javax.media.Manager;

import javax.media.Player;


b. Bagian ini menunjukkan bahwa media player berada pada posisi off atau akan memutar media dari awal track.


static Player audioPlayer = null;


c. Bagian ini menunjukkan bahwa media player memutar file a.mp3 yang tersimpan pada drive C, dan akan diputar mulai dari track pertama.

Manager.createRealizedPlayer (new File("C:\\a. mp3").toURL()).start();

catch (Exception ex) {

ex.printStackTrace();

}


Hasil kompilasi kode program tersebut adalah sebagai berikut.



3. Membuat Pemutar Film Sederhana dengan JMF

Pada bagian ini, JMF akan diimplementasikan untuk menjalankan file film dengan tampilan sederhana. Langkah- langkah untuk menjalankan file film dengan JMF adalah sebagai berikut.


a. Import library.

b. Membuat class extends.

C. Mempersiapkan object panel JMF.

d. Membuka file sesuai kode sumber.

e. Menjalankan file.


Untuk membuatnya, perhatikan kode program berikut.


1 // Aplikasi Multimedia Sederhana

2 import javax.swing.*;

3 import java.awt.*;

4 import java.awt.event.*;

5 import javax.media.*;

6 import java.net.*;

7

8 public class HelloJMF extends JFrame |

9 static Player myPlayer = null;

10 public HelloJMF() {

11 super("Demo JMF");

12 play();

13 Component panelControl myPlayer. getControl PanelComponent()

14 Component visualComponent getVisualComponent(); myPlayer.

15 this.getContentPane().add(panelControl, BorderLayout.SOUTH);

16. this.getContentPane().add

(visualComponent, BorderLayout.CENTER);

17 this.addWindowListener(new WindowAdapter() {

18 public void windowClosing (WindowEvent we) (

19 stop();

20 System.exit(0);

21 }

22 });

23 this.pack();

24 this.setSize(new Dimension (500, 400));

25 this.setVisible(true);

26 }

27

28 public static void main(String[] args) {

29 HelloJMF helloJMF new HelloJMF();

30 }

31

32 void play() {

33 try {

34 URL url = new URL("file:, null, "D:\\Lafadz. mpg");

35 myPlayer = Manager.

createRealizedPlayer (url);

36 myPlayer.start();

37 } catch (Exception e) {

38 System.out.println("Unable to create the

audioPlayer :" + e);

39 }

40 }

41

42 void stop() {

43 myPlayer.stop();

44 myPlayer.close();

45 }

46 }

Penjelasan kode program tersebut adalah sebagai berikut.


a. Bagian tersebut digunakan untuk meng-import komponen Java yang dibutuhkan untuk membuat aplikasi media player dengan JMF.


import javax.swing.*;

import java.awt.*;

import java.awt.event.*;

import javax.media.*;

import java.net.*;


b. Membuat objek turunan JFrame yang akan dipanggil dengan nama HelloJMF.


public class HelloJMF extends JFrame {


C. Memanggil method JMF untuk memainkan atau menjalankan media.


play();

Component panelControl = myPlayer.

getControl PanelComponent();

Component visualComponent = myPlayer.

getVisualComponent();


d. Menempatkan posisi media player di layar monitor.


this.getContentPane().add(panelControl, BorderLayout.SOUTH);

this.getContentPane().add(visualComponent, BorderLayout.CENTER);


e. Menampilkan Windows Media Player.


this.addWindowListener(new WindowAdapter() {


f. Method ini berguna untuk menutup Windows Media Player dan menghentikan media player.


public void windowClosing (WindowEvent we) {

stop();

System.exit(0);

}


g. Mengatur ukuran Windows Media Player.


this.pack();

this.setSize (new Dimension (500, 400));

this.setVisible(true);


h. Method ini berguna untuk membuka file media yang akan diputar, file tersebut disimpan di drive D dengan nama Lafadz.mpg, dan melakukan eksekusi untuk memainkan file tersebut.

void play() {

try {

URL url = new URL("file", null, "D:\\Lafadz. mpg");

myPlayer = Manager.

createRealizedPlayer (url);

myPlayer.start(); 

} catch (Exception e) {

System.out.println("Unable to create the

audioPlayer :" + e);

}

}


i. Method ini digunakan untuk menghentikan eksekusi file Lafadz.mpg dan menutup media player.


void stop() {

myPlayer.stop();

myPlayer.close();

}


Tampilan eksekusi file Lafadz.mpg adalah sebagai berikut.



Ulangan Akhir Bab 5

 A. Pilihlah salah satu jawaban yang tepat.  1. Jenis usaha yang memiliki uang kas sebagai modal dan biaya produksi dengan besaran tidak leb...