LAPORAN PRAKTIK KERJA LAPANGAN

Mendesain Website SMA (SLUA) Saraswati 1 Denpasar

Di PT. Patras Development

PAKET KEAHLIAN : REKAYASA PERANGKAT LUNAK

OLEH

NAMA : I Ketut Budi Astawa

NIS : 24935
KELAS : XII RPL 1

SEKOLAH MENENGAH KEJURUAN (SMK) NEGERI 1 DENPASAR

DENPASAR
2017-2018

1
 LEMBAR PENGESAHAN
LAPORAN PRAKTIK KERJA LAPANGAN

Hari :
Tanggal :

Pembimbing Sekolah, Pembimbing Industri,

I Made Sadia Permana, S.Kom. Bagus Putu Pramana Putra S.Kom.

NIP.

Koordinator Praktik Kerja Lapangan, Ketua Paket Keahlian RPL,

Drs. I Wayan Candra, M.Pd. Pande Made Mahendri P., S.Pd.

NIP 19630827 1988031015 NIP 19921105 201402 2 001

2
 KATA PENGANTAR

Puji syukur saya panjatkan kehadapan Tuhan Yang Maha Esa, karena
berkat anugerah-Nya penulis dapat melaksanakan Praktik Kerja Lapangan dengan
baik dan dapat menyusun serta menyelesaikan laporan ini secara maksimal.
Saya ucapkan banyak terima kasih kepada :
1. Bapak I Ketut Suparsa, S.T., MT sebagai Kepala SMK Negeri 1 Denpasar.
2. Bapak Drs. I Wayan Candra, M.Pd sebagai Koordinator Praktik Kerja
Lapangan.
3. Ibu Pande Made Mahendri P., S.Pd. selaku Ketua Paket Keahlian Rekayasa
Perangkat Lunak serta pembimbing kami di Sekolah.
4. Bapak Bagus Putu Pramana Putra,S.Kom. selaku Penanggung jawab PT.
Patras Development dan sekaligus pembimbing di Industri.
5. Bapak I Made Sadia Permana, S.Kom. selaku Penanggung jawab PT. Patras
Development dan sekaligus pembimbing di sekolah.
6. Semua pihak yang membantu dalam pelaksanaan Praktik Kerja Lapangan.
Saya berharap semoga laporan ini dapat memberikan manfaat yang besar
bagi semuanya. Saya menyadari bahwa laporan ini masih jauh dari kata sempurna,
maka saya mohon maaf apabila ada kesalahan terhadap laporan ini, adanya kritik
maupun saran akan sangat saya hargai sebagai perbaikan untuk kedepannya.
Sekali lagi saya mengucapkan banyak terima kasih kepada semua pihak yang
telah terlibat dalam pembuatan Laporan Praktik Kerja Lapangan ini.

Denpasar, 25 Agustus 2017

Penulis

3
 Daftar Isi
KATA PENGANTAR 3

BAB I 8

PENDAHULUAN 8

1.1 Latar Belakang 8

1.2 Tujuan Pembuatan Laporan 9

1.3 Pembatasan Ruang Lingkup 9

BAB II 10

KAJIAN TEORITIS 10

2.1 Tinjauan Umum 10

2.1.1 Software 10

2.1.2 Hardware 11

2.2 Konstruksi/ Model 11

2.2.1 Design Layout 11

2.3 Nama Bagian dan Fungsi 12

2.3.1 Header 12

2.3.2 Slider 12

2.3.3 Content 12

2.3.4 Footer 12

2.4 Cara Kerja 12

2.4.1 Siapkan Web Server 12

2.4.2 Mengakses Website 13

2.4.3 Mendesain tampilan website 14

2.5 Gangguan-gangguan 16

2.6 Keselamatan Kerja 17

4
BAB III 18

PELAPORAN 18

3.1 Pemeriksaan 18

3.2 Pengukuran 21

3.3 Memasang dan Menyetel 21

BAB IV 23

KESIMPULAN DAN SARAN 24

4.1 Kesimpulan 24

4.2 Saran 24

Daftar Pustaka

5
 Daftar Gambar

Gambar 2.2.1 Layout Halaman Utama 10

Gambar 2.4.5.1 Tampilan Header Website 13
Gambar 2.4.5.2 Tampilan Slider Website 14
Gambar 2.4.5.3.1 Tampilan Berita Terkini 14
Gambar 2.4.5.3.2 Tampilan Agenda 14
Gambar 2.4.5.3.3 Tampilan Sekilas SLUA 14
Gambar 2.4.5.3.4 Tampilan Testimonial 15
Gambar 2.4.5.3.5 Tampilan Kenali Kami 15
Gambar 2.4.5.4 Tampilan Footer 15
Gambar 3.1.1 Tampilan Halaman Utama 17
Gambar 3.1.2 Tampilan Halaman Sambutan 17
Gambar 3.1.3 Tampilan Halaman MIPA 18
Gambar 3.1.4 Tampilan Halaman MIPA 18
Gambar 3.1.5 Tampilan Halaman Kontak 19
Gambar 3.1.6 Tampilan Halaman Kontak 19
Gambar 3.1.7 Tampilan Halaman Error 19
Gambar 3.3.1 Login Hostinger 21
Gambar 3.3.2 File Manager 21

6
 Daftar Tabel

Table 3.2 Hasil Pengukuran 21

7
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Dalam rangka untuk mendekatkan kesesuaian antara mutu dan tamatan
pendidikan sekolah menengah kejuruan (SMK) perlu adanya dukungan dari
berbagai pihak yang terkait dengan bidang keahlian yang dibutuhkan oleh
lapangan kerja. Salah satu pihak yang ikut serta dalam menghasilkan tamatan dan
mutu pendidikan yang berkualitas dan berdedikasi tinggi serta berdisiplin ilmu
adalah pihak DU/DI (Dunia Usaha/Dunia Industri).
Pelajaran praktik yang didapatkan dari sekolah masih belum ada artinya jika
para siswa tidak dibekali/diberikan Praktik Kerja Lapangan seperti yang terjadi
langsung di dunia usaha/dunia industri. Kegiatan belajar seperti ini masih belum
cukup untuk bisa menyiapkan tenaga kerja yang professional dalam bidangnya.
Oleh karena itu perlu adanya suatu kegiatan belajar dalam bentuk lain di sekolah
yang berbentuk Praktik Kerja Lapangan.
Praktik Kerja Lapangan (PKL) merupakan sarana yang paling tepat bagi
para siswa untuk mengetahui dan mempraktikkan secara langsung bagaimana
proses produksi yang sedang berlangsung di sebuah industri dan juga sebagai
tahapan awal untuk beradaptasi sebelum nantinya para siswa bekerja setelah
keluar dari sekolah. Dengan begitu, siswa diharapkan dapat meningkatkan
kegiatan belajarnya di sekolah dengan berpijak bahwa kalau mereka nantinya
bekerja di dunia usaha/dunia industri sudah betul-betul siap dan matang, sebab
para siswa lebih dahulu mendapatkan pengetahuan dan pengalaman tentang
situasi dan kondisi pada saat melaksanakan Praktik Kerja Lapangan.
Salah satu industri yang mendukung pelaksanaan Praktik Kerja Lapangan
adalah PT. Patras Development. PT. Patras Development merupakan satu dari
sekian banyak perusahaan yang memberi kesempatan dan mendidik para siswa
dalam melaksanakan Praktik Kerja Lapangan. Selain itu, PT. Patras Development
juga telah banyak mendapat penghargaan, khususnya dalam perkembangan dunia
teknologi informasi.

8
1.2 Tujuan Pembuatan Laporan
Tujuan dari pembuatan Laporan Praktik Kerja Lapangan ini adalah sebagai
berikut :
a. Meningkatkan kompetensi dalam membuat laporan.
b. Meningkatkan kemampuan dalam karya tulis.
c. Memperoleh pengalaman kerja sesuai standar industri.
d. Meningkatkan etos kerja.
e. Bukti secara tertulis telah melaksanakan praktik kerja di industri.
f. Untuk mendapatkan nilai Praktik Kerja Lapangan.

1.3 Pembatasan Ruang Lingkup

