MAKALAH

APLIKASI TEKNOLOGI ONLINE

IF-9

Dosen : Eko Budi Setiawan, S.Kom., M.T

Disusun oleh :

Athian Rizki 10119337

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER
UNIVERSITAS KOMPUTER INDONESIA
2021
 KATA PENGANTAR

Assalamu’alaikum Warahmatullahi Wabarakatuh

Alhamdulillahirabil’alamin. Puji syukur kehadirat Allah SWT yang telah memberikan

rahmat dan hidayah-Nya sehingga saya dapat menyelesaikan makalah yang berjudul Aplikasi
Teknologi Online ini tepat pada waktunya.

Adapun tujuan dari penulisan dari makalah ini adalah untuk memenuhi tugas sekaligus
Ujian Akhir Semester pada Mata Kuliah Aplikasi Teknologi Online. Selain itu, makalah ini
juga bertujuan untuk menambah wawasan tentang Pembuatan Aplikasi Online Berbasis
Web dan Penambahan API bagi para pembaca dan juga bagi penulis.

Tidak lupa saya ucapkan terimakasih kepada Bapak Eko Budi Setiawan, S.Kom., M.T,
S.IP.,M.Si., selaku Dosen Aplikasi Teknologi Online di Universitas Komputer Indonesia
yang telah memberikan tugas ini sehingga dapat menambah pengetahuan dan wawasan sesuai
dengan bidang studi yang saya tekuni.

Saya menyadari, bahwa makalah yang saya susun ini masih jauh dari kata sempurna.
Oleh karena itu, kritik dan saran yang membangun akan saya nantikan demi kesempurnaan
makalah ini.

Wassalamu’alaikum Warahmatullahi Wabarakatuh

Majalengka, 07 Agustus 2021

Athian Rizki

i
 DAFTAR ISI

KATA PENGANTAR .......................................................................................................... i

DAFTAR ISI ....................................................................................................................... ii
DAFTAR GAMBAR .......................................................................................................... iii
DAFTAR TABEL .............................................................................................................. iv
DAFTAR SCRIPT .............................................................................................................. v
BAB 1 ................................................................................................................................... 1
PENDAHULUAN ............................................................................................................ 1
1.1 Latar Belakang .................................................................................................... 1
1.2 Rumusan Masalah ............................................................................................... 1
BAB 2 ................................................................................................................................... 2
PEMBAHASAN .............................................................................................................. 2
2.1 API Rajaongkir.................................................................................................... 2
2.2 Pembuatan Database Sementara........................................................................... 5
2.3 Koneksi ke Database ......................................................................................... 11
2.4 Desain Tampilan Aplikasi ................................................................................. 12
2.5 Fitur Aplikasi .................................................................................................... 18
BAB 3 ................................................................................................................................. 28
PENUTUPAN ................................................................................................................ 28
Kesimpulan ................................................................................................................. 28

ii
 DAFTAR GAMBAR

Gambar 2.1. 1 Situs web rajaongkir.com ............................................................................... 2

Gambar 2.1. 2 Form Daftar akun rajaongkir untuk mendapatkan key API ............................. 2
Gambar 2.1. 3 Contoh pengisian form situs rajaongkir .......................................................... 3
Gambar 2.1. 4 Email untuk aktivasi akun rajaongkir ............................................................. 3
Gambar 2.1. 5 Key API yang didapatkan pada web rajaongkir.com ....................................... 4
Gambar 2.1. 6 Source code req. province yang disediakan rajaongkir.com ............................ 4
Gambar 2.1. 7 Source code req. City yang disediakan rajaongkir.com ................................... 5

Gambar 2.4. 1 Tampilan depan Aplikasi Berbasis Web ....................................................... 12

Gambar 2.5. 1 Fitur login untuk Costumer/User .................................................................. 19

Gambar 2.5. 2 Fitur login untuk Admin ............................................................................... 19
Gambar 2.5. 3 Fitur registrasi/daftar akun bagi User baru .................................................... 20
Gambar 2.5. 4 Fitur penambahan produk kedalam keranjang oleh User ............................... 20
Gambar 2.5. 5 Fitur menampilkan isi keranjang Costumer/User .......................................... 21
Gambar 2.5. 6 Fitur menambah, mengurangi, dan menghapus produk pesanan sebelum
checkout.............................................................................................................................. 21
Gambar 2.5. 7Fitur cek ongkir untuk pengiriman paket menggunakan API.......................... 22
Gambar 2.5. 8 Fitur menisikan data alamat untuk pengiriman paket .................................... 22
Gambar 2.5. 9 Fitur menampilkan sukses Checkout dan Melakukan pembayaran ................ 23
Gambar 2.5. 10 Fitur admin dalam menambah, mengubah dan menghapus produk.............. 23
Gambar 2.5. 11 Fitur menambah produk oleh Admin .......................................................... 24
Gambar 2.5. 12 Fitur mengubah produk oleh Admin ........................................................... 24
Gambar 2.5. 13 Fitur ubah data Admin................................................................................ 25
Gambar 2.5. 14 Fitur tambah Admin ................................................................................... 25
Gambar 2.5. 15 Fitur mengubah data Costumer/User .......................................................... 26
Gambar 2.5. 16 Fitur menambah Costumer/User baru oleh Admin ...................................... 26
Gambar 2.5. 17 Fitur menampikan data transaksi yang dilakukan Costumer/User ............... 27

