Cara menggunakan shopping list in javascript

Topic outline

• General
• Sesi 1: Pengantar Mata Kuliah

  Sesi 1: Pengantar Mata Kuliah

  1. Overview Mata Kuliah;
  2. 7 Karakteristik yang wajib dimiliki oleh seorang Fresh Graduate untuk menjadi seorang Digital Professional;
  3. Perubahaan yang terjadi di perusahaan akibat teknologi;
  4. Personal branding;
  5. Cara mengasah Growth Mindset;
  6. Diskusi
  
  
  Table of Contents Show

  • Topic outline
  • Sesi 1: Pengantar Mata Kuliah
  • Sesi 2: Perkenalan Design Thinking
  • Design Jam Team Project Briefing
  • Sesi 4: Mengapa Critical Thinking dan Problem Solving adalah dua skill yang wajib dimiliki oleh setiap fresh graduate
  • Sesi 5: HTML & CSS I dan HTML & CSS II
  • Sesi 6: HTML & CSS Dojo I (Latihan tanpa instruksi):
  • Sesi 7: HTML & CSS Dojo II (Latihan tanpa instruksi):
  • Sesi 8: HTML & CSS III:
  • Sesi 9: HTML & CSS Dojo III (Latihan tanpa instruksi) dan CSS IV (Flexbox)
  • Sesi 10: Briefing Team Project Wajib
  • Pengantar: Mengapa Bahasa Javascript sangat Populer; Dari aplikasi web sederhana hingga UI/UX layar komputer SpaceX
  • Sesi 12: JavaScript III dan JavaScript IV
  • Sesi 13: JavaScript V, JavaScript VI, JavaScript VII
  • Sesi 14: Presentasi: Mengapa SQL Penting Dalam Mengambil Keputusan Bisnis
  • Sesi 15: SQL III, SQL DOJO dan SQL IV, Menganalisis Database Situs Fashion e-commerce (WAJIB)
  • Sesi 16: Node.js
  • Sesi 17: Node.js II
  • Sesi 18: Node.js III:
  • Sesi 19: Memulai Pengembangan Node.js di environment lokal
• Sesi 2: Perkenalan Design Thinking

  Sesi 2: Perkenalan Design Thinking

  ●        Design Thinking best practices;

  ●        Bagaimana digunakan dalam pekerjaan sehari-hari;

  ●        Cara menulis Business Problem Statement;

  ●        How Might We’s;

  ●        Penggunaan Google Jamboard;

  ●        Design Jam, sebuah aktifitas yang digunakan oleh perusahaan-perusahaan teknologi terbesar seperti Facebook dan Google. Mahasiswa bekerja dalam kelompok menggunakan Design Thinking dan Critical Thinking untuk mencari berbagai solusi dalam memecahkan sebuah tantangan bisnis.

  
  

• Design Jam Team Project Briefing

  Design Jam Team Project Briefing

  Design Jam Team Project Briefing

  • Briefing peraturan kegiatan design jam
    

  Design Jam Team Project Exercise

  •       Kelas dibagi dalam tim maksimal 8 orang.
  •       Masing-masing team melakukan design jam di monitor oleh Dosen dan Tutor
  •       Review dan reflection
    

• Sesi 4: Mengapa Critical Thinking dan Problem Solving adalah dua skill yang wajib dimiliki oleh setiap fresh graduate

  Sesi 4: Mengapa Critical Thinking dan Problem Solving adalah dua skill yang wajib dimiliki oleh setiap fresh graduate

  Perkenalan dan Overview Platform Progate, tata tertib, dsbnya

  Memulai Path Pengembangan Web (Node.js) dengan membaca tiga topik pendahulu:

  ●        Apa itu Path Pengembangan Web?

  ●        Apa yang terjadi setelah menyelesaikan Path Pengembangan Web?

  ●        Bagaimana cara belajar secara efektif?

  Pengantar mengenai HTML & CSS

  • 1. Pastikan computer/ laptop Anda tidak dalam keadaan menggunakan VPN / Proxy karena IP Address wajib Indonesia untuk menggunakan Progate versi Indonesia,
    2. Segera Daftar dan gabung di team dashboard Progate melalui link ini:  https://progate.com/companies/9003/invitation?auth_token=e41ab32092cd49fd3ef423239aeb674c
    3. Mohon untuk tunggu kelas dimulai sebelum mulai belajar agar tidak bingung.

• Sesi 5: HTML & CSS I dan HTML & CSS II

  Sesi 5: HTML & CSS I dan HTML & CSS II

  HTML & CSS I:

  Chapter 1 - Memulai dengan HTML

  1. Memulai dengan HTML
  2. Judul dan Paragraf
  3. Tautan
  4. Gambar
  5. Daftar

   Chapter 2 - Memulai dengan CSS

  1. Warna
  2. Ukuran font dan jenis font
  3. Lebar, tinggi, dan warna latar belakang
  4. Class

   Chapter 3 - Layout (tata letak) dasar

  1. Struktur HTML (1)
  2. Struktur HTML (2)
  3. Layout dasar

   Chapter 4 - Header

  1. Struktur header
  2. Layout header
  3. Padding

   Chapter 5 - Footer

  1. Struktur Footer
  2. Layout Footer

   Chapter 6 - Konten

  1. Layout bagian utama
  2. Struktur konten
  3. Batas
  4. Padding dan Margin

   Chapter 7 - Formulir

  1. Layout formulir (1)
  2. Layout formulir (2)

   HTML & CSS II:

  Chapter 1 - Layout dasar

  1. Persiapan
  2. Layout dasar

   Chapter 2 - Bagian atas halaman

  1. Layout bagian atas
  2. Transparansi dan spasi antar-huruf
  3. Membuat tombol
  4. Menyesuaikan layout
  5. Menggunakan ikon

   Chapter 3 - Header

  1. Layout header
  2. Membuat tautan log in
  3. Menyempurnakan log in

   Chapter 4 - Daftar pelajaran

  1. Layout daftar pelajaran
  2. Menyejajarkan bagian pelajaran
  3. Menyesuaikan Layout

   Chapter 5 - Bagian pesan

  1. Layout bagian pesan
  2. Membuat tombol 3D
  3. Menerapkan CSS berdasarkan Klik

   Chapter 6 - Footer

  1. Footer

   Chapter 7 - Memperbaiki Header

  1. Memperbaiki header

• Sesi 6: HTML & CSS Dojo I (Latihan tanpa instruksi):

  Sesi 6: HTML & CSS Dojo I (Latihan tanpa instruksi):

  Chapter 1 - Membuat halaman web dari awal

  1. Header
  2. Bagian atas halaman
  3. Bagian konten atau isi
  4. Bagian formulir
  5. Footer
  
  

• Sesi 7: HTML & CSS Dojo II (Latihan tanpa instruksi):

  Sesi 7: HTML & CSS Dojo II (Latihan tanpa instruksi):

  Chapter 1 - Membuat halaman web modern dari awal

  1. Bagian atas
  2. Header
  3. Daftar pelajaran
  4. Bagian pesan
  5. Footer
  
  

• Sesi 8: HTML & CSS III:

  Sesi 8: HTML & CSS III:

  Chapter 1 - Design Web yang Responsive

  1. Persiapan

   Chapter 2 - Media Queries

  1. Menggunakan media queries
  2. Layout dengan media queries
  3. Box-sizing

   Chapter 3 - Menjadikan halaman Anda responsive

  1. Persiapan desain yang responsive
  2. Layout tablet
  3. Memperbaiki layout yang responsive
  4. Layout smartphone (1)
  5. Layout smartphone (2)
  6. Membuat font-size responsive
  7. Max-width
  8. Menjadikan Header responsive
  
  

• Sesi 9: HTML & CSS Dojo III (Latihan tanpa instruksi) dan CSS IV (Flexbox)

  Sesi 9: HTML & CSS Dojo III (Latihan tanpa instruksi) dan CSS IV (Flexbox)

  HTML & CSS Dojo III (Latihan tanpa instruksi):

  Chapter 1 - Menguasai desain web yang responsive
  1. Menjadikan header responsive
  2. Menjadikan bagian atas responsive
  3. Menjadikan daftar pelajaran responsive
  4. Menjadikan footer responsive

  HTML & CSS IV (Flexbox)

  Chapter 1 - Apa itu Flexbox?

  1. Persiapan

   Chapter 2 - Mengimplementasikan flexbox

  1. Display: flex
  2. Flex: auto

   Chapter 3 - Desain responsive

  1. Flex-wrap: wrap
  2. Media queries
  3. Flex-direction

• Sesi 10: Briefing Team Project Wajib

  Sesi 10: Briefing Team Project Wajib

  Menyiapkan Aplikasi Web di Environment local

  1. Command Line
  2. Git
  3. Membuat Akun GitHub dan simpan linknya melalui Google form
  4. Bahan bacaan tambahan

  Proyek Tim

  1. “Membuat halaman web statis bersama kelompok anda!” Tujuan dari proyek ini adalah untuk membuat suatu halaman web bersama rekan tim (satu tim maksimal 5 anggota).
  2. Proyek ini sifatnya wajib untuk menerapkan apa yang sudah di pelajari di bahasa HTML & CSS, sebagaimana seorang programmer asli membangun sebuah halaman web.
  3. Proyek ini akan melatih skill kerjasama, komunikasi, dan kemandirian mengatur waktu dalam membangun sebuah proyek berbasis web.

  Tim mengerjakan Proyek

  •        Pengumpulan link halaman web via googleform
  •        Deadline 21:00 WIB 10 September 2021
  
  

