15
1 LAPORAN TUGAS AKHIR RANCANG BANGUN APLIKASI PENJUALAN KNALPOT BERBASIS WEB (Design of Application Web Based for Exhaust Sales) Diajukan untuk memenuhi salah satu syarat memperoleh derajat Sarjana Komputer DEDI KRISTIANTO 1003040030 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH PURWOKERTO Februari , 2016

LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

Embed Size (px)

Citation preview

Page 1: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

1

LAPORAN TUGAS AKHIR

RANCANG BANGUN APLIKASI PENJUALAN KNALPOT BERBASIS WEB

(Design of Application Web Based for Exhaust Sales)

Diajukan untuk memenuhi salah satu syarat memperoleh derajat

Sarjana Komputer

DEDI KRISTIANTO

1003040030

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH PURWOKERTO

Februari , 2016

Page 2: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

2

HALAMAN PERSETUJUAN RANCANG BANGUN APLIKASI PENJUALAN KNALPOT BERBASIS WEB

(Design of Application Web Based for Exhaust Sales)

Diajukan Oleh:

DEDI KRISTIANTO 1003040030

TUGAS AKHIR Guna Memenuhi Persyaratan dalam Menyelesaikan Program Studi Strata -1 (S1)

pada Program Studi Teknik Informatika Fakultas Teknik

Universitas Muhammadiyah Purwokerto

Telah diperiksa dan diuji pada: Hari : ………

Tanggal : ……....

Pembimbing

Harjono, S.T, M.Eng. NIK. 2160389

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 3: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

3

HALAMAN PENGESAHAN LAPORAN TUGAS AKHIR

RANCANG BANGUN APLIKASI PENJUALAN KNALPOT BERBASIS WEB

DEDI KRISTIANTO 1003040030

Telah dipertahankan di depan Tim Penguji dalam ujian pendadaran

pada tanggal 17 Februari 2015

SUSUNAN TIM PENGUJI

Ketua

M. Taufiq Tamam, S.T., M.T. NIK. 2160223

Sekretaris

Harjono, S.T., M. Eng. NIK. 2160389

Penguji I

Sigit Sugiyanto, S.T., M.Eng.

NIK. 2160375

Penguji II

Hindayati Mustafidah, S.Si., M.Kom

NIK. 2160332

Pembimbing /Penguji III

Harjono, S.T., M.Eng NIK. 2160389

Mengetahui,

Dekan Fakultas Teknik,

M. Taufiq Tamam, S.T., M.T. NIK. 2160223

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 4: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

4

PERNYATAAN

Dengan ini saya menyatakan bahwa Laporan Tugas Akhir ini tidak terdapat karya

yang pernah diajukan untuk memperoleh gelar Sarjana Komputer di suatu Perguruan

Tinggi, dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang

pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara tertulis diacu dalam

naskah ini dan disebutkan dalam daftar pustaka.

Purwokerto, Februari 2016

Dedi Kristianto

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 5: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

5

HALAMAN PERSEMBAHAN

Dengan segala kerendahan hati, serta rasa syukur terhadap Allah SWT yang

telah memberikan rahmat dan nikmat-Nya, maka kupersembahkan Laporan Tugas Akhir

ini kepada :

1. Bapak dan ibu yang telah memberikan semangat dan bimbingan selama

saya kuliah sampai saat ini, terutama ibu yang selalu menasehati disetiap

langkah dan doa yang selalu mengiringi setiap perjalanan kuliah.

2. Teman – teman seperjuangan TI 10 kelas A, yang telah memberikan

suasana kekeluargaan yang sangat erat semoga persahabatan dan

persaudaraan kita tetap abadi.

3. Semua pihak yang telah membantu saya selama proses pembuatan Tugas

Akhir ini.

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 6: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

6

HALAMAN MOTTO

“ Hidup itu hanya sekali, manfaatkanlah sebaik baiknya…dan jangan

akhiri dengan percuma “.

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 7: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

7

KATA PENGANTAR

Puji syukur saya panjatkan kehadirat Allah SWT, karena atas berkat, rahmat dan

