Social Networking Site: Saving Basic Information

In this tutorial, I’m going to show you how the form for basic information about a user and saving the basic information of a user using twitter bootstrap modal. And to start with this application, open the project folder name “physical” inside the document root. Then open the info.php and under the well class, add the following code:
  1. <form action="pbasicinfo.php" class="form-horizontal well span9" method="post">
  2.  
  3. <fieldset>
  4. <legend>Basic Information</legend>
  5. <div class="rows">
  6. <!---- this is the area where we are going to add the code for modal>
  7. <div class="form-inline">
  8. <div class="rows">
  9. <div class="col-md-12">
  10. <div class="col-md-4" id="Networks">
  11. <h5>Networks :</h5>
  12. </div>
  13. <div class="col-md-8">
  14. <h5>None.</h5>
  15. </div>
  16.  
  17. </div>
  18. </div>
  19. </div>
  20.  
  21. <div class="form-inline">
  22. <div class="rows">
  23. <div class="col-md-12">
  24. <div class="col-md-4" id="Networks">
  25. <h5>Gender :</h5>
  26. </div>
  27. <div class="col-md-8">
  28. <h5><?php echo $_SESSION['gender']; ?></h5>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33.  
  34. <div class="form-inline">
  35. <div class="rows">
  36. <div class="col-md-12">
  37. <div class="col-md-4" id="Networks">
  38. <h5>Birth Day :</h5>
  39. </div>
  40. <div class="col-md-8">
  41. <h5><?php echo $created = strftime("%Y-%m-%d"); ?></h5>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46.  
  47. <div class="form-inline">
  48. <div class="rows">
  49. <div class="col-md-12">
  50. <div class="col-md-4" id="Networks">
  51. <h5>Interested In:</h5>
  52. </div>
  53. <div class="col-md-8">
  54. <h5>None.</h5>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59.  
  60. <div class="form-inline">
  61. <div class="rows">
  62. <div class="col-md-12">
  63. <div class="col-md-4" id="Networks">
  64. <h5>Relationship Status :</h5>
  65. </div>
  66. <div class="col-md-8">
  67. <h5>None.</h5>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72.  
  73. <div class="form-inline">
  74. <div class="rows">
  75. <div class="col-md-12">
  76. <div class="col-md-4" id="Networks">
  77. <h5>Language:</h5>
  78. </div>
  79. <div class="col-md-8">
  80. <h5>None.</h5>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="form-inline">
  86. <div class="rows">
  87. <div class="col-md-12">
  88. <div class="col-md-4" id="Networks">
  89. <h5>Religion:</h5>
  90. </div>
  91. <div class="col-md-8">
  92. <h5>None.</h5>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97.  
  98. <div class="form-inline">
  99. <div class="rows">
  100. <div class="col-md-12">
  101. <div class="col-md-4" id="Networks">
  102. <h5>Descriptions:</h5>
  103. </div>
  104. <div class="col-md-8">
  105. <h5>None.</h5>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="form-inline">
  111. <div class="rows">
  112. <div class="col-md-12">
  113. <div class="col-md-4" id="Networks">
  114. <h5>Political Views:</h5>
  115. </div>
  116. <div class="col-md-8">
  117. <h5>None.</h5>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122.  
  123. <div class="form-inline">
  124. <div class="rows">
  125. <div class="col-md-12">
  126. <div class="col-md-4" id="Networks">
  127. <h5>Descriptions:</h5>
  128. </div>
  129. <div class="col-md-8">
  130. <h5>None.</h5>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135.  
  136. </div>
  137. </div><!--End row for basic Information-->
  138.  
  139.  
  140. </fieldset>
  141. </form>
