MAKALAH

Application Programming Interface (API) Framework

Bootstrap Pada Pemrograman Web Dinamis
Makalah ini untuk memenuhi penilaian Ujian Akhir Semester (UAS) Ganjil Tahun Akademik
2019/2020, Mata Kuliah Sistem Terdistribusi

Yang di ampuh oleh Dosen :

Maulidiansyah, M.Kom

Di Susun Oleh :

Amirul Muttaqin

1821500032

PRODI TEKNOLOGI INFORMASI

FAKULTAS TEKNIK

UNIVERSITAS NURUL JADID

Paiton

2021
 KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat,
karunia, serta taufik dan hidayah-Nya kami dapat menyelesaikan makalah ini dengan baik
meskipun banyak kekurangan di dalamnya. Dan juga kami berterima kasih kepada Bapak,
Maulidiansyah,M.Kom, selaku Dosen mata kuliah Sistem Terdistribusi, Prodi Teknologi
Informasi, Fakultas Teknik, Universitas Nurul Jadid Paiton, yang telah memberikan tugas ini
kepada kami.

Kami sangat berharap makalah ini dapat berguna dalam rangka menambah wawasan
serta pengetahuan. Kami juga menyadari sepenuhnya bahwa di dalam makalah ini terdapat
kekurangan dan jauh dari kata sempurna. Oleh sebab itu, kami berharap adanya kritik, saran
dan usulan demi perbaikan makalah yang telah kami buat di masa yang akan datang,
mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun.

Semoga Makalah sederhana ini dapat di pahami bagi siapapun yang membacanya,
sekiranya Makalah yang telah disusun ini dapat berguna bagi kami sendiri maupun orang
yang membacanya, sebelumnya kami mohon maaf apabila terdapat kesalahan kata-kata yang
kurang berkenan dan kami memohon kritik dan saran yang membangun demi perbaikan di
masa depan.

Paiton, 06, Februari, 2021

Penulis

ii
 DAFTAR ISI
KATA PENGANTAR ................................................................................................................ii
DAFTAR ISI .............................................................................................................................iii
DAFTAR GAMBAR ................................................................................................................. iv
DAFTAR TABEL ...................................................................................................................... v
BAB I PENDAHULUAN .......................................................................................................... 1
1.1 LATAR BELAKANG................................................................................................ 1
1.2 RUMUSAN MASALAH............................................................................................ 1
1.1 TUJUAN PENULISAN ............................................................................................. 2
1.4 MANFAAT PENULISAN ......................................................................................... 2
BAB II TINJAUAN PUSTAKA ................................................................................................ 3
2.1 LANDASAN TEORI ................................................................................................. 3
2.1.1 Penelitian Pengembangan ..................................................................................... 3
2.1.2 Application Programming Interfice (API) ............................................................ 3
2.1.3 Website ................................................................................................................. 3
2.1.4 Framework ............................................................................................................ 4
2.1.5 Bootsrap ................................................................................................................ 4
2.1.6 Datababse.............................................................................................................. 4
2.1.7 PHP (Perl Hypertext Preprocessor) ..................................................................... 4
2.1.8 Mysql .................................................................................................................... 5
2.1.9 Xampp .................................................................................................................. 5
2.1.10 Definisi Desain Sistem ......................................................................................... 5
2.1.11 Perancangan Basisdata ......................................................................................... 8
2.1.12 Entity Relationship Model (ERM) ....................................................................... 8
BAB III PEMBAHASAN ........................................................................................................ 10
3.1 LANGKAH – LANGKAH ...................................................................................... 10
3.1.1 Intalsi Bootsrap ................................................................................................... 10
3.1.2 Proses Pembuatan Database ................................................................................... 10
3.1.3 Proses Pembuatan Website dengan Bootsrap......................................................... 14
3.1 Demo website ............................................................................................................ 24
BAB IV PENUTUP .................................................................................................................. 28
4.1 Kesimpulan ............................................................................................................... 28
4.2 Saran ......................................................................................................................... 28
DAFTAR PUSTAKA ............................................................................................................... 29

iii
 DAFTAR GAMBAR
Gambar 1 - script pemanggilan boostrap .................................................................................. 10
Gambar 2 - Penulisan pada html .............................................................................................. 10
Gambar 3 - memulai database .................................................................................................. 10
Gambar 4 - Gambar Tampilan Awal mysql ............................................................................. 11
Gambar 5 - penamaan database ................................................................................................ 11
Gambar 6 - nama database........................................................................................................ 11
Gambar 7 - sukses .................................................................................................................... 12
Gambar 8- import tb ................................................................................................................. 12
Gambar 9- proses import .......................................................................................................... 13
Gambar 10 - tekan go ............................................................................................................... 13
Gambar 11 - sukses import ....................................................................................................... 13
Gambar 12 - file location .......................................................................................................... 14
Gambar 13 - folder ................................................................................................................... 14
Gambar 14- coidng login .......................................................................................................... 15
Gambar 15 - coding beranda .................................................................................................... 18
Gambar 16 - coding tambah ..................................................................................................... 20
Gambar 17 - coding edit ........................................................................................................... 23
Gambar 18 - coding logout ....................................................................................................... 24
Gambar 19 - login ..................................................................................................................... 24
Gambar 20 - tambah penduduk ................................................................................................ 25
Gambar 21 - Beranda ................................................................................................................ 26
Gambar 22 - menu edit penduduk ............................................................................................ 27

iv
 DAFTAR TABEL

Tabel 1 - Flowchart..................................................................................................................... 6
Tabel 2 - data flow ...................................................................................................................... 7
Tabel 3 - ERD ............................................................................................................................. 8

v
 BAB I
PENDAHULUAN

1.1 LATAR BELAKANG

Pada era globalisasi saat ini, kita tidak akan bisa lepas dengan teknologi yang
semakin berkembang pesat. Salah satunya adalah perkembangan Teknologi Informasi
yang secara tidak sengaja sudah menjadi kebutuhan pokok dalam segala hal dalam
kehidupan kita. Bekal kemampuan menggunakan dan memanfaatkan perangkat
teknologi merupakan salah satu faktor kunci untuk mengejar ketertinggalan SDM
Indonesia dari bangsa-bangsa lain. Program-program pendidikan dan latihan secara
formal maupun non formal yang memberikan bekal ketrampilan dan kemampuan
dalam menggunakan dan memanfaatkan perangkat teknologi menjadi prioritas
kebutuhan
Internet sampai sekarang ini telah berkembang cukup pesat sehingga telah
menyebar ke seluruh dunia. Perkembagan tersebut juga menjadi peluang yang sangat
bagus bagi seorang development dan programmer untuk mencari peluang usaha,
dengan demikian seorang yang berprofesi sebagai programmer bisa mengembangkan
atau menciptakan karyanya untuk di perjual belikan ke perusahaan atau instansi yang
membutuhkan, seperti contoh web sederhana input penduduk berbasis web dengan
framework bootstrap yang di buat oleh penulis..
Application Programming Interface (API) adalah antarmuka yang digunakan
untuk mengakses aplikasi atau layanan dari sebuah program. API memungkinkan
pengembang untuk memakai fungsi yang sudah ada dari aplikasi lain sehingga tidak
perlu membuat ulang dari awal.
Pada konteks web, API merupakan pemanggilan fungsi lewat Hyper Text
Transfer Protocol (HTTP) dan mendapatkan respon berupa Extensible Markup
Language (XML) atau JavaScript Object Notation (JSON). Respon yang didapat
dalam pemanggilan fungsi dapat bermacam-macam. Respon diatur oleh penyedia API.
Contoh situs yang sudah menyediakan jasa API. yaitu pada contoh Googleapis pada
bootstrap https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js.
1.2 RUMUSAN MASALAH

1. Menjelaskan tentang Application Programming interface (API)

2. Menjelaskan tentang Website
3. Menjelaskan tentang Framework
1
 4. Menjelaskan tentang Bootstrap
5. Menjelaskan tentang Database
6. Membuat website sederhana dengan Framework Bootstrap

1.1 TUJUAN PENULISAN

1. Mengetahui tentang API

2. Mengetahui tentang website
3. Mengeahui tentanf Framework
4. Mengetahui tentang Bootstrap
5. Mengeahui tentang Database
6. Mengetahui tentang perancangan serta pembuatan website

1.4 MANFAAT PENULISAN

Sebagai media ajar kepada seluruh mahasiswa atau masyarakat luas tentang
API dan Website serta fitur dari Framework bootstrap sendiri, dengan adanya makalah
ini dapat membantu menyalurkan pengetahuan tentang API dan Website, bagi penulis
sendiri adalah sebagai bahan evaluasi terkait materi yang telah di sampaikan oleh
dosen pada saat jam mata kuliah berlangsung.

2
 BAB II
TINJAUAN PUSTAKA

2.1 LANDASAN TEORI

Pada landasan teori membahas tentang definisi maupun konsep yang berkaitan
dengan penelitian yang dilakukan. Seperti Penelitian Pengembangan, Application
programming Interfice (API), website, Framewrok, Bootsrap dan lainnya.

2.1.1 Penelitian Pengembangan

Menurut Borg and Gall (1989: 624), educational research and

development is a process used to develop and validate educational
product. Atau dapat diartikan bahwa penelitian pengembangan
pendidikan adalah sebuah proses yang digunakan untuk
mengembangkan dan memvalidasi produk pendidikan. Hasil dari
penelitian pengembangan tidak hanya pengembangan sebuah produk
yang sudah ada melainkan juga untuk menemukan pengetahuan atau
jawaban atas permasalahan praktis
Metode penelitian dan pengembangan juga didefinisikan sebagai
suatu metode penelitian yang digunakan untuk menghasilkan
produk tertentu, dan menguji keefektifan produk tersebut. (Sanjani,
Hartati, & Sudarmaningtya, 2014)

2.1.2 Application Programming Interfice (API)

API kependekan dari Application Programming

Interface merupakan sebuah perangkat lunak yang dapat menerima
panggilan atau permintaan dari perangkat lunak lainnya seperti aplikasi
dan website yang memberikan pelayanan. Dengan kata lain API
merupakan sebuah perangkat lunak yang mengijinkan atau
menghubungkan dua aplikasi. Tidak hanya itu API juga digunakan
untuk membuat software dan aplikasi oleh para developer. API dapat
anda temui dalam kehidupan sehari-hari seperti saat anda memesan
hotel, mengirimkan pesan, memesan makanan secara online maupun
ketika mengunduh sebuah software. (netmonk, 2019)

2.1.3 Website
3
 Website adalah lokasi di internet yang menyajikan kumpulan
informasi sehubungan dengan profil pemilik situs. Website adalah
suatu halaman yang memuat situs-situs web page yang berada di
internet yang berfungsi sebagai media penyampaian informasi,
komunikasi, atau transaksi. (Hikmah, Supriadi, & Alawiyah, 2015)

2.1.4 Framework

Framework adalah kerangka kerja untuk mengembangkan

aplikasi berbasis website maupun desktop. Kerangka kerja disini sangat
membantu developer dalam menuliskan sebuah dengan lebih
terstruktur dan tersusun rapi.
Kerangka kerja diciptakan untuk mempermudah kinerja dari
programmer. Sehingga, seorang programmer tidak perlu untuk
menuliskan kode secara berulang – ulang. Karena di dalamnya sendiri
anda hanya perlu menyusun komponen – komponen pemrograman saja
(Media, 2022).
2.1.5 Bootsrap

Bootstrap adalah framework open-source khusus front end yang

awalnya dibuat oleh Mark Otto dan Jacob Thornton untuk
mempermudah dan mempercepat pengembangan web di front end.
Bootstrap memiliki semua jenis HTML dan template desain
berbasis CSS untuk berbagai fungsi dan komponen, seperti navigasi,
sistem grid, carousel gambar, dan tombol (button). (Tutorial, 2020)

2.1.6 Datababse

Database adalah kumpulan informasi yang disimpan di dalam

komputer secara sistematik sehingga dapat diperiksa menggunakan
suatu program komputer untuk memperoleh informasi dari basis data
tersebut. Database adalah representasi kumpulan fakta yang saling
berhubungan disimpan secara bersama sedemikian rupa dan tanpa
pengulangan (redudansi) yang tidak perlu, untuk memenuhi berbagai
kebutuhan. (Pendidikan, 2020)

