Juanas Smith Shared

selamat siang kali ini kita akan membuat RESTful API CRUD sederhana dengan PHP

Apa itu API?

API(Aplication Programming Interface) adalah sebuah web service yang berguna untuk menjembatani aplikasi dengan database, API tidak tergantung pada bahasa pemrograman tertentu, dengan API kita bisa berkomunikasi dengan aplikasi yang berbeda pemrogramanya, Misalnya Aplikasi A menggunakan bahasa PHP dan Aplikasi B menggunakan bahasa Java kita bisa mengakses informasi informasi aplikasi A untuk ditampilkan di aplikasi B dengan bantuan API, jadi kita tidak harus tau dulu database nya apa struktur table nya bagaimana tinggal menggunakan API yang sudah disediakan oleh developer pembuat API di Aplikasi itu. untuk menggunakan API kita harus melihat dulu dokumentasi dari si pembuat API nya, kita tidak bisa berkreatif membuat cara sendiri jadi misalnya untuk mengakses data apa saja yang dapat diakses bagaimana cara mengaksesnya, apakah bersifat publik atau harus menggunakan token semua tergantung si pembuat API nya jadi kita harus membaca dulu dokumentasinya. format yang dipakai biasanya berbentuk XML atau JSON tetapi yang paling sering kita temui berbentuk JSON (Javascript Object Notation). contoh API yang biasa dipakai untuk login adalah facebook misalnya pada situs stackoverflow kita bisa login lewat facebook atau google, API ini tidak tergantung pada satu bahasa pemrograman misalnya facebook menggunakan bahasa PHP dan stackoverflow menggunakan javascript bisa terhubung dan untuk databasenya stackoverflow tidak harus mempunyai database yang sama digunakan oleh facebook. metode yang biasa digunakan dalam API ini biasanya GET, POST, PUT, PATCH, DELETE dll

Jenis-Jenis API

API ada dua jenis yaitu SOAP dan REST tetapi yang paling populer adalah REST API

Softwre untuk membuat API

untuk membuat API yang anda perlukan hanya text editor, browser, plugin JSON viewer untuk melihat tampilan JSON agar lebih mudah dibaca, POSTMAN untuk mengetest API nya

Buat dulu database nya seperti ini:


-- phpMyAdmin SQL Dump

-- version 4.5.1

-- http://www.phpmyadmin.net

--

-- Host: 127.0.0.1

-- Generation Time: 23 Okt 2018 pada 13.23

-- 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: `cruds`

--



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



--

-- Struktur dari tabel `mahasiswa`

--



CREATE TABLE `mahasiswa` (

  `npm` varchar(10) NOT NULL,

  `nama` varchar(100) NOT NULL,

  `prodi` varchar(50) NOT NULL,

  `fakultas` varchar(50) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;



--

-- Dumping data untuk tabel `mahasiswa`

--



INSERT INTO `mahasiswa` (`npm`, `nama`, `prodi`, `fakultas`) VALUES

('000000', 'zero', 'zero prodi', 'zero fakultas'),

('1100001110', 'Dhani', 'Kedokteran', 'Dokter'),

('1111', 'iwan setiawan', 'teknik otomotif', 'teknik '),

('1201110012', 'Indra', 'Sistem Informasi', 'Teknik'),

('12346545', 'Ahmad Fauzila', 'kehutanan', 'ilmu kehutanan'),

('1500110001', 'Jhon', 'Teknik Informatika', 'Teknik'),

('2222', 'Dudi', 'Teknik sipil', 'teknik'),

('88888', 'Delapan Enam', 'Delapan 999', 'Densus 88');



--

-- Indexes for dumped tables

--



--

-- Indexes for table `mahasiswa`

--

ALTER TABLE `mahasiswa`

  ADD PRIMARY KEY (`npm`);



/*!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 */;
?>

Langkah Pertama membuat koneksi ke database



define('HOSTNAME','localhost');

define('USERNAME','root');

define('PASSWORD','');

define('DB_NAME','cruds');



$koneksi = new mysqli(HOSTNAME, USERNAME, PASSWORD, DB_NAME) or die (mysqli_errno());



?>

selanjutnya kita akan membuat CREAT



include_once('connection.php');



$npm = addslashes(htmlentities($_POST['npm']));

$nama = addslashes(htmlentities($_POST['nama']));

$prodi = addslashes(htmlentities($_POST['prodi']));

$fakultas = addslashes(htmlentities($_POST['fakultas']));



$insert = "INSERT INTO mahasiswa(npm,nama,prodi,fakultas) VALUES ('$npm','$nama','$prodi','$fakultas')";



$exeinsert = mysqli_query($koneksi,$insert);



$response = array();



if($exeinsert)

{

  $response['code'] =1;

  $response['message'] = "Success! Data Inserted";

}else{

  $response['code'] =0;

  $response['message'] = "Failed! Data Not Inserted";

}



echo json_encode($response);

?>

untuk mengetest nya bisa menggunakan POSTMAN atau melalui browser tetapi kalau melalui browser agak ribet karena harus memasukan url yang panjang

Kemudian kita akan membuat VIEW yaitu API untuk menampilkan data dari program CRUD nya


include_once('connection.php');
$query = "SELECT * FROM mahasiswa";
$result = mysqli_query($koneksi,$query);
$array_data = array();
while($baris = mysqli_fetch_assoc($result))
{
  $array_data[]=$baris;
}

echo json_encode($array_data);
?>

selanjutnya untuk UPDATE seperti dibawah


require_once('connection.php');

$npm = addslashes(htmlentities($_POST['npm']));

$nama = addslashes(htmlentities($_POST['nama']));
$prodi = addslashes(htmlentities($_POST['prodi']));
$fakultas = addslashes(htmlentities($_POST['fakultas']));

$getdata = mysqli_query($koneksi,"SELECT * FROM mahasiswa WHERE npm='$npm'");
$rows = mysqli_num_rows($getdata);

$update = "UPDATE mahasiswa SET nama='$nama',prodi='$prodi',fakultas='$fakultas' WHERE npm='$npm'";
$exequery = mysqli_query($koneksi,$update);

$respose = array();

if($rows > 0)
{
  if($exequery)
  {
    $respose['code'] = 1;
    $respose['message'] = "Updated Success";
  }else{
    $respose['code'] = 0;
    $respose['message'] = "Updated Failed";
  }
}else{
  $respose['code'] = 0;
  $respose['message'] = "Updated Failed, Not data selected";
}
echo json_encode($respose);
?>

terakhir untuk DELETE seperti berikut:


include_once('connection.php');

$npm = addslashes(htmlentities($_POST['npm']));
$getdata = mysqli_query($koneksi,"SELECT * FROM mahasiswa WHERE npm = '$npm'");
$rows = mysqli_num_rows($getdata);

$delete = "DELETE FROM mahasiswa WHERE npm = '$npm'";
$exedelete = mysqli_query($koneksi,$delete);

$respose = array();
if($rows > 0)
{
  if ($exedelete) {
    $respose['code'] = 1;
    $respose['message'] = "Deleted Success";
  }else{
    $respose['code'] = 0;
    $respose['message'] = "Failed to Delete";
  }
}else{
  $respose['code'] = 0;
  $respose['message'] = "Failed to Delete, data Not Found";
}


echo json_encode($respose);
?>

selesai sudah sudah API CRUD nya Create Read Update Delete sudah lengkap

untuk menyembunyikan susunan file pada folder kita bisa menggunakan .htaccess isinya hanya seperti ini Options -Indexes karena kita tidak memiliki file index jadi file-file yang ada dalam folder kita akan ditampilkan semua kalau API nya sudah kita rilis atau diupload ke server akan sangat berbahaya karena hacker akan mudah melihat susunan file kita selain dengan htaccess kita juga bisa membuat file index yang isi nya access denied misalnya

Menampilkan Jam di browser dengan PHP yang auto update setiap detik ditampilkan bisa dibuat dengan memanfaatkan AJAX (Assincronus Javascript and XML). Logikanya kita buat dulu kode PHP untuk menampilkan Jam dari komputer kita, kemudian kita buat file baru yang berisi AJAX auto update dengan waktu satu detik. Jadi Perogram AJAX akan me-load fungsi PHP yang bertugas menampilkan Jam dari komputer kita tiap satu detik sekali, Karena di load tiap satu detik sekali maka tiap kali Jam berganti detik akan ditampilkan.
Ok langsung kita praktekan pertama buat dulu folder ajax di htdoc jika kalian menggunakan xampp atau di folder www jika anda menggunakan wamp lalu buat file jam.php isinya seperti berikut :

<?php
header('Access-Control-Allow-Origin: *');
date_default_timezone_set("Asia/Jakarta"); // untuk mengubah zona waktu
$arrDay = array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");
$day = date("w"); //0-6 of day

echo "Sekarang adalah : <b>" . $arrDay[$day]."</b><br>";
echo "" . date("d/m/Y") . "<br>";
echo " " . date("H:i:s"); // untuk menampilkan jam
?>

kemudian buat file autoload.html isinya seperti berikut:

<html>
<head>
<style>
body {
background: url("bg.jpg") 30% center no-repeat;
}
#response {
margin: 250px auto;
width: 400px;
padding: 10px;
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 30px;
font-family: verdana;
}
</style>
<script src="jquery.js"></script>
<script>
var refreshId = setInterval(function(){
$('#response').load('jam.php');
}, 1000);
</script>
</head>
<body>
<div id="response">
</div>
</body>
</html>
pada kode html diatas saya menggunakan background gambar, gambarnya bisa kalian ubah sesuai gambar yang kalian miliki

