I want to make a little web-frontend for copying (rsync) and encoding (ffmpeg) files for my Server using Django.
And I want to keep track of the progress of the processes.
I saw a few jquery-scripts, but they are designed to be used with uploads, and I don't know enough javascript to modify these scripts for my needs.
I want to write a script that retrieves the task status from a textfile and outputs a progressbar, but I've got no idea where to start.
Does somebody know a good tutorial to start with?
And sorry for my poor english.
See the code here http://www.djangosnippets.org/snippets/679/, it says "upload progress for multipart forms" but there is nothing specific to forms, you can use it anywhere with few tweaks.
General concept is:
Write a web-service which can return data(e.g. JSON) about the progress.
On client side use JavaScript to call progress API periodically use that info to update some client side element e.g. a text, width of an image, color of some div etc.
Related
Admittedly, I'm new to some of this...
Building a website on a local server. It has a ton of JS function in an external JS file.
Site has a MYSQL DB. (I am still learning this).
As part of my calculations from functions in that external JS file, I want to update and/or read from that DB.
I have been trying to read up on node.js and trying to read up on PHP (still learning both), but I'm not sure if I'm sniffing in the right direction.
Do I somehow invoke functions from node.js from the external JS file? Do I somehow invoke the PHP (in the form of a function, I suppose) from the external JS file?
How does one typically do this?
I have definitely learned that this in the external JS file does not do the trick. First window appears, but second doesn't:
// Activate the node.js library for MYSQL access
alert("got here 1");
var mysql = require('./mysql');
alert("got here 2"); // nope, this never pops up
Higher-level advice might be more useful than detailed in-the-weeds advice...? Still very new to this.
Thank you kindly!
-=-=-=-=-
self-muttering thoughts... I am using the external JS file to hold a bunch of functions that do all kinds of manipulation and conformation to the data that I collect on the front end:
<button class="ButtonOperation" onclick="DataLog(document.getElementById('DataWindow').value,'NE_AssembleOrder')">Log Data</button>
Am I eventually going to discover that I should instead port all of these functions over to a big PHP file instead?
-=-=-=-=-
Okay, took a while before I better understood this. So, this is the answer that would have gotten me moving in the right direction (for any future reference):
The thing to understand is that for this project, you want to manipulate data to and from a database, which means that (at least for now, for the sake of simplicity), the key is to get your data into a package and send it up to the server, and then have a function running on the server take up the yoke from there.
The way to do that (old school), is with a form.
When you SUBMIT a form, all that data on the form is bundled up and sent to the server.
In this instance you have an index.html page, and that page will open a new page for each of the functions you're trying to track. Use JavaScript to pop open the window and then when you include the URL for the window, pop in a Popup_SpecificFunction.php file. (change SpecificFunction as needed)
So far, so good. ;)
Now, in that Popup_SpecificFunction.php, you will collect all your data under a single form. A good ol' HTML form, with a [SUBMIT] button. That very same Popup_SpecificFunction.php file also has a reference in the header, referring to the big main library of PHP functions -- which is a file sitting on the server.
That [SUBMIT] button invokes a ProcessAllThisData function -- which is on the server-side PHP file. In doing this, it sends all the data from the form -- including a lot of data you include in hidden controls -- to the serverside function.
And at that point, you are basically "on the server" with all your data, and then you can just code that function in PHP and manipulate the database and other stuff as needed.
Using the form was the thought-jump you needed, because prior to this, you've generally thought of forms as standalone data, but they can have actions associated with the entire forms.
You can still use JavaScript to do client-side stuff, but here's another thing that can trip a person up:
There is a difference between these two HTML items as far as whether or not you should use them to send data to and from the server, or whether or not you are just going to JavaScript something on that button:
<button></button>
and
<input type="button"></input>
You might have to experiment a bit to figure out which is which.
This was everything you needed to get you moving in the right direction.
Sincerely,
Future Me. :)
So this is kind of my first attempt at web design per se so it might be a newbie-ish question. Just to give a little background... I'm using the all time classic HTML + JS + CSS combo and Yii (PHP) as a backend with a MySQL database. I can't really tell what the site is about but the user will definitely interact with the backend and run some queries on the DB and stuff.
Right now my website is composed of 5 HTML files, each one of them has a common layout:
Header or menu with logo and user info
"Sub-Header" with a general info image and maybe some specific stuff
Content specific to that HTML file
Footer
Right now I find kinda annoying that each time I redirect the user to a different place of my site I have to check again if he's logged in, I make some use of cookies for that too, etc, etc.
I was thinking of moving my site to be a single page or template if you will and just append the (body)content of each of those files to the body of my master-page. That sounds pretty good at first thought, but are there any downsides to this or is this just how things should be done?
I've done web applications before using frameworks like Sencha and stuff and they all seem to work this way, but is this the way to go for this particular case?
EDIT
Also, what is the correct way to implement the single-page scenario?
Get all the code in one HTML file and hide the stuff I don't want to show
Remove from the view the stuff I want to hide and append the new stuff from some other HTML file.
I'm not sure I understand your situation exactly. But I think I would make another PHP file in a protected area with a function like is_logged_in() or even redirect_if_not_logged_in(). Then you can include (or require) that PHP file in the other ones and just call the function.
You definitely don't want to be rewriting the same code over and over again.
I am C++ developer and I haven't really followed up on any development related to the web for a very long time. I have this project I would like to implement, really as a goal to sort of catch up on these technologies. My project is this:
display some content in a browser (for example the content of a 3D scene using a canvas and WebGL), have a button on the page. When the button is clicked, send the data to the server (the camera position for instance), render the image on the server (using some offline high-quality rendering solution), return the image back to the browswer, and finally, display it in the canvas.
I believe I can fill up the gaps with simple things such as WebGl, canvas and HTML 5. I am familiar with some of these techniques and I can learn. Where I am completely lost is the technology that is used or needed to do things such as sending the data to a server, having them processed there, and sending some result back to the client. Now I have done some research on the Web of course, but the is SO MUCH STUFF out there, that it's just REALLY hard to know in which direction going. They are tons of libraries, APIs, bits of technologies, etc.
I am suspecting I need to use some combination of JavaScript, DOM, HTML5 ... but would appreciate if people having done that before or knowing how this should work, could point me to the right direction. I am really looking for something basic, and IF possible not using some sort of 3rd party APIs. I don't want to do something complicated just simple, send data, process, send back for display. My goal is to understand the principles, not to make something professional or super powerful. I am doing this with an educational goal in mind (to learn and understand).
I read about RESTFul but I am still unsure if this is what I need. Really if someone can either simply describes me the basic technology components that I need for this project, point me to documents, tutorials, examples, give me the name for the bits and pieces of technologies I should read about, it would be greatly appreciated.
I realize the scope of this question is very large (and that I should have done my home work before instead of having years now of knowledge to catch up on). I believe though this question can be of great interest to many. And I also promise that I will post my findings and why not my working example when I have one figured out and working.
Thank you.
NOT AN ANSWER, just suggestions/ideas that include code. A structured/formatted comment.
Unsure how to use/code them in C++, but this is just an issue of rendering HTML and implementing javascript code.
The essentials are:
Have jQuery lib loaded. One way is:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Use a javascript code block for your jQuery script:
<script type="text/javascript">
$(document).ready(function() {
$('#mybutton').click(function() {
var pic = $('image_selector').val();
$.ajax({
type: "POST",
url: "ind.php",
data: "img=" + pic
})
.done(function(recd) {
$('#txtHint').html(recd);
});
}); //END mybutton click
}); //END document.ready
</script>
I don't know how you would send a pic as a var, or how to structure that, but you get the basic gist...
On the server side, it works like this (using PHP for eg):
<?php
$image = $_POST['img'];
//Do something with the received image
Actually, now that I'm thinking about it, you are sending an image (something I haven't done before), so I don't think you can just send it like text or a JSON object... You may need to post it with the enctype='multipart/form-data attribute for file uploads, as you do when using a form for uploads? Just guessing.
Anyway, this is not intended to answer your question, just to give you some hints as to where to look further.
See these simplistic examples for the basics of AJAX:
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
I'm creating a web-application which will be taking survey-type data.
Users are presented with several files and asked a question. The user, in the hope of not skewing data, must not be able to know the file name of the file.
An empty div is created for a JPlayer instance to sit in, and I have added the "location" attribute to the div, so while setting up the JPlayer instance on the client side the JPlayer knows what .wav to play
<div id="jquery_jplayer" class="jp-jplayer" location="sound.wav"></div>
Here is part of the javascript which sets up the sounds to be played and here its easy to see that the file location is simply dragged from the div
$("#jquery_jplayer").jPlayer("setMedia", {
wav: $(this).attr("location")
});
Basically, the intention is to hide "sound.wav" from the HTML document and keep the javascript dynamic.
A translation file between obfuscated and deobfuscated could be possible but it would be nice to keep this dynamic.
If you want to truly hide logic from your viewers, then you need to do it server-side rather than with client-side javascript. You can "complicate" the dissection of what is happening in the client-side code, but you cannot truly hide it.
If you want further help with the obfuscation, you'll have to describe better what you're really trying to do. The current description doesn't seem to offer enough information. What is this file path? What is it being used for? Why do you need to hide it?
If what you really want is just a Javascript function to obfuscate and de-obfuscate the sound filename, you can find lots of options with Google depending upon how elaborate you want to get. My guess here is that the determined cheat won't be fooled (since all the code is there for deobfuscating) so all you're really trying to do is make it non-obvious at first glance. Thus, any simple algorithm will do.
Since you're already using jQuery, here's a jQuery that does simple string obfuscation: http://plugins.jquery.com/project/RotationalStringObfuscator. You'd have to run the obfuscator yourself in some sort of test app to record what the server should set each filename to and then do the reverse in the client when you want to actually use the filename.
If you ask me, a better solution would be to give the filenames non-meaningful names from the beginning. This would be names like 395678264.wav and just use them that way (on both server and client). Then, the name is meaningless to anyone snooping. No deobfuscation or translation table is required because this is the real filename.
I've always been required show download size next to the file hyperlink. Only the file in question is rebuilt everyday and the file size can change often. So needless to say the size has been wrong for months. I'm not going to update our site daily to display needless info.
instead of
click here to download (20mb)
I'd prefer
click here to download [sizeof('file.xxx')]
The best solution would be javascript based or similar.
Since the file is on the server the solution would be best using ASP.NET. This blog post shows how to find the size of a file on the server. You may be able to adapt it to your needs.
javascript isn't really the best language to query the file system. There are ways to do it but they are all very hacky and you should stay away from them.
You can get the file size dynamically using server side code though :
long fileSize = (new FileInfo(# ".\file")).Length;
So in your markup, you could have something like :
<asp:Hyperlink runat="server" ID="hyperlinkFile" ...>
In your code behind, set it properly :
this.hyperlinkFile.Text = "Click here to download" + fileSize.ToString();
Use XMLHttpRequest to send a HEAD to the file and parse the HTTP Header that you get back, looking for the Content-Length field.
Something like:
var client = new XMLHttpRequest();
client.onreadystatechange = function() {
if(this.readyState == 2) {
alert(client.getResponseHeader("Content-Length"));
}
}
client.open("HEAD", address);
client.send();
More information here:
http://ajaxpatterns.org/XMLHttpRequest_Call
The final solution will be a mix between server code (asp.net) and client code (js).
You can build a REST service, that based on the file name or path, returns the size.
You can implement a js function that updates the inner text of every with the result of the REST service call.
Do something like this
click here to download (<%= C# or VB code for file size %>)
Inside the <%= %> tag you can put C# or VB code to find the file size. The server will evaluate it and then put the result where that tag is.
Just create a column name 'FileSize' in your database and fill it with asp.net after your upload has finished. This makes sure you won't overload your server too much.
[edit]Sorry didnt see your file size changes every day[/edit]
In that case you could write a little FileSystem Watcher and let it run in the background on your server or you could just get the filesize by checking the FileSystem info, way easier.
I thought about this more...I read all your answers, then clicked on some links to download various files from other websites. The browser tells me the size after I click 'download' in the dialog box.
I'm going to change the mind set that it is even necessary to include in the link.
Our site has so many pointless...('well other sites have this feature')...and the person I replaced didn't realize or care he that those other sites were built with a CMS that does all that automatically. Example: He was hard coding at the bottom of each page 'last updated: 01/01/1900' every time he saved the document.
edit:
I don't like the way I phrased this answer the other day. I realized that it is unnecessary to include the file size in the hyperlink, when all the major browsers will indicate the file size once you click 'download'. Like in my example above, there are so many instances I can find where the developer or webmaster before me added additional work for themselves by including "features" like filesizes/timestamps/etc... In my opinion adding features like that have/are:
No ROI
Likely to always be wrong
Required to have constant maintenance
Cheap way to make your site look "dynamic"
The last thing you do