How to create a widget in php & javascript? - php

I have a website for a client offering information from a database. But other websites want to show that information in their website, so my client ask me for it.
Since the begining I thought it might be something similar to the twitter widget. As I want to give out a code similar to this:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({ ......
And other websites will show the information from my database.
But I cannot find a exactly example, I found this: http://tutorialzine.com/2010/03/who-is-online-widget-php-mysql-jquery/
But it is not exactly what I want.
My deployment is the following: In the server I've got a mySQL database and a website, I would like to create php and javascript code (or even jquery, but I'm not very expert with it) so other website could incorporate the information from the database in a secure mode.
Could anybody give a hint?

You'll need a RESTful service on your server which other sites can ping. You will use an AJAX request to get the information from that service.
The big piece of this for you will be creating a JavaScript object that has all the functionality you want. It is much easier to give people directions on how to use your REST API and let them implement it via AJAX on their own pages. If you really do want a full widget, you'll want to check out a lot of things. First is closures in JS to ensure you don't conflict with any of their variables. Also make sure you are good at developing cross-browser Javascript independent of libraries. And finally, you'll want to make sure your server is configured for cross-domain AJAX requests. Again, my recommendation is to set up a REST API for them, and let them do the dirty work.

There is an interesting tutorial about how to create a twitter widget using PHP and JavaScript on the nettuts website, I think you may find it useful.

Well, although it's not specific for PHP, this is by far the best resource I could find to this subject:
http://alexmarandon.com/articles/web_widget_jquery/

Related

Get Twitter feed based on multiple hashtags

I am trying to build a web application that would display Twitter feed based on multiple hashtags in real time. Something like TweeterWall. I've been Googling around, but there are so many APIs that I am a bit confused.
My setup is a standard shared hosting with PHP and MySQL.
My question: Which method is best suited for my environment?
Should I use Streaming API, Search API, Sockets, maybe Javascript with setInterval()..
i realy ont know..
Thanks for your answers.
- Cheers
Take a look at this project on GitHub. Don't be confused by the title - it has been updated since Twitter's API update to 1.1.
The jQuery plugin on the page has been re-purposed to be a Rendering engine, i.e. it helps with rendering your feeds.
The important part, however is in the "Server-Side Examples and Setup" directory. Go there, read the SETUP_INSTRUCTIONS document, and use the code in the "Plug_and_Play/Ready_PHP.php" file as your starting point.
If you followed the instructions in the SETUP_INSTRUCTIONS document, you should only have to copy and paste the keys from Twitter into the file, along with a Twitter handle, and it should render the timeline for you.
Note that you will have to update the code to render multiple timelines, and will have to either use AJAX or some other solution for updating the timelines, to simulate real-time.
On that note, be careful not to blow the rate-cap. If you are rendering timelines for just two Twitter handles, you can update them only once every 6 seconds (best case scenario). To do this, you will have to use a separate web service to perform the requests and then query that service from your webpage.
P.S. I am the author of that project, so if you need any help, let me know. Good luck! :)

Technique behing creating a google wave like asynchronous web app

I want to try creating a canvas were multiple users can type and edit for brainstorming etc. I am thinking of php as backend. What are the technique used for it? For example, lets say its
pure text. How do we update the text like in the google wave(b4) and in google doc?
Is it just using websocket(or js pooling) and updating the text file? or are there any
better logical way to solve this issue?
Well, its not as easy as it is said in Brad's answer but he is partially right. You will definitely need WebSockets today to make it happen. But logically, it is not that simple to create a collaborative environment. There are issues like broadcasting changes of every user to every other user viewing the same document. Then you will have to make sure that every user gets to see exactly the same thing no matter who changes what and when. This gets difficult when multiple users are working on the same document collaboratively. There can be conflicts while merging changes of one another.
As far as PHP is concerned, language is not really a problem. Its how you handle the above stated problem.
Google released its research and engineering details on Google Wave (I guess after abandoning the project). This link might be some help to you: http://www.waveprotocol.org/whitepapers/
Websockets are the way to go for this. However, they are difficult to implement in PHP, and not supported by many browsers as of yet. You can do long-polling of AJAX requests pretty easily with PHP, but it can be quite a waste of resources.
This might not be what you are looking for, but I'd suggest changing your server-side technology. You can use Node.js with Socket.IO to easily use Websockets (or seemlessly emulate them for browsers that don't support them). This will provide the fastest method for pushing data to your users.

How do I create a web service that will display in a browser and on an android?

My web development experience has mostly been setting up a CMS like Wordpress or Drupal and creating custom themes. Actually work in server-size coding has been very minimal. I've played around with php a little, trying to mod off of phpBB and beginning to learn some MVC work with CodeIgniter. Overall, this seems like a pretty big step forward, but it's something I need (I think) to do for a project I am working on.
Essentially what I want to do is have a service like Twitter of Facebook (not in the social networking sense); a user is able to log into the site and perform various operations, while also being able to use an android application that supports limited operations.
After some Googling and reading articles on the internet, it appears REST is the way to go. But I can't quite seem to grasp some of the technical details. I understand how the HTTP Request/Response works, but I don't know how I can code everything server side so that visiting example.com/item/1 will bring up the details of item 1 in the browser and can also perform a GET Request in my Android app so it can grab the details from the database and display in on the site.
Any suggested readings or some tips on how to execute this?
You can implement this using MVC. By default, have the controller ask the model for the details of the item, then pass the info to the view. Repeat this process for each type of request you want to accept such as POST, PUT etc., where you define a new function in the controller, ask the model to perform the corresponding database action, and return the response to the view.
There is helpful tutorial for getting a REST server up and running using CodeIgniter here

How to document control flow of a website

I've built a fairly complex web app (html, javascript, jQuery, php, mySQL) and use several mechanisms for navigating through the site (e.g. anchor/links, submit buttons, window.location, window.open). I'm looking for two things:
What are all the mechanisms possible for moving around a site or a source that will allow me to find such a list
What, if any, documentation standards are there for documenting such actions; something like the flow charts used to document procedural code.
I'm not sure either by what you mean in "thing 1". The best tool to map all the paths is the UML Sequence Diagram.
Services such as Omniture and Google Analytics let you visualize such paths of user navigation. You could explore that option. Basically they work by tracking a page's URL and its referrer URL (accessible via document.referrer) and then making the connection.
If I understand your comment on dj_segfault properly, I'm not even sure you understand the concept of server/client interaction.
I don't think there is an answer to this because the technology is changing all the time and it is different depending on what devices you are using.
You only have to look at Node.js (if you understand the technology) to see that the lines between server and client can be blurred, and that it's just not a simple answer.
The bottom line is in fact there are no navigation "things" unless you program them, and how you program them is your choice depending on requirement.
For example a vanilla link
Google
Can either be static HTML content or echo'ed from a php script which was used to select the data from a database to get the URL and print it. But it doesn't have to be either of these.
If you wanted to navigate to google you could use a button with an onClick javascript or an event listener with data collected by AJAX. It could be derived from other content values on-the-fly or be a string. I could probably imagine 20 different possibilities but that doesn't make them all suitable for the application.
Just keep incrementally improving your project, use this forum to answer specific questions and you'll learn a lot. I did.

Best approach to developing a cross-browser JavaScript widget that populates from a MySQL database?

I'm currently researching the best way to approach building a JavaScript widget someone can embed on their site, which would retrieve and display information from an external MySQL database.
The gist of the widget would mimic the needs/functionality of Twitter's widget (http://twitter.com/about/resources/widgets), where it uses some combination of JavaScript, PHP and/or AJAX and retrieves information from a MySQL database with secure (or at least somewhat safe) cross-browser access. Does anyone have thoughts or ideas on the best and most reliable way to approach something like this?
Here is a great guide to building a cross-domain widget: http://alexmarandon.com/articles/web_widget_jquery/
The hard part is the Javascript side; the server side can be written in PHP, or Python, or Ruby or whatever. Your google search should include the term "javascript widget" to get more articles like this one.
Should be simple. Encapsulate your widget entirely in a JS file if possible (minus images) and use AJAX for calling a REST or SOAP (probably want to stick to REST) webservice for any data access you need.
IFRAME, just use a iframe. you have
native sandbox
control over your environment
no updating your widget for your users if there is a new browser. You just update your code in your iframe.
Everyone uses this method ( Google+, Youtube, Facebook, Twitter )
its a win win situation.

Categories