karunia-Nya saya dapat menyelesaikan Laporan Tugas Akhir ini yang berjudul

“RANCANG BANGUN APLIKASI IPENJUALAN KNALPOT BERBASIS WEB”

Penyusunan Laporan Tugas Akhir ini tidak terlepas dari bantuan berbagai pihak.

Karena itu pada kesempatan kali ini saya dengan segala kerendahan hati mengucapkan

terima kasih yang sebesar-besarnya kepada :

1. Harjono, S.T, M.Eng. selaku dosen pembimbing yang dengan segala kesabaran

dan keikhlasan membimbing dan mengarahkan saya dalam pembuatan Tugas

Akhir ini.

2. Kedua orang tua saya, adik - adik saya , serta teman – teman saya yang telah

menyemangati dan juga memberikan motivasi kepada saya.

Harapan saya semoga apa yang telah dikerjakan Tugas Akhir ini dapat

bermanfaat baik untuk diri saya sendiri maupun bagi seluruh pembaca dan

pengguna aplikasi ini . Amin.

Purwokerto, Februari 2016

Dedi Kristianto

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 8: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

8

DAFTAR ISI

HALAMAN JUDUL ......................................................................................................... i

HALAMAN PERSETUJUAN............................................................................................. ii

HALAMAN PENGESAHAN ............................................................................................. iii

PERNYATAAN ............................................................................................................... iv

HALAMAN PERSEMBAHAN........................................................................................... v

HALAMAN MOTTO ....................................................................................................... vi

KATA PENGANTAR........................................................................................................ vii

DAFTAR ISI.................................................................................................................... viii

DAFTAR GAMBAR ......................................................................................................... xi

DAFTAR TABEL ............................................................................................................. xiv

INTISARI ....................................................................................................................... xv

ABSTRACT .................................................................................................................... xvi

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

A. Latar Belakang ..................................................................................................... 1

B. Perumusan Masalah ............................................................................................ 2

C. Batasan Masalah ................................................................................................. 2

BAB II. KAJIAN PUSTAKA .............................................................................................. 3

A.Aplikasi ................................................................................................................. 3

B. JQuery Mobile ..................................................................................................... 3

C. Adobe Dreamweaver CS4..............................................................................3

D. Data Base ........................................................................................................... 3

D. MySql .................................................................................................................. 4

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 9: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

9

E. Personal Hypertext Preprocessor (PHP) ........................................................ 5

F. Hasil Penelitian Sejenis ........................................................................................ 6

BAB III. TUJUAN DAN MANFAAT .................................................................................. 7

A. Tujuan ................................................................................................................ 7

B. Manfaat .............................................................................................................. 7

BAB IV. METODE PENELITIAN ....................................................................................... 8

A. Jenis Penelitian ................................................................................................... 8

B. Metode Pengumpulan Data ................................................................................ 8

1. Observasi ................................................................................................... 8

2. Wawancara ................................................................................................ 8

D. Metode Pengembangan Sistem .......................................................................... 9

1. Analisis ....................................................................................................... 9

2. Desain ........................................................................................................ 10

3. Pengkodean ............................................................................................... 35

4.Pengujian ................................................................................................... 36

BAB V. HASIL DAN PEMBAHASAN ................................................................................ 37

A. Tujuan Pengeembangan Sistem .......................................................................... 37

B. Implementasi Aplikasi ......................................................................................... 37

C. Perhitungan ........................................................................................................ 51

D. Pengujian Aplikasi ............................................................................................... 52

BAB VI. PENUTUP ........................................................................................................ 54

A.Kesimpulan ......................................................................................................... 54

B. Saran .................................................................................................................. 54

Daftar Pustaka ............................................................................................................. 55

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 10: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

10

Lampiran........................................................................................................................56

DAFTAR GAMBAR

Gambar 1. Waterfall Model Pengembangan Sistem………………......................................... 9

Gambar 2. Use case Untuk Admin Dan Pembeli.……….................................................... 11

Gambar 3. Activity Diagram Pembelian knalpot…………………………………………………..........12

Gambar 4. Activity Diagram Admin Login …………………………………………………………………….13

Gambar 5. Activity Diagram Admin Input Data Knalpot ….……………………………………………13

Gambar 6. Activity Diagram Admin Edit Data knalpot.…………………………………………………14

Gambar 7. Activity Diagram Admin Menghapus Data Knalpot………………………………….. 15

Gambar 8. Activity Diagram Admin Tambah Kecamatan.………………….…………………………15

Gambar 9. Activity Diagram Admin Edit Kecamatan.…………………………………………………..16

Gambar 10. Activity Diagram Admin Delete Kecamatan.……………..……………………………..16

Gambar 11. Activity Diagram Admin Tambah Kategori.…………………..…………………………..17

Gambar 12. Activity Diagram Admin Edit Kategori….……………………………………….…………..17

Gambar 13. Activity Diagram Admin Hapus Kategori….………………………………………………..18

Gambar 14. Activity Diagram Admin Tambah Sub Kategori.………………………….…….……… 18

Gambar 15. Activity Diagram Admin Edit Sub Kategori………………….…………………………… 19

Gambar 16. Activity Diagram Admin Hapus Sub Kategori…………………………………………….19

Gambar 17.Relasi Database………………………………………………………………………………………….24

Gambar 18. Perancangan Aplikasi Menu Utama Pembeli…………………………………………….25

Gambar 19. Perancangan Aplikasi Menu Profil…………………………………………………………….26

Gambar 20. Perancangan Aplikasi Menu Barang………………………………………………………….27

Gambar 21. Perancangan Aplikasi Menu Barang………………………………………………………….28

Gambar 22. Perancangan Aplikasi Menu Konfirmasi…………………………………………………….29

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 11: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

11

Gambar 23. Perancangan Aplikasi Pendaftaran Baru…………………………………………………….30

Gambar 24. Perancangan Halaman Login………………….………………………………………………….30

Gambar 25. Perancangan Halaman Beranda…………………………………………………………………31

Gambar 26. Perancangan Halaman Ganti Pasword Admin…………………………………………..31

Gambar 27. Perancangan Halaman Data Kecamatan……………………………………………………32

Gambar 28. Perancangan Halaman Kategori……………......…………………………………………….32

Gambar 29. Perancangan Halaman Sub Kategori………………………………………………………….33

Gambar 30. Perancangan Halaman Barang…………………………………………………………………..33

Gambar 31. Perancangan Halaman Data Pelanggan……………………………………………………..33

Gambar 32. Perancangan Halaman Pemesanan Barang……………………………………………….34

Gambar 33. Perancangan Halaman Konfirmasi Transfer………………….………………………….34

Gambar 34. Perancangan Halaman Laporan…………………………………………………………………35

Gambar 35. Tampilan Halaman Home………………………………………………………………………….37

Gambar 36. Tampilan Halaman Profil…………………………………………………………………………..38

Gambar 37. Tampilan Halaman Barang………………………………………………………………………..38

Gambar 38. Tampilan Halaman Panduan……………………………………………………………………..39

Gambar 39. Tampilan Halaman Konfirmasi…………………………………………………………………..39

Gambar 40. Tampilan Pendaftaran……………………………………………………………………………….40

Gambar 41. Tampilan Keranjang Belanja………………………………………………………………………40

Gambar 42. Tampilan Tampil Transaksi………………………………………………………………………..41

Gambar 43. Tampilan Login Admin…………………………….…………………………………………………41

Gambar 44. Tampilan Home…………………………………………………………………………………………42

Gambar 45. Tampilan Kecamatan…………………………………………………………………………………43

Gambar 46. Tampilan Kategori……………………………………………………………………………………..43

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 12: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

12

Gambar 47. Tampilan Sub Kategori………………………………………………………………………………44

Gambar 48. Tampilan Barang……………………………………………………………………………………….44

Gambar 49. Tampilan Pelanggan…………………………………………………………………………………..45

Gambar 50. Tampilan Daftar Pemesanan……………………………………………………………………..45

