Categories
Visual Basic 6.0

User Notification in Vb6

This tutorial we will make simple notification with bootsrap dropdown integration. In the dropdown menu will only display four record and See all button to see all the notification account, Once you’ve click Confirm button it will update the status as ‘accepted’ and Delete to delete user account created. I hope you have a basic understanding of HTML and CSS to implement it to your project. Add web browser component control into a Visual Basic 6 application. This is 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 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.

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

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' ng-app='Module_Product' >")
        .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 (".img-responsive {max-width: 100%; width: 100%;}")
        .Write (".prof {max-width: 55px;width: 100%;overflow: hidden;border-radius: 100%;height: 55px; border: 1px solid #ccc}")
        .Write (".prof img {object-fit: cover;width: 100%;height: 55px}")
        .Write (".list-user-wrapper ul li {color: #1d2129;border: 1px solid #ebedf0;padding: 6px 12px;border-top: none;}")
        .Write (".list-user-wrapper {padding: 0;}")
        .Write ("ul {padding: 0;}")
        .Write ("a {color: #fff !important;}")
        .Write (".dropdown-user {min-width: 435px;width: 100%;}")
        .Write ("body {height: 100vh;background-color: #ccc;}")
        .Write ("footer {position: absolute;left: 0;right: 0;width: 100%;bottom: 0;text-align: center;padding: 15px 0;background-color: coral;}")
        .Write (".list-user-wrapper ul li:first-child:hover {background-color:transparent;}")
        .Write (".list-user-wrapper ul li:hover {background-color:#f7f9fb;}")
        .Write ("</style>")
        .Write ("</head>")
        .Write ("<body>")
        
        .Write ("<nav class='navbar navbar-expand-lg navbar-dark bg-dark'>")
        .Write ("<a class='navbar-brand' href='#'>Proghubsterzeak</a>")
        .Write ("<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>")
        .Write ("<span class='navbar-toggler-icon'></span>")
        .Write ("</button>")
    
        .Write ("<div class='collapse navbar-collapse' id='navbarSupportedContent'>")
        .Write ("<ul class='navbar-nav mx-auto'>")
        .Write ("<li class='nav-item dropdown'>")
        .Write ("<a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>")
        .Write ("User Account")
        .Write ("</a>")
        .Write ("<div class='dropdown-menu my-2 my-lg-0 dropdown-user' aria-labelledby='navbarDropdown'>")
        .Write ("<div class='list-user-wrapper'>")
        
        .Write ("<ul>")
        .Write ("<li class='d-flex flex-wrap align-items-center justify-content-between'>")
        .Write ("<div class='title  ml-2'>")
        .Write ("User Notification")
        .Write ("</div>")
        .Write ("</li>")
        
        Create_Recordset rstUser, "Select * from tbl_users order by  id desc", myConn
        
        Dim number As Integer
        number = 1
        While number <= 4

        .Write ("<li class='d-flex flex-wrap align-items-center justify-content-between'>")
        .Write ("<a href='#'>")
        .Write ("<div class='prof'>")
        .Write ("<img src='" & App.Path & "\images\" & rstUser![Image] & "' alt='img-profile' class='img-responsive'>")
        .Write ("</div>")
        .Write ("</a>")
        .Write ("<span class='mr-auto ml-2'>" & rstUser![Name] & "</span>")
        
        If rstUser![Status] = "pending" Then
        .Write ("<div class='action'>")
        .Write ("<button class='btn btn-primary btn-sm' user-confirm='" & rstUser![id] & "'>Confirm</button>")
        .Write ("<button class='btn btn-danger btn-sm ml-2' user-del='" & rstUser![id] & "'>Delete</button>")
        .Write ("</div>")
        ElseIf rstUser![Status] = "accepted" Then
        .Write ("<div class='action'>")
        .Write ("<button class='btn btn-success btn-sm ml-2'>Accepted</button>")
        .Write ("</div>")
        End If
        .Write ("</li>")
        
        rstUser.MoveNext
        number = number + 1
        Wend
        
        .Write ("</ul>")
        .Write ("</div>")
        .Write ("<a class='dropdown-item text-center text-primary' href='#'>See All</a>")
        .Write ("</div>")
        .Write ("</li>")
        .Write ("</ul>")
    
        .Write ("</div>")
        .Write ("</nav>")
         
        .Write ("<div class='container'>")
 
        .Write ("<div class='display-all-notif list-user-wrapper col-md-8 mt-5 mb-5' style='margin: 0 auto; display:none'>")
        .Write ("<ul>")
        .Write ("<li class='d-flex flex-wrap align-items-center justify-content-between bg-dark text-white'>")
        .Write ("<div class='title  ml-2'>")
        .Write ("User Notification")
        .Write ("</div>")
        .Write ("</li>")
        
        Create_Recordset rstUser, "Select * from tbl_users order by  id desc", myConn
        Do While rstUser.EOF <> True
        
        .Write ("<li class='d-flex flex-wrap align-items-center justify-content-between'>")
        .Write ("<a href='#'>")
        .Write ("<div class='prof'>")
        .Write ("<img src='" & App.Path & "\images\" & rstUser![Image] & "' alt='img-profile' class='img-responsive'>")
        .Write ("</div>")
        .Write ("</a>")
        .Write ("<span class='mr-auto ml-2'>" & rstUser![Name] & "</span>")
        
        If rstUser![Status] = "pending" Then
        .Write ("<div class='action'>")
        .Write ("<button class='btn btn-primary btn-sm' user-confirm='" & rstUser![id] & "'>Confirm</button>")
        .Write ("<button class='btn btn-danger btn-sm ml-2' user-del='" & rstUser![id] & "'>Delete</button>")
        .Write ("</div>")
        ElseIf rstUser![Status] = "accepted" Then
        .Write ("<div class='action'>")
        .Write ("<button class='btn btn-success btn-sm ml-2'>Accepted</button>")
        .Write ("</div>")
        End If
        .Write ("</li>")
        
        rstUser.MoveNext
        Loop
        .Write ("</ul>")
        .Write ("</div>")
        
        .Write ("<footer>")
        .Write ("Copyright © 2020 https://proghubsterzeak.com/")
        .Write ("</footer>")
        .Write ("</div>")
    
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\bootstrap.bundle.min.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\bootstrap.min.js" & " '></script>")
       
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
        .Write ("<script>")
        .Write ("$(document).on('click', '.dropdown-item', function () {")
        .Write ("$('.display-all-notif').fadeIn()")
        .Write ("});")
        .Write ("</script>")
    
        .Write ("</div>")
        .Write ("</body>")
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
        Me.WebBrowser1.Document.Script.Document.Clear
        Me.WebBrowser1.Document.Script.Document.Close
    End With
End Sub

Private Sub setWindowSize()
WebBrowser1.height = Form1.height - 600
WebBrowser1.Width = Form1.Width
End Sub

Private Sub Form_Resize()
setWindowSize
End Sub

Private Sub Text1_Change()
On Error Resume Next
 myConn.Execute "DELETE from tbl_users where id = " & text1.Text
rstUser.Requery
Call load
End Sub

Private Sub Text2_Change()
On Error Resume Next
myConn.Execute "UPDATE tbl_users SET status = '" & "accepted" & "' Where id = '" & Me.Text2.Text & "'"
Call load
End Sub

Private Sub WebBrowser1_CommandStateChange(ByVal Command As Long, ByVal Enable As Boolean)
  On Error Resume Next
        Set HTMLdoc = WebBrowser1.Document
        Me.text1.Text = HTMLdoc.activeElement.getAttribute("user-del")
        Me.Text2.Text = HTMLdoc.activeElement.getAttribute("user-confirm")
        Me.text1.Text = ""
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, "db_user"
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
AngularJS Visual Basic 6.0

CRUD AngularJS with modal boostrap using VB6 App

This tutorial we will make simple CRUD app Create a simple database table and fetch a database table using PHP and MySQL and returning to JSON, Update database table data and Delete data using AngularJS in vb6 application. I hope you have a basic understanding of AngularJS to implement it to your project. 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 AngularJS you can download it here https://angularjs.org/

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.

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' ng-app='Module_Product' >")
        .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\sweetalert.css" & " ' rel='stylesheet'>")
        
        .Write ("<style>")
        .Write ("html{ height: 100vh}")
        .Write ("body{")
        .Write ("background: rgb(235,233,249);/* Old browsers */")
        .Write ("background: -moz-linear-gradient(135deg, rgb(196, 192, 187) 0%, rgb(17, 6, 47) 50%, rgb(206, 199, 236) 51%, rgb(219, 200, 199) 100%);")
        .Write ("background: -webkit-linear-gradient(135deg, rgb(196, 192, 187) 0%, rgb(17, 6, 47) 50%, rgb(206, 199, 236) 51%, rgb(219, 200, 199) 100%);")
        .Write ("background: linear-gradient(135deg, rgb(196, 192, 187) 0%, rgb(17, 6, 47) 50%, rgb(206, 199, 236) 51%, rgb(219, 200, 199) 100%);")
        .Write ("filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */")
        .Write ("color: #fff !important}")
        .Write (".modal-backdrop {opacity: 0.8}")
        .Write ("</style>")
        .Write ("</head>")
        .Write ("<script src=' " & App.Path & "\js\angular.min.js" & "'></script>")
        .Write ("<body>")
        .Write ("<div ng-app='myApp' ng-controller='myCtrl' id='my-app' class='mt-2 p-5 container'>")
        .Write ("<h4 class='mb-5'>CRUD AngularJS with modal boostrap using VB6 App</h4>")
        .Write ("<h1 class='mb-3' >My Product List Table</h1>")
        
        .Write ("<div class='modal' id='myModal' role='dialog'>")
        .Write ("<div id='modal-form' class='modal-dialog modal-lg'>")
        .Write ("<div class='modal-content'>")
        .Write ("<div class='modal-header'>")
         .Write ("<h4 class='text-success'>{{ formTitle }}</h4>")
        .Write ("<button type='button' class='close' data-dismiss='modal'>×</button>")
       
        .Write ("</div>")
        
        .Write ("<div class='modal-body'>")
        .Write ("<form  method='post'>")
        .Write ("<div class='form-group'>")
        .Write ("<label  class='text-primary'>NAME</label>")
        .Write ("<input type='text' class='form-control' id='name' name='name'  ng-model='name' placeholder='Enter product name'>")
        .Write ("</div>")
        
        .Write ("<div class='col-md-12 d-flex align-items-center p-0 m-0'>")
        .Write ("<div class='col-md-4 p-0'>")
        .Write ("<div class='form-group'>")
        .Write ("<label class='text-primary'>SKU</label>")
        .Write ("<input type='text' class='form-control' id='sku' ng-model='sku' placeholder='Enter stock unit'>")
        .Write ("</div>")
        .Write ("</div>")

        .Write ("<div class='col-md-4'>")
        .Write ("<div class='form-group'>")
        .Write ("<label class='text-primary'>PRICE</label>")
        .Write ("<input type='text' class='form-control' id='price' ng-model='price' placeholder='Enter price'>")
        .Write ("</div>")
        .Write ("</div>")

        .Write ("<div class='col-md-4  p-0'>")
        .Write ("<div class='form-group'>")
        .Write ("<label class='text-primary'>QUANTITY</label>")
        .Write ("<input type='text' class='form-control' id='qty' ng-model='qty'  placeholder='Enter quantity'>")
        .Write ("</div>")
        .Write ("</div>")
        .Write ("</div>")
        
        .Write ("<div class='form-group'>")
        .Write ("<label class='text-primary'>DESCRIPTION</label>")
        .Write ("<input type='text' class='form-control' id='description' ng-model='description'  placeholder='Enter description'>")
        .Write ("</div>")
        .Write (" <input id='btn-save' type='submit' class='btn btn-primary btn-add btn-block' ng-click='DisplayProduct()' value='{{btnName}}' />")
        .Write ("</form>")
        .Write ("</div>")
        
        .Write ("<input type='text' id='proid' ng-model='id' style='display:none'>")
        
        .Write ("<div class='modal-footer'>")
        .Write ("<button type='submit' class='btn btn-default btn-default pull-left' data-dismiss='modal'><span class='glyphicon glyphicon-remove'></span> Cancel</button>")
        .Write ("</div>")
        .Write ("</div>")
        .Write ("</div>")
        .Write ("</div>")
        
        .Write ("<div class='d-flex align-items-center mb-3' >")
        .Write ("<div>")
        .Write ("<a type='button' class='btn btn-info btn-lg' ng-click='addData()' href='#myModal' data-toggle='modal'>Add Product</a>")
        .Write ("</div>")
        
        .Write ("<div class='col-xs-6 ml-auto'>")
        .Write ("<input style='border: 1px solid black' class='ml-0 form-control ng-pristine ng-valid' ng-model='searchKeyword' type='text'>")
        .Write ("</div>")
        .Write ("</div>")
        
        .Write ("<label id='getbtn' style='display: none; color: black'class='info'></label>")
      
        .Write ("<table id='load-data' class='table table-striped table-hover' style='width:100%'>")
        .Write ("<thead>")
        .Write (" <tr>")
        .Write (" <th>#</th>")
        .Write (" <th>Name</th>")
        .Write (" <th>Sku</th>")
        .Write (" <th>Price</th>")
        .Write ("<th>Qty</th>")
        .Write ("<th>Description</th>")
        .Write ("<th>Availability</th>")
        .Write ("<th>Action</th>")
        .Write ("</tr>")
        .Write ("</thead>")
        .Write ("<tbody>")
        .Write ("<tr ng-repeat='product in products  | filter: searchKeyword' id='del1'>")
        .Write ("<td>{{$index+1}}</td>")
        .Write ("<td>{{ product.name }}</td>")
        .Write ("<td>{{ product.sku }}</td>")
        .Write ("<td>{{ product.price }}</td>")
        .Write ("<td>{{ product.qty }}</td>")
        .Write ("<td>{{ product.description }}</td>")
        .Write ("<td>{{ product.availability }}</td>")
        .Write ("<td class='data-action'>")
        .Write ("<a pro-edit='{{ product.id }}' href='#myModal' data-toggle='modal' ng-click='update_data(product.id, product.name, product.sku, product.price, product.qty, product.description)'  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 pro-del='{{ product.id }}' 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 ("</tbody>")
        .Write ("<tfoot>")
        .Write ("<tr>")
        .Write (" <th>#</th>")
        .Write (" <th>Name</th>")
        .Write (" <th>Sku</th>")
        .Write (" <th>Price</th>")
        .Write ("<th>Qty</th>")
        .Write ("<th>Description</th>")
        .Write ("<th>Availability</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\bootstrap.min.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\sweetalert-dev.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\script.js" & " '></script>")
        
        .Write ("<script>")
        .Write ("$('#load-data tbody').on( 'click', '#delete-data', function () {")
        .Write ("var stuId = $(this).parents('tr');")
       
        .Write ("swal({title: 'Product 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: 'Product has been deleted.',")
        .Write ("type: 'success',")
        .Write ("confirmButtonText: 'OK',")
        .Write ("allowOutsideClick: 'false'")
        .Write ("}, function () {")
        .Write ("stuId.remove();  document.getElementById('getbtn').innerHTML = 'DELETE';")
        .Write ("});")
        .Write ("}});")
    
        .Write ("} );")
        .Write ("</script>")
    
        .Write ("</div>")
        
        .Write ("<div id='footer' class='container bg-success text-center' style='border-radius: 3px; padding: 2px'>")
        .Write ("Copyright © 2020 https://proghubsterzeak.com/")
        .Write ("</div>")
        
        .Write ("</body>")
        
        .Write ("</html>")
        Me.WebBrowser1.Refresh2
        Me.WebBrowser1.Document.Script.Document.Clear
        Me.WebBrowser1.Document.Script.Document.Close
    End With
End Sub

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

Private Sub Form_Resize()
setWindowSize
End Sub

Private Sub txtbtn_Change()
On Error Resume Next
If Me.txtbtn.Text = "SAVE" Then
Create_Recordset rstProduct, "Select * from tbl_products where name like'" & Me.txtname.Text & "'", myConn
If rstProduct.RecordCount = 1 Then
Exit Sub
End If
myConn.Execute "INSERT INTO tbl_products (name,sku,price,qty,description) value ('" & Me.txtname.Text & "','" & Me.txtsku.Text & "','" & Me.txtprice.Text & "','" & Me.txtqty.Text & "','" & Me.txtdes.Text & "')"
ElseIf Me.txtbtn.Text = "UPDATE" Then
myConn.Execute "UPDATE tbl_products SET name = '" & Me.txtname.Text & "', sku = '" & Me.txtsku.Text & "', price = '" & Me.txtprice.Text & "', qty = '" & Me.txtqty.Text & "', description = '" & Me.txtdes.Text & "' Where id = '" & Me.txtid.Text & "'"
ElseIf Me.txtbtn.Text = "DELETE" Then
On Error Resume Next
myConn.Execute "DELETE from tbl_products where id = " & Me.txtaction.Text
End If
Me.txtid.Text = ""
Me.txtname.Text = ""
Me.txtsku.Text = ""
Me.txtprice.Text = ""
Me.txtqty.Text = ""
Me.txtdes.Text = ""
Me.txtbtn.Text = ""
Me.txtaction.Text = ""
rstProduct.Requery
End Sub

Private Sub WebBrowser1_CommandStateChange(ByVal Command As Long, ByVal Enable As Boolean)
  On Error Resume Next
        Set HTMLdoc = WebBrowser1.Document
        Me.txtbtn.Text = WebBrowser1.Document.getElementById("getbtn").innerHTML
        Me.txtaction.Text = HTMLdoc.activeElement.getAttribute("pro-del")
        Me.txtaction.Text = HTMLdoc.activeElement.getAttribute("pro-edit")
        Me.txtname.Text = WebBrowser1.Document.getElementById("name").Value
        Me.txtsku.Text = WebBrowser1.Document.getElementById("sku").Value
        Me.txtprice.Text = WebBrowser1.Document.getElementById("price").Value
        Me.txtqty.Text = WebBrowser1.Document.getElementById("qty").Value
        Me.txtdes.Text = WebBrowser1.Document.getElementById("description").Value
        Me.txtid.Text = WebBrowser1.Document.getElementById("proid").Value
End Sub

Setup your mysql database connection Create a folder inside local server and rename the folder as “angular_crud” copy and paste the code below and save it as product.php to the folder created. This code will fetch data from database and return to JSON. Make sure you’ve run Apache and MySQL as services. In order to run the program you must do these steps correctly.

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

	include 'conn.php';
	$product = array();

	$queryretrieve=mysqli_query($conn,"SELECT * FROM tbl_products");
	$n = mysqli_num_rows($queryretrieve);

	if ($n!=0) {
		while($result = mysqli_fetch_array($queryretrieve)){
			$product[] = $result;
	} 
	echo json_encode($product);
	}
?>

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
AngularJS Visual Basic 6.0

Display Data with PHP & AngularJS in VB6

This tutorial we will display data using PHP and MySQL and returning it to JSON using AngularJS in vb6 application. I hope you have a basic understanding of AngularJS to implement it to your project. 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 AngularJS you can download it here https://angularjs.org/

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()
    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 name='viewport' content='width=device-width, initial-scale=1.0'>")
    .Write ("<meta http-equiv='X-UA-Compatible' content='ie=edge'>")
    .Write ("<title>Document</title>")
    .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
    .Write ("</head>")
    .Write ("<script src=' " & App.Path & "\js\angular.min.js" & "'></script>")
    
    .Write ("<body>")
    
    .Write ("<div ng-app='myApp' ng-controller='myCtrl'>")
    .Write ("<div class='container'>")
    .Write ("<h1 class='pl-5 pt-5'>DASHBOARD</h1>")
    .Write ("<p class='pl-5'>My First AngularJS in VB6</p>")
    .Write ("<div class='p-5 card-deck mb-3 text-center' >")
    
    .Write ("<div  ng-repeat='bill in bills' class='card mb-4 box-shadow'>")
    .Write ("<div class='card-header'>")
    .Write ("<h4 class='my-0 font-weight-normal' >{{ bill.fullname }}</h4>")
    .Write ("</div>")
    .Write ("<div class='card-body {{ bill.status }}'>")
    .Write ("<h1 class='card-title'>${{ bill.mondue }} <small class='text-muted'>/ mo</small>")
    .Write ("<h1>")
    .Write ("</div>")
    .Write ("</div>")

    .Write ("</div>")
    
    .Write ("<div id='footer' class=' text-center'>")
    .Write ("Copyright © 2020 http://proghubsterzeak.com/")
    .Write ("</div>")
    
    .Write ("</div>")
    .Write ("</div>")
    
    .Write ("<script>")
    .Write ("var app = angular.module('myApp', []);")
    .Write ("app.controller('myCtrl', function($scope, $http) {")
    .Write ("$http.get('http://localhost/angularjs/fetch.php')")
    .Write (".then(function (response) {$scope.bills = response.data.records;});")
    .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

Setup your mysql database connection Create a folder inside C:\xampp\htdocs\ rename the folder as “angularjs” copy and paste the code below and save it as fetch.php to the folder created. This code will fetch data from database and return it to JSON. Make sure you’ve run Apache and MySQL as services. In order to run the program you must do these steps correctly.

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("localhost", "root", "", "db_bill");

$result = $conn->query("SELECT fullname, mon_due, status FROM tbl_client");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"fullname":"'  . $rs["fullname"] . '",';
    $outp .= '"status":"'  . $rs["status"] . '",';
    $outp .= '"mondue":"'. $rs["mon_due"]     . '"}'; 
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo($outp);
?>

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
AngularJS Visual Basic 6.0

Login with AngularJS in VB6 Application

We will Integrate AngularJS Login in vb6 application with MySQL Database. I hope you have a basic understanding of AngularJS to implement it to your project. 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 AngularJS you can download it here https://angularjs.org/

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()
    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 name='viewport' content='width=device-width, initial-scale=1.0'>")
    .Write ("<meta http-equiv='X-UA-Compatible' content='ie=edge'>")
    .Write ("<title>Document</title>")
    .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
    .Write ("<style>")
    .Write ("html {height: 100%;}")
    
    .Write ("body {background: #445e93;}")
    
    .Write (".login-wrapper {width: 360px;margin: 7% auto;background: #fff;padding: 20px; border-top: 0;color: #666;}")
    
    .Write (".form-control {border-radius: 0;box-shadow: none;border-color: #d2d6de;}")
    
    .Write (".form-control:focus {border-color: #3c8dbc;box-shadow: none;}")
    
    .Write (".form-control::placeholder {color: #999;opacity: 1;font-size: 14px;}")
    
    .Write (".btn.btn-flat {border-radius: 0;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;")
    .Write ("border-width: 1px;}")

    .Write (".btn-primary {background-color: #3c8dbc;border-color: #367fa9;}")
    
    .Write (".form-group { position: relative;}")
    
    .Write ("img {width: 100%; max-width: 15px;}")
    
    .Write ("span { position: absolute;right: 12px;top: 9%;}")
    .Write ("</style>")
    .Write ("</head>")
    .Write ("<script src=' " & App.Path & "\js\angular.min.js" & "'></script>")
    
    .Write ("<body>")
    
    .Write ("<div ng-app='myApp' ng-controller='myCtrl'>")
    .Write ("<div class='container'>")
    .Write ("<h1 class='pt-5 text-center text-warning'>WELCOME USER</h1>")
    .Write ("<p class='text-center text-white'>Login using AngularJS  in VB6</p>")
    
    .Write ("<div class='login-wrapper'>")
    .Write ("<div class='login-title text-center pb-3'>")
    .Write ("<h3>Login Security System</h3>")
    .Write ("</div>")
    .Write ("<div ng-show='showlogin' class='login-body'>")
    .Write ("<div class='form-group '>")
    .Write ("<input type='email' ng-model='email' class='form-control' name='email' id='email' placeholder='Email' autocomplete='off'>")
    .Write ("<span><img src=' " & App.Path & "\images\user.png" & "'></span>")
    .Write ("</div>")
    .Write ("<div class='form-group'>")
    .Write ("<input type='password' ng-model='password' class='form-control' name='password' id='password' placeholder='Password' autocomplete='off'>")
    .Write ("<span><img src=' " & App.Path & "\images\locked.png" & "'></span>")
    .Write ("</div>")
    .Write ("</div>")
    .Write ("<div class='d-flex align-items-center'>")
    .Write ("<div class='col-md-8 p-0 d-flex align-items-center'>")
    .Write ("<input ng-show='showcheck' type='checkbox' name='' id=''> <p style='margin-top: 13px; margin-left: 5px' ng-show='showtext' >Remember Me</p>")
    .Write ("</div>")
    
    .Write ("<div class='col-md-4 p-0'>")
    .Write ("<button type='submit' ng-show='showsignin' ng-click='login()' class='btn btn-primary btn-block btn-flat'>Sign In</button>")
     .Write ("<button type='submit' ng-show='showlogout' ng-click='logout()' class='btn btn-primary btn-block btn-flat'>Sign Out</button>")
    .Write ("</div>")
    
    .Write ("</div>")
    .Write ("</div>")

    .Write ("<div id='footer' class='text-white text-center'>")
    .Write ("Copyright © 2020 http://proghubsterzeak.com/")
    .Write ("</div>")
    
    .Write ("</div>")
    .Write ("</div>")
    
    Create_Recordset rstUser, "Select * from tbl_users ", myConn
    .Write ("<script>")
    .Write ("var app = angular.module('myApp', []);")
    .Write ("app.controller('myCtrl', function($scope) {")
    .Write ("$scope.username = '" & rstUser![email] & "';")
    .Write ("$scope.pass = '" & rstUser![password] & "';")
    .Write ("$scope.showlogin = true;")
    .Write ("$scope.showlogout = false;")
    .Write ("$scope.showsignin = true;")
    .Write ("$scope.showcheck = true;")
    .Write ("$scope.showtext = true;")
    
    .Write ("$scope.login = function() {")
    .Write ("if ($scope.email == null || $scope.password == null) {")
    .Write ("alert('Please complete the required fields');")
    .Write ("} else {")
    
    .Write ("if ($scope.username != $scope.email || $scope.password != $scope.pass) {")
    .Write ("alert('Invalid Email and Password');")
    .Write ("} else {")
    .Write ("alert('Login Successfully!');")
    .Write ("$scope.showlogin = false;")
    .Write ("$scope.showlogout = true;")
    .Write ("$scope.showcheck = false;")
    .Write ("$scope.showsignin = false;")
    .Write ("$scope.showtext = false;")
    .Write ("};")
    
    .Write ("}")
    .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

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, "db_user"
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

jQuery Login with Toastr Alert using MySQL Database in VB6 App

In this tutorial we will integrate Toastr Alert in vb6 application using jquery plugin. 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 ("<link href=' " & App.Path & "\css\toastr.css" & " ' rel='stylesheet' type='text/css'>")
        .Write ("<style>")
     
        .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: blue  }")
        .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 ("<h4 class='mb-5 text-center'> jQuery Login with Toastr Alert 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 ("ProgHubsterz Blogspot 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-success btn-block form-btn'>")
        .Write ("Login")
        .Write ("</button>")
        .Write ("</div>")
 
        .Write ("</div>")
        .Write ("</form>")
     
        .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
        .Write ("<script src=' " & App.Path & "\js\toastr.js" & " '></script>")
     
        .Write ("<script>")
        .Write (" $('#login').on('click', function(){")
        .Write (" email = $('#email').val();")
        .Write (" password = $('#password').val();")
        .Write (" username = $('.demail').text();")
        .Write (" pass = $('.dpass').text();")
        .Write ("var status;")
     
        .Write ("if ((email== '') || (password== '')) {")
     
        .Write ("status = 'Input email and password!';")
        .Write ("toastr.error(status, 'Login', {")
        .Write ("'closeButton': true,")
        .Write ("'newestOnTop': true,")
        .Write ("'progressBar': true,")
        .Write ("'positionClass': 'toast-top-right',")
        .Write ("'preventDuplicates': false,")
        .Write ("'onclick': null,")
        .Write ("'showDuration': '300',")
        .Write ("'hideDuration': '1000',")
        .Write ("'timeOut': '5000',")
        .Write ("'extendedTimeOut': '1000',")
        .Write ("'showEasing': 'swing',")
        .Write ("'hideEasing': 'linear',")
        .Write ("'showMethod': 'fadeIn',")
        .Write ("'hideMethod': 'fadeOut'")
        .Write ("});")
     
        .Write ("} else {")
     
        .Write ("if ((email != username) || (password != pass)){")
        .Write ("status = 'Invalid email and password!';")
     
        .Write ("toastr.error(status, 'Login', {")
        .Write ("'closeButton': true,")
        .Write ("'newestOnTop': true,")
        .Write ("'progressBar': true,")
        .Write ("'positionClass': 'toast-top-right',")
        .Write ("'preventDuplicates': false,")
        .Write ("'onclick': null,")
        .Write ("'showDuration': '300',")
        .Write ("'hideDuration': '1000',")
        .Write ("'timeOut': '5000',")
        .Write ("'extendedTimeOut': '1000',")
        .Write ("'showEasing': 'swing',")
        .Write ("'hideEasing': 'linear',")
        .Write ("'showMethod': 'fadeIn',")
        .Write ("'hideMethod': 'fadeOut'")
        .Write ("});")

        .Write ("} else {")
        .Write ("status = 'Login Successfully';")
     
        .Write ("toastr.success(status, 'Login', {")
        .Write ("'closeButton': true,")
        .Write ("'newestOnTop': true,")
        .Write ("'progressBar': true,")
        .Write ("'positionClass': 'toast-top-right',")
        .Write ("'preventDuplicates': false,")
        .Write ("'onclick': null,")
        .Write ("'showDuration': '300',")
        .Write ("'hideDuration': '1000',")
        .Write ("'timeOut': '5000',")
        .Write ("'extendedTimeOut': '1000',")
        .Write ("'showEasing': 'swing',")
        .Write ("'hideEasing': 'linear',")
        .Write ("'showMethod': 'fadeIn',")
        .Write ("'hideMethod': 'fadeOut'")
        .Write ("});")
     
        .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
PHP

Display Blob image in MySQL using PHP

In this simple program read MySQL BLOB using PHP . 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/

Copy the code below and paste it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<style>
.cont-wrapper li img {
max-width: 100px;
height: 100px;
width: 100%;
object-fit: cover;
margin: 5px;
border: 2px solid #d55656;
border-radius: 5px;
}
.cont-wrapper li a {
    margin: 10px;
    color: #ccc;
    width: 100%;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
padding: 16px 0;
}
.cont-wrapper li a:hover {
color: #d55656;
text-decoration: none;
}
.col-list {
background-color: #000c;
}
.cont-wrapper li {
list-style: none;
border-top: 1px solid #ccc;
border-left: none;
border-right: none;
}
.cont-wrapper li:hover img {
    opacity: 0.8;
}
.cont-wrapper li:first-child  {
  border-top: none;
}
.cont-wrapper li:last-child  {
  border-bottom: none;
}

.cont-wrapper {
padding: 0;
}

@media screen and (max-width: 440px ) {
.cont-wrapper li img {
    max-width: 70px;
    height: 70px;
}
}
</style>
<body>
    <div class="myapp">
        <div class="container-fluid">
              <div class="row">
                <div class="col-list col-md-12 col-sm-6 mb-3">
                  <ul class="cont-wrapper mt-3">

                  <?php       
                      require 'conn.php';
                      $query = mysqli_query($conn, "SELECT * FROM `tbl_tvlink`");
                      while($fetch = mysqli_fetch_array( $query)){
                  ?>

                    <li  class="d-flex align-items-center">
                        <?php  echo '<img src="data:image/jpeg;base64,'.base64_encode( $fetch['tv_image'] ).'" >';?>
                        <a href="<?php echo $fetch['tv_link']?>" target="_blank"><?php echo $fetch['tv_title']?> »</a>
                    </li>
                    <?php
                        }
                    ?>
                   
                  </ul>
                </div>
              </div>
        </div>
    </div>
</body>
</html>

Setup your database connection copy and paste the code below for your data source connection save and name it to conn.php .

<?php 
    $conn=mysqli_connect("localhost", "root", "", "db_tv");

        if(!$conn){
            die("Error: Failed To Connect Database!");
        }
?>

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

Mark as Read Post and Search Textbox in jQuery using MySQL in VB6 App

In this tutorial we will search data and mark as read using jquery in VB6 App. We will use HTML and CSS for VB6 GUIs to be more intuitive and attractive. 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.

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 name='viewport' content='width=device-width, initial-scale=1.0'>")
    .Write ("<meta http-equiv='X-UA-Compatible' content='ie=edge'>")
    .Write ("<title>Document</title>")
    .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
    .Write ("</head>")
    .Write ("<style>")
    .Write ("body,html{background: -webkit-linear-gradient(to left, #df6318, #f23434);  /* Chrome 10-25, Safari 5.1-6 */;background: linear-gradient(to left, #df6318, #f23434); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}")
    .Write ("h2 {color: #f4d6d6;}")
    .Write ("</style>")
    .Write ("<body>")
    .Write ("<div class='myapp p-5'>")
    .Write ("<div class='container'>")
    .Write ("<h4 class='mb-3'>Proghusbterz Blogspot</h4>")
    .Write ("<h3 class='mb-3'>Mark as Read Post and Search Textbox in Jquery  using mysql in vb6 app</h3>")
    .Write ("<input id='filter' class='form-control mr-sm-2' type='text' placeholder='Search' aria-label='Search'><br />")
    .Write (" <hr>")
    .Write ("<div class='row'>")
                   
    Create_Recordset rstPost, "Select * from tbl_post", myConn
    Do While rstPost.EOF <> True
 
    .Write ("<div class='col col-md-4 mb-3'>")
    .Write ("<h2>" & rstPost![post_title] & "</h2>")
    .Write ("<p>" & rstPost![post_desc] & "</p>")
    .Write ("<p><a btn-read='" & rstPost![post_id] & "' class='btn " & rstPost![Status] & "' href='#' role='button'>Mark as Read »</a></p>")
    .Write ("</div>")
 
    rstPost.MoveNext
    Loop
     
    .Write ("</div>")
    .Write (" </div>")
    .Write ("</div>")
    .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
 
    .Write ("<script>")
    .Write ("$('#filter').bind('keyup', function() {")
    .Write ("var text = $(this).val().toLowerCase();")
    .Write ("var items = $('.col h2');")
 
    '.Write ("//first, hide all:")
    .Write ("items.parent().hide();")
 
    '.Write ("//show only those matching user input:")
    .Write ("items.filter(function () {")
    .Write ("return $(this).text().toLowerCase().indexOf(text) == 0;")
    .Write ("}).parent().show();")
    .Write ("});")
    .Write ("</script>")
 
    .Write ("</body>")
    .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub Text1_Change()
On Error Resume Next
myConn.Execute "UPDATE tbl_post SET status = '" & "btn-success" & "' Where post_id = '" & Me.Text1.Text & "'"
Call load
Me.Refresh
End Sub

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

Private Sub Form_Resize()
setWindowSize
End Sub

Private Sub WebBrowser1_CommandStateChange(ByVal Command As Long, ByVal Enable As Boolean)
  On Error Resume Next
        Set HTMLdoc = WebBrowser1.Document
        Me.Text1.Text = HTMLdoc.activeElement.getAttribute("btn-read")
        Me.Text1.Text = ""
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 rstPost As ADODB.Recordset

Sub main()
MySqlConn myConn, "db_post"
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

Display and Count Post using MySQL in VB6 App

In this tutorial we will display and count post record from database using in VB6 App. We will use HTML and CSS for VB6 GUIs to be more intuitive and attractive. 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()
    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 name='viewport' content='width=device-width, initial-scale=1.0'>")
    .Write ("<meta http-equiv='X-UA-Compatible' content='ie=edge'>")
    .Write ("<title>Document</title>")
    .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
    .Write ("</head>")
    .Write ("<style>")
    .Write ("body,html{background: -webkit-linear-gradient(to left,#ecca47, #c83e14);background: linear-gradient(to left,#ecca47, #c83e14); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}")
    .Write (".user-wrapper {flex-wrap: wrap;}")
    .Write (".categ {word-break: break-word; max-width: 50px; width: 100%; height: 50px; overflow: hidden;}")
    .Write (".count-post {background-color: #131111;width: 100%;border-radius: 5px;padding: 10px;color:#fff;}")
    .Write ("@media (max-width: 991px) {.col {flex-basis: 100%;flex-grow: 1;width: 100%;max-width: 100%;}}")
    .Write (".user-wrapper p {word-break: break-word;max-width: 280px;width: 100%; height: 90px; overflow: hidden;}")
    .Write ("</style>")
    .Write ("<body>")
    .Write ("<div class='myapp p-5'>")
    .Write (" <div class='container'>")
    .Write ("<h3 class='mb-3'>Proghusbterz blogspot</h3>")
    .Write ("<h1 class='mb-3'>Display/Count Post using MySQL in Vb6 Application</h1>")
    .Write (" <div class='user-wrapper d-flex align-items-center'>")
 
    Create_Recordset rstPost, "Select * from tbl_post ", myConn
    Do While rstPost.EOF <> True
    .Write (" <div class='col col-md-6'>")
    .Write (" <div class='card flex-md-row mb-4'>")
    .Write ("<div class='card-body d-flex flex-column align-items-start'>")
    .Write ("  <strong class='d-inline-block mb-2 text-success'>" & rstPost![category] & "</strong>")
    .Write (" <h3 class='mb-0'>")
    .Write ("   <a class='text-dark' href='#'>" & rstPost![post_title] & "</a>")
    .Write (" </h3>")
    .Write ("<div class='mb-1 text-muted'>" & rstPost![datex] & "</div>")
    .Write ("<p class='card-text mb-auto'>" & rstPost![post_desc] & "</p>")
    .Write ("<a href='#'>Continue reading</a>")
    .Write ("</div>")
    .Write ("<img class='card-img-right flex-auto d-none d-md-block' src='" & App.Path & "\" & rstPost![Image] & "' alt='img-profile' style='width: 200px; height: 250px;object-fit: cover;' data-holder-rendered='true'>")
    .Write ("</div>")
    .Write (" </div>")
    rstPost.MoveNext
    Loop
 
    .Write ("</div>")
    .Write ("<p class='count-post p-2'></p>")
    .Write (" </div>")
    .Write (" </div>")
    .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
    .Write ("<script>")
 
    .Write (" $(document).ready(function() {")
    .Write ("      $('.user-wrapper .col').each(function () {")
    .Write ("     var indexCount = $(this).index() + 1;")
    .Write ("    $('.count-post').text('Number of Post ' + indexCount);")
    .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

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 rstPost As ADODB.Recordset

Sub main()
MySqlConn myConn, "db_post"
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

Display & Delete User using MySQL Database in VB6 App

Display and delete user record in database using in VB6 App. We will use HTML and CSS for VB6 GUIs to be more intuitive and attractive. 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()
    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 name='viewport' content='width=device-width, initial-scale=1.0'>")
    .Write ("<meta http-equiv='X-UA-Compatible' content='ie=edge'>")
    .Write ("<title>Document</title>")
    .Write ("<link href=' " & App.Path & "\css\bootstrap.css" & " ' rel='stylesheet' type='text/css'>")
    .Write ("</head>")
    .Write ("<style>")
    .Write ("body,html{background: #a8ff78;  /* fallback for old browsers */;background: -webkit-linear-gradient(to left, #78ffd6, #a8ff78);  /* Chrome 10-25, Safari 5.1-6 */;background: linear-gradient(to left, #78ffd6, #a8ff78); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}")
    .Write (".user-wrapper img {width: 100%;max-width: 240px;}")
    .Write (".img-wrapper {border-radius: 100%;overflow: hidden;max-width: 170px;border: 3px solid chartreuse;margin: 0 auto;}")
    .Write (".user-wrapper img {width: 100%;height: 155px;object-fit: cover;}")
    .Write (".user-wrapper .col span {text-align: center;background-color: #fcc79b;display: block;max-width: 170px;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 5px;margin: 0 auto;}")
    .Write (".btn-del button {position: absolute;bottom: -40px;left: 0;right: 0;margin: 0 auto;border-radius: 20px;background-color: crimson;max-width: 33px;width: 100%;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;}")
    .Write (".btn-del {position: relative;}")
    .Write (".img-wrapper:hover .btn-del button {bottom: 62px;  }")
    .Write (".img-wrapper:hover img {filter: blur(1px); opacity: 0.7}")
    .Write (".user-wrapper {flex-wrap: wrap;}")
    .Write ("</style>")
    .Write ("<body>")
    .Write ("<div class='myapp p-5'>")
    .Write ("<div class='container'>")
    .Write ("<h3 class='mb-3'>Proghusbter</h3>")
    .Write ("<h1 class='mb-3'>Display/Delete User using MySQL in Vb6 Application</h1>")
    .Write ("<div class='user-wrapper d-flex align-items-center'>")
        Create_Recordset rstUser, "Select * from tbl_users ", myConn
        Do While rstUser.EOF <> True
    .Write ("<div class='col col1 col-md-4 mb-5'>")
    .Write ("<div class='img-wrapper'>")
    .Write ("<img src='" & App.Path & "\" & rstUser![Image] & "' alt='img-profile' class='img-responsive'>")
    .Write ("<div class='btn-del'>")
    .Write ("<button title='Delete' class='btn-sm btn-danger' user-del='" & rstUser![user_id] & "'>x</button>")
    .Write ("</div>")
    .Write ("</div>")
    .Write ("<span><b>" & rstUser![username] & "</b></span>")
    .Write ("</div>")
        rstUser.MoveNext
        Loop
    .Write ("</div>")
    .Write (" </div>")
    .Write ("</div>")
    .Write ("<script src=' " & App.Path & "\js\jquery-3.3.1.js" & " '></script>")
    .Write ("<script>")
    .Write ("$(document).on('click', '.btn-del button', function () {")
    .Write ("var deluser = $(this).parent().parent().parent();")
    .Write (" deluser.fadeOut(function () {")
    .Write (" $(this).remove();")
    .Write ("});")
    .Write (" });")
    .Write ("</script>")
    .Write ("</body>")
    .Write ("</html>")
        Me.WebBrowser1.Refresh2
    End With
End Sub

Private Sub Text1_Change()
On Error Resume Next
 myConn.Execute "DELETE from tbl_users where user_id = " & Text1.Text
rstUser.Requery
End Sub

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

Private Sub Form_Resize()
setWindowSize
End Sub

Private Sub WebBrowser1_CommandStateChange(ByVal Command As Long, ByVal Enable As Boolean)
  On Error Resume Next
        Set HTMLdoc = WebBrowser1.Document
        Me.Text1.Text = HTMLdoc.activeElement.getAttribute("user-del")
        Me.Text1.Text = ""
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

Student Profiling using MySQL in VB6 App

Simple Student Profiling System templates for you to use in making VB6 App. 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: linear-gradient(to right, rgb(170, 7, 107), rgb(97, 4, 95));")
        .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 ("tr{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'>Proghubster Source Codes</h4>")
        .Write ("<h1 style='color: #ccc' class='mb-5'>Student Profiling using  MySQL  in VB6 App</h1>")
        .Write ("<table id='load-data' class='table table-striped table-bordered' style='width:100%'>")
        .Write ("<thead>")
        .Write (" <tr>")
        .Write (" <th>Image</th>")
        .Write (" <th>Student</th>")
        .Write (" <th>Age</th>")
        .Write (" <th>Sex</th>")
        .Write ("<th>Address</th>")
        .Write ("<th>Year</th>")
        .Write ("<th>Status</th>")
        .Write ("</tr>")
        .Write ("</thead>")
        .Write ("<tbody>")
        Create_Recordset rstStudent, "Select * from tbl_profile ", myConn
        Do While rstStudent.EOF <> True
        .Write (" <tr>")
        .Write ("<td style='width: 10%'><img style='max-width: 100px; width: 100%; margin: 0 auto' src='" & App.Path & "\" & rstStudent![Image] & "' alt='img-profile' class='img-responsive'> </td>")
        .Write ("<td>" & rstStudent![student] & "</td>")
        .Write ("<td>" & rstStudent![age] & "</td>")
        .Write ("<td>" & rstStudent![sex] & "</td>")
        .Write ("<td>" & rstStudent![address] & "</td>")
        .Write ("<td>" & rstStudent![year_level] & "</td>")
        .Write ("<td>" & rstStudent![Status] & "</td>")
        .Write ("</tr>")
        rstStudent.MoveNext
        Loop
        .Write ("</tbody>")
        .Write ("<tfoot>")
        .Write ("<tr>")
        .Write (" <th>Image</th>")
        .Write (" <th>Student</th>")
        .Write (" <th>Age</th>")
        .Write (" <th>Sex</th>")
        .Write ("<th>Address</th>")
        .Write ("<th>Year</th>")
        .Write ("<th>Status</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 rstStudent As ADODB.Recordset

Sub main()
MySqlConn myConn, "db_profiling"
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!