APLIKASI RENTAL ALAT MUSIK BERBASIS WEB LAPORAN TUGAS AKHIR PAULUS FEBRIAN LOUIS SEBASTIAN

(1)

APLIKASI RENTAL ALAT MUSIK BERBASIS WEB

LAPORAN TUGAS AKHIR

PAULUS FEBRIAN LOUIS SEBASTIAN 172406038

PROGRAM STUDI D-3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA MEDAN

2021

(2)

APLIKASI RENTAL ALAT MUSIK BERBASIS WEB

LAPORAN TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh gelar Ahli Madya

PAULUS FEBRIAN LOUIS SEBASTIAN 172406038

PROGRAM STUDI D-3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA MEDAN

2021

(3)

PERNYATAAN ORISINALITAS

APLIKASI RENTAL ALAT MUSIK BERBASIS WEB

LAPORAN TUGAS AKHIR

Saya menyatakan bahwa laporan tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Oktober 2021

Paulus Febrian Louis Sebastian 172406038

(4)

(5)

PENGHARGAAN

Segala puji dan syukur penulis panjatkan kehadirat Tuhan Yesus Kristus, karena atas berkat dan rahmat-Nya penulis dapat menyelesaikan tugas akhir yang berjudul Aplikasi Rental Alat Musik Berbasis Web ini.

Terimakasih penulis sampaikan kepada Bapak Drs. Rosman Siregar, M.Si selaku Pembimbing yang selalu memberi pengarahan dan bimbingan baik kritik dan saran kepada penulis selama penyusunan tugas akhir dari awal hingga selesai. Terimakasih kepada Ibu Dra. Normalina Napitupulu, M.Sc dan Ibu Asima Manurung, S.Si, M.Si selaku Ketua dan Sekretaris Program Studi D3 Teknik Informatika, kepada Bapak Dr. Suyanto M.Kom dan Bapak Drs.

Rosman Siregar, M.Si selaku Ketua dan Sekretaris Departemen Matematika, kepada Ibu Dr. Nursahara Pasaribu, M.Sc selaku Dekan FMIPA USU, seluruh, staf, pegawai, dosen, teman-teman kuliah Program Studi D3 Teknik Informatika dan orang-orang terdekat yang saya kenal dan saya kasihi. Tidak lupa, penulis juga mengucapkan terimakasih kepada orang tua penulis Ayahanda Pdt. Dian Susiarto dan Ibunda Ratna Marpaung. Dan semua pihak yang telah banyak membantu penulis dalam menyelesaikan Tugas Akhir ini yang tidak dapat disebutkan satu persatu.

Akhir kata penulis mengucapkan terima kasih, semoga Tuhan yang akan membalas semua kebaikan. Dan kiranya juga tugas akhir ini dapat memberi manfaat dan menambah wawasan maupun pengetahuan kita.

(6)

APLIKASI RENTAL ALAT MUSIK BERBASIS WEB

ABSTRAK

Pada saat ini perkembangan teknologi informasi dan komunikasi telah masuk ke dalam bidang seni dan hiburan khususnya di dalam industri musik. Dalam bidang industri musik dibutuhkan banyak hal pendukung untuk dapat melangsungkan suatu proyek atau acara. Salah satunya adalah ketersediaan peralatan musik. Untuk memudahkan beberapa acara serta pemusik, biasanya para perusahaan rental akan menjadi penyedia jasa untuk penyewaan alat-alat musik beserta perlengkapannya.

Tetapi yang sering menjadi kelemahan adalah pelanggan seringkali tidak merasa puas dengan kesediaan alat-alat, harga, bahkan efisiensi waktu untuk survey langsung ke toko sambil melihat barang yang akan disewa. Apalagi di masa pandemi saat ini, kita harus lebih sering mengurangi mobilitas dan kerumunan jika harus mencari barang secara langsung di toko. Oleh sebab itu, penulis mencoba mencari solusi untuk membuat sebuah Aplikasi Rental Alat Musik Berbasis Web. Pada website ini, kita dapat melihat secara langsung ketersediaan alat yang akan disewa, memilih barang yang paling cocok, serta melakukan transaksi tanpa harus datang ke toko.

Kata kunci : teknologi, musik, rental, seni, website

(7)

WEB-BASED MUSICAL INSTRUMENT RENTAL APPLICATION ABSTRACT

At this time the development of information and communication technology has entered the field of art and entertainment, especially in the music industry. In the field of the music industry, many things are needed to support a project or event. One of them is the availability of music equipment. To facilitate several events and musicians, usually rental companies will provide services for renting musical instruments and the equipment

But what is often a weakness is that customers are often not satisfied with the availability of tools, prices, and even time efficiency to survey directly to the store while looking at the goods to be rented. Especially during the current pandemic, we have to reduce mobility and crowds more often if we have to look for goods directly in stores. Therefore, the author tries to find a solution to create a Web-Based Musical Instrument Rental Application. On this website, we can see firsthand the availability of tools to be rented, choose the most suitable items, and make transactions without having to come to the store.

Keywords : technology, music, rental, art, websites

DAFTAR ISI

(8)

... Halaman

PERNYATAAN ...i

PENGESAHAN... ii

PENGHARGAAN... iii

ABSTRAK ...iv

ABSTRACT... v

DAFTAR ISI ...vi

DAFTAR TABEL viii

DAFTAR GAMBAR ...ix

BAB 1 PENDAHULUAN ... 1.1. Latar Belakang ... 1

1.2. Rumusan Masalah ... 2

1.3. Batasan Masalah ... 2

1.4. Tujuan Penelitian ... 2

1.5. Manfaat Penelitian ... 3

1.6. Sistematika Penelitian ... 33333dd3 BAB 2 LANDASAN TEORI ... 2.1. Web ... 5

2.1.1. Sejarah Web ... 5

2.1.2. Perkembangan Web ... 6

2.2. Sistem Informasi ... 9

2.3. Bahasa Pemrograman 10

2.3.1. PHP ... 10

2.3.2. CSS 11

2.4. Komponen Tambahan 12

2.4.1. XAMPP ... 12

2.4.2. Teks Editor ... 13

2.4.3. Browser 13

2.5. Database 14

2.5.1. MySQL ... 14

2.6. Flowchart 15

2.7. Data Flow Diagram ... 17

BAB 3 METODE PENELITIAN ... 3.1. Metode Penelitian ... 19

3.2. Analisa Sistem 3.2.1 Penyelesaian Masalah ... 20

3.3. Flowchart Sistem ... 22

3.3.1 Penyelesaian Masalah ... 22

BAB 4 IMPLEMENTASI SISTEM ...

(9)

4.1. Kebutuhan Sistem ... 26 4.1.1 Perangkat Keras (Hardware) ... 26 4.1.2 Perangkat Lunak (Software) ... 26

4.1.3 Pengguna (Brainware) 27

4.2. Implementasi Sistem ... 27

4.2.1 Tujuan Implementasi Sistem 27

4.2.2 Demonstrasi Sistem 28

BAB 5 PENUTUP ...

5.1. Kesimpulan ... 34 5.2. Saran ... 34

DAFTAR PUSTAKA

LAMPIRAN

DAFTAR TABEL

(10)

Nomor Judul ... Halaman Tabel

