Membuat Dropdown Menu 3 Level dan Efek Animasi CSS 3

Dropdown menu adalah menu yang ketika disentuh dengan mouse (hover), akan keluar sub menu. Multilevel dropdown menu berarti menu yang sub menunya memiliki sub menu lagi lebih dari 2 tingkat atau banyak. 

Kode HTML

<div class=”menu-wrapper”>
<ul class=”menu-horizontal”>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3 <span class=”arrow”></span></a>
<ul class=”submenu level-1″>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1 <span class=”arrow”></span></a>
<ul class=”submenu level-2″>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2  <span class=”arrow”></span></a>
<ul class=”submenu level-3″>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Kode CSS

/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#DD3D36;
-webkit-transition:all 0.5s ease-in-out;
}

/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}ul.submenu li {
position: relative;
}

/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li ul li:hover ul.level-3 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

Belajar Syntax Dasar SQL (Structured Query Language)

. 

1. Membuat Table Baru

• Syntax : CREATE TABLE nama_table ( field1 type(size),field2 type(size), …)
• Contoh :
  CREATE TABLE karyawan (
  firstname char(15) not null,
  lastname char(15) not null,
  ssn char(9) not null,
  bdate date,
  address char(30) ,
  sex char(1),
  salary decimal(10.2))

2.  Menghapus Table

Sintaks: DROP TABLE nama_table
Contoh: DROP TABLE karyawan

3.  Memperbaharui field (Menambah / mengurangi field)

• Menambah kolom/field baru
ALTER TABLE nama_table
ADD field TYPE(SIZE)

• Menghapus kolom/field
ALTER TABLE nama_table
DROP COLUMN field

4.  Menyisipkan Data Baru

• INSERT INTO nama_table  (field1, field2 ,…) VALUES (nilai1, nilai2 ,…)


• INSERT INTO nama_table VALUES (nilai1, nilai2 ,…) 

Contoh :

• INSERT INTO KARYAWAN (nama, pekerj aan, gaji, mkerja)VALUES ("SUNARDI" ,"STAF AHLI",1500000,3)

• INSERT INTO KARYAWAN VALUES ("SUNARDI" ,"STAF AHLI" ,1500000,3)

5.  Menampilkan Data

• Semua Data.

SELECT *FROM NAMA_TABLE

• Menampilkan field tertentu.

SELECT FIELD1,FIELD2,… FROM  NAMA_TABLE

• Menampilkan data dengan urutan tertentu.

SELECT FIELD1,FIELD2,… FROM NAMA_TABLE ORDER BY FIELD

Gunakan DESC setelah FIELD untuk pengurutan TURUN

• Menampilkan data-data tertentu
SELECT FIELD FROM NAMA_TABLE WHERE <KONDISI>

Contoh :

• SELECT * FROM KARYAWAN WHERE NAMA LIKE “S*”


• SELECT *FROM KARYAWAN WHERE GAJI > 1000000


• SELECT *FROM KARYAWAN WHERE GAJI > 500000 AND GAJI <2000000

atau

• SELECT *FROM KARYAWAN WHERE GAJI BETWEEN 500000 AND 2000000

• SELECT * FROM KARYAWAN WHERE NAMA LIKE “S*” or NAMA LIKE “A*”

• SELECT * FROM KARYAWAN WHERE NAMA NOT LIKE “S*"

6.  Menghapus Data /Baris

DELETE FROM nama_table
WHERE <kondisi>

7.  Memperbaiki/edit Data/Baris

UPDATE nama_table
SET <kondisi1/pengganti>
WHERE <kondisi2/yg diganti> 

Cara Menghemat Bandwidth Website

- Bandwidth web merupakan hal yang terpenting karena menyangkut biaya dan kelangsungan web kita.
- Mengapa demikian ?
- Karena jika salah membuat script, bandwidth kita bisa-bisa habis gak karuan. Padahal pengunjung yang   masuk membuka website kita belumlah banyak. Lantas dimana letak kesalahannya sehingga bandwidth bisa habis dengan cepat ?

Untuk mengatasi hal ini, segera check website Anda dari masalah berikut :

