Rahma Bhie: Maret 2010

Rabu, 31 Maret 2010

MEMBUAT LOGIN FORM SEDERHANA

Diposting oleh rahma bhie at 06.00

Setelah pada kesempatan terdahulu kita telah belajar berbagai teknik untuk menciptakan halaman web sederhana, kali ini kita akan belajar bagaimana cara membuat sebuah login form sederhana dalam halaman web.
Untuk membuat sebuah login form, kita membutuhkan tiga komponen atau tiga langkah utama, yaitu:
1. Membuat file css
2. Membuat file php
3. Membuat file html

Seperti biasanya file css berguna untuk membuat atau mengatur kerangka utama atau kerangka dasar dari halaman web kita.
Kemudian file php berguna untuk mengatur data yang akan digunakan dalam proses login,misalnya username, passwoed dll.
Sedangkan file html berguna untuk mempublikasikan halaman web yang telah dirancang dalam file scc dan php.

Untuk lebih jelasnya, marilah kita pelajari contoh MEMBUAT LOGIN FORM SEDERHANA dibawah ini..

1. Membuat File css
Buatlah file css seperti contoh di bawah ini:

Simpan file di atas dengan nama bhie.css untuk kemudian dipanggil di file html

2. Buat file php

Buatlah file php sebegaiman contoh di bawah ini:

Simpan file dengan nama admin.php untuk kemudian dipanggil di file html.

3. Membuat file html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 <title>Form Login</title>
 <link rel="stylesheet" href="bhie.css" type="text/css" />
 </head>
 <body onLoad="document.form1.user.focus(); backgroundimage= "tux.jpg">
 <form name="form1" method="post" action="admin.php">
 <div id="apDiv1">
 <div id="header">
 </div>
 <div align="center">
 <img src="LOGIN.jpg" align="center"> 
 
 
 <div align="center"> User Name :
 
 
 <input type="text" name="user" size="40" value="" style="background-color:#00FF00">
 
 
 Password : 
 
 <input type="password" name="pass" size="40" style="background-color:#00FF00">
 
 
 <input type="submit" name="submit" value=" E N T E R " onClick="admin()">
 
 
 </div>
 </div>
 
 <div align="center" id="apDiv3">
 
 </div>
 <div id="footer" align="center"> 
 
 </div>
 </div>
 </form>
 </body>
 </html>

Simpan dengan nama file latihan3.html , semua file disimpan seperti biasa di folder www. beserta komponen-komponen yang digunakan. Kemudian ujicoba project.
Apabila langkah-langkah telah dilakukan dengan baik dan berhasil, maka akan muncul hasil seperti gambar dibawah ini:

Dalam project ini apabila terjadi kesalahan login, maka akan mengarah pada halaman tersendiri yang di dalamnya menyatakan adanya kesalahan login. Dan apabila berhasil akan mengarah pada sebuah halam yang menyatakan selamat telah berhasil melakukan login. Username dan password telah diatur dalam file php, begitu juga apabila terjadi kesalahan dan berhasil login telah diatur dalam file php.

Selamat Mencoba...!!!

Sabtu, 06 Maret 2010

SPECTRUM FREQUENCY

Diposting oleh rahma bhie at 03.15

SPECTRUM FREEQUENCY
Spectrum Frequency dari suatu sinyal merupakan kumpulan dari seluruh komponen frequensiy yang tercakup di dalamnya dan ditunjukkan dengan grafik frequency domain. Selain spectrum frequency, kita juga mengenal intilah bandwith, yaitu lebar dari spectrum frequency. Dari sini dapat kita simpulkan bahwa bandwith itu sendiri mengacu pada range dari komponen frequency-frequency. Sedangkan spectrum frequency itu sendiri mengacu pada elemen-elemen yang ada di dalam range.

Menghitung Bandwith
Untuk mengetahui besarnya bandwith kita dapat melakukan dengan menghitung frequency tertinggi dikurangi dengan frequency terendah.

