Scribd
Upload
2 views

PASOS

Uploaded by

nel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

PASOS

Uploaded by

nel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Tecnologías usadas:

 PHP : El lenguaje de scripting del lado del servidor utilizado para la lógica
backend, las interacciones de base de datos y las operaciones del servidor.
 Bootstrap 4: El marco front-end que mejora el atractivo visual y la capacidad de
respuesta de la aplicación web.
 DataTables: Un plugin jQuery utilizado para mostrar y administrar datos
tabulares, proporcionando características avanzadas como clasificación,
búsqueda y paginación.
 JavaScript y jQuery : Utilizado para scripts del lado del cliente para mejorar
las interacciones del usuario, como la exportación de datos a Excel.
 MySQL : El sistema de gestión de bases de datos relacionales utilizado para
almacenar y recuperar datos del inventario del producto.
 SheetJS (xlsx): Una biblioteca JavaScript utilizada para crear archivos Excel en
el lado del cliente.
 <html lang="en">
 <head>
 <!-- Bootstrap CSS -->
 <!-- Data Table -->

 </head>
 <body>
 <!—Agregar productos al Modal -->
 <!-- Actualizar Product Modal -->

 ///////////////////////////
 <!-- Data Table -->
 <!-- Boostrap JS -->
 <!-- SheetJS library -->


 <!-- SheetJS library (librería del excel) -->

 </body>
 </html>

<?php
session_start();
?>
<html>
<head>
<!-- Bootstrap CSS -->
<!-- Data Table -->
</head>
<body>
/use for MySQLi-OOP
</body>
Creación de la conexión de la base de datos

Abra su tipo de editor de texto (notepadod, etc.). Luego sólo copiar/pedir el código de abajo y
luego nombrarlo conn.php.

nombrarlo conn.php.

index.php.
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8" name="viewport"
content="width=device-width, initial-scale=1"/>
5. <link rel="stylesheet" type="text/css"
href="css/bootstrap.css" />
6. </head>
7. <body>
8. <nav class="navbar navbar-default">
9. <div class="container-fluid">
10. <a class="navbar-brand"
href="https://sourcecodester.com">Sourcecodester</a>
11. </div>
12. </nav>
13. <div class="col-md-3"></div>
14. <div class="col-md-6 well">
15. <h3 class="text-primary">PHP - Export
Table Data As Excel</h3>
16. <hr style="border-top:1px dotted
#ccc;"/>
17. <button type="button" class="btn btn-
success" data-toggle="modal" data-
target="#form_modal"><span class="glyphicon glyphicon-
plus"></span> Add student</button>
18. <br /><br />
19. <table class="table table-bordered">
20. <thead class="alert-info">
21. <tr>
22.
<th>Firstname</th>
23.
<th>Lastname</th>
24. <th>Year</th>
25.
<th>Section</th>
26. </tr>
27. </thead>
28. <tbody>
29. <?php
30.
require 'conn.php';
31.
32.
$query = mysqli_query($conn, "SELECT * FROM
`student`") or die(mysqli_error());
33.
while($fetch = mysqli_fetch_array($query)){
34. ?>
35. <tr>
36. <td><?
php echo $fetch['firstname']?></td>
37. <td><?
php echo $fetch['lastname']?></td>
38. <td><?
php echo $fetch['year']?></td>
39. <td><?
php echo $fetch['section']?></td>
40. </tr>
41. <?php
42. }
43. ?>
44. </tbody>
45. <tfoot>
46. <tr>
47. <td><a
class="btn btn-info" href="export_excel.php">Save as
Excel</a></td>
48. <td></td>
49. <td></td>
50. <td></td>
51. </tr>
52. </tfoot>
53. </table>
54. </div>
55. <div class="modal fade" id="form_modal" aria-
hidden="true">
56. <div class="modal-dialog">
57. <div class="modal-content">
58. <form method="POST"
action="save_student.php">
59. <div class="modal-
header">
60. <h3
class="modal-title">Add Student</h3>
61. </div>
62. <div class="modal-
body">
63. <div
class="col-md-2"></div>
64. <div
class="col-md-8">
65. <div
class="form-group">
66.
<label>Firstname</label>
67.
<input type="text" name="firstname" class="form-control"
required="required"/>
68.
</div>
69. <div
class="form-group">
70.
<label>Lastname</label>
71.
<input type="text" name="lastname" class="form-control"
required="required"/>
72.
</div>
73. <div
class="form-group">
74.
<label>Year</label>
75.
<select name="year" class="form-control"
required="required">
76.
<option value=""></option>
77.
<option value="I">I</option>
78.
<option value="II">II</option>
79.
<option value="III">III</option>
80.
<option value="IV">IV</option>
81.
</select>
82.
</div>
83. <div
class="form-group">
84.
<label>Section</label>
85.
<select name="section" class="form-control"
required="required">
86.
<option value=""></option>
87.
<option value="A">A</option>
88.
<option value="B">B</option>
89.
<option value="C">C</option>
90.
<option value="D">D</option>
91.
</select>
92.
</div>
93. </div>
94. </div>
95. <br
style="clear:both;"/>
96. <div class="modal-
footer">
97. <button
type="button" class="btn btn-danger" data-
dismiss="modal"><span class="glyphicon glyphicon-
remove"></span> Close</button>
98. <button
class="btn btn-primary" name="save"><span class="glyphicon
glyphicon-save"></span> Save</button>
99. </div>
100. </form>
101. </div>
102. </div>
103. </div>
104. <script src="js/jquery-3.2.1.min.js"></script>
105. <script src="js/bootstrap.js"></script>
106. </body>
107. </html>

Creating PHP Query


This code contains the php query of the application. This code will store the student
information to the MySQLi database server. To do that just copy and write this block of
codes inside the text editor, then save it as save.php.
1. <?php
2. require_once 'conn.php';
3.
4. if(ISSET($_POST['save'])){
5. $firstname = $_POST['firstname'];
6. $lastname = $_POST['lastname'];
7. $year = $_POST['year'];
8. $section = $_POST['section'];
9.
10. mysqli_query($conn, "INSERT INTO
`student` VALUES('', '$firstname', '$lastname', '$year',
'$section')") or die(mysqli_error());
11.
12. header("location: index.php");
13. }
14. ?>

Creating the Main Function


This code contains the main function of the application. This code will convert your
html table into a readable excel file when the button is clicked. To make this just copy
and write these block of codes below inside the text editor, then save it
as export_excel.php
1. <?php
2. header("Content-Type: application/xls");
3. header("Content-Disposition: attachment;
filename=student_list.xls");
4. header("Pragma: no-cache");
5. header("Expires: 0");
6.
7. require_once 'conn.php';
8.
9. $output = "";
10.
11. $output .="
12. <table>
13. <thead>
14. <tr>
15. <th>Student
ID</th>
16. <th>First
Name</th>
17. <th>Last
Name</th>
18. <th>Year</th>
19.
<th>Section</th>
20. </tr>
21. <tbody>
22. ";
23.
24. $query = $conn->query("SELECT * FROM
`student`") or die(mysqli_errno());
25. while($fetch = $query->fetch_array()){
26.
27. $output .= "
28. <tr>
29. <td>".
$fetch['stud_id']."</td>
30. <td>".
$fetch['firstname']."</td>
31. <td>".
$fetch['lastname']."</td>
32. <td>".
$fetch['year']."</td>
33. <td>".
$fetch['section']."</td>
34. </tr>
35. ";
36. }
37.
38. $output .="
39. </tbody>
40.
41. </table>
42. ";
43.
44. echo $output;
45.
46.
47. ?>

You might also like