Membuat Authentication Di Laravel

Membuat table roles 

table roles ini berfungsi untuk memisahkan antara admin dan user ketika melakukan login, jadi ini akan memisahkan antara admin dan user agar nantinya bisa menentukan hak akses yang bisa dikelilah antara pengguna yang login.

Disini kita akan menambahkan sebuah table didalam database dengan menggunakan terminal yang ada di Visual Studio Code 

Maksud dari gambar diatas jika  data role tersebut tidak diisi maka akan diisikan secara default menjadi User

Selanjutnya kita akan mengisikan table di bagian up didalamnya kita akan memasukkan nama field beserta tipe datanya

Selanjutnya disini kita akan membuat middleware untuk baigan admin middleware ini akan berfungsi untuk membedakan antara admin dan user, jadi bisa dikatakan sebagai satpam untuk mengawas siapa yang login dan nantinya kalau dia admin maka dia bisa memanagement data pada website sedangkan user hanya bisa melihat bagian depan website. 

Jadi kita akan menambahkan file didalam middleware seperti gambar yang dibawah

Untuk menambahkan middleware langsung saja kalian ketikan di terminal Vsc kalian seperti gambar yang dibawah

Kalian bisa lihat isi dari file yang kalian buat tadi di middleware

Disini kita akan menambahkan auth  untuk bisa mencheck inputannya admin atau user dan kita cocokan dengan field role yang kita buat sebelumnya.

Sewaktu pengguna melakukan login apakah username yang diinputkan user atau admin lalu di check didalam filed role yang kita buat tadi, kalau inputannya admin maka pengguna akan diarahkan ke request selanjutnya sedangkan kalau user maka akan diarahkan ke halaman home.

Jangan lupa untuk menambahkan dibagian atas untuk pemanggilan class Authnya agar kita bisa menjalankan fungsi dari Auth tersebut

Setelah kita berhasil untuk membuat middleware selanjutnya kita akan mendaftarkannya di kernel, dikernel ini kita akan mendaftarkan middleware yang kita buat sebelumnya agar nantinya middleware yang kita buat bisa digunakan di route.

Ketik seperti gambar yang diatas karna kita akan memanggil middleware admin di route


Authentifikasi  Admin

Selanjutnya kita akan menambahkan disisi templatingnya untuk loginnya jadi kalau kita check di authentication quickstart kita harus menjalankan beberapa comman untuk membuat templating tersebut

Disitu ada dua pertama kita jalankan composer require laravel/ui --dev dan dilanjutkan dengan php artisan ui vue --auth  authentifikasi diatas harus kita pasang karna secara default laravel versi 6  authentifikasi ini tidak langsung dipasangkan secara otomatis maka dari itu kita perlu untuk menginstall authentifikasi tersebut.

Setelah itu buka file homeController yang ada di folder controller

Hapus dibagian construct karena nantinya kita akan membuat halaman homepage  ini tetap bisa diakses meskipun user tidak melakukan login.

Setelah itu pergi ke file web/router untuk menambahkan middleware, disana kita akan menambahkan auth dan admin.

Auth dan admin ini adalah kita dapatkan dari kernel yang kita buat sebelumnya

Selanjutnya kita akan menggantikan beberapa redirect karena sebelumnya laravel secara default  mengarahkannya ke home, kita akan ganti dari home ke /, untuk mengganti default dari laravel tersebut kalian buka isi file yang ada Controller/Auth lalu masuk ke beberapa file seperti confirm password dan lainnya seperti gambar yang dibawah

Ganti semua redirectTo yang ada difile yang diatas dengan slash (/) seperti gambar yang dibawah.

selanjutnya kita akan menambahkan tombol logout dan informasi pertama kita buat dibagian admin lalu dilanjutkan dibagian user, untuk di admin kita bisa membuka file view yang sebelumnya telah kita buat.

kita tambahkan dibagian span, disini kita panggil dengan Auth dan memanggil namenya

setelah itu kita ke file admin.blade.php, disini kita butuh menambahkan untuk bagian logout karena sebelumnya kita sudah menambahkan login dan sekarang tinggal menambahkan tombol logoutnya.

