Beruflich Dokumente
Kultur Dokumente
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:
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
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 14 15Name 16
: WidgetLike Design by Free CSS Templates
18 19 20 21 22 23 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
40 41</head> 42 43 44 45 46
<?php $this->load->view('header') ?> <!-- start header --> <body>
47
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') ?>
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">
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
<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…</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"
12 </div> 13
<div class="meta"> <p class="credit">Posted by <a href="#">Someone</a> on October 14,
142008</p>
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> <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
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 .
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:
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.
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)
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>
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>;
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.; ?>
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 */
Demikian sedikit uraian dari saya tentang bagaimana cara menuliskan komentar pada javascript. Semoga bermanfaat.
} 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.
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
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>
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.
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>
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.
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!
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