Laporan HCI Kelompok 4

 

         

      

COMP6176 - HUMAN AND COMPUTER INTERACTION 

LAPORAN PROYEK AKHIR

“WeService”

KELOMPOK 4 :

David                                                           2301868491

Fransiscus Xaverius David Hardjanto     2301863755

Fernandi Widardo                                      2301864000

Gabriel Fortino Bodhi                               2301862342  

UNIVERSITAS BINA NUSANTARA

JAKARTA

2021

PENDAHULUAN

Perkembangan teknologi yang sangat cepat sangat membantu dalam memenuhi kebutuhan sehari-hari seseorang. Namun bukan berarti semua kebutuhan yang ada tersebut dapat dipenuhi secara tepat sesuai keinginan dari seseorang tersebut, ada bidang-bidang tertentu dimana teknologi belum cukup merangkul mereka. Berikut adalah masalah yang seringkali ditemui antara lain :

• Banyak orang yang tidak sempat untuk mencari jasa yang tepat secara cepat dalam mengatasi permasalahan kebutuhan sehari-hari 

• Banyak orang yang baru membuka usaha jasa tetapi susah untuk mempromosikan usaha jasanya

• Banyak orang yang tidak mempunyai pekerjaan atau ingin bekerja sampingan untuk menghasilkan uang

Proyek ini dibuat karena terdapat potensi dari masalah-masalah di atas dimana terdapat target yang membutuhkan jasa dan terdapat target yang dapat menyediakan jasa. Berikut adalah solusi yang diberikan melalui proyek ini dari masalah-masalah di atas antara lain :

• Mempermudah pengguna dalam mengurus kebutuhan sehari-hari dengan menggunakan layanan usaha jasa yang terdaftar

• Mempromosikan usaha jasa yang ada kepada pengguna sesuai dengan jenis usaha jasa

• Memberdayakan sumber daya manusia untuk mengurangi pengangguran dan bekerja sesuai dengan kemauan dan jenis jasa yang diminati

Ide dari proyek ini adalah dengan menghubungkan seseorang atau sekelompok orang yang membutuhkan jasa dengan seseorang atau sekelompok orang yang dapat menyediakan jasa tersebut dengan begitu kedua pihak diuntungkan dengan transaksi yang terjadi. Tujuan dari proyek ini adalah untuk merangkul sumber daya manusia yang belum memiliki lapangan untuk menggunakan kemampuannya dan juga merangkul usaha-usaha jasa yang baru berkembang atau yang masih kecil dan tidak dapat bersaing dengan perusahaan-perusahaan jasa yang besar.

FEATURES

Fitur-fitur yang terdapat pada proyek ini antara lain:

1.  Book Service : Jasa yang diinginkan dapat didapatkan dengan cara pemesanan

2. Searching & Filter : Jasa yang ingin dicari dapat dicari dengan menggunakan search box dan filter yang disediakan

3. Recommendation : Jasa-jasa yang dinilai baik akan direkomendasikan kepada pengguna 

4. Transaction History : Transaksi yang telah dilakukan akan disimpan untuk agar dapat dipesan kembali

PROTOTYPE DESIGN

Berikut adalah design untuk prototype yang dibuat:

1.   Sign Up & Sign In Page

2. Landing Page

3. Search for Services

4. Service Page

5. Service Detail Page

6. Payment Page

EVALUATION

Pada awal pengerjaan UI website, kami butuh mencari inspirasi di website-web lain sebagai referensi design web kami. Kami menjadikan UI dari website-website perusahaan E-commerce yang cukup terkenal seperti Tokopedia, Blibli, Grab, dan Shopee sebagai acuan design UI website kami. 

UI prototype yang sudah kami buat telah melewati tahapan diskusi. Kami terlebih dahulu berdiskusi tentang elemen-elemen UI apa saja yang dapat kami ambil dari website-website referensi kami dan melakukan redesign ataupun membuat design baru tetapi dengan versi kami. Kemudian, menurut kami UI yang telah kami buat cocok untuk aplikasi kami dan sesuai dengan apa yang kami inginkan.

Link Prototype : 

https://www.figma.com/proto/4Z3D2liPTvxIQVWJIDFOr3/HCI?node-id=2%3A6&scaling=scale-down&page-id=0%3A1

Review 1

Review Linked List Mid Semester


Apa itu linked list?

linked list adalah linear data structure (struktur data linear) yang dimana datanya tidak disimpan pada lokasi memori yang bersebelahan. Data pada linked list disimpan menggunakan pointer. linked list terdiri dari node yang berisikan data dan memiliki link dengan node selanjutnya pada list tersebut. Terdapat 2 jenis Linked List, berikut contohnya :

Single Linked List

Singly linked list memiliki node yang memiliki 2 kotak yang menyimpan data tersebut dan pointer yang menyimpan alamat node berikutnya. Pada node terakhir, terdapat pointer yang menyimpan nilai "NULL" yang disebut dengan tail. sedangkan node pertama disebut dengan head.

Double Linked List

Dalam doubly linked list, setiap node terdapat pointer yang menunjuk ke node sebelum dan sesudahnya. dalam doubly linked list ini, setiap node berisikan 3 bagian, yaitu node data, dan pointer ke node sebelum dan sesudahnya.

Keunggulan linked list dibandingkan dengan array:

1. ukuran untuk array harus di deklarasikan diawal, sedangkan linked list tidak harus.
2. ukuran linked list bisa bertambah seiringnya pertambahan data (dinamis)
3. penyimpanan linked list tidak harus disimpan secara bersebelahan pada memori
4. dapat menyimpan primitive data types ataupun objek pada linked list

Stack & Queue

Stack adalah kumpulan elemen data yang disimpan dalam satu lajur linear. Kumpulan data tersebut hanya dapat diakses pada satu tempat saja, yaitu posisi yang paling atas dari tumpukkan tersebut (TOP). Konsep utamanya adalah LIFO (Last In First Out), yaitu data terakhir yang masuk kedalam urutan tersebut akan menjadi data pertama yang dikeluarkan dari kumpulan (seperti pada tumpukkan saat mencuci piring, piring yang ditaruh terakhir akan menjadi piring pertama yang diambil untuk dicuci).

Terdapat 2 operasi yang sering diterapkan dalam struktur data Stack, yaitu Push dan Pop. Beberapa contoh operasi pada Stack :

• Push : digunakan untuk menambah data pada Stack paling atas.
• Pop : digunakan untuk mengambil data pada Stack paling atas.
• Create Stack : membuat Stack baru X, dengan jumlah elemen data kosong.
• IsFull : untuk mengecek apakah Stack sudah penuh.
• IsEmpty : untuk mengecek apakah Stack kosong

Sedangkan Queue adalah struktur data linear yang dimana penambahan elemen data disalah satu ujungnya, sedangkan untuk pengurangannya dilakukan pada ujung lainnya. Queue menggunakan konsep FIFO(First In First Out), yaitu data yang pertama kali masuk kedalam urutan merupakan data yang pertama kali akan diakses.

Terdapat 2 operasi yang sering digunakan pada Queue :

• EnQueue : digunakan untuk memasukkan data kedalam queue.
• DeQueue : digunakan untuk mengeluarkan data terdepan dari Queue tersebut.

Hash Table

Hashing merupakan cara untuk mencari objek dengan spesifik dari suatu kumpulan objek yang mirip.

Hash table sendiri adalah salah satu struktur data yang terdiri atas sebuah table serta fungsi yang ditujukan untuk memetakan nilai yang unik dari setiap baris (record) menjadi angka (hash) lokasi baris tersebut kedalam sebuah table. Hash table digunakan untuk mempercepat pencarian terhadap data yang telah disimpan. Waktu yang dibutuhkan untuk insertion, deletions, dan searching relative sama dibandingkan dengan struktur data yang lain.

Operasi pada hash table :

-   Insert : diberikan sebuah nilai dan key, insert nilai kedalam table

-     Find : diberikan key, untuk menemukan nilai yang terhubung pada key tersebut

-  Remove : diberikan key, kemudian mencari nilai yang terhubung pada key dan menghapus nilai tersebut

getIterator : mengembalikan iterator, yang memeriksa nilai.

Kelebihan Hash table :

-   hash table relative lebih cepat

-   kecepatan insertion, deletion dan searching relative sama


Binary Search Tree

Binary search tree (BST) merupakan struktur data bersifat hirarkis yang menggunakan node sebagai dasarnya, seperti halnya pada linked list. BST ini digunakan untuk Fast Searching, Rapid Sorting, Easy Insertion, dan Deletion Data. Dalam BST, tiap node hanya boleh memiliki maksimal dua sub-tree dan kedua subtree tersebut harus terpisah. Subtree sebelah kiri akan memiliki node yang nilainya lebih rendah daripada parent node, sedangkan sebelah kanan berisikan node yang memiliki nilai lebih tinggi daripada parent node.

Insertion

Memasukkan sebuah nilai baru kepada binary tree akan selalu masuk ke bagian paling bawah. Dimulai dengan mencari nilai root sampai ke leaf node, dan jika nilai yang dimasukkan lebih kecil dari leaf node, maka angka yang dimasukkan akan berada di sebelah kiri leaf node, berlaku sebaliknya dengan nilai yang lebih besar.

Searching

Dalam mencari suatu nilai pada BST, akan dilihat dan dibandingkan dengan nilai pada root. Bila nilai yang diinginkan sama dengan nilai pada root, makan root adalah nilai yang dicari. Namun jika yang dicari lebih kecil, makan akan mencari pada subtree disebelah kiri node root. Berlaku sebaliknya, jika nilai yang dicari lebih besar daripada root, maka akan mencari pada subtree sebelah kanan dari node root.

Deletion

Ada beberapa kondisi didalam melakukan Deletion pada BST :

1. Jika node yang akan dihapus adalah leaf node, makan dapat langsung menghapus leaf node tersebut.
2. Jika node yang dihapus hanya memiliki 1 subtree, child node ini akan dicopy ke node yang akan dihapus, baru dilakukan deletion.
3. Jika node yang akan dihapus memiliki 2 subtree, dapat dilakukan dengan 2 cara, yaitu dengan mengambil nilai maksimum dari sebelah kiri, atau dengan nilai minimum pada subtree sebelah kanan.

Minimarket :


#include<stdio.h>
#include<string.h>
#include<stdlib.h>
#include<math.h>

struct toko{
int qty, price;
char name[100];
toko *next, *prev;
}*head=NULL, *tail=NULL;

toko* createNode(char *name, int qty, int price){
toko *temp = (toko*) malloc(sizeof(toko));
strcpy (temp->name, name);
temp->qty = qty;
temp->price = price;
temp->prev = temp->next = NULL;
return temp;
}

void pushHead (char *name, int qty, int price){
if (!head) head = tail = createNode(name, qty, price);
else {
toko *temp = createNode(name, qty, price);
temp->next = head;
head->prev = temp;
head = temp;
}
}

void pushTail (char *name, int qty, int price){
if (!head) head = tail = createNode(name, qty, price);
else {
toko *temp = createNode(name, qty, price);
tail->next = temp;
temp->prev = tail;
tail = temp;
}
}

void popHead(){
if(!head) return;
else if (head == tail){
toko *temp = head;
head = tail = NULL;
free(temp);
}
else {
toko *temp = head;
head = head->next;
head->prev = NULL;
free(temp);
}
}

void popTail(){
if(!head) return;
else if (head == tail){
toko *temp = head;
head = tail = NULL;
free(temp);
}
else {
toko *temp = tail;
tail = tail->prev;
tail ->next = NULL;
free(temp);
}
}

void pushMid (char *name, int qty, int price){
if (!head) head = tail = createNode(name, qty, price);
else if (strcmp(name, head->name) < 0) pushHead(name, qty, price);
else if (strcmp(name, tail->name) > 0) pushTail(name, qty, price);
else {
toko *temp = createNode(name, qty, price);

toko *curr = head;
while (strcmp(name, curr->name) > 0){
curr = curr->next;
}

temp->next = curr;
temp->prev = curr->prev;

curr->prev->next = temp;
curr->prev = temp;
}
}

