Web Developer. Pertemuan #2: PART 1 Mengidentifikasi Rancangan User Interface

Pertemuan #2: PART 1

Mengidentifikasi Rancangan User Interface

Web Developer

Profil Pengajar

Jabatan Akademik<tahun dan jabatan terakhir Pengajar>

Pendidikan

❑<Dosen Teknik Informatika>

Riwayat Pekerjaan

❑<>

Contact

HP WA only :<no hp Pengajar>

Email :<email Pengajar>

Foto Pengajar

Contact

HP WA only :<no hp Pengajar>

Email :<email Pengajar>

Foto Pengajar

Deskripsi

Deskripsi Singkat Mengenai Topik

Mata Pelatihan ini memfasilitasi pembentukan kompetensi dalam membuat rancangan user interface pada aplikasi berbasis web.

Tujuan Pelatihan

Setelah mengikuti seluruh rangkaian pembelajaran pada mata pelatihan mengidentifikasi rancangan user interface ini, peserta mampu membuat rancangan user interface untuk web yang akan dibangun

Materi yang Akan Disampaikan:

1. Rancangan User Interface 2. Komponen User Interface 3. Urutan Komponen Dialog 4. Mock Up

Tugas :

1. Membuat Urutan Komponen Dialog untuk Web yang akan dibangun 2. Membuat Mock Up untuk Web yang akan dibangun

Outcome/Capaian Pelatihan

Setelah mengikuti pelatihan ini, peserta kompeten dalam:

1. Membuat Urutan Komponen Dialog

2. Membuat Mock Up untuk Web yang akan dibangun

Pengertian User Interface (UI)

User interface adalah bagian visual dari website, aplikasi software atau device hardware yang memastikan bagaimana seorang user berinteraksi dengan aplikasi atau website tersebut serta bagaimana informasi ditampilkan di layarnya.

Mengapa User Interface itu Penting?

❖

User interface adalah salah satu faktor yang menentukan peningkatan traffic website.

❖

Desain user interface sangat penting karena akan menentukan bagaimana seseorang berinteraksi dengan website dan aplikasi tersebut dengan mudah.

Karakteristik User Interface yang Baik

❖

^Jelas

❖

^Singkat

❖

^Familiar

❖

^Responsif

❖

^Konsisten

❖

^Menarik

❖

^Efisien

Rancangan User Interface (UI)

❖

Rancangan UI adalah proses untuk membuat antarmuka dalam sebuah perangkat lunak atau perangkat terkomputerisasi dengan fokus pada penampilan atau gaya.

❖

Dalam siklus-hidup pengembangan sistem/aplikasi, merancang User Interface merupakan bagian dari tahap “Desain”. Output dari proses merancang User Interface adalah dokumen spesifikasi desain.

❖

Dokumen Spesifikasi Desain terdiri dari:

•

Ikhtisar naratif

•

Contoh Desain

•

Pengujian dan evaluasi kegunaan

Outline Dokumen Spesifikasi Desain UI

Referensi:

- Joseph Valacich, Joey George; Modern Systems Analysis and Design

Beberapa Bentuk Interaksi Pengguna dan Aplikasi

❖

Secara umum terdapat 5 bentuk interaksi antara pengguna dan aplikasi:

1. Command Language Interaction 2. Menu Interaction

3. Form Interaction

4. Object-Based Interaction

5. Natural Language Interaction

Referensi:

- Joseph Valacich, Joey George; Modern Systems Analysis and Design

Contoh Command Language Interaction

❖

C:\> cd c:\wamp64

❖

$ cp file.doc newfile.doc

Referensi:

- Joseph Valacich, Joey George; Modern Systems Analysis and Design

Keterangan:

- Contoh disamping Referensi IDE menggunakan localserver WAMPP, untuk XAMPP hampir sama.

Contoh Menu Interaction

Referensi:

- Joseph Valacich, Joey George; Modern Systems Analysis and Design

Contoh Form Interaction

• Form Interaction adalah sebuah cara dari sistem interaktif untuk meminta data atau informasi ke user.

Referensi:

- Joseph Valacich, Joey George; Modern Systems Analysis and Design

Contoh Object-Based Interaction

Mewakili suatu objek dalam

antarmuka, dapat merupakan suatu lambang dari sebuah aplikasi atau tindakan.

Referensi:

- Joseph Valacich, Joey George; Modern Systems Analysis and Design

Natural Language Interaction

❖

Interaksi metode ini dapat diterapkan dengan input audio atau keyboard.

Referensi:

- Joseph Valacich, Joey George; Modern Systems Analysis and Design

User Interface (UI) dan User Experience (UX)

UI vs UX Design

❖

UI lebih mementingkan tampilan permukaan dan keseluruhan nuansa desain.

❖

UX lebih mencakup kepada seluruh spektrum pengalaman pengguna

Referensi:

- interaction-design.org

User Interface (UI)

User Experience (UX)

Perbedaan UI dan UX

Prinsip Utama Desain UI

❖

User compatibility

❖

Product compatibility

❖

Task compatibility

❖

Workflow compatibility

❖

Consistency

❖

Familiarity

❖

^Simplicity

Contoh Familiarity

❖

Memberikan tampilan yang familiar terhadap user.

❖

Tampilan awal twitter.com sangatlah familiar di mata user dan tidak

membingungkan.

Contoh Simplicity

❖

Kesederhanaan perlu diperhatikan pada saat membangun antarmuka.

❖

Tidak selamanya antarmuka yang memiliki menu banyak adalah antarmuka yang baik.

❖

Kesederhanaan di sini lebih berarti sebagai hal yang ringkas dan tidak terlalu berbelit.

Bagaimana dengan User Interface ini?

Wireframing

