MODUL PENGEMBANGAN KEPROFESIAN BERKELANJUTAN BERBASIS KOMPETENSI. Menerapkan Web Authoring Tools pada Web Client ICTWEB410

(1)

(2)

MODUL

PENGEMBANGAN KEPROFESIAN

BERKELANJUTAN BERBASIS KOMPETENSI

Menerapkan Web Authoring Tools

pada Web Client

ICTWEB410

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN R.I.

DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN PENDIDIK DAN TENAGA

KEPENDIDIKAN BIDANG KELAUTAN PERIKANAN TEKNOLOGI INFORMASI DAN KOMUNIKASI

GOWA 2018

(3)

Judul Modul: Menerapkan Web Authoring Tools pada Web Client

Buku Modul - Versi 2018 Halaman: Halaman 2 dari 21

MODUL PENGEMBANGAN KEPROFESIAN

BERKELANJUTAN BERBASIS KOMPETENSI

BIDANG KEAHLIAN

REKAYASA PERANGKAT LUNAK

(RPL)

PROFESIONAL:

Apply Web Authoring Tool to Convert Client Data for Websites

Penulis:

Dwi Wahyu Widiastuti ([email protected])

Penelaah:

Syafaruddin, S.Kom., M.T. ([email protected])

Dr. H. Andi Sukri Syamsuri, S.Pd., M.Hum ([email protected])

Desain Grafis dan Ilustrasi:

Muh. Andy Siswanto, S.T. ([email protected])

Direktorat Pembinaan Guru Pendidikan Dasar Direktorat Jenderal Guru dan Tenaga Kependidikan Kementerian Pendidikan dan Kebudayaan

Hak Cipta Dilindungi Undang-Undang Dilarang mengcopy sebagian atau keseluruhan isi buku ini untuk kepentingan komersial tanpa izin tertulis dari Kementerian Pendidikan Kebudayaan.

(4)

KATA PENGANTAR

Modul pengembangan keprofesian berkelanjutan (PKB) berbasis kompetensi merupakan salah satu media pembelajaran yang dapat digunakan sebagai media transformasi pengetahuan, keterampilan dan sikap kerja kepada peserta pelatihan untuk mencapai kompetensi tertentu berdasarkan program pelatihan yang mengacu kepada Standar Kompetensi.

Modul pelatihan ini berorientasi kepada pelatihan berbasis kompetensi (Competence Based Training) diformulasikan menjadi 3 (tiga) buku, yaitu Buku Informasi, Buku Kerja dan Buku Penilaian sebagai satu kesatuan yang tidak terpisahkan dalam penggunaanya sebagai referensi dalam media pembelajaran bagi peserta pelatihan dan instruktur, agar pelaksanaan pelatihan dapat dilakukan secara efektif dan efisien. Untuk memenuhi kebutuhan pelatihan berbasis kompetensi tersebut, maka disusunlah modul pelatihan berbasis kompetensi dengan judul “Menerapkan Web Authoring Tool Pada Web Client”.

Kami menyadari bahwa modul yang kami susun ini masih jauh dari sempurna. Oleh karena itu, kami sangat mengharapkan saran dan masukan untuk perbaikan agar tujuan dari penyusunan modul ini menjadi lebih efektif.

Demikian kami sampaikan, semoga Tuhan YME memberikan tuntunan kepada kita dalam melakukan berbagai upaya perbaikan dalam menunjang proses pelaksanaan pembelajaran di lingkungan direktorat guru dan tenaga kependidikan.

Gowa, April 2018 Kepala LPPPTK KPTK,

(5)

DAFTAR ISI

KATA PENGANTAR... 3

DAFTAR ISI ... 4

ACUAN STANDAR KOMPETENSI KERJA ... 5

A. Acuan Standar Kompetensi Kerja ... 5

B. Kemampuan yang Harus Dimiliki Sebelumnya ... 7

C. Silabus Diklat ... 9

LAMPIRAN ... 21

1. BUKU INFORMASI ... 21

2. BUKU KERJA ... 21

(6)

ACUAN STANDAR KOMPETENSI KERJA

DAN SILABUS DIKLAT

A. Acuan Standar Kompetensi Kerja Kode Unit : ICTWEB410

Judul Unit : Menerapkan Web Authoring Tool Pada Web Client

Deskripsi Unit : Unit ini menggambarkan keterampilan dan pengetahuan yang dibutuhkan untuk menggunakan perangkat lunak pengembangan web untuk membuat konten situs web. Unit ini dirancang untuk menggunakan alat authoring web untuk mengubah teks dan gambar ke protokol web yang sesuai. Ini berlaku untuk individu yang dipekerjakan sebagai pengembang web yang bertanggung jawab untuk mengembangkan situs web menggunakan data klien. Tidak ada persyaratan lisensi, legislatif atau sertifikasi yang berlaku untuk unit ini pada saat publikasi

Sektor Unit : Web

ELEMEN KOMPETENSI KRITERIA UNJUK KERJA

1. Membuat file web client 1.1 Membuat dan menyimpan file pada folder yang tepat

1.2 Memasukkan dan mengatur format teks sesuai kebutuhan

1.3 Memasukkan dan mengoptimalkan gambar sesuai kebutuhan

2. Membuat format template web client 2.1 membuat Cascading style sheets (CSS) external

2.2 mendefinisikan tampilan web sesuai kebutuhan

2.3 Menghubungkan CSS ke file web dan menampilkan pengaturan CSS 3. Menetapkan penggunaan library 3.1 Mengidentifikasi komponen web

termasuk library pada beberapa halaman web

3.2 Mengatur format komponen web yang dipilih sesuai pengaturan CSS

(7)

3.3 Memeriksa source code dari komponen web yang dipilih

3.4 Membuat dan memberi nama library komponen web

3.5 Mengubah komponen web yang ada pada library sesuai kebutuhan

4. Mengembangkan template web client 4.1 Membuat dan menyimpan file sebagai template yang terhubung dengan CSS

4.2 Mengatur template web client 4.3 Menempatkan gambar dalam halaman web sesuai kebutuhan 4.4 Memodifikasi template web client 5. Mengidentifikasi kebutuhan web

authoring tool 5.1 Memilih web authoring tool sesuai kebutuhan 5.2 Mengatur lingkungan kerja

termasuk file transfer ptotocol (ftp) sesuai kebuthan web authoring tool 5.3 Mengubah navigasi lingkungan kerja web authoring tool sesuai kebutuhan 5.4 Memilih tombol, tools lain untuk akses semua fitur web authoring tool 5.5 Mendefinisikan nama website dan root folder

6. Membuat form 6.1 Menambah elemen form pada halaman web client

6.2 Mengatur property setiap elemen form

6.3 Menambah field sesuai kebutuhan form

6.4 Mengidentifikasi common gateway interface (CGI) script

6.5 Menghubungkan form dengan CGI script

6.6 Menguji kesalahan kode/error code form

7. Membuat Navigasi 7.1 Membuat site map

7.2 membuat link berupa teks dan gambar antar halaman web sesuai struktur menu website

7.3 menguji semua link web menggunakan beberapa browser 7.4 menguji konten website pada beberapa browser untuk memastikan

(8)

konsistensi tampilan web, performance, dan akses website

B. Kemampuan yang Harus Dimiliki Sebelumnya Penjelasan bahasa, literasi,

numerasi, skill yang berhubungan dengan kriteria unjuk kerja

Kriteria Unjuk Kerja Deskripsi

Reading/ Mengamati 1.2, 3.1, 3.2, 3.5, 5.1-5.5

Identifikasi dan

interpretasi informasi dari dokumentasi bisnis dan teknis sesuai kebutuhan bisnis dan spesifikasi teknis

Writing / Menulis 1.1-1.3, 2.1-2.3, 3.2, 3.4, 3.5, 4.1-4.4, 5.2-5.5,

