Teks tersebut membahas tentang responsive web design, bootstrap, dan indexing dalam database. Responsive web design memungkinkan tampilan website disesuaikan dengan berbagai ukuran layar perangkat, sedangkan bootstrap adalah framework untuk membangun desain web secara responsif. Indexing dalam database berfungsi untuk menemukan data secara efisien tanpa harus menelusuri seluruh tabel."

1. UNIVERSITAS BUDI LUHUR
NAMA : ADI PRASETYA
NIM : 1511510370
KEJURUAN : FTI (Fakultas Teknik Informatika)
TUGAS : Tugas2 Individu Rekayasa Web

2. Pengertian WEB-RESPONSIVE
Pengenalan
Sekarang banyak orang melakukan aktivitas online melalui device SmartPhone, seperti update status,
upload gambar, dan tidak terkecuali mengakses sebuah website. Dengan keadaan yang seperti ini, mau
tidak mau kita sebagai pemilik website harus memiliki website yang bisa diakses melalui device
SmartPhone tersebut. Bagi yang menggunakan CMS seperti WordPress mungkin sudah tersedia
pluginnya, tapi bagaimana dengan yang membuatnya dari awal atau nol atau menggunakan CMS yang
belum tersedia plugin mobile tersebut? Tentunya harus membuat ulang websitenya dalam bentuk mobile
bukan. Lalu bagaimana solusinya? Nah dengan hadirnya teknologi Responsive ini, kita hanya perlu
menggunakan satu design saja untuk berbagai device yang ada. Ini adalah cara terbaik jika kita malas
untuk mendevelop ulang website kita agar sesuai dengan mobile device.
Apakah itu RESPONSIVE DESIGN?
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website
menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan
yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan
berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik
Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun
cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah
dapat melihat tampilan website kita pada layar mobile device.
Kelebihan dan Kekurangan
Teknik ini sudah mulai banyak digunakan dikalangan web desainer luar maupun lokal dan memiliki
beberapa keuntungan, salah satunya adalah penghematan penggunaan sub domain, yang tadinya kalau
mengakses harus menggunakan kata “mobile” atau “m” didepan domainnya, sekarang cukup dengan
mengetik nama domainnya saja dan tampilan akan menyesuaikan dengan device yang digunakan.
Keuntungan yang paling utama tentu saja dapat mengurangi jumlah development menjadi satu saja untuk
dipakai semua devices. Lalu kelemahan dari teknik ini adalah jika digunakan pada website yang bertujuan
untuk menampilkan gambar saja, seperti website fotografi misalnya. Resource gambar yang diload oleh
device kita akan sama dengan yang diload dikomputer kita. Untuk itu kita perlu memperhatikan apakah
website yang kita buat cocok untuk dipakaikan teknik Responsive ini.
Kesimpulan
Teknik Responsive memang bagus digunakan untuk optimasi layout sebuah website. Namun
penggunaanya pun harus disesuaikan dengan tipe websitenya sendiri, apakah akan “cocok” bila

3. digunakan teknik ini pada website tersebut. Untuk website yang bertujuan hanya untuk menampilkan
gambar seperti website fotografi, lebih baik membuat versi mobile-nya saja, agar tidak memakan resource
yang terlalu banyak. Demikian tutorial singkat mengenai Responsive Web Design, semoga bermanfat.
Pengertian Bootstrap
Apa Itu Bootstrap?
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan
untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan
website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Untuk Apa itu bootstrap?
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web
yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di
desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan
keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender
oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan
bootstrap kita juga bisa membangun web dinamis ataupun statis.

4. Contoh web yang menggunakan bootstrap
1. Desain Web – HBO NOW
HBO NOW, menggunakan sistem grid, responsive, diset satu halaman penuh. Jika Anda scroll ke bawah
akan tampil sistem navigasi fixed-width. Situs ini terlihat tidak memakai banyak halaman, cukup satu
halaman saja dengan informasi yang singkat, padat dan jelas. Warna hitam diset pada backgroundnya.
Saya sangat tertarik dengan slide pada menu “What You Get”, jika diarahkan pada salah satu baris dari
ketiga slide akan otomatis terhenti yang lain tetap berjalan.

5. 2. Desain Web – Egelnick + Webb
Egelnick + Webbm, pada halaman depannya ditampilkan slide dengan full width dan menu navigasi
ditetapkan dengan fixed-width dengan warna background putih begitu juga background body-nya. Di
bawah slide mulai dibuat tampilan sistem grid dengan 2 kolom dan 3 kolom. Situs ini memadukan
framework Bootstrap dengan Platform CMS WordPress.
3. Desain Web – UENO

6. UEONO, menampilkan situs yang full-width dengan menyuguhkan sebuah desain responsive yang
sederhana tetap menawan. Sistem navigasi menggunakan button di sebelah kanan tanpa Anda
memerlukan bantuan mouse untuk scroll ke bawah, pilih tombol saja langsung ke halaman yang dituju.
Jika dijadikan inspirasi untuk projek desain web untuk korporasi sangat cocok.
4. Desain Web – Swipe
Swipe, memadukan WordPress dan Bootstrap menampilkan halaman depan satu halaman penuh. Scroll
ke bawah Anda akan menemukan sistem grid begitu pula pada halaman blog dan FAQ sudah diset sistem
grid fluid dan responsive.

7. 5. Desain Web – Woodies Clo.
Woodies Clo., tanpa menggunakan space atau padding yang nampak di halaman depannya. Header
dengan menu navigasi diset fixed-width, di bawahnya dibuat carousel slide full-width. Nah, penggunaan
sistem grid di sekitar tiga baris dengan dua kolom zig-zag terlihat sangat unik. Dan memakai 4 kolom
untuk bagian footer. Dengan desain responsive memakai framework Bootstrap dipadukan opens source
cms WordPress.

8. 6. Desain Web – PARTY
PARTY, dengan tampilan desain responsive yang sederhana di halaman depannya tetapi pada slidenya
mereka memadukan animasi dan video sehingga terlihat sangat unik dan elegan. Sehingga situs ini
terlihat hidup dan menarik untuk selalu dilihat. Pada menu navigasi dibuat fixed navbar. Jika Anda buka
menu work yang terlihat sistem grid yang sangat menakjubkan, di menu ini mereka menampilkan projek-
projek yang pernah mereka lakukan.

9. 7. Desain Web – New Relic
New Relic, ketika saya mengunjungi situs ini pertama yang saya perhatikan adalah pada posisi menu
navigasinya. Nah, jika discroll ke bawah nampak menu navigasi seperti menggunakan fixed navbar tetapi
jika dihitung beberapa pixel ke bawah berubah menjadi fixed top navbar. Setelah scroll ke bawah
memang navbar tidak terlihat tapi ketika discroll ke atas sedikit saja akan muncul navbarnya. Bagi saya
ini sangat bagus sekali penggabungan dua jenis navbar antara static top navbar dan fixed navbar. Secara
keseluruhan halaman depannya menggunakan full width tanpa sidebar, dan beberapa posisi dipakai grid
system untuk memisahkan setiap bagiannya dalam satu baris desain.

10. 8. Desain Web – Andrew McWatters
Andrew McWatters, situsnya tidak seperti kebanyakan desain web responsive yang lain. Yang punya
sekaligus seorang developer dan desainer menampilkan kesederhanaan desain webnya. Di situs ini hanya
menonjolkan satu warna saja diliputi dengan background berupa titik-titik grid, menggunakan properti
grid-flicker. Setiap kali berpindah ke menu yang lain, background tetap sama yang ditampilkan. Saya
tertarik dengan penggunaan desain pada menu WIWO, coba Anda klik saja langsung. Box content yang
ditampilkan memang biasa tapi ketika akan ditampilkan pada satu sisi box nya digunakan properti
transition untuk pergerakan waktunya dan properti transform untuk perubahan pada box-nya.

11. 9. Desain Web – Avery & Austin
Avery & Austin, menerapkan fixed navbar sedikit memberikan sentuhan pada posisi logo. Setiap
halaman situs ini diset full width dengan warna background putih. Di halaman depan situs ini ada
integrasi menarik yang diterapkan dengan sistem grid untuk menampilkan gambar dengan media sosial
instagram.
10. Desain Web – Dayafterday

12. Dayafterday, nampak desain web responsive ini seperti biasa-biasa saja, di halaman depan situs ini hanya
menampilkan menu navigasi, judul situs, tagline situs dan tombol untuk sign up. Di bawah bagian
footernya ditambahkan player musik dengan beberapa playlist yang ditampilkan. Tampilan desain pada
halaman about, akan muncul keunikannya. Pada awal mengunjungi laman about, tidak terlihat
perbedaannya tapi ada tombol yang “scroll to explore”, nah muncul yang menjadi pembeda dari situs ini,
seperti dibawa ke tiap halaman dengan desain yang unik dan menakjubkan.
Pengertian Indexing dalam database
Indeks dalam database serupa dengan indeks dalam buku. Di suatu buku, satu indeks memungkinkan
anda untuk menemukan informasi dengan cepat tanpa membaca seluruh buku. Di suatu database, indeks
memungkinkan program database menemukan data di suatu tabel tanpa menelusuri seluruh tabel. Satu
indeks di suatu buku adalah daftar kata-kata dengan angka-angka halaman berisi masing-masing kata.
Satu indeks di suatu database adalah daftar data tertentu dari tabel dengan lokasi penyimpanan baris
dalam tabel berisi masing-masing nilai. indeks dapat diciptakan dimanapun suatu kolom atau suatu
kombinasi dari kolom di suatu tabel dan diterapkan dalam wujud B-trees. Satu indeks berisi masukan
dengan satu atau lebih kolom (kunci pencarian) dari masing-masing baris di suatu tabel. B-tree disortir di
kunci pencarian, dan dapat dicari secara efisien di setiap subset yang terdepan dari kunci pencarian.
Sebagai contoh, satu indeks di kolom A, B, C dapat dicari secara efisien di A, A,B, dan A, B, C.Sebagian
besar buku berisi satu indeks dari kata-kata umum, nama, tempat, dan seterusnya. Database berisi indeks
yang individu untuk jenis atau kolom yang terpilih dari data: ini serupa dengan sebuah buku yang berisi
indeks untuk nama dari orang dan indeks lain untuk tempat. Ketika anda membuat suatu database dan
menadaptkan kinerja, anda perlu membuat indeks untuk kolom yang digunakan di dalam query untuk
menemukan dataDalam contoh database, tabel karyawan mempunyai satu indeks di kolomemp_id.
Ilustrasi yang berikut menunjukkan bagaimana indeks menyimpan masing-masing nilai emp_id dan poin-
poin ke baris Ketika aplikasi database melaksanakan suatu statemen untuk menemukan data dalam tabel
karyawan berdasar suatu nilai emp_id yang ditetapkan, mengenali indeks untuk kolom emp_id dan
menggunakan indeks itu untuk menemukan data. Jika indeks tidak ada, melaksanakan suatu permulaan
scan tabel yang penuh pada awal tabel dan melangkah melalui masing-masing baris, mencari-cari nilai
emp_id yang ditetapkan.

13. Aplikasi database secara otomatis membuat indeks untuk jenis tertentu dari batasan (sebagai contoh,
KUNCI UTAMA dan batasan UNIQUE ). Anda dapat lebih lanjut menyesuaikan definisi-definisi tabel
dengan menciptakan indeks yang tidak terikat pada batasan. Manfaat kinerja dari indeks, bagaimanapun,
memerlukan biaya. Tabel dengan indeks memerlukan lebih banyak ruang(space penyimpanan dalam
database. Juga, perintah agar sisipan, pembaruan, atau penghapusan data mengambil lebih panjang dan
memerlukan lebih banyak waktu proses untuk memelihara indeks. Ketika anda mendisain dan membuat
indeks, anda perlu memastikan bahwa kinerja bermanfaat bagi berberapa lebih (dibanding) biaya
tambahan dalam ruang(space penyimpanan dan memproses sumber daya.
Pengertian JSON
JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis
oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat
berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 - Desember
1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena
menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#,
Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa
pertukaran-data.