Mesin pencari php

<sumber https://www.bewoksatukosong.com/2016/09/cara-membuat-pencarian-data-atau-search.html>

1. Membuat Folder

Hal Pertama yang harus kita buat adalah buat folder dulu di htdocs dengan nama bioskop, boleh apa aja sih, tapi kan kalau udah sama enak nyocokinya. ya ga ya ga ? 

2. Buat Database

Om bewok membuat database dengan nama bioskop, lalu om bewok membuat table dengan nama theater_jakarta.ada 3 field di antaranya adalah id, nama_film, tempat. Kamu bisa lihat dibawah kalau tidak mengerti.

Gambar 1. 1 Field pada database Bioskop 

3. Isi Data Tersebut

Maksudnya di sini kamu harus mengisi id nya berapa, nama filmnya apa dan tempatnya apa, Seperti yang sudah om bewok buat dibawah ini.

Gambar 2.1 Data semua dari database bioskop

4. Buat File Di Folder bioskop, yang kita buat ada 3 file :  koneksi.php, search.php danproses.phpKamu bisa lihat di bawah untuk mencocokan ya.

Gambar 3.1 Ada 3 file yang dibuat dan berada di folder bioskop

5. Saatnya Kita Ngoding

Pertama kamu harus buat koneksi terlebih dahulu, untuk menyambungkan antara php dan mysql, mari kita buka koneksi.php dan kodinganya seperti dibawah ini ya.

<?php 
 mysql_connect('localhost','root','');
 mysql_select_db('bioskop');
?>

ket:
*pssst psstt bioskop itu adalah nama databasenya ya

Selanjutnya kita bikin file yang search.php

<form method="post" action="proses.php">
 <input type="text" name="search" placeholder="cari disini">
 <input type="submit" name="submit" value="search"">
</form>

Perhatikan yang name="search" itu yang bakal dipakai di proses.php.

proses.php codinganya seperti dibawah ini ya.

<table border="1">
 <tr>
  <th>No</th>
  <th>ID Film</th>
  <th>Nama Film</th>
  <th>Tempat</th>
 </tr>

<?php  
 include 'koneksi.php';
 $no_urut = 0;
 $search = $_POST['search'];
 $query = "SELECT * FROM theater_jakarta WHERE nama_film LIKE '%$search%'";
 $result = mysql_query($query);
 while($data = mysql_fetch_array($result)) {
  $no_urut++;
  echo "<tr>
     <td>$no_urut</td>
     <td>".$data['id']."</td>
     <td>".$data['nama_film']."</td>
     <td>".$data['tempat']."</td>
  <tr>";
 }
?>
</table>

Dari proses.php om bewok akan menjelaskan dari yang pentingnya aja ya, seperti dibawah ini ya.

$search = $_POST['search'];



$query = "SELECT * FROM theater_jakarta WHERE nama_film LIKE '%$search%'";

Kita pelajarin kodenya, $search = $POST['search']; itu artinya kita membuat variabel yang bernama $search dan di dalamnya search yang di dapat dari search.php di bagian 

<input type="text" name="search" placeholder="cari disini">

Ini yang kita bedah terakhir yaitu 

$query = "SELECT * FROM theater_jakarta WHERE nama_film LIKE '%$search%'";

Artinya kita membuat variabel $query lalu kita select semua yang berada di table theater_jakarta lalu nama_filmkita dapat dari database dan '%$search%' kita dapat dapat dari $search yang berada di atasnya dan menghubungkan bagian |  <input type="text" name="search" placeholder="cari disini">

6. Selesai, Selanjutnya mari kita cobaaaaaaaaaaa

Om bewok masuk ke browser lalu buka http://localhost:bioskop/search.php, om bewok akan mencari film kesukaan om bewok yaitu Harry Potter

Gambar 4,1 Mari kita coba dengan mencari Harry Potter

HORE KETEMUUUU

Gambar 5,1 KETEMU FILMNYA HORE

Terima Kasih buat teman - teman yang sudah membaca Tutorial Cara Membuat Pencarian Data Atau Search Menggunakan PHP dan MYSQL Semoga ilmunya bermanfaat buat teman - teman yang sedang belajar php & MySql,Oh iya mungkin  kamu bingung kenapa standart banget tampilanya, om bewok sengaja ngebuat standart, yang lebih di tekanin adalah cara membuat pencarian bukan designnya menarik atau seperti apa, biar teman - teman tau  dasarnya seperti apa. Sampai jumpa di Tutorial Selanjutnya ya.

Menu responsive CSS murni di blogger

