Hiken NO Faisal adriansyah D Luffy: pemrograman web1

PEMROGRAMAN WEB

MENGGUNAKAN PHP, MySQL dan CSS

KD 1 : Pengenalan dasar web dengan memanfaatkan CSS

Untuk membuat suatu website ada beberapa hal yang dibutuhkan, diantaranya : sebagai editor dibutuhkan program Dreamweaver MX selain itu bisa juga menggunakan notepad, untuk membuat database dibutuhkan MySQL dan untuk menjalankan program web yang kita buat dibutuhkan Apache. Untuk MySQL dan Apache biasanya sudah menjadi satu paket program, seperti XAMPP, WAMP, AppServ, dll, sehingga untuk melakukan penginstallan hanya dibutuhkan satu kali saja.

I. PENGERTIAN

1. Dreamweaver MX

Dreamweaver MX adalah sebuah editor HTML profesional untuk perancangan (designing), pengkodean (coding) dan pengembangan situs web, halaman web serta aplikasi web (sumber : Janner Simarmata dalam bukunya “Aplikasi Mobile Commerce Menggunakan PHP dan MySQL”). Dreamweaver bekerja pada lingkungan visual editing dan menyediakan tool-tool yang sangat membantu dalam pembuatan web. Berikut ini adalah tampilan dari Dreamweaver MX.

Tampilan Coding

Menu Panel

Menu Properties

Tampilan design

Tampilan Dreamweaver MX

2. Database MySQL

MySQL adalah sebuah program pembuat database yang bersifat open source. Dan pada penerapannya MySQL tidak dapat berjalan sendiri tanpa adanya aplikasi lain (interface).

2.1. Fungsi-fungsi dalam MySQL

Fungsi-fungsi yang banyak digunakan dalam MySQL adalah sebagai berikut :

· mysql_connect ()

Merupakan fungsi untuk membuka koneksi dengan MySQL, untuk menjalankannya harus diketikkan informasi hostname, username dan password.

· mysql_close()

Fungsi yang digunakan untuk mengakhiri koneksi dengan MySQL.

· mysql_create_db()

Digunakan untuk membuat database yang hanya dapat diakses oleh username dan password.

· mysql_db_query()

Perintah untuk melakukan sesuatu yang disebut query, query dikirimkan ke database yang sedang aktif.

· mysql_select_db()

Digunakan untuk memilih database yang sedang aktif.

· mysql_query()

Digunakan untuk mengirim query kapada database aktif yang sebelumnya sudah dipilih dengan fungsi mysql_select_db().

· mysql_fetch_row()

Digunakan untuk mengambil hasil query dari database sebagai data numerik array. Fungsi ni akan mengambil data baris per baris (per record) dari database secara berulang-ulang sampai nilai kondisi menjadi false.

· mysql_fetch_array()

Berfungsi untuk mengambil hasil query dari database sebagai data associative array.

· mysql_num_row()

Berfungsi untuk menghitung jumlah row (blok data atau record) hasil dari query.

3. CSS (Cascading Style Sheet)

Digunakan untuk membuat sebuah template untuk halaman web yang mudah dan dinamis. Kelebihan dari CSS yaitu pada kemampuannya menangani pengaturan layout halaman web. Jika menggunakan HTML, maka pengaturan akan dibatasi pada elemen tertentu saja, namun dengan menggunakan CSS, pengaturan layout dapat dibuat menjadi lebih mudah.

4. HTML

a. Pengertian HTML

HTML adalah singkatan dari Hyper Text Markup Language, merupakan suatu file teks biasa (bisa diedit menggunakan Notepad) namun mengandung berbagai tag markup.

Editor HTML merupakan aplikasi GUI (graphical user interface) yang sangat mudah digunakan, GUI ini memiliki banyak fungsi yang ditujukan untuk mempermudah dalam memproses isi suatu web.

b. Tag dalam HTML

Tag markup bertugas untuk memberikan informasi kapada browser tentang bagaimana cara menampilkan teks yang ada diantara tag tersebut. Berikut ini adalah beberapa tag yang sering digunakan dalam HTML :

TAG	FUNGSI
<html > ... </html >	Berguna untuk menandai awal dan akhir dari suatu dokumen HTML.
<head> ... </head> : header	Adalah header dari dokumen HTML, dan tidak ditampilkan pada window browser.
<title> ... </title>	Digunakan untuk memberikan judul pada dokumen HTML, yang akan ditampilkan di title bar pada browser.
<body> ... </body>	Digunakan untuk teks atau isi yang akan ditampilkan oleh browser.
<br> : line break	Setiap ada tag ini, maka browser akan turun satu baris dan menuliskan teks selanjutnya di baris baru tersebut.
<p> : paragraph	Jika ada tag ini, maka browser akan menulis teks selanjutnya di paragraf yang baru.
<hr>: horizontal rule	Tag ini akan menampilkan garis lurus horizontal di window.
<a href> ... </a>	Yaitu tag untuk membuat rujukan ke suatu dokumen lainnya. Tag ini juga bisa digunakan untuk me-link ke bagian tertentu pada dokumen yang sama, yaitu dengan menandai bagian tersebut dengan tag <a name>.
<b> ... </b>	Tag untuk menampilkan teks dalam bentuk huruf tebal.
<table> dan </table>	Tag untuk membuat suatu tabel.
<th> dan </th>	Digunakan untuk membuat suatu teks menjadi heading atau judul dari kolom.
<tr> dan </tr>	Digunakan untuk memulai suatu baris di dalam tabel.
<td> dan </td>	Berfungsi untuk memulai suatu kolom di dalam suatu baris.

Script awal untuk membuat file html :

<html>

<head>

</head>

</html>

Tag untuk menandai awal dokumen HTML.

Awal header dari dokumen HTML.

Untuk memberikan judul pada dokumen HTML.

Akhir header dari dokumen HTML.

Tag untuk menampilkan isi dokumen HTML.

Tag untuk menandai awal dokumen HTML.

II. LATIHAN

A. Menampilkan tulisan dan gambar pada halaman web

1. Cara menampilkan tulisan pada web

Jika dituliskan, script kodenya adalah sebagai berikut...

<html>

<head>

<title>..Belajar..Belajar..</title>

</head>

<body>

Belajar Web nie

</body>

</html>

1.1. Latihan

	a. Tuliskan script kode untuk menghasilkan tampilan seperti gambar disamping.. ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ...........................................................................

	b. Tuliskan script kode untuk menghasilkan tampilan seperti gambar disamping.. ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ........................................................................... ...........................................................................

2. Cara menampilkan gambar pada web

Jika dituliskan, script kodenya adalah sebagai berikut...

<html>

<head>

<title>..Belajar..Belajar..</title>

</head>

<body>

</body>

</html>

B. Menggunakan CSS

1. Menggunakan CSS pada background/gambar

a. Mengatur batas margin atas

	Script kodenya sebagai berikut.. <style type="text/css"> body{margin-top:0px;} </style> <html> <head> <title>..Belajar..Belajar..</title> </head> <body> <img src="GARFIELD_5.ICO"> </body> </html>
b. Mengatur batas margin kiri
	Script kodenya sebagai berikut.. <style type="text/css"> body{margin-left:0px;} </style> <html> <head> <title>..Belajar..Belajar..</title> </head> <body> <img src="GARFIELD_5.ICO"> </body> </html>

c. Latihan

Bagaimana script yang harus ditulis agar tampilan background/gambar bisa seperti gambar disamping ?

...........................................................................

d. Mengatur letak gambar/background

Misalkan kita ingin membuat desain tampilan website dengan gambar logo beresolusi 128x128 pixel yang selalu berada ditengah. Jika menggunakan resolusi standar VGA 800x600 (window browser internet berada dalam kondisi maximize), maka agar berada di tengah dapat dihitung dengan cara :

- untuk kiri dan kanan : (800-128)/2=336

- untuk atas dan bawah : (600-128)/2=236

Script kodenya sebagai berikut..

body{margin-top:236px;

margin-left:336px;

margin-right:336px;

margin-bottom:236px}

</style>

<html>

<head>

<title>..Belajar..Belajar..</title>

</head>

<body>

</body>

</html>

Untuk hasil diatas masih memiliki kekurangan, saat jendela browser dikecilkan maka gambar tidak akan berada ditengah dari lebar jendela yang ditampilkan, sehingga untuk melihatnya harus di scroll dahulu.

Untuk mengatasi hal tersebut, salah satu cara adalah dengan memberikan nilai margin dengan satuan persen. Caranya sebagai berikut (untuk gambar yang sama dengan diatas) :

- untuk kiri dan kanan : (336 : 800) x 100 = 42%

- untuk atas dan bawah : (236 : 600) x 100 = 39.3%

Untuk nilai persen kadang dapat disesuaikan dengan kondisi yang ditampilkan, tidak harus sesuai dengan nilai yang dihitung mengingat browser untuk tampilan halaman web tidak sepenuhnya memiliki resolusi yang tepat sesuai dengan resolusi standar yang digunakan. Misalnya nilai lebar disesuaikan menjadi 40% dan tinggi 25%

Script kodenya sebagai berikut..

body{margin-top:25%;

margin-left:40%;

margin-right:40%;

margin-bottom:25%}

</style>

<html>

<head>

<title>..Belajar..Belajar..</title>

</head>

<body>

</body>

</html>

e. Warna Background

Untuk memberi warna pada background dapat digunakan script berikut :

Script nya adalah sebagai berikut..

body{margin-top:20%;

margin-left:40%;

margin-right:40%;

margin-bottom:20%;

background-color:#99cc99}

</style>

<html>

<head>

<title>..Belajar..Belajar..</title>

</head>

<body>

</body>

</html>

f. Background dengan gambar

Untuk membuat latar belakang, selain bisa menggunakan warna juga bisa menggunakan gambar, pada umumnya menggunakan format JPG, BMP, GIF, PNG. Dengan menggunakan CSS, gambar dapat di setting sebagai background sesuai dengan keinginan kita. Contohnya seperti script dibawah ini :

Script nya adalah sebagai berikut..

body{background-image:url(iu.gif)}

</style>

Dari gambar diatas terlihat jika gambar yang dijadikan background diulang secara terus menerus. Jika kita ingin gambarnya tidak terulang dan letaknya berada di tengah halaman maka dapat dituliskan menjadi :

Script nya adalah sebagai berikut..

body{background-image:url(iu.gif);

background-position:center;

background-repeat:no-repeat;}

</style>

Ada juga tampilan website, yang pada saat di-scroll gambar background tidak bergerak sama sekali. Script css yang digunakan untuk mengaturnya seperti berikut :

body{background-image:url(iu.gif);

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;}

</style>

2. Menggunakan CSS untuk membuat kolom

a. Membuat Layout Kolom

<html>

<head>

<title>..Belajar..Belajar..</title>

body{background-color:#333;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

font-family:verdana, arial, helvetica, sans-serif;

font-size:12px; color:#000;

background-attachment:fixed;}

p#kiri{position:absolute;

top:0px; left:0px;

margin:20px; padding:10px; background:#ccc;

width:150px; voice-family:"\"}\"";

voice-family:inherit; width: 120px;}

p#tengah{margin:20px 200px 20px 205px;

padding:10px; background:#ccc;}

p#kanan{position:absolute;

top:0px; right:0px;

margin:20px; padding:10px; background:#ccc;

width:150px; voice-family:"\"}\"";

voice-family:inherit; width:120px;}

</style>

</head>

<body>

<p id="kiri">PERTAMA</p>

<p id="tengah">KEDUA</p>

<p id="kanan">KETIGA</p>

</body>

</html>

3. Menggunakan CSS untuk mengolah teks

Teks pada tampilan website juga dapat diformat dengan menggunakan CSS, baik warna, spasi, perataan, bentuk teks indent, bentuk karakter, spasi per karakter, dan pengaturan lainnya.

3.1. Pengaturan Teks

Yang dapat diatur pada teks oleh CSS adalah warna, atribut, serta font sebuah teks. Selain mempercantik tampilan website, pengaturan ini juga menjadikan suatu website lebih interaktif sehingga user tidak merasa bosan dengan suasana teks pada website tersebut.

Pengaturan warna pada teks

Untuk tampilan berikut ini, ketiklah scriptnya :

h1{ color:#990000;}

h2{ color:#000099;}

h3{ color:#006600;}

</style>

<html>

<head>

</head>

<body>

<h1>Membuat</h1>

<h3>lebih OKs</h3>

</body>

</html>

Instruksi “color” diletakkan sebagai style pada tag h1 (heading 1), h2 dan h3. Hal ini dilakukan agar tidak perlu membuat nama style sendiri. Terlalu banyak nama style akan membuat kita bingung untuk memilih style yang diinginkan, apalagi bila nama stylenya aneh, sehingga bisa terlupa.

Pengaturan atribut pada teks

Agar tampilan lebih menarik, atributnya dapat kita atur sedemikian rupa. Contohnya ada pada tampilan berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title>Mengatur AtributTeks</title>

h1{ text-align:center;

color:#990000;

text-decoration:underline;

letter-spacing:0.1cm;}

h2{text-align:left;

color:#000099;

text-decoration:overline;}

h3{text-align:right;

color:#006600;

text-decoration:line-through;}

</style>

</head>

<body>

<h1>Membuat </h1>

<h3>Lebih OKs</h3>

</body>

</html>

Memberi background warna pada teks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

</head>

<body>

<span style="background-color:#006699">Lebih

Kreatip</span></h1>

</body>

</html>

Memberi background gambar pada teks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

</head>

<body>

<span style="background-image:url(39.png)">gambar

dibalik Teks</span></font></h1>

</body>

</html>

Memberi border pada teks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<h1><span style="border-color:#FF9900;

border-style:solid;

border-width:thin;

background-color:#000000;

color:#FFFFFF;">Teks pake

Border</span></h1>

</body>

</html>

Efek teks berbayang

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

</head>

<body>

<DIV style="position: absolute;

top: 13px;

left : 12px;

width: 370px;

height: 80px;

font-size: 40pt;

font-family:Verdana;

color:808080">Bayang</DIV>

<DIV style="position: absolute;

top: 10px;

width: 370px;

height: 80px;

font-size: 40pt;

font-family:Verdana;

color:red">Bayang</DIV>

</body>

</html>

3.2. Pengaturan Paragraf

Pengaturan paragraf dilakukan untuk mengatasi bentuk paragraf yang tidak teratur, terlebih jika berupa berita atau artikel.

a. Perataan Teks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title> .:: Atur Paragraf ::. </title>

p{text-align:right;}

h1{text-align:center;}

</style>

</head>

<body>

<h1>Judul nya</h1>

<p> aaaaaaaa bbbbbbbb

aaaa bbbbbb

aaaaaaaa bb

aaaaaaaa bbbbbbbbbbr

aaaaaaa bbbbbbbbbbbr

aaaaaaaaaa bbbbbbbb

cccccc ccccccc ccccccccc

ccc ccccccc cccc cccccc

</p>

</body>

</html>

b. Pengaturan teks indent

Biasanya dalam membuat suatu paragraf terdapat kalimat awal yang menjorok ke dalam. Dalam tag HTML dapat menggunakan <BLOQUOTE>, namun perintah ini ada memiliki batasan 5 karakter ke dalam. Keterbatasan ini dapat diatasi dengan menggunakan CSS yang menyediakan properti text-indent:value. Value nya dapat bernilai cm, px, atau %.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title> .:: Atur Paragraf ::. </title>

p{ text-align:justify;

text-indent:1cm;}

</style>

</head>

<body>

<p>aaaaaaaa bbbbbbbb

aaaa bbbbbb

aaaaaaaa bb

aaaaaaaa bbbbbbbbbbr

aaaaaaa bbbbbbbbbbbr

aaaaaaaaaa bbbbbbbb

cccccc ccccccc ccccccccc

ccc ccccccc cccc cccccc

</p>

</body>

</html>

c. Membuat Dropcap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title> .:: Atur Paragraf ::. </title>

<style>

p {text-align:justify;}

.dropcap {

width: 1em;

height: 1em;

float: left;

text-align: center;

font-size: 35pt;

color:red;

font-style:italic}

</style>

</head>

<body>

aaaaaaaa bbbbbbbb

aaaaaaaa bb

aaaaaaaa bbbbbbbbbbr

cccccc ccccccc ccccccccc

ccc ccccccc cccc cccccc

</p>

</body>

</html>

3.3. Mengatur bentuk font

Memilih jenis font harus disesuaikan dengan isi dari website tersebut. Misalnya website berisikan berita maka jenis font yang dipilih harus dapat terbaca dengan enak, jelas dan baik.

a. Mengatur jenis font

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title> .:: Atur Paragraf ::. </title>

h1 {font-family:sans-serif;}

h2 {font-family:Times New Roman;}

h3 {font-family:comic sans ms;}

</style>

</head>

<body>

<h1>Coba jenis font</h1>

<h2>Coba jenis font</h2>

<h3>Coba jenis font</h3>

</body>

</html>

b. Mengatur ukuran font

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title> .:: Atur Paragraf ::. </title>

h1 {font-family:Arial; font-size:14px;

color:#FF0000;}

h2 {font-family:Verdana; font-size:10px;

color:#003399; text-align:justify;}

</style>

</head>

<body>

<p>

<h1>Tips :

Memperindah Tampilan website

dengan CSS.

</h1>

<h2>Dalam memperindah tampilan website,

salah satu script yang dapat digunakan

adalah CSS (Cascading Style Sheet).</h2>

</p>

</body>

</html>

c. Memilih gaya font

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title> .:: Atur Paragraf ::. </title

p { font-family:Verdana; font-size:12px;

text-align:justify;}

.miring {font-style:italic;}

.obli {font-style:oblique;}

.tebal {font-weight:800;}

.varian {font-variant:small-caps;}

</style>

</head>

<body>

Tips :<span class="tebal">Memperindah

Tampilan website

dengan CSS.</span></p>

<p style="color:#003366">Dalam <span

class="miring">memperindah tampilan

website</span>,

<span class="varian" style="text-

decoration:underline">salah satu

script</span> yang dapat digunakan

adalah <span class="tebal">CSS</span><span

class="obli">(Cascading Style

Sheet)</span>.</p>

</body>

</html>

d. Teks di atas teks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

H2.spin {LEFT: 5px;

FONT: bold italic 36pt times, serif;

COLOR:#C1E0FF; POSITION: relative;

TOP: 5px

}

H3.spin {MARGIN-BOTTOM: 10px;

FONT: 18pt Arial, sans-serif;

MARGIN-LEFT: 20px; COLOR:#FF8040;

POSITION: relative; TOP: -40px}

</STYLE>

</head>

<body>

<H2 class=spin>STYLE</H2>

<H3 class=spin>Dengan CSS</H3></head>

</body>

</html>

3.4. Border

Salah satu kelebihan CSS adalah dapat membuat border yang berfungsi untuk memperindah tampilan website. Border dapat difungsikan untuk pembatas pada tiap elemen baik gambar, teks, paragraf dll, sehingga tidak perlu menggunakan bantuan tabel yang banyak untuk dijadikan batas tiap elemen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

</head>

p { border:2pt solid #000000;}

</style>

</head>

<body>

<p>Contoh Penggunaan border untuk memberi

batas pada suatu elemen</p>

</body>

</html>

a. Membuat border yang berbeda (style, ukuran dan warna)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

content="text/html; charset=iso-8859-1">

p { border-top-style: dotted;

border-top-color:#FF0000;

border-top-width:1pt;

border-bottom-style:solid;

border-bottom-color:#0066FF;

border-bottom-width:5pt;

border-left-style:dashed;

border-left-color:#00FF00;

border-left-width:10pt;

border-right-style:double;

border-right-color:#FF9900;

border-right-width:3pt;}

</style>

</head>

<p>Border Berbeda dan berbentuk tidak sama

pada setiap sisinya baik warna dan

ukuran.</p>

</body>

</html>

Pages

Hiken NO Faisal adriansyah D Luffy

GAMBAR

Translate

Popular Posts

Mengenai Saya

Blog Archive

Blogger templates

Formulir Kontak

Senin, 02 Desember 2013

pemrograman web1

Related Post:

0 komentar:

BUKU TAMU

Follow