Materi Kuliah Pemrograman Internet, Bedah Halaman Website

1. Bedah Website
a 'website' anatomy course

2. Toni Tegar Sahidi
tonitegarsahidi@gmail.com
STT Stikma Internasional, Malang

5. SURGERY OVERVIEW
#1 Web Browser & Web Server
#2 Seribu Website Satu Server
#3 Web Statis vs Web Dinamis
#4 Halaman Awal Website
#5 Anatomi sebuah Website

6. #1 WEB BROWSER
& WEB SERVER
1/4

7. web browser

8. program yang kita pakai untuk
menampilkan sebuah halaman website

9. Google Chrome Internet Explorer
Opera Safari Mozilla Firefox
Rockmelt SeaMonkey
dll....

10. web server

11. software yang berjalan di komputer
server, sebagai tempat menyimpan
dokumen-dokumen web, shingga ia
bisa diakses oleh pengguna web.

12. Sebuah website, diakses pada web browser
dengan mengetikkan “alamat” dari web server
tujuan.

13. Sebuah website, diakses pada web browser
dengan mengetikkan “alamat” dari web server
tujuan.

14. alamat = nomor IP atau nama domain

15. domain vs ip
 www.google.com  2001:4860:4002:8
00::1013
 74.125.227.50
 74.125.227.51
 74.125.227.52
 74.125.227.48
 74.125.227.49

16. setiap alamat IP, (biasanya) merepresentasikan
satu buah server

17. alamat lokal/LAN ≠ alamat internet

18. http://localhost/tokoonlinesaya

19. http://www.TokoOnlineSaya.com

20. demo....

21. #2 1000 WEBSITE
SATU SERVER
1/4

22. contoh multiple website
satu server
www.tokoobat.com
www.emailq.com 
www.jalanjalan.net 118.21.8.9
http://kucing.org
www.mantap.com
www.super.tv

23. kok bisa?

24. “virtual host”

25. sebuah fitur pada web server
yang akan me-redirect request atas alamat
domain tertentu, ke sebuah folder dalam web
server tersebut

26. e.g.
satu server
www.super.tv → http://68.9.2.1/www.super.tv
www.doremi.us → http://68.9.2.1/www.doremi.us
beda folder

27. #3 WEB DINAMIS
VS WEB STATIS
2/4

28. web statis

29. statis secara konten!
bukan statis secara tampilan

30. cukup HTML saja.
(tak perlu web programming)

31. mengedit konten = mengedit file html

32. AMAT SANGAT RIBET...!!
(bayangkan situs sekelas detik.com masih statis)

33. web dinamis

34. dinamis secara konten & bukan tampilan
konten dapat berubah-ubah / dinamis

35. butuh web programming
(PHP, ASP, JSP, dll)

36. update konten = sesuai pemrogramannya
(misal dengan update database)

37. MEMUDAHKAN..!!

38. #4 HALAMAN AWAL
WEBSITE
1/4

39. semisal ketika kita membuka
http://www.sepatuterakhir.com/novel.html

40. Artinya kita me-request file 'novel.html'
yang terdapat di situs
http://www.sepatuterakhir.com

41. Lah Terus?
Jika yang diketik hanya seperti ini?
http://www.sepatuterakhir.com

42. file apa yang sebenarnya di-request & dibuka?

43. Jawab :
tergantung konfigurasi server!

44. namun secara DEFAULT, umumnya adalah
file index.php, index.html, home.html, dll.

45. #5 ANATOMY OF A
WEBSITE
1/4

47. Anatomy of a Website
 HTML → CORE of a WEBSITE
 CSS → untuk layouting
 JavaScript → untuk interaktifitas
 Text Content (Artikel, dlsb)
 Media Content (images,flash,etc)
 Binary Content (applet Java,dll)

48. CARA MELAKUKAN
OPERASI BEDAH INSTAN
PADA WEBSITE

49. klik kanan pada halaman website lalu pilih
'View Page Source'

50. CARA LAIN
Pada halaman web yang tengah dibuka,
pada keyboard silakan tekan
'Ctrl U' secara bersamaan

51. Akan ditampilkan Source Code
dari Website yang Anda buka

52. next session
 HTML DASAR