Laporan ALI

LAPORAN
PRAKTEK KERJA INDUSTRI

DI
PT NUTRIFOOD INDONESIA
JALAN SELAYAR 2 BLOK H 7-8 KAWASAN INDUSTRI MM 2100
CIBITUNG, BEKASI
APLIKASI DISPLAY INFORMASI DEPARTEMEN PRODUKSI

BERBASIS WEBSITE
Diajukan untuk memenuhi salah satu syarat kelulusan dari SMK Negeri 1 Cimahi
Oleh :
NAMA
NO. INDUK
TINGKAT
PAKET KEAHLIAN
BIDANG KEAHLIAN
: ALI MUSTOFA
: 121010081
: IV (EMPAT)
: TEKNIK INFORMASI DAN KOMUNIKASI
: REKAYASA PERANGKAT LUNAK
SEKOLAH MENENGAH KEJURUAN NEGERI 1 CIMAHI

KOTA CIMAHI
2016
PENGESAHAN DARI PIHAK INDUSTRI
APLIKASI DISPLAY PRODUKSI BERBASIS WEBSITE

Laporan ini telah disetujui oleh :
Pembimbing,
Eko Adi Nugroho

NIK. 0002271207
Mengetahui,
PRD Manager,
Rizal Bahara
NIK. 0000300304
HRD Manager,
Dewi Kristiani
NIK. 0002140609
PT NUTRIFOOD INDONESIA
BEKASI
2016
PENGESAHAN DARI PIHAK SEKOLAH
APLIKASI DISPLAY PRODUKSI BERBASIS WEBSITE
Laporan ini telah disetujui oleh :

Ketua Kompetensi Keahlian,
Pembimbing,
AGUS NUGROHO, S. Pd, MT

NIP : 19810324 200801 1 004
YULI PAMUNGKAS, SP
NIP : 19810324 200801 1 004
MENGETAHUI :
Kepala SMK Negeri 1 Cimahi
Drs. H. ERMIZUL, M.Pd

NIP : 19570102 198203 1 024
KATA PENGANTAR
Puji syukur kita panjatkan kehadirat Allah SWT yang telah memberikan
rahmat dan karunia-Nya kepada kita semua, tidak lupa kita sampaikan shalawat
serta salam kepada junjunan kita Nabi Muhammad SAW beserta para keluarga,
sahabat, dan para pengikutnya dari awal sampai akhir zaman. Maha besar Allah
SWT yang telah memberi petunjuk kepada penulis sehingga laporan ini dapat
selesai tepat pada waktunya.
Pembuatan karya tulis Praktek Kerja Industri ini diajukan sebagai salah
satu syarat kelulusan bagi setiap siswa tingkat IV (empat) di Sekolah Menengah
Kejuruan Negeri 1 Kota Cimahi.
Pembuatan karya tulis ini berdasarkan hasil praktek yang diperoleh penulis
selama melaksanakan program Praktek Kerja Industri selama 5 bulan di
PT. NUTRIFOOD INDONESIA terhitung mulai dari tanggal 03 Agustus 31
Desember 2015.
Penulis ditempatkan di bagian Departemen PRD (Production Plan D).
Departemen ini bertanggung jawab atas kelangsungan proses produksi yang
bergerak di bidang produksi minuman untuk diet dan kesehatan.
Penulis telah berhasil menyusun karya tulis sebagai hasil dari kegiatan
Praktek Kerja Industri di PT. Nutrifood Indonesia. Karya tulis ini berbentuk
laporan yang berjudul APLIKASI DISPLAY INFORMASI DEPARTEMEN
PRODUKSI BERBASIS WEBSITE.
Banyak pihak yang telah membantu Penulis dalam pelaksanaan Praktek
Kerja Industri dan penulisan karya tulis ini, bantuan yang bersifat moril maupun
materil yang telah membantu dalam kegiatan Praktek Kerja Industri dan
pembuatan karya tulis ini. Oleh karena itu pada kesempatan ini dengan segala
hormat penulis mengucapkan terima kasih kepada :
1. Orang tua dan keluarga yang tidak pernah berhenti memberikan motivasi,
semangat, serta dukungan baik moril maupun materil,
2. Bapak Rizal Bahara, selaku manager PRD di PT. Nutrifood Indonesia,
3. Bapak Eko Adi Nugroho, selaku eksekutif PRD di PT. Nutrifood Indonesia
sekaligus pembimbing di PT. Nutrifood Indonesia,
4. Bapak Drs. H. Ermizul, M.Pd., selaku Kepala Sekolah Menengah
Kejuruan Negeri 1 Cimahi,
5. Bapak Agus Nugroho, S.Pd, MT selaku Ketua Program Keahlian
Rekayasa Perangkat Lunak,
6. Bapak Chandra Hardiawan selaku Wali Kelas 4 RPL,
7. Bapak Yuli Pamungkas, SP selaku pembimbing di sekolah,
Penulis menyadari bahwa dalam penyusunan karya tulis ini masih banyak
kesalahan dan kekurangan yang disebabkan oleh keterbatasan kemampuan yang
Penulis miliki dan keterbatasan bahan yang diperoleh. Oleh karena itu Penulis
mengharapkan kritik dan saran yang bersifat membangun sebagai bahan masukan
bagi Penulis dimasa yang akan datang.
Diharapkan Laporan Praktik Kerja Industri ini dapat bermanfaat bagi para
pembaca dan mampu memperluas pengetahuan yang mana akan berguna di masa
depan.
Cimahi, Januari 2016
Penulis
DAFTAR ISI
KATA PENGANTAR................................................................................................i
DAFTAR ISI...........................................................................................................iii
DAFTAR GAMBAR...............................................................................................v
DAFTAR TABEL.................................................................................................viii
BAB I PENDAHULUAN........................................................................................9
1.1.
Latar Belakang Masalah............................................................................9
1.2.
Tujuan........................................................................................................2
1.3.
Pembatasan Masalah.................................................................................2
1.4.
Sistematika Pembahasan...........................................................................2
BAB II TINJAUAN PERUSAHAAN.....................................................................4

2.1.
PT. Nutrifood Indonesia............................................................................4
2.2.
Lokasi PT. Nutrifood Indonesia................................................................5
2.3.
Sertifikasi...................................................................................................6
2.4.
Visi dan Misi Perusahaan..........................................................................6
2.5.
Budaya Perusahaan....................................................................................6
2.6.
Logo Perusahaan.......................................................................................9
2.7.
Pemberdayaan Masyarakat......................................................................10
2.8.
Pengenalan Produk..................................................................................12
BAB III LANDASAN TEORI...............................................................................16

3.1.
Website.....................................................................................................16
3.1.1.
Jenis-Jenis Website...........................................................................16
3.1.2.
Manfaat Website...............................................................................17
3.1.3.
Macam-Macam Domain Website.....................................................17
3.2.
HTML (Hypertext Markup Language)....................................................18
3.2.1.
Fungsi dan Kegunaan HTML..........................................................19
3.2.2.
Struktur Dasar HTML......................................................................19
3.3.
CSS (Cascading Style Sheet)...................................................................21
3.3.1.
Struktur CSS....................................................................................22
3.3.2.
Fungsi CSS.......................................................................................23
3.3.3.
Metode Penulisan CSS.....................................................................23
3.3.4.
Kelebihan CSS.................................................................................24
3.4.
PHP (PHP: Hypertext Processor)...........................................................24
3.4.1.
Kelebihan PHP.................................................................................25
3.4.2.
Struktur Dasar PHP..........................................................................25
3.5.
Database (Basis Data).............................................................................26
3.5.1.
Manfaat Penggunaan Database........................................................27
3.5.2.
Bahasa Basis Data............................................................................28
3.5.3.
Entity Relationship Diagram (ERD)................................................28
3.5.4.
Data Flow Diagram (DFD)..............................................................31
3.5.5.
Database Server................................................................................32
3.6.
Web Server...............................................................................................33
3.6.1.
Fungsi Web Server...........................................................................34
3.6.2.
Contoh Web Server..........................................................................34
BAB IV PEMBAHASAN......................................................................................36
4.1.
Analisa Sistem.........................................................................................36
4.2.
Analisa Kebutuhan Sistem......................................................................36
4.3.
Analisa Kebutuhan Data..........................................................................37
4.4.
Perancangan Prosedur atau Alur..............................................................39
4.4.1.
4.5.
Flowchart Administrator..................................................................39
Perancangan Proses.................................................................................43
4.5.1.
4.6.
Data Flow Diagram (DFD).............................................................43
Perancangan Basis Data..........................................................................47
4.6.1.
Entity Relationship Diagram (ERD)................................................47
4.6.2.
Deskripsi Tabel.................................................................................48
4.7.
Perancangan Interface atau Tampilan.....................................................52
4.7.1.
Layout Halaman Front End..............................................................52
4.7.2.
Layout Halaman Back End...............................................................54
4.8.
Sitemap....................................................................................................54
4.9.
Implementasi...........................................................................................56
4.9.1.
Persiapan Teknis...............................................................................56
4.10.
Simulasi Interface Aplikasi.................................................................59
4.11.
Pengujian Aplikasi...............................................................................74
4.11.1.
Poin Pengujian..............................................................................74
4.11.2.
Tabel Pengujian Aplikasi.............................................................76
BAB V PENUTUP.................................................................................................78
5.1.
Kesimpulan..............................................................................................78
5.2.
Saran........................................................................................................78
5.2.1.
Saran Untuk Pihak Industri..............................................................78
5.2.2.
Saran Untuk Pihak Sekolah..............................................................79
DAFTAR PUSTAKA.............................................................................................81
LAMPIRAN...........................................................................................................82
DAFTAR GAMBAR
Gambar 2.1 Lambang I-CARE................................................................................7

Gambar 2.2 Logo PT. Nutrifood Indonesia............................................................10
Gambar 3.1 Struktur CSS.......................................................................................22
Gambar 3.2 Notasi ERD Entitas............................................................................29
Gambar 3.3 Notasi ERD Atribut............................................................................29
Gambar 3.4 Notasi ERD Relasi.............................................................................30
Gambar 3.5 Notasi ERD Relasi One To One.........................................................30

Gambar 3.6 Notasi ERD Relasi One To Many.......................................................30
Gambar 3.7 Notasi ERD Relasi Many To One.......................................................31
Gambar 3.8 Notasi ERD Relasi Many To Many....................................................31
Gambar 4.1 Flowchart Administrator Login.........................................................39
Gambar 4.2 Flowchart Administrator Tambah Bagian..........................................39
Gambar 4.3 Flowchart Administrator Tambah Event............................................40
Gambar 4.4 Flowchart Administrator Tambah Foto..............................................40
Gambar 4.5 Flowchart Administrator Tambah Tugas...........................................41
Gambar 4.6 Flowchart Administrator Tambah Video............................................41
Gambar 4.7 Flowchart Administrator Tambah Shift..............................................42
Gambar 4.8 Flowchart Administrator Tambah Mesin...........................................42
Gambar 4.9 Flowchart Administrator Tambah Berita Berjalan.............................43
Gambar 4.10 Flowchart Administrator Tambah Karyawan..................................43
Gambar 4.11 DFD level 0 Aplikasi Display Informasi Produksi...........................44
Gambar 4.12 DFD level 1 Aplikasi Display Informasi Produksi...........................44
Gambar 4.13 DFD level 2 Login Aplikasi Display Informasi Produksi................45
Gambar 4.14 DFD level 2 Tambah berita Aplikasi Display Informasi Produksi...45
Gambar 4.15 DFD level 2 Tambah JPM Aplikasi Display Informasi Produksi.....45
Gambar 4.16 DFD level 2 Tambah Foto Aplikasi Display Informasi Produksi.....46
Gambar 4.17 DFD level 2 Tambah Video Aplikasi Display Informasi Produksi. .46
Gambar 4.18 DFD level 2 Tambah Event Aplikasi Display Informasi Produksi...47
Gambar 4.19 ERD Aplikasi Display Informasi Produksi......................................48
Gambar 4.20 Layout Halaman login administrator...............................................52
Gambar 4.21 Layout Halaman beranda pengguna.................................................53
Gambar 4.22 Layout Halaman JPM, informasi, grafik..........................................53
Gambar 4.23 Layout Halaman beranda administrator...........................................54
Gambar 4.24 Sitemap Halaman Pengguna.............................................................55
Gambar 4.25 Sitemap Halaman Administrator......................................................55
Gambar 4.26 Pembuatan Basis Data......................................................................57
Gambar 4.27 Pembuatan Tabel..............................................................................57
Gambar 4.28 Pembuatan Isi Tabel (Kolom)..........................................................58
Gambar 4.29 Skrip Koneksi...................................................................................58

Gambar 4.30 Skrip Pemanggilan CSS...................................................................58
Gambar 4.31 Skrip Pemanggilan Plugin Javascript...............................................58
Gambar 4.32 Halaman Beranda Pengguna 1.........................................................59
Gambar 4.33 Halaman Beranda Pengguna 2.........................................................60
Gambar 4.34 Halaman JPM...................................................................................61
Gambar 4.35 Halaman Galeri Foto........................................................................61
Gambar 4.36 Halaman Galeri Video......................................................................62
Gambar 4.37 Halaman Grafik................................................................................62
Gambar 4.38 Halaman Info....................................................................................63
Gambar 4.39 Halaman Instruksi Kerja..................................................................64
Gambar 4.40 Halaman Instruksi Kerja Detail........................................................64
Gambar 4.41 Halaman login..................................................................................65
Gambar 4.42 Halaman beranda administrator.......................................................66
Gambar 4.43 Halaman Tambah JPM.....................................................................66
Gambar 4.44 Halaman Import Waste.....................................................................67
Gambar 4.45 Halaman Import Instruksi Kerja.......................................................68
Gambar 4.46 Halaman Tambah Berita Berjalan....................................................68
Gambar 4.47 Halaman Tambah Info......................................................................69
Gambar 4.48 Halaman Lihat Info..........................................................................70
Gambar 4.49 Halaman Tambah Event...................................................................70
Gambar 4.50 Halaman Lihat Event........................................................................71
Gambar 4.51 Halaman Tambah Karyawan............................................................72
Gambar 4.52 Halaman Lihat Karyawan................................................................72
Gambar 4.53 Halaman Ganti Background.............................................................73
Gambar 4.54 Halaman Ganti IP.............................................................................74
DAFTAR TABEL
Tabel 3.1 Notasi DFD Menurut Para Ahli..............................................................31

