├── img ├── bank.png ├── user.jpg ├── user3.jpg ├── history.jpg └── transfer.jpg ├── config.php ├── css ├── navbar.css ├── table.css ├── style.css └── createuser.css ├── README.md ├── navbar.php ├── transactionhistory.php ├── index.php ├── sql └── sparks_bank.sql ├── transfermoney.php ├── createuser.php └── selecteduserdetail.php /img/bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shivangi22Agarwal/the-sparks-foundation/HEAD/img/bank.png -------------------------------------------------------------------------------- /img/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shivangi22Agarwal/the-sparks-foundation/HEAD/img/user.jpg -------------------------------------------------------------------------------- /img/user3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shivangi22Agarwal/the-sparks-foundation/HEAD/img/user3.jpg -------------------------------------------------------------------------------- /img/history.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shivangi22Agarwal/the-sparks-foundation/HEAD/img/history.jpg -------------------------------------------------------------------------------- /img/transfer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shivangi22Agarwal/the-sparks-foundation/HEAD/img/transfer.jpg -------------------------------------------------------------------------------- /config.php: -------------------------------------------------------------------------------- 1 | ".mysqli_connect_error()); 7 | } 8 | 9 | ?> -------------------------------------------------------------------------------- /css/navbar.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap'); 2 | .nav-link{ 3 | margin-right: 15px; 4 | color:#2F363F; 5 | letter-spacing: 0.5px; 6 | transition: 0.5s; 7 | } 8 | .navbar-brand{ 9 | color: #4C4B4B; 10 | letter-spacing: 0.5px; 11 | } 12 | h2{ 13 | color: #4C4B4B; 14 | letter-spacing: 0.5px; 15 | font-family: raleway; 16 | } -------------------------------------------------------------------------------- /css/table.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | h2{ 8 | font-size: 40px; 9 | } 10 | table{ 11 | letter-spacing: 1.2px; 12 | } 13 | td{ 14 | text-align: center; 15 | } 16 | button{ 17 | border:none; 18 | background: #d9d9d9; 19 | transition: 1s; 20 | } 21 | @media only screen and (orientation: portrait){ 22 | *{ 23 | letter-spacing: 1px; 24 | } 25 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # the-sparks-foundation 2 | Sparks Foundation Internship Project : Basic Banking System 3 | A Web Application used to transfer money between multiple users (Project contains 10 dummy users). A dummy user can also be created. 4 | 5 | Stack used - 6 | Front-end : HTML, CSS, Bootstrap & Javascript 7 | Back-end : PHP 8 | Database : MySQL 9 | 10 | Database contains two Tables- Users Table & Transaction Table 11 | 1. User table have basic fields such as name, email & current balance. 12 | 2. Transaction table records all transfers happened along with their time. 13 | 14 | Flow of the Website: Home Page > View all Users > Select and View one User > Transfer Money > Select reciever > View all Users > View Transfer History. 15 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | .intro{ 8 | background: #EAF0F1; 9 | } 10 | h1{ 11 | color: #4C4B4B; 12 | font-weight: bold; 13 | transition: 0.5s; 14 | } 15 | h3{ 16 | color:#2F363F; 17 | } 18 | button{ 19 | border:none; 20 | border-radius: 8px; 21 | padding: 10px; 22 | background:#7B8788; 23 | color:white; 24 | letter-spacing: 1.5px; 25 | font-size: 15px; 26 | transition: 0.5s; 27 | } 28 | button:hover,h1:hover{ 29 | transform: scale(1.1); 30 | } 31 | button:hover{ 32 | background-color:#4C4B4B; 33 | } 34 | footer{ 35 | color:#586776; 36 | background-color:#EAF0F1; 37 | letter-spacing: 0.5px; 38 | } 39 | footer p{ 40 | margin: 0; 41 | font-size: 15px; 42 | } 43 | @media only screen and (orientation:portrait){ 44 | .intro{ 45 | display:flex; 46 | flex-direction: column-reverse; 47 | } 48 | h1{ 49 | font-size: 30px; 50 | } 51 | .act{ 52 | padding-bottom: 100px; 53 | } 54 | } -------------------------------------------------------------------------------- /navbar.php: -------------------------------------------------------------------------------- 1 | 2 | 23 | -------------------------------------------------------------------------------- /transactionhistory.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transaction History 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 |
19 |

Transaction History

20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 57 | 58 |
S.No.SenderReceiverAmountDate & Time
59 | 60 |
61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /css/createuser.css: -------------------------------------------------------------------------------- 1 | button,input { 2 | font-family: 'Montserrat', sans-serif; 3 | font-weight: 700; 4 | letter-spacing: 1.4px; 5 | } 6 | .background { 7 | width: 100%; 8 | display: flex; 9 | } 10 | 11 | .container { 12 | flex: 0 1 700px; 13 | width: 100%; 14 | margin: auto; 15 | padding: 10px; 16 | } 17 | 18 | .screen { 19 | position: relative; 20 | background: #d9d9d9; 21 | border-radius: 15px; 22 | box-shadow: 5px 10px 10px rgba(0, 0, 0, .25); 23 | } 24 | 25 | .screen-header { 26 | display: flex; 27 | align-items: center; 28 | padding: 10px 20px; 29 | background: #7B8788; 30 | border-top-left-radius: 15px; 31 | border-top-right-radius: 15px; 32 | } 33 | 34 | .screen-header-right { 35 | display: flex; 36 | } 37 | 38 | .screen-header-ellipsis { 39 | width: 5px; 40 | height: 5px; 41 | margin-left: 3px; 42 | border-radius: 8px; 43 | background: #d9d9d9; 44 | } 45 | 46 | .screen-body { 47 | display: flex; 48 | } 49 | 50 | .screen-body-item { 51 | flex: 1; 52 | padding: 50px; 53 | } 54 | .app-form-group { 55 | margin-bottom: 15px; 56 | } 57 | 58 | .app-form-group.button { 59 | margin-bottom: 0; 60 | text-align: right; 61 | position: absolute; 62 | bottom: 30px; 63 | right:40px; 64 | } 65 | 66 | .app-form-control{ 67 | width: 100%; 68 | padding: 10px 0; 69 | background: none; 70 | border: none; 71 | border-bottom: 1px solid #4C4B4B; 72 | color: #4C4B4B; 73 | font-size: 14px; 74 | outline: none; 75 | transition: border-color .2s; 76 | } 77 | 78 | .app-form-control::placeholder { 79 | color: #666; 80 | } 81 | 82 | .app-form-control:focus { 83 | border-bottom-color: #4C4B4B; 84 | } 85 | 86 | .app-form-button { 87 | background: none; 88 | border: none; 89 | margin-left: 20px; 90 | color: #666; 91 | font-size: 14px; 92 | cursor: pointer; 93 | outline: none; 94 | } 95 | 96 | .app-form-button:hover { 97 | color: #262626; 98 | } 99 | 100 | @media screen and (max-width: 520px) { 101 | *{ 102 | letter-spacing:1px; 103 | } 104 | .container{ 105 | margin-left: 20px; 106 | margin-right: 20px; 107 | margin-bottom: 40px; 108 | } 109 | .screen-body { 110 | flex-direction: column; 111 | } 112 | 113 | .screen-body-item.left { 114 | margin-bottom: 50px; 115 | } 116 | .app-form-button{ 117 | margin-top:5px; 118 | } 119 | } 120 | 121 | @media screen and (max-width: 600px) { 122 | .screen-body { 123 | padding: 40px; 124 | } 125 | 126 | .screen-body-item { 127 | padding: 0; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Basic Banking System 14 | 15 | 16 | 17 | 20 | 21 |
22 | 23 |
24 |
25 |
26 |

Welcome to

27 |

SPARKS BANK

28 |
29 |
30 |
31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 |
40 | 41 |
42 |
43 | 44 |
45 | 46 |
47 |
48 | 49 |
50 | 51 |
52 |
53 |
54 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /sql/sparks_bank.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 5.0.2 3 | -- https://www.phpmyadmin.net/ 4 | -- 5 | -- Host: 127.0.0.1 6 | -- Generation Time: Oct 19, 2020 at 10:01 PM 7 | -- Server version: 10.4.14-MariaDB 8 | -- PHP Version: 7.2.33 9 | 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 11 | START TRANSACTION; 12 | SET time_zone = "+00:00"; 13 | 14 | 15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 18 | /*!40101 SET NAMES utf8mb4 */; 19 | 20 | -- 21 | -- Database: `sparks_bank` 22 | -- 23 | 24 | -- -------------------------------------------------------- 25 | 26 | -- 27 | -- Table structure for table `transaction` 28 | -- 29 | 30 | CREATE TABLE `transaction` ( 31 | `sno` int(3) NOT NULL, 32 | `sender` text NOT NULL, 33 | `receiver` text NOT NULL, 34 | `balance` int(8) NOT NULL, 35 | `datetime` datetime NOT NULL DEFAULT current_timestamp() 36 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; 37 | 38 | -- -------------------------------------------------------- 39 | 40 | -- 41 | -- Table structure for table `users` 42 | -- 43 | 44 | CREATE TABLE `users` ( 45 | `id` int(3) NOT NULL, 46 | `name` text NOT NULL, 47 | `email` varchar(30) NOT NULL, 48 | `balance` int(8) NOT NULL 49 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; 50 | 51 | -- 52 | -- Dumping data for table `users` 53 | -- 54 | 55 | INSERT INTO `users` (`id`, `name`, `email`, `balance`) VALUES 56 | (1, 'Salman', 'khan@gmail.com', 50000), 57 | (2, 'Kiara', 'advani@gmail.com', 30000), 58 | (3, 'Shahrukh', 'shah@gmail.com', 40000), 59 | (4, 'Priyanka', 'chopra@gmail.com', 50000), 60 | (5, 'Shahid', 'kapoor@gmail.com', 40000), 61 | (6, 'Ranbir', 'singh@gmail.com', 30000), 62 | (7, 'Deepika', 'padukone@gmail.com', 50000), 63 | (8, 'Juhi', 'chawla@gmail.com', 40000), 64 | (9, 'Nick', 'jonas@gmail.com', 30000), 65 | (10, 'Taapsee', 'pannu@gmail.com', 50000); 66 | 67 | -- 68 | -- Indexes for dumped tables 69 | -- 70 | 71 | -- 72 | -- Indexes for table `transaction` 73 | -- 74 | ALTER TABLE `transaction` 75 | ADD PRIMARY KEY (`sno`); 76 | 77 | -- 78 | -- Indexes for table `users` 79 | -- 80 | ALTER TABLE `users` 81 | ADD PRIMARY KEY (`id`); 82 | 83 | -- 84 | -- AUTO_INCREMENT for dumped tables 85 | -- 86 | 87 | -- 88 | -- AUTO_INCREMENT for table `transaction` 89 | -- 90 | ALTER TABLE `transaction` 91 | MODIFY `sno` int(3) NOT NULL AUTO_INCREMENT; 92 | 93 | -- 94 | -- AUTO_INCREMENT for table `users` 95 | -- 96 | ALTER TABLE `users` 97 | MODIFY `id` int(3) NOT NULL AUTO_INCREMENT; 98 | COMMIT; 99 | 100 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 101 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 102 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 103 | -------------------------------------------------------------------------------- /transfermoney.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transfer Money 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | 28 | 29 | 32 | 33 |
34 |

Transfer Money

35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 63 | 64 | 65 |
IdNameE-MailBalanceOperation
66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /createuser.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Create User 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | alert('Hurray! User created'); 24 | window.location='transfermoney.php'; 25 | "; 26 | 27 | } 28 | } 29 | ?> 30 | 31 | 34 | 35 |

Create a User

36 |
37 | 38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 |
52 |
53 |
54 |
55 | 56 |
57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 |
65 | 66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /selecteduserdetail.php: -------------------------------------------------------------------------------- 1 | '; 24 | echo ' alert("Oops! Negative values cannot be transferred")'; // showing an alert box. 25 | echo ''; 26 | } 27 | 28 | 29 | 30 | // constraint to check insufficient balance. 31 | else if($amount > $sql1['balance']) 32 | { 33 | 34 | echo ''; 37 | } 38 | 39 | 40 | 41 | // constraint to check zero values 42 | else if($amount == 0){ 43 | 44 | echo ""; 47 | } 48 | 49 | 50 | else { 51 | 52 | // deducting amount from sender's account 53 | $newbalance = $sql1['balance'] - $amount; 54 | $sql = "UPDATE users set balance=$newbalance where id=$from"; 55 | mysqli_query($conn,$sql); 56 | 57 | 58 | // adding amount to reciever's account 59 | $newbalance = $sql2['balance'] + $amount; 60 | $sql = "UPDATE users set balance=$newbalance where id=$to"; 61 | mysqli_query($conn,$sql); 62 | 63 | $sender = $sql1['name']; 64 | $receiver = $sql2['name']; 65 | $sql = "INSERT INTO transaction(`sender`, `receiver`, `balance`) VALUES ('$sender','$receiver','$amount')"; 66 | $query=mysqli_query($conn,$sql); 67 | 68 | if($query){ 69 | echo ""; 72 | 73 | } 74 | 75 | $newbalance= 0; 76 | $amount =0; 77 | } 78 | 79 | } 80 | ?> 81 | 82 | 83 | 84 | 85 | 86 | 87 | Transaction 88 | 89 | 90 | 91 | 92 | 105 | 106 | 107 | 108 | 109 | 112 | 113 |
114 |

Transaction

115 | ".mysqli_error($conn); 123 | } 124 | $rows=mysqli_fetch_assoc($result); 125 | ?> 126 |

127 |
128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
IdNameEmailBalance
142 |
143 |


144 | 145 | 169 |
170 |
171 | 172 | 173 |

174 |
175 | 176 |
177 |
178 |
179 | 180 | 181 | 182 | --------------------------------------------------------------------------------