Adi prasetya 1511510370 tugas2

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

Transcript of Adi prasetya 1511510370 tugas2

Page 1: Adi prasetya 1511510370 tugas2

UNIVERSITAS BUDI LUHUR

NAMA : ADI PRASETYA

NIM : 1511510370

KEJURUAN : FTI (Fakultas Teknik Informatika)

TUGAS : Tugas2 Individu Rekayasa Web

Page 2: Adi prasetya 1511510370 tugas2

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

Page 3: Adi prasetya 1511510370 tugas2

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.

Page 4: Adi prasetya 1511510370 tugas2

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.

Page 5: Adi prasetya 1511510370 tugas2

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

Page 6: Adi prasetya 1511510370 tugas2

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.

Page 7: Adi prasetya 1511510370 tugas2

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.

Page 8: Adi prasetya 1511510370 tugas2

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.

Page 9: Adi prasetya 1511510370 tugas2

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.

Page 10: Adi prasetya 1511510370 tugas2

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.

Page 11: Adi prasetya 1511510370 tugas2

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

Page 12: Adi prasetya 1511510370 tugas2

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.

Page 13: Adi prasetya 1511510370 tugas2

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.