Web Programming

M. AZZAM AZIZI, S.S.T

Biodata
Nama Lengkap : M. Azzam Azizi, S.S.T
Nama Panggilan : Azzam
Pendidikan :
1. D-IV Teknik Informatika – Politeknik Negeri Malang
2. D-III Manajemen Informatika – Politeknik Negeri Jember
Alamat : Perum Tugu Bungur Asri Blok AB 4, Kelurahan Jember Lor, Kecamatan
Patrang, Kabupaten Jember
Target Pembelajaran
Minggu ke 1 – Konsep Dasar Web dan Pengenalan HTML
Minggu ke 2 – Pengenalan PHP, Variabel, Konstanta, Tipe Data, Operator
Minggu ke 3 – Pengenalan Form, Percabangan dan Perulangan
Minggu ke 4 – Belajar CSS dan Javascript Dasar
Minggu ke 5 – Membuat Template Website
Minggu ke 6 – Pengenalan Database MySQL dan Framework Codeigniter
Minggu ke 7 – Mempelajari Model View Controller
Minggu ke 8 – Membuat Template Web Sederhana menggunakan Codeigniter
Minggu ke 9 – Membuat Form Validasi
Minggu ke 10 – Membuat Program Create, Read, Update dan Delete (Dasar)
Minggu ke 11 – Membuat Program Create, Read, Update dan Delete (Lanjutan) (E-LEARNING)
Minggu ke 12 – Membuat Program Create, Read, Update dan Delete (Lanjutan) (E-LEARNING)
Minggu ke 13 – Membuat Program Create, Read, Update dan Delete (Lanjutan) (E-LEARNING)
Minggu ke 14 – Membuat Program Create, Read, Update dan Delete (Lanjutan) (E-LEARNING)
Minggu ke 15 – Presentasi Proyek
Software yang dibutuhkan
1. XAMPP (sebagai web server dan database MySQL)
2. Teks Editor Coding (Sublime Text/VSCode)
3. Browser (Firefox/Google Chrome)

Link download : https://s.id/2973I atau

https://drive.google.com/drive/folders/1pz4EvrnLbN6fhFe5kSltOmUURef7ecIw?usp=drive_link
Konsep Dasar Web
dan Pengenalan
HTML
PERTEMUAN 1
Dasar-Dasar Web
 Internet
Internet merupakan kependekan dari kata “interconnected work”
atau “internetwork”, yang berarti rangkaian komputer yang
terhubung menjadi beberapa rangkaian jaringan. Sistem Komputer
terhubung secara global dan menggunakan TCP/IP sebagai protocol.
Secara umum internet dapat diartikan sebagai pertukaran informasi
dan komunikasi. Semua informasi bias didapatkan dengan mudah dan
bebas di internet tanpa ada batasan.
Ada beberapa istilah yang sering digunakan apabila kita bekerja dengan
internet, diantaranya yaitu :
1. World Wide Web (WWW) : kumpulan web server yang menyediakan data
informasi untuk dapat digunakan secara masal
2. Website : merupakan alamat tertentu di www, seperti google.com, dll
3. Web Pages : merupakan bagian dari website
4. Home Page (Halaman Muka) : merupakan halaman muka atau cover depan
dari suatu website
5. Browser : aplikasi yang digunakan untuk berselancar di dunia internet
6. URL (Universal Resource Locator) : suatu alamat yang menunjukkan sebuah
halaman tertentu
9. HTTP (Hypertext Transfer Protocol) : merupakan bagian dari sebuah url yang
mengidentifikasi lokasi web dan digunakan dalam protokol html
10. DNS (Domain Name System) : merupakan penerjemah nama domain yang
mudah dibaca oleh manusia (contohnya : google.com, facebook.com, dll)
menjadi alamat IP yang digunakan oleh komputer
11. IP (Internet Protocol) : merupakan serangkaian angka yang berfungsi
sebagai identitas unik bagi setiap perangkat yang terhubung ke jaringan
internet (contohnya : 192.168.1.10)
 Perangkat Lunak Web Server
Web Server adalah sebuah perangkat lunak server yang berfungsi
menerima permintaan HTTP atau HTTPS dari Client (pengguna) yang
dikenal dengan web browser dan mengirimkan kembali hasilnya
dalam bentuk halaman website pada umumnya berbentuk dokumen
HTML. Server web yang terkenal diantaranya adalah :
1. Apache
2. Nginx
3. Microsoft Internet Information Services (IIS)
4. LiteSpeed
5. dll
Pengertian HTML (HyperText
Markup Language)
Hypertext Markup Language (HTML) adalah sebuah bahasa untuk
menampilkan konten di web. HTML sendiri adalah sebuah bahasa
pemrograman yang bebas, artinya tidak dimiliki oleh siapapun,
pengembangannya bisa dilakukan oleh semua orang di berbagai
Negara dan bisa dikatakan sebagai sebuah bahasa yang
dikembangkan bersama-sama secara global.
Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat
diedit oleh editor teks apapun. Dokumen HTML punya beberapa
elemen yang dikelilingi oleh tag-teks yang dimulai dengan simbol <
dan berakhir dengan sebuah simbol >.
 Stuktur dasar HTML
