1

1

Nuryuliani

KonsepPemrograman Web

Kuliah Umum

Kampus Kalimalang

2

Konsep WebWorld Wide Web ("WWW", atau disingkat

"Web") adalah suatu ruang informasidimana sumber –sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI).

2

3

WWW sering dianggap identik denganInternet,dan merupakan bagian daripadanya. Hiperteks dilihat dengan sebuah program browser web yang mengambilinformasi(disebut"dokumen“ atau “halamanweb") dari suatu server web danmenampilkannya biasanya disebuah monitor.

Halaman web biasanya diatur dalam koleksimaterial yang berkaitan yang disebut “situsweb".

4

• Kegiatan pindah halaman untuk pindah kedokumen lain atau bahkan mengirim informasikembali kepada server untuk berinteraksidengannya sering disebut"surfing"atau"berselancar“

• Halaman – halaman sebuah situs web diaksesdari sebuah URL (Uniform Resource Locator) yang menjadi "akar" (root), yang disebuthomepage, dan biasanya disimpan dalam server yang sama.

3

5

• Tidak semua situs web dapat diaksesdengan gratis. Beberapa situs web memerlukan pembayaran agar dapatmenjadi pelanggan, misalnya situs – situsberita, layanan surat elektronik (e-mail), dan lain – lain.

6

Konsep Pemrograman Web

• Pemrograman web: membuat aplikasi berbasisweb

• Aplikasi berbasis web: Aplikasi yang dibuatdengan memanfaatkan mekanisme dan aplikasiyang sudah ada pada sistem web (WWW)

•Sistem web sebenarnya merupakan aplikasiyang:– berarsitektur client-server

•software web browser disisiclient•software web server disisiserver

4

7

- menggunakan protokol HTTP (HyperTextTransfer Protocol ) dalam komunikasiantara client dan server

– mempunyai fungsi untukmengambil/menjalankan isi file dokumenweb diserver dan menampilkannya disisiclient

8

Membuat aplikasi berbasis web berarti:

– Memperkaya fungsi web server dengancara menambahkan program padadokumen web yang akan dieksekusi olehserver ketika file dokumen web tersebutdiakses oleh web server

• Misalnya, program yang mengambildata kebasis data untukditampilkan ke web browser

5

9

- Memperkaya interaktivitas dokumendengan cara menambahkan program padadokumen web yang akan dieksekusi olehweb browser ketika file dokumen tersebutditampilkan oleh web browser- Misalnya, program yang memvalidasi data

masukan pada form sebelum disubmit ke web server

10

Kelebihan Aplikasi Berbasis Web

• Kelebihan:– Kemudahan Pengembangan

Program cukup di update di server, penguna cukup menggunakan browser

6

11

Kelebihan Aplikasi Berbasis Web

- Kemudahan koneksi: Dapat diakseskapanpun dan darimanapun selama adainternet. Dapat diakses hanya denganmenggunakan web browser (umumnyasudah tersedia diPC, PDA, danhandphone terbaru)

12

Kekurangan:- Antarmuka yang dapat dibuat terbatas

sesuai spesifikasi standar untuk membuatdokumen web dan keterbatasankemampuan web browser untukmenampilkannya

- Terbatasnya kecepatan internet mungkinmembuat respon aplikasi menjadi lambat

7

13

Bagaimana Web Bekerja?

14

Gambar Skema kerja Website

8

15

Bagaimana Web Bekerja• user mengetikURL dibrowser• browser menghubungi server yang tersebut pada URL• Setelah terhubung, browser mengirimkan HTTP request• server menjawab dengan mengirim HTTP response

(berisi header dan isi dokumen)• Untuk dokumen yang terdiri atas beberapa file (misalnya

dokumen bergambar), browser harus mengirimkanHTTP request lagi untuk setiap file

• browser menampilkan semua isi dokumen kepada user

16

aplikasi berbasis web- Disisiclient:

- Sintaks pembuatan dokumen web (HTML & CSS)

- Client side scripting (JavaScript)- Disisiserver

- Mekanisme pemanggilan program danpengambilan output program oleh web server (CGI)

- Server side scripting (PHP, JSP, ASP, dll. Untukcontoh: PHP)•

9

17

- Penghubung- Sintakspengalamatandokumenweb

(URL)- Protokolkomunikasi(HTTP)

18

Content Management System(CMS).

• Pertanyaan yang muncul sekarang adalahadakah sebuah sistem yang dapatmengelola content Website?

10

19

CMS : Open source

Joomla, Wordpress, Drupal

20

Manfaat CMS• Manajemen data

– Semua data/informasi baik yang telahditampilkan ataupun belum dapat diorganisasidan disimpan secara baik.

– CMS juga mendukung berbagai macamformat data, seperti XML, HMTL, PDF, dll., indexing, fungsi pencarian, dan kontrolterhadap revisi yang dilakukan terhadapdata/informasi.

11

21

• Mengatur siklus hidup website– Banyak CMS memberikan fasilitas kepada para

penggunanya untuk mengelola bagian atau isi manasaja yang akan ditampilkan, masa/waktu tampilandan lokasi tampilan di website.

• Mendukung web templating dan standarisasi– Setiap halaman website yang dihasilkan berasal dari

template yang telah terlebih dahulu disediakan olehCMS. Selain dapat menjaga konsistensi dari tampilansecara keseluruhan

22

• Personalisasi website– isi Web dapat ditampilkan sesuai dengan

keinginan dan kebutuhan dari penggunanya• Sindikasi

– memberikan kemungkinan kepada sebuahwebsite untuk membagi isinya kepadawebsite-website yang lain.