6.1-6.5, 7.1-7.3 spesifik dan bahasa Menggunakan software pemrograman untuk membuat, mengatur, menyimpan, mengakses web berdasarkan

dokumen, template, diagram, dan gambar

Input data dan informasi kebutuhan bisnis sesuai spesifikasi teknis Navigasi Lingkungan Kerja 1.1, 2.2, 3.5, 5.1 Melengkapi pekerjaan

sesuai kebutuhan bisnis Output Kompetensi 1.1-1.3, 2.1-2.3, 3.1-3.5,

4.1-4.4, 5.1-5.5, 6.1-6.6,

7.1-7.4 pekerjaan Prioriti dan monitor Memecahkan

permasalahan operasional Menganalisa kebutuhan bisnis dan aspek teknis dari implementasi perangkat lunak

Merancang form Mengoperasikan software, memilih tool

(9)

sesuai kebutuhan, membuat kode HTML

(10)

Judul Modul: Menerapkan Web Authoring Tools pada Web Client Buku Modul - Versi 2018

Halaman 9 dari 21

C. Silabus Diklat

Judul Unit Kompetensi : Apply Web Authoring Tools To Convert Client Data for Website Kode Unit Kompetensi : ICTWEB410

Deskripsi Unit Kompetensi : Unit kompetensi ini berhubungan dengan sikap, pengetahuan, dan keterampilan yang dibutuhkan untuk mengaplikasikan web authoring tool pada web client

Perkiraan Waktu Pelatihan : 50 JP @ 45 Menit

Tabel Silabus Unit Kompetensi :

Elemen Kompetensi Kriteria Unjuk Kerja Indikator Unjuk _Kerja Materi Diklat

Perkiraan Waktu Diklat (Jampel) Pengetahuan (P) Keterampilan (K) Sikap (S) P K 1. Create the files

(Membuat file web client)

1.1 Create files and save, in the correct location and directory (Membuat dan menyimpan file pada folder yang tepat)

• Dapat menjelaskan cara membuat file web client • Dapat

menjelaskan cara

menyimpan file web client pada lokasi dan folder yang tepat • Mampu membuat dan menyimpan file web client Cara Pembuatan dan Penyimpanan file web client

Melakukan pembuatan dan penyimpanan file web client • Tepat • Teliti 15 30

(11)

Judul Modul: Mengaplikasikan Web Authoring Tools Pada Web Client Buku Modul - Versi 2018

1.2 Insert and format text content, according to the business requirements (Memasukkan dan mengatur format teks sesuai kebutuhan)

• Dapat menjelaskan cara insert dan format text sesuai kebutuhan • Mampu membuat text dengan berbagai format text sesuai kebutuhan • Harus tepat dan

teliti

Cara insert dan format text pada web client

Melalukan insert dan berbagai format text pada web client

• Tepat • Teliti

15 30

1.3 Insert and optimise images, as required ( Memasukkan dan mengoptimalkan gambar sesuai kebutuhan)

• Dapat menjelaskan cara insert dan optimize gambar sesuai kebutuhan • Mampu melakukan insert dan optimize gambar

• Harus tepat dan teliti Cara insert dan optimize gambar Melakukan insert dan optimize gambar • Tepat • Teliti 15 30 2. Create the formatting templates (Membuat format template web client)

2.1 Create basic external cascading style sheets (CSS) (membuat Cascading style sheets (CSS) external) • Dapat menjelaskan cara membuat CSS external • Mampu membuat CSS external

• Harus tepat dan teliti

CSS external Membuat CSS

(12)

according to the business requirements (mendefinisikan tampilan web sesuai kebutuhan) menjelaskan CSS yang diperlukan sesuai kebutuhan • Mampu membuat CSS sesuai kebutuhan • Harus tepat dan

teliti

website client CSS untuk web

client • Teliti

2.3 Link CSS to the files, and display formatting (Menghubungkan CSS ke file web dan

menampilkan pengaturan CSS) • Dapat menjelaskan cara membuat link CSS ke file HTML • Mampu membuat link CSS ke file HTML • Mampu menampilkan pengaturan style web menggunakan CSS

LINK CSS Mampu membuat link CSS ke HTML dan menampilkan pengaturan style web menggunakan CSS • Tepat • Teliti 15 30

3. Define library items (Menetapkan

penggunaan library)

3.1 Identify items that recur on several pages, and include in the library ( Mengidentifikasi komponen web termasuk library pada beberapa halaman web )

• Dapat

mengidentifikasi komponen web dan library yang dibutuhkan pada web page • Mampu

membuat komponen web dan library yang

Item dan Library web page • Mampu membuat komponen web dan library yang dibutuhkan pada web page

• Tepat

(13)

web page • Harus tepat dan

teliti 3.2 Format selected items, according to CSS

definition (Mengatur format komponen web yang dipilih sesuai pengaturan CSS)

• Dapat menjelaskan instruksi CSS untuk pengaturan komponen web yang dipilih • Mampu membuat instruksi CSS untuk pengaturan komponen web yang dipilih • Harus tepat dan

teliti Instruksi CSS format selected item • Mampu membuat instruksi CSS untuk pengaturan komponen web yang dipilih • Tepat • Teliti 15 30

3.3 Check the tags of selected items (Memeriksa

source code dari komponen web yang dipilih) • Dapat menjelaskan cara memeriksa source code dari komponen web yang dipilih • Mampu

memeriksa source code dari komponen web yang dipilih • Harus tepat dan

teliti Pemeriksaan souce code CSS • Mampu memeriksa source code dari komponen web yang dipilih • Tepat • Teliti 15 30

3.4 Create and clearly name, the selected library items (Membuat dan memberi nama library komponen web) • Dapat menjelaskan cara membuat dan memberi Pembuatan dan pemberian nama library Mampu membuat dan memberi nama library • Tepat • Teliti 15 30

(14)

Halaman 13 dari 21 komponen web • Mampu membuat dan memberi nama libray komponen web

3.5 Update the items contained in the library, according to the business requirements (Mengubah komponen web yang ada pada library sesuai kebutuhan)

• Dapat menjelaskan cara mengubah komponen web yang ada pada library sesuai kebutuhan • Mampu

mengubah komponen web yang ada pada library sesuai kebutuhan • Harus tepat dan

teliti Pengubahan item dalam library • Mampu mengubah komponen web yang ada pada library sesuai kebutuhan • Tepat • Teliti 15 30 4. Develop the templates (Mengembangkan template web client)

4.1 Create and save file as template, and link with CSS (Membuat dan menyimpan file sebagai template yang terhubung dengan CSS)

• Dapat menjelaskan cara membuat dan menyimpan template web client yang terhubung dengan CSS external • Mampu membuat dan menyimpan template web client yang Pembuatan dan penyimpanan template web client • Mampu membuat dan menyimpan template web client yang terhubung dengan CSS external • Tepat • Teliti 15 75

(15)

dengan CSS external

4.2 Format the template and create, and name,

editable regions (Mengatur template web client) • Dapat menjelaskan cara pengaturan template web client • Mampu mengatur template web client

• Harus tepat dan teliti Pengaturan dan pengubahan template • Mampu mengatur template web client • Tepat • Teliti 15 75

4.3 Place the generic image icons in a page, as required by the business image (Menempatkan gambar dalam halaman web sesuai kebutuhan)

• Dapat menjelaskan cara menempatkan gambar pada halaman web sesuai kebutuhan • Mampu menempatkan gambar pada halaman web sesuai kebutuhan • Harus tepat dan

teliti Penempatan gambar pada web client • Mampu menempatkan gambar pada halaman web sesuai kebutuhan • Tepat • Teliti 15 30

4.4 Save and modify the templates

(Memodifikasi template web client) • Dapat menjelaskan cara modifikasi template web client Penyimpanan dan modifikasi template • Mampu memodifikasi template web client • Tepat • Teliti 15 30

(16)

memodifikasi template web client

• Harus tepat dan teliti 5. Identify the authoring requirements (Mengidentifikasi kebutuhan web authoring tool)

5.1 Select the preferred web authoring tool, according to the business requirements (Memilih web authoring tool sesuai kebutuhan)

• Dapat menjelaskan cara memilih web authoring tool sesuai kebutuhan • Mampu memilih web authoring tool sesuai kebutuhan • Harus tepat dan

teliti Pemilihan web authoring tool • Mampu memilih web authoring tool sesuai kebutuhan • Tepat • Teliti 15 30

5.2 Set the preferences for the web-authoring tool, including the site file transfer protocol (FTP) client (Mengatur lingkungan kerja termasuk file transfer ptotocol (ftp) sesuai kebuthan web authoring tool

• Dapat menjelaskan cara mengatur lingkungan kerja termasuk file transfer ptotocol (ftp) sesuai kebutuhan web authoring tool Mampu mengatur lingkungan kerja termasuk file transfer ptotocol (ftp) sesuai kebuthan web authoring tool Harus tepat dan teliti Pengaturan preferences dan ftp client web authoring tool Mampu mengatur lingkungan kerja termasuk file transfer ptotocol (ftp) sesuai kebutuhan web authoring tool • Tepat • Teliti 15 30

(17)

tool environment or workspace, to meet individual requirements (Mengubah navigasi lingkungan kerja web authoring tool sesuai kebutuhan) menjelaskan cara mengubah navigasi lingkungan kerja web authoring tool sesuai kebutuhan • Mampu mengubah navigasi lingkungan kerja web authoring tool sesuai kebutuhan Harus tepat dan teliti navigasi lingkungan kerja web authoring tool mengubah navigasi lingkungan kerja web authoring tool sesuai kebutuhan • Teliti

5.4 Select buttons and tools, both opened and closed, to access the full range of features (Memilih tombol, tools lain untuk akses semua fitur web authoring tool)

• Dapat menjelaskan cara memilih tombol dan tool, termasuk membuka dan menutupnya untuk akses semua fitur • Mampu memilih

tombol dan tool, termasuk membuka dan menutupnya untuk akses semua fitur web client

• Harus tepat dan teliti Pemilihan tombol dan tool • Mampu memilih tombol dan tool, termasuk membuka dan menutupnya untuk akses semua fitur web client • Tepat • Teliti 15 30

5.5 Define and name the site and root folder

(18)

mendefinisikan dan memberi nama website client pada root folder

• Mampu mendefinisikan dan memberi nama website client pada root folder

nama web

client nama website client pada root folder

6. Create simple forms

(Membuat form) 6.1 Add form elements to the page (Menambah elemen form pada halaman web client) • Dapat menjelaskan cara menambah elemen form pada web client

• Mampu menambah elemen form pada web client

• Harus tepat dan teliti Penambahan elemen form web client • Mampu menambah elemen form pada web client

• Tepat

• Teliti 15 30

6.2 Set the form element properties for each form element (Mengatur property setiap elemen form) • Dapat menjelaskan cara mengatur property setiap elemen form • Mampu mengatur property setiap elemen form • Harus tepat dan

teliti Pengaturan property elemen form • Mampu mengatur property setiap elemen form • Tepat • Teliti 15 30

6.3 Insert additional fields, as required for the processing form (Menambah field sesuai kebuthan form) • Dapat menejlaskan cara menambah field Penambahan field sesuai • Mampu menambah menambah field • Tepat • Teliti 15 30

(19)

Halaman 18 dari 21 form • Mampu menambah menambah field sesuai kebutuhan form

form kebutuhan form

6.4 Identify the availability, and location, of the common gateway interface (CGI) script

(Mengidentifikasi common gateway interface (CGI) script) • Dapat menjelaskan cara mengidentifikasi CGI script • Mampu mengidentifikasi CGI script

Identifikasi

CGI script • Mampu mengidentifikasi CGI script

• Tepat

• Teliti 15 30

6.5 Connect the form to a script in a server CGI

bin (Menghubungkan form dengan CGI script) • Dapat menejalskan cara koneksi form dengan CGI script • Mampu membuat koneksi form menggunakan CGI script

• Harus tepat dan teliti Koneksi form menggunakan CGI script • Mampu membuat koneksi form menggunakan CGI script • Tepat • Teliti 15 30

6.6 Test the form to ensure that there are no errors (Menguji kesalahan kode/error code form ) • Dapat menjelaskan cara menguji kesalahan kode form • Mampu melakukan pengujian kesalahan kode code form Pengujian

error form • Mampu melakukan pengujian kesalhan kode form

• Tepat

(20)

teliti 7. Create simple

navigation (Membuat Navigasi)

7.1 Create the site map in order to plan

navigation (Membuat site map) • Dapat menejalskan cara membuat site map

• Mampu membuat site map

Pembuatan

sitemap • Mampu membuat site map

• Tepat

• Teliti 15 30

7.2 Create the links between pages to reflect the content structure, using both text and images (membuat link berupa teks dan gambar antar halaman web sesuai struktur menu website)

• Dapat

menjelaskan cara membuat link antar web page menggunakan link berupa text dan gambar • Mampu membuat

link antar web page

menggunakan link berupa text dan gambar • Harus tepat dan

teliti

Link web page mengguakan text dan gambar

• Mampu

membuat link antar web page menggunakan link berupa text dan gambar

• Tepat

• Teliti 15 30

7.3 Check the links in multiple browsers for errors (menguji semua link web menggunakan beberapa browser

• Dapat

menejlaskan cara menguji link web page pada beberapa browser • Mampu menguji link web page pada beberapa browser

• Harus tepat dan teliti Pengujian link web page pada beberapa browser • Mampu menguji link web page pada beberapa browser

• Tepat • Teliti

15 30

7.4 Check the website content across a number

(21)

and accessibility (menguji konten website pada beberapa browser untuk memastikan

konsistensi tampilan web, performance, dan akses website) website pada beberapa browser mencakup konsistensi tampilan web, performance, dan aksesbilitas • Mampu menguji konten website pada beberapa browser mencakup konsistensi tampilan web, performance, dan aksesbilitas • Harus tepat dan

teliti mencakup presentasi, performance, dan aksesbilitas browser mencakup konsistensi tampilan web, performance, dan aksesbilitas

(22)

Judul Modul: Mengaplikasikan Web Authoring Tools Pada Web Client

Buku Modul - Versi 2018 Halaman 21 dari 21

LAMPIRAN

1. BUKU INFORMASI 2. BUKU KERJA 3. BUKU PENILAIAN

(23)

(24)

BUKU INFORMASI

Menerapkan

Web

Authoring Tools

pada

Web

Client

ICTWEB410

(25)

Judul Modul: Menerapkan Web Authoring Tool pada WebClient

Buku Informasi - Versi 2018 Halaman: 2 dari 30

DAFTAR ISI

DAFTAR ISI ... 2 DAFTAR GAMBAR ... 5 BAB I ... 6 PENDAHULUAN ... 6 A. TUJUAN UMUM ... 6 B. TUJUAN KHUSUS ... 6 BAB II ... 7 MEMBUAT FILE WEB CLIENT ... 7 A. Pengetahuan yang diperlukan dalam Membuat File Web Client ... 7 A1. Pengertian Web Client ... 7 A2. Pembuatan File Web Client ... 8 B. Keterampilan yang diperlukan dalam Membuat File Web Client ... 9 C. Sikap kerja yang diperlukan dalam Membuat File Web Client ... 9 BAB III ... 10 MEMBUAT FORMAT TEMPLATE WEB CLIENT... 10 A. Pengetahuan yang diperlukan dalam Membuat Format Template Web Client . 10 Cara penggunaan CSS ada 3 yaitu: ... 11 B. Keterampilan yang diperlukan dalam Membuat Format Template Web Client .. 12 C. Sikap kerja yang diperlukan dalam Membuat Format Template Web Client ... 12 BAB IV ... 13 MENETAPKAN PENGGUNAAN LIBRARY ... 13 A. Pengetahuan yang diperlukan dalam Menetapkan Penggunaan Library ... 13 B. Keterampilan yang diperlukan dalam Menetapkan Penggunaan Library ... 14 C. Sikap kerja yang diperlukan dalam Menetapkan Penggunaan Library ... 14 BAB V ... 15 MENGEMBANGKAN TEMPLATE WEB CLIENT ... 15

(26)

A. Pengetahuan yang diperlukan dalam Mengembangkan Template Web Client .. 15 B. Keterampilan yang diperlukan dalam Mengembangkan Template Web Client .. 16 C. Sikap kerja yang diperlukan dalam Mengembangkan Template Web Client ... 16 BAB VI ... 17 MENGIDENTIFIKASI KEBUTUHAN WEB AUTHORING TOOL ... 17 A. Pengetahuan yang diperlukan dalam Mengidentifikasi Kebutuhan Web Authoring Tool……….17 B. Keterampilan yang diperlukan dalam Mengidentifikasi Kebutuhan Web Authoring Tool………. 19 C. Sikap kerja yang diperlukan dalam Mengidentifikasi Kebutuhan Web Authoring Tool………. 19

BAB VII ... 20 MEMBUAT FORM ... 20 A. Pengetahuan yang diperlukan dalam Membuat Form ... 20 A1. Bentuk umum Form ... 20 A2. Common Gateway Interface (CGI) Script ... 22 B. Keterampilan yang diperlukan dalam Membuat Form ... 23 C. Sikap kerja yang diperlukan dalam Membuat Form ... 23 BAB VIII ... 24 MEMBUAT NAVIGASI ... 24 A. Pengetahuan yang diperlukan dalam Membuat Navigasi ... 24 A1. Pembuatan sitemap ... 24 A2. Pembuatan Navigasi Link ... 25 A3. Pemeriksaan konten website ... 26 B. Keterampilan yang diperlukan dalam Membuat Navigasi ... 27 C. Sikap kerja yang diperlukan dalam Membuat Navigasi ... 27 DAFTAR PUSTAKA ... 28 A. Buku Referensi ... 28

(27)

B. Referensi Lainnya ... 28 DAFTAR ALAT DAN BAHAN ... 29 A. Daftar Peralatan/Mesin ... 29 B. Daftar Bahan ... 29 DAFTAR PENYUSUN ... 30

(28)

DAFTAR GAMBAR

Gambar 2.1 Layout web client ... 8 Gambar 2.2 Contoh Pengaturan tata letak text dan gambar ... 9 Gambar 3.1 Contoh Layout Web ... 10 Gambar 4.1 Situs jQuery ... 13 Gambar 7.1 Contoh Form ... 21 Gambar 7.2 Common Gateway Interface (CGI) ... 22 Gambar 8.1 Menu navigasi pada website ... 26

(29)

BAB I

PENDAHULUAN

A. TUJUAN UMUM

Setelah mempelajari modul ini peserta diharapkan mampu memahami dan mengaplikasikan web authoring tools pada web client.

B. TUJUAN KHUSUS

Adapun tujuan mempelajari unit kompetensi melalui buku informasi Menerapkan Web Authoring Tools pada Web Client ini guna memfasilitasi peserta sehingga pada akhir diklat diharapkan memiliki kemampuan sebagai berikut:

1. Create the files (Membuat file web client)

2. Create the formatting templates (Membuat format template web client) 3. Define library items (Menetapkan penggunaan library)

4. Develop the templates (Mengembangkan template web client)

5. Identify the authoring requirements (Mengidentifikasi kebutuhan web client) 6. Create simple forms (Membuat form)

(30)

BAB II

MEMBUAT FILE

WEB

CLIENT

A. Pengetahuan yang diperlukan dalam Membuat File Web Client A1. Pengertian Web Client

Secara umum, suatu client adalah satu aplikasi komputer, seperti web browser yang

berjalan pada satu komputer lokal dari pengguna atau workstation, dan terhubung ke

suatu server. Client-side programming adalah program komputer pada web yang

dijalankan pada sisi client, oleh web browser. Hal ini berlawanan arti dengan Server-side scripting.

Operasi dapat dilakukan oleh client-side karena operasi tersebut membutuhkan akses ke informasi atau fungsi yang tersedia pada client tetapi tidak pada server, karena pengguna membutuhkan observasi terhadap operasi tersebut atau menyediakan input, atau server kekurangan kekuatan pememprosesan untuk melakukan operasi yang tepat waktu untuk

seluruh client yang harus dilayaninya. Sebagai tambahan, jika operasi dapat dilakukan

oleh client tanpa mengirim data melalui jaringan, maka hal itu memakan waktu lebih

sedikit, menggunakan lebih kecil bandwidth dan mengurangi resiko keamanan.

Client-side Script seringkali dimasukkan (embedded) di dalam dokumen HTML, tetapi dapat juga berada di dalam file terpisah, yang direferensikan oleh dokumen yang

menggunakannya. Atas sebuah permintaan, file yang diperlukan dikirimkan oleh web

server kepada komputer user. Web browser milik user melakukan eksekusi terhadap Script, lalu menampilkan dokumen, termasuk output yang dapat terlihat dari Script.

Client-side Script juga dapat berisikan perintah yang harus diikuti oleh web browser jika user

(31)

A2. Pembuatan File Web Client

Pembuatan file web client dapat menggunakan berbagai macam Web Authoring Tool dan berbagai macam bahasa pemrograman misalnya PHP dipadukan dengan HTML dan CSS. Layout merupakan tampilan gambar dan teks pada suatu halaman web yang tersusun sehingga enak untuk dilihat dan dibaca. Langkah kerja untuk membuat sebuah layout yang baik adalah membuat garis bantu (gridlines) untuk menentukan kolom halaman.

Gambar 2.1 Layoutwebclient

Garis bantu ini dibuat untuk menentukan dengan mudah dimana logo atau gambar disisipkan, juga format teks dan lainnya disusun dalam satu halaman. Hal yang harus diperhatikan bahwa format layout untuk web berbeda secara teknis dengan format layout media cetak biasa.

Jika tampilan layout lebih besar ukurannya daripada browser akan mengakibatkan selain kurang menarik untuk dilihat, sebagian format halaman akan hilang. Berikut sebagai contoh perhitungan untuk menentukan ukuran format layout yang sesuai. Sebelumnya perhitungkan antara ukuran format halaman dengan lebar windows browser dengan satuan pixel (picture element). Pixel adalah merupakan perhitungan berdasarkan jumlah titik cahaya yang merupakan unsur terkecil yang ditayangkan pada layar monitor. Pada umumnya sebuah window browser memiliki lebar 488 pixel, sehingga area untuk format halaman harus lebih kecil, misalnya 468 pixel. Selanjutnya dapat menggunakan 5 kolom sebagai garis bantu, sehingga mengurangi sejumlah 40 pixel untuk setiap

(32)

ruang kolom yang membutuhkan 10 pixel untuk masing-masing kolom. Artinya didapatkan sebesar 428 pixel untuk format sebuah halaman. Dan bila kita bagi kembali menjadi 5 kolom untuk masing-masing tampilan format gambar dan teks maka akan menghasilkan 85.6 pixel (yang didapat dari 428 : 5) untuk masing-masing format pada halaman. Berikut ini adalah contoh tampilan pengaturan teks dan gambar pada halaman web.

Gambar 2.2 Contoh Pengaturan tata letak text dan gambar

B. Keterampilan yang diperlukan dalam Membuat File Web Client Membuat file web client membutuhkan keterampilan pengoperasian internet, pemrograman web

C. Sikap kerja yang diperlukan dalam Membuat File Web Client Harus bersikap secara:

1. Tepat; 2. Teliti.

(33)

BAB III

MEMBUAT FORMAT TEMPLATE

WEB

CLIENT

A. Pengetahuan yang diperlukan dalam Membuat Format Template Web Client

Pembuatan format template web client dapat menggabungkan penggunaan CSS dan HTML. Sebelum membuat format template web client, maka dibuat dulu layout web client tersebut. Contoh layout web terlihat pada gambar berikut ini.

(34)

Jika layout web telah dibuat maka langkah selanjutnya adalah membuat file CSS. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language). CSS digunakan oleh web programmer untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri. Contoh penulisan kode css :

Body {background-color: white;}

Body adalah Selektor, ?{ }? adalah deklarasi, background-color adalah properti dan white adalah nilai properti. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag body sebuah halaman web.

Cara penggunaan CSS ada 3 yaitu:

1.

CSS internal yaitu CSS sebagai atribut/elemen/bagian dari tag HTML. Cara ini biasanya dipakai jika kode cssnya sedikit. Contoh:

<head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style></head>

(35)

2. CSS inline style yaitu CSS yang berada dalam tag HTML.

Kode css terletak antara tag ?style? yang biasanya diletakkan dibawah elemen <title></title>. Contoh CSS inline:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

3. CSS external yaitu CSS sebagai file terpisah.

Dalam cara ini, kode css berada pada file .css yang dibuat dengan cara yang sama yaitu dengan software notepad, namun diberi extension file .css. Contoh CSS external:

hr {color:sienna;} p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

Instruksi CSS 3 saat ini telah mengakomodasi pembuatan style web sehingga memudahkan pengaturan tata letak teks, gambar, animasi, serta elemen web yang lain. File CSS external ini berisi semua instruksi CSS3 untuk pengaturan style web mencakup pengaturan layout web, pengaturan huruf, pengaturan gambar, dan sebagainya. File CSS external ini terpisah dari file html, sehingga disimpan pada folder tertentu dengan extension file .css. Lalu file CSS external ini dihubungkan dengan file html menggunakan instruksi CSS yaitu <link rel type=text/css href=namafile.css></link>.

B. Keterampilan yang diperlukan dalam Membuat Format Template Web Client

Membuat format template web client membutuhkan keterampilan pengoperasian internet, pemrograman web.

C. Sikap kerja yang diperlukan dalam Membuat Format Template Web Client

Harus bersikap secara: 1. Tepat;

(36)

BAB IV

MENETAPKAN PENGGUNAAN

LIBRARY

A. Pengetahuan yang diperlukan dalam Menetapkan Penggunaan Library Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Salah satu library yang sering digunakan pada pemrograman web yaitu jQuery Dengan demikian, jQuery adalah kumpulan fungsi-fungsi Javascript yang memudahkan penulisan kode Javascript. jQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery berkembang menjadi proyek opensource dan menjadi libary Javascript paling populer di dunia. Situs resmi jQuery beralamat di jQuery.com.

Gambar 4.1 Situs jQuery

Javascript sangat powerfull untuk memanipulasi element HTML, tapi penggunaannya juga tidak mudah. Sebagai contoh, untuk mencari sebuah element HTML, dengan Javascript kita menggunakan fungsi getElementById():

(37)

var x = document.getElementById("tombol");

Dengan jQuery, penulisannya jauh lebih singkat:

var x = $("#tombol");

Selain itu (sebagaimana CSS) terdapat beberapa perbedaan implementasi Javascript dari 1 web browser dengan web browser lain. Kode Javascript yang berjalan mulus di Mozilla Firefox, belum tentu bisa berjalan di Internet Explorer, begitu juga sebaliknya. Hal ini diperparah dengan perbedaan versi dari masing-masing web browser.

Untuk mengatasi hal ini, jQuery memiliki fungsi bawaan yang mendeteksi web browser dan menyediakan fungsi pengganti. Dengan demikian, kita tidak perlu pusing memikirkan perbedaan implementasi Javascript dari setiap web browser.

Fungsi Javascript lanjutan seperti AJAX (Asynchronous Javascript and XML), juga

disederhanakan oleh jQuery. Untuk menggunakan AJAX, kita hanya butuh beberapa

baris perintah . Fitur lain dari jQuery (dan mungkin menjadi alasan paling penting), jQuery menyediakan berbagai efek animasi menarik. Beberapa diantaranya sangat mudah digunakan dan hanya membutuhkan 1 atau 2 baris kode program. Khusus untuk membuat efek animasi ini, jQuery juga memiliki jQuery UI yang fokus ke animasi dan interaksi user. jQuery juga memiliki berbagai plugin atau kode tambahan untuk fungsi-fungsi lanjutan, seperti membuat efek slideshow, image carousel, hingga jQuery mobile. Efek-efek seperti ini dibuat berdasarkan kode dasar jQuery.

B. Keterampilan yang diperlukan dalam Menetapkan Penggunaan Library Menetapkan penggunaan library membutuhkan keterampilan pengoperasian internet, pemrograman web.

C. Sikap kerja yang diperlukan dalam Menetapkan Penggunaan Library Harus bersikap secara:

(38)

BAB V

MENGEMBANGKAN TEMPLATE

WEB

CLIENT

A. Pengetahuan yang diperlukan dalam Mengembangkan Template Web Client

Web template merupakan komponen dasar dari suatu sistem template website yang memisahkan antara bagian konten dengan bagian presentasi dari suatu desain web. Web template digunakan untuk memproduksi dokumen web secara massal”. Pengertian yang sangat umum dari desain template adalah pola layout dari sebuah website yang ingin didesain dan disiapkan dengan berbagai fitur, content suatu bidang di dalamnya. Kita juga bisa mengubah serta mengedit serta mengembangkan kembali dari desain yang di rencanakan. Berikut ini beberapa tips dalam mengembangkan Template untuk website.

• Tujuan atau arah website

Sebelum merancang sebuah web alangkah baiknya memikirkan untuk memilih bentuk template yang sesuai dengan isi dari tujuan web anda.

Contohnya jika ingin membuat web tentang pembelajaran tetapi memilih template yang berwarna pink dan background dihiasi bunga, hal ini tidak singkron. Dan apabila berniat untuk bisnis online atau iklan seperti google adsense maka persiapkanlah template yang tersedia kolom letak untuk menempatkan iklan tersebut.

• Template yang menarik

Buatlah template yang menarik bagi pengunjung. Di situs web banyak sekali tersedia contoh template yang menarik baik berbayar maupun yang gratis. Contoh template tersebut dapat menjadi inspirasi untuk membuat template yang menarik.

• Template yang ringan

Salah satu faktor yang penting lainnya adalah besarnya file template tersebut. Saat mengembangkan template website harus memperhatikan berat tidaknya proses loading web anda. Pengunjung akan enggan berkunjung ke web yang telah dibuat

(39)

apabila proses loadingnya terlalu lama. Maka hindarilah hal seperti ini. Banyak faktor yang membuat web itu menjadi berat diantaranya:

• Terlalu banyak gambar ukuran besar

• Terlalu banyak script atau variasi yang terpasang • Ukuran template yang besar

• Faktor server hosting yang terlalu sibuk atau memang lambat

Dari hal tersebut kita bisa kita bisa mengembangkan template yang bagus dan cepat proses loadingnya. Untuk mengukur kecepatan web beserta komponen yang paling lengkap bisa dicoba pada website optimization. Jenis template yang cocok terhadap search engine atau tidak. Tetapi dapat melihat atau mencari di situs penyedia dengan memakai keyword seo template. Pada umumnya tentang SEO template, perlu di dukung oleh server, yang artinya tidak semua server mendukung atau support dengan SEO Friendly.

• Template Responsive

Saat ini dengan adanya berbagai device yang dapat digunakan untuk membuka website, misalnya smartphone, tablet, makaketika mengembangkan template web harus mendukung responsive web.

Hal ini supaya website dapat dibuka pada berbagai device dengan tampilan yang rapih, artinya jika dibuka di laptop gambar tidak terpotong, maka ketika web tersebut dibuka di smartphone atau tablet, maka gambar yang sama tidak akan terpotong.

B. Keterampilan yang diperlukan dalam Mengembangkan Template Web Client

Mengembangkan Template Web Client membutuhkan keterampilan pengoperasian internet dan pemrograman web

C. Sikap kerja yang diperlukan dalam Mengembangkan Template Web Client

(40)

BAB VI

MENGIDENTIFIKASI KEBUTUHAN

WEB

AUTHORING TOOL

A. Pengetahuan yang diperlukan dalam Mengidentifikasi Kebutuhan Web

Authoring Tool

Web authoring merupakan suatu proses pembuatan , mengubah dan mengatur konten yang ada di dalam suatu web server. Web server menawarkan suatu text file yang berbentuk dalam format HTML. File yang berada di dalam web ini akan berisikan link kedalam file lainnya. Isi dari host server web juga dapat mencakup dokumen yang berbentuk Non-HTML serta gambar, program, musik, dan video. Web authoring dapat dikendalikan secara jarak jauh, pengguna membuat konten mesin klien dan kemudian mentransfer konten tersebut kedalam server web, yang berguna untuk menawarkan fungsionalitas, server web harus menyediakan cara bagi klien untuk membuat halaman web baru dan memberikan halaman web nama dan lokasi. klien harus dapat melihat konten halaman web saat ini dan menyediakan konten baru ke server untuk mengganti konten lama. Web Authoring Tool dapat berupa web editor, HTML editor, tool image editing, dan sebagainya. Berikut ini adalah beberapa Web Authoring Tool yang sering digunakan :

• Adobe Dreamweaver : Merupakan software yang sering digunakan untuk

membuat suatu desain dari website tersebut dan memiliki fitur-fitur yang canggih.

• Microsoft Expression Web : Bagian dari Microsoft suite professional yang

pada umumnya digunakan untuk alat mendesain, MA Expression Web merupakan kode standar dan layout yang berbasis menggunakan css. Namun program ini umumnya hanya digunakan di dalam windows saja .

• NVU : Merupakan suatu alat open source yang cocok banyak fitur dalam

Dreamweaver. Software ini dapat digunakan di dalam Linux, Windows dan Mac .

(41)

HTML editor dirancang untuk mempercepat proses penulisan html yang dilakukan secara manual. Di dalam HTML Editor ini tidak memungkinkan agar kita dapat mengedit halaman visual, sehingga ketika kita ingin menggunakannya perlu untuk memeriksa pekerjaan kita di dalam browser terlebih dahulu. banyak web designer proffesional yang sebenarnya dianjurkan ketika kita ingin membuat dokumen dalam bentuk html secara manual, beberapa diataranya yaitu :

• TextPad : Merupakan salah datu editor yang menggunanakan kode plain-text

sederhana yang digunakan untuk windows.

• Sublime Text : Ini merupakan suatu editor berbasikan teks yang memiliki banyak

fungsi (seperti kode warna, kode tampilan), sublime text ini pada umumnya digunakan untuk Windows, Mac, dan Linux.

• Coda : Pengguna coda seperti alur kerja yang visual, alat-alat manajemen file,

dan built-in akses terminal. Ini digunakan biasanya di Macintosh.

• TextMate : Editor teks canggih ini memiliki alat manajemen proyek dan sebuah

antar muka yang terintegrasi dengan Mac operating system, serta akan kaya fitur dan murah . yang pada umunya digunakan hanya untuk Macintosh.

• BBEdit : suatu editor terkemuka untuk pengembang yang berbasiskan web

untuk mac .BBEdit ini digunakan untuk Macintosh saja.

Ketika membuat suatu halaman webclient dan ingin menambahkan gambar yang digunakan untuk menunjuk halaman, maka akan membutuhkan program image editing. Berikut ini merupakan Web Authoring Tool untuk kebutuhan desain grafis yang sering digunakan :

• Adobe Photoshop. Photoshop tidak dapat diragukan lagi untuk melakukan

edit gambar yang akan di gunakan di dalam suatu websiite dan merupakan standart industri untuk penciptaan gambar baik di cetak dan website.

• Adobe Photoshop Elements. Di dakam versi ini lebih ringan dari photoshop

dan dirancang untuk mengedit foto dan manajemen tetapi beberapa mungkin menemukan bahwa ia memiliki semua alat yang diperlukan untuk menempatkan gambar pada halaman sautu website.

(42)

• Adobe Illustrator. Karena seorang desainer perlu membuat logo, ikon, dan ilustrasi

di berbagai ukuran dan resolusi, banyak start dengan gambar vektor di ilustrator untuk fleksibilitas maksimum, kita dapat output grafis web langsung dari ilustrator, atau membawa kembali kedalam photoshop untuk memberikan tambhaan-tambahan lainnya.

• Adobe Fireworks. Program grafis web ini menggabungkan editor foto dengan alat

yang digunakan untuk membuat ilustrasi berbasis vektor, dan juga dilengkapi alat-alat canggih untuk menambahkan keluaran dari grafis suatu web.

Website memerlukan teknologi internet, sehingga dibutuhkan beberapa alat khusus untuk melihat dan memindahkan file melalui jaringan berbagai browser, karena browser membuat halaman berbeda. Ketika ingin menguji halaman pada banyak browser, baik pada desktop maupun pada perangkat mobile. Program ftp yang memungkinkan untuk meng-upload dan download file antara komputer user dan komputer yang akan melayani user ke halaman web.

B. Keterampilan yang diperlukan dalam Mengidentifikasi Kebutuhan Web Authoring Tool

Mengidentifikasi Kebutuhan Web Authoring Tool memerlukan keterampilan pemrograman web dan pengoperasian internet

C. Sikap kerja yang diperlukan dalam Mengidentifikasi Kebutuhan Web Authoring Tool

(43)

BAB VII

MEMBUAT FORM

A. Pengetahuan yang diperlukan dalam Membuat Form A1. Bentuk umum Form

Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript). Form dapat digunakan untuk berbagai keperluan seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari pengguna, menawarkan barang/jasa secara online dan sebagainya. Form sangat sering kita jumpai dalam satu aplikasi sistem informasi berbasis web.

Standar atau format umum penulisan dari form adalah sebagai berikut : <Form metode=”post/get” action=”….”>

…… … … … … </form>

Di antara elemen <form> dan </form> digunakan elemen - elemen HTML <input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan oleh pengguna. Format umum dari penulisan elemen HTML <input> adalah sebagai berikut :

<input

(44)

Gambar 7.1 Contoh Form

size="number"

type="text"|"checkbox"|"radio"|"submit"|"res et" value="value"

checked >

Pada jenis masukan (input) dari halaman web minimal harus mempunyai atribut jenis (type), nama (name) dan nilai (value) default. Disamping atribut type, masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut antara lain :

Name : untuk menamai kotak

Value : untuk menandai atau menampung teks Size : mengatur ukuran teks pada kotak maxlength : menentukan panjang maksimum teks

Masing-masing jenis input memiliki karakteristik yang berbeda, dan pemilihan penggunaannya disesuaikan dengan kesesuaian nilai dari input data yang dikelola. Berikut adalah salah satu contoh listing kode dari tag elemen form - input

(45)

A2. Common Gateway Interface (CGI) Script

Common Gateway Interface atau disingkat CGI adalah suatu standar untuk menghubungkan berbagai program aplikasi ke halaman web. CGI mmerupakan sebuah program komputer yang menjadi perantara antara standar HTML yang menjadikan tampilan webdengan program lain, seperti basis data (database). Hasil yang diperoleh dari proses pencarian dikirimkan kembali ke halaman web untuk ditampilkan dalam format HTML.

Gambar 7.2 Common Gateway Interface (CGI)

CGI sendiri telah muncul sejak teknologi web diperkenalkan di dunia pada awal tahun 1990, bersama dengan kemunculan CERN, web server pertama di dunia. CGI disediakan sebagai tool, atau perlengkapan untuk membuat program web. CGI digunakan untuk membuat program-program tampilan web yang lebih interaktif, koneksi ke basis data, bahkan membuat permainan (game). CGI pada masa-masa awalnya dibuat dengan bahasa C, bahasa yang juga digunakan untuk membuat web server pertama yaitu, CERN. CGI kemudian diadopsi oleh NCSA (National Central for Supercomputing Application) web server, dan hingga kini masih digunakan pada Apache Web Server, web server yang paling banyak digunakan oleh komunitas Internet saat ini. Walaupun demikian CGI bisa juga direalisasikan dengan banyak bahasa pemrograman lain. Mulai dari C, Perl, Python, PHP, Tcl/Tk, hingga skrip shell pada UNIX / LINUX.

CGI seringkali digunakan sebagai mekanisme untuk mendapatkan informasi dari user melalui fill out form, mengakses basis data (database), atau menghasilkan halaman yang dinamis, meskipun secara prinsip mekanisme CGI tidak memiliki

(46)

