Membuat Project Baru SAPUI5/UI5 - Belajar SAPUI5/UI5 Part 1

-
Pada postingan kali ini saya akan berbagi tentang sapui5 / ui5 yaitu cara membuat project baru di sapui5, dimana untuk editor kita menggunakan eclipse versi oxygen (bisa juga pakai eclipse yang lain) tapi saya sarankan menggunakan versi oxygen.

sebelum lanjut pada pembahasan ada baiknya kita berkenalan terlebih dahulu dengan sapui5/ui5, sapui5 merupakan sebuah framework yang disediakan oleh SAP jika belum tau apa itu SAP silahkan dicari di goole :D, tapi saya akan sedikit memberikan gambaran apa itu SAP.

SAP merupakan suatu software yang dikembangkan untuk mendukung suatu organisasi dalam menjalankan kegiatan operasionalnya secara lebih efisien dan efektif. SAP merupakan software Enterprise Resources Planning (ERP), yaitu suatu tools IT dan manajemen untuk membantu perusahaan merencanakan dan melakukan berbagai aktivitas sehari-hari.  

nah itu sedikit pencerahan apa itu SAP, untuk lebih detailnya silahkan di googling ya sobat.... :D, sekarang kita lanjutkan pembahasan tentang sapui5. sapui5 merupakan framework berbasis javascript yang disediakan oleh SAP dimana untuk programmingnya bisa menggunakan javascript atau xml. sapui5 ini sudah menerapkan konsep model view controller (MVC), nah itu sedikit pencerahan apa itu sapui5 :D

ok sebelum kita mulai membuat project baru sapui5, kita harus menambahkan add on sapui5 terlebih dahulu di eclpise, caranya klik menu help->Install New Software



Setelah itu dibagian work with diisi seperti gambar berikut  :



setelah itu klik select All dan klik Next sampai proses instalasinya selesai.

Setelah proeses instalasi selesai kita buat project baru klik File->new->Project




lalu pilih SAPUI5 Application Development -> Application Project



kemudian klik next dan isi nama project, untuk Library secara default akan menggunakan sap.m tetapi kita bisa menggunakan keduanya dalam satu project dan bisa kita tambahkan manual didalam source code. note : untuk perbedaan library sap.m dan sap.ui.commons nanti akan dibahas terpisah



setelah mengisi nama project klik next dan isikan nama view dan pilih Development program -> JavaScript lalu klik finish



sampai disini kita sudah berhasil membuat project baru sapui5, berikut structure project sapui5 yang sudah kita buat 




secara default akan terbuat file index.view, index.controller dan index.html
index.view ini tempat kita membuat tampilan web kita
index.controller ini untuk menuliskan logic program kita
index.html untuk menampilkan view web kita yang dijalankan melalui web browser


untuk index.html akan terlihat seperti berikut



seperti yang saya jelaskan sebelumnya kita bisa menggunakan library sap.m dan sap.ui.commons dalam satu project, untuk menambahkan library sap.ui.commons dalam project cukup dengan menambahkan dibagian data-sap-ui-libs="sap.m" menjadi data-sap-ui-libs="sap.m, sap.ui.commons" begitu seterusnya jika ingin menambah library dalam project kita, ok untuk menjalankan project yang sudah kita buat caranya klik kanan di source code index.html -> Run As -> Web App Preview dan di eclipse akan muncul satu tab baru untuk menampilkan halaman web kita atau kita juga bisa membukanya dengan web browser dengan cara klik pada bagian yang ditandai merah



ok cukup sekian untuk sharing kali ini, untuk sharing berikutnya saya akan membahas komponen2 yang ada di sapui5 dan cara menggunakan nya.

Terimakasih semoga bermanfaat :D

Comments

Post a Comment

Popular posts from this blog

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

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

-
Image
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...
Read more

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