Modul Web Programming 2 - repository.bsi.ac.idModul Web Programming 2 Oleh : Agung Sasongko, M.Kom...

Modul Web

Programming 2

Oleh : Agung Sasongko, M.Kom

Program Studi Sistem Informasi Fakultas Teknologi Informasi

Agung Sasongko, M.Kom | Sistem Informasi

Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 2

Universitas Bina Sarana Informatika 2018

Daftar Isi

Pertemuan 1 ............................................................................................................................................... 4

1.1. Framework Web ......................................................................................................................... 4

1.2. Mengapa Laravel ........................................................................................................................ 5

1.3. Paket Aplikasi Pengembangan PHP ........................................................................................... 5

3.2. Mendaftarkan Direktori PHP ...................................................................................................... 8

3.3. Pemasangan Composer ............................................................................................................ 10

3.4. Pemasangan Laravel ................................................................................................................. 13

3.5. IDE Pengembangan Aplikasi Web ............................................................................................ 14

3.6. Aplikasi Presensi ....................................................................................................................... 17

3.7. Rancangan Database Presensi.................................................................................................. 18

3.8. Membuat Database Menggunakan Migration ........................................................................ 19

Tugas Rumah ........................................................................................................................................ 26

Pertemuan 2 ............................................................................................................................................. 28

2.1. Konsep MVC ............................................................................................................................. 28

2.2. Jenis-Jenis MVC ........................................................................................................................ 28

2.3. Model di Laravel ....................................................................................................................... 29

2.4. Membuat Model di Laravel ...................................................................................................... 29

2.5. Controller di Laravel ................................................................................................................. 35

2.6. Membuat Controller di Laravel ................................................................................................ 35

2.7. Mengatur Routing .................................................................................................................... 41

2.8. Pengujian .................................................................................................................................. 42

Latihan .................................................................................................................................................. 45

Tugas Rumah ........................................................................................................................................ 47

Pertemuan 3 ............................................................................................................................................. 49

3.1. Pengenalan Flutter ................................................................................................................... 49

3.2. Pemasangan Flutter SDK .......................................................................................................... 49



3.3. Pemasangan SDK Flutter Web .................................................................................................. 50

3.4. Memulai pembuatan Project Flutter Web ............................................................................... 51

3.5. Instalasi Paket Extension Flutter di VSCode............................................................................. 54

3.6. Pembuatan Tampilan ............................................................................................................... 54

3.7. Membuat Page Halaman .......................................................................................................... 67

3.8. Menghubungkan ke Beranda ................................................................................................... 71

Latihan .................................................................................................................................................. 73

Tugas Rumah ........................................................................................................................................ 74

Pertemuan 4 ............................................................................................................................................. 75

4.1. Penggunaan Future dan Async ................................................................................................. 75

4.2. Cross-Origin Resource Sharing (CORS) ..................................................................................... 76

4.3. Pemasangan CORS di Laravel ................................................................................................... 76

4.4. Pemasangan Plugin http di Flutter ........................................................................................... 79

4.5. Pengambilan data dari Server .................................................................................................. 80

4.6. Widget FormKaryawanScreen .................................................................................................. 86

4.7. Pengiriman data ke Server ....................................................................................................... 91

Tugas Rumah ........................................................................................................................................ 94

Pertemuan 5 ............................................................................................................................................. 97

5.1. Identifikasi Klien ....................................................................................................................... 97

5.2. Penggunaan Token ................................................................................................................... 97

5.3. LocalStorage ............................................................................................................................. 98

5.4. Membuat Form Login ............................................................................................................... 98

5.5. Pindah ke Halaman Lain ......................................................................................................... 105

5.6. ShowAlert ............................................................................................................................... 106

5.7. Auto Login............................................................................................................................... 107

5.8. Hard Coded ............................................................................................................................. 108

5.9. Pembuatan Konstanta ............................................................................................................ 109

5.10. Pengamanan API................................................................................................................. 110

5.11. Akses API – Auth dari Flutter.............................................................................................. 112

5.12. Release Aplikasi web .......................................................................................................... 114

5.13. Integrasi Release Aplikasi Flutter Web ke Laravel Project................................................. 115

Tugas Rumah ...................................................................................................................................... 117



Pertemuan 6 – 9 Konsultasi Project Akhir ............................................................................................... 118

Pertemuan 10-16 Presentasi Project Akhir ............................................................................................. 118

Pertemuan 1

Target:

1. Mengenal Framework Web

2. instalasi paket aplikasi webserver

3. Instalasi Composer & Laravel

4. Membuat Database Presensi

1.1. Framework Web

Framework atau kerangka kerja dalam istilah rekayasa perangkat lunak merupakan

perangkat lunak yang terdiri dari kumpulan library / pustaka kode program yang telah

disediakan untuk membantu dalam pengembangan aplikasi web agar lebih cepat dan

mudah. Dengan menggunakan framework maka programmer dapat lebih menghemat

waktu dalam pengembangan aplikasi karena berfokus pada penulisan kode proses bisnis

aplikasi yang lebih aman, tanpa perlu menghabiskan waktu untuk menyediakan kode

fungsi inti pada kebanyakan aplikasi web, seperti: pengelolaan session, pengelolaan data

dan membuat pola sistem.

Biasanya dalam suatu framework web telah menyediakan pengelolaan library untuk

pengelolaan session, pengelolaa data, cache dan lain sebagainya. Pada umumnya

framework web menggunakan pola sistem / pattern MVC (Model View Controller) untuk

memisahkan kode antara pengelolaan basis data (Model), kode tampilan / User

Interface (View) dan pengendali request dan response (Controller).

Ada banyak framework web yang ada berdasarakan bahasa pemrograman yang

digunakan. Pada umumnya bahasa pemrograman yang dapat digunakan untuk

membuat aplikasi website seperti: Python, PHP, Java, NodeJS, Dart, dan lain sebagainya,

Contoh framework web untuk bahasa pemrograman PHP seperti: Laravel, CakePHP,

CodeIgniter, Symfony, Yii, ZendFramework dan lain sebagainya. Untuk framework web

bahasa pemrograman tersedia seperti: Apache Struts, Apache Wicket, Javaserver Faces,



JT Design Pattern Framework dan lain sebagainya. Sedangkan Framework untuk Bahasa

pemrograman dari Microsoft ada .NET.

1.2. Mengapa Laravel

Dari sekian banyak pilihan bahasa pemrograman web yang ada, PHP lebih populer

digunakan. Mengapa menggunakan PHP, karena untuk implementasinya di webhosting

dapat terbilang mudah dan murah. Saat ini webhosting yang shared, lebih banyak

menyediakan layanan hosting PHP dari pada bahasa pemrograman lainnya. Namun bisa

saja menggunakan bahasa pemrograman selain dari PHP, tentu saja pilihan hostingnya

biasa harus menggunakan server VPS (Virtual Private Server) dan melakukan konfigurasi

serta instalasi secara mandiri.

Alasan mengapa menggunakan framework Laravel adalah

1. Clean code dan expressive, yaitu kode yang ditulis ditawarkan lebih bersih, lebih

singkat dan lebih powerfull di Laravel.

2. Sederhana dalam penerapan routing.

3. Mendukung composer, yaitu “dependency manager” untuk PHP. Pengembangan

aplikasi yang membutuhkan library tambahan dengan cara mendaftarkan library

yang diinginkan pada file composer, yang selanjutnya jalanakan composer update

untuk mengunduh secara daring dan menempatkan library seacara langsung ke

folder project Laravel.

4. Laravel framework gratis dan saat ini masih terus dikembangkan dan memiliki

komunitas yang banyak secara daring.

5. Laravel mendukung pengembangan aplikasi skala kecil maupun enterprise.

6. Adanya Artisan untuk memudahkan programmer dalam membentuk file di project

laravel secara generate, seperti membuat Controller, Model, Job, Event, Listener,

auth, command, mail, policy, provider, seeder, notification dan lain sebagainya.

1.3. Paket Aplikasi Pengembangan PHP

Lingkungan pengembangan suatu aplikasi web memerlukan beberapa perangkat lunak

pendukung untuk melakukan pengembangan dan pengujian. Berikut apa saja yang

diperlukan untuk pengembangan aplikasi web:

1. WebServer. Contoh: Apache HTTP Server, LightHttpd, Nginx (Engine-X).

2. PHP 7.

3. Database Server. Contoh: MySQL, PostgreSQL, Oracle dan lain sebagainya.



Untuk penggunakan paket aplikasi pada praktik ini menggunakan paket aplikasi dari

XAMPP. Pada aplikasi XAMPP semua aplikasi Webserver, PHP dan database MariaDB

telah dibundle jadi satu sehingga memudahkan instalasi dan penggunaannya.

Untuk menggunakan Laravel pastikan menggunakan PHP 7 untuk hasil yang lebih

optimal. Langkah persiapan aplikasi XAMPP:

1. Unduh paket aplikasi website unduh resmi XAMPP di :

https://www.apachefriends.org/download.html

2. Pilih file installer sesuai dengan sistem operasi dan teknologi komputer yang

dimiliki.

a. Windows 64-bit : https://www.apachefriends.org/xampp-files/7.3.9/xampp-

windows-x64-7.3.9-0-VC15-installer.exe

b. Linux 64-bit: https://www.apachefriends.org/xampp-files/7.3.9/xampp-linux-

x64-7.3.9-0-installer.run

c. OS X : https://www.apachefriends.org/xampp-files/7.3.9/xampp-osx-7.3.9-0-

vm.dmg

3. Instalasi aplikasi XAMPP bila telah mengunduh installer diatas.

https://www.apachefriends.org/download.html

https://www.apachefriends.org/xampp-files/7.3.9/xampp-windows-x64-7.3.9-0-VC15-installer.exe

https://www.apachefriends.org/xampp-files/7.3.9/xampp-windows-x64-7.3.9-0-VC15-installer.exe

https://www.apachefriends.org/xampp-files/7.3.9/xampp-linux-x64-7.3.9-0-installer.run

https://www.apachefriends.org/xampp-files/7.3.9/xampp-linux-x64-7.3.9-0-installer.run

https://www.apachefriends.org/xampp-files/7.3.9/xampp-osx-7.3.9-0-vm.dmg

https://www.apachefriends.org/xampp-files/7.3.9/xampp-osx-7.3.9-0-vm.dmg



Gambar 1.1. Pilih Paket yang diperlukan saja.

4. Jalankan XAMPP dan aktifkan terlebih dahulu service yang diperlukan.

*Service yaitu aplikasi yang berjalan dibelakang layar untuk melayani permintaan dan

meresepon hasil yang diperlukan.

Service yang dijalankan seperti:

a. Apache

Untuk menjadikan service persisten saat windows boot maka jalankan:

run as administrator command prompt. <direktori xampp>\apache\bin\httpd.exe –k install –n “apache php7”

Jalanlan di Run dialog: services.msc

- Cari service dengan nama “apache php7”, jalankan service ini dengan klik

tombol “Start”

b. MySQL Service

Untuk menjadikan service persisten saat Windows boot jalankan:

run as administrator command prompt. <direktori xampp>\mysql\bin\mysqld.exe –install “MySQL Services”



Jalanlan di Run dialog: services.msc

- Cari service dengan nama “MySQL Services”, jalankan service ini dengan klik

tombol “Start”

Bila berhasil langkah diatas cukup dilakukan sekali, maka setiap komputer boot

mulai maka kedua services diatas (apache dan MySQL sudah berjalan)

5. Cek Services Running.

Jalankan browser (Chrome / Firefox / Edge). Dan buka URL : http://localhost

Gambar 1.2. Apache telah berhasil running dengan baik.

3.2. Mendaftarkan Direktori PHP

Pembuatan aplikasi Laravel akan sering berinteraksi dengan akses command prompt.

Untuk itu kita harus terbiasa menggunakan CLI. Direktori kerja PHP harus didaftarkan pada

lingkungan sistem operasi, agar penulisan perintah di command prompt lebih ringkas tanpa

menuliskan alamat direktori kerja PHP. Berikut langkah mendaftarkan direktori PHP.

1. Buka Properties My Computer, dengan menekan kombinasi tombol:

[Windows] + Pause

2. Masuk ke “Advanced system settings”



Gambar 1.3. Pilih menu Advanced system settings

3. Klik tombol “Environment Variables…”

Gambar 1.3. Pilih Environment Variables

4. Pada bagian User Variables, pilih varible “Path” dan klik tombol “Edit…”



Gambar 1.4. Edit variabel Path

5. Tambahkan dengan klik “New” dan isikan alamat direktori php berada, yaitu seperti

berikut: c:\xampp\php.

Setelah itu klik OK.

Gambar 1.5. Penambahan direktori PHP

6. Untuk menerapkan pengaturan ini, restart windows.

3.3. Pemasangan Composer



Composer merupakan aplikasi pengelola kebutuhan library pada pemrograman PHP

modern. Untuk dapat menggunakan fitur ini maka composer harus dipasang terlebih dahulu.

Untuk memasang composer di lingkungan kerja PHP maka dapat dilakukan secara daring

melalui command prompt. Karena kita harus terbiasa melakukannya melalui command prompt,

maka ada banyknya mendaftarkan alamat direktori PHP pada lingkungan kerja sistem operasi.

1. Jalankan command prompt sebagai administrator

2. Masuk ke direktori kerja htdocs:

Gambar 1.6. Masuk direktori document root web.

3. Jalankan perintah berikut:

php –r “copy(‘http://getcomposer.org/installer’, ‘composer-setup.php’);”

Gambar 1.7. Mengunduh composer-setup.php

4. Jalankan composer-setup.php untuk pemasangan komposer di lingkungan kerja

PHP.



Gambar 1.8 Pemasangan composer.

5. Composer yang telah sukses di pasang akan menjadi file composer.phar. bila

berhasil, maka hapus saja file composer-setup.php, karena tidak diperlukan lagi.

Del composer-setup.php

Gambar 1.9. Hapus composer-setup.php

6. Untuk kemudian menggunakan composer maka gunakan perintah:

php composer.phar <parameter>



3.4. Pemasangan Laravel

Pemasangan laravel atau membuat project baru di Laravel dapat dilakukan melalui

composer.phar. Namun sebelumnya pastikan telah memiliki file composer.phar dari

langkah sebelumnya yang harus dilakukan terlebih dahulu. Untuk melakukan langkah

ini, pastikan komputer dalam keadaan daring Internet.

Jalankan perintah berikut melalui Command Prompt di direktori kerja c:\xampp\htdocs

dimana file composer.phar berada: php composer.phar create-project -–prefer-dist laravel/laravel presensi

Contoh seperti berikut:

Gambar 1.10. Membuat project “Presensi” di Laravel

Keterangan:

- parameter create-project : perintah composer untuk membuat project baru

- parameter --prefer-dist laravel/laravel : mengunduh distribusi terbaru dari laravel

- parameter Presensi : nama project yang akan dibuat.

Untuk melihat hasil unduhan project Laravel dapat kita lihat pada direktori presensi.

Gambar 1.11. File project Laravel Presensi

Selanjutnya uji apakah aplikasi sudah dapat di jalankan melalui browser?

Jalankan browser, buka alamat: http://localhost/presensi/public

Bila benar, maka seharunya akan tampil seperti gambar berikut:

http://localhost/presensi/public



Gambar 1.12. Project Awal Laravel

3.5. IDE Pengembangan Aplikasi Web

IDE (Interface Development Environment) atau Lingkungan Pengembangan Terpadu

dalam pembangunan suatu perangkat lunak perlu digunakan untuk memudahkan dalam

kegiatan penulisan kode program, debugging hingga production. Pada pembangunan

aplikasi web dapat menggunakan berbagai jenis pilihan perangkat lunak IDE. Seperti:

Notepad, Notepad++, Sublime, DreamWeaver, VisualStudio Code, PHPStorm dan lain

sebagainya.

Untuk memudahkan pengembangan baiknya menggunakan IDE yang memiliki fitur fitur

Snippets / intellisense, yaitu fitur menampilkan cuplikan saran kode yang dapat

dilanjutkan setiap kode perintah Laravel yang hendak dituliskan, sehingga memudahkan

penulisan kode secara guidelines. Contoh IDE yang dapat digunakan untuk memudahkan

pengkodean adalah Visual Studio Code (VSCode) di

https://code.visualstudio.com/download# Pilih sesuai Sistem operasi dan arsitektur

prosesor komputer yang digunakan. IDE ini dikembangkan oleh komunitas dari

Microsoft, dapat dijadikan menjadi IDE yang bermacam-macam sesuai plugins yang

dipasang. IDE ini termasuk dapat dikatakan powerful dan yang terpenting gratis.

Pilihan lain IDE yang pintar adalah PHPStorm dari JetBrains yang dapat di unduh di

https://www.jetbrains.com/phpstorm/download/#section=windows. Namun karena

sifatnya berbayar, kita tidak dapat menggunakannya secara bebas, tapi dapat

https://code.visualstudio.com/download

https://www.jetbrains.com/phpstorm/download/#section=windows



menggunakan fitur Trial 30 hari atau mendaftar sebagai Pelajar untuk dapat

menggunakannya secara gratis selama 1 tahun.

Tampilan IDE VSCode

Gambar 1.13. IDE VSCode

Agar VSCode lebih optimal digunakan penulisan kode menggunakan framework Laravel,

maka harus memasang extension tambahan dari marketplace VSCode. Untuk

pemasangan diperlukan koneksi daring Internet.

Untuk pemasangan ekstensi, klik menu Extension pada bagian sisi panel sebelah

kanan IDE. Contoh seperti gambar berikut:



Gambar 1.14. Pengelolaan Ekstensi

Ketikkan kata kunci “Laravel” pada bagian pencarian seperti di gambar 1.14. Install

ekstension seperti:

1. Laravel Blade Snippets : ini untuk membantu penulisan kode blade pada pembuatan

view (user interface) di Laravel.

2. Laravel 5 Snippets : Ekstensi ini untuk membantu menampilkan cuplikan bantuan

penulisan kode perintah Laravel 5.

3. PHP Intellisense : membantu memberi saran penulisan kode program PHP.

Bila semua kebutuhan diatas telah disiapkan, maka kita mulai siap ke medan tempur.



3.6. Aplikasi Presensi

Praktikum yang akan dilaksanakan pada tiap pertemuan akan membahas langkah-

langkah pembuatan aplikasi presensi karyawan berbasis web. Berikut Actor Glossary

yang terlibat:

Tabel 1.1. Actor Glossary Aplikasi Presensi

Actors Goal

Administrasi - Login - Mengelola (CRUD) data

karyawan - Melihat rekapitulasi

kehadiran semua karyawan

- Cetak rekapitulasi kehadiran semua karyawan

Karyawan - Login - Melakukan Presensi - Lihat rekap kehadiran

bulanan milik sendiri

1. Kebutuhan fungsional

a. Setiap tigkatan pengguna untuk akses ke aplikasi harus melakukan login sebagai

bentuk identifikasi sistem kepada pengguna.

b. Tingkat Administrasi memiliki kewenangan mengelola data karyawan (Tambah,

ubah, hapus, cari). Serta dapat melihat rekapitulasi kehadiran tiap karyawan

dalam 1 periode, yaitu dihitung setiap tanggal 24 pada bulan n-1 sampai dengan

tanggal 23 bulan n. Menampilkan kesimpulan status kehadiran tiap harinya,

apakah datang tepat waktu, telat atau tidak masuk.

c. Administrasi mencetak resume rekapitulasi kehadiran semua karyawan pada

periode bulan yang diinginkan. Menampilkan jumlah kehadiran, jumlah tidak

hadir dan jumlah keterlambatan.

d. Karyawan dapat melakukan presensi masuk dan pulang.

e. Karyawan dapat melihat rekap kehadirannya dalam periode yang dinginkan.

2. Kebutuhan non-fungsional

a. Aplikasi harus terhubung secara intranet

b. Setiap data harus tersimpan di server basis data.



3.7. Rancangan Database Presensi

Sebelum ke pembuatan database dan tabel-tabelnya, ada baiknya bila mengetahui

rancangan basis datanya.

Gambar 1.15. Logical Record Structure

1. Spesifikasi File tabel “pengguna”

Tabel pengguna untuk merekam semua data pengguna dan terdapat tingkatan level

untuk membedakan antara administrasi dan karyawan. Dalam hal ini dibuat suatu

kesepakatan saja bahwa bila Level=1 untuk administrasi, dan level=2 untuk karyawan.

Tabel 1.2. Spesifikasi file table “pengguna”

Field name Field Type Size

Nip Char 9 Nama Varchar 100

Level Char 1

Sandi Varchar 32

2. Spesifikasi file table “peta_kehadiran”

Tabel peta_kehadiran untuk membuat plot jadwal jam berapa saja karyawan harus

masuk berdasarkan dari harinya.



Tabel 1.3. Spesifikasi file table “peta_kehadiran”

Field name Field Type Size Id AutoIncrement

No_hari Int 4

Jam_masuk Time

Jam_pulang Time

3. Spesifikasi file table “presensi_harian”

Tabel presensi untuk mencatat semua kehadiran masuk dan pulang untuk semua

karyawan.

Tabel 1.4. Spesifikasi file table “presensi_harian”

Field name Field Type Size

Id AutoIncrement

Tgl_masuk DateTime

Tgl_pulang DateTime

Ket_hari Char 1

Nip Char 9

Ip_masuk Varchar 15 Ip_pulang Varchar 15

Peta_kehadiran_id Int 4

Jam_harus_masuk Time

Jam_harus_pulang time

3.8. Membuat Database Menggunakan Migration

Laravel menyediakan fitur Migration untuk membantu developer membuat database

dengan cara mendeskripsikannya kemudian Laravel yang membentuknya. Kelebihan

fitur ini programmer dapat menggunakan teknologi database dalam DBMS apapun,

contoh MySQL, ORACLE maupun PostgreSQL tanpa merubah banyak kode program.

Untuk menggunakan fitur ini, pastikan bahwa pengaturan koneksi basis data telah

ditentukan. Untuk mengatur konfigurasi koneksi basis data edit file .env seperti contoh

berikut:



Gambar 1.16. Konfigurasi Database di .env

Karena menggunakan database mariaDB atau mySQL maka isikan

DB_CONNECTION=mysql. DB_HOST=127.0.0.1 adalah alamat loop komputer local. Dan

untuk nama databasenya adalah db_presensi. DB_USERNAME=root ini bawaanya saat

instalasi mysql yang tidak dilakukan banyak perubahan. Begitu juga password yang

bawaannya adalah kosong.

Setelah itu masuk ke Terminal pada VSCode seperti pada gambar berikut:

Gambar 1.17. Membuat menu terminal



1. Membuat Migration Pengguna

Untuk memulai pembuatan migration, dibagian terminal ketikkan:

php artisan make:migration pengguna

Gambar 1.18. Membuat Migration Pengguna.

Perintah ini akan menghasilkan sebuah file yang berada di folder /database/migrations.

Gambar 1.19. File Migration Pengguna.



Edit file [versi]_pengguna.php di folder /database/migrations/:

<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class Pengguna extends Migration { var $table = 'pengguna'; /** * Run the migrations. * * @return void */ public function up() { Schema::create($this->table, function (Blueprint $table) { $table->char('nip',9); $table->string('nama', 100); $table->char('level', 1); $table->string('sandi', 32); $table->primary('nip'); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop($this->table); } }

2. Membuat Migration PetaKehadiran

Ulangi langkah yang sama pada pada langkah 1 diatas. Jalankan di terminal untuk

membuat file migration petakehadiran.

php artisan make:migration PetaKehadiran

Edit file [versi]_petaKehadiran.php yang ada di folder /database/migrations/



<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class PetaKehadiran extends Migration

{

var $table = 'peta_kehadiran';

public function up()

{

Schema::create($this->table, function (Blueprint $table) {

$table->increments('id');

$table->integer('no_hari');

$table->time('jam_masuk');

$table->time('jam_pulang');

});

}

public function down()

{

Schema::drop($this->table);

}

}

3. Membuat Migration PresensiHarian

Jalankan langkah yang sama pula untuk membuat Migration PresensiHarian melalui

artisan di terminal:

php artisan make:migration PresensiHarian

Sunting file [versi]_presensiharian.php menjadi sebagai berikut:



<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class PresensiHarian extends Migration

{

var $table = 'presensi_harian';

public function up()

{

Schema::create($this->table, function (Blueprint $table) {

$table->increments('id');

$table->dateTime('tgl_masuk');

$table->dateTime('tgl_pulang');

$table->char('ket_hari', 1);

$table->char('nip', 9);

$table->string('ip_masuk',15);

$table->string('ip_keluar', 15);

$table->unsignedInteger('peta_kehadiran_id');

$table->time('jam_harus_masuk');

$table->time('jam_harus_pulang');

$table->foreign('peta_kehadiran_id')->references('id')

->on('peta_kehadiran');

$table->foreign('nip')->references('nip')->on('pengguna');

});

}

public function down()

{

Schema::drop($this->table);

}

}

Sebelum menjalankan file migration diatas, pastikan di MySQL telah di ciptakan database

dengan nama : db_presensi.

Membuat database dapat melalui aplikasi MySQL Editor seperti: SQLYog, PHPMyAdmin,

MySQLWorkBrench maupun MySQL CLI.



Apabila database telah dibuat maka jalankan perintah di terminal:

php artisan migrate

Hasil luarannya Apabila penulisan kode di Migration benar sebagai berikut:

Gambar 1.20. Hasil Migrate

Apabila di cek di database maka relasi sudah terbentuk:

Gambar 1.21. Tabel yang terbentuk hasil Migration.



Tugas Rumah

1. Buatlah Database : db_tokobangunan

2. Buatlah table melalui Migration dari Laravel, sebagai berikut:

a. “karyawan”

Field Name Field Type Field Size Index Id Int Auto_increment PK

Nama Varchar 30

Gender Char 1

Sandi Varchar 32

b. “produk”

Field Name Field Type Field Size Index

Id Int Auto_increment PK

Produk Varchar 30

Harga Double Stok Unsigned Integer

c. “penjualan”


Id Int Auto_increment PK Tgl Datetime

Pengguna_id Unsigned integer FK (references pengguna)

d. “penjualan_has_produk”


Id Int Auto_increment PK

Penjualan_id Unsigned integer FK (references penjualan)

Produk_id Unsigned integer FK (references produk)

Qty Integer Harga double



Catatan:

Relasikan tabel “penjualan_has_produk” dengan tabel “penjualan” dan tabel “produk”

Relasikan tabel “penjualan” dengan tabel “pengguna”

Apabila dijalankan: php artisan migrage

Maka luaran tabel yang terbentuk menjadi sebagai berikut:

Gambar 1.22. Hasil Output yang diharapkan.



Pertemuan 2 Target:

5. Mengenal dan Membuat Model

6. Mengenal dan Membuat Controller

7. Mengenal dan Menggunakan Routing

8. Mengenal dan Melakukan Testing

2.1. Konsep MVC

MVC atau singkatan dari Model View dan Controller, merupakan metode dalam

pembuatan aplikasi yang memisahkan dokumen kode program seperti:

a. Model : bagian kode program untuk keperluan manipulasi data, biasanya

pengelolaan di basis data seperti : membuat data, membaca / mencari data,

merubah data dan menghapus data.

b. View : bagian pada program untuk menghasilkan antarmuka pengguna.

c. Controller : bagian pada kode program yang menjadi pengendali utama dari aplikasi.

Gambar 2.1. Konsep MVC

2.2. Jenis-Jenis MVC

Penerapan MVC pada pengembangan program terdapat beberapa jenis, yaitu:

a. MVC sisi server: Jenis yang menyerahkan semua proses bisnis kode program di

tuliskan sepenuhnya pada sisi server. Pada sisi client/pengguna hanya cukup

menerima saja.

b. MVC Campuran Sisi Server dan Sisi Client:

a. Campuran MVC 1: Komunikasi antar client dan server tidak menggunakan model

sebagai penghubungnya.



b. Campuran MVC 2: Model digunakan untuk menghubungkan komunikasi antara

sisi client dan server. Kompleksitas lebih tingg, dari jenis MVC lainnya karena

banyak komponen program yang terlibat.

c. Rich Internet Application (RIA) MVC.

Merupakan jenis MVC yang banyak dilimpahkan penerapannya pada sisi client.

Sehingga pada sisi client menjadi lebih gemuk (Fat Client). Pada sisi client memiliki

MVC sendiri, dan komunikasi data ke server menggunakan model dari server.

2.3. Model di Laravel

Laravel menyediakan Object Relational Mapping (ORM) yang memudahkan

penggunaannya. Oiye, ORM merupakan teknik pada pemrograman untuk konversi data

antara dua lingkungan kerja yang berbeda, yaitu lingkungan kerja basis data dan

lingkugan bahasa pemrograman menggunakan bahasa Pemrograman berorientasi

Obyek. Dengan cara ini membuat pengelolaan basisdata dapat menggunakan bahasa

pemrograman. Model di Laravel juga memungkinkan menjalankan query yang berlaku di

bahasa SQL.

2.4. Membuat Model di Laravel

Baik mulai pada point ini kita akan melakukan praktikum. Pembuatan model dapat

dilakukan secara manual ataupun menggunakan artisan yang telah disediakan oleh

Laravel untuk memudahkan pengembang. Pada praktikum pertemuan ke 2 ini kita akan

melanjutkan dari praktikum pertemuan 1 lalu, yaitu membuat Model dari tabel-tabel

yang telah di generate melalui fitur Migration. Tabel-tabel yang telah dibuat dari

pertemuan 1 lalu yaitu tabel Pengguna, Peta_Kehadiran dan Presensi_Harian. Untuk

memulai pembuatan model di Laravel menggunakan Artisan, maka pastikan telah

membuat Editor seperti VisualStudio Code dan membuka project di pertemuan 1. Buka

fitur Terminal di VisualStudio Code.

a. Membuat Model Pengguna

Untuk membuat model Pengguna ikuti langkah berikut:

1) Jalankan perintah di Terminal seperti berikut:

php artisan make:model Model\Pengguna

Gambar 2.2. Perintah Artisan membuat Model di Terminal



Perintah diatas harus dijalankan di satu path di project Laravel yang memiliki file

Artisan. Perintah ini akan menciptakan sebuah File yang berada di Folder:

app\Model dengan nama Pengguna.php.

Buka file Model\Pengguna.php, maka isinya telah di generate contoh sebagai

berikut:

Gambar 2.3. Hasil Generate Model\Pengguna.php

2) Definisikan tabel yang dikelola pada Model\Pengguna

Untuk mendefinisikan nama tabel yang digunakan tambahkan variabel

protected $table = ‘nama_tabel’; di dalam class Pengguna. Contoh seperti

berikut:

<?php

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

class Pengguna extends Model

{

protected $table = 'pengguna';

}

3) Nonaktifkan field CREATED_AT dan UPDATED_AT



Bawaan dari Laravel, memiliki field CREATED_AT dan UPDATED_AT sebagai Log

setiap transaksi data yang terjadi pada tabel. Apabila tabel yang dibuat tidak

menggunakan nama-nama field tersebut, maka konstanta CREATED_AT

maupun UPDATED_AT harus di set null, untuk menghindari terjadinya

kesalahan transaksi CREATE dan UPDATE. Contoh sebagai bierkut:

<?php




{


const CREATED_AT = null;

const UPDATED_AT = null;

}

Kondisi diatas tidak perlu dilakukan apabila setiap tabel yang dibuat memang

diperlukan Log atau catatan setiap adanya transaksi CREATE dan UPDATE.

4) Definisikan nama field Primary key

Nama field primary key pada tabel Pengguna adalah nip, sehingga perlu

diberikan definisi nama primary key di model Pengguna.

<?php




{




protected $primaryKey = 'nip';

}

b. Membuat Model PetaKehadiran



Lakukan langkah yang sama seperti pada poin a. diatas pembuatan Model

Pengguna.

1) Jalankan perintah berikut di terminal:

php artisan make:model Model\PetaKehadiran

Gambar 2.4. Pembuatan Artisan Model PetaKehadiran di Termianl

Operasi perintah diatas akan menghasilkan file baru yang berada di folder:

app\Model dengan nama file PetaKehadiran.php, seperti pada gambar berikut:

Gambar 2.5. Hasil Generate Artisan PetaKehadiran.php

2) Definisikan tabel yang dikelola pada Model\PetaKehadiran

Modifikasi file Model\PetaKehadiran.php menjadi sebagai berikut:



<?php



class PetaKehadiran extends Model

{

protected $table = 'peta_kehadiran';

}

3) Non-Aktifkan Field CREATED_AT dan UPDATE_AT

Modifikasi file Model\PetaKehadiran.php menjadi sebagai berikut:

<?php



class PetaKehadiran extends Model

{

protected $table = 'peta_kehadiran';



}

4) Definisikan nama field yang menjadi primary key.

Karena nama field primary key pada tabel peta_kehadiran adalah ‘id’, maka tidak

perlu melakukan pendefinisian nama primary key

c. Membuat Model PresensiHarian

Lakukan langkah yang sama seperti pada point a dan b diatas.

1) Jalankan perintah artisan make:model sebagai berikut di terminal:

php artisan make:model Model\PresensiHarian

Contoh seperti berikut:



Gambar 2.6. Pembuatan Model PresensiHArian

2) Definisikan nama tabel yang di kelola pada class Model\PresensiHarian

Setelah membuat file model PresensiHarian, jangan lupa definisikan nama tabel

yang harus dikelola pada class ini.

<?php



class PresensiHarian extends Model

{

protected $table = 'presensi_harian';

}

3) Non-Akfitkan field CREATED_AT dan UPDATED_AT

Karena desain dari tabel presensi_harian tidak ada field untuk pencatatan create

dan update data maka lakukan pemberian konstanta sebagai berikut:

<?php



class PresensiHarian extends Model

{

protected $table = 'presensi_harian';



}



4) Definisikan nama field yang menjadi primary key.

Karena nama field primary key pada tabel presensi_harian adalah ‘id’, maka

tidak perlu melakukan pendefinisian nama primary key

2.5. Controller di Laravel

Pengendali aplikasi diperlukan agar menentukan kapan Model maupun View akan

dikerjakan. Letak Controller pada direktori Laravel berada di dalam folder

app\Http\Controllers. Bisa saja membuat controller dengan posisi direktori yang lebih

mendalam lagi untuk memudahkan manajemen file. Apabila diperhatikan di dalam

folder app\Http\Controllers kita akan menemukan folder Auth, bawaan dari pembuatan

project Laravel.

Gambar 2.7. Folder Controller

Folder Auth dan beserta file tersebut boleh saja dihapus, bila kita mengingnkan

pembuatan controller yang custom.

2.6. Membuat Controller di Laravel

Langkah pembuatan Controller di Laravel dapat dilakukan melalui terminal

menggunakan Artisan. Ikuti langkah sebagai berikut:

a. Membuat Controller Pengguna

Jalankan perintah berikut di terminal:

php artisan make:controller Pengguna



Gambar 2.8. Pembuatan Controller Pengguna

Pada langkah ini, akan dibuatkan sebuah file Controller Pengguna.php yang berada di

folder app\http\Controllers.

Gambar 2.9. File Hasil Generate Controller Pengguna.php

Buka file Pengguna.php dan lihat isinya.



Gambar 2.10. Isi Generate Controller.

Sampai disini langkah selanjutnya adalah membuat method / blok kode program

yang bertugas sebagai pengendali komunikasi antara model mapun pada class

lainnya.

1) Membuat method lihatData()

Method ini nantinya dibuat untuk tujuan mendapatkan semua data yang ada di

tabel Pengguna. Modifikasi file controller Pengguna.php menjadi berikut:

<?php

namespace App\Http\Controllers;

use App\Model\Pengguna as PenggunaModel;

use Illuminate\Http\Request;

class Pengguna extends Controller

{

public function lihatData()

{

$r = PenggunaModel::get();

return ['count'=>$r->count(), 'data'=>$r];

}

}

Pada kode blok method lihatdata diatas logik yang berjalan adalah:

- Dapatkan semua record dari model Pengguna dan disimpan ke variabel $r

$r = PenggunaModel::get()

- Return (kembalikan) nilai :

‘count’ => $r->count : total data

‘data’ => $r : data dalam bentuk array / larik

Bila diamati pada bagian atas dokumen controller Pengguna, terdapat baris:


ini merupakan baris kode untuk memuat file model Pengguna yang ada di folder

app\Model. Sedangkan as PenggunaModel adalah cara untuk memberikan alias

nama Class Model Pengguna sebagai PenggunaModel. Hal ini perlu dilakukan



mengingat nama class Model dan Controller memiliki kesamaan nama, yaitu

sama-sama “Pengguna”.

2) Membuat method ambilData()

Method ambilData berfungsi untuk mendapatkan data 1 baris (record)

berdasarkan kuncinya dari tabel Pengguna.

Modifikasi controller Pengguna menjadi sebagai berikut:

<?php




{


{



}

public function ambilData($nip=''){

return (new PenggunaModel())->find($nip, ['nip', 'nama', 'level']);

} }

Keterangan:

Perhatikan pada blok method ambilData() berikut.


return (new PenggunaModel())->find($nip, ['nip', 'nama', 'level']); }

parameter $nip,



digunakan sebagai parameter nilai NIP sebagai nilai kunci data pengguna yang

ingin di baca.

Logik Program

method find() : untuk mendapatkan data Pengguna berdasarkan primary key

yaitu $nip. Pada parameter kedua penggunaan fungsi find(), berisikan:

['nip', 'nama', 'level'] , yaitu nama field pada table yang ingin

ditampilkan. Bila semua field ingin ditampilkan maka parameter ini tidak perlu

diisikan.

Nilai Balik

return bila data ada menghasilkan data pengguna, bila tidak ada data

menghasilkan data kosong.

3) Membuat method simpanData()

Method simpanData berfungsi untuk merekam data ke tabel. Modifikasi

controller Pengguna menjadi sebagai berikut:



<?php




{


{



}



}

public function simpanData(){

$nip = request('nip');///dapatkan nilai nip dari client

///dapatkan objek model Pengguna berdasarkan primary key, yaitu $nip

$r = (new PenggunaModel())->find($nip);

///Jika objek model tidak ditemukan ($r == null) ataupun

///nilai $nip tidak ada

///kiriman client tidak ada ($nip == '')

if($r == null || $nip == ''){

$r = new PenggunaModel();///ciptakan objek model baru Pengguna

}

$r->nip = request('nip');///isi nip dari client

$r->nama = request('nama');///isi nama dari client

$r->level = request('level');///isi level dari client

$r->sandi = md5(request('sandi'));///isi sandi dari client dan di hash md5

$ret = $r->save();///simpan data

return ['result'=>$ret];///kembalikan hasil

}

}

4) Membuat method hapusData()



Method hapusData digunakan untuk menghapus data pengguna dari tabel. Data

yang dihapus berdasarkan kunci data, yaitu nip yang dikirimkan dari client

menggunakan method delete. Modifikasi controller Pengguna dengan

menambahkan method hapusData seperti berikut:

<?php




{


{



}



}

public function simpanData(){

$nip = request('nip');///dapatkan nilai nip dari client

///dapatkan objek model Pengguna berdasarkan primary key, yaitu $nip

$r = (new PenggunaModel())->find($nip);

///Jika objek model tidak ditemukan ($r == null) ataupun

///nilai $nip tidak ada

///kiriman client tidak ada ($nip == '')

if($r == null || $nip == ''){

$r = new PenggunaModel();///ciptakan objek model baru Pengguna

}

$r->nip = request('nip');///isi nip dari client

$r->nama = request('nama');///isi nama dari client

$r->level = request('level');///isi level dari client

$r->sandi = md5(request('sandi'));///isi sandi dari client dan di hash md5

$ret = $r->save();///simpan data

return ['result'=>$ret];///kembalikan hasil

}

public function hapusData($nip=''){

$r = (new PenggunaModel())->whereRaw('nip=?', [$nip])->delete();

return ['result'=>$r];

}

}

2.7. Mengatur Routing



Routing merupakan cara Laravel untuk menentukan arah Request dari client akan

diteruskan. Routing pada Laravel berada di folder /routes dan di dalam file web.php.

Gambar 2.10. Lokasi file route web.php

File /route/web.php berisikan jenis method permintaan dari client dan kemana arah

jalur selanjutnya. Untuk menguji apakah controller yang telah dibuat pada langkah

sebelumnya bekerja, lakukan modifikasi isi file web.php menjadi sebagai berikut:

<?php

Route::get('/pengguna/list-data', 'Pengguna@lihatData');

Route::get('/pengguna/ambil-data/{nip}', 'Pengguna@ambilData');

Route::post('pengguna/simpan', 'Pengguna@simpanData');

Route::delete('pengguna/hapus/{nip}', 'Pengguna@hapusData');

Rute URL Nama Controller Nama method

Jenis method request client

Parameter request

2.8. Pengujian



Pengujian request dan response dari aplikasi yang telah dituliskan diatas dapat

menggunakan tools seperti aplikasi Postman, yang dapat unduh di :

https://www.getpostman.com/downloads/

Berikut tampilan aplikasi PostMan

Gambar 2.11. Tampilan Aplikasi PostMan.

Aplikasi Postman dapat dimanfaatkan untuk melakukan pengujian terhadap aplikasi

web, apakah sudah sesuai dengan harapan antara request dilakukan dan response yang

diihasilkan. Setiap aplikasi yang telah ditulis kode programnya, baiknya harus di uji satu

persatu. Untuk memastikan ketika di integrasikan pada sistem yang lebih besar tidak

banyak kendala yang nantinya ditemukan.

Pengujian yang dilakukan pada tahapan ini yaitu balckbox testing. Yaitu menguji fitur /

unit yang ada berdasarkan masukan (input) dan luaran (output), apakah sesuai dengan

harapan atau tidak. Berikut item list pengujian yang akan dilakukan:

Tabel 2.1. Pengujian Blackbox Testing

https://www.getpostman.com/downloads/



Test ID

Nama Test Deskripsi Langkah Pengujian Hasil yang diharapkan

Hasil

TC01 Request GET ‘/pengguna/list-data’

Meminta data pengguna dari server

Mengirimkan method GET ke URL : http://localhost:8000/pengguna/list-data

Menampilkan format json data pengguna

TC02 Request POST ‘pengguna/simpan’

Menyimpan data ke tabel pengguna

Mengirimkan data method POST sebagai berikut: ‘nip’ = 2019010101 ‘nama’ = Eko Priyono ‘level’ = ‘A’ ‘sandi’ = ‘ekoeko’ Ke url : http://localhost:8000/pengguna/simpan

Format json {result:true}

TC03 Request GET ke ‘/pengguna/ambil/2019010101’

Meminta data dengan nip: ‘2019010101’

Mengirimkan data method GET ke url: http://localhost:8000/pengguna/ambil-data/2019010101

Tampil format json data pengguna dengan nip 2019010101

TC04 Request DELETE ke ‘/pengguna/hapus/2019010101

Menghapus data dari tabel pengguna dengan nip ‘2019010101’

Mengirimkan data method DELETE ke url: http://localhost:8000/pengguna/hapus/2019010101

{result:true]

Untuk melakukan pengujian method GET, maka buka aplikasi Postman.

1. Klik baru

Gambar 2.12. Pengujian Baru

2. Tentukan Method Request, isi URL dan klik send

http://localhost:8000/pengguna/list-data

http://localhost:8000/pengguna/list-data

http://localhost:8000/pengguna/simpan

http://localhost:8000/pengguna/simpan

http://localhost:8000/pengguna/ambil-data/2019010101

http://localhost:8000/pengguna/ambil-data/2019010101

http://localhost:8000/pengguna/hapus/2019010101

http://localhost:8000/pengguna/hapus/2019010101



Gambar 2.13. Pengujian method GET

Latihan

Setelah melihat contoh langkah-langkah pembuatan controller dan method diatas, buatlah

Controller sebagai berikut di terminal menggunakan artisan:

a. PetaKehadiran

b. PresensiHarian

Buatlah method pada controller PetaKehadiran sebagai berikut:

a. lihatData() : untuk mendapatkan semua data pada tabel peta_kehadiran

b. ambilData($id) : untuk mendapatkan 1 record (baris) data pada tabel peta_kehadiran

berdasarkan $id datanya.

c. simpanData() : untuk menyimpan data ke tabel peta_kehadiran. Gunakan kunci field

sebagai pembeda data baru dan data lama. Bila kunci adalah data lama maka sifatnya

update, namun bila nilai kunci baru maka sifatnya create.

d. hapusData($id) : untuk menghapus data di tabel peta_kehadiran. Nilai parameter $id

sebagai nilai kunci data record yang akan di hapus.

Buatlah method pada controller PresensiHarian dengan ketentuan sebagai berikut:

a. lihatData() : untuk mendapatkan semua data pada tabel presensi_harian.

b. ambilData($id) : untuk mendapatkan 1 record (baris) data pada tabel presensi_harian

berdasarkan $id datanya.

e. simpanData() : untuk menyimpan data ke tabel peta_kehadiran. Gunakan kunci field

sebagai pembeda data baru dan data lama. Bila kunci adalah data lama maka sifatnya

update, namun bila nilai kunci baru maka sifatnya create.

c. hapusData($id) : untuk menghapus data di tabel presensi_harian. Nilai parameter $id

sebagai nilai kunci data record yang akan di hapus.



Tanyakan kepada dosen anda bila mengalami kesulitan.



Tugas Rumah

3. Buatlah Model di Laravel yang memiliki fungsi CRUD dan View dengan ketentuan sebagai

berikut :

a. Karyawan,

b. Produk ,

c. Penjualan dan

d. DetailPenjualan

4. Buatlah Controller di Laravel beserta method nya dengan ketentuan sebagai berikut:

a. Karyawan

1. Method lihatData()

2. Method simpanData()

3. Method hapusData()

b. Produk




c. Penjualan




4. Method lihatDetail ()

5. Method simpanDetail()

6. Method hapusDetail()

3. Buatlah Routing dengan ketentuan sebagai berikut:

a. Route : get ‘/karyawan/list-data’, diarahkan ke Controller Karyawan di method

lihatData()

b. Route : post ‘karyawan/simpan’, diarahkan ke Controller Karyawan di method

simpanData()

c. Route : delete ‘karyawan/hapus’, diarahkan ke Controller Karyawan di method

hapusData()

d. Route : get ‘/produk /list-data’, diarahkan ke Controller Produk di method lihatData()

e. Route : post ‘produk/simpan’, diarahkan ke Controller Produk di method simpanData()

f. Route : delete ‘produk/hapus’, diarahkan ke Produk PetaKahdiran di method

hapusData()



g. Route : get ‘/penjualan/list-data’, diarahkan ke Controller Penjualan di method

lihatData()

h. Route : post ‘penjualan/simpan’, diarahkan ke Controller Penjualan di method

simpanData()

i. Route : delete ‘penjualan/hapus’, diarahkan ke Controller Penjualan di method

hapusData()

j. Route : get ‘/penjualan/list-detail’, diarahkan ke Controller Penjualan di method

lihatDetail()

k. Route : post ‘penjualan /simpan-detail’, diarahkan ke Controller Penjualan di method

simpanDetail()

l. Route : delete ‘penjualan /hapus-detail’, diarahkan ke Controller Penjualan di method

hapusDetail()

4. Buatlah blackbox testing dengan menggunakan data dummy untuk pengujian sebagai

berikut:

a. POST pada routing ‘karyawan/simpan’

b. GET pada routing ‘karyawan/list-data’

c. DELETE pada routing ‘karyawan/hapus’

d. POST pada routing ‘produk/simpan’

e. GET pada routing ‘produk /list-data’

f. DELETE pada routing ‘produk /hapus’

g. POST pada routing ‘penjualan/simpan’

h. GET pada routing ‘penjualan /list-data’

i. DELETE pada routing ‘penjualan /hapus’

j. POST pada routing ‘penjualan/simpan-detail’

k. GET pada routing ‘penjualan /list-detail

l. DELETE pada routing ‘penjualan /hapus-detail’



Pertemuan 3 Target:

9. Instalasi Flutter SDK Channel Master

10. Membuat Project Flutter

11. Membuat Tampilan Dashboard di Flutter

3.1. Pengenalan Flutter

Flutter merupakan framework aplikasi bersifat kode sumber terbuka yang dibuat oleh

Google. Flutter tujuan awalnya untuk pengembangan aplikasi mobile seperti Android,

Fuchsia dan iOS. Namun saat ini Flutter telah mengalami banyak pengembangan, bukan

hanya sekedar untuk pembuatan aplikasi mobile saja, namun telah dikembangkan untuk

pembuatan aplikasi berbasis web maupun desktop.

Flutter pertama kali di rilis pada Mei 2017 dengan versi alpha 0.0.6 dan rilis preview 1

pada 17 Juni 2018. Flutter dikembangkan menggunakan C, C++ dan bahasa Dart. Flutter

menjad framework pembuatan antarmuka yang lebih mudah dan menarik. Sekali

penulisan kode, antarmuka dapat diimplementasikan baik di Android, iOS, web maupun

aplikasi desktop.

3.2. Pemasangan Flutter SDK

Yang harus dilakukan adalah mengunduh Flutter SDK yang diperlukan di:

a. Windows: https://flutter.dev/docs/get-started/install/windows.

b. Mac Os : https://flutter.dev/docs/get-started/install/macos

c. Linux : https://flutter.dev/docs/get-started/install/linux

Setelah file Flutter SDK telah di unduh, ekstrak paket file ke direktori yang diinginkan.

Misalkan disini contohnya ekstrak di D:\Flutter_sdk\. atau sesuaikan saja direktori yang

anda sukai.

Setelah flutter SDK telah terpasang di komputer, lakukan pendaftaran direktori /bin ke

Environment Variables.

Contoh seperti pada gambar berikut:

https://flutter.dev/docs/get-started/install/windows

https://flutter.dev/docs/get-started/install/macos

https://flutter.dev/docs/get-started/install/linux



Gambar 3.1 Path Variabel Flutter SDK

Setelah didaftarkan, maka restart windows untuk mendapatkan efek perubahan.

3.3. Pemasangan SDK Flutter Web

Fitur pengembangan aplikasi web di Flutter memerlukan SDK dari channel Master,

lakukan upgrade melalui channel master untuk mendapatkan SDK master untuk

menggunakan fitur web development. Pastikan untuk menjalankan perintah flutter

upgrade berikut dalam keadaan daring (dalam jaringan internet) di Command Prompt

(Terminal). Mengingat ukuran paket lebih dari 600MB, maka diperlukan internet

berkecepatan baik.

1. Jalankan > flutter channel master

Gambar 3.2. flutter channel master

2. Jalankan > flutter upgrade



Tunggu hingga upgrade flutter selesai mengunduh pemutahiran SDK flutter. Biasanya

membutuhkan waktu yang cukup lama. Pastikan internet yang tekoneksi dan stabil

pada kecepatan yang baik.

Gambar 3.3. Flutter upgrade pada channel master.

3. Jalankan > flutter config –-enable-web

Perintah ini bertujuan untuk mengaktifkan fitur pengembangan web di Flutter.

Apabila tahapan diatas telah dilakukan dengan baik, maka pengembangan aplikasi web di

Flutter sudah dapat dilakukan.

Happy coding

3.4. Memulai pembuatan Project Flutter Web

Masih menggunakan terminal / command prompt. Masuk ke direktori / folder yang

diinginkan dalam pembuatan aplikasi flutter web. Misalkan contoh disini akan membuat

aplikasi web di c:\xampp\htdocs\. Untuk pembuatan project flutter jalankan di command

prompt: > flutter create “nama_project”.

Contoh:

Flutter create app_presensi



Pada contoh diatas, project dibuat dengan nama “ui_presensi”. Bila sudah selesai dapat

membuka aplikasi VisualStudio Code untuk melakukan penulisan naskah program.

Gambar 3.5. Membuka Folder Project di VSCode

Pilih folder yang berisikan project flutter, kemudian klik tombol [Select Folder].

Gambar 3.6. Memilih folder app_Presensi



Apabila project berhasil dibuka maka struktur direktorinya terdiri dari sebagai berikut:

Gambar 3.7. Folder Kerja Project Flutter

Bila diamati terdapat beberapa folder, diantaranya:

a. /android : berisikan project Android. Bila ingin mengembangkan aplikasi Android,

maka kita akan melakukan manajemen isi file di folder ini.

b. /ios : berisikan project iOS. Lakukan pengelolaan folder ini melalui aplikasi XCode di

MacOS untuk dapat deploy menjadi aplikasi iOS.

c. /lib : isi folder sumber kode program yang akan kita tuliskan.

d. /test : untuk pengujian unit testing class pada program yang telah ditulis.

e. /web : berisikan project Web.

Pastikan folder /web ada disini, untuk memastikan bahwa Flutter yang digunakan bisa

menjalankannya menjadi aplikasi web.

Beberapa file yang menjadi perhatian kita nantinya adalah:

Pubspec.yaml : ini merupakan pengendali kebutuhan library dari luar yang ingin

digunakan pada aplikasi yang sedang akan dikembangkan. Untuk menggunakannya

pastinkan komputer dalam keadaan dalam jaringan internet untuk mengunduh setiap

library dari luar.



3.5. Instalasi Paket Extension Flutter di VSCode

Untuk mempermudah penulisan kode program, sebaiknya kita memasang beberapa

Extention yang disediakan di VSCode. Pasanglah beberapa extention sebagai berikut:

Gambar 3.8. Pemasangan Extention Flutter di VSCode

Extention diatas bertujuan untuk memudahkan penulisan kode program Flutter.

3.6. Pembuatan Tampilan

Memulai pembuatan tampilan program, naskah dituliskan di entry point. Entry point

merupakan tempat dimana alur prgram pertama dimulai. Entry Point pada Flutter atau

bahasa pemrograman Dart dimulai di file /lib/main.dart. subroutine yang pertama di

jalankan adalah main().

Bukalah file main.dart yang ada di folder /lib. Kosongkan semua isinya, dan tuliskan kode

program sebagai berikut:

main.dart

import 'package:flutter/material.dart';

main()=>runApp(AppPresensi());

class AppPresensi extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

);

}

}



Penjelasan potongan kode diatas, perintah dimulai dari :

- main() : Yaitu sebagai entry point program

o menjalankan fungsi runApp() : menjalankan aplikasi dengan menampilkan Widget.

Class Widget yang digunakan pada contoh diatas adalah class AppPresensi, yaitu sebagai class

yang akan kita gunakan sebagai class Aplikasi yang akan kita kembangkan.

- Class Widget menggunakan override method build(), yaitu method yang akan

dijalankan untuk merender tampilan di antar muka. Konsepnya adalah, segala Widget yang ingin ditampilkan harus dituliskan pada method build() ini,

walaupun perintah pembuatan Widget kita pisahkan menjadi kode blok-blok yang terpisah satu

dengan lainnya.

a. Membuat title program

Untuk membuat title program dituliskan pada bagian parameter title di MaterialApp,

contoh sebagai berikut:


main()=>runApp(AppPresensi());


@override


return MaterialApp(

title: 'Program Presensi',

home: Text('Hello selamat belajar Flutter'),

);

}

}

Gambar 3.9. Hasil Tampilan Hello Selamat Belajar Flutter

Jalankan program diatas dengan menekan tombol F5, atau menu Debug->Start

Debugging.



Konsep penulisan program di Flutter untuk membuat tampilan yaitu dapat berupa setiap

tampilan dibuatkan sebuah file class baik StatelessWidget ataupun StatefulWidget.

Perbedaan keduanya adalah sebagai berikut:

o StatelessWidget : untuk bentuk tampilan yang tidak mengalami perubahan,

keadaan dan bersifat statis.

o StatefulWidget : untuk bentuk tampilan yang dapat terjadi perubahan bentuk

maupun keadaan tampilan, seperti perubahan warna, perubahan isi teks,

perubahan gerak dan lain sebagainya.

b. Memulai Praktik Pembuatan Program

A. Buat main.dart sebagai berikut:


main()=>runApp(new AppPresensi());


@override


return new MaterialApp(

title: 'Presensi Online',

theme: ThemeData(

primaryColor: Colors.green

),

home: Beranda()

);

}

}

Penjelasan Kode:

- Kode program diatas akan memulai aplikasi dengan menampilkan Widget

AppPresensi.

- Widget AppPresensi membuat Widget berupa MaterialApp dengan konfigurasi warna

utama tema adalah warna hijau, serta Widget yang digunakan adalah Beranda

- Widget Beranda() belum dibuat, maka harus dibuat selanjutnya.



B. Membuat Desain Widget Beranda

Selanjutnya buat file beranda.dart di direktori /lib. Isikan kode program berikut:

Desain tampilan Widget beranda yang akan dibuat yaitu sebagai berikut:

Gambar 3.10 Rancangan Tampilan Widget Beranda

C. Membuat kerangka Program Widget Beranda

Berikut kerangka kode program yang kita siapkan tuliskan:


class Beranda extends StatefulWidget {

@override

_BerandaState createState() => _BerandaState();

}

class _BerandaState extends State<Beranda> {

Widget konten(){

}

Widget itemMenu(String label, VoidCallback onTap ){

}



Widget menuKiri(){

}

@override


return Scaffold();

}

}

Penjelasan kode:

Siapkan method:

a. Widget konten()

b. Widget itemMenu(String label, VoidCallback onTap):

i. String label : untuk nama menu

ii. VoidCallback onTap : untuk event saat menu di-klik

c. Widget menuKiri()

D. Widget Konten

Sebagai bidang konten isi tiap menu. Isinya dinamis (berubah-ubah) sesuai menu yang

diklik, maka diperlukan variabel Widget sebagai peubah isi dari konten.



@override


}


Widget isiKonten; Tambahkan bagian seperti ini

Penjelasan:

Widget isiKonten : merupakan variabel Global yang digunakan nantinya sebagai peubah

isi konten.



Kemudian isi kode Widget konten seperti berikut:

Widget konten(){

return Flexible(

child: isiKonten

);

} Penjelasan:

Widget konten() : akan memproduksi Widget Flexible dengan child yang digunakan

adalah variable isiKonten yang yang dibuat pada tahapan sebelumnya. Flexible merupakan Widget untuk mengendalikan ukuran(lebar / tinggi) Widget yang ada di dalamnya

(child).

E. Widget itemMenu

Buat item menu yang digunakan pada bagian bidang menu kiri dengan menggunakan

Widget Card dan ListTile. Isikan blok kode Widget itemMenu menjadi sebagai berikut:


return new Card(

elevation: 0,

margin: EdgeInsets.all(0),

child: ListTile(

onTap:onTap,

leading: new Icon( Icons.list ),

title: new Text('$label')

)

);

} Penjelasan:

itemMenu akan memproduksi Widget Card().

- Isi / child dari Card adalah : Widget ListTile()

- ListTile parameter yang digunakan yaitu:

o onTap : merupakan callback sebagai event untuk meneripa response ketika widget

di klik. Bagian ini diisikan dari parameter onTap agar penggunaannya dapat

menjadi luas.

o Leading : merupakan bidang bagian kiri widget ListTile(), yang pada umumnya

digunaakn utnuk menampilkan Widget gambar / icon.

o Title : merupakan bidang judul / isi teks dari widget ListTile().

Berikut struktur dari widget itemMenu:



Gambar 3.11. Ilstrasi Stukrur widget Beranda.itemMenu

F. Widget menuKiri

Sebagai bagian kiri tampilan yang menampilkan menu dengan menggunakan Widget

itemMenu. Isikan Widget menuKiri() menjadi sebagai berikut:

Widget menuKiri(){

return new Container(

width: 200,

child: ListView(

children: <Widget>[

itemMenu('Karyawan', (){

isiKonten = Text('Karyawan Screen');

setState(() {});

}),

itemMenu('Peta Presensi', (){

isiKonten = Text(Peta Presensi Screen');

setState(() {});

}),

itemMenu('Presensi Harian', (){

isiKonten = Text(Presensi Harian Screen');

setState(() {});

})

],

)

);

}

Penjelasan:

Widget menuKiri akan memproduksi Widget Container() dengan lebar 200, isi dari

Container adalah Widget ListView(). Di ListView menampilkan widget-widget itemMenu

diantaranya untuk menu: Karyawan. Peta Presensi dan Presensi Harian.

Widget ListView() merupakan widget untuk menampilkan widget-widget yang tersusun baik secara

horizontal atau vertical. Widget ini akan membuat tampilan dapat di Scroll bila widget yang harus

ditampilkan melebihi dari ukuran layar.



Berikut ilustrasi struktur Widget menuKiri()

Gambar 3.12. Ilustrasi Struktur Widget Beranda.menuKiri()

G. Susun semua widget di Widget build

Setelah semua widget telah dipersiapkan, maka susun di Widget build seperti code

berikut:

@override


return Scaffold(

appBar: AppBar(

leading: IconButton(

icon: Icon(Icons.list,),

onPressed: (){

}

),

elevation: 0,

title: Text('Sistem Informasi Presensi')

),

body:Row(

crossAxisAlignment: CrossAxisAlignment.stretch,

children: <Widget>[

menuKiri(),

konten()

],

)

);

}



Berikut ilustrasi struktur kode build diatas:

Gambar 3.13. Ilustrsasi Struktur Widget Beranda.build

Berikut kode lengkap dari file beranda.dart



@override


}


Widget isiKonten;

bool sembunyi = false;

@override

void initState() { super.initState(); isiKonten = Text('Selamat datang');

}




return new Card(

elevation: 0, /// hilangkan banyangan widget Card


child: ListTile(

onTap:onTap,

leading: new Icon( Icons.list ),

title: new Text('$label')

)

);

}

Widget menuKiri(){


width: 200,

decoration: new BoxDecoration(

color: Colors.white,

boxShadow: <BoxShadow>[

///buat bayangan di meru kiri

BoxShadow(

color: Colors.grey[300],

offset: Offset(3,2),

blurRadius: 10

)

]

),

child: ListView(

children: <Widget>[


isiKonten = Text('Karyawan Screen');

setState(() {});

}),

itemMenu('Peta Presensi', (){

isiKonten = Text(Peta Presensi Screen');

setState(() {});

}),

itemMenu('Presensi Harian', (){

isiKonten = Text(Presensi Harian Screen');

setState(() {});

})

],

)

);

}



Widget konten(){

return Flexible(

child: isiKonten

);

}

@override


return Scaffold(

appBar: AppBar(

leading: IconButton(

icon: Icon(Icons.list,),

onPressed: (){

}

),

elevation: 0,

title: Text('Sistem Informasi Presensi')

),

body:Row(


children: <Widget>[

menuKiri(),

konten()

],

)

);

}

}



H. Import file beranda.dart di main.dart

Agar aplikasi dapat berjalan, maka gunakan Widget beranda di main dengan import file

beranda.dart ke file main.dart. Seperti code berikut:

import 'package:app_presensi/beranda.dart'; Tambahkan import ini




@override




theme: ThemeData(


),

home: Beranda()

);

}

}

I. Menjalankan Program

Untuk menjalankan program, pilih menu [Debug] -> [Start Debugging] atau dengan

menekan tombol [F5]. Apabila muncul “select a device to use” pilih saja HeadLess Server.

Gambar 3.14. Pilih Device

Hingga tulisan ini dibuat, device Chrome masih memiliki kendala, walaupun mendukung

realtime hot restart namun masih banyak kendala. Maka anjuran saat ini gunakan Headless

Server, walaupun sedikit report, namun setidaknya lebih stabil.



Kemudian tunggu hingga Flutter melakukan compile selesai, maka selanjutnya akan

menampilkan alamat URL yang tampil untuk melihat hasil jalannya aplikasi pada bagian

DEBUG CONSOLE.

Gambar 3.15. Tampil Alamat Hasil Running Web.

Gunakan alamat sesuai yang muncul seperti diatas, tiap kali compile bisa saja berbeda

port alamatnya. Contoh hasil menjalankan program diatas yaitu seperti berikut:

Gambar 3.16. Hasil Jalannya Program.



3.7. Membuat Page Halaman

Pada bagian ini, praktik ini akan membahas pembuatan halaman-halaman lainnya.

Berikut akan dibuatkan halaman untuk Karyawan, Peta Presensi dan Presensi Harian.

A. Widget KaryawanScreen

Halaman Karyawan yang akan dibuat nantinya memiliki ListView untuk menampilkan

item data, serta FloatActionButton untuk membuka form pengisian data.

Buat file di /lib dengan nama karyawan.dart, isikan naskah sebagai berikut:


class KaryawanScreen extends StatefulWidget {

@override

_KaryawanScreenState createState() => _KaryawanScreenState();

}

class _KaryawanScreenState extends State<KaryawanScreen> {

Widget item(int x){

}

@override


return Scaffold(

floatingActionButton:FloatingActionButton(),

body: Container()

);

}

}



Berikut Struktur desain tampilannya yang akan dibuat contoh sebagai berikut:

Gambar 3.17. Struktur tampilan Widget KaryawanScreen

B. Widget KaryawanScreen.item()

Widget ini digunakan untuk menampilkan data di listview. Isikan blok Widget item(int x)

sebagai berikut:

Widget item(int x){

return Column(

children: <Widget>[

Card(

elevation: 0.0,

child: ListTile(

onTap: (){

} ,

title: Text('isi daftar karyawan ke $x'),

subtitle: Text('subtitle isi $x'),

leading: Icon(Icons.supervised_user_circle)

)

),

],

);

}



Penjelasan:

- Widget item(int x):

o Parameter : int x = sebagai masukan berupa informasi index data.

o Widget item akan memproduksi Widget Column yang isinya berupa Widget

Card dengan isi berupa Listtile().

C. Widget KaryawanScreen.build()

Modifikasi isi Widget build menjadi sebagai berikut:

@override


return Scaffold(

floatingActionButton: FloatingActionButton(

onPressed: (){

},

backgroundColor: Colors.pink,

child: Icon(Icons.add_box)

),

body: Card(


child: Container(

padding: EdgeInsets.all(20),

child: Column(

mainAxisAlignment: MainAxisAlignment.start,

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

Text('Data Karyawan', style: TextStyle(fontSize: 20,

fontWeight: FontWeight.bold)),

SizedBox(height: 10),

Expanded(

child: ListView(

children: List.generate(100, (x){

return item(x);

})

)

)

],

)

)

)

);

}



D. Kode Lengkap karyawan.dart

Berikut kode lengkap file karyawan.dart

import 'package:app_presensi/form_karyawan.dart';



@override


}


Widget item(int x){

return Column(

children: <Widget>[

Card(

elevation: 0.0,

child: ListTile(

onTap: (){

} ,

title: Text('isi daftar karyawan ke $x'),

subtitle: Text('subtitle isi $x'),


)

),

],

);

}

@override


return Scaffold(

floatingActionButton: Container(


child: FloatingActionButton(

onPressed: (){

},



),



),

body: Card(


child: Container(


child: Column(



children: <Widget>[

Text('Data Karyawan', style: TextStyle(fontSize: 20,

fontWeight: FontWeight.bold)),


Expanded(

child: ListView(

children: List.generate(100, (x){

return item(x);

})

)

)

],

)

)

)

);

}

}

3.8. Menghubungkan ke Beranda

Untuk melihat hasil Widget KaryawanScreen, maka kita harus gunakan. Gunakan Widget

KaryawanScreen ketika menu Karyawan di halaman beranda di klik. Modifikasi file

beranda.dart pada bagian menuKiri di itemMenu karyawan:

Widget menuKiri(){


width: 200,

decoration: new BoxDecoration(

color: Colors.white,

boxShadow: <BoxShadow>[

BoxShadow(

color: Colors.grey[300],

offset: Offset(3,2),

blurRadius: 10

)

]



),

child: ListView(

children: <Widget>[


isiKonten = Text('Karyawan Screen'); /// ubah ini

setState(() {});

}),

Ubah perintah

isiKonten = Text(‘Karyawan Screen’);

menjadi perintah:

isiKonten = KaryawanScreen();

Contoh sebagai berikut:


isiKonten = KaryawanScreen(); /// menjadi seperti ini

setState(() {});

}),

Tujuannya adalah agar ketika menu Karyawan di klik, maka isi koten menggunakan

Widget KaryawanScreen(). Setelah dituliskan, jangan lupa menambahkan import file

karyawan.dart di header dokumen beranda.dart, seperti contoh berikut:

import 'package:app_presensi/karyawan.dart'; ///tambahkan import ini



@override


}

Untuk melihat hasilnya jalankan program, gunakan alamat URL yang diproduksi dari hasil

compile Flutter web, dan refresh pada browser. Setelah aplikasi tampil, lihat hasilnya

dengan klik menu Karyawan. Apa hasilnya? Harusnya seperti gambar berikut:



Gambar 3.18. Tampilan Widget KaryawanScreen sebagai isiKonten

Latihan Buatlah Widget PetaKehadiranScreen dan PresensiScreen desain mirip seperti Widget

KaryawanScreen. Serta sambungkan ke halaman beranda, bila menu Peta Kehadiran di

klik maka muncul halaman Peta Kehadiran. Bila menu Presensi di klik maka muncul

halaman Presensi.



Tugas Rumah

5. Buatlah View FlutterWeb, sebagai berikut:

a. Tampilan Dashboard yang memiliki menu sisi kiri diantaranya:

- Karyawan

- Produk

- Penjualan

- Laporan Penjualan

b. Menu Karyawan:

- Menampilkan konten di sebelah kanan menu berupa tulisan secara vertikal:

o Nama

o Gender

o Sandi

c. Menu Produk:

- Menampilkan konten di sebelah kanan menu berupa tulisan secara vertikal

o Produk

o Harga

o stok

d. Menu Penjualan

- Menampilkan konten di sebelah kanan menu berupa tulisan secara vertikal

o Tgl

o Produk

o Harga

o total

-



Pertemuan 4 Target Pencapaian:

12. Mengenal Async di Fltuter

13. Konfigurasi CORS di Laravel

14. Mengambil data dari Server

15. Operasi CRUD dari View ke Server.

4.1. Penggunaan Future dan Async

Jalannya program yang melakukan eksekusi tiap baris program dilakukan secara seri /

berurutan sering kali mendapati adanya sebuah eksekusi yang menjadi hambatan sehingga

menyebabkan terjadinya not responding. Program modern saat ini telah dilengkapi

kemampuan melakukan pembuatan proses diluar proses utama atau istilahnya Thread.

Proses yang menghambat berjalan di proses utama sangat dilarang, karena dapat membuat

pengalaman pengguna aplikasi menjadi tidak nyaman.

Dart memiliki fitur untuk menjalankan suatu proses yang dianggap dapat menjadi

hambatan untuk dipisah dari proses utama, yaitu namanya asynchronous (tidak singkron)

atau disingkat dengan async. Untuk menggunakan Async, seringkali dipandankan dengan

Future, karena hasil proses secara async tidak boleh ditunggu di proses utama, dan

diterima pada waktu yang tidak terduga melalui Future. Contoh proses yang memiliki

hambatan adalah menunggu kiriman data dari server, atau mengirimkan data ke server.

Maka proses-proses seperti ini harus dilakukan di luar proses utama dengan menggunakan

Async.

Berikut contoh pembuatan method async:

Future loadData() async{

///perintah load data dari server disini…

return hasil;

}

Berikut Contoh penggunaan method async di proses utama:

void ambildata(){

loadData().then((hasil){

/// jalankan perintah tampil hasil

});

}

pada contoh penggunaan method async di void ambildata(). Setelah loadData()

menggunakan then, karena loadData jenisnya Future. Maka method loadData() sifatnya



akan dijalankan tanpa menunggu proses didalamnya selesai, dikarenakan dilakukan secara

tidak singkron. Namun nilai baliknya di kirimkan melalui then pada waktu yang tidak dapat

ditentukan.

Namun perintah async boleh ditunggu didalam proses async dengan menggunakan

perintah await, contoh seperti berikut:

Future loadData()async{

///perintah ambil data dari server

return hasil;

}

Future proses()async{

final h = await loadData();

} Contoh daitas proses adalah method async yang menjalankan loadData async, sehingga

boleh ditunggu dengan menggunakan await, dan hasilnya dapat langsung didapatkan oleh

variabel assignment yaitu pada contoh diatas adalah variabel h. Dengan cara seperti ini

penulisan kode menjadi lebih ringkas karena tidak perlu menggunakan then.

4.2. Cross-Origin Resource Sharing (CORS)

CORS merupakan suatu mekanisme pada browser untuk memberi tahu ke aplikasi web

bahwa sumber daya yang digunakan diluar dari domain dimana aplikasi berasal. Pada

umumnya browser akan mencegah bila sumber data bukan berasal dari domain dimana

aplikasi berasal. Karena pada aplikasi Flutter web adalah berbasis web, dalam

implementasinya harus dijalankan melalui browser dan bisa saja aplikasi harus diletakkan

diluar domain sumber data maka CORS menjadi salah satu kendala terhalangnya

komunikasi data aplikasi ke server. Oleh karena itu pada program sisi server perlu

diaktifkan izin untuk memberikan pelayanan data walaupun berada diluar sumberdayanya.

Framework Laravel tersedia plugin middleware untuk CORS. Plugins ini bisa didapatkan di

https://github.com/barryvdh/laravel-cors. Atau menggunakan composer di project laravel

untuk mengunduhnya.

4.3. Pemasangan CORS di Laravel

https://github.com/barryvdh/laravel-cors



Untuk pembuatan CORS di Laravel, dapat menggunakan Middleware agar aplikasi Laravel

melayani request dari Client dengan memberikan header ‘Access-Control-Allow-Origin’.

Langkah pembuatannya, siapkan Middleware di Laravel yang kita beri nama ‘Cors’.

Jalankan perintah pembuatan aritsan make:middleware di Terminal seperti contoh berikut:

php artisan make:middleware Cors

Gambar 4.1. Pembuatan Middleware Cors

File Middleware akan terbentuk di direktori /app/http/middleware. Seperti pada gambar

berikut:

Gambar 4.2. File Middleware Cors.php

Lakukan modifikasi pada isi file Cors.php tersebut, ditambahkan perintah header(‘Access-

control-Allow-Origin, ‘*’), seperti contoh berikut:



Gambar 4.3 Penambahan Header CORS

Setelah ditambahkan header seperti contoh diatas, simpan dan gunakan middleware Cors

di project Laravel. Untuk menggunakan middleware, lakukan modifikasi di file

/app/Http/Kernel.php.

Gambar 4.4. File Kernel.php



Tambahkan nama file middleware /App/Http/Middleware/Cors.php di kelompok array

$middleware seperti contoh berikut:

Gambar 4.5. Penggunaan Middleware Cors.

4.4. Pemasangan Plugin http di Flutter

Plugin http di flutter diperlukan sebagai library untuk komunikasi data antara aplikasi ke

server. Untuk mengaktifkan plugin ini, buka file pubspec.yaml di project Flutter.

Gambar 4.6. Buka file pubspec.yaml

Tambahkan baris : http: ^0.12.0+2

di bagian depedencies, contoh seperti berikut:



Gambar 4.7. Penambahan Plugin HTTP

Setelah itu simpan file, dan jalankan di terminal di direktori tempat file pubspec.yaml

berada:

flutter pub get

Contoh seperti gambar berikut:

Gambar 4.8 Menjalankan perintah pub get.

Pastikan komputer sedang dalam jaringan internet, karena perintah diatas bertujuan untuk

melakukan pengunduhan dari server dart plugins.

4.5. Pengambilan data dari Server

Sebagai contoh praktik kali ini, akan menggunakan KaryawanScreen. buka file

karyawan.dart tambahkan library dart:convert, http.dart dan variabel data.



a. Libray dart:convert = untuk menggunakan perintah konversi data format json

b. Libaray http.dart = untuk menggunakan library http yang berfungsi sebagai alat

komunikasi antara client dan server.

c. Variabel List data = sebagai variabel global untuk menampung data yang didapat dari

server.

import 'dart:convert'; tambahkan ini

import 'package:app_presensi/form_karyawan.dart';


import 'package:http/http.dart' as http; tambahkan ini


@override


}


List data = new List(); tambahkan ini

d. Tambahkan method refresh seperti contoh berikut:


@override


}


List data = new List();

//Tambahkan method refresh seperti ini:

Future refresh()async{

final r = await http.get('http://127.0.0.1:8000/pengguna/list-data');

data = json.decode(r.body);

setState(() {});

}

Penjelasan:

- http.get adalah perintah untuk request data ke alamat yang dituju, method yang

digunakan adalah get. Perintah ini adalah perintah hambatan yang menghasilkan

nilai balik untuk waktu yang tidak dapat dipastikan, sehingga gunakan await untuk

menunggu hasilnya yang kemudian di berikan kepada variabel r.



- json.decode : perintah untuk konversi json string ke type List / Map. Nilai yang di

konversi adalah r.body, yang merupakan nilai balik dari hasil permintaan dari

server.

- setState((){}); : perintah ini digunakan untuk membuat tampilan di render ulang.

e. Panggil refresh

Panggil method refresh di bagian initState(). Tujuannya agar perintah refresh berjalan

setiap kali widget KaryawanScreen ditampilkan.


List data = new List();


final r = await http.get('http://127.0.0.1:8000/pengguna/list-data');

data = json.decode(r.body);

setState(() {});

}

@override

void initState() {

super.initState();

refresh(); tambahkan ini

}

f. Widget item()

Widget item sebelumnya dibuat untuk menampilkan test tampilan, contoh berikut

Widget item untuk menampilkan data berupa isi dari “nip” dan “nama”. Contoh seperti

berikut:



Widget item(dynamic s){

return Column(

children: <Widget>[

Card(

elevation: 0.0,

child: ListTile(

onTap: (){ } ,

title: Text('${s['nama']}'),

subtitle: Text('${s['nip']}'),


)

),

],

);

}

g. Buat Widget listViewKaryawan

Widget ini dimaksudkan untuk membuat tampilan listview yang akan menampilkan data

pengguna. Berikut kodenya:

Widget listViewKaryawan(){

//Expanded digunakan pada Listview yang ingin diletakkan di dalam column / r

ow

return Expanded(

child: ListView(

children: data.map((s){

return item(s);

}).toList()

),

);

}

h. Widget build()

Pada pertemuan 3, widget build dibuat untuk menampilkan item listview yang dibuat

secara generate. Para praktikum kali ini, sekenario program yang akan dibuat adalah

selain menampilkan data karyawan di listview, juga kita berikan aksi pada tombol



floatActionButton. Ketika tombol Floatactionbutton ditekan, maka akan memunculkan

widget FormKaryawanScreen. Sebelum menambahkan Widget FormKaryawanScreen,

maka kita tambahkan perintahnya di onPressed pada FloatactionButton dan

menambahkan penggunaan widget listviewkaryawan yang akan menampilkan data

karyawan di bagian children column seperti berikut:

@override


return Scaffold(

floatingActionButton: FloatingActionButton(

onPressed: (){

showDialog( context: context,

builder: (c)=>Dialog(

child: FormKaryawanScreen()

)

);

},



),

body:Card(


child: Container(


child: Column(



children: <Widget>[

Text('Data Karyawan',

style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)

),


listViewKaryawan() gunakan widget listview di sini

],

)

)

)

);

}

Berikut kode lengkap dari file karyawan.dart

import 'dart:convert'; import 'package:app_presensi/form_karyawan.dart'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http;



class KaryawanScreen extends StatefulWidget { @override _KaryawanScreenState createState() => _KaryawanScreenState(); } class _KaryawanScreenState extends State<KaryawanScreen> { List data = new List(); @override void initState() { super.initState(); refresh(); } Future refresh()async{ final r = await http.get('http://127.0.0.1:8000/pengguna/list-data'); data = json.decode(r.body); setState(() {}); } Widget item(dynamic s){ return Column( children: <Widget>[ Card( elevation: 0.0, child: ListTile( onTap: (){ } , title: Text('${s['nama']}'), subtitle: Text('${s['nip']}'), leading: Icon(Icons.supervised_user_circle) ) ), ], ); } Widget listViewKaryawan(){ //Expanded digunakan pada Listview yang ingin diletakkan di dalam column / row return Expanded( child: ListView( children: data.map((s){ return item(s); }).toList() ), ); } @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: Container( padding: EdgeInsets.all(50), child: FloatingActionButton( onPressed: (){



showDialog( context: context, builder: (c)=>Dialog( child: FormKaryawanScreen() ) ); }, backgroundColor: Colors.pink, child: Icon(Icons.add_box) ), ), body: Card( margin: EdgeInsets.all(20), child: Container( padding: EdgeInsets.all(20), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Data Karyawan', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold ) ), SizedBox(height: 10), listViewKaryawan() ], ) ) ) ); } }

4.6. Widget FormKaryawanScreen

Pada contoh berikut akan membuat Form untuk pengisian data. Langkah pertama yang

harus disiapkan adalah tampilan Form pengisian data. Buatlah sebuah file dengan nama

form_karyawan.dart, seperti contoh berikut:




class FormKaryawanScreen extends StatefulWidget {

@override

_FormKaryawanScreenState createState() => _FormKaryawanScreenState();

}

class _FormKaryawanScreenState extends State<FormKaryawanScreen> {

@override


return Container();

}

}

a. Widget inputText.

Widget ini dibuat sebagai template untuk bidang input data teks, contoh seperti

berikut:

Widget inputText(String label, TextEditingController ctrl,

{TextInputType keyboardType, int maxLine}){

return TextField(

controller: ctrl,

maxLines: maxLine,

keyboardType: keyboardType,

decoration: InputDecoration(

labelText: '$label'

),

);

}

b. Buat TextEditController

Controller TextField diperlukan untuk mengendalikan isi dari Widget TextField. Controller yang dibutuhkan pada inputan data yaitu : NIP, Nama dan Sandi.


///Tambahkan seperti berikut:

TextEditingController txtNama = TextEditingController(),

txtNIP = TextEditingController(),

txtSandi = TextEditingController();

c. Susunlah Widget inputText di bagian Widget build()

Widget build sebagai bagian yang akan di render tampilan aplikasi Flutter web,

disusun bentuk tampilan yang diinginkan, contoh seperti berikut:



@override


return Container(


child: Column(


children: <Widget>[

Text('Form Karyawan', style: TextStyle(fontSize: 20),),

Divider(),

inputText('NIP', txtNIP),

inputText('Nama', txtNama),

inputText('Sandi', txtSandi),

],

),

);

}

d. Widget DropdownButton Sebagai pilihan Level

Level pengguna yang isinya berupa pilihan A = Administrasi dan P = Pegawai.

Gunakan Widget DropDownButton. Untuk membuat DropdownButton pilihan Level

maka dapat buat Widget dengan nama contoh dropDownLevel sebagai berikut:

Widget dropDownLevel(String value, ValueChanged onChanged){

return DropdownButton(

onChanged: onChanged,

value: value,

isExpanded: true,

items: <DropdownMenuItem>[

DropdownMenuItem(value: '', child: Text('Pilih Level'),),

DropdownMenuItem(value: 'A', child: Text('Administrasi'),),

DropdownMenuItem(value: 'P', child: Text('Pegawai'),),

],

);

}

Penjelasan: DropdownMenuItem harus diisikan value dan child. Value adalah nilai yang digunakan untuk keperluan di penyimpanan ke database, sedangkan child adalah Widget yang digunakan sebagai item pilihan yang ditujukan kepada pengguna. Setelah dibuat Widget dropDownLevel seperti diatas, maka dapat digunakan di bagian build menjadi seperti berikut:

@override


return Container(




child: Column(


children: <Widget>[


Divider(),



dropDownLevel('', (s){ /// digunakan seperti ini

}),


],

),

);

}

Untuk mendapatkan nilai perubahan pada Widget dropDownLevel maka diperlukan sebuah

variable global. Misalkan namanya adalah String level, seperti contoh beirkut:


String level = ''; tambahkan ini

TextEditingController txtNama = TextEditingController(),

txtNIP = TextEditingController(),

Setelah dibuat variable global level, maka gunakan di bagian build menjadi seperti berikut:

e. Widget btnKirim.

Buat Widget btnKirim() sebagai tombol di form di class _KaryawanScreenState.

Widget ini sebagai tombol untuk pengiriman data ke server

Widget btnKirim(){

return Center(

child: RaisedButton(

color: Colors.red,

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),

child: Text('Kirim', style: TextStyle(color: Colors.white),),

onPressed: (){

},

),

);

}

f. Gunakan Widget btnKirim



Untuk menggunakan Widget btnKirim() dapat dituliskan di Widget build seperti

contoh berikut:

@override


return Container(


child: Column(


children: <Widget>[


Divider(),



dropDownLevel('$level', (s){

setState(() {

level = s;

});

}),


SizedBox(height: 30,), ///<-- sebagai jarak textfield dengan button

btnKirim() tambahakn widget ini disini

],

),

);

}

Simpan dan jalankan programnya, maka harusnya hasilnya seperti berikut:



Gambar 4.10. Tampilan Form Karyawan dan Tombol Kirim

4.7. Pengiriman data ke Server

Untuk menyimpan maupun melakukan sunting data, maka perlu dilakukan operasi

pengiriman data ke server. Berikut langkahnya:

a. Buat method Future kirimData()async di class _FormKaryawanScreenState

Future kirimData()async{

}

b. Tambahkan import ‘package:http/http.dart’ as http; pada bagian header dokumen

karyawan.dart seperti contoh berikut:

import 'package:http/http.dart' as http;

c. Perintah pengiriman data

Isi method kirimData() dengan perintah pengiriman data ke /pengguna/simpan

dengan method post. Seperti contoh berikut:

Future kirimData()async{ final r = await http.post('http://127.0.0.1:8000/pengguna/simpan', body: { 'nip' : txtNIP.text, 'nama' : txtNama.text, 'sandi' : txtSandi.text, 'level' : level }); //tampilkan debug untuk melihat hasil nilai balik yang diterim final r print('isi dari r ${r.body}'); }

d. Gunakan method kirimData()

Untuk menggunakan method kirimData() maka letakkan perintah pemanggilan di

onPressed Widget btnKirim seperti contoh berikut:

Widget btnKirim(){ return Center(

child: RaisedButton(

color: Colors.red,

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),

child: Text('Kirim', style: TextStyle(color: Colors.white),),

onPressed: (){

kirimData(); tambahkan ini disini

},

),



);

}

Berikut Sumber Kode Lengkap form_karyawan.dart

import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; class FormKaryawanScreen extends StatefulWidget { @override _FormKaryawanScreenState createState() => _FormKaryawanScreenState(); } class _FormKaryawanScreenState extends State<FormKaryawanScreen> { String level = ''; TextEditingController txtNama = TextEditingController(), txtNIP = TextEditingController(), txtSandi = TextEditingController(); Future kirimData()async{ final r = await http.post('http://127.0.0.1:8000/pengguna/simpan', body: { 'nip' : txtNIP.text, 'nama' : txtNama.text, 'sandi' : txtSandi.text, 'level' : level }); //debug untuk melihat hasil nilai balik yang diterim final r print('isi dari r ${r.body}'); } Widget inputText(String label, TextEditingController ctrl, {TextInputType keyboardType, int maxLine}){ return TextField( controller: ctrl, maxLines: maxLine, keyboardType: keyboardType, decoration: InputDecoration( labelText: '$label' ), ); } Widget dropDownLevel(String value, ValueChanged onChanged){ return DropdownButton( onChanged: onChanged, value: value, isExpanded: true, items: <DropdownMenuItem>[ DropdownMenuItem(value: '', child: Text('Pilih Level'),), DropdownMenuItem(value: 'A', child: Text('Administrasi'),), DropdownMenuItem(value: 'P', child: Text('Pegawai'),), ], ); }



Widget btnKirim(){ return Center( child: RaisedButton( color: Colors.red, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), child: Text('Kirim', style: TextStyle(color: Colors.white),), onPressed: (){ kirimData(); }, ), ); } @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Text('Form Karyawan', style: TextStyle(fontSize: 20),), Divider(), inputText('NIP', txtNIP), inputText('Nama', txtNama), dropDownLevel('$level', (s){ setState(() { level = s; }); }), inputText('Sandi', txtSandi), SizedBox(height: 30,), ///<-- sebagai jarak textfield dengan button btnKirim() ], ), ); } }

Simpan dan coba jalankan program diatas. Lakukan langkah percobaan berikut:

- Masuk ke menu karyawan dan klik tombol Tambah (FloatActionButton).

- Isikan data di form karyawan

- Tekan tombol kirim

- Periksa isi di database tabel pengguna

o Bila isinya ada maka langkah anda sudah berhasil

o Bila isinya tidak ada, cek di bagian Debug Console di browser, dan analisis

kesalahannya.



Tugas Rumah

6. Buatlah tampilan program (View) sebagai berikut:

a. Tampilan Daftar data Karyawan:

- Data berasal dari server yang diambil dari karyawan/list-data

- Ditampilkan dalam bentuk GridView

- Item pada GridView menampilkan Foto dan Nama karyawan dibawahnya, berikut

contoh desainnya:

- Bagian more : menampilkan popUpMenu dengan item:

o Sunting data

Bila dipilih akan menampilkan Form berisi data Karyawan yang ingin

di sunting.

o Hapus data



Bila dipilih akan menampilkan konfirmasi penghapusa data. Dengan

pilih tombol “Ya” atau “Tidak”

JIka dipilih tombol “Ya” maka melakukan operasi penghapusan data

di server dengan memanggil method DELETE ke route

/karyawan/hapus/{id}

- Menggunakan FloatActionButton yang berfungsi sebagai tombol untuk

menampilkan tampilan form data Karyawan.

b. Tampilan Daftar data Produk:

- Data berasal dari server yang diambil dari produk/list-data

- Ditampilkan dalam bentuk ListView

- Item pada ListView menggukan Listtile. PAda bagian leading menampilkan Foto

produk, pada bagian title menampilkan nama produk, sedang kan pada bagian

subtitle menampilkan stok dan harga. Pada bagian trailing menampilkan iconbutton

more:


o Sunting data

Bila dipilih akan menampilkan Form berisi isi data Produk yang ingin

di sunting.

o Hapus data

Bila dipilih akan menampilkan konfirmasi penghapusan data. Dengan




/produk/hapus/{id}


menampilkan tampilan form data Produk.

c. Tampilan Daftar data Penjualan:

- Data berasal dari server yang diambil dari penjualan/list-data

- Ditampilkan dalam bentuk ListView

- Item pada ListView menggukan Listtile. Pada bagian leading menampilkan Icon,

pada bagian title menampilkan nama Penjualan, sedang kan pada bagian subtitle

menampilkan stok dan harga. Pada bagian trailing menampilkan iconbutton more:


o Sunting data

Bila dipilih akan menampilkan Form berisi isi data Penjualan yang

ingin di sunting.

o Hapus data



Bila dipilih akan menampilkan konfirmasi penghapusan data. Dengan




/penjualan/hapus/{id}


menampilkan tampilan form data Penjualan.

2. Membuat Form pengisian data dengan ketentuan sebagai berikut:

a. Form Data Karyawan

- Berisikan :

o TextField : Karyawan ID,

o TextField : Nama Karyawan

o DropDownMenu : Gender (Perempuan : P, Laki-Laki : L)

o TextField : Sandi

o RaisedButton : Simpan

- Jika RaisedButton Simpan onPressed, maka melakukan proses pengiriman data ke

server dengan method POST ke /karyawan/simpan

b. Form Data Produk

- Berisikan :

o Text : Produk ID,

o TextField : Nama Produk

o TextField : Harga. (keyboardType = TextInputType.number)

o TextField : Stok. (keyboardType = TextInputType.number)



server dengan method POST ke /produk/simpan

c. Form Data Penjualan

- Berisikan :

o Text : Penjualan ID,

o Text: Tanggal. Menggunakan InkWell untuk memberikan event onTap.

OnTap menampilkan dialog datepicker.

o TextField : Pengguna_id



server dengan method POST ke /penjualan/simpan



Pertemuan 5 Target Pencapaian:

16. Mekanisme Identifikasi Klien Pada RestFul Web

17. Penggunaan Konstanta Untuk Soft Code.

18. Pengamanan API

19. Penanganan Kesalahan (Error Handling)

5.1. Identifikasi Klien

Aplikasi berbasis klien dan server memungkinkan adanya pengguna berbeda yang

mengakses aplikasi pada waktu yang bersamaan. Agar server dapat mengenali siapa

pengguna yang meminta layanan, maka perlu ada mekanisme pengenalan dari klien.

Pada aplikasi Web umumnya pengenalan klien dengan menggunakan mekanisme

Otentikasi apa yang di ketahui oleh si pengguna, contohnya seperti Login dengan

mengisikan User dan Password. Mekanisme ini adalah cara yang paling sederhana, yaitu

mencocokan user dan password yang dikirimkan oleh pengguna dengan data yang ada

di database, bila ada data yang cocok maka akan dikenali berdasarkan username nya,

bila tidak ada data yang cocok maka dianggap tidak valid.

Agar server selalu mengenali klien setiap kali meminta layanan data, maka baik di sisi

server maupun di sisi klien harus sama-sama menyimpan kunci. Pada kebanyakan

aplikasi web biasanya menggunakan Session sebagai kuncinya. Session ini akan

disediakan oleh sisi server dan harus disimpan di sisi klien. Setiap kali klien meminta

data ke server, maka klien harus selalu menyertakan kunci session ini di header

pengiriman data. Dengan begitu server akan selalu dapat mengenali klien yang

melakukan komunikasi dengannya.

5.2. Penggunaan Token

Selain penggunaan session untuk pengenalan klien, server dapat menggunakan token

sendiri tanpa session. Token dapat diciptakan secara random dengan algoritma tertentu,

misal gunakan MD5 dengan isi nilai acakan berupa nilai random angka rentang tertentu

disertai dengan waktu pemrosesan maupun IP yang mengakses. Ini adalah salah satu

cara sederhana untuk menghasilkan nilai token yang unik.

Token yang dihasilkan diharapkan harus uniq, dan tidak boleh sama satu dengan

lainnya. Hal ini bertujuan agar server tidak salah mengenali kliennya.



Gambar 5.1. Bagan Cara Kerja Pembuatan Token

Sama halnya seperti session, token juga harus disimpan baik di sisi server dan di sisi

klien. Karena mekanisme penyimpanan session berupa file pada arsitektur server

klastering penggunaan session menjadi tidak efektif karena mesin server yang melayani

bisa bergantian, sehingga apabila session telah direkam pada mesin server A dan

kemudian klien meminta layanan di waktu selanjutnya mendapatkan giliran di mesin

server B maka sessionnya menjadi tidak valid. Namun apabila informasi berupa token

yang direkam di basis data, maka apabila menggunakan klastering maka semua mesin

server akan mengakses data yang sama, sehingga informasi token yang diakses akan

selalu sama nilainya.

5.3. LocalStorage

Untuk penyimpanan token di sisi klien (Flutter web) maka dapat memanfaatkan

localstorage. Fitur ini dapat digunakan dengan menambahkan library import ‘dart:html’.

Contoh Deklarasi library:

import 'dart:html' as html;

Contoh Penggunaan:

html.window.localStorage['token'] = nilai;

5.4. Membuat Form Login



Praktikum kali ini akan membuat form login, yang akan digunakan untuk pengisian NIP

dan sandi untuk di cek di server. Siapkan TextEditController untuk nip dan sandi. Berikut

kerangka Class nya. import 'package:flutter/material.dart'; class LoginScreen extends StatefulWidget { @override _LoginScreenState createState() => _LoginScreenState(); } class _LoginScreenState extends State<LoginScreen> { TextEditingController txtNIP, txtSandi;

Widget tombolLogin(){ } Widget formLogin(){ } @override Widget build(BuildContext context) { return Scaffold(); } }

a. Buat Widget FormLogin

Widget formLogin kita desain yang berisikan 2 TextField dan 1 button. Dilapisi Card

dan Container serta Column untuk menyusun lebih dari 1 widget pada sebuah

bidang. Contoh seperti berikut:

Widget formLogin(){ return Card( margin: EdgeInsets.all(30), child: Container( padding: EdgeInsets.all(20), child: Column( children: <Widget>[ TextField(), TextField(), tombolLogin() ], ), ) ); }

Berikan dekorasi pada textfield berupa label dan hintText, menjadi seperti berikut:



Widget formLogin(){ return Card( margin: EdgeInsets.all(30), child: Container( padding: EdgeInsets.all(20), child: Column( children: <Widget>[ TextField( controller: txtNIP, decoration: InputDecoration( labelText: 'NIP', hintText: 'Isikan Nomor Induk Pengguna' ), ), TextField( controller: txtSandi, obscureText: true, decoration: InputDecoration( labelText: 'Sandi', hintText: 'Isikan Nomor Induk Pengguna' ), ), tombolLogin() ], ), ) ); }

Agar txtNIP maupun txtSandi dapat digunakan sebagai controller di TextField, maka

pastikan txtNIP dan txtSandi di instance object. Perintah instance object dapat

dilakukan baik di constructor ataupun di initState(). Berikut contoh instanceObject

TextEditcontroller untuk txtNIP dan txtSandi di initState(). @override void initState() { super.initState(); txtNIP = new TextEditingController(); txtSandi = new TextEditingController(); }

b. Buat Tombol Login

Tombol login yang akan didesain berupa bentuk sedikut oval di sudutnya, dan

berwarna biru. Berikut contoh isi tombolLogin() Widget tombolLogin(){ return RaisedButton( child: Text('Login', style: TextStyle(color: Colors.white),), color: Colors.blue, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)), onPressed: (){ login(); }, ); }

c. Susun di Widget build()



Setelah semua widget diatas telah dibuat, sekarang susunlah widget di bagian

Widget build() seperti contoh berikut:

@override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Container( child: Center( child: Column( children: <Widget>[ formLogin() ], ), ), ), ), ); }

d. Buat method login()

Method login ini bekerja dengan mengirimkan nip dan sandi ke server untuk

mendapatkan nilai response dari server.

Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); final js = json.decode(hasil.body);

if(js['result'] == true){ //perintah lakukan sesuatu berhasil login }else{ //perintah lakukan sesuatu gagal login } }

e. Ganti Halaman Awal

Lihat pada file /lib/main.dart. disitu akan mendapati Widget pertama yang akan

ditampilkan adalah Beranda(), seperti pada kode berikut:



Modifikasi pada bagian home diatas, ubah dari Beranda menjadi LoginScreen(),

seperti pada contoh berikut:

import 'package:app_presensi/login.dart';




@override



debugShowCheckedModeBanner: false,


theme: ThemeData(


),

home: LoginScreen()

);

}

}

f. Buat method login di Server

Untuk meresepon permintaan login dari klien, maka di sisi server harus memiliki perintah penanggapan permintaan login. Modifikasi pada controller Pengguna di



Laravel dengan menambahkan method login di Laravel /app/Http/controller/Pengguna.php seperti berikut:

public function login(){ $nip = request('nip'); $sandi = request('sandi'); $r = PenggunaModel::where('nip', $nip)->where('sandi', md5($sandi))->get(); if($r->count() < 1){ return ['result'=>false, 'msg'=>'NIP dan sandi tidak cocok di sistem']; } return ['result' => true, 'token' => $this->buatToken( $r[0] ), 'pengguna'=>$r[0] ]; }

Penjelasan: - Dapatkan kiriman nip dari klien - Dapatkan kirima sandi dari klien

- Dapatkan model data Pengguna berdasarkan nip dan sandi

- Jika jumlah data di model pengguna didapat kurang dari 1 maka kirimkan pesan

‘result’ = false dan pesan nip dan sandi tidak cocok di sistem.

- Selain itu maka kirimkan pesan result = true, token dengan membuat token terlebih

dahulu serta informasi pengguna

g. Tabel Session

Buat tabel beri nama session, sebagai tabel yang menyimpan segala informasi

aktifitas login dari setiap pengguna yang masuk ke sistem.

Berikut spesifikasinya: Tabel 1.1. Tabel Session

Nama Type Ukuran Keterangan

Token Varchar 32 Primary Key not null

Nilai Text

h. Model Session

Tambahkan model Session di Laravel untuk menghandle table Session yang telah

dibuat diatas, seperti contoh berikut:



Kemudian Modifikasi file \Model\Session.php menjadi sebagai berikut:

i. Method buatToken

Method buatToken melakukan generate nilai secara acak untuk token yang akan di

simpan di tabel session, serta untuk dikirimkan ke klien.

private function buatToken($user){ $token = md5( rand(9,928938) . date('YmdHis') . rand(8,827484) ); $s = new Session(); $s->token = $token; $s->nilai = $user; $s->save(); return $token; }

j. Tambahkan Route

Untuk dapat di akses di klien, jangan lupa untuk menambahkan route login() di

route/web.php:

Setelah melakukan tahapan diatas, lakukan pengujian terhadap login. Jangan lupa

menambahkan printah print untuk melihat hasil luaran dari http.post

pengguna/login. Seperti contoh berikut



Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); print('hasil login ${hasil.body}'); //<--untuk melihat response dari server final js = json.decode(hasil.body); if(js['result'] == true){ //<-perintah lakukan sesuatu berhasil login }else{ //<--perintah lakukan sesuatu gagal login } }

Amati hasilnya, bila terjadi kesalahan lakukan analisis dan tanyakan kepada tutor di

kelas.

5.5. Pindah ke Halaman Lain

Contoh yang akan digunakan adalah perintah ketika login berhasil pada tahapan diatas.

Kita akan membuat aplikasi berpindah dari LoginScreen ke Beranda(). Untuk berpindah

ke tampilan Widget lain, maka dapat menggunakan perintah

Navigator.pushReplacement().Modifikasi method login() serta mencatat token yang

dikirim oleh server. Berikut contohnya :

Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); print('hasil login ${hasil.body}'); //<--untuk melihat response dari server final js = json.decode(hasil.body); if(js['result'] == true){ //simpan token ke localstorage html.window.localStorage['token'] = js['token']; html.window.localStorage['pengguna'] = json.encode(js['pengguna']); //Ganti tampilan ke widget Beranda() Navigator.pushReplacement(context, new MaterialPageRoute( builder: (b)=>Beranda() )); }else{ //perintah lakukan sesuatu login gagal } }



5.6. ShowAlert

Sering kali kita memerlukan tampilan alertDialog untuk sebagai pemberitahuan adanya

terjadi peringatan ataupun pembertahuan kepada pengguna. Untuk pembuatan alert

contohnya sebagai berikut:

void alert(String pesan){ showDialog( context:context, builder: (b)=>AlertDialog( title: Text('Perhatian'), content: Text('$pesan'), actions: <Widget>[ FlatButton( onPressed: (){ Navigator.pop(context); },child: Text('Oke Saya mengerti'), ) ], ) ); }

Contoh penggunaannya:

alert('Maaf, anda tidak berhak masuk ke sistem');

Gunakan alert() sebagai pemberitahuan terjadi kegagalan login. Modifikasi method

login() menjadi sebagai berikut:

Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); print('hasil login ${hasil.body}'); //<--untuk melihat response dari server final js = json.decode(hasil.body); if(js['result'] == true){ html.window.localStorage['token'] = js['token']; html.window.localStorage['pengguna'] = json.encode(js['pengguna']); Navigator.pushReplacement(context, new MaterialPageRoute( builder: (b)=>Beranda() )); }else{ alert('Maaf, nip dan sandi anda tidak cocok di sistem kami');// alert kesalahan } }



5.7. Auto Login

Untuk membuat aplikasi pada Flutterweb apabila aplikasi di referesh kemudian otomatis

masuk ke beranda setelah sebelumnya melakukan login, maka perlu ditambahkan

perintah untuk melakukan pengujian token, untuk memastikan apakah token yang

tersimpan di localstorage aplikasi flutter web masih sama dengan yang ada di server.

Jika token masih valid maka aplikasi akan berpindah ke Beranda, namun bila tidak valid

maka menampilkan halaman login.

Untuk itu perlu ditambahkan method cekPengguna yang dipanggil pada saat awal

Widget login dimulai.

a. Membuat method cekPengguna() di Flutter

Future cekPengguna()async{ final token = html.window.localStorage['token']; final hasil = await http.post('http://127.0.0.1:8000/pengguna/cek-token', body: { 'token' : token }); final js = json.decode(hasil.body); if(js['result'] == true){ Navigator.pushReplacement(context, new MaterialPageRoute( builder: (bc)=>Beranda() )); } }

Pada perintah cekPengguna diatas akan menghubungi server pada route

/pengguna/cek-pengguna dengan menyertakan token untuk di uji, apakah nilai

