Modul Web Fundamental2

Politeknik LP3I Bandung Kata Pengantar
Kata Pengantar
Puji syukur penyusun ucapkan kepada Allah SWT karena berkat bimbinan-Nya, modul
Web Fundamentals ini dapat terselesaikan. Modul Web Fundamentals dibuat dalam
rangka membantu mahasiswa Politeknik LP3I Bandung dalam menempuh praktikum
Web Fundamentals. Dengan modul ini diharapkan mahasiswa dan dosen pengampu
mata kuliah Web Fundamentals mempunyai pegangan dan petunjuk dalam praktikum
mata kuliah Web Fundamentals, sehingga diperoleh adanya keseragaman materi.
Modul ini memuat tentang dasar-dasar pembuatan web, yang terdiri dari Konsep
Dasar Web dan HTML, Cascade Style Sheet (CSS), Bootstrap, Javascript, library
Javascript, Content Management System (CMS) Wordpress, Hosting dan domain,
Modul ini disusun dengan secara ringkas, padat dan jelas, sehingga diharapkan
mahasiswa memahami materi-materi yang diberikan dalam mata kuliah Web
Fundamentals
Penyusun menyadari bahwa modul ini masih jauh dari kesempurnaan, maka dari itu
penyusun membuka kritik dan saran dari pembaca, agar modul ini dapat mendekati
dari kesempurnaan sesuai yang diharapkan, sehingga lebih memudahkan mahasiswa
Politeknik LP3I Bandung dalam mempelajari pembuatan dan pengembangan website
dengan baik
Akhir kata penyusun ucapkan terima kasih, semoga modul ini bermanfaat bagi kita
semua, Amin
Wassalam
Penyusun
Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

Politeknik LP3I Bandung Rencana Pembelajaran Studi (RPS)
POLITEKNIK LP3I
PROGRAM STUDI MANAJEMEN INFORMATIKA
RENCANA PEMBELAJARAN SEMESTER (RPS)

Nama Mata Kuliah Kode Mata Kuliah Bobot (sks) Semester Tgl Penyusunan
Web Fundamentals 2KB4016 4 2 29 Januari 2019
Otorisasi Koordinator Bidang Keahlian
Nama Koordinator Pengembang RPS Ka PRODI
(Jika Ada)
Tanda tangan
Tubagus Riko Rivanthio, S.Kom., M.Kom Nama Terang Agus Salim, S.Kom., M.Kom.
Capaian CPL-PRODI (Capaian Pembelajaran Lulusan Program Studi) Yang Dibebankan Pada Mata Kuliah
Pembelajaran (CP)
A9 Menunjukkan sikap bertanggung jawab atas pekerjaan di bidang keahliannya secara mandiri
B4 Menguasai pengetahuan tentang algoritma fundamental yang berkaitan dengan struktur data dan bahasa-bahasa pemrograman;
C3 Mampu menyelesaikan pekerjaan berlingkup luas dan menganalisis data dengan beragam metode yang sesuai dengan kebutuhan;
C7 Mampu bekerjasama, berkomunikasi, dan berinovatif dalam pekerjaan;
C11 Mampu mengenali kebutuhan, melakukan adaptasi dan mendemonstrasikan kemampuan dalam melanjutkan pengembangan diri;
D3 Mampu menganalisa dan merancang program aplikasi komputer berbasis website;
CPMK (Capaian Pembelajaran Mata Kuliah)

CPMK1 Mampu Menjelaskan konsep web (B4, D3)
CPMK2 Mampu memecahkan permasalahan berbasis website (A9, D3, C3)
CPKM3 Mampu merancang website sesuai kebutuhan user (D3, A9, C11)
CPMK4 Mampu mengintegrasikan dan mendemontrasikan webiste yang dibuat (C7, C11)
Diskripsi Singkat MK Pada mata kuliah ini mahasiswa belajar tentang konsep dasar pembuatan website dengan menggunakan bahasa HTML, CSS, JavaScript, Bootstrap
serta membuat website dengan menggunakan Content Management System (CMS)

Bahan Kajian / 1. Konsep Website

Materi 2. Pembuatan website dengan bahasa HTML dan CSS
Pembelajaran 3. Penggunaan CSS Bootstrap
4. Pembuatan website dengan bahasa Javascript beserta penggunaan library javascritp (Jquery, react, AngularJs)
5. Pembuatan website dengan CMS Wordpress
6. Hosting dan domain
7. Pembuatan project website non database
Daftar Referensi Utama:

1. Buku Pintar Pemrograman HTML 5 untuk Pemula, Mediakom
2. Bootstrap CSS Framework, Penulis: Roberto Kaban, andi publisher
3. JavaScript Uncover – Panduan Belajar JavaScript untuk Pemula, Penulis: Andre Pratama, Duniailkom
4. Mengenal Pemrograman ReactJS, Penulis Jubilee Enterprise, Elex Media
Pendukung:
Nama Dosen Tubagus Riko Rivanthio, M.Kom.

Pengampu
Mata kuliah
prasyarat (Jika
ada)

Bentuk dan Penilaian

Metode Kriteria & Indikator Bobot (%)
Sub-CPMK Bahan Kajian Pembelajar Bentuk
MingguKe-
(Kemampuan akhir (Materi an Estimasi Pengalaman Belajar
yg Pembelajaran) [Media & Waktu Mahasiswa
direncanakan) Sumber
Belajar]
(1) (2) (3) (4) (5) (6) (7) (8) (9)
1–2 1. Mampu 1. RPS dan Kontrak Bentuk: Bentuk: 1. Mengetahui tujuan 1. Menjelaska 1. Ketepatan 5%
memahami Mata Kuliah Praktikum Lab Praktikum mata kuliah web n tujuan dalam
tujuan mata 2. Konsep Web 1. Motivasi Lab 240 fundamental mata kuliah menjelaskan
kuliah Web a. Definisi Web 2. Praktikum Menit 2. Mengetahui konsep web tujuan mata
Fundamental 3. Tanya Jawab /Pertemuan web fundament kuliah web
b. Cara kerja Web
2. Mampu 4. Latihan Soal 1. 15 menit 3. Mengaplikasikan tag al fundamental
memahami 3. Tag dasar HTML 2. 60 Menit html dalam 2. Menjelaska 2. Ketepatan
5. Kesimpulan
konsep web 3. 20 Menit pembuatan web n Konsep dalam
3. Mampu 4. 70 Menit web menjelaskan
sederhana
mengaplikasikan Praktikum 5. 15 Menit 3. Website Konsep web
4. Mengerjakan tugas
Tag HTML Profil 3. Ketepatan
Mandiri membuat website
Praktikum Sederhana dalam
biodata mahasiswa 4. Website mengaplikasn
1. Tugas Mandiri Mandiri
240 Biodata tag html
Menit/Perte mahasiswa dalam
muan membuat
website
sederhana
3–4 1. Mampu Cascade Style Sheet Bentuk: Bentuk: 1. Mengaplikasikan tag 1. Wesbite 1. Ketepatan 5%
memahami (CSS) Praktikum Lab Praktikum CSS dalam pembuatan sederhana dalam
pembuatan CSS 1. Motivasi Lab 240 webiste dengan mengaplikasik

2. Mampu 1. Inline Style 2. Praktikum Menit/perte 2. Mengaplikasikan CSS menggunak an CSS dalam
memahami Sheet 3. Tanya Jawab muan Selector dalam an CSS membuat
penggunaan CSS 2. Internal Style 4. Latihan Soal 1. 15 menit membuat webiste 2. Website website
Selector Sheet 5. Kesimpulan 2. 60 Menit 3. Membuat CSS style Biodata 2. Ketepatan
3. External Style 3. 20 Menit 4. Mengerjakan tugas mahasiswa dalam
Sheet 4. 70 Menit untuk mengaplikasikan dengan mengaplikasik
4. Import CSS Praktikum 5. 15 Menit CSS style yang dibuat menggunak an CSS Style
5. Class Mandiri untuk website biodata an css style dalam
Praktikum mahasiswa membuat
1. Tugas Mandiri webiste
Mandiri 240 biodata
Menit/perte mahasiswa
muan
5-6 1. Mampu 3. Pengenalan Bentuk: Bentuk: 1. Mengaplikasikan 1. Webiste 1. Ketepatan 5%