lubang keamanan, program atau skrip yang dibuat sebagai CGI dapat memiliki lubang keamanan ataupun tidak sengaja. Potensi lubang keamanan yang digunakan dapat terjadi dengan CGI antara lain :

• Seorang pemakai dapat memasang skrip CGI sehingga dapat mengirimkan berkas kata kunci (password) kepada pengunjung yang mengeksekusi CGI tersebut.

• Program CGI dipanggil berkali-kali sehingga server menjadi terbebani karena harus menjalankan beberapa program CGI yang menghabiskan memori dan CPU cycle dari web server.

B. Keterampilan yang diperlukan dalam Membuat Form

Pembuatan form memerlukan keterampilan pengoperasian internet dan pemrograman web.

C. Sikap kerja yang diperlukan dalam Membuat Form Harus bersikap secara:

(47)

BAB VIII

MEMBUAT NAVIGASI

A. Pengetahuan yang diperlukan dalam Membuat Navigasi A1. Pembuatan sitemap

Sitemap adalah daftar halaman dari sebuah website yang dapat diakses oleh semua pengguna internet baik mesin pencari maupun pengunjung normal (manusia). Sitemap merupakan cara dari para pemilik website untuk memberitahu mesin pencari termasuk google tentang halaman-halaman yang ada di website mereka. Sitemap sangatlah penting dari sisi SEO. Pertama harus menekankan bahwa menambahkan sitemap tidaklah akan mempengaruhi peringkat website di mesin pencari. Namun, jika terdapat beberapa halaman di website tidak terindex oleh mesin pencari termasuk google maka sitemap akan dapat membantu Anda dalam memberitahu mesin pencari terkait halaman tersebut sehingga akan dapat terindex dengan baik.

