Monday, 14 September 2015

Cara Membuat Widget Alexa Terbaru

Kali ini saya akan memberikan tentang Cara Memasang Widget Alexa, pada waktu itu ada yang bertanya kepada saya, "Mengapa sekarang membuat widget alexa itu sangat sulit", saya berfikir apa yang sulit padahal saya sudah menerangkan begitu detailnya, nah pas saya buka situs alexa oh ternyata tampilan alexa sekarang berubah tidak seperti dulu.

Sekarang alexa tidak ada menu untuk membuat widget lagi, oleh karena itu saya hanya akan memberi kodenya saja untuk membuat widget alexa pada blog.

Kode Widget Alexa


Ada beberapa bentuk atau tampilan atau desain atau apalah hahah :D

<a href="http://www.alexa.com/siteinfo/rampesteam.blogspot.com">
<script src="http://xslt.alexa.com/site_stats/js/s/a?url=rampesteam.blogspot.com" type="text/javascript">
</script></a>


<a href="http://www.alexa.com/siteinfo/rampesteam.blogspot.com">
<script src="http://xslt.alexa.com/site_stats/js/s/c?url=rampesteam.blogspot.com" type="text/javascript">
</script></a>


<a href="http://www.alexa.com/siteinfo/rampesteam.blogspot.com">
<script src="http://xslt.alexa.com/site_stats/js/s/b?url=rampesteam.blogspot.com" type="text/javascript">
</script></a>

Ganti kode yang berwarna BIRU menjadi alamat url blog atau website kalian

 

 

Cara Memasang Widget Alexa

1. Untuk memasang widget alexa kalian masuk dulu ke blogger lalu pilih "Tata Letak"
2. Tambahkan Gadget dan pilih HTML/JavaScript
3. Masukan kode di atas yang sesuai kalian inginkan lalu simpan.

Sekian dan terimakasih.

Cara Claim atau Verifikasi Alexa Terbaru

Kali ini saya akan membagi Cara Claim atau Verifikasi Alexa Terbaru sebelum kalian memasang widget alexa, kalian harus mengclain dahulu blog kalian di alexa, supaya web kalian bisa terukur rank kalian di alexa.

Okey langsung saja kita membahas bagai mana cara claim atau verifikasi alexa

1. kalian masuk ke situs Alexa  kemudaian kalian sign in atau Create An Account jika kalian belum memiliki akun di alexa, bisa juga kalian sign in melalui facebook.
 2. jika kalian sudah masuk ke alexa, kemudian kalian masuk ke link ini http://www.alexa.com/siteowners/claim dan masukan alamat blog kalian pada bagian "Enter a situs URL"
3. disini kalian akan memilih bagai mana cara memverifikasi dan yang kita pilih adalah method 2, jika method 2 di klik dibawahnya akan muncul kotak dan didalamnya terdapat kode verifikasi

tab di alexa jangan di tutup dulu biarkan saja dulu
 
4. nah sekarang kita udah mendapatkan kode verifikasi, selanjutnya kalian masuk ke blogger dan pilih tamplate -> Edit HTML, dan masukan kode verifikasi tadi di bawah <head>

5. jika kode sudah dimasukan lalu simpan, dan lihat lagi di tab alexa yang tadi kita tinggal kan.
6. klik "Verify my ID" lalu akan muncul "Your site is successfully claimed"




Selesailah sudah dan blog kalian sekarang sudah diclaim. Jika kalian sudah mengclaim blog di alexa tidak ada salahnya kalian memasang widget alexa di blog kalian Cara Membuat Widget Alexa Terbaru

Sunday, 13 September 2015

Cara Membuat Desain Web Responsive Sederhana

Kali ini saya akan memberikan Cara Membuat Desain Web Responvide Sederhana. 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.



Cara Membuatnya Adalah :

1. Buat folder baru dengan nama layout pada komputer kalian.
2. Buka Aplikasi notepad atau editor yang kalian pakai.
3. Kemudian tuliskan kode berikut ini dan beri nama index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rampes Team</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">


 <div class="header">
 <h1>Rampes Team</h1>
 <i>Membuat layout responsive By <a href="rampesteam.blogspot.com">Rampes Team</a></i>
 </div>

 <div class="main">


  <div class="SB_left">
  <h3>Sidebar Kiri</h3>
  <p>Disini adalah sidebar kiri </p>
  </div>


  <div class="content">
  <h3>Judul Konten</h3>
  <p>Isi Konten</p>
  </div>


  <div class="SB_right">
   <h3>Sidebar Kanan</h3>
    <p>Disini adalah sidebar Kanan </p>
   <h3>Recent Update</h3>
    <ul>
     <li><a href="rampesteam.blogspot.com">Recent Update Ke-1</a></li>
     <li><a href="rampesteam.blogspot.com">Recent Update Ke-2</a></li>
     <li><a href="rampesteam.blogspot.com">Recent Update Ke-3</a></li>
    </ul>
  </div>
 </div>


 <div class="footer">Copyright &#169; <a href="rampesteam.blogspot.com">RampesTeam</a> </div>
</div>
</body>
</html>

4. Buka aplikasi notepad lagi dan tuliskan kode berikut ini dengan nama style.css
body{
 background: #dedede;
 font-family: 'Helvetica', arial, sans-serif;

 font-size: 15px;
}

p{
 margin-bottom: 20px;
 line-height: 1.5em;
}
h3{
 margin-bottom: 20px;
 border-bottom: 1px solid #aaa;
}

a{
 text-decoration: none;
 color: #999;
}
a:hover{
 color: #006B6B;
}

.container{
 max-width: 1080px;
 margin: 10px auto;
 background: #fff;
 overflow: hidden;
 padding: 10px;
}

