9lessons Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos
Follow Me:
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
Sunday, October 15, 2017

ReactJS Welcome Page with Routing Tutorial

Days back, I have posted an article on how to create a welcome page with proper login and logout using Ionic 3 and Angular 4. Today’s article is to create the same welcome page with ReactJS and ES 6. The article is about how to login/signup to get inside the application home page, you can navigate to different pages and finally you end up with a logout action. Lets see how to set a starting page with navigations using ReactJS and ES 6.

Video Tutorial: ReactJS Welcome Page with Routing Tutorial

Monday, August 21, 2017

Ionic 3 and Angular 4: Insert and Delete with Token Based Restful API

This is the continued series of article on developing a mobile app with Ionic and Angular JS. This post deals with updating and deleting any post on the application. This also explains how to show the loading image by making an Ajax call. While deleting a post, it will show an alert message to confirm whether to delete or not. This post is all about this. Hope you all make use of this series of articles on Ionic and Angular to build your own mobile app.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.

Tuesday, August 08, 2017

Ionic Split Pane with Login and Logout System.

I received a tutorial request from one of my blog readers to implement Ionic Split Pane with the login system. Ionic has been improving and releasing new desktop layout features. This post is an enhancement to my previous application. SplitPane is the new component introduced in Ionic 2.2.0. This targets to create apps of any screen size like desktops and tablets. With this, it is easy to show a side menu with side-by-side navigation controllers. Let’s see how we do this, and follow the demo below for more details.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.

Wednesday, July 12, 2017

Ionic 3 and Angular 4: JSON Parsing with Token Based Restful API

We have covered most of the topics in building a mobile application using Ionic 3 and Angular JS 4. Today’s topic is to pull in data for news feed from a server and display it on your website. This is suggestible post since it does proper verification at the backend based on token. All it does is, it will verify system token and user token at the backend and then pulls data using feed API url. I have also added an extra code to the previous post for login authentication with PHP Restful API for showing alert messages. Please do follow the below video and code for your understanding.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.

Thursday, June 22, 2017

Ionic 3 and Angular 4: PHP Restful API User Authentication for Login and Signup.

Here is the continued article on my previous post for creating a welcome page with login and logout. Today’s post explains how to implement login authentication system for your AngularJS applications. It will show you how to log in with a user and store the user session, so it deals with token based authentication. Since we are using token based authentication, it protects if any unauthorized request is made and notices for a new login if required. This makes your application’s authentication to be more secured compared with any other authentication system. Every user details will be stored in an external database and a PHP based API is used in the backend for handling this authentication. Hope you’ll find it more easily using this as your authentication system in your AngularJS projects. Let’s look into the live demo and follow the below code.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.

Monday, April 24, 2017

React Native Router Navigations - Tutorial Part 3

This is again the continued post on React Native series. This post explains routing and navigation to different tabs in an application using React Native. Navigation is all about how the user can access possible sequences of pages in a web application. Routing is the encoding and decoding of URLs used in the application. Routing is supported by some set of rules. Each application must provide defined set of rules. Once the routing rules are defined, we can use the URLs containing view names and their parameters to navigate to different pages/tabs in the application.

React Native Router Navigations

Wednesday, April 19, 2017

Ionic 3 and Angular 4: Working with Signature Pad.

This tutorial explains how to upgrade to Ionic 3 and Angular 4 and how to use signature pad for your application. If you are working with some agreement related project or something which needs some written proof from the customers, we might in need of a signature pad. The combination of Ionic 3 and Angular 4 provides some better features to achieve signature pad. This will allow you to sign/draw something on the application and save that image as data on the screen. Using this tutorial, you can also make a signature pad with Ionic 2 and Angular 3. Why late? Let’s start this small, but most commonly used task in your application.

Ionic 2 and Angular 2: Using the Native Camera

Friday, April 07, 2017

Ionic 2 and Angular 2: Using the Native Camera, Take Multiple Photos with Delete Action.

Are you searching for easy camera access for taking multiple pictures in your mobile application? Then here is the post explaining on how to access camera and take pictures. In most recent days, this is achieved easily with the combination of Ionic framework and AngularJS. We have already discussed in my previous article, how easy it is to use pre-built it in components of Ionic with AngularJS and build awesome mobile apps. Today’s article explains Cordova plugin provided by Ionic framework to access camera , take picture and see the output. The most exciting thing about this article is, it explains you to upload multiple images you take in camera. Let’s follow the article and also the video tutorial on this.

Ionic 2 and Angular 2: Using the Native Camera

Sunday, April 02, 2017

React Native JSON Parsing and Helper Functions - Tutorial Part 2

This is the continuation of previous article Getting started with React Native Template Design – Tutorial Part I. Today’s article and video tutorial explains how to parse and render the json data using some of the best React Native packages. It explains how to make ajax calls using fetch. Fetch is the networking API, which is chosen by React Native to get the JSON data and render it in the page. I hope embedded videos with blog posts are more advantageous for you to learn. I appreciate to take any feedback if you have, so that I can make it better.

React Native Template Design

Sunday, March 26, 2017

Getting Started with React Native Template Design - Tutorial Part 1

We always look for apps that are faster to develop and run, React Native is one such emerging framework. Being focused on mobile development; React Native is an open source framework from Facebook which can be run on multiple platforms and devices such as iOS and Android. React Native is a javascript library. You do not have to learn iOS’ Swift or Java for Android, all you need to know is Javascript. I am going to present series of articles on React Native. This article explains making of native mobile template using React Native. Today, I am introducing video tutorials on Youtube for an easy learning.

React Native Template Design

Tuesday, February 28, 2017

Angular Firebase Facebook, Google, Github and Twitter Login - Part 2

