HTML Try It Your Self Editor with Java backend

Wednesday, 20 August 2014 | Posted by Unknown

I am inspired from w3schools try it yourself editor. It is better to give an option to users to try themselves.
This below Try It Your Self editor was built upon HTML, JavaScript and Java. You can find the below diagram for program flow.

DEMO - Try It Your Self Editor

Download Eclipse project

Text Area to Edit Code :

<textarea class="code_input" id="textareaCode" wrap="logical" rows="30" cols="50">
...
</textarea>

Form to Submit the code to Server :

Here the "target" attribute was specified as "view" so the output of this form will be displayed in "view" named iframe.

<form style="margin:0px;display:none;" action="/TryItYourSelf" method="post" target="view" id="tryitform" name="tryitform" onsubmit="validateForm();">
        <input type="hidden" name="code" id="code" />
        <input type="hidden" id="bt" name="bt" />
</form>

iframe for displaying result :

<iframe id="iframeResult" class="result_output" frameborder="0" name="view" src="/angular-jquery/expressions_a.html"></iframe>

JavaScript for validating form :

function validateForm()
{
var code=document.getElementById("code").value;
if (code.length>8000)
    {
    document.getElementById("code").value="<h1>Error</h1>";
    }
}

JavaScript for submitting form to server :

function submitTryit()
{
 var t=document.getElementById("textareaCode").value;
 t=encodeURI(t);
 document.getElementById("bt").value="1";
 document.getElementById("code").value=t;
 document.getElementById("tryitform").action="/TryItYourSelf?x=" + Math.random();
 validateForm();
 document.getElementById("tryitform").submit();
}

Java Servlet to read and write the code :

Here we have to set "X-XSS-Protection" and "Content-Security-Policy" as 0 unless it will throw security exceptions and script wont run.

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TryItYourSelf extends HttpServlet {
       
    public TryItYourSelf() {
        super();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String code = request.getParameter("code");
        response.setHeader("X-XSS-Protection", "0");
        response.setHeader("Content-Security-Policy", "0");
        PrintWriter pw = response.getWriter();
        pw.print(java.net.URLDecoder.decode(code, "UTF-8"));
        pw.flush();
    }

}

Labels:html,JAVA,JavaScript

14 comments:

for IT the3 November 2017 at 10:10
great
ReplyDelete
Replies
for IT the3 November 2017 at 10:10
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Java developer learn from Java Training in Chennai. or learn thru Java Online Training India . Nowadays Java has tons of job opportunities on various vertical industry.
ReplyDelete
Replies
Umma Khan22 January 2018 at 01:21
thanks for sharing an wonderful post.
chrome support
ReplyDelete
Replies
Matias26 November 2018 at 17:12
just what most individuals' desire. However, most of which have no idea of the inner thoughts and multi-step means of purchasing a fresh home vpn
ReplyDelete
Replies
mona martin28 November 2018 at 17:42
My friend recommended this blog and he was totally right keep up the fantastic work! https://internetprivatsphare.ch/was-ist-vpn/
ReplyDelete
Replies
Ethan Ryan29 November 2018 at 16:41
Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. diebestenvpn
ReplyDelete
Replies
Mia8 December 2018 at 00:05
Conversion of PSD into website usually takes for professional about 8 hours for homepage and some more time for other additional pages. For novice in PSD to CSS conversion it may take several days to create a HTML.coding image example
ReplyDelete
Replies
mona martin25 December 2018 at 12:37
This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post.! https://vpnveteran.com/
ReplyDelete
Replies
Ella lily4 March 2019 at 12:12
Much appreciated such a great amount for this data. I need to tell you I agree on a few of the focuses you make here and others might require some further survey, however I can see your perspective. privatsphare
ReplyDelete
Replies
James harper11 March 2019 at 11:52
Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? lemigliori vpn
ReplyDelete
Replies
เพิ่มเงิน13 May 2019 at 21:58
เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา สมัคร Gclub Royal1688
และยังมีหวยให้คุณได้เล่น สมัครหวยออนไลน์ ได้เลย
สมัครสมาชิกที่นี่ >>> Gclub Royal1688
ร่วมลงทุนสมัครเอเย่นคาสิโนกับทีมงานของเราได้เลย
ReplyDelete
Replies
หมูอวกาศ13 May 2019 at 21:59
โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
สมัครสล็อตออนไลน์ >>> goldenslot
สนใจร่วมลงทุนกับเรา สมัครเอเย่น Gclub คลิ๊กได้เลย
ReplyDelete
Replies
Gclub452 August 2019 at 00:03
You are very good at that.

งานราชการ
ReplyDelete
Replies