LAPORAN KEGIATAN KERJA PRAKTIK

VIDEO TUTORIAL PERANCANGAN DAN PEMBUATAN WEBSITE

SEBAGAI KONTEN PERKULIAHAN DARING

FAKULTAS TEKNIK ELEKTRO

Periode 15 Juni 2020 - 24 Juli 2020

Oleh :

Nola Ristiyanti

(NIM : 1103171234)

Dosen Pembimbing Akademik

Budhi Irawan, S.Si, M.T

(NIP : 087400064-1)

PRODI S1 TEKNIK KOMPUTER

FAKULTAS TEKNIK ELTEKTRO

UNIVERSITAS TELKOM

2020
 LEMBAR PENGESAHAN

VIDEO TUTORIAL PERANCANGAN DAN PEMBUATAN WEBSITE

SEBAGAI KONTEN PERKULIAHAN DARING

FAKULTAS TEKNIK ELEKTRO

Periode 15 Juni 2020 - 24 Juli 2020

Oleh :

Nola Ristiyanti

(NIM : 1103171234)

Mengetahui,

Pembimbing Akademik Pembimbing Lapangan

Budhi Irawan, S.Si, M.T. Ashri Dinimaharawati, S.pd, M.T.

NIP. 087400064-1 NIP. 20930008

ii
 ABSTRAK

COVID-19 merupakan wabah penyakit yang berasal dari Tiongkok yang

menyebar dengan cepat ke seluruh dunia. COVID-19 menyebar di Indonesia pada
awal Maret 2020. Penyebaran virus ini menyebabkan kerugian untuk banyak negara
terutama dalam bidang ekonomi. Dalam bidang Pendidikan, COVID-19 juga
berdampak pada perubahan model pembejaran dimana seluruh kegiatan belajar
mengajar dilakukan secara daring mulai dari tingkat sekolah dasar hingga
perguruan tinggi. Berdasarkan surat edaran Telkom University terkait dengan
kondisi terakhir pandemi COVID-19 di Jawa Barat menyatakan bahwa perkuliahan
akan dilaksanakan secara daring. Bentuk perkembangan teknologi informasi yang
dapat dimanfaatkan sebagai media pembelajaran menggunakan e-learning
(pembelajaran daring). Dalam penerapannya, dosen memiliki peran sebagai
pembimbing dalam kegiatan pembelajaran yang mana biasanya dosen menyiapkan
kelas vitrtual dan membagikan bahan materi ajar sebelum kelas dimulai. bahan
materi perkuliahan seperti video diharapkan membantu mahasiswa lebih menguasai
materi yang disampaikan dosen sehingga membuat kegiatan pembelajaran daring
menjadi efektif.

Pelaksanaan Kerja Praktik selama enam minggu di Fakultas Teknik Elektro

merupakan wujud implementasi pengetahuan dan keterampilan yang diperoleh dari
kegiatan perkuliahan. Kemudian sebagai bentuk berkontribusi dalam mendukung
proses kegiatan pembelajaran secara daring dengan cara membuat video tutorial
pembuatan website untuk Mata Kuliah Desain Basis Data dan Desain Perancangan
Perangkat Lunak di Program Studi S1 Teknik Komputer.

Kata kunci : COVID-19, universitas, daring, website.

iii
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas berkat
dan rahmat-Nya sehingga penulis dapat menyelesaikan kegiatan Kerja Praktik (KP)
di Fakultas Teknik Elektro dan menyelesaikan laporan Kerja Praktik ini tepat pada
waktunya.

Laporan ini ditulis sebagai pengalaman yang telah penulis peroleh selama
melaksanakan kegiatan Kerja Praktik. Adapun laporan ini merupakan salah satu
syarat kelulusan mata kuliah Kerja Praktik di Universitas Telkom. Pelaksanaan
Kerja Praktik tidak terlepas dari dukungan, motivasi serta bantuan dari pihak-pihak
yang senantiasa membantu penulis hingga laporan ini dapat terselesaikan. Untuk
itu, penulis mengucapkan terimakasih kepada:

1. Kedua orangtua yang selalu mendoakan dan mendukung penulis selama

Kerja Praktik,
2. Bapak Budhi Irawan, S.Si, M.T. selaku dosen pembimbing akademik yang
senantiasa menyempatkan waktunya untuk memberikan pembekalan
mengenai Kerja Praktik,
3. Ibu Ashri Dinimaharawati, S.pd, M.T. selaku pembimbing lapangan di
Fakultas Teknik Elektro khususnya Program Studi S1 Teknik Komputer,
4. Arsika Citra Pelangi selaku rekan satu tim selama masa periode Kerja
Praktik.

Penulis menyadari bahwa serangkaian tulisan dalam laporan ini belum sempurna
dan banyak kekurangan yang terdapat didalamnya. Untuk itu kritik dan saran yang
bersifat membangun sangat diharapkan dari pihak pembaca.

Pekalongan, 25 Juli 2020

Penulis

iv
 DAFTAR ISI

LEMBAR PENGESAHAN.................................................................................. ii

ABSTRAK .........................................................................................................iii

KATA PENGANTAR ........................................................................................ iv

DAFTAR ISI ....................................................................................................... v

DAFTAR GAMBAR ......................................................................................... vii

DAFTAR TABEL ............................................................................................ viii

DAFTAR ISTILAH ............................................................................................ ix

BAB 1 PENDAHULUAN ................................................................................... 1

1.1 Latar Belakang ........................................................................................... 1

1.2 Lingkup Penugasan Kerja Praktik ............................................................... 1

1.3 Target Pemecahan Masalah Kerja Praktik ................................................... 1

1.4 Metode Pelaksanaan Tugas/ Pemecahan Masalah ....................................... 2

1.5 Rencana dan Penjadwalan Kerja ................................................................. 2

1.6 Ringkasan Sistematika Laporan .................................................................. 3

BAB 2 PROFIL INSTITUSI KERJA PRAKTIK ................................................. 4

2.1 Profil Instansi/ Perusahaan .......................................................................... 4

2.2 Struktur Organisasi ..................................................................................... 6

2.3 Lokasi/ Unit Pelaksanaan Kerja .................................................................. 7

BAB 3 KEGIATAN KERJA PRAKTIK DAN PEMBAHASAN KRITIS ............ 8

3.1 Keterlibatan Mahasiswa .............................................................................. 8

3.1.1 Kebutuhan dan Peralatan ...................................................................... 8

3.1.2 Perancangan Proyek ........................................................................... 12

3.1.3 Analisa dan Hasil ............................................................................... 19

3.2 Analisis Kritis Mahasiswa ........................................................................ 20

3.2.1 Pelajaran Berharga yang dapat diambil selama Kerja Praktik ............. 20

v
 3.2.2 Perbandingan antara teori yang diperoleh dan implementasinya ......... 20

3.2.3 Pengalaman-pengalaman baik/ buruk yang dialami ............................ 20

BAB 4 KESIMPULAN DAN SARAN .............................................................. 22

4.1 Kesimpulan .............................................................................................. 22

4.2 Saran ........................................................................................................ 22

4.2.1 Saran untuk Perusahaan/ Instansi........................................................ 22

4.2.2 Saran untuk Telkom University .......................................................... 22

DAFTAR PUSTAKA ........................................................................................ 23

LAMPIRAN ...................................................................................................... 24

vi
 DAFTAR GAMBAR

Gambar 2.1 Struktur Organisasi ........................................................................... 6

Gambar 2.2 Peta Lokasi Kerja Praktik ................................................................. 7
Gambar 2.3 Gedung Lokasi Kerja Praktik ............................................................ 7
Gambar 3.1 Logo Wondershare Filmora9 ............................................................ 9
Gambar 3.2 Logo XAMPP ................................................................................... 9
Gambar 3.3 Logo Sublime Text ......................................................................... 10
Gambar 3.5 Logo Microsoft Visio...................................................................... 11
Gambar 3.7 Logo Adobe XD ............................................................................. 11
Gambar 3.8 Logo FileZilla ................................................................................. 12
Gambar 3.9 Logo Selenium IDE ........................................................................ 12
Gambar 3.10 Instalasi XAMPP .......................................................................... 13
Gambar 3.11 CRUD Melalui CMD .................................................................... 13
Gambar 3.12 CRUD Melalui Localhost ............................................................. 14
Gambar 3.13 Sequence Diagram ........................................................................ 15
Gambar 3.14 ERD.............................................................................................. 15
Gambar 3.15 Class Diagram .............................................................................. 16
Gambar 3.16 Mockup E-Commerce ................................................................... 16
Gambar 3.17 Membuat Database Melalui CMD ................................................. 17
Gambar 3.18 Edit dan Hapus Data ..................................................................... 17
Gambar 3.19 Ajax Live Search .......................................................................... 18
Gambar 3.20 Upload Gambar............................................................................. 18
Gambar 3.21 Web Hosting ................................................................................. 19
Gambar 3.22 Software Testing ........................................................................... 19
Gambar 3.23 Hasil Akhir Pembuatan Website.................................................... 20

vii
 DAFTAR TABEL

Tabel 1.1 Rencana Kegiatan Kerja Praktik .......................................................... 2

viii
 DAFTAR ISTILAH

Daring : Akronim dalam jaringan, terhubung melalui jejaring

komputer, internet, dan sebagainya.
Website : Sekumpulan halaman web yang saling berhubungan
yang umumnya berada pada peladen yang sama
berisikan kumpulan informasi yang disediakan secara
perorangan, kelompok, atau organisasi.
Database : Sekumpulan data yang terorganisir, yang umumnya
disimpan dan diakses secara elektronik dari suatu
system koputer.
Platform : Kombinasi antara perangkat lunak dan perangkat keras
untuk menjalankan sebuah program.
Client - Server : Sebuah paradigma dalam teknologi informasi yang
merujuk kepada cara untuk mendistribusikan aplikasi
ke dalam dua pihak: pihak client dan pihak server.
Work From Home : Model atau perjanjian kerja dimana karyawan
memperoleh fleksibilitas bekerja dalam hal tempat dan
waktu kerja dengan bantuan teknologi telekomunikasi.
GUI : Jenis antarmuka pengguna yang menggunakan metode
interaksi pada peranti elektronik secara grafis (bukan
perintah teks) antara pengguna dan computer.
E-Commerce : Penyebaran, pembelian, penjualan, pemasaran, barang
dan jasa melalui system elektronik sepertu internet atau
televisi, www, atau jaringan komputer lainnya.
UI : Desain untuk computer, peralatan mesin, perangkat
komunikasi mobile, aplikasi perangkat lunak, dan situs
web yang berfokus pada pengalaman pengguna dan
interaksi.
MySQL : Sebuah perangkat lunak system manajemen basis data
SQL atau DBMS yang multialur, multipengguna,
dengan sekitar 6 juta instalasi di seluruh dunia.

ix
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Kerja Praktik (KP) merupakan salah satu mata kuliah perguruan tinggi yang
bertujuan untuk menambah pengetahuan dan pengalaman mahasiswa tentang dunia
kerja sesuai dengan program studi mahasiswa yang tidak didapatkan pada dunia
kampus. Dengan diadakannya kegiatan Kerja Praktik ini, mahasiswa diharapkan
dapat mengimplementasikan ilmu yang sudah didapatkan pada perkuliahan serta
dapat mengembangkan diri, berkontribusi dan berinovasi dalam setiap
permasalahan yang ada.

