Category Archives: Web

Kode HTML Dasar

Deskripsi

  1. Header
    Tag yang ditulis setelah pembukaan tag html, biasanya digunakan untuk menambahkan tag meta data dan title dari suatu dokumen html. Juga biasa digunakan untuk mendeklarasikan style dan script pada dokumen tersebut. Bagian ini tidak akan di tampilkan pada content / isi dari halaman web
  2. Title
    Tag Title adalah judul dari sebuah halaman atau website. Elemen ini akan terlihat pada header browser yang bisa mewakili isi dari suatu website untuk bisa menampilkan informasi dari content website.
  3. Meta Description
    Meta description adalah tag HTML yang berisi deskripsi singkat dari suatu website. Pada tag ini, kita bisa menjelaskan secara singkat isi dari website yang kita miliki, sehingga pengunjung dapat mengetahui gambaran dari content website tersebut dan dapat menarik minat mereka untuk berkunjung ke website.
  4. Heading
    Tag Heading merupakan style ukuran text yang tersetruktur yang biasa digunakan untuk text judul dan sub-judul di dalam content website. Spesifikasi Tag Heading mempunyai berbagai tingkatan yang biasa di sebut H1, H2, H3, H4, H5 dan H6 yang masing masing mempunyai fungsi yang berbeda. Judul Besar Sub Judul 1 Sub Judul 2 sampai Sub Judul …
  5. Anchor Text dan Link
    Anchor text adalah sebuah kata atau kalimat pada website yang berisi tautan/link mengarah pada website lain yang dapat diklik. Cara menemukan anchor text juga mudah, biasanya text atau kalimatnya berwarna, font tebal, menggunakan font italic atau memiliki garis bawah. Anchor text ini berguna untuk memberikan tautan pada halaman atau website lain yang masih relevan.
  6. Image Alt Text
    Tag ini merupakan elemen untuk memberikan informasi alternatif pada gambar. Image Alt Text akan membantu pengunjung / mesin pencari untuk memahami maksud suatu gambar.
  7. Tag Paragraf
    Tag paragraf merupakan tag untuk menandai setiap blok teks dalam paragraf
  8. Tag Huruf Tebal (Bold)
    Tag ini berfungsi untuk membuat teks menjadi tebal.
  9. Tag Huruf Miring (Italic)
    Tag ini berfungsi untuk membuat teks menjadi miring.
  10. Tag Huruf Underline
    Tag ini berfungsi untuk membuat teks memiliki garis bawah.
  11. Tag Table
    Tag ini berfungsi untuk membuat tabel, di mana nantinya akan diikuti dengan tag-tag lain yang berfungsi untuk membentuk isi tabel seperti Tag TR untuk membuat row / baris, Tag TD untuk membuat column / kolom.

Contoh Penggunaan

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar HTML #02</title>
    </head>
    <body>
		<h1>Ini adalah Header 1 - Contoh Kode Dasar HTML</h1>
		<h2>Ini adalah Header 2 - Penggunaan Text</h2>
        <p>Ini adalah isi dari paragraf 1</p>
        <p>Ini adalah isi dari paragraf 2. Contoh penggunaan link, klik <a href="www.kucluk.id">di sini</a></p>
        <p>Ini adalah isi dari paragraf 3. Contoh penggunaan huruf tebal / bold -> <b>Huruf Tebal</b></p>
        <p>Ini adalah isi dari paragraf 4. Contoh penggunaan huruf miring / italic -> <i>Huruf Miring</i></p>
        <p>Ini adalah isi dari paragraf 5. Contoh penggunaan huruf underline -> <u>Huruf Underline</u></p>
		<h2>Ini adalah Header 2 - Penggunaan Table</h2>
		<table border="1">
			<thead>
				<td>Judul 1</td><td>Judul 2</td>
			</thead>
			<tr>
				<td>Baris 1 - Kolom 1</td><td>Baris 1 - Kolom 2</td>
			</tr>
			<tr>
				<td>Baris 2 - Kolom 1</td><td>Baris 2 - Kolom 2</td>
			</tr>
		</table>
    </body>
</html>
Contoh Penerapan Tag-Tag Dasar HTML

HTML Pertama

Buka salah satu text editor yang biasa digunakan, bisa menggunakan Notepad, Notepad++ atau text editor apapun yang biasa digunakan.

Hello World