.header{
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

/* Main */
 .SB_left{
  width: 250px;
  border: 1px solid #dedede;
  background: #eeeeee;
  padding: 10px;
  margin: 10px;
  float: left;
 }

 .content{
  width: 500px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }
  .content img{
   max-width: 100%;
   height: auto;
  }
  .content a{
   font-weight: bold;
  }

 .SB_right{
  width: 250px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }
  .SB_right ul{
   list-style-type: none;
  }
  .SB_right ul li{
   display: block;
  }
  .SB_right ul li a{
   display: block;
   border-bottom: 1px solid #dedede;
   margin-bottom: 10px;
   padding: 5px 5px;
  }
  .SB_right ul li a:hover{
   color: #006B6B;
 }

.footer{
 clear: both;
 border: 1px solid #dedede;
 color: #fff;
 background: #2D2727;
 padding: 10px;
 margin: 10px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
 
 .container {
  width: 100%;
 }
 .left {
  width: 25%;
  background: #fff000;
 }
 .middle {
  width: 68%;
  float: right;
 }
 
 .right {
  clear: both;
  padding: 1% 4%;
  width: auto;
  float: none;
 }
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {
 
 .header, 
 .footer{
  text-align: center;
 }
 .left {
  width: auto;
  float: none;
 }
 
 .middle {
  width: auto;
  float: none;
 }
 
 .right {
  width: auto;
  float: none;
 }

5. Simpan dan jalankan program tersebut .



Penjelasannya

<meta name="viewport" content="width=device-width, initial-scale=1.0">
digunakan untuk mengatur lebar viewport dan skala awal yang ada pada perangkat mobile.


.content img{
 max-width: 100%;
 height: auto;
}
digunakan untuk mengatur ukuran gambar pada content, jadi gambar akan berukuran pas bagian content dan tidak akan melebihi layout

Saturday, 12 September 2015

Pengertian Dan Fungsi Cookies

Cookies atau bisa disebut sebagai HTTP cookies, web cookies, atau browser cookies adalah data/informasi yang diciptakan oleh suatu website untuk disimpan di web browser, ketika user sedang menjelajahi website tersebut. Cookies yang telah disimpan pada browser bisa diambil untuk memberitahu website tentang aktivitas user pada waktu sebelumnya. Cookies diciptakan supaya website bisa mengetahui aktivitas yang telah dilakukan si user pada waktu sebelumnya.


Contohnya saat kita ingin log in yang disertai dengan mengetik sebuah username dan password pada sebuah website misalnya facebook dan kita pilih remember password maka password kita akan disimpan di cookies (di hardisk user). Maka apabila kita kembali mengakses situs tersebut maka username dan password anda akan muncul secara otomatis muskipun anda tidak mengetiknya. Segala sesuatu yang diciptakan pasti ada fungsinya begitu juga pada cookies.

Fungsi Cookies
  •  Membantu web site untuk “mengingat” siapa kita dan mengatur preferences yang sesuai sehingga apabila user kembali mengunjungi web site tersebut akan langsung dikenali.
  • Menghilangkan kebutuhan untuk me-register ulang di web site tersebut saat mengakses lagi tersebut (site tertentu saja), cookies membantu proses login user ke dalam web server tersebut.
  • Memungkinkan web site untuk menelusuri pola web surfing user dan mengetahui situs favorit yang sering dikunjunginya.
  • Menyimpan halaman Web/history.

Friday, 11 September 2015

Pengertian SESSION PHP Dan Cara Menggunakannya

Session adalah cara yang digunakan untuk meyimpan pada server komputer untuk digunakan pada beberapa halaman termasuk halaman itu sendiri. Session menyimpan informasi ke dalam bentuk variabel super global $_SESSION. Variabel ini disimpan pada server komputer dan dapat digunakan oleh semua halam pada website tempat session dimulai. Session berbeda dengan cookie yang menyimpan informasi pada komputer cilent.
Kelebihan variabel session ini adalah dia mampu menyimpan informasi yang berlaku untuk seluruh halaman/page pada sebuah aplikasi. Hal ini dapat berguna untuk menyimpan data dan informasi yang akan digunakan pada halaman lain dan dapat dipanggil sewaktu - waktu pada halaman lainnya. Session akan hilang dan terhapus ketika si pengguna meninggalkan aplikasi (untuk beberapa kasus), apabila tidak ingin session hilang, maka lebih tepatnya kita menyimpannya ke dalam basis data.

Berikut adalah sintak untuk memulai session :
<?php
//memulai session
session_start(); 
?>
session_start harus disimpan pada awal baris atau di no satu pada editor yang kalian gunakan.


Sintak untuk menyimpan informasi variabel session

Berikut adalah sinak untuk menyimpan session :
$_SESSION["nama_session"]="value";

untuk menyimpan session kalian harus menuliskan nama dan value dari session tersebut, contoh :
<?php
//memulai session
session_start();

//penyimpanan informasi session
$_SESSION["username"] = "Rizal";
?>
Kode diatas berguna untuk menyimpan informasi "Rizal" kedalam variabel session bernama "username".


Sintak untuk memanggil informasi variabel session

Kita dapat memanggil variabel tersebut dengan perintah echo $_SESSION["username"], maka "Rizal" akan menampilkan pada halaman.
<?php
//memulai session
session_start();

//menampilkan informasi yang tadi disimpan
echo "nama saya adalah" . $_SESSION["nama"]. ".";
?>
Tidak seperti variabel biasa, session dapat dipanggil dihalaman manapun, mesikipun membuat file php lagi kemudian kita menampilkannya kembali, maka session tersebut masih tetap menyimpan informasinya.

Sintak untuk manghapus atau menghancurkan informasi variabel session

<?php    

// menghapus variabel session    
session_unset($_SESSION["nama"]);     
  
// menghapus semua session;     
session_destroy();     
?> 
UNSET($_SESSION["nama"]) merupakan perintah untuk menghapus suatu session. Apabia perintah itu ditambahkan kedalam script maka ketika kita memanggil sessionnya tidak akan muncul dan teridentifikasi sudah dihapus atau tidak dikenali nama session tersebut.
Untuk SESSION_DESTROY(); merupakan perintah untuk menghapus seluruh informasi yang telah dibuat oleh session.

Thursday, 10 September 2015

Perbedaan Statement ECHO dan PRINT Pada PHP

Dalam PHP ada dua cara untuk menampilkian tulisan ke layar yaitu echo dan print
Echo dan Print bisa dikatakan hampir sama, keduanya digunakan untuk output atau menampilkan kelayar.
Perbedaannya echo tidak memiliki nilai kembali sementara print memiliki nilai kembali sehingga dapat digunakan dalam ekspresi. echo dapat mengambil beberapa parameter meskipun penggunaan seperti ini jarang terjadi, sedangkan print dapat mengambil satu argunen.

Pernyataan Echo

Pernyataan echo dapat digunakan dengan atau tampa tanda kurung.
Contohnya : echo; atau echo ()
Contoh untuk menampilkan tulisan dengan menggunakan echo :
<?php
echo "<h2>Ini adalah PHP</h2>";
echo "Kita Menggunakan Echo<br>";
echo "String", "bisa", "membuat", "dengan", " multiple parameters.";
?> 
Hasilnya :

Ini adalah PHP

Kita Menggunakan Echo
String bisa membuat dengan multiple parameters

Sekarang Contoh untuk menampilkan tulisan dengan variabel dan echo :
<?php
$txt1 = "Menghitung dengan PHP";
$txt2 = "Pertambahan";
$x = 50;
$y = 10;
$z = $x + $y;

echo "<h2>$txt1</h2>";
echo "menghitung $txt2<br>";
echo "$x + $y = $z";
?> 
Hasilnya :

Menghitung dengan PHP

menghitung Pertambahan
50 + 10 = 60


Pernyataan Print

Pernyataan print digunakan dengan atau tampa tanda kurung.
Contohnya : print; atau print();
Contoh untuk menampilkan tulisan dengan menggunakan print :
<?php
print "<h2>Ini adalah PHP</h2>";
print "Kita Menggunakan Echo<br>";
print "Semangat Berlatih";
?> 
Hasilnya :

Ini adalah PHP

Kita Menggunakan Echo
Semangat Berlatih
Sekarang Contoh untuk menampilkan tulisan dengan variabel dan print :
<?php
$txt1 = "Menghitung dengan PHP";
$txt2 = "Pertambahan";
$x = 50;
$y = 10;
$z = $x + $y;

print "<h2>$txt1</h2>";
print "menghitung $txt2<br>";
print "$x + $y = $z";
?> 
Hasilnya :

Menghitung dengan PHP

menghitung Pertambahan
50 + 10 = 60

Cara Penggunaan Perintah MARQUEE

Selamat Datang Di Web Kami
Kalian Akan Mengenal Tentang Perintah Marquee
Perhatikan baik baik dan cobalah sendiri
Selamat Belajar Kawan

Untuk membuat tulisan satau gambar agar dapat bergerak dapat dilakukan dengan perintah MARQUEE. Perintah ini mempunyai empat nilai, yaitu :
  • <marquee direction = left> Untuk membuat tulisan berjalan ke arah kiri.
  • <marquee direction = right> Untuk membuat tulisan berjalan ke arah kanan.
  • <marquee direction = up> Untuk membuat tulisan naik ke atas.
  • <marquee direction = down> Untuk membuat tulisan turun ke bawah.
Atribut-atribut lainnya ialah :
  • <marquee scrolldelay = "x"> Untuk mengatur kecepatan gerak huruf yang dijalankan, misal x = 300.
  • <marquee behavior = "x"> Untuk mengatur bentuk gerakan, misal x = alternate.

Contoh perintah marquee dalam konteks halaman web seperti berikut :
<html>
<head>
<title>Contoh membuat marquee </title>
</head>
<body>
<marquee direction = "left"> Ini Adalah Marquee (left) </marquee>
<br>
<marquee direction = "right"> Ini Adalah Marquee (right) </marquee>
<br>
<marquee direction = "left" behavior = "alternate"> Ini Adalah Marquee (left)(behavior=alternate) </marquee>
<br>
<marquee direction = "right" scrolldelay = "500"> Ini Adalah Marquee (right)(scrolldelay=500) </marquee>
</body>
</html> 
Hasilnya :
Ini Adalah Marquee (left)
Ini Adalah Marquee (right)
Ini Adalah Marquee (left)(behavior=alternate)
Ini Adalah Marquee (right)(scrolldelay=500)

Untuk Membuat MARQUEE dengan arah ke atas atau kebawah maka ruangan dimana teks akan dibuat usahakan berada dalam tabel dengan panjang dan lebar tertentu.

Cara Penggunaan Pengulangan FOR While dan Do While Pada JavaScript

Perintah pengulangan biasanya digunakan apabila kalian ingin menampilkan satu atau beberapa baris perintah secara berulang.

Pengulangan FOR

Pengulangan dengan FOR paling sering digunakan jika kalian sudah tahu akhir dari perulangan tersebut.
Berikut sintak FOR :
for (nlai_awal; kondisi; penambahan;)
{
	//pengulangan pernyataannya disini;
}

Berikut contoh programnya :
<html>
<head>
<title>Perulangan FOR</title>
</head>
<body>
<script language="JavaScript">
for(x=1; x<=5; x++)
{
	document.writeln("Ini Adalah Pengulangan FOR<br>");
}
</script>
</body>
</html>
Hasilnya :
Ini Adalah Pengulangan FOR
Ini Adalah Pengulangan FOR
Ini Adalah Pengulangan FOR
Ini Adalah Pengulangan FOR
Ini Adalah Pengulangan FOR

Pengulangan While

Pengulangan ini digunakan apabila kalian belum tahu pasti berapa banyak pengulangan akan dilakukan. Berakhirnya suatu perulangan dalan while ditentukan oleh kondisi, Jika kondisi sudah terpenuhi maka pengulangan akan dihentikan.

Berikut sintak While :
while (kondisi)
{
	//pengulangan pernyataan disini;
}

Berikut contoh programnya :
<html>
<head>
<title>Perulangan While</title>
</head>
<body>
<script language="JavaScript">
	var x = 0;
	while(x < 5)
	{
		document.writeln("Ini Adalah Pengulangan While<br>");
		x++;
	}
</script>
</body>
</html>
Hasilnya :
Ini Adalah Pengulangan While
Ini Adalah Pengulangan While
Ini Adalah Pengulangan While
Ini Adalah Pengulangan While
Ini Adalah Pengulangan While

Pengulangan Do..While

Pengulangan ini hampir sama dengan while, pengulangan Do..While digunakan apabila kalian belum tahu pasti berapa banyak pengulangan akan dilakukan. Bedanya dengan while, pada pernyataan Do..While pengujian kondisi dilakukan pada akhir perulangan.

Berikut sintak Do..While :
do
{
	//pengulangan pernyataan disini;
}
while (kondisi)

Berikut contoh programnya :
<html>
<head>
<title>Perulangan Do..While</title>
</head>
<body>
<script language="JavaScript">
    var x = 0;
    do {
        document.writeln("Ini Adalah Pengulangan Do..While<br>");
        x++;
    }
    while (x < 5)
</script>
</body>
</html>
Hasilnya :
Ini Adalah Pengulangan Do..While
Ini Adalah Pengulangan Do..While
Ini Adalah Pengulangan Do..While
Ini Adalah Pengulangan Do..While
Ini Adalah Pengulangan Do..While

Cara Penggunaan Percabangan IF ELSE Dan Switch Pada JavaScript

Seperti dalam bahasa pemograman lainnya, dalam JavaScript juga ada percabangan. Pada dasarnya dalam JavaScript terdapat dua macam pernyataan percabangan, yaitu pernyataan if..else dan switch

IF..ELSE

Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi. Dan mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi

Berikut contoh IF..ELSE :
if(x > 0)
{
	//lakukan pernyataan yang ada disini
	//jika kondisi terpenuhi
}
else
{
	//lakukan pernyataan yang ada disini
	//jika kondisi tidak terpenuhi
}


IF..ELSE IF

Pada kasus tertentu mungkin kalian akan meletakan pernyataan if lain setelah else

Berikut contoh IF..ELSE IF :
if(x > 0)
{
	document.writeln('x adalah bilangan positif');
}
else if(x < 0)
{
	document.writeln('x adalah bilangan negatif');
}
else
{
	document.writeln('x adalah Nol');
}

Switch

Kegunaan pernyataan ini sama dengan yang apa pada C/C++ dan Java, yaitu untuk menangani percabangan majemuk. Dengan kata lain, pernyataan switch digunakan untuk menyederhanakan pernyataan IF..ELSE IF yang terlalu banyak.

Berikut contoh :
if      (buffer == 0) value = "Minggu";
else if (buffer == 1) value = "Senin";
else if (buffer == 2) value = "Selasa";
else if (buffer == 3) value = "Rabu";
else if (buffer == 4) value = "Kamis";
else if (buffer == 5) value = "Jumat";
else if (buffer == 6) value = "Sabtu";

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikut :
switch(buffer)
{
	case 0: value = "Minggu"; break;
	case 1: value = "Senin"; break;
	case 2: value = "Selasa"; break;
	case 3: value = "Rabu"; break;
	case 4: value = "Kamis"; break;
	case 5: value = "Jumat"; break;
	default:value = "Sabtu";
}


Langkah Cara Membuat Navigation Bar Sederhana Menggunakan CSS

Navigation Bar adalah sebuah block kotak yang memanjang secara horizontal, sangat penting guna Navigation Bar pada web yang kita miliki.

Langkah - Langkah Membuat Navigation Bar Sederhana

Pada dasarnya jika kita ingin membuat daftar pada sebuah web HTML menggunakan elemen UL dan LI akan terlihat kaku, seperti contoh dibawah ini :
<html>
<head>
</head>
<body>
<ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Sitemap</a></li>
   <li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Hasilnya :

Sekarang kita harus menghapus titik dan mengatur margin dan padding dengan kode CSS :
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Sitemap</a></li>
   <li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Hasilnya :
Penjelasan kode :
list-style-type: none; digunakan untuk menghapus titik disamping daftar dan jika penjelasan kode.
margin dan padding ke 0 digunakan untuk menghapus jarak default browser sehingga tampak menjadi merapat ke sisi kiri, jika ingin lebih lanjut tentang margin dan padding mungkin kalian bisa baca disini

kita akan menambahkan style elemen <a> kedalam kode tersebut :
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a {
    display: block;
    width: 100px;
    color: #FFFFFF;
    background-color: #009999;
}
</style>
</head>
<body>
<ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Sitemap</a></li>
   <li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Hasilnya :
Penjelasan kode :
display: block; =  Menampilkan link sebagai elemen blok membuat daerah keseluruhan link bisa diklik.
width: =  Mengatur lebar elemen block .
color: =  Mengatur warna text link.
background-color: = Mengatur warna backgroud pada elemen block.

Agar tampak lebih hidup kita akan menambahkan kode seperti berikut :
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  display: block;
  width: 100px;
  color: #FFFFFF;
  background-color: #009999;
}
a:hover {
  background-color:#006B6B;
}
</style>
</head>
<body>
<ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Sitemap</a></li>
   <li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Hasilnya :
Penjelasan kode :
hover = digunakan jika pointer mengarah pada link tersebut akan melakukan aski dimana block pada link akan merubah warna dengan kode background-color.

Selanjutnya kita akan membuat navigation bar menjadi horizontal.
Ada dua cara untuk membuat navigation var menjadi horizontal yaitu menggunakan inline dan floating list

Kedua metode bekerja dengan baik, tetapi jika Anda ingin link menjadi ukuran yang sama, kalian harus menggunakan metode floating, jadi kita akan menggunakan metode floating saja.
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
    float: left;
}
a {
  display: block;
  width: 100px
  color: #FFFFFF;
  background-color: #009999;
}
a:hover {
  background-color:#006B6B;
}
</style>
</head>
<body>
<ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Sitemap</a></li>
   <li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Hasilnya :
Penjelasan kode :
Floating = digunakan utnuk mendapatkan unsur-unsur blok meluncur samping satu sama lain


Perhatian ! Cobalah langsung perakterk dirumah dan kalian akan lihat hasil yang lebih sempurna dibanding hasil dari contoh diatas.

Wednesday, 9 September 2015

Tipe Data Dalam JavaScript

Tidak seperti bahasa pemrograman lainnya, JavaScript tidak mempunyai tipe data secara eksplisit. Kalian mendeklarasikan variabel, tapi tidak menentukan tipenya.
Meskipun JavaScript tidak mempunyai tupe data ekslisip, JavaScript mempunyai tipe data Implisit. Ada empat macam tipe data implisit yang dimiliki JavaScript yaitu :
  • Tipe Numerik
  • Tipe String
  • Tipe Boolean
  • Tipe Null

Tipe Numerik

Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan bulat dan bilangan real.
Untuk bilangan bulat, kalian bisa merepresentasikan dengan basis desimal, oktal, dan heksadesimal.
Berikut ini adalah Contohnya :
 var A = 100;
 var A = 0x2F;
Untuk pendeklarasian tipe bilangan real kalian bisa menggunakan tanda titik atau notasi ilmiah ( notasi E ) :
 var a = 123.456
 var b = 1.234567E+3

Tipe String

Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string diantara tanda petik tunggal ( ' ) atau tanda petik ganda ( " )
Berikut ini adalah Contohnya :
 var A = 'ini adalah pendeklarasian string';
 var B = 'ini juga sama string';

Tipe Boolean

Tipe Boolean hanya mempunyai dua nilai yaitu true dan false. Tipe ini biasanya digunakan untuk mengecek suatu kondisi tertentu.
Berikut ini adalah Contohnya :
 var a = (b>50);
Pada contoh diatas menunjukan bahwa jika b lebih besar dari 50 maka a akan bernilai benar atau true.

Tipe Null 

Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal atau disebut inisialisasi

Pengertian Variabel Dalam JavaScript

Hampir setiap bahasa pemrograman, ada yang namanya variabel. Variabel berguna untuk menyimpan data sementara pada memori komputer.
Dalam JavaScript, pendeklarasian sebuah variabel bersifat opsional, artinya kalian boleh mendeklarasikan atau tidak. Jika kalian memberi nilai pada suatu variabel, maka dalam JavaScript dianggap bahwa kalian telah mendeklarasikan variabel tersebut.

Penulisan Variabel

Ada beberapa peraturan untuk menuliskan nama variabel :
1. Nama Variabel harus diawali dengan tanda dollar "$" ( tapi kali ini kita tidak akan menggunakan tanda $ ).
2. Nama Variabel pada karakter pertama harus diawali dengan huruf atau underscore "_" .
3. Nama Variabel tidak boleh diawali dengan angka.
4. Nama Variabel hanya dapat berisikan karakter huruf "A-Z" angka "0-9" dan underscore "_".
5. Nama Variabel bersifat case-sensitive, yaitu a dan A itu berbeda.


Contoh pendeklarasian variabel :
	Nama = "Rizal Gemilang Putra"
	X    = 2015
	Y	 = 121299

Untuk mendeklarasikan secara eksplisit, tulislah variabel tersebut dengan diawali dengan keyword var :
	var nama;
	var nama = "Rizal Gemilang Putra";
	var X	 = 2015;
	var Y;
Untuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan dengan menuliskan seperti berikut :
	var A,B,C;


Jangkauan Variabel

Jangkauan Variabel adalah konsep tentang pembatasan akses dari sebuah variabel. Yaitu pada bagian mana sebuah variabel masih bisa diakses.

Sebuah variabel jika dideklarasikan baik dengan keyword var ataupun tanpa var, akan bersifat global, atau dikenal dengan istilah global variable. Sebuah variabel akan menjadi global variabel sepanjang variabel tersebut di deklarasikan di luar fungsi.

Jika sebuah variabel di deklarasikan di dalam fungsi, maka variabel tersebut hanya akan bisa diakses di dalam fungsi tersebut, atau bersifat lokal yang bernama variabel lokal

Apabila kita membuat 2 variabel dengan nama yang sama sebagai global variabel, dan juga local variable di dalam sebuah fungsi, maka local variable akan memiliki prioritas yang lebih tinggi dibandingkan global variabel.

Cara Membuat Contact Us Pada Blog

Hallo hari ini saya akan membagikan Cara Membuat Contact Us Pada Blog. Contact Us adalah sebuah halaman yang penting untuk pembaca bisa menghubungi admin dengan secara privacy antara kedua belah pihak yaitu pembaca dan admin.
Halaman Contact Us itu juga mempunyai kegunaan, yaitu untuk mengelola bagian website dengan lengkap dan sangat serp SEO di search engine. Untuk itu, halaman Contact Us tidak boleh diremehkan karena merupakan sebuah elemen penting yang harus dijaga, dirawat dan diperbaiki sesuai ketentuan yang ditentukan di halaman Contact Us terebut.


Berikut ini Cara Membuat Contact Us pada Blog :
1. Kalian harus mengunjungi situs foxyform
2. Jika sudah, kalian disuruh untuk mengisikan setingan apa saja yang akan muncul pada halaman Contact Us kalian
Di pilihan ini kalian disuruh untuk memilih apa saja isian yang akan kalian tampilkan, seperti Nama, E-Mail, dan Subject dan masih ada pilihan lainnya dengan mengklik "Show further options".
Jika kalian ingin mengharuskan pengunjung untuk mengisi form yang di tentukan oleh kalian maka kalian bisa menceklis di bagian kanan yaitu  "required field".
Di pilihan ini kalian disuruh untuk memilih style form Contact Us yang akan kalian buat, disana ada pilihan untuk mengganti warna background dan kalian bisa menyesuaikan dengan warna tamplate kalian, bisa mengganti warna tulisan, bisa mengganti jenis tulisan dan bisa mengatur ukuran tulisan yang kalian inginkan.
Di sini kalian harus memasukan E-Mail yang nantinya untuk menerima jika ada yang mengisikan Contact Us.

3. klik Create Formular dan kalian akan mendapatkan kode srciptnya.
4. Copy kan kode scriptnya di halaman contact us kalian, INGAT bukan pada widget.
5. Publikasikan dan selesai.

Sekian informasi yang saya berikan untuk kalian, terimakasih dan selamat mencoba.

Monday, 7 September 2015

Jenis-Jenis Operator Dalam PHP

Dalam pemograman Operator digunakan untuk proses perhitungan pada suatu variabel, variabel yang akan di proses oleh operator disebut dengan operand.

Ada beberapa jenis operator dalam bahasa pemograman yaitu :
  • Arithmetic Operator

Arithmetic Operator atau Aritmatika adalah operator yang biasa digunakan suatu proses matematika.
Berikut ini adalah daftar operator aritmatika :
Operator
Operasi
Contoh
+
Penjumlahan
$a + $b
-
Pengurangan
$a - $b
*
Perkalian
$a * $b
/
Pembagian
$a / $b
%
Modulus
$a % $b
  • Assignment Operator

Assignment Operator atau Operator Penegasan  adalah operator yang digunakan untuk memberi nilai ke suatu variable ke variable lain. Simbol operator ini adalah (=).
Berikut ini adalah daftar operator penegasan :
Operator
Contoh
Sama Saja
=
a = b
a = b
+=
a += b
a = a + b
-=
a -= b
a = a - b
*=
a *= b
a = a * b
/=
a /= b
a = a / b
%=
a %= b
a = a % b

  • Comparsion Operator

Comparsion Operator atau Operator pembanding adalah operator yang digunakan untuk membandingkan operan dan akan menghasilkan nilai TRUE dan FALSE.
Berikut ini adalah daftar operator pembanding :
Operator
Nama
Contoh
Keterangan
==
Sama dengan
$a == $b
True jika $a sama dengan $b
!=
Tidak sama
$a != $b
True jika $a tidak sama dengan $b
<
Lebih kecil
$a < $b
True jika $a lebih kecil dari $b
>
Lebih besar
$a > $b
True jika $a lebih besar dari $b
<=
Lebih kecil sama dengan
$a <= $b
True jika $a lebih kecil atau sama dengan $b
>=
Lebih besar sama dengan
$a >= $b
True jika $a lebih besar atau sama dengan $b

  • Logical Operator

Logical Operator atau operator logika adalah operator yang digunakan untuk menghubungkan dua buah ungkapan kondisi yang menghasilkan nilai TRUE dan FALSE
Berikut ini adalah daftar operator logika :
Operator
Contoh
Keterangan
And
$a and $b
True jika $a dan $b bernilai true
Or
$a or $b
True jika salah satu dari $a atau $b true
Xor
$a xor $b
True jika salah satu dari $a atau $b, tetapi tidak untuk keduanya
!
!$a
True jika $a false
&&
$a && $b
True jika $a dan $b bernilai ture
||
$a || $b
True jika salah satu dari $a dan $ true

Bitwise Operator

Operator bitwise digunakan untuk memanipulasi data dalam bentuk bit tertentu dalam suatu integer on atau off.
Berikut adalah daftar operator bitwise :
Operator
Contoh
Keterangan
&
$a & $b
Bit yang bernilai 1 pada $a dan $b akan di-set 1
|
$a | $b
Bit yang bernilai 1 pada $a atau $b akan di-set 1
^
$a ^ $b
Bit yang bernilai 1 pada $a atau $b tetapi tidak pada keduanya akan di-set 1
~

$a ~ $b

Bit yang bernilai 1 pada $a akan di-set 0 dan sebaliknya
<<
$a << $b
Geser kekiri bit-bit di $a sebanyak bit $b (setiap langkah berarti kelikan dua)
>>
$a >> $b
Geser kekanan bit-bit di $a sebanyak bit $b



Penjelasan Tentang Box Model Dan Cara Membuatnya

Box Model adalah sebuah kotak yang membungkus di sekitar elemen HTML yang terdiri dari margin, borrder, padding.
Box Model bisa dikaakan juga untuk membuat jarak antara satu dengan yang lainnya, jadi kita bisa memberi jarak ukuran antara kotak satu dengan kotak yang lainnya dengan begitu kotak-kotak kolom tidak tampak menyatu dan hasilnya pasti akan lebih bagus.

Berikut adalah gambaran bentuk box model :

Berikut adalah penjelasannya :
  • Margin - Margin berada di luar border dan memungkinkan untuk memberi jarak, background margin Transparant
  • Border - Sebuah area batas disekitar margin dan padding, background border bisa kita ganti.
  • Padding - memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content.
  • Content - isi seperti text gambar dll.

Jika kita menggunakan Box Model untuk mengatur tinggi dan lebar pada suatu elemen, misalkan kita akan menggunakan elemen DIV dengan ukuran lebar 250px dan tinggi 150px.
div{
    width:250px;
    height:150px;
    margin:10px;
    border:5px solid #000;
    padding:5px;
}
Berdasarkan contoh diatas, sebenarnya div memiliki lebar 290px dan tinggi 190. Loh kok bisa ?
Begini cara kerja Box Model  :
Lebar = 250px + Batas kiri = (margin:10px + border:5px + padding:5px) + Batas kanan = (margin:10px + border:5px + padding:5px) = 290px
Tinggi = 150px + Batas kiri = (margin:10px + border:5px + padding:5px) + Batas kanan = (margin:10px + border:5px + padding:5px) = 190px

Berikut ini adalah contoh untuk menggunakan Box Model :
<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: LightGoldenRodYellow;
    width: 300px;
    padding: 25px;
    border: 25px solid Lime;
    margin: 25px;
}
</style>
</head>
<body>

<div>Ini Adalah Latihan Membuat Box Model</div>

</body>
</html>
Hasilnya :
Ini Adalah Latihan Membuat Box Model

Sunday, 6 September 2015

Pengertian Bootstrap Dan Cara Menggunakan Bootstrap


Apa Itu Bootstrap

Bootstrap merupakan framework gratis front-end untuk pengembangan web lebih cepat dan lebih mudah,b ootstrap termasuk HTML dan CSS berdasarkan desain template untuk 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 responsif.

Keuntungan Menggunakan Bootstrap

Mudah digunakan: Siapa saja dengan pengetahuan hanya dasar HTML dan CSS dapat mulai menggunakan Bootstrap
Fitur responsif: CSS responsif Bootstrap ini menyesuaikan dengan ponsel, tablet, dan desktop.
Pendekatan ponsel pertama: Dalam Bootstrap 3, gaya mobile pertama merupakan bagian dari kerangka inti.
Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)