• Pengantar: Mengapa Bahasa Javascript sangat Populer; Dari aplikasi web sederhana hingga UI/UX layar komputer SpaceX

  Pengantar: Mengapa Bahasa Javascript sangat Populer; Dari aplikasi web sederhana hingga UI/UX layar komputer SpaceX

  JavaScript I:

  Chapter 1 - String & Integer

  1. Pengantar Javascript ES6
  2. console.log()
  3. Kalkulasi (1)
  4. Kalkulasi (2)
  5. Menggabungkan string

   Chapter 2 - Variable & Constant

  1. Variable
  2. Menggunakan variable
  3. Mengupdate variable (1)
  4. Mengupdate variable (2)
  5. Constant
  6. Template literal

   Chapter 3 - Statement Conditional

  1. Statement if
  2. Operator boolean & perbandingan (1)
  3. Operator boolean & perbandingan (2)
  4. Else
  5. Else if
  6. Beberapa kondisi
  7. Statement switch (1)
  8. Statement switch (2)

   JavaScript II:

  Chapter 1 - Iterasi

  1. Review variable
  2. Loop while
  3. Loop for
  4. Menerapkan iterasi

   Chapter 2 - Array

  1. Apa yang dimaksud dengan array
  2. Mendapatkan element array
  3. Mengupdate element array
  4. Iterasi dengan array (1)
  5. Iterasi dengan array (2)

   Chapter 3 - Object

  1. Apa yang dimaksud dengan Object
  2. Mengakses dan Memperbarui nilai
  3. Array dalam object (1)
  4. Array dalam object (2)

   Chapter 4 - Undefined (tidak didefinisikan)

  1. Apa yang dimaksud dengan “Undefined”
  2. Mencegah undefined

   Chapter 5 - Latihan Akhir

  1. Bagian 1
  2. Bagian 2
  
  

• Sesi 12: JavaScript III dan JavaScript IV

  Sesi 12: JavaScript III dan JavaScript IV

  Chapter 1 - Mempelajari Function

  1. Apa yang dimaksud dengan Function (1)
  2. Apa yang dimaksud dengan Function (2)
  3. Arrow function
  4. Argument
  5. Menggunakan beberapa argument
  6. Nilai return
  7. Menggunakan nilai return
  8. Scope (cakupan)

  Latihan Akhir

   JavaScript IV:

  Chapter 1 - Dasar-dasar Class

  1. Review object
  2. Apa yang dimaksud dengan Class?
  3. Membuat instance
  4. Constructor (1)
  5. Constructor (2)
  6. Constructor (3)
  7. Method (1)
  8. Method (2)
  9. Memanggil method di dalam method

   Chapter 2 - Inheritance Class

  1. Apa yang dimaksud dengan inheritance?
  2. Menggunakan inheritance class
  3. Menambah method
  4. Overriding (1)
  5. Overriding (2)
     
  
  

• Sesi 13: JavaScript V, JavaScript VI, JavaScript VII

  Sesi 13: JavaScript V, JavaScript VI, JavaScript VII

  JavaScript V:

  Chapter 1 - Memisahkan File

  1. Memisahkan file (1)
  2. Memisahkan file (2)
  3. Meng-export nilai
  4. Export bernama
  5. Jalur relatif

   Chapter 2 - Menggunakan Paket

  1. Paket (1)
  2. Paket (2)

   Javascript VI:

  Chapter 1 - Method untuk Array

  1. Push
  2. ForEach
  3. Find
  4. Filter Map

   Javascript VII:

  Chapter 1 - Mempelajari tentang Callback Function

  1. Tentang Callback Function
  2. Apa yang dimaksud dengan Callback Function?
  3. Mendeklarasikan callback function secara langsung
  4. Argument callback function
  
  

• Sesi 14: Presentasi: Mengapa SQL Penting Dalam Mengambil Keputusan Bisnis

  Sesi 14: Presentasi: Mengapa SQL Penting Dalam Mengambil Keputusan Bisnis

  SQL I:

  Mendapatkan Data:

  1. Apa itu database
  2. Apa itu kueri
  3. Memilih banyak kolom

   Mendapatkan Baris Tertentu:

  1. WHERE (1)
  2. WHERE (2)
  3. Operator perbandingan
  4. LIKE (1)
  5. LIKE (2)
  6. NOT
  7. IS NULL , IS NOT NULL
  8. AND, OR

   Mengolah Hasil Data:

  1. ORDER BY
  2. LIMIT

   Proyek Akhir Studi I:

  1. Mempraktikkan hal yang sudah Anda pelajari

   SQL II:

  Mengolah Hasil Pencarian

  1. DISTINCT
  2. Operator aritmetika

   Menggunakan Function Agregat

  1. SUM
  2. AVG
  3. COUNT
  4. MAX, MIN

   Mengelompokkan Data

  1. GROUP BY
  2. GROUP BY (lebih dari satu)
  3. GROUP BY (WHERE)
  4. HAVING

   Proyek Akhir Studi II

  Mempraktikkan hal yang sudah Anda Pelajari

• Sesi 15: SQL III, SQL DOJO dan SQL IV, Menganalisis Database Situs Fashion e-commerce (WAJIB)

  Sesi 15: SQL III, SQL DOJO dan SQL IV, Menganalisis Database Situs Fashion e-commerce (WAJIB)

  SQL III:

  Menggunakan Subkueri

  1. Tabel players
  2. Subkueri
  3. AS

   Beberapa Tabel

  1. Tabel countries
  2. Menggabungkan tabel
  3. JOIN (1)
  4. JOIN (2)
  5. Tabel teams
  6. LEFT JOIN
  7. Menggabungkan 3 tabel

   Tantangan Terakhir

  1. Mempraktikkan keahlian SQL Anda

   SQL DOJO:

  Latihan tanpa Instruksi - Menganalisis Database Situs Fashion

  1. Menganalisis dengan SQL
  2. Pengguna
  3. Produk (1)
  4. Produk (2)
  5. Produk (3)
  6. Riwayat penjualan
  7. Penjualan dan laba
  8. Analisis Harian
  9. Data Pengguna yang kompleks
  10. Data Produk yang kompleks

   SQL IV:

  Menambahkan, Memperbarui, dan Menghapus Data

  1. INSERT
  2. UPDATE
  3. DELETE

   Memantapkan Keahlian Anda

  1. Mempraktikkan hal yang sudah Anda pelajari

  Menganalisis Database Situs Fashion e-commerce (WAJIB)

  • Deadline 21:00 WIB, 29 September 2021
  
  

• Sesi 16: Node.js

  Sesi 16: Node.js

  Menggabungkan semua. Membuat aplikasi “shopping list”

  Node.js I:

  Memulai Penggunaan Node.js

  1. Persiapan

   Mengkonfigurasi Express

  1. Menginstal Express

        2. Menjalankan Server

  Menampilkan Halaman

  1. Cara halaman ditampilkan
  2. Menerapkan CSS dan menampilkan gambar
  3. Membuat Halaman daftar

  Menggunakan EJS

  1. Menggunakan EJS untuk menampilkan nilai
  2. Menampilkan HTML menggunakan for Each

  Menambah Tautan

  1. Menautkan antar halaman
  
  

• Sesi 17: Node.js II

  Sesi 17: Node.js II

  Node.js II:

  Menggunakan Database

  1. Persiapan

   Menyiapkan Database

  1. Mengintegrasikan database

   Menampilkan Nilai Database

  1. Menggunakan database
  2. Menampilkan nilai yang dipilih

   Fitur Penambahan Item

  1. Menciptakan halaman penambahan item
  2. Meminta menggunakan Formulir
  3. Menambahkan item ke database
  4. Menggunakan Redirect (pengalihan)
  
  

• Sesi 18: Node.js III:

  Sesi 18: Node.js III:

  Node.js III:

  Fitur Hapus dan Edit

  1. Persiapan

  Menghapus item Daftar

  1. Menyiapkan tombol hapus
  2. Mengirim ID item
  3. Menjalankan kueri DELETE

   Mengedit item Daftar

  1. Persiapan
  2. Menampilkan item yang dipilih
  3. Rute untuk memperbarui data
  4. Memperbarui item yang dipilih
  
  

• Sesi 19: Memulai Pengembangan Node.js di environment lokal

  Sesi 19: Memulai Pengembangan Node.js di environment lokal

  Memulai Pengembangan Node.js di environment lokal

  ●        Persiapan Local Environment Node.js

  ●        Membuat Aplikasi Node.js Baru

  ●        Persiapan Local Environment MySQL

  ●        Membuat Database dengan MySQL

  ●        Menghubungkan Aplikasi Node.js ke MySQL

  •       Menuntaskan Pengembangan Aplikasi Web Lokal