12

23

• Akuntabilitas– CMS mendukung alur kerja dan hak akses

yang jelas kepada para penggunanya, sehingga data/informasi yang disampaikandapat dipertanggungjawabkan dengan baik.

24

Pemanfaatan CMSCMS dapat dipergunakan untuk berbagai macam

keperluan dan dalam berbagai kondisi, sepertiuntuk:

a. Mengelola website pribadi.b. Mengelola website perusahaan/bisnis.c. Portal atau website komunitas.d. Galeri foto, dan lain sebagainya.e. Forum.f. Aplikasi E-Commerce.g. Dan lain-lain.

13

25

PENGENALAN BLOGPENGENALAN BLOG

26

• Blog adalah kependekan dari Weblog, istilah yang pertama kali digunakan oleh Jorn Barger pada bulanDesember 1997

• Jorn Barger menggunakan istilah Weblog untukmenyebut kelompok website pribadi yang selaludiupdate secara kontinyu dan berisi link-link kewebsite lain yang mereka anggap menarik disertaidengan komentar–komentar mereka sendiri.

Pengertian Blog

14

27

• Blog Politikhttp://pemilu2004.goblogmedia.com

• Personal Bloghttp://enda.goblogmedia.com, http://didats.net.

• Blog bertopikhttp://beasiswaindonesia.blogspot.com

• Blog kesehatanhttp://www.blogdokter.net, http://mediacare.blogspot.com

Jenis-jenis Blog

28

• Blog Mediahttp://blog.tempointeraktif.com

• Blog Agamahttp://blog.muslimblog.net

• Blog Organisasihttp://fti.bl.ac.id

• Dan lain-lain

Jenis-jenis Blog

15

29

30

BLOGGER(BACKEND)

READER(USER INTERFACE)

16

31

Ngeblog dengan WordPress

32

• Dukungan kategori dan sub kategori posting yang tak terbatas.

• Sindikasi otomatis dengan RSS(Really Simple Syndication) Feed Atom.

• Menggunakan interface XML RPC (eXtensible Markup Language Remote Procedure Call. Sebuah protokol client-server yang menerima dan mengirim informasi "di atas" HTTP. Data dikirim dan diterima dalam format XML tertentu yang dirancang khusus untuk digunakan dengan XMLRPC) yang memungkinkan posting dari mana saja, termasuk dari email.

• Kemudahan penambahan plugin dan themes (tampilan).• Kemudahan mengimport data dari sistem blog lainnya, seperti

MovableType, Blogger, TextPattern, dan b2evolution.

Keunggulan Wordpress

17

33

• Kemudahan posting dengan dukungan WYSIWYG editor.• Kemudahan administrasi dan maintenance.• Fasilitas pencarian yang komprehensif• Dukungan berbagai bahasa.• Dukungan dokumentasi yang lengkap dan komunitas yang

cukup banyak.• Lisensi GNU General Public License sehingga dapat

didownload secara bebas.• Content Based Management System.

Keunggulan Wordpress

34

MEMULAI NGEBLOGhttp://ngeblogs.com

18

35

Buka browser, ketik http://www.ngeblogs.comklik DAFTAR DISINI!

36

Isikan Username dan Email Address pada kotakteks yang tersedia. Pilih opsi Buat saya blog! Kemudian klik next

19

37

Isikan Username dan Email Address pada kotakteks yang tersedia. Pilih opsi Buat saya blog! Kemudian klik next

1

2

3

38

Jika pendaftaran disetujui, akan tampil halaman berikut. Andaakan mendapat alamat URL berupa username NGEBLOGS.com dan klik tombol Signup

20

39

Anda telah selesai membuat blog pribadi Anda

40

Buka email Anda dari ngeblog.com. Klik link aktifasi yang ada di dalam email tersebut.

21

41

Setelah aktifasi, Anda akan mendapatkankonfirmasi berupa username dan password. Harap ini disimpan dan diingat!

42

Pada site Ngeblog.Com masukkan username danpassword Anda!

22

43

Tampilan awal blog Ngeblog.Com secara otomatisakan membuat sebuah posting berjudul “Hello world!”

44

Membuat Halaman Baru

Tuliskanjudul

“halaman”

Tambahgambar, video dll

Menyimpanhalaman

yang dibuat

Mempublish & menyimpan

halaman yang dibuat

Tuliskan isihalaman

23

45

Membuat Kategori

Kategori dipergunakan untuk mengelompokkan artikel dan link.

Sebagai default, Ngeblog.Com telah membuatkan kategori Uncategorized untuk menangani artikel-artikel Anda.

Berikut ini caranya :

46

Menambah Kategori• Klik menu Manage• Klik sub menu Categories• Klik link Add New• Masukkan nama kategori dalam kotak

isian Category Name• Klik tombol Add Category Kategori baru

telah ditambahkan ke dalam website.

24

47

Mengubah Kategori

1. Klik menu Manage2. Klik sub menu Categories3. Cari kategori yang diinginkan4. Klik tulisan edit yang sebaris dengan

kategori yang diinginkan5. Gantilah category name dengan kategori

yang diinginkan6. Klik tombol Edit Category

48

Menghapus Kategori• Klik menu Manage• Klik sub menu Categories• Cari kategori yang diinginkan, klik tulisan

Delete yang sebaris dengan kategori yang diinginkan.

25

49

Memposting Artikel

Tuliskanjudul“post”

Tambahgambar, video dll

Menyimpanposting yang

dibuat

Mempublish & menyimpanposting yang

dibuat

Tuliskan isipost/artikel