ACC 4 211080200087 Mochammad Zien Rifqi PrakBW Part1

LAPORAN PRAKTIKUM
PEMROGRAMAN BERBASIS WEB

COVER
Disusun Oleh :
Nama : Mochammad Zien Rifqi
NIM : 211080200087
Kelompok :4
LABORATORIUM INFORMATIKA
PROGRAM STUDI INFORMATIKA
FAKULTAS SAINS & TEKNOLOGI
UNIVERSITAS MUHAMMADIYAH SIDOARJO
2022-2023
LEMBAR PERSETUJUAN
Telah Diperiksa dan Disetujui
Isi Laporan Ini
LAPORAN PRAKTIKUM
PEMROGRAMAN BERBASIS WEB
Disusun Oleh :
NIM : 211080200087
Kelompok :4
Mengetahui,
Laboran Informatika
(Melina Atikawati, S.Kom.)
2021
ii
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa, sehingga Modul Praktikum
Pemrograman Berbasis Web ini dapat disusun dengan baik. Modul ini disusun
sedemikian rupa agar dapat digunakan dengan mudah oleh mahasiswa program
studi informatika sebagai panduan dalam penggunaan laboratorium untuk
kegiatan praktikum, kegiatan penelitian, pengembangan, dan inovasi dalam
bidang Informatika dan Komputer.
Terima kasih yang sebesar-besamya kami ucapkan pada berbagai pihak
yang telah membantu dan mendukung pembuatan modul ini.
1. Dr. Hindarto, S.Kom., MT., selaku Dekan Fakultas Sains dan Teknologi
Universitas Muhammadiyah Sidoarjo.
2. Ir. Sumarno, S.Kom., M.M., selaku Kepala Prodi Informatika Universitas
Muhammadiyah Sidoarjo.
3. Melina Atikawati, S.Kom., selaku Kepala Laboratorium Informatika
Universitas Muhammadiyah Sidoarjo.
4. Ika Ratna Indra Astutik, S.Kom, MT., selaku Dosen Praktikum
Pemrograman Berbasis Web Universitas Muhammadiyah Sidoarjo.
5. ----------------, selaku Asisten Praktikum yang telah membantu terlaksananya
praktikum Pemrograman Berbasis Web.
6. Keluarga dan teman-teman yang telah memberikan bantuan baik materi
maupun spiritual dalam pembuatan Laporan Praktikum Pemrograman
Berbasis Web.
Harapan kami semoga modul ini dapat memberikan manfaat bagi para
pembacanya.
Sidoarjo, 11 November 2021

Penyusun
Mochammad Zien Rifqi
iii
DAFTAR ISI
- Lembar Persetujuan...................................................................................ii
- Kata pengantar..........................................................................................iii
- Daftar isi...................................................................................................iv
- Bab I...........................................................................................................1
A. Profil Laboratorium Pemrograman Berbasis Web...................................1
B. Manajemen Laboratorium Pemrograman Berbasis Web.........................2
C. Penggunaan Laboratorium.......................................................................8
D. Peralatan Laboratorium............................................................................8
E. Peralatan Pendukung................................................................................8
- Bab II.........................................................................................................9
A. Analisis Materi / Instruksional.................................................................9
B. Silabus Praktikum....................................................................................9
C. Satuan Acara Praktikum (SAP)................................................................9
Lembar Asistensi....................................................................................................12
- Bab III......................................................................................................13
POKOK BAHASAN I...........................................................................................13
A. Tujuan....................................................................................................13
B. Dasar Teori.............................................................................................13
C. Instruksi Percobaan Praktikum..............................................................17
D. Lembar Kerja dan Tugas........................................................................17
Tugas..............................................................................................................33
REFERENSI..................................................................................................41
POKOK BAHASAN II..........................................................................................43
A. Tujuan....................................................................................................43
iv
B. Dasar Teori.............................................................................................43
E. Kunci Lembar Kerja...............................................................................86
REFERENSI..................................................................................................87
POKOK BAHASAN III.........................................................................................89
A. Tujuan....................................................................................................89
B. Dasar Teori.............................................................................................89
REFERENSI................................................................................................128
Lembar Asistensi..................................................................................................129
POKOK BAHASAN IV......................................................................................130
A. Tujuan..................................................................................................130
B. Dasar Teori...........................................................................................130
C. Instruksi Praktikum..............................................................................133
D. Lembar Kerja dan Tugas......................................................................135
REFERENSI................................................................................................156
Lembar Asistensi..................................................................................................157
POKOK BAHASAN V........................................................................................158
A. Tujuan..................................................................................................158
B. Dasar Teori...........................................................................................158
C Lembar Kerja dan Tugas.....................................................................160
REFERENSI
POKOK BAHASAN VI......................................................................................182
v
A. Tujuan..................................................................................................182
B. Dasar Teori...........................................................................................182
C. Instruksi praktikum..............................................................................183
D. Lembar Kerja dan Tugas......................................................................183
vi
BAB I
PENNDAHULUAN
A. Profil Laboratorium Pemrograman Berbasis Web
Visi Laboratorium
"Mewujudkan Laboratorium Pemrograman Berbasis Web yang bermutu
Tingkat Nasional 2020 di Bidang Informatika dan Komputasi, serta
menjadi Unit Pendukung Kegiatan di unit kerja lain di lingkungan
UMSIDA".
Misi Laboratorium
1. Menyelenggarakan praktikum berkualitas, dan pembimbingan
berdasarkan kurikulum yang terintegrasi dan berkelanjutan untuk
seluruh mahasiswa Informatika.
2. Menyediakan sarana dan prasarana untuk kegiatan penelitian,
pengembangan dan inovasi dalam bidang Informatika dan Komputer.
3. Memberikan pelayanan laboratorium yang baik dan bermutu.
4. Meningkatkan kerja sama dengan instansi pemerintah/ swasta/
masyarakat di bidang Informatika dan Komputer di Tingkat Nasional.
Sasaran Laboratorium
1. Tersedianya sarana dan prasarana untuk penunjang kegiatan
praktikum.
2. Tersedianya asisten laboratorium dan asisten praktikum yang
professional dan sesuai dengan tugasnya.
3. Adanya koordinasi atau kerja sama yang baik antara unit-unit yang
terkait.
4. Meningkatnya pengelolaan data akademik.
5. Meningkatnya pelayanan administrasi Laboratorium.
Tujuan Laboratorium.
1
1. Mengembangkan sumber daya laboratorium terpadu untuk
peningkatan kualitas pelayanan praktikum, penelitian, pembelajaran
dan pengembangan masyarakat.
2. Mengembangkan sumber-sumber pendanaan laboratorium yang
berkelanjutan.
3. Pengembangan Sistem Manajemen Laboratorium yang sehat dan
harmonis.
4. Mengembangkan kelembagaan laboratorium yang kuat dan dinamis
serta meningkatkan kapabilitas dan kompetensi SDM.
Manfaat Laboratorium Pemrograman Berbasis Web

1. Diharapkan dapat memfasilitasi pengembangan mata pelajaran TIK
(Teknologi Informasi Komputer) sebagai bagian dasar pemanfaatan
teknologi untuk mempersiapkan mahasiswa yang memadai agar di
masa depan dapat berperan sebagai kontribusi dari penguasaan
komputer.
2. Untuk menunjang proses pembelajaran yang bermutu, teratur dan
berkelanjutan.
3. Meningkatkan pengalaman dan keterampilan dalam
mengimplementasikan penguasaan komputer pada mata pelajaran
lainnya.
4. Memberikan dampak kepada mahasiswa untuk lebih terampil
mengkomunikasikan teori dengan praktik (dalam proses belajar-
mengajar).
5. Memberikan pengalaman langsung kepada mahasiswa melalui
praktik-praktik lapangan.
B. Manajemen Laboratorium Pemrograman Berbasis Web.
SOP (Standard Operational Procedure).

SOP (Standard Operasional Prosedur) adalah suatu pedoman tertulis yang
dipergunakan untuk memperlancar kegiatan Laboratorium teknik
Informatika.
Tujuan SOP
2
1. Meningkatkan efisiensi pelaksanaan kegiatan praktikum di
Laboratorium Sains dan Teknologi Informatika.
2. Memberikan sanksi bagi pengguna laboratorium yang tidak
memenuhi aturan.
Pihak Terkait
1. Mahasiswa;
2. Dosen;
3. Laboran; dan
4. Asisten;
Waktu dan Tempat Pelaksanaan.
Waktu praktikum sesuai dengan jadwal yang telah ditentukan. Tempat
pelaksanaan praktikum di Laboratorium Informatika.
c.1 Jumlah tatap muka
Jumlah tatap muka Praktikum Pemrograman Berbasis Web di
Laboratorium Pemrograman Berbasis Web menetapkan 2 kali tatap
muka.
c.2 Lama praktikum setiap tatap muka
Lama praktikum untuk setiap tatap muka adalah 4.5 jam dengan
pertimbangan bahwa setengah jam pertama untuk persiapan
peralatan sedangkan satu setengah jam berikutnya untuk materi
praktikum. Jeda waktu antar praktikum 15 menit dengan
pertimbangan bahwa diperlukan waktu kurang lebih 15 menit bagi
asisten untuk mempersiapkan pelaksanaan praktikum berikutnya.
Prosedur Penggunaan Laboratorium Pemrograman Berbasis Web
1. Tidak menginstal software pada komputer yang digunakan
2. Tidak menginstal dan menghapus.
3. Tidak membuat akun, di direktori.
4. Tidak menambah atau mengurangi data yang ada, kecuali yang
dibutuhkan.
5. Pelanggaran atas aturan ini dikenakan sanksi tidak dapat mengikuti
praktikum berikutnya.
3
6. Asisten harus melaporkan terjadinya pelanggaran ke laboran dan
mencatat pelanggaran yang terjadi.
7. Kerusakan karena kelalaian praktikkan menjadi tanggung jawab
praktikkan yang bersangkutan.
8. Tidak membawa makanan dan minuman ke dalam laboratorium.
Prosedur Pelaksanaan Praktikum
1. Laboran menyiapkan laboratorium dan perlengkapannya.
2. Asisten menyiapkan materi praktikum berdasarkan modul
praktikum.
3. Mahasiswa melaksanakan praktikum didampingi asisten dan dosen
pembimbing.
4. Mahasiswa membuat laporan dan diserahkan kepada asisten pada
pertemuan berikutnya.
5. Asisten memeriksa dan menandatangani asistensi laporan
praktikum mahasiswa.
6. Laporan yang telah diperiksa diserahkan kembali kepada
mahasiswa.
7. Pada akhir praktikum, Dosen memberikan tes/ujian yang harus
diikuti oleh semua mahasiswa.
8. Dosen menyerahkan nilai hasil tes/ujian praktikum yang
dilaksanakan mahasiswa ke Laboran.
9. Asisten merekap nilai praktikum (20% tugas + 40 % pelaksanaan
praktikum)
10. Asisten menyerahkan nilai ke Laboran.
11. Laboran merekap nilai praktikum (20% tugas + 40 % pelaksanaan
praktikum + 30 % ujian praktikum + 10 % laporan praktikum).
12. Laboran menyerahkan nilai praktikum ke BAA.
13. Laboran membuat kartu peserta (lampiran) degan ketentuan nilai:
Dinyatakan lulus praktikum jika nilai minimal praktikum C.
4
Tabel 1.1 Daftar Range Nilai
Nilai Huruf Range Nilai
A >85,1
AB 76-85
B 66-75
BC 56-65
C 46-55
D 36-45
E <35
5
Flow Chart Pelaksanaan Praktikum
Langkah-langkah yang dilakukan oleh Laboran, Asisten, Mahasiswa,
Dosen dan Koordinator disajikan dalam diagram alir berikut.
Gambar 1.2 Diagram Alir Langkah-Langkah Yang Dilakukan Oleh

Kepala Laboran, Mahasiswa, Asisten, Laboran Dan Dosen Praktikum
Pada Pelaksanaan Praktikum
6
Tata Tertib Praktikum Laboratorium Fakultas Sains dan Teknologi
Informatika.
1. Praktikum dilaksanakan tepat waktu sesuai dengan jadwal yang
ditetapkan.
2. Mahasiswa yang terlambat datang atau absen harus memberikan
surat/bukti yang dapat dipercaya (surat dokter atau surat keterangan
kerja dari perusahaan).
3. Mahasiswa diperkenankan pindah kelompok/j am/hari praktikum
dengan syarat mengkonfirmasi 1 minggu sebelum pelaksanaan
praktikum melalui Koordinator Praktikum dan Laboran.
4. Mahasiswa harus berbusana yang sopan dan rapi (tidak diperkenankan
memakai kaos oblong dan Sandal atau sepatu sandal).
5. Mahasiswa harus meminjam alat praktikum dengan cara mengisi
Lembar Bon Peminjaman Alat yang tersedia.
6. Praktikum dianggap selesai jika mahasiswa telah menyerahkan
laporan sementara dan alat yang dipinjam dalam keadaan baik, bersih,
dan rapi.
7. Kerusakan alat yang dipinjam oleh mahasiswa menjadi tanggung
jawab penuh kelompok mahasiswa yang bersangkutan.
8. Selama praktikum berlangsung, mahasiswa dilarang merokok, makan,
bergurau, bermain alat, menghidupkan hand phone, atau pun keluar
masuk ruangan tanpa seizin dosen pembimbing / asisten pendamping.
9. Setelah melakukan praktikum, mahasiswa harus membuat laporan
sementara hasil pengamatan praktikum rangkap dua dan menyerahkan
kepada dosen pembimbing / asisten pada saat meninggalkan ruangan
untuk ditandatangani (yang nantinya dilampirkan dalam laporan
akhir).
10. Mahasiswa yang tidak melaksanakan praktikum 1 modul dinyatakan
tidak lulus.
11. Laporan Akhir Praktikum, cover-nya menggunakan Standar Fakultas
dan laporan diserahkan 2 minggu setelah jadwal masing-masing
kelompok.
7
12. Apabila Laporan diserahkan lebih dari 2 minggu maka dinyatakan
TIDAK LULUS dan laporan praktikum diserahkan ke Koordinator
Praktikum dan Laboran.
13. Mahasiswa yang dinyatakan tidak lulus Praktikum harus mengulang
di jadwal praktikum berikutnya.
Inventaris Laboratorium.
Monitor :21
CPU :21
Mouse :21
Keyboard :21
Meja :22
Kursi :25
C. Penggunaan Laboratorium.
Laboratorium untuk Praktikum Pemrograman Berbasis Web.
D. Peralatan Laboratorium.
Di laboratorium Pemrograman Berbasis Web Fakultas Sains dan Teknologi
Universitas Muhammadiyah Sidoarjo memiliki peralatan laboratorium yang
ada untuk menunjang pelaksanaan praktikum yang berupa:
1. Modul Praktikum Pemrograman Berbasis Web.
2. Komputer.
3. LCD.
4. Papan Tulis.
E. Peralatan Pendukung.
Software yang digunakan dalam Praktikum Pemrograman Berbasis Web
adalah Google Chrome, Appserv, Opera Emulator Mobile, Notepad ++.
8
BAB II
KURIKULUM
A. Analisis Materi / Instruksional

Mahasiswa diharapkan dapat:
 Menerapkan teori pemrograman web.
 Mampu mendesain/membangun aplikasi berbasis web baik statis maupun
dinamis dengan memanfaatkan PHP sebagai Server Site Scripting dan
database MySQL sebagai DBMS.
B. Silabus Praktikum
Silabus Praktikum Pemrograman berbasis Web:
1. HTML (Hypertext Markup Language).
2. CSS (Cascading Style Sheet).
3. JavaScript.
4. PHP.
5. Koneksivitas PHP dengan MySQL.
1. Desain web Mobile dengan jQuery Mobile.
C. Satuan Acara Praktikum (SAP)
Tabel 2.1 Satuan Acara Praktikum.

Perte Tujuan Topik Sub Topik
muan Instruksional
ke- Khusus (TIK)
1 Mempelajari dan HTML  Element HTML
mengimplementas  Fitur Baru HTML5
ikan elemen-  Tag - tag dalam HTML5
elemen dasar  Form
HTML kedalam
 Table HTML
suatu tampilan
 List HTML
web
 Form HTML
9
 Image HTML
 La out HTML
2 Mempelajari dan Cascading  Syntax CSS
mengimplementas Style  Bagaimana menggunakan
ikan cascading Sheets CSS
style sheet  Background CSS
kedalam suatu  Border CSS
halaman web  Margin CSS
 Padding CSS
 List CSS
 Dimensi CSS
 Klasifikasi CSS
 Layout dengan CSS
3 Mempelajari dan JavaScript  Pengenalan JavaScript
mengimplementas  Menggunakan JavaScript
ikan  Variabel JavaScript
JavaScript  Operator JavaScript
kedalam suatu
 Function JavaScript
halaman web
4 Mempelajari dan PHP  Sewer PHP
mengimplementas  Cara menginstalasi server
ikan elemen dasar  PHP)
PHP kedalam  Menampilkan script PHP
suatu halaman di browser
web  Pernyataan if
Mempelajari dan
 Pernyataan switch
mengimplementas
 Pernyataan while
ikan pernyataan
 Pernyataan do-while
kontrol, array,
 Pernyataan for
form, dari
 Pernyataan break
pemrograman
10
PHP kedalam  Pernyataan continue
suatu halaman  Pernyataan exit dan sintaks
web alternatif
 Pengenalan array
 Mengambil array dari
sebuah file
 Penggunaan include() dan
require()
 Pembuatan form
 Elemen form
 Membuat page dalam file
yang lain
5 Mempelajari dan Konektivi  Langkah-langkah
mengimplementas tas PHP mengambil data dari
ikan cara akses dengan database My-SQL
MySQL dari MYSQL  Membuat koneksi
PHP, beserta  Keluar dari koneksi
pemrograman  Memilih database yang
web database digunakan
melalui PHP  Mengetahui nama-nama
dengan MySQL table
 Membuat database dan
table
 Fungsi-fungsi MySQL
6 Mempelajari dan Desain  Langkah-langkah sebelum
mengimplementas web mendesain web mobile
ikan cara desain mobile  Membuat basic template
web mobile dengan  Membuat aplikasi mobile
dengan jQuery jQuery dengan menggabungkan
Mobile Mobile PHP, MYSQL, danjQuery
 Mobile
11
12

2021-2023
LEMBAR ASISTENSI
Praktikum Pemrograman Berbasis Web

Pokok Bahasan I
Judul : HTML (Hypertext Markup Language)

NIM : 2110080200087
Kelompok :4
Dilaksanakan :
Mengetahui,
Dosen Praktikum Asisten Praktikum
(Ika Ratna Indra Astutik, S.Kom, MT.) (Vini Rahmawati)

BAB III
MATERI MODUL
POKOK BAHASAN I
HTML (Hypertext Markup Language)
A. Tujuan
1. Mengenal dan mengetahui tenang pemrograman berbasis HTML
2. Memahami dan mengetahui struktur dan fitur-fitur HTML
3. Mahasiswa mampu menuliskan kode-kode HTML
4. Memahami tentang pembuatan dan fungsi form.
B. Dasar Teori
HTML adalah (Hypertext Markup Language) sebuah bahasa standar yang
digunakan oleh browser untuk membuat halaman dan dokumen pada sebuah
Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel.
HTML juga dapat digunakan sebagai lilfl<link antara file-file dalam situs
atau dalam komputer dengan menggunakan localhost atau yang
menghubungkan antar situs dalam dunia internet.
Standar minimum elemen HTML adalah:

 Document Type Declaration (DTD)
 Head
 Body
<DTD>
<html>
<head>
<!—terdiri dari elemen-elemen yang mendeklarasikan konten sebagai
pendukung lingkungan seperti title, meta dokumen, CSS, Javascript -->
</head>
<body>
<!—terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan
web -->
14
</body>
</html>
DTD
Sebagai standar versi dokumen W3C yaitu suatu deklarasi yang digunakan
untuk mengidentifikasi jenis dokumen HTML yang digunakan sehingga
browser dapat menentukan bagaimana memperlakukan kode tersebut.
Contoh DTD pada HTML versi 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/htm14/loose.dtd>
Meta Dokumen
Elemen meta sebagai identitas dari halaman web yang biasa terdiri dari
owner, keyword, layout, ataupun inisialisasi proses seperti refresh.
Contoh:
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-
8"/>
 <meta name="kewords" content="blog, web development, indonesia,
html, css"/>
 <meta name="description" content="Tentang dasar-dasar HTML"/>
Keterangan tag-tag lainnya dapat dilihat pada tabel 3 dibawah.

Pada perkembangannya versi HTML yang dimulai dipakai saat ini adalah
HTML5 (HTML Versi 5) yang merupakan standar bam pada pemrograman
web berbasis HTML. HTML5 menawarkan fitur baru dan kemudahan
penggunaan tag-tag html. HTML5 menggantikan versi HTML sebelumnya,
HTML 4.01 yang diperkenalkan pada 1999. Sejak saat itu, telah terjadi
banyak perubahan pada web. Walaupun HTML5 masih dalam tahap
pengembangan, namun browser-browser modern sudah banyak yang
mendukung standar HTML baru ini. Untuk tag-tag html versi sebelumnya
masih dipakai di modul
15
Fitur Baru HTML5
HTML5 menawarkan banyak fitur yang menarik. Berikut ini adalah beberapa
fitur
HTML5 yang cukup menarik.
 Tag <canvas> untuk menggambar 21)
 Tag <video> dan <audio> untuk media playback
 Mendukung penyimpanan lokal
 Tag khusus, <articel>, <footer> <header>, <nav>, <section>
 Kontrol bam pada form, seperti kalender, tanggal, waktu, email, url,
dan search
Tabel 3.1 Tag-tag dalam HTML5

Tag Deskripsi
<!-..-> Mendefinisikan komentar
<!DOCTYPE> Mendefinisikan jenis document
<a> Mendefinisikan hyperlink
<area> Mendefinisikan area
<article> Mendefinisikan artikel
<aside>* Mendefinisikan content selain content halaman
<audio>* Mendefinisikan audio
<b> Mendefinisikan text tebal
<body> Mendefinisikan elemen body
<br> Mendefinisikan baris baru
<button> Mendefinisikan document button/tombol
<canvas>* Mendefinisikan document grafis
<caption> Mendefinisikan document table caption
<col> Mendefinisikan atribut untuk kolom table
<colgroup> Mendefinisikan kolom table
<command>* Mendefinisikan perintah tombol
<datalist>* Mendefinisikan dropdown list
<dd> Mendefinisikan definisi deskripsi
<del> Mendefinisikan text yang di hapus
<details>* Mendefinisikan suatu elemen
<dialog>* Mendefinisikan dialog (conversation)
<div> Mendefinisikan bagian dalam suatu document
<dl> Mendefinisikan daftar
<dt> Mendefinisikan istilah
<cm> Mendefinisikan text rapat
16
<embed>* Mendefinisikan eksternal content
<fieldset> Mendefinisikan fieldset
<figure>* Mendefinisikan isi media, dan keterangan
<footer>* Mendefinisikan bagian footer
<form> Mendefinisikan formulir
<hl> ampai <h6> Mendefinisikan header
<head> Mendefinisikan informasi tentang document
<header>* Mendefinisikan sebuah header untuk bagian suatu
halaman
<hgroup> * Mendefinisikan informasi tentang bagian sebuah
document
<hr> Mendefinisikan garis horizontal
<html> Mendefinisikan document html
<i> Mendefinisikan text italic
<iframe> Mendefinisikan inline sub frame
<img> Mendefinisikan gambar
<input> Mendefinisikan input
<keygen>* Mendefinisikan sebuah kunci yang dihasilkan
dalam bentuk
<label> Mendefinisikan label untuk form
<legend> Mendefinisikan judul di fieldset
<li> Mendefinisikan list
<link> Mendefinisikan referensi sumber
<map> Mendefinisikan peta gambar
<mark>* Mendefinisikan text yang ditandai
<menu> Mendefinisikan daftar menu
<meta> Mendefinisikan meta information
<meter>* Mendefinisikan ukuran yang sudah di tetapkan
<nav> Mendefinisikan navigation link
<noscript> Mendefinisikan bagian noscript
<object> Mendefinisikan sebuah object
<ol> Mendefinisikan daftar angka
<optgroup> Mendefinisikan gup pilihan
<option> Mendefinisikan drop-down option
<output>* Mendefinisikan beberapa jenis output
<p> Mendefinisikan paragraph
<pre> Mendefinisikan text ke format awal
<progress>* Mendefinisikan kemajuan suatu tugas apapun
<rp>* Digunakan untuk menentukan apakah browser
mendukung ruby
<rt>* Menjelaskan tentang penggunaan ruby
<ruby>* Mendefinisikan ruby annotations
17
<script> Mendefinisikan script
<section>* Mendefinisikan section
<select> Mendefinisikan selectable list
<small> Mendefinisikan text kecil
<source>* Mendefinisikan section
<span> Mendefinisikan bagian dalam sebuah document
<strong> Mendefinisikan text paket/tabel
<style> Mendefinisikan style untuk CSS
<sub> Mendefinisikan subscripted text lawan pangkat
<sup> Mendefinisikan superscripted text pangkat
<table> Mendefinisikan table
<tbody> Mendefinisikan table body
<td> Mendefinisikan table cell
<textarea> Mendefinisikan text area
<tfoot> Mendefinisikan table footer
<th> Mendefinisikan table header
<thead> Mendefinisikan table header
<time>* Mendefinisikan date/time
<title> Mendefinisikan judul dokumen
<tr> Mendefinisikan baris table
<ul> Mendefinisikan daftar
<video>* Mendefinisikan video
Keterangan: Yang bertanda ( *) adalah tag bam yang tidak ada di html 4.
Dari tabel tag-tag html diatas kita tidak perlu menghafal semua, karena pada
pengaplikasiannya tidak semua tag dipakai.
C. Instruksi Percobaan Praktikum

 Buat direktori/folder kerja dengan nama direktori sesuai dengan NIM
anda masing-masing.
 Ketik dokumen percobaan pada notepad atau notepad++
 Simpan file hasil kerja anda pada folder yang sudah anda buat dengan
ekstensi .html
 Jelaskan file hasil kerja anda pada browser seperti Mozilla atau Google
Chrome (ada beberapa latihan mengharuskan anda menggunakan Google
Chrome). Dan buat Laporan
D. Lembar Kerja dan Tugas
18
Mengawali dokumen HTML5
Dokumen HTML5 diawali dengan tag yang sederhana dari pada HTML 4.01.
cukup mendeklarasikan kode berikut untuk menunjukan sebuah dokumen
HTML5.
<!DOCCTYPE html>
Hanya dengan tag sederhana tersebut, anda sudah siap untuk melakukan
scripting.
Berikut ini adalah contoh dari dokumen HTML5.
Belajar html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Html </title>
</head>
<body>
Belajar Html pad praktikum pemrograman Web
</body>
</html>
Hasil Output:
Gambar 3.1 Bentuk dasar sintaks Html
Form
Form di bentuk dengan menggunakan pasangan tag <form> dan </form>.
Ada
Ada 2 atribut yang mengikuti yaitu Action dan Method
1. Action menentukan URL yang akan dijalankan dan menerima semua
masukan pada formulir.
19
2. Method digunakan untuk menentukan bagaimana informasi dikirim
ke URL yang disebutkan oleh Action, nilai yang sering digunakan
berupa atribut GET dan POST
- Post membuat informasi dikirim secara terpisah dengan URL.
- Get membuat informasi dikirim menjadi satu dengan URL.
Bentuk Penulisan sebagai berikut.
<FORM ACTION="" METHOD=”POST:>…….</FORM>
Textbox tanpa Validasi

Script:
<!DOCTYPE html>
<html>
<head>
<title>Textbox </title>
</head>
<body>
<h2> Textbox Tanpa Validasi</h2>
<p>
<form method="post" action="">
<input name="textBox" type="text"
id="textBox" size="30" />
<input name="btnSubmit" id="btnSubmit"
type="submit" value="submit"/>
</form>
</p>
</body>
</html>
Hasil Output:
20
Gambar 3.2 Textbox tanpa validasi
Textbox dengan validasi

Yang ditulis tebal adalah berfungsi untuk validasi pada textbox tanpa
JavaScript (pada versi html sebelumnya validasi dilakukan dengan
JavaScript) agar textbox tersebut harus diisi.
Script:
<!DOCTYPE html>
<html>
<head>
<title>Textbox2 </title>
</head>
<body>
<h2> Textbox Validasi di HTML 5 </h2>
<p>
<input name="textBox" type="text"
id="textBox" size="30" required="required"
placeholder="Texbox in harus diisi" />
</form>
</p>
</body>
</html>
Hasil Output:
21
Gambar 3.3 Textbox dengan validasi
Password
Script:
<!DOCTYPE html>
<html>
<head>
<title>password</title>
</head>
<body>
<p>
<form method="post" action=""> Password:
<input name="textBox" type="password"
id="password" size="30" required="required"
placeholder="Text Box ini harus diisi" />
type="submit" value="Submit" />
</form>
</p>
</body>
</html>
Hasil Output:
Gambar 3.4 Tampilan isian password
22
Checkbox
Script:
<!DOCTYPE html>
<html>
<head>
<title>checkbox</title>
</head>
<body>
<form>
Jurusan Di Fakultas Teknik UMSIDA : <br>
<input type ="checkbox" name="informatika"
CHECKED> Informatika <br>
<input type ="checkbox" name="mesin" >
Mesin <br>
<input type ="checkbox" name="industri" >
Industri <br>
<input type ="checkbox" name="elektro" >
Elektro <br>
</form>
</body>
</html>
Hasil Output;
Gambar 3.5 Tampilan checkbox
Dropdown / Select
Script:
<!DOCTYPE html>
23
<html>
<head>
<title>select - Model Drop Down</title>
</head>
<body>
<form>
Matakuliah Yang Aku Sukai : <br>
<select name= "matakuliah">
<option value= "Sistem Operasi"> Sistem
Operasi
<option value= "Jaringan Komputer"
selected>Jaringan Komputer
<option value= "PTI"> PTI
<option value= "Pascal"> Pascal
<option value= "Lain-lain"> Lain-lain
</select>
<br>
</form>
</body>
</html>
Hasil Output:
Gambar 3.6 Tampilan dropcown/select
Text area
Script:
<!DOCTYPE html>
<html>
<head>
<title>textarea</title>
24
</head>
<body>
<form> Catatan : <br>
<textarea name= "komentar" rows="5"
cols="40" wrap>
silahkan masukkan komentar anda
</textarea> <br>
</form>
</body>
</html>
Hasil output:
Gambar 3.7 Tampilan textarea
Input tanggal
Script:
<!DOCTYPE html>
<html>
<head>
<title>tanggal</title>
</head>
<body>
<h2> Input Tanggal</h2>
<p>
<form method="post" action=""
>Tempat/Tanggal lahir :
<input type="date" name="ttl" />
25
</form>
</p>
</body>
</html>
Hasil output:
Gambar 3.8 Tampilan input tanggal
Input email
Script:
<!DOCTYPE html>
<html>
<head>
<title>Email</title>
</head>
<body>
<h2> Input Email</h2>
<p>
email :
<input type="email" name="email" />
</form>
</p>
</body>
26
</html>
Hasil output:
Gambar 3.9 Tampilan input email
Radio
Script:
<!DOCTYPE html>
<html>
<head>
<title>Radio</title>
</head>
<body>
<form>
<h2> Jenis Kelamin: </h2><br>
<input type ="radio" name="jk" CHECKED>
Pria <br>
<input type ="radio" name="jk" CHECKED>
Wanita <br>
</form>
</body>
</html>
Hasil output:
Gambar 3.10 Tampilan radio
27
Image
Script:
<!DOCTYPE html>
<html>
<head>
<title>image</title>
</head>
<body>
<form>
<h2> Image</h2><br>
<img src="logo-umsida.png" width="200px"
height="100px" alt="photo">
</form>
</body>
</html>
Hasil output:
Gambar 3.11 Tampilan image
File browser
Script:
<!DOCTYPE html>
<html>
<head>
<title>File</title>
</head>
<body>
28
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<h2>File Browser</h2><br>
<input type="file" name="upload" value=""
width="200" >
</form>
</body>
</html>
Hasil output:
Gambar 3.12 Tampilan file browser
List
Script:
<!DOCTYPE html>
<html>
<head>
<title>list</title>
</head>
<body>
<h2> Menu </h2>
<ol>
<li>Makanan
<ul>
<li>Nasi Goreng</li>
<li>Sate Ayam</li>
29
</ul>
</li>
<li>Minuman
<ul>
<li>Es Jeruk</li>
<li>Es Teh</li>
</ul>
</li>
</ol>
</body>
</html>
Hasil output:
Gambar 3.13 Tampilan list
Tabel
Untuk membuat table dengan menggunakan pasangan Tag <table> dan
</table>.
Yang terdiri dari atribut:
a. Align: untuk rata kiri (left), tengah (center), dan kanan
(right).
b. Bgcolor: warna latar belakang dari table.
c. Border: ukuran lebar border tabel.
d. cellpanding: jarak isi cell, dengan batas cell.
e. Width: mengatur lebar tabel dalam pixel.
f. Heigt: mengatur tinggi tabel dalam pixel.
Kemudian diikuti dengan tag:
1. <tr> untuk membuat baris, terdiri dari
30
a. Align : perataan (left, center, and right).
b. Valign : perataan veltikal (top, middle, and bottom).
c. Bgcolor : untuk warna background dan baris.
2. <th> untuk membuat header tabel.
3. <td> untuk membuat kolom.
a) Align : perataan (left, center, and right).
b) Valign : perataan vertikal (top, middle, and bottom).
c) Bgcolor : untuk warna background dan baris.
d) Colspan : menggabungkan kolom.
e) Rowspan : menggabungkan baris.
f) Width : mengatur lebar tabel dalam pixel.
g) Heigt : mengatur tinggi tabel dalam pixel.
h) Background : latarbelakang gambar.
Tabel 3 baris 2 kolom

Script:
<!DOCTYPE html>
<html>
<head>
<title>tabel</title>
</head>
<body>
Contoh tabel 3 baris 2 kolom <br /><br />
<table border="1">
<tr>
<td>NO</td>
<td>NAMA</td>
</tr>
<tr>
<td>1</td>
<td> Mochammad Zien Rifqi </td>
</tr>
31
<tr>
<td>2</td>
<td> Ika Ratna Indra Astutik, S.Kom,
MT </td>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.14 Tampilan tabel
Rowspan
Script:
<!DOCTYPE html>
<html>
<head>
<title>Tabel</title>
</head>
<body>
Contoh tabel 3 baris 4 kolom<br />
dengan beberapa sel yang dimerger <br /><br />
<table border="1">
<tr>
<td rowspan="2">baris 1,2 kolom 1</td>
<td rowspan="2">baris 1,2 kolom 2</td>
<td>baris 1 kolom 3</td>
32
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.15 Tampilan rowspan tabel
Colspan
Script:
<!DOCTYPE html>
<html>
<head>
<title>tabel</title>
</head>
<body>
33
Contoh tabel 3 baris 4 kolom<br />
dengan beberapa sel yang dimerger <br /><br />
<table border="1">
<tr>
<td colspan="3">baris 1 kolom
1,2,3</td>
</tr>
<tr>
<td colspan="2">baris 2 kolom 2,3</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.16 Tampilan colspan tabel
Tugas
34
1. Membuat form formulir data diri dengan nama, alamat nomer telp harus
diisi, serta url dan email harus bisa mendeteksi apakah inputan sesuai
dengan format url dan email.
Script:
<!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.0">
<title>Formulir Data Diri</title>
</head>
<body>
<form action="" method="post">
<h1>FORMULIR DATA DIRI</h1>
<table border="0" style="color:#000000">
<tr>
<td>Nama</td><td>:</td>
<td><input type="text"
placeholder="Isikan nama anda disini"></td>
</tr>
<tr>
<td>Alamat</td><td>:</td>
<td><input name="text" type="text"
cols="22" rows="3 required="required"
placeholder="Alamat in harus diisi" /></td>
</tr>
<tr>
<td>Tanggal Lahir</td><td>:</td>
<td><input type="Date"></td>
35
</tr>
<tr>
<td>No Hp</td><td>:</td>
<td><input type="number"
name="number" size="14" required="required"
placeholder="No Hp harus diisi"></td>
</tr>
<tr>
<td>URL</td><td>:</td>
<td><input type="url" name="url"
required="required" placeholder="URL harus
diisi"></td>
</tr>
<tr>
<td>E-mail</td><td>:</td>
<td><input type="email"
name="email" required="required" placeholder="Email
harus diisi"></td>
</tr>
<tr>
<td>Jurusan</td><td>:</td>
<td>
<select>
<option>*Pilih
Jurusan*</option>
<option>Informatika</option>
<option>Teknik
Mesin</option>
<option>Teknik
Elektro</option>
36
<option>Teknik
Industri</option>
<option>Teknik
Sipil</option>
<option>Agroteknologi</option>
<option>Teknologi
Pangan</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="btnSubmit"
<input type="reset"
name="reset" value="Batal"/></td>
</tr>
</table>
</form>
</body>
</html>
Hasil output:
Ketika ada filed yang kosong
37
Gambar 3.17 Form data diri 1
Ketika url atau email tidak sesuai format
Ketika semua inputan terisi dan sesuai format
38
2. Membuat layout menggunakan tabel

Script:
<!DOCTYPE html>
<html>
<head>
<title>Tugas 2</title>
</head>
<body>
<table border="1" align="center"
bgcolor="#6495ED" height="15%" width="60%">
<tr><th><h3>HEADER</h3></th></tr>
</table>
<table border="1" align="center" width="60%"
colspan="4" bgcolor="#ADFF2F">
<tr align="center">
<td><a href="home">HOME</a></td>
<td><a href="profil">PROFIL</a></td>
<td><a href="galeri">GALERI</a></td>
<td><a href="content">CONTENT</a></td>
</tr>
</table>
39
<table border="1" align="center"
bgcolor="#FEFF80" width="60%" >
<tr>
<td align="center" width="25%"
valign="top" colspan="2" style="border-right: 0;">
<img src="logo.png" width="150px"></td>
<td style="border-left: 0;">
<p>Sampai saat ini Universitas
Muhammadiyah Sidoarjo telah meiliki fakultas-fakultas
dan program studi, yaitu:
<p><b>Program Sarjana</b></p>
<p>Universitas Muhammadiyah Sidoarjo
terdiri dari 8 Fakultas, antara lain:
<ul>
<li><a href="Fakultas
Tarbiyah">Fakultas Tarbiyah</a></li>
<li><a href="Fakultas Keguruan dan
Ilmu Pendidikan">Fakultas Keguruan dan Ilmu
Pendidikan</a></li>
Pertanian">Fakultas Pertanian</a></li>
Ekonomi">Fakultas Ekonomi</a></li>
Isipol">Fakultas ISIPOL</a></li>
Teknik">Fakultas Teknik</a></li>
Psikologi">Fakultas Psikologi</a></li>
Hukum">Fakultas Hukum</a></li>
</ul>
40
<p><b><a href="Program
Magister(S2)">Program Magister(S2) </a></b></p>
memiliki 2 Program Pasca Sarjana:</p>
<ul>
<li>Magister Manajemen</li>
<li>Magister Pendidikan
Islam</li></ul></p></p></td>
<td width="25%">
<b> Link</b>
<ul>
<li><b><a href="Maps Umsida">Maps
UMSIDA</a></b></li><br/>
<li><b><a href="Radio
Umsida">Radio UMSIDA</a></b></li></ul>
</td>
</tr>
</table>
<table border="1" align="center" width="60%"
bgcolor="D3D3D3">
<tr><td align="center"><i><b>COPYRIGHT
&copy 2013-2014 PEMROGRAMAN WEB UMSIDA. ALL RIGHT
RESERVED</b><br/><br/><br/>
Thema by: mochammad zien
rifqi</i></td></tr>
</table>
</body>
</html>
Hasil output:
41
Gambar 3.20 Layout menggunakan tabel
42
REFERENSI
- Abdul Kadir., Pemrograman web mencakup: Html, CSS, Java Script dan
PHP, Andi Offset, Yogyakarta, 2003.
- Imam Heryanto, Budi Raharjo, Enjang R.K., Modul Pemrograman Web
(HTML, PHP & MySql), Modula, 2012.
- Arief Ramadhan, Pemrograman Web Menggunakan HTML, CSS, dan
JavaScript, Elex Media Komputindo, Jakarta, 2006.
- http://www.w3schools.com.
- http://html5mudah.blogspot.com/2013/07/pengenalan-html5.html.
43

2022-2023
LEMBAR ASISTENSI

Pokok Bahasan II
Judul : CSS (Cascading Style Sheet)

NIM : 211080200087
Kelompok :4
Dilaksanakan :
Mengetahui,
(Ika Ratna Indra Astutik, S.Kom, MT.) (Vini Rahmawati)
44
POKOK BAHASAN II
CSS (Cascading Style Sheet)
A. Tujuan
1. Mahasiswa mampu membuat style sheet pada dokumen HTML
2. Mahasiswa memahami aturan penulisan pada CSS
3. Mahasiswa mampu membuat layout website dengan CSS
B. Dasar Teori
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan
beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam. CSS bukan merupakan bahasa pemrograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word
yang dapat mengatur beberapa style, misalnya heading, subbab, body text,
footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file).
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang
dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran
gambar, warna bagian tubuh pada teks, warna table, ukuran border, warna
border, warna hyperlink, warna mouse over, spasi antar paragraph, spasi antar
teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.
Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda.
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak
(parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi
internet yang direkomendasikan oleh World Wide Web Consortium atau
W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan
Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak
hampir mendekati dengan standar CSS.
45
Versi
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1
dikembangkan berpusat pada pemformatan dokumen HTML, CSS2
dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar
bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS
yang mampu melakukan banyak hal dalam desain website. CSS3 mendukung
penentuan posisi konten, downloadable, huruf font, tampilan pada table /table
layout dan media tipe untuk printer. Kehadiran CSS yang ketiga diharapkan
lebih baik dari versi pertama dan kedua.
Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
color: #0789de;
}
Bagian pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang

diapit oleh ‘{}’ disebut declaration yang terdiri dari dua unsur, yaitu property
dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color
adalah property, dan #0789de adalah value. Selain itu ada tiga metode
penulisan CSS atribut, yaitu:
Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara
penulisannya cukup dengan menambahkan atribut style=”…”dalam tag
HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan
tidak akan memengaruhi tag HTML yang lain.
Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag
<body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan
digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag
HTML yang bersangkutan.
External Style Sheet
46
Menempatkan aturan CSS secara terpisah, style sheet external terhubung
dengan dokumen melalui elemen head. File style sheet text disimpan
menggunakan ekstensi .css.
Syntax CSS
Syntax pada CSS terdiri dari tiga bagian, yaitu selector, property dan value
Selector {property:
value}
Bagian selector untuk menentukan pada elemen/tag HTML apa style tersebut
diterapkan. Selector dapat berupa nama Id elemen atau nama class. Property
dapat diisi dengan jenis warna, ukuran, perataan margin dll, sedangkan value
diisi dengan nilai property nya, misalnya red untuk warna dll. Setiap akhir
penulisan property dan value diakhiri dengan tanda titik koma (semicolon).
Tanda ini juga digunakan sebagai pemisah antar satu property dengan
property lain.
Gambar 3.21 Selector
Jika value lebih dari sebuah kata, maka harus diapit dengan tanda kutip ganda
diantara value:
p{font-family: “sans serif”}
Jika Anda ingin menetapkan lebih dari satu property, maka property harus
dipisahkan dengan titik koma (semicolon). Berikut ini adalah contoh yang
menampilkan pendefinisian elemen paragraph agar rata tengah serta warna
text nya adalah merah:
p{text-align:center;color:red}
47
Agar definisi style lebih mudah dibaca, maka kita dapat menuliskannya
dengan bentuk berikut:
P{
Text-align: center;
Color: black;
Font-family: arial
}
Grouping
kita dapat mengelompokkan selector, pisahkan setiap selector dengan sebuah
koma. Berikut ini adalah contoh pengelompokan elemen header yang
memiliki style warna teks yang sama:
Class Selector
Dengan menggunakan class selector, kita dapat mendefinisikan style yang
berbeda untuk elemen HTML yang sama. Secara umum syntax style untuk
class adalah sebagai berikut:
.namaKelas{
Property1: value1;
Property2: value2;
.
.
}
Misalnya kita ingin mendefinisikan dua buah tipe paragraph yaitu paragraph
dengan rata kanan, sedang yang lainnya adalah rata tengah. Berikut bentuk
penulisannya:
p.right {text-align: right}

p.center {text-align: center}
Dalam dokumen HTML kita harus menambahkan atribut class:
<p class=”right”>This paragraph will be right-aligned. </p>

<p class=”center”>This paragraph will be center-aligned.
Pada contoh dibawah ini, semua elemen HTML dengan class=”center”, akan
menjadikan rata tengah.
.center {text-align: center}
48
Pada dokumen HTML dibawah, elemen h1 dan elemen p menggunakan class
“center”, artinya kedua elemen tersebut akan mengikuti aturan pada selector
“center”:
<h1 class=”center”>This heading will be center-aligned </h1>

<p class=”center”>This paragraph will also be center-aligned </p>
Id selector
Kita juga dapat mendefinisikan style dengan menggunakan id selector. Id
selector didefinisikan dengan menggunakan karakter #. Berikut adalah contoh
penggunaan id selector:
#green {color: green}
Aturan style dibawah ini akan diterapkan pada elemen p yang menggunakan
id dengan value adalah “para1”.
p#para1 {
text-align: center;
color: red}
Komentar pada CSS

Komentar digunakan untuk menjelaskan baris kode Anda, sehingga dapat
membantu juga suatu hari nanti Anda akan melakukan pengeditan terhadap
source code. Sebuah komentar akan diabaikan oleh browser. Komentar pada
CSS dimulai dengan /* dan diakhiri dengan */, seperti contoh berikut:
/* This is a comment */
p{
text-align: center;
/* This is anhoter comment */
color: black
font-family: arial
}

 Ketik dokumen halaman web pada Notepad atau notepad++
 Capture screen hasil tampilan pada browser
 Buat laporan dari hasil percobaan dan tugas
49
1. External style sheet
Exl.css
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p{margin-left: 50px}
exl.html
<!DOCTYPE html>
<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css"
href="exl.css">
</head>
<body>
<h1> Thisi header is 36 pt</h1>
<h2> This header is blue</h2>
<p> This paragraph has a left margin of 50

pixels</p>
</body>
</html>
Hasil output:
Gambar 3.22 Html dengan eksternal style sheet
50
2. Internal style sheet
Script:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1
{ text-decoration: overline; text-align:
center; color: red;
}
h2
{
text-decoration: line-through; text-
align: left; color: green;
}
h3{
text-decoration: underline; text-
align: right
}
hr
{
color:pink;
}
</style>
<title>Internal Style Sheet</title>
</head>
<body>
<h1>This is header 1</h1>
<hr>
<hr>
51
<hr>
</body>
</html>
Hasil output:
Gambar 3.23 Html dengan internal style sheet
3. Inline style
Script:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1 style="color:red; text-
align:center;">Paragraf Pertama</h1>
<p style="color:white; background:red;
font-family:arial;">
Ini adalah paragraf pertama. Ini
adalah paragraf pertama. Ini adalah paragraf pertama.
</p>
<h1 style="color:orange; text-
align:right;">Paragraf Kedua</h1>
<p style="color:yellow;
background:orange; font-family:verdana;">
52
Ini adalah paragraf kedua. Ini adalah
paragraf kedua. Ini adalah paragraf kedua.
</p>
</body>
</html>
Hasil output:
Gambar 3.24 Html dengan inline style sheet
4. Background
a. Background color
Script:
<!DOCTYPE html>
<html>
<head>
<title>Background color</title>
body{
background-color: #ffcc66;
}
h1 {
color: #ff0000;
background-color: #ffff00;
}
53
</style>
</head>
<body>
<h1>Heading 1, dengan warna text merah dan
belakangnya adalah kuning</h1>
</body>
</html>
Hasil output:
Gambar 3.25 Background
Script:
<!DOCTYPE html>
<html>
<head>
<title>Background Repeat</title>
body
{
background-color: #FFCC66;
background-image: url("faiq.jpg");
background-repeat: no-repeat;
}
h1
{
color: #33CC00;
text-align: center;
}
</style>
54
</head>
<body>
<h1>Hi....welcome to my simple web
page</h1>
</body>
</html>
Hasil output:
Gambar 3.26 Background di html
Ubah value/nilai dari property background-repeat diatas dengan nilai

repeat-x, repeat-y dan repeat jika ingin membuat background repeat.
Capture tiap tampilan pada browser!
Script:
<!DOCTYPE html>
<html>
<head>
body
{
background-repeat: repeat-x;
}
h1
{
color: #33CC00;
55
text-align: center;
}
</style>
</head>
<body>
page</h1>
</body>
</html>
Hasil output:
Gambar 3.27 Background html dengan repeat x
Script:
<!DOCTYPE html>
<html>
<head>
body
{
background-repeat: repeat-y;
56
}
h1
{
color: #33CC00;
text-align: center;
}
</style>
</head>
<body>
page</h1>
</body>
</html>
Hasil output:
Gambar 3.28 Html background dengan repeat y
5. Pengaturan margin
a. Pengaturan margin pada elemen tabel
Script:
<!DOCTYPE html>
<html>
<head>
57
<title>Pengaturan Margin Pada Elemen
Tabel</title>
table.margin {
margin-left: 1cm;
}
</style>
</head>
<body>
<p>Paragraf ini tidak diberikan pengaturan
margin</p>
<table class="margin" width="50%"
border="1">
<tr>
<td>Table dengan margin kiri 1 cm</td>
</tr>
<tr>
<td>&nbsp</td>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.29 Pengaturan margin
6. Pengaturan padding
a. Pengaturan padding elemen heading
58
Script:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Padding Pada Elemen
Heading</title>
h1 {
background: yellow;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 2px;
padding-left: 300px;
}
h2 {
background: orange;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<h2>i Really love The internet !!!</h2>
</body>
</html>
Hasil output:
59
Gambar 3.30 Pengaturan padding elemen heading
b. Pengaturan padding pada tabel[1]

Script:
<!DOCTYPE html>
<html>
<head>
<title>Set the top padding of a
tablecell</title>
td {
padding-right: 2cm;
font-style: italic;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is tablecell with a top
padding</td>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.31 Pengaturan padding tabel 1
60
c. Pengaturan padding pada tabel [2]
Script:
<!DOCTYPE html>
<html>
<head>
<title>Set padding properties in one
declaration</title>
td test1 {
padding: 1.5cm;
}
td test2 {
padding: 0.5cm 2.5cm;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is table cell with equal padding
on each side
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
61
This is table cell has a top and
bottom padding of 0.5cm and a left and right
padding of 2.5cm
</td>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.32 Pengaturan padding tabel 2
7. Pengaturan dimensi gambar

Script:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Dimensi Gambar</title>
img.normal {
height: auto;
width: auto;
}
img.besar {
height: 300px;
width: 300px;
}
img.kecil {
height: 40px;
62
width: 50px;
}
</style>
</head>
<body>
<img class="normal" src="faiq.jpg">&nbsp
<img class="besar" src="faiq.jpg">&nbsp
<img class="kecil" src="faiq.jpg">&nbsp
</body>
</html>
Hasil output:
Gambar 3.33 Dimensi gambar
8. Pengaturan ukuran border (border-width)

Script:
<!DOCTYPE html>
<html>
<head>
<title>Border Width</title>
p{
63
text-align:center;
font-size:14pt;
font-style:italic;
background-color:orange;
}
p.one{
border-width:6px;
border-style:solid;
}
p.two{
border-width:10px;
border-style:solid;}
p.three{
border-width:thin;
border-style:dashed;
}
p.four{
border-width:medium;
}
p.five{
border-width:thick;
}
</style>
</head>
<body>
<p class="one">Border width 6px</p>
<p class="two">Border width 10px</p>
<p class="three">Border width thin</p>
<p class="four">Border width medium</p>
<p class="five">Border width thick</p>
64
</body>
</html>
Hasil output;
Gambar 3.34 Pengaturan ukuran border
Pengaturan border width pada setiap sisi

Script:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Border Width</title>
p.ubah{
border-top-width:6px;
border-right-width:8px;
border-bottom-width:20px;
border-left-width:15px;
border-color:#448866;
font-size:18px;
font-style:italic;
width:500px;
height:75px;
text-align:center;
}
</style>
</head>
<body>
65
<p class="ubah">Menggunakan pengaturan
border width pada tiap sisinya</p>
</body>
</html>
Hasil output:
14
Gambar 3.35 Pengaturan border width
9. Pengaturan warna border

a. Pengaturan warna border
Script;
<!DOCTYPE html>
<html>
<head>
<title>Border Color</title>
p{
text-align:center;
font-size:14pt;
font-style:italic;
border-width:6px;
}
p.blue{
border-color:#0000FF;
border-style:solid;
66
}
p.red{
border-color:red;
}
p.purple{
border-color:purple;
border-style:double;
}
</style>
</head>
<body>
<p class="blue">Border color blue</p>
<p class="red">Border color red</p>
<p class="purple">Border color purple</p>
</body>
</html>
Hasil output;
Gambar 3.36 Pengaturan warna border
b. Pengaturan warna setiap sisi border

Script:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Warna Border Tiap
Sisi</title>
67
p.warna{
color:white;
background-color:grey;
border-width:10px;
border-top-color:red;
border-right-color:black;
border-bottom-color:yellow;
border-left-color:blue;
width:300px;
padding:20px
}
</style>
</head>
<body>
<p class="warna">Contoh Text yang
dikelilingi border style double dengan pengaturan
warna tiap sisi bordernya</p>
</body>
</html>
Hasil output:
Gambar 3.37 Pengaturan warna border setiap sisi
10. Pengaturan atribut link CSS

Script:
<!DOCTYPE html>
68
<html>
<head>
<title>Percobaan link CSS</title>
a:link{
color:green; text-decoration:none;
}
a:active{
color:purple; text-decoration:none;
}
a:visited{
color:yellow; text-decoration:none;
}
a:hover{
color:black; text-
decoration:underline;
}
</style>
</head>
<body>
<a href="www.google.com" target="_self">
Mesin pencari Google </a>
</body>
</html>
Hasil output:
Gambar 3.38 Pengaturan atribut link
11. Hyperlink berganti warna background saat dilewati mouse

Script:
69
<!DOCTYPE html>
<html>
<head>
<title>pengaturan pada link
background</title>
a:link{
text-decoration:none; color:green;
}
a:active{
text-decoration:none; color:blue;
}
a:visited{
text-decoration:none; color:orange;
}
a:hover{
color:black; background-color:orange;
text-decoration:underline;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td><a href="#">Arahkan mouse ke
sini</a></td>
</tr>
<tr>
<td><a href="#">Arahkan mouse ke
sini</a></td>
</tr>
70
</table>
</body>
</html>
Hasil output:
Gambar 3.39 Hyperlink
12. Hyperlink menggunakan border color untuk memberi ilusi 3D

Script:
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan link 3D</title>
.menu {
margin: 0px;
padding: 0px;
list-style: none;
}
.menu li {
margin-bottom: 3px;
}
.menu a:link, .menu a:visited {
display: block;
width: 150px;
color: #000000;
border-left: solid 3px #cccccc;
border-top: solid 3px #eeeeee;
border-right: solid 3px #888888;
border-bottom: solid 3px #666666;
71
background: #aaaaaa;
text-align: center;
padding: 2px 3px 4px 3px;
text-decoration: none;
font: 9pt Verdana, Arial, Helvetica, sans-
serif;
}
.menu a:active, .menu a:hover {
border-left: solid 3px #888888;
border-top: solid 3px #666666;
border-right: solid 3px #cccccc;
border-bottom: solid 3px #eeeeee;
background: #999999;
padding: 3px;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="link1.html" target="_blank">Link
1</a></li>
<li><a href="link1.html">Link 2</a></li>
<li><a href="link1.html">Link 3</a></li>
</ul>
</body>
</html>
Hasil output:
Gambar 3.40 Hyperlink 3D
72
13. Hyperlink menggunakan list
Script:
<!DOCTYPE html>
<html>
<head>
<title>pengaturan link menggunakan
list</title>
.menu {
margin: 0px;
padding: 0px;
list-style: none;
}
.menu li {
margin-bottom: 3px;
}
.menu a:link, .menu a:visited {
display: block;
width: 150px;
color: #3366ff;
border: solid 2px #666666;
background: #eeeeee;
text-align: center;
padding: 3px;
text-decoration: none;
font: 9pt Verdana, Arial, Helvetica,
sans-serif;
}
.menu a:active, .menu a:hover {
background: #000000;
color:#ffffff;
}
73
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Link 1</a></li>
</ul>
</body>
</html>
Hasil output:
Gambar 3.41 Hyperlink menggunakan list
14. Image rollover

Script Html:
<!DOCTYPE html>
<html>
<head>
<title>CSS Link Image</title>
<link href="ImageLink.css" rel="stylesheet"
type="text/css">
</head>
<body>
<table border="1">
<caption><b>Menu</b></caption>
<tr>
<td width="138" height="50"
align="center">
74
<a
href="home.html"><b>Home</b></a>
</td>
</tr>
<tr>
<td align="center">
<a href="about_me.html"><b>About
Me</b></a>
</td>
</tr>
</table>
</body>
</html>
Script CSS:
/* CSS Document */
a:link, a:visited,a:active{
color:#1184D5;
text-decoration:none;
background-image:url("hijau.png");
background-repeat:no-repeat;
padding: 0.5em;
margin:0.5em;
display:block;
}
a:hover{
color:#FD3E0B;
text-decoration:none;
background-image:url("kuning.png") ;
background-repeat:no-repeat;
}
Hasil output:
75
Gambar 3.42 Image rollover
15. CSS table border

Script:
<!DOCTYPE html>
<html>
<head>
<title>Table Borders</title>
table {
background-color:#FFFFFF;
width:50%;
border-collapse:collapse;
}
/* td default */
td {
background-color:#FFFFFF;
border:1px solid black;
padding:5px;
}
/* td dengan border berwarna merah */
td.Merah {
background-color:#CC0000;
border:2px solid red;
padding:20px;
}
/* td dengan border berwarna biru */
td.Biru {
76
background-color:#3399FF;
border:2px solid blue;
padding:40px;
}
</style>
</head>
<body>
<h2>The Default table</h2>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<h2>Table dengan border merah</h2>
<table>
<tr>
<td class="Merah">Cell 1</td>
</tr>
<tr>
</tr>
</table>
<h2>Table dengan border biru</h2>
<table>
77
<tr>
<td class="Biru">Cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.43 Warna tabel dengan CSS
16. Perataan teks tabel

Script:
<!DOCTYPE html>
<html>
<head>
<title>Perataan Teks Tabel</title>
table{
78
width:45%;
font-family:verdana;
font-size:11px;
border-collapse:collapse;
}
table,th,td{
border: 3px solid #000000;
}
th{
height:40px;
background-color:#009900;
color:#FFFF99;
}
td.kanan{
text-align:right;
font-style:italic;
}
td.tengah{
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>JUDUL BUKU</th>
<th width="14%">HARGA</th>
</tr>
<tr>
<td class="tengah">1.</td>
79
<td>Mahir menggunakan Ms.Word
2007</td>
<td class="kanan">Rp.
29.500</td>
</tr>
<tr>
<td>Cascading Style Sheet</td>
35.000</td>
</tr>
<tr>
<td>JavaScript untuk Pemula</td>
25.000</td>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.44 Tabel text alignment
17. Web Page Layout menggunakan tabel dan CSS

Script:
<!DOCTYPE html>
<html>
<head>
80
<title>Web Page Layout menggunakan table
dan CSS</title>
#main
{
width: 720px;
border-collapse: collapse;
border: solid #000000 1px;
}
#header
{
height: 110px;
width: 120px;
background-color: #99CC00;
color: #ffffff ;
font-family: verdana;
font-size: 25px ;
font-style: italic;
}
#content
{
font-family: Verdana,Arial,sans-
serif;
font-size: 10pt;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#navigation
{
81
width: 160px;
height: 500px;
text-align: center;
border: solid 1px red ;
font-family:
Verdana,Arial,helvetica, sans-serif;
font-size: 8pt;
line-height: 22px;
font-weight: bold;
background-color: #990000;
}
#footer
{
text-align: center;
background-color: #000000;
color:#fff666;
font-family: Verdana, Arial,
helvetica, sans-serif;
font-size: 8pt;
height: 30px;
}
</style>
</head>
<body>
<table id="main" align="center">
<tr>
<td id="header"
colspan="2">Header</td>
</tr>
<tr>
<td
id="navigation">Navigation</td>
82
<td id="content">Content</td>
</tr>
<tr>
<td colspan="2"
id="footer">Bottom Navigation</td>
</tr>
</table>
</body>
</html>
Hasil output:
Gambar 3.45 Layout dengan tabel di aCSS
Tugas
1. Rubahlah Layout di tugas pokok bahasan I (Modul) dengan
menggunakan CSS tanpa table, lalu jelaskan perbedaannya!
Scrip CSS:
body{
margin: 0;
}
.header{
height: 200px;
83
width: 100%;
background-color: skyblue;
}
.header h1{
font-family: sans-serif;
font-size: 20px;
text-align: center;
margin: auto;
padding-top: 75px;
}
.navbar{
height: 75px;
background-color: lightgreen;
margin: -16px;
}
.navbar ul li{
display: inline-block;
font-size: 20px;
padding-top: 20px;
}
.content{
width: 100%;
height: 500px;
background-color: yellow;
}
.content .img{
margin-left: 40px;
}
84
.footer{
height: 100px;
width: 100%;
background-color: lightgrey;
margin-top: -75px;
text-align: center;
}
.footer p{
padding-top: 20px;
}
.content .img{
float: left;
margin-left: 20px;
width: 30%;
}
.content .content-1{
float: left;
margin-left: 20px;
width: 30%;
}
.content .content-2{
float: left;
margin-left: 80px;
width: 30%;
}
Script Html:
<!DOCTYPE html>
<html>
<head>
85
<title>Tugas Pokok Bahasan 2</title>
<link rel="stylesheet" type="text/css"
href="tugas2.css">
</head>
<body>

<div class="header">
<h1>HEADER</h1>
</div>


<div class="navbar">
<ul><li><a href="#">HOME</a></li>
<li><a href="#">PROFIL</a></li>
<li><a href="#">GALERI</a></li>
<li><a href="#">CONTENT</a></li></ul>
</div>


<div class="content">
<div class="img">
<img src="gambar_umsida.png">
</div>
<div class="content-1">
<p>Sampai saat ini Universitas
Muhammadiyah Sidoarjo telah memiliki fakultas -
fakultas dan program studi, yakni: </p>
<p><b>Program Sarjana</b></p>

terdiri dari 8 Fakultas, antara lain : </p>
86
<ul>
<li><a href="#">Fakultas
Tarbiyah</a></li>
Keguruan dan Ilmu Pendidikan</a></li>
Pertanian</a></li>
Ekonomi</a></li>
ISIPOL</a></li>
Teknik</a></li>
Psikologi</a></li>
Hukum</a></li>
</ul>
<a href="Program Magister (S2)"></a>

memiliki 2 Program Pasca Sarjana :</p>
<ul>
<li>Magister manajemen</li>
<li>magister Pendidikan
Islam</li>
</ul>
</div>
<div class="content-2">
87
<p>Link</p>
<ul>
<li><a href="#">Maps
UMSIDA</a></li>
<li><a href="#">Radio
UMSIDA</a></li>
</ul>
</div>
</div>


<div class="footer">
<p><strong>COPYRIGHT © 2013-2014
PEMROGRAMAN WEB UMSIDA. ALL RIGHT RESERVED
</strong></p>
<p><i>Theme by : Muhammad Alfan
Rosid</i></p>
</div>
</body>
</html>
Perbedaan antara layout dengan tabel dan layout dengan css adalah
 Jika layout dengan tabel pengaturan header, nav, seidebar dan footer
menggunakan perintah tag tabel untuk mengatur posisi width dan
heightnya, sehingga dibutuhkan beberapa kolom dan baris untuk
mendisain layout tabel.
 Jika layout dengan css pengaturan header, nav, seidebar dan footer
menggunakan perintah tag div untuk mengatur posisi width dan
heightnya, tanpa membuat kolom dan baris seperti layout tabel.
88
E. Kunci Lembar Kerja
Gambar 3.46 Layout website
89
REFERENSI
- Abdul Kadir., pemrograman web mencakup: Html, CSS, Java Script dan
- Arief Ramadhan, Pemrograman Web Menggunakan HTML, CSS dan
90

2021
LEMBAR ASISTENSI

Pokok Bahasan III
Judul : Java Script

Nama : Faiq Muhammad Arsyad Ibnu Adil
NIM : 201080200116
Kelompok : 11
Dilaksanakan : 11 November 2021
Mengetahui,
(Mochamad Alfan Rosid, S.Kom., M.Kom) (Vini Rahmawati)

92
POKOK BAHASAN III
JAVA SCRIPT
A. Tujuan
1. Memahami tentang struktur JavaScript.
2. Memahami tentang pemrograman di JavaScript.
3. Memahami tentang pemakaian object dan form.
B. Dasar Teori
JavaScript adalah bahasa scrip yang ditempel pada kode HTML dan diproses
di sisi klien. Dengan adanya bahasa ini, kemampuan HTML menjadi semakin
luas. Contoh: untuk memvalidasi masukan pada formulir sebelum formulir
dikirim ke server.
JavaScript bukan bahasa java dan merupakan dua bahasa yang berbeda.
JavaScript diinterpretasikan oleh klien, sedang java dikompilasi oleh program
dan hasil kompilasinya dijalankan oleh klien.
Struktur Javascript
<script language=”javascript”>
<!—
Penulisan JavaScript kode
//-->
</script>
Keterangan  umumnya disertakan dengan tujuan agar sekiranya
browser tidak mengenali JavaScript maka browser akan memperlakukannya
sebagai komentar sehingga tidak di tampilkan di jendela browser.
JavaScript sebagai bahasa berorientasi objek

Properti
Adalah atibut dari sebuah objek. Contoh: objek mobil mempunyai property
warna mobil.
Penulisan:
nama_objek.nama_properti=nilai
93
window.defaultstatus=”selamat belajar javascript”
Metode
Adalah sekumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek.
Penulisannya:
nama_objek.nama_method(parameter)
document.write(“halo”)
Letak javascript dalam HTML

Skrip javascript dalam dokumen HTML dapat diletakkan pada:
1. Bagian head
2. Bagian body
Tabel 3.2 Aritmatic operator

Operator Description Example Result
+ Penjumlahan X=2 4
Y=2
X+y
- Pengurangan X=5 3
Y=2
X-y
* Perkalian X=5 20
Y=3
X*y
/ Pembagian 15/5 3
5/2 2.5
% Modulus 5%2 1
10%8 2
10%2 0
++ Penaikan X=5 X=6
X++
-- Penurunan X=5 X=4
94
X--
Tabel 3.3 Assignment Operator

Operator Keterangan Example Is the same
as
= Pemberian nilai X=y X=y
+= Penambahan X+=y X=x+y
bilangan
-= Pengurangan x-=y X=x-y
bilangan
*= Perkalian bilangan X*=y X=x*y
/= Pembagian x/=y X=x/y
bilangan
%= Perolehan sisa X%=y X=x%y
bagi
Tabel 3.4 Comparison Operator

Operator Description Example
== Kesamaan 5==8 return false
=== Is equel to (checks for X=5
both value and type) Y=”5”
X==y return false
X===y return false
!= Ketidaksamaan 5!=8 return true
> Lebihdari X*=y5>8 return false
< Kurangdari 5<8 return false
>= Lebihbesaratausamaden 5>= return false
gan
<= Kurangdariatausamaden 5<=8 return true
gan
95
Tabel 3.5 Comparisson Operator
Operator Description Example
&& And X=6
Y=3
(x<10&&y>1) return true
|| Or X=6
Y=3
(x==5||y==5) return false
! Not X=6
Y=3
!(x==y) return true

 Buat direktori/folder kerja dengan nama direktori sesuai dengan NIM
anda masing-masing.
 Ketik dokumen percobaan pada notepad atau notepad++.
 Simpan file hasil kerja anda pada folder yang sudah anda buat dengan
ekstensi.html.
 Jalankan file hasil kerja anda pada browser seperti Mozilla atau Google
Chrome. Dan buat laporan.

Dasar-dasar JavaScript
a. Pemakaian alert sebagai property window
Script:
<!DOCTYPE html>
<html>
<head>
<title>Alert Box</title>
</head>
<body>
<script language="javascript">
96
window.alert("Ini merupakan pesan
untuk anda");
</script>
</body>
</html>
Hasil output:
Gambar 3.47 Javascript untuk properti window
b. Pemakaian metode dalam objek

Script:
<!DOCTYPE html>
<html>
<head>
<title>script Javascript</title>
</head>
<body>
Percobaan memakai JavaScript:<br>
<script language="JavaScript">
!--
document.write("Selamat Mencoba
JavaScript")<br>
document.write("Semoga Sukses!");
</script>
</body>
</html>
97
Hasil output:
Gambar 3.48 Objek dalam javascript
c. Pemakaian Prompt
Script:
<!DOCTYPE html>
<html>
<head>
<title>Pemasukan Data</title>
</head>
<body>
var nama= prompt("Siapa nama Anda?", "Masukan nama
Anda");
document.write ("Hai,"+nama);
//-->
</script>
</body>
</html>
Gambar 3.49 Pemakaian prompt
98
d. Pembuatan Fungsi dan Cara Pemanggilannya
Script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CONTOH PROGRAM JAVASCRIPT</title>
</head>
function pesan() {
alert ("memanggil javascript lewat body onload")
}
</script>
<body onLoad="pesan()">
</body>
</html>
Hasil output:
Gambar 3.50 Fungsi dan cara pemanggilan kunci
Dasar-dasar pemrograman di Javascript

a. Operasi dasar aritmatika
Script:
<!DOCTYPE html>
<html>
<head>
99
<title>contoh program javascript</title>
</head>
function pesan(){
alert ("memanggil javascript lewat body onload")
}
</script>
<body onLoad="pesan()">
</body>
</html>
<html>
<head>
</head>
function test (val1,val2)
{
document.write("<br>"+"perkalian:
val1*val2"+"<br>")
document.write(val1*val2)
document.write("<br>"+"pembagian:
val1/val2"+"<br>")
document.write(val1/val2)
document.write("<br>"+"penjumlahan:
val1+val2"+"<br>")
document.write(val1+val2)
document.write("<br>"+"pengurangan: val1-
val2"+"<br>")
document.write(val1-val2)
document.write("<br>"+"modulus: val1%val2"+"<br>")
100
document.write(val1%val2)
}
</script>
<body>
<input type="button" name="button1"
value="aritmathic" onclick=test(9,4)>
</body>
</html>
Hasil output:
Gambar 3.51 Operasi aritmetika dengan javascript
b. Operasi relational
Script:
<!DOCTYPE html>
<html>
<head>
</head>
function test(){
val1=window.prompt("nilai I:")
101
val2=window.prompt("nilai II:")
document.write("<br>"+"val1==val2"+
"<br>")
document.write(val1==val2)
document.write("<br>"+"val1!=val2"+
"<br>")
document.write(val1!=val2)
document.write("<br>"+"val1&gtval2"
+"<br>")
document.write(val1>val2)
document.write("<br>"+"val1&ltval2"
+"<br>")
document.write(val1<val2)}
</script>
<body>
value="relational" onclick=test()>
</body>
</html>
Hasil output:
102
Gambar 3.52 Operasi rasional
c. Seleksi kondisi (if..else)

Script:
<!DOCTYPE html>
<html>
<head>
<title>Contoh if-else</title>
</head>
<body>

</script>
</body>
</html>
Hasil output:
Gambar 3.53 Seleksi kondisi if …else
d. Do while
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</script>
</body>
</html>
Hasil output:
Gambar 3.54 Operasi do while
e. Kondisi pemakaian looping (for)

Script:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script
type="text/javascript">
for (i=0; i <= 5; i++)
{
document.write("The
number is " + i)
document.write("<br/>")
105
}
</script>
<p>Explanation:</p>
<p>This for loop starts
with i=0.</p>
<p>As long as <b>i</b> is
less than, or equals to
5, the loop will continue
to run.</p>
<p><b>i</b> will increase
by 1 each time the loop
runs.</p>
</body>
</html>
Hasil output:
Gambar 3.55 Hasil Looping for
f. Penggunaan operator switch untuk seleksi

Script:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Program JavaScript</title>
106
</head>
function test ()
{
vall=window.prompt ("Input Nilai (1-5):")
switch (vall)
{
case "1" :
document.write ("bilangan satu")
break
case "2" :
document.write ("bilangan dua")
break
case "3" :
document.write ("bilangan tiga")
break
case "4" :
document.write ("bilangan empat")
break
case "5" :
document.write ("bilangan lima")
break
default :
document.write ("bilangan lainnya")
}
}
</script>
<body>
107
value="switch" onclick=test()>
</body>
</html>
Hasil output:
Gambar 3.56 Hasil seleksi switch
g. While
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
i=0 while(i<=5)
{
document.write("the number is" + i)
document.write("<br>")
i++
}
108
</script>
<p>explanation:</p>
<p><b>i</b> is equal to 0.</p>
<p>while<b>i</b>is less than, or equal to, 5, the
loop will continue
to run.</p>
<p><b>i</b> will increase by 1 each time the loop
runs.</p>
</body>
</html>
Hasil output:
Gambar 3.57 Hasil perintah while
Pembuatan form input

a. Form input
Script:
<!DOCTYPE html>
<html>
<head>
</head>
109
function test(){
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</script>
<body>
<form method="post" name="kirim">
<p>bil<input type="text" name="T1" size="20">
merupakan bil<input type="text" name="T2"
size="20">
</p>
<p><input type="button" value="tebak" name="B1"
onclick=test()>
</p>
</form>
</body>
</html>
Hasil output:
Gambar 3.58 Form input
b. Mendeteksi browser
Script:
110
<!DOCTYPE html>
<html>
<head>
</head>
<body>
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
document.write("browser name:"+ browser);
document.write("<br/>");
document.write("browser version :"+ version);
</script>
</body>
</html>
Hasil output:
Gambar 3.59 Mendeteksi browsesr
c. Form button
Script:
<!DOCTYPE html>
<html>
<head>
111
<title>Objek Document</title>
</head>
<body>
function ubahwarnalb(warna) {
document.body.style.background= warna;}
function ubahwarnald(warna) {
document.body.style.background= warna;}
</script>
<h1>test objek dokumen</h1>
<form>
<input type="button" value="latar
belakang hijau"
onclick="ubahwarnalb('green')">
<input type="button" value="latar belakang
putih"
onclick="ubahwarnalb('white')">
<input type="button" value="teks kuning"
onclick="ubahwarnald('yellow')">
<input type="button" value="teks biru"
onclick="ubahwarnald('blue')">
</form>
document.write("modifikasi terakhir pada" +
document.lastModified);
</script>
</body>
</html>
Hasil output:
112
Gambar 3.60 Form button
d. Deteksi browser
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
document.write("<p>browser:")
document.write(navigator.appName +"</p>")
document.write("<p>browserversion:")
document.write(navigator.appVersion +"</p>")
document.write("<p>bcode:")
document.write(navigator.appCode +"</p>")
document.write("<p>platformn:")
document.write(navigator.cookieEnabled+ "</p>")
document.write("<p>browser's user agent heder:")
document.write(navigator.userEgent +"</p>")
</script>
</body>
113
</html>
Hasil output;
Gambar 3.61 Deteksi browser
e. No klik kanan
Script:
<!DOCTYPE html>
<html>
<head>
<title>No klik kanan</title>
</head>
<body>
<script>
var
isNS=(navigator.appName=="Netscape")? 1:0;
if
(navigator.appName=="Netscape")
document.captureEvents(Event.MOUSEDOWN||
Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent=(isNS)? e:event;
114
var eventbutton=(isNS)?
myevent.which:myevent.button;
if((eventbutton==2)||(eventbutton==3))return false;
}
document.oncontextmenu=mischandler;
document.onmousedown=mischandler;
document.oncmouseup=mischandler;
</script>
<h1>sory saya tidak bisa diklik
kanan</h1>
</body>
</html>
Hasil output:
Gambar 3.62 No klik kanan
f. Printpage
Script:
<!DOCTYPE html>
<html>
<head><title>Print Page</title>
function printpage()
{window.print();}
</script></head>
<body>
115
<input type="button" value="Print this page
" onclick="printpage()"/>
</body>
</html>
Hasil output:
Gambar 3.63 Print page
g. Waktu
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
document.write(Date())
</script>
</body>
</html>
Hasil output:
116
Gambar 3.64 Waktu saat ini
h. Hari ini
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
var d= new Date()
var weekday=new Array(7)
weekday[0]="Sunday"
weekday[1]="Monday"
weekday[2]="Tuesday"
weekday[3]="Wednesday"
weekday[4]="Thursday"
weekday[5]="Friday"
weekday[6]="Saturday"
document.write("Today it is" +weekday[d.getDay()])
</script>
</body>
</html>
Hasil output:
117
Gambar 3.65 Hari ini
i. Array
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
for (i=0; i<mycars.length; i++)
{
document.write(mycars[i]+"<br/>")
}
</script>
</body>
</html>
Hasil output:
118
Gambar 3.66 Array
j. Waktu berjalan
Script:
<!DOCTYPE html>
<html>
<head>
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
//add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":
"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
119
{i="0" + i}
return i
}
window.onload=startTime
</script>
<span id = txt> </span>
</head>
</html>
Hasil output:
Gambar 3.67 Waktu berjalan
k. Mengurutkan nilai
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
function sortNumber(a,b)
{return a-b}
var arr=new Array(6)
arr[0]="10"
arr[1]="5"
arr[2]="40"
120
arr[3]="25"
arr[4]="1000"
arr[5]="1"
document.write(arr+"<br/>")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>
Hasil output:
Gambar 3.68 Mengurutkan nilai
l. Nilai tertinggi
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
document.write(Math.max(5,7)+"<br/>")
document.write(Math.max(-3,5)+"<br/>")
document.write(Math.max(-3,-5)+"<br/>")
document.write(Math.max(7.25,7.30))
</script>
</body>
121
</html>
Hasil output:
Gambar 3.69 Mengurutkan nilai dari yang tertinggi
m. Menghitung jumlah karakter

Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script
type="text/javascript">
var txt="hello word!"
document.write(txt.length)
</script>
</body>
</html>
Hasil output:
Gambar 3.70 Menghitung karakter
n. Mengurutkan array
122
Script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
var arr=new Array(6)
arr [0]="Jani"
arr [1]="Hege"
arr [2]="Stale"
arr [3]="Kai Jim"
arr [4]="Borge"
arr [5]="Tove"
document.write(arr+"<br/>")
document.write(arr.sort())
</script>
</body>
</html>
Hasil output:
Gambar 3.71 Mengurutkan array
o. Nilai terendah
<!DOCTYPE html>
<html>
123
<body>
document.write(Math.min(5,7)+"<br>")
document.write(Math.min(-3,5)+"<br>")
document.write(Math.min(-3,-5)+"<br>")
document.write(Math.min(7.25,7.30))
</script>
</body>
</html>
Hasil output:
Gambar 3.72 Mengurutkan dari yang terkecil
Tugas
1. Memunculkan Prompt, setelah masuk muncul alert.
Script:
<!DOCTYPE html>>
<html>
<head>
<title>Memunculkan Prompt</title>
</head>
<body>
hasil=window.prompt("Silahkan tulis nama
Anda kemudian klik OK!");
if(hasil==true)
124
{
window.alert("Anda Menjawab ya");
}
else
{
window.alert("Nama Anda adalah "+hasil);
document.write(".");
}
</script>
</body>
</html>
Hasil output:
Gambar 3.73 Prompt
2. Mengkonversi nilai angka menjadi nilai huruf.

0 – 40 = E, 41 – 55 = D, 61 – 70 = C, 71 – 80 = B, 81 – 100 = A
Script:
<!DOCTYPE html>
<html>
<head>
<title>Mengkonversi Nilai Angka Menjadi
Huruf</title>
</head>
<body>
125
var nilai;
nilai = prompt("ISI NILAI","");
if (nilai>=81 && nilai<=100)
{document.write("A");}
else if (nilai>=71 && nilai<=80)
{document.write("B");}
{document.write("C");}
{ document.write("D");}
{document.write("E");}
</script>
</body>
</html>
Hasil output:
126
Gambar 3.74 Program konversi nilai ke huruf
3. Menampilkan aplikasi program kalkulator dengan menggunakan

JavaScript.
Script:
<!DOCTYPE html>
<<html>
<head>
<title>Kalkulator Sederhana</title>
</style>
<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="Let count your
number"
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}
function kurang()
{
127
c=a-b
form.hasil.value=c
}
function kali()
{
c=a*b
form.hasil.value=c
}
function bagi()
{
c=a/b
}
function pangkat()
{
c=Math.pow(a, b)
}
function akar()
{
c=Math.sqrt(a)
form.b.value = "Akarpangkat 2"
}
function kosong(){
128
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""
}
</SCRIPT>
</head>
<body onload=kosong()>
<font face="verdana" size="4">Program
Kalkulator</font></br>
<FORM name="form">
<table class="kalkulator">
<tr>
<td valign="top">
<tr><td>Angka 1 <input type="text"
name="a"></td></tr>
<tr><td>Angka 2 <input
type="text" name="b"></td></tr>
<tr><td>Hasil <input type
"text" name="hasil" disabled="true"></td></tr>
</td>
<td>
<input type="button" value="Hapus"
onClick="kosong()">
<input type="button" value="+"
onClick="tambah()">
<input type="button" value="-"
onClick="kurang()">
<input type="button" value="x"
onClick="kali()">
<input type="button" value="/"
onClick="bagi()">
129
<input type="button" value="^"
onClick="pangkat()">
<input type="button" value="Akar"
onClick="akar()">
</td></tr>
</table>
</FORM>
</body>
</html>
Hasil output:
Penjumlahan
Gambar 3.75 Contoh operasi penjumlahan
Pengurangan
Gambar 3.76 Contoh operas pengurangan
Perkalian
130
Gambar 3.77 Contoh operasi perkalian
Pembagian
Gambar 3.78 Contoh operasi pembagian
Perpangkatan
Gambar 3.79 Contoh operasi pangkat
Pengakaran
Gambar 3.80 Contoh operasi akar
131
REFERENSI
132

- FAKULTAS SAINS & TEKNOLOGI
2022
LEMBAR ASISTENSI

Pokok Bahasan IV
Judul : PHP
NIM : 201080200116
Kelompok : 11
Dilaksanakan : 07 Januari 2022
Mengetahui,

-
POKOK BAHASAN IV
PHP
A. Tujuan
1. Mengenalkan kepada mahasiswa tentang pemrograman PHP.
2. Mahasiswa mampu memahami Instalasi Apache dan PHP.
3. Memahami tentang struktur control.
4. Mahasiswa dapat membuat halaman web dengan menggunakan script
HTML dan PHP.
B. Dasar Teori
PHP (preprocessor Hypertext) adalah bahasa scripting yang menyatu dengan
HTML dan dijalankan pada server side. Artinya semua sintaks yang diberikan
akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke
browser hanya hasilnya saja berupa HTML. Untuk membedakan perintah
HTML dan PHP digunakan tanda <? … ?>atau<?php … ?>
PHP dapat diaplikasikan dengan berbagai macam database, seperti MySQL,
PostgreSQL,, Oracle, dan lainnya.
Beberapa script dasar PHP
 Menampilkan text
Echo”..text…<br>”
<br> : ganti baris
 Variable
- Untuk membuat variable diberi tanda dollar ($). Variable berfungsi
untuk menyimpan suatu nilai dan dapat berubah-ubah. Penulisan
variable yang benar adalah:
- Karakter pertama tidak boleh berupa angka (harus berupa huruf atau
garis bawah).
- Tidak mengandung spasi
- Pemakaian huruf capital dan huruf kecil dibedakan
Contoh penulisan variable:
$data, $data1, $data_ku
134
PHP dapat anda Download secara free atau cuma-cuma. Kunjungi saja
situs www.php.net, dan download versi terbarunya
INSTALASI
Instalasi apache:
1. Appserv-win32-2.5.10.exe
2. Klik next, sampai ada isian seperti berikut:
Server name :www.umsida.ac.id
Administrator email address :admin@umsida.ac.id
3. Next sampai ada isian berikut:
User admin : umsida
Password : umsida
4. Klik next sampai Finish
5. Test koneksi dengan mengetikkan: http:/localhost di Internet Explorer,
Mozilla Firefox atau Google Chrome.
Gambar 3.81 Tampilan antarmuka XAMPP
6. Test apakah PHP sudah terinstal dengan baik: Klik PHP information
version. 5.2.86
135
Gambar 3.82 Tampilan halaman pengunduhan XAMPP
Tag dalam php

Banyak cara untuk menyisipkan php dalam script html, ada berbagai macam
bentuk tag yang dapat digunakan, antara lain :
a. Cara 1
<?php Menandai awal tag
……..
?> Menandai akhir tag
b. Cara 2
<? Menandai awal tag
……..
?> Menandai akhir tag
c. Cara 3
<% Menandai awal tag
……..
%> Menandai akhir tag
Cara ini sama dengan tag pada ASP. Opsi ini bisa dilakukan jika nilai
asp_tags pada php.ini bernilai on.
d. Cara 4
<script language=”php”> Menandai awal tag
……...
</script> Menandai akhir tag
136
Ada kalanya sebagai pemrograman, karena banyaknya kode program atau
variable dalam program, perlu menandai atau memberi komentar pada
program. Komentar pada program merupakan tulisan pada program yang
tidak dieksekusi. Pada PHP, ada 3 macam cara penulisan:
a) /*komentar*/
Tulisan apapun yang berada diantara ‘/*’ dan ‘*/’ akan dianggap sebagai
komentar. Cara seperti ini sangat berguna dan efisien untuk pemberian
komentar yang memakan banyak baris.
b) //komentar
Tulisan di baris yang sama setelah ‘//’ akan dianggap sebagai komentar.
Cara ini berguna untuk pemberian komentar singkat yang tak lebih dari 1
baris saja.
c) #komentar
Sama seperti ‘//’, tulisan di baris yang sama setelah ‘#’ akan dianggap
sebagai komentar. Cara ini berguna untuk pemberian komentar singkat
yang tak lebih dari 1 baris saja.
C. Instruksi Praktikum
1. Buat direktori kerja / Folder di webserver computer anda, kalau
menggunakan Appserv buat folder di C:\Appserv\www\folder_anda.
2. Beri nama direktori kerja anda dengan NIM anda masing-masing.
3. Gunakan editor notepad, notepad++ atau editor lainnya.
4. Simpan hasil kerja anda dengan ekstensi.php.
5. Jalankan skrip yang anda buat dengan cara ketik pada browser
localhost/nama_folder_anda/nama_file.php.
6. Print screen setiap percobaan yang anda lakukan dan tampilkan di laporan
praktikum.
Array
Array merupakan suatu variable yang dapat berisi banyak data dalam waktu
yang sama.
137
Pendefinisian Array dapat dibentuk dengan format berikut:
$nama_array = array(elemen_1, … , elemen_n);
Untuk menghitung jumlah elemen array digunakan fungsi count(), dengan
format count)$nama_array).
 Operator
Dalam PHP juga dapat melakukan proses operasi, baik itu penjumlahan,
operasi logika, ataupun operasi pembanding.
Operator Matematika yang digunakan dalam PHP yaitu:

Operator Fungsi Operator Fungsi
- Penjumlahan - Pengurangan
* Perkalian / Pembagian
% Sisa pembagian ++ , -- Perkalian,
Penurunan
Operator pembanding yang digunakan dalam PHP yaitu:

Operator Fungsi Operator Fungsi
== Sama dengan < Kurang dari
> Lebih dari <= Kurang dari atau sama
dengan
>= Lebih dari atau sama !=, <> Tidak sama dengan
dengan
Selain itu, operator Logika juga dapat digunakan di PHP, antara lain, and
(&&), or(||), xor, dan !.
 Penulisan Karakter Khusus dengan tanda \
Karakter yang ditulis dengan diawali tanda (\) yaitu:
Karakter Keterangan Karakter Keterangan
\” Tanda petik ganda \\ Tanda backslash
\$ Tanda $ \n Pindah baris
\t Tab \x00 s.d \xFF Heksadesimal
 Tipe Data
138
Tipe data yang dikenal pada pemrograman PHP yaitu:
Tipe data Keterangan
Integer Tipe data bilangan bulat
Double Tipe data bilangan real
String Tipe data teks
 Konversi Data
Fungsi-fungsi yang digunakan dalam PHP untuk mengkonversikan tipe
data ke tipe data yang lain yaitu dengan memberikan fungsi intval,
doubleval, dan strval. Atau dengan menggunakan teknik cast, yaitu dengan
mengubah tipe ekspresi yang akan dikonversi.
 Menampilkan Tanggal dan Waktu

Untuk menampilkan tanggal dan waktu secara update, dapat menggunakan
perintah date dengan format-format berikut:
Format Keterangan
a, A am atau pm, AM atau PM
d, D hari/tanggal dalam 2 digit, hari (Sun…Sat)
F Nama bulan (January…December)
g, G Jam (1…12), jam (0…23)
Z Hari dari tahun (0…365)
y, Y Tahun dalam 2 digit, tahun dalam 4 digit
h, H Jam (01…12), (00…23)
I Menit (00…59)
m, M Nama bulan (01…12), nama bulan (Jan…Dec)
S Detik
W Hari (0=Sunday..6=Saturday)

a. Menuliskan array
Script:
<!DOCTYPE html>
<html lang="en">
139
<head>
<title>Variable</title>
</head>
<body>
<?php
$nilai_1=10;
$nilai_2=3;
$nilai_3=2* $nilai_1 + 8 * $nilai_2;
echo "nilai= ", $nilai_3;
echo"<br>";
$jumlah=$nilai_1+$nilai_2;
echo "hasil dari $nilai_1+$nilai_2 adalah :
$jumlah";
echo "<br><br>";
echo "\"nama : Faiq M Arsyad Ibnu Adil\"<br>";
echo "nim : 201080200116";
?>
</body>
</html>
Hasil output:
Menambahkan script:
//menghitung jumlah elemen array
$jum_array = count($nama);
echo "jumlah elemen array = ".$jum_array;
Hasil Output:
140
Mendefinisikan array
Script:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pemrograman PHP dengan Array</title>
</head>
<body>
<?php
//penulisan array dapat dibuat seperti berikut
$nama[]="andri";
$nama[]="Rama";
$nama[]="Dany";
echo $nama[1].$nama[2].$nama[0];
echo "<br>";
//pendefinisian array dapat juga seperti berikut
ini
$kampus ="UMSIDA";
$jurusan ="informatika";
echo "kampusku adalah $kampus, jurusan
$jurusan<br>";
?>
</body>
</html>
Hasil output:
141
Konversi tipe data
Script:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Konversi tipe</title>
</head>
<body>
<?php
$a=300.4;
echo $a;
echo"<br>";
echo "tipe double: ", doubleval($a), "<br>";
echo "tipe integer : ", intval($a), "<br>";
echo "tipe string : ", strval($a), "<br>";
?>
</body>
</html>
Hasil output:
142
Menampilkan tanggal
Script:
<!DOCTYPE html>
<html>
<head>
<title> tanggalan </title>
</head>
<body>
<?php
date_default_timezone_set("Asia/Jakarta");
echo date("j-F, h:i:s A");
?>
</body>
</html>
Hasil output:
Struktur control
Bentuk if
Script:
<!DOCTYPE html>
<html>
<head>
<title> Struktur control if </title>
</head>
<body>
<?php
$nilai1=4;
$nilai2=-7;
143
if($nilai1 > $nilai2)
echo "$nilai1 Lebih besar dari pada $nilai2
<br>";
if($nilai2 < 0)
echo "nilai 2 adalah negatif";
?>
</body>
</html>
Hasil output:
Bentuk if else
Script:
<!DOCTYPE html>
<html>
<head>
<title> struktur control if else </title>
</head>
<body>
<?php
$bil =8;
if ($bil %2 ==0){
echo "bilangan $bil merupakan bilangan genap";
}else{
echo "bilangan $bil merupakan bilanga ganjil";
}
?>
</body>
</html>
144
Hasil output:
Bentuk switch
Script;
<!DOCTYPE html>
<html>
<head>
<title> pernyataan switch </title>
</head>
<body>
<?php
$jurusan ="SI";
switch($jurusan){
case "TI":
echo "$jurusan =Teknik Informatika";
break;
case "TD":
echo "$jurusan = Teknik Industri";
break;
case "TM":
echo "$jurusan = Teknik Mesin";
break;
case "TE":
echo "$jurusan = Teknik Elektro";
break;
default:
echo "$jurusan tidak terdaftar";
145
?>
</body>
</html>
Hasil output:
Perulangan while
Script:
<!DOCTYPE html>
<html>
<head>
<title> perulangan dengan while </title>
</head>
<body>
<?php
$i=0;
while ($i<=5){
$jum =$i +1;
echo "1 + $i = $jum <br>";
$i++;
}
?>
</body>
</html>
Hasil output:
146
Modularisasi
Modularisasi menggunakan include
Script file mod1ularisasi.php
<?php
echo ("---------------------------------<br>");
echo ("Lab.UMSIDA <br>");
echo ("---------------------------------
<br>");
echo ("<br>");
?>
Script file modul4_include.php
<?php
for ($b=1;$b<5; $b++){
include ("modularisasi.php");
}
?>
Hasil output:
147
Modularisasi menggunakan Require
Script file modularisasi2.php:
<?php
$a="saya sedang belajar PHP";
function tulistebal($teks){
echo "<b>$teks</b>";
}
?>
Script file modul_require.php:
<?php
require ("modularisasi2.php");
tulistebal ("ini adalah tulisan tebal");
echo "<br>";
echo $a;
?>
Hasil output:
148
Proses form menggunakan metode: GET
Mendapatkan variable dengan file get_proses.php
script;
<html>
<head>
<title> Method GET proses</title>
</head>
<body>
Data nama yang diinputkan adalah:
<?php
echo $_GET {"nama"};
?>
</body>
</html>
1. Membuat inputan
script file get.php
<html>
<head>
<title> Form Method GET</title>
</head>
<body>
<h1>input </h1>
<form action="get_proses.php" method="GET">
Masukkan nama: <input type="text" name="nama"
size="25">
<input type="submit" value="proses">
149
</form>
</body></html>
Hasil output:
Menggunakan metode POST

a. File untuk memproses variable: post_proses.php
<html>
<head>
<title> method POST </title>
</head>
<body>
Data nama yang diinputkan adalah:
<?php
echo $_POST {"nama"};
?>
</body>
</html>
b. Untuk membuat inputan dengan file post.php
<html>
<head>
<title> Method POST proses </title>
</head>
<body>
150
<?php
<h1>input </h1>
<form action="post_proses.php" method="post">
Masukkan nama: <input type="text" name="nama"
size="25">
<input type="submit" value="proses">
</form>
?>
</body>
</html>
Hasil output:
Proses input password menggunakan metode: POST

Membuat file untuk memproses dengan nama proses_login.php
<html><head>
<title> Proses Input </title>
</head>
<body>
<?php
$username = $_POST {"username"};
$password = $_POST {"password"};
?>
Username: <?=$username?>
<br>
Password: <?=$password?>
151
<br>
</body></html>
Membuat inputan dan memberi nama file: metodepost1.php

<html><head>
<title>Contoh form dengan POST</title>
</head>
<body>
<form action="proses_login.php" method="POST">
<h1>Only for autorized user</h1>
<hr>
username : <input type="text" name="username">
<br>
password : <input type="password" name="password">
<br>
<input type="submit" value="login">
</form>
</body></html>
Hasil output:
Pemrosesan Buku Tamu dengan metode: POST
152
Buku file untuk memproses variable: proses_buku_tamu.php
<html><head>
<title>Buku Tamu</title>
</head>
<body>
<?
$nama=$_POST["nama"];
$email=$_POST["email"];
$komentar=$_POST["komentar"];
?>
<h1>Data Buku Tamu</h1>
<hr>
Nama Anda : <?=$nama?>
<br>Email Anda : <?= $email?>
<br>Komentar Anda :<textarea name="komentar"
cols="40" rows="5"><$echo $komentar?></textarea><br>
</body></html>
Untuk membuat inputan, beri nama file : bukutamu.php

<html><head>
<title>Buku Tamu</title>
</head>
<body>
<?
$nama=$_POST["nama"];
$email=$_POST["email"];
$komentar=$_POST["komentar"];
?>
<h1>Data Buku Tamu</h1>
<hr>
Nama Anda : <?=$nama?>
<br>Email Anda : <?= $email?>
153
<br>Komentar Anda :<textarea name="komentar"
cols="40" rows="5"><?=$komentar?></textarea><br>
</body></html>
Hasil output:
Penyimpanan file yang di-upload, dengan nama file yang tersimpan

sama semuanya.
Beri nama file untuk memproses variable: do_upload.php
<?php
mkdir("upload");
$file = $_FILES{"dokumen"};
$nama_file = $file{"name"};
$nama_tmp = $file{"tmp_name"};
$upload_dir = "upload/";
move_uploaded_file($nama_tmp,$upload_dir.
$nama_file);
echo "File berhasil diunggah.";
?>
Untuk membuat inputan, beri nama file: fileupload.php
<html><head>
<title>form untuk input nama filee</title>
154
</head>
<body>
<h1>input Nama File untuk diupload</h1>
<br> Klik Browse untuk memilih !!!
<form action="do_upload.php" method="POST"
enctype="multipart/form-data">
<input name="dokumen" type="file" id="dokumen"
/>
<input type="submit" name="upload" id="upload"
value="Upload" />
<br>
<input type="submit" value="Upload">
</form>
</body></html>
Hasil output:
Cara lain untuk memproses file upload dengan nama file yang berbeda -
>$HTTP_POST_FILES. Ganti program 5.a dengan program dibawah ini,
dengan terlebih dahulu membuat folder dengan nama files di direktori tempat
menyimpan file php.
155
Tugas 3
Buat Program PHP untuk memproses Data Mahasiswa dengan inputan
sebagai berikut:
NAMA : berupa input text
NIM : berupa input text
JURUSAN : berupa select
ALAMAT : berupa textarea
PHOTO : berupa input file
Script file tugas3.php:

<html>
<head><title>Data Mahasiswa</title></head>
<body>
<h3>Data Mahasiswa</h3>
<form action="view_tugas3.php" method="post">
<table>
<tr><td>NAMA</td>
<td>:</td>
<td><input type="text" name="nama"
size="25"></td></tr>
<tr><td>NIM</td>
<td>:</td>
<td><input type="text" name="nim"
size="25"></td></tr>
<tr><td>JURUSAN</td>
<td>:</td>
<td><select name="pilihan">
<option value="Teknik
Informatika">Teknik Informatika</option>
156
Mesin">Teknik Mesin</option>
Elektro">Teknik Elektro</option></select></td></tr>
<tr><td>ALAMAT</td>
<td>:</td>
<td><textarea
name="alamat"></textarea></td></tr>
<tr><td>FOTO</td>
<td>:</td>
<td><input type="file" name="photo"
accept="image/"></td></tr>
<tr><td><input type="submit"
value="kirim"></td></tr>
</table></form>
</body></html>
Script file view_tugas.php:
<html>
<head>
<title>Data diri</title>
</head>
<body>
<?php $nama =$_POST["nama"];?>
File berhasil diunggah.<br>
<table>
<tr><td>NAMA</td>
<td>:</td>
<td><?= $nama;?></td></tr>
<tr><td>NIM</td>
<td>:</td>
<td><?= $_POST["nim"];?></td></tr>
<tr><td>JURUSAN</td>
157
<td>:</td>
<td><?= $_POST["pilihan"];?></td></tr>
<tr><td>ALAMAT</td>
<td>:</td>
<td><?= $_POST["alamat"];?></td></tr>
<tr><td>FOTO</td>
<td>:</td>
<td><img src="<?= $_POST["photo"];?>"
width="500" height="300"></td></tr>
</table>
</body></html>
Hasil output:
Kunci lembar kerja

1. Tugas 1
2. Tugas 2
158
3. Tugas 3
159
REFERENSI
160

- FAKULTAS SAINS & TEKNOLOGI
2022
LEMBAR ASISTENSI

Pokok Bahasan V
Judul : Konektivitas PHP Dengan MySQL

NIM : 201080200116
Kelompok : 11
Mengetahui,

POKOK BAHASAN V
Konektivitas PHP dengan MYSQL
A. Tujuan
1. Memahami langkah-langkah koneksi PHP dengan MySQL.
2. Memahami perbedaan pengambilan record dari database.
B. Dasar Teori
Langka-langkah koneksi PHP-MySQL:
1. Membuka koneksi ke server MySQL

mysql_connect()
Digunakan untuk melakukan uji dan koneksi kepada server database
MySQL.
Sintaks :
$conn = mysql_connect (“host”,”username”,”password”);
$conn : adalah nama variable penampung status hasil koneksi

kepada database.
Host : adalah nama host atau alamat server database MySQL.
Username : adalah nama user yang telah diberi hak untuk dapat
mengakses server database
Password : adalah kata sandi untuk username untuk dapat masuk ke
dalam database.
Database : adalah nama database yang ada di mysql
2. Mengambil sebuah query dari sebuah database.

Mysql_query()
Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi
database yang berhasil dilakukan
Sintaks :
$hasil = mysql_query(“SQL Statement”);
162
$hasil : akan berupa record set apabila SQL Statement berupa perintah
select.
Contoh SQL Statement : “SELECT * FROM MAHASISWA ORDER BY
NIM”
3. Mengambil record dari database

a. mysql_fetch_array()
Digunakan untuk melakukan pemrosesan hasil query yang dilakukan
dengan perintah mysql_query(), dan memasukkannya ke dalam array
asosiatif, array numeris atau keduanya.
Sintaks :
$row = mysql_fetch_array($hasil);
$row : adalah array satu record dari record $hasil yang diproses
nomor record sesuai dengan nomor urut dari proses mysql_fetch_array
yang sedang dilakukan.
$hasil : adalah record set yang akan diproses.
b. mysql-fetch_assoc()
Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja
array yang dihasilkan hanya array asosiatif.
Sintaks :
$row = mysql_fetch_assoc($hasil);
c. mysql_fetch_row()
Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja
array yang dihasilkan hanya array numeris.
Sintaks :
$row = mysql_fetch_row($hasil);
d. mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record yang ada pada
database.
Sintaks :
$row = mysql_num_row($hasil);
163
$jml : akan memiliki nilai sesuai dengan jumlah record yang ada.
C. Lembar Kerja dan Tugas

Membuat Database Latihan
a. Ketik localhost/phpmyadmin pada browser sehingga muncul halaman
berikut:
b. Ketik nama database yang diinginkan pada textbox create new

database, pada praktikum ini digunakan nama latihan lalu klik Create.
c. Untuk membuat table, pilih database yang anda buat tadi, lalu buat
table dengan mengisi textbox create table atau bisa juga dengan cara
mengetikkan perintah sql pada menu SQL.
164
Membuat koneksi PHP
1. Membuat koneksi PHP dengan MYSQL beri nama file
koneksi.php. Lalu jalankan di web localhost/nama_folder/koneksi.php,
jika kosongan berarti koneksi ke database berhasil.
<?php
$host="localhost";
$user="root";
$password="";
$db="latihan";
$conn=mysqli_connect($host, $user, $password,
$db);
if (mysqli_connect_error()){
echo "koneksi gagal".mysqli_error();
}
?>
Hasil output:
a. Buatlah tabel mhs berikut ini, dengan 3 field: nim, nama_lengkap,

email.
CREATE TABLE mhs (
nim varchar(12) PRIMARY KEY,
nama_lengkap varchar(5),
165
email varchar(30)
)
Hasil output:
b. Isilah dengan 3 data nama anda dan data teman anda:

insert into mhs VALUES
('181080200111', 'Andra', 'andra@gmail.com'),
('181080200112', 'Andre', 'andre@gmail.com'),
('181080200113', 'Andri', 'andri@gmail.com'))
Hasil output:
c. Menampilkan data menggunakan mysqli_fetch_array(). Fungsi ini

menangkap data yang berbentuk array asosiatif dan array numerik.
<html>
<head><title>Koneksi database MySQL</title></head>
<body>
<h1>Menampilkan data dengan
mysqli_fetch_array</h1>
<table border="1" cellspacing="0"
cellpadding="10">
<tr><td>nim </td>
<td>nama </td>
166
<td>email </td></tr>
<?php
include 'koneksi.php';
$hasil = mysqli_query($conn, "SELECT * FROM
mhs");
while ($row=mysqli_fetch_array($hasil)):
?>
<tr><td><?=$row[0];?></td>
<td><?=$row['nama_lengkap'];?></td>
<td><?=$row['email'];?></td></tr>
<?php endwhile; ?>
</table>
</body></html>
Hasil output:
d. Menampilkan data menggunakan mysqli_fetch_assoc(). Fungsi ini

menangkap data yang berbentuk array asosiatif saja.
<html>
<head><title>Koneksi database MySQL</title></head>
<body>
mysqli_fetch_assoc</h1>
cellpadding="10">
<tr><td>nim </td>
<td>nama </td>
167
<?php
mhs");
while ($row=mysqli_fetch_assoc($hasil)):
?>
<tr><td><?=$row['nim'];?></td>
<td><?=$row['nama_lengkap'];?></td>
<td><?=$row['email'];?></td></tr>
<?php endwhile; ?>
</table>
</body></html>
Hasil output:
e. Akses database menggunakan mysqli_fetch_row(). Fungsi ini

menangkap data yang berbentuk array numerik saja.
<html><head>
<title>Koneksi database MySQL</title>
</head>
<body>
mysqli_fetch_row</h1>
cellpadding="10">
<tr><td>nim </td>
168
<td>nama </td>
<?php
mhs");
while ($row=mysqli_fetch_row($hasil)):
?>
<tr><td><?=$row[0];?></td>
<td><?=$row[1];?></td>
<td><?=$row[2];?></td></tr>
<?php endwhile; ?>
</table>
</body></html>
Hasil output:
Membuat form
2. Buat form untuk data mhs, beri nama mhs.php
<html><head>
<title>form mahasiswa</title>
</head>
<body>
<h1>form data mahasiswa</h1>
<form action="tambah_mhs.php" method="POST">
<table>
<tr><td> Nim </td>
169
<td>:</td>
name="nim"></td></tr>
<tr><td>nama lengkap </td>
<td>:</td>
name="nama_lengkap"></td></tr>
<tr><td>Email</td>
<td>:</td>
name="email"></td></tr>
<tr><td><button
type="submit">simpan</button></td></tr>
</table>
</form>
</body></html>
Hasil output:
3. Buat file tambah_mhs.php untuk memproses data dari mhs dan

menambahkan data ke tabel mhs. Include ‘koneksi.php’ digunakan untuk
memanggil file koneksi supaya dapat terhubung ke database.
<?php
$nim= $_POST{"nim"};
$nama_lengkap = $_POST{"nama_lengkap"};
$email= $_POST{"email"};
170
$query = mysqli_query($conn, "INSERT INTO mhs
VALUES('$nim', '$nama_lengkap', '$email')");
echo "<script>
alert('Data berhasil ditambahkan');
document.location.href='view_mhs.php';
</script>";
?>
Hasil output:
4. Buat file dengan nama view_mhs.php untuk menampilkan isi tabel

mhs. Ketikan kode berikut:
<html>
<head><title>tampilan mahasiswa</title></head>
<body>
<h1>tampilan data mahasisawa</h1>
<a href="mhs.php"> tambah data </a><br><br>
cellpadding="10">
<tr><td>nim </td>
<td>nama lengkap </td>
<?php
$query = mysqli_query($conn, "SELECT * FROM
mhs");
while ($data = mysqli_fetch_array($query)):
?>
<tr><td><?=$data['nim'];?></td>
<td><?=$data['nama_lengkap'];?></td>
171
<td><?=$data['email'];?></td></tr>
<?php endwhile;?>
</table>
</body></html>
Hasil output:
5. Membuat edit pada file view_mhs.php, tambahkan script berikut

seperti di bawah ini.
<tr><td>nim </td>
<td>nama lengkap </td>
<td>email </td>
<td colspan="2">Aksi</td></tr>
Hasil output:
Dan tambahkan script berikut seperti di bawah ini

<td><?=$data['email'];?></td>
172
<td><a href="view_edit.php?nim=<?
=$data['nim'];?>">Edit</a></td></tr>
<?php endwhile;?>
6. Buat file dengan nama view_edit.php untuk membuat tampilan

form ketika ingin mengedit data.
<html>
<head><title>form mahasiswa</title></head>
<body>
<?php
$nim = $_GET['nim'];
$query = mysqli_query($conn, "SELECT * FROM mhs
WHERE nim = '$nim'");
$data = mysqli_fetch_array($query);
?>
<h1>Form Data Mahasiswa</h1>
<from action="edit_mhs.php" method="POST">
<table>
<tr><td>Nim</td>
<td>:</td>
173
value="<?= $data['nim'];?>"></td></tr>
<tr><td>Nama lengkap</td>
<td>:</td>
<td><input type="text" name="nama_lengkap"
value="<?= $data['nama_lengkap'];?>"></td></tr>
<tr><td>Email </td>
<td>:</td>
<td><input type="email" name="email"
value="<?= $data['email'];?>"></td></tr>
<tr><td><button
</table></form>
</body></html>
Hasil output:
7. Kemudian buat proses edit supaya ketika mengedit data bisa

berjalan. Buat file dengan nama edit_mhs.php ketikan kode seperti di
bawah ini.
<?php
$nim = $_POST['nim'];
$nama_lengkap= $_POST['nama_lengkap'];
$email = $_POST['email'];
174
$query= mysqli_query($conn, "UPDATE mhs SET nim =
'$nim', nama_lengkap='$nama_lengkap', email='$email'
WHERE nim='$nim'");
echo "<script>alert('Data berhsil diedit');
document.location.href='view_mhs3.php';
</script>";?>
hasil output:
8. Membuat aksi hapus, buka view_mhs.php lalu tambahkan kode

seperti di bawah ini.
=$data['nim'];?>">Edit</a></td>
<td><a href ="hapus_mhs.php?nim=<?
=$data['nim'];?>" onclick="return confirm('Apakah
Anda Yakin?');">Hapus</a></td></tr>
Hasil output:
175
Tugas
Menggunakan program diatas maka modifikasilah sesuai dengan perintah
berikut:
1. Tambahkanlah field baru pada table mhs yang sudah dibuat dan
tentukan tipe data dari masing-masing field, diantaranya:
- Jenis kelamin
- TTL
- Alamat
- No Hp
2. Modifikasi program supaya file berikut:
- mhs.php
- tambah_mhs.php
- view_mhs.php
- view_edit.php
- edir_mhs.php
Dapat berjalan dengan baik sehingga tidak terdapat error
Jawab
Modifikasi program mhs.php
176
1. Menambahkan filed dan menentukan tipe data dan ukurnnya
ALTER TABLE mhs ADD COLUMN jenis_kelamin ENUM
('L','P')
ALTER TABLE mhs ADD COLUMN TTL varchar(20) ,alamat
text(50);
2. Modifikasi program
Mhs.php
<html><head>
<title>form mahasiswa</title></head>
<body>
<h1>form data mahasiswa</h1>
<form action="tambah_mhs.php" method="POST">
<table>
<tr><td> Nim </td><td>:</td>
<tr><td>Nama Lengkap </td><td>:</td>
<tr><td>Email</td><td>:</td>
<tr><td>Jenis Kelamin </td>
<td>:</td>
<td><input type="radio"
name="jenis_kelamin" value="L">Laki laki
177
<input type="radio"
name="jenis_kelamin" value="P"> Perempuan</td></tr>
<tr><td> TTL </td><td>:</td>
name="TTL"></td></tr>
<tr><td> Alamat </td><td>:</td>
name="alamat"></td></tr>
<tr><td>No Hp </td><td>:</td>
name="No_hp"></td></tr>
<tr><td><button
</table>
</form>
</body></html>
tambah_mhs.php
<?php
178
$jenis_kelamin= $_POST{"jenis_kelamin"};
$TTL= $_POST{"TTL"};
$alamat= $_POST{"alamat"};
$No_hp= $_POST{"No_hp"};
VALUES('$nim', '$nama_lengkap', '$email',
'$jenis_kelamin', '$TTL', '$alamt', '$No_hp)");
echo "<script>
</script>";
?>
view_mhs.php
<html>
<head><title>Tampilan Mahasiswa</title></head>
<body>
<h1>Tampil Data Mahasiswa</h1>
<a href="mhs.php">Tambah Data</a><br><br>
cellpadding="10">
<tr><td>Nim</td>
<td>Nama Lengkap</td>
<td>Email</td>
<td>Jenis Kelamin</td>
<td>TTL</td>
<td>Alamat</td>
<td>No Hp</td>
tambahkan script ini -->
<?php
179
$query = mysqli_query($conn, "SELECT * FROM
mhs");
while ($data = mysqli_fetch_array($query)):
?>
<td><?=$data['jenis_kelamin'];?></td>
<td><?=$data['TTL'];?></td>
<td><?=$data['alamat'];?></td>
<td><?=$data['No_hp'];?></td>
=$data['nim'];?>">Edit</a></td>

=$data['nim'];?>" onclick="return confirm('Apakah
Anda Yakin?');">Hapus</a></td></tr>
<?php endwhile;?>
</table>
</body></html>
view_edit.php
<html>
<head><title>form mahasiswa</title></head>
<body>
<?php
180
?>
<table>
<tr><td>Nim</td><td>:</td>
<td>:</td>
name="nama_lengkap" value="<?=
$data['nama_lengkap'];?>"></td></tr>
<tr><td>Email</td><td>:</td>
<td><input type="email" name="email"
value="<?= $data['email'];?>"></td></tr>
<tr><td>Jenis Kelamin </td><td>:</td>
<td><input type="radio"
name="jenis_kelamin" value="<?=
$data['jenis_kelamin'];?>">
<input type="radio"
name="jenis_kelamin" value="<<?=
$data['jenis_kelamin'];?>"></td></tr>
<tr><td> TTL </td>
<td>:</td>
<td><input type="text" name="TTL"
value="<?= $data['TTL'];?>"></td></tr>
<tr><td> Alamat </td><td>:</td>
<td><input type="text" name="alamat"
value="<?= $data['alamat'];?>"></td></tr>
<tr><td>No Hp </td><td>:</td>
181
<td><input type="text" name="No_hp"
value="<?= $data['No_hp'];?>"></td></tr>
<tr><td><button
</table></form>
</body></html>
edit_mhs.php
<?php
$nim = $_POST['nim'];
$nama_lengkap= $_POST['nama_lengkap'];
$email = $_POST['email'];
$jenis_kelamin= $_POST{'jenis_kelamin'};
$TTL= $_POST{'TTL'};
$alamat= $_POST{'alamat'};
$No_hp= $_POST{'No_hp'};
$query= mysqli_query($conn, "UPDATE mhs SET
nim='$nim', nama_lengkap='$nama_lengkap',
email='$email' jenis_kelamin='$jenis_kelamin'
TTL='$TTL' alamat='$alamat' No_hp='$No_hp' WHERE
nim='$nim'");
echo "<script>
</script>";
?>
Hasil output:
182
183
REFERENSI
o Abdul Kadir., pemrograman web mencakup: Html, CSS, Java Script dan
o Arief Ramadhan, Pemrograman Web Menggunakan HTML, CSS dan
o http://www.w3schools.com.
184

2022
LEMBAR ASISTENSI

Pokok Bahasan VI
Judul : Desain Web Mobile dengan jQuery Mobile

NIM : 201080200116
Kelompok : 11
Mengetahui,

POKOK BAHASAN VI
Desain Web Mobile dengan jQuery Mobile
A. Tujuan
1. Mahasiswa memahami tentang jquery mobile.
2. Mahasiswa memahami interkoneksi antar halaman.
3. Mahasiswa mampu pembuatan aplikasi jquery.
4. Mahasiswa mampu menampilkan aplikasi yang dibuat di emulator mobile.
B. Dasar Teori
jQuery Mobile adalah framework berbasis jQuery yang memudahkan kita
untuk membuat web app untuk mobile. Selain jQuery mobile sebenarnya
banyak frame work lain yang dapat digunakan seperti Sencha, jTouch,
DHTMLX Touch, Jo dan lainnya.
Kelebihan jQuery adalah:

1. Support banyak platform: Webkit (Android, iOS, Opera, Chrome),
Firefox mobile, Windows Phone, Blackberry, Bada, Meego.
2. Berbasis JQuery yang popular.
3. Penggunaannya banyak dan forum aktif.
jQuery mobile menyediakan komponen UI widget seperti button, listview,

header dan elemen form dan navigasi. Kode ini dibangun oleh jQuery dan
terus dikembangkan oleh pengembangnya secara aktif untuk memperbaiki
bug-bug yang ada diaplikasi ini. Banyak fitur yang ditawarkan dalam
framework ini termasuk dukungan HTML5. Ajax-powered navigasi link, dan
sentuhan/atau navigasi gesekan.
Sebelum melakukan praktikum Desain Web Mobile dengan jQuery Mobile

ini, yang perlu disiapkan adalah:
a. jquery.mobile-1.3.2.min.css
b. jquery-1.9.1.min.js
c. jquery.mobile-1.3.2.min.js
d. images
186
e. opera Mobile Emulator download gratis.
C. Instruksi praktikum
1. Buat direktori kerja / Folder di webserver computer anda, kalau
menggunakan Appserv buat folder di C:\Appserv\www\folder_anda.
2. Letakkan file jquery.mobile-1.3.2.min.css, jquery.mobile-1.3.2.min.js,
jquery.js di folder anda.
3. Gunakan editor notepad, notepad++ atau editor lainnya.
4. Simpan hasil kerja anda dengan ekstensi.php.
5. Jalankan script yang anda buat dengan cara ketik pada Opera emulator
mobile localhost/nama_folder_anda/nama_file.php.
6. Printscreen setiap percobaan yang anda lakukan dan tampilkan di laporan
praktikum.

1. Basic template
Buatlah file baru dengan nama template.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Faiq M Arsyad Ibnu Adil /
201080200116</title>
<link rel="stylesheet" href="jquery.mobile-
1.4.5.min.css" />
</head>
<body>
<div data-role="page">
<div data-role="header">
187
<h1>Praktikum Web</h1></div>
<div role="main" class="ui-content">
<p>Membuat aplikasi mobile</p></div>
<div data-role="footer">
<h4>&copy UMSIDA Aslab
Informatika</h4></div>
</div>
<script src="jquery.min.js"></script>
<script
src="jquery.mobile-1.4.5.min.js"></script>
</body></html>
Hasil output:
2. Membuat 2 halaman
Buat file baru dengan nama halaman.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Nama / Nim</title>
188
1.4.5.min.css" />
</head>
<body>
<div data-role="page" id="hal1">
<div role="main" class="ui-content">
<p>Membuat aplikasi mobile</p>
<a href="#hal2"> Pindah ke halaman 2>>
</a></div>
</div>
<div data-role="hader">
<h1>Informatika</h1></div>
<div role="main" class="ui-contennt">
<p>Nama/Nim</p>
<a href="#hal1"> pindah ke halaman 1>>
</a></div>
Informatika</h4></div>
</div>
<script
</body></html>
Hasil output:
189
3. Membuat tombol
Buat file baru dengan nama button.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Nama / Nim</title>
1.4.5.min.css" />
</head>
<body>
<div role="content" class="ui-content">
<a href="#" data-role="button">
cancel</a>
<a href="#" data-role="button" data-
theme="b">save</a>
inline="true">cancel</a>
inline="true">save</a></div>
190
</div>
<script
</body></html>
Hasil output:
4. Membuat navigasi
Buat file baru dengan nama nav.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title> Faiq M Arsyad Ibnu Adil /
201080200116</title>
1.4.5.min.css" />
</head>
191
<body>
<h1>Universitas Muhammadiyah
Sidoarjo</h1></div>

<div data-role="navbar" data-
iconpos="bottom">
<ul><li><a href="#" data-
icon="home">Home</a></li>
<li><a href="#" data-
icon="Info">Profile</a></li>
<li><a href="#" data-
icon="star">Star</a></li></ul>
</div>
<div role="content">
<h1>Faiq Muhammad Arsyad Ibnu Adil</h1>
<h1>Praktikum Web</h1>
</div>
<script
</body></html>
Hasil output:
192
5. Membuat form input
Buat file baru dengan nama input.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
201080200116</title>
1.4.5.min.css" />
</head>
<body>
<h1>Form Input</h1></div>
<form id="form" method="POST" data-
ajx="false" action=" ">
193
<label for="nama">Nama</label>
<input type="text" name="nama"
id="nama" value=""/>
<label for="nim">Nim</label>
<input type="text" name="nim"
id="nim" value=""/>
<input type="submit"
value="Simpan" data-inline="true" data-theme="b"
id="login" name="login"/>
<input type="reset"
values="Batal" data_inline="true" data-theme="a"
name="login" id="login">
</form>
</div>
</div>
<script
</body></html>
Hasil output:
6. Membuat tabel
194
Membuat file baru dengan nama tabel.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
201080200116</title>
1.4.5.min.css" />
</head>
<body>
<h1>tabel</h1></div>
<table class="ui-body-d ui-shadow iu-
respponsive table-stripe" data-role="table" data-
mode="columntoggle" id="my-table">
<thead><tr class="iu-bar-d">
<th>NO</th>
<th>NIM</th>
<th>NAMA</th>
</tr></thead>
<tr><td>1</td>
<td>Nim</td>
<td>Nama</td></tr>
<tr><td>2</td>
195
<td>Nim</td>
<td>Nama</td></tr>
</table>
</div>
</div>
<script
</body></html>
Hasil output:
7. Membuat content collabsible

Buat file baru dengan nama collaps.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
201080200116</title>
196
1.4.5.min.css" />
</head>
<body>
<h1>Collaps</h1></div>
<div data-role="collapsible-set">
<div data-role="collapsible" data-
collapsed="false">
<h3>section header 1</h3>
<p>isi header 1</p></div>
collapsed="true">
collapsed="true">
</div>
</div>
<script
</body></html>
Hasil output;
197
8. Membuat list/menu vertikal
Buat file baru dengan nama list.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
201080200116</title>
1.4.5.min.css" />
</head>
<body>
<h1>List</h1></div>
<ul data-role="listview" data-divider-
theme="b" data-insert="true">
198
<li data-role="list-divider"
role="heading">
Menu</li>
<li data-theme="c">
<a href="#" data-
transition="slide">
Home</a></li>
<li data-theme="c">
<a href="#page1" data-
transition="slide">
Profile</a></li>
<li data-theme="c">
<a href="#page1" data-
transition="slide">
Contact</a></li>
</ul>
</div>
<script
</body></html>
Hasil output:
199
Tugas
1. Buatlah halaman web pribadi yang memiliki 3 menu yaitu home,
profile, dan contact, tampilan hasil dapat dilihat di lembar Kunci tugas.
2. Pada tugas modul 5 modifikasilah tampilannya dengan menggunakan
jquery-mobilw seperti file berikut:
a. Mhs.php
b. Tambah_mhs.php
c. View_mhs.php
d. View_edit.php
e. Edit_mhs
Dan ketika dijalankan tidak terdapat error.
Jawab
Web pribadi
<html><head>
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
201080200116</title>
200
1.4.5.min.css" /></head>
<body>
<div role="main" class="ui-content"
align="center">

<div data-role="navbar" data-iconpos="bottom">
<ul><li><a href="#hal1" data-
<li><a href="#hal2" data-
icon="info">Profile</a></li>
icon="phone">Contact</a></li></ul>
</div>
<div data-role="content" id="hal1"
align="center">
<h4>Sekamat Datang | Welcome </h4>
<h1>Faiq Muhammad Arsyad Ibnu Adil</h1>
<h2>201080200116</h2>
</div>
</div>
<h4>&copy Faiq_116</h4></div></div>

201
align="center">
icon="phone">Contact</a></li></ul></div>
<div data-role="content" align="center">
<table border="0" align="center">
<thead>Biodata</thead>
<tr><td colspan="3"
align="center"><img src="image.jpg" alt=""
width="150px" height="200px"></td></tr>
<tr><td>Nama</td><td>:</td><td><b>Faiq
Muhammad Arsyad Ibnu Adil</b></td></tr>
<tr><td>NIM
</td><td>:</td><td>201080200116</td></tr>
<tr><td>Tanggal
Lahir</td><td>:</td><td>05 Mei 1998</td></tr>
<tr><td>Alamat</td><td>:</td><td>Kletek
- Sepanjang - Taman - Sidoarjo</td></tr>
</table>
</div>
</div>
<h4>&copy Faiq_116</h4></div>
</div>
202
align="center">

icon="phone">Contact</a></li></ul>
</div>
<div data-role="content" data-iconpos="bottom"
align="center">
<h1>CONTACT US</h1>
<h3><a href="wa.me/6281909380174" data-
icon="call"><i class="fab fawhatsapp">
081909380174</i></a></h3>
<h3><a href="https://www.facebook.com/"
data-icon="whatsapp"><i class="fab fafacebook"> Faiq M
Arsyad Ibnu Adil</i></a></h3>
</div>
</div>
<h4>&copy Faiq_116</h4></div>
</div>
<script src="jquery.mobile-1.4.5.min.js"></script>
</body></html>
203
Modifikasi program modul V
mhs.php
<html><head>
<link rel="stylesheet" href="../jquery.mobile-
1.4.5.min.css" />
<script src="../jquery.min.js"></script>
<script
src="../jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header" data-theme="b">
<h1>Data Mahasiswa </h1>
</div>
<div role="main" data-theme="c" class="ui-

content" align="center">
204
<form action="tambah_mhs.php"
method="POST" data-ajax="false">
<table>
<tr><td> Nim </td>
<td>:</td>
<tr><td>Nama Lengkap </td>
<td>:</td>
<tr><td>Email</td>
<td>:</td>
<tr><td>Jenis Kelamin</td>
<td>:</td>
<td><select
name="jenis_kelamin">
<option> </option>
<option value="L">Laki-
laki</option>
<option
value="P">Perempuan</option></select></td></tr>
<tr><td> TTL </td>
<td>:</td>
name="TTL"></td></tr>
<tr><td> Alamat </td>
<td>:</td>
205
name="alamat"></td></tr>
<tr><td>No Hp </td>
<td>:</td>
name="No_hp"></td></tr>
<tr><td><button
</table>
</form>
<h4>&copy Faiq_116</h4></div>
</div>
</div>
</body></html>
tambah_mhs.php
<?php
$jenis_kelamin= $_POST{"jenis_kelamin"};
$TTL= $_POST{"TTL"};
$alamat= $_POST{"alamat"};
$No_hp= $_POST{"No_hp"};
VALUES('$nim', '$nama_lengkap', '$email',
'$jenis_kelamin', '$TTL', '$alamat', '$No_hp')");
echo "<script>
206
</script>";
?>
view_mhs.php
<html>
<head><title>Tampilan Mahasiswa</title>
1.4.5.min.css" />
<script
src="../jquery.mobile-1.4.5.min.js"></script></head
>
<body>
<h1>Data Mahasiswa </h1></div>
<h1>Tampilan Data Mahasiswa</h1></div>
<a href="mhs.php" data-role="button" data-
inline="true" data-theme="b" >Tambah
Data</a><br><br>
cellpadding="10">
<tr><td>Nim</td>
<td>Nama Lengkap</td>
<td>Email</td>
<td>Jenis Kelamin</td>
<td>TTL</td>
<td>Alamat</td>
<td>No Hp</td>
207
<?php
$query = mysqli_query($conn, "SELECT *
FROM mhs");
while ($data =
mysqli_fetch_array($query)):
?>
<td><?=$data['jenis_kelamin'];?></td>
<td><?=$data['TTL'];?></td>
<td><?=$data['alamat'];?></td>
<td><?=$data['No_hp'];?></td>
=$data['nim'];?> " data-role="button" data-
inline="true" data-theme="b">Edit</a></td><!--
=$data['nim'];?>" data-role="button" data-
inline="true" data-theme="b" onclick="return
confirm('Apakah Anda Yakin?');">Hapus</a></td></tr>
<?php endwhile;?>
</table>
</div>
</div>
</body></html>
view_edit.php
208
<html><head>
1.4.5.min.css" />
<script
src="../jquery.mobile-1.4.5.min.js"></script></head
>
<body>
<?php
?>
<h1>Data Mahasiswa </h1>
</div>
<table>
<tr><td>Nim</td>
<td>:</td>
<td>:</td>
209
name="nama_lengkap" value="<?=
$data['nama_lengkap'];?>"></td></tr>
<tr><td>Email</td>
<td>:</td>
name="email" value="<?=
$data['email'];?>"></td></tr>
<tr><td>Jenis Kelamin</td>
<td>:</td>
<td><select name="jenis_kelamin">
<option> </option>
<option
value="L">Laki-laki</option>
<option
value="P">Perempuan</option></select></td></tr>
<tr><td> TTL </td>
<td>:</td>
<td><input type="text" name="TTL"
value="<?= $data['TTL'];?>"></td></tr>
<tr><td> Alamat </td>
<td>:</td>
name="alamat" value="<?=
$data['alamat'];?>"></td></tr>
<tr><td>No Hp </td>
<td>:</td>
<td><input type="text" name="No_hp"
value="<?= $data['No_hp'];?>"></td></tr>
<tr><td><button type="submit" data-
role="button" data-inline="true" data-
theme="b">simpan</button></td></tr>
</table></form>
210
</div>
</div>
</body></html>
edit_mhs
<?php
$nim = $_POST["nim"];
$nama_lengkap = $_POST["nama_lengkap"];
$email = $_POST["email"];
$jenis_kelamin = $_POST["jenis_kelamin"];
$TTL = $_POST["TTL"];
$alamat = $_POST["alamat"];
$No_hp = $_POST["No_hp"];
$query = mysqli_query($conn, "UPDATE mhs SET

nim='$nim', nama_lengkap='$nama_lengkap',
email='$email', jenis_kelamin='$jenis_kelamin',
TTL='$TTL', alamat='$alamat', No_hp='$No_hp' WHERE
nim= '$nim'");
echo "<script>
alert('Data berhasil diedit');
</script>";
?>
211
212
REFERENSI
213
KARTU ASISTENSI
2022

NIM : 201080200116
Kelompok : 11
KARTU ASISTENSI
Tanggal Catatan
No. Judul Praktikum Tanggal Praktikum
Asistensi Asistensi
HTML (Hypertext
1. 11 November 2021
Markup Language)
CSS (Cascading Style
2. 11 November 2021
Sheet)
3. JAVA SCRIPT 11 November 2021
4. PHP 07 Januari 2022
Konektivitas PHP
5. 07 Januari 2022
dengan MYSQL
Desain Web Mobile
6. dengan jQuery 07 Januari 2022
Mobile
Mengetahui,

215

ACC 4 211080200087 Mochammad Zien Rifqi PrakBW Part1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

ACC 4 211080200087 Mochammad Zien Rifqi PrakBW Part1

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

PEMROGRAMAN BERBASIS WEB

Isi Laporan Ini

PEMROGRAMAN BERBASIS WEB

Nama : Mochammad Zien Rifqi

(Melina Atikawati, S.Kom.)

Sidoarjo, 11 November 2021

Mochammad Zien Rifqi

B. Manajemen Laboratorium Pemrograman Berbasis Web.........................2

C. Satuan Acara Praktikum (SAP)................................................................9

C. Instruksi Percobaan Praktikum..............................................................17

D. Lembar Kerja dan Tugas........................................................................17

POKOK BAHASAN II..........................................................................................43

C. Instruksi Percobaan Praktikum..............................................................47

D. Lembar Kerja dan Tugas........................................................................48

E. Kunci Lembar Kerja...............................................................................86

POKOK BAHASAN III.........................................................................................89

C. Instruksi Percobaan Praktikum..............................................................92

D. Lembar Kerja dan Tugas........................................................................92

POKOK BAHASAN IV......................................................................................130

D. Lembar Kerja dan Tugas......................................................................135

POKOK BAHASAN V........................................................................................158

C Lembar Kerja dan Tugas.....................................................................160

D. Lembar Kerja dan Tugas......................................................................183

A. Profil Laboratorium Pemrograman Berbasis Web

Manfaat Laboratorium Pemrograman Berbasis Web

B. Manajemen Laboratorium Pemrograman Berbasis Web.

SOP (Standard Operational Procedure).

Gambar 1.2 Diagram Alir Langkah-Langkah Yang Dilakukan Oleh

A. Analisis Materi / Instruksional

C. Satuan Acara Praktikum (SAP)

Tabel 2.1 Satuan Acara Praktikum.

PROGRAM STUDI INFORMATIKA

Praktikum Pemrograman Berbasis Web

Judul : HTML (Hypertext Markup Language)

(Ika Ratna Indra Astutik, S.Kom, MT.) (Vini Rahmawati)

Standar minimum elemen HTML adalah:

Keterangan tag-tag lainnya dapat dilihat pada tabel 3 dibawah.

Tabel 3.1 Tag-tag dalam HTML5

C. Instruksi Percobaan Praktikum

D. Lembar Kerja dan Tugas

Gambar 3.1 Bentuk dasar sintaks Html

Textbox tanpa Validasi

Textbox dengan validasi

Gambar 3.4 Tampilan isian password

Gambar 3.5 Tampilan checkbox

Gambar 3.6 Tampilan dropcown/select

Gambar 3.7 Tampilan textarea

Gambar 3.8 Tampilan input tanggal

Gambar 3.9 Tampilan input email

Gambar 3.10 Tampilan radio

Gambar 3.11 Tampilan image

Gambar 3.12 Tampilan file browser

Gambar 3.13 Tampilan list

Tabel 3 baris 2 kolom

Gambar 3.14 Tampilan tabel

Gambar 3.15 Tampilan rowspan tabel

Gambar 3.16 Tampilan colspan tabel

Ketika url atau email tidak sesuai format

Gambar 3.18 Form data diri 2

Ketika semua inputan terisi dan sesuai format

2. Membuat layout menggunakan tabel

PROGRAM STUDI INFORMATIKA

Praktikum Pemrograman Berbasis Web