Sitemap sangatlah berguna untuk sebuah website yang baru. Umumnya, sebuah website baru tidak memiliki banyak backlink pada halaman – halamannya dan hal tersebut sangat menyulitkan mesin pencari dalam menemukan semua halaman – halaman yang ada di dalam website tersebut. Sitemap dapat membantu mesin pencari dalam melakukan crawl atau menelusuri website lebih efisien. Untuk sebuah website yang populer, sitemap juga dapat membantu website tersebut berinteraksi dengan mesin pencari menjadi lebih baik. Mesin pencari dapat mengetahui seberapa sering website diperbarui kontennya dan pada bagian mana konten yang sering diperbarui dan kemudian menentukan rata-rata crawl pada website dan lain – lain. Hal ini akan sangat membantu website akan ditampilkan di mesin pencari lebih baik lagi. Pembuatan sitemap ini sendiri akan sangat mudah kalau menggunakan CMS. Misal tidak menggunakan CMS seperti WordPress atau plugin untuk membuat sitemap maka bisa membuatnya secara online dengan bantuan layanan gratis dari situs XML-Sitemaps.

(48)

A2. Pembuatan Navigasi Link

Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web, navigasi dianggap penting agar user yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam website. Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website Biasanya, pada sebuah website, navigasi tertampil pada menu dan link yang terstruktur. Seringkali, saat membuka sebuah website, merasa kesal karena tidak mendapatkan halaman website yang dicari dikarenakan navigasi yang ruwet dan tidak jelas.

