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 pemba ca semua. Referensi tambahan tutorial tut orial ini diperoleh dari  berbagai sumber di internet inter net kemudian saya edit dan menulisnya kembali tentunya tentu nya dengan gaya pembahasan saya sendiri. Dalam tutorial Membuat CMS dengan Codeigniter ini materi  pembahasanya akan dibagi dib agi menjadi beberapa bagian ba gian atau berseri mulai dari da ri part 1, part 2,  part 3, dan seterusnya. seterusn ya.

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/.. http://codeigniter.com/ 2. Kemudian extrak codeigniter kedalam folder webserver anda . apabila anda menggunakan xampp, ekstrak file tersebut pada folder htdocs di computer local anda. 3. Buka folder instalasi codeigniter anda pada web browser dan anda akan mendapatkan tampilan seperti berikut:

Tampilan awal codeigniter 

BACA JUGA YA... 

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



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



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

Tampilan awal codeigniter 

BACA JUGA YA... 

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



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



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



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



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

Search engine keywords:

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

Membuat CMS dengan Codeigniter | Part 2 TEMPLATING Feb 2, 2013 by Syafaatfm

Membuat CMS dengan Codeigniter | Part 2 TEMPLATING

Melanjutkan bab sebelumnya (INSTALATION codeigniter ), pada materi lanjutan ini kita akan berhubungan dengan masalah TEMPLATING. Templating bisa dikatakan adalah segala hal yang berhubungan dengan User Interface design seperti theme, web layout, dll. Seperti kita ketahui bahwa codeigniter hanyalah sebuah kumpulan framework php, oleh karena itu segala hal yang menyangkut dengan UI design, theme, dari sebuah aplikasi web harus kita  buat dan tentukan sendiri send iri karena codeigniter codeignit er tidak menyediakan tempat temp at penginstalan tema layaknya CMS wordpress, Joomla!, Drupal, dl. Untuk mempermudah dan mempersingkat 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 http://www.freecsstemplates.org/download/zip/widgetlike/  jadi tersebut sebagai tema t ema dasar aplikasi web yang akan kita k ita 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
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

3 26 27 28 29 30 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

31 32



33 34

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

35 36

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

37 38



40 41 42

43 44



45 46

load->view('header') ?>

47

48 49 50 51 52

92 93load->view('footer') ?> 94 95 96 97 98 99

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 30 31 32

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

1



footer.php 1



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

/* * To change this template, choose Tools | Templates

5

* and open the template in the editor.

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

function home() { $data['page'] = 'pages/home'; $this->load->view($this->template, $data); }

19 20

}

21 22?> 23

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:

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



5. Mengatur configurasi aplikasi web

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

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

Membuat Script Validasi URL Menggunakan fungsi filter_var() Apr 23, 2013 by Syafaatfm Membuat Script Validasi URL Menggunakan fungsi filter_var() - Selain menggunakan fungsi reguler expression untuk memvalidasi alamat url, ternyata di PHP kita juga bisa menggunakan fungsi built-in filter_var() untuk memvalidasi alamat url dengan cara yang lebih mudah. Dibawah ini adalah salah satu contohnya :

$url = ‗http://contohweb.com‘; $result = filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED); if ( $result ) {

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

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

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

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

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

Record data Halaman Kedua = (2 – 1) * 4 = 4 Record data Halaman ketiga = (3 - 1) * 4 = 8 Record data Halaman keempat = (4 – 1) * 4 = 12 Record data Halaman kelima = (5 – 1) * 4 = 16 Record data Halaman Keenam = (6 – 1) * 4 = 20 Algoritma pemrogramannya sudah kita tentukan selanjutnya adalah membuat coding PHPnya secara langsung:
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=‖‖.$str.‖‖; } return ‗‘.$str.‘‘; } //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'].‖
‖; } $total_record=mysql_query(―select * from berita‖,$con); $total_record=mysql_num_rows($total_record); echo ―
‖; echo buat_paging($curPage,$total_record,$maxRec); ?> Dan untuk database MySQL-nya bisa dibuat seperti dibawah ini : CREATE DATABASE IF NOT EXISTS `paging`; USE `paging`; CREATE TABLE IF NOT EXISTS `berita` ( `id` int(11) NOT NULL AUTO_INCREMENT, `artikel` varchar(100) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB; INSERT INTO `berita` (`id`, `artikel`) VALUES (1, ‗Artikel 1′), (2, ‗Artikel 2′), (3, ‗Artikel 3′), (4, ‗Artikel 4′), (5, ‗Artikel 5′), (6, ‗Artikel 6′), (7, ‗Artikel 7′), (8, ‗Artikel 8′), (9, ‗Artikel 9′), (10, ‗Artikel 10′), (11, ‗Artikel 11′), (12, ‗Artikel 12′), (13, ‗Artikel 13′), (14, ‗Artikel 14′), (15, ‗Artikel 15′), (16, ‗Artikel 16′), (17, ‗Artikel 17′), (18, ‗Artikel 18′), (19, ‗Artikel 19′), (20, ‗Artikel 20′); Hasil akhirnya nanti kurang lebih akan tampak seperti gambar dibawah ini:

Download source code paging halaman dibawah ini : http://www.4shared.com/zip/XyP1aIDS/paging.html

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

document.write(‗‘ + ‗this page!‘); Cara penggunaanya adalah letakkan script diatas pada halaman tertentu yang anda kehendaki, misalnya bisa diletakkan pada bagian atas dari setiap artikel ataupun halaman tertentu terserah anda. Langsung praktek gannnn….

Cara Mengubah Warna Background Dengan Javascript Dec 15, 2012 by Syafaatfm merubah background, cara background blog, merubah warna, contoh java script, cara merubah background, merubah warna background, membuat background di blog, cara buat button, cara buat background di blog, buat background, blogger background html

Adakalanya kita menginginkan suatu objek background(Form, Table, textarea, body, dll) bisa  berubah-rubah warna saat mouse berada pada objek tersebut(mouse hover) dan berubah warna lagi saat mouse keluar dari objek tersebut(Mouse out). Tentunya kita bisa melakukan hal ini dengan menggunakan kode javascript, untuk itu bagaimana langkah-langkahCara Mengubah Warna Background Dengan Javascript berikut kita simak bersama-sama.

Oke, pada contoh dibawah ini kita akan mengubah warna background sebuah table, warna  background akan berubah pada saat mouse hover dan akan berubah warna lagi pada saat mouse out.                

Example

Example2

   

Live Demo : Example Example2

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

  <script>  function change(){document.bgColor="lightgreen";}          

Live Demo

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

Cara Membuat Digital Clock Dengan Javascript | Jam Digital Dec 23, 2012 by Syafaatfm

Hai

,

Pada artikel kali ini kita akan mencoba bereksperimen bagaimana cara membuat jam digital dengan kode javascript. Jam digital yang akan kita buat kali ini adalah bersifat live clock, jadi waktu yang ditampilkan pada browser adalah sesuai dengan pengaturan waktu yang ada di komputer kita/user (client side). Jam digital ini akan menampilkan hari ini, bulan, tanggal, tahun, dan waktu saat ini dengan format ―Hari mm/dd/yyyy  jam:menit:detik PM/AM ―. Oke langsung saja kita tulis kode javascriptnya berikut ini :  Note: Kode dibawah ini ditaruh antara tag “”dan”” <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 }

Lalu kita buat lagi satu kode tambahan: onload=”setInterval(‘getCurrentTime()’, 1000);/*mengatur interva l waktu agar diperbaruhi setiap 1 detik */ 

kode ini di taruh pada tag ―‖  Nah, sekarang bagaimana cara menampilkanya pada halaman website?. Kita buat lagi satu kode berikut :

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 ―‖ dan ―‖. 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= ‘’;

document.write(―IP Address anda adalah : ―+ip+‖ ―);

Untuk menampilkan IP via ASP

Script : <% Response.Write “Hello! Your IP Address is: ” & Request.ServerVariables(“REMOTE_ADDR”) %>

Untuk menampilkan IP via PHP

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

Menuliskan Komentar Pada JavaScript  Nov 17, 2012 by Syafaatfm

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

2 3

<script type="text/javascript">

4 // Write a heading 5 document.write("

This is a heading

"); 6 // Write two paragraphs: 7 document.write("

This is a paragraph.

"); 8 9

document.write("

This is another paragraph.

");

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 2 3 4

<script type="text/javascript"> /* The code below will write

5 6

one heading and two paragraphs */

7 document.write("

This is a heading

"); 8 document.write("

This is a paragraph.

");

9 document.write("

This is another paragraph.

"); 10

11



12 13

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

Kumpulan Kode JavaScript Siap Pakai Oct 4, 2012 by syafaatfm Pada tulisan kali ini jegulo.net akan share beberapa kode JavaScript siap pakai yang cukup  berguna anda tinggal copy paste ke dalam website/blog untuk melihat hasilnya. 1. Menonaktifkan Klik Kanan Pada Mouse

Tambah kode javascript dibawah ini pada dokumen HTML anda : Sekedar tambahan, selain fungsi oncontextmenu ada juga fungsi lain yang sering digunakan yaitu onkeydown, onclick, dan onmousedown. Silahkan dicoba dan di otak-atik sendiri untuk  mengetahui masing-masing fungsi tersebut.

2. Script untuk mencegah tindakan copy paste

Apabila anda menginginkan website anda terlindungi dari tindakan copy paste konten atau sekedar ingin mencegah seseorang agar tidak mudah melihat source html dari website anda. Berikut source kodenya:

<script language=‖JavaScript‖> var message=‖Maaf, gak boleh klik kanan sob!!‖; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; }

} function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function(―alert(message);return false‖) Bila ada seseorang yang mengakses website anda, akan tampil kotak peringatan saat mouse di klik kanan yang menampilkan alert box ―Maaf, gak boleh klik kanan sob!!‖ . 3. Menampilkan PopUp Window PopUp Window banyak di gunakan situs-situs advertiser sepeti z*d guna menampilkan keterangan iklanya. Biasanya PopUp Window muncul ketika visitor mengeklik banner atau gambar. Berikut source kodenya:

<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′);‖); } popup

Perhatikan pada tag : popup 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 :  Halaman PopUp

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:

<script> Tutup halaman web ini maka akan terbuka window baru secara otomatis

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:

<meta http-equiv=‖Content-Type‖ content=‖text/html; charset=iso-8859-1″>

57) event.returnValue = false;‖>

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:

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

sisa Perhatikan pada properties TextArea tsb, setiap kali kita mengetikkan karakter atau angka di TextArea, maka fungsi javascript CountMax akan selalu menghitung jumlah karakter atau angka yang terisi pada TextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter) dibawahnya. Pengisian tsb berupa pengurangan maksimal input keyboard yg didefinisikan dgn variable max=100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard sama dengan atau lebih besar dari variable max=100, maka fungsi alert akan ter-eksekusi. Demikian share kali ini semoga bisa di ambil manfaatnya. Terimakasih.

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

Script pada tag

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

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

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

Script pada tag dan

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

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

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

Alert Box

Penggunaanya: Klik Button dan sebuah Confirm Box di tampilkan.

<script type=‖text/javascript‖> function checkAnswer() { var like=confirm(―Do you like JavaScript?‖); if (like==true) { alert(―You like Javascript‖); } else { alert(―You do not like JavaScript‖); } }

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

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

Simple Timer

Penggunaanya: Klik button dan sebuah alert Box akan di tampilkan setelah 2 detik.

Click the button to wait 2 seconds <script type=‖text/javascript‖> function timePassed() { setTimeout(function(){alert(―2 seconds passed‖)},2000); }

Text Berubah

Penggunaanya: Hover panah mouse di atas text dan textnya akan berubah. <script type=‖text/javascript‖> function changeText() { document.getElementById(―text‖).innerHTML=‘Changed‘; }

Text

BACA JUGA YA... 

Membuat Tombol Print Halaman Dengan Javascript

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

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

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

Membuat Menu Dropdown dengan HTML & CSS

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

 Nah.., untuk membuatnya silahkan anda buat file html dengan nama menu.html, dan ketikkan kode html berikut: 1. 2. 3. 4. 5. 6. 7.

8.

9.
• Home
10.
• Produk 11.
  12.
  • Produk 1
  13.
  • Produk 2
  14.
  15.
16.
• Tentang Kami
17.
• Hubungi Kami
18.

19.

20. 21.

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

dan
• . Berikut kodenya HTML nya . Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .
  
  <meta charset="utf-8" />
  
  
  • Home
  • Artikel
  • About
  • Social
    • Facebook
    • Google
      • Google Wave
      • Google Buzz
      
      
      
      • Google Plus
    • Twitter
  • Portfolio
  
  
  Berikut sedikit penjelasan tentang kode diatas : Jika kita perhatikan didalam
