Dasar Pemrograman Web 2 Pemrograman Web Adam Hendra Brata
Teknologi Client Server Konsep Dasar Desain Web
Teknologi Client Server
Arsitektur Client Server Model komunikasi yang terdiri server sebagai pemberi layanan dan client sebagai pengguna layanan
Web Server Web server adalah server yang bertugas sebagai penyedia dokumen yang diminta web browser. Web server harus mampu melayani permintaan dokumen yang diminta web browser, dan mampu disetting berinteraksi dengan program JSP, ASP, PHP, secara CGI dan sebagainya. Contoh : Apache (PHP), IIS (ASP), Tomcat (JSP)
Web Browser Web Browser adalah perangkat lunak yang mulanya hanya untuk menampilkan (rendering) dokumen web/. Namun saat ini, web browser harus mampu mengeksekusi (interpretasi) JavaScript atau VBScript, menjalankan Java Applet, memahami dokumen XML, dan menjalankan dokumen tertentu dengan fasilitas plug-in. Contoh : Internet Explorer, Mozilla Firefox, Google Chrome.
Pemrograman Bahasa pemrograman web yang untuk mengaplikasikannya tidak memerlukan web server, atau bahasa pemrograman yang berjalan di sisi client. Contoh : JavaScript
Pemrograman Bahasa pemrograman web yang untuk mengaplikasikannya memerlukan web server, atau bahasa pemrograman yang berjalan di sisi server. Contoh : ASP, memerlukan web server IIS. PHP, memerlukan web server Apache. JSP, memerlukan web server Tomcat
(HyperText Markup Language) Bahasa standar yang digunakan untuk menampilkan document web. Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audio, video dan juga java applet dalam document.
HyperText Markup Language Bahasa umum untuk web Ditransmisikan lewat Hyper Text Transfer Protocol Client mengirim string request (dengan parameter) Server mengembalikan document yang diminta Mendeksripsikan konten dokumen dan strukturnya Format terstruktur Konten dan struktur pada dokumen yang sama Browser dan formatter bertanggung jawab dalam proses rendering Dokumen yang formatnya salah dapat ditampilkan secara parsial Beda browser bisa berbeda hasil penampilan
Tag Kalau pada bahasa pemrograman kita mengenal keyword code, maka pada kita mengenal yang namanya tag. Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain. Tag html tidak bersifat case sensitive <body> sama dengan <BODY> Bentuk umum penulisan tag html adalah: <ELEMENT ATTRIBUTE = value> Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut Contoh: <BODY BGCOLOR=lavender>
Contoh Tag <html> Penanda Dokumen <head> Header <title> Judul dokumen <body> Isi dokumen <h1> Judul paragraf <p> Paragraf <b> <i> <u> <sup> <sub> Atribut <br> Ganti baris < font> Font <li> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan) <table> Tabel <!----> Komentar
Struktur Homepage Kepala <head> <Head> </Head> <Title> </Title> Judul Homepage Tubuh <body> <Body> </Body> Isi Teks Isi Tabel. Isi Audio, Video, dll.
<html> <head> </head> <body> </body> </html> <title>halaman Latihan</title> <h1>ini adalah latihan pemrograman web pertamaku </h1>
Layout dalam Desain Web Layout menjadi hal utama dalam desain web, karena tata letak yang tepat dari sebuah website menentukan keberhasilan dari tujuan web tersebut. Layout secara umum dibagi menjadi : Frame layout Table Layout Layout
Frame Layout Frame layout dibentuk dengan menggunakan beberapa halaman web terpisah yang disatukan dengan menggunakan frame Ciri utamanya dalam script webnya ditemukan tag <frameset></frameset>
Frame Layout Teknik frame layout adalah teknik yang sangat jadul Kelebihan frame layout adalah pada kesederhanaannya dan bisa menjaga elemen website tidak terkena scroll Frame layout memiliki kekurangan : 1. Frame merusak penyatuan dari sebuah Web 2. Frame menyebabkan permasalahan kepada robot search engine 3. Frame membuat URL berhenti bekerja 4. Frame mempersulit Bookmarking dan dalam pencetakan 5. Frame mempersulit aksesibilitas 6. Frame secara teknis memperumit kompleksitas Web
Table Layout Table layout dibentuk dengan menggunakan elemen table dalam yang disusun sedemikan rupa sehingga menjadi sebuah layout web Ciri utamanya dalam script webnya ditemukan penggunaan tag <table> </table> dan banyak sekali kombinasi pemakaian tag <tr></tr> dan <td></td>
Table Layout Teknik table layout adalah teknik yang yang populer di era pertengahan perkembangan web (2000-an) Kelebihan table layout adalah : 1. Sangat mudah dipahami dan dimaintain karena sistematis 2. Relatif mudah jika ingin mengubah yg bersifat parsial 3. Tingkat presisi posisi elemen lebih tinggi Table layout memiliki kekurangan : 1. Ukuran file menjadi besar 2. Terkadang tampilan rusak jika browser yang dipakai tidak support 3. Tidak cocok untuk digunakan pada web yang memiliki layout bersifat dinamis
Layout layout dibentuk dengan menggunakan elemen yang mengkombinasikan tag dan style dalam Ciri utamanya dalam script webnya ditemukan banyak penggunaan tag <div></div>
Interaksi Manusia dan Komputer IMK didefinisikan sebagai disiplin ilmu yang berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh manusia dan studi tentang fenomena di sekitarnya. IMK pada prinsipnya membuat agar sistem dapat berdialog dengan penggunanya seramah mungkin. Faktor IMK yang menjadi fokus utama pada desain web adalah penggunaan warna, layout, penggunaan gambar dan penggunaan huruf.
Interaksi Manusia dan Komputer
Interaksi Manusia dan Komputer Warna Warna secara umum memiliki arti dan kesan yang berbeda-beda, bahkan di beberapa negara warna memiliki arti yang lebih spesifik Merah = panas, semangat, kuat, marah Merah di Cina dianggap sebagai warna keberuntungan namun warna merah di Afrika dianggap sebagai warna duka cita Layout Tata letak unsur-unsur website yang baik membuat pengguna merasa nyaman untuk memakai website, sehingga desain layout menjadi hal yang sangat penting sebelum melakukan pemrograman lebih lanjut
Interaksi Manusia dan Komputer Gambar Penggunaan gambar di web memberikan kesan memperjelas dan mempercantik tampilan Namun perlu diingat bahwa pemakaian gambar yang kurang tepat, juga dapat memberi nilai minus pada desain kita Penggunaan gambar harus disesuaikan dengan tema dan kebutuhan Huruf Penggunaan huruf yang baik menjadi kunci keberhasilan sebuah website Huruf harus bisa dibaca dengan jelas, sesuai kaidah umum dan sesuai dengan tema web
Cascading Style Sheet = Cascading Style Sheet Fungsi : mendefinisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu. Dalam pemakaian murni kita pasti menggunakan tag <font> dan tag lain untuk mengontrol bagaimana layout dari halaman anda. Hal ini mengikat presentasi halaman web dengan isinya, dan terasa menyulitkan dalam perancangan dan pengembangannya. adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur, digunakan untuk mempersingkat penulisan tag seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
Cascading Style Sheet Jika web memiliki sekian halaman yang memiliki format yang seragam, dan kemudian ingin merubah format dasarnya, tentu yang dilakukan adalah mengubah tiap halaman tersebut. Dengan Style Sheet dapat mengontrol seluruh layout dari site yang dibuat, dan jika ingin mengubah tampilan dari web site tersebut cukup dengan memodifikasi style sheet. Keuntungan menggunakan Memisahkan presentation sebuah dokumen dari content document itu sendiri. Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web Mempercepat proses rendering/pembacaan.
Cascading Style Sheet Terdapat 3 teknik dasar penggunaan : Inline Style Sheet Embedded Style Sheet Linked Style Sheet
Inline Style Sheet Mengetikkan langsung dalam tag html sebagai atribut
Embedded Style Sheet Menggunakan tag style di dalam tag head.
Linked Style Sheet Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css dan memanggil file css dalam html dengan tag link yang diletakkan dalam tag head.
Linked Style Sheet
Aturan Penulisan Selector Terdiri dari tag,class,id Declaration Mendeskripsikan property dan value Contoh H1 { Color : #0000FF } Keterangan : Selector : H1 Property : Color Value : #0000FF
Selector Secara umum ada 3 jenis selector dalam : Tag ID Class Class Diawal penulisan menggunakan tanda titik, pada ditambahkan class ID Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan dengan ID berbeda.
Class
ID
Layout Layout sangat populer digunakan dalam desain web Kelebihan Layout Update tampilan lebih mudah Beban bandwidth lebih kecil Modifikasi web template lebih mudah Lebih mudah digunakan pada mobile phone Seacrh engine friendly Kekurangan Layout Memerlukan ketelitian tinggi dalam menuliskan tag tag div terutama lay out yang kompleks Terkadang efek tampilan di tiap browser berbeda
Layout
Perhatian Perhatian Dikarenakan materi yang disampaikan pada presentasi kuliah ini hanya sebagai pengantar dasar saja, maka diharapkan membaca dan mencari referensi lain sebagai pengayaan pengetahuan tentang dasar dasar desain web. Cari dan baca artikel / tutorial dari internet atau buku tentang desain web. Explorasi kembali materi tentang desain web dan -.
Tugas 1 Tugas 1 Membuat website profil pribadi dengan kriteria : Minimum 5 halaman, terkoneksi dengan hyperlink Memuat data diri dilengkapi dengan foto dan gambar lain Menggunakan dan Layout boleh memakai table atau Jika bisa menggunakan layout, maka penilaian bisa lebih tinggi Menggunakan konsep desain bertema sesuai dengan profil masing masing Dilarang menggunakan template website, template dan sebagainya
Tugas 1 Tugas 1 Kirimkan tugas dalam bentuk zip atau rar yang dalamnya terdiri dari beberapa jenis file yang terkait dengan web yang dibuat Kumpulkan tugas melalui email ke alamat email adam@ub.ac.id mizuno.tatsuya.mx@gmail.com Deadline : Minggu, 1 Maret jam 00.00 (Sabtu Tengah Malam)
Terimakasih dan Semoga Bermanfaat ^^