MODUL KEAHLIAN GANDA

Mata Pelajaran Reakayasa Perangkat Lunak Sekolah Menengah Kejuruan (SMK)

Kelompok Kompetensi F PEMROGRAMAN WEB

Penulis: Abd. Munif

Direktorat Jenderal Guru dan Tenaga Kependidikan Kementrian Pendidikan dan Kebudayaan Tahun 2017

i

Penulis: 1. ABD Munif,. S.T., Emai: [email protected]

Penelaah: 1.

Sierra Maulida Asrin, S.T [081562783394], Email : [email protected]

2.

Abdul Haliq, S.Pd., M.Pd., [085341259862] Email : [email protected]

3.

Alun Sujjada, S.Kom., M.T [081805040468] Email : [email protected]

Ilustrator : 1. Sierra Maulida Asrin, S.T [081562783394] Email : [email protected] 2. Faizal Reza Nurzeha, A.Md. [085242177945] Email : [email protected] Layouter : 1. Syamsul Hidayat, A.Md. [081355598663] Email : [email protected]

Copyright ©2017 Lembaga Pengembangan dan Pemberdayaan Pendidikan Tenaga Kependidikan Bidang Kelautan Perikanan Teknologi Informasi dan Komunikasi.

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

ii

iii

KATA SAMBUTAN

Peran guru profesional dalam proses pembelajaran sangat penting sebagai kunci keberhasilan belajar siswa. Guru profesional adalah guru yang kopeten

membangun

proses

pembelajaran

yang

baik

sehingga

dapat

menghasilkan pendidikan yang berkualitas. Hal ini tersebut menjadikan guru sebagai komponen yang menjadi fokus perhatian pemerintah pusat maupun pemerintah daerah dalam peningkatan mutu pendidikan terutama menyangkut kopetensi guru. Pengembangan profesionalitas guru melalui program Pembinaan Karir merupakan upaya peningkatan kompetensi untuk semua guru. Sejalan dengan hal tersebut, pemetaan kopetensi guru telah dilakukan melalui uji kompetensi guru (UKG) untuk kompetensi pedagogik dan profesional pada akhir tahun 2015. Hasil UKG menunjukan peta kekuatan dan kelemahan kompetensi guru dalam penguasaan pengetahuan. Peta kompetensi guru tersebut dikelompokan menjadi 10 (sepuluh) kelompok kompetensi. Tindak lanjut pelaksanaan UKG diwujudkan dalam bentuk pelatihan guru paska UKG melalui program Pembinaan Karir. Tujuannya untuk meningkatkan kompetensi guru sebagai agen perubahaan dan sumber belajar utama bagi peserta didik. Program Pembinaan Karir dilaksanakan melalui pola tatap muka, daring (online) dan campuran (blended) tatap muka dengan online. Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan

(PPPPTK),

Lembaga

Pengembangan

dan

Pemberdayaan

Pendidik dan Tenaga Kependidikan Kelautan Perikanan Teknologi Informasi dan Komunikasi (LP3TK KPTK) dan Lembaga Pengembangan dan Pemberdayaan Kepala Sekolah (LP2KS) merupakan Unit Pelaksana Teknis di lingkungan Direktorat Jendral Guru dan Tenaga Kependidikan yang bertanggung jawab dalam mengembangkan perangkat dan melaksanakan peningkaan kompetensi guru sesuai dengan bidangnya. Adapun perangkat pembelajaran yang dikembangkan tersebut adalah modul untuk program Pembinaan Karir muka dan iv

tatap

online untuk semua mata pelajaran dan kelompok kompetensi.

Dengan modul ini diharapkan program memberikan sumbangan yang sangat besar dalam peningkatan kualitas kompetensi guru. Mari kita sukseskan program ini untuk mewujudkan Guru Mulia Karena Karya.

Jakarta, Februari 2017 Direktur Jendral Guru dan Tenaga Kependidikan

Sumarna Surapranata, Ph.D NIP. 195908011985031002

v

KATA PENGANTAR

Profesi guru dan tenaga kependidikan harus dihargai dan dikembangkan sebagai profesi yang bermartabat sebagaimana diamanatkan Undang-Undang Nomor 14 Tahun 2005 tentang Guru dan Dosen. Hal ini dikarenakan guru dan tenaga kependidikan merupakan tenaga profesional yang mempunyai fungsi, peran, dan kedudukan yang sangat penting dalam mencapai visi pendidikan 2025 yaitu “Menciptakan Insan Indonesia Cerdas dan Kompetitif”. Untuk itu guru dan tenaga kependidikan yang profesional wajib melakukan pengembangan keprofesian berkelanjutan. Buku pedoman Pedoman Penyusunan Modul Diklat Pengembangan Keprofesian Berkelanjutan

Bagi

Guru

dan

Tenaga

Kependidikan

untuk

institusi

penyelenggara program pengembangan keprofesian berkelanjutan merupakan petunjuk bagi penyelenggara pelatihan di dalam melaksakan pengembangan modul yang merupakan salah satu sumber belajar bagi guru dan tenaga kependidikan.

Buku

ini

disajikan

