Open in app

Sign in

Write

Sign in

Membuat List Lagu Menggunakan Database Sederhana

Farhatun Nissa
5 min readDec 29, 2019

--

Hallo teman-teman, kali ini saya akan berbagi tentang membuat database menggunakan XAMPP untuk koneksi PHP-MySQL.

contoh database playlist lagu

Tahap Pembuatan Database

Apabila dalam laptop yang digunakan belum menginstall XAMPP harus di download dulu di link https://sourceforge.net/projects/xampp/ atau boleh di link lain, kemudian install sampai berhasil.

tampilan XAMPP

klik “start” pada menu Action untuk Module “Apache” dan “MySQL” sehingga terlihat kedua model tersebut berubah warna menjadi hijau dan terlihat pada jendela log dibawahnya bahwa program sedang berjalan, dan ini akan berjalan sampai pembuatan web database kita selesai.

Kemudian buka file browser (chrome atau IE) kemudian ketikkan
“ http://localhost/phpmyadmin”

tampilan http://localhost/phpmyadmin

Selanjutnya, membuat database yaitu klik “New” pada menu sebelah kiri. Munculah “Create Database”, masukkan nama database yang akan dibuat. Disini saya membuat nama “mymusic”, dan biarkan isian disampingnya “Collation” dan klik “Create” setelah itu muncul gambar seperti berikut:

membuat tabel dalam database yaitu tabel: tbmusic

Jumlah kolom dalam contoh ini dibuat 3 kemudian klik “Go”, setelah itu buatlah field seperti gambar berikut:

isian dari tabel tbmusic

Pada kolom “id” diberi centang pada “A_I” atau Auto Increment, dimana nomor akan bertambah jika terdapat record baru, ketika di klik “A_I” ini akan muncul jendela kecil menanyakan tentang “Primary” key dengan jenis/type “INT” karena berupa penomoran. Sedangkan untuk tabel “judul lagu” dan “penyanyi” menggunakan jenis “VARCHAR” yang dapat diisikan oleh angka atau kalimat. Kemudian klik Simpan/Save.

isian contoh data untuk tbmusic

Setelah itu terlihat secara keseluruhan tabel list lagu yang telah kita susun, untuk mencoba mengisinya. Maka pada menu klik lah “Tambahkan/Insert”, kemudian klik “Go/Kirim” dan lihatlah hasilnya pada menu “Browse/Jelajahi”. Sampai tahap ini berarti database list lagu sudah siap.

Tahap Koneksi PHP-MySQL

Langkah selanjutnya bukalah Notepad, dan copy paste script berikut:

<?php
$kon = mysqli_connect(‘localhost’,’root’,’’);
$link = mysqli_select_db($kon,”mymusic”) or die(mysqli_error());
?>

setelah itu carilah folder “xampp” di Local Disk (C:), kemudian cari folder “htdocs” setelah itu buatlah folder baru dengan nama “mymusic”, sehingga (dalam laptop saya) terbentuk seperti ini “C:\xampp\htdocs\mymusic”.

Simpanlah kode diatas dengan nama “db_connect.php” (simpan dalam bentuk php bukan dalam txt).

Kemudian buka kembali Notepad dan copylah script berikut:

<?php 
include "db_connect.php"; 
$query=mysqli_query ($kon, "SELECT * FROM tbmusic")or die 
(mysqli_error()); 
$jumlah = mysqli_num_rows($query); 
echo "<html>"; 
echo "<head>"; 
echo "<link href='style.css' type='text/css' rel='stylesheet'>"; 
echo "</head>"; 
echo "<title>My Playlist</title>"; 
echo "<body>"; 
echo "<font color='#D16900' face='Arial' size=3><b><br>Music Collection &#9829</b></font><br><br>"; 
echo "<a href='add.php' style=\"text-decoration: none\"><font 
face='tahoma' size='1'>Add List Song</font></a><br>"; 
echo "<br><table  border=\"0\" cellpadding=\"1\" cellspacing=\"1\" 
bordercolor=\"blue\" bgcolor=\"white\"> 
<tr bgcolor='#AADCCA' height=\"30\"><font color='white'>  
     <th align='left'><font color='white' face='Arial' 
size=2>No</font></th>         
     <th align='left'><font color='white' face='Arial' 
size=2>Judul</font></th>         
     <th align='right'><font color='white' face='Arial' 
size=2>Penyanyi</font></th>         
     <th align='right'><font color='yellow' face='Arial' size=2>Ubah?</font></th> 
</tr>";  
$j=0; 
while ($row=mysqli_fetch_array($query)) {     
    echo "<tr><td align='center' bgcolor='#EED6BB'>";
    echo "<font face='Arial' size=1>";
    echo $j+1;
    echo"</font>";
    echo"</td>";     
    echo "<td align='left' bgcolor='#EED6BB'>";
    echo "<font face='Arial' size=1>";
    echo $row["judul"];
    echo"</font>";
    echo"</td>";  
    echo "<td align='left' bgcolor='#EED6BB'>";
    echo "<font face='Arial' size=1>";
    echo $row["penyanyi"];
    echo"</font>";
    echo"</td>";     
    echo"<td align='left' bgcolor='#EED6BB'>";
    echo "<a href='delete.php?id=".$row['id']."' style=\"text-
decoration: none\" title=\"Hapus\"><font face='tahoma' 
size='1'>Hapus</font></a>   
    <a href='edit.php?id=".$row['id']."' style=\"text-decoration: 
none\" title=\"Edit\"><font face='tahoma' size='1'>Edit</font></a>"; 
$j++; } 
echo"</table>"; 
echo "</body>"; 
echo "</html>"; 
?>

