Perancangan dan Pemrograman

Web
Kontrak Kelas & Prolog
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
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.
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.
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
MATERI BELAJAR

 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
 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

Kaitan Mata kuliah :

Keterkaitan Matakuliah Perancangan dan

Pemrograman Web : Mata kuliah ini terkait
dengan Mata kuliah Algoritma dan
Pemrograman, Perancangan BasisData, RPL,
TA.
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
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.
Pengantar HTML
 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

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

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

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

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.
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

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

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

Struktur HTML document

• Document HTML bisa di bagi mejadi tiga bagian utama:
html, head, dan body.

<html>
<head>

</head>

<body>

</body>
</html>
 22

Susunan HTML
<Head>
Kepala <Title>
Judul Homepage
<head> </Title>
</Head>

Homepage
<Body>
Tubuh Isi…Teks
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>
 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.
<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>

24
 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>
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>

26
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>

27
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>
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>

29
 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

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

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

Pemformatan Page – Cont. 1

• Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan UPJ</P>
• Format Text :
A. Physical Format B. Logical Format

C. Preformatted Text : menampilkan text spt aslinya.

<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre>
 34

Pemformatan Page – Cont. 2

• 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>
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>
img : Display picture
<!DOCTYPE html>
<html>
<body>

<img src="smiley.gif" alt="Smiley face"

width="142" height="242">

</body>
</html>
 37

Elemen dasar – hyperlink <a>

• Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://sif.upj.ac.id”> Halaman web
SIF UPJ</a>
• Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:
 38

Pembuatan Tabel
• Untuk membuat tabel : <tabble>
Cell-nya dengan tag <td>
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>
 39

Pembuatan Tabel – Cont. 1

• Untuk membuat baris cell : <tr>
• Untuk title tabel : <caption>
<body>
<table border="1">
<caption>Creating Table</caption>
<tr> <td>cell 1a</td>
<td>cell 1b</td>
</tr>
<tr> <td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>
 40

Pemformatan Tabel
• Perataan tabel :
1. align (center, justify, left, right).
2. valign (baseline, top, middle, bottom)
• Lebar tabel : width=“25%”
• Warna cell : bgcolor=“red”
• Spasi tabel :
cellspacing untuk memberi spasi antar sel
cellpadding untuk spasi dari border ke text dalam cell
 41

Pemformatan Tabel – Cont. 1

• Contoh :
<body>
<table border=1 cellspacing=5
cellpading=10>
<tr align="left" valign="top">
<td width="25%" bgcolor=red>cell
1a</td>
<td width="25%" bgcolor=yellow>cell
1b</td>
</tr>
<tr align="center" valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>
Terima Kasih