Selasa, 05 Mei 2015

Tutorial Membuat Form Input Menggunakan Notepad++ Xampp dan Browser

1. Pertama Kita buka Xampp Control Panel lalu nyalakan Apache dan MySQL dengan mengklik start.


2. Setelah itu kita buka Browser dan ketik localhost/phpmyadmin pada URL maka akan keluar gambar dibawah ini. Selanjutnya klik Databases lalu buat database dengan nama Form dan klik Create.


3. Selanjutnya kita buat tabel dalam database Form dengan nama Matakuliah dan dengan jumlah 4 kolom.


4. Selanjutnya kita isi kolom pada tabel Matakuliah seperti gambar dibawah dan klik save.


5. Setelah itu klik structure untuk melihat kolom yang telah kita buat diatas


6. Lalu buka Notepad++ dan ketik coding pada gambar dibawah ini untuk membuat tampilan Form nya. Setelah itu save dan beri nama form.html, simpan dalam folder C:\Xampp\htdocs.


<html></html>
Berfungsi untuk membuat file bertipe html.
<head>
<title> </title>
</head>
Berfungsi sebagai kepala web dan memberikan nama halaman web.
<form id = "form1" name="form1" method="POST" action="matkul.php">
Berfungsi untuk membuat form dengan nama form1 , metodenya post dan dan dikoneksikan ke database.php.
<input type = "int" name = "kd_matkul" id = "kd_matkul"> <br/>
Berfungsi untuk membuat kolom input dan akan diinput kedalam database dengan kolom kd_matkul.
<input type = "submit" name = "submit" value = "submit"> <br/>
Berfungsi untuk membuat button submit.
</br>
Berfungsi untuk membuat baris baru/enter.
<pre></pre>

Berfungsi untuk membuat semua format tulisan yang ada pada notepad++ sesuai dengan yang akan ditampilkan


7. Selanjutnya untuk membuat koneksi antara form dengan database. Ketikkan koding yang ada dibawah ini setelah itu save dengan nama matkul.php dalam folder C:\Xampp\htdocs.


<?php
Berfungsi untuk membuat file berbentuk php dan diakhiri dengan ?>
$kd_matkul = $_POST ['kd_matkul'];
Berfungsi untuk  membuat variabel kd_matkul yang akan di post ke database dengan kolom kd_matkul
$connect = mysql_connect("localhost","root","");
Berfungsi untuk untuk mengkoneksikan ke localhost
Mysql_select_db(“Form”)
Berfungsi untuk memilih database dengan nama “Form”
$sql=”insert into Matakuliah values(‘$kd_matkul’,’$nm_matkul’,’$nm_dosen’,’$sks’)”;

Berfungsi untuk menginput kedalam table “Matakuliah” sesuai dengan nama atributnya.

8. Selanjutnya buka Browser dan ketikkan pada URL localhost/form.html maka akan muncul form seperti gambar dibawah ini, isi form tersebut dan klik submit.


9. Setelah klik submit maka akan muncul gambar seperti dibawah ini.



10. Selanjutnya kita cek apakah data masuk kedalam database atau tidak, buka localhost/phpmyadmin pilih database Form lalu klik Browse maka akan muncul seperti gambar dibawah ini.


Tidak ada komentar:

Posting Komentar