The code above when it has executed in the browser, it looks like as shown below: Next, under this comment <!-- this is the area where we are going to add the code for modal-->, we will add the following code: The code below will display a link with a “glyphicon glyphicon-pencil” and when it is clicked by the user, it displays the modal that allows the user for editing his basic information. And it looks like as shown below:
  1. <div class="col-xs-12"><!--Start row for basic Information-->
  2.  
  3. <div class="form-group">
  4. <div class="rows">
  5. <div class="col-md-12">
  6. <div class="col-md-4" id="Networks">
  7. <H4><strong><strong></h4>
  8. </div>
  9.  
  10. <div class="col-md-8">
  11. <a data-target="#EditBasicInfo" data-toggle="modal" href="" title="Click to edit Basic Information.">
  12. <button type="button" class="btn btn-default btn-sm pull-right" >
  13. <span class="glyphicon glyphicon-pencil"></span> Edit
  14. </button>
  15. </a>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
Then, here’s the code for the modal:
  1. <!-- Modal -->
  2. <div class="modal fade" id="EditBasicInfo" tabindex="-1">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button class="close" data-dismiss="modal" type="button">×</button>
  7.  
  8. <h4 class="modal-title" id="myModalLabel">Basic Information</h4>
  9. </div>
  10.  
  11. <div class="modal-body">
  12. <div class="form-group">
  13. <div class="rows">
  14. <div class="col-md-12">
  15. <div class="rows">
  16. <div class="form-group">
  17. <div class="rows">
  18. <div class="col-md-12">
  19. <div class="col-md-4" id="Networks">
  20. <label for="network">Networks :</label>
  21. </div>
  22. <div class="col-md-8">
  23. <input class="form-control input-sm" id="network" name="network" placeholder=
  24. "network" type="text" >
  25. </div>
  26.  
  27. </div>
  28. </div>
  29. </div>
  30.  
  31. <div class="form-group">
  32. <div class="rows">
  33. <div class="col-md-12">
  34. <div class="col-md-4" id="gender">
  35. <label for="sex">Gender :</label>
  36. </div>
  37. <div class="col-md-8">
  38. <!-- <input class="form-control input-sm" id="sex" name="sex" placeholder="sex" type="text" >-->
  39. <select class="form-control input-sm" name="gender" id="gender">
  40. <option value="Male">Male</option>
  41. <option value="Female">Female</option>
  42. </select>
  43.  
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48.  
  49. <div class="form-group">
  50. <div class="rows">
  51. <div class="col-md-12">
  52. <div class="col-md-4" id="bday">
  53. <label for="bday">Birth Day :</label>
  54. </div>
  55. <div class="col-md-8">
  56. <div class="rows">
  57. <div class="col-md-12">
  58. <div class="col-md-4">
  59. <select class="form-control input-sm" name="mm">
  60. <?php
  61. $m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
  62. foreach ($m as $month) {
  63. echo '<option value='.$month.'>'.$month.'</option>';
  64. }
  65. ?>
  66. </select>
  67. </div>
  68. <div class="col-md-4">
  69. <select class="form-control input-sm" name="dd">
  70. <?php
  71. $d = range(31, 1);
  72. foreach ($d as $day) {
  73. echo '<option value='.$day.'>'.$day.'</option>';
  74. }
  75.  
  76. ?>
  77. </select>
  78. </div>
  79. <div class="col-md-4">
  80. <select class="form-control input-sm" name="yr">
  81. <?php
  82. $years = range(2010, 1900);
  83. foreach ($years as $yr) {
  84. echo '<option value='.$yr.'>'.$yr.'</option>';
  85. }
  86.  
  87. ?>
  88. </select>
  89. </div>
  90. </div>
  91. </div>
  92.  
  93.  
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98.  
  99. <div class="form-group">
  100. <div class="rows">
  101. <div class="col-md-12">
  102. <div class="col-md-4" id="">
  103. <label for="interested">Interested In :</label>
  104. </div>
  105. <div class="col-md-8">
  106. <select class="form-control input-sm" name="interested" >
  107. <option value="Women">Women</option>
  108. <option value="Men">Men</option>
  109. </select>
  110.  
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115.  
  116. <div class="form-group">
  117. <div class="rows">
  118. <div class="col-md-12">
  119. <div class="col-md-4" id="">
  120. <label for="status">Relationship Status :</label>
  121. </div>
  122. <div class="col-md-8">
  123. <select class="form-control input-sm" name="relstatus" >
  124. <option value="Sinlge">Single</option>
  125. <option value="In a Relationship">In a Relationship</option>
  126. <option value="Maried">Maried</option>
  127. <option value="Divorced">Divorced</option>
  128. <option value="Engaged">Engaged</option>
  129. <option value="It's Complicated">It's Complicated</option>
  130. <option value="In an open Relationship">In an open Relationship</option>
  131. <option value="Widowed">Widowed</option>
  132.  
  133. </select>
  134.  
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139.  
  140. <div class="form-group">
  141. <div class="rows">
  142. <div class="col-md-12">
  143. <div class="col-md-4" id="language">
  144. <label for="language">Language :</label>
  145. </div>
  146. <div class="col-md-8">
  147. <input class="form-control input-sm" id="language" name="language" placeholder="Whats your language" type="text" >
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152.  
  153. <div class="form-group">
  154. <div class="rows">
  155. <div class="col-md-12">
  156. <div class="col-md-4" id="Religion">
  157. <label for="Religion">Religion :</label>
  158. </div>
  159. <div class="col-md-8">
  160. <input class="form-control input-sm" id="Religion" name="Religion" placeholder="What are your religious beliefs?" type="text" >
  161.  
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166.  
  167. <div class="form-group">
  168. <div class="rows">
  169. <div class="col-md-12">
  170. <div class="col-md-4" id="Reldesc">
  171. <label for="Reldesc">Description :</label>
  172. </div>
  173. <div class="col-md-8">
  174. <textarea class="form-control input-sm" id="Reldesc" name="Reldesc" placeholder="" >
  175. </textarea>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. <div class="form-group">
  181. <div class="rows">
  182. <div class="col-md-12">
  183. <div class="col-md-4" id="politicalviews">
  184. <label for="politicalviews">Political Views :</label>
  185. </div>
  186. <div class="col-md-8">
  187. <input class="form-control input-sm" id="politicalviews" name="politicalviews" placeholder="What are your political beliefs?" type="text" >
  188.  
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193.  
  194. <div class="form-group">
  195. <div class="rows">
  196. <div class="col-md-12">
  197. <div class="col-md-4" id="poldesc">
  198. <label for="poldesc">Description :</label>
  199. </div>
  200. <div class="col-md-8">
  201. <textarea class="form-control input-sm" id="poldesc" name="poldesc" placeholder="" >
  202. </textarea>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <div class="col-md-4"></div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213.  
  214. <div class="modal-footer">
  215. <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
  216. <button class="btn btn-primary" name="savebasicinfo" type="submit">Save</button>
  217. </div>
  218. <!-- </form>-->
  219. </div><!-- /.modal-content -->
  220. </div><!-- /.modal-dialog -->
  221. </div><!-- /.modal -->
When executing this code above, it will look like as shown below. At this time we’re going to create a new PHP file called “pbasicinfo.php” to process the encoded data of the user for his basic information. And add the following code:
  1. <?php
  2.  
  3. require_once("includes/initialize.php");
  4. $network = $_POST['network'];
  5. $gender = $_POST['gender'];
  6. $month = $_POST['mm'] + 1;
  7. $bday = $_POST['yr'].'-'.$month.'-'. $_POST['dd'];
  8. $interest = $_POST['interested'];
  9. $rel_stats = $_POST['relstatus'];
  10. $language = $_POST['language'];
  11. $religion = $_POST['Religion'];
  12. $reldesc = $_POST['Reldesc'];
  13. $political = $_POST['politicalviews'];
  14. $poldesc = $_POST['poldesc'];
  15. $member_id = $_SESSION['member_id'];
  16. global $mydb;
  17. //check if theres a current information for every user
  18. $mydb->setQuery("Select * FROM basic_info where member_id='{$member_id}'");
  19. $cur = $mydb->executeQuery();
  20. $row_count = $mydb->num_rows($cur);//get the number of count
  21.  
  22. //if the row count is equal to one therefore there is an existing data for the user
  23. if ($row_count == 1){
  24. //then it will simply do the editing of the user's information
  25. $mydb->setQuery("UPDATE `basic_info` SET
  26. `networks` = '{$network}',
  27. `interested_in` = '{$interest}',
  28. `rel_stats` = '{$rel_stats}',
  29. `language` = '{$language}',
  30. `religion` = '{$religion}',
  31. `rel_desc` = '{$reldesc}',
  32. `political_view` = '{$political}',
  33. `pol_desc` = '{$poldesc}'
  34. WHERE member_id=".$_SESSION['member_id']);
  35. $mydb->executeQuery();
  36. //check if the update statement has been executed successfully in the database
  37. if ($mydb->affected_rows() == 1) {
  38.  
  39. echo "<script type=\"text/javascript\">
  40. //alert(\"Basic Information Updated successfully.\");
  41. window.location='info.php';
  42. </script>";
  43.  
  44. } else{
  45. echo "<script type=\"text/javascript\">
  46. alert(\"Updating Basic information Failed!\");
  47. window.location='info.php';
  48. </script>";
  49. }
  50. //this code will update the birthday and gender of the user in the users_table
  51. $mydb->setQuery("UPDATE `user_info` SET `gender` = '{$gender}',
  52. `bday` = '{$bday}' WHERE member_id=".$_SESSION['member_id']);
  53. $mydb->executeQuery();
  54.  
  55. }else{
  56. //else no results user's information found then it will insert the user's information in the database
  57. $mydb->setQuery("INSERT INTO `basic_info` (`networks`, `interested_in`,
  58. `rel_stats`, `language`, `religion`, `rel_desc`,
  59. `political_view`, `pol_desc`, `member_id`)
  60. VALUES ( '{$network}', '{$interest}', '{$rel_stats}', '{$language}',
  61. '{$religion}', '{$reldesc}', '{$political}', '{$poldesc}', '{$member_id}');");
  62. $mydb->executeQuery();
  63.  
  64. if ($mydb->affected_rows() == 1) {
  65.  
  66. echo "<script type=\"text/javascript\">
  67. //alert(\"Basic Information created successfully.\");
  68. window.location='info.php';
  69. </script>";
  70.  
  71. } else{
  72. echo "<script type=\"text/javascript\">
  73. alert(\"Saving Basic information Failed!\");
  74. </script>";
  75. }
  76.  
  77. }
  78. $mydb->setQuery("UPDATE `philsocialdb`.`user_info` SET `gender` = '{$gender}',
  79. `bday` = '{$bday}' WHERE member_id=".$_SESSION['member_id']);
  80. $mydb->executeQuery();
  81.  
  82. ?>
And we add new database table used for this application called “basic_info” and here’s the table structure.
  1. CREATE TABLE IF NOT EXISTS `basic_info` (
  2. `basicinfo_id` INT(11) NOT NULL AUTO_INCREMENT,
  3. `networks` VARCHAR(255) NOT NULL DEFAULT 'None',
  4. `interested_in` VARCHAR(30) NOT NULL DEFAULT 'Women',
  5. `rel_stats` VARCHAR(30) NOT NULL DEFAULT 'Single',
  6. `language` VARCHAR(255) NOT NULL DEFAULT 'None',
  7. `religion` VARCHAR(255) NOT NULL DEFAULT 'None',
  8. `rel_desc` text NOT NULL,
  9. `political_view` VARCHAR(255) NOT NULL,
  10. `pol_desc` text NOT NULL,
  11. `member_id` INT(11) NOT NULL,
  12. PRIMARY KEY (`basicinfo_id`)
  13. ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
If you want to see more of my works, new Source Code or Application and Tutorials Just click here.

Add new comment