Gambar 51. Tampilan Konfirmasi Transfer……………………………………………………………………46

Gambar 52. Tampilan Laporan………………………………………………………………………………………46

Gambar 53. Tampilan Laporan Kecamatan…………………………………………………………………..47

Gambar 54. Tampilan Laporan Kategori…………….…………………………………………………………47

Gambar 55. Tampilan Laporan Sub Kategori...................................................................48

Gambar 56. Tampilan Laporan Barang………………………………………………………………………….48

Gambar 57. Tampilan Laporan Pelanggan…………………………………………………………………….49

Gambar 58. Tampilan Laporan Pemesanan Masuk………………………………………………………49

Gambar 59. Tampilan Laporan Pemesanan Lunas Per Tanggal…………………………………….50

Gambar 60. Tampilan Laporan Pemesanan Lunas Per Periode…………………………………….50

Gambar 53.Contoh Cetak Lengkap Pemesanan Barang………………………………………………..51

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 13: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

13

DAFTAR TABEL

Tabel 1. Tabel Data Admin ............................................................................................ 20

Tabel 2. Tabel Data Barang ............................................................................................ 20

Tabel 3. Tabel Data Kategori……………….………………………………………………………………… 21

Tabel 4. Tabel Data Sub Kategori………………………………………………………………………………….21

Tabel 5. Tabel Data Kecamatan……………………………………………………………………………………21

Tabel 6. Tabel Data Konfirmasi……………………………………….……………………………………………22

Tabel 7. Tabel Data Pelanggan………………………………………….………………………………………….22

Tabel 8. Tabel Data Pemesanan…………………………………………………………………………………..23

Tabel 9. Tabel Data Pemesanan_item………………………………………………………………………….23

Tabel 10. Tabel Data Tmp_Keranjang…………………………………………………………………………..24

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 14: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

14

INTISARI

Perancangan web e-commerce pada penjualan komputer bertujuan untuk mempermudah masyarakat dalam memperoleh informasi perbelanjaan (online) yang sebelumnya diketahui dari mulut-kemulut atau pun dari brosur-brosur, sehingga tidak tidak menghemat waktu, disini saya mempermudah masyarakat dalam melakukan perbelanjaan secara (online), sehingga lebih efektif. Tugas akhir ini bertujuan membangun sebuah sistem penjualan online. Sistem perancangan dalam pembuatan website e-commerce pada penjualan knalpot ini dikembangkan dengan menggunakan beberapa software yakni Macromedia Dreamweaver , Wampp Server yang merupakan gabungan dari Apache Web Server, PHP dan MySQL. Dengan menggunakan Macromedia Dreamweaver maka pengerjaan website akan lebih cepat dan mudah. Hasil dari aplikasi ini adalah dapat mempercepat pemasaran knalpot, sekaligus dapat meningkatkan kualitas layanan kepada konsumen MMS knalpot.

Kata Kunci : Aplikasi, PHP, Penjualan

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016

Page 15: LAPORAN TUGAS AKHIR RANCANG BANGUN …repository.ump.ac.id/2053/1/Dedi Kristianto_JUDUL.pdfGambar 3. Activity Diagram Pembelian knalpot .....12 Gambar 4. Activity Diagram Admin Login

15

ABSTRACT

Web design e-commerce on the sale of the exhaust aims to facilitate the public in obtaining information on shopping (online) previously known from mouth to mouth or any of the brochures, so there does not save time, here I facilitate the public in doing shopping in (online) , so it can more effective. This final project aims to build an online sales system. System design in making e-commerce website in the sale of the exhaust was developed using some software that is Macromedia Dreamweaver, WAMPP Server which is a combination of the Apache Web Server, PHP and MySQL. By using Macromedia Dreamweaver website then progress will be faster and easier. The results of this application is that it can speed up the marketing of the exhaust, while increasing the quality of service to consumers MMS exhaust. Keywords : Application , PHP, Sales

Rancang Bangun Aplikasi…, Dedi Kristianto, Fakultas Teknik UMP, 2016