PELATIHAN JUNIOR WEB

DEVELOPER
Hari Lugis Purwanto, S.Kom.,M.Cs

Program Studi Sistem Informasi

Universitas PGRI Kanjuruhan Malang
2021
Menggunakan Struktur Data

Junior Web Developer – Pertemuan ke 2

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!
J.620100.016.01
Menulis Kode Dengan Prinsip Sesuai Guidelines
dan Best Practice

Junior Web Programmer – Pertemuan ke 2

Tips

• Baca, pahami dan ikuti petunjuk yang diminta.

• Jangan melakukan hal yang tidak diminta
• Perbanyak latihan coding secara mandiri
• Perbanyak menerapkan tag HTML, CSS dan PHP
Praktek

• Buatlah folder di c:/xampp/htdocs/ dengan nama folder: ujk-nim

• Buat dokumen baru dengan nama: index.php
• Tulislah kode program menggunakan tag HTML, HEAD, TITLE dan BODY dengan
mengikuti aturan standar HTML.
• Pada tag title ketikkan “Sertifikasi Profesi”
• Dalam tag BODY Tambahkan tag H1 dengan text: UJK Junior Web Programmer
• Tulislah kode program untuk CSS di dalam HEAD, untuk memodifikasi tampilan
tag H1
• Atur tampilah pada tag H1 menjadi rata tengah, uppercase dan berwarna #F00
• Simpan hasil pekerjaan di c:/xampp/htdocs/ujk-nim dengan nama file
index.php
Praktek

• Buatlah program dengan nama index2.html pada folder yang sama

dengan soal nomor 1
• Berikan judul pada tag title Sertifikasi Profesi
• Tulishkan teks berikut ini pada file index2.html pada tag body

UJK Junior Web Programmer

Never regret a day in your life; good days give happiness, bad days give
experiences, worst day give lessons, and best day give memories. We will
never know the real answer before we try. It's an immpossibility to be
perfect but it's possible to do the best.
Praktek

• Tambahkan tag H1 pada teks UJI Junior Web Programmer.

• Tambahkan tag P pada teks paragraph.
• Tambahkan tag DIV pada teks diatas.
• Aturlah CSS sebagai berikut:
• Tag h1 berwarna hijau, rata tengah, dan abjad capital/uppercase
• Pada Tag p
• Text indent atau jumlah ruang horizontal yang harus dimiliki oleh baris teks pertama
50px
• Berikan letter space 3px
• Rata kanan kiri
• Pada tag div
• Berikan warna background lightblue
• Berikan border dengan tebal 1px bertipe dotted dan berwarna hitam
• Berikan padding 10px
Praktek