PELATIHAN JUNIOR WEB

DEVELOPER
Hari Lugis Purwanto

Program Studi Sistem Informasi

Universitas PGRI Kanjuruhan Malang
2021
Kenapa sertifikasi profesi penting

• Industry tidak lagi memandang ijasah sebagai patokan utama

dalam perekrutan karyawan melainkan juga mempertimbangkan
kemampuan yang dimiliki si pelamar kerja
• Salah satu sarat dari sekian persaratan yang di standarkan setiap
perusahaan dalam perekrutan karyawan baru adalah dengan
mewajibkan memiliki sertifikasi profesi sebagai bukti bahwa
pelamar kerja diakui oleh lembaga penyelenggara sertifikasi
profesi.
SERTIFIKASI PROFESI STANDAR SKKNI

• Dalam buku panduan uji kompetensi skema web junior

programmer dari Badan Nasional Sertifikasi Profesi atau BNSP
menyatakan bahwa sertifikasi profesi merupakan upaya untuk
memberikan pengakuan atas kompetensi yang dikuasai seseorang
sesuai dengan Standard Kompetensi Kerja Nasional Indonesia
(SKKNI), standar internasional atau standar khusus.
• Setiap orang atau individu yang memiliki sertifikat profesi yang
diberikan oleh lembaga penyelenggara sertifikasi adalam hal ini
adalah BNSP maka individu tersebut telah diakui atas kemampuan
atau kompetensi yang dimiliki terhadap bidang tertentu.
SERTIFIKASI PROFESI STANDAR SKKNI (2)

• Untuk mendapatkan pengakuan tersebut setiap individu harus

melalui serangkain tes yang tentunya memiliki standar kompetensi
yang telah di tentukan.
• Standar kompetensi yang digunakan dalam tes tersebut di negara
kita menggunakan Standar Kompetensi Kerja Nasional Indonesia
atau biasa disingkat dengan SKKNI.
• SKKNI telah dirumuskan berdasarkan berdasarkan perkembangan
ilmu pengetahuan dan kebutuhan industry.
SERTIFIKASI PROFESI STANDAR SKKNI (3)

• Sertifikasi profesi sendiri selain bertujuan untuk mendapatkan

pengakuan atas kompetensi yang dimiliki juga memiliki tujuan lain
yaitu untuk memastikan bahwa kompetensi yang dimiliki oleh
orang atau individu yang telah memiliki sertifikat kompetensi
tersebut dalam perjalanan waktu juga harus bisa tetap
memastikan tetap terpeliharanya komptensi tersebut.
• Artinya orang tersebut bukan hanya pernah kompeten dalam suatu
bidang profesi tertentu tapi juga tetap kompeten dan terus
kompeten.
RINCIAN UNIT KOMPETENSI – JUNIOR WEB
DEVELOPER
RINCIAN UNIT KOMPETENSI – JUNIOR WEB
PROGRAMMER

No Kode Unit Judul Unit

1 J.620100.004.02 Menggunakan struktur data
2 J.620100.005.01 Mengimplementasikan user interface
3 J.620100.011.01 Melakukan instalasi software tools pemrograman
4 J.620100.016.01 Menulis kode dengan prinsip sesuai guidelines dan best
practices
5 J.620100.017.02 Mengimplementasikan pemrograman terstruktur
6 J.620100.019.02 Menggunakan library atau komponen pre-existing
7 J.620100.023.02 Membuat dokumen kode program
8 J.620100.025.02 Melakukan debugging
Melakukan Instalasi Software Tools Pemrograman

Junior Web Developer - Pertemuan ke 1

Software Yang Dibutuhkan Untuk Pengerjaan
Pemrograman Web
• Server butuh server web dan server data serta library yang biasanya
sudah include jadi satu atau sudah di bundling pada:
• XAMPP atau
• WAMP atau
• LAMP atau
• MAMP atau
• Kecuali IIS server harus install sendiri library PHP nya karena IIS adalah milik
Microsoft dan di standarkan untuk support penuh ASP.
• Client butuh install browser (IE, Firefox, Chrome dll) yang sekaligus
untuk proses debug atau compiler
• Untuk editor butuh notepad, notepad++, Adobe Dreamweaver, sublime,
visual studio code dll.
• Jika butuh editor Query SQL bisa install MySQL Front atau HeidiSQL dll.
Spesifikasi Hardware Untuk Mendukung
Pemrograman Web
• Kebutuhan paling minimum untuk Server
• Processor setara Core i3
• Memory dengan RAM 2 Gb
• VGA on Board
• Monitor Super VGA (800x600) dengan minimum 256 warna
• Keyboard + mouse
• Kebutuhan paling minimum untuk client
• Processor Setara Pentium 4
• Memory dengan RAM 1Gb
• VGA on Board
• Monitor Super VGA (800x600) dengan minimum 256 warna
• Keyboard + mouse
Web Server

• Web server adalah perangkat lunak yang berfungsi sebagai penerima permintaan
yang dikirimkan melalui browser kemudian memberikan tanggapan permintaan
dalam bentuk halaman situs web atau lebih umumnya dalam dokumen HTML.
• Web server dapat mempunyai dua pengertian berbeda, yaitu sebagai bagian
dari perangkat keras (hardware) maupun sebagai bagian dari perangkat lunak
(software). Jika merujuk pada hardware, web server digunakan untuk
menyimpan semua data seperti HTML dokumen, gambar, file CSS stylesheets,
dan file JavaScript. Sedangkan pada sisi software, fungsi web server adalah
sebagai pusat kontrol untuk memproses permintaan yang diterima dari browser.
• Contohnya adalah
Server dan Client

• Server adalah komputer yang digunakan untuk menampung semua data yang berasal
dari komputer client yang dilengkapi dengan software server tertentu untuk
bertanggung jawab menerima permintaan HTTP dari komputer lain yang dikenal
sebagai web browser, dan melayani mereka dengan meyediakan respon HTTP berupa
konten, biasanya berupa halaman web yang terdiri dari halaman HTML dan objek
yang terkait.
• Client adalah komputer yang digunakan untuk meminta layanan tertentu dari
komputer server yang biasanya menggunakan aplikasi yang disebut browser untuk
mengakses web dari server
Praktek

• Silahkan lakukan instalasi software yang digunakan sebagai text

editor yang mendukung PHP, HTML, CSS dan Javascript!
• Silahkan lakukan instalasi software yang digunakan untuk web
server dan database server!
• Silahkan lakukan instalasi software yang digunakan untuk client!
Menerapkan Perintah Eksekusi Bahasa
Pemrograman Berbasis Text, Grafik, dan
Multimedia

Junior Web Developer

PHP Basic

• Default tag
• <?php ?>

• Short Tags
• <? ?>
• <?="This is another PHP example.";?>
• This is functionally equivalent to both of the following variations:
• <? echo "This is another PHP example."; ?>
• <?php echo "This is another PHP example.";?>

• Script
• <script language=“php”> dan </script>

• Statement diakhiri “;”

• Case sensitive
Embedding Multiple Code Blocks
Praktek

• Buatlah sebuah folder dengan nama pertemuan1

• Buatlah sebuah file php dengan nama latihan1.php dan simpan ke
dalam folder pertemuan1
• Buatlah sebuah program yang dapat menampilkan hasil perhitungan luas
permukaan dan volume dari sebuah kerucut dimana garis pelukisnya 20cm,
jari-jarinya 12cm dan tingginya 18cm.
Praktek

• Buatlah sebuah file php dengan nama latihan2.php dan simpan ke

dalam folder pertemuan1
• Buatlah tampilan antar muka untuk membuat program pada file
latihan1.php berupa inputan
• Berikan gambar bentuk kerucut
• Berikan video tutorial perhitungan luas permukaan dan volume kerucut
Mengimplementasikan Pemrograman Terstruktur

Junior Web Developer - Pertemuan ke 1

Struktur Kontrol

• Blok pemrograman yang menganalisis variabel dan memilih arah

yang akan didasarkan pada parameter yang diberikan.
• Oleh karena itu proses pengambilan keputusan dasar dalam
komputasi, flow control menentukan bagaimana komputer akan
merespon ketika diberikan kondisi dan parameter tertentu.
Struktur Kontrol

• Conditional Statement
• If Condition Structure
• If Else Condition Structure
• Special Condition Structure
• Switch Case Condition Structure
• Looping Statement
• Statement For
• Statement While
• Statement Foreach
• Break structure and Continue
Conditional Statement - The If Statement
Conditional Statement - The Switch
Statement

• Struktur logika switch adalah sebuah stuktur percabangan yang

akan memeriksa suatu variabel, lalu menjalankan perintah-
perintah yang sesuai dengan kondisi yang mungkin terjadi untuk
variabel tersebut.
• Struktur switch ini mirip dengan struktur IF yang ditulis berulang.
Conditional Statement - Special Condition
Structure
Looping - The while Statement

• While
• Do .. While
Looping – The For Statement
Looping - The foreach Statement
The break and continue Statements
The break and continue Statements
Procedure dan Fungsi
Praktek

• Dalam soal perhitungan luas permukaan dan volume kerucut yang

telah anda kerjakan, ubahlah menjadi ketentuan sebagai berikut:
• Luas dibuat menjadi prosedur
• volume dibuat menjadi fungsi
Menggunakan Struktur Data

Junior Web Developer – Pertemuan ke 1

Ruang Lingkup

• Pengertian struktur data.

• Array terindex, array asosiatif, dan array multidimensi.
• Database.
• Record.
• Field.
• Tipe data yang ada di MySQL.
• Query SQL select, insert, update dan delete.
Apa yang dimaksud dengan struktur data?

• Cara menyimpan, mengatur, dan mengelola data dalam media

penyimpanan komputer sehingga data dapat digunakan secara
efisien
• Tipe Tree
• Tipe Queue (Antrian , konsep FIFO)
• Tipe Stack (tumpukan, konsep LIFO)
• Tipe Linked List (simpul, konsep FIFO ataupun LIFO)
• Tipe Array
Array

• Array terindex adalah array yang setiap itemnya terbedakan

dengan indeks tertentu. Indeks tersebut bertipe data integer dan
selalu dimulai dari angka 0
• Array asosiatif adalah suatu array di mana key atau kuncinya
bukan berupa indeks integer yang dimulai dari 0, akan tetapi yang
menjadi key-nya adalah suatu teks bertipe data string
• Array multidimensi adalah suatu istilah untuk sebuah array, yang
mana ia memiliki item berupa array yang lain
Database!

• Kumpulan data yang dikelola sedemikian rupa berdasarkan

ketentuan tertentu yang saling berhubungan sehingga mudah
dalam pengelolaannya.
• Kumpulan informasi yang disimpan di dalam komputer secara
sistematik sehingga dapat diperiksa menggunakan suatu program
komputer untuk memperoleh informasi dari basis data tersebut.
• Representasi kumpulan fakta yang saling berhubungan disimpan
secara bersama sedemikian rupa dan tanpa pengulangan
(redudansi) yang tidak perlu, untuk memenuhi berbagai
kebutuhan.
Record dan field

• Record adalah kumpulan field yang sangat lengkap, dan biasanya

dihitung dalam satuan baris
• Field adalah kumpulan dari karakter yang membentuk satu arti,
maka jika terdapat field misalnya seperti NomerBarang atau
NamaBarang, maka yang dipaparkan dalam field tersebut harus
yang berkaitan dengan nomer barang dan nama barang.
• Field adalah tempat atau kolom yang terdapat dalam suatu tabel
untuk mengisikan nama-nama (data) field yang akan di isikan.
Tipe data MySQL

• Tipe data yang ada di MySQL!

• Tipe data angka/numerik
• Tipe Data Angka (Numerik) merupakan
tipe data yang dapat kita gunakan
pada suatu variabel konstanta yang
dapat menyimpan nilai berupa angka.
Tipe data MySQL

• Tipe data text/string

• Tipe Data Teks (String) merupakan tipe data yang bisa kita gunakan untuk menampung banyak
karakter
• Char
• Varchar
• Tynitext
• Text
• Longtext
Tipe data MySQL

• Tipe data date

• Tipe Data Date digunakan untuk menyimpan data tanggal dengan format tahun,
bulan, tanggal
Tipe data MySQL

• Tipe data BLOB

• Tipe Data BLOB merupakan tipe data yang dapat digunakan untuk menampung
gambar, musik, video dan lain-lain nya.
SQL Query

• Jelaskan fungsi dari perintah select, insert, update dan delete dan
berikan contoh format SQL nya!
• Select digunakan untuk mengambil data dari database
• SELECT * FROM namaTable;
• Insert digunakan untuk menambahkan data baru ke dalam sebuah tabel
• INSERT INTO namaTable (column1, column2, column3, ...) VALUES (value1,
value2, value3, ...);
• Update digunakan untuk merubah data yang ada dalam sebuah tabel
• UPDATE namaTable SET column1 = value1, column2 = value2, ... WHERE
condition;
• Delete digunakan untuk menghapus record dalam sebuah tabel
• DELETE FROM namaTable WHERE condition;
Praktek

• Buatlah sebuah program array yang berisi data berupa semangka,

jeruk, apel dan anggur. Kemudian tampilkan data tersebut.
• Buatlah sebuah program yang dapat menampilkan seperti gambar
dibawah ini dengan memanfaatkan array!
Praktek

• Buatlah database MySQL dengan nama “UJK2016Tahap2” dengan

menggunakan perintah query.
• Buatlah tabel transaksi dan tabel jenis transaksi dengan strukur
sebagai berikut:
Nama Field Type Length Keterangan
kode_transaksi char 15 Primary key
kode_jenis_tr char 15 Foreign key Nama Fiels Type Length Keterangan
ansaksi kode_jenis_trans char 15 Primary key
nama_barang varchar 70 aksi
harga integer 8 nama_jenis_tran varchar 50
diskon decimal 8,2 saksi
total decimal 8,2 ketarangan varchar 100
Praktek

• Tambahkan masing-masing 3 data ke dalam tabel transaksi dan

jenis transaksi!