LAPORAN PRAKTIKUM WEB

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

PERANCANGAN SISTEM DAN PEMBUATAN

SISTEM INFORMASI LAUNDRY

Disusun Oleh :

Nama : Satya Panji Satrio

NIS : 7733

Kelas : XII RPL A

PEROGRAM KEAHLIAN REKAYASA PERANGKAT LUNAK

SMK NEGERI 2 KARANGANYAR

TAHUN PELAJARAN 20222/2023

 HALAMAN PENGESAHAN

LAPORAN PRAKTIKUM
PERANCANGAN SISTEM DAN PEMBUATAN
SISTEM INFORMASI LAUNDRY

Laporan Praktikum ini disusun sebagai tugas mata pelajaran Pemrograman Web
Dan Perangkat Bergerak

Karanganyar, 15 November 2022

Guru Mata Pelajaran Penulis

Dwi Nuryani, S.Kom Satya Panji Satrio

NIP. 19820809 201101 2 013 NIS. 7733

Mengetahui

Ketua Program Keahlian Rekayasa Perangkat Lunak

Budi Sulistiyo, S.Kom, M.Kom

NIP.19830921 201001 1 018

2
 KATA PENGANTAR

Dengan menyebut nama allah yang maha pengasih lagi maha penyayang,
dengan ini kami panjatkan puji syukur kehadirat-Nya kepada kami, sehingga kami
dapat menyelesaikan perancangan sistem dan pembuatan program aplikasi beserta
laporannya

Adapun laporan praktikum “RANCANGAN SISTEM INFORMASI

YOWESLAH LAUNDRY” beserta laporannya ini kami telah usahakan
semaksimal mungkin dan tentunya dengan bantuan dari banyak pihak, sehingga
dapat memperlancar proses pembuatan laporan ini. Oleh sebab itu, kami juga
ingin menyampaikan rasa terima kasih yang sebesar besarnya kepada semua pihak
yang telah membantu kami dalam menyelesaikan sistem dan pembuatan aplikasi
ini, yaitu :

1. Bapak Budi Sulistiyo, S.Kom, M.Kom selaku Ketua Program Keahlian

Rekayasa Perangkat Lunak SMK Negeri 2 Karanganyar yang telah
memberikan arahan dan memberikan berbagai fasilitas.

2. Ibu Dwi Nuryani, S.Kom Selaku Guru Mata Pelajaran Pemrograman Web
Dan Perangkat Bergerak SMK Negeri 2 Karanganyar yang telah
memeberikan bimbingan dalam pembuatan aplikasi ini.

3. Rekan-rekan kelas XII RPL A B C SMK Negeri 2 Karanganyar yang telah

memotivasi penulis dalam pembuatan perancangan sistem dan program
aplikasi.

Pada akhirnya penulis menyadari media pembelajaran ini jauh dari

sempurna, maka saran dan masukan yang mmembangun senantiasa penulis
harapkan

Karanganyar, 15 November 2022

Penulis

3
 DAFTAR ISI

Halaman Judul ...................................................................................................................... i

Halaman Pengesahan...........................................................................................................ii

Kata Pengantar....................................................................................................................iii

Daftar Isi ............................................................................................................................. iv

I. Dasar Teori...................................................................................................................5

II. Alat dan Bahan...........................................................................................................14

III. Langkah Praktikum....................................................................................................14

IV. Hasil Praktikum..........................................................................................................58

V. Kesimpulan ................................................................................................................ 62

4
 5

I. Dasar Teori
Pengertian Sistem menurut pakar

 Menurut Raymond Mc Leod, Jr ( 2004 ) “sistem adalah elemen –

elemen yang terintegrasi dengan maksud yang sama untuk mencapai
tujuan. Suatu organisasi seperti perusahaan atau satu area fungsional
cocok dengan definisi ini”

 Menurut Jogiyanto. H. M ( 2005 ) “ sistem adalah suatu jaringan kerja

dari prosedur – prosedur yang saling berhubungan, berkumpul
bersama – sama untuk melakukan suatu kegiatan atau untuk
menyelesaikan suatu sasarna tertentu “.

