Membuat Template Bootstrap Tanpa Coding 2 Menit

Jika kalian sudah berkecimpung dalam dunia coding website terlebih seorang desainer web pasti sudah akrab dengan yang namanya template website. Karena pekerjaan utama seorang desainer web (yang saya tahu) adalah membuat desain-desain template. Tidak mungkin kita menggunakan satu template untuk berbagai website yang kebutuhan dan fungsi-nya beragam. Untuk itulah, diperlukan sorang desainer web yang handal guna menyesuaikan template suatu web dengan fungsinya.

Ngomong-ngomong, template itu apa sih? Ada yang tahu?

Mungkin agak susah ya? Atau ada yang tahu tapi tidak bisa jelasinnya? Itu mah sama aja. So, template web adalah tampilan web (that's my opinion). Kalau tidak yakin dengan jawaban saya, silahkan tanya mbah google.

Jadi inget waktu awal-awal belajar html. Waktu disuruh buat layout sederhana pake tabel, terus buat layout pake div ama css, disuruh buat form, setelah beberapa lama belajar css kemudian disuruh buat website statis tentang diri sendiri. Masih ingatkah dengan masa-masa itu? Nostalgia, stop!

Bagi sebagian besar programmer web (terlebih yang belum ahli), membuat template web adalah salah satu hal yang banyak menyita waktu, tenaga dan pikiran. Mulai dari mikir layout-nya gimana, warnanya apa dan fiturnya apa aja? Saya-pun masih begitu sampai ... tadi. Sekarang sudah tidak lagi.

Peringatan penting!

Apa yang akan saya sampaikan, berkaitan dengan css framework bootstrap. Jadi, silahkan pelajari bootstrap (tidak perlu sampai ahli, yang penting ngerti) terlebih dahulu.

So, bagaimana cara membuat template bootstrap tanpa coding yang saya maksud? Silahkan simak dengan serius!

1. Hal pertama yang anda perlukan adalah "satu set komputer" atau laptop atau netbook dan juga akses internet. Karena apa yang akan saya sampaikan ini mengharuskan anda sekalian untuk terhubung ke-internet.
2. Buka situs www.layoutit.com, silahkan daftar kalau perlu(kalau gak perlu, ya gak usah).
3. Jika anda sekalian baru pertama kali kesini, saya sangat  menyarankan untuk melihat video demo terlebih dahulu (klik tombol watch a demo) dan akan terlihat video demo dari youtube.com. Silahkan tonton langsung atau download.
4. Jika sudah melihat video tersebut, silahkan bereksperimen membuat template bootstrap dengan meng-klik tombol start now.
5. Silahkan bereksperiment. Untuk awal mula, saya perkenankan meniru apa yang ada di video tersebut.
6. Tekan tombol preview yang ada di atas untuk melihat hasil template anda.
7. Jika anda sudah puas dengan template yang anda buat, silahkan klik tombol download untuk menyimpan template yang telah anda buat tadi.

Kecepetan? Atau bingung sama fitur-fiturnya? Karena itu saya sarankan untuk belajar bootstrap terlebih dahulu. Kalau kalian sudah bisa bootstrap, maka tentu tidak akan sulit untuk memahami alur kerja pembuatan template instant dengan layoutit.com

Note :
Jika anda sudah terbiasa, maka bukan tidak mungkin anda bisa membuat template website hanya dalam waktu 30 detik.

Sekian dan terima kasih!
Kalau ada pertanyaan, silahkan komen aja.

Mengenal dan Menangkal SQL Injection

SQL Injection dapat merusak database kita. Itulah hal penting yang harus kita ketahui sebelumnya. Jadi, saya akan berbagi pengetahuan tentang SQL Injection yang sudah saya miliki.

Apa itu SQL Injection?

SQL Injection adalah suatu teknik yang memungkinkan pengguna nakal untuk menyuntikkan atau memasukkan perintah SQL ke dalam pernyataan SQL, melalui inputan yang ada pada halaman web. Perintah SQL yang disuntikkan dapat mengubah pernyataan SQL dan mengganggu keamanan aplikasi web.

Contohnya, dengan teknik ini seseorang bisa saja masuk (login) ke dalam sistem tanpa harus memiliki akun(username dan password). Bukan hanya itu saja, SQL Injection juga memungkinkan seseorang untuk memanipulasi (create, read, update, delete) suatu data dalam database... berbahaya bukan?

Beberapa teknik SQL Injection

Kita tidak akan membahas teknik SQL Injection terlalu banyak, karena ilmu security saya masih cetek. Jadi, kita akan membahas yang umum saja.

OR 1=1 itu selalu benar

1=1 itu benar, karena satu memang satu. Iya, kan?

Sebagai contoh, coba kita katakan kalau tujuan kode SQL dibuat adalah untuk memilih user yang telah diberikan user id. Jika tidak ada yang mencegah pengguna untuk memasukkan inputan yang 'salah', pengguna dapat memsukkan inputan yang 'pintar' seperti :

Username

Maka perintah SQL yang akan dieksekusi adalah

SELECT * FROM user WHERE username='' OR 1=1

Arti dari pernyataan SQL berikut adalah memilih semua kolom dari tabel user dimana username kosong atau 1=1.Dengan kata lain, username apapun akan dianggap benar dan dapat memasuki sistem.

OR "="sama dengan TRUE

Bayangkan ada sebuah form untuk mem-verifikasi user login ke sebuah situs web.


Username :
Password :

Dan kode php untuk verifikasinya seperti ini

sql = "SELECT * FROM user WHERE username='".$_POST['username']."' AND password='".$_POST['password']."'"

Seorang hacker pintar bisa saja mendapatkan akses username dan password dalam database hanya dengan memasukkan "or""=" pada username dan password. Sehingga hasilnya seperti berikut:

sql = "SELECT * FROM user WHERE username=""or""="" AND password=""or""=""

Hasil pernyataan SQL di atas valid, dan akan menampilkan seluruh baris yang ada dalam tabel user karena ""="" selalu bernilai TRUE.

 SQL Batched

Kebanyakan database mendukung SQL Batched, yang dipisahkan dengan titik koma (;).

Bayangkan jika anda mempunyai inputan seperti berikut

userid

Dan akan menghasilkan pernyataan seperti berikut:

SELECT * FROM user WHERE username=105;DROP TABLE nama_tabel

Meskipun pengguna tidak berhasil memasuki sistem, akan tetapi pengguna akan menghapus tabel nama_tabel dari database.

Perlindungan

 Salah satu cara untuk melindungi serangan SQL Injection adalah dengan menggunakan parameter SQL. Parameter SQL adalah nilai-nilai yang ditambahkan ke dalam sebuah query SQL ketika dieksekusi, dengan cara yang terkendali.

Untuk php non-OOP, dapat menggunakan mysql_real_escape_string(). Sedangkan php OOP yang menggunakan pdo menggunakan cara berikut :

$stmt = $dbh->prepare("INSERT INTO Customers (CustomerName,Address,City)
VALUES (:nam, :add, :cit)");
$stmt->bindParam(':nam', $txtNam);
$stmt->bindParam(':add', $txtAdd);
$stmt->bindParam(':cit', $txtCit);
$stmt->execute();

Untuk php OOP yang menggunakan mysqli, mirip dengan yang pdo di atas.


--------
Untuk referensi, silahkan kunjungi https://en.wikipedia.org/wiki/SQL_injection
Sekian, kalau ada pertanyaan jangan malu untuk bertanya.

ID dan CLASS pada CSS

Kita akan membahas mengenai id dan class yang ada pada css nih. Saya anggap anda sekalian sudah paham sintaks css dan html.

Pertama, apa itu id dan class di css? Jawabannya simpel, id dan class itu merupakan selector css (saya rasa). Sebagai alternatif, kalau selector menggunakan elemen html dirasa terlalu ribet. Sebagai contoh, kalau ada script html seperti ini

<div>
  <h1>Header1</h1>
  <div>
    <h1>Header2</h1>
  </div>
</div>

Maka, kalau kita hanya ingin mengakses <h1>Header2</h1> maka tidak mungkin kita menggunakan css

div h1{
  ...
}

Karena akan berpengaruh baik pada <h1>Header1</h1> maupun <h1>Header2</h1>. Di sinilah kita bisa menggunakan id ataupun class, dengan catatan: "sesuai kebutuhan".

Selector ID

Selector id digunakan untuk menandai element yang unik. Maksudnya, satu nama id hanya bisa digunakan oleh satu elemen saja. Jika dalam satu halaman web ada elemen yang memiliki nama id sama, maka id hanya akan berpengaruh pada id yang pertama saja. Selector id pada css ditandai dengan "#" (tanpa tanda kutip).
Contoh :

#id1{
  ...Kode CSS... 
}

Sedangkan pada bagian html-nya, misalnya pada header, maka ditulis

<header id="id1">Ini Header</header>

Untuk penulisan nama id, saya sarankan diawali dengan huruf.

Selector Class 

Selector class digunakan untuk menandai elemen-elemen dengan kriteria tertentu pada halaman web. Berbeda dengan selector id yang hanya bisa digunakan oleh sebuah elemen, selector class bisa digunakan oleh elemen manapun. Maksudnya, sebuah selector class bisa dipanggil oleh berbagai elemen pada saat bersamaan. Bahkan, sebuah elemen html bisa memanggil lebih dari satu nama selector class, dengan catatan beberapa class yang dipanggil tidak saling bertentangan style-nya. Selector class ditandai dengan tanda titik "." (tanpa tanda kutip).
Contoh :

.class1{
  ..Kode Css..
}

Sedangkan pada elemen html-nya, misalnya div.

<div class="class1">Ini kotak div</div>

Kalau digunakan pada elemen footer, maka :

<footer class="class1">Ini footer</footer>

Sama seperti id, saya sarankan huruf pertama nama class adalah huruf. Sekalian untuk mempermudah mengingat.

Sekarang, bagaimana caranya satu element html mengakses beberapa class sekaligus?
Pertama, kita bayangkan ada beberapa class pada css seperti berikut :

.latar-hitam{
  background-color: #000;
}
.text-putih{
  color: #fff;
}
.padding16{
  padding: 16px;
}

Kemudian ada sebuah paragraf yang akan menggunakan class .layar-hitam .text-putih dan .padding16
Cara memanggil beberapa class itu cukup dengan menambahkan nama class-nya dan dipisahkan dengan spasi menjadi class="layar-hitam text-putih padding16"

<p class="layar-hitam text-putih padding16">Paragraf</p>

Dengan begitu, paragraf itu akan memiliki background hitam sesuai dengan .layar-hitam, teks berwarna putih sesuai .text-putih dan padding 16px sesuai .padding16

Ada pertanyaan? Silahkan komentarnya.
Semoga Bermanfaat...

Membuat CSS Framework Sendiri

 Pernahkah terpikirkan dalam benak kalian untuk membuat sebuah css framework sendiri? Sayang sekali jika anda tidak pernah berpikir untuk membuatnya, karena saya ketika pertama kali bertemu dengannya langsung ingin membuat versi saya sendiri. Tentu saja itu bukan hal yang mudah untuk dilakukan. Tapi, bukan pula hal yang mustahil untuk anda dan saya lakukan.
Keinginan untuk membuat css framework semakin kuat ketika saya mengenal yang namanya w3.css. Kalau mau buat css framework sekelas bo*tstrap, saya rasa terlalu banyak kodenya (dan mungkin lumayan rumit). Tapi kalau yang mirip-mirip sama w3.css mungkin bisa.

Konsep dari css framework yang akan kita buat ini hanya pemanggilan class, itu saja. Berhubung sebuah elemen html bisa memanggil lebih dari satu class. Silahkan pelajari w3.css atau pahami pemanggilan class di html. Karena di sini, saya tidak akan menjelaskan secara rinci pembuatan css framework akan tetapi hanya memberikan tips dan masukan yang mungkin saja berguna.

Yang anda perlukan untuk membuat css framework adalah :

1. Pemahaman tentang css yang memadahi

    Ini sangat penting, karena jika kalian tidak paham css maka kemungkinan besar css framework yang akan kalian buat tidak akan pernah selesai. Namanya juga css framework, jadi ya harus ngerti css dulu. Mulai dari selector sampai transisi dan animasi css. Tapi yah, kembali lagi kepada diri kalian sendiri.

2. Tentukan apa saja kemampuan css framework yang akan kalian buat

    Kalau mau buat css framework, tentu harus ada kemampuan dari framework tersebut yang bisa memudahkan kita untuk membuat tampilan website bukan? Seperti warna, bentuk, responsif, transisi dan animasi, dll. Penentuan kemampuan framework ini akan menjadi acuan ketika kalian mulai ngoding css framework yang kalian buat. Untuk awal-awal, jangan terlalu WOW dulu. Sesuai kemampuan yang sudah ada saja.

3. Mulai dari yang sederhana

   Ketika membuat css framework, mulailah dari yang paling sederhana. Seperti warna, margin, padding, atau font. Barulah secara bertahap, selesaikan bagian yang sulit.

Itu saja dahulu. Yang paling penting dari "make something" adalah ulet dan tekun plus kerja keras.
Jika ada yang ingin ditanyakan, silahkan komentar ... Jangan malu. Karena saya yakin, ia tertutupi.

Membuat segitiga dengan css

Kali ini kita akan membuat segitiga dengan css. Membuat segitiga dengan css tidak sulit, hanya perlu sedikit pemahaman mengenai css border. Langsung saja, pertama kita akan membuat segitiga sama kaki berdiri.

html-nya.

<div class="atas"></div>

sedangkan css-nya.

.atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 30px solid tranparent;
  border-right: 30px solid tranparent;
}

