How to Connect HTML to MySQL Database using PHP

Sandip Nigam | December 30, 2023 | HTML, JavaScript, MySQL, PHP | No Comments

In this comprehensive tutorial (HTML to MySQL), learn how to connect HTML forms to a MySQL database using PHP. Whether you’re a beginner or looking to refresh your skills, this step-by-step guide will walk you through the entire process. You’ll discover how to set up your database, create HTML forms, and use PHP to establish a connection. By the end of this video, you’ll be equipped with the knowledge to build dynamic web applications with ease.

HTML Bootstrap JavaScript का उपयोग कर यदि आप एक Invoice बना कर उसके data को MySQL Database मे Store करवाना चाहते हैं तो यह Article आपके लिए ही है, Welcome Friends मे हु संदीप निगम और आज आपको बताऊँगा की कैसे हम HTML Bootstrap का उपयोग कर Invoice के data की MySQL database मे Store कर सकते हैं ।

HTML to MySQL Output

हम सबसे पहले देख लेते हैं की हम जो बना रहे है उससे Output किस तरह से निकेलेगा, हम सबसे पहले एक Simple HTML Bootstrap की Invoice बनाएंगे। इसमे जब डाटा को Save किया जाएगा तब Data MySQL मे जा कर Store हो जाएगा

MySQL मे data कुछ इस प्रकार से दिखाई देगा

चलिए अब Step By Step समझते है ।

HTML Code for HTML to MySQL

हम सबसे पहले Simple Invoice Page को Design करेंगे इसमे दो भाग हैं एक तो Header वाला जिसमे Customer का नाम, Invoice No, Date आदि Columns हैं ओर एक Detail का Part हैं उसमे Item, Qty, Rate, Amount आदि Columns हैं ऑफ फिर Footer मे Total और GST के Columns हैं , इन्हे मैंने Store नहीं किया हैं यह आपको Home Work आपको Concept समझ कर खुद ही Solve करना है ।

इस Invoice HTML मे हमने कुछ और File ऐड की हैं

invoiceprint.css : यह हमने एक Print Format बनाया हैं उसके लिए हैं इसमे यह Invoice Print Format मे दिखाई देने लगती हैं इसमे print Media का उपयोग किया हैं ।
invoice.css : इसमे हमने Invoice से Related जो भी Css के changes करना हैं वह लिखेंगे
invoice.js : इसमे इन्वाइस मे जीतने भी Event handle किए है उनके बारे मे लिखा हैं
save.php : MySQL मे Data Store करने के लिए हमने PHP का उपयोग कर डट को MySQL मे Store किया हैं ।
साथ ही मे Bootstrap और jQuery की CDN भी Connect की हैं ताकि हम इन दोनों का भी उपयोग कर पाए ।


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imagination Invoice Example</title>
    <!-- For Bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    
    <!-- CSS For Print Format -->
    <link rel="stylesheet" media="print" href="invoiceprint.css">
    
    <!-- CSS For Invoice -->
    <link rel="stylesheet"  href="invoice.css">

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.2.slim.js" integrity="sha256-OflJKW8Z8amEUuCaflBZJ4GOg4+JnNh9JdVfoV+6biw=" crossorigin="anonymous"></script>
    
    <!-- For Invoice  -->
    <script src="invoice.js"></script>


</head>
<body>
<div class="container ">
	<form  method="POST" action="save.php"   >
       

        <div class="card border-primary border-2 mt-2">
            <div class="card-header text-center">
              <h4>HTML Invoice to MySQL using PHP</h4>
            </div>
            <div class="card-body">

                <div class="row">
                    <div class="col-8">
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Customer</span>
                            <input type="text" class="form-control" name="cust_nm" placeholder="Customer"  >
                        </div>
            
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Address</span>
                            <input type="text" class="form-control" name="addr" placeholder="Address"  >
                        </div>
            
                        <div class="input-group mb-3">
                            <span class="input-group-text" >City</span>
                            <input type="text" class="form-control" name="city" placeholder="City"  >
                        </div>
                    </div>
                    <div class="col-4">
                      
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Inv. No</span>
                            <input type="text" class="form-control" name="inv_no" placeholder="Inv. No"  >
                        </div>

                        <div class="input-group mb-3">
                            <span class="input-group-text" >Inv. Date</span>
                            <input type="date" class="form-control" name="inv_dt" placeholder="Inv. Date"  >
                        </div>



                    </div>
                </div>


                <table class="table table-bordered">
                    <thead class="table-primary">
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Particular</th>
                        <th scope="col" class="text-end">Qty</th>
                        <th scope="col" class="text-end">Rate</th>
                        <th scope="col" class="text-end">Amount</th>
                        <th scope="col" class="NoPrint">                         
                            <button type="button" class="btn btn-sm btn-primary" onclick="BtnAdd()">+</button>
                          
                        </th>

                      </tr>
                    </thead>
                    <tbody id="TBody">
                      <tr id="TRow" class="d-none">
                        <th scope="row">1</th>
                        <td><input type="text" class="form-control" ></td>
                        <td><input type="number" class="form-control text-end" name="qty[]" onchange="Calc(this);"></td>
                        <td><input type="number" class="form-control text-end" name="rate[]"  onchange="Calc(this);"></td>
                        <td><input type="number" class="form-control text-end" name="amt[]" value="0" readonly="readonly"></td>
                        <td class="NoPrint"><button type="button" class="btn btn-sm btn-danger" onclick="BtnDel(this)">X</button></td>
                      </tr>
                    </tbody>
                  </table>


                  <div class="row">
                    <div class="col-8">
                      
                        <button type="button" class="btn btn-primary" onclick="GetPrint()">Print</button>
						<button type="submit" class="btn btn-primary" >Save to MySQL</button>

                    </div>
                    <div class="col-4">
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Total</span>
                            <input type="number" class="form-control text-end" id="FTotal" name="FTotal" disabled="">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" >GST</span>
                            <input type="number" class="form-control text-end" id="FGST" name="FGST" onchange="GetTotal()">
                        </div>
                        <div class="input-group ">
                            <span class="input-group-text" >Net Amt</span>
                            <input type="number" class="form-control text-end" id="FNet" name="FNet" disabled="">
                        </div>


                    </div>
                </div>
             </div>
          </div>
		</form>
  </div>
    <!-- Bootstrap Bundle JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

CSS for HTML to MySQL

Invoice मे हमने कोई ज्यादा CSS का कार्य नहीं किया हैं केवल सभी Label की एक जैसी Width की हैं ।

.input-group-text {
   width: 85px;
}

Invoice के Print Format के लिए हमने कुछ CSS लिखी हैं ।

.btn , .NoPrint 
{
    display: none;
}

.form-control
{
    border: 0px;
}

.input-group-text
{
    border: 0px;
    background-color: white;
}

table 
{
    border : 1px solid black;
}

JavaScript Code for HTML to MySQL

यह Javascript File हैं इसमे हमने सभी Function लिखे हैं जो की आपको Invoice मे data Entry करने मे मदद करते हैं।

function GetPrint() {
    /*For Print*/
    window.print();
}

function BtnAdd() {
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    $(v).find("input").val('');
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}

function BtnDel(v) {
    /*Delete Button*/
       $(v).parent().parent().remove(); 
       GetTotal();
       $("#TBody").find("tr").each(
        function(index)  {
           $(this).find("th").first().html(index);
        }
       );
}

function Calc(v) {
    /*Detail Calculation Each Row*/
    var index = $(v).parent().parent().index();
    var qty  = document.getElementsByName("qty[]")[index].value;
    var rate = document.getElementsByName("rate[]")[index].value;
    var amt = qty * rate;
    document.getElementsByName("amt[]")[index].value = amt;
    GetTotal();
}

function GetTotal() {
    /*Footer Calculation*/   
    var sum=0;
    var amts =  document.getElementsByName("amt[]");

    for (let index = 0; index < amts.length; index++) {
        var amt = amts[index].value;
        sum = +(sum) +  +(amt) ; 
    }
    document.getElementById("FTotal").value = sum;

    var gst =  document.getElementById("FGST").value;
    var net = +(sum) + +(gst);
    document.getElementById("FNet").value = net;
}

GetPrint() : इस Function से Invoice को Print Format मे दिखाया गया हैं।
BtnAdd() : इस Function से Detail मे Rows को Add करने मे किया हैं ।
BtnDel() : इस Function का उपयोग Invoice की Rows को Delete करने मे किया हैं।
Calc() : इस Function का उपयोग Amount को Calculate करने मे किया हैं ।
GetTotal() : जो Footer मे Total आता हैं उसके लिए इस Function का उपयोग किया गया हैं ।

Table Structure for HTML to MySQL

इसके बाद हम MySQL मे एक database बना कर उसमे एक Table बनाएंगे जिसका Structure आप इस तरह से बना सकते हैं ।