iii
 DAFTAR TABEL

Table 2.2. 1 Tabel produk database ....................................................................................... 5

Table 2.2. 2 Tabel admin database ......................................................................................... 6
Table 2.2. 3 Tabel login Costumer/User ................................................................................ 6
Table 2.2. 4 Tabel ongkir Costumer ...................................................................................... 6
Table 2.2. 5 Tabel pembayaran costumer............................................................................... 7
Table 2.2. 6 Tabel pembelian Costumer / user ....................................................................... 7

iv
 DAFTAR SCRIPT
Script 2.2. 1 Create database distro fashion shop ................................................................... 5
Script 2.2. 2 Create table pada database ................................................................................. 9
Script 2.2. 3 Insert into tabel produk .................................................................................... 10
Script 2.2. 4 Imsert into tabel admin .................................................................................... 11
Script 2.2. 5 Insert into tabel login Costumer / User............................................................. 11
Script 2.2. 6 Alter tabel pada database ................................................................................. 11

Script 2.3. 1 Koneksi ke database ........................................................................................ 11

Script 2.4. 1 Menampilkan produk dan profil user ............................................................... 13

Script 2.4. 2 Menampilkan barang sesuai kondisi yang ditentukan ....................................... 13
Script 2.4. 3 Registrasi User/Costumer baru ........................................................................ 14
Script 2.4. 4 Login User/Costumer sesuai username yang sudah terdaftar ............................ 14
Script 2.4. 5 Logut User dan Admin .................................................................................... 14
Script 2.4. 6 Menampilkan produk pada halaman admin ...................................................... 15
Script 2.4. 7 Untuk request pemanggilan data provinsi pada rajaongkir dengan Key API ..... 16
Script 2.4. 8 Untuk request pemanggilan data City pada rajaongkir dengan Key API ........... 17
Script 2.4. 9 Untuk request pemanggilan data paket pada rajaongkir dengan Key API ......... 18
Script 2.4. 10 Menampilkan opsi pada paket yang dipilih .................................................... 18

v
 BAB 1
PENDAHULUAN
1.1 Latar Belakang

Aplikasi Teknologi Online merupakan salah satu matakuliah yang ada di Perguruan
Tinggi Universitas Komputer Indonesia. Dimana Mahasiswa diberikan pembelajaran
mengenai pembuatan Aplikasi Online berbasis Web khususnya Mahasiswa Jurusan
Teknik Informatika. Didalam matakuliah tersebut mahasiswa diajarkan mengenai
penggunaan Bahasa pemrograman (PHP), Framework, Database, Hosting dan Domain.
Teknologi akan terus berkembang, seiring dnegan perkembangan zaman. Dengan
perkembangan teknologi maka aktivitas manusia akan lebih dipermudah. Sebgai contoh
yaitu banyaknya Online Shop yang menyediakan berbagai produk. Dengan adanya
Online Shop maka sangat memudahkan manusia dalam proses pemesanan
barang/produk. Manusia akan terus dimanjakan dengan Teknologi. Tidak perlu lagi pergi
berangkat berbelanja, sekarang sudah tersedia dalam Online Shop dan produk bisa
diantar ke rumah.
API adalah singkatan dari Application Programming Interface yaitu sebuah
software yang memungkinkan para developer untuk mengintegrasikan dan
mengizinkan dua aplikasi yang berbeda secara bersamaan untuk saling terhubung satu
sama lain..
Tujuan penggunaan dari API adalah untuk saling berbagi data antar aplikasi
yang berbeda tersebut, Tujuan penggunaan API lainnya yaitu untuk mempercepat
proses pengembangan aplikasi dengan cara menyediakan sebuah function yang terpisah
sehingga para developer tidak perlu lagi membuat fitur yang serupa.
Oleh karena itu, untuk mengikuti perkembangan zaman maka diperlukanlah
Developer untuk pembuatan Apliaksi Teknologi Online. Dan juga proses penambahan
API pada Aplikasi Berbasis Web agar bisa saling berbagi data antar aplikasi Sehingga
dalam makalah ini akan dibahas mengenai pembuatan Aplikasi Teknologi Online secara
bertahap.

1.2 Rumusan Masalah

1. Bagaimana cara pembuatan aplikasi online berbasis web?
2. Bagaimana cara menambahkan fitur API pada web?
3. Apasaja yang dibutuhkan dalam pembuatan aplikasi berbasis web?
4. Bagaimana proses Create Read Update Drop dalam pendatabasean?

1
 BAB 2
PEMBAHASAN
2.1 API Rajaongkir
Pada bagian ini akan dilakukan penambahan API pada aplikasi menggunakan API
Raja ongkir yang dappat diambil melalui link berikut https://rajaongkir.com/.

Gambar 2.1. 1 Situs web rajaongkir.com

Pertama buka link di atas, kemudian lakukan pendaftaran pada web tersebut untuk
mendapatkan Key API Rajaongkir. Seperti pada gambar dibawah.

Gambar 2.1. 2 Form Daftar akun rajaongkir untuk mendapatkan key API
2
Gambar 2.1. 3 Contoh pengisian form situs rajaongkir

Setelah melakukan pendaftaran silahkan buka email yang digunakan saat

pendaftaran dan lakukan Aktivasi akun melalui email yang didapat dari rajaongkir.com
dengan mengklik Aktivasi Akun.

Gambar 2.1. 4 Email untuk aktivasi akun rajaongkir

Setelah itu, login menggunakan akun yang sudah terdaftar. Kemudian klik Akun
dan pilih Panel untuk melihat Key API yang kita dapatkan. Lalu salin Key yang sudah
didapat dan simpan Key tersebut agar tidak hilang.

3
Gambar 2.1. 5 Key API yang didapatkan pada web rajaongkir.com

Kemudian masuk ke Pilihan Province lalu klik Contoh request kemudian masuk
ke tab PHP dan salin source code yang telah disediakan oleh rajaongkir.com.’
Begitupun source code data City. Simpan source code tersebut pada file
dataprovinsi.php dan datadistrik.php.

Gambar 2.1. 6 Source code req. province yang disediakan rajaongkir.com

4
Gambar 2.1. 7 Source code req. City yang disediakan rajaongkir.com

2.2 Pembuatan Database Sementara

Database dibuat sebelum memulai pembuatan aplikasi dan sebelum melakukan
webHosting. Pembuatan database digunakan didalam localhost/phpMyAdmin
menggunakan sql. Nama database yang digunakan yaitu db_distro_shop.
CREATE DATABASE db_distro_shop;
Script 2.2. 1 Create database distro fashion shop

➢ Menambahkan beberapa tabel

• Tabel barang dengan nama tabel tbl_barang
Digunakan untuk menyimpan data barang yang akan ditampilkan pada aplikasi

Nama Field Tipe Data Panjang Kunci Keterangan

id int 11 Primary Key Auto Increment, not null
nama varchar 35 not null
harga int 15 not null
stock int 4 not null
keterangan varchar 255 not null
gambar varchar 100 not null
berat int 5 not null
Table 2.2. 1 Tabel produk database

5
 • Tabel admin dengan nama tabel tb_admin
Digunakan untuk menyimpan data admin beserta password yang sudah di
enskripsi dengan md5 untuk login ke halaman admin

Nama Field Tipe Data Panjang Kunci Keterangan

id int 11 Primary Key Auto Increment, not null
id2 char 3 not null
username varchar 20 not null
nama varchar 30 not null
email varchar 50 not null
tlp varchar 13 not null
alamat varchar 70 not null
password varchar 100 not null
Table 2.2. 2 Tabel admin database

• Tabel login dengan nama tabel tb_login

Digunakan untuk menyimpan data user/costumer yang akan digunakan saat
login sebagai user/costumer dengan enskripsi password yaitu md5

Nama Field Tipe Data Panjang Kunci Keterangan

id int 11 Primary Key Auto Increment, not null
kode varchar 3 not null
username varchar 20 not null
nama2 varchar 30 not null
email varchar 50 not null
password varchar 100 not null
nama2 varchar 30 not null
tlp varchar 13 not null
alamat text not null
Table 2.2. 3 Tabel login Costumer/User

• Tabel ongkit dengan nama tabel tb_ongkir

Digunakan untuk menimpan data ongkir ang sudah melakukan chech out dan
melakukan pembayaran
Nama Field Tipe Data Panjang Kunci Keterangan
id_ongkir int 5 Primary Key Auto Increment, not null
nama_kota varchar 100 not null
tarif int 15 not null
Table 2.2. 4 Tabel ongkir Costumer

6
 • Tabel pembayaran dengan nama tabel tb_pembayaran
Digunakan untuk mengecek User/Pelanggan yang sudah melakukan
Pembayaran

Nama Field Tipe Data Panjang Kunci Keterangan

bank varchar 20 not null
bukti varchar 100 not null
id_pembayaran int 10 not null
id_pembelian int 10 not null
jumlah int 15 not null
nama varchar 100 not null
tanggal date not null
Table 2.2. 5 Tabel pembayaran costumer

• Tabel pembelian dengan nama tabel tb_pembelian

Digunakan untuk menyimpan data pelanggan/user yang telah melakukan
CheckOut.
Berikut Merupakan table yang digunakan:

Nama Field Tipe Data Panjang Kunci Keterangan

alamat_pengiriman text not null
distrik varchar 50 not null
ekspedisi varchar 15 not null
estimasi varchar 10 not null
id int 6 not null
pos varchar 10 not null
ongkir int 15 not null
paket varchar 100 not null
provinsi varchar 100 not null
resi_pengiriman varchar 20 not null
tanggal_pembelian date not null
tipe varchar 200 not null
total_berat int 15 not null
total_pembelian int 15 not null
Table 2.2. 6 Tabel pembelian Costumer / user

CREATE TABLE `tbl_barang` (

`id` int(11) NOT NULL,
`nama` varchar(35) NOT NULL,
`harga` int(15) NOT NULL,
`stock` int(4) NOT NULL,
`keterangan` varchar(255) NOT NULL,
`gambar` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tb_admin` (

`id` int(11) NOT NULL,

7
 `id2` char(3) NOT NULL,
`username` varchar(20) NOT NULL,
`nama` varchar(30) NOT NULL,
`email` varchar(50) NOT NULL,
`tlp` varchar(13) NOT NULL,
`alamat` varchar(70) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tb_hasil` (

`id` int(11) NOT NULL,
`nama` varchar(20) NOT NULL,
`username` varchar(20) NOT NULL,
`password` varchar(100) NOT NULL,
`email` varchar(35) NOT NULL,
`alamat` text NOT NULL,
`pos` varchar(10) NOT NULL,
`kota` varchar(20) NOT NULL,
`tlp` varchar(13) NOT NULL,
`norek` varchar(20) NOT NULL,
`narek` varchar(20) NOT NULL,
`bayar` varchar(100) NOT NULL,
`bank` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tb_login` (

`id` int(11) NOT NULL,
`kode` char(3) NOT NULL,
`username` varchar(20) NOT NULL,
`nama2` varchar(30) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(100) NOT NULL,
`nama` varchar(30) NOT NULL,
`tlp` varchar(13) NOT NULL,
`alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tb_ongkir` (

`id_ongkir` int(5) NOT NULL,
`nama_kota` varchar(100) NOT NULL,
`tarif` int(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tb_pembayaran` (

`bank` varchar(20) NOT NULL,
`bukti` varchar(100) NOT NULL,
`id_pembayaran` int(10) NOT NULL,
`id_pembelian` int(10) NOT NULL,
`jumlah` int(15) NOT NULL,
`nama` varchar(100) NOT NULL,
`tanggal` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tb_pembelian` (

`alamat_pengiriman` text NOT NULL,
`distrik` varchar(50) NOT NULL,

8
 `ekspedisi` varchar(15) NOT NULL,
`estimasi` varchar(10) NOT NULL,
`id_pelanggan` int(5) NOT NULL,
`kodepos` varchar(10) NOT NULL,
`ongkir` int(15) NOT NULL,
`paket` varchar(100) NOT NULL,
`provinsi` varchar(100) NOT NULL,
`resi_pengiriman` varchar(20) NOT NULL,
`status_pembelian` enum('pending','proses','selesai')
NOT NULL,
`tanggal_pembelian` date NOT NULL,
`tipe` varchar(200) NOT NULL,
`totalberat` int(15) NOT NULL,
`total_pembelian` int(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Script 2.2. 2 Create table pada database

➢ Pengisian Tabel Barang, Admin, dan User

Pengisian dilakukan pada localhost/phpMyAdmin menggunakan sql.
INSERT INTO `tbl_barang` (`id`, `nama`, `harga`, `stock`,
`keterangan`, `gambar`) VALUES
(1, 'Jaket Pria lKC', 155200, '30', 'Bahan berkualitas
bahan jeans\r\n', 'jaketpria.jpg'),
(2, 'Baju Pria Turnback Crime', 47000, '70', 'Bahan lembut
tidak panas', 'bajuturnback.jpg'),
(3, 'Jam Tangan Pria Guess', 1500000, '10', 'Jam tangan
Pria Guess Import Original\r\n', 'jamguess.jpg'),
(5, 'Jam Tangan Pria Garvinoes', 2360000, '10', 'Jam tangan
pria Garvinoes Import Original\r\n', 'jamgarvinoes.jpg'),
(6, 'Jam Tangan Pria Casio G-Shock', 1278000, '20', 'Jam
tangan Pria Casio G-Shock Local Berkualitas\r\n',
'jamgshock.jpg'),
(8, 'Celana Pria Chino Slimfit ', 65000, '90', 'Bahan
berkualitas lembut dan nyaman dipakai\r\n',
'celanachino.jpg'),
(9, 'Celana Pria Musim Semi Casual Olahraga', 50000, '100',
'Bahan lembut dan nyaman dipakai\r\n',
'celanamusimsemi.jpg'),
(10, 'Celana Wanita Baggy Pants', 46000, '100', 'Bahan
american drill dan nyaman\r\n', 'baggypants.jpg'),
(11, 'Baju Pria Sail Away', 32500, '100', 'Bahan nyaman
dipakai\r\n', 'kaossailaway.jpg'),
(13, 'Baju Kemeja Flanel',96000, '50', 'Bahan lembut dan
tidak panas\r\n', 'kemejaflanel.jpg'),
(14, 'Celana Pria Gantleman', 47000, '80', 'Bahan nyaman
dipakai dan tidak panas\r\n', 'celanagentlemen.jpg'),
(15, 'Celana Wanita Zipper Pants Cargo', 70000, '70',
'Bahan nyaman dan tidak panas\r\n', 'zipperpants.jpg'),
(16, 'Celana Wanita Aurelia Kulot Pants', 78000, '80',
'Bahan jeans nyaman dipakai\r\n', 'aureliakulot.jpg'),
(17, 'Baju Pria Lacost', 142000, '50', 'Bahan berkualitas
dan nyaman dipakai\r\n', 'kemejalacost.jpg'),
(18, 'Baju Pria Basic Combinasi Oxford', 100000, '70',
'Bahan berkualitas dan nyaman dipakai\r\n',
'kemejabasic.jpg'),

9
 (19, 'Jam Tangan Pria Lancelot', 867300, '15', 'Jam tangan
pria Lancelot Lokal kualitas dijamin Original\r\n',
'jamlancelot.jpg'),
(21, 'Jam Tangan Wanita Alexander Cristie', 1490000, '110',
'Jam tangan Wanita Alexander Cristie Import Original
Kece\r\n', 'jamalexander.jpg'),
(22, 'Jam Tangan Wanita Viena Summer', 798000, '25', 'Jam
tangan wanita Import Original Kece\r\n', 'jamviena.jpg'),
(24, 'Topi Snapback', 22000, '100', 'Bahan berkualitas dan
nyaman dipakai\r\n', 'topisnapback.jpg'),
(25, 'Topi Jaring ', 71500, '90', 'Topi jaring pria
berkualitas harga murmer\r\n', 'topijaring.jpg'),
(26, 'Tas Dinonico Selempang Pria', 56000, '100', 'Bahan
berkualitas kece dan anti air\r\n', 'dinonicotas.jpg'),
(28, 'Tas Waistbag Soulgate As Haul', 25000, '190', 'Nyaman
dipakai pas dipinggang\r\n', 'waistbagsoulgate.jpg'),
(29, 'Tas Selempang Slinbag Buffback', 25000, '100', 'Tas
selempang bahan kain berkualitas\r\n',
'tasselempangslinbag.jpg'),
(30, 'Tas Ransel Polo Hiero', 125000, '40', 'Tas Sekolah
stylish\r\n', 'ranselpolo.jpg'),
(31, 'Tas Selempang GJuang', 20000, '90', 'Bahan kain kece
untuk pria dan wanita\r\n', 'selempanggjuang.jpg'),
(32, 'Tas Raindoz Ransel Punggung', 50000, '60', 'Tas cocok
untuk sekolah\r\n', 'tasraindoz.jpg'),
(33, 'Sepatu Wanita Sneakers Mujigae ', 159900, '50',
'Bahan berkualitas empuk dan kece\r\n',
'sneakersmujigae.jpg'),
(34, 'Sepatu Wanita Lori Sport Tosca', 159900, '55', 'Bahan
berkualitas empuk dan kece murmer', 'lorisepatu.jpg'),
(35, 'Sepatu Jipyeong Sneakers Korea', 165000, '60', 'Bahan
berkualitas kuat nyaman dipakai\r\n',
'jipyeongsepatu.jpg'),
(36, 'Sepatu Pria Import', 195000, '40', 'Bahan berkualitas
nyaman dipakai\r\n', 'sepatupriaimpor.jpg'),
(37, 'Sepatu Boots Pria Helios Original', 179000, '50',
'Bahan berkualitas jahitan rapih gratis kaos kaki\r\n',
'sepatuboots.jpg'),
(38, 'Sepatu Pria Kulit Joemen Original',85000, '100',
'Bahan nyaman dipakai\r\n', 'sepatukulit.jpg'),
(39, 'Jaket Coach Mothbless', 126500, '60', 'Bahan lembut
dan nyaman', 'jaketcoach.jpg'),
(40, 'Jaket Pria Casual Polos', 125000, '50', 'Bahan
berkualitas premium dan nyaman dipakai\r\n',
'jaketcasual.jpg'),
(41, 'Jaket Wanita Olin Button', 43000, '100', 'Bahan jenas
dan nyaman dipakai\r\n', 'jaketolinbutton.jpg'),
(42, 'Jaket Hoodie Zip Up', 88000, '65', 'Bahan berkualitas
lembut dan harga murmer', 'hoodiezipup.jpg'),
(43, 'Topi Velcro', 159000, '50', 'Topi import kualitas
dijamin Original bahan tidak panas\r\n', 'topivelcro.jpg'),
(44, 'Topi Baseball', 179000, '50', 'Topi import kualitas
dijamin Original bahan nyaman dipakai\r\n',
'topibaseball.jpg'),
(45, 'Topi Kulit', 186000, '50', 'Topi kulit asli kualitas
mantap\r\n', 'topikulit.jpg');
Script 2.2. 3 Insert into tabel produk

10
 INSERT INTO `tb_admin`
(`id`,`id2`,`username`,`nama`,`email`,`tlp`,`alamat`,
`password`) VALUES
(1, `DFS`,'admin',`Athian
Rizki`,`athian.10119337@mahasiswa.unikom.ac.id`,`083107325952`,
`Majalengka`, '21232f297a57a5a743894a0e4a801fc3');
Script 2.2. 4 Imsert into tabel admin

INSERT INTO `tb_login` (`id`,`kode`, `username`,`nama2`,

`email`, `password`, `nama`, `tlp`, `alamat`) VALUES
(1,`DFS`, 'Athian',`Rizki`, 'kathiany75@gmail.com',
'21232f297a57a5a743894a0e4a801fc3', 'Athian', '083821111223',
'Majalengka');
Script 2.2. 5 Insert into tabel login Costumer / User

➢ Melakukan Alter Table

Dilakukan pada localhost/phpMyAdmin menggunakan sql.
ALTER TABLE `tbl_barang`
ADD PRIMARY KEY (`id`);
ALTER TABLE `tb_admin`
ADD PRIMARY KEY (`id`);
ALTER TABLE `tb_hasil`
ADD PRIMARY KEY (`id`);
ALTER TABLE `tb_login`
ADD PRIMARY KEY (`id`);
ALTER TABLE `tbl_barang`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=44;
ALTER TABLE `tb_admin`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=2;
ALTER TABLE `tb_hasil`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=17;
ALTER TABLE `tb_login`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=529;

Script 2.2. 6 Alter tabel pada database

2.3 Koneksi ke Database

Dilakukan untuk menghubungkan ke database ang telah dibuat, dan menggunakan
fungsi query untuk merelasikan setiap kolom dengan data yang akan di inputkan. Nama
file yang digunakan yaitu functions.php yang disimpan pada folder config.
<?php
define("HOST", "localhost");
define("USERNAME", "root");
define("PASSWORD", "");
define("DATABASE", "db_distro_shop");
$conn = mysqli_connect(HOST, USERNAME, PASSWORD, DATABASE);
Script 2.3. 1 Koneksi ke database

11
 2.4 Desain Tampilan Aplikasi
Aplikasi yang dibuat yaitu DISTRO FASHION SHOP, sebuah aplikasi Online
Shop yang menyediakan berbagai macam produk. Apliakasi tersebut bisa diakses oleh
siapapun namun untuk melakukan proses pembelian/tansaksi maka user/costumer harus
melakukan login terlebih dahulu agar bisa login maka User/Costumer harus melakukan
registrasi atau pembuatan akun terlebih dahulu. Dan juga bisa diakses oleh admin untuk
proses penambahan data.

Gambar 2.4. 1 Tampilan depan Aplikasi Berbasis Web

➢ Pembuatan file navbar.php

Setelah melakukan koneksi ke database pada file functions.php selanjutnya
pembuatan tampilan untuk navigasi bar atas. Berikut merupakan source code pada file
navbar.php untuk proses login dan logut yang ada dalam navigasi bar atas.
<?php
if (!empty($_SESSION["items"])) :
$count = $_SESSION["items"];
?>
<span class="badge" style="margin-left: 10px">
<?= count($count); ?>
</span>
<?php endif; ?>
</a>
</li>
<li id="show_login">
<?php
if (isset($_SESSION['username'])) {
?>
<a href="profil.php" class="element place-right">Selamat
datang,
<?php echo "$_SESSION[username]";?>

<?php

12
 } else {
?>
<span class="element-divider"></span>
<a href="login_form.php"><i class="fa fa-user" style="padding-
right: 10px"></i>Login</a>
<?php
}
?>
Script 2.4. 1 Menampilkan produk dan profil user

➢ Pembuatan file footer.php

Didalam file ini berisi kode untuk tampilan bawah pada aplikasi.
➢ Pembuatan file kategori.php
Didalam file ini berisi kode untuk menampilkan kategori barang yang sudah di
inputkan melalui database.
Simpan file navbar.php , footer.php, dan kategori.php dalam satu folder dengan
nama folder yaitu part.
➢ Pembuatan file index.php
Didalam file ini berisi kode untuk pemanggilan data dalam database dan
ditampilkan pada layer utama . Simpan file index.php dalam direktori
C\xampp\htdocs\Distro_Fashion_Shop. Berikut merupakan kode untuk
pemanggilan data dalam database :
<?php
require 'config/functions.php';
$tbl_barang = query("SELECT * FROM tbl_barang ORDER BY id LIMIT 3");
$tb_barang = query("SELECT * FROM tbl_barang WHERE stock LIKE
'%10%'");
$tl_barang = query("SELECT * FROM tbl_barang WHERE stock LIKE '%40%'
LIMIT 3");
$t_barang = query("SELECT * FROM tbl_barang WHERE stock LIKE '%50%'
LIMIT 3");
$tlb_barang = query("SELECT * FROM tbl_barang WHERE stock LIKE
'%60%' LIMIT 3");
if (!isset($_SESSION)) {
session_start();
}
?>
Script 2.4. 2 Menampilkan barang sesuai kondisi yang ditentukan

➢ Pembuatan file daftar_form.php

Dalam file ini berisi kode untuk proses pendaftaran User/Costumer dalam
pembuatan akun, yang dimana data akan disimpan ke table tb_login.
<?php
require 'config/functions.php';

if (isset($_POST["register"])) {
if (registrasi($_POST) > 0) {
echo "<script>

13
 alert('User baru ditambahkan');
document.location.href = 'login_form.php';
</script>";
} else {
echo mysqli_error($conn);
}
}?>
Script 2.4. 3 Registrasi User/Costumer baru

➢ Pembuatan file login_form.php

Dalam file ini berisi kode untuk proses pengecekan User/Costumer dalam proses
login akun setelah pembuatan akun. Dan data yang dipanggil dari table tb_login.
<?php
session_start();
require 'config/functions.php';
if (isset($_POST["login"])) {
$username = $_POST["username"];
$password = $_POST["password"];
$result = mysqli_query($conn, "SELECT * FROM tb_login
WHERE username = '$username' AND
password=md5('$password')");
// cek username
if (mysqli_num_rows($result) === 1) {
$_SESSION['username'] = $username;
$_SESSION['password'] = $password;
header("Location:index.php");
exit;
}
$error = true;
}?>
Script 2.4. 4 Login User/Costumer sesuai username yang sudah terdaftar

➢ Pembuatan file logout.php

File ini berfungsi untuk logout dari aplikasi yang dibuat. Berikut codenya
<?php
session_start();
session_destroy();
session_unset();
header('Location:index.php');
?>
Script 2.4. 5 Logut User dan Admin

➢ Pembuatan file index.php

File index.php yang dibuak kali ini untuk menampilkan perintah login admin. File
ini disimpan pada folder admin, folder admin digunakan untuk memisahkan file
user dan admin agar program tidak keliru saat pemanggilan file.
Berikut code dalam filr index.php.
<?php
session_start();

require '../config/functions.php';

14
 if (isset($_POST["login"])) {
$username = $_POST["username"];
$password = $_POST["password"];

$result = mysqli_query($conn, "SELECT * FROM tb_admin WHERE

username = '$username' AND password =md5('$password')");
// cek username
if (mysqli_num_rows($result) === 1) {

$_SESSION['username'] = $username;
$_SESSION['password'] = $password;
header("Location:beranda.php");
exit;
}
$error = true;
}

Script 2.4. 6 Menampilkan produk pada halaman admin

➢ Pembuatan file dataprovinsi.php

File ini digunakan untuk mengkoneksikan Aplikasi yang dibuat ke API pada
rajaongkir.com, sehingga kita tinggal memanggil file tersebut untuk menggunakan
fungsinya dan didalamnya terdapat script yang diambil dari rajaongkir.com untuk
request pemanggilan data provinsi. Berikut merupakan source codenya
<?php

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.rajaongkir.com/starter/province",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
// Silahkan diisi dengan api_key dari rajaongkir.com
"key: 03fd5e28270910e0ea278755c84a6031 "
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
// Hasilnya dalam bentuk json
// kita koversi ke array
$array_response = json_decode($response, TRUE);
$dataprovinsi = $array_response['rajaongkir']['results'];

15
 echo "<option value=''>-Pilih provinsi--</option>";

foreach($dataprovinsi as $key => $tiap_provinsi){

echo "<option value='".$tiap_provinsi['province_id']."'
id_provinsi='".$tiap_provinsi['province_id']."'>";
echo $tiap_provinsi['province'];
echo "</option>";
}
}
Script 2.4. 7 Untuk request pemanggilan data provinsi pada rajaongkir dengan Key API

➢ Pembuatan file datadistrik.php

File ini digunakan untuk mengkoneksikan Aplikasi yang dibuat ke API pada
rajaongkir.com, sehingga kita tinggal memanggil file tersebut untuk menggunakan
fungsinya dan didalamnya terdapat script yang diambil dari rajaongkir.com untuk
request pemanggilan data distrik/kota. Berikut merupakan source codenya
<?php

$id_provinsi_terpilih = $_POST['id_provinsi'];
$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL =>
"https://api.rajaongkir.com/starter/city?province=".$id_provinsi_terpilih,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
// Silahkan diisi dengan api_key dari rajaongkir.com
"key: 03fd5e28270910e0ea278755c84a6031 "
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
// echo $response;
// Menjadikan array dari json
$array_response = json_decode($response, TRUE);
$data_distrik = $array_response['rajaongkir']['results'];

echo "<option value=''>--Pilih distrik--</option>";

foreach($data_distrik as $key => $tiap_distrik){

echo "<option value='' id_distrik='".$tiap_distrik['city_id']."'
nama_provinsi='".$tiap_distrik['province']."'
nama_distrik='".$tiap_distrik['city_name']."'

16
 tipe_distrik='".$tiap_distrik['type']."'
kodepos='".$tiap_distrik['postal_code']."'>";
echo $tiap_distrik['type']." ";
echo $tiap_distrik['city_name'];
echo "</option>";
}
}
Script 2.4. 8 Untuk request pemanggilan data City pada rajaongkir dengan Key API

➢ Pembuatan file datapaket.php

File ini digunakan untuk mengkoneksikan Aplikasi yang dibuat ke API pada
rajaongkir.com, sehingga kita tinggal memanggil file tersebut untuk menggunakan
fungsinya dan didalamnya terdapat script yang diambil dari rajaongkir.com untuk
request pemanggilan data paket yang tersedia pada API. Berikut merupakan source
codenya
<?php

$ekspedisi = $_POST['ekspedisi'];
$distrik = $_POST['distrik'];
$berat = $_POST['berat'];

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.rajaongkir.com/starter/cost",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS =>
"origin=419&destination=$distrik&weight=$berat&courier=$ekspedisi",
CURLOPT_HTTPHEADER => array(
"content-type: application/x-www-form-urlencoded",
// Silahkan diisi dengan api_key dari rajaongkir.com
"key: 03fd5e28270910e0ea278755c84a6031 "
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
// echo $response;

// Dijadikan ke array
$array_response = json_decode($response, TRUE);

17
 $paket = $array_response['rajaongkir']['results']['0']['costs'];

// echo "<pre>";

echo "<option value=''>--Pilih paket--</option>";

foreach($paket as $key => $tiap_paket){

echo "<option paket='".$tiap_paket['service']."'
ongkir='".$tiap_paket['cost']['0']['value']."'
etd='".$tiap_paket['cost']['0']['etd']."'>";
echo $tiap_paket['service']." ";
echo "Rp.".number_format($tiap_paket['cost']['0']['value']).",- ";
echo $tiap_paket['cost']['0']['etd'];
echo "</option>";
}
}
Script 2.4. 9 Untuk request pemanggilan data paket pada rajaongkir dengan Key API

➢ Pembuatan file jasaekspedisi.php

File ini digunakan untuk menyimpan data jasa ekspedisi yang disediakan
rajaongkir.com agar bisa dimasukan kedalam database
<option value="">--Pilih ekspedisi--</option>
<option value="pos">Pos Indonesia</option>
<option value="tiki">TIKI</option>
<option value="jne">JNE</option>
Script 2.4. 10 Menampilkan opsi pada paket yang dipilih

2.5 Fitur Aplikasi

Pada pembuatan aplikasi dibuat beberapa fitur didalamnya. Diantaranya fitur :
1. Registrasi/daftar sebagai Costumer untuk pembuatan akun baru dalam web
2. Login untuk Costumer/User
3. Menampilkan data diri Costumer/User
4. Menampilkan produk yang tersedia
5. Costumer/User dapat memilih produk untuk dimasukan kedalam keranjang
belanja dan dapat menambahkan data keranjang belanja
6. Costumer dapat melihat detail produk yang tersedia
7. Chechout yang dilakukan costumer dengan mengisikan data untuk
menampilkan proses Checkout
8. Costumer/User dapat memilih jasa ekspedisi untuk pengiriman paket sesuai
alamat yang telah ditentukan
9. Costumer/User dapat menambah dan mengurangi produk dalam keranjang
10. Costumer/User dapat logut dari akun
11. Menampilkan profil Costumer/User
12. Terdapat fitur login Admin di halaman login di beranda
13. Admin dapat menambahkan,menghapus,mengedit produk/barang yang
ditampilkan
14. Admin dapat menambah, dan menghapus data Costumer/User baru
15. Admin dapat menambah, dan menghapus akun admin lain
16. Admin dapat melihat proses transaksi yang dilakukan Costumer/User
17. Menampilkan profil admin

18
Gambar 2.5. 1 Fitur login untuk Costumer/User

Gambar 2.5. 2 Fitur login untuk Admin

19
Gambar 2.5. 3 Fitur registrasi/daftar akun bagi User baru

Gambar 2.5. 4 Fitur penambahan produk kedalam keranjang oleh User

20
Gambar 2.5. 5 Fitur menampilkan isi keranjang Costumer/User

Gambar 2.5. 6 Fitur menambah, mengurangi, dan menghapus produk pesanan sebelum checkout

21
Gambar 2.5. 7Fitur cek ongkir untuk pengiriman paket menggunakan API

Gambar 2.5. 8 Fitur menisikan data alamat untuk pengiriman paket

22
Gambar 2.5. 9 Fitur menampilkan sukses Checkout dan Melakukan pembayaran

Gambar 2.5. 10 Fitur admin dalam menambah, mengubah dan menghapus produk

23
Gambar 2.5. 11 Fitur menambah produk oleh Admin

Gambar 2.5. 12 Fitur mengubah produk oleh Admin

24
Gambar 2.5. 13 Fitur ubah data Admin

Gambar 2.5. 14 Fitur tambah Admin

25
Gambar 2.5. 15 Fitur mengubah data Costumer/User

Gambar 2.5. 16 Fitur menambah Costumer/User baru oleh Admin

26
Gambar 2.5. 17 Fitur menampikan data transaksi yang dilakukan Costumer/User

27
 BAB 3
PENUTUPAN
Kesimpulan
API merupakan singkatan dari Application Programming Interface yaitu sebuah software
yang memungkinkan para developer untuk mengintegrasikan dan mengizinkan dua aplikasi
yang berbeda secara bersamaan untuk saling terhubung satu sama lain.
Dalam Pembuatan Aplikasi Berbasis Web para developer banyak menggunakan API,
guna mempermudah dalam pengembangan aplikasi atau perangkat lunak yang sedang
dibangun. Dalam laporan ini telah dijelaskan bagaimana cara pembuatan API pada web
rajaongkir.com.
Dalam aplikasi yang dibuat diatas memiliki banyak fitur. Dalam pembuatan aplikasinya
membutuhkan proses CRUD (Create , Read, Update, Drop). Bahasa aplikasi yang digunakan
yaitu PHP. Dengan versi 5.6.
Didalam Implementasinya pada saat penggunaan atau pemasangan API tentulah
dibutuhkan Key agar bisa mengakses fungsi yang sudah ada. Rajaongkir.com merupakan
website yang memiliki API sehingga bisa kita gunakan dalam Aplikasi Online Shop.
Pada aplikasi yang dibuat seorang Costumer/User hanya dapat melihat data, dapat
merubah data namun hanya dalam keranjang belanja. Sedangkan Admin memiliki hak akses
seluruhnya, Admin dapat melihat menambah menghapus mengubah dan memperbarui dari
aplikasi yang dibuat.

28