Anda di halaman 1dari 43

Membuat CMS dengan Codeigniter | Part 1 INSTALATION

Jan 31, 2013 by Syafaatfm

Tutorial Membuat CMS dengan Codeigniter ini adalah dokumentasi (catatan pribadi) saya sebagai bahan belajar mengenai konsep codeigniter namun syukur Alhamdulillah juga bisa bermanfaat bagi para pembaca semua. Referensi tambahan tutorial ini diperoleh dari berbagai sumber di internet kemudian saya edit dan menulisnya kembali tentunya dengan gaya pembahasan saya sendiri. Dalam tutorial Membuat CMS dengan Codeigniter ini materi pembahasanya akan dibagi menjadi beberapa bagian atau berseri mulai dari part 1, part 2, part 3, dan seterusnya. Sebelum memulai Membuat CMS dengan Codeigniter ini saya asumsikan bahwa anda sudah mempunyai pengetahuan yang cukup baik mengenai PHP, HTML, CSS dan Web Development pada umumnya. Disamping itu anda juga harus sudah mempunyai pemahaman mengenai konsep MVC desain pattern sehingga pada materi-materi selanjutnya tidak terlalu mengalami kesulitan pemahaman. INSTALATION 1. Pertama download terlebih dahulu codeigniter pada alamat website http://codeigniter.com/. 2. Kemudian extrak codeigniter kedalam folder webserver anda . apabila anda menggunakan xampp, ekstrak file tersebut pada folder htdocs di computer local anda. 3. Buka folder instalasi codeigniter anda pada web browser dan anda akan mendapatkan tampilan seperti berikut:

Tampilan awal codeigniter

BACA JUGA YA...

Membuat CMS dengan Codeigniter | Part 2 TEMPLATING Membuat CMS dengan Codeigniter | Part 2 TEMPLATING Melanjutkan bab sebelumnya (INSTALATION codeigniter), pada materi lanjutan ini kita akan berhubungan ..

Download Kumpulan Ebook Misteri Dunia Kumpulan ebook berikut ini membahas seputar misteri-misteri dunia yang sempat membuat heboh khalayak dan mungkin belum juga terpecahkan ..

Mengatasi Masalah Title Tags Pada Google Webmaster Bagaimana cara mengatasi masalah Duplicate title tags, Missing title tags, Long title tags, Short title tags. Pada artikel ..

Membuat Incoming Search Terms Tagging Sederhana dengan PHP Untuk pengguna CMS yang berbasis wordpress pasti sudah tidak asing lagi dengan sebuah plugin yang namanya SEO Search Terms ..

Membuat Script Validasi URL Menggunakan fungsi filter_var() Membuat Script Validasi URL Menggunakan fungsi filter_var() - Selain menggunakan fungsi reguler expression untuk memvalidasi alamat url, ternyata di ..

