ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Insert and Load Records without Refreshing the Page.

loadInsertJqueryInsert and load records in the database are used when creating a system. In php, there are two pages (design and process) that are usually used in inserting and loading records in the database. This process may load long enough but with the use of jQuery and Ajax it will instantly insert and load the records in just a click.

 

In this project, we are going to use MySQL for the database.

 

Below are the step by step process in making this project:

 

  • Create a MySQL database and name it “dbuser”.
  • Do the following query for creating a table in the MySQL database that you have created.
  1. CREATE TABLE IF NOT EXISTS `tblusers` (
  2. `user_id` int(11) NOT NULL AUTO_INCREMENT,
  3. `user_name` varchar(40) NOT NULL,
  4. `user_username` varchar(40) NOT NULL,
  5. `user_pass` varchar(90) NOT NULL,
  6. PRIMARY KEY (`user_id`)
  • These are the codes that we’re going to use in our configuration that bridge between MySQL database and PHP script.
  1. <?php
  2. $server = 'localhost';
  3. $dbuser = 'root';
  4. $dbpass = '';
  5. $dbname = 'dbuser';
  6. $con = mysql_connect($server, $dbuser, $dbpass);
  7. if (isset($con)) {
  8. # code...
  9. $dbSelect = mysql_select_db($dbname);
  10. if (!$dbSelect) {
  11. echo "Problem in selecting database! Please contact administraator";
  12. }
  13. } else {
  14. echo "Problem in database connection! Please contact administraator";
  15. }
  16. ?>
  • Create a design to input and load records in the MySQL database. Name the file “index.php”.
  1. <?php include 'config.php'; ?>
  2. <!-- bootstrap extension -->
  3. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  4. <!-- container -->
  5. <div class="container" >
  6. <!-- for inputs -->
  7. <div class="row">
  8. <div class="form-horizontal span6">
  9. <div class="row">
  10. <div class="col-lg-12">
  11. <h1 class="page-header">Add New User</h1>
  12. </div>
  13. </div>
  14.  
  15. <div class="form-group">
  16. <div class="col-md-8">
  17. <label class="col-md-4 control-label" for=
  18. "U_NAME">Name:</label>
  19.  
  20. <div class="col-md-8">
  21. <input name="deptid" type="hidden" value="">
  22. <input class="form-control input-sm" id="U_NAME" name="U_NAME" placeholder=
  23. "Account Name" type="text" value="">
  24. </div>
  25. </div>
  26. </div>
  27.  
  28. <div class="form-group">
  29. <div class="col-md-8">
  30. <label class="col-md-4 control-label" for=
  31. "U_USERNAME">Username:</label>
  32.  
  33. <div class="col-md-8">
  34. <input name="deptid" type="hidden" value="">
  35. <input class="form-control input-sm" id="U_USERNAME" name="U_USERNAME" placeholder=
  36. "Email Address" type="text" value="">
  37. </div>
  38. </div>
  39. </div>
  40.  
  41. <div class="form-group">
  42. <div class="col-md-8">
  43. <label class="col-md-4 control-label" for=
  44. "U_PASS">Password:</label>
  45.  
  46. <div class="col-md-8">
  47. <input name="deptid" type="hidden" value="">
  48. <input class="form-control input-sm" id="U_PASS" name="U_PASS" placeholder=
  49. "Account Password" type="Password" value="" required>
  50. </div>
  51. </div>
  52. </div>
  53.  
  54. <div class="form-group">
  55. <div class="col-md-8">
  56. <label class="col-md-4 control-label" for=
  57. "idno"></label>
  58.  
  59. <div class="col-md-8">
  60. <button class="btn btn-primary btn-sm" id ="submit" type="submit" >Save</button>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65.  
  66. </div>
  67. <!-- end inputs -->
  68.  
  69. <!-- for listing -->
  70. <div class="row" >
  71. <h1 class="page-header">List of Users</h1>
  72. <div class="table-responsive " >
  73.  
  74. <table class="table table-striped table-bordered table-hover table-responsive" style="font-size:12px" cellspacing="0">
  75. <thead>
  76. <tr>
  77. <th>Account Name</th>
  78. <th>Username</th>
  79. <th>Encrypted Password</th>
  80. </tr>
  81. </thead>
  82. <tbody class="loaddata" >
  83. <?php
  84. $sqlQuery = "SELECT * FROM `tblusers`";
  85. $result = mysql_query($sqlQuery) or die(mysql_error());
  86.  
  87. while ($row = mysql_fetch_array($result)) {
  88. echo '<tr>';
  89. echo '<td>' .$row['user_name'].'</a></td>';
  90. echo '<td>'. $row['user_username'].'</td>';
  91. echo '<td>'. $row['user_pass'].'</td>';
  92. echo '</tr>';
  93. }
  94.  
  95. ?>
  96. </tbody>
  97.  
  98. </table>
  99. </div>
  100. </div>
  101. </div>
  102. <!-- end listing -->
  103. </div>
javascript

  1. <!-- jquery extension -->
  2. <script type="text/javascript" src="jquery/jquery.min.js"></script>
  3.  
  4. <!-- method for saving and retrieving data without refreshing the page. -->
  5. <script type="text/javascript" >
  6.  
  7. $(document).on("click", "#submit", function () {
  8. /* load all variables */
  9. var name = document.getElementById('U_NAME').value
  10. var username = document.getElementById('U_USERNAME').value
  11. var pass = document.getElementById('U_PASS').value
  12.  
  13. $.ajax({ //create an ajax request to load_page.php
  14. type:"POST",
  15. url: "process.php",
  16. dataType: "text", //expect html to be returned
  17. data:{u_name:name,user_name:username,password:pass},
  18. success: function(data){
  19. $(".loaddata").html(data);
  20.  
  21. }
  22.  
  23. });
  24.  
  25. });
  26. </script>
  • Finally, do this following code for inserting the data in the MySQL database. Name the file “process.php”.
  1. <?php
  2. include 'config.php';
  3. /* set a query for inserting records */
  4. $sqlQuery = "insert into `tblusers` (`user_name`, `user_username`, `user_pass`)
  5. VALUES ('".$_POST['u_name']."','".$_POST['user_name']."',sha1('".$_POST['password']."'))";
  6. /* execute the query */
  7. $result = mysql_query($sqlQuery) or die(mysql_error());
  8. /* checking if the query has successfully executed. */
  9. if ($result==1) {
  10. /* set a query for retrieving the data .*/
  11. $sqlQuery = "SELECT * FROM `tblusers`";
  12. /* execute the query */
  13. $result = mysql_query($sqlQuery) or die(mysql_error());
  14. /* loop the executed query */
  15. while ($row = mysql_fetch_array($result)) {
  16.  
  17. echo '<tr>';
  18. echo '<td>' .$row['user_name'].'</a></td>';
  19. echo '<td>'. $row['user_username'].'</td>';
  20. echo '<td>'. $row['user_pass'].'</td>';
  21. echo '</tr>';
  22.  
  23. }
  24. }
  25. ?>

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages.  You can contact me @ :

 

Email – jannopalacios@gmail.com

Mobile No. – 09305235027 – tnt

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!