Kemudian tambahkan juga kode CSS responsive di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>. Jika di blog Anda sudah ada CSS responsivenya silahkan tambahkan saja pada CSS responsive yang sudah ada.

#menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}

#menu ul{height:45px;width:1024px}

#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}

#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}

#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;

background: #5FC6EB;}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu label span{font-size:16px;position:absolute;left:35px}

#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}

#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;

text-shadow: none;border-bottom: 1px dashed #31AFDB;}


#menu ul.menus a{color: #FFF;line-height: 35px;}

#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;

-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;

transition: all .1s ease-in-out;}


@media screen and (max-width: 800px){

#menu{position:relative}

#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}

#menu ul.menus{width:100%;position:static;padding-left:20px}

#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}

#menu input,#menu label{position:absolute;top:0;left:0;display:block}

#menu input{z-index:4}

#menu input:checked + label{color:white}

#menu input:checked ~ ul{display:block}

}

Terakhir kode HTML nya copy kan tepat diatas  </header> 

<nav id='menu'>

<input type='checkbox'/>

<label>&#8801;<span>Navigasi&#160;Menu</span></label>

<ul>

<li><a href='/'>Home</a></li>

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

<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>

<ul class='menus'>

<li><a href='#'>Tab 1</a></li>

<li><a href='#'>Tab 2</a></li>

<li><a href='#'>Tab 3</a></li>

<li><a href='#'>Tab 4</a></li>

<li><a href='#'>Tab 5</a></li>

<li><a href='#'>Tab 6</a></li>

</ul>

</li>

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

<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>

<ul class='menus'>

<li><a href='#'>Tab 1</a></li>

<li><a href='#'>Tab 2</a></li>

<li><a href='#'>Tab 3</a></li>

</ul>

</li>

<li><a href='#'>Advertise</a></li>

</ul

Silahkan ganti tanda "/" atau "#" dengan url tujuan menu. 

contoh dengan kategori tertentu

<li><a href='#'>Tips dan Trik <font size='1'>&#9660;</font></a>

 <ul class='menus'>

   <li><a href='http://www.1kilovolt.blogspot.co.id//search/label/windows'>Windows</a></li>

   <li><a href='http://www.1kilovolt.blogspot.co.id//search/label/blogger'>Blog</a></li>

   <li><a href='http://www.1kilovolt.blogspot.co.id//search/label/Mikrotik'>Mikrotik</a></li>

 </ul>

</li>

Dan untuk warna menunya silahkan sesuaikan dengan tema blog Anda dengan memodifikasi warnanya pada kode CSS-nya.

Selamat mencoba....

Cara Menampilkan Widget di Template Blogspot versi Mobile

Bagi sobat yang menggukan template dari evotemplates.net, khususnya yang memliki fitur custom mobile template mungkin bertanya-tanya, “kenapa ya di versi mobile widgetnya tidak tampil?” nah, pada postingan ini saya akan sedikit menjelaskannya.Alasan kenapa widget yang sobat pasang tidak tampil di versi mobile adalah karena dalam keadaan default widget yang ditampilkan di versi mobile hanya widget-widget berikut ini:

1. Header
2. Blog
3. Profil
4. PageList
5. AdSense
6. Atribusi

Jika sobat memesang widget selain widget di atas, seperti popular post atau arsip, maka widget tersebut tidak akan tampil di versi seluler. Nah, pertanyaanya, bisakah widget tersebut diatur supaya bisa tampil di versi seluler, jawabannya bisa banget.

Untuk mengatur agar widget yang sobat pasang bisa tampil di versi seluler caranya sobat hanya perlu menambahkan sebuah Attribute baru pada tag <b:widget/>.

Sebagai contah, saya ingin menampilakan widget widget populer post di versi mobile, maka caranya pertama adalah masuk ke dashboard > template > edit HTML. setelah itu cari tag widget popular post di dalam template.
Kurang lebih kode widget Popular Post-nya seperti ini:

<b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='PopularPosts'>

Nah yang  perlu kita lakukan adalah menambahkan Attribute baru pada tag widget tersebut, yaitu mobile. Attribute mobile ini sendiri memiliki tiga nilai, yaitu Yes, No, dan Only. Seperti inilah penerapannya:

<b:widget id='PopularPosts3' mobile='yes' locked='false' title='Entri Populer' type='PopularPosts'> 

Kode di atas adalah  untuk menampilkan widget popular post versi mobile dan juga tampil di tampilan versi desktop.

<b:widget id='PopularPosts3' mobile='only' locked='false' title='Entri Populer' type='PopularPosts'>