Search engine keywords: membuat cms dengan codeigniter (26), membuat cms (20), membuat cms sendiri (11), cara membuat cms (11), cara membuat cms dengan codeigniter (8), Membuat CMS Sendiri dengan Codeigniter (7), cara membuat website dengan codeigniter (6), cara membuat cms sendiri (6), tutorial membuat cms dengan codeigniter (5), membuat cms dengan php (5), cara membuat web dengan codeigniter (5), membuat website dengan codeigniter (4), cara membuat cms dengan php (4), tutorial membuat website dengan codeigniter (4), membuat cms dari css html file (3

Membuat CMS dengan Codeigniter | Part 2 TEMPLATING


Feb 2, 2013 by Syafaatfm

Membuat CMS dengan Codeigniter | Part 2 TEMPLATING

Melanjutkan bab sebelumnya (INSTALATION codeigniter), pada materi lanjutan ini kita akan berhubungan dengan masalah TEMPLATING. Templating bisa dikatakan adalah segala hal yang berhubungan dengan User Interface design seperti theme, web layout, dll. Seperti kita ketahui bahwa codeigniter hanyalah sebuah kumpulan framework php, oleh karena itu segala hal yang menyangkut dengan UI design, theme, dari sebuah aplikasi web harus kita buat dan tentukan sendiri karena codeigniter tidak menyediakan tempat penginstalan tema layaknya CMS wordpress, Joomla!, Drupal, dl. Untuk mempermudah dan mempersingkat waktu belajar, disini saya telah memanfaatkan contoh theme jadi yang bisa di download gratis pada alamat http://www.freecsstemplates.org/download/zip/widgetlike/. Kita akan memanfaatkan tema jadi tersebut sebagai tema dasar aplikasi web yang akan kita buat ini. Setelah theme kita download dan di ekstrak, lalu kita buka file index.html dengan teks editor(notepad++). Agar tidak terjadi duplikasi dan perulangan menulis kode hrml yang sama maka File index.html ini akan kita pecah menjadi area header, sidebar, content, dan footer. Masing-masing area tersebut akan digabungkan dalam satu halaman utuh yang dinamakan template.php dalam folder view. 1. Membuat file template Pertama kita buat terlebih dulu file template.php , file ini ditaruh pada folder application/view codeigniter. Lalu kita isikan scriptnya seperti berikut:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 3
<!-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4 5 6 7 8 9 http://www.freecsstemplates.org 10 11Released for free under a Creative Commons Attribution 2.5 License 12 13&nbsp; 14 15Name 16
: WidgetLike Design by Free CSS Templates &nbsp;

17Description: A two-column, fixed-width design featuring black content


area background.

18 19 20 21 22 23&nbsp; 24 25--> 26 27<html xmlns="http://www.w3.org/1999/xhtml"> 28 29<head> 30 31<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 32 33 34 35 36 37 38
<link href="<?php echo base_url() ?>widgetlike/style.css" 39rel="stylesheet" type="text/css" media="screen" /> <meta name="keywords" content="" /> <title>Widgetlike by FCT</title> Released : 20081016 Version : 1.0

<meta name="Premium Series" content="" />

40 41</head> 42 43 44 45 46
<?php $this->load->view('header') ?> <!-- start header --> <body>

47

48 49<!-- end header --> 50 51<!-- start content --> 52 53 54 55 56


<div id="bg5"> <div id="bg4"> <div id="bg3">

57 58 59 60 61 62<?php if (!empty($page)): ?> 63 64<?php $this->load->view($page); ?> 65 66<?php else: ?> 67 68<?php $this->load->view('error_page'); ?> 69 70<?php endif; ?> 71 72 73 74 75
<!-- start sidebars --> <!-- end content --> </div> <div id="content"> <div id="page">

76 77 78
<?php $this->load->view('sidebar') ?>

79 80<!-- end sidebars --> 81 82<div style="clear: both; height: 40px;">&nbsp;</div> 83 84 85 86 87


</div> <!-- end #page --> </div>

88 89 90 91 92 93<?php $this->load->view('footer') ?> 94 95</body> 96 97</html> 98 99


</div> </div>

Perhatikan baris 47, 79, 95, masing-masing area tersebut diisi oleh view yang disatukan kedalam file template.php. Kemudian kita lihat pada baris 63-71, baris tersebut merupakan area konten website yang dinamis, yang mana maksud dari kode tersebut adalah apabila variabel $page tidak kosong maka tampilkan $page sebagai konten web, kecuali itu tampilkan halaman error (error_page). Lalu kita buat file header.php seperti berikut:
1 <div id="bg1"> 2 3
<div id="header"> <h1><a href="#">WidgetLike<sup>1.0</sup></a></h1> <h2>By <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> +

4 <a href="http://www.freecsstemplates.org">FCT</a></h2>

5 6 7 8 9 10

</div> <!-- end #header --> </div> <!-- end #bg1 --> <div id="bg2"> <div id="header2"> <div id="menu">

11 <ul> 12 <li><a href="#">Photos</a></li> 13 <li><a href="#">Portfolio</a></li> 14 <li><a href="#">Friends</a></li> 15 <li><a href="#">About</a></li> 16 17 18 19


<li><a href="#">Contact</a></li> </ul> </div> <!-- end #menu --> <div id="search">

20 <form method="get" action="#"> 21 <fieldset> 22 <input type="text" name="q" value="search keywords" id="q" class="text" /> 23 <input type="submit" value="Search" class="button" /> 24 </fieldset> 25 26 27 28
</form> </div> <!-- end #search --> </div> <!-- end #header2 -->

29</div> 30 31 32

Script diatas merupakan potongan dari file index.html mulai baris 31 54. Setelah itu kita buat file sidebar.php:

1 2 3 4 5

<div id="sidebar"> <ul> <li> <h2>Tempus aliquam</h2>

<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, 6 bibendum sit amet aliquam. <a href="#">Read more&hellip;</a></p>

7 8 9 10 11 12 13

</li> <li> <h2>Ipsum sed interdum</h2> <ul> <li><a href="#">Sed vel quam vestibulum</a></li> <li><a href="#">Pellentesque morbi sit veroeros</a></li> <li><a href="#">Magna interdum donec pede</a></li> <li><a href="#">Nisl gravida iaculis auctor vitae</a></li>

14 <li><a href="#">Bibendum sit amet mauris cras</a></li> 15 <li><a href="#">Adipiscing libero et risus donec</a></li> 16 <li><a href="#">Venenatis porttitor morbi quam</a></li> 17 </ul> 18 </li> 19 20
</ul> </div>

footer.php
1
<div id="footer"> <p>(c) 2008 Sitename.com. Design by <a href="http://www.freecsstemplates.org/">FCT</a></p> </div> <!-- end #footer -->

2href="http://www.nodethirtythree.com/">nodeThirtyThree</a> + <a 3 4

Semua file diatas baik template.php, header.php, sidebar.php, footer.php ditaruh dalam folder view codeigniter. 2. Membuat file default controller

Controller ini nantinya yang akan mengatur dan menghubungkan masing-masing file template yang kita buat, tanpa controller ini template tidak akan berfungsi dengan semestinya. Buatlah file pages.php dalam folder controllers:
1 2 3 4 5 6 7 8 class Pages extends CI_Controller { 9 10 var $template = 'template'; 11 12 function __construct() { 13 parent::__construct(); 14 } 15 16 17 18 19 20 21 22?> 23
} function home() { $data['page'] = 'pages/home'; $this->load->view($this->template, $data); } /* * To change this template, choose Tools | Templates * and open the template in the editor. */ <?php

Pada baris 16 diatas terdapat function home(), fungsi inilah yang bertugas mengatur konten web yang dinamis. Melalu class Pages kemudian nilai propertinya digabungkan dengan function home() dan dikumpulkan pada variabel $data untuk kemudian di aplikasikan pada nilai properti $this->template. 3. Membuat view untuk controller pages

Apabila kita melihat pada class pages sebelumnya terdapat perintah pages/home pada baris 17, maksudnya adalah fungsi akan mencari file yang bernama home.php dalam folder pages pada view. Maka dari itu kita akan membuat file home.php yang disimpan pada folder pages (new folder) dalam folder view. File home.php merupakan konten dari website kita nantinya:
<div class="post">

1 2 3 4

<div class="title"> <h2><a href="#">Lorem ipsum dolor</a></h2> <p>10.14.08</p> </div> <div class="entry"> <img src="images/img01.jpg" alt="" width="150"

5 height="102" class="left" />


<p>Widgetlike is a free template by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> and <a 7 href="http://www.freecsstemplates.org">FCT</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. The photo to the 8 left is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use this template for both commercial or personal use. I only ask 9 that you link back to <a href="http://www.nodethirtythree.com/">my 10site</a> in some way. Note: This is also available as a <a href="http://www.freewpthemes.net/preview/widgetlike">WordPress 11theme</a>.</p>

12 </div> 13
<div class="meta"> <p class="credit">Posted by <a href="#">Someone</a> on October 14,

142008</p>

15 <p class="links"><a href="#" class="comments">Comments (18)</a> 16 17 18


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" class="more">Read more</a></p> </div> </div> <div class="post">

19 <div class="title"> 20 <h2><a href="#">Blandit veroeros</a></h2> 21 <p>10.11.08</p> 22 </div> 23


<div class="entry"> <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus

24dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, 25

bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris <a href="#">sed elit venenatis</a> 26porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat.</p>

</div> <div class="meta"> <p class="credit">Posted by <a href="#">Someone</a> on October 11, 2008</p> <p class="links"><a href="#" class="comments">Comments (18)</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" class="more">Read more</a></p> </div> </div>

Baris kode diatas merupakan potongan dari file index.html sebelumnya mulai dari baris 62 74 . 4. Membuat tampilan halaman error page Sebenarnya halaman ini merupakan opsional saja, boleh diterapkan boleh juga tidak. Karena dalam aplikasi codeigniter sendiri sudah terdapat fungsi untuk menampilkan pesan-pesan error tersendiri. Apabila kita melihat lagi pada file template sebelumnya terdapat baris perintah untuk menampilkan error_page apabila tidak ditemukan halaman yang dicari (baris ke-69). Kita buat file error_page.php dalam folder view:
1
<div class ="post"> <h1 class="title">Sorry, Sepertinya halaman yang anda cari tidak

2ditemukan</h1></div>

5. Mengatur configurasi aplikasi web Pengaturan konfigurasi ini diperlukan supaya template yang kita buat ini bisa berjalan dengan baik. Yang perlu kita ubah disini adalah pada file config.php, autoload.php, dan routes.php. Silahkan buka folder application/config untuk menemukan file-file tersebut. Buka file config.php dengan teks editor, kemudian edit pada baris $config['base_url'], sesuaikan dengan letak aplikasi codeigniter anda. Contoh: $config['base_url'] = http://localhost/latihan/; Kemudian kita beralih pada file autoload.php, pada baris ke-67 kita rubah isinya menjadi $autoload*'helper'+ = array(url);. Yang terakhir pada file routes.php, pada baris ke-41 kita rubah isinya menjadi $route['default_controller'+ = pages/home;. Apabila langkah-langkah diatas diikuti dengan benar, maka hasilnya akan seperti berikut:

Halaman awal template codeigniter Lihat demo disini Download source code di alamat ini http://www.4shared.com/zip/71sXJcj3/latihan.html

Membuat Script Validasi URL Menggunakan fungsi filter_var()


Apr 23, 2013 by Syafaatfm Membuat Script Validasi URL Menggunakan fungsi filter_var() - Selain menggunakan fungsi reguler expression untuk memvalidasi alamat url, ternyata di PHP kita juga bisa menggunakan fungsi built-in filter_var() untuk memvalidasi alamat url dengan cara yang lebih mudah. Dibawah ini adalah salah satu contohnya : $url = http://contohweb.com; $result = filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED); if ( $result ) {

echo Valid URL; } else { echo Not A Valid URL; } Script diatas akan memvalidasi alamat url dari variabel $url, apabila alamat url yang diberikan valid maka pada browser akan menampilkan pesan Valid URL, dan sebaliknya apabila url yang diberikan salah maka browser akan menampilkan pesan Not A Valid URL .

