Modul Web Programming 2 - repository.bsi.ac.idModul Web Programming 2 Oleh : Agung Sasongko, M.Kom Program Studi Sistem Informasi Fakultas Teknologi Informasi
Post on 11-Jul-2020
1 Views
Preview:
Transcript
Modul Web
Programming 2
Oleh : Agung Sasongko, M.Kom
Program Studi Sistem Informasi Fakultas Teknologi Informasi
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 2
Universitas Bina Sarana Informatika 2018
Daftar Isi
Pertemuan 1 ............................................................................................................................................... 4
1.1. Framework Web ......................................................................................................................... 4
1.2. Mengapa Laravel ........................................................................................................................ 5
1.3. Paket Aplikasi Pengembangan PHP ........................................................................................... 5
3.2. Mendaftarkan Direktori PHP ...................................................................................................... 8
3.3. Pemasangan Composer ............................................................................................................ 10
3.4. Pemasangan Laravel ................................................................................................................. 13
3.5. IDE Pengembangan Aplikasi Web ............................................................................................ 14
3.6. Aplikasi Presensi ....................................................................................................................... 17
3.7. Rancangan Database Presensi.................................................................................................. 18
3.8. Membuat Database Menggunakan Migration ........................................................................ 19
Tugas Rumah ........................................................................................................................................ 26
Pertemuan 2 ............................................................................................................................................. 28
2.1. Konsep MVC ............................................................................................................................. 28
2.2. Jenis-Jenis MVC ........................................................................................................................ 28
2.3. Model di Laravel ....................................................................................................................... 29
2.4. Membuat Model di Laravel ...................................................................................................... 29
2.5. Controller di Laravel ................................................................................................................. 35
2.6. Membuat Controller di Laravel ................................................................................................ 35
2.7. Mengatur Routing .................................................................................................................... 41
2.8. Pengujian .................................................................................................................................. 42
Latihan .................................................................................................................................................. 45
Tugas Rumah ........................................................................................................................................ 47
Pertemuan 3 ............................................................................................................................................. 49
3.1. Pengenalan Flutter ................................................................................................................... 49
3.2. Pemasangan Flutter SDK .......................................................................................................... 49
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 3
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 4
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,
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 5
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 6
Untuk penggunakan paket aplikasi pada praktik ini menggunakan paket aplikasi dari
XAMPP. Pada aplikasi XAMPP semua aplikasi Webserver, PHP dan database MariaDB
telah dibundle jadi satu sehingga memudahkan instalasi dan penggunaannya.
Untuk menggunakan Laravel pastikan menggunakan PHP 7 untuk hasil yang lebih
optimal. Langkah persiapan aplikasi XAMPP:
1. Unduh paket aplikasi website unduh resmi XAMPP di :
https://www.apachefriends.org/download.html
2. Pilih file installer sesuai dengan sistem operasi dan teknologi komputer yang
dimiliki.
a. Windows 64-bit : https://www.apachefriends.org/xampp-files/7.3.9/xampp-
windows-x64-7.3.9-0-VC15-installer.exe
b. Linux 64-bit: https://www.apachefriends.org/xampp-files/7.3.9/xampp-linux-
x64-7.3.9-0-installer.run
c. OS X : https://www.apachefriends.org/xampp-files/7.3.9/xampp-osx-7.3.9-0-
vm.dmg
3. Instalasi aplikasi XAMPP bila telah mengunduh installer diatas.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 7
Gambar 1.1. Pilih Paket yang diperlukan saja.
4. Jalankan XAMPP dan aktifkan terlebih dahulu service yang diperlukan.
*Service yaitu aplikasi yang berjalan dibelakang layar untuk melayani permintaan dan
meresepon hasil yang diperlukan.
Service yang dijalankan seperti:
a. Apache
Untuk menjadikan service persisten saat windows boot maka jalankan:
run as administrator command prompt. <direktori xampp>\apache\bin\httpd.exe –k install –n “apache php7”
Jalanlan di Run dialog: services.msc
- Cari service dengan nama “apache php7”, jalankan service ini dengan klik
tombol “Start”
b. MySQL Service
Untuk menjadikan service persisten saat Windows boot jalankan:
run as administrator command prompt. <direktori xampp>\mysql\bin\mysqld.exe –install “MySQL Services”
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 8
Jalanlan di Run dialog: services.msc
- Cari service dengan nama “MySQL Services”, jalankan service ini dengan klik
tombol “Start”
Bila berhasil langkah diatas cukup dilakukan sekali, maka setiap komputer boot
mulai maka kedua services diatas (apache dan MySQL sudah berjalan)
5. Cek Services Running.
Jalankan browser (Chrome / Firefox / Edge). Dan buka URL : http://localhost
Gambar 1.2. Apache telah berhasil running dengan baik.
3.2. Mendaftarkan Direktori PHP
Pembuatan aplikasi Laravel akan sering berinteraksi dengan akses command prompt.
Untuk itu kita harus terbiasa menggunakan CLI. Direktori kerja PHP harus didaftarkan pada
lingkungan sistem operasi, agar penulisan perintah di command prompt lebih ringkas tanpa
menuliskan alamat direktori kerja PHP. Berikut langkah mendaftarkan direktori PHP.
1. Buka Properties My Computer, dengan menekan kombinasi tombol:
[Windows] + Pause
2. Masuk ke “Advanced system settings”
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 9
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…”
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 10
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 11
Composer merupakan aplikasi pengelola kebutuhan library pada pemrograman PHP
modern. Untuk dapat menggunakan fitur ini maka composer harus dipasang terlebih dahulu.
Untuk memasang composer di lingkungan kerja PHP maka dapat dilakukan secara daring
melalui command prompt. Karena kita harus terbiasa melakukannya melalui command prompt,
maka ada banyknya mendaftarkan alamat direktori PHP pada lingkungan kerja sistem operasi.
1. Jalankan command prompt sebagai administrator
2. Masuk ke direktori kerja htdocs:
Gambar 1.6. Masuk direktori document root web.
3. Jalankan perintah berikut:
php –r “copy(‘http://getcomposer.org/installer’, ‘composer-setup.php’);”
Gambar 1.7. Mengunduh composer-setup.php
4. Jalankan composer-setup.php untuk pemasangan komposer di lingkungan kerja
PHP.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 12
Gambar 1.8 Pemasangan composer.
5. Composer yang telah sukses di pasang akan menjadi file composer.phar. bila
berhasil, maka hapus saja file composer-setup.php, karena tidak diperlukan lagi.
Del composer-setup.php
Gambar 1.9. Hapus composer-setup.php
6. Untuk kemudian menggunakan composer maka gunakan perintah:
php composer.phar <parameter>
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 13
3.4. Pemasangan Laravel
Pemasangan laravel atau membuat project baru di Laravel dapat dilakukan melalui
composer.phar. Namun sebelumnya pastikan telah memiliki file composer.phar dari
langkah sebelumnya yang harus dilakukan terlebih dahulu. Untuk melakukan langkah
ini, pastikan komputer dalam keadaan daring Internet.
Jalankan perintah berikut melalui Command Prompt di direktori kerja c:\xampp\htdocs
dimana file composer.phar berada: php composer.phar create-project -–prefer-dist laravel/laravel presensi
Contoh seperti berikut:
Gambar 1.10. Membuat project “Presensi” di Laravel
Keterangan:
- parameter create-project : perintah composer untuk membuat project baru
- parameter --prefer-dist laravel/laravel : mengunduh distribusi terbaru dari laravel
- parameter Presensi : nama project yang akan dibuat.
Untuk melihat hasil unduhan project Laravel dapat kita lihat pada direktori presensi.
Gambar 1.11. File project Laravel Presensi
Selanjutnya uji apakah aplikasi sudah dapat di jalankan melalui browser?
Jalankan browser, buka alamat: http://localhost/presensi/public
Bila benar, maka seharunya akan tampil seperti gambar berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 14
Gambar 1.12. Project Awal Laravel
3.5. IDE Pengembangan Aplikasi Web
IDE (Interface Development Environment) atau Lingkungan Pengembangan Terpadu
dalam pembangunan suatu perangkat lunak perlu digunakan untuk memudahkan dalam
kegiatan penulisan kode program, debugging hingga production. Pada pembangunan
aplikasi web dapat menggunakan berbagai jenis pilihan perangkat lunak IDE. Seperti:
Notepad, Notepad++, Sublime, DreamWeaver, VisualStudio Code, PHPStorm dan lain
sebagainya.
Untuk memudahkan pengembangan baiknya menggunakan IDE yang memiliki fitur fitur
Snippets / intellisense, yaitu fitur menampilkan cuplikan saran kode yang dapat
dilanjutkan setiap kode perintah Laravel yang hendak dituliskan, sehingga memudahkan
penulisan kode secara guidelines. Contoh IDE yang dapat digunakan untuk memudahkan
pengkodean adalah Visual Studio Code (VSCode) di
https://code.visualstudio.com/download# Pilih sesuai Sistem operasi dan arsitektur
prosesor komputer yang digunakan. IDE ini dikembangkan oleh komunitas dari
Microsoft, dapat dijadikan menjadi IDE yang bermacam-macam sesuai plugins yang
dipasang. IDE ini termasuk dapat dikatakan powerful dan yang terpenting gratis.
Pilihan lain IDE yang pintar adalah PHPStorm dari JetBrains yang dapat di unduh di
https://www.jetbrains.com/phpstorm/download/#section=windows. Namun karena
sifatnya berbayar, kita tidak dapat menggunakannya secara bebas, tapi dapat
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 15
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:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 16
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 17
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 18
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 19
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:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 20
Gambar 1.16. Konfigurasi Database di .env
Karena menggunakan database mariaDB atau mySQL maka isikan
DB_CONNECTION=mysql. DB_HOST=127.0.0.1 adalah alamat loop komputer local. Dan
untuk nama databasenya adalah db_presensi. DB_USERNAME=root ini bawaanya saat
instalasi mysql yang tidak dilakukan banyak perubahan. Begitu juga password yang
bawaannya adalah kosong.
Setelah itu masuk ke Terminal pada VSCode seperti pada gambar berikut:
Gambar 1.17. Membuat menu terminal
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 21
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 22
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/
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 23
<?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:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 24
<?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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 25
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 26
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 27
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 28
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 29
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 30
Perintah diatas harus dijalankan di satu path di project Laravel yang memiliki file
Artisan. Perintah ini akan menciptakan sebuah File yang berada di Folder:
app\Model dengan nama Pengguna.php.
Buka file Model\Pengguna.php, maka isinya telah di generate contoh sebagai
berikut:
Gambar 2.3. Hasil Generate Model\Pengguna.php
2) Definisikan tabel yang dikelola pada Model\Pengguna
Untuk mendefinisikan nama tabel yang digunakan tambahkan variabel
protected $table = ‘nama_tabel’; di dalam class Pengguna. Contoh seperti
berikut:
<?php
namespace App\Model;
use Illuminate\Database\Eloquent\Model;
class Pengguna extends Model
{
protected $table = 'pengguna';
}
3) Nonaktifkan field CREATED_AT dan UPDATED_AT
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 31
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 32
Lakukan langkah yang sama seperti pada poin a. diatas pembuatan Model
Pengguna.
1) Jalankan perintah berikut di terminal:
php artisan make:model Model\PetaKehadiran
Gambar 2.4. Pembuatan Artisan Model PetaKehadiran di Termianl
Operasi perintah diatas akan menghasilkan file baru yang berada di folder:
app\Model dengan nama file PetaKehadiran.php, seperti pada gambar berikut:
Gambar 2.5. Hasil Generate Artisan PetaKehadiran.php
2) Definisikan tabel yang dikelola pada Model\PetaKehadiran
Modifikasi file Model\PetaKehadiran.php menjadi sebagai berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 33
<?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\PetaKehadiran.php 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:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 34
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;
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 35
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 36
Gambar 2.8. Pembuatan Controller Pengguna
Pada langkah ini, akan dibuatkan sebuah file Controller Pengguna.php yang berada di
folder app\http\Controllers.
Gambar 2.9. File Hasil Generate Controller Pengguna.php
Buka file Pengguna.php dan lihat isinya.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 37
Gambar 2.10. Isi Generate Controller.
Sampai disini langkah selanjutnya adalah membuat method / blok kode program
yang bertugas sebagai pengendali komunikasi antara model mapun pada class
lainnya.
1) Membuat method lihatData()
Method ini nantinya dibuat untuk tujuan mendapatkan semua data yang ada di
tabel Pengguna. Modifikasi file controller Pengguna.php menjadi berikut:
<?php
namespace App\Http\Controllers;
use App\Model\Pengguna as PenggunaModel;
use Illuminate\Http\Request;
class Pengguna extends Controller
{
public function lihatData()
{
$r = PenggunaModel::get();
return ['count'=>$r->count(), 'data'=>$r];
}
}
Pada kode blok method lihatdata diatas logik yang berjalan adalah:
- Dapatkan semua record dari model Pengguna dan disimpan ke variabel $r
$r = PenggunaModel::get()
- Return (kembalikan) nilai :
‘count’ => $r->count : total data
‘data’ => $r : data dalam bentuk array / larik
Bila diamati pada bagian atas dokumen controller Pengguna, terdapat baris:
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 38
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,
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 39
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:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 40
<?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()
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 41
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 42
Routing merupakan cara Laravel untuk menentukan arah Request dari client akan
diteruskan. Routing pada Laravel berada di folder /routes dan di dalam file web.php.
Gambar 2.10. Lokasi file route web.php
File /route/web.php berisikan jenis method permintaan dari client dan kemana arah
jalur selanjutnya. Untuk menguji apakah controller yang telah dibuat pada langkah
sebelumnya bekerja, lakukan modifikasi isi file web.php menjadi sebagai berikut:
<?php
Route::get('/pengguna/list-data', 'Pengguna@lihatData');
Route::get('/pengguna/ambil-data/{nip}', 'Pengguna@ambilData');
Route::post('pengguna/simpan', 'Pengguna@simpanData');
Route::delete('pengguna/hapus/{nip}', 'Pengguna@hapusData');
Rute URL Nama Controller Nama method
Jenis method request client
Parameter request
2.8. Pengujian
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 43
Pengujian request dan response dari aplikasi yang telah dituliskan diatas dapat
menggunakan tools seperti aplikasi Postman, yang dapat unduh di :
https://www.getpostman.com/downloads/
Berikut tampilan aplikasi PostMan
Gambar 2.11. Tampilan Aplikasi PostMan.
Aplikasi Postman dapat dimanfaatkan untuk melakukan pengujian terhadap aplikasi
web, apakah sudah sesuai dengan harapan antara request dilakukan dan response yang
diihasilkan. Setiap aplikasi yang telah ditulis kode programnya, baiknya harus di uji satu
persatu. Untuk memastikan ketika di integrasikan pada sistem yang lebih besar tidak
banyak kendala yang nantinya ditemukan.
Pengujian yang dilakukan pada tahapan ini yaitu balckbox testing. Yaitu menguji fitur /
unit yang ada berdasarkan masukan (input) dan luaran (output), apakah sesuai dengan
harapan atau tidak. Berikut item list pengujian yang akan dilakukan:
Tabel 2.1. Pengujian Blackbox Testing
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 44
Test ID
Nama Test Deskripsi Langkah Pengujian Hasil yang diharapkan
Hasil
TC01 Request GET ‘/pengguna/list-data’
Meminta data pengguna dari server
Mengirimkan method GET ke URL : http://localhost:8000/pengguna/list-data
Menampilkan format json data pengguna
TC02 Request POST ‘pengguna/simpan’
Menyimpan data ke tabel pengguna
Mengirimkan data method POST sebagai berikut: ‘nip’ = 2019010101 ‘nama’ = Eko Priyono ‘level’ = ‘A’ ‘sandi’ = ‘ekoeko’ Ke url : http://localhost:8000/pengguna/simpan
Format json {result:true}
TC03 Request GET ke ‘/pengguna/ambil/2019010101’
Meminta data dengan nip: ‘2019010101’
Mengirimkan data method GET ke url: http://localhost:8000/pengguna/ambil-data/2019010101
Tampil format json data pengguna dengan nip 2019010101
TC04 Request DELETE ke ‘/pengguna/hapus/2019010101
Menghapus data dari tabel pengguna dengan nip ‘2019010101’
Mengirimkan data method DELETE ke url: http://localhost:8000/pengguna/hapus/2019010101
{result:true]
Untuk melakukan pengujian method GET, maka buka aplikasi Postman.
1. Klik baru
Gambar 2.12. Pengujian Baru
2. Tentukan Method Request, isi URL dan klik send
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 45
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 46
Tanyakan kepada dosen anda bila mengalami kesulitan.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 47
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()
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 48
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’
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 49
Pertemuan 3 Target:
9. Instalasi Flutter SDK Channel Master
10. Membuat Project Flutter
11. Membuat Tampilan Dashboard di Flutter
3.1. Pengenalan Flutter
Flutter merupakan framework aplikasi bersifat kode sumber terbuka yang dibuat oleh
Google. Flutter tujuan awalnya untuk pengembangan aplikasi mobile seperti Android,
Fuchsia dan iOS. Namun saat ini Flutter telah mengalami banyak pengembangan, bukan
hanya sekedar untuk pembuatan aplikasi mobile saja, namun telah dikembangkan untuk
pembuatan aplikasi berbasis web maupun desktop.
Flutter pertama kali di rilis pada Mei 2017 dengan versi alpha 0.0.6 dan rilis preview 1
pada 17 Juni 2018. Flutter dikembangkan menggunakan C, C++ dan bahasa Dart. Flutter
menjad framework pembuatan antarmuka yang lebih mudah dan menarik. Sekali
penulisan kode, antarmuka dapat diimplementasikan baik di Android, iOS, web maupun
aplikasi desktop.
3.2. Pemasangan Flutter SDK
Yang harus dilakukan adalah mengunduh Flutter SDK yang diperlukan di:
a. Windows: https://flutter.dev/docs/get-started/install/windows.
b. Mac Os : https://flutter.dev/docs/get-started/install/macos
c. Linux : https://flutter.dev/docs/get-started/install/linux
Setelah file Flutter SDK telah di unduh, ekstrak paket file ke direktori yang diinginkan.
Misalkan disini contohnya ekstrak di D:\Flutter_sdk\. atau sesuaikan saja direktori yang
anda sukai.
Setelah flutter SDK telah terpasang di komputer, lakukan pendaftaran direktori /bin ke
Environment Variables.
Contoh seperti pada gambar berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 50
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 51
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 52
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 53
Apabila project berhasil dibuka maka struktur direktorinya terdiri dari sebagai berikut:
Gambar 3.7. Folder Kerja Project Flutter
Bila diamati terdapat beberapa folder, diantaranya:
a. /android : berisikan project Android. Bila ingin mengembangkan aplikasi Android,
maka kita akan melakukan manajemen isi file di folder ini.
b. /ios : berisikan project iOS. Lakukan pengelolaan folder ini melalui aplikasi XCode di
MacOS untuk dapat deploy menjadi aplikasi iOS.
c. /lib : isi folder sumber kode program yang akan kita tuliskan.
d. /test : untuk pengujian unit testing class pada program yang telah ditulis.
e. /web : berisikan project Web.
Pastikan folder /web ada disini, untuk memastikan bahwa Flutter yang digunakan bisa
menjalankannya menjadi aplikasi web.
Beberapa file yang menjadi perhatian kita nantinya adalah:
Pubspec.yaml : ini merupakan pengendali kebutuhan library dari luar yang ingin
digunakan pada aplikasi yang sedang akan dikembangkan. Untuk menggunakannya
pastinkan komputer dalam keadaan dalam jaringan internet untuk mengunduh setiap
library dari luar.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 54
3.5. Instalasi Paket Extension Flutter di VSCode
Untuk mempermudah penulisan kode program, sebaiknya kita memasang beberapa
Extention yang disediakan di VSCode. Pasanglah beberapa extention sebagai berikut:
Gambar 3.8. Pemasangan Extention Flutter di VSCode
Extention diatas bertujuan untuk memudahkan penulisan kode program Flutter.
3.6. Pembuatan Tampilan
Memulai pembuatan tampilan program, naskah dituliskan di entry point. Entry point
merupakan tempat dimana alur prgram pertama dimulai. Entry Point pada Flutter atau
bahasa pemrograman Dart dimulai di file /lib/main.dart. subroutine yang pertama di
jalankan adalah main().
Bukalah file main.dart yang ada di folder /lib. Kosongkan semua isinya, dan tuliskan kode
program sebagai berikut:
main.dart
import 'package:flutter/material.dart';
main()=>runApp(AppPresensi());
class AppPresensi extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
);
}
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 55
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/material.dart';
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 56
Konsep penulisan program di Flutter untuk membuat tampilan yaitu dapat berupa setiap
tampilan dibuatkan sebuah file class baik StatelessWidget ataupun StatefulWidget.
Perbedaan keduanya adalah sebagai berikut:
o StatelessWidget : untuk bentuk tampilan yang tidak mengalami perubahan,
keadaan dan bersifat statis.
o StatefulWidget : untuk bentuk tampilan yang dapat terjadi perubahan bentuk
maupun keadaan tampilan, seperti perubahan warna, perubahan isi teks,
perubahan gerak dan lain sebagainya.
b. Memulai Praktik Pembuatan Program
A. Buat main.dart sebagai berikut:
import 'package:flutter/material.dart';
main()=>runApp(new AppPresensi());
class AppPresensi extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Presensi Online',
theme: ThemeData(
primaryColor: Colors.green
),
home: Beranda()
);
}
}
Penjelasan Kode:
- Kode program diatas akan memulai aplikasi dengan menampilkan Widget
AppPresensi.
- Widget AppPresensi membuat Widget berupa MaterialApp dengan konfigurasi warna
utama tema adalah warna hijau, serta Widget yang digunakan adalah Beranda
- Widget Beranda() belum dibuat, maka harus dibuat selanjutnya.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 57
B. Membuat Desain Widget Beranda
Selanjutnya buat file beranda.dart di direktori /lib. Isikan kode program berikut:
Desain tampilan Widget beranda yang akan dibuat yaitu sebagai berikut:
Gambar 3.10 Rancangan Tampilan Widget Beranda
C. Membuat kerangka Program Widget Beranda
Berikut kerangka kode program yang kita siapkan tuliskan:
import 'package:flutter/material.dart';
class Beranda extends StatefulWidget {
@override
_BerandaState createState() => _BerandaState();
}
class _BerandaState extends State<Beranda> {
Widget konten(){
}
Widget itemMenu(String label, VoidCallback onTap ){
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 58
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/material.dart';
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 59
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: EdgeInsets.all(0),
child: ListTile(
onTap:onTap,
leading: new Icon( Icons.list ),
title: new Text('$label')
)
);
} Penjelasan:
itemMenu akan memproduksi Widget Card().
- Isi / child dari Card adalah : Widget ListTile()
- ListTile parameter yang digunakan yaitu:
o onTap : merupakan callback sebagai event untuk meneripa response ketika widget
di klik. Bagian ini diisikan dari parameter onTap agar penggunaannya dapat
menjadi luas.
o Leading : merupakan bidang bagian kiri widget ListTile(), yang pada umumnya
digunaakn utnuk menampilkan Widget gambar / icon.
o Title : merupakan bidang judul / isi teks dari widget ListTile().
Berikut struktur dari widget itemMenu:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 60
Gambar 3.11. Ilstrasi Stukrur widget Beranda.itemMenu
F. Widget menuKiri
Sebagai bagian kiri tampilan yang menampilkan menu dengan menggunakan Widget
itemMenu. Isikan Widget menuKiri() menjadi sebagai berikut:
Widget menuKiri(){
return new Container(
width: 200,
child: ListView(
children: <Widget>[
itemMenu('Karyawan', (){
isiKonten = Text('Karyawan Screen');
setState(() {});
}),
itemMenu('Peta Presensi', (){
isiKonten = Text(Peta Presensi Screen');
setState(() {});
}),
itemMenu('Presensi Harian', (){
isiKonten = Text(Presensi Harian Screen');
setState(() {});
})
],
)
);
}
Penjelasan:
Widget menuKiri akan memproduksi Widget Container() dengan lebar 200, isi dari
Container adalah Widget ListView(). Di ListView menampilkan widget-widget itemMenu
diantaranya untuk menu: Karyawan. Peta Presensi dan Presensi Harian.
Widget ListView() merupakan widget untuk menampilkan widget-widget yang tersusun baik secara
horizontal atau vertical. Widget ini akan membuat tampilan dapat di Scroll bila widget yang harus
ditampilkan melebihi dari ukuran layar.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 61
Berikut ilustrasi struktur Widget menuKiri()
Gambar 3.12. Ilustrasi Struktur Widget Beranda.menuKiri()
G. Susun semua widget di Widget build
Setelah semua widget telah dipersiapkan, maka susun di Widget build seperti code
berikut:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.list,),
onPressed: (){
}
),
elevation: 0,
title: Text('Sistem Informasi Presensi')
),
body:Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
menuKiri(),
konten()
],
)
);
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 62
Berikut ilustrasi struktur kode build diatas:
Gambar 3.13. Ilustrsasi Struktur Widget Beranda.build
Berikut kode lengkap dari file beranda.dart
import 'package:flutter/material.dart';
class Beranda extends StatefulWidget {
@override
_BerandaState createState() => _BerandaState();
}
class _BerandaState extends State<Beranda> {
Widget isiKonten;
bool sembunyi = false;
@override
void initState() { super.initState(); isiKonten = Text('Selamat datang');
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 63
Widget itemMenu(String label, VoidCallback onTap ){
return new Card(
elevation: 0, /// hilangkan banyangan widget Card
margin: EdgeInsets.all(0),
child: ListTile(
onTap:onTap,
leading: new Icon( Icons.list ),
title: new Text('$label')
)
);
}
Widget menuKiri(){
return new Container(
width: 200,
decoration: new BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
///buat bayangan di meru kiri
BoxShadow(
color: Colors.grey[300],
offset: Offset(3,2),
blurRadius: 10
)
]
),
child: ListView(
children: <Widget>[
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(() {});
})
],
)
);
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 64
Widget konten(){
return Flexible(
child: isiKonten
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.list,),
onPressed: (){
}
),
elevation: 0,
title: Text('Sistem Informasi Presensi')
),
body:Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
menuKiri(),
konten()
],
)
);
}
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 65
H. Import file beranda.dart di main.dart
Agar aplikasi dapat berjalan, maka gunakan Widget beranda di main dengan import file
beranda.dart ke file main.dart. Seperti code berikut:
import 'package:app_presensi/beranda.dart'; Tambahkan import ini
import 'package:flutter/material.dart';
main()=>runApp(new AppPresensi());
class AppPresensi extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Presensi Online',
theme: ThemeData(
primaryColor: Colors.green
),
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 66
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 67
3.7. Membuat Page Halaman
Pada bagian ini, praktik ini akan membahas pembuatan halaman-halaman lainnya.
Berikut akan dibuatkan halaman untuk Karyawan, Peta Presensi dan Presensi Harian.
A. Widget KaryawanScreen
Halaman Karyawan yang akan dibuat nantinya memiliki ListView untuk menampilkan
item data, serta FloatActionButton untuk membuka form pengisian data.
Buat file di /lib dengan nama karyawan.dart, isikan naskah sebagai berikut:
import 'package:flutter/material.dart';
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()
);
}
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 68
Berikut Struktur desain tampilannya yang akan dibuat contoh sebagai berikut:
Gambar 3.17. Struktur tampilan Widget KaryawanScreen
B. Widget KaryawanScreen.item()
Widget ini digunakan untuk menampilkan data di listview. Isikan blok Widget item(int x)
sebagai berikut:
Widget item(int x){
return Column(
children: <Widget>[
Card(
elevation: 0.0,
child: ListTile(
onTap: (){
} ,
title: Text('isi daftar karyawan ke $x'),
subtitle: Text('subtitle isi $x'),
leading: Icon(Icons.supervised_user_circle)
)
),
],
);
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 69
Penjelasan:
- Widget item(int x):
o Parameter : int x = sebagai masukan berupa informasi index data.
o Widget item akan memproduksi Widget Column yang isinya berupa Widget
Card dengan isi berupa Listtile().
C. Widget KaryawanScreen.build()
Modifikasi isi Widget build menjadi sebagai berikut:
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){
},
backgroundColor: Colors.pink,
child: Icon(Icons.add_box)
),
body: Card(
margin: EdgeInsets.all(20),
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Data Karyawan', style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold)),
SizedBox(height: 10),
Expanded(
child: ListView(
children: List.generate(100, (x){
return item(x);
})
)
)
],
)
)
)
);
}
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 70
D. Kode Lengkap karyawan.dart
Berikut kode lengkap file karyawan.dart
import 'package:app_presensi/form_karyawan.dart';
import 'package:flutter/material.dart';
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: EdgeInsets.all(50),
child: FloatingActionButton(
onPressed: (){
},
backgroundColor: Colors.pink,
child: Icon(Icons.add_box)
),
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 71
),
body: Card(
margin: EdgeInsets.all(20),
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Data Karyawan', style: TextStyle(fontSize: 20,
fontWeight: FontWeight.bold)),
SizedBox(height: 10),
Expanded(
child: ListView(
children: List.generate(100, (x){
return item(x);
})
)
)
],
)
)
)
);
}
}
3.8. Menghubungkan ke Beranda
Untuk melihat hasil Widget KaryawanScreen, maka kita harus gunakan. Gunakan Widget
KaryawanScreen ketika menu Karyawan di halaman beranda di klik. Modifikasi file
beranda.dart pada bagian menuKiri di itemMenu karyawan:
Widget menuKiri(){
return new Container(
width: 200,
decoration: new BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey[300],
offset: Offset(3,2),
blurRadius: 10
)
]
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 72
),
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
karyawan.dart di header dokumen beranda.dart, seperti contoh berikut:
import 'package:app_presensi/karyawan.dart'; ///tambahkan import ini
import 'package:flutter/material.dart';
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:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 73
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 74
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
-
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 75
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 76
akan dijalankan tanpa menunggu proses didalamnya selesai, dikarenakan dilakukan secara
tidak singkron. Namun nilai baliknya di kirimkan melalui then pada waktu yang tidak dapat
ditentukan.
Namun perintah async boleh ditunggu didalam proses async dengan menggunakan
perintah await, contoh seperti berikut:
Future loadData()async{
///perintah ambil data dari server
return hasil;
}
Future proses()async{
final h = await loadData();
} Contoh daitas proses adalah method async yang menjalankan loadData async, sehingga
boleh ditunggu dengan menggunakan await, dan hasilnya dapat langsung didapatkan oleh
variabel assignment yaitu pada contoh diatas adalah variabel h. Dengan cara seperti ini
penulisan kode menjadi lebih ringkas karena tidak perlu menggunakan then.
4.2. Cross-Origin Resource Sharing (CORS)
CORS merupakan suatu mekanisme pada browser untuk memberi tahu ke aplikasi web
bahwa sumber daya yang digunakan diluar dari domain dimana aplikasi berasal. Pada
umumnya browser akan mencegah bila sumber data bukan berasal dari domain dimana
aplikasi berasal. Karena pada aplikasi Flutter web adalah berbasis web, dalam
implementasinya harus dijalankan melalui browser dan bisa saja aplikasi harus diletakkan
diluar domain sumber data maka CORS menjadi salah satu kendala terhalangnya
komunikasi data aplikasi ke server. Oleh karena itu pada program sisi server perlu
diaktifkan izin untuk memberikan pelayanan data walaupun berada diluar sumberdayanya.
Framework Laravel tersedia plugin middleware untuk CORS. Plugins ini bisa didapatkan di
https://github.com/barryvdh/laravel-cors. Atau menggunakan composer di project laravel
untuk mengunduhnya.
4.3. Pemasangan CORS di Laravel
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 77
Untuk pembuatan CORS di Laravel, dapat menggunakan Middleware agar aplikasi Laravel
melayani request dari Client dengan memberikan header ‘Access-Control-Allow-Origin’.
Langkah pembuatannya, siapkan Middleware di Laravel yang kita beri nama ‘Cors’.
Jalankan perintah pembuatan aritsan make:middleware di Terminal seperti contoh berikut:
php artisan make:middleware Cors
Gambar 4.1. Pembuatan Middleware Cors
File Middleware akan terbentuk di direktori /app/http/middleware. Seperti pada gambar
berikut:
Gambar 4.2. File Middleware Cors.php
Lakukan modifikasi pada isi file Cors.php tersebut, ditambahkan perintah header(‘Access-
control-Allow-Origin, ‘*’), seperti contoh berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 78
Gambar 4.3 Penambahan Header CORS
Setelah ditambahkan header seperti contoh diatas, simpan dan gunakan middleware Cors
di project Laravel. Untuk menggunakan middleware, lakukan modifikasi di file
/app/Http/Kernel.php.
Gambar 4.4. File Kernel.php
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 79
Tambahkan nama file middleware /App/Http/Middleware/Cors.php di kelompok array
$middleware seperti contoh berikut:
Gambar 4.5. Penggunaan Middleware Cors.
4.4. Pemasangan Plugin http di Flutter
Plugin http di flutter diperlukan sebagai library untuk komunikasi data antara aplikasi ke
server. Untuk mengaktifkan plugin ini, buka file pubspec.yaml di project Flutter.
Gambar 4.6. Buka file pubspec.yaml
Tambahkan baris : http: ^0.12.0+2
di bagian depedencies, contoh seperti berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 80
Gambar 4.7. Penambahan Plugin HTTP
Setelah itu simpan file, dan jalankan di terminal di direktori tempat file pubspec.yaml
berada:
flutter pub get
Contoh seperti gambar berikut:
Gambar 4.8 Menjalankan perintah pub get.
Pastikan komputer sedang dalam jaringan internet, karena perintah diatas bertujuan untuk
melakukan pengunduhan dari server dart plugins.
4.5. Pengambilan data dari Server
Sebagai contoh praktik kali ini, akan menggunakan KaryawanScreen. buka file
karyawan.dart tambahkan library dart:convert, http.dart dan variabel data.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 81
a. Libray dart:convert = untuk menggunakan perintah konversi data format json
b. Libaray http.dart = untuk menggunakan library http yang berfungsi sebagai alat
komunikasi antara client dan server.
c. Variabel List data = sebagai variabel global untuk menampung data yang didapat dari
server.
import 'dart:convert'; tambahkan ini
import 'package:app_presensi/form_karyawan.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' 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 http.get('http://127.0.0.1:8000/pengguna/list-data');
data = json.decode(r.body);
setState(() {});
}
Penjelasan:
- http.get adalah perintah untuk request data ke alamat yang dituju, method yang
digunakan adalah get. Perintah ini adalah perintah hambatan yang menghasilkan
nilai balik untuk waktu yang tidak dapat dipastikan, sehingga gunakan await untuk
menunggu hasilnya yang kemudian di berikan kepada variabel r.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 82
- json.decode : perintah untuk konversi json string ke type List / Map. Nilai yang di
konversi adalah r.body, yang merupakan nilai balik dari hasil permintaan dari
server.
- setState((){}); : perintah ini digunakan untuk membuat tampilan di render ulang.
e. Panggil refresh
Panggil method refresh di bagian initState(). Tujuannya agar perintah refresh berjalan
setiap kali widget KaryawanScreen ditampilkan.
class _KaryawanScreenState extends State<KaryawanScreen> {
List data = new List();
Future refresh()async{
final r = await http.get('http://127.0.0.1:8000/pengguna/list-data');
data = json.decode(r.body);
setState(() {});
}
@override
void initState() {
super.initState();
refresh(); tambahkan ini
}
f. Widget item()
Widget item sebelumnya dibuat untuk menampilkan test tampilan, contoh berikut
Widget item untuk menampilkan data berupa isi dari “nip” dan “nama”. Contoh seperti
berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 83
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: data.map((s){
return item(s);
}).toList()
),
);
}
h. Widget build()
Pada pertemuan 3, widget build dibuat untuk menampilkan item listview yang dibuat
secara generate. Para praktikum kali ini, sekenario program yang akan dibuat adalah
selain menampilkan data karyawan di listview, juga kita berikan aksi pada tombol
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 84
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: Colors.pink,
child: Icon(Icons.add_box)
),
body:Card(
margin: EdgeInsets.all(20),
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Data Karyawan',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)
),
SizedBox(height: 10),
listViewKaryawan() gunakan widget listview di sini
],
)
)
)
);
}
Berikut kode lengkap dari file karyawan.dart
import 'dart:convert'; import 'package:app_presensi/form_karyawan.dart'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http;
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 85
class KaryawanScreen extends StatefulWidget { @override _KaryawanScreenState createState() => _KaryawanScreenState(); } class _KaryawanScreenState extends State<KaryawanScreen> { List data = new List(); @override void initState() { super.initState(); refresh(); } Future refresh()async{ final r = await http.get('http://127.0.0.1:8000/pengguna/list-data'); data = json.decode(r.body); setState(() {}); } Widget item(dynamic s){ return Column( children: <Widget>[ Card( elevation: 0.0, child: ListTile( onTap: (){ } , title: Text('${s['nama']}'), subtitle: Text('${s['nip']}'), leading: Icon(Icons.supervised_user_circle) ) ), ], ); } Widget listViewKaryawan(){ //Expanded digunakan pada Listview yang ingin diletakkan di dalam column / row return Expanded( child: ListView( children: data.map((s){ return item(s); }).toList() ), ); } @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: Container( padding: EdgeInsets.all(50), child: FloatingActionButton( onPressed: (){
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 86
showDialog( context: context, builder: (c)=>Dialog( child: FormKaryawanScreen() ) ); }, backgroundColor: Colors.pink, child: Icon(Icons.add_box) ), ), body: Card( margin: EdgeInsets.all(20), child: Container( padding: EdgeInsets.all(20), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Data Karyawan', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold ) ), SizedBox(height: 10), listViewKaryawan() ], ) ) ) ); } }
4.6. Widget FormKaryawanScreen
Pada contoh berikut akan membuat Form untuk pengisian data. Langkah pertama yang
harus disiapkan adalah tampilan Form pengisian data. Buatlah sebuah file dengan nama
form_karyawan.dart, seperti contoh berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 87
import 'package:flutter/material.dart';
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:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 88
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Form Karyawan', style: TextStyle(fontSize: 20),),
Divider(),
inputText('NIP', txtNIP),
inputText('Nama', txtNama),
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: EdgeInsets.all(20),
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 89
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
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: Colors.red,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Text('Kirim', style: TextStyle(color: Colors.white),),
onPressed: (){
},
),
);
}
f. Gunakan Widget btnKirim
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 90
Untuk menggunakan Widget btnKirim() dapat dituliskan di Widget build seperti
contoh berikut:
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Form Karyawan', style: TextStyle(fontSize: 20),),
Divider(),
inputText('NIP', txtNIP),
inputText('Nama', txtNama),
dropDownLevel('$level', (s){
setState(() {
level = s;
});
}),
inputText('Sandi', txtSandi),
SizedBox(height: 30,), ///<-- sebagai jarak textfield dengan button
btnKirim() tambahakn widget ini disini
],
),
);
}
Simpan dan jalankan programnya, maka harusnya hasilnya seperti berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 91
Gambar 4.10. Tampilan Form Karyawan dan Tombol Kirim
4.7. Pengiriman data ke Server
Untuk menyimpan maupun melakukan sunting data, maka perlu dilakukan operasi
pengiriman data ke server. Berikut langkahnya:
a. Buat method Future kirimData()async di class _FormKaryawanScreenState
Future kirimData()async{
}
b. Tambahkan import ‘package:http/http.dart’ as http; pada bagian header dokumen
karyawan.dart seperti contoh berikut:
import 'package:http/http.dart' as http;
c. Perintah pengiriman data
Isi method kirimData() dengan perintah pengiriman data ke /pengguna/simpan
dengan method post. Seperti contoh berikut:
Future kirimData()async{ final r = await http.post('http://127.0.0.1:8000/pengguna/simpan', body: { 'nip' : txtNIP.text, 'nama' : txtNama.text, 'sandi' : txtSandi.text, 'level' : level }); //tampilkan debug untuk melihat hasil nilai balik yang diterim final r print('isi dari r ${r.body}'); }
d. Gunakan method kirimData()
Untuk menggunakan method kirimData() maka letakkan perintah pemanggilan di
onPressed Widget btnKirim seperti contoh berikut:
Widget btnKirim(){ return Center(
child: RaisedButton(
color: Colors.red,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Text('Kirim', style: TextStyle(color: Colors.white),),
onPressed: (){
kirimData(); tambahkan ini disini
},
),
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 92
);
}
Berikut Sumber Kode Lengkap form_karyawan.dart
import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; class FormKaryawanScreen extends StatefulWidget { @override _FormKaryawanScreenState createState() => _FormKaryawanScreenState(); } class _FormKaryawanScreenState extends State<FormKaryawanScreen> { String level = ''; TextEditingController txtNama = TextEditingController(), txtNIP = TextEditingController(), txtSandi = TextEditingController(); Future kirimData()async{ final r = await http.post('http://127.0.0.1:8000/pengguna/simpan', body: { 'nip' : txtNIP.text, 'nama' : txtNama.text, 'sandi' : txtSandi.text, 'level' : level }); //debug untuk melihat hasil nilai balik yang diterim final r print('isi dari r ${r.body}'); } Widget inputText(String label, TextEditingController ctrl, {TextInputType keyboardType, int maxLine}){ return TextField( controller: ctrl, maxLines: maxLine, keyboardType: keyboardType, decoration: InputDecoration( labelText: '$label' ), ); } Widget dropDownLevel(String value, ValueChanged onChanged){ return DropdownButton( onChanged: onChanged, value: value, isExpanded: true, items: <DropdownMenuItem>[ DropdownMenuItem(value: '', child: Text('Pilih Level'),), DropdownMenuItem(value: 'A', child: Text('Administrasi'),), DropdownMenuItem(value: 'P', child: Text('Pegawai'),), ], ); }
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 93
Widget btnKirim(){ return Center( child: RaisedButton( color: Colors.red, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), child: Text('Kirim', style: TextStyle(color: Colors.white),), onPressed: (){ kirimData(); }, ), ); } @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Text('Form Karyawan', style: TextStyle(fontSize: 20),), Divider(), inputText('NIP', txtNIP), inputText('Nama', txtNama), dropDownLevel('$level', (s){ setState(() { level = s; }); }), inputText('Sandi', txtSandi), SizedBox(height: 30,), ///<-- sebagai jarak textfield dengan button btnKirim() ], ), ); } }
Simpan dan coba jalankan program diatas. Lakukan langkah percobaan berikut:
- Masuk ke menu karyawan dan klik tombol Tambah (FloatActionButton).
- Isikan data di form karyawan
- Tekan tombol kirim
- Periksa isi di database tabel pengguna
o Bila isinya ada maka langkah anda sudah berhasil
o Bila isinya tidak ada, cek di bagian Debug Console di browser, dan analisis
kesalahannya.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 94
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 95
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 96
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 = TextInputType.number)
o TextField : Stok. (keyboardType = TextInputType.number)
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 97
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.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 98
Gambar 5.1. Bagan Cara Kerja Pembuatan Token
Sama halnya seperti session, token juga harus disimpan baik di sisi server dan di sisi
klien. Karena mekanisme penyimpanan session berupa file pada arsitektur server
klastering penggunaan session menjadi tidak efektif karena mesin server yang melayani
bisa bergantian, sehingga apabila session telah direkam pada mesin server A dan
kemudian klien meminta layanan di waktu selanjutnya mendapatkan giliran di mesin
server B maka sessionnya menjadi tidak valid. Namun apabila informasi berupa token
yang direkam di basis data, maka apabila menggunakan klastering maka semua mesin
server akan mengakses data yang sama, sehingga informasi token yang diakses akan
selalu sama nilainya.
5.3. LocalStorage
Untuk penyimpanan token di sisi klien (Flutter web) maka dapat memanfaatkan
localstorage. Fitur ini dapat digunakan dengan menambahkan library import ‘dart:html’.
Contoh Deklarasi library:
import 'dart:html' as html;
Contoh Penggunaan:
html.window.localStorage['token'] = nilai;
5.4. Membuat Form Login
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 99
Praktikum kali ini akan membuat form login, yang akan digunakan untuk pengisian NIP
dan sandi untuk di cek di server. Siapkan TextEditController untuk nip dan sandi. Berikut
kerangka Class nya. import 'package:flutter/material.dart'; class LoginScreen extends StatefulWidget { @override _LoginScreenState createState() => _LoginScreenState(); } class _LoginScreenState extends State<LoginScreen> { TextEditingController txtNIP, txtSandi;
Widget tombolLogin(){ } Widget formLogin(){ } @override Widget build(BuildContext context) { return Scaffold(); } }
a. Buat Widget FormLogin
Widget formLogin kita desain yang berisikan 2 TextField dan 1 button. Dilapisi Card
dan Container serta Column untuk menyusun lebih dari 1 widget pada sebuah
bidang. Contoh seperti berikut:
Widget formLogin(){ return Card( margin: EdgeInsets.all(30), child: Container( padding: EdgeInsets.all(20), child: Column( children: <Widget>[ TextField(), TextField(), tombolLogin() ], ), ) ); }
Berikan dekorasi pada textfield berupa label dan hintText, menjadi seperti berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 100
Widget formLogin(){ return Card( margin: EdgeInsets.all(30), child: Container( padding: EdgeInsets.all(20), child: Column( children: <Widget>[ TextField( controller: txtNIP, decoration: InputDecoration( labelText: 'NIP', hintText: 'Isikan Nomor Induk Pengguna' ), ), TextField( controller: txtSandi, obscureText: true, decoration: InputDecoration( labelText: 'Sandi', hintText: 'Isikan Nomor Induk Pengguna' ), ), tombolLogin() ], ), ) ); }
Agar txtNIP maupun txtSandi dapat digunakan sebagai controller di TextField, maka
pastikan txtNIP dan txtSandi di instance object. Perintah instance object dapat
dilakukan baik di constructor ataupun di initState(). Berikut contoh instanceObject
TextEditcontroller untuk txtNIP dan txtSandi di initState(). @override void initState() { super.initState(); txtNIP = new TextEditingController(); txtSandi = new TextEditingController(); }
b. Buat Tombol Login
Tombol login yang akan didesain berupa bentuk sedikut oval di sudutnya, dan
berwarna biru. Berikut contoh isi tombolLogin() Widget tombolLogin(){ return RaisedButton( child: Text('Login', style: TextStyle(color: Colors.white),), color: Colors.blue, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)), onPressed: (){ login(); }, ); }
c. Susun di Widget build()
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 101
Setelah semua widget diatas telah dibuat, sekarang susunlah widget di bagian
Widget build() seperti contoh berikut:
@override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Container( child: Center( child: Column( children: <Widget>[ formLogin() ], ), ), ), ), ); }
d. Buat method login()
Method login ini bekerja dengan mengirimkan nip dan sandi ke server untuk
mendapatkan nilai response dari server.
Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); final js = json.decode(hasil.body);
if(js['result'] == true){ //perintah lakukan sesuatu berhasil login }else{ //perintah lakukan sesuatu gagal login } }
e. Ganti Halaman Awal
Lihat pada file /lib/main.dart. disitu akan mendapati Widget pertama yang akan
ditampilkan adalah Beranda(), seperti pada kode berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 102
Modifikasi pada bagian home diatas, ubah dari Beranda menjadi LoginScreen(),
seperti pada contoh berikut:
import 'package:app_presensi/login.dart';
import 'package:flutter/material.dart';
main()=>runApp(new AppPresensi());
class AppPresensi extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Presensi Online',
theme: ThemeData(
primaryColor: Colors.green
),
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 103
Laravel dengan menambahkan method login di Laravel /app/Http/controller/Pengguna.php seperti berikut:
public function login(){ $nip = request('nip'); $sandi = request('sandi'); $r = PenggunaModel::where('nip', $nip)->where('sandi', md5($sandi))->get(); if($r->count() < 1){ return ['result'=>false, 'msg'=>'NIP dan sandi tidak cocok di sistem']; } return ['result' => true, 'token' => $this->buatToken( $r[0] ), 'pengguna'=>$r[0] ]; }
Penjelasan: - Dapatkan kiriman nip dari klien - Dapatkan kirima sandi dari klien
- Dapatkan model data Pengguna berdasarkan nip dan sandi
- Jika jumlah data di model pengguna didapat kurang dari 1 maka kirimkan pesan
‘result’ = false dan pesan nip dan sandi tidak cocok di sistem.
- Selain itu maka kirimkan pesan result = true, token dengan membuat token terlebih
dahulu serta informasi pengguna
g. Tabel Session
Buat tabel beri nama session, sebagai tabel yang menyimpan segala informasi
aktifitas login dari setiap pengguna yang masuk ke sistem.
Berikut spesifikasinya: Tabel 1.1. Tabel Session
Nama Type Ukuran Keterangan
Token Varchar 32 Primary Key not null
Nilai Text
h. Model Session
Tambahkan model Session di Laravel untuk menghandle table Session yang telah
dibuat diatas, seperti contoh berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 104
Kemudian Modifikasi file \Model\Session.php menjadi sebagai berikut:
i. Method buatToken
Method buatToken melakukan generate nilai secara acak untuk token yang akan di
simpan di tabel session, serta untuk dikirimkan ke klien.
private function buatToken($user){ $token = md5( rand(9,928938) . date('YmdHis') . rand(8,827484) ); $s = new Session(); $s->token = $token; $s->nilai = $user; $s->save(); return $token; }
j. Tambahkan Route
Untuk dapat di akses di klien, jangan lupa untuk menambahkan route login() di
route/web.php:
Setelah melakukan tahapan diatas, lakukan pengujian terhadap login. Jangan lupa
menambahkan printah print untuk melihat hasil luaran dari http.post
pengguna/login. Seperti contoh berikut
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 105
Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); print('hasil login ${hasil.body}'); //<--untuk melihat response dari server final js = json.decode(hasil.body); if(js['result'] == true){ //<-perintah lakukan sesuatu berhasil login }else{ //<--perintah lakukan sesuatu gagal login } }
Amati hasilnya, bila terjadi kesalahan lakukan analisis dan tanyakan kepada tutor di
kelas.
5.5. Pindah ke Halaman Lain
Contoh yang akan digunakan adalah perintah ketika login berhasil pada tahapan diatas.
Kita akan membuat aplikasi berpindah dari LoginScreen ke Beranda(). Untuk berpindah
ke tampilan Widget lain, maka dapat menggunakan perintah
Navigator.pushReplacement().Modifikasi method login() serta mencatat token yang
dikirim oleh server. Berikut contohnya :
Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); print('hasil login ${hasil.body}'); //<--untuk melihat response dari server final js = json.decode(hasil.body); if(js['result'] == true){ //simpan token ke localstorage html.window.localStorage['token'] = js['token']; html.window.localStorage['pengguna'] = json.encode(js['pengguna']); //Ganti tampilan ke widget Beranda() Navigator.pushReplacement(context, new MaterialPageRoute( builder: (b)=>Beranda() )); }else{ //perintah lakukan sesuatu login gagal } }
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 106
5.6. ShowAlert
Sering kali kita memerlukan tampilan alertDialog untuk sebagai pemberitahuan adanya
terjadi peringatan ataupun pembertahuan kepada pengguna. Untuk pembuatan alert
contohnya sebagai berikut:
void alert(String pesan){ showDialog( context:context, builder: (b)=>AlertDialog( title: Text('Perhatian'), content: Text('$pesan'), actions: <Widget>[ FlatButton( onPressed: (){ Navigator.pop(context); },child: Text('Oke Saya mengerti'), ) ], ) ); }
Contoh penggunaannya:
alert('Maaf, anda tidak berhak masuk ke sistem');
Gunakan alert() sebagai pemberitahuan terjadi kegagalan login. Modifikasi method
login() menjadi sebagai berikut:
Future login()async{ final hasil = await http.post('http://127.0.0.1:8000/pengguna/login', body:{ 'nip' : txtNIP.text, 'sandi' : txtSandi.text }); print('hasil login ${hasil.body}'); //<--untuk melihat response dari server final js = json.decode(hasil.body); if(js['result'] == true){ html.window.localStorage['token'] = js['token']; html.window.localStorage['pengguna'] = json.encode(js['pengguna']); Navigator.pushReplacement(context, new MaterialPageRoute( builder: (b)=>Beranda() )); }else{ alert('Maaf, nip dan sandi anda tidak cocok di sistem kami');// alert kesalahan } }
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 107
5.7. Auto Login
Untuk membuat aplikasi pada Flutterweb apabila aplikasi di referesh kemudian otomatis
masuk ke beranda setelah sebelumnya melakukan login, maka perlu ditambahkan
perintah untuk melakukan pengujian token, untuk memastikan apakah token yang
tersimpan di localstorage aplikasi flutter web masih sama dengan yang ada di server.
Jika token masih valid maka aplikasi akan berpindah ke Beranda, namun bila tidak valid
maka menampilkan halaman login.
Untuk itu perlu ditambahkan method cekPengguna yang dipanggil pada saat awal
Widget login dimulai.
a. Membuat method cekPengguna() di Flutter
Future cekPengguna()async{ final token = html.window.localStorage['token']; final hasil = await http.post('http://127.0.0.1:8000/pengguna/cek-token', body: { 'token' : token }); final js = json.decode(hasil.body); if(js['result'] == true){ Navigator.pushReplacement(context, new MaterialPageRoute( builder: (bc)=>Beranda() )); } }
Pada perintah cekPengguna diatas akan menghubungi server pada route
/pengguna/cek-pengguna dengan menyertakan token untuk di uji, apakah nilai
token yang dimiliki client masih sama dengan yang ada di server, jika ‘result’ bernilai
true, maka token bernilai valid dan kemudian aplikasi akan membuka widget
Beranda(). Untuk menggunakan cekPengguna() letakkan method ini dipanggil di
bagian initState(). Contoh menjadi sebagai berikut:
@override
void initState() {
super.initState();
txtNIP = new TextEditingController();
txtSandi = new TextEditingController();
cekPengguna(); tambahkan seperti ini
}
b. method cekPengguna() di Server
Agar di sisi server menanggapi permintaan cek-pengguna oleh klien, maka di sisi
server juga harus disediakan proses penanggapannya. Buatlah method cekPengguna
di controller Pengguna, seperti contoh berikut:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 108
Method cekPengguna() bekerja sebagai berikut:
- dapatkan nilai token dari kiriman klien
- baca tabel Session, dengan mencari nilai ‘token’ dari isi tabel yang sama
dengan nilai token dari klien
- Jika jumlah data yang ditemukan kurang dari 1 (satu), maka
Kembalikan nilai dengan isi result=false, dan pesan=Token tidak valid
- Jika tidak masuk kriteria poin diatas, maka token dianggap ditemukan,
maka kembalikan berupa informasi result=true, dan data user yang ada di
dalam tabel Session.
Setelah dibuat method untuk cekPengguna, maka daftarkan pada route di
route/web.php agar dapat di akses secara POST oleh klien seperti contoh berikut:
Setelah langkah-langkah diatas dilakukan. Coba jalankan server dan Flutter. Lakukan
Login dan lihat hasilnya apakah berhasil masuk ke Beranda? Jika tidak berhasil cek
kembali kode program diatas. Bila sudah berhasil, refresh browser dan lihat kembali
apakah langsung masuk ke beranda atau masih meminta login?. Jika masih meminta
Login maka ada langkah yang belum berhasil dilakukan. Bila langsung masuk ke halaman
Beranda maka anda telah berhasil membuat identifikasi pengguna.
5.8. Hard Coded
Hard coded merupakan teknik penulisan string pada kode program yang tidak bersifat
flexible. Hal ini akan membuat banyak upaya bila adanya terjadi perubahan dari isi
string, yang apalagi berupa ketentuan isi, sehingga harus merubah satu persatu
menjadikan penulisan kode program tidak menjadi efektif.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 109
Contoh perintah hard-coded:
final hasil = await http.post('http://127.0.0.1:8000/pengguna/simpan', body: {
pada bagian 'http://127.0.0.1:8000/pengguna/simpan' merupakan hard-coded.
Karena dituliskan secara String langsung. Apabila ada perubahan alamat server maka
kita harus merubah seluruh dokumen program yang mengandung alamat URL yang
harus diubah. Model hard-coded pada pembuatan program dalam skala sedang maupun
besar akan sangat menyusahkan dan sama sekali tidak disarankan.
Untuk mengatasi persoalan diatas, maka diperlukan pembuatan konstanta sebagai
ketentuan nilai yang di letakkan pada sebuah file khusus untuk menghimpun semua
ketentuan isi dari String. Sehingga apabila ada perubahan, kita hanya berfokus pada
sebuah file saja untuk merubahnya.
5.9. Pembuatan Konstanta
Pembuatan konstanta di dart strukturnya sebagai berikut:
static final type_data nama_konstanta = ‘nilai konstanta’;
contoh:
static final String LABEL_SAVE = 'Simpan';
Berikut langkah contoh praktik pembuatan konstanta untuk tujuan soft code pada alamat
URL server. Buat sebuah file .dart di project dengan nama url_address.dart. nantinya isi
dari file ini adalah deklarasi nama-nama url yang dapat diresponse oleh server. Berikut
contohnya:
class UrlAddress{
static final String HOST = 'http://127.0.0.1:8000';
static final String URL_PENGGUNA = '$HOST/pengguna';
static final String URL_PENGGUNA_SIMPAN = '$URL_PENGGUNA/simpan';
static final String URL_PENGGUNA_HAPUS = '$URL_PENGGUNA/hapus';
static final String URL_PENGGUNA_LOGIN = '$URL_PENGGUNA/login';
static final String URL_PENGGUNA_CEK = '$URL_PENGGUNA/cek-pengguna';
static final String URL_PENGGUNA_LISTDATA = '$URL_PENGGUNA/list-data';
static final String URL_PETAPRESENSI = '$HOST/peta';
static final String URL_PETAPRESENSI_LISTDATA = '$URL_PETAPRESENSI/list-data';
static final String URL_PETAPRESENSI_LIHAT_DATA = '$URL_PETAPRESENSI/lihat-data';
static final String URL_PETAPRESENSI_HAPUS = '$URL_PETAPRESENSI/hapus';
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 110
static final String URL_PETAPRESENSI_SIMPAN = '$URL_PETAPRESENSI/simpan';
}
Contoh penggunaan konstanta diatas dapat diterapkan seperti berikut:
Future simpanData()async{
setState((){ isLoading=true; });
final hasil = await http.post(UrlAddress.URL_PENGGUNA_SIMPAN, body: {
'key' : '${kry['nip']}',
'nip' : txtNip.text,
'nama' : txtNama.text,
'sandi' : txtsandi.text,
'level' : level
});
Untuk penggunaan class UrlAddress pastikan dokumen dart yang menggunakannya telah
melakukan import file url_address.dart, seperti contoh berikut:
import 'package:app_presensi/helper/url_address.dart';
Sekarang periksalah kembali setiap file pada project yang menggunakan penulisan hard
code kemudian ganti menjadi konstanta.
5.10. Pengamanan API
Kode program yang telah dibuat di Server pada praktik sebelumnya merupakan bentuk API
(Application programming Interface) yang belum dilakukan pengamanan. Seperti untuk melihat
isi data, simpan maupun hapus data bisa langsung dieksekusi melalui aplikasi postman. Untuk
mode development / Pengembangan hal tersebut sah-sah saja, karena untuk memudahkan
pengujian dan koreksi pra-produksi. Tapi bila sudah masuk ke mode produksi, maka akses
langsung pada fitur-fitur tersebut sangat tidak aman, karena dapat di eksploitasi data oleh
pihak luar.
Teknik program yang kita buat adalah restFulweb, yaitu website yang tidak menggunakan
session bawaan sebagai pengingat dari klien, tapi menggunakan pembuatan token yang
disimpan di tabel Session di database. Hal ini akan sangat berfungsi untuk jenis server yang
menggunakan klaster bila dibandingkan menggunakan session bawaan dari PHP yang tidak
dapat berfungsi dengan baik pada server klaster.
Praktik kali ini kita akan membuat pengamanan pada perintah lihat data, hapus data,
maupun simpan data. Caranya dengan menggunakan middleware sebagai filter pada route web
yang mengarah pada operasi-operasi CRUD di server. Ikuti langkah berikut:
A. Buatlah middleware di laravel melalui artisan, sebagai contoh buat dengan nama
Otorisasi. Berikut contohnya jalankan di terminal pada direktori project:
php artisan make:middleware Otorisasi
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 111
B. Modifikasi file middleware Otorisasi.php yang berada di direktori
/app/Http/Middleware. Baca data dari header dan dapatkan nilai token yang dikirimkan
dari klien untuk di cek di tabel session. Bila token ditemukan, maka lanjutkan proses,
bila tidak ada maka kirimkan nilai informasi token tidak valid.
C. Daftarkan middleware di Kernel.php dengan nama ‘otorisasi’ seperti contoh berikut di
bagian $routeMiddleware:
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 112
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 113
Future refresh()async{
///ambil informasi token yang tersimpan di localstorage
final token = html.window.localStorage['token'];
final r = await http.get(UrlAddress.URL_PENGGUNA_LISTDATA,
headers: { 'token' : token} ///gunakan token di headers
);
. . .
. . .
Keterangan:
- html.token.localStorage[‘token’] : mendapatkan informasi preferences ‘token’.
Informasi nilai token ini sebelumnya harus telah disimpan ketika login berhasil. Lihat
pada point 5.4 di sub D.
- headers: {‘token’ : token} : menggunakan parameter headers untuk ditambahkan isi
‘token’ yang tersimpan di sisi klien yang nantinya di baca oleh server melalui
perintah : apache_request_headers(). Lihat pada point 5.10 sub. B diatas.
Penambahan headers diatas akan menyebabkan persoalan CORS yaitu Access-Control-
Allow-Headers. Oleh karena itu modifikasi file middleware/Cors.php menjadi sebagai
berikut:
Setelah melakukan tahapan diatas, lakukan pengujian pada program kalian. Seharusnya
yang dicapai:
1. Login : masukan id dan sandi yang benar maka akan masuk ke halaman beranda, bila
salah maka keluar pesan kesalahan ID san Sandi.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 114
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
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 115
5.13. Integrasi Release Aplikasi Flutter Web ke Laravel Project
Project Flutter yang telah di release, dapat di integrasikan menjadi kesatuan dari project
di Laravel, sehingga bila aplikasi web laravelnya di jalankan pada direktori home, yang
muncul adalah aplikasi flutter yang telah di release. Beikut langkah-langkahnya:
A. Salin file release project flutter seperti pada contoh gambar 5.2 diatas ke project
Laravel di direktori /public, seperti contoh berikut
Gambar 5.3. Hasil Salin project flutter ke /public Laravel
B. Buat file di laravel di direktori /resource/views/. Buat dengan nama index.blade.php,
seperti contoh berikut. Serta isikan file index.blade.php seperti contoh berikut:
Gambar 5.4 Isi file index.blade.php
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 116
C. Salin file /web/assets yang ada di project Flutter-web ke direktori /public pada Laravel,
seperti berikut:
Gambar 5.5. Folder assets flutter ke /public di Laravel.
Langkah diatas bertujuan agar asset gambar yang telah dibuat di project Flutter terikut
serta nantinya bila aplikasi dijalankan.
D. Modifikasi route/web.php pada method ::get(‘/’) diarahakan view ke index.blade.php,
sepertin contoh berikut:
Nb*: Cukup ketikkan nama ‘index’ saja, tidak perlu ada blade.php.
Bila telah dilakukan langkah-langkah diatas, kemudian jalankan dan jangan lupa analisis
pesan yang muncul di console web yang ada di browser. Lakukan login dan analisa buila terjadi
kesalahan, cobalah melakukan perbaikan dengan mendiskusikannya ke tutor.
Selamat berkreasi.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 117
Tugas Rumah
1. Buatlah form Login untuk mengenali pengguna berdasarkan ID pengguna dan kata
sandinya.
2. Buatlah middleware untuk memvalidasi token yang dikirimkan oleh klien masih valid
sebagai mekanisme keamanan akses data. Pastikan setiap operasi CRUD di server hanya
dapat berjalan pada klien aplikasi yang telah melakukan Login dengan benar, tidak akan
melayani data pada postman ataupun permintaan dari klien yang tidak melakukan login
dengan benar.
3. Buatlah konstanta di dile url_address.dart dengan nama class UrlAddress:
a. URL_HOST = ‘http://127.0.0.1:8000/’
b. URL_KARYAWAN_LIST_DATA = ULR_HOST + ‘karyawan/list-data’
c. URL_KARYAWAN_SIMPAN= ULR_HOST + ‘karyawan/simpan’
d. URL_KARYAWAN_HAPUS= ULR_HOST + ‘karyawan/hapus’
e. URL_PRODUK_LIST_DATA = ULR_HOST + ‘produk/list-data’
f. URL_ PRODUK _SIMPAN= ULR_HOST + ‘produk /simpan’
g. URL_ PRODUK _HAPUS= ULR_HOST + ‘produk /hapus’
h. URL_PENJUALAN_LIST_DATA = ULR_HOST + ‘penjualan/list-data’
i. URL_ PENJUALAN _SIMPAN= ULR_HOST + ‘penjualan /simpan’
j. URL_ PENJUALAN _HAPUS= ULR_HOST + ‘penjualan /hapus’
k. URL_DETAIL_PENJUALAN_LIST_DATA = ULR_HOST + ‘penjualan/list-detail
l. URL_ DETAIL_PENJUALAN _SIMPAN= ULR_HOST + ‘penjualan /simpan-detail’
m. URL_ DETAIL_PENJUALAN _HAPUS= ULR_HOST + ‘penjualan /hapus-detail’
4. Modifikasi kode program anda untuk menggunakan soft-coded dengan cara merubah
semua hard-coded URL transaksi simpan, list-data dan hapus menggunakan konstanta yang
telah dibuat pada project anda.
5. Release aplikasi anda dan integrasikan aplikasi flutter ke project laravel pada route root:
(‘ / ‘), yaitu akan diakses sebagai muka halaman di project anda.
Agung Sasongko, M.Kom | Sistem Informasi
Web Programming 2 - Pertemuan 1 | Universitas Bina Sarana Informatika 118
Pertemuan 6 – 9 Konsultasi Project Akhir
Pertemuan 10-16 Presentasi Project Akhir
top related