LAPORAN HASIL PELAKSANAAN

PRAKTIK KERJA LAPANGAN

BMT AT TAUHID

Diajukan untuk Memenuhi Sebagai Nilai Praktik Kerja Lapangan

Kompetensi Keahlian Teknik Komputer dan Jaringan

Disusun Oleh :

Eka Dian Wananda ( 1018001422 )

SEKOLAH MENENGAH KEJURUAN TELKOM BANDUNG

TAHUN AJARAN 2020/2021

 LEMBAR PENGESAHAN

Laporan ini telah disetujui dan disahkan oleh :

Kepala Kompetensi Keahlian Pembimbing,

Teknik Komputer Jaringan,

Milkhatussyafa’ah Taufiq, S. T., M. T Fitri Yanti, S.Kom

NIP : 18930083 NIP : 15900015

Mengetahui dan Menyetujui:

Kepala SMK Telkom Bandung, Wakil Kepala Sekolah

Hubungan Industri dan
Komunikasi,

Dr. H. Daduk Merdika Mansur S. T., M. M, Muhammad Thoifur, S. T.

NIP : 13730024 NIP : 16870085

 KATA PENGANTAR

Puji syukur penyusun panjatkan kehadirat Allah SWT atas rahmat dan
karunia-Nya penyusun dapat melaksanakan Praktik Kerja Lapangan (PKL) dan
menyelesaikan laporan Praktik Kerja Lapangan yang dilaksanakan di BMT At
Tauhid dengan baik. Laporan ini disusun sebagai syarat untuk memenuhi sebagai
nilai PKL 2020 berdasarkan pengalaman dan data-data yang penyusun peroleh di
BMT At Tauhid.

Dari pengalaman PKL yang telah dilaksanakan BMT At Tauhid, penyusun

banyak mendapatkan pengetahuan, pembelajaran, dan pengalaman baru yang
dapat menjadi dasar dan bahan bagi penyusunan laporan ini. Penyusun menyadari
bahwa hal tersebut terlaksana atas bantuan berbagai pihak, baik secara langsung
maupun tidak langsung. Maka dari itu penyusun menyampaikan ucapan terima
kasih yang kepada pihak-pihak yang telah membantu dalam menyelesaikan
laporan ini, di antaranya :

1. Bapak Dr. H. Daduk Merdika Mansur, S.T., M.M. selaku Kepala SMK
Telkom Bandung,
2. Bapak Muhammad Thoifur, S.T. selaku Wakil Kepala Sekolah Bidang
Hubungan Industri dan Komunikasi,
3. Ibu Milkhatussyafa’ah Taufiq, S.T, M.T selaku Kepala Kompetensi
Keahlian Teknik Komputer Jaringan,
4. Ibu Fitri Yanti, S.Kom selaku Pembimbing Sekolah,
5. Bapak Dianto, S.Pd selaku Manager BMT At Tauhid,
6. Bapak Wasno, S.P selaku Ketua BMT At Tauhid,
7. Staf dan Karyawan BMT At Tauhid,
8. Bapak dan Ibu Guru SMK Telkom Bandung,
9. Serta seluruh pihak yang terlibat dalam kegiatan PKL dan pembuatan
laporan ini.

i
 Dalam penyusunan laporan hasil PKL ini, penyusun menyadari masih
terdapat banyak kekurangan baik dari sisi teknik penyusunan maupun materi.
Untuk itu penyusun mengharapkan kritik dan saran yang membangun dari semua
pihak untuk menyempurnakan laporan ini. Semoga laporan ini dapat bermanfaat
bagi semua pihak dan menjadi referensi untuk menambah wawasan dan ilmu
pengetahuan.

Purworejo, 19 September
2020

Penyusun

ii
 DAFTAR ISI
KATA PENGANTAR.......................................................................................................i
DAFTAR ISI...................................................................................................................iii
DAFTAR GAMBAR........................................................................................................v
DAFTAR TABEL............................................................................................................x
DAFTAR ISTILAH........................................................................................................xi
BAB I PENDAHULUAN.................................................................................................1
1.1 Latar Belakang........................................................................................................1
1.2 Rumusan Masalah....................................................................................................3
1.3 Tujuan......................................................................................................................3
1.4 Waktu dan Tempat...................................................................................................3
1.5 Metodeologi............................................................................................................4
BAB II LANDASAN TEORI...........................................................................................5
2.1 Bootstrap.................................................................................................................5
2.1.1 Sejarah Bootstrap..............................................................................................5
2.1.2 Tools yang Dibutuhkan dalam Bootstrap...........................................................6
2.1.3 Cara Memasang Bootstrap.................................................................................8
2.2 Sublime Text............................................................................................................9
2.2.1 Fitur yang Ada di Sublime Text.....................................................................10
2.2.2 Keunggulan Sublime Text..............................................................................12
2.3 File Zilla.................................................................................................................14
2.3.1 Sejarah FileZilla..............................................................................................14
2.3.2 Kelebihan FileZilla..........................................................................................15
BAB III PEMBAHASAN...............................................................................................16
3.1 Deskripsi Client.....................................................................................................16
3.2 Aktivitas Peserta PKL...........................................................................................17
3.2.1 Proses Pembuatan Website Perusahaan Halaman Home..................................17
3.2.2 Proses Pembuatan Website Perusahaan Halaman Personal.............................28
3.2.3 Proses Pembuatan Website Perusahaan Halaman Simpanan............................34
3.2.5 Proses Pembuatan Website Perusahaan Halaman Kontak...............................45
3.2.6 Meresponsifkan Website.................................................................................48
3.2.7 Hosting Website...............................................................................................50

iii
 3.3 Relevansi Teori dan Praktik antara DU/DI dan Sekolah........................................59
BAB IV PENUTUP........................................................................................................63
4.1 Kesimpulan...........................................................................................................63
4.2 Saran.....................................................................................................................64
4.2.1 Untuk Pihak Sekolah....................................................................................64
4.2.2 Untuk Pihak Perusahaan...............................................................................64
4.2.3 Untuk Pembimbing Lapangan......................................................................64
4.2.4 Untuk Pembimbing Sekolah.........................................................................64
DAFTAR PUSTAKA.....................................................................................................65
LAMPIRAN....................................................................................................................66

iv
 DAFTAR GAMBAR

Gambar 2.1 : Logo Bootstrap ..........................................................................5

Gambar 2.2 : Situs Resmi Boostrap .................................................................6

Gambar 2.3 : Situs Resmi jQuery ....................................................................7

Gambar 2.4 : Contoh Code Editor ...................................................................7

Gambar 2.5 : Syntax Bootstrap Online ............................................................8

Gambar 2.6 : Syntax Bootstrap Offline ............................................................9

Gambar 2.7 : Logo Sublime ............................................................................9

Gambar 2.8 : Gambar Sublime ........................................................................10

Gambar 2.9 : Icon FileZilla .............................................................................14

Gambar 3.1 : Logo Perusahaan ........................................................................16

Gambar 3.2 : Script Halaman Home.................................................................17

Gambar 3.3 : File CSS......................................................................................18

Gambar 3.4 : Script Halaman Home Navbar 1.................................................18

Gambar 3.5 : Script Halaman Home Navbar 2.................................................19

Gambar 3.6 : Tampilan Website Boostrap .......................................................19

Gambar 3.7 : Tampilan Halaman Home Website.............................................20

Gambar 3.8 : Script HTML Home Slider.........................................................21

Gambar 3.9 : Tampilan Home Search Website.................................................21

Gambar 3.10 : Script HTML Home Search......................................................21

Gambar 3.11 : Script CSS Home Search.........................................................22

Gambar 3.12 : Tampilan Home Q.S Al-Imran 130..........................................22

v
Gambar 3.13 : Script HTML Q.S Al-Imran 130..............................................23

16Gambar 3.14 : Script CSS Q.S Al-Imran 130...............................................23

Gambar 3.15 : Tampilan Home Berita Website................................................24

Gambar 3.16 : Script HTML Berita..................................................................24

Gambar 3.17 : Tampilan Home Ciri Layanan Kami Website...........................25

Gambar 3.18 : Script HTML Ciri Layanan Kami............................................25

Gambar 3.19 : Tampilan Home Footer Website...............................................26

Gambar 3.20 : Script HTML Home Footer......................................................26

Gambar 3.21 : Script CSS Home Footer..........................................................27

Gambar 3.22 : Tampilan Personal Slider Website............................................27

Gambar 3.23 : Script HTML Personal Slider...................................................28

Gambar 3.24 : Tampilan Personal Pilihan Lebih Lanjut Website....................28

Gambar 3.25 : Script HTML Personal Pilihan Lebih Lanjut...........................29

Gambar 3.26 : Script CSS Personal Pilihan Lebih Lanjut...............................29

Gambar 3.27 : Tampilan Personal Layanan Penawaran Special.....................30

Gambar 3.28 : Tampilan Personal Pembayaran Lainya...................................30

Gambar 3.29 : Tampilan Personal Visi Misi....................................................31

Gambar 3.30 : Tampilan Personal Cara Daftar................................................32

Gambar 3.31 : Tampilan Personal Cabang Lainya...........................................32

Gambar 3.32 : Tampilan Personal Lowongan Pekerjaan.................................33

Gambar 3.33 : Tampilan Personal Footer Website...........................................33

Gambar 3.34 : Script HTML Personal Footer..................................................34

Gambar 3.35 : Script CSS Personal Footer......................................................34

vi
Gambar 3.36 : Tampilan Halaman Simpanan Website.....................................35

Gambar 3.37 : Script HTML Simpanan Navbar..............................................35

Gambar 3.38 : Script HTML Personal Jumbotron...........................................36

Gambar 3.39 : Script CSS Personal Jumbotron...............................................36

Gambar 3.40 : Tampilan Simpanan Pengertian Simpanan...............................36

Gambar 3.41 : Script HTML Simpanan Pengertian Simpanan .......................37

Gambar 3.42 : Tampilan Simpanan Macam-Macam Simpanan.......................37

Gambar 3.43 : Script HTML Simpanan Macam-Macam Simpanan................38

Gambar 3.44 : Tampilan Simpanan Ketentuan Umum....................................38

Gambar 3.45 : Script HTML Simpanan Kententuan Umum............................39

Gambar 3.46 : Tampilan Simpanan Contoh Buku Simpanan..........................39

Gambar 3.47 : Tampilan Simpanan Footer .....................................................40

Gambar 3.48 : Tampilan Simpanan Icon WhatsApp........................................40

Gambar 3.49 : Script HTML Simpanan Whatsapp..........................................40

Gambar 3.50 : Tampilan Halaman Pinjaman Navbar dan Jumbotron.............41

Gambar 3.51 : Script HTML Pinjaman Navbar...............................................41

Gambar 3.52 : Script CSS Pinjaman Navbar..................................................41

Gambar 3.53 : Tampilan Pinjaman Jasa Peminjaman......................................42

Gambar 3.54 : Script HTML Pinjaman Jasa Peminjaman................................42

Gambar 3.55 : Tampilan Pinjaman Persyaratan Umum...................................43

Gambar 3.56 : Script HTML Pinjaman Persyaratan Umum............................43

Gambar 3.57 : Tampilan Pinjaman Footer.......................................................43

Gambar 3.58 : Script HTML Pinjaman Footer................................................44

vii
Gambar 3.59 : Tampilan Halaman Kontak.......................................................44

Gambar 3.60 : Tampilan Kontak Alamat.........................................................45

Gambar 3.61 : Script HTML Kontak Alamat...................................................45

Gambar 3.62: Tampilan Kontak Maps.............................................................46

Gambar 3.63 : Script HTML Kontak Maps......................................................46

Gambar 3.64 : Tampilan Kontak Footer..........................................................47

Gambar 3.65: Script HTML Kontak Footer.....................................................47

Gambar 3.66 : Tampilan Pilihan Pada Klik Kanan..........................................47

Gambar 3.67: Tampilan Inspect Responsif.......................................................48

Gambar 3.68 : Script CSS Responsif Mobile...................................................48

Gambar 3.69 : Hasil Copy CSS biasa ke Responsif..........................................49

Gambar 3.70 : Buka Website 000webhost........................................................49

Gambar 3.71: Tampilan Awal 000webhost......................................................50

Gambar 3.72 : Tampilan Halaman Daftar........................................................50

Gambar 3.73: Tampilan Halaman Hasil Daftar/ Log in...................................51

Gambar 3.74 : Tampilan Halaman Upload File...............................................51

Gambar 3.75 : Tampilan Website FileZilla......................................................52

Gambar 3.76 : Tampilan License Agreement...................................................52

Gambar 3.77 : Tampilan Choose Instalation Options......................................53

Gambar 3.78: Tampilan Choose Components..................................................53

Gambar 3.79 : Tampilan Choose Install Location...........................................54

Gambar 3.80: Tampilan Choose Start Menu Folder........................................55

Gambar 3.81 : Tampilan FileZilla Berhasil di Install......................................55

viii
Gambar 3.82 : Tampilan Apabila File dapat terupload....................................56

Gambar 3.83: Tampilan Icon Refresh...............................................................57

Gambar 3.84: Tampilan 000webhost Setelah Upload di Filezilla....................57

ix
 DAFTAR TABEL

Tabel 1.1 : Waktu dan Tempat Pelaksanaan PKL ............................................... 3

Tabel 3.1 : Relevansi Teori dan Praktik antara DU/DI dan Sekolah ................... 55

x
 DAFTAR ISTILAH

1. PKL adalah singkatan dari Praktik Kerja Lapangan .

2. Modul adalah kumpulan file sumber dan setelan build yang memungkinkan
membagi proyek ke dalam beberapa unit fungsionalitas diskret. Setiap
modul dapat dibuat, diuji, dan di debug secara independen.
3. Programmer adalah seseorang yang mampu menyelesaikan masalah dengan
menggunakan bahasa pemrograman.
4. Framework adalah sebuah software untuk memudahkan para programer
untuk membuat sebuah aplikasi website yang didalamnya ada berbagai
fungsi diantaranya plugin, dan konsep untuk membentuk suatu sistem
tertentu agar tersusun dan tersetruktur dengan rapih.

5. Script merupakan suatu code yang digunakan untuk menerjemahkan setiap

perintah dalam website. Yang menentukan kualitas fungsi dan tampilan
yang menarik dari sebuah website ketika diakses adalah seberapa banyak
jenis bahasa program yang digunakan. Semakin banyak ragam bahasa yang
digunakan akan membuat website semakin menarik, interaktif dan terlihat
lebih bagus.
6. Opensource atau sumber terbuka adalah sistem pengembangan yang tidak
dikoordinasi oleh suatu individu / lembaga pusat, tetapi oleh para pelaku
yang bekerja sama dengan memanfaatkan code sumber (source-code) yang
tersebar dan tersedia bebas (biasanya menggunakan fasilitas komunikasi
internet). Pola pengembangan ini mengambil model ala bazaar, sehingga
pola Open Source ini memiliki ciri bagi komunitasnya yaitu adanya
dorongan yang bersumber dari budaya memberi, yang artinya ketika suatu
komunitas menggunakan sebuah program Open Source dan telah menerima
sebuah manfaat kemudian akan termotivasi untuk menimbulkan sebuah
pertanyaan apa yang bisa pengguna berikan balik kepada orang banyak.

xi
7. Operating System atau sistem operasi  adalah perangkat lunak sistem yang
mengatur sumber daya dari perangkat keras dan perangkat lunak, serta
sebagai daemon untuk program komputer. Tanpa sistem operasi, pengguna
tidak dapat menjalankan program aplikasi pada komputer mereka, kecuali
program booting. Sistem operasi mempunyai penjadwalan yang sistematis
mencakup perhitungan penggunaan memori, pemrosesan data, penyimpanan
data, dan sumber daya lainnya. Untuk fungsi-fungsi perangkat keras seperti
sebagai masukan dan keluaran dan alokasi memori, sistem operasi bertindak
sebagai perantara antara program aplikasi dan perangkat keras
komputer, meskipun kode aplikasi biasanya dieksekusi langsung oleh
perangkat keras dan sering kali akan menghubungi OS atau terputus oleh
itu. Sistem operasi yang ditemukan pada hampir semua perangkat yang
berisi komputer-dari ponsel dan konsol permainan
video untuk superkomputer dan server web.
8. Default adalah hasil penyetelan tetap untuk menjalankan sebuah program atau
aplikasi.
9. Syntax adalah aturan menulis kalimat agar mampu dimengerti dengan benar
oleh bahasa pemrograman.
10. Responsive web design adalah suatu keadaan sebuah halaman website
dimana tampilannya akan cocok, rapi dan nyaman dipandang jika diakses
dari perangkat apapun dengan resolusi layar yang berbeda.

xii
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Sesuai dengan Keputusan Menteri Pendidikan dan Kebudayaan

RI Nomor 323/U/1997 bahwa Praktik Kerja Lapangan adalah suatu
program yang bersifat wajib yang merupakan bagian dari program
Pendidikan Sistem Ganda (PSG) dalam pedoman praktis pelaksanaan
Pendidikan Sistem Ganda (PSG) pada SMK disebutkan bahwa PKL
adalah praktik keahlian produktif yang dilaksanakan di industri atau
perusahaan yang berbentuk kegiatan mengerjakan pekerjaan produksi
atau jasa. Pada hakikatnya penerapan PSG meliputi pelaksanaan praktik
keahlian produktif, baik di sekolah dan di dunia usaha atau di dunia
industri (DU/DI). Sekolah membekali siswa dengan materi pendidikan
umum (normatif), pengetahuan dasar menunjang (adaptif), serta teori
dan keterampilan dasar kejuruan (produktif). Selanjutnya DU/DI
diharapkan dapat membantu bertanggung jawab terhadap peningkatan
keahlian profesi melalui program khusus yang dinamakan praktik
industri.

Program PKL di SMK bertujuan agar siswa memperoleh

pengalaman langsung bekerja pada industri yang sebenarnya. Oemar
Hamalik (2007) mengemukakan bahwa secara umum pelatihan
bertujuan mempersiapkan dan membina tenaga kerja, baik struktural
maupun fungisional, yang memiliki kemampuan berdisiplin yang baik.
Dengan demikian kegiatan ini diharapkan dapat meningkatkan
kemampuan dan keterampilan siwa agar memiliki rasa siap memasuki
dunia kerja.

1
 Seiring dengan perkembangan zaman perkembangan teknologi
informasi memberikan efek dalam berbagai bidang. Teknologi informasi juga
telah diadopsi pada sektor bisnis dengan produknya berupa E-Commerce.
Keberadaan E-Commerce mampu memfasilitasi para pelaku bisnis dalam
melakukan kegiatan perniagaan secara online di internet. Aktifitas
perdagangan seperti promosi dapat terakomodir dengan baik dan efektif. Hal
itu tidak lepas dari kegiatan usaha yang ada di BMT At Tauhid yang harus
mengikuti perkembangan zaman agar tidak tertinggal. Maka dari itu BMT At
Tauhid terus melakukan inovasi yang sesuai dengan perkembangan zaman
dan memberi manfaat untuk masyarakat.

BMT At Tauhid merupakan Kooperasi Jasa Keuangan Syariah . Baitul

Maal wa Tamwil atau disingkat dengan BMT lalu diberi nama menjadi BMT
At Tauhid . Badan ini terletak di Jatiwero, Prapag Kidul, Pituruh , Purworejo.
BMT At Tauhid belum memiliki website sampai sekarang sehingga penulis
mempunyai ide untuk membuatkan website agar memudahkan masyarakat
untuk mengetahui keuntungan yang didapat dan bisa mempublikasikan BMT
At Tauhid lebih luas.

Adanya pembuatan website ini dikarenakan guna meningkatkan profit

dan mengatasi hambatan-hambatan dalam pelayanan BMT At Tauhid apalagi
saat pandemi COVID-19 ,keberadaan Sistem Informasi ini sangat dibutuhkan,
sebagai salah satu strategi manajemen dalam meningkatkan profit dan mutu
pelayanan mengikuti perkembangan zaman dengan adanya website tersebut.

Website ini dibuat bedasarkan permasalahan tersebut. penyusun

berinisiatif membuat Website dengan menggunakan Sublime dengan
menggunakan framework Bootstrap.

2
1.2 Rumusan Masalah
1. Apa saja yang dilakukan oleh peserta PKL di BMT At Tauhid ?
2. Apa saja software yang digunakan dalam PKL?
3. Apa saja proses pembuatan website?
4. Apa fitur yang terdapat pada website BMT At Tauhid?

1.3 Tujuan
Tujuan dari pelaksanaan PKL di BMT At Tauhid diantaranya adalah :

1. Mengetahui kegiatan yang dilakukan oleh peserta PKL di BMT At

Tauhid.
2. Mengetahui software apa saja yang digunakan dalam PKL.
3. Mengetahui proses pembuatan website.
4. Mengetahui fitur yang terdapat pada website BMT At Tauhid.

1.4 Waktu dan Tempat

Adapun waktu dan tempat pelaksanaan PKL sebagai berikut:

No Nama Siswa Tempat PKL Waktu PKL

Waktu : 1 Agustus – 30
Agustus 2020

Jam kerja : 08.00 s/d 17.00

BMT At Tauhid,
WIB
Jatiwero ,Prapag
Eka Dian
1. Kidul ,Pituruh, Hari : Senin s/d Jumat
Wananda
Purworejo , Jawa
Tepatnya 30 hari x 10 jam
Tengah, Indonesia.
= 300 jam

Tanggal merah
menyesuaikan

3
1.5 Metodeologi

Penulisan laporan PKL ini terdapat 4 bab dengan rincian sebagai berikut :

BAB I PENDAHULUAN

Bab ini menjelaskan tentang latar belakang, rumusan masalah, tujuan,

waktu dan tempat, dan sistematika penulisan laporan PKL / Metedeologi.

BAB II LANDASAN TEORI

Pada bab ini menjelaskan tentang materi sekolah yang relevan

(menyesuaikan) dengan kegiatan PKL di Industri.

BAB III PEMBAHASAN

Bab ini menguraikan tinjauan umum BMT At Tauhid. Mengenai

sejarah singkat instansi, struktur organisasi, aktivitas peserta PKL di
tempat kerja dan di sekolah, relevansi teori dan praktik antara DU/DI
dengan sekolah.

BAB IV PENUTUP

Pada bab ini merupakan bab penutup yang menjelaskan kesimpulan

dan saran, baik bagi sekolah, perusahaan/instansi, pembimbing lapangan,
pembimbing sekolah, maupun bagi siswa selama pelaksanaan PKL.

4
 BAB II
LANDASAN TEORI
2.1 Bootstrap
2.1.1 Sejarah Bootstrap

Gambar 2.1 Logo Bootstrap

Sumber : https://worldvectorlogo.com/logo/bootstrap-4

Bootstrap adalah sebuah library framework CSS yang dibuat khusus

untuk bagian pengembangan front-end website. Bootstrap juga merupakan
salah satu framework HTML, CSS dan Javascript yang paling populer di
kalangan website developer yang digunakan untuk mengembangkan sebuah
website yang responsive. Sehingga halaman website nantinya dapat
menyesuaikan sesuai dengan ukuran monitor device seperti desktop, tablet,
handphone yang digunakan pengguna disaat mengakses website dari browser.

Bootstrap awalnya dibuat dan dikembangkan oleh programmer Twitter,

yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Saat itu memang para
programmer di Twitter menggunakan berbagai macam tools dan library yang
mereka kuasai untuk melakukan pekerjaannya, sehingga tidak ada
standarisasi dalam penamaan suatu class. Akibatnya sulit untuk dikelola,
maka dari itu keduanya membuat suatu tools ataupun framework yang
digunakan bersama di lingkungan internal Twitter.

Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi

dari proyek yang hanya berbasis CSS menjadi sebuah framework yang lebih
lengkap yang berisi Javascript plugin, icon, forms, dan button.

5
 Pada Januari 2012, Boostrap merilis versi 2.0 yang di dalamnya sudah
memasukkan fitur responsive web design, dan sejak itu Bootstrap sangat
banyak digunakan sehingga menjadi proyek Github yang banyak disalin
sampai 20.000 kali.

Dua tahun setetelah itu Bootstrap kembali mengeluarkan versi tebaru

yaitu versi 3.0 yang di dalamnya sudah mengakomodasi konsep ‘Mobile
First’ yang artinya di dalam pembuatan dan pengembangan mulai dari layar
yang terkecil dahulu (mobile/handphone/smartphone) dan secara bertahap
pada tampilan yang besar.

2.1.2 Tools yang Dibutuhkan dalam Bootstrap

Untuk mulai menggunakan Bootstrap, ada beberapa bahan dan tools
pendukung yang harus disiapkan terlebih dahulu. Berikut ini merupakan
tools-tools yang dibutuhkan dalam menggunakan Bootstrap.

1. File Distribusi Bootstrap

Resource file Bootstrap ini dapat diunduh di situs resmi Bootstrap,

yaitu di getbootstrap.com.

Gambar 2.2 Situs Resmi Bootstrap

Sumber : https://getbootstrap.com/

6
2. jQuery Library

Untuk bisa mengaplikasikan komponen Bootstrap seperti

navigation bar, modal dialog, dan lainnya yang membutuhkan
Bootstrap JS, Bootstrap JS juga membutuhkan jQuery library agar
website bisa berjalan normal. jQuery library dapat diunduh di situs
resminya yaitu jquery.com, kemudian pilih “Download the
compressed, production jQuery 3.4.1”.

Gambar 2.3 Situs Resmi jQuery

Sumber : https://jquery.com/

3. Code Editor

Code editor sangat penting untuk memanipuasi file yang akan kita
kembangkan khususnya file HTML, CSS, dan Javascript
sebagaimana file tersebut terdapat pada Bootstrap. Anda dapat
menggunakan Notepad ++, Sublime Text 3, Visual Studio Code,
dan lainnya.

Gambar 2.4 Contoh Code Editor

Sumber : https://www.reviversoft.com/blog/2013/04/text-editin-showdown/

7
2.1.3 Cara Memasang Bootstrap
Bootstrap dapat dipasang pada komputer dengan dua cara, yaitu secara
online dan offline. Berikut ini adalah cara menghubungkan Bootstrap dengan
website yang ingin kita buat :

1. Install secara online

Untuk menghubungkan Boostrap secara online dapat dilakukan

dengan cara menambahkan syntax berikut pada bagian <head>
pada halaman HTML.

Gambar 2.5 Syntax Bootstrap Online

Sumber : Dokumentasi Pribadi

2. Install secara offline

Memasang Boostrap secara offline terlebih dahulu harus memiliki

file distribusi yang bisa didapatkan di website resmi Bootsrap. File
tersebut disimpan pada folder pembuatan website. Setelah itu,
tambahkan syntax berikut pada halaman HTML.

8
 Gambar 2.6 Syntax Bootstrap Offline

Sumber : Dokumentasi Pribadi

2.2 Sublime Text

Gambar 2.7 : Logo Sublime

Sumber: https://forum.sublimetext.com/

Sublime Text adalah aplikasi editor untuk code dan teks yang dapat
berjalan diberbagai platform operating system dengan menggunakan
teknologi Phyton API. Terciptanya aplikasi ini terinspirasi dari aplikasi Vim ,
aplikasi ini sangat fleksibel dan powerfull. Fungsionalitas dari apliaksi ini