untuk actionnya kita bisa menambahkan Url seperti gambar yang diatas lalu kita gunakan method = Post karena kita akan melogoutkan admin dengan cara Post, jangan lupa tambahkan @csrf, @csrf ini berfungsi untuk mengambankan form tersebut

untuk mencoba hasil dari yang telah kita buat tadi kita bisa jalankan server laravel di host 5500, langsung saja kita kunjunggi dibagian admin maka diaakan langsung mengarahkan kita ke bagian login.

Ok disini kita akan coba untuk login karena sebelumnya kita telah membuat / mendaftarkan untuk login dibagian admin, kita bisa check didalam phpmyadmin sebagai DBMS untuk database yang kita gunakan.

Dari gambar yang diatas kita bisa lihat dibagian roles dengan Username Raju sebagai Admin, jadi disini kita akan login dengan username raju.

Jika sistem mengarahkan ke bagian dashboard admin berarti apa yang kita buat tadi berhasil mengunakan authentikasi

setelah berhasil untuk melakukan login selanjutnya kita akan coba untuk menlogoutkan admin tersebut.

kalau berhasil maka sistem akan mengarahkan bagian home utama dari website, ini dikarenakan sebelumnya kita telah menambahkan middleware (isAdmin).

Authentifikasi  User


disini kita akan menambahkan authentifikasi user sebagai untuk menentukan mana yang sudah login dan yang belum login pada bagian user, untuk user kita masuk dibagian source code sisi dari templating user, dibagian templating yang kalian gunakan kalian bisa menambahkan diantara form desktop button dan mobile button, di form tersebut kita akan membuat sebuah kondisi Guest dan Auth

Dibagian Guest kita akan bikin action untuk bisa login, nah berhubungan kita disini menggunakan tombol kita akan rubah /tambahkan dibagian button  tersebut dengan type = button seperti gambar yang diatas dan tambahkan onclick, onclick ini digunakan karena di button ini kita tidak menggunakan link/ hreff jadi sebagai gantinya kita menggunakan onclick, kalau kita menggunakan link /  href tombolnya bisa menjadi berantakan maka dari itu kita menggunakan onclick supaya tombolnya bisa jadi bagus atau tidak berantakan karna behavior yang sama dengan link / href kita bisa gunakan onlick sebagai gantinya. 

Dibagian onclick = kita bisa menambahkan subuah value event.preventDefault(); fungsi dari preventDefault();  ini kita akan mendisable  behavior dasarnya lalu kita jalankan location.href sebagai untuk menglinkkan url yang kita inginkan, karna disini kita akan melakukan login maka kita akan mengarahkan hrefnya ke login.  Kalian bisa mencheck untuk Guest ini dengan cara menekan tombol login maka otomatis sistem akan mengarahkan pengguna untuk melakukan login.

Selanjutnya kita akan membuat bagian Auth kalian bisa coppy paste formnya seperti form Guest yang sebelumnya 

Perbedaan antara Guest dan Auth ini kalau dibagian Guest kita menggunakan onclick dan type=button sedangkan dibagian Auth kita tidak menggunakan type dan onclick dan dibagian Auth tambahkan action url untuk menglinkkan logout  dan tambahkan method=POST  dan type=submit, jangan lupa untuk menambahkan @csrf setiap membuat form wajib menambahkan @csrf  untuk bisa mencheck untuk Auth ini kalian bisa  menekan tombol logout tapi sebelumnya kalian harus sudah login untuk bisa menggunakan / menclick tombol logout ini setelah menekan tombol logout maka sistem akan otomatis mengarahkan pengguna untuk keluar dari login.

Read More

MENGGUNAKAN ACCESSORS & MUTATORS DI LARAVEL

Untuk mendefinisikan accessor, buat metode getFooAttribute pada model Anda di mana Foo adalah nama berhias "studly" dari kolom yang ingin Anda akses. Dalam contoh ini, kita akan mendefinisikan accessor untuk atribut first_name. Accessor akan secara otomatis dipanggil oleh Eloquent ketika mencoba untuk mengambil nilai atribut first_name:

Disini ketika kita ingin menambahkan gambar di penyimpanan database, nah gimana untuk menerapkan agar kita bisa menyimpan gambar di dalam database supaya pada saat menyimpan gambarnya tersebut bisa full Url

Pertama kita buka dulu model

Di model sebelumnya kita telah membuat relasinya untuk menghubungakan antara product dengan model productGallery, di data prodcut kita bisa mengambil data yang ada di dalam productGallery secara langsung dengan membuat relasi gallery seperti gambar yang dibawah

Setelah itu untuk bagian di file model productGallery ada beberapa fungsi yang akan ditambahkan.

Setelah kita mencoppy file pada eloquent dari file lain di bagian relasinya kita akan menganti dari prodcut menjadi galleries dan dari HasMany menjadi BelongTo yang maksudnya productGallery ini kepunyaan dari relasinya product.

Setelah itu kita akan menambahkan satu function lagi dimana function ini akan akan berfungsi di database ketika kita menyimpannya  foto tersebut tidak tersimpan secara  default  / tidak bersama full Urlnya, jadi tidak menggunakan full Http ibaratnya hanya pindah satu folder saja / cuma menyimpan folder-folder dan nama filenya saja tetapi tidak menyimpan bersama full Urlnya,  ini akan menjadi masalah ketika kita akan membuat API dari data tersebut karna nanti kalau kita mengakses/ membuatkan APInya gambarnya tidak muncul sehingga bagian dari front-end gagal menampilkan gambar ketika  mengload data tersebut

Disini kita akan memanfaatkan fungsi dari ASSESSORS dan MUTATORS

Tapi disini kita hanya mengunakan assessors saja

Fungsi assessors ini membuat yang tadinya Url gambar tadi tidak menggunakan Http menjadi menggunakan Http Full Urlnya.

Nah untuk penerapannya kita bisa melihat seperti gambar yang dibawah

Jadi fungsi yang ada diatas kata getFirstname /getPhotoAttribute,  nah yang firstname/ photo itu adalah nama file gamabar yang akan disimpan, jadi kita mengubah file foto yang ada didalam database $value, $value itu adalah databasenya, jadi disini kita akan mengganti $value yang ada didalam database menjadi Full Url. Dan kita return ke url Store, karena gambar yang kita simpan berada didalam folder storage.

Setelah itu kita akan menggunakan fungsi file storage link di laravel agar gambar yang kita simpan bisa ditampilkan dilayar,  kalian harus menjalankan comman seperti yang dibawah

Fungsinya dari storage:link ini adalah menempelkan antara folder storage yang ada didalam laravel agar bisa diakses di public, jadi file ini akan bisa diakses oleh user dari manapun / secara public dan menampilkan data gambar yang telah diinputkan

Read More

Pengenalan Laravel

Laravel

Framework  PHP sangat memiliki implementasi, fitur, dan kemampuan sendiri. Dalam posting ini, kita akan melihat apa itu Laravel dan mengapa Anda harus mengunakannya.

PHP telah berevolusi sejak beberapa tahun terakhir yang menambahkan fitur-fitur modern untuk memenuhi permintaan programmer web.

Setiap kerangka kerja PHP memiliki implementasi, fitur, dan kemampuannya sendiri. Laravel menyediakan fitur unik seperti Eloquent, Restful Routing, Query Builder, Blade templating, dan Homestead yang menjadikan Laravel kerangka kerja yang hebat dan secara detail akan kita bahas di artikel selanjutnya.

Apa itu Framework Kerja?

Sebelum kita menyelami penjelasan Laravel, kita perlu memahami apa itu kerangka kerja. Secara umum, Framework adalah seperangkat struktur dan pedoman konseptual, yang digunakan untuk membangun sesuatu yang bermanfaat.

menurut wikipedia Framwork adalah abstraksi di mana perangkat lunak yang menyediakan fungsionalitas generik dapat diubah secara selektif dengan kode tambahan yang ditulis pengguna, sehingga menyediakan perangkat lunak khusus aplikasi. Framework menyediakan cara standar untuk membangun dan menggunakan aplikasi.

Secara sederhana, Framework adalah struktur yang dapat Anda gunakan untuk membangun sesuatu. Ini memungkinkan Anda untuk menggunakan komponen yang berbeda, berkomunikasi dengan API eksternal dan menentukan struktur aplikasi Anda.

Framework Berfungsi Untuk:


1.  Mengurangi Kompleksitas: Framework memudahkan untuk menghadapi situasi yang kompleks dan memecahnya menjadi beberapa bagian.

2.  Clean Code: Framework  membantu Anda menulis kode yang bersih dan dapat digunakan.

3.  Pengujian dan Debugging: Framework  membuat pengujian lebih mudah dan debugging menjadi menyenangkan.

4.  Pedoman Pengkodean: Framework  memaksa panduan ketat untuk mengikuti rekan tim Anda yang mempromosikan basis kode yang konsisten dengan lebih sedikit bug.

5.  Penskalaan: Framework  membantu Anda meningkatkan permintaan. Tidak peduli seberapa cepat aplikasi Anda tumbuh, kerangka kerja membuatnya lebih mudah untuk mengukur pada permintaan.


Laravel adalah Framework PHP open-source yang dirancang untuk membuat pengembangan aplikasi web agar lebih mudah dan lebih cepat.

Kenapa Laravel begitu banyak digunakan oleh pengembang web:

    1.  Sistem pengemasan modular dengan manajemen ketergantungan. Ini berarti Anda dapat dengan mudah menambahkan fungsionalitas ke aplikasi Laravel Anda tanpa menulisnya dari awal. Anda dapat membuat paket sendiri untuk kode yang Anda gunakan secara rutin atau menginstal paket yang siap digunakan melalui Komposer.

     2.  Sistem otentikasi lengkap

     3.  Pemetaan objek-relasional. ORM fasih yang disertakan dengan Laravel menyajikan tabel basis data sebagai kelas untuk akses dan manipulasi data yang lebih mudah.

     4.  Antarmuka baris perintah (CLI) yang dilengkapi dengan puluhan perintah yang dibuat sebelumnya (Artisan).

     5.  Pengujian otomatis. Tes otomatis disediakan sebagai bagian integral dari Laravel.

     6.  Lingkungan pengembangan virtual yang portabel. Homestead memberi para pengembang semua alat yang diperlukan untuk mengembangkan Laravel langsung dari kotak.

Apakah Laravel frontend atau backend?

Jawaban adalah "backend" Laravel adalah kerangka kerja PHP di sisi server; dengan itu Anda dapat membangun aplikasi tumpukan penuh, yang berarti aplikasi dengan fitur yang biasanya memerlukan backend, seperti akun pengguna, ekspor, bisa manajemen, menginput, update, edit, delete dll.

Seperti Apa MVC Yang Ada Di Dalam PHP Laravel?

MVC (Model-View-Controller) adalah pola arsitektur yang digunakan untuk memecah aplikasi menjadi tiga bagian mendasar: data (Model), antarmuka untuk melihat dan memodifikasi data (View) dan operasi yang dapat dilakukan pada data (Controller) .

Anggap saja anda akan memesan pizza. Anda menelepon dengan permintaan pengguna untuk pizza Pepperoni. Segera setelah permintaan Anda didaftarkan, orang yang membuat pizza (Pengendali) mendekonstruksi menjadi beberapa langkah: ambil adonan, nyalakan oven, taburi keju parut. Controller hanya dapat menggunakan sumber daya terbatas yang dimilikinya, toolset terbatas ini menjadi Model: tangan, oven, baki pizza, dll. Akhirnya, Anda menerima pizza, yang merupakan pemandangan indah.

Cara penataan aplikasi ini berguna karena membuat hal-hal dipisahkan menjadi area logis. Ini membuat kode Anda lebih terorganisir, kurang rapuh, dan lebih mudah di-debug. Laravel mengimplementasikan arsitektur MVC sebagai bagian dari desainnya.

Bisakah saya belajar Laravel tanpa PHP?

Laravel adalah PHP pada intinya, jadi belajar Laravel tanpa memiliki pemahaman yang baik tentang PHP tidak terlalu produktif. Anda tidak akan dapat membuat fungsionalitas tambahan dan Anda akan sepenuhnya bergantung pada yang dikirimkan Laravel sebagai bagian dari kerangka kerja. Intinya, Anda perlu konsep PHP dan OOP untuk memahami apa yang terjadi di bawah tenda dan menggunakan Laravel secara maksimal.

