October 22, 2013




Hello , I want to show you my other simple project . It called jQuery Realtime Clock Flat Style.

I Create realtime clock from html and jquery and make the layout flat styled .

The main function is to display the time taken from the time on your computer with Jquery, Hours minutes and seconds will change dynamically every seconds follow the time on your computer.

Here i give you the main code , Simple and easy to use



Javascript 



HTML 


<div id="box-wrapper">
<body onload="GetClock(); setInterval('GetClock()', 1000 )">

<div class="main-wrapper">
  <div class="clock-header">
    <div class="clock-title">Time Is Money!</div>
    <div class="add-button"></div>
  </div>
  <div class="clock-wrapper">
    <div class="clock">
      <div class="hours-wrapper">
        <span id="hours"> </span>
        <div class="hours-text">HOUR</div>
      </div>
      <div class="separator">:</div>
      <div class="minutes-wrapper">
        <span id="minutes"> </span>
        <div class="hours-text">MIN</div>
      </div>
      <div class="separator">:</div>
      <div class="seconds-wrapper">
        <span id="seconds"> </span>
        <div class="hours-text">SEC</div>
      </div>
      <div class="separator2"></div>
      <div class="AMPM-wrapper">
        <span id="AMPM"> </span>
      </div>

    </div>
  </div>
</div>

CSS 


body {
 margin: 0;
 font-family: helvetica;
 background-color: #eaedf1;
}

.main-wrapper {
 margin: 0 auto;
 overflow: auto;
 width: 350px;
}

.clock-header {
 margin-top: 30px;
 background-color: #203133;
 height: 50px;
 width: 350px;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
}

.clock-title {
 padding: 12px;
 font-size: 18px;
 color: #e3e4e6;
 font-weight: normal;
 text-align: center;
}

.clock-wrapper {
 background-color: #14b9d6;
 border-bottom-left-radius: 3px;
 border-bottom-right-radius: 3px;
 padding-bottom: 10px;
}

.clock {
 width: 78%;
 margin: 0 auto;
 font-size: 40px;
 color: white;
 text-align: center;
 font-weight: 800;
 padding-top:20px; 
 height:80px;
}

.separator {
 font-size: 40px;
 color: white;
 float: left;
 margin-left: 10px;
 margin-right: 10px;
}

.separator2 {
 width: 10px;
 height: 100%;
 float: left;
}


.hours-wrapper {
 float: left;
}

.hours-text {
 font-size: 14px;
 font-weight: normal;
}


.minutes-wrapper {
 float: left;
}

.minutes-text {
 font-size: 14px;
 font-weight: normal;
}

.seconds-wrapper {
 float: left;
}

.seconds-text {
 font-size: 14px;
 font-weight: normal;
}

.AMPM-wrapper {
 float: left;
}

.AMPM-text {
 font-size: 14px;
 font-weight: normal;
}



/*======================================FOOTER=============================================*/

.footer-links {
 margin-bottom: 20px;
 margin-top: 20px;
}

.footer-links a {
 color: #3498DB;
 text-decoration: none;
}

#footer {
 font-size: 12px;
 padding-top: 30px;
 margin: 0 auto;
 text-align: center;
 color: #555;
}

#footer a{
 color: #3498DB;
 text-decoration: none;
}
For the demo you can download it , just click the "pay with tweet" button, and follow the instruction

Download for free if you pay with a Tweet!

This project created by the team of sevnteen sevn 

Posted on Tuesday, October 22, 2013 by Oki Prasastio

No comments

October 10, 2013



Now , I want to show you my simple project . It called jQuery Drop Down Slider Flat Style.

As you can see in that picture , The design is flat , simple , but elegant and easy to create
The main function is to slide down the content when you click the header of the content 
But i create it a little different , i create with the new trend of design , Flat Style

Here i give you the main code 




Javascript 



HTML 


<div id="box-wrapper">
 <div class="box-head">
  <div class="box-title">Click Me!</div>
  <div class="arrowimage on"></div>
 </div>
 <div class="box-content">
  <h1>Hello World!</h1>
  <div class="box-text">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
 </div>
</div>

HTML With Form 


<div id="box-wrapper">
 <div class="box-head">
  <div class="box-title">Click Me!</div>
  <div class="arrowimage on"></div>
 </div>
 <div class="box-content">
  <h1>Hello World!</h1>
  <div class="box-text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  <form>
   <input type="text" class="inputform input-green" placeholder="GREEN">
   <input type="text" class="inputform input-red" placeholder="RED">
   <input type="text" class="inputform input-blue" placeholder="BLUE">

   <a href="#" class="a-button">Submit</a>
  </form>
 </div>
 </div>
</div>

CSS 


body {
 margin:0px;
 background-color: #fff;
 font-family: Helvetica, Arial, sans-serif;
}

#box-wrapper {
 width: 900px;
 margin: 0 auto;
 margin-top: 40px;
}

.box-head {
 position: relative;
 width: 100%;
 height: 50px;
 background-color: #1abc9c;
 cursor: pointer;
 z-index: 100;
 box-shadow: 0px 3px 0px 0px #179c82;
}

.box-title {
 color: #fff;
 padding: 13px;
 /*font-weight: 800;*/
 font-size: 20px;
 float: left;
}

.box-content {
 /*display: none;*/
 background-color: #eff0f2;
 height: 300px;
 box-shadow: 0px 3px 0px 0px #ccc;
}

.box-content h1 {
 color: #555;
 margin: 0px;
 text-align: center;
 padding-top: 40px;
 text-shadow: 1px 1px 1px #ffffff;
}

.box-text {
 margin: 0 auto;
 width: 90%;
 color: #6b6a63;
 padding-top: 20px;
 text-align: center;
 line-height: 25px;
 text-shadow: 1px 1px 1px #ffffff;
}

.arrowimage {
 background: url("../images/bttn-panah-bawah.png");
 float: right;
 height: 30px;
 width: 30px;
 margin: 10px;
 margin-right: 20px;
}

.on {
 background: url("../images/bttn-panah-atas.png");
}


/*======================================FORM=============================================*/

.box-text form {
 margin-top: 30px;
}

.inputform {
 border: 2px solid #bdc3c7;
 color: #34495e;
 font-size: 15px;
 padding: 8px 12px;
 -webkit-appearance: none;
 border-radius: 6px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
}

.input-green:focus {
 border: 2px solid #179c82;
 outline:none;
}

.input-red:focus {
 border: 2px solid red;
 outline:none;
}

.input-blue:focus {
 border: 2px solid #3498DB;
 outline:none;
}

.a-button {
 border-radius: 6px;
 -moz-border-radius: 6px;
 position: relative;
 padding: 10px 25px;
 background-color: #3498DB;
 cursor: pointer;
 z-index: 100;
 color: #fff;
 /*font-weight: 800;*/
 font-size: 16px;
 text-decoration: none;
 text-shadow: none;
}
For the demo you can download it , just click the "pay with tweet" button, and follow the instruction

Download for free if you pay with a Tweet!

This project created by the team of
sevnteen sevn 


Posted on Thursday, October 10, 2013 by Oki Prasastio

2 comments

October 1, 2013

Jquery Progress Loader Flat

Di sini saya akan share salah satu karya saya, walaupun sederhana namun barangkali bisa bermanfaat bagi teman teman di sini saya akan share tentang Jquery simple progress loader bertemakan flat style , Langkah untuk membuat nya sederhana script script inti dari Fungsi ini hanyalah potongan javascript sederhana yaitu seperti di bawah ini : 



Penjelasan :

