JURNAL ILMIAH MAHASISWA

Pengembangaan Mobile App E-Library Dalam

Meningkatkan Layanan Di Perpustakaan SMPN 3
Singkawang
Ares Yudha Pasca Irawan*1, Susanti M. Kuway, S.Kom., M.Kom.2
1,2
STMIK Pontianak; Jl. Merdeka Barat No. 372, (0561) 735555
1
Jurusan Teknik Informatika, STMIK Pontianak
e-mail: * aresyudha1206@gmail.com, 2shantykuway@stmikpontianak.ac.id
1

Abstrak
Pengguna layanan internet sudah sangat lekat dilingkungan masyarakat hal ini juga
mendorong perpustakaan untuk mengaplikasikan suatu platform yang dapat diakses dengan
mudah oleh penggunannya dengan menggunakaan bantuan internet, Pengembangaaan E-
library atau Perpustkaan Digital merupakaan salah satu cara yang digunakaan untuk menarik
minat pembaca baik siswa sekolah maupun pengguna umum Adapun alasaan penulis memilih
topic pengembanggan ini adalah untuk membantu proses penggunaan perpustakaan baik bagi
staff maupun bagi siswa. Penelitian ini berbentuk Studi kasus dengan metode Research Design
Method, data-data yang diperlukan akan dikumpulkan dengan cara wawancara dan observasi
dan metode pengembangaan yang akan digunakaan adalah SDLC (Software Development Life
Cycle) dengan model Waterfall serta pengujian akan dilakukan dengan metode Black-Box
Adapun hasil dari penelitian ini akan berupa sebuah E-library pada SMPN 3 Singkawang yang
dibagun dengan Framework Flutter untuk Front-Endnya dan juga Framework Laravel untuk
Back-Endnya. Penelitian dan Pengembangan E-Library ini diharapkaan dapat membantu
proses peminjamaan buku bagi pengguna agar lebih mudah dan lebih cepat dan juga dapat
membantu staff perpustakaan untuk mengelola inventaris perpustakaan.

Kata kunci Flutter,Laravel,RDM,Waterfall,SDLC.

Abstract
Internet service users are very attached to the community, this also encourages
libraries to apply a platform that can be accessed easily by users using the help of the internet.
The development of e-libraries or digital libraries is one of the methods used to attract readers,
both school students and general users. The reason the author chose this development topic was
to assist the process of using the library for both staff and students. This research is in the form
of a case study using the Research Design Method, the necessary data will be collected by
means of interviews and observation and the development method that will be used is SDLC
(Software Development Life Cycle) with the Waterfall model and testing will be carried out
using the Black-Box method. The results of this research will be in the form of an E-library at
SMPN 3 Singkawang which is built with the Flutter Framework for the Front-End and also the
Laravel Framework for the Back-End. This Research and Development of E-Library is expected
to help the process of borrowing books for users to make it easier and faster and can also Assist
library staff to manage library inventory.

Keywords Flutter,Laravel,RDM,Waterfall,SDLC.
2 

1. PENDAHULUAN