1. Hemat ukuran dan loading website dengan GZip Compression.
Check apakah website Anda telah terkompressi atau belum. Kompressi website selain dapat mengurangi penggunaan bandwidth juga sangat membantu dalam mempercepat loading website. Untuk check kondisi website sudah terkompressi atau belum bisa check di link Check gzip compression.

2. Perkecil Ukuran Image Anda tanpa mengurangi kualitas gambar.
Ukuran gambar yang besar selain memperlambat loading juga akan memboroskan bandwidth Anda. Gunakan type image JPG dengan kualitas 10 untuk memperkecil ukuran file tanpa mengurangi kualitas image Anda.

3. Check frekuensi Crawl dari Search Engine.
Pengambilan data search engine yang terlalu sering juga akan menghamburkan bandwidth Anda. Sesuaikan frekuensi pengambilan data dengan frekuensi update data Anda. Jika situs Anda adalah situs berita yang diupdate setiap jam, Anda boleh-boleh saja mengatur frekuensi pengambilan data search engine setiap satu jam. namun jika website Anda hanyalah blog biasa yang paling cepat satu minggu sekali di update, sebaiknya Anda menyesuaikan pengambilan data search engine juga menjadi satu minggu sekali.

Mempercepat loading Website dengan gzip compression

Ada banyak cara dalam mempercepat server response time, salah satunya dengan menggunakan gzip compression. Tutorial kali ini diperuntukkan bagi sobat yang menggunakan hosting linux dengan server apache.

Langkah-langkah yang diperlukan untuk meng-enable gzip compression adalah sebagai berikut:
1. Buka folder root html Anda dengan Cpanel atau FTP Client. Folder root html biasanya ditempatkan di home/username/public_html.

2. Cari file .htaccess

3. Tambahkan beberapa baris perintah berikut pada file .htaccess Anda:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule> # compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
AddType text/css .css

4. Save .htaccess

Selain untuk mempercepat server response time, cara ini juga sangat berguna untuk menunjang SEO website Anda karena salah satu kriteria SEO adalah response time dari web tersebut.

Elemen Head pada HTML

Elemen yang bisa kita sisipkan diantara tag <head> dan </head> adalah:

<title>, <style>, <meta>, <link>, <script>, <noscript>, dan <base>.

Elemen HTML <title>

Digunakan untuk mendefinisikan Judul web yang akan tampil di browser dan yang akan dimunculkan di search engine. format penulisannya adalah:

<title>Judul Halaman WEB</title>

Elemen HTML <style>

Elemen <style> digunakan untuk mendefinisikan format dari setiap tag dan class (akan dibahas kemudian)

Elemen HTML <meta>

Elemen <meta> digunakan untuk mendefinisikan kata kunci (keyword) dan deskripsi dari halaman web. Elemen <meta> ini dibutuhkan agar web kita mudah ditemukan oleh mesin pencari (search engine) seperti yahoo dan google. Format penulisannya:

Untuk mendefinisikan kata kunci atau keyword dari halaman website:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Sedangkan untuk mendefinisikan deskripsi dari website:

<meta name="description" content="Free Web tutorials on HTML and CSS">

Untuk mendefinisikan Penulis atau author:

<meta name="author" content="Bestariweb Studio">










Pengertian Uninteruptible Power Supply (UPS) dan Fungsi Utama dari Uninteruptible Power Supply (UPS)

Uninteruptible Power Supply (UPS) Merupakan system Penyedia daya listrik yang sangat penting dan diperlukan sekaligus dijadikan sebagai benteng dari kegagalan daya serta kerusakan system dan hardware. UPS akan menjadi system yang sangat penting dan sangat diperlukan pada banyak perusahaan penyedia jasa telekomunikasi, Jasa informasi, penyedia jasa internet dan masih banyak lagi. Dapat dibayangkan berapa besar kerugian yang timbul akibat kegagalan daya listrik jika system tersebut tidak dilindugi dengan UPS.

Fungsi Utama dari UPS adalah :
1. Dapat memberikan energi listrik sementara ketika terjadi kegagalan daya pada listrik utama (PLN).
2. Memberikan kesempatan waktu yang cukup kepada kita untuk segera menghidupkan Genset sebagai pengganti PLN.
3. Memberikan kesempatan waktu yang cukup kepada kita untuk segera melakukan back up data dan mengamankan Operating System (OS) dengan melakukan shutdown sesuai prosedur ketika listrik utama (PLN) padam.
4. Mengamankan sistem komputer dari gangguan-gangguan listrik yang dapat mengganggu sistem komputer baik berupa kerusakan software,data maupun kerusakan hardware.
5. UPS secara otomatis dapat melakukan stabilisasi tegangan ketika terjadi perubahan tegangan pada input sehingga tegangan output yang digunakan oleh sistem komputer berupa tegangan yg stabil.
6. UPS dapat melakukan diagnosa dan management terhadap dirinya sendiri sehingga memudahkan pengguna untuk mengantisipasi jika akan terjadi gangguan terhadap sistem.
7. User friendly dan mudah dalam installasi.
8. User dapat melakukan kontrol UPS melalui Jaringan LAN dengan menambahkan beberapa accessories yang diperlukan.
9.Dapat diintegrasikan dengan jaringan internet. Notifikasi jika terjadi kegagalan dengan melakukan pengaturan perangkat lunak UPS management.
10. Notifikasi jika terjadi kegagalan dengan melakukan setting software UPS.

Cara menginstall Yii Framework pada Xampp

MENGINSTALL YII FRAMEWORK PADA XAMPP

1. Siapkan Web server XAMPP (saya menggunakan XAMPP versi 1.7.3) dan install.
2. Yii framework versi terbaru yang bisa di download di situs resminya Yii Framework.
3. Extrak file hasil download dapat berupa zip. lalu copy-paste ke folder tempat xampp diinstall yaitu C:\xampp\htdocs\ , nama folder bisa diganti demi kemudahan misalnya ” yii “.
4. Buat folder baru, nama terserah misalnya ”aplikasiyii ” di folder C:\xampp\htdocs .
5. Buka cmd.exe , klik kanan pada icon lalu pilih run as administrator.
6. Setelah tampilan cmd muncul, ketik cd c:\xampp\php kemudian tekan enter.

7. Setelah itu ketik
c:\xampp\htdocs\yii\framework\yiic webapp c:\xampp\htdocs\aplikasiyii lalu tekan enter.
Pada saat muncul <Yes|No>[no]: ketik ” y ” lalu tekan enter.

8. Tutup cmd.
9. Aktifkan Apache dari XAMPP Control Panel, lalu ketik http:/localhost/aplikasiyii pada browser. Bila tidak ada error, maka aplikasi yii sudah terinstall pada folder ”aplikasiyii ” sedangkan file-file yang berada pada folder ” yii ” merupakan framework-nya, yang terhubung dengan ” aplikasiyii “, jadi jangan dihapus.

Isi pada folder yii

Isi pada folder aplikasiyii

10. Klik kanan pada Computer lalu pilih Properties.

11. Pilih Advanced system settings.

12. Pilih tab Advanced dan klik Environment Variables.

13. Klik dua kali pada Variable Path.

14. Copy-paste path tempat file yiic.php berada yaitu C:\xampp\htdocs\yii\frameworks, lalu tambahkan ” ; ”

15. Copy-paste path tempat file php.exe berada yaitu C:\xampp\php, lalu tambahkan ” ; ” .

16. Tidak boleh ada spasi setelah atau sebelum ” ; ” ,  disambung saja.

17. Buka cmd dan buka htdocs pada xampp, lalu ketik “yiic webapp aplikasiyii“, maka folder aplikasiyii akan terbuat dan didalamnya terdapat aplikasi yii yg baru dibuat.

Cara Instalasi Codeigniter (CI) dan Cara Membuat Akses Database

Codeigniter (CI) merupakan sebuah PHP framework,  untuk orang yang ingin membangun website dengan menggunakan PHP. Dengan menggunakan arsitektur model-view-controller (MVC)yang memisahkan antara bagian logic dan tampilan dari program, CI nyaman untuk digunakan. Tidak sulit apalagi anda sudah menguasai prinsip dasar OOP pada PHP.

Langkah 1 : Proses Instalasi Codeigniter (CI)

1. Ekstrak  CodeIgniter yang telah anda download dalam direktori root web server anda.
Contoh ke C:\Xampp\Htdocs\.... (Bagi yang mengunakan Xampp).
2. Selanjutnya masuk ke dalam folder system-application.
3. Bagian dalam folder application inilah yang akan sering anda utak-atik nantinya.

Langkah 2 : Konfigurasi Codeigniter (CI)

1. Buka file config.php yang berada dalam folder system-application-config-config.php
2. Ubah base url, sesuaikan dengan lokasi dimana folder Codeigniter (CI)  anda berada (tempat ekstrak tadi).
Contoh : Folder Codeigniter (CI) anda berada dalam folder www/ci maka ubah baris

$config['base_url']="http://example.com/";
dengan
$config['base_url'] = "http://localhost/ci/";

3. Setting database. Buka file database.php yang berada dalam folder yang sama dengan config.php. Ubah hostname, username, password, dan nama database (database akan kita buat entar, untuk sementara siapkan namanya dulu saja) sesuaikan dengan pengaturan mysql anda. Contoh :
$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "db_ci";
Selesai dengan instalasi dan konfigurasi, selanjutnya siapkan database yang akan kita gunakan dalam praktikum kali ini.

Langkah 3 : Siapkan database

1. Buat database dengan nama db_ci melalui phpmyadmin anda.
2. Siapkan tabel dengan nama tb_buku (field : id_buku, judul_buku, stok_buku).
CREATE TABLE IF NOT EXISTS `tb_buku` (
`id_buku` varchar(10) NOT NULL,
`judul_buku` varchar(50) DEFAULT NULL,
`stok_buku` year(4) DEFAULT NULL, PRIMARY KEY (`id_buku`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

3. Insert-kan beberapa sample data ke dalam tb_buku.
INSERT INTO `tb_buku` (`id_buku`, `judul_buku`, `stok_buku`) VALUES
('1', 'Mencari Tombol Tab', 2003),
('2', 'Guna Guna dari Raja', 2033);

Langkah 4 : Bekerja dengan CI

1. Membuat model. Ketikkan script berikut ini
<?php
class Buku_model extends Model {
function Buku_model()
{
parent::Model();
}
db->select('*');
$this->db->from('tb_buku');
$this->db->order_by('id_buku','DESC');
$data = $this->db->get('');
return $data;
}
}
?>

2. Simpan dengan nama buku_model.php  Simpan dalam folder system-application-models
3. Membuat Controller. Ketikkan script berikut ini,
<?php
class Buku_con extends Controller {

public function Buku_con()
{
parent::__construct();
$this->load->model('buku_model');
}

public function getBuku () {
$data['title'] = 'menampilkan isi buku';
$data['detail'] = $this->buku_model->getBuku();
$this->load->view('buku_view', $data);
}
}
?>


4. Simpan dengan nama buku_con.php. Simpan dalam folder system-application-controller
5. Membuat View. Ketikkan script seperti dibawah ini :

<h4>Data Buku</h4>
<?php foreach($detail->result() as $rows) :
echo $rows->id_buku; echo "<br>";
echo $rows->judul_buku; echo "<br>";
echo $rows->stok_buku; echo "<br>";
endforeach
?>

6. Simpan dengan nama buku_view.php. Simpan dalam folder system-application-view
7. Ketikkan http://localhost/ci/buku_con/getBuku/. dan hasilnya akan tampak seperti dibawah ini :

Membuat layout website yang responsif

1. Memasang Meta Tag Viewport
Meta Tag Viewport digunakan untuk mengatur lebar viewport dan skala awal yang ada pada perangkat mobile. Di bawah ini adalah contoh meta tag viewport. Sertakan meta tag ini di bagian < head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Untuk Microsoft Internet Explorer 8 ke bawah tidak mendukung format di atas, anda bisa menggunakan bantuan mediaqueries.js atau respond.js dengan menambah kode berikut di bawah kode yang diatas.

<!--[if lt IE 9]>     
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  

<![endif]-->


2. Membuat Struktur HTML (Layout)
Langkahnya, kita akan membuat struktur HTML dengan header, content, sidebar dan footer pada sebuah dokumen HTML.

Caranya adalah :
1. Buat folder baru dengan nama test pada komputer anda.
2. Selanjutnya di dalam folder test buat lagi folder baru dengan nama css.
3. Buka aplikasi notepad
4. Kemudian masukan kode di bawah ini kedalamnya

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Demo: Yudi Yusti</title>

<!-- alamat ke file css yang berada pada folder css -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/mediaqueries.css" rel="stylesheet" type="text/css" />

<!-- css3-mediaqueries.js untuk IE8 kebawah -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</head>
<body>
<div id="pagewrap">

    <div id="header">
        <h1>Header</h1>
        <p>Tutorial oleh <a href="http://yudiyusti.com">Yudi Yusti</a> (baca tutorialnya <a href="http://yudiyusti.com/">disini</a>)</p>
    </div>

    <div id="content">
        <h2>Content</h2>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>

    <div id="sidebar">
        <h3>Sidebar</h3>
        <p>text</p>
        <p>text</p>
    </div>
 
    <div id="footer">
        <h3>Footer</h3>
    </div>

</div> <!--#pagewrap -->
</body>

<footer>
</footer>
</html>

5. Simpan ke folder test dengan nama index.html
6. Buka aplikasi notepad kembali dan buat dokumen baru lalu masukan kode di bawah ini kedalamnya.

body {
    background: #fff;
    color: #666;
    font: 85%/140% Arial, Helvetica, sans-serif;
    margin: 0 auto;
}
a {
    color: #69C;
    text-decoration: none;
}
a:hover {
    color: #F60;
}
h1 {
    font: 1.7em;
    line-height: 110%;
    color: #000;
}
h1, h2, h3 {
    color: #000;
}
h3 {
    border-top: solid 1px #eee;
    padding: 20px 0;
    margin: 20px 0 0;
    font-size: 150%;
}
p {
    margin: 0 0 20px;
}

/* atur html5 elemen ke block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}


/************************************************************************************
STRUKTUR
*************************************************************************************/
#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
#header {
    height: 180px;
}
#content {
    width: 600px;
    float: left;
}
#sidebar {
    width: 300px;
    float: right;
}
#footer {
    clear: both;
}

#header, #content, #sidebar, #footer {padding:10px;}


/* anda bisa menghapus ini */
#content {
    background: #f8f8f8;
}
#sidebar {
    background: #f0efef;
}
#header, #content, #sidebar {
    margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
    border: solid 1px #ccc;
}
.wrapper {
    overflow: hidden;
}


7. Lalu simpan pada folder css dengan nama style.css
Untuk mencobanya anda bisa membuka index.html dengan browser anda caranya dengan mengklik kanan pada file index.html kemudian pilih open with -> nama browser anda. Rubah-rubah ukuran browser anda sampai ke ukuran terkecil, pasti masih belum responsif (layoutnya tidak mengikuti ukuran browser).

3. Membuat Media Query
Langkah membuat media query menggunakan CSS3, sama seperti di dalam bahasa pemograman dengan menggunakan kondisi (if), dimana CSS3 memberikan kondisi bagaimana browser harus merender halaman untuk viewport yang telah di set lebarnya, sehingga halaman html flexible mengikuti layar browser.

Caranya:
1. Buka kembali aplikasi notepad
2. Kemudian buat dokumen baru
3. Masukan kode di bawah ini kedalamnya

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* Jika berukuran 980px atau kurang*/
@media screen and (max-width: 980px) {
 
    #pagewrap {
        width: 94%;
    }
    #content {
        width: 65%;
    }
    #sidebar {
        width: 30%;
    }

}

/* Jika berukuran 700px atau kurang*/
@media screen and (max-width: 700px) {

    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: auto;
        float: none;
    }

}

/* Jika berukuran 480px atau kurang*/
@media screen and (max-width: 480px) {

    #header {
        height: auto;
    }
    h1 {
        font-size: 24px;
    }
    #sidebar {
        display: none;
    }

}
4. Simpan dengan nama mediaqueries.css ke dalam folder css.
5. Selesai dan test kembali dengan membuka index.html dengan browser anda kemudian rubah-rubah ukurannya.

Responsif Desain Website

Responsif Desain merupakan suatu teknik desain yang membuat website dapat tampil dengan baik di berbagai browser yang ada pada sebuah perangkat yang memilki ukuran layar yang berbeda, contohnya adalah Notebook, iPhone, iPad, BlackBerry serta device lainnya.

Memasang Meta Tag Viewport
Meta Tag Viewport digunakan untuk mengatur lebar viewport dan skala awal yang ada pada perangkat mobile. Di bawah ini adalah contoh meta tag viewport. Sertakan meta tag ini di bagian < head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Untuk di Microsoft Internet Explorer 8 ke bawah tidak mendukung format di atas, anda bisa menggunakan bantuan mediaqueries.js atau respond.js dengan menambah kode berikut di bawah kode yang diatas.

<!--[if lt IE 9]>     
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

Instalasi Django

Instalasi Django
1. Ekstrak file-file Django sesuai struktur folder-nya dengan bantuan Winrar atau 7Zip. Misalkan ke folder c:\django
2. Jalankan command prompt (CMD) Windows, dan kemudian pastikan berada dalam folder django tersebut.
3. Jalankan >python  setup.py  install
4. Python akan menginstall paket Django pada Python. Tunggu hingga selesai.
5. Setelah kembali ke prompt, jalankan >phyton
6. Pada prompt phyton jalankan >>>import django
Jika tidak ada pesan apapun maka instalasi Django sudah benar. Keluar dari Python dengan Ctrl-Z.
Mengetahui apakah instalasi Django sudah benar :

Setelah perintah >>>import django dijalankan dan tidak ada pesan apapun berarti instalasi sudah benar.
Membuat Project di Django
Untuk memastikan Python dan Django tidak bermasalah dengan setting yang ada dan dapat dijalankan maka dapat kita coba dengan mencoba membuat Project. Caranya adalah sebagai berikut :
1. Misalkan kita buat folder kerja dalam folder django, sehingga kita dapatkan c:\django\works>
2. Lakukan command line >django-admin.py  startproject  mysite
3. Maka akan membuat folder baru bernama mysite dan berisi beberapa file dan struktur khusus.

Coba aktifkan server :
1. Pastikan command prompt berada dalam folder project yang tadi dibuat, yaitu mysite.
2. Lakukan perintah >manage.py runserver
3. Jika port 8000 (sebagai default) dibolehkan maka selesai, jika terjadi error atau port tersebut sudah dipakai setting lain maka lakukan perintah untuk memakai port lain, misalkan >manage.py runserver 8080

Coba jalankan pada browser dengan alamat yang dirujukkan: http://127.0.0.1:8080/

Hasilnya adalah sebagai berikut :

Instalasi Python

Instalasi Python
1. Run python-2.7.6.amd64.msi karena pakai Windows 7 yang 64 bit).
2. Tentukan letak instalasi (default-nya di c:\Python27), tunggu sampai selesai.
3. Setting system path di Windows agar mengenali Python:
4. Buka Windows Explorer, klik kanan pada Computer dikolom kiri, pilih Properties.
5. Klik Advanced system settings, lalu klik Environment Variables.
6. Pada System variables pilih Path lalu klik Edit.
7. Tambahkan dibagian akhir path yang ada dengan:  c:\Python27;c:\Python27\Scripts
8. Lalu Ok, Ok, Ok, selesailah setting path di Windows.
9. Jalankan command prompt (CMD) pada Windows difolder manapun, run >python, lalu akhiri keluar dengan Ctrl-Z enter.

Proses Instalasi berjalan dengan benar.

Pengertian Groovy Dan Instalasi Framework Groovy Serta Framework Grails

