Implementasi JEasyUI di Yii2 menggunakan metode biasa dan programmatically. Dan dibantu oleh JEasyUI Gii Generator Yii2 & jeasyui.

Presentasi berjudul: "Implementasi JEasyUI di Yii2 menggunakan metode biasa dan programmatically. Dan dibantu oleh JEasyUI Gii Generator Yii2 & jeasyui."— Transcript presentasi:

1 Implementasi JEasyUI di Yii2 menggunakan metode biasa dan programmatically. Dan dibantu oleh JEasyUI Gii Generator Yii2 & jeasyui

2 Installasi Yii2 Template yii2-app-basic
Create project menggunakan composer, atau clone dari github dan composer update

3 Config & database

4

5 Cara Ubah Type Aplikasi
Template “basic” yii2 secara defaultnya bertipe FRONTEND, namun dalam demo implementasi JEasyUI ini kita menggunakan aplikasi bertipe backend / admin, maka kita harus ubah settingan di SiteController.php sehingga user wajib login untuk dapat mengakses aplikasi ini.

6

7 Setiap user melakukan request dan user tersebut belum login, maka akan selalu diarahkan ke halam login

8 Yii JavaScript modules
Yii2 javascript modules adalah module javascript yang membantu aplikasi kita di browser; yii\assets\yii.js adalah core atau pusat dari file-file javascript, dan akan selalu terload setiap app kita direquest; Alasan saya mengefektifkan javascript module ini, selain coding lebih rapi karena tidak ada potongan-potongan javascript yang menyisip di file php (kecuali hasil generate widget). Dan tentu saja mudah untuk ditracking saat pengembangan atau debuging; Alasan lain, karena kalau file bisa dichace oleh browser, sedikitnya bisa mengurangi beban trafic

9 AssetBundle Adalah suatu class yang mengatur asset-asset (js,css,img) dari webapp. Sehingga app tidak terlalu kotor dengan register clientscript; Class ini mempunyai alamat path, depedensi (ketergantungan dengan asset lain) dari asset-asset itu; Yang tidak kalah pentingnya, dengan forcedCopy kita bisa mengatur apakah Asset ini akan direpublish setiap request atau tidak. Dalam mode development, republish ini sangat penting, karena perubahan pada asset tidak akan ngefek. Sementara dalam mode production, republish harus dimatikan karena sedikitnya akan membebani server

10 Start with JEasyui

11 JEasyUI JEasyUI adalah javascript framework non mvc yang berjalan di atas jQuery yang membatu kita membuat halaman web yang menarik dalam waktu singkat. Produk serupa seperti jquery-ui, extjs dari sencha atau dojo. JEasyUI ini komersial atau berbayar, namun ada versi GPL-nya, tapi ya itu sourcenya diminified sehingga kita hanya bisa memakai saja tanpa bisa mengkustom.

12 Plugin JEasyUI Component-component yang disediakan oleh JEasyUI disebut Plugin seperti datagrid, property grid, combobox dan banyak lagi

13

14 Extension JEasyui Extension JEasyUI adalah kelas-kelas pendukung plugin untuk menghasilkan fungsi baru dari plugin yang didukungnya. Seperti Filter Datagrid, scrollview datagrid, ribbon tab, dll. Sourcenya terpisah dari JEasyUI dan tidak di minified sehingga kita bisa mengkustomnya

15

16 Load dan implementasi Ada 2 cara untuk meload script JEasyUI :
Cara biasa dengan menambahkan tag script dengan sourcenya ke file jeasyui yang full (core dan plugin digabung)

17 Cara kedua menggunakan easyloader
Cara kedua menggunakan easyloader.js yang mana hanya meload plugin-plugin yang dipakai saja. Dalam hal ini saya menggunakan cara yang kedua ini.

18 Ada 2 cara dalam implementasi JEasyUI
Pertama, cara biasa, yaitu dengan menambahkan class “easyui-nama_plugin” di element target. Ketika html sampai di browser, jeasyui akan memparser class-class yang berprefix “easyui” dan menggenerate menjadi komponen-komponen yang terlihat menarik;

19 Cara yg ke-2 yaitu cara programmatically, yaitu dengan membuat instruksi di javascript untuk membuat element target menjadi plugin atau komponent jeasyui

20 Yii2-jeasyui Repo : https://github.com/sheillendra/yii2-jeasyui.git
Adalah exstension yang saya buat untuk menampung asset jeasyui, karena jeasyui tidak ada online repo, dengan menambahkan assetBundle agar mudah digunakan di yii2; Dilengkapi dengan Gii CRUD-Generator untuk mempermudah membuat startup dalam menggunakan JEasyUI di yii2

21

22 User Module Applikasi demo ini bertipe Admin Dashboard, dimana user harus login dahulu agar dapat menggunakan aplikasi ini

23 jEasyUI-CRUD Gii Generator
Genarator ini bukan segalanya, ini hanya membantu kita mempermudah dalam memulai menggunakan JEasyUI. Layout hasil dari generator ini adalah layout bertipe dashboard. Berdasarkan model, CRUD Generator ini akan menggenarate : Controller Views Asset per-controller (ingat Javascript module yang dijelaskan tadi) Layouts dan assetnya (jika layout easyui ini belum ada)

24 Setting Gii

25

26 Generate Model Sebelum menggunakan generator JEasyUI-CRUD, generate terlebih dahulu model-model yang akan digunakan

27

28

29 Hasil dari generate model

30

31

32

33 Generating code using template "D:\nginx\html\movie\vendor\sheillendra\yii2-jeasyui\gii\generators\crud/default"... generated controllers\FilmController.php generated views\film\_index.php generated views\film\_new.php generated views\film\index.php generated views\film\new.php generated views\film\assets\FilmIndexAsset.php generated views\film\assets\FilmNewAsset.php generated views\film\assets\css\film-index.css generated views\film\assets\css\film-new.css generated views\film\assets\js\film-index.js generated views\film\assets\js\film-new.js generated views\layouts\_north-content.php generated views\layouts\_south-content.php generated views\layouts\_west-content.php generated views\layouts\main-login.php overwrote views\layouts\main.php generated web\js\app.js overwrote web\css\site.css overwrote controllers\SiteController.php generated views\site\_index.php generated views\site\_login-form.php generated views\site\_signup-form.php overwrote views\site\index.php overwrote views\site\login.php generated views\site\signup.php generated views\site\assets\LoginAsset.php generated views\site\assets\SignupAsset.php generated views\site\assets\css\login.css generated views\site\assets\css\signup.css generated views\site\assets\js\login.js generated views\site\assets\js\signup.js skipped assets\AppAsset.php generated components\helpers\Regex.php generated views\layouts\_nav-item.php done!

34 Layout File-file layout :
Main.php Main-login.php _north-content.php _west-content.php _south-content.php _nav-item web/js/app.js Layout secara keseluruhan akan digenerate saat pertama kali CRUD di gunakan, untuk selanjutnya hanya file _nav-item yang akan diupdate; Asset app.js akan digenerate dan ditempatkan di web/js/

35 Integrasi Fontawesome dengan JEasyUI
Install fontawesome, Fontawesome akan otomatis terinstall ketika kita memasang yii2-jeasyui Kenapa menggunakan fontawesome? Karena keterbatasan icon di jeasyui, dan icon fontawesome cukup lengkap

36 Terimakasih