Renungan

“Takkan bergeser kedua kaki manusia pada hari kiamat sampai selesai ditanya tentang 4 perkara: tentang UMURNYA, untuk apa dihabiskan; tentang MASA MUDANYA, untuk apa dipergunakan; tentang HARTANYA, dari mana diperoleh dan untuk apa dibelanjakan; dan tentang ILMUNYA, apa yang sudah diperbuat dengannya.”(HR. At-Tirmidzi no.2417)

Saturday, May 19, 2012

Tutorial External CSS I Website dengan CSS I Tutorial CSS Profesional I Contoh design website airlines



External Cascade Style Sheet ( External CSS )

Mukadimah Cascade Style Sheet atau CSS :
CSS atau Cascade Style Sheet digunakan untuk mengatur elemen yang ada di dalam halaman web, CSS dibuat berdasarkan World Wide Web Consortium atau yang lebih dikenal dengan W3C sebuah konsorsium untuk standarisasi web.
Kelebihan :
1. Penggunaan CSS akan terasa lebih mudah dalam mengatur style elemen halaman web.
2. CSS tidak membutuhkan tabel dalam menata layoutnya.
3.Kelebihan CSS dalam layout web adalah fleksibilitas dan dapat meminimalisasi besaran jumlah byte file dibandingkan layout menggunakan table.
Apabila design layout web dibuat menggunakan tabel , maka semakin banyak sel yang dibuat akan semakin besar ukuran file byte, dan akibatnya loading web pun membutuhkan waktu yang lebih lama.
Contoh standar penggunaan  CSS :
<!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> CSS Guide</title>
<style type='text/css'>
h1 {
                padding-left:300px;
                color : blue;
font family : "arial";
}
p {
padding-left:200px;
padding-right:400px;
</style>
</head>
</body>
<h1>Kolom tengah untuk  isi dari content</h1>
<p>Selamat datang di Website saya, sekarang saya lagi mendisain layout dengan CSS. Selamat datang di Website saya, sekarang saya lagi mendisain layout dengan CSS. Selamat datang di Website saya, sekarang saya lagi mendisain layout dengan CSS. Selamat datang di Website saya, sekarang saya lagi mendisain layout dengan CSS.</p>
</body>
</html>

Untuk menjalankan script diatas save dengan nama file tes.htm kemudian jalankan di browser

External Cascade Style Sheet
Perbedaan CSS External dan CSS Internal ialah script CSS Internal dibuat jadi satu file dengan script ( X )HTML sedangkan untuk CSS External script CSS terpisah dengan script ( X ) HTML nya pada file CSS itu sendiri.
Keuntungan CSS External : Dapat digunakan untuk berbagai macam web dengan sedikit penyesuaian dan penambahan URL pada attribut href.
Contoh Script CSS External :
Penambahan URL pada attribute href untuk menjalankan file CSS :




Dua Design halaman web yang berbeda dengan menggunakan CSS External yang sama :


Keterangan : Pada kedua halaman website diatas saya menggunakan file CSS yang sama. Di halaman website Bogor Air Indonesia, saya menghilangkan kolom BERGABUNG DENGAN GROUP KAMI DI FACEBOOK dan memanjangkan kolom Photo Galeri. Perbedaan tata letak konten dapat diatur sesuai dengan keinginan anda, perhatikan perbedaan Menu Atas dalam halam web untuk perusahaan Airlines yang saya pindahkan ke bawah pada kolom kiri, kolom Programmer saya pindah ke kolom kanan yang tadinya berada di kolom kiri, begitupun akan warna, block, tulisan, attach, hover, dll.
  
Tips : Dalam membuat layout dengan CSS yang baik, sangat penting melakukan pembagian elemen halaman ke dalam division-division yang telah dipetakan. Semoga bermanfaat dan dapat menginspirasi dalam design web programming.

Wednesday, May 9, 2012

Web dengan Framework Code Igniter PHP Share Artikel di Website Ala Javascript

Link Website dan Share Artikel, Foto ke Facebook, Twiter, Digg Ala Javascript

Mukadimah Website :
Website bisa di artikan juga sebagai salah satu bentuk promosi atau pemasaran sebuah produk maupun layanan, membuat website yang atraktif, inovatif, informatif dan user friendly bagi pengunjung tentu bukan hal mudah. Namun membangun sebuah website dapat sedikit terbantu dengan adanya framework yang memungkinkan kita membangun sebuah website dengan lebih cepat, salah satunya dengan Code Igniter yang merupakan satu diantara sekian banyak Framework PHP. Didalam Code Igniter terdapat konsep CMV atau Controller, Model dan View yang merupakan konsep pemisahan antara logic dan disain database dan tampilan.
Sedikit Script Link ke situs lain dalam sebuah Website :

Link ke Situs Lain
<div id="bg-judul">LINK</div>
<div id="isi-side">
<ul>
<li class="li-class">Departemen Kesehatan RI</li>
<script language="javascript">
document.write("<a href='http://www.depkes.go.id/home/?status=" + document.URL + "' target='_blank'>&#8226; www.depkes.go.id</a></a>");
</script>
<li class="li-class">Bogor Kota</li>
<script language="javascript">
document.write("<a href='http://www.bogorkota.go.id/home/?status=" + document.URL + "' target='_blank'>&#8226; www.bogorkota.go.id</a></a>");
</script>
</div>
<div id="bg-bawah-judul"></div>
</div>
Share ke Twitter, Facebook, Google+, Digg ala Java Script
<script language="javascript">
document.write("<a href='http://twitter.com/home/?status=" + document.URL + "' target='_blank'>&#8226; Twitter</a> | <a href='http://www.facebook.com/share.php?u=" + document.URL + "' target='_blank'>&#8226; Facebook</a> | <a href='http://www.gmail.com/submit?url=" + document.URL + "' target='_blank'>&#8226; Google+</a> | <a href='http://digg.com/submit?url=" + document.URL + "' target='_blank'>&#8226; Digg</a>");
</script>
Keterangan : dalam membangun sebuah website diatas saya menggunakan bahasa PHP dengan Framework Code Igniter web server menggunakan Apache dan Database Mysql.
Untuk melihat hasil dari script diatas bisa dilihat di contoh website yang saya buat.  Anda dapat melihatnya dalam video dibawah ini yang saya upload melalui Youtube, Semoga bermanfaat dan dapat menjadi inspirasi dalam Design Web Programming. 

AdSense

AdSense