Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: geshiro en 17 Junio 2015, 02:02 am


Título: alguien que me ayude o guie php botton agregar
Publicado por: geshiro en 17 Junio 2015, 02:02 am
como puedo hacer para que mi botton de add kids ya funcione con php oh bien quien me lo haga seria util necesito saber como hacerlo uno

Código
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  4. 	<meta charset="UTF-8">
  5. 	<title>Admin</title>
  6. 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. 	 <link rel="stylesheet" href="css/bootstrap.css">
  8. 	 <link rel="stylesheet" href="css/login.css">
  9. </head>
  11. 	<nav class="navbar navbar-default">
  12.   <div class="container-fluid">
  13.     <!-- Brand and toggle get grouped for better mobile display -->
  14.     <div class="navbar-header">
  15.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  16.         <span class="icon-bar"></span>
  17.         <span class="icon-bar"></span>
  18.         <span class="icon-bar"></span>
  19.       </button>
  20.       <a class="navbar-brand" href="#">Daycare</a>
  21.     </div>
  22.     <ul class="nav navbar-nav navbar-right">
  23.         <li class="dropdown">
  24.           <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user">Profile</span><span class="caret"></span></a>
  25.           <ul class="dropdown-menu" role="menu">
  26.             <li><a href="#"><span class="glyphicon glyphicon-cog"></span>Settings</a></li>
  27.             <li><a href="#"><span class="glyphicon glyphicon-edit"></span>Edit</a></li>
  28.             <li><a href="#"><span class="glyphicon glyphicon-repeat"></span>Change your password</a></li>
  29.             <li class="divider"></li>
  30.             <li><a href="#"><span class="glyphicon glyphicon-off">Sign out</span></a></li>
  31.           </ul>
  32.         </li>
  33.       </ul>
  34.       <ul class="nav navbar-nav navbar-right">
  35.         <li class="dropdown">
  36.           <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-flag">Reports</span><span class="caret"></span></a>
  37.           <ul class="dropdown-menu" role="menu">
  38.             <li><a href="#">Top seller list</a></li>
  39.             <li><a href="#">Top seller list</a></li>
  40.           </ul>
  41.         </li>
  42.       </ul>
  43.       <ul>
  44.       <ul class="nav navbar-nav navbar-right">
  45.         <li><a href="#"><span class="glyphicon glyphicon-home">Parents</span></a></li>
  46.         <li><a href="#"><span class="glyphicon glyphicon-home">Category</span></a></li>
  47.       <ul>
  48. </nav>
  49.      <div class="container">
  50.     <div class="row">
  51.         <div class="col-md-3">
  52.             <ul class="nav nav-pills nav-stacked">
  53.                 <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
  54.                 <li><a href="#">Home</a></li>
  55.                  <li><a href="#">Home</a></li>
  56.                   <li><a href="#">Home</a></li>
  57.                    <li><a href="#">Home</a></li>
  58.                     <li><a href="#">Home</a></li>
  59.                      <li><a href="#">Users</a></li>
  60.             </ul>
  61.         </div>
  62.         <div class="col-md-9 well">
  63.            <div>
  64.               <form class="navbar-form navbar-left" role="search">
  65.                 <input type="submit" id="add" class="btn btn-success" value="add kids">
  66.                 <input type="text" class="form-control" placeholder="search">
  67.            </div>
  68.            </div>
  69.         </div>
  70.     </div>
  71. </div>
  72.  
  73. 	  <script src="js/jquery.js"></script>
  74.     <script src="js/bootstrap.min.js"></script>
  75. </body>
  76. </html>
  77.  
  78.  


Código
  1. *
  2. {
  3.   /*#5cb85c*/
  4. 	margin: 0%;
  5. 	padding: 0%;
  6. }
  7.  
  8. html,body
  9. {
  10.  
  11. }
  12. nav
  13. {
  14. 	display:block;
  15. }
  16.  
  17. .navbar-default
  18. {
  19. 	background-color: #5cb85c;
  20. 	border-color:#e7e7e7;
  21. }
  22.  
  23. .navbar-collapse
  24. {
  25. 	border-color:red;
  26. }
  27. .navbar-default .navbar-brand
  28. {
  29. 	color:white;
  30. }
  31.  
  32. .navbar-default .navbar-brand:hover,
  33. .navbar-default .navbar-brand:focus 
  34. {
  35.   color: #3498db;
  36.   background-color: transparent;
  37. }
  38.  
  39. .navbar-default .navbar-nav > li > a {
  40.   color: white;
  41. }
  42.  
  43. .navbar-default .navbar-nav > li > a:hover,
  44. .navbar-default .navbar-nav > li > a:focus {
  45.   color: #3498db;
  46.   background-color: transparent;
  47. }
  48. .container {
  49.   padding-right: -7%;
  50.   padding-left: -7%;
  51.   margin-right: auto;
  52.   margin-left: auto;
  53. }
  54. @media (min-width: 768px) {
  55.   .container {
  56.     width: 750px;
  57.   }
  58. }
  59. @media (min-width: 992px) {
  60.   .container {
  61.     width: 970px;
  62.   }
  63. }
  64. @media (min-width: 1200px) {
  65.   .container {
  66.     width: 80%;
  67.   }
  68. }
  69.  
  70. @media (min-width: 2560px) {
  71.   .container {
  72.     width: 80%;
  73.   }
  74. }
  75.  
  76. @media (min-width: 1024px) {
  77.   .container {
  78.     width: 80%;
  79.   }
  80. }
  81.  
  82. .row {
  83.   margin-right: 6%;
  84.   margin-left: -10%;
  85. }
  86.  
  87. @media (min-width: 992px) {
  88.    .col-md-3
  89.   {
  90.     float: left;
  91.   }
  92.  
  93.   .col-md-3
  94.   {
  95.   position: relative;
  96.   min-height: 1px;
  97.   padding-right: 15px;
  98.   padding-left: 15px;
  99. }
  100.  
  101. .col-md-3 {
  102.     width: 25%;
  103.   }
  104.  
  105. .nav-pills > li.active > a,
  106. .nav-pills > li.active > a:hover,
  107. .nav-pills > li.active > a:focus{
  108.   color: #fff;
  109.   background-color: #5cb85c;
  110. }
  111.  
  112. .form-control {
  113.   display: block;
  114.   width: 100%;
  115.   height: 6%;
  116.   padding: 4px 12px;
  117.   font-size: 14px;
  118.   margin-left: 10em;
  119.   line-height: 1.42857143;
  120.   color: #555;
  121.   background-color: #fff;
  122.   background-image: none;
  123.   border: 1px solid #ccc;
  124.   border-radius: 4px;
  125. }
  126.  
  127. .well {
  128.   min-height: 5%;
  129.   padding: 0.7%;
  130.   margin-bottom: 5%;
  131. }
  132.  
  133.  

me falta como hacer el script para agregar y me vaya desplegando uno por uno como tabla

Título: Re: alguien que me ayude o guie php botton agregar
Publicado por: Usuario Invitado en 17 Junio 2015, 21:00 pm
Haces una petición ajax al controlador o archivo php para que lo registre en la BBDD. Si registró, devuelve el mismo objeto enviado (json). Una vez devuelto, lo conviertes a tr (fila de tabla) y lo agregas a la tabla.

Supongamos que tu fichero registerkid.php, tiene el siguiente aspecto:

Código
  1. <?php
  2. // retrieved is json
  3. $retrieved = json_decode($_POST['data']);
  4. $status = DB->create($retrieved);
  5. if($satus) {
  6. 	echo json_encode($retrieved);
  7. } else {
  8. 	echo json_encode(DB->errors());
  9. }

Entonces haríamos la llamada:

Código
  1. var http = new XMLHttpRequest();
  2. http.onreadystatechange = function() {
  3. 	if(http.readyState === 4 && http.status === 200) {
  4. 		var table = document.querySelector('table');
  5. 		var lastChild = table.lastChild;
  6. 		var newKid =  json2trow(JSON.parse(http.responseText));
  7. 		if(lastChild) {
  8. 			insertAfter(lastChild, newKid);
  9. 		} else {
  10. 			table.appendChild(newKid);
  11. 		}
  12. 	} else if(http.readyState === 4 && http.status >= 400) {
  13. 		// hacer algo con los errores devueltos
  14. 	}
  15. };
  16. var data = {}; // your form data
  17. http.open('POST', 'registerkid.php', true);
  18. http.send('data='data); // send kid info
  19.  
  20. // insert a element after another
  21. function insertAfter(element, toadd) {
  22. 	element.parentNode.insertBefore(toadd, element.nextSibling);
  23. }
  24. // converts json to table row
  25. function json2trow(json) {
  26. 	var tr = document.createElement('tr');
  27. 	for(var key in json) {
  28. 		var td = document.createElement('td');
  29. 		var text = document.createTextNode(json[key]);
  30. 		td.appendChild(text);
  31. 		tr.appendChild(td);
  32. 	}
  33. 	return tr;
  34. }

Ahora asocias el evento click del botón Add Kid al código anterior:

Código
  1. var addkid = document.querySelector('#add');
  2. addkid.addEventListener('click', function(e) {
  3.   e.preventDefault(); // evita submit del forumulario
  4.   /* AQUÍ COLOCA EL CÓDIGO ANTERIOR */
  5. });

Vas a enviar la información del nuevo kid en formato JSON, así que debes de serializar el formulario y crear el JSON. Si no tienes experiencia en JS, usa JQuery.


Saludos.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines