Membuat menu dinamis php mysqli

Pada tutorial ketiga ini akan memulai mempelajari cara membuat menu dinamis dikoneksikan dengan database. Sehingga akan memudahkan jika akan menambahkan menu baru pada pengembangan projek kedepannya.

Pada tutorial kali ini kita akan belajar Cara Membuat Submenu Dinamis Menggunakan PHP Mysql, jika kita ingin membuat sebuah website yang kompleks tentunya menu dinamis ini sangatlah diperlukan karena memudahkan kita untuk mengembangkan sistem yang telah kita buat nantinya, jadi jika terdapat penambahan menu pada sistem tersebut kita tidak perlu lagi merubah struktur dari htmlnya, pada tutorial kali ini kita akan membuat sebuah menu utama dan submenunya untuk Cara Membuat Submenu Dinamis Menggunakan PHP Mysql  teman-teman bisa langsung mengikuti step by step yang terdapat dibawah ini :

  • Langkah pertama silahkan teman-teman buat sebuah database dan didalam database tersebut terdapat sebuah table menu dan table sub_menu, table menu tersebut berfungsi sebagai menu utama dan table sub_menu sebagai sub menu dari menu utama yang akan kita buat nantinya, untuk struktur table yang akan kita buat yaitu seperti dibawah ini :

Table menu:

Membuat menu dinamis php mysqli
Membuat menu dinamis php mysqli

Table sub_menu :

Membuat menu dinamis php mysqli
Membuat menu dinamis php mysqli

  • Selanjutnya silahkan teman-teman input datanya kedalam table menu dan table sub_menu seperti dibawah ini :

Table menu:

Membuat menu dinamis php mysqli
Membuat menu dinamis php mysqli

Table sub_menu:

Membuat menu dinamis php mysqli
Membuat menu dinamis php mysqli

  • Jika sudah kita akan buat script PHP-nya seperti dibawah ini :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<?php

$conn=mysqli_connect('localhost','root','','namaBD');

?>

<html>

<head>

<title>Cara Membuat Submenu Dinamis Menggunakan PHP Mysql</title>

 

<style>

 

        * {margin:0; padding:0;}

        .menu {margin: auto; width: 60%; }

        menu ul {list-style:none;}

        menu >ul >li {float:left;}

        menu ul li a {text-decoration:none;

            padding:5px 10px;

            background: red;

            width:90px;

            height:20px;

            display:block;

            }

        menu ul >li >ul {top:30px;}

    

        menu li {position:relative}

        menu li ul {position:absolute; display:none;}

        menu li:hover >ul {display:block;}

        menu li li >ul {left:100%; top:0px;}

 

</style>

 

</head>

<body>

<menu>

<ul>

<?php

$sql = mysqli_query($conn,"SELECT id, menu_utama FROM menu");

 

while($tampil=mysqli_fetch_array($sql)) {

 

echo "<li><a href='#'>".$tampil['menu_utama']."</a>";

 

$sql2 = mysqli_query($conn,"SELECT * FROM sub_menu WHERE menu_id = '".$tampil['id']."'");

 

if($sql2) {

echo "<ul>";

while($d=mysqli_fetch_array($sql2)) {

echo "<li><a href='#'>".$d['submenu']."</a></li>";

 

}

echo "</ul>";

} else {

echo "</li>";

}

}

?>

</ul>

</menu>

</body>

</html>

jika semua prosesnya telah teman-teman lakukan berikutnya kita akan coba jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :