Skip to main content

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

Halo...
Pada postingan kali ini saya akan melanjutkan postingan sayang sebelumnya mengenal komponen sapui5 part2, saya akan melanjutkan pembahasan tentang komponen sapui5 dan yang akan saya bahas pada postingan kali ini adalah Button, pada umumnya setiap aplikasi yang kita buat pasti akan membutuh yang namanya si Button ini heee :D

Ok, langsung saja kita buka project sebelumnya yang sudah kita buat pada postingan saya membuat project baru sapui5, setelah membuka projectnya kita tambahkan view baru dengan nama ui5_button, untuk menambah view baru caranya kita klik menu file atau klik kanan di folder belajar_ui5->new->Other



lalu pilih SAPUI5 Application Development->View



 Masukkan nama view "ui5_button" dan klik finish

Setelah membuat view akan langsung terbentuk dua file yaitu ui5_button.view.js dan ui5_button.controller.js untuk file html tidak ter-create otomatis seperti pada pertama kali kita membuat project, file html untuk menampilkan view ui5_button.view akan kita tambahkan secara manual, untuk memudahkan kita copy saja file index.html dengan nama ui5_button.html




untuk menambah html caranya klik kanan pada WebContent->html, berikut struktur project kita setelah menambah file html :


dan ganti file ui5_button.html menjadi seperti berikut :


Ok selanjutnya kita buka file ui5_button.view dan kita tambahkan komponen button, untuk button disini saya akan menggunakan sap.m.Button dan sap.ui.commons.Button :


untuk masing-masing button saya hanya menggunakan 2 properti saja yaitu text dan icon, untuk icon apa saja yang bisa kita gunakan bisa lihat DISNI tinggal kita copy nama iconnya terus dimasukkan di properti icon. pada bagian sap.m.Page saya menampilkan uiButton pada properti subHeader dan mButton pada content dan saya menambahkan properti footer. untuk melihat lebih details properti apa saja yang ada pada sap.m.Page bisa dilihat di https://sapui5.hana.ondemand.com/docs/api//symbols/sap.m.Page.html#constructor


ok sekarang kita coba jalankan dan kita lihat hasilnya :


kita sudah berhasil membuat button, dan sekarang kita akan menambahk event klik pada masing-masing button, untuk menambahkan event klik pada button kita harus menambahkan event press pada masing-masing button dan membuat function yang akan dijalankan pada event klik tersebut, untuk function kita taruh di dalam controller, ok kita buka file ui5_button.controller dan kita buat function dengan onKlik




secara default pada controller sudah tersedia 4 function, yaitu :
1. onInit : akan dijalankan ketika pertama kali halaman di load
2. onBeforeRendering : akan berjalan sebelum proses rendering halaman website
3. onAfterRendering    : akan berjalan setelah proses rendering halaman website
4. onExit : akan berjalan ketika kita keluar dari halaman

ok, kita coba refresh dan lihat hasilnya apakah event klik pada button sudah berjalan lancara, jika muncul alert Hallo berarti kita berhasil menambahkan even klik pada button




Ok cukup sekian sharing kali ini, untuk berikutnya saya akan sharing tentang table pada sapui5, ok sampai jumpa pada postingan selanjutnya, Terimakasih.... :D


Labels:

Comments

Post a Comment

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

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()...
22 comments
Read more

Cara Sederhana Multi Insert Data Dengan PHP - MySQL

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 ...
2 comments
Read more

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku). ok langsung saja kita buat project laravel dengan nama perpus : composer create-project --prefer-dist laravel/laravel perpus setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code. Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut : note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing. Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut :  php artisan make:migration crea...
14 comments
Read more