Yuk dilihat!!

Ada Materi tentang Pemograman Internet loh disini.
Framework adalah bentuk dasar struktur konseptual yang dapat digunakan sebagai “awal” untuk mengerjakan proyek web. Misalnya, mendefinisikan ulang secara global, dasar yang konsisten, pengaturan tipografi atau gaya standar untuk bentuk berulang-ulang setiap kali mengerjakan proyek web baru. Dengan memanfaatkan Framework, Anda dapat mempersiapkan default-style sekali dan menggunakan kembali dalam semua proyek web masa depan. Ini yang disebut sebagai kerangka CSS (CSS Framework).

CSS Famework merupakan kumpulan library dokumen CSS yang digunakan untuk membuat pengembangan halaman web yang lebih standar, cepat dan tidak rumit dalam bahasa Cascading Style Sheet (CSS). CSS Framework biasanya menyediakan CSS style untuk mengatur tipografi (typography), tata letak (layout) – umumnya dalam sistem grid, serta menata ulang browser.


Dalam dunia desain web, untuk memberikan definisi yang lebih sederhana, Framework didefinisikan sebagai paket terdiri dari struktur file dan folder kode standar (dokumen HTML, CSS, JS, dan lain-lain) yang dapat digunakan untuk mendukung pengembangan website, sebagai dasar untuk mulai membangun sebuah situs.
“[Framework is] a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” [Framework For Designers, by Jeff Croft].
Pada dasarnya ada 2 jenis Framework untuk membedakan yaitu backend dan frontend. Perbedaan ini diambil bergantung pada kerangka tersebut lapisan presentasi (presentation layer) atau lapisan aplikasi/logis (application/logic layer).
framework-layer
KENTUNGAN
  • Meningkatkan produktifitas dan menghindari kesalahan umum. Jika Anda mengembangkan beberapa situs yang sifatnya sama, sebuah abstraksi dari kode CSS secara dramatis dapat mempercepat produktifitas Anda, membantu untuk menghindari kesalahan secara umum dan menyederhanakan manajemen kode CSS.
  • Menormalkan basis kode/klas. Anda memiliki kode default CSS dan markup XHTML sehingga akan selalu menggunakan ID dan nama kelas yang sama dalam proyek Anda. Konsistensi kode pada seluruh proyek sehingga mempermudah bagi Anda dan menjaga situs web tanpa menggali ke dalam sumber kode dari setiap proyek yang pernah dilakukan
  • Memiliki alur kerja yang lebih baik dalam tim. Jika CSS Framework didokumentasikan dengan baik, dapat digunakan dalam sebuah tim sebagai common ground-up, sehingga dapat menghindari kesalahpahaman dan memastikan alur kerja secara optimal. Hasil terakhir dalam menghindari kesalahan dan membantu Anda untuk memenuhi tenggat waktu tanpa mengorbankan kualitas produk dan tanpa biaya mahal
  • Browser yang kompatibel secara optimal. CSS Framework disebut sebagai “bulletproof”, sehingga Anda tidak perlu khawatir tentang masalah kompatibilitas browser dan bisa segera mulai coding
  • Memiliki kode yang bersih, baik, terstruktur dan lengkap. CSS Framework menyediakan dengan dasar pemikiran dengan baik untuk situs Anda, menggunakan styling dasar dari semua tag html – elemen yang Anda akan merasa perlu untuk gaya dari awal proyek Anda.
KERUGIAN
  • Perlu waktu untuk memahami Framework. Dibutuhkan untuk memahami arsitektur dari Framework jauh melampaui tugas kasar coding dari awal
  • Membutuhkan keakraban yang erat dengan arsitektur kode Anda. Menggunakan CSS Framework eksternal, Anda masih perlu pemahaman yang mendalam tentang kode Anda. Anda perlu mengetahui persis bagaimana kerangka kerja Anda benar-benar dibangun. “Dengan membangun sebuah situs dari bawah ke atas, Anda mendapatkan pengetahuan tentang arsitektur situs Anda yang tidak bisa dipelajari melalui studi atau dokumentasi”
  • Mungkin mewarisi bug atau kesalahan seseorang. Jika Anda menggunakan CSS Frameworks eksternal Anda mungkin mendapat masalah untuk memperbaiki bugs orang lain yang jauh lebih memakan waktu daripada memperbaiki bug Anda sendiri
  • Mengembangkan situs pada kerangka kerja, bukan pada pengetahuan yang solid CSS. Masalah besar dengan Framework adalah ketika sudah naik dan datang pengembang yang menempelkan pada Framework yang bertentangan dengan kode tersebut
  • Mendapatkan kode sumber yang membengkak. Apakah itu dalam kerangka bahasa pada sisi server atau JavaScript library, sering muncul persentase besar dari kode yang tidak akan pernah dieksekusi. Meskipun sisi server utama tidak menjadi masalah, namun hal ini dapat menurunkan kinerja kerangka sisi klien seperti JavaScript library
  • CSS tidak dapat dibingkai semantik. CSS dan (X) HTML berjalan beriringan. (X) HTML adalah bahasa semantik di alamnya, yang tidak mungkin untuk membungkus dalam gaya kerangka. Kerangka CSS pasif menghilangkan sebagian besar dari nilai semantik dari markup dokumen dan ini harus dihindari
  • Mengabaikan keunikan proyek Anda. Desain harus didasarkan pada konten, bukan pada template standar yang Anda gunakan berulang-ulang.
Kali ini saya akan membahas tentang Form dan Table pada HTML sebagai tugas review mingguan.

Form
Form adalah kolom yang berfungsi untuk mengumpulkan informasi dari blog / website kita. Misalnya informasi untuk login, register, search, dll.
Contoh form: 
formfacebook
Pada halaman utama facebook terdapat 2 form, form login dan form register.
Contoh script untuk membuat form dengan informasi yang diminta Nama, Alamat, Jenis Kelamin, Nomor Telepon, Profesi, dan Hobi:
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="#" method="post">
Nama:<br />
<input type="text" name="nama" /><br />
Alamat:<br />
<textarea cols="60" rows="5"></textarea><br />
Jenis kelamin:<br />
<input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan<br />
Nomor telepon:<br />
<input type="text" name="nhp" /><br />
Pekerjaan:<br>
<select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select>
<br />
Hobi:<br />
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
Hasilnya akan seperti dibawah ini.
Nama:

Alamat:

Jenis kelamin:
Laki-laki Perempuan
Nomor telepon:

Pekerjaan:

Hobi:
Mancing Membaca Musik Sport
 

Keterangan:
- Pada atribut action, digunakan "#" karena action ke halaman pemroses belum tersedia, biasanya ditulis dengan bahasa .php
- Pada atribut method dapat dipilih metode "post" ataupu "get". Namun terdapat perbedaan antara keduanya, jika menggunakan metode "get" maka informasi yang dipakai akan tampil di address bar. Namun apabila menggunakan metode "post" maka informasi tidak di tampilkan di address bar.

Table
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Contoh script tabel:
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table width="400" border="1">
  <tr>
    <td width="112">Nama</td>
    <td width="21">:</td>
    <td width="245">&nbsp;</td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td>:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Jenis kelamin</td>
    <td>:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Nomor telepon</td>
    <td>:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Pekerjaan</td>
    <td>:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Hobi</td>
    <td>:</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
Hasilnya akan seperti dibawah ini.
Nama: 
Alamat: 
Jenis kelamin: 
Nomor telepon: 
Pekerjaan: 
Hobi: 

Keterangan:
- Tag <tr> adalah table rows
- Tag <td> adalah table data

Kolaborasi Form dan Table
Banyak orang mengkombinasikan fungsi dari table untuk merapikan form. Dan berikut ini adalah script kombinasi keduanya.
<html>
<head>
<title>Form & Table</title>
</head>
<body>
<form action="#" method="post">
<table width="647" border="0">
  <tr>
    <td width="209">Nama</td>
    <td width="10">:</td>
    <td width="421"><input type="text" name="nama" /></td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td>:</td>
    <td><textarea cols="60" rows="5"></textarea></td>
  </tr>
  <tr>
    <td>Jenis kelamin</td>
    <td>:</td>
    <td><input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan</td>
  </tr>
  <tr>
    <td>Nomor telepon</td>
    <td>:</td>
    <td><input type="text" name="nhp" /></td>
  </tr>
  <tr>
    <td>Pekerjaan</td>
    <td>:</td>
    <td><select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select></td>
  </tr>
  <tr>
    <td>Hobi</td>
    <td>:</td>
    <td>
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport</td>
  </tr>
</table>
</form>
</body>
</html>
Dan hasilnya akan seperti:
Nama:
Alamat:
Jenis kelamin:Laki-laki Perempuan
Nomor telepon:
Pekerjaan:
Hobi:Mancing Membaca Musik Sport

Keterangan:
- Value dari atribut border pada tag <table> dapat diganti - ganti. Agar border tidak terlihat, gunakan 0.

Cukup sekian info hari ini. Terima kasih.