Elemen HTML dimulai dengan tag awal, yang diikuti dengan
isi elemen dan tag akhir. Tag akhir termasuk simbol / diikuti
oleh tipe elemen, misalnya <HEAD></HEAD>. Sebuah
elemen HTML dapat bersarang di dalam elemen lainnya,
dokumen HTML standar terlihat seperti gambar berikut :
Keterangan :
1. Tag HTML secara default dimulai dari <html> dan diakhiri dengan </html>
2. Tag HEAD merupakan tag kepala dalam sebuah website, Tag kepala ini akan dieksekusi
pertama kali dan biasanya dalam tag kepala berisikan META yang merupakan informasi
atau header suatu dokumen HTML
3. Tag TITLE adalah tag judul. Sebaiknya tiap halaman web memiliki judul dan judul tersebut
dituliskan didalam <title></title>, judul ini akan muncul di halaman browser
4. Tag BODY adalah tag berisi konten dari suatu halaman web
Contoh Penggunaan script HTML

Simpan file html tersebut di C:/xampp/htdocs/belajar-coding/contoh1.html

Mengakses file html pada
browser
1. Aktifkan Apache pada XAMPP
2. Buka browser dan ketikkan url : http://localhost/belajar-coding/contoh1.html
3. Akan tampil seperti gambar berikut
Tag pada HTML
Kode-kode dalam HTML biasanya disebut dengan tag. Tag adalah sesuatu yang
digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag
dalam HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ) dan garis
miring ( / ). Biasanya tag dituliskan secara berpasangan, misalnya <h1> dan
</h1>. Tag yang tidak menggunakan garis miring ( / ) adalah tag pembuka atau
elemen awal, sedangkan tag yang mengandung garis miring ( / ) adalah penutup
elemen atau akhir elemen. Namun ada juga tag yang dalam penggunaannya
tidak berpasangan, diantaranya adalah
a. Tag untuk ganti baris atau line break yaitu <br>
b. Tag untuk garis datar yaitu <hr>
Tag Dasar
Tag Pemformatan
Tag Computer Output
Tag Cititation, Quotation,
Definition
Tag Link dan Image
Tag List
Contoh script penggunaan Tag HTML
Berikut tampilannya
 Pembuatan Tabel menggunakan
HTML
Tabel penting perannya dalam halaman web, selain untuk menampilkan teks atau gambar dalam
format lajur dan kolom bisa juga menggunakan tabel untuk membantu melayout tampilan
halaman.
Tabel merupakan sebuah kotak yang terdiri dari baris atau row dan kolom atau column. Untuk
membuat tabel, menggunakan tag <table>dan menutupnya dengan tag </table>. Terdapat
atribut lain yang bisa ditambahkan dalam tag <table>, misalnya menentukan warna border atau
garis dan sebagainya.
Dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :
a. Tag <tr>artinya tag untuk menuliskan baris biasa di tabel, tr singkatan dari table row
b. Tag <td> artinya tag untu menuliskan kotak di dalam barus, penggunaannya tag <td> ada
didalam tag <tr>. Td singkatan dari table row
c. Tag <th> artinya tag untuk menuliskan kotak biasa seperti <td>namun untuk header tabel. Th
singkatan dari table header
Menggabungkan Cell pada tabel
Sel (cell) tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita
menginginkan lebar dan tinggi yang berbeda maka satu-satunya cara yang dapat
kita lakukan dengan menggabungkan beberapa sel menjadi satu. Cara ini disebut
dengan merge atau penggabungan sel.
Untuk menggabungkan sel-sel tersebut diperukan atribut rowspan dan colspan.
Atribut rowspan digunakan untuk menggabungkan sel-sel tabel pada kolom yang
sama. Atribut colspan untuk menggabungkan sel-sel pada baris yang sama.
Berikut contoh penggunaan kedua jenis
Secara Vertikal
Secara Horizontal
Tugas Pertemuan 1
KERJAKAN BERKELOMPOK
Buatlah script html sehingga
menghasilkan tampilan seperti
berikut
Tugas 1
Tugas 2
 SAMPAI
JUMPA DI
PERTEMUAN
BERIKUTNYA
Minggu ke 2 – Pengenalan PHP,
Variabel, Konstanta, Tipe Data,
Operator