LAPORAN PRAKTIKUM
ANALISIS & PERANCANGAN SISTEM INFORMASI PERIODE GENAP 2022/2023
“Membuat Aplikasi Dan WEB Untuk Ayam Geprek”
Diajukan Sebagai Salah Satu Syarat
Untuk Lulus Mata Kuliah Analisis & Perancangan Sistem Informasi
Disusun Oleh :
Della Cantika 190103060 Ferdy Pratama 190103010 Novendri 190103007
LABORATORIUM TEKNIK INDUSTRI PROGRAM STUDI TEKNIK INDUSTRI
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH RIAU PEKANBARU
2022
LEMBAR PENGESAHAN LAPORAN PRAKTIKUM
ANALISIS & PERANCANGAN SISTEM INFORMASI PERIODE GENAP 2022
Disusun Oleh : Della Cantika : 190103060 Ferdy Pratama : 190103010
Novendri : 190103007
Asisten Praktikum I Irsan Pratama Nim : 180103021
( )
Asisten Praktikum II Indah Sukma Adina
Nim : 180103035
( )
Asisten Praktikum III Sri Mulyati Nim : 180103061
( )
Mengesahkan ,
Dosen Pengampu Mata Kuliah Analisa & Perancangan Sistem Informasi
Ari Andriyas Puji, ST., MT NIDN : 1025029301
BIODATA PRAKTIKAN
A. Biodata
Nama : Della Cantika
NIM : 190103060
Tempat/ Tgl. Lahir : Jakarta, 26 Desember 2000
No. Hp : 0812-6837-2840
E-mail : dellacantika2612@gmail.com
Agama : Islam
Alamat : Jl. Nangka Ujung Jenis Kelamin : Perempuan
B. Riwayat Pendidikan
NO Jenis Pendidikan Tempat Pendidikan Tamat
1 SDN 001 Rambah Rokan Hulu 2007-2013
2 MTsN Rambah Rokan Hulu 2013-2016
3 MAN 1 Rokan Hulu Rokan Hulu 2016-2019
BIODATA PRAKTIKAN
A. Biodata
Nama : Novendri
NIM : 190103007
Tempat, Tanggal Lahir : Perawang, 06 Desember 2000 Jenis Kelamin : Laki-laki
Agama : Islam
Alamat : Jl. Raya Perawang
No. Hp : 082377312250
E-mail : [email protected]
B. Riwayat Pendidikan
No. Jenis Pendidikan Tempat Pendidikan Tamat
1. SDN 007 Tualang Tualang 2012
2. SMPN 7 Tualang Tualang 2015
3. SMAN 3 Tualang Tualang 2018
BIODATA PRAKTIKAN
A. Biodata
Nama : Ferdy Pratama
NIM : 190103010
Tempat, Tanggal Lahir : Dumai, 06 Maret 2000 Jenis Kelamin : Laki-laki
Agama : Islam
Alamat : Jl. Swadaya, Srikandi
No. Hp : 085363400445
E-mail : [email protected]
B. Riwayat Pendidikan
No. Jenis Pendidikan Tempat Pendidikan Tamat
1. SDN 005 Dumai Dumai 2012
2. SMPN 1 Dumai Dumai 2015
3. SMKN 2 Dumai Dumai 2018
i
KATA PENGANTAR
Puji syukur penulis ucapkan kehadirat Allah SWT yang telah melimpahkan rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan Laporan Analisa &
Perancangan Sistem Informasi. Laporan ini disusun untuk melengkapi syarat kelulusan mata kuliah Analisa & Perancangan Sistem Informasi, Program Studi Teknik Industri, Fakultas Teknik, Universitas Muhammadiyah Riau.
Dalam penyusunan laporan ini, penulis tak lepas dari bantuan dan dukungan dari berbagai pihak. Untuk itu pada kesempatan ini, penulis mengucapkan terima kasih atas bantuan, dorongan dan masukan yang telah diberikan kepada :
1. Allah SWT atas berkat dan Rahmat-Nya kami diberi kelancaran dalam menyusun laporan ini
2. Dukungan & do’a dari kedua orang tua kami
3. Bapak Ari Andriyas Puji, ST., MT, selaku Dosen Pengampu Mata Kuliah Analisa & Perancangan Sistem Informasi.
4. Serta semua pihak yang telah membantu, yang tidak dapat penulis sebutkan satu persatu
Penulis menyadari bahwa dalam penyusunan laporan ini masih terdapat banyak kekurangan. Akhir kata penulis berharap semoga laporan ini dapat memberikan manfaat bagi kita semua. Aamiin.
Pekanbaru, 22 Agustus 2022
Penulis
ii
DAFTAR ISI
LEMBAR PENGESAHAN DATA PRIBADI MAHASISWA
KATA PENGANTAR ... i
DAFTAR ISI ... ii
DAFTAR GAMBAR ... iv
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 1
1.3 Batasan Masalah ... 2
1.4 Tujuan Penelitian ... 2
1.5 Manfaat Penelitian... 2
BAB II LANDASAN TEORI ... 3
2.1 Sistem Informasi ... 3
2.1 Konsep Pemodelan Sistem ... 3
2.1.1 Use Case Diagram... 3
2.1.2 Data Flow Diagram Level 0 ... 4
2.1.3 Data Flow Diagram Level 1 ... 4
2.1.4 Entity Relationship Diagram ... 4
2.2 Figma ... 5
BAB III PENGUMPULAN DAN PENGOLAHAN DATA ... 6
3.1 Use Case Diagram ... 6
3.2 Data Flow Diagram Level 0 ... 6
3.3 Data Flow Diagram Level 1 ... 7
3.4 Entity Relationship Diagram ... 7
BAB IV INTERPRESTASI HASIL ... 8
4.1 Tampilan Layar Aplikasi Pada Mobile ... 8
4.1.1 Tampilan Screen... 8
iii
4.1.2 Tampilan Login ... 8
4.1.3 Tampilan Daftar Data Diri ... 9
4.1.4 Tampilan Daftar Menu ... 9
4.1.5 Tampilan Jenis Pembayaran ... 10
4.1.6 Tampilan Pembayaran ... 10
4.1.7 Tampilan Verifikasi Pembayaran ... 11
4.1.8 Tampilan Riwayat Pembayaran ... 11
4.2 Tampilan Layar Aplikasi Pada Web ... 12
4.2.1 Tampilan Screen... 12
4.2.2 Tampilan Daftar ... 12
4.2.3 Tampilan Daftar Data Diri ... 13
4.2.4 Tampilan Login ... 13
4.2.5 Tampilan Daftar Menu ... 14
4.2.6 Tampilan Jenis Pembayaran ... 14
4.2.7 Tampilan Pembayaran ... 14
4.2.8 Tampilan Verifikasi Pembayaran ... 15
4.2.9 Tampilan Riwayat Pembayaran ... 15
BAB V PENUTUP ... 16
5.1 Kesimpulan ... 16
5.2 Saran ... 16 DAFTAR PUSTAKA
iv
DAFTAR GAMBAR
Gambar 3.1 Use Case Diagram ... 6
Gambar 3.2 Data Flow Diagram Level 0 ... 6
Gambar 3.3 Data Flow Diagram Level 1 ... 7
Gambar 3.3 Entity Reelationship Diagram ... 7
Gambar 4.1 Tampilan Scree ... 8
Gambar 4.2 Tampilan Login ... 9
Gambar 4.3 Tampilan Daftar Data Diri ... 9
Gambar 4.4 Tampilan Daftar Menu ... 10
Gambar 4.5 Tampilan Jenis Pembayaran ... 10
Gambar 4.6 Tampilan Pembayaran ... 11
Gambar 4.7 Tampilan Verifikasi Pembayaran ... 11
Gambar 4.8 Tampilan Riwayat Pembayaran ... 12
Gambar 4.1 Tampilan Screen web ... 12
Gambar 4.2 Tampilan Daftar Web ... 13
Gambar 4.3 Tampilan Daftar Data Diri Web ... 13
Gambar 4.4 Tampilan Login Pada Web ... 13
Gambar 4.5 Tampilan Daftar Menu Pada Web ... 14
Gambar 4.6 Tampilan Jenis Pembayaran Pada Web ... 14
Gambar 4.7 Tampilan Pembayaran Pada Web ... 15
Gambar 4.8 Tampilan Verifikasi Pembayaran Pada Web ... 15
Gambar 4.9 Tampilan Riwayat Pembayaran Pada Web... 15
1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Saat ini perkembangan teknologi komunikasi (ICT) semakin pesat, banyak masyarakat dan industry yang memanfaatkan perkembangan teknologi komunikasi tersebut, bahkan dapat dikatakan dengan adanya perkembangan ICT tersebut dapat merubah gaya hidup masyarakat saat ini (Rahastine, September 2018).
Usaha Ayam Geprek saat ini telah mengalami penyesuaian seiring perkembangan pada era globalisasi. Penyesuaian yang terjadi tidak termasuk pada sistem yang digunakan pada usaha ayam geprek. Beberapa pemilik tempat ayam geprek masih belum menggunakan teknologi informasi untuk mengelola usaha ayam geprek miliknya. Pelanggan yang akan menggunakan jasa layanan ayam geprek masih harus datang ke tempat ayam geprek dan mengantrea untuk menunggu gilirannya. Sistem antrean tradisional ini sudah tidak cocok untuk diterapkan pada kondisi saat ini. Penelitian ini bertujuan untuk mengembangkan sistem informasi pemesanan secara online berbasis web dan mobile agar antrean pada ayam geprek dapat lebih tertata dan efektif, pengembangan sistem antrean online ini merupakan suatu bentuk penyesuaian usaha ayam geprek pada keadaan saat ini.
Dengan demikian dapat disimpulkan bahwa sistem informasi dapat menyederhanakan permasalahan antrean dan memberikan keuntungan bagi pelanggan maupun pemilik usaha.
1.2 Rumusan Masalah
Rumusan masalah pada laporan Analisis dan Perancangan Sistem Informasi adalah Bagaimana membangun suatu sistem informasi yang dapat mempermudah proses pemesanan ayam geprek dengan berbasis mobile app dan WEB?
2 1.3 Batasan Masalah
Batasan masalah pada laporan Analisis dan Perancangan Sistem Informasi adalah :
1. Sistem ini digunakan untuk melakukan proses pemesanan antrian ayam geprek.
2. Data yang diolah meliputi data customer, data admin dan data ayam geprek.
3. Aplikasi yang digunakan untuk mengolah data adalah microsoft visio dan figma
1.4 Tujuan Penelitian
Tujuan penelitian ini adalah untuk membangun sistem infromasi yang dapat mempermudah proses pemesanan antrian ayam geprek dengan berbasis mobile app dan WEB.
1.5 Manfaat Penelitian
Manfaat penelitian ini adalah sebagai berikut :
1. Mempermudah adanya alternatif layanan online bagi customer.
2. Teratasinya beberapa kendala yang membuat costumer menunggu lama
3
BAB II
LANDASAN TEORI
2.1 Sistem Informasi
Sumber dari informasi adalah data. Data merupakan bentuk jamak dari bentuk tunggal datum. Istilah data dan informasi sering digunakan secara bergantian. Ada yang menyebut data padahal informasi, sebaliknya ada yang mengatakan informasi,padahal data. Gordon B Davis menjelaskan kaitannya data dengan informasi dalam bentuk definisi berikut “informasi adalah data yang diproses ke dalam suatu bentuk yang mempunyai arti bagi si penerima dan mempunyai nilai nyata dan terasa bagi keputusan saat itu atau keputusan menatang”. (Sutabri, April 2012)
2.1 Konsep Pemodelan Sistem 2.1.1 Use Case Diagram
Use Case diagram adalah diagram Use Case yang digunakan untuk menggambarkan secara ringkas siapa yang menggunakan sistem dan apa saja yang bisa dilakukannya.
Berikut ini adalah manfaat dari Use Case Diagram : 1. Menggunakannya sebagai kebutuhan verifikasi.
2. Menjadi gambaran interface dari sebuah sistem karena setiap sistem yang dibangun haruslah memiliki interface.
3. Mengidentifikasi siapa saja orang yang dapat berinteraksi dengan sistem, serta apa yang dapat dilakukan oleh sistem.
4. Memberikan kepastian mengenai kebutuhan sistem, sehingga tidak membingungkan.
5. Memudahkan proses komunikasi antara domain expert dan end user.
4 2.1.2 Data Flow Diagram Level 0
DFD Level 0 atau lebih sering disebut dengan diagram konteks adalah suatu diagram yang terdiri dari sebuah metode yang dapat menjelaskan lingkup sistem secara umum. Context diagram merupakan bagian dari Data Flow Diagram yang digunakan untuk menetapkan konteks serta batasan-batasan sistem dalam sebuah pemodelan.
Diagram level 0 ini menjadi penentu utama dalam sebuah sistem yang dimodelkan dalam DFD. Namun untuk membangun suatu sistem DFD masih dibutuhkan 2 level lanjutan yaitu level 1 yang bertujuan memecah sistem menjadi lebih kecil serta level 2 bertujuan untuk membuat rincian dari sistem yang akan dibuat.
2.1.3 Data Flow Diagram Level 1
DFD Level 1 adalah diagram lanjutan dari context diagram atau DFD level 0, dimana proses yang ada didalam sistem lebih rinci dan lengkap karena proses utama yang dipecah menjadi beberapa sub proses dengan fungsi masing-masing.
Context diagram hanya menggambarkan sistem secara umum serta hanya menjelaskan aliran data dari input sampai output. Namun DFD Level 1 menggambarkan aliran data yang lebih kompleks pada setiap prosesnya yang kemudian terbentuklah datastore dan aliran data.
Aliran data adalah perpindahan data yang dilakukan dari satu titik menuju titik yang lainnya. Selain itu, DFD level 1 ini menggambarkan sistem secara sebagian atau seluruhnya secara mendetail.
2.1.4 Entity Relationship Diagram
Entity Relationship Diagram adalah suatu bentuk diagram yang
menjelaskan hubungan antar objek-objek data yang mempunyai hubungan antar relasi. ERD digunakan untuk menyusun struktur data dan hubungan antar data, dan untuk menggambarkannya digunakan notasi, simbol, bagan, dan lain sebagainya.
5 ERD berfungsi sebagai bentuk pemodelan basis data yang kemudian dapat dikembangkan dalam berbagai project sistem informasi, contohnya rekayasa software.
2.2 Figma
Figma adalah desain digital dan alat prototyping. Ini adalah aplikasi desain UI dan UX yang dapat Anda gunakan untuk membuat situs web, aplikasi, atau komponen antarmuka pengguna yang lebih kecil yang dapat diintegrasikan ke dalam proyek lain. Dengan alat berbasis vektor yang hidup di cloud, Figma memungkinkan para penggunanya untuk bekerja di mana saja dari browser. Cara ini termasuk alat zippy yang dibuat untuk desain, pembuatan prototipe, kolaborasi, dan sistem desain organisasi.
Alat atau tool yang sebanding dengan Figma adalah termasuk Sketch, Adobe XD, Invision, dan Framer. Juga seperti banyak tool lainnya, Figma didukung oleh komunitas desainer dan pengembang yang kuat yang berbagi plugin untuk meningkatkan fungsionalitas dan mempercepat alur kerja. Siapa pun dapat berkontribusi dan berbagi. Figma juga digunakan oleh beberapa merek besar termasuk Slack, Twitter, Zoom, Dropbox, dan Walgreens. Nama-nama itu saja menunjukkan bahwa alat ini cukup kuat untuk memberi daya pada hampir semua proyek
6
BAB III
PENGUMPULAN DAN PENGOLAHAN DATA
3.1 Use Case Diagram
Gambar 3.1 Use Case Diagram
Sumber : Pengolahan Data, Microsoft Visio, 2022
3.2 Data Flow Diagram Level 0
Pelanggan
Sistem Pemesana Ayam Geprek
0
Admin
Chef
Transaksi
Laporan Pembayaran
Ketersediaan barang memilih
bahan pembayran Pengadaan Pesanana
Laporan Pemesanan
Laporan Pembuatan Pemesanan
Konfirmasi Pemesanan
Gambar 3.2 Data Flow Diagram Level 0 Sumber : Pengolahan Data, Microsoft Visio, 2022
7 3.3 Data Flow Diagram Level 1
Gambar 3.3 Data Flow Diagram Level 1 Sumber : Pengolahan Data, Microsoft Visio, 2022
3.4 Entity Relationship Diagram
Nama
Alamat No HP
Pasword ID Pelanggan
Sign UP Login
Login Login
PK Pelanggan Menjual FK Menu
Pilihan menu dan Harga
Melakukan
FK Transaksi
Jenis Pembayaran
Riwayat Pembayaran
PK Admin Memproses
Pesana
PK Chef Membuat Pesanan
`
Gambar 3.3 Entity Reelationship Diagram Sumber : Pengolahan Data, Microsoft Visio, 2022
8
BAB IV
INTERPRESTASI HASIL
4.1 Tampilan Layar Aplikasi Pada Mobile
Berikut adalah tampilan pada layar aplikasi pemesanan Ayam Geprek pada mobile
4.1.1 Tampilan Screen
Tampilan screen awal dalam aplikasi Ayam Geprek, yang menampilkan logo dari Ayam Geprek.
Gambar 4.1 Tampilan Screen Sumber : Software Figma, 2022
4.1.2 Tampilan Login
Setelah memlih login pada tampilan screen maka seperti inilah tampilan login pada aplikasi pemesanan ayam geprek
9 Gambar 4.2 Tampilan Login
Sumber : Software Figma, 2022
4.1.3 Tampilan Daftar Data Diri
Setelah itu maka customer diminta untuk mengisi data diri pada bagian user dan password untuk melanjutkan ke tampilan daftar menu
Gambar 4.3 Tampilan Daftar Data Diri Sumber : Software Figma, 2022
4.1.4 Tampilan Daftar Menu
Tampilan menu ini menampilkan beberapa pilihan yang di jual pada ayam geprek
10 Gambar 4.4 Tampilan Daftar Menu
Sumber : Software Figma, 2022
4.1.5 Tampilan Jenis Pembayaran
Setelah customer memilih menu yang diinginkan selanjutnya akan diarah kan pada tampilan beberapa jenis pembayaran
Gambar 4.5 Tampilan Jenis Pembayaran Sumber : Software Figma, 2022
4.1.6 Tampilan Pembayaran
Berikut tampilan pembayaran pada aplikasi pemesanan ayam geprek
11 Gambar 4.6 Tampilan Pembayaran
Sumber : Software Figma, 2022
4.1.7 Tampilan Verifikasi Pembayaran
Berikut tampilan jika pembayaran berhasil dilakukan
Gambar 4.7 Tampilan Verifikasi Pembayaran Sumber : Software Figma, 2022
4.1.8 Tampilan Riwayat Pembayaran
Setelah berhasil melakukan pembayaran maka customer akan mendapatkan riwayat pembayaran sebagai bukti bahwa customer telah melakukan pembayaran
12 Gambar 4.8 Tampilan Riwayat Pembayaran
Sumber : Software Figma, 2022
4.2 Tampilan Layar Aplikasi Pada Web
Berikut adalah tampilan pada layar aplikasi pemesanan Ayam Geprek pada mobile
4.2.1 Tampilan Screen
Tampilan screen awal pada web dalam aplikasi Ayam Geprek, yang menampilkan logo dari Ayam Geprek.
Gambar 4.1 Tampilan Screen web Sumber : Software Figma, 2022
4.2.2 Tampilan Daftar
Setelah memlih login pada tampilan daftar pada web maka seperti inilah tampilan login pada aplikasi pemesanan ayam geprek
13 Gambar 4.2 Tampilan Daftar Web
Sumber : Software Figma, 2022
4.2.3 Tampilan Daftar Data Diri
Setelah itu maka customer diminta untuk mengisi data diri pada bagian user dan password untuk melanjutkan ke tampilan daftar menu
Gambar 4.3 Tampilan Daftar Data Diri Web Sumber : Software Figma, 2022
4.2.4 Tampilan Login
Setelah memlih login pada tampilan screen maka seperti inilah tampilan login pada aplikasi pemesanan ayam geprek dalam bentuk web
Gambar 4.4 Tampilan Login Pada Web Sumber : Software Figma, 2022
14 4.2.5 Tampilan Daftar Menu
Tampilan menu ini menampilkan beberapa pilihan yang di jual pada ayam geprek dalam bentuk web
Gambar 4.5 Tampilan Daftar Menu Pada Web Sumber : Software Figma, 2022
4.2.6 Tampilan Jenis Pembayaran
Setelah customer memilih menu yang diinginkan selanjutnya akan diarah kan pada tampilan beberapa jenis pembayaran
Gambar 4.6 Tampilan Jenis Pembayaran Pada Web Sumber : Software Figma, 2022
4.2.7 Tampilan Pembayaran
Berikut tampilan pembayaran pada aplikasi pemesanan ayam geprek pada tampilan web
15 Gambar 4.7 Tampilan Pembayaran Pada Web
Sumber : Software Figma, 2022
4.2.8 Tampilan Verifikasi Pembayaran
Berikut tampilan jika pembayaran berhasil dilakukan pada tampilan web
Gambar 4.8 Tampilan Verifikasi Pembayaran Pada Web Sumber : Software Figma, 2022
4.2.9 Tampilan Riwayat Pembayaran
Setelah berhasil melakukan pembayaran maka customer akan mendapatkan riwayat pembayaran sebagai bukti bahwa customer telah melakukan pembayaran
Gambar 4.9 Tampilan Riwayat Pembayaran Pada Web Sumber : Software Figma, 2022
16
BAB V PENUTUP
5.1 Kesimpulan
Berikut ini adalah kesimpulan yang dapat diambil dari laporan ini :
1. Konsep pemodelan sistem dengan menggunakan 3 diagram diantaranya adalah use case diagram, data flow diagram level 0, data flow diagram level 1, entity relationship diagram.
2. Interpretasi hasil dari laporan ini adalah dibuatnya tampilan aplikasi dengan menggunakan aplikasi figma.
5.2 Saran
Saran yang dapat diberikan yaitu :
1. Diberikan pemahaman yang jelas dan rinci kepada praktikan agar laporan dapat dibuat dengan semaksimal dan sebaik mungkin.
2. Agar praktikan lebih disiplin ketika ada jadwal asistensi yang diberikan oleh dosen pengampu maupun asisten.
DAFTAR PUSTAKA
Rahastine, M. P. (September 2018). Strategi Komunikasi Pemasaran Ayam Geprek Mbu Cici Melalui Media Sosial Instagram Sebagai Sarana Promosi.
Cakrawala, Volume 18 No. 2.
Sutabri, T. (April 2012). Konsep Sistem Informasi. Jakarta: CV Andi Offset.
