AppML Dynamic DB Connections - javascript

I am new to web development. I am currently studying many web programming languages (client and server side).
I am trying to build a web app that connects to many different databases and many different tables in these database depending on the user input.
Currently I am using the following:
1. html (for user view)
2. php (for controller functions)
3. mysql (my data source)
4. appml (for easy data extraction and display)
5. json (for modeling my data)
I have been able to create a php/html page that connects via appML to my MySQL database and to a table inside it.
Here is my calling page code Reports.php:
<?php
?>
<!DOCTYPE html>
<html lang="en">
<title>Customers</title>
<script src="appml.js"></script>
<body>
<div class="container" appml-data="appml.php?model=model_Report.js">
<h1>Interfaces</h1>
<table class="table table-striped table-bordered">
<tr>
<th>Description</th>
<th>Location</th>
<th>Model</th>
<th>Serial Number</th>
<th>IP Address</th>
<th>Subnet/Gateway</th>
<th>Firmware Version</th>
</tr>
<tr appml-repeat="records">
<th>{{description}}</th>
<th>{{location}}</th>
<th>{{model}}</th>
<th>{{serial_number}}</th>
<th>{{ip_address}}</th>
<th>{{subnet_gateway}}</th>
<th>{{firmware_version}}</th>
</tr>
</table>
</div>
</body>
</html>
Here is my model_Reports.js code for the Reports.php page:
{
"rowsperpage" : 28,
"database" :
{
"connection" : "myDB1",
"sql" : "SELECT * FROM **network**",
"orderby" : "id"
}
}
Here is my appml_config.php code for appml.php running on server:
<?php echo("Access Forbidden");exit();
?>
{
"dateformat" : "yyyy-mm-dd",
"databases" : [
{
"connection" : "myDB1",
"host" : "localhost",
"dbname" : "**aDataBase**",
"username" : "random",
"password" : "pass"
}
]
}
Now, I want to move to the next step, allowing the user to choose:
1. which db to connect to
2. which table to connect to
3. which queries to run
The text I created in bold are the items I have identified that are to be dynamic. The user should choose.
I have tried searching the web, replacing them with relevant PHP variables using the echo command. But to no avail.
Can anyone give me a pointer or two on how this can be achieved.
I am not looking that someone do the code for me, just to tell me what strategy and languages I am looking at that will provide the solution after more research and coding from my side.
Thanks.

Related

How to get a value from a database onto my webpage?

Hi I am struggling to figure out how to retrieve the value from querying from an oracle database onto my web page?
I am quite new to coding and have managed to create the skeleton for where I want the code to be along with the controller and router (router not included below) to create a microservice for this action to be called. I appreciate any help. Thanks
Here are some snippits from my httpd (where I have 'Number' I want it to query the SELECT COUNT(Customer_ID) from Book:
<div class="col-md-4">
<h2>General Info 1</h2>
<table class="table table-bordered table-hover table-sm">
<thead>
<tr>
<th>Information</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td># Customers</td>
<td>Number</td>
</tr>
</tbody>
</table>
</div>
I also have the following controller too:
async function database_stats(query) {
query = `SELECT COUNT(CUSTOMER_ID) from BOOK`;
return query;
}
module.exports.database_stats = database_stats;
i think your question is very vague however... willing to send you in the right direction. The Answer depends on if you are using a 'stand alone front end' or a 'server side rendered page'. In the case of a 'stand alone front end' please do some research on AJAX. You can make a 'AJAX' request to your server to get the data, then use javascript to inject the data into the DOM. otherwise i would suggest looking into a template language such as ejs to inject variables into your html & serve.

Pulling cell data from Google Sheets to a text box or label in Google App Maker

I am working on an app in Google app maker, and I want to pull specific cell values from sheets into the app.
I've tried using API's like Sheetsu,only to find that the only way the data will be input is using iFrame as a chart. The code below works when input into a test window of Tryit Editor v3.6, but will not correctly pull the values when input into an HTML widget in App Maker
<table>
<thead>
<th>Pending Matters</th>
<th>Closed Matters</th>
<th>Risk Meter</th>
<th>Closing %</th>
</thead>
<tbody sheetsu="https://sheetsu.com/apis/v1.0su/386ed1faa5dc" sheetsu-limit="3">
<tr>
<td>{{Pending Matters}}</td>
<td>{{Closed Matters}}</td>
<td>{{Risk Meter}}</td>
<td>{{Closing %}}</td>
</tr>
</tbody>
</table>
<script src="//load.sheetsu.com"></script>
I haven't used apis or sheetsu before, but the GAS basic calls to sheets/gmail/etc work the same way they do in regular GAS.
The way i'd solve your problem is to
Appmaker: Create a data source with the same fields as your sheet
Appmaker Server Script: open the sheet, read the values, and write
them to the datasource (using SpreadsheetApp).
AppmakerPage: Display the datasource with a table widget
AppmakerPage: call the server script on page or app load.

Paging an html-table while maintaining filter options

For a customer we are making a webpages project. This includes a lot of tables with even more records.
I am looking for a client-side way to show only a certain part of the table (be it a TOP 100, records for the past month, something like that), but keeping all the records available for usage by a search filter.
The search filter I am currently using is the one from W3.JS (w3.htmlFilter), but upon loading this still shows over 500 records.
The main objective is described above, but I'd also accept a decent solution which would allow me to display 10 records, without losing the filter optionality.
The table is populated using a foreach that constructs each record based on a collection provided using Razor.
Already tried setting the Table Max-Height and giving it a Y-overflow.
Already tried a display:inline-block, but this destroyed all lay-out.
Already tried some JS, which displayed only certain records, but meant I lost access to the non-displayed records (due to Razor).
To populate my data I use this Razor:
#{
var allFoo = db.GetFoos();
var foosToShow = foos.Where(v => v.SomeCondition == true);
}
The filter applied to the table:
<input id="filter" oninput="w3.filterHTML('#foosTable', '.filterItem', this.value)" class="w3-input" placeholder="Search for foo..." />
actually populating the records:
<tbody>
#foreach (Foo foo in foosToShow)
{
<tr class="filterItem" onclick="TransferElement(this)">
<td>#foo.Prop1</td>
<td>#foo.Prop2</td>
<td>#foo.Prop3</td>
<td>#foo.Prop4</td>
<td>#foo.Prop5</td>
<td>#foo.Prop6</td>
</tr>
}
</tbody>
Expected Result: Filterable List of X records long, where X can be set.
Here is a solution by using datatables:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<script>
var data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh"
],
[
"Garrett Winters",
"Director",
"Edinburgh"
]
]
$(document).ready( function () {
$('#table_id').DataTable( {
data: data
} );
} );
</script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
<th>City</th>
</tr>
</thead>
</table>
</body>
</html>
The only thing you have to change is the variable data to your array with data.
Everything works without server side processing.
What you could also do: Create a getdata.php file and use this one as data source by echoing the query result as JSON.
For further information: https://datatables.net/manual/data/

tablesorter multiple dynamic tables on one part

Hi I am totally stuck on this one.
I am using tablesorter on data pulled from a mysql database.
The problem is, based on criteria, I can have multiple tables pulled and displayed.
My problem is that tablesorter will only sort the first table instance.
This is the code I am using for the tablesorter. Basic use of it.
<script type="text/javascript" >
$(document).ready(function()
{
$("#table-2").tablesorter();
}
And this is how I pull the data and use it with tablesorter.
It is the Branchname that can change. If a user is assigned more than one branch they get multiple tables. This is where I'm stuck on implementing tablesorter on any table past the first instance.
$result=mysql_query("SELECT id FROM users WHERE username='$username'");
$idary=mysql_fetch_assoc($result);
$id=$idary['id'];
$result0=mysql_query("SELECT branch_id FROM access WHERE userid='$id'");
while ($row1=mysql_fetch_assoc($result0))
{
$branch_id=$row1['branch_id'];
$result=mysql_query("select distinct(name) from location where id='$branch_id'");
$nameary=mysql_fetch_assoc($result);
$branchname=$nameary['name'];
?>
<table>
<thead>
<b><br><?echo $branchname; ?></b>
</thead>
</table>
<div>
<table id='table-2' class='tablesorter'>
<thead>
<tr>
<thCreator</th>
<th><center>TeamName</th>
<th><center>Tech Tot</th>
<th><center>Tot W/O</th>
<th><center>Tot S/C</th>
</tr>
</thead>
// get team creators from province
$result1=mysql_query("select distinct(teamcreator) from techteams where....
I'm thinking I would need to use some form of incrementing tablename to match the number of tables pulled but I'm stuck on how to do this.
I could be wrong on that assumption and there might be a much easier way of doing this.
If anyone has any pointers in the right direction I'd love some tips.
Cheers,
-Colin.
you could try to give your tables an own class instead of an id.
<table class='mytables'>
<script type="text/javascript" >
$(document).ready(function()
{
$(".mytables").tablesorter();
}
</script>
or maybe only give them the table-sorter class and in your script you try something like this:
$("table").tablesorter();
Try it:
$(".tablesorter").tablesorter();

Displaying MongoDB Documents with HTML

I am trying to create an HTML table to display the contents of a mongodb collection. The collection contains data about different customer orders from a small business. Some of the data will always exist in a given document, for example the customer name and phone number. However, some of the pieces of data within each document need to vary, such as items ordered since one customer may order 1 item, while another may order 3 items. So, if I have a mongodb collection with documents that contain an arbitrary number fields in each document, how can I dynamically add them to an HTML table to display the document's contents? As an example of the type of display I am looking for, here is the hard-coded HTML for the fields which I know will remain constant.
<!DOCTYPE html>
<html>
<head>
<head>
<title>Invoice Report</title>
<style type="text/css">
body {font-family:sans-serif;color:#4f494f;}
form input {border-radius: 7.5px;}
h5 {display: inline;}
.label {text-align: right}
.ordersBook {float:left; padding-top: 10px;}
.name {width:100%;float:left; padding:3px;}
.wrapper { padding-left: 25px; padding-top: 20px}
</style>
<script type="text/javascript">
var itemRe = /item*/;
}
</script>
</head>
</head>
<body>
<div class="invoice">
<h4>Order Form:</h4>
<table border="1">
<tr>
<th>Name:</th>
<td>{{rows['name']}}</td>
</tr>
<tr>
<th>Created:</th>
<td>{{rows['created']}}</td>
</tr>
<tr>
<th>Phone:</th>
<td>{{rows['phone']}}</td>
</tr>
<tr>
<th>Email:</th>
<td>{{rows['email']}}</td>
</tr>
<tr>
<th>Item:</th>
<td>{{rows['item']}}</td>
</tr>
</div>
<tr>
<th>Quantity:</th>
<td>{{rows['qty']}}</td>
</tr>
<tr>
<th>Color:</th>
<td>{{rows['color']}}</td>
</tr>
<tr>
<th>Quote:</th>
<td>{{rows['quote']}}</td>
</tr>
</table>
</div>
</body>
</html>
It would probably be better to create the entire table dynamically, but I am not sure where the proper place to do this is
in a javascript function within the HTML file?
Or maybe in the pymongo file which maintains the info in the mongodb database?
The python code which handles sending the mongodb document to the HTML form uses a python Bottle template.
#bottle.route('/view/<_id>', method = 'GET')
def show_invoice(_id):
client = pymongo.MongoClient("mongodb://localhost")
db = client.orders
collection = db.myorders
from bson.objectid import ObjectId
result = collection.find_one({'_id': ObjectId(_id)})
return bottle.template('invoice', rows = result)
I greatly appreciate any help that someone may be able to offer! =)
Looking over the documentation for the bottle template engine, it looks like you can use 'ifs' and 'fors' to accomplish this.
For instance, if you order is stored at rows['orders'] and you don't know how many there are, in your template you can place:
%for item in rows['orders']:
<td>{{item}}</td>
%end
or say that you need to display a special warning if your customer is ordering an item that is frequently on backorder, and you've passed in another variable, 'backorder', that specifies this:
%if backorder:
<span>This item is frequently on backorder</span>
%end
I haven't tested either of these, but I've done similar things using the Django and Flask template engines. I pulled these samples from here:
http://bottlepy.org/docs/dev/tutorial.html#templates
and the 'Bottle Template to Format the Output' section here:
http://bottlepy.org/docs/dev/tutorial_app.html#using-bottle-for-a-web-based-todo-list
Hope this helps!

Categories