Pegertian informasi menurut para pakar :

 Informasi adalah data yang telah di proses atau data yang memiliki arti
informasi sesungguhnya berasal dari data yang kemudian diproses
sehingga data tersebut memiliki arti bagi pemakainya, ( Raymond Mc.
Leod, Jr, 2004 )

 Informasi adalah data yang diolah menjadi bentuk yang lebih berguna
dan lebih berarti bagi yang menerimanya ( Jogiyanto, H. M, 2005 )

Pengertian Desain Sistem

Tahap setelah analisis dari siklus pengembangan sistem adalah

desain sistem. “Menurut John Burch dan Gery Grudniski dalam bukunya
Jogiyanto, H. M, ( 2005 ), bahwa Desain Sistem adalah berupa
penggambaran, perencanaan dan pembuatan sketsa atau [engaturan dari
berbagai elemen yang terpisah ke dalam satu kesatuan yang utuh dan
berfungsi “.

Tujuan dari desain ini adalah memenuhi kebutuhan pemakai sistem

serta memberikan gambaran yang jelas dan lengkap kepada pemrograman
computer dan ahli – ahli teknik lainnya yang terlibat

Alat-alat bantu dalam Perancangan Sistem / Desain Sistem

1. Bagan Alir ( flowchart )

Merupakan bagan yang menunjukan alir ( flow ) prosedur sistem

secara logika. Bagan Alir digunakan pertama untuk alat bantu
 6

komunikasi dan dokumentasu. Simbol – simbol bagan alir yang

digunakan adalah sebagai berikut :

Perbedaan DFD dan Flowchart

a) DFD menunjukkan alur data di suatu sistem sedangkan flowchart

sistem menjelaskan alur kerja datau prosedur – prosedur yang ada
di dalam sistem

b) DFD prosesnya dapat dilakukan serentak atau pararel sedangkan

flowchart alur datanya harus urut

c) DFD tidak ada looping sedangkan flowchart ada looping

d) DFD tidak ada proses perhitungan sedangkan flowchart ada proses

perhitungan
 7

Pedoman Pembuatan Flowchart

 Flowchart digambarkan dari halaman atas ke bawah dan kiri ke

kanan

 Aktivitas yang digambarkan harus didefinisikan secara hati-hati

dan definisi ini harus dapat dimengerti oleh pembacanya

 Kapan aktivitas dimuali dan berakhir harus ditentukan secara jelas

 Setiap langkah dari aktivitas harus diuraikan dengan menggunakan

deskripsi kata kerja

 Setiap langkah dari aktivitas harus berada pupa urutan yang benar

 Lingkup dan range dari aktivitas yang sedang digambarkan tidak

perlu digambarkan pada flowchart yang sama. Simbol konekor
harus digunakan percabanga tudak berkaitan dengan sistem

 Gunakan simbol – simbol flowchart yang standar

 Flowchart Sistem ( System Flowchart )

Jenis – jenis flowchart :

a) Bagan alir sistem ( system flowchart )

Merupakan bagan yang menunjukan alur kerja atau apa yang

sedang dikerjakan didalam sistem secara keseluruhan dan
menjelaskan urutan dari prosedur – prosedur yang ada di dalam
sistem. Dengan kata lain, flowchart ini merupakan deskripsi secara
grafik dari urutan prosedur – prosedur yang membentuk suatu
sistem. Contoh :
 8

b) Bagan alir dokumen ( dokumen flowchart )

Disebut juuga bagan alir formulir ( form flowchart ) atau

paperwork flowchart merupakan bagan alir yang menunjukan arus
dari laporan dan formulir termasuk tembusan – tembusannya.
Contoh :

c) Bagan alir skematik ( schematic flowchart )

Merupakan bagan alir yang mirip dengan bagan alir sistem,

yaitu untuk menggambarkan prosedur di dalam sistem.
Perbedaannya adalah, bagan alir sistem, juga menggunakan
gambar-gambar komputer dan peralatan lainnya yang digunakan.
Maksud penggunaan gamabr-gambar ini adalah untuk
memudahkan komunikasi keoada rang yang kurang paham dengan
simbol-simbol gan alir. penggunaan gambar-gambar ini
memudahkan untuk dipahamu, tetapi sulit dan lama
menggambarnya. Contoh :

d) Bagan alir program ( program flowchart )

 9

Merupakan bangun yang menjelaskan secara rinci langkah-

langkah dari proses program. Bagan alir program dibuat dari
derivikasi bgan alir sistem. Bangun alir program dapat terdiri dari
dua macam, yaitu bagan alir logika program ( program logic
flowchart ) dan bagan alir program computer terinci ( detailed
computer program flowchart ). Bagan alir logika program
digunakn untuk menggambarkan tiap-tiap langkah di dalam
program computer secara logika. Bagan alir logika program ini
dipersiapkan oleh analisa sistem. Contoh :

e) Bagan alir proses ( process flowchart )

Merupakan teknik penggambaran rekayasa industrial yang

memecah dan enganalisis langkah-langkah selanjutnya dalam suatu
prosedur atau sistem. Flowchart proses digunakan oleh perekayasa
industrial dalam mempelajari dan mengembangkan proses-proses
manufacturing. Dalam analisa siste, flowchart ini digunakan secara
efektif untuk menelusuri alur suatu laporan atau form. Contoh :
 10

2. Dekomposisi

Merupakan grafik yang dapat dipecahkan menjadi beberapa bagian

yang terkecil sehingga mudah dipelajari, dekomposisi mempunyai 4
bagian yaitu :

1) Memecahkan masalah masalah yang besar ke bagian bagian yang

bisa dipecahkan

2) Untuk membantu testing program

3) Untuk membantu penggambaran flow

4) Untuk membantu di dalam melacak proses terkecil sampai tertinggi

3. Context Diagram

Diagram context adalah diagram tingkat atas, merupakan diagram

yang paling tidak detail dari sebuah sistem informasi yang
menggambarkan aliran-aliran data ke dalam dan keluar entitas-entitas
external. Contoh diagram konteks :
 11

4. Data Flow Diagram ( DFD )

DFD sering digunakan untuk menggambarkan sistem yang telah

ada atau sistem baru yang akan dikembangkan secara logika tanpa
mempertimbangkan lingkungan fisik dimana dana tersebut akan
disimpan. DFD merupakan alat yang digunakan pada metodologi
pengembangan sistem yang terstruktur.

Beberapa simbol yang digunakan di DFD untuk maksud mewakili

yaitu:

Contoh diagram level 1 :

 12

5. Perancangan Database

Dalam perancangan database dapat digunakan Entity Relastionship

Diagram ( ERD ), Normalisasi, Relationship Tabel, Data Dictionary
(Kamus Data), Struktur File Database

Contoh ERD :

Contoh Struktur Tabel :

6. Desain Input Output

a. Desain Input

Masukkan sistem harus dirancang secara rinci mulai perangkat yang

akan digunakan sampai dengan desain yang digunakan karena jika
desain masukka kurang lengkap maka akan berdampak informasi
yang dihasilkan data yang disimpan atau informasi yang dihasilkan
juga tidak sesuai dengan kebutuhan sistem
 13

Tujuan dari desain input adalah :

1) Untuk mengefektifkan biaya pemasukan

2) Untuk mencapai keakuratan system yang tinggi

3) Menjamin pemasukan data yang dapat diterima dan dimengerti

oleh pemakai.

Dalam mendesain input ada beberapa tipe input yaitu :

1) Eksternal : Pemasukan data berasal dari luar organisasi

2) Intrnal : Pemasukan data berasal dari dalam organisasi

b. DesainOutput

Desain output keluaran merupakan hasil yang tidak diabaikan karena

keluaran yang dihasilkan harus memudahkan bagian setiap unsur
manusia yang memerlukan :

1) Eksternal : Pemasukan data berasal dari luar organisasi

2) Internal : Pemasukan data berasal dari dalam organisasi

 14

II. Alat dan Bahan

Laptop/PC

Web Editor : VS Code

Web Server(Apache) dan database Server(Mysql) dalam XAMPP

Aplikasi untuk menggambar rancangan sistem : Drow.io

Gambar-gambar pendukung untuk tampilan halaman web

III. Langkah Praktikum

1. Buat Rancangan Sistem
a) Flowchart
Flowchart sistem yang berjalan
 15

Flowchart sistem yang diusulkan

b) Data Flow Diagram

Level Konteks
 16

Level 1

c) Rancangan Basis Data

Tabel master

Tabel tb_cuci_komplit

Tabel tb_cuci_satuan
 17

Tabel tb_dry_clean

Tabel tb_order_ck

Tabel tb_order_cs
 18

Tabel tb_order_dc

Tabel tb_riwayat_ck
 19

Tabel tb_riwayat_cs

Tabel tb_riwayat_dc
 20

d) Rancangan User Interface

Halaman Login

Halaman login Dashboard

 21

Halaman Pilih Paket Pesanan

Halaman Tambah Pesanan

 22

Halaman Cetak Riwayat / Laporan

2. Buat database dengan nama laundry, dan buat tabel-tabel dengan

stuktur seperti gambar berikut :
23
24
25
 26

3. Buat nama folder project “laundry” lalu buka folder dengan Visual
Studio Code atau IDE yang Lain
4. Unduh folder _assets dari link shorturl.at/bgOQX lalu simpan di
dalam folder laundry
27
 28

5. Buat file _funtions.php untuk meyimpan fungsi fungsi yang akan

digunakan dalam aplikasi
29
30
31
32
33
34
35
 36

6. Buat file _header.php, index.php, dan _footer.php untuk tampilan

halaman awal program
37
 38

7. Buat file untuk halaman login dan logout

 39

8. Buat folder paket

Buat file index.php, dan paket.php
Buat folder pkt_ck, pkt_cs dan pkt_dc didalam folder paket, dan buat
file file sepert berikut
 40

index.php

paket.php
 41

pkt_ck.php
 42

tambah.php

edit.php
 43

hapus.php

9. Buat folder order

Buat file index.php, order_ck.php, order_cs.php, order_dc.php,
order.php dan isikan sintaks seperti berikut :

index.php
 44

order_ck.php
 45

order_cs.php
 46

order_dc.php
 47

order.php

10. Buat folder daftar_order

Buat file daf_or_ck.php, hapus_ck.php, daf_or_cs.php , hapus_cs.php,
daf_or_dc.php, hapus_dc.php dan index.php
daf_or_ck.php
 48

hapus_ck.php

index.php

11. Buat folder detail_order

Buat file index.php, folder detail_ck,detail_cs,detail_dc lalu buat file
seperti berikut
 49

index.php

bayar.php
 50

detail_order_ck.php
 51

12. Buat folder riwayat_transaksi

Buat file index.php, riwayat.php dan folder riwayat_ck,riwayat_cs,
riwayat_dc lalu buat file seperti berikut

index.php
 52

riwayat.php
 53

cetak_info.php
 54

detail_ck.php
 55

riwayat.ck

13. Buat folder karyawan

Buat file index.php,karyawan.php,tambah.php,edit.php dan hapus.php
index.php
 56

karyawan.php

tambah.php
 57

edit.php
 58

hapus.php

IV. Hasil Praktikum

Halaman login

Halaman utama
 59

Halaman tambah order

 60

Halaman riwayat transaksi

Halaman detail pesanan dan laporan

 61

Halaman karyawan
 62

V. Kesimpulan
Pada praktikum ini diperoleh beberapa kesimpulan :
1. Dapat membuat desain sistem dengan beberapa alat bantu berupa
Flowchart system, DFD, rancangan basis data, rancangan user
interface sehingga memudahkan dalam pepmbuatan aplikasi
2. Pembuatan aplikasi persediaan barang menggunakan PHP Native kali
ini menghasilkan fitur laundry diantaranya tambah pesanan, tambah
member, transaksi, laporan
3. Dengan dibuatnya sistem informasi laundry ini memudahkan admin
untuk mendata laundryannya dan membuat laporan dengan mudah