• Social ada menu lagi dan didalamnya lagi tepatnya didalam
• Google ada menu lagi. Ini kita nanti akan membuat drop down menu dengan 2 level kedalaman. Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik  dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin: Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. . #place-nav { width:960px; height:35px; margin:63px 0 0 0; } #nav { height:35px; } #nav li { height:35px; float:left; display:inline; margin:0 5px; position:relative; font-family: Arial, verdana, serif; z-index:1000; } #nav li a { float:left; display:inline; height:25px;
  
  padding:10px 8px 0 8px; font-size:12px; color:#9e9e9e; font-weight:bold; text-transform:uppercase; text-shadow:0 0 3px #c7c7c7; } #nav li:hover a { text-decoration:none; color:#505050; } #place-nav ul ul { position:absolute; z-index:1200; display:none; width:186px; margin: 0; top: 35px; left:0; background:#1d87ca; padding:0 0 2px 0; } #place-nav ul li ul li { display: inline; float: left; width:186px; height:auto; border-bottom:1px solid #085d93; float: left; padding: 0; position:relative; margin:0; } #place-nav ul ul ul { position:absolute; z-index:1300; display:none; width:186px; margin: 0; top: 0; left:183px; background:#1c83ce; border-left:1px solid #1479c3; padding:0; } #place-nav ul li ul li ul li { display: inline; float: left; padding: 0; } #place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li
  
  a:link, #place-nav #nav li:hover ul li a:visited { color:#fff; font-size:12px; width:170px; height:auto; text-transform:none; border:none; background: none; padding:9px 8px; text-shadow:none; margin:0; font-weight:lighter; } #place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover { text-decoration:none; color:#fff; background:#0f74bd; } div#place-nav li:hover ul ul, div#place-nav li li:hover ul ul {display:none;} div#place-nav li:hover ul, div#place-nav li li:hover ul {display:block;}
  
  Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya. So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu
• . Jika kita tidak memberi position:relative; maka  browser akan menganggap kontainer nya adalah sehingga drop downnya akan muncul dipojok kiri atas browser. Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa
• nya yang dihover? Yap, karena drop down kita berada didalam
• dan bukan didalam maka apabila kita ingin jejaknya tetap ada ya kita hover di
• 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 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
• sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height
• 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
• maka
  berikutnya akan muncul display:block dan
  dalamnya (level ke 2) tidak muncul display:none;  baru ketika kita hover
  • level ke dua maka drop down level ke dua akan muncul. Selamat mencoba, dan jangan lupa share dan komentnya yah. Terimakasih.
    
    Source Code Tutorial PHP MYSQL Database Website Penjualan Online Tips Trik Source Code Cara Belajar PHP pemula lengkap Jquery yii Jasa Pembuatan Website Murah | Jasa Pembuatan Program | Source Code PHP Koleksi Source Code PHP - Klik Dimari Gan!
    
    Senin, 18 Juni 2012
    
    Cara Mudah Membuat ReadMore Pada PHP ada beberapa langkah untuk membuat nya.. 1.Kita buat data base dengan nama " artikel " tanpa tanda kutip.. 2.Buatlah table dengan nama " tb_artikel " tanpa tanda kutip..
    
    ‘id’ tinyint (1), ‘judul’ varchar (30), ‘isi’ text, ‘penulis’ varchar (30), PRIMARY KEY (‘id’) isi table id = 1  judul = Migrain isi = Penyakit ini lebih banyak diderita oleh wanita. Migrain adalah penyakit yang menyerang otak dan mengakibatkan kesakitan baik secara fisik maupun emosi. Pelebaran pembuluh darah pada otak dan peradangan merupakan salah satu mengapa kepala terasa sakit. Walau belum diketahui secara pasti penyebabnya, umumnya penyakit ini merupakan penyakit yang diturunkan. Yang dapat dilakukan adalah berusaha untuk mencegah terjadinya serangan sakit kepala dan mengurangi rasa sakit saat serangan terjadi. Kadangkala serangannya tidak hanya menyerang salah satu sisi kepala tetapi menyerang kedua sisi kepala penulis = Siapa Aja Bole anda bisa liat hasilnya sbb..
    
    3.kemudian buat scrip seperti dibawah ini dan simpan artikel.php
    
    "); echo(""); echo(""); echo(""); echo(""); echo(""); echo(""); echo(""); echo(""); } ?>

    $baris[1]

    ".substr($baris[2],0,150)." Read More . . .

    Penulis : $baris[3]

    
    
    
    
    ×

    Report "Membuat CMS Dengan Codeigniter"

    Your name

    Email

    Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

    Description

    Close Send
    ×

    Sign In

    Email

    Password

    Remember me Forgot password?

    Sign In
    Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close