Program Studi S1 Teknik Komputer merupakan salah satu bagian dari Fakultas
Teknik Elektro yang mengikuti kebijakan akademik berdasarkan surat edaran
Telkom University untuk melaksanakan perkuliahan secara daring. Segala bentuk
persiapan seperti kelas virtual hingga bahan materi ajar perlu diperhatikan sebaik-
baiknya agar berjalan dengan lancar. Pelaksanaan Kerja Praktik untuk membuat
video tutorial pembuatan website diharapkan menjadi bentuk dukungan dalam
persiapan perkuliahan daring.

1.2 Lingkup Penugasan Kerja Praktik

Adapun lingkup penugasan Kerja Praktik di Fakultas Teknik Elektro sebagai
berikut.
Waktu Kerja : Senin - Jumat (08.00 – 17.00 WIB) dan Sabtu (08.00 – 15.00 WIB)
Tempat : Fakultas Teknik Elektro (Work From Home)
Alamat : Jl. Telekomunikasi No.1 Terusan Buah Batu, Bandung 40257
Penugasan KP : Video Tutorial Pembuatan Website
1.3 Target Pemecahan Masalah Kerja Praktik
Adapun target pemecahan masalah Kerja Praktik adalah sebagai berikut.

1. Dapat merancang desain tampilan situs web (User Interface) dengan

aplikasi Adobe XD.
2. Dapat menghubungkan website dengan database dan mengelolanya
menggunakan MySQL.
3. Dapat melakukan web hosting dan melakukan maintenance berkala.

1
 2

4. Dapat melakukan software testing dengan menggunakan aplikasi Selenium.

5. Dapat mendokumentasikan semua proses pembuatan website dari
perancangan desain UI/ UX hingga software testing.

1.4 Metode Pelaksanaan Tugas/ Pemecahan Masalah

Adapun metode pelaksanaan tugas/ pemecahan masalah yang digunakan pada
waktu kerja (Work From Home) dan cara penulisan laporan adalah sebagai berikut.

1. Observasi, mengamati dan mempelajari peristiwa yang sedang terjadi

dengan mencarikan solusi untuk memecahkan permasalahan yang dihadapi
2. Praktik lapangan, memulai perancangan dan pembuatan proyek sebagai
wujud dukungan adanya perkuliahan daring di Fakultas Teknik Elektro.
3. Diskusi, diskusi dengan rekan tim Kerja Praktik dan pembimbing lapangan
mengenai perkembangan atau masalah dalam pembuatan proyek.
4. Pengujian dan hasilnya, pengujian proyek dilakukan dan menunjukkan
hasilnya kepada pembimbing lapangan. Dalam pengujian dan hasilnya ini
dilakukan untuk mengetahui berjalan tidaknya proyek yang sudah
dikerjakan.
5. Pembuatan laporan, setelah proyek selesai dikerjakan maka dimulai
penulisan laporan sesuai dengan urutan yang sudah dikerjakan.

1.5 Rencana dan Penjadwalan Kerja

Kegiatan Kerja Praktik pembuatan Video Tutorial Pembuatan Website sebagai
persiapan perkuliahan daring di Fakultas Teknik Elektro selama 6 minggu mulai 15
Juni s/d 24 Juli 2020 dengan Rencana Kegiatan seperti berikut pada.

Tabel 1.1 Rencana Kegiatan Kerja Praktik

No Nama Kegiatan Minggu ke

1 2 3 4 5 6
1 Penyusunan bahan materi ajar v v
2 Perancangan konsep video tutorial v v
3 Perekaman video tutorial v v v
4 Proses editing video tutorial v v
 3

1.6 Ringkasan Sistematika Laporan

1. BAB 1 PENDAHULUAN
Bab ini berisikan latar belakang penugasan, lingkup penugasan, target
pemecahan masalah, metode pelaksanaan tugas/ pemecahan masalah,
rencana dan penjadwalan kerja, dan ringkasan sistematika laporan.
2. BAB 2 PROFIL INSTITUSI KERJA PRAKTIK
Bab ini berikan profil Perusahaan/ Instansi, struktur organisasi, dan lokasi/
unit pelaksanaan kerja.
3. BAB 3 KEGIATAN KERJA PRAKTIK DAN PEMBAHASAN KRITIS
Bab ini berisikan kegiatan mahasiswa selama Kerja Praktik mengenai
proses adaptasi dengan lingkup Kerja Praktik, penyelesaian masalah yang
ada, pengalaman baik dan buruk, maupun pelajar berharga yang diperoleh
selama masa Kerja Praktik.
4. BAB 4 KESIMPULAN DAN SARAN
Bab ini berisikan kesimpulan selama pelaksanaan Kerja Praktik sehingga
mahasiswa dapat memberikan saran yang bersifat membangun bagi
perusahaan/ instansi maupun pihak kampus.
 BAB 2
PROFIL INSTITUSI KERJA PRAKTIK

2.1 Profil Instansi/ Perusahaan

Fakultas Teknik Elektro didirikan seiring dengan berdirinya STT Telkom pada
tahun 1990, yang pada saat itu bernama Jurusan Teknik Elektro. Pada tahun 2007,
Jurusan Teknik Elektro berubah nama menjadi Departemen Teknik Elektro.
Selanjutnya, seiring dengan penambahan program studi di lingkungan Departemen
Teknik Elektro maka pada tanggal 1 Februari 2009 Departemen Teknik Elektro
berubah status menjadi Fakultas Elektro dan Komunikasi. Fakultas ini memiliki 4
program studi : Program Studi S1 Teknik Telekomunikasi, Program Studi S1
Teknik Elektro, Program Studi S1 Teknik Komputer, Program Studi D3 Teknik
Telekomunikasi. Pada masa transisi peleburan 4 institusi yang dimiliki oleh
Yayasan Pendidikan Telkom, menjadi Universitas Telkom, maka Fakultas Elektro
dan Komunikasi berubah kembali menjadi Departemen Teknik Elektro, yang
menjadi bagian dari Fakultas Teknik.
Fakultas Teknik Elektro merupakan fakultas terbesar di Universitas Telkom,
jika dilihat dari jumlah prodi, sumber daya manusia (Mahasiswa, Dosen, alumni),
infrastruktur (sebagai contoh jumlah laboratorium), maupun dari kerjasama yang
telah dijalin.
Adapun Visi dan Misi dan Tujuan Fakultas Teknik Elektro sebagai berikut.
Visi :
“Menjadi fakultas berstandar internasional yang berperan aktif dalam
pengembangan pendidikan, riset, dan entrepreneurship di bidang teknik elektro dan
teknik fisika, berbasis teknologi informasi”

Misi :
1. Menyelenggarakan sistem pendidikan yang berstandar internasional di
bidang teknik elektro dan teknik fisika berbasis teknologi informasi.

2. Menyelenggarakan, menyebarluaskan, dan memanfaatkan hasil-hasil riset

berstandar internasional di bidang teknik elektro dan fisika.

4
 5

3. Menyelenggarakan program entrepreneurship berbasis teknologi bidang

teknik elektro dan teknik fisika di kalangan sivitas akademika untuk
mendukung pembangunan ekonomi nasional.
4. Mengembangkan jejaring dengan perguruan tinggi dan industri terkemuka
dalam dan luar negeri dalam rangka kerjasama pendidikan, riset, dan
entrepreneurship.
5. Mengembangkan sumberdaya untuk mencapai keunggulan dalam
pendidikan, riset, dan entrepreneurship.

Tujuan :
1. Tercapainya kepercayaan dari seluruh pemangku kepentingan.
2. Menghasilkan lulusan berintegritas tinggi yang kompeten di bidang teknik
elektro dan teknik fisika, dan memiliki daya saing di tingkat nasional dan
internasional.
3. Menghasilkan karya atau produk inovasi yang diakui secara internasional
dan bermanfaat dalam meningkatkan kualitas hidup masyarakat.
4. Menghasilkan entrepreneur berbasis teknologi elektro dan teknik fisika dari
kalangan sivitas akademika Fakultas Teknik Elektro.
 6

2.2 Struktur Organisasi

Gambar 2.1 Struktur Organisasi

Gambar 2.1 Menunjukkan Struktur Organisasi Fakultas Teknik Elektro (FTE)

Telkom University yang dipimpin oleh Dr. Bambang Setia Nugroho, S.T., M.T.
selaku Dekan FTE dan dibawahnya diikuti oleh Dr. Mamar Rokhmat, S.Si., M.T.
selaku Wakil Dekan I dan Dr. Koredianto Usman, S.T., M.Sc. selaku Wakil Dekan
II. Kemudian dibawahnya terdapat formasi-formasi, Kepala Urusan Bagian, Ketua
KK dan Kepala setiap Prodi yang ada.
 7

2.3 Lokasi/ Unit Pelaksanaan Kerja

Gambar 2.2 Peta Lokasi Kerja Praktik

Gambar 2.3 Gedung Lokasi Kerja Praktik

 BAB 3
KEGIATAN KERJA PRAKTIK DAN PEMBAHASAN KRITIS

3.1 Keterlibatan Mahasiswa

Pelaksanaan Kerja Praktik di Fakultas Teknik Elektro dengan pembimbing
lapangan Ibu Ashri Dinimaharawati selaku dosen Program Studi S1 Teknik
Komputer menawarkan pembuatan konten perkuliahan daring sebagai proyek
selama masa Kerja Praktik yang dibagai menjadi tiga bagian yaitu Website, Game
Development, dan Video Animasi. Penulis ditempatkan di bagian pembuatan
bagian Website. Di bagian ini penulis diberikan proyek untuk membuat video
tutorial pembuatan website yang nantinya akan digunakan sebagai bahan materi
penunjang untuk mata kuliah Desain Perancangan Perangkat Lunak dan Desain
Basis Data.

3.1.1 Kebutuhan dan Peralatan

Untuk melaksanakan perancangan, maka dibutuhkan alat dan bahan untuk
pembuatan proyek sebagai berikut.

1. Laptop dan Konkesi Internet

Laptop adalah yang alat yang paling utama dalam proyek pembuatan video
tutorial website mulai dari perancangan desain website hingga proses
dokumentasi dan editing video. Sedangkan koneksi internet digunakan untuk
mencari berbagai referensi untuk mempermudah dalam pengerjaan proyek
pembuatan website.

2. Aplikasi Editing Video

Aplikasi yang digunakan untuk editing video adalah Wondershare
Filmora9 dikarenakan penggunaannya yang cukup mudah ditambah dengan
adanya fitur record screen didalamnya sehingga tidak perlu melakukan
instalasi aplikasi tambahan. Sehingga bisa dibilang Filmora adalah aplikasi
video editor terbaik. Selain itu juga dapat digunakan secara gratis untuk
menggunakan semua fitur yang ada didalamnya. Hasil kualitas videonya pun
dapat ditentukan sesuai dengan kebutuhan mulai darri format file, resolusi
video, frame rate hingga bit rate.

8
 9

Gambar 3.1 Logo Wondershare Filmora9

3. Aplikasi Pembuatan Website

1) XAMPP
Aplikasi ini sudah sangat popular dan banyak digunakan terutama di
ranah dunia web developer. XAMPP merupakan akronim dari kata
Apache, MySQL/ MariaDB, PHP, dan Perl. Semenatara imbuhan huruf
“X” berasal dari istilah cross-platform yang artinya bisa dijalankan untuk
berbagai sistem operasi yang berbeda. Fungsi XAMPP ini sebagai server
lokal untuk website yang sedang dalam proses pengembangan tanpa harus
terkoneksi dengan internet untuk menampilkan konten yang ada di
dalamnya, atau istilah lainnya offline website.

Gambar 3.2 Logo XAMPP

2) Sublime Text Editor

Sublime text adalah aplikasi editor teks yang sering diguakan oleh
programmer khususnya web developer yang mendukung untuk berbagai
hahasa pemrograman termasuk pemrograman PHP. Hal yang menarik dari
aplikasi editor ini adalah adanya warna dari tulisan koding yang bervariasi
dan interaktif sehingga dipercaya mampu membuat penggunanya nyaman
dalam menjalankan proses koding.
 10

Gambar 3.3 Logo Sublime Text

4. Aplikasi Pembuat UML

UML atau Unified Modeling Language adalah himpunan terstruktur dan
Teknik pemodelan desain program berorientasi objek (OOP) serta aplikasinya.
Dan biasanya digunakan untuk mendokumentasikan, menspesifikasikan dan
membangun sistem perangkat lunak. Terdapat beberapa diagram yang biasa
digunakan untuk memodelkan aplikasi diantaranya Use Case Diagram,
Sequence Diagram, Class Diagram, dan aneka diagram lainnya.pembuatan
UML bisa dilakukan secara manual dengan coretan di kertas dengan
kekurangan hasilnya tidak terlalu rapih, namun dengan memanfaatkan aplikasi
pembuat UML hasilnya akan lebih rapih dan cepat dalam pengerjaannya.
Berikut aplikasi yang sering digunakan dalam merancang dan mendesain
system yang akan dikembangkan.
Salah satu produk Microsoft Office adalah Microsoft Visio yang ditujukan
untuk memudahkan pengguna untuk membuat diagram. Berbeda dengan
draw.io yang meruapkan software diagram yang bisa digunakan secara gratis
tanpa perlu registrasi, Microsoft Visio berbayar untuk biaya lisensi. Namun
terdapat kelebihan dibandingkan dengan draw.io yaitu proses pembuatan
diagram lebih cepat dan efisien dikarenakan memiliki fitur-fitur yang lengkap
serta menyediakan template dan smart shapes untuk memudahkan
perancangan desain sistem yang akan dikembangkan.
 11

Gambar 3.4 Logo Microsoft Visio

5. Aplikasi Desain User Interface

Adobe XD adalah salah satu produk dari Adobe untuk desain UI/ UX dan
prototyping berbagai platform termasuk web, ponsel, tablet, dan lainnya.
Adobe XD memiliki banyak kelebihan yang membuatnya banyak digunakan
oleh para UI/ UX designer professional, salah satunya dalah ekspor Gambar
dan desain dalam format PNG dan SVG yang dapat dikonfigurasi untuk iOS,
Android, web atau pengaturan sendiri.

Gambar 3.5 Logo Adobe XD

6. Aplikasi Pendukung Web Hosting

FileZilla atau disebut dengan FileZilla Client adalah salah satu software
FTP gratis, open source, dan cross-platform. Software ini memiliki kelebihan
pada kecepatan dan kemudahanyya melakukan transfer file. Tampilan aplikasi
ini terbagi menjadi dua, satu untuk menampilkan file dan folder di komputer
lokal, dan satu lagi untuk menampilkan file dan folder di komputer server.
Caranya cukup melakukan drag and drop untuk mentransfer file dari
komputer ke server atau sebaliknya.
 12

Gambar 3.6 Logo FileZilla

7. Aplikasi Software Testing

Selenium adalah tools auto testing yang digunakan untuk mengotomatisasi
tes aplikasi web yang dilakukan pada browser. Salah satu jenisnya adalah
Selenium IDE merupalan tools auto testing paling sederhana dan mudah
dipelajari. Keutungan menggunakan tools auto testing ini adalah bahwa tes
yang direkam melalui plugin dapat diekspor dalama berbagai Bahasa
pemrograman seperti Java, Ruby, Python dan sebagainya. Dan kemudahan
lainnya adalah terintegrasi dalam web browser dalam bentuk extension.

Gambar 3.7 Logo Selenium IDE

3.1.2 Perancangan Proyek

Dalam perancangan proyek video tutorial website terdapat parameter-
parameter yang perlu diperhatikan yaitu durasi maksimal video (5 menit),
backsound musik yang tidak terlalu dominan dan membuat dua jenis video
dengan rekaman suara dan tanpa suara. Berikut adalah jobdesk yang dikerjakan
saat Kerja Praktik selama enam minggu mulai dari perancanngan website
hingga tahap software testing.

1. Video Instalasi dan Konfigurasi XAMPP

 13

1) Instalasi dan Konfigurasi XAMPP

Berisikan video instalasi dan konfigurasi aplikasi XAMPP sebelum
dan sesudah menggunakan layanan yang ada didalam aplikasi XAMPP
seperti Apache untuk layanan Server Web dan MySQL untuk layanan
Server Database.

Gambar 3.8 Instalasi XAMPP

2) CRUD melalui CMD

CRUD merupakan akronim dari Create, Read, Update, dan Delete
adalah hal dasar yang harus diketahui untuk mulai mengelola database.
CRUD yang dilakukan pada video adalah melalui CMD (Command
Prompt).

Gambar 3.9 CRUD Melalui CMD

 14

3) CRUD melalui Localhost

Sama seperti CRUD melalui CMD, namun yang membedakannya
adalah tampilan secara GUI (Graphical User Interface) melalui
localhost/phpmyadmin.

Gambar 3.10 CRUD Melalui Localhost

2. Video Pengenalan Software Pendukung UML dengan Visio

