tag:blogger.com,1999:blog-88689803597973897282024-03-13T12:15:57.593-07:00Ninja Coders Programming Blog - Tutorials about Angular, ReactJS, PHP, MySQL and Web DevelopmentAkshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-8868980359797389728.post-80360106623697558172018-04-29T11:51:00.000-07:002018-04-30T12:05:00.549-07:00Deploy Angular app to Firebase and GitHub pages<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Creating an angular app is a fun, but when it comes to deployment everyone struggle a lot and if you want to test your app on live server there is a cost attached to it, don't worry will be using free and easy hosting for testing our angular app on live server. Firebase provide free hosting for angular apps and GitHub pages is also a place where you can host static website. This tutorial will cover deploying angular app to <span style="background-color: #b6d7a8;">Firebase</span> and <span style="background-color: #b6d7a8;">Github Pages.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/banners/angular_deploy.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="357" data-original-width="657" height="347" src="https://github.com/askadu/ninjacoders-images/blob/master/banners/angular_deploy.png?raw=true" width="640" /></a></div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="background-color: lime;"></span><br />
<a name='more'></a><span style="background-color: lime;"><b><a href="https://ngoauth-e36e9.firebaseapp.com/" target="_blank">Firebase Demo</a></b></span> <b style="background-color: lime;"><a href="https://askadu.github.io/angular-firebase-oauth" target="_blank">GtHub:Pages Demo</a></b><br />
<br />
<h2 style="text-align: left;">
<span style="font-family: inherit;"><u>FIREBASE DEPLOY</u></span></h2>
<div style="text-align: justify;">
<span style="font-family: inherit;">Deploying angular app to firebase we will use <span style="background-color: #b6d7a8;">firebase-tools</span>. The firebase CLI provides variety of tools for managing, viewing and deploying to Firebase projects. </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br />
</span></div>
<h3 style="text-align: left;">
<span style="font-family: inherit; font-size: large;">Install Firebase Tools</span></h3>
<div>
<div style="text-align: justify;">
<span id="docs-internal-guid-a2a0a2f6-11b5-a13d-6954-4ccf128da81a" style="font-family: inherit;"><span style="vertical-align: baseline; white-space: pre-wrap;">The firebase CLI requires <span style="background-color: #b6d7a8;">Node.js</span> and <span style="background-color: #b6d7a8;">npm</span>, If you have not installed yet follow the instructions on </span><a href="https://nodejs.org/" rel="nofollow" style="text-decoration-line: none;" target="_blank"><span style="color: #1155cc; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/</span></a><span style="vertical-align: baseline; white-space: pre-wrap;"> , and make sure you have nodejs version <span style="background-color: #b6d7a8;">5.10.0</span> or greater to work with firebase CLI.</span></span></div>
</div>
<pre style="background-color: #4c1c56; border: 1px dashed rgb(237, 137, 94); color: white; font-family: arial; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"><span style="font-size: 15px;"> :~$ npm install -g firebase-tools </span><span style="font-size: large;">
</span></code></pre>
<div style="text-align: left;">
<h3>
<span style="font-family: inherit; font-weight: 700; white-space: pre-wrap;"><span style="font-size: large;">Login to Firebase</span></span><span style="font-family: inherit; font-size: 11pt; font-weight: 700; white-space: pre-wrap;"> </span></h3>
</div>
<div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
<span id="docs-internal-guid-a2a0a2f6-11b5-f1f4-3f14-e1163b5f9eac"><span style="font-family: inherit; vertical-align: baseline; white-space: pre-wrap;">Deploying angular app to firebase projects through firebase CLI you first need to authenticate your self. Let’s do it using below command.</span></span></div>
</div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><span id="docs-internal-guid-a2a0a2f6-11b5-f1f4-3f14-e1163b5f9eac"><code style="color: white; word-wrap: normal;"> :~$ firebase login
</code></span></pre>
<div>
<div style="text-align: justify;">
<span id="docs-internal-guid-a2a0a2f6-11b5-f1f4-3f14-e1163b5f9eac"><span style="font-family: inherit; vertical-align: baseline; white-space: pre-wrap;">After firing above command google OAuth page will open in your default browser as below.</span></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-a2a0a2f6-11b5-f1f4-3f14-e1163b5f9eac"><a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_1.png?raw=true" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="331" data-original-width="480" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_1.png?raw=true" /></a></span></div>
<div class="separator" style="clear: both; text-align: justify;">
Here you have to choose which account you want to use for firebase.</div>
<div>
<span id="docs-internal-guid-a2a0a2f6-11b5-f1f4-3f14-e1163b5f9eac"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> </span></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_2.png?raw=true" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="627" data-original-width="462" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_2.png?raw=true" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
Firebase CLI need access to above data, click on <span style="background-color: #6fa8dc;"><b><span style="color: white;">ALLOW</span></b></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_4.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="330" data-original-width="644" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_4.png?raw=true" /></a><a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_3.png?raw=true" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="206" data-original-width="420" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_login_3.png?raw=true" /></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">After successful login you can see above message on your terminal</span><br />
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">
</span></div>
</div>
<h3 style="text-align: left;">
<span style="font-family: inherit; font-weight: 700; text-align: justify; white-space: pre;">Initialize Firebase</span></h3>
<div style="text-align: justify;">
<span style="white-space: pre-wrap;">Move to your angular project root directory we are using here last tutorials angular oauth project if you missed it please clone the project from <a href="https://github.com/askadu/angular-firebase-oauth" target="_blank">github/askadu/angular-firebase-oauth</a> you can also go through the angular oauth article “<a href="https://www.ninjacoders.info/2018/04/angular2-firebase-oauth-for-google.html" target="_blank">Angular2 Firebase for Google, Facebook, Twitter and GitHub</a>” then move to project root directory and type below command to initialize firebase.</span></div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ firebase init</code></pre>
<div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_init_select_hosting.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="346" data-original-width="800" height="276" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/firebase_init_select_hosting.png?raw=true" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
You need to choose Hosting as chosen in above screen-shot.<br />
Once you initialize firebase in your project it will generate two files namely <span style="background-color: #b6d7a8;">`.firebaserc`</span> and <span style="background-color: #b6d7a8;">`firebase.json`</span></div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f"><span style="font-family: inherit; vertical-align: baseline;"><b>.firebaserc</b></span></span></span></div>
<div style="background: #fcfdff; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f">{
<span style="color: #a31515;">"projects"</span>: {
<span style="color: #a31515;">"default"</span>: <span style="color: #a31515;">"ngoauth-e36e9"</span>
}
}</span></span></pre>
</div>
<div>
<h3 style="text-align: left;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f"><span style="font-family: inherit; vertical-align: baseline;">firebase.json</span></span></span></h3>
<div style="background: #fcfdff; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">{
<span style="color: #a31515;">"hosting"</span>: {
<span style="color: #a31515;">"public"</span>: <span style="color: #a31515;">"dist"</span>,
<span style="color: #a31515;">"ignore"</span>: [
<span style="color: #a31515;">"firebase.json"</span>,
<span style="color: #a31515;">"**/.*"</span>,
<span style="color: #a31515;">"**/node_modules/**"</span>
],
<span style="color: #a31515;">"rewrites"</span>: [
{
<span style="color: #a31515;">"source"</span>: <span style="color: #a31515;">"**"</span>,
<span style="color: #a31515;">"destination"</span>: <span style="color: #a31515;">"/index.html"</span>
}
]
}
}</pre>
</div>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">
</span></span></div>
<div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<h3 style="text-align: left;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f"><span style="vertical-align: baseline;"><span id="docs-internal-guid-a2a0a2f6-11be-9519-0db4-9f6e87825b2c"><span style="font-family: inherit; font-size: large; font-weight: 700; vertical-align: baseline;">Production Build</span></span></span></span></span></h3>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
Angular production build basically creates 3 types of file that is index.html, *.js and *.css in <span style="background-color: #b6d7a8;">dist</span> folder. Let's do it using below command.</div>
</div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ ng build --prod </code></pre>
<div>
<h3 style="text-align: left;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f"><span style="vertical-align: baseline;"><span id="docs-internal-guid-a2a0a2f6-11be-9519-0db4-9f6e87825b2c"><span style="font-size: large; vertical-align: baseline;"><span style="font-family: inherit; font-weight: 700;">Deploy angular app</span></span></span></span></span></span></h3>
</div>
<div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
Now we are good to deploy our app to firebase projects. To deploy your application, simply run the following command form your project root directory.</div>
</div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ firebase deploy
</code></pre>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
This will deploy your project to <firebase-app-name>.firebaseapp.com As in this case url would be <a href="https://ngoauth-e36e9.firebaseapp.com/" target="_blank"><span style="color: blue;">https://ngoauth-e36e9.firebaseapp.com</span></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<h2 style="text-align: left;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; vertical-align: baseline; white-space: pre;"><span style="vertical-align: baseline;"><span style="vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: inherit; font-size: x-large; font-style: normal; font-variant: normal; vertical-align: baseline; white-space: pre;"><u>
</u></span></span></span></span></h2>
<h2 style="text-align: left;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f"><span style="vertical-align: baseline;"><span id="docs-internal-guid-a2a0a2f6-11be-9519-0db4-9f6e87825b2c"><span style="vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: inherit; font-size: x-large; font-style: normal; font-variant: normal; vertical-align: baseline; white-space: pre;"><u>GITHUB:PAGES DEPLOY</u></span></span></span></span></span></span></h2>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
Github Pages is a feature provided by github to host static website for free, it’s very simple you have to create <span style="background-color: #b6d7a8;">gh-pages</span> branch and push all your content there and you are done. This tutorial will use <span style="background-color: #b6d7a8;"><a href="https://www.npmjs.com/package/angular-cli-ghpages" rel="nofollow" target="_blank">angular-cli-ghpages</a></span> to deploy our angular app to GithubPages.</div>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="vertical-align: baseline;"><span style="font-family: inherit; vertical-align: baseline;"><span style="font-family: inherit;"><br /></span></span></span></span>
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f"><span style="vertical-align: baseline;"><span id="docs-internal-guid-a2a0a2f6-11be-9519-0db4-9f6e87825b2c"><span style="font-family: inherit; vertical-align: baseline;"><span style="font-family: inherit;">Let’s install angular-cli-ghpages</span></span></span></span></span></span></div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ npm install -g angular-cli-ghpages </code></pre>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div style="text-align: justify;">
Move to project root directory and create new branch as below, do checkout to <span style="background-color: #b6d7a8;">gh-pages</span> branch.</div>
<pre style="background-color: #4c1c56; border: 1px dashed rgb(237, 137, 94); color: white; font-family: arial; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;"> :~$ git branch gh-pages</code></pre>
<pre style="background-color: #4c1c56; border: 1px dashed rgb(237, 137, 94); color: white; font-family: arial; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;"><username><repo-name> :~$ git checkout gh-pages </repo-name></username></code></pre>
<span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span id="docs-internal-guid-a2a0a2f6-11be-6b74-289e-2e3ad9c8322f"><span style="vertical-align: baseline;"><span id="docs-internal-guid-a2a0a2f6-11be-9519-0db4-9f6e87825b2c"><span style="vertical-align: baseline;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="font-family: inherit;">Now build the angular project with flag <span style="background-color: #b6d7a8;">--base-href</span> to set correct base path.</span></span></span></span></span></span></span></div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ ng build --prod --base-href “https://<username><username>.github.io/<repo><repo-name>/” </repo-name></username></code></pre>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="text-align: justify;">Then it’s as simple as using <span style="background-color: #b6d7a8;">angular-firebase-ghpages</span> to deploy your app to github pages. (ngh is shorthand for angular-cli-ghpages)</span></div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ ngh </code></pre>
</div>
</div>
</div>
<span style="text-align: justify;">Yup!! You deployed your angular app on github pages. Now access the app through https://<username>.github.io/<repo-name> As in this case url would be <a href="https://askadu.github.io/angular-firebase-oauth" target="_blank"><span style="color: blue;">https://askadu.github.io/angular-firebase-oauth</span></a></span></div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com1tag:blogger.com,1999:blog-8868980359797389728.post-61826109578772453372018-04-08T12:06:00.000-07:002018-04-15T08:12:28.939-07:00Angular2 Firebase OAuth for Google, Facebook, Twitter and GitHub<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
<span id="docs-internal-guid-95b1b07d-81b6-892c-2adf-a75a5402d7c1"><span style="font-family: inherit; vertical-align: baseline; white-space: pre-wrap;">Authentication is one of the common part of any web and mobile application, in this tutorial will cover how to use Firebase API in Angular2 project for open authentication. It includes Facebook, google, twitter and GitHub. We will use angular CLI for completing this project.</span></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/banners/angular_firebase_oauth.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="357" data-original-width="657" height="346" src="https://github.com/askadu/ninjacoders-images/blob/master/banners/angular_firebase_oauth.png?raw=true" width="640" /></a></div>
<div class="" style="clear: both; text-align: justify;">
<a name='more'></a><b><a href="https://github.com/askadu/angular-firebase-oauth" target="_blank"><span style="background-color: lime; color: black;">Code on Github</span> </a> <span style="background-color: lime; color: black;"><a href="https://ninjakoders.github.io/sample/angular-oauth-demo" target="_blank">Live Demo</a></span></b></div>
<div class="" style="clear: both; text-align: justify;">
<b></b></div>
<b><br /></b>
<br />
<div class="" style="clear: both; text-align: justify;">
<b><span style="font-family: inherit;">Prerequisite</span></b></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<ol style="text-align: left;">
<li><span style="font-family: "arial";"><span style="font-family: inherit; white-space: pre-wrap;">Facebook App <a href="https://developers.facebook.com/apps">https://developers.facebook.com/apps</a></span></span></li>
<li><span style="font-family: "arial";"><span style="font-family: inherit; white-space: pre-wrap;">Twitter App <a href="https://apps.twitter.com/">https://apps.twitter.com</a></span></span></li>
<li><span style="font-family: "arial";"><span style="font-family: inherit; white-space: pre-wrap;">GitHub App <a href="https://github.com/settings/applications/new">https://github.com/settings/applications/new</a></span></span></li>
<li><span style="font-family: "arial";"><span style="font-family: inherit; white-space: pre-wrap;">Firebase App <a href="https://console.firebase.google.com/">https://console.firebase.google.com</a></span></span></li>
</ol>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b>Application Flow</b></span></div>
<div style="text-align: justify;">
There will be 2 pages one is for login and another would be home page which has to be login protected, once user authenticate successfully with any of the login provider he will redirect to home page. Where we have to show user's displayName, photo and email address.<span id="docs-internal-guid-95b1b07d-8233-c3d2-2895-3d7316e062dd"></span></div>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/oauth_flow.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="application flow chart" border="0" data-original-height="176" data-original-width="561" height="200" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/oauth_flow.png?raw=true" title="" width="640" /></a></div>
<b style="font-family: inherit; white-space: pre-wrap;"><br />
</b> <br />
<h3>
<b style="font-family: inherit; white-space: pre-wrap;"> </b><b style="font-family: inherit; white-space: pre-wrap;">Get started</b></h3>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Install Angular CLI using below command</span></div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ npm install @angular/cli -g
</code></pre>
<b style="font-family: inherit; white-space: pre-wrap;"> </b> <b style="font-family: inherit; white-space: pre-wrap;">Create a new angular project</b><br />
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ ng new AngularAuth
:~$ cd AngularAuth
:~$ ng serve
</code></pre>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Application will be up and running on port 4200 <a href="http://localhost:4200/" target="_blank">http://localhost:4200/</a></span></div>
<br />
<h3 style="text-align: left;">
<b style="font-family: inherit; white-space: pre-wrap;">Create Firebase App</b></h3>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">You can create Google Firebase App from console </span><a href="https://console.firebase.google.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre;">Firebase Console</span></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/welcome_page.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="490" data-original-width="703" height="446" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/welcome_page.png?raw=true" width="640" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/project_create.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="510" data-original-width="669" height="486" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/project_create.png?raw=true" width="640" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<b style="font-weight: normal;"><br />
</b> <br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<h3 style="text-align: left;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b>Install required dependencies firebase and angularfire2</b></span></h3>
<div>
<span style="white-space: pre-wrap;">For consume firebase API in angular we need to install <span style="background-color: #b6d7a8;">firebase</span> and <span style="background-color: #b6d7a8;">angularfire2</span> lib using npm</span></div>
</div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ npm install firebase angularfire2 --save
</code></pre>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">First we need to configure </span><span style="background-color: #b6d7a8; color: black; font-family: inherit; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><i>AngularFireModule</i></span><span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> and </span><span style="background-color: #b6d7a8; color: black; font-family: inherit; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><i>AnglarFireAuth</i></span><span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> as below</span><br />
<h4 style="text-align: left;">
<span style="background-color: transparent; color: black; font-family: inherit; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;">app.module.ts</span></h4>
</div>
<div>
<div style="background: #fcfdff; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: blue;">import</span> { BrowserModule } from <span style="color: #a31515;">'@angular/platform-browser'</span>;
<span style="color: blue;">import</span> { NgModule } from <span style="color: #a31515;">'@angular/core'</span>;
<span style="color: blue;">import</span> { FormsModule } from <span style="color: #a31515;">'@angular/forms'</span>;
<span style="color: blue;">import</span> { HttpModule } from <span style="color: #a31515;">'@angular/http'</span>;
<span style="color: blue;">import</span> { AppComponent } from <span style="color: #a31515;">'./app.component'</span>;
<span style="background-color: #f1f29d;"><span style="color: blue;">import</span> { AngularFireModule } from <span style="color: #a31515;">'angularfire2'</span></span>;
<span style="background-color: #f1f29d;"><span style="color: blue;">import</span> { AngularFireAuth } from <span style="color: #a31515;">'angularfire2/auth'</span></span>;
<span style="background-color: #f1f29d;"><span style="color: blue;">export</span> <span style="color: blue;">const</span> firebaseConfig = {
apiKey: <span style="color: #a31515;">"api-key"</span>,
authDomain: <span style="color: #a31515;">"auth-domain"</span>,
databaseURL: <span style="color: #a31515;">"database-url"</span>,
projectId: <span style="color: #a31515;">"project-id"</span>,
storageBucket: <span style="color: #a31515;">"storage-bucket"</span>,
messagingSenderId: <span style="color: #a31515;">"sender-id"</span>
}</span>;
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
<span style="background-color: #f1f29d;">AngularFireModule.initializeApp(firebaseConfig),</span>
],
providers: [AngularFireAuth],
bootstrap: [AppComponent]
})
<span style="color: blue;">export</span> <span style="color: blue;">class</span> AppModule
</pre>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Firebase json configuration you can get it from Firebase <a href="https://console.firebase.google.com/" style="font-style: normal;" target="_blank">console</a> click on “<i>Add Firebase to your web app</i>”</span></span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/config_1.png?raw=true" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" data-original-height="423" data-original-width="637" height="424" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/config_1.png?raw=true" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: x-small;">Project Overview Page</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/firebase/config_2.png?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="549" data-original-width="764" height="459" src="https://github.com/askadu/ninjacoders-images/blob/master/firebase/config_2.png?raw=true" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Create an Authorization service</span></span></h3>
<div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">In order to use firebase authentication in our application it is good to encapsulate authentication functions in one service, Lets create a service using angular CLI.</span></span></div>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ ng generate service providers/auth.service.ts </code></pre>
<h4 style="text-align: left;">
<span style="font-family: inherit;">auth.service.ts</span></h4>
<div style="background-attachment: initial; background-clip: initial; background-color: #fcfdff; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 2px dashed lightgray; font-size: 12px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0px;"><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { Injectable } from </span><span style="background-color: #fcfdff; color: #a31515;">'@angular/core'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #f1f29d;"><span style="color: blue;">import</span> { AngularFireAuth } from <span style="color: #a31515;">'angularfire2/auth'</span>;
<span style="color: blue;">import</span> * <span style="color: blue;">as</span> firebase from <span style="color: #a31515;">'firebase/app'</span>;</span><span style="background-color: #fcfdff;">
@Injectable()
</span><span style="background-color: #fcfdff; color: blue;">export</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;"> AuthService {
</span><span style="background-color: #fcfdff; color: blue;">constructor</span><span style="background-color: #fcfdff;">(</span><span style="background-color: #fcfdff; color: blue;">public</span><span style="background-color: #fcfdff;"> afa: </span><span style="background-color: #fcfdff; color: #2b91af;">AngularFireAuth</span><span style="background-color: #fcfdff;">) { }
loginWithGoogle() {
</span><span style="background-color: #fcfdff; color: blue;">return</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.afa.auth.signInWithPopup(</span><span style="background-color: #fcfdff; color: blue;">new</span><span style="background-color: #fcfdff;"> firebase.auth.GoogleAuthProvider());
}
loginWithFacebook() {
</span><span style="background-color: #fcfdff; color: blue;">return</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.afa.auth.signInWithPopup(</span><span style="background-color: #fcfdff; color: blue;">new</span><span style="background-color: #fcfdff;"> firebase.auth.FacebookAuthProvider());
}
loginWithTwitter() {
</span><span style="background-color: #fcfdff; color: blue;">return</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.afa.auth.signInWithPopup(</span><span style="background-color: #fcfdff; color: blue;">new</span><span style="background-color: #fcfdff;"> firebase.auth.TwitterAuthProvider());
}
loginWithGitHub() {
</span><span style="background-color: #fcfdff; color: blue;">return</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.afa.auth.signInWithPopup(</span><span style="background-color: #fcfdff; color: blue;">new</span><span style="background-color: #fcfdff;"> firebase.auth.GithubAuthProvider());
}
logout() {
localStorage.clear();
</span><span style="background-color: #fcfdff; color: blue;">return</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.afa.auth.signOut();
}
<div style="text-align: justify;">
}</div>
</span></pre>
</div>
<div style="text-align: left;">
<span style="font-family: inherit; text-align: justify; white-space: pre-wrap;">We need to import AngularFireAuth from angularfire2 lib and firebase from firebase lib. Next, AngularFireAuth service is injected into the constructor as public in AuthService. </span><b style="font-family: inherit; text-align: justify; white-space: pre-wrap;">logout()</b><span style="font-family: inherit; text-align: justify; white-space: pre-wrap;"> method we are clearing out the localstorage data, will use localStorage to stroe </span><b style="font-family: inherit; text-align: justify; white-space: pre-wrap;">displayname</b><span style="font-family: inherit; text-align: justify; white-space: pre-wrap;">, </span><b style="font-family: inherit; text-align: justify; white-space: pre-wrap;">email</b><span style="font-family: inherit; text-align: justify; white-space: pre-wrap;">, </span><b style="font-family: inherit; text-align: justify; white-space: pre-wrap;">photourl</b><span style="font-family: inherit; text-align: justify; white-space: pre-wrap;"> from </span><b style="font-family: inherit; text-align: justify; white-space: pre-wrap;">app.component.ts</b></div>
<div style="font-weight: 400; text-align: justify;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="white-space: pre-wrap;"><span style="font-family: inherit;"> </span></span></span></div>
<h3 style="text-align: justify;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="white-space: pre-wrap;"><span style="font-family: inherit;"><b>The AuthService consist of 5 following methods</b> </span></span></span></h3>
<div style="text-align: justify;">
<span style="font-family: inherit; text-align: left; white-space: pre-wrap;">loginWithFacebook() loginWithGoogle() loginWithTwitter() loginWithGitHub() logout() </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit; text-align: left; white-space: pre-wrap;"> </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit; white-space: pre-wrap;">AngularFireAuth provide two methods for OAuth, one is <span style="background-color: #b6d7a8;"><i>signInWithPopUp(provider)</i></span> and <span style="background-color: #b6d7a8;"><i>signInWithRedirect(provider)</i></span>, one opens popup window within the page and another redirect you to auth providers website respectively. Both method requires authentication object as parameter, Authentication object means which auth provider you want to use.</span></div>
<br />
<h2 style="text-align: left;">
<span style="white-space: pre;"><span style="font-family: inherit; font-size: large;">Create LoginPage Component</span></span></h2>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ ng generate component loginPage
</code></pre>
<span style="font-family: inherit; text-align: justify; white-space: pre-wrap;">Let’s implement LoginPage Component, This component will wrap the AuthService methods to make available for login-page html template, Inject the AuthService and Router as below</span><br />
<br />
<h4 style="text-align: left;">
<span style="font-family: inherit; text-align: justify; white-space: pre-wrap;">login-page.component.ts</span></h4>
<div style="background-attachment: initial; background-clip: initial; background-color: #fcfdff; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0px;"><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { Component, OnInit } from </span><span style="background-color: #fcfdff; color: #a31515;">'@angular/core'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { Router } from </span><span style="background-color: #fcfdff; color: #a31515;">'@angular/router'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #f1f29d;"><span style="color: blue;">import</span> { AuthService } from <span style="color: #a31515;">'../providers/auth.service'</span>;</span><span style="background-color: #fcfdff;">
@Component({
selector: </span><span style="background-color: #fcfdff; color: #a31515;">'app-login-page'</span><span style="background-color: #fcfdff;">,
templateUrl: </span><span style="background-color: #fcfdff; color: #a31515;">'./login-page.component.html'</span><span style="background-color: #fcfdff;">,
styleUrls: [</span><span style="background-color: #fcfdff; color: #a31515;">'./login-page.component.css'</span><span style="background-color: #fcfdff;">],
})
</span><span style="background-color: #fcfdff; color: blue;">export</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;"> LoginPageComponent </span><span style="background-color: #fcfdff; color: blue;">implements</span><span style="background-color: #fcfdff;"> OnInit {
</span><span style="background-color: #fcfdff; color: blue;">constructor</span><span style="background-color: #fcfdff;">(</span><span style="background-color: #fcfdff; color: blue;">public</span><span style="background-color: #fcfdff;"> authService: </span><span style="background-color: #fcfdff; color: #2b91af;">AuthService</span><span style="background-color: #fcfdff;">, </span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> router: </span><span style="background-color: #fcfdff; color: #2b91af;">Router</span><span style="background-color: #fcfdff;">) { }
ngOnInit() {
}
loginGoogle() {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.authService.loginWithGoogle().then((data)=> {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.router.navigate([</span><span style="background-color: #fcfdff; color: #a31515;">''</span><span style="background-color: #fcfdff;">]);
});
}
loginFacebook() {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.authService.loginWithFacebook().then((data)=> {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.router.navigate([</span><span style="background-color: #fcfdff; color: #a31515;">''</span><span style="background-color: #fcfdff;">]);
});
}
loginTwitter() {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.authService.loginWithTwitter().then((data)=> {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.router.navigate([</span><span style="background-color: #fcfdff; color: #a31515;">''</span><span style="background-color: #fcfdff;">]);
});
}
loginGitHub() {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.authService.loginWithGitHub().then((data)=> {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.router.navigate([</span><span style="background-color: #fcfdff; color: #a31515;">''</span><span style="background-color: #fcfdff;">]);
});
}
}
</span></pre>
</div>
<span style="font-family: inherit; text-align: justify; white-space: pre-wrap;">In above code snippet we have implemented 4 methods which returns the promise and once promise is resolved we are redirecting user to home page.</span><br />
<br />
<h3>
<b><span style="font-family: inherit;">Login Page HTML</span></b></h3>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Let's create login html page, i'm using bootstrap 4 for designing this page and also <a href="https://github.com/askadu/angular-firebase-oauth/blob/master/src/assets/css/social-button.css" target="_blank">custom css</a> for social login buttons</span></span><br />
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"> </span></span></div>
<h4 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">login-page.component.html</span></span></h4>
<div style="background: rgb(252, 253, 255); border: 2px dashed lightgray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0px;"><span style="font-size: 14px;"><div </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"container"</span><span style="font-size: 14px;"> style=</span><span style="color: #a31515; font-size: 14px;">"margin-top: 20px"</span><span style="font-size: 14px;">>
<div </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"row"</span><span style="font-size: 14px;">>
<div </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"col-md-3"</span><span style="font-size: 14px;">>
<button </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"loginBtn loginBtn--facebook"</span><span style="font-size: 14px;"> type=</span><span style="color: #a31515; font-size: 14px;">"button"</span><span style="font-size: 14px;">
(click)=</span><span style="color: #a31515; font-size: 14px;">"loginFacebook()"</span><span style="font-size: 14px;">>Login </span><span style="color: blue; font-size: 14px;">with</span><span style="font-size: 14px;"> Facebook</button>
</div>
<div </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"col-md-3"</span><span style="font-size: 14px;">>
<button </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"loginBtn loginBtn--twitter"</span><span style="font-size: 14px;"> type=</span><span style="color: #a31515; font-size: 14px;">"button"</span><span style="font-size: 14px;">
(click)=</span><span style="color: #a31515; font-size: 14px;">"loginTwitter()"</span><span style="font-size: 14px;">>Login </span><span style="color: blue; font-size: 14px;">with</span><span style="font-size: 14px;"> Twitter</button>
</div>
<div </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"col-md-3"</span><span style="font-size: 14px;">>
<button </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"loginBtn loginBtn--google"</span><span style="font-size: 14px;"> type=</span><span style="color: #a31515; font-size: 14px;">"button"</span><span style="font-size: 14px;">
(click)=</span><span style="color: #a31515; font-size: 14px;">"loginGoogle()"</span><span style="font-size: 14px;">>Login </span><span style="color: blue; font-size: 14px;">with</span><span style="font-size: 14px;"> Google</button>
</div>
<div </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"col-md-3"</span><span style="font-size: 14px;">>
<button </span><span style="color: blue; font-size: 14px;">class</span><span style="font-size: 14px;">=</span><span style="color: #a31515; font-size: 14px;">"loginBtn loginBtn--github"</span><span style="font-size: 14px;"> type=</span><span style="color: #a31515; font-size: 14px;">"button"</span><span style="font-size: 14px;">
(click)=</span><span style="color: #a31515; font-size: 14px;">"loginGitHub()"</span><span style="font-size: 14px;">>Login </span><span style="color: blue; font-size: 14px;">with</span><span style="font-size: 14px;"> GitHub</button>
</div>
</div>
</div></span><span style="font-family: inherit;">
</span></pre>
</div>
<div style="text-align: justify;">
<span style="font-family: inherit; white-space: pre-wrap;">Each button attached an <span style="background-color: #b6d7a8;"><i>onclick</i></span> event and its calling the exposed method by loginPage component i.e loginWith Facebook, Twitter, Google, GitHub respectively.</span><br />
<span style="font-family: inherit; white-space: pre-wrap;"><br />
</span></div>
<h3 style="text-align: left;">
<span style="font-family: inherit; white-space: pre;">Create Home Page Component</span></h3>
<pre style="background-color: #4c1c56; border: 1px dashed #ed895e; color: white; font-family: "arial"; font-size: 15px; height: auto; line-height: 30px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: white; word-wrap: normal;"> :~$ ng generate component homePage
</code></pre>
</div>
<div>
<div style="text-align: justify;">
<span id="docs-internal-guid-95b1b07d-992b-5762-703e-15269b653492"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">This component is to show user's <i style="background-color: #b6d7a8;">displayName</i>, <i style="background-color: #b6d7a8;">email</i> and <i style="background-color: #b6d7a8;">photo</i>, inject AuthService and Router and implement logout() method which will invalidate users logged-in session.</span></span></span><br />
<br />
<h4>
<span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">home-page.component.ts</span></span></h4>
</div>
<div style="background-attachment: initial; background-clip: initial; background-color: #fcfdff; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0px;"><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { Component, OnInit } from </span><span style="background-color: #fcfdff; color: #a31515;">'@angular/core'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { Router } from </span><span style="background-color: #fcfdff; color: #a31515;">'@angular/router'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { AuthService } from </span><span style="background-color: #fcfdff; color: #a31515;">'../providers/auth.service'</span><span style="background-color: #fcfdff;">;
@Component({
selector: </span><span style="background-color: #fcfdff; color: #a31515;">'app-home-page'</span><span style="background-color: #fcfdff;">,
templateUrl: </span><span style="background-color: #fcfdff; color: #a31515;">'./home-page.component.html'</span><span style="background-color: #fcfdff;">,
styleUrls: [</span><span style="background-color: #fcfdff; color: #a31515;">'./home-page.component.css'</span><span style="background-color: #fcfdff;">]
})
</span><span style="background-color: #fcfdff; color: blue;">export</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;"> HomePageComponent </span><span style="background-color: #fcfdff; color: blue;">implements</span><span style="background-color: #fcfdff;"> OnInit {
</span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> displayName: </span><span style="background-color: #fcfdff; color: #2b91af;">string</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> photoURL: </span><span style="background-color: #fcfdff; color: #2b91af;">string</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> email: </span><span style="background-color: #fcfdff; color: #2b91af;">string</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">constructor</span><span style="background-color: #fcfdff;">(</span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> authService: </span><span style="background-color: #fcfdff; color: #2b91af;">AuthService</span><span style="background-color: #fcfdff;">, </span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> router: </span><span style="background-color: #fcfdff; color: #2b91af;">Router</span><span style="background-color: #fcfdff;">) {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.displayName = localStorage.getItem(</span><span style="background-color: #fcfdff; color: #a31515;">'displayName'</span><span style="background-color: #fcfdff;">);
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.photoURL = localStorage.getItem(</span><span style="background-color: #fcfdff; color: #a31515;">'photoURL'</span><span style="background-color: #fcfdff;">);
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.email = localStorage.getItem(</span><span style="background-color: #fcfdff; color: #a31515;">'email'</span><span style="background-color: #fcfdff;">);
}
ngOnInit() {
}
</span><span style="background-color: #f1f29d;">logout() {
<span style="color: blue;">this</span>.authService.logout();
<span style="color: blue;">this</span>.router.navigate([<span style="color: #a31515;">'login'</span>]);
}</span><span style="background-color: #fcfdff;">
}
</span></pre>
</div>
<div style="text-align: justify;">
<span id="docs-internal-guid-95b1b07d-992e-6c86-e451-1c4814b55f09"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">We are getting the data from local storage which we will storing from <b>app.component.ts</b></span></span></span></div>
<br />
<h2 style="text-align: left;">
Home Page HTML</h2>
<div style="text-align: justify;">
<span style="font-family: inherit;">Let's create home page html, as we are using bootstrap 4 for desiging the pages. Here i'm using card to display photo, username and email</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br />
</span></div>
<h4 style="text-align: left;">
home-page.component.html</h4>
<div style="background: #fcfdff; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><div <span style="color: blue;">class</span>=<span style="color: #a31515;">"container"</span>>
<div <span style="color: blue;">class</span>=<span style="color: #a31515;">"card"</span> style=<span style="color: #a31515;">"margin-top: 20px; width: 18rem;"</span>>
<img <span style="color: blue;">class</span>=<span style="color: #a31515;">"card-img-top"</span> src={{photoURL}} alt=<span style="color: #a31515;">"Card image cap"</span>>
<div <span style="color: blue;">class</span>=<span style="color: #a31515;">"card-body"</span>>
<h5 <span style="color: blue;">class</span>=<span style="color: #a31515;">"card-title"</span>>Welcome {{displayName}}</h5>
<p <span style="color: blue;">class</span>=<span style="color: #a31515;">"card-text"</span>>{{email}}</p>
<a href=<span style="color: #a31515;">"#"</span> (click)=<span style="color: #a31515;">"logout()"</span> <span style="color: blue;">class</span>=<span style="color: #a31515;">"btn btn-primary"</span>>Logout</a>
</div>
</div>
</div>
</pre>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<h2>
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-size: large;">Navigation</span></span></h2>
<span style="color: black; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">In this application we have two pages, so definitely will need two routes to navigate to these pages "<i style="background-color: #b6d7a8;">/ "</i> and <span style="background-color: #b6d7a8;">"</span><i style="background-color: #b6d7a8;">/login"</i> for home page and login page respectively. Lets implement routing.</span></span></div>
<span style="font-family: inherit;"><span id="docs-internal-guid-95b1b07d-9932-7ed7-012e-63570e024d89"></span></span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">We are configuring routing in app.module.ts, add the below code snippet.</span></span><br />
<h4>
<span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">app.module.ts</span></span></h4>
</div>
<div style="background-attachment: initial; background-clip: initial; background-color: #fcfdff; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 2px dashed lightgray; overflow: auto; padding: 0.2em 0.6em; text-align: left; width: auto;">
<pre style="line-height: 125%; margin: 0px;"><span style="background-color: #f1f29d; font-size: 14px;"><span style="color: blue;">import</span> { RouterModule, Routes } from <span style="color: #a31515;">'@angular/router'</span>;</span><span style="background-color: #fcfdff; font-size: 14px;">
</span><span style="background-color: #f1f29d; font-size: 14px;"><span style="color: blue;">const</span> routes: <span style="color: #2b91af;">Routes</span> = [
{ path: <span style="color: #a31515;">''</span>, component: <span style="color: #2b91af;">HomePageComponent</span> },
{ path: <span style="color: #a31515;">'login'</span>, component: <span style="color: #2b91af;">LoginPageComponent</span> }
];</span><span style="background-color: #fcfdff; font-size: 14px;">
@NgModule({
declarations: [
AppComponent,
HomePageComponent,
LoginPageComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AngularFireModule.initializeApp(firebaseConfig),
</span><span style="background-color: #f1f29d; font-size: 14px;">RouterModule.forRoot(routes)</span><span style="background-color: #fcfdff;"><span style="font-size: 14px;">
],
providers: [AngularFireAuth, AuthService],
bootstrap: [AppComponent]
})</span></span></pre>
</div>
<div style="text-align: justify;">
<h2>
<span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-size: large;">
</span></span></h2>
<h2>
<span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit; font-size: large;">Auth Gaurd</span></span></h2>
<span id="docs-internal-guid-95b1b07d-9934-71b4-d5cb-2f8e06b54ef7"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Finally we have to protect our home page by unauthorized access, Let’s add the code in App component constructor by injecting AngularFireAuth and Router. AngularFireAuth has instance variable <i style="background-color: #b6d7a8;">authState</i> which returns <i style="background-color: #b6d7a8;">firebase.User</i> observable, so we can subscribe on and check the auth status.</span></span></span><br />
<span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<h4 style="text-align: left;">
<span style="font-family: inherit;">app.component.ts</span></h4>
<div style="background-attachment: initial; background-clip: initial; background-color: #fcfdff; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0px;"><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { Component } from </span><span style="background-color: #fcfdff; color: #a31515;">'@angular/core'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { Router } from </span><span style="background-color: #fcfdff; color: #a31515;">'@angular/router'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #f1f29d;"><span style="color: blue;">import</span> { Observable } from <span style="color: #a31515;">'rxjs/Observable'</span>;</span><span style="background-color: #fcfdff;">
</span><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> * </span><span style="background-color: #fcfdff; color: blue;">as</span><span style="background-color: #fcfdff;"> firebase from </span><span style="background-color: #fcfdff; color: #a31515;">'firebase/app'</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">import</span><span style="background-color: #fcfdff;"> { AngularFireAuth } from </span><span style="background-color: #fcfdff; color: #a31515;">'angularfire2/auth'</span><span style="background-color: #fcfdff;">;
@Component({
selector: </span><span style="background-color: #fcfdff; color: #a31515;">'app-root'</span><span style="background-color: #fcfdff;">,
templateUrl: </span><span style="background-color: #fcfdff; color: #a31515;">'./app.component.html'</span><span style="background-color: #fcfdff;">,
styleUrls: [</span><span style="background-color: #fcfdff; color: #a31515;">'./app.component.css'</span><span style="background-color: #fcfdff;">]
})
</span><span style="background-color: #fcfdff; color: blue;">export</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;"> AppComponent {
</span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> isLoggedIn: </span><span style="background-color: #fcfdff; color: #2b91af;">boolean</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> displayName: </span><span style="background-color: #fcfdff; color: #2b91af;">string</span><span style="background-color: #fcfdff;">;
user: </span><span style="background-color: #fcfdff; color: #2b91af;">Observable</span><span style="background-color: #fcfdff;"><firebase.User>;
</span><span style="background-color: #fcfdff; color: blue;">constructor</span><span style="background-color: #fcfdff;">(afAuth: </span><span style="background-color: #fcfdff; color: #2b91af;">AngularFireAuth</span><span style="background-color: #fcfdff;">, </span><span style="background-color: #fcfdff; color: blue;">private</span><span style="background-color: #fcfdff;"> router: </span><span style="background-color: #fcfdff; color: #2b91af;">Router</span><span style="background-color: #fcfdff;">) {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.user = afAuth.authState;
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.user.subscribe((auth) => {
</span><span style="background-color: #fcfdff; color: blue;">if</span><span style="background-color: #fcfdff;">(auth == </span><span style="background-color: #fcfdff; color: blue;">null</span><span style="background-color: #fcfdff;">) {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.isLoggedIn = </span><span style="background-color: #fcfdff; color: blue;">false</span><span style="background-color: #fcfdff;">;
console.log(</span><span style="background-color: #fcfdff; color: #a31515;">"auth is null"</span><span style="background-color: #fcfdff;">);
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.router.navigate([</span><span style="background-color: #fcfdff; color: #a31515;">'login'</span><span style="background-color: #fcfdff;">]);
} </span><span style="background-color: #fcfdff; color: blue;">else</span><span style="background-color: #fcfdff;"> {
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.isLoggedIn = </span><span style="background-color: #fcfdff; color: blue;">true</span><span style="background-color: #fcfdff;">;
</span><span style="background-color: #fcfdff; color: blue;">this</span><span style="background-color: #fcfdff;">.displayName = auth.displayName;
localStorage.setItem(</span><span style="background-color: #fcfdff; color: #a31515;">'displayName'</span><span style="background-color: #fcfdff;">, auth.displayName);
localStorage.setItem(</span><span style="background-color: #fcfdff; color: #a31515;">'email'</span><span style="background-color: #fcfdff;">, auth.email);
localStorage.setItem(</span><span style="background-color: #fcfdff; color: #a31515;">'photoURL'</span><span style="background-color: #fcfdff;">, auth.photoURL);
}
});
}
}
</span></pre>
</div>
<div style="text-align: justify;">
<span id="docs-internal-guid-95b1b07d-9936-1dd1-8e0a-815add8cd075"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">We have declared 2 instance variable which holds loggedin status and display name and then based on isLoggedIn variable we will show user displayName on common navbar.</span></span></span></div>
<div style="text-align: left;">
<span style="white-space: pre;"><span style="font-family: inherit;">
</span></span></div>
<h2 style="text-align: left;">
<span style="white-space: pre;"><span style="font-family: inherit;">Add common navbar in app component template</span></span></h2>
<div style="text-align: left;">
<span style="font-family: inherit;">App component is a root component where we have our router outlet, so whatever we add in this page will display for all components.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br />
</span></div>
<h4 style="text-align: left;">
<span style="font-family: inherit;">app.component.html</span></h4>
<div style="background-attachment: initial; background-clip: initial; background-color: #fcfdff; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 2px dashed lightgray; font-size: 14px; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0px;"><span style="background-color: #fcfdff;"><nav </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;">=</span><span style="background-color: #fcfdff; color: #a31515;">"navbar navbar-dark bg-dark"</span><span style="background-color: #fcfdff;">>
<a href=</span><span style="background-color: #fcfdff; color: #a31515;">"#"</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;">=</span><span style="background-color: #fcfdff; color: #a31515;">"navbar-brand"</span><span style="background-color: #fcfdff;">>NinjaCoders.info</a>
<span </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;">=</span><span style="background-color: #fcfdff; color: #a31515;">"pull-right"</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #f1f29d;">*ngIf=<span style="color: #a31515;">"isLoggedIn"</span></span><span style="background-color: #fcfdff;"> style=</span><span style="background-color: #fcfdff; color: #a31515;">"color: yellow"</span><span style="background-color: #fcfdff;">>
{{displayName}}</span>
<span </span><span style="background-color: #fcfdff; color: blue;">class</span><span style="background-color: #fcfdff;">=</span><span style="background-color: #fcfdff; color: #a31515;">"pull-right"</span><span style="background-color: #fcfdff;"> </span><span style="background-color: #f1f29d;">*ngIf=<span style="color: #a31515;">"!isLoggedIn"</span></span><span style="background-color: #fcfdff;"> style=</span><span style="background-color: #fcfdff; color: #a31515;">"color: yellow"</span><span style="background-color: #fcfdff;">>
Logged Out</span>
</nav>
<div>
<router-outlet></router-outlet>
</div>
</span></pre>
</div>
<div style="text-align: justify;">
<div style="text-align: left;">
<span id="docs-internal-guid-95b1b07d-993a-5091-ebcd-a7b1f1f0b01a"><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">If user is logged in we are showing displayName else showing status as Logged Out. </span></span></span></div>
<div style="text-align: left;">
<span style="text-align: left;"><br />
</span></div>
<div style="text-align: left;">
<span style="text-align: left;">That's it.</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<i>Next tutorial will learn how to deploy Angular apps to Firebase and GitHub pages.</i><span style="text-align: left;"> </span></div>
</div>
</div>
</div>
</div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com0tag:blogger.com,1999:blog-8868980359797389728.post-24689943346030116602016-07-08T08:02:00.000-07:002018-04-08T10:33:26.800-07:00Implement GCM Push Notification for Websites<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">If you ask a developer what feature is missing in web application, the first answer is PUSH NOTIFICATION. Notification is a great way to engage users to your website. So today i'm explaining push notification using Google Cloud Messaging for websites.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/askadu/ninjacoders-images/blob/master/gcm-chrome.jpg?raw=true" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="346" data-original-width="640" height="345" src="https://github.com/askadu/ninjacoders-images/blob/master/gcm-chrome.jpg?raw=true" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; white-space: pre-wrap;"></span> Project structure:<br />
<div>
<a name='more'></a><br />
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: x-small;"><span style="white-space: pre-wrap;"><b>+-gcm-push-demo</b></span></span><br />
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: x-small;"><span style="white-space: pre-wrap;"><span style="color: orange;"> |+-----</span>images</span></span><br />
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: x-small;"><span style="white-space: pre-wrap;"><span style="color: orange;"> |+--------</span>icon192x192.png</span></span><br />
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: x-small;"><span style="white-space: pre-wrap;"><span style="color: orange;"> |+-----</span>index.html</span></span><br />
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: x-small;"><span style="white-space: pre-wrap;"><span style="color: orange;"> |+-----</span>manifest.json</span></span><br />
<span style="font-size: x-small;"><span style="color: orange;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial";"><span style="white-space: pre-wrap;"> |+-</span></span><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; white-space: pre-wrap;">-</span></span><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; white-space: pre-wrap;"><span style="color: orange;">---</span>myworker.js</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="font-family: inherit;"><span style="background-color: yellow;"><b><a href="https://app.box.com/s/pn19pahqpvbcpfrr3rprnuth2ax1u5og" target="_blank">Download Script</a></b></span> <span style="background-color: yellow;"><b><a href="https://ninjakoders.github.io/sample/gcm-push-demo/" target="_blank">Live Demo</a></b></span></span><br />
<span style="font-family: inherit;"><span style="background-color: yellow;"><br />
</span></span> <span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;"><b>Following are the steps we have to follow for implementing push messaging for </b></span><br />
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;"><b>chrome browser.</b></span><br />
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Check if browser supports service worker & push messaging.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Request user for push notification permission.</span></li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Register a service worker with your browser.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Get Server API key and Sender ID from GCM.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Create manifest file.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Subscribe for push messaging.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Write some code for myworker.js</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Integrate all peace of code.</span></li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Send push message to Website.</span></div>
</li>
</ol>
<div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><b>
</b></span></span></div>
<div style="text-align: left;">
<span id="docs-internal-guid-f2c06e6a-b672-2ea7-9f44-7761410d28a4"><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;"><b>Check if browser supports service worker and push messaging.</b></span></span></div>
<div>
<pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="color: #0066ff; font-style: italic;">//check if serviceWorker prsent in navigator</span>
<span style="color: blue; font-weight: 700;">if</span>(‘serviceWorker’ <span style="color: #687687;">in</span> <span style="color: #6d79de; font-weight: 700;">navigator</span>) {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(<span style="color: #036a07;">'service worker is supported'</span>);
} <span style="color: blue; font-weight: 700;">else</span> {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.warn</span>(<span style="color: #036a07;">'user denied the permission'</span>);
}
<span style="color: #0066ff; font-style: italic;">//check if push messaging supported or not</span>
<span style="color: blue; font-weight: 700;">if</span>(<span style="color: #036a07;">'pushManager'</span> <span style="color: #687687;">in</span> <span style="color: #6d79de; font-weight: 700;">window</span>) {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(<span style="color: #036a07;">'push messaging is supported'</span>);
}
<span style="color: blue; font-weight: 700;">else</span> {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(<span style="color: #036a07;">'push messaging is not supported'</span>);
}</span></pre>
<b><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px;">Request user for push notification permission.</span></b><br />
<pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;">Notification.requestPermission().then(<span style="color: blue; font-weight: 700;">function</span>(permission) {
<span style="color: blue; font-weight: 700;">if</span>(permission<span style="color: blue; font-weight: 700;"> ==</span>= <span style="color: #036a07;">'granted'</span>) {
<span style="color: blue; font-weight: 700;"> /</span><span style="color: blue; font-weight: 700;">/</span>here you can register your service worker
} <span style="color: blue; font-weight: 700;">else</span> {
console.log(<span style="color: #036a07;">'service worker not present'</span>);
}
});</pre>
</div>
<div>
<pre style="font-family: consolas, 'lucida console', 'dejavu sans mono', monaco, 'courier new', monospace; font-stretch: normal; line-height: 1.5em;"><span id="docs-internal-guid-f2c06e6a-b782-4cb7-8720-bab123f8fb44"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; white-space: pre-wrap;"><b>Register a service worker with your browser. </b></span></span></pre>
<pre style="font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;">Before registering a service worker with browser we will need service worker file which needs to be registered with service worker. Create a blank myworker.js file for now.</span></pre>
<pre style="font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;"><span style="color: #6d79de; font-weight: 700;">navigator</span>.serviceWorker.register(‘/myworker.js’).then(<span style="color: blue; font-weight: 700;">function</span>(registration){
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(‘service worker registered <span style="color: #687687;">with</span> scope: ‘, registration.<span style="color: #06960e; font-weight: 700;">scope</span>);
}).<span style="color: blue; font-weight: 700;">catch</span>(<span style="color: blue; font-weight: 700;">function</span>(err){
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.error</span>(‘service worker registration failed: ‘, err);
});</pre>
</span></pre>
<pre style="font-stretch: normal; line-height: 1.5em;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial";"><span style="white-space: pre-wrap;"><b>Get Server API key and Sender ID from GCM.</b></span></span></pre>
<pre style="font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-f2c06e6a-b7aa-453c-a42f-d0f357e3ca71"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">Generating server key and sender id is simple go to <a href="https://developers.google.com/cloud-messaging/android/client"><span style="background-color: yellow; color: blue;">GCM</span></a> websites and follow the instructions or you can follow my <a href="https://www.youtube.com/watch?v=FVHbgzXKkg8" style="background-color: yellow;" target="_blank">video tutorial</a>.</span></span></span></pre>
<pre style="font-family: consolas, 'lucida console', 'dejavu sans mono', monaco, 'courier new', monospace; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;"><b>Create a web manifest file.</b></span></pre>
<pre style="font-stretch: normal; line-height: 1.5em;"><span id="docs-internal-guid-f2c06e6a-b7ad-7b94-5a39-983626729ac0"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;">The web app manifest provides information about an application in a simple document. We have to add gcm_sender_id in manifest file for subscribing to GCM server.</span></span></pre>
<pre style="font-stretch: normal; line-height: 1.5em;"><span style="background-color: yellow; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;">manifest.json</span></pre>
<pre style="font-stretch: normal; line-height: 1.5em;"><pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;">{
<span style="color: #036a07;">"name"</span>: <span style="color: #036a07;">"Web Push Demo"</span>,
<span style="color: #036a07;">"short_name"</span>: <span style="color: #036a07;">"GCM Push"</span>,
<span style="color: #036a07;">"icons"</span>: [{
<span style="color: #036a07;">"src"</span>: <span style="color: #036a07;">"images/icon-192x192.png"</span>,
<span style="color: #036a07;">"sizes"</span>: <span style="color: #036a07;">"192x192"</span>,
<span style="color: #036a07;">"type"</span>: <span style="color: #036a07;">"image/png"</span>
}],
<span style="color: #036a07;">"start_url"</span>: <span style="color: #036a07;">"/index.html"</span>,
<span style="color: #036a07;">"display"</span>: <span style="color: #036a07;">"standalone"</span>,
<span style="color: #036a07;">"gcm_sender_id"</span>: <span style="color: #036a07;">"sender-id"</span>
}</pre>
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial";"><b>Subscribe to GCM for push messaging.</b> </span></pre>
<pre style="font-stretch: normal;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; white-space: pre-wrap;">Finally we have to subscribe to GCM server using subscribe() method on the <span style="color: blue;">PushManager</span> object through the <span style="color: blue;">serviceWorkerRegistration</span> object.</span></pre>
<pre style="font-stretch: normal; line-height: 1.5em;"></pre>
<pre style="font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; font-size: 14.6667px; line-height: 1.38; white-space: pre-wrap;"><pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;"><span style="color: #6d79de; font-weight: 700;">navigator</span>.serviceWorker.ready.then(<span style="color: blue; font-weight: 700;">function</span>(serviceWorkerRegistration){
serviceWorkerRegistration.pushManger.subscribe({userVisibleOnly:<span style="color: #585cf6; font-weight: 700;">true</span>})
.then(<span style="color: blue; font-weight: 700;">function</span>(subscription){
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(‘subscription successful: ‘, subscription);
}).<span style="color: blue; font-weight: 700;">catch</span>(<span style="color: blue; font-weight: 700;">function</span>(err){
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.error</span>(‘unable to subscribe to GCM’, err);
});
});</pre>
</span></pre>
<pre style="font-family: consolas, 'lucida console', 'dejavu sans mono', monaco, 'courier new', monospace; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-f2c06e6a-b7b5-b9cd-8dd0-0079ce9c3f75"><b><div>
<b style="line-height: 1.5em;">Write some code for myworker.js </b></div>
</b></span></span></pre>
<pre style="font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-f2c06e6a-b7bb-aa2c-c239-e96136340b62"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">myworker.js is the file which will be running in service worker thread of your web browser. Service worker is a javascript which is run by your browser in the background, write some code for receiving push message into your website.</span></span>
</span></pre>
<pre style="font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: yellow; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">myworker.js</span></span></pre>
<pre style="font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;">self.addEventListener(<span style="color: #036a07;">'push'</span>, <span style="color: blue; font-weight: 700;">function</span>(<span style="color: #6d79de; font-weight: 700;">event</span>) {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(<span style="color: #036a07;">'Push message received'</span>);
<span style="color: blue; font-weight: 700;">var</span> notificationTitle <span style="color: #687687;">=</span> <span style="color: #036a07;">'New Message'</span>;
<span style="color: blue; font-weight: 700;">const</span> notificationOptions <span style="color: #687687;">=</span> {
body: <span style="color: #036a07;">'Push mesage received'</span>,
icon: <span style="color: #036a07;">'./images/icon-192x192.png'</span>,
tag: <span style="color: #036a07;">'simple-push-demo-notification'</span>,
data: {
url: <span style="color: #036a07;">'http://ninjacoders.info'</span>
}
};
<span style="color: #6d79de; font-weight: 700;">event</span>.waitUntil(
Promise.<span style="color: #06960e; font-weight: 700;">all</span>([
self.registration.showNotification(
notificationTitle, notificationOptions)
])
);
});</pre>
<span id="docs-internal-guid-f2c06e6a-b7c0-6826-8d64-b8f30b2a80fb"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">Above code will register an event listener for push messages and whenever push message comes from GCM this event get triggered.</span></span></span></pre>
<pre style="font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 4px;">self.addEventListener(<span style="color: #036a07;">'notificationclick'</span>, <span style="color: blue; font-weight: 700;">function</span>(<span style="color: #6d79de; font-weight: 700;">event</span>) {
<span style="color: #6d79de; font-weight: 700;">event</span>.notification.<span style="color: #3c4c72; font-weight: 700;">close</span>();
<span style="color: blue; font-weight: 700;">var</span> clickResponsePromise <span style="color: #687687;">=</span> Promise.resolve();
<span style="color: blue; font-weight: 700;">if</span> (<span style="color: #6d79de; font-weight: 700;">event</span>.notification.<span style="color: #06960e; font-weight: 700;">data</span> <span style="color: #687687;">&</span><span style="color: #687687;">&</span> <span style="color: #6d79de; font-weight: 700;">event</span>.notification.<span style="color: #06960e; font-weight: 700;">data</span>.url) {
clickResponsePromise <span style="color: #687687;">=</span> clients.openWindow(<span style="color: #6d79de; font-weight: 700;">event</span>.notification.<span style="color: #06960e; font-weight: 700;">data</span>.url);
}
<span style="color: #6d79de; font-weight: 700;">event</span>.waitUntil(
Promise.<span style="color: #06960e; font-weight: 700;">all</span>([
clickResponsePromise
])
);
});</pre>
</span></pre>
<pre style="font-family: consolas, 'lucida console', 'dejavu sans mono', monaco, 'courier new', monospace; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-f2c06e6a-b7c2-413f-cd5c-6c4eb353aac1"><div dir="ltr" style="font-size: 14.6667px; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">Above code will register an event listener for notificationClick event and whenever user clicks on the notification window we will open a new web page.</span></div>
<b>Integrate all peace of code.</b></span></span></pre>
<pre style="font-family: "consolas" , "lucida console" , "dejavu sans mono" , "monaco" , "courier new" , monospace; font-stretch: normal; line-height: 1.5em; overflow: auto;"><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: yellow;">index.html</span></span></pre>
<pre style="font-family: consolas, 'lucida console', 'dejavu sans mono', monaco, 'courier new', monospace; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;"><pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 4px;"><pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 4px;"><span style="color: #1c02ff;"><!<span style="color: #888888;">DOCTYPE html</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">html</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">head</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">title</span>></span>Push Notification for Web Application<span style="color: #1c02ff;"></<span style="font-weight: 700;">title</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">link</span> <span style="font-style: italic;">rel</span>=<span style="color: #036a07;">"manifest"</span> <span style="font-style: italic;">href</span>=<span style="color: #036a07;">"/manifest.json"</span>></span>
<<span style="font-weight: 700;">script</span>>
<span style="color: #6d79de; font-weight: 700;">document</span>.addEventListener(<span style="color: #036a07;">'DOMContentLoaded'</span>, <span style="color: blue; font-weight: 700;">function</span>() {
<span style="color: #6d79de; font-weight: 700;">document</span>.querySelector(<span style="color: #036a07;">"#enablepush"</span>)
.addEventListener(<span style="color: #036a07;">'click'</span>, <span style="color: blue; font-weight: 700;">function</span>(e) {
<span style="color: blue; font-weight: 700;">if</span>(Notification.permission <span style="color: #687687;">!</span><span style="color: #687687;">==</span> <span style="color: #036a07;">'granted'</span>) {
Notification.requestPermission().then(<span style="color: blue; font-weight: 700;">function</span>(permission) {
<span style="color: blue; font-weight: 700;">if</span>(permission <span style="color: #687687;">===</span> <span style="color: #036a07;">'granted'</span> <span style="color: #687687;">&</span><span style="color: #687687;">&</span> <span style="color: #036a07;">'serviceWorker'</span> <span style="color: #687687;">in</span> <span style="color: #6d79de; font-weight: 700;">navigator</span>) {
<span style="color: #6d79de; font-weight: 700;">navigator</span>.serviceWorker.register(<span style="color: #036a07;">'myworker.js'</span>)
.then(initialiseState);
} <span style="color: blue; font-weight: 700;">else</span> {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(<span style="color: #036a07;">'service worker not present'</span>);
}
});
}
});
<span style="color: #0066ff; font-style: italic;">//get subscription token if already subscribed</span>
<span style="color: blue; font-weight: 700;">if</span>(Notification.permission <span style="color: #687687;">===</span> <span style="color: #036a07;">'granted'</span>) {
<span style="color: #6d79de; font-weight: 700;">navigator</span>.serviceWorker.ready.then(<span style="color: blue; font-weight: 700;">function</span>(registration) {
registration.pushManager.getSubscription()
.then(<span style="color: blue; font-weight: 700;">function</span>(subscription){
getToken(subscription);
});
});
}
});
<span style="color: blue; font-weight: 700;">function</span> <span style="color: #0000a2; font-weight: 700;">initialiseState</span>() {
<span style="color: #0066ff; font-style: italic;">//check if notification is supported or not</span>
<span style="color: blue; font-weight: 700;">if</span>(<span style="color: #687687;">!</span>(<span style="color: #036a07;">'showNotification'</span> <span style="color: #687687;">in</span> ServiceWorkerRegistration.<span style="color: #06960e; font-weight: 700;">prototype</span>)) {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.warn</span>(<span style="color: #036a07;">'Notificaiton are not supported'</span>);
<span style="color: blue; font-weight: 700;">return</span>;
}
<span style="color: #0066ff; font-style: italic;">//check if user has blocked push notification</span>
<span style="color: blue; font-weight: 700;">if</span>(Notification.permission <span style="color: #687687;">===</span> <span style="color: #036a07;">'denied'</span>){
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.warn</span>(<span style="color: #036a07;">'User has blocked the notification'</span>);
}
<span style="color: #0066ff; font-style: italic;">//check if push messaging is supported or not</span>
<span style="color: blue; font-weight: 700;">if</span>(<span style="color: #687687;">!</span>(<span style="color: #036a07;">'PushManager'</span> <span style="color: #687687;">in</span> <span style="color: #6d79de; font-weight: 700;">window</span>)) {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.warn</span>(<span style="color: #036a07;">'Push messaging is not supported'</span>);
<span style="color: blue; font-weight: 700;">return</span>;
}
<span style="color: #0066ff; font-style: italic;">//subscribe to GCM</span>
<span style="color: #6d79de; font-weight: 700;">navigator</span>.serviceWorker.ready
.then(<span style="color: blue; font-weight: 700;">function</span>(serviceWorkerRegistration) {
<span style="color: #0066ff; font-style: italic;">//call subscribe method on serviceWorkerRegistration object</span>
serviceWorkerRegistration.pushManager
.subscribe({userVisibleOnly: <span style="color: #585cf6; font-weight: 700;">true</span>})
.then(<span style="color: blue; font-weight: 700;">function</span>(subscription){
getToken(subscription);
}).<span style="color: blue; font-weight: 700;">catch</span>(<span style="color: blue; font-weight: 700;">function</span>(err){
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.error</span>(<span style="color: #036a07;">'Error occured while subscribe(): '</span>, err);
});
});
}
<span style="color: blue; font-weight: 700;">function</span> <span style="color: #0000a2; font-weight: 700;">getToken</span>(subscription) {
<span style="text-decoration: underline;">console</span><span style="color: #3c4c72; font-weight: 700;">.log</span>(subscription);
<span style="color: blue; font-weight: 700;">var</span> token <span style="color: #687687;">=</span> subscription.endpoint
.<span style="color: #3c4c72; font-weight: 700;">substring</span>(<span style="color: mediumblue;">40</span>, subscription.endpoint.<span style="color: #06960e; font-weight: 700;">length</span>);
<span style="color: #6d79de; font-weight: 700;">document</span>.querySelector(<span style="color: #036a07;">"#token"</span>).innerHTML <span style="color: #687687;">=</span> token;
}
</<span style="font-weight: 700;">script</span>>
<span style="color: #1c02ff;"></<span style="font-weight: 700;">head</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">body</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">h1</span>></span>Push Notification for Web Application<span style="color: #1c02ff;"></<span style="font-weight: 700;">h1</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">button</span> <span style="font-style: italic;">id</span>=<span style="color: #036a07;">"enablepush"</span>></span>Enable Push<span style="color: #1c02ff;"></<span style="font-weight: 700;">button</span>></span><span style="color: #1c02ff;"><<span style="font-weight: 700;">br</span> /></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">label</span> <span style="font-style: italic;">for</span>=<span style="color: #036a07;">"token"</span>></span>Registration ID<span style="color: #1c02ff;"></<span style="font-weight: 700;">label</span>></span>
<span style="color: #1c02ff;"><<span style="font-weight: 700;">textarea</span> <span style="font-style: italic;">id</span>=<span style="color: #036a07;">"token"</span> <span style="font-style: italic;">rows</span>=<span style="color: #036a07;">"6"</span> <span style="font-style: italic;">cols</span>=<span style="color: #036a07;">"40"</span>></<span style="font-weight: 700;">textarea</span>></span>
<span style="color: #1c02ff;"></<span style="font-weight: 700;">body</span>></span>
<span style="color: #1c02ff;"></<span style="font-weight: 700;">html</span>></span></pre>
</pre>
<b>Send push message to Website.</b></span></pre>
<pre style="font-stretch: normal; line-height: 1.5em;"><span style="vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Sending push notification we use GCM, we have to send post request to GCM along with authorization key (Server Key) and client token (i.e registration id)</span></span></pre>
<pre style="font-family: consolas, 'lucida console', 'dejavu sans mono', monaco, 'courier new', monospace; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;"><pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;">https:<span style="color: blue; font-weight: 700;">/</span><span style="color: blue; font-weight: 700;">/</span>gcm<span style="color: blue; font-weight: 700;">-</span><span style="color: #c5060b; font-weight: 700;">http</span>.<span style="color: #c5060b; font-weight: 700;">googleapis</span>.com<span style="color: blue; font-weight: 700;">/</span>gcm<span style="color: blue; font-weight: 700;">/</span>send
Content<span style="color: blue; font-weight: 700;">-</span>Type:application<span style="color: blue; font-weight: 700;">/</span>json
Authorization:key<span style="color: blue; font-weight: 700;">=</span>AIzaSyZ<span style="color: blue; font-weight: 700;">-</span>1u...fMwj0qwRt<span style="color: blue; font-weight: 700;">-</span>bJvir
{
<span style="color: #036a07;">"data"</span>:
{
<span style="color: #036a07;">"message"</span>: <span style="color: #036a07;">"How to create PayPal"</span>,
<span style="color: #036a07;">"url"</span>: <span style="color: #036a07;">"http://www.ninjacoders.info/"</span>
},
<span style="color: #036a07;">"to"</span> : <span style="color: #036a07;">"fzeh02y7_p4:APA91bE-KxSmlLoJFyZftBlUkNsVXW..."</span>
}</pre>
<pre style="background-color: #fbf9f3; border: 2px dashed lightgray; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', Monaco, 'Courier New', monospace; font-size: 0.9333em; font-stretch: normal; line-height: 1.5em; padding: 8px;"><span style="background-color: white; font-family: "consolas" , "lucida console" , "dejavu sans mono" , "monaco" , "courier new" , monospace; font-size: 0.9333em; line-height: 1.5em; white-space: pre-wrap;">curl "https://android.googleapis.com/gcm/send" --request POST --header "Authorization: key=server_key" --header "Content-Type: application/json" -d "{\"to\":\"client_token\"}"</span></pre>
<div dir="ltr" style="font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">For sending push messages to your website you have to make POST request from your server copy paste above 'curl' and place your server_key and client_token. You can also use this <a href="https://ninjakoders.github.io/sample/gcm-push-demo" style="background-color: yellow;">tool</a> and enter your server_key and client_token click on send notification button.</span>
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">Note: HTTPS is needed to register service worker on production but you can test it without HTTPS on your local server url should be </span><span style="color: #1155cc; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; text-decoration: underline; vertical-align: baseline;"><a href="http://localhost/" style="text-decoration: none;">http://localhost</a></span></div>
<div dir="ltr" style="font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;">You can use node </span><a href="https://www.npmjs.com/package/http-server" style="text-decoration: none;"><span style="color: #1155cc; font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; text-decoration: underline; vertical-align: baseline;">http-server</span></a><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline;"> for deploy the app or you can use any server like wampp, xampp, lampp.</span></div>
Final Words: </span></pre>
<pre style="font-family: consolas, 'lucida console', 'dejavu sans mono', monaco, 'courier new', monospace; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;">Integrate push notification in your website and engage more users.</span></pre>
<pre style="font-family: 'Open Sans',sans-serif,Helvetica,Arial; font-size: 17px; font-stretch: normal; line-height: 1.5em;"><span style="font-family: "open sans" , sans-serif , "helvetica" , "arial"; font-size: 17px; vertical-align: baseline; white-space: pre-wrap;">
</span></pre>
</div>
<div>
</div>
</div>
</div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com27tag:blogger.com,1999:blog-8868980359797389728.post-39452793149035853372014-01-12T12:47:00.000-08:002018-02-05T12:03:50.011-08:00How to install different theme on yii application?<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/rAvm51t5Cmo?feature=player_embedded' frameborder='0'></iframe><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">In web application, designing also has same importance as development because user interface matters. If UI is not user friendly then ultimately application won't be useful. Here i'll show you brand new theme installation on yii php framework.</span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">First we need some template compatible with yii framework. I found two template link which is free <a href="https://github.com/dmtrs/yii-themes">Theme1</a> <a href="http://www.webapplicationthemes.com/hebo-responsive-html5-theme/">Theme2</a> download both templates from given links. After downloading complete follow the steps</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<style type="text/css">P { margin-bottom: 0.21cm; }A:link { }</style>
</div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">Steps</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">1. First go to your yii app folder
where you've installed yii framework app( for installation read my
<a href="http://akshaykadu.blogspot.in/2014/01/how-to-install-yii-framework-ubuntu.html">first blog installaiton</a>)</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">2. Copy template folder and paste it
into the theme directory which exist in your app folder (/opt/lampp/htdocs/yiiapp/themes/)</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;"><br /></span>
<br />
<a name='more'></a><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">3. open protected folder and find
config directory and open it, in config directory there is one
main.php file open it in any text editor.(/opt/lampp/htdocs/yiiapp/protected/config/main.php)</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">4. make following changes in the
main.php ('theme'=>'themename',) here is the screen shoot of main.php file</span></div>
<div style="margin-bottom: 0cm;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/theme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="245" data-original-width="582" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/theme.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0cm;">
<span style="font-size: large;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<style type="text/css">P { margin-bottom: 0.21cm; }A:link { }</style>
</div>
<div style="margin-bottom: 0cm;">
<span style="font-size: large;">5. It simply route your theme folder
and find cleangrad if found load it</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: large;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: large;">6. check theme has been installed successfully. (http://127.0.0.1/yiiapp/) </span><br />
<br />
<br /></div>
<div style="margin-bottom: 0cm;">
<br /></div>
</div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com28tag:blogger.com,1999:blog-8868980359797389728.post-38913309154334410882014-01-08T12:39:00.000-08:002018-02-05T12:01:51.323-08:00How to install yii php framework on ubuntu linux?<div dir="ltr" style="text-align: left;" trbidi="on">
<h5 class="western">
Yii helps Web developers build complex
applications and deliver them on-time.</h5>
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/k37OEf2wpHk?feature=player_embedded' frameborder='0'></iframe><b>Yii</b> is pronounced as Yee or [ji:], and is an
acroynym for "<b>Yes It Is!</b>". This is often
the accurate, and most concise response to inquires from those new to
Yii: <br />
Is it fast? ... Is it secure? ... Is it professional? ... Is
it right for my next project? ... <b>Yes, it is!</b><br />
<br />
Yii is a free, open-source Web application development framework
written in PHP5 that promotes clean, <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a>
design and encourages rapid development. It works to streamline your
application development and helps to ensure an extremely efficient,
extensible, and maintainable end product.<br />
<br />
<span style="font-size: large;"><b>Steps to install yii php framework on ubuntu</b></span><br />
<span style="font-size: large;"><b><br /></b></span>
<br />
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">1. Dowanload the latest version of yii
framework from <a href="http://www.yiiframework.com/">http://www.yiiframework.com</a></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"></span><br />
<a name='more'></a><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">2. Extract downloaded yii framework tar.gz file in same directory</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/extract.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="101" data-original-width="736" height="53" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/extract.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">3. Rename extracted folder as <span style="background-color: yellow;">yii</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/rename.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="111" data-original-width="736" height="60" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/rename.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">4. Move yii folder to root directory of
your webserver (<span style="background-color: yellow;">opt/lampp/htdocs</span>/yii)</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/Move.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="103" data-original-width="733" height="55" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/Move.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">5. Create a new folder as name <span style="background-color: yellow;">appyii</span> in root directory (appyii will contain yii framework files)</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<br />
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">6. Apply yii framework to your
<span style="background-color: yellow;">appyii</span> folder by <span style="background-color: yellow;">yiic.php webapp file using php cli</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/install.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="166" data-original-width="736" height="90" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/install.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">7. Test that the installation has been done (http://127.0.0.1/<span style="background-color: yellow;">appyii</span>)</span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/yii_test.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="444" data-original-width="800" height="221" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/yii_test.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0cm;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="margin-bottom: 0cm;">
<span style="background-color: orange; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Note: if php command line interpreter not installed</span></div>
<h1 style="color: #666666; font-family: helvetica, verdana, sans-serif; font-size: 16px; padding-top: 10px;">
PHP command line installation on Ubuntu Linux</h1>
<div>
<span style="color: #999999;">The PHP command-line interpreter runs PHP scripts from the command line.</span></div>
<div>
<span style="color: #999999;">copy and paste the following command to your terminal</span></div>
<div>
<pre class="terminal" style="background-color: black; border: 1px solid black; color: white; font-size: 11px; list-style-type: none; margin-bottom: 5px; margin-right: 5px; margin-top: 5px; overflow: auto; padding: 0.5em;">sudo apt-get install php5-cli</pre>
</div>
<div>
<span style="background-color: yellow; color: #222222; font-family: "verdana" , sans-serif; font-size: 13px; line-height: 22px; text-align: justify;">In the next lesson i will show you how to configure yii php framework </span><br />
<span style="background-color: yellow; color: #222222; font-family: "verdana" , sans-serif; font-size: 13px; line-height: 22px; text-align: justify;"><br /></span></div>
<div>
<span style="color: #999999;"><br /></span></div>
</div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com9Somalwada, Nagpur, Maharashtra, India21.100355948592078 79.088001251220721.085541948592077 79.06783125122071 21.115169948592079 79.1081712512207tag:blogger.com,1999:blog-8868980359797389728.post-820977413772807432013-09-11T02:40:00.004-07:002018-02-05T11:56:11.713-08:00How to run php program?<div dir="ltr" style="text-align: left;" trbidi="on">
I already introduced about <a href="http://akshaykadu.blogspot.in/2013/05/what-is-php_14.html">what is PHP </a> and how to install <a href="http://akshaykadu.blogspot.in/2013/05/how-to-get-started-with-php.html">XAMPP</a>, Now in this tutorial i'll tell you how to write PHP program and run in the local server.<br />
<br />
<b>Step 1</b><br />
Assume you have installed XAMPP in C drive<br />
Go to <span style="color: blue;">C:\xampp\htdocs</span><br />
<br />
Create your own folder, name it as <b>akshay </b><br />
<br />
<br />
<a name='more'></a><br />
<br />
<b>Stpe 2</b><br />
Now write your first php program in notepad and save it to folder <b>akshay </b>name<b> </b>as "<span style="background-color: yellow;">test.php</span>"<br />
<br />
<hr style="background-color: white; border-color: rgb(215, 215, 215); border-style: none none dashed; color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<html></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<head></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<title> My first php program </title></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
</head></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<body></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<?php</div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
echo "<h3> PHP program to add tow real numbers.. </h3><br/>";</div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
$a = 10;</div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
$b = 12;</div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
$c = $a + $b; //assignment operator</div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
echo "Addition:" . $c;</div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
?></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
</body></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
</html></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<hr style="border-color: rgb(215, 215, 215); border-style: none none dashed; color: white;" />
<div style="color: #666666;">
<br /></div>
<div>
<b>Step 3</b></div>
<div>
Now double click on "XAMPP CONTROL PANEL" on desktop and START "Apache"</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_control.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="361" data-original-width="456" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_control.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
<br /></div>
</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<b>Step 4</b></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
Type <span style="color: blue;">localhost </span>on your browser and press enter:</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
It will show you the following:</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="438" data-original-width="456" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_page.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<b>Step 5</b></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
Now type the following on the address bar in browser</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<b><span style="color: blue;">http://localhost/akshay/</span></b></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
Below Screenshot shows php files created under folder "<b>akshay</b>"</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/akshay.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="254" data-original-width="400" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/akshay.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<b>Step 6</b></div>
<div style="font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<span style="background-color: white;">Click on "</span><span style="background-color: yellow;">test.php</span><span style="background-color: white;">" and it will give you following output</span></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/test.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="255" data-original-width="400" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/test.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br /></div>
<div style="background-color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 12px; line-height: 19px; text-align: justify;">The RESULT is 22 by adding both the values.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 12px; line-height: 19px; text-align: justify;">This way you can run your php program in XAMPP server…</span></div>
</div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com1tag:blogger.com,1999:blog-8868980359797389728.post-79025126739484784712013-05-28T14:31:00.002-07:002018-02-05T11:54:05.191-08:00How to get started with PHP<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; line-height: 16px;"><span style="font-family: "verdana" , sans-serif;">PHP does not come pre-installed on Windows systems. To work with PHP on Windows, PHP will need to be manually downloaded and installed. instead of downloading separate PHP we will download XAMPP, it is a free and open source cross-platform web server solution stack package. ( its a bundle which contains all the required libraries to run a PHP program) </span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; line-height: 16px;"><span style="font-family: "verdana" , sans-serif;">XAMPP's name is an acronym for</span></span></div>
<div style="text-align: justify;">
<br /></div>
<ul style="text-align: left;">
<li style="text-align: justify;"><span style="color: #333333; font-family: "verdana" , sans-serif;"><span style="line-height: 16px;">X- (to be read as "cross", meaning cross-platform)</span></span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: "verdana" , sans-serif;"><span style="line-height: 16px;">A- Apache HTTP Server</span></span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: "verdana" , sans-serif;"><span style="line-height: 16px;">M- MySQL</span></span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: "verdana" , sans-serif;"><span style="line-height: 16px;">P- PHP</span></span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: "verdana" , sans-serif;"><span style="line-height: 16px;">P- Perl</span></span></li>
</ul>
<div>
<div style="text-align: justify;">
<span style="color: #333333; font-family: "verdana" , "trebuchet ms" , "arial" , sans-serif; font-size: large;"><span style="line-height: 16px;">How to Install XAMPP ?</span></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="color: #333333; font-family: "verdana" , "trebuchet ms" , "arial" , sans-serif; font-size: large;"><span style="line-height: 16px;"></span></span><br /></div>
<a name='more'></a><div style="text-align: justify;">
<span style="color: #333333; font-family: "verdana" , "trebuchet ms" , "arial" , sans-serif; font-size: large;"><span style="line-height: 16px;"><br /></span></span></div>
</div>
<div>
<ol style="font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 10px; padding: 0px 0px 0px 1.4em;">
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Download the software from: </strong><a href="http://www.apachefriends.org/en/xampp-windows.html#641" style="border-bottom-color: rgb(74, 69, 52); border-bottom-style: dotted; border-bottom-width: 1px; color: #5d2620; text-decoration: none;">http://www.apachefriends.org/en/xampp-windows.html#641</a></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">Select the <strong>Installer</strong> option under the Basic Package. You may be taken to a page that presents you with a bunch of different download locations. Just click one of the download buttons, and then save the file to your desktop. Once downloaded, the installer works like most Windows installers.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
<div class="note" style="background-color: white; border: 1px dashed rgb(93, 38, 32); margin-bottom: 15px; padding: 10px;">
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">In Internet Explorer, you may get a warning about downloading the file. Click the yellow information bar that appears above the Web page in IE, and choose Download File…</span></div>
</div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Double-click the .exe file you downloaded</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">A window opens, asking you to select the language you’d like to use.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
<div class="note" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px dashed rgb(93, 38, 32); margin-bottom: 15px; padding: 10px;">
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">If a warning dialog appears click the "Allow" option to install XAMPP.</span></div>
</div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Choose a language from the menu, and then click OK</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">A Setup Wizard window appears, ready to step you through the setup process.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
<div class="note" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px dashed rgb(93, 38, 32); margin-bottom: 15px; padding: 10px;">
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">In Vista you may see a message warning you that XAMPP may not work when installed in the C:\Program Files directory. The default installation is in C:\XAMPP so you don’t have to worry about this problem.</span></div>
</div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Click the Next button</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">The installer suggests putting the application on your main drive at C:\XAMPP. You can pretty much install it anywhere, but with the Vista operating system you may encounter problems if you install it in C:\Program Files.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Click the Next button once again</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">The XAMPP Options window appears (see below). In most cases, it’s fine to leave all the window’s checkboxes just as you see; see the note below for details.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
<div class="note" style="background-color: white; border: 1px dashed rgb(93, 38, 32); margin-bottom: 15px; padding: 10px;">
<div style="font-family: ff-meta-serif-web-pro-1, ff-meta-serif-web-pro-2, serif; margin-bottom: 15px; margin-top: 15px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_install.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="503" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_install.png" /></a></div>
<div class="separator" style="clear: both; font-family: ff-meta-serif-web-pro-1, ff-meta-serif-web-pro-2, serif; text-align: center;">
</div>
<div style="margin-bottom: 15px; margin-top: 15px; padding: 0px;">
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">If you plan on doing a lot of development, day in and day out, you might want to turn on the “Install Apache as service” and “Install MySQL as service” checkboxes. A service starts up every time you turn on your computer, so Apache, PHP, and MySQL are always running. However, if you won’t be building database sites frequently, or you don’t have a lot of RAM in your computer, don’t turn on these boxes (you’ll just have to manually start the servers when you wish to build dynamic pages, using the XAMPP control panel described on the next page).</span></div>
</div>
<div style="margin-bottom: 15px; margin-top: 15px; padding: 0px;">
</div>
</div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Click Install</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">The installer places all the files onto your system. This process takes a while, since a lot of programs and files are being installed.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Finally, click the Finish button</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">A window appears “congratulating” you (way to double-click the installer program!), and asking whether you wish to start the XAMPP Control panel.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">Click Yes, to open the XAMPP Control Panel (see </strong><span style="font-family: "verdana" , sans-serif;">screenshot below</span><strong style="font-family: Verdana, sans-serif;">)</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">The XAMPP Control Panel lets you start and stop the Apache Web server and MySQL database server.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
<div class="note" style="background-color: white; border: 1px dashed rgb(93, 38, 32); margin-bottom: 15px; padding: 10px;">
<div style="font-family: ff-meta-serif-web-pro-1, ff-meta-serif-web-pro-2, serif; margin-bottom: 15px; margin-top: 15px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_control.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="361" data-original-width="456" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_control.png" /></a></div>
<div class="separator" style="clear: both; font-family: ff-meta-serif-web-pro-1, ff-meta-serif-web-pro-2, serif; text-align: center;">
</div>
<div style="margin-bottom: 15px; margin-top: 15px; padding: 0px;">
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">In this figure, both Apache and MySQL are currently NOT running, as indicated by the word Start to the right of their names. Click the Start buttons to turn the servers on. You can open the Control Panel by clicking the XAMPP Control Panel shortcut on your desktop.</span></div>
</div>
<div style="margin-bottom: 15px; margin-top: 15px; padding: 0px;">
</div>
</div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">If the buttons to the right of Apache and MySQL say Start, click them to start the Web server and the MySQL database server</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">You probably get a Windows security alert about both MySQL and Apache: Click the Unblock button in both cases. This action allows the two servers to run, and tells the Windows firewall protection service that everything is OK.If Apache and MySQL are already running, these buttons say Stop. (Clicking them turns off the Web server and MySQL.) Whenever you start Apache, PHP automatically starts as well. At this point, you should have a complete testing server running on your machine. You just need to make sure it’s working.</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
</li>
<li style="color: #26261f; line-height: 22px; margin: 10px 0px 0px; padding: 0px;"><div style="margin-bottom: 15px; padding: 0px;">
<br />
<div style="text-align: justify;">
<strong style="font-family: Verdana, sans-serif;">To do so, launch a Web browser, and, in the Location bar, type http://localhost/</strong><span style="font-family: "verdana" , sans-serif;">.</span></div>
<span style="font-family: "verdana" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">You encounter a page that lists a bunch of languages; click the language you prefer, and you’re taken to a kind of Web-based control panel for XAMPP (see screenshot below).</span></div>
<span style="font-family: "verdana" , sans-serif;">
</span></div>
<div class="note" style="background-color: white; border: 1px dashed rgb(93, 38, 32); margin-bottom: 15px; padding: 10px;">
<div style="font-family: ff-meta-serif-web-pro-1, ff-meta-serif-web-pro-2, serif; margin-bottom: 15px; margin-top: 15px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="438" data-original-width="456" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/xampp_page.png" /></a></div>
<div class="separator" style="clear: both; font-family: ff-meta-serif-web-pro-1, ff-meta-serif-web-pro-2, serif; text-align: center;">
</div>
<div style="margin-bottom: 15px; margin-top: 15px; padding: 0px;">
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">Once installed, you can view your XAMPP home page from http://localhost/xampp/. From the left-hand list of links, you can access helpful programs and information, such as phpMyAdmin (for working with the MySQL database) and phpinfo() for finding out more about the server setup.</span></div>
</div>
<div style="margin-bottom: 15px; margin-top: 15px; padding: 0px;">
</div>
</div>
</li>
</ol>
<div style="line-height: 22px; margin-bottom: 15px; padding: 0px;">
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">Once you’ve installed XAMPP, you’ll see a shortcut called XAMPP Control Panel on your desktop. Double-click this icon to control the servers you’ve just installed—you can turn the servers off and on, as well as turn them into services (which launch each time you start up your computer).</span></div>
</div>
<div style="line-height: 22px; margin-bottom: 15px; padding: 0px;">
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="font-family: "verdana" , sans-serif;">The next lesson is about how to Write and Run PHP programs </span></span></div>
</div>
</div>
</div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com1tag:blogger.com,1999:blog-8868980359797389728.post-80732435155702528202013-05-14T08:40:00.000-07:002018-02-05T11:51:05.658-08:00What is PHP<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 1.75em; font-weight: 100;">
<span style="font-size: 14px; font-weight: normal; text-align: justify;">Whenever anyone is learning PHP, the most common questions that first come up are: What is PHP? And how does it work?</span></h2>
<div style="background-color: white; font-size: 14px; text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">It is precisely these questions we will look at in this lesson. It's a big help to understand such basics related to PHP before you start developing you own PHP pages. Such basic understanding will increase the speed of learning significantly.</span></div>
<div style="background-color: white; font-size: 14px; text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">So, let's get started!</span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 14px; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/php-logo.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="140" data-original-width="200" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/php-logo.jpeg" /></a></div>
<br />
<a name='more'></a><br /></div>
<div style="font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 14px; text-align: justify;">
</div>
<h2 style="background-color: white; font-size: 1.75em; font-weight: 100; text-align: start;">
What is PHP?</h2>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">PHP was originally an acronym for <strong>P</strong>ersonal <strong>H</strong>ome <strong>P</strong>ages, but is now a recursive acronym for <strong>P</strong>HP: <strong>H</strong>ypertext <strong>P</strong>reprocessor.</span></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">PHP was originally developed by the Danish Greenlander Rasmus Lerdorf, and was subsequently developed as open source. PHP is not a proper web standard - but an open-source technology. PHP is neither real programming language - but PHP lets you use so-called scripting in your documents.</span></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">To describe what a PHP page is, you could say that it is a file with the extension <strong>.php</strong> that contains a combination of HTML tags and scripts that run on a web server.</span></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
</div>
<h2 style="background-color: white; font-size: 1.75em; font-weight: 100; text-align: start;">
<span style="font-family: "verdana" , sans-serif;">
How does PHP work?</span></h2>
<div style="background-color: white; text-align: start;">
<span style="font-family: "verdana" , sans-serif;">The best way to explain how PHP works is by comparing it with standard HTML. Imagine you type the address of an HTML document (e.g.<strong>http://www.rozainfotech.com/index.html</strong>) in the address line of the browser. This way you <strong>request</strong> an HTML page. It could be illustrated like this:</span></div>
<div style="background-color: white; text-align: start;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/html_page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="202" data-original-width="412" height="195" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/html_page.png" width="400" /></a></div>
<div class="separator" style="background-color: white; clear: both; text-align: center;">
</div>
<div style="background-color: white; text-align: start;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; text-align: center;">
</div>
<div style="text-align: start;">
</div>
<div style="background-color: white;">
<span style="font-family: "verdana" , sans-serif;">As you can see, the server simply sends an HTML file to the client. But if you instead type <strong>http://www.rozainfotech.com/index.php</strong> - and thus request an <strong>PHP page</strong> - the server is put to work:</span></div>
<div style="background-color: white;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/php_page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="202" data-original-width="412" height="195" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/php/php_page.png" width="400" /></a></div>
<div class="separator" style="background-color: white; clear: both; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; text-align: center;">
<br /></div>
<div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">The server first reads the PHP file carefully to see if there are any tasks that need to be executed. Only when the server has done what it is supposed to do, the result is then sent to the client. It is important to understand that the client only sees the <strong>result</strong> of the server's work, not the actual instructions.</span></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">This means that if you click "view source" on a PHP page, you do not see the PHP codes - only basic HTML tags. Therefore, you cannot see how a PHP page is made by using "view source". You have to learn PHP in other ways, for example, by reading this article(tutorial).</span></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="background-color: white; text-align: justify;">
<strong><span style="font-family: "verdana" , sans-serif;">What you learn in this tutorial is to write commands to a server!</span></strong></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">So, the first thing you need to get a hold of is... a server! But don't worry - you don't need to buy a new computer. You just need to install some software on your computer that makes it function as a server. Another option is to have a website on a hosted server that supports PHP. Then you just need to be online while coding.</span></div>
<div style="background-color: white; text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: yellow; font-family: "verdana" , sans-serif;">The next lesson is about how to get start with PHP</span></div>
</div>
<br />
<br />
<br /></div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com7tag:blogger.com,1999:blog-8868980359797389728.post-19874478925285923162013-05-09T11:27:00.000-07:002018-02-05T11:46:37.616-08:00What is Foreign Key?<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
<strong style="border: 0px none; font-family: inherit; font-size: 15.555556297302246px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px;">What's in a Database?</strong></div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
a database is a container that holds tables and other SQL structures related to those tables.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/total.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="287" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/total.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<br />
<div style="border: 0px none; outline: 0px; padding: 0px;">
<span style="color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">An easier way to diagram </span><span style="background-color: yellow; line-height: 23.984375px;">account</span><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;"> table</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/first.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/first.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="border: 0px none; outline: 0px; padding: 0px;">
<span style="color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">Every one having different hobbies. Remove the </span><span style="background-color: yellow; line-height: 23.984375px;">hobbies</span><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;"><span style="background-color: yellow;"> </span>column and put it in its own table</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/three.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="179" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/three.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
<span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">Add name column that will let us identify which <span style="background-color: yellow;">hobbies </span>belong to which person in the <span style="background-color: yellow;">account </span>table.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/four.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="215" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/four.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
<span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">Linking two tables in a diagram</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/five.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="173" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/five.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
<span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">Connecting Two tables</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/SIX.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="239" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/SIX.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="border: 0px none; outline: 0px; padding: 0px;">
</div>
<div style="border: 0px none; outline: 0px; padding: 0px;">
<span style="color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">The problem we're trying to use </span></span><strong style="border: 0px none; color: #1e1e1e; font-family: inherit; font-size: 15.555556297302246px; font-style: inherit; font-weight: inherit; line-height: 23.99305534362793px; margin: 0px; outline: 0px; padding: 0px;">name</strong><span style="color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;"> field to somehow let use connect the two tables. But what if two people in the </span><span style="background-color: yellow; line-height: 23.984375px;">account</span><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;"><span style="background-color: yellow;"> </span>table have the same </span></span><strong style="border: 0px none; color: #1e1e1e; font-family: inherit; font-size: 15.555556297302246px; font-style: inherit; font-weight: inherit; line-height: 23.99305534362793px; margin: 0px; outline: 0px; padding: 0px;">name</strong><span style="color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;"> ?</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/seven.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="212" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/seven.png" /></a></div>
<div class="separator" style="clear: both; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; text-align: center;">
<br /></div>
<div>
<div style="border: 0px none; outline: 0px; padding: 0px;">
<span style="border: 0px none; margin: 0px; outline: 0px; padding: 0px;"><span style="color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="line-height: 23.984375px;">Foreign</span></span><b style="color: #1e1e1e; font-family: inherit; font-size: 15.555556297302246px; font-style: inherit; font-weight: inherit; line-height: 23.99305534362793px;"> Key Facts :</b></span></div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
A foreign key can have a different name that the primary key it comes form.</div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
The primary key used by a foreign key is also known as a parent key. the table where the primary key is from is knows as a parent table.</div>
<div style="border: 0px none; outline: 0px; padding: 0px;">
<span style="color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">The </span><span style="line-height: 23.984375px;">foreign</span><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;"> key can be used to make sure that the rows in on table have corresponding rows in another table.</span></span></div>
<div style="border: 0px none; outline: 0px; padding: 0px;">
<span style="background-color: lime; color: #1e1e1e; font-family: "muli" , "arial" , "times new roman" , "times" , "arial" , serif;"><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;">Foreign key values can be null, even </span><span style="line-height: 23.984375px;">though</span><span style="font-size: 15.555556297302246px; line-height: 23.99305534362793px;"> primary key values can't.</span></span></div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
<span style="background-color: lime;">Foreign key don't have to be unique.</span></div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
<br /></div>
<div style="border: 0px none; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; outline: 0px; padding: 0px;">
<br /></div>
<div style="border: 0px none; outline: 0px; padding: 0px;">
</div>
<div class="code" style="border: 2px dashed rgb(222, 222, 222); margin: 0px; outline: 0px; padding: 10px; width: 547px; word-wrap: break-word;">
<br style="border: 0px none; font-family: inherit; font-size: 13.333333969116211px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px;" />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">CREATE TABLE </span></span><span style="color: #993399; font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">account</span></span><span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">(</span></span><br />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">user_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,</span></span><br />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">name VARCHAR(20),</span></span><br />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">email VARCHAR(30),</span></span><br />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">birthday DATE,</span></span><br />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">gender VARCHAR(10),</span></span><br />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 16px;">city VARCHAR(30));</span></span></div>
<br style="border: 0px none; font-size: 15.555556297302246px; line-height: 23.99305534362793px; margin: 0px; outline: 0px; padding: 0px;" />
<br />
<div style="border: 0px none; outline: 0px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/eight.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="167" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/eight.png" /></a></div>
<div class="separator" style="clear: both; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; text-align: center;">
<br /></div>
<div class="code" style="border: 2px dashed rgb(222, 222, 222); margin: 0px; outline: 0px; padding: 10px; width: 547px; word-wrap: break-word;">
<br style="border: 0px none; font-size: 13.333333969116211px; line-height: 15.989583969116211px; margin: 0px; outline: 0px; padding: 0px;" />
<span style="color: black; font-family: "courier" , monospace , "courier new"; font-size: 13.333333969116211px; line-height: 15.989583969116211px;">CREATE TABLE </span><span style="border: 0px none; color: #993399; font-family: "courier" , monospace , "courier new"; font-size: 13.333333969116211px; line-height: 15.989583969116211px; margin: 0px; outline: 0px; padding: 0px;">hobbies</span><span style="color: black; font-family: "courier" , monospace , "courier new"; font-size: 13.333333969116211px; line-height: 15.989583969116211px;">(</span><br />
<span style="color: black; font-family: "courier" , monospace , "courier new"; font-size: 13.333333969116211px; line-height: 15.989583969116211px;">hob_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,hobby VARCHAR(100) NOT NULL,</span><br />
<span style="color: black; font-family: "courier" , monospace , "courier new"; font-size: 13.333333969116211px; line-height: 15.989583969116211px;">user_id INT NOT NULL,</span><br />
<span style="color: black; font-family: "courier" , monospace , "courier new"; font-size: 13.333333969116211px; line-height: 15.989583969116211px;">CONSTRAINT account_user_id_fK</span><br />
<span style="color: black; font-family: "courier" , monospace , "courier new"; font-size: 13.333333969116211px; line-height: 15.989583969116211px;">FOREIGN KEY(user_id)</span><br />
<span style="font-family: "courier" , monospace , "courier new"; font-size: x-small;"><span style="line-height: 15.989583969116211px;">REFERENCES </span><span style="line-height: 15.984375px;">account</span><span style="line-height: 15.989583969116211px;">(user_id));</span></span></div>
<div class="separator" style="clear: both; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/ten.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="178" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/db/ten.png" /></a></div>
<div class="separator" style="clear: both; color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px; text-align: center;">
</div>
<br style="border: 0px none; font-size: 15.555556297302246px; line-height: 23.99305534362793px; margin: 0px; outline: 0px; padding: 0px;" />
<div style="color: #1e1e1e; font-family: Muli, Arial, 'Times New Roman', Times, Arial, serif; font-size: 15.555556297302246px; line-height: 23.99305534362793px;">
</div>
<br style="border: 0px none; color: black; font-family: Courier, monospace, 'Courier New'; font-size: 13.333333969116211px; line-height: 15.989583969116211px; margin: 0px; outline: 0px; padding: 0px;" /></div>
<br /></div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com3tag:blogger.com,1999:blog-8868980359797389728.post-73521826032556172722013-05-09T11:02:00.001-07:002018-02-05T11:42:33.652-08:00What is an Object??<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">Before the development of Object Oriented programming, the variables were considered as isolated entities. For example, suppose a program needs to handle data in car manufacturing company, here testing the cars having number, Color, Speed. Three separated variables will be declared for this.</span><br />
<br style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<b style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">int number,speed;<br />String color;</b><br />
<b style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/common/car_cut.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="103" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/common/car_cut.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<b style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;"></b><br />
<a name='more'></a><b style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;"><br /></b>
<b style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">These two statements do two things:</b><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">1)It says that the variable number and speed are integers and color is a string variable.</span><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">2)It also allocates storage for these variables.</span><br />
<br style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<b style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">This approach has two disadvantages:</b><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">If the program needs to keep track of various cars records. There will be more declarations that would be needed for each car, for example.</span><br />
<br style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">int number1,speed1;</span><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">String color1;</span><br />
<br style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">int number2,speed2;</span><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">String color2;</span><br />
<br style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<b style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">This approach can become very cumbersome.</b><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">The other drawback is that this approach completely ignores the fact that the three variables number,speed and color, are related and are a data associated with a single car.</span><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">In order to address these to drawbacks java use a class to create new types. For example to define a type that represents a car, we need storage space for two integers and a string. this is defined as follows:</span><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;"><br /></span>
<br />
<hr style="background-color: white; border-color: rgb(215, 215, 215); border-style: none none dashed; color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
class <span style="color: red;">Car</span><br />
{<br />
int number;<br />
int speed;<br />
String color;<br />
}</div>
<hr style="background-color: white; border-color: rgb(215, 215, 215); border-style: none none dashed; color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
A variable can be declared as of type car as follows:</div>
<br />
<br />
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<br />
<b>Car c,c1;</b><br />
<br />
The car variables of this class(number,speed and color) can be accessed using the dot(<b>.</b>) operator.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/common/remoteobject.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="126" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/common/remoteobject.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<strong style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">Creating an Object</strong><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;">The allocaton of memory of the reference type does not happen when the reference types are declared, as was the case of the primitive types, Simple diclaration of Non-primitive types does not allocate meomory space for the object.</span><br />
<span style="background-color: white; color: #666666; font-family: "helvetica neue" , sans-serif; font-size: 14px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/common/link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="107" data-original-width="320" src="https://raw.githubusercontent.com/askadu/ninjacoders-images/master/common/link.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
In fact, a variable that is declared with a class type is not the data itself, but it is a<br />
<br />
reference to the data, The actual storage is allocated to the object as follows.<br />
<br />
<b>Car c;<br />c=new Car();</b><br />
<br />
The first statement just allocates enough space for the reference. The second statement allocates the space, called an <b>Object</b>, for the two integers and a string. After these two statements are executed, the contents of the Car can be accessed through <b>c</b>.<br />
<br />
Example using Object.<br />
<br />
Let us now write a example that creates an object of the class Car and display the<br />
<br />
number,speed, etc....</div>
<hr style="background-color: white; border-color: rgb(215, 215, 215); border-style: none none dashed; color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
class <span style="color: red;">Car</span><br />
{<br />
int number;<br />
int speed;<br />
String color;<br />
<br />
void <span style="color: blue;">print_Number</span>()<br />
{<br />
System.out.println("Car Number = " + number);<br />
}<br />
<br />
void <span style="color: blue;">print_Speed</span>()<br />
{<br />
System.out.println("Car Speed = " + speed);<br />
}<br />
<br />
void <span style="color: blue;">Stop</span>()<br />
{<br />
System.out.println("Car Stopped");<br />
}<br />
<br />
void <span style="color: blue;">Horn</span>()<br />
{<br />
System.out.println("Hooooooo.......rn");<br />
}<br />
<br />
void <span style="color: blue;">Go</span>()<br />
{<br />
System.out.println("Car Going");<br />
}<br />
}<br />
<br />
<br />
public class <span style="color: green;">Object_Car</span><br />
{<br />
public static void main(String args[])<br />
{<br />
Car c;<br />
c=new <span style="color: red;">Car</span>();<br />
c.number=401;<br />
c.speed=90;<br />
c.<span style="color: blue;">print_number</span>();<br />
c.<span style="color: blue;">print_speed</span>();<br />
c.<span style="color: blue;">Horn</span>();<br />
c.<span style="color: blue;">Stop</span>();<br />
<br />
Car c1;<br />
c1=new <span style="color: red;">Car</span>();<br />
c1.number=402;<br />
c1.speed=80;<br />
c1.<span style="color: blue;">print_number</span>();<br />
c1.<span style="color: blue;">print_speed</span>();<br />
c1.<span style="color: blue;">Go</span>();<br />
c1.<span style="color: blue;">Horn</span>();<br />
<br />
}<br />
}</div>
<hr style="background-color: white; border-color: rgb(215, 215, 215); border-style: none none dashed; color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;" />
<div style="background-color: white; color: #666666; font-family: 'Helvetica Neue', sans-serif; font-size: 14px;">
<b>Output</b>:<br />
>javac Object_Car.java<br />
>java Object_Car<br />
<br />
Car Number = 401<br />
Car Speed = 90<br />
Car Stopped<br />
Hooooooo.......rn<br />
<br />
Car Number = 402<br />
Car Speed = 80<br />
Hooooooo.......rn<br />
Car Going</div>
</div>
Akshay Kaduhttp://www.blogger.com/profile/01831005519943444037noreply@blogger.com4