Welcome to Spada Indonesia
Courses Images
Pemrograman Web
Universitas Telkom

Pemrograman Web

COURSE INSTRUCTOR

Teachers Images

WAWA WIKUSNA

Universitas Telkom
AREAS:
Program Studi Sistem Informasi

Course Description

Materi bahasan pada Mata Kuliah Pemrograman Web dibagi kedalam 3 Kajian utama, yang terdiri dari detil bahasan untuk semua kajian adalah sebagai berikut, Dasar Aplikasi web,Pengantar pemrograman Client-Server (1) Penggunaan HTML dan CSS, Design dan Layout (1) Form, Event Handler dan pembuatan function Javascript (1) Dasar PHP, Variable, sintaks dasar PHP (2) Looping dan Condition pada PHP, Contoh kasus pemrograman PHP (2) Dasar PHP dan MySQL, Koneksi Database (3) Manipulasi Database untuk melakukan CRUD (create, read, update,delete) data (3) Penggunaan Library PHP untuk pengolahan String dan Array (3) Perkuliahan akan dibagi kedalam 16 Pertemuan, dengan 3 Pertemuan sebagai Assessment tiap Kajian.

Course Syllabus

Nama / Kode Mata Kuliah : Pemrograman Web / MI2173 Program Studi : D3 Management Informatika, Fakultas Ilmu Terapan. Telkom University. Kredit : 3 sks Jumlah Pertemuan : 16 Pekan (include 3x Assessment) "Selamat Bergabung di Mata Kuliah Pemrograman Web ini, Anda akan dibekali berbagai pengetahuan tentang teknologi pembangunan Aplikasi Web." Deskripsi singkat : Mata kuliah ini bertujuan untuk memberikanpemahaman dan pengetahuan kepada mahasiswa mengenai pembuatan aplikasi berbasis web. Perkuliahan ini diselenggarakan dalam 16 pekan pertemuan, termasuk untuk pertemuan praktek dan praktikum. Standar Kompetensi : Setelah mengikuti mata kuliah ini, dengan gerakan terbimbing, mahasiswa dapat meniru contohpembangunan aplikasi CRUD (Create, Read, Update & Delete) menggunakana bahasa pemrogramanweb (PHP). Kajian pada mata kuliah Web Programming : Kajian 1 : Dasar aplikasi web dan penggunaan client side scripting seperti HTML, CSS dan Javascript. Kajian 2 : Dasar penggunaan bahasa pemrograman PHP. Kajian 3 : Pemrograman PHP dan Database (MySQL) Setiap akhir pelaksanaan kajian tersebut, akan dilakukan Assessment (atau ujian evaluasi) dalam bentuk praktek dan teori. Referensi : Sklar, David, and Adam Trachtenberg. PHP Cookbook. O'Reilly, 2008. [ link ] Welling, Luke. PHP and MySQL Web Development. Developers Library, 2012 [ link ] Yank, Kevin, and Cameron Adams. Simply Javascript. Sitepoint, 2010 [ link ] Manual PHP. 2014. [ http://php.net/docs.php ] [ http://php.net/download-docs.php ] Niederst, Jennifer. Learning Web Design (4th edition). O'Reilly. 2013. [ link ] Referensi Pendukung http://en.wikipedia.org/wiki/Web_development http://www.w3schools.com/ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 http://www.html5rocks.com/en/ http://www.codecademy.com/en/tracks/php Apa yang perlu Anda persiapkan untuk kuliah daring ini? Kuliah daring ini membutuhkan koneksi Internet yang baik ketika mengaksesnya. Beberapa materi perkuliahan dan penugasan dapat Anda unduh langsung untuk dipelajari secara berulang. Ada juga beberapa konten perkuliahan dalam bentuk video, animasi dan aplikasi yang harus Anda lakukan secara online. Berikut ini beberapa perangkat tambahan yang perlu dipersiapkan, Browser terbaru (chrome atau firefox) dengan plugin flash player dan video Tools pengembangan pemrograman web: Web Browser (chrome, firefox, opera atau safari) XAMPP : Apache, MySQL, PHP Text Editor : Notepad++, Sublime Text, atau Dreamweaver Ear phone atau Headset (optional dengan mic) Web Cam (optional untuk demo) Profile Tim Dosen Web Programming (MI2173) Toufan D Tambunan email: tambunan [at] tass [dot] telkomuniversity [dot] ac [dot] id link blog : http://tambunan.staff.telkomuniversity.ac.id/ Indra Lukmana Sardi email :indra.luk29 [at] gmail [dot] com link blog : - Wawa Wikusna email :wawa_wikusna[at]tass[dot]telkomuniversity[dot]ac[dot]id link blog : - Wardani Muhamad email : wardani.muhamad[at]tass[dot]telkomuniversity[dot]ac[dot]id link blog : - Selamat mengikuti perkuliahan ini. Semoga Sukses & Bermanfaat!
Course Modules
Announcements
Silabus dan SAP Pemrograman Web
Silabus & SAP Pemrograman Web
RPS Pemrograman Web
Aktifitas Tambahan Anda
Forum Diskusi Pemrograman Web
Glossary Pemrograman Web
Selamat Datang di Kuliah Pertama Web Programming ! Pada pertemuan kali ini kita akan membahas tentang pengetahuan dasar seputar Internet dan Pengembangan Aplikasi Web. Ikuti setiap petunjuk pembelajaran yang ada pada Pertemuan ini. Diharapkan setelah mengikuti pertemuan ini, mahasiswa memperoleh capaian sebagai berikut, Dapat menjelaskan memberikan contoh aplikasi web Dapat menjelaskan alur kerja dan pembangunan aplikasi web Dapat menjelaskan kelebihan dan kekurangan aplikasi web Pengantar Internet dan HTML Pembangunan Aplikasi berbasis web, sangat erat kaitannya dengan teknologi Internet. Anda harus memiliki pemahaman dasar tentang cara kerja Internet, untuk memahami dasar penggunaan Aplikasi web dan cara kerja dari aplikasi tersebut. Materi pengenalan Internet akan disampaikan pada video lecture note berikut ini, selamat menikmati. Youtube Bagaimana cara Web dan Browser Bekerja? Untuk menambah wawasan Anda mengenai cara kerja Aplikasi Web secara Online, silahkan untuk membaca referensi dari buku "Learning Web Design" pada Chapter 2 mengenai "How the Web Works" . (gambar diambil dari buku "Learning Web Design", Chapter 2) Pada perkuliahan pemrograman web, kita akan diberikan keterampilan untuk membuat halaman web menggunakan HTML, CSS dan Javascript. Kemudian melakukan pengolahan data yang akan disajikan menggunakan pemgrograman PHP dan MySQL. Dari penjelasan diatas, Anda dapat melihat bahwa peran Server pada pengunaan web menjadi sangat penting, termasuk pada saat melakukan pemrograman web nantinya. Istilah penting yang Perlu Anda ketahui? Pastikan Anda memahami cara kerja dari Internet dan bagaimana web bisa tersampaikan dari server sampai ke Browser. Berikut ini beberapa istilah penting yang berkaitan dengan cara kerja Internet dan pembangunan Web. Web Server (beserta contohnya) URL PHP HTML Web Browser (beserta contohnya) DNS Javascript Client HTTP Server wwww Hosting Database Server ( MySQL ) Web Portal type of web application Pemrograman Web sangat erat kaitannya dengan pemahaman client-server pada architecture web. Berikut ini ilustrasi sederhana. (gambar diambil dari http://www.lansa.com/products/web-development.htm ) Pada pembangunan Aplikasi web, Browser pada komputer penggunan web merupakan representasi dari Client. Sedangkan Server merupakan tempat web disimpan (hosting) pada alamat (URL) domain tertentu. Selain itu pada server tersebut juga terdapat layanan lain seperti Database dan lainnya. Kedua sistem tersebut (client-server) dihubungkan melalu jaringan Internet. Apakah ini kuliah daring pertama Anda? Dalam mengikuti kuliah Daring/Online sangat dibutuhkan keaktifan Anda sebagai mahasiswa. Semua materi yang tersedia telah disusun sacara komprehensif untuk mempermudah Anda mengikuti alur pembelajaran. Berikut beberapa Tips untuk perkuliahan Online Web Programming: Pastikan Anda membaca dengan baik dan mengikuti semua petunjuk yang diberikan pada setiap pertemuan Baca dan ikutin petunjuk pembelajaran secara berurutan, dari atas sampai ke bawah. Jangan lakukan secara acak! Jika ada pembahasan yang kurang dimengerti, Anda bisa ulangi. Atau Anda bisa lanjut ke pembahasan berikutnya asalkan masih dalam 1 topik. Dan pada akhir topik tersebut, silahkan ulangi lagi materi pembahasan yang belum dimengerti tadi Belajar "mencontek" code dengan baik. Ya! Anda harus mencontek dikuliah Web Programming ini! itu sangat dianjurkan. Perhatikan dengan baik penggunaan HTML, CSS, Javascript, PHP dan MySQL Manfaatkan Forum dan Chat untuk Anda bertanya masalah dan memberikan sharing untuk problem Solving. Percayalah, jika Anda melempar problem atau sharing tentang solusi problem, maka Anda akan 2x lebih paham dari sebelumnya Kerjakan Tugas dengan baik, dan kumpulkan tepat waktu (seburuk apapun hasilnya) Selamat Belajar Semoga Sukses dan Bermanfaat!
Course Modules
Trivia Quiz 1: Web Application
Diskusi Trend Internet & Aplikasi Web
Tugas Topik 1
Rangkuman Materi Topik #1
Berjumpa lagi pada Pertemuan kedua Web Programming! Pada Perkuliahan pekan ini, kita akan mempelajari dasar-dasar penggunaan HTML5 dan CSS3. Kedua scripting itu kita akan gunakan untuk membuat design layout dari tampilan web. Gunakan Editor Anda, dan ikuti langkah-langkah pembelajaran yang disampaikan berikut ini. Diharapkan setelah mengikuti pertemuan ini, mahasiswa memperoleh capaian sebagai berikut, dapat memberikan contoh penerapan HTML dan CSS pada pembuatan layout dan design web memahami syntax dasar HTML dan CSS dan mampu menuliskannya dengan baik Pengenalan HTML5 dan CSS3 HTML merupakan bahasa untuk scripting (tanpa perlu proses compiling) menerjemahkan hypertext kedalam bentuk tampilan layout web. Sedangkan untuk CSS , digunakan pada pembuatan design tampilan web itu sendiri. (gambar diambil dari Sitepoint, http://www.sitepoint.com/simply-javascript-2/ ) Secara umum dikenal istilah Three Layer Web Development, First Layer, Content or Structure . Pada bagian ini digunakan HTML untuk mengatur layout dan mengisi konten dari halama web yang akan dibuat. Second Layer, Style or Presentation . Pada bagian ini scripting CSS digunakan untuk membuat tampilan design dari web, termasuk hal-hal yang berkaitan dengan attribut seperti jenis huruf, warna, ukuran, gambar, dan lainnya. Third Layer, Behavior . Pada bagian ini digunakan berbagai varian dari Javacript untuk membantu pemrosesan tampilan web. Misalnya dalam pembuatan animasi tampilan, validasi inputan form, proses navigasi, penggunaan Ajax, dan banyak lagi. Pemahaman mendasar tentang hal ini, bisa Anda dapatkan juga dengan membaca buku "Learning Web Design" Chapter 3 . Untuk lebih memahami penggunaan dasar HTML dan CSS, silahkan nikmati video lecture notes berikut ini. Youtube Tag Dasar HTML yang wajib Anda ketahui? Anda disarankan untuk mencoba seluruh Tag HTML5 yang ada, dan diharapkan bisa menghapalkan sebagian besar dari Tag tersebut. Selain itu disetiap Tag terdapat juga berbagai attribute/properties yang perlu Anda coba dan pahami cara penggunaannya. Berikut ini beberapa Tag dan Attribute penting yang perlu Anda coba, Tag : http://www.w3schools.com/tags/default.asp Attribute : http://www.w3schools.com/tags/ref_standardattributes.asp Tips : perhatikan dulu contoh penggunaan Tag atau Attribute pada link diatas, sehingga Anda memahami kegunaan dari syntax tersebut. Kemudia jika diperlukan Anda bisa membaca penjelasannya lebih lanjut. Dasar Penggunaan CSS? Berbeda halnya dengan HTML (untuk pembuatan layout), CSS digunakan untuk membuat design tampilan web. Beberapa hal yang bisa Anda lakukan dengan CSS adalah, Mengubah format tampilan seperti warna, bentuk, ukuran, gambar, dll Menambahkan animasi atau interaksi secara terbatas Untuk lebih memahami penggunaan CSS tersebut silahkan Anda nikmati video Tutorial berikut ini, Youtube Penjelasan lebih lanjut mengenai dasar penggunaan CSS bisa Anda lihat pada dokumen Slide CSS yang diberikan dibagian bawah. Referensi utama untuk Materi ini, Buku : "Learning Web Design 4th edition", Part II dan Part III Link : http://www.w3schools.com/html/default.asp Link : http://www.w3schools.com/css/default.asp
Course Modules
Materi Perkuliahan Topik 2
Referensi Tag HTML
Slide Materi CSS
Contoh penggunaan script HTML5
Contoh penggunaan script CSS3
Contoh Layout Web sederhana
Buku: Niederst, Jennifer. Learning Web Design (4th...
Tugas Topik 2
Tugas Layout & Design Web
Latihan Design Web HTML 5
Aktifitas Pendukung
Diskusi materi layout & design
Chat Layout & Design Web
Rangkuman Materi Topik #2
Selamat Datang di Perkuliahan ke-3 Pemrograman Web! Pada pertemuan ke-3 ini kita akan membahas layer terakhir dari client side scripting yaitu penggunaan Javascript. Materi ini membutuhkan pemahaman Anda terhadap penggunaan HTML dan CSS yang sudah dijelaskan sebelumnya. Setelah mengikuti perkuliahan ini, maka diharapkan mahasiswa memiliki capaian sebagai berikut, Dapat menerapkan penggunaan dasar Javascript Dapat menggunakan function dan variable pada Javascript Teknik Dasar Javascript? Penggunaan Javascript mirip dengan syntax Java, dan sama-sama berbasis Object Oriented Programming. Berikut ini contoh sederhana penggunaan Javascript pada dokumen HTML, Youtube Sama halnya dengan penggunaan algoritma untuk bahasa pemrograman tertenu, di Javascript juga berlaku beberapa pemahaman berikut yang mungkin Anda sudah tahu, Penggunaan Variable dan Type Data Conditional : If-Else atau Switch-Case Looping : For dan Whlie Javasript function
Course Modules
Materi Perkuliahan Topik 3
Materi Javascript (Basic)
Javascript Cheat Sheet
Contoh Sederhana Javascript
Contoh Variable Javascript
Condition & Looping pada Javascript
Contoh penggunaan DOM Javascript
Tugas Topik 3
Tugas Latihan Javascript
Aktifitas Pendukung
Diskusi Javascript
The Best Way to Learn JavaScript
Rangkuman Materi Topik #3
Selamat Datang dipertemuan ke-4 Pemrograman Web Setelah Anda memiliki dasar penggunaan HTML, CSS dan Javascript, maka kini saatnya kita mulai membahas implementasi dari berbagai jenis Client Side Scripting tersebut. Salah satu penggunaan yang cukup penting pada aplikasi web adalah ketika membuat input form, menggunakan HTML. Mahasiswa yang mengikuti pertemuan ini diharapkan memiliki capaian keterampilan sebagai berikut, Dapat membuat form input menggunakan HTML Dapat melakukan event handler untuk menggunakan function javascript Selamat mengikuti Perkuliahan, semoga Anda Sukses selalu!! Dasar Pembuatan Form dengan HTML Anda pasti sudah terbiasa mengunakan berbagai tag HTML, salah satunya adalah tag <form> . Penggunaan Form input ini akan disesuaikan dengan karakteristik data yang akan diolah pada aplikasi web itu sendiri. Cara kerja form input secara sederhana dijelaskan pada buku referensi "Learning Web Design", Chapter 9. Berikut ilustrasi gambar yang bisa ada pelajari tentang input data. (Gambar diambil dari buku "Learning Web Design, 4th edition", Chapter 9) Ilustrasi diatas menggambarkan proses yang dilakukan setelah form input diisi dengan data, kemudian tombol submit ditekan, dan data akan dikirim ke server. Setelah itu data akan diolah oleh server untuk proses berikutnya. Pemrosesan data pada pembangunan aplikasi web menjadi hal yang sangat penting. Hampir semua aktifitas web memerlukan pemrosesan data. Berikut beberapa kasus penggunaan form pada aplikasi web, Proses Login user pada Facebook Form pemesanan barang pada situs Lazada Input Komentar pada website berita detik.com Kirim artikel atau topik pada forum diskusi kaskus.co.id Upload foto di twitter atau path Apakah Anda bisa memberikan contoh lainnya dari penggunaan Form Input?? Berikut ini materi pembuka untuk penggunaan form, silahkan menikmati video lecture notes dibawah ini, https://www.youtube.com/watch?v=9RJ3GbbZXPY
Course Modules
Materi Perkuliahan Topik 4
Contoh Form Login
Tugas Topik 4
Tugas Latihan Form Input HTML
Aktifitas Pendukung
Diskusi Form Input HTML
Rangkuman Materi Topik #4
Selamat Datang perkuliahan pekanke-5 Pemrograman Web Setelah Anda memiliki dasar penggunaan HTML, CSS dan Javascript, maka kini saatnya kita mulai membahas implementasi dari berbagai jenis Client Side Scripting tersebut. Salah satu penggunaan yang cukup penting pada aplikasi web adalah ketika membuat input form, menggunakan HTML. Mahasiswa yang mengikuti pertemuan ini diharapkan memiliki capaian keterampilan sebagai berikut, Dapat membuat form input menggunakan HTML Dapat melakukan event handler untuk menggunakan function javascript Selamat mengikuti Perkuliahan, semoga Anda Sukses selalu!! Dasar Pembuatan Form dengan HTML Anda pasti sudah terbiasa mengunakan berbagai tag HTML, salah satunya adalah tag <form> . Penggunaan Form input ini akan disesuaikan dengan karakteristik data yang akan diolah pada aplikasi web itu sendiri.
Course Modules
test
Course Modules
Survey Pencapaian Kajian #1
Mari kita mulai Pekan ketujuh kuliah Web Programming ! Setelah Anda berhasil melalui Kajian pertama, maka pekan ini kita akan lanjut pada pembahasan seputar penggunaan bahasa pemrograman PHP. Ini adalah pertemuan pertama Anda pada meteri Kajian kedua. PHP digunakan seperti halnya bahasa pemrograman yang lain, yang membedakan hanya kemampuannya berjalan pada sisyem client-server. Diharapkan setelah mengikuti pertemuan ini, mahasiswa memperoleh capaian sebagai berikut, Dapat menjelaskaninstalasi web server Dapat menjelaskan pemrograman server side Dapat menjelaskan struktur pemrograman PHP Dasar Syntax PHP PHP memiliki banyak syntax yang memiliki fungsimasing-masing. Secara umum hampir mirip dengan bahasa pemrograman lain, hanya saja penulisannya yang berbeda. Untuk lebih lengkap dapat dilihat pada video berikut: https://www.youtube.com/watch?v=nzcPSOO_igY dalam menggunakan PHP, wajib diawali syntax "<?php " dan diakhiri dengan "?>". Perlu diperhatikan, dalam pembuatan nama variabel tidak diperkenankan diawalin dengan angka (contoh yg tidak dibenarkan: $4nda).
Course Modules
Materi Perkuliahan Topik 7
Contoh penggunaan PHP
Tugas Topik 7
Tugas Dasar PHP
Aktifitas Pendukung
Diskusi Dasar PHP
Berjumpa lagi pada pertemuan ke delapan. pada pertemuan ini kita akan berusaha memahami perulangan dan kondisi pada syntax PHP. Kondisi merupakan syarat yang harus dipenuhi jika ingin melakukan suatu perintah. Sedangkan perulangan merupakan instruksi program yang bertujuan untuk mengulang beberapa baris perintah. Dalam merancang perulangan, setidaknya harus mengetahui 3 komponen, yaitu, kondisi awal dari perulangan, perintah program yang akan diulang serta kondisi akhir dimana perulangan akan berhenti. untuk lebih jelas, dapat dilihat pada video berikut: https://www.youtube.com/watch?v=rUO84Kalgso Untuk lebih jelasnya, dapat mengikuti contoh latihan kode dibawah ini.
Course Modules
Materi Perkuliahan Topik 8
kode lopping dan condition
Tugas Topik 8
Aktifitas Pendukung
Diskusi Condition & Looping PHP
Bertemu Lagi di pertemuan ke Sembilan PHP juga mengakomodir kebutuhan pembuatan fungsi, yang dapat digunakan untuk sebuah fungsi tertentu. Function merupakan sekumpulan perintah yang sudah kita susun untuk membuat sebuah pola tertentu yang bisa kita panggil dan kita gunakan sewaktu-waktu jika diperlukan. untuk lebih jelasnya, dapat dilihat pada video berikut: https://www.youtube.com/watch?v=BpkjyJ2r9MU
Course Modules
Aktifitas Pendukung
Diskusi Function PHP dan session
test
Course Modules
Selamat Datang Kajian Ketiga Web Programming ! Anda sudah sampai pada Kajian ketiga dari mata kuliah Web Programming, dengan topik utama seputar penggunaan Pemrograman PHP dan MySQL. Pada kajian ini perlu dipastikan anda telah memahami konsep database sebelumnya. dalam pengelolaan database kita membutuhkan sebuah aplikasi server seperti XAMPP, yang akan kita gunakan sebagai server internal. untuk lebih lengkapnya, dapat anda lihat pada video berikut: https://www.youtube.com/watch?v=F75W7RmIhLk Secara default, servel lokal tidak menggunakan password sehingga dapat anda tuliskan dengan NULL atau string kosong " ", serta user default menggunakan nama root. Latihan yuk Agar lebih faham, Silahkan buat sebuah database perkuliahan, lalu create table mahasiswa dengan field nim, nama,ttl, dan alamat sebagai latihan menuju pelajaran berikutnya !!! Lalu buatlah koneksi ke database dengan mengikuti kode berikut.
Course Modules
Latihan Koneksi
Berjumpa lagi pada pertemuan ke Dua Belas pada pertemuan ini kita akan mempelajari mengenai insert ke database dan view menggunakan PHP, untuk lebih lengkapnya dapat anda lihat pada video berikut. https://www.youtube.com/watch?v=81UBDtK_P04 Bagaimana sudah faham? Bisa? Agar lebih faham.. silahkan ikuti latihan berikut, dimanakita akan membuat kode insert ke database PERKULIAHAN dan melihat data dari database perkuliahan.
Course Modules
Form inputan
view data
Berjumpa lagi pada Pertemuan ke Tiga Belas Pada pertemuan ini kita akan belajar mengenai cara melakukan update dan delete data ke database. untuk lebih jelas dapat dilihat pada video berikut. https://www.youtube.com/watch?v=HKiSLABnSGc Bagaimana? sudah jelas caranya? mari kita ulang pada latihan berikut. Kita akan melakukan delete dan update data pada sebuah table mahasiswa yang sebelumnya telah kita create, insert dan view. ikuti kode berikut.
Course Modules
kode melakukan hapus(delete) data
mengupdate data
Ini.. Pertemuan ke Empat Belas !!! pada pertemuan ini kita akan belajar mengenai library yang ada pada PHP. untuk lebih jelasnya silahkan liat video berikut. https://www.youtube.com/watch?v=gRP5remY7BU Ada yang ingin ditanyakan? mari kita berdiskusi..
Course Modules
Diskusi Library PHP
test
Course Modules
test
Course Modules
Survey Pencapaian Kajian #3