membuat footer dengan php

Membuat Footer dengan PHP

Setelah kita selesai membuat koneksi (koneksi.php) dan header (header.php), tugas selanjutnya adalah membuat footer dengan phpyang dalam materi kali ini file akan kita simpan dengan nama footer.php.

Baiklah, kita langsung saja masuk ke dalam pembahasan, berikut adalah kode program untuk footer.php.

Nah dari kode program membuat footer dengan php yang terdapat pada gambar diatas, terdapat kode css didalamnya. Dalam hal ini kode css yang digunakan disini hampir sama dengan kode css yang digunakan padaheader.php yang sudah kita buat sebelumnya silahkan dilihat lagi sebagi bahan perbandingan.

Berikut penjelasan kode css yang terdapat di file footer.php:

Width = lebar

Height = tinggi

Padding = jarak antara kolom

Border = bingkai

Text-Align = Format perataan text

Background-Color = Warna belakang latar

Border-radius = Kebulatan siku

Kemudian id css dengan nama footer akan dipanggil di kode <div id="footer"> dan diakhiri oleh </div> sehingga kode css yang ada didalam id tersebut akan menata isi footer sesusi dengan is css-nya.

Dalam sebuah website biasanya di bagian footer akan ditempatkan nama author, atau si desainer-nya. Beberapa website ada juga yang menempatkan beberapa menu dan link di footer. Dan di paling bawah sekali akan ditempatkan tag-tag penutup seperti </body> kemudian </html> yang sebelumnya telah di buka di header.php. Penulisan ini bisa saja berbeda sesuai dengan keinginan si programernya.

Berikut contoh footer yang akan kita gunakan dalam materi pembelajaran kita membuat footer dengan php.

Salam

Cara Membuat Kotak Search Menarik di Blogspot

Posted by M. Toyib Hidayat

            Pak HaBe lagi giat-giatnya ngeluarin postingan nih sobat, maklum pengen cepet-cepet blog saya terkenal dan bisa bermanfaat buat orang banyak. Baru beberapa jam yang lalu saya posting Cara Membuat Tombol Share Lebih Menarik di Blogspot, dan sekarang postingan maut yang gak kalah penting kembali diluncurkan yaitu Cara Membuat Kotak Search Menarik di Blogspot.

            Berawal dari rasa bosen dengan tampilan “Kotak Search” atau kalo dalam bahasa mandarinnya “Kotak Pencarian” yang itu-itu aja. Pak HaBe mulai gerilya jalan-jalan bareng mbah google buat nyari tampilan kotak search yang lebih enak dipandang dan mempunyai fungsi maksimum. Dan setelah beberapa jam berlalu akhirnya ketemu juga yang menurut pak HaBe sangat sangat sangat enak dipandang dan saya rasa juga mempunyai fungsi lebih dan pastinya lain dari pada yang lain. Supaya sobat gak mati penasaran nih saya kasih skrinsutnya biar sobat langsung kepengen buat nyobak

Gimana?? Dari tampilannya aja menarik bukan??

Sekarang bagaimana cara membuatnya?? Gampang kok, ikuti aja apa yang pak HaBe tulis di bawah ini:

1.      Jelas sobat blogger harus LOGIN terlebih dahulu

2.      Masuk ke TATA LETAK trus tambahkan GADGET HTML/JAVASCRIPT

3.      Setelah selesai tinggal copy paste dah kode dibawah ini

<form name="jksearch" action="http://www.google.com/search" method="get" onsubmit="jksitesearch(this)" target="_blank"> <input id="hiddenquery" type="hidden" name="q" /> <input name="qfront" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search on this site..." type="text" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 240px;border:none;padding:8px 10px; font:normal 11px arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi07q9rAJI6aYhQSw_STSllfOj19pPdHOyxB-_1k0poCQ0zEMeP_RNSVWwbABsuC55cbcFdRxWIxUC1iy7S8xh3ZfpzlK2m4TpMmaP9JYCjS6EzT_YTS5mFxLxrP40uME4gDd2UUc7PPE/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrrm3OBntCuDXpcnEoaKCF9ZjsiWc2iSiD2R4qASBZ4AN76ZWcHco94Rz9sUG-935BDWF20Y1JPCRStqSPY5lVvg_kKJzRYexCD1h7IvaLPmVxsjJiU3rGZNh8JCl3fsQStzUZWmwakk/s1600/search_button.jpg" align="top" value="Search"/> <div style="font: normal 11px Arial;color:#666;padding:2px 0;"> <input name="se" type="radio" checked /> Google  <input name="se" type="radio" /> Yahoo <input name="se" type="radio" /> Msn </div> <script type="text/javascript"> // All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use //Enter domain of site to search. var domainroot="vudu-vudu.blogspot.com" var searchaction=[ //form action for the 3 search engines "http://www.google.com/search", "http://search.yahoo.com/search", "http://search.msn.com/results.aspx" ] var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines function switchaction(cur, index){ cur.form.action=searchaction[index] document.getElementById("hiddenquery").name=queryfieldname[index] } function jksitesearch(curobj){ for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see which is checked if (document.jksearch.se[i].checked==true) switchaction(document.jksearch.se[i], i) } document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value } </script> </form>

