Rotate dengan CSS3
Kemampuan baru pada CSS3 adalah rotate. Bisa digunakan untuk rotate tulisan maupun gambar. Biasanya untuk melakukan rotasi harus menggunakan script. Kini hal itu dipermudah dengan CSS3.
CSS3 saat ini baru diimplementasikan pada web browser major terbaru. Seperti Mozilla Firefox 3.5, Safari 4.0 dan Google Chrome 3.0beta.
Seorang rekan di CHIP Forum bertanya tentang pembuatan tombol miring dengan wujud foto. Berikut mockup dari aplikasi web yang ingin dibuatnya:
Original file here.
Untuk membuat tombol tersebut dengan CSS3 bisa menggunakan –moz-transform atau –webkit-transform atau –moz-transform-origin atau –webkit-transform-origin.
Pada contoh disini, saya menggunakan –moz-transform dan –webkit-transform.
img {
position: absolute;
border: 0;
-moz-box-shadow: black 0 0 7px 1px;
-webkit-box-shadow: black 0 0 7px 1px;
}
#home {
top: 50px;
left: 100px;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 10;
}
#portfolio {
top: 150px;
left: 80px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
z-index: 9;
}
#product {
top: 270px;
left: 100px;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
filter: matrix(10 10 10 10);
z-index: 8;
}
#about {
top: 410px;
left: 90px;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
z-index: 9;
}
#contact {
top: 520px;
left: 90px;
-moz-transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
z-index: 8;
}
Dengan HTML:
<img id="home" src="home.gif" />
<img id="portfolio" src="home.gif" />
<img id="product" src="home.gif" />
<img id="about" src="home.gif" />
<img id="contact" src="home.gif" />
Untuk menjaga agar ukuran file tetap kecil, saya hanya menggunakan satu gambar, yaitu home.gif.
Note: Untuk dapat melihat hasil demo ini, anda harus menggunakan web browser yang disebutkan diatas.
Mengenal CSS3 Selector
Saat ini CSS3 hanya dapat digunakan pada web browser terbaru. Seperti Safari 4.0, Opera 10 dan Firefox 3.5, Google Chrome 3.0. Sayangnya Internet Explorer 8 belum mengimplementasikan CSS3 ini.
Untuk contoh CSS dibawah, kita menggunakan HTML:
<ul> <li>Ganjil - 1</li> <li>Genap - 2</li> <li>Ganjil - 3</li> <li>Genap - 4</li> <li>Ganjil - 5</li> </ul>
Elemen Ganjil dan Genap
li:nth-child(odd) { color: blue; } li:nth-child(even) { color: green; }
Code diatas digunakan untuk memilih tag li yang ganjil dan genap.
Setiap Elemen Ketiga
li:nth-child(3n) { color: orange; }
Code diatas digunakan untuk membuat warna pada baris ketiga dan kelipatannya.
Elemen Tertentu
li:nth-of-type(3) { color: orange; } li:nth-child(5) { color: red; }
Selector hanya memilih baris ketiga dan kelima.
Elemen Pertama dan Terakhir
Elemen Pertama
li:first-of-type { color: blue; margin-left: 15px; }
Elemen Terakhir
li:last-of-type { color: green; margin-left: 15px; }
Dua Elemen Pertama
li:nth-child(-n+2) { color: green; margin-left: 15px; }
Dua Terakhir
li:nth-last-child(-n+2) { color: green; margin-left: 15px; }
CSS3 membuat tugas anda menjadi lebih mudah. Sayangnya belum semua web browser mengimplementasikannya saat ini. Harapannya semoga semua pengguna web browser meng-update web browser mereka. Agar apa yang ingin ditampilkan oleh web developer sesuai dengan yang dilihat end-user.
References: http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
Membuat RSS Feeds
Tambahkan pada <head>
<head> <link rel="alternate" type="application/rss+xml" href="http://url-php-anda/rss.php" /> </head>
Struktur XML
</channel>
<?xml version="1.0" ?> <rss version="2.0"> <channel> <title>Judul Pertama</title> <link>http://www.url-anda.com/page/1</link> <description>Hallo ini ada lah judul pertama hehehe..</description> </channel> <channel> <title>Judul kedua</title> <link>http://www.url-anda.com/page/2</link> <description>Kalo yang ini yang kedua</description> </channel> </rss>
Kalau ada gambar, tambahkan didalam <channel>
<image> <url>http://www.url-anda.com/hola.gif</url> <link>http://www.url-anda.com/page/1</link> </image>
Ini tutorial bikin blog simple pake Kohana
Diambil dari kohana-id@googlegroups.com
Blog nya ini simple banget.. cuma CR… bukan CRUD…
Semoga bisa sedikit membantu buat yang baru belajar Kohana..
Isi file application/controllers/welcome.php
<?php
class Welcome_Controller extends Template_Controller {
public $template = 'template'; // View yang terdapat pada 'views/template.php'
public function __construct() {
parent::__construct();
$this->template->menus = array('Home'=>'welcome',
'Article'=>'welcome/article',
'Post'=>'welcome/post');
}
public function index() {
$this->template->content = 'Ini Home';
}
public function article () {
$this->template->content = new View ('article');
$db = ORM::factory('article'); $data = $db->orderby('sent','DESC')->find_all();
$this->template->content->isi = $data;
}
public function post () {
$this->template->content = new View ('post');
}
public function save () {
$db = ORM::factory('article');
$db->subject = $_POST['subject'];
$db->message = $_POST['message'];
$db->sent = date('Y-m-d H:i:s');
$db->save();
url::redirect('welcome/article');
}
}
Isi file application/views/template.php
<html>
<head>
<title>Simple Blog with Kohana</title>
<style>
body {
background: black;
color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
}
a, a:visited {
color: orange;
text-decoration: none;
}
a:hover {
color: gold;
}
#wrapper {
width: 760px;
margin: auto;
}
input, textarea {
display: block;
}
.sent {
color: #333;
}
#menu li {
margin-right: 10px;
display: inline;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear {
clear: both;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Simple Blog with Kohana</h1></div>
<ul id="menu">
<?php foreach ( $menus as $menu => $url ): ?>
<li><?php echo html::anchor($url, $menu) ?></li>
<?php endforeach ?>
</ul>
<div id="content"><?php echo $content ?></div>
<div id="footer">Copyright© 2009 mul14</div>
</div>
</body>
</html>
Isi file application/views/article.php
<?php foreach ($isi as $v): ?> <h2><?php echo $v->subject ?></h2> <div>Sent: <?php echo $v->sent ?></div> <div><?php echo $v->message ?></div> <?php endforeach ?>
Isi file application/views/post.php
<?php
echo form::open('welcome/save');
echo form::label('subject', 'Subject') . form::input('subject');
echo form::label('message', 'Message') . form::textarea('message');
echo form::submit('send', 'Send');
echo form::close();
?>
Isi file application/models/article.php
<?php
class Article_Model extends ORM {}
MySQL nya:
CREATE TABLE IF NOT EXISTS `articles` ( `id` int(11) NOT NULL AUTO_INCREMENT, `subject` tinytext CHARACTER SET utf8 NOT NULL, `message` text CHARACTER SET utf8 NOT NULL, `sent` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ; INSERT INTO `articles` (`id`, `subject`, `message`, `sent`) VALUES (1, 'Vestibulum hendrerit', '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nisi. Praesent pharetra augue quis magna. Nulla eros. Donec quis urna in lorem nonummy iaculis. Suspendisse tempor venenatis mauris. Cras pulvinar purus id leo posuere imperdiet. Duis aliquam elementum ipsum. Proin non leo. Aliquam erat volutpat. Etiam ultricies pede eget nulla.</p>\r\n', '2009-06-28 03:15:16');
Jangan lupa sesuaikan isi application/config/config.php
Perbedaan Nol dan Kosong
Seringkali kita menyamakan nol dan kosong. Sebagai contoh untuk menyebutkan nomor telpon:
085233067811
Dibaca: Kosong delapan lima dua tiga tiga kosong enam tujuh delapan satu satu
Kalau menyebutkan alamat:
RT 05
Dibaca: RT nol lima
Padahal nol berbeda dengan kosong. Nol memiliki nilai, sedangkan kosong tidak memiliki nilai. Seharusnya awal penyebutan nomor telpon adalah nol. Karena tanpa angka nol, nomor telpon yang dituju tidak akan menyambung. Sedangkan alamat, angka nol tidak perlu. Surat yang dikirim ke alamat RT 5 juga akan sampai.
Bingung..?? Aku juga bingung jelasinnya kalau lewat tulisan 
Langsung aja contoh di pemograman. Aku pakai bahasa PHP.
<?php
$number = null;
echo is_numeric($number) ? "true" : "false";
//hasil yang keluar adalah false karena tidak dianggap angka
?>
Ini berbeda dengan
<?php
$number = 0;
echo is_numeric($number) ? "true" : "false";
//hasil yang keluar adalah true karena $number adalah angka
?>
Yang berkecimpung di dunia matematika dan pemograman saya rasa pasti mengetahui hal ini.