Memahami Bootstrap Praktikum Lab Praktikum Bootstrap dalam sederhana dalam
struktur 4. Tabel, List, 1. Motivasi Lab 240 pembuatan webiste dengan mengaplikasis
bootstrap Gambar, Tombol 2. Praktikum Menit/perte 2. Membuat Template mengunaka kan bootstrap
2. Mampu Bootstrap n bootsrap dalam
3. Tanya Jawab muan dengan Bootstrap
memahami 5. Jumbotron 2. Template pembuatan
penggunaan 4. Latihan Soal 1. 15 menit 3. Mengerjakan tugas
Bootstrap 5. Kesimpulan 2. 60 Menit untuk Bootstrap web
bootstrap pada
6. Alert Bootstrap 3. 20 Menit mengaplikasikan CSS 3. Website sederhana
web sederhana
7. Icon Bootstrap 4. 70 Menit profil 2. Ketepatan
style yang dibuat
8. Pagination dan Praktikum 5. 15 Menit perusahaan penggunaan
untuk website
Breadcrumb template
Mandiri biodata mahasiswa
9. Panel Bootstrap Praktikum bootstrap
10.Tabs dan Pills 1. Tugas Mandiri yang dibuat
Bootstrap Mandiri 240 dalam
11.Navigation Bar Menit/pe pembuatan
Bootstrap rtemuan web Profile
12.Form Bootstrap

13.Carousel
Bootstrap
14.Modal Dialog
Bootstrap
15.Grid Sistem
Bootstrap
16.Membuat
Template Dengan
Bootstrap
7 1. Mampu 1. Tugas Membuat Bentuk: Praktikum Mandiri 1. Bekerja sama 1. Website E- 1. Ketepatan 15%
membuat Website E- Praktikum 240 Menit dengan kelompok Commerce dalam
webiste e- Commerce dalam membuat non pembuatan
Mandiri
commerce non 2. Presentasi Praktikum Website E-Commerce database Web Site E-
database Website E- Tugas Mandiri Presentasi 2. Mempresentasikan 2. Presentasi Commerce
2. Mampu Commerce Berkelompok Kelompok di website yang telah 2. Mampu
mempresentasi LAB dibuat dengan mepresentasik
kan website Praktikum Lab 240 Menit kelompok an hasil karya
yang telah Presentasi dengan baik
dibuat Kelompok
UJIAN TENGAH SEMESTER 20%
8 1. Mampu 1. Pengenalan Java Bentuk: Bentuk: 1. Mengaplikasikan 1. Webstite 1. Ketepatan 5%

memahami Script Praktikum Lab Praktikum javascript dalam sederhana dalam
bahasa javascrip 2. Variabel, Tipe 1. Motivasi Lab 240 pembuatan website 2. Website E- penggunaan
2. Mampu data, dan 2. Praktikum Menit/perte sederhana Commerce javascript
memahami Function pada non dalam
3. Tanya Jawab muan 2. Mengaplikasikan
penggunaan java script database pembuatan
javascript pada 3. Struktur Kontrol 4. Latihan Soal 1. 15 menit struktur kontrol
2. 60 Menit javascript pada web webiste
web Event 5. Kesimpulan
3. 20 Menit sederhana

4. 70 Menit 3. Mengaplikasikan 2. Ketepatan

5. 15 Menit javascript pada web dalam
Praktikum
ecommerce non menggunakan
Mandiri Praktikum database javascript
Mandiri dalam studi
1. Tugas
240 kasus e-
Mandiri
Menit/pe comerce
rtemuan
9 - 10 Mampu 1. Jquery Bentuk: Bentuk: 1. Mengaplikasikan 1. Website 1. Ketepatan 5%

mengaplikasika 2. React Praktikum Lab Praktikum Library Jquery pada Sederhana dalan
n framework 3. AngularJs 1. Motivasi Lab 240 website menggunak penggunaan
library Menit/perte an Library library Jquery,
2. Praktikum 2. Mengaplikasikan
javascript Jquery React, dan
3. Tanya Jawab muan Library React pada
4. Latihan Soal 1. 15 menit website 2. Website Angular JS
2. 60 Menit 3. Mengaplikasikan Sederhana
5. Kesimpulan
3. 20 Menit Library AngularJs menggunak
4. 70 Menit an Library
pada website
Praktikum 5. 15 Menit React
3. Website
Mandiri
Praktikum Sederhana
1. Tugas Mandiri menggunak
Mandiri 240 an Library
Menit/pe AngularJs
rtemuan
11 - 12
1. Mampu CMS Wordpress Bentuk: Bentuk: 1. Mengaplikasikann
memahami Praktikum Lab Praktikum CMS Wordpress
Konsep CMS 1. Motivasi Lab 240 dalam pembuatan
2. Mampu Menit/perte
2. Praktikum web
membuat web
3. Tanya Jawab muan

menggunakan 4. Latihan Soal 1. 15 menit

CMS Wordpress 5. Kesimpulan 2. 60 Menit
3. 20 Menit
4. 70 Menit
Praktikum 5. 15 Menit
Mandiri
Praktikum
1. Tugas Mandiri
Mandiri 240 Menit
/pertemuan
13 1. Memahami 1. Hosting Bentuk: Bentuk: 1. Mendaftarkan akun 1. Akun 1. Memiliki akun 5%

konsep hosting 2. Domain Praktikum Lab Praktikum hosting hosting hosting
dan domain 1. Motivasi Lab 240 2. Membuat domain 2. Domain 2. Mengakses
2. Mampu Menit 3. Control website
2. Praktikum 3. Mengunggah website
mengupload dan Panel dengan
3. Tanya Jawab 6. 15 menit ke hosting
konfigurasi Hosting domain yang
webiste di 4. Latihan Soal 7. 60 Menit
8. 20 Menit dibuat
hosting 5. Kesimpulan
9. 70 Menit
10. 15
Praktikum Menit
Mandiri
Praktikum
1. Tugas Mandiri
Mandiri 240 Menit
14 1. Mampu 1. Tugas membuat Bentuk: Praktikum 1. Bekerja sama 1. Website 1. Kreativitas 15%
berkerjasama website dengan Praktikum Mandiri dengan kelompok tema bebas dan inovatif
dengan tema bebas yang 240 Menit dalam membuat yang dalam
kelompok Mandiri
menggunakan Website tema bebas menggunak pembuatan
Bootstrap, an website

membuat Javascript Tugas Mandiri Praktikum yang menggunakan Bootstrap, 2. Mampu

webiste beserta library Berkelompok Presentasi Bootstrap, Javascript Javascript mepresentas
2. Mampu 2. Mempresentasia Kelompok di 2. Mempresentasikan ikan hasil
mempresentasik kan website yang Praktikum Lab LAB website yang telah 2. Presentasi karya
an website yang dibuat Presentasi 240 Menit dibuat dengan dengan baik
telah dibuat Kelompok kelompok
Ujian Akhir Semester 20%

Politeknik LP3I Bandung Daftar Isi
Daftar Isi
Konsep Dasar Web dan Pengenalan HTML......................................................................................................1
Cascade Style Sheet (CSS) ..............................................................................................................................18
Bootstrap .......................................................................................................................................................29
Javascript........................................................................................................................................................42
Library Javascript (JQuery, React, Angularjs) .................................................................................................54
Content Management System Wordpress ....................................................................................................63
Hosting dan Domain ......................................................................................................................................77
Daftar Pustaka ...........................................................................................................................................88

Politeknik LP3I Bandung Praktikum Konsep Dasar Web dan Pengenalan HTML
Praktikum 1 & 2
Konsep Dasar Web dan Pengenalan HTML
A. Konsep Dasar Web

1. Jenis Web
Perkembangan dunia internet telah melahirkan suatu fasilitas layanan baru,
yaitu web, yang merupakan layanan terpenting dalam internet. Dewasa ini,
fasilitas web mengizinkan pengakses untuk mengakses dan berinteraksi
dengan teks, grafik, animasi, foto, suara, dan video. Web secara fisik adalam
kumpulan computer pribadi, web browser, koneksi ke ISP, computer server,
router, dan switch yang digunakan untuk mengalirkan informasi dan menjadi
wahana pertama berbagai pihak terkait.Web dapat dikategorikan menjadi dua,
yaitu :
a. Web Statis
Web yang menampilkan informasi-informasi yang sifatnya statis (tetap),
misalnya : web profil perusahaan.
b. Web Dinamis
Web yang menampilkan informasi serta dapat berinterkasi dengan user
yang bersifat dinamis, misalnya : web e-comerse.
Web merupakan singkatan dari WWW yaitu world Wide Wide adalah suatu
ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh
pengenal global yang disebut Uniform Resource Identifier (URI).
2. Arsitektur Web
a. Browser
Perangkat lunak di sisi klien yang digunakan untuk mengakses informasi
Web, Contoh : Internet Explorer, Mozila Firefox, dan lain-lain.
b. Web Server
Server yang melayani permintaan klien terhadap halaman web, contoh :
Apache, IIS (internet information server), dan Xitami.
c. Middleware
Perangkat lunak yang bekerja sama dengan Web Server dan berfungsi
menerjemahkan kode-kode tertentu, menjalankan kode-kode tersebut,
dan memungkinkan berinteraksi dengan basis data.
Contoh : PHP, ASP, dan PERL
d. Database
Perangkat Lunak yang berfungsi sebagai penyimpanan data.
Contoh : Mysql, Access, Sql Server dan lain sebagainya.
Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 1

Gambar 1.1. Arsitektur Web
3. HTTP
Adalah protokol yang menentukan aturan yang perlu diikuti oleh web browser
dalam meminta dan mengambil suatu dokumen dan oleh web server dalam
menyediakan dokumen yang diminta web browser. Protokol ini merupakan
protokol standar yang digunakan untuk mengakses dokumen HTML.
Gambar 1.2. Cara kerja HTTP
a. Client Side Programming

Secara umum, suatu client adalah satu aplikasi komputer, seperti web
browser yang berjalan pada satu komputer lokal dari pengguna atau
workstation, dan terhubung ke suatu server. Client-side programming
adalah program komputer pada web yang dijalankan pada sisi client, oleh
web browser; Hal ini berlawanan arti dengan Server-side scripting. Operasi
dapat dilakukan oleh client-side karena operasi tersebut membutuhkan
akses ke informasi atau fungsi yang tersedia pada client tetapi tidak pada
server, karena pengguna membutuhkan observasi terhadap operasi
tersebut atau menyediakan input, atau server kekurangan kekuatan
pememrosesan untuk melakukan operasi yang tepat waktu untuk seluruh
client yang harus dilayaninya. Sebagai tambahan, jika operasi dapat
dilakukan oleh client tanpa mengirim data melalui jaringan, maka hal itu
memakan waktu lebih sedikit, menggunakan lebih kecil bandwidth dan
mengurangi resiko keamanan.
Client-side Script seringkali dimasukkan (embedded) di dalam dokumen
HTML, tetapi dapat juga berada di dalam file terpisah, yang direferensikan

oleh dokumen yang menggunakannya. Atas sebuah request, file yang

diperlukan dikirimkan oleh web server kepada komputer user. Web browser
milik user melakukan eksekusi terhadap Script, lalu menampilkan dokumen,
termasuk output yang dapat terlihat dari Script.
Client-side Script juga dapat berisikan perintah yang harus diikuti oleh web
browser jika user berinteraksi dengan dokumen dengan cara tertentu,
contohnya klik sebuah tombol.
b. Server Side Programming

Terminologi Server-side memiliki arti operasi yang dilakukan oleh server
didalam sebuah client-server relationship. Umumnya, sebuah server adalah
program, seperti web server, yang berada pada sebuah remote server,
yang dapat dijangkau oleh komputer lokal milik user. Operasi dilakukan
pada sisi Server, karena memerlukan akses atas informasi atau fungsi yang
tidak tersedia pada client, atau pada aplikasi yang tidak dapat dilakukan
pada Client-side.
Operasi Server-side juga meliputi proses dan penyimpanan data dari client
ke suatu server, yang dapat dilihat oleh sekelompok Client. Server-side
Scripting adalah teknologi Web Server dimana request oleh user dipenuhi
dengan cara menjalankan script langsung pada web server untuk
menghasilkan halaman HTML dinamis. Umunya menyediakan website
interaktif pada database dan penyimpanan data lainnya.
Keuntungan utama dari Server-side Script adalah kemampuan untuk
mengatur response berdasarkan keperluan user, hak akses, atau query ke
dalam data store.
c. Web Server Software

Web Server adalah sebuah perangkat lunak server yang berfungsi
menerima permintaan HTTP atau HTTPS dari Client yang dikenal dengan
web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-
halaman web yang umumnya berbentuk dokumen HTML. Server web yang
terkenal diantaranya adalah:
 Apache, web server antar platform
 Appserv
 XAMPP
 PHPTriad; discontinued
 Apache2Triad
 Internet Information Service (IIS), hanya dapat berjalan di sistem
operasi MS Windows
d. Instalasi Web Server Xampp

 Download Xampp https://www.apachefriends.org/

 Kemudian Install Xampp yang sudah didownload

 Kemudian buka control panel Xampp, kemudian jalankan Apace dan
Mysql
e. Folder penyimpanan file PHP

Berikut ini root folder Xampp
Folder yang perlu diperhatikan :

Apache : Folder yang berisi konfigurasi dari webserver local
Mysql : Folder tempat penyimpanan database
Php : Folder yang berisi konfigurasi Bahasa PHP

htdocs : Folder tempat penyimpanan file-file PHP (website)

yang dibuat
f. Notepad++
Notepad++ adalah aplikasi untuk menulis script/kode untuk
pembuatan aplikasi/program. Notepad++ dapat didownload di
www.notepad-plus-plus.org
Adapun tampilan dari notepad++ adalah sebagai berikut :
B. HTML
HTML merupakan kependekan dari Hyper Text Markup Language. Dokumen
HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang.
Dokumen HTML ini dikenal sebagai web page. Dokumen HTML merupakan
dokumen yang disajikan dalam browser web. Dokumen ini umumnya berupa
informasi yang disajikan di internet. Umumnya file HTML berekstensi .htm atau
.html. Nama file / dokumen HTML boleh kombinasi antara huruf kecil dan huruf
besar. Tetapi umumnya, di internet suatu file HTML ditulis dengan menggunakan
huruf kecil. Ini dikarenakan ada beberapa sistem operasi yang membedakan
antara huruf kecil dan huruf besar. Dokumen HTML disusun oleh elemen- elemen.

Elemen ini merupakan istilah bagi komponen- komponen dasar pembantuk

dokumen HTML. Beberapa contoh elemen adalah : head, body, table, paragraf,
dan list.
Struktur dasar dari dokumen HTML adalah sebagai berikut :
Tag html ditulis menggunakan tanda “<” dan “>”, setiap tag html memiliki tag awal
dan tag akhir, contoh :
<html>  ini adalah tag awal
</html>  ini adalah tag akhir
Tag <head> dan tag <Title> adalah tag yang digunakan untuk membuat teks pada
title bar suatu browser.
Sedangkan tag <body> digunakan untuk membuat tempat konten web.
Head
<body>
Hampir setiap tag html memiliki atribut. Atribut merupakan suatu instruksi untuk
memberikan suatu efek pada teks atau objek yang diberi tag html contohnya pada
tag <body> bisa diberi atribut bgcolor atau background yaitu memberi warna atau
gambar pada latar belakang/background web.
Setiap atribut memiliki value untuk isi dari efek atribut tersebut,contoh

<body bgcolor =”red”>
Maka latar belakang/background web akan berwarna merah.
Untuk menampilkan dokumen supaya bisa terlihat lebih baik, maka ada
beberapa tag yang perlu diketahui. Tag-tag tersebut diantaranya berguna
untuk mempertebal tulisan (bold), mencetak miring tulisan,
menggarisbawahi tulisan, pengaturan paragraph dan lain- lain. Tag-tag
tersebut diantaranya :
a. Tag Pengaturan Teks

b. Tag Paragraf
Untuk mengatur paragraf, digunakan tag <p> dan </p>. Tag ini
mempunyai atribut align yang boleh terisi dengan center, left, right dan
justify.
c. Tag List
Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa
jenis list yang dikenal oleh HTML yaitu :
 List bernomor (ordered list), tag yang dipakai adalah <ol> dan
diakhiri dengan</ol>
 List tidak bernomor (unordered list) , tag yang dipakai adalah <ul>
dan </ul>
 List definisi (definition list), tag yang dipakai adalah <dl> dan </dl>
Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak
bernomor
adalah dengan perintah <li> dan ditutup dengan </li>.
Sedangkan untuk list definisi, <dt> dan </dt> sebagai definisi term dan
<dd> dan
</dd> sebagai definisi description (keterangan dari definisi term).
Bentuk umum untuk membuat list bernomor adalah :
<ol type=”tipenomor”>
<li>item 1</li>

<li>item 2</li>
<li>item 3</li>
</ol>
d. Tag Tabel
Untuk membuat suatu tabel dalam suatu halaman web site, maka tag
yang dipakai adalah <table> dan </table>, <tr> dan </tr> yang terarti
table row, <td> dan </td> yang berarti table data.
e. Tag Gambar
Untuk memperbagus tampilan html, maka kadang diperlukan gambar
baik gambar yang tetap atau yang animasi. Tag yang dipakai untuk
menampilkan gambar adalah tab <img>. Beberapa atribut yang sering
digunakan dalam tag ini adalah :
 src : menunjukan lokasi file gambar
 border : tebal bingkai gambar
 width : lebar gambar
 height : tinggi gambar
 align : peletakan gambar
f. Tag Link
Kelebihan utama dokumen HTML adalah kemampuannya untuk
memberikan link dari satu teks dan atau gambar menuju ke dokumen
atau bagian lain dalam suatu dokumen. Browser akan menyorot
(highlight) teks atau gambar yang diidentifikasi sebagai link dengan
warna dan atau garis bawah untuk menunjukkan bahwa itu adalah
hyperteks link.
Untuk membuat sebuah link, maka tag yang dipakai adalah tag <a> dan
</a>.
Atribut-atribut dari tag ini adalah :
 href : lokasi yang dituju, bisa alamat internet, file atau
folder
 target : lokasi link tersebut ditampilkan. Gunakan _blank jika
ingin menampilkan link yang dituju di browser
baru/lain.
g. Tag Form
Kadang-kadang ketika kita berjalan-jalan / surfing, kita diminta untuk
mengisikan suatu data yang akan dikirim ke penyedia web site. Data-
data tersebut bisa berupa data nama, alamat, no kartu kredit, gambar,
atau file.
Untuk membuat suatu form yang dapat berinteraksi dengan visitor,
maka pengembang web harus membuat suatu form dalam dokumen
html-nya. Untuk membuat suatu form dalam dokumen html, tag yang

digunakan adalah <form> </form>. Di antara kedua tag tersebut,

elemen-elemen form dituliskan.
Perintah umum tag form adalah
<form name=”namaform” method="jenismethod"

action="fileeksekusi">
disinilah elemen-elemen form ditulis
</form>
Atribut name diisi dengan nama dari form tersebut.
Atribut method diisi dengan GET atau POST
Atribut action diisi dengan nama file yang akan dieksekusi ketika tombol
submit ditekan.
Ada beberapa jenis elemen form yang dapat digunakan diantaranya :
C. Latihan Praktikum
1. Buatlah folder webfun pada folder htdocs
2. Buka Notepad++, kemudian ketik script HTML berikut ini
a. pengaturan_teks.html

Setelah diketik kemudian disimpan pada folder latihan_html, selanjutnya

buka aplikasi browser, kemudian ketik :
localhost/webfun /pengaturan_teks.html

b. pengaturan_paragraf.html
Hasilnya :

c. Tag_list.html
Hasilnya:

d. Tag_table.html

Hasilnya :
e. Tag_image.html
 Buat folder gambar didalam latihan_html.
 Kemudian masukan 3 buah gambar dengan format jpg, png dan gif
 Kemudian ubahlah nama dari gambar tersebut menjadi gb1.jpg,
gb2.png, gb3.gif
 Kemudian ketiklah script html berikut ini
Hasilnya :

f. Tag_link.html
Hasilnya
g. Tag_Form

Hasilnya
II. Tugas Praktikum

1. Buatlah website profil Politeknik LP3I, dengan isi konten sebagai berikut :
a. Visi & Misi
b. Daftar Program Studi
c. Fasilitas
2. Buatlah website Biodata Anda dengan konten sebagai berikut :

a. Biodata : Identitas dan foto anda
b. Cita-cita, hobby dan quotes / motto semangat Anda
c. Pegalaman menarik Anda
d. Album Foto kegiatan Anda

Politeknik LP3I Bandung Cascade Style Sheet (CSS)
Praktikum 3 & 4
Cascade Style Sheet (CSS)
Setiap website bisa terdiri dari berpuluh-puluh bahkan beratus-ratus halaman. Jika
setiap kita mengubah halaman website tersebut kita harus mengubah format satu
persatu maka akan sangat repot. Namun jika menggunakan CSS maka hal tersebut
bukan lagi masalah karena CSS dapat menyimpan format dan menggunakan kapan
dan dimana pun sesuai kebutuhan.
Seperti halnya pada aplikasi Microsoft word yang memiliki fasilitas Formating & Style
dalam mempermudah dalam mengedit dokumen yang dibuat. Style sheets pada CSS
pun memiliki fungsi yang sama seperti fasilitas Formating & style pada Microsoft Word.
Dengan style sheet, bisa membuat efek-efek tertentu untuk konten web yang dibuat.
CSS sudah didukung oleh hampir semua web browser yang telah distandarkan oleh
World Wide Web Consortium (W3C). Adapun 4 cara memasang kode CSS pada HTML
adalah sebagai berikut :
1. Inline Style Sheet
2. Internal Style Sheet
3. External Style Sheet
4. Import CSS
A. Inline Style Sheet

Cara ini adalah menuliskan langsung script CSS kedalam tag HTML yang
diiginkan. Cara ini biasanya digunakan untuk membuat format hanya sekali saja.
Contoh :
Hasilnya

B. Internal Style Sheet

Internal Style Sheet adalah menempelkan script CSS pada bagian <head>,
sehingga script CSS akan berlaku pada file HTML yang bersangkutan dimana
CSS disimpan. Penulisan CSS dengan cari ini diawali dengan tag <Style> dan
diakhiri dengan </style>.
Contoh :
C. External Style Sheet

Kode CSS external ditulis dalam suatu file terpisah dari file HTML dengan ektensi
.css. Kemudian file css tersebut akan dipanggil oleh file HTML. Kode CSS
eksternal dapat digunakan lebih dari satu file HTML.
Contoh :
File style.css yang disimpan pada folder css
File HTML yang memanggil file style.css

D. Class
Class digunakan untuk membuat berbagai macam variasi bagi satu tag HTML.
Sebagai contoh, bila ingin menggunakan tiga warna untuk heading <H1>, maka
dapat didefinikannya dalam tiga class dalam suatu file css.
Contoh :
Maka untuk file HTML nya adalah sebagai berikut :
Pada contoh-contoh sebelumnya, tag HTML digunakan sebagai selector, misalnya

ketika membuat kode CSS untuk tag <H1> , dimana tag tersebut menjadi selector.
Namun bagaimana jika ingin membuat format <H1> dengan property berbeda?.
Misalnya tag <H1> dikolom kiri berwarna biru, sementara tag <H1> dkolom tengah
berwarna hitam. Untuk kasus tersebut dapat digunakan Class selector dan ID
selector
1. Class Selector

Class Selector digunakan untuk menentukan sekelompok elemen.

Berbeda dengan ID Selector, Class Selector digunakan untuk banyak
elemen. Untuk penulisan class selector diawali dengan tanda titik (.)
Cara penulisan Class Selector :
.nama-class
{property:value;}
Untuk menempelkan class kedalam tag HTML :
Taghtml.nama-class {property:value;}
Contoh :
Pembuatan script CSS – Class Selector
Pemakaian kode CSS- Class Selector pada HTML
2. ID Selector
Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada
halaman website, sama halnya seperti National ID, atau nomor KTP yang
hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan
selector ID.
- Pemberian ID pada suatu elemen boleh menggunakan kata atau angka
apa saja
- Tidak boleh ada ID lebih dari satu
- Tidak boleh diawali oleh angka
- Tidak boleh mengandung special characters (~ ! @ # $ %)
Penulisan ID Selector diawali dengan tanda (#).
#nama-ID {property:value;}
Untuk menempelkan ID Selector ke dalam tag HTML :

Taghtml#nama-ID {property:value;}
B. Latihan Praktikum
1. Background
Style_background.css
Background.html
2. Margin dan Padding

Style_margin_padding.css
Margin_padding.html

3. Pengaturan Font dengan CSS

Style_font.css
font.css

4. Hyperlink
5. Format Text CSS

Style_teks.css


Teks.html
6. Myweb
Style_myweb.css
Myweb.html

7. Membuat template web

Style_latcss.css

Latcss.html
C. Tugas
Sempurnakanlah tugas pertemuan 1 & 2, dengan menggunakan file CSS agar
tampilan lebih web profil dan web biodata lebih menarik.

Politeknik LP3I Bandung Bootstrap
Praktikum 5 & 6
Bootstrap
A. Teori Dasar
a. Pengertian Bootsrap
Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk
bagian pengembangan front-end website. Bootstrap juga merupakan salah
satu framework HTML, CSS dan javascript yang paling populer di kalangan
web developer yang digunakan untuk mengembangkan sebuah website
yang responsive. Sehingga halaman website nantinya dapat menyesuaikan
sesuai dengan ukuran monitor device (desktop, tablet, ponsel ) yang
digunakan pengguna disaat mengakses website website dari browser.
Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan
oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk
mendorong konsistensi di alat internal.
Dengan menggunakan Bootstrap seorang developer dapat dengan mudah
dan cepat dalam membuat front-end sebuah website. Anda hanya perlu
memanggil class-class yang diperlukan, misalnya membuat tombol, grid,
tabel, navigasi dan lainnya.
Bootsrap telah menyediakan kumpulan komponen class interface dasar

yang telah dirancang sedemikian rupa untuk menciptakan sebuah tampilan
yang menarik dan ringan. Selain komponen class interface, bootsrap juga
memiliki grid yang berfungsi untuk mengatur layout pada halaman website.
Selain itu developer juga dapat menambahkan class dan CSS sendiri,
sehingga memungkinkan untuk membuat desain yang lebih variatif. Salah
satu contoh website yang menggunakan framework bootsrap yaitu twitter.
Bootstrap sendiri sebenarnya dikembangkan oleh developer twitter
sehingga bootsrap sering juga disebut dengan “ twitter bootsrap “.
Bootstrap sendiri sudah kompatibel dengan versi terbaru dari beberapa

browser seperti google chrome, firefox, internet explorer, dan safari
browser. Meskipun beberapa browser ini tidak didukung pada semua
platform.

Beberapa alasan mengapa saat ini cukup banyak pengembang yang

menggunakan Bootstrap dalam membuat front-end website, yaitu karena
beberapa kelebihan yang dimiliki oleh Bootstrap itu sendiri yang antara lain:
- Dapat mempercepat waktu proses pembuatan front-end website
- Tampilan bootstrap yang sudah cukup terlihat modern.
- Tampilan Bootsrap sudah responsive,sehingga mendukung segala jenis
resolusi, baik itu PC, tablet, dan juga smartphone.
- Website menjadi Sangat ringan ketika diakses, karena bootsrap dibuat
dengan sangat terstruktur.
b. Struktur Bootstrap
Berikut ini adalah Struktur file Bootstrap
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
c. Install Bootstrap
Langkah-langkah dalam instalasi bootstrap adalah :
1. Download Bootstrap pada website resminya, yaitu :
https://getbootstrap.com/docs/3.3/getting-started/

2. Lakukan ekstraksi file zip hasil download

3. Masukkan CSS Bootstrap pada file HTML.
1. Latihan 1 : cara penggunaan bootstrap
a. Dowload Bootstrap
b. Ekstrak bootstrap pada folder latihan_html, aturlah root folder css, js,
font, seperti tampilan berikut :
c. Ketiklah script berikut ini kemudian simpan dengan nama

lat_bootstrap.html

d. Hasilnya adalah seperti berikut ini
2. Latihan 2 : membuat tabel menggunakan Bootstrap

lat_bootstrap_tabel.html

Hasilnya :
Cobalah rubah script berikut ini :

a. <table class="table "> menjadi <table class="table table-bordered">
atau menjadi <table class="table table-bordered table-striped">
kemudian lihat hasilnya
b. Edit script lat_bootstrap_tabel.html menjadi seperti ini :

c. Kemudian amati hasilnya.
3. Latihan 3 : Membuat tombol dengan bootstrap
Hasilnya :

4. Latihan 4 : membuat Icon pada bootstrap

Hasilnya :
Cobalah dengan icon yang lainnya dengan mengganti nama class-nya

sesuai dengan icon gambar berikut ini :

5. Latihan 5 : Membuat Form menggunakan Bootstrap
Hasilnya :
6. Latihan 6 : membuat menu navigation bar dan menu dropdwon

Untuk membuat navigation bar dan dropdown diperlukan library jquery.js.
library tersebut dapat diunduh di https://jquery.com/download/, kemudian
klik Download the compressed, production jquery 3.2.1

Sehingga muncul script jquery pada browser, kemudian klik kanan dan klik
save Page As, simpan di folder js, dan beri nama jquery.min

Kemudian ketik script berikut ini
Hasilnya :

7. Latihan 7 : System Grid pada bootstrap

a. Lat_bootstrap_grid.html
Hasilnya

b. Lat_bootstrap_layout.html
Hasilnya :
C. Tugas
Buatlah website resevasi travel atau hotel menggunakan HTML & bootstrap,
adapun halaman website terdiri dari :
1. Halaman Utama : berisi informasi travel atau hotel
2. Halaman Form Pemesanan: berisi form untuk registrasi pemesanan tiket atau
hotel

Politeknik LP3I Bandung Javascript
Praktikum 8
Javascript
A. Teori Dasar
1. Javascript
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995.
Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai
bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu
bahasa ini banyak di kritik karena kurang aman, pengembangannya yang
terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap
kali kita membuat kesalahan pada saat menyusun suatu program.
Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan
Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka
Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada
tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri
mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai
“Jscript” di browser Internet Explorer 3. Javascript adalah bahasa yang
berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu
dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip
pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk
memberikan kemampuan tambahan terhadap bahasa HTML dengan
mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di
sisi browser bukan di sisi server web.
Javascript bergantung kepada browser(navigator) yang memanggil
halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip
di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau
penterjemah khusus untuk menjalankannya (pada kenyataannya
kompilator Javascript sendiri sudah termasuk di dalam browser tersebut).
Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di
banding bandingkan) yang memerlukan kompilator khusus untuk
menterjemahkannya di sisi user/klien.
a. Penulisan Java Script
Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk
menuliskan kode-kode Java Script agar dapat ditampilkan pada halaman
HTML, yaitu :

a) Java script ditulis pada file yang sama Untuk penulisan dengan cara
ini, perintah yang digunakan adalah <SCRIPT LANGUANGE
=”JavaScript” >program java script disini</SCRIPT>. Perintah
tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>
Contoh Penulisan :
b) Javascript ditulis pada file terpisah Kode Javascript bisa juga kita
buat dalam file terpisah dengan tujuan agar dokumen HTML isinya
tidak terlalu panjang. Atribut yang digunakan adalah <SCRIPT
SRC=”namafile.js”>…</SCRIPT> Diantara tag <SCRIPT………>
dan <SCRIPT> tidak diperlukan lagi kode Javascriptnya karena
sudah dibuat dalam file erpisah. File yang mengandung kode
Javascript berekstensi .js
Berikut diberikan contoh Program Javascript yang diletakkan di file
lain dan dipanggil melalui suatu file HTML
File isi.js
File HTML

Hasilnya adalah :
2. Variabel Dalam JavaScript

Variabel adalah tempat dimana kita menyimpan nilai-nilai atau informasi-
informasi pada JavaScript. Variabel yang dideklarasikan dapat di isi
dengan nilai apa saja. Dalam JavaScript pendeklarasian sebuah variabel
sifatnya opsional, artinya anda boleh mendeklarasikan atau tidak hal
tersebut tidak menjadi masalah. Jika anda memberi nilai pada variabel,
maka dalam JavaScript dianggap bahwa anda telah mendeklarasikan
variabel tersebut. Aturan penamaan variabel :
- Harus diawali dengan karakter (huruf atau baris bawah)
- Tidak boleh menggunakan spasi
- Huruf Kapital dan kecil memiliki arti yang berbeda
- Tidak boleh menggunakan kata-kata yang merupakan perintah
dalam JavaScript.
Deklarasi Variabel
Var nama_variabel = nilai
Atau
Nama_variabel = nilai
Contoh :
var nama;
var nama = ” Zaskia Mecca”
var X = 1998;
var Y;
Nama = ”Bunga Lestari” X = 1990;
Y = 08170223513
2.2 Tipe Data
Tidak seperti bahasa pemrograman lainnya, JavaScript tidak

memiliki tipe data secara explisit. Hal ini dapat dilihat dari beberapa
contoh variabel diatas. Anda mendeklarasikan variabel tapi tidak
menentukan tipenya. Meskipun JavaScript tidak memiliki tipe
data secara explisit. JavaScript mempunyai tipe data implisit.
Terdapat empat macam tipe data implisit yang dimiliki oleh
JavaScript yaitu :

- Numerik, seperti : 0222532531, 1000, 45, 3.146789 dsb

- String, seperti : “Hallo”, “April”, “Jl. Setiabudi No 17A”, “Cece
Kirani” dsb
- Boolean, bernilai true atau false
- Null, variabel yang tidak diinisilisasi
3. Tipe Numerik
Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik,
yaitu bilangan bulat (integer)dan bilangan pecahan(real/float). Untuk
bilangan bulat, kita dapat merepresentasikan dengan basis desimal,
oktal atau heksadesimal.
Contoh :
var A = 100;
var B = 0x2F;
untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik
atau notasi ilmiah (notasi E).
Contoh :
var a = 3.14533567;
var b = 1.23456E+3;
4. Tipe String
Untuk mendeklarasikan tipe string dapat dilakukan dengan cara
menuliskan string diantara tanda petik tunggal (’) atau tanda petik ganda
(”)
Contoh :
var str =’Contoh deklarasi string’;
var str1 = ”cara ini juga bisa untuk menulis string”;
5. Tipe Boolean
Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya
digunakan untuk mengecek suatu kondisi atau keadaan.
Contoh :
var X = (Y > 90);
contoh diatas menunjukkan bahwa jika Y lebih besar dari 90 maka X
akan bernilai True.

6. Tipe Null
Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi
nilai awal (inisialisasi).
7. Operator
Operator pada JavaScript terbagi menjadi enam, yaitu :
- Aritmatika
- Pemberian nilai (Assign)
- Pembanding
- Logika

- String
Selain operator pembanding, operator string pada JavaScript juga
mengenal satu operator lagi yang bernama PENGGABUNGAN.
Operator ini digunakan untuk menggabungkan beberapa string
menjadi sebuah string yang lebih panjang.
Contoh :
nama = ”Java” + ”Script”;
akan menghasilkan ”JavaScript” pada variabel nama
1. Latihan 1 : internal javascript
Lat_js_internal.html
Hasilnya :
2. Latihan 2 : Ekternal javascript

1. Buat file javascript dengan nama eksternal.js
2. Buat file html dengan nama lat_js_eksternal.html untuk memanggil file

eksternal.js

Hasilnya :
3. Latihan 3 : Operator& variabel pada javascript

Lat_js_operator.html

Hasilnya :
4. Latihan 4 : Function pada javascript

Hasilnya :
5. Latihan 5 : Event handler

Lat_js_event.html
Hasilnya :

Ketika Tombol ditekan
Berikut ini daftar event yang terdapat pada javascript :

6. Latihan 6 : membuat form validasi

Buatlah 3 (tiga) buah file html, javascript dan css.
1. lat_js_validasi.html
2. val.js (simpan di folder js)

3. validasi.css (simpan di folder css)
Hasilnya :
C. Tugas
Sempurnakan tugas pada praktikum III dengan menambahkan Javascript untuk
form registrasi, yaitu validasi form dan even handler.

Politeknik LP3I Bandung Library Javascript
Praktikum 9 & 10
Library Javascript (JQuery, React, Angularjs)
A. Teori Dasar
a. JQuery
Pengenalan Jquery
JQuery adalah sebuah library framework javascript. jadi singkat ceritanya
JQuery merupakan pengembangan dari javascript yang sengaja di buat
untuk memudahkan kita untuk mendevelop sebuah website dan ingin
membuat efek-efek dan keperluan penggunaan javascript lainnya di dalam
pengembangan sebuah website. sampai saat ini jQuery sudah sangat di
kenal di dunia web programming. sehingga banyak plugin-plugin web
lainnya yang di bangun menggunakan JQuery sebagai base nya. contohnya
seperti plugin calender, grafik, export html to image, design komponen web
dan sebagainya.
Hampir semua developer dunia sekarang sudah aktif menggunakan jquery
sebagai pengganti javascript. artinya developer tidak perlu lagi mengetikkan
syntax javascript yang terbilang cukup panjang-panjang untuk sebuah
event. oleh karena itu banyak yang sudah aktif menggunakan jquery karena
jquery juga merupakan pengembangan dari javascript. javascript sudah di
bungkus menjadi fungsi-fungsi yang tinggal di gunakan saja pada jquery.
untuk menggunakan jquery yang harus di lakukan adalah menghubungkan
file jquery dengan file html atau php yang ingin kita hubungkan. caranya
sama dengan cara menghubungkan file js seperti
Kelebihan Jquery
Berikut ini akan di jelaskan tentang kelebihan dari jquery yang saya rasakan
sendiri. dan mungkin akan bertambah lagi bagi anda sendiri setelah
mempelajari dan menggunakan framework jquery. adapun beberapa
kelebihan dari jQuery adalah
1. Lebih mudah di mengerti.
2. Lebih mudah di gunakan
3. Ringan
4. Penulisan syntax yang lebih pendek tetapi sudah memiliki kebergunaan
yang besar.

5. Free.
6. Bisa di kembangkan untuk membuat plugin-plugin web lain.
Cara menggunakan JQuery