2.1. Tabel Flowchart ... 15 2.2. Simbol Data Flow Diagram ... 18

(11)

DAFTAR GAMBAR

Nomor Judul ... Halaman Gambar

3.1. Diagram Konteks ... 23

3.2. Flowchart Proses Keseluruhan Kerja Aplikasi ... 25

4.1. Beranda Tampilan 1 ... 29

4.5. Menu “Tentang Kami” ... 31

4.6. Menu “Daftar Alat” ... 31

4.7. Sub Menu “Detail Alat”... 32

4.8. Menu “FAQs” ... 32

4.9. Menu “Kontak Kami” ... 33

(12)

BAB 1 PENDAHULUAN

1.1. Latar Belakang

Teknologi informasi dan komunikasi telah lama dikenal dan digunakan di masyarakat. Masyarakat pada zaman sekarang berkeinginan untuk memperoleh segala sesuatu secara mudah. Website menjadi salah satu media untuk dapat mempermudah masyarakat mengakses berbagai hal untuk mempermudah kegiatan mereka.

Penulis memperhatikan pada saat ini perkembangan teknologi informasi dan komunikasi juga telah masuk ke dalam bidang seni dan hiburan khususnya di dalam industri musik. Dalam bidang industri musik dibutuhkan banyak hal pendukung untuk dapat melangsungkan suatu project atau event. Salah satunya adalah ketersediaan peralatan musik dan perlengkapannya.

Untuk memudahkan beberapa event dan juga pemusik, biasanya para perusahaan rental akan menjadi penyedia jasa untuk penyewaan alat-alat musik beserta perlengkapannya. Tetapi yang sering jadi kelemahan adalah pelanggan seringkali tidak merasa puas dengan kesediaan alat-alat, harga, bahkan efisiensi waktu untuk survey langsung ke toko sambil melihat barang yang akan disewa.

Oleh sebab itu, penulis mencoba mencari solusi untuk membuat sebuah Aplikasi Rental Alat Musik Berbasis Web. Pada website ini, kita dapat melihat secara langsung ketersediaan alat yang akan disewa, memilih barang yang paling cocok, serta melakukan transaksi tanpa harus datang ke toko. Hal ini tentunya akan memudahkan pelanggan untuk dapat lebih efisien dalam hal waktu serta kemudahan dalam akses dan transaksi.

(13)

1.2. Rumusan Masalah

Adapun rumusan masalah yang didapat dari latar belakang tersebut adalah : 1. Bagaimana merancang sebuah website yang efektif dan efisien untuk

memberikan kepuasan pelanggan untuk bertransaksi

2. Bagaimana merancang sebuah sistem yang dapat memudahkan admin dalam mengolah data

3. Bagaimana merancang sebuah website yang dapat memperbaharui data setiap ada informasi terbaru.

1.3. Batasan Masalah

Adapun batasan masalah yang didapat dari latar belakang tersebut adalah : 1. Aplikasi ini hanya terbatas hanya untuk memilih alat musik yang akan

disewakan. Transaksi dilakukan di luar aplikasi

2. Aplikasi ini hanya mencakup satu toko saja untuk melakukan proses rental 3. Aplikasi ini memerlukan konfirmasi admin dalam setiap transaksi

1.4. Tujuan Penelitian

Dalam penyusunan tugas akhir ini tujuan yang hendak di capai dalam website ini adalah :

1. Membuat website rental alat musik untuk memudahkan masyarakat dalam melakukan peminjaman alat musik dan perlengkapannya

2. Merancang sebuah sistem yang dapat memudahkan admin dalam memanajemen data.

3. Membangun budaya baru untuk melakukan transaksi rental secara daring

1.5. Manfaat Penelitian

Manfaat yang diperoleh dari website ini adalah :

1. Memberikan kepuasan kepada masyarakat dalam menyewa dan transaksi alat musik

2. Memberikan kemudahan kepada masyarakat untuk memilih barang sesuai kebutuhan

(14)

3. Membantu mempermudah pelaksanaan event musik dengan tersedianya alat musik yang memadai

1.6. Sistematika Penulisan

Agar dapat memberikan gambaran yang jelas pada penulisan tugas akhir ini, maka penulis membaginya dalam beberapa bab sebagai berikut:

BAB 1 : PENDAHULUAN

Bab ini menguraikan tentang latar belakang pembangunan aplikasi, perumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, metodologi penelitian, hingga sistematika penulisan tugas akhir ini.

BAB 2 : LANDASAN TEORI

Bab ini menguraikan tentang teori-teori dasar dalam pembangunan aplikasi android ini. Mulai dari pengertian android serta apa-apa saja yang dibutuhkan untuk memulai pemrograman mobile berbasis android pada penelitian ini.

BAB 3 : METODE PENELITIAN

Bab ini menjelaskan tentang tahap-tahap pembuatan tugas akhir mulai dari perancangan sampai pemeliharaan system, kemudian memasukkan metode yang digunakan serta penjelasan algoritma yang digunakan dalam system pada tugas akhir ini.

BAB 4 : IMPLEMENTASI

Bab ini menguraikan tentang bagaimana proses lanjutan dari perancangan sistem. Menguraikan secara detail bagian implementasi sistem dan melihat apakah implementasi sesuai dengan perancangan sistem.

(15)

BAB 5 : KESIMPULAN DAN SARAN

Bab ini menguraikan tentang kesimpulan dan saran yang dikutip oleh penulis selama proses pembangunan aplikasi.

(16)

BAB 2

LANDASAN TEORI

2.1. Web

Website, tentunya menjadi bentukan situs yang familiar di kalangan masyarakat masa kini. Menurut statistik pada tahun 2018, ada lebih dari 1,24 miliar situs web yang ada di seluruh dunia. Apalagi melihat bagaimana tingkat aktifitas masyarakat di dunia digital dari tahun ke tahun meningkat, pastinya bukan tidak mungkin situs web pasti akan meningkat juga dengan pesat.

Melihat hal ini, penulis pun mempertimbangkan bagaimana tugas akhir berjudul Aplikasi Rental Alat Musik ini dibuat berbasis website untuk kedepannya dapat mempermudah akses bagi masyarakat secara luas ketika telah dilengkapi domain.

Sebelum semakin dalam untuk membahas proyek ini, saya akan menjelaskan terlebih dahulu beberapa informasi umum mengenai website untuk menambah pengetahuan kita.

2.1.1. Sejarah Web

Website pertama kali ditemukan oleh Sir Timothy John, Tim Berners-Lee. Pada tahun 1991 website terhubung dengan jaringan.Tujuan dari dibuatnya website pada saat itu yakni untuk mempermudah tukar menukar dan memperbaharui informasi kepada sesama peneliti di tempat mereka bekerja. Dengan demikian pengertian website saat itu masih sebatas tukar menukar informasi, bukan pengertian website secara terminologi.

Website dipublikasikan ke publik setelah adanya pengumuman dari CERN pada tanggal 30 april 1993. CERN menyatakan bahwa website dapat digunakan secara gratis oleh semua orang. Pada saat ini pengertian website sudah masuk ke dalam ranah publik karena sudah bisa digunakan oleh semua orang dimanapun dan kapanpun.

