Dimensi TutupBotol: HTML

Showing posts with label HTML. Show all posts

Wednesday, August 29, 2018

Membuat Video Sebagai Background Web

Pertama-tama kita buat foldernya terus ditaroin file html sama video yang ingin kita pake sebagai background kyk gambar dibawah :

Terus didalem mainfile.html kita tambain kode buat videobackgroundnya dl kek gini :

Klu udah nambain kyk kode diatas, trs kita buka mainfile.html, hasilnya seperti ini :

Jadi videonya udah running dibackground... yeeaaah..... Berikutnya kita tambain sesuatu diatas videonya kyk gini ajjah yg simpel...

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause">Pause</button></div>
        </div>
    </body>
</html>

Hasilnya :

Terus berikutnya kita nambain handler buat button yg paling bawah buat ngepause dan ngeplay kembali videonya... So tambahkan script kyk gini :

        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>

Naaah... dengan script itu kita bisa ngplay dan/atau ngepause videonya.... :D

Siipss... sekians dan terima kasih... semoga bermanfaaat... :-)

Source code lengkapnya :

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause()">Pause</button></div>
        </div>
        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>
    </body>
</html>

Friday, January 26, 2018

Webpack untuk Pemula

Di postingan sebelumnya kita udah maen javascript tanpa make webpack. Naah dipostingan ini kita bakalan naroin webpack. Jadi klu yg belum liad2 postingan sebelumnya... Silahkan lihat disini...

Github untuk postingan ini bisa dilihat disini....
Ok... pertama-tama sebelum install webpack, kita harus install nodejs dl... di sini Hisoka pake node js versi 6.11.1

Nah... setelah install nodejs, berikutnya kita inisialisasi projectnya dl... jalanin 'npm init' terus ikuti langkah2 yg terlihat diconsole...

Naah...tinggal ketik YES... dan enter... trs kita dapat file package.json yg isinya kek gini :

Terus berikutnya baru kita install webpacknya. Tinggal running command ini :
npm i webpack --save-dev

--save-dev itu nunjukin klu webpack syarat dipake buat development....

Nah stelah slese diinstall kita bisa liad perubahannya dengan penambahan folder node_modules sama di package.jsonnya...

Berikutnya kita kasih tau webpacknya buat ngebuild file app.js. So tambain gini di package.json :

Siipss... jadi webpacknya bakalan nyari file app.js ters hasil kompilasinya ditaro di folder dist/bundle.js... Ok next kita ubah kode javascript di app.js soalnya dia bakalan diload sm webpacknya pertama kali... so beralih ke app.js dan ubah jadi kek gini :

Siipss... cuma nambain import bla bla dari file poipo-dom-loader.js.. .Ters kita ubah juga poipo-dom loadernya kek gini biar bisa di import :

Siiipss... daaah deeeeh.... tinggal running webpacknya pake command :
npm run poipo_build
Hasilnya :

Setelah berhasil di build kita liad ada folder baru 'dist' yg isinya bundle.js.... naah bundle.js ini kita load ke file.htmlnya kek gini :

Daaan... Hasilnya...

Siipss... daaah....

Btw... 1 tambahan... buat ngekompile webpack, kita bisa pake minified version. Minified version itu biasanya buat production. Jadi bundle.js-nya lebih kecil file sizenya... Nah cara buat bikin kayak gitu kita tambain kode berikut di package.json...

So tinggal ditambain flag '-p' ajjah.. itu maksnya build buat production... Trs klu kita pengen build tinggal pake "npm run poipo_build_prod"... bundle.js-nya dikomparasi klu pake -p dan g' pake -p...

Naah.. tuh.. file sizenya cm skitar 1kB,,,beda klu g' pake -p yg sizenya sekitar 4kB... dan berikut komparasi isi bundle.js-nya...
Klu g' pake -p :

Klu pake -p :

Siiipsss... sekian dl untuk part ini... sampai jumpa di part berikutnya... :)

Wednesday, January 24, 2018

Iseng Javascript haha... :D Part II

Di part 1 sebelumnya udah pake javascript... Nah sekarang pengen iseng2 buat css. Tinggal nambain kode ini di index.html :

Terus kode main.css nya kek gini :

body {
  font-family: Helvetice, Arial, sans-serif;
  text-align:center
}

h1 {
  font-size: 28px;
  margin: 20px;
}

p {
  border: 1px solid blue;
  padding: 20px;
  margin: 30px auto;
  width: 50%;
  font-size: 20px;
}

Hasil :

Tuesday, October 3, 2017

HTTP Response Code

100 = Continue
101 = Switching Protocols
102 = Processing (WebDAV)

200 = OK
201 = Created
202 = Accepted
203 = Non-Authoritative Information
204 = No Content
205 = Reset Content
206 = Partial Content
207 = Multi-Status (WebDAV)
208 = Already Reported (WebDAV)
226 = IM Used

300 = Multiple Choices
301 = Moved Permanently
302 = Found
303 = See Other
304 = Not Modified
305 = Use Proxy
306 = (Unused)
307 = Temporary Redirect
308 = Permanent Redirect (experimental)

400 = Bad Request
401 = Unauthorized
402 = Payment Required
403 = Forbidden
404 = Not Found
405 = Method Not Allowed
406 = Not Acceptable
407 = Proxy Authentication Required
408 = Request Timeout
409 = Conflict
410 = Gone
411 = Length Required
412 = Precondition Failed
413 = Request Entity Too Large
414 = Request-URI Too Long
415 = Unsupported Media Type
416 = Requested Range Not Satisfiable
417 = Expectation Failed
418 = I'm a teapot (RFC 2324)
420 = Enhance Your Calm (Twitter)
422 = Unprocessable Entity (WebDAV)
423 = Locked (WebDAV)
424 = Failed Dependency (WebDAV)
425 = Reserved for WebDAV
426 = Upgrade Required
428 = Precondition Required
429 = Too Many Requests
431 = Request Header Fields Too Large
444 = No Response (Nginx)
449 = Retry With (Microsoft)
450 = Blocked by Windows Parental Controls (Microsoft)
451 = Unavailable For Legal Reasons
499 = Client Closed Request (Nginx)

500 = Internal Server Error
501 = Not Implemented
502 = Bad Gateway
503 = Service Unavailable
504 = Gateway Timeout
505 = HTTP Version Not Supported
506 = Variant Also Negotiates (Experimental)
507 = Insufficient Storage (WebDAV)
508 = Loop Detected (WebDAV)
509 = Bandwidth Limit Exceeded (Apache)
510 = Not Extended
511 = Network Authentication Required
598 = Network read timeout error
599 = Network connect timeout error

Reference :

http://www.restapitutorial.com/httpstatuscodes.html#

Monday, August 1, 2016

Membuat CRUD Sederhana di Laravel 5.2 - Part II

Sebelumnya kita telah membuat database dan konfigurasinya di part 1. Nah... disini akan dilanjutkan dibagian viewnya dl, terus baru ke kontroller...Soo...pertama-tama kita buat controllernya, so beralih ke cmd, terus ketik

php artisan make:controller akatsukiController

Hasilnya :

Terus bikin modelnya : {modelnya harus sama dengan nama tabel di databasenya} {klu modelnya beda tar didalam modelnya ditaroin protected $table=''nama_tabels" nama tabel harus jamak jadi ada "S" dibelakangnya}

Naah... disini nama modelnya sama dengan nama tabel yang dibuat dipart 1 sebelumnya, so model sama database itu otomatis konek di laravel, jadi kita g' usah repot ketik mysql commandnya...ehehe.. :D

Terus kita buat route barunya di file route.php :

Route::resource('isitabel','akatsukiController');

Terus dibagian akatsukiController kita tambain 1 biji fungsi {ini buat ngetest ajjah... :)}

public function index()
    {
     $isiTable = akatsuki_tables::all();
     return $isiTable;
    }

Intinya fungsi index() itu cuma nampilin semua isi tabelnya, untuk selengkapnya bisa dilihat di dokumentasi mengenai controller restful resource di page ini...Next... klu kita run... Hasilnya :

Naah... kliatan isi semua database yg kita buat sebelumnya...yeeei.....Sampai sini berarti kita udah bisa konek kedatabase lewat model terus controllernya.... :)

Berikutnya kita pengen di controller ini returnya pake view... So mari kita buat bebeerapa view-nya, {ini viewnya pake blade.php, tapi masih basic, jadi moga2 bisa keep up with me.. :), tapi intinya klu udah tau php, blade bisa jadi cepet, soalnya didalam blade bisa pake php juga.. :)}
Pertama-tama kita buat folder masterview terus didalamnya ditaroin 2 biji file "masterpage.blade.php" dan "menupage.blade.php" {ini ngasal ajjah sebenernya wkwkwk... :v}, file2nya kyk gini :

Di dalam master page, kita ada @yield, nanti yield ini bakalan diganti pas dia dipanggil, terus ada @include, maksdunya ngambil semua isi file yg diinclude, dalam hal ini menu....
Terus kita buat index.blade.php didalam folder akatsuki view kyk gini :

Di situ ada @extends, mksdnya dia ngereference ke masterpage yagn ada di folder masterview, terus ada section('title') itu ngeganttin yang yield di masterpage, teruuus... didalam foreach ada $alldata, nah ini itu data yang kita kirim dari controllernya, jadi dicontrollernya kyk gini :

Naah... itu 'alldata'-nya sebagai key, terus isinya adalah $isiTable.... Sooo klu kita run. hasilnya....

Naaah... No-nya salah yaaak... wkwkwk... gpp.. tapi intinya kita udah bisa nampilin datanya agak lebih cantik... :)

Siip... part II sampe sini dulu... *ngantuk eeeuy... :v

Membuat CRUD Sederhana di Laravel 5.2 - Part I

Okieee... disini kita akan membuat contoh CRUD sederhana menggunakan laravel yang run pake XAMPP. Sooo... pertama-tama mari kita buat databasenya dl...Buka phpmyadmin di XAMPP

Terus silahkan buat database baru..

Terus dipanel sebelah kiri, klik database yang barusan dibuat, terus create new table... {Nama tabel harus jamak di laravel, jadi harusnya akatsuki_tableS, ada s-nya dibelakang yaaak... :)}

Setelah pencet tombol "Save" jadinya seperti ini...

Setelah itu, pencet menu "Insert" seperti terlihat pada gambar di atas buat masukin nilai baru... *yaah..nilai baru ini cuma buat test test.. :D

Naah... hasilnya seperti terlihat di bawah... jadi kita udah punya 2 biji data...

Okiee... setelah itu kita setting laravelnya buat terhubung ke database ini, caranya buka file .env di laravelnya terus masukin data-data berikut :

Siiip...cukup sekian untuk part I ini... di part berikutnya kita akan membuat routing, controller, dan viewnya... :)

beralih ke part II..

Sunday, July 31, 2016

Instalasi Package Forms & HTML di Laravel 5.2

Okiee... disini kita akan melakukan instalasi package form dan html di laravel. Untuk dokumentasi resmi laravel mengenai Form & HTML ini bisa dilihat di sini.. Daan.. dihalaman dokumentasi tersebut juga udah ada step2 buat instalasi packagenya di laravel pake composer.
So pertama-tama kita tambain require "laravelcollective/html": "5.2.*" dpackage.json seperti terlihat di bawah :

Terus composernya kita update...dan tunggu beberapa saat sampe prosesnya selese...

Setelah itu kita tambain provider baru, so beralih ke folder config/app.php, terus tambain yg ini :

 Collective\Html\HtmlServiceProvider::class,

Terus dfile yg sama, tambain juga aliases baru :

 'Form' => Collective\Html\FormFacade::class,
 'Html' => Collective\Html\HtmlFacade::class,

Naaah...selese deeeh.... :)... Kita coba dikit...mmm... masuk ke folder resources--view, terus buka welcome.blade.php :
Terus...tambain ginian...

{!! Form::text('price') !!}

Hasilnya :

Siiip... berarti instalasi packagenya udah berhasil... :D Silahkan dicoba2 hal-hal lain .... :D...

{!! Form::text('price') !!} <br/>
        {!! Form::text('test', 'value',[
            'class' => 'hisoka-control',
            'placeholder' => 'Petunjuk'
        ])!!}

{!!Form::number('myNumber',10,
        [ 'max' => 17,
           'min' => -7
        ])!!}

Sipp... cukup sekian... :)