Membuat Efect Screen Saver di HTML 5

Tutorial html5, tips html5, belajar html5
HTML 5 sedang booming rata-rata semuanya juga sudah mendukung teknologi ini. Agar di blog ini tidak ketinggalan, maka saya juga akan membuat tutorial dengan menggunakan HTML 5.

Dalam tutorial ini kita akan menggunakan canvas. Bagi yang tidak tahu canvas, saya akan jelaskan sedikit tentang canvas.

Apa sich elemen <canvas> itu ?

Canvas Mewakili grafik sederhana atau diagram, user interface yang menarik, animasi sederhana, grafik dan gambar grafik. Dan fitur yang disempurnakan dari keterbatasan CSS.

Fitur apa saja yang ada di elemen <canvas> ?

- Alat bantu menggambar : Rectangles, Arc, Jalan dan menggambar Line, Bezier dan Kurva Kuadratik.

- Efek: Fill dan Strokes, Shadows, Linear, gradien radial, Alpha transparansi dan Komposisi.

- Transformasi : Scaling, Rotasi, Translation, Transformasi matriks.

- Data dalam dan keluar : Membuka gambar eksternal oleh link atau URL, URI data atau kanvas lain, mengambil sebuah representasi PNG sebuah kanvas sebagai data URL.

Bagaimana ? sudah paham tentang canvas ???

Jika sudah paham kita lanjut ke tutorial cara pembuatan Efect Screen Saver menggunakan HTML5.

Langkah pertama buat file html nya dan ikuti source code dibawah ini ::

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="efect.js"></script>
</head>

<body>
<canvas id="canvas"></canvas>
</body>
</html>

file HTML nya  singkat sajakan ??? karena yang kita perlukan cuman elemen canvasnya saja.

Kemudian kita buat file CSS dan ikuti source code dibawah ini ::
 
* { margin: 0; padding: 0;}
#canvas {
 display: block;
 /*Fill canvas with black by default*/
 background: #000;
}


File CSSnya juga simple sekali karena hanya untuk mewarnai backgroung saja.

Dan yang ketiga kita harus buat file javascript dan ikuti source code dibawah ini ::
 
window.onload = function(){
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 //Lets make the canvas occupy the full page
 var W = window.innerWidth, H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;
 
 //Lets make some particles
 var particles = [];
 for(var i = 0; i < 25; i++)
 {
  particles.push(new particle());
 }
 
 function particle()
 {
  //location on the canvas
  this.location = {x: Math.random()*W, y: Math.random()*H};
  //radius - lets make this 0
  this.radius = 0;
  //speed
  this.speed = 3;
  //steering angle in degrees range = 0 to 360
  this.angle = Math.random()*360;
  //colors
  var r = Math.round(Math.random()*255);
  var g = Math.round(Math.random()*255);
  var b = Math.round(Math.random()*255);
  var a = Math.random();
  this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
 }
 
 //Lets draw the particles
 function draw()
 {
  //re-paint the BG
  //Lets fill the canvas black
  //reduce opacity of bg fill.
  //blending time
  ctx.globalCompositeOperation = "source-over";
  ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
  ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = "lighter";
  
  for(var i = 0; i < particles.length; i++)
  {
   var p = particles[i];
   ctx.fillStyle = "white";
   ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
   
   //Lets move the particles
   //So we basically created a set of particles moving in random direction
   //at the same speed
   //Time to add ribbon effect
   for(var n = 0; n < particles.length; n++)
   {
    var p2 = particles[n];
    //calculating distance of particle with all other particles
    var yd = p2.location.y - p.location.y;
    var xd = p2.location.x - p.location.x;
    var distance = Math.sqrt(xd*xd + yd*yd);
    //draw a line between both particles if they are in 200px range
    if(distance < 200)
    {
     ctx.beginPath();
     ctx.lineWidth = 1;
     ctx.moveTo(p.location.x, p.location.y);
     ctx.lineTo(p2.location.x, p2.location.y);
     ctx.strokeStyle = p.rgba;
     ctx.stroke();
     //The ribbons appear now.
    }
   }
   
   //We are using simple vectors here
   //New x = old x + speed * cos(angle)
   p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
   //New y = old y + speed * sin(angle)
   p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
   //You can read about vectors here:
   //http://physics.about.com/od/mathematics/a/VectorMath.htm
   
   if(p.location.x < 0) p.location.x = W;
   if(p.location.x > W) p.location.x = 0;
   if(p.location.y < 0) p.location.y = H;
   if(p.location.y > H) p.location.y = 0;
  }
 }
 
 setInterval(draw, 30);
}