2.1.7 PHP (Perl Hypertext Preprocessor)

4
 PHP merupakan bahasa standar yang digunakan dalam dunia
website. PHP adalah bahasa pemograman yang berbentuk skrip yang
diletakan di dalam server web. (Masrur, 2016)
2.1.8 Mysql
MySQL adalah salah open source SQL yang paling sering
digunakan untuk database management system. MySQL dikembangkan,
didistribusikan dan dimiliki oleh perusahaan MySQL AB [MSQL+].
SQL pada MySQL merupakan singkatan dari Structured Query
Language. (Masrur, 2016)
2.1.9 Xampp
Xampp merupakan sebuah aplikasi web server. Web server sendiri
adalah sebuah aplikasi tempat anda menyimpan file-file maupun data-
data untuk membuat website. Juga sering diartikan sebagai layanan data
pada web browser. Fungsi dari web server sebagai penerima
permintaan berupa halaman clien dan mengirimkan kembali hasil yang
diminta dalam bentuk halaman web. (Masrur, 2016)
2.1.10 Definisi Desain Sistem
Desain atau perancangan dalam pembangunan perangkat lunak
merupakan upaya untuk mengonstruksi sebuah sistem yang
memberikan kepuasan (mungkin informal) akan spesifikasi kebutuhan
fungsional, memenuhi target, memenuhi kebutuhan secara implicit atau
eksplisit dari segi performansi maupn penggunaan sumber daya,
keputusan batasan pada proses desain dari segi biaya, waktu, dan
perangkat. Kualitas perangkat lunak terhadap perangkat lunak yang
digunakan.
a. Flowchart
Flowchart adalah simbol-simbol pekerjaan yang
menunjukkan bagan alliran proses yang sling terhubung.
Jadi, setiap simbol flowchart melambangkan pekerjaan
dan instruksinya.
Berikut beberapa simbol standar flowchart yang
sering digunakan dalam pemrograman computer.

5
 Tabel 1 - Flowchart

No Keterangan
Simbol

Terminal menyatakan awal atau akhir dari

1.
suatu algoritma.

2. Menyatakan proses.

3. Proses yang terdefinisi atau sub program.

Menyatakan masukan dan keluaran

4.
(input/output).

Menyatakan penyambung ke simbol lain dalam

5.
satu halaman.

6. Menyatakan penyambung ke halaman lainnya.

Menyatakan percetakan (dokumen) pada

7.
kertas.

Menyatakan decision (keputusan) yang

8. digunakan untuk penyeleksian kondisi di
dalam program.

Menyatakan media penyimpanan drum

9.
magnetik.

Menyatakan operasi yang dilakukan secara

10.
manual.

Menyatakan input/output dari atau ke sebuah

11.
pita magnetik.

6
12. Menyatakan arah alir pekerjaan (proses).

Menyatakan piranti keluaran, seperti layar

13.
monitor, printer, dll.

(Sitorus, 2015)

b. Data Flow diagram

Menurut Kendal (2003) Data Flow Diagram adalah
suatu model logika data atau proses yang dibuat lebih
mendetail dibanding diagram konteks yang
diperbolehkan, bisa dicapai dengan mengembangkan
diagram. Sisa diagram asli dikembangkan ke dalam
gambaran yang lebih terperinci yang melibatkan tiga
sampai sembilan proses dan menunjukkan penyimpanan
data dan aliran data baru pada level yang lebih rendah.
(Anjar Priyadna, Berliana Kusuma Riasti, 2013, hal 23 )
Data Flow Diagram digambarkan dengan
menggunakan simbol-simbol yang terdapat pada Tabel
2

Tabel 2 - data flow

Simbol Nama Keterangan

Simbol Eksternal entitas

Eksternal Entity menggambarkan asal atau tujuan data
di luar sistem

Simbol proses menggambarkan

Proses entitas atau proses dimana aliran data
masuk

Simbol file menggambarkan tempat

Data Store
data disimpan

7
 Aliran data mengalir diantara proses,
Data Flow
data store dan terminator.

(Wahyudi & Utami, 2011)

2.1.11 Perancangan Basisdata

Basis data (database) merupakan salah satu komponen yang
penting dalam sebuah aplikasi, karena berfungsi sebagai basis penyedia
data bagi para pemakainya. Menurut Andri Kristanto (2008 : 79) basis
data adalah “Kumpulan data yang dapat digambarkan sebagai aktifitas
dari satu atau lebih organisasi yang berelasi”. (Masrur, 2016)
2.1.12 Entity Relationship Model (ERM)
Model Entity-Relationship yang berisi komponen-komponen
himpunan entitas dan himpunan relasi yang masing-masing dilengkapi
dengan atribut-atribut yang merepresentasikan seluruh fakta dari
„dunia nyata‟ yang ditinjau, dapat digambarkan dengan lebih
sistematis dengan menggunakan Diagram Entity-Relationship
(Diagram E-R).
Berikut notasi-notasi simbolik di dalam Diagram E-R yang terdapat
pada Tabel 3

Tabel 3 - ERD

Simbol Nama Keterangan

Sesuatu yang dibedakan dalam

Entity dunia nyata, informasi yang
berkaitan dengannya dikumpulkan

Hubungan yang terjadi antara satu

Relationship
atau lebih entity

8
 Karakteristik dari entity atau
Atribut relationship yang menyediakan
penjelasan detail

Sebagai penghubung antara himpunan

relasi dengan himpunan entitas dan
Link
himpunan entita s dengan atributnya

(Wahyudi & Utami, 2011)

9
 BAB III
PEMBAHASAN

3.1 LANGKAH – LANGKAH

3.1.1 Intalsi Bootsrap

Gambar 1 - script pemanggilan boostrap

Gambar tersebut adalah script untuk pemanggililan Bootstrap secara Online

Gambar 2 - Penulisan pada html

Gambar diatas adalah contoh penulisan script pada body website yang akan kita
buat nntinya
3.1.2 Proses Pembuatan Database

Gambar 3 - memulai database

Langakah pertama adalah menjalankan aplikasi xampp yang sudah ter intall di
Laptop atau di computer masing-masing, klik tombil start pada module Apache dan
Myaql jika terlihat sudah mendapatkan PID(s) dan Prort(2) maka aplikasi tersebut

10
sudah bisa di pakai untuk mengakses database yang akan kita buat, lanjut ke
langkah berikutnya

Gambar 4 - Gambar Tampilan Awal mysql

Pada saat ini kita sudah memasuki pada halaman pertama di database kita,
nah untuk membuat data base akan kita bahas di langkah selanjutanya.

Gambar 5 - penamaan database

Pada tahap ini kita langsung memasukan nama database yang kita inginkan,
dalam kolom isian di atas adalah tempat untuk memberi nama database kita contoh
isiannya akan di tampilkan pada gambar selanjutya.

Gambar 6 - nama database

11
 Dalam gambar diatas ada nama db_penduduk itu sebagai contoh penamaan
databse sesuai dengan kebutuhan kalian mau bikin website apa, lalu setelah
memasukkan nama pada kolom tersebut lalu tekan tombol create di bagian kanan.

Gambar 7 - sukses

Pada gambar di atas menunjukan bahawa sanya database yang tadi kita
inputkan di kolom sudah selesai dan kita bisa lihat di navbar bagian kita, ada nama
db_penduduk.

Gambar 8- import tb

Gambar sebelumnya masih belum terdapat table di dalamnya, nah untuk

menambah table ada dua pilihan, pertama jika kita sudah punya databesa bisa
langsung import dari pc aja, dan yang ke dua adalah dengan cara membuat secara
manual, pada kesempatan kali ini adalah menggunakan cara yang pertama yakni
import table yang sudah ada dengan cara klik tombol chose file.

12
 Gambar 9- proses import

Pada gambar 9 terdapat beberapa folder dan file yang terlihat, karena saat ini
adalah proses untuk import maka, file yang harus di pilih adalah file yang ber ektansi
.sql, jika kita memilih selain file yang ber ekstensi .sql maka file tersebut tidak akan
terbaca di dalam database.

Gambar 10 - tekan go

Setelah selesai memilih file tersebut maka langkah selanjutnya adalah klik tombol
Go, lalu tunggu prosesya sampai selesai

Gambar 11 - sukses import

