membuat cms dengan codeigniter

55
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/ .

Upload: anang-damanik

Post on 12-Dec-2014

243 views

Category:

Documents


11 download

DESCRIPTION

php

TRANSCRIPT

Page 1: Membuat CMS Dengan Codeigniter

Membuat CMS dengan Codeigniter | Part 1 INSTALATIONJan 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:

Page 2: Membuat CMS Dengan Codeigniter

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 ..

Page 3: Membuat CMS Dengan Codeigniter

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 TEMPLATINGFeb 2, 2013 by Syafaatfm

Membuat CMS dengan Codeigniter | Part 2 TEMPLATING

Page 4: Membuat CMS Dengan Codeigniter

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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--

&nbsp;

Design by Free CSS Templates

http://www.freecsstemplates.org

Released for free under a Creative Commons Attribution 2.5 License

&nbsp;

Name       : WidgetLike

Page 5: Membuat CMS Dengan Codeigniter

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

Description: A two-column, fixed-width design featuring black content area background.

Version    : 1.0

Released   : 20081016

&nbsp;

-->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Widgetlike by FCT</title>

<meta name="keywords" content="" />

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

<link href="<?php echo base_url() ?>widgetlike/style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<!-- start header -->

<?php $this->load->view('header') ?>

Page 6: Membuat CMS Dengan Codeigniter

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

<!-- end header -->

<!-- start content -->

<div id="bg3">

<div id="bg4">

<div id="bg5">

<div id="page">

<div id="content">

<?php if (!empty($page)): ?>

<?php $this->load->view($page); ?>

<?php else: ?>

<?php $this->load->view('error_page'); ?>

<?php endif; ?>

</div>

<!-- end content -->

<!-- start sidebars -->

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

Page 7: Membuat CMS Dengan Codeigniter

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

<!-- end sidebars -->

<div style="clear: both; height: 40px;">&nbsp;</div>

</div>

<!-- end #page -->

</div>

</div>

</div>

<?php $this->load->view('footer') ?>

</body>

</html>

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

2

3

4

<div id="bg1">

 <div id="header">

 <h1><a href="#">WidgetLike<sup>1.0</sup></a></h1>

 <h2>By <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org">FCT</a></h2>

Page 8: Membuat CMS Dengan Codeigniter

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

 </div>

 <!-- end #header -->

</div>

<!-- end #bg1 -->

<div id="bg2">

 <div id="header2">

 <div id="menu">

 <ul>

 <li><a href="#">Photos</a></li>

 <li><a href="#">Portfolio</a></li>

 <li><a href="#">Friends</a></li>

 <li><a href="#">About</a></li>

 <li><a href="#">Contact</a></li>

 </ul>

 </div>

 <!-- end #menu -->

 <div id="search">

 <form method="get" action="#">

 <fieldset>

 <input type="text" name="q" value="search keywords" id="q" class="text" />

 <input type="submit" value="Search" class="button" />

 </fieldset>

 </form>

 </div>

 <!-- end #search -->

 </div>

 <!-- end #header2 -->

</div>

Script diatas merupakan potongan dari file index.html mulai baris 31 – 54.

Setelah itu kita buat file sidebar.php:

Page 9: Membuat CMS Dengan Codeigniter

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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, bibendum sit amet aliquam. <a href="#">Read more&hellip;</a></p>

 </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>

 <li><a href="#">Bibendum sit amet mauris cras</a></li>

 <li><a href="#">Adipiscing libero et risus donec</a></li>

 <li><a href="#">Venenatis porttitor morbi quam</a></li>

 </ul>

 </li>

 </ul>

 </div>

footer.php

1

2

3

4

<div id="footer">

 <p>(c) 2008 Sitename.com. Design by <a href="http://www.nodethirtythree.com/">nodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">FCT</a></p>

</div>

<!-- end #footer -->

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

2. Membuat file default controller

Page 10: Membuat CMS Dengan Codeigniter

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

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?php

/*

 * To change this template, choose Tools | Templates

 * and open the template in the editor.

 */

class Pages extends CI_Controller {

 var $template = 'template';

 function __construct() {

 parent::__construct();

 }

 function home() {

 $data['page'] = 'pages/home';

 $this->load->view($this->template, $data);

 }

}

?>

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

Page 11: Membuat CMS Dengan Codeigniter

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<div class="post">

 <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" height="102" class="left" />

 <p>Widgetlike is a free template by <a

href="http://www.nodethirtythree.com/">NodeThirtyThree</a> and <a href="http://www.freecsstemplates.org">FCT</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. The photo to the 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 that you link back to <a href="http://www.nodethirtythree.com/">my

site</a> in some way. Note: This is also available as a <a href="http://www.freewpthemes.net/preview/widgetlike">WordPress theme</a>.</p>

 </div>

 <div class="meta">

 <p class="credit">Posted by <a href="#">Someone</a> on October 14, 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>

 <div class="post">

 <div class="title">

 <h2><a href="#">Blandit veroeros</a></h2>

 <p>10.11.08</p>

 </div>

 <div class="entry">

 <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris <a href="#">sed elit venenatis</a> porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros

Page 12: Membuat CMS Dengan Codeigniter

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

2

<div class ="post">

<h1 class="title">Sorry, Sepertinya halaman yang anda cari tidak ditemukan</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:

Page 13: Membuat CMS Dengan Codeigniter

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 )

{

Page 14: Membuat CMS Dengan Codeigniter

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 MySQLMar 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 .

Page 15: Membuat CMS Dengan Codeigniter

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 PHP-nya 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;

Page 16: Membuat CMS Dengan Codeigniter

}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;}

Page 17: Membuat CMS Dengan Codeigniter

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:

Page 18: Membuat CMS Dengan Codeigniter

Download source code paging halaman dibawah ini :

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

Membuat Tombol Print Halaman Dengan JavascriptApr 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 JavascriptDec 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.

Page 19: Membuat CMS Dengan Codeigniter

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 masing-masing.

Informasi mengenai sejarah singkat dan  fungsi-fungsi javascript bisa di baca pada artikel Apa Itu JavaScript(Tentang JavaScript)

Page 20: Membuat CMS Dengan Codeigniter

Cara Membuat Digital Clock Dengan Javascript | Jam DigitalDec 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 inivar mySecs = now.getSeconds(); //Untuk detikvar curHour = now.getHours();//untuk jamvar curMin = now.getMinutes();//untuk menitvar day = now.getDay();//untuk harivar date = now.getDate();//tanggalvar year = now.getFullYear();//untuk tahun YYYYvar month = now.getMonth();//untuk bulan “mm”var days = new Array();//membuat objek array untuk menampilkan nama haridays[0] = "Sunday";days[1] = "Monday";days[2] = "Tuesday";days[3] = "Wednesday";days[4] = "Thursday";

Page 21: Membuat CMS Dengan Codeigniter

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

Page 22: Membuat CMS Dengan Codeigniter

Script Untuk Mengambil dan Menampilkan IP Address via Javascript, ASP, atau PHPOct 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 JavaScriptNov 17, 2012 by Syafaatfm

Page 23: Membuat CMS Dengan Codeigniter

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

4

5

6

7

8

9

10

11

<html>

<body>

<script type="text/javascript">

// Write a heading

document.write("<h1>This is a heading</h1>");

// Write two paragraphs:

document.write("<p>This is a paragraph.</p>");

document.write("<p>This is another paragraph.</p>");

</script>

</body>

</html>

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

2

3

4

5

6

7

8

<html>

<body>

<script type="text/javascript">

/*

The code below will write

one heading and two paragraphs

*/

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph.</p>");

Page 24: Membuat CMS Dengan Codeigniter

9

10

11

12

13

document.write("<p>This is another paragraph.</p>");

</script>

</body>

</html>

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

Kumpulan Kode JavaScript Siap PakaiOct 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;}

Page 25: Membuat CMS Dengan Codeigniter

}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=250,left =304,top = 150.5′);”);}</script></head><body><a href=”javascript:popUp(‘popup.html’)”>popup</a></body></html>

Page 26: Membuat CMS Dengan Codeigniter

Perhatikan pada tag : <a href=”javascript:popUp(‘popup.html’)”>popup</a>Pada saat mouse mengklik kata : popup, javascript akan memanggil fungsi popUp() dengan membawalink popup.html. Window popup akan muncul dengan menampilan halaman popup.html. Karenanya kitasiapkan 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 settingproperties pada fungsi popup(). Standar window popup yg sering digunakan adalah men-setting semuaproperties 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><!– Beginfunction 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=250,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

Page 27: Membuat CMS Dengan Codeigniter

</ 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 sebatasnumerik (angka) saja yang bisa diinput. Kita juga dapat mengubah kondisi tersebut sesuai keinginan kitadengan mengganti atau menambahkan kode. Untuk kasus diatas, numeric (angka) pada tombol keyboardadalah 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>

Page 28: Membuat CMS Dengan Codeigniter

<meta http-equiv=’Content-Type’ content=’text/html; charset=iso-8859-1′><script>function CountMax(){var wert,max;max = 100wert = 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 padaTextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter)dibawahnya. Pengisian tsb berupa pengurangan maksimal input keyboard yg didefinisikan dgn variablemax=100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard samadengan atau lebih besar dari variable max=100, maka fungsi alert akan ter-eksekusi.

Demikian share kali ini semoga bisa di ambil manfaatnya. Terimakasih.

Page 29: Membuat CMS Dengan Codeigniter

Meletakkan Kode JavaScript Pada Halaman WebsiteSep 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>

Page 30: Membuat CMS Dengan Codeigniter

<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 PenggunaanyaAug 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.

Page 31: Membuat CMS Dengan Codeigniter

 

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

Page 32: Membuat CMS Dengan Codeigniter

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>

Page 33: Membuat CMS Dengan Codeigniter

BACA JUGA YA...

Membuat Tombol Print Halaman Dengan Javascript

Memahami Lebih Jauh Fungsi Perintah Include pada PHPMar 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

Page 34: Membuat CMS Dengan Codeigniter

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; text-shadow: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; border-

right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }

Page 35: Membuat CMS Dengan Codeigniter

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; border-

color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index: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; border-color:#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; text-shadow: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, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(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

inShare 385

2 komentar

Page 36: Membuat CMS Dengan Codeigniter

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 HTMLBaik , 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>

Page 37: Membuat CMS Dengan Codeigniter

          <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 {

Page 38: Membuat CMS Dengan Codeigniter

  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;

Page 39: Membuat CMS Dengan Codeigniter

}#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 z-index: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

Page 40: Membuat CMS Dengan Codeigniter

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!

Page 41: Membuat CMS Dengan Codeigniter

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 adalahpenyakit yang menyerang otak dan mengakibatkan kesakitan baik secara fisikmaupun emosi. Pelebaran pembuluh darah pada otak dan peradangan merupakansalah satu mengapa kepala terasa sakit. Walau belum diketahui secara pastipenyebabnya, umumnya penyakit ini merupakan penyakit yang diturunkan.Yang dapat dilakukan adalah berusaha untuk mencegah terjadinya serangan sakitkepala dan mengurangi rasa sakit saat serangan terjadi. Kadangkala serangannyatidak hanya menyerang salah satu sisi kepala tetapi menyerang kedua sisi kepalapenulis = Siapa Aja Bole

anda bisa liat hasilnya sbb..

Page 42: Membuat CMS Dengan Codeigniter

3.kemudian buat scrip seperti dibawah ini dan simpan artikel.php

<?phpmysql_connect("localhost","root","") or die("Gagal Konek KeServer".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)." <ahref='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

Page 43: Membuat CMS Dengan Codeigniter

<?phpmysql_connect("localhost","root","") or die("Gagal Konek KeServer".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