PWDPB

                    Pendahuluan

A. Latar Belakang

Pcmrograman Web dan Perangkat Bergerak adalah salah satu mata pclaJaran SMK program kcahlian bagi siSwa Kelas XI semester t dansemester 2. Pelajaran Ini tcrrnasuk pakct keahlian (C3) pada bidang keahlian Teknologi Informasi dan Komunikasi dengan program keahlian Teknik Komputer dan Informatika, Scrta tcrmasuk ke dalam kompetensi keahlian Rekayasa Perangkat Lunak (C3). Mata pclajaran ini diajarkan selama Satu tahun. yaitu pada kclas Xl. Jumlah jam tatap muka mata pelajaran keahlian Pemrograman Web dan Perangkat Bergerak memang tergolong banyak. mengingat mata pclajaran ini mcrupakan kompetcnsi pcnting yang membantu siSwa lebih memahami pcmrograman web dan perangkat bergerak di sekolah dan dunia kcrja nantinya.

B. Deskripsi

Buku ini merupakan bahan ajar yang membahas tentang mata pelajaran Pcmrograman Web dan Pcrangkat Bergerak Kclas XI dengan ruang lingkup pcmbahasan sebagai berikut.

 Mcnjelaskan konscp tcknologi aplikasi web

2. Mcnjelaskan format leks pada halaman web

3. MenJelaskan format label pada halaman web

4. Mcnjelaskan tampilan format multimedia pada halaman web

  Menjclaskan format kaitan pada halaman web

6. Mcnjclaskan format formulir pada halaman web

7. Mcnjelaskan style pada halaman web

S. Mcnjelaskan client side scripting dalam pcmrograman web

9. Mcnjelaskan client side scripting pada halaman web interaktif

10. Mcnjclaskan tcknologi aplikasi web server

 Menjclaskan pemrograman server side scripting

12. Mcnjclaskan struktur kendali program

13. Mcnjclaskan fungsi dalam program

14. Menjclaskan library standar dalam program

 MenFlaskan proscdur evaluasi aplikasi interaktifpada web

16. Menjelaskan orw•rasi file

17. Memelaskan analisis Fnanganan kesalahan pada program

APERSEPSI 

WWW berasal dari frasa kata world wide web, world berarti `Dunia' wide berarti `Besar' web berarti `Sebuah sistem yang digunakan untuk mengirimkan data maupun dokumen ke jaringan internet' 

Dengan menggunakan program ini, seluruh dokumen yg ada di internet menjadi tersusun lebih rapih sehingga lebih mudah di temukan oleh para pengguna jaringan internet 

A.Konsep teknologi aplikasi web    aplikasi web diterjemahkan        sebagai aplikasi yang di akses menggunakan web browser melalui jaringan internet atau intranet. Aplikasi web sebagai sebuah prangkat lunak komputer yang dikodekan dalam bahasa pemrograman yang mendukung perangkat lunak berbasis web, seperti HTML, JavaScript,CSS,Ruby,Python,PHP,Java,dan bahasa pemrograman lainnya 

1.Konsep WWW 

Wolrd Wide Web (WWW) dikembangkan menjadi pusat pengetahuan dan budaya manusia sebagai kolabolator lokasi di dunia Maya untuk berbagai ide dan semua aspek dari proyek umum melalui internet 

a.Sejarah awal 

Pada tahun 1980, Tim Beners-Lee mengajukan sebuah proyek yang berbasis kan konsep hypertext untuk memfasilitasi pembagian dan pembaruan informasi di antara para peneliti. Dengan bantuan dari Robert Cailliau, dia menciptakan sistem prototipe bernama Enquire. WWW benar - benar menjadi perhatian publik di dunia internet ketika di presentasikan ke publik untuk pertama kalinya pada tahun 1995. Program ini digunakan untuk mengganti FTP, yang telah lama digunakan sebagai traffic control jaringan internet. 

b. Fungsi WWW 

WWW sebagai kumpulan server web dari seluruh dunia memiliki kegunaan dalam menyediakan data dan informasi untuk di gunakan bersama.Melalui web, para pengguna internet (netter) dapat mengakses informasi-informasi yang tidak hanya berupa teks, tetapi juga berupa gambar, suara, video, dan animasi. Secara mendasar, dokumen infomasl tidak hanya terdiri atas teks, tetapi juga dapat berupa gambar, suara, bahkan klip video. Kaitan antardokumen tersebut biasa disebut dengan istilah hipcrmedia. Dokumen-dokumen informasi ini disimpan azu dibuat dengan format HTML (Hypertext Markup Language). Sebuah dokumcn informasi terdiri atas teks yang Saling terkait dengan lainnya, bahkan dengan dokumen lain.

2. Teknologi Aplikasi Web

Paradigma pemrograman. aspek distribusi, dan teknologi dapat digunakan sebagai dasar untuk teknologi aplikasi web. Hal tersebut menjadi Salah satu faktor yang menyebabkan perkcmbangan aplikasi dalam web sebagai hasil dari pendekatan atau perubahan yang sangat cepat dalam teknologi. Berdasarkan persepsi dari beberapa pengembang pcrangkat lunak dan pakar bidang rekayasa perangkat lunak (sofneare engineering professiona[). Meskipun cukup banyak dalam mengadopsi prinsip-prinsip rekayasa pcrangkat lunak, prosedur dalam pengembangan aplikasi web masih memiliki bcrbagai pendekatan, alat bantu. metode, teknik, dan panduan yang memenuhi persyaratan pembuatan sistem berbasis web. Pengembangan sistem berbasis web tcrsebut jelas berbeda dengan pengembangan pcrangkat lunak konvensional dan pengembangan sistem berbasis web Icbih banyak menghadapi tantangan.

3. Macam-macam browser

Browser atau browser merupakan perangkat lunak ( software ) yang memungkinkan pengguna untuk menjelajahi informasi dan menampilkan laman di internet. Saat ini, ada macam-macam browser yang digunakan pengguna internet di seluruh dunia.

Beberapa browser yang populer digunakan pengguna seperti Chrome, Safari, Mozilla Firefox, hingga Opera.

4. Konsep web server

Web server adalah sebuah software (perangkat lunak) yang memberikan layanan berupa data. Berfungsi untuk menerima permintaan HTTP atau HTTPS dari klien atau kita kenal dengan web browser (Chrome, Firefox). Selanjutnya ia akan mengirimkan respon atas permintaan tersebut kepada client dalam bentuk halaman web.

a. Fungsi web server

Fungsi web server adalah untuk menerima permintaan HTTP atau HTTPS dari komputer klien. Yang dimaksud sebagai klien di sini adalah browser, seperti Google Chrome dan Firefox. Selanjutnya, server akan mengirimkan respon atas permintaan tersebut kepada klien dalam wujud halaman website.

5. Macam-macam browser web server

Web server yang paling banyak digunakan biasanya memiliki kelebihan (fitur) jika dibandingkan web server lainnya. Web server yang paling banyak digunakan biasanya memiliki forum yang besar dan aktif sehingga adapt dimanfaatkan untuk berdiskusi

a. Web server berbayar

1) siteground 

Salah contoh web hosting berbayar yang memiliki kualitas terbaik adalah layanan web hosting yang bernama Siteground. Melalui Siteground, bisa mendapatkan banyak hal untuk membangun sebuah website yang lebih baik. Apa saja yang menjadi keunggulan dari layanan Siteground ini. 

2) BlueHost

Contoh web hosting berbayar selanjutnya adalah layanan yang memiliki kecepatan dengan tingkat keamanan terbaik. Layanan web hosting tersebut bernama BlueHost, dimana layanan BlueHost ini bisa menjadikan website sahabat arena menjadi suatu website yang terbaik. Karena, tingkat kualitas yang dimilikinya sudah tidak bisa diragukan lagi.

6. Macam-macam text editor

Penyunting teks atau editor teks adalah suatu jenis perangkat lunak komputer yang digunakan untuk menyunting teks biasa. Penyunting teks dibedakan dengan pengolah kata karena jenis perangkat lunak ini tidak mengatur format dokumen atau fitur-fitur lain yang biasa digunakan dalam penerbitan semeja.

1) Notepad 

Notepad++ memiliki keunggulan dapat membaca banyak bahasa pemrograman dan juga memiliki plugin sebagai fitur tambahan. Tampilan yang diberikan adalah tampilan dengan jendela tab, karena itu dengan tampilan tersebut, kita bisa membuka beberapa file dalam satu waktu. Selain itu, Notepad++ juga memiliki fitur susunan atas file yang sedang dikerjakan sehingga bisa memudahkan pengguna dalam mencari informasi dimana posisi file dalam pekerjaan yang sedang kita kerjakan.

2) Sublime text 

Keunggulan dari sublime text yang lainnya adalah cepat ketika sedang digunakan, meskipun perangkatmu memiliki resource kecil. Sama seperti Notepad++, Sublime Text juga memiliki fitur yang bisa membuat pengguna menambahkan plugin. Sehingga pengguna bisa menggunakan banyak plugin asalkan resourcenya cukup aja.

7. Tool pengembangan web

Tools atau peralatan yang dimaksud disini adalah perangkat lunak yang atau software digunakan dalam proses pengembangan website. Pemilihan tools yang tepat tentu memberi keuntungan bagi developer karena selain menghemat waktu dan tenaga tentu klien juga akan lebih puas karena proyek bisa beres lebih cepat. Tools yang sering digunakan 

a. Adobe Edge inspect 

b. Firebug

c. Lorem Ipsum

B. Format teks pada halaman web

HTML (Hypertext Markup Language) identik dengan bahasa standar yang dipakai pada halaman web. Halaman-halaman web bisa dibuat dengan menggunakan HTML. Sampai saat ini sudah dikenalkan HTML5 (HTML versi 5). Protokol yang digunakan dalam komunikasi antara web server dan browser adalah HTTP (Hypertext Transfer Protocol) sehingga browser dapat menerjemahkan bahasa HTML yang berupa kode-kode teks menjadi sesuatu yang bisa dilihat dan/atau dibaca oleh seorang pengguna browser.

1. Struktur dasar HTML

Setiap halaman HTML sudah pasti mempunyai struktur dasar yang terdiri dari: tag Doctype, tag html, tag head, dan tag body. Ini lah struktur dasar dari HTML.

2. Versi HTML

Seiring perkembangan dunia global, khususnya dunia IT, HTML juga ikut berpartisipasi memajukan dunia IT terutama dalam bidang Web App. Hal Iyang pelu dipahami adalah setiap terjadi perkembangan versi HTML, mau tidak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru.

a. HTML versi 1

HTML versi 1.0 (1989) memiliki kemampuan antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya ( wrapping).

b. HTML versi 2

HTML versi 2.0 adalah pionir dari web interaktif seperti yang Anda temukan saat ini. Dibandingkan dengan versi pertama, struktur HTML lebih tertata rapi dan mampu menampilkan form dokumen. Dengan adanya form tersebut, Anda bisa memasukkan alamat, nama, saran dan kritik pada suatu dokumen.

c. HTML versi 3

Jika dibandingkan dengan kedua versi HTML sebelumnya, HTML v3.0 tidak memiliki umur yang lama. Itu disebabkan karena ada versi terbaru dari versi 3, yaitu versi 3.2. Di versi 3.0, HTML sudah bisa dipergunakan untuk meletakkan tabel dan gambar. Fitur terbaru dari HTML 3.0 juga mampu untuk mendukung penggunaan rumus matematika pada dokumennya.

d. HTML versi 4

Dibandingkan versi sebelumnya, versi ini hadir dengan banyak perubahan dari v3.2. Beberapa diantaranya ada di tabel, link, image, text, meta, form dan imagemaps.

e. HTML versi 5

versi 5.0 dari HTML adalah versi paling canggih dan paling stabil dibandingkan versi sebelumnya. Pembaharuan ini baru diperkenalkan pada tahun 2009. Versi terbaru ini dikembangkan lagi pada tanggal 4 Maret 2010 oleh W3C dan IETF (Internet Engineering Task Force). IETF sendiri merupakan organisasi yang sudah menangani HTML sejak v2.0. HTML v5.0 dikenal juga dengan nama HTML 5. Versi HTML ini adalah menjadi dasar untuk pembuatan tampilan website dengan penggabungan HTML, CSS dan Javascript. Jika dibandingkan dengan versi 4 dan XHTML, HTML4 ini adalah best practice dari kedua versi tersebut.

3. HTML, Head, Title, dan Body

a. HTML 

HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

b. Head

Elemen <head> adalah elemen HTML yang berfungsi sebagai tempat untuk meletakkan metadata yaitu informasi-informasi halaman web yang tidak ditampilkan pada halaman tersebut. Elemen ini sangat penting dan menjadi salah satu syarat minimal dalam struktur global HTML yang ada di W3C.

c. Title 

Title Tag adalah elemen HTML yang digunakan untuk membuat judul halaman web. Title Tag digunakan oleh mesin pencari sebagai judul daftar pencarian, yang digarisbawahi dengan hyperlink biru. Title Tag dimaksudkan agar relevan dengan konten situs web, yang akan membantu peringkat mereka lebih tinggi di halaman hasil mesin pencari.

d. Body 

tag body adalah elemen yang mewakili isi dokumen HTML. segala sesuatu yang ada didalam elemen ini ditampilkan di halaman utama browser.<body> berisi semua dokumen HTML, seperti teks, hyperlink, gambar, tabel, list dan lain-lain.cara penulisan tag body, <body> sebagai tag pembuka dan </body> adalah tag penutup

4. Tag syntax dan option 

Pada dasarnya, HTML berisi kode-kode tertentu berbasis teks yang disebut "tag". Tag bisa diartikan sebagai tanda khusus yang telah didefinisikan untuk menunjukkan kepada browser mengenai hal yang harus ditampilkan kepada pengguna. Setiap tag memiliki arti dan fungsi tersendiri serta dituliskan saling berpasangan. Antara tag pembuka dan penutup biasanya dibedakan oleh tanda slash (garis miring) yang menunjukkan itu adalah tag penutup. Misalnya tag <b> dan </b>, ya akan menjadikan teks yang ada di antara tab tersebut akan ditampilkan. dalam format cetak tebal (bold).

5. Fungsi berbagai tag dalam HTML

Tag adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek di tampilkan berdasarkan Tag yang di gunakan, objek disini bisa berupa teks, video, audio dan gambar.

6. Format teks dalam HTML

Format teks dalam HTML digunakan untuk membuat teks yang ada dalam dokumen html menjadi kelihatan berbeda, menarik, memiliki arti serta dapat memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambang tertentu. Sesuai dengan peruntukannya, tag-tag tersebut dirancang untuk membuat struktur text (konten) dari halaman web Web browser akan menampilkan beberapa tag dengan tampilan visual, seperti huruf tebal, huruf kecil, italic, dan lain-lain. Namun, Anda sebaiknya tidak membuat text menjadi miring, namun menandai bagian text mana yang perlu'ditekankan'. 

BAB 2 : FORMAT TABEL DAN FORMAT MULTIMEDIA PADA HALAMAN WEB

A. Format Tabel pada Halaman Web

Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan Tag<Table>.

Secara mendasar, elemen TABLE memiliki atribut seperti align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antara sel), width (lebar tabel), dan height (tinggi tabel).

Elemen tbody digunakan untuk mengelompokkan konten atau isi yang terletak pada bagian tengah (tubuh) sebuah tabel.

Elemen thead digunakan untuk mengelompokkan isi atau konten yang berada di bagian atas (kepala) pada sebuah tabel.

Element tfoot digunakan untuk mengelompokkan isi atau konten yang berada di bagian bawah (kaki) sebuah tabel.

B. Format Multimedia dalam Halaman Web

umumnya, elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang paling umum untuk melihat format sebuah media adalah melihat ekstensi yang digunakan oleh file tersebut.

Penambahan gambar pada HTML dapat menggunakan elemen img. Elemen img merupakan elemen yang bersifat self-contained (tidak memiliki tag penutup). 

Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua metode, yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut.

Penggunaan suara atau audio ke dalam aplikasi multimedia dapat memberikan informasi yang tidak mungkin diberikan oleh media informasi, seperti gambar, grafik, ataupun teks.

Ada tiga jenis suara, yaitu ucapan (speech), musik, dan efek suara. Selain itu, suara juga terbagi dua jenis formatnya, yaitu MIDI dan WAVE.

Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format.