Ketik kode html berikut pada text editor

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>
Text Editor – Notepad++

Kode di atas dapat disimpan dengan menggunakan ekstensi html, simpan dengan nama index.html

Simpan file dengan ekstensi html
Tampilan file yang telah disimpan

Icon file berekstensi html akan bergantung pada browser default yang digunakan. Buka file tadi dengan menggunakan browser yang biasa digunakan. Browser akan menampilkan tulisan Hello World!.

Tampilan html yang telah kita buat

Penjelasan Kode

  1. <!DOCTYPE html> adalah deklarasi pada dokumen HTML5 yang berfungsi untuk memberikan informasi kepada web browser tentang versi dokumen HTML yang bersangkutan. Dalam hal ini, <!DOCTYPE html> menginformasikan bahwa versi dokumen HTML adalah HTML5 (versi terakhir saat ini).
  2. <html> : tag html selalu digunakan untuk membuka dan menutup dokumen html
  3. <header> : tag yang biasanya ditulis setelah pembukaan tag html, biasanya digunakan untuk menambahkan tag meta data dan judul dari suatu dokumen html. Biasanya juga digunakan untuk mendeklarasikan style dan script pada dokumen tersebut. Bagian ini tidak akan di tampilkan pada content / isi dari halaman web
  4. <title> : tag yang digunakan untuk menampilkan judul dari halaman web yang ada pada bagian atas browser
  5. <body> : tag ini digunakan untuk menampilkan isi dari halaman web
  6. <p> : tag paragraf digunakan untuk menandai satu blok paragraf.

Apa itu HTML, Javascript dan CSS?

Website sederhana biasanya tidak terlepas dari 3 komponen, yakni HTML, Javascript dan CSS. Apa itu HTML, Javascript dan CSS?

HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Javascript

JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Nah, apa sebenarnya hubungan antara ketiga nya?
HTML merupakan faktor terpenting dalam membangun sebuah website, di mana html tersebut bisa dikatakan bertindak sebagai kerangka yang membentuk suatu website sehingga dapat menampilkan informasi. CSS bisa dikatakan sebagai kulit yang bisa dihias dengan desain yang dapat mempercantim tampilan website. Sedangkan Javascript bisa dikatakan sebagai otak yang menjadikan website akan menjadi interaktif dengan penggunanya.

Untuk itu, dapat dikatakan bahwa hubungan ketiganya sangat lah erat, yang perlu dikuasai oleh orang yang ingin membangun sebuah website.

[Dokumentasi] Membuat Contoh Model, View dan Controller, serta menghubungkan satu sama lainnya

Berikut contoh sederhana dari Model, Controller dan View pada CI dan cara menghubungkan satu sama lain

  1. Model -> merupakan bisnis proses yang mengatur data, khususnya data dari database
    class M_Pegawai extends CI_Model {
    function __construct() {
    parent::__construct();
    }
    function index() {
    echo “index”;
    }
    function getPegawai() {
    $data = $this->db->query(“Select * From tTable1”);
    return $data;
    }
    }
    /*end of file*/Penjelasan kode :

    • class M_Pegawai extends CI_Model : deklarasi class dengan nama M_Pegawai yang di inherit dari class CI_Model, yakni class Code Igniter yang menangani Model
    • function __construct() -> merupakan konstruktor, yang merupakan fungsi yang akan dijalankan paling awal, akan tetapi boleh di tiadakan
    • function index() -> merupakan fungsi default, jika saat memanggil class tanpa menyebutkan fungsinya
    • function getPegawai() -> merupakan salah satu contoh fungsi lain, fungsi ini digunakan untuk mengambil data dari database
    • $data = $this->db->query(“Select * From tTable1”); -> Assign variabel data dengan melakukan query select data dari database
    • return $data; -> mengembalikan nilai fungsi
  2. Controller
    class C_Pegawai extends CI_Controller {
    function __construct() {
    parent::__construct();
    $this->load->model(‘m_pegawai’);
    }
    function index() {
    $query = $this->m_pegawai->getPegawai();
    $data[‘que’] = $query->result();
    $data[‘numrows’] = $query->num_rows;
    $this->load->view(‘v_pegawai’,$data);
    }
    }
    /*end of file*/
  3. View -> Sebagai Front end ke user
    foreach ($que as $row)
    {
    echo “- “.$row->Table1Nama.””;
    }
    /*end of file*/
    WebRepOverall rating