token yang dimiliki client masih sama dengan yang ada di server, jika ‘result’ bernilai

true, maka token bernilai valid dan kemudian aplikasi akan membuka widget

Beranda(). Untuk menggunakan cekPengguna() letakkan method ini dipanggil di

bagian initState(). Contoh menjadi sebagai berikut:

@override

void initState() {

super.initState();

txtNIP = new TextEditingController();

txtSandi = new TextEditingController();

cekPengguna(); tambahkan seperti ini

}

b. method cekPengguna() di Server

Agar di sisi server menanggapi permintaan cek-pengguna oleh klien, maka di sisi

server juga harus disediakan proses penanggapannya. Buatlah method cekPengguna

di controller Pengguna, seperti contoh berikut:



Method cekPengguna() bekerja sebagai berikut:

- dapatkan nilai token dari kiriman klien

- baca tabel Session, dengan mencari nilai ‘token’ dari isi tabel yang sama

dengan nilai token dari klien

- Jika jumlah data yang ditemukan kurang dari 1 (satu), maka

Kembalikan nilai dengan isi result=false, dan pesan=Token tidak valid

- Jika tidak masuk kriteria poin diatas, maka token dianggap ditemukan,

maka kembalikan berupa informasi result=true, dan data user yang ada di

dalam tabel Session.

Setelah dibuat method untuk cekPengguna, maka daftarkan pada route di

route/web.php agar dapat di akses secara POST oleh klien seperti contoh berikut:

Setelah langkah-langkah diatas dilakukan. Coba jalankan server dan Flutter. Lakukan

Login dan lihat hasilnya apakah berhasil masuk ke Beranda? Jika tidak berhasil cek

kembali kode program diatas. Bila sudah berhasil, refresh browser dan lihat kembali

apakah langsung masuk ke beranda atau masih meminta login?. Jika masih meminta

Login maka ada langkah yang belum berhasil dilakukan. Bila langsung masuk ke halaman

Beranda maka anda telah berhasil membuat identifikasi pengguna.

5.8. Hard Coded

Hard coded merupakan teknik penulisan string pada kode program yang tidak bersifat

flexible. Hal ini akan membuat banyak upaya bila adanya terjadi perubahan dari isi

string, yang apalagi berupa ketentuan isi, sehingga harus merubah satu persatu

menjadikan penulisan kode program tidak menjadi efektif.



Contoh perintah hard-coded:

final hasil = await http.post('http://127.0.0.1:8000/pengguna/simpan', body: {

pada bagian 'http://127.0.0.1:8000/pengguna/simpan' merupakan hard-coded.

Karena dituliskan secara String langsung. Apabila ada perubahan alamat server maka

kita harus merubah seluruh dokumen program yang mengandung alamat URL yang

harus diubah. Model hard-coded pada pembuatan program dalam skala sedang maupun

besar akan sangat menyusahkan dan sama sekali tidak disarankan.

Untuk mengatasi persoalan diatas, maka diperlukan pembuatan konstanta sebagai

ketentuan nilai yang di letakkan pada sebuah file khusus untuk menghimpun semua

ketentuan isi dari String. Sehingga apabila ada perubahan, kita hanya berfokus pada

sebuah file saja untuk merubahnya.

5.9. Pembuatan Konstanta

Pembuatan konstanta di dart strukturnya sebagai berikut:

static final type_data nama_konstanta = ‘nilai konstanta’;

contoh:

static final String LABEL_SAVE = 'Simpan';

Berikut langkah contoh praktik pembuatan konstanta untuk tujuan soft code pada alamat

URL server. Buat sebuah file .dart di project dengan nama url_address.dart. nantinya isi

dari file ini adalah deklarasi nama-nama url yang dapat diresponse oleh server. Berikut

contohnya:

class UrlAddress{

static final String HOST = 'http://127.0.0.1:8000';

static final String URL_PENGGUNA = '$HOST/pengguna';

static final String URL_PENGGUNA_SIMPAN = '$URL_PENGGUNA/simpan';

static final String URL_PENGGUNA_HAPUS = '$URL_PENGGUNA/hapus';

static final String URL_PENGGUNA_LOGIN = '$URL_PENGGUNA/login';

static final String URL_PENGGUNA_CEK = '$URL_PENGGUNA/cek-pengguna';

static final String URL_PENGGUNA_LISTDATA = '$URL_PENGGUNA/list-data';

static final String URL_PETAPRESENSI = '$HOST/peta';

static final String URL_PETAPRESENSI_LISTDATA = '$URL_PETAPRESENSI/list-data';

static final String URL_PETAPRESENSI_LIHAT_DATA = '$URL_PETAPRESENSI/lihat-data';

static final String URL_PETAPRESENSI_HAPUS = '$URL_PETAPRESENSI/hapus';



static final String URL_PETAPRESENSI_SIMPAN = '$URL_PETAPRESENSI/simpan';

}

Contoh penggunaan konstanta diatas dapat diterapkan seperti berikut:

Future simpanData()async{

setState((){ isLoading=true; });

final hasil = await http.post(UrlAddress.URL_PENGGUNA_SIMPAN, body: {

'key' : '${kry['nip']}',

'nip' : txtNip.text,

'nama' : txtNama.text,

'sandi' : txtsandi.text,

'level' : level

});

Untuk penggunaan class UrlAddress pastikan dokumen dart yang menggunakannya telah

melakukan import file url_address.dart, seperti contoh berikut:

import 'package:app_presensi/helper/url_address.dart';

Sekarang periksalah kembali setiap file pada project yang menggunakan penulisan hard

code kemudian ganti menjadi konstanta.

5.10. Pengamanan API

Kode program yang telah dibuat di Server pada praktik sebelumnya merupakan bentuk API

(Application programming Interface) yang belum dilakukan pengamanan. Seperti untuk melihat

isi data, simpan maupun hapus data bisa langsung dieksekusi melalui aplikasi postman. Untuk

mode development / Pengembangan hal tersebut sah-sah saja, karena untuk memudahkan

pengujian dan koreksi pra-produksi. Tapi bila sudah masuk ke mode produksi, maka akses

langsung pada fitur-fitur tersebut sangat tidak aman, karena dapat di eksploitasi data oleh

pihak luar.

Teknik program yang kita buat adalah restFulweb, yaitu website yang tidak menggunakan

session bawaan sebagai pengingat dari klien, tapi menggunakan pembuatan token yang

disimpan di tabel Session di database. Hal ini akan sangat berfungsi untuk jenis server yang

menggunakan klaster bila dibandingkan menggunakan session bawaan dari PHP yang tidak

dapat berfungsi dengan baik pada server klaster.

Praktik kali ini kita akan membuat pengamanan pada perintah lihat data, hapus data,

maupun simpan data. Caranya dengan menggunakan middleware sebagai filter pada route web

yang mengarah pada operasi-operasi CRUD di server. Ikuti langkah berikut:

A. Buatlah middleware di laravel melalui artisan, sebagai contoh buat dengan nama

Otorisasi. Berikut contohnya jalankan di terminal pada direktori project:

php artisan make:middleware Otorisasi



B. Modifikasi file middleware Otorisasi.php yang berada di direktori

/app/Http/Middleware. Baca data dari header dan dapatkan nilai token yang dikirimkan

dari klien untuk di cek di tabel session. Bila token ditemukan, maka lanjutkan proses,

bila tidak ada maka kirimkan nilai informasi token tidak valid.

C. Daftarkan middleware di Kernel.php dengan nama ‘otorisasi’ seperti contoh berikut di

bagian $routeMiddleware:



D. Gunakan Middleware di bagian route web yang mengarah pada operasi CRUD, seperti

contoh berikut:

Perhatikan pada contoh diatas, penggunaan middleware digunakan pada:

- /pengguna/list-data

- /pengguna/cari-nip

- /pengguna/hapus

- /pengguna/simpan

- /pengguna/cek-pengguna

Tapi tidak untuk /pengguna/login, karena Login adalah cara untuk klien untuk mendapatkan

token dari server, jadi tidak boleh diberikan middleware untuk otorisasi, sebab bila diberikan

maka klien tidak akan pernah bisa login dan tidak pernah akan bisa mendapatkan token.

5.11. Akses API – Auth dari Flutter

Pada sisi kode program di klien untuk akses terhadap jenis API yang memerlukan otorisasi

token maka perlu melakukan modifikasi pada perintah requestnya. Tambahkan informasi token

yang telah diterima dari server ke bagian header setiap transaksi request http. Contoh sebagai

berikut




///ambil informasi token yang tersimpan di localstorage

final token = html.window.localStorage['token'];

final r = await http.get(UrlAddress.URL_PENGGUNA_LISTDATA,

headers: { 'token' : token} ///gunakan token di headers

);

. . .

. . .

Keterangan:

- html.token.localStorage[‘token’] : mendapatkan informasi preferences ‘token’.

Informasi nilai token ini sebelumnya harus telah disimpan ketika login berhasil. Lihat

pada point 5.4 di sub D.

- headers: {‘token’ : token} : menggunakan parameter headers untuk ditambahkan isi

‘token’ yang tersimpan di sisi klien yang nantinya di baca oleh server melalui

perintah : apache_request_headers(). Lihat pada point 5.10 sub. B diatas.

Penambahan headers diatas akan menyebabkan persoalan CORS yaitu Access-Control-

Allow-Headers. Oleh karena itu modifikasi file middleware/Cors.php menjadi sebagai

berikut:

Setelah melakukan tahapan diatas, lakukan pengujian pada program kalian. Seharusnya

yang dicapai:

1. Login : masukan id dan sandi yang benar maka akan masuk ke halaman beranda, bila

salah maka keluar pesan kesalahan ID san Sandi.



2. Bila login telah berhasil: Refresh browser, harusnya langsung masuk ke halaman

beranda, tidak lagi meminta login.

3. Lihat data, simpan data, hapus data: coba semua menu di aplikasi, lakukan lihat data,

simpan data dan hapus data, harusnya semua berjalan normal. Kemudian lakukan

pengujian melalui postman seperti pada pertemuan 2, yaitu lihat data, simpan data dan

hapus data. Seharusnya bila otorisasi sudah benar operasi tersebut tidak bisa lagi

dijalankan.

5.12. Release Aplikasi web

Project flutterweb yang dibuat pada tahap debug masih berjalan sangat berat dan lama,

hal ini disebabkan adanya modul / library monitoring proses yang disertakan pada saat

menjalankannya. Untuk menjadikannya mode Release, maka project flutter-web harus di build

release terlebih dahulu agar aplikasi dapat running lebih ringan dan cepat.

Untuk build aplikasi, jalankan perintah berikut melalui terminal dalam keadaan online:

flutter build web –release

Tunggu beberapa saat hingga Compiling selesai.

Gambar 5.1 Proses compiling flutter web

Bila sudah selesai file dapat ditemukan di dalam project flutter di direktori /build/web.

Seperti contoh berikut:

Gambar 5.2. Hasil release flutter-web



5.13. Integrasi Release Aplikasi Flutter Web ke Laravel Project

Project Flutter yang telah di release, dapat di integrasikan menjadi kesatuan dari project

di Laravel, sehingga bila aplikasi web laravelnya di jalankan pada direktori home, yang

muncul adalah aplikasi flutter yang telah di release. Beikut langkah-langkahnya:

A. Salin file release project flutter seperti pada contoh gambar 5.2 diatas ke project

Laravel di direktori /public, seperti contoh berikut

Gambar 5.3. Hasil Salin project flutter ke /public Laravel

B. Buat file di laravel di direktori /resource/views/. Buat dengan nama index.blade.php,

seperti contoh berikut. Serta isikan file index.blade.php seperti contoh berikut:

Gambar 5.4 Isi file index.blade.php



C. Salin file /web/assets yang ada di project Flutter-web ke direktori /public pada Laravel,

seperti berikut:

Gambar 5.5. Folder assets flutter ke /public di Laravel.

Langkah diatas bertujuan agar asset gambar yang telah dibuat di project Flutter terikut

serta nantinya bila aplikasi dijalankan.

D. Modifikasi route/web.php pada method ::get(‘/’) diarahakan view ke index.blade.php,

sepertin contoh berikut:

Nb*: Cukup ketikkan nama ‘index’ saja, tidak perlu ada blade.php.

Bila telah dilakukan langkah-langkah diatas, kemudian jalankan dan jangan lupa analisis

pesan yang muncul di console web yang ada di browser. Lakukan login dan analisa buila terjadi

kesalahan, cobalah melakukan perbaikan dengan mendiskusikannya ke tutor.

Selamat berkreasi.



Tugas Rumah

1. Buatlah form Login untuk mengenali pengguna berdasarkan ID pengguna dan kata

sandinya.

2. Buatlah middleware untuk memvalidasi token yang dikirimkan oleh klien masih valid

sebagai mekanisme keamanan akses data. Pastikan setiap operasi CRUD di server hanya

dapat berjalan pada klien aplikasi yang telah melakukan Login dengan benar, tidak akan

melayani data pada postman ataupun permintaan dari klien yang tidak melakukan login

dengan benar.

3. Buatlah konstanta di dile url_address.dart dengan nama class UrlAddress:

a. URL_HOST = ‘http://127.0.0.1:8000/’

b. URL_KARYAWAN_LIST_DATA = ULR_HOST + ‘karyawan/list-data’

c. URL_KARYAWAN_SIMPAN= ULR_HOST + ‘karyawan/simpan’

d. URL_KARYAWAN_HAPUS= ULR_HOST + ‘karyawan/hapus’

e. URL_PRODUK_LIST_DATA = ULR_HOST + ‘produk/list-data’

f. URL_ PRODUK _SIMPAN= ULR_HOST + ‘produk /simpan’

g. URL_ PRODUK _HAPUS= ULR_HOST + ‘produk /hapus’

h. URL_PENJUALAN_LIST_DATA = ULR_HOST + ‘penjualan/list-data’

i. URL_ PENJUALAN _SIMPAN= ULR_HOST + ‘penjualan /simpan’

j. URL_ PENJUALAN _HAPUS= ULR_HOST + ‘penjualan /hapus’

k. URL_DETAIL_PENJUALAN_LIST_DATA = ULR_HOST + ‘penjualan/list-detail

l. URL_ DETAIL_PENJUALAN _SIMPAN= ULR_HOST + ‘penjualan /simpan-detail’

m. URL_ DETAIL_PENJUALAN _HAPUS= ULR_HOST + ‘penjualan /hapus-detail’

4. Modifikasi kode program anda untuk menggunakan soft-coded dengan cara merubah

semua hard-coded URL transaksi simpan, list-data dan hapus menggunakan konstanta yang

telah dibuat pada project anda.

5. Release aplikasi anda dan integrasikan aplikasi flutter ke project laravel pada route root:

(‘ / ‘), yaitu akan diakses sebagai muka halaman di project anda.



Pertemuan 6 – 9 Konsultasi Project Akhir

Pertemuan 10-16 Presentasi Project Akhir

Date post:	11-Jul-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

Modul Web Programming 2 - repository.bsi.ac.idModul Web Programming 2 Oleh : Agung Sasongko, M.Kom...

Documents