Cara Mendapatkan Bootstrap

  • Jika kalian ingin mendapatkan Bootstrap kalian bisa mendapatkannya di getbootstrap.com.
  • Atau kalian juga bisa mensertakan saja sebuah SDN Bootstrap.

Apa itu Bootstrap CDN

Jika kalian tidak mau mendownload Bootstrap kalian bisa mendapatkannya dari CDN
MaxCDN memberikan dukungan CDN untuk CSS Bootstrap dan JavaScript. Juga termasuk jQuery:
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Banyak pengguna sudah download Bootstrap dari MaxCDN ketika mengunjungi situs lain. Akibatnya, hal itu akan dimuat dari cache ketika mereka mengunjungi situs Anda, yang mengarah ke waktu loading lebih cepat. Juga, kebanyakan CDN akan memastikan bahwa sekali pengguna meminta file dari itu, maka akan dilayani dari server terdekat dengan mereka, yang juga mengarah ke waktu loading lebih cepat.


Pengertian Variabel Dan Cara Penulisan Variabel Pada Pemograman PHP

Variabel adalah suatu lokasi penyimpanan sementara di dalam memori komputer dan jika ingin menyimpan secara permanen bisa di simpan didalam database.
Nilai Variabel bisa diubah dengan kode kode tertentu, Variabel memiliki nama untuk mengakses nilai variabel tersebut.

