2 pemrograman internet bedah halaman web

52

Click here to load reader

description

Materi Kuliah Pemrograman Internet, Bedah Halaman Website

Transcript of 2 pemrograman internet bedah halaman web

Page 1: 2 pemrograman internet   bedah halaman web

Bedah Website a 'website' anatomy course

Page 2: 2 pemrograman internet   bedah halaman web

Toni Tegar Sahidi [email protected]

STT Stikma Internasional, Malang

Page 3: 2 pemrograman internet   bedah halaman web
Page 4: 2 pemrograman internet   bedah halaman web
Page 5: 2 pemrograman internet   bedah halaman web

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

Page 6: 2 pemrograman internet   bedah halaman web

#1 WEB BROWSER

& WEB SERVER

1/4

Page 7: 2 pemrograman internet   bedah halaman web

web browser

Page 8: 2 pemrograman internet   bedah halaman web

program yang kita pakai untuk

menampilkan sebuah halaman website

Page 9: 2 pemrograman internet   bedah halaman web

Google Chrome Internet Explorer

Opera Safari Mozilla Firefox

Rockmelt SeaMonkey

dll....

Page 10: 2 pemrograman internet   bedah halaman web

web server

Page 11: 2 pemrograman internet   bedah halaman web

software yang berjalan di komputer

server, sebagai tempat menyimpan

dokumen-dokumen web, shingga ia

bisa diakses oleh pengguna web.

Page 12: 2 pemrograman internet   bedah halaman web

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

tujuan.

Page 13: 2 pemrograman internet   bedah halaman web

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

tujuan.

Page 14: 2 pemrograman internet   bedah halaman web

alamat = nomor IP atau nama domain

Page 15: 2 pemrograman internet   bedah halaman web

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

Page 16: 2 pemrograman internet   bedah halaman web

setiap alamat IP, (biasanya) merepresentasikan satu buah server

Page 17: 2 pemrograman internet   bedah halaman web

alamat lokal/LAN ≠ alamat internet

Page 18: 2 pemrograman internet   bedah halaman web

http://localhost/tokoonlinesaya

Page 19: 2 pemrograman internet   bedah halaman web

http://www.TokoOnlineSaya.com

Page 20: 2 pemrograman internet   bedah halaman web

demo....

Page 21: 2 pemrograman internet   bedah halaman web

#2 1000 WEBSITE

SATU SERVER

1/4

Page 22: 2 pemrograman internet   bedah halaman web

contoh multiple website

satu server

www.tokoobat.com

www.emailq.com

www.jalanjalan.net

http://kucing.org

www.mantap.com

www.super.tv

118.21.8.9

Page 23: 2 pemrograman internet   bedah halaman web

kok bisa?

Page 24: 2 pemrograman internet   bedah halaman web

“virtual host”

Page 25: 2 pemrograman internet   bedah halaman web

sebuah fitur pada web server yang akan me-redirect request atas alamat

domain tertentu, ke sebuah folder dalam web server tersebut

Page 26: 2 pemrograman internet   bedah halaman web

e.g.

www.super.tv → http://68.9.2.1/www.super.tv www.doremi.us → http://68.9.2.1/www.doremi.us

beda folder

satu server

Page 27: 2 pemrograman internet   bedah halaman web

#3 WEB DINAMIS

VS WEB STATIS

2/4

Page 28: 2 pemrograman internet   bedah halaman web

web statis

Page 29: 2 pemrograman internet   bedah halaman web

statis secara konten! bukan statis secara tampilan

Page 30: 2 pemrograman internet   bedah halaman web

cukup HTML saja. (tak perlu web programming)

Page 31: 2 pemrograman internet   bedah halaman web

mengedit konten = mengedit file html

Page 32: 2 pemrograman internet   bedah halaman web

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

Page 33: 2 pemrograman internet   bedah halaman web

web dinamis

Page 34: 2 pemrograman internet   bedah halaman web

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

Page 35: 2 pemrograman internet   bedah halaman web

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

Page 36: 2 pemrograman internet   bedah halaman web

update konten = sesuai pemrogramannya (misal dengan update database)

Page 37: 2 pemrograman internet   bedah halaman web

MEMUDAHKAN..!!

Page 38: 2 pemrograman internet   bedah halaman web

#4 HALAMAN AWAL

WEBSITE

1/4

Page 39: 2 pemrograman internet   bedah halaman web

semisal ketika kita membuka

http://www.sepatuterakhir.com/novel.html

Page 40: 2 pemrograman internet   bedah halaman web

Artinya kita me-request file 'novel.html' yang terdapat di situs

http://www.sepatuterakhir.com

Page 41: 2 pemrograman internet   bedah halaman web

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

Page 42: 2 pemrograman internet   bedah halaman web

file apa yang sebenarnya di-request & dibuka?

Page 43: 2 pemrograman internet   bedah halaman web

Jawab : tergantung konfigurasi server!

Page 44: 2 pemrograman internet   bedah halaman web

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

Page 45: 2 pemrograman internet   bedah halaman web

#5 ANATOMY OF A

WEBSITE

1/4

Page 46: 2 pemrograman internet   bedah halaman web
Page 47: 2 pemrograman internet   bedah halaman web

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)

Page 48: 2 pemrograman internet   bedah halaman web

CARA MELAKUKAN OPERASI BEDAH INSTAN

PADA WEBSITE

Page 49: 2 pemrograman internet   bedah halaman web

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

Page 50: 2 pemrograman internet   bedah halaman web

CARA LAIN Pada halaman web yang tengah dibuka,

pada keyboard silakan tekan 'Ctrl U' secara bersamaan

Page 51: 2 pemrograman internet   bedah halaman web

Akan ditampilkan Source Code

dari Website yang Anda buka

Page 52: 2 pemrograman internet   bedah halaman web

next session

HTML DASAR