Jika ada notif seperti di atas maka tandanya proses import table pada database
berjalan dengan lancar, langkah berikutnya adalah proses pembuatan website
sederhana dengam menggunakan framework Boostrap.

13
3.1.3 Proses Pembuatan Website dengan Bootsrap

Gambar 12 - file location

Gambar di atas adalah file lokasi penyimpanan untuk website

sederhana dengan menggunakan bootstrap (Local Disk D/xampp/htdoc/nama
folder)

Gambar 13 - folder

Gambar tersebut adalah isi dari folder yang akan kita panggil di
browser, folder tersebu sudah termasuk dengan folder bootstrap secara offline.

14
Gambar 14- coidng login

15
Gambar tersebut adalah coding untuk tampilan login

16
17
 Gambar 15 - coding beranda

Gambar diatas adalah coding untuk membuat tampilan beranda website

18
19
 Gambar 16 - coding tambah

Gambar diatas adalah coding untuk menambahkan penduduk

20
21
22
 Gambar 17 - coding edit

Gambar diatas adalah coding untuk menampilkan menu edit data

penduduk

23
 Gambar 18 - coding logout

Gambar diatas adalah coding untuk memnbuat tampilan di saat kita

logout dari website.

3.1 Demo website

Gambar 19 - login

24
Gambar 20 - tambah penduduk

25
Gambar 21 - Beranda

26
Gambar 22 - menu edit penduduk

27
 BAB IV
PENUTUP
4.1 Kesimpulan
API kependekan dari Application Programming Interface merupakan sebuah
perangkat lunak yang dapat menerima panggilan atau permintaan dari perangkat lunak
lainnya seperti aplikasi dan website yang memberikan pelayanan. Dengan kata lain API
merupakan sebuah perangkat lunak yang mengijinkan atau menghubungkan dua aplikasi.
Tidak hanya itu API juga digunakan untuk membuat software dan aplikasi oleh
para developer. API dapat anda temui dalam kehidupan sehari-hari seperti saat anda
memesan hotel, mengirimkan pesan, memesan makanan secara online maupun ketika
mengunduh sebuah software.
4.2 Saran
Lebih memperdalam lagi belajar tentang APi yang lain, karena zaman sekarang
banyak API lain yang sudah sanagat berkembang dengan pesat.

28
 DAFTAR PUSTAKA

Hikmah, A. B., Supriadi, D., & Alawiyah, T. (2015). Cara Cepat Membangun Website dari
Nol. Yogyakarta: CV.Andi Offset.
Masrur, M. (2016). Pemograman Web Dinamis Menggunakan Java Server Pages dengan
Database Relasional MYSQL. Yogyakarta: CV.Andi Offset.
Media, S. (2022, agustus 07). Sekawan Media. Retrieved february 08, 2021, from Pengenalan
Apa Itu Framework dan Jenisnya untuk Web Development:
https://www.sekawanmedia.co.id/pengertian-framework/
netmonk. (2019, march 26). Apa itu Api. Retrieved february 08, 2021, from Netmonk:
https://netmonk.id/apa-itu-api/
Pendidikan, G. (2020, december 19). Guru Pendidikan. Retrieved february 08, 2021, from
Pengertian Database Dan Perangkat Lunak:
https://www.gurupendidikan.co.id/pengertian-database/
Sanjani, Hartati, & Sudarmaningtya, T. (2014). Rancang Bangun Sistem Informasi
Penggajian Pegawai dan Remunerasi Jasa Medis Pada Rumah Sakit Bedah Surabaya.
Jurnal Sistem Informasi Vol.3 No.1, 87-93.
Sitorus, L. (2015). Algoritma dan Pemograman. Yogyakarta: CV.Andi Offset.
Tutorial, h. (2020, september 04). hostinger Tutorial. Retrieved february 08, 2021, from Apa
Itu Bootstrap dan Fungsinya? Panduan Bagi Pemula:
https://www.hostinger.co.id/tutorial/apa-itu-bootstrap/
Wahyudi, J., & Utami, F. H. (2011). SISTEM PAKAR DIAGNOSA PENYAKIT PADA
AYAM DENGAN METODE FORWARD CHAINING. Jurnal Media Infotama, 144.

29