Kode di atas adalah  untuk menampilkan widget popular post versi mobile tapi tidak tampil di versi desktop.

<b:widget id='PopularPosts3' mobile='no' locked='false' title='Entri Populer' type='PopularPosts'>

Sedangakan kode di atas adalah untuk menyembungikan widget di versi mobile.

Yang perlu diketahui adalah setiap widget memiliki id yang berbeda-beda, jadi sobat harus teliti dalam mecari kode tag widgetnya.

Yaps, mungki hanya segitu saja. semoga tutorial singkat ini bermanfaat.

Navigasi Menu Responsive + Dropdown untuk Blogger Tanpa JavaScript

Sumber: http://blogromeltea.blogspot.com/2017/10/navigasi-menu-responsive-dropdown-blogger.html

Berikut ini cara memasangnya di template blog Anda:

1. Tema > Edit HTML
2. Copas kode CSS Menu Responsive berikut ini di atas kode ]]></b:skin>

#nav {background: #069bd6;margin-bottom: 20px;text-transform:uppercase;font-weight:bold}
#nav ul {margin:0;padding:0;}
#nav li {list-style:none;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;margin:0;padding:0;}
#nav li a {display:block;text-decoration:none;color:white;padding:1em;}
#nav li a:hover {color:white;background:#191919;}
.show-menu {background: #71a4fa;text-decoration: none;color: #fff;text-align: left;padding: 10px 5px;display: none;}
.show-menu b{font-size:30px;}
.show-menu span{margin-right: 1em;float:right;}
#nav input[type=checkbox]{display: none;}
#nav input[type=checkbox]:checked ~ #menus {display: block;}
#nav ul.sub-menus{height:auto;overflow:hidden;width:180px;background:#eee;position:absolute;z-index:99;display:none;}
#nav ul.sub-menus li{display:block;width:100%;text-transform:none;text-shadow:none}
#nav ul.sub-menus a{color:#fff;background:#48d}
#nav ul.sub-menus a:hover{background:#ddd;color:#333}
#nav li:hover ul.sub-menus{display:block}
#nav a.prett{padding:13px}
#nav a.prett::after{content:&quot;&quot;;width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent transparent;position:absolute;top:18px;right:9px}
@media screen and (max-width:768px){
#nav ul {position: static;display: none;}
#nav li {border-bottom: 1px solid #90b3ec;}
#nav ul li, #nav li a {width: 100%;}
#nav li a{display:block;height:auto;line-height:normal;}
#nav li a {text-align:left;}
#nav ul.sub-menus{width:100%;position:static;padding-left:20px}
.show-menu {display:block!important;line-height:30px;}
.show-menu:hover {cursor:pointer;}
label {margin:0!important;}
}

3. Copas kode HTML Menu Responsive berikut ini di bawah kode </header> atau di bawah kode header blog Anda.

<nav id='nav'>
<label class='show-menu' for='show-menu'><b>&#9776;</b> <span>Show Menu</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='/'>Home</a></li>
    <li><a href='/p/about.html'>About</a></li>
    <li><a href='/p/kontak.html'>Kontak</a></li>
    <li><a href='/p/sitemap.html'>Sitemap</a></li>
    <li><a href='/p/sitemap.html'>Galeri</a></li>
<li><a class='prett' href='#'>Dropdown Menu <span class='arrow'>&#9660;</span></a>
 <ul class='sub-menus'>
 <li><a href='#'>Sub Menu1</a></li>
 <li><a href='#'>Sub Menu2</a></li>
 <li><a href='#'>Sub Menu3</a></li>
 <li><a href='#'>Sub Menu4</a></li>
 <li><a href='#'>Sub Menu5</a></li>
</ul></li>
      <li><a href='#'>Blogging</a></li>
</ul>
</nav>

4. Ganti Tanda Pagar (#) dengan URL Link menu yang akan Anda tampilkan.
5. Save!

Fungsi Navigasi Menu:
Navigasi menu adalah elemen blog untuk menampilkan link internal ke halaman statis ataupun halaman label.

Bisa juga berisi link ke posting tertentu atau ke blog lain. Bebas diisi link apa saja, namun sebaiknya berupa halaman statis About, Kontak, Disclaimer, dan Halaman Label untuk menggambarkan konten blog secara keseluruhan.

Untuk mengetahui dan copas link halaman label atau halaman statis, buka saja halaman tersebut dan copy linknya di address bar dan paste di kode HTML navigasi menu responsive seperti di atas.

Itu dia cara membuat Navigasi Menu Responsive + Dropdown untuk Blogger Tanpa JavaScript. Sumber kode di CSS Menu Maker.