How to save Backbone.js model to database - backbone.js

I have just started exploring Backbone.js.
Upon submission of a form I would like Backbone.js to save the details to database.
How can I go about this?

Unless you are using HTML5 local storage in the client the responsibility for saving to the database is not with backbone.js. Backbone will talk to the server via Backbone.sync using a REST type request. Effectively it will make an http POST request to save a new record or an http PUT request to update a current record.
The difference between a new record and a current record is that the :id field of the record is not set for a new record and is set for an old record.
If you want a tutorial using Ruby Rails as your backend solution then you can look at this tutorial.
http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/
However you can use any backend server such as PHP, Java, Django etc as long as they meet the requirements of the REST interface that backbone.js uses.
If you overide Backbone.sync you can also get backbone.js to interface to pretty much any legacy http protocol as well.

Related

cakephp 4 - model without database

In a cakephp 4 project in need to read data from a third party api.
I found this doc for cakephp 2, but no equivalent for cakephp 4.
https://book.cakephp.org/2/en/models/datasources.html
Where is it ?
Thanks
Read data from a third part api direct in your controller using HttpClient or other libs.
https://book.cakephp.org/4/en/core-libraries/httpclient.html
In CakePHP 4 the ORM is structured quite differently, data is retrieved via a Datasource, so you essentially need an HTTP-backed Datasource.
While CakePHP doesn't naively supply an HTTP source, there are a few of plugins that do, such as:
https://github.com/imsamurai/cakephp-httpsource-datasource
https://github.com/CakePHP-Copula/Copula
It looks like these may have some drawbacks and limitations - and in general be fairly advanced setups requiring some creative problem solving. So in the end, as the other poster mentioned, it may in the end be easier to just make HTTP requests directly if you don't require any of the ORM features (validation, Entity classes, virtual fields, Event hooks, etc.)
If the API communicate using POST/GET requests and responds using JSON format (which is usually the case), you can use the Request & Response Objects to ask and get data from the API

Which is the best option to fetch data from Mongodb database?

Sorry for a general question. My situation looks so: i have mongodb database and 2 reactjs pages. In each page i want to fetch a different information from database. Depending by your practice, which is the best way to fetch data from mongodb in a reactjs component?
I would recommend reading up on the MERN stack - tons of guides available online via google and youtube. The gist would be that a typical web application will consist of a few key components. In this case:
1 - (React) The client page rendered to the user
2 - (Node + Express) The server which processes data, allows you to use endpoints to make changes to your application. These endpoints make the necessary database queries. You can use a database client to write these queries as JavaScript within your NodeJS endpoints.
3 - (MongoDB) Your database.
So for instance a typical CRUD app allows you to create, read, update, and delete. Let's say you are looking at making a standard TODO list app.
You would need to make requests to these endpoints to perform these operations.
You could have a POST to /todo which would then insert a new document into your database.
You would need a way to read the information from the page... say a GET request to /todos to read all items. Or also a GET request to /todo/:id to get a specific item.
You would need a way to update an existing item... say a PUT request to /todo/:id with the updates you want to take place.
Finally you would need a way to delete an item... a DELETE request to /todo/:id which would delete the item.
Each of these endpoints would make a request to insert / read / update / delete items from the database, and return content to the client React code --> which then displays it to the user.
Frontend side, in react.js call api data using fetch() method. Pass your Mongodb URI string. If you want data in slot based use limit() and Skip() function for pagination.
Follow MVC pattern where your frontend only calla controller api. And controller calls DAO methods for Mongodb. You can Use Mongodb Stitch for serverless app.sor data leak can be avoided forntend side. Mongodb has connecting pool max.100 so that each time client request Mongodb connection cashed object given from pool to further speed up your connection time.

Real time stock watch with node.js angular and socket.io backend mysql and php

I am working on new project to display an online stock price screen for a user. We already have this in a combination of php, MySQL and AJAX, but it is very slow and lots of requests are generated on the server. So I want to change the technology.
I have the database in MySQL. One process is already updated: the last price of stock in my database. I fetch those records and display them in the screen. After searching Google, I feel I have to use socket.io, node.js and angularjs. After this I am planning the following:
Front End in angular.js
Socket.io with nodes.js
Nodes.js
Restful API call initiated on nodes.js every 10 seconds for page.php. This page will fetch all symbols of market (around 1000) from the MySQL database and send back a json object. (Can I directly call a MySQL query from node.js and received the json object, and will this reduce the php in-between?)
Socket.io emits this query to every client connect on the site.
Then the angular front-end will display only the symbol which is selected by the user and highlight the changes on the screen.
I have the following problems, as I have limited knowledge of the above technologies.
How do I receive the json object from socket.io into angular.js?
How can I make the logic in the angular page to display only the symbol which user selected from a 1000 symbols response and highlight the change price field only?
How will I connect three and server with MySQL or php?
One thing is read for middle ware i can use the expressJS.AS I want my front end in AngularJS how can i fit the express in between Angular and socket.io and node.js
You need to include socket.io client code on your site, and here is a good example how to turn an external library like socket.io into a service http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/
I think that the best solution here would be to subscribe via socket.io only the element user wants to see i.e. websockets for selected element and pooling every minute or so for other elements to not generate that much of a traffic on sockets
user opens element A
socket.emit('subscribe', {add: 'A'})
then user switch to element B
socket.emit('subscribe', {add: 'B', remove: 'A'})

Laravel: Making a Real Time Application using Angular

I am starting to work with angular and am fascinated by the bi-directional data-binding capabilities and by its $http method, which lets me save changes in to my mysql database, without refreshing the page.
Another thing I am currently fascinated by is the real time capability across multiple clients using firebase. Here all clients are updated in REAL TIME, when the database receives any changes. I'd probably like to use firebase, but I would have to drop Laravel and MySql as a persistence layer entirely, which I would like to keep for the moment, since my application is already working in Laravel, just not in real time.
How would I go about having a Real Time application, which updates every client, without refreshing the view, in Laravel using MySQL and Angular?
If I am not mistaken, Pusher and PubNub, are providing this necessary open connection with the server using websockets, so when the server has something to share, angular will now and render it.
Since I would like to use Laravel and MySQL as a persistence layer, I am not sure, what the best way would be. I am not even sure, if I understood everything correctly, which I wrote above, since I am new to angular and real-time applications.
What would be the next necessary steps, to get some Real-Time capability into a PHP/MySQL application?
The solution for your problem is:
1º - open websocket connection with the websocket-server and subscribe a channel, after this send the data to your serve using ajax
tutorial angular pusher
2º - In server side, you get the data, saves to your database and send a 'PUBLISH' to the respective channel into websocket server
lib useful for this
3º - Through the subscribe gets the data in real time
Pusher.subscribe('channel', 'event', function (item) {
// code
});
I had a similar problem recently and I finally ended up using Redis publish/subscribe Redis. You can store data in the channel and then subscribe to any changes. When something changes you can send it to Pusher which will send it then to the clients.
I also recommend considering Node.js and Socket.io since you can achieve very good performance without third party service, and even if you don't have experience with node you can find very good examples on Socket.IO how to write an application.
For Redis there is a good library for PHP called Predis and there is Redis Node client as well, so you can mix it all together.

Using websockets and backbone to update the content of a webpage

Is it possible to use web sockets to update the content of a web page?
What I am trying to achieve is create a dynamic sign-up list. So using backbone and an mvc web API, I get json from the server by querying a database, then I apply this json to a template.
When someone new signs up, I want this to trigger an update for all clients connected to the server, sending a json representation of the new sign-up-ee.
I'm not sure what you're using on the server side, but essentially you want to override backbone.sync which uses $.ajax by default to use the socket framework of your choice.
Here are a couple of articles that may help:
SignalR
Socket IO
Hope this helps (p.s. we did this and it results in a seriously sexy app). Good Luck

Resources