Dengan adanya perkembangan internet banyak instansi ataupun sekolah yang mulai
mengintegrasikan internet untuk melakukan beragam aktifitas yang mengaitkan internet seperti
sistem absensi secara online dan sistem perpustakaan yang diintegrasikan kedalam website
untuk melakukan pinjamaan ataupun pencarian buku dan bahan ajar tanpa harus hadir di
perpustakaan itu sendiri, Kebijakan terlihat perubahannya yaitu pada sektor pendidikan yang
diantaranya mengubah sistem belajar mengajar yang awalnya bertatap muka dalam sebuah
ruangan kelas atau pertemuan menjadi pertemuan jarak jauh atau daring dengan menggunakan
media elektronik dengan tujuan tetap menyelenggarakan kegiatan belajar mengajar walaupun
dalam situasi pandemi covid-19[1], hal ini sangat berguna mengingat situasi pandemi sekarang
dimana banyak instansi dan sekolah yang berupaya meminimalisir kontak fisik secara langsung,
lebih lanjutnya, perpustakaan bertransformasi dari perpustakaan konvensional menjadi
perpustakaan digital, dimana layanan yang disediakan juga berbasis elektronik, sehingga
memudahkan para pengguna untuk menjangkau informasi yang tersedia, tanpa terbatas waktu
dan jarak di tambah lagi dengan keadaan dunia saat ini yang dilanda oleh pandemi Coronavirus
Disease 19 [2].
Penerapan website dengan konsep Model View Controller untuk memudahkan
pengelolahan website dan pengembangan secara modular. Konsep MVC dipisah – pisahkan
menjadi tiga bagian yang terpisah menjadi saling terhubung. Bagian – bagian itu adalah Model,
View, dan Controller, lebih lanjutnya MVC memisahkan pengembangaan aplikasi berdasarkan
komponen utama yang membangun sebuah aplikasi seperti manipulasi data user interface dan
bagian yang menjadi kontrol aplikasi,[3]
REST API merupakaan sebuah desain arsitektur yang terdapat pada sebuah API yang
bertujuan mengizinkan pengembang menyambungkan akses pada data atau resource pada server
dimana masing-masing resource atau data akan dibedakan oleh sebuah Global ID atau URI
(Universal Resource Identifier)
Framework Flutter merupakaan framework open-source UI software Development kit
yang di kembangkan oleh Google yang bertujuan untuk menggembangkan mobile, desktop dan
web application yang memiliki UI yang menarik dan responsive dengan menggunakaan
codebase yang sama ,“Flutter adalah seperangkat alat yang memungkinkan kita membuat
aplikasi menarik yang berjalan di iOS, Android, Web, dan desktop” [4], framework Flutter
dibangun menggunakaan Bahasa pemrograman Dart. Alasan penulis menggunakan framework
Flutter adalah framework Flutter memiliki keunggulan tersendiri yang menjadikannya lebih
baik dari pada framework lainnya, berikut ini merupakan kelebihan dari Flutter yaitu,
performance lebih cepat, reload data lebih stabil, dapat menggembangkan UI yang menarik,
tersedianya konsep arsitektur Model View Controller (MVC) dan dapat mengimplementasikan
Algoritma User-Based Collaborative Filtering Algoritma Collaborative filtering biasanya
berkerja dengan cara mencari grup besar pada user dan mencari set kecil yang memilkiki
ketertarikan yang sama dengan apa yang kamu miliki [5]. Algoritma User-Based Collaborative
Filtering bertujuan menjadi sistem pembantu rekomendasi dengan tujuan mempermudah
pengguna untuk mendapatkan buku dan pencarian bahan ajar yang sesuai dengan kriteria
pengguna itu sendiri, adanya beragam plug-in yang dapat mempermudah proses
pengembanggan, serta hasil dari pengembangaan web-app dapat diakses dari device apa saja
melalui browser dan memiliki UI yang sesuai dengan device native resolution yang pengguna
gunakan.
Pengembangan E-Library berbasis web dapat memudahkan pengguna mengakses
perpustakaan dengan Web Browser pengguna dapat mengakses E-Library untuk melakukan
peminjamaan dan melakukan browsing item yang tersedia pada perpustakaan. Pengembangan
E-Library berbasis web ini juga berguna untuk mengurangi interkasi manusia secara langsung
pada masa-masa pandemi sekarang.
3

2. METODE PENELITIAN

Bentuk penelitian yang digunakan oleh penulis pada penelitian ini adalah studi kasus.
Studi Kasus merupakan strategi penelitian yang berusaha memahami kedinamisan dalam
konteks tunggal yang dalam hal ini mengacu pada variabel tunggal terhadap suatu objek yang
diteliti dengan menggunakan cara-cara sistematis yang dilakukan dengan melihat, mengamati,
apa saja yang dibutuhkan pada E-Library SMPN 3 Singkawang.
Dalam penulisan ini penulis mengguanakan metode penelitian Design Science Research
Methodology (DSRM). Design Science Research merupakaan paradigma pemecahaan masalah.
Design Science Research digunakaan untuk memperdalam pengetahuan manusia dengan
membangun artifak inovatif dan menciptakaan perkembangan dari pengetahuan melalui solusi
inovatif pada masalah didunia nyata. Proses permodelan Design Science Research memiliki 5
proses yang terdiri dari Problem Identification, Define The Objective for a Solution Design And
Development, Demonstration, Evaluation, Communication
Metode pengumpulan data adalah teknik-teknik atau cara-cara yang dapat digunakan
oleh peneliti untuk mengumpulkan semua data yang dibutukan dalam penelitian, Jenis data
terdiri dari dua jenis yaitu data primer dan data sekunder. “Data Primer adalah data langsung
dari objek penelitian dan merupakan data yang berasal dari sumber asli atau pertama”[7].
Sedangkan Menurut Hasibuan “Data Sekunder adalah data yang tidak didapatkan secara
langsung dari objek penelitian, melainkan data yang berasal dari sumber yang telah
dikumpulkan oleh pihak lain”[6]. Teknik pengumpulan data adalah cara-cara yang dilakukan
untuk mengumpulkan, mencari dan memperoleh data yang dibutuhkan dalam melakukan
penelitian, baik data itu diperoleh dengan survei langsung maupun dengan penggalian
informasi.
Instrumen penelitian terdiri dari data primer dan data sekunder yang diperoleh dengan
berbagai teknik pengumpulan data. Data primer yang berkaitan langsung dengan data yang
diperoleh dari kegiatan observasi dan hasil wawancara terhadap objek penelitian. Wawancara
yang dilakukan dengan memberikan daftar sejumlah pertanyaan yang telah dilampirkan pada
penelitian ini yang kemudian ditanyakan langsung kepada pihak staff Perpustakaan SMPN 3
Singkawang untuk memperoleh data yang lebih akurat dan benar. Sedangkan observasi
dilakukan dengan mengamati secara langsung kegiatan peminjamaan dan proses lainnya pada
perpustakaan SMPN 3 Singkawang. Data sekunder diperoleh melalui studi dokumentasi dimana
data tersebut berupa catatan riwayat pinjamaan,catatan anggota,catatan bahan ajar atau buku
yang tersedia pada perpustakaan dan catatan penggunjung Perpustakaan SMPN 3 Singakawang.
Penelitian ini penulis mengunakan metode pengembangan Software Development Life
Cycle atau SDLC dengan model Waterfall, metode pengembangan SDLC merupakaan metode
pengembangan yang bersifat sistematis atau berurutan dalam proses pengembangan perangkat
lunak, metode SDLC juga sering disebut pengembangan dengan metode Linear Sequiental
Model atau Classic life cycle. Menurut R. S. Pressman model pengembangan ini disebut
Waterfall karena tahap demi tahap yang dilalui harus menunggu selesainya tahap sebelumnya
dan berjalan berurutan [7].
Alat bantu yang digunakan untuk merancang aplikasi dalama penelitian kali ini adalah
UML (Unified Modeling Language). Ada beberapa digaram visual yang digunakan didalam
UML untuk menunjukan berbagai aspek dalam perancanagn sistem UML yang akan digunakaan
adalah Class Diagram, Use Case Diagram, Activity Diagram, dan Sequance Diagram
Metode pengujian perangkat lunak yang digunakan penulis adalah metode black-box
testing. pengujian yang dilakukan hanya mengamati hasil eksekusi melalui data uji dan
memeriksa fungsional dari perangkat lunak.
4 

3. HASIL DAN PEMBAHASAN

Tujuan dari penelitian ini adalah menghasilkan dua sistem E-Library yang memiliki
fungsi yang berbeda Adapun dua sistem tersebut merupakaan sistem Front-end yang berupa
Native Application pada device android yang akan digunakaan pengguna untuk mengakses
semua buku untuk dilakukan peminjamaan dan sistem Back-end yang akan menjadi sistem
pengelolaan data oleh staff perpustakaan yang dapat diakses melalui web browser.
Perencanaan pembangunan sistem merupakan salah satu tahapaan dari penggunaan
metode Software Development Life Cycle dengan model Waterfall. Di dalam melakukan
perencanaan terdapat beberapa proses penting, yaitu mengidentifikasi kebutuhan pengguna,
menganalisa kebutuhan sistem, dan melakukan rancangan arsitektur sistem. Tujuan dari
mengidentifikasi kebutuhan pengguna dilakukan agar dapat melakukan analisis kebutuhan
sistem. Setelah melakukan analisa kebutuhan sistem selanjutnya yaitu membuat rancangan
arsitektur sistem. Pada tahapaan ini akan dicari titik permasalahaan pada suatu masalah dan
diberikan beberapa rancangan untuk memecahkan masalahnya pada penelitian ini dilakukan
analisis fungsional yang didapatkan melalui wawancara dengan kepala perpustakaan SMPN 3
Singkawang dan didapatkan beberapa kebutuhan fungsional yang dapat dilihat pada Tabel 1

Tabel 1. Tabel Kebutuhan Fungsional

Pengguna Kebutuhan Fungsional Sistem Pengguna
Sistem
Admin Perekapan, Mampu Admin
data merekap,berdasarkan
peminjamaan jumlah buku dan
dan buku peminjamaan
Pelangga Pencarian dan Mampu melakukan Pelanggan
n pengurutan pencarian dan
buku pengurutan buku
Pelangga Informasi Dapat menampilkan Pelanggan
n Peminjamaan informasi terkait masa
peminjamaan
Pelangga Informasi Dapat menampilkan Pelanggan
n konfirmasi informasi status
Peminjamaan peminjamaan buku
Admin Kelola Dapat mengelola Admin
inventaris inventaris buku,
buku yang seperti menampilkan
tersedia informasi: tambah, edit
dan hapus data buku
yang sudah tidak
tersedia

Adapun hasil dari wawancara yang dapat dilihat pada tabel fungsional diatas didapatkan
beberapa kebutuhan yang diperlukan pada perpustakaan SMPN 3 Singkawang yang dapat
disimpulkan sistem pada perpustakaan SMPN 3 Singkawang harus dapat berkerja dengan fungsi
yang sama ataupun dengan fungsi yang dapat lebih membantu staff perpustakaan dibandingkan
dengan menggunakaan metode manual serta dapat membantu pelanggan atau siswa agar dapat
5

menggunakaan perpustakaan dengan lebih mudah tanpa harus melakukan kontak fisik
dilingkungan perpustakaan,
Perancangan sistem merupakan tahap kedua setelah mengidentifikasi kebutuhan
pengguna pada tahap perencanaan. Dalam tahap perancangan sistem penggunaan model
dimaksudkan agar setiap fitur yang telah disediakan dapat dengan jelas dipahami sehingga perlu
disajikan dalam bentuk sebuah model. Perancangan sistem dimulai dengan memodelkan sistem
dalam bentuk diagram UML dan melakukan perancangaan Arsitektur pada bagian Back-end dan
Front- end
dengan

menggunakaan model MVC. Gambar 1 dibawah merupakaan rancangan Arsitektur Back-end

yang berupa web-page dan front-end yang berupa Mobile App
6 

Gambar 1. Arsitektur MVC Framework Flutter dan Laravel pada E-Library

Arsitektur perangkat lunak (Gambar 1), menjelaskan cara kerja dan yang terjadi pada
Sistem front-end dan back-end E-library SMPN 3 Singkawang dalam bentuk arsitektur.
Presentation layer merupakan bagian yang berhubungan langsung dengan client, tempat bagi
client untuk berinteraksi dengan perangkat lunak. Client dapat berinteraksi dengan perangkat
lunak melalui native application pada device android dan staff perpustakaan dapat berinteraksi
dengan perangkat web browser seperti Google Chrome, Mozilla FireFox, Microsoft Edge, dan
aplikasi web browser lainnya.
Berdasarkan (Gambar 1) Model berguna untuk menerima request dari controller dan
mengirimkan response sesuai permintaan dari request user, berupa data yang berhubungan
langsung dengan database, baik itu berupa article.php, article_type.php, user.php, dan
get_article_info.dart
View berguna untuk menampilkan render halaman website sesuai proses request dari
user, sehingga bagian ini berhubungan langsung ke user melalui HTTP request yang diatur dan
diarahkan oleh router baik berpindah halaman dari halaman yang satu ke halaman yang lainnya.
Controller berguna untuk mengatur dan melakukan validasi data proses request dari
user baik itu antara model dan view yang saling berhubungan, penggunaan controller pada
website E-Library SMPN 3 Singkawang berupa controller yang terdapat (variables.dart,
splashscreen.dart, dan verifyaccountpage.dart)
Router berguna untuk mengatur, dan mengarahkan serta memberi akses menuju
halaman tertentu agar bisa diakses melalui web browser sehingga memudahkan saat berpindah
halaman dari halaman satu ke halaman yang lainnya maupun ke halaman yang sebaliknya, pada
saat user mengakses halaman website maka yang pertama melakukan HTTP request ke State
Management dan menampilkan render view sebagai HTTP response.
RESTAPI berguna untuk menkonversi semua command yang terdapat pada controller
untuk menjadi command yang dapat diterima pada dart sehingga command pada controller yang
memiliki Base-Code php akan diubah menjadi JSON agar dapat dieksekusi oleh Front-End
yang menggunakaan Base-Code dart.
Setelah Arsitektur didapatkan akan dilakukan perancangan sistem database yang akan
digunakaan pada E-Library merupakaan MariaDB yang menjadi media penyimpanan data pada
database E-Library SMPN 3 Singkawang. Berikut ini dua contoh spesifikasi tabel–tabel pada
sistem dapat dilihat dari Tabel 2 sampai Tabel 3 dibawah:

