123techblog

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 Read more »

Most of the people prefer to shop online which made eCommerce to grow rapidly. But, what makes an excellent eCommerce site for the customers? The answer is - an excellent checkout process. There are several different payment options available in the market today. Out of all, Paypal is the most popular and convenient way to get paid. Making it as easy as possible for your customers to pay is essential for increasing conversions and sales. This is why your checkout page is critical. I have already discussed 2 checkout options in my previous articles BrainTree PayPal using PHP and Payment System which were in most trend till day. Now, a new checkout option has been introduced by Paypal which is Paypal Express Checkout option. Read more »

A few days back, I read an article about Google Authentication. A bug was mentioned in the article, that Google login status can be easily accessed by calling out some images. After reading the article, I got an idea that why don't we use this bug in a positive approach to validate user authentication. This same idea has been implemented in this post to do email validation. I have used Google email login system (not OAuth) using Angular 4 CLI project. Take a look at the live demo ( Make sure to login into your Google account in another tab to do this validation). Read more »

Celebrity Launch of APP LIKE by actor and Bollywood Heartthrob and Haider Star Shahid followed by his array of celebrity colleagues had taken the entire entertainment and tech industry by a wave of unmatchable innovation in the talent and entertainment. APP LIKE went viral in no time with massive downloads both on Android and IOS platforms and growing trends on social media platforms proved just one thing that no one can match the craze and madness of Indians when it comes to celebrating numerous talents and Bollywood spirits. Its been a week and APP LIKE has already reached a whooping number of one million downloads, a by product of Asia’s biggest live streaming APP company, BIGO LIVE, which is already enjoying 200 million downloads since its very launch. Read more »

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. Read more »

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. Read more »

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. Read more »

We all know that Ionic is the useful framework for building HTML 5 mobile applications. It is mainly designed for the front end. When it comes to look and feel of the Ionic website, you have to work more on your application branding standards. Ionic default icons are not up to current market standards. This tutorial is all about how to add custom downloaded fonts like open sans and font awesome for icons into the Ionic application. Let’s see how you use customized fonts in your Ionic website. Read more »

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. Read more »

Most of the mobile applications starts with welcome page with login and signup buttons. A proper login or signup redirects to application home page and there you can navigate to different pages and finally you can end up with a logout action. Today’s tutorial is all about this. Here I am using AngularJS 4 and Ionic 3. The combination of AngularJS and Ionic in handling login is a straight forward process. This design is already explained in my previous posts using ReactJS navigations . Lets see how to set a starting page using Ionic 3 and AngularJS4 and learn basic understanding of how the navigation works. Read more »

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. Read more »

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. Read more »

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. Read more »

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. Read more »

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. Read more »

Do you wish to shine brightly in the engaging field of content writing? Are you hoping to get jobs in freelance content writing? Are you looking for talented writers across the country to write an exciting and quality article for you? Well, now you don’t need to spend a hefty amount of time browsing opportunities online. The Internet is a vast marketplace and there are loads of websites offering your needs in contents, but they are time-consuming, lacks a number of options and face issues with the payout. Contentmart is your one-stop solution to all your content needs. Read more »

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. Read more »

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. Read more »

These days, there are no projects that do not have a REST API for creating professional web services. REST ( Representational State Transfer) consists set of guidelines to build a web service, which can be used to modify or view specific information on the web without performing any server side operations. Using RESTful APIs saves huge amount of time. Twitter, Facebook, Google and thousands of companies use REST APIs. This is because REST is the most efficient and widespread standard in the creation of APIs for Internet services. Read more »

Anyone who wants to increase performance and security of your web page, I suggest to have Cloudflare setup in your DNS system. I have posted few articles to install paid SSL certificate for your web page, all which needs your complete support to maintain. But, Cloudflare provides free SSL certificates with a limited access (which is enough for any website) and it takes care most of the support that your web page needs. Most importantly, nowadays Google is providing better preferences for the web pages which has HTTPs as the protocol and more chances for your web page to appear on Google search. Read more »