Contoh Membuat Sistem Paging Halaman dengan PHP dan MySQL


Mar 26, 2013 by Syafaatfm Untuk website yang menampilkan banyak berita atau artikel hingga ratusan atau bahkan ribuan kurang efektif apabila berita tersebut ditampilkan dalam satu halaman, tentunya akan terjadi scroll yang teramat panjang dan memerlukan loading yang lama sehingga akan mengganggu kenyamanan bagi para pembaca. Nah, dari situlah sistem paging dibuat, Sistem paging sendiri adalah sebuah cara dalam menampilkan data secara bertahap dan dibagi menjadi beberapa halaman dengan penomoran urut sesuai panjang halaman atau dengan memberi link Next dan Previous untuk menampilkan halaman Selanjutnya atau Sebelumnya. Sebelum mulai membuat script PHP Paging-nya, kita harus menentukan terlebih dulu berapa baris data yang harus ditampilkan dalam satu halaman nantinya. Sebagai contoh disini kita akan menampilkan 4 baris record data pada setiap halaman dari 20 record data pada database MySQL secara urut, untuk itu kita bisa membuat rumusanya seperti berikut:
TOTAL HALAMAN = Total Record Data(MySQL) / Data yang ditampilkan perhalaman

TOTAL HALAMAN = 20 / 4 = 5 Halaman Untuk mengambil data dari database MySQL, kita ambil record data pertama hingga keempat karena nanti perhalaman hanya akan menampilkan 4 baris record data dan kelipatan 4 untuk halaman selanjutnya. Pengambilan data untuk halaman pertama dimulai dari record ke-0 hingga record ke-3 dan record ke-4 hingga record ke-7 untuk halaman selanjutnya, dst. Dalam MySQl record pertama dimulai dengan angka 0 .

Dari logika diatas kita mendapatkan satu rumus lagi untuk menetukan record data pertama, yaitu :
(Halaman saat ini(Nomor) 1) * Data yang ditampilkan perhalaman

Mengambil contoh kasus diatas bahwa data akan ditampilkan hanya 4 baris perhalaman dari 20 record data sehingga record data yang diambil untuk masing-masing halaman adalah :
Record data HalamanPertama = (1 1) * 4 = 0

Record data Halaman Kedua = (2 1) * 4 = 4 Record data Halaman ketiga = (3 - 1) * 4 = 8 Record data Halaman keempat = (4 1) * 4 = 12 Record data Halaman kelima = (5 1) * 4 = 16 Record data Halaman Keenam = (6 1) * 4 = 20 Algoritma pemrogramannya sudah kita tentukan selanjutnya adalah membuat coding PHPnya secara langsung:
<?php

function buat_paging($curPage,$totalRec,$maxRec){ $totalPage; $totalPage=ceil($totalRec/$maxRec); $str="; /*Tombol Prev*/ if($curPage>1){ $prevPage = $curPage-1; $str.= .makeLink(prev,?p=.$prevPage). ; } /*-Untuk Page Number-*/ for($i=1;$i<=$totalPage;$i++){ if($i==$curPage){ $bold=true;

}else{ $bold=false; } $str.= .makeLink($i,?p=.$i,$bold). ; } /*Tombol Next*/ if($curPage<$totalPage){ $nextPage=$curPage+1; $str.= .makeLink(next,?p=.$nextPage). ; } return $str; } function makeLink($str,$url,$bold=false){ if($bold){ $str=<b>.$str.</b>; } return <a href=.$url.>.$str.</a>; } //connection $con = mysql_connect(localhost,root,"); mysql_select_db(paging,$con); $total=mysql_query(select * from berita,$con); $total=mysql_num_rows($total); $total=ceil($total/4); $curPage=abs((int)$_GET['p']); if ($curPage==null){$curPage=1;}

elseif($curPage>$total){$curPage=$total;} $maxRec=4; $startRec = ($curPage-1)*$maxRec; $sql = select * from berita limit .$startRec.,.$maxRec; $rs=mysql_query($sql,$con); while ($row = mysql_fetch_array($rs)) { echo Ini adalah : .$row['artikel'].<br />; } $total_record=mysql_query(select * from berita,$con); $total_record=mysql_num_rows($total_record); echo <br>; echo buat_paging($curPage,$total_record,$maxRec); ?> Dan untuk database MySQL-nya bisa dibuat seperti dibawah ini : CREATE DATABASE IF NOT EXISTS `paging`; USE `paging`; CREATE TABLE IF NOT EXISTS `berita` ( `id` int(11) NOT NULL AUTO_INCREMENT, `artikel` varchar(100) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB; INSERT INTO `berita` (`id`, `artikel`) VALUES (1, Artikel 1), (2, Artikel 2), (3, Artikel 3), (4, Artikel 4), (5, Artikel 5), (6, Artikel 6), (7, Artikel 7), (8, Artikel 8), (9, Artikel 9), (10, Artikel 10), (11, Artikel 11), (12, Artikel 12), (13, Artikel 13), (14, Artikel 14), (15, Artikel 15), (16, Artikel 16), (17, Artikel 17), (18, Artikel 18), (19, Artikel 19), (20, Artikel 20); Hasil akhirnya nanti kurang lebih akan tampak seperti gambar dibawah ini:

Download source code paging halaman dibawah ini :


http://www.4shared.com/zip/XyP1aIDS/paging.html

Membuat Tombol Print Halaman Dengan Javascript


Apr 6, 2013 by Syafaatfm Anda bisa menambahkan fasilitas tombol print halaman javascript ini pada masing-masing halaman website yang anda kehendaki sehingga bisa memudahkan bagi pengunjung apabila mereka bermaksud mengeprint artikel atau halaman tertentu yang mereka inginkan. Tombol Print Halaman Dengan Javascript dibuat sangat sederhana dan sedikit coding sehingga seseorang yang awam dalam pemrograman javascript sekalipun bisa langsung mudah memahami maksud scriptnya. Dan berikut adalah kode javascriptnya :
<script LANGUAGE=JavaScript>

document.write(<input type=button name=print value=Print + onClick=javascript:window.print() /> + this page!); </script> Cara penggunaanya adalah letakkan script diatas pada halaman tertentu yang anda kehendaki, misalnya bisa diletakkan pada bagian atas dari setiap artikel ataupun halaman tertentu terserah anda. Langsung praktek gannnn.

Cara Mengubah Warna Background Dengan Javascript


Dec 15, 2012 by Syafaatfm merubah background, cara background blog, merubah warna, contoh java script, cara merubah background, merubah warna background, membuat background di blog, cara buat button, cara buat background di blog, buat background, blogger background html Adakalanya kita menginginkan suatu objek background(Form, Table, textarea, body, dll) bisa berubah-rubah warna saat mouse berada pada objek tersebut(mouse hover) dan berubah warna lagi saat mouse keluar dari objek tersebut(Mouse out). Tentunya kita bisa melakukan hal ini dengan menggunakan kode javascript, untuk itu bagaimana langkah-langkah Cara Mengubah Warna Background Dengan Javascript berikut kita simak bersama-sama.

Oke, pada contoh dibawah ini kita akan mengubah warna background sebuah table, warna background akan berubah pada saat mouse hover dan akan berubah warna lagi pada saat mouse out.
<html>
<head> </head> <body> <table border=1 width=500 bgcolor="blue"> <tr> <td onmouseover="this.bgColor='green' " onmouseout="this.bgColor='blue' ">Example</td></tr> <tr> <td onmouseover="this.bgColor='green' " onmouseout="this.bgColor='blue' ">Example2</td> </tr></table> </body></html>

Live Demo :
Example Example2

Contoh selanjutnya kita akan mengubah warna background halaman website pada saat sebuah button di klik
<html>

<head> <script> function change(){document.bgColor="lightgreen";} </script> </head> <body> <input type="button" onclick="change()" value="change"> </body></html>

Live Demo Klik disini Dan selanjutnya silahkan di kembangkan sendiri sesuai keinginan dan kreatifitas masingmasing. Informasi mengenai sejarah singkat dan fungsi-fungsi javascript bisa di baca pada artikel Apa Itu JavaScript(Tentang JavaScript)

Cara Membuat Digital Clock Dengan Javascript | Jam Digital


Dec 23, 2012 by Syafaatfm

Hai

Pada artikel kali ini kita akan mencoba bereksperimen bagaimana cara membuat jam digital dengan kode javascript. Jam digital yang akan kita buat kali ini adalah bersifat live clock, jadi waktu yang ditampilkan pada browser adalah sesuai dengan pengaturan waktu yang ada di komputer kita/user (client side). Jam digital ini akan menampilkan hari ini, bulan, tanggal, tahun, dan waktu saat ini dengan format Hari mm/dd/yyyy jam:menit:detik PM/AM . Oke langsung saja kita tulis kode javascriptnya berikut ini : Note: Kode dibawah ini ditaruh antara tag <head>dan</head>
<script type=text/javascript>
function getCurrentTime()//membuat fungsi baru { var now = new Date(); //membuat objek untuk mengambil waktu saat ini var mySecs = now.getSeconds(); //Untuk detik var curHour = now.getHours();//untuk jam var curMin = now.getMinutes();//untuk menit var day = now.getDay();//untuk hari var date = now.getDate();//tanggal var year = now.getFullYear();//untuk tahun YYYY var month = now.getMonth();//untuk bulan mm var days = new Array();//membuat objek array untuk menampilkan nama hari days[0] = "Sunday"; days[1] = "Monday"; days[2] = "Tuesday"; days[3] = "Wednesday"; days[4] = "Thursday";

days[5] = "Friday"; days[6] = "Saturday"; var suffix = "AM"; if(mySecs < 10) { mySecs = "0" + mySecs; } if(curMin < 10) { curMin = "0" + curMin; } if(curHour == 12 && curMin >= 1) { suffix = "PM"; } if(curHour == 24 && curMin >= 1) { curHour-= 12; suffix = "AM"; } if(curHour > 12) { curHour-= 12; suffix = "PM"; } document.getElementById('time').innerHTML=(days[day] + " " + (month +1) + "/" + date + "/" + year + " " + curHour + ":" + curMin + ":" + mySecs + " " + suffix);//menampilkan jam digital pada browser } </script>

Lalu kita buat lagi satu kode tambahan:


onload=setInterval(getCurrentTime(), 1000);/*mengatur interval waktu agar diperbaruhi setiap 1 detik */

kode ini di taruh pada tag <body kode disini > Nah, sekarang bagaimana cara menampilkanya pada halaman website?. Kita buat lagi satu kode berikut : <div id=time></div> Kode ini berfungsi untuk menampilkan jam digital pada halaman website. Anda tinggal menaruh kode tersebut pada halaman website yang telah ditentukan, tentunya harus diantara tag <body> dan </body>. Untuk demo Jam digital yang sudah saya buat klik disini

Script Untuk Mengambil dan Menampilkan IP Address via Javascript, ASP, atau PHP
Oct 4, 2012 by syafaatfm Untuk menampilkan IP via Javascript Script :
var ip= <!#echo var=REMOTE_ADDR>;

document.write(<strong>IP Address anda adalah </strong>: +ip+ );

Untuk menampilkan IP via ASP Script :


<% Response.Write Hello! Your IP Address is: & Request.ServerVariables(REMOTE_ADDR) %> Untuk menampilkan IP via PHP

Script :
<?php

$remote_address = getenv(REMOTE_ADDR); echo IP Address anda adalah $remote_address.; $browser_type = getenv(HTTP_USER_AGENT); echo Anda sedang menggunakan browser $browser_type.; ?>

Menuliskan Komentar Pada JavaScript


Nov 17, 2012 by Syafaatfm

Komentar atau Comments pada rangkaian kode javascript berguna ketika seorang programmer ingin memberi sebuah keterangan atau fungsi dengan menyisipkan suatu kalimat tertentu pada kode-kode javascript yang di tulisnya. cara penulisan komentar pada javascript ada dua macam: 1. Singel line comments Cara penulisan komentar (comments) pada javascript yang terdiri dari hanya satu line baris kalimat. Penulisan singel line comments di mulai dengan tanda // . Contoh :
1 2 3
<html> <body> <script type="text/javascript">

4 // Write a heading 5 document.write("<h1>This is a heading</h1>"); 6 // Write two paragraphs: 7 document.write("<p>This is a paragraph.</p>"); 8 document.write("<p>This is another paragraph.</p>"); 9
</script> </body> </html>

10 11

2. Multiline Comments Adalah cara penulisan komentar(comments) pada javascript yang lebih dari satu baris kalimat. Multiline comments di mulai dengan tanda /* dan di akhiri dengan tanda */ . Contoh :
1 <html> 2 <body> 3 4 5 6
<script type="text/javascript"> /* The code below will write one heading and two paragraphs */

7 document.write("<h1>This is a heading</h1>"); 8 document.write("<p>This is a paragraph.</p>");

9 document.write("<p>This is another paragraph.</p>"); 10</script> 11 12 13


</body> </html>

Demikian sedikit uraian dari saya tentang bagaimana cara menuliskan komentar pada javascript. Semoga bermanfaat.

Kumpulan Kode JavaScript Siap Pakai


Oct 4, 2012 by syafaatfm Pada tulisan kali ini jegulo.net akan share beberapa kode JavaScript siap pakai yang cukup berguna anda tinggal copy paste ke dalam website/blog untuk melihat hasilnya. 1. Menonaktifkan Klik Kanan Pada Mouse Tambah kode javascript dibawah ini pada dokumen HTML anda : <body oncontextmenu=return false;> Sekedar tambahan, selain fungsi oncontextmenu ada juga fungsi lain yang sering digunakan yaitu onkeydown, onclick, dan onmousedown. Silahkan dicoba dan di otak-atik sendiri untuk mengetahui masing-masing fungsi tersebut. 2. Script untuk mencegah tindakan copy paste Apabila anda menginginkan website anda terlindungi dari tindakan copy paste konten atau sekedar ingin mencegah seseorang agar tidak mudah melihat source html dari website anda. Berikut source kodenya: <script language=JavaScript> var message=Maaf, gak boleh klik kanan sob!!; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; }

} function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function(alert(message);return false) Bila ada seseorang yang mengakses website anda, akan tampil kotak peringatan saat mouse di klik kanan yang menampilkan alert box Maaf, gak boleh klik kanan sob!! . 3. Menampilkan PopUp Window PopUp Window banyak di gunakan situs-situs advertiser sepeti z*d guna menampilkan keterangan iklanya. Biasanya PopUp Window muncul ketika visitor mengeklik banner atau gambar. Berikut source kodenya: <html> <head> <title> </title> <script> function popUp(URL) { day = new Date(); id = day.getTime(); eval(page + id + = window.open(URL, + id + , toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=25 0,left = 304,top = 150.5);); } </script> </head> <body> <a href=javascript:popUp(popup.html)>popup</a> </body> </html>

Perhatikan pada tag : <a href=javascript:popUp(popup.html)>popup</a> Pada saat mouse mengklik kata : popup, javascript akan memanggil fungsi popUp() dengan membawa link popup.html. Window popup akan muncul dengan menampilan halaman popup.html. Karenanya kita siapkan file popup.html,. Berikut source kodenya : <html> <head> <title>popup</title> </head> <body> Halaman PopUp </body> </html> Kita dapat mengatur properties dari window popup yang akan dimunculkan dengan mengatur setting properties pada fungsi popup(). Standar window popup yg sering digunakan adalah mensetting semua properties menjadi 0 (disable), kecuali ukuran width untuk lebar popup & height untuk tinggi popup. Semua setting tersebut dapat kita atur sesuai kebutuhan. 4. Buka Window Baru Pada Saat Menutup Window Script di bawah ini bisa di bilang cukup jahil juga apabila di pasang pada website/blog , karena saat halaman di tutup/close dengan mengklik tanda x maka yang terjadi akan di tampilkan halaman lain lagi. Berikut source kodenya: <html> <head> <title> </title> <script> <! Begin function popUp(URL) { day = new Date(); id = day.getTime(); eval(page + id + = window.open(URL, + id + , toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=25 0,left = 304,top = 150.5);); } // End > </script> </ head > <body onunload=javascript:popUp(popup.html)> Tutup halaman web ini maka akan terbuka window baru secara otomatis