untuk

memberikan

informasi

tentang

penyusunan modul sebagai salah satu bentuk bahan dalam kegiatan pengembangan keprofesian berkelanjutan bagi guru dan tenaga kependidikan. Pada kesempatan ini disampaikan ucapan terima kasih dan penghargaan kepada berbagai pihak yang telah memberikan kontribusi secara maksimal dalam mewujudkan buku ini, mudah-mudahan buku ini dapat menjadi acuan dan sumber inspirasi bagi guru dan semua pihak yang terlibat dalam pelaksanaan penyusunan modul untuk pengembangan keprofesian berkelanjutan. Kritik dan saran yang membangun sangat diharapkan untuk menyempurnakan buku ini di masa mendatang. Makassar, Februari 2017 Kepala LPPPTK KPTK Gowa Sulawesi Selatan,

Dr. H. Rusdi, M.Pd, NIP 19650430 199103 1 004

vi

vii

DAFTAR ISI

KATA SAMBUTAN ............................................................................................ iv KATA PENGANTAR ........................................................................................... vi DAFTAR ISI ....................................................................................................... viii DAFTAR TABEL ............................................................................................... xvi PENDAHULUAN .................................................................................................. 1 A. Latar Belakang ........................................................................................... 1 B. Tujuan ........................................................................................................ 2 C. Peta Kompetensi ........................................................................................ 2 D. Ruang Lingkup Penggunaan Modul ............................................................ 3 E. Saran Cara Penggunaan Modul .................................................................. 5 Perangkat Pengembangan Aplikasi Web ............................................................. 9 A. Tujuan Pembelajaran ................................................................................... 9 B. Indikator Pencapaian Kompetensi .............................................................. 9 C. Uraian Materi .............................................................................................. 9 D. Aktifitas Pembelajaran .............................................................................. 11 E. Latihan Soal.............................................................................................. 12 F. Rangkuman .............................................................................................. 12 G. KUNCI JAWABAN .................................................................................... 13 H. Umpan Balik dan Tindak Lanjut ................................................................ 13 Membuat Dokumen HTML ................................................................................. 17 A. Tujuan Pembelajaran ................................................................................. 17 B. Indikator Pencapaian Kompetensi ............................................................ 17 C. Uraian Materi ............................................................................................ 17 D. Aktifitas Pembelajaran .............................................................................. 20 E. Latihan Soal.............................................................................................. 27 F. Rangkuman .............................................................................................. 27 G. Umpan Balik dan Tindak Lanjut ................................................................ 28 Mengatur Tampilan Dokumen HTML dengan CSS ............................................ 31 A. Tujuan Pembelajaran ................................................................................ 31 viii

B. Indikator Pencapaian Kompetensi ............................................................ 31 C. Uraian Materi ............................................................................................ 31 1. Definisi CSS......................................................................................... 31 2. Cara Menerapkan CSS dalam HTML ................................................... 32 D. Aktifitas Pembelajaran .............................................................................. 34 E. Latihan Soal ............................................................................................. 38 F. Rangkuman .............................................................................................. 39 G. Umpan Balik dan Tindak Lanjut ................................................................ 39 Mengenal Dasar Pemrograman PHP ................................................................. 43 A. Tujuan Pembelajaran ................................................................................. 43 B. Indikator Pencapian Kompetensi .............................................................. 43 C. Uraian Materi ............................................................................................ 43 1. Pengenalan PHP dan Web Dinamis..................................................... 43 2. Prinsip-prinsip Dasar Bahasa pemrograman PHP................................ 44 3. Tipe Data ............................................................................................. 46 4. Variabel ............................................................................................... 47 5. Operator .............................................................................................. 48 6. Struktur Kontrol .................................................................................... 49 7. Memasukan kode PHP kedalam Dokumen HTML ............................... 50 D. Aktifitas Pembelajaran .............................................................................. 51 E. Latihan Soal ............................................................................................. 57 F. Kunci Jawaban ......................................................................................... 58 G. Rangkuman .............................................................................................. 58 H. Umpan Balik dan Tindak Lanjut ................................................................ 59 Mengenal Fungsi dan Array dalam PHP. ........................................................... 63 A. Tujuan Pembelajaran ................................................................................. 63 B. Indikator Pencapaian Kompetensi ............................................................ 63 C. Uraian Materi ............................................................................................ 63 1. Fungsi .................................................................................................. 63 2. Array .................................................................................................... 64 D. Aktifitas Pembelajaran .............................................................................. 64 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman .............................................................................................. 71 G. Umpan Balik ............................................................................................. 71 Operasi File pada pemrograman PHP ............................................................... 77 A. Tujuan Pembelajaran ................................................................................. 77 B. Indikator Pencapaian Kompetensi ............................................................ 77

ix

