Translate page tutorial/bindings

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/01-text-inputs/text.md

@@ -1,15 +1,15 @@
 ---
-title: Text inputs
+title: Masukan teks
 ---
 
-As a general rule, data flow in Svelte is *top down* — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+Sebagai peraturan umum, alur data dalam Svelte adalah *atas bawah* - sebuah komponen induk dapat mengatur properti dari komponen anak, dan sebuah komponen bisa mengatur atribut dalam sebuah elemen, tapi tidak sebaliknya.
 
-Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we *could* add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
+Terkadang melanggar aturan itu baik. Ambil contoh kasus `<input>` elemen dalam komponen ini - kita *bisa* menambahkan `on:input` event *handler* yang mengatur nilai dari `name` ke `event.target.value`, tapi ini sedikit... *boilerplatey*(boilerplate => kode yang harus disertakan di banyak tempat dengan sedikit atau tanpa perubahan). Ini akan menjadi lebih buruk dengan bentuk elemen lainnya, seperti yang akan kita lihat.  
 
-Instead, we can use the `bind:value` directive:
+Sebagai gantinya, kita bisa menggunakan `bind:value` direktif:
 
 ```html
 <input bind:value={name}>
 ```
 
-This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
+Ini berarti tidak hanya akan merubah nilai dari `name` akan memperbarui nilai masukan, tapi perubahan ke nilai masukan juga akan memperbarui `name`.

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/02-numeric-inputs/text.md

@@ -1,12 +1,12 @@
 ---
-title: Numeric inputs
+title: Masukan angka
 ---
 
-In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
+Dalam DOM, segalanya adalah sebuah *string*. Itu tidak membantu saat kamu berurusan dengan masukan angka - `type="number"` dan `type="range"` - itu artinya kamu harus ingat untuk memaksa `input.value` sebelum menggunakannya.
 
-With `bind:value`, Svelte takes care of it for you:
+Dengan `bind:value`, Svelte akan mengurusnya untuk kamu:
 
 ```html
 <input type=number bind:value={a} min=0 max=10>
 <input type=range bind:value={a} min=0 max=10>
-```
+```

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md

@@ -1,9 +1,9 @@
 ---
-title: Checkbox inputs
+title: Masukan kotak centang
 ---
 
-Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
+Kotak centang digunakan untuk beralih antar status. Alih - alih melakukan *binding* ke `input.value`, kita melakukan binding ke `input.checked`:
 
 ```html
 <input type=checkbox bind:checked={yes}>
-```
+```

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/04-group-inputs/text.md

@@ -1,16 +1,16 @@
 ---
-title: Group inputs
+title: Masukan kelompok
 ---
 
-If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
+Jika kamu memiliki banyak masukan yang terkait dengan nilai yang sama, kamu bisa menggunakan `bind:group` bersama dengan atribut `value`. Masukan radio dalam kelompok yang sama saling berketerkaitan; masukan kotak centang dalam kelompok yang sama akan membentuk sebuah *array* dari nilai pilihan. 
 
-Add `bind:group` to each input:
+Tambahkan `bind:group` ke setiap masukan:
 
 ```html
 <input type=radio bind:group={scoops} value={1}>
 ```
 
-In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
+Dalam kasus ini, kita bisa membuat kodenya jadi lebih sederhana dengan memindahkan masukan kotak centang ke dalam sebuah blok `each`. Pertama, tambahkan sebuah *variable* `menu` ke dalam block `<script>`...
 
 ```js
 let menu = [
@@ -20,7 +20,7 @@ let menu = [
 ];
 ```
 
-...then replace the second section:
+...lalu ganti sesi ke dua:
 
 ```html
 <h2>Flavours</h2>
@@ -33,4 +33,4 @@ let menu = [
 {/each}
 ```
 
-It's now easy to expand our ice cream menu in new and exciting directions.
+Sekarang akan lebih mudah memperluas menu es krim dalam direksi yang baru dan seru.

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/05-textarea-inputs/text.md

@@ -1,17 +1,17 @@
 ---
-title: Textarea inputs
+title: Masukan area teks
 ---
 
-The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
+Elemen `<textarea>` berperilaku sama ke sebuah masukan teks dalam Svelte - gunakan `bind:value`:
 
 ```html
 <textarea bind:value={value}></textarea>
 ```
 
-In cases like these, where the names match, we can also use a shorthand form:
+Dalam kasus seperti ini, dimana nama yang cocok, kita juga bisa menggunakan bentuk steno(lambang huruf yang dipendekkan dan disepakati pemakaiannya):
 
 ```html
 <textarea bind:value></textarea>
 ```
 
-This applies to all bindings, not just textareas.
+Ini berlaku untuk semua *bindings*, tidak hanya area teks.

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/06-select-bindings/text.md

@@ -1,13 +1,13 @@
 ---
-title: Select bindings
+title: Binding pilihan
 ---
 
-We can also use `bind:value` with `<select>` elements. Update line 24:
+Kita juga bisa menggunakan `bind:value` dengan elemen `<select>`. Perbarui baris 24:
 
 ```html
 <select bind:value={selected} on:change="{() => answer = ''}">
 ```
 
-Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
+Catatan nilai `<option>` adalah sebuah objek daripada *strings*. Svelte tidak keberatan.
 
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> Karena kita belum mengatur nilai awal dari `selected`, *binding* akan mengaturnya ke nilai default (baris pertama dari daftar) secara otomatis. Berhati-hatilah - sampai *binding* dimulai, `selected` akan tetap *undefined*, jadi kita tidak bisa merefrensikan begitu saja contoh: `selected.id` dalam template. 

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md

@@ -1,10 +1,10 @@
 ---
-title: Select multiple
+title: Banyak pilihan
 ---
 
-A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
+Pilihan bisa memiliki atribut `multiple`, dalam kasus ini akan membentuk sebuah *array* daripada memilih satu nilai.
 
-Returning to our [earlier ice cream example](tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+Kembali ke [contoh es krim diawal](tutorial/group-inputs), kita bisa mengganti kotak centang dengan `<select multiple>`:
 
 ```html
 <h2>Flavours</h2>
@@ -16,4 +16,4 @@ Returning to our [earlier ice cream example](tutorial/group-inputs), we can repl
 		</option>
 	{/each}
 </select>
-```
+```

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md

@@ -1,12 +1,12 @@
 ---
-title: Contenteditable bindings
+title: Binding contenteditable 
 ---
 
-Elements with a `contenteditable="true"` attribute support `textContent` and `innerHTML` bindings:
+Elemen dengan atribut `contenteditable="true"` mendukung `textContent` and `innerHTML` *bindings*:
 
 ```html
 <div
 	contenteditable="true"
 	bind:innerHTML={html}
 ></div>
-```
+```

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/09-each-block-bindings/text.md

@@ -1,8 +1,8 @@
 ---
-title: Each block bindings
+title: Blok each binding
 ---
 
-You can even bind to properties inside an `each` block.
+Kamu bahkan bisa mem*bind* properti kedalam sebuah blok `each`.
 
 ```html
 <input
@@ -16,4 +16,4 @@ You can even bind to properties inside an `each` block.
 >
 ```
 
-> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
+> Catatan interaksi dengan elemen `<input>` akan mengubah *array*. Jika kamu lebih memilih bekerja dengan data yang *immutable*(kekal), kamu harus menghindari penggunaan *bindings* seperti tadi dan lebih baik gunakan event *handlers*.

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/10-media-elements/text.md

@@ -1,10 +1,10 @@
 ---
-title: Media elements
+title: Elemen media
 ---
 
-The `<audio>` and `<video>` elements have several properties that you can bind to. This example demonstrates a few of them.
+Element `<audio>` dan `<video>` memiliki beberapa properti yang bisa kamu *bind* juga. Contoh berikut mendemonstrasikan beberapa properti itu.
 
-On line 116, add `currentTime={time}`, `duration` and `paused` bindings:
+Pada baris 116, tambahkan *bindings* `currentTime={time}`, `duration` dan `paused`:
 
 ```html
 <video
@@ -18,26 +18,27 @@ On line 116, add `currentTime={time}`, `duration` and `paused` bindings:
 ></video>
 ```
 
-> `bind:duration` is equivalent to `bind:duration={duration}`
+> `bind:duration` itu sama dengan `bind:duration={duration}`
 
-Now, when you click on the video, it will update `time`, `duration` and `paused` as appropriate. This means we can use them to build custom controls.
+Sekarang, saat kamu melakukan klik pada video, itu akan memperbarui `time`, `duration` dan `pauseda` sewajarnya. Ini berarti kita bisa menggunakannya untuk membangun kontrol khusus.
 
-> Ordinarily on the web, you would track `currentTime` by listening for `timeupdate` events. But these events fire too infrequently, resulting in choppy UI. Svelte does better — it checks `currentTime` using `requestAnimationFrame`.
+> Pada web umunya, kamu akan melacak `currentTime` dengan cara me*listening* event `timeupdate`. Tapi event itu terlalu jarang terjadi, menghasilkan UI yang kurang halus. Svelte melaukannya lebih baik - dengan memeriksa `currentTime` menggunakan `requestAnimationFrame`.
 
 The complete set of bindings for `<audio>` and `<video>` is as follows — six *readonly* bindings...
+*Binding* lengkap untuk `<audio>` dan `<video>` adalah sebagai berikut - enam *binding readonly*(hanya bisa dibaca)...
 
-* `duration` (readonly) — the total duration of the video, in seconds
-* `buffered` (readonly) — an array of `{start, end}` objects
+* `duration` (readonly) — total durasi dari video, dalam detik
+* `buffered` (readonly) — sebuah *array* dari objek `{start, end}`
 * `seekable` (readonly) — ditto
 * `played` (readonly) — ditto
 * `seeking` (readonly) — boolean
 * `ended` (readonly) — boolean
 
-...and four *two-way* bindings:
+...dan empat *binding* *dua-arah*:
 
-* `currentTime` — the current point in the video, in seconds
-* `playbackRate` — how fast to play the video, where `1` is 'normal'
-* `paused` — this one should be self-explanatory
-* `volume` — a value between 0 and 1
+* `currentTime` — titik saat ini dalam video, dalam detik
+* `playbackRate` — seberapa cepat video dimainkan, dimana `1` adalah 'normal'
+* `paused` — yang satu ini harusnya kamu sendiri sudah tau
+* `volume` — volume antara 0 dan 1
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+Video memliliki *readonly* `videoWidth` dan `videoHeight` sebagai *bindings* tambahan.

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/11-dimensions/text.md

@@ -1,17 +1,17 @@
 ---
-title: Dimensions
+title: Ukuran
 ---
 
-Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
+Setiap blok-level elemen memiliki *binding* `clientWidth`, `clientHeight`, `offsetWidth` dan `offsetHeight`:
 
 ```html
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 ```
 
-These bindings are readonly — changing the values of `w` and `h` won't have any effect.
+*Binding* tersebut bersifat *readonly*(hanya bisa dibaca) - mengubah nilai dari `w` dan `h` tidak akan memberi pengaruh apapun.
 
-> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
+> Elemen diukur dengan tehnik yang sama dengan [yang satu ini](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/).Ada beberapa overhead yang terlibat, jadi tidak disarankan untuk menggunakan ini untuk elemen dalam jumlah besar. 
 >
-> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
+> elemen `display: inline` tidak bisa diukur dengan pendekatan ini; atau juga dengan elemen yang tidak bisa mengandung elemen lain (seperti `<canvas>`). Dalam kasus ini kamu harus mengukur pembungkus elemen tersebut.

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/12-bind-this/text.md

@@ -2,7 +2,7 @@
 title: This
 ---
 
-The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
+*Binding* `this` bersifat *readonly* berlaku untuk setiap elemen (dan komponen) dan memungkinkanmu mendapatkan refrensi ke elemen yang dirender. Contohnya, kita bisa mendapatkan refrensi ke elemen `<canvas>`:
 
 ```html
 <canvas
@@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows
 ></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorial/onmount).
+Catatan, nilai dari `canvas` akan `undefined` sampai komponennya dipasang, jadi kita menaruh logikanya didalam [fungsi *lifecycle*](tutorial/onmount) `onMount`.

repositories/sveltejs/svelte/site/content/tutorial/06-bindings/13-component-bindings/text.md

@@ -1,13 +1,13 @@
 ---
-title: Component bindings
+title: Binding komponen
 ---
 
-Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+Seperti kamu bisa *bind* ke properti dari elemen DOM, kamu juga bisa *bind* ke properti komponen. Contohnya, kita bisa *bind* ke properti `value` dari komponen `<Keypad>` seperti halnya itu berbentuk elemen:
 
 ```html
 <Keypad bind:value={pin} on:submit={handleSubmit}/>
 ```
 
-Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
+Sekarang, saat pengguna berinteraksi dengan keypad, nilai dari `pin` dalam komponen induk akan langsung diperbarui.
 
-> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
+> Hematnya penggunaan komponen *binding*. Karena akan jadi sulit untuk melacak alur dari data dalam aplikasimu jika kamu memilikinya terlalu banyak, terutama jika tidak ada 'satu sumber kebenaran'.