CLOUD COMPUTING WEBSITE QUEEN DIMSUM

Laporan Akhir Cloud Computing
Website Queen Dimsum 

Disusun oleh Kelompok 5:

1.      Hoirotun Nafi’ah                 (20050974001)

2.      Nurun Decerachmi Emba    (20050974003)

3.      Arnaldo Heiniklaas              (20050974050)

 

BAB I

PENDAHULUAN

1.1  Latar Belakang

Era digital semakin maju dan berkembang sehingga menuntut masyarakat bisa menggunakan teknologi yang ada untuk membantu kehidupan sehari-hari.  Adanya teknologi membantu masyarakat untuk medapatkan dan menerima informasi dengan mudah melalui internet. Internet sendiri adalah jaringan komunikasi elektronik yang menghubungkan jaringan komputer dengan fasilitas komputer di seluruh dunia.

Seperti yang kita ketahui banyak para pengusaha dagang atau perusahaan-perusahaan baik dalam negeri maupun luar negeri memasarkan produk mereka menggunakan jasa internet, baik hanya untuk promosi (Iklan) maupun melakukan proses transaksi secara online. Salah satunya melalui website. Dengan adanya website membantu pemilik usaha untuk melakukan pemasaran online sehingga meningkatkan  jumlah Pendapatan. Tidak hanya itu melalui pemasaran online juga dapat meningkatkan reputasi, Jumlah konsumen dan menjangkau target pasar yang lebih luas.

Oleh karena itu, untuk memanfaatkaan teknologi yang ada, penulis mencoba membuat website makanan “Queen Dimsum” untuk membantu dalam proses pemasaran produk.

1.2  Rumusan Masalah

Berdasarkan dari latar belakang tersebut di atas, maka yang menjadi pokok permasalahannya adalah bagaimana merancang sebuah  website untuk penjualan “Queen Dimsum”.

1.3  Masalah

1)    Output data berupa sebuah website yang bertemakan penjualan makanan “Queen  Dimsum”.

2)      Perancangan Web menggunakan bahasa pemrograman pemrograman PHP.

3)      Software yang digunakan untuk merancang website ini adalah Visual Studio.

1.4  Tujuan

1)      Memenuhi tugas akhir semester dari mata kuliah Cloud Computing

2)      Merancang dan menerapkan “Queen Dimsum”.

1.5  Manfaat Penulisan

Bagi Penulis :

1) Membuka wawasan pengetahuan baru sesuai dengan bidang teknologi Internet.

2) Menerapkan ilmu dan teori yang diperoleh selama mengikuti pendidikan ke dalam aplikasi nyata.

3) Memperdalam dan mengasah kemampuan penulis dalam hal programming yang berhubungan dengan website.

Bagi Perusahaan :

1) Membantu dalam menawarkan barang secara online 24 jam nonstop.

2) Mendongkrak popularitas perusahaan.

3) Dapat menghemat biaya iklan / pemasaran.

BAB II
ANALISIS DAN DESAIN

2.1     Use Case Diagram

Use case diagram merupakan model perilaku (behavior) dari sistem informasi yang akan dibuat. Use case menggambarkan interaksi antara satu atau lebih aktor dan sistem informasi yang  dibuat.

Spesifikasi penamaan aplikasi mendefinisikan nama sesederhana dan semudah mungkin untuk dipahami. Dua hal penting dalam use case:

 1. Aktor

 2. Use Case

1.      Pendefinisian Aktor Use Case

No	Aktor	Deskripsi
1.	Admin	Admin adalah orang yang bertugas dan memiliki hak akses untuk melakukan segala pengolahan data produk, transaksi, dan laporan produk
2.	User	User adalah orang yang menggunakan website untuk keperluan melihat produk, membeli produk, serta menerima bukti transaksi.

2.      Use Case Diagram

 

2.2     Activity Diagram

1.      a. Activity Diagram Daftar

b.    Skenario :

Aksi Aktor	Reaksi Sistem
Skenario Normal
1.      Membuka halaman login
	2.      Menampilkan halaman login
3.      Memasukkan data user
	4.      Menampilkan halaman masuk
Skenario Alternatif
5.      Memasukkan data user
	6.      Menampilkan halaman masuk

