Mengenal Komponen SAPUI5/UI5 - Belajar SAPUI5/UI5 Part 2

-
Halo...
melanjutkan postingan saya sebelumnya Membuat Project Baru SAPUI5, pada postingan kali ini saya akan membahas komponen-komponen yang ada dan bisa kita gunakan dalam sapui5, pada umumnya dalam web programming komponen2 yang digunakan seperti table, textfield/textbox, label/text, combobox, button, radio button, checkbox dll, di sapui5 pun menggunakan komponen2 tersebut untuk lebih jelasnya komponen2 yang ada di sapui5 bisa dilihat disini.

Sebelum lanjut pada pembahasan saya akan menjelaskan terlebih dahulu perbedaan library yang saya bahas di postingan sebelumnya yaitu sap.m dan sap.ui.commons.

sap.m ini kita gunakan apabila kita akan membuat web yang bisa dijalankan di smartphone karena komponen2 didalamnya sudah responsive berbeda dengan sap.ui.commons yang tidak mendukung tampilan yang responsive namun tetap bisa buka melalui smartphone tapi tidak responsive, nah itu perbedaan mendasar dari library sap.m dan sap.ui.commons.

komponen2 pada sapui5 secara default sudah memiliki event, constructor, agregation dan properti2 yang bisa digunakan, misalnya untuk mengatur width, height, text dll, setiap komponen memiliki properti yang berbeda-beda, event, constructor, agregation dan properti2 untuk setiap komponen bisa dilihat disini tinggal pilih komponen yang mau dilihat.

sebelumnya kita buka project yang sudah kita buat sebelumnya

ok mari kita mulai pada pembahasan kita :


1. Text
Text ini biasanya digunakan untuk menampilkan text, untuk menggunakan komponen text
kita bisa menuliskan source code berikut didalam file index.view 

pertama kita deklarasikan variable untuk text disini variablenya cText kemudian properti text kitas isi "Hello Word"

untuk menampilkan cText harus kita panggil didalam content return new sap.m.Page, yang ditampilkan dihalaman web kita adalah new sap.m.Page beserta content2 nya. ok sekarang kita jalankan aplikasinya dan lihat hasilnya :



2. Label dan TextBox / Input
berikut cara penggunaan label dan textbox di sapui5


dan hasilnya seperti berikut :



3. Combobox


source code :


keterangan :
- oModel adalah variable untuk menampung data berupa JSON yang akan ditampilkan dicomboBox
- oItemTemplate : ini berfungsi untuk menampilkan data dari model dimana bind aggregation dari comboBox akan diisi dengan oItemTemplate ini



Sekian sharing kali ini, untuk komponen selanjutnya akan saya tulis di tulisan berikutnya,

Terimakasih :D

Comments

Post a Comment

Popular posts from this blog

IT Asset Management Dengan PHP MySQL

-
Image
Pada postingan kali saya akan share sebuah aplikasi IT Asset management yang fungsinya untuk memonitoring semua Asset khusus IT, contohnya : Laptop/komputer , Printer, Router, Hardisk, dll. Dalam aplkasi ini kita bisa mengetahui Asset IT posisinya dimana dan digunakan oleh siapa. untuk data-data yang dibutuhkan antara lain : 1. data kategori asset dalam menu ini kita bisa meng-input jenis2 kategory asset : tambah kategori asset : 2. data department 3. data karyawan 4. data department per karyawan 5. data asset location  6. data satuan asset dan untuk transaksi yang ada dalam aplikasi ini adalah,  1. create asset, pada menu create asset ini kita akan mengalokasikan sebuah asset ke karyawan/personnel tampilannya seperti berikut: setelah klik tombol save akan muncul seperti dibawah : untuk melihat detail asset yang sudah dibuat tadi, kita bisa pilih menu tra
Read more

PHP MySql CRUD Dengan Konsep MVC

-
Image
Pada postingan kali ini saya akan sharing cara membuat CRUD dengan php menggunakan konsep MVC, ok langsung saja buka code editor (saya menggunakan sublime text) dan buat folder baru dengan nama phpmvc didalam folder htdocs kalian dan tambah folder seperti berikut :  Setelah itu kita siapkan database di mysql, buat database dengan nama phpmvc dan tablenya seperti gambar berikut : tambahkan file config.php didalam folder app/config : <?php define('BASEURL', 'http://localhost:8181/phpmvc/public'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'phpmvc'); kemudian tambahkan 3 file controller didalam folder app/controllers, yaitu Home, About, dan Mahasiswa : Home.php <?php class Home extends Controller { public function index() { $data['nama'] = $this->model('User_model')->getUser()
Read more

Cara Sederhana Multi Insert Data Dengan PHP - MySQL

-
Image
Pada postingan kali ini saya akan share cara melakukan insert lebih dari satu data dengan menggunaka PHP- Jquery dan MySQL. Pertama buat database di MySQL dan table, disini saya membuat database dengan nama db_latihan dan table dengan nama t_barang dengan struktur table seperti berikut : Setelah membuat database dan table selanjutnya membuat project PHP, project PHP nya saya buat dengan nama multi-insert, lalu didalam folder ini saya membuat dua file yaitu index.php dan insert.php . Source code index.php seperti berikut : <! doctype   html > < html   lang = "en" >    < head >      <!-- Required meta tags -->      < meta   charset = "utf-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1" >      <!-- Bootstrap CSS -->      < link   href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"   rel = "stylesheet"   integrity =
Read more