Secara terminologi, website merupakan suatu kumpulan dari halaman-halaman situs, dan terangkum dalam domain atau subdomain. Website ini berada di dalam

(17)

World Wide Web atau biasa disebut sebagai WWW di internet. Lazimnya publikasi dari web-web tersebut akan membentuk sebuah jaringan informasi berskala besar.

Selain itu, website adalah halaman informasi yang ditawarkan melalui internet sehingga dapat diakses oleh pengguna di seluruh dunia. Website juga termasuk komponen yang tersusun atas teks, gambar, dan suara animasi sebagai media.

2.1.2. Perkembangan Web

Sejak web ditemukan tahun 1990, Web semakin populer dan menjadi layanan internet dengan pengguna terbanyak. Sebagian pengguna internet bahkan mengira kalau Web adalah satu satunya layanan di internet. Teknologi Web pun terus bergulir dari era web 1.0, web 2.0 dan trend menuju web 3.0. Sayangnya, ciri ciri antara versi web 1.0,sampai 3.0 tidak ada kata sepakat antar para pakar. Namun demikian, bukan berarti kita tidak tahu polanya. Berikut ini adalah pola dari masing masing versi web menurut beberapa sumber yang saya baca.

1. Web 1.0

Web 1.0 dimulai sejak web era 90an. Ciri utama dari era ini adalah informasi yang bersifat statis.

Ciri - ciri dari web 1.0

a. Website umumnya bersifat static yang jarang berubah atau sama sekali tidak berubah.

b. Website umumnya tidak interaktif.

c. Umumnya teknologi yang dipakai adalah teknologi tertutup.

d. Kebanyakan desain webnya menggunakan Frame.

e. Tampilan kombinasi warna dan textnya terlihat norak karena hanya terbatas pada 16 warna dan 6 jenis font.

f. Informasi yang ada umumnya berupa berita text dan gambar.

Teknologi web 1.0

a. HTML dasar, CSS dasar dan Javascript.

b. Flash dan Java applet.

c. Browser populer adalah Netscape dan Internet Explorer.

(18)

d. Koneksi internet masih dial up maximal 56kbps.

2. Web 2.0

Web 2.0 dimulai sejak era 2005 sampai sekarang, Ciri khas dari era ini adalah user generated content dan jejaring sosial.

Ciri dari web 2.0

a. Website bersifat dinamis dan interaktif dengan adanya teknologi AJAX.

b. User bukan hanya sebagai konsumen tetapi juga sebagai produsen informasi dalam istilah populer adalah user generated content(contoh youtube atau wikipedia).

c. Teknologi yang dipakai umumnya open source.

d. Desain web menggunakan CSS layout.

e. Informasi terdiri dari text, gambar, audio, video dan animasi.

f. Web sebagai media berkomunikasi dan berkolaborasi.

g. Jejaring social mendominasi di era ini.

h. Munculnya startup.

i. Munculnya jenis website seperti microbloging, photo dan video sharing, online bookmarking, blog dan jejaring social.

Teknologi di Web 2.0

a. Ajax dan jQuery serta Javascript library mendominasi.

b. Meningkatnya penggunaan HTML5 dan makin menurunnya pengguna Flash.

c. Mobile Web dan Responsive web design.

d. XML dan JSON untuk pertukaran data.Web API dan Mashup (Mashup adalah istilah menggabungkan beberapa layanan menjadi satu, contoh menampilkan tweet di Google maps).\Browser yang popular adalah Chrome,safari dan Firefox.

e. koneksi internet menggunakan broadband (>1MB/s).

f. Android dan iOS mendominasi pengguna mobile web.

3. Web 3.0

(19)

Web 3.0 adalah generasi selanjutnya dari teknologi web. Ciri dari web 3.0 ada pada akses mobile, Semantic web dan personalifikasi. Beberapa website yang dianggap merupakan cikal bakal dari web 3.0 adalah Instagram. Instagram disebut sebut sebagai awal dari generasi web 3.0 karena layanan ini hanya tersedia lewat mobile Device.

Ciri ciri Web 3.0

a. Integrasi web kedalam produk Rumah tangga seperti TV, Kulkas atau Jendala pintar atau home entertainment contoh produk ini adalah Smart windows dari samsung atau Google Nexus Q .

b. Semantic Web, Contoh dari penggunaan dari semantic web adalah Knowledge graph di Google Search.

c. Natural language prosesing. Perintah menggunakan suara. Contohnya adalah Siri, Voice Action Android atau Voice search di Google.

d. Location based service dan personifikasi informasi. Web tidak lagi memberikan informasi, namun solusi. Contoh layanan ini adalah Layar dan Google Now.

e. Komputer (dan web) yang bisa dipakai , Contoh dari produk ini adalah Google glass.

Teknologi web 3.0

Untuk teknologi yang mendominasi web 3.0 adalah sbb : a. Semantic Web (Contoh knowledge graph).

b. Artificial Intelegence (Siri).

c. Realtime comunication & colaboration (Google docs, Google Wave).

d. Augment Reality (Layar, aplikasi di android).

e. Computer generated Information (Contoh Wolfram Alpha).

f. HTML5 dan Cloud teknologi.

2.2. Sistem Informasi

(20)

Para ahli memiliki pendapat yang berbeda dalam menanggapi pengertian sistem informasi. Berikut beberapa pengertian menurut para ahli :

1. Mc Leod

Pengertian sistem informasi menurut Mc Leod adalah suatu sistem yang memiliki kemampuan untuk mengumpulkan informasi dari semua sumber dan menggunakan berbagai media untuk menampilkan informasi.

2. Erwan Arbie

Erwan Arbie berpendapat bahwa pengertian sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, bantuan, dan dukungan operasi. Sistem ini bersifat manajerial dari suatu organisasi dan membantu memfasilitasi penyediaan laporan yang diperlukan.

3. O’Brien

O’Brien menyatakan bahwa pengertian sistem informasi merupakan kombinasi dari setiap unit yang dikelola orang-orang, hardware (perangkat keras), software (perangkat lunak), jaringan komputer, serta jaringan komunikasi data (komunikasi), dan database (basis data) yang mengumpulkan, mengubah, dan menyebarkan informasi tentang bentuk organisasi.

4. John F Nash

Menurut John F Nash, pengertian sistem informasi merupakan kombinasi dari manusia, fasilitas atau alat teknologi, media, prosedur, dan pengendalian yang ditujukan untuk mengatur jaringan komunikasi yang penting, proses transaksi tertentu dan rutin, membantu manajemen dan pemakai intern dan ekstern, dan menyediakan dasar untuk pengambilan keputusan yang tepat.

5. Alter

Sedangkan Alter memiliki pendapat tersendiri, pengertian sistem informasi ialah sebagai tipe khusus dari sistem kerja dimana manusia dan atau mesin melakukan pekerjaan dengan menggunakan sumber daya untuk memproduksi produk tertentu dan atau jasa bagi pelanggan.

Jadi, dapat disimpulkan bahwa, Sistem informasi merupakan sistem yang menyediakan informasi untuk manajemen dalam mengambil keputusan dan juga untuk

(21)

menjalankan operasional perusahaan. Sistem tersebut merupakan kombinasi dari orang-orang, teknologi informasi, dan prosedur-prosedur yang tergorganisasi.

2.3. Bahasa Pemrograman

Untuk mengetahui pengertian bahasa pemograman, kita harus memahami terlebih dahulu mengenai pemrograman. Pemograman merupakan aktivitas pembuatan program. Sedang program adalah instruksi tertulis yang membuat komputer dapat beroperasi.

Tanpa adanya program, mustahil komputer bisa digunakan. Pembuat program memberi perintah pada komputer dalam bentuk bahasa pemograman. Kemudian peranti tertentu pada komputer menerjemahkannya sehingga program tersebut bisa berjalan.

Dari sini, bisa disimpulkan bahwa bahasa pemograman adalah sebuah sistem komunikasi yang digunakan untuk memberi perintah pada perangkat komputer agar menjalankan fungsi tertentu yang spesifik. Bahasa pemograman terdiri dari serangkaian aturan sintaks dan semantik yang digunakan untuk mendefinisikan program komputer. Sistemnya terdiri dari beberapa tingkatan untuk memberi perintah pada setiap peranti, utilitas, dan aplikasi yang dipakai dalam pengoperasian komputer.

2.3.1 PHP

PHP adalah bahasa scripting server-side, Bahasa pemrograman yang digunakan untuk mengembangkan situs web statis atau situs web dinamis atau aplikasi Web. PHP singkatan dari Hypertext Pre-processor, yang sebelumnya disebut Personal Home Pages.

Script sendiri merupakan sekumpulan instruksi pemrograman yang ditafsirkan pada saat runtime. Sedangkan Bahasa scripting adalah bahasa yang menafsirkan skrip saat runtime. Dan biasanya tertanam ke dalam lingkungan perangkat lunak lain.

Karena php merupakan scripting server-side maka jenis bahasa pemrograman ini nantinya script/program tersebut akan dijalankan/diproses oleh server. Berbeda dengan javascript yang client-side.

(22)

PHP adalah bahasa pemrograman umum yang berarti php dapat disematkan ke dalam kode HTML, atau dapat digunakan dalam kombinasi dengan berbagai sistem templat web, sistem manajemen konten web, dan kerangka kerja web.

2.3.2. CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Menurut BPTIK (Badan Pengembangan Teknologi Informasi dan Komunikasi) CSS adalah sebuah pemrogaman atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam. Cascading Style Sheet (CSS) sudah didukung oleh hamper semua web browser karena CSS telah distandarkan oleh World Wide Web Consortium (W3C).

Ada 4 cara memasang kode CSS ke dalam kode HTML/halaman web, yaitu : 1. Inline style sheet (Memasukkan kode CSS langsung pada tag HTML).

2. Internal style sheet (Embed atau memasang kode CSS ke dalam bagian <head>).

3. Me-link ke external CSS.

4. Import CSS file.

Untuk saat ini terdapat 3 versi CSS, yaitu CSS1, CSS2, CSS3. CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti multiple background, border- radius, drop-shadow, border-images, CSS Math, dan CSS Objek Model.

2.4. Komponen Tambahan

Di dalam perancangan website, diperlukan beberapa aplikasi tambahan yang berfungsi untuk jalannya website secara maksimal di luar bahasa pemrograman serta

(23)

tampilan. Xampp, Teks Editor dan Browser merupakan komponen pendukung yang juga menjadi kunci sebuah website dapat berjalan dengan baik.

2.4.1 XAMPP

XAMPP adalah sebuah paket perangkat lunak (software) komputer yang sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) / MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat pada awal kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS Windows, Mac OS, dan juga Solaris.

Sejarah mencatat, software XAMPP pertama kali dikembangkan oleh tim proyek bernama Apache Friends dan sampai saat ini sudah masuk dalam rilis versi 7.3.9 yang bisa didapatkan secara gratis dengan label GNU (General Public License).

Jika dijabarkan secara gamblang, masing-masing huruf yang ada di dalam nama XAMPP menurut para ahli memiliki arti sebagai berikut ini :

1. X = Cross Platform

Merupakan kode penanda untuk software cross platform atau yang bisa berjalan di banyak sistem operasi. Jadi, ada XAMPP untuk Windows, xampp for mac, dan untuk Linux. Semua itu bersifat free download xampp.

2. A = Apache

Apache adalah aplikasi web server yang bersifat gratis dan bisa dikembangkan oleh banyak orang (open source).

3. M = MySQL / MariaDB

MySQL atau MariaDB merupakan aplikasi database server yang dikembangkan oleh orang yang sama. MySQL berperan dalam mengolah, mengedit, dan menghapus daftar melalui database.

4. P = PHP

Huruf “P” yang pertama dari akronim kata XAMPP adalah inisial untuk menunjukkan eksistensi bahasa pemrograman PHP. Bahasa pemrograman ini

(24)

biasanya digunakan untuk membuat website dinamis, contohnya dalam website berbasis CMS WordPress.

5. P = Perl

Sementara itu, untuk huruf P selanjutnya merupakan singkatan dari bahasa pemrograman Perl yang kerap digunakan untuk memenuhi berbagai macam kebutuhan. Perl ini bisa berjalan di dalam banyak sistem operasi sehingga sangat fleksibel dan banyak digunakan.

2.4.2 Teks Editor

Teks Editor adalah suatu software aplikasi atau suatu program komputer yang memungkinkan Anda sebagai penggunanya untuk membuat, mengubah atau mengedit file teks yang ada berupa plain text.

Text editor ini sebenarnya bisa digunakan untuk membuat program-program komputer dan mengedit source code dari bahasa pemograman. Selain itu, text editor juga bisa dimanfaatkan untuk membuat halaman web atau template web design dan juga membuat aplikasi tertentu.

Text Editor memiliki fitur-fitur yang sangat kecil dan sederhana. Namun ada juga yang kini sudah menawarkan fungsi yang luas dan kompleks. Apa saja contohnya? Unix dan Linux adalah contohnya. Dalam sistem operasinya sudah tersedia Editor VI (atau varian), tapi banyak juga yang mencakup editor Emacs.

Sementara sistem operasi dari Windows itu sendiri menyediakan Notepad standar.

Walaupun sudah tersedia secara bawaan, banyak programmer lebih menyukai software lainnya yang memang fiturnya lebih banyak atau lengkap.

2.4.3 Browser

Browser adalah salah satu jenis perangkat lunak (software) yang umumnya digunakan untuk membuka halaman website di internet. Browser disebut juga dengan peramban web dan web browser. Secara fundamental browser mempunyai kemampuan untuk menampilkan kode semantik (bahasa pemrograman) halaman website seperti; HTML, CSS, Js, dan lainnya menjadi halaman yang dimengerti oleh semua orang. Browser yang populer digunakan saat ini adalah Google Chrome dan Mozilla Firefox.

(25)

2.5. Database

Database atau basis data dapat didefinisikan atau diartikan sebagai kumpulan data yang disimpan secara sistematis di dalam komputer yang dapat diolah atau dimanipulasi menggunakan perangkat lunak (software) program atau aplikasi untuk menghasilkan informasi. Pendefinisian basis data meliputi spesifikasi berupa tipe data, struktur data dan juga batasan-batasan pada data yang kemudian disimpan.

Basis data merupakan aspek yang sangat penting dalam sistem informasi karena berfungsi sebagai gudang penyimpanan data untuk diolah lebih lanjut. Basis data menjadi penting karena dapat mengorganisasi data, menghidari duplikasi data, menghindari hubungan antar data yang tidak jelas dan juga update yang rumit.

Proses memasukkan dan mengambil data ke dan dari media penyimpanan data memerlukan perangkat lunak yang disebut dengan sistem manajemen basis data (database management system | DBMS). DBMS merupakan sistem perangkat lunak yang memungkinkan pengguna basis data (database user) untuk memelihara, mengontrol dan juga mengakses data secara praktis dan efisien.

Dengan kata lain, semua akses ke basis data akan ditangani oleh DBMS. DBMS ini menjadi lapisan yang menghubungkan basis data dengan program aplikasi untuk memastikan bahwa basis data tetap terorganisasi secara konsisten dan dapat diakses dengan mudah.

2.5.1. MySQL

MySQL adalah sebuah database management system (manajemen basis data) menggunakan perintah dasar SQL (Structured Query Language) yang cukup terkenal.

Database management system (DBMS) MySQL multi pengguna dan multi alur ini sudah dipakai lebih dari 6 juta pengguna di seluruh dunia.

MySQL adalah DBMS yang open source dengan dua bentuk lisensi, yaitu Free Software (perangkat lunak bebas) dan Shareware (perangkat lunak berpemilik yang penggunaannya terbatas). Jadi MySQL adalah database server yang gratis dengan lisensi GNU General Public License (GPL) sehingga dapat Anda pakai untuk keperluan pribadi atau komersil tanpa harus membayar lisensi yang ada.

(26)

Seperti yang sudah disinggung di atas, MySQL masuk ke dalam jenis RDBMS (Relational Database Management System). Maka dari itu, istilah semacam baris, kolom, tabel, dipakai pada MySQL. Contohnya di dalam MySQL sebuah database terdapat satu atau beberapa tabel.

SQL sendiri merupakan suatu bahasa yang dipakai di dalam pengambilan data pada relational database atau database yang terstruktur. Jadi MySQL adalah database management system yang menggunakan bahasa SQL sebagai bahasa penghubung antara perangkat lunak aplikasi dengan database server.

2.6. Flowchart

Flowchart (diagram alir) adalah sebuah diagram yang merepresentasikan sebuah algoritma atau proses menggunakan beberapa bangun geometri untuk memperlihatkan langkah-langkah yang dilakukan oleh program dalam menyelesaikan masalah. Berikut ini adalah simbol-simbol standar pada sebuah flowchart beserta fungsinya.

Tabel 2.1. Simbol Flowchart

No Nama Simbol Fungsi

1 Terminator

Digunakan untuk mewakili simbol start atau

end.

2 Arrow Menunjukkan alur proses.

3 Rectangle Menunjukkan langkah

pemrosesan.

4 Trapezium Simbol untuk input-

output.

5 Document Digunakan untuk

mewakili output.

(27)

6 Decision

Simbol yang berfungsi untuk menyatakan

keputusan.

7 Preparation

Simbol yang berfungsi untuk proses inisialisasi

atau pemberian harga awal.

8 Connector

Simbol untuk keluar- masuk atau penyambungan proses

pada halaman yang berbeda.

9 Manual Input

Simbol untuk pemasukkan data secara manual

melalui keyboard.

Tabel 2.1. Lanjutan

10 Predefine Process

Simbol untuk pelaksanaan suatu bagian (sub-

prosedur)

11 Display

Simbol yang menyatakan peralatan output yang digunakan seperti layar,

printer, plotter, dan sebagainya.

12 Magnetic Disk

Simbol yang digunakan untuk penyimpanan data

ke database.

13 Storage Data

Simbol yang menyatakan input yang berasal dari

disk atau disimpan ke disk.

(28)

2.7. Data Flow Diagram

Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna ataupun ke pembuat program.

Didalam DFD terdapat tiga level, yaitu : 1. Diagram Konteks (DFD Level 0)

Diagram konteks menggambarkan satu lingkaran besar yang dapat mewakili seluruh proses yang terdapat dalam suatu sistem. Diagram konteks merupakan tingkatan tertinggi dalam Data Flow Diagram dan biasanya diberi penomoran nol. Semua entitas eksternal ditunjukkan dalam diagram konteks beserta dengan aliran-aliran data utama, baik dari dan menuju sistem.

2. Diagram Nol (DFD Level 1)

Diagram nol merupakan satu lingkaran besar yang mewakili lingkaran-lingkaran kecil yang ada pada diagram konteks. Dengan kata lain diagram nol merupakan pemecahan dari diagram konteks.

3. Diagram Rinci

Lebih rinci lagi, diagram rinci adalah diagram yang menguraikan proses-proses yang terdapat di dalam diagram nol.

Berikut merupakan simbol-simbol standar menurut Yourdan dan DeMarco yang digunakan untuk membuat sebuah Data Flow Diagram.

Tabel 2.2. Simbol Data Flow Diagram

(29)

1 Kesatuan Luar

Sebagai kesatuan (entitas) di lingkungan luar sistem yang dapat

berupa orang, organisasi, sumber asli transaksi, atau penerima

akhir.

2 Arus Data

Berfungsi untuk menghubungkan antara

proses, simpanan data, dan kesatuan luar.

3 Proses

Berupa kegiatan atau proses yang sedang

dilakukan.

4 Simpanan Data Menunjukkan informasi

yang tersimpan.

BAB 3

METODE PENELITIAN

Nama data store

(30)

3.1. Metode Penelitian

Dalam menyusun tugas akhir ini penulis melakukan penerapan metode penelitian dalam memperoleh data-data yang dibutuhkan sehingga penyusunan tugas akhir ini dapat diselesaikan dengan baik. Adapun metode penelitian yang dilakukan adalah sebagai berikut:

1. Pengumpulan Data

Pengumpulan data-data yang erat kaitannya dengan permasalahan yang terjadi diatas, dalam hal ini penulis melakukan dengan cara mencari informasi online dan membaca bahan-bahan dari sumber lainnya untuk mendapatkan data perusahaan rental alat musik serta daftar alat-alat musik

2. Identifikasi Masalah

Identifikasi masalah dilakukan dengan melihat dari data-data yang sudah terkumpul lalu mengangkatnya menjadi sebuah solusi yang telah dijadikan sebuah judul.

Dalam hal ini penulis melihat bagaimana perusahaan rental musik melakukan jasa penyewaan barang serta transaksi tetapi masih dengan cara konvensional, di mana pelanggan harus tetap ke toko untuk meninjau dan melakukan pemesanan.

3. Perancangan Website

Perancangan aplikasi yaitu melakukan desain tampilan dan koding untuk Aplikasi Rental Alat Musik Berbasis Web. Di sini penulis mengatur tata letak dari setiap komponen di dalam website agar tampak user friendly sehingga menarik serta mudah untuk diakses. Proses peng-kodingan juga dilakukan bertahap diawali dari bagian paling simple sampai yang kompleks.

4. Pengujian

Pengujian dari perancangan Aplikasi Rental Alat Musik Berbasis Web dilakukan setelah website selesai dibentuk. Pengujian ini dilakukan dengan tujuan untuk mengetahui apakah website sudah berjalan dengan baik atau masih ada kesalahan.

Tentunya, pada awalnya pengujian tidak langsung berjalan mulus. Ada beberapa error yang masih dan terus terjadi sampai berkali-kali sampai akhirnya sampai kepada tahap akhir untuk menyempurnakan segala sesuatu yang masih kurang.

5. Penyusunan Laporan

(31)

Di tahap ini dilakukan pembuatan laporan dari Aplikasi Rental Alat Musik Berbasis Web berupa tugas akhir. Di dalam laporan ini akan dijelaskan mengenai apa saja yang dilakukan dan dibutuhkan di dalam pembuatan Aplikasi Rental Alat Musik Berbasis Web ini.

3.2. Analisa Sistem

Perkembangan teknologi informasi semakin hari semakin pesat dan memberikan banyak manfaat bagi manusia di berbagai aspek kehidupan. Website masih menjadi salah satu cara untuk manusia untuk membantu mereka dalam bisnis dan pekerjaan.

Saat ini website turut membantu banyak pada peradaban manusia. Semakin mudah mengakses sesuatu tentunya menjadi tujuan utama bagi perkembangan di bidang informasi dan komunikasi. Tentunya hal ini merambah berbagai aspek kehidupan juga salah satunya dalam bidang musik.

Musik selain menjadi sarana hiburan juga menjadi sebuah unsur yang menghasilkan keuntungan. Banyak orang yang saat ini membutuhkan jasa musik di berbagai acara dan kegiatan yang tentunya membutuhkan para pemain musik dan juga alat. Alat musik juga masih cenderung menjadi barang yang cukup mahal untuk dimiliki. Oleh sebab itu terkadang banyak pemusik atau pemilik acara menggunakan jasa rental alat musik untuk mempermudah acara mereka.

3.2.1. Penyelesaian Masalah

Website rental alat musik ini tentunya akan sangat membantu untuk mendapatkan informasi mengenai banyak daftar alat musik yang tersedia untuk bisa di sewa dan dipakai. Karena dengan website ini, setiap orang dapat dengan mudah mencari jenis alat musik, merk dan harga yang sesuai dengan waktu yang efektif dan efisien.

Maka hal pertama yang harus dilakukan adalah menganalisis kebutuhan sistem yang akan dibangun, baik kebutuhan fungsionalnya maupun lainnya. Analisis mengenai tujuan, identifikasi, batasan, dan kebutuhan website rental alat musik akan dijelaskan sebagai berikut:

1. Tujuan Sistem

(32)

Sistem ini bertujuan untuk memudahkan para pengguna sistem untuk bisa melihat, mencari, serta memilih alat-alat musik yang tepat dan diinginkan sesuai kebutuhan.

Selain itu, dengan adanya website ini bisa memudahkan pelanggan untuk memilih yang terbaik tanpa harus datang ke toko sehingga dapat memberi efisiensi waktu.

2. Identifikasi Sistem

Sistem yang akan dibangun memiliki kemampuan-kemampuan sebagai berikut:

a. Dapat memberikan informasi mengenai daftar jenis alat musik, merk, beserta harganya

b. Dapat melakukan pencarian daftar alat musik untuk mempermudah pengguna.

c. Penambahan, penghapusan, dan perubahan data dilakukan oleh admin

3. Batasan Sistem

Sistem memiliki batasan-batasan sebagai berikut:

a. Website ini hanya menyediakan alat musik untuk rental bukan untuk dijual b. Website ini dapat membantu pengguna untuk mencari barang yang dibutuhkan,

tetapi transaksi dilakukan di luar website

c. Pengguna tidak bisa menyarankan suatu jenis alat musik kepada penyedia jasa untuk menyewakan alat tersebut

4. Kebutuhan fungsional system

Berdasarkan kebutuhan sistem secara umum, website yang akan dibangun harus memenuhi kebutuhan-kebutuhan sebagai berikut:

a. Mampu memberikan informasi mengenai daftar alat musik yang tersedia di toko b. Mampu memberikan informasi mengenai harga sewa untuk menjadi

pertimbangan pelanggan

c. Mampu memberikan kesan yang nyaman untuk pengguna dalam menggunakan website

3.3. Perancangan sistem

Tujuan utama dari perancangan sistem adalah memberikan gambaran perancangan sistem yang akan dibangun atau dikembangkan, serta untuk memahami alur informasi

(33)

dan proses dalam sistem. Perancangan sistem yang akan dibangun atau dikembangkan adalah perancangan Aplikasi Rental Alat Musik Berbasis Web. Berikut telah ditentukan tahapan-tahapan atau langkah-langkah yang akan dilakukan dalam perancangan sistem :

a. Rancangan Proses

b. Rancangan Basis Data (Database) c. Rancangan Antar Muka (User Interface)

3.3.1. Rancangan Proses

Perancangan proses pada pembangunan atau pengembangan sistem ini meliputi diagram konteks, algoritma, dan flowchart.

1. Diagram Konteks

Diagram Konteks adalah sebuah bagian level dari Data Flow Diagram yang digunakan untuk menetapkan konteks serta batasan batasan sistem pada sebuah pemodelan. hal ini termasuk hubungan dengan entitas entitas diluar system itu sendiri, seperti sistem, kelompok organisasi, penyimpanan data eksternal lain.

(34)

Gambar 3.1. Diagram Konteks

2. Algoritma

a. Algoritma adalah langkah-langkah yang ditulis secara berurutan untuk menyelesaikan masalah pemrograman komputer. Algoritma proses kerja keseluruhan pada Aplikasi Rental Alat Musik Berbasis Web adalah sebagai berikut :

Langkah 1 : Mulai

Langkah 2 : Masuk ke Website Rental Alat Musik

Langkah 3 : Pilih menu yang terdapat pada Website Rental Alat Musik Langkah 4 : Masuk ke menu pilihan

Langkah 5 : Melakukan proses sesuai dengan pilihan Langkah 6 : Keluar dari menu pilihan

Langkah 7 : Keluar dari Website Rental Alat Musik Langkah 8 : Selesai

b. Algoritma proses kerja pemilihan menu “Tentang Kami” pada Website Rental Alat Musik adalah sebagai berikut :

Langkah 1 : Mulai

Langkah 2 : Masuk ke menu “Tentang Kami” pada Website Rental Alat Musik

Langkah 3 : Pelanggan dapat membaca terlebih dahulu deskripsi toko

(35)

Langkah 4 : Keluar dari menu “Tentang Kami”

c. Algoritma proses kerja pemilihan menu “Daftar Alat” pada Website Rental Alat Musik adalah sebagai berikut :

Langkah 1 : Mulai

Langkah 2 : Masuk ke menu “Daftar Alat” pada Website Rental Alat Musik Langkah 3 : Memilih alat musik sesuai dengan pilihan dan melanjutkan

Proses

Langkah 4 : Keluar dari menu “Daftar Alat”

d. Algoritma proses kerja pemilihan menu “FAQs” pada Website Rental Alat Musik adalah sebagai berikut:

Langkah 1 : Mulai

Langkah 2 : Masuk ke menu “FAQs” pada Website Rental Alat Musik Langkah 3 : Membaca daftar FAQs