2.      a. Activity Diagram Masuk 

b. Skenario

Aksi Aktor	Reaksi Sistem
Skenario Normal
1.      Membuka halaman masuk
	2.      Menampilkan halaman masuk
3.        Memasukkan data user (username dan password)
	4.      Memeriksa valid tidaknya data yang dimasukkan
	5.      Masuk ke halaman beranda
Skenario Alternatif
6.      Memasukkan data user (username dan password)
	7.      Memeriksa valid tidaknya data yang dimasukkan
	8.      Menampilkan gagal masuk atau data tidak valid
9.      Memasukkan data user (username dan password) yang valid
	10.  Memeriksa valid tidaknya data yang dimasukkan
	11.  Masuk ke halaman beranda

3.  a. Activity Diagram Melihat Produk

b. Skenario

Aksi Aktor	Reaksi Sistem
Skenario Normal
1.      Membuka halaman beranda
	2.      Menampilkan halaman beranda
3.        Membuka halaman produk
	4.      Menampilkan halaman produk
5.      Melihat Produk
	6.      Memesan produk
7.      Membuka halaman keranjang saya
	8.      Menampilkan halaman keranjang saya
Skenario Alternatif
9.      Melihat Produk
	10.    Memesan produk
11.    Membuka halaman keranjang saya
	12.    Menampilkan keranjang saya

4.      a. Activity Diagram Transaksi

b. Skenario

Aksi Aktor	Reaksi Sistem
Skenario Normal
1.        Membuka halaman keranjang saya
	2.      Menampilkan halaman keranjang saya
3.        Membuka halaman checkout
	4.      Menampilkan halaman checkout
5.        Membuka halaman invoice
	6.      Menampilkan halaman invoice
7.        Membuka halaman daftar order
	8.      Menampilkan halaman daftar order
9.    Membuka halaman konfirmasi pembayaran
	10.    Menampilkan halaman konfirmasi pembayaran
Skenario Alternatif
11.    Membuka halaman checkout
	12.    Menampilkan halaman checkout
13.    Membuka halaman invoice
	14.    Menampilkan halaman invoice
15.    Membuka halaman daftar order
	16.    Menampilkan halaman daftar order
17.    Membuka halaman konfirmasi pembayaran
	18.    Menampilkan halaman konfirmasi pembayaran

2.3     ERD

Entity Relationship Diagram (ERD) merupakan proses yang menunjukkan hubungan antar entitas dan relasinya. ERD terbagi menjadi Conceptual Data Model (CDM) dan Physial Data Model (PDM).

 

2.4     CDM

Conceptual Data Model atau biasa di sebut CDM. CDM memodelkan struktur logis dari seluruh data aplikasi, terlepas dari pertimbangan perangkat lunak atau  model struktur data. CDM yang valid dapat dikonversi ke PDM atau OOM. Dalam aplikasi tersebut, CDM setara dengan ERD dan fungsinya sebenarnya sama. Dengan kata lain, pemodelan struktur logis dari database. CDM digunakan untuk memperbaiki struktur database dalam bentuk logis. CDM terdiri dari objek-objek yang tidak langsung diimplementasikan dalam database yang sebenarnya.

 

·         Pada CDM terdapat 7 entitas yaitu sebagai berikut :

1.  Entitas Produk terdapat atribut id produk sebagai primary key, nama produk, gambar, deskripsi, rate, harga sebelum, harga sesudah, dan tanggal dibuat.

2.    Entitas Detail Order terdapat detail id sebagai primary key, order id, dan quantity.

3.    Entitas Cart terdapat id cart sebagai primary key, status, dan tanggal order.

4.  Entitas User terdapat id user sebagai primary key, nama lengkap, email, password, nomor telepon, alamat, tanggal join, role, dan last login.

5.  Entitas Konfirmasi terdapat id konfirmasi sebagai primary key, payment, nama rekening, tanggal submit, dan tanggal bayar.

6.  Entitas Kategori terdapat id kategori sebagai primary key, nama kategori, dan tanggal buat kategori.

7.    Entitas Pembayaran terdapat nomor sebagai primary key, bank, logo, nama pemilik rekening, dan nomor rekening.