Selain itu dapat diartikan, Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting. Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya. Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun (vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak, tergantung kebutuhan dari situs tersebut. Navigasi dapat dibuat juga menggunakan teks atau gambar.

Pada pengembangan aplikasi berbasis web, tentunya dalam membuat lebih dari satu halaman web, bahkan bisa ratusan jika aplikasi yang dibangun kompleks. Oleh karenanya navigasi adalah fitur yang harus disediakan. Navigasi berfungsi untuk berpindah dari satu halaman ke halaman yang lain pada suatu aplikasi berbasis web, yang juga digunakan untuk memberikan informasi lokasi halaman yang sedang dibuka. Fungsi dari menu navigasi untuk mempermudah pembaca saat melihat ataupun melakukan pencarian suatu label/judul yang ada di blog yang dikunjunginya. Ada beberapa manfaat dari menu navigasi, yaitu :

1. Mempercepat Untuk Mendapatkan Sitelink.

Dengan adanya menu navigasi maka blog/web semakin cepat mendapatkan sitelink karena sebagian dari beberapa sitelinknya berasal dari menu navigasi.

(49)

2. Dinilai Sebagai Web Profesional karena telah menyusun rapih semua informasi dan telah mengatur sekat antara informasi konten satu dengan lainnya serta telah mengatur web menjadi user friendly karena dengan mudah para pengunjung untuk menjelajahi web dan dengan mudah mengunggah daya tarik pengunjung.

3. Dinilai baik oleh mesin pencari google karena telah memudakan pengunjung web maka dari itu google akan menilai lebih pada website tersebut

Gambar 8.1 Menu navigasi pada website

A3. Pemeriksaan konten website

Konten website berisi informasi dalam bentuk teks, gambar, video, dan animasi. Pemeriksaan konten website perlu dilakukan terkait konsistensi tampilan web, performansi web, serta aksesibilitas website. Oleh sebab itu setelah website selesai dikembankan perlu diuji pada beberapa browser, sehingga dapat terlihat apakah website tersebut sudah sesuai keinginan user. Sebaiknya website yang telah dihosting didaftarkan pada mesin pencari google, sehingga website tersebut dapat dikunjungi oleh banyak pengunjung melalui google dan juga pemeriksaan konten website dapat menggunakan fasilitas yang tersedia pada mesin pencari google. Tujuan Google adalah memberikan hasil yang sangat relevan untuk setiap kueri. Hasil penelusuran dikembalikan dari indeks

(50)

penelusuran google. Indeks penelusuran google terus berkembang secara konstan karena penambahan dan pengubahan konten di web. Konten yang berubah, serta pembaharuan pada algoritma peringkat kami, dapat menyebabkan URL berpindah posisi di hasil penelusuran, dan dapat terhapus meskipun kemungkinannya kecil.

Google memahami bahwa perubahan tersebut dapat membingungkan. Jika situs web ditautkan dengan baik dari situs lain di web, google mungkin akan menambahkannya lagi di penjelajahan situs web berikutnya. Meskipun google tidak dapat menjamin bahwa setiap laman dapat muncul secara konsisten dalam indeks google atau muncul dengan peringkat tertentu. Pedoman Webmaster google menawarkan kiat yang bermanfaat untuk mempertahankan situs agar terus ramah-perayap. Dengan mengikuti saran ini, maka kemungkinan kemunculan situs web secara konsisten dalam hasil penelusuran google akan semakin tinggi. Jika situs web tidak muncul dalam hasil penelusuran Google, atau semakin rendah tingkat kemunculannya, lakukan langkah-langkah berikut ini untuk mengidentifikasi dan memperbaiki kemungkinan penyebab masalahnya.

• Periksa apakah situs web ada di Google indeks

• Lihat apakah situs web telah dipengaruhi oleh tindakan spam manual • Pastikan Google dapat menemukan dan merayapi situs web

• Pastikan Google dapat mengindeks situs web • Pastikan konten website berguna dan relevan

B. Keterampilan yang diperlukan dalam Membuat Navigasi

Membuat navigasi memerlukan keterampilan pengoperasian internet dan pemrograman web.

C. Sikap kerja yang diperlukan dalam Membuat Navigasi Harus bersikap secara:

(51)

DAFTAR PUSTAKA

A. Buku Referensi

a. Dwi Wahyu Widiastuti, 2017, Modul Diklat Rekayasa Perangkat Lunak, PPPPTK BMTI, Bandung

B. Referensi Lainnya

a. Brian Miller (2011), :”Above The Fold: Understanding The Principles of Successful Web Site Design”, How Books, Ohio.

b. Gary B Selly, H. Albert Napier, and Ollie N Rivers (2009), ”Web Design: Introductory Concepts and Techniques”, Course Technology, Massachusets. c. Jon Duckett (2011), ”HTML and CSS: Design and Build Websites”,John Wiley &

Sons Inc, Indianapolis.

d. Robert Hoekman, (2008), ”Designing the Moment: Web Interface Design Concepts in Action”, New Riders, Berkeley.

e. Robin Nixon (2012), ”Learning PHP, MYSQL, Javascript, and CSS: A Step by Ste p

Guide To Creating Dynamic Websites”,Oreilly, USA.

f. Bogdan Brinzarea and Cristian Darie, (2009), AJAX and PHP: Building Modern Web Applications 2nd Edition, , PACKT Publishing, 2009, Birmingham, UK g. Blerton Abazi , (2017), Learn PHP and MySQL with AJAX in a weekend:

Practical guide for quick learn on PHP programming and MySQL Database management, USA

(52)

DAFTAR ALAT DAN BAHAN

A. Daftar Peralatan/Mesin

No. Nama Peralatan/Mesin Keterangan

1. Laptop, infocus, laserpointer Untuk di ruang teori 2. Laptop/PC Untuk setiap peserta 3. 4. 5. 6. 7. B. Daftar Bahan

No. Nama Bahan Keterangan

1. Kertas HVS A4 @20 Lembar Setiap peserta 2. 3. 4. 5. 6. 7. 8. 9.

(53)

DAFTAR PENYUSUN

No. Nama Profesi

1. Dwi Wahyu Widiastuti, ST., MT. 1. Widyaiswara

2. 2.

(54)

(55)

BUKU KERJA

MENERAPKAN

WEB AUTHORING TOOL

PADA

WEB CLIENT

ICTWEB410

(56)

Judul Modul: Menerapkan Web Authoring Tool pada Web client

Buku Kerja - Versi 2018 Halaman: Halaman 2 dari 63

PENJELASAN UMUM

Pengembangan Keprofesian Berkelanjutan berbasis kompetensi mengharuskan proses pelatihan memenuhi unit kompetensi secara utuh yang terdiri atas pengetahuan, keterampilan, dan sikap kerja. Dalam buku kerja Menerapkan Web authoring tool Pada Web client telah disampaikan informasi apa saja yang diperlukan sebagai pengetahuan yang harus dimiliki untuk melakukan praktik/keterampilan terhadap unit kompetensi tersebut. Setelah memperoleh pengetahuan dilanjutkan dengan latihan-latihan guna mengaplikasikan pengetahuan yang telah dimiliki tersebut. Untuk itu diperlukan buku kerja Menerapkan Web authoring tool Pada Web client ini sebagai media praktik dan sekaligus mengaplikasikan sikap kerja yang telah ditetapkan karena sikap kerja melekat pada keterampilan. Adapun tujuan dibuatnya buku kerja ini adalah:

1. Prinsip pelatihan berbasis kompetensi dapat dilakukan sesuai dengan konsep yang telah digariskan, yaitu pelatihan ditempuh elemen kompetensi per elemen kompetensi, baik secara teori maupun praktik;

2. Prinsip praktik dapat dilakukan setelah dinyatakan kompeten teorinya dapat dilakukan secara jelas dan tegas;

3. Pengukuran unjuk kerja dapat dilakukan dengan jelas dan pasti.

Ruang lingkup buku kerja ini meliputi pengerjaan tugas-tugas teori dan praktik per elemen kompetensi dan kriteria unjuk kerja berdasarkan SKKNI Sektor Teknologi Informasi dan Komunikasi Sub Sektor Programmer Komputer. Ruang lingkup buku kerja ini meliputi pengerjaan tugas-tugas teori dan praktik per elemen kompetensi dan kriteria unjuk kerja berdasarkan SKKNI Sektor Teknologi Informasi dan Komunikasi Sub Sektor Programmer Komputer.

(57)

DAFTAR ISI

DAFTAR ISI ... 3 BAB I ... 4 TUGAS TEORI DAN PRAKTIK ... 4 A. Membuat file web client ... 4 1. Tugas Teori I ... 4 2. Tugas Praktik I ... 6 B. Membuat Format Template Web client ... 9 1. Tugas Teori II ... 9 C. Menetapkan Penggunaan Library ... 19 1. Tugas Teori III ... 19 2. Tugas Praktik III ... 21 D. Mengembangkan Template web client ... 27 1. Tugas Teori IV ... 27 2. Tugas Praktik IV ... 29 E. Mengidentifikasi kebutuhan web authoring tool ... 40 1. Tugas Teori V ... 40 2. Tugas Praktik V ... 42 F. Membuat Form ... 45 1. Tugas Teori VI ... 45 2. Tugas Praktik VI ... 47 G. Membuat Navigasi ... 55 1. Tugas Teori VII ... 55 2. Tugas Praktik VII ... 57 BAB II ... 63 CEK LIS TUGAS ... 63

(58)

BAB I

TUGAS TEORI DAN PRAKTIK

A. Membuat file web client 1. Tugas Teori I

Perintah : Jawablah soal di bawah ini Waktu Penyelesaian : 10 menit

Soal :

1.1 Bagaimana cara membuat dan menyimpan file web client pada folder yang tepat? 1.2 Bagaimana cara memasukkan dan mengatur format teks sesuai kebutuhan? 1.3 Jelaskan cara memasukkan dan mengoptimalkan gambar sesuai kebutuhan!

KUNCI JAWABAN

1.1 Cara membuat dan menyimpan file web client: • Buat folder untuk penyimpanan file web client • Buat file web client menggunakan web editor • Simpan file web client pada folder web client 1.2 Cara memasukkan dan mengatur format teks:

• Buat file index.php pada folder web client

• Masukkan kode html pengaturan format teks misalnya <font type=”verdana” size=12>Ini web saya</font> atau

pengaturan font melalui instruksi CSS external

• Jika menggunakan CSS external harus dihubungkan dengan file index.php

1.3 Cara memasukkan dan mengoptimalkan gambar:

• Memasukkan gambar pada web dengan instruksi html <img src>

• Mengoptimalkan gambar menggnakan tool image editing misalnya photoshop

• Mengoptimalkan gambar menggunakan instruksi CSS 3 atau instruksi html