Pemrograman Web dan Perangkat Bergerak

PENDAHULUAN

A. Latar Belakang

Pemrograman Web dan Perangkat Bergerak adalah salah satu mata pelajaran SMK program keahlian bagi siswa Kelas XI semester 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. Jumlah jam tatap muka mata pelajaran keahlian Pemrograman Web dan Perangkat Bergerak memang tergolong banyak, mengingat mata pelajaran ini merupakan kompetensi penting yang membantu siswa lebih memahami pemrograman web dan perangkat bergerak di sekolah dan dunia kerja nantinya.

B. Deskripsi

Buku ini merupakan bahan ajar yang membahas tentang mata pelajaran Pemrograman Web dan Perangkat Bergerak Kelas XI dengan ruang lingkup pembahasan sebagai berikut.

1. Menjelaskan konsep teknologi aplikasi web

2. Menjelaskan format teks pada halaman web 

3. Menjelaskan format tabel pada halaman web

4. Menjelaskan tampilan format multimedia pada halaman web

5. Menjelaskan format kaitan pada halaman web 6. Menjelaskan format formulir pada halaman web

7. Menjelaskan style pada halaman web

8. Menjelaskan client side scripting dalam pemrograman web 

9. Menjelaskan client side scripting pada halaman web interaktif

10. Menjelaskan teknologi aplikasi web server 

11. Menjelaskan pemrograman server side scripting

12. Menjelaskan struktur kendali program

13. Menjelaskan fungsi dalam program 

14. Menjelaskan library standar dalam program

15. Menjelaskan prosedur evaluasi aplikasi interaktif pada web 16. Menjelaskan operasi file

17. Menjelaskan analisis penanganan kesalahan pada program

C. Tujuan Akhir Pembelajaran 

Setelah mempelajari bahan ajar mata pelajaran Pemrograman Web dan

Perangkat Bergerak Kelas XI ini, siswa dapat: 

1. Memahami pelbagai teknologi pengembangan aplikasi web

2. Memahami pembuatan kode html untuk menampilkan teks dalam format tertentu pada halaman web 

3. Memahami pembuatan kode html untuk menampilkan tabel pada halaman web

4. Memahami pembuatan kode html untuk menampilkan tampilan format multimedia pada halaman web

5. Memahami pembuatan kode html untuk menampilkan format kaitan halaman web

pada

6. Memahami pembuatan kode html untuk menampilkan formulir pada halaman web 7. Memahami pembuatan kode html untuk menampilkan style tertentu pada halaman web

8. Memahami presentasi client side scripting dalam pemrograman web 9. Memahami pembuatan halaman web interaktif menggunakan client side scripting

10. Memahami prosedur mempresentasikan teknologi aplikasi web server

11. Memahami pembuatan kode program pada server side scripting 

12. Memahami pembuatan struktur kendali program

13. Memahami pembuatan kode fungsi dalam program 

14. Memahami library standar dalam program

15. Memahami prosedur modifikasi aplikasi interaktif pada web

16. Memahami pembuatan kode program untuk operasi file

17. Memahami melakukan perbaikan penanganan kesalahan pada program

BAB 1 Konsep Teknologi dan Format Teks Pada Aplikasi Web

A. Konsep Teknologi Aplikasi Web

Aplikasi web diterjemahkan sebagai aplikasi yang diakses menggunakan web browser melalui jaringan internet atau intranet. Ada beberapa persyaratan untuk membangun suatu aplikasi web, di antaranya memilih arsitektur dan mengembangkan desain aplikasi web. Peranan penting dalam pembangunan suatu aplikasi web memerlukan pemilihan teknologi yang tepat untuk merancang aplikasi web, serta distribusi dan integrasi sistem arsitektur yang memadai. Aplikasi web sebagai sebuah perangkat 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.

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 sekarang tentu sangat mudah menemukan bentuk implementasi World Wide Web. Jika sering mengakses intemet, Anda akan ditemukan bahwa hampir semua website yang ada menggunakan awalan www sebelum nama website tersebut. 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.

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 perkembangan aplikasi dalam web sebagai hasil dari pendekatan atau perubahan yang sangat cepat dalam teknologi. 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, antaranya marketing dan perhitungan jika dilihat dari sudut pandang seni dan teknologi. 

3. Macam-Macam Browser

Dari sekian banyak web browser, beberapa di antaranya sangat familier dan banyak digunakan, seperti Internet Explorer, Mozilla Firefox, Google Chrome, Opera, dan Safari. Beberapa editor menyediakan fitur-fitur tambahan, seperti syntax coloring (memberi warna pada kode-kode HTML) dan code completion (melengkapi secara otomatis kode yang akan dituliskan). Saat ini telah banyak perangkat lunak berbasis GUI yang sangat membantu dalam pembuatan halaman-halaman HTML Macromedia Dreamweaver dan Microsoft Frontpage merupakan dua nama yang cukup populer di platform Microsoft Windows.

4. Konsep Web Server

Internet identik dengan web karena kepopuleran web sebagai standar interface pada layanan-layanan yang ada di internet. Web awalnya digunakan sebagai penyedia informasi, sekarang digunakan untuk komunikasi e-mail, chatting. hingga melakukan transaksi bisnis (commerce). Web pada awalnya adalah ruang informasi dalam internet dengan menggunakan teknologi hiperteks. Pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web yang ditampilkan dalam browser web.

5. Macam-Macam Software Web Server

Web server yang paling banyak digunakan biasanya memiliki kelebihan (fitur) jika dibandingkan web server lainnya. Di samping itu, web server yang paling banyak digunakan biasanya memiliki forum yang besar dan aktif sehingga dapat dimanfaatkan untuk berdiskusi serta memecahkan berbagai macam permasalahan.

6. Macam-Macam Text Editor

Text editor identik dengan software atau perangkat yang digunakan untuk mengetikkan coding yang akan dibuat menjadi sebuah web. Pada dasamya, text editor hanyalah tempat Anda meletakkan barisan-barisan code. Namun, akhir-akhir ini para publisher berlomba-lomba memberikan editor yang bagus, mudah digunakan, dan memiliki banyak fitur lainnya.

7. Tool Pengembang Web 

Tool atau peralatan yang identik dengan perangkat lunak yang digunakan dalam proses pengembangan website. Tool dalam mengembangkan aplikasi menjadi bagian penting karena sangat membantu dan mempersingkat proses pengembangan. Pemilihan tool yang tepat dapat memberi keuntungan bagi developer karena menghemat waktu, tenaga, dan pekerjaan cepat selesai. Berikut ini beberapa tool pengembang web yang sering digunakan.

a. Adobe Edge Inspect (http://html.adobe.com/edge/)

b. Firebug (https://addons.mozilla.org/en-US/firefox/addon/firebug/)

c. Lorem Ipsum (http://www.lipsum.com/) d. Favicon Generator (http://tools.dynamicdrive.com/favicon/)

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. Browser dapat memahami isi suatu dokumen yang berasal dari web server karena HTML digunakan sebagai standar.

1. Struktur Dasar HTML

Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Struktur struktur tersebut sebagai hal mendasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

2. Versi HTML

Seiring perkembangan dunia global, khususnya dunia IT. HTML juga ikut berpartisipasi memajukan dunia IT terutama dalam bidang Web App. Hal yang pelu dipahami adalah setiap terjadi perkembangan versi HTML mau tidak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Jika tidak, browser tidak akan bisa menampilkan HTML tersebut. Berikut ini beberapa versi HTML dari awal hingga sekarang.

3. HTML Head, Title, dan Body

Kesalahan akibat peletakan atau penggunaan tag HTML tidak akan mengakibatkan sistem komputer menjadi hang rusak. Kesalahan tersebut hanya berakibat pada tampilan halaman web tersebut. Jika ada tag HTML yang tidak diketahui dalam halaman web yang sedang diproses, browser akan mengabaikannya seakan-akan tag tersebut tidak ada. Hal ini dikarenakan web browser sengaja dirancang dengan kemampuan mengenali dan melaksanakan hanya beberapa tag HTML dan keseluruhan tag standard W3C

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>, yang akan menjadikan teks yang ada di antara tab tersebut akan ditampilkan dalam format cetak tebal (bold). Ada lagi tag <i> dan </i> yang akan menjadikan teks di antaranya sebagai cetak miring dan contoh-contah tag lainnya.

5. Fungsi Berbagai Tag dalam HTML

Elemen, tag, dan atribut pada HTML saling berkaitan, hanya saja atribut memiliki tugas khusus untuk memberikan informasi atau sifat tambahan yang akan diberikan kepada tag dan elemen yang mengandung atribut tersebut. Elemen pada HTML identik dengan susunan dari tag pembuka sampai tag penutup serta didefinisikan oleh tag pembuka, lalu dilanjutkan oleh konten lalu diakhiri oleh tag penutup. Semua tag-tag pembentuk halaman web ditulis dalam sebuah file yang nanti akan diletakkan pada web server, kemudian diakses menggunakan browser. Kode-kode atau tag tag HTML yang akan diakses disimpan dalam sebuah atau beberapa file yang biasanya berekstensi htm atau .html.

6. Format Teks dalam HTML

Format teks dalam HTML digunakan untuk membuat teks yang ada dalam dokumen html menjadi kelihatan berbeda, menarik, memiliki ani, 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. Tampilan visual yang sama bisa didapat menggunakan CSS. Format teks dalam HTML terdiri atas cetak tebal (bold), cetak miring (italic), memberi garis bawah (underline). mengecilkan huruf (small), membesarkan huruf (big), menebalkan teks (strong), penekanan teks (emphasis), mencoret teks (strike), subscript, dan superscript, serta membuat singkatan (akronim).

BAB 2 Format Tabel dan Format Multimedia Pada Halaman Web

A. Format Tabel pada Halaman Web

Dalam menampilkan data yang terstruktur atau tampilan dari database, umumnya akan dibuat dalam bentuk tabel. HTML juga menyediakan tabel tag yang digunakan untuk menampilkan data dalam bentuk tabel. Hal ini dikarenakan menggunakan CSS untuk mengatur tampilan halaman web sangat dianjurkan.

1. Tag-Tag Tabel dalam HTML

Tabel diterjemahkan sebagai cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan Tag <Table>. Untuk membuat tabel di HTML minimal membutuhkan 3 tag utama sebagai berikut.

2. Elemen Table Thody, Thead, 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. Setiap thead, tfoot, dan tbody berisi grup baris dan masing-masing grup paling sedikit berisi satu baris yang didefinisikan dengan elemen <tr>.

3. Cellpadding

Penggunaan atribut cellpadding hanya didukung oleh HTML4.01, namun tidak didukung oleh HTML5. Atribut cellpadding digunakan untuk menentukan jarak spasi di dalam sel, yaitu di antara dinding sel dan isi sel.

4. Cellspacing

Atribut cellspacing digunakan untuk menentukan jarak spasi antarsel. Sama halnya dengan atribut cellpadding, atribut cellspacing juga tidak didukung oleh HTMLS. Nilai dari atribut cellspacing dalam menentukan spasi di dalam sel adalah pixel.

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. 

1. Konsep Hyperlink dalam HTML

Link berguna untuk menghubungkan antardokumen HTML Link merupakan singkatan dari hyperlink, yang identik dengan sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan. Dalam HTML, sebuah objek teks yang berupa link akan ditampilkan dengan fout berwarna biru style underline (bergaris bawah).

2. Tag-Tag untuk Hyperlink

Peran link dalam halaman web sangat besar dan selalu dibutuhkan untuk memudahkan pengguna web dalam berinteraksi dengan halaman halaman web yang ada. Link dalam HTML ditandai dengan tag <A> (Anchor), yang terdiri atas atribua HREE yang digunakan untuk menuliskan lokasi tujuan (file) dari link dan variabel NAME yang digunakan untuk menyimpan nama variabel kunci sebagai lokasi (bagian) yang akan dituju' olch link.

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. Form sangat. sering dijumpai dalam satu aplikasi sistem informasi berbasis web.

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). Berikut ini standar atau format umum penulisan dari form.

2. Penggunaan Tag Form

Form HTML digunakan untuk memilih berbagai macam inputan yang disediakan. Data hisa dimasukkan dalam bentuk input teks, pilihan radio button, check box, dan lain-lain. Bentuk inputan tersebut dikemas elemen dalam tag-tag form Berikut ini elemen-elemen yang disediakan oleh HTML.

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. Setiap clemon form dalam suatu halaman web harus memiliki atribut name yang digunakan sebagai pengenal dari nama elemen tersebut. Tag <form> digunakan untuk membuat form dalam dokumen HTML.

4. Metode Get dan Post

Protokol HTTP menyediakan dua metode dalam melalaikan permintaan pengiriman data bentuk HTML, yaitu metode GET dan metode POST. Sementara itu, permintaan HTTP terdiri atas dua bagian, yaitu sebuah header yang berisi sekumpulan metadata global mengenai kemampuan browser dan body yang dapat berisi informasi yang diperlukan ke server untuk memproses permintaan khusus.

5. Tipe-Tipe Inputan dalam Form (Text, Password, Radio, Checkbox Hidden, Button, Submit, dan File) 

Form HTML digunakan untuk memilih pelbagai macam data yang disediakan dalam bentuk text area, input teks, pilihan radio button, check box. dan lain-lain. Bentuk input tersebut dikemas elemen dalam tag-tag form.

6. Link dalam Form

Pangguan link pada HTML, yaitu untuk menghubungkan dokumen tersebut ke halaman lain yang macapskon alamat tujuan.