How To Create Input And Output Form Using PHP

in #utopian-io • 8 years ago (edited)

What Will I Learn?

  • You will learn how to create input and output form using PHP
  • You will learn how to create structure tabel using PHP
  • You will learn how to simpel website

Requirements

  • you have to understand about PHP basic programming
  • You should be able to make connections between the two forms
  • You should be able to create a table structure and understand the input options

Difficulty

  • Basic

Tutorial Contents

input and outup forms are two indispensable components on a website page, for example on a ticket sales website, an online shop website, and more. the function of the input form is to enter data by the visitor and the output form serves to display the data that has been entered on the input form. this time i will teach how to make both form.

  • The first step you should do is to open your text editor.
    image.png
    I use notepad ++
  • then you create the input form first, type the script below in your text editor and save it with the name input.php
<html>
<head>
<title>Input</title>
</head>
<body>
<form action="output.php" method="post">
<table border="1" align="center">
<tr>
    <td>Nama Barang</td>
    <td>:</td>
    <td><input type="text" name="nama"/></td>
</tr>
<tr>
    <td>Ukuran Barang</td>
    <td>:</td>
    <td><input type="radio" name="ukuran" value="kecil" />KECIL
     <input type="radio" name="ukuran" value="sedang" />SEDANG
     <input type="radio" name="ukuran" value="besar" />BESAR</td>
</tr>
<tr>
    <td>Warna Barang</td>
    <td>:</td>
    <td><select name="warna">
       <option value="biru">BIRU</option>
         <option value="kuning">KUNING</option>
         <option value="abu">ABU-ABU</option>
         <option value="ungu">UNGU</option>
         <option value="merahmuda">MERAH MUDA</option>
         <option value="putih">PUTIH</option>
         <option value="hitam">HITAM</option>
     </select></td>
</tr>
<tr>
    <td>Spesifikasi</td>
    <td>:</td>
    <td><input type="text" name="spesi"/></td>
</tr>
<tr>
    <td>Stok Barang</td>
    <td>:</td>
    <td><input type="number" name="stok" /></td>
</tr>
<tr>
     <td colspan="3" align="center"><input type="submit" name="kirim"   value="Kirim" /><input type="reset" name="batal" value="batal" /></td>
</tr>
</table>
</form>
</body>
</html>
  • okay i'll explain a bit about the script above.
  • this script works to give an action to the output form we will create later.
<form action="output.php" method="post">
<table border="1" align="center">
  • below is a script that works to create a variable whose value we will fill in the form
<td>Nama Barang</td> <td>:</td><td><input type="text" name="nama"/></td>
  • The script below serves to make an option in which already have options that have been provided.
<td>Warna Barang</td>
    <td>:</td>
    <td><select name="warna">
       <option value="biru">BIRU</option>
         <option value="kuning">KUNING</option>
         <option value="abu">ABU-ABU</option>
         <option value="ungu">UNGU</option>
         <option value="merahmuda">MERAH MUDA</option>
         <option value="putih">PUTIH</option>
         <option value="hitam">HITAM</option>
     </select></td>

for example as in the picture below

image.png

  • the next step is to create an output form on our web page, type the script below in your text editor and save it with the name output.php
<html>
<head>
<title>Output</title>
</head>
<body>
<?php
$nama  = $_POST ["nama"];
$ukuran  = $_POST ["ukuran"];
$warna = $_POST ["warna"];
$spesi   = $_POST ["spesi"];
$stok   = $_POST ["stok"];
?>
<table border="1" align="center">
<tr>
     <td width="117">Nama Barang</td>
     <td width="14">:</td>
     <td width="218"><? echo " $nama"   ?></td>
</tr>
<tr>
     <td>Ukuran Barang</td>
     <td>:</td>
     <td><? echo " $ukuran"  ?></td>
</tr>
<tr>
     <td>Warna Barang</td>
     <td>:</td>
     <td><? echo " $warna"   ?></td>
</tr>
<tr>
     <td>Spesifikasi</td>
     <td>:</td>
     <td><? echo " $spesi"   ?></td>
</tr>
<tr>
    <td>Stok Brang</td>
    <td>:</td>
    <td><? echo " $stok"   ?></td>
</tr>
<tr>
     <td align="center" colspan="3"><a href="input.php">BACK </a></td>
</tr>
</table>
</body>
</html>
  • I will explain a bit about the script above
  • this script works to call the input link that we have entered on the input form.
<?php
$nama  = $_POST ["nama"];
$ukuran  = $_POST ["ukuran"];
$warna = $_POST ["warna"];
$spesi   = $_POST ["spesi"];
$stok   = $_POST ["stok"];
?>

  • then, below is the script to determine the size and shape of the table
    <td width="117">
    <td width="14">
    <td width="218">

  • then for the "BACK" button that takes us back from the output page to the input page
    <td align="center" colspan="3"><a href="input.php">BACK </a></td>

  • input form and output form have been successfully created, keep both php files we have created above in the same folder, as in the picture below.

    image.png

  • then try running the input form you have created by typing the address of your input.php file in your browser search field as shown below.
    image.png

    adjust the name of your folder

  • it will look like this
    image.png
    if it appears like the picture above means the input form has been successful and no error, now we try to fill in the data on the input form, whether the data will we show later on the output form ..?
  • okay, the data we put on the input form we have successfully put on the output form, it means we have successfully created the input form and output form, and also we have successfully connect them.
    Screenshot_8.jpg
    data that appears on the output form in accordance with the data we have entered on the input form we can see in the picture below
  • okay ,,, the tutorial is over, now it's your turn to try it.


SORRY WHETHER THERE IS LACK AND SENSE

Curriculum


Posted on Utopian.io - Rewarding Open Source Contributors

#tutorials #php #opensource #aceh
8 years ago in #utopian-io by
$22.31
  • Past Payouts $22.31
  • - Author $16.21
  • - Curators $6.10
19 votes
Reply 4
Sort:  
  • Trending
    • [-]
     8 years ago 

    @lapulga, No matter approved or not, I upvote and support you.

    $0.00
      Reply
      [-]
       8 years ago 

      thank you

      $0.00
        Reply
        [-]
         8 years ago 

        Thank you for the contribution. It has been approved.

        You can contact us on Discord.
        [utopian-moderator]

        $0.00
          Reply
          [-]
           8 years ago 

          Hey @lapulga I am @utopian-io. I have just upvoted you!

          Achievements

          • You have less than 500 followers. Just gave you a gift to help you succeed!
          • Seems like you contribute quite often. AMAZING!

          Suggestions

          • Contribute more often to get higher and higher rewards. I wish to see you often!
          • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

          Get Noticed!

          • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

          Community-Driven Witness!

          I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

          mooncryption-utopian-witness-gif

          Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

          $0.00
            Reply

            Coin Marketplace

            STEEM 0.04
            TRX 0.32
            JST 0.087
            BTC 59763.81
            ETH 1570.73
            USDT 1.00
            SBD 0.42