Dermawansyah's Blog

Just another WordPress.com weblog

Membuat Website dengan Teknik CSS

Secara umum, sebuah halaman web terdiri dari beberapa blok. Blok ini dikenal dengan division yang disimbolkan dengan kode tag <div> dan </div>. Mengapa kita harus membagi halaman menjadi beberapa blok, hal ini supaya halaman dapat ditata dengan rapi dan menarik..Teknik desain halaman web dengan menggunakan tag <div> dan </div> disebut teknik CSS.

Beberapa desainer masih menggunakan teknik tabel (tag <table> dan </table>) untuk menata halaman web, namun cara ini tidak direkomendasikan oleh standar web internasional mengingat teknik ini boros halaman kode yang akan mengakibatkan halaman semakin lama dimuat, selain itu teknik ini sulit di-index oleh mesin pencari google. Menggunakan teknik CSS akan menampilkan halaman web yang lebih menarik dan lebih mudah disusun dengan rapi..

Bagaimana Memulainya..??

Pertama buka dulu program Notepad dari Start-Program-Accessories-Notepad dan mulai dengan ini (well, saya selalu menggunakan rumus seperti ini kalo membuat website):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Website Dermawansyah</title>
   <meta name="description" content="Webpage ini menjelaskan bagaimana membuat website dari dasar"/>
   <meta name="keywords" content="website, css, membuat website" />
   <meta name="robots" content="index,follow" />
   <style type="text/css" media="all">@import "my_css.css";</style>
  </head>

<body>

</body>

</html>

Keterangan:

Simpan file tersebut dengan nama index.html. Pastikan file of type terpilih adalah all files.

tag meta adalah sesuatu yang boleh dikatakan wajib digunakan untuk “memperkenalkan” websitemu, diletakkan di dalam pasangan tag <head> dan </head>

Di dalam tag “description” masukkanlah penjelasan mengenai websitemu, jangan terlalu panjang, yang penting jelas.

Keywords adalah kata kunci yang digunakan yang dapat membantu google meng-index websitemu.

Kemudian ada juga tag ini:

   <meta name="robots" content="index,follow" />

Apabila orang mengklik title web kita di google, maka akan diarahkan ke file bernama index.

Dan tag ini:

   <style type="text/css" media="all">@import "my_css.css";</style>

Apabila kita memiliki file CSS, silakan masukan kode seperti itu untuk memuatnya. File CSS berisi penataan halaman web agar tampi menarik. Kita dapat mengatur letak, ukuran dan warna elemen-elemen web di dalam sebuah file CSS.

Mulai menggunakan tag <div>

Masukkan tag-tag ini di antara blok <body></body>:

<body>

<div id=”header”>

</div>

<div id=”main”>

</div>

<div id=”footer”>

</div>

</body>

Membuat File CSS

Ketikkan di Notepad:

body

{

background-color: #000000;

font-family: Arial, Helvetica, Verdana, Sans-serif;

font-size: 14px;

color: #666666;

}

#header

{

background-color:#ffffff;

height: 120px;

}

#main

{

background-color:#303030;

line-height: 25px;

}

#footer

{

background-color:#505050;

}

Simpan file dengan nama my_css.css. File ini bersama dengan index.html diletakkan di dalam sebuah folder. Kemudian bukalah browsermu, hasilnya seperti ini:

Klik ini

Selamat mencoba dan semoga sukses ya..

February 22, 2010 Posted by | Uncategorized | 6 Comments

Script Login VB Net (2005/2008)

Biasanya kalo kita mengakses sebuah program database, kita akan dipertanyakan password untuk memasuki program tersebut. Berikut ini cara membuatnya ^_^.

1. Buka program SQL Server, dan aktifkan database Northwind. Buat sebuah tabel baru ke dalam database tersebut, dengan nama tbl_user. Tabel ini mempunyai tiga kolom (field) yaitu ID, Nama dan Password. Isikan dua buah data berikut.

data1: user01, Rudy, Rudy01

data2: user02, Fenny, Fenny02

2. Buat sebuah aplikasi baru di VB dan tambahkan dua textbox bernama: txt_id dan txt_pwd dan dua buah button: bt_ok dan bt_btl. Di bagian atas kode (setelah private sub form..) ketikkan kode berikut.

dim koneksi as sqlclient.sqlconnection

dim co as sqlclient.sqlcommand

dim bd as bindingsource

3. Masukkan sebuah fungsi untuk membuka database.

sub koneksikan ()

koneksi=new sqlclient.sqlconnection

koneksi.connectionstring=”data source=.; initial catalog=customers; integrated security=true”

koneksi.open

end sub

4. Klik ganda bt_ok, dan isikan kode berikut

koneksikan

co=new sqlclient.sqlcommand

co.connection=koneksi

co.commandtext=”Select * from tbl_user where ID='” & me.txt_id.text & “‘” & “and password = ‘” & me.txt_pwd.text & “‘”

co.commandtype=commandtype.text

bd.datasource=co.executereader

if bd.count > 0 then

msgbox “OK, login berhasil, dan silakan masuk..”

else

msgbox “Maaf, password salah..”

endif

koneksi.close

5. Klik ganda bt_btl, dan masukkan kode berikut..

unload me

6. Save project dan jalankan program. Semoga sukses ya..

February 22, 2010 Posted by | Uncategorized | 2 Comments

Koneksi Visual Basic 2008 dengan SQL Server dan Access

Kita akan menggunakan database bawaan dari SQL Server, yaitu Northwind dan tabel yang digunakan adalah tabel Customers. Contoh koneksi visual basic 2008 (dan juga vb 2005) dengan SQL Server adalah sebagai berikut..

1. Buat satu aplikasi baru di vb 2008, dengan menambahkan sebuah datagridview untuk menampilkan data.

2. Masuk ke jendela code. Di dalam kode, ketikkan kode berikut.

dim koneksi as sqlclient.sqlconnection

dim co as sqlclient.sqlcommand

dim bd as bindingsource

3. Klik ganda form tersebut, akan muncul kode “form_load”. Apabila kita ketikkan kode di dalamnya, kode tersebut akan dijalankan sewaktu form ini di-buka. Di dalamnya ketikkan kode berikut..

==================================================================

koneksi=new sqlclient.sqlconnection

co=new sqlclient.sqlcommand

bd=new bindingsource

koneksi.connectionstring=”data source=.; initial catalog=customers; integrated security=true”

koneksi.open

co.connection=koneksi

co.commandtext=”Select * from customers”

co.commandtype=commandtype.text

bd.datasource=co.executereader

me.datagridvieww1=bd

koneksi.close

===================================================================

Keterangan: datasource=diisi dengan nama server, kalo program satu PC dengan database SQL Server, maka diisi dengan tanda titik yang artinya server LOCAL. Km harus sesuaikan dengan nama server di mana database disimpan..

4. Save project kita dan coba jalankan.. Apabila berhasil, ketika form dijalankan, datagridview akan memuat data pada tabel customers. Semoga sukses dan jangan lupa komentarnya ya bro n sis..

Koneksi dengan Access

Koneksi dengan Access pada dasarnya sama tekniknya dengan SQL Server.

Contoh:

dim cn as oledb.oledbconnection

cn.connectionstring=”Provider=Microsoft.Jet.OLEDB.4.0; Datasource=minimarket.mdb”

dim co as oledb.oledbcommand

dim bd as bindingsource

sub tampil_data ()

cn=new oledb.oledbconnection

‘satu baris kode di bawah ini adalah cara singkat penulisan command

co=new oledb.oledbcommand (“Select * from Customers”, cn)

bd=new bindingsource

bd.datasource=co.executereader

datagridview1.datasource=bd

cn.close

end sub

Selamat Mencoba ^_^ Moga Berhasil

February 22, 2010 Posted by | Uncategorized | 2 Comments