Build Sign Up and Login Forms With Bootstrap Modal

Learn to use bootstrap modal to display sign up and login form

4.35 (32 reviews)
Udemy
platform
English
language
Web Development
category
1,959
students
4 hours
content
Dec 2017
last update
$29.99
regular price

What you will learn

At the end of this course, you will be able to understand bootstrap modals

Create sign up form with bootstrap modal

Create login form with bootstrap modal

Create a single modal to display both sign up and login forms in tabs

Add simple form validations with jQuery

Use PHP/MYSQL to insert and fetch data from database

Description

Bootstrap modals are lightweight javascript popups that are used to display videos, images, alerts as well as forms for sign up, login and contact. The plugin for modals is part of bootstrap.js. 

In this course, we use bootstrap modals to display sign up and login forms to enrich users experience. We use html, css, bootstrap library, jquery plugin, php and mysql.

Features are:

  • Bootstrap modal with sign up form
  • Bootstrap modal with login form
  • Adding styles to the modals
  • Using bootstrap tabs in modal
  • Validate forms with jQuery
  • Insert and retrieve data with php
  • Save data in mysql database

Content

Separate Modals for Forms

Introduction
Install Local Development Environment
Create Project
Create Database Connection
Add Navbar
Add Styles To Navbar Links
Modal Description
Add Sign Up Modal
Adding Sign Up Form To Modal
Sign Up Form Fields Validation
Displaying Validation Errors
Send Data Via Ajax
PHP Insert Script
Insert Data To Database With Modal
Style Sign Up Modal
Add Login Form Modal
Login Form Fields Validation With JQuery
Login User PHP Script - Part 1
Login User PHP Script - Part 2
Clear Validation Errors
Display Login Failed Error
Add Font-Awesome user Icon
Add Table To Display All User Data

Single Modal For Forms

Add Modal Link
Add Bootstrap Tabs To Modal
Style Modal Tabs
Add Form Validation
PHP Script For Sign Up and Login
Add Table To Display All User Data
Delete Functionality
Conclusion

Screenshots

Build Sign Up and Login Forms With Bootstrap Modal - Screenshot_01Build Sign Up and Login Forms With Bootstrap Modal - Screenshot_02Build Sign Up and Login Forms With Bootstrap Modal - Screenshot_03Build Sign Up and Login Forms With Bootstrap Modal - Screenshot_04

Reviews

Jim
May 12, 2018
The course teaches how to use Bootstrap Modal and PHP to insert and retrieve data from MySQL database. Great course!
Erich
January 31, 2018
Its a pitty that such a clear and engaging instructor cannot provide the code for students to follow, even after several requests by many students and even after agreeing to provide. It makes it so much harder, and frustrating.
Abhi
January 7, 2018
A great experience is felt while learning from Uzochukwu Eddie Odozi Sir. I think he is a great instructor and teaches in a very well way. I would like to say this because the teaching techinique is so good that i don't have to ask any doubt. Thank You So Much Sir!
Matthew
September 18, 2017
Awesome course, great lecture and explanation on every subject covered. Look forward to doing some more web development courses to gain more experience Thank you so much Eddie or a great course and help during this course
Leslie
June 5, 2017
I feel that the second section should be redone to contain just 2 or 3 lectures on how to modify the project to have a single dialog for both sign up and login via tabs and then of course one for the additional delete functionality. That would have saved plenty of time going over the same thing again with copy and pasting code. Along the way I made note of the following important issues that may confuse some learners: (1) In lecture 20, the call $(".modal").on("hidden.bs.modal",..); is used to trap when a dialog gets closed to reset the fields and errors. This is done in both login.js and signup.js - the problem is that due to the way the files are included, BOTH of these functions will be called when either dialog gets closed because the class is being used - learners should look for an alternative solution, worst case use an ID to prevent this function call double up. (2) At the top of the two js modules, the same php module as the one used in each ajax call gets included. If the code is restructured you do not need that inclusion at all. What we are slowly ending up with is a mish-mash of file inclusions which would become a maintenance nightmare over time. So, while this was done purely for the presentation itself, this practice is not good and a rethink is advised. (3) the use of header(location:....) can be avoided when deleting a User simply by using jquery to delete the row from the table upon successful deletion - thus one less hit on the Server. Again learners need to understand that shortcuts have been taken for the purposes of illustrating a concept, these are NOT best practice from a coding perspective. Lastly, no source code has been provided. This made following along difficult because some frames are missing from the videos so we are not getting to see what code was typed in for long enough - sometimes not at all. Having said all of that, I did get what I needed from this course it was just made harder than it needed to be.
Ranjeet
December 6, 2016
Very clear and good tutorials, what ever explained... explained in well mannered. Thanks for the nice tutorial. Please provide more video to get excellent knowledge like this for those who can not afford money at starting point. Thank you once again.!

Charts

Price

Build Sign Up and Login Forms With Bootstrap Modal - Price chart

Rating

Build Sign Up and Login Forms With Bootstrap Modal - Ratings chart

Enrollment distribution

Build Sign Up and Login Forms With Bootstrap Modal - Distribution chart

Related Topics

1011550
udemy ID
11/14/2016
course created date
11/21/2019
course indexed date
Bot
course submited by