TRANSFORMASI FOURIER
sebuah transformasi integral yang menyatakan-kembali sebuah fungsi dalam fungsi basis sinusioidal, yaitu sebuah fungsi sinusoidal penjumlahan atau integral dikalikan oleh beberapa koefisien ("amplitudo"). Ada banyak variasi yang berhubungan-dekat dari transformasi ini tergantung jenis fungsi yang ditransformasikan.
Secara sederhananya transformasi fourier dipergunakan untuk mengubah dari kawasan waktu menjadi kawasan frekuensi. Pengubahan itu dimaksudkan untuk mempermudah analisis yang dilakukan. Dalam bidang pengolahan sinyal maka pengubahan tersebut dapat dilakukan terhadap sinyal maupun terhadap sistemnya. Transformasi fourier sinyal akan menghasilkan spektrum sinyal. Sedangkan transformasi fourier terhadap sistem akan menghasilkan tanggapan frekuensi sistem.

GELOMBANG ELEKTROMAGNETIK
Gelombang elektromagnetik merupakan yang berisi dan menghantarkan sinyal-sinyal elektromagnetik di udara. Contoh gelombang televisi, radio, dan lain-lain. Masing-masing jenis gelombang elektromagnetik ini memiliki batas jangkauan sendiri-sendiri, yang disebut dengan spectrum elektromagnetik. Spectrum elektromagnetik meliputi daerah batas gelombang dengan frequency yang rendah sampai frequency yang sangat tinggi.

Pada umumnya gelombang elektromagnetik yang memiliki frequensi tinggi yang dipancarkan oleh pemancar disebut dengangelombang radio (RF). Gelombang RF dibagi menjadi dua golongan, yaitu Gelombang Langit (Sky wave) dan Gelombang Darat (Ground wave).

Jenis-jenis media transmisi radio:
1. Middle Frequency(MF)
 Banyak digunakan pada radio swasta, radio amatir,orari, dsb.
2. High Frequency (HF)
 Dipakai untuk berhubungan dengan tempat-tempat jauh dan terpencil. Penggunaan frequency HF ini sering disebut dengan SSB (Single Side Band atau radio SSB).
3. Very High Frequency (VHF) dan Ultra High Frequency (UHF)
 Banyak digunakan untuk keprluan hubungan jarak dekat, contohnya radio kendaraan bermotor, STJJ, dan lai-lain.
4. Super High Frequency (SHF) dan Extremely High Frequency (EHF)
 Sering diseut dengan gelombang mikro yang banyak digunakakn untuk system gelombang mikro di Telkom dan system satelit termasuk untuk penyiaran program televise.

Selasa, 02 Maret 2010

Desain Layout Web Sederhana dengan code CSS

Diposting oleh rahma bhie at 20.33

Pada kesempatan kali ini, kita akan membahas mengenai pembuatan halaman web sederhana dengan menggunakan code css untuk penyusunan kerangka awal elemen halaman web.
Dengan menggunakan CSS ini, kita dapat dengan mudah mengatur semua elemen halaman web, seperti border, padding, font, spacing, colour, background dan lain-lain dengan simple dalam satu paket code saja.
Langkah-langkah utama dalam pembuatan halaman web sederhana adalah, pertama membuat kerangka Wb dengan kode css, kemudian memperindah halaman dengan kode html.

Untuk lebih mudahnya kita dapat mencoba membuat contoh program 1 di bawah ini:
1. Contoh Membuat Kerangka Halaman Web

#wrapper { 
 
 margin: auto; 
 
 width: 750px; 
 
 border: 0px solid red;
 
 }
 
 #header {
 
 height: 80px;
 
 border: 0px solid blue;
 
 }
 
 #templatemo_menu_panel{
 
 width: 750px;
 
 height: 80px; 
 
 repeat: x;
 
 background: url(tux.jpg);
 
 }
 
 
 
 #templatemo_menu_section ul {
 
 float: right;
 
 width: 350px;
 
 margin: 0;
 
 padding: 0 27px 0 0;
 
 list-style: none;
 
 }
 
 
 
 #templatemo_menu_section ul li a{
 
 float: left;
 
 width: 50px;
 
 font-size: 10px;
 
 font-weight: bold;
 
 text-align: center;
 
 text-decoration: none;
 
 color: #ff00ff;
 
 border-right: 1px solid #5f3b11;
 
 }
 
 
 
 #searchfield{
 
 border: 1px solid #ffffff;
 
 color: #000000;
 
 font-size: 13px;
 
 font-variant: normal;
 
 height: 15px;
 
 line-height: normal;
 
 width: 100px;
 
 }
 
 
 
 #searchbutton{
 
 float: right;
 
 cursor: pointer;
 
 font-size: 10px;
 
 font-weight: bold;
 
 height: 20px;
 
 margin: 0 0 0 7px;
 
 text-align: center;
 
 vertical-align: bottom;
 
 white-space: pre;
 
 width: 50px;
 
 }
 
 #boxImage{
 
 float: left;
 
 margin: 10px;
 
 width: 70px;
 
 height: 50px;
 
 }
 
 
 
 #boxText{
 
 float: left;
 
 margin: 10px;
 
 padding: 10px 0 0 0;
 
 width: 250px;
 
 height: 50px;
 
 font-size: 20px;
 
 font-weight: bold;
 
 text-align: left;
 
 color: solid blue;
 
 }
 
 #boxButton{
 
 float: right;
 
 padding: 30px 0 0 0;
 
 width: 50px;
 
 height: 15px;
 
 }
 
 
 
 #boxTF{
 
 float: right;
 
 padding: 30px 50px 0 0;
 
 width: 170px;
 
 height: 15px;
 
 }
 
 #inner {
 
 float: left;
 
 height:330px;
 
 border: 0px solid black;
 
 }
 
 #sidebar { 
 
 float: left; 
 
 width: 200px; 
 
 height: 330px;
 
 background: #fff000; 
 
 border: 0px solid red;
 
 }
 
 #leftmenu ul{
 
 width:200px;
 
 list-style-type: none;
 
 padding: 0;
 
 margin: 0;
 
 }
 
 #leftmenu a:link, #leftmenu a:visited, leftmenu a:active {
 
 padding-left: 15px;
 
 text-decoration: none;
 
 }
 
 #leftmenu a{
 
 padding: 5px 0px 5px 15px;
 
 display: block;
 
 background: #6cae15 no-repeat left center;
 
 margin: 0px 0px 1px;
 
 color: black;
 
 }
 
 #leftmenu a:hover{
 
 background: blue no-repeat left center;
 
 color: #00ffff;
 
 }
 
 #content1 { 
 
 float: left; 
 
 width: 550px; 
 
 height: 330px; 
 
 border: 0px solid green;
 
 background: yellow;
 
 }
 
 #top { 
 
 float: left; 
 
 width: 550px; 
 
 height: 100px; 
 
 border: 0px solid blue;
 
 }
 
 #content { 
 
 float: left; 
 
 width: 374px; 
 
 height: 230px; 
 
 border: 0px solid red;
 
 background: #fff89d;
 
 }
 
 #right { 
 
 float: right; 
 
 width: 150px; 
 
 height: 150px; 
 
 font-size: 12px;
 
 font-weight: bold;
 
 background: cyan;
 
 border: 0px solid orange;
 
 }
 
 #fontRight{
 
 font-size: 10px;
 
 font-weight: bold;
 
 }
 
 #footer {
 
 clear: both;
 
 text-align: center;
 
 height: 50px;
 
 border: solid blue;
 
 background: yellow;
 
 }

Simpan code css diatas dengan nama style1.css dan simpan dalam folder wamp/www, untuk kemudian di-load pada file html.

Langkah berikutnya adalah membuat file html.

untuk membuat file html buat code seperti di bawah ini:

Berikut ini adalah layout hasil code program di atas:

Setelah kita berhasil membuat elemen dan kerangka dasar dari halaman web sederhana yang ingin kita buat, sekarang kita kan mencoba membuat halaman web sederhana yang lengkap dengan isi dan tampilan yang menarik.

2. Contoh Membuat Halaman Web Sederhana

Seperti halnya pada contoh pertama, mula-mula kita membuat kerangka web dengan code css.

Simpan code di atas dengan nama styleq.css , untuk kemudian diload pada file html.
Langkah berikutnya adalah menbuat file html.

<!DOCTYPE html 
 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
 
 
 <head> 
 
 <title>Desain Layout Sederhana</title> 
 
 <link rel="stylesheet" href="styleq.css" type="text/css" /> 
 
 </head> 
 
 
 
 <body> 
 
 
 
 <div id="wrapper"> 
 
 <div id="header"> 
 
 <div id="templatemo_menu_panel">
 
 <div id="boxImage" align="right">
 
 <img src="unm.bmp" height="50" width="50"/>
 
 </div>
 
 
 
 <div id="templatemo_menu_section">
 
 <ul>
 
 <li><a href="#home">Home</a></li>
 
 <li><a href="#Situs_Map">Site Map</a></li>
 
 <li><a href="#RSS">RSS</a></li>
 
 <li><a href="#Contact">Contact</a></li> 
 
 <li><a href="#About_US">About Us</a></li> 
 
 </ul>
 
 </div>
 
 <div id="boxText"> 
 
 TEKNIK ELEKTRO
 
 </div> 
 
 <div id="boxTF">
 
 <input type="text" name="q" size="10" id="searchfield" title="searchfield" />
 
 </div>
 
 <div id="boxButton">
 
 <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
 
 </div>
 
 </div> 
 
 </div> 
 
 
 
 <div id="inner"> 
 
 <div id="sidebar"> 
 
 <div id="leftmenu">
 
 <ul>
 
 <li><a href="#home">Home</a></li>
 
 <li><a href="#News_and_Media">News and Media</a></li>
 
 <li><a href="#Tutorials">Tutorials</a></li>
 
 <li><a href="#Tips_and_Tricks">Tips and Tricks</a></li> 
 
 <li><a href="#Downloads">Downloads</a></li> 
 
 </ul>
 
 </div> 
 
 </div> 
 
 
 
 <div id="content1">
 
 <div id="top">
 
 <img src="teknik.jpg" height="100" width="550"/>
 
 </div> 
 
 <div id="content">
 
 <h3 align="center">Pemuda Indonesia Berkarya</h3>
 
 
 
 
 
 "Masa depan bangsa adalah tanggunga jawab para generasi penerus bangsa, yaitu para pemuda yang terus bertumbuh dan berkembang seiring 
 				dengan kemajuan zaman, namun tetap berpegang teguh pada pribadi bangsa yang luhur"
 
 <hr align="right" style="color:yellow" width="130" />
 
 <img src="futsal.jpg" align="right" border="2" style="color:red" width="50" height="30" />
 
 
 
 </div> 
 
 <div id="right">
 
 EVENTS
 
 <div id="fontRight">
 
 <ul>
 
 <li>Kompetisi Basket</li>
 
 <li>Kompetisi Robot</li>
 
 <li>Kompetisi Seni</li>
 				
 </ul>
 
 </div>
 
 </div> 
 
 </div>
 
 </div> 
 
 <div id="footer"> 
 
 © 2010 Teknik Elektro UM Malang, Indonesia
 
 </div> 
 
 </div> 
 
 </body> 
 
 
 </html>

Hasil dari code di atas adalah:

Itulah tadi beberapa langkah dan contoh membuat halaman web sederhana dengan bantuan code css. Selamat Mencoba..

Rahma Bhie

Mengenai Saya

Welcome

Blog Archive

Labels

Rabu, 31 Maret 2010

MEMBUAT LOGIN FORM SEDERHANA

Sabtu, 06 Maret 2010

SPECTRUM FREQUENCY

Selasa, 02 Maret 2010

Desain Layout Web Sederhana dengan code CSS

Followers

My Blog List

Calendar

Clock