3. Standar Kompetensi
• Sesudah mengikuti mata kuliah ini,
mahasiswa diharapkan Mampu
melakukan rancang bangun Aplikasi
berbasis Web pada berbagai jenis
Project (di berbagai
kegiatan/pekerjaan/bisnis)
menggunakan perangkat
lunak(software) WEB, metode, teknik-
teknik, Algoritma/Logika Pemrograman
dan alat bantu (Hardware) tertentu
untuk implementasi berikut
pendokumentasiannya
4. Manfaat Mata Kuliah
Mata kuliah ini sangat bermanfaat bagi
mahasiswa dalam memahami dan
membuat aplikasi berbasis web,
dengan memperhatikan algoritma ,
menggunakan tag html, php,
penggunaan database dalam web, css,
javascript, jquery.
5. Deskripsi Mata Kuliah
Ruang lingkup mata kuliah ini mencakup
pembahasan tentang
Penjelasan tentang aplikasi yang berbasis
internet dan world wide web, Pembuatan
aplikasi web statis dan dinamis dengan
menggunakan html, javascript, php ,
jquery, penggunaan database dalam web,
pemrograman berbasis object, Model View
Controller, Web Framework.
6. MATERI BELAJAR
Konsep HTML
HTML - CSS
Elemen dasar PHP : Variabel Jenis/type, scope &
Operator
Struktur Kontrol : If …, Else…., ElseIf …., Do…While
Sintak PHP (lanjut)
Function: Membuat fungsi, fungsi build in PHP,
Manipulasi array dan String & Akses ke database
Presentasi tugas ke III, atau kuize, sebelum UTS
7. Pemaparan Studi kasus untuk UAS: Project dan
menampilkannya atau halaman web Project di
internet
Menggunakan MySQL : dasar2 MySQL, Membuat
database dan tabel & mengenal fungsi2 MySQL
Manipulasi tabel : Perintah SQL serta Klausa Where,
Operator Logic menghapus, menambah &
mengupdate Record
Membuat Web Dinamis : dgn CSS, disain web Page
dinamis melalui tools form, page login &
Administrator.
Manajement Cookie dan membentuk session
MATERI BELAJAR
8. Manajement Cookie : mengenal Cookie dan
HTTP, Menciptakan, mengakses, mengganti
Cookie, menambah tgl yg kadarluasa &
Memperoleh Daftar Cookie, Membentuk
sessie
Pemrograman Web berbasis object, MVC
File pdf document, upload dan download
Framework
Presentasi Project yg dibuat berkelompok
berbaisi web sebelum UAS
MATERI BELAJAR
9. MATERI BELAJAR
Keterkaitan Matakuliah Perancangan dan
Pemrograman Web : Mata kuliah ini terkait
dengan Mata kuliah Algoritma dan
Pemrograman, Perancangan BasisData, RPL,
TA.
Kaitan Mata kuliah :
10. Pengalaman Belajar
Selama mengikuti perkuliahan ini mahasiswa
diwajibkan:
1. Mengikuti kegiatan ceramah, tanya jawab
dan diskusi di kelas.
2. Berpartisipasi aktif dalam mengerjakan
modul pembelajaran web
3. Mengerjakan tugas-tugas individual dan
kelompok
11. Evaluasi Hasil Belajar:
Keberhasilan mahasiswa dalam perkuliahan
ini ditentukan oleh prestasi yang
bersangkutan dalam :
1. Kehadiran sebanyak 80% di kelas.
2. Partisipasi Kegiatan Kelas.
3. Tugas-Tugas Harian.
4. Praktikum.
5. Ujian Tengah Semester.
6. Ujian Akhir Semester.
13. 13
Objectives
Setelah menyelesaikan bab ini,
anda diharapkan dapat:
• Memahami konstruksi dasar halaman web.
• Mengerti tentang WWW
• Mengerti tag-tag dasar HTML
• Membuat halaman web dengan HTML
sederhana.
14. 14
World Wide Web (WWW)
• Internet merupakan jaringan global yang
menghubungkan suatu network dengan network
lainya di seluruh dunia.
• TCP/IP menjadi protocol penghubung antara
jaringan-jaringan yang beragam di seluruh
dunia untuk dapat berkomunikasi.
• World Wide Web (WWW) merupakan bagian
dari internet yang paling cepat berkembang dan
paling populer.
15. 15
WWW - continued
• WWW bekerja merdasarkan pada tiga
mekanisme berikut:
▫ Protocol standard aturan yang di gunakan untuk
berkomunikasi pada computer networking, Hypertext
Transfer Protocol (HTTP) adalah protocol untuk
WWW.
▫ Address WWW memiliki aturan penamaan alamat
web yaitu: URL(Uniform Resource Locator) yang di
gunakan sebagai standard alamat internet.
▫ HTML digunakan untuk membuat document yang
bisa di akses melalui web.
▫ Contoh :
• http://www.detik.com/index.html
16. 16
HyperText Markup Language (HTML)
• HTML standard bahasa yang digunakan
untuk menampilkan document web.
▫ Mengontrol tampilan dari web page dan contentnya.
▫ Mempublikasikan document secara online sehingga
bisa di akses.
▫ Membuat online form yang bisa di gunakan untuk
menangani pendaftaran, transaksi secara online.
▫ Menambahkan object-object seperti image, audio,
video dan juga java applet dalam document HTML.
▫ Versi terakhir saat ini adalah HTML5
▫ HTML5 diawali dengan <!DOCTYPE HTML>
17. 17
Browser dan Editor
• Browser: Browser merupakan software yang di install
di mesin client yang berfungsi untuk menterjemahkan
tag-tag HTML menjadi halaman web. Browser yang
sering di gunakan biasanya Internet Explorer, Netscape
Navigator, Opera, Mozilla dan masih banyak yang lainya.
• Editor: Program yang di gunakan untuk membuat
document HTML, ada banyak HTML editor yang bisa
anda gunakan diantaranya: Notepad, Microsoft
FrontPage, Macromedia Dreamweaver, dan lain-lain.
18. File HTML
Pemberian nama file pada Home page
• File extention untuk file html : htm, html
• File : index.html menjadi default dalam web site atau virtual
directory dalam suatu website
19. 19
Tag-tag HTML
• Kalo pada bahasa pemrograman kita mengenal
code, maka pada HTML kita mengenal yang
namanya tag.
• Contoh tag html adalah <head>, <title>,
<body>, <html>, <img>, dan lain-lain.
• Tag html tidak bersifat case sensitive
<body> sama dengan <BODY>
20. 20
Tag-tag HTML - continued
• Bentuk umum penulisan tag html adalah:
<ELEMENT ATTRIBUTE = value>
Dimana:
▫ Element - nama tag
▫ Attribute - atribut dari tag
▫ Value - nilai dari atribut.
• Contoh:
<BODY BGCOLOR=lavender>
21. 21
Struktur HTML document
• Document HTML bisa di bagi mejadi tiga bagian utama:
html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
23. 23
<html>
• Setiap document HTML harus di awali dan di
tutup dengan tag HTML <html> ……
</html>
• Tag <html> memberi tahu browser bahwa yang
di dalam kedua tag tersebut adalah document
HTML.
24. 24
<head>
• Bagian header dari document HTML di apit oleh tag
<head></head>.
• Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan
judul dari halaman web.
<head>
<title>Judul </title>
</head>
25. 25
<body>
• Tag <body> di gunakan untuk menampilkan text, image
link dan semua yang akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to my html </title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>
26. 26
Elemen dasar – Block Level
• Block level element: terdapat 6
tingkatan, yaitu H1 sampai
H6.
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
27. 27
Elemen dasar – Paragraph (p)
• Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari mahasiswa UPJ
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
28. Elemen dasar – list item (li)
• Unordered list <ul>: List item tidak berurutan (bullet)
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>
29. 29
list item (li) - continued
• Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Prodi UPJ</P>
<ol start="1" type=“1">
<li>Sistem Informasi</li>
<li>TI</li>
<li>Komunikasi</li>
<li>Teknik Sipil</li>
</ol>
<body>
30. 30
list item (li) - continued
• Tipe-tipe pada list item - ordered list <ol> :
▫ “A” : A, B, C, …
▫ ”a” : a, b, c, …
▫ ”I” : I, II, III, …
▫ ”i” : i, ii, iii, …
▫ ”1” : 1, 2, 3, …
31. 31
Elemen dasar – Horizontal Rules <hr>
• Horizontal Rule tag digunakan untuk menggambar garis
horizontal dalam dokumen html.
• Attribut dari <hr> adalah:
▫ Position: menetukan posisi dari <hr>, dengan nilai : center |
right | left.
▫ Width: untuk menentukan panjang <hr>. Nilai default 100%.
▫ Size: untuk menentukan tebal dari <hr> dalam pixel.
▫ Noshad: Efek bayangan.
• Contoh:
<hr position=“center” width=90% size=3
noshad>
32. 32
Pemformatan Page
• Break : memulai baris baru
tag : <br />
• Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>
Color : attribute dgn 3 kategori warna (RGB)
#RRGGBB, misal #FF0000 adalah Red
33. 33
• Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan UPJ</P>
• Format Text :
A. Physical Format B. Logical Format
Pemformatan Page – Cont. 1
C. Preformatted Text : menampilkan text spt aslinya.
<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre>
34. 34
• Contoh :
• <!DOCTYPE HTML>
<html>
<head>
<title>Welcome to sif UPJ</title>
</head>
<body>
<B><P align="center">Prodi di UPJ</P></B>
UPJ memiliki 10 prodi , 3 diantaranya adalah : <br>
<font color="#9966FF" size="3" face="arial">
1. Sistem Informasi</font> <br>
2. Teknik Informatika<br>
3. Ilmu Komunikasi<br>
</body>
</html>
Pemformatan Page – Cont. 2
35. Marquee (Scrolling text)
<marquee>This text will scroll from right to
left</marquee>
<marquee direction="up">This text will scroll from
bottom to top</marquee>
<marquee direction="down" width="250" height="200"
behavior="alternate" style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