kemudian karena AJAX nya menggunakan jquery silakan anda download file jquery terbaru di jquery.org kemudian file jquery yang telah anda download ganti namanya menjadi jquery.js dan pindahkan ke folder ajax tadi

setelah itu silkan di tes di browser dengan alamat http://localhost/ajax/autoload.html jika berhasil akan tampil seperti gambar diatas. Jika ingin mempercantik font jam nya bisa anda tambahkan google font. terimakasih semoga bermanfaat

Hallo Selamat Pagi, kali ini admin akan berbagi source code password strength checker, fitur-fitur nya bisa mengecek kekuatan password, menampilkan pesan kekuatan password, menyarankan penggunaan huruf kapital atau spesial karakter untuk memperkuat password, bisa melihat password dalam bentuk text, source code ini saya dapat dari vasplus programming blog dan sekarang saya akan membagikanya daripada saya simpan sendiri siapa tau ada yang membutuhkan, ini dia tampilanya:

Untuk link downloadnya dibawah

Download Disini

Semoga bermanfaat

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

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.

Lihat Demo

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>

Lihat Demo

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

Langganan: Postingan ( Atom )

Membuat RESTful API CRUD sederhana dengan PHP

Apa itu API?

Jenis-Jenis API

Softwre untuk membuat API

Cara Menampilkan Jam dengan PHP dan AJAX

Source Code Password Strength Checker

Membuat Fitur Pencarian di Android dengan data statis

Membuat Autocomplete Text dengan PHP, AJAX dan Bootstrap

Cara Membuat Background Video dengan CSS seperti websitnya unity

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

Membuat RESTful API CRUD sederhana dengan PHP

Apa itu API?

Jenis-Jenis API

Softwre untuk membuat API

Share story

Cara Menampilkan Jam dengan PHP dan AJAX

Share story

Source Code Password Strength Checker

Share story

Membuat Fitur Pencarian di Android dengan data statis

Share story

Membuat Autocomplete Text dengan PHP, AJAX dan Bootstrap

Share story

Cara Membuat Background Video dengan CSS seperti websitnya unity

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive