Membuat Menu Dinamik Banyak Level Di Asp.Net Sql Server

Yohan Apriandi 02.50.00

Membuat Menu Dinamik Banyak Level Di Asp.Net Sql Server

Pertama Kita Buat Database dan tabelnya Di SQL Server Create Database Menu

USE [Menu]
GO

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[SubMenu](
      [Id] [int] IDENTITY(1,1) NOT NULL,
      [SubMenuName] [nvarchar](50) NULL,
      [SubMenuUrl] [nvarchar](50) NULL,
      [ParentId] [int] NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[SubMenu] ON
INSERT [dbo].[SubMenu] ([Id], [SubMenuName], [SubMenuUrl], [ParentId]) VALUES (1, N'Web Development', N'Web.aspx', 3)
INSERT [dbo].[SubMenu] ([Id], [SubMenuName], [SubMenuUrl], [ParentId]) VALUES (2, N'SEO Services', N'Seo.aspx', 3)
INSERT [dbo].[SubMenu] ([Id], [SubMenuName], [SubMenuUrl], [ParentId]) VALUES (3, N'Mobile Apps', N'Mob.aspx', 3)
SET IDENTITY_INSERT [dbo].[SubMenu] OFF
/****** Object:  Table [dbo].[Menu]    Script Date: 05/25/2015 17:46:16 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Menu](
      [Id] [int] IDENTITY(1,1) NOT NULL,
      [MenuName] [nvarchar](50) NULL,
      [MenuUrl] [nvarchar](50) NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Menu] ON
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (1, N'Home', N'Home.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (2, N'About Us', N'About.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (3, N'Services', N'Services.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (4, N'Testimonial', N'Testimonial.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (5, N'Contact Us', N'Contact.aspx')
SET IDENTITY_INSERT [dbo].[Menu] OFF
/****** Object:  Table [dbo].[ChildSubMenu]    Script Date: 05/25/2015 17:46:16 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[ChildSubMenu](
      [Id] [int] IDENTITY(1,1) NOT NULL,
      [ChildSubMenuName] [nvarchar](50) NULL,
      [ChildSubMenuUrl] [nvarchar](50) NULL,
      [SubParentId] [int] NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[ChildSubMenu] ON
INSERT [dbo].[ChildSubMenu] ([Id], [ChildSubMenuName], [ChildSubMenuUrl], [SubParentId]) VALUES (1, N'Web Designing', N'Web.aspx', 3)
INSERT [dbo].[ChildSubMenu] ([Id], [ChildSubMenuName], [ChildSubMenuUrl], [SubParentId]) VALUES (2, N'Web Redisigning', N'Des.aspx', 3)
INSERT [dbo].[ChildSubMenu] ([Id], [ChildSubMenuName], [ChildSubMenuUrl], [SubParentId]) VALUES (3, N'Ecomments', N'Ecom.aspx', 3)
SET IDENTITY_INSERT [dbo].[ChildSubMenu] OFF

Terus Kita Buat Style CSS nya :
<style>
        /* Base Styles */#cssmenu > ul, #cssmenu > ul li, #cssmenu > ul ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #cssmenu > ul
        {
            position: relative;
            z-index: 597;
        }
        #cssmenu > ul li
        {
            float: left;
            min-height: 1px;
            line-height: 1.3em;
            vertical-align: middle;
        }
        #cssmenu > ul li.hover, #cssmenu > ul li:hover
        {
            position: relative;
            z-index: 599;
            cursor: default;
        }
        #cssmenu > ul ul
        {
            visibility: hidden;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 598;
            width: 100%;
        }
        #cssmenu > ul ul li
        {
            float: none;
        }
        #cssmenu > ul ul ul
        {
            top: 1px;
            left: 99%;
        }
        #cssmenu > ul li:hover > ul
        {
            visibility: visible;
        }
        /* Align last drop down RTL */#cssmenu > ul > li.last ul ul
        {
            left: auto !important;
            right: 99%;
        }
        #cssmenu > ul > li.last ul
        {
            left: auto;
            right: 0;
        }
        #cssmenu > ul > li.last
        {
            text-align: right;
        }
        /* Theme Styles */#cssmenu > ul
        {
            border-top: 4px solid #3fa338;
            font-family: Calibri, Tahoma, Arial, sans-serif;
            font-size: 14px;
            background: #1e1e1e;
            background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
            background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
            background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
            width: auto;
            zoom: 1;
        }
        #cssmenu > ul:before
        {
            content: '';
            display: block;
        }
        #cssmenu > ul:after
        {
            content: '';
            display: table;
            clear: both;
        }
        #cssmenu > ul li a
        {
            display: inline-block;
            padding: 10px 22px;
        }
        #cssmenu > ul > li.active, #cssmenu > ul > li.active:hover
        {
            background-color: #3fa338;
        }
        #cssmenu > ul > li > a:link, #cssmenu > ul > li > a:active, #cssmenu > ul > li > a:visited
        {
            color: #ffffff;
        }
        #cssmenu > ul > li > a:hover
        {
            color: #ffffff;
        }
        #cssmenu > ul ul ul
        {
            top: 0;
        }
        #cssmenu > ul li li
        {
            background-color: #ffffff;
            border-bottom: 1px solid #ebebeb;
            font-size: 12px;
        }
        #cssmenu > ul li.hover, #cssmenu > ul li:hover
        {
            background-color: #F5F5F5;
        }
        #cssmenu > ul > li.hover, #cssmenu > ul > li:hover
        {
            background-color: #3fa338;
            -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
            -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
        }
        #cssmenu > ul a:link, #cssmenu > ul a:visited
        {
            color: #9a9a9a;
            text-decoration: none;
        }
        #cssmenu > ul a:hover
        {
            color: #9a9a9a;
        }
        #cssmenu > ul a:active
        {
            color: #9a9a9a;
        }
        #cssmenu > ul ul
        {
            border: 1px solid #CCC \9;
            -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            width: 150px;
        }
    </style>

Kita Buat Javascriptnya :
 <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Terus Kita Buat File HTML nya,Simpan di dalam Form Runat=”Server” ya:
<div id="cssmenu" runat="server">
</div>

Terus Kita Buat Kode Vb.Net Nya :
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Partial Class demo
    Inherits System.Web.UI.Page
    Private Sub demo_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            GetMenuData()
        End If
    End Sub
    Dim connectionstring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    
    Public Sub GetMenuData()
        Dim objstr As New StringBuilder()
        Dim objpmenu As New List(Of Menu)()
        Dim objsmenu As New List(Of SubMenu)()
        Dim objcmenu As New List(Of ChildSubMenu)()
        objpmenu = GetMenu()
        objsmenu = GetSubMenu()
        objcmenu = GetChildSubMenu()

        objstr.Append("<ul>")

        For Each _pitem As Menu In objpmenu
            objstr.Append((Convert.ToString((Convert.ToString("<li><a href='") & _pitem.MenuUrl) + "'><span>") & _pitem.MenuName) + "</span></a>")

            Dim subitem = objsmenu.Where(Function(m) m.ParentId = _pitem.Id).ToList()
            If subitem.Count > 0 Then
                objstr.Append("<ul>")
                For Each _sitem As SubMenu In subitem
                    objstr.Append("<li class='has-sub'><a href='" + _sitem.SubMenuUrl + "'><span>" + _sitem.SubMenuName + "</span></a>")

                    Dim childsubitem = objcmenu.Where(Function(s) s.SubParentId = _sitem.Id).ToList()
                    If childsubitem.Count > 0 Then
                        objstr.Append("<ul>")
                        For Each _citem As ChildSubMenu In childsubitem
                            objstr.Append("<li class='has-sub'><a href='" + _citem.ChildSubMenuUrl + "'><span>" + _citem.ChildSubMenuName + "</span></a></li>")
                        Next
                        objstr.Append("</ul>")
                    End If

                    objstr.Append("</li>")
                Next
                objstr.Append("</ul>")
            End If

            objstr.Append("</li>")
        Next

        objstr.Append("</ul>")

        cssmenu.InnerHtml = objstr.ToString()
    End Sub

    Public Function GetMenu() As List(Of Menu)
        Dim objmenu As New List(Of Menu)()
        Dim _objdt As New DataTable()
        Dim querystring As String = "select * from Menu;"
        Dim _objcon As New SqlConnection(connectionstring)
        Dim _objda As New SqlDataAdapter(querystring, _objcon)
        _objcon.Open()
        _objda.Fill(_objdt)
        If _objdt.Rows.Count > 0 Then
            For i As Integer = 0 To _objdt.Rows.Count - 1
                objmenu.Add(New Menu() With {
                    .Id = CInt(_objdt.Rows(i)("Id")),
                    .MenuName = _objdt.Rows(i)("MenuName").ToString(),
                    .MenuUrl = _objdt.Rows(i)("MenuUrl").ToString()
                })
            Next
        End If
        Return objmenu
    End Function

    Public Function GetSubMenu() As List(Of SubMenu)
        Dim objmenu As New List(Of SubMenu)()
        Dim _objdt As New DataTable()
        Dim querystring As String = "select * from SubMenu;"
        Dim _objcon As New SqlConnection(connectionstring)
        Dim _objda As New SqlDataAdapter(querystring, _objcon)
        _objcon.Open()
        _objda.Fill(_objdt)
        If _objdt.Rows.Count > 0 Then
            For i As Integer = 0 To _objdt.Rows.Count - 1
                objmenu.Add(New SubMenu() With {
                    .Id = CInt(_objdt.Rows(i)("Id")),
                    .ParentId = CInt(_objdt.Rows(i)("ParentId")),
                    .SubMenuName = _objdt.Rows(i)("SubMenuName").ToString(),
                    .SubMenuUrl = _objdt.Rows(i)("SubMenuUrl").ToString()
                })
            Next
        End If
        Return objmenu
    End Function

    Public Function GetChildSubMenu() As List(Of ChildSubMenu)
        Dim objmenu As New List(Of ChildSubMenu)()
        Dim _objdt As New DataTable()
        Dim querystring As String = "select * from ChildSubMenu;"
        Dim _objcon As New SqlConnection(connectionstring)
        Dim _objda As New SqlDataAdapter(querystring, _objcon)
        _objcon.Open()
        _objda.Fill(_objdt)
        If _objdt.Rows.Count > 0 Then
            For i As Integer = 0 To _objdt.Rows.Count - 1
                objmenu.Add(New ChildSubMenu() With {
                    .SubParentId = CInt(_objdt.Rows(i)("SubParentId")),
                    .ChildSubMenuName = _objdt.Rows(i)("ChildSubMenuName").ToString(),
                    .ChildSubMenuUrl = _objdt.Rows(i)("ChildSubMenuUrl").ToString()
                })
            Next
        End If
        Return objmenu
    End Function


    'Menu Class

    Public Class Menu
        Public Property Id() As Integer
            Get
                Return m_Id
            End Get
            Set
                m_Id = Value
            End Set
        End Property
        Private m_Id As Integer
        Public Property MenuName() As String
            Get
                Return m_MenuName
            End Get
            Set
                m_MenuName = Value
            End Set
        End Property
        Private m_MenuName As String
        Public Property MenuUrl() As String
            Get
                Return m_MenuUrl
            End Get
            Set
                m_MenuUrl = Value
            End Set
        End Property
        Private m_MenuUrl As String
    End Class
    Public Class SubMenu
        Public Property Id() As Integer
            Get
                Return m_Id
            End Get
            Set
                m_Id = Value
            End Set
        End Property
        Private m_Id As Integer
        Public Property ParentId() As Integer
            Get
                Return m_ParentId
            End Get
            Set
                m_ParentId = Value
            End Set
        End Property
        Private m_ParentId As Integer
        Public Property SubMenuName() As String
            Get
                Return m_SubMenuName
            End Get
            Set
                m_SubMenuName = Value
            End Set
        End Property
        Private m_SubMenuName As String
        Public Property SubMenuUrl() As String
            Get
                Return m_SubMenuUrl
            End Get
            Set
                m_SubMenuUrl = Value
            End Set
        End Property
        Private m_SubMenuUrl As String
    End Class
    Public Class ChildSubMenu
        Public Property SubParentId() As Integer
            Get
                Return m_SubParentId
            End Get
            Set
                m_SubParentId = Value
            End Set
        End Property
        Private m_SubParentId As Integer
        Public Property ChildSubMenuName() As String
            Get
                Return m_ChildSubMenuName
            End Get
            Set
                m_ChildSubMenuName = Value
            End Set
        End Property
        Private m_ChildSubMenuName As String
        Public Property ChildSubMenuUrl() As String
            Get
                Return m_ChildSubMenuUrl
            End Get
            Set
                m_ChildSubMenuUrl = Value
            End Set
        End Property
        Private m_ChildSubMenuUrl As String
    End Class

End Class

Untuk Koneksi Stringnya :
<connectionStrings>
    <remove name="LocalSqlServer"/>
    <add name="constr" connectionString="server=.\SQLEXPRESS;Initial Catalog=Menu;Integrated Security=True;MultipleActiveResultSets=True;" providerName="System.Data.SqlClient"/>
  </connectionStrings>

Simpan Di web.Config ,
Sekarang Silakan jalankan Aplikasinya.

Selamat Berkreasi Sendiri.
Semoga Berhasil.
Reactions
Yohan Apriandi

Diposting oleh Yohan Apriandi

Saya hanya orang malas yang mencoba untuk gesit

Posting Komentar

0 Komentar

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)