Kontrak Kuliah

Desain Web
 Aturan Perkuliahan
• Mahasiswa Minimal Hadir 80% dari jumlah
pertemuan. Jika kehadiran < 80% maka
Mahasiswa TIDAK BOLEH ikut UAS
– (Kecuali sesuatu alasan yg bisa diterima oleh
Dosen Pengampu dan disetujui oleh
Pembimbing Akademik)
• UTS dan UAS susulan hanya dapat diberikan bila
telah disetujui oleh Jurusan)
• Keaktifan mahasiswa akan diperhitungkan sebagai
nilai tambahan
PELAKSANAAN PRAKTIKUM

• Satu mahasiswa Satu komputer, dan satu

laporan.
• Praktikan (tiap Mahasiswa) hanya dapat
mengikuti praktek jika sudah mengumpulkan
laporan terdahulu.
• Praktikan harus hadir 15 menit sebelum
praktikum dimulai
• Wajib memakai baju praktek / almamater
 Aturan Perkuliahan
Praktikum TIDAK diperkenankan:
Membuat gaduh
Memakai kaos oblong/ singlet
Mengganggu jalannya praktikum
Membawa makanan minuman.
Mengotori Laboratorium
 Aturan Perkuliahan
• Pembuatan laporan dilakukan dalam 2 tahap
• Laporan praktikum hasil percobaan
Berisi hasil percobaan setelah praktek yang
dituliskan pada lembar kerja praktikum. Di
Upload ke web.
• Laporan akhir (individu)
Berisi laporan akhir yang merupakan kelanjutan
dari laporan pendahuluan tiap praktek.
Dikumpulkan 1 (satu) minggu setelah praktikum.
PELAKSANAAN PRAKTIKUM
Praktikan harus tahu dan menjaga diri akan
bahaya listrik seperti tersengat listrik dan
hubungan arus pendek.
Bersihkan tempat praktek, kembalikan ketempat
seharusnya bila telah selesai praktek.
 TUGAS
• TIDAK ADA kuis susulan bagi Mahasiswa yang tidak
mengikuti kuis pada waktu pertemuan kuliah
• Tugas dikumpulkan sesuai waktu yang ditentukan.Jika
mengumpulkan terlambat, nilai dikurangi 10% dari
nilai seharusnya,per hari
• Tidak mentolerir kecurangan seperti plagiarism, copas
dari web, nilai akan direduksi sesuai kebijakan dosen
• Tugas dikerjakan sesuai dengan format yang ditentukan
oleh dosen
 Kriteria Penilaian
– Attitude Anda akan
mempengaruhi presentase
nilai

Teori
TeoriWEB
WEB
Presensi
Presensi ::10%
10%
•• Tugas
Tugas ::20%
20% Praktek Web
•• UTS
UTSOnline
Online ::30%
30%
•• UAS/Presentasi
UAS/Presentasi ::40%
40% • Presensi : 10%
• Tugas : 10%
• Praktek : 30%
• Project : 50%
 Ujian Teori UTS dan UAS
• Ujian akan di laksanakan Online dengan tipe soal
Multiple choice
• Hasil Ujian dapat langsung di ketahui langsung
setelah peserta ujian menyelesaikan ujian
 Ujian Praktek berupa
Presentasi Project Akhir
• Tiap Mahasiswa akan mendapatkan 1 judul
Project Sistem Informasi yang akan di
kembangkan selama perkuliahan
• PA ini berupa Makalah dan file presentasi yang
akan di presentasikan di pertemuan ke 15 dan 16
 Outlines Desain Web

 Internet dan Wide Web  Bootstrap 4 framework

 UI prototyping  Framework Codeigniter
 Tools  jQuery
 HTML + HTML5  jQuery plugins

 CSS + CSS3  Responsive web design

 JavaScript  Dasar PHP dan MySQL
 Grid layout  Project Akhir

 AJAX  Publishing / Web Hosting

Internet vs Web
 Evolusi Web
Web saat ini adalah dunia laman dan aplikasi web yang saling tertaut dan terus
tumbuh, penuh dengan video, foto, dan konten interaktif. Yang tidak dilihat oleh
pengguna pada umumnya adalah pengaruh teknologi web dan browser yang membuat
semua ini dapat terjadi.
Dari waktu ke waktu, teknologi web telah berkembang untuk memberikan
kemampuan kepada pengembang web untuk menciptakan generasi pengalaman web
baru yang lebih mendalam dan bermanfaat. Web yang ada saat ini adalah hasil usaha
yang berkelanjutan dari komunitas web terbuka yang membantu mendefinisikan
teknologi web ini, seperti HTML5, CSS3, dan WebGL dan memastikan bahwa semua itu
didukung di seluruh browser web.
Pita warna dalam visualisasi ini menunjukkan interaksi antara teknologi web dan
browser, yang membuat banyak aplikasi web hebat yang kita gunakan setiap hari
menjadi kenyataan.

http://www.evolutionoftheweb.com/?hl=id
 Internet

 Internet adalah jaringan komputer sedunia

 Internet

 Tujuan internet:
berbagi informasi
 Internet

 Ada berbagai “jalur” berbagi informasi via internet:

email, FTP, HTTP

 “Jalur” tersebut disebut juga dengan protokol

 Web

 Disebut juga dengan world

wide web (www)
 Adalah istilah untuk informasi
yang saling terkoneksi
 Koneksi tersebut dibentuk
dengan hypertext links 
Contoh: google, blog, dll
 World-Wide Web

 Jaringan informasi yang sangat

besar
 Internet vs Web

 Internet adalah jejaring komputer

 Web adalah jejaring informasi/halaman

Internet

Web
 HTTP vs HTML

 HyperText Transfer  HyperText Markup

Protocol Language
Protokol untuk  Struktur yang menyusun
mengirimkan konten halaman web
halaman web  Berjalan di atas HTTP
 Konten berupa HTML, CSS,
image, dll
 Web Server

 Komputer yang melayani (serve) informasi di internet

 Bekerja berdasarkan request

 Mengirimkan informasi/konten berdasarkan request

tersebut
 Bekerja di protokol HTTP
 Sering juga disebut dengan HTTP server
Web Server
 Web Server Softwares

 Software yang berjalan di web server

 Melayani request dari browser
 Apache
 Microsoft Internet Information Services (IIS)
 Nginx (dibaca “engine-x”)
 IP Address

 Internet protocol address

 Digunakan oleh komputer di jaringan/internet untuk
berkomunikasi
 Format: x.x.x.x
 Contoh: IP address website kompas.com adalah
202.146.4.100
 Namun sulit untuk mengingat IP address
 Solusi: domain name system
 Domain Name System

 Memetakan domain name ke IP address 

Lebih mudah mengingat domain name 
Ditangani oleh domain name server
 Contoh: saat membuka facebook.com
1. Komputer kita menghubungi DNS, meminta IP address server
facebook.com
2. DNS membalas dengan IP address facebook.com (misal
173.252.110.27)
3. Komputer kita menghubungi 173.252.110.27
Domain Name System
 URL
 Uniform Resource Locator

 Alamat yang menunjuk sebuah resource

 Resource dapat berupa halaman web, dokumen, image, mp3, video,

apapun
 Contoh:

 http://portal.poliban.ac.id/
URL
Web Design
 Desain

 Desain seringkali diartikan sebagai

tampilan
 Pada desain web, yang lebih dulu
ditentukan adalah tujuan web tersebut
 Baru tentukan desain (layout, font,
background, dll)
 Ada dua bagian dalam desain web: UI
dan UX
 UI vs UX

 User interface (UI) adalah desain suatu

interface secara visual
 Contoh: tombol, link, menu, dll
 User experience (UX) adalah “rasa” yang
didapat oleh user saat menggunakan suatu
interface
 Berhubungan dengan skenario/alur
proses
 Contoh: proses registrasi
 Wireframe Diagram

 Menampilkan struktur halaman web

menggunakan outline setiap obyek
interface
 Menggambarkan pembagian layar dan
letak setiap obyek
 Site Diagram

 Menggambarkan struktur situs web

secara keseluruhan dan
bagaimana halaman web saling
terhubung
 Frontend vs Backend

 Frontend berkaitan dengan  Backend berkaitan dengan

desain visual pemrosesan data, form, dsb
 Desain grafis  Scripting (PHP, JSP, Ruby, dll)
 HTML  Database (MySQL, Oracle DB,
MongoDB, dll)
 CSS
 JavaScript
 What Languages Do We Need to Learn?

 HyperText Markup Language (HTML)

 Cascading Style Sheet (CSS)
 JavaScript
 HTML

 HyperText Markup Language

 Bahasa untuk membuat halaman web
 Bukan bahasa pemrograman
 Menggunakan tag

 Versi terbaru: HTML5

HTML
 CSS

 Cascading Style Sheet

 Digunakan untuk memberikan
tampilan/style pada halaman web (font,
warna, background, dll)
 Versi terbaru: CSS3
CSS
 JavaScript

 Bahasa pemrograman untuk menambah interaktivitas pada

halaman web
 Contoh:
 Form validation
 Widget

 Animasi
 Menu

 Beda dengan Java

 Tools

 Notepad ++
 Sublime Text
 Xampp

 Web browser (of course)

Instalasi Xammp
Sublime Text
Thank you.