Pertemuan II. Ali Tarmuji, S.T., M.Cs. Pemrograman Web. Teknik Informatika Fakultas Teknologi Industri

Pertemuan II

Ali Tarmuji, S.T., M.Cs.

[email protected]

Pemrograman Web [email protected]

Teknik Informatika Fakultas Teknologi Industri

1

Materi minggu ini:



2



3

Pemahaman Pemrograman Web • Pemrograman: suatu usaha menulis suatu perintah (program aplikasi) sehingga komputer dapat menjalankan apa yang kita inginkan • Pemrograman web: membuat program aplikasi berbasis web • Aplikasi berbasis web: Aplikasi yang dibuat dengan memanfaatkan mekanisme dan aplikasi yang sudah ada pada sistem web (WWW) Pemrograman Web [email protected]


4

Membuat aplikasi berbasis web • Memperkaya fungsi web server dengan cara menambahkan program pada dokumen web yang akan dieksekusi oleh server ketika file dokumen web tersebut diakses oleh web server

– Misalnya, program yang mengambil data ke basis data untuk ditampilkan ke web browser

• Memperkaya interaktivitas dokumen dengan cara menambahkan program pada dokumen web yang akan dieksekusi oleh web browser ketika file dokumen tersebut ditampilkan oleh web browser – Misalnya, program yang memvalidasi data masukan pada form sebelum disubmit ke web server Pemrograman Web [email protected]


5

Cara kerja Web



6

Aplikasi Berbasis Web • Sistem Berbasis Web atau Aplikasi Berbasis Web adalah sebuah sistem yang dibangun dengan konsep rekayasa web (web engineering) dan diaplikasikan secara online melalui media internet. • Web engineering adalah suatu proses yang digunakan untuk menciptakan suatu sistem aplikasi berbasis web dengan menggunakan ilmu rekayasa, prinsip-prinsip manajemen dan pendekatan sistematis sehingga dapat diperoleh sistem dan aplikasi web dengan kualitas tinggi. Tujuannya untuk mengendalikan pengembangan, meminimalisasi resiko dan meningkatkan kualitas sistem berbasis web (kmrg.itb.ac.id, 2005). Pemrograman Web [email protected]


7

Aplikasi Berbasis Web • Ada banyak aplikasi berbasis web yang tersedia saat ini, antara lain: Chatting, sistem informasi, email, milis, forum, penjualan online, dll. • Keunggulan aplikasi berbasis web ini antara lain:

– Platform Independent, artinya aplikasi ini dapat dijalankan dari sistem operasi windows, linux, BSD, Mac. – Tidak memerlukan instalasi software untuk menjalankan aplikasi di setiap komputer. Untuk komputer lain yang ingin menjalankan program ini cukup buka browsernya dan membuka alamat host server dimana program ini disimpan. – Aplikasi ini dapat dijalankan dari jarak jauh dengan menggunakan internet. Pemrograman Web [email protected]


8

Aplikasi Berbasis Web • Berarsitektur client-server

– software web browser di sisi client – software web server di sisi server

• Menggunakan protokol HTTP dalam komunikasi antara client dan server • Mempunyai fungsi untuk mengambil/ menjalankan isi file dokumen web di server dan menampilkannya di sisi client



9

Aplikasi Berbasis Web Keunggulan • Dapat diakses kapan pun dan dari mana pun selama ada internet • Dapat diakses hanya dengan menggunakan web browser (umumnya sudah tersedia di PC, PDA, dan handphone terbaru), • tidak perlu menginstall aplikasi client khusus


Kekurangan • Antarmuka yang dapat dibuat terbatas sesuai spesifikasi standar untuk membuat dokumen web • keterbatasan kemampuan web browser untuk menampilkannya • Terbatasnya kecepatan internet mungkin membuat respon aplikasi menjadi lambat


10

Web Statis vs. Web Dinamis Web Statis

Web Dinamis

• Sebagian besar halaman web statis • Isi (teks / link / gambar) yang sama setiap kali diakses HyperText Markup Language (HTML) digunakan untuk menentukan teks / format gambar • contoh: dokumen online, kebanyakan homepage Pemrograman Web [email protected]

• Sebagai Web dinamis mengarah ke layanan online/ e-commerce • halaman Webnya juga harus menyediakan konten dinamis • halaman harus update, berubahubah (misalnya: berputar banner, artikel ganti) • harus mampu bereaksi terhadap tindakan info pengguna, permintaan dan proses, pemesanan jasa, dll • Contoh: www.amazon.com, www.thehungersite.com


11



12

Model Pemrograman Web Klien (PC)

Web Server

Request (URL)

Web Browser Pemrograman Web [email protected]

Response (Content)


HTTP Server

Content

13

Yang perlu diingat • Komunikasi antara web browser dan web server berdasarkan protokol HTTP. • Dokumen dan semua sumber daya apapun di jaringan yang dikehendaki diidentifikasi dengan Universal Resource Locator (URL) bagian dari URI • Dokumen web ditulis berdasarkan standar HTML. • Pemrograman sisi klien (client-side scripting) • Pemrograman sisi server (server-side scripting/ programming).



14

Client-Side Scripting • Pemrograman sisi klien • Bahasa pemrograman yang digunakan untuk mengaplikasikannya tidak memerlukan web server • bahasa pemrograman yang berjalan di sisi client. • Cukup menggunakan web browser • Contoh: – – – –

HTML, Javascript, Java Applet, Flash. Pemrograman Web [email protected]


15

server-side scripting • Pemrograman web sisi server • Bahasa pemrograman untuk mengaplikasikannya memerlukan web server, atau bahasa pemrograman yang berjalan di sisi server. • Contoh : – ASP, memerlukan web server IIS. – PHP, memerlukan web server Apache.



16

Client Side vs. Server Side Client Side Programming • Dapat men-download program dengan halaman Web di browser • Dijalankan pada mesin klien sederhana, generik, tapi tidak aman • Menggunakan bahasa standar HTML • Untuk penggunaan di localhost tidak memerlukan webserver, cukup aplikasi editor teks dan brwoser Pemrograman Web [email protected]

Server Side Programming • Dapat menyimpan dan menjalankan program pada server web, link dari halaman Web • Lebih kompleks, membutuhkan hak akses server, tetapi aman • Di localhost memerlukan webserver lokal (mis. Vertrigo, WAMP, dll) di samping aplikasi editor dan browser


17

Client Side vs. Server Side Client Side Programming •

Server Side Programming

Diperkaya dengan bahasa skrip JavaScript

•

– Program dapat ditulis agar sesuai dengan Common Gateway Interface – Bila halaman Web menyampaikan, data dari halaman tersebut dikirim sebagai masukan untuk program CGI – Mengeksekusi program CGI di server, mengirimkan hasilnya kembali ke browser sebagai halaman web Baik jika perhitungan besar / kompleks atau membutuhkan akses ke data pribadi

– bahasa scripting untuk halaman web, yang dikembangkan oleh Netscape pada 1995 – menggunakan sintaks mirip C + +/ Java, begitu akrab untuk programmer, tetapi sederhana – baik untuk menambahkan fitur yang dinamis untuk halaman Web, pengendalian bentuk dan GUI

•

Diperkaya dengan programming Java applet – dapat mendefinisikan hal-hal kecil, program dg tujuan khusus di java disebut applet – memberikan kekuatan ekspresif penuh – baik untuk tugas-tugas yang lebih kompleks atau tugas data berat, seperti grafik, dll


Menggunakan pemrograman CGI

•

Menggunakan pemrograman: Active Server Pages (ASP), Servlets Java, PHP, dll: – Vendor-spesifik alternatif pengganti CGI – Menyediakan banyak kemampuan yang sama tetapi menggunakan tag mirip HTML


18



19

Browser • Merupakan sebuah software yang digunakan untuk mengakses/menampilkan halaman web. • Berkomunikasi dengan server web melalui protokol HTTP • Mekanisme kerja pengaksesan dokumen web yang berbasis HTML adalah sebagai berikut : – Browser meminta sebuah halaman web ke suatu situs web melalui protokol HTTP – Permintaan diterima oleh server – Web server mengirimkan dokumen HTML yang diminta ke client – Browser client menampilkan dokumen yang diterima berdasarkan kode yang terdapat pada dokumen HTML Pemrograman Web [email protected]


20

Browser • Mozilla Firefox



21

Browser Internet Explorer


Opera


22

Browser Netscape Navigator


Chrome


23

Pengolah Grafis photoshop


Mcromedia Firework


24

Pengolah Animasi/multimedia Macromedia Flash


SwishMax


25

Web Editor Notepad++


Dreamweaver


26

Bahasa Pemrograman Web Client Side • • • • •

HTML CSS JavaScript JavaApplet ActiveX Control


Server Side • Platform Windows – ASP (bahasa pemrograman) – Ms. Access / SQL Server (database)

• Platform Linux – PHP (bahasa pemrograman) – MySQL / PosgreeSQL (database)


27



28

Desainer Web • Bertanggung jawab kepada tampilan visual sebuah situs web, meliputi tipografi, grafis, animasi, tata letak, warna dan lain-lain • Kemampuan utama : seni, desain grafis, imajenasi dan kreasi. • Software yang harus dikuasai : Pengolah grafis (Adobe Photoshop, CorelDraw, dll), pengolah animasi (Macromedia Flash, Swish, dll), pengolah multimedia (CoolEdit Pro, Xara3D, dll) Pemrograman Web [email protected]


29

Master Web • Bertanggung jawab atas kelancaran dan jalannya sebuah situs web. • Kemampuan yang harus dimiliki meliputi desain, pemrograman, dan maintenance sebuah situs web. • Tidak mencampuri profesi yang ada, hanya memberi arahan kepada desainer maupun programmer mengenai apa yang harus dilakukan dalam membangun situs Pemrograman Web [email protected]


30

Programmer Web • Bertanggung jawab membuat halaman web interaktif dan dinamis dengan sebuah bahasa scripting menyangkut dengan transaksi, input output data dan database. • Kemampuan yang harus dimiliki : – HTML – Pemrograman Server (misalnya : PHP & MySQL) – Pemrograman Client (Seperti : CSS, JavaScript/ JavaApplet) Pemrograman Web [email protected]


31

Web Administrator • memaintenance suatu server agar situs yang dikelola senantiasa online. • Kemampuan yg harus dimiliki : – Menguasai sistem operasi server (Windows NT/Server, Linux, dll) – Jaringan Komputer (LAN, Intranet, dll) – Keamanan komputer dan internet



32



33

Jenis Web • Katalog – Menampilkan daftar produk yang dijual oleh suatu perusahaan yang biasanya memiliki produk dalam jumlah yang besar. – Harus mempertimbangkan update katalog dengan mudah, efisien dan continue.

• E-Commerce – Suatu kumpulan yang dinamis antara teknolgi, aplikasi dan proses bisnis yang menghubungkan perusahaan, konsumen dan komunitas tertentu melalui transaksi elektronik. – Secara umum transaksi yang dilakukan : find it (mencari produk), explore it (mempelajari produk), select it (memilih produk), buy it (membeli produk), ship it (pengiriman barang).



34

Jenis Web • E-Learning – Media pengajaran dan pembelajaran yang menggunakan rangkaian elektronik (LAN, WAN atau Internet) untuk menyampaikan isi pembelajaran, interaksi atau bimbingan. – Tiga hal yang wajib dipenuhi : • sederhana (memudahkan peserta didik dalam memanfaatkan teknologi) • personal (guru dapat berinteraksi dengan peserta didik layaknya pembelajaran konvensional) • cepat (mengatasi rasa jenuh dan bosan).



35

Jenis Web • Komunitas – Memungkinkan pengunjung berkomunikasi secara bersamaan. – Contoh : friendster, blog, facebook, dll

• Portal – Aplikasi berbasis web yang menyediakan akses suatu titik tunggal dari informasi online terdistribusi, seperti dokumen yang didapat dari pencarian, kanal berita dan link ke situs tertentu – Contoh : portal sekolah, portal kampus, portal dakwah, dll.

• Personal – Bertujuan untuk mempromosikan tentang seseorang. – Biasanya berisi : biodata, portofolio (kumpulan hasil karya), prestasi atau kegiatan sehari-hari Pemrograman Web [email protected]


36

Fungsi Web • Fungsi Komunikasi – Berupa web dinamis karena melibatkan server dan pengelolaan data sehingga memungkinkan terjadinya interaksi dengan user – Fungsi-fungsi komunikasi : webmail, form contact, chatting, forum, dll

• Fungsi Informasi – Lebih ditekankan pada kualitas bagian konten karena tujuannya adalah menyampaikan informasi. – Berisi teks dan grafik yang mudah didownload. – Fungsi informasi : news, profile company, library, reference, dll. Pemrograman Web [email protected]


37

Fungsi Web • Fungsi Entertainment/Hiburan – Menekankan pada penggunaan animasi gambar dan elemen bergerak. – Fungsi hiburan : game online, film online, musik online, dll.

• Fungsi Transaksi – Sebagai sarana transaksi bisnis baik barang, jasa atau lainnya. – Menguhubungkan perusahaan, konsumen dan komunitas tertentu. – Pembayaran dapat menggunakan kartu kredit, transfer, paypal, dll. Pemrograman Web [email protected]


38

Fungsi Web • Fungsi ekonomi – Alat Pemasaran • Bertujuan mempromosikan dan memasarkan produk atau jasa layanan suatu perusahaan. • Dapat juga berupa company profile

– Nilai Tambah • Nilai tambah dari sekedar promosi atau pemasaran secara online • misalnya : trend perusahaan modern, branding image, dll.



39

Referensi • http://www.w3.org/History.html • http://en.wikipedia.org/wiki/History_of_the_World_Wide_Web

• http://thinkexist.com/quotes/tim_berners-lee/2.html • http://www.hitmill.com/internet/web_history.html • Jack Febrian, Menggunakan Internet, Penerbit Informatika, 2008 • Anastasia Diana & Fandy Tjiptono, E-Business, Penerbit Andi, 2007 • Happy Chandraleka, Cara Mudah Mengelola Email untuk Pemula, Mediakita, 2008. Pemrograman Web [email protected]


40

Materi minggu depan: HTML Dasar

Pengantar HTML Sejarah HTML dan XHTML Elemen HTML Sintaks HTML Tag dan property HTML



41

Pertemuan II. Ali Tarmuji, S.T., M.Cs. Pemrograman Web. Teknik Informatika Fakultas Teknologi Industri

Recommend Documents