modul - kemdikbud...modul pelatihan berbasis kompetensi sektor teknologi informasi dan komunikasi...

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

Modul Pelatihan Berbasis Kompetensi

Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa Perangkat Lunak

Kode Modul

ICTWEB410

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])

Copyright © 2018

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.



Kode Modul

ICTWEB410



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,

Prof. Dr. Irwan, M.Pd



Kode Modul

ICTWEB410



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

3. BUKU PENILAIAN ............................................................................................................................ 21



Kode Modul

ICTWEB410



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



Kode Modul

ICTWEB410



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



Kode Modul

ICTWEB410



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

Menggunakan software

spesifik dan bahasa 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

Prioriti dan monitor

pekerjaan Memecahkan

permasalahan operasional Menganalisa kebutuhan

bisnis dan aspek teknis dari implementasi perangkat lunak Merancang form Mengoperasikan

software, memilih tool



Kode Modul

ICTWEB410



sesuai kebutuhan, membuat kode HTML


Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa Perangkat Lunak Kode Modul ICTWEB410

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

Modul Pelatihan Berbasis Kompetensi Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa Perangkat Lunak

Kode Modul ICTWEB410

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

Halaman 10 dari 21

• Harus tepat dan teliti

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 external

• Tepat

• Teliti

15 30




Halaman 11 dari 21

2.2 Define styles for the required tags, according to the business requirements

(mendefinisikan tampilan web sesuai

kebutuhan)

• Dapat

menjelaskan CSS yang diperlukan

sesuai

kebutuhan • Mampu

membuat CSS

sesuai kebutuhan

• Harus tepat dan

teliti

CSS untuk website client

Mampu membuat CSS untuk web

client

• Tepat

• Teliti

15 30

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

• Harus tepat dan

teliti

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

• Teliti

15 30




Halaman 12 dari 21

dibutuhkan pada 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)


cara membuat

dan memberi

Pembuatan

dan

pemberian nama library

Mampu membuat

dan memberi

nama library

• Tepat

• Teliti

15 30




Halaman 13 dari 21

nama library 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


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)


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




Halaman 14 dari 21

terhubung dengan CSS

external

• Harus tepat dan

teliti

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


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


sesuai

kebutuhan


Penempatan

gambar pada web client

• Mampu

menempatkan


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




Halaman 15 dari 21

• Mampu

memodifikasi template web

client


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)


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


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




Halaman 16 dari 21

5.3 Customise and navigate, the web author tool environment or workspace, to meet

individual requirements (Mengubah navigasi

lingkungan kerja web authoring tool sesuai kebutuhan)

• Dapat

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

Pengaturan navigasi

lingkungan

kerja web authoring tool

• Mampu

mengubah navigasi

lingkungan

kerja web authoring tool

sesuai kebutuhan

• Tepat

• Teliti

15 30

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


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

(Mendefinisikan nama website dan root folder) • Dapat

menjelaskan

Pendefinisian

dan • Mampu

mendefinisikan • Tepat

• Teliti

15 30




Halaman 17 dari 21

cara mendefinisikan

dan memberi

nama website client pada root

folder

• Mampu mendefinisikan

dan memberi nama website

client pada root

folder


pemberian nama web

client

dan memberi 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


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




Halaman 18 dari 21

sesuai kebutuhan form

• Mampu

menambah

menambah field sesuai kebutuhan

form


kebutuhan form

sesuai 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

• Harus tepat dan

teliti

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


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

• Teliti

15 30




Halaman 19 dari 21

• Harus tepat dan

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

• Harus tepat dan

teliti

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 of different browsers, and browser versions, to

• Dapat

menejlaskan cara

Pengujian konten

Mampu menguji konten website

• Tepat

• Teliti

15 30




Halaman 20 dari 21

ensure consistency of presentation, performance and accessibility (menguji konten website pada

beberapa browser untuk memastikan

konsistensi tampilan web, performance, dan akses website)

menguji konten 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


website mencakup

presentasi,

performance, dan

aksesbilitas

pada beberapa browser

mencakup

konsistensi tampilan web,

performance, dan aksesbilitas




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

BUKU INFORMASI

Menerapkan Web Authoring Tools pada Web Client

ICTWEB410




GOWA

Modul Pelatihan Berbasis Kompetensi Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa

Perangkat Lunak


Judul Modul: Menerapkan Web Authoring Tool pada Web Client 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


Perangkat Lunak



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


Perangkat Lunak



B. Referensi Lainnya .............................................................................................. 28

DAFTAR ALAT DAN BAHAN ...................................................................................... 29

A. Daftar Peralatan/Mesin ...................................................................................... 29

B. Daftar Bahan ...................................................................................................... 29

DAFTAR PENYUSUN ................................................................................................. 30


Perangkat Lunak



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


Perangkat Lunak



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)

7. Create simple navigation (Membuat Navigasi)


Perangkat Lunak



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

berinteraksi dengan dokumen dengan cara tertentu, contohnya klik sebuah tombol.


Perangkat Lunak



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 Layout web client

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


Perangkat Lunak



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.


Perangkat Lunak



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.

Gambar 3.1 Contoh Layout Web


Perangkat Lunak



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>


Perangkat Lunak



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


1. Tepat;

2. Teliti.


Perangkat Lunak



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():

https://en.wikipedia.org/wiki/John_Resig

http://jquery.com/

https://www.duniailkom.com/wp-content/uploads/2015/12/Halaman-Home-jquery.com-asli.png


Perangkat Lunak



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


1. Tepat;

2. Teliti.


Perangkat Lunak



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

https://filloshop.com/features


Perangkat Lunak



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


1. Tepat;

2. Teliti.


Perangkat Lunak



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 .


Perangkat Lunak



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.


Perangkat Lunak



• 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


1. Tepat;

2. Teliti.


Perangkat Lunak



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

name="name"


Perangkat Lunak



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


Perangkat Lunak



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

https://id.wikipedia.org/wiki/Standar

https://id.wikipedia.org/wiki/Web

https://id.wikipedia.org/wiki/Program_komputer

https://id.wikipedia.org/wiki/HTML


https://id.wikipedia.org/wiki/Program

https://id.wikipedia.org/wiki/Basis_data

https://id.wikipedia.org/wiki/Teknologi

https://id.wikipedia.org/wiki/Dunia

https://id.wikipedia.org/wiki/Tahun

https://id.wikipedia.org/wiki/1990

https://id.wikipedia.org/wiki/CERN

https://id.wikipedia.org/wiki/Tool

https://id.wikipedia.org/wiki/Bahasa_C

https://id.wikipedia.org/wiki/Bahasa

https://id.wikipedia.org/wiki/Pertama

https://id.wikipedia.org/wiki/Apache_HTTP_Server

https://id.wikipedia.org/wiki/Komunitas

https://id.wikipedia.org/wiki/Internet

https://id.wikipedia.org/wiki/Bahasa_C

https://id.wikipedia.org/wiki/Perl

https://id.wikipedia.org/wiki/Python

https://id.wikipedia.org/wiki/PHP

https://id.wikipedia.org/wiki/UNIX

https://id.wikipedia.org/wiki/Linux

https://id.wikipedia.org/wiki/Informasi


https://id.wikipedia.org/wiki/Berkas:CGI_common_gateway_interface.png


Perangkat Lunak



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


1. Tepat;

2. Teliti.

https://id.wikipedia.org/wiki/Keamanan

https://id.wikipedia.org/wiki/Kata_kunci

https://id.wikipedia.org/wiki/Password

https://id.wikipedia.org/wiki/Memori

https://id.wikipedia.org/wiki/CPU


Perangkat Lunak



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.

https://www.xml-sitemaps.com/


Perangkat Lunak



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.


Perangkat Lunak



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

https://support.google.com/webmasters/answer/answer.py?answer=70897

http://1.bp.blogspot.com/-6PDsTxwDJ6I/VSp0LBtkeNI/AAAAAAAAAE4/Lw5PWztOkQo/s1600/index.png


Perangkat Lunak



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


1. Tepat;

2. Teliti.


https://support.google.com/webmasters/answer/7643011



https://support.google.com/webmasters/answer/34444?hl=id#1

https://support.google.com/webmasters/answer/34444?hl=id#spam





Perangkat Lunak



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 Step 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

https://www.amazon.com/AJAX-PHP-Building-Modern-Applications/dp/1847197728/ref=sr_1_1?s=books&ie=UTF8&qid=1519762257&sr=1-1&keywords=php+ajax&dpID=511FHtGFg3L&preST=_SX218_BO1,204,203,200_QL40_&dpSrc=srch


https://www.amazon.com/Cristian-Darie/e/B001ILIC82/ref=sr_ntt_srch_lnk_1?qid=1519762257&sr=1-1


https://www.amazon.com/Learn-PHP-MySQL-AJAX-weekend/dp/1545378886/ref=sr_1_2?s=books&ie=UTF8&qid=1519762257&sr=1-2&keywords=php+ajax&dpID=41tUUk2AaUL&preST=_SY291_BO1,204,203,200_QL40_&dpSrc=srch





Perangkat Lunak



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.


Perangkat Lunak



DAFTAR PENYUSUN

No. Nama Profesi

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

2. 2.

3. 3.

BUKU KERJA

MENERAPKAN WEB AUTHORING TOOL PADA WEB CLIENT

ICTWEB410




GOWA


Perangkat Lunak


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.


Perangkat Lunak



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


Perangkat Lunak



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


Perangkat Lunak



Lembar Evaluasi Tugas Teori Membuat file web client

Semua kesalahan harus diperbaiki terlebih dahulu sebelum ditandatangani.

No. Benar Salah

1.

2.

Apakah semua pertanyaan Tugas Teori Membuat file web client dijawab

dengan benar dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



2. Tugas Praktik I

Elemen Kompetensi : membuat file web client

a. Waktu Penyelesaian : 15 menit

b. Capaian Unjuk Kerja :

Setelah menyelesaikan tugas membuat file web client peserta mampu:

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

c. Daftar Alat/Mesin dan Bahan : NO NAMA BARANG SPESIFIKASI KETERANGAN

A. ALAT

1. Personal komputer Core i5, HDD 200 GB,

2. printer Laserjet HP P1102

3. Pulpen Ballpoint hitam

4.

B. BAHAN

1. Kertas Kertas A4

2. Tinta printer Catridge HP P 1102

3. Software Microsoft Office 2013 Microsoft Office 2013

4. Sofware XAMPP XAMPP 3.2.2

5. Software Adobe Dreamweaver Adobe dreamweaver CS 6

d. Indikator Unjuk Kerja (IUK):

1) Mampu membuat dan menyimpan file web client

2) Mampu membuat text dengan berbagai format text sesuai kebutuhan

3) Mampu melakukan insert dan optimize gambar

e. Keselamatan dan Kesehatan Kerja

Keselamatan dan kesehatan kerja yang perlu dilakukan pada waktu

melakukan praktik kerja ini adalah:

i. Bertindak berdasarkan sikap kerja yang sudah ditetapkan sehingga

diperoleh hasil seperti yang diharapkan, jangan sampai terjadi

kesalahan karena ketidak-telitian dan tidak taat asas.


Perangkat Lunak



ii. Waktu menggunakan komputer, printer, dan alat lainnya

mengikuti petunjuknya masing-masing yang sudah ditetapkan.

f. Standar Kinerja

iii. Dikerjakan selesai tepat waktu, waktu yang digunakan tidak lebih

dari yang ditetapkan.

iv. Toleransi kesalahan 5% dari hasil yang harus dicapai, tetapi

bukan pada kesalahan kegiatan kritis.

g. Tugas

Abstraksi Tugas Praktik I

SMK Indonesia Raya akan menerapkan system informasi akademik berbasis

web. Buatlah file index.php sebagai file web client menggunakan adobe

dreamweaver.

h. Instruksi Kerja

Setelah membaca abstraksi nomor g selanjutnya ikuti instruksi kerja

sebagai berikut:

a. Siapkan komputer

b. Aktifkan XAMPP 3.2.2

c. Aktifkan localhost

d. Buat folder di drive d , beri nama folder tersebut webclient

e. Buka adobe dreamweaver CS 6

f. Klik menu file, klik new, simpan file dengan nama index.php pada

folder webclient

Daftar Cek Unjuk Kerja Tugas I

NO DAFTAR

TUGAS/INSTRUKSI POIN YANG

DICEK

PENCAPAIAN PENILAIAN

YA TIDAK K BK

1. Siapkan komputer Komputer aktif

2. Aktifkan XAMPP 3.2.2 Xampp aktif

3. Aktifkan localhost Localhost dapat berjalan pada browser


Perangkat Lunak



4. Buat folder di drive d ,

beri nama folder

tersebut webclient

Folder webclient ada di drive d

5. Buka adobe

dreamweaver CS 6

Adobe dreamweaver aktif

6. Klik menu file, klik new,

simpan file dengan

nama index.php pada

folder webclient

File index.php tersimpan pada folder webclient

Apakah semua instruksi kerja tugas praktik Membuat file web client dengan

benar dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



B. Membuat Format Template Web client

1. Tugas Teori II



Soal :

2.1 Bagaimana cara membuat Cascading style sheets (CSS) external ?

2.2 Jelaskan cara mendefinisikan tampilan web sesuai kebutuhan !

2.3 Bagaimana cara menghubungkan CSS ke file web ?

KUNCI JAWABAN

2.1 Cara membuat Cascading style sheets (CSS) external yaitu membuat file css,

misalnya style.css, yang berisi semua selector, property dan value untuk


2.2 Cara mendefinisikan tampilan web sesuai kebutuhan yaitu:

• Tentukan tema web misalnya web sekolah

• Buat struktur menu web

• Tentukan informasi apa saja yang ingin ditampilkan pada web tersebut

• Tentukan layout web sesuai tema

1.3 Cara menghubungkan CSS ke file web dapat dilakukan dengan 3 cara yaitu :

• Menggunakan inline CSS yaitu instruksi CSS ditulis pada tag html

• Menggunakan internal CSS yaitu instruksi CSS menyatu dengan file html

• Menggunakan external CSS yaitu instruksi CSS duat pada file terpisah

lalu dihubunkan dengan file web menggunakan instruksi <link rel

type=text/css href=namafile.css>


Perangkat Lunak



Lembar Evaluasi Tugas Teori Membuat format template web client


No. Benar Salah

1.

2.

Apakah semua pertanyaan Tugas Teori membuat format template web

client dijawab dengan benar dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



2. Tugas Praktik II

Elemen Kompetensi : membuat format template web client



Setelah menyelesaikan tugas membuat format template web client peserta

mampu:

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

c. Daftar Alat/Mesin dan Bahan : NO NAMA BARANG SPESIFIKASI KETERANGAN A. ALAT

5. Personal komputer Core i5, HDD 200 GB, 6. printer Laserjet HP P1102 7. Pulpen Ballpoint hitam 8.

B. BAHAN 6. Kertas Kertas A4 7. Tinta printer Catridge HP P 1102 8. Software Microsoft Office 2013 Microsoft Office 2013 9. Sofware XAMPP XAMPP 3.2.2 10. Software Adobe Dreamweaver Adobe dreamweaver

CS 6


1) Mampu membuat CSS external 2) Mampu membuat CSS sesuai kebutuhan 3) Mampu membuat link CSS ke file HTML 4) Mampu menampilkan pengaturan style web menggunakan CSS








Perangkat Lunak





f. Standar Kinerja





g. Tugas

Abstraksi Tugas Praktik II


web. Buatlah format template web client menggunakan CSS dan HTML.

h. Instruksi Kerja


sebagai berikut:

a. Siapkan komputer



d. Buat folder CSS pada folder webclient

e. Buka adobe dreamweaver CS 6

f. Klik menu file, klik new, klik CSS, simpan file dengan nama style.css

pada folder CSS

g. Buat file CSS external seperti berikut ini.

@charset "utf-8";

/* CSS Document */

#header

{background-color:#993399;

margin-left:auto;

margin-right:auto;

width:800px;


Perangkat Lunak



height:180px;

padding:5px;

}

.menu

{background-color:#99FFFF;

margin-left:auto;

margin-right:auto;

width:800px;

height:20px;

padding:5px;

}

#content

{background-color:#00FFFF;

margin-left:auto;

margin-right:auto;

width:800px;

height:350px;

padding:5px;

}

#kiri

{background-color:#FFFF00;

width:25%;

height:100%;

float:left;

padding:0px;

}


Perangkat Lunak



#kanan

{background-color:#33CC00;

width:75%;

height:100%;

float:right;

padding:0px;

}

#footer

{background-color:#99FFCC;

margin-left:auto;

margin-right:auto;

width:800px;

height:50px;

padding:5px;

}

h. Buka file index.php lalu ketikkan kode seperti berikut ini.

<!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

/> <title>SMK Indonesia</title> <meta content='width=device-width, initial-scale=1, maximum-

scale=1' name='viewport'/> <style type="text/css"> /*ini css untuk responsive web*/ @media screen and (max-width: 3000px){ /* CSS styles */ }


Perangkat Lunak



@media screen and (max-width: 1300px){ /* CSS styles */ } @media screen and (max-width: 1024px){ /* CSS styles */ } @media screen and (max-width: 992px){ /* CSS styles */ } @media screen and (max-width:880px){ /* CSS styles */ } @media screen and (max-width:768px){ /* CSS styles */ } @media screen and (max-width:600px){ /* CSS styles */ } @media screen and (max-width:480px){ /* CSS styles */ } @media screen and (max-width:320px){ /* CSS styles */ } @media screen and (max-width:240px){ /* CSS styles */ } </style> <link href="css/style2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"><img src="gambar/banner.jpg" width="801"

height="181"></div> <div class="menu"><a href="home.html"

target="tengah">Home</a> | <a href="visi.html" target="tengah">Visi Misi</a> |<a href="paket.html" target="tengah"> Paket Keahlian</a> | <a href="eskul.html" target="tengah">Eskul Siswa</a> <a href="artikel.html" target="tengah">| Galery Foto</a> | <a href="artikel.html" target="tengah">Artikel</a> |<a href="registrasi.html" target="tengah"> Registrasi User</a></div>

<div id="content"><div id="kiri"> <form name="form1" method="post" action=""> <table width="196" border="0"> <tr>


Perangkat Lunak



<td colspan="3"><div align="center"><strong>LOGIN USER</strong></div></td>

</tr> <tr> <td width="86">Username</td> <td width="6">:</td> <td width="90"><input name="username" type="text"

id="username" size="15" maxlength="10"></td> </tr> <tr> <td>Password</td> <td>:</td> <td><input name="password" type="password" id="password"

size="15" maxlength="10"></td> </tr> <tr> <td colspan="3"><div align="center"> <input type="submit" name="button" id="button"

value="login"> </div></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3"><div align="left"><img src="gambar/10.jpg"

width="180" height="129"></div></td> </tr> <tr> <td colspan="3"> </td> </tr> </table> </form> </div><div id="kanan"><a href="gambar/Parapassa.swf"

target="tengah"> <iframe frameborder="0" name="tengah" scrolling="auto"

width="600px" height="350px"></iframe> </a></div></div> <div id="footer"> <div align="center"><strong>Copyright SMK INDONESIA @2016

Powered By CSS 3 dan HTML 5</strong></div> </div> </body> </html>


Perangkat Lunak



i. Jalankan file index.php pada browser dengan cara ketik

localhost/webclient, maka kan terlihat tampilan website seperti

berikut ini.

Daftar Cek Unjuk Kerja Tugas II

NO DAFTAR


DICEK


YA TIDAK K BK

1. Siapkan komputer Computer aktif

2. Aktifkan XAMPP 3.2.2 XAMPP aktif

3. Aktifkan localhost Localhost aktif

4. Buat folder CSS pada

folder webclient

Folder CSS ada pada folder webclient

5. Buka adobe

dreamweaver CS 6

Adobe dreamweaver CS 6 aktif

6. Klik menu file, klik new,

klik CSS, simpan file

dengan nama style.css

pada folder CSS

File style.css tersimpan pada folder CSS


Perangkat Lunak



7. Buat source code CSS

external seperti berikut

ini.

Source code CSS style.css dibuat dan tersimpan

8 Buat souce code

index.php

Source code index.php dibuat dan tersimpan

9 Jalankan file index.php

pada browser

File index.php berjalan sesuai fungsinya

Apakah semua instruksi kerja tugas praktik Mengidentifikasi data yang berkaitan

dengan penyelenggaraan pelatihan dilaksanakan dengan benar dengan waktu

yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



C. Menetapkan Penggunaan Library

1. Tugas Teori III



Soal :

3.1 Jelaskan pengertian library pada aplikasi web !

3.2 Berikan 2 contoh library yang sering digunakan pada aplikasi web!

3.3 Bagaimana cara memeriksa jquery telah berjalan ?

3.4 Bagaimana cara menggunakan jquery pada aplikasi web ?

3.5 Bagaimana cara mengubah jquery yang digunakan pada website sesuai

kebutuhan ?

KUNCI JAWABAN

3.1 Pengertian library pada aplikasi web yaitu library adalah kumpulan dari berbagai

fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi

3.2 Dua contoh library yang digunakan pada aplikasi web yaitu jquery, Library 2.0

3.3 Cara memeriksa jquery telah berjalan yaitu menjalankan file web yang ada jquery

pada browser, misalnya jquery untuk membuat slider banner, maka dilihat apakah

slider banner sudah berjalan ssuai fungsinya

3.4 Cara menggunakan jquery pada aplikasi web yaitu download jquery yang

diinginkan dari jquery.com, lalu file jquery yang berekstension .js digunakan pada

file php atau html, seperti contoh berikut ini.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar jQuery Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> // kode JavaScript dan jQuery disini // kode JavaScript dan jQuery disini // kode JavaScript dan jQuery disini // kode JavaScript dan jQuery disini </script> </head>


Perangkat Lunak



<body> </body> </html>

3.5 Cara mengubah jquery yang digunakan pada website sesuai kebutuhan yaitu

mengubah source code jquery.js sesuai kebutuhan website

Lembar Evaluasi Tugas Teori Menetapkan Penggunaan Library


No. Benar Salah

1.

2.

Apakah semua pertanyaan Tugas Teori menetapkan penggunaan library

dijawab dengan benar dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



2. Tugas Praktik III

Elemen Kompetensi : menetapkan penggunaan library



Setelah menyelesaikan tugas menetapkan penggunaan library peserta

mampu:

3.1 Mengidentifikasi komponen web termasuk library pada beberapa

halaman web

3.2 Mengatur format komponen web yang dipilih sesuai pengaturan CSS

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


A. ALAT




4. Koneksi internet Koneksi wifi atau kabel

B. BAHAN

1. Kertas Kertas A4






1) Mampu membuat komponen web dan library yang dibutuhkan pada web

page

2) Mampu membuat instruksi CSS untuk pengaturan komponen web yang

dipilih

3) Mampu memeriksa source code dari komponen web yang dipilih

4) Mampu membuat dan memberi nama libray komponen web


Perangkat Lunak



5) Mampu mengubah komponen web yang ada pada library sesuai kebutuhan









f. Standar Kinerja





g. Tugas

Abstraksi Tugas Praktik III


web. Tampilan website pada halaman index ingin ditambahkan slider banner.

Buatlah slider banner tersebut menggunakan jquery yang ditambahkan pada

file index.php yang telah dibuat pada tugas praktik II.

h. Instruksi Kerja


sebagai berikut:

a. Siapkan komputer



d. Buka file style.css yang telah dibuat pada tugas praktik II, lalu

tambahkan source code CSS berikut ini.


Perangkat Lunak




Perangkat Lunak



e. Buka file index.php yang telah dibuat pada tugas praktik II, lalu

tambahkan source code berikut ini

f. Tambahkan kode berikut ini pada file index.php

g. Jalankan file index.php pada browser maka akan terlihat banner

slider


Perangkat Lunak



Daftar Cek Unjuk Kerja Tugas III

NO DAFTAR


DICEK


YA TIDAK K BK

1. Siapkan komputer Computer aktif

2. Aktifkan XAMPP 3.2.2 XAMPP aktif

3. Aktifkan localhost Localhost aktif

4. Buka file style.css yang telah dibuat pada tugas praktik II, lalu tambahkan source code CSS untuk pengaturan slider banner

Source code CSS untuk pengaturan slider banner dibuat

5. Buka file index.php yang

telah dibuat pada tugas

praktik II lalu tambahkan

source code pemanggilan

CSS untuk pengaturan

slider banner

source code pemanggilan CSS untuk pengaturan slider banner dibuat pada index.php

6. Buka file index.php lalu

tambahkan jquery untuk

pengaturan slider banner

jquery untuk pengaturan slider banner dibuat pada index.php

7 Jalankan file index.php

pada browser

File index.php berjalan sesuai fungsinya dan terlihat slider banner


Perangkat Lunak



Apakah semua instruksi kerja tugas praktik Menetapkan penggunaan library

dilaksanakan dengan benar dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



D. Mengembangkan Template web client

1. Tugas Teori IV



Soal :

4.1 Jelaskan tahapan membuat template web client menggunakan CSS external

4.2 Bagaimana cara mengatur template web client menggunakan bootstrap ?

4.3 Jelaskan tahapan menempatkan gambar dalam halaman web !

4.4 Bagaimana cara mengubah template website menggunakan bootsrap?

KUNCI JAWABAN

4.1 Tahapan membuat template web client menggunakan CSS external yaitu:

• Membuat layout web client

• Membuat file css external misal style.css

• Menyimpan file css external pada folder tertentu

• Menghubungkan file css external dengan file index website

4.2 Cara mengatur template web client menggunakan bootstrap yaitu

• Download template bootstrap pada situs penyedia bootstrap

• Menambahkan source code menghubungkan bootstrap dengan index

web pada file index

4.3 Tahapan menempatkan gambar dalam halaman web yaitu:

• Melakukan image editing menggunakan software image editing

• Melakukan optimasi gambar dengan software image editing supaya tidak

terlalu besar ukuran filenya

• Menyimpan file gambar pada folder tertentu

• Menggunakan code html <img src=gambar.jpg> untuk penempatan

gambar pada halman web

4.4 Cara mengubah template website menggunakan bootsrap yaitu

• Membuka file style.css pada template bootsrap