Ada beberapa cara untuk menggunakan JQuery, adapun cara yang bisa di
gunakan adalah
1. Menggunakan JQuery secara offline
menggunakan jquery secara offline maksudnya adalah dengan cara
mendownload file jquery dan kemudian menghubungkan file html atau
php dengan file jquery. ( download terlebih dahulu JQuery di
http://code.jquery.com/jquery-2.1.4.min.js )
2. Menggunakan JQuery secara online

Menggunakan jquery secara online maksudnya adalah menggunakan
jquery dengan cara menghubungkan file HTML atau PHP dengan link
online langsung dari jquery.
Pengertian Selector JQuery

Selector dapat di katakan sebagai pemilih. dalam artian kata pemilih di sini
ialah pemilihan terhadap element HTML yang akan di berikan method event
atau aksi oleh si JQuery Pengertian Selector JQuery. Selector pada pada

JQuery sama seperti selector pada CSS, yaitu titik (.) untuk pemanggilan
class, dan tanda pagar (#) untuk pemanggilan id.
Event pada JQuery

Event merupakan method atau aksi yang di lakukan oleh JQuery contohnya
seperti menambah element, menyembunyikan element, menampilkan
element, mengambil data pada atribut element dan lainnya
1. Event Click
2. Event Dblclick
3. Event Mouseleave
4. Event Mouseenter
5. Event Hover
6. Event Focus
7. Event Blur
b. React
React.js adalah perpustakaan JavaScript. Ini dikembangkan oleh para
insinyur di Facebook.
Berikut adalah beberapa alasan mengapa orang memilih untuk
memprogram dengan React :
1. React cepat. Aplikasi buatan React dapat menangani pembaruan yang
kompleks dan masih terasa cepat dan responsif.
2. React adalah modular. Alih-alih menulis file kode yang besar dan padat,
Anda dapat menulis banyak file yang lebih kecil dan dapat digunakan
kembali. Modularitas React dapat menjadi solusi yang bagus untuk
masalah pemeliharaan JavaScript.
3. React scalable. Program besar yang menampilkan banyak data
berubah adalah tempat React berkinerja terbaik.
4. React fleksibel. Anda dapat menggunakan React untuk proyek menarik
yang tidak ada hubungannya dengan membuat aplikasi web. Orang-
orang masih mencari tahu potensi React. Ada ruang untuk dijelajahi.
5. React populer. Meskipun alasan ini tidak banyak terkait dengan kualitas
React, kebenarannya adalah bahwa memahami React akan membuat
Anda lebih mudah dipekerjakan.

Cara Menggunakan React

Untuk menggunakan ReactJs bisa menggunakan secara online yaitu
menyisipkan code :
Library ReactJS diambil langsung dari internet, yang terdiri dari :

1. Library react.js untuk membuat komponen.
2. Library react-dom.js untuk me-render komponen ke dalam HTML.
3. Library babel.js kode Javascript versi ES6 dapat dikenali pada web
browser.
Ketiga library tersebut harus ada, karena saling berkaitan.
Konsep Dasar Reactjs

Pada dasarnya Reacjs hanya melakukan render komponen saat ada data
yang berubah. Seperti namanya “React” ia akan breaksi saat ada
perubahan data (reaktif).
Lalu komponen itu apa?

Komponen adalah bagian-bagian dari UI, contohnya seperti tombol, label,
input, dll. Komponen juga bisa dibentuk dari komponen yang lain.
Langkah-langkah yang harus dilakukan untuk membuat aplikasi react

adalah sebagai berikut:
1. Menyisipkan library react ke HTML;
2. Membuat elemen HTML untuk wadah aplikasi;
3. Membuat komponen;
4. Me-render komponen ke HTML;
Setiap aplikasi react membutuhkan sebuah wadah.
Coba perhatikan contoh berikut.

Kita membuat sebuah elemen div dengan id="app". Setiap komponen yang
kita buat di React akan di-render atau ditampilkan ke dalam div tersebut.
c. AngularJs
AngularJs adalah adalah sebuah framework atau library javascript yang
dikembangkan oleh tim google. AngularJS menggunakan metode MVC
yang membuat spurce code aplikasi menjadi bersih dan mudah digunakan.
Cara instal Angular Js sama seperti library yang lain, yaitu :
a. Download library AngularJs di https://angularjs.org/
b. Kemudian klik Downlload

c. Pada Bulid pilih Zip dan klik download, simpan pada folder project kita
d. Kemudian ekstrak file zip tersebut kemudian ganti rubah nama

foldernya menjadi angular, seperti gambar berikut ini :
e. Ketik code berikut ini dan simpan dengan nama file angular.html :
f. Hasilnya adalah sebagai berikut

a. JQuery
Buatlah folder pada htdocs dengan nama lat_jquery
Latihan 1
1. Download Jquery dan simpan pada folder lat_jquery
2. Kemudian ketik script berikut pada notepad++
Lat1.html
Style.css

b. React Js
Index.js
Index.html

c. AngularJcs
Cara mengambil library AngularJs dari Internet
Event_mouse_over.html
Untuk praktikum selengkapnya dapa dilihat di link

https://www.w3schools.com/react/default.asp
C. Tugas
1. Buatlah form validasi password menggunakan Jquery, ReactJs dan
AngularJs
2. Lengkapi form validasi password dengan menggunakan CSS Bootstrap

Politeknik LP3I Bandung CMS Wordpress
Praktikum 11 & 12
Content Management System Wordpress
CMS merupakan sebuah aplikasi web atau software web yang tujuannya
untuk memudahkan dalam pengelolaan (upload/ edit/ menambahkan, dll)
kontent dalam sebuah Website/blog/aplikasi tanpa harus dibekali pengetahuan
tentang hal-hal bersifat teknis serta tanpa harus memiliki pengetahuan tentang
bahasa pemrogramman web (Abdulloh, 2016).
Berikut adalah beberapa macam CMS yang paling sering digunakan:
1. CMS Wordpress Merupakan sebuah software yang digunakan untuk
membuat Website, baik web pribadi, situs berita dan toko online(E-Commerce).
2. CMS Joomla Merupakan sebuah software yang digunakan untuk membuat
sebuah Website baik itu company profile, personal, Website sekolah hingga
toko online karena joomla dikhususkan untuk membangun Website
yang powerfull.
WordPress merupakan salah satu CMS ( Content Management System ) bersifat open
source yang digunakan untuk membuat website. Sifatnya yang open source membuat
WordPress memiliki banyak komunitas dan dukungan. Karenanya wordpress menjadi
software paling mudah untuk membuat website atau blog yang kuat.
Karena cara penggunaanya yang mudah, WordPress juga dapat digunakan oleh orang
yang kurang memahi pemrograman. WordPress dibuat menggunakan bahasa
pemograman PHP dan MySQL sebagai database. Untuk mendapatkan wordpress kita
dapat mendownloadnya secara gratis melalui website
https://wordpress.org/download/
A. Instal Wordpress
Langkah-langkah untuk menginstal wordpress adalah sebagai berikut :

1. Download wordpress
2. Setelah didownload kemudian diekstrak di folder htdocs xampp
3. Kemudian buka browser dan ketik localhost/wordpress, (apache dan mysql
xampp sudah dijalankan), kemudian pilih bahasa yang diiginkan, dan klik
tombol Continue.
4. Langkah selanjutnya adalah konfigurasi database, klik tombol let’s go
5. Sebelum mengisi konfigurasi database, buka tab baru browser, kemudian ketik
localhost/phpmyadmin, klik menu basisdata / database untuk membuat
database, seperti dibawah ini :

6. Kemudian isi database, username, password, database host sesuai dengan

yang ditampilkan gambar, kemudian klik submit.

7. Klik tombol Run the Instalation
8. Kemudian isi konfiguras website yang akan dibuat, dan klik tombol install
wordpress, Tunggu sampai selesai install wordpress
9. Setelah sukses install wordpres kemudian ketik localhost/wordpress pada tab

baru browser, untuk melihat website front end / user hasil instal wordpress.
Seperti berikut ini.

10. Untuk melihat halaman admin / back end, localhost/wordpress/admin, terus

login dengan username admin dan password yang telah dibuat pada tahap
instal sebelumnnya.

11. Berikut ini halaman admin / back end
B. Mengganti Template Wordpress

1. Login ke halaman admin
2. Kemudian klik menu Appereance, teruk klik themes
3. Kemudian pilih themes yang tersedia pada wordpress, jika ingin menambahkan
koleksi themes maka klik menu Add New untuk menambahkan themes.
C. Kategori dan Posting Wrodpress

Kategori adalah pengelompokkan artikel yang akan dipublish/posting pada web
wordpress yang dibuat. Sebelum melakukan posting artikel harus dibuat terlebih
dahulu kategori, misalnya kita akan membuat artkel tentang website
Kategori : HTML
Judul artikel 1 : Pengertian HTML
Judul artikel 2 : Mengenal Tag, Element dan atribut
Judul artikel 3 : Mengenal heading HTML
Kategori : CSS
Judul artikel 1 : Pengenalan CSS
Judul artikel 2 : Penulisan CSS
Judul artikel 3 : Background CSS
Kategori : JavaScript
Judul artikel 1 : Pengenalan JS
Judul artikel 2 : Penulisan dan Penggunaan JS
Judul artikel 3 : Variabel JS

caranya adalah sebagai berikut :

1. Klik menu Post dan pilih Categories
2. Kemudian isi nama Kategori, misalnya HTML, dimana kita akan membuat
artikel tentang HTML, klik tombol Add Categories.

3. Setelah membuat kategori selanjutnya posting artikel, klik menu Post  Add
New
4. Kemudian isi judul artikel dan konten artikelnya

5. Kemudian pilih kategori artikel HTML, klik tombol publish
6. Kemudian lihat hasilnya di front end

D. Menu Navigasi
Untuk membuat menu navigasi adalah sebagai berikut
1. Klik menu Appearance  Menus
2. Kemudian isi menu name dengan Tutorial HTM dan klik tombol Create Menu
3. Kemudian aktifkan menu tersebut dengan klik tab Manage Location, dan
pada primary Menu pilih Tutorial HTML, dan klik tombol save changes.

4. Kemudian atur menu setting dan pages, klik save menu
5. Pilih menu Categories  pilih HTML  Klik tombol Save Menu untuk
menampilkan menu web

6. Hasilnya adalah sebagai berikut
E. Widget Wordpress
Widget adalah fitur yang terdapat pada wordpress yang akan ditampilkan pada
website yang dibuat. Contohnya : kalender, kotak pencarian, Gallery, dan lain
sebagainya. Berikut ini halaman pengaturan widget

Berikut tampilan fitur widget
F. Tugas Praktikum
Buatlah Website Artikel dengan ketentuan sebagai berikut :
Kategori : HTML
Judul artikel 1 : Pengertian HTML
Judul artikel 2 : Mengenal Tag, Element dan atribut
Judul artikel 3 : Mengenal heading HTML
Judul artikel 3 : Format Teks HTML
Kategori : CSS
Judul artikel 1 : Pengenalan CSS
Judul artikel 2 : Penulisan CSS
Judul artikel 3 : Background CSS
Kategori : JavaScript
Judul artikel 1 : Pengenalan JS
Judul artikel 2 : Penulisan dan Penggunaan JS
Judul artikel 3 : Variabel JS
Kategori : Biodata
Judul Artikel : Biodata penulis

Politeknik LP3I Bandung Hosting dan Domain
Praktikum 13
Hosting dan Domain
A. Hosting
Hosting merupakan sebuah space atau ruang yang digunakan untuk menyimpan
file-file yang ada hubungannya dengan website kita, seperti file HTML, file PHP,
file musik, file video, ataupun gambar. Hosting dapat juga diibaratkan sebagai
Flash disk atau Hard disk, dimana alat tersebut berfungsi sebagai media
penyimpan semua file dan data yang ada di komputer kita. Untuk menghubungkan
domain dan hosting agar dapat bekerja optimal, kita harus mengsinkronkan
nameserver yang ada pada hosting ke domain manager. Berikut ini daftar
penyedia web hosting gratis :
- www.000webhost.com
- www.0fees.net
- www.000Space.com
- www.idhostinger.com
- www.freewebserver.com
B. Domain
Domain adalah sebuah nama unik yang digunakan untuk mempermudah
pengguna mengakses informasi pada server komputer yang ada di jaringan
Internet. Sebelum mengenal istilah domain, untuk mengakses informasi yang ada
pada server komputer digunakan alamat IP Address yang berupa sederetan angka
panjang. Nah, oleh karena itu digunakanlah domain untuk mempermudah
pengguna untuk mengakses informasi yang ada pada server komputer dan
mempermudah pengguna untuk mengingatnya. Indonesia memiliki nama domain
tersendiri yang dikelola langsung oleh PANDI (Pengelola Nama Domain Internet
Indonesia). Domain-domain indonesia meliputi .ac.id, .web.id, .co.id, .net.id, .go.id,
.sch.id, .mil.id, dan .or.id . Domain-domain tersebut mempunyai kegunaan dan
karakeristik yang berbeda.
a. .AC.ID digunakan untuk website perguruan tinggi, institut dan sejenisnya
b. .WEB.ID digunakan untuk website pribadi atau komunitas
c. .CO.ID digunakan untuk website komersial, badan usaha dan sejenisnya
d. .NET.ID digunakan untuk website penyedia jasa telekomunikasi yang berlisensi
e. .GO.ID digunakan untuk website institusi pemerintah dan sejenisnya

f. .SCH.ID digunakan untuk website sekolah

g. .MIL.ID digunakan untuk website instansi militer
h. .OR.ID digunakan untuk website organisasi
Nama domain dapat menunjang kesuksesan dari website Anda. Pemilihan nama
domain yang salah akan berakibat fatal pada situs atau website Anda, website Anda
akan menjadi mati (sepi bahkan tidak ada pengunjung sama sekali). Jadi, sebaik
mungkin Anda dapat memilih nama domain yang sesuai dan menggambarkan
website yang Anda miliki. Nama domain tidak harus panjang, yang pasti harus unik
dan mudah diingat oleh orang lain. Saat ini sudah beredar berjuta-juta website,
jangan sampai domain kesayangan Anda menjadi milik orang lain.
Berikut ini daftar penyedia domain gratis
- http://www.freedomain.co.nr/ [domainanda.co.nr]
- http://www.dot.tk/id/index.html [domainanda.tk]
- http://www.com.nu/ [domainanda.com.nu]
- http://www.uni.me [domainanda.uni.me]
C. Membuat Hosting dan Domain di https://id.000webhost.com/

1. Klik menu tombol Daftar Gratis
2. Kemudian isi email dan password, klik tombol Daftar

3. Lakukan verifikasi Email anda
4. Klik tombol Verifikasi Email

5. Klik tombol Get Started
6. Pilih menu Buat Desain Web

7. Klik menu Lewati
8. Kemudian isi domain dan password web anda

9. Kemudian pilih Upload Website untuk mengunggah file-file web yang akan di
upload ke hostng
10. Berikut tampilan root public_html hosting anda

11. Sebelum diunggah compress terlebih dahulu folder webfun pada folder htdocs,
dalam bentuk zip (harus zip)
12. Selanjutnya klik menu upload, pada pojok kanan atas halaman

13. Kemudian pilih file zip yang akan diunggah, dan klik open
14. Klik tombol upload untuk melakukan proses upload.

15. Hasil upload file webfun.zip
16. Setelah sukses diupload, selanjutnya lakukan ekstrak untuk file zip tersebut,
dengan klik kanan pada file zip, dan plih Extract

17. Tulis nama folder yang diinginkan, dan klik tombol extract
18. Hasil dari extract file zip

19. Untuk mengakses folder tersebut ketik https://nama_domain_anda/nama_foldernya

contohnya : https://tbriko-webfun.000webhostapp.com/webfun/
D. Tugas Praktikum

Politeknik LP3I Bandung Daftar Pustaka
Daftar Pustaka
Buku Pintar Pemrograman HTML 5 untuk Pemula, Mediakom

Bootstrap CSS Framework, Penulis: Roberto Kaban, andi publisher
JavaScript Uncover – Panduan Belajar JavaScript untuk Pemula, Penulis: Andre
Pratama, Duniailkom
Mengenal Pemrograman ReactJS, Penulis Jubilee Enterprise, Elex Media
Ariona, Rian. 2013. Tutorial fundamental dalam mempelajari HTML & CSS. Ebook
(ariona.net).
http://achmatim.net/
http://blog.rosihanari.net/
www.malasagoding.com
www.w3schools.com

Modul Web Fundamental2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Web Fundamental2

Diunggah oleh

Hak Cipta:

Format Tersedia

Politeknik LP3I Bandung Kata Pengantar

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

RENCANA PEMBELAJARAN SEMESTER (RPS)

CPMK (Capaian Pembelajaran Mata Kuliah)

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

Bahan Kajian / 1. Konsep Website

Daftar Referensi Utama:

Nama Dosen Tubagus Riko Rivanthio, M.Kom.

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

Bentuk dan Penilaian

(1) (2) (3) (4) (5) (6) (7) (8) (9)

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

5-6 1. Mampu 3. Pengenalan Bentuk: Bentuk: 1. Mengaplikasikan 1. Webiste 1. Ketepatan 5%

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

8 1. Mampu 1. Pengenalan Java Bentuk: Bentuk: 1. Mengaplikasikan 1. Webstite 1. Ketepatan 5%

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

4. 70 Menit 3. Mengaplikasikan 2. Ketepatan

9 - 10 Mampu 1. Jquery Bentuk: Bentuk: 1. Mengaplikasikan 1. Website 1. Ketepatan 5%

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

menggunakan 4. Latihan Soal 1. 15 menit

13 1. Memahami 1. Hosting Bentuk: Bentuk: 1. Mendaftarkan akun 1. Akun 1. Memiliki akun 5%

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

membuat Javascript Tugas Mandiri Praktikum yang menggunakan Bootstrap, 2. Mampu

Ujian Akhir Semester 20%

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

Konsep Dasar Web dan Pengenalan HTML......................................................................................................1

Cascade Style Sheet (CSS) ..............................................................................................................................18

Library Javascript (JQuery, React, Angularjs) .................................................................................................54

Content Management System Wordpress ....................................................................................................63

Hosting dan Domain ......................................................................................................................................77

Daftar Pustaka ...........................................................................................................................................88

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom.

A. Konsep Dasar Web

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 1

Gambar 1.1. Arsitektur Web

Gambar 1.2. Cara kerja HTTP

a. Client Side Programming

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 2

oleh dokumen yang menggunakannya. Atas sebuah request, file yang

b. Server Side Programming

c. Web Server Software

d. Instalasi Web Server Xampp

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 3

 Kemudian Install Xampp yang sudah didownload

e. Folder penyimpanan file PHP

Folder yang perlu diperhatikan :

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 4

htdocs : Folder tempat penyimpanan file-file PHP (website)

Adapun tampilan dari notepad++ adalah sebagai berikut :

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 5

Elemen ini merupakan istilah bagi komponen- komponen dasar pembantuk

Struktur dasar dari dokumen HTML adalah sebagai berikut :

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 6

<body bgcolor =”red”>

Maka latar belakang/background web akan berwarna merah.

a. Tag Pengaturan Teks

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 7

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 8

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 9

digunakan adalah <form> </form>. Di antara kedua tag tersebut,

Perintah umum tag form adalah

<form name=”namaform” method="jenismethod"

Ada beberapa jenis elemen form yang dapat digunakan diantaranya :

Disusun Oleh : Tubagus Riko Rivanthio, M.Kom. 10