</ body > </html> Perhatikan pada tag < BODY BGCOLOR=#FFFFFF onunload=javascript:popUp(popup.html) > properties : onunload inilah yang akan memanggil fungsi javascript untuk membuka halaman popup.html pada saat window browser utama ditutup. Oleh karena itu anda harus menyiapkan file popup.html , bisa diambil dari source file popup.html di atas. 5. Pembatasan Input Textbox Hanya Numerik Script ini di gunakan apabila kita hanya menginginkan penginputan suatu form di batasi oleh numeric atau angka saja. Misalnya kita membuat form input untuk No. Telp, kita bisa menggunakan script ini. Berikut source kodenya: <html> <head> <title>Untitled Document</title> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> </head> <body> <form name=form1 method=post action="> <input name=periode type=text id=periode size=15 maxlength=15 onKeypress=if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;> </form> </body> </html> Properties onKeyPress dengan kondisi diatas akan membatasi berfungsinya tombol di keyboard sebatas numerik (angka) saja yang bisa diinput. Kita juga dapat mengubah kondisi tersebut sesuai keinginan kita dengan mengganti atau menambahkan kode. Untuk kasus diatas, numeric (angka) pada tombol keyboard adalah diantara kode 48 sampai kode 57. Selengkapnya (http://rmhh.co.uk/ascii.html). 6. Counter Karakter Pada TextArea

Apabila anda pernah mengunjungi sebuah situs yang menyediakan layanan sms gratis misalnya, dalam form inputan text pesan di batasi hanya 160 karakter. Berikut source kodenya: <head> <title</title> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1>

<script> function CountMax() { var wert,max; max = 100 wert = max-(document.form1.question.value.length); if (wert < 0) { alert(Maaf, batas maksimum pengisian adalah + max + karakter!); document.form1.question.value = document.form1.question.value.substring(0,max); wert = max-(document.form1.question.value.length); document.form1.rv_counter.value = wert; } else { document.form1.rv_counter.value = max-(document.form1.question.value.length); } } </script> </head> <body > <form name=form1 method=post action="> <textarea name=question cols=60 rows=3 id=question OnFocus=CountMax(); OnClick=CountMax(); ONCHANGE=CountMax(); onKeydown=CountMax(); onKeyup=CountMax(); wrap=virtual></textarea> <font face=Arial, Helvetica, sans-serif, Bookman Old Style, Comic Sans MS size=2>sisa <input name=rv_counter type=TEXT size=3 maxlength=3 value=100readonly></form> </body> </html> Perhatikan pada properties TextArea tsb, setiap kali kita mengetikkan karakter atau angka di TextArea, maka fungsi javascript CountMax akan selalu menghitung jumlah karakter atau angka yang terisi pada TextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter) dibawahnya. Pengisian tsb berupa pengurangan maksimal input keyboard yg didefinisikan dgn variable max=100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard sama dengan atau lebih besar dari variable max=100, maka fungsi alert akan ter-eksekusi. Demikian share kali ini semoga bisa di ambil manfaatnya. Terimakasih.

Meletakkan Kode JavaScript Pada Halaman Website


Sep 4, 2012 by syafaatfm JavaScript yang di tulis pada halaman website akan di eksekusi secara langsung oleh browser. Atau barangkali kita menginginkan kode JavaScript di eksekusi ketika halaman di muat atau pada kasus-kasus lain seperti ketika user mengklik suatu button. Untuk hal ini kita bisa menggunakan function untuk menyimpan kode-kode JavaScript. Mengenai function akan di jelaskan pada materi selanjutnya.

Script pada tag <head> Letakkan function di bawah tag <head>. Dengan cara ini script di letakkan pada satu tempat dan tidak tercampur dengan konten website. Perhatikan contoh di bawah ini: <html>
<head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html> Output:

Alert box result Jika kita tidak menginginkan script di letakkan dalam function, atau hendak menuliskan konten halaman, script harus di letakakn pada tag <body>. Perhatikan contoh berikut:
<html>

<head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html> and the result:

Script pada tag <head> dan <body> Kita bisa meletakkan script sampai berapapun yang kita mau pada tag <body> maupun <head> section.
<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script></head> <body onload="message()"> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>

Pada pembahasan kali ini kita sudah mempelajari bagaimana Meletakkan Kode JavaScript Pada Halaman Website secara inline atau di antara tag <head> . Namun bagaimana apabila kita menginginkan suatu code JavaScript di letakkan di luar halaman website atau istilahnya external JavaScript, kita akan mempelajarinya lebih lanjut bagaimana Menggunakan Eksternal JavaScript. Referensi : W3School JavaScript and Ajax Tutorial

Contoh Sederhana Kode Javascript dan Penggunaanya


Aug 11, 2012 by syafaatfm Untuk mencoba semua kode javascript yang anda lakukan adalah mengcopy salah satu script yang ada di bawah ini misalnya dengan notpade++ atau program file editor lain kesukaan anda , pastekan script ke dalam notepad dan simpan dengan extensi .html misal file_anda.html. Kemudian buka menggunakan browser yang anda pakai.

Alert Box Penggunaanya: Klik Button dan sebuah Confirm Box di tampilkan. <script type=text/javascript> function checkAnswer() { var like=confirm(Do you like JavaScript?); if (like==true) { alert(You like Javascript); } else { alert(You do not like JavaScript); } } </script> <input type=button onclick=checkAnswer() value=Click for the question />