9
 dapat dikembangkan dengan menggunakan sublime-packages. Sublime Text
bukanlah aplikasi opensource dan juga aplikasi yang dapat digunakan dan
didapatkan secara gratis, akan tetapi bebrapa fitur pengembangan
fungsionalitas (packages) dari aplikasi ini merupakan hasil dari temuan dan 
mendapat dukungan  penuh dari  komunitas serta memiliki linsensi aplikasi
gratis.
Sublime Text mendukung berbagai bahasa pemograman dan mampu
menyajikan fitur syntax highlight hamper di smeua bahasa pemograma yang
didukung ataupun dikembangkan oleh komunitas seperti; C, C++. C#, CSS,
D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp,
Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL,
Textileand  XML. Biasanya bagi bahasa pemograman yang didikung ataupun
belum terdukung secara default dapat lebih dimaksimalkan atau didukung
dengan menggunakan add-ons yang bisa didownload sesuai kebutuhan user.

Gambar 2.8 : Gambar Sublime

Sumber: https://elib.unikom.ac.id/files/disk1/643/jbptunikompp-gdl-lambokhasi-32106-8-unikom_l-
i.pdf

10
2.2.1 Fitur yang Ada di Sublime Text
Berikut beberapa fitur yang diunggulkan dari aplikasi Sublime Text:

a.       Goto Anything
Fitur yang sangat membantu dalam membuka file ataupun
menjelajahi isi dari file hanya dengan beberapa keystrokes.
b.      Multiple Selections
Modul tipe ini support di semua projek Android dan hasil
akhirnya bernama AAR (Android Archive). Fitur ini
memungkinkan user untuk mengubah secara interaktif banyak baris 
sekaligus,  mengubah  nama  variabel  dengan  mudah,  dan
memanipulasi file lebih cepat dari sebelumnya.

c.       Command Pallete
Dengan hanya beberapa keystorkes, user dapat dengan cepat
mencari fungsi yang diinginkan, tanpa harus menavigasi melalu
menu.
d.      Distraction Free Mode
Bila  user  memerlukan  fokus  penuh  pada  aplikasi  ini,  fitur 
ini  dapat membantu user dengan memberikan tampilan layar penuh.
e.       Split Editing
Dapatkan  hasil  yang  maksimal  dari  monitor  layar  lebar
dari dukungan editing perpecahan. Mengedit sisi file dengan sisi atau
mengedit dua lokasi di satu file. Anda dapat mengedit dengan
banyak baris dan kolom yang user inginkan.
f.       Instant Project Switch
Menangkap semua file yang dimasukkan kedalam project pada
aplikasi ini. Terintegrasi dengan fitur Goto Anything untuk
menjelajahi semua file yang ada ataupun untuk beralih
ke file dalam project  lainnya dengan cepat.
g.      Plugin API
Dilengkapi  dengan  plugin  API  berbasis  Phyton  sehingga 
membuat aplikasi ini sangat tangguh.

11
 h.      Customize Anything
Aplikasi  ini  memberikan  user  fleksibilitas  dalam  hal 
pengaturan fungsional dalam aplkasi ini.
i.        Cross Platform
Aplikasi ini dapat berjalan hampir disemua  operating
system  modern seperti Windows, OS X, dan Linux based operating
system.

2.2.2 Keunggulan Sublime Text

Sejumlah fitur yang ada di dalam Sublime Text membuat aplikasi

Sublime banyak diminati oleh para programmer. Ukurannya yang cukup
ringan serta sejumlah fitur yang membantu untuk mengetik sejumlah syntax
program secara terstruktur dan mudah membuat Sublime sangat bermanfaat.
Berikut keunggulan dari Sublime Text,

1. Memindahkan Baris Syntax secara Cepat

Keunggulan yang pertama yaitu mampu memindahkan baris syntax

secara cepat. Ketika menggunakan Sublime Text, tidak perlu untuk copy
paste baris syntax. Tentu saja hal ini sangat membantu agar tidak perlu
repot dan membuang banyak waktu.

2. Membuat Comment Lebih Cepat

Keunggulan yang kedua yaitu mampu membuat comment lebih

cepat. Tentunya hal ini akan membantu terlebih jika sedang menjalankan
aplikasi bersamaan atau secara tim. Dengan menggunakan Sublime, bisa
membuat comment lebih cepat karena hanya dengan menekan tombol
ctrl+/.

12
3. Menggandakan Baris Syntax
Yang ketiga, keunggulan dari Sublime yaitu dapat menggandakan
baris syntax di baris tertentu lebih cepat. Caranya sangat mudah karena
hanya mengklik baris yang ingin digandakan, lalu tekan tombol
Ctrl+Shift+D.

4. Membuat Struktur dan Elemen HTML / PHP Lebih Mudah

Untuk cara membuat HTML/PHP sangat mudah. Hal itu tentu

dapat membantu dalam menyelesaikan pekerjaan dengan cepat. Dengan
fitur yang tersedia dan secara otomatis dapat membuat element html
dengan lebih cepat, hanya menggunakan shortcut Ctrl+Spasi. Contohnya
jika ingin buat struktur html dengan lebih cepat maka cukup mengetikkan
“html” saja. Lalu tekan tombol Ctrl+Spasi. Kerangka html dapat terbentuk
secara otomatis. jika ingin membuat elemen html, cukup ketik nama
elemennya, selanjutnya tekan tombol Ctrl+Spasi. Tidak berbeda ketika
membuat struktur dan elemen html, membuat php juga caranya sama
seperti yang sudah dijelaskan di atas, hanya perlu mengetik php lalu tekan
tombol Ctrl+Spasi. Yang perlu diingat yaitu filenya tentu harus terdapat di
file php.

5. Dapat Mengubah Teks dalam Jumlah yang Banyak

Keunggulan berikutnya yaitu dengan Sublime Text dapat
mengubah teks dalam jumlah yang banyak sekaligus dengan lebih mudah
dan cepat. Ketika ada banyak kesalahan yang dilakukan ketika
mengetikkan teks dalam jumlah yang banyak. Dengan fitur yang ada di
Sublime sehingga tidak harus memperbaiki kesalahan yang banyak satu
persatu.

13
2.3 File Zilla

2.3.1 Sejarah FileZilla

Gambar 2.9 : Icon FileZilla

Sumber : https://download.zone/filezilla-software-free-download/

FileZilla merupakan sebuah perangkat lunak berbasis open source

yang biasa digunakan untuk melakukan transfer data dari dan ke akun web
hosting.Software ini mendukung FTP, SFTP, dan FTPS (FTP di SSL/TLS).
Sejak 5 Maret 2009, software ini adalah software kelima yang paling populer
didownload sepanjang masa dari SourceForge.net. dan Software FileZilla
dibuat dan dikembangkan oleh Tim Kosse. Perangkat lunak komputer ini
memiliki kelebihan pada kecepatan dan kemudahannya dalam melakukan
transfer file. Jendela aplikasi terbagi menjadi dua, satu untuk menampilkan
file dan folder di komputer lokal, dan satu lagi untuk menampilkan file dan
folder di komputer server. Anda cukup melakukan drag dan drop untuk
mentransfer file dari komputer ke server jaringan/internet, atau sebaliknya.
Melalui fitur Site Manager, FileZilla dapat menyimpan akun dan alamat
beragam server FTP, dan menggunakannya secara cepat dan mudah. FileZilla
juga memungkinkan untuk melakukan koneksi ulang ke server yang terakhir
di akses sebelumnya, cukup dengan menekan satu tombol.

14
 Program FileZilla banyak diaplikasikan dan digunakan oleh kalangan
pengguna jaringan komputer dan internet. FileZilla merupakan software
gratis. FileZilla dapat dijalankan di sistem operasi Windows XP, Windows
Vista, Windows 7, juga tersedia untuk Linux dsn Mac OS.

2.3.2 Kelebihan FileZilla

FileZilla merupakan software yang bersifat open source atau software

yang biasa dipakai untuk melakukan transfer atau memindahkan data ke
akun web hosting pengguna dan sebaliknya. FileZilla bisa dipakai secara
gratis, selain itu FileZilla bisa melakukan perpindahan file berukuran besar
dengan cepat dan aman.

Program dari FileZilla FTP mudah untuk digunakan. Inilah mengapa

software tersebut banyak penggunanya dan bervariatif tipe penggunanya,
mulai dari newbie sampai orang-orang yang kemampuan teknisnya sudah
cukup bagus. Selain itu, kelebihan FileZilla FTP adalah sudah bisa
diintegrasikan pada beragam sistem operasi semacam Windows, Linux, Mac
OS X, BSD, dan lain-lain. Software ini juga bahkan tersedia dalam berbagai
macam bahasa.

Fitur –fitur dari FileZilla sudah lengkap mulai dari Site Manager,
Transfer Queues, Bookmarks, dan masih banyak yang lainnya.

15
 BAB III
PEMBAHASAN

3.1 Deskripsi Client

Client adalah sebuah Baitul Maal wa Tamwil atau disingkat dengan

