html table to mysql

Dear Expert,

I want to have data entry to server with goal below:
1.have two input box and one button
      - Input1(Brand Name): get data from MySQL
      - Inp;ut2(Price): input by user via html
      - button1 (Add Data2Table): Add data to same html table by using javascript

2. have one button for transfer all data in html table to MySQL using php

Note: the data in table can be delete and update.

Thanks,
Rada
arkam chouAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dan CraciunIT ConsultantCommented:
The "simple" way would be to use a framework that has scaffolds for CRUD (create, read, update, delete) operations.

The good news is that most frameworks are capable of that.
The bad news is that you're going to have a steep learning curve.

Examples:
Yii: http://www.sitepoint.com/build-a-crud-app-with-yii-in-minutes/
Laravel: https://scotch.io/tutorials/simple-laravel-crud-with-resource-controllers
CakePHP: http://www.php-dev-zone.com/2013/08/crud-in-cakephp-part-1.html

HTH,
Dan
0
arkam chouAuthor Commented:
Hello Dan,

Thanks you so much for you support. I am first with web programming, It look really hard for me. I am really struck on how to write data from html table to mysql.
0
NerdsOfTechTechnology ScientistCommented:
Here's a couple more methods:

1. Add entries into a spreadsheet/Excel and IMPORT into mySQL

-or-

2. Install/Configure phpMyAdmin to insert into your table directly to a temp (development) table or permanent table (production)
http://www.phpmyadmin.net/home_page/index.php

This is assuming that the entry is done internally
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

arkam chouAuthor Commented:
Hello Sir,

I need to input from html.
0
NerdsOfTechTechnology ScientistCommented:
html is a markup language.

you can create a HTML <FORM> and have the action point to a PHP-based processing page.

Please clarify what else you want to occur.

You can add a row dynamically to the html via javascript or a framework (like jquery) and have the new from fields set as an array-----thus, allowing your processing page that is called when the user presses the button to process the fields as array values.
0
NerdsOfTechTechnology ScientistCommented:
for this to work you need:

1. a HTML form built on PHP or Server-side code with a javascript framework or function to facilitate the row adding.
2. a PHP or Server-side processing page.
3. a mySQL or other database.
0
Ray PaseurCommented:
The thing you're talking about is called a "table maintenance" application.  It is a standard part of every web development curriculum, with very well-understood design guidelines.

If you're new to web development with PHP and MySQL this article can help you find good learning resources.  Perhaps more importantly, it can help you avoid the many bad examples that litter the internet.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html

PHP has some guidance on how to use forms here:
http://php.net/manual/en/tutorial.php

Once you have a foundation, this article shows the essential moving parts of a table maintenance application.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_12335-PHP-and-MySQLi-Table-Maintenance.html
0
Slick812Commented:
greetings sokrada, , Looked at your question and you need to - "Add data to same html table by using javascript"

You can do this with javascript, , however there is no way for us experts to know what to suggest , because you do not give use enough "Code" information.  You say this - "the data in table can be delete and update", , so this page must be somewhat complex. . .  If you can, please show us the Page code for your page with the HTML <table>, and the methods you may use for the "table can be delete and update" concerns.
0
Slick812Commented:
maybe like this -
<!DOCTYPE html>
<html><head><title>Update Table wid JS</title>
<style>
body {background: #ffe8d0;}
.updater {background: #d0e8ff; width: 13em; border:1px solid #3b3;}
.updater th {background: #fff; color: #b99;}
</style>
<script>/* <![CDATA[ */
function id2ob(elmt1){return document.getElementById(elmt1);}
if(document.all)id2ob=function(elmt1){return document.all[elmt1];}


function updater(){
// get values from inputs
var brand1 = id2ob("brand").value;
if (brand1.length < 1) brand1 = "None";
var price1 = id2ob("price").value;
if (price1.length < 1) price1 = "00.00";
//alert("Updater button "+brand1+" - "+price1);

// get the <tbody>
var tbody1 = id2ob("tbd1");
// insert a Row
var tr1 = tbody1.insertRow(tbody1.rows.length);
// create and add 2 cells
var td1  = tr1.insertCell(0);
// add some text to the new <td>
var tx  = document.createTextNode(price1)
td1.appendChild(tx);
td1  = tr1.insertCell(0);
tx  = document.createTextNode(brand1)
td1.appendChild(tx);
// please Note: first <td> added will be LAST cell in the row
}

/* ]]> */</script>
</head>
<body><h3>Update an HTML Table</h3>
<table id="tbl1" class="updater">
  <thead>
  <tr><th>Brand Name</th><th>Price</th></tr>
  </thead>
  <tbody id = "tbd1">
  <tr>
  <td>Kool</td><td>17.50</td>
  </tr>
  <tr>
  <td>Broke</td><td>0.10</td>
  </tr>
  <tr>
  <td>Strike</td><td>22.22</td>
  </tr>
  <tr>
  <td>Jump High</td><td>43.21</td>
  </tr>
  </tbody>
</table>
<hr style="border-color: #d0e8ff;">
Brand Name here - <input type="text" id="brand" value="Next" /><br />
Price here - <input type="text" id="price" value="11.11" style="margin-left: 3.5em;" /><br />
<button onclick="updater()">Add Brand to table</button>
</body></html>

Open in new window

0
arkam chouAuthor Commented:
Dear Expert NerdsOfTech,
your guide is right, but I don't know how to transfer data from html to mysql.

--------------------------------------------------------------------------------------------------------------
Dear Ray Paseur,
Thanks for your reference. I don't like to ask before don't study much too but I need it for this small purpose first.

--------------------------------------------------------------------------------------------------------------
Dear Expert Slick812,
I want to like this and then have one button for transfer the data in table to MySQL using php or other.
0
Ray PaseurCommented:
For some reason, PHP is the only programming language that people think they can use before they learn the language.  Nobody tries to write in C++ or Java until they have taken a course in C++ or Java.  I don't understand why PHP is in this unique niche.  It has at least as much learning curve as other programming languages.

What we have here seems to not be a question, so much as a requirement for application development.  We can show you the principles, but when it comes to the specific implementations, that part is your responsibility.  We are just volunteers who answer questions and provide teaching examples.

Based on your responses, it appears that your best path to a good solution would be to hire a professional developer.  You either need to do that, or take the personal study time to learn all of the things a professional developer already knows.  That will take months if not years, so spending a little money for professional work will surely be the fastest way to get results.  It's also likely to get you better results!  As the great fire fighter Red Adair famously said, "If you think it's expensive to hire a professional, just wait till you hire an amateur!"

If you have any specific questions about the links or articles I posted above, I'll be glad to answer them.  Best of luck with your project, ~Ray
0
Slick812Commented:
@sokrada , , I read your last comment as ID: 40734963 , and The part you have for me is -
    "I want to like this and then have one button for transfer the data in table to MySQL using php or other. "

I only understand your words here, , a SMALL amount, I am NOT clear about what you may mean when you say -
       "transfer the data in table to MySQL using php or other"

But I am Not able to see what your PAGE CODE may be for your <table>, I just used a two two column <table> in my example code above. You seem to have run that code, and it worked for you, , because you say - "I want to like this"

I asked you before, and I will ask again

Can you SHOW us what you have in PHP and - or HTML as the CODE you use for your Page?

If you can please tell us about your saying -
    "Note: the data in table can be delete and update."
you have said some about the "update" part, but nothing about the "delete" from <table> part. Is this code you already have? ? Or is this code you need to have help with?

It seems that English is not your first language, if you can, , try and explain more, , and talk more about what you use and know about on your PHP server, especially about the part in your question -
      " - Input1(Brand Name): get data from MySQL"

can you show us, , or tell us about the PHP code for your MySQL , like -
    $mysqli = new mysqli('localhost', 'user', 'password', 'dataBase');

that you use or know about.
We can not try and help much, if we do not know the parts of your code you may already have written.
0
arkam chouAuthor Commented:
Dear Expert Slick812,

Thanks you so much for you support, I am sorry about my English word. I am not good of it. Please find below of the code. My purpose is that
<!DOCTYPE html>
<html lang=en>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="test/javascript" scr="jquery.js"></script>
</head>
<body>

<?php
 echo "Brand";
 $connection=mysqli_connect("localhost","root","","imsresearch") or die ("message");
 $query="select brandID, brandNameEN from tblbrand order by brandNameEN";
 $result=mysqli_query($connection,$query);
 if (mysqli_num_rows($result)>0){
      echo "<select name=brand id=brand>";
      while($row=mysqli_fetch_assoc($result)){
            echo "<option value=".$row[brandID].">";
            echo $row["brandNameEN"];
            echo "</option>";
      }
      echo "</select>";
    }else{
      echo "Null";
    }
 echo "Price";
 echo "<input type='text' name='price' id='price'>";
 echo "<input type='button' name='AddToHTML' value='AddToHTML' id='AddToHTML'>";
 ?>

 <table id="HTMLTable" border="1">
      <thead>
            <tr>
                  <td>Brand</td>
                  <td>Price</td>
            </tr>
      </thead>
      <tbody>
      </tbody>
</table>
<input type="button" value="transfer data from HTML Table to MySQL" id="HTMLtoMySQL">
<script>
$("#AddToHTML").click(function(){
      $("#HTMLTable").find("tbody").append("<tr><td>"+ $("#brand").val() + "</td><td>" + $("#price").val() + "</td></tr>");
})
</script>
</body>
</html>


------------------------------------------------------------------------
@sokrada , , I read your last comment as ID: 40734963 , and The part you have for me is -
    "I want to like this and then have one button for transfer the data in table to MySQL using php or other. "
My purpose is make data entry to database. first of all, I want to use html for input data. the data input from textbox go to table in html and then I need to submit data in html table to MySQL by using php.

I only understand your words here, , a SMALL amount, I am NOT clear about what you may mean when you say -
       "transfer the data in table to MySQL using php or other"
I want insert data to MySQL, the data that will insert is taking from table in html.
0
arkam chouAuthor Commented:
But I am Not able to see what your PAGE CODE may be for your <table>, I just used a two two column <table> in my example code above. You seem to have run that code, and it worked for you, , because you say - "I want to like this"
I mean it look like this but I need to have one button for insert data from table in html to MySQL

I asked you before, and I will ask again

Can you SHOW us what you have in PHP and - or HTML as the CODE you use for your Page?

If you can please tell us about your saying -
    "Note: the data in table can be delete and update."
you have said some about the "update" part, but nothing about the "delete" from <table> part. Is this code you already have? ? Or is this code you need to have help with?

the data entry in web will insert into table in html using javascript. when I entry data, sometime make mistake so I can delete record by click button in each record or click on any cell on table to update by type new word in each cell that want update.

It seems that English is not your first language, if you can, , try and explain more, , and talk more about what you use and know about on your PHP server, especially about the part in your question -
      " - Input1(Brand Name): get data from MySQL"
sorry for my English. Please see my code.

can you show us, , or tell us about the PHP code for your MySQL , like -
    $mysqli = new mysqli('localhost', 'user', 'password', 'dataBase');
Please check my code.

that you use or know about.
We can not try and help much, if we do not know the parts of your code you may already have written.
Please, check my code.
0
Slick812Commented:
Thanks so much for your PHP code!

I will tell you that when you post Code Work here to always use the experts Code entry, by clicking on the "Code" in the "Post Comment" click options at the top so you get it to show like this -
<!DOCTYPE html>
<html lang=en>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="test/javascript" scr="jquery.js"></script>
</head>
<body>

<?php
 echo "Brand";
 $connection=mysqli_connect("localhost","root","","imsresearch") or die ("message");
 $query="select brandID, brandNameEN from tblbrand order by brandNameEN";
 $result=mysqli_query($connection,$query);
 if (mysqli_num_rows($result)>0){
      echo "<select name=brand id=brand>";
      while($row=mysqli_fetch_assoc($result)){
            echo "<option value=".$row[brandID].">";
            echo $row["brandNameEN"];
            echo "</option>";
      }
      echo "</select>";
    }else{
      echo "Null";
 }
 echo "Price";
 echo "<input type='text' name='price' id='price'>";
 echo "<input type='button' name='AddToHTML' value='AddToHTML' id='AddToHTML'>";
 ?>

 <table id="HTMLTable" border="1">
      <thead>
            <tr>
                  <td>Brand</td>
                  <td>Price</td>
            </tr>
      </thead>
      <tbody>
      </tbody>
</table>
<input type="button" value="transfer data from HTML Table to MySQL" id="HTMLtoMySQL">
<script>
$("#AddToHTML").click(function(){
      $("#HTMLTable").find("tbody").append("<tr><td>"+ $("#brand").val() + "</td><td>" + $("#price").val() + "</td></tr>");
})
</script>
</body>
</html>

Open in new window

0
Slick812Commented:
In your original question you say - "by using javascript"
so thats what code work I did in my example, using raw javascript

However in your page code you use JQuery, which is a different coding path, than just using javascript.
I like to code in raw javascript, without using JQuery, because to me,  JQuery seems so mixed up and sideways, compared to what I know in javascript. But if you want to work in Jquery, maybe some other expert here, can help you better than me, , but they will probably suggest using, an Add-In like the Jquery DataTables.
0
Slick812Commented:
OK , I remembered that you can add hidden inputs to a form, and, in my view, the way to do this with the least code is to submit a <form> with created hiddens for the table additions -
My version of your code page-
<!DOCTYPE html>
<html lang=en><head>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script type="test/javascript" scr="jquery.js"></script>
</head>
<body>

<?php
 echo "Brand";
 $connection=mysqli_connect("localhost","root","","imsresearch") or die ("message");
 $query="select brandID, brandNameEN from tblbrand order by brandNameEN";
 $result=mysqli_query($connection,$query);
 if (mysqli_num_rows($result)>0){
      echo "<select name=brand id=brand>";
      while($row=mysqli_fetch_assoc($result)){
            echo "<option value=".$row[brandID].">";
            echo $row["brandNameEN"];
            echo "</option>";
      }
      echo "</select>";
    }else{
      echo "Null";
 }
 echo "Price";
 echo "<input type='text' name='price' id='price'>";
 echo "<input type='button' name='AddToHTML' value='AddToHTML' id='AddToHTML'>";
 ?>

 <table id="HTMLTable" border="1">
      <thead>
            <tr>
                  <td>Brand</td>
                  <td>Price</td>
            </tr>
      </thead>
      <tbody>
      </tbody>
</table>
<form id="form1" action="table2mysql.php" method="post">
<input type="submit" name="subForm" id="sub" disabled value=" transfer data from HTML Table to MySQL ">
</form>
<script>
$("#AddToHTML").click(function(){
  var brand = $("#brand").val();
  var price = $("#price").val();
  if (price.length < 1) price = "0.00";
  $("#HTMLTable").find("tbody").append("<tr><td>"+ brand + "</td><td>" + price + "</td></tr>");
  $("#form1").append('<input type="hidden" name="bn[]" value="'+ brand + '" /><input type="hidden" name="pr[]" value="'+ price + '" />');
  $("#sub").removeAttr("disabled");
});
</script>
</body>
</html>

Open in new window


Notice that placed your " transfer data from HTML Table to MySQL " button, in a <form> as a submit input,
it is disabled. When the 'AddToHTML' button is touched, then the javascript adds hidden inputs to the form with-
     $("#form1").append('<input type="hidden" name="bn[]" value="'+ brand + '" /><input type="hidden" name="pr[]" value="'+ price + '" />');

and it makes the submit button active.
I use array "names" for the inputs like  "bn[]"

so in your <form> post page which i have as "table2mysql.php" you can get the hidden inputs with -
    $brands = $_POST['bn'];
    $prices = $_POST['pr'];
both of these should be arrays;
0
arkam chouAuthor Commented:
Dear Expert Slick812,

it is good to use hidden form, how about update (cell) and delete (record) html table?
0
Slick812Commented:
I am not sure about what you mean for your two column <table> display on the Page, when you say -
           "how about update (cell) and delete (record) html table? "

In order to have the page user, be able to touch and change something in the <table> display (update, delete), you need touch areas, as buttons, icons, or table cells, that you have set an On-Touch or On-Click javascript event, that runs code to have the user change the <table> display. If you need to apply change to a certain <table> row and cell, then you will need to have a system in the javascript to be able to apply the change to that ONLY row and cell.

There are hundreds of different ways to have your <table> layout and arrangement, to have , for example, two icons on the far right cell, one to touch for update, and the other for delete. And still more ways that do not use buttons or icons. I may can help with this, but I do not want to design a user Display for this, because there are so many different ways and things to consider, that I have no place to start.

Maybe you can say what you need the user to see and to do, for your update and delete operations, and what changes you need to happen for the delete-update on the <table>.

But this will require that the javascript becomes more code, and maybe more complex.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.