C. Uraian Materi ............................................................................................ 77 1. Menggunakan File................................................................................ 77 2. Menulis ke File ..................................................................................... 78 3. Upload File ........................................................................................... 78 D. Aktifitas Pembelajaran .............................................................................. 79 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman .............................................................................................. 81 G. Umpan Balik ............................................................................................. 82 Penanganan Form Pada PHP ............................................................................ 85 A. Tujuan Pembelajaran ................................................................................ 85 B. Indikator Pencapaian Kompetensi ............................................................ 85 C. Uraian Materi ............................................................................................ 85 1. POST ................................................................................................... 85 2. GET ..................................................................................................... 86 D. Aktifitas Pembelajaran .............................................................................. 86 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman .............................................................................................. 90 G. Umpan Balik ............................................................................................. 90 H. Kunci jawaban .......................................................................................... 90 Mengenal Dasar Pemrograman JavaScript ........................................................ 94 A. Tujuan Pembelajaran ................................................................................. 94 B. Indikator Pencapaian Kompetensi ............................................................ 94 C. Uraian Materi ............................................................................................ 94 1. Pengertian JavaScript .......................................................................... 94 2. Fungsi JavaScript dalam Pemrograman Web ...................................... 94 D. Aktifitas Pembelajaran .............................................................................. 96 1. Pengenalan Pemrograman JavaScript ................................................. 96 2. Pengenalan Event dan Objek Window ................................................. 99 E. Tugas / Studi Kasus ..................................... Error! Bookmark not defined. F. Rangkuman ............................................................................................ 101 G. Umpan Balik ........................................................................................... 102 Membuat Koneksi Database MySQL ............................................................... 107 A. Tujuan Pembelajaran .............................................................................. 107 B. Indikator Pencapaian Kompetensi .......................................................... 107 C. Uraian Materi .......................................................................................... 107 1. Pengertian MySQL ............................................................................. 107 2. PhpMyAdmin ...................................................................................... 108 x

3. Koneksi MySQL pada PHP ................................................................ 108 D. Aktifitas Pembelajaran: Membuat database melalui PhpMyAdmin .......... 109 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 110 G. Umpan Balik ........................................................................................... 111 Operasi Database............................................................................................ 115 A. Tujuan Pembelajaran ............................................................................. 115 B. Indikator Pencapaian Kompetensi .......................................................... 115 C. Uraian Materi .......................................................................................... 115 1. Objek Database ................................................................................. 115 2. SQL (Structure Query Language) ...................................................... 115 3. DLL (Data Definition Language) ......................................................... 116 4. DML (Data Manipulation Langeage)................................................... 116 D. Aktifitas Pembelajaran ............................................................................ 116 1. Membuat Database............................................................................ 116 2. Membuat Tabel .................................................................................. 117 3. Memasukan Data ............................................................................... 117 4. Menyeleksi Data ................................................................................ 118 5. Mengupdate Data .............................................................................. 118 6. Menghapus Data................................................................................ 119 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 120 G. Umpan Balik ........................................................................................... 120 MEMBANGUN

FRONT

END

WEB

MENGGUNAKAN

FRAMEWORK

BOOTSTRAP .................................................................................................. 123 A. Tujuan Pembelajaran ............................................................................. 123 B. Indikator Pencapaian Kompetensi .......................................................... 123 C. Uraian Materi .......................................................................................... 123 1. Definisi Front-End Web ...................................................................... 123 2. Desain Web ....................................................................................... 123 3. Bootstrap Web Framework ................................................................ 125 4. Cara Menggunakan Bootstrap ........................................................... 125 D. Aktifitas Pembelajaran ............................................................................ 126 1. Mendesain Halaman Home, Caruosel dan Menu ............................... 126 2. Mendesain Dashboard Admin ............................................................ 129 3. Mendesain Form Artikel ..................................................................... 131 4. Mendesain Halaman Signin ............................................................... 132 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 133 G. Umpan Balik ........................................................................................... 133 xi

Membangun

Back-end

Application

dengan

konsep

MVC

menggunakan

framework Code Igniter .................................................................................... 138 A. Tujuan Pembelajaran .............................................................................. 138 B. Indikator Pencapaian Kompetensi .......................................................... 138 C. Uraian Materi .......................................................................................... 138 1. Definisi Back-End Web....................................................................... 138 2. Codeigniter......................................................................................... 138 3. Alur Proses Codeigniter ...................................................................... 139 3. Arsitektur MVC (Model View Control) ................................................. 140 D. Aktifitas Pembelajaran ............................................................................ 141 1. Instalasi Codeigniner .......................................................................... 141 2. Controller dan View ............................................................................ 142 3. Model ................................................................................................. 145 4. Membangun form tambah artikel pada halaman admin: ..................... 149 5. Membangun form update artikel pada halaman admin: ...................... 150 6. Membangun perintah untuk hapus artikel ........................................... 151 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 151 Membangun Sistem Autentikasi ....................................................................... 154 A. Tujuan Pembelajaran .............................................................................. 154 B. Indikator Pencapaian Kompetensi .......................................................... 154 C. Uraian Materi .......................................................................................... 154 D. Aktifitas Pembelajaran ............................................................................ 155 1. Identifikasi Kasus ............................................................................... 155 2. Membangun Sistem authentifikasi ...................................................... 155 ....................................................................................................... 156 ....................................................................................................... 156 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 158 G. Umpan Balik ........................................................................................... 158 EVALUASI ......................................................................................... 160 PENUTUP ............................................................................................... 165 A. Kesimpulan ............................................................................................. 165 B. Tindak lanjut ........................................................................................... 165 DAFTAR PUSTAKA ...................................................................................... 167 GLOSARIUM ....................................................................................... 169

xii

xiii

DAFTAR GAMBAR

Gambar 1. Peta kedudukan Modul Pemrograman web dinamis ........................... 2 Gambar 2. Peta materi pokok dan Kegiatan Pembelajaran .................................. 4 Gambar 3. Struktur materi pmrograman web dinamis .......................................... 4 Gambar 4. Web browser Mozile firefox .............................................................. 10 Gambar 5. Mekanisme kerja protokol HTTP ...................................................... 11 Gambar 6. Struktur penulisan CSS .................................................................... 32 Gambar 7. Lembar kerja desain layout halaman web ........................................ 38 Gambar 8. Alur request-response web dinamis. ................................................ 44

xiv

xv

DAFTAR TABEL Tabel 1. Peta kompetensi modul PKB guru RPL Grade 6 pemrograman web ...... 3 Tabel 2. Contoh alamat URL .............................................................................. 11 Tabel 3. Operator aritmetika dalam PHP............................................................ 48 Tabel 4. Operator relasional dalam PHP ............................................................ 48 Tabel 5. Operator logika dalam PHP .................................................................. 49 Tabel 6. Ragam mode fungsi fopen() ................................................................. 77

xvi

xvii

PENDAHULUAN

A. Latar Belakang Guru dan tenaga kependidikan wajib melaksanakan kegiatan pengembangan keprofesian

secara

berkelanjutan

agar

dapat

melaksanakan

tugas

profesionalnya. Program Pengembangan Keprofesian Berkelanjutan (PKB) adalah pengembangan kompetensi Guru dan Tenaga Kependidikan yang dilaksanakan

sesuai

kebutuhan,

bertahap,

dan

berkelanjutan

untuk

meningkatkan profesionalitasnya. PKB sebagai salah satu strategi pembinaan guru dan tenaga kependidikan diharapkan dapat menjamin guru dan tenaga kependidikan mampu secara terus menerus memelihara, meningkatkan, dan mengembangkan kompetensi sesuai dengan standar yang telah ditetapkan. Pelaksanaan kegiatan PKB akan mengurangi kesenjangan antara kompetensi yang

dimiliki

guru dan tenaga

kependidikan dengan tuntutan profesional yang dipersyaratkan. Di dalam pelaksanaan diklat yang dilaksanakan oleh PPPPTK/LPPPTK KPTK diperlukan suatu modul yang berfungsi sebagai salah satu sumber belajar guru. Modul Diklat PKG Guru Rekayasa Perangkat Lunak (RPL) Level 6 Pemrograman Web Dinamis”ini dapat digunakan oleh guru dan tenaga kependidikan dan sebagai acuan untuk memenuhi tuntutan kompetensinya, sehingga guru dapat melaksanakan tugasnya secara professional sesuai dengan standar yang telah ditetapkan. Modul ini mempelajari tentang bagaimana membangun aplikasi web dinamis. Materi dalam modul ini mencakup dua hal yaitu dasar aplikasi web dan teknlogi pengembangan web dinamis. Melalui modul ini guru bermain peran sebagai web programmer yang merupakan salah satu job tittle di dunia industri Teknologi informasi. Programmer mempunyai tanggung jawab terhadap pembuatan kode program yang dapat dijalankan sehingga membentuk aplikasi untuk membantu proses bisnis dalam suatu organisasi. Penguasaan teknik dan ketrampilan dalam 1

membuat kode program berbasis web akan berpengaruh pada kesuksesan dalam implementasi aplikasi sistem informasi.

B. Tujuan Tujuan disusunnya modul diklat PKB Guru RPL Level 1 ini adalah memberikan pengetahuan, ketrampilan dan sikap kepada guru atau peserta diklat tentang merancang sistem basis data dengan benar melalui aktifitas observasi dan praktikum. Setelah mempelajari modul ini diharapkan guru dapat: “Membangun Aplikasi Web dinamis”. Secara khusus tujuan penyusunan modul ini adalah: 1. Memberikan pemahaman tentang teknologi aplikasi web dinamis. 2. Memberikan pengetahuan cara pemrograman web dinamis. 3. Memberikan petunjuk tentang interaksi basis data dalam web dinamis. 4. Memberikan arahan tentang membangun front-end dan back-end dalam pengembangan web dinamis.

C. Peta Kompetensi Modul ini merupakan modul ke-6 dari 10 modul yang dikembangkan. Berdasarkan struktur jenjang diklat PKB Modul pemrograman web dinamis ini termasuk dalam jenjang Dasar. Modul ini akan digunakan untuk Program Pengembangan Keprofesian Berkelanjutan (PKB) bagi guru-guru produktif Sekolah menengah Kejuruan pada paket keahlian Rekayasa Perangkat Lunak.

Gambar 1. Peta kedudukan Modul Pemrograman web dinamis

2

Tabel 1. Peta kompetensi modul PKB guru RPL Grade 6 pemrograman web Standar kompetensi Kompetensi

Kompetensi Inti

Kompetensi Guru

Indikator pencapaian

Utama

Guru (KIG)

Keahlian (KGK)

Kompetensi

Profesional

1. Menguasai 1.3. Membangun web 1.3.1. Menganalisis teknologi materi, struktur, dinamis. dalam mengembangkan konsep dan pemrograman web pola pikir dinamis keilmuan yang 1.3.2. Menyajikan proses kerja mendukung aplikasi melalui struktur mata pelajaran kontrol percabangan dan yang diampu pengulangan. 1.3.3. Membuat kode program dalam bentuk fungsi 1.3.4. Mengolah data melalui operasi file 1.3.5. Membuat koneksi basis data pada web dinamis 1.3.6. Membuat front end application pada web dinamis 1.3.7. Menguji autentikasi user pada web dinamis. 1.3.8. Memanipulasi data pada web dinamis 1.3.9. Membangun back end application pada web dinamis

D. Ruang Lingkup Penggunaan Modul Modul ini terdiri dari empat pembahasan utama (materi pokok). Setiap materi pokok terdapat beberapa kegiatan pembelajaran guna untuk mencapai kompetensi yang telah ditentukan, dalam setiap kegiatan pembelajaran terdapat keterkaitan yang mendukung atau menunjang pemahaman konsep dan praktik dalam setiap kegiatan pembelajaran yang dilakukan. Berikut merupakan peta Kegiatan Pembelajaran dalam mencapai kompetensi. Angka dalam tanda kurung menunjukan capaian dari indikator esensial yang telah ditetapkan untuk setiap Kegiatan Pembelajaran. 3

Gambar 2. Peta materi pokok dan Kegiatan Pembelajaran

Dari setiap kegiatan pembelajaran memuat tentang materi tentang web dinamis, berikut merupakan peta konsep dari materi web dinamis.

Gambar 3. Struktur materi pemrograman web dinamis

4

E. Saran Cara Penggunaan Modul Modul ini terdiri dari empat materi pokok dan sembilan Kegiatan Pembelajaran. Peserta diklat dapat mempalajari sesuai dengan urutan topik mulai topik 1 sampai topik 4 dan Kegiatan Pembelajaran 1 sampai Kegiatan Pembelajaran 9. Untuk setiap Kegiatan Pembelajaran urutan yang harus dilakukan oleh peserta diklat dalam mempelajari modul ini adalah : 1. Membaca tujuan pembelajaran sehingga memahami target atau goal dari Kegiatan Pembelajaran tersebut. 2. Membaca indikator pencapaian kompetensi sehingga memahami obyek yang akan dijadikan kriteria pengukuran untuk mencapai tujuan pembelajaran. 3. Memaca uraian materi pembelajaran sehingga memiliki pengetahuan, ketrampilan dan sikap terhadap kompetensi yang akan dicapai 4. Melakukan

aktifitas

pembelajaran

dengan

urutan

atau

kasus

permasalahan sesuai dengan contoh. 5. Mengerjakan latihan soal atau tugas dengan mengisi lembar kerja yang telah disediakan. 6. Menjawab pertanyaan dalam umpan balik yang akan mengukur tingkat pencapaian kompetensi melalui penilaian diri. Modul ini menggunakan beberapa dukungan perangkat yang yang harus disediakan. Peserta dapat menggunakan perangkat yang dimiliki tetapi harus memenuhi standart spesifikasi yang telah ditetapkan. Hal ini bertujuan agar setiap

kegiatan

pembelajaran

yang

dilakukan

dapat

berjalan

dengan

semestinya.Perangkat-perangkat yang digunakan dalam kegiatan pembelajaran modul ini adalah: 1. Personal Computer (PC) yang sudah terinstal OS windows 7 atau lebih. 2. Perangkat Lunak (software)**  Mozilla Firefox versi 40.0.3  Sublime Text 3  XAMPP versi 5.5.28 3. Source code**  Codeigniter versi 3.0.1  Bootstrap versi 3.3.5 5

Keterangan: tanda dua asterik (**) menunjukan bahwa perangkat tersebut akan disediakan dan tersimpan dalam keping CD. Struktur folder dan file dalam CD diperlihatkan dalam gambar di bawah ini: Perangkat pemrograman web dinamis (folder) | |___ Software Installer (folder) | | | |___ Firefox Setup 40.0.3 (file) | |___ Sublime Text Build 3083 Setup (file) | |___ xampp-win32-5.5.28-0-VC11-installer (file) | |___ Source code (folder) | |___ demo (file) |___ bootstrap-3.3.5-dist (file) |___ CodeIgniter-3.0.1 (file)

6

7

8

Perangkat Pengembangan Aplikasi Web

A. Tujuan Pembelajaran Melalui observasi peserta diklat dapat menganalisis perangkat-perangkat yang digunakan untuk pengembangan aplikasi web sesuai dengan kebutuhan.

B. Indikator Pencapaian Kompetensi Menganalisis perangkat-perangkat untuk pengembangan aplikasi web.

C. Uraian Materi 1. Web Client (Browser) Web Client atau biasa disebut dengan browser atau peramban adalah perangkat lunak yang digunakan untuk mengakses web server dengan mengirimkan pesan permintaan (request) HTTP dan mengolah response HTTP yang dihasilkan. Web browser yang berjalan pada desktop atau laptop komputer adalah paling umum dari perangkat lunak web client (browser), tetapi masih ada bentuk lain dari perangkat lunak web client

dan tentu tidak dibahas dalam modul ini karena

bukan menjadi fokus materi. Web browser berfungsi untuk meminta dan menampilkan informasi yang diminta dari web server, informasi yang diminta dapat berupa file maupun dokumen HTML. Permintaan oleh browser akan ditampilkan berupa halaman web dalam client area di browser. Beberapa browser yang paling umum dan sering digunakan antara lain:  Mozilla Firefox  Google Chrome  Microsoft Internet Explorer  Opera  Safari  Netscape Navigator Dibawah ini merupakan gambar dari software browser Mozilla Firefox.

9

Gambar 4. Web browser Mozilla firefox

2. Web Server Web server merupakan perangkat lunak dalam server yang berfungsi menerima permintaan (request) melalui HTTP dari client yaitu browser dan mengirimkan kembali response HTTP yang pada umumnya akan berbentuk dokumen HTML atau file. Web server menyimpan dokumen web sehingga dapat diakses oleh user atau client melalui internet. Berikut beberapa contoh web server:  Apache (Berjalan di Linux dan Windows)  Microsoft Internet Information Service (IIS) (Berjalan di Windows)  Tomcat (Berjalan di Linux dan Windows) 3. HTTP HTTP

(HyperText

Transfer

Protocol)

adalah

standart

protokol

komunikasi,protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi

terdistribusi,

kolaboratif,

dan

menggunakan

hipermedia.

Penggunaannya banyak pada pengambilan sumber daya yang saling terhubung dengan tautan, yang disebut dengan dokumen hypertext. HTTP standar sekarang adalah (HTTP 1.1). Contoh cara kerja HTTP

10

Gambar 5. Mekanisme kerja protokol HTTP

4. URL URL (Uniform/Universal Resource Locator) merupakan suatu alamat untuk mengakses resource (file). Berikut merupakan contoh URL: Tabel 2. Contoh alamat URL Contoh URL

Nama Skema

Tipe Resource

ftp://ftp.example.org/pub/file.txt

ftp

File didalam FTP Sever

telnet://host.example.org

telnet

Telnet Sever

mailto:[email protected]

mailto

Mailbox

https://source.example.org/sec.txt

https

File dalam web server

file:///C:/temp/localFile.txt

file

File dalam direktori hardisk lokal

D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan melakukan analisis ragam perangkat lunak web browser dan web server. Bentuklah kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan cermat dan teliti. 1. Pilih tiga perangkat web browser (misal mozilla firefox, google chrome dan Internet explorer pada laptop atau komputer yang telah tersedia. 2. Amatilah fungsi-fungsi atau fitur-fitur yang ada dalam ketiga web browser tersebut. Catat hasilnya pada LK 1.1

11

3. Dari hasil pada langkah 3 buatlah tabel dalam bentuk cek list yang menjelaskan perbedaan atau persamaan fitur-fitur perangkat web browser. Tentukan setidaknya 5 parameter atau kriteria (fitur) dan jelaskan deskripsi, fungsi atau kegunaan fitur-fitur tersebut. Catat hasilnya pada LK 1.2. 4. Pilih tiga perangkat web server (misal apache, Microsoft IIS, tomcat dll) kemudian pasang perangkat tersebut pada laptop atau komputer yang telah tersedia. 5. Amati fungsi-fungsi atau fitur-fitur yang ada dalam ketiga web server tersebut. Catat hasilnya pada LK 1.3 6. Dari hasil pada langkah 5 buatlah tabel dalam bentuk cek list yang menjelaskan perbedaan atau persamaan fitur-fitur perangkat web server. Tentukan setidaknya 5 parameter atau kriteria (fitur) dan jelaskan deskripsi, fungsi atau kegunaan fitur-fitur tersebut. Catat hasilnya pada LK 1.4. 7. Diskusi dan komunikasikan hasilnya dalam kelompok dan buatlah kesimpulan. 8. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor.

E. Latihan Soal 1. Matikan server apache dan copy file demo.html didalam local disc saudara misal dalam disc E:\lalu buka browser anda dan akses file demo.html tersebut dengan URL file:///E:/demo.html di browser anda. Amati yang terjadi! Jelaskan mengapa file demo.html tersebut bisa dibuka tanpa menjelankan server apache! 2. Jelaskan mengapa dibutuhkan web server untuk mengakses file aplikasi web! Sedangkan untuk mengakses file dapat secara langsung dengan membuka file dalam direktori disc local tanpa server.

F. Rangkuman Web client (browser) adalah perangkat lunak yang digunakan untuk mengakses web server dengan mengirimkan pesan permintaan (request) HTTP dan 12

mengolah response HTTP yang dihasilkan. Web server merupakan perangkat lunak dalam server yang berfungsi menerima permintaan (request) melalui HTTP dari client yaitu browser dan mengirimkan kembali response HTTP. HTTP (HyperText Transfer Protocol) adalah standar protokol komunikasi,protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia. URL (Uniform/Universal Resource Locator) merupakan suatu alamat untuk mengakses resource (file).

G. KUNCI JAWABAN 1. Ada beberapa macam tipe URL untuk mengakses sebuah file, seperti https, ftp, telnet dan salah satunya adalah skema file. Untuk mengakses sebuah file dalam direktori lokal kita dapat menggunakan alamat seperti file:///E:/demo.html. Browser bisa memproses di sisi-client, akan tetapi untuk pemrograman server-side scripting (seperti PHP) tidak akan bisa di proses dalam sisi client, karena pemrograman PHP hanya bisa diproses di sisi server. 2. Dalam teknologi web, terdapat dua sisi pemrograman, yaitu client-side scripting (JavaScript) dan server-side scripting (PHP). Pada client-side scripting program diproses oleh browser dan server-side diproses pada sisi server. Saat mengengembangkan web dinamis kita tidak akan bisa terlepas dari yang namanya server-side scripting, maka dari itu web server diperlukan untuk memproses program pada sisi-server seperti pemrograman PHP

H. Umpan Balik dan Tindak Lanjut 1. Apakah saudara memahami tentang gambaran global aplikasi web? 2. Apakah saudara sudah memahami apa itu web client dan web server? 3. Apakah saudara sudah bisa melakukan instalasi dan menggunakan web client maupun web server? 4. Apakah anda sudah dapat mengakses sebuah url dengan browser baik dalam direktori lokal maupun server lokal?

13

5. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Perangkat Pengembangan Aplikasi” ini, silahkan mengisi tabel 1 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 1. Tindak Lanjut

IPK

14

Hasil yang didapat

Rencana Tindak Lanjut

15

16

Membuat Dokumen HTML A. Tujuan Pembelajaran Melalui

praktikum

peserta

diklat

dapat

memformat

dokumen

web

menggunakan tag-tag HTML

B. Indikator Pencapaian Kompetensi Memformat dokumen web menggunakan tag-tag HTML.

C. Uraian Materi Dalam semua jenis dokumen, struktur sangat penting untuk mempermudah pembaca dalam memahami dan mencari pesan atau informasi yang disampaikan

melalui

dokumen

web.

Struktur

tersebut

juga

akan

mempermudah penulis dalam mengelola informasi seperti memperbarui, menambah atau menghapusnya. 1. Definisi HTML HTML yang merupakan singkatan dari HyperText Markup Language adalah bahasa markup yang terdiri dari seperangkat tag-tag dan digunakan

untuk

mendeskripsikan

dokumen

atau

halaman

web.

Dokumen HTML tersebut terdiri dari tag-tag HTML yang menjelaskan berbagai ragam jenis isi dokumen yang berbeda-beda. 2. Strukur HTML 1 2 3 4 5 6 7 8 9 10 11

Ini adalah heading

Ini adalah sebuah paragraf

Ini adalah paragraf lain

17

a. DOCTYPE deklarasi mendefinisikan jenis dokumen menjadi HTML. b. Teks antara dan menggambarkan sebuah dokumen HTML. c. Teks antara dan memberikan informasi tentang dokumen. d. Teks antara

Ini adalah heading

Ini adalah sebuah paragraf

6. HTML Editor Untuk menuliskan tag-tag HTML dapat menggunakan perangkat lunak teks editor seperti notepad atau sublime text. Sublime Text adalah aplikasi text editor yang dapat digunakan untuk membuka file apapun, namun secara umum programmer menggunakannya untuk menulis kode. Sublime Text mendukung sejumlah bahasa pemrograman diantaranya C, C++, C#, PHP, CSS, HTML, ASP dan banyak lagi. Salah satu keunggulan Sublime Text adalah mendukung Syntax Highlighter. Syntax Highlighter adalah fitur dari teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, font sesuai dengan kategori. Fitur Syntax Highlighter mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup.

D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan melakukan pemformatan dokumen web menggunakan tag-tag HTML. Bentuk kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan cermat dan teliti. Pelajarilah dengan tekun agar mendapatkan hasil yang maksimal. 1. Pasang dan konfigurasi perangkat teks editor (Notepad++, Sublime Text dll). 20

2. Buat dokumen atau halaman web dengan tampilan dalam web browser seperti terlihat dibawah ini. 2.1.

Pemformatan teks HTML

21

22

23

2.2.

Bekerja dengan Hyperlink

Keterangan : Empire  "http://www.empireonline.com" Metacritic "http://www.metacritic.com" Rotten Tomatoes http://www.rottentomatoes.com Variety  http://www.variety.com

Apabila di klik home maka akan mengarah ke halaman home.

24

2.3.

Bekerja dengan gambar

2.4.

Bekerja dengan tabel

2.5.

Bekerja dengan Form

25

2.6.

26

Bekerja dengan Audio dan Video

3. Diskusi dengan kelompok tentang tag-tag HTML apa saja yang telah digunakan dan tag-tag apa saja yang belum diterapkan. Tuliskan dalam lembar kerja 2.1.seluruh tag-tag tersebut, beserta kegunaan atau fungsinya dan contoh penulisannya. 4. Komunikasikan hasilnya dalam kelompok dan buatlah kesimpulan. 5. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor.

E. Latihan Soal Buatlah website sekolah sederhana, simpan dalam folder dengan nama studikasus1-1. Sepesifikasi dari website tersebut adalah sebagai berikut!  Terdapat tiga halaman utama, halaman home, halaman profil dan halaman kontak.  Dalam

website

tersebut

terdapat

sebuah

logo

dalam

setiap

halamannya.  Halaman home berisi tentang berita/artikel tentang informasi sekolah.  Halaman profil berisi tentang deskripsi sekolah, visi dan misi berupa teks dan sebuah video.  Halaman kontak berisi sebuah form untuk pengiriman pesan oleh pengunjung.  Dari tiga halaman tersebut terdapat sebuah menu yang diberi link yang dapat mengubungkan antara halaman satu dengan halaman lain.  Saudara tidak perlu terfokus/berkonsentrasi pada harfiah isi dari website, baik teks, gambar, video. Diperbolehkan menggunakan standar mendemontrasikan elemen seperti lorem ipsum atau yang lain sesuai keinginan saudara agar pengerjaan bisa berjalan dengan cepat dan

tidak

banyak

membuang

waktu,

yang

terpenting

adalah

penggunaan tag-tag HTML dan website dapat berjalan dengan benar.

F. Rangkuman HTML adalah markup language untuk mendeskripsikan dokumen web (halaman web).HTML singkatan HyperText Markup Language, sebuah bahasa markup

27

adalah seperangkat tag markup.Dokumen HTML dijelaskan oleh tag HTML, setiap tag HTML menjelaskan isi dokumen yang berbeda, Tag HTML biasanya datang berpasangan seperti

dan . Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir. Tag akhir ditulis seperti tag awal, tetapi dengan garis miring sebelum nama tag. Tag awal sering disebut tag pembuka, tag akhir sering disebut tag penutup. Elemen HTML ditulis dengan awal tag, dengan akhir tag, dengan konten di antara HTML, elemen HTML adalah segalanya dari tag awal sampai tag akhir.

G. Umpan Balik dan Tindak Lanjut 1. Apakah anda memahami tag, elemen dan atribut dalam HTML? 2. Apakah anda sudah bisa menulis dan membaca dokumen HTML? 3. Apakah anda sudah memahami tag-tag HTML beserta mengetahui fungsinya? 4. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Membuat Dokumen HTML” ini, silahkan mengisi tabel 2 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan!

Tabel 2. Tindak Lanjut

IPK

28

Hasil yang didapat

Rencana Tindak Lanjut

29

30

Mengatur Tampilan Dokumen HTML dengan CSS A. Tujuan Pembelajaran Melalui praktikum peserta didik dapat menuliskan CSS dalam dokumen atau halaman HTML dengan benar.

B. Indikator Pencapaian Kompetensi Menuliskan CSS dalam dokumen atau halaman HTML dengan benar.

C. Uraian Materi 1. Definisi CSS CSS singkatan Cascading Style Sheets, CSS mendefinisikan bagaimana elemen HTML yang akan ditampilkan. CSS Bekerja dengan mengaitkan aturan dengan elemen HTML, aturan-aturan ini yang nantinya mengatur bagaimana elemen ditampilkan. Dalam menggunakan sebuah CSS terdapat dua unsur, yaitu selector dan declaration.  Selector: Merupakan merupakan penunjuk elemen yang akan diatur style-nya.  Declaration: Merupakan deklarasi bagaimana sebuah elemen ditata. Dalam deklarasi terdapat dua unsur yaitu property dan value. Property menunjuk aspek elemen yang ingin diubah, misal font, warna, lebar. Sedangkan value adalah pengaturan yang digunakan untuk property yang dipilih. Contoh jika anda ingin menentukan property font-family, maka value-nya adalah arial, consolas, calibri.

31

Gambar 6. Struktur penulisan CSS

Dalam CSS juga terdapat cara lain dalam mendefinisikan sebuah selector, yaitu id selector dan class selector.  id selector id digunakan untuk mendefinisikan style pada elemen yang unik dan hanya bisa digunakan sekali dalam satu elemen. Cara mendefinisikan: #header { color: red } Contoh cara mengakses:

Jalankan pada browser dan tampilkan hasilnya. Buat pula form update dengan cara seperti form artikel, bedanya hanya pada button, save as file form artikel, ubah judul “Terbitkan Artikel” Menjadi “Update Artikel” dan ubah button “Simpan” menjadi “update. Simpan dengan nama form_update.html

4. Mendesain Halaman Signin Tulis kode dibawah ini dan simpan dengan nama signin.html, simpan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui browser! C:xampp/htdocs/topik4-1/signin.html 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 26 27 28

<metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> Silahkan masuk Alamat Email Password Ingat saya