Penulisan Variabel

Ada beberapa peraturan untuk menuliskan nama variabel :
1. Nama Variabel harus diawali dengan tanda dollar "$"
2. Nama Variabel pada karakter pertama harus diawali dengan huruf atau underscore "_"
3. Nama Variabel tidak boleh diawali dengan angka
4. Nama Variabel hanya dapat berisikan karakter huruf "A-Z" angka "0-9" dan underscore "_"
5. Nama Variabel bersifat case-sensitive, itu berarti bahwa $kelas berbeda dengan $Kelas dan $KELAS
Berikut contoh penamaan Variabel :
Penulisan Variabel yang benar:
$Angka1;       
$_angka1;

Penulisan Variabel yang salah:
$4ngka1;      // Tidak boleh diawali dengan angka
$Angka 1;     // Tidak boleh menggunakan spasi
$Angka*#@;    // Tidak boleh menggunakan karakter khusus 

Inisialisasi Variabel

Inisialisasi variabel adalah memberikan nilai kepada variabel.
Berikut contoh inisialisasi variabel :
$nama_brg = "Motor";
$harga = 12000000; // Bila nilai bertipe integer tidak usah memakai tanda kutip
$warna = "Biru";

Menampilkan variabel

Dengan pernyataan echo, sebuah nilai variabel bisa di tampilkan.
Berikut adalah cara menampilkan variabel :
<?php
$nama = "Rizal";
echo "Nama saya adalah $nama";
?> 

