Membuat Aplikasi Login dengan EXTJS 7.0.0 (Part 2)

 Kita lanjut serial tutorial membuat Aplikasi Login dengan EXTJS 7.0.0. Tutorial ini merupakan lanjutan dari part 1. Jadi harus diikuti secara berurutan ya.

A. GUNAKAN TEXT EDITOR PILIHANMU

Bagi yang belum tahu apa itu Text Editor, secara sederhana di dunia pemrograman namanya aplikasi buat ngoding. Diantaranya:

1. Sublime Text (Sublime)
2. Visual Studio Code (VS Code)
3. Atom
4. Notepad++
5. DLL.

Yang terpenting adalah saat ngoding dengan text editor tersebut mudah, nyaman dan bisa produktif. Kalau saya sendiri biasa pakai Sublime Text untuk project dengan Extjs atau php. Visual Studio Code untuk project android dengan Flutter. Pokoknya pilih yang cocok aja sama kebiasaanmu.

B. PAHAMI AREA BERMAIN -> FOLDER APP 

Penampakan struktur folder MantapApp dibuka dengan Sublime Text

1. Silahkan buka folder MantapApp dengan Text Editor (Sublime/VS Code/sejenisnya). 
2. Di dalamnya ada banyak folder dan file. Pastilah ya...
3. Nah, fokus kita ada di folder app. Kita nantinya bakal bermain dengan file Application.js, folder model, store dan view.
4. Secara singkat dan menurut pemahaman saya:
• Application.js : merupakan file utama aplikasi yang kita bangun. Saat mengakses halaman localhost:1841, file ini nih core of the core yang pertama kali dipanggil. Note: Kalau mau dirunut yang pertama kali di load: sudah tentu index.html ->  app.js. Nah si app.js itu extend Application.js jadi app.js = Application.js yang di modifikasi. Jangan bingung lah ya... Nanti bakal paham sendiri kok, kalau sudah sering bermain-main sama komponen extjs.
• model : merupakan folder yang bersisi file-file model .js. Model  = pendefisinian bentuk data, gampangannya tabel/tabel_view beserta kolom-kolomnya. Misal di database ada tabel master pelanggan, punya kolom: nama, telepon, dan umur. Nah, di dalam folder model ini, perlu kita buat file model dengan nama Pelanggan.js, isinya field-field nama, telepon dan umur. Nantinya model ini kita gunakan saat membuat file store.js.
• store : merupakan folder yang berisi file-file store .js. Store = tempat penyimpanan data. Jadi data yang kita minta ke server bakal disimpan di dalam store. Semisal, kita membuat store Pelanggan.js dengan pengaturan loadPage = 10, maka yang terjadi saat kita memanggil store Pelanggan (method load) adalah store meminta data ke Server sebanyak 10 baris data. Lalu 10 baris data yang didapatkan dari server, disimpan di dalam store Pelanggan.
• view : merupakan folder yang berisi file-file view/tampilan, controller/aksi-aksi dari klik komponen / logika / fungsi, dan viewModel / model tampilan .js. View = tampilan, yang terlihat di aplikasi atau yang tertampil di aplikasi. Misal kita ingin menampilkan data pelanggan. Maka kita buatkan view Pelanggan.js dalam bentuk tabel (Grid) dengan menggunakan store Pelanggan. Di store Pelanggan tadi, ada 10 data. Jadi nanti yang tertampil di aplikasi adalah 10 data pelanggan.
• model dibutuhkan sama store, store dibutuhkan sama view, view dipanggil sama Application.js 👍🏻 mantap!!!

C. MARI KITA MULAI BUAT APLIKASI LOGIN

C.1 Membuat Tampilan Login

1. buat tampilan baru di dalam folder view, dengan membuat folder baru: login
2. di dalam folder login, buat file baru: Login.js , copy paste script berikut:
3. di dalam folder login, buat file baru: LoginController.js , copy paste script berikut:

Struktur folder MantapApp setelah membuat tampilan Login

C.2 Modifikasi script Application.js

Kita perlu memodifikasi Application.js untuk menampilkan halaman Login (jika user belum login) atau halaman Main/Utama (jika user sudah login).

1. buka file: Application.js , ganti scriptnya dengan script berikut:

C.3 Modifikasi script app.js

Baris kode di dalam file app.js sebetulnya hanya extend dari Application.js, kita tidak akan menambahkan apa-apa di app.js agar file app.js ini sama persis dengan Application.js. Kalau kamu pernah belajar OOP php, Application.js = kelas , lalu app.js = membuat objek baru Application.js.

1. buka file: app.js (file yang berada di dalam folder MantapApp), ganti scriptnya dengan script berikut:

 D. CEK HASILNYA

Caranya seperti di tutorial Part 1 bagian C. Jalankan Aplikasi

Buka Terminal / CMD , masuk ke folder MantapApp, lalu jalankan perintah sencha app watch, buka browser, akses: http://localhost:1841

Tampilan login MantapApp

Silahkan isi username dan password: bebas (yang penting diisi). Lalu klik tombol Masuk.

Tampilan Main/Utama MantapApp

Loh kenapa tampilannya kosong / blank?

Mari kita perbaiki, hal ini disebabkan kita telah menghapus tampilan Main yang kita definisikan di app.js. Untuk menampilkan halaman Main , mari kita buka file app/view/main/Main.js

Tambahkan config 

plugins: 'viewport',

setelah baris xtype: 'app-main', 

menjadi seperti ini:

Silahkan refresh kembali aplikasinya (http://localhost:1841).

Logout / keluar aplikasinya gimana?

Tenang, yuk... kita lanjutkan.

Buka file app/view/main/Main.js

Kita ganti tampilan lorep ipsum.. di menu Settings dengan tombol Keluar, di script title: 'Settings' menjadi seperti ini:

{
    title: 'Settings',
    iconCls: 'fa-cog',
    items: [
        {
            xtype: 'button',
            text: 'Keluar',
            iconCls: 'x-fa fa-sign-out-alt',
            handler: 'keluarAplikasi'
        }
    ]
}

handler: 'keluarAplikasi' -> artinya event klik tombol Keluar, akan memanggil fungsi keluarAplikasi.

Source code lengkap dari file Main.js adalah seperti berikut:

Terakhir,  kita buat fungsi keluarAplikasi di dalam file MainController.js. Buka file app/view/main/MainController.js

tambahkan baris kode berikut, setelah baris alias: 'controller.main',

keluarAplikasi: function() {
    var me = this;
    Ext.MessageBox.confirm(
        'Konfirmasi', 
        'Kamu yakin mau keluar dari aplikasi?', 
        function(choice) {
            if(choice == 'yes') {
                // Hapus variabel PenggunaMasuk dari localStorage
                localStorage.removeItem('PenggunaMasuk');

                // Hapus tampilan Main / utama
                me.getView().destroy();

                // Buka tampilan Login
                Ext.widget('app-login');
            }
        }
    );
},

Source code lengkap dari file MainController.js adalah seperti berikut:

Selesai!

Silahkan dicoba kembali aplikasinya, refresh page browser, klik menu Settings, klik tombol Keluar. Coba login lagi... logout lagi... Gimana? Mantap kan?

Mungkin ada yang bertanya lagi, itu loginnya cuma ngisi username dan password ngasal, realitanya kan gak begitu. Yap betul! Seyogyanya dicek ke database dong ya. Untuk menjawab pertanyaan ini, kita lanjut di part 3.

Seri tutorial extjs bahasa indonesia.