Bootstrap Grid Basic

♠ Posted by Unknown

Bootstrap Grid Basic



 System Bootstrap Grid
      Sistem grid bootstrap memungkinkan hingga 12 kolom di halaman. Jika Anda tidak ingin menggunakan semua 12 kolom secara individual, Anda dapat kelompok kolom bersama-sama untuk membuat kolom yang lebih luas:


Sistem grid bootstrap adalah responsif, dan kolom akan mengatur ulang secara otomatis, tergantung pada ukuran layar.

Grid Classes (Kelas Grid)

     Sistem Bootstrap jaringan memiliki empat kelas:  
  • xs (untuk ponsel) 
  • sm (untuk tablet)  
  • hd (untuk desktop) 
  • lg (untuk desktop yang lebih besar)
Kelas-kelas di atas dapat dikombinasikan untuk membuat layout lebih dinamis dan fleksibel. 

Struktur dasar dari Bootstrap Grid
Berikut ini adalah struktur dasar dari grid Bootstrap: 



Pertama; membuat baris (<div class = "row">). Kemudian, tambahkan jumlah yang diinginkan dari kolom (tag dengan .col tepat - * - * kelas). Perhatikan bahwa angka dalam .col - * - * harus selalu menambahkan hingga 12 untuk setiap baris.

Di bawah ini kami telah mengumpulkan beberapa contoh layout Bootstrap jaringan dasar.


Three Equal Columns (Tiga Kolom Sama)

   
Contoh berikut menunjukkan bagaimana untuk mendapatkan tiga kolom yang sama-lebar  tablet dan skala untuk desktop besar. Pada ponsel, kolom secara otomatis akan menumpuk: 


Two Unequal Columns (Dua Kolom yang tidak merata)


Contoh berikut menunjukkan bagaimana untuk mendapatkan dua kolom berbagai lebar mulai dari tablet dan skala untuk desktop besar:






Sumber : http://www.w3schools.com


 
Read More

Pengenalan Bootstrap

♠ Posted by Unknown

Bootstrap



Apa itu Bootstrap ?
Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah. Bootstrap termasuk HTML dan CSS desain template berbasis tipografi, bentuk, tombol, tabel, navigasi, kata modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta bootstrap juga memberikan anda kemampuan untuk dengan mudah membuat desain reponsif.

Desain web responsif adalah tentang menciptakan situs web yang secara otomatis menyesuaikan diri untuk terlihat baik pada semua perangkat, dari ponsel kecil untuk desktop besar.

Sejarah Bootstrap
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada bulan Agustus 2011 pada GitHub. Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub.

Mengapa menggunakan bootstrap ?
  • Easy to Use (Mudah digunakan) : Siapa saja dengan pengetahuan hanya dasar dari HTML dan CSS dapat mulai menggunakan Bootstrap.
  • Responsive Features (Fitur responsif) : CSS responsif Bootstrap ini menyesuaikan dengan ponsel, tablet, dan desktop.
  • Mobile-First Approach (Pendekatan Mobile Pertama) : Dalam Bootstrap 3, gaya ini merupakan bagian dari kerangka inti.
  • Browser Compatibility (Kompatibilitas browser) : Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)
Dimana Mendapatkan Bootstrap ?

Ada dua cara, yaitu :
  • getbootstrap.com
  • bootstrap dari sebuah CDN.




sumber : http://www.w3schools.com/


Read More

Dia Diagram Editor

♠ Posted by Unknown

Dia Diagram Editor



Grafik dan diagram merupakan bentuk representasi dari berbagai proses, mulai dari proses bisnis, flow chart, hingga notasi-notasi logika, jaringan dan berbagai bidang ilmu lainnya, untuk menggambarkan notasi, grafik atau diagram tersebut dibutuhkan sebuah software.

Dia diagram editor adalah sebuah free and open source software yang fungsinya untuk membantu pembuatan dan perencanaan diagram agar lebih terstruktur. Aplikasi ini memiliki kelebihan, salah satunya adalah dapat berjalan di berbagai platform seperti Windows dan Mac Os, bukan hanya Linux.
Freeware ini dapat dimanfaatkan oleh para analisis untuk membuat diagram antar entitas, diagram UML, diagram alur, bahkan diagram networking Cisco. Karena bersifat open source, kita pun dapat pula menambah bentuk atau objek baru, dengan membuat file XML sederhana berformat .SVG. dan dapat mengekspor diagram untuk sejumlah format, termasuk EPS, SVG, xfig, WMF dan PNG, dan dapat mencetak diagram (termasuk orang yang rentang beberapa halaman).

Software ini dikembangkan sebagai bagian dari GNOME oleh Alexander Larsson. Seperti yang diketahui, GNOME merupakan GUI yang berjalan di atas sistem operasi seperti Linux dan Solaris. Selain itu, perlu diketahui bahwa Dia dibuat menggunakan bahasa C.
Fitur-fitur :
  • Menggambar diagram struktural (diagram alur, layout jaringan, dll)
  • Mudah digunakan (Direkomendasikan di 89% dari peringkat pengguna)
  • Lebih dari 1000 objek yang telah ditetapkan dan simbol
  • Mendukung Windows, Mac OS X dan Linux
  • Banyak im- dan ekspor format
  • Scriptable melalui Python
      
Sumber : 
  • https://sourceforge.net/projects/dia-installer/
  • http://it-sains.blogspot.co.id/2013/09/aplikasi-dia-diagram-editor.html 
Read More

Pengenalan SQL (Structured Query Language)

♠ Posted by Unknown

SQL (Structured Query Language)




Apa itu SQL?
  • SQL singkatan dari Structured Query Language
  • SQL memungkinkan Anda mengakses dan memanipulasi database
  • SQL adalah (American National Standards Institute) standar ANSI
  • SQL adalah bahasa standar untuk mengakses dan memanipulasi database.
  • SQL sering disebut sebagai query
  • Perintah SQL pada semua software database hampir sama.
 
Apa yang Bisa SQL lakukan?
  • SQL dapat mengeksekusi query terhadap database
  • SQL dapat mengambil data dari database
  • SQL dapat menyisipkan catatan dalam database
  • SQL dapat memperbarui catatan dalam database
  • SQL dapat menghapus catatan dari database
  • SQL dapat membuat database baru
  • SQL dapat membuat tabel baru dalam database
  • SQL dapat menciptakan prosedur yang tersimpan dalam database
  • SQL dapat membuat tampilan dalam database
  • SQL dapat mengatur hak akses pada tabel, prosedur, dan pandangan
 
SQL adalah Standar - TAPI ....

       Meskipun SQL adalah standar ANSI (American National Standards Institute), ada versi yang berbeda dari bahasa SQL.

       Namun, untuk menjadi sesuai dengan standar ANSI, mereka semua dukungan setidaknya perintah utama (seperti SELECT, UPDATE, DELETE, INSERT, MANA) dengan cara yang sama.

Catatan: Sebagian besar program database SQL juga memiliki ekstensi milik mereka sendiri di samping standar SQL.

Jenis-jenis perintah SQL

1.  DDL (Data Definision Language)


DDL merupakan perintah SQL yang berhubungan dengan pendefinisian suatu struktur database, dalam hal ini database dan table. Beberapa perintah dasar yang termasuk DDL ini antara lain :
  • CREATE
  • ALTER
  • RENAME
  • DROP
2. DML (Data Manipulation Language)

DML merupakan perintah SQL yang berhubungan dengan manipulasi atau pengolahan data atau record dalam table. Perintah SQL yang termasuk dalam DML ini antara lain :
  • SELECT
  • INSERT
  • UPDATE
  • DELETE
3. DCL (Data Control Language)

DCL merupakan perintah SQL yang berhubungan dengan manipulasi user dan hak akses. Perintah SQL yang termasuk dalam DCL ini antara lain :
  • GRANT
  • REVOKE

Sejarah

Sejarah SQL dimulai dari artikel seorang peneliti dari IBM bernama Jhonny Oracle yang membahas tentang ide pembuatan basis data relasional pada bulan Juni 1970 Artikel ini juga membahas kemungkinan pembuatan bahasa standar untuk mengakses data dalam basis data tersebut. Bahasa tersebut kemudian diberi nama SEQUEL (Structured English Query Language).


Setelah terbitnya artikel tersebut, IBM mengadakan proyek pembuatan basis data relasional berbasis bahasa SEQUEL. Akan tetapi, karena permasalahan hukum mengenai penamaan SEQUEL, IBM pun mengubahnya menjadi SQL. Implementasi basis data relasional dikenal dengan System/R.


Standarisasi

Standarisasi SQL dimulai pada tahun 1986, ditandai dengan dikeluarkannya standar SQL oleh ANSI. Standar ini sering disebut dengan SQL86. Standar tersebut kemudian diperbaiki pada tahun 1989 kemudian diperbaiki lagi pada tahun 1992. Versi terakhir dikenal dengan SQL92. Pada tahun 1999 dikeluarkan standar baru yaitu SQL99 atau disebut juga SQL99, akan tetapi kebanyakan implementasi mereferensi pada SQL92.


Saat ini sebenarnya tidak ada server basis data yang 100% mendukung SQL92. Hal ini disebabkan masing-masing server memiliki dialek masing-masing.


Pemakaian Dasar
Secara umum, SQL terdiri dari dua bahasa, yaitu Data Definition Language (DDL) dan Data Manipulation Language (DML). Implementasi DDL dan DML berbeda untuk tiap sistem managemen data (SMBD), namun secara umum implementasi tiap bahasa ini memiliki bentuk standar yang ditetapkan ANSI.
Menggunakan SQL di Situs Web Anda

Untuk membangun sebuah situs web yang menunjukkan data dari database, Anda akan perlu:
  •  Sebuah program database RDBMS (yaitu MS Access, SQL Server, MySQL)
  •  Untuk menggunakan bahasa server-side scripting, seperti PHP atau ASP
  •  Untuk menggunakan SQL untuk mendapatkan data yang Anda inginkan
  •  Untuk menggunakan HTML / CSS

RDBMS

RDBMS singkatan Relational Database Management System. RDBMS merupakan dasar untuk SQL, dan untuk semua sistem database modern seperti MS SQL Server, IBM DB2, Oracle, MySQL, dan Microsoft Access. Data dalam RDBMS disimpan dalam objek database disebut tabel. Sebuah meja adalah kumpulan entri data terkait dan terdiri dari kolom dan baris. 


sumber : http://www.w3schools.com/
Read More

CSS3 Gradient

♠ Posted by Unknown

CSS3 Gradient


      CSS3 gradien membiarkan Anda menampilkan transisi halus antara dua atau lebih warna tertentu.

      Sebelumnya, Anda harus menggunakan gambar untuk efek ini. Namun, dengan menggunakan gradien CSS3 Anda dapat mengurangi waktu download dan penggunaan bandwidth. Selain itu, unsur-unsur dengan gradien terlihat lebih baik ketika diperbesar, karena gradien yang dihasilkan oleh browser.

CSS3 mendefinisikan dua jenis gradien:
  • Linear Gradien (turun / naik / kiri / kanan / diagonal)
  • Gradien radial (didefinisikan oleh pusat mereka)
  
CSS3 Gradien Linear

       Untuk membuat gradien linier Anda harus menentukan setidaknya dua berhenti warna. Berhenti warna adalah warna yang Anda inginkan untuk membuat transisi halus antara. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.

Syntax 


Linear Gradient - Top to Bottom (this is default)

Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Dimulai merah, transisi ke kuning:  
 

Linear Gradient - Left to Right

Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Dimulai merah, transisi ke kuning: 


Linear Gradient - Diagonal

     Anda dapat membuat gradien diagonal dengan menentukan baik posisi awal horisontal dan vertikal.

Contoh berikut menunjukkan gradien linier yang dimulai pada kiri atas (dan pergi ke kanan bawah). Dimulai merah, transisi ke kuning: 


Menggunakan Angles 

     Jika Anda ingin lebih mengontrol arah gradien, Anda dapat menentukan sudut, bukan arah yang telah ditetapkan (ke bawah, ke atas, ke kanan, ke kiri, ke kanan bawah, dll).

 Syntax

Sudut ditentukan sebagai sudut antara garis horizontal dan garis gradien. Contoh berikut menunjukkan cara menggunakan sudut pada gradien linier:
  

Menggunakan Beberapa Stop Warna

Contoh berikut menunjukkan gradien linier (dari atas ke bawah) dengan beberapa berhenti warna: 


Contoh berikut menunjukkan cara membuat gradien linier (dari kiri ke kanan) dengan warna pelangi dan beberapa teks:


Menggunakan Transparansi
 
    Gradien CSS3 juga mendukung transparansi, yang dapat digunakan untuk menciptakan efek memudar.

    Untuk menambah transparansi, kita menggunakan RGBA () fungsi untuk menentukan berhenti warna. Parameter terakhir di RGBA () fungsi dapat menjadi nilai dari 0 ke 1, dan mendefinisikan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan penuh warna (tidak ada transparansi).

Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Dimulai sepenuhnya transparan, transisi ke merah penuh warna:
  

Mengulangi linear-gradient

The berulang-linear-gradient () adalah fungsi yang digunakan untuk mengulang gradien linier: 


CSS3 Gradien Radial

Sebuah gradien radial didefinisikan oleh pusatnya.

Untuk membuat gradien radial Anda juga harus menentukan setidaknya dua berhenti warna.

Syntax


Secara default, bentuknya elips, ukuran terjauh-sudut, dan posisi adalah pusat.


Radial Gradient - Merata Spaced Warna Stop (ini adalah default)

Contoh berikut menunjukkan gradien radial dengan warna berhenti merata spasi: 


Radial Gradient - Berbeda Spaced Warna Stops
Contoh berikut menunjukkan gradien radial dengan warna berbeda berhenti spasi:


Set Shape (Set Bentuk)
Parameter bentuk mendefinisikan bentuk. Hal ini dapat mengambil lingkaran nilai atau elips. Nilai default adalah elips.

Contoh berikut menunjukkan gradien radial dengan bentuk lingkaran:



Penggunaan Kata kunci Ukuran Berbeda
Parameter Ukuran mendefinisikan ukuran gradien. Hal ini dapat mengambil empat nilai:
  • closest-side (sisi terdekat)
  • farthest-side (sisi terjauh)
  • closest-corner (sudut terdekat)
  • farthest-corner (sudut terjauh)

Mengulangi radial-gradien
Mengulangi-radial-gradien () adalah fungsi yang digunakan untuk mengulang gradien radial:

 



Sumber : http://www.w3schools.com 
Read More

CSS Pseudo-classes

♠ Posted by Unknown

CSS Pseudo-classes 


Apa Pseudo - classes ? 

        Sebuah pseudo-class digunakan untuk mendefinisikan keadaan khusus dari suatu unsur. Sebagai contoh, dapat digunakan untuk :     
  • Gaya elemen ketika mouse pengguna di atasnya
  • Gaya dikunjungi dan belum dikunjungi link berbeda  
  • Gaya elemen ketika mendapat fokus


Jika diklik maka akan muncul tampilan sebagai berikut.



Sintaks pseudo- classes :



Anchor Pseudo-classes
  
Link dapat ditampilkan dengan cara yang berbeda :

  



Maka akan muncul tampilan sebagai berikut.

/* unvisited link */
a:link {
    color: red;
}

/* mouse over link */
a:hover {
    color: hotpink;
}
/* selected link */
a:active {
    color: blue;
}

Catatan : 
a : hover HARUS datang setelah a: link dan a: visited dalam definisi CSS agar efektif ! a : aktif harus datang setelah : hover dalam definisi CSS agar efektif ! Nama pseudo-class tidak case-sensitive.


Pseudo-classes and CSS Classes
  
Pseudo - kelas dapat dikombinasikan dengan kelas CSS :
Ketika Anda membawa lebih dari link dalam contoh , itu akan berubah warna :

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
    color: #ff0000;
}
</style>
</head>
<body>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>
Contoh menggunakan :hover pseudo-class pada elemen <div> :

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: green;
    color: white;
    padding: 25px;
    text-align: center;
}
div:hover {
    background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div class="mouseover">Mouse Over Me</div>

</body>
</html>




CSS - The :first-child Pseudo-class 


:First-child pseudo-class cocok dengan elemen tertentu yang merupakan first-child dari elemen lain. 
 
Match the first <p> element

Dalam contoh berikut , pemilih cocok setiap < p > unsur yang merupakan :first-child dari setiap elemen :

 <!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
    color: blue;
}
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>

maka akan muncul tampilan sebagai berikut.




Match the first <i> element in all <p> elements
  
Dalam contoh berikut , pemilih cocok pertama elemen< i >  dalam semua elemen < p >  :

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
    color: blue;
}
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>
 

maka akan muncul tampilan sebagai berikut.



CSS - The : lang Pseudo - class 
  
The : lang pseudo-class memungkinkan Anda untuk menentukan aturan khusus untuk bahasa yang berbeda . Dalam contoh di bawah ini  :lang mendefinisikan tanda kutip untuk < q > elemen dengan lang = " no " :

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
<p><b>Note:</b> IE8 supports the :lang pseudo class only if a !DOCTYPE is specified.</p>

</body>
</html>
 

maka akan muncul tampilan sebagai berikut.

 




sumber : http://www.w3schools.com









Read More

Sharing Pengenalan JavaScript

♠ Posted by Unknown

JavaScript


      Javascript adalah bahasa pemrograman HTML dan Web. Pemrograman membuat komputer melakukan apa yang ingin mereka lakukan. JavaScript dapat ditempatkan di < body> dan <head > bagian dari halaman HTML. JavaScript dan Java adalah bahasa yang sama sekali berbeda, baik dalam konsep dan desain. JavaScript diciptakan oleh Brendan Eich pada tahun 1995, dan menjadi standar ECMA pada tahun 1997. ECMA-262 adalah nama resmi. ECMAScript 6 (dirilis pada Juni 2015) adalah versi resmi terbaru dari JavaScript.

Mengapa Studi JavaScript ?
 
JavaScript adalah salah satu dari 3 bahasa semua pengembang web harus belajar :
 
1. HTML untuk menentukan isi dari halaman web
2. CSS untuk menentukan tata letak halaman web
3. JavaScript untuk program perilaku halaman web
  
JavaScript Dapat Mengubah HTML Konten
 
      Salah satu dari banyak metode HTML adalah getElementById ().
Contoh ini menggunakan metode untuk "menemukan" elemen HTML (dengan id = "demo"), dan mengubah isi elemen (innerHTML) untuk "Hello JavaScript":

  
JavaScript Dapat Mengubah Gaya HTML (CSS)
 
    Mengubah gaya elemen HTML, adalah varian dari mengubah atribut HTML :

 
 <Script> Tag
 
Dalam HTML, kode JavaScript harus disisipkan di antara <script> dan </ script> tag.

  
Catatan :

Contoh yang lebih tua mungkin menggunakan jenis atribut: <script type = "text / javascript">. Jenis atribut tidak diperlukan. JavaScript adalah standar bahasa scripting dalam HTML.

Berikut dokumentasinya.











  

 

Read More