Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Saat membuat fitur pada web, terkadang kita butuh menjalankan perintah saat sesuatu terjadi pada web. Misalnya kita ingin menampilkan pesan saat user selesai mengisi sebuah form.

2. Penjelasan Materi Sebagai Solusi

Untuk menjalankan perintah saat sesuatu terjadi, kita bisa menggunakan event

3. Penjelasan Detail Materi

• Contoh - contoh event umum pada javascript
  • onclick
  • onsubmit
  • onchange
  • onkeydown
  • onkeyup
  • onblur
  • onfocus
• event object

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang berisi sebuah form biodata. Saat tombol submit pada form tersebut ditekan, maka akan muncul pesan (menggunakan alert) yang berisi pesan halo, diikuti dengan nama yang diinputkan pada form tersebut (contoh: halo aka)

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/javascript/event.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, untuk membuat interaksi pada user, kita butuh merubah struktur atau style dari web saat web tersebut sudah berjalan di browser. Misalnya, apabila user selesai mengisi sebuah form, kemudian menekan tombol submit, maka akan muncul sebuah tabel yang berisi informasi dari data yang disubmit oleh user tadi

2. Penjelasan Materi Sebagai Solusi

Untuk mengubah struktur atau style dari web saat web tersebut sudah berjalan di browser, kita dapat melakukan manipulasi pada DOM menggunakan javascript

3. Penjelasan Detail Materi

• Penjelasan DOM
• Cara melakukan manipulasi DOM secara manual (pake inspect element di browser)
• Cara melakukan manipulasi DOM secara otomatis (pake javascript)
  • menentukan element yang ingin dimanipulasi (menggunakan document.getBy....)
  • manipulasi element tersebut

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang memiliki sebuah form biodata. Apabila form tersebut selesai diisi dan disubmit, maka akan muncul tabel baru yang berisikan informasi dari biodata yang disubmit tadi

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/javascript/manipulasi-dom.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada pembuatan website, biasanya kita butuh menampilkan data dalam bentuk list untuk mempermudah pembacaan. Namun, pada HTML kita tidak bisa langsung membuat list menggunakan text, karena enter tidak terbaca di HTML.

2. Penjelasan Materi Sebagai Solusi

Untuk membuat list di HTML, bisa menggunakan kombinasi dari tag <ol />, <ul />, dan <li />

3. Penjelasan Detail Materi

Dijelaskan langkah - langkah untuk membuat ordered list dan unordered list

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang menampilkan data dalam bentuk list. Misalnya menampilkan makanan favorit, daftar pekerjaan yang harus dikerjakan, dll.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/list.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, ketika kita membuat fitur website. Kita butuh menyimpan data yang bersifat permanen, dimana apabila browser di refresh, data tersebut tidak hilang. Sedangkan, apabila kita menyimpan data tersebut ke sebuah variable javascript, maka data tersebut akan hilang saat browser di refresh.

2. Penjelasan Materi Sebagai Solusi

Untuk menyimpan data secara permanen, maka kita butuh menyimpan data tersebut ke sebuah web service

3. Penjelasan Detail Materi

• Penjelasan dan contoh web service
• Penjelasan fetch API
• Cara menggunakan fetch API

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat web kontak. Dimana web tersebut dapat menampilkan dan menambahkan kontak. Data dari kontak tersebut dikirimkan dan disimpan ke web service (Web service nya sudah disediakan dari awal)

link web service untuk contoh kasus :
https://aka-contact-backend.herokuapp.com/contact

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah bisa membuat server yang dapat menerima sebuah file dan menyimpannya ke hardisk. Namun apabila file tersebut dicoba dibuka di browser, maka tidak akan muncul, malah muncul pesan bahwa rute tidak ditemukan.

2. Penjelasan Materi Sebagai Solusi

Agar file tersebut dapat ditampilkan, kita butuh membuat rute khusus yang digunakan untuk menampilkan file2 yang ada pada suatu folder. Pada express, kita bisa membuatnya dengan mudah menggunakan middleware express.static()

3. Penjelasan Detail Materi

• penjelasan express.static
• cara menampilkan file yang ada pada suatu folder menggunakan express.static

4. Contoh Kasus

Diberikan langkah - langkah untuk menampilkan file yang sudah terupload pada server yang sudah dibuat pada materi sebelumnya menggunakan express.static

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

const express = require('express')
const app = express()
const multer = require('multer')
const upload = multer({ dest: 'public/upload/' })

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

function validateIndex(req, res, next) {
  if (req.query.index !== undefined && contacts[req.query.index] === undefined) {
    res.send({ success: false })
  } else {
    next()
  }
}

app.use(validateIndex)
app.use(express.json())

// menampilkan semua file atau folder yang ada pada folder public
app.use(express.static('public'))

app.get("/contact", function (req, res) {
  res.send(contacts)
})

app.post("/contact", function (req, res) {
  contacts.push({ name: req.body.name, phone: req.body.phone })
  res.send({ success: true })
})

app.put("/contact", function (req, res) {
  contacts[req.query.index] = { name: req.body.name, phone: req.body.phone }
  res.send({ success: true })
})

app.delete("/contact", function (req, res) {
  contacts.splice(req.query.index, 1)
  res.send({ success: true })
})

app.put("/contact/upload", upload.single('photo'), function (req, res) {
  contacts[req.query.index].photo = req.file.path
  res.send({ success: true })
})

app.listen(3000, function () {
  console.log("server running")
})

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Dengan menggunakan HTML, kita bisa membuat struktur halaman website, namun untuk membuat halaman website yang baik, kita juga harus memperhatikan style dari halaman tersebut, seperti warna text, warna background, dll.

2. Penjelasan Materi Sebagai Solusi

Untuk mengatur styling, bisa menggunakan CSS

3. Penjelasan Detail Materi

• struktur css (selector, property, value)
• beberapa cara untuk memasukkan css ke html (menggunakan tag <style />, eksternal css, inline css)

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat website sederhana yang memiliki judul dan paragraf, kemudian judul dan paragraf tersebut diberikan styling menggunakan css eksternal

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/list.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita hanya bisa membuat halaman website dengan tampilan text default. Bagaimana apabila kita ingin membuat text nya menjadi besar, menebalkan, atau memiringkannya ?

2. Penjelasan Materi Sebagai Solusi