Langkah 4 : Keluar dari menu “FAQs”

e. Algoritma proses kerja pemilihan menu “Kontak Kami” pada Website Rental Alat Musik adalah sebagai berikut:

Langkah 1 : Mulai

Langkah 2 : Masuk ke menu “Kontak Kami” pada Website Rental Alat Musik

Langkah 3 : Mengisi formulir dan klik kirim pesan Langkah 4 : Keluar dari menu “Kontak Kami”

(36)

3. Flowchart

Flowchart (diagram alir) adalah adalah suatu bagan dengan simbol-simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses (instruksi) dengan proses lainnya dalam suatu program. Berikut merupakan flowchart pada perancangan sistem Aplikasi Rental Alat Musik Berbasis Web.

Gambar 3.2. Flowchart Proses Keseluruhan Kerja Aplikasi

(37)

BAB 4

IMPLEMENTASI SISTEM

4.1. Kebutuhan Sistem

Dalam pengimplementasian sistem terdapat beberapa komponen penting agar aplikasi yang dibangun dapat berjalan dengan baik. Berikut beberapa komponen yang dibutuhkan.

4.1.1. Perangkat Keras (Hardware)

Adapun perangkat keras (hardware) yang dibutuhkan untuk membuat Aplikasi Rental Alat Musik Berbasis Web adalah komputer. Komputer digunakan sebagai media untuk membangun sistem website yang akan dibuat. Selain itu komputer juga digunakan untuk menjalankan website yang sudah dibuat.

4.1.2. Perangkat Lunak (Software)

Perangkat lunak adalah data yang diformat, dan disimpan secara digital, termasuk program komputer, dokumentasinya, dan berbagai informasi yang bisa dibaca, dan ditulis oleh komputer. Dengan kata lain, bagian sistem komputer yang tidak berwujud atau sekumpulan instruksi yang memungkinkan perangkat keras untuk dapat memproses data. Perangkat lunak ini tidak berbentuk fisik, melainkan berupa program yang diciptakan melalui perangkat elektronik.

Dalam perangkat lunak dikenal dengan apa yang disebut sistem operasi dan program aplikasi. Penulis mengembangkan bagian perangkat lunak berupa aplikasi berbasis web.

(38)

Perangkat lunak yang digunakan dalam perencanaan hingga implementasi sistem adalah :

1. Sublime Text 3 sebagai tools pembuat kodingan 2. Xampp Database sebagai basis data

3. Google Chrome Browser sebagai peluncur website

4. Windows 10 Home Single Language sebagai sistem operasi

4.1.3.Pengguna (Brainware)

Brainware adalah istilah yang digunakan untuk manusia yang digunakan untuk manusia yang berhubungan dengan sistem komputer. Manusia merupakan suatu elemen dari sistem komputer yang merancang bagaimana suatu mesin dapat bekerja sesuai dengan hasil yang diinginkan. Tingkatan brainware terdiri atas system analyst, programmer, administrator, dan operator.

Brainware termasuk bagian penting dari sebuah sistem komputer.

Karena sebuah sistem tidak akan berjalan apabila tidak ada peran brainware.

Dalam sistem yang dibangun ini, para pelanggan atau customer yang hendak menyewa alat musik, mereka yang mengambil peran sebagai brainware.

4.2. Implementasi Sistem

Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk menginstal, menguji dan memulai sistem baru atau sistem yang diperbaiki.

Implementasi sistem bertujuan untuk menciptakan sistem baru maupun mengganti sistem yang telah ada.

4.2.1. Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah sebagai berikut:

1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.

2. Memastikan bahwa pemakai user dapat mengoperasikan sistem baru 3. Menguji apakah sistem baru tersebut sesuai dengan pemakai.

(39)

4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat rencana, mengontrol dan melakukan instalasi baru secara benar.

4.2.2. Demonstrasi Program

Demonstrasi program akan menjelaskan secara visual bagaimana tampilan dari Aplikasi Rental Alat Musik Berbasis Web. Mulai dari tampilan awal, menu, daftar alat musik beserta jenis, merk dan harganya, tampilan profil pengguna dan kontak

1. Halaman Beranda

Berikut adalah tampilan halaman beranda. Pada Gambar 4.1 ini terdapat informasi kontak Musicpro Rental, beberapa menu yang dapat dipilih, kotak pencarian dan tombol untuk daftar atau login sebagai pelanggan. Sementara Pada Gambar 4.2 terdapat pintasan yang menampilkan rekomendasi alat musik yang bisa disewa secara langsung. Gambar 4.3 menampilkan ulasan mengenai kinerja toko beserta komentar yang dapat diinput langsung oleh pelanggan. Yang terakhir, pada Gambar 4.4 menampilkan detail menu

“Kontak Kami” beserta dengan tombol berlangganan.

Gambar 4.1. Beranda Tampilan 1

(40)

(41)

2. Menu “Tentang Kami”

Pada tampilan ini terdapat deskripsi mengenai toko dan layanan yang bisa diberikan oleh toko kepada pelanggan

Gambar 4.5. Menu “Tentang Kami”

(42)

3. Menu “Daftar Alat”

Pada tampilan ini terdapa beberapa bagian seperti fitur pencarian berdasark merk dan jenis harga. Lalu juga ada “Daftar Alat Terkini” untuk menampilkan alat-alat baru yang disewakan. Di sebagian besar dari halaman ini terdaftar daftar alat musik yang menjadi rekomendasi toko.

Gambar 4.6. Menu “Daftar Alat”

4. Sub Menu “Detail Alat”

Di dalam menu “Daftar Alat”, ada tombol “Detail Alat” yamg mana dapat menampilkan detail dari alat musik yang akan disewa. Informasi yang ditayangkan meliputi gambar alat, jenis, merk harga dan kotak dialog untuk menyewakan alat tersebut

Gambar 4.7. Sub Menu “Detail Alat”

(43)

5. Menu “FAQs”

Pada tampilan ini ditampilakan pertanyaan yang sering ditanyakan serta jawaban dari setiap pertanyaan tersebut.

Gambar 4.8. Menu “FAQs”

5. Menu “Kontak Kami”

Pada tampilan ini ditampilkan formulir untuk dapat mengisi data diri serta mengirim pesan pribadi kepada toko. Di menu ini juga ditampilkan info mengenai kontak toko.

Gambar 4.9. Menu “Kontak Kami”

(44)

BAB 5 PENUTUP

3.1. Kesimpulan

Berdasarkan hasil analisis, implementasi, dan pengujian terhadap perangkat lunak maka dapat ditarik kesimpulan sebagai berikut:

1. Pembangunan Aplikasi Rental Alat Musik Berbasis Web sangat praktis digunakan sebagai media untuk mempermudah mengakses bahkan menyewa alat-alat musik yang dibutuhkan

2. Aplikasi semacam ini tentunya sangat bermanfaat di masa pandemi saat ini untuk mengurangi mobilitas bahkan kerumunan ketika hendak memilih barang di toko

3. Aplikasi Rental Alat Musik Berbasis Web dibangun dengan menggunakan teknologi PHP dan CSS untuk kodingan dan Bootstrap untuk visual design dan dapat diimplementasikan dengan mudah lewat Web Browser