Apakah Laravel mudah dipelajari? Apa cara terbaik untuk belajar Laravel?

Laravel dianggap memiliki kurva belajar singkat, terutama jika Anda sudah terbiasa dengan PHP. Bahkan ketika macet, komunitas sangat membantu dan ada banyak sumber daya untuk membantu Anda mempelajari Laravel dari awal, dari podcast dan video hingga tutorial tertulis.

Cara yang baik untuk mempelajari Laravel adalah membaca dokumentasi, mengikuti beberapa guru online, seperti Taylor Otwell, Jeffrey Way dan Freek Van der Herten, melalui tutorial di luar sana dan ikuti. Akhirnya, mulailah membangun proyek Anda sendiri dan lakukan hal-hal yang berkaitan dengan google.

Is Laravel a CMS?

Tidak seperti CMS seperti Drupal atau Wordpress, Laravel memberi Anda kendali penuh atas aplikasi Anda. Dalam Laravel semuanya dilakukan dalam kode, tidak seperti Drupal atau Joomla, misalnya, di mana Anda dapat membuat situs web fungsional tanpa menulis satu baris kode atau bahkan tanpa mengetahui apa itu PHP.

Sederhananya, CMS adalah aplikasi yang dilengkapi dengan fungsi dasar dan dibangun di atas kerangka kerja. Laravel adalah kerangka kerja dan digunakan untuk membangun aplikasi, termasuk platform CMS.

Read More

Pengenalan Dan Cara Install Vue Js

VUE JS

Vue,js adalah sebuah Framwork yang digunakan untuk membangun antarmuka pengguna. Tidak seperti beberapa kerangka kerja monolitik yang lain, Vue dirancang dari dasar sekali agar dapat diadopsi secara bertahap. Vue sangat mampu memberikan dan mendukung Single Page Application

Vue dibuat oleh Evan You setelah bekerja untuk Google menggunakan AngularJS di sejumlah proyek. Vue awalnya dirilis pada bulan Februari 2014. Vue lahir dari kebutuhan untuk membuat kinerja aplikasi lebih baik. Vue memilih beberapa sintaks template dari Angular, dan menghapus banyak sintaks yang membuatnya sangat ringan.

Developers dalam membuat sebuah sistem akan menggunakan komponen-komponen untuk mendapatkan keefisiensi (reuse-components). Komponen-komponen  tersebut sudah ada yang membuatkan dari pihak ketiga yang biasanya berupa framework. Framework terdiri dari berbagai komponen yang sudah sering digunakan.

Maka ketika programmer sudah mengunakan framework maka pekerjaannya untuk membangun komponen dapat dipermudah. Programmer cukup melakukan re-using dari dalam framework. Contohnya vue framework yang fokus pada komponen-komponen di tampilan view, dapat digunakan programmer untuk mempercepat dalam pembuatan sistem di view.

Siapa saja yang membutuhkan Vue?

1. Transition & Animation 
2. Reusability & Composition
3. Form Input Bindings 
4. Components Basics 
5. Custom Events
6. Template Syntax 
7. Class & Style 
8. Binding Conditional & List Rendering 
9. Event Handling

Berikut ini adalah manfaat menggunakan Vue.js

1.  Mudah Memahami dan Mengembangkan Aplikasi framework ini terus meningkat karenaVue cukup mudah dimengerti  Salah satu alasan mengapa popularitas  Pengguna dapat dengan mudah menambahkan ke proyek webnya.
2. Berukuran kecil sekitar 18 – 21KB sehingga bisa dibilang tidak membutuhkan waktu bagi pengguna untuk mengunduh dan menggunakannya.
3.  sederhana populer di kalangan pengembang web karena memfasilitasi mereka untuk berintegrasi dengan aplikasi yang ada.
4. Dokumentasi lengkap dan sangat komprehensif sehingga setiap pengguna yang tahu sedikit tentang JavaScript dan HTML dapat diterapkan ke aplikasi atau halaman web sendiri.
5. Fleksibilitas memudahkan untuk dipahami oleh pengembang React.js, Angular.js, dan framework JavaScript baru lainnya.

