Masalah

Anggap, kita memiliki sebuah list (listPeople) yang menyimpan object people, dengan struktur class seperti di bawah ini

people.java
1
2
3
4
public class people{  
  public String name;
  public int age;
}

Lalu kita memiliki 2 object list, listMinor untuk menyimpan data people yang belum dewasa (age < 18), dan listAdult untuk menyimpan data people yang sudah dewasa (age >= 18).

1
2
3
List<People> listPeople = new ArrayList<People>();
List<People> listMinor = new ArrayList<People>();
List<People> listAdult = new ArrayList<People>();

Coba buat aplikasi untuk memfilter semua people yang ada di listPeople, dan pindahkan ke listMinor & listAdult sesuai dengan nilai age dari masing2 object tersebut.

Jawaban

Cara yang paling gampang, tapi cukup bertele2 adalah seperti ini:

1
2
3
4
for(People people : listPeople){
  if(people.age < 18) listMinor.add(people)
  else listAdult.add(people)
}

tapi kita bisa menggunakan ternary-operator

1
2
3
for(People people : listPeople){
  (people.age < 18 ? listMinor : listAdult).add(people)
}

Dengan menggunakan n, kita dapat melakukan upgrade/downgrade versi nodejs dengan mudah.

Untuk melihat daftar versi nodejs, ketikkan command berikut

1
n ls

Output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/usr/local/bin/node

    0.8.6
    0.8.7
    0.8.8
    0.8.9
    0.8.10
    0.8.11
    0.8.12
    0.8.13
    0.8.14
    0.8.15
  ο 0.8.16 
    0.8.17
    0.8.18
    0.8.19
    0.8.20
    0.8.21
    0.8.22
    0.8.23
    0.8.24
    0.8.25
    0.8.26
    0.9.0
    0.9.1
    0.9.2
    0.9.3
    0.9.4
    0.9.5
    0.9.6
    0.9.7
    0.9.8
    0.9.9
    0.9.10
    0.9.11
    0.9.12
    0.10.0
    0.10.1
    0.10.2
    0.10.3
    0.10.4
    0.10.5
    0.10.6
    0.10.7
    0.10.8
    0.10.9
    0.10.10
    0.10.11
    0.10.12
    0.10.13
    0.10.14
    0.10.15
    0.10.16
    0.10.17
    0.10.18
    0.10.19
    0.10.20
    0.10.21 
    0.11.0
    0.11.1
    0.11.2
    0.11.3
    0.11.4
    0.11.5
    0.11.6
    0.11.7
    0.11.8

Simbol ο, menandakan versi nodejs yang sedang saya gunakan. Saya ingin menggunakan versi 0.10.21, maka saya akan mengetikkan command

1
sudo n 0.10.21

Output

1
2
3
4
5
 install : 0.10.21
   mkdir : /usr/local/n/versions/0.10.21
   fetch : http://nodejs.org/dist/v0.10.21/node-v0.10.21-linux-x64.tar.gz
/usr/local/bin/node
   installed : v0.10.21

Jika ingin menginstall versi stable, kita bisa menggunakan command

1
sudo n stable

Apa itu npm?

npm adalah manajer paket NodeJS. Sesuai dengan namanya, Anda dapat menggunakannya untuk menginstal program node. npm akan mempermudah kita saat development dalam menentukan dan menghubungkan dependensi.

Install

Sebelum menginstall npm, terlebih dahulu kita mesti menginstall nodejs

Untuk menginstal npm, kita hanya cukup menjalankan command

1
curl http://npmjs.org/install.sh | sh

Update, jika command diatas muncul error

1
sh: 2: Syntax error: newline unexpected

Kita bisa menggunakan

1
curl -k https://npmjs.org/install.sh | sh

Apa itu n?

n adalah Node version management. Dengan menggunakan n, kita bisa melakukan:

  1. Install/upgrade nodejs ke versi berapapun
  2. Kita bisa pindah-pindah versi nodejs. dari versi lama ke yg baru, maupun sebaliknya.

Install

Untuk menginstall n, terlebih dahulu kita mesti sudah menginstall npm (jika anda belum menginstall npm, silahkan baca artikel ini).

Ketikkan perintah berikut, untuk menginstall n:

1
npm install -g n
Artikel ini saya translate dari sini. Tujuan saya translate artikel ini sebagai latihan saya dalam mempelajari bahasa inggris, disamping selain memahami isi materi artikel tersebut. Saya akui, saya belum memiliki izin dalam melakukan translate artikel tersebut :).

HTML sebenarnya memungkinkan kita memiliki lebih dari satu ukuran heading. Terdapat 6 ukurang heading, dimana <h1> adalah bos dan <h6> adalah lemah.

  1. <h1> – CEO
  2. <h2> – VP Fancy Towne
  3. <h3> – Direktur beberapa stuff
  4. <h4> – middle management
  5. <h5> – Asisten rendahan
  6. <h6> – Mendapatkan kopi untuk orang lain.

Dibawah ini kami akan meminta anda untuk menambahkan heading dengan berbagai ukuran. Jangan ragu untuk menulis apapun yang anda sukan untuk heading.

Latihan

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>

  <head>
      <title>
          Headings & Paragraphs
      </title>
      
  </head>
  <body>
        <h1>Ini Judul h1</h1>
      <p>ini paragraf1</p>
      <p>ini paragraf2</p>
  </body>
</html>
  1. Kode anda sekarang memiliki satu heading <h1> dan 2 paragraf.
  2. Tambahkan sebuah heading <h3> sebelum paragraf kedua.
  3. Tambahkan sebuah heading <h5> setelah paragraf ke dua, dan kemudian tambahkan paragraf ketiga setelah heading ini.

Jawaban

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>

  <head>
      <title>
          Headings & Paragraphs
      </title>
      
  </head>
  <body>
        <h1>Ini Judul h1</h1>
      <p>ini paragraf1</p>
      <h3>Ini judul h3</h3>
      <p>ini paragraf2</p>
      <h5>Ini judul h5</h5>
      <p>ini paragraf3</p>
  </body>
</html>
Artikel ini saya translate dari sini. Tujuan saya translate artikel ini sebagai latihan saya dalam mempelajari bahasa inggris, disamping selain memahami isi materi artikel tersebut. Saya akui, saya belum memiliki izin dalam melakukan translate artikel tersebut :).

Kami pasti membuat kemajuan yang baik! Kami telah belajar kapan dan mengapa kita menggunakan HTML. Kita juga telah belajar bagaimana untuk:

  1. Membentuk file HTML dengan tag
  2. Judul halaman web (di dalam <head>)
  3. Membuat paragraf (di dalam <body> dengan tag <p>)

Langkah selanjutnya adalah memberikan paragraf kita judul menggunakan tag judul (<head>). Mari mulai dengan tag <h1>, yang menandai sesuatu sebagai yang paling penting. (Semua orang tau font yang paling penting adalah yang paling besar!)

Latihan

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>

  <head>
      <title>
          Headings & Paragraphs
      </title>
      
  </head>
  <body>
      
      
      
      
  </body>
</html>
  1. Tanya diri sendiri: Apa judul halaman ini?
  2. Di bagian body, buat sebuah judul (heading). Untuk melakukan hal ini, buat sebuah tag <h1>
  3. Berikan konten anda sebuah judul. Ini bisa apapun
  4. Tutup elemen dengan tag penutup </h1>. (Judul anda sekarang harus antara <h1> dan </h1>)
  5. Dibawah judul, buat 2 paragraf menggunakan tag <p> dengan konten apapun yang anda suka.

Jawaban

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>

  <head>
      <title>
          Headings & Paragraphs
      </title>
      
  </head>
  <body>
      
      <h1>Ini judul</h1>
      <p>ini paragraf 1</p>
      <p>ini paragraf 2</p>
  </body>
</html>
Artikel ini saya translate dari sini. Tujuan saya translate artikel ini sebagai latihan saya dalam mempelajari bahasa inggris, disamping selain memahami isi materi artikel tersebut. Saya akui, saya belum memiliki izin dalam melakukan translate artikel tersebut :).

Kami telah menyiapkan banyak hal-hal dasar untuk file HTML untuk Anda. Hal ini sehingga anda tidak akan marah pada kami untuk terlalu banyak pengulangan, silahkan belajar dengan baik.

kita telah belajar tentang tag pembuka dan penutup. Ketika kita meletakkan konten diantara tag, seluruh bit disebut elemen.

1
element = <opening tag> + content + <closing tag>

Perhatikan kita memiliki tag <title> sekarang, tapi kita butuh tag <body>. Konten dalam <body> adalah apa yang akan terlihat pada halaman yang sebenarnya. <body> masuk kedalam tag html, tapi tidak didalam tag <head>, seperti ini:

1
2
3
4
<html>
    <head></head>
    <body></body>
</html>

Latihan

Anggap kita memiliki file HTML seperti di bawah ini

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
      <title>
          
      </title>
      
  </head>
</html>
  1. Antara tag <title>, berikan nama halaman anda. Ini dapat apapun.
  2. Dibawah tag </head> penutup, letakkan tag <body> pembuka dan penutup
  3. Didalam <body>, mari buat paragraf! masing-masing paragraf membutuhkan tag pembuka dan penutup: <p> dan </p>. Kita meletakkan konten di antara tag tersebut.
  4. Antara tag <body>, buat 2 paragraf dan tulis konten di masing paragraf. (Ini akan membutuhkan 2 pasang tag <p>)

Jawaban

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>

  <head>
      <title>
      Belajar Paragraf
      </title>
      
  </head>

  <body>
      <p>Paragraf 1</p>
      <p>Paragraf 2</p>
  </body>
  
  
  
</html>
Artikel ini saya translate dari sini. Tujuan saya translate artikel ini sebagai latihan saya dalam mempelajari bahasa inggris, disamping selain memahami isi materi artikel tersebut. Saya akui, saya belum memiliki izin dalam melakukan translate artikel tersebut :).

Segala sesuatu di file HTML kita akan pergi antara tag <html> pembuka dan </html> penutup.

selalu ada dua bagian di file ini: head dan body. Mari fokus pada head

  1. Ia memiliki tag pembuka dan penutup.
  2. head berisi informasi penting tentang halaman web, seperti judul-nya.
  3. judul adalah kata-kata yang kita lihat pada tab (sebagai contoh, judul dari halaman ini adalah “Introduction to HTML”)

Latihan

Anggap kita memiliki file HTML seperti di bawah ini

1
2
3
4
<!DOCTYPE html>
<html>

</html>
  1. Tambahkan sebuah tag <head> pembuka dan </head> penutup.
  2. Antara tag <head>, tambahkan didalamnya tag <title> pembuka dan </title> penutup.
  3. Diantara tag <title>, tulis judul dari halaman web anda: Saya lagi belajar HTML.

Jawaban

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
    <title>Saya lagi belajar HTML</title>
</head> 
  
  
</html>
Artikel ini saya translate dari sini. Tujuan saya translate artikel ini sebagai latihan saya dalam mempelajari bahasa inggris, disamping selain memahami isi materi artikel tersebut. Saya akui, saya belum memiliki izin dalam melakukan translate artikel tersebut :).

Untuk memperlajari lebih lanjut HTML, kita harus belajar bagaimana berbicara tentang HTML. Anda telah melihat kita banyak menggunakan <>.

  1. Hal-hal didalam <> disebut tags
  2. Tags hampir selalu datang dalam berpasangan: tag pembuka dan tag penutup.
  3. Contoh tag pembuka: <html>
  4. Contoh tag penutup: <html>

Anda dapat menganggap tag seperti tanda kurung: setiap kali anda membuka satu, anda harus menutupnya. Tag juga bersarang, sehingga anda harus menutup mereka dalam urutan yang benar: tag yang paling baru dibuka harus ditutup pertama kali, seperti pada contoh dibawah.

1
2
3
<first tag>
  <second tag>Some text!</second tag>
</first tag>

Latihan terakhir mengajarkan kita bagaimana untuk mengatur file HTML kita. Segala sesuatu yang kita lakukan sekarang akan pergi antara <html dan `.

Praktek membuat sempurna! sekali lagi.

Artikel ini saya translate dari sini. Tujuan saya translate artikel ini sebagai latihan saya dalam mempelajari bahasa inggris, disamping selain memahami isi materi artikel tersebut. Saya akui, saya belum memiliki izin dalam melakukan translate artikel tersebut :).

Setiap halaman web yang Anda lihat ditulis dalam bahasa yang disebut HTML. Anda dapat menganggap HTML sebagai kerangka yang memberikan setiap struktur halaman web.

HTML singkatan dari HiperText Markup Language. Hipertext berarti teks dengan link di dalamnya. Setiap kali anda mengklik kata yang membawa anda ke halaman web baru, Anda klik hipertext. Markup language adalah sebuah bahasa pemrograman yang digunakan untuk membuat teks melakukan lebih dari sekedar duduk di halaman: dia dapat mengubah teks menjadi gambar, link, tabel, daftar dan banyak lagi. HTML adalah markup language yang akan kita pelajari.

Apa yang membuat halaman web cantik? Itulah CSS – Cascading Style Sheets. Anggap saja seperti kulit dan makeup yang menutupi tulang HTML. Kita akan belajar HTML dulu, barulah kemudian tentang CSS dalam pelatihan selanjutnya.

Hal pertama yang harus kita lakukan adalah menyiapkan kerangka halaman.

  1. Selalu letakkan <!DOCTYPE html> pada baris pertama. Ini memberitahu browser bahasa apa yang dia baca (pada kasus ini, HTML)
  2. Selalu letakkan <html> pada baris selanjutnya. Ini awal dokumen HTML.
  3. Selalu letakkan </html> pada baris terakhir. Ini akhir dokumen HTML.

Contoh:

1
2
3
4
<!DOCTYPE html>
<html>

</html>