Presentasi RPL SiBams AKN

Assalamu'alaikum wr wb...
Hai guys jumpa lagi dengan saya ... kali ini saya akan mencoba sedikit share tentang Presentasi Rekaya Perangkat Lunak (RPL) saya yang kemarin baru saja saya presentasikan.. tepatnya Senin, 04 Januari 2016  .. tentang PADIS sisten informasi ,...tapi jangan kecewa kalo presentasi nya tidak memuaskan ... karena buatnya sekitar cuma 2 jam-an guys .. hahaha ... untuk yang mau Download SiBamsAKN silahkan klik DISINI.
Sampai ketemu lain waktu ...Thanks...

Wassalamu'alaikum wr wb ...

Tugas 1 dan 2 Jaringan Komputer

Assalamu'alaikum wr wb ..

NAMA   : NUR KHOZIN
NIM       : 1421024199
Kelas      : Management Informatika 7

Hayy semuanya .. jumpa lagi dengan saya ...
Kali ini saya dapat tugas mata kulyah Jaringan Komputer dan saya akan menggunakan aplikasi CISCO Paket Tracer 6.2 untuk Windows kalo belum punya kalia bisa download DISINI.

Langsung saja disini saya dapat 2 Tugas ..
TUGAS 1

 

Langsug saja kita jawab :

Dibawah ini adalah ScrintShoot tampilan di Cisco PaketTracer saya

Network 1			Network 2
IP PC 0	: 172.16.1.1 /20		IP PC 4	: 172.16.25.1 /20
Subnet	: 255.255.240.0		Subnet	: 255.255.240.0
IP PC 2	: 172.16.1.2 /20		IP PC 5	: 172.16.25.2 /20
Subnet	: 255.255.240.0		Subnet	: 255.255.240.0
IP PC 2	: 172.16.1.3 /20		IP PC 6	: 172.16.25.3 /20
Subnet	: 255.255.240.0		Subnet	: 255.255.240.0
IP PC 3	: 172.16.1.4 /20		IP PC 7	: 172.16.25.4 /20
Subnet	: 255.255.240.0		Subnet	: 255.255.240.0

Subneting /20	= 255.255.240.0
	= 11111111 . 11111111 . 11110000 . 00000000
Network ID	= 2^4 = 16
HOST ID	= 2^12 - 2 = 4096 - 2 = 4094
Blog Subnet	= 256 - 240 = 16

Network ID		HOST ID					BroadCast
172.16.0.0   172.16.16.0 172.16.32.0 172.16.48.0 172.16.64.0 172.16.80.0 172.16.96.0 172.16.112.0 172.16.128.0 172.16.144.0 172.16.160.0 172.16.176.0 172.16.192.0 172.16.208.0 172.16.224.0 172.16.240.0		172.16.0.1 172.16.16.1 172.16.32.1 172.16.48.1 172.16.64.1 172.16.80.1 172.16.96.1 172.16.112.1 172.16.128.1 172.16.144.1 172.16.160.1 172.16.176.1 172.16.192.1 172.16.208.1 172.16.224.1 172.16.240.1		s/d s/d s/d s/d s/d s/d s/d s/d s/d s/d s/d s/d s/d s/d s/d s/d	172.16.15.254 172.16.31.254 172.16.47.254 172.16.63.254 172.16.79.254 172.16.95.254 172.16.111.254 172.16.127.254 172.16.143.254 172.16.159.254 172.16.175.254 172.16.191.254 172.16.207.254 172.16.223.254 172.16.239.254 172.16.255.254		172.16.15.255 172.16.31.255 172.16.47.255 172.16.63.255 172.16.79.255 172.16.95.255 172.16.111.255 172.16.127.255 172.16.143.255 172.16.159.255 172.16.175.255 172.16.191.255 172.16.207.255 172.16.223.255 172.16.239.255 172.16.255.255

Dan disini adalah hasil dari rangkaian yang saya buat di Paket Tracer Silahkan Download DISINI


Kemudian TUGAS 2

Langsug saja kita jawab :

Dibawah ini adalah ScrintShoot tampilan di Cisco PaketTracer saya :

Network 1			Network 2
IP Server 0	: 10.0.25.1 /16		IP Server 1	: 10.3.25.1 /16
Subnet	: 255.255.0.0		Subnet	: 255.255.0.0
IP PC 0	: 10.0.25.2 /16		IP PC 5	: 10.3.25.2 /16
Subnet	: 255.255.0.0		Subnet	: 255.255.0.0
IP PC 1	: 10.0.25.3 /16		IP PC 6	: 10.3.25.3 /16
Subnet	: 255.255.0.0		Subnet	: 255.255.0.0
IP PC 2	: 10.0.25.4 /16		IP PC 7	: 10.3.25.4 /16
Subnet	: 255.255.0.0		Subnet	: 255.255.0.0
IP PC 3	: 10.0.25.5 /16		IP PC 8	: 10.3.25.5 /16
Subnet	: 255.255.0.0		Subnet	: 255.255.0.0

Subneting /16	= 255.255.0.0
	= 11111111 . 11111111 . 00000000 . 00000000
Network ID	= 2^8 = 256
HOST ID	= 2^16 - 2 = 65536 - 2 = 65534
Blog Subnet	= 256 - 255 = 1

Network ID		HOST ID					BroadCast
10.0.0.0   10.1.0.0 10.2.0.0 10.3.0.0 10.4.0.0 --- s/d --- 10.255.0.0		10.0.0.1 10.1.0.1 10.2.0.1 10.3.0.1 10.4.0.1 --- s/d --- 10.255.0.1		s/d s/d s/d s/d s/d --- s/d	10.0.255.254 10.1.255.254 10.2.255.254 10.3.255.254 10.4.255.254 ---- s/d ---- 10.255.255.254		10.0.255.255 10.1.255.255 10.2.255.255 10.3.255.255 10.4.255.255 ----- s/d ----- 10.255.255.255

Dan disini adalah File yang sudah Saya buat . klik DISINI untuk download

Sekian dari saya .. Bila ada kesalahan saya mohon maaf yang sebesar - besar nya.

Wassalamu'alaikum wr wb

Laporan Membuat Website_Jendela Negeri

Assalamu'alaikum Wr Wb

Hai Sobat ... Jumpa lagi dengan saya... Kali ini saya akan membuat Tutorial membuat website JENDELA NEGERI .... kali ini saya menggunakan CMS Wordpress.. Dan hasilnya bisa di lihat DISINI 

Dan untuk TUTORIALNYA ... Bisa Anda Download DISINI

Sekian dan terima kasih dan sampai jumpa dipertemuan saya yang berikutnya. 

Belajar Membuat Website menggunakan BOOSTRAB

Belajar Membuat Website menggunakan BOOSTRAB

Oke kali ini saya dapat tugas guys dari dosen saya ..

Yang bikin kepala ane pusing ... dan gak bisa tidur semaleman guys...

Yaitu membuat website sederhana dengan menggunakan Boostrab..

Dan yang paling aku benci guys, yaitu network nya ... speed jaringannya ... 

lelet banget guys ... maklum didaerah pedesaan guys .. hehehe .. :-D
ma'af sambil curhat .. 

Langsung saja Download file.nya dibawah ini …

Dan Mainkan ..  ^_^  

Download file     DISINI 

Terima Kasih Semoga bermanfaat, ma'af jika ada kekurangan dan kesalahan ...
sampai jumpa di pertemuan yang selanjutnya .. ^_^  .

Contoh LayOut Tampilan

Layout

Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.
Contohnya pada Twitter memiliki elemen-elemen sebagai berikut:

Elemen Header

Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.

Elemen Box

Elemen pendukung box, yaitu dapat berupa foto, atau pun hal yang lainnya.

Elemen Sidebar / left side

Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Elemen Konten

Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

Elemen Footer

Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

Bagaimana kita dapat membuat layout umum seperti yang tampak pada gambar di atas? Sebelum membuat layout, tentunya kita terlebih dahulu harus mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar, kita tidak akan dapat membuat layout yang bagus.

Disini saya menggunakan pemanggilan file.nya css. Caranya simpan saja script tersebut dalam satu forder.
Dan dibawah ini adalah Script - script nya

HALAMAN Simpan dengan format Q2_header.html
<!DOCTYPE html> <html lang="en"> <head> <title>Twitter</title> <link href="header1.css" rel="stylesheet" type="text/css"/> <link href="navigation1.css" rel="stylesheet" type="text/css"/> <link href="box1.css" rel="stylesheet" type="text/css"/> <link href="leftside1.css" rel="stylesheet" type="text/css"/> <link href="content1.css" rel="stylesheet" type="text/css"/> <link href="box3.css" rel="stylesheet" type="text/css"/> <link href="box4.css" rel="stylesheet" type="text/css"/> <link href="footer1.css" rel="stylesheet" type="text/css"/> <body bgcolor="#8724F9"> <div class="header1" align="center"> Header </b> <div class="box1"> Box 2</b></div> <div class="box1"> Box 1</b></div> </div> <div class="leftside1" align="center"> Left Side </b></div> <div class="content1" align="center"> Content </b><br /> <div class="box3" align="center"> Box Content </b></div> <div class="box4"> Foto</b></div> </div> <div class="footer1" align="center"> Footer </b></div> </body> </html>

HEADER Simpan dengan format header1.css
.header1 { background-color: #7ADC25; width: 65%; height: 70px; font-family: "arial black"; border-radius: 10px; margin: 10px 230px; }

BOX 1 Simpan dengan format box1.css
.box1 { width: 6%; height: 40px; border: 2px solid black; float: right; margin: 10px 10px; }

BOX 3 Simpan dengan format box3.css
.box3 { width: 80%; height: 40px; border: 2px solid black; float: right; margin: 10px 10px; }

BOX 4 Simpan dengan format box4.css
.box4 { width: 10%; height: 40px; border: 2px solid black; margin: 10px 10px; float: left; }

CONTENT Simpan dengan format content1.css
.content1 { background-color: white; width: 50%; height: 470px; font-family: "arial black"; border-radius: 10px; margin: 10px 240px 10px 0px; float: right; }

LEFTSIDE Simpan dengan format leftside1.css
.leftside1 { background-color: #FC4E33; width: 14%; height: 470px; font-family: "arial black"; float: left; border-radius: 10px; margin: 10px 0px 0px 230px ; }

FOOTER Simpan dengan format footer1.css
.footer1 { background-color: #E9EF1E; width: 65%; height: 50px; font-family: "arial black"; border-radius: 10px; margin: 10px 230px; clear: both; }
 

Dan selesai ,... ^_^  Semoga bermanfaat ,... selamat mencoba ,.. semoga sukses ...
Sampai jumpa di Artikel saya yang selanjutnya ..   ^_^   .

Contoh Membuat formulir

CONTOH PEMBUATAN FORMULIR
Dibawah ini saya menggukan PHPdesigner untuk pembuatannya ...

Contoh Pembuatan Formulir Pertama (ke-1) 
Formulir Penerimaan Siswa Baru.
Dibawah ini adalah Script untuk membuat formulir ini.


<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="23041995" /> <title>Untitled 1</title> </head> <body align="center"> <table align="center"> <tr> <td colspan="2">           http://www.prudentschool.sch.id</td> </tr> <tr> <td><img align="left" src="yayasan.png" width="134" height="136" /></td> <td><font size="+2.5"><b>PANITIA PENERIMAAN SISWA BARU</b></font><br /> <font size="+3.5"><b>YAYASAN PENDIDIKAN ADHI PUTRA</b></font><br /> <font size="+1"><b>SMK Prudent School d/h. Pelita Bangsa (Managemen Perkantoran - Terakreditasi A)</b></font><br /> Jl. KH. Hasyim Ashari/Tugu Karya No.78, Poris Plawat Utara-Cipondoh-Kota Tanggerang <br /> No.Telp:021-5548883,Fax:021-56703627,Website:<a href="www.produntschool.sch.id">www.produntschool.sch.id</a>, Email:<a href="Info@produntschool.sch.id">Info@produntschool.sch.id</a><br /> </td> </tr> <tr> <td colspan="2"> <hr size="+4" color="black"/> </td> </tr> </table> <table align="center"> <form> <tr > <td> </td> <td> </td> <td ><font size="+2"><b><center> DATA SISWA</center> </b></font></td> </tr> <tr > <th align="left">SISWA</th> </tr> <tr> <td>Nama Lengkap Siswa</td> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr> <td>(sesuai ijazah SD / SMP)</td> </tr> <tr> <td>Nomor Induk Siswa Nasional     </td> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr> <td>Tempat dan Tanggal Lahir</td> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr> <td>Jenis Kelamin</td> <td>: </td> <td><select><option>1</option> <option>2</option> </select>   1.  Laki-laki         2.  Perempuan </td> </tr> <tr> <td>Agama</td> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>   1.  Islam     2.  Kristen Protestan    3.  Kristen Katolik    4.  Hindu    5.  Budha </td> </tr> <tr> <td>Anak ke</td> <td>: </td> <td><input type="text" size="30%"/>  Dari  <input type="text" size="30%"/>  Bersaudara</td> </tr> <tr> <td>Alamat Siswa</td> <td>: </td> <td><input type="text" size="40%"/>  RW  <input type="text" size="20%"/>   RT  <input type="text" size="17%"/> </td> </tr> <tr> <td> </td> <td> </td> <td> Kelurahan  <input type="text" size="17%"/>   Kecamatan  <input type="text" size="17%"/>   Kota/Kab  <input type="text" size="16%"/> </td> </tr> <tr> <td> </td> <td> </td> <td> No. Telp    <input type="text" size="17%"/>   Handphone  <input type="text" size="17%"/>   Kode pos  <input type="text" size="16%"/> </td> </tr> <tr> <td> </td> <td> </td> <td align="center"> (wajib diisi) </td> </tr> <tr> <th align="left">SEKOLAH SEBELUMNYA</th> </tr> <tr> <td align="left">Nama Sekolah</th> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr align="left"> <td >Alamat Sekolah</th> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr align="left"> <td>Nomor Ijazah SD/SMP</th> <td>: </td> <td><input type="text" size="60%"/>  Tahun Ijazah  <input type="text" size="20%"/></td> </tr> <tr align="left"> <td>Nomor SKHUN SD/SMP</th> <td>: </td> <td><input type="text" size="60%"/>  Tahun Ijazah  <input type="text" size="20%"/></td> </tr> <tr> <td><br /><br /></td> </tr> <tr> <th align="left">ORANG TUA</th> </tr> <tr> <td align="left">Nama Sekolah</td> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr align="left"> <td >Nama Orang Tua</td> </tr> <tr align="left"> <td>a.  Ayah</td> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr align="left"> <td>b.  Ibu</th> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr align="left"> <td>Alamat Orang Tua</th> <td>: </td> <td><input type="text" size="40%"/>  RW  <input type="text" size="20%"/>     RT  <input type="text" size="17%"/> </tr> <tr> <td> </td> <td> </td> <td> Kelurahan  <input type="text" size="17%"/>   Kecamatan  <input type="text" size="17%"/>   Kota/Kab  <input type="text" size="17%"/> </td> </tr> <tr> <td> </td> <td> </td> <td> No. Telp    <input type="text" size="17%"/>   Handphone  <input type="text" size="17%"/>   Kode pos  <input type="text" size="17%"/> </td> </tr> <tr align="left"> <td >Pekerjaan Orang tua</td> </tr> <tr align="left"> <td>a.  Ayah</td> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>   1. TNI/Polri     2. PNS    3. Pg.Swasta    4. Guru    5. Wirausaha    6. Lainya  <input type="text" size="13%"/> </td> </tr> <tr align="left"> <td>b.  Ibu</th> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>   1. TNI/Polri     2. PNS    3. Pg.Swasta    4. Guru    5. Wirausaha    6. Lainya  <input type="text" size="13%"/> </td> </tr> <tr> <td><br /><br /></td> </tr> <tr align="left"> <td >Pendidikan Terakhir Orang tua</td> </tr> <tr align="left"> <td>a.  Ayah</td> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select>   1. SD     2. SMP    3. SMA    4. DIPLOMA    5. SARJANA    6. Lainya  <input type="text" size="16%"/> </td> </tr> <tr align="left"> <td>b.  Ibu</th> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select>   1. SD     2. SMP    3. SMA    4. DIPLOMA    5. SARJANA    6. Lainya  <input type="text" size="16%"/> </td> </tr> <tr> <td><br /><br /></td> </tr> <tr > <th align="left">WALI</th> </tr> <tr> <td align="left">Nama Wali</td> <td>: </td> <td><input type="text" size="100%"/></td> </tr> <tr > <td align="left">Hubungan dengan Wali </th> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> </select>   1. Kakek/Nenek    2. Paman/Bibi    3. Kakak    4. Lainya  <input type="text" size="33%"/> </td> </tr> <tr> <td align="left">Alamat Wali</td> <td>: </td> <td><input type="text" size="40%"/>  RW  <input type="text" size="20%"/>   RT  <input type="text" size="18%"/> </td> </tr> <tr> <td></td> <td> </td> <td> Kelurahan  <input type="text" size="17%"/>   Kecamatan  <input type="text" size="17%"/>   Kota/Kab  <input type="text" size="17%"/> </td> </tr> <tr align="left"> <td>Pekerjaan Wali</th> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>   1. TNI/Polri     2. PNS    3. Pg.Swasta    4. Guru    5. Wirausaha    6. Lainya  <input type="text" size="14"/> </td> </tr> <tr align="left"> <td>Pendidikan Terakhir Wali</td> <td>: </td> <td><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select>   1. SD     2. SMP    3. SMA    4. DIPLOMA    5. SARJANA    6. Lainya  <input type="text" size="17%"/> </td> </tr> <tr> <td><br /></td> <tr> <tr> <td> </td> <td> </td> <td align="right"> Tanggerang  <input type="text" size="18%"/>  2010 </td> </tr> <tr> <td><br /><br /><br /></td> <tr> <tr> <td> </td> <td> </td> <td align="center"> Orang Tua                                                      Calon siswa </td> </tr> <tr> <td><br /><br /><br /><br /><br /></td> <tr> <td> </td> <td> </td> <td align="center"> ________________________                          ________________________ </td> </tr> </form> </table> </body> </html>

Kemudian Bawah ini adalah Screenshoot saya waktu membuat di PHPdesigner

Dan yang dibawah ini adalah Formulir kedua  (ke-2)
Contoh pada pendaftaran Universitas Negeri Malang

Script dari formulir tersebut adalah :

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="23041995" /> <title>Formulir Pendaftaran UM</title> </head> <body align="center"> <table style="border: solid blue 3px;" align="center" bgcolor="white"> <tr> <td><br /><br /><img align="left" src="images.png" width="134" height="136" /></td> <td colspan="4" align="left"><font size="+2.5">KEMENTRIAN PENDIDIKAN DAN KEBUDAYAAN</font><br /> <font size="+2.5"><b>UNIVERSITAS NEGERI MALANG (UM)</b></font><br /> <font size="+2"><b>Pendidikan Aolikasi Bisnis dan Teknologi Informasi</b></font><br /> Jl. Semarang 5 Malang, Telp. (0341)587988 Fax. (0341)587988 <br /> Website: <a href="http://pabti.um.ac.id">http://pabti.um.ac.id</a> Email: <a href="Info@pabti.um.ac.id">Info@pabti.um.ac.id</a><br /> </td> </tr> <form> <tr > <td colspan="5"><hr size="+6" color="black" /> <hr color="black" /> </td> </tr> <tr > <td colspan="5"><br /><font size="+2"><b><u><center> FORMULIR PENDAFTARAN</center> </u></b><br /></font></td> </tr> <tr> <td align="left">Nomor Pendaftaran</td> <td colspan="2" align="right">                   : </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Nama Lengkap</td> <td colspan="2"align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Tempat/Tgl.Lahir</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Agama</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select><font color="red">[ isi angka ]</font></td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="2" align="left">(1.  Islam     2.  Kristen    3.  Katolik    4.  Hindu    5.  Budha    6.  Lain-lain) </td> </tr> <tr> <td align="left">Alamat Asal</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">RT / RW</td> <td colspan="2"align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Nomor Telepon</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Alamat Di Malang</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Nomor Telepon</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Asal Sekolah</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Agama</td> <td colspan="2" align="right">: </td> <td align="left"><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select><font color="red">[ isi angka ]</font></td> </tr> <tr> <td> </td> <td colspan="2" > </td> <td colspan="2" align="left">(1.  IPA     2.  IPS    3.  STM    4.  SMEA    5.  Lain-lain) </td> </tr> <tr> <td align="left">Alamat Sekolah</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Jumlah NIlai UN</td> <td colspan="2" align="right">: </td> <td align="left"><input type="text" size="10%"/>             Jumlah Mata Pelajaran UN :<input type="text" size="10%"/></td> </tr> <tr> <td align="left">Jumlah NIlai STTB</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="10%"/>             Jumlah Mata Pelajaran STTB :<input type="text" size="10%"/></td> </tr> <tr> <td align="left">Tahun Kelulusan</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Nama Orang Tua</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Pekerjaan Orang Tua</td> <td colspan="2" align="right" >: </td> <td align="left"><select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select><font color="red">[ isi angka ]</font></td> </tr> <tr> <td > </td> <td colspan="2"> </td> <td colspan="2" align="left">(1.  PNS    2.  ABRI    3.  BUMN    4.  Swasta    5.  Tani    6.  Lain-lain) </td> </tr> <tr> <td align="left">Alamat Orang Tua</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%"/></td> </tr> <tr> <td align="left">Nomor Telephon</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left"><input type="text" size="120%" color="red"/></td> </tr> <tr> <td align="left">Program Study Yang Dipilih</td> <td colspan="2" align="right">: </td> <td colspan="2" align="left">( Pilih Salah Satu )</td> </tr> <tr > <td colspan="5" align="left"><ul>Program Pendidikan 1 Tahun : <select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select><font color="red">[ isi angka ]</font> <br />      1.  Information Teccnology (IFT) <br />      2.  Computer for Accounting (CAC) <br />      3.  Computer English And Banking (CEB) <br />      4.  Desaign Graphic (DG) <br />Program Pendidikan 2 Tahun : <select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select><font color="red">[ isi angka ]</font> <br />      1.  Information Teccnology (IFT) <br />      2.  Computer for Accounting (CAC) <br />      3.  Computer English And Banking (CEB) <br />      4.  Desaign Graphic and Multimedia (DGM) </td> </tr> <tr > <td colspan="5" align="left">Program Pendidikan 1 Tahun : <select><option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select><font color="red">[ isi angka ]</font> <br />      1. Sekolah <br />      2. Surat Kabar / Radio <br />      3. Brosur <br />      4. Spanduk <br />      5. Teman / Saudara <br />      6. Lain - lain  <input type="text" size="20%"/></td> </tr> <tr> <td colspan="5" align="right">Malang,   <input type="text" size="30%"</td> </tr> <tr colspan="5"> <td colspan="4"> <table border="1"> <tr> <td align="left"><b><u>Catatan : </u></b> <br />Tulis dengan huruf kapital <br />Setelah diisi lengkap kirimkan formulir ke alamat email PABTI <br />Email      : info@pabti.um.ac.id <br />Subject   : Form pendaftaran 2012 (Nama Anda) </td> </tr> </table> </td> <td align="right"><br /><br />___________________________________</td> </tr> <tr> <td><br /><br /></td> </tr> </table> </body> </html>

Kemudian Bawah ini adalah Screenshoot saya waktu membuat di PHPdesigner

Dan kurang lebihnya saya mohon maaf, jika ada yang salah alangkah baiknya di utarakan ,..
agar saya dapat memperbaikinya  ^_^ 

Belajar Form Di HTML

Belajar Form Di HTML Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web.Pada tutorial belajar HTML: Belajar form di HTML ini kita akan membahas cara penggunakan tag form di dalam HTML.

---

Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya akan menjelaskannya pada tutorial tentang PHP dan JavaScript.
Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.

---

Pengertian tag <form>

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Struktur dasar form akan terlihat sebagai berikut:

<form action="prosesdata.php" method="post">    ...isi form... </form>

---

Mengenal tag <input>

Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:

• <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text

• <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.

• <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.

• <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.

• <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

Perhatikan juga bahwa seperti tag <img> dan <br>, tag <input> juga merupakan tag yang berdiri sendiri dan tidak membutuhkan penutup tag.

---

Mengenal tag <textarea>

Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:

<textarea rows="5" cols="20">     Text yang diisi dapat mencapai banyak baris </textarea>

Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.

---

Mengenal tag <select>

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.
Contoh penggunaan tag select adalah sebagai berikut:

<select>     <option>Pilihan 1</option>     <option>Pilihan 2</option>     <option value="pilihan ketiga">Pilihan 3</option> </select>

Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form.
Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi nilai awal. Contoh penggunaanya adalah sebagai berikut:

<select>     <option>Pilihan 1</option>     <option>Pilihan 2</option>     <option value="pilihan ketiga" selected>Pilihan 3</option> </select>

---

Mengenal Atribut: Name

Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya adalah sebagai berikut:

<input type="text" name="username"> <input type="text" name="email">

Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing akan dibedakan menurut atribut name.

---

Akhirnya, Sebuah Form Utuh

Merangkum seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk membuat sebuah form HTML. Silahkan buka text editor, dan tuliskan kode HTML berikut, lalu save sebagai formulir.html

Contoh penggunaan tag form pada sign in di YAHOO:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="23041995" /> <title>Untitled 2</title> </head> <body bgcolor="#8CE3E6"> <font style="font-family:Rosewood Std Regular;" color="#0931C0" size="+4">YAHOO</font><br /> <font style="font-family:Califas-Wide;" color="#0931C0" size="+1">INDONESIA</font> <div style="overflow: auto; border: 2px solid #CCC; margin: auto; padding: 3px; width: 19%; height: 390px; background-color: #DCE1DE;"> <table align="center"> <tr> <td align="center"><font size='+3'><b>YAHoO!</b></font><br />INDONESIA</th> </tr> <tr align="left"> <td><input size="33" type="text" name="nama id" title="Nama Pengguna Yahoo" style="color:#888;" value="Nama Pengguna Yahoo" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> </td> </tr> <tr align="left"> <td><input size="33" type="text" name="nama id" title="Sandi" style="color:#888;" value="Kata Sandi" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> </td> </tr> <tr align="left"> <td><input type="checkbox" name="masuk" >selalu sign in</td> </tr> <tr align="center"> <td><input type="submit" title="Sign in" name="masuk" value="Sig in"/></td> </tr> <tr align="left"> <td><font size="+0.05" color='blue' style="font-family:calibri;"><a href="https://edit.yahoo.com/forgotroot?done=https%3A%2F%2Fmail.yahoo.com&src=&partner=reg&intl=id&lang=id-ID">Tidak dapat mengakses account</a><br /><a href="https://login.yahoo.com/config/login?.src=ym&.intl=id&.lang=id-ID&.done=https%3A%2F%2Fmail.yahoo.com&.help=1">Bantuan sign in</a></font></td> <tr align="center"> <td>ATAU<hr /> <br /></td> </tr> <tr bgcolor="#0C64F2" align="center"> <td><a href="yahoo 2.htm"><font color='white' title="New Account" style="font-family:calibri;">Buat Account Baru</font></a></td> <tr> <td><br /><hr /> </td> </tr> <tr align="center"> <td>Masuk dengan <font color="blue"><a href="http://www.facebook.com">Facebook</a></font> atau <br /><font color="blue"><a href="htttp://www.google.com">Google</a></font></td> </tr> </table> </right> </div> </body> </html>

Dan dibawah ini adalah hasil dari script DI ATAS

YAHoO! INDONESIA

selalu sign in

Tidak dapat mengakses account Bantuan sign in

ATAU

Buat Account Baru

Masuk dengan Facebook atau Google

Dan ini Print sceen saat di PHP Designne

 

Kemudian kemudian dibawah ini adalah script kedua dari pengisian DAFTAR DI YAHOO

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="23041995" /> <title>Untitled 1</title> </head> <body> <div style="overflow: auto; border: 2px solid #CCC; margin: auto; padding: 3px; width: 50%; height: 650px; background-color: #DCE1DE; "> <center> <font size="+4"><b>YAHoO!</b></font><br />INDONESIA</center> <table align="center"> <form> <tr align="left"> <th><font size="+2"><br />DAFTAR</font></th> <td align="right"><br /><select name="bahasa"><option value="bahasa" selected="selected">Bahasa indonesia(indonesia)</option> <option>Bahasa melayu(indonesia)</option> <option>Bahasa melayu(Philippines)</option> <option>Bahasa melayu(Thailand)</option> <option>Bahasa melayu(malaysia)</option> <option>Cestina(Ceska republika)</option> <option>dansk(Denmark)</option> <option>eeti(Eesti)</option> <option>English(Australia)</option> <option>English(Canada)</option> <option>English(English)</option> <option>Eenglish(Singapore)</option> <option>espanyol(Philippines)</option> <option>espanyol(Argentina)</option> <option>Arabic(Turkie)</option> <option>Arabic(Iran)</option> <option>Arabic(Palestine)</option> <option>Arabic(Arab)</option></select></td> </tr> <tr> <td><br /><input size="33" type="text" name="nama depan" title="nama depan" style="color:#888;" value="Nama Depan" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> </td> <td align="right"><br /><input size="33" type="text" name="nama belakang" title="nama belakang" style="color:#888;" value="Nama Belakang" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> </td> </tr> <tr align="left"> <td colspan="2"><br /><input size="53" type="text" name="nama pengguna" title="nama pengguna" style="color:#888;" value="Nama Pengguna" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value="Nama Pengguna Yahoo"; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> <select name="@yahoo.co.id"> <option value="" selected="selected">@yahoo.co.id</option> <option value="yahoo">@yahoo.com</option></select> </td> </tr> <tr align="left"> <td colspan="2"><br /><input size="72" type="text" name="kata sandi" title="Sandi" style="color:#888;" value="Kata Sandi" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> </tr> <tr align="left"> <td><input type="checkbox" name="centang sandi">Tampilkan kata sandi</td> </tr> <tr align="left"> <td><br /> <input size="33" type="text" name="No Telephon" title="No Teephon" style="color:#888;" value="No Telephon" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> </td> </tr> <tr align="left"> <td colspan="2"><br />Tanggal lahir<select name="Tanggal"><option value="" selected="selected">Tanggal</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option></select> <select name="Bulan"><option value="" selected="selected">Bulan</option> <option>Januari</option> <option>Februari</option> <option>Maret</option> <option>April</option> <option>Mei</option> <option>Juni</option> <option>Juli</option> <option>Agustus</option> <option>September</option> <option>Oktober</option> <option>November</option> <option>Desember</option></select> <select name="Tahun"><option value="" selected="selected">Tahun</option> <option>2001</option> <option>2000</option> <option>1999</option> <option>1998</option> <option>1997</option> <option>1996</option> <option>1995</option> <option>1994</option> <option>1993</option> <option>1992</option> <option>1991</option> <option>1990</option> <option>1989</option> <option>1988</option> <option>1987</option> <option>1986</option> <option>1985</option> <option>1984</option> <option>1983</option> <option>1982</option> <option>1981</option> <option>1980</option></select> </tr> <tr align="left"> <td><br /><input type="radio" name="Kelamin" size="10"/>Laki - Laki<input type="radio" name="Kelamin" size="10"/>Perempuan</td> </tr> <br /> <tr align="left"> <td colspan="2"><br /> <input size="33" type="text" name="Nomor Pemulihan" title="Nomor Pemulihan" style="color:#888;" value="Nomor Pemulihan Oposional" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> <input size="33" type="text" name="Hubungan" title="Hubungan" style="color:#888;" value="Hubungan" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> <script> function inputFocus(i){ if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } } function inputBlur(i){ if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } } </script> </td> <tr align="center"> <td colspan="2"><br /> Saya menyetujui <a href="http://info.yahoo.com/legal/id/yahoo/mail/id-id/">ketentuan Yahoo</a> dan <a href="http://info.yahoo.com/privacy/id/yahoo/">Privasi</a></td> </tr> <tr align="center"> <td colspan="2"><br /><input type="submit" name="Buat" value="Buat Akun"/></td> </tr> </form> </table> </div> </body> </html>

 
Kemudian dibawah ini adalah hasil dari script DI ATAS

YAHoO!
INDONESIA

DAFTAR	Bahasa indonesia(indonesia) Bahasa melayu(indonesia) Bahasa melayu(Philippines) Bahasa melayu(Thailand) Bahasa melayu(malaysia) Cestina(Ceska republika) dansk(Denmark) eeti(Eesti) English(Australia) English(Canada) English(English) Eenglish(Singapore) espanyol(Philippines) espanyol(Argentina) Arabic(Turkie) Arabic(Iran) Arabic(Palestine) Arabic(Arab)
@yahoo.co.id @yahoo.com
Tampilkan kata sandi
Tanggal lahirTanggal 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Bulan Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember Tahun 2001 2000 1999 1998 1997 1996 1995 1994 1993 1992 1991 1990 1989 1988 1987 1986 1985 1984 1983 1982 1981 1980
Laki - LakiPerempuan
Saya menyetujui ketentuan Yahoo dan Privasi

 
Dan dibawah ini adalah hasil Print sceen saat di PHP Designer

Dan itulah sedikit dari cara pembuatan form di HTML ... alangkah lebih baiknya saya meminta masuka atau komentarnya dari teman-teman .... agar lebih baik dari yang diatas itu .... jika ada yang salah ... saya minta maaf yang sebesar-besarnya yaaaa ...  ^_^   . Thanks ... Sampai jumpa diartikel saya yang berikutnya yaa ..  ^_^  Salam Sukses Sahabat Ku Semua. . . . !