Cara Menampilkan Data Dari Database Ke Html

Menampilkan data dari database ke situs web bukan hanya menggunakan bahasa pemrograman HTML saja, tapi dikombinasikan juga dengan bahasa pemrograman PHP. Artikel kali ini akan membicarakan bagaimana cara gampang untuk memperlihatkan data dari database. Langsung saja, simak langkah-langkahnya di bawah ini.

Cara Menampilkan Data dari Database ke HTML

Sebelum Anda membuat file-file yang mampu memperlihatkan data dari database, tentukan Anda telah mempunyai database yang akan ditampilkan. Berikut ini acuan database yang bisa Anda ikuti:

Cara Menampilkan Data dari Database ke HTML

Daftar Isi

1. Membuat Script Koneksi.PHP

Hal pertama yang harus Anda kerjakan adalah sediakan 3 file kosong. File-file tersebut dipakai untuk menciptakan file koneksi.php, file css, dan file untuk memperlihatkan data. Pertama-tama kita akan membuat file koneksi.php apalagi dulu.

File ini yang berfungsi untuk menghubungkan Anda dengan database dan mampu mengambil data dari database. Sebenarnya nama filenya tidak harus koneksi.php yang paling penting file yang Anda buat disimpan dalam bentuk format .php sebab kalau Anda menyimpan script ini dalam format .html, maka proses tidak akan berjalan.

Berikut ini acuan script koneksi.php yang bisa Anda gunakan.

$db_host = 'localhost'; // Nama Server
$db_user = 'root'; // User Server
$db_pass = ''"; // Password Server
$db_name = 'test'; // Nama Database

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) 
die ('Gagal terhubung dengan MySQL: ' . mysqli_connect_error());


$sql = 'SELECT *
FROM pemasaran';

$query = mysqli_query($conn, $sql);

if (!$query) 
die ('SQL Error: ' . mysqli_error($conn));

?>

Jika Anda telah menggunakan pHP 7, maka tidak diusulkan untuk memakai fungsi mysql_xxx sebab telah tidak berlaku, melainkan silakan gunakan mysqli_xxx atau PHP PDO untuk koneksi, query data, dan menampilkan data.

Script yang perlu Anda ubah dari acuan scrip di atas adalah:

$db_name = ‘test’; -> Silakan Anda ubah ‘test’ dengan nama database yang Anda miliki.

$db_user = ‘root’;

$db_pass = ””; -> Silakan Anda ubah jika Anda memakai nama user dan password untuk mengakses database.

$sql = ‘SELECT *

FROM penjualan’; -> Silakan Anda ubah ‘penjualan’ dengan nama tabel yang Anda ingin tampilkan.

2. Membuat Script Menampilkan Data

Berikutnya yaitu menciptakan query yang berfungsi untuk memperlihatkan data dari database Anda. Disini selaku contoh aku menciptakan nama filenya data.php. Silakan sesuaikan dengan keinginan Anda, yang penting file tersebut tersimpan dalam format .php alasannya adalah akan ada query php di dalam file tersebut. Langsung saja simak pola script nya di bawah ini.



Menampilkan Data MySQL Ke Dalam Tabel HTML




Tabel 1













include('koneksi.php');
$no = 1;
$bulan = array (1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
while ($row = mysqli_fetch_array($query))

$tgl = explode('-', $row['tanggal']);
$harga = $row['harga'] == 0 ? '' : number_format($row['harga'], 0, ',', '.');
echo '





';
$no++;
?>


Data Penjualan Alat Tulis KantorNO PEMBELI BARANG TANGGAL HARGA
'.$no.' '.$row['pembeli'].' '.$row['barang'].' '.$tgl[2] . ' ' . $bulan[(int)$tgl[1]] . ' ' . $tgl[0] . ' '.$harga.'

Data Penjualan Alat Tulis Kantor
NO	PEMBELI	BARANG	TANGGAL	HARGA
'.$no.'	'.$row['pembeli'].'	'.$row['barang'].'	'.$tgl[2] . ' ' . $bulan[(int)$tgl[1]] . ' ' . $tgl[0] . '	'.$harga.'

Simak penjelasannya di bawah ini:

Terdapat script PHP di tengah-tengah tabel. Script tersebut yang berfungsi untuk memperlihatkan data dari database Anda.

include(‘koneksi.php’); -> Untuk mengundang file koneksi.php yang telah Anda buat di permulaan tadi.

$no = 1; -> Deklarasi awal bahwa nomor akan dimulai dari angka 1.

$bulan = array (1 => ‘Januari’, ‘Februari’, ‘Maret’, ‘April’, ‘Mei’, ‘Juni’, ‘Juli’, ‘Agustus’, ‘September’, ‘Oktober’, ‘November’, ‘Desember’); -> Untuk mendefenisikan nama bulan dalam bentuk array yang dimulai dengan index 1 bukan 0.

mysqli_fetch_array -> Untuk mengambil data MySQL yang mau menghasilkan associative array dan indexed array.

explode(‘-‘, $row[‘tanggal’]) -> Untuk memecah tanggal menjadi array, misal: 2016-10-17 menjadi: $tgl[0]=2016, $tgl[1]=10, dan $tgl[2]=17

$harga -> untuk mendefinisikan variabel harga. Jika nilainya 0 kita ubah nilainya menjadi kosong. Hal ini untuk mempermudah memberi tanda (style css) pada kolom yang kosong.

’.$no.' -> Untuk mencetak output ke tabel.

tgl[2].’ ‘.$bulan[(int)$tgl[1]].’ ‘.$tgl[0] -> Untuk melaksanakan statement (int)$tgl[1] untuk mengganti bulan menjadi integer, 01 menjadi 1, o2 menjadi 2, dst.., sehingga sesuai dengan index array.

$no++; -> Operator increment yang dipakai untuk menciptakan nomor urut.

3. Membuat Script CSS

Setelah file koneksi.php dan data.php telah final, langkah berikutnya Anda mampu menyertakan CSS untuk menciptakan tampilan menjadi makin lebih menarik. Berikut ini acuan script CSS yang mampu Anda gunakan.

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;

Script CSS mampu Anda modifikasi sesuai dengan cita-cita dan kebutuhan Anda. Jadi, jangan terlalu terpaku dengan pola script di atas. Berikut ini teladan performa dari script-script di atas.

Cara Menampilkan Data dari Database ke HTML

Sekian postingan kali ini yang membicarakan ihwal bagaimana cara memperlihatkan data dari database ke HTML dengan gampang. Semoga postingan ini mampu menolong dan bermanfaat bagi Anda. Terimakasih 🙂

Sumber mesti di isi

Cara Menampilkan Data Dari Database Ke Html