Membuat Fitur Pencarian di Android dengan data statis

1.



       Buat ListView untuk menampung datanya
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:orientation="vertical"
   
tools:context="com.example.asus.searchbar.MainActivity">

    <ListView
       
android:layout_width="match_parent"
       
android:layout_height="match_parent"
       
android:id="@+id/listViewCountry"
       
android:layout_weight="1">

    </ListView>

</LinearLayout>

2.       Untuk datanya kita akan menggunakan data statis yang disimpan di string. simpan file dibawah dengan nama string.xml di folder values
<resources>

    <string name="app_name">SearchBar</string>

    <string-array name="array_country">

        <item>Afganistan</item>

        <item>Australia</item>

        <item>Afrika Selatan</item>

        <item>Amerika</item>

        <item>Belanda</item>

        <item>Brazil</item>

        <item>Brunei Darussalam</item>

        <item>China</item>

        <item>Ceko</item>

        <item>Estonia</item>

        <item>Denmark</item>

        <item>Finlandia</item>

        <item>Francis</item>

        <item>Ghana</item>

        <item>Haiti</item>

        <item>Honduras</item>

        <item>Hongaria</item>

        <item>Italia</item>

        <item>India</item>

        <item>Iran</item>

        <item>Irak</item>

        <item>Israel</item>

        <item>Indonesia</item>

        <item>Inggris</item>

        <item>Jerman</item>

        <item>Jepang</item>

        <item>Kanada</item>

        <item>Korea Selatan</item>

        <item>Kabul</item>

        <item>Leshoto</item>

        <item>Latvia</item>

        <item>Luxseburg</item>

        <item>Madagaskar</item>

        <item>Malaysia</item>

        <item>Maldives</item>

        <item>Mesir</item>

        <item>Meksiko</item>

        <item>Nepal</item>

        <item>Norwegia</item>

        <item>Oman</item>

        <item>Paraguay</item>

        <item>Papua Nugini</item>

        <item>Peru</item>

        <item>Pilipina</item>

        <item>Portugal</item>

        <item>Qatar</item>

        <item>Rusia</item>

        <item>Swedia</item>

        <item>Swiss</item>

        <item>Saudi Arabia</item>

        <item>Selandia Baru</item>

        <item>Singapura</item>

        <item>Thailand</item>

        <item>Timor Leste</item>

        <item>Turkey</item>

        <item>Uruguay</item>

        <item>Uganda</item>

        <item>Vietnam</item>

        <item>Yaman</item>

    </string-array>

</resources>

3.       Buat Menu Pencariannya, caranya buat dulu android resource directory di folder res dengan nama menu. kemudian dalam folder menu buat file menu_search.xml dan isikan kode dibawah:
<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto">



    <item

        android:id="@+id/menuSearch"

        android:icon="@android:drawable/ic_menu_search"

        android:title="Search"

        app:actionViewClass="android.support.v7.widget.SearchView"

        app:showAsAction="always"></item>



</menu>

4.       Langkah terakhir untuk kode javanya silakan masukan kode dibawah :
package com.example.asus.searchbar;



import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.SearchView;

import android.view.Menu;

import android.view.MenuInflater;

import android.view.MenuItem;

import android.widget.ArrayAdapter;

import android.widget.ListView;



import java.util.ArrayList;

import java.util.Arrays;



public class MainActivity extends AppCompatActivity {



    ArrayAdapter<String> adapter;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        ListView lv = (ListView) findViewById(R.id.listViewCountry);

        ArrayList<String>  ArrayCountry = new ArrayList<>();

        ArrayCountry.addAll(Arrays.asList(getResources().getStringArray(R.array.array_country)));



        adapter = new ArrayAdapter<String>(

                MainActivity.this,

                android.R.layout.simple_list_item_1,

                ArrayCountry);

        lv.setAdapter(adapter);

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        MenuInflater inflater = getMenuInflater();

        inflater.inflate(R.menu.menu_search, menu);

        MenuItem item = menu.findItem(R.id.menuSearch);

        SearchView searchView = (SearchView)item.getActionView();



        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

            @Override

            public boolean onQueryTextSubmit(String query) {

                return false;

            }



            @Override

            public boolean onQueryTextChange(String newText) {

                adapter.getFilter().filter(newText);

                return false;

            }

        });



        return super.onCreateOptionsMenu(menu);

    }

}


Selanjutnya silakan jalankan aplikasi anda bila ada yang error bias ditanyakan pada kolom komentar dibawah

Membuat Autocomplete Text dengan PHP, AJAX dan Bootstrap

Autocomple text biasanya digunakan pada form pencarian, misalnya di situs pencarian google ketika kita mengetik kata kita akan disuguhkan beberapa suggestion yang bisa dipilih, selain itu bisa juga diaplikasikan pada sistem login, ketika kita memasukan email akan ada pilihan jika sebelumnya sudah memasukan email yang sama. untuk membuatnya kita akan menggunakan AJAX. 



langkah pertama buat dulu HTMLnya seperti dibawah:

<!DOCTYPE html>
<
html>
<
head>
<
meta charset="utf-8">
<
title>Autocomplete Text</title>
<
script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous" charset="utf-8"></script>
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<
script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css">
<
script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" charset="utf-8"></script>
</head>
<
body>
<
br><br>
<
div class="container" style="width:600px;">
<
h2 align="center">Autocomplete Textbox using Typeahead with Ajax PHP</h2>
<
br><br>
<
label>Search Country</label>
<
input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
</div>
</body>
</html>

<
script>
  $(document).ready(function(){

          $(
'#country').typeahead({
          source: function(query, result)
          {
          $.ajax({
          url:
"fetch.php",
          method:
"POST",
          data:{query:query},
          dataType:
"json",
          success:function(data)
          {
          result($.map(data, function(item){
         
return item;
          }));
          }
          })
          }
          });

          });
</script>

untuk jquery sama bootstrapnya diatas saya menggunakan CDN biar cepat, agar kita tidak usah download dulu, selanjutnya buat file php untuk mengambil datanya dari database

<?php



// fetch data

            $connect = mysqli_connect("localhost", "root", "", "database");

$request = mysqli_real_escape_string($connect, $_POST["query"]);

        $query = "SELECT * FROM countries WHERE name LIKE '%".$request."%'";



        $result = mysqli_query($connect, $query);



        $data = array();



        if (mysqli_num_rows($result) > 0)

        {

        while ($row = mysqli_fetch_assoc($result))

        {

        $data[] = $row["name"];

        }

        echo json_encode($data);

}

untuk tabel databasenya seperti ini:
-- phpMyAdmin SQL Dump

        -- version 4.5.1

        -- http://www.phpmyadmin.net

        --

        -- Host: 127.0.0.1

        -- Generation Time: 26 Sep 2017 pada 00.21

        -- Versi Server: 10.1.16-MariaDB

        -- PHP Version: 5.6.24



        SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

        SET time_zone = "+00:00";





/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;



        --

        -- Database: `database`

        --



        -- --------------------------------------------------------



        --

        -- Struktur dari tabel `countries`

        --



        CREATE TABLE `countries` (

        `id` int(11) NOT NULL,

        `sortname` varchar(3) NOT NULL,

        `name` varchar(150) NOT NULL,

        `phonecode` int(11) NOT NULL

        ) ENGINE=MyISAM DEFAULT CHARSET=latin1;



        --

        -- Dumping data untuk tabel `countries`

        --



        INSERT INTO `countries` (`id`, `sortname`, `name`, `phonecode`) VALUES

        (1, 'AT', 'Austria', 99),

        (2, 'US', 'United State', 1),

        (3, 'ID', 'Indonesia', 62),

        (4, 'IN', 'India', 60),

        (5, 'AG', 'Afganistan', 11),

        (6, 'UEA', 'Uni Emirate Arab', 20),

        (7, 'QA', 'Qatar', 32),

        (8, 'BR', 'Brazil', 46),

        (9, 'IC', 'Iceland', 10),

        (10, 'UK', 'United Kingdom', 12),

        (11, 'SW', 'Swiss', 9),

        (12, 'AU', 'Australia', 6),

        (13, 'FN', 'Finlandia', 23);



        --

        -- Indexes for dumped tables

        --



        --

        -- Indexes for table `countries`

        --

        ALTER TABLE `countries`

        ADD PRIMARY KEY (`id`);



        --

        -- AUTO_INCREMENT for dumped tables

        --



        --

        -- AUTO_INCREMENT for table `countries`

        --

        ALTER TABLE `countries`

        MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


Selanjutnya jalankan Program Anda, jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah. jika artikel ini bermanfaat silakan share ke teman anda, terimakasih sudah berkunjung ke blog kami.

Cara Membuat Background Video dengan CSS seperti websitnya unity


Assalamualikum Wr. Wb. Selamat Pagi Semuanya. Kali ini saya mau berbagi tutorial cara membuat background video seperti websitenya unity. Jika kalian pernah mengunjungi websitenya unity 3d engine pasti pernah melihat backgroundnya itu menggunakan video, nah bagaimanakah cara membuat background video seperti itu? ternyata caranya cukup mudah hanya mengandalkan style CSS. Ok langsung saja untuk membuatnya siapkan satu buah video lalu buat sebuah file html, isinya seperti berikut, untuk stylenya saya gabungkan di dalam htmlnya.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Background Video</title>
    <style media="screen">
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: sans-serif;
        font-size: 1rem;
        line-height: 1.5;
        color: #333;
        overflow-x: hidden;
      }
      .v-header {
        height: 100vh;
        display: flex;
        align-items: center;
        color: #fff;
      }
      .container {
        max-width: 960px;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: auto;
        text-align: center;
      }
      .fullscreen-video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      .fullscreen-video-wrap video {
        min-width: 100%;
        min-height: 100%;
      }
      .header-overlay {
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        background: #225470;
        z-index: 1;
        opacity: 0.85;
      }
      .header-content {
        z-index: 2;
      }
      .header-content h1{
        font-size: 50px;
        margin-bottom: 0;
      }
      .header-content p {
        font-size: 1.5rem;
        display: block;
        padding-bottom: 2rem;
      }
      .btn {
        background: #34b3a0;
        color: #fff;
        font-size: 1.2rem;
        padding: 1rem 2rem;
        text-decoration: none;
      }
      .section {
        padding: 20px 0;
      }
      .section-b {
        background: #333;
        color: #fff;
      }

      @media(max-width:960px) {
        .container {
          padding-left: 3rem;
          padding-right: 3rem;
        }
      }
    </style>
  </head>
  <body>
    <header class="v-header container">
        <div class="fullscreen-video-wrap">
          <video src="video.mp4" autoplay loop="true" poster="youtube.jpg"></video>
        </div>
      <div class="header-overlay"></div>
      <div class="header-content">
        <h1>Hello Everyone</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariat</p>
        <a href="#" class="btn">Read More</a>
      </div>
    </header>

    <section class="section section-a">
      <div class="container">
        <h1>Section A</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <section class="section section-b">
      <div class="container">
        <h1>Section B</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
  </body>
</html>



Ok Sekianlah tutorial kali ini, semoga bermanfaat. jika ada yang kurang jelas silakan ditanyakan pada komentar di bawah. jika artikel ini bermanfaat silakan di share

Menyatukan beberapa file PHP menjadi sebuah halaman berbentuk kotak-kotak dan memisahkanya per Bab

Misalkan anda mempunyai beberapa file PHP dan anda ingin menyatukan beberapa file PHP tersebut menjadi sebuah halaman menjadi beberapa blok. ini juga pernah saya alami waktu saya dikasih tugas desain Pemerograman web. kita akan membuat desain web dengan html dan css untuk menempatkan file-file PHP tersebut. pertama kita buat dulu kerangka htmlnya seperti berikut:

<html>
<head><title>Tugas</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Francois One', sans-serif;
background: url("1.jpg");
}
.header {
height: 150px;
background-color: rgba(10, 100, 205, 0.9);
padding: 0;
font-family: 'Francois One', sans-serif;
}
.left {
width: 50%;
float: left;
background-color: transparent;
}
.right {
width: 50%;
float: right;
}
.box1{
margin: 25px auto;
padding: 10px;
width: 400px;
border-radius: 10px;
border: 1px solid #ddd;
background: linear-gradient(-90deg, rgba(0,0,255,0.6), rgba(0,255,0,0.6));
text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em yellow;
}
label {
width: 85px;
height: auto;
float: left;
margin: 8px auto;
}
input[type=text]{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
background: blue;
}
input[type=text]:hover{
box-shadow: 0 0 6px rgba(35, 173, 278, 1);
background: #fff;
}
input[type=submit], input[type=reset]{
padding: 5px;
width: 90px;
cursor: pointer;
border-radius: 5px;
border: none;
background: #fff;
margin: 5px 95px;
display: inline-block;
}
input[type=submit]:hover, input[type=reset]:hover{
background: rgba(0,0,0,0.5);
color: #fff;
}
.footer {
heigh: 100px;
background-color: #ccc;
padding: 10px;
font-weight: bold;
}
.clear {
clear: both;
}
.h1, .h2{
text-align: center;
}
ul {
list-style: none;
background-color: yellow;
width: 100%;
bottom: 0;
text-align: center;
}
li{
display: inline-block;
padding: 10px;
background-color: yellow;
}
li:hover {
background-color: blue;
color: #fff;
}
li:current {
background-color: orange;
}
a {
text-decoration: none;
}
a:hover{
color: #fff;
}
right {
float: right;
}
select, textarea{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
}
</style>
</head>
<body>
<div class="header">
<br>
<h1 class="h1">Tugas Pemerograman PHP dengan style CSS</h1>
<h2 class="h2">Diki Munggaran 1501110039</h2>
<br>
<ul>
<li><a href="?page=bab1">Bab 1</a></li>
<li><a href="?page=bab2">Bab 2</a></li>
<li><a href="?page=bab3">Bab 3</a></li>
<li><a href="?page=bab4">Bab 4</a></li>
<li><a href="?page=bab5">Bab 5</a></li>
<li><a href="?page=bab6">Bab 6</a></li>
<li><a href="?page=bab7">Bab 7</a></li>
<li><a href="?page=bab8">Bab 8</a></li>
</ul>
</div>
<?php 
        if(isset($_GET['page'])){
        $page=htmlentities($_GET['page']);
        }else{
        $page="bab1";
        }
        
        $file="$page.php";
        $cek=strlen($page);
        
        if($cek>30 || !file_exists($file) || empty($page)){
        include ("bab1.php");
        }else{
        include ($file);
        }
?>
<div class="clear">
<div class="footer">
Copyright &copy; <?php echo date("Y");?> Diki Munggaran All Right Reserved. <right>We made with love</right>
</div>
</body>
</html>


Simpan file diatas dengan nama index.php atau nama lain sesuai keinginan anda. selanjutnya kita buat file bab4.php berikut ini scriptnya:

<div class="left">
<div class="box1"><?php include "input01.php"; ?></div>
<div class="box1"><?php include "input03.php"; ?><br><?php include "proses03.php"; ?></div>
<div class="box1"><?php include "input05.php"; ?><br><?php include "proses05.php"; ?></div>
<div class="box1"><?php include "input07.php"; ?><br><?php include "proses07.php"; ?></div>
<div class="box1"><?php include "input09.php"; ?><br><?php include "proses09.php"; ?></div>
</div>
<div class="right">
<div class="box1"><?php include "input02.php"; ?><br><?php include "proses02.php"; ?></div>
<div class="box1"><?php include "input04.php"; ?><br><?php include "proses04.php"; ?></div>
<div class="box1"><?php include "input06.php"; ?><br><?php include "proses06.php"; ?></div>
<div class="box1"><?php include "input08.php"; ?><br><?php include "proses08.php"; ?></div>
</div>

Untuk file bab1 sampai bab8 cara penulisanya sama seperti bab4.php cuma beda isinya saja. untuk file phpnya bisa anda download disini. atau jika ingin yang udah jadi bisa di download disini

Cara Membuat Conditional Split Pada Visual Studio Data Tools dengan database SQL Server


Assalamualaikum Wr. Wb. Kali ini kita akan membahs data warehouse yaitu cara membuat conditional split pada visual studio data tools dengan database SQL Server, tulisan ini saya buat untuk mencegah lupa bila di masa mendatang saya lupa saya tinggal buka postingan ini dan bagi anda yang belum pernah bisa mencoba

Pertama, import table Employees.csv kedalam database anda, untuk cara import nya bisa dilihat pada postingan sebelumnya

Setelah Table Employees terbentuk buatlah Integration Services dengan menggunakan Visual Studio Data Tools atau Business Intelegent

Bukalah Visual Studio Data Tools kemudian buat project baru dengan nama Kamis Latihan6, Pada bagian Business Intelegence pilih Integration Services Project kemudian klik OK

Pada Visual Studio Data Tools ada bagian Control Flow dan Data Flow, sebuah Control Flow bisa mempunyai satu Data Flow bisa juga sebuah Control Flow bisa mempunyai banyak data flow

pada bagian Control Flow buat Sebuah data Flow Task, kemudian double klik akan pindah ke data flow pada bagian data flow buatlah desain seperti di bawah



Pada bagian OLE DB Source Double Klik, Kemudian Klik New

New Lagi Pada Server Name isikan dengan server name database anda 


jika tidak tahu name servernya buka SQL Server Manajemen Studio kemudian pada bagian Object Explorer paling atas klik kanan pilih properties 

copykan server name nya kedalam Connection Manager yang tadi pada bagian connect to database pilih database yang anda gunakan kemudian klik OK -> Ok Lagi Pada bagian table or view pilih table Employees
-> klik Ok


Pada bagian Conditional Split status kode status menikah: MaritalStatus == "M" dan belum menikah: MaritalStatus == "S"
Pada bagian jenis kelamin kondisinya hampir sama dengan status, Pria: Gender == "M" dan wanita: Gender == "F"


kemudian pada bagian data Conversion ubah tipe data BirthDate dari String menjadi Date

dan pada bagian conditional split yang terakhir usia35th: YEAR([Copy of BirthDate]) >= 1988, dibawah 35th: YEAR([Copy of BirthDate]) < 1988


Pada Flat File Destination double klik kemudian New 

kemudian pilih Delimited kemudian pilih browse kemudian namai dan formatnya pilih CSV kemudian OK. 

Ulangi untuk semua Flat Flie Destination.

Jika sudah jalankan dengan klik start jika ceklis semua berarti berhasil

Kemudian buka folder tempat menyimpan flat file destiantion anda akan kebentuk beberapa file CSV

OK Selamat mencoba semoga bermanfaat, jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah