0

Let's say that I want to expand website functionality and I'm not sure what kind of solutions I'm looking for. It's not my website so obviously I can't work with original code or database.

First thing I thought about were simple actions that only apply to html code like sorting using different column. In this case I guess I should look into creating browser plugins, right?

But what if I want to store additional data and then display it in my profile? I'm not sure what kind of solution allows me to display my html code inside website and then for example send data to my database. Don't get me wrong - I know how to create website in ASP.NET or using Django but I don't know what technology I'm looking for when I want to expand website which doesn't belong to me.

2
  • could you make an example of what you mean by : "expanding functionality"
    – oiledCode
    Sep 15, 2015 at 9:14
  • Let's say that the website makes possible to rate a book. So I have a list of books I've read and I have another list of books that I'm planning to read. I want to create groups of books, for example books I want to buy or books that belongs to a certain genre. So in a page where I see book's description I want additional form which allows me to save data to my database. And in my profile I want to create a tab where I can display data stored in this database.
    – wwwww
    Sep 15, 2015 at 9:21

1 Answer 1

0

sounds like you are asking about client side functionality that comes from JavaScript. There are many libraries out there that enable you to programmatically change the HTML functionally such as table column sorting and user input data collection.

Popular frameworks and libraries include jQuery, angular, react, mithril and newer ones like vuejs and magjs.

Some require special templating syntax or intermingle behavior with html while others like magjs separate the html & js 100%.

Here is a MagJS example of table sorting:

JS:

var table = {}

table.controller = function(props) {
  this.list = [{
    name: "John",
    age: 21
  }, {
    name: "Mary",
    age: 25
  }, {
    name: "Bob",
    age: 47
  }]

}

table.view = function(state, props) {
  state.table = sorts(state.list)
}

function sorts(list) {

  return {

    _onclick: function(e) {

      var prop = e.target.getAttribute("data-sort-by")

      if (prop) {

        var first = list[0]

        list.sort(function(a, b) {
          return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
        })

        if (first === list[0]) list.reverse()

      }
    }
  }
}

mag.module("sortable", table)

HTML:

<div id="sortable">
  <table>
    <tr>
      <th data-sort-by="name">Name</th>
      <th data-sort-by="age">Age</th>
    </tr>
    <tr class="list">
      <td class="name"></td>
      <td class="age"></td>
    </tr>
  </table>
</div>

Here is the link to the working example: http://jsbin.com/raqeluluxe/1/edit?html,js,output

Hope that helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.