Tabel 2. Spesifikasi Table Database ‘Article’

Field Name Key Type Size
Id Primar Bigint 20
y
Created_at Timestamp
Updated_at Timestamp
Title Varchar 255
Author Varchar 20
Description Text
Type_id Int 10
Img Varchar 255
Is_recomended BigInt 1

Tabel 2 yang merupakaan tabel article memiliki sembilan kolom yang terdiri dari id
dengan tipe data bigint sebagai primary key yang akan berkerja sebagai penunjuk data agar
sistem dapat mengetahui data mana yang harus ditampilkan, created_at dan updated_at dengan
tipe data timestamp yang berfungsi menjadi penanda waktu data dibuat pada database, title
7

dengan tipe data varchar, author dengan tipe data varchar, description yang menggunakaan tipe
data text dimana ketiga field ini bertujuan sebagai informasi data yang terdapat pada database,
type_id yang menggunakaan int yang merupakaan penanda kelompok buku sehingga staff
perpustakaan dapat menambahkan buku dengan lebih rapi, img dengan tipe data varchar yang
akan mengambil data gambar berupa link yang tersedia pada server, dan is_recomended yang
bertipekan bigint yang ditujukan untuk mengetahui apakah buku direkomendasikan atau tidak.
Tabel article digunakan untuk menampung informasi buku yang tersedia pada E-Library .

Tabel 3. Spesifikasi Table Database ‘Article_Type’

Field Name Key Type Size
Id Primary Bigint 10
Parent_id Bigint 10
Created_at Timestam
p
Updated_at Timestam
p
Title Varchar 255
Description Text
Order Int 11

Tabel 3 yang merupakaan tabel article_type memiliki tujuh kolom yang terdiri dari id
dengan tipe data bigint sebagai primary key yang menjadi penanda agar sistem dapat
menampilkan data yang ada pada database, parent_id dengan tipe data bigint merupakaan
pengelompokan yang dibuat pada database agar data dapat lebih tertata rapi, created_at dan
updated_at dengan tipe data timestamp yang menjadi penanda waktu pembuataan dan
pengeditan data pada database, title dengan tipe data varchar, description yang menggunakaan
tipe data text dua field ini berisikan informasi yang terdapat pada data yang ada didatabase, dan
Order yang berfungsi menunjukan data mana yang akan pertamakali ditampilkan sistem. Tabel
article_type digunakan untuk menampung informasi tentang tipe buku dan juga notifikasi
pemberitahuan pada landing page E-Library
Setelah Spesifikasi database dibuat penelitian ini akan mengguanakaan Unfield
Modeling Language (UML) yang dimulai dari perancangan class diagram, use case diagram,
activity diagram dan sequence diagram. Adapun UML yang digunakaan dapat dilihat pada
Gambar 2 dimana fungsi UML dibawah merupakaan alur dari sistem database yang akan
digunakaan pada E-Library agar dapat lebih mudah dimengerti dan lebih mudah dirancang
disaat tahapaan pembangunan.
8 

Gambar 2. Class Diagram E-Library SMPN 3 Singkawang

Class diagram pada Gambar 2 diatas menggambarkan hubungan antara entitas yang
terkait dengan sistem E-Library SMPN 3 Singkawang. Pada sistem ini terdapat 5 entitas yang
saling berelasi antara satu dengan yang lainnya. Relasi ini menggambarkan bahwa ada kaitan
secara langsung maupun tidak langsung diantara setiap entitas sistem dan semua entitas diatas
dapat diakses sesuai dengan permission dari user yang sedang login tetapi pada Back-end hanya
user yang memiliki permission admin ataupun staff perpustakaan yang dapat mengakses
halamaan tersebut, hal ini dilakukan dengan tujuan mempermudah staff perpustakaan untuk
mengakses informasi tanpa harus melakukan login ulang pada back-end atau pun login ulang
pada front-end,
Setelah dilakukan proses-proses diatas proses pengembangaan dapat dilakukan diamana
didapatkan dua sistem E-Library dengan fungsi yang berbeda yaitu sistem Front-end dan sistem
Back-End kedua sistem tersebut memiliki fungsi dimana untuk front-end merupakaan sistem
yang akan diakses pengguna untuk melakukan peminjamaan dan juga mengecek buku yang
tersedia sedangkan back-end merupakaan sistem yang berguna untuk mempermudah staff
perpustakaan dalam mengelola inventaris buku pada E-Library. Adapun tampilan dari Front-
End dan Back-End dapat dilihat pada Gambar 3 yang merupakaan tampilan penambahaan data
buku yang dilakukan pada back-end dari E-Library dan pada Gambar 4 merupakaan tampilan
dashboard utama yang menampilkan buku yang tersedia dan buku yang direkomendasikan pada
front-end.
9

Gambar 3. Tampilan Antarmuka Penambahaan Data Buku Back-end

Berdasarkan Gambar 3 yang merupakaan halamaan penambahaan buku terdapat

beberapa komponen yang terdiri dari Bahasa pemrogramaan php yang nantinya akan
diterjemahkan menjadi Bahasa pemrogramaan json agar dapat ditampilkan pada front-end
sistem e-library dengan menggunakaan bantuan RESTAPI untuk proses penerjemahaannya.

1. <?php 
2. class ArticleController extends AdminController
3. {
4.     /**
5.      * Title for current resource.
6.      *
7.      * @var string
8.      */
9.     protected $title = 'Books List';
10.  
11.     /**
12.      * Make a grid builder.
13.      *
14.      * @return Grid
15.      */
16.     protected function grid()
17.     {
18.         $grid = new Grid(new Article());
19.         $grid->column('id', __('Id'));
20.         $grid->column('title', __('Title'));
21.         $grid->column('ArticleType.title', __('Category'));
22.         $grid->column('author', __('Author'));
23.         $grid->column('description', __('Description'))->style('max-
width:200px;word-break:break-all;')->display(function ($val){
24.             return substr($val,0,30);
25.         });
26.         $grid->column('is_recommend', __('Recommend'))->bool();
27.         $grid->column('created_at', __('Created_at'));
28.         $grid->column('updated_at', __('Updated_at'));
29.        // $grid->column('deleted_at', __('Deleted at'));
30.  
31.         return $grid;
10 

32.     }
33.     protected function detail($id)
34.     {
35.         $show = new Show(Article::findOrFail($id));
36.  
37.         $show->field('id', __('Id'));
38.         $show->field('title', __('title'));
39.         $show->field('type_id', __('Type_id'));
40.         $show->column('author', __('Author'));
41.         $show->field('description', __('Description'));
42.         $show->field('img', __('Thumbnail'))->image();
43.         $show->field('article_content', __('Article_content'));
44.         $show->field('created_at', __('Created_at'));
45.         $show->field('updated_at', __('Updated_at'));
46.  
47.  
48.         return $show;
49.     }
50.  
51.     protected function form()
52.     {
53.         $form = new Form(new Article());
54.         $form->select('type_id', __('Type_id'))->options((new
ArticleType())::selectOptions());
55.         $form->text('title', __('Title'));
56.         $form->text('author', __('Author'));
57.         $form->text('description', __('Description'));
58.         $form->image('img', __('Thumbnail'))->uniqueName();
59.         $form->UEditor('article_content','Article_content');
60.         $states = [
61.         'on'  => ['value' => 1, 'text' => 'Recommend', 'color' => 'success'],
62.         'off' => ['value' => 0, 'text' => 'Not recommend', 'color' =>
'danger'],
63.     ];
64.         $form->switch('is_recommend',__('Recommend'))->states($states);
65.         return $form;
66.     }
67. }

Source Code yang digunakaan merupakaan source code dengan nama ArticleController
dimana terdapat script yang digunakaan untuk memproses semua inputan admin yang berasal
dari View yang akan diklasifikasian apa saja fungsinya dan data apa saja yang akan diambil dan
disimpan pada database fungsi ini dapat dilihat pada line 16 hingga 45 pada source code diatas
dimana pada baris line tersebut dapat dilihat field apasaja yang akan digunakaan seseuai dengan
apa field yang berada pada database dan urutan bagaimana sistem akan memulai menyimpan
data yang diberikan setelah dilakukan klasifikasi form inputan akan dapat dibangun pada line 52
hingga line 66 pada source code diatas dimana source code diatas menujukan form yang akan
dibangun pada sistem berserta tipe data yang akan diinputkan pada form yang dibangun berserta
urutan form yang dapat dilihat pada View yang berada di sistem Back-end ,
11

Gambar 4. Tampilan Antarmuka Homepage Front-End

Berdasarkan Gambar 4 Merupakan tampilan halaman beranda utama E-Library SMPN

3 Singkawang, dimana setiap brand dan produk yang dimiliki oleh akan ditampilkan di halaman
website tersebut. User juga memiliki akses untuk melakukan register dan login pada halaman.
Source Code pada halamaan homepage diatas dapat dilihat pada lampiran dibawah

