Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <...
- First step we will connect to the database.
- Then we will select the database.
- We are checking, if the form is submitted or not. In this step we have two logic’s.
- What if the form is submitted.
- If the form is submitted, we are assigning the posted values to variables and checking the values are existing in the database or not.
- If the values submitted in the form and the values in the database are equal, then we will create a session for the user.
- If the values are not equal then it will display an error message.
- And then we checks for the session, if the session exists we will great him with the username, otherwise the form will be displayed.
- What if not the form is submitted.
- When the user comes first time, he will be displayed with a simple form.
- User Name, Password and a submit button.
- What if the form is submitted.
1
Create a table
If you are already following from previous article, you should already have table created. If you don’t have create the table.
1 | CREATE TABLE ` user ` ( |
2 | `id` int (11) NOT NULL AUTO_INCREMENT, |
3 | `username` varchar (255) NOT NULL , |
4 | `email` varchar (255) NOT NULL , |
5 | ` password ` varchar (255) NOT NULL , |
6 | `active` tinyint(1) NOT NULL , |
7 | PRIMARY KEY (`id`), |
8 | UNIQUE KEY `username` (`username`) |
9 | ) |
2
Creating HTML Form
This is the form, only displayed if message variable in not set.
1 | <div class = "register-form" > |
2 | <?php |
3 | if (isset( $msg ) & ! empty ( $msg )){ |
4 | echo $msg ; |
5 | } |
6 | ?> |
7 | <h1>Login</h1> |
8 | <form action= "" method= "POST" > |
9 | <p><label>User Name : </label> |
10 | <input id= "username" type= "text" name= "username" placeholder= "username" /></p> |
11 | |
12 | <p><label>Password : </label> |
13 | <input id= "password" type= "password" name= "password" placeholder= "password" /></p> |
14 | |
15 | <a class = "btn" href= "register.php" >Signup</a> |
16 | <input class = "btn register" type= "submit" name= "submit" value= "Login" /> |
17 | </form> |
18 | </div> |
19 | <?php } ?> |
3
Adding styles to form
And the styles for the form, if you have added styles in previous article. Skip this step.
1 | .register-form{ |
2 | width : 500px ; |
3 | margin : 0 auto ; |
4 | text-align : center ; |
5 | padding : 10px ; |
6 | color : #fff ; |
7 | background : #c4c4c4 ; |
8 | border-radius: 10px ; |
9 | -webkit-border-radius: 10px ; |
10 | -moz-border-radius: 10px ; |
11 | } |
12 |
13 | .register-form form input{ padding : 5px ;} |
14 | .register-form .btn{ background : #726E6E ; |
15 | padding : 7px ; |
16 | border-radius: 5px ; |
17 | text-decoration : none ; |
18 | width : 50px ; |
19 | display : inline- block ; |
20 | color : #FFF ;} |
21 |
22 | .register-form .register{ |
23 | border : 0 ; |
24 | width : 60px ; |
25 | padding : 8px ; |
26 | } |
4
Connect to Database
If you are following from previous user registration article, no need to create this file. Other wise create connect.php file.
1 | <?php |
2 | $connection = mysql_connect( 'localhost' , 'root' , '' ); |
3 | if (! $connection ){ |
4 | die ( "Database Connection Failed" . mysql_error()); |
5 | } |
6 | $select_db = mysql_select_db( 'test' ); |
7 | if (! $select_db ){ |
8 | die ( "Database Selection Failed" . mysql_error()); |
9 | } |
5
PHP Logic for User Login
And this is the PHP code for logging in user
1 | <?php //Start the Session |
2 | session_start(); |
3 | require ( 'connect.php' ); |
4 | //3. If the form is submitted or not. |
5 | //3.1 If the form is submitted |
6 | if (isset( $_POST [ 'username' ]) and isset( $_POST [ 'password' ])){ |
7 | //3.1.1 Assigning posted values to variables. |
8 | $username = $_POST [ 'username' ]; |
9 | $password = $_POST [ 'password' ]; |
10 | //3.1.2 Checking the values are existing in the database or not |
11 | $query = "SELECT * FROM `user` WHERE username='$username' and password='$password'" ; |
12 | |
13 | $result = mysql_query( $query ) or die (mysql_error()); |
14 | $count = mysql_num_rows( $result ); |
15 | //3.1.2 If the posted values are equal to the database values, then session will be created for the user. |
16 | if ( $count == 1){ |
17 | $_SESSION [ 'username' ] = $username ; |
18 | } else { |
19 | //3.1.3 If the login credentials doesn't match, he will be shown with an error message. |
20 | echo "Invalid Login Credentials." ; |
21 | } |
22 | } |
23 | //3.1.4 if the user is logged in Greets the user with message |
24 | if (isset( $_SESSION [ 'username' ])){ |
25 | $username = $_SESSION [ 'username' ]; |
26 | echo "Hai " . $username . " |
27 | "; |
28 | echo "This is the Members Area |
29 | "; |
30 | echo "<a href='logout.php'>Logout</a>" ; |
31 | |
32 | } else { |
33 | //3.2 When the user visits the page first time, simple login form will be displayed. |
34 | ?> |
Comments
Post a Comment
Comment