3.2. Saran

Aplikasi Rental Alat Musik Berbasis Web ini masih memiliki beberapa kekurangan, penulis memiliki beberapa saran yang dapat mendukung pengembangan aplikasi lebih lanjut:

1. Website ini masih hanya sebatas pelanggan dapat memilih alat musik yang diinginkan untuk disewa, tetapi untuk transaksi dilakukan secara terpisah di luar website. Dalam pengembangannya diharapkan website ini dapat melakukan peningkatan fitur sehingga semua proses transaksi dapat dilakukan di dalam website

2. Website ini hanya bisa dijalankan di Web Browser saja, masih belum bisa dikatakan sangat fleksibel. Oleh sebab itu pengembangan ke depan diharapkan dapat diimplementasikan di perangkat Android

(45)

DAFTAR PUSTAKA

Muhammad Robith Adani. 2020. Pengenalan Apa Itu Website Beserta Fungsi, Manfaat dan Cara Membuatnya. [serial online].

https://www.sekawanmedia.co.id/pengertian-website/. [Juli 2021]

Eril Obeit Choiri. 2019. Apa Itu Website? Jenis dan Contohnya. [serial online].

https://qwords.com/blog/apa-itu-website/. [Juli 2021]

Eka Nadia. 2016. Pengertian dan Perbedaan HTML, CSS, PHP dan JavaScript. [serial online].

http://ekanadia03.blogspot.com/2016/04/pengertian-dan-perbedaan- html-css-php.html. [Juli 2021]

Alvian. 2019. Hubungan dan Perbedaan JavaScript, HTML, CSS, JQUERY dan PHP di dalam Web Development. [serial online].

https://sis.binus.ac.id/2019/02/25/hubungan-dan-perbedaan-javascript- html-css-jquery-dan-php-di-dalam-web-development/. [Juli 2021]

Muhammad Robith Adani. 2021. Memahami Konsep Penggunaan XAMPP Untuk Kebutuhan Development. [serial online].

https://www.sekawanmedia.co.id/apa-itu-xampp/. [Juli 2021]

Andrea Oliver. 2021. Tertarik Dunia Web Development? Pahami Dulu Aplikasi Xampp. [serial online].

https://glints.com/id/lowongan/xampp-adalah/#.YQzLeMozbIU. [Juli 2021]

Sutiono S.Kom, M.Kom, M.TI. 2020. 4 Perbedaan DFD dan Flowchart dalam sistem IT. [serial online].

https://dosenit.com/kuliah-it/sistem-informasi/perbedaan-dfd-dan- flowchart. [Juli 2021]

Admin. 2020. Perangkat Komputer : Macam Bagian, Fungsi, Kegunaan dan Gambar. [serial online].

https://jagad.id/pc-perangkat-komputer-perangkat-lunak-dan- perangkat-keras/. [Juli 2021]

(46)

L A M

P

I

R

A

N

(47)

LAMPIRAN

Listing Program index.php

<?php

session_start();

include('includes/config.php');

error_reporting(0);

?>

<!DOCTYPE HTML>

<head>

charset=utf-8">

<title>MusicPro Rental</title>

type="text/css">

type="text/css">

type="text/css">

type="text/css">

rel="stylesheet">

type="text/css" href="assets/switcher/css/switcher.css"

media="all" />

href="assets/switcher/css/red.css" title="red" media="all"

data-default-color="true" />

href="assets/switcher/css/orange.css" title="orange"

media="all" />

href="assets/switcher/css/blue.css" title="blue" media="all" />

href="assets/switcher/css/pink.css" title="pink" media="all" />

href="assets/switcher/css/green.css" title="green" media="all"

/>

(48)

href="assets/switcher/css/purple.css" title="purple"

media="all" />

href="assets/images/favicon-icon/guitaricon.png">

<link

href="https://fonts.googleapis.com/css?family=Lato:300,400,700, 900" rel="stylesheet">

</head>

<body>

<?php include('includes/colorswitcher.php');?>

<?php include('includes/header.php');?>

<h1>Temukan Perlengkapan Musik Terbaikmu</h1>

<p>Kami punya ratusan perlengkapan musik yang bisa kamu pilih</p>

</div>

</section>

<h2>Temukan yang terbaik <span>hanya untukmu</span></h2>

<p>Berawal dari inisiatif untuk mempermudah proses

peminjaman alat musik tanpa harus datang ke toko, maka hadirlah kami Musicpro Rental</p>

</div>

(49)

</ul>

</div>

<div role="tabpanel" class="tab-pane active"

id="resentnewcar">

<?php $sql = "SELECT

tblvehicles.VehiclesTitle,tblbrands.BrandName,tblvehicles.Price PerDay,tblvehicles.FuelType,tblvehicles.ModelYear,tblvehicles.i d,tblvehicles.SeatingCapacity,tblvehicles.VehiclesOverview,tblv ehicles.Vimage1 from tblvehicles join tblbrands on

tblbrands.id=tblvehicles.VehiclesBrand";

$query = $dbh -> prepare($sql);

$query->execute();

$results=$query->fetchAll(PDO::FETCH_OBJ);

$cnt=1;

if($query->rowCount() > 0) {

foreach($results as $result) {

?>

<div class="car-info-box"> <a href="vehical-

details.php?vhid=<?php echo htmlentities($result->id);?>"><img src="admin/img/vehicleimages/<?php echo htmlentities($result-

>Vimage1);?>" class="img-responsive" alt="image"></a>

<ul>

<li><i class="fa fa-car" aria-hidden="true"></i><?php echo htmlentities($result->FuelType);?></li>

<li><i class="fa fa-calendar" aria-hidden="true"></i><?php echo htmlentities($result->ModelYear);?> Model</li>

</ul>

</div>

<h6><a href="vehical-details.php?vhid=<?php echo

htmlentities($result->id);?>"><?php echo htmlentities($result-

>BrandName);?> , <?php echo htmlentities($result-

>VehiclesTitle);?></a></h6>

<span class="price">Rp<?php echo htmlentities($result-

>PricePerDay);?> /Hari</span>

</div>

<p><?php echo substr($result->VehiclesOverview,0,70);?></p>

</div>

<?php }}?>

</div>

</section>

(50)

<p>Berkarya</p>

</div>

</div>

<p>Transaksi Peminjaman</p>

</div>

<p>Pelanggan Puas</p>

</div>

</section>

<h2>Kepuasan <span>Pelanggan</span></h2>

</div>

<?php

$tid=1;

(51)

$sql = "SELECT tbltestimonial.Testimonial,tblusers.FullName from tbltestimonial join tblusers on

tbltestimonial.UserEmail=tblusers.EmailId where tbltestimonial.status=:tid";

$query = $dbh -> prepare($sql);

$query->bindParam(':tid',$tid, PDO::PARAM_STR);

$query->execute();

$results=$query->fetchAll(PDO::FETCH_OBJ);

$cnt=1;

if($query->rowCount() > 0) {

foreach($results as $result) { ?>

<h5><?php echo htmlentities($result-

>FullName);?></h5>

<p><?php echo htmlentities($result-

>Testimonial);?></p>

</div>

<?php }} ?>

</div>

</section>

<?php include('includes/footer.php');?>