Categories
Visual Basic 6.0

Display Record in a Table using MySQL Database in Vb6 App

Display record in a table from MySQL Database in VB6. Add web browser component control into a Visual Basic 6 application . This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/

Database Field Name

ADD REFERENCE TO YOUR PROJECT Check the selection box next to the component that you want to add. If the component is not listed, locate the .dll or .ocx file using Browse.

Create form to your project and double click the form to enter the code window Copy the code below and paste then save it.

Private Sub Form_Activate()
On Error Resume Next
      Me.WebBrowser1.Navigate2 "About:Blank"
    Call load
End Sub

Sub load()
setWindowSize
Me.WebBrowser1.Silent = True
With Me.WebBrowser1.Document
        .Write ("<!DOCTYPE html>")
        .Write ("<HTML lang='en'>")
        .Write ("<head>")
        .Write ("<meta charset='utf-8'>")
        .Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
        .Write ("<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>")
        .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<link href=' " & App.Path & "\css\dataTables.bootstrap4.min.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<style>")
        .Write ("body{")
        .Write ("height: 100%;")
        .Write ("background-image: -moz-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);")
        .Write ("background-image: -webkit-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);")
        .Write ("background-image: -ms-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);")
        .Write ("}")
        .Write (".form-btn {font-size: 15px;line-height: 1.5;color: #fff;")
        .Write ("border: 1px solid #fff; text-transform: uppercase;width: 100%;height: 40px;border-radius: 25px;")
        .Write ("background:#57b846;display: flex;justify-content: center;align-items: center;padding: 0 10px;-webkit-transition: all 0.4s;-o-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s;}")
        .Write (".login-wrapper{")
        .Write ("background: #fff;border-radius: 10px;overflow: hidden;padding:20px; margin: 0 auto}")
        .Write (".form-title {margin:0 auto}")
        .Write ("h4{color: #fff  }")
        .Write ("#logo{margin: 0 auto ; display: flex;justify-content: center;align-items: center;}")
        .Write ("</style>")
        .Write ("</head>")

        .Write ("<body>")

        .Write ("<div id='my-app' class='mt-2 p-5 container-fluid'>")
        .Write ("<h4 class='mb-5'>Proghubster Source Codes</h4>")
        .Write ("<h1 class='mb-5'>Display Record in a Table using  MySQL Database in Vb6 App</h1>")
        .Write ("<table id='load-data' class='table table-striped table-bordered' style='width:100%'>")
        .Write ("<thead>")
        .Write (" <tr>")
        .Write (" <th>Product Name</th>")
        .Write (" <th>Category</th>")
        .Write (" <th>Quantity</th>")
        .Write (" <th>Amount</th>")
        .Write ("<th>Status</th>")
        .Write ("<th>Date</th>")
        .Write ("</tr>")
        .Write ("</thead>")
        .Write ("<tbody>")
        Create_Recordset rstProduct, "Select * from tbl_inventory ", myConn
        Do While rstProduct.EOF <> True
        .Write (" <tr>")
        .Write ("<td>" & rstProduct![product_name] & "</td>")
        .Write ("<td>" & rstProduct![category] & "</td>")
        .Write ("<td>" & rstProduct![quantity] & "</td>")
        .Write ("<td>" & rstProduct![amount] & "</td>")
        
        If rstProduct![quantity] = 0 Then
        .Write ("<td><span id='status' style='border-radius: 5px; Background-color: red; color: #fff; padding:0 6px'>Out of Stock</span></td>")
        ElseIf rstProduct![quantity] < 21 Then
        .Write ("<td><span id='status' style='border-radius: 5px;Background-color: green; color: #fff; padding:0 6px'>Low</span></td>")
        Else
        .Write ("<td><span id='status' style='border-radius: 5px; Background-color: blue; color: #fff; padding:0 6px'>High</span></td>")
        End If
        
        .Write ("<td>" & rstProduct![Date] & "</td>")
        .Write ("</tr>")
        rstProduct.MoveNext
        Loop
        .Write ("</tbody>")
        .Write ("<tfoot>")
        .Write ("<tr>")
        .Write (" <th>Product Name</th>")
        .Write (" <th>Category</th>")
        .Write (" <th>Quantity</th>")
        .Write (" <th>Amount</th>")
        .Write ("<th>Status</th>")
        .Write ("<th>Date</th>")
        .Write ("</tfoot>")
        .Write ("</table>")
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\jquery.dataTables.min.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\dataTables.bootstrap4.min.js" & " '></script>")
        .Write ("<script>")
        .Write ("$(document).ready(function() {")
        .Write (" $('#load-data').DataTable();")
        .Write (" });")
        .Write ("</script>")
        .Write ("</div>")
        .Write ("</body>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub setWindowSize()
WebBrowser1.Height = Form1.Height
WebBrowser1.Width = Form1.Width + 3
End Sub

Private Sub Form_Resize()
setWindowSize
End Sub

Setup your database connection create Modules to your project copy and paste the code below for your data source connection.

Public myConn As ADODB.Connection
Public rstProduct As ADODB.Recordset

Sub main()
MySqlConn myConn, "proghub_inventory"
Form1.Show
End Sub

Public Sub MySqlConn(SQLConn As Connection, CDatabase As String)
    Set SQLConn = New ADODB.Connection
    SQLConn.ConnectionString = "DRIVER={MySQL ODBC 3.51 Driver};SERVER=127.0.0.1;Database=" & CDatabase & ";UID=root;Option=3;"
    SQLConn.Open
    SQLConn.CursorLocation = adUseClient
End Sub

Public Sub Create_Recordset(rst As Recordset, SQL As String, CConnection As Connection)
        Set rst = New ADODB.Recordset
        rst.Open SQL, CConnection, adOpenDynamic, adLockBatchOptimistic
End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!

  • 42
    Shares
Categories
Visual Basic 6.0

Login with jQuery using MySQL Database in VB6 App

In this tutorial we will make a simple Login form application using jquery plugin in VB6. Add web browser component control into a Visual Basic 6 application . This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/ for jquery-3.3.1.js you can download it here https://plugins.jquery.com/

Database Field Name

ADD REFERENCE TO YOUR PROJECT Check the selection box next to the component that you want to add. If the component is not listed, locate the .dll or .ocx file using Browse.

Sample Output of Login in Vb6 App

Create form to your project and double click the form to enter the code window Copy the code below and paste then save it.

Private Sub Form_Activate()
On Error Resume Next
      Me.WebBrowser1.Navigate2 "About:Blank"
    Call load
End Sub

Sub load()
setWindowSize
Me.WebBrowser1.Silent = True
With Me.WebBrowser1.Document
        .Write ("<!DOCTYPE html>")
        .Write ("<HTML lang='en'>")
        .Write ("<head>")
        .Write ("<meta charset='utf-8'>")
        .Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
        .Write ("<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>")
        .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<style>")
        .Write ("body{")
        .Write ("height: 100%;")
        .Write ("background: #9053c7;")
        .Write ("background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);")
        .Write ("background: -o-linear-gradient(-135deg, #c850c0, #4158d0);")
        .Write ("background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);")
        .Write ("background: linear-gradient(-135deg,#c850c0, #4158d0);")
        .Write ("}")
        .Write (".form-btn {font-size: 15px;line-height: 1.5;color: #fff;")
        .Write ("border: 1px solid #fff; text-transform: uppercase;width: 100%;height: 40px;border-radius: 25px;")
        .Write ("background:#57b846;display: flex;justify-content: center;align-items: center;padding: 0 10px;-webkit-transition: all 0.4s;-o-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s;}")
        .Write (".login-wrapper{")
        .Write ("background: #fff;border-radius: 10px;overflow: hidden;padding:20px; margin: 0 auto}")
        .Write (".form-title {margin:0 auto}")
        .Write ("h4{color: #fff  }")
        .Write ("#logo{margin: 0 auto ; display: flex;justify-content: center;align-items: center;}")
        .Write ("</style>")
        .Write ("</head>")

        .Write ("<body>")

        .Write ("<div id='my-app' class='mt-2 p-5 container-fluid'>")
        .Write ("<p class='demail' style='display:none'>" & rstUser![email] & "</p>")
        .Write ("<p class='dpass' style='display:none' >" & rstUser![Password] & "</p>")
        .Write ("<form method='post'>")
        .Write ("<img  id='logo' class='mb-4 mt-5' src='" & App.Path & "\img\logo.png" & "' alt='logo' width='200' height='80'>")
        .Write ("<h4 class='mb-5 text-center' >Login with jQuery using MySQL Database in VB6 App </h4>")
        .Write ("<div class='welc-user' style='display:none'><h1 class='text-center'> Welcome Admin!</h1></div>")
        .Write ("<div class='login-wrapper col-md-4 text-align-center'")
        .Write ("<span class='form-titled' style='text-transform: uppercase; letter-spacing: 2px; margin-bottom: 200px; font-weight: Bold; font-size: 24px; color: #333333; line-height: 1.2; text-align: center; width: 100%;'>")
        .Write ("ProgHub Login")
        .Write ("</span>")
     
        .Write ("<div id='div1' class='mt-4 form-label-group'>")
        .Write ("<input type='email' id='email' name='email' class='form-control' placeholder='Email Address' required>")
        .Write ("</div>")
     
        .Write ("<div class='mt-2 form-label-group'>")
        .Write ("<input type='password' id='password' name='password' class='form-control' placeholder='Password' required>")
        .Write ("</div>")
        .Write ("<div class='mt-3  wrapper-form-btn'>")
        .Write ("<button type='button' id='login' name='login' class='btn btn-primary btn-block form-btn'>")
        .Write ("Login")
        .Write ("</button>")
        .Write ("</div>")
        .Write ("<br/>")
        .Write ("<br/>")
        .Write ("<p class='mt-6 mb-3 text-muted text-center'>&copy; 2019-2020</p>")
        .Write ("</div>")
        .Write ("</form>")
     
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
     
        .Write ("<script>")
        .Write ("   $('#login').on('click', function(){")
         .Write (" email = $('#email').val();")
        .Write (" password = $('#password').val();")
        .Write ("       if(email ='' || password == ''){")
        .Write ("           alert('Please enter email and Password!');")
        .Write (" }else{")
        .Write (" if(email == $('.demail').text() || password == $('.dpass').text()){")
        .Write ("           alert('Successfully Login');")
        .Write ("$('.login-wrapper ').fadeOut(); $('.welc-user').fadeIn();")
        .Write (" }")
        .Write (" }")
        .Write (" });")
        .Write ("</script>")
     
        .Write ("</div>")
        .Write ("</body>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub setWindowSize()
WebBrowser1.Height = Form1.Height
WebBrowser1.Width = Form1.Width + 10
End Sub

Private Sub Form_Resize()
setWindowSize
End Sub

Setup your database connection create Modules to your project copy and paste the code below for your data source connection.

Public myConn As ADODB.Connection
Public rstUser As ADODB.Recordset

Sub main()

MySqlConn myConn, "davsterz_login"

Create_Recordset rstUser, "Select * from users ", myConn

If rstUser.RecordCount <= 0 Then
        rstUser.AddNew
        rstUser![email] = "admin"
        rstUser![Password] = "admin"
        rstUser.UpdateBatch

End If
rstUser.MoveFirst
Form1.Show
End Sub

Public Sub MySqlConn(SQLConn As Connection, CDatabase As String)
    Set SQLConn = New ADODB.Connection
    SQLConn.ConnectionString = "DRIVER={MySQL ODBC 3.51 Driver};SERVER=127.0.0.1;Database=" & CDatabase & ";UID=root;Option=3;"
    SQLConn.Open
    SQLConn.CursorLocation = adUseClient
End Sub

Public Sub Create_Recordset(rst As Recordset, SQL As String, CConnection As Connection)

        Set rst = New ADODB.Recordset
        rst.Open SQL, CConnection, adOpenDynamic, adLockBatchOptimistic

End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!

Categories
Visual Basic 6.0

Load More in VB6 Application

In this tutorial we will make a simple program use jquery plugin  that hides overflowing content and display  the hidden content by clicking on the view more button in VB6. Add web browser component control into a Visual Basic 6 application . This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/.

jquery.simpleLoadMore.js & jquery-3.3.1.js you can download it here https://plugins.jquery.com/

Sample Output of Load More in Vb6 App

Create form to your project and double click the form to enter the code window Copy the code below and paste then save it.

Private Sub Form_Activate()
    Me.WebBrowser1.Navigate2 "About:Blank"
    Call load
End Sub

Sub load()
setWindowSize
Me.WebBrowser1.Silent = True
With Me.WebBrowser1.Document
        .Write ("<!DOCTYPE html>")
        .Write ("<HTML lang='en'>")
        .Write ("<head>")
        .Write ("<meta charset='utf-8'>")
        .Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
        .Write ("<style>")
        .Write ("body, html {background-color: #1c0f0f;width: 400px;margin: 20px auto;font: normal 13px/100% sans-serif;color: #444;}")
        .Write (".cont-wrapper{display:none;padding: 10px;border-width: 0 1px 1px 0;border-style: solid;border-color: #d085af;box-shadow: 0 1px 1px #ccc;margin-bottom: 5px;background-color: #83d04e;position: relative;}")
        .Write ("a, a:visited {color: #fff;text-decoration: none;display: block;margin: 10px 0;}")
        .Write ("a:hover {text-decoration: none;}")
        .Write (".load-more__btn {padding: 10px;text-align: center;background-color: #33739E;color: #fff;transition: all 600ms ease-in-out;-webkit-transition: all 600ms ease-in-out;-moz-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;}")
        .Write (".load-more__btn:hover {background-color: #fff;color: #33739E;}")
        .Write (".list-image .cont-wrapper:first-child {display: flex !important;}")
        .Write (".cont-wrapper {display: flex;align-items: center;-webkit-align-items: center;}")
        .Write (".cont-wrapper img {max-width: 189px;width: 100%;padding: 3px;object-fit: cover;}")
        .Write (".cont-wrapper p {padding: 10px;width: 100%;position: absolute;max-width: 177px;right: 0;top: 0;}")
        .Write ("</style>")
        .Write ("</head>")
        .Write ("<body>")
       
        .Write ("<h4 style='color: #fff' >ProgHub Source Codes</h4>")
        .Write ("<h2 style='color: #fff; width: 100%'>Static Load More in VB6 Application</h2>")
      
        .Write ("<div class='list-image'>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\asian-girl-practice-yoga-beach-sunrise-morning-day_1286-3037.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\concentrated-woman-meditating-nature_1098-1412.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\full-shot-woman-sitting-meditating_23-2148285884.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-doing-yoga-by-ocean_110955-451.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-is-engaged-meditation-nature_114354-89.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\young-beautiful-woman-doing-yoga-nature_1139-909.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\asian-girl-practice-yoga-beach-sunrise-morning-day_1286-3037.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\concentrated-woman-meditating-nature_1098-1412.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\full-shot-woman-sitting-meditating_23-2148285884.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-doing-yoga-by-ocean_110955-451.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-is-engaged-meditation-nature_114354-89.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\young-beautiful-woman-doing-yoga-nature_1139-909.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\asian-girl-practice-yoga-beach-sunrise-morning-day_1286-3037.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\concentrated-woman-meditating-nature_1098-1412.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\full-shot-woman-sitting-meditating_23-2148285884.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-doing-yoga-by-ocean_110955-451.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-is-engaged-meditation-nature_114354-89.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\young-beautiful-woman-doing-yoga-nature_1139-909.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\asian-girl-practice-yoga-beach-sunrise-morning-day_1286-3037.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\concentrated-woman-meditating-nature_1098-1412.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\full-shot-woman-sitting-meditating_23-2148285884.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-doing-yoga-by-ocean_110955-451.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-is-engaged-meditation-nature_114354-89.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\young-beautiful-woman-doing-yoga-nature_1139-909.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\asian-girl-practice-yoga-beach-sunrise-morning-day_1286-3037.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\concentrated-woman-meditating-nature_1098-1412.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\full-shot-woman-sitting-meditating_23-2148285884.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("<div class='cont-wrapper'><img src='" & App.Path & "\images\girl-doing-yoga-by-ocean_110955-451.jpg " & "' alt=''> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p> </div>")
        .Write ("</div>")

        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\jquery.simpleLoadMore.js" & " '></script>")
       
        .Write ("<script type='text/javascript'>")
        .Write ("$('.list-image').simpleLoadMore({")
        .Write ("item: '.cont-wrapper',")
        .Write ("count: 2,")
        .Write (" itemsToLoad: 1")
        .Write ("});")
        .Write ("</script>")
 
        .Write ("</body>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub setWindowSize()
WebBrowser1.Height = Form1.Height
WebBrowser1.Width = Form1.Width
End Sub

Private Sub Form_Resize()
setWindowSize
End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!

Categories
Visual Basic 6.0

Static Upload Image using jQuery in Vb6 Application

In this tutorial we will navigate image file and display using jQuery in VB6. Add web browser component control into a Visual Basic 6 application . This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/.

jQuery you can download it here https://plugins.jquery.com/

Sample Output of Slider in Vb6 App

Create form to your project and double click the form to enter the code window Copy the code below and paste then save it.

Private Sub Form_Activate()
    Me.WebBrowser1.Navigate2 "About:Blank"
    Call load
End Sub

Sub load()
setWindowSize
Me.WebBrowser1.Silent = True
With Me.WebBrowser1.Document
        .Write ("<!DOCTYPE html>")
        .Write ("<HTML lang='en'>")
        .Write ("<head>")
        .Write ("<meta charset='utf-8'>")
        .Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
        .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<style>")
        .Write ("*, ::before, ::after {box-sizing: border-box;}")
        .Write (".file-upload-wrapper:hover {background-color: cornflowerblue;}")
        .Write (".file-upload-wrapper {background-color: aquamarine;;position: relative;padding: 10px;-webkit-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);border-radius: 9px;}")
        .Write (".file-upload-wrapper input {position: absolute;top: 0;right: 0;bottom: 0;left: 0;height: 100%;width: 100%;opacity: 0;cursor: pointer;z-index: 5;}")
        .Write ("#img_avatar {max-width: 661px; width: 100%; top: 0;left: 0;right: 0;bottom: 0; height: 400px;object-fit: cover;}")
        .Write ("#my-app {display: flex;align-items: center; justify-content: center; background-color: #e3bcbc1f;}")
        .Write ("</style>")
        .Write ("</head>")
        .Write ("<body>")
        .Write ("<h4 class='m-5'>ProgHub Source Codes</h4>")
        .Write ("<div id='my-app' class='container'>")
        .Write ("<div class='col-md-6 file-upload-wrapper '>")
        .Write ("<p class='text-center'>Click Here to Upload Image</p>")
        .Write ("<input type='file' id='input-file-now' class='file_upload'>")
        .Write ("<img id='img_avatar' src='" & App.Path & "\img\activity_object_set3_breakfast_download.png" & "'>")
        .Write ("</div>")
        .Write ("</div>")
       
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
       
        .Write ("<script>")
        .Write ("$('#input-file-now').on('change', function () {")
        .Write ("changeProfile(this);")
        .Write (" });")
       
        .Write ("function changeProfile(input) {")
        .Write ("if (input.files && input.files[0]) {")
        .Write ("var reader = new FileReader();")
       
        .Write ("reader.onload = function (e) {")
        .Write (" $('#img_avatar').attr('src', e.target.result);")
        .Write ("};")
       
        .Write (" reader.readAsDataURL(input.files[0]);")
        .Write ("}")
        .Write ("}")
        .Write ("</script>")
       
        .Write ("</body>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub setWindowSize()
WebBrowser1.Height = Form1.Height
WebBrowser1.Width = Form1.Width
End Sub

Private Sub Form_Resize()
setWindowSize
End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!

Categories
Visual Basic 6.0

Slick Slider in VB6 Application

In this tutorial we will integrate Slick Slider in VB6. Add a web browser component control into a Visual Basic 6 application . We will use slider for making the project look better and attractive. This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/.

Slick js requires jQuery you can download it here https://plugins.jquery.com/

Sample Output of Slider in Vb6 App

Create form to your project and double click the form to enter the code window Copy the code below and paste then save it.

Private Sub Form_Activate()
    Me.WebBrowser1.Navigate2 "About:Blank"
    Call load
End Sub

Sub load()
setWindowSize
Me.WebBrowser1.Silent = True
With Me.WebBrowser1.Document
        .Write ("<!DOCTYPE html>")
        .Write ("<HTML lang='en'>")
        .Write ("<head>")
        .Write ("<meta charset='utf-8'>")
        .Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
        .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<link href=' " & App.Path & "\css\slick.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<link href=' " & App.Path & "\css\slick-theme.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<style>")
        .Write ("body, html{")
        .Write ("color: #fff; height: 100%;")
        .Write ("background: rgb(63,76,107); /* Old browsers */")
        .Write ("background: -moz-linear-gradient(-45deg,  rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6-15 */")
        .Write ("background: -webkit-linear-gradient(-45deg,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10-25,Safari5.1-6 */")
        .Write ("background: linear-gradient(135deg,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */")
        .Write ("filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */")
        .Write ("}")
        .Write (".slidervb6 img {height: 300px;max-width: 555px;width: 100%;object-fit: contain;}")
        .Write (".slick-prev::before, .slick-next::before {background-color:#fff;border-radius: 50px;padding: 2px 3px;color: #3f4c6b;}")
        .Write (".slick-list {max-width: 900px;margin: 0 auto;width: 100%;overflow: hidden;}")
        .Write (".slick-next {right: -14px;}")
        .Write ("</style>")
        .Write ("</head>")
        .Write ("<body>")
      
        .Write ("<div id='my-app' class='mt-2 p-5 container'>")
        .Write ("<h4 class='mb-5'>ProgHub Source Codes</h4>")
        .Write ("<h1>SLICK SLIDER in VB6 Application</h1>")
     
        .Write ("<div class='slidervb6'>")
        .Write ("<div><img src='" & App.Path & "\images\asian-girl-practice-yoga-beach-sunrise-morning-day_1286-3037.jpg" & "' ></div>")
        .Write ("<div><img src='" & App.Path & "\images\concentrated-woman-meditating-nature_1098-1412.jpg" & "' ></div>")
        .Write ("<div><img src='" & App.Path & "\images\full-shot-woman-sitting-meditating_23-2148285884.jpg" & "'></div>")
        .Write ("<div><img src='" & App.Path & "\images\girl-doing-yoga-by-ocean_110955-451.jpg" & "'></div>")
        .Write ("<div><img src='" & App.Path & "\images\girl-is-engaged-meditation-nature_114354-89.jpg" & "'></div>")
        .Write ("<div><img src='" & App.Path & "\images\young-beautiful-woman-doing-yoga-nature_1139-909.jpg" & "'></div>")
        .Write ("</div>")
      
        .Write ("</div>")
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\slick.js" & " '></script>")
      
        .Write ("<script type='text/javascript'>")
        .Write ("$(document).ready(function(){")
        .Write ("$('.slidervb6').slick({autoplay: true,autoplaySpeed: 2000,centerMode: true,centerPadding:'60px',slidesToShow: 2,dots: true,infinite: true,arrows:true")
        .Write ("});")
        .Write ("});")
        .Write ("</script>")
 
        .Write ("</body>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub setWindowSize()
WebBrowser1.Height = Form1.Height
WebBrowser1.Width = Form1.Width
End Sub

Private Sub Form_Resize()
setWindowSize
End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!

Categories
Visual Basic 6.0

HTML & CSS Loader in Vb6 App

In this tutorial we will integrate html & css Loader in VB6. Add a web browser control into a Visual Basic 6 application that allows you to host Internet Explorer inside your application. We will use preloader for some process are in progress and an end user needs to wait. This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/.

Sample Output of HTML & CSS Loader in Vb6 App

Create form to your project and double click the form to enter the code window Copy the code below and paste then save it.

Private Sub Form_Activate()
    Me.WebBrowser1.Navigate2 "About:Blank"
    Call load
End Sub

Sub load()
setWindowSize
With Me.WebBrowser1.Document
        .Write ("<!DOCTYPE html>")
        .Write ("<HTML lang='en'>")
        .Write ("<head>")
        .Write ("<meta charset='utf-8'>")
        .Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
        .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<style>")
        .Write ("body, html{")
        .Write ("height: 100%;background: rgb(255,168,76); /* Old browsers */")
        .Write ("background: -moz-linear-gradient(-45deg,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6-15 */")
        .Write ("background: -webkit-linear-gradient(-45deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10-25,Safari5.1-6 */")
        .Write ("background: linear-gradient(135deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */")
        .Write ("filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}")
        .Write ("h4{color: #fff  }")
       
        .Write (".spinner {width: 80px;height: 80px;margin: 100px auto;background-color: #fff;border-radius: 100%;  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;animation: sk-scaleout 1.0s infinite ease-in-out;}")
        .Write ("@-webkit-keyframes sk-scaleout {0% { -webkit-transform: scale(0) }100% {-webkit-transform: scale(1.0);opacity: 0;}}")
        .Write ("@keyframes sk-scaleout {0% { -webkit-transform: scale(0);transform: scale(0);} 100% {-webkit-transform: scale(1.0);transform: scale(1.0);opacity: 0;}}")
        .Write ("</style>")
        .Write ("</head>")
        .Write ("<body>")
       
        .Write ("<div style='position:absolute; left:0; right:0; margin: 0 auto; top:50%' class='spinner'></div>")

        .Write ("<div id='my-app' class='mt-2 p-5 container-fluid'>")
        .Write ("<h4 class='mb-5'>ProgHub Source Codes</h4>")
        .Write ("<h1>CSS LOADER...</h1>")
        .Write ("</div>")
        .Write ("</body>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub setWindowSize()
WebBrowser1.Height = Form1.Height
WebBrowser1.Width = Form1.Width
End Sub

Private Sub Form_Resize()
setWindowSize
End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!

Categories
Visual Basic 6.0

VB6 Datatables using Bootstrap4

In this tutorial we will integrate Bootstrap4 in VB6. Add a web browser control into a Visual Basic 6 application that allows you to host Internet Explorer inside your application. We will insert static data to display in a table. This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Use the latest version of DataTables this is the link https://plugins.jquery.com/

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/.

Sample Output of VB6 Datatables using Bootstrap4

Create form to your application and double click the form to enter the code window copy this code and paste then save it.

Private Sub Form_Activate()
Me.WebBrowser1.Width = Me.Width
Me.WebBrowser1.Height = Me.Height
Me.WebBrowser1.Navigate2 "About:Blank"
Call load
End Sub

Sub load()
Me.WebBrowser1.Silent = True
With Me.WebBrowser1.Document
.Write ("<!DOCTYPE html>")
.Write ("<HTML lang='en'>")
.Write ("<head>")
.Write ("<meta charset='utf-8'>")
.Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
.Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
.Write ("<link href=' " & App.Path & "\css\dataTables.bootstrap4.min.css" & " ' rel='stylesheet' type='text/css'>")
.Write ("<style>")
.Write ("body{background: rgba(0, 123, 255, 0.5); }")
.Write ("h4{color: #fff }")
.Write ("</style>")
.Write ("</head>")
.Write ("<body>")
.Write ("<div id='my-app' class='mt-2 p-5 container-fluid'>")
.Write ("<h4 class='mb-5'>DavesterZ Feed Source Codes</h4>")
.Write ("<h1>DataTables Bootstrap 4</h1>")
.Write ("<table id='load-data' class='table table-striped table-bordered' style='width:100%'>")
.Write ("<thead>")
.Write (" <tr>")
.Write (" <th>Name</th>")
.Write (" <th>Sex</th>")
.Write (" <th>Address</th>")
.Write (" <th>Age</th>")
.Write ("<th>Course</th>")
.Write ("<th>Year</th>")
.Write ("</tr>")
.Write ("</thead>")
.Write ("<tbody>")
.Write (" <tr>")
.Write (" <td>Larry Emol</td>")
.Write ("<td>Male</td>")
.Write ("<td>Calinog, Iloilo</td>")
.Write ("<td>61</td>")
.Write ("<td>BSIT</td>")
.Write ("<td>4th Year</td>")
.Write ("</tr>")
.Write (" <tr>")
.Write (" <td>Wilmar Jhon</td>")
.Write ("<td>Male</td>")
.Write ("<td>Bacolod</td>")
.Write ("<td>100</td>")
.Write ("<td>BSIT</td>")
.Write ("<td>3rd Year</td>")
.Write ("</tr>")
.Write (" <tr>")
.Write (" <td>Gil</td>")
.Write ("<td>Male</td>")
.Write ("<td>Bacolod</td>")
.Write ("<td>12</td>")
.Write ("<td>BSIT</td>")
.Write ("<td>4th Year</td>")
.Write ("</tr>")
.Write (" <tr>")
.Write (" <td>Mark Gaitan</td>")
.Write ("<td>Male</td>")
.Write ("<td>Calinog, Iloilo</td>")
.Write ("<td>61</td>")
.Write ("<td>BSIT</td>")
.Write ("<td>4th Year</td>")
.Write ("</tr>")
.Write (" <tr>")
.Write (" <td>Emannuel Rodgriguez</td>")
.Write ("<td>Male</td>")
.Write ("<td>Bacolod</td>")
.Write ("<td>100</td>")
.Write ("<td>BSIT</td>")
.Write ("<td>3rd Year</td>")
.Write ("</tr>")
.Write (" <tr>")
.Write (" <td>Kevin James Tillaflor</td>")
.Write ("<td>Male</td>")
.Write ("<td>Bacolod</td>")
.Write ("<td>12</td>")
.Write ("<td>BSIT</td>")
.Write ("<td>4th Year</td>")
.Write ("</tr>")
.Write ("</tbody>")
.Write ("<tfoot>")
.Write ("<tr>")
.Write ("<th>Name</th>")
.Write ("<th>Position</th>")
.Write ("<th>Office</th>")
.Write ("<th>Age</th>")
.Write ("<th>Start date</th>")
.Write ("<th>Salary</th>")
.Write ("</tfoot>")
.Write ("</table>")
.Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
.Write ("<script src=' " & App.Path & "\js\jquery.dataTables.min.js" & " '></script>")
.Write ("<script src=' " & App.Path & "\js\dataTables.bootstrap4.min.js" & " '></script>")
.Write ("<script>")
.Write ("$(document).ready(function() {")
.Write (" $('#load-data').DataTable();")
.Write (" });")
.Write ("</script>")
.Write ("</body>")
.Write ("</div>")
.Write ("</html>")
Me.WebBrowser1.Refresh2
End With
End Sub

Private Sub Form_Resize()
Me.WebBrowser1.Width = Me.Width
Me.WebBrowser1.Height = Me.Height
End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!

Categories
Visual Basic 6.0

Creating Nice Alert with Sweet Alert in VB6 Application

In this tutorial we will integrate sweet alert js in VB6. Add a web browser control into a Visual Basic 6 application that allows you to host Internet Explorer inside your application. We will make a static data to get a confirm message on clicking delete. If the user selects ‘Yes, delete it!’ then data will be deleted else if ‘No, cancel!’ is clicked nothing happens. This a user-friendly program, start learning with this basic application, or feel free to modify the codes. I hope you’ll customize this codes according to your individual project’s needs .

Getting Started:

Get the source file i used it for enhancing layout design, Bootstrap can be found in this link https://getbootstrap.com/.

DataTables and Sweet Alert requires jQuery this is the link https://plugins.jquery.com/

DataTables required to enhance HTML tables here’s the link https://datatables.net/download/

Sweet Alert required to makes popup messages easy and pretty. here’s the link https://sweetalert.js.org/

Sample Output events triggered by the user’s actions such as clicking the delete Button

Create form to your application and double click the form to enter the code window copy and paste then save it.

Private Sub Form_Activate()
    Me.WebBrowser1.Navigate2 "About:Blank"
    Call load
End Sub

Sub load()
Me.WebBrowser1.Silent = True
With Me.WebBrowser1.Document
        .Write ("<!DOCTYPE html>")
        .Write ("<HTML lang='en'>")
        .Write ("<head>")
        .Write ("<meta charset='utf-8'>")
        .Write ("<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>")
        .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<link href=' " & App.Path & "\css\dataTables.bootstrap4.min.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<link href=' " & App.Path & "\css\sweetalert.css" & " ' rel='stylesheet'>")
        .Write ("<style>")
        .Write ("body{")
        .Write ("background: rgb(235,233,249); /* Old browsers */")
        .Write ("background: -moz-linear-gradient(-45deg,  rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%); /* FF3.6-15 */")
        .Write ("background: -webkit-linear-gradient(-45deg,  rgba(235,233,249,1) 0%,rgba(216,208,239,1) 50%,rgba(206,199,236,1) 51%,rgba(193,191,234,1) 100%); /* Chrome10-25,Safari5.1-6 */")
        .Write ("background: linear-gradient(135deg,  rgba(235,233,249,1) 0%,rgba(216,208,239,1) 50%,rgba(206,199,236,1) 51%,rgba(193,191,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */")
        .Write ("filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */")
        .Write ("}")
        .Write ("h4{color: #fff  }")
        .Write ("</style>")
        .Write ("</head>")
        .Write ("<body>")
        .Write ("<div id='my-app' class='mt-2 p-5 container-fluid'>")
        .Write ("<h4 class='mb-5'>DavesterZ Feed Source Codes</h4>")
        .Write ("<h1 class='mb-3' >Creating Nice Alerts with sweetAlert in Vb6 Application</h1>")
        .Write ("<table id='load-data' class='table table-striped table-bordered' style='width:100%'>")
        .Write ("<thead>")
        .Write (" <tr>")
        .Write (" <th>Name</th>")
        .Write (" <th>Sex</th>")
        .Write (" <th>Address</th>")
        .Write (" <th>Age</th>")
        .Write ("<th>Course</th>")
        .Write ("<th>Year</th>")
        .Write ("<th>Action</th>")
        .Write ("</tr>")
        .Write ("</thead>")
        .Write ("<tbody>")
        .Write (" <tr id='del1'>")
        .Write (" <td>Larry Emol</td>")
        .Write ("<td>Male</td>")
        .Write ("<td>Calinog, Iloilo</td>")
        .Write ("<td>61</td>")
        .Write ("<td>BSIT</td>")
        .Write ("<td>4th Year</td>")
        .Write ("<td class='data-action'>")
        .Write ("<a data-placement='top'  class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #4766e8; margin-left: 5px;color: #fff;font-size: 12px; text-decoration: none' id='btn-edit' data-action='edit' href='javascript:void(0)'>EDIT</a>")
        .Write ("<a id='delete-data' class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #ff0000; margin-left: 5px;color: #fff; font-size: 12px; text-decoration: none' data-id='del1' id='btn-delete' data-action='delete' href='javascript:void(0)' onclick='delete_data()'>DELETE</a>")
        .Write ("</td>")
        .Write ("</tr>")
        .Write (" <tr id='del2'>")
        .Write (" <td>Wilmar Jhon</td>")
        .Write ("<td>Male</td>")
        .Write ("<td>Bacolod</td>")
        .Write ("<td>100</td>")
        .Write ("<td>BSIT</td>")
        .Write ("<td>3rd Year</td>")
        .Write ("<td class='data-action'>")
        .Write ("<a data-placement='top'  class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #4766e8; margin-left: 5px;color: #fff;font-size: 12px; text-decoration: none' id='btn-edit' data-action='edit' href='javascript:void(0)'>EDIT</a>")
        .Write ("<a id='delete-data' class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #ff0000; margin-left: 5px;color: #fff; font-size: 12px; text-decoration: none' id='btn-delete' data-action='delete' href='javascript:void(0)' onclick='delete_data()'>DELETE</a>")
        .Write ("</td>")
        .Write ("</tr>")
        .Write (" <tr id='del3'>")
        .Write (" <td>Gil</td>")
        .Write ("<td>Male</td>")
        .Write ("<td>Bacolod</td>")
        .Write ("<td>12</td>")
        .Write ("<td>BSIT</td>")
        .Write ("<td>4th Year</td>")
        .Write ("<td class='data-action'>")
        .Write ("<a data-placement='top'  class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #4766e8; margin-left: 5px;color: #fff;font-size: 12px; text-decoration: none' id='btn-edit' data-action='edit' href='javascript:void(0)'>EDIT</a>")
        .Write ("<a id='delete-data' class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #ff0000; margin-left: 5px;color: #fff; font-size: 12px; text-decoration: none' id='btn-delete' data-action='delete' href='javascript:void(0)' onclick='delete_data()'>DELETE</a>")
        .Write ("</td>")
        .Write ("</tr>")
        .Write (" <tr id='del4'>")
        .Write (" <td>Mark Gaitan</td>")
        .Write ("<td>Male</td>")
        .Write ("<td>Calinog, Iloilo</td>")
        .Write ("<td>61</td>")
        .Write ("<td>BSIT</td>")
        .Write ("<td>4th Year</td>")
        .Write ("<td class='data-action'>")
        .Write ("<a data-placement='top'  class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #4766e8; margin-left: 5px;color: #fff;font-size: 12px; text-decoration: none' id='btn-edit' data-action='edit' href='javascript:void(0)'>EDIT</a>")
        .Write ("<a id='delete-data' class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #ff0000; margin-left: 5px;color: #fff; font-size: 12px; text-decoration: none' id='btn-delete' data-action='delete' href='javascript:void(0)' onclick='delete_data()'>DELETE</a>")
        .Write ("</td>")
        .Write ("</tr>")
        .Write ("<tr id='del5'>")
        .Write ("<td>Emannuel Rodgriguez</td>")
        .Write ("<td>Male</td>")
        .Write ("<td>Bacolod</td>")
        .Write ("<td>100</td>")
        .Write ("<td>BSIT</td>")
        .Write ("<td>3rd Year</td>")
        .Write ("<td class='data-action'>")
        .Write ("<a data-placement='top'  class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #4766e8; margin-left: 5px;color: #fff;font-size: 12px; text-decoration: none' id='btn-edit' data-action='edit' href='javascript:void(0)'>EDIT</a>")
        .Write ("<a id='delete-data' class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #ff0000; margin-left: 5px;color: #fff; font-size: 12px; text-decoration: none' id='btn-delete' data-action='delete' href='javascript:void(0)' onclick='delete_data()'>DELETE</a>")
        .Write ("</td>")
        .Write ("</tr>")
        .Write (" <tr id='del6'>")
        .Write (" <td>Kevin James Tillaflor</td>")
        .Write ("<td>Male</td>")
        .Write ("<td>Bacolod</td>")
        .Write ("<td>12</td>")
        .Write ("<td>BSIT</td>")
        .Write ("<td>4th Year</td>")
        .Write ("<td class='data-action'>")
        .Write ("<a class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #4766e8; margin-left: 5px;color: #fff;font-size: 12px; text-decoration: none' id='btn-edit' data-action='edit' href='javascript:void(0)'>EDIT</a>")
        .Write ("<a id='delete-data' class='btn-color' style='border: 1px solid transparent;border-radius: 4px;padding: 5px 6px;background-color: #ff0000; margin-left: 5px;color: #fff; font-size: 12px; text-decoration: none' data-action='delete' href='javascript:void(0)'>DELETE</a>")
        .Write ("</td>")
        .Write ("</tr>")
        .Write ("</tbody>")
        .Write ("<tfoot>")
        .Write ("<tr>")
        .Write ("<th>Name</th>")
        .Write ("<th>Sex</th>")
        .Write ("<th>Address</th>")
        .Write ("<th>Age</th>")
        .Write ("<th>Course</th>")
        .Write ("<th>Year</th>")
        .Write ("<th>Action</th>")
        .Write ("</tfoot>")
        .Write ("</table>")
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\jquery.dataTables.min.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\dataTables.bootstrap4.min.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\sweetalert-dev.js" & " '></script>")
       
        .Write ("<script>")
        .Write ("$(document).ready(function() {")
        .Write (" $('#load-data').DataTable();")
        .Write (" });")
       
        .Write ("var studTable = $('#load-data').DataTable();")
        .Write ("$('#load-data tbody').on( 'click', '#delete-data', function () {")
        .Write ("var stuId = $(this).parents('tr');")
     
        .Write ("swal({title: 'Student will be deleted permanently!',")
        .Write ("text: 'You wont be able to revert this!',")
        .Write ("type: 'warning',")
        .Write ("allowOutsideClick: true,")
        .Write ("showCancelButton: true,")
        .Write ("confirmButtonColor: '#3085d6',")
        .Write ("cancelButtonColor: 'red',")
        .Write ("confirmButtonText: 'Yes, delete it!',")
        .Write ("cancelButtonText: 'No, cancel!',")
        .Write ("closeOnConfirm: false,")
        .Write ("closeOnCancel: true },")
       
        .Write ("function(isConfirm){")
        .Write ("if (isConfirm)")
        .Write ("{")
        .Write ("swal({")
        .Write ("title: 'success',")
        .Write ("text: 'Student has been deleted.',")
        .Write ("type: 'success',")
        .Write ("confirmButtonText: 'OK',")
        .Write ("allowOutsideClick: 'false'")
        .Write ("}, function () {")
        .Write ("stuId.remove();")
        .Write ("});")
        .Write ("}});")
   
        .Write ("} );")
        .Write ("</script>")
   
       
        .Write ("</body>")
        .Write ("</div>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub


Private Sub Form_Resize()
Me.WebBrowser1.Width = Me.Width
Me.WebBrowser1.Height = Me.Height
End Sub

Let me know what you need just leave a message/comment  and I will do my very best to make that happen. I hope this simple codes will help you. Enjoy Coding!