Contoh Aplikasi Berbasis – CSS untuk Halaman Login Phonebook

Kita break dulu dalam membahas coding php, kali ini kita selingi dengan CSS atau cascading style sheet untuk mempercantik tampilan halaman Login aplikasi Phonebook yang sudah kita buat.

Ternyata asik juga menulis blog, walaupun yang dibahas tentang hal teknis yang mungkin tidak semua orang mau mempelajarinya, dan mungkin… suatu hari nanti, menulis blog bisa jadi full time job yang menyenangkan hehe…

Kembali ke CSS,
Pada prinsipnya CSS dipergunakan untuk mempercantik halaman web yang kita miliki. Kita bisa melakukan perubahan total pada seluruh tampilan halaman web hanya dari sebuah file saja. CSS bisa membuat tampilan aplikasi berbasis web secantik layaknya aplikasi desktop. GUI aplikasi berbasis web, salah satunya dapat dipoles dengan menggunakan CSS.

Pada source code postingan berikut, terdapat perubahan pada :

1.    Script index.php
Pada script ini terdapat tambahan
<link rel=stylesheet type=text/css href=css/login.css>
di bagian <head> </head>. Baris tersebut untuk memanggil file login.css yang terletak di folder css.

2.    Penambahan folder css
Folder css untuk meletakkan file login.css

3.    Penambahan folder image
Folder image digunakan untuk menampung image yang dipergunakan sebagai background halaman login.
Jika anda tertarik untuk belajar CSS dari dasar, silahkan buka http://w3schools.com. Banyak tutorial tentang css yang bisa anda baca.

Pada file login.css yang terdapat pada folder css, penjelasannya sebagai berikut :

Bagian :
body {
margin:0;
padding:0;
font-family: Lucida Sans, Arial, Georgia;
}

berarti semua elemen yang berada pada tag <body> … </body> hurup yang tertulis pada browser akan menggunakan font Lucida Sans. Jika font Lucida Sans tidak terinstall pada komputer desktop, notebook  atau netbook anda, maka font yang akan digunakan adalah Arial. Jika font Arial tidak terinstall juga, berarti Georgia yang akan digunakan. Jika Georgia tidak juga terinstall, maka font default bawaan komputerlah yang akan ditampilkan… tapi menurut saya.. jika anda beli komputer/notebook/netbook dan tidak terinstall salah satu font diatas, kembalikan saja ke penjual atau vendor nya, bilang kalau font yang terinstall kurang ☺

Bagian :
h1 {
color:#fff;
}
berarti semua elemen di antara tag <h1>… </h1> akan berwarna putih

Bagian :
table {
padding-top:330px;
}
semua elemen diantara tag <table> … </table> akan diberi jarak dari sisi atas (padding-top) 330 pixel. Jarak pixel ini bisa anda sesuaikan dengan resolusi monitor pengguna aplikasi Phonebook. Kurangi atau tambahkan jarak secukupnya….hmm… jadi mirip acara masak.., tambahkan garam secukupnya

Bagian :
#login {
background-image: url(’../images/login.jpg’);
background-repeat: no-repeat;
background-position:center;
top : 0;
left : 0;
width:100%;
height:100%;
text-align: center;
}
elemen #login diperuntukkan untuk divisi atau <div> login. Ditunjukkan dengan penggunaan <div id=login> .. </div>. Pada divisi login yang ada di index.php, kita memanggil file login.php untuk dipergunakan sebagai background, kemudian background ditampilkan cukup sekali saja (no-repeat), kemudian posisinya center atau pas ditengah halaman browser, jarak ke atas atau top = 0, jarak dari pinggir kiri (left) juga 0. Untuk lebar bidang divisi login adalah 100%, tinggi bidang divisi login juga 100% dan semua teks yang ditulis ditempatkan pada tengah halaman browser.

Bagian :
input
{
border: 1px solid #8c8c8c;
font-size:1em;
height: 36px;
padding:5px;
}
bagian ini digunakan untuk mempercantik elemen input atau form input. Garis pinggir dari elemen input diberi warna #8c8c8c bergaris tebal dengan lebar garis 1 pixel saja. Hurup yang ditampilkan diantara tag <input> … </input> akan mempunya ukuran sebesar 1em. Ketinggian form input untuk menerima isian username dan password adalah 36 pixel. Sedangkan jarak antara font dengan pinggir form adalah 5 pixel.
Download dan pelajari dulu  source code nya. Selamat menikmati

Sumber : http://dendy.med-gmu.org/?cat=3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s