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