This article is the continuation of previous post Create an Angular 2 CLI App with Firebase Social Authentication. This post further explains the authentication feature for your Angular CLI application using Firebase. AngularFire is the library used for this. In addition to this, we require some Angular providers called sign-in providers to use Firebase Authentication feature. This article explains Facebook, Google and Twitter authentication to log in with our users. Follow the demo and article to install and setup AngularFire library and build your angular web application with an easy and perfect login authentication. Also, the article explains how to redirect to home page from other pages and vice-versa.

Create RESTful API NodeJS Mysql

Monday, February 27, 2017

Create an Angular 2 CLI App with Firebase Social Authentication Facebook, Google, Github and Twitter

There is a lot of fun in building an AngularJS application and after you finish the application, for others to see your application you will need to deploy the project on some web server such as NodeJS, Amazon AWS, Heroku,etc,. But, this requires a long procedure for the deployment and sometimes it can even be expensive. Google provides free Firebase for deploying AngularJS projects. Firebase Hosting provides fast and secure static hosting for your web app. This Hosting also provides social login authentication and gives your project a subdomain for deploying. for Facebook, Google and Twitter.

Create RESTful API NodeJS Mysql

Monday, October 03, 2016

React Webpack Heroku Youtube Instant Search Working with APIs Tutorial

I already have discussed about React JS in my previous posts. Today, lets see advanced way of using React JS, webpack and ES6 with Node.js to build and run your application. Let’s see what webpack and ES6 does. ES6 (ECMAScript6) is the latest version of javascript that has number of new features to write your javascript code easily. Webpack is mainly designed for larger applications to build the application. The main idea behind webpack/ES6 is code splitting. It allows you to write Javascript as a modularized code, so that you can re-use and share the code to maintain your project over-time.

React Webpack Heroku Youtube Instant Search Tutorial

Wednesday, August 17, 2016

Wall Comment System with React JS Part Two

This post is continuation of React JS previous post. React JS is lighter and faster. It needs less coding and as mentioned in the earlier post, React suites best for one page application, front-end and single page websites. The article explains how to post a comment, delete a comment and also toggle(hide/show) a comment using React JS. React JS and Angular JS are two prominent frameworks in JavaScript now-a-days. As its a new series in my blog, I would appreciate for any doubts or your feedback in the comments so that I could explain it to you in a better way.

Social Network System with React JS

Sunday, August 14, 2016

Social Network System with React JS Part One

How to solve infinity loading either in your desktop or mobile? By now, everyone is familiar with JQuery, but we all know is JQuery cannot handle such large amount of data to load. React JS is the best solution for this problem. JQuery and other libraries interacts directly with DOM to load any data; but React JS is specifically designed in such a way that it has a mid interactive layer called Virtual DOM which in turn interacts with DOM(as shown in the diagram below). This Virtual DOM helps in data loading very faster.

Social Network System with React JS

Sunday, July 31, 2016

Angular JS Facebook Wall System with Multiple Bindings Tutorial

Today, I am here to introduce a new Advanced Javascript series in 9Lessons.info. Basically, I love wall system because we can cover multiple operations or features in a single web page. 9Lessons.info is most popular for its articles designed on wall system. This article is based on this wall system concept using Angular js 1.4. Future posts will be on the same concept where I will be introducing ReactJS and AngularJS 2 to 9Lessons.info. Below is the demo and hope you all enjoy this new series

Ad Blocker Detector for Blogger with JavaScript

Wednesday, July 20, 2016

Ad Blocker Detector for Google Adsense with JavaScript

Advertisements are very important for any post published in internet. This is what decides the person’s revenue. But, recently adblocker system is killing revenue of the publisher because of which it also effects the creativity of that person. Today, I am providing a simple new solution for those depressed and effected persons of adblocking system. Here is a simple javascript to be included along with your website code to either hide the content of your website or show a pop-up or alert message to remove the viewers adblock plugin. Any blogger or any website management can use this code to improve your revenue of your website. This code is mainly designed for Google Adsense.

Ad Blocker Detector for Blogger with JavaScript

Wednesday, April 27, 2016

Track HTML5 Video Views with Google Analytics

Is there a simple solution to track viewers engagement, if you have published HTML 5 video on the web? Yes. You can use combination of Google Analytics and very few lines of coding to see detailed video engagement analytics. You can track total number of viewers for your video, number of viewers who has just watched minimum percentage of video you have mentioned, number of viewers who has completed watching the video and many such analytics could be found using Google Analytics. Let’s see how far you are utilizing Google Analytics for such great analysis of your posted content on the web. Have a look at the demo..!

Track HTML5 Video Views with Google Analytics

Monday, April 18, 2016

Integrate CKEditor in Html Page using JavaScript

CKEditor is a rich web text editor, which can be used inside your HTML web pages. This HTML text editor allows many of the powerful editing functions found on desktop editors like Microsoft Word to your web. This is featured with many advantages like preparing your mail content, creating your blogs and so on. This post also explains you how to further modify or use your text editor in many ways, which may include show / hide buttons, control the buttons, etc,.

Integrate CKEditor in Html Page using JavaScript

Sunday, April 03, 2016

Facebook Like Reactions using PHP, MySQL and Jquery.

Just a few days before, Facebook has launched Reactions, an extension of Like button. I succeeded in implementing the same in my WallScript 8, Build Your Own Social Network. Here is a quick and easy way to implement the Reactions using PHP,Jquery and PDO MySQL. It’s a basic idea of implementing the Reactions. Hope you enjoy the new Reactions for Like button..! Take a quick look at the live demo.

Facebook Like Reactions using PHP, MySQL and Jquery.

Make in India