Pwdb bab 1 dan 2

Pemerograman web dan perangkat bergerak 

Pendahuluan 

A. Latar belakang

Pemerograman web dan perangkat bergerak adalah salah satu mata pelajaran SMK program keahlian bagi siswa kelas XI semester 1 dan semester 2. Pelajaran ini termasuk paket keahlian (C3) pada bidang keahlian Teknologi Informasi dan Komunikasi dengan program keahlian Teknik Komputer dan Informatika, serta termasuk ke dalam kompetensi keahlian Rekayasa Perangkat Lunak (C3). Mata pelajaran ini diajarkan selama satu tahun, yaitu pada kelas XI

B.Tujuan pembelajaran

1. Memahami berbagai teknologi pengembangan aplikasi web

2. Memahami membuat kode html untuk menampilkan tabel pada halaman web

3. Memahami membuat kode untuk menampilkan tampilan format multimedia

4.  Memahami membuat kode html untuk menampilkan style tertentu pada halaman web

5. Memahami presentasi client side scripting dalam program web

Bab 1 konsep teknologi dan format teks pada aplikasi web

Kompetensi inti

Memahami nerapkan, menganalisis, dan tentang pengetahuan faktual, konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja rekayasa perangkat lunak pada tingkat teknis.

Apersepsi

Pada dasarnya, WWW berasal dari frasa kata word wide web jika di penggal dan diartikan satau per satu World memiliki arti 'dunia', Wide memiliki arti 'berukuran besar/raksasa', dan Web memiliki arti sebuah sistem yang digunakan untuk mengirimkan data maupun dokumen ke jaringan internet", Dengan menggunakan program ini, seluruh dokumen yang ada di internet menjadi tersusun lebih rapi sehingga lebih mudah ditemukan oleh para pengguna jaringan internet.

1. Konsep WWW

World Wide Web (WWW) dikembangkan menjadi pusat pengetahuan dan budaya manusia sebagai kolaborator lokasi di dunia maya untuk berbagi ide dan semua aspek dari proyek umum melalui internet. Di masa Singkatan www di awal nama alamat website tersebut sebagai langkah awal memasuki sebuah website. WWW (World Wide Web) pada umumnya dikenal sebagai web, yakni sistem dokumen hypertext yang bisa diakses melalui internet.

a. Sejarah Awal 

Pada tahun 1980, Tim Berners-Lee (ketika masih seorang kontraktor bebas di CERN) mengajukan sebuah proyek yang berbasiskan konsep hiperteks (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 dipresentasikan ke publik untuk pertama kalinya pada tahun 1995.

b. Fungsi WWW

Fungsi WWW adalah sebuah informasi global yang menghubungkan pengguna jaringan internet atau lebih dikenal dengan sebutan user ke server serta user lain untuk menyajikan data-data, dokumen, serta berbagai macam informasi yang dapat digunakan bersama dengan menggunakan bahasa HTML.

2. Teknologi aplikasi web

Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan pakar bidang rekayasa perangkat lunak (software engineering professional), pengembangan aplikasi web tidaklah sama dengan rekayasa software walaupun keduanya melibatkan pemrograman dan pengembangan perangkat lunak. Pengembangan teknologi aplikasi web identik dengan gabungan dari print publishing dan pengembangan perangkat lunak, di antaranya marketing dan perhitungan jika dilihat dari sudut pandang seni dan teknologi.

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 DALAM HALAMAN WEB

Apersepsi

HTML menyediakan banyak tag lain untuk merancang tabel yang lebih rumit. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan Anda membuatnya. Oleh sebab itu, mempelajari tag HTML yang sering digunakan dalam pembuatan halaman web menjadi suatu keharusan bagi seorang web programmer. Sebelum standar CSS diimplementasikan ke dalam semua browser pada sekitar tahun 2000-an, kebanyakan programmer dan desainer web menggunakan tabel untuk mengatur tampilan web.

A. Format tabel pada halaman web

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan Tag <Table>. 

Elemen tabel berisi properti <tr> untuk menentukan baris ( table row ) yang didalamnya terdapat properti <td> untuk menampilkan data pada setiap sel table (tabel data).

Struktur elemen tabel adalah

<table>

 <tr>

 <td>data baris 1 kolom 1</td>

 <td>data baris 1 kolom 2</td>

</tr></table> 

1. Tag-tag tabel dalam HTML

Tag <table> untuk membungkus tabelnya. Tag <thead> untuk membungkus bagian kepala tabel. Tag <tbody> untuk membungkus bagian body dari tabel. Tag <tr> (tabel row) untuk membuat baris

2. Elemen table Tbody, Tfoot, Tr, Th, dan td

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 table berisikan elemen caption, TH, TR, dan TD. Elemen jenis ini berfungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Baris-baris yang ada pada tabel dapat dibagi menjadi tabel thead, tabel tfoot, dan tabel tbody yang dinyatakan dengan elemen thead, tfoot, dan tbody.

a. Elemen Tbody

Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel.

b. Elemen Thead 

thead menunjukkan sebuah table head atau bagian kepala sebuah tabel (table element). HTML <thead> element digunakan untuk mengelompokkan konten yang terletak di kepala (atas) sebuah tabel. Di dalam element <thead> tersebut, harus ditulis element <tr> yang menunjukkan table row atau baris sebuah table.

c. Elemen Tfoot

tfoot menunjukkan sebuah table foot atau bagian kaki (bawah) sebuah tabel (table element). HTML <tfoot> element digunakan untuk mengelompokkan konten yang terletak di kaki (bawah) sebuah tabel. Di dalam element <tfoot> tersebut, harus ditulis element <tr> yang menunjukkan table row atau baris sebuah table.

3. Cellpadding 

Cellpadding adalah istilah yang digunakan dalam bahasa komputer HTML yang merupakan singkatan dari Hypertext Markup Language. Ketika digunakan bersama dengan elemen tabel, itu menentukan jumlah ruang antara perbatasan sel tabel dan isinya.

4. Cellspancing

cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar. Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellspacing=”2″, maka web browser akan menampilkan jarak sebesar 2 pixel diantara garis border tabel

5. Border 

Atribut border digunakan untuk membuat bingkai pada tabel dengan menentukan tebal bingkai tersebut. Berikut ini bentuk kode penulisan dan penggunaan atribut border di HTML.

B. Format multimedia pada halaman web

Suatu standar teknologi web saat ini sudah tersusun meskipun penerapannya belum didukung oleh seluruh pengembang web. Standar ini disusun oleh suatu badan, yaitu World Wide Web Consortium (W3C). Standar ini dibutuhkan karena makin banyaknya variasi dalam teknologi web sehingga terkadang satu sama lain tidak kompatibel.

1. Konsep tampilan multimedia dalam HTML

Pada media digital dapat ditambahkan suara dan video ke dalam teks untuk menambahkan informasi kepada pengguna. HTML sendiri menyediakan fitur untuk memberikan gambar, suara, maupun video untuk digunakan dalam dunia web. Pada 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. Ketika browser menemukan file berekstensi ".htm/.html", browser akan berasumsi bahwa file tersebut merupakan halaman HTML. Ektensi ".xml" diindikasikan sebagai file XML dan ekstensi ".css" diindikasikan sebagai file style sheet, sedangkan ekstensi untuk format gambar yang diakui seperti .jpg, gif, dan lain-lain. Selain itu, elemen multimedia juga memiliki format file-nya sendiri yang memiliki ekstensi yang berbeda-beda seperti .swf, .wmv, .mp3, dan .mp4.

2. Tag menampilkan gambar 

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. Layaknya elemen-elemen lain pada HTML, juga dapat mengubah tampilan elemen img dengan menggunakan CSS.

3. Tag untuk audio

HTML memiliki fitur untuk menambahkan pemutar suara (audio) pada dokumen web. Elemen audio digunakan untuk tujuan tersebut sama seperti menggunakan elemen img dengan memberikan nilai tempat menyimpan file audio melalui atribut src. Hal yang perlu diketahui adalah elemen audio memiliki tag penutup dan hal tersebut berbeda dengan img.

4.Tag menampilkan video

Penambahan video pada dokumen HTML dilakukan dengan elemen video yang sangat mirip dengan elemen audio. 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. Video seperti layaknya animasi, namun video lebih cenderung pada hasil karya dari adegan dunia nyata yang direkam secara langsung.

BAB 3 FORMAT KAITAN DAN FORMAT FORMULIR PADA HALAMAN WEB 

A. Format kaitan pada halaman web

Ada beberapa cara (format) untuk menampilkan pranala pada halaman web. Jika pengunjung website sedang mengeklik suatu kata atau gambar yang mengandung hyperlink, ia akan diarahkan untuk menuju ke alamat URL yang ada di dalam hyperlink tersebut. Sebuah embedded link (pranala yang tersimpan) adalah salah satu dari beberapa cara yang biasa digunakan dengan tipe/gaya teks khusus. Hyperlink adalah sebuah fungsi khusus untuk menghubungkan setiap masing-masing halaman website satu sama lainnya atau ke website yang lain.

1. Konsep Hyperlink dalam HTML

Hyperlink adalah suatu fungsi yang ada di dalam halaman HTML yang mampu membantu para pembaca menuju informasi lainnya secara singkat. Umumnya, teks yang disisipkan dengan hyperlink bisa dilihat secara mudah perbedaannya dalam suatu slide presentasi ataupun website.

a. Mengenal jenis link 

Link dalam suatu objek dapat berupa teks atau gambar yang dipakai dalam kode HTML untuk menuju dari suatu bagian ke bagian yang lain pada halaman yang sama atau menuju ke halaman (file) yang berbeda.

1). Link absolut

Link absolut adalah link yang mengarah langsung pada website tertentu, di mana sebuah dokumen dikunci pada alamat valid sebuah website dan tidak tergantung pada direktori lokasi dokumen html berada.

2). Link relatif

Link relatif adalah link yang mengarah langsung pada lokasi path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa diawali dengan alamat domain website tersebut.

2. Tag-tag untuk Hyperlink

HTML menggunakan tag <a> untuk keperluan ini link ditulis Dengan<a> yang merupakan singkatan cari anchor. Setiap tag setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju

a. <a> 

<a> berfungsi dalam mendefinisikan sebuah hyperlink yang digunakan untuk menghubungkan halaman satu ke halaman lain. Tidak semua elemen yang ditulis antara tag <a> menjadi sebuah hyperlink. Pembuatan link dengan tag <a> ini bergantung pada atribut href.

b. <link>

<link> berfungsi untuk menghubungkan dokumen yang bersangkutan dengan sumber file yang berasal dari luar (external).

c. <nav>

Berfungsi untuk mendefinisikan link navigasi 

B. Format formulir pada halaman web

Form dapat digunakan untuk berbagai keperluan, seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari user, menawarkan barang/jasa secara online, dan sebagainya.

1. Konsep formulir dalam HTML

Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima perintah masukan dari user, yang selanjutnya diolah menggunakan bahasa pemrograman web, baik secara server side scripting menggunakan PHP atau JSP maupun client-side scripting (javascript).

2. Penggunaan tag form 

Form HTML digunakan untuk memilih berbagai macam inputan yang disediakan. Data bisa dimasukkan dalam bentuk input teks, pilihan radio button, check box, dan lain-lain.

3. Form option

<Form> merupakan formulir yang digunakan sebagai perantara dalam memasukkan data ke server. Elemen form harus membungkus seluruh elemen masukan informasi agar dapat dibaca oleh aplikasi web.

a. Atribut 

Penulisan form dilengkapi oleh atribut berjumlah sembilan dan dari sembilan atribut, hanya accept yang tidak mendukung pada penerapan HTMLS.

1). Accept

Atribut "accept" mendefinisikan MIME yang diizinkan oleh server yang memuat script untuk memproses form.

2). Accept-charset

Atribut "accept-charset" merupakan atribut untuk menentukan karakter tertentu yang akan digunakan untuk pengiriman formulir. Nilai default string yang diterima adalah "UNKNOWN" karena menunjukkan pengodean sama dengan pengodean dokumen yang mengandung tag elemen <form>.

3. Action

Atribut action digunakan untuk mengirimkan data form ketikaform disubmit atau dapat dikatakan Aksi yang muncul ketika user menekan tombol tertentu.

Sumber : Buku Paket PWdPB Kelas XI program studi Rekayasa perangkat lunak Penulis Patwiyanto S.Kom , Sri wahyuni S.Kom dan Sumari Agus Prasetyo S.kom penerbit ANDI (Kurikulum 2013 Revisi & Terbit 2017)