4.      STOP !!! Jangan di SAVE dulu !! Ganti tulisan WARNA MERAH yang ada pada kode di atas dengan alamat blog sobat. Jangan sampai lupa loh, nanti bisa masuk ke link search blog saya kalo gak diganti, hehe :D

5.      Kalau sudah yakin semua yang saya tulikan di atas sudah dikerjakan dengan baik, sekarang tinggal SAVE aja dan lihat lah hasilnya J

Dan itulah sedikit referensi Cara Membuat Kotak Search Menarik di Blogspot yang pastinya tampilannya lain dari yang lain dan mempunyai manfaat yang lebih. Dan sekarang waktu sudah menunjukan pukul 05.30 dini hari, sudah saatnya pak HaBe pamit, hehe. See you pada postingan selanjutnya. J

Cara Membuat Recent Post Berjalan di Blog

Cara Membuat Recent Post Berjalan di Blog - Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
   
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
   
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
   
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-recent-post-berjalan-di.html" target="_blank">get this widget here</a></small>

4. Klik save dan lihat hasilnya.

Cara Membuat Buku Tamu Keren di Blog

Membuat Buku Tamu Keren di Blog

Cara Membuat Buku Tamu Keren di Blog - Bagi anda para blogger pastinya menginginkan buku tamu bukan? Apakah anda tertarik dengan buku tamu di blog saya? Jika iya maka saya akan share cara membuat buku tamu keren di blog.

1. Anda silahkan daftar dulu di cbox untuk mendapatkan script buku tamu anda disini

2. Isi data tersebut dengan benar

3. Setelah kalian isi datanya, jangan lupa centang "i have read and...." lalu klik "create my cbox!"

4. Masuklah ke akun email anda untuk memverifikasi akun cbox anda

5. Klik tautan dari cbox yang ada di kotak masuk yahoo anda

6. Kini akun cbox anda aktif. Sekarang coba kalian cari script cbox anda atau lewat sini

7. Nah copy ke notepad script diantara tulisan
<!-- BEGIN CBOX - www.cbox.ws - v001 --> dan <!-- END CBOX -->

Text "begin.." dan "end.." tidak usah dicopy, cukup copy script yang ada diantara "begin..." dan "end.." saja.

8. Selanjutnya masuk ke blogger anda -> tata letak -> tambah gadget -> html/javascript

9. Masukkan script berikut

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgZs3ohoqVQPpnNPacByz6y7tyRJBWnZHZCh_HCMbJ5TYcvGPnHXkOwfvdEyfqd-aNJ8NYKRgYlbH2kDEDIUc5ATpSGENo3IHArSSw_2jzlxSJYbiO5Zam6b0-_2X1gme-8nlTvdbZZFv/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> script cbox kamu <br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://ramadhanlmzero.blogspot.com/2012/12/cara-membuat-buku-tamu-keren-di-blog.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

10. Edit text yang berwarna merah dengan script cbox anda yang sebelumnya sudah disimpan notepad

11. Anda juga bisa mengedit text yang berwarna oranye dengan url gambar yang lain

Contoh:

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu3.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu5-2.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png

http://i1089.photobucket.com/albums/i353/illankjie/BukuTamu8-1.png

http://i1089.photobucket.com/albums/i353/illankjie/gustbook02-1.png






12. Klik "simpan"

Selesai. Kini anda sudah memiliki buku tamu seperti saya ^_^

Membuat Required Form dengan PHP

Membuat Required Form dengan PHP

Ditulis oleh : M Toyib Hidayat

Dalam artikel sebelumnya ditulis tentang cara validasi form. Namun belum ada penanganan jika salah satu atau beberapa atau bahkan semua field pada form dalam keadaan kosong, script akan tetap dijalankan. Sepintas terlihat tidak terlalu bermasalah karena contoh script hanya menampilkan saja, jadi seolah-olah tampilannya sama, tetap kosong.

Namun ini akan menjadi masalah jika nantinya input data dari form akan di simpan dalam tabel sebuah database. Tentunya akan menyimpan record dengan data kosong yang menjadikan data tersebut tidak valid. Sebagai contoh jika kita menyimpan data komentar saja tanpa nama atau tanpa alamat email dan tanpa jenis kelamin, maka data tersebut menjadi tidak berguna.

Untuk itu kita harus membuat tanda bahwa sebuah field harus diisi dan membuat penanganan errornya jika field tidak diisi. Dalam hal ini kita memerlukan sistem required form, yaitu sistem yang membuat user harus mengisi sebuah elemen form dan menampilkan error jika elemen tersebut tidak diisi. Dan selanjutnya script untuk menyimpan data dari form tidak dijalankan

