Pada kesempatan kali ini, kita akan membuat sebuah grafik sederhana menggunakan bootstrap dan ChartJS. Langkah pertama yang akan kita lakukan adalah membuat struktur dasar dari file html dengan menambahkan CDN (Content Delivery Network) dari library css bootstrap dan library chartjs seperti contoh dibawah ini :
Pada baris ke-2, terdapat class=”row” yang merupakan kelas bootstrap untuk membuat sebuah baris. Dimana didalamnya terdapat tag <div> yang memiliki class=”col-md-12″ agar membuat sebuah kolom untuk perangkat medium/ laptop dengan ukuran masksimal (12) berdasarkan aturan grid system bootstrap. Selanjutnya pada baris ke-5 terdapat tag <canvas> yang memiliki atribut id=”myChart” sebagai penanda khusus, agar tag yang bersangkutan dapat dimanipulasi oleh perintah javascript yang akan kita tambahkan sebagai berikut :
Letakkan perintah diatas didalam tag <footer></footer>. Pada script diatas terdapat variable ctx dimana nilainya diambil dari tag <canvas> melalui fungsi getElementById() dan ditambahkan fungsi getContext(“2d”) agar dapat membuat sebuah grafik didalam tag tersebut. Selanjutnya kita membuat object myChart dari class Chart yang telah disediakan oleh library chartjs. Parameter pertama dari class Chart diisi dengan variable ctx dan paramter kedua digunakan untuk memanipulasi tampilan dari grafiknya, baik dari segi warna, bentuk grafik dan juga isi datanya yang bisa kita padukan dengan database. Adapun parameter kedua ditulis dalam pemformatan JSON. Hasilnya akan terlihat seperti Ini :
Pada kesempatan kali ini kita akan membuat gallery Image dengan HTML dan CSS. Langkah Pertama, buat file dengan nama “sampleimage.html” kemudian tambahkan perintah sebagai berikut :
<html>
<head>
<style>
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="d.jpg">
<img src="d.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="b.jpg">
<img src="b.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="c.jpg">
<img src="c.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="d.jpg">
<img src="d.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Hasilnya akan terlihat seperti ini :
Gambar akan ditampilkan secara vertikal. Hal ini disebabkan karena kita menambahkan tag <div></div>. Dimana tag <div> defaultnya memiliki sifat display block. Artinya tag yang bersifat block akan dicetak didalam baris baru. Oleh karena itu, kita menambahkan atribut class = “galery” yang nantinya akan kita gunakan sebagai selector di CSS agar dapat dimanipulasi tampilannya. Dalam hal ini, kita akan membuat agar gambar yang ditampilkan dapat sejajar dalam satu baru. Tambahkan perintah CSS ini kedalam tag <style></style> yang ada pada file “sampleimage.html” diatas. Adapun perintah CSSnya adalah sebagai Berikut:
Dari perintah diatas, terlihat bahwa agar dapat memaksa gambar di dalam tag <div></div> dapat sejajar dalam satu baris adalah menambahkan properti css, yaitu properti float : left. Dengan menambahkan properti ini, maka tag html yang displaynya bersifat block dapat dipaksa agar dapat bersebelahan dengan tag lainnya. Biasanya properti ini digunakan saat menampilkan tulisan yang sejajar dengan gambar disebelahnya. Hasil akhirnya akan terlihat seperti ini :
Pada kesempatan ini, kita akan membuat form sederhana dengan HTML5 dan CSS3. Langkah pertama adalah membuat struktur dasar dari dokumen HTML5. Seperti perintah dibawah ini :
Kemudian tambahkan perintah berikut didalam tag <body> </body>
<h3>Latihan Membuat Form dengan HTML Dan CSS</h3>
<div>
<form action="send.php">
<label for="fname">Nama Depan</label>
<input type="text" id="fname" name="firstname" placeholder="Nama Anda..">
<label for="lname">Nama Belakang</label>
<input type="text" id="lname" name="lastname" placeholder="Nama Belakang Anda..">
<label for="country">Provinsi</label>
<select id="country" name="country">
<option value="jabar">Jawa Barat</option>
<option value="jatim">Jawa Timur</option>
<option value="jateng">Jawa Tengah</option>
</select>
<input type="submit" value="Kirim">
</form>
</div>
Perhatikan pada baris keempat, terdapat sebuah tag bernama form, dimana tag tersebut memiliki atribut action dengan value “send.php”. Atribut action digunakan untuk mengirimkan data form ketika form disubmit atau mengirimkan data dari form inputan saat tombol kirim diklik menuju script dengan nama “send.php”. Adapun bahasa pemprgoraman untuk mengolahnya dapat beragam seperti bahasa komputer PHP, ASP, JAVA dan lain lain. Selanjutnya perhatikan pada bagian ini :
Tag <label></label> digunakan untuk memberikan keterangan berupa teks pada setiap form input dengan memberikan atribut for. Adapun tag <input> digunakan untuk membuat kolom isian yang akan diisi oleh user. Pada tag <input> terdapat atribut type yang berfungsi sebagai penentu jenis inputan user, misal berupa teks, password, email dan seterusnya. Kemudian atribut yang tidak kalah penting adalah atribut name yang berfungsi sebagai penanda khusus form inputan yang nantinya agar dikenali sebagai variable tertentu oleh bahasa pemprograman web server. Untuk menampilkan menu dropdown kita dapat menggunakan tag-tag berikut ini :
Selanjutnya yang tidak kalah penting adalah perintah berikut ini :
<input type="submit" value="Kirim">
Pada bagian inilah form inputan yang telah kita buat akan dikirm menuju perintah “send.php” karena atribut type bernilai “submit”. Saat kita jalankan keseluruhan perintah diatas, hasilnya akan terlihat seperti ini :
Agar tampilan form diatas terlihat lebih baik. tambahkan perintah CSS diantara tag <style></style>, seperti yang terlihat pada script dibawah ini :
Pada tutorial kali ini, kita akan belajar cara menggunakan HTML canvas. HTML canvas adalah salah satu fitur element baru yang terdapat pada versi HTML5.
Apakah Kegunaan dari Canvas ?
Canvas digunakan sebagai element HTML yang bisa digambar dengan perintah bahasa komputer javascript.
Membuat Canvas
untuk menggunakan Canvas, cukup dengan menambahkan tag <canvas> </canvas> . Sekarang kita buat sebuah struktur dasar dari halaman html dengan nama file belajarcanvas.html kemudian tambahkan tag canvas dengan tambahan atribut id, width, height pada tag canvas. Seperti contoh yang tertera dibawah ini :
Untuk dapat membuat sebuah garis. Pertama atribut id diatas akan digunakan untuk mendapatkan element html canvas. Dimana nantinya kita manipulasi element canvas tersbut dengan menyimpannya kedalam variable dengan nama “canvas” . Setelah mendapatkan element html dengan nama canvas, selanjutnya kita dapat menyimpan variabel baru dengan nama “ctx” dimana variabel ini diperoleh dari fungsi variable canvas.getContext(“2d”). Selanjutnya kita manipulasi variable “ctx” dengan menggunakan beberapa fungsi yang telah disediakan oleh javascript untuk membuat garis persegi. Adapun fungsi tersebut adalah .strokeRect() dan .fillRect(). Fungsi .strokeRect() dugunakan untuk membuat persegi dengan garis polos saja sedangkan .fillRect() digunakan untuk membuat persegi dengan warna.
Perintah diatas hasilnya akan terlihat seperti dibawah ini :
Pada kedua fungsi diatas terdapat empat parameter yang berisi variabel (x, y, w, h), dimana variabel pertama adalah mengatur posisi sumbu x, selanjutnya mengatur posisi sumbu y, lebar dan tinggi dari garis yang akan dibuat.
Pada tutorial kali ini, kita akan sebuah menu navigasi breadcrumb menggunakan CSS3. Hasil akhir dari menu navigasi tersebut adalah seperti gambar di bawah ini:
CSS is an acronym for Cascading Style Sheets, it is used to format web page look. The latest version of CSS is CSS3. This new version of CSS gives web developers more flexibility when styling the webpage. It comes with a set of new rules that make CSS3 better than the old version. CSS3 provides way to create an animation. In this tutorial, we’ll build simple image slider using pure CSS3.
CSS Overview
Before we start into deep explanation to create the slider, I’ll give some overview of CSS feature that is used to create the slider.
Transform Property
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
:target Selector
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.
:before and :after Selector
The :before selector inserts content before the selected element(s). The :after selector inserts content after the selected element(s).
~ (Tilde Selector)
Tilde selector also called general sibling combination. The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that that the element being selected doesn’t need immediately succeed the first element, but can appear anywhere after it.
Vendor Specific Property
In order to make our slider runs cross browser, we must add vendor specific property by adding the following prefix into several CSS properties:
-moz-: Mozila Firefox
-webkit-: Safari, Chrome (and other WebKit-based browsers)
-ms-: Microsoft
-o-: Opera
Prepare the Stage
The stage of the slider is a div HTML tag where the slider takes place. We’ll create the stage which have 640px x 320px dimensions. The following HTML tags define the slider stage. We give id [cci]slider[/cci] to the stage.
After the stage has been created, now it’s time to give a style to the stage. At this step, we give dimension, margin, background and shadow to the stage.
We’ll add a drop shadow effect to the stage at the bottom left and bottom right. The drop shadow that we used is simply a blank div element with the following style.
Control buttons is a set of buttons to control the slider. The button is used as a transition trigger for the slider. If user click a button, the slider will change the image on the stage.
Images is the heart of our slider. You can download the images we used in this tutorial by downloading source code. The donwload button is located on the top.
Make The Control Buttons Selected When The Button Clicked
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}
#two:target ~ ul li a[href="#one"],
#three:target ~ ul li a[href="#one"],
#four:target ~ ul li a[href="#one"],
#one:target ~ ul li a[href="#one"] {
background: #aaa;
}