Tabel 4.1 Analisa Kebutuhan Sistem.....................................................................36
Tabel 4.2 Analisa Kebutuhan Data.........................................................................37
Tabel 4.3 Struktur Tabel Bagian.............................................................................48
Tabel 4.4 Struktur Tabel Event...............................................................................49
Tabel 4.5 Struktur Tabel Foto.................................................................................49
Tabel 4.6 Struktur Tabel jpm..................................................................................49

Tabel 4.7 Struktur Tabel jpm_detail.......................................................................49
Tabel 4.8 Struktur Tabel karyawan........................................................................50
Tabel 4.9 Struktur Tabel mesin..............................................................................50
Tabel 4.10 Struktur Tabel mesin_detail..................................................................50
Tabel 4.11 Struktur Tabel shift...............................................................................51
Tabel 4.12 Struktur Tabel teks_berjalan.................................................................51
Tabel 4.13 Struktur Tabel tugas..............................................................................51
Tabel 4.14 Struktur Tabel Video............................................................................51
BAB I
PENDAHULUAN
1.1. Latar Belakang Masalah

Dewasa ini era globalisasi yang semakin terasa pengaruhnya menjadikan
manusia sangat bergantung pada teknologi. Perkembangan teknologi saat ini terus
berkembang dari hari ke hari baik informasi tulisan, suara maupun gambar.
Perkembangan teknologi ini menjadikan masyarakat dengan mudahnya memiliki
akses terhadap sumber informasi dimanapun dan kapanpun. Akibatnya semakin
banyak perusahaan penyedia informasi berlomba-lomba untuk menyajikan
informasi terkini yang dibutuhkan masyarakat.
Dengan pesatnya perkembangan teknologi, maka tidaklah heran jika
diberbagai perusahaan banyak yang menggunakan komputer sebagai alat untuk
membantu pekerjaan.
PT. Nutrifood Indonesia adalah tempat dimana penulis melakukan Praktik
Kerja Industri. Di PT. Nutrifood Indonesia hampir semua informasi departemen di
cetak menggunakan kertas. Penggunaan kertas yang berlebihan sangat tidak
ramah lingkungan. Untuk itu perlu adanya aplikasi yang dapat mengurangi
penggunaan kertas.
Berdasarkan latar belakang masalah di atas, maka penulis mengambil
judul APLIKASI DISPLAY INFORMASI DEPARTEMEN PRODUKSI
BERBASIS WEBSITE guna membantu mengurangi penggunaan kertas yang
berlebihan agar ramah lingkungan.
1.2. Tujuan
Tujuan penulis mengambil judul APLIKASI DISPLAY INFORMASI
DEPARTEMEN PRODUKSI BERBASIS WEBSITE adalah :
1. Mempermudah pengguna untuk menyampaikan informasi.
2. Mempermudah pengguna dalam pembuatan jadwal kerja mingguan,
pembuatan galeri foto ataupun video, pembuatan event dan lain
sebagainya.
3. Meminimalisir penggunaan kertas agar lebih ramah lingkungan.
1.3. Pembatasan Masalah
Agar penulisan Laporan Praktik Kerja Industri ini tidak terlalu luas dan
dapat lebih terarah, maka pembahasan laporan ini dibatasi sesuai dengan judul
laporan yang diajukan.
Penulis membuat laporan praktik kerja industri dengan judul APLIKASI

DISPLAY
INFORMASI
DEPARTEMEN
PRODUKSI
BERBASIS
WEBSITE sehingga pembatasan masalah dalam penyusunan laporan ini adalah

sebagai berikut :
1. Layout dan sistem aplikasi tidak menggunakan framework.
2. Untuk melakukan penambahan konten website hanya dilakukan oleh
administrator.
1.4. Sistematika Pembahasan
Secara garis besar materi Laporan Praktik Kerja Industri ini terbagi dalam
beberapa bab yang tersusun sebagai berikut :
BAB 1 PENDAHULUAN
Bab ini membahas tentang latar belakang aplikasi, tujuan pembuatan
aplikasi, pembatasan masalah dan sistematika pembahasan.
BAB 2 TINJAUAN PERUSAHAAN
Bab ini membahas tentang profil perusahaan, sejarah perusahaan, lokasi
perusahaan, sertifikasi, visi dan misi perusahaan, budaya perusahaan,
makna dari logo perusahaan, pemberdayaan masyarakat, dan pengenalan
produk perusahaan.
BAB 3 LANDASAN TEORI
Bab ini membahas tentang teori pendukung yang menjadi landasan dalam
pembuatan aplikasi.
BAB 4 ANALISA DAN PERANCANGAN
Bab ini membahas tentang uraian pembahasan aplikasi, dari mulai analisa
sistem berjalan, analisa kebutuhan sistem, analisa kebutuhan data,
perancangan prosedur atau alur, dan perancangan interface.
BAB 5 IMPLEMENTASI DAN PENGUJIAN
Bab ini menjelaskan bentuk implementasi aplikasi mulai dari persiapan
teknis yaitu cara menampilkan aplikasi, pembuatan kode program dan
simulasi interface aplikasi dengan screenshot tampilan untuk setiap fungsi,
dan melakukan pengujian aplikasi.
BAB 6 KESIMPULAN
Bab ini membahas tentang kesimpulan dan saran guna memperbaiki

kekurangan yang terdapat pada aplikasi Display Informasi Departemen
Produksi tersebut.
BAB II
TINJAUAN PERUSAHAAN
2.1.
PT. Nutrifood Indonesia

Nutrifood Indonesia berdiri sejak tahun 1979, yang merupakan perusahaan
swasta nasional yang bergerak di bidang industri makanan dan minuman,

khususnya makanan dan minuman yang memberikan manfaat untuk kesegaran
kesehatan dan penampilan. Dengan jaringan distribusi yang luas, produk
Nutrifood tidak hanya dipasarkan di dalam negeri, namun telah berhasil diterima
dengan baik di pasaran ekspor. Berbagai Negara yang menjadi tujuan ekspor,
antara lain Bangladesh, Kuwait, Myanmar, Vietnam, Thailand, Srilanka, Nigeria
dan masih banyak lagi.
PT Nutrifood Indonesia memiliki 3 pilar pendukung sebagai dasar dalam
melaksanakan berbagai kegiatan sehingga kegiatan-kegiatan tersebut mampu
memberikan hasil yang memuaskan dan bermanfaat. 3 pilar tersebut antara lain:
1. Produk dan Layanan Berkualitas
Nutrifood secara inovatif menyediakan produk dan layanan premium yang
bermutu tinggi, memberi kemudahan dan menyenangkan, secara efektif
berdasarkan pendekatan ilmiah.
2. Manajemen yang Profesional
Nutrifood didukung oleh tim ahli professional serta memiliki komitmen
tinggi, berpengalaman dan inovatif dalam memaksimalkan kualitas produk
dan layanan.
3. Program yang Melibatkan Pemangku Kepentingan
Nutrifood secara inovatif dan proaktif melakukan edukasi dan promosi
gaya hidup sehat dan bernutrisi yang melibatkan pemangku kepentingan
utama (Key Stakeholders).
Nutrifood Indonesia adalah perusahaan yang secara inovatif menginspirasi

dan membantu setiap individu untuk mencapai keseimbangan hidup dengan
menjalankan pola hidup sehat yang menyenangkan dan memperhatikan asupan
nutrisi sehingga dapat menikmati hidup sehat lebih lama.
Oleh karena itu, produk yang dihasilkan adalah produk-produk untuk
kesehatan. Dua macam produk yang dihasilkan oleh PT Nutrifood Indonesia,
yaitu:
1. Produk Diet
Produk Diet ini untuk konsumen yang menderita penyakit Diabetes
mellitus / kencing manis. Selain itu, pengguna produk ini juga untuk
konsumen yang ingin menjaga kerampingan tubuh dalam mengatasi
kegemukan. Konsumen dapat menikmati makanan dan minuman yang
enak dan segar tanpa tambahan pemanis yang berlebihan namun tetap
dapat menjaga asupan nutrisi untuk kesehatan tubuh.
2. Produk Non Diet
PT. Nutrifood Indonesia terus berusahan untuk memajukan dan
mengembangkan produk-produknya sesuai dengan tuntutan zaman dan
permintaan pasar.
2.2.
Lokasi PT. Nutrifood Indonesia

PT Nutrifood Indonesia menempati 3 lokasi yang memiliki fungsi yang
berbeda, yaitu :
1. Jalan Rawabali II No. 3, Kawasan Industri Pulogadung, Jakarta Timur.
Lokasi ini merupakan kantor pusat PT. Nutrifood Indonesia.
2. Jalan Raya Ciawi No. 280A, Ciawi, Bogor. Lokasi ini merupakan pabrik
dan gudang logistic pertama dari PT. Nutrifood Indonesia.
3. Jalan Selayar II Blok H 7-8, Kawasan Industri MM2100 Cibitung, Bekasi.
Lokasi ini merupakan pabrik dan gudang logistic kedua dari PT. Nutrifood
Indonesia.
5
2.3.
Sertifikasi
1994
Nutrifood mendapat sertifikat ISO 9002 : 1987, sekaligus menjadi
1997
2001
2005
2005
2008
2008
2009
2010
:
:
:
:
:
:
:
:
perusahaan makanan pertama di Indonesia yang mendapat ISO

National Sales mendapatkan sertifikat ISO 9002 : 1994
Laboratorium mendapatkan sertifikat ISO 17025 : 2000
Holding Company, mendapatkan sertifikat ISO 9001 : 2000
National Sales mendapatkan kembali sertifikat ISO 9001 : 2000
Manufaktur Nutrifood mendapatkan sertifikat ISO 22000 : 2005
Laboratorium mendapatkan kembali sertifikat ISO IEC 17025 : 2005
Nutrifood non Manufaktur mendapatkan sertifikat ISO 9001 : 2008
Sertifikasi sistem jaminan halal dari LP-POM MUI, sedangkan
sertifikat halal bagi semua produk Nutrifood didapatkan sesuai tahun
peluncurannya
2.4.
Visi dan Misi Perusahaan

Visi PT Nutrifood Indonesia adalah Helping our Costumer to Achieve
Longer Healthy Life Through Our Reputable and Leading Brands. Nutrifood
berusaha untuk lebih dekat dengan para konsumennya dalam membantu mencapai
hidup sehat yang lebih lama melalui brand brand unggulannya.
Misi PT Nutrifood adalah Inspiring a Nutritious Life. Melalui produk,
layanan, konsep, atau gagasan yang bersifat inovatif dan perintis, Nutrifood
mengembangkan kehidupan yang sehat dan menyenangkan baik secara fisik
maupun mental. Nutrifood hadir untuk menginspirasi setiap orang menikmati
hidup sehat lebih lama, melalui gaya hidup sehat yang didukung dengan nutrisi
yang sehat dan tepat.
2.5.
Budaya Perusahaan
PT Nutrifood Indonesia memiliki budaya perusahaan (corporate culture)
tersendiri sebagai ciri khas dan jati diri keluarga besar PT Nutrifood Indonesia.
Budaya ini dikenal dengan sebutan I-CARE. Lambang dari I-CARE dapat dilihat
pada gambar 2.1.
Gambar 2.1 Lambang I-CARE

Budaya ini merupakan suatu akronim dari beberapa kata dalam Bahasa
Inggris, yaitu:
1. Integrity
Integrity yaitu nilai moral yang tinggi adalah dasar dari kepercayaan dalam
hubungan satu sama lain. Semua orang ingin berhubungan dengan orang
yang memiliki nilai - nilai etika dan dapat dipercaya. Contohnya bersikap
jujur dan bertanggung jawab atas pekerjaan dan hasil kerja.
2. Collaboration
Collaboration atau kerja bersama untuk mencapai tujuan bersama adalah
prinsip kita dalam bekerja di suatu organisasi, diharapkan masing-masing
anggota organisasi dapat saling membantu dan menciptakan lingkungan
kerja yang menyenangkan. Contohnya berkontribusi aktif terhadap
kemajuan tim, mau membantu anggota kelompok yang membutuhkan.
3. Innovation
Innovation atau menciptakan ide-ide baru adalah kunci kemenangan
persaingan di masa mendatang, bisa berupa terobosan (breakthrough) atau
perbaikan terus menerus (continuous improvement) lingkungan yang

kondusif bagi tim untuk bekerja sama mencapai visi. Dengan terus
berinovasi, kita juga bisa membangkitkan kebanggaan akan organisasi
yang terus menerus berada terdepan dalam bidangnya. Contohnya terbuka
terhadap perubahan baru dalam bekerja, mau memberikan ide baru untuk
perbaikan departemen.
4. Respect
Respect atau menghargai orang lain adalah dasar yang paling mendalam
dari komunikasi yang antara manusia. Semua orang ingin dihargai dan
mendapat perlakuan baik. Contohnya menghargai perbedaan dan mau
mendengarkan pendapat orang lain.
5. Excellence
Striving for Exellence atau kemauan untuk terus menerus mencapai hasil
yang lebih baik merupakan dasar dari profesionalisme dalam bekerja,
diharapkan setiap orang untuk bangga atas pekerjaan yang dilakukan
karena hasilnya sangat baik, dapat melebihi harapan konsumen, rekan
kerja, dan atasannya. Contohnya selalu berusaha untuk mencapai hasil
kerja yang lebih baik.
Selain budaya I-CARE, PT Nutrifood Indonesia juga menerapkan budaya
5R. Budaya 5R diterapkan di PT Nutrifood Indonesia dengan tujuan untuk
meningkatkan efisiensi, produktivitas, kualitas, dan keselamatan kerja karyawan.
5R itu terdiri dari :
1. Ringkas
Ringkas merupakan langkah awal yang sangat strategis, dengan pengertian
setiap individu mulai menyingkirkan benda - benda yang tidak diperlukan
dari tempat kerja karena benda - benda tersebut menyebabkan beban bagi
tempat kerja, menyita ruang kerja yang tersedia, dan ruang kerja semakin
sempit sehingga dapat menggangu proses produksi.
2. Rapi
Kerapian tempat kerja dapat dicapai dengan menempatkan barang di
tempat yang mudah dilihat, diambil, dan dikembalikan sehingga setiap
individu tidak akan kesulitan untuk menemukan barang tersebut.
3. Resik
Setiap individu diharapkan dapat menjaga benda-benda yang ada di tempat
kerja
dalam
keadaan
bersih
untuk
kemudahan
memantau
atau
menanggulangi segala potensi gangguan sedini dan secepat mungkin.

4. Rawat
Tempat kerja masing-masing individu sebaiknya terawat dengan baik
sehingga memberi kemudahan dalam menempatkan kejelasan informasi,
kualitas hasil kerja, dan keselamatan kerja.
5. Rajin
Pengertian rajin yakni setiap individu selalu melakukan langkah-langkah
yang diperlukan untuk memelihara dan meningkatkan apa yang telah
dilakukan.
Keberhasilan dalam melaksanakan budaya 5R dapat diraih dengan
menegakan disiplin dari masing-masing individu karena pelaksanaan 5R berawal
dari diri pribadi dan budaya tersebut perlu dilakukan setiap hari hingga pada
akhirnya setiap individu yang melaksanakan budaya tersebut akan mendapatkan
manfaatnya.
2.6.
Logo Perusahaan
Setiap perusahaan tentunya memiliki logo khas yang memiliki ciri dan
makna tersendiri. Logo PT Nutrifood Indonesia ditunjukan oleh gambar 2.1 yang
memiliki ciri dan makna tersendiri dibalik keindahan bentuk dan warnanya. Logo
Nutrifood dapat dilihat di gambar 2.2.
Gambar 2.2 Logo PT. Nutrifood Indonesia
Makna dari Logo PT. Nutrifood Indonesia :

1.
2.
3.
4.
5.
6.
Hijau
Dua kecambah
N
Posisi Kecambah
Lingkaran
Totalitas
2.7.
: Sehat, tumbuh, kehidupan

: Sumber inspirasi, kehidupan, permulaan hidup
: Inisial PT. Nutrifood Indonesia
: Saling bersinergi, melambangkan keseimbangan
: Dinamis, berkesinambungan
: Modern, inovatif, global
Pemberdayaan Masyarakat
Nutrifood bersama keenam brand keunggulannya memiliki komitmen
untuk memberikan kontribusi positif kepada masyarakat dan lingkungan. Dengan

misi
Inspiring
menyelenggarakan
Nutritious
berbagai
Life,
Nutrifood
aktif
kegiatan
yang
secara
berpartisipasi
dan
berkesinambungan
dilaksanakan untuk membantu masyarakat dalam meningkatkan kualitas

kehidupan melalui pola hidup dan nutrisi yang tepat dan sehat. Dibawah ini
beberapa bentuk kegiatannya :
1. Bidang Kesehatan
Nutrifood aktif berpartisipasi dan menyelenggarakan berbagai kegiatan
untuk membantu masyarakat dalam meningkatkan kualitas hidup melalui
pola hidup sehat dan nutrisi seimbang. Beberapa program yang dilakukan
Nutrifood di bidang kesehatan antara lain Health Agent Award,
Peningkatan Fasilitas Kesehatan dan Pameran Gizi Seimbang.
Health Agent Award adalah salah satu program corporate social
responsibility Nutrifood bersama semua brandnya yang bertujuan untuk
10
mengedukasi dan memotivasi masyarakat untuk menerapkan gaya hidup

sehat bernutrisi. Program ini terdiri dari 2 kegiatan yaitu :
a. Kategori Siswa dan Guru Sehat : Kegiatan edukasi bagi siswa/i dan
guru SD di beberapa titik edukasi yang pelaksanaannya dibantu oleh
Pusat Promosi Kesehatan, Kementerian Kesehatan Republik Indonesia.
b. Kategori Pedagang Sehat : Kegiatan edukasi mengenai jajanan sehat
bagi para pedagang di tingkat SD yang pelaksanaannya juga dibantu
oleh Direktorat Survelience, Badan Pengawas Obat dan Makanan
(BPOM).
Selain itu, dalam mendukung peningkatan kualitas kesehatan di daerah
sekitar pabrik, Nutrifood PEMBANGUNAN Puskesmas Pembantu di daerah
Harjasari serta Posyandu. Kegiatan ini juga diikuti dengan pembinaan para
petugas Posyandu serta berbagai kegiatan lainnya sepanjang tahun.
2. Bidang Pendidikan
Pendidikan amat mempengaruhi kesadaran akan kesehatan. Oleh karena
itu, Nutrifood juga memiliki beberapa program di bidang pendidikan.
1.
2.
3.
4.
Nutrifood Leadership Award

Pembangunan kembali SD Kedungring
Pembangunan lembali SMPN 2 Banjarsari Pangalengan
Kerjasama dengan Indonesia Mengajar
3. Bidang Lingkungan
Hidup sehat tidak terlepas dari lingkungan yang sehat. Oleh karena itu,
Nutrifood memiliki beberapa program untuk meningkatkan kesadaran masyarakat
terhadap gaya hidup hijau seperti pembuatan sumur resapan di masyarakat kota
Bogor, serta Nursery, pembagian bibit buah unggul dan pembinaan rutin kepada
petani.
2.8.
Pengenalan Produk
Beberapa produk yang ada di PT. Nutrifood Indonesia, yaitu :
1. Pemanis
11
Pemanis merupakan serangkaian produk sehat dan bercita rasa tinggi yang
menginspirasi konsumen untuk hidup sehat lebih lama. Dengan kandungan
yang memprioritaskan kesehatan dan memberikan manfaat-manfaat
kesehatan seperti bebas gula dan rendah kalori.
a. Produk Bebas Gula
1. Gula Rendah Kalori
2. Zero Calories
3. Gula Jawa Rendah Kalori
4. Madu Rendah Kalori
5. Caf Latte
6. Sirup
7. Jam
b. Susu Non Fat
1. Filosterol
2. Omega-Fiber
3. Soy Ginger
c. Pelengkap Masakan
1. Corn Oil
2. Kecap Manis
3. Kecap Asin
4. Gula Tebu Rendah Kalori
d. Healthy Meal
1. Susu Healthy Meal
2. Healthy Meal Cookies
3. Healthy Meal Variasi Gold
2. Produk Susu Non Fat
Susu bubuk non fat merupakan salah satu produk susu alami yang rendah
lemak dan tinggi protein. Tersedia dalam berbagai merek sesuai dengan
range konsumen yang diharapkan. Range konsumen biasanya terbagi atas
umur konsumen. Beberapa contoh dari produk susu bubuk dengan
berbagai rasa :
a. Susu Bubuk untuk Manula
Susu bubuk untuk Manula merupakan susu mineral alami
dengan Glucosamine dan Chondroitin untuk usia 50 tahun ke
atas, sehingga tidak hanya baik untuk tulang namun juga
sendi.
12
b. Susu Bubuk untuk Dewasa

Susu bubuk untuk dewasa merupakan susu mineral alami
untuk kesehatan tulang dan sendi. Selain tinggi kalsium dan
rendah lemak, susu bubuk untuk dewasa juga mengandung
Glucosamine dan Chondroitin untuk kesehatan sendi cocok
untuk usia antara 19-50 tahun.
c. Susu Bubuk untuk Remaja
Susu bubuk untuk remaja merupakan susu mineral alami yang
baik untuk pertumbuhan tulang dan sendi yang tinggi kalsium
dan rendah lemak, cocok untuk usia dibawah 19 tahun.
d. Susu Bubuk untuk Anak-anak
Masa kanak-kanak merupakan fase yang penting dalam
pertumbuhan. Untuk itu, anak anda membutuhkan nutrisi yang
tepat. Salah satu indikator pertumbuhan yang baik adalah
pertambahan tinggi dan berat badannya tepat.
e. Susu Bubuk Rasa Kacang Hijau
Susu bubuk kacang hijau merupakan susu mineral alami rasa
kacang hijau, selain tinggi kalsium dan rendah lemak, susu
bubuk kacang hijau juga mengandung susu kedelai, sehingga
memiliki kandungan laktosa yang rendah.
f. Susu Bubuk Soleha
Susu bubuk soleha merupakan susu mineral alami untuk orang
yang kurang mendapatkan sinar matahari. Hal ini dikarenakan
selain tinggi kalsium dan rendah lemak, susu bubuk soleha
juga tinggi vitamin D (memenuhi 100% kebutuhan tubuh per
hari) yang dapat membantu penyerapan kalsium dalam tubuh.
3. Sari Buah
Sari buah dan sayur bernutrisi yang diproses dengan teknologi tinggi agar
terjaga kealamiannya. Kandungan vitamin C nya memenuhi 100%
kebutuhan harianmu. Sari buah mengandung 10 macam zat gizi utama
yang diperlukan tubuh dan bebas bahan pengawet.
a. Sari Buah Siap Minum
1. Sari Buah Kiwi
2. Sari Buah Pomegranate
3. Sari Buah Fruten Veg
4. Sari Buah Orange
13
b. Sari Buah Serbuk

1. Sari Buah Jeruk Manis dan Jeruk Organik
2. Rasa Jeruk Manis
3. Rasa Jeruk Mandarin
4. Rasa Jeruk Nipis
5. Rasa Leci
6. Sweet Guava
7. Rasa Fruten Veg
4. Susu Suplemen Pria
Susu suplemen pria merupakan salah satu dari produk nutrifood yang
diformulasikan untuk membantu pria dalam membentuk otot dan tubuh
yang atletis, serta membantu memberikan asupan energi dan protein yang
tinggi namun tetap diseimbangkan dengan berolahraga secara teratur agar
otot dan kesehatan tubuh yang dihasilkan lebih baik.
5. Susu Diet
Susu diet adalah produk yang menawarkan program penurunan berat
badan dengan gizi lengkap dan kalori yang cukup. Produk ini terdiri dari
Makanan Diet Utama (MDU) dan Makanan Diet Pelengkap (MDP).
Produk MDU untuk makan pagi dan malam, sedangkan produk MDP
merupakan makanan selingan di sela-sela waktu untuk mengatasi rasa
lapar tanpa kalori yang berlebihan sehingga tetap dapat menjaga kesehatan
tubuh dengan asupan nutrisi yang baik.
14
BAB III
LANDASAN TEORI
3.1. Website
Website adalah sering juga disebut Web, dapat diartikan suatu kumpulankumpulan halaman yang menampilkan berbagai macam informasi teks, data,
gambar diam ataupun bergerak, data animasi, suara, video maupun gabungan dari
semuanya, baik itu yang bersifat statis maupun yang dinamis, yang dimana
membentuk satu rangkaian bangunan yang saling berkaitan dimana masingmasing dihubungkan dengan jaringan halaman atau hyperlink.
Atau definisi website adalah kumpulan dari berbagai macam halaman
situs, yang terangkum didalam sebuah domain atau juga subdomain, yang lebih
tempatnya berada di dalam WWW (World Wide Web) yang tentunya terdapat di
dalam Internet. Halaman website biasanya berupa dokumen yang ditulis dalam
format Hyper Text Markup Language (HTML), yang bisa diakses melalui HTTP,
HTTP adalah suatu protokol yang menyampaikan berbagai informasi dari server
website untuk ditampilkan kepada para user atau pemakai melalui web browser.
3.1.1. Jenis-Jenis Website

1. Website Statis
Website Statis adalah suatu website yang mempunyai halaman yang tidak
berubah. Yang artinya adalah untuk melakukan sebah perubahan pada suatu
halaman hanya bisa dilakukan secara manual yitu dengan cara mengedit kodekode yang menjadi struktur dari website itu sendiri.
2. Website Dinamis
Website Dinamis adalah merupakan suatu website yang secara strukturnya
diperuntukan untuk update sesering mungkin. Biasanya selain dimana utamanya
yang bisa diakses oleh para pengguna (user) pada umumnya, juga telah disediakan
halaman backend yaitu untuk mengedit konten dari website tersebut. Contoh dari
website dinamis seperti web berita yang didalamnya terdapat fasilitas berita.
15
3. Website Interaktif
Website Interaktif adalah suatu website yang memang pada saat ini
memang terkenal. Contohnya website interaktif seperti forum dan blog. Di
website ini para pengguna bisa berinteraksi dan juga beradu argument mengenai
apa yang menjadi pemikiran mereka.
3.1.2. Manfaat Website

1. Memperluas jangkauan promosi sesuatu, dengan memiliki website maka
produk lebih bisa dikenal oleh masyarakat khususnya pengguna internet.
2. Bisa menjadi media tanpa batas, sebab internet adalah media informasi
yang tanpa batas. Dengan memiliki website berarti sama saja memiliki
banyak karyawan yang mempromosikan produk selama 24 jam. Yang
artinya dimana website akan memberikan suatu informasi kepada calon
konsumen selama 24 jam.
3. Promosi yang luas, internet adalah suatu media promosi terluas di dunia
jika dilihat dari jangkauan area.
4. Media pengenalan perusahaan, Jika memiliki suatu perusahaan akan lebih
mudah jika mengenalkan perusahaan lewat website, kerana jangkauannya
internet yang luas dan pemakainya yang banyak, sehingga perusahaan
akan dikenal oleh masyarakat banyak sehingga dapat mendatangkan calon
konsumen dengan cara promosi produk lewat website.
5. Media informasi, terkait report dan performance.
3.1.3. Macam-Macam Domain Website

1. .co.id : Biasanya digunakan untuk badan usaha yang memiliki badan
hukum sah.
2. .go.id : Khusus digunakan untuk Lembaga Pemerintahan RI.
3. .ac.id : Dipakai untuk Lembaga Pendidikan.
4. .or.id: Dipakai untuk segala macam organisasi yang tidak termasuk
kedalam kategori co.id,go.id,mil.id, ac.id dan sebagainya.
5. .war.net.id : Dipaki untuk industri warung internet (warnet) yang ada di

Indonesia
6. .sch.id: Dipakai khusus untuk Lembaga Pendidikan SD, SMP dan SMU
atau SMK
7. .web.id: Biasanya digunakan untuk organisasi, badan usaha, ataupun
perseorangan yang melakukan kegiatannya di WWW.
3.2. HTML (Hypertext Markup Language)

HTML adalah bahasa markup internet (web) berupa kode dan simbol yang
dimasukkan kedalam sebuah file yang ditujukan untuk ditampilkan didalam
sebuah website. Singkatnya, HTML adalah bahasa markup yang digunakan untuk
membuat website. Website yang dibuat dengan HTML ini, dapat dilihat oleh
semua orang yang terkoneksi dengan internet. Tentunya dengan menggunakan
aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla Firefox
dan Google Chrome.
Seperti yang sudah saya jelaskan sebelumnya, HTML adalah singkatan
dari Hyper Text Markup Language. Tapi mengetahui singkatannya saja tidak akan
cukup. Karena itu saya akan menyajikan arti dari kata kata tersebut.
1. Hypertext
Hypertext adalah metode dimana "berpindah" disekeliling web, dengan
mengeklik sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks
khusus di internet, dimana saat teks tersebut diklik, akan membawa ke halaman
web selanjutnya/halaman web lain yang telah ditentukan.
2. Markup
Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada
didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks
tertentu. Misalnya saja jika menandai sebuah teks dengan tag HTML <i>, maka
teks tersebut akan berubah menjadi italic (huruf yang miring). Sedangkan jika
menandainya dengan <b>, maka teks tersebut akan berubah menajadi bold (huruf
tebal).
3. Language
Language yang berarti bahasa. HTML adalah sebuah bahasa yang

memiliki kata kata berupa kode dan syntax seperti bahasa yang lain. Saat ini
bahasa HTML masih terus dikembangkan. Hal ini dikarenakan pengguna internet
semakin hari semakin berkembang pesat. Oleh karena itu bahasa HTML harus
ditingkatkan lagi agar bisa menciptakan halaman web yang lebih berkualitas.
Untuk itulah dibentuk sebuah organisasi yang bertanggungjawab mengembangkan
bahasa HTML. Organisasi ini bernama W3C.
3.2.1. Fungsi dan Kegunaan HTML

1. Untuk membuat halaman web. Bahasa HTML digunakan untuk membuat
halaman web. Semua halaman web pasti dibuat dengan menggunakan
HTML.
2. Sebagai pondasi bagi sebuah website. Sebuah rumah jika tidak memiliki
pondasi maka akan cepat roboh. Begitu juga dengan website. Jika tidak
memiliki HTML sebagai pondasi, kita tidak dapat mengimplementasikan
bahasa lainnya seperti CSS (bahasa untuk mendesain website), Javascript
(bahasa untuk menambah prilaku website), dan PHP (bahasa pemrograman
server website).
3. Untuk menandai teks pada halaman web. Misalnya, kita dapat menandai
sebuah teks menjadi bergaris bawah dengan menggunakan tag html <u>.
4. Untuk menandai element/bagian pada halaman web. Sebuah website
memiliki beberapa bagian seperti header, navigasi, main dan footer. Kita
dapat menandai setiap bagiannya dengan HTML.
5. Untuk menampilkan informasi dalam bentuk tabel.
6. Untuk menambahkan objek seperti audio, video, gambar, dll dalam
halaman web.
7. Untuk membuat online form.
3.2.2. Struktur Dasar HTML

1. Element
Element terdiri dari 3 bagian, yaitu tag pembuka, isi dan penutup.
Contohnya untuk menampilkan judul dari sebuah halaman, kita membuat kode
html seperti ini
<title>Website Milik Faiz</title>
Yang berwarna biru, itu adalah pembuka. Yang warna hijau adalah isi. Sedangkan
yang warna merah adalah penutup. Isi adalah opsional, dalam artian tidak masalah
jika kita tidak memberikan isi. Beda dengan pembuka dan penutup, keduanya
harus ada dalam sebuah kode html. Jika tidak maka akan terjadi error, dan kode
tidak akan berfungsi.
Ada juga pembuka dan penutup yang berbeda dengan contoh diatas.
Contohnya seperi ini
<input type="text" value="isian" />
Pada tag input kita tidak perlu menutupnya dengan </input> ,cukup dengan /> .
Bahkan dengan menuliskan > saja juga bisa.
2. Tag
Tag adalah teks khusus berupa dua karakter < dan >. Contohnya tag
<head> dengan nama head, <body> dengan nama body, dan sebagainya. Tag ini
sudah diatur secara default, jadi tidak boleh membuatnya sendiri. Misal jika
menulis <bodi>, jelas tidak akan berfungsi.
Untuk lebih memperjelas, berikut ini struktur dasar kode HTML
<html>
<head>
<title>Website Faiz Agil Wirawan</title>
</head>
<body>
Hai teman teman, ini website pribadi saya lho..
</body>
</html>
Penjelasan
<html></html>
<head></head>
untuk menandai awal dan akhir dari file HTML

berisikan keterangan informasi seperti title dan jenis
dokumen
<title></title> sebagai judul halaman web
<body></body>
bagian ini adalah konten utama web seperti header,
navigasi, artikel, sidebar dan footer
Anda dapat menuliskan kode html di aplikasi bawaan Windows, Notepad. Bisa
juga mendownload aplikasi khusus untuk menulis kode yaitu Notepad++.
3. Atribut
Atribut terdapat didalam script sebuah elemen, fungsinya untuk memberi
informasi tambahan tentang element. Nilai dari atribut harus ditutup dengan tanda
kutip.
<input type="password" />
Kode diatas akan membuat sebuah kotak isian yang dikhususkan untuk
menulis password. Dalam artian, jika menulis di isian tersebut, tulisan akan
berubah menjadi bintang bintang seperi ini ******.
3.3. CSS (Cascading Style Sheet)

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian
instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web.
Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) ,
colors (warna), margins (ukuran), latar belakang (background), ukuran font (font
sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes
(ukuran) dan spacing (jarak) disebut juga styles. Cascading Style Sheets juga bisa
berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS
terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen
akan disajikan.
Fitur-fitur baru pada halaman web lama dapat ditambahkan
dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis
font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda
membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan
dapat kembali menggunakannya bila diperlukan.
3.3.1. Struktur CSS
Gambar 3.1 Struktur CSS
Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang

diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan
value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah
property, dan blue adalah value.
Perintah CSS terdiri atas 2 komponen, yakni Selector & Declaration.
Selector berfungsi untuk memberi tahu browser bahwa pada elemen mana rule
CSS diterapkan.
Selector dapat berupa elemen HTML, selector class atau selector id.
Declaration merupakan aturan CSS yang diterapkan, terdiri atas property dan
value.
3.3.2. Fungsi CSS

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks,
warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over,
spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan
parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur
tampilan dokumen.Dengan adanya CSS memungkinkan untuk menampilkan
halaman yang sama dengan format yang berbeda.
3.3.3. Metode Penulisan CSS

1. Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara
penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML
tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan
memengaruhi tag HTML yang lain. Contoh penulisan :
<body
style=background:
#ff0000;
font-family:arial;
font-size:24px;>Hello World!!</body>
2. Internal Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag
<body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan
digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag
HTML yang bersangkutan. Contoh penulisan :
<head>
<style type=text/css>
Body{
background: #ff000;
font-family:arial;
font-size:24px;
}
</style>
</head>
3. External Style Sheet

CSS didefinisikan terlebih dalam sebuah file (*.css). Pada pendefinisian
ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML,
yang selanjutnya nama file di panggil dengan syntax HTML pada file HTML.
Contoh penulisan :
<head>
<link rel=stylesheet type=text/css
href=public.css/>
</head>
3.3.4. Kelebihan CSS

1. Dengan bahasa tingkat tinggi, CSS sangat mudah untuk dipelajari dan
digunakan
2. CSS memisahkan antara Desain dan Konten Web/Blog
3. Pengaturan Desain dapat dilakukan seefisien mungkin
4. Menghemat penulisan kode, karena satu CSS dapat dipakai beberapa kali
5. Mempersingkat waktu kerja, baik saat membuat maupun saat modifikasi
halaman Web/Blog
6. Ukuran file HTML jadi lebih kecil, karena biasanya CSS disimpan di file
terpisah (External Stylesheet)
3.4. PHP (PHP: Hypertext Processor)

Hypertext Preprocessor (PHP) merupakan suatu teknologi scripting yang
berbasis server (server-side programming) untuk membangun halaman web yang
dinamis dan interactive, dimana perintah - perintah diproses terlebih dahulu di
web server. Sebagai ilustrasi. ketika seorang user memasukkan alamat tertentu di
browser, maka browser akan mengirimkan permintaan tersebut ke web server
yang dimaksud dan menunggu hasilnya. Jika file yang diminta adalah sebuah
dokumen HTML, maka web server akan memberikan file tersebut ke web browser
apa adanya. Namun, jika file yang diminta adalah file yang mengandung script
server - side, maka web server akan memproses terlebih dahulu script tersebut
dan mengirimkan hasilnya ke browser.
3.4.1. Kelebihan PHP

1. PHP merupakan software open source
2. PHP dapat mudah berjalan pada web server yang berbeda dalam sistem
operasi yang berbeda pula.
3. PHP termasuk embedded (dapat diletakkan atau disisipkan dalam tag
HTML).
3.4.2. Struktur Dasar PHP

PHP adalah sebuah bahasa yang HTML-embedded, artinya perintah perintah dalam PHP dapat menyatu dengan tag-tag HTML dalam sebuah file.
Suatu program biasanya dikenal oleh web server dari ekstensinya. Demikian juga
dengan file PHP yang dapat disimpan dengan menggunakan ekstensi .php,
.php3, .phtml.
Oleh karena PHP merupakan sebuah bahasa yang HTML-embedded, maka harus
ada satu cara untuk memisahkan bagian mana dalam file tersebut yang merupakan
program PHP. Ada 3 cara untuk menuliskan kode PHP, yaitu:
Cara 1 :
<?............. ?>
Cara 2 :
<?php
..................
?>
Cara 3 :
<script
language="php">
....................
</script>
Dimana titik titik dapat diisi dengan script PHP. Contoh program PHP adalah
sebagai berikut :
<html>
<head>
<title>Contoh Program PHP</title>
</head>
<body>
<?
Echo BAB DUA TINJAUAN PUSTAKA;
?>
</body>
</html>
Untuk menguji aplikasi yang dibuat setelah disisipkan dengan script PHP, aplikasi
membutuhkan web server yang berfungsi untuk mengobah script PHP, hal ini
dikarenakan sifat PHP yang server side programing. Contoh dari web server
seperti Xitami, Personal Web Server (PWS) dari Microsoft, atau Apache web
server.
3.5. Database (Basis Data)

Database atau basis data adalah kumpulan data yang disimpan secara
sistematis di dalam komputer yang dapat diolah atau dimanipulasi menggunakan
perangkat lunak (program aplikasi) untuk menghasilkan informasi. Pendefinisian
basis data meliputi spesifikasi berupa tipe data, struktur data dan juga batasanbatasan data yang akan disimpan. Basis data merupakan aspek yang sangat
penting dalam sistem informasi dimana basis data merupakan gudang
penyimpanan data yang akan diolah lebih lanjut. Basis data menjadi penting
karena dapat mengorganisasi data, menghidari duplikasi data, hubungan antar data
yang tidak jelas dan juga update yang rumit.
3.5.1. Manfaat Penggunaan Database

1. Kecepatan dan Kemudahan
Database memiliki kemampuan dalam menyeleksi data sehingga menjadi
suatu kelompok yang terurut dengan cepat. Hal inilah yang ahirnya dapat
menghasilkan informasi yang dibutuhkan secara cepat pula. Seberapa cepat
pemrosesan data oleh database tergantung pula pada perancangan basis datanya.
2. Pemakaian Bersama-sama
Suatu database bisa digunakan oleh siapa saja dalam suatu perusahaan.
Sebagai contoh database mahasiswa dalam suatu perguruan tinggi dibutuhkan
oleh beberapa bagian, seperti bagian admin, bagian keuangan, bagian akademik.
Kesemua bidang tersebut membutuhkan database mahasiswa namun tidak perlu
masing-masing bagian membuat basis datanya sendiri, cukup database mahasiswa
satu saja yang disimpan di server pusat. Nanti aplikasi dari masing-masing bagian
bisa terhubung ke database mahasiswa tersebut.
3. Kontrol data terpusat
Masih berkaitan dengan point ke dua, meskipun pada suatu perusahaan
memiliki banyak bagian atau divisi tapi database yang diperlukan tetap satu saja.
Hal ini mempermudah pengontrolan data seperti ketika ingin mengubah data
mahasiswa, maka diperlukan mengubah semua data di masing-masing bagian atau
divisi, tetapi cukup di satu database saja yang ada di server pusat.
4. Menghemat biaya perangkat
Dengan memiliki database secara terpusat maka di masing-masing divisi tidak
memerlukan perangkat untuk menyimpan database berhubung database yang
dibutuhkan hanya satu yaitu yang disimpan di server pusat, ini tentunya
memangkas biaya pembelian perangkat.
5. Keamanan Data
Hampir semua aplikasi manajemen database sekarang memiliki fasilitas
manajemen pengguna. Manajemen pengguna ini mampu membuat hak akses yang
berbeda-beda disesuaikan dengan kepentingan maupun posisi pengguna. Selain
itu data yang tersimpan di database diperlukan password untuk mengaksesnya.
6. Memudahkan dalam pembuatan aplikasi baru
Dalam poin ini database yang dirancang dengan sangat baik, sehingga si
perusahaan memerlukan aplikasi baru tidak perlu membuat database yang baru
juga, atau tidak perlu mengubah kembali struktur database yang sudah ada.
Sehingga Si pembuat aplikasi atau programmer hanya cukup membuat atau
pengatur antarmuka aplikasinya saja.
3.5.2. Bahasa Basis Data

1. Data Control Language (DCL)
DCL merupakan sub bahasa untuk mengendalikan struktur internal basis
data, DCL untuk menyesuaikan sistem agar supaya lebih efisien dan DCL sangat
bergantung pada vendor.
2. Data Definition Language (DDL)
Struktur / skema basis data yang menggambarkan / mewakili desain basis
data secara keseluruhan dispesifikasikan dengan bahasa khusus yaitu DDL.
Dengan bahasa ini dapat dilakukannya membuat tabel (create table) baru, indeks,
mengubah table, menentukan struktur penyimpanan table, dan lainnya. Hasil dari
kompilasi perintah DDL, adalah kumpulan table yang disimpan dalam file khusus
yang disebut kamus data (data dictionary).
3. Data Manipulation Language (DML)
Data Manipulation Language (DML) adalah bentuk bahasa basis data
untuk melakukan menipulasi dan pengambilan data pada suatu basis data.
Manipulasi data pada database dapat berupa :
a. Penyisipan / penambahan data pada file / table dalam suatu basis data.
b. Penghapusan data pada file / table dalam suatu basis data.
c. Pengubahan data pada file / table dalam suatu basis data.
d. Penelusuran data pada file / table dalam suatu basis data.
3.5.3. Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) adalah suatu model untuk
menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar
data yang mempunyai hubungan antar relasi.ERD untuk memodelkan struktur
data dan hubungan antar data, untuk menggambarkannya digunakan beberapa

notasi dan simbol.
Notasi-notasi simbolik yang digunakan dalam ERD adalah sebagai
berikut:
a. Entitas
Entiti merupakan objek yang mewakili sesuatu yang nyata dan dapat
dibedakan dari sesuatu yang lain. Simbol dari entiti ini biasanya
digambarkan dengan persegi panjang.
Gambar 3.2 Notasi ERD Entitas

b. Atribut
Setiap entitas pasti mempunyai elemen yang disebut atribut yang
berfungsi untuk mendeskripsikan karakteristik dari entitas tersebut. Isi
dari atribut mempunyai sesuatu yang dapat mengidentifikasikan isi
elemen satu dengan yang lain
Gambar 3.3 Notasi ERD Atribut

c. Relasi
Relasi menunjukkan adanya hubungan diantara sejumlah entitas yang
berasal dari himpunan entitas yang berbeda. Penghubung antara
himpunan relasi dengan himpunan entitas dan himpunan entitas
dengan atribut dinyatakan dalam bentuk garis.
Gambar 3.4 Notasi ERD Relasi
Pada dasarnya relasi dibedakan menjadi 3, yaitu:

1. Relasi One To One
Relasi One To One yaitu setiap entitas pada himpunan entitas A
berhubungan paling banyak dengan satu entitas pada himpunan entitas
B.
Gambar 3.5 Notasi ERD Relasi One To One
2. Relasi One To Many

Relasi One To Many yaitu setiap entitas pada himpunan entitas A dapat
berhubungan dengan banyak entitas pada himpunan entitas B, tetapi
setiap entitas pada entitas B dapat berhubungan dengan satu entitas
pada himpunan entitas A.
Gambar 3.6 Notasi ERD Relasi One To Many
3. Relasi Many To One

Relasi Many To One yaitu setiap entitas pada himpunan entitas A dapat
berhubungan dengan satu entitas pada himpunan entitas B, tetapi setiap
entitas pada entitas B dapat berhubungan dengan banyak entitas pada
himpunan entitas A.
Gambar 3.7 Notasi ERD Relasi Many To One

4. Relasi Many To Many
Relasi Many To Many yaitu setiap entitas pada himpunan entitas A
dapat berhubungan dengan banyak entitas pada himpunan entitas B,
begitupula sebaliknya.
Gambar 3.8 Notasi ERD Relasi Many To Many

3.5.4. Data Flow Diagram (DFD)
Data Flow Diagram (DFD) adalah suatu diagram yang menggunakan
notasi-notasi untuk menggambarkan arus dari data sistem, yang penggunaannya
sangat membantu untuk memahami sistem secara logika, terstruktur dan jelas.
Adapun notasi yang digunakan dalam DFD yaitu:
Tabel 3.1 Notasi DFD Menurut Para Ahli
Menurut
Gane dan Serson
Yourdon dan De Marco
Keterangan
Entitas eksternal dapat
berupa orang/unit terkait
yang berinteraksi dengan
sistem,
tetapi
diluar
sistem.
Orang/unit
yang
mempergunakan
atau
melakukan transformasi
data.
Komponen
fisik
tidak diidentifikasikan.
Aliran data dengan arah

khusus dari sumber ke
tujuan
Penyimpanan data atau
tempat data dilihat oleh
proses
3.5.5. Database Server

Database Server adalah sebuah program komputer yang menyediakan
layanan pengelolaan basis data dan melayani komputer atau program aplikasi
basis data yang menggunakan model klien/server. Istilah ini juga merujuk kepada
sebuah komputer (umumnya merupakan server) yang didedikasikan untuk
menjalankan program yang bersangkutan. Sistem manajemen basis data (SMBD)
pada umumnya menyediakan fungsi-fungsi server basis data, dan beberapa
SMBD (seperti halnya MySQL atau Microsoft SQL Server) sangat bergantung
kepada model klien-server untuk mengakses basis datanya.
Berikut ini merupakan contoh aplikasi database server yang sering
digunakan:
a. Ms. Access
Ms. Access adalah Database Storage Engine buatan dari Microsoft yang
menempel di produk Microsoft Office. Untuk instalasinya membutuhkan space di
hardisk yang lumayan besar. Engine ini hanya bisa dijalankan di lingkup sistem
operasi Windows saja. Kapasitas datanya sangat terbatas sehingga hanya cocok
jika diaplikasikan untuk small system atau home bisnis. Untuk keamananya tidak
begitu bisa dihandalkan walaupun sudah mengenal konsep relationship.
b. MySql
Database Storage Engine ini banyak digunakan oleh programmer apalagi
oleh web developer karena sifatnya yang free. Untuk yang expert sudah ada yang
bayar. Kemampuannya sudah bisa diandalkan, mempunyai kapasitas yang cukup
mumpuni sekitar 60.000 tabel dengan jumlah record mencapai 5.000.000.000
bahkan untuk yang terbaru sudah lebih. Keamanan datanya cukup aman walaupun
tidak sehebat Postgre apalagi Oracle. Engine ini multiplatform sehingga mampu
diaplikasikan di berbagai sistem operasi. MySql cocok diaplikasikan diaplikasi

kelas kecil dan menengah. Kelebihan paling utama engine ini adalah
kecepatannya.
c. SQL Server
Database Storage Engine buatan Microsoft. Engine ini berbayar, akan
tetapi Microsoft juga menyediakan yang versi gratisnya (Express Edition). Karena
buatan dari Bos Bill Gates maka Engine ini hanya bisa dijalankan di sistem
operasi Windows saja (monoplatform). Keamanan datanya sudah lumayan.
Kapasitas penyimpanan datanya tidak mencapai Tera Byte, sehingga sudah
mampu untuk diterapkan di aplikasi besar. SQL Server banyak bermain di memori
untuk processing. Untuk backup data Ms SQL banyak extensinya ada extensi
.MDB, .BAK, .file.
d. Postgre
Database Storage Engine ini bersifat open source (gratis) yang
dikembangkan oleh berbagai developer didunia.untuk syntax query postgre sql
menggunakan ANSI SQL 89, 92 dan 99. untuk postgre sql sudah support joins,
views, aggregasi.
e. Oracle
Database Storage Engine ini bisa menyimpan data sampai ukuran tera
byte, dan database oracle juga meyediakan yang free versi home edition untuk
sekedar yang ingin belajar oracle saja sedangkan untuk versi enterprise harus
bayar. Untuk masalah keamanan oracle bisa dibilang baik, sedangkan untuk
masalah perfomance oracle kebanyakan bermain di harddisk jadi jika ingin
menggunakan oracle harus menyediakan space harddisk yang cukup besar. Untuk
backup oracle mempunyai ekstensi sendiri dengan nama file DMP.
3.6.
Web Server
Web Server adalah merupakan perangkat lunak (software) dalam server
yang berfungsi untuk menerima permintaan (request) berupa halaman web melalui
protokol HTTP dan atau HTTPS dari client yang lebih dikenal dengan nama
browser, kemudian mengirimkan kembali (respond) hasil permintaan tersebut ke
dalam bentuk halaman-halaman web yang pada umumnya berbentuk dokumen

HTML.
Dari pengertian diatas, dapat disimpulkan bahwa web server merupakan
pelayan (pemberi layanan) bagi web client (browser) seperti Mozilla, Chrome,
Internet Explorer, Opera, Safari dan lain sebagainya, supaya browser dapat
menampilkan halaman atau data yang anda minta.
3.6.1. Fungsi Web Server

Fungsi utama dari web server adalah untuk memindahkan berkas yang
diminta oleh pengguna melalui protokol komunikasi tertentu. Oleh karena dalam
satu halaman web biasanya terdiri dari berbagai macam jenis berkas seperti
gambar, video, teks, audio, file dan lain sebagainya, maka pemanfaatan web
server berfungsi juga untuk memindahkan keseluruhan aspek pemberkasan dalam
halaman tersebut, termasuk teks, gambar, video, audio, file dan sebagainya.
3.6.2. Contoh Web Server

1. Apache
Web server apache yang awal mulanya sebuah software open source
(perangkat lunak terbuka) adalah alternatif dari netscape yang kemudian sejak
bulan april 1996 menjadi server web yang populer dan paling sering digunakan di
internet.
Asal mula nama Apache berasal ketika sebuah server web populer yang
dikembangkan pada awal 1995 yang bernama NCSA HTTPd 1.3 memiliki
sejumlah perubahan besar terhadap kode sumbernya (patch). Saking banyaknya
patch pada perangkat lunak tersebut sehingga disebut sebuah server yang
memiliki banyak patch. Tetapi pada halaman FAQ situs web resminya, disebutkan
bahwa Apache dipilih untuk menghormati suku asli Indian Amerika Apache
(Ind), yang dikenal karena keahlian dan strategi perangnya. Versi 2 dari Apache
ditulis dari awal tanpa mengandung kode sumber dari NCSA. Web server apache
ini dapat berjalan di sistem operasi berbasis unix / linux.
2. Internet Information Service (IIS)
Sebuah perusahaan besar microsoft menggunakan web server IIS pada

sistem operasinya, yaitu pada Windows NT 4.0 Server, Windows 2000 Server atau
Windows Server 2003. Layanan ini berfungsi sebagai pendukung protokol TCP/IP
yang berjalan dalam lapisan aplikasi (application layer).
3. LiteSpeed
LiteSpeed adalah web server yang ringan, dan mampu membaca konfigurasi
Apache secara langsung. Perangkat lunak umumnya digunakan bersama dengan
control panel web hosting, untuk menggantikan apache sebagai web server.
LiteSpeed tersedia untuk Linux, Mac OS X, Solaris, dan FreeBSD. Rilis stabil
terakhir adalah 5.0 yang dirilis pada bulan April 2015.
BAB IV
PEMBAHASAN
4.1.
Analisa Sistem
Pada saat ini, perusahaan dalam memberikan informasi kepada karyawan
masih sulit. Karena itu sistem aplikasi Display Informasi Departemen Produksi
yang saat ini berjalan memiliki kekurangan, yaitu:
a. Penyampaian informasi masih harus dicetak.
b. Informasi yang sudah dicetak harus ditempel di tembok office.
c. Dibutuhkan ruang kosong yang luas untuk menyampaikan informasi
yang banyak.
4.2.
Analisa Kebutuhan Sistem

Aplikasi ini terdapat kebutuhan sistem dan perubahan yang akan terjadi
pada sistem sebagai berikut:

Tabel 4.1 Analisa Kebutuhan Sistem
User View
Pengurus/Administrator
Requirement
1. Melihat, melakukan pengisian,
menghapus, dan mengubah data
yang meliputi :
a. Data bagian kerja
b. Data event
c. Data galeri foto
d. Data jadwal pembagian tugas
mingguan (JPM)
e. Data karyawan
f. Data mesin
g. Data shift
h. Data berita teks berjalan
i. Data tugas kayawan
j. Data galeri video
35
2. Melakukan login sebagai

administrator
3. Melakukan pengubahan kata sandi
1. Mengakses halaman yang meliputi:
Pengguna
a. Halaman beranda
b. Halaman informasi mesin
c. Halaman informasi jadwal
pembagian tugas mingguan
(JPM)
d. Halaman galeri foto dan video
2. Melihat informasi ulang tahun,
event, dan berita berjalan
4.3.
Analisa Kebutuhan Data

Data yang diperlukan dalam membangun aplikasi Display Informasi
Departemen Produksi, yaitu:

Tabel 4.2 Analisa Kebutuhan Data
Data
Bagian
Deskripsi
1. Id_bagian
2. Nama
1. Id_event
2. Judul
Event
3. Waktu_mulai
4. Waktu_akhir
Foto
5. Tempat
1. Id_foto
2. Judul
JPM
3. Foto
1. Id_jpm
2. Tgl_mulai
JPM_detail
3. Tgl_akhir
1. Id_jpm_detail
2. Nik
Karyawan
3. Id_shift
1. Nik
2. Nama
3. Tgl_lhr
4. Foto
5. Id_bagian
6. Id_mesin
Mesin
7. Tugas
1. Id_mesin
2. Id_bagian
Mesin_detail
3. Nama
1. Id_pasang
2. Id_mesin_pack
Shift
3. Id_mesin_fill
1. Id_shift
2. Nama
3. Wkt_mulai
4. Wkt_akhir
5. Wkt_break_mulai
6. Wkt_break_akhir
Teks_berjalan
7. Keterangan
1. Id_teks
Tugas
2. Teks
1. Id_tugas
2. Tugas
Video
3. Id_bagian
1. Id_video
2. Judul
3. Video
4.4.
Perancangan Prosedur atau Alur

Pada aplikasi Display Informasi Departemen Produksi ini terdapat dua
pihak, yaitu pengguna dan pengurus sebagai administrator. Berikut flow chart
aplikasi Display Informasi Departemen Produksi:
4.4.1. Flowchart Administrator
a. Flowchart Login
Gambar 4.1 Flowchart Administrator Login
b. Flowchart Tambah Bagian Kerja
Gambar 4.2 Flowchart Administrator Tambah Bagian

c. Flowchart Tambah Event
Gambar 4.3 Flowchart Administrator Tambah Event

d. Flowchart Tambah Foto
Gambar 4.4 Flowchart Administrator Tambah Foto

e. Flowchart Tambah Tugas
Gambar 4.5 Flowchart Administrator Tambah Tugas

f. Flowchart Tambah Video
Gambar 4.6 Flowchart Administrator Tambah Video

g. Flowchart Tambah Shift
Gambar 4.7 Flowchart Administrator Tambah Shift

h. Flowchart Tambah Mesin
Gambar 4.8 Flowchart Administrator Tambah Mesin

i. Flowchart Tambah Berita Berjalan
Gambar 4.9 Flowchart Administrator Tambah Berita Berjalan

j. Flowchart Tambah Karyawan
Gambar 4.10 Flowchart Administrator Tambah Karyawan
4.5.
Perancangan Proses
Pada aplikasi Display Informasi Departemen Produksi ini terdapat dua
pihak, yaitu pengguna dan pengurus sebagai administrator yang dapat melakukan
proses. Untuk mengetahui proses yang terdapat pada aplikasi ini dapat dilihat
DFD (Data Flow Diagram) level 0, level 1, dan level 2.
4.5.1. Data Flow Diagram (DFD)
Data Flow Diagram (DFD) merupakan diagram yang menggunakan
notasi-notasi atau simbol-simbol untuk menggambarkan sistem jaringan kerja
antar fungsi-fungsi yang berhubungan satu sama lain dengan aliran dan
penyimpanan data. Pada aplikasi ini juga terdapat hubungan antar kedua hal
tersebut.
Gambar 4.11 DFD level 0 Aplikasi Display Informasi Produksi
Pengguna
Data galeri
foto
Data jadwal
mingguan
Data berita
Data galeri event
Data galeri
video
Data event
Data galeri event

Data galeri video
Data galeri video
Data galeri foto
Data galeri foto
Data jadwal mingguan
Data berita
Data berita
Data login
Pengurus
Data login
Manipulasi
Berita
Login
Manipulasi
Jadwal
Mingguan

Data berita
Manipulasi
Galeri Foto
Manipulasi
Galeri Video
Manipulasi Event
Data galeri
foto
Data galeri
foto
Data galeri
video
Data galeri
video
Data berita
Database db_display
Gambar 4.12 DFD level 1 Aplikasi Display Informasi Produksi
Data event
Data event
Data admin
Pengurus
1.1
1.2
1.3
Input username & password

(Login)
Cek validasi username & password

(Login)
Masukkan data player ke session

(Login)
Username, password
Username
Tabel admin
Data admin
Gambar 4.13 DFD level 2 Login Aplikasi Display Informasi Produksi
2.2
Pengurus
Menampilkan
berita
(Manipulasi Berita)
Data berita
Pengguna
Data berita
2.1
Data berita
Input berita
(Manipulasi Berita)
Tabel berita
Data berita
Gambar 4.14 DFD level 2 Tambah berita Aplikasi Display Informasi Produksi
3.3
Pengurus
Pengguna
Data
jpm
Menampilkan jpm
(Manipulasi Jadwal Mingguan)
Data
jpm
Tabel jpm_detail
Data
jpm
Data jpm
3.2
Input nik,shift
Data jpm
3.1
Data jpm
Input tgl_mulai, tgl_akhir

Data jpm
Tabel jpm
Gambar 4.15 DFD level 2 Tambah JPM Aplikasi Display Informasi Produksi
Data foto
4.4
Pengguna
Pengurus
Menampilkan foto
(Manipulasi Galeri Foto)
Data foto
Data foto
Tabel foto
Data foto
4.1
4.2
Data foto
Input foto, judul

4.3
Data foto
Upload foto
Cek tipe foto

Gambar 4.16 DFD level 2 Tambah Foto Aplikasi Display Informasi Produksi
5.4
Pengguna
Pengurus
Menampilkan video
(Manipulasi Galeri Video)
Data video
Data video
Tabel video
Data video
5.1
Input video, judul
Data video
Data video
5.2
Cek tipe video
Data video
5.3
Upload video
Gambar 4.17 DFD level 2 Tambah Video Aplikasi Display Informasi Produksi
6.2
Pengurus
Menampilkan
event
(Manipulasi Event)
Pengguna
Data event
Data event
6.1
Data event
Input event
(Manipulasi Event)
Tabel event
Data event
Gambar 4.18 DFD level 2 Tambah Event Aplikasi Display Informasi Produksi
4.6.
Perancangan Basis Data

Pada aplikasi ini menggunakan basis data dalam menyimpan data. Untuk
melihat relasi antar tabel dapat dilihat pada bagian ERD (Entity Relationship
Diagram) dan untuk melihat struktur tabel dapat dilihat pada bagian deskripsi
tabel.
4.6.1. Entity Relationship Diagram (ERD)
Model data berupa notasi grafis dalam pemodelan data konseptual yang
menggambarkan hubungan antar penyimpanan satu dengan penyimpanan lainnya.
Diagram hubungan entitas aplikasi Display Informasi Departemen Produksi
dapat dilihat pada gambar 4.19
Gambar 4.19 ERD Aplikasi Display Informasi Produksi

4.6.2. Deskripsi Tabel
1. Tabel Bagian
Tabel 4.3 Struktur Tabel Bagian
Nama Kolom
Id_bagian
Nama
Tipe Data
Int(11)
Varchar(100)
Keterangan
Primary key, Auto increment
2. Tabel Event
Tabel 4.4 Struktur Tabel Event
Nama Kolom
Id_event
Judul
Waktu_mulai
Waktu_akhir
Tempat
Tipe Data
Int(11)
Varchar(255)
Datetime
Datetime
Varchar(100)
Keterangan
3. Tabel Foto
Tabel 4.5 Struktur Tabel Foto
Nama Kolom
Id_foto
Judul
Foto
Tipe Data
Int(11)
Varchar(255)
Varchar(255)
Keterangan
4. Tabel jpm
Tabel 4.6 Struktur Tabel jpm
Nama Kolom
Id_jpm
Tgl_mulai
Tgl_akhir
Tipe Data
Int(11)
Date
Date
Keterangan
5. Tabel jpm_detail
Tabel 4.7 Struktur Tabel jpm_detail
Nama Kolom
Tipe Data
Id_jpm_detail
Int(11)
Nik
Id_shift
Varchar(20)
Int(11)
6. Tabel karyawan
Tabel 4.8 Struktur Tabel karyawan
Keterangan
Nama Kolom
Tipe Data
Nik
Nama
Tgl_lhr
Foto
Id_bagian
Id_mesin
Tugas
Varchar(20)
Varchar(100)
Date
Varchar(100)
Int(11)
Int(11)
Varchar(100)
Keterangan
Primary key
7. Tabel mesin
Tabel 4.9 Struktur Tabel mesin
Nama Kolom
Tipe Data
Id_mesin
Id_bagian
Nama
Int(11)
Int(11)
Varchar(100)
Keterangan
8. Tabel mesin_detail
Tabel 4.10 Struktur Tabel mesin_detail
Nama Kolom
Tipe Data
Id_pasang
Id_mesin_pack
Id_mesin_fill
Keterangan
Int(11)
Int(11)
Int(11)
9. Tabel shift
Tabel 4.11 Struktur Tabel shift
Nama Kolom
Id_shift
Nama
Wkt_mulai
Wkt_akhir
Wkt_break_mulai
Wkt_break_akhir
Keterangan
Tipe Data
Int(11)
Varchar(100)
Time
Time
Time
Time
Text
Keterangan
10. Tabel teks_berjalan

Tabel 4.12 Struktur Tabel teks_berjalan
Nama Kolom
Id_teks
Teks
Tipe Data
Int(11)
Varchar(255)
Keterangan
11. Tabel tugas

Tabel 4.13 Struktur Tabel tugas
Nama Kolom
Id_tugas
Tugas
Id_bagian
Tipe Data
Int(11)
Varchar(100)
Int(11)
Keterangan
12. Tabel Video

Tabel 4.14 Struktur Tabel Video
Nama Kolom
Id_video
Judul
Video
4.7.
Tipe Data
Int(11)
Varchar(255)
Varchar(255)
Keterangan
Perancangan Interface atau Tampilan

Perancangan interface atau tampilan adalah kajian mengenai penentuan
kerangka dasar pembuatan tampilan/desain sebuah halaman website. Dimana

kerangka ini hanya berisi bagian di setiap bagiannya tanpa menggambarkan
isinya.
Perancangan digambarkan dalam sketsa dasar, dimana hanya digambarkan
berupa tabel dan diberi nama tiap bagiannya, tanpa memberikan atau
menggambarkan tampilan seperti aslinya. Proses perencanaan ini meliputi
perencanaan desain tampilan halaman front end dan halaman back end.
4.7.1. Layout Halaman Front End
Halaman front end merupakan halaman yang ditampilkan kepada
pengguna yang memiliki maupun yang tidak memiliki hak akses terhadap sistem.
1. Halaman login administrator
Logo
Textbox password
Tombol Masuk
Copyright
Gambar 4.20 Layout Halaman login administrator
Keterangan :
Pada halaman ini terdapat textbox untuk username dan password yang
dibutuhkan untuk login sebagai administrator. Kedua textbox ini harus diisi, bila
salah satu textbox tidak diisi atau akun tidak ada, maka akan muncul
pemberitahuan error.
2. Halaman beranda pengguna
Tampilkan Menu
Waktu Hari Ini
Konten
Ulang
Tahun Hari
ini
Event
Bulan ini
Berita Berjalan
Gambar 4.21 Layout Halaman beranda pengguna
Keterangan :
Pada halaman beranda pengguna terdapat tombol Tampilkan Menu untuk

menampilkan menu yang sebelumnya disembunyikan. Pada konten Ulang Tahun
Hari ini terdapat foto, nama, dan umur karyawan yang sedang berulang tahun.
Pada Event bulan ini terdapat event bulan ini yang belum dilaksanakan berupa
judul, waktu, dan tempat event.
3. Halaman JPM, Informasi, Grafik.
Konten
Tombol Kembali
Berita Berjalan
Gambar 4.22 Layout Halaman JPM, informasi, grafik

Keterangan :
Pada halaman ini hanya terdapat konten dan berita berjalan, karena konten
JPM, informasi, dan grafik membutuhkan ruang yang cukup luas agar tulisan
dapat terbaca dengan jelas.
4.7.2. Layout Halaman Back End
Halaman back end merupakan halaman di mana pengguna yang memiliki
hak akses terhadap sistem dapat melakukan prosedur create, read, update,
maupun delete sesuai dengan hak yang dimilikinya.
1. Halaman beranda administrator
Username
Logo Perusahaan
2.
Username
dan level
3.
Menu
4.
Konten
5.
Copyright
Gambar 4.23 Layout Halaman beranda administrator
Keterangan :
Pada halaman beranda administrator terdapat dropdown dengan label
username yang apabila diklik akan muncul link untuk edit password dan untuk
logout. Kemudian terdapat Menu yang berfungsi untuk menghubungkan ke
halaman lain, yang akan ditampilkan di bagian konten.
4.8.
Sitemap
Sitemap merupakan peta pada sebuah situs. Sitemap sangat dibutuhkan
bagi pengguna situs untuk memudahkan menjelajahi website yang sedang

digunakan. Pada dasarnya, sitemap merupakan navigasi-navigasi yang ada pada
web.
Untuk mengetahui halaman-halaman yang terdapat pada website Display
Informasi Departemen Produksi, penulis menggambarkan dengan sitemap
berikut.
Pengguna
Beranda
JPM
Galeri
Informasi
Foto
Video
Grafik
Instruksi Kerja
Gambar 4.24 Sitemap Halaman Pengguna

Administrator
Import
JPM
Beranda
Ganti
Background
Shift
Input
Event
Informasi
Karyawan
Galeri
Mesin
Bagian Kerja
Edit
Password
Keluar
Waste
Berita
Berjalan
Input
Input
Input
IK
Info
Edit
Edit
Edit
Delete
Delete
Delete
Input
Input
Delete
Edit
Edit
Input
Delete
Delete
Edit
Input
Delete
Edit
Delete
Gambar 4.25 Sitemap Halaman Administrator

4.9.
Implementasi
Pada bagian ini menjelaskan tentang implementasi. Implementasi sendiri
adalah suatu tindakan atau pelaksanaan dari sebuah rencana yang sudah disusun
secara matang dan terperinci.
Pada bagian implementasi ini melaksanakan perancangan yang telah
disiapkan/disusun secara matang. Dimulai dari persiapan teknis hingga pengujian
aplikasi.
4.9.1. Persiapan Teknis
Pada bagian ini akan menjelaskan bagaimana langkah-langkah dalam
mempersiapkan aplikasi pendukung dalam pembuatan website Display Informasi
Departemen Produksi.
1.
Instalasi Program
Berbagai program pendukung yang digunakan dalam pembuatan web ini

sangat beragam dan opsional, maksudnya adalah program yang digunakan
berbeda namun memiliki sifat dan kegunaan yang sama. Berikut program aplikasi
pendukungnya.
a. Local Server
Dalam hal ini penulis menggunakan Wamp sebagai aplikasi web
server. Dalam instalasi Wamp tidaklah sulit, hanya mengikuti perintah
demi perintah yang diinstruksikan.
b. Text Editor
Dalam hal memilih
aplikasi pendukung
text editor, penulis
menggunakan Sublime Text untuk menyunting pembuatan halaman

web. Bahasa pemrograman yang terdapat pada text editor ini sama
seperti text editor yang lainnya. Bahasa pemrograman yang digunakan
dalam pembuatan web ini adalah HTML, CSS, PHP, dan Javascript.
Instalasi Sublime Text tidak cukup sulit, hanya mengikuti perintahperintah yang diintruksikan.
c. Browser
Dalam hal memilih browser penulis menggunakan Google Chrome.
Fungsi dari browser dalam pembuatan web adalah untuk menampilkan
dan melakukan interaksi dengan dokumen yang disediakan oleh web
server. Cara menginstal cukup download terlebih dahulu di website
resmi Google Chrome, install dan tunggu hingga proses instalasi
selesai.
2.
Pembuatan Basis Data

Dalam pembuatan basis data, diperlukan pecancangan terlebih dahulu,
seperti tabel apa saja yang dibutuhkan dalam pembuatan aplikasi, kolom apa saja
yang terdapat dalam sebuah tabel, primary key dari sebuah tabel,serta hal detail
seperti tipe data yang digunakan dari sebuah kolom dan yang lainnya
Berikut akan dijelaskan langkah-langkah dalam pembuatan basis data di
phpMyAdmin:
a. Membuat basis data baru dengan nama db_display kemudian klik buat,
seperti pada gambar di bawah ini.
Gambar 4.26 Pembuatan Basis Data

b. Setelah klik buat, kemudian aka nada form untuk membuat tabel. Tuliskan
nama tabel dan banyak kolom yang dibutuhkan pada tabel itu kemudian
klik Kirim, seperti pada gambar di bawah ini.
Gambar 4.27 Pembuatan Tabel

c. Setelah klik Kirim, kemudian isi kolom-kolom berikut beserta tipe data,
panjang dari tipe data, indeks dan keterangan lainnya. Setelah itu klik
Simpan seperti pada gambar di bawah ini.
Gambar 4.28 Pembuatan Isi Tabel (Kolom)

d. Pembuatan tabel beserta isi tabel (kolom) telah selesai, ulangi langkah b
dan c untuk membuat tabel baru.
3.
Skrip
Pada bagian ini dibahas mengenai beberapa source code dalam sistem
aplikasi Display Informasi Departemen Produksi.

a. Koneksi
Pada bagian koneksi ini digunakan untuk menghubungkan aplikasi ke

basis data yang ada di local server yang telah diinstall terlebih dahulu.
Skrip koneksi dapat dilihat pada gambar berikut.
Gambar 4.29 Skrip Koneksi

b. Pemanggilan CSS
Gambar 4.30 Skrip Pemanggilan CSS

c. Pemanggilan Plugin Javascript
Gambar 4.31 Skrip Pemanggilan Plugin Javascript

4.10.
Simulasi Interface Aplikasi

Pada bagian ini menjelaskan tenang simulasi tampilan dari aplikasi.
Simulasi adalah penggambaran suatu sistem atau proses.

Pada bagian simulasi interface ini menjelaskan bagaimana aplikasi
berjalan, serta menampilkan tampilan di setiap halaman yang terdapat pada
aplikasi. Pada bagian simulasi interface aplikasi ini juga membahas fitur-fitur
yang terdapat pada aplikasi, sehingga memudahkan pengguna sebelum
menjalankan aplikasi.
Bagian yang dijelaskan mencakup konten yang terdapat pada halaman
tersebut, fitur-fitur yang terdapat pada halaman tersebut, dan pengguna dengan
hak akses apa yang dapat mengakses halaman tersebut.
1. Halaman Beranda Pengguna
Gambar 4.32 Halaman Beranda Pengguna 1
Gambar 4.33 Halaman Beranda Pengguna 2

Pada halaman beranda pengguna ini terdapat ucapan selamat datang,
waktu saat ini, karyawan yang berulan tahun hari ini, acara bulan ini, dan terdapat
informasi produksi yang diambil dari website perusahaan. Menu pada halaman ini
disembunyikan terlebih dahulu, karena konten pada halaman ini membutuhkan
space yang cukup luas. Maka dari itu dibuat tombol untuk menampilkan menu,
apabila tombol tersebut diklik maka tampilan akan seperti gambar 4.33. Di bawah
halaman ini terdapat berita berjalan.
2. Halaman JPM
Gambar 4.34 Halaman JPM

Pada halaman JPM atau jadwal kerja per minggu terdapat informasi waktu
masuk kerja karyawan per mesinnya. Pada pembagian jadwal masuk kerjanya
dibagi menjadi 2 shift, yaitu shift A dan shift B. Dibagian ini juga terdapat berita
berjalan seperti di halaman beranda.
3. Halaman Galeri Foto
Gambar 4.35 Halaman Galeri Foto
Pada halaman galeri foto terdapat slideshow untuk menampilkan foto-foto

kegiatan yang sudah dilakukan karyawan, seperti kegiatan gathering family.
Seperti halnya halaman beranda, pada halaman ini juga terdapat karyawan yang
berulan tahun hari ini, acara bulan ini, dan berita berjalan.
4. Halaman Galeri Video
Gambar 4.36 Halaman Galeri Video

Pada halaman galeri video terdapat kumpulan video untuk menampilkan
video kegiatan yang sudah dilakukan karyawan ataupun informasi yang berbentuk
video. Video ini akan berjalan secara otomatis dan berurutan. Seperti halnya
halaman beranda, pada halaman ini juga terdapat karyawan yang berulan tahun
hari ini, acara bulan ini, dan berita berjalan.
5. Halaman Grafik Waste
Gambar 4.37 Halaman Grafik

Pada halaman grafik waste terdapat grafik untuk menampilkan persentase
waste bahan kemas, seperti dus, box, dan roll. Dalam menampilkan grafik waste
ini dapat diatur berdasarkan tahun, bulan, tampilan(brand, produk, dan item).
Pada halaman ini juga terdapat berita berjalan dibagian bawahnya.
6. Halaman info
Gambar 4.38 Halaman Info
Pada halaman info terdapat slideshow untuk menampilkan informasi yang

berbentuk gambar. Pada bagian bawahnya terdapat berita berjalan untuk
menampilkan informasi yang berbentuk teks.
7. Halaman Instruksi Kerja
Gambar 4.39 Halaman Instruksi Kerja

Pada halaman instruksi kerja ini terdapat daftar instruksi kerja baik bagian
dari bagian packing maupun processing. Untuk membaca instruksi kerjanya, harus
klik pada link yang selanjutnya akan terhubung ke halaman detail instruksi kerja.
Seperti halnya halaman beranda, pada halaman ini juga terdapat karyawan yang
berulang tahun hari ini, acara bulan ini, dan berita berjalan di bawahnya.
8. Halaman Instruksi Kerja Detail
Gambar 4.40 Halaman Instruksi Kerja Detail

Pada halaman instruksi kerja detail terdapat pdf viewer untuk membaca
instruksi kerja yang telah dipilih di halaman instruksi kerja. Pada halaman ini juga
terdapat karyawan yang berulan tahun, acara bulan ini, dan berita berjalan di
bawahnya.
9. Halaman login
Gambar 4.41 Halaman login

Pada halaman ini terdapat form yang berfungsi untuk melakukan proses
login. Terdapat 2 textbox, yaitu : username dan password. Apabila pengguna tidak
memasukkan username atau password, maka akan muncul pemberitahuan bahwa

username dan password harus diisi. Begitu juga apabila akun tidak ditemukan,
maka akan muncul pemberitahuan bahwa akun tidak ada.
10. Halaman beranda administrator
Gambar 4.42 Halaman beranda administrator

Halaman beranda administrator adalah halaman yang pertama diakses
ketika seorang administrator berhasil melakukan proses login. Pada halaman ini
menampilkan menu administrator, informasi jumlah data, data karyawan, dan
data mesin.
11. Halaman Tambah JPM
Gambar 4.43 Halaman Tambah JPM

Halaman tambah JPM adalah halaman yang berfungsi untuk membuat
jadwal kerja mingguan karyawan. Pada halaman tambah JPM terdapat 2 textbox,
yaitu: tanggal mulai dan tanggal akhir. Kedua textbox tersebut dibutuhkan untuk
membatasi waktu pembuatan JPM, biasanya pembuatan JPM ini dibuat
perminggu. JPM ini dibuat permesin, masing-masing mesin berbeda waktu masuk
kerjanya. Administrator dapat langsung memilih karyawan dengan checklist
dibagian checkbox.
12. Halaman Import Waste
Gambar 4.44 Halaman Import Waste

Halaman import waste adalah halaman untuk memasukkan jumlah waste
produksi seperti box, dus, dan roll. Data yang akan dimasukkan berbentuk file
excel dengan format .xls. Data waste ini dikelompokkan berdasarkan tahun dan
bulan, yang selanjutnya akan ditampilkan berbentuk grafik batang.
13. Halaman Import Instruksi Kerja
Gambar 4.45 Halaman Import Instruksi Kerja

Halaman instruksi kerja adalah halaman untuk memasukkan instruksi kerja
dengan format .pdf. Pada halaman ini terdapat textbox judul dan tombol untuk
memilih file pdf. Apabila file berhasil dimasukkan, maka akan muncul di tabel
Data IK. Pada halaman ini juga terdapat tombol untuk menghapus instruksi kerja
yang sudah dimasukkan.
14. Halaman Tambah Berita Berjalan
Gambar 4.46 Halaman Tambah Berita Berjalan

Halaman tambah berita berjalan adalah halaman untuk menambahkan
berita berjalan yang akan ditampilkan di halaman beranda pengguna. Pada
halaman ini terdapat sebuah textbox yang harus diisi dengan berita yang akan
ditampilkan. Apabila data berhasil dimasukkan, maka akan muncul di tabel Data
Berita. Pada tabel tersebut terdapat 2 aksi, yaitu: hapus dan edit.
15. Halaman Tambah Info
Gambar 4.47 Halaman Tambah Info
Halaman tambah info adalah halaman untuk menambahkan informasi yang

berbentuk gambar yang akan ditampilkan di Halaman Informasi. Pada halaman ini
terdapat sebuah textbox judul dan tombol untuk memilih gambar. Apabila
pengisian data sudah selesai kemudian klik tombol Tambah Info.
16. Halaman Lihat Info
Gambar 4.48 Halaman Lihat Info

Halaman lihat info adalah halaman untuk melihat data informasi yang
sudah ada, seperti judul dan gambar. Di halaman ini juga terdapat 2 tombol, yaitu
tombol hapus dan tombol edit. Apabila tombol hapus diklik, maka akan muncul
konfirmasi penghapusan untuk meyakinkan administrator. Apabila tombol edit
diklik, maka akan dialihkan ke halaman edit info.
17. Halaman Tambah Event
Gambar 4.49 Halaman Tambah Event

Halaman tambah event adalah halaman untuk menambahkan kegiatan
dengan rincian waktu dan tempatnya. Event ini akan ditampilkan di halaman
pengguna. Pada halaman ini terdapat 4 textbox, yaitu: judul, waktu awal, waktu
akhir, dan tempat. Apabila pengisian data sudah selesai kemudian klik tombol
Tambah Event.
18. Halaman Lihat Event
Gambar 4.50 Halaman Lihat Event
Halaman lihat event adalah halaman untuk melihat data event yang sudah
ada. Data yang ditampilkan yaitu: judul, waktu mulai, waktu akhir, dan tempat
kegiatan. Di halaman ini juga terdapat 2 tombol, yaitu tombol hapus dan tombol
edit. Apabila tombol hapus diklik, maka akan muncul konfirmasi penghapusan
untuk meyakinkan administrator. Apabila tombol edit diklik, maka akan dialihkan
ke halaman edit event.
19. Halaman Tambah Karyawan
Gambar 4.51 Halaman Tambah Karyawan

Pada halaman tambah karyawan terdapat textbox NIK, textbox nama,
textbox tanggal lahir, combobox bagian, combobox mesin, combobox tugas, dan
tombol untuk memilih foto karyawan. Apabila data telah selesai diisi selanjutnya
klik tombol Tambah Karyawan.
20. Halaman Lihat Karyawan
Gambar 4.52 Halaman Lihat Karyawan

Halaman lihat karyawan adalah halaman untuk melihat data karyawan
yang sudah ada. Data yang ditampilkan yaitu: NIK, nama, tanggal lahir, nama
bagian, nama mesin, tugas, dan foto karyawan. Di halaman ini juga terdapat 2
tombol, yaitu tombol hapus dan tombol edit. Apabila tombol hapus diklik, maka
akan muncul konfirmasi penghapusan untuk meyakinkan administrator. Apabila
tombol edit diklik, maka akan dialihkan ke halaman edit karyawan.
21. Halaman Ganti Background
Gambar 4.53 Halaman Ganti Background
Halaman ganti background adalah halaman untuk mengganti gambar

background pada halaman beranda pengguna. Pada halaman ini terdapat tombol
untuk memilih gambar background. Apabila telah selesai memilih gambar
kemudian klik tombol Ganti Sekarang untuk mengubah background.
22. Halaman Ganti IP
Gambar 4.54 Halaman Ganti IP

Halaman Ganti IP adalah halaman untuk mengubah IP website mesin yang
akan ditampilkan di halaman beranda pengguna.
4.11.
Pengujian Aplikasi
Pengujian aplikasi merupakan bagian penting. Pengujian dilakukan untuk
mengetahui suatu proses yang terdapat di dalam aplikasi memenuhi harapan yang
diinginkan atau tidak.
4.11.1. Poin Pengujian
Poin pengujian aplikasi Display Informasi Departemen Produksi adalah
sebagai berikut:
1. Login
2. Input JPM
3. Delete JPM
4. Import waste
5. Import instruksi kerja

6. Input berita berjalan
7. Edit berita berjalan
8. Delete berita berjalan
9. Input info
10. Edit info
11. Delete info
12. Input event
13. Edit event
14. Delete event
15. Input bagian kerja
16. Edit bagian kerja
17. Delete bagian kerja
18. Input mesin
19. Edit mesin
20. Delete mesin
21. Input shift
22. Edit shift
23. Delete shift
24. Input karyawan
25. Edit karyawan
26. Delete karyawan
27. Input galeri foto
28. Edit galeri foto
29. Delete galeri foto
30. Input galeri video
31. Edit galeri video
32. Delete galeri video
33. Ganti background
34. Ganti IP mesin
35. Edit password
36. Logout
4.11.2. Tabel Pengujian Aplikasi
Tabel 4.15 Pengujian Aplikasi
No.
1.
2.
3.
Deskripsi
Login
Login
Input JPM
Prosedur Pengujian
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
Aplikasi berjalan
Halaman login
Tampilan form login
Masukkan data login
yang benar
Klik tombol Masuk
Aplikasi berjalan
Halaman login
Tampilan form login
Masukkan data login
yang salah
Klik tombol Masuk
Aplikasi berjalan
Halaman tambah
JPM
Tampil form tambah
JPM
Masukkan data shift I
Klik tombol Tambah
1. Username
2. Password
Berhasil login
dan tampil
halaman
beranda
administrator
Kriteria
Evaluasi Hasil
Berhasil login
dan tampil
halaman
beranda
administrator
1. Username
2. Password
Tidak berhasil
melakukan
login, muncul
pemberitahuan
dan tampil form
login
Muncul
pemberitahuan
bahwa JPM
berhasil
disimpan dan
tampil halaman
tambah JPM
Tidak berhasil
melakukan
login, muncul
pemberitahuan
dan tampil form
login
Muncul
pemberitahuan
bahwa JPM
berhasil
disimpan dan
tampil halaman
tambah JPM
Masukkan
1. Tanggal
mulai
2. Tanggal
akhir
3. Shift
permesin
4. Karyawan
Keluaran
Hasil yang
didapat
OK
OK
Berhasil
OK
Berhasil
Kesimpulan
Berhasil
No.
Deskripsi
Prosedur Pengujian
Shift II
6. Masukkan data shift
II
7. Klik tombol selesai
Masukkan
permesin
Keluaran
Kriteria
Evaluasi Hasil
Hasil yang
didapat
Kesimpulan
BAB V
PENUTUP
5.1.
Kesimpulan
Dengan adanya aplikasi Display Informasi ini, terdapat beberapa
kelebihan dibandingkan sebelum adanya aplikasi ini, yaitu:

1. Aplikasi ini mempermudah pengguna dalam menyampaikan informasi,
sehingga para administrator tidak usah mencetak info tersebut yang
selanjutnya akan ditempel di tembok. Pada aplikasi ini sudah mengurangi
penggunaan kertas dan mengurangi penempelan kertas di tembok.
2. Aplikasi ini juga mempermudah pengguna dalam membuat jadwal kerja
mingguan dan menyampaikannya kepada para karyawan.
3. Aplikasi ini juga dapat membuat galeri foto dan video yang berfungsi
untuk menampilkan kegiatan-kegiatan yang sudah dilakukan karyawan,
seperti halnya kegiatan Family Gathering. Sehingga para karyawan dapat
melihat dan mengenang kegiatan tersebut.
4. Aplikasi ini juga dapat membuat event yang dapat mengingatkan para
karyawan apabila ada kegiatan yang akan dilakukan.
5. Aplikasi ini juga dapat menginfokan kepada para karyawan yang sedang
berulang tahun hari ini, sehingga karyawan yang berulang tahun akan
teringat dan dapat menumbuhkan rasa kebersamaan antar karyawan.
5.2.
Saran
5.2.1. Saran Untuk Pihak Industri

Industri sangat berperan penting dalam pelaksanaan Praktek Kerja
Industri, oleh karena itu penulis mengucapkan terima kasih yang sebesar-besarnya
kepada pihak industri, khususnya untuk PT. Nutrifood Indonesia yang telah
memberikan kesempatan kepada penulis untuk dapat melaksanakan Praktek Kerja
Industri. Saran yang ingin penulis sampaikan diantaranya :
1. Penulis berharap agar PT. Nutrifood Indonesia tetap menjalin kerjasama
dengan pihak SMK Negeri 1 Cimahi dalam melaksanakan Praktek Kerja
Industi
bahkan
adanya
peningkatan
77
kerjasama
lagi
dalam
segi
pemanfaatan SDM yang ada di SMK Negeri 1 Cimahi untuk bekerja di PT.
Nutrifood Indonesia.
2. Diperlukan evaluasi secara berkala kepada para siswa untuk mengetahui
ilmu-ilmu apa saja yang telah diterima selama melaksanakan Praktek
Kerja Industri.
3. Penempatan siswa pada saat melaksanakan Praktek Kerja Indutri
diusahakan sesuai dengan ilmu yang dimiliki siswa.
4. Diberikan akun sementara untuk bagian operator data entry, karena
apabila tidak memiliki akun akan menghambat pekerjaan karena siswa pkl
harus meminta tolong untuk login komputer. Dan juga bisa membuat siswa
pkl lebih bertanggung jawab jika ada kesalahan input data, tidak pura-pura
tidak tahu kesalahan siswa pkl tetapi menggunakan akun operator data
entry lainnya.
5.2.2. Saran Untuk Pihak Sekolah
Selama pelaksanaan Praktek Kerja Industri, sekolah sangat berperan
penting baik dalam penempatan Praktek Kerja Industri maupun penerapan ilmu
yang didapat dari sekolah. Adapun beberapa hal yang penulis sampaikan untuk
perbaikan dimasa yang akan datang, yaitu:
1. Mengingat perkembangan teknologi berkembang begitu pesat diharapkan
pihak sekolah menyesuaikan materi yang diberikan di kelas dengan
perkembangan di industri tanpa melupakan ilmu dasar dari perkembangan
ilmu pengetahuan tersebut.
2. Frekuensi praktek bagi siswa harap lebih ditingkatkan lagi, karena ini
merupakan bekal pengalaman dan pengetahuan bagi siswa dalam
menghadapi persaingan di dunia kerja.
3. Mengoptimalkan kegiatan kunjungan industri secara berkala agar siswa
dapat secara langsung melihat dunia industri. Guna meningkatkan
motivasi seluruh siswa untuk senantiasa meningkatkan pengetahuannya
dalam segi IPTEK dan memberikan gambaran kepada siswa tentang dunia
industri yang sesungguhnya.
4. Perlunya pelatihan berbicara dan berkomunikasi di depan umum kepada
para siswa, karena di dalam dunia kerja diharuskan bersosialisasi dengan

banyak pihak dan golongan serta lingkungan yang baru.
5. Lebih menjalinkan komunikasi untuk jadwal bimbingan antar pembimbing
dan murid, karena sering terjadinya ketidakcocokan jadwal untuk bertemu.
6. Sebaiknya diadakan program pertukaran jurusan minimal satu tahun
sekali, dimana suatu jurusan tidak hanya mempelajari pelajaran jurusannya
saja melainkan dapat juga mempelajari pelajaran yang ada dijurusan lain
agar wawasan siswa bertambah luas.
DAFTAR PUSTAKA
http://www.pengertianku.net/2014/09/mengetahui-pengertian-website-danjenisnya.html
http://www.burung-net.com/2015/05/pengertian-html-fungsi-html-serta-sejarahhtml.html
https://yuliakurniasih30.wordpress.com/tag/definisi-css-jenis-jenis-css/
http://www.eduloka.net/2015/08/pengertian-tipe-dan-fungsi-css-besertacontoh.html
http://csstutors.blogspot.co.id/p/mengenal-css.html
http://babdua.blogspot.co.id/2015/02/definisi-hypertext-preprocessor-php.html
http://www.termasmedia.com/65-pengertian/69-pengertian-database.html
http://www.mandalamaya.com/pengertian-database/
http://satriamecha.blogspot.co.id/2014/08/pengertian-erd-entity-relationship.html
http://vebryexa.com/definisi-dan-contoh-entity-relationship-diagram-erd.html
http://vebryexa.com/pengertian-dan-contoh-data-flow-diagram-dfd.html
http://benz-scout.blogspot.co.id/2014/08/pengertian-databaseserver.html#.Vl8gXHbhDDc
http://mjajuliunbaja.blogspot.co.id/2014/10/macam-macam-jenis-aplikasi-webserver.html
http://berita.sugawebsite.com/fungsi-pengertian-web-server-dan-contoh/
80
LAMPIRAN
DAFTAR HADIR
81
DAFTAR NILAI PRAKERIN NON TEKNIS
DAFTAR NILAI PRAKERIN TEKNIS

Laporan ALI

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan ALI

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN

PRAKTEK KERJA INDUSTRI

APLIKASI DISPLAY INFORMASI DEPARTEMEN PRODUKSI

SEKOLAH MENENGAH KEJURUAN NEGERI 1 CIMAHI

APLIKASI DISPLAY PRODUKSI BERBASIS WEBSITE

Eko Adi Nugroho

PENGESAHAN DARI PIHAK SEKOLAH

APLIKASI DISPLAY PRODUKSI BERBASIS WEBSITE

Laporan ini telah disetujui oleh :

AGUS NUGROHO, S. Pd, MT

Drs. H. ERMIZUL, M.Pd

Latar Belakang Masalah............................................................................9

BAB II TINJAUAN PERUSAHAAN.....................................................................4

PT. Nutrifood Indonesia............................................................................4

Lokasi PT. Nutrifood Indonesia................................................................5

Visi dan Misi Perusahaan..........................................................................6

BAB III LANDASAN TEORI...............................................................................16

Macam-Macam Domain Website.....................................................17

HTML (Hypertext Markup Language)....................................................18

Fungsi dan Kegunaan HTML..........................................................19

Struktur Dasar HTML......................................................................19

CSS (Cascading Style Sheet)...................................................................21

Metode Penulisan CSS.....................................................................23

PHP (PHP: Hypertext Processor)...........................................................24

Struktur Dasar PHP..........................................................................25

Database (Basis Data).............................................................................26

Manfaat Penggunaan Database........................................................27

Bahasa Basis Data............................................................................28

Entity Relationship Diagram (ERD)................................................28

Data Flow Diagram (DFD)..............................................................31

Fungsi Web Server...........................................................................34

Contoh Web Server..........................................................................34

Analisa Kebutuhan Sistem......................................................................36

Analisa Kebutuhan Data..........................................................................37

Perancangan Prosedur atau Alur..............................................................39

Data Flow Diagram (DFD).............................................................43

Perancangan Basis Data..........................................................................47

Entity Relationship Diagram (ERD)................................................47

Perancangan Interface atau Tampilan.....................................................52

Layout Halaman Front End..............................................................52

Layout Halaman Back End...............................................................54

Simulasi Interface Aplikasi.................................................................59

Tabel Pengujian Aplikasi.............................................................76

Saran Untuk Pihak Industri..............................................................78

Saran Untuk Pihak Sekolah..............................................................79

Gambar 2.1 Lambang I-CARE................................................................................7

Gambar 3.5 Notasi ERD Relasi One To One.........................................................30

Gambar 4.29 Skrip Koneksi...................................................................................58

Tabel 3.1 Notasi DFD Menurut Para Ahli..............................................................31

Tabel 4.6 Struktur Tabel jpm..................................................................................49

1.1. Latar Belakang Masalah

Penulis membuat laporan praktik kerja industri dengan judul APLIKASI

WEBSITE sehingga pembatasan masalah dalam penyusunan laporan ini adalah

Bab ini membahas tentang kesimpulan dan saran guna memperbaiki

PT. Nutrifood Indonesia

swasta nasional yang bergerak di bidang industri makanan dan minuman,

Nutrifood Indonesia adalah perusahaan yang secara inovatif menginspirasi

Lokasi PT. Nutrifood Indonesia

Nutrifood mendapat sertifikat ISO 9002 : 1987, sekaligus menjadi

perusahaan makanan pertama di Indonesia yang mendapat ISO

Visi dan Misi Perusahaan

Gambar 2.1 Lambang I-CARE

perbaikan terus menerus (continuous improvement) lingkungan yang