Prompt Box Penggunaanya: Klik Button dan sebuah Prompt Box di tampilkan. <script type=text/javascript> function displayQuestion() { var age=prompt(What is your age?,18); if (age!=null && age!=") { alert(Your age is + age); } else { alert(No age was entered); } } </script> <input type=button onclick=displayQuestion() value=Click for the question />

Confirm Box

Penggunaanya: Klik Button dan sebuah Confirm Box di tampilkan. <script type=text/javascript> function checkAnswer() { var like=confirm(Do you like JavaScript?); if (like==true) { alert(You like Javascript); } else { alert(You do not like JavaScript); } } </script> <input type=button onclick=checkAnswer() value=Click for the question />

Simple Timer Penggunaanya: Klik button dan sebuah alert Box akan di tampilkan setelah 2 detik. <button onclick=timePassed()>Click the button to wait 2 seconds</button> <script type=text/javascript> function timePassed() { setTimeout(function(){alert(2 seconds passed)},2000); } </script>

Text Berubah Penggunaanya: Hover panah mouse di atas text dan textnya akan berubah. <script type=text/javascript> function changeText() { document.getElementById(text).innerHTML=Changed; } </script> <p onMouseOver=changeText() id=text>Text</p>

BACA JUGA YA...

Membuat Tombol Print Halaman Dengan Javascript

Memahami Lebih Jauh Fungsi Perintah Include pada PHP


Mar 29, 2013 by Syafaatfm Memahami lebih jauh fungsi perintah include pada PHP - PHP mempunyai empat perintah yang bisa digunakan untuk menyertakan atau meng-include-kan kode dari file eksternal, diantaranya:

include() include_once() require() require_once()

Pada dasarnya keempat perintah diatas mempunyai fungsi yang sama, namun perbedaan yang mendasar diantaranya adalah perintah include() akan melanjutkan pemrosesan suatu script, bahkan ketika eksternal file-nya tidak ada. Sedangkan fungsi require() digunakan untuk sesuatu yang lebih bersifat perintah, jika file eksternal tidak ada, maka PHP Engine akan menghentikan pemrosesan data dan menampilkan pesan fatal error. Dalam praktik mudahnya, hal ini berarti anda harus menggunakan perintah include() jika halaman anda akan tetap digunakan bahkan tanpa konten dari eksternal file. Gunakan perintah require() jika halaman tergantung pada file eksternal. Dua perintah lainya adalah include_once() dan require_once() , keduanya mempunyai fungsi yang sama tetapi dalam penggunaanya kedua fungsi tersebuat akan mencegah file yang sama di include-kan dalam satu halaman. Hal ini sangat penting ketika menyertakan file yang termasuk sebuah class atau fungsi. Mencoba membuat class atau fungsi lebih dari satu kali dalam sebuah script akan menyebabkan fatal error. Oleh karena itu menggunakan perintah include_once() atau require_once() akan memastikan bahwa fungsi dan class dibuat hanya satu kali. Jadi mana yang sebaiknya harus digunakan dari keempat fungsi diatas?. Saran saya gunakanlah fungsi include() untuk menghandle file eksternal, dan require_once() untuk file yang terdapat sebuah fungsi atau class.

Membuat Menu Dropdown dengan HTML & CSS

By Hari Aspriyono on 5 Maret 2013 in CSS Menu dropdown adalah menu yang ketika di klik / ditunjuk akan menampilkan sub menu di bawahnya, seperti terlihat pada gambar berikut:

Nah.., untuk membuatnya silahkan anda buat file html dengan nama menu.html, dan ketikkan kode html berikut:
1. <html> 2. <head> 3. <title>Membuat Menu Dropdown dengan CSS</title> 4. <link rel="stylesheet" href="menu.css" type="text/css"/> 5. </head> 6. <body> 7. <div id='ddmenu'> 8. <ul> 9. <li class='active'><a href='index.html'><span>Home</span></a></li> 10. <li class='has-sub'><a href='#'><span>Produk</span></a> 11. <ul> 12. <li><a href='#'><span>Produk 1</span></a></li> 13. <li class='last'><a href='#'><span>Produk 2</span></a></li> 14. </ul> 15. </li> 16. <li><a href='#'><span>Tentang Kami</span></a></li> 17. <li class='last'><a href='#'><span>Hubungi Kami</span></a></li> 18. </ul> 19. </div> 20. </body> 21. </html>

Selanjutnya buatlah file css pada folder yang sama dengan file html dengan nama menu.css, dan ketik kode CSS berikut:
1. #ddmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; } 2. #ddmenu > ul {list-style:inside none; padding:0; margin:0;} 3. #ddmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 4. #ddmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; textshadow:1px 1px 0 rgba(0,0,0, 0.4); } 5. #ddmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}

6. #ddmenu > ul > li > a:after{ content:''; position:absolute; borderright:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 7. #ddmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 8. #ddmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 9. #ddmenu > ul > li.has-sub:hover > a:before{top:19px;} 10. #ddmenu ul li.has-sub:hover > a{ background:#3f3f3f; bordercolor:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; zindex:999; } 11. #ddmenu ul li.has-sub:hover > ul, #ddmenu ul li.has-sub:hover > div{display:block;} 12. #ddmenu ul li.has-sub > a:hover{background:#3f3f3f; bordercolor:#3f3f3f;} 13. #ddmenu ul li > ul, #ddmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 14. #ddmenu ul li > ul{width:200px;} 15. #ddmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 16. #ddmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; textshadow:1px 1px 0 rgba(0,0,0, 0.5); } 17. 18. 19. #ddmenu, #ddmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, colorstop(0%,#333333), color-stop(100%,#222222)); background:-webkitlinear-gradient(top, #333333 0%,#222222 100%); background:-o-lineargradient(top, #333333 0%,#222222 100%); background:-ms-lineargradient(top, #333333 0%,#222222 100%); background:lineargradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 20. #ddmenu{border-color:#000;} 21. #ddmenu > ul > li > a{border-right:1px solid #000; color:#fff;} 22. #ddmenu > ul > li > a:after{border-color:#444;} 23. #ddmenu > ul > li > a:hover{background:#111;}

Anda juga bisa hanya dengan SATE (Salin Tempel) alias Copy Paste dari kode yang sudah ada disini, silahkan dikembangkan pada website anda.

Tutorial CSS / HTML : Cara Membuat Menu Horizontal Cantik Dengan HTML dan CSS
di tulis oleh: Ivan Silalahi
inShare385

2 komentar

Selamat Malam buat sahabat setia Kumpulan Tutorial Website sekalian, saya ingin membagikan kepada anda sebuah tutorial HTML\CSS yang tidak kalah menariknya dari postingan saya yang lain . Tutorial kali ini adalah Cara Membuat Menu Navigasi Lengkap dengan Drop Down murni dengan CSS. Baiklah sebelumnya, saya sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum saya sarankan lihat postingan saya sebelum postingan ini. Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu. 1. Membuat kode HTML Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>. Berikut kodenya HTML nya . Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .

<html lang="en"> <head> <meta charset="utf-8" /> <title>Drop Down Menu ala Kumpulan Tutorial Website </title> <link rel=stylesheet href=style.css type=text/css> <head> <body> <div id="place-nav"> <ul id="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Artikel</a></li> <li><a href="#">About</a></li> <li><a href="#">Social</a> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Google</a> <ul> <li><a href="#">Google Wave</a></li> <li><a href="#">Google Buzz</a></li>

<li><a href="#">Google Plus</a></li> </ul> </li> <li><a href="#">Twitter</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> </ul> </div> </body> </html>

Berikut sedikit penjelasan tentang kode diatas :


Jika kita perhatikan didalam <li> Social ada menu lagi dan didalamnya lagi tepatnya didalam <li> Google ada menu lagi. Ini kita nanti akan membuat drop down menu dengan 2 level kedalaman. Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin: Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. . #place-nav { width:960px; height:35px; margin:63px 0 0 0; } #nav { height:35px; } #nav li { height:35px; float:left; display:inline; margin:0 5px; position:relative; font-family: Arial, verdana, serif; z-index:1000; } #nav li a { float:left; display:inline; height:25px;

padding:10px 8px 0 8px; font-size:12px; color:#9e9e9e; font-weight:bold; text-transform:uppercase; text-shadow:0 0 3px #c7c7c7; } #nav li:hover a { text-decoration:none; color:#505050; } #place-nav ul ul { position:absolute; z-index:1200; display:none; width:186px; margin: 0; top: 35px; left:0; background:#1d87ca; padding:0 0 2px 0; } #place-nav ul li ul li { display: inline; float: left; width:186px; height:auto; border-bottom:1px solid #085d93; float: left; padding: 0; position:relative; margin:0; } #place-nav ul ul ul { position:absolute; z-index:1300; display:none; width:186px; margin: 0; top: 0; left:183px; background:#1c83ce; border-left:1px solid #1479c3; padding:0; } #place-nav ul li ul li ul li { display: inline; float: left; padding: 0; } #place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li

a:link, #place-nav #nav li:hover ul li a:visited { color:#fff; font-size:12px; width:170px; height:auto; text-transform:none; border:none; background: none; padding:9px 8px; text-shadow:none; margin:0; font-weight:lighter; } #place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover { text-decoration:none; color:#fff; background:#0f74bd; } div#place-nav li:hover ul ul, div#place-nav li li:hover ul ul {display:none;} div#place-nav li:hover ul, div#place-nav li li:hover ul {display:block;}

Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya. So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser. Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan zindex:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya. Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ . Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita

sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya. Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.

Nah yang terakhir dan terpenting adalah :

div#place-nav li:hover ul ul, div#place-nav li li:hover ul ul {display:none;} div#place-nav li:hover ul, div#place-nav li li:hover ul {display:block;} Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul. Selamat mencoba, dan jangan lupa share dan komentnya yah. Terimakasih.

Source Code
Tutorial PHP MYSQL Database Website Penjualan Online Tips Trik Source Code Cara Belajar PHP pemula lengkap Jquery yii
Jasa Pembuatan Website Murah | Jasa Pembuatan Program | Source Code PHP Koleksi Source Code PHP - Klik Dimari Gan!

Senin, 18 Juni 2012

Cara Mudah Membuat ReadMore Pada PHP


ada beberapa langkah untuk membuat nya.. 1.Kita buat data base dengan nama " artikel " tanpa tanda kutip.. 2.Buatlah table dengan nama " tb_artikel " tanpa tanda kutip..

id tinyint (1), judul varchar (30), isi text, penulis varchar (30), PRIMARY KEY (id) isi table id = 1 judul = Migrain isi = Penyakit ini lebih banyak diderita oleh wanita. Migrain adalah penyakit yang menyerang otak dan mengakibatkan kesakitan baik secara fisik maupun emosi. Pelebaran pembuluh darah pada otak dan peradangan merupakan salah satu mengapa kepala terasa sakit. Walau belum diketahui secara pasti penyebabnya, umumnya penyakit ini merupakan penyakit yang diturunkan. Yang dapat dilakukan adalah berusaha untuk mencegah terjadinya serangan sakit kepala dan mengurangi rasa sakit saat serangan terjadi. Kadangkala serangannya tidak hanya menyerang salah satu sisi kepala tetapi menyerang kedua sisi kepala penulis = Siapa Aja Bole anda bisa liat hasilnya sbb..

3.kemudian buat scrip seperti dibawah ini dan simpan artikel.php <?php mysql_connect("localhost","root","") or die("Gagal Konek Ke Server".mysql_error()); mysql_select_db("artikel") or die ("Gagal Konek Ke Database".mysql_error()); ?> <html> <head> <title>Artikel</title> </head> <body> <table width="600" border="0" align="center"> <?php $kueri = mysql_query(" SELECT * FROM tb_artikel "); while ($baris=mysql_fetch_row($kueri)) { echo("<tr>"); echo("<td><u>$baris[1]</u></td>"); echo("</tr>"); echo("<tr>"); echo("<td>".substr($baris[2],0,150)." <a href='artikel_detail.php?id=$baris[0]'>Read More . . .</a> </td>"); echo("</tr>"); echo("<tr>"); echo("<td>Penulis : $baris[3]</td>"); echo("</tr>"); } ?> </table> </body> </html 4.yang terahir simpan dengan artikel_detail.php <?php mysql_connect("localhost","root","") or die("Gagal Konek Ke Server".mysql_error()); mysql_select_db("artikel") or die ("Gagal Konek Ke Database".mysql_error()); ?> <html> <head> <title>Artikel Detail</title> </head> <body> <table width="600" border="0" align="center">

<?php $kode_artikel = $_GET['id']; $kueri = mysql_query(" SELECT id AS kode_artikel, judul, isi, penulis ". " FROM tb_artikel WHERE id='$kode_artikel' "); while ($baris=mysql_fetch_row($kueri)) { echo("<tr>"); echo("<td><u>$baris[1]</u></td>"); echo("</tr>"); echo("<tr>"); echo("<td>$baris[2]</td>"); echo("</tr>"); echo("<tr>"); echo("<td>Penulis : $baris[3]</td>"); echo("</tr>"); } ?> </table> </body> </html> Selamat mencoba... semoga berhasil... Source : http://azizforensik.blogspot.com/2012/04/membuat-read-more-dalam-php.html