Membuat sistem CRUD

Create Table

Hasil Struktur Tabel

INSERT data

Hasil Insert

Update data

Hasil Update

Delete data

Hasil delete

Kelompok 6

• Sofyan Gio Verdiansyah(25)
• Tata Rinjani(30)
• Samsanurya(20)
• Zahira(35)
• Tania Indhy(28)

Tugas membuat Tabel dan kolom DataBase serta mengisi datanya

Pertama kali saya membuat DataBase dan Table serta mengisi nilainya

Pertemuan kedua membuat database lagi

Mengisi Tabel

Variable pada JavaScript

`` Variable adalah sebuah tempat atau wadah yang memiliki nama yang digunakan untuk menyimpan nilai ``

Untuk memahami variable kita harus memahami 3 hal dulu, apa itu?

- deklarasi

- inisialisasi

- assignment

Deklarasi ini adalah sebuah tahap untuk mendaftarkan variable ke dalam lingkup yang sesuai

Inisialisasi sebuah proses pemesanan atau penyediaan memori untuk variable

Assignment yaitu menetapkan nilai yang spesifik ke dalam variable

contoh

let x; ini artinya mendeklarasikan sekaligus menginisialisasi

lalu jika kita menulis baris selanjutnya x = 20;

let X = 20;  ini artinya proses assignment, atau kita menugaskan angka 20 untuk disimpan kedalam variable x

deklarasi variable:

var <nama variable>

keyword-keyword variable

- var

- let

- const

nanti kita gunakan let aja karena memiliki kelebihan, kalo yang var itu sendiri sudah tidak di sarankan oleh JavaScript

 nama untuk variable sebenarnya bebas tapi ada bebrapa aturanya:

- tidak boleh pake spasi

- boleh mengandung angka tapi tidak boleh di awali oleh angka

- boleh juga memakai simbol

- atau kalian lebih baik menggunakan format camel case (contohSepertiIni)

ada beberapa kata yang tidak boleh digunakan yaitu:

keyword & reserved word ini adalah sebuah bagian dari syntax javascript

ada lumayan banyak kalian cari sendiri aja

kalian tidak perlu repot-repot menghafalkan semua kata-katanya nanti kalo tidak sengaja menulis katanya otomatis akan ada tanda merah-merah di kata tsb / error 

shordhand yaitu menyingkat kata-kata variable 

contohnya:

let nama;

let umur;

let lulus;

nama = "sofyan"

umur = 15;

lulus = true;

yang mulanya seperti ini menjadi:

let nama = "sofyan",

    umur = 31,

    lulus = true;

harus menggunakan koma lalu nama variablenya apa dan nilainya

didalam variable ada yang namanya : variable scope

nanti akan dibahas 

Boolean pada JavaScript

 // Boolean adalah

// `` Sebuah tipe data yang digunakan untuk mempresentasikan logika true atau false ``

// Boolean ini sudah ada bahkan sebelum JavaScript ini ada, Boolean juga hampir ada di semua bahasa pemrograman.

// Boolean pertama kali diciptakan oleh George Boole pada tahun 1954.

// Biasanya Boolean ini digunakan pada statement pengkondisian, untu menentukan aksi yang berbeda dan mengatur alur kendali program.

// Boolean memiliki dua buah nilai yaitu : true dan false

// contoh:

let A = 10;

document.writeln(A < 20) //hasilnya true

document.writeln("<br>")

// tidak hanya angka boolean juga dapat dihasilkan oleh perbandingan srting

document.writeln("Sofyan Verdi" == "sofyan verdi") // false karena besar kecil huruf tidak sama

document.writeln("<br>")

// nanti pada prakteknya untuk menghasilkan nilai boolean di source code kita, kita juga bisa menggunakan sebuah fungsi dari JavaScript yang namanya Boolean(nilai)

// nilai yang kita simpan tadi kita di masukkan kedalam kurung buka dan tutup, contoh:

document.writeln(Boolean(10 < 20)) // sama-sama true

document.writeln("<br>")

// Kita juga bisa dapat memasukkan satu nilai saja (integer)

// Boolean(10)

document.writeln(Boolean(10)) //true

document.writeln("<br>")

//  bahkan jika memasukkan string:

document.writeln(Boolean("Sofyan")) //true

document.writeln("<br>")

// tapi jika kita memasukkan angka 0

document.writeln(Boolean(0)) //false

document.writeln("<br>")

// lalu gimana jika angkanya minus?

document.writeln(Boolean(-1)) //true?

// ini karena nilai-nilai pada JavaScript itu sebenarnya menyimpan nilai true atau false didalamnya? ini disebut dengan nilai:

// truthy atau falsy, perbedaanya:

// true        false

// non-zero      0

// "string"     ""

// object      undifined

// arrays       null

// functions    NaN

document.writeln("<br>")

// pengertian undifined dan null

// undifined adalah sebuah tipe yang dihasilkan ketika kita mendeklarasikan sebuah variable tapi belom mengisikan nilainya contoh:

let x

document.writeln(x)

document.writeln("<br>")

// sedangkan null adalah nilai kosong yang bisa kita berikan pada sebuah variable, contoh:

let y = null;

document.writeln(y)

String pada JavaScript

 // `` Tipe data string dalam JavaScript digunakan untu merepresentasikan data tektual `` tektual/plain text

// untuk menuliskan string pada JavaScript yang perlu kita lakukan hanya membungkus data / nilai kita menggunakan tanda kutib

// ""

// ''

// kalian bisa menggunakan kutib dua atau satu doang, tapi inget harus konsisten!

// contoh penggunaannya adalah:

console.log("Sofyan")

console.log('verdi')

// nah gimana kalo kita suatu saat memerlukan kutib dua dan satu sekaligus? contoh:

// console.log('"Gerakan Pungut Sampah" pada hari jum'at')  nah maka akan error Uncaught SyntaxError: missing ) after argument list

// nah ini tidak bisa begitupun kutib satu diganti kutib dua pun, JS menganggap kutibnya berakhir di kata jum' dan JS tidak memahami apa arti kata at'

// Nah yang kita butuhkan adalah escape character

// ini berfungsi untuk menampilkan sebuah character yang di interpretasikan berbeda dalam sebuah bahasa pemrograman

// jadi yang perlu kita lakukan adalah memberi tanda

// \"

// atau

// \'

document.writeln('\"Gerakan Pungut Sampah\" pada hari jum\'at');

document.writeln("<br>")

// Escape Character:

// \0   karakter NULL

// \'   '

// \"   "

// \\   \

// \n   new line atau baris baru

// \t   tab\spasi

// \b   backspace

// uXXXX   unicode contoh:

document.writeln("\u00A9")

document.writeln("\u00AE")

document.writeln("\u00B1")

document.writeln("\u00B5")

document.writeln("\u2122")

document.writeln("<br>")

// Concatenation / konkatenasi (+)

// kita juga bisa membandingkan dua buah string dengan menggunakan operator ==

document.writeln("Sofyan Verdi" == "sofyan verdi") //akan mengecek 2 string itu berbeda atau tidak, hati-hati besar kecilnya juga akan di bandingkan

document.writeln("<br>")

//  .lenght ini bisa digunakan untuk menghitung panjang karakter huruf contoh:

document.writeln("Sofyan Verdiansyah".length) // 18

document.writeln("<br>")

// ini juga bisa digunakan untuk variable contoh:

let nama = "Sofyan Verdi"

document.writeln(nama.length) //jumlah karakter di variable nama adalah 12

// perlu di ingat .lenght ini juga menghitung spasi

Operator pada JavaScript

// `Operator dalam JavaScript adalah sebuah simbol yang digunakan untuk melakukan

operasi`

// OPERATOR

// - aritmatika (matematika) {+, -, *, /, %}

// - perbandingan

// - logika

// - string

// - kondisional

// - typeof

// operator-operator ini dapat kita bagi berdasarkan jumlah operandnya.

// operator aritmatika sampai string itu disebut dengan operator binary

// sedangkan operator kondisional itu disebut dengan operator ternary

// dan operator typeof itu disebut dengan operator unary

// BINARY = sebuah operator yang membutuhkan 2 operand

// misalnya: operand1 operator operand2 contoh: 1 + 1

// UNARY = cuma membutuhkan 1 operand

// misalnya: operator operand atau sebaliknya

// TERNARY = membutukan 3 operand

// Perlu di ingat urutan operator adalah = () * / + -

// contoh operator aritmatika:

document.writeln(3 + 3);

document.writeln("<br>")

document.writeln(1 + 2 * 3 - 4); //jika ingin 5 operasinya dari kiri maka harus di

tambahkan kurung untuk mendahulukannya

document.writeln("<br>")

document.writeln((1 + 2) * 3 - 4);

// kalian bisa main-main dengan operatornya tanpa saya menjelaskan satu-satu intinya

mirip di dunia nyata

// contoh modulo/sisa bagi

document.writeln("<br>")

document.writeln(10 % 5) // ini artinya 10-5 sampai menjadi 0 tapi kalau angkanya

berbeda maka pasti akan ada sisanya contoh:

document.writeln("<br>")

document.writeln(10 % 3)

// operator penugasan atau assigment operatornya adalah tanda =

let assigment = 10 //ini variable yang diberi nilai 10

document.writeln("<br>")

document.writeln(assigment) //maka ini nilainya sama yang kita taruh

di variable bernama assigment

// operator penugasan += dll

document.writeln("<br>")

document.writeln(assigment += 8) // maka ini artinya nilai dalam

variable di jumplahkan dengan nilai yang kita beri (8)

    // bisa coba-coba sendiri dengan simbol-simbol lainnya

// operator perbandingan / comparasi {== != === !== > < >= <=} ! adalah tidak satu type

// operator perbandingan ini akan menghasilkan nilai boolean (true/false) contoh:

document.writeln("<br>")

document.writeln(10 == 10) //true

document.writeln("<br>")

document.writeln(10 == 20) //false

document.writeln("<br>")

document.writeln(10 !== 20) // true karena ! adalah kebalikan (yang salah menjadi

benar dan sebaliknya)

document.writeln("<br>")

document.writeln(10 === '10') // sama dengan 3x artinya

membandingkan dengan tipenya sekaligus

document.writeln("<br>");

document.writeln("<br>")

// OPERATOR LOGIKA/logical!!!

// operatornya ada:

// && (AND)

// || (OR)

// ! (NOT)

// contoh

let logical = 14;

document.writeln(logical % 2 == 0) //true

document.writeln("<br>")

document.writeln(logical % 2 == 0 && logical < 10) //false karena nilai var logical

lebih besar dari 10 bukan kurang dari, operator AND jika salah satu ada yang false

maka hasilnya akan false

document.writeln("<br>")

document.writeln(logical % 2 == 0 || logical < 10) //true karena operator OR ini

kebalikannya dari operator AND, jika ada salah satu yang true maka hasilnya akan true

document.writeln("<br>")

document.writeln(!logical < 10) // true karena operator NOT ini membalikkan, yang

harusnya false jadi true misalnya

document.writeln("<br>");

document.writeln("<br>")

// OPERATOR STRING + (penggabung)

let oStringA = "indomie";

let oStringB = "ayam";

document.writeln(oStringA + oStringB) //nah kan itu jadi gabung ya, kalo ingin ada

spasinya maka:

document.writeln("<br>")

document.writeln(oStringA + " " + oStringB) //sekarang jadi ada spasinya

document.writeln("<br>")

    // nah gimana kalau angka di tamabah string dan sebaliknya?

document.writeln(15 + "15") //maka akan jadi 1515 bukan 30, kalo ada 2 pertambahan

angka maka akan di tambahkan dulu lalu digabungkan dengan string, dan dalam type string

document.writeln("<br>")

    // tapi kalo string dulu maka

document.writeln("10" + 10 + 10) // nah maka akan menjadi string semua jika didepannya

string duluan

document.writeln("<br>");

document.writeln("<br>")

// KONDISIONAL

// jenis operator ini adalah ternary (3 operand)

// digunakan untuk melakukan pengecekan dalam suatu kondisi dan menentukan

nilai yang dihasilkan ketika kodisinya bernilai true atau false

// cara nulisnya gini: (kondisi) ? benar : salah , contoh

if (i = 35 % 2 == 0) {

    document.writeln("genap")

} else {

    document.writeln("ganjil")

}

// ini akan dibahas nanti

document.writeln("<br>")

// TYPEOF

// digunakan untuk mengetahui tipe data apa dari nilai yang kita masukkan nanti

kedalamnyacaranya kita cukup menuliskan :

// typeof (operand) ini menggunakan operator unary

document.writeln(typeof(10)) //jelas ini number

document.writeln("<br>")

document.writeln(typeof(false)) //jelas ini boolean

Nilai dan tipe data pada JavaScript

 Value/Nilai

nilai-nilai terbentuk dari sekumpulan bit dan nilai tersebut memiliki perannya masing-masing, dan peran inilah yang nantinya kita sebut degan tipe data.

di dalam JavaScript ada 6 tipe data:

1.) number 

2.) string

3.) boolean

4.) object

5.) function

6.) undefined

Jadi ini adalah peran dari bit-bit yang ada di dalam komputer kita, untuk membuat atau menggunakan sebuah nilai kita hanya perlu memanggil namanya.

Misalnya:

-number

10

-1500

3.14

maka nanti komputer akan secara otomatis membuatkan sebuah nilai yang tipe datanya number.

-string

maka cukup aja menuliskan tulisannya (huruf) di dalam sebuah kutip, boleh kutip satu atau dua saya sarankan harus konsisten

"test"

'test'

Tipe Data selanjutnya akan dibahas nanti.

ANGKA 

angka pada JavaScript katanya:

`` number in JavaScript are double-precision floating point 64-bit format IEEE 754 value ``

artinya di dalam JavaScript tidak ada INTEGER/bilangan bulat yang ada hanya lah FLOATING POINT/bilangan pecahan.

dan ukuran angka yang dapat di tampung adalah 64-bit ini artinya kita dapat menampung angka sebanyak 2 pangkat 64 atau sebesar 18 x 10 pangkat 18 atau sebesar 18 x 1000 000 000 000 000 000 (18 x 1 miliar miliar) atau persisnya sebanyak 18446744073709551616

Tapi angka ini tidak bisa kita pakai semua kenapa? karena di dalam 64 bit tadi ada beberapa penanda yang nanti harus kita gunakan untuk menampung angka-angka tertentu.

ada beberapa angka yang dapat kita simpan di JavaScript:

- Angka tanpa desimal  (integer) = 10,1500,123456 (di belakang layar di proses menjadi angka desimal) tapi kalau lebih dari 15 digit angkanya maka akan di bulatkan menjadi angka yang berbeda.

- Angka dengan desimal (pecahan) = 3.14, 0.5. 100.00 (perlu di ingat koma dalam JavaScript adalah titik begitupun sebaliknya) maksimal kita hanya dapat menyimpan 17 digit di belakang koma.

- Eksponen =123e5 /= 12300000, 123e-5 /= 0.00123

- Bilangan negatif 

urutan penggunaan bit:

- satu bit digunakan penanda jika bilangannya negatif

- sebelas bit digunakan Eksponen

- dan sisanya 52 bit baru digunakan untuk angka sebenarnya termasuk titik koma.

JANGAN PERNAH MENGAWALI ANGKA DENGAN 0 !!!

Karena hasilnya kadang-kadang tidak sesuai dengan harapan kita.

Dan angka nol juga dianggap sebagai bilangan oktal!!! (bilangan basis 8 jadi angkanya di mulai dari 0-7)

SAMA JUGA DENGAN MENGAWALINYA DENGAN 0x

Karena akan di anggap sebagi hexadesimal (0xFF) (bilangan basis 16 jadi dimulai 0- huruf F, 0-9 lalu A-F)

Angka Spesial:

- Infinity 2/0 = Infinity

- -Infinity -2/0 = -Infinity

- NaN 0/0 = NaN (Not a Number)

Sejarah JavaScript

TTPIT _{.blogspot.com}

• Apa itu HTML?
• Tentang ku?

Semuanya berawal dari NCSA (National Center of Supercumputing Application) ini adalah fasilitas riset di university of illinois at urbana-champaign di AS, disana ada peneliti beserta mahasiswanya membuat sebuah browser yang namanya MOSAIC BROWSER-1992, itu adalah browser populer pertama berdasarkan spesifikasi www dari tim berners lee , tim ini adalah penemu dari banyak sekali teknologi internet.

Kenapa web browser MOSAIC populer? Karena MOSAIC ini dia mendukung Image Tag, jadi browser saat itu belom ada yang bisa menampilkan gambar secara inline yang bisa baru browser MOSAIC, jadi kalo mau nampilkan gambar biasanya di tampilkan di halaman yang berbeda.

Kenapa ngga ada browser yang manampilkan gambar seperti MOSAIC ini? Karena memang spesifikasi dari berners lee tidak memperbolehkan itu, jadi memang MOSAIC ini melanggar spesifikasi yang diberikan.

Setelah MOSAIC ini meraih popularitas akhirnya dua orang beserta peneliti yang membuatnya dan mahasiswanya tadi, lalu ia membuat perusahaan sendiri, perusahaan yang bernama Netscape Communicator/Mozila pada saat ini, dan mereka membuat kembali sebuah browser yang namanya Netscape Navigator, Netscape ini dibuat dengan fitur-fitur yang menarik dari MOSAIC dan tentu saja dengan lebih tidak memperdulikan lagi spesifikasi dari si bapak tim berners lee tadi, seperti menambakan text link,text formatting,scriptting,cookie,dll.

Setelah beberapa waktu si Netscape ini bermaksud untuk membuat browser ini tambah keren lagi, menambakan interaktivitas di dalamnya, oleh karena itu Netscape merekrut orang yang bernama Brendan Eich (sistem engginer) dia diminta membuat bahasa scriptting seperti java tapi untuk web browser.

Akhirnya dia membuat sebuah bahasa baru yang menggabungkan fitur-fitur dari bahasa Java+Schame+Self yang diberi nama dengan = Mocha , karena waktu mepet dengan harus di rilisnya Netscape Navigator versi 2 maka Mocha ini dibuat hanya dalam waktu 10 hari!!! jadi dalam 10 hari Brendan Eich ini berhasil membuat sebuah bahasa Mocha yang nantinya di implementasikan pada Netscape Navigator lalu Mocha ini akhirnya di ubah namanya menjadi = LiveScript , karena saat itu software-software yang ada di Netscape itu di depannya ada kata Livennya.

Habis itu Netscape Navigator menjadi browser yang keren saat itu, si perusahaannya sampai-sampai memiliki ambisi untuk mengalahkan Microsoft. Jadi untuk mencapai ambisinya itu Netscape + mengajak Sun microsystem (yang punya java pada saat itu) VS Microsoft, jadi si Sun ini punya ide gimana kalau misalkan kita masukkan java kedalam Netscape Navigator untuk menggantikan LiveScript tapi Netscape ngga mau karena sebetulnya LiveScript itu sudah lebih teroptimasi untuk sebuah website, jadi akhirnya diputuskan begini "udah ganti aja nama LiveScript itu menjadi JavaScript, supaya orang-orang itu mengira bahwa itu adalah java yang digunakan untuk web browser".

Setelah itu melihat Microsoft juga ngga mau mengalah, lalu mereka melakukan reverse engginering terhadap JavaScript (seperti dicontek) dan dibuat ulang untuk mereka sendiri dengan nama JScript . Dan Netscape panik, takut misalnya si JScript ini yang nantinya akan menjadi standar, lalu mereka mencoba menstandarkan JavaScript ini ke W3C tapi ternyata di tolak kemungkinan ditolak adalah karena di W3S ada tim berners lee, jadi Netscape ini cari-cari lagi ISO (Organisasi Standardisasi Internasional) lalu ketemu lah yang namanya ECMA INTERNASIONAL (European Computer Manufacturers Association) yang mau membuatkan standarnya dan pada tahun 1996 JavaScript pertama kali di standarkan, kenapa harus di standar kan? Supaya nantinya browser-browser lain itu bisa pake bahasa pemrogramman scriptting berdasarkan JavaScript. Pada saat di daftarkan namanya tidak boleh JavaScript karena lisnsinya masih dipegang oleh sun, sampai pada akhirnya diputuskan namanya adalah ECMAScript, lalu banyak orang-orang yang mengira JavaScript, JScript, ECMAScript adalah bahasa yang berbeda padahal sama. Seharusnya kita menyebutnya ECMAScript bukan JavaScript tapi berhubung terlanjur jadi di biarin.

Perkembangan ECMAScript/ES

---

• 1997, ES1

• 1998, ES2

• 1999, ES3 - Launch

• ...

• 2005, AJAX

• 2008, ES4 GAGAL (dibuat ulang dengan project bernama ES Harmony)

• 2009, ES5

  
  
• Default
• Strict

• 2015, ES6

• 2016, ES7

Cara membuat list di HTML

TTPIT _{.blogspot.com}

• Apa itu HTML?
• tag teks HTML
• Tentang ku?

Membuat List di HTML

List item di HTML di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list)

Ordered List

List berurut nomor: tag pembukanya adalah <ol> dan penutupnya </ol>, sedangkan untuk penanda list itemnya adalah <li> dan </li>
Contoh:

<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Saptu</li>
<li>Minggu</li>
</ol>

1. Senin
2. Selasa
3. Rabu
4. Kamis
5. Jum'at
6. Saptu
7. Minggu

Type-type dari Ordered list adalah:
<ol type="1"> - Default
<ol type="I">
<ol type="1">
<ol type="i">
<ol type="A">
<ol type="a">
Contoh:

<ol type="I";>
<li>Senin</li>
<li>Selasa</li>
</ol>
<ol type="i">
<li>Rabu</li>
<li>Kamis</li>
</ol>
<ol type="A">
<li>Jum'at</li>
<li>Saptu</li>
</ol>
<ol type="a">
<li>Minggu</li>
<li>Senin</li>
</ol>

1. Senin
2. Selasa

1. Rabu
2. Kamis

1. Jum'at
2. Saptu

1. Minggu
2. Senin

Unordered List

Untuk membuat list tidak terurut nomor / huruf / simbol.
tag <ul> </ul> dan setiap list itemnya masih menggunakan tag yang sama.
Contoh:

<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Saptu</li>
<li>Minggu</li>
</ul>

• Senin
• Selasa
• Rabu
• Kamis
• Jum'at
• Saptu
• Minggu

Adapun tipe-tipe untuk unordered list yaitu:
square,circle,disc - Default
Contoh:

<ul type="square">
<li>Senin</li>
<li>Selasa</li>
</ul>
<ul type="circle">
<li>Rabu</li>
<li>Kamis</li>
</ul>
<ul type="disc">
<li>Jum'at</li>
<li>Saptu</li>
<li>Minggu</li>
</ul>

• Senin
• Selasa

• Rabu
• Kamis

• Jum'at
• Saptu
• Minggu

Next akan bahas table >>>