Disini kita akan coba untuk meninstall software - software yang akan digunakan / tools yang digunakan ketika kita mengunakan Vue.js

pertama kita perlu untuk meninstal visual studio code, kalian juga bisa mengunakan teks editor yang lain tapi saya lebih merekomendasikan untuk mengunakan visual studio code

selanjutnya download  npm, fungsi utama npm berbagai package node.js, tujuan utama dari Node package manager adalah dependensi otomatis dan pengelolaan file package.json dengan Command Line Interfacenya.

Instalasi Vue.js

Untuk instalasi vue.js sendiri ada beberapa alternatif yang menggunakan nya secara langsung dengan mendownload file vue.js nya , menggunakan Vue-cli, CDN dab NPM

kali ini kita akan belajar cara mendownload filenya secara langsung ke komputer kita, cara inilah cara yg paling mudah untuk digunakan dalam tahap awal belajar vue.js itu sendiri, untuk mendownload file vue.js nya kita bisa menuju ke https://vuejs.org/v2/guide/installation.html pilih yg Direct Script Include kemudian pilih yg development version setelah itu letakan filenya di dalam directory untuk belajar vue.js nya.

hasilnya akan muncul tulisan "Hello Vue.js!" di web browser.

ok untuk peninstallan Vue cli, jadi ketika kita mendevelop suatu front-end untuk website dan kita mengunakan vue.js kita di sarankan untuk mengunakan Vue CLI, kegunaannya ialah kita dapat menjalankan banyak fungsi-fungsi yang bisa kita gunakan untuk mendevelop website yang kita buat

pertama-tama untuk kalian yang belum meninstall vue.js bisa kalian ketikan npm install -g @vue/cli seperti gambar yang dibawah maka terminalnya akan otomatis melakukan penginstalasi untuk Vue CLI 

jika terjadi error maka coba uninstall Vue CLInya dengan cara npm uninstall -g @vue/cli  dan setelah di uninstall coba diinstall ulang dengan menggetikan  npm install -g @vue/cli.

    Setelah itu coba buat project Vuenya dengan mengetikan Vue create baru << nama project yang ingin kita buat

 


 Jika terjadi error maka coba ketik npm cache clean --force dan coba buat lagi project Vuenya seperti gambar yang dibawah

kalau masih error coba ketikan npm install --loglevel

    coba di cache lagi seperti yang sebelumnya dan jalankan pembuatan project Vuenya kembali

    setelah peninstallasiannya selesai maka kalian bisa check project yang kalian buat tadi di folder yang kalian buat, hasilnya seperti gambar yang dibawah

  untuk menjalankan servernya kalian bisa mengetikan Npm run serve

Read More

UX Ideation

Ideation adalah Suatu proses yang di gunakan oleh UX Desiner pada tahap awal ketika mereka sedang membangun seuah prodak

Di mulai dari problem di tahap ini ialah melihat adanya permasalahan yang masih dialami oleh pengguna/market, lalu kita sebagai UX designer datang untuk meberikan solusi kepada masalah tersebut sehingga kita memiliki goals utama dari solusi tersebut untuk membangun aplikasi yang memang ingin menyelesaikan permasalahan tersebut yang sudah didasari oleh data-data yand dimiliki dari sipengguna.

jadi untuk melakukan ediation ini bisa dilakuan seperti workflow berikut in

1.  melakukan brainstorming yang dilakukan oleh beberapa divisi, seperti divisi prodak

2.  melakukan how might me di tahap ini adalah tahap untung mengimprove aplikasi yang ingin di bangun/ aplikasi yang telah di miliki tujuannya agar lebih oktimal kepada pengguna

3.  validasi dibagian ini akan melakukan wairframe, prototype, visual design, animasi, user testing.

Praktek ux ideation

proses utama untuk mempersiapkan dokumen tentang project yang ingin dibangun yaitu adalah website untuk mencari paket travel dan umroh

identifikasi masalah

1. study kasus

pertama kita akan menentukan study kasus

Website Paket Wisata Dan Umroh

Dibanggun oleh Saya

