Possibility of adding html, css, js, ... to Go server? - javascript

I am having trouble getting files such as index.html, main.js, style.css and more on my server made in Go.
My html file works fine with javascript and css on my local file but I can not make it work on a server.
I already tried making this in my code, but it only starts html file and javascript, css, jquer, font are listed in console like the page was not found (404 Page not found).
r := mux.NewRouter()
r.Handle("/", http.FileServer(http.Dir("./static")))
r.HandleFunc("/events", eventHandler) //Ignore this
r.NotFoundHandler = http.HandlerFunc(notFound) //This is just a custom 404.
// Create and start HTTP server.
s := &http.Server{
Handler: r,
Addr: config.Address,
}
My question is:
Is there any possibility to do this without Node.js. Is there any option that will display all my javascript files and css in the html. I really would not like to get this things complicated with Node.
Note
My codes for html, css, javascript all work. My server also works, the only thing needed now is adding the files to the server.
This is what I get This is what I should get on server.
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery-3.3.1.min.js"></script>
</head>
<body id='body'>
<div class="app-body">
<div id='left' class="left">
<div class='conferenceRoom'>Conference room
<h1 class="roomName">crane
</h1>
</div>
<div class="status">
<h1 id="free_busy" class="free_busy"></h1>
<h1 id="duration" class="duration"></h1>
</div>
</div>
</div>
<div class="right">
<div class="date" id="date"></div>
<div id='eventList' class="eventList"></div>
</div>
</div>
<script src="main.js"></script>
</body>
index.html
This are my files in a directory called Website. Server is started by:
go run *.go -c config.toml
This is ran from the website folder. And this is what the files look like

The problem is you're trying to feed a http.FileServer to Gorilla mux's route.Handle function. This handles a single URL, so it's only valid for the given URL, /.
What you want for serving static files is a route.PathPrefix(). This serves any URL path which begins with the given string, while route.Handle() serves only a path which matches the string exactly.
package main
import (
"log"
"net/http"
"github.com/gorilla/mux"
)
func main() {
r := mux.NewRouter()
r.PathPrefix("/").Handler(http.FileServer(http.Dir("./static")))
// Create and start HTTP server.
s := &http.Server{
Handler: r,
Addr: ":8009",
}
log.Fatalln(s.ListenAndServe())
}

Related

How can I insert XML data into HTML?

I am trying to grab data from an XML status file that is on VLC and I want to put it into an HTML so that when the status XML updates or is requested, the new information appears in the HTML.
Here is the XML information from the status.xml when its ran.
OMFG - I can't post images due to reputation yet. Here are the links to the images instead.
I want those fields in here:
I don't have any knowledge of any direct programming. I have run some batch files and I have some python scripts I use and I edit but nothing else. I understand tags, functions and lists to a degree.
I have tried using "scr" to path out my xml file with "type:text/xml. - failed
I have tried using a viewer.js file and editing that to point to the xml file I wanted. - failed. - I didn't understand how to put the xml data into a javascript file that can then be referenced inside the html.
This is the html file; I got it from the rig-developer kit from twitch as there first extension.
<!DOCTYPE html>
<html>
<head>
<title>Viewer Page</title>
</head>
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<div id="app" class="full-height"></div>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="viewer.js" type="text/javascript"></script>
<script type="http://192.168.0.22:8080/requests/status.xml">{
</script>
<h2>Video Game Music playlist</h2>
<p>Here is what is playing currently</p>
<div>
<input type="button" value="Refresh what's playing" />
</div>
<div id="list">
</div>
</body>
</html>
Here is the xml file:
]]?>
<?vlc
--package.loaded.httprequests = nil --uncomment to debug changes
require "httprequests"
httprequests.processcommands()
local statusTable=httprequests.getstatus(false)
print('<root>\n')
local item = vlc.input.item()
--data in the information section is presented in a non-standard way to keep compatibility.
?>
<information>
<category name="meta">
<?vlc
if item then
local metas = item:metas()
for k,v in pairs(metas) do
local metadataContent = vlc.strings.convert_xml_special_chars( httprequests.xmlString(v) )
print("<info name='"..httprequests.xmlString(k).."'>"..metadataContent.."</info>")
end
end
?>
</category>
</information>
</root>
I excepted that I can find a way to put the data from the xml into the html or any html file. Infact if someone can just show me how to put the xml data I have into an html file where it can be updated that would be amazing.
I have been trying to look up the easiest way to do this on youtube but I keep coming accross videos that show how to get images from xml to html; which I don't need.
Infact, to be honest; I think I need the xml file to be in Javascript first or something? I think the html has to be an inline html and thus the xml data has to be referenced from a .JS file?
I don't know what I am talking about. lol
Mixing XML and HTML is tricky. There's a W3C task group report here which analyzes what works and what doesn't:
https://www.w3.org/2010/html-xml/snapshot/report.html
and an overview talk by Norm Walsh:
https://norman.walsh.name/2011/03/26/HTML-XML-Prague
This work was done some years ago but I don't think the situation has fundamentally changed.

Image not loading in chrome but works fine in eclipse inbuilt browser

I am building a dynamic web application using eclipse javaEE . I am adding a background image to a jsp page by body tag attribute background().When I run this program in eclipse inbuilt browser image loads completely fine but when I run the same program on chrome , background image doesn't load.
Please help in rectifying this problem.
Thanks in advance.
I did face exact same issue INDRESH KHANDELWAL faced in my JAVA project.
Images weren't loading in any browser and I got this error message:
Not allowed to load local resource:
But works fine in eclipse IDE.
So I used this logic to solve this problem. Upload your image path into Database and fetch from there whenever you need the image.
Below is the code that I used for simple login page with background image,
<%#page import="java.sql.DriverManager"%>
<%#page import="java.sql.Statement"%>
<%#page import="java.sql.Connection"%>
<%#page import="java.sql.ResultSet"%>
<html>
<head>
<%
Class.forName("com.mysql.jdbc.Driver");
java.sql.Connection con = DriverManager.getConnection
("jdbc:mysql://localhost:3306/cart_db","root","toor");
Statement st= con.createStatement();
String sql = "select * from img_table where id = 'login_bgimg'";
ResultSet rs = st.executeQuery(sql);
String s1 = "";
if(rs.next())
{
s1=rs.getString(2); // Image URL
%>
<title> Login </title>
<link rel="stylesheet" type="text/css" href="css/Login_style.css">
</head>
<body background = "<%=s1%>" >
<div class="signin">
<form action="LoginCode.jsp" method="post">
<h2>Sign In</h2>
<input type="text" placeholder="Enter Username" name = "txtUserName">
<input type="password" placeholder="Enter Password" name = "txtPWD">
<button class = "btn">Sign In</button> <br>
Forget Password? |
Create an Account |
Back to Home
</form>
</div>
<%
}
%>
</body>
</html>
Disclaimer: All, I am not an expert. I just posted what seems to be working for me. If there is a better way to handle it, please do post it here. It will be useful to me and everyone else.
background is attribute;not a function. so remove '()' characters next to background attribute
Try using in your css file
body {
background-image: url("<image>");
}
or add as inline to body tag
style="background-image: url("image");"
Hope this is helpful for you.
in HTML5 some atributes are deprecated
you try use this in the css file
body {
background: url("image");
}
Rather then putting Absolute-Path copy past that image into WebContent and then give the path from the class path
Now, Assume that you have your Background.png in WebContent then write CSS as below...
body {
background-image: url("Background.png");
}
The problem is probably that you're trying to server a local static file C:\Users\indresh\Desktop\background.png.
That obviously won't work, as your browser doesn't (and shouldn't) have access to your local filesystem without any prefixes, but to a specific server-hosted directory, in which all your web-hosted files should be.
E.g. in a xampp-apache enviorment you'd have - as standard - a hosted directory like that: C:\xampp\htdocs. All files in this directory are reachable trough your apache web-server, as standard via localhost/....
If you place a HTML-File and a image in this folder you may access them both relatively.
Very basic example:
C:\xampp\htdocs\index.html
<!DOCTYPE html>
<html>
<head>
<title>Your HTML..</title>
</head>
<body>
<img src="image.png">
</body>
</html>
C:\xampp\htdocs\image.png
Any picture you'd want to serve..

Path in javascript not loading file

I'm trying to load a gexf file from javascript in my Asp.Net MVC Web Application from inside a View and am not sure why when I run the website, it doesn't find the file I'm looking for even if the path is 'correct'.
http://localhost:55833/Content/les_miserables.gexf is where the file is being looked for and I have the file in my Content folder yet I get the error that it can't be found (404).
I'm using T4MVC to generate the link to http://localhost:55833/Content/les_miserables.gexf in case any of you are unfamiliar. I am sure that this is link that is being generated because I have just copy and pasted from my Google Chrome browser the path that is returning a 404.
What am I doing wrong?
This is my javascript:
<script src="#Links.Scripts.sigma.sigma_parsers_json_min_js"></script>
<script src="#Links.Scripts.sigma.sigma_plugins_animate_min_js"></script>
<script>
sigma.parsers.gexf(
'#Links.Content.les_miserables_gexf',
{ // Here is the ID of the DOM element that
// will contain the graph:
container: 'sigma-container'
},
function(s) {
// This function will be executed when the
// graph is displayed, with "s" the related
// sigma instance.
}
);
</script>
This is my straightforward html:
<div class="page">
<div class="page-content padding-30 container-fluid">
<div id="container">
<div id="sigma-container"></div>
</div>
</div>
</div>
Thanks for your time.

JavaScript: print working directory, list files in subdirectory to console

I'm new to JavaScript, and am working on a website where you can upload files and display a result summary.
I've successfully uploaded the results to the webpage / on the server.
However, I am having trouble reading in an uploaded HTML file from the server ,to load the HTML file and display it.
Below is the HTML script which prints the path to the HTML file. but how to load the HTML i.e. run the HTML file using javascript??
<!doctype html>
<html>
<head>
<title>Summary Report</title>
<link rel="stylesheet" type="text/css" href="https://da1s119xsxmu0.cloudfront.net/libraries/basestrap/1.0.0/css/master.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<h3>Summary Report</h3>
<h4>App Results:</h4>
<ul>
<h3>{{ result.name }}</h3>
<h4>Result Files:</h4>
<ul>
{% for key in result.files %}
{% if key contains '.html' %}
<li>{{ key }}</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Output
The output is an unordered list of the html file on the server that I need to be read into the screen console.
1662b5e25a574e89abf2a5490005585a/expressionCSV/limmaWithMeta.html
What is your backend running? node.js? HTML/client side JavaScript isn't going to help you list the files uploaded to the server. You should include the code that populates session.results.
In general, based on what you've mentioned about the current behavior, I'd suggest that you use a recursive function to traverse the subdirectories:
function listTree(root) {
print(root);
if (root.isDirectory()) {
root.getFiles().forEach(function(file) {
listTree(file);
});
}
}
As mentioned above, this would go in the server side code since that's where the files are actually stored. (Your users' computers shouldn't be able to access all the files on the server, right? :) )

DoubleClick Ads not working with Manifest File

I'm building an HTML5 app that uses Google Doubleclick ads. 99% of the app is dynamically built with JS, but the ads are hardcoded into the html like so:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-3664602748600160");
GS_googleEnableAllServices();
GA_googleAddSlot("ca-pub-3664602748600160", "125x125");
GA_googleAddSlot("ca-pub-3664602748600160", "250x250");
GA_googleAddSlot("ca-pub-3664602748600160", "160x600");
GA_googleAddSlot("ca-pub-3664602748600160", "468x60");
GA_googleFetchAds();
</script>
<div id="ads" style="float:right;">
<div id="square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("250x250");
</script>
</div>
</div>
<div id="small_square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("125x125");
</script>
</div>
</div>
<div id="tall_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("160x600");
</script>
</div>
</div>
<div id="half_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("468x60");
</script>
</div>
</div>
These ads are then hidden/shifted as needed to fill the various ad spots on the generated pages. When i implemented a manifest file to cache persistent assets i get a message that it has failed to load the http://partner.googleadservices.com/gampad/google_service.js file. Knowing this, I tried saving a local copy of that js file and including it in the manifest, but this led to errors regarding the GA_googleblahlah calls being undefined which seems to indicate a load order issue of some sort. Is there some way to exempt this file from cache?
I found the solution. Using a wildcard in the network area after defining the cached elements seems to have fixed the issue. My manifest file now looks like this:
CACHE MANIFEST
CACHE:
/js/jquery.min.js
/js/jquery.easing.1.3.js
/etc
NETWORK:
*
Thanks to Ben Poole for the pointers.
If you don't want a file to cache you add it to the NETWORK: section of your manifest file. From Dive Into HTML5:
The line marked NETWORK: is the beginning of the “online whitelist”
section. Resources in this section are never cached and are not
available offline. (Attempting to load them while offline will result
in an error.)

Categories

Resources