Selesai.

untuk priviewnya tidak bisa saya tampilkan karena hasilnya bergerak. Tidak puas kalau cuman melihat imagenya saja ^__^. Jadi kalian bisa mencobanya sendiri ya.

Dan semoga artikel ini bermanfaat buat kalian semua.
Salam Hangat


Roy Purbo

Membuat Stopwatch dengan CSS 3

cara membuat stopwatch, tutorial membuat stopwatch
Sekarang ini hanya dengan menggunakan CSS kita sudah bisa membuat beragam animasi dasar yang bisa menggantikan dokumen lain seperti gambar, flash ataupun Javascript.

Dalam tutorial kali ini saya akan membuat Stopwatch dengan menggunakan CSS3.

Hal-hal yang perlu kita persiapkan untuk pembuatan Stopwatch :: Segelas kopi hangat Disamping ^__^ Justkidding.

Petama buat file phpnya, ikuti source code dibawah ini ::

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>
<div class="container">
 <!-- time to add the controls -->
 <input id="start" name="controls" type="radio" />
 <input id="stop" name="controls" type="radio" />
 <input id="reset" name="controls" type="radio" />
 <div class="timer">
  <div class="cell">
   <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
  </div>
  <div class="cell">
   <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
  </div>
  <div class="cell">
   <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
 </div>
 <!-- Lables for the controls -->
 <div id="timer_controls">
  <label for="start">Start</label>
  <label for="stop">Stop</label>
  <label for="reset">Reset</label>
 </div>
</div>
</body>
</html>


Selanjutnya tahap kedua kita membuat file css ::


 
* {margin: 0; padding: 0;}

body{
 background: #96ef9a; repeat;
}

.container {
 padding: 200px;
 text-align: center;
}

.timer {
 padding: 10px;
 background: linear-gradient(top, #222, #444);
 overflow: hidden;
 display: inline-block;
 border: 7px solid #efefef;
 border-radius: 5px;
 position: relative;
 
 box-shadow: 
  inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
  0 5px 20px -10px rgba(0, 0, 0, 1);
}

.cell {
 width: 0.60em;
 height: 40px;
 font-size: 50px;
 overflow: hidden;
 position: relative;
 float: left;
}

.numbers {
 width: 0.6em;
 line-height: 40px;
 font-family: digital, arial, verdana;
 text-align: center;
 color: #fff;
 
 position: absolute;
 top: 0;
 left: 0;
 
 text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

#timer_controls {
 margin-top: -5px;
}
#timer_controls label {
 cursor: pointer;
 padding: 5px 10px;
 background: #efefef;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

.moveten {
 animation: moveten 1s steps(10, end) infinite;
 animation-play-state: paused;
}
.movesix {
 animation: movesix 1s steps(6, end) infinite;
 animation-play-state: paused;
}

.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;}

.milisecond {animation-duration: 1s;}
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;}
.tenminute {animation-duration: 3600s;}

.hour {animation-duration: 36000s;}
.tenhour {animation-duration: 360000s;} 

@keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 
}

@keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 
}



@font-face {
 font-family: 'digital';
 src: url('DS-DIGI.TTF');
 
}


yang terakhir kalian harus Download fontsnya untuk downloadnya bisa klik disini.

Selesai, kalian tinggal save dan jalankan dikomputer.
Sekian dulu tutorial dari saya.

Salam Hangat


Roy Purbo

Membuat Logo Android dengan CSS 3

logo android, cara membuat logo android, membuat logo android dengan css
Membuat logo dengan Photoshop atau dengan Corel Draw masih Umum. Tetapi Dalam tutorial kali ini kita akan membuat Logo Android dengan CSS3.

Keren bukan ???

Biasanya kita cuman memakai CSS untuk desain Website tetapi dalam tutorial ini kita memakainya untuk mendesai Logo.

Penasaran ???
Bagi yang penasaran silahkan simak baik-baik ^__^

Pertama buat file phpnya kemudian tulis source codenya sesuai seperti ini ::
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="android">
 <div class="head">
  <div class="l_ant"></div>
  <div class="r_ant"></div>
  <div class="l_eye"></div>
  <div class="r_eye"></div>
 </div>
 <div class="body">
  <div class="l_arm"></div>
  <div class="r_arm"></div>
  <div class="l_leg"></div>
  <div class="r_leg"></div>
 </div>
</div>
</body>
</html>


kedua buat file cssnya ::
 
   div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
 height: 404px; width: 334px;
 margin: 100px auto;
 
}
.head{
 width: 220px; height: 100px;
 top: 32px;
 
 border-radius: 110px 110px 0 0;
 -moz-border-radius: 110px 110px 0 0;
 -webkit-border-radius: 110px 110px 0 0;
 
 -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
 background: #fff;
 width: 20px; height: 20px;
 position: absolute; top: 42px;
 
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
 width: 6px; height: 50px;
 position: absolute; top: -34px;
 
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}
.l_ant {
 left: 50px;
 transform: rotate(-30deg);
 -webkit-transform: rotate(-30deg);
 -moz-transform: rotate(-30deg);
}
.r_ant {
 right: 50px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
}

.body{
 width: 220px; height: 184px;
 top: 40px;
 
 border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
 width: 50px; position: absolute;
 -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
 height: 150px;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
 height: 80px; top: 182px;
 border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
 -webkit-transform: rotate(-5deg) translate(-4px, -8px);
 -transform: rotate(-5deg) translate(-4px, -8px);
 -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
 -webkit-transform: rotate(15deg) translate(-14px, 0);
 -transform: rotate(15deg) translate(-14px, 0);
 -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
 -webkit-transform: rotate(-30deg) translate(30px, 0);
 -transform: rotate(-30deg) translate(30px, 0);
 -moz-transform: rotate(-30deg) translate(30px, 0);
}


Selesai.
Untuk priviewnya bisa kalian coba sendiri.
Semoga artikel ini bermanfaat buat kalian

Salam Hangat


Roy Purbo
 

Membuat Koneksi MySQL di PHP

tutorial mysql php, tutorial koneksi di php
Ada banyak teknik membuat koneksi MySQL di PHP. Pada Tutorial ini saya akan memberikan contoh teknik yang sering saya gunakan.

Pertama pastikan komputer kalian sudah terpasang MySQL dan Apache. Kalau belum silahkan baca tutorial Cara Install XAMPP.

Jika sudah terpasang, kita bisa melanjutkan ke tahap selanjutnya ^_^.


Apakah Kalian sudah tahu cara menjalankan php ??? bagi yang baru belajar saya kasih penjelasan sedikit. Untuk menjalankan PHP tidak sama dengan menjalankan HTML 2x klik sudah bisa dilihat. 

Untuk menjalankan PHP kalian harus menuliskan alamat URL "http://localhost/nama_project". Bagi pengguna windows yang sudah menginstall XAMPP project yang di buat harus berada di direktori "C://xampp/htdocs".

Ingat semua project kita harus berada dalam folder htdocs, bagaimana? apakah kalian sudah paham ? kalau sudah kita lanjutkan lagi ke pembuatan koneksi.

untuk membuat koneksi mysql, ikuti source code dibawah ini ::

 
<?php

$server   = "localhost"; 
$username = "root"; 
$password = ""; 
$database = "btikp"; 
 
// Koneksi dan memilih database di server 
mysql_connect($server,$username,$password) or die("Gagal"); 
mysql_select_db($database) or die("Database tidak ditemukan"); 
 

?>


