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
Read More

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
Read More

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
Read More

Cara restore data *.bak Pada Microsoft SQL Server


Selamat malam kali ini kita masih mebahas data warehouse jika pada postingan sbelumnya kita telah membahas cara import data maka pada kesempatan kali ini kita akan merestore data dot BAK kedalam SQL Server, jika belum mempunyai file .BAK nya kalian bisa mendownloadnya disini untuk latihan, untuk langkah-langkahnya pertama kita klik kanan pada database kita lalu pilih task kemudian restore -> file and filegroup  


 lalu pilih from device


 lalu pilih add -> kemudian cari file .bak nya kemudian klik ok, 


jangan lupa dicentang lalu pilih ok


jika gagal pada pilihan to database nya ganti dengan database baru langsung ketik nama databasenya nanti akan langsung kebuat beserta data yang direstore, untuk melihat table-table yang delah direstore klik kanan pada table -> refresh. untuk mengetahui isi table klik kanan pada nama table -> select top 1000 rows
semoga tutorial ini bermanfaat selamat mencoba jika ada yang kurang jelas silakan ditanyakan pada komentar dibawah
Read More

Cara Mengimport file CSV ke dalam Microsoft SQL Server


Pada kesempatan kali ini kita akan membahas topik data warehouse di Microsoft SQL Server untuk tutorial kali ini kita akan mengimport file CSV, tutorial ini saya buat agar saya tidak lupa dan juga semoga bermanfaat bagi anda yang belum tahu cara mengimport file CSV kedalam SQL Server, untuk itu kita siapkan dulu file CSV nya, jika belum mempunyai file CSV bisa didownload disini buat latihan, selanjutnya buka SQL Server Manajemen Studio jika ada tampilan seperti berikut 


klik connect. jika tidak mau connect 


jalankan services.msc lalu cari SQL Server (MSSQLSERVER)  lalu klik kanan -> start. lalu coba connec-in lagi sekarang akan kebuka.

sekarang buat database baru atau jika anda sudah memiliki databse silakan lanjutkan ke tahap selanjutnya,


kemudian pada database anda klik kanan -> task -> import data. 


akan muncul SQL Server import / eksport wizard -> klik next


pada Choose data source Pilih Flat File Source, 


kemudia pada file name pilih browse lalu pilih file CSV yang akan diimport 


kemudian klik next, kemudian klik next lagi


pada Choose a Destination pilih Microsoft OLE DB Provider for SQL Server 


kemudian klik next -> next lagi -> next -> finish


jika sudah ada tulisan success silakan di close


untuk mengeceknya silakan refresh dengan cara klik kanan pada table -> pilih refresh akan muncul dbo.Employees . untuk melihat isi table Employees silakan klik kanan pada dbo.Employees lalu pilih select Top 1000 rows.

Ok sekianlah tutorial import data pada sql server jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah, semoga bermanfaat.
Read More
Langganan: Postingan ( Atom )