void popSearch(char *name){
if (!head) {
printf("No item found\n");
return;
}
else if (strcmp(head->name, name) == 0) popHead();
else if (strcmp(tail->name, name) == 0) popTail();
else {
toko *temp = head;
toko *curr;

while (strcmp(name, temp->name) < 0){
curr = temp;
temp = temp->next;
}

curr->next = temp->next;
temp->next->prev = curr;

free(temp);
}
}
int tot=0;
void printAll(){
toko *temp = head;
if(!head){
printf("No item found\n"); return;
}
else{
while (temp){
printf ("item name : %s, quantity : %d, price each : %d\n", temp->name, temp->qty, temp->price);
temp = temp->next;
}
}
}

void printCheckout(){
toko *temp = head;
if(!head){
printf("No item found\n"); return;
}
else{
while (temp){
printf ("item name : %s, quantity : %d, price each : %d\n", temp->name, temp->qty, temp->price);
tot += temp->price * temp->qty;
temp = temp->next;
}
}
}

int main(){
char name[100];
int qty, price;
printf("Input item name : ");
scanf ("%[^\n]", &name);
printf("Input item quantity : ");
scanf ("%d", &qty); getchar();
price = rand() % 1000;

pushMid(name, qty, price);
printf("Input success\n");
printf("press enter to continue...");getchar();
system("cls");
int x = 0;
do{
printf("1. add another item\n");
printf("2. edit item quantity\n");
printf("3. delete item\n");
printf("4. view\n");
printf("5. checkout\n");
int menu;
printf("Choose menu : ");
scanf("%d", &menu); getchar();
system("cls");
switch (menu){
case 1 :{
printf("Input item name : ");
scanf ("%[^\n]", &name);
printf("Input item quantity : ");
scanf ("%d", &qty); getchar();
price = rand() % 1000;
pushMid(name, qty, price);
printf("Input success\n");
printf("press enter to continue...");getchar();
system("cls");
break;
}
case 2 :{
printf("Input item name to change the quantity : ");
scanf("%[^\n]", &name);
printf("Change quantity to : ");
scanf("%d", &qty);getchar();
price = rand() % 1000;
popSearch(name);
pushMid(name, qty, price);
printf("Input change success\n");
printf("press enter to continue...");getchar();
system("cls");
break;
}
case 3 : {
printf("Input item name to delete : ");
scanf("%[^\n]", &name);
popSearch(name);
printf("Deletion success\n");getchar();
printf("press enter to continue...");getchar();
system("cls");
break;
}
case 4 : {
printAll();
printf("press enter to continue...");getchar();
system("cls");
break;
}

case 5 : {
printCheckout();
printf ("Your total price : %d\n", tot);
printf ("press enter to continue...");getchar();
printf ("kindness is free..");getchar();

return 0;
}
}
}while(x!=4);
return 0;
}

Binary Search Tree

Binary Search Tree

Binary search tree (BST) merupakan struktur data bersifat hirarkis yang menggunakan node sebagai dasarnya, seperti halnya pada linked list. BST ini digunakan untuk Fast Searching, Rapid Sorting, Easy Insertion, dan Deletion Data. Dalam BST, tiap node hanya boleh memiliki maksimal dua sub-tree dan kedua subtree tersebut harus terpisah. Subtree sebelah kiri akan memiliki node yang nilainya lebih rendah daripada parent node, sedangkan sebelah kanan berisikan node yang memiliki nilai lebih tinggi daripada parent node.


Insertion

Memasukkan sebuah nilai baru kepada binary tree akan selalu masuk ke bagian paling bawah. Dimulai dengan mencari nilai root sampai ke leaf node, dan jika nilai yang dimasukkan lebih kecil dari leaf node, maka angka yang dimasukkan akan berada di sebelah kiri leaf node, berlaku sebaliknya dengan nilai yang lebih besar.


Searching

Dalam mencari suatu nilai pada BST, akan dilihat dan dibandingkan dengan nilai pada root. Bila nilai yang diinginkan sama dengan nilai pada root, makan root adalah nilai yang dicari. Namun jika yang dicari lebih kecil, makan akan mencari pada subtree disebelah kiri node root. Berlaku sebaliknya, jika nilai yang dicari lebih besar daripada root, maka akan mencari pada subtree sebelah kanan dari node root.


Deletion

Ada beberapa kondisi didalam melakukan Deletion pada BST :

1. Jika node yang akan dihapus adalah leaf node, makan dapat langsung menghapus leaf node tersebut.
2. Jika node yang dihapus hanya memiliki 1 subtree, child node ini akan dicopy ke node yang akan dihapus, baru dilakukan deletion.
3. Jika node yang akan dihapus memiliki 2 subtree, dapat dilakukan dengan 2 cara, yaitu dengan mengambil nilai maksimum dari sebelah kiri, atau dengan nilai minimum pada subtree sebelah kanan..

Sumber :

https://www.mahirkoding.com/struktur-data-binary-search-tree-bst/

https://www.geeksforgeeks.org/binary-search-tree-data-structure/

https://www.geeksforgeeks.org/binary-search-tree-set-2-delete/

http://new-funday.blogspot.com/2012/12/struktur-data-tree-dan-penjelasaanya.html

Hash Table & Binary Tree

Hash Table

Hashing merupakan cara untuk mencari objek dengan spesifik dari suatu kumpulan objek yang mirip.

Hash table sendiri adalah salah satu struktur data yang terdiri atas sebuah table serta fungsi yang ditujukan untuk memetakan nilai yang unik dari setiap baris (record) menjadi angka (hash) lokasi baris tersebut kedalam sebuah table. Hash table digunakan untuk mempercepat pencarian terhadap data yang telah disimpan. Waktu yang dibutuhkan untuk insertion, deletions, dan searching relative sama dibandingkan dengan struktur data yang lain.

  

Operasi pada hash table :

-   Insert : diberikan sebuah nilai dan key, insert nilai kedalam table

-     Find : diberikan key, untuk menemukan nilai yang terhubung pada key tersebut

-  Remove : diberikan key, kemudian mencari nilai yang terhubung pada key dan menghapus nilai tersebut

getIterator : mengembalikan iterator, yang memeriksa nilai.

Kelebihan Hash table :

-   hash table relative lebih cepat

-   kecepatan insertion, deletion dan searching relative sama

Binary Tree

Binary tree merupakan struktur data yang memiliki bentuk tidak linier, melainkan menggambarkan hubungan hirarki (one to many) antara elemennya. Binary tree memiliki syarat yaitu setiap nodenya hanya boleh memiliki maksimal dua subtree, dan kedua subtree tersebut tidak boleh saling berhubungan.

Binary tree berfungsi untuk menyimpan informasi nama atau bilangan. Dengan membagi data menjadi dua lalu mencari titik tengah sebagai patokkannya(simpul pertama disebut dengan root).

Aturan yang harus dipenuhi :

-   Semua data dibagian kiri subtree node x, selalu lebih kecil dari data yang ada didalam node x itu sendiri.

-   Semua data dibagian kanan subtree dari node x, selalu lebih besar dari data yang ada didalam node x itu sendiri.

Jenis-jenis binary tree :

-  Perfect binary tree : tiap nodenya memiliki dua child (kecuali node terakhir), dan tiap subtree memiliki Panjang path yang sama

-   Complete binary tree : subtree memiliki Panjang yang berbeda, dan selain node terakhir memiliki 0 atau 2 child

-   Skewed binary tree : semua node kecuali node terakhir hanya memiliki 1 child

Hashing table implementation in blockchain

Hashing berguna untuk mengambil input string dengan panjang berapa pun dan memberikan output dengan panjang yang tetap. Dalam konteks crypto currency (seperti Bitcoin), transaksi diambil sebagai input dan dijalankan dengan algoritma hasing yang memberikan out dengan panjang yang tetap (Bitcoin menggunakan SHA-256).

Referensi :

https://www.hackerearth.com/practice/data-structures/hash-tables/basics-of-hash-tables/tutorial/

https://www.geeksforgeeks.org/binary-tree-set-1-introduction/

https://selembardigital.com/apa-itu-hashing-di-bawah-tudung-blockchain/

Linked List (Stack & Queue)

Stack & Queue

