So I've been working on a small system which involves codes which is used for a user to redeem them for some sort of reward.
So far I have this script in PHP and HTML:
http://pastebin.com/UUsEKpev
It's only showing one result which you can see here, I want it to display multiple results in a table going down showing all results.
<?php
$yn;
mysql_connect("localhost", "root", "password") or die(mysql_error());
mysql_select_db("mcv") or die(mysql_error());
$result = mysql_query("SELECT * FROM Codes")
or die(mysql_error());
$row = mysql_fetch_array( $result );
// Print out the contents of the entry
if ($row['Used'] == 1) {
$yn = "Yes";
}
else{
$yn = "No";
}
?>
<html>
<head>
<title>Minecraft Codes</title>
<style type="text/css">
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th {
border: 1px solid #C3C3C3;
padding: 3px;
vertical-align: top;
width: 20%;
background-color: #E5EECC;
}
table.reference {
background-color: white;
border: 1px solid #C3C3C3;
border-collapse: collapse;
width: 50%;
}
table.reference td {
border: 1px solid #C3C3C3;
padding: 3px;
vertical-align: top;
width: 20%;
}
table, th, td, input, textarea {
font-size: 100%;
}
body, p, h1, h2, h3, h4, table, td, th, ul, ol, textarea, input {
font-family: verdana,helvetica,arial,sans-serif;
}
</style>
</head>
<body>
<center>
<br />
<h1><u>Minecraft Server VIP Codes</u></h1>
<br />
<table class="reference">
<tr>
<th>Code</th>
<th>Used?</th>
</tr>
<?php echo "<tr><td>".$row['Code']."</td><td>".$yn."</td></tr>"; ?>
</table>
</center>
</body>
</html>
Your problem is that you are only fetching one row:
$row = mysql_fetch_array( $result );
That line fetches the current row of the result set. You want to do that in a loop:
$rows = array();
while ($row = mysql_fetch_array($result)) {
$rows[] = $row;
}
If you can please avoid using the mysql_ functions, they are deprecated, see the giant warning here and read this
<table class="reference">
<tr>
<th>Code</th>
<th>Used?</th>
</tr>
<?php while ($row = mysql_fetch_array($result)): ?>
<?php
if ($row['Used'] == 1) {
$yn = "Yes";
}
else{
$yn = "No";
}
?>
<tr>
<td><?php echo $row['Code']; ?></td>
<td><?php echo $yn; ?></td>
</tr>
<?php endwhile; ?>
</table>
Well yes, you call mysql_fetch_row() only a single time, thus you only retrieve a single row. You have to wrap that into a loop that is executed as many times as there are rows.
There are millions of examples on the internet that you can learn from...
Related
I got a homework that tells me to connect MySQL database to our PHP files and echo it in an HTML table. I managed to connect it, but my problem is I cannot style the table, the other element seems fine, so I think the stylesheet is linked properly.
This is my PHP ->
<div id="stats" class="stats">
<center><h2>Statistic.</h2></center>
<table>
<tr>
<th>Number</th>
<th>Degree</th>
<th>Institution</th>
<th>Graduate</th>
</tr>
<?php
$conn = mysqli_connect("localhost", "root", "", "my_edu");
if ($conn -> connect_error) {
die("Connection Failed:". $conn -> connect_error);
}
$sql = "SELECT * FROM edu";
$result = $conn -> query($sql);
if ($result -> num_rows > 0) {
while ($row = $result -> fetch_assoc()) {
echo "<tr><td>". $row["number"] ."</td><td>". $row["degree"] ."</td><td>". $row["name"] ."</td><td>". $row["graduate"] ."</td></tr>";
}
}
else {
echo "0 result";
}
mysqli_close($conn);
?>
</table>
</div>
The table is printed, as you can see here
and this is the one that was supposed to style the table
.stats table{
width: 800px;
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
text-align: center;
}
/*STATISTIC*/
.stats{
width: 100%;
height: 600px;
background: #FFFFFF;
}
.stats h2{
padding: 50px;
font-weight: bold;
font-size: 40px;
}
.stats h3{
padding-top: 100px;
font-weight: bold;
font-size: 50px;
}
.stats table{
width: 800px;
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
text-align: center;
}
<div id="stats" class="stats">
<center><h2>Statistic.</h2></center>
<table>
<tr>
<th>Number</th>
<th>Degree</th>
<th>Institution</th>
<th>Graduate</th>
</tr>
<?php
$conn = mysqli_connect("localhost", "root", "", "my_edu");
if ($conn -> connect_error) {
die("Connection Failed:". $conn -> connect_error);
}
$sql = "SELECT * FROM edu";
$result = $conn -> query($sql);
if ($result -> num_rows > 0) {
while ($row = $result -> fetch_assoc()) {
echo "<tr><td>". $row["number"] ."</td><td>". $row["degree"] ."</td><td>". $row["name"] ."</td><td>". $row["graduate"] ."</td></tr>";
}
}
else {
echo "0 result";
}
mysqli_close($conn);
?>
</table>
</div>
You have to apply css on table, thead,th,td ,tr. You'r applying css on which is parent div.
here's a example
*{
font-family:sans-serif;
}
table tr td,th:not(.th-head){
border-right: 1px solid blue;
}
table,tfoot{
border:1px solid #a8afcc;
word-break: break-all;
}
table:nth-of-type(1) caption {
font-weight: 800;
}
table {
border-collapse: collapse;
border-spacing:1rem 0.1rem;
table-layout:fixed;/*auto viene por defecto*/
width: 100%;
empty-cells: hide;
text-align:center
}
thead{
color:white;
background:rgb(25, 27, 151) ;
}
thead th{
/* border: none; */
}
table tbody tr:not(tfoot):nth-child(odd) {
background: #e1e6f8;
}
table tbody tr:nth-child(even) {
background: #c3cdff;
}
tr:not(.tr-head):hover{
background:rgb(130, 130, 130);
}
td:hover{
background:rgb(126, 126, 126);
}
td{
text-align: right;
}
th{
text-align:center;
}
<table >
<thead>
<tr class="tr-head">
<th class="th-head">Col 1</th>
<th class="th-head">Col 2</th>
<th class="th-head">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>300</td>
<td>2</td>
<td>600</td>
</tr>
<tr>
<td>1000</td>
<td>40</td>
<td>4000</td>
</tr>
</tbody>
</table>
<div id="stats" class="stats">
<h2>Statistic.</h2>
<table>
<tr>
<th>Number</th>
<th>Degree</th>
<th>Institution</th>
<th>Graduate</th>
</tr>
<?php
$conn = mysqli_connect("localhost", "root", "", "my_edu");
if ($conn -> connect_error) {
die("Connection Failed:". $conn -> connect_error);
}
$sql = "SELECT * FROM edu";
$result = $conn -> query($sql);
if ($result -> num_rows) {
while ($row = $result -> fetch_assoc()) {
?>
<tr>
<td><?= $row["number"] ?></td>
<td><?= $row["degree"] ?></td>
<td><?= $row["name"] ?></td>
<td><?= $row["graduate"] ?></td>
</tr>
<?php
}
}
else {
echo "0 result";
}
mysqli_close($conn);
?>
</table>
</div>
<link rel="stylesheet" href="yourStyleCode.css">
I went ahead and made a little tweak on your css
/*STATISTIC*/
.stats{
width: 100%;
height: 600px;
background: #FFFFFF;
}
.stats h2{
padding: 50px;
font-weight: bold;
font-size: 40px;
}
.stats th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #0e76a7;
color: white;
}
.stats table {
width: 75%;
margin: auto;
border-radius: 9px;
padding: 3px;
text-align: center;
}
.stats td, .stats th {
border: 1px solid #ddd;
padding: 8px;
}
With the stats id you scoped your style. Means that if you style something inside the scope it have not affect on other part your website. But you need the right selectors to go inside the scope. .stats table tr {...} for example. In precompiled CSS like SASS etc. it quite easy to write the style. But this is only a note.
.scope {
tr, td { ... }
}
this is my first post and im already totally confused about my project right now :x
im able to make a successful connection to the sql db and also receive my data which displays on the top left, BUT its supposed to display in a html table, not somewhere on the screen :O
Here is the website to see the code in action, though there is none yet!
http://blackskill.square7.ch/
Here is the code which is running fine, but maybe im just too stupid and new for coding yet xd
<!DOCTYPE html>
<?php
$connection=mysqli_connect("localhost","username","password","db_name");
if ($connection) {
echo "database online <br>";
} else {
die("Connection failed. Reason: ".mysqli_connection_error());
}
$sql="SELECT * FROM blackskill_playerdb";
$results=mysqli_query($connection,$sql);
if (mysqli_num_rows($results)>0) {
while($row=mysqli_fetch_array($results)) {
echo '<tr>
<td>'.$row[0].'</td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
</tr>';
echo "<br>";
}
}
mysqli_close($connection);
?>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2><center>Inofficial S.K.I.L.L. - Special Force 2 - Dishonor List</center></h2>
<input type="text" id="myInput" onkeyup="aa" placeholder="Search for player..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:40%;">Player</th>
<th style="width:20%;">Clan</th>
<th style="width:20%;">Evidence</th>
<th style="width:20%;">Added to list</th>
<?php while($row=mysqli_fetch_array($results)) : ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['clan']; ?></td>
<td><?php echo $row['rulebreak']; ?></td>
<td><?php echo $row['addlist']; ?></td>
</tr>
<?php endwhile ?>
</tr>
</table>
<tbody>
</body>
</html>
i hope we can find an answer together with friendship, emotions and friendship!
regards
I want to apply filter to my html table for following:
1. Search name/emailid
2. Page Length (As my table has thousands of records)
Also, I want to give an option to update record where I enter name, all information should be autopopulated to that form and then user can update whatever he wants to.
Following is my code given:
<?php
$db_host = 'localhost'; // Server Name
$db_user = 'root'; // Username
$db_pass = ''; // Password
$db_name = 'contacts'; // Database Name
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Failed to connect to MySQL: ' . mysqli_connect_error());
}
$sql = 'SELECT *
FROM usait LIMIT 50' ;
$query = mysqli_query($conn, $sql);
if (!$query) {
die ('SQL Error: ' . mysqli_error($conn));
}
?>
<html>
<head>
<title>Displaying MySQL Data in HTML Table</title>
<style type="text/css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
body { {
font-size: 15px;
color: #343d44;
font-family: "segoe-ui", "open-sans", tahoma, arial;
padding: 0;
margin: 0;
}
table {
margin: auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
font-size: 12px;
}
h1 {
margin: 25px auto 0;
text-align: center;
text-transform: uppercase;
font-size: 17px;
}
table td {
transition: all .5s;
}
/* Table */
.data-table {
border-collapse: collapse;
font-size: 14px;
min-width: 537px;
}
.data-table th,
.data-table td {
border: 1px solid #e1edff;
padding: 7px 17px;
}
.data-table caption {
margin: 7px;
}
/* Table Header */
.data-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}
/* Table Body */
.data-table tbody td {
color: #353535;
}
.data-table tbody td:first-child,
.data-table tbody td:nth-child(4),
.data-table tbody td:last-child {
text-align: right;
}
.data-table tbody tr:nth-child(odd) td {
background-color: #f4fbff;
}
.data-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
}
/* Table Footer */
.data-table tfoot th {
background-color: #e5f5ff;
text-align: right;
}
.data-table tfoot th:first-child {
text-align: left;
}
.data-table tbody td:empty
{
background-color: #ffcccc;
}
</style>
</head>
<body>
<table class="data-table" id="example">
<caption class="title">US Data</caption>
<thead>
<tr>
<th>id</th>
<th>ContactOwner</th>
<th>LeadSource</th>
<th>First_name</th>
<th>Last_name</th>
<th>AccountName</th>
<th>Title</th>
<th>EmailID</th>
<th>Department</th>
<th>Industry</th>
<th>Phone</th>
<th>Mobile</th>
<th>Fax</th>
<th>DOB</th>
<th>Assistant</th>
<th>AsstPhone</th>
<th>ReportsTo</th>
<th>LinkedIn</th>
<th>CallStatus</th>
<th>Street</th>
<th>OtherStreet</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Country</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
$total = 0;
while ($row = mysqli_fetch_array($query))
{
echo '<tr>
<td>'.$row['id'].'</td>
<td>'.$row['ContactOwner'].'</td>
<td>'.$row['LeadSource'].'</td>
<td>'.$row['First_name'].'</td>
<td>'.$row['Last_name'].'</td>
<td>'.$row['AccountName'].'</td>
<td>'.$row['Title'].'</td>
<td>'.$row['EmailID'].'</td>
<td>'.$row['Department'].'</td>
<td>'.$row['Industry'].'</td>
<td>'.$row['Phone'].'</td>
<td>'.$row['Mobile'].'</td>
<td>'.$row['Fax'].'</td>
<td>'.$row['DOB'].'</td>
<td>'.$row['Assistant'].'</td>
<td>'.$row['AsstPhone'].'</td>
<td>'.$row['ReportsTo'].'</td>
<td>'.$row['LinkedIn'].'</td>
<td>'.$row['CallStatus'].'</td>
<td>'.$row['Street'].'</td>
<td>'.$row['OtherStreet'].'</td>
<td>'.$row['City'].'</td>
<td>'.$row['State'].'</td>
<td>'.$row['Zip'].'</td>
<td>'.$row['Country'].'</td>
<td>'.$row['Description'].'</td>
</tr>';
$no++;
}?>
</tbody>
<tfoot>
<tr>
<th colspan="26">TOTAL</th>
<th><?=number_format($total)?></th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 100, "All"]]
} );
} );
</script>
</body>
</html>
Use server-side processing feature of DataTables instead of rendering inside HTML. With server-side processing able to handle large data sets. Also other features will be work like a charm filtering, searching, pagination etc. as you want.
DataTables provide simple example for this. Frontend and server-side scripts are both available, you have to just configure your MySQL connection and will be ready to go.
So I made this div that is populated by php calls to my server to populate it with a table per entry in the Server table. Aka, a php script connects to my server, checks how many entries there are, and creates a table for each one to populate the div. So in the end there are several table entries displayed corresponding to each entry in the database.
I don't know of a jsfiddle/codepin type place that allows php since it's server-side so I took a picture to show what it looks like. The arrows are pointing to the two entries where the box they are in is wider than the others. This happens any time I do not include a link (an optional entry in the database). I assume this is because it is trying to fill the space left by having no link in the last table row, but the last part of my php script should have removed that last row if it was empty (assuming I wrote it correctly) and it shouldn't need to stretch to fill something no longer there.
So, what I'm asking here is how do I make each of the orange rows the same size?
Picture of the box: http://i67.tinypic.com/5k3nzs.png
HTML (Relevant portion)
<div id="announcements_box">
<h2>Announcements</h2>
<?php include "scripts/php/getAnnouncement.php";?>
<div class="bottom_color"></div>
</div> <!--end announcement_box-->
CSS (Relevant portion)
#announcements_box{
table-layout: fixed;
display: inline-block;
background-color: #FFFFFF;
width: 47%;
color: black;
margin-left: 1rem;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#announcements_box h2{
font-weight: normal;
font-size: 2rem;
background-color: navy;
color: white;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.announcement_blocks{
width: 100%;
margin-bottom: .5rem; /* space after each block */
background-color: #C0C0C0;
}
.announcement_blocks img{
/* height: 75px; */
width: 75px;
margin: .5rem;
padding-top: 1rem;
}
.announcement_blocks td{
/* word-wrap: break-word;
word-break: break-all;
*/
}
.announcement_blocks td.title{
text-align: center;
background-color: #E18A07;
font-weight: bold;
}
.announcement_blocks td.descr{
padding-left: 1rem;
padding-right: 1rem;
}
.announcement_blocks td.link{
text-align: center;
/*
padding-left: 1rem;
padding-right: 1rem;
*/
}
.announcement_blocks td.img_s{
width: 1rem;
background-color: #330000;
}
.bottom_color{
height: 2.5rem;
background-color: navy;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
margin-top: -.5rem;
}
PHP (Relevant portion)
<?php require "scripts/php/database_connect.php"?>
<?php
$query = mysqli_query($con, "SELECT * FROM Announcements") or die("Error in query. Details: ".mysqli_error());
while($row = mysqli_fetch_assoc($query))
{
?>
<table class="announcement_blocks">
<tr>
<td class="img_s" rowspan="3"><?php echo "<img src='/img/announcement_icon/announcement_imp.png" . "' alt='announcement'>";?></td>
<td class="title"><?php echo $row['title']; ?></td>
</tr>
<tr>
<td class="descr"><?php echo $row['description']; ?></td>
</tr>
<?php if($row['link'] != "")
{
?>
<td class="link"><?php echo $row['link']; ?></td>
<?php
}
?>
</table>
<?php
}
?>
I know this is long and probably a bit confusing since I can't just hand you a fiddle or codepin to toy with but any ideas?
Thanks
In bottom if links are there its working, if not there its height increased.
to avoid this you can give
<?php if($row['link'] != ""){?>
<?php echo $row['link']; ?>
<?}else { echo "<br>";}?>
Try to use this php code:
<?php
$query = mysqli_query($con, "SELECT * FROM Announcements") or die("Error in query. Details: ".mysqli_error());
while($row = mysqli_fetch_assoc($query)){?>
<table class="announcement_blocks">
<tr>
<td class="img_s" rowspan="3"><?php echo "<img src='/img/announcement_icon/announcement_imp.png" . "' alt='announcement'>";?></td>
<td class="title"><?php echo $row['title']; ?></td>
</tr>
<tr>
<td class="descr"><?php echo $row['description']; ?></td>
</tr>
<tr>
<td class="link">
<?php if($row['link'] != ""){?>
<?php echo $row['link']; ?>
<?}?>
</td>
</tr>
</table>
<?}?>
Please anyone who can help me with this problem. I have a html file with a question. When submit is clicked it calls a php(which is connected with my database in Oracle) and it shows a table inside the html (using ajax).
I would like to know how can i show that table in a nicer form? Can I design it?
Here is my code in php
<?php
{
session_start();
include "connect.php";
}
$conn = DBConnect();
$stid = DBExecute($conn, "select something...");
$total = 0;
echo "<table>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>";
while ($row = oci_fetch_array($stid, OCI_ASSOC)) {
echo "<tr><td>";
echo $row['something'];
echo "</td>";
echo "<td>";
echo $row['something'];
echo "</td>";
}
echo "</table>";
?>
and I want to have for example this css instructions for the table i will show...
#newspaper-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
border: 1px solid #69c;
}
#newspaper-a th
{
padding: 12px 17px 12px 17px;
font-weight: normal;
font-size: 14px;
color: #039;
border-bottom: 1px dashed #69c;
}
#newspaper-a td
{
padding: 7px 17px 7px 17px;
color: #669;
}
#newspaper-a tbody tr:hover td
{
color: #339;
background: #d0dafd;
}
Please does anyone know what should i do to succeed it???
Important the table will be shown inside the same page not in another one..
You need to add your ID to the table div - like this:
<?php
{
session_start();
include "connect.php";
}
$conn = DBConnect();
$stid = DBExecute($conn, "select something...");
$total = 0;
// ADD YOUR ID HERE vvvvvvvv
echo "<table id="newspaper-a">
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>";
while ($row = oci_fetch_array($stid, OCI_ASSOC)) {
echo "<tr><td>";
echo $row['something'];
echo "</td>";
echo "<td>";
echo $row['something'];
echo "</td>";
}
echo "</table>";
?>
http://jsfiddle.net/jakemulley/hs3mF/