source code koneksi mysql nya mudah sajakan ?

Semoga tutorial ini bermanfaat bagi kalian semua.

Salam Hangat


ROY PURBO

Membuat menu Vertikal dengan CSS 3 & jquery

Vertikal menu css
Menu merupakan komponen yang sangat penting dalam pembuatan web menurut pendapat saya ^__^. 

Pada tutorial kali ini saya akan memberikan tips untuk membuat menu secara vertikal. 

Contoh menu yang ingin saya buat bisa di lihat gambar disamping kiri.

Cara membuatnya bisa ikuti langkah-langkah dibawah ini ::

1. Sediakan file-file dibawah ini ::
2. Extract FortAwesome-Font-Awesome-v3.0.2-0-g13d5dd3.zip, setelah di extract buka foldernya copy folder asset di dalam folder docs

folder docs

folder asset
Cukup Copy Folder Assets, taruh di dalam satu folder project kita. Dan jangan Lupa Jquery juga masukan kedalam folder project.

3. Buat index.php, ikuti source code dibawah ini ::

 
   <html>
    <head>
        <link rel="stylesheet" type="text/css" href="menu.css" />
        
        <!-- jQuery -->
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="menu.js"></script>
    </head>

    <body>
        <div id="accordian">
            <ul>
                <li>
                    <h3><span class="icon-dashboard"></span>Dashboard</h3>
                    <ul>
                        <li><a href="#">Reports</a></li>
                        <li><a href="#">Search</a></li>
                        <li><a href="#">Graphs</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
                <!-- we will keep this LI open by default -->
                <li class="active">
                    <h3><span class="icon-tasks"></span>Tasks</h3>
                    <ul>
                        <li><a href="#">Today's tasks</a></li>
                        <li><a href="#">Urgent</a></li>
                        <li><a href="#">Overdues</a></li>
                        <li><a href="#">Recurring</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
                <li>
                    <h3><span class="icon-calendar"></span>Calendar</h3>
                    <ul>
                        <li><a href="#">Current Month</a></li>
                        <li><a href="#">Current Week</a></li>
                        <li><a href="#">Previous Month</a></li>
                        <li><a href="#">Previous Week</a></li>
                        <li><a href="#">Next Month</a></li>
                        <li><a href="#">Next Week</a></li>
                        <li><a href="#">Team Calendar</a></li>
                        <li><a href="#">Private Calendar</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
                <li>
                    <h3><span class="icon-heart"></span>Favourites</h3>
                    <ul>
                        <li><a href="#">Global favs</a></li>
                        <li><a href="#">My favs</a></li>
                        <li><a href="#">Team favs</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>


4. Buat menu.css tuliskan seperti dibawah ini ::

 
   /*custom font for text*/

@import url(assets/css/font-awesome.css);
/*Basic reset*/
* {margin: 0; padding: 0;}

body {
 background: #4EB889;
 font-family: Nunito, arial, verdana;
}
#accordian {
 background: #004050;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 /*Some cool shadow and glow effect*/
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 /*fallback for browsers not supporting gradients*/
 background: #003040; 
 background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 span {
 font-size: 16px;
 margin-right: 10px;
}
/*list items*/
#accordian li {
 list-style-type: none;
}
/*links*/
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 11px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 /*transition for smooth hover animation*/
 transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
 background: #003545;
 border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}




5. yang terakhir buat menu.js ::

 
/*jQuery time*/
$(document).ready(function(){
 $("#accordian h3").click(function(){
  //slide up all the link lists
  $("#accordian ul ul").slideUp();
  //slide down the link list below the h3 clicked - only if its closed
  if(!$(this).next().is(":visible"))
  {
   $(this).next().slideDown();
  }
 })
})



6. Selesai. Untuk mejalankannya panggil dengan menggunakan localhost, jangan diklik index.php nya 2x. Dan seperti saya bilang sebelumnya kalian harus memasukan semuanya dalam satu project seperti gambar dibawah ini ::

prject menu vertikal
Semoga tutorial ini bermanfaat buat kalian


Salam Hangat



Roy Purbo