Pemrograman Berbasis Web

Nama : Arif Saputra NIM : A11.2021.13480 Universitas Dian Nuswantoro Semarang

Materi Minggu 1

Senin, 04 Oktober 2021

• Kontrak Perkuliahan
• Perkembangan Terkini Aplikasi Web Based dan Profesi yang Relevan
• Arsitektur Web dan Web Server
• Pengenalan Git dan Repository

Materi Minggu 2

Senin, 11 Oktober 2021

• Pengantar HTML 5
• Struktur Dasar HTML 5
• Element Basic HTML 5
• Semantic Element HTML 5

URL: [https://arifsptra.github.io/Pem-Web2021/Minggu2/biodata.html]

Materi Minggu 3

Senin, 18 Oktober 2021

Pengelolaan File Multimedia pada Halaman HTML

• HTML Video
• HTML Audio
• HTML Plugin
• HTML Youtube

URL: [https://arifsptra.github.io/Pem-Web2021/Minggu3/biodata.html]

Materi Minggu 4

Senin, 25 Oktober 2021

Web Form HTML 5

• HTML Form
• HTML Form Atributes
• HTML Form Elements
• HTML Input Types
• HTML Input Atributes
• HTML Input Form Atributes

URL: [https://arifsptra.github.io/Pem-Web2021/Minggu4/lat-form-ppdb.html]

Materi Minggu 5

Senin, 1 November 2021

Praktikum Semantik Element

• layout.html
• summary.html
• time.html
• audio.html
• audio2.html
• video.html
• videogif.html
• videosubtitle.html
• videoyoutube.html

Materi Minggu 6

Senin, 1 November 2021

• Link Desain Website Menggunakan Figma
  URL: [https://www.figma.com/file/YPpR6rR8wV7DUERrHtc7k1/kutani?node-id=0%3A1]
• Praktikum Membuat Website Statis
  URL: [https://arifsptra.github.io/Pem-Web2021/Minggu6/]

Minggu 7 - UTS (Ujian Tengah Semester)

Senin, 8 November 2021

Materi Minggu 8

Selasa, 23 November 2021

• Pengertian CSS (Cascading Style Sheets)
• Versi CSS
  • CSS 1 : adalah versi pertama (17 Desember 1996)
  • CSS 2 : adalah versi ke-2 (Mei 1998)
  • CSS 2.1 : (7 juni 2011)
  • CSS 3 : (2012)
  • CSS 4 : masih dalam pengembangan.
• Struktur Kode atau Syntax CSS
  • Selektor
    • Selector Tag
    • Selektor Class
    • Selektor ID
    • Selektor Atribut
    • Selektor Universal
  • Blok Deklarasi
  • Properti dan Nilai
• Cara Penulisan CSS
  • Internal
  • External
  • Inline

Materi Minggu 9

Senin, 29 November 2021

• Border Radius
• Gradient
  • Linear Gradient
  • Radial Gradient
• Shadow
  • Box Shadow
  • Text Shadow
• Transform
  • Translate
  • scale
  • skewX
  • skewY
  • rotate
  • matrix
• Transition
  • Transition Delay
  • Transition Duration
  • Transition Property
  • Transition Timing Function
• Animasi
• CSS Preprocessor
  • SASS
  • LESS
  • Stylus
• Fitur CSS Preprocessor
  • Variabel
  • Nesting
  • Mixins
  • Extends
  • Color Operations
  • If/else statement
  • Loops
  • Math
  • Imports

Materi Minggu 10

Rabu, 8 Desember 2021

• Pengertian Javascript
• Sejarah Javascript
• Versi ECMAScript
  • ES 1 : Juni 1997
  • ES 2 : Juni 1998
  • ES 3 : Desember 1999
  • ES 4 : Terbengkalai
  • ES 5 : Desember 2009
  • ES 5.1 : Juni 2011
  • ES 6 : Juni 2015
  • ES 7 : Juni 2016
  • ES 8 : Juni 2017
• Mengenal Console Javascript
• Penulisan Javascript kedalam HTML
  • Embed
  • Inline
  • Eksternal
• Variabel
• Tipe Data
  • String (teks)
  • Integer atau Number (bilangan bulat)
  • Float (bilangan Pecahan)
  • Boolean
  • Object
• Jendela Dialog
  • Alert()
  • Confirm()
  • Prompt()
• Operator Javascript
  • Aritmatika
  • Penugasan (Assignment)
  • Relasi atau perbandingan
  • Logika
  • Bitwise
  • Ternary

Materi Minggu 11

Senin, 13 Desember 2021

Percabangan Javascript

• if
• if else
• if else if
• switch case
• operator ternary
• nested

Perulangan Javascript

• counted loop : perulangan yang jelas
  • for
  • foreach
  • repeat
• uncounted loop : perulangan yang tidak jelas
  • while
  • do while

Struktur Data Array Javascript

• Membuat Array
• Mengambil Data Array
• Menampilkan Array
• Menambahkan Data Kedalam Array
• Menghapus Array
• Mengubah Data Array

Materi Minggu 12

Senin, 20 Desember 2021

Document Object Model (DOM) adalah dokumen (HTML) yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa dimanfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface). DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG.

Menulis sesuatu ke document HTML dapat menggunakan fungsi document.write()

Akses Element dengan DOM

• getElementById()
• getElementsByName()
• getElementsByClassName()
• getElementsByTagName()
• getElementsByTagNameNS()
• querySelector()
• querySelectorAll()

Membuat Element dengan DOM

• createElement()
• append()

Menghapus Element dengan DOM

• remove()

Fungsi Javascript Fungsi di dalam Javascript adalah sebuah objek. Karena memiliki properti dan juga method.

4 Cara Membuat Fungsi di Javascript

• Menggunakan deklarasi;
• Menggunakan ekspresi;
• Menggunakan arrow function/tanda panah (=>);
• Menggunakan Constructor.

Pemanggilan/Eksekusi Fungsi

• namaFungsi();

Objek Javascript Objek sebenarnya adalah sebuah variabel yang menyimpan nilai (properti) dan fungsi (method).

Perbedaan Properti dan Method

• Properti adalah ciri khas dari objek (variabel).
• Method adalah perilaku dari objek (fungsi). Method dapat dibuat dengan cara mengisi nilai (value) dengan sebuah fungsi.

Cara Mengakses Properti dan Method Objek dengan menggunakan tanda titik atau dot (.), dan diikuti dengan nama properti atau method.

Menggunakan Keyword this Kata kunci this digunakan untuk mengakses properti dan method dari dalam method (objek).

Materi Minggu 13

Senin, 27 Desember 2021

AJAX = Asynchronous Javascript And XML

Fungsi AJAX

• Mengambil data dari server secara background.
• Update tampilan web tanpa harus reload browser.
• Mengirim data ke server secara background. Cara Penggunaan AJAX
• Membuat Objek Ajax
  • var xhr = new XMLHttpRequest();
• Menentukan fungsi handle untuk event
  • xhr.onreadystatechange = function() { ... };
  • xhr.onload = function() { ... };
  • xhr.onerror = function() { ... };
  • xhr.onprogress = function() { ... };
• Menentukan method dan URL
  • xhr.open("GET", url, true);
• Mengirim request
  • xhr.send();

Kode State

Kode	State	Keterangan
0	UNSET	Object AJAX sudah dibuat tapi belum memanggil method open().
1	OPENED	Method open() sudah dipanggil.
2	HEADER_RECEIVED	Method send() sudah dipanggil, dan disini sudah tersedia header status.
3	LOADING	Sedang mendownload data.
4	DONE	Operasi AJAX selesai.

Kode Status HTTP Request

Kode	Keterangan
Lebih dari 200	Baik
Kurang dari 200	Buruk

AJAX Menggunakan JQuery

• load data ke elemen tertentu via AJAX
  • $(selector).load(URL,data,callback);
• Mengambil Data dari Server
  • $.get(URL,callback);
• Mengirim Data dari Server
  • $.post(URL,data,callback);

AJAX Menggunakan Fetch API

Perbedaanya dengan XMLHttpRequest dan JQuery adalah:

• Fetch akan mengembalikan sebuah promise;
• Secara bawaan (default), fetch tidak akan mengirim atau menerima cookie dari server.
• Fetch dapat digunakan di web browser. Sintak Dasar Menggunakan Fetch: fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(JSON.stringify(myJson)); });

AJAX Menggunakan AXIOS

Axios hampir sama seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser.

JSON (JavaScript Object Notation) adalah sebuah format data yang digunakan untuk pertukaran dan penyimpanan data.

JSON merupakan bagian (subset) dari Javascript.

Sejarah singkat JSON

JSON pertamakali dipopulerkan oleh Douglas Crockford, software engineer yang juga terlibat pengembangan bahasa pemrograman Javascript, sebelumnya arti kata “JSON” belum ada. Orang-orang hanya mengenal Objek Javascript yang dikirim melalui jaringan, sejak meledaknya teknologi AJAX pada tahun 2000. JSON mulai diperkenalkan dan pada tahun 2001, domain json.org mulai aktif dan hingga saat ini JSON banyak digunakan di mana-mana.

Penerapan JSON dalam pemrograman

• JSON biasanya digunakan sebagai format standar untuk bertukar data antar aplikasi.
• JSON sebagai format untuk bertukar data client dan server atau antar aplikasi. Contoh: RESTful API;
• JSON sebagai tempat menyimpan data, contoh: Database Mongodb;
• JSON digunakan untuk menyimpan konfigurasi project, contoh: file composer.json pada project PHP dan package.json pada Nodejs;
• JSON digunakan untuk menyimpan konfigurasi dan penyimpanan data pada Hugo;
• JSON digunakan untuk menyimpan konfigurasi project pada Nodejs;
• JSON digunakan untuk menyimpan data menifest;
• dan masih banyak lagi.

Struktur Dasar JSON

{ "name": "Arif Saputra", "kota": "pati", "nomor": 11, "sosialMedia": { "Instagram": "https://instagram", "Twitter": "https://twitter" } }

Cara Pembuatan JSON

Setiap bahasa pemrograman memiliki cara yang berbeda-beda untuk membuat dan memakai JSON. Pada Javascript, bisa menggunakan fungsi JSON.stringify() untuk membuat JSON dari objek Javascript