·         Pada 7 entitas tersebut saling berhubungan dengan kardinalitas

1.      Entitas User melakukan konfirmasi dengan kardinalitas one to many

2.      Entitas Konfirmasi melakukan pembayaran dengan kardinalitas one to many

3.      Entitas Konfirmasi mempunyai detail order dengan kardinalitas one to one

4.      Entitas Detail Oder mempunyai cart dengan kardinalitas one to one

5.      Entitas Detail Order mempunyai produk dengan kardinalitas one to many

6.      Entitas Produk mempunyai kategori dengan kardinalitas one to one

2.5     PDM

          PDM merupakan representasi fisik dari database yang akan dibuat DBMS digunakan. PDM dapat dihasilkan dari CDM valid. Dalam aplikasi tersebut, PDM dapat disamakan dengan skema relasional. Fungsinya untuk memodelkan struktur fisik database. Penjelasan detail tentang database fisik. Struktur penyimpanan data yang benar untuk database yang sebenarnya.

 

 

BAB III
HASIL DAN PEMBAHASAN

3.1     Deskripsi Umum Website Queen Dimsum

Situs web atau Website adalah laman di domain yang berisi berbagai informasi yang dapat dibaca dan dilihat oleh pengguna Internet melalui mesin telusur.

Website Queen Dimsum merupakan website penjualan makanan ringan berbasis online yang bisa diakses oleh seluruh pembeli.

3.2     Deskripsi Sistem Website Queen Dimsum

Pada halaman awal atau beranda, terdapat gambar produk – produk Dimsum yang ditawarkan beserta dengan harga dan terdapat info dari penjual berupa nomor telepon atau nomor WhatsApp dan E-mail. Pada halaman kategori produk terdapat produk Dimsum yang digabungkan sesuai dengan jenisnya. Terdapat halaman Daftar dan Masuk. Pada halaman keranjang saya dan daftar order, pembeli diharuskan mengisi terlebih dahulu pada halaman daftar dan masuk.

3.3     Deskripsi Fungsional Website Queen Dimsum

Website ini dibuat dengan tujuan utama untuk memenuhi tugas akhir mata kuliah Pemrograman Web. Tujuan lainnya untuk memudahkan pembeli dalam order dimsum dan untuk membantu pihak resto dalam mengembangkan bisnis secara online.

3.4     Implementasi Website Queen Dimsum

Di bawah ini adalah desain dari website Queen Dimsum yang telah dibuat.

Tampilan Beranda (Sebelum Login)

Tampilan beranda adalah tampilan ketika pembeli ingin order dimsum secara online. Dimana terdapat nama restoran, nama dan harga produk.

Tampilan Daftar

Pada halaman daftar terdapat kolom pengimputan informasi pribadi, informasi login dan button daftar proses pendaftaran. Pada informasi pribadi terdapat nama lengkap, nomor telepon dan alamat lengkap sedangkan pada informasi login terdapat Email dan password.

Tampilan Login

Pada tampilan login terdapat pengimputan data berupa nama user/email dan password.

Tampilan Beranda (setelah login)

 

Tampilan Produk

Pada tampilan produk terdapat gambar, nama, review, dan harga produk.

Tampilan Footer

Pada tampilan footer terdapat informasi restaurant yang bisa dihubungii.

Tampilan Kategori Produk

Pada tampilan kategori terdapat beberapa jenis kategori dimsum.

Tampilan Lihat Produk

Pada tampilan produk terdapat nama, gambar, review, Deskripsi, harga dan button add to cart.

Tampilan Keranjang Saya

Pada tampilan keranjang saya terdapat produk dimsum yang di order sesuai jumlah dan rincian harga.

Tampilan Setelah Check Out

Pada tampilan setelah check out terdapat produk dimsum yang di order sesuai jumlah dan total harga yang harus dibayar.

Pada tampilan setelah check out terdapat beberapa aplikasi yang digunakan untuk proses transaksi.

Tampilan Daftar Order

Pada tampilan daftar order terdapat code, tanggal, total, dan riwayat status order.

Tampilan Konfirmasi Pembayaran