Untuk mengubah tampilan text pada HTML, kita bisa menggunakan tag <h1 />, <b />, <i />, <u />, <s />

3. Penjelasan Detail Materi

Dijelaskan macam - macam text formatting dan cara menggunakannya, yaitu :

1. Heading (h1, h2, h3, dst)
2. Paragraf (p)
3. Menebalkan text (b)
4. Memiringkan text (i)
5. Menggarisbawahi text (u)
6. Mencoret text (s)

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web, yang berisi judul, sub judul, dan paragraf. Pada paragraf ada beberapa text yang ditebalkan, dimiringkan, digarisbawahi, dan dicoret.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/text-formatting.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah membuat http server yang dapat memberikan pesan ke client, namun pesan tersebut selalu sama. Seharusnya sebuah server dapat memberikan pesan yang berbeda berdasarkan URL yang diakses oleh client

2. Penjelasan Materi Sebagai Solusi

• Penjelasan cara mendapatkan url menggunakan req.url

3. Penjelasan Detail Materi

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat web server yang memiliki banyak rute

• Membuat http server
• Membaca url yang diakses client
• Membuat rute berdasarkan ur yang diakses client menggunakan IF
• Merespon pesan berupa string
• Merespon pesan dari variable yang bukan string (array of object) menggunakan JSON.stringify()

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/node-js/routing.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Untuk membuat web server menggunakan node.js, terkadang kita membutuhkan library atau package tambahan. Salah satu package yang sudah tersedia saat pertama kali menginstall node.js adalah package http. Namun tidak semua package disertakan saat pertama kali menginstall node.js. Hal ini bertujuan agar ukuran file penginstalan node.js tidak besar.

2. Penjelasan Materi Sebagai Solusi

Untuk menginstall library tambahan, kita dapat menginstallnya menggunakan NPM.

3. Penjelasan Detail Materi

• Cara init node project (dijelasin juga bakal muncul file package.json, isinya informasi project)
• Cara menginstall package (dijelasin bakal muncul folder node_modules, dan nama packagenya bakal muncul di package.json pada bagian dependencies)
• Cara menggunakan package
• Cara menguninstall package (dijelasin juga kalo perintah ini bakal menghapus package di node_modules, dan menghapus nama package pada package.json)

4. Contoh Kasus

To be added. Karena gatau package apa yang cocok untuk diterapkan pada contoh kasus web server yang sebelumnya.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/node-js/node-package-manager.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada pembuatan website, terkadang kita ingin menentukan height dan width pada suatu elemen, agar layout dari website sesuai dengan desain yang diinginkan

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan CSS, kita bisa mengubah height dan width dari suatu elemen

3. Penjelasan Detail Materi

Dijelaskan beberapa property CSS yang berhubungan dengan width dan height, seperti :

• height
• width
• min height
• min width
• max height
• max width

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang menampilkan sebuah artikel dengan gambar. Gambar tersebut terlalu besar, sehingga tampilan artikel tidak proporsional, dimana paragrafnya terlalu sedikit sedangkan gambarnya terlalu besar. Sehingga ukuran gambar perlu diperbaiki menggunakan width dan height pada CSS

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/css/height-dan-width.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Kasus umum untuk meningkatkan performa pada react-app adalah ketika kita memiliki elemen input seperti di bawah ini

<input name="search" onChange={(event)=>setSearchValue(event.target.value)} />

yang berfungsi sebagai input pencarian di aplikasi. Namun jika kita membuat panggilan API untuk mengambil data pencarian, maka kita harus membuat panggilan API untuk setiap karakter yang diinput oleh pengguna, yang mana itu akan membuat kita melakukan banyak panggilan yang tidak diperlukan.

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan konsep debounce, kita bisa meningkatkan performa aplikasi dengan tidak membuat panggilan API untuk setiap karakter yang diinput oleh pengguna, tetapi hanya setelah input pengguna berhenti melakukan input selama beberapa milidetik.

3. Penjelasan Detail Materi

• cara mengimplementasi konsep debounce dengan setTimeout pada useEffect

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat function yang digunakan untuk melakukan panggilan API, dimana nanti konsep debounce akan diimplementasikan pada function tersebut untuk meningkatkan performa pada aplikasi.

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah bisa membuat web server yang dapat melakukan manipulasi data dengan rute sebagai berikut :

/contact method GET - menampilkan semua data contact
/contact method POST - menambahkan data contact
/contact method PUT - mengubah data contact pada index 0
/contact method DELETE - menghapus seluruh data contact pada index 0

Namun, data dan index yang diinputkan selalu statis (index 0 dan data yang diinputkan selalu sama). Bagaimana cara client memberitahu server index mana yang akan diubah / dihapus, dan data apa yang harus dibuat ?

2. Penjelasan Materi Sebagai Solusi

Pada web server, client dapat mengirimkan data melalui URL. Data tersebut dapat diterima dan diolah oleh server. Pada express kita dapat membaca data yang dikirim tersebut menggunakan req.query dan req.params

3. Penjelasan Detail Materi

• penjelasan URL query
  • struktur URL
  • cara parsing menggunakan req.query
• penjelasan URL params
  • struktur URL
  • cara parsing menggunakan req.params

4. Contoh Kasus

Diberikan langkah - langkah untuk menerapkan URL query dan URL params pada web server yang sudah dibuat sebelumnya. Agar index dan data yang diinputkan bisa dinamis

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

const express = require('express')
const app = express()

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

// menampilkan semua kontak
app.get("/contact", function (req, res) {
  res.send(contacts)
})

// menambahkan kontak baru
app.post("/contact", function (req, res) {
  contacts.push({ name: req.query.name, phone: req.query.phone })
  res.send({ success: true })
})

// mengubah kontak pada index yang diinginkan
app.put("/contact", function (req, res) {
  if (contacts[req.query.index] !== undefined) {
    contacts[req.query.index] = { name: req.query.name, phone: req.query.phone }
    res.send({ success: true })
  } else {
    res.send({ success: false })
  }
})

// menghapus kontak pada index yang diinginkan
app.delete("/contact", function (req, res) {
  if (contacts[req.query.index] !== undefined) {
    contacts.splice(req.query.index, 1)
    res.send({ success: true })
  } else {
    res.send({ success: false })
  }
})

app.listen(3000, function () {
  console.log("server running")
})

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/handle-data-url.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita bisa membuat layout web dengan dua kolom menggunakan display: inline-block. Namun, agar lebarnya sesuai, kita harus menghitung pembagian persentasenya. Sehingga akan merepotkan apabila layout web kita memiliki banyak kolom, hal tersebut akan sangat merepotkan

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan flexbox, kita bisa membuat web yang memiliki banyak kolom, tanpa harus menghitung pembagian persentasenya.

3. Penjelasan Detail Materi

• cara menggunakan flexbox

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat halaman web memiliki banyak card, dimana masing - masing card memiliki lebar yang sama. Untuk membuat layouting dari card tersebut, dapat menggunakan flexbox

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, untuk membuat suatu fitur pada web, kita butuh menyimpan list of data (atau kumpulan data), di dalam sebuah variable. Namun variable hanya bisa menyimpan satu data saja, bukan kumpulan data.

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan array, kita dapat menyimpan lebih dari satu data pada suatu variable

3. Penjelasan Detail Materi

• Cara membuat dan mengakses array pada javascript
• Cara memanipulasi array pada javascript, menggunakan :
  • array.filter() : memfilter element array berdasarkan kondisi tertentu
  • array.push() : memasukkan data baru ke array
  • array.map() : mengubah struktur element array
  • array.forEach() : melakukan looping untuk setiap element array
  • array.reduce() : menggabungkan element array menjadi satu
  • array.find() : menemukan item tertentu pada suatu array
  • array.indexOf() : mendapatkan index dari item yang diinginkan
  • array.includes() : memeriksa apakah suatu array berisi element tertentu (true or false)

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat website todolist. Data yang disimpan berupa array of string. Web tersebut dapat menampilkan list todo (menggunakan <ul /> atau <ol />), dan sebuah form untuk menambahkan data todolist tersebut (untuk menambahkan data pada array menggunakan array.push). Sedangkan untuk melakukan pencarian atau delete todo, bisa menggunakan array.filter

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada pembuatan website, terkadang kita ingin memberikan border pada suatu elemen untuk memperjelas batas antara elemen

2. Penjelasan Materi Sebagai Solusi

CSS dapat digunakan untuk memberikan border pada suatu elemen

3. Penjelasan Detail Materi

Dijelaskan beberapa property CSS untuk melakukan styling pada border, seperti :

• border style
• border width
• border color
• border radius

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web sederhana yang memiliki beberapa bagian, seperti header, content, dan footer. Kemudian masing - masing bagian diubah bordernya menggunakan CSS

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/css/border.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Setiap component pasti memiliki sebuah data yang nilainya dapat berubah dan harus selalu di tracking. Misalnya component search memiliki data value dari input searchnya, yang dapat berubah ketika user melakukan onchange pada input search tersebut, dan kita harus selalu mentracking nilai tersebut untuk digunakan pada pencarian

Ada dua solusi sementara yang dapat kita lakukan :

1. mengakses value dari input search secara langsung menggunakan DOM, namun hal ini akan membuat kita tidak konsisten, dimana goal dari penggunakan react adalah menghindari pengaksesan DOM secara langsung

2. membuat sebuah variable yang nilainya akan selalu diubah setiap kali user melakukan onchange pada input search tadi. Namun pada react, kita tidak dapat melakukannya, karena setelah nilai dari variable tadi berubah, tampilan dari component kita tidak akan di render ulang

2. Penjelasan Materi Sebagai Solusi

State merupakan variable khusus yang apabila nilainya berubah akan membuat tampilan dari component react kita akan ikut diubah atau di render ulang

3. Penjelasan Detail Materi

• Cara membuat state
• Cara menggunakan state
• Hubungan antara state dan component

4. Contoh Kasus

Menerapkan state pada react untuk mentracking nilai dari input search

export function Search(props) {
  const [query, setQuery] = React.useState("");

  function handleButtonClick() {
    alert(query);
  }

  function handleInputChange(event) {
    setQuery(event.target.value);
  }

  function handleClear() {
    setQuery("");
  }

  return (
    <div>
      <label>{props.label}</label>
      <input
        id="search-input"
        onChange={handleInputChange}
        type="text"
        placeholder={props.placeholder}
        value={query}
      />
      <button onClick={handleButtonClick}>{props.buttonLabel}</button>
      <button onClick={handleClear}>x</button>
    </div>
  );
}

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada pembuatan website, terkadang kita ingin sebuah elemen berdiri sejajar secara horizontal dengan elemen lain, agar layout dari sebuah website sesuai dengan desain yang diinginkan. Namun pada HTML, kita tidak bisa melakukannya, karena banyak elemen yang secara default akan ditampilkan secara vertical pada browser (misalnya paragraf dan heading)

2. Penjelasan Materi Sebagai Solusi

Untuk mengatur layout dari website, misalnya untuk membuat elemen sejajar secara horizontal, bisa menggunakan property display dari CSS

3. Penjelasan Detail Materi

• dijelaskan mengapa kita tidak bisa membuat heading dan paragraf sejajar
• dijelaskan beberapa jenis value dari property display, yaitu :
  • block
  • inline
  • inline block
  • flexbox (ini buat responsive, mungkin bisa dipecah jadi materi sendiri ?)

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang menampilkan judul, paragraf dan menu menggunakan list. Kemudian kita ingin membuat judul dan paragraf sejajar dengan list menu secara horizontal. Sehingga kita butuh merubah display dari list menu, dan container dari judul dan paragraf menjadi inline block.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/css/layouting.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada pembuatan website, terkadang kita butuh memberikan jarak antara elemen satu dengan elemen yang lain, atau memberikan jarak pada konten dari suatu elemen. Hal ini bertujuan agar tampilan website kita sesuai dengan layout yang didesain.

2. Penjelasan Materi Sebagai Solusi

Pada CSS, kita dapat mengatur jarak antara elemen menggunakan margin, sedangkan jarak pada konten dari suatu elemen menggunakan padding.

3. Penjelasan Detail Materi

• Dijelaskan perbedaan dari margin dan padding
• Dijelaskan beberapa property margin dan padding pada CSS, seperti :
  • margin (top, bottom, left, right)
  • padding (top, bottom, left, right)

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat sebuah halaman web yang memiliki judul dan paragraf.

Untuk contoh kasus margin, Dijelaskan cara untuk memberikan jarak antara judul dan paragraf.

Sedangkan untuk padding, paragraf yang tadi sudah ada diberi border, sehingga terlihat bahwa kontennya terlalu dekat dengan border. Sehingga dibutuhkan padding untuk memberikan jarak dari border tersebut.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/css/spacing.md

Untuk mempermudah pembaca dalam memahami perbedaan ordered dan unordered list, maka bisa diberikan screenshot dari hasil tampilan list nya

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/list.md

Karena relasi ini merupakan hal yang sering digunakan pada database relational, jadi sepertinya butuh ditambahkan tutorial relasi menggunakan sequalize

Pada tutorial menerima data dari body, sudah dijelaskan bagaimana cara menggunakan middleware express.json() untuk mengekstrak data body ke req.body. Namun belum dijelaskan bagaimana cara mengirim data body tersebut menggunakan postman

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/handle-data-body.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Kita dapat membuat web server menggunakan node.js, namun syntax yang dibutuhkan lumayan panjang, walaupun yang kita buat hanya web server sederhana dengan routing.

2. Penjelasan Materi Sebagai Solusi

Express merupakan framework node.js yang dapat mempercepat pembuatan web server. Hal tersebut dapat dilakukan karena express telah menyediakan beberapa library untuk melakukan pembuatan web server, salah satunya adalah routing.

3. Penjelasan Detail Materi

1. instalasi express

buat directory untuk menyimpan aplikasi kamu, dan membuatnya sebagai direktori kerja.

$ mkdir nama-aplikasi
$ cd nama-aplikasi

Gunakan perintah npm init untuk membuat file package.json untuk aplikasi kamu yang telah dibuat seperti diatas. Untuk informasi bagaimana cara kerja package.json lihat npm package.json.

$ npm init

Perintah ini menyarankan kamu beberapa hal, seperti nama aplikasi atau nama project yang akan kamu buat, nama version aplikasi/project.
Untuk sementara kamu bisa menekan ENTER terus-menerus untuk menerima secara default semuanya, dengan beberapa pengecualian seperti:

entry point: (index.js)

Ketika pesan ini muncul ketikan app.js atau apa saja yang kamu inginkan untuk menjadikan file utama.
Jika menginginkan index.js tekan saja ENTER untuk menerima saran nama file secara default.
Sekarang install Express didalam direktori nama-aplikasi dan menyimpannya didalam daftar dependencies. Contohnya:

$ npm install express --save

2. hello world express

Pada folder yang telah di install dan inisiasi express, buatlah file baru dengan nama app.js lalu isi dengan kode program dibawah

const express = require("express");

const app = express();

app.listen(3000, function() {
  console.log("Server berjalan diport 3000");
});

app.get("/", function(req, res) {
  res.end("Hello World");
});

lihat hasilnya disini

3. membuat beberapa rute menggunakan express

pada app.js tambahkan kode program sehingga mirip seperti dibawah

const express = require("express");

const app = express();

app.listen(3000, function() {
  console.log("Server berjalan diport 3000");
});

app.get("/", function(req, res) {
  res.end("Hello World");
});

app.get("/satu", function(req, res) {
  res.end("Hello World satu");
});

app.get("/dua", function(req, res) {
  res.end("Hello World dua");
});

lihat hasilnya pada route satu dan route dua

4. menampilkan variable non string sebagai response menggunakan express

variable non string yang digunakan pada contoh kode program dibawah menggunakan array

const express = require("express");

const app = express();
const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
];

app.listen(3000, function() {
  console.log("Server berjalan diport 3000");
});

app.get("/", function(req, res) {
  res.send(contacts);
});

lihat hasilnya disini

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat web server yang memiliki beberapa rute untuk melakukan manipulasi data pada suatu array. Rute - rute tersebut adalah :

/contact - menampilkan semua data contact
/contact/create - menambahkan data contact
/contact/edit - mengubah data contact pada index 0
/contact/delete - menghapus seluruh data contact pada index 0

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

const express = require('express')
const app = express()

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

// menampilkan semua kontak
app.get("/contact", function (req, res) {
  res.send(contacts)
})

// menambahkan kontak baru
app.get("/contact/create", function (req, res) {
  contacts.push({ name: "tono", phone: "085637263625" })
  res.send({ success: true })
})

// mengubah kontak pada index 0
app.get("/contact/edit", function (req, res) {
  if (contacts.length > 0) {
    contacts[0] = { name: "siti", phone: "085372638281" }
    res.send({ success: true })
  } else {
    res.send({ success: false })
  }
})

// menghapus kontak pada index 0
app.get("/contact/delete", function (req, res) {
  if (contacts.length > 0) {
    contacts.splice(0, 1)
    res.send({ success: true })
  } else {
    res.send({ success: false })
  }
})


app.listen(3000, function () {
  console.log("server running")
})

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/pengenalan-express-js.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Untuk mulai membangun sebuah backend, kita bisa mulai dengan belajar membuat http server dan menjalankannya pada port tertentu

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan node.js, kita bisa membuat server http menggunakan module http

3. Penjelasan Detail Materi

4. Contoh Kasus

Langkah - langkah untuk membuat http server menggunakan module http

• Mengimport http module
• Membuat http server menggunakan createServer()
• Menjalankan http server pada port tertentu menggunakan .listen(3000)
• Mengunjungi server melalui web browser
• Menambahkan fungsi untuk merespon request menggunakan function(req, res) { res.write(); res.end() }

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/node-js/http-server.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Untuk membuat website yang baik, tidak cukup dengan struktur dan tampilan yang bagus saja. Namun juga bisa memberikan interaksi kepada user. Misalnya dengan memunculkan pesan saat user mengunjungi website tersebut.

2. Penjelasan Materi Sebagai Solusi

Dengan html, kita dapat menentukan struktur web, dan dengan css, kita dapat menentukan styling dari web. Sedangkan untuk menambahkan interaksi pada web, kita bisa menggunakan javascript.

3. Penjelasan Detail Materi

• penjelasan javascript
• penjelasan "interaksi" apa saja yang bisa dilakukan oleh javascript
• cara menulis javascript menggunakan tag <script /> dan external

4. Contoh Kasus

