Let's say I want to build a web app which would use templates in the form similar to the following:
<h1>
{ status_text[step] }
</h1>
<progress max="10" value="{ value[step] }">
</progress>
In other words, let's say that I have lists value[] and status_text[], change only the variable step over time and want the form to reflect these changes in the real-time (ideally, even without sending a notification from the code that changes step, so that I can use current_time instead of some artificial step). What technology should I use to implement such behaviour in the most elegant way? (for the main language, I'd prefer using Python but JS/PHP would also work if there's no Python-related solution)
Thanks in advance for any advice.
These kinds of task are always accomplished in the client side, In other words in JavaScript.
No matter you use PHP or Python for your backend logic, you need JavaScript to do that.
That said, if you want to use pure JavaScript or a library like jQuery, you will have to trigger an event on every change of the progress and update the value of the h1 Element. I don't think this is the best solution for you.
So I suggest you using AngularJs. it's one of the leading web development technologies. AngularJs data binding allows you to accomplish this very easily. No need to trigger events or any extra work. if you're interested in AngularJs, here is a link to get started.
Related
I'm new to backend programming. I chose the laravel framework. Already learned the basics. During the study, the question arose: is it necessary to use the form to transfer data to the server ?. For example: the deletion route looks like this to me
Delete.
If I leave it, will it be a mistake? Maybe advise an article or something. Thanks in advance
Short answer is no, it's not necessary, but you should (if you're bound to HTML only).
The HTTP standard has different methods for different purposes. Using an anchor tag will always make a HTTP GET request to the link/server, which is not ideal, GET request should never change the remote (server) state, that's a job other methods (POST, PUT, DELETE, PATCH), you should try to use the method that better describe what you're trying to do: in your case I suppose you're trying to delete a complaint, so a DELETE or POST is what you're looking for.
The only way to use make a non GET request in plain HTML* is to use <form>. Also if you're planning to use a method different from POST you should take a look at Laravel's #method here
Mind that if you can and want to use JavaScript to perform your request you totally can, dropping the requirement to have use form (docs and docs).
I'm looking for a simple example of a Node/Express/Jade page being updated using an Ajax call with both the client and server side code.
I'm having a bit of trouble putting it all together in my head.
There are great many ways this could be done and it's not immediately apparent which approach you want to take.
I suppose the simplest scenario would be to add some client-side logic to fetch pieces of html from the server and update the client. This is easily achieved using jQuery (put it inside a document ready block to wire up the event):
$('#button').click(function() {
$.get('/some/url', {foo: 42}, function(result) {
$('#target').html(result);
}
}
This way all your html is generated on the server and you simply fetch and insert it into the page as needed.
You could also fetch json from the server and render the html on the client, but that is one of the alternative approaches. I highly recommend giving TodoMVC a look - it's a todo-list application with many different implementations (each using a different framework) and therefore a great learning resource for the various approaches and helper libraries.
I'd also recommend the Hands-on Node.js book. It will help you understand routing and how to get started with Node.
For example, StackExchange whitelists a subset of HTML:
https://meta.stackexchange.com/questions/1777/what-html-tags-are-allowed-on-stack-exchange-sites
How could you do that in your controller to make sure user input is safe?
This approach is not identical to StackExchange, but I found the AntiXSS 4.x library to a simple way to sanitize the input to allow "safe" HTML.
http://www.microsoft.com/en-us/download/details.aspx?id=28589 You can download a version here, but I linked it for the useful DOCX file. My preferred method is to use the NuGet package manager to get the latest AntiXSS package.
You can use the HtmlSanitizationLibrary assembly found in the 4.x AntiXss library. Note that GetSafeHtml() is in the HtmlSanitizationLibrary, under Microsoft.Security.Application.Sanitizer.
content = Sanitizer.GetSafeHtml(userInput);
This can be done before saving to the database. The advantage is removing malicious content immediately, and not having to worry about it when you output it. The disadvantage is that it won't handle any existing database content, and you do have to apply this any time you're making database updates.
The alternate approach is to use this method every time you output content.
I'd love to hear what the preferred approach is.
You can try JSoup parser which along with sanitizing your HTML input will also provide many functionalities out of the box.
You can visit http://jsoup.org/ for more details on the JSoup and download the binary from there.
It provides DOM method to traverse through your HTML tree and get desired elements.
Although sanitizing your HTML generated code to prevent XSS attack is a goodd practice, but I would strongly advise to avoid using any parser to avoid XSS attach by sanitizing your HTML input.
If your HTML tree is very big then the response time would increase manifold.Instaed of sanitizing your HTML tree you should ensure that whatever user is entering in the FORM is proper and as per the expected value.
You can visit www.owasp.org to know more about how to avoid XSS attack.The site provides you possible cheat sheets to ensure your HTML tree is free from any XSS attack.
ASP.NET HttpUtility.Htmlencode() makes it for you.
But if you want to block dangerous scripts, first DO NOT insert it to your database. First, clean the HTML Text before inserting to database.
I found a class that do it for you: http://eksith.wordpress.com/2012/02/13/antixss-4-2-breaks-everything/
It works fine and you can add new tags and attributes to custom whitelist of the Sanitizer.
Note: Microsoft Sanitizer and Anti-XSS Library was not useful for me. May be you can also try them.
A bit of context: I need to cache the homepage of my CakePHP site - apart from one small part, which displays events local to the user based on their IP address.
You can obviously use the <cake:nocache> tag to dictate a part of the page that shouldn't be cached; but you can't surround a controller-set variable with these tags to make it dynamic. Once a page is cached, that's it for the controller action, as far as I know.
What you can usefully surround with the nocache tags are elements and helpers. As such, I've created an element inside these tags, which calls a helper function to access the model and get the appropriate data. To get at the model from the helper I'm using:
$this->Modelname =& ClassRegistry::init("Modelname");
This seems to me, however, to be a kind of iffy way of doing things, both in terms of CakePHP and general MVC principles. So my question is, is this an appropriate way of getting what I want to do done, or should it ring warning bells? Is there a much better way of achieving my objectives that I'm just missing here?
Rather than using a Helper, try to put your code in an element and use requestAction inside of the element.
see this link
http://bakery.cakephp.org/articles/gwoo/2007/04/12/creating-reusable-elements-with-requestaction
This would be a much better approach than trying to use a model in your helper.
Other than breaking all the carefully-laid principles of MVC?
In addition to putting this item into an element, why not fetch it with a trivial bit of ajax?
Put the call in its own controller action, such that the destination URL -> /controller/action (quite convenient!)
Pass the IP back to that action for use in the find call
Set the ajax update callback to target within the element with the results of the call accordingly
No need to muck around calling Models directly from Views, and no need to bog things down with requestAction. :)
HTH
I want to use Wicket to build an application, but I have some designers that would like to write/maintain the javascript, and they basically expect 1 JS-segment per page, and a global JS-file.
I think the most natural way to add javascript in wicket is to add it per component (not per page), which would create problems for those designers (fractioned javascript, and having to write it in java-files). Is there a better way to solve this?
(of course, I expect things to work after a partial refresh.)
And a second (related) thing they'd like (and I'd like actually) is the possibility to request information in JSON-format through a static link , is this possible in Wicket?
I started with JSON by making my wicket pages return the JSON, but quickly realized there are better tools for the job, especially if you will have a full web services layer. If you just need a little JSON here and there, always via a GET, then sure, just make a Wicket page.
I ended up using Jersey with Jackson alongside of Wicket. Jersey simplifies the configuration of URLs that can do different things with different http methods (GET/POST/PUT/DELETE), as well as easily parsing query strings, etc. I'd consider going this route for heavier JSON needs.
You can easily run both Wicket and Jersey in the same web application with a little web.xml configuration.
Wicket's built in AJAX support is always stateful and thus accessed with changing URLs. If your designers aren't planning to use Wicket's JS library, it's pretty straightforward to mount a JSON page:
public class JsonReturningPage extends WebPage {
public JsonReturningPage(PageParameters params) {
String json = "{foo: 4711}";
IRequestTarget t = new StringRequestTarget("application/json", "UTF-8", json);
getRequestCycle().setRequestTarget(t);
}
}
Alternatively, you could also implement your own AbstractRequestTargetUrlCodingStrategy to directly return an IRequestTarget from IRequestTarget decode(RequestParameters params) and mount it in your application.
Regarding JS files, I'd try to educate them to use one file per component. This certainly has the advantage of less copy-paste code and simpler maitenance. Additionally, I'd certainly discourage JS in Java code. It's normally only needed to pass data or config to JS , either as variable definitions or method calls. As this data is typically in Java and JS is written by designers, it's time for designers and programmers to team up.
Quick answer to your second question is yes it is possible. Use bookmarkable links to access a resource that returns JSON data.
You can easily use the following code to dynamically communicate with Wicket:
AbstractDefaultAjaxBehavior callme = new AbstractDefaultAjaxBehavior(){
#Override
protected void respond(AjaxRequestTarget target) {
}
};
page.add(callme);
//From any ajaxrequesttarget you can simply append the following code:
target.appendJavascript("wicketAjaxGet('"+callme.getCallbackUrl()+");");
This way you can have an ajaxlink etc... that will transfer the ajaxrequest to the Wicket side. If you want to pass data (though a static link doesn't sound like that) do the following:
"wicketAjaxGet('"+callme.getCallbackUrl()+"&x='+value_to_pass_back''";
//to Read the value in the respond:
String x = RequestCycle.get().getRequest().getParameter("x");
So the url to the callback is dynamically generated (as the callback url is specific to the session) but it is formed like any other url....
To me this is 10 times simpler than building a JSON system on top of wicket instead of using the one built into it.... I use this all the time and it works great for me at least. If your solution is different/better I would like to know why perhaps.