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

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.

Related

Trying to get the json variable where bootstrap tables save data

Hello guys I hope you can help me, I'm using bootstrap table to order the data from json query, specially this source example and I'm using chrome:
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-flat="true"
data-search="true"
data-url="http://127.0.0.0:8000/hello">
<thead>
<tr>
<th data-field="field.name" data-sortable="true">Name</th>
<th data-field="field.count" data-sortable="true">Stargazers</th>
<th data-field="field.count.forks" data-sortable="true">Forks</th>
<th data-field="field.description" data-sortable="true">Description</th>
</tr>
</thead>
</table>
This works fine, the problem is that If I try to re order data that previously I edit the dome with a for it shows again the data in the json object and order the row.
I think, for some reason I need to append data to the json object the server responses, the issue is that I can not see where is or which is the variable name where boostap table storage this information, I can see the json in the network option "in chrome" but I need to get the name variable to append more data.
It would help me a lot to know how to get this, any idea ?

Check if a link is working and hide/disable if it's broken using HTML/JavaScript

So I am building my website using HTML/CSS.
I would like to know what is the easiest way to check if a URL is availble?
For example, I have a table with a cell that shows a link to some URL -
<table class="table table-hover table-bordered table-condensed" cellspacing="0" width="1300" id="ServerTable">
<thead>
<tr>
<th><center> #</center></th>
<th width="100%"><center> Server Name </center></th>
<th><center> Owner </center></th>
<th><center> Project </center></th>
<th width="100%"><center> Description </center></th>
<th width="100%"><center> IP Address </center></th>
<th width="100%"><center> ILO </center></th>
<th><center> Rack </center></th>
<th><center> Status </center></th>
<th><center> Actions </center></th>
</tr>
</thead>
<tbody>
{% for server in posts %}
<tr>
<div class ="server">
<td></td>
<td width="100%"><center>{{ server.ServerName }}</center></td>
<td width="100%"><center>{{ server.Owner }}</center></td>
<td width="100%"><center>{{ server.Project }}</center></td>
<td width="100%"><center>{{ server.Description }}</center></td>
<td width="100%"><center>{{ server.IP }}</center></td>
<td width="100%"><center> http://{{ server.ServerName }}.ilo.lab.dba.co.il </center></td>
<td width="100%"><center>{{ server.Rack }}</center></td>
<td width="100%"><h4><span class="badge badge-success">Online</span></h4></td></center>
In this cell, there is a link to some url.
I want to show the link as URL (a href) only if http://{{ server.ServerName }}.ilo.lab.dba.co.il is working using http! (server.ServerName is a variable running in a for loop giving different DNS URLS)
If it's not, I will show just a text, or not show it all...
I have found some functions in Javascript that return true and false, but I dont know how to call the function in my html.
Like, I was thinking of doing if (link works) : show link with a href, else: show just the string...
Is it possible using Javascript function? If so, what's the function and how do I call it?
An example for a function I found:
How can I use and test it in my code? using href if it's true?
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status==200;
}
Assuming your page isn't hosted on http://10.0.5.1, there's no general-purpose way to do this from the browser unless the target servers allow it, and separately it's probably not ideal to do so.
If the origin of your target pages isn't the same as the origin of the page, the Same Origin Policy kicks in and prevents your using ajax (XMLHttpRequest, fetch) to check the links. You could work around that if you can implement Cross-Origin Resource Sharing on all of the target servers, telling them to give your page access. But again: Requesting all of the resources linked on the page, even with a HEAD request, is probably not ideal.
You've tagged your question with PHP. You could certainly use PHP to check the links before returning the page. This question's answers show how to do a HEAD request for a URL.
You've also tagged Django, a Python server-side framework. You can do a HEAD request with Python, too; this search turned up this question and its answers.
Due your application backend is Django, I would recommend you using Python to check whether an http based url is available or not.
According to #T. J. Crowder suggested, track of the links/questions to implement the mothod checkUrlAvailable(url) with a URL as the argument.
I've found the documentation of Built-in template tags and filters showing how to apply filters in Django template.
All in all, we can combine all together like the following:
<td width="100%"><center>
{% if checkUrlAvailable(server) is True %}
http://{{ server.ServerName }}.ilo.lab.dba.co.il
{% else %}
http://{{ server.ServerName }}.ilo.lab.dba.co.il
{% endif %}
</center></td>
The problem I am having is to check an non-existing server/url with Python. I will update this issue soon once it would be resolved.
To write checkUrlAvailable in Django template, take a look at the documentation. The idea is to build a customised filter to check the existence of a given URL. The pseudo code could be looked like the following but I argue to dive into these answers:
import requests
def checkUrlAvailable(url):
resp = requests.head(url)
if resp.status_code == 200:
return True
else
return False
I just borrowed the snippet code from stackoverflow's link.
(to be updated soon)

loading common templates into an html page with angular

I have a page which contains detail sections that are common across multiple pages of my app. I am trying to reduce code redundancy and create these mini views that will be loaded with the page.
In the main detail page I have a section that I am trying to load using ng-include
<div ng-show="checkProducts()">
<hr style="margin-bottom:5px!important"/>
<p><strong><em>Products</em></strong></p>
<div class="bs-associationPanel">
<ng-include src="commontemplates/productView/shoes"></ng-include>
</div>
</div>
I can't use routing here as this is acting like a partial view within the main detail page which is already using routes to load it and bind it to the controller.
The src value is a path in the APP to an html page called productView.html
I wrapped it in a script ng-template tag with an id
<script type="text/ng-template" id="shoes">
<table class="table table-condensed table-responsive">
<thead>
<tr>
<th>brand</th>
<th>color</th>
<th>size</th>
</tr>
</thead>
<tbody ng-repeat="s in detail.shoes">
<tr>
<td>{{s.brand}}</td>
<td>{{s.color}}</td>
<td>{{s.size}}</td>
</tr>
</tbody>
</table>
</script>
I was hoping this would work but when I render the page I get no temple and looking at the element explorer I see the following
<!-- ngInclude: undefined -->
I think I am close I just don't know what I am missing. Any suggestions on how this could be accomplished or Can this be accomplished?
Basically the script's with type text/ng-template are read by angular & angular consider it as template then put those templates inside $templateCache service for faster retrieval.
src attribute should have template name enclosed with ' single quotes, so that it can look up through $templateCache for getting the template.
<ng-include src="'commontemplates/productView/shoes'"></ng-include>

AppML Dynamic DB Connections

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.

Stripes: In jsp page html table pagination

I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).

Categories