DESAIN

WEBSITE DASAR

Oleh:
Zaidir, ST., [Link]
Deskripsi Matakuliah

• Mata kuliah ini membahas mengenai pemahaman

untuk melakukan analisis suatu permasalahan
yang berkaitan dengan logika yang
diimplementasikan ke dalam suatu bahasa
pemrograman.

• Mata kuliah ini berupaya meningkatkan kemampuan

mahasiswa mencari solusi suatu permasalahan
untuk dituangkan dan diimplementasikan ke dalam
suatu bahasa pemrograman. Materi yang dibahas
diantaranya teknologi internet dan teknologi web
serta pemrograman web termasuk di dalamnya,
yaitu HTML, CSS, PHP, dan database MySQL.
 Capaian Pembelajaran Lulusan (CPL)

1. Mahasiswa memiliki pengetahuan dan keterampilan

dalam pengelolaan sistem informasi dan komunikasi
sesuai kebutuhan profesi dan organisasi.
2. Mahasiswa mengetahui proses komunikasi berbasis
teknologi informasi dan komunikasi (TIK).
3. Mahasiswa mengetahui teknik mendesain web,
menghasilkan konten atau produk-produk media yang
memiliki nilai kreatifitas dan obyektif.
4. Mahasiswa mengetahui konsep pemrograman
berbasis web.
5. Mahasiswa mengetahui konsep integrasi basis data.
 Capaian Pembelajaran Matakuliah
(CPM)

1. Mahasiswa mampu mengembangkan sistem dengan cara melakukan

perencanaan, analisis, desain, penerapan, pengujian, dan
pemeliharaan sistem untuk menghasilkan solusi yang relevan, akurat,
dan tepat sesuai dengan kebutuhan pengguna.
2. Mahasiswa mampu menjelaskan konsep dasar dan komponen dalam
teknologi web.
3. Mahasiswa mampu merancang dan membangun suatu sistem dengan
menggunakan pemrograman prosedural untuk menyelesaikan
masalah.
4. Mahasiswa memiliki pengetahuan terhadap alat bantu, pre-processing,
pemrosesan dan post-processing terhadap data dengan melakukan
analisis, memodelkan masalah dan mengimplementasikan solusi yang
tepat terkait dengan pemrosesan data untuk menghasilkan sistem
yang efektif, efisien, aman, dan optimal.
 Referensi
1. Achmad Solichin, 2012, Pemrograman Web dengan PHP dan MySQL.
Penerbit Andi
2. Janner Simarmata. 2010. Rekayasa Web. Penerbit Andi.
3. Asep Herman S. 2009. Web Design theory & practice. Penerbit Andi.
4. Vitaly Friedman. 2011. Modern Web Design & Development.
Smashing.
5. Sven Lennartz. 2011. Mastering Photoshop for Web Design. Smasing.
6. Fuziah. 2014. Konsep Dasar Perancangan Web. Mitra Wacana Media.
7. Benedicta. 2014. Desain Web 3 in 1. Penerbit Andi.
8. Su Rahman. 2013. Web Designer Must Have Book. Mediakita.
9. Jason Beaird. 2016. The Principle og Beautiful Web Design. Penerbit
Andi
[Link], 2021, Desain Web Menggunakan HTML+CSS. Jogjakarta: Andi
Offset
Kontrak Kuliah

NILAI RANGE MUTU

A 85 – 100
A- 80 – 84,99
B+ 75 – 79,99
B 70 – 74,99
B- 65 – 69.99
• Tugas 40% C+ 60 – 64,99
• Nilai UTS 25% C 55 – 59,99
• Nilai UAS 35% D 40 – 54,99
E 0 – 39,99
 Rangkuman Materi
1 Pendahuluan

2 Konsep Dasar Web

3 HTML (HyperText Markup Language) Dasar

4 HTML (HyperText Markup Language) Lanjut

5 Cascading Style Sheet (CSS) Dasar

6 Cascading Style Sheet (CSS) Lanjut

7 PHP (Hypertext Preprocessor) Dasar

 Rangkuman Materi
8 PHP (Hypertext Preprocessor) Lanjut

9 JavaScrip Dasar

10 JavaScrip Lanjut

11 Server-Side-Programming

Integrasi-Client-Side-scripting-dan-Server-side-
12
scripting

13 Desain Web

14 Presentasi Final Project

 Pengantar

• Perancangan web (web design) adalah istilah umum yang

digunakan untuk mencakup bagaimana isi web konten
ditampilkan, (biasanya berupa hypertext atau hypermedia)
yang dikirimkan ke pengguna akhir melalui World Wide
Web, dengan menggunakan sebuah browser web atau
perangkat lunak berbasis web.

• Tujuan dari web design adalah untuk membuat website –

sekumpulan konten online termasuk dokumen
dan aplikasi yang berada pada server web / server. Sebuah
website dapat berupa sekumpulan teks, gambar, suara dan
konten lainnya, serta dapat bersifat interaktif ataupun statis.
 Pengantar lanjutan…

• Hypertext:
❖ Sebentuk dokumen elektronik,
❖ Sebuah pendekatan dalam manajemen informasi yang memanfaatkan
teknologi penyimpanan data di dalam sebuah jaringan yang mengandung
berbagai noktah dan kaitan.
❖ Paradigma antarmuka pengguna untuk menampilkan dokumen yang berisi
referensi-silang otomatis ke dokumen lainnya yang disebut pranala
(sebuah acuan ke dokumen yang lain atau sumber lain). Memilih pranala
menyebabkan komputer menampilkan dokumen yang terhubungkan dalam
waktu sangat singkat

• Hypermedia:
❖ Hypermedia adalah media yang tidak hanya memuat teks saja, namun
juga foto, audio dan video ataupun grafis komputer yang berhubungan
dengan topik tertentu
 Teknologi Internet

Pengertian Internet:
• INTERnational NETworking
Merupakan 2 komputer atau lebih yang saling
berhubungan membentuk jaringan komputer hingga
meliputi jutaan komputer di dunia (internasional), yang
saling berinteraksi dan bertukar informasi.

• INTERconnected NETworking
Sebuah sistem komunikasi global yang menghubungkan
komputer-komputer dan jaringan-jaringan komputer di
seluruh dunia.
 Teknologi Internet

Sejarah Internet:
• Departemen Pertahanan Amerika Defense Advanced
Research Projects Agency (DARPA) th 1969
membentuk suatu jaringan komputer yang
disebut ARPANET, untuk memungkinkan personil militer
dan peneliti sipil bertukar informasi yang berkaitan
dengan hal-hal militer.
• Melalui proyek ARPA (Advance Research Project
Agency) mereka mendemonstrasikan hardware dan
software komputer yang berbasis UNIX dapat
melakukan komunikasi dalam jarak tak terhingga melalui
saluran telepon
 Teknologi Internet

Sejarah Internet:
• Pada 1970, sudah lebih dari 10 komputer yang berhasil
dihubungkan satu sama lain sehingga mereka bisa saling
berkomunikasi dan membentuk sebuah jaringan.

• Tahun 1972, Roy Tomlinson berhasil menyempurnakan

program e-mail yang ia ciptakan setahun yang lalu untuk
ARPANET. Pada tahun yang sama, icon @ juga
diperkenalkan sebagai lambang penting yang menunjukkan
"at" atau "pada"
 Teknologi Internet

Sejarah Internet:
• Tahun 1973, jaringan komputer ARPANET mulai
dikembangkan ke luar Amerika Serikat. Komputer
University College di London merupakan komputer pertama
yang ada di luar Amerika yang menjadi anggota jaringan
Arpanet.
• Tahun 1977 sudah lebih dari 100 komputer yang
bergabung di ARPANET membentuk sebuah jaringan atau
network.
• Pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin,
menciptakan newsgroups pertama yang diberi nama
USENET
 Teknologi Internet

Sejarah Internet:
• Awal tahun 1980 jaringan ARPANET (karena sudah
diberhentikan) diubah menjadi TCP/IP (Transmission
Control Protocol/Internet Protocol). Dilanjutkan kembali dan
dibiayai oleh NSF (National Science Foundation) bekerja
sama dengan CSNET (Computer Science Networking)
berubah nama menjadi NSFNET.
• Tahun 1981 France Telecom menciptakan gebrakan
dengan meluncurkan telpon televisi pertama, dimana orang
bisa saling menelpon sambil berhubungan dengan video
link, sehingga komputer yg terhubung mencapai 231
komputer
 Teknologi Internet

Sejarah Internet:
• Pada tahun 1982 dibentuk Transmission Control Protocol
atau (TCP) dan Internet Protokol (IP).
• Di Eropa muncul jaringan komputer tandingan yang dikenal
dengan Eunet, yang menyediakan jasa jaringan komputer
di negara-negara Belanda, Inggris, Denmark dan Swedia.
• Tahun 1984 diperkenalkan sistem nama domain, yang kini
kita kenal dengan DNS atau Domain Name System.
 Teknologi Internet

Sejarah Internet:
• Tahun 1986 jaringan komputer bertambah menjadi 2.308
komputer
• Tahun 1990 adalah tahun yang paling bersejarah, ketika
Tim Berners Lee menemukan program editor dan
browser yang bisa menjelajah antara satu komputer
dengan komputer yang lainnya, yang membentuk jaringan
(www, atau World Wide Web).
• Pada tahun 1993 jaringan komputer sudah mampu
menghubungkan lebih dari 1,5 juta komputer
 Teknologi Internet

Infrastruktur Koneksi ke internet (Client-

server):
 Teknologi Internet

Infrastruktur Koneksi ke internet (Internet):

Teknologi Internet
Infrastruktur Koneksi ke internet
(Internet):

• Menggunakan protokol standar TCP/IP

• Akses: Internasional
• Koneksi ke Internet: Komputer + Modem +
Line Telepon + ISP
• Perlu Software untuk membaca data dari
Internet: misal Internet Explorer (browser),
Outlook Express (Email client)
• Ukuran transfer data: bandwith
 Istilah-istilah Internet

Istilah Keterangan
WWW World Wide Web merupakan suatu bentuk layanan
Internet yang menggunakan konsep hypertext antar
dokumen yang berkaitan, yang di dalamnya terdapat
halaman web (web page). Untuk mengakses www
digunakan protokol http (HyperText Transfer Protocol).
TCP/IP TCP/IP singkatan dari Transfer Control
Protocol/Internet Protocol merupakan jenis protocol
yang memungkinkan komputer berkomunikasi dengan
komputer lain melalui suatu jaringan yang di sebut
dengan internet.
URL URL (Uniform Resource Locator) digunakan sebagai
penunjuk lokasi pada internet. URL dapat dimisalkan
dengan alamat yang menunjuk pada suatu lokasi.
 Istilah-istilah Internet
Istilah Keterangan
Homepage Tampilan awal (halaman utama) suatu website yang
memuat informasi singkat tentang apa isi dari website
tersebut
Situs Suatu alamat di dalam sebuah web
Browser Software yang digunakan untuk surfing atau browsing
Internet, seperti Internet Explorer, Opera, Netscape dll
ISP Internet Service Provider, penyedia jasa layanan
Internet, seperti Indosatnet, Wasantara, Meganet dll
Download Menyalin/mengambil file atau objek dari Internet ke
komputer
Upload Mengirim file atau objek dari komputer ke Internet
E-mail Electronic Mail, suatu layanan/fasilitas yang
disediakan untuk saling berkirim surat lewat internet
 Istilah-istilah Internet

Istilah Keterangan
Search Engine Mesin pencari, suatu layanan/fasilitas untuk
melakukan pencarian di Internet
Mailing List Suatu forum/kelompok diskusi di Internet yang dapat
saling bertukar Informasi
Chat Suatu fasilitas internet yang bisa berkomunikasi
secara langsung (online) yang dapat mengobrol
dengan cara saling kirim text, suara, gambar bahkan
bisa bertatap muka seraca dengan menggunakan web
camera (webcam)
Blog Blog merupakan singkatan dari web log adalah bentuk
aplikasi web yang menyerupai tulisan-tulisan (yang
dimuat sebagai posting) pada sebuah halaman web
umum.
 Nama Domain
• Nama domain (domain name) adalah nama unik yang
diberikan untuk mengidentifikasi nama server komputer seperti
web server atau email server di jaringan komputer ataupun
internet.
• Nama domain berfungsi untuk mempermudah pengguna di
internet pada saat melakukan akses ke server, selain juga
dipakai untuk mengingat nama server yang dikunjungi tanpa
harus mengenal deretan angka yang rumit yang dikenal sebagai
alamat IP ([Link]).
• Nama domain ini juga dikenal sebagai sebuah kesatuan dari
sebuah situs web seperti contohnya "[Link]".
• Nama domain kadang-kadang disebut pula dengan istilah
URL, atau alamat website. Daftar nama-nama domain di bawah
ini;
 Nama Domain

Domain Peruntukan/Negara
Com Commerce, komersial
Net Networking, jaringan
Co Company, perusahaan
Org Organization, organisasi
Gov;go Government, pemerintah
Ac Academic, akademik
Edu Education, Pendidikan
Mil Military, muliter
Id Indonesia
Us Unites State, Amerika
Au Australia
 Nama Domain

Domain Peruntukan/Negara
My Malaysia
Sg Singapura
Ph Philipina
Cn China
In India
Jp Jepang
Bh Bahrain
Kr Korea Selatan
Ps Palestina
Vn Vietnam
Tl Timor Leste