Berikut ini beberapa langkah membuat required form dengan PHP :

1. Tentukan elemen/field mana yang harus diisi dan dan elemen/field mana yang boleh tidak diisi.
2. Beri tanda untuk elemen/field yang harus diisi, misal dengan tanda bintang (*) lalu diberi note kalau tanda bintang (*) maksudnya harus diisi.
3. Buat variabel untuk menangani error, misal untuk menampilkan pesan error.
4. Buat penyeleksian kondisi yang mengecek elemen/field pada form diisi atau tidak.
5. Tampilkan variabel tersebut disamping elemen form yang belum diisi jika tombol submit ditekan.
6. Buat validasi inputan data form seperti nama harus mengandung huruf dan spasi saja tidak boleh angka, email harus mengandung karakter @ dan dot(.) lalu website harus berisi URL yang valid, misal httl://website.com

Contoh membuat sistem required form dengan PHP:

view plainprint?

1. <?php     
2.  // membuat variabel error dan diset kosong     
3.  $namaErr = $emailErr = $jkErr = $websiteErr = "";     
4.  //membuat variabel untuk menampung inputan dari form     
5.  $nama = $email = $jk = $komentar = $website = "";     
6.  if ($_SERVER["REQUEST_METHOD"] == "POST") {     
7.  if (emptyempty($_POST["nama"])) {     
8.   $namaErr = "Nama harus diisi !";     
9.  } else {     
10.   $nama = test_input($_POST["nama"]);     
11.  }     
12.  if (emptyempty($_POST["email"])) {     
13.   $emailErr = "Email harus diisi !";     
14.  } else {     
15.   $email = test_input($_POST["email"]);     
16.  }     
17.  if (emptyempty($_POST["website"])) {     
18.   $websiteErr = "Website harus diisi !";     
19.  } else {     
20.   $website = test_input($_POST["website"]);     
21.  }     
22.  if (emptyempty($_POST["komentar"])) {     
23.   $komentar = "";     
24.  } else {     
25.   $komentar = test_input($_POST["komentar"]);     
26.  }     
27.  if (emptyempty($_POST["jk"])) {     
28.   $jkErr = "Jenis kelamin belum dipilih !";     
29.  } else {     
30.   $jk = test_input($_POST["jk"]);     
31.  }     
32.  }    
33.  //membuat fungsi untuk validasi input form    
34.  function test_input($data) {     
35.   $data = trim($data);     
36.   $data = stripslashes($data);     
37.   $data = htmlspecialchars($data);     
38.   return $data;     
39.  }      
40.  ?>     
41.  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">     
42.  nama: <input type="text" name="nama">     
43.  <span class="error">* <?php echo $namaErr;?></span>     
44.  <br><br>     
45.  E-mail:     
46.  <input type="text" name="email">     
47.  <span class="error">* <?php echo $emailErr;?></span>     
48.  <br><br>     
49.  Website:     
50.  <input type="text" name="website">     
51.  <span class="error"><?php echo $websiteErr;?></span>     
52.  <br><br>     
53.  <label>komentar: <textarea name="komentar" rows="5" cols="40"></textarea>     
54.  <br><br>     
55.  Jenis Kelamin:     
56.  <input type="radio" name="jk" value="perempuan">Perempuan     
57.  <input type="radio" name="jk" value="laki-laki">Laki-laki     
58.  <span class="error">* <?php echo $jkErr;?></span>     
59.  <br><br>     
60.  <input type="submit" name="submit" value="Submit">      
61.  </form>     
62.  <?    
63.  //menampilkan hasil dari inputan form    
64.  echo "<h2>Input yang anda masukkan:</h2>";    
65.  echo $nama;     
66.  echo "<br>";     
67.  echo $email;     
68.  echo "<br>";     
69.  echo $website;     
70.  echo "<br>";     
71.  echo $komentar;     
72.  echo "<br>";     
73.  echo $jk;     
74.  ?>     

Penjelasan Script :

Pada contoh diatas menggunakan script yang sama seperti pada tulisan sebelumnya. Field yang ditentukan harus diisi (tidak boleh kosong) adalah Nama, Email, Website dan Jenis Kelamin. Untuk menandai beberapa elemen form tersebut ditambahkan tanda bintang (*) dibelakangnya kemudian diikuti dengan tampilan error jika tidak diisi.

Saat tombol submit ditekan, data yang dipos-kan oleh form dicek lebih dahulu dengan perintah IF(empty(variabel)). Jika kosong akan ditulis pesan error pada variabel error dan jika sudah diisi akan dilanjut dengan pengambilan data. Pada proses ini tetap digunakan fungsi test_input() untuk validasi form.

Untuk validasi khusus pada masing-masing data tiap elemen form insyaAllah akan ditulis pada artikel selanjutnya.

Referensi :

• http://www.w3schools.com/php/php_form_required.asp