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!

Share this
  •  
  •  
  •  
  •  
  •  
  •  
  • 42
    Shares

2 replies on “Display Data with PHP & AngularJS in VB6”

Leave a Reply

Your email address will not be published. Required fields are marked *