Video ini berisikan cara instalasi hingga perancangan Sequence
Diagram, ERD, dan Class Diagram menggunakan Visio. UML (Unified
Modelling Language) yaitu suatu metode pemodelan secara visual untuk
sarana perancanga system berorientasi objek. Dengan kata lain UML adalah
standar pada visualisasi, perancangan dan juga pendokumentasian sistem
software. Perancangan UML pada video yang dibuat menggunakan Visio
2013, namun pada dasarnya semua versi sama hanya tampilan tatak letaknya
yang berbeda.
1) Sequence Diagram
Sequence adalah salah satu dari diagram-diagram yang ada pada UML,
diagram ini menggambarkan kolaborasi dinamis antara sejumlah objek.
Kegunaannya untuk menunjukkan rangkaian pesan yang dikirim antara
objek juga interaksi antara objek.
 15

Gambar 3.11 Sequence Diagram

2) ERD
ERD atau Entity Relationship Diagram adalah suatu bentuk diagram
yang menjelaskan hubungan antar objek-objek data yang mempunyai
hubungan antar relasi. ERD digunakan untuk menyusun struktur data dan
hubungan antar data, dan untuk menggambarkannya digunakan notasi,
simbol, bagan, dan lain sebagainya.

Gambar 3.12 ERD

3) Class Diagram
Class diagram adalah salah satu jenis diagram yang paling bergna di
UML, hal ini karena dapat dengan jelas memetakan struktur sistem tertentu
dengan memodelkan kelas, atribut, operasi serta hubungan antar objek.
 16

Gambar 3.13 Class Diagram

3. Video Pembuatan Halaman Utama Mobile untuk E-Commerce

Video ini berisikan tahapan pembuatan desain halaman utama pada
perangkat mobile untuk sebuah E-Commerce dengan nama fashionable.
Halaman utama berisikan slideshow, video autoplay dan produk andalan.

Gambar 3.14 Mockup E-Commerce

4. Video Persiapan dan Konfigurasi Database dengan CMD

Video ini berisikan langkah awal untuk memulai mengelelola database
pada website e-commerce. CRUD dilalukan melalui CMD (Command
Prompt) dengan nama database adalah master dan didalamnya terdapat tiga
buah table untuk admin, pengguna, dan barang.
 17

Gambar 3.15 Membuat Database Melalui CMD

5. Video Delete dan Update Data

Video ini berisikan penambahan fitur edit dan hapus data pada website
yang dibuat dengan mengunakan query dasar database yaitu update dan
delete.

Gambar 3.16 Edit dan Hapus Data

6. Video Ajax Live Search

Video ini beriskan Ajax Live Search yang merupakan pencarian yang
menampilkan hasil pencarian disaat yang sama saat mengetikkan keyword
pencarian. Ajax dapat diguankan untuk membuat pencarian yang interaktif.
 18

Gambar 3.17 Ajax Live Search

7. Video Upload Gambar

Video ini beriskan penambahan fitur upload gambar pada website yang
dibuat baik saat melalukan registrasi maupun edit data.

Gambar 3.18 Upload Gambar

8. Video Web Hosting

Video ini berisikan cara melakukan web hosting dengan aplikasi
pendukung yaitu FileZilla untuk transfer file antara komputer lokal dengan
server dan juga CPanel untuk mengelola akun web hosting.
 19

Gambar 3.19 Web Hosting

9. Video Software Testing dengan Selenium

Video ini berisikan cara mudah untuk melalukan software testing dengan
menggunakan Selenium IDE. Bagian yang di lakukan uji coba adalah menu
pada bagian navbar, footer, form login, registrasi, tambah, edit dan hapus
data.

Gambar 3.20 Software Testing

3.1.3 Analisa dan Hasil

Setelah perancangan dan pembuatan website hingga software testing
selesai dilakukan, proyek pembuatan video tutorial website ini kemudian
diperlihatkan kepada pembimbing lapangan untuk menunjukkan keberhasilan
proyek tersebut. Hasil nyata berupa website yang sudah dibuat ini dapat diakses
 20

dan dilihat oleh semua orang dengan cara mengunjungi website

ruangbertemu.site.

Gambar 3.21 Hasil Akhir Pembuatan Website

3.2 Analisis Kritis Mahasiswa

3.2.1 Pelajaran Berharga yang dapat diambil selama Kerja Praktik
Pelajaran berharga yang dapat diambil selama Kerja Praktik di Fakultas
Teknik Elektro adalah bagaimana menjalin komunikasi yang baik dan aktif
dengan pembimbing lapangan maupun rekan untuk berdiskusi mengambil
keputusan bersama untuk menemukan solusi yang terbaik. Ataupun hanya
sekedar hal yang masih belum jelas untuk ditanyakan. Selain itu hal yang paling
utama adalah kerja sama dengan rekan untuk mencapai tujuan yang sama yaitu
pembuatan website mulai dari perancangan hingga software testing.

3.2.2 Perbandingan antara teori yang diperoleh dan implementasinya

Perbandingan antara teori yang diperoleh dan implementasinya adalah
teori yang didapatkan belum semuanya diterapkan dalam pembuatan website
misalnya beberapa menu pada website yang belum ditambahkan dan juga belum
menerapkan responsive web yaitu Teknik mendesain website agar bisa tampil
dengan baik jika dibuka di browser dengan berbagai ukuran.

3.2.3 Pengalaman-pengalaman baik/ buruk yang dialami

Pengalaman-pengalaman yang penulis dapatkkan selama Kerja Praktik
adalah pengalaman yang sangat berharga dan berkesan, dimana penulis dan
 21

rekan tim Kerja Praktik dibimbing dengan pembimbing lapangan yang ramah
dan banyak melalukan diskusi selama masa Kerja Praktik. Kemudian
sehubungan dengan pelaksanaan Kerja Praktik disaat libur semester genap
menjadikan Kerja Praktik ini sebagai aktivitas yang produktif untuk terus
belajar. Walaupun terkadang waktu tidur berkurang dikarenakan deadline tugas
mingguan yang diberikan. Namun penulis berharap semua kerja keras itu
dikemudian hari akan bermanfaat bagi siapa saja yang menonton videonya.
 BAB 4
KESIMPULAN DAN SARAN

4.1 Kesimpulan
Berdasarkan kegiatan Kerja Praktik yang telah dilaksanakan di Fakultas Teknik
Elektro maka penulis dapat memberikan kesimpulan sebagai berikut.
1. Dapat merancang UI/ UX untuk website E-Commerce sederhana.
2. Dapat membuat website E-Commerce sederhana.
3. Dapat menjelaskan dan mendokumentasikan proses perancangan dan
pembuatan website E-Commerce sederhana.

4.2 Saran
Adapun saran yang dapat diberikan oleh penulis selama Kerja Praktik adalah
sebagai berikut.

4.2.1 Saran untuk Perusahaan/ Instansi

Sebagai wadah bagi mahasiswa yang belum berkesempatan melakukan
Kerja Praktik diluar lingkup lingkungan Telkom University, ada baiknya
Fakultas Teknik Elektro memberikan informasi lebih detail untuk jobdesk
lowongan yang disediakan oleh FTE agar mahasiswa yang mendaftar bisa
menyesuaikan minat dan kemampuannya.

4.2.2 Saran untuk Telkom University

Saran untuk pihak Telkom University adalah memberikan lebih banyak
bimbingan dan sosialisasi mekanisme Kerja Praktik agar mahasiswa tidak
dibuat kebingungan. Kemudahan untuk kedepannya berharap agar layanan
proses administrasi persyaratan Kerja Praktik dipermudah.

22
 DAFTAR PUSTAKA

[1] Amalia, D., 2018. Panduan Lengkap Mengenai FIleZilla. [Online]

Available at: https://idwebhost.com/blog/panduan-lengkap-mengenai-
filezilla/
[Accessed 28 Juli 2020].
[2] Andy, 2019. Pengertian XAMPP Lengkap dengan Fungsi dan Cara
Instalasi. [Online]
Available at: https://qwords.com/blog/pengertian-xampp/
[Accessed 28 Juli 2020].
[3] Ansori, 2020. Pengertian Class Diagram : Fungsi, Simbol, dan Contohnya.
[Online]
Available at: https://www.ansoriweb.com/2020/03/pengertian-class-
diagram.html
[Accessed 28 Juli 2020].
[4] Baharsyah, N. A., 2020. ERD? Apa Sih Itu?. [Online]
Available at: https://www.jagoanhosting.com/blog/erd-apa-sih-itu/
[Accessed 28 Juli 2020].
[5] Feronika, N., 2016. Pengenalan Microsoft Office Visio. [Online]
Available at: https://sis.binus.ac.id/2016/06/27/pengenalan-microsoft-
office-visio/
[Accessed 28 Juli 2020].
[6] Nastainullah, R., 2020. Kelebihan dan Kekurangan Adobe XD. [Online]
Available at: https://blogs.masterweb.com/kelebihan-dan-kekurangan-
adobe-xd/
[Accessed 28 Juli 2020].
[7] Raharjo, A., 2018. Apa itu UML?. [Online]
Available at: https://medium.com/@andrerahardjo/apa-itu-uml-
b8f2a8f70b89
[Accessed 28 Juli 2020].
[8] Romadhoni, F., 2020. Apa itu Selenium? Tools Auto Testing Web Apps
Terbaik. [Online]
Available at: https://www.jagoanhosting.com/blog/apa-itu-selenium/
[Accessed 28 Juli 2020].
[9] Utami, S. F., 2019. 3 Langkah Dasar Membuat Web Responsive. [Online]
Available at: https://whello.id/tips-digital-marketing/3-langkah-dasar-
membuat-web-responsive/
[Accessed 28 Juli 2020].

23
 LAMPIRAN

i. Copy Surat Lamaran ke perusahaan/instansi yang bersangkutan

24
 25

ii. Copy balasan Surat Lamaran dari perusahaan/ instansi

 26

iii. Lembar Penilaian Pembimbing Lapangan dan perusahaan/ instansi

 27

iv. Logbook 1

LOGBOOK 1

Catatan Diskusi dengan Dosen Pembimbing Akademik

Nama/ NIM : Nola Ristiyanti/ 1103171234

Tanggal Catatan Diskusi Paraf Dosen

Note: Catatan Diskusi dengan Pembimbing

 28

v. Logbook 2

LOGBOOK 2

Catatan Kegiatan Kerja Praktik Mahasiswa Selama di Tempat Kerja Praktik

Nama/ NIM : Nola Ristiyanti/ 1103171234

Jam Jam Jumlah
Hari Tanggal Kegiatan
Datang Pulang Jam
Senin 15-06-2020 08.00 17.00 9 jam Pembukaan dan pengenalan jobdesk
Selasa 16-06-2020 08.00 17.00 9 jam Perekaman video instalasi XAMPP
Rabu 17-06-2020 08.00 17.00 9 jam Perekaman video pengenalan dasar XAMPP
Kamis 18-06-2020 08.00 17.00 9 jam Perekaman suara
Jumat 19-06-2020 08.00 17.00 9 jam Editing video instalasi dan pengenalan dasar
XAMPP
Sabtu 20-06-2020 08.00 15.00 7 jam Perekaman video instalasi Visio 2013
Perekaman video pengenalan software
pendukung UML
Minggu 21-06-2020 - - - Libur
Total Jam Mingguan 52 Jam
Mengetahui,
Atasan Langsung/ Pembimbing KP
Lapangan

Ashri Dinimaharawati, S.pd, M.T

Note: Catatan Kegiatan Mahasiswa KP selama di tempat KP

 29

LOGBOOK 2
Catatan Kegiatan Kerja Praktik Mahasiswa Selama di Tempat Kerja Praktik

Nama/ NIM : Nola Ristiyanti/ 1103171234

Hari Tanggal Jam Jam Jumlah Kegiatan
Datang Pulang Jam
Senin 22-06-2020 08.00 17.00 9 jam Perekaman suara
Selasa 23-06-2020 08.00 17.00 9 jam Editing video instalasi dan pengenalan
software pendukung UML dengan Visio
2013
Rabu 24-06-2020 08.00 17.00 9 jam Perekaman video pembuatam design
halaman utama pada perangkat mobile
untuk e-commerce
Kamis 25-06-2020 08.00 17.00 9 jam Perekaman suara
Jumat 26-06-2020 08.00 17.00 9 jam Editing video pembuatan design halaman
utama pada perangkat mobile untuk e-
commerce
Sabtu 27-06-2020 08.00 15.00 7 jam Perekaman video delete data
Minggu 28-06-2020 - - - Libur
Total Jam Mingguan 52 Jam
Mengetahui,
Atasan Langsung/ Pembimbing KP
Lapangan

Ashri Dinimaharawati, S.pd, M.T

Note: Catatan Kegiatan Mahasiswa KP selama di tempat KP

 30

LOGBOOK 2

Catatan Kegiatan Kerja Praktik Mahasiswa Selama di Tempat Kerja Praktik

Nama/ NIM : Nola Ristiyanti/ 1103171234

Hari Tanggal Jam Jam Jumlah Kegiatan
Datang Pulang Jam
Senin 29-06-2020 08.00 17.00 9 jam Perekaman video update data
Selasa 30-06-2020 08.00 17.00 9 jam Perekaman suara
Rabu 01-07-2020 08.00 17.00 9 jam Editing video delete dan update data
Kamis 02-07-2020 08.00 17.00 9 jam Perekaman video Ajax live search
Jumat 03-07-2020 08.00 17.00 9 jam Perekaman suara
Sabtu 04-07-2020 08.00 15.00 7 jam Editing video Ajax live search
Minggu 05-07-2020 - - - Libur
Total Jam Mingguan 52 Jam
Mengetahui,
Atasan Langsung/ Pembimbing KP
Lapangan

Ashri Dinimaharawati, S.pd, M.T

Note: Catatan Kegiatan Mahasiswa KP selama di tempat KP

 31

LOGBOOK 2

Catatan Kegiatan Kerja Praktik Mahasiswa Selama di Tempat Kerja Praktik

Nama/ NIM : Nola Ristiyanti/ 1103171234

Hari Tanggal Jam Jam Jumlah Kegiatan
Datang Pulang Jam
Senin 06-07-2020 08.00 17.00 9 jam Perekaman video upload gambar
Selasa 07-07-2020 08.00 17.00 9 jam Perekaman suara
Rabu 08-07-2020 08.00 17.00 9 jam Editing video upload Gambar
Kamis 09-07-2020 08.00 17.00 9 jam Perekaman video web hosting
Jumat 10-07-2020 08.00 17.00 9 jam Perekaman video
Sabtu 11-07-2020 08.00 15.00 7 jam Editing video web hosting
Minggu 12-07-2020 - - - Libur
Total Jam Mingguan 52 Jam
Mengetahui,
Atasan Langsung/ Pembimbing KP
Lapangan

Ashri Dinimaharawati, S.pd, M.T

Note: Catatan Kegiatan Mahasiswa KP selama di tempat KP

 32

LOGBOOK 2

Catatan Kegiatan Kerja Praktik Mahasiswa Selama di Tempat Kerja Praktik

Nama/ NIM : Nola Ristiyanti/ 1103171234

Hari Tanggal Jam Jam Jumlah Kegiatan
Datang Pulang Jam
Senin 13-07-2020 08.00 17.00 9 jam Bank soal : Pemodelan data
(Relationship, Derajat, Kardinalitas)
Selasa 14-07-2020 08.00 17.00 9 jam Bank soal : Pemodelan data (Supertype,
generalisasi, completeness)
Rabu 15-07-2020 08.00 17.00 9 jam Bank soal : Transformasi ERD ke relasi/
tabel
Kamis 16-07-2020 08.00 17.00 9 jam Bank soal : Normalisasi
Jumat 17-07-2020 08.00 17.00 9 jam Bank soal : Aljabar relasional
Sabtu 18-07-2020 08.00 15.00 7 jam Bank soal : SQL (CRUD)
Minggu 19-07-2020 - - - Libur
Total Jam Mingguan 52 Jam
Mengetahui,
Atasan Langsung/ Pembimbing KP
Lapangan

Ashri Dinimaharawati, S.pd, M.T

Note: Catatan Kegiatan Mahasiswa KP selama di tempat KP

 33

LOGBOOK 2

Catatan Kegiatan Kerja Praktik Mahasiswa Selama di Tempat Kerja Praktik

Nama/ NIM : Nola Ristiyanti/ 1103171234

Hari Tanggal Jam Jam Jumlah Kegiatan
Datang Pulang Jam
Senin 20-07-2020 08.00 17.00 9 jam Bank soal : SQL lanjut
Selasa 21-07-2020 08.00 17.00 9 jam Perekaman video software testing
Rabu 22-07-2020 08.00 17.00 9 jam Perekaman suara
Kamis 23-07-2020 08.00 17.00 9 jam Editing video software testing
Jumat 24-07-2020 08.00 17.00 9 jam Penutupan Kerja Praktik
Sabtu 18-07-2020 - - - Selesai
Minggu 19-07-2020 - - - Selesai
Total Jam Mingguan 45 jam
Mengetahui,
Atasan Langsung/ Pembimbing KP
Lapangan

Ashri Dinimaharawati, S.pd, M.T

Note: Catatan Kegiatan Mahasiswa KP selama di tempat KP