File style.css
body { font:30px arial; margin: 30px; padding: 10px; background: #959393; } #wrapper{ border: 3px solid black; background-color:#9e9e9e; height: 500px; } #header{ background-color:#66917a; text-align:center; padding: 8px; font-size:30px; } #header h1{ text-transform: uppercase; font-size:30px; font-style:italic; } #menu{ background-color: blue; } #menu ul{ padding: 20px; margin: 0px; font-weight: bold; text-transform: uppercase; } #menu ul li{ display: inline-block; } #menu ul li a{ color: white; font-size: 20px; padding:8px 10px; list-style:none; text-decoration: none; display: block; transition: all 2s ease; } #menu ul li a:hover{ background-color: #4c625678; } #main-content{ border: 1px solid yellow; min-height: 100px; padding: 30px; background-color: #efefef; } #main-content h2{ text-transform: capitalize; padding: 10px; font-size: 100px; } #main-content table{ width: 80%; border: 1px solid black; height: auto; } #main-content th{ border: 1px solid black; background-color: #788f8f; text-transform: uppercase; } #main-content td{ border: 1px solid black; text-align: center; background-color: #e7e7e2; } #main-content td a{ font-size: 20px; color: white; padding: 5px; text-align: center; background-color: #e17e21; text-transform: uppercase; } #main-content td a:nth-child(2){ background-color: red; } #main-content .post-form { width: 40%; margin: 0 auto; padding: 30px; background-color: #abafafd4; border-radius: 10px; } #main-content .post-form .form-group{ margin: 0 0 15px; } #main-content .post-form .form-group label{ font-size: 30px; display:block; width: 30%; margin: 0 0 12px; } #main-content .post-form .form-group input{ font-size: 30px; } #main-content .post-form .form-group .select{ font-size: 30px; } #main-content .post-form .submit{ background-color: black; color: white; font-size: 25px; margin-left: 30%; border-radius: 9px; padding: 10px; }
File add.php<!DOCTYPE html> <html> <head> <title>Add</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="header"> <h1>CRUD</h1> </div> <div id="menu"> <ul> <li> <a href="index.php">Home</a> </li> <li> <a href="add.php">Add</a> </li> <li> <a href="update.php">Update</a> </li> <li> <a href="delete.php">Delete</a> </li> </ul> </div> <div id="main-content"> <h2>add new record</h2> <form class="post-form" method="get" action="savedata.php"> <div class="form-group"> <label>Name</label> <input type="text" name="sname"> </div> <div class="form-group"> <label>Address </label> <input type="text" name="saddress" > </div> <div class="form-group"> <label>Phone</label> <input type="text" name="sphone" /> </div> <div class="form-group"> <label>Class</label> <select class="select" name="class"> <option selected disabled>Selected Class</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> </div> <input class="submit" type="submit" value="Save" /> </form> </div> </body> </html>File update.php<!DOCTYPE html> <html> <head> <title>update</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="header"> <h1>CRUD</h1> </div> <div id="menu"> <ul> <li> <a href="index.php">Home</a> </li> <li> <a href="add.php">Add</a> </li> <li> <a href="update.php">Update</a> </li> <li> <a href="delete.php">Delete</a> </li> </ul> </div> <div id="main-content"> <h2>edit record</h2> <form class="post-form" method="get" action="savedata.php"> <div class="form-group"> <label>Id</label> <input type="text" name="sid"> </div> <input class="submit" type="submit" value="show"> <div class="form-group"> <label>Name</label> <input type="text" name="sname"> </div> <div class="form-group"> <label>Address </label> <input type="text" name="saddress" > </div> <div class="form-group"> <label>Phone</label> <input type="text" name="sphone" /> </div> <div class="form-group"> <select class="select" name="class"> <option selected disabled>Selected Class</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> </div> <input class="submit" type="submit" value="Save" /> </form> </div> </body> </html>File delete.php<!DOCTYPE html> <html> <head> <title>delete</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="header"> <h1>CRUD</h1> </div> <div id="menu"> <ul> <li> <a href="index.php">Home</a> </li> <li> <a href="add.php">Add</a> </li> <li> <a href="update.php">Update</a> </li> <li> <a href="delete.php">Delete</a> </li> </ul> </div> <div id="main-content"> <h2>delete record</h2> <form class="post-form" method="get" action="savedata.php"> <div class="form-group"> <label>Id</label> <input type="text" name="sid"> </div> <input class="submit" type="submit" value="delete"> </form> </div> </body> </html>
File index.php<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="header"> <h1>CRUD</h1> </div> <div id="menu"> <ul> <li> <a href="index.php">Home</a> </li> <li> <a href="add.php">Add</a> </li> <li> <a href="update.php">Update</a> </li> <li> <a href="delete.php">Delete</a> </li> </ul> </div> <div id="main-content"> <h2>all record</h2> <table cellpadding="7px"> <thead> <th>Id</th> <th>Name</th> <th>Address</th> <th>Class</th> <th>Phone</th> <th>Action</th> </thead> <tbody> <tr> <td>1</td> <td>Ramesh</td> <td>Delhi</td> <td>BCA</td> <td>9876543210</td> <td> <a href='edit.php'>Edit</a> <a href='delete-inline.php'>Delete</a> </td> </tr> <tr> <td>2</td> <td>Suresh</td> <td>Punjab</td> <td>BCOM</td> <td>9876543210</td> <td> <a href='edit.php'>Edit</a> <a href='delete-inline.php'>Delete</a> </td> </tr> <tr> <td>3</td> <td>Suresh</td> <td>Haryana</td> <td>BSC</td> <td>9876543210</td> <td> <a href='edit.php'>Edit</a> <a href='delete-inline.php'>Delete</a> </td> </tr> <tr> <td>4</td> <td>Krishna</td> <td>Gujrat</td> <td>BCA</td> <td>9876543210</td> <td> <a href='edit.php'>Edit</a> <a href='delete-inline.php'>Delete</a> </td> </tr> <tr> <td>5</td> <td>Rohit</td> <td>Delhi</td> <td>BCA</td> <td>9876543210</td> <td> <a href='edit.php'>Edit</a> <a href='delete-inline.php'>Delete</a> </td> </tr> </tbody> </table> </div> </body> </html>
No comments:
Post a Comment