#Problem

   -   Sulit untuk mengikuti travel  yang bisa dicicil.
   -   Ketika umroh pihak agensi tidak ingin membantu membuatkan passport/ visa
   -   Costomizable (flight, hotel, jumlah hari dalam wisata) penambahan watu/ hari dalam paket.


#Market/User (UX/Costumer Persona)   "siapa saja yang menjadi pengguna".

   -  15 - 22 tahun(teeneger)
   -  25 - 40 tahun(honeymoon, family trip, umroh).

dengan memiliki demografi umur seperti yang diatas maka kita bisa mendapatkan clue atau contekkan tentang bagaimana kita mendesign suatu website, agar mereka lebih mudah untuk menggunakan website kita.

setaip dari user tersebut pasti dan masih mengalami masalah-masalah yang ada di atas

market teeneger.
seperti teeneger mereka tidak memiliki banyak uang karna mereka masih mahasiswa/ masih sekolah smk/sma, mereka ingin berlibur ada juga yang ingin belajar lebih jauh lagi di negara orang  maka mereka membutuhkan fitur untuk  bisa di cicil.

market honeymoon, family trip, umroh
untuk honeymoon mereka lebih nyaman jika menaiki pesawat tipe bisnis dibandingkan ekonomi, jadi masalah-masalah tersebut pasti dialami /  bahkan masih dialami oleh sipengguna. Jadi tugas sebagai UX Design perlu memvalidasi kembali apakah kita akan membuat fitur tersebut/tidak, sebenarnya ini terkait dari segi bisnis suatu perusahaan, jadi ini perlu di diskusikan oleh seorang bisnis owner.


#Solutions

  -  Cicilan Bunga Rendah
  -  Dapat mengkustom pilihan paket travel (flight, hotel, days )
  -  Bantuan untuk pembuatan passport / visa


#Main Goals

   -  Fitur untuk menghubungkan pengguna dengan penyediaan cicilan
   -  Fitur untuk menambahkan hari pada setiap paket
   -  Fitur / Button untuk memastikan bahwa pengguna dapat dibantu membuat passport dan visa  atau tidaknya.


# Competitor (UX Benchmarking) "tugas dari  Ux Benchmarking ini adalah untuk mengkombinasikan antasa 2 website agar menjadi lebih baik lagi"

   - Dwidaya VISA  (http://dwidayavisatour.coid/visa).
   - Uhud Paket Gold (http://uhudtour.com/paket/ ).


selanjutnya adalah mengambar  costumer persona, disini kita akan membuat profile agar kita lebih mudah lagi dalam pembuatan design yang baik. untuk pembuatannya disini mengunakan invisionapp.com
disini kita akan membuat project baru dengan menggunakan FreeHand

FreeHand ini adalah tempat dimana kita biasanya menggunakan untuk berkaloborasi, untuk membuat Wireframe (kerangka gambar), untuk membuat coretan dasar dari yang terkait pada website yang di buat

pertama buat dulu sebagai draf, buat nama drafnya sesuai dengan nama website atau juga boleh nama yang lain

disini kita akan membuat profile, nantinya profile ini akan memberikan suatu data sebagai contoh data acuan yang akan digunakan sebagai bahan pembuatan website, jadi data tersebut biasanya didapatkan dari costumer. dibawah ini adalah kasus yang dialami oleh costumer

jadi inilah tujuan dari pembuatan dari demografi pada user kita sehingga ketika ingin membuat suatu fitur yang memang meningkatkan dari segi efisien oleh pengguna dan juga dari segi bisnis.
selanjutnya kita akan melakukan subuah research terlebih dahulu kepada competitor kita yang kita gunakan adalah competitor analysis, jadi disitu kita akan mengambil pros and cons  (pro dan kontra ) kekurangan dan kelebihan dari tiap competitor kita. sehingga kita bisa lebih mengimprove website kita.

jadi data costumer persona diatas bisa digunakan untuk dijadikan sebagai panduan utama ketika sedang membutuhkan suatu inspirasi atau ingin menyelesaikan suatu masalah pada website ini


jadi tujuan sebagai UX desiner dan berkolaborasi dengan pemilik bisnis dari website paket wisata dan umroh ini yang nantinya bisa  mempermudah dalam pembuatan fitur dan design dari




sumber = @builtwithangga BWAFWD.

Read More