CREATE TABLE `invoice` (                                                            
           `id` int(9) NOT NULL AUTO_INCREMENT,                                              
           `inv_no` varchar(10) NOT NULL,                                                    
           `inv_dt` date NOT NULL,                                                           
           `cust_nm` varchar(40) NOT NULL,                                                   
           `addr` varchar(80) NOT NULL,                                                      
           `city` varchar(40) NOT NULL,                                                      
           `qty` decimal(9,2) NOT NULL DEFAULT 0.00,                                         
           `rate` decimal(9,2) NOT NULL DEFAULT 0.00,                                        
           `amt` decimal(9,2) NOT NULL DEFAULT 0.00,                                         
           PRIMARY KEY (`id`)                                                                
         ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci

PHP Code for HTML to MySQL

इसमे बाद हम एक PHP File बना कर Data को PHP का उपयोग कर MySQL मे भेज देंगे।

<?php
if (isset($_POST['cust_nm'])) {
	$cust_nm  = $_POST['cust_nm'];
	$addr     = $_POST['addr'];
	$city     = $_POST['city']; 
	$inv_no   = $_POST['inv_no'];
	$inv_dt   = $_POST['inv_dt'];

	$qtys     = $_POST['qty'];
	$rates    = $_POST['rate'];
	$amts     = $_POST['amt'];

	$Ret = 0;
        //$con=mysqli_connect("HOST","USERID","PASSWORD","DATABASE");
	$con=mysqli_connect("localhost:3307","root","","mydb");
	if (mysqli_connect_errno())
		echo "Failed to connect to MySQL: " . mysqli_connect_error();
	$cnt = count($qtys);
	for ($i=1; $i<$cnt; $i++) {
		$qty  = $qtys[$i] ;
		$rate = $rates[$i] ;
		$amt  = $amts[$i] ;

		$LsSQL = "INSERT INTO `invoice`( `inv_no`, `inv_dt`, `cust_nm`, `addr`, `city`, `qty`, `rate`, `amt`) 
		VALUES ('$inv_no','$inv_dt','$cust_nm ','$addr','$city', $qty, $rate, $amt)";
		$Ret = mysqli_query($con, $LsSQL);
	}

	if ($Ret == 1) {
		echo "\nSuccessfully Saved";
	}
	else {
		echo "\nError in Save";
	}
	mysqli_close($con);

}


?>

इसमे हमें जो Single वैल्यू हैं उन्हे direct ही Get किया ।
और Multiple Value वाले Columns (Detail वाले कॉलम जैसे Qty, Rate, Amt) के लिए हमे Array का उपयोग किया हैं।
mysqli_connect : मे आपको अपने localhost का पोर्ट और User Id ओर Password देना हैं जो Default id Password होते हैं वह मैंने दे दिए हैं, Host को आप एक बार जरूर Check करे हो सकता हैं आपके Computer मे केवल localhost ही हो। या कोई IP भी हो सकता हैं।

Testing HTML to MySQL

इतना करने के बाद आप HTML page को Execute करेंगे , आपको इतना ध्यान रखना हैं की इसे Wamp या Xamp folder मे html page ओर सभी files को रखने के बाद ही Execute करे क्युकी यदि आप किसी भी folder मे रख कर Execute करेंगे तो आपको Html View तो दिखाई देगा लेकिन Data Post नहीं होगा।

इसके बाद आपको localhost से ही project को व्यू करना हैं जैसा की मे नीचे बात रहा हु। ऐसा करने के लिए Wamp ya xamp आप जो भी उपयोग कर रहे हैं वह start होना जरूरी हैं

इसके बाद आपको Browser पर निम्न प्रकार से टाइप करना हैं ।

उपरोक्त URL मे %20 इसलिए आ रहा हैं क्युकी मैंने जो फ़ोल्डर बनाया हैं उसमे Name के बीच बीच मे Space दी हुए हैं । आप यदि इतना टाइप करने से बचना चाहते हैं तो Folder का नाम छोटा ओर बिना Space के दे।

यदि आपको MySQL और Wamp Install करना हैं तब यह Article Read करे

Video के माध्यम से समझने के लिए

आशा हैं मुझे आपको HTML to MySQL Database Connection बहुत ही अच्छे से समझ मे आ गया हैं, इस Article से related कोई भी Query हो तो आप मुझे निःसंकोच comment कर सकते हैं । यह Article कैसा लगा Comment करना न भूले । अपना कीमती समय देने के लिए धन्यवाद ।

Developer Tips

How to Connect HTML to MySQL Database using PHP

Table of Contents

HTML to MySQL Output

HTML Code for HTML to MySQL

CSS for HTML to MySQL

JavaScript Code for HTML to MySQL

Table Structure for HTML to MySQL

PHP Code for HTML to MySQL

Testing HTML to MySQL

Video के माध्यम से समझने के लिए

हमारे अन्य आर्टिकल

Add a Comment

Table of Contents

HTML to MySQL Output

HTML Code for HTML to MySQL

CSS for HTML to MySQL

JavaScript Code for HTML to MySQL

Table Structure for HTML to MySQL

PHP Code for HTML to MySQL

Testing HTML to MySQL

Video के माध्यम से समझने के लिए

हमारे अन्य आर्टिकल

Related Posts

Add a Comment