Pada tampilan konfirmasi pembayaran terdapat kode order, informasi pembayaran, nama pemilik rekening, rekening tujuan, dan tanggal order.

Tampilan Tentang Kami

Pada tampilan tentang kami terdapat deskripsi singkat dari produk dimsum

3.5     Code Program Website 

    Cart

Halaman cart merupakan halaman yang berisi source code untuk menampilkan output berupa benners dari restaurant.

Check Out

Halaman check out berisi tampilan untuk menampilkan daftar produk dan total harga yang akan dipesan, serta fitur untuk membatalkan pemesanan produk.

Daftar Order

Halaman daftar order merupakan halaman yang berisi source code untuk menampilkan output berupa history pemesanan setiap user sehingga user dapat melihat riwayat pemesanan yang telah dilakukan sebelumnya. Halaman ini menampilkan detail transaksi.

Db Connect

Source code db connect berfungsi untuk menghubungkan website dengan database yang digunakan untuk menyimpan data-data.

Error_Log

Source code ini berfungsi untuk menampilkan peringatan error pada sistem website saat diakses/digunakan.

Index

Source code index merupakan awal dari website yang mana pada halaman ini menampilkan seluruh menu dan fitur yang muncul pertama kali saat website diakses.

Kategori

Source code kategori adalah program yang menampilkan jenis produk yang ditawarkan.

Konfirmasi

Konfirmasi adalah source code untuk menampilkan konfirmasi pembayaran setelah user memilih produk dan ingin membeli produk.

Login

User yang sudah memiliki akun dapat Login. Source code loginlah yang menentukan apakah nama dan password yang di masukkan sudah sesuai data pada pendaftaran, jika sesuai maka user dinyatakan berhasi login dan jika tidak maka user akan diminta memasukkan ulang nama dan password.

Logout

Pada source code menampilkan halaman untuk user yang ingin meninggalkan akunnya.

Order

Source code order adalah perintah untuk menampilkan rincian produk yang akan di pesan oleh user.

Product

Source code produk adalah perintah yang menampilkan berbagai jenis produk yang ditawarkan oleh restaurant.

Registered

Perintah yang menampilkan proses registrasi user saat melakukan proses pendaftaran akun.

Search

Source code search adalah perintah untuk mencari jenis produk yang diinginkan.

3.6     Database

Disini kami menggunakan satu database dengan nama “tokopekita.qsl”. Di dalam database ini terdapat beberapa tabel diantaranya, tabel cart, detail order, kategori, konfirmasi, login, pembayaran dan produk. Untuk penjelasan setiap databesenya sebagai berikut :

Tabel Cart

Pada tabel cart ini berisikan riwayat order yang terdiri dari id cart, order id, user id, tgl order dan status.

Tabel Detail Order

Pada tabel detail order terdiri dari detail id, order id, id produk, dan quantyty.

Tabel Kategori

Pada tabel kategori terdapat id kategori, nama kategori, dan tanggal buat.

Tabel Konfirmasi

Pada tabel konfirmasi terdapat id konfirmasi, order id, user id, payment, nama rekening, tanggal bayar, dan tanggal submit.

Tabel Login

Pada tabel login terdapat user id, nama lengkap, email, password, nomor telepone, alamat, tanggal join, role dan last login.

Tabel Pembayaran

Pada tabel pembayaran terdapat motode, nomor rekening, dan logo.

Tabel Product

Pada tabel produk terdapat id produk, id kategori, nama produk, gambar, deskripsi, rate, harga before, harga after dan tanggal buat.

Untuk link website secara online dapat diakses melalui link berikut :

https://queendimsumswk.000webhostapp.com/

Langkah-Langkah Hosting Ke Website

1.       Buka website https://www.000webhost.com/

2.       Jika belum memiliki akun maka scroll ke bawah lalu klik free sign up. Setelah itu isikan email aktif, password, dan ulangi password untuk verifikasi lalu klik sign up.

3.       Jika sudah berhasil mendaftar maka login menggunakan akun dan password yang sudah terdaftar. Maka tampilannya akan seperti berikut

4.       Klik +buat situs baru. Nama website kami isi dengan “QueenDimsum”, lalu passwordnya 8 digit. Setelah itu klik Buat.

5.       Maka website baru dengan domain https://queendimsumk2.webhostapp.com telah dibuat seperti pada gambar berikut

6.       Selanjutnya klik website maka akan muncul tampilan seperti berikut

7.       Pergi ke Tool -> File Manager, kilik Upload File

8.       Maka akan muncul tampilan pada laman baru seperti berikut, lalu buka folder public_html

9.       Buka folder yang berisi file website lalu blok semua file kecuali file database

10.   Setelah itu, drag elemen tersebut menuju file manager website webhost -> folder public_html untuk mengupload file tersebut. Maka akan muncul tampilan seperti dibawah ini. Lalu pilih upload.

11.   Setelah upload file berhasil, maka kita rubah permissionnya (dari yang tidak ada “x”nya menjadi ada) agar other dapat membaca dan mengeksekusi. Cara merubahnya yaitu centang folder public_html -> Klik change permission (ikon gambar gembok) -> centang bagian seperti pada gambar.

Sebelum

Sesudah. Lalu klik change

Berikut tampilan sesudah merupah permissionnya

 

12.   Kalau sudah, atur databasenya. Kembali pada laman webhouse, klik database Manager lalu klik +database baru

13.   Isi nama database, username database, password, lalu klik buat

Maka database telah dibuat

14.   Kemudian klik laman file manager lalu ubah file dbconnect.php

Menjadi seperti berikut. Klik save

15.   Kembali ke laman webhost, klik kelola database, lalu pilih phpmyadmin

16.   Setelah itu akan muncul laman baru database PhpMyAdmin. Pilih impor lalu klik choose file untuk mengupload database sql

17.   Jika sudah, scroll ke bawah lalu klik Go

18.   Maka database sudah terupload seperti pada gambar

19.   Jika sudah, maka website sudah dapat diakses secara online dengan link yang ada pada halaman awal webhost

BAB IV
PENUTUP

4.1  Kesimpulan

Berdasarkan hasi dari implementasi pembuatan website maka dapat disimpulkan sebagai berikut. Website ini dapat membantu dan memudahkan dalam prose pemasaran “Queen Dimsum” dan memudahkan pembeli dalam melakukan pesanan karena dapat di akses dimana saja dengan menggunakan internet. Beberapa kelebihan dari website ini yaitu :

1)   Pembeli mudah melakukan proses memilih/ melakukan pemesanan karena produk sudah dijelaskan secara rinci.

2)      Website di desain secara sederhana dan tidak ribet.

3)      Tampilannya lebih menarik.

4.2  Saran

Berikut ini adalah beberapa saran yang nantinya diharapkan dapat dievaluasi lebih lanjut agar kedapannya agar penulis dapat membuat website dengan baik.

1)      Rutin melakukan perubahan desain agar memiliki kesan yang sesuai dengan perkembangan zaman

2)      Memberikan fitur-fitur tambahan dan menu-menu yang lain agar semakin komplit.

3)   Pengembangan macam-macam produk yang nantinya dapat dibedakan menjadi beberapa kategori produk.

DAFTAR PUSTAKA

BAGIR, M., 2022. LAPORAN TUGAS AKHIR PEMBUATAN WEBSITE E-COMMERCE. [online] Eprints.uns.ac.id. Available at: < https://eprints.uns.ac.id/4254/1/Skripsi-Muhammad_Bagir.pdf > [Accessed 10 May 2022].

Budiman, I., 2022. PERANCANGAN WEB UNTUK PENJUALAN MAKANAN KHAS DAERAH CEPU DI TOKO BANDJIR JAYA NASKAH PUBLIKASI - PDF Free Download. [online] adoc.pub. Available at: < https://adoc.pub/perancangan-web-untuk-penjualan-makanan-khas-daerah-cepu-di-.html > [Accessed 5 May 2022].

Gita Safitri, A., 2022. SISTEM ANJUNGAN TAMU MANDIRI BERBASIS WEB DI ATR/BPN KANTOR PERTANAHAN KABUPATEN PONOROGO. [online] Eprints.uns.ac.id. Available at: < https://eprints.uns.ac.id/44121/1/M2116003_abstrak.pdf > [Accessed 5 May 2022].