BMT lalu diberi nama menjadi BMT At Tauhid . Badan ini terletak di
Jatiwero, Prapag Kidul, Pituruh , Purworejo. BMT At Tauhid belum memiliki
website sampai sekarang sehingga penulis mempunyai ide untuk membuatkan
website agar memudahkan masyarakat untuk mengetahui keuntungan yang
didapat dan bisa mempublikasikan BMT At Tauhid lebih luas.

Gambar 3.1 Logo Perusahaan

Sumber : Kantor BMT At Tauhid

Berdirinya badan ini tidak lepas dari latar belakang pengalaman para
pendirinya, dengan pengalaman dalam bisnis sejak 2010, kami memantapkan
langkah untuk selalu memprioritaskan kepercayaan, kepuasan nasabah dan
kualitas dari hasil pekerjaan kami.

2010 :.BMT At Tauhid berdiri pada hari Jum’at tanggal 26 Februari 2010
bertepatan dengan tanggal 12 Rabi’ul Awal Tahun 1431 H,atas ide prakarsa
Pembina Yayasan Masjid Jami’ At Tauhid Drs.H.Muhammad Tauhid,dengan
berbadan hukum (BH) : 159/BH/XIV.21/V/2010.

16
 2016 : BMT At Tauhid melakukan perubahan Anggaran Dasar dengan Badan
Hukum (BH): 159.a/BH/PAD/XIV.21/IV/2016.

2019 : BMT At Tauhid Membuka cabang di Megulungkidul, Pituruh,

Purworejo.

Yayasan BMT At Tauhid sangat mendukung adanya BMT At Tauhid

maka dari itu BMT terus berkembang dari tahun ke tahun.

3.2 Aktivitas Peserta PKL

3.2.1 Proses Pembuatan Website Perusahaan Halaman Home

Latar belakang dibuatnya sebuah website ini adalah dikarenakan
BMT At Tauhid belum mempunyai website sehingga pemilik memiliki
keinginan untuk membuat website dengan tujuan memberikan informasi lebih
luas mengenai BMT At Tauhid. Berikut langkah Pembuatan Website BMT At
Tauhid
Berikut ini merupakan langkah-langkah pembuatan Website BMT At
Tauhid:

1. Masuk ke apliaksi Sublime text lalu install boostrap dengan

menambahkan script berikut,

Gambar 3.2 script Halaman Home Website

17
 Sumber : Dokumentasi Pribadi

Pembuatan website ini dibuat dengan code editor Sublime Text 3.

Website ini juga menggunakan framework Bootstrap agar tampilan
terlihat modern dan responsive. Bootstrap dipasang dengan cara
menambahkan script pada bagian <head>.

2. Selanjutnya buat file CSS untuk mendukung penampilan website.

Cara membuat file css yaitu ,ketik css yang dibutuhkan lalu
save dan pilih css maka file tersebut akan berubah menjadi file css.

Gambar 3.3 File Css

Sumber : Dokumentasi Pribadi

3. Masukan script untuk bagian navbar . Bisa melihat revrensi di

website Bootstrap.

18
 Gambar 3.4 Script Halaman Home Navbar1

Sumber : Dokumentasi Pribadi

Gambar 3.5 Script Halaman Home Navbar

Sumber : Dokumentasi Pribadi

Gambar 3.6 Tampilan Website Boostrap

Sumber : Dokumentasi Pribadi

Untuk melihat revrensi dalam pembuatan website dapat

dilihat di website bootsrap yaitu www.bootstrap.com pada bagian
Example dapat melihat contoh dan nama component lalu dibagian

19
 Documentation dapat melihat script/code yang sesuai dengan
keinginan.

4. Pembuatan website informasi BMT At Tauhid dibutuhkan beberapa

bagian selain navbar maka ditambahkanya script slider ,karena slider
merupakan salah satu elemen penting pada website walaupun tidak
wajib slider dapat membuat website terlihat elegan dan lebih modern.
Selain itu juga bisa memberikan berbagai informasi dalam satu
tempat.

Gambar 3.7 Tampilan Halaman Home Website

Sumber : Dokumentasi Pribadi

Client meminta agar dihalaman paling depan dipamparkan

kantor BMT sehingga penulis memaparkanya dibagian slider .
Foto yang dipakai pada slider adalah dokumentasi pribadi.

20
 Gambar 3.8 Script Home Slider

Sumber : Dokumentasi Pribadi

5. Menambahkan grid untuk seacrh

Pada bagian search cukup sederhana supaya tidak terlalu
terkesan monoton.

Gambar 3 .9 Tampilan Home Search Website

Sumber : Dokumentasi Pribadi

Gambar 3 .10 Script HTML Home Search

Sumber : Dokumentasi Pribadi

21
 Gambar 3.11 Script CSS Home Search

Sumber : Dokumentasi Pribadi

6. Menambahkan grid untuk bagian menampilkan Q.S Al Imran 130

Pada bagian yang menmpilkan Q.S Al Imran 130 terdapat
efek mengetik yang diatur agar tidak bosan saat melihat website .
Untuk syntax bisa dilihat di gambar css.

Gambar 3.12 Tampilan Home Q.S Al-Imran130

Sumber : Dokumentasi Pribadi

22
Gambar 3 .13 Script HTML Q.S Al-Imran 130

Sumber : Dokumentasi Pribadi

Gambar 3.14 Script CSS Q.S al-Imran:130

Sumber : Dokumentasi Pribadi

23
7. Berita Seputar BMT At Tauhid
Berita seputas BMT At Tauhid dibagi menjadi 3 dengan
menggunakan card . Berita berita tersebut ditampilkan agar
pembaca menjadi yakin dengan BMT At Tauhid.

Gambar 3.15 Tampilan Home Berita Website

Sumber : Dokumentasi Pribadi

Gambar 3 .16 Script HTML Berita

Sumber : Dokumentasi Pribadi

24
8. Ciri Layanan BMT At Tauhid
Client meminta agar ciri layanan dari BMT At Tauhid
ditampilkan maka dari itu penulis membuat ciri layanan dibagian
home agar pembaca lebih tau dengan ciri layanan dari BMT At
Tauhid seperti halal,brbagi hasil kompetiti,modern dan cepat juga
bisa antar jemput .

Gambar 3 .17 Tampilan Home Ciri Layanan Kami

Sumber : Dokumentasi Pribadi

Gambar 3 .18 Script HTML Ciri Layanan Kami

Sumber : Dokumentasi Pribadi

25
9. Footer
Footer merupakan bagian paling bawah dari sebuah website .
Fungsi utamanya adalah sebagai kaki dan berisi informasi hak
cipta,alamat, serta link tambahan. Footer bagian home berbeda
dengan footer lainya karena penulis ingin membuat kesan yang
menarik dan berbeda dari bagian lain.

Gambar 3 .19 Tampilan Home Footer Website

Sumber : Dokumentasi Pribadi

Gambar 3 .20 Script HTML Home Footer

Sumber : Dokumentasi Pribadi

26
 Gambar 3.21 Script CSS Home Footer

Sumber : Dokumentasi Pribadi

3.2.2 Proses Pembuatan Website Perusahaan Halaman Personal

Halaman Personal merupakan Halaman yang berisikan penjelasan megenai
BMT At Tauhid lebih luas seperti Visi-Misi, bentuk Simpanan ,bentuk
Pinjaman dsb.

1. Slider

Slider yang ada di bagian Personal tidak terlalu menampilkan

banyak pesan agar pengunjung bisa fokus pada website dan tidak
meninggalkan website.

Gambar 3. 22 Tampilan Personal Slider Website

Sumber : Dokumentasi Pribadi

27
 Gambar 3. 23 Script HTML Personal Slider

Sumber : Dokumentasi Pribadi

2. Pilihan Lebih lanjut

Seperti tujuan utama penulis membuat personal adalah

menampilkan pilihan lebih lanjut atau informasi lebih luas dari BMT At
Tauhid makan dibuatnya 6 pilihan yang mencangkup informasi –
informasi penting yang berbeda dari BMT At Tauhid .

Gambar 3. 24 Tampilan Halaman Personal Pilihan Lebih Lanjut

Sumber : Dokumentasi Pribadi

28
 Gambar 3.25 Script HTML Personal Pilihan Lebih Lanjut

Sumber : Dokumentasi Pribadi

Gambar 3. 26 Script CSS Personal Pilihan Lebih Lanjut

Sumber : Dokumentasi Pribadi

A. Layanan Penawaran Special

Bagian layanan penawaran special merupakan bagian
paling kiri atau paling awal dalam mobille . Penulis sengaja
meletakan layanan penwaran special agar pengunjung tertarik
karena hakikatnya manusia mudah tertarik dengan hal yang
special.

29
 Gambar 3. 27 Tampilan Personal Layanan Penawaran Special

Sumber : Dokumentasi Pribadi

B. Pembayaran Lainya
Bagian Pembayaran lainya berisikan berbagai macam
pembayaran yang dapat dilakukan di BMT At Tauhid.

Gambar 3. 28 Tampilan Personal Pembayaran Lainya

Sumber : Dokumentasi Pribadi

30
C. Visi – Misi

Visi Misi merupakan hal yang penting dalam sebuah badan,

badan tidak akan berjalan apabila tidak ada visi dan misi yang
jelas. Maka dari itu bagian ketiga atau bagain kanan atas dalam
website berisikan visi dan misi dari BMT At Tauhid yang sudah
diresmikan.

Gambar 3. 29 Tampilan Personal Visi Misi

Sumber : Dokumentasi Pribadi

D. Cara Daftar
Cara daftar merupakan bagian yang berisikan langakah
langkah mendaftar Simpanan dan Pinjaman di BMT At Tauhid.

31
 Gambar 3. 30 Tampilan Personal Cara Daftra

Sumber : Dokumentasi Pribadi

E. Cabang Lainya
Bagian cabang lainya berisikan seputar informasi mengenai
unit cabang dari BMT At tauhid yaitu baitu maal At Tauhid.

Gambar 3. 31 Tampilan Personal Cabang Lainya

Sumber : Dokumentasi Pribadi

F. Lowongan Pekerjaan
Pada bagian lowongan pekerjaan menampilkan informasi
bagian yang sedang kosong / yang dibutuhkan oleh BMT At
Tauhid beserta syarat - syaratnya , namun karena sekarang belum
ada makan di bagian Lowongan Pekerjaan hanya menampilkan
bahwa sekarang belum ada lowonga pekerjaan di BMT At Tauhid.

32
 Gambar 3. 32 Tampilan Personal Lowongan Pekerjaan

Sumber : Dokumentasi Pribadi

G. Footer
Footer pada bagian Personal berbeda dengan Footer
halaman home tetapi sama dengan halaman lainya. Footer
berisikan alamat Bmt AtTauhid ,kontak dan link lainya.

Gambar 3. 33 Tampilan Personal Footer

Sumber : Dokumentasi Pribadi

33
 Gambar 3. 34 Script HTML Personal Footer

Sumber : Dokumentasi Pribadi

Gambar 3. 35 Script CSS Personal Footer

Sumber : Dokumentasi Pribadi

3.2.3 Proses Pembuatan Website Perusahaan Halaman Simpanan

Simpanan atau Tabungan merupakan deposit dana yang dipercayakan pada

suatu lembaga berdasarkan perjajian. Halaman simpanan memuat informasi
mengenai macam – macam simpanan ,ketentuan simpanan serta contoh
buku simpanan.

34
 Gambar 3. 36 Tampilan Halaman Simpanan

Sumber : Dokumentasi Pribadi

1. Navbar dan Jumbotron

Navbar merupakakan element yang mempermudah untuk
navigasi pada website . Navbar terdiri dari Home ,Personal, Simpanan,
Pinjaman dan Kontak.

Jumbotron merupakan elemenet pada website yang dibuat

dengan tujuan membuat suatu element dengan ukuran cukup besar
dengan informasi penting .

Gambar 3. 37 Script HTML Simpanan Navbar

Sumber : Dokumentasi Pribadi

35
 Gambar 3. 38 Script HTML Simpanan Jumbotron

Sumber : Dokumentasi Pribadi

Gambar 3. 39 Script CSS Simpanan Jumbotron

Sumber : Dokumentasi Pribadi

2. Grid pengertian simpanan

Pada bagian Pengertian simpanan berisikan informasi dn
pengertian tentang Simpanan , Apa itu simpanan? Dan tujuan
adanya simpanan. Sehingga Pengunjung bisa memahami secara
umum terlebih dahulu sebelum khusus dari BMT At Tauhid.

Gambar 3. 40 Tampilan Simpanan Pengertian Simpanan

Sumber : Dokumentasi Pribadi

36
 Gambar 3. 41 Script HTML Simpanan Pengerian Simpanan

Sumber : Dokumentasi Pribadi

3. Macam – Macam simpanan

Pada bagian macam macam simpanan di jelaskan apa saja jenis

simpanan yang ada di BMT At Tauhid .

Gambar 3. 42 Tampilan simpanan Macam Macam Simpanan

Sumber : Dokumentasi Pribadi

37
 Gambar 3. 43 Script HTML Simpanan Macam Macam Simpanan

Sumber : Dokumentasi Pribadi

4. Ketentuan Simpanan

Bagian ketentuan simpanan berisikan ketenuan ketentuan yang

harus dilakukan apabila ketika akan mendaftar simpanan di BMT At
Tauhid.

Gambar 3. 44 Tampilan Simpanan Ketentuan Umum Simpanan

Sumber : Dokumentasi Pribadi

38
 Gambar 3. 45 Script HTML Simpanan Ketentuan Umum Simpanan

Sumber : Dokumentasi Pribadi

5. Contoh buku Tabungan / Simpanan

Agar pengunjung lebih mengerti maka penulis memasukan gambar

dari buku simpanan di BMT At Tauhid karena terdapat berbagai macam
buku simpanan.

Gambar 3. 46 Tampilan Simpanan Contoh Buku Simpanan Website

Sumber : Dokumentasi Pribadi

10. Footer
Footer pada bagian Simpanan sama seperti Footer lainya
tetapi berbeda dengan footer halaman home. Footer berisikan
alamat,kontak serta link lainya.

39
 Gambar 3. 47 Tampilan Simpanan Footer

Sumber : Dokumentasi Pribadi

11. Icon WhatsApp

Whatsapp merupakan aplikasiyang sering orang gunakan
untuk bertukar pesan namun seiring berjalanya waktu Whatsapp juga
berfungsi untuk mengetahiu informasi secara pribadi yang sering
dilkukan oleh badan badan lainya. Maka dari itu adanya icon
whatsapp tersebut memudahkan pengunjnung untuk mengetahui
informasi lainya yang tidak bisa ditampilkan di website dalam satu
klik.

Gambar 3. 48 Tampilan Simpana Icon WhatsApp

Sumber : Dokumentasi Pribadi

Gambar 3. 49 Script HTML Simpana Whatssapp

Sumber : Dokumentasi Pribadi

40
3.2.4 Proses Pembuatan Website Perusahaan Halaman Pinjaman

Pada Halaman Pinjaman berisikan jenis-jenis pinjaman serta syarat

dan ketentuan yang harus dilaksanakan ketika akan melakukan pinjaman di
BMT At Tauhid.

1. Navbar dan Jumbotron

Gambar 3. 50 Tampilan Pinjaman Navbar dan Jumbotron Website

Sumber : Dokumentasi Pribadi

Gambar 3. 51 Script HTML Pinjaman Navbar

Sumber : Dokumentasi Pribadi

Gambar 3. 52 Script CSS Pinjaman Navbar

41
 Sumber : Dokumentasi Pribadi

2. Jasa Peminjaman
Jasa peminjaman memegang prinsip yang sesuai dengan agama
Islam, maka ditampilkanya prinsip – prinsip dari BMT At Tauhid .

Gambar 3. 53 Tampilan Pinjaman Jasa Peminjaman Website

Sumber : Dokumentasi Pribadi

Gambar 3. 54 Script HTML Pinjaman Jasa Peminjaman

Sumber : Dokumentasi Pribadi

3. Syarat dan Ketentuan Peminjaman

Syarat dan ketentuan ditampilkan agar ketika akan melakukan

pinjaman ke BMT At Tauhid sudah siap dengan segara syarat dan
ketentuanya.

42
 Gambar 3. 55 Tampilan Pinjaman Persyaratan Umum Peminjaman

Sumber : Dokumentasi Pribadi

Gambar 3. 56 Script HTML Pinjman Persyaratan Umum Pinjaman

Sumber : Dokumentasi Pribadi

4. Footer

Footer pada bagian Pinjaman sama seperti Footer lainya tetapi

berbeda dengan footer halaman home. Footer berisikan alamat,
kontak serta link lainya.

Gambar 3. 57 Tampilan Pinjaman Footer

Sumber : Dokumentasi Pribadi

43
 Gambar 3. 58 Script HTML Pinjaman Footer

Sumber : Dokumentasi Pribadi

3.2.5 Proses Pembuatan Website Perusahaan Halaman Kontak

Halaman kontak merupakan halaman terakhir di website At Tauhid
ini . Halaman kontak berisikan Alamat ,maps serta jam kerja dari BMT At
Tauhid.

Gambar 3. 59 Tampilan Kontak Website

Sumber : Dokumentasi Pribadi

1. Alamat
Alamat adalah letak suatu tempat . Memperluaskan alamat suatu
perusahaan penting karena pengunjung dapat dating langsung ke
perusahaan tersebut.

44
 Gambar 3. 60 Tampilan Kontak Alamat Website

Sumber : Dokumentasi Pribadi

Gambar 3. 61 Script HTML Kontak Alamat

Sumber : Dokumentasi Pribadi

2. Maps
Maps merupakan letak lokasi suatu tempat berada secara online . Maka
ditampikanya maps supaya pengguna bisa tau dimana tepatnya BMT At
Tauhid berada , berapakah jauh BMT At Tauhid dari tempat tinggal
pengunjung dll.

45
 Gambar 3. 62 Tampilan Kontak Maps

Sumber : Dokumentasi Pribadi

Gambar 3. 63 Script HTML Kontak Maps

Sumber : Dokumentasi Pribadi

3. Footer
Footer pada bagian kontak sama seperti Footer lainya tetapi
berbeda dengan footer halaman home. Footer berisikajn alamat,kontak
serta link lainya.

46
 Gambar 3. 64 Tampilan Kontak Footer Website

Sumber : Dokumentasi Pribadi

Gambar 3. 65 Script HTML Kontak Footer

Sumber : Dokumentasi Pribadi

3.2.6 Meresponsifkan Website

1. Klik kanan pada website ,pilih inspect

Gambar3. 66 Tampilan Pilihan Pada Klik Kanan

Sumber : Dokumentasi Pribadi

47
2. Tampilan akan muncul seperti berikut. Pilih responsif pada bagaian
atas.

Gambar3. 67 Tampilan inspect responsif

Sumber : Dokumentasi Pribadi

3. Masukan script beriku di semua css dibagian bawah

Gambar3. 68 Script CSS Responsif Mobile

Sumber : Dokumentasi Pribadi

4. Copy css yang ada lalu masukan ke script diatas

Atur margin,pading dan font size seuai dengan ukuran layar
handphone . Biasanya padding: maximal 400px; font size 10-30px.

48
 Gambar3. 69 Hasil copy CSS biasa ke responsif

Sumber : Dokumentasi Pribadi

3.2.7 Hosting Website

Buka website

49
 1. www.000webhost.com

Gambar3. 70 Buka Website 000webhost

Sumber : Dokumentasi Pribadi

50
2. Lalu akan muncul bagian seperti dibawah ini lalu klik get started

Gambar3. 71 Tampilan Awal 000webhost

Sumber : Dokumentasi Pribadi

3. Masukan email dan sandi untuk mendaftar . Apabila sudah menjadi

member makan masukan email dan sandi member . Lalu tunggu dan
vertivikasi email ketika mendaftar.

Gambar 3.72 Halaman Daftar

Sumber : Dokumentasi Pribadi

51
4. Apabila berhasil maka akan muncul seperti gambar dibawah ,lalu klik
upload di file manager.

Gambar 3.73 Tampiln Hasil Daftar / Log in

Sumber : Dokumentasi Pribadi

5. Upload file website

Gambar 3.74 Halaman Upload File

Sumber : Dokumentasi Pribadi

6. Apabila tidak berhasil maka upload menggunakan aplikasi Fillezilla.

Berikut cara menginstall dan mengupload di aplikasi Filezilla.
Unduh/Donwload FileZilla di www.filezilla.com

52
 Gambar 3.75 Tampilan Website FileZilla

Sumber : Dokumentasi Pribadi

Setelah file di download klik dua kali pada file tersebut untuk memulai
proses instalasi. Ketika muncul Lisence Agreement klik tombol “I Agree”.

Gambar 3.76 Tampilan License Agreement

Sumber : https://www.centerklik.com/ftp-client-filezilla/

Langkah berikutnya muncul pilihan Choose Installation Options lalu klik

“Anyone who uses this computer (all users)”. dan klik tombol “Next”.

53
 Gambar 3. 77 Tampilan Choose Instalation Options

Sumber : https://www.centerklik.com/ftp-client-filezilla/

Selanjutnya harus memilih komponen dari FileZilla client yang ingin di

instal, centang semua pilihan. Jika sudah silahkan klik tombol “Next”.

Gambar 3.78 Tampilan Choose Components

Sumber : https://www.centerklik.com/ftp-client-filezilla/

54
Pada langkah selanjutnya diminta untuk menentukan lokasi dimana akan
menginstal software FileZilla. Jika akan menetapkan secara default, klik
tombol “Next”.

Gambar 3. 79 Tampilan Choose Install Location

Sumber : https://www.centerklik.com/ftp-client-filezilla/

Selanjutnya klik tombol “Install” dan tunggu proses intalasi FTP FileZilla
Client Selesai sampai menunjukkan tulisan “FileZilla Client has been
installed on your computer” dan klik tombol finish.

55
 Gambar 3.80 Tampilan Choose Start Menu Folder

Sumber : https://www.centerklik.com/ftp-client-filezilla/

Apabila Filezilla berhasil diinstal berikut gambar nya

Gambar 3.81 Tampilan Awal Fillezilla berhasil diinstall

Sumber : Dokumentasi Pribadi

56
7. Upload File di Filezilla

Masukan host ,username, password serta port. Host diisi dengan

alamat 000webhost, Username diisi dengan username website yang
akan diupload (username ketika mengisi daftar di 000webhost) ,
Password diisi dengan password ketika di 000webhost serta Port diisi
dengan 21. Jika sudah terhubung Upload fille website dalam file
Public_HTML .

Gambar 3. 82 Tampilan Apabila File Dapat Terupload

Sumber : https://www.centerklik.com/ftp-client-filezilla/

Setelah tombol “Upload” di klik maka sekarang proses upload

file dan folder sedang berlangsung dan terlihat status proses upload
dibagian bawah seperti gambar diatas. Tunggu sampai proses upload
selesai melakukan transfer file. Jika proses sudah selesai maka tidak
akan terlihat lagi status proses upload terlihat dibagian bawah. Terlihat
juga jumlah file yang sukses di transfer atau file yang gagal transfer di
bagian bawah .

57
8. Kembali ke website 000webhost lalu reftresh dengan klik gambar
dibawah ini .

Gambar 3.83 Tampilan Icon refresh

Sumber : Dokumentasi Pribadi

Lalu akan muncul file yang sudah diupload ke fillezilla.

Gambar 3.84 Tampilan 000webhost setelah upload di filezilla

Sumber : Dokumentasi Pribadi

9. Website telah selesai dan hasil akhirnya yaitu link berikut.

http://bmtattauhid.000webhost.com/bootsrap/pkl2

58
3.3 Relevansi Teori dan Praktik antara DU/DI dan Sekolah

Tabel 3.1 Relevansi Teori dan Praktik antara DU/DI dan sekolah

No Mata Pelajaran Relevansi Keterangan

BMT At Tauhid menggunakan

bahasa yang sopan dan santun.
Aktivitas yang penyusun
1 Bahasa Indonesia Relevan
kerjakan di dunia kerja memiliki
relevansi dengan pelajaran
Bahasa Indonesia.
Penyusun harus memiliki
kemampuan berbahasa Inggris
untuk melakukan proses
2 Bahasa Inggris Relevan pemrograman. Aktivitas yang
penyusun kerjakan di dunia
kerja memiliki relevansi dengan
pelajaran Bahasa Inggris.
Aktivitas yang penyusun
Tidak kerjakan di dunia kerja tidak
3 Bahasa Sunda
Relevan memiliki relevansi dengan
pelajaran Bahasa Sunda.
4 Pendidikan Relevan Penyusun harus mematuhi
Kewarganegaraan semua peraturan yang ada di
(PKN) perusahaan BMT At Tauhid, dan
penyusun juga harus berprilaku
professional layaknya seorang
pekerja. Aktivitas yang
penyusun Lakukan memiliki
relevansi dengan pelajaran
Pendidikan
Kewarganegaraan.lakukan

59
 memiliki relevansi dengan
pelajaran Pendidikan
Kewarganegaraan.
Aktivitas yang penyusun
Kewirausahaan Tidak kerjakan di dunia kerja tidak
5
(KWU) Relevan memiliki relevansi dengan
pelajaran KWU.
Aktivitas yang penyusun
Tidak kerjakan di dunia kerja tidak
6 Sejarah Indonesia
Relevan memiliki relevansi dengan
pelajaran Sejarah Indonesia.
Penyusun taat melaksanakan
ibadah sholat lima waktu.
Pendidikan Agama
7 Relevan Aktivitas yang penyusun
Islam (PAI)
kerjakan di dunia kerja memiliki
relevansi dengan pelajaran PAI.
Aktivitas yang penyusun
Tidak kerjakan di dunia kerja tidak
8 Fisika
Relevan memiliki relevansi dengan
pelajaran Fisika.
Aktivitas yang penyusun
Tidak kerjakan di dunia kerja tidak
9 Kimia
Relevan memiliki relevansi dengan
pelajaran Kimia.
Aktivitas yang penyusun
Tidak kerjakan di dunia kerja tidak
10 Matematika
Relevan memiliki relevansi dengan
pelajaran Matematika.
11 Pendidikan Tidak Aktivitas yang penyusun
Lingkungan Hidup Relevan kerjakan di dunia kerja tidak
(PLH) memiliki relevansi dengan

60
 pelajaran PLH.
Aktivitas yang penyusun
Tidak kerjakan di dunia kerja tidak
12 Seni Budaya
Relevan memiliki relevansi dengan
pelajaran Seni Budaya.
Aktivitas yang penyusun
Pemrograman Dasar Tidak kerjakan di dunia kerja tidak
13
(Prodas) Relevan memiliki relevansi dengan
pelajaran Prodas
Aktivitas yang penyusun
Sistem Komputer Tidak kerjakan di dunia kerja tidak
14
(Siskom) Relevan memiliki relevansi dengan
pelajaran Sistem Komputer.
Aktivitas yang penyusun
Administrasi Sistem Tidak kerjakan di dunia kerja tidak
15
Jaringan (ASJ) Relevan memiliki relevansi dengan
pelajaran ASJ.
Laptop penyusun terhubung
pada wifi di perusahaan.
Wide Area Network Aktivitas yang penyusun
16 Relevan
(WAN) kerjakan di dunia kerja Memiliki
relevansi dengan pelajaran
WAN.
Aktivitas yang penyusun
Komputer Jaringan Tidak kerjakan di dunia kerja tidak
17
Dasar (Komjadar) Relevan memiliki relevansi dengan
pelajaran Komjadar.
Aktivitas yang penyusun
Internet of Things Tidak kerjakan di dunia kerja tidak
18
(IOT) Relevan memiliki relevansi dengan
pelajaran IOT
19 Teknologi Layanan Tidak Aktivitas yang penyusun

61
 kerjakan di dunia kerja tidak
Jaringan (TLJ) Relevan memiliki relevansi dengan
pelajaran TLJ.
Penyusun membuat layout web
sebelum mulai pemrograman
web. Aktivitas yang penyusun
20 Desain Grafis (DG) Relevan
kerjakan di dunia kerja memiliki
relevansi dengan pelajaran
Desain Grafis.
Administrasi Aktivitas yang penyusun
Tidak
21 Infrastruktur kerjakan di dunia kerja memiliki
Relevan
Jaringan (AIJ) relevansi dengan pelajaran AIJ.
Aktivitas yang penyusun
Pendidikan Jasmani
Tidak kerjakan di dunia kerja memiliki
22 Olahraga dan
Relevan relevansi dengan pelajaran
Kesehatan (PJOK)
PJOK.

62
 BAB IV
PENUTUP

4.1 Kesimpulan
Setelah dilaksanakannya PKL, penyusun memiliki beberapa kesimpulan,
yaitu :

1. Kegiatan yang dilakukan peserta PKL adalah melakukan pembuatan

website di BMT At Tauhid dengan sistem WFH. Adanya kegiatan
PKL ini, penyusun dapat menarik kesimpulan bahwa kegiatan yang
dilakukan selama PKL ini memberikan pengaruh besar pada
pesertanya. Banyak manfaat yang diambil seperti mendapatkan
pengalaman bekerja sesuai dengan bidangnya. Hal tersebut sangat
membantu peserta ketika terjun ke dunia kerja.
2. Software yang digunakan saat pembuatan website adalah Sublime
dengan framework Boostrap yang dioperasikan di windows .
3. Proses dalam pembuatan website terlaksana dengan baik dan teratur
sesuai dengan target yaitu selesai dalam waktu yang telah ditentukan
dan telah direvisi dan disetujui oleh pihak perusahaan.
4. Terdapat beberapa halaman yang ada pada website BMT At Tauhid,
yaitu halaman home sebagai landing page, halaman personal sebagai
pilihan - pilihan informasi lengkap mengenai perusahaan, pada
halaman simpanan berisi Informasi mengenai simpanan di BMT At
Tauhid, halaman Pinjaman berisi informasi mengenai pinjaman di
BMT At Tauhid, halaman kontak berisi tentang alamat, jam kerja, juga
kontak untuk informasi lebih lanjut.

63
4.2 Saran
Dalam pelaksanaan PKL ini penyusun ada beberapa saran yang
disampaikan kepada :

4.2.1 Untuk Pihak Sekolah

Saran Untuk Pihak Sekolah yaitu diharapkan kedepannya PKL
dilaksanakan pada saat kelas 11 agar saat kelas 12 siswa dapat fokus
ke Ujian Nasional (UN),
4.2.2 Untuk Pihak Perusahaan
Saran Untuk Pihak Perusahaan lebih tanggap ketika diminta data
perusahan untuk website.
4.2.3 Untuk Pembimbing Lapangan
Saran Untuk Pembimbing Lapangan harus lebih memberi tahu banyak
hal yang belum di ketahui penyusun dalam dunia kerja dalam berbagai
bidang.
4.2.4 Untuk Pembimbing Sekolah
Saran Untuk Pembimbing Sekolah harus lebih memperhatikan siswa
PKL.

64
 DAFTAR PUSTAKA

Galeri programer.com . Pengertian Bootstrap, Fungsi dan juga kelebihannya.

Diakses pada 10 September 2020, dari
http://galeriprogramer.blogspot.com/2016/08/pengertian-bootstrap-fungsi-dan-
juga.html

Centerklik.com.Cara menginstal Filezilla. Diakses pada 18 September 2020.,

dari https://www.centerklik.com/ftp-client-filezilla/

Pengertian dan Fitur dari SublimeText3. Diakses pada 10 September 2020, dari
https://elib.unikom.ac.id/files/disk1/643/jbptunikompp-gdl-lambokhasi-32106-
8-unikom_l-i.pdf

Pengertian dan fitur fitur Filezilla. Diakses pada 8 September 2020, dari
https://ngobas.com/forums/topic/639-sejarah-software-filezilla/

Pengertian Script dalam Bahasa Pemrograman Web. Diakses pada 19

September 2020, dari https://bootup.ai/blog/pengertian-script-dalam-bahasa-
pemrograman-web/

Open Source di Kominfol.Diakses pada19 September 2020, dari

https://kominfo.go.id/content/detail/3434/open-source-di-kominfo/

Addons. Diakses pada 19 September 2020,dari https://idcloudhost.com/kamus-

hosting/addons/

65
 LAMPIRAN

Jurnal Harian Eka Dian Wananda

Hari/Tanggal
No Uraian Kegiatan
Pelaksanaan
Senin
1. Mulai membuat proposal ide
20-07-2020
Selasa
2. Mengerjakan Proposal ide
21-07-2020
Rabu Menyerahkan proposal ide project PKL ke
3.
22-07-2020 pembimbing sebleum diupload

Kamis
4. Mengupload proposal ide project PKL
23-07-2020
Jumat
5. Melihat refrensi untuk website
24-07-2020
Senin Membuat rancangan desain website untuk
6.
27-07-2020 diserahkan ke client

Selasa Mengeprint desain website dan menyerahkan

7.
28-07-2020 ke client akan bagaimana website tersebut

Rabu
8. Melihat refrensi contoh website yang cocok
29-07-2020
Kamis membuat bagian bagian (foto-foto /video)
9.
30-07-2020 yang digunakan untuk website

Senin/ Membuat website halaman Home

10.
3 Agustus 2020

66
 Selasa/ Membuat Footer bagian Home
11.
4 Agustus 2020
Melanjutkan pengerjaan website bagian
Rabu/
home
12.
5 Agustus 2020 Melihat tutorial pembuatan website di
Youtube
Kamis/ Melanjutkan pengerjaan website bagian
13. home
6 Agustus 2020
Melanjutkan pengerjaan website bagian
Jum’at/
home
14.
7 Agustus 2020 Melihat tutorial pembuatan website di
Youtube
Senin/ Mengikuti lomba
15.
10 Agustus 2020 Pembuatan Golden circle Seilo
Selasa/ Membuat Website Bagian Personal
16.
11 Agustus 2020 Diskusi Tim untuk Lomba
Rabu/ Merancang Isi Video untuk lomba
17. Menambah icon
12 Agustus 2020
Kamis/ Membuat Website halaman Kontak
18.
13 Agustus 2020
Membuat Website halaman Kontak
Jum’at/
19. menambah bagian maps
14 Agustus 2020

Selasa/ Pengerjaan halaman website halaman

20. kontak bagian Whatssapp
18 Agustus 2020
Rabu/ Merapihkan halaman home
21.
19 Agustus 2020

22. Jumat/ Merapihkan halaman home

67
 Melihat tutorial pembuatan website dan
21 Agustus 2020
hosting di Youtube
Senin/
23. Merapihkan halaman kontak
24 Agustus 2020
Selasa/ Merapihkan website halaman Personal
24.
25 Agustus 2020
Rabu/ Pembuatan website halaman Simpanan
25.
26 Agustus 2020
Kamis/ Memperbaiki halaman Home
26.
27 Agustus 2020
Jum’at/ Pembuatan website halaman Pinjaman
27.
28 Agustus 2020
Senin/ Memperbaiki Website sebelum dihosting
28.
31 Agustus 2020
Selasa/ Mempresentasikan Hasil Website kepada
29.
1 September 2020 client sebelum dihosting

Rabu/
30. Merevisi Website Sesuai keinginan client
2 September 2020
Kamis/ Mulai Hosting (tapi belum berhasil)
31.
3 September 2020
Jum’at/ Hosting Sukses
32.
4 September 2020
Senin/ Mengerjakan Laporan PKL bab 1
33.
7 September 2020
Selasa/ Mengerjakan Laporan PKL bab 2
34.
8 September 2020
35. Rabu/ Menyerahkan Hasil Website yang sudah di

68
 9 September 2020 Hosting kepada client

Kamis/
36. Membuat Laporan PKL bab 3
10 September 2020
Jum’at/ Membuat Laporan PKL bab 3
37.
11 September 2020
Senin/ Membuat Laporan PKL bab 3
38.
14 September 2020
Selasa/ Membuat Laporan PKL bab 4
39.
15 September 2020
Rabu/ Membuat Laporan PKL bab 3
40.
16 September 2020
Kamis/ Menamai Gambar-gambar yang ada di laporan
41.
17 September 2020
Jum’at/ Merapihkan Laporan
42.
18 September 2020
Senin/ Menerima Hasil Kesalahan dalam Laporan dan
43. Merevisi Laporan
21 September 2020
Selasa/ Revisi Laporan
44.
22 September 2020

69
Dokumentasi Aktivitas PKL

Keterangan: Dokumentasi foto bersama client

Keterangan: Pengerjaan website

70