Judul yang penulis berikan pada laporan ini adalah “Mendesain
Website SMA (SLUA) Saraswati 1 Denpasar”. Ruang lingkup yang akan
penulis bahas adalah :
1.3.1 Tampilan Halaman Utama
Pada tampilan halaman utama, seperti website pada umumnya,user
akan disungguhkan dengan menu-menu, slider dan berita terbaru.

1.3.2 Tampilan Halaman Tambahan

Pada tampilan halaman tambahan ini, user disediakan beberapa
halaman seperti sambutan, dan contact us.

9
 BAB II
KAJIAN TEORITIS

2.1 Tinjauan Umum

Website yang akan di bahas oleh penulis adalah Website SMA (SLUA)
Saraswati 1 Denpasar. Website ini nantinya dijadikan situs resmi dari Sekolah
SMA (SLUA) Saraswati 1 Denpasar. Diperlukan beberapa bagian seperti berikut :

2.1.1 Software
2.1.1.1 XAMPP (Web Server)
Aplikasi Web Server adalah sebuah program yang berfungsi untuk
menerima dan mengelolah permintaan Browser Web. Pada laporan ini
penulis menggunakan aplikasi Web server XAMPP (X Apache
MySQL PHP Perl). Dalam paket XAMPP sudah terdapat Apache
(Web Server), MySQL (Database), PHP (Server Side Scripting), Perl,
FTP Server, phpMyAdmin dan berbagai pustaka bantu lainnya.

2.1.1.2 Google Chrome (Browser)

Pengertian browser secara sederhana adalah sebuah perangkat
lunak yang manfaatnya adalah untuk menampilkan berbagai dokumen
yang tersedia pada web server, proses menampilkan berbagai dokumen
ini melewati sebuah interaksi antara browser dengan web server. Pada
laporan ini penulis menggunakan browser Google Chrome.

2.1.1.3 Sublime Text (Text Editor)

Sublime Text adalah sebuah teks editor yang sangat canggih untuk
coding, markup dan lain-lain. Antarmuka pengguna yang sangat
sederhana, fitur yang luar biasa serta kinerja yang cepat.

10
 2.1.2 Hardware

Laptop ASUS A456U, yang memiliki spesifikasi sebagai berikut.

1. Prosesor : Intel® Core™ i5-7200U CPU @ 2.50GHz

2. RAM : 4 GB DDR3L

3. Sistem Operasi : Windows 10 Pro (64-Bit)

2.2 Konstruksi/ Model

2.2.1 Design Layout

Dalam perancangan website ini, terdapat header, menu-menu.
penulis menggunakan 3 menu utama. Dan masing-masing menu memiliki
tampilan yang berbeda. Terdapat juga content dan footernya.

Gambar 2.2.1 Layout Halaman Utama

11
2.3 Nama Bagian dan Fungsi
Dibagian ini, saya akan menjelaskan nama bagian beserta fungsinya dari
website yang telah saya kerjakan di dunia industri. Dengan adanya nama bagian
ini, user dapat mengembangkan isi dari konten.

2.3.1 Header
Pada bagian header terdapat logo dan beberapa menu utama seperti home.
fitur, contact us.

2.3.2 Slider
Pada bagian slider terdapat beberapa gambar slide yang berisi tentang
website sekolah ini.

2.3.3 Content
Pada bagian content ini terdapat beberapa bagian seperti berita terkini,
agenda dan testimoninya.

2.3.4 Footer
Pada bagian footer terdapat copyright dan beberapa menu juga disana.

2.4 Cara Kerja

Pada bagian ini penulis menjelaskan bagaimana langkah mendesain
“Website SMA (SLUA) Saraswati 1 Denpasar” ini. Langkah-langkah dalam
laporan ini penulis sesuaikan dengan apa yang dikerjakan di industri secara garis
besar. Berikut langkah-langkahnya :

2.4.1 Siapkan Web Server

Dalam bagian ini, penulis akan menjelaskan pemasangan utama yang
diperlukan agar alur website bisa berjalan dengan baik.

12
 Gambar 2.4.1 Web Server XAMPP

2.4.2 Mengakses Website

Langkah awal dalam memdesain web ini adalah dengan mengakses
website yang akan digunakan dalam mengecek desain web ini dengan
mengetikan localhost/website/index.php pada browser. Berikut langkah-
langkahnya :

2.4.2.1 Cara kerja halaman utama (home)

Pada bagian halaman ini berisi sekilas info sekolah SMA Saraswati
Denpasar, berita terkini dan testimonial.

2.4.2.2 Cara kerja halaman kontak (contact us)

Pada bagian halaman ini berisi lokasi sekolah (google map) dan form
message untuk mengirimkan pesan.

2.4.2.3 Cara kerja halaman sambutan (welcome)

Pada bagian halaman ini berisi kata-kata sambutan dari kepala
sekolah SMA (SLUA) Saraswati 1 Denpasar.

13
 2.4.2.4 Cara kerja halaman kelas (class)
Pada bagian halaman ini berisi deskripsi program studi dan daftar
guru yang mengajar kelas tersebut.

2.4.2.5 Cara kerja halaman error (error 404)

Pada bagian halaman ini berisi pemberitahuan bahwa halaman yang
ingin diakses tersebut tidak ada atau masih di proses.

2.4.3 Mendesign tampilan website

Tentunya website akan sejenis dengan tampilan web pada
umumnya. Berikut bagian yang sudah saya desain :

2.4.3.1 Header

Header berisikan logo SLUA dan beberapa menu seperti home,

fitur dan contact us.

Gambar 2.4.5.1 Tampilan Header Website

2.4.3.2 Slider

Slider berisikan gabungan beberapa gambar yang di slide dan

menampilkan informasi tertentu seperti info tentang sekolah.

14
 Gambar 2.4.5.2 Tampilan Slider Website

2.4.3.3 Content

Content berisi berita terkini, agenda, sekolah, ekstrakulikuler,

sekilas SLUA, testimonial dan video kenali kami.

Gambar 2.4.5.3.1 Tampilan Berita Terkini

Gambar 2.4.5.3.2 Tampilan Agenda

Gambar 2.4.5.3.3 Tampilan Sekilas SLUA

15
 Gambar 2.4.5.3.4 Tampilan Testimonial

Gambar 2.4.5.3.5 Tampilan Kenali Kami

2.4.3.4 Footer
Foter berisikan copyright dan beberapa menu.

Gambar 2.4.5.4 Tampilan Footer

2.5 Gangguan-gangguan
Dalam proses perancangan dan mendesain Website, penulis mengalami
beberapa gangguan-gangguan. Gangguan yang penulis alami adalah sebagai
berikut :
a. Beberapa kode program yang berjalan tidak sesuai dengan rancangan
b. Akses internet yang kadang mengalami gangguan.
c. Masih terdapatnya beberapa bug dalam website ini.

16
2.6 Keselamatan Kerja
Ilmu Keselamatan dan Kesehatan Kerja ( K3 ) merupakan bagian dari ilmu
Kesehatan Masyarakat. Salah satu faktor yang mempengaruhi tingkat ergonomis
di tempat kerja atau kantor adalah posisi pekerja itu sendiri. Dengan posisi kerja
yang baik akan dapat menjaga kesehatan tubuh, dan mencegah timbulnya
kelelahan sewaktu bekerja. Berikut beberapa hal yang perlu diperhatikan dalam
bekerja :

2.6.1 Kenyamanan posisi duduk

Saat kita duduk saat mengoperasikan komputer, diperlukan posisi yang baik
dan benar seperti:
a. Tempat duduk yang ergonomis yang memiliki sandaran yang nyaman
b. Kursi dapat di atur tinggi rendahnya
c. Kursi dapat di putar atau dapat bergeser

2.6.2 Kenyamanan posisi mata

Posisi mata yang baik dan benar di depan komputer yaitu :
a. Posisi mata pada layar harus lurus
b. Posisi mata tidak terlalu tinggi/rendah
c. Layar yang digunakan sebaiknya layar yang low radiasi
d. Jangan menggunakan efek warna yang terlalu terang

17
 BAB III

PELAPORAN

3.1 Pemeriksaan
Berdasarkan rancangan layout yang telah dibuat dan setelah melakukan
proses pembuatan desain tampilan website, website sudah menyelesaikan modul-
modul yang diperlukan sesuai dengan pembatasan ruang lingkup . Berikut
tampilan dari website SMA (SLUA) Saraswati 1 Denpasar:

Gambar 3.1.1 Tampilan Halaman Utama

18
Gambar 3.1.2 Tampilan Halaman Sambutan

Gambar 3.1.3 Tampilan Halaman MIPA

Gambar 3.1.4 Tampilan Halaman MIPA

19
Gambar 3.1.5 Tampilan Halaman Kontak

Gambar 3.1.6 Tampilan Halaman Kontak

20
 Gambar 3.1.7 Tampilan Halaman Error

3.2 Pengukuran
Berikut hasil pengukuran untuk proses pembuatan desain Website SLUA.

No. Nama Alur Kerja Kriteria Pengujian Hasil Uji

Bagian yang Diuji
1 Halaman Melihat semua Mengecek semua Sesuai dengan
Utama bagian yang link dan bagian kriteria pengujian
ditampilkan di menu yang ada
website
2 Halaman Melihat info Mengecek Sesuai dengan
Sambutan sambutan informasi kriteria pengujian
sekolah sambutan kepala
sekolah
3 Halaman Melihat Mengecek Sesuai dengan
MIPA tampilan yang tampilan ini, kriteria pengujian
berisikan kelas menampilkan info
MIPA kelas MIPA
berserta gurunya
4 Halaman Melihat lokasi Mengecek Sesuai dengan
Kontak di google map tampilan lokasi kriteria pengujian
dan mengisi map dan mengisi
form pesan form pesan
kemuan mengirim
5 Halaman Melihat Mengecek halaman Sesuai dengan

21
 No. Nama Alur Kerja Kriteria Pengujian Hasil Uji
Bagian yang Diuji
Error tampilan error error dan halaman kriteria pengujian
dengan benar yang dilinkan
Table 3.2 Hasil Pengukuran

3.3 Memasang dan Menyetel

Untuk pembuatan website ini spesifikasi hardware minimum yang
diperlukan yaitu sesuai dengan spesifikasi yang terdapat pada bagian Tinjauan
Umum 2.1 :
Untuk dapat menggunakan website ini secara luas. Diperlukan proses
mengonlinekan website ini. Dan berikut merupakan langkah langkahnya :
1. Langkah pertama, buka browser. Lalu ketikan www.hostinger.co.id pada
address bar browser. Lalu log in.

Gambar 3.3.1 Login Hostinger

2. Pilih hosting,lalu pilih nama domain yang digunakan. Selanjutnya pilih

kelola. Lalu cari file manager 2.

22
 Gambar 3.3.2 File Manager

3. Setelah itu upload file dari website Slua Denpasar. Tapi harus berupa
file zip atau rar. Taruh file dari website tersebut di public html.

Jika sudah. Maka proses mengonlinekan website sudah selesai. Sekarang website
Slua Denpasar bisa diakses oleh semua orang. Di www.Sluadenpasar.esy.es.

23
BAB IV

KESIMPULAN DAN SARAN

4.1 Kesimpulan
Praktik Kerja Lapangan merupakan sarana yang paling tepat bagi para siswa
untuk mengetahui dan mempraktikkan secara langsung bagaimana proses
produksi yang sedang berlangsung di sebuah industri dan juga sebagai tahapan
awal untuk beradaptasi dalam dunia industri. Serta dalam pembuatan laporan
praktik kerja ini memiliki tujuan untuk menjelaskan salah satu kegiatan selama
masa prakerin yaitu membuat website Slua Denpasar. Pengujian dari website ini
ketika dionline kan sudah tampil seperti yang diharapkan penulis. selain itu masih
banyak kekurangan yang dihadirkan oleh website ini.

4.2 Saran
Penulis berharap kedepannya fitur fitur atau menu yang ada di website ini
dapat dikembangkan sesuai dengan kebutuhan dari user. Sehingga tampilan dari
website ini lebih menarik.

24
 DAFTAR PUSTAKA
Buku Perangkat Dan Petunjuk Teknis Praktik Kerja Lapangan
www.google.com

25