results matching ""

    No results matching ""

     4.4.Counter

    ¶ 4.4.1. What is counter

    Putting a counter on a web page can help you track how many people visit it. There are several ways to go about putting a counter on your page, either by adding a pre-built one or creating your own.

    ¶ 4.4.2. How to create a counter

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

    If you want to create a counter 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 counter function, which you can use as a guide to creating a counter.

    ¶ 4.4.3. Complete codes of a counter

    § 4.4.3.1. Complete HTML codes with JavaScript

    <HTML>
<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');

tim.X('counter').Get({
  url: location.pathname
}).then(data => {
  var read, //Total of readers or visitors
    like; //Total of people who liked

  if (data.data.length == 0) { //first person
    read = 1;
    like = 0;
    tim.X('counter').New({
      url: location.pathname,
      read: read,
      like: like
    })
  } else {
    read = data.data[0].read + 1;
    like = data.data[0].like;
    tim.X('counter').Set(data.data[0]._id, {
      read: read
    });
  };

  document.write("Total of readers or visitors: "+read+"<br>");
  document.write("Total of people who liked: "+like);
});
</script>
</HTML>

    Run above code in browser: https://Doc.TML.ink/examples/counter_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.4.3.2. Another Method: Complete HTML codes with TuringLanguage

    <script type="Turing Language">
tim = TML()
tim.Net('wss://x.TML.ink')
tim.X('counter').Get(url:$location.pathname)

  if !data
    read = 1
    like = 0
    tim.X('counter').New(
      url:$location.pathname
      read:read
      like:like)
  else
    read = data.read + 1
    like = data.like
    tim.X('counter').Set(data._id,
        read:read)

Out("Total of readers or visitors: "+read+"<br>")
Out("Total of people who liked: "+like)
</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.4.4. Run

    Total of readers or visitors: 1
Total of people who liked: 0

    ¶ 4.4.5. Refresh

    Total of readers or visitors: 2
Total of people who liked: 0

    ¶ 4.4.6. Refresh second time

    Total of readers or visitors: 3
Total of people who liked: 0

    ¶ 4.4.7. Usage Case

    The effect of above codes case is at the bottom of this page. There is two counters like   and at the bottom of this page.

    Read Like

    Question & Feedback