Untuk contoh kasus diberikan langkah - langkah untuk membuat website sederhana. Kemudian akan dimunculkan pesan (menggunakan alert) saat user mengunjungi website tersebut

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/javascript/pengenalan-javascript.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Saat membuat fitur pada web, terkadang kita butuh menjalankan perintah saat sesuatu terjadi pada component kita. Misalnya saat button search ditekan

2. Penjelasan Materi Sebagai Solusi

Untuk menjalankan perintah saat sesuatu terjadi, kita bisa menggunakan event

3. Penjelasan Detail Materi

• Cara membuat event handler di react
  • inline
  • dipisah

4. Contoh Kasus

Menerapkan beberapa event handler pada component search :

• onclick pada tombol search
• onchange pada input

function Search(props) {
  function handleButtonClick() {
    alert("tombol diklik");
  }

  function handleInputChange(event) {
    console.log(event.target.value);
  }

  return (
    <div>
      <label>{props.label}</label>
      <input
        id="search-input"
        onChange={handleInputChange}
        type="text"
        placeholder={props.placeholder}
      />
      <button onClick={handleButtonClick}>{props.buttonLabel}</button>
    </div>
  );
}

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, sebuah web server harus dapat menerima file dari client. Misalnya apabila kita akan membuat sebuah web yang memiliki fitur upload seperti upload foto profile.

2. Penjelasan Materi Sebagai Solusi

Untuk mengirim sebuah file, client harus mengirimkan data melalui body dengan format form data. Kemudian server dapat memparsingnya menggunakan middleware multer

3. Penjelasan Detail Materi

• penjelasan form data
  • cara mengirim form data dari frontend javascript
  • cara parsing form data ke req.files menggunakan middleware multer

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat web server yang dapat mengupload file

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

const express = require('express')
const app = express()
const multer = require('multer')

// menentukan lokasi pengunggahan
const upload = multer({ dest: 'public/upload/' })

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

function validateIndex(req, res, next) {
  if (req.query.index !== undefined && contacts[req.query.index] === undefined) {
    res.send({ success: false })
  } else {
    next()
  }
}

app.use(validateIndex)
app.use(express.json())

app.get("/contact", function (req, res) {
  res.send(contacts)
})

app.post("/contact", function (req, res) {
  contacts.push({ name: req.body.name, phone: req.body.phone })
  res.send({ success: true })
})

app.put("/contact", function (req, res) {
  contacts[req.query.index] = { name: req.body.name, phone: req.body.phone }
  res.send({ success: true })
})

app.delete("/contact", function (req, res) {
  contacts.splice(req.query.index, 1)
  res.send({ success: true })
})

// menerapkan middleware multer hanya pada rute berikut
app.put("/contact/upload", upload.single('photo'), function (req, res) {
  // menyimpan lokasi penggungahan pada data contacts pada index yang diinginkan
  contacts[req.query.index].photo = req.file.path
  res.send({ success: true })
})

app.listen(3000, function () {
  console.log("server running")
})

Pada tutorial routing menggunakan express.js, perlu diberikan contoh pembuatan endpoint menggunakan app.use. Dimana app.use ini merupakan endpoint yang dapat diakses menggunakan method apapun

Tujuan dari pemberian contoh app.use ini agar pembaca lebih mudah memahami materi middleware, karena kebanyakan middleware akan dilewati menggunakan method apapun

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/routing.md

Pada tutorial node, perlu ditambahkan topik mengenai nodemon, dimana nodemon ini dapat merestart ulang node server secara otomatis apabila ada perubahan pada file yang dijalankan, sehingga kita tidak perlu lagi merestart node server secara manual.

Sehingga, perlu ditambahkan topik tentang nodemon setelah topik package.json

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Untuk membangun sebuah website, langkah pertama yang perlu dilakukan adalah menentukan strukturnya terlebih dahulu, misalnya bagian header, body, content, menu, footer, dll.

2. Penjelasan Materi Sebagai Solusi

Untuk mengatur struktur dari sebuah website, bisa menggunakan HTML

3. Penjelasan Detail Materi

Disini bisa ditunjukkan dan dijelaskan struktur dasar dari HTML, yaitu html, head, title, body

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat website sederhana yang menampilkan sebuah judul dan paragraf. Mulai dari membuat file html hingga cara membukanya di browser

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/pengenalan-html.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita tau bahwa untuk membuat aplikasi yang baik, kita harus memisah perintah ke dalam beberapa file. Namun, setelah kita melakukannya, akan ada banyak file yang terdapat pada project yang dibuat, sehingga kita akan bingung file mana yang harus kita jalankan. Terlebih apabila kita sudah lama tidak membuka project tersebut

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan NPM script, kita dapat membuat sebuah perintah terminal yang menjalankan file utama yang menjadi entry point.

3. Penjelasan Detail Materi

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat npm script untuk menjalankan file index.js menggunakan npm start

Belum ada tampilan hasil dari text formatting pada topik HTML, bisa ditambahkan screenshot untuk memberikan gambaran kepada pembaca

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/text-formatting.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada web server yang sudah dibuat sebelumnya, kita sudah dapat menginputkan index dan data yang akan dimanipulasi dari client. Namun server belum melakukan validasi apakah data yang dikirim client sudah lengkap atau belum.

Harusnya hal tersebut dapat dilakukan dengan memberikan kondisi (if) pada setiap rute. Namun hal ini akan membuat source code kita banyak, karena akan ada source code untuk melakukan validasi input di setiap rute.

2. Penjelasan Materi Sebagai Solusi

Middleware merupakan suatu fungsi yang dapat dijalankan sebelum request sampai ke rute tujuan (atau bisa disebut endpoint). Dimana fungsi tersebut bisa dimanfaatkan untuk melakukan apapun. Misalnya autentikasi, logging, atau pada kasus yang kita butuhkan adalah validasi input dari client. Selain itu, fungsi middleware dapat kita tulis sekali saja dan dapat diterapkan pada beberapa atau seluruh rute yang kita punya.

3. Penjelasan Detail Materi

• Cara membuat fungsi middleware pada express
• Cara menerapkan middleware pada express
  • application level middleware

   const express = requitre('express')
   const app = express()

   function validateInput(req, res, next) {
      // validation logic
      next()
   }

  // used as application level middleware
  app.use(validateInput)

  app.get("/", function (req, res) {
    res.send("hello world")
  })

  app.get("/", function (req, res) {
    res.send("hello world 2")
  })

• router level middleware

   const express = requitre('express')
   const app = express()

   function validateInput(req, res, next) {
      // validation logic
      next()
   }

  // used as router level middleware
  app.get("/", validateInput, function (req, res) {
    res.send("hello world")
  })

  app.get("/", function (req, res) {
    res.send("hello world 2")
  })

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

4. Contoh Kasus

Diberikan contoh untuk menerapkan middleware validasi data pada web server yang sudah dibuat sebelumnya.

const express = require('express')
const app = express()

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

function validateIndex(req, res, next) {
  if (req.query.index !== undefined && contacts[req.query.index] === undefined) {
    res.send({ success: false })
  } else {
    next()
  }
}

// menggunakan middleware validate index pada level aplikasi
app.use(validateIndex)

app.get("/contact", function (req, res) {
  res.send(contacts)
})

app.post("/contact", function (req, res) {
  contacts.push({ name: req.query.name, phone: req.query.phone })
  res.send({ success: true })
})

// middleware validate index bisa juga digunakan pada rute tertentu :
app.put("/contact", validateIndex, function (req, res) {
  contacts[req.query.index] = { name: req.query.name, phone: req.query.phone }
  res.send({ success: true })
})

// middleware validate index bisa juga digunakan pada rute tertentu :
app.delete("/contact", validateIndex, function (req, res) {
  contacts.splice(req.query.index, 1)
  res.send({ success: true })
})

app.listen(3000, function () {
  console.log("server running")
})

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/middleware.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada pembuatan website, biasanya kita butuh menampilkan data dalam bentuk tabel apabila data tersebut memiliki banyak property.

2. Penjelasan Materi Sebagai Solusi

Untuk membuat tabel pada html, bisa menggunakan kombinasi dari tag <table/>, <tr/>, dan <td/>

3. Penjelasan Detail Materi

Dijelaskan langkah - langkah untuk membuat tabel, baris, dan kolom menggunakan tag <table/>, <tr/>, dan <td/>

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang berisi tabel untuk menampilkan suatu data yang memiliki property. Misalnya untuk menampilkan daftar absensi kelas.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/table.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah bisa memberikan styling pada sebuah element menggunakan CSS, misalnya kita bisa membuat semua tag h1 menjadi berwarna merah. Masalahnya, semua tag h1 yang ada di halaman web kita akan menjadi merah, bagaimana apabila kita ingin ada beberapa h1 yang warnanya tetap hitam

2. Penjelasan Materi Sebagai Solusi

Untuk menerapkan styling pada element tertentu saja, kita bisa menggunakan selector.

3. Penjelasan Detail Materi

• penjelasan jenis selector pada css
• penjelasan class pada css

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat halaman web memiliki banyak element yang sejenis (misalnya h1 dan p). Element - element yang sejenis tersebut akan diterapkan styling yang berbeda - beda, bisa berdasarkan strukturnya atau berdasarkan class nya

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah bisa membuat web server yang dapat melakukan manipulasi data, dan menerima data dari body. Namun data tersebut hanya disimpan ke variable. Masalahnya, apabila server direstart, maka data yang disimpan pada variable tersebut akan hilang, karena variable disimpan pada memory sementara (RAM).

2. Penjelasan Materi Sebagai Solusi

Agar data yang disimpan permanen, dan tidak hilang saat server direstart, maka data tersebut harus disimpan ke dalam suatu file. File disini bisa berupa file text, atau pada kasus ini lebih cocok menggunakan database seperti MySQL.

3. Penjelasan Detail Materi

• cara install package mysql
• cara melakukan koneksi dari express ke mysql
• cara menjalankan query mysql pada express

4. Contoh Kasus

Diberikan langkah - langkah untuk melakukan CRUD ke database menggunakan express dan MySQL

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/node-mysql.md

Agar pembaca lebih memahami motivasi dibalik penggunaan framework express untuk membuat server, maka perlu dijelaskan perbandingan syntax dari express dan node http.

Misalnya pada saat :

• perbandingan pembuatan server
• perbandingan pembuatan routing
• perbandingan untuk menampilkan data selain string

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/pengenalan-express-js.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Dengan menggunakan HTML, kita bisa melakukan text formatting seperti menebalkan, memiringkan, menggaris bawahi, atau mencoret text. Namun bagaimana apabila kita ingin melakukan formatting yang lain seperti mengubah warna text, perataan text, font family, dll

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan CSS, kita bisa melakukan text formatting yang lebih lengkap daripada hanya menggunakan HTML

3. Penjelasan Detail Materi

Dijelaskan beberapa hal yang bisa dilakukan CSS untuk melakukan text formatting, yaitu :

• text size
• text color
• text align
• text decoration
• text transformation
• text indentation
• font family
• font weight
• dll

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang menampilkan judul dan paragraf. Kemudian dilakukan text formatting menggunakan CSS.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/css/text-formatting.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada web server yang sudah dibuat sebelumnya, kita sudah dapat menginputkan index dan data yang akan dimanipulasi dari client. Namun data tersebut dikirim melalui URL. Dimana bisa saja ada beberapa data yang tidak ingin dilihat oleh user lain, misalnya data nama dan nomor telepon. Sehingga tidak baik mengirimkan semua data melalui URL.

2. Penjelasan Materi Sebagai Solusi

Selain mengirim data melalui URL, client juga dapat mengirimkan data melalui body, artinya, data tersebut tidak akan terlihat pada URL, sehingga lebih aman.

3. Penjelasan Detail Materi

• penjelasan plain text
  • cara mengirim plain text dari frontend javascript
  • cara parsing plain text ke req.body menggunakan middleware express.json()
• penjelasan url encoded
  • cara mengirim url encoded dari frontend javascript menggunakan URLSearchParams
  • cara parsing url encoded ke req.body menggunakan express.urlencoded()

referensi :
https://dev.to/sidthesloth92/understanding-html-form-encoding-url-encoded-and-multipart-forms-3lpa
https://pastebin.com/DfgVxfFB

4. Contoh Kasus

Diberikan langkah - langkah untuk mengubah input dari URL ke Body pada web server yang sudah dibuat sebelumnya (pada materi middleware)

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

const express = require('express')
const app = express()

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

function validateIndex(req, res, next) {
  if (req.query.index !== undefined && contacts[req.query.index] === undefined) {
    res.send({ success: false })
  } else {
    next()
  }
}

app.use(validateIndex)
// terapkan middleware express.json ke semua rute
app.use(express.json())

app.get("/contact", function (req, res) {
  res.send(contacts)
})

app.post("/contact", function (req, res) {
  // setelah middleware express.json diterapkan, kita bisa mendapatkan data name dan phone dari req.body
  contacts.push({ name: req.body.name, phone: req.body.phone })
  res.send({ success: true })
})

app.put("/contact", function (req, res) {
  // setelah middleware express.json diterapkan, kita bisa mendapatkan data name dan phone dari req.body
  contacts[req.query.index] = { name: req.body.name, phone: req.body.phone }
  res.send({ success: true })
})

app.delete("/contact", function (req, res) {
  contacts.splice(req.query.index, 1)
  res.send({ success: true })
})

app.listen(3000, function () {
  console.log("server running")
})

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/handle-data-body.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, website membutuhkan form untuk menerima inputan dari user. Misalnya untuk login, register, atau untuk menambahkan data baru

2. Penjelasan Materi Sebagai Solusi

Untuk membuat form menggunakan HTML, bisa menggunakan tag <form /> dan <input />

3. Penjelasan Detail Materi

Dijelaskan langkah - langkah untuk membuat form input menggunakan HTML, yaitu :

1. membuat form menggunakan tag <form />
2. membuat beberapa input (bisa menggunakan input type yang berbeda)
3. membuat tombol submit dengan <input type="submit" />

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web yang berisi form untuk menginput data. Misalnya form pendaftaran mahasiswa.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/form.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah bisa membuat web server yang memiliki banyak rute yang dapat melakukan CRUD pada masing2 rute. Namun rute yang kita buat banyak, yaitu :

/contact - menampilkan semua data contact
/contact/create - menambahkan data contact
/contact/edit - mengubah data contact pada index 0
/contact/delete - menghapus seluruh data contact pada index 0

2. Penjelasan Materi Sebagai Solusi

Pada pembuatan http server, kita dapat membedakan rute tidak hanya berdasarkan url nya saja. Tapi juga bisa berdasarkan methodnya, sehingga pada contoh diatas, bisa jadi seperti berikut :

/contact method GET - menampilkan semua data contact
/contact method POST - menambahkan data contact
/contact method PUT - mengubah data contact pada index 0
/contact method DELETE - menghapus seluruh data contact pada index 0

3. Penjelasan Detail Materi

• macam macam http method dan manfaatnya
• cara membuat rute menggunakan method selain GET pada express

4. Contoh Kasus

Diberikan langkah - langkah untuk menambahkan http method pada web server yang sudah dibuat pada materi sebelumnya (pengenalan express)

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

const express = require('express')
const app = express()

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

// menampilkan semua kontak
app.get("/contact", function (req, res) {
  res.send(contacts)
})

// menambahkan kontak baru
app.post("/contact", function (req, res) {
  contacts.push({ name: "tono", phone: "085637263625" })
  res.send({ success: true })
})

// mengubah kontak pada index 0
app.put("/contact", function (req, res) {
  if (contacts.length > 0) {
    contacts[0] = { name: "siti", phone: "085372638281" }
    res.send({ success: true })
  } else {
    res.send({ success: false })
  }
})

// menghapus kontak pada index 0
app.delete("/contact", function (req, res) {
  if (contacts.length > 0) {
    contacts.splice(0, 1)
    res.send({ success: true })
  } else {
    res.send({ success: false })
  }
})

app.listen(3000, function () {
  console.log("server running")
})

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, untuk membuat suatu fitur pada web, kita butuh menyimpan data yang memiliki banyak property didalamnya. Misalnya kita ingin membuat web yang dapat menampilkan list kontak. Dimana satu data kontak ini sebenarnya memiliki dua property, yaitu name, dan phone.

2. Penjelasan Materi Sebagai Solusi

Untuk membuat data yang memiliki banyak property didalamnya, kita bisa menggunakan object

3. Penjelasan Detail Materi

• Perbedaan array dan object
• Cara membuat dan mengakses object

4. Contoh Kasus

Untuk contoh kasus, mirip dengan topik array, hanya saja data yang disimpan bukan berupa array of string, melainkan array of object.

Akan diberikan langkah - langkah untuk membuat website list kontak. Data yang disimpan berupa array of object, dan object tersebut memiliki property name dan phone. Web tersebut dapat menampilkan list kontak (menggunakan <ul /> atau <ol />), dan sebuah form untuk menambahkan data kontak (untuk menambahkan data pada array menggunakan array.push).

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Untuk membangun aplikasi yang baik, kita tidak boleh menulis perintah dalam satu file saja. Kita harus membagi perintah ke dalam beberapa file sesuai kebutuhan. Sehingga jumlah baris yang ada pada satu file tidak terlalu banyak dan mempermudah kita dalam memahami perintah tersebut.

2. Penjelasan Materi Sebagai Solusi

Node.js dapat mengeksport variabel dan fungsi pada suatu file menggunakan module.exports dan mengimport nya ke file lain menggunakan require().

3. Penjelasan Detail Materi

• Penjelasan module.exports untuk mengeksport variable atau fungsi ke file lain
• Penjelasan require untuk mengimport variable atau fungsi pada file lain

4. Contoh Kasus

Diberikan langkah - langkah untuk memindahkan variable contacts ke file lain.

• Membuat web server (dari contoh kasus routing)
• Membuat file contact.js
• Memindahkan variable contacts pada index.js ke contact.js
• Mengeksport variable contacts yang ada pada file contact.js
• Mengimport variable contacts yang ada pada file contact.js ke index.js

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/node-js/import-export.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah membuat component search, namun apabila kita lihat dari label dan placeholder yang digunakan, component search ini bertujuan untuk melakukan pencarian suatu product. Seharusnya component search ini dapat digunakan berkali - kali pada halaman yang berbeda. Sehingga text pada component tersebut harus diubah

2. Penjelasan Materi Sebagai Solusi

• Penjelasan props

3. Penjelasan Detail Materi

• Cara menggunakan props pada suatu component

4. Contoh Kasus

Diberikan langkah - langkah untuk menerapkan props label dan placeholder pada component search yang sudah dibuat

const Search = (props) => {
 return (
  <div>
    <label>
      {props.label}
      <input type="text" placeholder={props.placeholder} />
    </label>
    <button>Search</button>
  </div>
 )
}

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, sebuah website memiliki background warna yang berbeda. Hal ini berguna untuk memberikan perbedaan atau identitas dari website tersebut. Bagaimana cara untuk mengubah background pada website ?

2. Penjelasan Materi Sebagai Solusi

Untuk mengubah background pada suatu elemen yang ada di sebuah website, bisa menggunakan CSS

3. Penjelasan Detail Materi

Dijelaskan hal - hal yang dapat dilakukan CSS untuk mengubah background suatu elemen, seperti :

• background color
• background image
• background repeat
• background position

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web sederhana yang memiliki beberapa bagian, seperti header, content, dan footer. Kemudian masing - masing bagian diubah backgroundnya menggunakan CSS

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/css/background.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

• pada satu halaman website, terdiri dari berbagai fitur, dimana fitur - fitur pada satu halaman website tersebut akan dikembangkan dalam satu file javascript. Sehingga membuat script yang ditulis sangat banyak dan susah di maintain

• manipulasi DOM merupakan suatu proses yang membuat performa website menjadi slow, karena saat kita mengubah suatu element pada web, browser harus menghitung ulang layout, stylesheet, dan sebagainya
  https://stackoverflow.com/questions/6817093/but-whys-the-browser-dom-still-so-slow-after-10-years-of-effort

2. Penjelasan Materi Sebagai Solusi

• React merupakan library yang bersifat component based, dimana kita tidak menuliskan seluruh fitur yang ada pada satu halaman pada satu file. Satu file javascript nantinya akan berisi fitur pada satu component website, misalnya component button, search, list, dll

• React merupakan library yang menggunakan virtual dom. Virtual DOM akan mengcopy seluruh struktur DOM yang ada di browser, dan menyimpannya di memory. Apabila ada perubahan, maka yang diubah dulu adalah virtual DOM, baru kemudian dibandingkan dengan DOM yang asli untuk diubah pada bagian2 yang berbeda. Proses ini akan lebih cepat, karena virtual dom berada di memory, dan DOM yang diubah hanyalah bagian2 yang berbeda saja.

3. Penjelasan Detail Materi

• cara install dan menjalankan react
• penjelasan jsx
• cara membuat component react
• cara styling component react
• cara build react menjadi html

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat sebuah component search menggunakan react. Component ini memiliki input text dan sebuah tombol untuk melakukan pencarian

const Search = () => {
 return (
  <div>
    <label>
      Search product
      <input type="text" placeholder="enter product name" />
    </label>
    <button>Search</button>
  </div>
 )
}

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, saat membuat fitur program, kita memiliki beberapa perintah yang sama, yang selalu kita tulis berulang - ulang, sehingga baris kode yang kita miliki menjadi banyak. Bagaimana cara agar kita tidak menulis perintah yang sama tadi secara berulang - ulang ?

2. Penjelasan Materi Sebagai Solusi

Dengan fungsi, kita dapat mengumpulkan beberapa perintah yang selalu diulang - ulang tadi kedalam satu kelompok. Kemudian kita dapat memanggil fungsi tersebut berulang kali tanpa perlu menuliskan perintah - perintah tadi.

3. Penjelasan Detail Materi

• Penjelasan fungsi sederhana (tanpa parameter)
• Penjelasan fungsi dengan parameter
• Penjelasan fungsi yang mengembalikan nilai

4. Contoh Kasus

mirip seperti contoh kasus event, dimana ada beberapa div yang memiliki tombol dibawahnya. Apabila tombol ditekan, maka div diatasnya akan berubah warna. Bedanya, apabila di contoh kasus event script pengubahan background divnya ditulis di masing2 onclick button, pada contoh kasus fungsi, script untuk perubahan backgroundnya akan ditulis pada suatu fungsi, dan dipanggil pada masing - masing onclick button

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/javascript/fungsi.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah bisa membuat website yang dapat menampilkan text. Tapi bagaimana apabila kita ingin menampilkan media seperti image, audio, dan video ?

2. Penjelasan Materi Sebagai Solusi

Untuk menampilkan media pada HTML, kita bisa menggunakan tag <img />, <audio />, <video />

3. Penjelasan Detail Materi

Dijelaskan macam - macam tag media dan cara menggunakannya, yaitu :

1. Image (img)
2. Audio
3. Video

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat sebuah halaman web galeri yang berisi kumpulan gambar, musik, dan video.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/media.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Sebelumnya, kita sudah terbiasa dengan bahasa pemrograman javascript untuk membuat frontend dari suatu web. Namun, untuk membuat backend, kita membutuhkan bahasa pemrograman lain seperti golang, php, java, dll. Hal ini karena javascript hanya berjalan pada web browser saja, sehingga javascript tidak dapat dijalankan di server. Adakah cara agar javascript dapat berjalan di server ?

2. Penjelasan Materi Sebagai Solusi

Agar javascript dapat berjalan di server, maka server tersebut perlu diinstall node.js. Node.js bukan bahasa pemrograman baru, melainkan runtime environment atau suatu wadah dimana bahasa pemrograman dapat berjalan di dalamnya. Dalam kasus ini, node.js yang diinstall ke server membuat bahasa pemrograman javascript dapat berjalan di server.

3. Penjelasan Detail Materi

• langkah - langkah install node.js

4. Contoh Kasus

Membuat hello world pada node.js menggunakan console.log()

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/node-js/node-js.md

Tag div merupakan tag yang sangat berguna untuk proses styling atau proses manipulasi DOM mengguakan javascript, namun penjelasan ini kurang begitu dipahami oleh pemula, sehingga dibutuhkan cara penjelasan yang lebih bagus

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/grouping.md

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Terkadang, untuk membuat sebuah website, kita butuh membuat link menuju file html lain atau halaman web lain.

2. Penjelasan Materi Sebagai Solusi

Untuk membuat link, bisa menggunakan tag <a />

3. Penjelasan Detail Materi

Disini dijelaskan cara menggunakan tag <a />. Jangan lupa dijelaskan tentang attribute href

4. Contoh Kasus

Untuk contoh kasus, bisa diberikan langkah - langkah untuk membuat website yang memiliki banyak halaman, dimana halaman tersebut dapat diakses melalui menu navigasi.

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/html/link.md