Agung Sasongko, M.

Kom | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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,

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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 :

[Link]

2. Pilih file installer sesuai dengan sistem operasi dan teknologi komputer yang
dimiliki.
a. Windows 64-bit : [Link]
[Link]
b. Linux 64-bit: [Link]
[Link]
c. OS X : [Link]
[Link]

3. Instalasi aplikasi XAMPP bila telah mengunduh installer diatas.

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

 Agung Sasongko, [Link] | Sistem Informasi

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\[Link] –k install –n “apache php7”

Jalanlan di Run dialog: [Link]

- 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\[Link] –install “MySQL Services”

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

 Agung Sasongko, [Link] | Sistem Informasi

Jalanlan di Run dialog: [Link]

- 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 : [Link]

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”

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

 Agung Sasongko, [Link] | Sistem Informasi

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…”

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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(‘[Link] ‘[Link]’);”

Gambar 1.7. Mengunduh [Link]

4. Jalankan [Link] untuk pemasangan komposer di lingkungan kerja

PHP.

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

 Agung Sasongko, [Link] | Sistem Informasi

Gambar 1.8 Pemasangan composer.

5. Composer yang telah sukses di pasang akan menjadi file [Link]. bila
berhasil, maka hapus saja file [Link], karena tidak diperlukan lagi.
 Del [Link]

Gambar 1.9. Hapus [Link]

6. Untuk kemudian menggunakan composer maka gunakan perintah:

 php [Link] <parameter>

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

 Agung Sasongko, [Link] | Sistem Informasi

3.4. Pemasangan Laravel

Pemasangan laravel atau membuat project baru di Laravel dapat dilakukan melalui
[Link]. Namun sebelumnya pastikan telah memiliki file [Link] 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 [Link] berada:
 php [Link] 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: [Link]

Bila benar, maka seharunya akan tampil seperti gambar berikut:

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

 Agung Sasongko, [Link] | Sistem Informasi

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
[Link] 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
[Link] Namun karena
sifatnya berbayar, kita tidak dapat menggunakannya secara bebas, tapi dapat

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

 Agung Sasongko, [Link] | Sistem Informasi

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:

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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:

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

 Agung Sasongko, [Link] | Sistem Informasi

Gambar 1.16. Konfigurasi Database di .env

Karena menggunakan database mariaDB atau mySQL maka isikan

DB_CONNECTION=mysql. DB_HOST=[Link] 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

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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/

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

 Agung Sasongko, [Link] | Sistem Informasi

<?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:

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

 Agung Sasongko, [Link] | Sistem Informasi

<?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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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”

Field Name Field Type Field Size Index

Id Int Auto_increment PK
Tgl Datetime
Pengguna_id Unsigned integer FK (references
pengguna)

d. “penjualan_has_produk”

Field Name Field Type Field Size Index

Id Int Auto_increment PK
Penjualan_id Unsigned integer FK (references
penjualan)
Produk_id Unsigned integer FK (references
produk)
Qty Integer
Harga double

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link].

Buka file Model\[Link], maka isinya telah di generate contoh sebagai

berikut:

Gambar 2.3. Hasil Generate Model\[Link]

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

class Pengguna extends Model

{
protected $table = 'pengguna';
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

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

class Pengguna extends Model

{
protected $table = 'pengguna';
const CREATED_AT = null;
const UPDATED_AT = null;

protected $primaryKey = 'nip';

}

b. Membuat Model PetaKehadiran

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link], seperti pada gambar berikut:

Gambar 2.5. Hasil Generate Artisan [Link]

2) Definisikan tabel yang dikelola pada Model\PetaKehadiran

Modifikasi file Model\[Link] menjadi sebagai berikut:

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

 Agung Sasongko, [Link] | Sistem Informasi

<?php

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

class PetaKehadiran extends Model

{
protected $table = 'peta_kehadiran';

3) Non-Aktifkan Field CREATED_AT dan UPDATE_AT

Modifikasi file Model\[Link] menjadi sebagai berikut:
<?php

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

class PetaKehadiran extends Model

{
protected $table = 'peta_kehadiran';
const UPDATED_AT = null;
const CREATED_AT = null;
}

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:

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

 Agung Sasongko, [Link] | Sistem Informasi

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

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

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

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

class PresensiHarian extends Model

{
protected $table = 'presensi_harian';
const UPDATED_AT = null;
const CREATED_AT = null;
}

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

Gambar 2.8. Pembuatan Controller Pengguna

Pada langkah ini, akan dibuatkan sebuah file Controller [Link] yang berada di
folder app\http\Controllers.

Gambar 2.9. File Hasil Generate Controller [Link]

Buka file [Link] dan lihat isinya.

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link] 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:

use App\Model\Pengguna as PenggunaModel;

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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

namespace App\Http\Controllers;
use App\Model\Pengguna as PenggunaModel;

class Pengguna extends Controller

{
public function lihatData()
{
$r = PenggunaModel::get();
return ['count'=>$r->count(), 'data'=>$r];
}

public function ambilData($nip=''){

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

Keterangan:

Perhatikan pada blok method ambilData() berikut.

public function ambilData($nip=''){

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

 parameter $nip,

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

 Agung Sasongko, [Link] | Sistem Informasi

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:

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

 Agung Sasongko, [Link] | Sistem Informasi

<?php

namespace App\Http\Controllers;
use App\Model\Pengguna as PenggunaModel;

class Pengguna extends Controller

{
public function lihatData()
{
$r = PenggunaModel::get();
return ['count'=>$r->count(), 'data'=>$r];
}

public function ambilData($nip=''){

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

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()

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

 Agung Sasongko, [Link] | Sistem Informasi

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

namespace App\Http\Controllers;
use App\Model\Pengguna as PenggunaModel;

class Pengguna extends Controller

{
public function lihatData()
{
$r = PenggunaModel::get();
return ['count'=>$r->count(), 'data'=>$r];
}

public function ambilData($nip=''){

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

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

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

 Agung Sasongko, [Link] | Sistem Informasi

Routing merupakan cara Laravel untuk menentukan arah Request dari client akan
diteruskan. Routing pada Laravel berada di folder /routes dan di dalam file [Link].

Gambar 2.10. Lokasi file route [Link]

File /route/[Link] 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 [Link] menjadi sebagai berikut:

Jenis method request client

<?php Rute URL Nama Controller Nama method

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');

Parameter request

2.8. Pengujian

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

 Agung Sasongko, [Link] | Sistem Informasi

Pengujian request dan response dari aplikasi yang telah dituliskan diatas dapat
menggunakan tools seperti aplikasi Postman, yang dapat unduh di :
[Link]

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

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

 Agung Sasongko, [Link] | Sistem Informasi

Test Nama Test Deskripsi Langkah Pengujian Hasil yang Hasil

ID diharapkan
TC01 Request GET Meminta data Mengirimkan method GET ke Menampilka
‘/pengguna/list- pengguna dari URL : n format
data’ server [Link] json data
a/list-data pengguna
TC02 Request POST Menyimpan data Mengirimkan data method Format json
‘pengguna/simp ke tabel POST sebagai berikut: {result:true}
an’ pengguna ‘nip’ = 2019010101
‘nama’ = Eko Priyono
‘level’ = ‘A’
‘sandi’ = ‘ekoeko’
Ke url :

[Link]
a/simpan
TC03 Request GET ke Meminta data Mengirimkan data method GET Tampil
‘/pengguna/am dengan nip: ke url: format json
bil/2019010101’ ‘2019010101’ [Link] data
a/ambil-data/2019010101 pengguna
dengan nip
2019010101
TC04 Request DELETE Menghapus data Mengirimkan data method {result:true]
ke dari tabel DELETE ke url:
‘/pengguna/hap pengguna dengan [Link]
us/2019010101 nip ‘2019010101’ a/hapus/2019010101

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

Tanyakan kepada dosen anda bila mengalami kesulitan.

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

 Agung Sasongko, [Link] | Sistem Informasi

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
1. Method lihatData()
2. Method simpanData()
3. Method hapusData()
c. Penjualan
1. Method lihatData()
2. Method simpanData()
3. Method hapusData()
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()

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

 Agung Sasongko, [Link] | Sistem Informasi

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’

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

 Agung Sasongko, [Link] | Sistem Informasi

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: [Link]
b. Mac Os : [Link]
c. Linux : [Link]

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:

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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:

[Link] : 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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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/[Link]. subroutine yang pertama di
jalankan adalah main().

Bukalah file [Link] yang ada di folder /lib. Kosongkan semua isinya, dan tuliskan kode
program sebagai berikut:
[Link]

import 'package:flutter/[Link]';

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

class AppPresensi extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(

);
}
}

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

 Agung Sasongko, [Link] | Sistem Informasi

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:

import 'package:flutter/[Link]';

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

class AppPresensi extends StatelessWidget {

@override
Widget build(BuildContext context) {
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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link] sebagai berikut:
import 'package:flutter/[Link]';

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

class AppPresensi extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Presensi Online',
theme: ThemeData(
primaryColor: [Link]
),
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.

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

 Agung Sasongko, [Link] | Sistem Informasi

B. Membuat Desain Widget Beranda

Selanjutnya buat file [Link] 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:

import 'package:flutter/[Link]';

class Beranda extends StatefulWidget {

@override
_BerandaState createState() => _BerandaState();
}

class _BerandaState extends State<Beranda> {

Widget konten(){

Widget itemMenu(String label, VoidCallback onTap ){

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

 Agung Sasongko, [Link] | Sistem Informasi

Widget menuKiri(){

@override
Widget build(BuildContext context) {
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.
import 'package:flutter/[Link]';

class Beranda extends StatefulWidget {

@override
_BerandaState createState() => _BerandaState();
}

class _BerandaState extends State<Beranda> {

Widget isiKonten; Tambahkan bagian seperti ini

Penjelasan:
Widget isiKonten : merupakan variabel Global yang digunakan nantinya sebagai peubah
isi konten.

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

 Agung Sasongko, [Link] | Sistem Informasi

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:
Widget itemMenu(String label, VoidCallback onTap ){
return new Card(
elevation: 0,
margin: [Link](0),
child: ListTile(
onTap:onTap,
leading: new Icon( [Link] ),
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:

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

 Agung Sasongko, [Link] | Sistem Informasi

Gambar 3.11. Ilstrasi Stukrur widget [Link]

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

Berikut ilustrasi struktur Widget menuKiri()

Gambar 3.12. Ilustrasi Struktur Widget [Link]()

G. Susun semua widget di Widget build

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon([Link],),
onPressed: (){

}
),
elevation: 0,
title: Text('Sistem Informasi Presensi')
),
body:Row(
crossAxisAlignment: [Link],
children: <Widget>[
menuKiri(),
konten()
],
)
);
}

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

 Agung Sasongko, [Link] | Sistem Informasi

Berikut ilustrasi struktur kode build diatas:

Gambar 3.13. Ilustrsasi Struktur Widget [Link]

Berikut kode lengkap dari file [Link]

import 'package:flutter/[Link]';

class Beranda extends StatefulWidget {

@override
_BerandaState createState() => _BerandaState();
}

class _BerandaState extends State<Beranda> {

Widget isiKonten;
bool sembunyi = false;

@override
void initState() {
[Link]();
isiKonten = Text('Selamat datang');

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

 Agung Sasongko, [Link] | Sistem Informasi

Widget itemMenu(String label, VoidCallback onTap ){

return new Card(
elevation: 0, /// hilangkan banyangan widget Card
margin: [Link](0),
child: ListTile(
onTap:onTap,
leading: new Icon( [Link] ),
title: new Text('$label')
)
);
}

Widget menuKiri(){
return new Container(
width: 200,
decoration: new BoxDecoration(
color: [Link],
boxShadow: <BoxShadow>[
///buat bayangan di meru kiri
BoxShadow(
color: [Link][300],
offset: Offset(3,2),
blurRadius: 10
)
]
),
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(() {});
})
],
)
);
}

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

 Agung Sasongko, [Link] | Sistem Informasi

Widget konten(){
return Flexible(
child: isiKonten
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon([Link],),
onPressed: (){

}
),
elevation: 0,
title: Text('Sistem Informasi Presensi')
),
body:Row(
crossAxisAlignment: [Link],
children: <Widget>[
menuKiri(),
konten()
],
)
);
}

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

 Agung Sasongko, [Link] | Sistem Informasi

H. Import file [Link] di [Link]

Agar aplikasi dapat berjalan, maka gunakan Widget beranda di main dengan import file
[Link] ke file [Link]. Seperti code berikut:

import 'package:app_presensi/[Link]'; Tambahkan import ini

import 'package:flutter/[Link]';

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

class AppPresensi extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Presensi Online',
theme: ThemeData(
primaryColor: [Link]
),
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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link], isikan naskah sebagai berikut:

import 'package:flutter/[Link]';

class KaryawanScreen extends StatefulWidget {

@override
_KaryawanScreenState createState() => _KaryawanScreenState();
}

class _KaryawanScreenState extends State<KaryawanScreen> {

Widget item(int x){

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton:FloatingActionButton(),
body: Container()
);
}
}

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

 Agung Sasongko, [Link] | Sistem Informasi

Berikut Struktur desain tampilannya yang akan dibuat contoh sebagai berikut:

Gambar 3.17. Struktur tampilan Widget KaryawanScreen

B. Widget [Link]()
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)
)
),
],
);
}

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link]()
Modifikasi isi Widget build menjadi sebagai berikut:

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){

},
backgroundColor: [Link],
child: Icon(Icons.add_box)
),
body: Card(
margin: [Link](20),
child: Container(
padding: [Link](20),
child: Column(
mainAxisAlignment: [Link],
crossAxisAlignment: [Link],
children: <Widget>[
Text('Data Karyawan', style: TextStyle(fontSize: 20,
fontWeight: [Link])),
SizedBox(height: 10),
Expanded(
child: ListView(
children: [Link](100, (x){
return item(x);
})
)
)
],
)
)
)
);
}

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

 Agung Sasongko, [Link] | Sistem Informasi

D. Kode Lengkap [Link]

Berikut kode lengkap file [Link]

import 'package:app_presensi/form_karyawan.dart';
import 'package:flutter/[Link]';

class KaryawanScreen extends StatefulWidget {

@override
_KaryawanScreenState createState() => _KaryawanScreenState();
}

class _KaryawanScreenState extends State<KaryawanScreen> {

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)
)
),
],
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Container(
padding: [Link](50),
child: FloatingActionButton(
onPressed: (){

},
backgroundColor: [Link],
child: Icon(Icons.add_box)
),

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

 Agung Sasongko, [Link] | Sistem Informasi

),
body: Card(
margin: [Link](20),
child: Container(
padding: [Link](20),
child: Column(
mainAxisAlignment: [Link],
crossAxisAlignment: [Link],
children: <Widget>[
Text('Data Karyawan', style: TextStyle(fontSize: 20,
fontWeight: [Link])),
SizedBox(height: 10),
Expanded(
child: ListView(
children: [Link](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
[Link] pada bagian menuKiri di itemMenu karyawan:
Widget menuKiri(){
return new Container(
width: 200,
decoration: new BoxDecoration(
color: [Link],
boxShadow: <BoxShadow>[
BoxShadow(
color: [Link][300],
offset: Offset(3,2),
blurRadius: 10
)
]

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

 Agung Sasongko, [Link] | Sistem Informasi

),
child: ListView(
children: <Widget>[
itemMenu('Karyawan', (){
isiKonten = Text('Karyawan Screen'); /// ubah ini
setState(() {});
}),

Ubah perintah
isiKonten = Text(‘Karyawan Screen’);
menjadi perintah:
isiKonten = KaryawanScreen();
Contoh sebagai berikut:
itemMenu('Karyawan', (){
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
[Link] di header dokumen [Link], seperti contoh berikut:
import 'package:app_presensi/[Link]'; ///tambahkan import ini
import 'package:flutter/[Link]';

class Beranda extends StatefulWidget {

@override
_BerandaState createState() => _BerandaState();
}

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:

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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
-

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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
[Link] Atau menggunakan composer di project laravel
untuk mengunduhnya.

4.3. Pemasangan CORS di Laravel

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link]

Lakukan modifikasi pada isi file [Link] tersebut, ditambahkan perintah header(‘Access-
control-Allow-Origin, ‘*’), seperti contoh berikut:

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

 Agung Sasongko, [Link] | Sistem Informasi

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/[Link].

Gambar 4.4. File [Link]

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

 Agung Sasongko, [Link] | Sistem Informasi

Tambahkan nama file middleware /App/Http/Middleware/[Link] 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 [Link] di project Flutter.

Gambar 4.6. Buka file [Link]

Tambahkan baris : http: ^0.12.0+2

di bagian depedencies, contoh seperti berikut:

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

 Agung Sasongko, [Link] | Sistem Informasi

Gambar 4.7. Penambahan Plugin HTTP

Setelah itu simpan file, dan jalankan di terminal di direktori tempat file [Link]
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
[Link] tambahkan library dart:convert, [Link] dan variabel data.

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

 Agung Sasongko, [Link] | Sistem Informasi

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

b. Libaray [Link] = 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:flutter/[Link]';
import 'package:http/[Link]' as http;  tambahkan ini

class KaryawanScreen extends StatefulWidget {

@override
_KaryawanScreenState createState() => _KaryawanScreenState();
}

class _KaryawanScreenState extends State<KaryawanScreen> {

List data = new List(); tambahkan ini

d. Tambahkan method refresh seperti contoh berikut:

class KaryawanScreen extends StatefulWidget {

@override
_KaryawanScreenState createState() => _KaryawanScreenState();
}

class _KaryawanScreenState extends State<KaryawanScreen> {

List data = new List();

//Tambahkan method refresh seperti ini:

Future refresh()async{
final r = await [Link]('[Link]
data = [Link]([Link]);
setState(() {});
}

Penjelasan:
- [Link] 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.
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 81
 Agung Sasongko, [Link] | Sistem Informasi

- [Link] : perintah untuk konversi json string ke type List / Map. Nilai yang di
konversi adalah [Link], 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.

class _KaryawanScreenState extends State<KaryawanScreen> {

List data = new List();

Future refresh()async{
final r = await [Link]('[Link]
data = [Link]([Link]);
setState(() {});
}

@override
void initState() {
[Link]();
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:

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

 Agung Sasongko, [Link] | Sistem Informasi

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)
)
),
],
);
}

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: [Link]((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

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

 Agung Sasongko, [Link] | Sistem Informasi

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
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){
showDialog( context: context,
builder: (c)=>Dialog(
child: FormKaryawanScreen()
)
);
},
backgroundColor: [Link],
child: Icon(Icons.add_box)
),
body:Card(
margin: [Link](20),
child: Container(
padding: [Link](20),
child: Column(
mainAxisAlignment: [Link],
crossAxisAlignment: [Link],
children: <Widget>[
Text('Data Karyawan',
style: TextStyle(fontSize: 20, fontWeight: [Link])
),
SizedBox(height: 10),
listViewKaryawan()  gunakan widget listview di sini
],
)
)
)
);
}
Berikut kode lengkap dari file [Link]

import 'dart:convert';
import 'package:app_presensi/form_karyawan.dart';
import 'package:flutter/[Link]';
import 'package:http/[Link]' as http;

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

 Agung Sasongko, [Link] | Sistem Informasi

class KaryawanScreen extends StatefulWidget {

@override
_KaryawanScreenState createState() => _KaryawanScreenState();
}

class _KaryawanScreenState extends State<KaryawanScreen> {

List data = new List();

@override
void initState() {
[Link]();
refresh();
}

Future refresh()async{
final r = await [Link]('[Link]
data = [Link]([Link]);
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: [Link]((s){
return item(s);
}).toList()
),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Container(
padding: [Link](50),
child: FloatingActionButton(
onPressed: (){

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

 Agung Sasongko, [Link] | Sistem Informasi

showDialog(
context: context,
builder: (c)=>Dialog(
child: FormKaryawanScreen()
)
);
},
backgroundColor: [Link],
child: Icon(Icons.add_box)
),
),
body: Card(
margin: [Link](20),
child: Container(
padding: [Link](20),
child: Column(
mainAxisAlignment: [Link],
crossAxisAlignment: [Link],
children: <Widget>[
Text('Data Karyawan',
style: TextStyle(
fontSize: 20,
fontWeight: [Link]
)
),
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:

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

 Agung Sasongko, [Link] | Sistem Informasi

import 'package:flutter/[Link]';

class FormKaryawanScreen extends StatefulWidget {

@override
_FormKaryawanScreenState createState() => _FormKaryawanScreenState();
}

class _FormKaryawanScreenState extends State<FormKaryawanScreen> {

@override
Widget build(BuildContext context) {
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.
class _FormKaryawanScreenState extends State<FormKaryawanScreen> {
///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:

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

 Agung Sasongko, [Link] | Sistem Informasi

@override
Widget build(BuildContext context) {
return Container(
padding: [Link](20),
child: Column(
crossAxisAlignment: [Link],
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
Widget build(BuildContext context) {
return Container(
padding: [Link](20),

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

 Agung Sasongko, [Link] | Sistem Informasi

child: Column(
crossAxisAlignment: [Link],
children: <Widget>[
Text('Form Karyawan', style: TextStyle(fontSize: 20),),
Divider(),
inputText('NIP', txtNIP),
inputText('Nama', txtNama),
dropDownLevel('', (s){ /// digunakan seperti ini

}),
inputText('Sandi', txtSandi),
],
),
);
}

Untuk mendapatkan nilai perubahan pada Widget dropDownLevel maka diperlukan sebuah
variable global. Misalkan namanya adalah String level, seperti contoh beirkut:

class _FormKaryawanScreenState extends State<FormKaryawanScreen> {

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: [Link],
shape: RoundedRectangleBorder(borderRadius: [Link](10)),
child: Text('Kirim', style: TextStyle(color: [Link]),),
onPressed: (){

},
),
);
}

f. Gunakan Widget btnKirim

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

 Agung Sasongko, [Link] | Sistem Informasi

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

contoh berikut:
@override
Widget build(BuildContext context) {
return Container(
padding: [Link](20),
child: Column(
crossAxisAlignment: [Link],

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()  tambahakn widget ini disini
],

),
);
}

Simpan dan jalankan programnya, maka harusnya hasilnya seperti berikut:

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

 Agung Sasongko, [Link] | Sistem Informasi

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/[Link]’ as http; pada bagian header dokumen

[Link] seperti contoh berikut:

import 'package:http/[Link]' 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 [Link]('[Link] body: {
'nip' : [Link],
'nama' : [Link],
'sandi' : [Link],
'level' : level
});
//tampilkan debug untuk melihat hasil nilai balik yang diterim final r
print('isi dari r ${[Link]}');
}
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: [Link],
shape: RoundedRectangleBorder(borderRadius: [Link](10)),
child: Text('Kirim', style: TextStyle(color: [Link]),),

onPressed: (){
kirimData();  tambahkan ini disini
},
),

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

 Agung Sasongko, [Link] | Sistem Informasi

);
}

Berikut Sumber Kode Lengkap form_karyawan.dart

import 'package:flutter/[Link]';
import 'package:http/[Link]' 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 [Link]('[Link] body: {
'nip' : [Link],
'nama' : [Link],
'sandi' : [Link],
'level' : level
});
//debug untuk melihat hasil nilai balik yang diterim final r
print('isi dari r ${[Link]}');
}

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'),),
],
);
}

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

 Agung Sasongko, [Link] | Sistem Informasi

Widget btnKirim(){
return Center(
child: RaisedButton(
color: [Link],
shape: RoundedRectangleBorder(borderRadius: [Link](10)),
child: Text('Kirim', style: TextStyle(color: [Link]),),
onPressed: (){
kirimData();
},
),
);
}

@override
Widget build(BuildContext context) {
return Container(
padding: [Link](20),
child: Column(
crossAxisAlignment: [Link],
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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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:
- Bagian more : menampilkan popUpMenu dengan item:
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
pilih tombol “Ya” atau “Tidak”
 JIka dipilih tombol “Ya” maka melakukan operasi penghapusan data
di server dengan memanggil method DELETE ke route
/produk/hapus/{id}
- Menggunakan FloatActionButton yang berfungsi sebagai tombol untuk
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:
- Bagian more : menampilkan popUpMenu dengan item:
o Sunting data
 Bila dipilih akan menampilkan Form berisi isi data Penjualan yang
ingin di sunting.
o Hapus data

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

 Agung Sasongko, [Link] | Sistem Informasi

Bila dipilih akan menampilkan konfirmasi penghapusan data. Dengan

pilih tombol “Ya” atau “Tidak”
 JIka dipilih tombol “Ya” maka melakukan operasi penghapusan data
di server dengan memanggil method DELETE ke route
/penjualan/hapus/{id}
- Menggunakan FloatActionButton yang berfungsi sebagai tombol untuk
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 = [Link])
o TextField : Stok. (keyboardType = [Link])
o RaisedButton : Simpan
- Jika RaisedButton Simpan onPressed, maka melakukan proses pengiriman data ke
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
o RaisedButton : Simpan
- Jika RaisedButton Simpan onPressed, maka melakukan proses pengiriman data ke
server dengan method POST ke /penjualan/simpan

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

 Agung Sasongko, [Link] | Sistem Informasi

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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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:
[Link]['token'] = nilai;

5.4. Membuat Form Login

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

 Agung Sasongko, [Link] | Sistem Informasi

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/[Link]';

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: [Link](30),
child: Container(
padding: [Link](20),
child: Column(
children: <Widget>[
TextField(),
TextField(),
tombolLogin()
],
),
)
);
}

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

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

 Agung Sasongko, [Link] | Sistem Informasi

Widget formLogin(){
return Card(
margin: [Link](30),
child: Container(
padding: [Link](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() {
[Link]();
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: [Link]),),
color: [Link],
shape: RoundedRectangleBorder(borderRadius: [Link](30)),
onPressed: (){
login();
},
);
}
c. Susun di Widget build()

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link]('[Link] body:{
'nip' : [Link],
'sandi' : [Link]
});

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

e. Ganti Halaman Awal

Lihat pada file /lib/[Link]. disitu akan mendapati Widget pertama yang akan
ditampilkan adalah Beranda(), seperti pada kode berikut:

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

 Agung Sasongko, [Link] | Sistem Informasi

Modifikasi pada bagian home diatas, ubah dari Beranda menjadi LoginScreen(),
seperti pada contoh berikut:

import 'package:app_presensi/[Link]';
import 'package:flutter/[Link]';

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

class AppPresensi extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Presensi Online',
theme: ThemeData(
primaryColor: [Link]
),
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

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

 Agung Sasongko, [Link] | Sistem Informasi

Laravel dengan menambahkan method login di Laravel

/app/Http/controller/[Link] 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:

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

 Agung Sasongko, [Link] | Sistem Informasi

Kemudian Modifikasi file \Model\[Link] 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/[Link]:

Setelah melakukan tahapan diatas, lakukan pengujian terhadap login. Jangan lupa
menambahkan printah print untuk melihat hasil luaran dari [Link]
pengguna/login. Seperti contoh berikut

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

 Agung Sasongko, [Link] | Sistem Informasi

Future login()async{
final hasil = await [Link]('[Link]
body:{
'nip' : [Link],
'sandi' : [Link]
});
print('hasil login ${[Link]}'); //<--untuk melihat response dari server
final js = [Link]([Link]);
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
[Link]().Modifikasi method login() serta mencatat token yang
dikirim oleh server. Berikut contohnya :

Future login()async{
final hasil = await [Link]('[Link] body:{
'nip' : [Link],
'sandi' : [Link]
});
print('hasil login ${[Link]}'); //<--untuk melihat response dari server
final js = [Link]([Link]);

if(js['result'] == true){

//simpan token ke localstorage

[Link]['token'] = js['token'];
[Link]['pengguna'] = [Link](js['pengguna']);

//Ganti tampilan ke widget Beranda()

[Link](context, new MaterialPageRoute(
builder: (b)=>Beranda()
));

}else{
//perintah lakukan sesuatu login gagal
}
}

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

 Agung Sasongko, [Link] | Sistem Informasi

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: (){
[Link](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 [Link]('[Link] body:{
'nip' : [Link],
'sandi' : [Link]
});
print('hasil login ${[Link]}'); //<--untuk melihat response dari server
final js = [Link]([Link]);
if(js['result'] == true){
[Link]['token'] = js['token'];
[Link]['pengguna'] = [Link](js['pengguna']);

[Link](context, new MaterialPageRoute(

builder: (b)=>Beranda()
));

}else{
alert('Maaf, nip dan sandi anda tidak cocok di sistem kami');// alert kesalahan
}
}

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

 Agung Sasongko, [Link] | Sistem Informasi

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 = [Link]['token'];
final hasil = await [Link]('[Link]
body: { 'token' : token });

final js = [Link]([Link]);
if(js['result'] == true){
[Link](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() {
[Link]();
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:

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

 Agung Sasongko, [Link] | Sistem Informasi

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/[Link] 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.

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

 Agung Sasongko, [Link] | Sistem Informasi

Contoh perintah hard-coded:

final hasil = await [Link]('[Link] body: {

pada bagian '[Link] 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 = '[Link]
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';

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link](UrlAddress.URL_PENGGUNA_SIMPAN, body: {

'key' : '${kry['nip']}',
'nip' : [Link],
'nama' : [Link],
'sandi' : [Link],
'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

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

 Agung Sasongko, [Link] | Sistem Informasi

B. Modifikasi file middleware [Link] 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 [Link] dengan nama ‘otorisasi’ seperti contoh berikut di

bagian $routeMiddleware:

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

Future refresh()async{
///ambil informasi token yang tersimpan di localstorage
final token = [Link]['token'];

final r = await [Link](UrlAddress.URL_PENGGUNA_LISTDATA,

headers: { 'token' : token} ///gunakan token di headers
);
. . .
. . .
Keterangan:

- [Link][‘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/[Link] 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.

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

 Agung Sasongko, [Link] | Sistem Informasi

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

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

 Agung Sasongko, [Link] | Sistem Informasi

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 [Link],

seperti contoh berikut. Serta isikan file [Link] seperti contoh berikut:

Gambar 5.4 Isi file [Link]

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

 Agung Sasongko, [Link] | Sistem Informasi

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/[Link] pada method ::get(‘/’) diarahakan view ke [Link],

sepertin contoh berikut:

Nb*: Cukup ketikkan nama ‘index’ saja, tidak perlu ada [Link].

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. 

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

 Agung Sasongko, [Link] | Sistem Informasi

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 = ‘[Link]
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.

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

 Agung Sasongko, [Link] | Sistem Informasi

Pertemuan 6 – 9 Konsultasi Project Akhir

Pertemuan 10-16 Presentasi Project Akhir

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