Hasilnya:

Dengan div yang sama, kalau kita ingin membuat segitiga terbalik tinggal ganti css

border-bottom: 50px solid black;

Menjadi...

border-top: 50px solid black;

Dan hasilnya.

Intinya, kalau ingin membuat segitiga ke atas jangan kasih border-top, tapi kasih border-bottom. Sedangkan kalau ingin membuat segitiga ke bawah jangan kasih border-bottom, tapi border-top. Begitu juga kalau mau membuat segitiga yang mengarah ke samping kiri ataupun kanan.
Contoh :

<div class="kiri"></div>

<div class="kanan"></div>

css-nya

.kiri{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-right: 50px solid black;
}

.kanan{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-left: 50px solid black;
}

Hasilnya...

Bisa kita lihat baik width ataupun height-nya nol. Jadi, besar kecilnya ukuran segitiga ditentukan oleh seberapa besar atau tebal border yang digunakan.

Bagaimana kalau mau membuat segitiga yang arahnya ke sudut?

<div class="kiri-atas"></div>
<div class="kanan-atas"></div>

.kiri-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-left: 50px solid tranparent;
}

Yang sudut bawah

<div class="kiri-bawah"></div>
<div class="kanan-bawah"></div>

.kiri-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 50px solid tranparent;
}

Silahkan download source codenya di sini.