Membuat Aplikasi Login dengan EXTJS 7.0.0 (Part 3)

 Tutorial membuat Aplikasi Login dengan EXTJS 7.0.0 part 3 ini, secara khusus diperuntukkan bagi teman-teman yang suka main Front End dan Back End sekaligus alias Full Stack Developer. Tanpa mengikuti tutorial part 3 ini tidak masalah, bagi teman-teman yang fokus di bagian UI / Tampilan Antar Muka a.k.a Front End.

Di tutorial ini, kita akan membuat SERVICE yang nantinya digunakan oleh MantapApp dengan bahasa pemrograman PHP secara sederhana. Database yang digunakan menggunakan MySQL / MariaDB.

A. PERSYARATAN

1. Minimal kamu sudah pernah install XAMPP
2. Tahu letak dokumen localhost, biasanya ada di folder instalan XAMPP -> folder htdocs. Linux users yang manual install apache, php & mysql ada di /var/www/html atau /var/www/public/html
3. Bisa membuat database dengan phpmyadmin atau software sql editor.
4. Tutorial ini akan lebih mudah diikuti kalau pernah ngoding php, kalau belum juga bisa kok. Yang penting ketiga poin di atas.

B. PERSIAPAN

1. Install Web Server. Pada umumnya menggunakan XAMPP. Versi PHP bebas (minimal 5.6), pake versi 7 atau 8 juga boleh. 
2. Alternatif selain XAMPP juga boleh, ada WAMP, AMPPS, dll. Mungkin bagi user Linux, install Apache2, php & mysql. Kalau sudah install Web Server, lanjut...
3. Jalankan service Apache dan Mysql.
4. Pastikan bisa mengakses database mysql dengan http://localhost/phpmyadmin

C. EKSEKUSI

1. BUAT DATABASE BARU

1. Buka http://localhost/phpmyadmin
2. Login kalau yang ngaktifin password.
3. New -> kasih nama database baru dengan nama: mantapapp

2. BUAT TABEL USER

1. Aktif di database mantapapp
2. Create table -> kasih nama tabel baru dengan nama: users 
3. Number of columns atau jumlah kolom, isi: 2
4. Field 1: username (Type: Varchar, Length: 100)
5. Field 2: password (Type: varchar, Length: 200)
6. Simpan
7. Insert data user baru, Username: mantap . Password: mantap (pakai md5) -> Go

Yang mau eksekusi pakai SQL Editor:

CREATE TABLE `users` (
  `username` varchar(100) NOT NULL,
  `password` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO users
(username, password)
VALUES('mantap', '2fea6c02a98d6318d44cdf150775f07a');

3. BUAT FILE SERVICE

1. Masuk ke lokasi folder localhost = htdocs atau /var/www/html
2. buat folder baru: mantapapp
3. masuk folder mantapapp
4. buat file service.php , copy paste script berikut:

Silahkan ubah value dari variabel $username dan $password. Sesuaikan dengan konfigurasi login mysql teman-teman.

4. UPDATE FUNGSI LOGIN MANTAPAPP

Langkah terakhir, kita update file app/view/login/LoginController.js menjadi seperti di bawah ini:

5. CEK HASILNYA

Jalankan aplikasi MantapApp (masuk folder MantapApp , run: sencha app watch). Buka http://localhost:1841 .  Cobain login dah! Username dan password diisi mantap.

Error! Konfigurasi database salah.

Error! Gagal login

Sukses Login!

Terima kasih telah mengikuti tutorial pembuatan aplikasi ini. Semoga bermanfaat. Silahkan tinggalkan komentar jika ada yang ingin ditanyakan. Salam sehat selalu! Semangat coding!

Seri tutorial extjs bahasa indonesia.