Stack adalah kumpulan elemen data yang disimpan dalam satu lajur linear. Kumpulan data tersebut hanya dapat diakses pada satu tempat saja, yaitu posisi yang paling atas dari tumpukkan tersebut (TOP). Konsep utamanya adalah LIFO (Last In First Out), yaitu data terakhir yang masuk kedalam urutan tersebut akan menjadi data pertama yang dikeluarkan dari kumpulan (seperti pada tumpukkan saat mencuci piring, piring yang ditaruh terakhir akan menjadi piring pertama yang diambil untuk dicuci).

Terdapat 2 operasi yang sering diterapkan dalam struktur data Stack, yaitu Push dan Pop. Beberapa contoh operasi pada Stack :

• Push : digunakan untuk menambah data pada Stack paling atas.
• Pop : digunakan untuk mengambil data pada Stack paling atas.
• Create Stack : membuat Stack baru X, dengan jumlah elemen data kosong.
• IsFull : untuk mengecek apakah Stack sudah penuh.
• IsEmpty : untuk mengecek apakah Stack kosong

Sedangkan Queue adalah struktur data linear yang dimana penambahan elemen data disalah satu ujungnya, sedangkan untuk pengurangannya dilakukan pada ujung lainnya. Queue menggunakan konsep FIFO(First In First Out), yaitu data yang pertama kali masuk kedalam urutan merupakan data yang pertama kali akan diakses.

Terdapat 2 operasi yang sering digunakan pada Queue :

• EnQueue : digunakan untuk memasukkan data kedalam queue.
• DeQueue : digunakan untuk mengeluarkan data terdepan dari Queue tersebut.

Referensi

https://furqonubd.wordpress.com/2013/05/20/stack-and-queue/

https://binusmaya.binus.ac.id/newStudent/#/class/resources.COMP6048/010544/1920/CL/11725

https://media.geeksforgeeks.org/wp-content/cdn-uploads/Stack-Queue.png

Linked List

Apa itu linked list?



linked list adalah linear data structure (struktur data linear) yang dimana datanya tidak disimpan pada lokasi memori yang bersebelahan. Data pada linked list disimpan menggunakan pointer. linked list terdiri dari node yang berisikan data dan memiliki link dengan node selanjutnya pada list tersebut. Terdapat 4 jenis Linked List, berikut contohnya :


Singly Linked List

Singly linked list memiliki node yang memiliki 2 kotak yang menyimpan data tersebut dan pointer yang menyimpan alamat node berikutnya. Pada node terakhir, terdapat pointer yang menyimpan nilai "NULL" yang disebut dengan tail. sedangkan node pertama disebut dengan head.


Circular Singly Linked List

Dalam Circular Singly Linked List, terdapat node terakhir (tail) yang memiliki pointer menuju node pertama (head) sehingga membentuk sebuah sirkuit, yang berarti tidak ada awal maupun akhir dan tidak ada NULL setelah node manapun.


Doubly Linked List

Dalam doubly linked list, setiap node terdapat pointer yang menunjuk ke node sebelum dan sesudahnya. dalam doubly linked list ini, setiap node berisikan 3 bagian, yaitu node data, dan pointer ke node sebelum dan sesudahnya.


Circular Doubly Linked List

Circular doubly linked list memiliki ciri yang sama seperti doubly linked list, yaitu pada setiap data memiliki node yang didalamnya terdapat pointer menuju node sebelum dan sesudahnya. Selain itu, pada circular doubly linked list tidak memiliki NULL pada seluruh nodenya. Lalu pada node terakhir pada list tersebut menyimpan alamat node pertama pada list, dan node pertama menyimpan alamat node terakhir pada pointer sebelumnya.


Keunggulan linked list dibandingkan dengan array:

1. ukuran untuk array harus di deklarasikan diawal, sedangkan linked list tidak harus.
2. ukuran linked list bisa bertambah seiringnya pertambahan data (dinamis)
3. penyimpanan linked list tidak harus disimpan secara bersebelahan pada memori
4. dapat menyimpan primitive data types ataupun objek pada linked list

Referensi

https://www.geeksforgeeks.org/data-structures/linked-list/#singlyLinkedList

https://www.javatpoint.com/singly-linked-list

https://www.javatpoint.com/circular-singly-linked-list

https://www.javatpoint.com/circular-doubly-linked-list
https://www.javatpoint.com/doubly-linked-list