maksud dari
$( "#runbutton-two" ).click(function(){}
#runbutton-two adalah id div element yang menjadi tombol untuk menjalankan loader
$(document).ready(function(){}
Ini artinya saat dokumen di load , loader akan berjalan secara otomatis

disini saya akan memberikan salah satu div yang saya jadikan sebagai loadernya

<br />
<div class="skill-box">
<div class="skill-title">
<center>
SKILLS</center>
</div>
<div class="skill-desc-first">
Web development</div>
<div class="grey-bar">
<div class="progress prog-wdev-two">
</div>
</div>
<div class="skill-desc">
Web Design</div>
<div class="grey-bar">
<div class="progress prog-wd-two">
</div>
</div>
<div class="skill-desc">
Graphic Design</div>
<div class="grey-bar">
<div class="progress prog-gd-two">
</div>
</div>
<div class="runbutton" id="runbutton-two">
RUN IT!</div>
</div>


Penjelasan :

potongan script diatas adalah script untuk menjalankan loader secara manual , jadi saat div ber-id
runbutton-two
di klik maka
$( "#runbutton-two" ).click(function(){)}
akan berjalan dan akan menjalankan
$(".prog-wdev-two").animate({"width": "80%"}, 5000);
yang berarti div ber-class
prog-wdev-to
akan di jalankan/animasikan menggunakan fungsi animate , fungsi animate sendiri adalah membuat animasi dari width 0% menjadi 80% , dan arti dari 5000 yaitu animasi akan berjalan selama 5000/1000 detik atau sama dengan 5 detik
untuk css inti dari loader ini adalah sebagai berikut


.skill-box {
	float: left;
	width: 360px;
	/*height: 250px;*/
	background-color: #fff;
	margin-left: 40px;
	margin-top: 20px;
	padding-bottom: 30px;
	overflow: auto;
}

.grey-bar{
	width: 340px;
	margin-left: 10px;
	background-color: #ebebeb;
	height: 5px;
	position: relative;
}

.progress {
	width: 0px;
	height: 5px;
	background-color: #1AB0D7;
	position: relative;
	z-index: 10;
}



.progress-red {
	width: 0px;
	height: 5px;
	background-color: red;
	position: relative;
	z-index: 10;
}

.progress-orange {
	width: 0px;
	height: 5px;
	background-color: orange;
	position: relative;
	z-index: 10;
}


.progress-green {
	width: 0px;
	height: 5px;
	background-color: green;
	position: relative;
	z-index: 10;
}


.skill-title {
	color: #afafaf;
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 18px;
	margin: 0 auto;
	padding-top: 20px;
	/*padding-top: 15px;*/
	/*padding-bottom: 15px;*/
	padding-bottom: 30px;
}

.skill-desc {
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
	margin-left: 10px;
	color: #afafaf;
}

.skill-desc-first {
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0 auto;
	padding-top: 0px;
	padding-bottom: 10px;
	margin-left: 10px;
	color: #afafaf;
}

.runbutton {
	color: white;
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: center;
	background-color: #1AB0D7;
	padding: 10px;
	margin: 0 auto;
	width: 100px;
	margin-top: 20px;
	border-radius: 3px;
	-moz-border-radius; 3px;
	cursor: pointer;
}



untuk lebih jelasnya teman teman bisa mendownload contoh yang saya berikan , beserta demo page nya secara free Klik tombol di bawah , ikuti langkahnya

Download for free if you pay with a Tweet!

Projek ini di buat oleh tim sevnteen sevn 


Posted on Tuesday, October 01, 2013 by Oki Prasastio

No comments

September 22, 2013

Codeigniter merupakan open source aplikasi framework PHP yang berfungsi untuk memudahkan para programmer PHP dalam membuat program nya .

dan saat anda membuat suatu program web , tentu fungsi login / logout sering di pakai , bahkan sangat wajib dimiliki terutama untuk web yang memang memerlukan autentikasi user .

Disini saya akan membahas cara termudah bagaimana anda memasang fungsi login / logout pada framework CodeIgniter. 

Ikuti langkah langkah berikut 


Persiapan

  • Download Codeigniter terlebih dahulu disini saya akan memakai versi 2.1.4.
  • Pastikan semua fungsi web server apache/PHP/MySql berjalan baik.

Menginstall Codeigniter

untuk menginstall codeigniter anda cukup mengekstrak file zip file Codeigniter yang tadi anda download ke direktori htdocs (xampp) atau pada folder www (wamp).

Membuat database

buat terlebih dahulu database di phpmyadmin disini saya mencontohkan membuat database dengan menggunakan nama db_user lalu isikan table dengan struktur sebagai berikut.

CREATE TABLE `users` (
 `id` tinyint(4) NOT NULL AUTO_INCREMENT,
 `username` varchar(10) NOT NULL,
 `password` varchar(100) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

lalu tambahkan data pada tabel users dengan struktur data sebagai berikut.

insert into users (username, password) values ('admin', MD5('rahasia'));

Mengkonfigurasi database

Akses database

Update file application/config/database.php di folder codeigniter anda , lalu edit baris ini.

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'db_user';

Default Controller 

Kita harus memberi tahu Codeigniter untuk mengarahkan kita ke halaman login , update file application/config/routes.php di folder codeigniter anda dengan nama controller anda . disini saya akan membuat controller dengan nama login.
$route['default_controller'] = "login";

Default Libraries 

Dalam file application/config/autoload.php anda dapat mengkonfigurasi library default yang anda akan pakai di semua controller anda , untuk saat ini , saya akan menggunakan database dan session library , yang digunakan untuk meng-handle session user dan juga URL Helper untuk pemrosesan link.

$autoload['libraries'] = array('database','session');
$autoload['helper'] = array('url');

Encryption Key

Saat anda menggunakan library session, anda harus set encryption key pada file application/config/config.php.
$config['encryption_key'] = 'REALLY_LONG_NUMBER';

Script

ini adalah kumpulan script Controller, View dan Model yang akan kita gunakan untuk membuat login berfungsi.

User Model (application/models/user.php)

<?php
Class User extends CI_Model
{
 function login($username, $password)
 {
   $this -> db -> select('id, username, password');
   $this -> db -> from('users');
   $this -> db -> where('username', $username);
   $this -> db -> where('password', MD5($password));
   $this -> db -> limit(1);

   $query = $this -> db -> get();

   if($query -> num_rows() == 1)
   {
     return $query->result();
   }
   else
   {
     return false;
   }
 }
}
?>



Login Controller (application/controllers/login.php)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Login extends CI_Controller {

 function __construct()
 {
   parent::__construct();
 }

 function index()
 {
   if($this->session->userdata('logged_in'))
   {
     redirect('home', 'refresh');
   }
   else 
   {
      $this->load->helper(array('form'));
      $this->load->view('login_view');
   }
 }

}

?>


Login View (application/views/login_view.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Simple Login menggunakan CodeIgniter</title>
 </head>
 <body>
   <h1>Simple Login menggunakan CodeIgniter</h1>
   <?php echo validation_errors(); ?>
   <?php echo form_open('verifylogin'); ?>
     <label for="username">Username:</label>
     <input type="text" size="20" id="username" name="username"/>
     <br/>
     <label for="password">Password:</label>
     <input type="password" size="20" id="passowrd" name="password"/>
     <br/>
     <input type="submit" value="Login"/>
   </form>
 </body>
</html>


VerifyLogin Controller (application/controllers/verifylogin.php)

Controller ini digunakan untuk membuat validasi terhadap database
 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class VerifyLogin extends CI_Controller {

 function __construct()
 {
   parent::__construct();
   $this->load->model('user','',TRUE);
 }

 function index()
 {
   //Aksi untuk melakukan validasi
   $this->load->library('form_validation');

   $this->form_validation->set_rules('username', 'Username', 'trim|required|xss_clean');
   $this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|callback_check_database');

   if($this->form_validation->run() == FALSE)
   {
     //Jika validasi gagal user akan diarahkan kembali ke halaman login
     $this->load->view('login_view');
   }
   else
   {
     //Jika berhasil user akan di arahkan ke private area 
     redirect('home', 'refresh');
   }

 }

 function check_database($password)
 {
   //validasi field terhadap database 
   $username = $this->input->post('username');

   //query ke database
   $result = $this->user->login($username, $password);

   if($result)
   {
     $sess_array = array();
     foreach($result as $row)
     {
       $sess_array = array(
         'id' => $row->id,
         'username' => $row->username
       );
       $this->session->set_userdata('logged_in', $sess_array);
     }
     return TRUE;
   }
   else
   {
     $this->form_validation->set_message('check_database', 'Invalid username or password');
     return false;
   }
 }
}
?>



Home Controller (application/controllers/home.php)

Ini adalah halaman private, hanya user yang telah login yang dapat masuk
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
session_start(); //Memanggil fungsi session Codeigniter
class Home extends CI_Controller {

 function __construct()
 {
   parent::__construct();
 }

 function index()
 {
   if($this->session->userdata('logged_in'))
   {
     $session_data = $this->session->userdata('logged_in');
     $data['username'] = $session_data['username'];
     $this->load->view('home_view', $data);
   }
   else
   {
     //Jika tidak ada session di kembalikan ke halaman login
     redirect('login', 'refresh');
   }
 }

 function logout()
 {
   $this->session->unset_userdata('logged_in');
   session_destroy();
   redirect('home', 'refresh');
 }

}

?>



Home Page View (application/views/home_view.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Simple Login menggunakan CodeIgniter - Private Area</title>
 </head>
 <body>
   <h1>Home</h1>
   <h2>Selamat datang<?php echo $username; ?>!</h2>
   <a href="home/logout">Logout</a>
 </body>
</html>



Tutorial ini sebenarnya mudah untuk di pelajari jika anda benar benar mengikuti langkah langkah yang saya tulis . jika anda kesulitan anda bisa mendownload file contoh yang sudah saya buat disini.
Cara download klik tab file lalu klik Download

Good Luck! , semoga berhasil
Tutorial By Suave Digital Team




Tag: Creative Web Development , design graphic company , php development indonesia , suave digital , web development , web development bandung , web development indonesia , Php developer indonesia , php developer bandung indonesia , php developer cimahi indonesia , web development indonesia , web design indonesia , web design cimahi , web development cimahi , web development and graphic design company ,

Posted on Sunday, September 22, 2013 by Oki Prasastio

16 comments