LAPORAN PRAKTIKUM PEMROGRAMAN WEB

“Pembuatan Desain Web Responsive Menggunakan Bootsrap”

Laporan ini disusun sebagai bukti hasil praktikum Pemrograman Web I

Ditulis oleh:
Delina Widiyanti H1101181011

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

JURUSAN SISTEM INFORMASI
UNIVERSITAS TANJUNGPURA
2019
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas
selesainya laporan makalah ini yang berjudul “Pembuatan Desain Web Responsive
Menggunakan Bootstrap”. Atas dukungan materi dan moral yang diberikan dalam
penyusunan makalah ini, maka penulis mengucapkan banyak terima kasih kepada
Bapak Syahru Rahmayuda, S.Kom,.M.Kom, selaku dosen pengampu mata kuliah
Pemrograman Web I yang telah memberikan bimbingan serta ilmunya untuk
mengajarkan saya dalam mempelajari matakuliah ini.

Penulis menyadari bahwa laporan ini belumlah sempurna. Olehkarena itu,

saran dan kritik yang membangun dari rekan-rekan sangat dibutuhkan untuk
penyempurnaan makalah ini.

Pontianak, 16 Desember 2019

Delina widiyanti
 DAFTAR ISI

HALAMAN JUDUL ...................................................................................................... 1

KATA PENGANTAR ................................................................................................... 2
BAB I ................................................................................................................................ 4
PENDAHULUAN .......................................................................................................... 4
1.1 Latar Belakang ....................................................................................................... 4
1.2 Ruang Lingkup Praktikum ................................................................................... 5
1.3 Tujuan dan Manfaat .............................................................................................. 5
BAB II .............................................................................................................................. 6
ISI ...................................................................................................................................... 6
2.1 Landasan Teori ...................................................................................................... 6
2.2 Tampilan Desain Web Responsive Menggunakan Bootstrap ............................ 8
BAB III .......................................................................................................................... 13
PENUTUP ..................................................................................................................... 13
3.1 Kesimpulan dan saran .......................................................................................... 13
DAFTAR PUSTAKA .................................................................................................. 14
 BAB I

PENDAHULUAN

1.1 Landasan Teori

Di era disrupsi teknologi informasi saat ini, website merupakan sarana
pemasaran dan branding produk yang efektif. Website memiliki posisi seperti
lapak, gerai atau kantor digital dari usaha Anda. Website adalah alamat digital,
di mana calon pelanggan bisa menilai seberapa profesional usaha yang Anda
jalankan. Bagi sebagian orang, website merupakan investasi yang mewah.
Bahkan bagi mereka yang cukup melek teknologi, membuat website seakan
mustahil, Kondisi itu diperparah dengan simpang-siurnya informasi tentang
website. Ada yang bilang membuat website itu mahal dan susah. Ada yang
bilang membuat website harus menguasai skill pemrograman, dan seterusnya,
dan seterusnya. Walhasil, tidak sedikit pengusaha yang akhirnya lebih memilih
memasarkan produknya secara offline karena minimnya pengetahuan akan
website. Namun, saat ini website berkembang sangat pesat dan pembuatannya
semakin mudah kita dapat menggunakan framework dalam membuat sebuah
website agar tampilannya menjadi bagus dan responsive.
Untuk membuat aplikasi atau pemrograman web akan membutuhkan
sebuah framework agar dalam proses koding lebih mudah. Framework adalah
sebuah software untuk memudahkan para programer untuk membuat sebuah
aplikasi web yang di dalam nya ada berbagai fungsi diantaranya plugin, dan
konsep untuk membentuk suatu sistem tertentu agar tersusun dan tersetruktur
dengan rapih.
Bootstrap merupakan salah satu Front-End framework paling populer saat
ini. Sejak dirilis secara resmi pada tahun 2011, Bootstrap telah mengalami
beberapa perubahan, dan sekarang menjadi salah satu framework yang paling
stabil dan responsif. Bootstrap dilengkapi dengan banyak CSS dan komponen
Javascript yang dapat digunakan untuk membantu mencapai fungsionalitas
yang dibutuhkan di hampir semua jenis situs web dan saat ini bootstrap menjadi
salah satu front-end framework yang paling banyak digunakan di dunia.
1.2 Ruang Lingkup Praktikum
Dalam praktikum ini saya memaparkan hasil pembuatan desain web
responsive dengan menggunakan framework bootstrap dimana terdapat lima
halaman di dalam sebuah website tersebut yang diawali dengan landing pages.
1.3 Tujuan dan Manfaat
Tujuan Praktikum:
• Mahasiswa dapat memahami fungsi framework.
• Mahasiswa dapat menggunakan framework bootstrap.
• Mahasiswa dapat membuat web responsive.
• Mahasiswa dapat membuat landing pages.
Manfaat Praktikum:
• Mahasiswa dapat mengetahui fungsi framework untuk pembuatan web.
• Mahasiswa dapat mengetahui class-class CSS dan Plugin Javascript
yang terdapat pada framework bootstrap.
• Mahasiswa dapat mengetahui cara membuat web yang responsive.
• Mahasiswa dapat mengetahui cara membuat landing pages.
 BAB II

ISI

2.1 Landasan Teori