simpan kode tersebut dengan nama “index.php” dalam folder C:\xampp\htdocs\mymusic.

Kemudian bukalah file browser seperti chrome dan ketikkan “http://localhost/mymusic/” maka jadilah halaman website anda dengan database awal;

tampilan pertama http://localhost/mymusic/

kemudian kembali copy script berikut:

body,html {
     margin: 0 5px;
     font-family: Verdana,sans-serif;
     font-size:12px 
} 
h1 {
     font-size:1.4em;
     color: #008000; 
} 
a {
     color: #008000; 
} 
th {     text-align: left; 
} 
td, th {
     padding-right: 5px; 
} 
form dt {
     width: 100px;
     display: block;
     float: left;
     clear: left; 
} 
form dd {
     margin-left: 0;
     float: left;
}
 form #submitbutton {
     margin-left: 100px; 
}

simpanlah dengan nama “style.css” di direktori C:\xampp\htdocs\mymusic.

Kemudian copy kembali perintah berikut:

<html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Tambah lagu baru</title>
         <link href="style.css" type="text/css" rel="stylesheet">
     </head>
     <body>
         <form action="insert_koleksi.php" method="POST">
             <font face="Tahoma" color="blue" size="1"><b><br>Add List 
Song</b></font>
             <table align="left">
                 <tr>
                     <td><font face="Tahoma" color="black" size="2">judul</font></td>
                     <td>:</td>
                     <td><input type="text" name="judul" 
size="30"></td>
                 </tr> 
 
                 <tr>
                     <td><font face="Tahoma" color="black" size="2">penyanyi</font></td>
                     <td>:</td>
                     <td><input type="text" name="penyanyi" size="30"></td>
                 </tr> 
 
                 <tr>
                     <td></td><td></td>
                     <td><input type="submit" value="Add">
                     <font face="Tahoma" color="blue" size="2">
                     <a href="index.php" style="text-
decoration:none">back</font></a>
                     </td>
                 </tr>
             </table>
         </form>
     </body>
 </html>

Dan simpanlah dengan nama “add.php” dalam direktori C:\xampp\htdocs\mymusic.

Kembali copy script berikut:

<?php 
include "db_connect.php"; 
$judul = $_POST['judul'];
$penyanyi = $_POST['penyanyi']; 
 
$query=mysqli_query($kon, "INSERT INTO tbmusic(judul, penyanyi)
VALUES ('$judul', '$penyanyi')")or die (mysqli_error()); 
 
if($query) {
?>
<script language="JavaScript">
   document.location='index.php'</script> 
<?php 
} 
?>

kemudian simpanlah dengan nama “insert_koleksi.php” juga simpan pada direktori C:\xampp\htdocs\mymusic.

copy kembali script berikut”

<?php 
include "db_connect.php"; 
$id = $_GET['id']; 
 
$query = "DELETE FROM tbmusic WHERE id = $id"; 
mysqli_query($kon, $query); 
 
?> 
<script language="JavaScript"> 
document.location='index.php'</script> 
<?php 
?>

script tersebut disimpan dengan nama “delete.php” dalam direktori yang sama.

Setelah itu copylah script berikut:

<?php 
include "db_connect.php"; 
$id = $_GET['id']; 
 
$query=mysqli_query($kon, "SELECT * FROM tbmusic WHERE id='$id'");
while ($row=mysqli_fetch_array($query)){ 
 
$judul = $row['judul']; 
$penyanyi = $row['penyanyi']; 
 
echo "<html>"; 
echo "<body>"; 
echo "<font face='tahoma' color='green' size=4><b>Perbaiki koleksi</b></font>"; 
echo "<table align='left'>"; 
echo "<form method=\"post\" action=\"update.php?id=$id\" enctype='multipart/form-data'>"; 
echo "<br>"; 
echo "<tr><td><font face='Tahoma' color='black' size=2>judul </font></td><td>:</td><td><input type='text' name='judul' value='$judul' size='30'>&nbsp;
</td></tr>"; 
 
echo "<tr><td><font face='Tahoma' color='black' size=2>penyanyi</font></td><td>:</td><td><input type='text' name='penulis' value='$penulis' size='30'>&nbsp;
</td></tr>"; 
 
echo "<tr><td></td><td></td><td><font size='2'><input type='submit' name='submit' value='Update'/></font></td></tr>"; 
echo "</table></form></body></html>"; 
} 
?>

simpanlah dengan nama “edit.php” pada direktori yang sama.

Terakhir copy script berikut untuk mengupdate:

<?php 
include "db_connect.php"; 
$id = $_GET['id']; 
 
$judul = $_POST['judul']; 
$penulis = $_POST['penyanyi']; 
 
$query=mysqli_query ($kon, "UPDATE tbmusic SET judul='$judul', 
penyanyi='$penyanyi' WHERE id='$id'")or die (mysqli_error()); 
 
if($query) { 
?>
<script language="JavaScript"> 
 document.location='index.php'</script> 
<?php 
} 
?>

simpan script tersebut dengan nama “update.php” dalam direktori yang sama yaitu C:\xampp\htdocs\mymusic.

isikan koleksi list lagu

Maka web database sederhana untuk list lagu anda sudah bisa digunakan^^

Untuk pilihan warna yang lebih menarik yang bisa diatur oleh anda, dapat di cek di web awsmcolor.com.

Selamat Mencoba!!

Referensi:

  1. Tutorial Koneksi PHP-MySQL oleh Ramos Somya
  2. Membuat Database Sederhana oleh RB Fajriya Hakim

--

--

Farhatun Nissa

Written by Farhatun Nissa

43 Followers

Statistics || Data Analyst || Data Enthusiast

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams