web programming

1. Perancangan dan Pemrograman
Web
 Konsep dasar Web
 Arsitektur Web
 HTTP
 Client Side Programming
 Server Side Programming
 Web Server Software (PHPTriad,
XAMPP)
 Konsep HTML
 Desain Web
Pertemuan 1

2. Persentase Nilai
Tugas 40%
UTS Project 30%
UAS Project 30%

3. Topik Mata Kuliah (Teori)
1. Pengenalan Pemrograman Web
2. HTML
3. CSS
4. MYSQL
5. PHP Programming
6. Perkembangan Teknologi Web

4. Outcomes mata kuliah
 Mahasiswa diharapkan mampu menguasai :
HTML,CSS,MYSQL dan PHP
 Mahasiswa diharapkan dapat membuat sebuah
website lengkap dengan menggunakan komponen
diatas dimana , HTML dan CSS digunakan sebagai
design, MySql sebagai database serta PHP sebagai
programming language

5. Arah Pembelajaran (Praktikum)
 Pembelajaran akan dilakukan sebanyak 2 hari dalam
seminggu , satu hari untuk teori dan satu hari untuk
praktek.
 Teori : digunakan sebagai pengenalan dari matakuliah
serta pendalaman materi dan perkembangan
teknologi web
 Praktikum : digunakan sebagi wadah untuk
menciptakan produk website

6. Sesi Praktikum
 Sesi Praktikum pertemuan 1 -7 akan mendalami
pembuatan website menggunakan html , css untuk
menunjang project untuk UTS
 Sesi pertemuan 8-14 akan mendalami pembuatan
website dengan PHP programming dan MySQL untuk
menunjang project UAS

7. Definisi Web
World Wide Web ("WWW", atau singkatnya "Web")
adalah suatu ruang informasi di mana sumber-sumber
daya yang berguna diidentifikasi oleh pengenal global
yang disebut Uniform Resource Identifier (URI). WWW
sering dianggap sama dengan Internet secara
keseluruhan, walaupun sebenarnya ia hanyalah bagian
daripadanya.
Hiperteks dilihat dengan sebuah program bernama
browser web yang mengambil informasi (disebut
"dokumen" atau “halaman web") dari server web dan
menampilkannya, biasanya di sebuah monitor

8. Adalah kumpulan dari berbagai
jaringan komputer yang saling
interkoneksi yang mencakup seluruh
dunia (jaringan global) dengan melalui
jalur telekomunikasi seperti telepon,
fiber-optic, wireless dan lainnya.
Konsep Dasar Web
Internet

9. WWW
 Adalah salah satu bentuk layanan
yang dapat diakses melalui
internet.
 Biasa disingkat sebagai Web.
 Merupakan sekumpulan
dokumen, gambar-gambar, dan
bentuk resources yang lainnya
yang dihubungkan melalui
hyperlinks dan URLs.

10. Protokol
Merupakan bahasa/software standar untuk
mengatur komunikasi jaringan komputer
TCP/IP (Transmission Control Protocol / Internet
Protocol) merupakan cara standar untuk
mempaketkan dan menyelamatkan data komputer
(sinyal elektronik) sehingga data tersebut dapat
dikirim ke komputer yang lain.

11. HTTP (Hypertext Transfer Protocol)
Adalah protokol yang menentukan aturan yang
perlu diikuti oleh web browser dalam meminta dan
mengambil suatu dokumen oleh web server dalam
menyediakan dokumen yang diminta web browser.
Protokol ini merupakan protokol standar yang
digunakan untuk mengakses dokumen HTML

12. Contoh Http
 Contoh Transaksi
 S = Server
C = Client
 C : (Inisialisasi koneksi)
C : GET /index.htm HTTP/1.1
C : Host: www.wikipedia.org
S : 200 OK
S : Mime-type: text/html
S :
S : -- data dokumen --
S : (close connectioin)

13. URL (Uniform Resource Locator)
 Protokol yang digunakan oleh suatu browser untuk
mengambil informasi
 Nama komputer (server) dimana informasi
tersebut berada
 Jalur/path serta nama file dari suatu informasi
Digunakan untuk menentukan lokasi informasi
pada suatu web server.
Dapat diibaratkan sebagai suatu alamat, yang
terdiri dari:

14. Format umum URL:
Protokol_transfer://nama_host/path/nama_file
Contoh:
http://www.batamkomputer/shop/index.html
Keterangan:
 http ->protokol yang digunakan
 www.batamkomputer.com -> nama host atau server komputer
 shop -> jalur/path dari informasi yang dicari
 index.html -> nama file

15. Protokol Transfer
 adalah protokol yang digunakan untuk pengiriman informasi di internet.
 Beberapa protokol transfer:
 HTTP  protokol standar untuk suatu dokumen web
 FTP (File Transfer Protocol)  digunakan untuk mentransfer file dalam
format text atau binary dalam suatu server komputer diinternet.
 Gopher  digunakan untuk mengakses server gopher yang menyediakan
informasi dengan menggunakan suatu sistem menu atau melalui
hubungan telnet.
 News NNTP (Network News Transfer Protocol)  digunakan untuk
mendistribusikan berita di USENet. USENet adalah suatu sistem yang
dirancang sebagai forum diskusi dengan berdasarkan pada topik-topik
yang disebut news-group.
 Telnet  digunakan untuk login ke suatu server komputer.

16. DNS (Domain Name System)
 Adalah suatu sistem penamaan standar komputer-komputer di
internet dengan tujuan untuk mempermudah pengelolaan
server komputer internet.
 Merupakan suatu tingkat-tingkat domain, yang merupakan
kelompok komputer-komputer yang terhubung ke internet.

17. Homepage
 Website (situs web)  merupakan alamat (URL) yang berfungsi sebagai
tempat penyimpanan data dan informasi dengan berdasarkan topik
tertentu.
 Web Page (halaman web)  merupakan halaman khusus dari situs web
tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan
berbagai informasi dan link yang menghubungkan suatu informasi ke
informasi lain baik itu dalam page yang sama ataupun web page lain pada
website yang berbeda.
 Home page  merupakan sarana dasar untuk memperkenalkan secara
singkat tentang apa yang menjadi isi dari keseluruhan website dari suatu
organisasi atau pribadi.

18. Server dan Client
Dalam dunia internet selalu terdapat dua sisi yang saling mendukung, yaitu:
1. Server  penyedia berbagai layanan termasuk web. Layanan web ditangani
oleh sebuah aplikasi bernama web server.
2. Client  bertugas mengakses informasi yang disediakan oleh server. Pada
layanan web, client dapat berupa web browser.

19. Web Browser
 Berjalan pada komputer user
 Merupakan tool untuk melakukan navigasi di web
 Menampilkan dokumen web
Contoh-contoh:
 MS Internet Explorer  Windows
 Netscape Navigator/Communicator  Multi
 Opera  Multi
 Conqueror  Linux
 Lynx  Unix

20. Web Server
 Berjalan pada komputer server
 Sebagai tempat menyimpan file-file dokumen web sehingga
dapat diakses oleh pengguna internet
Contoh-contoh:
 Apache  Multi
 MS Intenet Information Server (IIS)  Windows
 Tomcat (for Java)  Multi

21. Web Programming
Web dapat dikategorikan menjadi dua, yaitu
1. web statis
web yang menampilkan informasi-informasi yang
sifatnya statis (tetap)
2. web dinamis atau interaktif.
web yang menampilkan informasi serta dapat
berinteraksi dengan user yang sifatnya dinamis.
Sehingga untuk membuat web dinamis dibutuhkan
kemampuan pemrograman web.

22. Dua kategori web programming:
 Server Side Programming
 Client Side Programming

23. Server Side Programing
 Server-side scripting adalah teknologi web server di
mana permintaan pengguna terpenuhi dengan
menjalankan script langsung pada server web untuk
menghasilkan halaman HTML dinamis. Hal ini
biasanya digunakan untuk menyediakan situs web
interaktif yang antarmuka ke database atau
menyimpan data lainnya

24. Server-side Programming
 Server Side Programming  web
server melakukan parse dan
eksekusi sehingga script
embedded dalam halaman web
 Contoh: CGI/Perl, ASP, JSP, PHP,
CFM

25. Client Side Programming
 Dalam jaringan komputer, kata “client side”
mengacu kepada operasi yang dilakukan oleh
client pada satu hubungan “client-server” . Secara
umum, suatu client adalah satu aplikasi komputer,
seperti web browser yang berjalan pada satu
komputer lokal dari pengguna atau workstation
dan terhubung ke satu server seperlunya.

26. Client-side Programming
 Client Side Programming  web
browser melakukan parse dan
eksekusi sehingga script
embedded dalam halaman web
 Contoh: JavaScript, HTML,
VBScript

27. Web Server Software
 Server web adalah sebuah perangkat lunak server yang
berfungsi menerima permintaan HTTP atau HTTPS dari klien
yang dikenal dengan browser web dan mengirimkan kembali
hasilnya dalam bentuk halaman-halaman web yang umumnya
berbentuk dokumen HTML. Server web yang terkenal
diantaranya adalah Apache dan Microsoft Internet
Information Service (IIS). Apache merupakan server web
antar-platform, sedangkan IIS hanya dapat beroperasi di
sistem operasi Windows.
 Server web juga dapat berarti komputer yang berfungsi
seperti definisi di atas.

28. Pengenalan HTML
 Adalah sebuah bahasa markup yang digunakan untuk
membuat sebuah halaman web dan menampilkan berbagai
informasi di dalam sebuah browser Internet.
 Bermula dari sebuah bahasa yang sebelumnya banyak
digunakan di dunia penerbitan dan percetakan yang
disebut dengan SGML, HTML adalah sebuah standar yang
digunakan secara luas untuk menampilkan halaman web
dan HTML kini merupakan standar Internet yang saat ini
dikendalikan oleh World Wide Web Consortium (W3C).

29. HTML?
 singkatan dari HyperText Markup Language
 menentukan tampilan suatu teks dan tingkat kepentingan dari teks
tersebut dalam suatu dokumen.
Software yang diperlukan:
 Text editor sederhana.
Contoh:
Windows: Notepad
Linux: gEdit, mcedit, pico, dan vi.
 Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, Opera dan Firefox
Linux: Firefox dan Conqueror.

30. Istilah-istilah dalam HTML:
 Tag - Digunakan untuk menentukan tingkah laku web browser.
Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih
besar “>” (tag akhir).Tag kontainer:
<namatag> ..... </namatag>
 Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen
untuk berbagai keperluan dengan berbagai bentuk penggunaan.
 Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML.
Suatu elemen biasanya akan mempunyai banyak atribut.

31. Kerangka dokumen HTML
Sintaknya sebagai berikut :
<html>
<head>
<title>………………</title>
</head>
<body>
………………
………………
</body>
</html>

32. Kerangka Dokumen HTML
 HTML
Untuk penanda bahwa dokumen yang dibuat adalah
dokumen web
 Head
Header menjelaskan properti dari dokumen HTML,
diantaranya adalah judul dan hubungan dengan
dokumen html yang lain.
 Title
merupakan komponen dari Tag Head, yang digunakan
untuk mendiskripsikan header halaman web.

33. Kerangka dokumen HTML
 Body
Body dari suatu dokumen HTML merupakan tempat
diletakannya isi dari dokumen html tersebut. Atribut
untuk tag <body> diantarnya adalah
BACKGROUND,BGCOLOR

34. Contoh dan cara penyimpanan
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Hallo Saya HTML
</body>
</html>

36. Komentar
 Komentar adalah bagian dari kode HTML yang
diabaikan oleh browser.
 Kegunaan komentar dalam kode HTML adalah
sebagai keterangan yang berguna bagi pembaca
kode.
 Sebuah keterangan diawali dengan <!- dan diakhiri
dengan ->.
 Di dalam kedua tanda tersebut, Anda bisa
memberikan keterangan apa saja dan bahkan bisa
mencakup beberapa baris.
 Cara penulisan :
<!--Keterangan ini tidak ditampilkan di browser-->

37. Contoh yang menggunakan
keterangan
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Hallo Saya HTML <!- ini keterangannya ->
</body>
</html>

39. Tag tag dasar dalam html
 <html>
 <head>
 <title>
<body>
 <br>
 <p>
 <hr>
 &nbsp
 <h1> sampai <h6>

40. Latihan 1
1. Sebutkan jenis jenis situs yang anda ketahui?
2. Elemen apa saja yang ada di dalam sebuah situs yang
anda ketahui, jelaskan fungsinya
3. Menurut anda situs website seperti apa yang baik?