A. Pengertian Web
Situs web (bahasa inggris: website) adalah sekumpulan halaman
web yang saling berhubungan yang umumnya berada pada peladen yang
sama berisikan kumpulan informasi yang disediakan secara perorangan,
kelompok, atau organisasi. Sebuah situs web biasanya ditempatkan
setidaknya pada sebuah server web yang dapat diakses melalui jaringan
seperti internet, ataupun jaringan wilayah lokal (LAN) melalui alamat
Internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat
diakses publik di Internet disebut pula sebagai World Wide Web atau lebih
dikenal dengan singkatan WWW. Meskipun setidaknya halaman beranda
situs Internet umumnya dapat diakses publik secara bebas, pada praktiknya
tidak semua situs memberikan kebebasan bagi publik untuk mengaksesnya,
beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran
sebagai anggota, atau bahkan meminta pembayaran untuk dapat menjadi
aggota untuk dapat mengakses isi yang terdapat dalam situs web tersebut,
misalnya situs-situs berita, layanan surel (e-mail), dan lain-lain.
B. Desain Web responsive
Desain Web Responsif (Bahasa Inggris: Responsive Web Design
(RWD)) adalah sebuah metode atau pendekatan sistem web desain yang
bertujuan memberikan pengalaman berselancar yang optimal dalam
berbagai perangkat, baik mobile maupun komputer meja. Dengan metode
ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil
maupun perangkat komputer meja dengan ukuran monitor
besar. Ukuran huruf, Interface, gambar dan tata letak akan menyesuaikan
dengan lebar layar dan resolusi layar monitor yang tersedia. Hasilnya
pengguna akan merasakan pengalaman mudah membaca, nyaman dan
 melihat informasi web tersebut sama dengan jika ia melihat melalui
perangkat komputer meja.
C. framework
Framework adalah sebuah software untuk memudahkan para
programer untuk membuat sebuah aplikasi web yang di dalam nya ada
berbagai fungsi diantaranya plugin, dan konsep untuk membentuk suatu
sistem tertentu agar tersusun dan tersetruktur dengan rapi. Dengan
menggunakan framework bukan berarti kita akan terbebas dengan
pengkodean. Karena kita sebagai seorang pengguna framework haruslah
menggunakan fungsi – fungsi dan variable yang ada di dalam sebuah
framework yang kita gunakan.
D. Bootstrap
Bootstrap adalah open-source framework (kerangka kerja
pemrograman) front-end (library) yang bebas (gratis) untuk merancang situs
web dan aplikasi web. Frame work ini berisi template desain
berbasis HTML dan CSS untuk Tipografi, formulir, tombol, navigasi dan
komponen antarmuka lainnya, serta juga ekstensi opsional Javascript. Tidak
seperti kebanyakan framework web lainnya, framework ini hanya fokus
pada pengembangan front-end saja.
E. Javascript
Bootstrap dilengkapi dengan beberapa komponen JavaScript dalam
bentuk plugin jQuery. Mereka menyediakan tambahan elemen antarmuka
untuk pengguna seperti kotak dialog, tooltips, dan 'carousels'. Mereka juga
memperluas fungsi dari beberapa elemen antarmuka yang sudah ada,
termasuk misalnya sebuah fungsi auto-complete untuk bidang input. Di
versi 1.3, plugin JavaScript berikut ini disupport oleh Bootstrap: Modal,
Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse,
Carousel dan Typeahead.
F. landing pages
Landing page adalah page di website Anda di mana pengunjung
landing atau mendarat saat mereka sedang berlalu lintas dari website
manapun selain website Anda tersebut. Landing page ini adalah halaman
 berikut yang akan dilihat oleh visitor setelah ia klik link yang terkait dengan
page Anda. Link tersebut tentunya merupakan link yang diharapkan natural
link yang berkaitan dengan bisnis atau konten Anda.

2.2 Tampilan Desain Web Responsive Menggunakan Bootstrap

Tampilan web pada halaman landing pages

Tampilan web pada halaman About Me

Tampilan web pada halaman Gallery

Tampilan web pada halaman Hobby

Tampilan web pada halaman login
 BAB III

PENUTUP

3.1 Kesimpulan dan saran

Bootstrap merupakan kumpulan library yang digunakan untuk membangun

situs website kususnya dari segi tampilan depan (front end). Bootstrap terdiri atas
komponen HTML, CSS, SCSS maupun javscript. Framewok bootstrap dalam
pengembangannya biasanya bersamaan dengan plugin jquery untuk mendukung
tampilan lebih dinamis. Bootstrap mengalami pengembangan dari waktu ke waktu,
yang dulu nya hanya sebuah text dan gambar saja sampai sekarang sudah
mendukung multimedia dan animasi yang lebih menarik untuk digunakan. Selain
itu website yang dibangun menggunakan bootstrap mempunyai desain yang
responsif yang artinya ukuran tampilan akan menyesuaikan terhadap platform yang
digunakan untuk mengakses.

Namun, saat ini hampir sebagian besar pengembang aplikasi khusus

berbasis website menggunakan framewok botstrap, karena dalam pengembangan
website pengemang tidak perlu membuat tampilan satu persatu dengan CSS mapun
JS, namun hanya dengan menyisipkan class maupun id komponen bootstrap maka
tampilan akan menyesuakan. Apabila ingin merubah sedikit tampilannya dapat
memberikan penambah secara bebas/custom.
 DAFTAR PUSTAKA

https://idcloudhost.com/mengenal-apa-itu-framework-beserta-jenisnya/

https://id.wikipedia.org/wiki/Bootstrap_(framework_front-end)

https://id.wikipedia.org/wiki/Desain_web_responsif

https://id.wikipedia.org/wiki/Situs_web