1.   @override
2.   _AllBooksState createState() => _AllBooksState();
3. }
4.  
5. class _AllBooksState extends State<AllBooks> {
6.   var articles = <ArticleInfo>[];
7.  
8.   @override
9.   void initState() {
10.     _getArticles();
11.     super.initState();
12.   }
13.  
14.   _getArticles() async {
15.     SharedPreferences localStorage = await SharedPreferences.getInstance();
16.     var user = localStorage.getString("user");
17.      await _initData();
18.   }
19.   _initData() async {
20.     await CallApi().getPublicData("allarticles").then((response){
21.       setState(() {
22.         Iterable list = json.decode(response.body);
23.         articles= list.map((model)=>ArticleInfo.fromJson(model)).toList();
24.   @override
25.   Widget build(BuildContext context) {
26.     final double height=MediaQuery.of(context).size.height;
27.     final double width=MediaQuery.of(context).size.width;

Source Code diatas digunakaan untuk menampilkan data buku dan dijadikan sebagai
halamaan utama disaat siswa mengakses E-Library pada line 14 sampai dengan line 27 pada
source code diatas dapat dilihat sistem akan menggunakaan REST API untuk mengambil data
yang terdapat pada back-end yang berupa data dengan bentuk php dan diterjemahkan dengan
bantuan metode Async agar menjadi code line yang berbentuk Json sehingga dapat ditampilkan
pada front-end yang menggunakaan Base-code dart setelah diterjemahkan user dapat melihat
buku-buku yang tersedia walaupun belum melakukan login dihalamaan utama.
12 

Setelah penegembangaan selesai akan dilakukan Pengujian atau testing adalah tahapaan
yahmng harus dilakukan dalam melakukan saat melakukan perancangaan aplikasi, dalam hal ini
karena penulis menggunakaan framework flutter perancangaan aplikasi berbasis Native
Application pada device Android maka untuk menghasilkan web dan application yang baik
akan dilakukan proses pengujian pada framework flutter dimana tool yang digunakaan adalah
flutter inspector yang sudah terintegrasi pada SDK flutter
Pengujian akan dilakukan pada form-form penting yang ada pada aplikasi. Dimana hasil
pengujian dapat dilihat pada table dibawah ini

Tabel 3. Pengujian Flutter Peminjamaan Buku

Skenario Hasil yang Hasil Kesimpulan
Pengujian Diharapkan Pengujian
Tambah ke Sistem dapat Data Berhasil
peminjamaan menyimpan peminjamaan
data buku berhasil
(Request yang dipinjam ditambahkan
$Request)

Pada Table 3 dapat dilihat proses Request yang dilakukan dapat dijalankan sesuai
dengan keinginaan pengembang dana data peminjamaan berhasil ditambahkaan.

Tabel 4. Pengujian Flutter Data Buku

Skenario Hasil yang Hasil Kesimpulan
Pengujian Diharapkan Pengujian
Menampilkan Sistem dapat Data buku Berhasil
List Buku menampilkan dapat
buku yang telah ditampilkan
(get $GET) ada pada
database
Melihat Detail Sistem dapat Data detail Berhasil
Buku menampilkan buku dapat
(get $GET) detail buku yang ditampilkan
ada pada
database

Pada Table 4 dapat dilihat proses pengambilan list buku dengan metode $GET yang
dilakukan dapat dijalankan sesuai dengan keinginaan pengembang dana data buku dapat
ditampilkan.
13

4. KESIMPULAN

Berdasarkan hasil penelitian dalam Pengembangaan E-Library Menggunakaan

Framework Flutter Pada SMPN 3 Singkawang dapat disimpulkan beberapa hal sebagai berikut:
Konsep Model View Controller (MVC) pada framework Flutter lebih memudahkan
programmer dalam mengatur query database, manajemen kode, dan validasi data , Coding yang
dihasilkan dengan menggunakan Konsep MVC pada Framework Flutter menjadi lebih
terstruktur, efisien dan mudah di lakukan pengembangan, Penggunaan REST API dapat
memungkinkan pengembang mengembangkan system yang dapat terintegrasi kedatabase
MariaDB MySQL walaupun menggunakaan code-base yang tidak di support seperti code-base
dart dengan cara dilakukannya konversi dari JSON ke php

5. SARAN

E-Library ini masih jauh dari kata sempurna dikarenakaan keterbatasaan waktu,
penggunaan Framework yang masih terbilang baru dan juga pengerjaan yang dilakukan secara
individual. Untuk mencapai tahapan dari kesimpulan dibutuh pengembangan secara berkala.
Ada beberapa saran bagi pengembang dan pengguna, dengan dibangunnya aplikasi E-Library
pada SMPN 3 Singkawang ini.Adapun saran-saran tersebut adalah melakukan penambahan
sistem notifikasi peminjamaan oleh admin, Penambahan fitur notifikasi buku baru pada siswa
melalui email, Pengembangaan Arsitektur Web yang lebih tertata dan lebih rapi,
pengembangaan Back-End dengan CodeBase yang sama yaitu Dart sehingga proses Lebih
mudah, penambahaan fitur baca online untuk semua buku yang memiliki E-Book,
pengembangaan WebApp yang dapat diakses tanpa perlu menggunakaan aplikasi untuk bagian
front-end, dan bagian back-end dengan Codebase Flutter, pengembangaan Table pada MariaDB
MySQL dan perubahaan penggunaan MVC yang lebih mudah dimengerti oleh pengembang.

UCAPAN TERIMA KASIH

Penulis mengucapkan terima kasih kepada STMIK Pontianak dan Dosen Pembimbing
yang telah memberikan dukungan terhadap penelitian ini, serta kepada Alpian Susanto, A.Ma
Pust selaku kepala perpustakaan SMPN 3 Singkawang yang sudah memberikan izin untuk
melakukan penelitian.

DAFTAR PUSTAKA

[1] Sumiati, Eti, and Wijonarko Wijonarko. 2020. Manfaat literasi digital bagi masyarakat
dan sektor pendidikan pada saat pandemi Covid-19. Buletin Perpustakaan Vol.1 No.1
pp.65-80.
[2] Patriawati, Nur, and Hanum. A. N. L. 2021 Strategi Promosi Layanan E-Library Di
Perpustakaan Universitas Muhammadiyah Pontianak Pada Masa Pandemi Covid-19.
Jurnal Pendidikan Dan Pembelajaran Khatulistiwa Vol.1 No.1 pp.14-15
[3] Abdulloh, R. 2017. Membuat Toko Online dengan Teknik OOP, MVC, dan AJAX. Elex
Media Komputindo.
[4] Payne, Rap. 2019. Beginning App Development with Flutter: Create Cross-Platform
Mobile Apps. Apress.
[5] Segaran, Toby. 2007. Programming collective intelligence: building smart web 2.0
applications. O'Reilly Media, Inc.
[6] Hasibuan, Malayu S.P. 2007. Organisasi dan Motivasi Dasar Peningkatan
Produktivitas. Jakarta: PT. Bumi Aksara.
[7] Pressman, Roger S. 2010 Software Engineering: A practitioners Ap-proach.
McGrawHill. New York 68.