• Mengubah source code style.css sesuai kebutuhan website


Perangkat Lunak



Lembar Evaluasi Tugas Teori Mengembangkan template web client


No. Benar Salah

1.

2.

Apakah semua pertanyaan Tugas Teori Mengembangkan template web

client dijawab dengan benar dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



2. Tugas Praktik IV

Elemen Kompetensi : mengembangkan template web client



Setelah menyelesaikan tugas mengembangkan template web client

peserta mampu:

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


A. ALAT




4.

B. BAHAN

1. Kertas Kertas A4






1) Mampu membuat dan menyimpan template web client yang terhubung

dengan CSS external

2) Mampu mengatur template web client

3) Mampu menempatkan gambar pada halaman web sesuai kebutuhan

4) Mampu memodifikasi template web client

5) Mampu memilih web authoring tool sesuai kebutuhan

6) Dapat menjelaskan cara mengatur lingkungan kerja termasuk file

transfer ptotocol (ftp) sesuai kebutuhan web authoring tool


Perangkat Lunak











f. Standar Kinerja





g. Tugas

Abstraksi Tugas Praktik IV

SMK Indonesia Raya akan menerapkan sistem informasi akademik berbasis

web. Buatlah template web client menggunakan bootstrap

h. Instruksi Kerja


sebagai berikut:

1. Silahkan download source code bootstrap di situs resminya getbootstrap.com

2. Download jquery di jquery.com atau library google. karena bootstrap tidak

menyediakan jquery dalam paketan source code-nya. Jquery ini digunakan

untuk menjalankan komponen-komponen bawaan bootstrap seperti modal

dialog, navigation agar berjalan dengan normal.

3. Pastikan sudah punya code editor seperti notepad++, dreamweaver atau

Sublime Text yang nanti akan digunakan untuk membuat template website

dengan bootstrap.

4. Aktifkan localhost

5. Buat sebuah folder di htdocs dengan nama template

6. Buka folder template dan buatlah sebuah folder baru dengan

nama assets dan satu buah file dengan nama index.php

http://getbootstrap.com/

http://jquery.com/

https://developers.google.com/speed/libraries/#jquery


Perangkat Lunak



7. Buatlah dua folder baru di dalam folder assets dengan

nama bootstrap dan jquery. Dimana hasil download-an bootstrap akan

diekstrak di folder bootstrap yang baru dibuat dan hasil download-an jquery

diletakkan di folder jquery yang baru dibuat. Tambahkan dua file baru

yaitu style.css dan custom.js. Pembuatan struktur direktori websitenya

adalah sebagai berikut :

1. htdocs/

|-- template/

| |-- assets/

| | | --bootstrap/

| | | ├── css/

| | | │ ├── bootstrap.css

| | | │ ├── bootstrap.css.map

| | | │ ├── bootstrap.min.css

| | | │ ├── bootstrap-theme.css

| | | │ ├── bootstrap-theme.css.map

| | | │ └── bootstrap-theme.min.css

| | | ├── js/

| | | │ ├── bootstrap.js

| | | │ └── bootstrap.min.js

| | | └── fonts/

| | | ├── glyphicons-halflings-regular.eot

| | | ├── glyphicons-halflings-regular.svg

| | | ├── glyphicons-halflings-regular.ttf

| | | ├── glyphicons-halflings-regular.woff

| | | └── glyphicons-halflings-regular.woff2

| | |-- jquery/

| | | |-- jquery.min.js

| | |-- style.css

| | |-- custom.js

| |-- index.php

8. Buat file index.php lalu ketikkan source code berikut ini:

<!DOCTYPE

html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Membuat Template Website Bootstrap</title>

Perangkat Lunak





<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">









<link href="assets/style.css" rel="stylesheet">

</head>

<body>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



<script src="assets/jquery/jquery.min.js"></script>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>



<script src="assets/custom.js"></script>

</body>

</html>

9. Langkah berikutnya adalah membuat layout website dengan bootstrap bagian

header, content dan sidebar serta footer dengan menambahkan kode berikut ini

di atas komentar 

<div class="row">

Perangkat Lunak



<div class="col-md-12 header" id="site-header">



</div>

</div>





<div class="row">

<div class="col-md-8 articles" id="site-content">



</div>

<div class="col-md-4 sidebar" id="site-sidebar">



</div>

</div>





<div class="row">

<div class="col-md-12 footer" id="site-footer">



</div>

</div>



</div>

10. mengisi bagian header dengan mengganti komentar  dengan

kode berikut :

<header>

<h1 class="title-site">Belajar Bootstrap</h1>

<p class="description">Belajar Membuat Template Website Dengan Bootstrap</p>

</header>

<nav class="menus">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Portfolio</a></li>

</ul>

</nav>

Perangkat Lunak



11. mengisi kolom konten dengan mengganti komentar  dengan

kode berikut :

<article class="posts">

<h2 class="title-post">Lorem ipsum dolor sit amet</h2>

<div class="meta-post">

<span><em class="glyphicon glyphicon-user"></em> Onphpid</span>

<span><em class="glyphicon glyphicon-time"></em> 13 Juni 2015</span>

</div>

<div class="content">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Officiis nisi veniam quibusdam amet, odit, odio consectetur ratione quod,

cupiditate repellendus voluptatum. Laudantium tempora,

neque quo ex aspernatur veritatis sequi incidunt.</p>









</div>

</article>

12. pada kolom sidebar silahkan ganti komentar  dengan kode

berikut :

<aside

class="widgets">

<h3 class="widget-title">Latest Posts</h3>

<ul>

<li><a href="#">Lorem Ipsum</a></li>





</ul>

</aside>

13. bagian footer silahkan ganti <!– isi footer –> dengan kode berikut :


Perangkat Lunak



<footer class=”copyright text-center”><p>© 2017 KEAHLIAN GANDA RPL

</p></footer>

14. Buat file style.css, lalu ketikkan kode berikut ini.

body

{

background-color: #e5e5e5;

}

.meta-post {

font-size: 12px;

margin-bottom: 10px;

}

.header header {

background-color: #fff;

padding: 10px 20px;

}

nav.menus {

background-color: #e74c3c;

padding: 10px;

}

nav.menus ul {

margin: 0;

padding: 0;

}

nav.menus ul li {

display: inline-block;

}

nav.menus ul li a {

display: block;

padding: 3px 7px;

color: #fff;

}

nav.menus ul li a:hover, nav.menus ul li a:focus{

text-decoration: none;

background-color: #c0392b;

color: #fff;

}


Perangkat Lunak



article.posts {

padding: 10px 20px;


margin-top: 20px;

}

aside.widgets {

padding: 10px 20px;

margin-top: 20px;


}

aside.widgets ul {

margin:0;

padding:0;

}

aside.widgets li {

list-style: none;

padding: 0;

margin:0;

}

.widget-title {

border-bottom: 4px solid #E74C3C;

padding-bottom: 4px;

}

footer.copyright {

padding: 10px 20px;

font-size: 12px;

}

15. Jalankan file index.php, sehinga terlihat tampilan seperti gambar berikut ini.


Perangkat Lunak



Daftar Cek Unjuk Kerja Tugas IV

NO DAFTAR


DICEK


YA TIDAK K BK

1. Download bootstrap di

getbootstrap.com Komputer aktif

2. Download jquery di

jquery.com Jquery diminf


4. Buat sebuah folder di htdocs dengan nama template

Folder template terletak di folder htdocs

5. Buka folder template dan buatlah sebuah folder baru dengan nama assets dan satu buah file dengan nama index.php

Folder asset terletak pada file index

6. Buka folder template dan buatlah sebuah folder baru dengan nama assets dan satu buah file dengan nama index.php

Folder asset dibuat , file index dibuat

7. Buatlah dua folder baru di dalam folder assets dengan nama bootstrap dan jquery.

Dua folder dengan nama

Perangkat Lunak



Dimana hasil download-an bootstrap akan diekstrak di folder bootstrap yang baru dibuat dan hasil download-an jquery diletakkan di folder jquery yang baru dibuat.

bootstrap dan jquery dibuat

8. Buat source code file index.php

Source code file index.php dibuat

9. Buat source code layout website dengan bootstrap bagian header, content dan sidebar serta footer

source code layout website dengan bootstrap bagian header, content dan sidebar serta footer dibuat

10 Buatlah source code bagian header dengan mengganti

komentar 

source code bagian header dibuat

11 Buatlah source code bagian konten dengan mengganti

komentar 

source code bagian konten dibuat

12 Buatlah source code bagian sidebar dengan mengganti

komentar 

source code bagian sidebar dibuat

13 Buatlah source code bagian footer dengan mengganti

komentar 

source code bagian footer dibuat

14 Buat style.css

15 Jalankan index.php File index tampil seperti berikut ini

Apakah semua instruksi kerja tugas praktik Mengembangkan template web

client dengan benar dengan waktu yang telah ditentukan?


Perangkat Lunak



YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



E. Mengidentifikasi kebutuhan web authoring tool

1. Tugas Teori V



Soal :

5.1 Jelaskan pengertian web authoring tool

5.2 Berikan contoh 2 web authoring tool

5.3 Bagaimana cara menampilkan property elemen web pada adobe dreamweaver?

5.4 Bagaimana cara membuka file index.php pada adobe dreamweaver?

5.5 Bagaimana cara menyimpan file web pada adobe dreamweaver ?

KUNCI JAWABAN

5.1 Web authoring tool merupakan suatu software untuk melakukan proses

pembuatan , mengubah dan mengatur konten yang ada di dalam suatu web

5.2 Contoh web authoring tool yaitu Adobe Dreamweaver CS 6, Notepad ++

5.3 Cara menampilkan property elemen web yaitu klik kanan elemen web

tersebut, klik properties

5.4 Cara membuka file index yaitu klik menu file , klik open, pilih file index.php

5.5 Menyimpan file web dilakukan dengan cara klik file save as, beri nama file,

klik save


Perangkat Lunak



Lembar Evaluasi Tugas Teori Membuat file web client


No. Benar Salah

1.

2.

Apakah semua pertanyaan Tugas Teori Membuat file web client dijawab


YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



2. Tugas Praktik V

Elemen Kompetensi : Mengidentifikasi kebutuhan web authoring tool



Setelah menyelesaikan tugas mengidentifikasi kebutuhan web authoring

tool peserta mampu:

5.1 Memilih web authoring tool sesuai kebutuhan

5.2 Mengatur lingkungan kerja termasuk file transfer ptotocol (ftp) sesuai


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


A. ALAT




4.

B. BAHAN

1. Kertas Kertas A4






1) Mampu memilih web authoring tool sesuai kebutuhan

2) Mampu mengatur lingkungn kerja web authoring tool termasuk ftp

3) Mampu mengubah navigasi lingkungan kerja web authoring tool sesuai

kebutuhan


Perangkat Lunak



4) Mampu memilih tombol dan tool, termasuk membuka dan menutupnya untuk

akses semua fitur web client

5) Mampu mendefinisikan dan memberi nama website client pada root folder









f. Standar Kinerja





g. Tugas

Abstraksi Tugas Praktik V


web. Web developernya menggunakan adobe dreamweaver sebagai web

authoring tool . Lakukan identifikasi adobe dreamweaver sebagai web authoring

tool mencakup semua fitur menu file

h. Instruksi Kerja


sebagai berikut:

a. Siapkan komputer



d. Buka adobe dreamweaver CS 6

e. Klik menu file, amati semua fitur menu file pada adobe dreamweaver


Perangkat Lunak



f. Buatlah laporan tentang kegunaan semua fitur menu file pada adobe

dreamweaver

Daftar Cek Unjuk Kerja Tugas V

NO DAFTAR


DICEK


YA TIDAK K BK




4. Buka adobe dreamweaver CS 6

adobe dreamweaver CS 6 aktif

5. Klik menu file, amati semua fitur menu file pada adobe dreamweaver

Semua fitur menu file diamati kegunaannya

6. Buatlah laporan tentang kegunaan semua fitur menu file pada adobe dreamweaver

Laporan dibuat menggunakan MS word

Apakah semua instruksi kerja tugas praktik Mengidentifikasi web authoring tool


YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



F. Membuat Form 1. Tugas Teori VI



Soal :

6.1 Jelaskan kegunaan elemen form pada halaman web client

6.2 Berikan contoh 2 elemen form pada pembuatan form registrasi user

6.3 Berikan contoh 3 field yang harus ada pada form registrasi user

6.4 jelaskan pengertian Common Gateway Interface

6.5 Bagaimana cara membuat form menggunakan CGI

6.6 Bagaimana cara menguji error code form registrasi user?

KUNCI JAWABAN

6.1 kegunaan elemen form yaitu untuk inputan dan pengolahan data dengan

berbagai tipe input missal textfield, radio button, dan sebagainya

6.2 Contoh 2 elemen form yaitu textfield, radiobutton

6.3 Tiga field pada form registrasi user yaitu nama user, alamat user, jenis kelamin

6.4 CGI yaitu 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).

6.5 Cara membuat form menggunakan CGI yaitu memadukan penggunaan ajax

dan php pada pembuatan form

6.6 Menguji error code dilakukan dengan cara menjalankan file source code form

missal registrasi.php pada browser lalu amati pesan kesalhan error code dan

perbaiki error tersebut




https://id.wikipedia.org/wiki/HTML


https://id.wikipedia.org/wiki/Program



Perangkat Lunak



Lembar Evaluasi Tugas Teori Membuat form


No. Benar Salah

1.

2.

Apakah semua pertanyaan Tugas Teori Membuat form dijawab dengan benar

dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



2. Tugas Praktik VI Elemen Kompetensi : Membuat Form



Setelah menyelesaikan tugas membuat form peserta mampu:

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

c. Daftar Alat/Mesin dan Bahan :

NO NAMA BARANG SPESIFIKASI KETERANGAN

A. ALAT




4.

B. BAHAN

1. Kertas Kertas A4






1) Mampu menambah elemen form pada web client

2) Mampu mengatur property setiap elemen form

3) Mampu menambah field sesuai kebutuhan form

4) Mampu mengidentifikasi CGI script

5) Mampu membuat koneksi form menggunakan CGI script

6) Mampu melakukan pengujian kesalahan kode code form


Perangkat Lunak











f. Standar Kinerja





g. Tugas

Abstraksi Tugas Praktik VI


web. Sistem ini mencakup form registrasi user dengan field iduser,nama, email,

password

h. Instruksi Kerja


sebagai berikut:

a. Siapkan komputer


c. Aktifkan localhost/phpmyadmin

d. Buka adobe dreamweaver CS 6 atau notepad ++

e. Buat database pada phpmyadmin dengan nama "db_latihan".

Selanjutnya buat tabel dengan nama "siswa" lalu jalankan script ini di

phpmyadmin . Tabel dapat dibuat dengan cara isi nama tabelnya lalu

isi fieldnya seprti gambar berikut ini.


Perangkat Lunak



Tabel siswa dapat juga dibuat menggunakan instruksi SQL seperti berikut ini.

1

2

3

4

5

6

7

8

9

10

11

12

CREATE TABLE `mahasiswa` (

`nim` varchar(13) NOT NULL,

ìd_mahasiswa` int(11) NOT NULL,

`nama` varchar(40) NOT NULL,

`jenis_kelamin` enum('P','L') NOT NULL,

àlamat` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `mahasiswa`

ADD PRIMARY KEY (ìd_mahasiswa`);

ALTER TABLE `mahasiswa`

MODIFY ìd_mahasiswa` int(11) NOT NULL AUTO_INCREMENT,

AUTO_INCREMENT=4;

Kemudian tambahkan data pada table siswa sejumlah 3 data, dengan cara klik menu insert lalu isi data seperti gambar berikut ini.


Perangkat Lunak



Pengisian data dapat juga dilakukan dengan cara menggunakan instruksi SQL berikut ini.

1

2

3

4

INSERT INTO `mahasiswa` (`nim`, `id_mahasiswa`, `nama`, `jenis_kelamin`,

`alamat`) VALUES

('A01', 1, 'CHANDIRA RAHADIAN', 'L', 'PPPPTK BMTI'),

('B02', 2, 'FALAH ZAIDAN', 'L', 'PPPPTK BMTI'),

('C03', 3, 'DESI HANDAYANI', 'P', 'PPPPTK BMTI');

f. Buatlah koneksi database koneksi.php yaitu script php untuk

menghubungkan antara database dengan server php.

1

2

3

4

5

6

<?php

// konfigurasi database

$host = "localhost";

$user = "root";

$password = "";

$database = "latihan";


Perangkat Lunak



7

8

9

// perintah php untuk akses ke database

$koneksi = mysqli_connect($host, $user, $password, $database);

?>

g. Buatlah form input data siswa menggunakan script php seperti berikut

ini, lalu simpan dengan nama file form_ajax.php.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html>

<head>

<title>Ajax Jquery - Belajarphp.net</title>

</head>

<body>

<form action="">

<table>

<tr><td>NIM</td><td><input type="text" onkeyup="isi_otomatis()"

id="nim"></td></tr>

<tr><td>NAMA</td><td><input type="text" id="nama"></td></tr>

<tr><td>ALAMAT</td><td><input type="text"

id="alamat"></td></tr>

<tr><td>JENIS KELAMIN</td><td><input type="text"

id="jenis_kelamin"></td></tr>

</table>

</form>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">

function isi_otomatis(){

var nim = $("#nim").val();

$.ajax({

url: 'proses-ajax.php',

data:"nim="+nim ,


Perangkat Lunak



26

27

28

29

30

31

32

}).success(function (data) {

var json = data,

obj = JSON.parse(json);

$('#nama').val(obj.nama);

$('#alamat').val(obj.alamat);

$('#jenis_kelamin').val(obj.jenis_kelamin);

});

}

</script>

</body>

</html>

h. Buatlah file proses_ajax.php untuk memproses input data siswa

menggunakan ajax, seperti source code berikut ini.

1

2

3

4

5

6

7

8

9

10

11

<?php

include 'koneksi.php';

$nim = isset($_GET['nim']);

$query = mysqli_query($koneksi, "select * from mahasiswa where nim='$nim'");

$mahasiswa = mysqli_fetch_array($query);

$data = array(

'nama' => $mahasiswa['nama'],

'alamat' => $mahasiswa['alamat'],

'jenis_kelamin' => $mahasiswa['jenis_kelamin']);

echo json_encode($data);

?>

Script di atas dibuat untuk merespon dari php ke dalam bentuk data JSON, jadi data

dalam bentuk JSON yang akan menampilkan pesan dari hasil input data siswa. Jadi

dalam contoh tersebut, jika nim diisi, maka data nama, alamat, dan jenis kelamin


Perangkat Lunak



akan terlihat secara otomatis sesuai nim yang ada pada database. Berikut ini adalah

tampilan output jika nim diisi dan sesuai dengan nim pada database.

i. Jalankan file form_ajax.php, periksa apakah form berjalan sesuai fungsinya

Daftar Cek Unjuk Kerja Tugas VI

NO DAFTAR


DICEK


YA TIDAK K BK




4. Buka adobe

dreamweaver CS 6 atau

notepad ++

adobe dreamweaver CS 6 atau notepad ++ aktif

5. Buat database pada

phpmyadmin dengan

nama "db_latihan".

database pada phpmyadmin dengan nama "db_latihan" dibuat

6. Selanjutnya buat tabel

dengan nama "siswa"

lalu isi 3 data siswa

Tabel siswa dibuat dan diisi 3 data siswa

7. Buat koneksi.php yaitu

script untuk

mengkoneksikan antara

Koneksi.php dibuat


Perangkat Lunak



database dengan server

php

8. Buat file form_input.php

File form_input.php dibuat dan tidak ada error code

9. Buat file proses_ajax.php

file proses_ajax.php dibuat dan tidak ada error code

11. Jalnkan file

form_input.php, periksa

apakah form berjalan

sesuai fungsinya

File form_input.php berjalan di browser, tidak ada error code, form berjalan sesuai fungsinya

Apakah semua instruksi kerja tugas praktik Membuat form dengan benar


YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



G. Membuat Navigasi

1. Tugas Teori VII



Soal :

7.1 Jelaskan pengertian sitemap

7.2 Jelaskan kegunaan menu navigasi pada website

7.3 Bagaimana cara menguji semua link web menggunakan beberapa browser

7.4 Bagaimana cara menguji konten website menggunakan fasilitas google

KUNCI JAWABAN

7.1 Sitemap adalah daftar halaman dari sebuah website yang dapat diakses oleh

semua pengguna internet baik mesin pencari maupun pengunjung web.

7.2 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.

7.3 buka google chrome dan mozilla, klik semua menu yang ada pada website

7.4 Cara menguji konten website meggunakan google












Perangkat Lunak



Lembar Evaluasi Tugas Teori Membuat navigasi


No. Benar Salah

1.

2.

Apakah semua pertanyaan Tugas Teori Membuat navigasi dijawab dengan

benar dengan waktu yang telah ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



2. Tugas Praktik VII

Elemen Kompetensi : membuat navigasi



Setelah menyelesaikan tugas membuat navigasi peserta mampu:

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

konsistensi tampilan web, performance, dan akses website

c. Daftar Alat/Mesin dan Bahan :

NO NAMA BARANG SPESIFIKASI KETERANGAN

A. ALAT




4.

B. BAHAN

1. Kertas Kertas A4






1) Mampu membuat site map

2) Mampu membuat link antar web page menggunakan link berupa text dan gambar

3) Mampu menguji link web page pada beberapa browser

4) Mampu menguji konten website pada beberapa browser mencakup konsistensi

tampilan web, performance, dan aksesbilitas



Perangkat Lunak










f. Standar Kinerja





g. Tugas

Abstraksi Tugas Praktik I


web. Lakukan modifikasi menu pada file index.php yang telah dibuat pada tugas

praktik II. Modifikasi menu ini dilakukan pada file style.css menggunakan

instruksi CSS 3 untuk pembuatan menu drop down

h. Instruksi Kerja


sebagai berikut:

a. Siapkan komputer



d. Buka file style.css yang telah dibuat pada tugas praktik II

e. Tambahkan source code menu pada file style.css seperti berikut ini

@charset "utf-8";

/* CSS Document */

/*Strip the ul of padding and list styling*/

ul {

list-style-type:none;

margin:0;

padding:0;


Perangkat Lunak



position: absolute;

}

/*Create a horizontal list with spacing*/

li {

display:inline-block;

margin-right: 1px;

}

/*Style for menu links*/

li a {

display:block;

min-width:140px;

height: 30px;

text-align: center;

line-height: 20px;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

color: #fff;

background: #C0791E;


}

li.active a {

background-color: #63390A;

}

/*Hover state for top level links*/

li:hover a {

background: #63390A;

}

/*Style for dropdown links*/

li:hover ul a {

background: #DCB679;

color: #2f3036;

height: 30px;

line-height: 20px;

}

/*Hover state for dropdown links*/

li:hover ul a:hover {

background: #63390A;

color: #fff;

}

/*Hide dropdown links until they are needed*/

li ul {

display: none;

}

/*Make dropdown links vertical*/

li ul li {

display: block;

float: none;

}

/*Prevent text wrapping*/


Perangkat Lunak



li ul li a {

width: auto;

min-width: 100px;

padding: 0 20px;

}

/*Display the dropdown on hover*/

ul li a:hover + .hidden, .hidden:hover {

display: block;

}

/*Style 'show menu' label button and hide it by default*/

.show-menu {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;


color: #fff;

background: #11A092;

text-align: center;

padding: 10px 0;

display: none;

}

/*Hide checkbox*/

input[type=checkbox]{

display: none;

-webkit-appearance: none;

}

/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu{

display: block;

}

/*Responsive Styles*/

@media screen and (max-width : 760px){

/*Make dropdown links appear inline*/

ul {

position: static;

display: none;

}

/*Create vertical spacing*/

li {

margin-bottom: 1px;

}

/*Make all menu links full width*/

ul li, li a {

width: 100%;

}

/*Display 'show menu' link*/

.show-menu {

display:block;

}


Perangkat Lunak



f. simpan file dengan nama style2.css pada folder css

g. Buka file index.php lakukan penambahan source code pemanggilan

menu drop down pada style2.css, lalu simpan dengan nama

index2.php

h. Jalankan file index2.php pada browser chrome dan mozilla, amati

apakah navigasi menu drop down berjalan sesuai fungsinya.

Daftar Cek Unjuk Kerja Tugas VII

NO DAFTAR


DICEK


YA TIDAK K BK




4. Buka file style.css yang

telah dibuat pada tugas

praktik II

File style.css yang telah dibuat pada tugas praktik II aktif

5. Lakukan modifikasi source

code menu drop down

pada file style.css

Modifikasi source code menu drop down pada style.css

6. simpan file dengan nama

style2.css pada folder css

File style2.css tersimpan pada folder css dan tidak ada error code

7. Buka file index.php

lakukan penambahan

source code pemanggilan

File index.php ditambahkan source code pemanggilan


Perangkat Lunak



menu drop down pada

style2.css, lalu simpan

dengan nama index2.php

css menu drop down yang ada pada file style2.css dan tersimpan dengan nama index2.php

8. Jalankan index2.php pada

browser chrome dan

mozilla

Index2.php berjalan sesuai fungsinya, semua menu drop down dapat dijalankan pada chrome dan mozilla

Apakah semua instruksi kerja tugas praktik Membuat navigasi dengan benar


YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak



BAB II

CEK LIS TUGAS

NO TUGAS UNJUK KERJA PENILAIAN

TANGGAL K BK

1. Membuat file web client

2. Membuat format template web client

3. Menetapkan penggunaan library

4. Mengembangkan template web client

5. Mengidentifikasi kebutuhan web authoring tool

6. Membuat form

7. Membuat Navigasi

Apakah semua tugas unjuk kerja Menerapkan Web authoring tool pada Web

client telah dilaksanakan dengan benar dan dalam waktu yang telah

ditentukan?

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:

BUKU PENILAIAN

MENERAPKAN WEB AUTHORING TOOL PADA WEB CLIENT

ICTWEB410




GOWA


Perangkat Lunak

Kode Modul

ICTWEB410

Judul Modul: Menerapkan Web Authoring Tool Pada Web Client Buku Penilaian - Versi 2018 Halaman: 2 dari 14

PENJELASAN UMUM

Buku penilaian untuk unit kompetensi Menerapkan Web Authoring Tool pada

Web Client dibuat sebagai konsekuensi logis dalam pelatihan berbasis kompetensi

yang telah menempuh tahapan penerimaan pengetahuan, keterampilan, dan sikap

kerja melalui buku informasi dan buku kerja. Setelah latihan-latihan (exercise)

dilakukan berdasarkan buku kerja maka untuk mengetahui sejauh mana kompetensi

yang dimilikinya perlu dilakukan uji komprehensif secara utuh per unit kompetensi dan

materi uji komprehensif itu ada dalam buku penilaian ini.

Adapun tujuan dibuatnya buku penilaian ini, yaitu untuk menguji kompetensi peserta

pelatihan setelah selesai menempuh buku informasi dan buku kerja secara

komprehensif dan berdasarkan hasil uji inilah peserta akan dinyatakan kompeten atau

belum kompeten terhadap unit kompetensi Menerapkan Web Authoring Tool

pada Web Client. Metoda Penilaian yang dilakukan meliputi penilaian dengan opsi

sebagai berikut:

1. Metoda Penilaian Pengetahuan

a. Tes Tertulis

Untuk menilai pengetahuan yang telah disampaikan selama proses pelatihan

terlebih dahulu dilakukan tes tertulis melalui pemberian materi tes dalam bentuk

tertulis yang dijawab secara tertulis juga. Untuk menilai pengetahuan dalam

proses pelatihan materi tes disampaikan lebih dominan dalam bentuk obyektif

tes, dalam hal ini jawaban singkat, menjodohkan, benar-salah, dan pilihan

ganda. Tes essay bisa diberikan selama tes essay tersebut tes essay tertutup,

tidak essay terbuka, hal ini dimaksudkan untuk mengurangi faktor subyektif

penilai.

b. Tes Wawancara

Tes wawancara dilakukan untuk menggali atau memastikan hasil tes tertulis

sejauh itu diperlukan. Tes wawancara ini dilakukan secara perseorangan antara

penilai dengan peserta uji/peserta pelatihan. Penilai sebaiknya lebih dari satu

orang.


Perangkat Lunak

Kode Modul

ICTWEB410


2. Metoda Penilaian Keterampilan

a. Tes Simulasi

Tes simulasi ini digunakan untuk menilai keterampilan dengan menggunakan

media bukan yang sebenarnya, misalnya menggunakan tempat kerja tiruan

(bukan tempat kerja yang sebenarnya), obyek pekerjaan disediakan atau hasil

rekayasa sendiri, bukan obyek kerja yang sebenarnya.

b. Aktivitas Praktik

Penilaian dilakukan secara sebenarnya, di tempat kerja sebenarnya dengan

menggunakan obyek kerja sebenarnya.

3. Metoda Penilaian Sikap Kerja

a. Observasi

Untuk melakukan penilaian sikap kerja digunakan metoda observasi terstruktur,

artinya pengamatan yang dilakukan menggunakan lembar penilaian yang sudah

disiapkan sehigga pengamatan yang dilakukan mengikuti petunjuk penilaian

yang dituntut oleh lembar penilaian tersebut. Pengamatan dilakukan pada waktu

peserta uji/peserta pelatihan melakukan keterampilan kompetensi yang dinilai

karena sikap kerja melekat pada keterampilan tersebut.


Perangkat Lunak

Kode Modul

ICTWEB410


DAFTAR ISI

PENJELASAN UMUM ................................................................................... 2

DAFTAR ISI ............................................................................................... 4

BAB I PENILAIAN TEORI ............................................................................ 5

A. Lembar Penilaian Teori ............................................................... 5

B. Ceklis Penilaian Teori ................................................................... 6

BAB II PENILAIAN PRAKTIK ....................................................................... 7

A. Lembar Penilaian Praktik ............................................................. 7

B. Ceklis Aktivitas Praktik ................................................................ 8

BAB III CEKLIS PENILAIAN SIKAP KERJA ..................................................... 10

A. Penilaian Sikap Kerja .................................................................. 10

LAMPIRAN ................................................................................................. 11

Lampiran 1. Kunci Jawaban ........................................................................ 12


Perangkat Lunak

Kode Modul

ICTWEB410


BAB I

PENILAIAN TEORI

A. Lembar Penilaian Teori

Unit Kompetensi : …………………………………………

Diklat : …………………………………………

Waktu : 60 menit

PETUNJUK UMUM

1. Jawablah materi tes ini pada lembar jawaban/kertas yang sudah disediakan.

2. Modul terkait dengan unit kompetensi agar disimpan.

3. Bacalah materi tes secara cermat dan teliti.

Essay

Jawablah pertanyaan-pertanyaan di bawah ini dengan jelas dan benar!

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!

2.1 Bagaimana cara membuat Cascading style sheets (CSS) external ?

2.2 Jelaskan cara mendefinisikan tampilan web sesuai kebutuhan !

2.3 Bagaimana cara menghubungkan CSS ke file web ?

3.1 Jelaskan pengertian library pada aplikasi web !

3.2 Berikan 2 contoh library yang sering digunakan pada aplikasi web!

3.3 Bagaimana cara memeriksa jquery telah berjalan ?

3.4 Bagaimana cara menggunakan jquery pada aplikasi web ?

3.5 Bagaimana cara mengubah jquery yang digunakan pada website sesuai

kebutuhan ?

4.1 Jelaskan tahapan membuat template web client menggunakan CSS external

4.2 Bagaimana cara mengatur template web client menggunakan bootstrap ?

4.3 Jelaskan tahapan menempatkan gambar dalam halaman web !


Perangkat Lunak

Kode Modul

ICTWEB410


4.4 Bagaimana cara mengubah template website menggunakan bootsrap?

5.1 Jelaskan pengertian web authoring tool

5.2 Berikan contoh 2 web authoring tool

5.3 Bagaimana cara menampilkan property elemen web pada adobe dreamweaver?

5.4 Bagaimana cara membuka file index.php pada adobe dreamweaver?

5.5 Bagaimana cara menyimpan file web pada adobe dreamweaver ?

6.1 Jelaskan kegunaan elemen form pada halaman web client

6.2 Berikan contoh 2 elemen form pada pembuatan form registrasi user

6.3 Berikan contoh 3 field yang harus ada pada form registrasi user

6.4 jelaskan pengertian Common Gateway Interface

6.5 Bagaimana cara membuat form menggunakan CGI

6.6 Bagaimana cara menguji error code form registrasi user?

7.1 Jelaskan pengertian sitemap

7.2 Jelaskan kegunaan menu navigasi pada website

7.3 Bagaimana cara menguji semua link web menggunakan beberapa browser

7.4 Bagaimana cara menguji konten website menggunakan fasilitas google

A. Ceklis Penilaian Teori

NO.

KUK

NO.

SOAL KUNCI JAWABAN JAWABAN PESERTA

PENILAIAN KETERANGAN

K BK

Isian

A.1

A.2

A.3

B-S

B.1

B.2

B.3

PG

C.1

C.2

C.3

Essay

D.1 Terlampir

D.2 Terlampir


Perangkat Lunak

Kode Modul

ICTWEB410


BAB II PENILAIAN PRAKTIK

A. Lembar Penilaian Praktik

Tugas Unjuk Kerja Menerapkan Web Authoring Tool pada Web Client

1. Waktu : 180 menit

2. Alat : laptop, printer, hechmachine, penjepit kertas

3. Bahan : program pelatihan, modul pelatihan, kalender, rencana

jam pembinaan/jadwal pelatihan,kertas HVS A4, penjepit

kertas, klip, staples, tinta printer. pensil, sign pen merah,

software adobe dreamweaver, software XAMPP 3.2.2,

software notepad ++

4. Indikator Unjuk Kerja

1. Mampu Membuat file web client

2. Mampu Membuat format template web client

3. Mampu Menetapkan penggunaan library

4. Mampu Mengembangkan template web client

5. Mampu Mengidentifikasi kebutuhan web authoring tool

6. Mampu Membuat form

7. Mampu Membuat Navigasi

5. Standar Kinerja

a. Selesai dikerjakan tidak melebihi waktu yang telah ditetapkan.

b. Toleransi kesalahan 5% (lima persen), tetapi tidak pada aspek kritis.

6. Instruksi Kerja

Abstraksi tugas:

SMK Indonesia Raya akan membuat web sekolah. Dalam system ini ada web

client yang memuat berbagai informasi yang dapat diakses oleh pengunjung

website. Terkait hal tersebut lakukan beberapa hal berikut ini.

a) Buatlah template web client menggunakan css external dan php

b) Buatlah slider banner menggunakan jquery


Perangkat Lunak

Kode Modul

ICTWEB410


c) Buatlah semua link menu navigasi mencakup home, data guru, data

siswa. Data guru mencakup nip, nama, email, jenis kelamin. Data siswa

mencakup nis,nama,email,jenis kelamin.

d) Buatlah form registrasi user mencakup iduser,nama,email, password

menggunakan ajax dan php

B. Ceklis Aktivitas Praktik

Kode Unit Kompetensi : ICTWEB410

Judul Unit Kompetensi : Menerapkan Web Authoring Tool pada Web Client

Nama Peserta/Asesi : ......................................................................................

INDIKATOR UNJUK KERJA TUGAS HAL-HAL YANG DIAMATI

PENILAIAN

K BK

1. Mampu

Membuat file

web client

1.1 Membuat file index.php

1.2 Menyimpan file

index.php

• File index php dibuat

• File index.php disimpan pada

folder nama peserta

2. Mampu

Membuat format

template web

client

2.1 Membuat format

template web pada file style.css

2.2 File style.css tersimpan pada

folder css

• File style.css dibuat

• File style.css disimpan pada folder css

3. Mampu

Menetapkan

penggunaan

library

3.1 Mendownload jquery slider

pada situs jquery.com

3.2 Menambahkan jquey pada

index.php

• jquery slider pada situs

jquery.com didownload

• jquery pada index.php ditambahkan

4. Mampu

Mengembangkan

template web

client

4.1 Memodifikasi template web

client

menggunakan css external

dengan menambah CSS

animasi gambar

4.2 Memadukan file css dengan

index.php

• File style.css dimodifikasi untuk

menambah animasi gambar

• File style.css diapdukan dengan index.php


Perangkat Lunak

Kode Modul

ICTWEB410


5. Mampu

Mengidentifikasi

kebutuhan web

authoring tool

5.1 Menggunakan

Adobe dreamweaver

untuk membuat

file web client 5.2 Menggunakan

notepad ++ untuk membuat

file web client

• Adobe dreamweaver digunakan untuk coding

• Notepad ++ digunakan

untuk coding

6. Mampu

Membuat form

6.1 Membuat form registrasi user

6.2 Menggunakan ajax dan php

• Form registrasi user

mencakup iduser,nama,email,password

• Form dibuat menggunakan

ajax dan php

7. Mampu Membuat Navigasi

7.1 Membuat menu drop down

menggunakan CSS

7.2 File style.css disimpan dengan

nama style2.css

• Menu dropdown dibuat

menggunakan CSS3

• File style2.css tersimpan pada folder css

Catatan :

……………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………

Tanda Tangan Perserta Pelatihan : ………………………………………

Tanda Tangan Instruktur : ………………………………………


Perangkat Lunak

Kode Modul

ICTWEB410


BAB III

PENILAIAN SIKAP KERJA

CEKLIS PENILAIAN SIKAP KERJA

Mengaplikasikan web authoring tool pada web client

INDIKATOR UNJUK KERJA

NO. KUK K BK

KETERANGAN

1. Harus bertindak cermat, teliti, berpikir evaluatif

1.1, 1.2,1.3, 2.1,2.2,2.3,3.1,3.2,3.3,3.4,3.5,4.1,4.2,4.3,4.4, 4.5, 5.1,5.2,5.3,5.4,5.5,6.1,6.2,6.3,6.4,6.5,6.6,7.1,7.2,

7.3,7.4

2. Harus bertindak cermat,teliti, dan taat asas

1.1, 1.2,1.3, 2.1,2.2,2.3,3.1,3.2,3.3,3.4,3.5,4.1,4.2,4.3,4.4, 4.5, 5.1,5.2,5.3,5.4,5.5,6.1,6.2,6.3,6.4,6.5,6.6,7.1,7.2,

7.3,7.4

3. Harus bertindak cermat, teliti, berpikir analitis dan evaluatif

1.1, 1.2,1.3, 2.1,2.2,2.3,3.1,3.2,3.3,3.4,3.5,4.1,4.2,4.3,4.4, 4.5, 5.1,5.2,5.3,5.4,5.5,6.1,6.2,6.3,6.4,6.5,6.6,7.1,7.2,

7.3,7.4

4. Harus bertindak teliti, akurat, dan memperhatikan SOP

1.1, 1.2,1.3, 2.1,2.2,2.3,3.1,3.2,3.3,3.4,3.5,4.1,4.2,4.3,4.4, 4.5, 5.1,5.2,5.3,5.4,5.5,6.1,6.2,6.3,6.4,6.5,6.6,7.1,7.2,

7.3,7.4

Catatan:

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

Tanda Tangan Peserta : ……………………………………

Tanda Tangan Instruktur : …………………………………


Perangkat Lunak

Kode Modul

ICTWEB410


LAMPIRAN-LAMPIRAN


Perangkat Lunak

Kode Modul

ICTWEB410


LAMPIRAN 1

Kunci Jawaban Penilaian Teori Jawaban Soal Essay

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

2.1 Cara membuat Cascading style sheets (CSS) external yaitu membuat file css,

misalnya style.css, yang berisi semua selector, property dan value untuk


2.2 Cara mendefinisikan tampilan web sesuai kebutuhan yaitu:

• Tentukan tema web misalnya web sekolah

• Buat struktur menu web

• Tentukan informasi apa saja yang ingin ditampilkan pada web tersebut

• Tentukan layout web sesuai tema

2.3 Cara menghubungkan CSS ke file web dapat dilakukan dengan 3 cara yaitu :

• Menggunakan inline CSS yaitu instruksi CSS ditulis pada tag html

• Menggunakan internal CSS yaitu instruksi CSS menyatu dengan file html

• Menggunakan external CSS yaitu instruksi CSS duat pada file terpisah lalu

dihubunkan dengan file web menggunakan instruksi <link rel type=text/css

href=namafile.css>


Perangkat Lunak

Kode Modul

ICTWEB410


3.1 Pengertian library pada aplikasi web yaitu library adalah kumpulan dari berbagai

fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi

3.2 Dua contoh library yang digunakan pada aplikasi web yaitu jquery, Library 2.0

3.3 Cara memeriksa jquery telah berjalan yaitu menjalankan file web yang ada jquery

pada browser, misalnya jquery untuk membuat slider banner, maka dilihat apakah

slider banner sudah berjalan ssuai fungsinya

3.4 Cara menggunakan jquery pada aplikasi web yaitu download jquery yang

diinginkan dari jquery.com, lalu file jquery yang berekstension .js digunakan pada file

php atau html

4.1 Tahapan membuat template web client menggunakan CSS external yaitu:

• Membuat layout web client

• Membuat file css external misal style.css

• Menyimpan file css external pada folder tertentu

• Menghubungkan file css external dengan file index website

4.2 Cara mengatur template web client menggunakan bootstrap yaitu

• Download template bootstrap pada situs penyedia bootstrap

• Menambahkan source code menghubungkan bootstrap dengan index

web pada file index

4.3 Tahapan menempatkan gambar dalam halaman web yaitu:

• Melakukan image editing menggunakan software image editing

• Melakukan optimasi gambar dengan software image editing supaya tidak

terlalu besar ukuran filenya

• Menyimpan file gambar pada folder tertentu

• Menggunakan code html <img src=gambar.jpg> untuk penempatan

gambar pada halman web

4.4 Cara mengubah template website menggunakan bootsrap yaitu

• Membuka file style.css pada template bootsrap

• Mengubah source code style.css sesuai kebutuhan website

5.1 Web authoring tool merupakan suatu software untuk melakukan proses

pembuatan , mengubah dan mengatur konten yang ada di dalam suatu web

5.2 Contoh web authoring tool yaitu Adobe Dreamweaver CS 6, Notepad ++


Perangkat Lunak

Kode Modul

ICTWEB410


5.3 Cara menampilkan property elemen web yaitu klik kanan elemen web tersebut,

klik properties

5.4 Cara membuka file index yaitu klik menu file , klik open, pilih file index.php

5.5 Menyimpan file web dilakukan dengan cara klik file save as, beri nama file, klik

save

6.1 kegunaan elemen form yaitu untuk inputan dan pengolahan data dengan

berbagai tipe input missal textfield, radio button, dan sebagainya

6.2 Contoh 2 elemen form yaitu textfield, radiobutton

6.3 Tiga field pada form registrasi user yaitu nama user, alamat user, jenis kelamin

6.4 CGI yaitu suatu standar untuk menghubungkan berbagai program aplikasi

ke halaman web. CGI mmerupakan sebuah program komputer yang menjadi

7.1 Sitemap adalah daftar halaman dari sebuah website yang dapat diakses oleh

semua pengguna internet baik mesin pencari maupun pengunjung web.

7.2 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.

7.3 buka google chrome dan mozilla, klik semua menu yang ada pada website

7.4 Cara menguji konten website meggunakan google














modul - kemdikbud...modul pelatihan berbasis kompetensi sektor teknologi informasi dan komunikasi...

Documents