Selasa, 16 Agustus 2016

Praktek 5 Menampilkan Data dari Database ke Halaman Web Menggunakan PHP MySQL

PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. Pada awalnya PHP adalah sinngkatan dari "Personal Home Page Tools". Selanjutnya diganti menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta site menggunakan PHP, di antaranya adalah NASA, Mitsubishi, dan RedHat.
Berikut langkah-langkah menampilkan data dari database ke halaman web menggunakan PHP MySQL.

Pertama download dahulu aplikasi xampp:
xampp-win32-5.5.35-0-VC11-installer

Atau ke situs resminya Xampp untuk  mendownload aplikasi Xampp jika tidak kompatibel dengan PC anda.


Setelah didownload dan diinstal buka xampp lalu klik tombol Start pada Apache dan MySQL. Jika sudah di-start tampilannya akan seperti di bawah ini. Lalu minimize aplikasi xampp.
Buka browser, lalu ketikkan localhost/phpmyadmin pada address bar. Tekan Enter.
Klik Databases. Lalu pada Create database isi nama database yang ingin kita buat tapi jangan dispasi agar tidak terjadi kesalahan pemanggilan nama database pada saat membuat script php (di sini saya menggunakan tanda underscore _ ). Lalu klik Create.
Pada Create table di bagian Name isikan nama tabel di sini saya membuat tabel mahasiswa, dan pada Number of Columns saya isikan dua (2). Klik Go.
Tampilannya seperti contoh di bawah. Jika sudah klik Save.

Klik Database: database_ti untuk membuat tabel baru.
Buat tabel dosen.
Buat seperti di bawah ini. Klik Save.
Kembali lagi ke database_ti dan buat tabel matkul.
Buat seperti tampilan di bawah. Jika sudah klik Save.
Sekarang kita akan memasukkan data-data ke field pada masing-masing tabel yang telah kita buat tadi. Klik pada tabel mahasiswa yang ada pada kiri layar. Lalu klik Insert.
Contohnya pada npm di bagian value isikan 201355056. Dan pada nama isikan Ramadiansyah. Jika sudah klik Go.
Lalu kita akan membuat script php yang akan menampilkan data yang kita buat di tabel mahasiswa tadi di browser. Pertama buka folder tempat di mana xampp diinstal di sini saya install-nya default. Buka My Computer, buka Local Disk (C:) lalu buka folder xampp, buka htdocs. Kemudian buat folder baru.
Sesuaikan nama foldernya dengan database-nya. Di sini nama database saya adalah database_ti.

Buka aplikasi Sublime Text. Lalu ketikkan script seperti di bawah ini.

<?php

$hostname = "localhost";
$username = "root";
$password = "";
$db    ="data_ti";

$koneksi = mysql_connect($hostname, $username, $password) or die (mysql_error());

mysql_select_db($db, $koneksi) or die(mysql_error());

$tabel_dosen = mysql_query("SELECT * FROM tabel_dosen", $koneksi) or die(mysql_error());


 ?>

 <html>
 <head>
  <title>Database TI</title>
 </head>
 <body>
  <h2>Data TI</h2>
  <?php
  while ($row=mysql_fetch_array($tabel_dosen)) {
   echo 'NIDN: '.$row['nidn'].'<br>';
   echo 'Nama Dosen : '.$row['nama'].'<br>';
   echo 'Alamat : '.$row['alamat'].'<br>';
   echo '<hr>';
  }
  ?>
 </body>
 </html>

Screenshotnya seperti di bawah ini.
Lalu klik File, lalu klik Save As untuk menyimpan file.
Simpan di folder database yang telah kita buat tadi di folder xampp>htdocs>database_ti. Namanya samakan dengan databasenya. Gunakan ekstensi .php. Klik Save untuk menyimpan.


Buka browser lalu ketikkan localhost/database_ti pada address bar. Lalu tekan ENTER.
Akan muncul tampilannya seperti di bawah ini. Lalu klik database_ti.php

Praktek 4 Menggunakan style CSS pada HTML

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke  CSS3.

CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode CSS.

Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :
Body {background-color: white;}

‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.

Berikut langkah-langkah membuat CSS pada HTML, pertama ketikkan tag seperti di bawah ini:

<html>
        <title>Buat Website</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <body>
        <header>
            <h1>Buat Website</h1>
        </header>
        <menu>
            <a href="index.html">Home</a>
            <a href="profil.html">Profil</a>
            <a href="#">Produk</a>
            <a href="#">Kontak</a>
        </menu>
        <article>
            <h1>Judul Artikel</h1>
            <img src="images/2.jpg">
            <p>Pengertian internet (interconnection
            networking) sendiri adalah jaringan komunikasi
            global yang terbuka dan menghubungkan jutaan
            bahkan milyaran jaringan komputer dengan
            berbagai tipe dan jenis, dengan menggunakan
            tipe komunikasi seperti telepon, satelit dan
            lain sebagainya.</p>
            <p>Pengertian internet (interconnection
            networking) sendiri adalah jaringan komunikasi
            global yang terbuka dan menghubungkan jutaan
            bahkan milyaran jaringan komputer dengan
            berbagai tipe dan jenis, dengan menggunakan
            tipe komunikasi seperti telepon, satelit dan
            lain sebagainya.</p>
        </article>
        <footer>
            <p>Copyright &copy; 2016</p>
        </footer>
    </body>
</html>

Screenshotnya seperti di bawah ini:

Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Di sini saya memberi nama index.html. Setelah itu klik Save untuk menyimpan.
Lalu buat folder baru di tempat kita menyimpan file html tadi. Caranya klik kanan, lalu klik New, lalu klik Folder.
Beri nama images pada folder baru tersebut.

Lalu masukkan gambar sesuai dengan yang anda kehendaki pada folder images dengan syarat namanya harus sama dengan yang telah anda ketik pada file html tadi. Di sini gambar yang saya gunakan formatnya memiliki ukuran lebar dan tingginya 200pixels x 138pixels.
Lalu buat file baru, dengan cara klik menu File kemudian klik New File.
Ketikkan seperti di bawah ini.

*{padding: 0; margin: 0;}
body{background: #27ae60}
header{background: #3498db; width: 800px; margin: auto; padding: 25px; color: yellow;}
menu{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
menu a{color: white; text-decoration: none; margin: 0 20px 0 0;} 
menu a:hover{text-decoration: underline}
article{background: #95a5a6; width: 800px; margin: auto; padding: 25px;}
article img{float: left; margin: 10px 10px 10px 0;}
article p{line-height: 20px; margin: 0 0 10px 0;}
footer{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
footer p{color: white;}

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di folder yang sama dengan file html tadi. Di sini saya menyimpan dengan nama style.css. Setelah itu klik Save untuk menyimpan.
Disimpan dengan nama style.css karena mengikuti apa yang kita ketik pada file html tadi.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi. Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak tampilan web di bawah ini terlihat lebih rapi dan nyaman dilihat. 

Praktek 3.7 Membuat Frame

Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen
Membuat suatu dokumen tanya jawab, dll.
Ketikkan tag seperti di bawah ini.

<html>
<frameset rows=100,*>
<noframes>
 Maaf hanya bisa tampil pada browser yang mendukung frame
</noframes>
<frame src="Praktek 3.1.html">
<frame src="Praktek 3.2.html">
</frameset>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul 2 frame html berbeda pada tampilan di bawah ini. Frame atas diambil dari Praktek 3.1.html dan frame yang di bawah diambil dari Praktek 3.2.html. Dua frame berbeda ini diambil dari file ber-ekstensi html berbeda nama yang berada 1 folder dengan file 3.7.html.

Praktek 3.6 Membuat Text Area

Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS.
Contoh:
<textarea rows="5" cols="20">
  Text yang diisi dapat mencapai banyak baris
</textarea>

Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.
Ketikkan tag seperti di bawah ini.

<html>
<body>
<h1>Contoh TextArea</h1>

Alamat Lengkap : <br>
<textarea name="textarea" id="textarea" cols="45"
rows="5"></textarea>

</body>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul text area dan dapat menginput text atau karakter ke dalam text area tersebut.

Praktek 3.5 Membuat Select Option

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari
nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.
Contoh:
<select>
    <option>Pilihan 1</option>
    <option>Pilihan 2</option>
    <option value="pilihan ketiga">Pilihan 3</option>
</select>
Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form.
Ketikkan tag seperti di bawah ini.
 <html>
<body>
<h1>Contoh Select dan Option</h1>

Agama : <select size="1" name="agama">
    <option>Pilih Agama</option>
    <option>Islam</option>
    <option>Buddha</option>
    <option>Hindu</option>
    <option>Kristen</option>
    </select>

</body>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul drop down menu.

Praktek 3.4 Membuat Radio Button

<input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
Ketikkan tag seperti di bawah ini.

<html>
<body>
<h1>Contoh Radio Button</h1>

Jenis Kelamin : <input type="radio" name="jk" value="baca"> Laki-Laki
         <input type="radio" name="jk" value="tulis"> Perempuan

</body>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul 2 radio button.

Praktek 3.3 Membuat Check Box

<input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
Ketikkan tag seperti di bawah ini.

<html>
<body>
<h1>Contoh Checkbox</h1>

Hoby : <input type="checkbox" name="Baca" value="ON"> Membaca
    <input type="checkbox" name="Tulis" value="ON"> Menulis
    <input type="checkbox" name="Makan" value="ON"> Makan
 
</body>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul tiga check box.


Praktek 3.2 Membuat Input Text

<input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text.
Ketikkan tag seperti di bawah ini.

<html>
<body bgcolor=orange>
<center>
<h1>
<font color=white face="Arial">FORM DATA MAHASISWA<br>
UNIVERSITAS UNMUS</font>
</h1>
</center>
<pre>
Nama Anda : <INPUT TYPE=TEXT NAME="Nama"Size=20>
Alamat  : <INPUT TYPE=TEXT NAME="Alamat"Size=30>
</pre>
</body>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul form untuk menginput Nama Anda dan Alamat.

Praktek 3.1 Penggunaan Metode GET

Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get (di mana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Ketikkan tag seperti di bawah ini.

<html>
<head>
<title>Penggunaan Metode GET</title>
<body>
<center>
<form action="http://www.google.com" method="GET">
<table bgcolor=pink border=0 cellpadding=2 cellspacing=0>
<tr>
<td align=middle colSpan=2><B>Contoh Form</B></td>
</tr>
<tr>
<td>
<Input name=AlamatPalsu value="Masukkan e-mail anda">
<Input name="Klik di sini" type=submit value="Klik di sana">
</td>
</tr>
</center>
</body>
</head>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak ada form untuk menginput informasi.

Praktek 2.10 Element TD

ag <td> </td> ini digunakan untuk membuat kolom baru pada tabel.
Contoh tagnya seperti di bawah ini:

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 >
<tr>
<th>
Ini adalah contoh header tabel
</th>
</tr>
<tr>
<td>
Sel 1,1
</td>
<td>
Sel 1,2
</td>
</tr>
<tr>
<td>
Sel 2,1
</td>
<td>
Selb2,2
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini:
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul kolom dan baris baru.

Praktek 2.9 Element Tabel Heading

Fungsi elemen <th> adalah membuat judul tabel otomatis bold.
Contoh tagnya seperti di bawah ini:

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5 cellpadding=5 width=60% align=center bordercolor=#ff0000 bordercolorlight=#ff0000 bordercolordark=#000000>
<tr>
<th>
Ini adalah contoh header tabel
</th>
</tr>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini:
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak judul tabel otomatis menjadi bold (hitam tebal).

Praktek 2.8 Element Tabel Raw

Table Row <tr>, mendefiniskan baris pada tabel.
Contoh tagnya seperti di bawah ini:

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5 cellpadding=5 width=60% align=center bordercolor=#ff0000 bordercolorlight=#ff0000 bordercolordark=#000000>
<tr>
<td>
Ini adalah contoh header tabel
</td>
</tr>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>
Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Akan muncul baris baru.


Praktek 2.7 Membuat Warna Background pada Tabel

HTML telah menyediakan atribut untuk mengatur dan memberi warna pada tabel, yaitu dengan menggunkan atribut bgcolor.  Atribut bgcolor dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col).

Apabila atribut bgcolor dipasang pada tag <table>, maka atribut ini berfungsi untuk memberikan warna keseluruhan tabel tersebut. Jika atribut ini dipasang pada tag <th> atau <td> maka akan berfungsi untuk memberi warna pada kolom.
Berikut ini contoh tag penggunaan bgcolor pada tabel:

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5 cellpadding=5 width=60% align=center bgcolor=#ff0000>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini.
Setelah selesai diketik simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak background tabelnya berwarna merah.

Praktek 2.6 Membuat Atribut Align pada Tabel

Attribut Align di HTML selalu berhubungan dengan posisi. Seperti tabel, tulisan, gambar dan sebagainya tinggal di mana attribut align itu ditempatkan. Bila atribut align ini ditempatkan di <table>, maka berfungsi untuk mengatur posisi atau letak tabel. Bila anda meletakkan attribut align ini di <p> maka berfungsi untuk mengatur posisi paragraf anda, dan sebagainya.

Di bawah ini adalah contoh tag penggunaan atribut align.

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5 cellpadding=5 width=60% align=center>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tabelnya akan ada di tengah.

Praktek 2.5 Membuat Atribut Width pada Tabel

Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col). Jika diletakkan pada tag tabel, atribut ini berfungsi untuk mengatur lebar tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan berfungsi untuk mengatur lebar kolom.

Untuk “memaksa” web browser menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width pada tag table, seperti contoh berikut:


<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5 width=100%>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini:
Setelah itu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini.

Praktek 2.4 Membuat Atribut Cellpadding pada Tabel

Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.

Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellpadding="5″, maka web browser akan membuat jarak sebesar 5 pixel dari border sisi dalam tabel dengan isi text tabel.

Di bawah ini adalah contoh tag penggunaan atribut cellpading.

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5 cellpadding=5>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini.

Praktek 2.3 Membuat Atribut Cellspacing pada Tabel

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.

Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellspacing="5″, maka web browser akan menampilkan jarak sebesar 5 pixel di antara garis border tabel.



Contoh tag penggunaan atribut Cellspacing:

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini.
Setelah diketik lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Dan nama filenya sesuai dengan keinginan anda tapi ekstensinya harus .html. Lalu klik Save untuk menyimpan.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.
Akan muncul aplikasi browser dan tampilannya seperti di bawah ini.

Praktek 2.2 Membuat Tabel

Tabel adalah cara yang baik untuk menampilkan informasi secara teratur. Tabel digunakan untuk menampilkan record-record pada database.

<table> </table>
Di bawah ini contoh tag membuat tabel.

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini.
Setelah diketik lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.
Setelah disimpan, double klik untuk membuka file yang telah anda simpan tadi.
Lalu aplikasi browser akan terbuka dan menampilkan hasilnya seperti di bawah ini.