Ionic Framework

Creating Login and Registration Form in Ionic3

Posted On
Posted By Neha Dwivedi

Starting First Ionic Project:
After installing ionic(for installing ionic please visit: https://www.itechinsiders.com/ionic_installation/ ), now you can build your first app! In this tutorial, I’ll guide you how to start a new application, how to add pages, navigation between pages, how to design pages, how to include CSS and typescript. So Let’s get started!

Ionic provide some awesome templates:
tabs: simple 3 tab layout
side menu: a layout with a swipeable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project

To start a new app, open your terminal/command prompt and run:

Step 1: ionic start firstproject sidemenu –type=ionic-angular(for ionic 3)

Desc:
– start: start inform CLI to create new app.
– Project Name: firstproject is a project name app
– sidemenu: sidemenu will be the starter template of ionic app, which automatically contain sidemenu

type: type define which type of project you want to create. for ionic1 project we use -v1 flag for ionic2 project we -v2 flag and for ionic 3 we use -type=ionic-angular.

Now we have a directory with firstproject name we go inside the directory. by using cd cammand.
following command for display output:
Step 2:  cd firstproject
Step 3: ionic serve ( run this command inside the project directory).
Now we have a directory with a name firstproject inside the path you choose
Structure is like this :

there is 2 – pages is here :   1) list and, 2) home
and both contain 3- important files for more information about folder structure please visit: https://www.itechinsiders.com/ionic-folder-structure/
By default generated page is look like this :

After design page look like this:   -Login Page Design


Register page design is look like this :

Sidebar menu design is look like this :

Before start design the page or going adding pages we need to add all these pages into app.module.ts file within src/app folder.

import these lines


import { LoginPage } from '../pages/login/login';

import { RegisterPage } from '../pages/register/register';

add these pages name in


@NgModule({
declarations: [
MyApp,
LognPage,

RegisterPage
],

entryComponents: [
MyApp,
LoginPage,

RegisterPage
],

So let’s start the design part of the login page —- so open the Login.html(contain the structure part of app, we find all design related component on ionic official site ) file and write these code there

</pre>
<ion-header >
<ion-navbar color="primary">
<ion-title> Login <ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<div>
<ion-img [width]="imgWidth" [height]="imgHeight" src="assets/imgs/image_name"></ion-img>
</div>
<ion-row>
<ion-item >
<ion-label floating >Username</ion-label>
<ion-input type="text" name="Username" autocapitalize="none"></ion-input>
</ion-item>
</ion-row>

<ion-row>
<ion-item>
<ion-label floating >Password</ion-label>
<ion-input type="password" name="Password" autocapitalize="none"></ion-input>
</ion-item>
</ion-row>

<ion-row>
<button ion-button clear>Forgot Password ?</button>
</ion-row>
<div>
<button ion-button outline>Sign IN</button>
</div>
<p>OR</p>
<p>Signin with your Social Networks</p>
</div>
<div>
<ion-row >
<ion-col width-50>
<button ion-button icon-right>
<ion-icon ios="logo-facebook" md="logo-facebook"></ion-icon>
Facebook
</button>
</ion-col>
<ion-col width-50>
<button ion-button icon-right>
<ion-icon ios="logo-googleplus" md="logo-googleplus"></ion-icon>
Google
</button>
</ion-col>
</ion-row>
<ion-row >
<ion-col width-100>
<button ion-button clear (click)="signup()" >Not a Member yet? Signup Now</button>
</ion-col>
</ion-row>
</div>

</ion-content>

so open the login.scss(design part of app, you can use normal css or scss code as well) file and write these code there….


page-home {
.face1{
background-color:#6281AF;
color:#FFFFFF;
font-size:80%;
width:90%;

}
.gog1{
background-color:#E56969;
color:#FFFFFF;
font-size:80%;
width: 90%
}

.user{
color:black !important;
}

.cen1{
text-align:center;
}

.wid1{
width:75%;
}

so open the login.ts(contain the logic part of app which is basically in typescript) file and write these code there….


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoadingController } from 'ionic-angular';

import { LoginPage } from '../../pages/login/login';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,public loadingCtrl: LoadingController) {
}

login() {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 3000
});
loader.present();

loader.dismiss();

let alert = this.alertCtrl.create({
title: 'Login Successfully',
message: 'User Login Successfully',
buttons: [{
text: 'Ok',
role: 'ok',
handler: () => {
this.navCtrl.push(LoginPage );
}
}]
});
alert.present();
}
}

Now start the design part of the register page —- so open the register.html(contain the structure part of app, we find all design related component on ionic official site ) file and write these code there

</pre>
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Signup</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="back">
<img src="assets/imgs/applogo.png">
<ion-list no-lines>

<ion-item>
<ion-label floating class="label_text_color"><b>Full Name</b></ion-label>
<ion-input type="text" #fullname name="fullname" ></ion-input>
</ion-item>

<ion-item>
<ion-label floating class="label_text_color"><b>Mobile No.</b></ion-label>
<ion-input type="number" #mobile name="mobile" ></ion-input>
</ion-item>

<ion-item>
<ion-label floating class="label_text_color"><b>Email ID</b></ion-label>
<ion-input type="email" #email name="email"></ion-input>
</ion-item>

<ion-item>
<ion-label floating class="label_text_color"><b>Password</b></ion-label>
<ion-input type="password" #password name="password"></ion-input>
</ion-item>

<ion-item>
<ion-label floating class="label_text_color"><b>Confirm-Password</b></ion-label>
<ion-input type="password" #confirmpass name="confirmpass"></ion-input>
</ion-item>

<button ion-button class="register_page_design"
outline>Create Account</button>
</ion-list></form>
</ion-content>
<pre>

Now open the register.scss(design part of app, you can use normal css or scss code as well) file and write these code there….</strong>

.back{
width: 100%;
height: 100%;
background:linear-gradient(10deg,#5D6FCE,#55628F);
}

.scroll-content{
text-align: center;
}

ion-card.card{
background:rgba(232,230,230,0.6px);
border-radius: 10px;
}

.item{
background:rgba(232,230,230,0px);
}
ion-input{
border-bottom: #FD4D73 solid 1px;
}
.register_page_design{
width: 100%;border: 4px solid white;margin-top: 30px;color: white;
}

.label_text_color{
color: white
}

Now open the register.ts(contain the logic part of app which is basically in typescript) file and write these code there….

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AlertController, LoadingController } from 'ionic-angular';

@IonicPage()
@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
constructor(public navCtrl: NavController,public loadingCtrl: LoadingController public navParams: NavParams,public alertCtrl: AlertController) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad SignupPage');
}

register(){
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
let alert = this.alertCtrl.create({

loading.dismiss();
title: 'Registrtion Successful!',
message: 'Registrtion Successful!,
buttons: [{
text: 'Ok',
role: 'ok',
handler: (){
this.navCtrl.push(HomePage);
}
}]
});
alert.present();
}
}
else{
let alert = this.alertCtrl.create({
title: 'Registrtion Unuccessful!',
message: 'Registrtion Unuccessful!',
buttons: [{
text: 'Ok',
role: 'ok',
handler: () =&amp;amp;amp;amp;amp;gt; {
//this.navCtrl.push(login);
}
}]
});
alert.present();
}
}
}

Now we are ready to add platform and generate apk

Add ios platform
$ ionic cordova platform add ios

Add android platform
$ ionic cordova platform add android

Remove ios platform
$ ionic cordova platform rm ios

Remove android platform
$ ionic cordova platform rm ios

Generate apk for android device
ionic cordova build android

So in the end, we learn how to design login and registration page, how to navigate between pages, add alert box and loading, if you have any doubt please comment. 

Related Post

17 thoughts on “Creating Login and Registration Form in Ionic3
  1. 더나인카지노

    Hola! I’ve been following your web site for some time now
    and finally got the bravery to go ahead and give you a shout out from Kingwood Tx!
    Just wanted to tell you keep up the great work! https://wooricasino114.com

    • Neha Dwivedi

      thank you

  2. 007카지노

    Hey there! This is my 1st comment here so I just wanted to give a quick shout out and tell you I really enjoy reading your articles.

  3. 샌즈카지노

    I am now not positive where you are getting your information, but good topic.
    I must spend some time learning more or working out more.
    Thank you for wonderful info I used to be in search of this information for
    my mission.

  4. 코인카지노

    Just want to say your article is as astonishing.
    The clarity for your post is simply cool and i can think you
    are knowledgeable in this subject. Well with your permission allow me to take hold of your feed to keep up to date
    with coming near near post. Thanks one million and please continue the
    gratifying work.

  5. 우리카지노

    Hey There. I found your blog the use of msn. That is a really neatly written article.
    I will make sure to bookmark it and return to read more of your helpful information. Thank you for the post.
    I’ll certainly comeback.

  6. 코인카지노

    Yes! Finally something about quotes

  7. Jayson

    I’m nnow not sure the place you’re getting your info, however great topic.
    I must spend a while finding out much more orr figuring out more.

    Thanks for fantastic info I was searching for this info for my mission.

  8. Neha Dwivedi

    thank you guyz…

  9. Grady

    Hі there, constantly i used to check ᴡebpage poѕts here in the
    early hours in the break of day, as i enjoy to find out more and more.

  10. Terrell

    It’s very trouble-free to find out any topic on net as compared to textbooks, as I
    found this paragraph at this web page.

  11. Casey

    I like it when folks get together and share views.
    Great website, keep it up!

  12. Neha Dwivedi

    thank you for your feedback.

  13. Ned

    Now I am going to do my breakfast, later than having my breakfast coming over
    again to read further news.

  14. Lawanna

    Woah! I’m really digging the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between superb usability and appearance.
    I must say you have done a fantastic job with this.

    Also, the blog loads extremely quick for me on Opera.
    Excellent Blog!

  15. Myra

    I have been surfing online more than three hours lately, yet
    I never found any fascinating article like yours.
    It is beautiful worth enough for me. In my opinion, if all web owners and bloggers made just
    right content as you probably did, the net might be a lot more helpful than ever before.

  16. Launa

    You are so cool! I do not think I’ve truly read through something
    like this before. So good to discover another person with some original thoughts on this topic.
    Really.. many thanks for starting this up. This site is something that
    is required on the internet, someone with a little originality!

Comments are closed.

Latest Post

React Native

How to show loader on the image in react-native:

Read More
Posted On
React Native

How to use google-places-autocomplete in react native

Read More
Posted On
What's Arround

“Voodoo Doll”, Avatar-Like Version of You

Read More
Posted On
Magento

Got Spam registration: Magento 2.x

Read More
Posted On
DefaultMagento

Magento 2.x Command short hand code

Read More
Posted On