Groovy adalah sebuah bahasa pemrograman dinamis yang dibuat dengan bahasa pemrograman Java. Groovy di desain dengan mengambil fitur-fitur terbaik yang terdapat dalam bahasa pemrograman dinamis lainnya seperti Python, Ruby, dan Smalltalk.

Instalasi Groovy.

Karena Grails menggunakan Groovy, maka anda harus menginstalasi Groovy terlebih dahulu untuk menjalankan Grails. Di bawah akan di jelaskan secara singkat langkah-langkah instalasi Groovy.

1. Download versi terakhir Groovy dari situs http://groovy.codehaus.org/Download .

2. Mekarkan groovy-binary-x.x.x.zip ke folder yang anda inginkan.

3. Tambahkan variabel lingkungan (environment variable) GROOVY_HOME dengan menunjuk ke folder di mana anda memekarkan file .zip tadi.

Tambahkan %GROOVY_HOME%\bin (di OS Windows) atau $GROOVY_HOME/bin (di OS berbasis *nix) ke path sistem anda.

4. Buka konsol (Command prompt di Windows), ketikkan perintah berikut:

>groovy -version

5. Jika anda melakukan instalasi dengan benar, maka akan muncul tulisan seperti berikut ini.

Groovy Version: 1.6-beta-1 JVM: 1.6.0_11

Membuat program dengan Groovy.

Berikut adalah beberapa contoh pendek program Groovy.

def vars = "World"
print "Hello $vars"

program diatas dapat di tulis juga seperti berikut,

def vars = "World"; print "Hello $vars"

atau bergaya OOP seperti ini,

class Sapa {
  def nama
  Sapa(siapa) {
      nama = siapa[0].toUppercase() + siapa[1..-1]
  }
  def salam() {
     println "Hello $nama!"
  }
}
titip = new Sapa("world")
titip.salam

Dapat di lihat sekilas, bahwa syntax dari Groovy sangat dekat dengan syntax Java. Dan ada sedikit pengaruh bahasa lainnya seperti PHP, Perl, atau Ruby di sana. Program yang di buat dengan Java dapat langsung di jalankan oleh Groovy dengan hanya mengganti ekstensi dari .java ke .groovy (dengan sedikit modifikasi).

Instalasi Grails.

Setelah Groovy berhasil di instalasi, langkah selanjutnya adalah instalasi paket Grails. Berikut adalah langkah-langkahnya.

• Download grails versi terakhir di situs Grails
• Mekarkan file yang telah anda download ke folder yang anda inginkan.
• Tambahkan variabel lingkungan (environment variable) GRAILS_HOME dengan menunjuk ke folder di mana anda memekarkan file .zip tadi.
• Tambahkan %GRAILS_HOME%\bin (di OS Windows) atau $GRAILS_HOME/bin (di OS berbasis *nix) ke path sistem anda.
• Buka konsol (Command prompt di Windows), ketikkan perintah berikut:

>grails help

• Jika anda melakukan instalasi dengan benar, maka akan muncul tulisan seperti berikut ini.

Welcome to Grails 1.1.1 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: c:\grails

Base Directory: C:\
Running script c:\grails\scripts\Help_.groovy
Environment set to development
Warning, target causing name overwriting of name default

Usage (optionals marked with *):
grails [environment]* [target] [arguments]*

Examples:
grails dev run-app
grails create-app books

Available Targets (type grails help 'target-name' for more info):
grails bootstrap
grails bug-report
grails clean
grails compile
grails console
grails create-app
grails create-controller
grails create-domain-class
grails create-filters
grails create-integration-test
grails create-plugin
grails create-script
grails create-service
grails create-tag-lib
grails create-unit-test
grails doc
grails generate-all
grails generate-controller
grails generate-views
grails help
grails init
grails install-plugin
grails install-templates
grails list-plugins
grails package
grails package-plugin
grails plugin-info
grails release-plugin
grails run-app
grails run-war
grails schema-export
grails set-proxy
grails set-version
grails shell
grails stats
grails test-app
grails uninstall-plugin
grails upgrade
grails war