Transcript for:
Konsep Fungsional Desain Web

asalamualaikum warahmatullahi wabarakatuh Selamat siang teman-teman sekalian ini pertemuan kita yang [Musik] ke 10 mungkin ya ke-10 di apa namanya di mata kuliah rekayasa web ini chapternya chapter 9 jadi melanjutkan yang kemarin ee kali ini kita akan membahas fungsional desain jadi Kemarin kan kita sudah membahas information desain kalau memang di mata kuliah rekayasa web ini kita mempelajari hal-hal yang sifatnya m konsep pengembangan web itu sendiri secara detail dan lengkap begitu Jadi kalau anda nantinya masuk di software house atau mungkin di usaha pengembangan e software menjadi tim IT di satu perusahaan mungkin tidak sekompleks ini begitu hanya saja secara konsep Anda harus memahami semua bagian ini gitu memang tidak selalu eh perbagian yang kita bahas itu kan di dunia nyata di dunia industri itu tidak selalu tapi untuk Case Case tertentu yang sifatnya suatu sistem harus didesain dengan eh Project dokumen yang lengkap maka ini menjadi penting begitu Ee sehingga Anda perlu memahami ee setiap materi ini sekarang kita akan membahas fungsional desain Seperti apa fungsional desain ini dan bagaimana proses mendesain pada suatu aplikasi begitu saat Anda mengembangkan aplikasi web jadi teman-teman ee sekarang pengguna atau yang orang yang mengakses website itu mempunyai ee keinginan yang bertambah dari yang dulu kalau yang dulu itu asal ada tampilan informasi bisa dioad Wah sudah sudah cukup begitu kalau sekarang tidak tidak cukup seperti itu ekspektasi user sangat tinggi dan mereka itu berharap ee antara konten yang berkualitas itu juga didukung dengan ee fungsional yang canggih begitu secara fungsi eh memudahkan mereka dan secara konten eh bermanfaat untuk mereka Jadi dua dua hal ini menjadi pasangan yang memang harus ada Jadi kalau misal hanya kontennya saja yang bagus yang kuat begitu Ee membantu bermanfaat tapi secara fungsional ini sulit digunakan maka mereka akan beralih mencari website atau sistem yang lebih informatif dan memudahkan begitu jika ada ee kompetitornya ya dan meskipun secara fungsionalitas canggih luar biasa bagus mudah dilihat nyaman secara desain tapi Ee kontennya tidak ada atau tidak bermanfaat begitu maka ini J pengguna jadi ee enggan juga untuk ee berkunjung ke mana Ke sistem kita yang kita kembangkan sehingga kedua ee bagian itu kedua komponen ini harus saling melengkapi kemudian ee fungsi desain apa namanya fungsional desain ini ee akan lebih menarik user jika ini didesain dengan baik maka user itu akan tertarik menggunakan kemudian akan mempermudah ee mendapatkan informasi begitu yang kita sajikan atau mendapatkan manfaat dari ee sistem yang kita berikan web yang kita berikan gitu nah hal ini juga akan bantu ee interaksi secara personal maksudnya ee setiap pengguna itu kan mempunyai ee apa ya preferensi yang berbeda-beda dan kita perlu menyajikan itu agar sesuai betul dengan yang mereka inginkan caranya bagaimana usernya kan banyak ya user banyak tapi kita ketika mengembangkan ee web itu kan kita sudah tahu yang kita sasar itu ee penggunanya siapa karakteristiknya bagaimana latar belakangnya Bagaimana makanya sebelum proses pengembangan itu ada proses riset riset pengguna biasanya itu dilakukan kemudian eh funional desain ini pak pada suatu aplikasi web itu ee rupa komponen yang terpisah begitu kotak-kotak begitu dan nanti akan kita Tunjukkan bagaimana sih mengembangkan e fungsional desain ini jadi setiap setiap ee tampilan kalau user itu melihatnya itu nantinya berupa tampilan itu basisnya adalah eh satu fungsi satu fungsi satu fungsi dalam satu web itu bisa beberapa fungsi gitu contohnya fungsi login kan itu menjadi satu fungsional sendiri kemudian ada fungsi informasi ada fungsi apa input misalnya Input biodata dan seterusnya itu satu fungsional sendiri dan itu perlu perlu dilakukan desain yang terpisah nah desainer dalam hal ini adalah desainer u I dan UX itu harus ee mengakomodasi Ini mengakomodasi kebutuhan user ini Jadi jangan sampai mereka mendesain tapi melupakan bagian ee apa interaksi eh browser browser yang digunakan eh apa usernya Jadi sebagai contoh usernya ini seragam menggunakan browser a misal maka kita harus menyesuaikan desain ini dengan agar kompatibel dengan browser A tapi ternyata jika penggunanya lebih dari satu browser atau mungkin beragam sekali maka kita harus melakukan pengujian desain ini agar sesuai dengan seluruh browser itu begitu paling tidak memilih tiga Brow yang yang paling banyak digunakan begitu jika terlalu ee terlalu effortnya terlalu banyak nih kalau misalnya semua browser atau mungkin eh desain desainer ini melupakan terkait dengan security issu jadi masalah keamanan itu malah dilupakan padahal bagian itu menjadi aspek yang sangat penting juga di ee proses pengembangan pengembangan web ini dan user responsif itu juga perlu di eh apa namanya perlu di desain dirancang dengan baik di awal selanjutnya eh Ada berapa jenis fungsional kategori fionality ini paling tidak terbagi menjadi dua jadi Jadi yang pertama itu user level functionality dan yang kedua adalah application level functionality bedanya di mana Kalau funsional eh user level functionality maksudnya itu fungsional di sisi pengguna artinya ini yang akan bertemu langsung atau berinteraksi langsung dengan pengguna eh sebagai contoh ada beberapa hal ini ini akan menyebabkan pada atau akan impactnya pada user experience pengalaman pengguna menggunakan website anda maka eh ada beberapa kategori yang di yang termasuk dalam user level functionality yang pertama ada user Interaction support ini sebagai contoh saja ketika kita berkunjung ke suatu web dan di sana ada satu menu yang bisa diklik Kalau tidak ada perbedaan dengan konten yang lain tentu user akan bingung ini apa ini Eh konten saja atau button begitu konten saja atau link e maka perlu ada highlight ketika link di overkan ke sana ketika Mouse over akan ada perubahan itu contoh user Interaction support kemudian user information support Misalnya ini sebagai contoh membaca secara live sensor jadi sensor itu di akan informasinya kan akan dinamis ya Ee dan otomatis akan berubah sesuai dengan eh request yang masuk atau sesuai dengan inputan yang masuk Dan ini juga menjadi ee kebutuhan pengguna terhadap itu kemudian yang ketiga ada user task support contohnya kalau kita browsing eh mendaftar email contoh ketika email yang kita inputkan ada ee email password Sori password yang diinputkan pada saat mendaftar terlalu ee apa terlalu sedikit maka otomatis akan secara ee langsung begitu dan secara dinamis akan memberikan informasi kepada kita memberikan feedback Oke ee ini kurang ee kurang dari 10 begitu diinputkan sat masih kurang 9 ketika diinputkan dua huruf masih kurang 8 dan seterusnya secara dinamis akan melakukan pengecekan dan memberikan feedback Contohnya seperti itu jadi eh user level functionality ini akan eh perlu didesain karena dia akan berinteraksi langsung dengan user berbeda dengan yang kedua application level funionality ini lebih kepada di sisi back end-nya jadi enginnya ini yang bekerja ini tidak selalu maksudnya tidak secara langsung akan ee digunakan oleh user tidak tapi mendukung request mereka mendukung itu dalam arti e request mereka apa proses inilah yang akan new play atau memprosesnya ada beberapa functionality yang terkait ini kategori-kategorinya yang pertama contohnya application Interaction support ini contoh eh apa namanya ya kita atau user itu berkunjung ke mana saja se atau mungkin ee ketika pengunjung ini mengeklik menu a dia akan mengeklik juga menu C misalnya seperti itu jadi histori dari navigasi ini akan terlihat eh user ini berkunjung ke mana saja dari sana Kita juga bisa ee gunakan data-da tersebut untuk proses berikutnya yaitu pengambilan keputusan pembuatan kebijakan dan seterusnya oh menu ini menarik menu ini tidak pernah dikunjungi oleh satu user pun maka perlu diimprove dan seterusnya kemudian application information support itu lebih ke database content maintenance ini eh koneksi ke database dan ketika misalnya ada database yang eh satu database tidak bisa diakses maka ada proses ee untuk memberikan informasi itu atau ada request ke database maka ada proses ee memberikan data dari database ke eh interface begitu ini proses di belakang kemudian ada proses contohnya adalah proses ketika kita belanja belanja kemudian proses payment setelah itu kan ada proses verifikasi ya bahwa pembayaran kita sudah berhasil atau pembayaran kita belum itu yang muncul di pengguna kan berhasil gagal dan seterusnya yang terlihat saja tapi di proses di belakangnya ee itu proses ada proses validasi pengurangan saldo dan seterusnya itu kan di belakang di belakang [Musik] eh tampilan user ya itu di engine di mesin nah ini kita perlu sebagai programmer kita perlu mendesain ini Sori bukan programmer kalau programmer coding aja Ini lebih ke analis jadi analis itu perlu mendesain ini lah kok enak sekali programmer ya programmer itu sering kan saya sampaikan bahwa analis itu eh gajinya lebih tinggi dari dari programmer gitu Kenapa anak itu akan memikirkan banyak hal banyak hal kalau sudah finish di apa analis maka programmer tinggal menterjemahkan ke dalam bahasa pemrograman tertentuitu Terus lagi ya Ini contoh dari tampilan di sisi user ya di sisi user jadi ketika ada menu yang dibagi di poin A itu ketika menu diover maka akan ada perubahan itu di sisi user itu Dan kalau misalnya ada ee apa namanya ada bagian-bagian ini fungsi ada untuk menampilkan informasi untuk menampilkan [Musik] ee apa ini namanya ya informasi jadwal pencarian ee apa produk dan tererusnya Oh bagian kanan ini ada produk produk yang ditampilkan bagian kiri ada menu bagian tengah itu ada informasi itu perlu didesain programmer coding dari desain ini lah itu kalau desain UI gimana kerjanya desainer UI itu akan menterjemahkan dari desain fungsional ini biasanya berurutan kerjanya meskipun kalau e proek yang e cepat begitu kerjanya bersamaan bukan prak bukan good practisnya ya tapi eh realistisnya itu sering seperti itu kalau kondisinya Dead seminggu jadi Minggu jadi maka proses itu menjadi ee sah yang penting ee prosesnya ya clear desainer paham menu yang diperlukan apa digunakan untuk apa ee terus lagi preferensi pengguna rata-rata Bagaimana maka desainer ee bisa membuat itu Nah kalau desainer desainer untuk fungsi ini interaksinya dengan pemilik ee pemilik sistem pemilik web yang meminta itu klien lah Paling Nyaman Saya biasanya mengatakannya itu klien Oke jadi fungsional apa namanya ya desain fungsi ini ini sebetulnya bukan bukan bagian yang terpisah gitu bukan tugas yang terpisah ee antara desain dengan desain proses desain dengan eh fungsional desain desain UI fungsional desain kemudian aplikasi itu bagian-bagian yang terpisah bisa berjalan sendiri-sendiri atau mungkin ee pengerjaannya tidak berdasarkan proses yang lain ya tidak ini proses yang berurutan di tahap desain kan desain tidak hanya user interface saja tapi desain fungsi desain informasi itu tahap desain semua nah yang didesain apa saja yang didesain itu ya proses eh user level funionality seperti tadi ini impactnya akan ee apa apa membantu user dalam memahami ee penggunaan sistem memudahkan user jangan sampai ee kebutuhannya tidak tidak tercapai nih dia ingin mendaftar registrasi apa email tapi proses submit eh hanya sampai input data saja submitnya tidak ada atau sudah sampai input data submit tapi emailnya tidak tergenerate eh maka ini harus menjadi satu kesatuan di application level functionality itu akan memproses eh semua yang dilakukan oleh user user kan berinteraksinya dengan eh interface application akan mendapatkan data dari interface itu dan diproses di low level begitu kemudian ya application level functionality ini tidak terlihat oleh user tapi membantu itu nah tahapannya Seperti apa web app domain itu yang paling luar kemudian user goal itu bagian berikutnya web app requirement itu bagian Selanjutnya lagi jadi ini jadi jadi urutan ketika kita membangun suatu web maka kita harus tahu dulu tujuan dari web ini dikembangkan itu apa saja untuk apa untuk portal berita atau untuk eh informasi akademik atau yang lain-lain e sesuai dengan kebutuhan dari eh user yang kita sasar kebutuhan user kan banyak sekali ya yang kita sasar itu apa Kemudian dari sana dari goal itu akan muncul requirementnya dan kalau sudah ketemu requirement Interaction desainnya akan seperti apa kemudian akan eh information arsitect itu akan ditampilkannya apa saja Eh siapa saja yang yang diizinkan untuk mengakses itu kemudian informasi detail desain ini detail informasinya kemarin kemarin di materi sebelumnya ini sudah ada ya kemudian di bagian ini ada funal desain Nah kalau yang bertemu langsung dengan user user functional desain seperti tadi contohnya Nah kita e Anda Ya anda mungkin sudah terbiasa ketikaanalis dari requirement anda buat itu menjadi use case kemudian menjadi sequence diagram menjadi activity diagram ini anda sudah pernah membuat semua ini nah ini akan di lebih didetailkan lagi pada user functionality desain jadi dari use case use case itu kan masih umum sekali ya masih umum kemudian sequens itu lebih spesifik activity juga proses Aktivitas apa saja di sini ada bagian-bagian yang perlu didefinisikan lagi jadi Interaction eh user Interaction support-nya itu proses eh fungsi login maka dia ada proses input setelah itu proses verifikasi yang diverifikasi apa saja username password username-nya apa berupah apa email atau name dan seterusnya ada proses di detail dari situ sementara di sisi application functionality ini mendapatkan inputan dari user functionality design dan diproseslah di bagian arsitektur desain Eh ini proses yang memudahkan untuk eh mendeploy eh mengembangkan ini menjadi program aplikasi dan di sini ini ada information design ini eh kaitannya dengan apa user functionality design kenapa lah Informasi apa saja layout-nya bagaimana kan mengacu ke user eh ke user apa saja siapa saja begitu dan di sini kalau information arsitect itu kan ada detail desainnya dibuka lagi topik yang apa tentang information desain contoh kita langsung ke contoh ya Sebagai contoh kita mendapatkan klien yang ingin membuat satu aplikasi untuk asuransi pengamanan rumah Jadi tidak hanya asuransi jiwa saja tapi rumah juga bisa diasuransikan keamanannya nah ee apa saja ya yang secara apa secara fungsi begitu Informasi apa saja Fungsinya untuk apa itu dari hasil gathering ee dengan klien maka diklect beberapa data ini jadi website ini nantinya akan ee menyediakan kebutuhan user bisa melihat produk-produknya spesifikasi produknya apa saja begitu ketika kita menawarkan ada beberapa produk maka user bisa melihat spesifikasi detail dari produk tersebut contohnya itu yang pertama Kemudian yang kedua Eh user bisa membuat layout jadi ini custom ya setiap user berbeda-beda Tidak paket tapi user itu hanya mengasuransikan rumah tipe 21 atau mungkin mengasuransikan tipe rumah ee tipe lebih besar lagi 100 misalnya maka eh user bisa membuat layout rumahnya itu eh secara spesifik personal kebutuhannya sendiri-sendiri berbeda-beda maksudnya setiap user kemudian user juga bisa mengcustom kebutuhan Security dan monitoring produk yang dibutuhkan apa saja saya ingin ada cctv-nya ada alarm ketika eh siapun melewati area tertentu dan seterusnya masing-masing user mempunyai preferensi yang berbeda-beda kalau kita ingin menyajikan informasi itu ee atau menyediakan produk tersebut ya itu harus di ee sediakan begitu nah kemudian eh user bisa mendapatkan penawaran produk jadi setelah melakukan setting layout yang beserta custom kebutuhannya dia dia bisa dapatkan penawaran produknya berapa sih ee dari total ini apakah mahal sekali atau masih terjangkau gitu kemudian ee user itu bisa apa ya Ee user itu sampai mana sini tadi ya user itu bisa mengontrol perangkat untuk monitoring di di tempat yang mereka inginkan jadi ada kameranya ada mikrofonnya begitu bisa men-set up itu di bagian sini di bagian depan di bagian tengah dan belakang atau mungkin Wah saya setiap ruangan itu ada monitornya ada kameranya dan ada mikrofon di sana contohnya begitu G kemudian user bisa ee sign up mendaftarkan layanan monitoring itu dan customer atau user itu bisa diizinkan untuk memonitoring ee terhadap aktivitas akunnya kita kan juga kalau menggunakan Google begitu akun Google itu ketika ada perangkat lain yang digunakan untuk login tanpa ee bukan perangkat yang sudah pernah login dia akan memverifikasi ke perangkat yang kita daftarkan Sebelumnya kan apakah ini benar Anda dan setus itu proses monitoring kemudian ee dari sana dari kebutuhan-kebutuhan tersebut maka secara gambaran ee secara garis besar dari fungsional ini ini ee dibuat menjadi ee fungsi-fungsi berikut Oh tadi itu user ada apa namanya ingin mengetahui ee biayanya semua gitu maka ada harus menyediakan ee Apa penawaran produknya jadi disediakan ini penawaran produk untuk customer kemudian ada Bagian untuk memproses ee order dari keamanan kemudian diproses ee data usernya kemudian pembuatan user profile-nya kemudian tadi ada yang perlu custom setiap ee pengguna bisa berbeda-beda ee tipe rumahnya nya bentuknya maka bisa draw user Space layout jadi user bisa membuat layout sendiri begitu dan contoh contoh-contoh ini eh sori bukan contoh outline ini dibuat berdasarkan kebutuhan fungsional yang di atas tadi begitu ini lebih detailnya lagi nah terus dibuatlah arsitektur jadi ini perlu bisa menjawab beberapa bagian ini ee Bagaimana bagian-bagian eh kita membuat bagian-bagian functionality ini yang secara clear begitu ya Ee mempunyai rule mendefinisikan rule dan tampilan yang jelas begitu ini agar tujuannya untuk apa sih agar developer atau programmer paham ketika user minta progres dijelaskan juga paham fungsinya fungsinya ini ada dua analis kan akan bertemu dengan customer dan akan bertemu juga dengan developer analis itu ketemunya dua orang itu tapi kalau yang yang sudah lengkap begitu analis itu akan beremu dengan ee bagian yang khusus untuk requirement gathering jadi requirement gathering orang yang berbeda nanti analis akan dijelaskan oleh eh yang bagian mengumpulkan kebutuhan tapi biasanya analis akan disertakan agar tidak ada Miss di sana antara user requirement dengan yang yang sudah dilakukan analisa oleh pihak ketiga jadi data primer kan selalu lebih clear ya kemudian ee di sini juga fungsional desain ini juga harus bisa menjawab komponennya apa yang harus dibuat dan bagaimana user berinteraksi ee diletakkan di mana kan ada fungs kalau semua begini suatu web yang mempunyai fungsional yang banyak sekali Ee kita perlu memilah bagian mana yang harus tampil paling depan dan bagian mana yang masuk ke submenu jangan sampai saking banyaknya fungsi itu ingin ditampilkan di depan semua di depan semua dari atas sampai bawah Scroll Scroll Scroll terus user itu akan capek nyroll eh kalau anda pernah membaca do and do not ketika desain web jangan sampai lebih dari tiga kali scrolling karena user itu akan e jenuh ini berbeda dengan salia ya kalau sosial media Instagram tiktok dan seterusnya kan Anda Scroll Scroll Scroll juga ee enggak sadar ya Karena yang dilihat bukan Sisi scrollingnya kalau di sana tapi di sisi kontennya konten pun ada standarnya jangan sampai lebih dari eh 3 menit kan kalau sudah lebih dari 3 menit maka user juga akan ee berpindah lagi ke konten berikutnya kemudian ya Dari sini Dari fungksional arsitek ini akan di apa diuraikan lagi menjadi komponen-komponen Contohnya seperti ini ada dua bagian kli dan serverli ini yang akan diakses oleh user server ini yang akan men-supplly baik itu data atau merespon request dari user klien akan eh ketika mengunjungi ke website kita dia akan dihadapkan pada ee menu produk misalnya dan di menu produk ini ada beberapa kategori dan di dalam kategori ini ada muncullah item-item produk ini selain itu dari dari ee fungsi mengakses produk ini juga bisa dilakukan pencarian produk berdasarkan kata kunci tertentu tidak harus sama yang penting ada kata yang tepat begitu maka ini bisa diproses ee diambil dari database ini kan di sisi klien ya user itu tidak akan melihat atau tidak akan memperhatikan Bagaimana fungsi ini bekerja ketika tombol ini diklik yang bekerja fungsi apa di dalam program itu kan mereka tidak perlu mengetahui itu gitu ya di bagian sini bagian area dari analisis kita itu di ee ee dibuat kalau sudah ada ini programmer akan nyaman sekali di sini ada pertama kali ee yang tampil adalah dari web server yang terhubung dengan database yang berupa page statis Kemudian dari sini dia kan akses produk ee produk ya maka di sini ada Sisi dnamic page compilation di sana ada beberapa funional functionality-nya ada pencarian hasil pencarian kemudian ada produknya ada ee apa menu dari produk itu begitu kan ada kategori itu tadi maka di sana ada beberapa menu di sana Nah dari sini masing-masing itu mengakses ke databas dan dari sini ada ketika ada fungsi pencarian maka ada search indek yang langsung mengakses ke database datatabase Ini contohnya seperti itu kemudian pengembangan ee arsitektur ya pengembangan arsitektur ini biasanya diperlukan apa tidak sih mungkin kalau kita mengembangkan web ee web itu kita sebetulnya melakukan itu hanya saja ter catat terdokumentasi atau tidak Itu masalahnya tapi kalau kita melakukan ya pasti melakukan contohnya untuk information arsitek nih eh use case itu perlu di uraikan ee ee beberapa komponen-komponen ini menjadi beberapa kategori yang pertama itu information information selection mengidentifikasi atau memilih Informasi apa yang akan disajikan kemudian information kompilasi compilation itu dia penggabungan berupa penggabungan informasi yang disajikan kepada user jadi ee Ini menyajikan beberapa informasi menjadi satu ini biasanya informasi yang saling terkait agar user itu ee mudah mendapatkan ee gabungan informasi itu kemudian eh proses informasi eh analisis calculation data ya yang terakhir itu interaksinya bagaimana ee satu fungsi ini akan berinteraksi dengan sistem eksternal ee ke aplikasi web yang kita kembangkan dan ternyata database itu dianggap sebagai eksternal dalam desain ini karena kalau kita apa mengembangkan web itu kan sebetulnya database aplikasi web ini kan sesuatu yang terpisah hanya saja memang aplikasi web ini mengambil data ke database sebetulnya kan gitu Tapi secara implementasi proses deploy itu kan sebenarnya hal yang berbeda tuh nah ini contohnya Kalau Anda pernah membuat web pakai Framework kode igniter ya Misalnya maka ini Eh sudah paham di sini jadi ketika ada browser dalam hal ini adalah klien yang request data maka yang memproses adalahroller kan gitu yang mereka ee yang mereka berinteraksi langsung ya Sisi view memang tapi ketika view ini diproses yang memproses adalah controllerroller itu memproses tapi dia tidak memproses saja tapi kan dia tidak bisa mengakses data maka dia harus masuk ke bagian model jadi dia akan mengenkapsulasi e fungsi enkapsulasi dari database itu ini kan sebenarnya Oo juga ya Nah dari sini dari model ini dialah yang berinteraksi dengan database jadi ini sesuatu yang terpisah yang bisa terpisah ya memang dia data tapi sesuatu yang kalau dari sisi of VI deploy itu sesuatu yang terpis makanya di sana ada kita harus setting untuk menghubungkan antara web apps dengan database eh Apakah fungsional desain ini harus dibuat semuanya ya tidak semuanya ya bagian-bagian yang sangat kompleks saja yang memang ini membutuhkan pemahaman dari tim gitu tidak hanya satu orang lah kalau satu orang berarti tidak perlu kalau Komplek ee tetap disarankan dibuat karena akan membantu proses pengembangan kita kan tidak selalu ingat ya kebutuhan user Seperti apa kemudian ee desain dari sistem ini yang benar itu ee Seperti apa ketika dilakukan analisis kan tidak selalu ingat jadi proses ini perlu dibuat begitu untuk yang Komplek tidak tidak semua tapi yang kompleks saja Kemudian di sini contohnya nih Ee kita bisa membuat desain mulai dari hepage-nya dan di sana itu ada l e login form dan ketika login form ini ada inputannya proses submit dia akan dilakukan proses eh pengecekan login l e dan proses itu proses verifikasi ya namanya dia akan mengecek ke data login ini di database ada enggak username dan password ini kalau tidak ada ya akan dikembalikan atau dikirimkan perintah anda tidak berhak mengakses tapi kalau misalnya dia apa dia ada begitu maka ada proses berikutnya nah proses berikut inilah ee yang bisa menampilkan menu-menu yang disediakan begitu and mungkin terbiasa dengan UML ya Nah sekarang ada webml Jadi ini spesifik Mar up language n itu apa untuk aplikasi web tahapannya sama jadi kalau di UML itu kan ada beberapa komponen ya Ada use case kemudian ada activity dan seterusnya maka di webml juga kurang lebih sama jadi di sana itu ada prosesnya proses apa dulu nih ada proses validation misalnya PR valation itu adaeliminary valation ada Fin nya ini dua bagian yang yang berbeda tapi yang saling terkait kalau validation task dari manajer eh dia akan membuat satu validasi ada request di sini eh proses validasinya dimulai dari akan melihat eh secara detail dari apa proses input ini ada proses eh eh dari request ini kemudian ada proses input proses input ini akan eh keputusannya Oh valid eh sorryi o valid O tidak valid kalau valid proses berikutnya apa kita bisa menggambarkannya [Musik] begini untuk mengetahui interaksi antar fungsi nah state modeling state modelling ini sesuatu yang apa ya jadi dia akan me apa ya akan membantu developer kalau di sini akan membantu developer terkait ketika status ini prosesnya apa status ini prosesnya apa ini membantu sekali ee dan ini harus ee bukan harus ini membantu saat mengelola user ee banyak user dalam waktu yang sama request-nya berbeda-beda atau request-nya sama tapi level user-nya berbeda eh atau request-nya sama levelnya sama eh request-nya sama profilingnya yang berbeda contohnya gitu maka ini akan membantu proses [Musik] ee apa namanya proses perilaku terhadap user user itu harus di setelah ini menunya Apa informasi yang ditampilkan apa sih begitu contohnya Ini loh ketika user dia akan login proses validasi dan di proses validasi user ini eh akan dilakukan proses pengecekan inputan Apakah sudah valid sudah sesuai dengan yang seharusnya semua form tanda bintang sudah diisikan atau belum Kalau belum ee ada proses bahwa user ini tidak ee apa namanya inputannya tidak valid dan seterusnya nah ini proses pertahap detail sekali kan setelah eh validasi user habis itu memberikan opsi untuk selecting user action ketika dia sudah password-nya valid proses berikutnya user akan memilih eh menu apa ini begitu Jadi ada beberapa proses ini ada proses pemilihan menu ya customizing Menu a menu B menu c dan seterusnya ini menu setelah user sukses in digambarkannya seperti ini ini namanya state model membantu siapa developer gitu ya demikian teman-teman ee materi kita tentang fungsional desain ee silakan di ee pelajari ee kemudian tugasnya apa kemarin saya sudah memberikan tugas untuk membuat use case membuat apa namanya DF use case diagram activity kemudian eh semap juga ya saya nanti akan cek catatan saya ada tugas itu enggak Kemudian Anda tambahkan ini funional arsitek ini eh yang versi versi Apa versi eh outline-nya saja tidak sampai detail bagian ini saja jadi klien akan mengakses apa server akan memproses bagian-bagian apa ini saja yang menjadi tugas anda e untuk pertemuan ini kurang lebihnya mohon maafakiri asamikum warahmatullah wabarakatuh jika ada pertanyaan kan melalui WhatsApp grup ya