results matching ""

    No results matching ""

     4.5.Comment

    ¶ 4.5.1. What is comment

    Comment is looked like the comment of Wechat. It can be used to be feedback, discussion, guestbook, and so on.

    ¶ 4.5.2. How to create a comment

    How to develop or create a comment on your web page or app.

    If you want to create a comment with X-Server, you do not need to develop any work at the server-side. Just do it with client-side script only in HTML .

    Below are complete HTML codes that offer sample comment function, which you can use as a guide to creating a comment.

    ¶ 4.5.3. Complete codes of a comment

    § 4.5.3.1. Complete HTML codes with JavaScript

    <HTML>
<h3>Question & Feedback</h3>
<input type="text" placeholder="Join the discussion...">
<input type="button" onclick="Post()" value="Post">

<script src="https://TML.ink/X.tml"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script type="text/JavaScript">
tim = TML('wss://x.TML.ink');

function Post(){
  if ($input[0].value.length < 2) {
    alert(" Comments must have at least 2 characters.");
    return;
  }
  tim.X('comment').New({
    url: location.pathname,
    content: $input[0].value,
    _time: Date()
  });
  ViewComment("You said: “" + $input[0].value + "” at just now. ");
  $input[0].value= "";
}

function ViewComment(content) {
  document.body.innerHTML+="<p>"+content;
}

function GetComments() {
  tim.X('comment').Get({ //Comment
    url: location.pathname
  }).then(data => {
    if (data.data.length == 0) { //first person
      ViewComment("Be the first to comment.");
    } else {
      for (var i in data.data) {
        ViewComment("Reader said: “" + data.data[i].content + "” at " + data.data[i]._time);
      }
    };
  });
};

GetComments();
</script>
</HTML>

    Run above code in browser: https://Doc.TML.ink/examples/comment_code.html

    How to run above code in your local computer？View the last article in this chapter.

    Above codes can also be written as follow.

    § 4.5.3.2. Another Method: Complete HTML codes with TuringLanguage

    <h3>Question & Feedback</h3>
<TML input #content placeholder="Join the discussion..."></TML>
<TML button #post>Post</TML>
<TML list #list></TML>
<script type="Turing Language">
tim = TML()
tim.Net('wss://x.TML.ink')

#post
  if (#content.length < 2)
    alert(" Comments must have at least 2 characters.")
    return
  tim.X('comment').New(
    url: $location.pathname
    content: content
    _time: Date()
  )
  ViewComment("You said: “" + #content + "” at just now. ")
  #content= ""
}

ViewComment(content)
  #list.InsertBefore(0,content)

GetComments
  tim.X('comment').Get(
    url: location.pathname
  )
    if (data.data.length == 0)
      ViewComment("Be the first to comment.")
    else
      #list.Add(data.data)

GetComments
</script>

    These above two sections codes of JavaScript and TuringLanguage are the same function. Both are written in the HTML of frontend. Just choose one you like to use. The TuringLanguage will automatically compile to the server-end to increase speed and security.

    There is no code in this book that needs to be written on the server side or backend, and all code is written on the client side and frontend. TuringLanguage is very strange, it can be written on the front end, and debugged in the browser, but run on the server side(X-Server).

    ¶ 4.5.4. Usage Case

    The effect of above codes case is at the bottom of this page, the "Question & Feedback"

    Read Like

    Question & Feedback