Variabel Variabel

Kadang lebih nyaman menggunakan variabel-variabel, yang mana nama variabel yang dapat digunakan secara dinamis.
Secara normal variabel adalah :
$a = "hello";
Suatu variabel menggunakan nilai dari satu variabel menjadi nama variabel,Contoh :
$a = "hello";
$$a = "world";

// untuk menampilkan isi variabel dengan cara berikut :
echo "$a ${$a}";
atau
echo "$a $hello";
// Akan menghasilkan keluaran : hallo world
Pada contoh diatas akan terbentuk dua variabel yaitu $a dan $hello, dimana $a berisi "hello" dan $hello berisi "world".

Variabel GLOBAL dan LOKAL

Variabel GLOBAL dapat dideklarasikan dimana saja dan dapat digunakan dimana saja.
Variabel GLOBAL tidak berlaku didalam function kecuali dipanggil dengan keyword GLOBAL.
Berikut adalah contoh penggunaannya :
$a = 5;
function Test(){
 echo($a);   // tidak akan menghasilkan nilai
 GLOBAL $a;
 echo($a);   // akan menampilkan nilai 5
} 
Variabel LOKAL hanya dapat berlaku didalam function sehingga tidak dapat diakses selain didalam function
Berikut adalah contoh penggunaannya :
function test(){
 $a = 4;
}
echo($a); // variabel tidak dikenali

Cara Membuat Widget Burung Twitter Terbang

Twitter merupakan media yang cukup efektif untuk mempromosikan blog atau barang dan jasa karena twitter adalah salah satu social media yang memiliki pengguna terbesar di dunia.

Keberadaan aplikasi media sosial memberikan dukungan khusus dalam menunjang peningkatan trafik pengunjung website. Salah satu yang dapat mendukung peningkatan pengunjung website adalah akun jejaring sosial Twitter. Banyak sekali website atau blog telah memanfaatkan fasilitas sharing akun jejaring sosial berlambang burung berwarna biru itu.

sekarang saya akan menerangkan bagaimana caranya memasang widget twitter di website, dan semoga ini bermanfaat buat blog kalian.

1. Login ke blog kalian
2. Pilih pada bagian Tata Letak
3. Tambahkan Gadget
4. Pilih HTML/JavaScript
5. Masukan kode berikut ini lalu simpan
<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZUSiiM-GWt7eXtL6ayZSsCK_HF2-cP3kz-f2Iia_YbrnBsDy9syvxQbhkBj-oNd_VqRPYBRJMdaYZD_3ka4zqep35qGGF_iyRPRsH-SXTAf38HjSKTsJhPLgzSWQXAKfUSc9iSpc420Y/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/RampesTeam";
var tweetThisText = "Twitter - UserID http://rampesteam.blogspot.com/";
tripleflapInit();
</script> 

Tulisan yang berwarna Biru itu adalah alamat twitter kalian atau ID twitter kalian.
Tulisan yang berwarna Kuning itu adalah url untuk memilih warna burung yang kalian inginkan.
Jika kode tidak di ganti warna burung twittwr adalah berwarna biru

Berikut adalah url untuk memilih warna burung twitter :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIbKpw0QXBDW11MxBZJRt_AmPw1FFO4e6e2gKeXtticPMznPBWnVn0IZb828EgfJ5iIt7Cl_caPbfidx6BYZqRbxp4fcvNPMKPDH-Kb1IzTmGxnmL2NMM2qNGcSyydHrUZ-bR-X0vNEiU/s1600/black+bird.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eifR_RRw-Gpk-XRBx_g8syc6QjfUpIJWbCuBHCS8OtrM-VNDq08EbahFJ8p2oz9G0v6VMYsrRwVqmst4CnQeY-afvNa7ZFsQXmVV1W-V89GSlH2mNOaCIRxsG7IgGtjVL-OoAfvbJeg/s1600/Blue+bird.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrTOLbIi1e876wS6hq-cNTMl9O64BZU9R1zbVEOv2gTOORGQthZYZSm6mN2fd4jAxd4dTvTS2SWlgo1R_RJImhNEmOjE0NLlCezMqRuhInxj45mKzuNSCDbQw4tk1pZsjdyfShgIzU1jM/s1600/brown+bird.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc0UiXlcLXNdqiS2OaKpN5zd3D3_B9vV1iPJNX3rDyaIFjEXyFXqrNH4L1N27_7dtXOlRuJQ2yvJYqRKZUYdw65hJheC-aX2fJEpNZEzxHXyfQDU0dTsdPQCjvG46yKPFsKkhb9mWcqlk/s1600/Green+bird.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgIPKMqsAuaQhBloB5BHxz50BM_fhF0XRIZLCQmF2Uej9g-Zbsd89vgDfVASyT96cUA8rZbdkHZ0BwAMEYlj1CyU7BhlS-QsppJ0pI7cx8lei3GGItPOJhHkr69dgFeQUBXKNplG_tHAQ/s1600/purple+bird.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAncB41S3N4mI8nanBSqe0IR0qaV2YK-pDzYBcLDKml4Si_g7kofDNwn-1wUdvidM6BmL6oN2Z1fOGmLd5TzDv2O1inaDYwFKisb8vISg2qBOHxocMFomhS9PON7WgXm0F3cvgogko4A4/s1600/red+bird.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBhh_4zloxdCyHdNpRYS5KF3mfslpPWS1ihRNIJWlHGJk1XovQprqyhSk33aAscHQclzZfTBubbhBDs8_4i6yT0vmCuYPn-2LGMn02ZIOkv7SYKRhamism-ql32r8Om5w2pCU0Gf7ORRg/s1600/white+bird.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkb2ujc4j0WJvy3esUA7ALrY2ob-9fq_YTR-r4eor7swNjMHtL6-P_Izs5DCvj1WrBdA6tuBAAEPs9rW1vKvSwQnVaZrd4MFonPsF3wgC0XLo9jJxdUw6Hq6jR9ud3A55QzNxF7cG2eI/s1600/yellow+bird.png

Saturday, 5 September 2015

Perintah-Perintah INSERT SELECT WHERE UPDATE DELETE ORDER BY Pada SQL

Kali ini yang akan dibahas adalah mengenai perintah-perintah dasar pada MySQL yang berhubungan dengan memanipulasi data yaitu :
  • INSERT
  • SELECT
  • WHERE
  • UPDATE
  • DELETE
  • ORDER BY
Perintah SQL tidaklah case sensitive jadi kalian bisa menuliskan perintah-perintah terebut dengan menggunakan huruf kecil atau huruf besar.

INSERT
Perintah INSERT digunakan untuk menambah atau menyisipkan data dalam suatu tabel.
dalam penulisan INSERT ada 2 yaitu :
Tidak menentukan nama kolom di mana data akan dimasukkan, hanya nilai-nilai mereka:
INSERT INTO table_name
VALUES (value1,value2,value3,...);
Menentukan baik nama kolom dan nilai-nilai yang akan dimasukkan:
INSERT INTO table_name (column1,column2,column3,...)
VALUES (value1,value2,value3,...);
Contoh penulisan INSERT :
INSERT INTO Mahasiswa (ID, Nama, Fakultas, Jurusan, Kelas)
VALUES ('001','Rizal Gemilang Putra','Teknik','Informatika','IF2'); 


SELECT
Perintah SELECT digunakan untuk menampilkan data dari database.
dalam penulisan SELECT ada 2 yaitu :
Menampilkan beberapa kolom dari suatu tabel :
SELECT column_name,column_name
FROM table_name;
Menampilkan semua kolom dari suatu tabel :
SELECT * FROM table_name;
Contoh penulisan SELECT dengan menampilkan beberapa kolom pada suatu tabel :
SELECT Nama,Kelas
FROM Mahasiswa; 
Menampilkan semua kolom dari suatu tabel :
SELECT * FROM Mahasiswa;


WHERE
Perintah WHERE digunakan untuk menampilkan record dengan kriteria tertentu dalam suatu tabel
Sintak dalam penulisan WHERE :
SELECT column_name,column_name
FROM table_name
WHERE column_name operator value;
Contoh penulisan WHERE :
SELECT * FROM Mahasiswa
WHERE Fakultas='Informatika';
Jika jenis nilai adalah bersifat numberik tidak usah memakai tanda kutip.


UPDATE
Perintah UPDATE digunakan untuk merubah suatu record dalam tabel.
Sintak dalam penulisan UPDATE :
UPDATE table_name
SET column1=value1,column2=value2,...
WHERE some_column=some_value;
Perintah WHERE untuk menentukan data mana yang harus di perbaharui, jika WHERE dihilangkan semua record akan diperbaharui.
Contoh Penulisan UPDATE :
UPDATE Mahasiswa
SET Jurusan='Sistem Informasi', Kelas='SI2'
WHERE ID=001; 


DELETE
Perintah DELETE digunakan untuk menghapus suatu record dalam tabel.
Sintak dalam penulisan DELETE:
DELETE FROM table_name
WHERE some_column=some_value;
Perintah WHERE untuk menentukan data mana yang harus dihapus, jika WHERE dihilangkan semua record akan dihapus.
Contoh Penulisan DELETE:
DELETE FROM Mahasiswa
WHERE Jurusan='Informatika' AND Kelas='IF2'; 


ORDER BY
Perintah ORDER BY digunakan untuk menampilkan record dengan mengurutkan record.
ORDER BY kata kunci macam catatan dalam urutan menaik secara default. Untuk mengurutkan catatan dalam urutan menurun, kalian dapat menggunakan kata kunci DESC.
Sintak dalam penulisan ORDER BY :
SELECT column_name, column_name
FROM table_name
ORDER BY column_name ASC/DESC, column_name ASC/DESC;
Contoh menampilkan semua data mahasiswa diurutkan berdasarkan fakultas
SELECT * FROM Mahasiswa
ORDER BY Fakultas; 
Contoh menampilkan semua data mahasiswa berdasarkan nama dan diurutkan secara DESCENDING
SELECT * FROM Mahasiswa
ORDER BY Nama DESC; 
Contoh menampilkan semua data mahasiswa berdasarkan nama dan kelas
SELECT * FROM Mahasiswa
ORDER BY Nama, Kelas; 

Pengertian dan Sejarah MySQL

Pengertian MySQL
Menurut Wikipedia MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael "Monty" Widenius.

Sejarah MySQL
MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty" Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty bekerja pada perusahaan bernama TcX di Swedia.

TcX pada tahun 1994 mulai mengembangkan aplikasi berbasis web, dan berencana menggunakan UNIREG sebagai sistem database. Namun sayangnya, UNIREG dianggagap tidak cocok untuk database yang dinamis seperti web.

TcX kemudian mencoba mencari alternatif sistem database lainnya, salah satunya adalah mSQL (miniSQL). Namun mSQL versi 1 ini juga memiliki kekurangan, yaitu tidak mendukung indexing, sehingga performanya tidak terlalu bagus.

Dengan tujuan memperbaiki performa mSQL, Monty mencoba menghubungi David Hughes (programmer yang mengembangkan mSQL) untuk menanyakan apakah ia tertarik mengembangkan sebuah konektor di mSQL yang dapat dihubungkan dengan UNIREG ISAM sehingga mendukung indexing. Namun saat itu Hughes menolak, dengan alasan sedang mengembangkan teknologi indexing yang independen untuk mSQL versi 2.

Dikarenakan penolakan tersebut, David Hughes, TcX (dan juga Monty) akhirnya memutuskan untuk merancang dan mengembangkan sendiri konsep sistem database baru. Sistem ini merupakan gabungan dari UNIREG dan mSQL (yang source codenya dapat bebas digunakan). Sehingga pada May 1995, sebuah RDBMS baru, yang dinamakan MySQL dirilis.

David Axmark dari Detron HB, rekanan TcX mengusulkan agar MySQL di ‘jual’ dengan model bisnis baru. Ia mengusulkan agar MySQL dikembangkan dan dirilis dengan gratis. Pendapatan perusahaan selanjutnya di dapat dari menjual jasa “support” untuk perusahaan yang ingin mengimplementasikan MySQL. Konsep bisnis ini sekarang dikenal dengan istilah Open Source.

Pada tahun 1995 itu juga, TcX berubah nama menjadi MySQL AB, dengan Michael Widenius, David Axmark dan Allan Larsson sebagai pendirinya. Titel “AB” dibelakang MySQL, adalah singkatan dari “Aktiebolag”, istilah PT (Perseroan Terbatas) bagi perusahaan Swedia.

Keistimewaan MySql
  •     Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi seperti Windows, Linux,  FreeBSD, Mac Os X Server, Solaris, Amiga, dan masih banyak lagi.
  •     Perangkat lunak sumber terbuka. MySQL didistribusikan sebagai perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga dapat digunakan secara gratis.
  •     Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu yang bersamaan tanpa mengalami masalah atau konflik.
  •     'Performance tuning', MySQL memiliki kecepatan yang menakjubkan dalam menangani query sederhana, dengan kata lain dapat memproses lebih banyak SQL per satuan waktu.
  •     Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya, seperti signed / unsigned integer, float, double, char, text, date, timestamp, dan lain-lain.
  •     Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah Select dan Where dalam perintah (query).
  •     Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level subnetmask, nama host, dan izin akses user dengan sistem perizinan yang mendetail serta sandi terenkripsi.
  •     Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta dan 60 ribu tabel serta 5 miliar baris. Selain itu batas indeks yang dapat ditampung mencapai 32 indeks pada tiap tabelnya.
  •     Konektivitas. MySQL dapat melakukan koneksi dengan klien menggunakan protokol TCP/IP, Unix soket (UNIX), atau Named Pipes (NT).
  •     Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien dengan menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa Indonesia belum termasuk di dalamnya.
  •     Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai aplikasi dan bahasa pemrograman dengan menggunakan fungsi API (Application Programming Interface).
  •     Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan (tool) yang dapat digunakan untuk administrasi basis data, dan pada setiap peralatan yang ada disertakan petunjuk online.
  •     Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE, dibandingkan basis data lainnya semacam PostgreSQL ataupun Oracle.


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

Cara Pemformatan Text Dengan CSS

Dengan menggunakan CSS kita bisa melakukan pemformatan menambah spasi pada kata, menambah spasi pada huruf, membuat huruf besar pada awal kata, menetapkan huruf besar dan kecil, membuat teks berkedip, menyelaraskan aligmen dll.

Warna Text
memberi warna sama halnya memberi warna latar belakang atau background yaitu :
  • Dengan Nilai Hexadesimal = "#0000FF"
  • Dengan Nilai RGB = "rgb(0,0,255)"
  • Dengan Nama warna = "Blue"
kalian bisa melihat kode hexadesimal dan nama warna untuk lebih lengkapnya
Contoh memberi warna pada text :
<head>
<style type="text/css">
  body{color:blue;}
  h1{color:#FF0000;}
  p.cth{color:rgb(0,255,0);}
</style>
<body>
<h1>Cara Pemformatan Text</h1>
<p>paragraf ini berwarna biru karna sudah di format oleh css jika text yang berada di dalam body pasti akan berwarna biru</p>
<p class="cth">sedangkan paragraf ini yang menggunakan Class="cth" ditampilkan berwarna hijau</p>
</body>
Hasilnya :

Cara Pemformatan Text

paragraf ini berwarna biru karna sudah di format oleh css jika text yang berada di dalam body pasti akan berwarna biru
sedangkan paragraf ini yang menggunakan Class="cth" ditampilkan berwarna hijau


Text Alignment
properti text-alignment digunakan untuk mengatur perataan pada posisi horizontal, text dapat di atur mejadi rata tengah(center), rata kiri(life) rata kanan(right), atau rata kiri dan kanan(justify)
Contoh mengatur perataan posisi kaliamt :
<head>
<style type="text/css">
  h1{text-align:center;}
  p.auchor{text-align:right;}
  p.para1{text-align:justify;}
</style>
<body>
<h1>Larangan Memanjangkan Kuku</h1>
<p class="auchor">Rizal Gemilang, 12:04</p>
<p class="para1">Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi 
perkara fitrah , memotong kuku termasuk salah satu perkara fitrah.Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima :</p>
<p>Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting 
kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)</p>
</body>
Hasilnya :

Larangan Memanjangkan Kuku

Rizal Gemilang, 12:04
Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi perkara fitrah , memotong kuku termasuk salah satu perkara fitrah.Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima :
Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)


Text Decoration
properti text-decoration digunakan untuk membuat atau menghapus dekorasi teh, salah satu contohnya adalah menghapus garis bawah pada link.
Contoh menghilangkan garis bawah pada link :
<head>
<style type="text/css">
  a{text-decoration:none;}
</style>
<body>
<p>link to : <a href="http://rampesteam.blogspot.co.id/">Rampes Team</a></p>
</body>
Hasilnya :

kalian juga bisa menggunakan berbagai macam jenis menggunakan text-decoration
Contoh :
<head>
<style type="text/css">
  h1{text-decoration:overline;}      //Overline = Garis Atas
  h1{text-decoration:line-through;}  //Line-through = Dicoret
  h1{text-decoration:underline;}     //Underline = Garis Bawah
  h1{text-decoration:blink;}         //Blink = Berkedip
</style>
<body>
<h1>Heading lvl 1</h1>
<h2>Heading lvl 2</h2>
<h3>Heading lvl 3</h3>
<h4>Heading lvl 4</h4>
<p><b>Catatan : </b> "Blink" tidak dapat ditampilkan di IE, Chrome, dan Safari</p>
</body>
Hasilnya :

Heading lvl 1

Heading lvl 2

Heading lvl 3

Heading lvl 4

Catatan : "Blink" tidak dapat ditampilkan di IE, Chrome, dan Safari


Text Transformation
properti text-transform digunakan untuk membuat huruf menjadi huruf besar(kapital) dan huruf kecil atau menentukan huruf besar pada awalnya saja dalam sebuah text
Contoh Transformation  :
<head>
<style type="text/css">
  p.uppercase{text-transform:uppercase;}
  p.lowercase{text-transform:lowercase;} 
  p.capitalize{text-transform:capitalize;} 
</style>
<body>
<p class="uppercase">menjadi huruf besar semua</p>
<p class="lowercase">menjadi huruf kecil semua</p>
<p class="capitalize">setiap awal kata menjadi kapital</p>
</body>
Hasilnya :
menjadi huruf besar semua
menjadi huruf kecil semua
setiap awal kata menjadi kapital


Text Indentation
properti text-indentation digunakan untuk menentukan indentasi atau tulisan menjorok pada baris pertama, contoh :
<head>
<style type="text/css">
  a{text-decoration:none;}
</style>
<body>
<h3>Larangan Memanjangkan Kuku</h3>
<p>Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi 
perkara fitrah , memotong kuku termasuk salah satu perkara fitrah. 
Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima : 
Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting 
kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)</p>
<cite>http://rampesteam.blogspot.co.id/2015/06/larangan-memanjangkan-kuku_29.html</cite>
</body>
Hasilnya :

Larangan Memanjangkan Kuku

Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi perkara fitrah , memotong kuku termasuk salah satu perkara fitrah. Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima : Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)
http://rampesteam.blogspot.co.id/2015/06/larangan-memanjangkan-kuku_29.html