Apa itu Wireframing?

❖

Wireframe adalah kerangka dasar/blueprint dari halaman web yang akan kita bangun.

❖

Secara garis besar di dalam wireframe ini kita menempatkan elemen-elemen penting dari halaman web tersebut pada posisinya masing-masing seperti banner, body content, menu link, kolom, footer maupun fitur-fitur lainnya yang ada dalam web nantinya.

Pertimbangan Pemanfaatan Wireframe

❖

Membuat wireframe kita membantu client untuk fokus pada kerangka utama dari membangun halaman web tersebut.

❖

Dengan wireframe yang hanya berupa kotak hitam-putih akan lebih mudah bagi kita untuk mendeteksi apa yang tidak bekerja dari sisi usability dan fungsionalitas.

❖

Minimalisasi revisi

Contoh Wireframe

Proximity

❖

Yang diletakkan berdekatan 🡪 ada korelasinya

❖

Jauh 🡪 tidak berhubungan Time:

Time

Contoh

Name Addr1 Addr2 City

State Phone Fax

Name

Addr1 Addr2 City State

Phone Fax

Name Addr1 Addr2 City State Phone

Fax

Contrast

❖

Memberikan petunjuk kepada informasi inti

❖

Membantu mata menuju ke hal yang penting

❖

Membantu skimming

Warna

❖

Gunakan seperlunya dan dengan bijak ☺

❖

Perhatikan kesesuaian warna apabila membangun web untuk:

⮚

Penyandang buta warna

⮚

Penyandang penyakit warna lainnya

❖

Konsisten dengan penggunaan warna dari sisi budaya dan gaya baku korporasi

Berapa banyak oval kecil?

Sekarang berapa banyak oval kecilnya?

Arti-arti warna (umum)

▪ Yellow

▪ happy, caution, joy

▪ Brown

▪ warm, fall, dirt, earth

▪ Green

▪ go, on, safe, envy, lush, pastoral

▪ Purple

▪ royal, sophisticated, Barney

▪

^Red

▪

aggression, love

▪

hot, warning, stop, radiation

▪

^Pink

▪

female, cute, cotton candy

▪

^Orange

▪

warm, autumn, Halloween

▪

^Blue

▪

^{cold, off}

Arti-arti warna: Sesuai budaya

http://www.ricklineback.com/culture2.htm

7 Kebiasaan Desainer Interface yang Sukses

● Pahami bisnisnya

● Memaksimalkan efektivitas grafikal

● Berpikir seperti seorang pengguna

● Gunakan model dan prototype (atau mock-up)

● Fokus pada kegunaan

● Sediakan feedback

● Dokumentasikan segalanya

Referensi:

- Tilley, Rosenblatt; Systems Analysis and Design 11th Edition

Beberapa Komponen UI (best practice)

❖

^Tipografi

❖

^Warna

❖

^Icon

❖

^Grid

❖

^Tombol

❖

^Label

❖

^Table

❖

^Alert

❖Form Control

❖Form Template

❖Kolom pencarian

❖Navigasi

❖Headers

❖Footers

❖Dialog

❖dll

Referensi:

- https://designsystem.digital.gov/components/

- https://material.io/develop/web/

- https://material.io/develop/android/components/

- https://material.io/design/components/

Urutan Komponen Dialog

❖

Komponen Dialog: urutan di mana informasi ditampilkan ke pengguna dan diperoleh dari pengguna.

❖

Pedoman utama desain dalam dialog adalah konsistensi dalam urutan tindakan, penekanan tombol, dan terminology.

❖

3 langkah proses:

⮚Rancanglah urutan dialog

⮚Mendesain prototype / mock-up

⮚Evaluasi kegunaannya

Merancang Urutan Komponen Dialog

❖

Tentukan urutannya

❖

Memiliki pemahaman yang jelas tentang karakteristik pengguna, tugas, teknologi, dan lingkungan,

❖

Membuat diagram dialog:

1. Metode formal untuk merancang dan merepresentasikan dialog manusia-komputer:

menggunakan kotak dan garis

2. Terdiri dari kotak dengan 3 bagian:

▪^Atas

▪^Tengah

▪^Bawah

Contoh Rancangan Urutan Komponen Dialog

Diagram urutan komponen dialog yang menggambarkan sequence (urutan), selection (pilihan), dan iteration (perulangan).

Contoh Rancangan Urutan Komponen Dialog

Contoh diagram urutan untuk sistem informasi pelanggan

Contoh Mock-up Desain UI

Beberapa Perangkat Lunak untuk Implementasi UI

❖

Adobe Dreamweaver (Commercial)

❖

Adobe XD (Online)

❖

Pingendo (Freemium)

❖

Silex.me (Open Source) sudah terintegrasi Github

❖

Google Web Designer (Free)

❖

Dan lain-lain

Contoh Mock Up dengan Adobe XD

Contoh Mock Up Personal Website

Kesimpulan

1. Perancangan user interface merupakan tahapan yang sangat penting dalam perancangan sebuah website agar tampilan lebih user friendly.

2. Perancangan komponen dialog sangat diperlukan agar urutan informasi dari dan ke pengguna dapat lebih jelas.

3. Pembuatan mock up diperlukan agar rancangan tampilan website sesuai dengan yang dibutuhkan (dapat digunakan sebagai kesepakatan antara web developer dengan client).

Kesimpulan Pertemuan #

Referensi

1. Joseph Valacich, Joey George. 2017. Modern Systems Analysis and Design 8^th Edition. U.S: Pearson Education, Inc.

2. Interaction-design.org

3. http://www.ricklineback.com/culture2.htm 4. https://designsystem.digital.gov/components/

5. https://material.io/develop/web/

6. https://material.io/develop/android/components/

7. https://material.io/design/components/

TERIMA KASIH

Avip Kurniawan Web Developer

Pertemuan #1,2,3:

Installasi Alat Bantu dan Pengantar Algoritma

Jabatan Akademik

Dosen Prodi Teknologi Informatika S2 Teknik Informatika

Riwayat Pekerjaan

Dosen Universitas Krisnadwipayana (UNKRIS)

Profil Pengajar

Contact

HP WA only : Email :

Foto Pengajar

Deskripsi Singkat

Deskripsi Singkat mengenai Topik

Materi ini berisi penjelasan mengenai instalasi alat bantu pemrograman web, pengantar algoritma dan review Alat bantu yang digunakan untuk pemrograman web yaitu XAMPP , Git dan Text Editor Sublime Text.

Tujuan Pelatihan

1. Peserta mengetahui langkah demi langkah instalasi alat bantu pemrograman web.

2. Peserta memahami komponen-komponen alat bantu hardware dan software dalam pemrograman web.

3. Peserta mengetahui cara membuat algoritma dan flowchart.

Materi Yang akan disampaikan:

4. Instalasi Alat bantu 5. Review Alat bantu 6. Pengantar Algoritma Tugas :

Membuat algoritma dan Flowchart untuk Pemrograman Web

Tools Instalasi

1. XAMPP

2. Sublime Text 3 / VSCode / Intellij PHPStorm / Atom 3. Git

Install XAMPP

❖ Download aplikasi XAMPP

terbaru di link

https://www.apachefriends.org/down load.html

❖ Pilih salah satu sesuai dengan sistem operasi dan versi yang diinginkan.

❖ Untuk MAC OS Intel menggunakan Versi 5.

❖ Untuk MAC OS M1

menggunakan Versi 8.

Install XAMPP

❖ Dobel klik file XAMPP yang baru di download, selanjutnya akan muncul jendela ”Installer Language” seperti di samping.

❖ Pilih bahasa yang akan digunakan. Pada bagian ini pilih English dan klik Ok.

Install XAMPP

❖ Kadang pada proses ini muncul pesan error. Jika ada, abaikan saja dan lanjutkan dengan klik OK dan YES.

Install XAMPP

❖ Berikutnya akan muncul jendela yang isinya meminta Anda untuk menutup semua aplikasi yang sedang berjalan.

❖ Jika semua aplikasi sudah ditutup, maka klik tombol Next.

Install XAMPP

❖ Selanjutnya akan diminta untuk memilih aplikasi yang ingin diinstal.

❖ Centang saja semua pilihan dan klik tombol Next.

Install XAMPP

❖ Kemudian akan diminta untuk menentukan lokasi folder penyimpanan file-file dan folder XAMPP.

❖ Secara default akan diarahkan ke lokasi c:\xampp.

❖ Namun jika ingin menyimpannya di folder lain bisa dengan cara klik browse dan tentukan secara manual folder yang ingin digunakan.

❖ Jika sudah selesai, lanjutkan dan klik tombol Install.

Install XAMPP

❖ Tunggu beberapa menit hingga proses intalasi selesai.

❖ Jika sudah muncul jendela seperti di samping ini, klik tombol Finish untuk menyelesaikannya.

Install XAMPP

❖ Berikutnya, akan muncul jendela dialog seperti gambar di samping ini yang menanyakan apakah ingin langsung menjalankan aplikasi XAMPP atau tidak.

❖ Jika ya, maka klik YES.

Install XAMPP

❖ XAMPP telah selesai diinstall dan berhasil di jalankan.

Install Git

❖ Download aplikasi Git melalui

website resmi git

https://git-scm.com

❖ Pilih Download dan sesuaikan dengan sistem operasi yang digunakan.

Install Git

❖ Klik 2 kali pada file instaler Git yang sudah di download.

Install Git

❖ Maka akan muncul infomasi lisensi Git, klik Next untuk melanjutkan.

Install Git

❖ Selanjutnya menentukan lokasi instalasi. Biarkan saja apa adanya, kemudian klik Next.

Install Git

❖ Selanjutnya pemilihan komoponen, biarkan saja seperti ini kemudian klik Next.

Install Git

❖ Selanjutnya pemlilihan direktori start menu, klik Next.

Install Git

❖ Selanjutnya pengaturan PATH Environment.

❖ Pilih yang tengah agar perintah git dapat di kenali di Command Prompt (CMD).

❖ Setelah itu klik Next

Install Git

❖ Selanjutnya konversi line ending.

❖ Biarkan saja seperti ini, kemudian klik Next.

Install Git

❖ Selanjutnya pemilihan emulator terminal.

❖ Pilih saja yang bawah, kemudian klik Next.

Install Git

❖ Selanjutnya pemilihan opsi ekstra. Klik Next.

Install Git

❖ Selanjutnya pemilihan opsi ekspreimental, langsung saja klik Install untuk memulai instalasi.

Install Git

❖ Tunggu beberapa saat, instalasi sedang dilakukan.

Install Git

❖ Setelah selesai, kita bisa langsung klik Finish.

Install Git

❖ Untuk mencobanya, silahkan buka CMD atau PowerShell, kemudian ketik perintah git --version.

XAMPP

❖ XAMPP adalah perangkat yang menggabungkan tiga aplikasi kedalam satu paket, yaitu Apache, MySQL, dan PHPMyAdmin.

❖ Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), yang terdiri beberapa program antara lain : Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.

Server HTTP Apache atau Server Web/WWW Apache

❖ Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak sistem operasi seperti (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web.

❖ Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.

MySQL

❖ MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia.

❖ MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

PHP

❖ PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML.

❖ PHP banyak dipakai untuk memprogram situs web dinamis.

❖ PHP dapat digunakan untuk membangun sebuah CMS (Content Management System).

Menggunakan XAMPP

❖ Buka XAMPP

❖ Klik Start bagian Apache dan MySQL.

Menggunakan XAMPP

❖ Buka web browser (Firefox, Chrome, dll)

❖ Ketik di URL : localhost atau 127.0.0.1

❖ Secara default saat memanggil localhost akan diarahkan ke halaman pengaturan XAMPP.

Menggunakan XAMPP

❖ Jika muncul seperti gambar disamping, berarti XAMPP sudah dapat digunakan.

Struktur XAMPP

❖ HTDOCS adalah folder untuk menaruh file-file latihan PHP kita nantinya.

❖ Folder ini akan otomatis dibuat saat kita menginstal XAMPP.

❖ Saat kita memanggil alamat localhost pada browser maka yang tampil adalah hasil kompilasi dari file-file yang berada pada folder HTDOCS ini.

Git

❖ Git adalah version control system yang digunakan para

developer untuk

mengembangkan software secara bersama-bersama.

❖ Fungsi utama git yaitu mengatur versi dari source code program dengan memberikan tanda baris dan code mana yang ditambah atau diganti.

❖ Pada git dapat memberikan komentar pada source code yang telah ditambah/diubah, hal ini mempermudah developer lain untuk tahu kendala apa yang dialami developer lain.

Perintah Dasar Git

❖ git config

Digunakan untuk mengatur konfigurasi tertentu sesuai keinginan pengguna, seperti email, algoritma untuk diff, username, format file, dan lain-lain

Perintah Dasar Git

❖ git init

Perintah ini digunakan untuk membuat repositori baru.

Perintah Dasar Git

❖ git add

Perintah git add bisa digunakan untuk menambahkan file ke index.

Perintah Dasar Git

❖ git clone

Perintah git clone digunakan untuk checkout repositori.

Perintah Dasar Git

❖ git commit

Perintah git commit digunakan untuk melakukan commit pada perubahan ke head.

Perintah Dasar Git

❖ git status

Perintah git status menampilkan daftar file yang berubah bersama dengan file yang ingin di tambahkan atau di-commit.

Perintah Dasar Git

❖ git push

Perintah ini akan mengirimkan perubahan ke master branch dari remote repository yang berhubungan dengan direktori kerja Anda.

Perintah Dasar Git

❖ git pull

Untuk menggabungkan semua perubahan yang ada di remote repository ke direktori lokal.

Sublime Text 3

❖ Sublime Text adalah aplikasi editor untuk kode dan teks yang dapat berjalan diberbagai platform operating system

dengan menggunakan

teknologi Phyton API.

❖ Sublime Text mendukung berbagai bahasa

pemrograman dan mampu menyajikan fitur syntax highlight hampir di semua bahasa pemrogramman yang didukung ataupun

dikembangkan oleh komunitas seperti; C, C++, C#, CSS, D, Dylan, Erlang, HTML, Perl, PHP, Python, R, Ruby, SQL, dan lain-lain.

PENGANTAR ALGORITMA DAN

FLOWCHART

Definisi Algoritma

❑ Algoritma adalah urutan langkah-langkah logis penyelesaian masalah yang disusun secara sistematis dan logis.

❑ Kata logis ( logika ) merupakan kata kunci dalam algoritma.

❑ Langkah-langkah dalam algoritma harus dapat ditentukan bernilai benar atau salah.

Konsep Dasar Algoritma

❑ Agoritma adalah kumpulan intruksi/perintah yang dibuat secara jelas dan sistematis berdasarkan urutan yang logis (logika) untuk penyelesaian suatu masalah.

❑ French, c.s. (1984) menyatakan sejumlah konsep yang mempunyai relevansi dengan masalah rancangan program yaitu kemampuan computer, kesulitan dan ketepatan.

❑ Penerapan dari konsep tersebut biasanya digunakan dalam rancangan algoritma.

Konsep Dasar Algoritma

Dalam merancang sebuah algoritma, Fletcher (1991) memberikan beberapa cara atau metode yaitu kumpulan perintah, ekspresi, tabel intruksi, program computer, kode semu, dan flowchart, sedangkan Knuth (1973) menyarankan algoritma fundamental untuk keperluan matematika dan program computer, metode yang sering digunakan yaitu:

❑ Diagram Alir (Flow chart)

❑ Kode Semu (Pseudo Code)

❑ Algoritma Fundamental

Diagram Alir (Flow chart)

❑ Flow chart adalah suatu representasi secara diagram yang mengiluatrasikan urutan dari operasi yang dilakukan untuk mendapatkan suatu hasil.

❑ Dengan kata lain, flow chart membantu kita untuk mengerti dan melihat bentuk algoritma dengan menampilkn algoritma dalam symbol-simbol gambar.

Kode Semu (Pseudo Code)

❑ Pseudo code adalah urutan baris algoritma seperti code pemrograman dan tidak memiliki sintak yang baku.

❑ Contoh:

START

Masukkan A

Masukkan B, Tampilkan B Tampilkan A

End.

Algoritma Fundamental

Aturan Algoritma Fundamental

1. Nama/judul algoritma harus ditulis dengan huruf kapital 2. Berikan komentar dan penjelasan pendahuluan.

3. Pernyataan dan struktur Kontrol

4. Nama-nama variabel harus ditulis dengan huruf besar 5. Input dan output

6. Prosedur 7. Fungsi

Komponen Algoritma

Knuth (1973) menyatakan 5 komponen utama dalam algoritma yaitu finiteness, defineteness, input, output dan effectivities. Sehingga dalam merancang sebuah algoritma ada 3 komponen yang harus ada yaitu :

❑ Komponen Masukan (Input)

❑ Komponen Keluaran (Output)

❑ Komponen Proses (Processing)

Komponen Masukan (Input)

Komponen ini biasanya terdiri dari pemilihan variabel, jenis variabel, tipe variabel, konstanta, dan parameter (dalam fungsi)

Komponen Keluaran (Output)

❑ Komponen ini merupakan tujuan dari perancangan algoritma dan program.

❑ Permasalahan yang diselesaikan dalam algoritma dan program harus ditampilkan dalam komponen keluaran.

❑ Karakteristik yang baik adalah benar (menjawab) permasalahan dan tampilan yang ramah (friendly).

Komponen Proses (Processing)

❑ Komponen ini merupakan bagian utama dan terpenting dalam merancang sebuah algoritma.

❑ Dalam bagian ini terdapat logika masalah, logika algoritma (sintaksis dan semantic), rumusan, metode (rekursi, perbandingan, penggabungan, pengurangan, dan lain-lain).

Pemrograman Dasar

❑ Pemrograman merupakan suatu proses yang meliputi menulis, testing, memperbaiki, dan memaintenace (memelihara) perintah- perintah (kode/ script) sebuah program komputer.

Pemrograman Dasar

Sesuai dengan pengertian diatas maka proses pemrograman yang akan dilalui yaitu :

❑ Programmer menulis kode-kode program menggunakan bahasa pemrograman tertentu

❑ Setelah kode-kode selesai ditulis, programmer akan melakukan rilis (biasanya ada versi program alfa, beta, dan stable) dan testing.

❑ Lalu programmer akan mencari apakah ada kesalahan (debug) pada program yang sudah dirisil

❑ Jika ditemukan debug, programmer akan mencari dimana letak kesalahan kemudian memperbaikinya

❑ Tahap selanjutnya programmer akan merilis program dengan versi yang lebih baru. Lalu akan dilakukan pemeliharaan secara berkala.

Konsep Dasar Pemrograman

Konsep dasar pemrograman komputer yaitu:

❑ Input merupakan proses memasukan data ke dalam komputer menggunakan perangkat input (mouse, keyboard atau lainnya)

❑ Setelah data di inputkan maka akan diproses menggunakan perangkat procesing yang biasanya terdiri dari : menghitung, membandingkan, mengurutkan, mengkelompokkan, dan mencari perangkat penyimpanan (storage).

❑ Data yang sudah diproses akan ditampilkan berupa informasi melalui perangkat output (speaker, monitor, atau lainnya).

Konsep Dasar Pemrograman

Namun kini konsep tersebut dikembangkan lagi menjadi Oiginating Input Proses Output Distribution.

❑ Originating yaitu pengumpulan data yang biasanya berupa pencatatan data sebelum proses input.

❑ Sedangkan distribution adalah proses menyebarkan informasi kepada pihak-pihak tertentu.

Ada satu lagi komponen penting yaitu Storage.

❑ Storage adalah tahapan yang merekam hasil pengolahan data. Dan nantinya digunakan untuk proses input selanjutnya.

Konsep Dasar

Pemrograman

Bahasa Pemrograman

❑ Bahasa pemrograman digunakan untuk membuat sebuah program komputer yang terdiri dari kumpulan kode-kode (sintaks) yang digunakan untuk mengerjakan proses tertentu pada komputer.

❑ Bahasa pemrograman memiliki tugas untuk menghubungkan pengguna dengan mesin komputer karena dia bisa menerjemahkan perintah yang dimengerti oleh komputer.

Bahasa Pemrograman

Gambaran sederhana komputer dan intruksi program

Kategori Bahasa pemrograman

Berdasarkan tingkatannya bahasa pemrograman komputer dibedakan menjadi 2 yaitu:

❑ Bahasa Tingkat Rendah : yaitu bahasa pemrograman yang hanya dimengerti oleh mesin. Bahasa ini dikerjakan langsung oleh mesin.

Contohnya yaitu bahasa standar rakitan atau biasa kita kenal dengan assembler.

❑ Bahasa tingkat tinggi : Bahasa ini sudah mendekati bahasa manusia.

Artinya pengguna sudah dapat memahami bahasa ini. Mesin membutuhkan compiler untuk mengerjakan perintah. PHP, java, C+

+, Pascal dan masih banyak lainnya merupakan contoh dari bahasa tingkat tinggi.

Flowchart

• Bagan-bagan yang mempunyai arus

• Menggambarkan langkah-langkah penyelesaian suatu masalah

• Merupakan salah satu cara penyajian algoritma

Mengapa Flowchart

a. Relationship

Flowchart dapat memberikan gambaran yang efektif, jelas, dan ringkas tentang prosedur logic. Teknik penyajian yang bersifat grafis jelas akan lebih baik daripada uraian-uraian yang bersifat teks khususnya dalam menyajikan logika-logika yang bersifat kompleks.

Mengapa Flowchart

b. Analysis

Dengan adanya pengungkapan yang jelas dalam model atau chart, maka para pembaca dapat dengan mudah melihat permasalahan atau memfokuskan perhatian pada area-area tertentu pada sistem informasi.

Mengapa Flowchart

c. Communication

Karena simbol-simbol yang digunakan mengikuti suatu standar tertentu yang sudah diakui secara umum, maka flowchart merupakan alat bantu yang sangat efektif dalam mengkomunikasikan logika suatu masalah atau dalam mendokumentasikan logika tersebut.

Tujuan

❑ Menggambarkan suatu tahapan penyelesaian masalah

❑ Secara sederhana, terurai, rapi dan jelas

❑ Menggunakan simbol-simbol standar

Model / Jenis Flowchart

❑ System Flowchart

❑ Program Flowchart

System Flowchart

❑ Menggambarkan suatu sistem peralatan komputer yang digunakan dalam proses pengolahan data serta hubungan antar peralatan

tersebut

❑ Tidak digunakan untuk menggambarkan urutan langkah untuk memecahkan masalah

❑ Hanya untuk menggambarkan prosedur dalam sistem yang dibentuk

Contoh Penggunaan System Flowchart

Keyboard

CPU Disket

VDU

Program Flowchart

❑ Menggambarkan urutan logika dari suatu prosedur pemecahan masalah

❑ Dua jenis metode penggambaran program flowchart :❑ Conceptual flowchart, menggambarkan alur pemecahan masalah secara global.

❑ Detail flowchart, menggambarkan alur pemecahan masalah secara rinci

Contoh Flowchart

Start

Input

Proses

Output

End

Start

End Input “Berapa data” ; N

Jml = 0

Input Bil

Next K For K = 1 to N

Print “Jumlah = “; Jml Jml = Jml + Bil

Simbol-simbol Flowchart

• Flow direction symbols

• Processing symbols

• Input / Output symbols

• Digunakan untuk menghubungkan simbol satu dengan yang lain

• Disebut juga connecting line

• Menunjukan jenis operasi pengolahan dalam suatu proses / prosedur

• Menunjukkan jenis peralatan yang digunakan sebagai media input atau output

Flow Direction Symbols

• Simbol arus / flow

• Simbol communication link

• Simbol connector

• Simbol offline connector

• Menyatakan jalannya arus suatu proses

• Menyatakan transmisi data dari satu lokasi ke lokasi lain

• Menyatakan sambungan dari proses ke proses lainnya dalam halaman yang sama

• Menyatakan sambungan dari proses ke proses lainnya dalam halaman yang berbeda

Processing Symbols

• Simbol process

• Simbol manual

• Simbol decision

• Simbol predefined process

• Simbol terminal

• Menyatakan suatu tindakan (proses) yang dilakukan oleh komputer

• Menyatakan suatu tindakan (proses) yang tidak dilakukan oleh komputer

• Menujukkan suatu kondisi tertentu yang akan

menghasilkan dua kemungkinan jawaban : ya / tidak

• Menyatakan penyediaan tempat penyimpanan suatu pengolahan untuk memberi harga awal

• Menyatakan permulaan atau akhir suatu program

Processing Symbols

• Simbol keying operation

• Simbol offline-storage

• Simbol manual input

• Menyatakan segal jenis operasi yang diproses dengan menggunakan suatu mesin yang

mempunyai keyboard

• Menunjukkan bahwa data dalam simbol ini akan disimpan ke suatu media tertentu

• Memasukkan data secara manual dengan menggunakan online keyboard

Input / Output Symbols

• Simbol input/output

• Simbol punched card

• Simbol magnetic tape

• Simbol disk storage

• Menyatakan proses input atau output tanpa tergantung jenis peralatannya

• Menyatakan input berasal dari kartu atau output ditulis ke kartu

• Menyatakan input berasal dari pita magnetis atau output disimpan ke pita magnetis

• Menyatakan input berasal dari dari disk atau output disimpan ke disk

Input / Output Symbols

• Simbol document

• Simbol display

• Mencetak keluaran dalam bentuk dokumen (melalui printer)

• Mencetak keluaran dalam layar monitor

Contoh System Flowchart

Data jawaban ujian

Koreksi

Daftar Koreksi

Data File

utama ujian

Periksa Ujian

Tabel Siswa

File siswa lulus

Laporan Hasil Ujian

Kaidah Pembuatan Flowchart

Start

Input

Proses

Output

End

Pengolahan data

START

READ

HABIS ?

PROCESS

WRITE

END Tidak

Ya

Menghitung luas persegi panjang

Input lebar Start

End Input panjang

Luas = panjang * lebar

Print Luas

Flowchart

❑ Flowchart untuk menentukan bilangan genap/ganjil

Y

T Start

Input Bilanga

n

Hitung sisa bagi antara bilangan dengan 2

A

A

Apakah Sisa =

0

Cetak

Genap Cetak

Ganjil

End

Tugas

Buatlah algoritma dan flowchart:

❑ Menghitung Luas Lingkaran dan menampilkan hasilnya

❑ Mengecek bilangan di antara 2 bilangan masukan, apakah sama ataukah lebih besar salah satunya, dan tampilkan hasilnya

<Topik Silabus>

1. <Kesimpulan materi 1>

2. <Kesimpulan materi 2>

3. <Kesimpulan materi 3>

4. <dst>

Kesimpulan Pertemuan #

TERIMA KASIH

Implementasi Perancangan UI

Profil Pengajar

Jabatan Akademik <tahun dan jabatan terakhir Pengajar>

Pendidikan

❑ <riwayat pendidikan Pengajar>

Riwayat Pekerjaan

❑ <riwayat pekerjaan Pengajar>

Contact

HP WA only :<no hp Pengajar>

Email :<email Pengajar>

Foto Pengajar

Contact

HP WA only :<no hp Pengajar>

Email :<email Pengajar>

Foto Pengajar

Implementasi Rancangan User Interface Pelatihan

Deskripsi Singkat mengenai Topik Implementasi Perancangan Tampilan UI Tujuan Pelatihan

Mengimplementasikan Perancangan Tampilan UI Materi Yang akan disampaikan:

1. Implementasi Perancangan UI

2. Perancangan Menu, Layout dan Form Fill Tugas :

3. Membuat Radio Button dan Button Choice 4. Membuat Check Box dan Combo Box

Outcome/Capaian Pelatihan

5. Peserta dapat membuat sistem menu pada website 6. Peserta dapat membuat layout website

7. Peserta dapat membuat form fill-In pada website

8. Peserta dapat membuat sistem menu, layout dan form fill-in dengan menggunakan bootstrap

Implementasi Rancangan User Interface Pelatihan

❖Perancangan Menu

❖Perancangan Layout

❖Perancangan Form Fill-in

❖Pengaturan Style Komponen HTML

❖Perancangan Tampilan UI dengan Menggunakan Bootstrap Framework

❖Alternatif Awal memanfaatkan tools notepad dan membuat dalam 1 folder sehinggal menginisiasi file index dan mengaplikasikan terhadap file pendukung yang

berekstensi .html dapat terhubung ke link index.

Perancangan Menu Pelatihan

Singles Menu (Menu Tunggal)

Combination of Multiple Menus (Kombinasi beberapa menu)

Perancangan Menu – Single Menu Pelatihan

❖ Single menu ini perlu users untuk memilih antara satu atau lebih item atau memungkinkan multiple selection. Umumnya menu ini hadir tanpa parameter atau instruksi dengan parameter standar.

Perancangan Menu – Single Menu Pelatihan

❖Single Menu:

• Radio Buttons: Tampilan menu dengan bentuk radio button. User harus memilih salah satu pilihan yang diberikan.

• Button Choice : Tampilan menu dengan menggunakan bentuk tombol/button. User mengklik salah satu tombol pada tampilan menu contohnya OK atau Cancel.

• Multiple Selection Menus (Check Boxes) : Tampilan menu dengan itemnya diseleksi dapat lebih dari satu.

• Pop-up Menus (Context Menus) : Tampilan menu yang diaktifkan dengan mengklik tombol kanan mouse atau mengarahkan mouse pada area yang ditentukan.

• Scrolling List Box Choice : Tampilan menu dengan menggunakan bentuk listbox.

• Scrolling Combo Box Choice : Tampilan menu dengan menggunakan combo box.

Latihan 1: Radio Button Pelatihan

Contoh Source code membuat Radio Button

Latihan 2: Button Choice

Contoh Source code membuat Button Choice

Latihan 3: Check Box

Contoh Source code membuat Check Box

Latihan 4: Combo Box

Kesimpulan Pertemuan #

Apa Itu CSS??

 CSS adalah Cascading Style Sheets

 CSS menjabarkan elemen-elemen HTML yang akan ditampilkan dilayar, kertas atau dimedia lain.

 CSS menyederhanakan banyak pekerjaan karena dapat

mengontrol layout dari banyak web sekaligus stylesheet

eksternal disimpan di file CSS

Berikut adalah contoh dari

penggunaan CSS dalam web

Kenapa Menggunakan CSS

Css dipergunakan untuk mendefinisikan halaman web kita, termasuk desain, layout dan variasi untuk menampilkan di perangkat dan ukuran layer yang berbeda.

body {

background-color: lightblue; }

h1 {

color: white;

text-align: center;

} p {

font-family: verdana;

font-size: 20px;

}

CSS Memberikan solusi untuk masalah besar

HTML tidak pernah ditujukan untuk mempergunakan Tag sebagai alat untuk melakukan desain di web. HTML dibuat untuk mendeskripsikan isi dari halaman web seperti :

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

Ketika tags seperti <font>, dan atribut warna (color) diterapkan di HTML 3.2, hal ini menimbulkan bencana bagi para pengembang web. PEngembangan web dalam skala besar, dimana informasi Fonts dan warna (color) ditambahkan dalam setiap halaman yang menyebabkan hal ini menjadi lama dan mahal.

Solusi atas permasalahan tersebut, World Wide Web Consortium (W3C) memperkenalkan CSS. CSS menghilangkan Style formatting dari halaman HTML

CSS meringkas banyak pekerjaan

Definisi dari style biasanya disimpan diluar file dengan menggunakan ekstensi .css

Hal tersebut dapat memudahkan kita untuk mengubah

tampilan dari web secara keseluruhan dengan hanya

mengubah satu file eksternal itu.

CSS Syntax

Selector menunjuk ke elemen HTML yang ingin diberikan style / diubah style tampilannya. Sedangkan declaration block berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.

Setiap deklarasi menyertakan nama properti CSS dan nilai,

dipisahkan oleh titik dua. Deklarasi beberapa CSS dipisahkan

dengan titik koma, dan blok deklarasi dikelilingi oleh kurung

kurawal.

Contoh

Dalam contoh ini semua elemen <p> akan diratakan tengah, dengan warna teks merah:

p {

color: red;

text-align: center;

}

Penjelasan Contoh :

 “p” adalah selector dalam CSS (menunjuk ke elemen HTML yang ingin diberikan style CSS: <p>).

 “color” adalah properti, dan “red “adalah nilai properti

 “text-align” adalah properti, dan center adalah nilai properti

CSS Selector

❖ Selector digunakan untuk menentukan target elemen HTML yang akan diatur style-nya

❖ Elemen yang dipilih oleh selector disebut juga subject of the selector

HTML Selector

• Selector HTML diwakili oleh nama tag.

• Sebagai contoh h1 merupakan selector untuk tag <h1>.

• Selector digunakan untuk mendefinisikan bagaimana tag ditampilkan.

Contoh:

h1 { color: red; }

akan mengubah:

<h1>....</h1>

Class Selector

• Class merupakan merupakan penamaan sejumlah tag yang memiliki properties yang sama.

• Anda dapat memberi nama apapun pada kelas.

• Dapat diaplikasikan pada beberapa elemen yang memiliki nama kelas sama

Contoh:

.myClass { font: bold 1.25em times; }

akan mengubah:

<h1 class=”myClass”>...<h1>

<div class=”myClass”>...</div>

ID Selector

• Hampir sama dengan selektor class, pengaturan dengan ID dapat diaplikasikan ke tag HTML.

• Akan tetapi ID hnya bisa diaplikasikan ke satu tag, berbeda dengan class yang bisa diaplikasikan ke beberapa tag sekaligus.

Contoh:

#myObject1 { position: absolute; top: 10px; }

akan mengubah:

<h1 id=”myObject”> …. </h1>

* Selector

• Digunakan untuk memilih semua elemen Contoh:

Pilih semua elemen di dalam elemen <div> dan atur warna latar belakangnya menjadi kuning:

div * { 

    background-color: yellow;

}

akan mengubah:

<div id=”myObject”> …. </div>

Mengkombinasikan selector

• Misalnya, jika saya memiliki CSS yang sama untuk h1 dan juga kelas .special, saya dapat menulis sbb:

sebagai dua aturan terpisah Dikombinasikan dengan selector list

Referensi CSS Selector

• https://www.w3schools.com/cssref/css_selectors.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Alat Uji CSS Selector

https://www.w3schools.com/cssref/trysel.asp

Menambahkan CSS

Ada tiga cara untuk menambahkan CSS : 1. External CSS

2. Internal CSS

3. Inline CSS

EXTERNAL CSS

External CSS dapat digunakan untuk mengubah tampilan website dengan mengubah hanya pada satu file. Setiap halaman HTML harus memuat tag <link> yang berisi kemana rujukan file external style sheet. Tag <link> berada di dalam tag <head>.

Dimana file css yang digunakan sebagai external style sheet harus dituliskan dalam ekstensi .css . pada file external .css ini tidak boleh berisi tag HTML. Berikut contoh file external mystyle.css :

EXTERNAL CSS LANJUTAN

Catatan :

Jangan memberikan spasi pada property value dengan unitnya. Misalnya :

Margin-left: 20 px (salah) Margin-left: 20px (benar)

INTERNAL CSS

Internal style sheet digunakan pada setiap halaman HTML dengan style keunikannya sendiri.

Dalam internal CSS digunakan tag <style > di dalam tag <head> untuk menlakukan kostumisasi tampilan halaman tersebut.

INLINE CSS

Inline style sheet digunakan untuk membuat kostumisasi tampilan di setiap elemen dengan cara menambhakan style atribut yang diperlukan pada setiap elemen di halaman HTML.

Multiple Style Sheet

Jika di dalam satu halaman HTML memiliki dua atau lebih style sheet, maka style sheet yang terakhir yang didefinisikan yang akan di eksekusi. Contoh :

Jika halaman HTML menggunakan external style sheet dengan style Berikut :

Kemudian di halaman yang sama menggunakan juga internal style sheet dengan style Berikut :

Multiple Style Sheet Lanjut…

Sehingga pada halaman HTML menjadi seperti Berikut :

Maka, syntax yang dieksekusi adalaha color: orange, tetapi jika penulisannya seperti Berikut :

Maka, syntax color yang di eksekusi adalah syntax external style sheet yaitu color : navy

Komentar pada CSS

• Komentar digunakan untuk menjelaskan keterangan suatu kode program.

• Komentar diabaikan oleh browser.

• Penggunaan komentar pada CSS ditempatkan di dalam elemen <style>, dan dimulai dengan /* dan diakhiri dengan

*/:

Contoh Comment CSS

• Contoh comment single line

• Komentar dapat juga diletakkan di dalam kode yang kita inginkan:

• Contoh comment multiple line

CSS Colors

Warna ditentukan menggunakan nama warna yang telah ditentukan sebelumnya, atau nilai RGB, HEX, HSL, RGBA, HSLA

CSS Color Names

Pada CSS, warna dapat ditentukan dengan menggunakan nama warna yang telah ditentukan:

CSS Background Color

Anda dapat mengatur warna latar belakang untuk elemen HTML:

Contoh :

CSS Text Color

Anda dapat mengatur warna teks:

CSS Border Color

Anda dapat mengatur warna border:

Contoh :

CSS Color Values

Di CSS, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:

Sama seperti nama warna "Tomat":

Sama seperti nama warna "Tomat", tapi 50%

transparan:

Contoh CSS Color Values

Perancangan Menu – Combination of Multiple Menus

❖Combination of Multiple Menus :

❖ Linear Sequence Menus adalah menu yang mengarahkan user melalui proses pengambilan keputusan yang kompleks. Menu ini dijalankan secara step by step.

❖ Simultaneous Menus adalah menyediakan menu aktif pada waktu yang sama dan memungkinkan pengguna untuk memasukkan pilihan dalam urutan apapun.

❖ Tree Structured Menus, menu yang dibagi menjadi beberapa kategori item, misal File, Edit dan View.

Contoh Perancangan Combination Of

Multiple Menus

Membuat Style List Menu (CSS)

.navbar a:hover, .dropdown:hover .dropbtn { background-color: red;

}.dropdown-content { display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}.dropdown-content a { float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}.dropdown-content a:hover { background-color: #ddd;

}.dropdown:hover .dropdown-content { display: block;}

</style>

<style>

body {

font-family: Arial, Helvetica, sans-serif;

}

.navbar {

overflow: hidden;

background-color: #333;}

.navbar a { float: left;

font-size: 16px;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

.dropdown { float: left;

overflow: hidden;

}

.dropdown .dropbtn { font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;}

Membuat List Menu

<div class="navbar">

<a href="#home">Home</a>

<a href="#news">News</a>

<div class="dropdown">

<button class="dropbtn">Dropdown</button>

<div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</div>

</div>

Perancangan Layout

❖ Dalam membuat web desain, layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman web dengan baik dan benar.

❖ Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut: